/* =================================================================
   GROUPE PEGASUS — Design System v2 (direction Djamil : audacieux, corporate)
   Marque : Vert #006636 · Rouge #E81C28 · Blanc / gris clair · bandes sombres
   Typo : Poppins (titres bold, capitales) + Inter (texte)
   ================================================================= */

:root{
  --green:      #006636;
  --green-600:  #0a7a44;
  --green-700:  #045a2f;
  --green-900:  #06331d;
  --green-950:  #05271a;
  --red:        #e81c28;
  --red-600:    #cf1622;

  --white:      #ffffff;
  --gray-50:    #f6f7f6;
  --gray-100:   #eef0ef;
  --gray-200:   #e2e5e3;
  --dark:       #0e1a14;   /* bande sombre */
  --dark-2:     #13221a;

  --ink:        #14201a;
  --ink-2:      #4a544d;
  --muted:      #5e665f;
  --line:       #e4e7e5;

  --shadow-sm:  0 2px 10px rgba(16,33,25,.06);
  --shadow-md:  0 18px 40px -18px rgba(16,33,25,.22);
  --shadow-lg:  0 40px 80px -30px rgba(16,33,25,.35);

  --container:  1240px;
  --gutter:     clamp(18px, 4.5vw, 56px);
  --radius:     8px;
  --radius-lg:  16px;
  --ease:       cubic-bezier(.22,.61,.36,1);

  --font-head:  "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2.3rem, 1.3rem + 4.4vw, 4.6rem);
  --fs-h2:    clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem);
  --fs-h3:    clamp(1.15rem, 1rem + .7vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, .99rem + .4vw, 1.28rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  color:var(--ink-2); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-head); color:var(--ink); line-height:1.12; font-weight:700; }
