/* ============================================================
   STYLE.CSS — Moteur visuel du template
   Les couleurs réelles sont injectées depuis data.js (theme)
   sous forme de variables CSS sur :root par script.js.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:#1c1a19; --coral:#e15a67; --paper:#f7f2ec; --sand:#e4d6c8; --white:#fff; --ink-soft:#4a4542;
  --coral-text:#e15a67; /* remplacé au chargement par script.js (variante AA sur fond clair) */
  --gold:#e1b15a; --gold-text:#e1b15a; --coral-soft:#f6d9dc; /* dérivés du corail par script.js */
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --maxw: 1180px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
section{position:relative;}
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; letter-spacing:-0.01em;}

.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral-text); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--coral);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important; transition-delay:0s !important;}
}

/* ---------- Barre de progression de scroll ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:100;
  background:linear-gradient(90deg, var(--coral), var(--gold));
  transition:width .1s linear;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(247,242,236,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(28,26,25,.08);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 32px;}
.nav-brand{display:flex; align-items:center; gap:12px; font-family:var(--serif); font-weight:600; font-size:17px; text-decoration:none; transition:opacity .2s ease;}
.nav-brand:hover{opacity:.75;}
.nav-brand img{height:34px; width:34px; object-fit:contain; border-radius:6px;}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-size:14px; text-decoration:none; color:var(--ink-soft); position:relative; padding-bottom:2px;
}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  font-family:var(--mono); font-size:12.5px; text-decoration:none; background:var(--ink); color:var(--white);
  padding:9px 16px; border-radius:100px; white-space:nowrap;
}
.nav-toggle{
  display:none; position:relative; width:36px; height:36px; padding:0; border:none; background:none;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nav-toggle span{
  width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

@media (max-width: 860px){
  .nav-links{
    display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:10px 32px 18px;
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid rgba(28,26,25,.08);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-links a{display:block; padding:12px 0; font-size:15.5px; border-top:1px solid rgba(28,26,25,.08);}
  .nav-links li:first-child a{border-top:none;}
  .nav-open .nav-links{opacity:1; visibility:visible; transform:none; box-shadow:0 16px 24px rgba(28,26,25,.1);}
  .nav-toggle{display:flex;}
}

/* ---------- Hero ---------- */
.hero{padding:96px 0 80px; overflow:hidden; position:relative;}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; position:relative; z-index:1;}
.hero h1{
  font-size:clamp(34px,4.4vw,60px); line-height:1.06;
  background:linear-gradient(100deg, var(--ink) 45%, var(--ink-soft) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{font-size:17px; color:var(--ink-soft); max-width:46ch; margin:22px 0 32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:var(--sans); font-weight:600; font-size:14.5px; text-decoration:none;
  padding:13px 22px; border-radius:100px; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease; position:relative; overflow:hidden;
}
.btn::before{
  content:""; position:absolute; inset:0; translate:-120% 0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transition:translate .5s var(--ease);
}
.btn:hover::before{translate:120% 0;}
.btn:hover{transform:translateY(-2px) scale(1.02);}
.btn-primary{background:var(--ink); color:var(--white);}
.btn-primary:hover{box-shadow:0 10px 24px rgba(28,26,25,.25);}
.btn-secondary{background:transparent; color:var(--ink); border:1.5px solid rgba(28,26,25,.25);}

/* Décor : grille de points + halos flous + glow qui suit le curseur */
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-grid{
  position:absolute; inset:-10% -10% auto -10%; height:120%;
  background-image:radial-gradient(rgba(28,26,25,.14) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 60% 20%, #000 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 60% 55% at 60% 20%, #000 40%, transparent 85%);
}
.hero-glow{position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; animation:glow-float 12s ease-in-out infinite;}
.hero-glow-coral{width:360px; height:360px; top:-80px; right:8%; background:var(--coral);}
.hero-glow-gold{width:300px; height:300px; bottom:-60px; left:2%; background:var(--gold); animation-delay:-6s;}
.hero-cursor-glow{
  position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%), color-mix(in srgb, var(--coral) 16%, transparent), transparent 70%);
}
@keyframes glow-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-18px, 22px) scale(1.08); }
}

/* Entrée du hero au chargement (au-dessus de la ligne de flottaison :
   pas de scroll pour la déclencher, donc pas de logique IntersectionObserver) */
