/* ============================================================
   1. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-texte);font-size:var(--t-md);line-height:1.65;
  color:var(--texte);background:var(--fond);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:var(--accent-contraste)}
:where(section,[id]){scroll-margin-top:100px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ============================================================
   2. LAYOUT
   ============================================================ */
.conteneur{width:100%;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--e4)}
@media (max-width:600px){.conteneur{padding-inline:var(--e3)}}
.section{padding-block:var(--e7)}
@media (max-width:768px){.section{padding-block:var(--e6)}}
.lecture{max-width:var(--lecture)}

.skip{
  position:absolute;left:var(--e3);top:-100px;z-index:100;
  background:var(--accent);color:var(--accent-contraste);
  padding:var(--e2) var(--e3);border-radius:var(--r-sm);transition:top var(--transition);
}
.skip:focus,.skip:focus-visible{top:var(--e3)}

/* Grain global — texture discrète */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   3. HEADER
   ============================================================ */
.header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:var(--transition)}
.header.is-scrolled{
  background:color-mix(in srgb,var(--fond) 84%,transparent);
  backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--bordure);
}
@supports not (backdrop-filter:blur(1px)){.header.is-scrolled{background:var(--fond)}}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);height:72px}

.logo{font-family:var(--font-titre);font-weight:700;font-size:1.375rem;letter-spacing:-.05em}
.logo span{color:var(--accent)}

.nav{display:flex;align-items:center;gap:var(--e5)}
.nav a{font-size:var(--t-sm);color:var(--texte-doux);position:relative;transition:color var(--transition)}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--transition);
}
.nav a:hover{color:var(--texte)}
.nav a:hover::after{transform:scaleX(1)}

.header__actions{display:flex;align-items:center;gap:var(--e2)}
.icone-btn{
  width:40px;height:40px;display:grid;place-items:center;flex:none;
  border:1px solid var(--bordure);border-radius:var(--r-full);transition:var(--transition);
}
.icone-btn:hover{border-color:var(--accent);color:var(--accent)}
.icone-btn:active{transform:scale(.94)}

.burger{display:none}
.burger span{display:block;width:19px;height:2px;background:currentColor;position:relative;transition:var(--transition)}
.burger span::before,.burger span::after{
  content:'';position:absolute;left:0;width:19px;height:2px;background:currentColor;transition:var(--transition);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .burger{display:grid}
  .header .btn--nav{display:none}
  .nav{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;
    gap:var(--e3);padding:var(--e4);background:var(--fond);
    border-bottom:1px solid var(--bordure);
    transform:translateY(-10px);opacity:0;visibility:hidden;transition:var(--transition);
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible}
  .nav a{font-size:var(--t-xl);font-family:var(--font-titre)}
}

/* ============================================================
   4. BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:var(--e2);
  padding:14px var(--e4);border-radius:var(--r-full);
  font-size:var(--t-sm);font-weight:500;white-space:nowrap;
  transition:transform 130ms,background var(--transition),border-color var(--transition),color var(--transition);
}
.btn:active{transform:scale(.97)}
.btn--primaire{background:var(--accent);color:var(--accent-contraste);box-shadow:0 16px 36px -18px var(--accent)}
.btn--primaire:hover{transform:translateY(-2px)}
.btn--fantome{border:1px solid var(--bordure);color:var(--texte)}
.btn--fantome:hover{border-color:var(--accent);color:var(--accent)}
.btn--clair{background:var(--fond);color:var(--texte)}
.btn--clair:hover{transform:translateY(-2px)}
.btn svg{flex:none;transition:transform var(--transition)}
.btn:hover svg{transform:translateX(3px)}

/* ============================================================
   5. TYPOGRAPHIE
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--e2);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-doux);font-weight:500;margin-bottom:var(--e4);
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pouls 2.6s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.2}}

.h-geant{
  font-family:var(--font-titre);font-weight:800;font-variation-settings:'wdth' 90;
  font-size:clamp(2.85rem,9.5vw,7rem);line-height:.94;letter-spacing:-.045em;
  text-wrap:balance;
}
.h-section{
  font-family:var(--font-titre);font-weight:700;
  font-size:clamp(2rem,5vw,3.25rem);line-height:1.02;letter-spacing:-.035em;
  text-wrap:balance;margin-bottom:var(--e3);
}
.h-carte{font-family:var(--font-titre);font-weight:500;font-size:var(--t-xl);letter-spacing:-.025em;line-height:1.15}
.accent{color:var(--accent)}
.doux{color:var(--texte-doux)}
.chapo{font-size:var(--t-lg);color:var(--texte-doux);text-wrap:pretty}
.mb-l{margin-bottom:var(--e6)}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{position:relative;min-height:90svh;display:flex;align-items:center;padding-block:var(--e7);overflow:hidden}
.hero__lueur{
  position:absolute;inset:-25% -15% auto -15%;height:75%;z-index:-1;
  filter:blur(110px);opacity:.26;pointer-events:none;
  background:
    radial-gradient(40% 58% at 12% 44%, var(--aqua-600), transparent 74%),
    radial-gradient(32% 42% at 66% 18%, var(--plasma-froid), transparent 76%);
}
.hero h1{margin-bottom:var(--e4)}
.hero .chapo{max-width:54ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);margin-top:var(--e6);
  padding-top:var(--e4);border-top:1px solid var(--bordure);
  font-size:var(--t-sm);color:var(--texte-doux);
}
.hero__meta span{display:inline-flex;align-items:center;gap:var(--e2)}
.hero__meta svg{color:var(--accent)}

/* ============================================================
   7. OFFRE — deux colonnes asymétriques
   ============================================================ */
