/* ==========================================================================
   MANTIKI GROUP — Refonte 2026
   Thème : "Golden Savannah" — noir profond + or mat, inspiré de l'identité
   existante (logo sombre, signature "For the world by Africa").
   ========================================================================== */

:root{
  --bg:            #0c0e11;
  --bg-alt:        #14171c;
  --bg-card:       #181b21;
  --line:          rgba(189,147,85,0.18);
  --line-strong:   rgba(189,147,85,0.35);
  --gold:          #bd9355;
  --gold-light:    #e0be87;
  --gold-dim:      #806239;
  --text:          #f5f2ec;
  --text-muted:    #ada79a;
  --text-faint:    #726d63;
  --terracotta:    #b8613f;
  --radius:        14px;
  --maxw:          1180px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.eyebrow{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold); font-weight:700; margin-bottom:14px; display:block;
}
.italic{ font-style:italic; color:var(--gold-light); }

/* ---------- language toggling ----------
   On ne force jamais la valeur "visible" (inline/flex/block...) : on masque
   uniquement la langue inactive avec display:none !important, qui l'emporte
   sur n'importe quelle règle de composant (ex: .btn{display:inline-flex})
   sans avoir à deviner/dupliquer le display naturel de chaque élément.
   Sans ce !important, les boutons .btn (même spécificité, définis plus bas
   dans la feuille) affichaient les deux langues en même temps. */
html:not([data-lang="en"]) [lang-en]{ display:none !important; }
html[data-lang="en"] [lang-fr]{ display:none !important; }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(12,14,17,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* Barre de navigation : trois blocs qui ne doivent jamais se chevaucher.
   La marque et les actions gardent leur taille, seul le menu central absorbe
   la contrainte. Sans flex:none, le texte de marque débordait sur le menu. */
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px 28px;
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand img{ height:34px; width:auto; flex:none; }
/* Wordmark en vrai texte : net à toute taille, aucune image à charger. */
.brand-name{
  font-family:var(--serif); font-size:16px; font-weight:600;
  color:var(--gold-light); letter-spacing:.10em; white-space:nowrap;
}
footer.site .brand-name{ font-size:15px; }
nav.main-nav{
  display:flex; align-items:center; gap:26px;
  flex:1 1 auto; min-width:0; justify-content:center; flex-wrap:nowrap;
}
nav.main-nav a{
  font-size:14.5px; color:var(--text-muted); font-weight:500;
  transition:color .2s; white-space:nowrap;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--gold-light); }
.nav-actions{ display:flex; align-items:center; gap:18px; flex:none; }

/* Paliers de dégagement : on retire d'abord le bouton d'appel à l'action,
   puis le wordmark, avant de basculer sur le menu mobile à 900px. */
@media (max-width:1280px){
  nav.main-nav{ gap:20px; }
  nav.main-nav a{ font-size:13.5px; }
  .nav-row{ padding:16px 20px; }
}
@media (max-width:1150px){
  .nav-actions .btn{ display:none; }
}
@media (max-width:1000px){
  .brand-name{ display:none; }
  nav.main-nav{ gap:16px; }
}
.lang-switch{ display:flex; gap:6px; font-size:13px; color:var(--text-faint); }
.lang-switch button{
  background:none; border:1px solid var(--line-strong); color:var(--text-muted);
  padding:4px 10px; border-radius:20px; font-size:12.5px; cursor:pointer;
  font-family:var(--sans); font-weight:600; letter-spacing:.03em;
  transition:all .2s;
}
.lang-switch button.active{ background:var(--gold); color:#141110; border-color:var(--gold); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:30px; font-size:14px; font-weight:600;
  border:1px solid var(--gold); transition:all .2s; white-space:nowrap;
}
.btn-primary{ background:var(--gold); color:#141110; }
.btn-primary:hover{ background:var(--gold-light); }
.btn-ghost{ background:transparent; color:var(--gold-light); }
.btn-ghost:hover{ background:var(--line); }
.menu-toggle{ display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer; }

/* ---------- hero ---------- */
.hero{
  position:relative; padding:120px 0 90px; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(189,147,85,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 30%, rgba(184,97,63,0.10), transparent 60%);
}
.hero .tag{ color:var(--gold); font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.hero h1{ font-size:clamp(2.1rem, 4.6vw, 3.6rem); max-width:820px; margin-top:14px; }
.hero .lede{ font-size:18px; color:var(--text-muted); max-width:640px; margin:20px 0 32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.stat-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.stat-grid > div{
  padding:30px 20px; text-align:center; border-left:1px solid var(--line);
}
.stat-grid > div:first-child{ border-left:none; }
.stat-num{ font-family:var(--serif); font-size:2rem; color:var(--gold-light); }
.stat-label{ font-size:13px; color:var(--text-muted); margin-top:4px; }

/* ---------- sections ---------- */
section{ padding:96px 0; }
.section-alt{ background:var(--bg-alt); }
.section-head{ max-width:680px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); }
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:10px; }
.value-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px;
}
.value-card h4{ font-size:16px; color:var(--gold-light); }
.value-card p{ font-size:14.5px; color:var(--text-muted); margin:0; }

