/* ═══════════════════════════════════════════════════════════════
   L'ATELIER — parcours de révélation olfactive

   Thème unique : sombre, chaud, cinématographique. Un seul accent,
   l'or champagne. La lumière vient des photographies, jamais d'un
   dégradé décoratif.

   Le parcours traverse volontairement trois intensités :
   entrée en pleine image → questions sur fond reculé → voile noir
   avant la révélation. Ce n'est pas une alternance de thèmes, c'est
   une seule respiration qui se resserre puis s'ouvre.
   ═══════════════════════════════════════════════════════════════ */

.at {
  /* Fonds — jamais de noir pur, le noir pur tue la profondeur. */
  --at-ink:      #0C0908;
  --at-ink-2:    #15100C;
  --at-panel:    rgba(28, 22, 17, .52);
  --at-panel-on: rgba(40, 32, 23, .72);

  /* Filets */
  --at-line:     rgba(240, 231, 216, .12);
  --at-line-2:   rgba(240, 231, 216, .24);

  /* Encre claire */
  --at-cream:    #F2EBDF;
  --at-soft:     rgba(242, 235, 223, .68);
  /* .40 tombait à 3,34:1 sur le fond : sous le minimum AA pour du
     petit texte. .56 remonte à ~5:1. */
  --at-mute:     rgba(242, 235, 223, .56);

  /* Accent unique */
  --at-gold:     #C9A96A;
  --at-gold-lit: #E3C892;

  /* Formes : deux rayons seulement, et la règle est stricte —
     12px pour tout ce qui porte une image ou un panneau,
     8px pour tout ce qui se clique. */
  --r:   12px;
  --r-s: 8px;

  --ease: cubic-bezier(.16, 1, .3, 1);

  position: fixed; inset: 0; z-index: 100;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--at-ink);
  color: var(--at-cream);
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* ── Fond photographique ──────────────────────────────────────
   Une seule image pour tout le parcours. Elle avance à l'entrée,
   recule derrière les questions, disparaît sous le voile. */
.at__bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  transition: opacity .9s var(--ease), filter .9s var(--ease);
}
.at__bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 42%;
  animation: at-derive 34s ease-in-out infinite alternate;
}
/* Voile de lisibilité : plus dense en bas, là où vit le texte. */
.at__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,9,8,.72) 0%, rgba(12,9,8,.30) 30%,
                            rgba(12,9,8,.72) 72%, rgba(12,9,8,.95) 100%),
    radial-gradient(120% 80% at 50% 30%, transparent 30%, rgba(12,9,8,.6) 100%);
}
@keyframes at-derive {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(0, -1.4%, 0); }
}

/* Chaque écran donne au fond sa juste place. */
.at--intro .at__bg { opacity: 1; }
.at--q     .at__bg { opacity: .34; filter: blur(3px); }
.at--q3    .at__bg { opacity: .16; filter: blur(6px); }
.at--veil  .at__bg { opacity: 0; }
.at--res   .at__bg { opacity: .26; filter: blur(4px); }

/* ── Ossature ─────────────────────────────────────────────────── */
/* La coque est purement structurelle : ses enfants participent
   directement au flex de .at, le fond reste hors du cycle de rendu. */
.at__shell { display: contents; }
.at__bar, .at__phases, .at__foot, .at__stage { position: relative; z-index: 1; }

.at__bar {
  flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 20px 12px;
}
.at__logo {
  justify-self: start;
  font-family: var(--f-serif, Georgia, serif);
  font-size: 15px; letter-spacing: .30em; text-transform: uppercase;
  color: var(--at-cream); text-decoration: none;
}
.at__mark { justify-self: center; text-align: center; }
.at__mark b {
  display: block; font-weight: 400;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--at-soft);
}
.at__mark i {
  display: block; width: 34px; height: 1px; margin: 7px auto 0;
  background: var(--at-gold); opacity: .7;
}
.at__step {
  justify-self: end;
  font-size: 11px; letter-spacing: .16em; color: var(--at-mute);
  font-variant-numeric: tabular-nums;
}

/* Bandeau de phases : repère de progression sémantique.
   Masqué sous 900px, où le compteur et les segments suffisent. */
.at__phases { display: none; }

.at__stage {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 20px 20px;
  display: flex; flex-direction: column; justify-content: center;
}
/* L'intro et le résultat sont longs : les centrer ferait commencer
   la lecture au milieu. */
/* L'entrée pose son texte en bas : l'atelier occupe le regard d'abord,
   et le bloc de décision n'atterrit pas sur les mains du parfumeur. */
.at--intro .at__stage { justify-content: flex-end; }
.at--res   .at__stage { justify-content: flex-start; }
.at__inner { width: 100%; max-width: 520px; margin: 0 auto; }

.at__foot {
  flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px;
  padding: 10px 20px max(14px, env(safe-area-inset-bottom));
}
.at__rail { justify-self: center; display: flex; gap: 5px; }
.at__rail i {
  width: 26px; height: 1px; background: var(--at-line-2);
  transition: background .5s var(--ease);
}
.at__rail i.on { background: var(--at-gold); }

.at__back {
  justify-self: start;
  background: none; border: 0; padding: 10px 2px; cursor: pointer;
  font-family: inherit; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--at-mute);
  transition: color .2s var(--ease);
}
.at__back:hover { color: var(--at-soft); }

/* ── Apparition du contenu ────────────────────────────────────── */
.at__enter > * {
  opacity: 0;
  animation: at-in .7s var(--ease) forwards;
}
.at__enter > *:nth-child(1) { animation-delay: .04s; }
.at__enter > *:nth-child(2) { animation-delay: .11s; }
.at__enter > *:nth-child(3) { animation-delay: .18s; }
.at__enter > *:nth-child(4) { animation-delay: .25s; }
.at__enter > *:nth-child(5) { animation-delay: .32s; }
.at__enter > *:nth-child(n+6) { animation-delay: .38s; }
@keyframes at-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── Typographie commune ──────────────────────────────────────── */
.at__num {
  font-size: 12px; letter-spacing: .16em; color: var(--at-gold);
  margin: 0 0 10px; font-variant-numeric: tabular-nums;
}
.at__q {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: clamp(27px, 7vw, 40px); line-height: 1.14;
  letter-spacing: -.01em; margin: 0 0 10px;
  text-wrap: balance; color: var(--at-cream);
}
.at__sub {
  font-size: 13.5px; line-height: 1.5; color: var(--at-soft);
  margin: 0 0 22px; max-width: 42ch;
}
/* Note éditoriale de la colonne droite — ≥1024px seulement, là où
   la composition a besoin d'un contrepoids. */
.at__aside { display: none; }

/* ── Q1 · panneaux tactiles ───────────────────────────────────── */
.at__opts { display: flex; flex-direction: column; gap: 8px; }
.at__opt {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 17px 52px 17px 18px; cursor: pointer;
  background: var(--at-panel);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--at-line); border-radius: var(--r);
  color: var(--at-cream); font-family: inherit;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .18s var(--ease);
}
.at__opt b {
  display: block; font-family: var(--f-serif, Georgia, serif);
  font-weight: 400; font-size: 20px; line-height: 1.2;
  transition: color .25s var(--ease);
}
.at__opt span {
  display: block; margin-top: 5px; font-size: 13px; line-height: 1.45;
  color: var(--at-soft); max-width: 34ch;
}
/* Un chevron cerclé : signe qu'on entre, pas qu'on coche.
   Une croix aurait dit « ajouter » — ce n'est pas l'action. */
.at__opt::before {
  content: ''; position: absolute; right: 17px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  border: 1px solid var(--at-line-2);
  transition: border-color .25s var(--ease);
}
.at__opt::after {
  content: ''; position: absolute; right: 26px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 1px solid var(--at-mute); border-top: 1px solid var(--at-mute);
  transform: rotate(45deg);
  transition: border-color .25s var(--ease), transform .3s var(--ease);
}
.at__opt:hover { border-color: var(--at-line-2); background: var(--at-panel-on); }
.at__opt:active { transform: scale(.99); }
.at__opt:focus-visible { outline: 2px solid var(--at-gold); outline-offset: 3px; }
.at__opt[aria-pressed="true"] { border-color: var(--at-gold); background: var(--at-panel-on); }
.at__opt[aria-pressed="true"] b { color: var(--at-gold-lit); }
.at__opt:hover::before { border-color: var(--at-gold); }
.at__opt[aria-pressed="true"]::before { border-color: var(--at-gold); }
.at__opt[aria-pressed="true"]::after {
  border-right-color: var(--at-gold); border-top-color: var(--at-gold);
  transform: rotate(45deg) translate3d(1.5px, -1.5px, 0);
}

/* ── Q2 · citations, aucun cadre ──────────────────────────────── */
.at__quotes { display: flex; flex-direction: column; }
.at__quote {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  padding: 22px 30px 22px 0;
  background: none; border: 0; border-top: 1px solid var(--at-line);
  font-family: var(--f-italic, Georgia, serif); font-style: italic;
  font-size: clamp(19px, 5vw, 23px); line-height: 1.38;
  color: var(--at-cream);
  transition: color .25s var(--ease), padding-left .3s var(--ease);
}
.at__quotes .at__quote:last-child { border-bottom: 1px solid var(--at-line); }
.at__quote::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--at-gold); opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.at__quote:hover { padding-left: 8px; color: var(--at-gold-lit); }
.at__quote:focus-visible { outline: 2px solid var(--at-gold); outline-offset: 2px; }
.at__quote[aria-pressed="true"] { padding-left: 8px; color: var(--at-gold-lit); }
.at__quote[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }

/* ── Q3 · les quatre univers, moment visuel du parcours ───────── */
.at__univers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.at__uni {
  position: relative; aspect-ratio: 3 / 4; min-height: 150px;
  padding: 0; cursor: pointer; overflow: hidden;
  background: var(--at-ink-2);
  border: 1px solid var(--at-line); border-radius: var(--r);
  display: flex; align-items: flex-end;
  /* Un <button> centre son texte : la légende doit rester alignée
     à gauche comme le reste de la page. */
  text-align: left;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.at__uni img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .9s var(--ease);
}
.at__uni::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,9,8,.05) 38%, rgba(12,9,8,.88) 100%);
}
.at__uni-txt { position: relative; z-index: 1; width: 100%; padding: 14px 13px; }
.at__uni-txt em {
  display: block; font-style: normal;
  font-family: var(--f-serif, Georgia, serif);
  /* « MÉDITERRANÉE » est le mot le plus long : la taille s'y ajuste. */
  font-size: clamp(13px, 3.9vw, 17px);
  letter-spacing: .06em; text-transform: uppercase; color: #FFF;
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
  overflow-wrap: anywhere;
}
.at__uni-txt small {
  display: block; margin-top: 6px;
  font-size: 9px; letter-spacing: .09em; line-height: 1.55;
  text-transform: uppercase; color: rgba(255,255,255,.74);
}
.at__uni:hover img, .at__uni[aria-pressed="true"] img { transform: scale(1.05); }
.at__uni:active { transform: scale(.99); }
.at__uni:focus-visible { outline: 2px solid var(--at-gold); outline-offset: 3px; }
.at__uni[aria-pressed="true"] { border-color: var(--at-gold); }
.at__uni[aria-pressed="true"]::after {
  background: linear-gradient(180deg, rgba(201,169,106,.14) 0%, rgba(12,9,8,.9) 100%);
}

