/* ESSAI « effets resto » v2 (07/11/2026) — entrée « la lumière se lève », nom dévoilé mot par mot,
   reflet doré, sortie douce du héros au défilement, ligne dorée pleine qui relie le héros au fil,
   fil qui se remplit, sections qui s'allument, photos dévoilées en rideau. */
:root{--or:#d9b26a;--or-clair:#f1d39a;--doux:cubic-bezier(.2,.7,.2,1);
  /* progression ordonnée dans les tons du site : doré clair → doré → bronze */
  --t1:#efd6a2;--t2:#e2bf7e;--t3:#d3a964;--t4:#c09252;--t5:#ab7d45}

/* ---------- HÉROS : la lumière se lève ---------- */
.hero-media{overflow:hidden}
.hero-media img{translate:0 var(--flotte,0px);scale:1.08;transform:none!important;will-change:translate,scale,filter;
  animation:eveil 1.3s var(--doux) both, respire 24s ease-in-out 1.3s infinite alternate}
@keyframes eveil{from{scale:1.14;filter:blur(6px) brightness(.5) saturate(.7)}to{scale:1.08;filter:none}}
@keyframes respire{from{scale:1.08}to{scale:1.14}}
.hero-media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;     /* halo chaud qui s'allume */
  background:radial-gradient(60% 70% at 72% 45%,rgba(255,190,110,.20),transparent 70%);
  opacity:0;animation:halo 1.4s ease-out .3s forwards}
@keyframes halo{to{opacity:1}}

/* nom dévoilé mot par mot (le texte monte depuis une fente) */
.hero h1{letter-spacing:-.02em}
.hero h1 .mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em .12em;margin-bottom:-.12em}
.hero h1 .mot > span{display:inline-block;transform:translateY(105%);animation:leve .8s var(--doux) both}
@keyframes leve{to{transform:none}}
.hero h1 em{font-style:italic;font-weight:400;color:var(--or-clair)}
.hero h1 em i{font-style:inherit;display:inline-block;
  background:linear-gradient(100deg,var(--or-clair) 0%,var(--or-clair) 40%,#fff6e3 50%,var(--or-clair) 60%,var(--or-clair) 100%);
  background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:reflet 1.1s ease-in-out .95s both}
@keyframes reflet{from{background-position:100% 0}to{background-position:0 0}}
/* le reste arrive après le nom */
.hero .eyebrow{animation:apparait .6s var(--doux) .1s both!important}
.hero .eyebrow::before{transform-origin:left;animation:trace .7s var(--doux) .15s both}
@keyframes trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .tagline{animation:apparait .7s var(--doux) .55s both!important}
.hero .cta-row{animation:apparait .7s var(--doux) .68s both!important}
.hero .note-google{animation:apparait .7s var(--doux) .8s both!important}
.hero .statut-carte,.hero [class*="ruban"]{animation:fondu .8s ease .85s both}
@keyframes fondu{from{opacity:0}to{opacity:1}}
@keyframes apparait{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* sortie douce : le texte du héros remonte et s'efface quand on descend */
.hero .wrap{transform:translateY(calc(var(--sortie,0) * -60px));opacity:calc(1 - var(--sortie,0) * .85);will-change:transform,opacity}

/* CIRCUIT au défilement : la lumière part de l'extrême droite du bord bas du bandeau, file vers la gauche,
   tourne dans l'arrondi et descend le fil (une seule ligne continue). --h = progression horizontale (0 → 1). */
.bande{position:relative;border-bottom-color:transparent!important}
/* (le bandeau coupe ce qui dépasse : la barre est donc un élément à part, #fil-ligne, posé sur son bord bas) */
.bande{position:relative;border-bottom-color:transparent!important}
.bande + section{border-top-color:transparent!important}
/* la barre est VISIBLE dès l'ouverture (partie droite) et s'allonge vers la gauche en descendant jusqu'au fil */
#fil-ligne{position:absolute;right:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,#fff1d2 0,var(--t1) 50px,var(--t1) 100%);box-shadow:0 0 10px rgba(226,191,126,.55);
  transform:scaleX(var(--h,0));transform-origin:right}   /* invisible au repos, apparaît dès le 1er millimètre de défilement */
#fil-coin{position:absolute;width:16px;height:16px;z-index:4;pointer-events:none;
  border-left:1px solid rgba(255,255,255,.10);border-top:1px solid transparent;border-top-left-radius:16px;
  transition:border-color .08s,box-shadow .08s}
