/* ============================================================
   L'ATELIER — V2 « atelier de parfumerie » (brief de Samy, 13/11/2026)
   Habillage seul, chargé après atelier.css et limité à .at--v2.
   Il ne change ni les questions, ni le moteur, ni l'achat.

   Rythme : noir brun et ambre pour le mystère (entrée, révélation,
   résultat) ; ivoire et champagne pour la lecture (questions, récapitulatif).
   ============================================================ */
.at--v2 {
  --v2a-nuit: #120D0A; --v2a-brun: #1E1611; --v2a-ivoire: #F7F1E6; --v2a-carte: #FFFDF8;
  --v2a-champagne: #E2C48A; --v2a-champagne-2: #C9A45F; --v2a-or-texte: #7C6127;
  --v2a-serif: 'Cormorant Garamond', Georgia, serif; --v2a-sans: 'Jost', system-ui, sans-serif;
  --v2a-ease: cubic-bezier(.22, .61, .36, 1);
}
.at--v2.at--p3 {
  --paper: var(--v2a-ivoire); --ink: var(--v2a-brun); --muted: #5E5446; --gold: var(--v2a-or-texte);
  --line: #DDD3C2; --wash: #EFE7D8;
  --serif: var(--v2a-serif); --sans: var(--v2a-sans); --italic: var(--v2a-serif);
}
.at--v2 .p3 h1 { font-weight: 500; letter-spacing: -.01em; line-height: 1.08; font-size: 33px; margin: 22px 0 12px; }
.at--v2 .p3 em { font-weight: 500; }
.at--v2 .at__stage.p3 { font-size: 15px; font-weight: 300; }

/* ── Barre : le logotype officiel, sur le noir de l'atelier ───── */
.at--v2 .p3-bar { min-height: 64px; padding: max(10px, env(safe-area-inset-top)) 20px 8px; background: var(--v2a-nuit); border-bottom: 0; }
.at--v2 .p3-logo, .at--v2 .at__scene-logo {
  display: block; width: 68px; height: 46px; min-height: 0; font-size: 0; color: transparent; letter-spacing: 0;
  background: var(--v2a-champagne);
  -webkit-mask: url('/assets/atelier/produit/carat-logotype-seul.svg') center / contain no-repeat;
          mask: url('/assets/atelier/produit/carat-logotype-seul.svg') center / contain no-repeat;
}
.at--v2 .p3-bar .p3-quiet { color: rgba(247, 241, 230, .74); font: 400 12px/1 var(--v2a-sans); letter-spacing: .06em; }
.at--v2 .p3-bar .p3-quiet:hover { color: var(--v2a-champagne); }
.at--v2 .p3 button:focus-visible, .at--v2 .p3 a:focus-visible { outline-color: var(--v2a-champagne-2); }
/* Sur les écrans ivoire (questions, récapitulatif, précision), le champagne ne fait que 2,1:1 :
   l'anneau passe à l'or foncé (5,2:1). La barre noire et l'entrée gardent le champagne. */
.at--v2.at--p3:not(.at--intro) #at-body button:focus-visible,
.at--v2.at--p3:not(.at--intro) #at-body a:focus-visible { outline-color: var(--v2a-or-texte); }

/* Sur-titre entre deux filets. */
.v2a-over { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; color: var(--v2a-champagne); font: 500 11.5px/1 var(--v2a-sans); letter-spacing: .3em; text-transform: uppercase; }
.v2a-over::before, .v2a-over::after { content: ''; width: 34px; height: 1px; background: var(--v2a-champagne-2); }

