/* =====================================================================
   TOKENS — les variables de la charte graphique Africa BUZZZ.
   Tout le site (couleurs, courbes d'animation) part d'ici : si un jour
   la couleur orange change, c'est la SEULE ligne à modifier.
   ===================================================================== */
:root{
  --noir:#050505; --noir-2:#0d0b09; --noir-3:#161310;
  --ivoire:#F7F3EA; --ivoire-dim:rgba(247,243,234,.62); --ivoire-faint:rgba(247,243,234,.28);
  --orange:#FF7A00; --orange-dim:rgba(255,122,0,.5); --orange-glow:rgba(255,122,0,.16);
  --line:rgba(247,243,234,.14);
  --ease-out: cubic-bezier(.16,1,.3,1);      /* décélération "cinéma" : rapide puis qui se pose en douceur */
  --ease-elastic: cubic-bezier(.34,1.56,.64,1); /* léger rebond élastique, utilisé sur le menu mobile et le burger */
  --vh: 1vh;                                  /* recalculée en JS — corrige le bug de hauteur 100vh sur mobile (barre d'adresse) */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--noir);}
body{
  background:var(--noir); color:var(--ivoire); font-family:'Sora',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}


.hero-video-mobile{display:none;}
@media(max-width:860px){
  .hero-video-desktop{display:none;}
  .hero-video-mobile{display:block;}
}


/* Le curseur natif n'est masqué QUE si le JS a confirmé que le curseur perso tourne
   (classe .custom-cursor ajoutée en JS). Si le script plante, le visiteur garde un
   curseur normal au lieu de n'en avoir aucun — sécurité indispensable. */
html.custom-cursor body{cursor:none;}
@media (max-width:860px), (hover:none){ html.custom-cursor body{ cursor:auto; } } /* tactile = jamais de curseur custom */
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
ul{list-style:none;}
::selection{background:var(--orange);color:var(--noir);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px;}

.wrap{max-width:1400px;margin:0 auto;padding:0 60px;}
@media(max-width:860px){.wrap{padding:0 24px;}}

/* =====================================================================
   CURSEUR PERSONNALISÉ — un petit point orange qui suit la souris,
   entouré d'un anneau qui suit avec un léger retard (effet "magnétique").
   Le point est instantané, l'anneau est amorti dans le JS (lerp) : c'est
   ce décalage entre les deux qui donne la sensation premium.
   ===================================================================== */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--orange);border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;}
.cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--orange-dim);border-radius:50%;
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s var(--ease-out),height .3s var(--ease-out),border-color .3s;}
.cursor-ring.hover{width:70px;height:70px;border-color:var(--orange);background:var(--orange-glow);}
@media (max-width:860px), (hover:none){ .cursor,.cursor-ring{display:none;} }

/* =====================================================================
   GRAIN — un voile de bruit très discret (opacity 4.5%) posé sur tout
   le site. C'est un SVG généré en une ligne (pas un fichier image à
   charger) qui simule un léger grain de pellicule argentique : ça évite
   l'effet "plat/numérique" des aplats de noir profond en arrière-plan.
   ===================================================================== */
.grain{position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* =====================================================================
   PRÉLOADEUR — écran noir plein cadre avec le nom de la marque et une
   barre de progression, affiché pendant le chargement de la page. Il
   glisse vers le haut (slide-up) une fois à 100%, voir le JS plus bas.
   pointer-events:none dès le départ = jamais bloquant si un bug survient.
   ===================================================================== */
.preloader{position:fixed;inset:0;background:var(--noir);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;pointer-events:none;}
.preloader-logo{font-size:15px;letter-spacing:.5em;font-weight:600;text-transform:uppercase;overflow:hidden;}
.preloader-logo span{display:inline-block;}
.preloader-bar{width:220px;height:1px;background:var(--line);position:relative;overflow:hidden;}
.preloader-bar i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--orange);}
.preloader-pct{font-size:11px;letter-spacing:.2em;color:var(--ivoire-dim);font-variant-numeric:tabular-nums;}