.hero-text > *, .hero-stat{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.hero-text > *:nth-child(1){transition-delay:.05s;}
.hero-text > *:nth-child(2){transition-delay:.15s;}
.hero-text > *:nth-child(3){transition-delay:.25s;}
.hero-text > *:nth-child(4){transition-delay:.35s;}
.hero-stat{transition-delay:.3s;}
.hero.in .hero-text > *, .hero.in .hero-stat{opacity:1; transform:none;}

.hero-stat{
  background:var(--ink); color:var(--white); border-radius:22px; padding:34px;
  display:flex; flex-direction:column; gap:6px; align-self:stretch; justify-content:center;
  position:relative; overflow:hidden;
}
/* Diaporama en fond : boucle en fondu pur CSS, une image = un <img>
   décalé par animation-delay (posé par script.js). Pas de minuteur JS,
   donc ça continue même si l'onglet a été en arrière-plan. */
.hero-stat-slideshow{position:absolute; inset:0; z-index:0;}
.hero-stat-slideshow img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation-name:hero-slide; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
@keyframes hero-slide{
  0%{opacity:0;} 3%{opacity:1;} 18%{opacity:1;} 23%{opacity:0;} 100%{opacity:0;}
}
.hero-stat-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(195deg, rgba(28,26,25,.4), rgba(28,26,25,.82) 70%);
}
@media (prefers-reduced-motion: reduce){
  .hero-stat-slideshow img{animation:none; opacity:0;}
  .hero-stat-slideshow img:first-child{opacity:1;}
}
.hero-stat .value{font-family:var(--serif); font-size:76px; line-height:1; position:relative; z-index:2;}
.hero-stat .unit{font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--coral); position:relative; z-index:2;}
.hero-stat .label{font-size:14.5px; color:rgba(255,255,255,.9); margin-top:10px; position:relative; z-index:2;}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;}
}

/* ---------- Intro ---------- */
.intro{padding:72px 0;}
.intro-head{margin-bottom:28px;}
.intro-head h2{font-size:clamp(26px,3vw,38px); line-height:1.15; max-width:22ch;}
/* Le pitch de l'entreprise mérite plus de poids qu'une simple note en
   colonne latérale : traité comme une citation mise en avant. */
.lead{
  font-family:var(--serif); font-style:italic; font-weight:500; color:var(--ink);
  font-size:clamp(19px,2.1vw,25px); line-height:1.45; max-width:42ch;
  margin:0 0 48px; padding-left:24px; border-left:3px solid var(--coral);
}
.intro-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.intro-item{
  background:var(--white); padding:26px 24px; border-radius:16px; border:1px solid rgba(28,26,25,.08);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); position:relative; z-index:1;
}
.intro-item:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(28,26,25,.1); border-color:rgba(28,26,25,.14); z-index:2;}
.intro-icon{
  width:38px; height:38px; border-radius:10px; background:var(--sand); color:var(--coral-text);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.intro-icon svg{width:19px; height:19px;}
.intro-item:hover .intro-icon{background:var(--coral); color:var(--white);}
.intro-item h4{font-family:var(--sans); font-weight:600; font-size:15px; margin:0 0 8px;}
.intro-item p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.55;}
/* Si le dernier item est seul sur sa ligne (grille 3 colonnes), on l'étire
   en bandeau de clôture plutôt que de laisser une case vide à côté. */
.intro-item:last-child:nth-child(3n+1){
  grid-column:1 / -1; display:flex; align-items:center; gap:24px; background:var(--sand);
}
.intro-item:last-child:nth-child(3n+1) .intro-icon{margin-bottom:0;}
.intro-item:last-child:nth-child(3n+1) h4{margin:0; flex:0 0 auto; min-width:220px;}
.intro-item:last-child:nth-child(3n+1) p{margin:0;}
@media (max-width:860px){
  .intro-head{grid-template-columns:1fr;} .intro-grid{grid-template-columns:1fr;}
  .intro-item:last-child:nth-child(3n+1){flex-direction:column; align-items:flex-start; gap:12px;}
}

/* ---------- Bandeau photo (optionnel, piloté par intro.bandImage) ---------- */
.photo-band{height:clamp(260px,32vw,420px); overflow:hidden; margin:0 0 8px;}
.photo-band img{width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.2s var(--ease);}
.photo-band.in img{transform:scale(1);}
.photo-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(28,26,25,.35), transparent 45%);
}

/* ---------- Réseau / map ---------- */
.reseau{padding:80px 0; background:var(--ink); color:var(--white); border-radius:32px; margin:0 20px; }
.reseau .wrap{max-width:calc(var(--maxw) - 40px);}
.reseau .eyebrow{color:var(--coral);}
.reseau h2{color:var(--white); font-size:clamp(26px,3vw,38px); max-width:20ch;}
.reseau-body{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:40px;}
/* Le marquee (largeur max-content) ne doit pas forcer l'agrandissement de
   cette colonne de grille au-delà de sa part équitable. */
