/* ═══════════════════════════════════════════════════════════════════════
   SIGNATURE MOTION — AB Signature Paris (STELLA 09/07/2026)
   Couche de mouvement haut de gamme, purement additive.
   Doctrine (Emil Kowalski) : le mouvement raconte, jamais ne décore.
   - transform/opacity uniquement (compositeur GPU, zéro reflow)
   - courbe maison : cubic-bezier(.22,.61,.21,1) — départ vif, pose feutrée
   - tout est éteint si prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fil d'or de lecture (progression) ───────────────────────────────── */
.gold-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:1200;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,#8a6d1f,#e8c76a 55%,#f7e7a8);
  box-shadow:0 0 12px rgba(232,199,106,.35)}

/* ── Poussière d'or (canvas plein écran, sous le grain) ──────────────── */
.gold-dust{position:fixed;inset:0;z-index:850;pointer-events:none;opacity:.5}

/* ── LES PAS DU VOYAGE — empreintes dans le sable, d'une île à l'autre ─
   (remplace la ligne d'or, décision Benoit 09/07 : le voyage se MARCHE,
   il ne se trace pas — apparition pas à pas, jamais de trait continu) */
.sig-steps{position:absolute;top:0;left:0;z-index:820;pointer-events:none;overflow:visible}
.sig-steps .foot{opacity:0;transition:opacity 1s cubic-bezier(.22,.61,.21,1)}
.sig-steps .foot.on{opacity:.5}

/* ── Mobile : le CTA « Commander » en pleine largeur, impossible à manquer
   (21/07 : CTA unique par chapitre, « Voir la fiche » supprimé) ───────── */
@media (max-width:700px){
  .buy{flex-direction:column;align-items:stretch;gap:.9rem}
  .buy .btn{justify-content:center;text-align:center}
}

/* ── MARÉE D'ÎLE — la couleur du chapitre suivant monte entre deux îles ── */
.island-tide{position:fixed;inset:0;z-index:830;pointer-events:none;opacity:0;
  transition:opacity .5s cubic-bezier(.22,.61,.21,1)}
.island-tide>div{position:absolute;inset:0;will-change:transform}

@media (prefers-reduced-motion: no-preference){

/* ── Révélations : montée feutrée + mise au point (upgrade des .rv) ──── */
.rv{opacity:0;transform:translateY(30px);filter:blur(7px);
  transition:opacity 1.05s cubic-bezier(.22,.61,.21,1),
             transform 1.05s cubic-bezier(.22,.61,.21,1),
             filter 1.05s cubic-bezier(.22,.61,.21,1)}
.rv.is-in{opacity:1;transform:none;filter:blur(0)}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}
.rv-d3{transition-delay:.36s}.rv-d4{transition-delay:.48s}.rv-d5{transition-delay:.6s}

/* ── Noms de parfums : le nom se compose lettre à lettre ─────────────── */
.ch-txt h2.name .ltr{display:inline-block;opacity:0;
  transform:translateY(.42em) rotate(2.5deg);
  transition:opacity .75s cubic-bezier(.22,.61,.21,1),
             transform .75s cubic-bezier(.22,.61,.21,1)}
.ch-txt h2.name.is-in .ltr{opacity:1;transform:none}

/* ── Finale : la ligne signe le logo du pied de page ─────────────────── */
footer .flogo.signed{animation:sig-glow 1.7s cubic-bezier(.22,.61,.21,1)}
@keyframes sig-glow{
  0%{filter:brightness(1)}
  28%{filter:brightness(2) drop-shadow(0 0 26px rgba(232,199,106,.85))}
  100%{filter:brightness(1)}}