.offre{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e6) var(--e7);align-items:start}
@media (max-width:900px){.offre{grid-template-columns:1fr;gap:var(--e5)}}
.offre__sticky{position:sticky;top:120px}
@media (max-width:900px){.offre__sticky{position:static}}

.liste-inclus{display:grid;gap:var(--e1)}
.liste-inclus li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e3);
  padding:var(--e4) 0;border-bottom:1px solid var(--bordure);
}
.liste-inclus li:first-child{border-top:1px solid var(--bordure)}
.liste-inclus svg{color:var(--accent);margin-top:5px}
.liste-inclus strong{display:block;font-weight:500;font-family:var(--font-titre);letter-spacing:-.015em}
.liste-inclus p{font-size:var(--t-sm);color:var(--texte-doux);margin-top:2px}

/* ============================================================
   8. MÉTHODE — liste éditoriale numérotée
   ============================================================ */
.etapes{border-top:1px solid var(--bordure)}
.etape{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--e4);align-items:baseline;
  padding:var(--e5) 0;border-bottom:1px solid var(--bordure);
  transition:background var(--transition);
}
.etape:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.etape__num{
  font-family:var(--font-titre);font-weight:700;font-size:var(--t-sm);
  color:var(--accent);letter-spacing:.06em;
}
.etape p{color:var(--texte-doux);font-size:var(--t-sm)}
@media (max-width:768px){
  .etape{grid-template-columns:auto 1fr;gap:var(--e2) var(--e3);padding:var(--e4) 0}
  .etape p{grid-column:2}
}

/* ============================================================
   9. RÉALISATIONS
   ============================================================ */
.grille-projets{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--e3)}
.projet{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--bordure);border-radius:var(--r-md);
  background:var(--surface);overflow:hidden;
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.projet:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:var(--ombre)}
.projet__visuel{
  aspect-ratio:16/10;display:grid;place-items:center;
  background:var(--fond);
  background:
    radial-gradient(60% 70% at 30% 25%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%),
    var(--fond);
  border-bottom:1px solid var(--bordure);
}
.projet__visuel span{
  font-family:var(--font-titre);font-weight:700;font-size:2.25rem;
  letter-spacing:-.05em;color:var(--texte-doux);opacity:.55;
}
.projet__corps{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e2);flex:1}
.projet p{font-size:var(--t-sm);color:var(--texte-doux);flex:1}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--e2)}
.badge{
  font-size:var(--t-xs);padding:4px 10px;border-radius:var(--r-full);
  border:1px solid var(--bordure);color:var(--texte-doux);
}
.projet--attente{border-style:dashed;background:transparent}
.projet--attente:hover{transform:none;box-shadow:none;border-color:var(--bordure)}

/* ============================================================
   10. BANDE INVERSÉE
   ============================================================ */
.bande{background:var(--fond-invers);color:var(--texte-invers)}
.bande .doux,.bande .chapo{color:var(--texte-invers-doux)}
.bande .h-section{color:var(--texte-invers)}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--e5);margin-top:var(--e6)}
.chiffre b{
  display:block;font-family:var(--font-titre);font-weight:700;
  font-size:clamp(2.25rem,5vw,3.5rem);line-height:1;letter-spacing:-.045em;color:var(--accent);
}
.chiffre span{font-size:var(--t-sm);color:var(--texte-invers-doux);display:block;margin-top:var(--e2)}

/* ============================================================
   11. FAQ
   ============================================================ */