/* pillar / pole cards */
.pole-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:22px; }
.pole-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px; position:relative; overflow:hidden;
  transition:transform .25s, border-color .25s;
}
.pole-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); }
.pole-card.core{
  background:linear-gradient(160deg, #201a10, #14171c);
  border-color:var(--line-strong);
  box-shadow:0 0 0 1px rgba(189,147,85,0.08), 0 0 40px rgba(189,147,85,0.06);
}
.pole-card.core .num{ color:var(--gold); }
.pole-card .num{ font-family:var(--serif); font-size:13px; color:var(--gold-dim); }
.pole-card h3{ font-size:21px; margin-top:10px; }
.pole-card p{ color:var(--text-muted); font-size:14.5px; }
.pole-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pole-card .tags span{
  font-size:12px; color:var(--gold-light); border:1px solid var(--line-strong);
  padding:4px 10px; border-radius:20px;
}
.pole-card .go{ margin-top:20px; display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-size:14px; font-weight:600; }
.pole-badge{
  position:absolute; top:20px; right:24px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--terracotta); border:1px solid rgba(184,97,63,0.4);
  padding:3px 9px; border-radius:20px;
}

/* generic list of expertise items used on pole pages */
.expertise-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.expertise-item{
  border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  background:var(--bg-card);
}
.expertise-item h4{ font-size:17px; color:var(--gold-light); display:flex; gap:10px; align-items:center; }
.expertise-item h4 .ico{ font-size:20px; display:inline-flex; }
.expertise-item h4 .ico img{ width:20px; height:20px; object-fit:contain; display:block; }
.expertise-item p{ color:var(--text-muted); font-size:14.5px; margin:0; }

/* pillar badges (charte graphique) — hero decoration */
.hero-badge{
  position:absolute; right:24px; top:50%; transform:translateY(-50%);
  width:260px; max-width:26vw; opacity:.92; pointer-events:none; z-index:0;
}
.hero .container{ position:relative; z-index:1; }
@media (max-width:1100px){ .hero-badge{ display:none; } }

.quote-block{
  border-radius:var(--radius); overflow:hidden; position:relative; min-height:320px;
  display:flex; align-items:flex-end; background:#1a1c20;
}
.quote-block img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.quote-block blockquote{
  position:relative; z-index:2; padding:40px; margin:0; font-family:var(--serif);
  font-size:1.4rem; max-width:640px; color:#fff;
}

.numbers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.num-card{ text-align:center; padding:34px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-card); }
.num-card .n{ font-family:var(--serif); font-size:2.4rem; color:var(--gold-light); }
.num-card .l{ font-size:13.5px; color:var(--text-muted); margin-top:6px; }

.cta-band{
  background:linear-gradient(120deg, #17140f, #1c1811);
  border:1px solid var(--line-strong); border-radius:24px;
  padding:56px; text-align:center;
}
.cta-band h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.cta-band p{ color:var(--text-muted); max-width:520px; margin:0 auto 26px; }

/* offices / contact */
.offices-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.office-card{ border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--bg-card); }
.office-card h4{ font-size:16px; margin-bottom:8px; }
.office-card p{ font-size:14px; color:var(--text-muted); margin:0 0 6px; }