/* =====================================================================
   NAVIGATION — barre fixe en haut. Devient plus compacte et floutée
   (backdrop-filter) après 40px de scroll, et se cache automatiquement
   quand on scrolle vers le bas pour laisser toute la place au contenu
   (elle réapparaît dès qu'on remonte). Logique complète dans le JS.
   ===================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:28px 60px;display:flex;align-items:center;justify-content:space-between;
  mix-blend-mode:normal;transition:transform .5s var(--ease-out),background .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;}
.nav.scrolled{padding:16px 60px;background:rgba(5,5,5,.72);backdrop-filter:blur(14px);border-color:var(--line);}
.nav.hide{transform:translateY(-110%);}
@media(max-width:860px){.nav,.nav.scrolled{padding:20px 24px;}}
.nav-logo{display:flex;align-items:baseline;gap:2px;font-weight:800;font-size:20px;letter-spacing:-.01em;height:34px;width:auto;}
.nav-logo .buzz{color:var(--orange);}
.nav-logo .dot{color:var(--orange);}
.nav-links{display:flex;gap:40px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;}
.nav-links a{position:relative;padding-bottom:4px;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--orange);transition:width .35s var(--ease-out);}
.nav-links a:hover::after{width:100%;}
@media(max-width:1024px){.nav-links{display:none;}}
.nav-cta{display:flex;align-items:center;gap:28px;}
.btn-ghost{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:11px 22px;border:1px solid var(--ivoire-faint);border-radius:100px;transition:border-color .3s,background .3s;}
.btn-ghost:hover{border-color:var(--orange);background:var(--orange-glow);}
@media(max-width:1024px){.btn-ghost{display:none;}}

/* Bouton "burger" (3 traits) qui se transforme en croix quand le menu est ouvert
   — pure CSS via rotation/translation des 3 spans, piloté par la classe .open. */
.burger{width:46px;height:46px;position:relative;z-index:501;flex-shrink:0;}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ivoire);transition:transform .45s var(--ease-elastic),opacity .3s,background .3s;}
.burger span:nth-child(1){top:18px;}
.burger span:nth-child(2){top:24px;}
.burger span:nth-child(3){top:30px;}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* =====================================================================
   MENU MOBILE — pas un tiroir qui glisse comme d'habitude : un cercle
   orange qui EXPLOSE depuis le bouton burger et recouvre tout l'écran
   (clip-path:circle qui grandit de 0% à 150%). Les liens arrivent ensuite
   en cascade avec un léger rebond élastique (--ease-elastic + délais
   décalés ligne par ligne, voir animation-delay ci-dessous).
   ===================================================================== */
.mmenu{position:fixed;inset:0;z-index:490;background:var(--orange);clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .85s var(--ease-elastic);display:flex;flex-direction:column;justify-content:center;padding:60px;}
.mmenu.open{clip-path:circle(150% at calc(100% - 46px) 46px);}
.mmenu-links{display:flex;flex-direction:column;gap:6px;}
.mmenu-links a{font-size:clamp(36px,11vw,64px);font-weight:800;color:var(--noir);letter-spacing:-.02em;
  opacity:0;transform:translateY(30px);display:block;line-height:1.15;}
.mmenu.open .mmenu-links a{animation:mlink .7s var(--ease-out) forwards;}
.mmenu-links a:nth-child(1){animation-delay:.15s;}
.mmenu-links a:nth-child(2){animation-delay:.22s;}
.mmenu-links a:nth-child(3){animation-delay:.29s;}
.mmenu-links a:nth-child(4){animation-delay:.36s;}
.mmenu-links a:nth-child(5){animation-delay:.43s;}
@keyframes mlink{to{opacity:1;transform:translateY(0);}}
.mmenu-foot{position:absolute;bottom:60px;left:60px;right:60px;display:flex;justify-content:space-between;color:var(--noir);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;}
@media(max-width:640px){.mmenu{padding:32px;}.mmenu-foot{left:32px;right:32px;bottom:32px;flex-direction:column;gap:8px;}}

/* =====================================================================
   HERO — la première section, plein écran. Système de calques empilés
   du fond vers le texte (voir z-index) :
     z-index 0 → .hero-bg      : ta photo/vidéo (ou le gabarit en attendant)
     z-index 1 → .hero-glow + particules : l'ambiance lumineuse orange
     z-index 2 → tout le texte : toujours au-dessus, jamais caché
   ===================================================================== */