/* ── Q4 et Q5 · mots, deux colonnes, filets ───────────────────── */
.at__chips {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 20px; border-top: 1px solid var(--at-line);
}
.at__chip {
  position: relative; min-height: 56px; cursor: pointer; text-align: left;
  padding: 16px 22px 16px 0;
  background: none; color: var(--at-cream);
  border: 0; border-bottom: 1px solid var(--at-line);
  font-family: var(--f-serif, Georgia, serif);
  font-size: 17px; font-weight: 400; line-height: 1.25;
  transition: color .22s var(--ease);
}
.at__chip::after {
  content: ''; position: absolute; right: 2px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--at-gold); opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.at__chip:hover:not(:disabled) { color: var(--at-gold-lit); }
.at__chip:focus-visible { outline: 2px solid var(--at-gold); outline-offset: 2px; }
.at__chip[aria-pressed="true"] { color: var(--at-gold); }
.at__chip[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
.at__chip:disabled { opacity: .26; cursor: not-allowed; }

/* ── Q6 · l'échelle montre la réponse ─────────────────────────── */
.at__echelle { display: flex; flex-direction: column; }
.at__niv {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  padding: 20px 30px 20px 0;
  background: none; color: var(--at-cream);
  border: 0; border-top: 1px solid var(--at-line);
  font-family: inherit;
  transition: padding-left .3s var(--ease);
}
.at__echelle .at__niv:last-child { border-bottom: 1px solid var(--at-line); }
.at__niv b {
  display: block; font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  line-height: 1.1; transition: color .25s var(--ease);
}
/* La taille croît avec la présence : on lit la réponse avant de la lire. */
/* Q7 — l'échelle typographique EST la réponse : on doit comprendre
   Subtile < Présente < Remarquable avant de lire les descriptions.

   La progression était 1,00 / 1,33 / 1,75 : trop ouverte en haut, le
   dernier palier écrasait les deux autres. Une base unique et deux
   rapports explicites donnent une montée régulière.

     Subtile      1,00
     Présente     1,25
     Remarquable  1,58

   Les descriptions secondaires (.at__niv span) ne bougent pas : c'est
   l'écart entre les TITRES qui porte le sens. */
.at__echelle { --niv: clamp(21px, 5.2vw, 24px); }
.at__niv[data-n="0"] b { font-size: var(--niv); }
.at__niv[data-n="1"] b { font-size: calc(var(--niv) * 1.25); }
.at__niv[data-n="2"] b { font-size: calc(var(--niv) * 1.58); }
.at__niv span {
  display: block; margin-top: 6px; font-size: 13px; line-height: 1.45;
  color: var(--at-soft); max-width: 34ch;
}
.at__niv::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--at-gold); opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.at__niv:hover { padding-left: 8px; }
.at__niv:hover b { color: var(--at-gold-lit); }
.at__niv:focus-visible { outline: 2px solid var(--at-gold); outline-offset: 2px; }
.at__niv[aria-pressed="true"] { padding-left: 8px; }
.at__niv[aria-pressed="true"] b { color: var(--at-gold); }
.at__niv[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }

/* ── Boutons ──────────────────────────────────────────────────── */
.at__acts { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.at__cta {
  flex: 1; min-height: 54px; padding: 16px 20px; cursor: pointer;
  border: 1px solid var(--at-gold); border-radius: var(--r-s);
  background: none; color: var(--at-gold-lit);
  font-family: inherit; font-size: 12px; font-weight: 500;
  letter-spacing: .20em; text-transform: uppercase; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease),
              transform .15s var(--ease);
}
.at__cta:hover:not(:disabled) { background: rgba(201,169,106,.12); }
.at__cta:active:not(:disabled) { transform: scale(.99); }
.at__cta:focus-visible { outline: 2px solid var(--at-gold); outline-offset: 3px; }
/* Désactivé : un contour éteint, jamais un aplat gris. */
.at__cta:disabled {
  border-color: var(--at-line); color: var(--at-mute); cursor: not-allowed;
}
/* Achat : le seul aplat plein du parcours, réservé à la conversion. */
.at__cta--buy {
  background: var(--at-gold); border-color: var(--at-gold); color: #17120A;
  letter-spacing: .16em; font-size: 12.5px; font-weight: 600;
}
.at__cta--buy:hover { background: var(--at-gold-lit); border-color: var(--at-gold-lit); }
.at__cta--link { text-align: center; text-decoration: none; line-height: 22px; display: block; }

/* ── Entrée de l'Atelier ──────────────────────────────────────── */
.at--intro .at__stage { padding-bottom: 30px; }
.at__intro { padding-top: 0; }
/* Sur l'entrée, le repère du bandeau ferait doublon avec le surtitre. */
.at--intro .at__mark { visibility: hidden; }
.at--intro .at__bg img { object-position: 52% 26%; }
.at--intro .at__bg::after {
  background:
    linear-gradient(180deg, rgba(12,9,8,.62) 0%, rgba(12,9,8,.18) 22%,
                            rgba(12,9,8,.86) 58%, rgba(12,9,8,.97) 100%);
}
.at__eyebrow {
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--at-gold); margin: 0 0 18px;
}
.at__title {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: clamp(38px, 11.5vw, 62px);
  /* Descendantes de « Signature » : jamais moins de 1.08 ici. */
  line-height: 1.08; letter-spacing: -.018em;
  margin: 0 0 20px; padding-bottom: 4px; color: var(--at-cream);
}
.at__title i { font-family: var(--f-italic, Georgia, serif); color: var(--at-gold-lit); }
.at__lede {
  font-size: 15px; line-height: 1.6; color: var(--at-soft);
  margin: 0 0 30px; max-width: 36ch;
}
.at__note {
  margin: 14px 0 0; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--at-mute);
}

/* ── Voile de transition ──────────────────────────────────────── */
.at--veil { background: #080605; }
.at--veil .at__logo { color: rgba(242,235,223,.34); }
.at__veil { text-align: center; padding: 8vmin 0; }
.at__veil h2 {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: clamp(25px, 6.6vw, 34px); line-height: 1.2;
  margin: 0 0 12px; color: var(--at-cream);
}
.at__veil p {
  font-family: var(--f-italic, Georgia, serif); font-style: italic;
  font-size: 17px; color: var(--at-soft); margin: 0 0 34px;
}
/* Un filet d'or qui se trace : le seul mouvement du voile. */
.at__draw { position: relative; height: 1px; background: var(--at-line); overflow: hidden; }
.at__draw::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--at-gold-lit), transparent);
  transform: scaleX(0); transform-origin: left;
  animation: at-draw 2.6s var(--ease) infinite;
}
@keyframes at-draw {
  0%   { transform: scaleX(0);   transform-origin: left; }
  46%  { transform: scaleX(1);   transform-origin: left; }
  54%  { transform: scaleX(1);   transform-origin: right; }
  100% { transform: scaleX(0);   transform-origin: right; }
}

/* ── Résultat ─────────────────────────────────────────────────── */
/* Réserve la hauteur du rappel d'achat : le dernier lien ne doit
   jamais passer dessous. */
.at--res .at__inner { max-width: 560px; padding-bottom: 88px; }
.at__res-over {
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--at-gold); margin: 6px 0 16px;
}
/* ── Visuel produit du résultat ────────────────────────────────
   La source est un portrait 560×835 (ratio 0,671). Le produit y va de
   5,8 % (haut du pistolet) à ~90 % (base du flacon), mesuré sur les
   quatre univers.

   Le cadre précédent forçait un 4/3 : `cover` n'affichait alors que
   0,671 / 1,333 = 50 % de la hauteur source, et le pistolet passait
   à la trappe. En 3/4 on en montre 89,5 %, soit de 1,3 % à 90,8 % de
   la source avec un ancrage à 46 % : le produit tient entier, avec de
   l'air au-dessus du pistolet.

   La TAILLE est pilotée par la hauteur, pas par la largeur : l'image
   devient un packshot portrait centré, et le CTA reste haut. Aucune
   déformation — le ratio est respecté, `cover` ne fait que cadrer. */
.at__hero {
  margin: 18px 0 20px;
  display: flex; justify-content: center;
}
.at__hero img {
  display: block;
  height: min(44vh, 430px);
  width: auto; max-width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 46%;
  border-radius: var(--r);
  background: var(--at-ink-2);
  border: 1px solid var(--at-line);
  animation: at-reveal 1.3s var(--ease) both;
}
@media (min-width: 900px) {
  /* Le desktop peut donner plus de présence au produit : la hauteur
     d'écran y est moins disputée. */
  .at__hero img { height: min(52vh, 560px); }
}
@keyframes at-reveal {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}
.at__hero-num {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--f-serif, Georgia, serif);
  font-size: 12px; letter-spacing: .18em; color: #FFF;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.at__name {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: clamp(32px, 9vw, 46px); line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 12px; color: var(--at-cream);
}
/* Les descripteurs forment une seule ligne d'attributs, pas deux
   étiquettes posées côte à côte. */
.at__desc span + span::before {
  content: '·'; display: inline-block; margin: 0 11px; color: var(--at-mute);
}
.at__desc {
  display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0 0 14px;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--at-soft);
}
.at__sens {
  font-family: var(--f-italic, Georgia, serif); font-style: italic;
  font-size: 18px; line-height: 1.45; color: var(--at-soft);
  margin: 0 0 26px; max-width: 38ch;
}
.at__prep {
  margin: 12px 0 0; text-align: center;
  font-size: 12px; color: var(--at-mute);
}
.at__why {
  margin: 34px 0 0; padding-top: 26px; border-top: 1px solid var(--at-line);
}
.at__why h2 {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--at-gold); font-weight: 400; margin: 0 0 16px;
}
.at__why p {
  font-size: 15px; line-height: 1.62; color: var(--at-soft); margin: 0 0 10px;
}
.at__proof {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px;
  margin: 32px 0 0; padding-top: 26px; border-top: 1px solid var(--at-line);
}
.at__proof b {
  display: block; font-family: var(--f-serif, Georgia, serif);
  font-weight: 400; font-size: 18px; color: var(--at-cream);
}
.at__proof span {
  display: block; margin-top: 5px; font-size: 13px; line-height: 1.45;
  color: var(--at-mute);
}
.at__claim {
  margin: 38px 0 0; text-align: center;
  font-family: var(--f-serif, Georgia, serif);
  font-size: clamp(20px, 5.4vw, 25px); line-height: 1.32; color: var(--at-cream);
}
.at__claim i { font-family: var(--f-italic, Georgia, serif); color: var(--at-gold-lit); }
.at__alt { margin: 30px 0 0; text-align: center; }
.at__alt button {
  background: none; border: 0; cursor: pointer; padding: 10px 2px;
  font-family: inherit; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--at-mute);
  border-bottom: 1px solid var(--at-line-2);
}
.at__alt button:hover { color: var(--at-soft); }
.at__alt-rev {
  font-family: var(--f-italic, Georgia, serif); font-style: italic;
  font-size: 16px; color: var(--at-soft);
}

/* Rappel d'achat : apparaît quand le CTA principal sort du champ.
   Un seul libellé d'achat sur la page, jamais deux blocs identiques. */
.at__sticky {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(12,9,8,0), rgba(12,9,8,.94) 34%);
  transform: translate3d(0, 110%, 0); opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
  pointer-events: none;
}
.at__sticky.on { transform: none; opacity: 1; pointer-events: auto; }
.at__sticky .at__cta { width: 100%; }

/* ── Erreur ───────────────────────────────────────────────────── */
.at__err { text-align: center; padding: 8vmin 0; }
.at__err h2 {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: clamp(22px, 5.6vw, 28px); line-height: 1.24;
  margin: 0 0 10px; color: var(--at-cream);
}
.at__err p { color: var(--at-soft); margin: 0; font-size: 15px; }