form.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
form.contact-form .full{ grid-column:1 / -1; }
form.contact-form label{ font-size:13px; color:var(--text-muted); margin-bottom:6px; display:block; }
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; background:var(--bg-card); border:1px solid var(--line-strong); color:var(--text);
  padding:12px 14px; border-radius:8px; font-family:var(--sans); font-size:14.5px;
}
form.contact-form textarea{ min-height:120px; resize:vertical; }
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus{
  outline:none; border-color:var(--gold);
}
.form-note{ font-size:12.5px; color:var(--text-faint); margin-top:10px; }

/* footer */
footer.site{ border-top:1px solid var(--line); padding:60px 0 30px; background:var(--bg-alt); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-grid h5{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color:var(--text-muted); font-size:14px; }
.footer-grid a:hover{ color:var(--gold-light); }
.footer-bottom{
  border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between;
  font-size:13px; color:var(--text-faint); flex-wrap:wrap; gap:10px;
}

/* dev / status ribbon shown on emerging pole (Energie) */
.status-note{
  display:flex; gap:12px; align-items:flex-start; background:rgba(184,97,63,0.08);
  border:1px solid rgba(184,97,63,0.35); border-radius:var(--radius); padding:18px 22px;
  font-size:14px; color:var(--text-muted); margin-bottom:40px;
}
.status-note strong{ color:var(--terracotta); }

/* ===================== HUB — Système Solaire (interactif) ===================== */
.starfield-bg{
  background-image:
    radial-gradient(1px 1px at 8% 20%, rgba(230,201,134,.55), transparent),
    radial-gradient(1px 1px at 18% 65%, rgba(230,201,134,.3), transparent),
    radial-gradient(1.5px 1.5px at 28% 35%, rgba(230,201,134,.4), transparent),
    radial-gradient(1px 1px at 38% 80%, rgba(230,201,134,.3), transparent),
    radial-gradient(1px 1px at 48% 15%, rgba(230,201,134,.45), transparent),
    radial-gradient(1.5px 1.5px at 58% 55%, rgba(230,201,134,.3), transparent),
    radial-gradient(1px 1px at 68% 25%, rgba(230,201,134,.35), transparent),
    radial-gradient(1px 1px at 78% 70%, rgba(230,201,134,.3), transparent),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(230,201,134,.4), transparent),
    radial-gradient(1px 1px at 95% 85%, rgba(230,201,134,.3), transparent);
}

.hub-only{
  min-height:calc(100vh - 81px); display:flex; align-items:center; justify-content:center;
  padding:30px 16px;
}
/* Le hub grandit avec l'écran : limité par la largeur dispo (94vw), par une
   taille max confortable (1360px) et par la hauteur de fenêtre — le facteur
   1.548 = 960/620 convertit la hauteur dispo en largeur équivalente, ce qui
   évite que la constellation déborde verticalement sur un écran large et bas. */
.hub-desktop{
  position:relative; margin:0 auto;
  width:min(1360px, 94vw, calc((100vh - 150px) * 1.548));
  aspect-ratio:960 / 620;
}
/* La scène garde le repère de conception 960x620 (celui du viewBox SVG et des
   coordonnées calculées en JS) et c'est elle qu'on met à l'échelle. Ainsi
   anneaux et planètes ne peuvent jamais se désynchroniser. */
.hub-stage{
  position:absolute; left:50%; top:50%;
  width:960px; height:620px;
  transform:translate(-50%,-50%) scale(var(--hub-scale, 1));
  transform-origin:center center;
}
.hub-rings{ position:absolute; inset:0; width:100%; height:100%; }
.hub-rings ellipse{
  fill:none; stroke:var(--gold); stroke-width:1; opacity:.15;
  transition:opacity .3s, stroke .3s;
}
.hub-rings ellipse.active{ opacity:.85; stroke:var(--gold-light); }

.hub-core{
  position:absolute; left:480px; top:310px; transform:translate(-50%,-50%);
  width:72px; height:72px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  animation:core-pulse 4.5s ease-in-out infinite;
}
.hub-core img{ width:100%; height:100%; object-fit:contain; }
@keyframes core-pulse{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(189,147,85,.35)); }
  50%{ filter:drop-shadow(0 0 18px rgba(189,147,85,.65)); }
}