.hero{position:relative;min-height:100vh;min-height:calc(var(--vh) * 100);display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:0 60px;}
@media(max-width:860px){.hero{padding:0 24px;}}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0;} /* le conteneur plein cadre pour la photo/vidéo de fond */
.hero-bg .hero-bg-ph{position:absolute;inset:0;transform:scale(1.12);animation:kenburns 22s ease-out infinite alternate;}
/* RECADRAGE AUTOMATIQUE : object-fit:cover force TOUJOURS l'image ou la vidéo à
   remplir tout le cadre sans jamais se déformer, quel que soit son ratio d'origine
   (portrait, paysage, carré...) — l'excédent est simplement rogné sur les bords.
   Le scale(1.12) + l'animation kenburns ci-dessous ajoutent un lent zoom continu. */
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:kenburns 22s ease-out infinite alternate;}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.05) 40%,rgba(5,5,5,.45) 100%);}
.hero-bg-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;z-index:1;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivoire-faint);padding:20px;line-height:1.8;}
/* Effet "Ken Burns" : zoom + léger glissement très lents (22s), en boucle aller-retour. */
@keyframes kenburns{from{transform:scale(1.12) translate(0,0);}to{transform:scale(1.22) translate(-1.5%,-1%);}}
@media (prefers-reduced-motion: reduce){.hero-bg .hero-bg-ph,.hero-bg img,.hero-bg video{animation:none;}}
.hero-glow{position:absolute;z-index:1;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,var(--orange-glow),transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;filter:blur(20px);mix-blend-mode:screen;}
canvas.particles{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;}
.hero-eyebrow{position:relative;z-index:2;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:26px;overflow:hidden;}
.hero-eyebrow span{display:inline-block;transform:translateY(100%);}
.hero-title{position:relative;z-index:2;font-size:clamp(44px,9vw,132px);font-weight:800;line-height:.98;letter-spacing:-.03em;}
.hero-title .line{overflow:hidden;display:block;}
.hero-title .line span{display:block;transform:translateY(110%);}
.hero-title em{font-style:normal;color:var(--orange);}
.hero-sub{position:relative;z-index:2;margin-top:34px;max-width:480px;font-size:17px;line-height:1.7;color:var(--ivoire-dim);opacity:0;}
.hero-bottom{position:absolute;z-index:2;bottom:48px;left:60px;right:60px;display:flex;justify-content:space-between;align-items:flex-end;opacity:0;}
@media(max-width:860px){.hero-bottom{left:24px;right:24px;bottom:28px;}}
.scroll-cue{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-dim);}
.scroll-cue .stick{width:1px;height:44px;background:var(--line);position:relative;overflow:hidden;}
.scroll-cue .stick i{position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--orange);animation:stick 1.8s ease-in-out infinite;}
@keyframes stick{0%{top:-100%;}50%{top:0%;}100%{top:100%;}}
.hero-coord{font-size:11px;letter-spacing:.15em;color:var(--ivoire-dim);text-align:right;}

/* =====================================================================
   RÈGLES PARTAGÉES PAR TOUTES LES SECTIONS
   ===================================================================== */
section{position:relative;}
.eyebrow{font-size:11.5px;letter-spacing:.35em;text-transform:uppercase;color:var(--orange);font-weight:700;}
.section-pad{padding:180px 0;}
@media(max-width:860px){.section-pad{padding:110px 0;}}

/* =====================================================================
   MANIFESTE — le texte se "révèle" mot par mot pendant le scroll (pas au
   chargement). Chaque mot part en gris terne, s'allume en ivoire au fil
   du scroll, avec un mot orange qui accompagne la lecture comme un curseur
   de lecture. Le split en mots + la logique de scroll sont en JS plus bas.
   ===================================================================== */