/* ── Noms de chapitres : le filet d'or se trace sous le nom ──────────── */
.ch-txt h2.name{position:relative;padding-bottom:.35em}
.ch-txt h2.name::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:120px;
  background:linear-gradient(90deg,#e8c76a,rgba(232,199,106,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.4s cubic-bezier(.22,.61,.21,1) .55s}
h2.name.is-in::after,.rv.is-in h2.name::after{transform:scaleX(1)}
.ch-kares .ch-txt h2.name::after{background:linear-gradient(90deg,#8a6d1f,rgba(138,109,31,0))}

/* ── Pyramide : chaque étage se lève en cascade, filet tracé ─────────── */
.pyramid.is-in>div{opacity:0;transform:translateY(14px);
  animation:pyr-in .9s cubic-bezier(.22,.61,.21,1) forwards}
.pyramid.is-in>div:nth-child(1){animation-delay:.15s}
.pyramid.is-in>div:nth-child(2){animation-delay:.34s}
.pyramid.is-in>div:nth-child(3){animation-delay:.53s}
@keyframes pyr-in{to{opacity:1;transform:none}}

/* ── Curseur-empreinte : le pointeur laisse deviner le pas dans le sable ──
   (l'anneau des liens .is-link garde son style d'origine) */
.cursor:not(.is-link){width:15px;height:24px;border-radius:0;border:none;
  background:#e8c76a;opacity:.85;transform:translate(-50%,-50%) rotate(-18deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath d='M8.8 1.6c2.6 0 4.6 2.2 4.9 5.6.3 3.2-.9 6.6-2.2 9.5-1 2.3-1.6 4.4-1.6 6.2 0 2.1-1 3.5-2.6 3.5s-2.8-1.3-2.9-3.4c-.1-1.8-.5-3.9-1.3-6.3-1-3-1.9-6.4-1.4-9.6C2.2 3.7 4 1.6 6.6 1.6Z'/%3E%3Ccircle cx='3.1' cy='1.9' r='1.15'/%3E%3Ccircle cx='5.9' cy='.6' r='1'/%3E%3Ccircle cx='8.6' cy='.2' r='.95'/%3E%3Ccircle cx='11.2' cy='.7' r='.9'/%3E%3Ccircle cx='13.5' cy='1.9' r='.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath d='M8.8 1.6c2.6 0 4.6 2.2 4.9 5.6.3 3.2-.9 6.6-2.2 9.5-1 2.3-1.6 4.4-1.6 6.2 0 2.1-1 3.5-2.6 3.5s-2.8-1.3-2.9-3.4c-.1-1.8-.5-3.9-1.3-6.3-1-3-1.9-6.4-1.4-9.6C2.2 3.7 4 1.6 6.6 1.6Z'/%3E%3Ccircle cx='3.1' cy='1.9' r='1.15'/%3E%3Ccircle cx='5.9' cy='.6' r='1'/%3E%3Ccircle cx='8.6' cy='.2' r='.95'/%3E%3Ccircle cx='11.2' cy='.7' r='.9'/%3E%3Ccircle cx='13.5' cy='1.9' r='.8'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── Flacons : pivot 3D réel piloté par le scroll (recto → verso gravé) ──
   Le cross-fade 14 s d'origine est remplacé : les deux faces sont opaques,
   dos-à-dos, et le conteneur .faces tourne. */
.arch .faces{transform-style:preserve-3d;will-change:transform}
.arch img.face-a,.arch img.face-b{backface-visibility:hidden;-webkit-backface-visibility:hidden;
  animation:none!important;opacity:1!important}
.arch img.face-b{transform:rotateY(180deg)}

/* ── Médaillons : halo qui respire + relief 3D piloté JS + reflet ────── */
.arch{will-change:transform;transform-style:preserve-3d}
.arch svg.halo{animation:halo-breathe 8s ease-in-out infinite}
@keyframes halo-breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.014)}}
.arch .medallion{position:relative}
.arch .medallion::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 42%,rgba(247,231,168,.16) 50%,transparent 58%);
  background-size:260% 100%;background-position:130% 0;mix-blend-mode:screen;
  transition:background-position 1.6s cubic-bezier(.22,.61,.21,1)}
.arch:hover .medallion::after{background-position:-130% 0}

/* ── Manifeste : les mots s'éclairent au fil du défilement ───────────── */
.manifesto .lead .w{opacity:.16;transition:opacity .55s cubic-bezier(.22,.61,.21,1)}
.manifesto .lead .w.lit{opacity:1}

/* ── Hero : ENTRÉE du logo — surgissement feutré (échelle + mise au point
   + halo d'or qui s'embrase puis se pose) dès le premier paint, sans JS ── */
.hero-logo{animation:abs-logo-in 1.9s cubic-bezier(.22,.61,.21,1) both}
@keyframes abs-logo-in{
  0%{opacity:0;transform:scale(1.10);filter:blur(14px) brightness(2.1)}
  42%{opacity:1;filter:blur(2px) brightness(1.35) drop-shadow(0 0 42px rgba(232,199,106,.55))}
  100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1) drop-shadow(0 0 0 rgba(232,199,106,0))}}

/* ── Hero : reflet d'or périodique sur le logo (masqué par le logo) ────
   ⚠️ NE PAS reposicionner .hero-inner : l'original est position:absolute
   (l'écraser en relative fait tomber le logo dans le flux → il mord la nav,
   incident 09/07). Le sheen est calé sur l'img par JS (left/top/width/height). */