p{ margin:0; }
::selection{ background:var(--green); color:#fff; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(60px,7.5vw,116px); }
.bg-gray{ background:var(--gray-50); }
.bg-dark{ background:var(--dark); color:#c7d1cb; }
.bg-green{ background:var(--green-900); color:#cfe0d6; }

/* Eyebrow + titres de section (style Djamil : capitales, barre) */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green); margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:30px; height:3px; background:var(--red); }
.bg-dark .eyebrow,.bg-green .eyebrow{ color:#66d497; }
.section-head{ text-align:center; max-width:760px; margin:0 auto clamp(2.4rem,4vw,3.6rem); }
.section-head .eyebrow{ margin-inline:auto; }
.section-head.left{ text-align:left; margin-inline:0; }
.section-head.left .eyebrow{ margin-inline:0; }
.section-title{ font-size:var(--fs-h2); text-transform:uppercase; letter-spacing:-.01em; }
.section-title .accent{ color:var(--green); }
.bg-dark .section-title,.bg-green .section-title{ color:#fff; }
.section-sub{ margin-top:1.1rem; font-size:var(--fs-lead); color:var(--muted); }
.bg-dark .section-sub,.bg-green .section-sub{ color:#a7b7ae; }
.title-underline{ width:70px; height:4px; background:var(--green); margin:1.2rem auto 0; border-radius:2px; }
.section-head.left .title-underline{ margin-inline:0; }

/* Boutons */
.btn{
  display:inline-flex; align-items:center; gap:.6em; padding:.95em 1.7em;
  font-family:var(--font-head); font-weight:600; font-size:.9rem; letter-spacing:.02em;
  border-radius:6px; border:2px solid transparent; transition:all .28s var(--ease); white-space:nowrap;
}
.btn svg{ transition:transform .28s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--primary{ background:var(--green); color:#fff; }
.btn--primary:hover{ background:var(--green-700); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-600); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost{ border-color:var(--green); color:var(--green); }
.btn--ghost:hover{ background:var(--green); color:#fff; }
.btn--light{ background:#fff; color:var(--green-900); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--outline{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--outline:hover{ background:#fff; color:var(--green-900); border-color:#fff; }

/* =========================================================
   TOPBAR (barre de contact) + HEADER (nav sombre)
   ========================================================= */
.topbar{ background:var(--green-900); color:#d6e5db; font-size:.82rem; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:44px; padding-block:.5rem; flex-wrap:wrap; }
.topbar__group{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.topbar__item{ display:inline-flex; align-items:center; gap:.5em; color:#d6e5db; }
.topbar__item svg{ width:15px; height:15px; color:#66d497; flex:none; }
.topbar__item a:hover{ color:#fff; }
.topbar__tag{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; color:#66d497; }
@media (max-width:860px){ .topbar{ display:none; } }

.header{ position:sticky; top:0; z-index:100; background:var(--dark); transition:box-shadow .3s var(--ease); }
.header.is-scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.28); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:74px; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand__mark{ width:40px; height:40px; object-fit:contain; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__word{ font-family:var(--font-head); font-weight:800; font-size:1.4rem; letter-spacing:.01em; color:#fff; }
.brand__word em{ font-style:normal; color:var(--red); }
.brand__sub{ font-family:var(--font-head); font-size:.56rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:#8fa89a; margin-top:4px; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav-cta{ margin-left:1.1rem; }
.nav__list{ display:flex; align-items:center; gap:1.7rem; }
.nav__link{ font-family:var(--font-head); font-size:.86rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:#dfe7e2; position:relative; padding:.4em 0; transition:color .25s; }
.nav__link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red); transition:width .3s var(--ease); }
.nav__link:hover{ color:#fff; }
.nav__link:hover::after{ width:100%; }
.burger{ display:none; flex-direction:column; gap:5px; width:30px; height:26px; justify-content:center; background:none; border:0; padding:0; z-index:120; }
.burger span{ height:2.5px; width:100%; background:#fff; border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* =========================================================
   HERO (grande photo réelle plein cadre)
   ========================================================= */
.hero{ position:relative; min-height:clamp(560px,82vh,820px); display:flex; align-items:center; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 46%; }
/* Scrim léger : lisibilité du texte à gauche/bas, tout en gardant l'illustration bien visible */
.hero__media::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(3,14,26,.74) 0%, rgba(3,14,26,.40) 40%, rgba(3,14,26,0) 72%),
    linear-gradient(0deg, rgba(3,14,26,.45) 0%, rgba(3,14,26,0) 34%); }
.hero__inner{ position:relative; z-index:1; width:100%; padding-block:clamp(3rem,6vh,5rem); }
.hero__content{ max-width:760px; }
.hero__bar{ display:inline-flex; align-items:center; gap:.7em; background:var(--red); color:#fff; font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; padding:.5em 1.1em; border-radius:4px; margin-bottom:1.5rem; }
.hero__title{ color:#fff; font-size:var(--fs-hero); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; line-height:1.04; }
.hero__title .g{ color:#66d497; }
.hero__claim{ display:block; font-weight:600; font-size:.42em; letter-spacing:.02em; color:#fff; text-transform:none; margin-top:.5rem; }
.hero__sub{ margin-top:1.6rem; color:#d5e0da; font-size:var(--fs-lead); max-width:56ch; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.7rem; }
.hero__tags span{ font-family:var(--font-head); font-weight:500; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.3); padding:.42em .9em; border-radius:4px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
/* accent angulaire (façon Djamil) */
.hero__slash{ position:absolute; right:-60px; bottom:-40px; width:340px; height:340px; background:var(--green); transform:rotate(45deg); opacity:.14; z-index:-1; }

/* =========================================================
   STRIP chiffres / points forts (façon bandeau)
   ========================================================= */
.factbar{ background:var(--green); color:#fff; }
.factbar__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.fact{ padding:clamp(1.5rem,3vw,2.6rem) 1.5rem; text-align:center; border-right:1px solid rgba(255,255,255,.14); }
.fact:last-child{ border-right:0; }
.fact__num{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.9rem,1.3rem+2vw,3rem); line-height:1; }
.fact__label{ margin-top:.5rem; font-size:.9rem; color:#d6f0e0; text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
@media (max-width:720px){ .factbar__grid{ grid-template-columns:1fr 1fr; } .fact:nth-child(2){ border-right:0; } .fact:nth-child(1),.fact:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.14); } }

/* =========================================================
   PRÉSENTATION (intro + image + accent angulaire)
   ========================================================= */
.intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.2rem,5vw,5rem); align-items:center; }
.intro__figure{ position:relative; }
.intro__figure img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); position:relative; z-index:1; }
.intro__figure::before{ content:""; position:absolute; left:-22px; top:-22px; width:120px; height:120px; background:var(--green); opacity:.16; transform:rotate(45deg); }
.intro__figure::after{ content:""; position:absolute; right:-18px; bottom:-18px; width:90px; height:90px; border:4px solid var(--red); opacity:.5; }
.intro__figure .badge{ position:absolute; z-index:2; right:16px; bottom:16px; background:var(--green); color:#fff; padding:1rem 1.2rem; border-radius:10px; box-shadow:var(--shadow-md); max-width:200px; }
.intro__figure .badge b{ font-family:var(--font-head); font-weight:800; font-size:1.6rem; display:block; }
.intro__figure .badge span{ font-size:.8rem; color:#d6f0e0; }
/* Collage 3 images : résumé des activités */
.intro__collage{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1.22fr 1fr; gap:12px; aspect-ratio:1/1; }
.intro__collage img{ width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:var(--shadow-md); }
.intro__collage .col-main{ grid-column:1 / span 2; }
.intro__body .lead{ font-family:var(--font-head); font-weight:600; font-size:clamp(1.2rem,1rem+.9vw,1.6rem); color:var(--ink); line-height:1.4; margin:1.4rem 0; text-wrap:balance; }
.intro__body .lead .mark-word{ white-space:normal; }
.intro__body p+p{ margin-top:1.1rem; }
.intro__quote{ margin-top:1.6rem; padding:1.3rem 1.5rem; background:var(--gray-50); border-left:4px solid var(--green); border-radius:0 8px 8px 0; }
.intro__quote p{ font-style:italic; color:var(--ink); }
.mark-word{ color:var(--green); font-weight:700; }

/* =========================================================
   CARTES VISION / OBJECTIF / ENGAGEMENT
   ========================================================= */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.vcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.vcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.vcard__ico{ height:78px; width:78px; margin:1.8rem 1.8rem .4rem; display:grid; place-items:center; background:var(--green); color:#fff; border-radius:12px; position:relative; }
.vcard:nth-child(2) .vcard__ico{ background:var(--red); }
.vcard__ico svg{ width:38px; height:38px; }
.vcard__body{ padding:.6rem 1.8rem 2rem; }
.vcard h3{ font-size:var(--fs-h3); text-transform:uppercase; margin-bottom:.7rem; }
.vcard p{ color:var(--ink-2); }
.vcard__bar{ height:5px; background:var(--green); }
.vcard:nth-child(2) .vcard__bar{ background:var(--red); }

/* =========================================================
   POURQUOI (bande sombre + cartes icônes)
   ========================================================= */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.wcard{ background:#fff; border-radius:var(--radius-lg); padding:2.1rem 1.8rem; text-align:center; border-bottom:4px solid var(--green); transition:transform .3s var(--ease); }
.wcard:hover{ transform:translateY(-6px); }
.wcard__ico{ width:72px; height:72px; margin:0 auto 1.2rem; display:grid; place-items:center; border:2px solid var(--green); border-radius:50%; color:var(--green); transition:all .3s var(--ease); }
.wcard:hover .wcard__ico{ background:var(--green); color:#fff; }
.wcard__ico svg{ width:34px; height:34px; }
.wcard h3{ font-size:1.15rem; text-transform:uppercase; margin-bottom:.6rem; }
.wcard p{ color:var(--ink-2); font-size:.98rem; }

/* =========================================================
   EXPERTISES (rangées image + contenu, cartes)
   ========================================================= */
.exp{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); }
.exp-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.exp-row:nth-child(even) .exp-row__media{ order:2; }
.exp-row__head{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.exp-row__num{ font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:#fff; background:var(--green); width:56px; height:56px; display:grid; place-items:center; border-radius:10px; flex:none; }
.exp-row:nth-child(even) .exp-row__num{ background:var(--red); }
.exp-row__label{ font-family:var(--font-head); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.exp-row:nth-child(even) .exp-row__label{ color:var(--red); }
.exp-row__title{ font-size:clamp(1.5rem,1.2rem+1.4vw,2.2rem); text-transform:uppercase; line-height:1.08; }
.exp-row__lead{ margin-top:1.1rem; font-size:var(--fs-lead); color:var(--muted); }
.exp-list{ margin-top:1.5rem; display:grid; gap:.8rem; }
.exp-list li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--ink-2); }
.exp-list li svg{ width:20px; height:20px; color:var(--green); flex:none; margin-top:.2em; }
.exp-row:nth-child(even) .exp-list li svg{ color:var(--red); }
.exp-list li b{ color:var(--ink); font-weight:700; }
.exp-sub{ margin-top:1.5rem; display:grid; gap:1.3rem; }
.exp-sub__item h4{ font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:.6rem; padding-left:.8rem; border-left:3px solid var(--green); }

.frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); background:var(--gray-100); }
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); display:block; }
.frame:hover img{ transform:scale(1.05); }
.frame--tall{ aspect-ratio:4/5; }
.frame--wide{ aspect-ratio:4/3; }
.frame--film{ aspect-ratio:16/9; max-width:980px; margin-inline:auto; }
.frame__tag{ position:absolute; left:0; bottom:16px; background:var(--green); color:#fff; font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.03em; padding:.55em 1.1em; }
.exp-row:nth-child(even) .frame__tag{ background:var(--red); }
.media-duo{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:stretch; }
.media-duo .frame{ margin:0; aspect-ratio:3/4; }

/* Vidéo cliquable (aperçu) + bouton play */
.media-video{ cursor:pointer; }
.playbtn{ position:absolute; inset:0; display:grid; place-items:center; z-index:3; pointer-events:none; }
.playbtn > span{ width:64px; height:64px; border-radius:50%; background:rgba(0,102,54,.82); border:2px solid rgba(255,255,255,.85); display:grid; place-items:center; color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.4); transition:transform .3s var(--ease), background .3s var(--ease); }
.media-video:hover .playbtn > span,.media-video:focus-visible .playbtn > span{ transform:scale(1.1); background:var(--green); }
.playbtn svg{ width:26px; height:26px; margin-left:3px; }
.vtile figcaption{ z-index:4; }

/* Lightbox vidéo */
.vmodal{ position:fixed; inset:0; z-index:2000; display:none; }
.vmodal.is-open{ display:grid; place-items:center; }
.vmodal__backdrop{ position:absolute; inset:0; background:rgba(6,15,11,.92); backdrop-filter:blur(4px); }
.vmodal__box{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; padding:1rem; }
.vmodal__box video{ max-width:92vw; max-height:80vh; border-radius:12px; background:#000; box-shadow:var(--shadow-lg); display:block; }
.vmodal__cap{ margin-top:1rem; color:#fff; font-family:var(--font-head); font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:.9rem; }
.vmodal__close{ position:fixed; top:18px; right:22px; z-index:3; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--ink); border:0; display:grid; place-items:center; box-shadow:var(--shadow-md); transition:transform .25s var(--ease); }
.vmodal__close:hover{ transform:rotate(90deg); }
.vmodal__close svg{ width:22px; height:22px; }

/* =========================================================
   CALCIUM (bande verte + galerie)
   ========================================================= */
.calcium__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.2rem,5vw,4.5rem); align-items:center; }
.calcium__origin{ margin-top:1.7rem; display:inline-flex; align-items:center; gap:.9rem; padding:.8em 1.2em; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(255,255,255,.05); }
.calcium__origin b{ color:#fff; font-family:var(--font-head); font-weight:700; }
.calcium__origin span{ font-size:.85rem; color:#9fb8a9; }
.calcium__gallery{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.calcium__gallery .frame:first-child{ grid-row:span 2; }
.bg-green .frame__tag{ background:var(--red); }

/* =========================================================
   IMPLANTATIONS (carte + liste)
   ========================================================= */
.implant__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.4rem,5vw,4.5rem); align-items:center; }
.implant__list{ display:grid; gap:.7rem; }
.hub{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.2rem; padding:1.2rem 1.3rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; transition:all .3s var(--ease); position:relative; }
.hub::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:4px; background:var(--green); opacity:0; transition:opacity .3s; }
.hub:hover,.hub.is-active{ box-shadow:var(--shadow-md); border-color:transparent; transform:translateX(4px); }
.hub:hover::before,.hub.is-active::before{ opacity:1; }
.hub__idx{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:#fff; background:var(--green); width:40px; height:40px; display:grid; place-items:center; border-radius:8px; }
.hub.is-active .hub__idx,.hub:hover .hub__idx{ background:var(--red); }
.hub__name{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; color:var(--ink); text-transform:uppercase; }
.hub__city{ font-size:.9rem; color:var(--muted); }
.hub__city b{ color:var(--green); font-weight:700; }
.hub__phone{ font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.hub__phone span{ display:block; font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.map{ position:relative; aspect-ratio:1/1; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.map svg{ width:100%; height:100%; }
.map .grid-line{ stroke:var(--line); stroke-width:1; }
.map .coast{ fill:rgba(0,102,54,.05); stroke:rgba(0,102,54,.3); stroke-width:1.4; }
.map .route{ stroke:var(--green); stroke-width:1.4; fill:none; stroke-dasharray:4 5; opacity:.4; }
.pin circle.dot{ fill:var(--green); transition:r .3s var(--ease); }
.pin circle.halo{ fill:var(--green); opacity:.14; transform-origin:center; }
.pin.is-active circle.dot,.pin:hover circle.dot{ fill:var(--red); r:7; }
.pin.is-active circle.halo,.pin:hover circle.halo{ fill:var(--red); }
.pin text{ font-family:var(--font-head); font-size:12px; font-weight:600; fill:var(--ink); }
.pin.is-active text,.pin:hover text{ fill:var(--red-600); }
@keyframes ping{ 0%{transform:scale(.6);opacity:.5} 70%{transform:scale(1.9);opacity:0} 100%{opacity:0} }
.pin.is-active circle.halo{ animation:ping 1.6s var(--ease) infinite; }

/* =========================================================
   RÉALISATIONS (galerie masonry)
   ========================================================= */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.gcell{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); background:var(--gray-100); box-shadow:var(--shadow-sm); }
.gcell img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.gcell:hover img{ transform:scale(1.06); }
.gcell figcaption{ position:absolute; inset:auto 0 0 0; padding:1.2rem 1rem .85rem; color:#fff; font-family:var(--font-head); font-weight:600; font-size:.84rem; background:linear-gradient(180deg,transparent,rgba(6,26,18,.88)); opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.gcell:hover figcaption{ opacity:1; transform:none; }
/* g-* : conservés pour compat. mais neutralisés → grille uniforme et alignée */
.g-a,.g-b,.g-c,.g-d,.g-w{ grid-column:auto; grid-row:auto; }
.gallery__note{ margin-top:1.4rem; text-align:center; font-size:.88rem; color:var(--muted); }

/* =========================================================
   CTA band
   ========================================================= */
.cta{ background:var(--green); color:#fff; }
.cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-block:clamp(2.4rem,4vw,3.6rem); }
.cta__title{ color:#fff; font-size:clamp(1.5rem,1.1rem+1.8vw,2.4rem); text-transform:uppercase; }
.cta__title span{ display:block; font-family:var(--font-body); font-weight:400; text-transform:none; font-size:.5em; color:#d6f0e0; margin-top:.4rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.4rem,5vw,4.5rem); align-items:start; }
.reps{ display:grid; gap:.7rem; }
.rep{ padding:1.2rem 1.3rem; background:#fff; border:1px solid var(--line); border-left:4px solid var(--green); border-radius:0 8px 8px 0; transition:all .3s var(--ease); }
.rep:hover{ box-shadow:var(--shadow-md); transform:translateX(3px); }
.rep__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.rep__city{ font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--ink); text-transform:uppercase; }
.rep__role{ font-family:var(--font-head); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--green); padding:.3em .7em; border-radius:4px; }
.rep__phones{ margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.3rem 1.3rem; }
.rep__phones a{ font-family:var(--font-head); font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rep__phones a:hover{ color:var(--green); }

.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.6rem); box-shadow:var(--shadow-md); border-top:5px solid var(--green); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column:1/-1; }
.field label{ font-family:var(--font-head); font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.field label .req{ color:var(--red); }
.field input,.field select,.field textarea{ font:inherit; font-size:.98rem; color:var(--ink); background:var(--gray-50); border:1.5px solid var(--line); border-radius:6px; padding:.8em .95em; transition:all .25s; }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 4px rgba(0,102,54,.1); }
.field textarea{ resize:vertical; min-height:120px; }
.form-actions{ margin-top:1.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; }
.form-note{ font-size:.82rem; color:var(--muted); }
.form-status{ margin-top:1rem; font-size:.9rem; font-weight:600; }
.form-privacy{ margin-top:1.2rem; font-size:.78rem; line-height:1.5; color:var(--muted); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status.ok{ color:var(--green); } .form-status.err{ color:var(--red); } .form-status.pending{ color:var(--muted); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:#0a1712; color:#9fb0a6; padding-block:clamp(3rem,5vw,4.5rem) 1.6rem; }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.8rem,4vw,3.4rem); padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.08); }
.footer__logo{ height:52px; width:auto; margin-bottom:1.2rem; filter:brightness(0) invert(1) opacity(.92); }
.footer__blurb{ font-size:.92rem; color:#8ba093; max-width:38ch; }
.footer__claim{ margin-top:1rem; font-family:var(--font-head); font-weight:700; color:#66d497; font-size:1rem; text-transform:uppercase; }
.footer h3{ font-family:var(--font-head); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin:0 0 1.1rem; }
.footer__links{ display:grid; gap:.65rem; }
.footer__links a{ font-size:.92rem; color:#9fb0a6; transition:color .25s; }
.footer__links a:hover{ color:#66d497; }
.footer__contact{ display:grid; gap:.7rem; font-size:.92rem; }
.footer__contact div{ display:flex; gap:.6em; align-items:flex-start; }
.footer__contact svg{ width:16px; height:16px; color:#66d497; flex:none; margin-top:.25em; }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.6rem; font-size:.82rem; color:#6f827a; }

/* Nav actif (multi-pages) */
.nav__link.is-active{ color:#fff; }
.nav__link.is-active::after{ width:100%; }

/* =========================================================
   PAGEHEAD (bannière de page interne)
   ========================================================= */
.pagehead{ position:relative; display:grid; place-items:center; text-align:center; padding-block:clamp(3.4rem,7vw,6rem); overflow:hidden; background:var(--green-900); }
.pagehead__media{ position:absolute; inset:0; z-index:0; }
.pagehead__media img{ width:100%; height:100%; object-fit:cover; }
.pagehead::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,26,18,.78), rgba(6,26,18,.92)); z-index:1; }
.pagehead__slash{ position:absolute; right:-50px; top:-50px; width:240px; height:240px; background:var(--red); opacity:.16; transform:rotate(45deg); z-index:1; }
.pagehead__inner{ position:relative; z-index:2; padding-inline:var(--gutter); }
.pagehead h1{ color:#fff; font-size:clamp(2rem,1.4rem+2.6vw,3.4rem); text-transform:uppercase; letter-spacing:-.01em; }
.breadcrumb{ margin-top:1rem; display:flex; gap:.55em; justify-content:center; align-items:center; font-family:var(--font-head); font-size:.8rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#a7c7b5; flex-wrap:wrap; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ color:#66d497; }
.breadcrumb .cur{ color:#fff; }

/* =========================================================
   SERVICE PREVIEW CARDS (accueil)
   ========================================================= */
.scards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.scard{ background:#fff; border:1px solid var(--line); border-bottom:4px solid var(--green); border-radius:var(--radius-lg); padding:2rem 1.6rem; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.scard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.scard__ico{ width:66px; height:66px; display:grid; place-items:center; background:var(--green); color:#fff; border-radius:12px; margin-bottom:1.2rem; }
.scard:nth-child(even) .scard__ico{ background:var(--red); }
.scard:nth-child(even){ border-bottom-color:var(--red); }
.scard__ico svg{ width:32px; height:32px; }
.scard__n{ font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.scard h3{ font-size:1.12rem; text-transform:uppercase; margin:.3rem 0 .7rem; line-height:1.15; }
.scard p{ color:var(--ink-2); font-size:.96rem; flex:1; }
.scard__link{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--green); }
.scard:nth-child(even) .scard__link{ color:var(--red); }
.scard__link svg{ width:15px; height:15px; transition:transform .28s var(--ease); }
.scard:hover .scard__link svg{ transform:translateX(4px); }

/* =========================================================
   SHOWCASE illustration (accueil)
   ========================================================= */
.showcase__fig{ margin:0; position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.showcase__fig img{ width:100%; display:block; }
.showcase__fig figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2.6rem 1.8rem 1.4rem; color:#fff; font-size:1rem; background:linear-gradient(180deg,transparent,rgba(4,20,14,.82)); display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.showcase__badge{ font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; background:var(--red); color:#fff; padding:.45em .9em; border-radius:4px; }
@media (max-width:600px){ .showcase__fig figcaption{ font-size:.86rem; padding:2rem 1.1rem 1.1rem; } }

/* =========================================================
   VIDÉOS
   ========================================================= */
.frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.vtile{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); background:#0a1712; aspect-ratio:3/4; }
.vtile__trigger{ position:absolute; inset:0; }
.vtile video{ width:100%; height:100%; object-fit:cover; display:block; }
.vtile figcaption{ position:absolute; left:0; bottom:14px; z-index:2; background:var(--green); color:#fff; font-family:var(--font-head); font-weight:600; font-size:.8rem; padding:.5em 1em; }
.vtile:nth-child(even) figcaption{ background:var(--red); }
.vtile__play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.vtile__play span{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.6); display:grid; place-items:center; opacity:.0; }
.video-band .vtile{ aspect-ratio:3/4; }

/* =========================================================
   Reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; } .reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; } .reveal[data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .frame img{ transition:none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .intro__grid,.calcium__grid,.implant__grid,.contact__grid{ grid-template-columns:1fr; }
  .implant__grid .map{ max-width:520px; margin-inline:auto; order:-1; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .scards{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .nav__list{ display:none; }
  .burger{ display:flex; }
  .nav{ position:fixed; inset:0; background:var(--dark); flex-direction:column; justify-content:center; gap:0; transform:translateX(100%); transition:transform .45s var(--ease); padding:2rem var(--gutter); }
  .nav.is-open{ transform:none; }
  .nav.is-open .nav__list{ display:flex; flex-direction:column; gap:.3rem; width:100%; }
  .nav.is-open .nav__link{ font-size:1.4rem; color:#fff; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.1); width:100%; }
  .nav.is-open .nav__link::after{ display:none; }
  .nav.is-open .nav-cta{ margin-top:1.4rem; }
  .trio,.why-grid{ grid-template-columns:1fr; }
  .exp-row{ grid-template-columns:1fr; gap:1.6rem; }
  .exp-row:nth-child(even) .exp-row__media{ order:0; }
  .exp-row__media{ max-width:560px; }
}
@media (max-width:600px){
  .factbar__grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(1,1fr); }
  .form-grid{ grid-template-columns:1fr; }
  .media-duo{ grid-template-columns:1fr; } .media-duo .frame:last-child{ margin-top:0; }
  .calcium__gallery{ grid-template-columns:1fr 1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .rep__top{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .cta__inner{ flex-direction:column; align-items:flex-start; }
  .scards{ grid-template-columns:1fr; }
}

/* =========================================================
   RÉGLAGES TYPO (choix client) : titres à gauche + casse normale
   Roboto Slab (titres) + Roboto (texte). Les petits labels/kickers
   restent en capitales (eyebrow, nav, labels) — c'est volontaire.
   ========================================================= */
.section-head{ text-align:left; margin-left:0; margin-right:0; max-width:860px; }
.section-head .eyebrow{ margin-inline:0; }
.section-head .title-underline,
.title-underline{ margin-left:0; margin-right:auto; }
/* Casse normale sur les vrais titres (h1/h2/h3) */
.section-title,
.hero__title,
.exp-row__title,
.vcard h3,
.wcard h3,
.scard h3,
.pagehead h1,
.hub__name,
.rep__city,
.cta__title{ text-transform:none; letter-spacing:-.01em; }
/* Roboto Slab est un slab-serif : on allège un peu les graisses très lourdes */
.hero__title{ font-weight:700; }
.brand__word{ font-weight:700; }

/* =================================================================
   V3 — ÉLÉVATION PREMIUM PAGE D'ACCUEIL
   ================================================================= */

/* --- Header fixe "verre" au-dessus du Hero, opaque au scroll --- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:100; transition:box-shadow .35s var(--ease); }
.site-header .topbar{ overflow:hidden; max-height:64px; transition:max-height .45s var(--ease), opacity .3s, padding .3s; }
.site-header .header{ position:static; background:transparent; box-shadow:none; transition:background .35s var(--ease), border-color .35s var(--ease); }
.site-header:not(.is-scrolled) .header{ background:rgba(9,18,13,.26); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.07); }
.site-header.is-scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.28); }
.site-header.is-scrolled .topbar{ max-height:0; opacity:0; padding-block:0; }
.site-header.is-scrolled .header{ background:var(--dark); }
.site-header .header__inner{ height:80px; }
.brand__mark{ width:46px; height:46px; }
.brand__word{ font-size:1.5rem; letter-spacing:.02em; }
[id]{ scroll-margin-top:100px; }

/* --- HERO plein cadre : l'illustration du pégase couvre tout l'écran --- */
.hero{ display:block; position:relative; overflow:hidden; background:var(--green-950); min-height:auto; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:0; }
.hero__bg{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(3,18,12,.88) 0%, rgba(3,18,12,.60) 40%, rgba(3,18,12,.18) 72%, rgba(3,18,12,0) 100%),
    linear-gradient(0deg, rgba(3,18,12,.75) 0%, rgba(3,18,12,0) 44%); }
.hero__grid{ position:relative; z-index:2; display:flex; align-items:center;
  min-height:100svh; padding-top:clamp(150px,20vh,210px); padding-bottom:clamp(80px,12vh,130px); }
.hero__content{ max-width:680px; color:#fff; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--font-head); font-weight:600; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:#7ee2a6; margin-bottom:1.4rem; }
.hero__eyebrow::before{ content:""; width:34px; height:2px; background:var(--red); }
.hero__title{ display:flex; align-items:center; flex-wrap:nowrap; white-space:nowrap; gap:0 clamp(.5rem,1.4vw,1rem); color:#fff; font-family:var(--font-head); font-weight:700; font-size:clamp(2.35rem,.5rem+4.8vw,5.1rem); line-height:1.04; letter-spacing:-.02em; text-transform:none; }
.hero__title .g{ color:#7ee2a6; }
/* Signature à la même échelle que "Pegasus" (em) pour tenir sur une seule ligne partout */
.hero__claim{ position:relative; display:inline-flex; align-items:center; margin:0; padding-left:.95em;
  font-family:var(--font-head); font-weight:600; font-size:.32em; letter-spacing:.1em; text-transform:uppercase; color:#eafff3; white-space:nowrap; }
.hero__claim::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:2px; height:1.55em; background:linear-gradient(var(--red), #66d497); border-radius:2px; }
.hero__desc{ margin-top:1.5rem; font-size:clamp(1.05rem,1rem+.35vw,1.22rem); line-height:1.6; color:rgba(255,255,255,.82); max-width:34em; }
.hero__domains{ margin-top:1.7rem; display:flex; flex-wrap:wrap; gap:.5em .95em; align-items:center; }
.hero__domains li{ position:relative; font-family:var(--font-head); font-weight:500; font-size:.86rem; letter-spacing:.02em; color:#dff3e8; }
.hero__domains li:not(:last-child)::after{ content:"•"; margin-left:.95em; color:#4f9e73; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.3rem; }
.hero__actions .btn--primary{ background:#fff; color:var(--green-900); }
.hero__actions .btn--primary:hover{ background:#eafff3; }
.hero__art{ position:relative; z-index:1; }
.hero__art img{ width:100%; height:auto; display:block;
  -webkit-mask-image:radial-gradient(120% 120% at 72% 45%, #000 55%, transparent 82%);
  mask-image:radial-gradient(120% 120% at 72% 45%, #000 55%, transparent 82%);
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55)); }
.hero__scroll{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.6); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; }
.hero__scroll .mouse{ width:22px; height:34px; border:1.5px solid rgba(255,255,255,.45); border-radius:12px; position:relative; }
.hero__scroll .mouse::after{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:6px; background:#fff; border-radius:2px; animation:wheel 1.8s infinite; }
@keyframes wheel{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,10px)} }

/* --- MARQUEE domaines : bande d'images en boucle infinie --- */
.mq{ position:relative; z-index:5; margin-top:clamp(-168px,-10.5vw,-96px);
  background:var(--green-950); overflow:hidden; padding-block:clamp(1.1rem,2vw,1.8rem);
  border-bottom:1px solid rgba(255,255,255,.06);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.mq__track{ display:flex; width:max-content; animation:mq-scroll 34s linear infinite; }
.mq:hover .mq__track{ animation-play-state:paused; }
.mq-item{ position:relative; flex:0 0 auto; width:clamp(230px,24vw,310px); aspect-ratio:16/10;
  margin-right:clamp(.7rem,1.4vw,1.1rem); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-md); }
.mq-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.mq-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,20,14,0) 38%, rgba(4,20,14,.85)); }
.mq-item__cap{ position:absolute; left:14px; bottom:12px; z-index:2; color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.98rem; text-transform:uppercase; letter-spacing:.01em; }
.mq-item--solid{ background:linear-gradient(135deg, var(--green-700), var(--green-950)); display:grid; place-items:center; }
.mq-item--solid::after{ content:none; }
.mq-item--solid .mq-item__ico{ width:42px; height:42px; color:#66d497; margin-bottom:.4rem; }
@keyframes mq-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .mq__track{ animation:none; flex-wrap:wrap; justify-content:center; gap:.8rem; width:auto; }
  .mq-item{ margin-right:0; }
}

/* --- FACTBAR premium --- */
.factbar{ background:var(--green); position:relative; }
.factbar__grid{ border:0; }
.fact{ border-right:1px solid rgba(255,255,255,.16); position:relative; }
.fact__num{ letter-spacing:-.02em; }
.fact__num sup{ font-size:.5em; vertical-align:super; color:#bff0d3; }

/* --- 6 PÔLES d'expertise (image-led) --- */
.poles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.pole{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:340px; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); color:#fff; isolation:isolate; }
.pole__media{ position:absolute; inset:0; z-index:-2; }
.pole__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.pole:hover .pole__media img{ transform:scale(1.07); }
.pole::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,26,18,.15) 0%, rgba(5,22,15,.62) 55%, rgba(4,18,12,.92) 100%); }
.pole--flat{ background:linear-gradient(150deg,#0a5a34,#06331d); }
.pole--flat .pole__icon{ position:absolute; right:-10px; top:-6px; z-index:-1; color:rgba(255,255,255,.08); }
.pole--flat .pole__icon svg{ width:170px; height:170px; }
.pole__body{ padding:1.7rem; position:relative; }
.pole__num{ font-family:var(--font-head); font-weight:700; font-size:1rem; color:#7ee2a6; letter-spacing:.05em; }
.pole__name{ font-family:var(--font-head); font-weight:700; font-size:1.28rem; margin:.5rem 0 .5rem; line-height:1.15; color:#fff; }
.pole__desc{ font-size:.95rem; color:rgba(255,255,255,.82); line-height:1.5; }
.pole__link{ margin-top:1rem; display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.pole__link svg{ width:15px; height:15px; transition:transform .28s var(--ease); }
.pole:hover .pole__link svg{ transform:translateX(4px); }
.pole__link::before{ content:""; position:absolute; inset:0; z-index:1; }

/* --- IMPLANTATIONS Afrique --- */
.implantAf{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.implantAf__map{ position:relative; }
.africa{ width:100%; height:auto; display:block; overflow:visible; }
.af-base{ fill:#e7ece8; stroke:#d3ddd6; stroke-width:.8; }
.bg-dark .af-base{ fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.14); }
.af-country{ fill:var(--green); stroke:#fff; stroke-width:1; transition:fill .3s var(--ease); cursor:pointer; }
.bg-dark .af-country{ stroke:var(--green-900); }
.af-country.is-active{ fill:var(--red); }
.af-flux{ fill:none; stroke:var(--red); stroke-width:1.6; stroke-dasharray:5 7; opacity:.6; stroke-linecap:round; animation:dash 22s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-260; } }
.af-conn{ fill:none; stroke:var(--green); stroke-width:1.4; opacity:.45; }
.af-dest{ fill:var(--green-600); opacity:.6; }
.corridor{ stroke:var(--red); stroke-width:2.6; opacity:.8; stroke-dasharray:7 6; }
.af-label{ fill:#9aa8a0; font-family:var(--font-head); font-weight:700; font-size:26px; letter-spacing:.16em; }
.af-pins .pin{ cursor:pointer; }
.af-pins .halo{ fill:var(--green); opacity:.16; transform-origin:center; }
.af-pins .dot{ fill:var(--green); transition:r .3s var(--ease); }
.af-pins .pin.is-active .dot,.af-pins .pin:hover .dot{ fill:var(--red); r:8; }
.af-pins .pin.is-active .halo{ fill:var(--red); animation:ping 1.6s var(--ease) infinite; }
.af-pins text{ font-family:var(--font-head); font-size:16px; font-weight:700; fill:var(--ink); paint-order:stroke; stroke:#fff; stroke-width:3px; }
.bg-dark .af-pins text{ fill:#fff; stroke:var(--green-900); }
.implantAf__hubs{ display:grid; gap:.7rem; }

/* --- Section "voir plus" CTA --- */
.more-cta{ text-align:center; margin-top:clamp(2rem,4vw,3rem); }

/* --- Responsive V3 --- */
@media (max-width:940px){
  .hero__grid{ min-height:100svh; padding-top:clamp(120px,22vh,165px); padding-bottom:clamp(48px,10vh,90px); }
  .hero__bg{ background:linear-gradient(180deg, rgba(3,18,12,.60) 0%, rgba(3,18,12,.38) 42%, rgba(3,18,12,.86) 100%); }
  .hero__scroll{ display:none; }
  .poles{ grid-template-columns:repeat(2,1fr); }
  .implantAf{ grid-template-columns:1fr; }
  .implantAf__map{ max-width:460px; margin:0 auto; }
}
@media (max-width:600px){
  .poles{ grid-template-columns:1fr; }
  .hero__content{ text-align:left; }
}

/* Header fixe : dégager les bannières de pages internes */
.pagehead{ padding-top:clamp(150px, 12vw, 195px); }

/* =================================================================
   AJUSTEMENTS : badge + titre sur une ligne + typographie unifiée
   ================================================================= */
/* Badge "Multi-secteur" sur une seule ligne */
.intro__figure .badge{ max-width:none; width:max-content; }
.intro__figure .badge b{ white-space:nowrap; }

/* Titres : max-width plus large + équilibrage ; variante 1 ligne */
.section-head{ max-width:1120px; }
.section-title{ text-wrap:balance; }
.section-title--oneline{ font-size:clamp(1.4rem, .8rem + 1.6vw, 2.2rem); }
@media (min-width:1080px){ .section-title--oneline{ white-space:nowrap; } }

/* Roboto Slab = titres uniquement · Roboto = labels, UI, paragraphes */
.eyebrow,.topbar__tag,.nav__link,.btn,.brand__sub,.hero__eyebrow,.hero__domains li,
.hero__bar,.intro__body .lead,.exp-row__label,.exp-sub__item h4,.scard__n,.pole__num,
.pole__link,.rep__role,.field label,.footer h3,.footer__claim,.breadcrumb,.vmodal__cap,
.calcium__badge,.frame__tag,.gcell figcaption,.vtile figcaption,.hub__city,.hub__phone,
.section-sub,.fact__label,.vo-card h4,.form-note,.form-status,.keywords span{
  font-family:var(--font-body);
}

/* Harmonisation : titres d'en-tête de section sur une ligne (desktop ≥1080px).
   NB : ciblé sur .section-head uniquement — les titres en colonne étroite
   (Présentation, Calcium) conservent leur retour à la ligne naturel. */
.section-head .section-title{ font-size:clamp(1.4rem, .7rem + 1.7vw, 2.2rem); }
@media (min-width:1080px){ .section-head .section-title{ white-space:nowrap; } }

/* Correctif alignement titre en colonne (Présentation, Calcium) :
   retour à la ligne naturel, aligné à gauche (au lieu de "balance" irrégulier) */
.section-title{ text-wrap:normal; }
/* Le fond blanc du bouton primaire ne concerne QUE le hero, pas les autres
   sections qui réutilisent .hero__actions */
.hero__actions .btn--primary{ background:var(--green); color:#fff; }
.hero__actions .btn--primary:hover{ background:var(--green-700); }
.hero .hero__actions .btn--primary{ background:#fff; color:var(--green-900); }
.hero .hero__actions .btn--primary:hover{ background:#eafff3; }

/* Titres en colonne étroite (Présentation, Calcium) : taille réduite pour un
   retour à la ligne propre et équilibré dans leur demi-colonne */
.intro__body .section-title,
.bg-green .section-title{ font-size:clamp(1.55rem, 1rem + 1.4vw, 2.25rem); line-height:1.14; }

/* Présentation : suppression des accents décoratifs (losange vert + cadre rouge)
   qui dépassaient de l'image → rendu net, éditorial et bien aligné */
.intro__figure::before,
.intro__figure::after{ display:none; }
.intro__figure img{ border-radius:var(--radius-lg); }

/* Titre Présentation : taille calée pour que "Un groupe multisectoriel au
   service" tienne sur la 1re ligne, puis "du développement africain" dessous */
.intro__body .section-title{ font-size:clamp(1.45rem, .9rem + 1.1vw, 1.8rem); line-height:1.16; }

/* =================================================================
   RAFFINEMENTS HERO (revue UX)
   ================================================================= */
/* CTA secondaire du hero = lien discret (différencié du bouton plein du header) */
.hero__cta-link{ display:inline-flex; align-items:center; gap:.5em; color:#fff; font-family:var(--font-body);
  font-weight:600; font-size:.98rem; padding:.6em .1em; border-bottom:2px solid rgba(255,255,255,.4);
  transition:color .25s var(--ease), border-color .25s var(--ease); }
.hero__cta-link svg{ width:16px; height:16px; transition:transform .28s var(--ease); }
.hero__cta-link:hover{ color:#7ee2a6; border-bottom-color:#7ee2a6; }
.hero__cta-link:hover svg{ transform:translateX(4px); }
.hero__actions{ align-items:center; gap:1.6rem; }

/* Secteurs d'activité en pills aérées (au lieu d'une liste "•") */
.hero__domains{ gap:.6rem .6rem; }
.hero__domains li{ font-family:var(--font-body); font-weight:500; font-size:.82rem; letter-spacing:.01em;
  color:#eafff3; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.06);
  padding:.5em 1.05em; border-radius:999px; }
.hero__domains li::after{ content:none !important; }

/* Illustration : masque renforcé → focalise le pégase, estompe la carte/bateaux */
.hero__art img{
  -webkit-mask-image:radial-gradient(115% 115% at 66% 42%, #000 42%, transparent 76%);
  mask-image:radial-gradient(115% 115% at 66% 42%, #000 42%, transparent 76%);
}