.manifesto{padding:220px 0;}
@media(max-width:860px){.manifesto{padding:130px 0;}}
.manifesto p{font-size:clamp(24px,4.2vw,52px);font-weight:600;line-height:1.4;letter-spacing:-.01em;max-width:1180px;}
.manifesto .word{color:var(--ivoire-faint);transition:color .05s linear;}
.manifesto .word.lit{color:var(--ivoire);}
.manifesto .word.hot{color:var(--orange);}

/* =====================================================================
   PILIERS ÉDITORIAUX — section "pinnée" : elle reste figée à l'écran
   pendant que le scroll vertical fait défiler les 6 cartes horizontalement
   (comme un travelling caméra). C'est du JS (GSAP ScrollTrigger + pin:true)
   qui pilote tout ; le CSS ne fait que préparer la piste (.pillars-track).
   ===================================================================== */
.pillars-pin{height:100vh;position:relative;overflow:hidden;background:var(--noir-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pillars-head{position:absolute;top:70px;left:60px;z-index:2;}
@media(max-width:860px){.pillars-head{left:24px;top:44px;}}
.pillars-track{display:flex;height:100%;align-items:center;will-change:transform;padding-left:60px;}
.pillar{flex:0 0 auto;width:min(76vw,560px);height:64%;margin-right:40px;position:relative;border-radius:2px;overflow:hidden;
  background:linear-gradient(160deg,var(--noir-3),var(--noir));border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:38px;}
.pillar .num{position:absolute;top:32px;right:34px;font-size:13px;letter-spacing:.1em;color:var(--orange);font-weight:700;}
.pillar .roman{font-size:15vw;position:absolute;top:-4vw;left:-1vw;font-weight:800;color:rgba(247,243,234,.04);line-height:1;pointer-events:none;}
.pillar h3{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.01em;margin-bottom:12px;}
.pillar p{font-size:14.5px;color:var(--ivoire-dim);line-height:1.6;max-width:340px;}
.pillar.distinct{background:linear-gradient(160deg,#2a1c0e,var(--noir));border-color:var(--orange-dim);}
.pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.pillar-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,5,5,.1) 0%,rgba(5,5,5,.55) 55%,rgba(5,5,5,.92) 100%);}
.pillar.distinct .pillar-overlay{background:linear-gradient(180deg,rgba(42,28,14,.15) 0%,rgba(5,5,5,.6) 55%,rgba(5,5,5,.94) 100%);}
.pillar .num,.pillar .roman,.pillar h3,.pillar p{position:relative;z-index:2;}

/* =====================================================================
   LE SIGNAL — chiffres clés qui comptent en montant quand on arrive dessus
   (voir JS "STAT COUNTERS"), + un bandeau défilant à l'infini ("marquee")
   avec Zoom / Zone / Zénith. Le contenu du bandeau est dupliqué DEUX FOIS
   dans le HTML (voir plus bas) : c'est ce qui permet la boucle infinie
   sans coupure — l'animation ne fait que glisser de 0% à -50%.
   ===================================================================== */
.signal{padding:170px 0;border-bottom:1px solid var(--line);}
.marquee{display:flex;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:100px;overflow:hidden;}
.marquee-track{display:flex;gap:60px;animation:mq 22s linear infinite;} /* glisse de 0 à -50% = boucle parfaite grâce au contenu dupliqué */
.marquee span{font-size:15px;letter-spacing:.08em;font-weight:600;color:var(--ivoire-dim);display:flex;align-items:center;gap:60px;}
.marquee span b{color:var(--orange);}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:80px;}
@media(max-width:760px){.stats{grid-template-columns:1fr;gap:56px;}}
.stat b{font-size:clamp(48px,6vw,84px);font-weight:800;letter-spacing:-.02em;display:block;color:var(--ivoire);}
.stat b i{color:var(--orange);font-style:normal;}
.stat span{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivoire-dim);margin-top:10px;display:block;}

/* =====================================================================
   RÉCITS — grille éditoriale en lignes alternées (image à gauche, puis à
   droite, puis à gauche...) plutôt que des cartes identiques en grille.
   Chaque .story-media est un cadre au ratio FIXE (4:3, voir aspect-ratio
   ci-dessous) : quelle que soit la photo que tu déposes dedans, elle est
   automatiquement recadrée pour remplir ce cadre — jamais de déformation,
   jamais de ratio qui casse la mise en page.
   ===================================================================== */