/* ── Mouvement réduit ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .at__bg img, .at__enter > *, .at__hero img, .at__draw::after { animation: none; }
  .at__enter > * { opacity: 1; }
  .at__draw::after { opacity: .75; transform: scaleX(1); }
  .at *, .at *::before, .at *::after { transition-duration: .01ms !important; }
}

/* ── Très petits écrans ───────────────────────────────────────── */
@media (max-width: 359px) {
  .at__stage, .at__bar, .at__foot { padding-left: 15px; padding-right: 15px; }
  .at__chips { grid-template-columns: 1fr; }
  .at__uni { min-height: 128px; }
  .at__opt { padding: 15px 46px 15px 15px; }
  .at__cta { letter-spacing: .14em; font-size: 11.5px; }
}

/* ── Grands écrans ────────────────────────────────────────────── */
@media (min-width: 900px) {
  .at__bar { padding: 22px 40px 14px; }
  .at__stage { padding: 8px 40px 24px; }
  .at__foot { padding: 14px 40px 20px; }

  /* Le bandeau de phases n'apparaît que là où il ne serre rien. */
  .at__phases {
    display: flex; justify-content: center; gap: 30px;
    padding: 0 40px 22px;
  }
  .at__phases span {
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--at-mute); transition: color .4s var(--ease);
  }
  .at__phases span.on { color: var(--at-cream); }

  /* Questions : deux colonnes asymétriques, la note tient le vide. */
  .at--q .at__inner, .at--q3 .at__inner {
    max-width: 1080px;
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    column-gap: 56px; align-items: start;
  }
  .at--q .at__num, .at--q .at__q, .at--q .at__sub,
  .at--q3 .at__num, .at--q3 .at__q, .at--q3 .at__sub { grid-column: 1; }
  .at--q .at__opts, .at--q .at__quotes, .at--q .at__chips,
  .at--q .at__echelle, .at--q .at__acts { grid-column: 1; }
  /* Sans plafond, la pastille de sélection se retrouverait à 400px
     du mot qu'elle désigne. */
  .at--q .at__quotes, .at--q .at__echelle { max-width: 560px; }
  .at--q .at__opts { max-width: 620px; }
  .at--q .at__chips { max-width: 600px; }

  /* Sur grand écran l'atelier reste visible là où il n'y a pas de
     texte : le voile se concentre sur la colonne de lecture. */
  .at--q .at__bg  { opacity: .58; filter: blur(2px); }
  .at--q3 .at__bg { opacity: .28; filter: blur(5px); }
  .at--q .at__bg::after, .at--q3 .at__bg::after {
    background:
      linear-gradient(90deg, rgba(12,9,8,.94) 0%, rgba(12,9,8,.86) 38%,
                             rgba(12,9,8,.52) 66%, rgba(12,9,8,.72) 100%),
      linear-gradient(180deg, rgba(12,9,8,.55), transparent 34%, rgba(12,9,8,.75));
  }
  .at--q3 .at__univers { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .at--q3 .at__acts { grid-column: 1; }

  .at__aside {
    display: block; grid-column: 2; grid-row: 1 / span 3;
    padding-left: 24px; border-left: 1px solid var(--at-line);
    font-family: var(--f-italic, Georgia, serif); font-style: italic;
    font-size: 19px; line-height: 1.5; color: var(--at-gold);
    margin: 0;
  }

  /* Entrée : la photographie tient la moitié droite. */
  .at--intro .at__stage { justify-content: center; }
  /* Le bloc de texte s'ancre à gauche : le geste du parfumeur garde
     la moitié droite du cadre. */
  .at--intro .at__inner { max-width: 1160px; }
  .at__intro { padding-top: 0; max-width: 540px; }
  .at__title { font-size: clamp(52px, 5.4vw, 76px); }
  .at__lede { font-size: 17px; }
  .at--intro .at__bg img { object-position: 62% 45%; }
  .at--intro .at__bg::after {
    background:
      linear-gradient(90deg, rgba(12,9,8,.94) 0%, rgba(12,9,8,.78) 42%,
                             rgba(12,9,8,.28) 78%, rgba(12,9,8,.5) 100%),
      linear-gradient(180deg, rgba(12,9,8,.45), transparent 30%, rgba(12,9,8,.6));
  }
  .at__acts { max-width: 380px; }

  /* Le rappel collant n'a pas de raison d'être quand le CTA reste visible. */
  .at__sticky { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RÉVÉLATION — couche plein écran, masque de transition
   Uniquement transform et opacity : aucun filtre, aucune ombre
   animée, aucun élément DOM par particule.
   ═══════════════════════════════════════════════════════════════ */
.at__rev {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  overflow: hidden;
  animation: rev-entree 340ms var(--ease, cubic-bezier(.22,.61,.36,1)) both;
}
@keyframes rev-entree { from { opacity: 0 } to { opacity: 1 } }

/* Fond : un seul canvas, entièrement dessiné. Aucune image, aucun asset.
   Un lavis d'or très diffus qui tourne lentement et une poussière rare —
   rien d'autre. C'est le noir qui doit dominer. */
.at__rev-c { position: absolute; inset: 0; width: 100%; height: 100%; }

.at__rev-txt {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: 100%; max-width: 420px; padding: 0 30px;
  text-align: center;
}

/* CARAT lettré : le logotype compact s'empâte sous 100 px sur fond sombre.
   Ici c'est du texte, pas une version dégradée du logotype. */
.at__rev-marque {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: 19px; letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase;
  color: #e8d2a2; opacity: .82; margin: 0 0 24px;
  animation: rev-marque 800ms var(--ease, ease) 240ms both;
}
@keyframes rev-marque {
  from { opacity: 0; letter-spacing: .72em; text-indent: .72em }
  to   { opacity: .82; letter-spacing: .42em; text-indent: .42em }
}

/* ── Les deux temps de parole ─────────────────────────────────
   Superposés dans la même cellule de grille : la phrase d'attente
   s'efface pendant que l'annonce monte, au même endroit. Pas de saut
   de mise en page, pas de file de messages qui défilent.

       640 ms  « Votre univers est défini. Nous préparons… »
     1 720 ms  fondu croisé : « VOTRE SIGNATURE EST TROUVÉE. »
     2 600 ms  la jauge touche le bout, le voile s'ouvre sur le flacon
     « Passer » ou Échap abrègent ce temps à tout moment.             */
.at__rev-dire { display: grid; }
.at__rev-dire > * { grid-area: 1 / 1; }

.at__rev-attente {
  font-family: var(--f-italic, Georgia, serif); font-style: italic;
  font-weight: 300; font-size: 18px; line-height: 1.55; letter-spacing: 0;
  color: rgba(244,238,228,.5); margin: 0;
  opacity: 0;
  animation: rev-attente 1300ms var(--ease, ease) 640ms both;
}
@keyframes rev-attente {
  0%   { opacity: 0; transform: translateY(10px) }
  22%  { opacity: 1; transform: none }
  74%  { opacity: 1; transform: none }
  100% { opacity: 0; transform: translateY(-8px) }
}

.at__rev-titre {
  font-family: inherit; font-weight: 300;
  font-size: 15px; line-height: 1.9;
  letter-spacing: .30em; text-indent: .30em;
  text-transform: uppercase;
  color: #f4eee4; margin: 0;
  opacity: 0; animation: rev-monte 700ms var(--ease, ease) 1720ms both;
}
@keyframes rev-monte {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: none }
}

/* ── Barre de chargement ─────────────────────────────────────────
   Elle mesure le temps qui reste avant le résultat, pas un calcul :
   la progression est pilotée en JS et ne peut pas atteindre 100 %
   tant que le serveur n'a pas répondu. Aucun pourcentage affiché. */
.at__rev-barre {
  position: relative;
  width: 190px; height: 1px;
  margin: 0 auto 30px;
  background: rgba(232,210,162,.14);
  opacity: 0; animation: rev-barre 420ms var(--ease, ease) 480ms both;
}
@keyframes rev-barre { from { opacity: 0 } to { opacity: 1 } }
.at__rev-jauge {
  position: absolute; inset: 0;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg,
    rgba(200,169,107,.35) 0%, rgba(232,210,162,.9) 62%, #f2e3c2 100%);
  will-change: transform;
}
/* Tête lumineuse : un point net au bout du trait, comme une pointe qui
   dépose l'or. C'est lui qui donne la sensation d'écriture. */
.at__rev-jauge::after {
  content: ''; position: absolute; right: -1px; top: -1.5px;
  width: 3px; height: 4px; border-radius: 2px;
  background: #fff6e2;
}

/* Sur grand écran la matière s'élargit : la typo grandit avec elle,
   sinon le bloc se perd au centre du bassin sombre. */
@media (min-width: 768px) {
  .at__rev-txt   { max-width: 560px; top: 46%; }
  .at__rev-marque { font-size: 24px; margin-bottom: 30px; }
  .at__rev-titre { font-size: 19px; letter-spacing: .34em; text-indent: .34em; }
  .at__rev-attente { font-size: 24px; }
  .at__rev-barre { width: 240px; margin-bottom: 36px; }
}

/* Balayage de sortie : le voile traverse, le résultat est déjà dessous. */
.at__rev-balai {
  position: absolute; inset: -20% -50%;
  background: linear-gradient(104deg, transparent 34%,
    rgba(226,196,132,.30) 47%, rgba(247,238,214,.52) 50%,
    rgba(226,196,132,.30) 53%, transparent 66%);
  transform: translate3d(-115%, 0, 0); opacity: 0;
}
.at__rev--sortie .at__rev-balai {
  animation: rev-balai 620ms cubic-bezier(.5,0,.2,1) both;
}
@keyframes rev-balai {
  0%   { transform: translate3d(-115%,0,0); opacity: 0 }
  22%  { opacity: 1 }
  100% { transform: translate3d(115%,0,0); opacity: 0 }
}
.at__rev--sortie { animation: rev-sortie 620ms cubic-bezier(.5,0,.2,1) both; }
@keyframes rev-sortie {
  0%, 42% { opacity: 1 }
  100%    { opacity: 0 }
}
.at__rev--sortie .at__rev-txt { animation: rev-txt-out 380ms var(--ease, ease) both; }
@keyframes rev-txt-out { to { opacity: 0; transform: translateY(-10px) } }

/* Mouvement réduit : la frame reste la frame — même image, même typo,
   même hiérarchie. Seules la dérive et la poussière s'arrêtent, et les
   entrées se resserrent sur un fondu court. Ce n'est pas un écran dégradé. */
@media (prefers-reduced-motion: reduce) {
  .at__rev, .at__rev-marque, .at__rev-barre, .at__rev-titre, .at__rev-attente,
  .at__rev--sortie, .at__rev--sortie .at__rev-txt {
    animation-duration: 220ms !important; animation-delay: 0ms !important;
  }
  .at__rev-balai { display: none }
}

/* ═══════════════════════════════════════════════════════════════
   QUESTION « PARFUMS PORTÉS »
   ═══════════════════════════════════════════════════════════════ */
/* ── Q5 · PARFUMS PORTÉS ──────────────────────────────────────
   Bug corrigé : la couleur de texte était `var(--at-ink, #f7f2e8)`.
   `--at-ink` vaut #0C0908 — c'est un token de FOND. Le repli clair
   n'était donc jamais appliqué et la saisie comme les suggestions
   s'affichaient en noir sur noir. La bonne encre est `--at-cream`. */
.at__parfums { display: grid; gap: 18px; }
/* Le z-index doit vivre sur le PARENT : posé sur la liste seule, il ne
   la fait pas passer au-dessus du bouton Continuer, qui est un frère
   suivant dans le même contexte d'empilement. */
.at__pf-champ { position: relative; z-index: 40; }

.at__pf-champ input {
  width: 100%; padding: 15px 2px;
  background: none;
  color: var(--at-cream);
  border: 0; border-bottom: 1px solid var(--at-line-2);
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 17px; letter-spacing: .01em;
  /* 16px minimum : en dessous, iOS zoome à la mise au point et casse
     la mise en page du parcours. */
  transition: border-color .25s var(--ease);
}
.at__pf-champ input::placeholder { color: rgba(242,235,223,.42); font-size: 16px; }
.at__pf-champ input:focus { outline: none; border-bottom-color: var(--at-gold); }
.at__pf-champ input:disabled { opacity: .45; }

/* La liste doit passer AU-DESSUS du bouton Continuer, qui la
   chevauchait. Fond opaque et ombre portée : elle se détache
   franchement du décor photographique. */
.at__pf-sugg {
  /* Sur mobile la liste vit DANS LE FLUX : elle pousse le bouton
     Continuer vers le bas au lieu de flotter au-dessus. Un menu flottant
     par-dessus un bouton, clavier ouvert, produit des chevauchements et
     des clics manqués. Au-delà de 720px l'espace ne manque plus. */
  position: static; margin: 8px 0 0;
  padding: 4px 0; list-style: none;
  background: #16120E;
  border: 1px solid var(--at-line-2);
  border-radius: var(--r-s);
  box-shadow: 0 18px 44px rgba(0,0,0,.66);
  max-height: min(46vh, 300px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.at__pf-sugg li + li { border-top: 1px solid rgba(242,235,223,.08); }
.at__pf-sugg button {
  display: block; width: 100%; text-align: left;
  padding: 14px 16px;
  background: none; border: 0; cursor: pointer;
  color: var(--at-cream);
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 16px; line-height: 1.3; letter-spacing: .01em;
}
.at__pf-sugg button:hover,
.at__pf-sugg button:focus-visible {
  background: rgba(201,169,106,.16); outline: none;
}

@media (min-width: 720px) {
  .at__pf-sugg {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    margin: 0; z-index: 1;
  }
}

@media (min-width: 720px) {
  .at__pf-sugg {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    margin-top: 0; z-index: 1;
  }
}
.at__pf-sugg button mark {
  background: none; color: var(--at-gold-lit); font-weight: 500;
}

/* Sélection : évidente sans être criarde. */
.at__pf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.at__pf-liste li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 11px 9px 15px;
  background: rgba(201,169,106,.12);
  border: 1px solid var(--at-gold);
  border-radius: var(--r-s);
  color: var(--at-gold-lit);
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 14.5px;
}
.at__pf-x {
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
  color: inherit; font-size: 18px; line-height: 1; opacity: .7;
  min-width: 44px; min-height: 44px;   /* cible tactile, croix inchangée */
  margin: -9px -11px -9px -10px;       /* déborde dans le padding de l'étiquette */
  display: inline-flex; align-items: center; justify-content: center;
}
.at__pf-x:hover { opacity: 1; }

/* « Je ne porte pas vraiment de parfum » : c'est une OPTION, pas une
   note de bas de page. Elle doit se voir et se cliquer comme un choix. */
.at__pf-aucun {
  justify-self: start;
  padding: 13px 18px;
  background: var(--at-panel);
  border: 1px solid var(--at-line-2);
  border-radius: var(--r-s);
  cursor: pointer;
  color: var(--at-soft);
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 14px; letter-spacing: .02em;
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease);
}
.at__pf-aucun:hover { color: var(--at-cream); border-color: var(--at-line-2); }
.at__pf-aucun[aria-pressed="true"] {
  color: var(--at-gold-lit);
  border-color: var(--at-gold);
  background: rgba(201,169,106,.12);
}

/* ═══════════════════════════════════════════════════════════════
   RÉSULTAT — profil public, la fragrance reste secrète
   ═══════════════════════════════════════════════════════════════ */
.at__num-creation {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(247,242,232,.45); margin: 14px 0 0;
}
.at__intensite { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; }
.at__int-lib {
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247,242,232,.45);
}
.at__int-points { display: inline-flex; gap: 7px; }
.at__int-points i {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(198,163,92,.5);
}
.at__int-points i.on { background: var(--at-gold, #c6a35c); border-color: var(--at-gold, #c6a35c); }

.at__evite {
  margin: 16px 0 0; font-size: 13.5px; color: rgba(247,242,232,.55);
}
.at__evite b {
  display: block; font-weight: 400; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247,242,232,.4); margin-bottom: 4px;
}


/* Second CTA en fin de page : il clôt la lecture après les arguments. */
.at__acts--fin { margin-top: 30px; }

/* La consigne « La taille des mots dit déjà la réponse. » ne doit pas
   rivaliser avec les trois choix : c'est un mode d'emploi, pas une
   option. Elle reste lisible mais recule d'un cran. Scopé au seul
   écran d'échelle — les autres questions gardent leur sous-titre. */
.at__inner:has(.at__echelle) .at__sub {
  font-size: 12.5px;
  color: var(--at-mute);
  letter-spacing: .01em;
  margin-bottom: 26px;
}


/* ═══════════════════════════════════════════════════════════════
   V2 — DIRECTION IVOIRE / CHAMPAGNE · 18/09/2026
   Le noir cesse d'être le fond : il devient la rupture (la
   transition « Votre univers est défini », la phrase finale).
   Entrée et questions vivent dans l'ivoire chaud, la lumière vient
   des photographies. Même système typographique que le site :
   serif pour les questions et l'émotion, sans pour les réponses,
   la navigation et l'action.
   Les couleurs passent par les jetons : les règles plus haut ne
   bougent pas, elles lisent simplement d'autres valeurs.
   ═══════════════════════════════════════════════════════════════ */
.at {
  --at-ink:      #F4EFE6;
  --at-ink-2:    #ECE5D9;
  --at-panel:    #FBF8F2;
  --at-panel-on: #FFFDF9;
  --at-line:     rgba(28, 23, 18, .11);
  --at-line-2:   rgba(28, 23, 18, .22);
  --at-cream:    #1C1712;              /* encre principale */
  --at-soft:     rgba(28, 23, 18, .72);
  --at-mute:     rgba(28, 23, 18, .65);
  --at-gold:     #7C6127;              /* champagne texte : 5,1:1 sur ivoire, AA petit texte */
  --at-gold-lit: #5E481B;
  --at-champ:    #C9A96A;              /* champagne décoratif : filets, sélection */
  --at-noir:     #14100C;
  --r:   4px;
  --r-s: 3px;
  background: var(--at-ink);
  color: var(--at-cream);
}

/* ── Fond : deux photographies, jamais de noir ─────────────────── */
.at__bg { opacity: 0; }
.at__bg img {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s var(--ease);
  animation: none;
}
.at__bg::after { display: none; }
.at--intro .at__bg, .at--presence .at__bg { opacity: 1; filter: none; }
.at--intro .at__bg-entree { opacity: 1; animation: at-derive 34s ease-in-out infinite alternate; object-position: 52% 26%; }
.at--presence .at__bg-presence { opacity: 1; object-position: 50% 40%; }
/* Entrée : le laboratoire garde sa pénombre en haut, puis se fond
   dans l'ivoire là où vivent le texte et le CTA. */
.at--intro .at__bg::before, .at--presence .at__bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.at--intro .at__bg::before {
  background: linear-gradient(180deg,
    rgba(12,9,8,.42) 0%, rgba(12,9,8,0) 16%,
    rgba(244,239,230,0) 27%, rgba(244,239,230,.94) 45%, #F4EFE6 58%);
}
/* Sur la pénombre du laboratoire, le logo passe en ivoire. */
.at--intro .at__logo { color: #F4EEE4; }
.at--presence .at__bg::before {
  background: linear-gradient(180deg,
    rgba(244,239,230,.9) 0%, rgba(244,239,230,.74) 38%,
    rgba(244,239,230,.52) 62%, rgba(244,239,230,.9) 100%);
}
.at--q .at__bg, .at--q3 .at__bg, .at--res .at__bg { opacity: 0; }
.at--presence.at--q .at__bg { opacity: 1; }

/* ── Barre : retour · CARAT · progression ──────────────────────── */
.at__bar { grid-template-columns: 44px 1fr 44px; padding-bottom: 10px; }
.at__logo {
  justify-self: center;
  font-size: 14px; letter-spacing: .34em; text-indent: .34em;
  color: var(--at-cream);
}
.at__step {
  font-size: 11px; letter-spacing: .12em; color: var(--at-mute);
  white-space: nowrap;
}
.at__back {
  justify-self: start; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -12px; padding: 0;
  color: var(--at-cream);
}
.at__back:hover { color: var(--at-gold); }
.at__back:focus-visible { outline: 1px solid var(--at-gold); outline-offset: -6px; }
/* Le fil de progression : fin, champagne, sous la barre. */
.at__rail {
  position: relative; z-index: 1; flex: none;
  display: flex; gap: 4px; padding: 0 20px 6px;
}
.at__rail i { flex: 1; width: auto; height: 1px; background: var(--at-line); }
.at__rail i.on { background: var(--at-champ); }
.at__foot, .at__phases, .at__num { display: none !important; }

/* ── Scène : la question s'ancre en haut, toujours au même endroit ── */
.at--q .at__stage, .at--q3 .at__stage { justify-content: flex-start; padding-top: 22px; }
.at__q { color: var(--at-cream); font-size: clamp(27px, 7.4vw, 38px); margin-bottom: 10px; }
.at__sub { color: var(--at-soft); font-size: 14px; margin-bottom: 24px; }

/* ── Q1 · cartes éditoriales avec vignette ─────────────────────── */
.at__opts { gap: 10px; }
.at__opt {
  display: grid; grid-template-columns: 1fr; align-items: center;
  padding: 16px 48px 16px 18px;
  background: var(--at-panel);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--at-line); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(60,44,20,.04);
}
.at__opt--img { grid-template-columns: 72px 1fr; column-gap: 16px; padding: 10px 48px 10px 10px; }
.at__opt-img {
  width: 72px; height: 72px; object-fit: cover; display: block;
  border-radius: var(--r-s); background: var(--at-ink-2);
  transition: transform .5s var(--ease);
}
.at__opt-txt { display: block; margin: 0; max-width: none; }
.at__opt b {
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--at-cream);
}
.at__opt-txt > span {
  display: block; margin-top: 4px; font-size: 13px; line-height: 1.45;
  color: var(--at-soft); max-width: 30ch;
}
.at__opt::before { border: 0; }
.at__opt::after { border-color: var(--at-mute); right: 22px; }
.at__opt:hover { background: var(--at-panel-on); border-color: var(--at-line-2); }
.at__opt:hover .at__opt-img { transform: scale(1.04); }
.at__opt[aria-pressed="true"] {
  background: var(--at-panel-on); border-color: var(--at-champ);
  box-shadow: inset 0 0 0 1px var(--at-champ);
}
.at__opt[aria-pressed="true"] b { color: var(--at-cream); }
.at__opt[aria-pressed="true"]::after { border-right-color: var(--at-gold); border-top-color: var(--at-gold); }

/* ── Q2 · citations sur cartes, voix italique ──────────────────── */
.at__quotes { gap: 10px; }
.at__quote,
.at__quotes .at__quote:last-child {
  padding: 18px 44px 18px 18px;
  background: var(--at-panel);
  border: 1px solid var(--at-line); border-radius: var(--r);
  font-size: clamp(18px, 4.8vw, 21px); color: var(--at-cream);
}
.at__quote::after {
  width: 7px; height: 7px; right: 20px; margin-top: -4px; border-radius: 0;
  background: none; opacity: 1; transform: rotate(45deg);
  border-right: 1px solid var(--at-mute); border-top: 1px solid var(--at-mute);
}
.at__quote:hover { padding-left: 18px; background: var(--at-panel-on); color: var(--at-cream); border-color: var(--at-line-2); }
.at__quote[aria-pressed="true"] {
  padding-left: 18px; color: var(--at-cream);
  border-color: var(--at-champ); box-shadow: inset 0 0 0 1px var(--at-champ);
}
.at__quote[aria-pressed="true"]::after {
  opacity: 1; transform: rotate(45deg) translate3d(1.5px,-1.5px,0);
  border-right-color: var(--at-gold); border-top-color: var(--at-gold);
}

/* ── Q3 · les univers restent des photographies ────────────────── */
.at__univers { gap: 10px; }
.at__uni { border-radius: var(--r); border: 0; background: var(--at-ink-2); }
.at__uni::after { background: linear-gradient(180deg, rgba(20,15,10,0) 48%, rgba(20,15,10,.72) 100%); }
.at__uni-txt em { font-family: var(--f-sans, Inter, system-ui, sans-serif); font-weight: 500; font-size: 12.5px; letter-spacing: .2em; }
.at__uni-txt small { display: none; }
.at__uni[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--at-ink), 0 0 0 3px var(--at-champ); }
.at__uni[aria-pressed="true"]::after { background: linear-gradient(180deg, rgba(201,169,106,.12) 0%, rgba(20,15,10,.72) 100%); }