.faq{border-top:1px solid var(--bordure);max-width:820px}
.faq details{border-bottom:1px solid var(--bordure)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--e3);
  padding:var(--e4) 0;cursor:pointer;list-style:none;
  font-family:var(--font-titre);font-size:var(--t-lg);letter-spacing:-.02em;
  transition:color var(--transition);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:'';flex:none;width:11px;height:11px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-3px);transition:transform var(--transition);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding-bottom:var(--e4);color:var(--texte-doux);max-width:60ch}

/* ============================================================
   12. CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e7)}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:var(--e5)}}
.mail-geant{
  font-family:var(--font-titre);font-weight:500;
  font-size:clamp(1.15rem,3.2vw,1.9rem);letter-spacing:-.03em;
  display:inline-block;margin-block:var(--e3) var(--e5);
  border-bottom:2px solid var(--accent);padding-bottom:4px;
  transition:color var(--transition);word-break:break-all;
}
.mail-geant:hover{color:var(--accent)}

.champ{display:grid;gap:6px;margin-bottom:var(--e3)}
.champ label{font-size:var(--t-sm);color:var(--texte-doux)}
.champ input,.champ textarea{
  font:inherit;font-size:var(--t-sm);color:var(--texte);
  background:var(--surface);border:1px solid var(--bordure);
  border-radius:var(--r-sm);padding:12px var(--e3);width:100%;
  transition:border-color var(--transition);
}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--accent)}
.champ textarea{resize:vertical;min-height:130px}
.erreur{font-size:var(--t-xs);color:var(--erreur);min-height:1.1em}
.form-note{font-size:var(--t-xs);color:var(--texte-doux);margin-top:var(--e3)}
.form-etat{font-size:var(--t-sm);margin-top:var(--e3)}
.form-etat[data-ok]{color:var(--succes)}
.form-etat[data-ko]{color:var(--erreur)}

/* ============================================================
   13. FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--bordure);padding-block:var(--e5)}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center;justify-content:space-between}
.footer small,.footer a{font-size:var(--t-sm);color:var(--texte-doux)}
.footer nav{display:flex;flex-wrap:wrap;gap:var(--e4)}
.footer nav a{transition:color var(--transition)}
.footer nav a:hover{color:var(--accent)}

/* ============================================================
   14. REVEAL AU SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

/* ============================================================
   15. PAGES ANNEXES
   ============================================================ */
.page-404{min-height:100svh;display:grid;place-items:center;text-align:center}
.page-404 .code{
  font-family:var(--font-titre);font-weight:700;
  font-size:clamp(6rem,25vw,17rem);line-height:.85;letter-spacing:-.06em;color:var(--accent);
}
.doc h2{font-family:var(--font-titre);font-size:var(--t-xl);letter-spacing:-.02em;margin:var(--e5) 0 var(--e2)}
.doc p,.doc li{color:var(--texte-doux);max-width:70ch}
.doc ul{list-style:disc;padding-left:var(--e4)}

/* ============================================================
   16. MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================
   17. ÉCRAN DE DÉMARRAGE
   ============================================================ */
#preload{display:none}
.js #preload{
  position:fixed;inset:0;z-index:1000;
  background:var(--fond);display:grid;place-items:center;
  transition:clip-path .85s cubic-bezier(.76,0,.24,1),opacity .3s ease .55s;
  clip-path:inset(0 0 0 0);
}
#preload.is-parti{clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none}

.boot{
  width:min(430px,80vw);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--t-sm);
}
.boot__logo{
  font-family:var(--font-titre);font-weight:800;font-variation-settings:'wdth' 88;
  font-size:clamp(2.5rem,7vw,3.75rem);letter-spacing:-.05em;line-height:1;
  margin-bottom:var(--e5);
}
.boot__logo em{font-style:normal;color:var(--accent)}

.boot__lignes{display:grid;gap:var(--e2);margin-bottom:var(--e5)}
.boot__lignes li{
  display:flex;align-items:baseline;gap:var(--e2);
  color:var(--texte-doux);font-size:var(--t-xs);letter-spacing:.02em;
}
/* Le pointillé se dessine tout seul entre le libellé et la valeur */
.boot__lignes span::after{
  content:'';display:inline-block;width:0;
}
.boot__lignes li{position:relative}
.boot__lignes li span{flex:none}
.boot__lignes li::before{
  content:'';flex:1;order:1;align-self:center;height:1px;
  background:repeating-linear-gradient(to right,var(--bordure) 0 2px,transparent 2px 5px);
}
.boot__lignes b{order:2;flex:none;font-weight:400;color:var(--bordure);transition:color .2s ease}
.boot__lignes b.is-ok{color:var(--accent)}