.planet-pos{ position:absolute; left:0; top:0; z-index:4; will-change:transform; }
.planet{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:88px; padding:11px 6px; border-radius:14px; text-align:center;
  background:var(--bg-card); border:1px solid var(--line-strong);
  transition:transform .35s cubic-bezier(.22,.9,.32,1.2), border-color .3s, box-shadow .3s;
}
.planet .ico{ font-size:20px; display:inline-flex; }
.planet .ico img{ width:22px; height:22px; object-fit:contain; display:block; }
.planet .lbl{ font-size:11px; font-weight:700; color:var(--gold-light); letter-spacing:.02em; }
.planet-pos:hover .planet, .planet:focus-visible{
  transform:scale(1.28); border-color:var(--gold); box-shadow:0 0 24px rgba(189,147,85,.25); outline:none;
}

.hub-tooltip{
  position:absolute; z-index:10; width:230px; padding:16px 18px; border-radius:12px;
  background:var(--bg-card); border:1px solid var(--line-strong); box-shadow:0 12px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .25s, transform .25s;
}
.hub-tooltip.visible{ opacity:1; transform:translateY(0); }
.hub-tooltip .tt-title{ font-family:var(--serif); font-size:15px; color:var(--gold-light); margin-bottom:6px; }
.hub-tooltip .tt-tag{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; line-height:1.45; }
.hub-tooltip .tt-points{ font-size:11.5px; color:var(--gold-dim); margin-bottom:10px; }
.hub-tooltip .tt-cta{ font-size:12.5px; color:var(--gold); font-weight:700; }

.hub-desktop.zooming .planet-pos:not(.zoom-target){ opacity:0; transition:opacity .3s; }
.hub-desktop.zooming .hub-core{ opacity:0; transition:opacity .3s; }
.hub-desktop.zooming .hub-rings{ opacity:0; transition:opacity .3s; }
.hub-desktop.zooming .zoom-target .planet{
  transform:scale(3.4); opacity:0; transition:transform .5s ease-in, opacity .4s .15s;
}

/* ==========================================================================
   ESPACE PRODUIT NOSTRALIS
   Couleurs fonctionnelles (turquoise / vert) réservées aux états de flux et
   de contrôle, conformément à la direction artistique produit. La charte
   groupe (noir + or) reste la base : le produit appartient au groupe.
   ========================================================================== */
:root{
  --flow:      #3fb6a8;   /* flux, temps réel */
  --flow-dim:  rgba(63,182,168,.14);
  --ok:        #4c9f70;   /* rapproché, conforme */
  --ok-dim:    rgba(76,159,112,.14);
  --warn:      #c98a3f;   /* exception, à traiter */
  --warn-dim:  rgba(201,138,63,.14);
}

/* Bandeau de confiance (secteurs adressés) */
/* La barre de confiance est un bandeau compact : on annule le padding
   vertical hérité de `section` (96px), qui la rendait démesurément haute. */
section.trust-bar{ padding:0; }
.trust-bar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt); }
.trust-row{ display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; justify-content:center; padding:20px 0; }
.trust-row span{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.trust-row span::before{ content:"•"; color:var(--flow); margin-right:10px; }

/* Parcours produit : sources -> normalisation -> règles -> exceptions -> restitution */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:8px; }
.flow-step{
  position:relative; padding:20px 16px; border-radius:var(--radius);
  background:var(--bg-card); border:1px solid var(--line);
}
.flow-step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; font-size:12px; font-weight:800;
  background:var(--flow-dim); color:var(--flow); border:1px solid var(--flow); margin-bottom:10px;
}
.flow-step h4{ font-size:14.5px; color:var(--gold-light); margin:0 0 6px; }
.flow-step p{ font-size:13px; color:var(--text-muted); margin:0; }
.flow-step::after{
  content:""; position:absolute; right:-8px; top:50%; width:8px; height:1px;
  background:var(--flow); opacity:.5;
}
.flow-step:last-child::after{ display:none; }
@media (max-width:900px){ .flow{ grid-template-columns:1fr; } .flow-step::after{ display:none; } }

/* Puces d'état */
.chip{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px; border-radius:20px; margin:0 6px 6px 0;
}
.chip-ok{   background:var(--ok-dim);   color:var(--ok);   border:1px solid var(--ok); }
.chip-warn{ background:var(--warn-dim); color:var(--warn); border:1px solid var(--warn); }
.chip-flow{ background:var(--flow-dim); color:var(--flow); border:1px solid var(--flow); }