.reseau-list{min-width:0;}
.map-wrap{position:relative; aspect-ratio:1/1.05;}
.map-wrap svg{width:100%; height:100%;}
.map-node-label{font-family:var(--mono); font-size:2.5px; fill:rgba(255,255,255,.85); text-transform:uppercase; letter-spacing:.02em;}
.reseau-list h4{color:var(--white); font-size:13px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; color:var(--coral);}
.zone-tags{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 32px;}
.zone-tag{
  border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:8px 14px; font-size:13.5px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.zone-tag:hover{border-color:var(--coral); background:rgba(255,255,255,.06);}
.partners-note{font-size:14.5px; color:rgba(255,255,255,.75); margin-bottom:18px; max-width:42ch;}
.partner-row{display:flex; gap:8px; width:max-content;}
.partner-chip{
  font-family:var(--mono); font-size:11.5px; border:1px solid rgba(255,255,255,.18); border-radius:8px;
  padding:7px 10px; color:rgba(255,255,255,.85);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.partner-chip:hover{border-color:var(--coral); color:var(--white);}
@media (max-width:860px){ .reseau-body{grid-template-columns:1fr;} .reseau{border-radius:22px; margin:0 12px;} }

/* ---------- Expertise ---------- */
.expertise{padding:88px 0;}
.expertise h2{font-size:clamp(26px,3vw,38px); max-width:18ch;}
.expertise-head{display:grid; grid-template-columns:1fr .6fr; gap:40px; align-items:end; margin-bottom:44px;}
.expertise-head.no-media{grid-template-columns:1fr;}
.expertise-media{height:180px; border-radius:18px; overflow:hidden;}
.expertise-media img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:860px){
  .expertise-head{grid-template-columns:1fr; align-items:start;}
  .expertise-media{height:200px; order:-1;}
}
.exp-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.exp-col{
  background:var(--white); border-radius:18px; padding:30px 26px; border:1px solid rgba(28,26,25,.08);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.exp-col:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(28,26,25,.1); border-color:rgba(28,26,25,.14);}
.exp-col .num{font-family:var(--mono); color:var(--coral-text); font-size:12.5px; margin-bottom:14px; display:block;}
.exp-col h3{font-size:19px; margin-bottom:16px;}
.exp-col ul{margin:0; padding:0; list-style:none;}
.exp-col li{font-size:14px; color:var(--ink-soft); padding:10px 0; border-top:1px solid rgba(28,26,25,.08); line-height:1.5;}
.exp-col li:first-child{border-top:none;}
@media (max-width:860px){ .exp-cols{grid-template-columns:1fr;} }

/* ---------- Les plus : timeline ---------- */
.plus{padding:88px 0;}
.plus h2{font-size:clamp(26px,3vw,38px); max-width:20ch; margin-bottom:44px;}
.plus-list{display:flex; flex-direction:column; position:relative;}
.plus-list::before{
  content:""; position:absolute; left:27px; top:30px; bottom:30px; width:2px;
  background:linear-gradient(var(--coral), var(--gold));  opacity:.25;
}
.plus-item{display:grid; grid-template-columns:56px 1fr; gap:24px; padding:22px 0; align-items:start;}
.plus-marker{
  width:56px; height:56px; border-radius:50%; background:var(--white); position:relative; z-index:1;
  border:1.5px solid rgba(28,26,25,.12); display:flex; align-items:center; justify-content:center;
  color:var(--coral-text); transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.plus-marker-icon{width:22px; height:22px; display:block;}
.plus-marker-icon svg{width:100%; height:100%;}
.plus-item:hover .plus-marker{border-color:var(--coral); background:var(--coral-soft); transform:scale(1.06);}
.plus-body .n{font-family:var(--mono); color:var(--coral-text); font-size:11.5px; letter-spacing:.08em; display:block; margin-bottom:6px;}
.plus-item h4{font-size:18px; margin-bottom:6px;}
.plus-item p{margin:0; color:var(--ink-soft); font-size:14.5px; max-width:60ch;}
@media (max-width:600px){
  .plus-list::before{left:23px;}
  .plus-item{grid-template-columns:48px 1fr; gap:16px;}
  .plus-marker{width:48px; height:48px;}
  .plus-marker-icon{width:19px; height:19px;}
}

.followup{margin-top:56px; background:var(--ink); color:var(--white); border-radius:22px; overflow:hidden;}
.followup.has-image{display:grid; grid-template-columns:.8fr 1.2fr; gap:0; align-items:stretch;}
.followup-media{min-height:280px;}
.followup-media img{width:100%; height:100%; object-fit:cover; display:block;}
.followup-text{padding:40px;}
.followup h3{color:var(--white); font-size:22px; margin-bottom:28px;}
.followup-cols{display:grid; grid-template-columns:1fr 1fr; gap:36px;}
.followup-cols h4{color:var(--coral); font-family:var(--mono); text-transform:uppercase; font-size:12.5px; letter-spacing:.06em; margin-bottom:14px;}
.followup-cols ul{margin:0; padding-left:18px; font-size:14px; color:rgba(255,255,255,.85); line-height:1.6;}
@media (max-width:860px){
  .followup-cols{grid-template-columns:1fr;}
  .followup.has-image{grid-template-columns:1fr;}
  .followup-media{min-height:200px;}
  .followup-text{padding:28px;}
}

/* ---------- Références ---------- */
.references{padding:88px 0; background:var(--sand);}
.references h2{font-size:clamp(26px,3vw,38px); margin-bottom:36px;}
.logo-cloud{display:flex; gap:12px; width:max-content;}
.logo-pill{
  background:var(--white); border-radius:10px; padding:14px 20px; font-family:var(--serif); font-weight:600;
  font-size:15px; color:var(--ink); border:1px solid rgba(28,26,25,.08);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.logo-pill:hover{transform:translateY(-3px); box-shadow:0 10px 20px rgba(28,26,25,.08);}

/* ---------- Contact ---------- */
.contact{padding:96px 0; text-align:center;}
.contact .wrap{display:block;}
.contact h2{font-size:clamp(28px,4vw,46px); max-width:18ch; margin:0 auto 16px;}
.contact p{color:var(--ink-soft); max-width:46ch; margin:0 auto 32px; font-size:16px;}
.contact:not(.has-image) .eyebrow{justify-content:center;}
.contact-loc{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:36px;}
.contact-loc span{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); border:1px solid rgba(28,26,25,.15); border-radius:100px; padding:7px 14px;}
.contact-media{display:none;}
.contact.has-image .wrap{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; text-align:left; max-width:calc(var(--maxw) + 60px);
}
.contact.has-image .contact-media{display:block; border-radius:22px; overflow:hidden; height:100%; min-height:360px;}
.contact.has-image .contact-media img{width:100%; height:100%; object-fit:cover; display:block;}
.contact.has-image .contact-inner{text-align:left;}
.contact.has-image .contact-inner p{margin:0 0 32px;}
.contact.has-image h2{margin:0 0 16px;}
.contact.has-image .contact-loc{justify-content:flex-start;}
@media (max-width:860px){
  .contact.has-image .wrap{grid-template-columns:1fr; text-align:center;}
  .contact.has-image .contact-media{min-height:240px; margin-bottom:32px;}
  .contact.has-image .contact-inner{text-align:center;}
  .contact.has-image .contact-inner p{margin:0 auto 32px;}
  .contact.has-image .contact-loc{justify-content:center;}
  .contact.has-image .eyebrow{justify-content:center;}
}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:rgba(255,255,255,.85);}
.footer-top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
  padding:64px 32px 40px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand-row{display:flex; align-items:center; gap:12px; margin-bottom:14px; text-decoration:none; width:fit-content; transition:opacity .2s ease;}
.footer-brand-row:hover{opacity:.75;}
/* Le logo source est noir/corail (pensé pour fond clair) ; sur le fond
   sombre du footer, on le convertit en silhouette blanche plutôt que de
   demander un second fichier logo au client. */
.footer-brand-row img{height:32px; width:32px; object-fit:contain; border-radius:6px; filter:brightness(0) invert(1);}
.footer-brand-row span{font-family:var(--serif); font-weight:600; font-size:16px; color:var(--white);}
.footer-tagline{margin:0; font-size:14px; color:rgba(255,255,255,.6); max-width:32ch;}
footer h5{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--coral); margin:0 0 18px;
}
#footer-nav{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
#footer-nav a{font-size:14px; text-decoration:none; color:rgba(255,255,255,.75); transition:color .2s ease;}
#footer-nav a:hover{color:var(--white);}
.footer-email{
  display:inline-block; font-size:14px; color:var(--white); text-decoration:none; margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.3); transition:border-color .2s ease;
}
.footer-email:hover{border-color:var(--coral);}
.footer-whatsapp{
  display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.85); text-decoration:none;
  margin-bottom:16px; width:fit-content; transition:color .2s ease;
}
.footer-whatsapp svg{width:17px; height:17px; flex:0 0 auto; color:#25D366;}
.footer-whatsapp:hover{color:var(--white);}
.footer-locations{display:flex; flex-wrap:wrap; gap:8px;}
.footer-locations span{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.18); border-radius:100px; padding:5px 11px;
}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 32px 32px; flex-wrap:wrap;
}
footer .line{font-family:var(--serif); font-style:italic; font-size:14.5px; margin:0; color:rgba(255,255,255,.65); max-width:52ch;}
footer .copy{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.4); margin:0; white-space:nowrap;}
.footer-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.footer-meta-sep{color:rgba(255,255,255,.25); font-size:11px;}
.footer-credit{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.4); text-decoration:none; white-space:nowrap; transition:color .2s ease;}
.footer-credit:hover{color:var(--white);}
@media (max-width:860px){
  .footer-top{grid-template-columns:1fr; gap:32px; padding:48px 32px 32px;}
  .footer-bottom{flex-direction:column; align-items:flex-start; padding:20px 32px 84px;}
  footer .copy{white-space:normal;}
}