.stories-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:90px;gap:30px;flex-wrap:wrap;}
.stories-head h2{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-.02em;max-width:640px;}
.story-row{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;padding:70px 0;border-top:1px solid var(--line);}
.story-row:last-child{border-bottom:1px solid var(--line);}
.story-row:nth-child(even){grid-template-columns:.9fr 1.1fr;}
.story-row:nth-child(even) .story-media{order:2;}
@media(max-width:900px){.story-row,.story-row:nth-child(even){grid-template-columns:1fr;gap:30px;}
  .story-row:nth-child(even) .story-media{order:0;}}
.story-media{position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden;border:1px solid var(--line);} /* ratio verrouillé à 4:3 */
.story-media .ph{position:absolute;inset:0;background:linear-gradient(150deg,#2a2015,#0d0b09 65%);}
.story-media .ph::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 30% 30%,var(--orange-glow),transparent 55%);}
.story-media .ph-label{position:absolute;inset:16px;border:1px dashed rgba(247,243,234,.22);display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivoire-faint);padding:20px;}
/* object-fit:cover = recadrage automatique dans le 4:3 quel que soit le fichier d'origine.
   Le scale(1.12) + transition ci-dessous créent le léger zoom-out au survol de la ligne. */
.story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.1s var(--ease-out);}
.story-row:hover .story-media img{transform:scale(1);}
.story-cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:18px;}
.story-title{font-size:clamp(24px,3vw,38px);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-bottom:16px;}
.story-excerpt{color:var(--ivoire-dim);font-size:15px;line-height:1.7;max-width:440px;margin-bottom:24px;}
.story-link{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.story-link svg{width:16px;height:16px;transition:transform .35s var(--ease-out);}
.story-row:hover .story-link svg{transform:translateX(6px);}

/* =====================================================================
   À PROPOS — grande citation d'intro + deux paragraphes côte à côte.
   ===================================================================== */
.about-lead{font-size:clamp(26px,3.6vw,44px);font-weight:600;line-height:1.4;letter-spacing:-.01em;max-width:1100px;}
.about-lead .accent{color:var(--orange);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:60px;}
@media(max-width:760px){.about-grid{grid-template-columns:1fr;gap:30px;}}
.about-body{font-size:16.5px;line-height:1.75;color:var(--ivoire-dim);max-width:460px;}

/* =====================================================================
   NOS VALEURS — liste éditoriale numérotée (01 à 04), pas des cartes.
   Chaque ligne s'indente légèrement vers la droite au survol (.value-row:hover)
   — micro-interaction discrète plutôt qu'un effet tape-à-l'œil.
   ===================================================================== */
.values-list{display:flex;flex-direction:column;}
.value-row{display:grid;grid-template-columns:110px 1fr 1fr;align-items:center;gap:30px;padding:38px 0;border-top:1px solid var(--line);transition:padding .3s var(--ease-out);}
.values-list .value-row:last-child{border-bottom:1px solid var(--line);}
.value-row:hover{padding-left:14px;}
.value-num{font-family:'Sora';font-weight:800;font-size:15px;color:var(--orange);}
.value-row h3{font-size:clamp(20px,2.2vw,27px);font-weight:700;letter-spacing:-.01em;}
.value-row p{font-size:14.5px;line-height:1.65;color:var(--ivoire-dim);max-width:420px;}
@media(max-width:760px){.value-row{grid-template-columns:1fr;gap:10px;padding:28px 0;}}

/* =====================================================================
   VISION — mise en page en deux colonnes : photo à ratio fixe (3:4,
   portrait) d'un côté, citation de l'autre. Même logique de recadrage
   automatique que .story-media.
   ===================================================================== */
.vision{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;}
@media(max-width:900px){.vision{grid-template-columns:1fr;gap:50px;}}
.vision-quote{font-size:clamp(28px,3.6vw,46px);font-weight:600;line-height:1.35;letter-spacing:-.01em;}
.vision-quote .accent{color:var(--orange);}
.vision-media{position:relative;aspect-ratio:3/4;border-radius:2px;overflow:hidden;border:1px solid var(--line);}
/* Comme pour .story-media : toute image ou vidéo posée ici est automatiquement
   recadrée (object-fit:cover) pour remplir le ratio 3:4 sans jamais le déformer,
   quel que soit le ratio d'origine du fichier. */
.vision-media img,.vision-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vision-stat{position:absolute;bottom:28px;left:28px;background:rgba(5,5,5,.7);backdrop-filter:blur(10px);padding:20px 24px;border:1px solid var(--line);border-radius:2px;}
.vision-stat b{font-size:34px;font-weight:800;color:var(--orange);display:block;}
.vision-stat span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ivoire-dim);}