/* ── Q4 · Q5 · choix courts en grille de cartes ────────────────── */
.at__chips { column-gap: 10px; row-gap: 10px; border-top: 0; }
.at__chip {
  min-height: 54px; padding: 14px 30px 14px 16px;
  background: var(--at-panel); color: var(--at-cream);
  border: 1px solid var(--at-line); border-radius: var(--r);
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 15px; font-weight: 400; line-height: 1.3;
}
.at__chip::after { right: 14px; background: var(--at-champ); }
.at__chip:hover:not(:disabled) { color: var(--at-cream); border-color: var(--at-line-2); background: var(--at-panel-on); }
.at__chip[aria-pressed="true"] {
  color: var(--at-cream); background: var(--at-panel-on);
  border-color: var(--at-champ); box-shadow: inset 0 0 0 1px var(--at-champ);
}
.at__chip:disabled { opacity: .38; }

/* ── Q6 · l'échelle sur la lumière ─────────────────────────────── */
.at__niv, .at__echelle .at__niv:last-child { border-color: var(--at-line-2); }
.at__niv b { color: var(--at-cream); }
.at__niv span { color: var(--at-soft); }
.at__niv::after { background: var(--at-champ); }
.at__niv:hover b, .at__niv[aria-pressed="true"] b { color: var(--at-gold-lit); }