/* Tableau de spécifications (formats, sécurité, restitution) */
.spec-table{ width:100%; border-collapse:collapse; margin-top:6px; font-size:14.5px; }
.spec-table th, .spec-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec-table th{ color:var(--gold-light); font-size:13px; text-transform:uppercase; letter-spacing:.06em; width:210px; font-weight:700; }
.spec-table td{ color:var(--text-muted); }
@media (max-width:700px){
  .spec-table th, .spec-table td{ display:block; width:auto; border-bottom:none; padding:6px 0; }
  .spec-table tr{ display:block; border-bottom:1px solid var(--line); padding:12px 0; }
}

/* Encart honnête : preuve à produire, jamais de chiffre inventé */
.evidence-note{
  border:1px dashed var(--line-strong); border-radius:var(--radius);
  padding:22px 24px; background:rgba(63,182,168,.04);
}
.evidence-note h4{ color:var(--flow); font-size:15px; margin:0 0 8px; }
.evidence-note p{ color:var(--text-muted); font-size:14px; margin:0; }

/* Offres de la suite */
.offer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.offer-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  background:var(--bg-card); transition:border-color .3s, transform .3s;
}
.offer-card:hover{ border-color:var(--flow); transform:translateY(-3px); }
.offer-card .tagname{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--flow); font-weight:700; }
.offer-card h3{ font-size:19px; margin:8px 0 10px; }
.offer-card p{ color:var(--text-muted); font-size:14.5px; margin:0; }
@media (max-width:900px){ .offer-grid{ grid-template-columns:1fr; } }

/* ---------- Démo schématique du run de rapprochement ----------
   Aucune capture réelle, aucune donnée client : schéma illustratif animé.
   Les valeurs affichées sont des exemples, jamais des performances mesurées. */
.demo{
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:linear-gradient(180deg, #14171c, #101317); overflow:hidden;
}
.demo-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.demo-title{ font-size:13.5px; font-weight:700; color:var(--gold-light); letter-spacing:.04em; }
.demo-label{ font-size:11.5px; color:var(--text-faint); font-style:italic; }
.demo-body{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }
.demo-col{ padding:20px; border-right:1px solid var(--line); }
.demo-col:last-child{ border-right:none; }
.demo-col h5{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-faint); margin:0 0 14px; font-weight:700;
}
@media (max-width:820px){
  .demo-body{ grid-template-columns:1fr; }
  .demo-col{ border-right:none; border-bottom:1px solid var(--line); }
}

/* Sources qui alimentent le run */
.src{
  display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.02);
  font-size:13px; color:var(--text-muted); transition:border-color .5s, color .5s;
}
.src .dot{
  width:7px; height:7px; border-radius:50%; background:var(--text-faint);
  flex:none; transition:background .5s, box-shadow .5s;
}
.src.on{ border-color:var(--flow); color:var(--text); }
.src.on .dot{ background:var(--flow); box-shadow:0 0 0 4px var(--flow-dim); }

/* Moteur de règles */
.engine{
  border:1px solid var(--line); border-radius:11px; padding:16px;
  background:rgba(255,255,255,.02); text-align:center;
}
.engine .ring{
  width:54px; height:54px; margin:0 auto 12px; border-radius:50%;
  border:2px solid var(--line-strong); border-top-color:var(--flow);
  animation:eng-spin 2.4s linear infinite;
}
@keyframes eng-spin{ to{ transform:rotate(360deg); } }
.engine .rule{ font-size:12px; color:var(--text-muted); min-height:17px; transition:opacity .3s; }
.engine .step{ font-size:13px; font-weight:700; color:var(--gold-light); margin-bottom:6px; }

/* Compteurs de résultats */
.counters{ display:flex; flex-direction:column; gap:10px; }
.counter{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:9px; border:1px solid var(--line);
}
.counter .v{ font-family:var(--serif); font-size:22px; line-height:1; }
.counter .k{ font-size:12px; color:var(--text-muted); }
.counter.ok{   border-color:rgba(76,159,112,.45);  } .counter.ok .v{   color:var(--ok); }
.counter.flow{ border-color:rgba(63,182,168,.45);  } .counter.flow .v{ color:var(--flow); }
.counter.warn{ border-color:rgba(201,138,63,.45);  } .counter.warn .v{ color:var(--warn); }

