/* =========================================================================
   dynamique.css — effets ajoutés au site (août 2026)
   1. barre de lecture dorée en haut de page
   2. en-tête qui se compacte et se floute au défilement
   3. « Le parcours » : rail doré à 4 étapes (page d'accueil)
   4. chiffres animés + compte à rebours (page d'accueil)
   5. brillance dorée qui balaie les boutons au survol
   Ce fichier se charge APRÈS le <style> de chaque page : il complète, il ne remplace rien.
   ========================================================================= */

/* ---------- 1. barre de lecture ---------- */
#barre-lecture{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#8f6f28,var(--or) 45%,var(--or-clair));z-index:60;
  box-shadow:0 0 12px rgba(201,162,75,.55);pointer-events:none}

/* ---------- 2. en-tête compact ---------- */
/* page d'accueil */
header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;
  transition:padding .45s cubic-bezier(.22,.61,.36,1),background .45s,border-color .45s}
header.compact{padding:14px 24px 12px;background:rgba(10,10,10,.78);
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:rgba(201,162,75,.3)}
header .marque{transition:font-size .45s cubic-bezier(.22,.61,.36,1),letter-spacing .45s}
header.compact .marque{font-size:clamp(15px,2.4vw,21px);letter-spacing:.3em}
header .filet{transition:margin .45s,opacity .45s,width .45s}
header.compact .filet{margin:8px auto;width:34px;opacity:.7}
header .accroche{max-height:40px;overflow:hidden;transition:max-height .45s,opacity .4s}
header.compact .accroche{max-height:0;opacity:0}
/* toutes les autres pages */
.topbar{position:sticky;top:0;z-index:50;transition:padding .45s cubic-bezier(.22,.61,.36,1),background .45s,box-shadow .45s}
.topbar.compact{padding:13px 32px;background:rgba(10,10,10,.82);
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.topbar .marque{transition:font-size .45s,letter-spacing .45s}
.topbar.compact .marque{font-size:15px;letter-spacing:.24em}

/* ---------- 5. brillance dorée des boutons ---------- */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none}
.btn:hover::before{animation:lt-brillance .85s ease}
@keyframes lt-brillance{to{left:160%}}