.hero-sheen{position:absolute;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 40%,rgba(247,231,168,.85) 50%,transparent 60%);
  background-size:300% 100%;background-position:140% 0;
  -webkit-mask:var(--hero-logo-url) center/contain no-repeat;
  mask:var(--hero-logo-url) center/contain no-repeat;
  animation:hero-sheen 9s cubic-bezier(.22,.61,.21,1) 3.4s infinite}
@keyframes hero-sheen{0%{background-position:140% 0}12%{background-position:-160% 0}
  100%{background-position:-160% 0}}

/* ── CTA : lame de lumière au survol + assise à l'appui ──────────────── */
.btn,nav a.bag{position:relative;overflow:hidden;
  transition:color .3s,border-color .3s,transform .25s cubic-bezier(.22,.61,.21,1)}
.btn::before,nav a.bag::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(247,231,168,.28) 50%,transparent 58%);
  background-size:280% 100%;background-position:130% 0;
  transition:background-position .9s cubic-bezier(.22,.61,.21,1)}
.btn:hover::before,nav a.bag:hover::before{background-position:-130% 0}
.btn:active,nav a.bag:active{transform:scale(.975)}

/* ── Sommaire romain : l'or monte à la rencontre du regard ───────────── */
.roman a{transition:transform .45s cubic-bezier(.22,.61,.21,1)}
.roman a:hover{transform:translateY(-4px)}
.roman a .t{position:relative}
.roman a .t::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:#e8c76a;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.22,.61,.21,1)}
.roman a:hover .t::after{transform:scaleX(1)}

/* ── Nav : soulignement or tracé ─────────────────────────────────────── */
nav ul li a:not(.bag):not(.lang){position:relative}
nav ul li a:not(.bag):not(.lang)::after{content:'';position:absolute;left:0;right:0;bottom:-6px;
  height:1px;background:linear-gradient(90deg,#e8c76a,rgba(232,199,106,.15));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.22,.61,.21,1)}
nav ul li a:not(.bag):not(.lang):hover::after{transform:scaleX(1)}

/* ── Vidéos de chapitre : profondeur au défilement (JS translate) ────── */
.chapter video.bgv{will-change:transform;transform:translateY(0) scale(1.12)}

/* ── Éléments pilotés JS ─────────────────────────────────────────────── */
.hero video,.hero .hero-inner{will-change:transform}
.magnetic{will-change:transform}

}/* fin no-preference */

@media (prefers-reduced-motion: reduce){
  .gold-dust,.hero-sheen{display:none}
  .gold-progress{transition:none}
}

/* ── Lien Fragrantica (chapitres) ─────────────────────────────────────── */
.frg-link{display:inline-block;align-self:flex-start;width:max-content;max-width:100%;margin-left:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(240,234,219,.45);text-decoration:none;border-bottom:1px solid rgba(232,199,106,.25);padding-bottom:2px;transition:color .3s,border-color .3s}
@media (max-width:720px){.frg-link{align-self:center;margin:6px auto 0;display:block;text-align:center}}
.frg-link:hover{color:#e8c76a;border-color:#e8c76a}
.ch-kares .frg-link{color:rgba(26,23,19,.5);border-color:rgba(26,23,19,.25)}
.ch-kares .frg-link:hover{color:#8a6d1f;border-color:#8a6d1f}

.frg-link .ext-arrow{margin-left:2px;margin-bottom:1px;vertical-align:baseline}

/* ── iOS Safari : pas de simulation de survol au 1er tap (fix « 2 taps CTA » 10/07) ──
   Sur écran tactile, le 1er appui appliquait l'état :hover (lame de lumière,
   élévation) et Safari réservait le clic au 2e appui. Sans hover tactile,
   le clic part au premier appui. */
@media (hover: none), (pointer: coarse) {
  .btn:hover{background-position:0 0;transform:none;
    box-shadow:0 14px 34px -14px rgba(232,199,106,.45)}
  .btn:hover::before,nav a.bag:hover::before{background-position:130% 0}
  nav a.bag:hover{background:transparent}
  .btn-fiche:hover{border-color:rgba(232,199,106,.35);color:rgba(240,234,219,.8)}
  .frg-link:hover{color:rgba(240,234,219,.55);border-color:transparent}
  .roman a:hover{transform:none}
  .roman a:hover .t::after{transform:scaleX(0)}
  nav ul li a:not(.bag):not(.lang):hover::after{transform:scaleX(0)}
}
/* Tap direct sans délai double-tap-zoom */
a,button{touch-action:manipulation}