/* Carte d'exception qui s'ouvre */
.exception{
  margin:0 20px 20px; border:1px solid rgba(201,138,63,.45); border-radius:11px;
  background:var(--warn-dim); overflow:hidden;
  max-height:0; opacity:0; transition:max-height .6s ease, opacity .5s, margin .4s;
}
.exception.open{ max-height:320px; opacity:1; }
.exception .ex-head{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  font-size:13px; font-weight:700; color:var(--warn); border-bottom:1px solid rgba(201,138,63,.28);
}
.exception .ex-body{ padding:14px 16px; }
.exception .ex-row{ display:flex; gap:12px; font-size:12.5px; padding:5px 0; color:var(--text-muted); }
.exception .ex-row b{ color:var(--text); font-weight:600; min-width:120px; display:inline-block; }
@media (prefers-reduced-motion: reduce){
  .engine .ring{ animation:none; }
  .exception{ transition:none; }
}

/* ---------- Contraste de positionnement ---------- */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.versus > div{ border-radius:var(--radius); padding:24px; border:1px solid var(--line); }
.versus .no{ background:rgba(255,255,255,.015); }
.versus .no h4{ color:var(--text-muted); font-size:15px; margin:0 0 12px; }
.versus .yes{ background:var(--flow-dim); border-color:var(--flow); }
.versus .yes h4{ color:var(--flow); font-size:15px; margin:0 0 12px; }
.versus ul{ margin:0; padding-left:18px; }
.versus li{ font-size:14px; color:var(--text-muted); margin-bottom:8px; }
@media (max-width:820px){ .versus{ grid-template-columns:1fr; } }

/* ---------- Séquence d'engagement ---------- */
.steps{ counter-reset:st; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step-card{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px 22px; background:var(--bg-card);
}
.step-card::before{
  counter-increment:st; content:counter(st,decimal-leading-zero);
  font-family:var(--serif); font-size:26px; color:var(--gold-dim); display:block; margin-bottom:8px;
}
.step-card h4{ font-size:15.5px; color:var(--gold-light); margin:0 0 6px; }
.step-card p{ font-size:14px; color:var(--text-muted); margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:12px; background:var(--bg-card);
}
.faq details[open]{ border-color:var(--line-strong); }
.faq summary{
  cursor:pointer; font-weight:700; font-size:15px; color:var(--gold-light);
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--flow); font-size:20px; font-weight:400; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--text-muted); font-size:14.5px; margin:12px 0 0; }

/* ---------- frise chronologique (page groupe) ---------- */
.timeline{ position:relative; margin-top:10px; padding-left:26px; }
.timeline::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(to bottom, transparent, var(--gold-dim) 12%, var(--gold-dim) 88%, transparent);
}
.tl-item{ position:relative; padding:0 0 28px 0; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-24px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(189,147,85,.15);
}
.tl-year{ font-family:var(--serif); font-size:20px; color:var(--gold-light); line-height:1.2; }
.tl-title{ font-weight:700; font-size:15px; margin:2px 0 4px; }
.tl-item p{ color:var(--text-muted); font-size:14.5px; margin:0; max-width:620px; }

.hub-note{ text-align:center; font-size:12.5px; color:var(--text-faint); margin-top:14px; }
.hub-mobile{ display:none; }

@media (max-width:900px){
  .hub-desktop{ display:none; }
  .hub-mobile{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .hub-core{ animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  nav.main-nav{ display:none; }
  /* Le script bascule la classe .open sur le menu : sans cette règle, le
     bouton hamburger n'avait aucun effet visible. */
  nav.main-nav.open{
    display:flex; flex-direction:column; align-items:flex-start; gap:16px;
    position:absolute; left:0; right:0; top:100%;
    padding:20px 24px; z-index:60;
    background:rgba(12,14,17,0.98); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-strong);
  }
  nav.main-nav.open a{ font-size:15.5px; }
  .menu-toggle{ display:block; }
  .two-col{ grid-template-columns:1fr; }
  .pole-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-grid > div:nth-child(3){ border-left:none; }
  .numbers-grid{ grid-template-columns:repeat(2,1fr); }
  .offices-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  form.contact-form{ grid-template-columns:1fr; }
  .expertise-list{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .hero{ padding:90px 0 60px; }
  section{ padding:64px 0; }
  .values-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}