/* ── Boutons : noir pour agir, champagne pour avancer ──────────── */
.at__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--at-noir); border-radius: var(--r-s);
  background: var(--at-noir); color: #F7F2EA;
  font-size: 12px; font-weight: 500; letter-spacing: .18em;
}
.at__cta::after { content: '→'; font-size: 14px; letter-spacing: 0; transition: transform .25s var(--ease); }
.at__cta--link::after { content: none; }
.at__cta:hover:not(:disabled) { background: #2A231B; border-color: #2A231B; }
.at__cta:hover:not(:disabled)::after { transform: translateX(3px); }
#at-next { background: var(--at-gold); border-color: var(--at-gold); color: #FBF8F2; }
#at-next:hover:not(:disabled) { background: var(--at-gold-lit); border-color: var(--at-gold-lit); }
.at__cta:disabled, #at-next:disabled {
  background: transparent; border-color: var(--at-line-2); color: var(--at-mute);
}
.at__cta:disabled::after { opacity: .5; }
.at__cta--buy { background: var(--at-noir); border-color: var(--at-noir); color: #F7F2EA; font-weight: 500; }
.at__cta--buy:hover { background: #2A231B; border-color: #2A231B; }

/* ── Entrée ─────────────────────────────────────────────────────── */
.at--intro .at__stage { justify-content: flex-end; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.at--intro .at__bg img.at__bg-entree { object-position: 52% 26%; }
.at__eyebrow { color: var(--at-gold); letter-spacing: .3em; margin-bottom: 14px; }
.at__title { color: var(--at-cream); font-size: clamp(38px, 11vw, 60px); margin-bottom: 16px; }
.at__title i { color: var(--at-gold-lit); }
.at__lede { color: var(--at-soft); margin-bottom: 24px; }
.at--intro .at__acts { margin-top: 0; }
.at__note { color: var(--at-mute); letter-spacing: .12em; }
.at__maxime {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--at-line);
  font-family: var(--f-serif, Georgia, serif); font-size: 17px; line-height: 1.4;
  color: var(--at-soft);
}
.at__maxime i { font-family: var(--f-italic, Georgia, serif); color: var(--at-gold); }

/* ── Transition : le seul noir assumé ──────────────────────────── */
.at--veil { background: #0C0908; }
.at__rev-attente { font-size: 17px; color: rgba(244,238,228,.62); }
.at__rev-cap {
  display: block; margin-bottom: 14px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif); font-style: normal;
  font-weight: 300; font-size: 14px; line-height: 1.9;
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: #F4EEE4;
}
@media (min-width: 768px) { .at__rev-cap { font-size: 17px; } }

/* ── Résultat ───────────────────────────────────────────────────── */
.at--res .at__stage { padding-top: 14px; }
.at__res-over { color: var(--at-gold); }
.at__name { color: var(--at-cream); }
.at__desc { color: var(--at-soft); }
.at__desc span + span::before { color: var(--at-champ); }
.at__num-creation { color: var(--at-mute); }
.at__int-lib { color: var(--at-mute); }
.at__int-points i { border-color: rgba(124,97,39,.5); }
.at__int-points i.on { background: var(--at-gold); border-color: var(--at-gold); }
.at__hero img { border: 0; border-radius: var(--r); background: var(--at-ink-2); box-shadow: 0 18px 40px -24px rgba(60,44,20,.35); }
.at__prep { color: var(--at-mute); }
.at__prep[data-avise] { color: var(--at-cream); }
.at__why { border-top-color: var(--at-line); }
.at__why h2 { color: var(--at-gold); }
.at__why p { color: var(--at-soft); }
.at__evite { color: var(--at-soft); }
.at__evite b { color: var(--at-mute); }
.at__proof { border-top-color: var(--at-line); }
.at__proof b { color: var(--at-cream); }
.at__proof span { color: var(--at-mute); }

/* Rappel d'achat : même logique, habillé pour l'ivoire. */
.at__sticky { background: linear-gradient(180deg, rgba(244,239,230,0), rgba(244,239,230,.96) 36%); }

/* ── Question « parfums portés » en ivoire ─────────────────────── */
.at__pf-champ input::placeholder { color: var(--at-mute); }
.at__pf-sugg { background: var(--at-panel-on); box-shadow: 0 18px 44px -18px rgba(60,44,20,.35); }
.at__pf-sugg li + li { border-top-color: var(--at-line); }
.at__pf-sugg button:hover, .at__pf-sugg button:focus-visible { background: rgba(201,169,106,.14); }
.at__pf-sugg button mark { color: var(--at-gold); }
.at__pf-liste li { background: var(--at-panel-on); border-color: var(--at-champ); color: var(--at-cream); }
.at__pf-aucun { background: var(--at-panel); border-color: var(--at-line-2); color: var(--at-soft); }
.at__pf-aucun:hover { color: var(--at-cream); }
.at__pf-aucun[aria-pressed="true"] { color: var(--at-cream); border-color: var(--at-champ); background: var(--at-panel-on); box-shadow: inset 0 0 0 1px var(--at-champ); }

/* ── Grands écrans ─────────────────────────────────────────────── */
@media (min-width: 900px) {
  .at__rail { padding: 0 40px 8px; }
  .at--q .at__bg, .at--q3 .at__bg { opacity: 0; }
  .at--presence.at--q .at__bg { opacity: 1; }
  .at--q .at__bg::after, .at--q3 .at__bg::after { display: none; }
  .at__aside { color: var(--at-gold); border-left-color: var(--at-line); }
  /* Entrée : la photographie tient la droite, l'ivoire porte le texte. */
  .at--intro .at__bg::before {
    background: linear-gradient(90deg, #F4EFE6 0%, rgba(244,239,230,.94) 34%,
                                rgba(244,239,230,.2) 62%, rgba(244,239,230,0) 100%);
  }
  .at--intro .at__bg img.at__bg-entree { object-position: 62% 45%; }
  .at--intro .at__logo { color: var(--at-cream); }
  .at--intro .at__stage { justify-content: center; }
  .at--presence .at__bg::before {
    background: linear-gradient(90deg, rgba(244,239,230,.94) 0%, rgba(244,239,230,.84) 46%, rgba(244,239,230,.3) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .at--intro .at__bg-entree { animation: none; }
  .at__cta::after, .at__opt-img { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   V2.1 — LE VOCABULAIRE ÉDITORIAL DE L'ANCIEN ATELIER, SUR L'IVOIRE
   Retour de Samy (18/09) : les cartes blanches en sans-serif faisaient
   « application ». Ce qui faisait le premium de la version sombre est
   rétabli : réponses en serif, listes à filets fins plutôt que des
   boîtes, chevron cerclé, point d'or à la sélection, chiffre doré
   au-dessus de la question. Seule la matière change : l'ivoire.
   ═══════════════════════════════════════════════════════════════ */

/* L'ivoire n'est pas un aplat : une lumière naturelle le traverse. */
.at {
  background:
    radial-gradient(120% 70% at 12% -8%, #FDFBF7 0%, rgba(253,251,247,0) 58%),
    radial-gradient(90% 60% at 100% 110%, #EDE5D8 0%, rgba(237,229,216,0) 60%),
    #F4EFE6;
}
.at--veil { background: #0C0908; }

/* CARAT porte le petit filet d'or de l'ancienne marque. */
.at__logo { position: relative; padding-bottom: 7px; }
.at__logo::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 26px; height: 1px; margin-left: -13px;
  background: var(--at-champ);
}
.at--intro .at__logo::after { background: rgba(232,210,162,.8); }

/* Le chiffre doré revient au-dessus de la question. */
.at__num {
  display: block !important;
  font-size: 12px; letter-spacing: .2em; color: var(--at-gold);
  margin: 0 0 12px;
}
.at__q { font-size: clamp(28px, 7.6vw, 40px); letter-spacing: -.012em; }

/* ── Q1 · une liste éditoriale, pas des cartes ─────────────────── */
.at__opts { gap: 0; border-top: 1px solid var(--at-line-2); }
.at__opt,
.at__opt--img {
  grid-template-columns: 1fr; column-gap: 18px;
  padding: 18px 46px 18px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--at-line-2);
  transition: padding-left .3s var(--ease), background .3s var(--ease);
}
.at__opt--img { grid-template-columns: 64px 1fr; padding: 14px 46px 14px 0; }
.at__opt-img { width: 64px; height: 64px; border-radius: 2px; }
.at__opt b {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: 21px; line-height: 1.18; letter-spacing: -.005em; color: var(--at-cream);
}
.at__opt-txt > span { font-size: 13px; margin-top: 5px; color: var(--at-soft); }
/* Le chevron cerclé : on entre dans une atmosphère, on ne coche pas. */
.at__opt::before {
  right: 2px; width: 28px; height: 28px; margin-top: -14px;
  border: 1px solid var(--at-line-2); border-radius: 50%;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.at__opt::after {
  right: 13px; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1px solid var(--at-cream); border-top: 1px solid var(--at-cream);
}
.at__opt:hover { background: none; padding-left: 6px; border-color: var(--at-line-2); }
.at__opt:hover::before { border-color: var(--at-champ); }
.at__opt[aria-pressed="true"] {
  background: linear-gradient(90deg, rgba(201,169,106,.10), rgba(201,169,106,0) 70%);
  box-shadow: none; padding-left: 6px; border-color: var(--at-line-2);
}
.at__opt[aria-pressed="true"] b { color: var(--at-gold-lit); }
.at__opt[aria-pressed="true"]::before { border-color: var(--at-champ); background: var(--at-champ); }
.at__opt[aria-pressed="true"]::after { border-right-color: #FBF8F2; border-top-color: #FBF8F2; }
.at__opt:active { transform: none; }

/* ── Phrases · l'italique sur filets, point d'or ───────────────── */
.at__quotes { gap: 0; border-top: 1px solid var(--at-line-2); }
.at__quote,
.at__quotes .at__quote:last-child {
  padding: 22px 30px 22px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--at-line-2);
  font-family: var(--f-italic, Georgia, serif); font-style: italic;
  font-size: clamp(20px, 5.4vw, 24px); line-height: 1.36; color: var(--at-cream);
}
.at__quote::after {
  right: 4px; width: 7px; height: 7px; margin-top: -3.5px;
  border: 0; border-radius: 50%; background: var(--at-champ);
  opacity: 0; transform: scale(.4);
}
.at__quote:hover { padding-left: 8px; background: none; color: var(--at-gold-lit); border-color: var(--at-line-2); }
.at__quote[aria-pressed="true"] { padding-left: 8px; box-shadow: none; color: var(--at-gold-lit); border-color: var(--at-line-2); }
.at__quote[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }

/* ── Odeurs · rejets : deux colonnes de mots, filets fins ──────── */
.at__chips { column-gap: 22px; row-gap: 0; border-top: 1px solid var(--at-line-2); }
.at__chip {
  min-height: 58px; padding: 17px 20px 17px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--at-line-2);
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: 18px; line-height: 1.25; color: var(--at-cream);
}
.at__chip::after { right: 2px; width: 6px; height: 6px; margin-top: -3px; background: var(--at-champ); }
.at__chip:hover:not(:disabled) { background: none; color: var(--at-gold-lit); border-color: var(--at-line-2); }
.at__chip[aria-pressed="true"] { background: none; box-shadow: none; color: var(--at-gold-lit); border-color: var(--at-line-2); }
.at__chip:disabled { opacity: .32; }

/* ── Univers · la légende retrouve sa voix ─────────────────────── */
.at__uni-txt em {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: clamp(13px, 3.9vw, 17px); letter-spacing: .06em;
}
.at__uni-txt small {
  display: block; margin-top: 6px;
  font-size: 9.5px; letter-spacing: .1em; color: rgba(255,255,255,.82);
}
.at__uni[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--at-champ); }

/* ── Boutons : l'encre pour décider, le trait pour avancer ─────── */
.at__cta {
  min-height: 56px; border-radius: 2px;
  font-size: 12px; font-weight: 500; letter-spacing: .22em;
}
.at__cta::after { content: '→'; font-weight: 300; }
/* « Continuer » : un trait d'encre, pas un aplat moutarde. */
#at-next {
  background: transparent; border: 1px solid rgba(28,23,18,.82); color: var(--at-cream);
}
#at-next:hover:not(:disabled) { background: var(--at-noir); border-color: var(--at-noir); color: #F7F2EA; }
#at-next:disabled, .at__cta:disabled {
  background: transparent; border-color: var(--at-line-2); color: var(--at-mute);
}
.at__cta--buy { letter-spacing: .18em; }

/* ── « Je ne porte pas vraiment de parfum » : une option, en trait ── */
.at__pf-aucun { background: none; border-radius: 2px; }
.at__pf-liste li { border-radius: 2px; }

@media (max-width: 359px) {
  .at__chip { font-size: 16.5px; }
  .at__opt b { font-size: 19px; }
}

/* ── Entrée : le laboratoire ivoire, en entier ─────────────────
   Sur mobile la photographie occupe le haut de l'écran et se fond
   dans l'ivoire : le geste (main, pipette, goutte, bécher) reste
   entier au-dessus du texte, qui vit sur l'ivoire nu. */
.at--intro .at__bg { bottom: auto; height: 60vh; height: 60svh; }
.at--intro .at__bg img.at__bg-entree { object-position: 50% 40%; }
.at--intro .at__bg::before {
  background: linear-gradient(180deg,
    rgba(244,239,230,0) 0%, rgba(244,239,230,0) 64%,
    rgba(244,239,230,.86) 88%, #F4EFE6 100%);
}
.at--intro .at__logo { color: var(--at-cream); }
.at--intro .at__logo::after { background: var(--at-champ); }
@media (min-width: 900px) {
  /* Desktop : le cadrage horizontal place le geste à droite. */
  .at--intro .at__bg { bottom: 0; height: auto; }
  .at--intro .at__bg img.at__bg-entree { object-position: 72% 50%; }
  .at--intro .at__bg::before {
    background: linear-gradient(90deg, #F4EFE6 0%, rgba(244,239,230,.92) 30%,
                                rgba(244,239,230,0) 54%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PASSE 1 — SIGNATURE SECRÈTE · 15/10/2026
   Une seule Création, révélée sur le vrai packshot. Le flacon n'est
   jamais posé dans un cadre : la scène prend la couleur du studio de
   la photographie, puis se fond dans l'ivoire. Le noir n'apparaît
   qu'en rupture, pour le secret.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fil narratif : une phrase dans la page, pas un voile ──────── */
.at__fil {
  margin: -2px 0 8px;
  font-family: var(--f-italic, Georgia, serif); font-style: italic; font-weight: 400;
  font-size: 17px; line-height: 1.35; color: var(--at-gold);
}
.at__q[tabindex="-1"]:focus, .at__name[tabindex="-1"]:focus,
.at__title[tabindex="-1"]:focus { outline: none; }

/* Le retour est une vraie cible au doigt, même sur le récapitulatif. */
.at__back { min-width: 44px; min-height: 44px; }

/* ── Récapitulatif modifiable ──────────────────────────────────── */
.at--recap .at__stage { justify-content: flex-start; padding-top: 22px; }
.at--recap .at__acts { margin-top: 22px; }
/* Révéler : l'aplat d'encre, c'est le moment fort du parcours. */
#at-next.at__cta--reveler { background: var(--at-noir); border-color: var(--at-noir); color: #F7F2EA; }
#at-next.at__cta--reveler:hover { background: #2A231B; border-color: #2A231B; }
.at__recap {
  list-style: none; margin: 28px 0 0; padding: 0;
  border-top: 1px solid var(--at-line-2);
}
.at__recap li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px; align-items: center;
  padding: 9px 0 10px; border-bottom: 1px solid var(--at-line-2);
}
.at__recap-k {
  grid-column: 1;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--at-mute);
}
.at__recap-v {
  grid-column: 1; margin-top: 3px;
  font-family: var(--f-serif, Georgia, serif); font-size: 17px; line-height: 1.3;
  color: var(--at-cream); overflow-wrap: anywhere;
}
.at__recap-mod {
  grid-column: 2; grid-row: 1 / span 2;
  min-width: 44px; min-height: 44px; padding: 0 2px; cursor: pointer;
  background: none; border: 0;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--at-gold);
  text-decoration: underline; text-decoration-color: rgba(124,97,39,.35);
  text-underline-offset: 5px;
}
.at__recap-mod:hover { color: var(--at-gold-lit); text-decoration-color: currentColor; }
.at__recap-mod:focus-visible { outline: 1px solid var(--at-gold); outline-offset: 2px; }

/* ── Révélation : « Passer » et ouverture sur le flacon ────────── */
.at__rev-passer {
  position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  min-width: 96px; min-height: 44px; padding: 0 18px; cursor: pointer;
  background: none; border: 0;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; font-weight: 400; letter-spacing: .26em; text-indent: .26em;
  text-transform: uppercase; color: rgba(244,238,228,.62);
  opacity: 0; animation: rev-barre 400ms var(--ease, ease) 600ms both;
}
.at__rev-passer:hover { color: #F4EEE4; }
.at__rev-passer:focus-visible { outline: 1px solid rgba(232,210,162,.8); outline-offset: 2px; }
.at__rev--sortie .at__rev-passer { visibility: hidden; }

/* Le voile ne balaie plus : il s'ouvre depuis le flacon, comme une
   lumière qu'on allume dans une pièce sombre. */
@property --trou { syntax: '<length>'; inherits: false; initial-value: 0px; }
.at__rev { --cx: 50%; --cy: 36%; }
.at__rev--sortie {
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--trou), #000 calc(var(--trou) + 34vmax));
          mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--trou), #000 calc(var(--trou) + 34vmax));
  animation: rev-ouverture 950ms cubic-bezier(.45,0,.2,1) both;
}
.at__rev--sortie .at__rev-balai { animation: none; opacity: 0; }
@keyframes rev-ouverture {
  0%   { --trou: -34vmax; opacity: 1; }
  70%  { opacity: 1; }
  100% { --trou: 120vmax; opacity: 0; }
}

/* ── Résultat ───────────────────────────────────────────────────── */
.at--res .at__stage { padding: 0; justify-content: flex-start; }
.at--res .at__inner { max-width: none; padding-bottom: 96px; }

/* La scène : la couleur du studio photographié (#D3CAC5 sur le mur,
   plus clair au sol), puis l'ivoire. Les repères suivent la hauteur du
   flacon (--ph) : le sol de la photo tombe sur un sol de même ton. */
.at__scene {
  --ph: clamp(300px, 47vh, 460px);
  --ph: clamp(300px, 47svh, 460px);
  --haut: calc(max(12px, env(safe-area-inset-top)) + 46px);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 20px 16px;
  background: linear-gradient(180deg,
    #D3CAC5 0,
    #D3CAC5 calc(var(--haut) + var(--ph) * .78),
    #E4DBD6 calc(var(--haut) + var(--ph) * .92),
    rgba(237,230,223,.7) calc(var(--haut) + var(--ph) + 20px),
    rgba(244,240,232,0) 100%);
}
.at__scene-logo {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin-bottom: 2px;
  color: var(--at-cream);
}
.at__flacon { margin: 0; display: flex; flex-direction: column; align-items: center; }
/* Photographie source entière, au ratio d'origine : `cover` ne fait que
   retirer les bandes noires (lignes 0-198 et 1081-1280 de la source).
   Aucune déformation, aucune retouche de l'étiquette. Le masque n'adoucit
   que les bords du studio, jamais le flacon (x 30-77 %, y 6-91 %). */
.at__flacon img {
  display: block;
  height: var(--ph); width: auto; max-width: 100%;
  aspect-ratio: 589 / 862;
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 4%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 4%, #000 94%, transparent 100%);
          mask-composite: intersect;
  animation: at-approche 1400ms var(--ease) both;
}
@keyframes at-approche {
  from { transform: scale(1.035); }
  to   { transform: none; }
}
.at__flacon figcaption {
  margin: 8px 0 0; max-width: 34ch; text-align: center;
  font-size: 11px; line-height: 1.45; letter-spacing: .02em;
  color: var(--at-mute);
}

.at__fiche {
  max-width: 520px; margin: 0 auto; padding: 8px 22px 0;
  text-align: center;
}
.at__fiche--seule { padding-top: max(56px, 12vh); }
.at--res .at__res-over {
  margin: 0 0 8px;
  font-size: 11px; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase;
  color: var(--at-gold);
}
.at--res .at__name {
  margin: 0 0 12px; text-wrap: balance;
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: clamp(34px, 10vw, 48px); line-height: 1.06; letter-spacing: -.012em;
  color: var(--at-cream);
}
.at--res .at__name span { white-space: nowrap; }
.at__res-lede {
  margin: 0 auto; max-width: 34ch; text-wrap: balance;
  font-size: 15px; line-height: 1.55; font-weight: 300; color: var(--at-soft);
}
.at__res-lede i {
  display: block; margin-top: 6px;
  font-family: var(--f-italic, Georgia, serif); font-size: 18.5px; line-height: 1.38;
  font-weight: 400; color: var(--at-gold);
}
.at--res .at__acts { margin-top: 22px; }
.at--res .at__cta--buy { letter-spacing: .16em; }
.at--res .at__prep {
  margin: 10px auto 0; max-width: 40ch; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--at-mute);
}

/* Pourquoi : les réponses du client relues, sur filets. */
.at--res .at__why {
  margin: 36px 0 0; padding: 24px 0 0; text-align: left;
  border-top: 1px solid var(--at-line-2);
}
.at--res .at__why h2 {
  margin: 0 0 14px; font-weight: 400;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--at-gold);
}
.at__profil {
  margin: 0 0 12px !important;
  font-size: 11px !important; letter-spacing: .2em; text-transform: uppercase;
  color: var(--at-mute) !important;
}
.at__profil b {
  display: block; margin-top: 4px; letter-spacing: -.005em; text-transform: none;
  font-family: var(--f-serif, Georgia, serif); font-weight: 400; font-size: 22px;
  color: var(--at-cream);
}
.at--res .at__why p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: var(--at-soft); }
.at--res .at__intensite {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--at-line);
}
.at__int-mot {
  font-family: var(--f-italic, Georgia, serif); font-style: italic;
  font-size: 18px; color: var(--at-gold);
}