/* =====================================================================
   APPEL À L'ACTION — grand titre centré + formulaire minimaliste
   (juste une ligne soulignée, pas de champ encadré "classique").
   ===================================================================== */
.cta{text-align:center;padding:220px 0;}
@media(max-width:860px){.cta{padding:130px 0;}}
.cta h2{font-size:clamp(38px,7vw,96px);font-weight:800;letter-spacing:-.03em;line-height:1.02;}
.cta h2 em{font-style:normal;color:var(--orange);}
.cta-form{margin:56px auto 0;max-width:480px;display:flex;border-bottom:1px solid var(--ivoire-faint);padding-bottom:14px;gap:14px;transition:border-color .3s;}
.cta-form:focus-within{border-color:var(--orange);}
.cta-form input{flex:1;background:none;border:none;color:var(--ivoire);font-size:16px;font-family:inherit;}
.cta-form input::placeholder{color:var(--ivoire-faint);}
.cta-form button{width:40px;height:40px;border-radius:50%;border:1px solid var(--ivoire-faint);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.3s;}
.cta-form button:hover{background:var(--orange);border-color:var(--orange);}
.cta-form button svg{width:16px;height:16px;}

/* =====================================================================
   PIED DE PAGE — reprend le traitement "logo géant" de la couverture de
   la charte graphique, pour une sortie de page mémorable plutôt qu'un
   footer gris classique noyé d'informations.
   ===================================================================== */
footer{border-top:1px solid var(--line);padding:90px 0 40px;}
.foot-logo{font-size:clamp(60px,13vw,190px);font-weight:800;letter-spacing:-.03em;line-height:.9;color:var(--ivoire);}
.foot-logo .buzz{color:var(--orange);}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin:70px 0 60px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-col h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ivoire-faint);margin-bottom:20px;}
.foot-col ul{display:flex;flex-direction:column;gap:12px;}
.foot-col a{font-size:14.5px;color:var(--ivoire-dim);transition:color .25s;}
.foot-col a:hover{color:var(--orange);}
.foot-social{display:flex;gap:14px;margin-top:6px;}
.foot-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.3s;}
.foot-social a:hover{border-color:var(--orange);background:var(--orange-glow);}
.foot-social svg{width:16px;height:16px;}
.foot-bottom{display:flex;justify-content:space-between;padding-top:32px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.05em;color:var(--ivoire-faint);flex-wrap:wrap;gap:12px;}

/* Classe utilitaire ".reveal" : état INITIAL (invisible, décalé vers le bas) de
   tout élément qui doit apparaître en fondu au scroll. Le JS (GSAP ScrollTrigger,
   bloc "GENERIC REVEALS") anime chaque .reveal vers opacity:1 / y:0 quand il entre
   dans l'écran. Ajoute simplement class="reveal" à un élément pour qu'il en profite. */
.reveal{opacity:0;transform:translateY(40px);}

/* Accessibilité : si le visiteur a activé "réduire les animations" dans son OS,
   on coupe quasiment toutes les transitions/animations du site. Non négociable. */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}


/* stle pour indispomnble */
.toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,20px);
  background:var(--noir-3);border:1px solid var(--orange-dim);color:var(--ivoire);
  padding:16px 26px;border-radius:100px;font-size:13.5px;letter-spacing:.02em;
  z-index:9996;opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
  display:flex;align-items:center;gap:10px;white-space:nowrap;}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;}
@media(max-width:640px){.toast{font-size:12.5px;padding:14px 20px;white-space:normal;text-align:center;}}