#fil-coin.allume{border-color:var(--t1);box-shadow:-3px -3px 10px -6px rgba(240,190,110,.8)}
/* téléphone : la ligne se pose PILE sur le bord haut de la barre Appeler / Itinéraire ;
   l'arrondi n'apparaît que quand la lumière l'atteint (il ne dépasse jamais sur la barre) */

/* ---------- LE FIL ---------- */
main{position:relative}
#fil{position:absolute;left:var(--fil-x,28px);width:1px;z-index:4;pointer-events:none}
#fil::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.10)}
#fil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(var(--t1) 0%,var(--t2) 25%,var(--t3) 50%,var(--t4) 75%,var(--t5) 100%);
  clip-path:inset(0 0 calc(100% - var(--progres,0%)) 0);box-shadow:0 0 10px rgba(217,178,106,.45)}
.fil-noeud{position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;background:var(--bg,#120d0b);
  border:1px solid var(--ton);transition:background .6s,box-shadow .6s}
.fil-noeud::after{content:"";position:absolute;top:4px;left:10px;height:1px;width:var(--trait,40px);background:rgba(255,255,255,.10);
  transform:scaleX(.25);transform-origin:left;transition:transform .9s var(--doux),background .6s}
.fil-noeud.allume{background:var(--ton);box-shadow:0 0 16px var(--ton)}
.fil-noeud.fin{width:13px;height:13px;left:-6px;margin-top:-2px}
.fil-noeud.fin.allume::after{background:linear-gradient(90deg,var(--ton) 0%,var(--ton) 82%,transparent 100%)}
.fil-noeud.fin.allume{box-shadow:0 0 0 4px rgba(171,125,69,.25),0 0 18px var(--ton)}
.fil-noeud.allume::after{transform:none;background:linear-gradient(90deg,var(--ton),transparent)}
section.etape{--ton:var(--or)}
section.etape h2 em{font-style:italic;font-weight:400;color:var(--ton)}
section.etape > .wrap{padding-left:var(--marge-fil)!important}
section.etape > .wrap .wrap{padding-left:0!important}
section.etape .wrap > *{opacity:0}
section.etape.vue .wrap > *{animation:apparait .9s var(--doux) both}
section.etape.vue .wrap > *:nth-child(2){animation-delay:.1s}
section.etape.vue .wrap > *:nth-child(3){animation-delay:.2s}
section.etape.vue .wrap > *:nth-child(n+4){animation-delay:.3s}

/* galerie : chaque photo se dévoile comme un rideau qui s'ouvre */
section.etape .galerie figure{clip-path:inset(0 0 100% 0);opacity:1!important;transform:none!important}
section.etape .galerie figure img{scale:1.18;transition:transform .6s ease}
section.etape.vue .galerie figure{animation:rideau 1.2s var(--doux) both}
section.etape.vue .galerie figure img{animation:recule 1.6s var(--doux) both}
section.etape.vue .galerie figure:nth-child(2),section.etape.vue .galerie figure:nth-child(2) img{animation-delay:.15s}
section.etape.vue .galerie figure:nth-child(3),section.etape.vue .galerie figure:nth-child(3) img{animation-delay:.3s}
@keyframes rideau{to{clip-path:inset(0)}}
@keyframes recule{to{scale:1}}
.galerie figure:hover img{transform:scale(1.04)}

/* téléphone : le nom s'affiche AUSSI en grand dans le héros (le modèle le cachait) */
@media(max-width:720px){
  .hero h1{display:block!important;text-align:center;font-size:clamp(2.5rem,12vw,3.4rem)!important;line-height:1.05;margin:0 0 4px!important}
  .hero h1 .mot{padding-bottom:.14em}
  .hero .fb-ruban{transform:none!important;margin:0 auto 18px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-media img,.hero h1 .mot > span,.hero h1 em i,.hero .eyebrow,.hero .tagline,.hero .cta-row,.hero .note-google,
  .hero .statut-carte,section.etape.vue .wrap > *,section.etape.vue .galerie figure,section.etape.vue .galerie figure img{animation:none!important}
  .hero h1 .mot > span{transform:none}.hero h1 em i{-webkit-text-fill-color:var(--or-clair);background:none}
  section.etape .wrap > *{opacity:1}section.etape .galerie figure{clip-path:none}section.etape .galerie figure img{scale:1}
  .hero-media::before{opacity:1;animation:none}#fil-ligne{transform:none}#fil-coin{opacity:1;border-color:var(--t1)}#fil::after{clip-path:none}
}
/* v47 (08/11) : plus de rail translucide : la ligne dorée avance dans le vide ; trait des sections invisible tant que la ligne n'est pas passée */
#fil::before{display:none}
#fil-coin{border-left-color:transparent}
#fil-coin.allume{border-left-color:var(--t1)}
.fil-noeud::after{background:transparent}
.fil-noeud.allume::after{background:linear-gradient(90deg,var(--ton),transparent)}
.fil-noeud.fin.allume::after{background:linear-gradient(90deg,var(--ton) 0%,var(--ton) 82%,transparent 100%)}

/* v24 (08/11) : longueur dorée de la ligne en px (--lit, posé sur #fil) → le bout lumineux ne saute plus quand une section change de taille */
#fil::after{clip-path:inset(0 0 calc(100% - var(--lit,0px)) 0)!important}

/* v25 (08/11) : petite flèche très discrète au bout de la ligne dorée (invite à descendre) ; elle suit le bout lumineux */
#fil-fleche{position:absolute;left:50%;top:var(--lit,0px);width:7px;height:7px;margin:-6px 0 0 -3.5px;
  border-right:1px solid var(--t2,#e2bf7e);border-bottom:1px solid var(--t2,#e2bf7e);rotate:45deg;
  filter:drop-shadow(0 0 3px rgba(217,178,106,.5));opacity:0;transition:opacity .4s ease;pointer-events:none}
#fil-fleche.visible{opacity:.8}
@media(prefers-reduced-motion:reduce){#fil-fleche{display:none}}

/* v26 (08/11) : partie dorée de la ligne tenue par le navigateur : une barre dorée « collante » dont le bas reste à 62 % de l'écran,
   dans un rail découpé à la hauteur du fil → aucun retard au défilement (avant : recalculée à chaque image = saccades / flèche dédoublée) */
#fil::after{display:none!important}
#fil-rail{position:absolute;left:0;top:0;width:1px;height:100%;clip-path:inset(0 -30px);pointer-events:none}
#fil-rail-in{position:absolute;left:0;top:calc(-1 * var(--H,0px));width:1px;height:calc(2 * var(--H,0px))}
#fil-or{position:sticky;bottom:var(--bas,38vh);width:1px;height:var(--H,0px);margin-top:var(--H,0px);
  background:linear-gradient(to bottom,var(--t3) 0%,var(--t2) calc(100% - 160px),var(--t1) calc(100% - 40px),#fff1d2 100%);
  box-shadow:0 0 10px rgba(217,178,106,.45)}
#fil-fleche{top:auto!important;bottom:0;margin:0 0 -1px -3.5px!important}
#fil-or{margin-top:0!important}
#fil-cale{height:var(--H,0px)}
/* v27 : flèche qui pivote selon le sens du défilement */
#fil-fleche{transition:opacity .4s ease,rotate .45s cubic-bezier(.2,.7,.2,1),translate .45s cubic-bezier(.2,.7,.2,1)}
#fil-fleche.haut{rotate:225deg;translate:0 -3px}