/* Le secret : la seule rupture noire du résultat. Pleine largeur, sans
   rayon ni cadre : une section, pas une carte posée sur l'ivoire. */
.at__secret {
  margin: 44px 0 0; padding: 60px 28px 64px; text-align: center;
  background: #14100C;
  color: #F4EEE4;
}
.at__secret-t {
  margin: 0 auto 14px; max-width: 18ch;
  font-family: var(--f-italic, Georgia, serif); font-weight: 400;
  font-size: clamp(25px, 7vw, 32px); line-height: 1.25; color: #D9BF86;
  text-wrap: balance;
}
.at__secret-p {
  margin: 0 auto; max-width: 34ch;
  font-size: 14.5px; line-height: 1.6; font-weight: 300; color: rgba(244,238,228,.78);
}
.at__secret-promesse {
  position: relative; margin: 30px auto 0; padding-top: 26px; max-width: 24ch;
  font-family: var(--f-serif, Georgia, serif); font-size: 19px; line-height: 1.4;
  color: #F4EEE4;
}
.at__secret-promesse::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 40px; height: 1px; margin-left: -20px; background: var(--at-champ);
}

.at__fiche--fin { padding-top: 8px; text-align: left; }
.at__usage { margin: 20px 0 0; }
.at__usage div { padding: 18px 0; border-top: 1px solid var(--at-line-2); }
.at__usage div:last-child { border-bottom: 1px solid var(--at-line-2); }
.at__usage dt {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--at-gold);
}
.at__usage dd { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--at-soft); }
.at__autre { margin: 24px 0 0; text-align: center; }
.at__autre a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--at-cream);
  text-decoration: underline; text-decoration-color: var(--at-line-2); text-underline-offset: 6px;
}
.at__autre a:hover { color: var(--at-gold); text-decoration-color: currentColor; }