/* Bouton principal : la capsule champagne de la maison. */
.at--v2 .p3-primary, .at--v2 .at__cta--buy {
  min-height: 56px; padding: 14px 26px; border: 0; border-radius: 99px; gap: 14px;
  background: linear-gradient(180deg, #EBD3A0 0%, #C9A45F 100%); color: var(--v2a-brun);
  box-shadow: 0 16px 28px -18px rgba(201, 164, 95, .9);
  font: 600 12.5px/1 var(--v2a-sans); letter-spacing: .18em; text-transform: uppercase;
  transition: transform .25s var(--v2a-ease), filter .25s var(--v2a-ease);
}
.at--v2 .p3-primary:hover:not(:disabled) { background: linear-gradient(180deg, #EBD3A0 0%, #C9A45F 100%); filter: brightness(1.05); }
/* Le survol de l'ancienne feuille (#2A231B) rendait l'achat illisible (texte brun sur brun) : la capsule reste champagne. */
.at--v2 .at__cta--buy:hover:not(:disabled) { background: linear-gradient(180deg, #EBD3A0 0%, #C9A45F 100%); border-color: transparent; filter: brightness(1.05); }
.at--v2 .p3-primary:active:not(:disabled), .at--v2 .at__cta--buy:active { transform: scale(.985); }
.at--v2 .p3-primary:disabled { background: var(--wash); color: #7F7566; box-shadow: none; }

/* ── 1 · L'entrée dans l'atelier ──────────────────────────────── */
.at--v2.at--intro { background: var(--v2a-nuit); }
.at--v2.at--intro .at__stage.p3 { position: relative; }
.at--v2.at--intro .p3-bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; justify-content: center; background: none; }
.at--v2 .v2a-entree {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 100dvh; max-width: none; margin: 0; padding: 92px 22px calc(24px + env(safe-area-inset-bottom));
  overflow: hidden; color: var(--v2a-ivoire); text-align: center; background: var(--v2a-nuit);
}
.v2a-entree__photo, .v2a-entree__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2a-entree__photo img { max-width: none; object-fit: cover; object-position: 50% 58%; }
/* Deux voiles : le haut pour le titre, le bas pour le bouton. La scène reste nue au milieu. */
.v2a-entree::before, .v2a-entree::after { content: ''; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; }
.v2a-entree::before { top: 0; height: 52%; background: linear-gradient(to bottom, rgba(18, 13, 10, .86) 0%, rgba(18, 13, 10, .58) 44%, rgba(18, 13, 10, 0) 100%); }
.v2a-entree::after { bottom: 0; height: 34%; background: linear-gradient(to top, rgba(18, 13, 10, .96) 0%, rgba(18, 13, 10, .72) 46%, rgba(18, 13, 10, 0) 100%); }
.v2a-entree__haut, .v2a-entree__bas { position: relative; z-index: 1; }
.at--v2 .v2a-entree h1 { margin: 18px 0 12px; color: var(--v2a-ivoire); font: 500 clamp(40px, 11.6vw, 54px)/1.02 var(--v2a-serif); letter-spacing: -.01em; }
.at--v2 .v2a-entree h1 em { color: var(--v2a-champagne); font-weight: 500; }
.at--v2 .v2a-entree__sous { max-width: 27ch; margin: 0 auto; color: rgba(247, 241, 230, .92); font: 300 16px/1.5 var(--v2a-sans); }
.at--v2 .v2a-entree .p3-primary { width: 100%; max-width: 420px; }
.v2a-reperes { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 0; padding: 0; list-style: none; }
.v2a-reperes li { padding: 2px 8px; color: var(--v2a-ivoire); font: 400 13px/1.3 var(--v2a-sans); }
.v2a-reperes li + li { border-left: 1px solid rgba(226, 196, 138, .45); }
.v2a-reperes small { display: block; margin-top: 4px; color: rgba(247, 241, 230, .72); font-size: 11.5px; font-weight: 300; }

/* ── 2 · Les questions : une surface ivoire, des cartes illustrées ── */
.at--v2 .p3-workbench { padding: 20px 20px 28px; }
.at--v2 .p3-progress { font: 500 11px/1 var(--v2a-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--v2a-or-texte); }
.at--v2 .p3-rail span { background: var(--v2a-champagne-2); }
.at--v2 .p3-help { margin-bottom: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.at--v2 .p3-choices { border-top: 0; display: grid; gap: 10px; }
.at--v2 .p3-choice {
  min-height: 62px; padding: 13px 14px; border: 0; border-radius: 12px; background: var(--v2a-carte);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s var(--v2a-ease), transform .2s var(--v2a-ease), opacity .2s;
}
.at--v2 .p3-choice[aria-pressed="true"] { background: var(--v2a-carte); box-shadow: inset 0 0 0 2px var(--v2a-champagne-2), 0 12px 22px -16px rgba(124, 97, 39, .7); }
.at--v2 .p3-choice:active:not(:disabled) { transform: scale(.985); }
.at--v2 .p3-choice:disabled { background: transparent; opacity: .55; }
.at--v2 .p3-choice-name { font: 500 19px/1.15 var(--v2a-serif); }
.at--v2 .p3-choice-repere { margin-top: 5px; font-size: 11px; letter-spacing: .12em; }
.at--v2 .p3-choice-detail { margin-top: 3px; font-size: 13px; line-height: 1.4; font-weight: 300; }
.at--v2 .p3-choice-mark { width: 22px; height: 22px; margin: 0; border-color: #B5A88F; background: var(--v2a-carte); }
.at--v2 .p3-choice[aria-pressed="true"] .p3-choice-mark { background: var(--v2a-champagne-2); border-color: var(--v2a-champagne-2); }
.at--v2 .p3-choice-mark svg { stroke: #fff; }

/* Cartes illustrées : la photographie d'abord, deux par rang. */
.at--v2 .p3-choices:has(.p3-vignette) { grid-template-columns: 1fr 1fr; column-gap: 10px; }
.at--v2 .p3-choice:has(.p3-vignette) { position: relative; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; overflow: hidden; }
.at--v2 .p3-vignette { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.at--v2 .p3-choice:has(.p3-vignette) .p3-choice-copy { padding: 10px 38px 12px 12px; }
.at--v2 .p3-choice:has(.p3-vignette) .p3-choice-name { font-size: 17.5px; }
.at--v2 .p3-choice:has(.p3-vignette) .p3-choice-mark { position: absolute; right: 10px; bottom: 11px; }
.at--v2 .p3-compact .p3-choice { min-height: 0; padding: 0; gap: 0; }
.at--v2 .p3-compact .p3-exclusive { flex-direction: row; align-items: center; gap: 12px; min-height: 58px; padding: 12px 14px; }
.at--v2 .p3-compact .p3-exclusive .p3-choice-name { font-size: 18px; }
/* Trois réponses illustrées (l'intensité, la question de repli) : une par ligne, image à gauche. */
.at--v2 .p3-choices:has(.p3-vignette):has(.p3-choice:nth-child(3):last-child) { grid-template-columns: 1fr; }
.at--v2 .p3-choices:has(.p3-choice:nth-child(3):last-child) .p3-choice:has(.p3-vignette) { flex-direction: row; align-items: center; min-height: 92px; }
.at--v2 .p3-choices:has(.p3-choice:nth-child(3):last-child) .p3-vignette { width: 38%; height: 100%; min-height: 92px; aspect-ratio: auto; }
.at--v2 .p3-choices:has(.p3-choice:nth-child(3):last-child) .p3-choice-copy { padding: 10px 44px 10px 14px; }
.at--v2 .p3-choices:has(.p3-choice:nth-child(3):last-child) .p3-choice-mark { top: 50%; bottom: auto; margin-top: -11px; }
.at--v2 .p3-presence .p3-choice, .at--v2 .p3-presence .p3-choice:nth-child(n) { min-height: 92px; }
.at--v2 .p3-presence .p3-choice .p3-choice-name { font-size: 21px; }
.at--v2 .p3-presence .p3-choice:nth-child(2) .p3-choice-name { font-size: 23px; }
.at--v2 .p3-presence .p3-choice:nth-child(3) .p3-choice-name { font-size: 25px; }

.at--v2 .p3-status { margin: 10px 0 0; font-size: 12.5px; }
.at--v2 .p3-note, .at--v2 .p3-grise { font-size: 13px; line-height: 1.55; font-weight: 300; }
.at--v2 .p3-back { color: var(--ink); font: 400 13px/1 var(--v2a-sans); letter-spacing: .04em; }
.at--v2 .p3-summary h1 { font-size: 38px; }
.at--v2 .p3-summary dt { font: 500 11px/1.3 var(--v2a-sans); letter-spacing: .12em; text-transform: uppercase; }
.at--v2 .p3-summary dd { font: 500 20px/1.3 var(--v2a-serif); }
.at--v2 .p3-parfums .at__pf-aucun { border-radius: 99px; }

/* ── 3 · Entre deux questions : l'atelier reprend la parole ───── */
body:has(.at--v2) .at__narr { background: rgba(18, 13, 10, .97); }
body:has(.at--v2) .at__narr p { color: var(--v2a-champagne, #E2C48A); font-weight: 400; }

/* Voile d'attente du moteur (logique inchangée) : le noir de l'atelier, le logotype à la place
   du mot, et les grains dorés nettement atténués. Il s'ouvre ensuite depuis le flacon. */
.at--v2 .at__rev { background: #120D0A; }
.at--v2 .at__rev-c { opacity: .28; }
.at--v2 .at__rev-marque {
  width: 84px; height: 58px; margin: 0 auto 22px; font-size: 0; letter-spacing: 0; text-indent: 0; opacity: 1; background: var(--v2a-champagne);
  -webkit-mask: url('/assets/atelier/produit/carat-logotype-seul.svg') center / contain no-repeat;
          mask: url('/assets/atelier/produit/carat-logotype-seul.svg') center / contain no-repeat;
}
.at--v2 .at__rev-attente, .at--v2 .at__rev-titre { font-family: var(--v2a-serif); }

/* ── 4 · La révélation : la dernière image du film ────────────────
   Une photographie du flacon L'Atelier dans l'atelier. Le titre se pose
   dans le noir du haut ; le numéro, une phrase et l'achat dans le noir du
   bas. Le numéro de la Création, seul texte variable, s'imprime aussi dans
   le cartouche de l'étiquette (laissé vide sur la photographie).

   Géométrie au téléphone et à la tablette en portrait : la photographie (2:3)
   est toujours ajustée en HAUTEUR et centrée. Plus large que l'écran, elle
   est rognée sur les côtés ; plus étroite, ses bords se fondent dans le noir.
     --sh  hauteur de la scène ;
     --ht  place du titre : la gâchette (17,06 % de la photographie) commence dessous ;
     --r   bande noire posée au-dessus de la photographie quand l'écran est trop bas
           pour que le noir de la photographie suffise au titre ;
     --ih, --iw, --it  hauteur, largeur et bord haut de la photographie. */
.at--v2.at--res {
  background: #120D0A;
  /* Le résultat reste dans le noir de l'atelier : ses variables repassent au clair sur sombre. */
  --at-cream: #F7F1E6; --at-soft: rgba(247, 241, 230, .86); --at-mute: rgba(247, 241, 230, .7);
  --at-gold: #E2C48A; --at-gold-lit: #EBD3A0; --at-line: rgba(247, 241, 230, .14); --at-line-2: rgba(247, 241, 230, .22);
  /* 120 px de moins que l'écran : le numéro, la phrase et l'achat tiennent dans le premier écran. */
  --sh: clamp(440px, calc(100dvh - 120px), 900px);
  --ht: calc(122px + env(safe-area-inset-top));
  --r: max(0px, calc((var(--ht) - var(--sh) * .1706) / .8294));
  --ih: calc(var(--sh) - var(--r));
  --iw: calc(var(--ih) * .6667);
  --it: var(--r);
}
.at--v2.at--res .at__inner { padding-bottom: 96px; }
.at--v2 .v2a-revel {
  /* Centre du cartouche vide et largeur utile, en fractions de la photographie (mesurés sur l'image retenue). */
  --cx: .4927; --cy: .5388; --cl: .2;
  position: relative; display: block; container-type: size; overflow: hidden;
  height: var(--sh); min-height: 0; padding: 0;
  background: #120D0A; color: var(--v2a-ivoire); text-align: center;
  -webkit-mask-image: none; mask-image: none;
}
.v2a-revel__photo {
  position: absolute; top: var(--it); left: calc(50% - var(--iw) / 2);
  width: var(--iw); height: var(--ih); max-width: none; object-fit: cover;
  /* Bords fondus dans le noir de l'atelier : ils ne se voient que si la photographie
     est plus étroite que la scène, ou posée sous la bande du titre. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%);
          mask-composite: intersect;
}
/* Voiles de lecture : le haut pour le titre, le bas pour le numéro et l'achat. */
.v2a-revel::before, .v2a-revel::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.v2a-revel::before { top: 0; height: calc(var(--it) + var(--ih) * .3); background: linear-gradient(to bottom, #120D0A 0, rgba(18, 13, 10, .9) var(--it), rgba(18, 13, 10, .55) calc(var(--it) + var(--ih) * .156), rgba(18, 13, 10, 0) 100%); }
.v2a-revel::after { bottom: 0; height: calc(var(--ih) * .3); background: linear-gradient(to top, #120D0A 0%, rgba(18, 13, 10, .92) 45%, rgba(18, 13, 10, .62) 75%, rgba(18, 13, 10, 0) 100%); }
.v2a-revel__haut { position: relative; z-index: 2; padding: calc(8px + env(safe-area-inset-top)) 22px 0; }
/* Le logotype : 56 × 38 à l'œil, 44 px de haut au toucher. */
.at--v2 .v2a-revel .at__scene-logo { position: static; width: 56px; height: 44px; margin: 0 auto 2px; transform: none; }
.at--v2 .v2a-pret { margin: 10px 0 0; color: var(--v2a-ivoire); font: 500 clamp(26px, 7.7vw, 34px)/1.08 var(--v2a-serif); letter-spacing: -.01em; white-space: nowrap; }
.at--v2 .v2a-pret em { color: var(--v2a-champagne); font-style: italic; font-weight: 500; }
.at--v2 .v2a-pret:focus { outline: none; }
/* Le numéro, dans le cartouche de l'étiquette, à la taille de « Signature secrète » imprimé dessous. */
.v2a-revel__cartouche {
  position: absolute; z-index: 1;
  left: calc(50% + (var(--cx) - .5) * var(--iw)); top: calc(var(--it) + var(--cy) * var(--ih));
  width: calc(var(--cl) * var(--iw)); transform: translate(-50%, -50%);
  color: #3B3733; font: 600 calc(var(--iw) * .0135)/1 var(--v2a-sans); letter-spacing: .13em; text-transform: uppercase; text-align: center; white-space: nowrap;
}
/* Sous la photographie, remonté dans son noir : le numéro, une phrase, l'achat.
   Le bloc remonte de 23 % de la photographie : c'est la hauteur du noir laissé sous le flacon. */
.at--v2.at--res .at__fiche.v2a-revel__bas { position: relative; z-index: 3; max-width: 520px; margin: calc(var(--ih) * -.23) auto 0; padding: 0 20px; background: none; text-align: center; }
.v2a-revel__creation { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.v2a-revel__creation b { color: var(--v2a-ivoire); font: 500 26px/1 var(--v2a-serif); letter-spacing: .02em; }
.v2a-revel__creation span { color: var(--v2a-champagne); font: 500 11.5px/1 var(--v2a-sans); letter-spacing: .24em; text-transform: uppercase; }
/* Le tiret suit le numéro (il ne peut donc jamais ouvrir une ligne) ; sans numéro, la ligne dit « Signature secrète » seule. */
.v2a-revel__creation b::after { content: '—'; margin-left: 10px; color: var(--v2a-champagne-2); font: 500 11.5px/1 var(--v2a-sans); letter-spacing: 0; }
.at--v2.at--res .v2a-revel__bas .at__res-lede { max-width: none; margin: 10px auto 0; color: rgba(247, 241, 230, .92); font: 300 14.5px/1.45 var(--v2a-sans); }
.v2a-revel__bas .at__res-lede span { display: block; }
.at--v2.at--res .v2a-revel__bas .at__acts { margin-top: 16px; }
.at--v2 .at__cta--buy { width: 100%; }
.v2a-revel__modifier { display: block; min-height: 44px; margin: 4px auto 0; padding: 0 14px; border: 0; background: none; color: rgba(247, 241, 230, .82); font: 400 12.5px/1 var(--v2a-sans); letter-spacing: .08em; text-decoration: underline; text-decoration-color: rgba(226, 196, 138, .6); text-underline-offset: 5px; cursor: pointer; }
.v2a-revel__modifier:focus-visible { outline: 2px solid var(--v2a-champagne-2); outline-offset: 2px; }
.at--v2.at--res .at__prep { margin-top: 10px; color: rgba(247, 241, 230, .68); }
.at--v2 .at__sticky { background: rgba(18, 13, 10, .94); }
/* Caché, le rappel d'achat sort aussi de l'ordre de tabulation : visibility suit le fondu
   (elle bascule à la fin de la sortie, au début de l'entrée). Affiché, rien ne change. */
.at--v2 .at__sticky { visibility: hidden; transition: transform .45s var(--ease), opacity .35s var(--ease), visibility 0s linear .45s; }
.at--v2 .at__sticky.on { visibility: visible; transition-delay: 0s; }
/* Écran étroit : « Création N°XX — Signature secrète » ne tient plus sur une ligne (345 px au plus).
   Le numéro, puis « Signature secrète » dessous, sans tiret. */
@media (max-width: 388px) {
  .v2a-revel__creation { flex-direction: column; align-items: center; gap: 8px; }
  .v2a-revel__creation b::after { content: none; }
}
/* « Recevoir ma Signature — 29,90 € » reste sur une ligne, dans la capsule : l'interlettrage se resserre. */
@media (max-width: 419px) {
  .at--v2.at--res .at__cta--buy { padding-inline: 18px; gap: 10px; letter-spacing: .12em; }
}
@media (max-width: 370px) {
  .at--v2.at--res .at__cta--buy { padding-inline: 14px; gap: 8px; letter-spacing: .07em; }
}
@media (max-width: 340px) {
  .at--v2.at--res .at__cta--buy { font-size: 12px; }
  .at--v2.at--res .at__cta--buy::after { content: none; }
}
/* Sous 335 px, « Son nom se dévoile chez vous, au premier geste. » passe sur deux lignes ; l'équilibrage
   coupait « chez / vous ». Une largeur de 13,6 em fait couper après la virgule (texte inchangé). */
@media (max-width: 334px) {
  .v2a-revel__bas .at__res-lede span + span { max-width: 13.6em; margin-inline: auto; text-wrap: wrap; }
}
/* Écran bas en portrait (320 × 568) : « Modifier mes réponses » sortait du premier écran (552–596 px).
   La scène prend 140 px de moins que l'écran au lieu de 120 (le titre et la gâchette ne bougent pas :
   --r recale la photographie sous le titre) et les écarts du bloc se resserrent. */
@media (max-height: 600px) and (orientation: portrait) {
  .at--v2.at--res { --sh: clamp(400px, calc(100dvh - 140px), 900px); }
  .v2a-revel__creation { gap: 4px; }
  .at--v2.at--res .v2a-revel__bas .at__res-lede { margin-top: 6px; }
  .at--v2.at--res .v2a-revel__bas .at__acts { margin-top: 12px; }
  .v2a-revel__modifier { margin-top: 0; }
}

/* La lumière se lève sur le flacon, puis le numéro s'imprime. L'achat est là dès la première image. */
@media (prefers-reduced-motion: no-preference) {
  .v2a-revel__photo { animation: v2a-lumiere 2.2s cubic-bezier(.3, .1, .2, 1) both; }
  .v2a-revel__cartouche { animation: v2a-encre .9s ease 1.5s both; }
  .v2a-revel__creation { animation: v2a-encre .9s ease 1.1s both; }
  .v2a-revel__haut { animation: v2a-encre .9s ease .2s both; }
}
@keyframes v2a-lumiere { from { filter: brightness(.16) saturate(.7); transform: scale(1.05); } 60% { filter: brightness(.9) saturate(.96); } to { filter: none; transform: none; } }
@keyframes v2a-encre { from { opacity: 0; } to { opacity: 1; } }
/* Le bouton d'achat n'attend aucune animation. */
.at--v2.at--res .at__enter > .v2a-revel__bas, .at--v2.at--res .at__enter > .v2a-revel { animation: none; opacity: 1; transform: none; }

/* La suite, plus bas : le profil en bref, le secret, le geste. */
.at--v2.at--res .at__fiche { background: #120D0A; color: var(--v2a-ivoire); }
.at--v2.at--res .v2a-revel__profil { padding-top: 0; }
.at--v2.at--res .at__why { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(247, 241, 230, .16); text-align: left; }
.at--v2.at--res .at__why h2, .at--v2.at--res .at__usage dt { color: var(--v2a-champagne); font: 500 11.5px/1.2 var(--v2a-sans); letter-spacing: .24em; text-transform: uppercase; }
.at--v2.at--res .at__why p, .at--v2.at--res .at__usage dd, .at--v2.at--res .at__int-lib { color: rgba(247, 241, 230, .86); font-family: var(--v2a-sans); font-weight: 300; }
.at--v2.at--res .at__why .at__profil b { display: block; margin-top: 6px; color: var(--v2a-ivoire); font: 500 26px/1.15 var(--v2a-serif); letter-spacing: 0; text-transform: none; }
.at--v2.at--res .at__int-mot { color: var(--v2a-champagne); }
.at--v2.at--res .at__int-points i { border-color: rgba(226, 196, 138, .6); }
.at--v2.at--res .at__int-points i.on { background: var(--v2a-champagne); border-color: var(--v2a-champagne); }
.at--v2.at--res .at__usage div { border-color: rgba(247, 241, 230, .16); }
.at--v2.at--res .at__autre a { color: var(--v2a-ivoire); }
.at--v2.at--res .at__secret { background: none; }
.at--v2.at--res .at__secret-t, .at--v2.at--res .at__secret-t i { color: var(--v2a-champagne); font-family: var(--v2a-serif); }
.at--v2.at--res .at__secret-p { color: rgba(247, 241, 230, .84); font-family: var(--v2a-sans); font-weight: 300; }

/* ── Grand écran ──────────────────────────────────────────────── */
@media (min-width: 900px) {
  .at--v2 .p3-bar { min-height: 76px; padding: 14px 44px; }
  .at--v2.at--intro .p3-bar { justify-content: flex-start; }
  .at--v2 .v2a-entree { display: flex; align-items: flex-start; justify-content: center; gap: 44px; padding: 120px 8vw 60px; text-align: left; }
  .v2a-entree__photo img { object-position: 50% 50%; }
  .v2a-entree::before { top: 0; bottom: 0; height: auto; width: 62%; right: auto; background: linear-gradient(to right, rgba(18, 13, 10, .9) 0%, rgba(18, 13, 10, .66) 52%, rgba(18, 13, 10, 0) 100%); }
  .v2a-entree::after { display: none; }
  .v2a-entree .v2a-over { justify-content: flex-start; }
  .v2a-entree .v2a-over::before { display: none; }
  .at--v2 .v2a-entree h1 { font-size: 76px; margin: 22px 0 18px; }
  .at--v2 .v2a-entree__sous { margin: 0; font-size: 19px; max-width: 30ch; }
  .v2a-entree__bas { width: min(100%, 480px); }
  .v2a-reperes li { text-align: left; padding: 2px 16px; }
  .v2a-reperes li:first-child { padding-left: 0; }
  .at--v2 .p3-workbench { padding: 44px 48px 48px; }
  .at--v2 .p3 h1 { font-size: 46px; }
  .at--v2 .p3-visual img { border-radius: 14px; }
  /* Les odeurs : quatre cartes par rang (trois sous 1200 px), vignettes moins hautes ;
     la barre « Continuer » reste collée au bas de l'écran, comme au téléphone. */
  .at--v2 .p3-question h1 { max-width: 26ch; }
  .at--v2 .p3-choices:has(.p3-vignette) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at--v2 .p3-choices:has(.p3-vignette):has(.p3-choice:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at--v2 .p3-choices:not(:has(.p3-choice:nth-child(3):last-child)) .p3-vignette { aspect-ratio: 16 / 9; }
  .at--v2 .p3-question .p3-actions {
    position: sticky; bottom: 0; z-index: 3; margin-top: 18px; padding: 14px 0 18px;
    background: var(--paper); box-shadow: 0 -14px 18px var(--paper);
  }
}
@media (min-width: 1200px) {
  .at--v2 .p3-choices:has(.p3-vignette), .at--v2 .p3-choices:has(.p3-vignette):has(.p3-choice:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Révélation sur deux colonnes : grands écrans, et téléphone en paysage ──
   La photographie tient la colonne de gauche, l'achat s'aligne à droite. */
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .at--v2.at--res .at__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding-bottom: 0; }
  .at--v2.at--res .at__fiche, .at--v2.at--res .at__secret, .at--v2.at--res .at__fiche--fin { grid-column: 2; }
  .at--v2 .v2a-revel { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 0; }
  .v2a-revel::before { height: 30%; background: linear-gradient(to bottom, rgba(18, 13, 10, .9) 0%, rgba(18, 13, 10, .55) 52%, rgba(18, 13, 10, 0) 100%); }
  .v2a-revel::after { height: 12%; }
  .at--v2.at--res .at__fiche.v2a-revel__bas { grid-column: 2; max-width: 540px; margin: 0; text-align: left; }
  .v2a-revel__bas .at__res-lede span { display: inline; }
  .v2a-revel__creation { justify-content: flex-start; }
  .at--v2.at--res .v2a-revel__bas .at__res-lede { margin-left: 0; max-width: 34ch; }
  .at--v2 .at__cta--buy { width: auto; min-width: 360px; }
  .v2a-revel__modifier { margin-left: 0; padding-left: 0; }
  .at--v2.at--res .at__prep { margin-left: 0; text-align: left; }
}
/* Grand écran : la photographie couvre la colonne, sauf si le flacon entier, de la gâchette
   à la base, n'y tiendrait plus sous le titre (130 px) et au-dessus du bas (40 px) ; dans ce cas
   elle se réduit et ses bords se fondent. Elle est calée pour poser la base du flacon à 40 px du bas. */
@media (min-width: 900px) {
  .at--v2.at--res { --sh: max(100svh, 560px); }
  .at--v2 .v2a-revel {
    --ih: min(calc(max(100cqw, var(--sh) * .6667) * 1.5), calc((var(--sh) - 170px) / .5846));
    --iw: calc(var(--ih) * .6667);
    --it: clamp(calc(var(--sh) - var(--ih)), calc(var(--sh) - 40px - var(--ih) * .7552), 0px);
  }
  .at--v2 .v2a-pret { font-size: 42px; }
  .at--v2.at--res .at__fiche.v2a-revel__bas { padding: clamp(150px, 30vh, 300px) 56px 0 48px; }
  /* Le numéro et « Signature secrète » sur une ligne dans la colonne de droite (408 px utiles à 1024 px). */
  .v2a-revel__creation b { font-size: 34px; }
  .at--v2.at--res .v2a-revel__bas .at__res-lede { font-size: 18px; }
  .at--v2.at--res .v2a-revel__profil { padding: 0 56px 0 48px; }
  .at--v2.at--res .at__secret, .at--v2.at--res .at__fiche--fin { padding-left: 48px; }
}
@media (min-width: 1200px) { .v2a-revel__creation b { font-size: 38px; } }
/* Téléphone en paysage (écran bas, quelle que soit sa largeur) : la photographie est ajustée pour
   que le flacon entier tienne entre le titre et le bas de l'écran ; l'achat, à droite, reste dans l'écran. */
@media (orientation: landscape) and (max-height: 520px) {
  .at--v2.at--res { --sh: 100dvh; --ht: 118px; }
  .at--v2 .v2a-revel {
    min-height: 0;
    --ih: calc((var(--sh) - var(--ht) - 14px) / .5846);
    --iw: calc(var(--ih) * .6667);
    --it: calc(var(--sh) - 14px - var(--ih) * .7552);
  }
  .at--v2 .v2a-pret { font-size: 26px; }
  /* Le titre déborde de la photographie, sur la fenêtre éclairée : voile du haut plus dense. */
  .v2a-revel::before { height: 34%; background: linear-gradient(to bottom, rgba(18, 13, 10, .94) 0%, rgba(18, 13, 10, .82) 62%, rgba(18, 13, 10, 0) 100%); }
  .at--v2.at--res .at__fiche.v2a-revel__bas { padding: max(20px, calc(50dvh - 112px)) max(24px, env(safe-area-inset-right)) 0 12px; }
  .v2a-revel__creation b { font-size: 28px; }
  .at--v2.at--res .v2a-revel__bas .at__res-lede { font-size: 14.5px; }
  .at--v2 .at__cta--buy { min-width: 0; width: 100%; max-width: 380px; }
  .at--v2.at--res .v2a-revel__profil { padding: 0 24px 0 12px; }
  .at--v2.at--res .at__secret, .at--v2.at--res .at__fiche--fin { padding-left: 12px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .at--v2 .p3-primary, .at--v2 .at__cta--buy, .at--v2 .p3-choice { transition: none; }
}