.boot__barre{height:2px;background:var(--bordure);overflow:hidden;margin-bottom:var(--e2)}
.boot__barre i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;will-change:transform}
.boot__pied{font-size:var(--t-xs);color:var(--texte-doux);font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* Éclat blanc à l'instant de l'arrivée */
#flash{
  position:fixed;inset:0;z-index:999;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 50% 50%, var(--accent), transparent 70%);
  mix-blend-mode:screen;
}

/* ============================================================
   18. SCÈNE 3D
   ============================================================ */
#scene{
  position:fixed;inset:0;width:100vw;height:100vh;height:100svh;
  z-index:0;opacity:0;transition:opacity 1.6s ease .2s;pointer-events:none;
}
/* Voile : la grille reste visible à droite, le texte reste lisible à gauche */
.hero__voile{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity 1.4s ease .2s;
  background:linear-gradient(104deg, var(--fond) 10%, transparent 62%);
}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .hero__voile{
    background:linear-gradient(104deg, var(--fond) 10%,
      color-mix(in srgb,var(--fond) 52%,transparent) 38%, transparent 70%);
  }
}
@media (max-width:900px){
  .hero__voile{background:linear-gradient(to bottom, var(--fond) 6%, transparent 60%)}
}
.avec-3d .hero__voile{opacity:1}
/* Le canvas est fixe en z-index 0 : tout le contenu passe au-dessus */
.header,main,.footer,#preload,#curseur{position:relative;z-index:2}
.header{z-index:50}
#preload{z-index:1000}
#curseur{z-index:900}
.hero > .conteneur{position:relative;z-index:2}
/* Les sections laissent passer un souffle de grille sans perdre en lisibilité */
.section{background:var(--fond)}
.hero,.bande{background:transparent}
.bande{position:relative}
.bande::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--fond-invers);opacity:.74;
}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .section{background:color-mix(in srgb,var(--fond) 90%,transparent)}
  .hero,.bande{background:transparent}
}
/* La grille reste plus présente derrière la bande inversée : le moment 3D de la page */
.marquee{background:transparent}
.footer{background:var(--fond)}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .footer{background:color-mix(in srgb,var(--fond) 92%,transparent)}
}
.avec-3d #scene{
  opacity:1;
  /* Un seul dégradé de masque : compatible partout, Safari compris */
  -webkit-mask-image:linear-gradient(104deg, rgba(0,0,0,.10) 14%, rgba(0,0,0,.42) 44%, #000 78%);
          mask-image:linear-gradient(104deg, rgba(0,0,0,.10) 14%, rgba(0,0,0,.42) 44%, #000 78%);
}
/* En dessous de 900px le texte occupe toute la largeur : le masque devient vertical */
/* Sous 900px le texte prend toute la largeur : plus de zone libre,
   donc la grille recule au lieu de se battre avec le texte. */
@media (max-width:900px){
  .avec-3d #scene{
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.15) 4%, rgba(0,0,0,.6) 40%, #000 100%);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,.15) 4%, rgba(0,0,0,.6) 40%, #000 100%);
    opacity:.72;
  }
}
@media (max-width:600px){ .avec-3d #scene{opacity:.62} }
/* Sans 3D, la lueur CSS reprend toute la place — rien ne manque à l'écran */
.avec-3d .hero__lueur{opacity:.35}
.hero{isolation:isolate}

/* ============================================================
   19. ENTRÉE DU HERO (après le préloader)
   ============================================================ */
.ligne{display:block;overflow:hidden}
.ligne > span{display:block;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.js .hero .eyebrow,.js .hero .chapo,.js .hero__actions,.js .hero__meta{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1);
}
.js .ligne > span{transform:translateY(104%)}
.js .pret .ligne > span{transform:none}
.js .pret .ligne:nth-of-type(1) > span{transition-delay:.10s}
.js .pret .ligne:nth-of-type(2) > span{transition-delay:.19s}
.js .pret .ligne:nth-of-type(3) > span{transition-delay:.28s}
.js .pret .hero .eyebrow{opacity:1;transform:none;transition-delay:.05s}
.js .pret .hero .chapo{opacity:1;transform:none;transition-delay:.46s}
.js .pret .hero__actions{opacity:1;transform:none;transition-delay:.56s}
.js .pret .hero__meta{opacity:1;transform:none;transition-delay:.66s}

/* ============================================================
   20. CURSEUR PERSONNALISÉ
   ============================================================ */
#curseur{
  position:fixed;top:0;left:0;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--accent);z-index:900;pointer-events:none;
  mix-blend-mode:difference;display:none;
  transition:width .25s,height .25s,background .25s,border-color .25s;
  will-change:transform;
}
.avec-curseur #curseur{display:block}
#curseur.is-actif{background:var(--accent);border-color:transparent}