/* ---------- Bouton retour en haut ---------- */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:60; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--white); border:none; font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(28,26,25,.2);
}
.back-to-top.visible{opacity:1; visibility:visible; transform:none;}
.back-to-top:hover{box-shadow:0 12px 26px rgba(28,26,25,.3); transform:translateY(-2px);}

/* ---------- Reveal on scroll ---------- */
/* Direction variée par section (assignée dans index.html) : rompt la
   monotonie d'un fade-up unique répété partout, tout en gardant un seul
   mécanisme (IntersectionObserver + classe .in) pour toutes. */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.reveal-left{transform:translate(-40px,0);}
.reveal.reveal-right{transform:translate(40px,0);}
.reveal.reveal-scale{transform:scale(.94); transform-origin:center top;}
.reveal.in{opacity:1; transform:none;}

/* Séquencement des cartes à l'intérieur d'une section révélée : chaque
   enfant lit son propre --i (posé par script.js au moment du rendu), donc
   ça reste générique quel que soit le nombre d'items du client. On utilise
   une @keyframes (pas une transition) pour ne pas entrer en conflit avec
   les transitions de hover déjà définies sur ces mêmes éléments. */
.intro-item, .exp-col, .member-card, .plus-item, .logo-pill, .partner-chip, .zone-tag{ opacity:0; }
.reveal.in .intro-item, .reveal.in .exp-col, .reveal.in .member-card,
.reveal.in .plus-item, .reveal.in .logo-pill, .reveal.in .partner-chip, .reveal.in .zone-tag{
  animation:card-in .5s var(--ease) both;
  animation-delay:calc(min(var(--i, 0), 7) * 60ms);
}
@keyframes card-in{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ---------- Carte réseau : tracé animé + interactivité ---------- */
.map-line{
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .9s var(--ease), opacity .2s ease;
  transition-delay:calc(min(var(--i, 0), 7) * 90ms);
}
.reseau.in .map-line{stroke-dashoffset:0;}
.map-node{cursor:pointer;}
.map-node-dot, .map-node-ring{transition:r .2s var(--ease), opacity .2s ease;}
.map-node-label{transition:fill .2s ease;}
.map-node:hover .map-node-dot, .map-node:focus-visible .map-node-dot{r:2.3;}
.map-node:hover .map-node-ring, .map-node:focus-visible .map-node-ring{r:4.2; opacity:1;}
.map-node:focus-visible{outline:none;}
@supports selector(:has(*)){
  .map-wrap:has(.map-node:hover) .map-node:not(:hover),
  .map-wrap:has(.map-node:hover) .map-line{ opacity:.3; }
  .map-wrap:has(.map-node:hover) .map-node:hover ~ .map-node,
  .map-wrap:has(.map-node:hover) .map-node:hover{ opacity:1; }
}
.map-hub-halo{transition:opacity 1.6s ease, r 1.6s ease;}
.reseau.in .map-hub-halo{animation:hub-pulse 2.6s ease-in-out .9s infinite;}
@keyframes hub-pulse{
  0%, 100%{opacity:.08; r:6;}
  50%{opacity:.18; r:8;}
}

/* ---------- Marquee (logos partenaires / références) ---------- */
/* Le contenu est dupliqué une fois par script.js pour boucler sans à-coup ;
   la deuxième copie est aria-hidden pour ne pas polluer le lecteur d'écran. */
.marquee{
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{animation:marquee 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  .marquee{overflow-x:auto;}
}

:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}