/* ---------- 3. le parcours ---------- */
.rail{position:relative;max-width:1100px;margin:44px auto 0;padding:0 40px}
.rail-piste{position:absolute;left:40px;right:40px;top:11px;height:2px;background:rgba(201,162,75,.18)}
.rail-remplissage{position:absolute;inset:0;background:linear-gradient(90deg,#8f6f28,var(--or) 40%,var(--or-clair));
  transform:scaleX(var(--p,0));transform-origin:0 50%;box-shadow:0 0 14px rgba(201,162,75,.5)}
.etapes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.etape{text-align:center}
.etape .point{display:block;width:24px;height:24px;margin:0 auto 16px;border-radius:50%;
  border:1px solid rgba(201,162,75,.45);background:var(--noir);position:relative;
  transition:border-color .5s,box-shadow .5s,transform .5s}
.etape .point::after{content:"";position:absolute;inset:6px;border-radius:50%;
  background:rgba(201,162,75,.25);transition:background .5s}
.etape.on .point{border-color:var(--or-clair);
  box-shadow:0 0 0 4px rgba(201,162,75,.12),0 0 22px rgba(201,162,75,.55);transform:scale(1.12)}
.etape.on .point::after{background:var(--or-clair)}
.etape b{display:block;font-weight:400;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);transition:color .5s}
.etape.on b{color:var(--blanc)}
.etape small{display:block;color:#807c72;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:5px;transition:color .5s}
.etape.on small{color:var(--or)}
.etape:hover .point{border-color:var(--or-clair)}
@media(max-width:720px){
  .rail{padding:0 24px}
  .rail-piste{left:35px;right:auto;top:12px;bottom:12px;width:2px;height:auto}
  .rail-remplissage{transform:scaleY(var(--p,0));transform-origin:50% 0}
  .etapes{grid-template-columns:1fr;gap:26px}
  .etape{display:grid;grid-template-columns:24px 1fr;gap:16px;text-align:left;align-items:center}
  .etape .point{margin:0}
  .etape b,.etape small{grid-column:2}
}

/* ---------- 4. chiffres + compte à rebours ---------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1100px;margin:30px auto 0;padding:0 24px}
@media(max-width:820px){.chiffres{grid-template-columns:repeat(2,1fr)}}
.chiffre{border:1px solid rgba(201,162,75,.28);
  background:radial-gradient(120% 130% at 50% 0%,#1b1913 0%,#0b0b0b 62%);
  padding:26px 16px;text-align:center;transition:border-color .35s,transform .35s}
.chiffre:hover{border-color:var(--or);transform:translateY(-4px)}
.chiffre b{display:block;font-size:clamp(30px,4.4vw,46px);font-weight:300;color:var(--or-clair);
  letter-spacing:.04em;line-height:1}
.chiffre span{display:block;margin-top:12px;color:var(--gris);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.rebours{max-width:1100px;margin:20px auto 0;padding:0 24px}
.rebours-in{border:1px solid rgba(201,162,75,.35);background:var(--noir2);padding:18px 24px;text-align:center;
  font-size:14px;letter-spacing:.1em;color:var(--gris)}
.rebours-in b{color:var(--or-clair);font-size:22px;font-weight:400;letter-spacing:.06em;margin:0 6px}
.rebours-in em{color:var(--blanc);font-style:normal;text-transform:uppercase;font-size:12px;letter-spacing:.2em}

/* ---------- accessibilité : respect du réglage système ---------- */
@media (prefers-reduced-motion: reduce){
  #barre-lecture,.rail-remplissage{transition:none}
  .btn:hover::before{animation:none}
  header,.topbar,.etape .point,.etape b,.etape small,.chiffre{transition:none}
}

/* =========================================================================
   AJOUT « GLOW UP » — août 2026
   6. hero cinématographique (dégradé profond, zoom lent, titre qui monte)
   7. transitions entre les pages (View Transitions API)
   Rien à modifier dans les pages : tout se règle ici.
   ========================================================================= */

/* ---------- 6. HERO CINÉMATOGRAPHIQUE ---------- */

/* 6a. les pages de stages : la photo respire plus, le voile est plus travaillé */
.hero .photo{
  filter:grayscale(0) brightness(.86) contrast(1.06) saturate(1.06);
  transform-origin:center 32%;
}
/* voile : sombre au centre (pour le texte) et en bas, clair sur les bords hauts */
.hero::after{
  background:
    radial-gradient(115% 85% at 50% 52%,rgba(10,10,10,.66) 0%,rgba(10,10,10,.40) 45%,rgba(10,10,10,0) 80%),
    linear-gradient(180deg,rgba(10,10,10,.50) 0%,rgba(10,10,10,.12) 26%,rgba(10,10,10,.42) 68%,rgba(10,10,10,.92) 100%);
}
/* zoom très lent (effet Ken Burns) */
@keyframes lt-kenburns{from{transform:scale(1)}to{transform:scale(1.11)}}
.hero .photo{animation:lt-kenburns 26s ease-out both}

/* 6b. la page d'accueil : même traitement sur le grand cadre du chapeau */
.hero-inner img{filter:grayscale(0) brightness(.74) contrast(1.05) saturate(1.05)}
.hero-inner::after{
  background:
    radial-gradient(120% 90% at 50% 78%,rgba(10,10,10,.60) 0%,rgba(10,10,10,.30) 48%,rgba(10,10,10,0) 82%),
    linear-gradient(180deg,rgba(10,10,10,.34) 0%,rgba(10,10,10,.14) 30%,rgba(10,10,10,.55) 66%,rgba(10,10,10,.95) 100%);
}

/* 6c. le titre se compose à l'arrivée, ligne après ligne
   (on neutralise l'apparition d'ensemble pour la remplacer par celle-ci) */
.hero .titrage.rvl,.hero-inner.rvl{opacity:1;transform:none;transition:none}
@keyframes lt-monte{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero .titrage > *,
.hero-inner > .over,.hero-inner > h1,.hero-inner > .pitch,.hero-inner > .actions{
  animation:lt-monte .95s cubic-bezier(.19,.72,.24,1) both;
}
.hero .titrage > *:nth-child(1),.hero-inner > .over{animation-delay:.10s}
.hero .titrage > *:nth-child(2),.hero-inner > h1{animation-delay:.24s}
.hero .titrage > *:nth-child(3),.hero-inner > .pitch{animation-delay:.38s}
.hero .titrage > *:nth-child(4),.hero-inner > .actions{animation-delay:.50s}
.hero .titrage > *:nth-child(5){animation-delay:.60s}
.hero .titrage > *:nth-child(6){animation-delay:.70s}

/* ---------- 7. TRANSITIONS ENTRE LES PAGES ---------- */
/* Navigateurs récents (Chrome, Edge, Safari 18.2+) : fondu d'une page à
   l'autre au lieu du flash blanc. Les autres navigateurs ne voient aucune
   différence — le site fonctionne exactement comme avant. */
@view-transition{navigation:auto}

::view-transition-old(root){animation:lt-vt-sortie .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:lt-vt-entree .42s cubic-bezier(0,0,.2,1) both}
@keyframes lt-vt-sortie{to{opacity:0}}
@keyframes lt-vt-entree{from{opacity:0}to{opacity:1}}

/* la photo de la vignette cliquée devient la photo du hero de la page suivante */
.hero .photo{view-transition-name:lt-photo}
::view-transition-group(lt-photo){animation-duration:.62s;animation-timing-function:cubic-bezier(.32,.04,.14,1)}
::view-transition-old(lt-photo),::view-transition-new(lt-photo){
  animation-duration:.62s;height:100%;object-fit:cover;
}

/* ---------- accessibilité : réglage système « réduire les animations » ---------- */
@media (prefers-reduced-motion: reduce){
  .hero .photo{animation:none}
  .hero .titrage > *,
  .hero-inner > .over,.hero-inner > h1,.hero-inner > .pitch,.hero-inner > .actions{animation:none}
  @view-transition{navigation:none}
}

/* ---------- 8. HEROS ET VIGNETTES EN MONTAGE DE PLUSIEURS PHOTOS ----------
   Certaines vignettes et certains heros sont composés de 2 ou 3 photos
   côte à côte (.strips) au lieu d'une seule. Ils reçoivent le même
   traitement que les photos uniques. */
.hero .strips i{filter:grayscale(0) brightness(.86) contrast(1.06) saturate(1.06)}
.hero .strips{
  transform-origin:center 32%;
  animation:lt-kenburns 26s ease-out both;
  view-transition-name:lt-photo;
}
/* zoom au survol, comme sur les vignettes à photo unique
   (on agrandit le montage entier, sinon un filet apparaît entre les photos) */
.stage .strips{transition:transform .5s}
.stage:hover .strips{transform:scale(1.05)}

@media (prefers-reduced-motion: reduce){
  .hero .strips{animation:none}
  .stage .strips{transition:none}
  .stage:hover .strips{transform:none}
}

/* ---------- 9. LECTEUR VIDÉO (pause, progression, plein écran) ----------
   Les reels restent en lecture auto muette ; on ajoute simplement
   de quoi les mettre en pause et les agrandir. */
.lecteur{position:relative;display:block;line-height:0}
.lecteur video{display:block;cursor:pointer}
.lecteur .cmd{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;
  border:1px solid var(--or);background:rgba(10,10,10,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:grid;place-items:center;pointer-events:none;
  transform:translate(-50%,-50%) scale(.86);opacity:0;transition:opacity .3s,transform .3s}
.lecteur:hover .cmd,.lecteur.en-pause .cmd{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lecteur .cmd svg{width:20px;height:20px;fill:var(--or-clair)}
.lecteur .agrandir{position:absolute;right:9px;top:9px;width:34px;height:34px;padding:0;
  border:1px solid rgba(201,162,75,.5);background:rgba(10,10,10,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .3s,background .3s}
.lecteur:hover .agrandir,.lecteur:focus-within .agrandir{opacity:1}
.lecteur .agrandir:hover{background:rgba(201,162,75,.85)}
.lecteur .agrandir svg{width:15px;height:15px;fill:var(--or-clair)}
.lecteur .agrandir:hover svg{fill:#0a0a0a}
.lecteur .progression{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(245,242,236,.14)}
.lecteur .progression i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#8f6f28,var(--or) 45%,var(--or-clair))}

/* ---------- 10. VISIONNEUSE PLEIN ÉCRAN ---------- */
#lt-visionneuse{position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(6,6,6,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#lt-visionneuse.ouverte{display:flex;animation:lt-vis-entree .32s ease both}
@keyframes lt-vis-entree{from{opacity:0}to{opacity:1}}
#lt-visionneuse .scene{position:relative;max-width:94vw;max-height:90vh;display:flex;
  align-items:center;justify-content:center;animation:lt-vis-zoom .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes lt-vis-zoom{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
#lt-visionneuse video,#lt-visionneuse img{max-width:min(92vw,460px);max-height:86vh;
  border:1px solid rgba(201,162,75,.5);display:block;background:#000}
#lt-visionneuse .fermer,#lt-visionneuse .fleche{position:fixed;border:1px solid rgba(201,162,75,.5);
  background:rgba(10,10,10,.6);color:var(--or-clair);cursor:pointer;display:grid;place-items:center;
  width:46px;height:46px;padding:0;transition:background .3s,color .3s}
#lt-visionneuse .fermer:hover,#lt-visionneuse .fleche:hover{background:var(--or);color:#0a0a0a}
#lt-visionneuse .fermer{top:22px;right:22px;font-size:20px;line-height:1}
#lt-visionneuse .fleche{top:50%;transform:translateY(-50%);font-size:18px}
#lt-visionneuse .fleche.prec{left:22px}
#lt-visionneuse .fleche.suiv{right:22px}
#lt-visionneuse .compteur{position:fixed;bottom:24px;left:0;right:0;text-align:center;
  color:var(--gris);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
@media(max-width:560px){
  #lt-visionneuse .fleche{width:40px;height:40px}
  #lt-visionneuse .fleche.prec{left:8px}
  #lt-visionneuse .fleche.suiv{right:8px}
}
body.lt-fige{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .lecteur .cmd,.lecteur .agrandir{transition:none}
  #lt-visionneuse.ouverte,#lt-visionneuse .scene{animation:none}
}

/* ---------- 6. navigation au clavier ----------
   Certaines personnes parcourent le site avec la touche Tabulation plutot
   qu'avec la souris. Sans ce liseré, rien n'indique où l'on se trouve.
   :focus-visible ne se declenche QU'AU CLAVIER : rien ne change au clic. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--or-clair,#e6cd8b);
  outline-offset:3px;
  border-radius:2px;
}
/* sur fond or (boutons pleins), le liseré doré ne se verrait pas */
.btn.or:focus-visible,.financement a:focus-visible,.cta a:focus-visible{
  outline-color:#f5f2ec;
}