/* ── Grands écrans : le flacon à gauche, la décision à droite ──── */
@media (min-width: 900px) {
  .at--recap .at__inner { max-width: 640px; }
  .at__rev { --cx: 25%; --cy: 50%; }

  .at--res .at__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; padding-bottom: 0;
  }
  .at__scene {
    --ph: min(80vh, 760px);
    --ph: min(80svh, 760px);
    grid-column: 1; grid-row: 1 / span 3;
    position: sticky; top: 0;
    height: 100svh; min-height: 560px; padding: 0 32px;
    justify-content: center;
    background: linear-gradient(180deg,
        #D3CAC5 0,
        #D3CAC5 calc(50% + var(--ph) * .28),
        #E4DBD6 calc(50% + var(--ph) * .42),
        #EAE2DC 100%);
    /* Le studio s'éteint vers la colonne de texte : un masque, pas un
       aplat ivoire, pour que le fond de page continue sans couture.
       Le flacon s'arrête avant 70 % de la colonne : il n'est pas touché. */
    -webkit-mask-image:
      linear-gradient(90deg, #000 0, #000 74%, transparent 100%),
      linear-gradient(180deg, #000 0, #000 calc(100% - 48px), transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, #000 0, #000 74%, transparent 100%),
      linear-gradient(180deg, #000 0, #000 calc(100% - 48px), transparent 100%);
            mask-composite: intersect;
  }
  .at__scene-logo { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); }
  .at__fiche, .at__secret, .at__fiche--fin { grid-column: 2; }
  .at__fiche {
    max-width: 540px; margin: 0; padding: clamp(72px, 16vh, 150px) 56px 0 24px;
    text-align: left;
  }
  .at__res-lede, .at--res .at__prep { margin-left: 0; text-align: left; }
  .at--res .at__acts { max-width: 440px; }
  /* Sur grand écran, le secret reste sur l'ivoire : un bloc noir dans
     une colonne serait un rectangle posé. */
  .at__secret {
    max-width: 540px; margin: 40px 0 0; padding: 30px 56px 0 24px;
    background: none; color: var(--at-cream); text-align: left;
  }
  .at__secret-t { margin-left: 0; color: var(--at-gold); max-width: none; }
  .at__secret-p { margin-left: 0; color: var(--at-soft); }
  .at__secret-promesse { margin-left: 0; color: var(--at-cream); max-width: 30ch; }
  .at__secret-promesse::before { left: 0; margin-left: 0; }
  .at__fiche--fin { padding-top: 6px; padding-bottom: 72px; }
  .at__autre { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .at__flacon img { animation: none; }
  .at__rev--sortie { -webkit-mask-image: none; mask-image: none; }
  .at__rev-passer { animation-duration: 1ms; animation-delay: 0ms; }
}

/* ═══════════════════════════════════════════════════════════════
   PASSE 2 — USAGE, PRÉCISION, PARFUMS PORTÉS · 15/10/2026
   Mêmes matières que la passe 1 : filets fins, serif pour répondre,
   point d'or à la sélection. Aucun nouveau fond, aucune carte.
   ═══════════════════════════════════════════════════════════════ */

/* ── Usage · un triptyque au trait ─────────────────────────────── */
.at__usages {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--at-line-2); border-bottom: 1px solid var(--at-line-2);
}
.at__usage {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 172px; padding: 20px 12px 18px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--at-cream);
  transition: background .3s var(--ease);
}
.at__usage + .at__usage { border-left: 1px solid var(--at-line-2); padding-left: 12px; }
.at__usage-ico { color: var(--at-gold); line-height: 0; margin-bottom: 8px; }
.at__usage b {
  font-family: var(--f-serif, Georgia, serif); font-weight: 400;
  font-size: clamp(17px, 4.6vw, 21px); line-height: 1.18; letter-spacing: -.005em;
}
.at__usage > span:last-child { font-size: 12.5px; line-height: 1.42; color: var(--at-soft); }
.at__usage::after {
  content: ''; position: absolute; top: 22px; right: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--at-champ);
  opacity: 0; transform: scale(.4);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.at__usage:hover b, .at__usage[aria-pressed="true"] b { color: var(--at-gold-lit); }
.at__usage[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(201,169,106,.10), rgba(201,169,106,0) 78%);
}
.at__usage[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
.at__usage:focus-visible { outline: 2px solid var(--at-gold); outline-offset: 2px; }

/* ── Rejets grisés : la raison est écrite, pas devinée ─────────── */
.at__grise {
  margin: 14px 0 0; max-width: 46ch;
  font-size: 13px; line-height: 1.5; color: var(--at-soft);
}

/* ── Précision : la liste éditoriale de Q1, sans vignette ──────── */
.at__opt--passer b {
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 14px; letter-spacing: .02em; color: var(--at-soft);
}

/* ── « Revoir toutes mes réponses » : le récapitulatif à portée ── */
.at__revoir-l { margin: 18px 0 0; }
.at__revoir {
  min-height: 44px; padding: 0; cursor: pointer;
  background: none; border: 0;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--at-gold);
  text-decoration: underline; text-decoration-color: rgba(124,97,39,.35);
  text-underline-offset: 5px;
}
.at__revoir:hover { color: var(--at-gold-lit); text-decoration-color: currentColor; }
.at__revoir:focus-visible { outline: 1px solid var(--at-gold); outline-offset: 2px; }

/* ── Parfums portés : la marque au-dessus du nom ───────────────── */
.at__pf-sugg .at__pf-marque {
  display: block; margin-bottom: 3px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--at-mute);
}
.at__pf-sugg .at__pf-nom { display: block; }
.at__pf-sugg li[aria-selected="true"] button { background: rgba(201,169,106,.14); }
.at__pf-note { margin: -8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--at-mute); }
.at__pf-note:empty { display: none; }

@media (max-width: 359px) {
  .at__usage b { font-size: 16px; }
  .at__usage + .at__usage { padding-left: 9px; }
}

@media (min-width: 900px) {
  .at--q .at__usages, .at--q .at__grise, .at--q .at__revoir-l,
  .at--q .at__fil, .at--q .at__parfums { grid-column: 1; }
  .at--q .at__usages { max-width: 620px; }
  .at__usage { min-height: 190px; padding-right: 18px; }
  .at__usage + .at__usage { padding-left: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   PASSE 3 — LE DESSIN DU PROTOTYPE · 15/10/2026
   Décision de Samy : entrée, questions, récapitulatif et précision
   reprennent le prototype de Codex du 12/10 (atelier-proposition.css,
   gelé, qui reste la référence) : ivoire du Core, filets fins, réponses
   en Playfair, vignettes, échelle d'intensité typographique, bouton
   noir. Les sélecteurs sont préfixés « p3- » sous .p3 pour ne rien
   heurter de base.css ni du résultat de la passe 1, qui garde sa coque.
   Aucun nombre de questions n'est affiché : le trait de progression
   se remplit, sans compteur.
   ═══════════════════════════════════════════════════════════════ */
.at--p3 {
  --paper: #F4F0E8; --ink: #1C1712; --muted: #625a4d; --gold: #7C6127;
  --line: #cec6b8; --wash: #eae3d6;
  --serif: 'Playfair Display', Georgia, serif; --sans: Inter, system-ui, sans-serif;
  --italic: 'Cormorant Garamond', Georgia, serif;
  background: var(--paper); color: var(--ink);
}
.at--p3 .at__bg { display: none; }
.at--p3 .at__stage.p3 {
  display: block; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-family: var(--sans); font-size: 14px; line-height: 1.6; font-weight: 400;
}
.p3 *, .p3 *::before, .p3 *::after { box-sizing: border-box; }
.p3 button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p3 a { color: inherit; text-underline-offset: 5px; }
.p3 button:focus-visible, .p3 a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.p3-parfums .at__pf-champ input:focus-visible { outline: none; border-bottom-color: var(--gold); }
.p3 img { max-width: 100%; display: block; }
.p3 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--gold); }
.p3 h1 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.18;
  text-wrap: balance; margin: 26px 0 16px; font-size: 31px; color: var(--ink);
}
.p3 h1:focus { outline: none; }
.p3 p { margin: 0 0 18px; }
.p3 button:disabled { cursor: default; }