/* ============================================================
   21. LUEUR QUI SUIT LA SOURIS
   ============================================================ */
[data-lueur]{position:relative}
[data-lueur]::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
             rgba(0,181,152,.14),transparent 65%);
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%);
  opacity:0;transition:opacity var(--transition);pointer-events:none;
}
[data-lueur]:hover::before{opacity:1}

/* ============================================================
   22. BANDEAU DÉFILANT
   ============================================================ */
.marquee{
  border-block:1px solid var(--bordure);padding-block:var(--e4);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marquee__piste{display:flex;gap:var(--e5);width:max-content;animation:defile 34s linear infinite}
.marquee:hover .marquee__piste{animation-play-state:paused}
.marquee span{
  font-family:var(--font-titre);font-weight:700;font-variation-settings:'wdth' 88;
  font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:-.03em;
  color:var(--texte-doux);white-space:nowrap;display:flex;align-items:center;gap:var(--e5);
}
.marquee span::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   23. MOUVEMENT RÉDUIT — tout ce qui précède se neutralise
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  #preload{display:none}
  .ligne > span{transform:none!important}
  .hero .eyebrow,.hero .chapo,.hero__actions,.hero__meta{opacity:1!important;transform:none!important}
  .marquee__piste{animation:none}
  #curseur{display:none!important}
}

/* ============================================================
   24. EFFETS DE PREMIER PLAN
   ============================================================ */

/* --- Cartes en relief : vraie 3D CSS, avec reflet --- */
[data-relief]{transform-style:preserve-3d;will-change:transform}
[data-relief] .projet__corps,[data-relief] .projet__visuel{transform:translateZ(0)}
[data-relief]::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.16), transparent 60%);
  opacity:0;transition:opacity .3s ease;
}
[data-relief]:hover::after{opacity:1}

/* --- Liseré animé sur les éléments mis en avant --- */
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.liseré{position:relative;isolation:isolate}
.liseré::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--angle),
    transparent 0deg, var(--accent) 24deg, transparent 72deg, transparent 360deg);
  animation:tourne 4.5s linear infinite;
}
@supports not (background:conic-gradient(from 0deg,red,blue)){
  .liseré::before{background:var(--accent);animation:none;opacity:.5}
}
@keyframes tourne{to{--angle:360deg}}

/* --- Cadre d'interface sur le hero --- */
.hud{position:absolute;inset:var(--e4);z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease .8s}
.pret .hud{opacity:.5}
.hud i{position:absolute;width:22px;height:22px;border:1px solid var(--accent)}
.hud i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hud i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hud i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hud i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
@media (max-width:768px){.hud{display:none}}

/* --- Lignes de balayage, très discrètes --- */
.avec-3d body::before,
.js body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,
    transparent 0 3px, color-mix(in srgb,var(--texte) 4%,transparent) 3px 4px);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .js body::before{display:none}
}

/* --- Chiffres animés --- */
.chiffre b{font-variant-numeric:tabular-nums}

/* --- Titres recomposés : largeur réservée pour éviter les sauts --- */
[data-recompose]{display:inline-block;min-height:1em}

/* ============================================================
   25. REPLIS DE COMPATIBILITÉ
   ============================================================ */
/* svh : Safari < 15.4 et anciens Android */
.hero{min-height:82vh;min-height:88svh}
.page-404{min-height:100vh;min-height:100svh}

/* backdrop-filter : préfixe WebKit pour Safari */
.header.is-scrolled{-webkit-backdrop-filter:blur(16px) saturate(150%)}

/* color-mix : une couleur simple est déclarée avant, elle sert de repli */
.header.is-scrolled{background:var(--fond)}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .header.is-scrolled{background:color-mix(in srgb,var(--fond) 84%,transparent)}
}
.etape:hover{background:transparent}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .etape:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
}

/* mask-image : sans support, on retombe sur une opacité réduite */
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .avec-3d #scene{opacity:.35}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ============================================================
   26. MOUVEMENT RÉDUIT — tous les effets ci-dessus se neutralisent
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .liseré::before{animation:none;background:var(--accent);opacity:.4}
  .hud{display:none}
  .js body::before{display:none}
  [data-relief]{transform:none!important}
}