.p3-bar {
  min-height: 74px; padding: max(14px, env(safe-area-inset-top)) 22px 12px;
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.p3-logo { font-family: var(--serif); font-size: 18px; letter-spacing: .24em; text-decoration: none;
  /* Zone tactile d'au moins 44 px ; la barre (74 px au moins) ne grandit pas (relecture Codex, passe 3). */
  display: inline-flex; align-items: center; min-height: 44px; }
.p3-quiet {
  border: 0; background: none; color: var(--muted); padding: 10px 0;
  min-height: 44px; min-width: 44px; font-size: 12px;
}
.p3-quiet:hover { color: var(--gold); }
.p3-bar .p3-quiet { font-size: 11px; }

.p3-workbench { padding: 24px 22px 32px; max-width: 1220px; margin: auto; }
.p3-question { max-width: 620px; margin: auto; }
.p3-progress {
  display: flex; align-items: center; justify-content: space-between; min-height: 18px;
  font-size: 11px; letter-spacing: .1em; color: var(--muted);
}
.p3-rail { height: 2px; margin-top: 13px; background: var(--line); overflow: hidden; }
.p3-rail span {
  display: block; height: 100%; background: var(--gold); transform-origin: left center;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.p3-help { color: var(--muted); font-size: 13px; line-height: 1.65; margin-bottom: 24px; max-width: 52ch; }
.p3-fil { font-family: var(--italic); font-style: italic; font-size: 19px; color: var(--gold); margin: 22px 0 -8px; }

.p3-choices { border-top: 1px solid var(--line); }
.p3-choice {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  display: flex; align-items: center; gap: 14px; text-align: left; color: var(--ink);
  padding: 15px 0; min-height: 76px;
  transition: background .18s ease, color .18s ease;
}
.p3-choice[aria-pressed="true"] { background: #e9e0d0; }
.p3-choice:disabled { color: #8a8274; background: transparent; }
.p3-choice:disabled .p3-choice-mark { border-style: dashed; }
.p3-choice[data-limit] { opacity: .62; }
.p3-choice-copy { flex: 1; min-width: 0; }
.p3-choice-name { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.25; text-wrap: balance; }
.p3-choice-detail { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 5px; }
/* Passe 4 : le repère de l'amateur, discret sous la sensation (Inter, petit, lisible). */
.p3-choice-repere {
  display: block; margin-top: 6px; font-family: var(--sans); font-size: 11px; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.p3-vignette { width: 58px; height: 64px; object-fit: cover; flex-shrink: 0; }
.p3-choice-mark {
  display: grid; place-items: center; flex-shrink: 0; width: 23px; height: 23px;
  border: 1px solid #9f9585; border-radius: 50%; margin-right: 3px;
}
.p3-choice[aria-pressed="true"] .p3-choice-mark { background: var(--gold); border-color: var(--gold); }
.p3-choice-mark svg { width: 17px; height: 17px; fill: none; stroke: var(--paper); stroke-width: 1.6; }
.p3-compact { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.p3-compact .p3-choice { min-height: 96px; gap: 8px; padding: 13px 0; }
.p3-compact .p3-choice-name { font-size: 18px; }
.p3-compact .p3-choice-detail { font-size: 12px; line-height: 1.55; }
.p3-compact .p3-choice-mark { width: 18px; height: 18px; margin-right: 0; }
.p3-compact .p3-exclusive { grid-column: 1 / -1; min-height: 72px; }
.p3-compact .p3-exclusive .p3-choice-name { font-size: 19px; }
/* L'intensité : la taille des mots grandit avec la présence. */
.p3-presence .p3-choice { min-height: 114px; }
.p3-presence .p3-choice-name { font-size: 26px; }
.p3-presence .p3-choice:nth-child(2) .p3-choice-name { font-size: 34px; }
.p3-presence .p3-choice:nth-child(3) .p3-choice-name { font-size: 42px; }
.p3-grise { margin: 14px 0 0; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--muted); }

.p3-status { font-size: 12px; color: var(--muted); min-height: 20px; margin: 12px 0; }
.p3-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 22px 0 12px; }
.p3-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 22px; padding-bottom: env(safe-area-inset-bottom);
}
.p3-primary {
  min-height: 54px; display: inline-flex; justify-content: center; align-items: center; gap: 22px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 14px 22px; letter-spacing: .035em; font-size: 13px;
}
.p3-primary:hover:not(:disabled) { background: #433b30; border-color: #433b30; }
.p3-primary:disabled { color: #756d61; background: var(--wash); border-color: var(--line); }
.p3-back { min-width: 72px; text-align: left; }
.p3-visual { display: none; }

/* Recherche du parfum aimé : le champ de la passe 2, sur le papier du prototype. */
.p3-field-label { display: block; margin: 8px 0 10px; font-size: 13px; }
.p3-parfums .at__pf-aucun { margin-bottom: 8px; }
.p3-parfums .at__pf-champ input { color: var(--ink); border-bottom-color: #9f9585; }
.p3-parfums .at__pf-champ input::placeholder { color: var(--muted); }

/* Récapitulatif modifiable (prototype). */
.p3-summary h1 { font-size: 38px; }
.p3-summary dl { margin: 26px 0 0; }
.p3-summary-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  border-top: 1px solid var(--line); padding: 18px 0;
}
.p3-summary dt { font-size: 11px; color: var(--muted); }
.p3-summary dd { grid-column: 1; margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.45; overflow-wrap: anywhere; }
.p3-edit { grid-column: 2; grid-row: 1 / 3; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.p3-actions--fin .p3-primary { width: 100%; }

/* Entrée (prototype) — sans prix ni nombre de questions. */
.p3-intro { max-width: 1220px; margin: auto; }
/* Raccord avec l'ivoire : le blanc de la photo devient le papier (multiplication par
   --paper), puis la photo se fond dans la page au lieu de s'arrêter sur un bord.
   Aucun pixel du flacon n'est redessiné ; seule la teinte globale est réchauffée. */
.at--intro .p3-bar { position: relative; z-index: 2; border-bottom-color: transparent; }
.p3-intro-photo {
  position: relative; height: 420px; margin-top: -50px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 66%, transparent 96%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 66%, transparent 96%);
}
.p3-intro-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--paper); mix-blend-mode: multiply;
}
.p3-intro-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 3%;
  filter: sepia(.22) saturate(.82) brightness(1.03);
}
.p3-intro-copy { position: relative; padding: 0 22px 36px; margin-top: -44px; }
.p3-over { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.p3-intro-copy h1 { font-size: 39px; margin: 0 0 18px; }
.p3-intro-copy > p:not(.p3-over) { font-size: 14px; max-width: 45ch; }
.p3-intro-copy .p3-offer { font-size: 12px; color: var(--muted); margin: 22px 0; }
.p3-intro-copy .p3-primary { width: 100%; max-width: 390px; }
.p3-start-detail { font-size: 11px; color: var(--muted); display: block; margin-top: 14px; }

@media (max-width: 899px) {
  .p3-question .p3-actions {
    position: sticky; bottom: 0; z-index: 3; background: var(--paper);
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 16px var(--paper); margin-top: 18px;
  }
  .p3-question .p3-primary { min-width: 154px; }
}
@media (max-width: 359px) {
  .p3-bar { padding-inline: 16px; gap: 10px; }
  .p3-workbench, .p3-intro-copy { padding-inline: 16px; }
  .p3 h1 { font-size: 28px; }
  .p3-choice-name { font-size: 19px; }
  .p3-compact { column-gap: 12px; }
  .p3-compact .p3-choice-name { font-size: 16px; }
  .p3-primary { padding-inline: 16px; gap: 10px; }
  .p3-intro-copy h1 { font-size: 34px; }
}
@media (hover: hover) and (pointer: fine) { .p3-choice:not(:disabled):hover .p3-choice-name { color: var(--gold); } }
@media (min-width: 900px) {
  .p3-bar { padding: 18px 48px; min-height: 84px; }
  .p3-logo { font-size: 23px; }
  .p3-bar .p3-quiet { font-size: 12px; }
  .p3-workbench {
    padding: 46px 40px 60px; display: grid; grid-template-columns: minmax(0, 620px) 360px;
    gap: 74px; align-items: start; justify-content: center;
  }
  .p3-question { width: 100%; margin: 0; }
  .p3-question h1 { font-size: 43px; margin-top: 34px; max-width: 20ch; }
  .p3-help { font-size: 14px; }
  .p3-choice { padding: 18px 8px 18px 0; }
  .p3-choice-name { font-size: 23px; }
  .p3-choice-detail { font-size: 13px; }
  .p3-choice-repere { font-size: 12px; }
  .p3-vignette { width: 68px; height: 72px; }
  .p3-compact .p3-choice-name { font-size: 20px; }
  .p3-compact .p3-choice { min-height: 100px; }
  .p3-visual { display: block; margin-top: 34px; position: sticky; top: 24px; }
  .p3-visual img { width: 360px; height: 450px; object-fit: cover; }
  .p3-visual p { font-family: var(--serif); font-size: 30px; line-height: 1.3; margin: 24px 0 9px; }
  .p3-visual em { font-size: 35px; }
  .p3-visual > span { font-size: 12px; color: var(--muted); }
  .p3-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 16px 40px 40px; align-items: center; }
  /* Le flacon entier, gâchette comprise ; les quatre bords se fondent dans l'ivoire. */
  .p3-intro-photo {
    height: min(700px, calc(100svh - 130px)); margin-top: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 78%, transparent 100%),
                        linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 78%, transparent 100%),
                        linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%);
            mask-composite: intersect;
  }
  .p3-intro-photo img { object-position: 50% 0%; }
  .p3-intro-copy { padding: 10px 0; margin-top: 0; }
  .p3-intro-copy h1 { font-size: 54px; line-height: 1.15; }
  .p3-intro-copy > p:not(.p3-over) { font-size: 16px; }
  .p3-summary h1 { font-size: 48px; }
  .p3-actions--fin .p3-primary { width: auto; min-width: 320px; }
}
@media (min-width: 1200px) { .p3-workbench { padding-top: 56px; } }

/* ── Narration entre les questions (prototype) ─────────────────── */
/* Reprise de atelier-proposition-motion.css : le voile vit sur <body>, au-dessus de .at. */
.at__narr {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  padding: 0 26px; pointer-events: none;
  background: rgba(244,240,232,.97);
  animation: at-narr-voile 1400ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes at-narr-voile { 0% { opacity: 0 } 26% { opacity: 1 } 72% { opacity: 1 } 100% { opacity: 0 } }
.at__narr p {
  margin: 0; max-width: 18ch; text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300;
  font-size: clamp(21px, 6vw, 30px); line-height: 1.36; letter-spacing: .005em;
  color: #7C6127;
  animation: at-narr 1400ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes at-narr {
  0% { opacity: 0; transform: translateY(14px) } 30% { opacity: 1; transform: none }
  70% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-10px) }
}

/* ── Révélation : 3 s au plus (2 000 + 250 + 600 ms) ───────────── */
.at__rev-cap {
  display: block; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 300;
  font-style: normal; line-height: 1.9; letter-spacing: .22em; text-transform: uppercase;
  color: #F4EEE4; margin-bottom: 16px;
}
.at__rev-attente { animation-duration: 1100ms; animation-delay: 420ms; }
.at__rev-titre { animation-duration: 600ms; animation-delay: 1350ms; }
.at__rev--sortie { animation-duration: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .at__narr { display: none; }
  .p3-rail span, .p3-choice { transition: none; }
}