/*
Theme Name: Sunumbaye
Theme URI: https://www.sunumbaye.com
Author: Groupe Sunumbaye
Description: Theme du site Sunumbaye Leading Innovation. Entete, pied de page et charte graphique du groupe ; le contenu des pages est construit avec Elementor.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: proprietaire
Text Domain: sunumbaye
*/

/* ============================================================
   SUNUMBAYE LEADING INNOVATION — Design system
   Charte : Vert Sunu #609B16 · Vert Mbay #5F8741 · Or Sahel #F5C017
            Vert Pousse #8BC53F · Poppins
   Répartition : 55% blanc / 20% vert Mbay / 17% vert Sunu / 8% or
   ============================================================ */

:root{
  --green:#609B16; --green-d:#4A7A10; --green-l:#7FBB29;
  --mbay:#5F8741;  --mbay-d:#48673100; --pousse:#8BC53F;
  --gold:#F5C017;  --gold-d:#D9A70A;  --gold-l:#FFDA5E;

  --ink:#16240C; --ink-2:#2C3D20; --body:#4C5B42; --muted:#7A8872;
  --bg:#FFFFFF; --soft:#F4F8EC; --soft-2:#FAFCF5; --cream:#FDFBF3;
  --line:#E5EDD7; --line-2:#F0F5E6;

  --gut: clamp(18px, 4.6vw, 56px);
  --maxw: 1260px;
  --sec: clamp(60px, 8.2vw, 118px);
  --r: 22px; --r-s:14px; --r-l:34px;

  --sh-1: 0 2px 10px rgba(22,36,12,.05);
  --sh-2: 0 12px 34px -12px rgba(22,36,12,.14);
  --sh-3: 0 28px 70px -24px rgba(22,36,12,.24);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --hdr: 86px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; overflow-x:clip; background:var(--bg); color:var(--body);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.68; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4,h5{color:var(--ink); font-weight:800; line-height:1.12; letter-spacing:-.022em; margin:0; text-wrap:balance}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline-offset:0}
p{margin:0 0 1.05em}
::selection{background:var(--gold); color:var(--ink)}

/* ---------- LAYOUT PRIMITIVES : marges internes/externes ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.wrap-n{max-width:980px; margin-inline:auto}
.wrap-w{max-width:1440px; margin-inline:auto}
.sec{padding-block:var(--sec); position:relative; overflow:clip}
.sec-s{padding-block:clamp(40px,5.4vw,74px); position:relative; overflow:clip}
.soft{background:var(--soft-2)}
.soft2{background:var(--soft)}
.cream{background:var(--cream)}
.center{text-align:center}

/* ---------- TYPOGRAPHIE ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--green-d); margin-bottom:16px;
}
.kicker::before{content:''; width:26px; height:2px; background:var(--gold); border-radius:2px; flex:none}
.kicker.c{justify-content:center}
.kicker.on-dark{color:var(--gold-l)}
h1,.h1{font-size:clamp(31px,5.1vw,60px); font-weight:900; letter-spacing:-.033em}
h2,.h2{font-size:clamp(25px,3.5vw,44px); font-weight:800}
h3,.h3{font-size:clamp(19px,2.05vw,26px); font-weight:700; letter-spacing:-.018em}
h4,.h4{font-size:clamp(16px,1.35vw,18.5px); font-weight:700; letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.42vw,19px); line-height:1.72; color:var(--body)}
.sub{color:var(--muted); font-size:15.2px}
.hl{color:var(--green)}
.hl-g{color:var(--gold-d)}
.u-mark{
  background:linear-gradient(transparent 62%, rgba(245,192,23,.48) 62%);
  background-size:0% 100%; background-repeat:no-repeat;
  transition:background-size 1s var(--ease) .25s;
}
.in .u-mark{background-size:100% 100%}

/* ---------- BOUTONS ---------- */
.btn{
  white-space:nowrap;
  --bg1:var(--green); --bg2:var(--green-l); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:11px; font-weight:600; font-size:14.6px; letter-spacing:.005em;
  color:var(--fg); background:linear-gradient(122deg,var(--bg1),var(--bg2));
  overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease), filter .3s;
  will-change:transform;
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(122deg,var(--bg2),var(--bg1)); opacity:0; transition:opacity .45s var(--ease);
}
.btn::before{
  content:''; position:absolute; top:0; left:-140%; width:55%; height:100%; z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); transition:left .75s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{opacity:1}
.btn:hover::before{left:150%}
.btn:active{transform:translateY(-1px)}
.btn .ic{transition:transform .45s var(--ease)}
.btn:hover .ic{transform:translateX(4px)}
.btn.gold{--bg1:var(--gold); --bg2:var(--gold-l); --fg:#3A2C00}

.btn.ghost{
  background:transparent; color:var(--green-d);
  border:1.6px solid var(--line); backdrop-filter:blur(6px);
}
.btn.ghost::after{background:var(--soft)}
.btn.ghost:hover{color:var(--green-d); border-color:var(--pousse); background:var(--soft-2)}
.btn.on-dark{background:rgba(255,255,255,.1); border:1.6px solid rgba(255,255,255,.34); color:#fff}
.btn.on-dark::after{background:rgba(255,255,255,.2)}
.btn.sm{padding:11px 18px; font-size:13.2px; border-radius:9px}
.btn-row{display:flex; flex-wrap:wrap; gap:13px; align-items:center}
.btn-row.c{justify-content:center}

/* ---------- HEADER ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:900;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent; transition:all .5s var(--ease);
}
.hdr.scr{background:rgba(255,255,255,.96); border-bottom-color:var(--line); box-shadow:0 4px 24px -14px rgba(22,36,12,.3)}
.hdr-in{display:flex; align-items:center; gap:12px; height:var(--hdr); transition:height .5s var(--ease)}
.hdr.scr .hdr-in{height:70px}
.brand{display:flex; align-items:center; flex:none; margin-right:auto}
.brand img{height:41px; width:auto; transition:height .5s var(--ease)}
.hdr.scr .brand img{height:37px}
.prog{position:absolute; left:0; bottom:-1px; height:2.5px; background:linear-gradient(90deg,var(--green),var(--gold)); width:0; transition:width .1s linear; border-radius:0 3px 3px 0}

.nav{display:flex; align-items:center; gap:2px}
.nav>li{position:relative; list-style:none}
.nav a.nl,.nav button.nl{
  position:relative; display:flex; align-items:center; gap:5px;
  padding:9px 10px; font-size:13.7px; font-weight:500; color:var(--ink-2); border-radius:10px;
  transition:color .3s, background .3s; white-space:nowrap;
}
.nav a.nl::after{
  content:''; position:absolute; left:10px; right:10px; bottom:5px; height:2px; border-radius:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.nav a.nl:hover,.nav button.nl:hover{color:var(--green-d); background:var(--soft)}
.nav a.nl:hover::after{transform:scaleX(1)}
.nav a.nl.act{color:var(--green-d); font-weight:600}
.nav a.nl.act::after{transform:scaleX(1); background:var(--gold)}
.nav .car{width:9px; height:9px; transition:transform .4s var(--ease); opacity:.6}
.nav li:hover .car{transform:rotate(180deg)}

.drop{
  position:absolute; top:calc(100% + 4px); left:50%; translate:-50% 0;
  min-width:290px; padding:10px; border-radius:20px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.97); transform-origin:top center;
  transition:all .42s var(--ease); z-index:50;
}
.drop.wide{min-width:min(560px,86vw); display:grid; grid-template-columns:1fr 1fr; gap:2px}
.nav li:hover>.drop, .nav li:focus-within>.drop{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.drop a{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px;
  font-size:13.7px; font-weight:500; color:var(--ink-2); line-height:1.35;
  transition:background .28s, color .28s, transform .28s var(--ease);
}
.drop a:hover{background:var(--soft); color:var(--green-d); transform:translateX(4px)}
.drop a .dot{width:6px; height:6px; border-radius:50%; background:var(--pousse); flex:none; transition:transform .3s}
.drop a:hover .dot{transform:scale(1.7); background:var(--gold)}
.hdr-cta{flex:none}
.burger{display:none; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; flex:none; border:1px solid var(--line)}
.burger span{display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:all .4s var(--ease)}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:all .4s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu .burger span{background:transparent}
body.menu .burger span::before{top:0; transform:rotate(45deg)}
body.menu .burger span::after{top:0; transform:rotate(-45deg)}

/* ---------- MOBILE PANEL ---------- */
.mpanel{
  position:fixed; inset:0; z-index:880; background:#fff;
  padding:calc(var(--hdr) + 14px) 0 40px; overflow-y:auto;
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .72s var(--ease); visibility:hidden;
}
body.menu .mpanel{clip-path:circle(155% at calc(100% - 44px) 44px); visibility:visible}
.mpanel .mi{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 0; border-bottom:1px solid var(--line-2);
  font-size:17.5px; font-weight:600; color:var(--ink);
  opacity:0; transform:translateY(22px); transition:all .55s var(--ease);
}
body.menu .mpanel .mi{opacity:1; transform:none; transition-delay:calc(.1s + var(--i,0)*.045s)}
.mpanel .msub{display:grid; gap:2px; padding:4px 0 10px; max-height:0; overflow:hidden; transition:max-height .55s var(--ease)}
.mpanel .mi.open + .msub{max-height:760px}
.mpanel .msub a{padding:10px 14px; font-size:14.6px; color:var(--body); border-radius:11px; background:var(--soft-2); font-weight:500}
.mpanel .mi .car{width:11px; transition:transform .4s var(--ease)}
.mpanel .mi.open .car{transform:rotate(180deg)}

/* ---------- TRANSITION DE PAGE ---------- */
.curtain{position:fixed; inset:0; z-index:1200; pointer-events:none; display:grid; grid-template-columns:repeat(5,1fr)}
.curtain i{background:linear-gradient(180deg,var(--green),var(--mbay)); transform:scaleY(0); transform-origin:top}
.curtain.go i{animation:cur .82s var(--ease-io) forwards}
.curtain i:nth-child(2){animation-delay:.06s} .curtain i:nth-child(3){animation-delay:.12s}
.curtain i:nth-child(4){animation-delay:.18s} .curtain i:nth-child(5){animation-delay:.24s}
@keyframes cur{0%{transform:scaleY(0); transform-origin:top}42%{transform:scaleY(1); transform-origin:top}43%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
main{min-height:60vh; padding-top:var(--hdr)}
.pg{animation:pgIn .72s var(--ease) both}
@keyframes pgIn{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* ---------- ANIMATIONS AU SCROLL ---------- */
[data-a]{opacity:0; transition:opacity .95s var(--ease), transform 1.05s var(--ease), clip-path 1.15s var(--ease); transition-delay:var(--d,0s); will-change:transform,opacity}
[data-a="up"]{transform:translateY(46px)}
[data-a="dn"]{transform:translateY(-34px)}
[data-a="l"]{transform:translateX(-52px)}
[data-a="r"]{transform:translateX(52px)}
[data-a="zo"]{transform:scale(.9)}
[data-a="zi"]{transform:scale(1.09)}
[data-a="clip"]{clip-path:inset(0 0 100% 0); opacity:1; transform:translateY(0)}
[data-a="clipL"]{clip-path:inset(0 100% 0 0); opacity:1}
[data-a="fade"]{transform:none}
[data-a="rot"]{transform:perspective(1200px) rotateX(14deg) translateY(40px); transform-origin:top}
[data-a].in{opacity:1; transform:none; clip-path:inset(0 0 0 0)}

.stg>*{opacity:0; transform:translateY(34px); transition:opacity .85s var(--ease), transform .95s var(--ease)}
.stg.in>*{opacity:1; transform:none}
.stg.in>*:nth-child(1){transition-delay:.03s} .stg.in>*:nth-child(2){transition-delay:.11s}
.stg.in>*:nth-child(3){transition-delay:.19s} .stg.in>*:nth-child(4){transition-delay:.27s}
.stg.in>*:nth-child(5){transition-delay:.35s} .stg.in>*:nth-child(6){transition-delay:.43s}
.stg.in>*:nth-child(7){transition-delay:.51s} .stg.in>*:nth-child(8){transition-delay:.59s}
.stg.in>*:nth-child(9){transition-delay:.67s} .stg.in>*:nth-child(n+10){transition-delay:.75s}

/* Titre à révélation par mot */
.sr{display:inline-block; overflow:hidden; vertical-align:bottom}
.sr>i{display:inline-block; font-style:normal; transform:translateY(104%); transition:transform .95s var(--ease); transition-delay:calc(var(--w,0)*.055s)}
.in .sr>i, .sr.in>i{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  [data-a]{opacity:1!important; transform:none!important; clip-path:none!important}
  .stg>*{opacity:1!important; transform:none!important}
  .sr>i{transform:none!important}
}

/* ---------- RÉVÉLATION PAR VOLET ---------- */
.rv{position:relative; overflow:hidden}
.rv::after{
  content:''; position:absolute; inset:0; z-index:3; border-radius:inherit;
  background:linear-gradient(118deg,var(--green),var(--mbay));
  transform:scaleX(1); transform-origin:right;
  transition:transform 1.05s var(--ease-io) .08s;
}
.rv.in::after{transform:scaleX(0)}
.rv img{transform:scale(1.14); transition:transform 1.6s var(--ease)}
.rv.in img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.rv::after{display:none}.rv img{transform:none!important}}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; background:var(--green)}
.hero-bg{position:absolute; inset:-3% -2%; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; animation:kb 26s ease-in-out infinite alternate; filter:saturate(1.06)}
@keyframes kb{from{transform:scale(1.01) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1%,-1.2%,0)}}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(82% 92% at 0% 62%, rgba(62,106,12,.58), transparent 66%),
    linear-gradient(94deg, rgba(62,106,12,.54) 0%, rgba(86,140,18,.40) 38%, rgba(128,186,42,.22) 72%, rgba(168,212,88,.10) 100%);
}
.hero-in{position:relative; z-index:2; padding-block:clamp(74px,11vw,142px); color:#fff}
.hero h1{color:#fff; max-width:17ch; font-size:clamp(30px,3.5vw,49px)}
.hero .lead{color:rgba(255,255,255,.9); max-width:52ch; margin-top:18px; font-size:clamp(14.8px,1.16vw,16.6px)}
.hero .kicker{color:var(--gold-l)}
.hero .kicker::before{background:var(--gold)}
.hero .btn-row{margin-top:34px}
.hero-badges{display:flex; flex-wrap:wrap; gap:11px; margin-top:40px}
.hero-badges span{
  display:inline-flex; align-items:center; gap:8px; padding:9px 17px; border-radius:100px;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2);
  font-size:12.8px; font-weight:500; color:#fff; backdrop-filter:blur(8px);
}
.hero-badges span b{color:var(--gold-l); font-weight:700}
.leaf{position:absolute; z-index:1; opacity:.5; pointer-events:none; animation:fl 15s ease-in-out infinite}
.leaf svg{display:block}
@keyframes fl{0%,100%{transform:translate3d(0,0,0) rotate(0)}33%{transform:translate3d(18px,-22px,0) rotate(11deg)}66%{transform:translate3d(-13px,14px,0) rotate(-8deg)}}
.scrollcue{position:absolute; left:50%; bottom:22px; translate:-50% 0; z-index:3; display:grid; gap:7px; justify-items:center}
.scrollcue i{display:block; width:1.6px; height:38px; background:linear-gradient(var(--gold),transparent); border-radius:2px; animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%{opacity:0; transform:scaleY(.2) translateY(-12px)}45%{opacity:1}100%{opacity:0; transform:scaleY(1) translateY(14px)}}

/* Bandeau de page interne */
.phero{position:relative; overflow:hidden; background:var(--mbay)}

.phero-bg{position:absolute; inset:0; z-index:0}
.phero-bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:kb 30s ease-in-out infinite alternate}
.phero-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg,rgba(62,106,12,.62),rgba(96,155,22,.46) 48%,rgba(160,206,80,.22))}
.phero-in{position:relative; z-index:2; padding-block:clamp(52px,7.2vw,92px); color:#fff}
.phero h1{color:#fff; max-width:20ch}
.phero .kicker{color:var(--gold-l)}
.phero .kicker::before{background:var(--gold)}
.phero p{color:rgba(255,255,255,.88); max-width:62ch; margin-top:14px; font-size:16px}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.6px; color:rgba(255,255,255,.72); margin-bottom:16px}
.crumb a:hover{color:var(--gold-l)}
.crumb .sep{opacity:.5}

/* ---------- GRILLES & CARTES ---------- */
.g{display:grid; gap:clamp(16px,2vw,26px)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,4.4vw,68px); align-items:center}
.split.r>*:first-child{order:2}

.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
  display:flex; flex-direction:column; height:100%;
}
.card:hover{transform:translateY(-8px); box-shadow:var(--sh-3); border-color:var(--pousse)}
.card .ph{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--soft)}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s}
.card:hover .ph img{transform:scale(1.09)}
.card .ph::after{content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(22,36,12,.38),transparent 52%); opacity:.7; transition:opacity .6s}
.card:hover .ph::after{opacity:.95}
.card .bd{padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; gap:9px; flex:1}
.card .ck{font-size:10.8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-d)}
.card h3{font-size:clamp(16.5px,1.28vw,19px); line-height:1.3}
.card p{font-size:14.3px; color:var(--muted); margin:0; line-height:1.62}
.card .more{
  margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:8px;
  font-size:13.4px; font-weight:600; color:var(--green-d);
}
.card .more .ic{transition:transform .45s var(--ease)}
.card:hover .more .ic{transform:translateX(6px)}
.tag{
  position:absolute; top:14px; left:14px; z-index:2; padding:6px 13px; border-radius:100px;
  background:rgba(255,255,255,.94); color:var(--green-d); font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; backdrop-filter:blur(6px);
}
.tag.g{background:var(--gold); color:#3A2C00}

/* carte icône */
.ic-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,32px); overflow:hidden; height:100%;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
}
.ic-card::before{
  content:''; position:absolute; inset:auto auto -55% -25%; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(139,197,63,.22),transparent 68%);
  transition:transform .9s var(--ease); transform:scale(.4);
}
.ic-card:hover{transform:translateY(-7px); box-shadow:var(--sh-2); border-color:var(--pousse)}
.ic-card:hover::before{transform:scale(1.5)}
.ic-card>*{position:relative}
.ic-b{
  width:56px; height:56px; border-radius:17px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(140deg,var(--green),var(--pousse)); color:#fff;
  transition:transform .55s var(--ease), border-radius .55s;
}
.ic-card:hover .ic-b{transform:rotate(-8deg) scale(1.07); border-radius:50%}
.ic-b.gold{background:linear-gradient(140deg,var(--gold-d),var(--gold-l)); color:#3A2C00}
.ic-b.mbay{background:linear-gradient(140deg,var(--mbay),var(--green))}
.ic-card h3{font-size:18px; margin-bottom:8px}
.ic-card p{font-size:14.4px; color:var(--muted); margin:0}

/* ---------- COMPTEURS ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line); background:var(--line-2)}
.stat{background:#fff; padding:clamp(24px,3vw,40px) clamp(16px,2vw,26px); text-align:center; transition:background .5s}
.stat:hover{background:var(--soft-2)}
.stat .v{font-size:clamp(30px,3.9vw,50px); font-weight:900; color:var(--green); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.stat .v sup{font-size:.5em; vertical-align:super; color:var(--gold-d)}
.stat .l{font-size:12.6px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:11px}

/* ---------- MARQUEE PARTENAIRES ---------- */
.mq{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-t{display:flex; width:max-content; animation:mq 38s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-i{
  flex:none; width:190px; height:96px; margin-inline:11px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px;
  transition:transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.mq-i img{max-height:56px; width:auto; object-fit:contain; transition:transform .5s var(--ease)}
.mq-i:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--pousse)}
.mq-i:hover img{transform:scale(1.07)}

/* ---------- VIDÉOS YOUTUBE ---------- */
.vd{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s; height:100%;
}
.vd:hover{transform:translateY(-8px); box-shadow:var(--sh-3); border-color:#FF3D3D}
.vd .th{position:relative; aspect-ratio:16/9; overflow:hidden; background:#111}
.vd .th img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .5s}
.vd:hover .th img{transform:scale(1.07); filter:brightness(.78)}
.vd .play{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  opacity:0; transition:opacity .5s var(--ease);
}
.vd:hover .play{opacity:1}
.vd .play i{
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:#FF0033; box-shadow:0 12px 34px rgba(0,0,0,.5); transform:scale(.7);
  transition:transform .55s var(--ease);
}
.vd:hover .play i{transform:scale(1)}
.vd .dur{font-variant-numeric:tabular-nums; 
  position:absolute; right:9px; bottom:9px; z-index:2; padding:3px 8px; border-radius:6px;
  background:rgba(0,0,0,.82); color:#fff; font-size:11.6px; font-weight:600; letter-spacing:.02em;
}
.vd .bd{padding:16px 18px 19px}
.vd h4{font-size:14.4px; line-height:1.42; margin-bottom:9px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.vd .mt{display:flex; flex-wrap:wrap; gap:7px; font-size:12.1px; color:var(--muted)}
.vd .mt b{color:var(--green-d); font-weight:600}

/* ---------- OFFRES / PACKS ---------- */
.pk{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border:1.6px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
}
.pk:hover{transform:translateY(-10px); box-shadow:var(--sh-3); border-color:var(--green)}
.pk.feat{border-color:var(--gold); box-shadow:0 22px 54px -26px rgba(245,192,23,.6)}
.pk .rib{
  position:absolute; top:16px; right:-34px; z-index:3; transform:rotate(38deg);
  background:var(--gold); color:#3A2C00; font-size:10.6px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:6px 40px;
}
.pk .ph{aspect-ratio:1/1; overflow:hidden; background:var(--soft)}
.pk .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.pk:hover .ph img{transform:scale(1.06)}
.pk .bd{padding:clamp(20px,2.3vw,30px); display:flex; flex-direction:column; gap:13px; flex:1}
.pk .num{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:var(--soft); color:var(--green-d); font-weight:800; font-size:15px; border:1px solid var(--line);
}
.pk h3{font-size:clamp(18px,1.5vw,22px)}
.pk .from{font-size:13.2px; color:var(--gold-d); font-weight:700; letter-spacing:.03em}
.pk ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pk li{display:flex; gap:10px; font-size:14px; line-height:1.55; color:var(--body)}
.pk li svg{flex:none; margin-top:3px; color:var(--green)}
.pk .bd .btn{margin-top:auto; width:100%; white-space:nowrap; padding-inline:16px}
.pk-g .pk .ph{aspect-ratio:1/1}
.pk-h{display:flex; align-items:center; gap:13px}
.pk-h h3{margin:0}
.pk-d{font-size:14.4px; color:var(--muted); margin:0}
.pk-sep{display:flex; align-items:center; gap:18px; margin:clamp(34px,4.4vw,58px) 0 clamp(20px,2.4vw,30px)}
.pk-sep span{flex:1; height:1px; background:var(--line)}
.pk-sep b{font-size:11.4px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.pk-wide{flex-direction:row; align-items:stretch; height:auto}
.pk-wide .ph{flex:0 0 40%; aspect-ratio:auto; position:relative; overflow:hidden; min-height:0}
.pk-wide .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pk-wide .bd{flex:1; justify-content:center; padding:clamp(26px,3.2vw,48px); gap:15px}
.pk-wide ul{display:grid; grid-template-columns:1fr 1fr; gap:11px 30px}
.pk-wide .bd .btn{width:auto; align-self:flex-start; margin-top:10px; padding-inline:32px}

/* ---------- PALIERS INVESTISSEMENT ---------- */
.inv{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.5vw,34px); height:100%; overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
}
.inv::after{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--green),var(--pousse)); transform:scaleY(0); transform-origin:top; transition:transform .7s var(--ease)}
.inv:hover{transform:translateY(-7px); box-shadow:var(--sh-2); border-color:var(--pousse)}
.inv:hover::after{transform:scaleY(1)}
.inv .lv{font-size:11.4px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-d); margin-bottom:11px; display:block}
.inv h3{font-size:19px; margin-bottom:7px}
.inv .amt{font-size:clamp(20px,2.1vw,26px); font-weight:900; color:var(--green); letter-spacing:-.03em; margin-bottom:12px}
.inv p{font-size:14.2px; color:var(--muted); margin:0 0 14px}
.inv ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.inv li{display:flex; gap:9px; font-size:13.6px; line-height:1.5}
.inv li::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; margin-top:8px}

/* ---------- PARCOURS / TIMELINE ---------- */
.tl{position:relative; display:grid; gap:clamp(16px,2vw,24px)}
.tl::before{content:''; position:absolute; left:27px; top:14px; bottom:14px; width:2px; background:linear-gradient(var(--pousse),var(--line)); border-radius:2px}
.tl-i{position:relative; display:grid; grid-template-columns:56px 1fr; gap:clamp(14px,2vw,24px); align-items:start}
.tl-n{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center; z-index:2;
  background:linear-gradient(140deg,var(--green),var(--pousse)); color:#fff; font-weight:800; font-size:17px;
  border:3px solid #fff;
  transition:transform .55s var(--ease), border-radius .55s;
}
.tl-i:hover .tl-n{transform:scale(1.09) rotate(-7deg); border-radius:50%}
.tl-c{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2vw,26px); transition:transform .55s var(--ease), box-shadow .55s, border-color .5s}
.tl-i:hover .tl-c{transform:translateX(6px); box-shadow:var(--sh-2); border-color:var(--pousse)}
.tl-c h3{font-size:17.5px; margin-bottom:6px}
.tl-c p{font-size:14.2px; color:var(--muted); margin:0}

/* ---------- ARTICLE ---------- */
.art{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(26px,3.6vw,54px); align-items:start}
.art-b{min-width:0}
.art-b>figure{margin:0 0 clamp(24px,3vw,38px); border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
.art-b h2{font-size:clamp(21px,2.5vw,31px); margin:clamp(30px,3.4vw,46px) 0 14px; position:relative; padding-left:18px}
.art-b h2::before{content:''; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; border-radius:3px; background:linear-gradient(var(--green),var(--gold))}
.art-b h3{font-size:clamp(17px,1.7vw,21px); margin:26px 0 10px; color:var(--green-d)}
.art-b p{font-size:16px; line-height:1.78; color:var(--body)}
.art-b ul{margin:0 0 1.2em; padding-left:0; list-style:none; display:grid; gap:10px}
.art-b ul li{position:relative; padding-left:29px; font-size:15.4px; line-height:1.66}
.art-b ul li::before{
  content:''; position:absolute; left:0; top:.52em; width:15px; height:15px; border-radius:50%;
  background:var(--soft); border:1.6px solid var(--pousse);
}
.art-b ul li::after{content:''; position:absolute; left:5px; top:calc(.52em + 4px); width:5px; height:5px; border-radius:50%; background:var(--green)}
.art-b strong{color:var(--ink); font-weight:600}
.aside{position:sticky; top:calc(var(--hdr) + 18px); display:grid; gap:18px}
.abox{background:var(--soft-2); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.abox h4{font-size:15px; margin-bottom:14px; letter-spacing:.02em}
.abox .lst{display:grid; gap:3px}
.abox .lst a{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:11px; font-size:13.6px; font-weight:500; color:var(--ink-2); transition:all .35s var(--ease)}
.abox .lst a:hover,.abox .lst a.act{background:#fff; color:var(--green-d); transform:translateX(3px)}
.abox .lst a .dot{width:5px; height:5px; border-radius:50%; background:var(--pousse); flex:none}
.abox.cta{background:linear-gradient(150deg,var(--green),var(--mbay)); border:0; color:#fff}
.abox.cta h4{color:#fff} .abox.cta p{color:rgba(255,255,255,.86); font-size:14px}

/* ---------- CONTACT / FORMULAIRE ---------- */
.fld{display:grid; gap:7px; margin-bottom:16px}
.fld label{font-size:12.6px; font-weight:600; color:var(--ink-2); letter-spacing:.04em; text-transform:uppercase}
.fld label .req{color:var(--gold-d)}
.fld input,.fld select,.fld textarea{
  width:100%; padding:13px 16px; border-radius:14px; border:1.6px solid var(--line);
  background:#fff; font:inherit; font-size:14.8px; color:var(--ink); transition:all .35s var(--ease);
}
.fld textarea{min-height:128px; resize:vertical; line-height:1.62}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0; border-color:var(--green); box-shadow:0 0 0 4px rgba(96,155,22,.13)}
.fld input::placeholder,.fld textarea::placeholder{color:#A9B5A0}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  padding:9px 16px; border-radius:9px; border:1.6px solid var(--line); background:#fff;
  font-size:13.4px; font-weight:500; color:var(--ink-2); cursor:pointer;
  transition:all .35s var(--ease); user-select:none;
}
.chip:hover{border-color:var(--pousse); transform:translateY(-2px)}
.chip.on{background:var(--green); border-color:var(--green); color:#fff}
.formcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(22px,3vw,42px); box-shadow:var(--sh-2)}
.note{font-size:12.4px; color:var(--muted); line-height:1.55}
.okmsg{display:none; padding:15px 18px; border-radius:14px; background:var(--soft); border:1.6px solid var(--pousse); color:var(--green-d); font-size:14px; font-weight:500; margin-top:14px}
.okmsg.show{display:block; animation:pgIn .5s var(--ease) both}

/* ---------- INFO TILES ---------- */
.itile{display:flex; gap:15px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; transition:all .5s var(--ease); height:100%}
.itile:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--pousse)}
.itile .ic-b{width:46px; height:46px; border-radius:14px; margin:0; flex:none}
.itile h4{font-size:13px; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); margin-bottom:5px; font-weight:700}
.itile p{margin:0; font-size:15px; color:var(--ink); font-weight:500; line-height:1.5}
.itile a:hover{color:var(--green-d)}

/* ---------- ÉCOSYSTÈME ---------- */
.eco{
  position:relative; border-radius:var(--r-l); overflow:hidden; padding:clamp(26px,3.2vw,44px);
  background:#fff; border:1.6px solid var(--line); height:100%;
  display:flex; flex-direction:column; gap:15px;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
}
.eco:hover{transform:translateY(-8px); box-shadow:var(--sh-3); border-color:var(--pousse)}
.eco .lg{height:52px; width:auto; object-fit:contain; align-self:flex-start}
.eco .rolename{font-size:11.2px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-d)}
.eco p{font-size:14.6px; color:var(--muted); margin:0}
.eco ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.eco li{display:flex; gap:9px; font-size:13.9px; line-height:1.5}
.eco li::before{content:'▪'; color:var(--pousse)}
.eco .lnk{margin-top:auto; padding-top:8px; font-size:13.4px; font-weight:600; color:var(--green-d); display:inline-flex; gap:7px; align-items:center}
.eco .lnk .ic{transition:transform .45s var(--ease)}
.eco:hover .lnk .ic{transform:translateX(5px)}

/* ---------- BANDE CTA ---------- */
.cta-band{position:relative; overflow:hidden; border-radius:var(--r-l); background:var(--mbay)}
.cta-band .bg{position:absolute; inset:0; z-index:0}
.cta-band .bg img{width:100%; height:100%; object-fit:cover}
.cta-band .bg::after{content:''; position:absolute; inset:0; background:linear-gradient(105deg,rgba(74,124,16,.92),rgba(130,188,44,.76))}
.cta-band > .in{position:relative; z-index:2; padding:clamp(34px,4.6vw,62px) clamp(22px,4vw,60px); color:#fff; display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center}
.cta-band h2{color:#fff; max-width:22ch}
.cta-band p{color:rgba(255,255,255,.88); margin:12px 0 0; max-width:56ch; font-size:15.6px}

/* ---------- GALERIE ---------- */
.gal{columns:3; column-gap:clamp(14px,1.8vw,22px)}
.gal figure{break-inside:avoid; margin:0 0 clamp(14px,1.8vw,22px); border-radius:var(--r); overflow:hidden; position:relative; border:1px solid var(--line); background:var(--soft)}
.gal img{width:100%; transition:transform 1.15s var(--ease), filter .6s}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:30px 18px 16px; color:#fff; font-size:13.8px; font-weight:600; line-height:1.4;
  background:linear-gradient(transparent,rgba(22,36,12,.9)); transform:translateY(8px); opacity:.94; transition:all .55s var(--ease);
}
.gal figure:hover figcaption{transform:none; opacity:1}

.lrule{display:flex; align-items:center; gap:clamp(16px,3vw,36px); max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gut); padding-block:clamp(26px,3.4vw,44px)}
.lrule span{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)}
.lrule img{height:clamp(26px,3vw,36px); width:auto; opacity:.62; transition:opacity .5s}
.lrule:hover img{opacity:1}


/* ---------- FOOTER ---------- */
.ftr{background:var(--ink); color:rgba(255,255,255,.68); margin-top:clamp(40px,5vw,72px); position:relative; overflow:hidden}
.ftr::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--green),var(--gold),var(--pousse))}
.ftr-g{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.35fr; gap:clamp(24px,3.2vw,46px); padding-block:clamp(44px,5.4vw,72px)}
.ftr h5{color:#fff; font-size:12.4px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; margin-bottom:18px}
.ftr a{transition:color .3s, transform .3s var(--ease); display:inline-block}
.ftr a:hover{color:var(--gold-l)}
.ftr .lst{display:grid; gap:10px; font-size:14.2px}
.ftr .lst a:hover{transform:translateX(4px)}
.ftr .logo{height:46px; width:auto; margin-bottom:18px}
.ftr p{font-size:14.2px; line-height:1.7; margin:0 0 14px}
.soc{display:flex; gap:9px; margin-top:6px}
.soc a{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#fff;
  transition:all .45s var(--ease);
}
.soc a:hover{transform:translateY(-4px); background:var(--green); border-color:var(--green); color:#fff}
.soc a.yt:hover{background:#FF0033; border-color:#FF0033}
.soc a.ig:hover{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888); border-color:#DC2743}
.soc a.fb:hover{background:#1877F2; border-color:#1877F2}
.ftr-bt{border-top:1px solid rgba(255,255,255,.1); padding-block:22px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.8px}
.ftr .eco-mini{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.ftr .eco-mini a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:100px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:12.4px; color:#fff;
}
.ftr .eco-mini a:hover{background:rgba(255,255,255,.13); transform:translateY(-2px)}
.ftr .eco-mini img{height:23px; width:auto}

/* ---------- WHATSAPP FLOTTANT + TOP ---------- */
.fab{position:fixed; right:calc(var(--gut)*.55); bottom:22px; z-index:700; display:grid; gap:11px; justify-items:center}
.fab a,.fab button{
  position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:#25D366; transition:transform .5s var(--ease);
}
.fab .top{background:var(--ink); opacity:0; pointer-events:none; transform:scale(.6)}
.fab .top.on{opacity:1; pointer-events:auto; transform:none}
.fab a:hover,.fab button:hover{transform:translateY(-4px) scale(1.06)}
.fab a.wa::after{
  content:''; position:absolute; width:52px; height:52px; border-radius:50%; border:2px solid #25D366;
  animation:ping 2.4s var(--ease) infinite;
}
.fab a.sa{background:#fff; border:1px solid var(--line); padding:7px}
.fab a.sa img{width:100%; height:auto; object-fit:contain}
.fab .lab{
  position:absolute; right:60px; top:50%; translate:0 -50%; white-space:nowrap;
  background:var(--ink); color:#fff; font-size:12px; font-weight:600; padding:7px 13px; border-radius:9px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease);
  transform:translateX(6px);
}
.fab a:hover .lab{opacity:1; transform:translateX(0)}
@keyframes ping{0%{transform:scale(1); opacity:.7}100%{transform:scale(1.85); opacity:0}}

/* ---------- DIVERS ---------- */
.pill{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px; background:var(--soft); border:1px solid var(--line); font-size:12.6px; font-weight:600; color:var(--green-d)}
.pill.g{background:#FEF7DF; border-color:#F6E2A0; color:var(--gold-d)}
.divider{height:1px; background:var(--line); margin-block:clamp(28px,3.4vw,48px)}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; z-index:0}
.blob.a{width:420px; height:420px; background:rgba(139,197,63,.3); top:-140px; right:-110px}
.blob.b{width:360px; height:360px; background:rgba(245,192,23,.22); bottom:-130px; left:-100px}
.sec>.wrap{position:relative; z-index:1}
.qt{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.8vw,36px); font-size:16.4px; line-height:1.72; color:var(--ink-2); font-weight:500;
}
.qt::before{content:'“'; position:absolute; top:-6px; left:18px; font-size:76px; color:var(--pousse); opacity:.35; font-family:Georgia,serif; line-height:1}
.qt .by{display:block; margin-top:14px; font-size:13.4px; color:var(--muted); font-weight:500}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .art{grid-template-columns:1fr}
  .aside{position:static; grid-template-columns:1fr 1fr; display:grid}
  .g5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1190px){
  :root{--hdr:74px}
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cta-band > .in{grid-template-columns:1fr}
}
@media (max-width:1060px){
  .pk-wide{flex-direction:column}
  .pk-wide .ph{flex:none; aspect-ratio:16/9; position:relative}
  .pk-wide ul{grid-template-columns:1fr}
  .pk-wide .bd .btn{width:100%; align-self:stretch}
}
@media (max-width:900px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:30px}
  .split.r>*:first-child{order:0}
  .ftr-g{grid-template-columns:1fr 1fr}
  .gal{columns:2}
  .hero h1{max-width:100%}
}
@media (max-width:680px){
  .btn{white-space:normal}
  :root{--gut:20px; --r:18px; --r-l:24px; --sec:clamp(48px,10vw,66px)}
  body{font-size:15.4px}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .aside{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .gal{columns:1}
  .ftr-g{grid-template-columns:1fr; gap:32px}
  .tl::before{left:21px}
  .tl-i{grid-template-columns:44px 1fr; gap:14px}
  .tl-n{width:44px; height:44px; font-size:15px; border-radius:14px}
  .btn{padding:13px 24px; font-size:14px}
  .btn-row{gap:10px}
  .btn-row .btn{flex:1 1 auto; min-width:0}
  .hero-badges span{font-size:12px; padding:8px 14px}
  .mq-i{width:150px; height:82px; margin-inline:7px}
  .mq-i img{max-height:44px}
  .fab a,.fab button{width:47px; height:47px}
  .fab a.wa::after{width:47px; height:47px}
  .fab .lab{display:none}
  .art-b h2{padding-left:14px}
  .abox{padding:20px}
}
@media (max-width:400px){
  :root{--gut:16px}
  .stats{grid-template-columns:1fr}
}


/* ============================================================
   GLOBE TERRESTRE INTERACTIF
   ============================================================ */
.gl{position:relative; width:100%; max-width:clamp(300px,36vw,470px); margin-inline:auto}
.gl-stage{position:relative; width:100%; aspect-ratio:1/1; touch-action:none}
.gl-c{display:block; width:100%; height:100%}

/* infobulle de survol */
.gl-tip{
  position:absolute; z-index:6; pointer-events:none; translate:-50% -100%;
  padding:5px 11px; border-radius:8px; white-space:nowrap;
  background:rgba(22,36,12,.92); color:#fff; font-size:12px; font-weight:600; letter-spacing:.01em;
  opacity:0; transition:opacity .2s linear;
}
.gl-tip.on{opacity:1}

/* commandes de zoom */
.gl-z{position:absolute; right:6px; top:6px; z-index:6; display:grid; gap:5px}
.gl-zb{
  width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  transition:background .3s, color .3s, opacity .3s, transform .3s var(--ease);
}
.gl-zb svg{width:16px; height:16px}
.gl-zb:hover{background:var(--soft); color:var(--green-d); transform:translateY(-1px)}
.gl-zb:disabled{opacity:.34; pointer-events:none}

/* onglets pays — une seule ligne */
.gl-t{
  display:flex; flex-wrap:nowrap; gap:5px; justify-content:flex-start; align-items:center;
  margin-top:14px; margin-inline:-38px; padding-inline:38px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-block:2px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.gl-t.fit{justify-content:center; overflow:visible; -webkit-mask-image:none; mask-image:none}
.gl-tw{position:relative}
.gl-ar{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--ease);
}
.gl-ar.on{opacity:1; pointer-events:auto}
.gl-ar:hover{transform:translateY(-50%) scale(1.08); color:var(--green-d)}
.gl-ar svg{width:14px; height:14px}
.gl-ar.l{left:-2px} .gl-ar.r{right:-2px}
.gl-t::-webkit-scrollbar{display:none}
/* 8 onglets : une seule ligne, glissante sur écran étroit */
.gl-tb{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px; border-radius:9px; white-space:nowrap;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  font-size:11.4px; font-weight:600; letter-spacing:.002em;
  transition:background .32s var(--ease), color .32s, border-color .32s, transform .32s var(--ease);
}
.gl-tb span{font-size:12.5px; line-height:1}
.gl-tb:hover{border-color:var(--pousse); background:var(--soft-2); transform:translateY(-2px)}
.gl-tb.on{background:var(--green); border-color:var(--green); color:#fff}

/* fiche pays */
.gl-p{
  position:absolute; left:50%; bottom:0; translate:-50% 0; width:min(372px,100%); z-index:7;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:13px 15px 12px; box-shadow:0 18px 44px -20px rgba(22,36,12,.3);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.975); transform-origin:bottom center;
  transition:opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
  text-align:left;
}
.gl-p.open{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.gl-hd{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.gl-fl{font-size:25px; line-height:1}
.gl-hd h4{font-size:15.6px; margin:0; color:var(--ink)}
.gl-role{display:block; font-size:10.2px; line-height:1.3; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gold-d)}
.gl-x{margin-left:auto; flex:none; width:25px; height:25px; border-radius:8px; font-size:18px; line-height:1;
  color:var(--muted); background:var(--soft); transition:background .3s, color .3s}
.gl-x:hover{background:var(--line); color:var(--ink)}
.gl-rows{display:grid; gap:1px; background:var(--line-2); border-radius:11px; overflow:hidden; border:1px solid var(--line-2)}
.gl-r{display:flex; align-items:baseline; gap:9px; padding:6px 10px; background:#fff}
.gl-l{flex:0 0 76px; font-size:9.8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.gl-v{flex:1; font-size:12.7px; line-height:1.4; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.gl-v b{color:var(--green-d); font-weight:700}
.gl-v i{font-style:normal; font-size:10.4px; color:var(--muted); letter-spacing:.03em}
.gl-clim{margin:9px 0 0; font-size:11.8px; line-height:1.45; color:var(--muted)}
.gl-clim b{display:block; font-size:9.8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--green-d); margin-bottom:3px}

/* chiffres sous le globe */
.gl-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px}
.gl-st{
  text-align:center; padding:15px 9px; border-radius:12px;
  background:#fff; border:1px solid var(--line);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.gl-st:hover{border-color:var(--pousse); transform:translateY(-3px)}
.gl-st .v{font-size:clamp(20px,2.1vw,26px); font-weight:900; color:var(--green); line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.gl-st .l{font-size:10.4px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-top:7px; line-height:1.3}

/* le globe dans le bandeau d’accueil */
.hero-in{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4vw,64px); align-items:center}
.hero-globe{position:relative; min-width:0}
.hero .hero-txt{min-width:0}

/* globe pleine largeur (page Nos réalisations) */
.gl-wide{max-width:620px; margin-inline:auto}
.gl-wide .gl{max-width:620px}
.gl-wide .gl-t{margin-inline:-320px; padding-inline:0}

@media (max-width:1060px){
  /* une colonne : même respiration au-dessus du globe qu’en dessous */
  .hero-in{grid-template-columns:1fr; gap:clamp(54px,7.4vw,84px); padding-block:clamp(54px,7.4vw,84px)}
  .gl{max-width:430px}
  .gl-t{margin-inline:-16px}
}
@media (max-width:680px){
  .gl{max-width:320px}
  .gl-t{margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); justify-content:flex-start; margin-top:14px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .gl-tb{padding:7px 11px; font-size:11.6px}
  .gl-p{width:100%; padding:12px 14px 11px}
  .gl-l{flex-basis:70px; font-size:9.4px}
  .gl-v{font-size:12.2px}
  .gl-stats{gap:8px; margin-top:18px}
  .gl-st{padding:12px 5px; border-radius:10px}
  .gl-st .l{font-size:9.4px; letter-spacing:.03em}
  .gl-z{right:4px; top:4px}
  .gl-zb{width:31px; height:31px}
}

/* ---------- Écosystème mis en avant ---------- */
.eco-band{background:linear-gradient(180deg,var(--cream),var(--bg))}
.eco-c{
  display:flex; flex-direction:column; gap:13px; height:100%;
  background:#fff; border:1.4px solid var(--line); border-radius:var(--r-l);
  padding:clamp(24px,2.8vw,36px);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s;
}
.eco-c:hover{transform:translateY(-7px); box-shadow:var(--sh-2); border-color:var(--pousse)}
.eco-l{height:clamp(38px,3.4vw,50px); width:auto; object-fit:contain; align-self:flex-start}
.eco-c p{margin:0; font-size:14.6px; color:var(--muted); line-height:1.62}
.eco-a{margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:13.6px; font-weight:600; color:var(--green-d)}
.eco-a .ic{transition:transform .45s var(--ease)}
.eco-c:hover .eco-a .ic{transform:translateX(5px)}
.eco-a.ext,.lnk.ext{color:var(--gold-d)}

/* ---------- Pack Full Option ---------- */
.full-band{background:
  radial-gradient(120% 90% at 82% 8%, rgba(245,192,23,.14), transparent 58%),
  radial-gradient(100% 80% at 8% 92%, rgba(139,197,63,.16), transparent 60%), var(--soft-2)}
.fi{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px); height:100%;
  transition:transform .55s var(--ease), box-shadow .55s, border-color .5s}
.fi:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--gold)}
.fi-n{display:block; font-size:12.4px; font-weight:800; letter-spacing:.16em; color:var(--gold-d); margin-bottom:11px}
.fi h3{font-size:17px; margin-bottom:7px}
.fi p{margin:0; font-size:14.2px; color:var(--muted); line-height:1.6}

/* ---------- verbes de la page formation ---------- */
.vb{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:15px 8px; border:1px solid var(--line); border-radius:16px; background:var(--soft-2);
  font-size:12.4px; font-weight:700; letter-spacing:.04em; color:var(--ink-2);
  transition:all .45s var(--ease)}
.vb:hover{background:#fff; border-color:var(--pousse); transform:translateY(-4px)}
.vb-i{color:var(--green); display:grid; place-items:center}
.vb-i svg{width:24px; height:24px}

/* ---------- renvoi vers Sunumbaye Academy ---------- */
.acad{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3.4vw,52px); align-items:center;
  background:var(--soft); border:1.4px solid var(--line); border-radius:var(--r-l);
  padding:clamp(26px,3.4vw,50px)}
.acad-l{height:clamp(52px,5vw,78px); width:auto; object-fit:contain}
.acad h2{font-size:clamp(22px,2.6vw,32px); margin-bottom:10px}
.acad p{margin:0}

/* ---------- globe pleine largeur ---------- */
.gl-wide{max-width:620px; margin-inline:auto}
.gl-wide .gl{max-width:620px}
.gl-wide .gl-t{margin-inline:-320px; padding-inline:0}

@media (max-width:820px){
  .acad{grid-template-columns:1fr; text-align:center; justify-items:center}
  .acad .btn-row{justify-content:center}
}
@media (max-width:680px){
  .vb{padding:12px 5px; font-size:11.4px}
  .vb-i svg{width:21px; height:21px}
}

/* ── diaporama d'accueil ── */
.hero-bg .sl{position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease}
.hero-bg .sl.on{opacity:1}
.hero-bg .sl img{width:100%; height:100%; object-fit:cover; animation:kb 22s ease-in-out infinite alternate;
  filter:saturate(1.06)}
.hero-dots{position:absolute; left:0; right:0; bottom:22px; z-index:3; display:flex; gap:8px;
  justify-content:center}
.hero-dots button{width:30px; height:3px; border:0; padding:0; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.34); transition:background .3s ease, width .3s ease}
.hero-dots button.on{background:var(--gold); width:46px}

/* ── globe 3D ── */
.gl-stage canvas{display:block; width:100%; height:100%; border-radius:50%}
.gl.actif .gl-stage{outline:2px solid var(--pousse); outline-offset:4px; border-radius:50%}
.gl-zoom{position:absolute; right:4px; top:4px; z-index:6; display:grid; gap:5px}
.gl-zoom button{width:29px; height:29px; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:15px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .2s, transform .2s}
.gl-zoom button:hover{background:var(--soft); transform:translateY(-1px)}
.gl-card{position:absolute; left:50%; bottom:8px; transform:translateX(-50%) translateY(6px);
  width:min(330px,94%); max-height:76%; overflow:auto; z-index:8; background:#fff;
  border:1px solid var(--line); border-radius:13px; padding:15px 16px 16px; text-align:left;
  opacity:0; transition:opacity .35s ease, transform .35s var(--ease)}
.gl-card:not([hidden]){opacity:1; transform:translateX(-50%) translateY(0)}
.gl-card::-webkit-scrollbar{width:0}
.gl-card .gl-badge{font-size:9.6px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); margin-bottom:5px}
.gl-card h4{margin:0 0 4px; font-size:16px; color:var(--ink)}
.gl-card .gl-role{display:block; font-size:11.6px; line-height:1.4; font-weight:500; letter-spacing:0;
  color:var(--muted); text-transform:none; margin:0 0 11px}
.gl-card dl{margin:0; display:grid; gap:6px}
.gl-card dl>div{display:flex; justify-content:space-between; gap:12px; font-size:12.6px;
  padding-bottom:5px; border-bottom:1px solid var(--line)}
.gl-card dl>div:last-child{border-bottom:0; padding-bottom:0}
.gl-card dt{color:var(--muted)} .gl-card dd{margin:0; font-weight:650; color:var(--ink); text-align:right}
.gl-meteo:not(:empty){margin-top:11px; padding-top:10px; border-top:1px solid var(--line)}
.gl-mt{font-size:12.8px; color:var(--ink)} .gl-mt b{color:var(--green)}
.gl-ms{font-size:11.4px; color:var(--muted); margin-top:3px}
.gl-card .gl-x{position:absolute; top:9px; right:9px; margin:0; width:25px; height:25px;
  border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--muted);
  font-size:17px; line-height:1; cursor:pointer}
.gl-card .gl-x:hover{background:var(--soft); color:var(--ink)}

/* ── couche d'interaction ── */
.rprog{position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none}
.rprog i{display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--pousse),var(--gold));
  transform:scaleX(0); transform-origin:0 50%; will-change:transform}
.card, .ic-card, .pk, .gl-st, .v-card, .r-card{
  --rx:0deg; --ry:0deg;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s var(--ease), border-color .3s ease}
.card.tlt, .ic-card.tlt, .pk.tlt, .gl-st.tlt, .v-card.tlt, .r-card.tlt{transition:transform .12s linear}
.btn{--mx:0px; --my:0px; transition:translate .35s var(--ease), background .25s ease, color .25s ease;
  translate:var(--mx) var(--my)}
.volet{clip-path:inset(0 0 100% 0); transform:scale(1.06); transition:clip-path 1s var(--ease-io),
  transform 1.3s var(--ease-io)}
.volet.vu{clip-path:inset(0 0 0 0); transform:scale(1)}
.gotop{position:fixed; left:22px; bottom:22px; z-index:60; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:var(--green); display:grid; place-items:center;
  cursor:pointer; opacity:0; visibility:hidden; translate:0 12px;
  transition:opacity .35s ease, translate .35s var(--ease), visibility .35s, background .25s ease}
.gotop.on{opacity:1; visibility:visible; translate:0 0}
.gotop:hover{background:var(--green); color:#fff; border-color:var(--green)}
.gotop svg{width:19px; height:19px}
@media (max-width:760px){ .gotop{left:14px; bottom:88px; width:38px; height:38px} }
@media (prefers-reduced-motion: reduce){
  .volet{clip-path:none; transform:none}
  .card,.ic-card,.pk,.gl-st,.v-card,.r-card,.btn{transform:none; translate:none}
}

/* hauteur de la section d'accueil tenue sous un écran */
@media (min-width:961px){
  .hero-in{padding-block:clamp(54px,6.6vw,100px)}
  .hero{min-height:auto}
}
@media (max-width:960px){ .gl{max-width:min(460px,86vw)} }

/* ── titres lettre par lettre ── */
h2 .w{display:inline-block; white-space:nowrap}
h2 .c{display:inline-block; opacity:0; transform:translateY(.5em) rotate(4deg);
  transition:opacity .5s var(--ease-io), transform .6s var(--ease-io);
  transition-delay:calc(min(var(--n) * 14, 260) * 1ms)}
h2.in .c, .in h2 .c{opacity:1; transform:none}

/* ── parallaxe des visuels ── */
.ph img, figure img{--py:0px; translate:0 var(--py)}

/* ── transition de page ── */
.xfade{position:fixed; inset:0; z-index:200; background:var(--ink); opacity:0;
  pointer-events:none; transition:opacity .34s ease}
body.part .xfade{opacity:1}

/* ── survol des visuels ── */
.ph{overflow:hidden}
.ph img{transition:scale .7s var(--ease-io), translate .3s linear, filter .5s ease}
.card:hover .ph img, .r-card:hover .ph img, a:hover>.ph img{scale:1.06; filter:saturate(1.12)}

/* ── arrivée des vidéos en direct ── */
.vd-app{opacity:0; transform:translateY(16px) scale(.98);
  transition:opacity .6s var(--ease-io), transform .7s var(--ease-io);
  transition-delay:calc(var(--i) * 55ms)}
.vd-app.in{opacity:1; transform:none}

/* ============================================================
   GALERIE — filtres, grille, visionneuse
   ============================================================ */
.gf{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:clamp(22px,2.8vw,34px)}
.gf-c{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px;
  border:1px solid var(--line); background:#fff; color:var(--body); font:inherit; font-size:13.6px;
  font-weight:600; cursor:pointer; transition:background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease)}
.gf-c i{font-style:normal; font-size:11.4px; font-weight:700; padding:1px 7px; border-radius:100px;
  background:var(--soft); color:var(--muted); transition:background .35s, color .35s}
.gf-c:hover{border-color:var(--pousse); transform:translateY(-2px)}
.gf-c.on{background:var(--green); border-color:var(--green); color:#fff}
.gf-c.on i{background:rgba(255,255,255,.22); color:#fff}

.gg{display:grid; gap:clamp(9px,1.1vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,16vw,206px),1fr))}
.gi{position:relative; display:block; padding:0; border:0; background:var(--soft); cursor:pointer;
  border-radius:var(--r-s); overflow:hidden; aspect-ratio:16/9; font:inherit;
  transition:transform .5s var(--ease), box-shadow .5s, opacity .35s}
.gi img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease), filter .5s}
.gi:hover{transform:translateY(-3px); box-shadow:var(--sh-2); z-index:2}
.gi:hover img{transform:scale(1.07)}
.gi:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.gi-o{position:absolute; inset:auto 0 0 0; padding:26px 11px 9px; text-align:left;
  background:linear-gradient(transparent,rgba(12,20,6,.82)); opacity:0; transition:opacity .4s}
.gi:hover .gi-o, .gi:focus-visible .gi-o{opacity:1}
.gi-l{display:block; color:#fff; font-size:12px; line-height:1.34; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.gi.off{display:none}
.gg.calme .gi{animation:giIn .5s var(--ease) both}
@keyframes giIn{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}

.lb{position:fixed; inset:0; z-index:1000; background:rgba(8,14,4,.94); display:grid;
  place-items:center; padding:clamp(14px,3vw,44px); opacity:0; animation:lbIn .3s forwards}
@keyframes lbIn{to{opacity:1}}
.lb[hidden]{display:none}
.lb-f{margin:0; max-width:min(1400px,100%); max-height:100%; display:flex; flex-direction:column; gap:12px; padding-bottom:62px}
.lb-f img{max-width:100%; max-height:calc(100vh - 230px); width:auto; height:auto;
  object-fit:contain; border-radius:var(--r-s); background:#0c1406; display:block; margin-inline:auto}
.lb-f figcaption{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:baseline; justify-content:center;
  color:#EAF2DD; font-size:14.4px; text-align:center}
.lb-meta{font-size:11px; text-transform:uppercase; letter-spacing:.9px; font-weight:700;
  color:var(--ink); background:var(--gold); padding:3px 9px; border-radius:100px}
.lb-x,.lb-p,.lb-n{position:absolute; border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px); border-radius:50%; display:grid; place-items:center; transition:background .3s, transform .3s}
.lb-x{top:clamp(12px,2vw,24px); right:clamp(12px,2vw,24px); width:44px; height:44px; font-size:27px; line-height:1}
.lb-p,.lb-n{top:50%; margin-top:-26px; width:52px; height:52px; font-size:32px; line-height:1}
.lb-p{left:clamp(8px,1.6vw,22px)} .lb-n{right:clamp(8px,1.6vw,22px)}
.lb-x:hover,.lb-p:hover,.lb-n:hover{background:var(--green); transform:scale(1.08)}
.lb-dl{position:absolute; left:50%; translate:-50% 0; bottom:clamp(14px,2.4vw,26px);
  display:inline-flex; align-items:center; gap:9px; padding:11px 22px; border-radius:100px;
  background:var(--gold); color:var(--ink); font-weight:700; font-size:14px; text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s}
.lb-dl:hover{transform:translate(-50%,-2px); box-shadow:0 10px 26px rgba(245,192,23,.4)}
body.lbopen{overflow:hidden}

@media (max-width:760px){
  .gf{gap:7px} .gf-c{padding:8px 13px; font-size:12.8px}
  .gg{gap:7px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .gi-o{opacity:1; background:linear-gradient(transparent,rgba(12,20,6,.7)); padding:20px 9px 7px}
  .gi-l{font-size:11px; -webkit-line-clamp:1}
  .lb-p,.lb-n{width:42px; height:42px; font-size:26px; margin-top:-21px}
  .lb-f img{max-height:calc(100vh - 240px)}
}


/* ---------- LISIBILITÉ SUR LES BANDEAUX ÉCLAIRCIS (15/10/2026) ---------- */
.hero h1,.phero h1,.cta-band h2{text-shadow:none}
.hero .lead,.phero p,.cta-band p{text-shadow:none}
.hero-badges span{background:rgba(18,34,6,.26); border-color:rgba(255,255,255,.34)}

/* ---------- ANIMATION DU LOGO, UNE PAR PAGE ---------- */
.plogo{position:absolute; right:clamp(16px,4vw,54px); top:50%; translate:0 -50%; z-index:1;
  width:clamp(96px,11vw,164px); opacity:0; pointer-events:none}
.plogo svg{display:block; width:100%; height:auto; overflow:visible}
.plogo .arc,.plogo .leafline{fill:none; stroke-linecap:round; stroke-linejoin:round}
.plogo .arc{stroke:#F5C017; stroke-width:5.5; stroke-dasharray:240; stroke-dashoffset:240}
.plogo .leafline{stroke:#fff; stroke-width:4.2; stroke-dasharray:190; stroke-dashoffset:190}
.plogo .blob{fill:#fff; opacity:0; transform-origin:52px 54px}
.plogo{animation:plShow .9s var(--ease) .25s both}
.plogo .arc{animation:plDraw 1.5s var(--ease-io) .35s both}
.plogo .leafline{animation:plDraw2 1.4s var(--ease-io) .7s both}
.plogo .blob{animation:plPop .8s var(--ease) 1.05s both}
@keyframes plShow{from{opacity:0; transform:translateY(10px)}to{opacity:.92; transform:none}}
@keyframes plDraw{to{stroke-dashoffset:0}}
@keyframes plDraw2{to{stroke-dashoffset:0}}
@keyframes plPop{0%{opacity:0; scale:.55}60%{opacity:1; scale:1.08}100%{opacity:1; scale:1}}
@media (max-width:820px){.plogo{display:none}}
@media (prefers-reduced-motion:reduce){
  .plogo{opacity:.9!important; animation:none!important}
  .plogo .arc,.plogo .leafline{stroke-dashoffset:0!important; animation:none!important}
  .plogo .blob{opacity:1!important; animation:none!important}
}

/* ---------- BOUTON FLOTTANT SUNUMBAYE ACADEMY ---------- */
.fab a.ac{background:var(--gold); color:#3A2C00}
.fab a.ac:hover{background:var(--gold-d); color:#fff}

/* ---------- FORMULAIRE DÉTAILLÉ (15/10/2026) ---------- */
.fsec{border-top:1px solid var(--line); margin-top:30px; padding-top:26px}
.fsec:first-of-type{border-top:0; margin-top:0; padding-top:0}
.fsec-h{display:flex; align-items:center; gap:13px; margin-bottom:18px}
.fsec-n{flex:none; width:30px; height:30px; border-radius:9px; background:var(--green); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px}
.fsec-h h3{margin:0; font-size:17px; letter-spacing:-.01em}
.fsec-h span{display:block; font-size:12.6px; color:var(--muted); font-weight:400; margin-top:2px; text-transform:none; letter-spacing:0}
.f3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 16px}
.fld .hint{font-size:12.2px; color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; margin-top:-3px}
.opts{display:flex; flex-wrap:wrap; gap:9px}
.opt{position:relative}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:9px;
  border:1.6px solid var(--line); background:#fff; font-size:13.4px; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:all .3s var(--ease); user-select:none}
.opt span::before{content:''; width:9px; height:9px; border-radius:3px; border:1.6px solid var(--line); flex:none; transition:all .3s}
.opt input:checked + span{background:var(--green); border-color:var(--green); color:#fff}
.opt input:checked + span::before{background:var(--gold); border-color:var(--gold)}
.opt input:focus-visible + span{box-shadow:0 0 0 4px rgba(96,155,22,.18)}
.opt span:hover{border-color:var(--pousse)}
.fcond{display:none; border-left:3px solid var(--pousse); padding-left:18px; margin:4px 0 16px}
.fcond.on{display:block; animation:pgIn .45s var(--ease) both}
.fbar{padding-top:20px; margin-top:14px; border-top:1px solid var(--line)}
.fprog{height:4px; border-radius:3px; background:var(--soft); overflow:hidden; margin-bottom:14px}
.fprog i{display:block; height:100%; width:0; background:var(--green); transition:width .4s var(--ease)}
.fprog-l{font-size:12.2px; color:var(--muted); margin-bottom:8px; display:flex; justify-content:space-between}
.fshort{background:var(--soft); border:1.6px solid var(--pousse); border-radius:var(--r); padding:22px 24px}
.fshort h3{margin:0 0 4px; font-size:16px}
.fshort p{margin:0 0 16px; font-size:13.6px; color:var(--muted)}
.ferr{display:none; padding:13px 16px; border-radius:12px; background:#FDF1E7; border:1.6px solid var(--gold-d);
  color:#7A4A00; font-size:13.4px; font-weight:500; margin-top:12px}
.ferr.show{display:block}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"],.fld textarea[aria-invalid="true"]{
  border-color:var(--gold-d); box-shadow:0 0 0 4px rgba(245,192,23,.16)}
@media (max-width:760px){.f3{grid-template-columns:1fr} .f2{grid-template-columns:1fr}}

/* ---------- panneau d'estimation du devis ---------- */
.estim{display:none; margin:0 0 26px; padding:22px 24px; border-radius:var(--r);
  background:linear-gradient(180deg,#F3F8EA,#FBFDF6); border:1px solid #CFE0B8}
.estim.on{display:block}
.estim-h{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:#5F8741; margin-bottom:8px}
.estim-v{font-size:clamp(22px,2.6vw,32px); font-weight:800; color:#4E7237; line-height:1.1;
  letter-spacing:-.01em}
.estim-l{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.6}
.estim-m{margin-top:10px; font-size:15px; color:var(--ink)}
.estim-n{margin-top:6px; font-size:14px; color:#8A6D00; font-weight:600}
.estim-f{margin-top:12px; padding-top:12px; border-top:1px solid #DCE8CC; font-size:13px;
  color:var(--muted); line-height:1.5}

/* ======================================================================
   Corrections WordPress et reprise des boutons flottants — 15/10/2026
   ====================================================================== */

/* l'entete passe sous la barre d'administration quand elle est affichee */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .hdr{top:46px}
}

/* ---------- boutons flottants : a gauche, libelles ecrits en clair ---------- */
.fab{
  left:clamp(14px,2.2vw,26px); right:auto;
  bottom:clamp(16px,2.4vw,26px);
  justify-items:start; gap:10px;
}
.fab a{
  width:auto; height:50px; min-width:50px; border-radius:25px;
  display:flex; align-items:center; gap:11px;
  padding:0 20px 0 14px;
  box-shadow:0 10px 30px -12px rgba(16,30,8,.5);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s var(--ease);
}
.fab a .lab{
  display:block; position:static; opacity:1; transform:none;
  background:none; padding:0; border-radius:0;
  font-size:13.2px; font-weight:700; letter-spacing:.005em;
  white-space:nowrap; color:inherit; pointer-events:none;
}
.fab a svg, .fab a img{flex:none}
.fab a.ac{background:var(--gold); color:var(--ink)}
.fab a.ac:hover{background:var(--gold-d,#E0A800)}
.fab a.sa{background:#fff; color:var(--ink); border:1px solid var(--line); padding:0 20px 0 9px}
.fab a.sa img{width:32px; height:32px; object-fit:contain}
.fab a.wa{background:#25D366; color:#fff}
.fab a:hover{transform:translateX(6px); box-shadow:0 16px 38px -14px rgba(16,30,8,.62)}
.fab a.wa::after{
  content:''; position:absolute; inset:0; width:auto; height:auto;
  border-radius:25px; border:2px solid #25D366;
  animation:ping 2.6s var(--ease) infinite; pointer-events:none;
}

/* le bouton de retour en haut quitte la colonne et va tout en bas a droite */
.fab .top{
  position:fixed; left:auto;
  right:clamp(14px,2.2vw,26px);
  bottom:clamp(16px,2.4vw,26px);
  width:48px; height:48px; border-radius:50%;
  padding:0; gap:0;
  box-shadow:0 12px 30px -12px rgba(16,30,8,.55);
}
.fab .top:hover{transform:translateY(-4px) scale(1.06)}

@media (max-width:620px){
  .fab a{height:44px; padding:0 15px 0 11px; gap:9px}
  .fab a .lab{font-size:11.6px}
  .fab a.sa img{width:26px; height:26px}
  .fab .top{width:44px; height:44px}
}

/* ======================================================================
   Bandeau d'accueil : un texte par diapositive, et une vue dediee au globe
   ====================================================================== */
.hero-in{min-height:clamp(420px,44vw,560px)}
.hero-txt{display:grid; position:relative}
.hero-txt .hs{
  grid-area:1 / 1;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(30px) scale(.985);
  transition:opacity .85s var(--ease), transform .85s var(--ease), visibility 0s linear .85s;
}
.hero-txt .hs.on{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none; transition-delay:0s;
}
/* entree en cascade des elements de la diapositive active */
.hero-txt .hs > *{opacity:0; transform:translateY(22px)}
.hero-txt .hs.on > *{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.hero-txt .hs.on > :nth-child(1){transition-delay:.06s}
.hero-txt .hs.on > :nth-child(2){transition-delay:.16s}
.hero-txt .hs.on > :nth-child(3){transition-delay:.28s}
.hero-txt .hs.on > :nth-child(4){transition-delay:.40s}

/* la vue globe : le globe seul, en grand, au centre */
.hero-bg .sl-g img{display:none}
.hero-bg .sl-g{background:linear-gradient(158deg,#2E5A0B 0%,#4C8413 46%,#7CB824 100%)}
.hero.g .hero-bg::after{opacity:.3}
.hero.g .hero-in{
  grid-template-columns:1fr; justify-items:center; text-align:center;
  gap:clamp(12px,2vw,24px);
}
.hero.g .hero-txt{max-width:760px; width:100%}
.hero.g .hero-txt .lead{margin-inline:auto}
.hero.g .kicker{justify-content:center}
.hero.g .kicker::before{display:none}
.hero-globe{transition:width .85s var(--ease), max-width .85s var(--ease)}
.hero.g .hero-globe{width:min(520px,78vw); max-width:520px}
.hero.g .gl-stats{opacity:0; max-height:0; overflow:hidden; margin:0; padding:0; pointer-events:none}
.gl-stats{transition:opacity .6s var(--ease), max-height .8s var(--ease); max-height:260px}
/* en vue globe la barre d'onglets garde son defilement naturel */
.hero.g .gl-t{justify-content:flex-start}

/* pastilles du diaporama : plus visibles, avec minuterie */
.hero-dots button{height:4px; background:rgba(255,255,255,.30)}
.hero-dots button.on{
  background:linear-gradient(90deg,var(--gold),#fff);
  width:52px;
}

@media (max-width:960px){
  .hero.g .hero-globe{width:min(440px,84vw)}
}
/* les mots du titre se rejouent a chaque changement de diapositive */
.hero-txt .hs .sr>i{transform:translateY(106%)}
.hero-txt .hs.on .sr>i{transform:translateY(0)}

/* ======================================================================
   Bandeau d'accueil : titres courts, voiles variés d'une vue à l'autre
   ====================================================================== */
/* titres plus mesurés, textes plus serrés */
.hero h1{font-size:clamp(27px,2.85vw,40px); max-width:17ch; line-height:1.1}
.hero .lead{max-width:50ch; margin-top:16px; font-size:clamp(14.6px,1.05vw,16px); line-height:1.6}
.hero.g h1{max-width:18ch}
.hero.g .lead{max-width:56ch}

/* le voile ne vient plus du fond commun : chaque vue a le sien */
.hero-bg::after{display:none}
.hero-bg .sl::after{content:''; position:absolute; inset:0; z-index:1}
/* 1 — vert de la maison */
.hero-bg .sl:nth-child(1)::after{
  background:
    radial-gradient(84% 94% at 0% 60%, rgba(62,106,12,.62), transparent 68%),
    linear-gradient(94deg, rgba(62,106,12,.56) 0%, rgba(86,140,18,.40) 40%, rgba(128,186,42,.18) 100%);
}
/* 2 — sombre, pour le contraste */
.hero-bg .sl:nth-child(2)::after{
  background:
    radial-gradient(90% 100% at 6% 58%, rgba(8,14,5,.84), transparent 72%),
    linear-gradient(96deg, rgba(10,18,6,.78) 0%, rgba(22,40,12,.52) 46%, rgba(40,66,20,.18) 100%);
}
/* 3 — vert profond */
.hero-bg .sl:nth-child(3)::after{
  background:
    radial-gradient(86% 96% at 2% 64%, rgba(26,54,10,.72), transparent 70%),
    linear-gradient(92deg, rgba(30,58,12,.64) 0%, rgba(72,124,18,.40) 44%, rgba(124,184,36,.14) 100%);
}
/* 4 — nuit froide, l'eau */
.hero-bg .sl:nth-child(4)::after{
  background:
    radial-gradient(88% 98% at 4% 60%, rgba(6,20,26,.82), transparent 72%),
    linear-gradient(96deg, rgba(8,26,34,.76) 0%, rgba(14,52,56,.50) 46%, rgba(48,110,96,.18) 100%);
}
/* 5 — terre et or */
.hero-bg .sl:nth-child(5)::after{
  background:
    radial-gradient(88% 96% at 3% 62%, rgba(28,20,4,.80), transparent 70%),
    linear-gradient(94deg, rgba(38,28,4,.72) 0%, rgba(96,72,8,.46) 44%, rgba(176,134,16,.16) 100%);
}
/* 6 — la vue du globe */
.hero-bg .sl-g::after{
  background:linear-gradient(158deg, rgba(20,44,6,.52) 0%, rgba(40,78,10,.30) 50%, rgba(96,155,22,.14) 100%);
}
/* les images restent sous le voile */
.hero-bg .sl img{position:relative; z-index:0}

/* ======================================================================
   Animations complémentaires — 15/10/2026
   ====================================================================== */

/* cascade au-delà des neuf rangs prévus */
.stg.in > *{transition-delay:calc(var(--i,0) * .075s)}

/* soulignement qui se trace sous les titres de section */
h2.smb-u{position:relative}
h2.smb-u::after{
  content:''; position:absolute; left:0; bottom:-.34em;
  width:clamp(52px,4.4vw,78px); height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--pousse));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s var(--ease) .18s;
}
.center h2.smb-u::after{left:50%; translate:-50% 0; transform-origin:center}
h2.smb-u.in::after{transform:scaleX(1)}
.center h2.smb-u.in::after{transform:scaleX(1)}

/* parallaxe douce des visuels */
.smb-px{transform:translate3d(0,var(--py,0),0) scale(1.05); transition:transform .25s linear, filter .6s var(--ease)}
.card:hover .smb-px{filter:saturate(1.12)}

/* les cartes à icône : l'icône s'anime avec la carte */
.ic-card .ic-b{transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.ic-card:hover .ic-b{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
.ic-card{transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s}
.ic-card:hover{transform:translateY(-6px)}

/* une lumière traverse les boutons au survol */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::after{
  content:''; position:absolute; inset:0 auto 0 -40%;
  width:36%; z-index:-1; transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transition:left .75s var(--ease);
}
.btn:hover::after{left:120%}

/* les tuiles de chiffres respirent à l'apparition */
.stats.in .stat .v, .gl-stats .gl-st .v{animation:smb-pop .9s var(--ease) both}
.stats.in .stat:nth-child(2) .v{animation-delay:.1s}
.stats.in .stat:nth-child(3) .v{animation-delay:.2s}
.stats.in .stat:nth-child(4) .v{animation-delay:.3s}
@keyframes smb-pop{
  0%{opacity:0; transform:translateY(14px) scale(.92)}
  60%{opacity:1; transform:translateY(-3px) scale(1.03)}
  100%{opacity:1; transform:none}
}

/* les cartes de la grille montent avec un léger retard, pas en bloc */
.g.stg.in > *{transition-duration:.95s}

/* fil d'Ariane et kicker : un trait qui pousse */
.kicker::before{transition:width .7s var(--ease) .1s}
.in .kicker::before{width:28px}

/* la page entre en fondu */
body.smb-anim #view{animation:smb-entree .7s var(--ease) both}
@keyframes smb-entree{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* le bouton de retour en haut tourne légèrement au survol */
.fab .top svg{transition:transform .5s var(--ease)}
.fab .top:hover svg{transform:translateY(-2px) scale(1.1)}

/* les liens du pied de page glissent */
.ftr .lst a{transition:transform .4s var(--ease), color .3s}
.ftr .lst a:hover{transform:translateX(5px)}

@media (prefers-reduced-motion: reduce){
  h2.smb-u::after{transform:none!important}
  .smb-px{transform:none!important}
  body.smb-anim #view{animation:none}
}

/* ======================================================================
   Reprises du 15/10/2026 (soir) : entête, boutons flottants
   ====================================================================== */

/* les deux boutons de l'entête ne doivent plus se toucher */
.hdr-cta{display:flex; align-items:center; gap:clamp(8px,.8vw,14px); flex:none}
.hdr-in{gap:clamp(12px,1.4vw,22px)}
@media (max-width:1180px){
  .hdr-cta{gap:8px}
  .btn.sm{padding:10px 14px; font-size:12.6px}
}

/* la police du site s'applique aussi aux boutons flottants */
.fab, .fab a, .fab button, .fab .lab{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-feature-settings:normal;
}

/* le bouton Academy porte son logo, sur fond clair pour le mettre en valeur */
.fab a.ac{
  background:#fff; color:var(--green-d);
  border:2px solid var(--gold);
  padding:0 20px 0 10px;
}
.fab a.ac:hover{background:#FFFBEF}
.fab a.ac img{width:auto; height:22px; object-fit:contain; display:block}
.fab a.sa{padding:0 20px 0 10px}
.fab a.sa img{width:auto; height:22px; object-fit:contain}

/* les libellés ne doivent jamais déborder de leur pilule */
.fab a{width:max-content; max-width:min(78vw,340px)}
.fab a .lab{flex:0 0 auto}
.fab a.ac img{height:26px}
.fab a.sa img{height:24px}
/* l'onde du bouton WhatsApp épouse la pilule au lieu de l'encercler */
.fab a.wa::after{animation:smb-onde 2.8s var(--ease) infinite}
@keyframes smb-onde{
  0%{opacity:.5; transform:scale(1)}
  70%{opacity:0; transform:scale(1.05)}
  100%{opacity:0; transform:scale(1.05)}
}

/* ======================================================================
   Reprise complète du 15/10/2026 (nuit) : entête, pilules, vue du globe
   ====================================================================== */

/* --- l'entête reste collée tout en haut, barre d'administration masquée --- */
body.admin-bar .hdr{top:0}
@media screen and (max-width:782px){ body.admin-bar .hdr{top:0} }

/* --- centrage vertical strict des trois blocs de l'entête --- */
.hdr-in{align-items:center; align-content:center}
.brand{display:flex; align-items:center; line-height:0}
.brand img{display:block}
.hdr nav{display:flex; align-items:center}
.nav{display:flex; align-items:center; margin:0; padding:0}
.hdr-cta{display:flex; align-items:center}
.hdr .prog{bottom:0}

/* --- pilules flottantes : la zone d'icône a une largeur fixe,
       les trois libellés commencent donc exactement au même endroit --- */
.fab a{padding:0 20px 0 12px; gap:0}
.fab a > :first-child{
  flex:0 0 74px; width:74px; height:30px;
  display:flex; align-items:center; justify-content:center;
  margin-right:12px;
}
.fab a.ac img{height:28px; max-width:74px}
.fab a.sa img{height:26px; max-width:74px}
.fab a.wa svg{width:25px; height:25px}
.fab a .lab{display:flex; align-items:center; line-height:1.15; text-align:left}

/* --- la vue du globe : le globe au centre, le texte de part et d'autre --- */
.hero-aside{display:none}
.hero.g .hero-in{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; text-align:left;
  gap:clamp(18px,2.6vw,40px);
  justify-items:stretch;
}
.hero.g .hero-txt{grid-column:1; text-align:right; justify-items:end; max-width:none; width:auto}
.hero.g .hero-txt .hs{justify-items:end}
.hero.g .kicker{justify-content:flex-end}
.hero.g .kicker::before{display:none}
.hero.g h1{max-width:13ch; margin-left:auto}
.hero.g .hero-globe{grid-column:2; width:clamp(286px,32vw,406px); max-width:none}
.hero.g .hero-aside{
  grid-column:3; display:block; color:#fff; max-width:34ch;
  animation:smb-entree-d .85s var(--ease) .2s both;
}
.hero.g .hero-aside .lead{
  color:rgba(255,255,255,.94); font-size:clamp(14.6px,1.05vw,16px);
  line-height:1.6; margin:0 0 18px; max-width:none;
}
.ha-pts{display:grid; gap:12px; margin-bottom:16px}
.ha-pts > div{
  padding-left:14px; border-left:2px solid rgba(255,255,255,.34);
}
.ha-pts b{
  display:block; font-size:11.4px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-l,#F7D765); margin-bottom:3px;
}
.ha-pts span{display:block; font-size:14px; line-height:1.5; color:rgba(255,255,255,.92)}
.ha-note{font-size:12.6px; color:rgba(255,255,255,.74); margin:0; font-style:italic}
@keyframes smb-entree-d{from{opacity:0; transform:translateX(22px)} to{opacity:1; transform:none}}

/* la barre d'onglets des pays passe sous le globe, sur toute la largeur */
.hero.g .gl-t{justify-content:flex-start}

/* hauteur du bandeau stable d'une vue à l'autre */
.hero-in{min-height:clamp(430px,42vw,520px)}
.hero.g .gl-stats{opacity:0; max-height:0; margin:0; padding:0; pointer-events:none; overflow:hidden}

@media (max-width:1100px){
  .hero.g .hero-in{grid-template-columns:1fr; text-align:center; justify-items:center}
  .hero.g .hero-txt{grid-column:1; text-align:center; justify-items:center}
  .hero.g .hero-txt .hs{justify-items:center}
  .hero.g .kicker{justify-content:center}
  .hero.g h1{margin-inline:auto; max-width:18ch}
  .hero.g .hero-globe{grid-column:1; width:min(360px,74vw)}
  .hero.g .hero-aside{grid-column:1; max-width:46ch; text-align:left; margin-inline:auto}
}

/* le bouton Academy porte le logo empilé : Sunumbaye au-dessus, Academy en dessous */
.fab a.ac > :first-child{flex:0 0 74px; width:74px; height:38px}
.fab a.ac img{height:38px; width:auto; max-width:46px}

/* sur petit ecran, les entrees laterales restent dans le cadre */
@media (max-width:760px){
  [data-a="l"]{transform:translateX(-22px)}
  [data-a="r"]{transform:translateX(22px)}
  [data-a="up"]{transform:translateY(28px)}
  [data-a="dn"]{transform:translateY(-22px)}
}

/* lisibilite : les libelles secondaires etaient trop petits */
.gi .gi-l{font-size:12px; line-height:1.4}
.ck{font-size:11.6px}
.gl-tb{font-size:12.2px}
.gl-tb span{font-size:12.2px}
.gl-st .l, .stat .l{font-size:11.2px}
.lv{font-size:12px}
.rolename{font-size:12px}
.fld .hint, p.hint{font-size:12.4px}
.ftr .lst a, .ftr .lst div{font-size:13.6px}








/* ==========================================================================
   Corrections et compléments du 16 octobre 2026
   ========================================================================== */

/* --- boutons flottants : trois pilules plus compactes, logos à la même
       hauteur, libellés en or et centrés sur le logo --- */
.fab{gap:9px}
.fab a{
  height:44px; min-width:44px; border-radius:22px;
  padding:0 17px 0 9px; max-width:min(76vw,308px);
  align-items:center;
  box-shadow:0 8px 24px -11px rgba(16,30,8,.44);
}
.fab a > :first-child{
  flex:0 0 46px; width:46px; height:26px; margin-right:10px;
  display:flex; align-items:center; justify-content:center;
}
.fab a.ac > :first-child{flex:0 0 46px; width:46px; height:26px}
.fab a.ac img{height:24px; width:auto; max-width:46px; object-fit:contain}
.fab a.sa img{height:24px; width:auto; max-width:46px; object-fit:contain}
.fab a.wa svg{width:22px; height:22px}
.fab a .lab{
  font-size:12.4px; font-weight:700; line-height:1;
  display:flex; align-items:center; align-self:center;
}
.fab a.ac .lab, .fab a.sa .lab{color:#9E7404}
.fab a.ac:hover .lab, .fab a.sa:hover .lab{color:var(--green-d)}
.fab a.ac{border-width:1.5px}
.fab a.wa::after{border-radius:22px}
.fab a:hover{transform:translateX(5px); box-shadow:0 14px 32px -13px rgba(16,30,8,.54)}

/* --- bouton de retour en haut : vert, anneau de progression, flèche vivante --- */
.fab .top{
  width:54px; height:54px; border-radius:50%; padding:0; border:0;
  background:linear-gradient(145deg, var(--green-l) 0%, var(--green) 46%, var(--green-d) 100%);
  color:#fff; overflow:visible;
  box-shadow:0 12px 30px -10px rgba(74,122,16,.62), inset 0 1px 0 rgba(255,255,255,.3);
}
.fab .top::before{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--p,0) * 1%), rgba(96,155,22,.2) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  pointer-events:none;
}
.fab .top::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--green-l); opacity:0; pointer-events:none;
  animation:smb-onde 3.2s var(--ease) infinite;
}
.fab .top svg{position:relative; z-index:2; transition:transform .55s var(--ease)}
.fab .top:hover{transform:translateY(-5px) scale(1.07)}
.fab .top:hover svg{transform:translateY(-3px)}
.fab .top:active{transform:translateY(-1px) scale(.97)}

/* --- bande des pays : fondu large aux deux extrémités --- */
.gl-t{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 62px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 62px),transparent 100%);
  scroll-behavior:smooth;
}

/* --- animation de construction d'une serre --- */
.sa-wrap{display:grid; gap:20px}
.sa-svg{width:100%; height:auto; display:block; background:var(--soft-2); border-radius:var(--r); border:1px solid var(--line)}
.sa-svg path{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.sa-g{opacity:0; transition:opacity .55s var(--ease)}
.sa-g.on{opacity:1}
.sa-g path{stroke-dasharray:2200; stroke-dashoffset:2200; transition:stroke-dashoffset 1.25s var(--ease), fill-opacity .9s var(--ease)}
.sa-g.on path{stroke-dashoffset:0}
.sa-sol{stroke:var(--muted); stroke-width:2.4}
.sa-pq{stroke:var(--muted); stroke-width:2; stroke-dasharray:4 5!important; stroke-dashoffset:0!important}
.sa-cote{stroke:var(--gold-d); stroke-width:1.4}
.sa-lb{fill:var(--muted); font-size:12px; font-weight:600; font-family:'Poppins',system-ui,sans-serif}
.sa-pt{stroke:var(--ink-2); stroke-width:5}
.sa-ar{stroke:var(--green); stroke-width:4}
.sa-pn{stroke:var(--green-d); stroke-width:3}
.sa-cb{stroke:var(--gold-d); stroke-width:1.8}
.sa-fl{stroke:var(--pousse); stroke-width:1.6; fill:var(--pousse); fill-opacity:0}
.sa-g.on .sa-fl{fill-opacity:.16}
.sa-fm{stroke:#9FC7E8; stroke-width:1.8; fill:#BBD9F2; fill-opacity:0}
.sa-g.on .sa-fm{fill-opacity:.3}
.sa-pr{stroke:var(--ink); stroke-width:3.4}
.sa-pr2{stroke:var(--ink-2); stroke-width:1.6}

.sa-steps{display:flex; flex-wrap:wrap; gap:8px}
.sa-s{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px 9px 9px; border-radius:40px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  font-family:'Poppins',system-ui,sans-serif; font-size:12.6px; font-weight:600; text-align:left;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.sa-n{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--soft); color:var(--green-d); font-size:11.6px; font-weight:800;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.sa-s:hover{border-color:var(--pousse); transform:translateY(-2px)}
.sa-s.ok .sa-n{background:var(--pousse); color:#fff}
.sa-s.on{background:var(--green); border-color:var(--green); color:#fff}
.sa-s.on .sa-n{background:rgba(255,255,255,.22); color:#fff}
.sa-d{
  min-height:3.2em; margin:0; color:var(--body); font-size:15px; line-height:1.65;
  border-left:3px solid var(--pousse); padding-left:14px;
}

@media (max-width:760px){
  .sa-s{font-size:11.8px; padding:7px 12px 7px 7px}
  .sa-d{font-size:14px}
}



@media (prefers-reduced-motion:reduce){
  .sa-g, .sa-g path{opacity:1!important; stroke-dashoffset:0!important}
  .fab .top::after{animation:none}
}

/* --- revelation des textes : titres mot a mot, paragraphes en montee --- */
.smb-mot{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em; line-height:inherit;
}
.smb-mot > i{
  display:inline-block; font-style:normal; opacity:0; transform:translateY(112%);
  transition:transform .9s var(--ease), opacity .55s var(--ease);
  transition-delay:calc(var(--w,0) * .048s);
}
.smb-on .smb-mot > i, .smb-mot.smb-on > i{transform:none; opacity:1}
.smb-tx{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0s);
}
.smb-tx.smb-on{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .smb-mot > i{opacity:1!important; transform:none!important}
  .smb-tx{opacity:1!important; transform:none!important}
}

/* --- bande finale enrichie --- */
.cta-band .in.cta-2{display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(24px,3.4vw,52px); align-items:center; text-align:left}
.cta-2 .kicker{color:var(--gold-l); margin-bottom:10px}
.cta-2 h2{margin:0 0 14px}
.cta-2 p{margin:0 0 18px; max-width:62ch}
.cta-l{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px}
.cta-l li{position:relative; padding-left:27px; font-size:14.6px; line-height:1.55; opacity:.95}
.cta-l li::before{content:''; position:absolute; left:0; top:.46em; width:13px; height:13px; border-radius:50%; border:2px solid var(--gold)}
.cta-c{display:grid; gap:10px}
.cta-k{display:block; padding:13px 16px; border-radius:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; transition:background .35s var(--ease), transform .35s var(--ease)}
a.cta-k:hover{background:rgba(255,255,255,.2); transform:translateX(4px)}
.cta-k b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em}
.cta-k span{display:block; margin-top:3px; font-size:12.4px; opacity:.8}
@media (max-width:900px){ .cta-band .in.cta-2{grid-template-columns:1fr} }
#serre-anim{margin-top:6px}

.smb-ln{display:inline}

/* ==========================================================================
   Assistant Sunumbaye
   ========================================================================== */
.ia-b{
  position:relative; display:flex; align-items:center; height:44px; min-width:44px;
  border-radius:22px; padding:0 17px 0 9px; max-width:min(76vw,308px); border:0;
  background:linear-gradient(135deg, var(--green-l) 0%, var(--green) 50%, var(--green-d) 100%);
  color:#fff; font-family:'Poppins',system-ui,sans-serif;
  box-shadow:0 10px 26px -11px rgba(74,122,16,.66);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ia-b .ia-ic{
  position:relative; flex:0 0 46px; width:46px; height:26px; margin-right:10px;
  display:flex; align-items:center; justify-content:center;
}
.ia-b .lab{font-size:12.4px; font-weight:700; line-height:1; display:flex; align-items:center; white-space:nowrap}
.ia-b:hover{transform:translateX(5px); box-shadow:0 16px 34px -13px rgba(74,122,16,.72)}
.ia-dot{
  position:absolute; top:-1px; right:7px; width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 2px rgba(255,255,255,.75);
  animation:smb-bat 2.4s var(--ease) infinite;
}
@keyframes smb-bat{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.45); opacity:.6}}
.ia-b.on{background:var(--ink)}

.iap{
  position:fixed; z-index:760; left:clamp(14px,2.2vw,26px); bottom:calc(clamp(16px,2.4vw,26px) + 218px);
  width:min(92vw,392px); max-height:min(72vh,620px);
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow:0 36px 80px -28px rgba(22,36,12,.4);
  opacity:0; pointer-events:none; transform:translateY(18px) scale(.97);
  transition:opacity .4s var(--ease), transform .45s var(--ease);
  font-family:'Poppins',system-ui,sans-serif;
}
.iap.on{opacity:1; pointer-events:auto; transform:none}
.iap-h{
  display:flex; align-items:center; gap:12px; padding:15px 16px;
  background:linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%); color:#fff;
}
.iap-t{flex:1; min-width:0}
.iap-t b{display:block; font-size:14.4px; font-weight:700; letter-spacing:-.01em}
.iap-t span{display:block; margin-top:2px; font-size:11.4px; opacity:.86; line-height:1.3}
.iap-x{
  flex:none; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.17); color:#fff; transition:background .3s
}
.iap-x:hover{background:rgba(255,255,255,.3)}

.iap-f{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px; background:var(--soft-2)}
.iap-m{max-width:88%; font-size:13.8px; line-height:1.62; border-radius:16px; padding:11px 14px}
.iap-m p{margin:0 0 8px}
.iap-m p:last-child{margin:0}
.iap-m.ia{align-self:flex-start; background:#fff; border:1px solid var(--line); color:var(--body)}
.iap-m.moi{align-self:flex-end; background:var(--green); color:#fff; border:0}
.iap-e{
  margin-top:10px; padding:12px 14px; border-radius:13px;
  background:var(--soft); border:1px solid var(--line);
}
.iap-el{display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.iap-e b{display:block; margin:5px 0 3px; font-size:18px; font-weight:900; color:var(--green-d); letter-spacing:-.02em}
.iap-ed{display:block; font-size:11.8px; color:var(--muted); line-height:1.4}
.iap-l{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.iap-l a, .iap-r{
  display:inline-block; padding:7px 13px; border-radius:30px;
  background:var(--soft); border:1px solid var(--line); color:var(--green-d);
  font-size:11.8px; font-weight:700; line-height:1.2; transition:background .3s, border-color .3s
}
.iap-l a:hover, .iap-r:hover{background:var(--green); border-color:var(--green); color:#fff}
.iap-pt{display:inline-flex; gap:4px; align-items:center; padding:2px 0}
.iap-pt i{width:6px; height:6px; border-radius:50%; background:var(--pousse); animation:smb-pt 1.1s infinite}
.iap-pt i:nth-child(2){animation-delay:.16s} .iap-pt i:nth-child(3){animation-delay:.32s}
@keyframes smb-pt{0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-4px)}}

.iap-p{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; background:var(--soft-2)}
.iap-p:empty{padding:0}
.iap-c{
  padding:7px 13px; border-radius:30px; border:1px solid var(--line); background:#fff;
  color:var(--ink-2); font-size:11.6px; font-weight:600; text-align:left;
  transition:border-color .3s, background .3s, transform .3s var(--ease)
}
.iap-c:hover{border-color:var(--pousse); background:var(--soft); transform:translateY(-1px)}

.iap-s{display:flex; gap:8px; padding:11px 12px; border-top:1px solid var(--line); background:#fff}
.iap-s input{
  flex:1; min-width:0; height:40px; padding:0 14px; border-radius:30px;
  border:1px solid var(--line); background:var(--soft-2); color:var(--ink);
  font-family:inherit; font-size:13.4px
}
.iap-s input:focus{outline:none; border-color:var(--pousse); background:#fff}
.iap-s button{
  flex:none; width:40px; height:40px; border:0; border-radius:50%; display:grid; place-items:center;
  background:var(--green); color:#fff; transition:background .3s, transform .3s var(--ease)
}
.iap-s button:hover{background:var(--green-d); transform:scale(1.07)}
.iap-n{margin:0; padding:0 16px 12px; font-size:10.6px; line-height:1.45; color:var(--muted); background:#fff}

.iap-rf{display:grid; gap:7px; max-width:94%}
.iap-rf input{
  height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--soft-2); font-family:inherit; font-size:13px
}
.iap-rf input:focus{outline:none; border-color:var(--pousse)}
.iap-rf button{
  height:36px; border:0; border-radius:10px; background:var(--green); color:#fff;
  font-family:inherit; font-size:12.6px; font-weight:700
}
.iap-rf button:hover{background:var(--green-d)}

@media (max-width:760px){
  .iap{
    left:0; right:0; bottom:0; width:100%; max-height:84vh;
    border-radius:22px 22px 0 0; border-left:0; border-right:0; border-bottom:0;
  }
  body.ia-ouvert .fab{opacity:0; pointer-events:none}
  .fab{transition:opacity .3s var(--ease)}
}

/* --- l'assistant dans la colonne flottante : meme gabarit que les pilules --- */
.fab .ia-b{
  width:max-content; height:44px; min-width:44px; border-radius:22px;
  padding:0 17px 0 9px; max-width:min(76vw,308px);
  background:linear-gradient(135deg, var(--green-l) 0%, var(--green) 50%, var(--green-d) 100%);
  color:#fff; display:flex; align-items:center;
}
.fab .ia-b.on{background:var(--ink)}
.fab .ia-b:hover{transform:translateX(5px)}
.iap{
  bottom:calc(clamp(16px,2.4vw,26px) + 214px);
  max-height:min(560px, calc(100vh - 340px));
}
.fab .ia-b .lab{position:static; opacity:1; pointer-events:none; transform:none; background:none; padding:0; border-radius:0; color:inherit; display:flex; align-items:center; font-size:12.4px; font-weight:700; line-height:1; flex:0 0 auto; white-space:nowrap}
.fab .ia-b .ia-ic{flex:0 0 46px}
@media (max-height:760px){
  .iap{max-height:calc(100vh - 300px)}
}
@media (max-width:760px){
  .iap{bottom:0; max-height:84vh}
}

/* ==========================================================================
   Corrections du 16 octobre — seconde passe
   ========================================================================== */

/* --- plus aucune lettre rognée par l'animation des titres --- */
.smb-mot{overflow:visible; padding:0; margin:0}
.smb-mot > i{transform:translateY(.5em)}

/* --- pilules flottantes : rondes au repos, elles s'ouvrent puis se referment --- */
.fab{gap:10px}
.fab a, .fab-r .ia-b{
  width:max-content; max-width:50px; height:50px; min-width:50px;
  border-radius:25px; overflow:hidden; white-space:nowrap;
  padding:0 16px 0 0; justify-content:flex-start; align-items:center;
  transition:max-width .75s var(--ease), border-radius .55s var(--ease),
             transform .45s var(--ease), box-shadow .45s var(--ease), background .3s var(--ease);
}
.fab a.on, .fab-r .ia-b.on{max-width:330px; border-radius:13px}
.fab a > :first-child, .fab-r .ia-b .ia-ic{
  flex:0 0 50px; width:50px; height:30px; margin-right:4px;
  display:flex; align-items:center; justify-content:center;
}
.fab a.ac > :first-child{flex:0 0 50px; width:50px; height:30px}
.fab a.ac img, .fab a.sa img{height:24px; width:auto; max-width:34px; object-fit:contain}
.fab a .lab, .fab-r .ia-b .lab{
  flex:0 0 auto; opacity:0; transform:translateX(-8px); padding-right:2px;
  display:flex; align-items:center; line-height:1;
  font-size:12.6px; font-weight:700;
  transition:opacity .42s var(--ease) .14s, transform .5s var(--ease) .14s;
}
.fab a.on .lab, .fab-r .ia-b.on .lab{opacity:1; transform:none}
.fab a.wa::after{border-radius:inherit}

/* --- l'assistant Ayuk passe à droite, au-dessus du bouton de retour en haut --- */
.fab-r{
  position:fixed; z-index:760;
  right:clamp(14px,2.2vw,26px);
  bottom:calc(clamp(16px,2.4vw,26px) + 64px);
  display:grid; justify-items:end; gap:10px;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
.fab-r .ia-b{flex-direction:row-reverse; padding:0 0 0 16px; border:0; color:#fff}
.fab-r .ia-b .ia-ic{margin-right:0; margin-left:4px}
.fab-r .ia-b .lab{transform:translateX(8px); color:#fff}
.fab-r .ia-b.on .lab{transform:none}
.iap{
  left:auto; right:clamp(14px,2.2vw,26px);
  bottom:calc(clamp(16px,2.4vw,26px) + 126px);
  transform-origin:bottom right;
}
@media (max-width:760px){
  .iap{left:0; right:0; bottom:0; width:100%}
}

/* --- pied de page : vert bien plus clair --- */
.ftr{background:linear-gradient(168deg,#3F7414 0%,#2C5610 100%); color:rgba(255,255,255,.84)}
.ftr .lst a, .ftr .lst div{color:rgba(255,255,255,.88)}
.ftr-bt{color:rgba(255,255,255,.72)}

/* --- listes déroulantes : la flèche n'est plus collée au bord --- */
.fld select{
  -webkit-appearance:none; appearance:none; padding-right:48px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5B42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; background-size:14px;
}
.fld select:focus{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23609B16' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E")}

/* --- titres d'étape du formulaire : une seule ligne --- */
.fsec-h{align-items:center}
.fsec-h h3{white-space:nowrap; font-size:clamp(15px,1.55vw,19px); line-height:1.25}
.fsec-h span{line-height:1.45}

/* --- bande finale : hauteur ramenée à la raison --- */
.cta-band{padding-block:clamp(24px,2.8vw,42px)}
.cta-band .in.cta-2{gap:clamp(18px,2.4vw,36px)}
.cta-2 h2{margin:0 0 10px; font-size:clamp(24px,2.9vw,38px)}
.cta-2 p{margin:0 0 12px; font-size:14.4px; line-height:1.6}
.cta-l{gap:5px; margin:0 0 16px}
.cta-l li{font-size:13.6px; line-height:1.45; padding-left:24px}
.cta-l li::before{width:11px; height:11px; top:.42em}
.cta-c{gap:7px}
.cta-k{padding:10px 14px; border-radius:12px}
.cta-k b{font-size:14px}
.cta-k span{font-size:11.6px}

/* --- la section grise se distingue vraiment du blanc --- */
.sec-s{background:#EBF2DD}
.cta-band{background:none}

/* --- plus de trait sous la description de la méthode de montage --- */
.sa-d{border-left:0; padding-left:0; min-height:2.6em}

/* --- commandes du globe : décollées du cercle --- */
.hero-globe .gl-z, .hero-globe .gl-zoom{right:-14px; top:-10px}
.hero-globe .gl-zb, .hero-globe .gl-zoom button{box-shadow:0 6px 16px -8px rgba(16,30,8,.45)}

/* --- en-tête de page : voile plus dense, image mieux tenue --- */
.phero-bg::after{
  background:linear-gradient(100deg,rgba(40,74,6,.82),rgba(62,106,12,.68) 48%,rgba(96,155,22,.46));
}
.phero-bg img{filter:saturate(1.06) contrast(1.04)}

/* --- invite au défilement, bien visible --- */
.scrollcue{
  bottom:16px; gap:9px; opacity:.92; pointer-events:none;
}
.scrollcue::after{
  content:'Faites défiler'; order:-1;
  font-family:'Poppins',system-ui,sans-serif; font-size:10.4px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.scrollcue i{
  width:26px; height:26px; background:none; border-radius:0;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  rotate:45deg; animation:smb-cue 1.8s var(--ease) infinite;
}
@keyframes smb-cue{
  0%{transform:translateY(-5px); opacity:0}
  35%{opacity:1}
  100%{transform:translateY(7px); opacity:0}
}

/* --- hero : les trois chiffres alignés sur la bande des pays --- */
.hero-globe .gl-stats{margin-top:16px}
.hero .gl-stats, .hero .gl-t{max-width:100%; margin-inline:0}

@media (prefers-reduced-motion:reduce){
  .fab a, .fab-r .ia-b{max-width:330px; border-radius:13px}
  .fab a .lab, .fab-r .ia-b .lab{opacity:1; transform:none}
  .scrollcue i{animation:none}
}

/* ==========================================================================
   Corrections du 16 octobre — troisième passe
   ========================================================================== */

/* --- plus un seul trait doré qui barre un texte --- */
.smb-u::after{display:none !important}
.smb-u{padding-bottom:0}

/* --- pilules flottantes : libellé centré sur le bouton, comme celui d'Ayouk --- */
.fab a, .fab-r .ia-b{align-items:center; padding:0 18px 0 0}
.fab a > :first-child, .fab-r .ia-b .ia-ic{height:50px; margin-right:2px}
.fab a.ac > :first-child{height:50px}
.fab a .lab, .fab-r .ia-b .lab{align-self:center; line-height:1; padding:0}
.fab a.ac img, .fab a.sa img{height:26px; max-width:32px}
.fab-r .ia-b{padding:0 0 0 18px}
.fab-r .ia-b .ia-ic{margin-right:0; margin-left:2px}

/* --- en-têtes de page : voile noir, partout --- */
.phero{background:#0A0A0A}
.phero-bg::after{
  background:linear-gradient(100deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.66) 52%, rgba(0,0,0,.46) 100%);
}
.phero-bg img{filter:saturate(1.02) contrast(1.02)}

/* --- boutons : animation sobre, plus de reflet qui balaie --- */
.btn{transition:background .32s var(--ease), box-shadow .32s var(--ease), color .3s var(--ease)}
.btn::before{display:none}
.btn:hover{transform:none; box-shadow:0 10px 26px -14px rgba(16,30,8,.5)}
.btn:active{transform:none}
.btn:hover .ic{transform:translateX(3px)}

/* --- chiffres : cartes séparées, plus de longs traits --- */
.stats{gap:12px; background:none; border:0; border-radius:0; overflow:visible}
.stat{border:1px solid var(--line); border-radius:18px}

/* --- commandes du globe : de nouveau dans le cadre --- */
.hero-globe .gl-z, .hero-globe .gl-zoom{right:8px; top:8px}

/* --- plus d'invite « faites défiler » --- */
.scrollcue{display:none}

/* --- flèches de navigation du bandeau d'accueil --- */
.hero-nav{position:absolute; inset:0; z-index:6; pointer-events:none}
.hero-nav button{
  pointer-events:auto; position:absolute; top:50%; translate:0 -50%;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.36);
  background:rgba(10,18,4,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; display:grid; place-items:center; opacity:.78;
  transition:opacity .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.hero-nav button:hover{opacity:1; background:rgba(10,18,4,.58); border-color:rgba(255,255,255,.6)}
.hero-nav .pv{left:clamp(10px,1.6vw,24px)}
.hero-nav .nx{right:clamp(10px,1.6vw,24px)}
.hero-nav .pz{
  top:auto; bottom:clamp(14px,2vw,22px); right:clamp(10px,1.6vw,24px); translate:0;
  width:auto; height:34px; border-radius:30px; padding:0 15px; gap:8px;
  display:inline-flex; align-items:center;
  font-family:'Poppins',system-ui,sans-serif; font-size:11.4px; font-weight:700;
  letter-spacing:.04em;
}
.hero-nav .pz-i{
  width:9px; height:11px; flex:none;
  border-left:3px solid currentColor; border-right:3px solid currentColor;
}
.hero-nav .pz.on .pz-i{
  width:0; height:0; border:0;
  border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent;
}
@media (max-width:760px){
  .hero-nav button{width:38px; height:38px}
  .hero-nav .pz{height:30px; font-size:10.6px; padding:0 12px}
}

/* --- montage d'une serre en trois dimensions --- */
.s3-wrap{display:grid; gap:18px}
.s3-stage{
  position:relative; width:100%; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(170deg,#EEF5E2 0%,#DCEAC8 100%);
  border:1px solid var(--line); cursor:grab; touch-action:none;
}
.s3-stage:active{cursor:grabbing}
.s3-stage canvas{display:block; width:100%}
.s3-hint{
  position:absolute; left:14px; bottom:12px; z-index:2; pointer-events:none;
  font-family:'Poppins',system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:rgba(255,255,255,.72); padding:6px 11px; border-radius:30px;
}
.s3-steps{display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:2px}
.s3-steps::-webkit-scrollbar{display:none}
.s3-s{
  flex:1 1 0; min-width:0; display:inline-flex; align-items:center; gap:7px;
  padding:7px 10px 7px 7px; border-radius:40px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  font-family:'Poppins',system-ui,sans-serif; font-size:11.4px; font-weight:600; text-align:left;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.s3-s .s3-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.s3-n{
  flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--soft); color:var(--green-d); font-size:10.6px; font-weight:800;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.s3-s:hover{border-color:var(--pousse)}
.s3-s.ok .s3-n{background:var(--pousse); color:#fff}
.s3-s.on{background:var(--green); border-color:var(--green); color:#fff}
.s3-s.on .s3-n{background:rgba(255,255,255,.22); color:#fff}
.s3-d{margin:0; min-height:2.6em; color:var(--body); font-size:15px; line-height:1.65}
@media (max-width:900px){
  .s3-s{flex:0 0 auto; font-size:11px}
  .s3-d{font-size:14px}
}

/* --- sélecteur de langue --- */
.smb-lang{position:relative; flex:none; font-family:'Poppins',system-ui,sans-serif}
.smb-lang-b{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 13px;
  border-radius:11px; border:1.4px solid var(--line); background:#fff; color:var(--ink-2);
  font-size:12.8px; font-weight:700; letter-spacing:.04em;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.smb-lang-b:hover{border-color:var(--pousse); color:var(--green-d); background:var(--soft-2)}
.smb-lang-m{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:184px;
  display:grid; gap:2px; padding:7px; border-radius:14px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .28s var(--ease), transform .3s var(--ease), visibility .28s;
}
.smb-lang.on .smb-lang-m{opacity:1; visibility:visible; transform:none}
.smb-lang-m a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  color:var(--ink-2); font-size:13.4px; transition:background .25s, color .25s;
}
.smb-lang-m a b{
  flex:none; width:30px; height:22px; display:grid; place-items:center; border-radius:5px;
  background:var(--soft); color:var(--green-d); font-size:10.6px; font-weight:800; letter-spacing:.04em;
}
.smb-lang-m a:hover{background:var(--soft-2); color:var(--green-d)}
.smb-lang-m a.on{background:var(--green); color:#fff}
.smb-lang-m a.on b{background:rgba(255,255,255,.22); color:#fff}
.hdr .smb-lang{margin-left:4px}
.mnav .smb-lang{margin:14px 0 0; width:100%}
.mnav .smb-lang-b{width:100%; justify-content:center; height:46px}
.mnav .smb-lang-m{right:auto; left:0; width:100%}
@media (max-width:1190px){
  .hdr .smb-lang{display:none}
}

/* ==========================================================================
   Corrections du 16 octobre — quatrieme passe
   Geometrie definitive des pilules flottantes : une boite d'icone de 50 px
   quel que soit le media (img, svg, span), un libelle dont la ligne fait la
   hauteur du bouton, donc centre au pixel pres, et de l'air entre les deux.
   ========================================================================== */
.fab a, .fab-r .ia-b{
  display:flex !important; align-items:center !important;
  height:50px !important; min-height:50px !important;
  padding:0 22px 0 0 !important; box-sizing:border-box;
}
.fab-r .ia-b{padding:0 0 0 22px !important}

/* la boite du logo : toujours 50 x 50, le media centre a l'interieur */
.fab a > :first-child,
.fab a.ac > :first-child,
.fab a.sa > :first-child,
.fab-r .ia-b .ia-ic{
  flex:0 0 50px !important; width:50px !important; height:50px !important;
  margin:0 !important; align-self:center !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.fab a > img, .fab a.ac > img, .fab a.sa > img, .fab a.ac img, .fab a.sa img{
  width:50px !important; height:50px !important; max-width:none !important; max-height:none !important;
  padding:12px 8px !important; box-sizing:border-box !important;
  object-fit:contain !important; object-position:center center !important;
}
.fab a.wa > svg{width:50px !important; height:23px !important; padding:0 !important}
.fab-r .ia-b .ia-ic svg{width:23px !important; height:23px !important}

/* le libelle : sa ligne fait la hauteur du bouton, le texte est donc centre */
.fab a .lab, .fab-r .ia-b .lab{
  display:block !important; align-self:center !important;
  height:50px !important; line-height:50px !important;
  margin:0 !important; padding:0 0 0 7px !important;
  font-size:12.6px; font-weight:700; white-space:nowrap;
}
.fab-r .ia-b .lab{padding:0 7px 0 0 !important}

/* la propriete individuelle translate du tout premier jet remontait chaque
   libelle de la moitie de sa hauteur : c'est elle qui decalait les textes. */
.fab .lab, .fab a .lab, .fab-r .ia-b .lab{translate:none !important; inset:auto !important}

/* la place utile du logo dans la pastille : 40 x 30 au lieu de 34 x 26 */
.fab a > img, .fab a.ac > img, .fab a.sa > img, .fab a.ac img, .fab a.sa img{padding:10px 5px !important}

/* ==========================================================================
   Corrections du 16 octobre — cinquieme passe : le responsive
   Une regle posterieure du premier jet reaffichait le menu horizontal sous
   1190 px : le menu debordait et le burger restait cache. On tranche ici,
   une fois pour toutes, en fin de feuille.
   ========================================================================== */
@media (max-width:1190px){
  .hdr .nav, .hdr-cta{display:none !important}
  .burger{display:flex !important}
}
@media (min-width:1191px){
  .burger{display:none !important}
  .hdr .nav{display:flex !important}
}

/* --- l'entete tient sur une ligne, quelle que soit la largeur --- */
.hdr > .in{gap:10px}
.hdr .logo img{max-width:min(54vw,230px); height:auto}
@media (max-width:420px){
  .hdr .logo img{max-width:50vw}
  .burger{width:40px; height:40px}
}

/* --- les pilules flottantes, plus discretes sur petit ecran --- */
@media (max-width:760px){
  .fab{bottom:calc(env(safe-area-inset-bottom,0px) + 14px); left:12px; gap:8px}
  .fab a, .fab-r .ia-b{height:44px !important; min-height:44px !important}
  .fab a, .fab-r .ia-b{max-width:44px}
  .fab a.on, .fab-r .ia-b.on{max-width:min(74vw,290px)}
  .fab a > :first-child, .fab a.ac > :first-child, .fab a.sa > :first-child, .fab-r .ia-b .ia-ic{
    flex:0 0 44px !important; width:44px !important; height:44px !important;
  }
  .fab a > img, .fab a.ac > img, .fab a.sa > img, .fab a.ac img, .fab a.sa img{
    width:44px !important; height:44px !important; padding:10px 6px !important;
  }
  .fab a.wa > svg{width:44px !important; height:21px !important}
  .fab a .lab, .fab-r .ia-b .lab{height:44px !important; line-height:44px !important; font-size:12px}
  .fab .top{width:46px; height:46px}
  .fab-r{bottom:calc(env(safe-area-inset-bottom,0px) + 70px); right:12px}
}

/* --- les commandes du globe ne mordent plus sur la sphere --- */
.gl-cmd, .globe-cmd, .gl-zoom{z-index:6}
.gl-cmd button, .globe-cmd button, .gl-zoom button{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  font-size:16px; line-height:1; padding:0; overflow:visible;
}
@media (max-width:760px){
  .hero-globe .gl-wrap, .hero .globe{max-width:94vw; margin-inline:auto}
}

/* --- plus aucune image ne pousse la page --- */
img, video, svg, canvas, iframe{max-width:100%}
.wrap, .in, section > .in{max-width:min(var(--maxw), 100%)}

/* ==========================================================================
   Corrections du 16 octobre — sixieme passe
   La bande de bas de page : un vert franchement plus sombre pour que le
   texte et les coordonnees se lisent, et des cartes de contact plus nettes.
   ========================================================================== */
.cta-band .bg::after{
  background:linear-gradient(105deg, rgba(24,52,6,.955) 0%, rgba(46,86,12,.92) 54%, rgba(66,112,18,.88) 100%) !important;
}
.cta-band > .in{padding:clamp(30px,3.4vw,46px) clamp(22px,3.4vw,52px)}
.cta-band h2{margin:.18em 0 .5em}
.cta-band .lead, .cta-band > .in p{margin:0 0 16px; max-width:46ch}
.cta-band .cta-l{display:grid; gap:9px; margin:0; padding:0; list-style:none}
.cta-band .cta-l li{
  padding:0 0 0 22px; margin:0; position:relative;
  font-size:14.2px; line-height:1.45; color:rgba(255,255,255,.94);
}
.cta-band .btn-row{margin-top:22px}
.cta-band .cta-k{
  background:rgba(8,22,2,.44); border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(3px);
}
.cta-band .cta-k:hover{background:rgba(8,22,2,.58); border-color:rgba(255,255,255,.42)}

/* --- garde-fou : la classe d'animation ne doit jamais recevoir la mise en
       page d'un conteneur. Les elements reveles gardent leur propre boite. --- */
.cta-band li.in, .cta-band p.in, .cta-band h2.in, .cta-band .kicker.in,
.cta-band ul.in, .cta-band span.in{
  display:revert; grid-template-columns:none; gap:revert; align-items:revert;
}

/* ==========================================================================
   Corrections du 16 octobre — septieme passe
   ========================================================================== */

/* --- un titre anime reste une ligne de mots, jamais une colonne --- */
.smb-mot{display:inline-block !important; vertical-align:top; white-space:pre}
.smb-mot > i{display:block}
.smb-ln{display:inline}

/* --- Devenir partenaire : le formulaire prend toute la largeur --- */
.page-id-34474 .split{grid-template-columns:1fr !important; gap:clamp(22px,2.6vw,36px)}
.page-id-34474 .split > .in:first-child{max-width:78ch}
.page-id-34474 .formcard{max-width:1000px; width:100%; margin-inline:auto}
.page-id-34474 .formcard .f-row,
.page-id-34474 .formcard .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){
  .page-id-34474 .formcard .f-row,
  .page-id-34474 .formcard .grid-2{grid-template-columns:1fr}
}

/* --- les entetes d'etape des formulaires : titre a cote du numero --- */
.formcard h3.smb-rv{line-height:1.25; margin:0}

/* ==========================================================================
   Corrections du 16 octobre — huitieme passe
   La diapositive du globe : une vraie photo de fond sous un voile sombre,
   et un titre aligne a gauche comme les autres diapositives.
   ========================================================================== */
.hero-bg .sl-g img{display:block !important}
.hero-bg .sl-g{background:#0B1A04 !important}
.hero-bg .sl-g::after{
  background:linear-gradient(104deg, rgba(6,16,2,.88) 0%, rgba(12,30,4,.74) 46%, rgba(20,46,6,.58) 100%) !important;
}
.hero.g .hero-txt{text-align:left !important; justify-items:start !important}
.hero.g .hero-txt h1, .hero.g .hero-txt .kicker, .hero.g .hero-txt p{text-align:left !important}
.hero.g .hero-txt h1{max-width:12ch}

/* --- la bande des pays ne se coupe plus net a droite --- */
.hero .gl-t{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 56px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 56px),transparent 100%);
  padding-inline:6px;
}

/* ==========================================================================
   Corrections du 16 octobre — neuvieme passe
   ========================================================================== */
/* --- la fiche pays du globe liste les localites de chantier --- */
.gl-sites{margin-top:12px; padding-top:11px; border-top:1px solid rgba(0,0,0,.09)}
.gl-sites span{
  display:block; font-size:10.4px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:5px;
}
.gl-sites p{margin:0; font-size:12.6px; line-height:1.55; color:var(--ink-2); font-weight:500}

/* ==========================================================================
   Corrections du 16 octobre — dixieme passe
   Le panneau d'Ayouk : une vraie fenetre de conversation, pas une vignette.
   ========================================================================== */
.iap{
  width:min(406px, calc(100vw - 28px)) !important;
  height:min(646px, calc(100vh - 148px)) !important;
  max-height:min(646px, calc(100vh - 148px)) !important;
}
.iap-f{flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 16px 6px}
.iap-m{max-width:94%}
.iap-m p{margin:0 0 .55em}
.iap-m p:last-child{margin-bottom:0}
.iap-p{padding:8px 14px 2px; display:flex; flex-wrap:wrap; gap:7px}
.iap-c{font-size:12.1px; line-height:1.3; padding:7px 11px}
.iap-s{padding:10px 14px 6px}
.iap-n{padding:0 14px 12px; font-size:10.8px; line-height:1.4}

/* le bouton s'efface quand la conversation est ouverte : plus de doublon */
/* Retire le « 16 octobre » : cette regle faisait disparaitre le bouton d Ayouk
   des qu il recevait la classe on. Or cette classe sert aussi a ouvrir
   les pastilles flottantes au survol : le bouton s effacait donc sous le
   curseur. L effacement quand le panneau est ouvert est deja assure par
   body.ia-ouvert, plus bas. */
.fab-r .ia-b{transition:max-width .75s var(--ease), opacity .35s var(--ease), transform .35s var(--ease), border-radius .55s var(--ease), background .3s var(--ease)}

@media (max-width:760px){
  .iap{
    width:100% !important; left:0 !important; right:0 !important; bottom:0 !important;
    height:min(84vh, 640px) !important; max-height:84vh !important;
    border-radius:20px 20px 0 0;
  }
}

/* ==========================================================================
   Corrections du 16 octobre — onzieme passe
   ========================================================================== */
/* la pastille d'Ayouk s'efface tant que la conversation est ouverte,
   meme quand le minuteur des pilules lui retire sa classe */
body.ia-ouvert .fab-r .ia-b{opacity:0 !important; pointer-events:none !important; transform:translateY(10px)}
body.ia-ouvert .fab .top{opacity:0; pointer-events:none}
.fab .top{transition:opacity .3s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease)}

/* ==========================================================================
   Corrections du 16 octobre — douzieme passe
   Les trois logos de l'ecosysteme a la meme hauteur optique, et les images
   du theme protegees de la regle generique d'Elementor.
   ========================================================================== */
.eco-c img, .eco-c .eco-l{
  height:clamp(42px,4.2vw,60px) !important; width:auto !important;
  max-width:100% !important; object-fit:contain; display:block; margin-inline:auto;
}
.eco-c{display:flex; flex-direction:column; align-items:flex-start}
.eco-c img{margin-inline:0}

/* --- dimensions d'images du theme, a l'abri des regles generiques --- */
.lrule img{height:clamp(26px,3vw,36px) !important; width:auto !important}
.ftr .eco-mini img{height:23px !important; width:auto !important}
.mq-i img{max-height:44px !important; width:auto !important}
.plogo img{height:auto !important}

/* ==========================================================================
   Corrections du 16 octobre — treizieme passe
   Accessibilite sur petit ecran : des zones tactiles que le pouce atteint,
   et plus aucun texte sous 12 px.
   ========================================================================== */
@media (max-width:760px){
  .ftr .lst a, .ftr a{display:inline-block; padding-block:7px; min-height:40px; line-height:26px}
  .ftr .lst{gap:0}
  .eco-c .eco-a{display:inline-flex; align-items:center; min-height:42px}
  .hero-dots button{position:relative}
  .hero-dots button::after{content:''; position:absolute; inset:-14px -7px; border-radius:8px}
  .iap-h .iap-x{width:38px; height:38px}
  .pz-t, .ck, .l, .iap-n, .ftr .lgl, .ftr small{font-size:12px !important; line-height:1.5}
  .kicker{font-size:11.6px; letter-spacing:.1em}
}

/* --- les trois logos de l'ecosysteme alignes sur le texte de leur carte --- */
.eco-c img{margin-left:0 !important; margin-right:auto !important}

/* ==========================================================================
   Corrections du 16 octobre — quatorzieme passe
   Sur telephone, les commandes du globe se posent en haut, au centre :
   elles ne croisent plus les pilules de gauche ni la pastille d'Ayouk.
   ========================================================================== */
@media (max-width:760px){
  .gl-zoom{
    display:flex !important; flex-direction:row !important;
    left:50% !important; right:auto !important; top:10px !important; bottom:auto !important;
    transform:translateX(-50%); gap:8px; width:auto !important; height:auto !important;
  }
  .gl-zoom button{width:32px !important; height:32px !important; font-size:15px}
  .hero .nx{right:8px}
  .hero .pv{left:8px}
  .hero .pz{right:8px; bottom:46px}
  .hero-dots{bottom:14px}
}

/* --- le fil d'Ariane et l'entete de page respirent sur petit ecran --- */
@media (max-width:520px){
  .crumbs, .breadcrumb, .phero .crumbs{font-size:11.8px}
  .phero .wrap{padding-inline:18px}
}

/* ==========================================================================
   Corrections du 16 octobre — quinzieme passe
   Une seule balise h1 par page : les titres des diapositives suivantes sont
   des h2, et doivent garder exactement l'allure du premier.
   ========================================================================== */
.hero .hs h2{
  color:#fff; max-width:17ch;
  font-size:clamp(27px, 2.85vw, 40px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.033em;
  margin:0;
  text-shadow:none;
  text-wrap:balance;
}
.hero.g .hero-txt .hs h2{max-width:12ch}

/* ======================================================================
   Corrections du 16 octobre — seizieme passe
   ====================================================================== */

/* -- 1. pilules flottantes --------------------------------------------
   Au repos la pilule est un rond de 50 px. La reserve de 22 px prevue pour
   le libelle restait en place et poussait le pictogramme vers la gauche :
   c'est elle qui decalait le logo WhatsApp de 11 px. On ne la rend qu'une
   fois la pilule ouverte. */
/* le libelle reste dans le flux meme pilule fermee : un centrage ferait
   deborder le pictogramme des deux cotes. On garde donc l'ancrage au bord. */
.fab a{padding:0 !important; justify-content:flex-start !important}
.fab-r .ia-b{padding:0 !important; justify-content:flex-start !important}
.fab a.on{padding:0 22px 0 0 !important; justify-content:flex-start !important}
.fab-r .ia-b.on{padding:0 0 0 22px !important; justify-content:flex-start !important}
.fab a.wa > svg{width:50px !important; height:23px !important; flex:0 0 50px !important;
  padding:0 !important; margin:0 !important}

/* -- 2. les deux ronds de droite se touchaient : 10 px d'ecart seulement -- */
.fab-r{bottom:112px !important; right:26px !important}
.fab .top{width:50px !important; height:50px !important; right:26px !important; bottom:26px !important}

/* -- 3. filigrane des en-tetes de page : plus grand, beaucoup plus discret -- */
.plogo{width:clamp(150px,19vw,290px) !important; right:clamp(18px,4.5vw,70px) !important;
  opacity:.26}
@keyframes plShow{from{opacity:0; transform:translateY(10px)}to{opacity:.26; transform:none}}
@media (prefers-reduced-motion:reduce){.plogo{opacity:.26 !important}}

/* -- 4. commandes du globe : elles mordaient la sphere de 16 px ---------- */
.gl-zoom{top:-10px !important; right:-14px !important; left:auto !important;
  bottom:auto !important; flex-direction:row !important; gap:8px !important;
  width:auto !important; height:auto !important; transform:none !important}
@media (max-width:980px){
  .gl-zoom{top:-8px !important; right:auto !important; left:50% !important;
    transform:translateX(-50%) !important}
}

/* -- 5. mise en pause : une pastille posee sur la ligne des puces -------- */
.pz{order:-1; position:relative !important; inset:auto !important;
  width:24px !important; height:24px !important; min-width:0 !important;
  padding:0 !important; margin:0 6px 0 0 !important; border:0 !important;
  border-radius:50% !important; background:rgba(255,255,255,.2) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer; box-shadow:none !important;
  transition:background .22s ease, transform .22s ease}
.pz:hover{background:rgba(255,255,255,.38) !important; transform:scale(1.1)}
.pz .pz-t{display:none !important}
.pz .pz-i{position:relative; display:block; width:9px; height:10px}
.pz .pz-i::before, .pz .pz-i::after{content:''; position:absolute; top:0;
  width:3px; height:10px; background:#fff; border-radius:1px}
.pz .pz-i::before{left:0}
.pz .pz-i::after{right:0}
.pz.on .pz-i::after{display:none}
.pz.on .pz-i::before{left:1px; width:0; height:0; background:none; border-radius:0;
  border-left:9px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent}
.hero-dots{align-items:center !important}

/* -- 6. les titres n'apparaissent plus mot a mot ------------------------
   Le decoupage par mot laissait les titres a moitie effaces tant que
   l'animation n'etait pas finie : de loin, la section paraissait cassee. */
.smb-mot > i, .smb-ln > i{opacity:1 !important; transform:none !important;
  translate:none !important; animation:none !important; transition:none !important;
  filter:none !important; clip-path:none !important}
.smb-mot{overflow:visible !important}

/* -- 7. plus aucune animation sur Devenir partenaire et Demander un devis -- */
.hdr-cta .btn, a.btn[href*="devenir-partenaire"], a.btn[href*="demander-un-devis"]{
  animation:none !important; transform:none !important; scale:none !important}
.hdr-cta .btn::before, .hdr-cta .btn::after,
a.btn[href*="devenir-partenaire"]::before, a.btn[href*="devenir-partenaire"]::after,
a.btn[href*="demander-un-devis"]::before, a.btn[href*="demander-un-devis"]::after{
  animation:none !important; transform:none !important; transition:none !important;
  opacity:0 !important}
.hdr-cta .btn:hover, a.btn[href*="devenir-partenaire"]:hover, a.btn[href*="demander-un-devis"]:hover{
  transform:none !important; scale:none !important; animation:none !important}
.hdr-cta .btn .ic, a.btn[href*="devenir-partenaire"] .ic, a.btn[href*="demander-un-devis"] .ic{
  animation:none !important; transform:none !important; translate:none !important}

/* -- 8. bande finale : les boutons collaient a la derniere ligne de la liste -- */
.cta-band .cta-l{margin:0 0 12px !important}
.cta-band .btn-row{margin-top:34px !important; gap:14px !important}

/* -- 9. vignettes video : un fond clair plutot qu'un aplat noir ---------- */
.vd .th{background:linear-gradient(135deg,#EAF1E2,#D2E2C3) !important}

/* le liseret de la pilule decalait le pictogramme de son epaisseur */
.fab a.ac > :first-child{margin-left:-1.5px !important}
.fab a.sa > :first-child{margin-left:-1px !important}

/* ======================================================================
   Corrections du 16 octobre — dix-septieme passe
   La page Contact et le pied des formulaires n'avaient jamais ete habilles :
   les classes ct-g, ct-b, ct-m, ct-ml, fend, fnote et opt.chk n'existaient
   dans aucune feuille. Le navigateur affichait donc le texte brut.
   ====================================================================== */

/* ---------- page Contact : coordonnees ---------- */
.ct-g{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(20px,2.6vw,38px); align-items:start}
.ct-i{display:grid; gap:10px}
.ct-b{display:grid; gap:3px; padding:14px 18px; border-radius:14px; background:#fff;
  border:1px solid rgba(26,54,8,.09); box-shadow:0 1px 2px rgba(26,54,8,.04);
  transition:box-shadow .25s var(--ease,ease), border-color .25s var(--ease,ease)}
.ct-b:hover{box-shadow:0 8px 24px rgba(26,54,8,.09); border-color:rgba(108,164,42,.34)}
.ct-b > b{font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:#6CA42A; font-weight:800; line-height:1.4}
.ct-b > span{font-size:15.5px; font-weight:600; color:#223314; line-height:1.45}
.ct-b a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(108,164,42,.45)}
.ct-b a:hover{color:#4F7D1E; border-bottom-color:#4F7D1E}
.ct-i .btn-row{margin-top:18px}

/* ---------- page Contact : la carte ---------- */
.ct-m{position:relative; border-radius:18px; overflow:hidden; background:#EDF2E6;
  border:1px solid rgba(26,54,8,.1); min-height:430px; display:flex; flex-direction:column}
.ct-m iframe{flex:1 1 auto; width:100%; min-height:370px; border:0; display:block}
.ct-ml{display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:#fff;
  border-top:1px solid rgba(26,54,8,.08)}
.ct-ml a{flex:1 1 170px; text-align:center; padding:10px 14px; border-radius:11px;
  background:#F3F7EE; color:#2E4A14; font-size:13.5px; font-weight:700; text-decoration:none;
  border:1px solid rgba(108,164,42,.22);
  transition:background .2s ease, color .2s ease, border-color .2s ease}
.ct-ml a:hover{background:#6CA42A; color:#fff; border-color:#6CA42A}
@media (max-width:900px){
  .ct-g{grid-template-columns:1fr}
  .ct-m{min-height:0}
  .ct-m iframe{min-height:290px}
}

/* ---------- pied des formulaires ---------- */
.fend{display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:22px}
.fend .fnote{margin:0; font-size:13.5px; color:#6B7A5C}
.formcard .opt.chk{display:flex !important; align-items:flex-start; gap:11px;
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:6px 0 !important; text-transform:none !important; letter-spacing:0 !important;
  font-size:14.5px !important; font-weight:500 !important; color:#223314 !important}
.formcard .opt.chk input[type="checkbox"]{appearance:auto; -webkit-appearance:checkbox;
  width:17px; height:17px; margin:2px 0 0; accent-color:#6CA42A; flex:0 0 auto; opacity:1}
.formcard .opt.chk span{text-transform:none !important; letter-spacing:0 !important;
  font-size:14.5px !important; font-weight:500 !important; line-height:1.5; color:#223314}

/* ======================================================================
   Corrections du 16 octobre — dix-huitieme passe
   ====================================================================== */

/* -- la section Academy avait ses colonnes inversees : le logo occupait
   791 px et le texte 202 px, ce qui reduisait le paragraphe a un ruban. -- */
.acad{grid-template-columns:minmax(0,300px) minmax(0,1fr) !important;
  align-items:center !important; gap:clamp(26px,3.6vw,56px) !important}
.acad .acad-l{width:100% !important; max-width:272px !important; height:auto !important;
  justify-self:center}
.acad h2, .acad h3{max-width:20ch}
.acad p{max-width:60ch}
.acad .pill, .acad .by{white-space:normal; line-height:1.45}
@media (max-width:860px){
  .acad{grid-template-columns:1fr !important}
  .acad .acad-l{max-width:220px !important; justify-self:start}
}

/* -- les cartes de la page des formations laissaient une colonne vide -- */
.fgrid, .f-g{align-items:start}

/* -- respiration generale : plus aucun bloc ne doit toucher le suivant -- */
.sec .wrap > * + .btn-row, .sec-s .wrap > * + .btn-row{margin-top:26px}
.art-b > p + h2, .art-b > ul + h2, .art-b > p + h3{margin-top:30px}
.art-b > h2 + p, .art-b > h3 + p{margin-top:12px}
.qt{line-height:1.6}

/* ======================================================================
   Corrections du 16 octobre — dix-neuvieme passe
   Confort de lecture sur telephone : cinq pastilles flottantes de 50 px
   sur un ecran de 390 px masquaient le contenu. On les resserre.
   ====================================================================== */
@media (max-width:620px){
  .fab a, .fab-r .ia-b{height:44px !important; min-height:44px !important}
  .fab a > :first-child, .fab-r .ia-b .ia-ic{flex:0 0 44px !important;
    width:44px !important; height:44px !important}
  .fab a > img, .fab a.ac img, .fab a.sa img{width:44px !important; height:44px !important;
    padding:10px 7px !important}
  .fab a.wa > svg{width:44px !important; height:20px !important; flex:0 0 44px !important}
  .fab a .lab, .fab-r .ia-b .lab{height:44px !important; line-height:44px !important;
    font-size:11.6px !important}
  .fab{gap:9px !important; left:12px !important; bottom:14px !important}
  .fab .top{width:42px !important; height:42px !important; right:12px !important;
    bottom:14px !important}
  .fab-r{right:12px !important; bottom:66px !important}
  .fab-r .ia-b{width:44px !important}
  /* le bas de page ne doit pas finir sous les pastilles */
  .ftr{padding-bottom:86px !important}
}

/* ---------- les deux dernieres sections respirent sur telephone ---------- */
@media (max-width:620px){
  .cta-band .btn-row{flex-direction:column; align-items:stretch; gap:10px}
  .cta-band .btn-row .btn{width:100%; justify-content:center}
  .ct-i .btn-row{flex-direction:column; align-items:stretch; gap:10px}
  .ct-i .btn-row .btn{width:100%; justify-content:center}
}

/* ======================================================================
   Corrections du 16 octobre — vingtieme passe
   ====================================================================== */

/* -- 1. case de consentement : la case native et la pastille du gabarit
   s'affichaient toutes les deux. On garde la vraie case, on retire la
   pastille et le fond vert qui transformait la ligne en gros bandeau. -- */
.formcard .opt.chk input[type="checkbox"]{
  position:static !important; opacity:1 !important; width:17px !important; height:17px !important;
  margin:2px 0 0 !important; appearance:auto; -webkit-appearance:checkbox;
  accent-color:#6CA42A; flex:0 0 auto}
.formcard .opt.chk span{display:inline !important; padding:0 !important; border:0 !important;
  background:none !important; color:#223314 !important}
.formcard .opt.chk span::before{display:none !important; content:none !important}
.formcard .opt.chk input:checked + span{background:none !important; border-color:transparent !important;
  color:#223314 !important}

/* -- 2. le menu doit annoncer ses sous-pages -- */
/* la fleche etait ecrasee a 0 px de large par le conteneur souple du bouton :
   personne ne pouvait deviner quelles entrees ouvraient un sous-menu. */
.nav .nl{display:inline-flex !important; align-items:center !important; gap:4px}
.nav .car{flex:0 0 11px !important; width:11px !important; min-width:11px !important;
  height:11px !important; opacity:1 !important; stroke-width:3.2 !important;
  color:#6CA42A; margin-left:2px}
.nav li:hover .car, .nav li:focus-within .car{color:#C9A227}
.mpanel .mi, .mnav .mi{display:flex !important; align-items:center !important; justify-content:space-between}
.mpanel .mi .car, .mnav .mi .car{flex:0 0 15px !important; width:15px !important; min-width:15px !important;
  height:15px !important; opacity:1 !important; stroke-width:3.2 !important; color:#6CA42A}

/* -- 3. la page Devenir partenaire : seule la section du formulaire doit
   passer en une colonne. La regle posee a la septieme passe s'appliquait a
   toutes les sections de la page et ecrasait l'image de la section
   « Une demande qui depasse l'offre ». -- */
.page-id-34474 .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
.page-id-34474 .sec.cream .split{grid-template-columns:1fr !important}
@media (max-width:900px){ .page-id-34474 .split{grid-template-columns:1fr !important} }

/* une image de section ne doit jamais s'etirer : cadre fixe, image recadree */
.split figure.rv{aspect-ratio:4/3; margin:0}
.split figure.rv img{width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important; display:block}

/* -- 4. les quatre niveaux d'entree tenaient sur une seule ligne : les
   montants partaient sur cinq lignes. Deux rangees de deux. -- */
.inv-g{grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(16px,1.8vw,26px) !important}
@media (max-width:780px){ .inv-g{grid-template-columns:1fr !important} }
.inv .amt{font-size:clamp(17px,1.5vw,21px); line-height:1.3}

/* -- 5. toutes les sections sur la meme largeur : le formulaire etait
   bride a 1000 px quand les autres occupaient 1260 px. -- */
.page-id-34474 .formcard, .page-id-34473 .formcard{max-width:none !important; width:100% !important}

/* l'accroche du formulaire de partenariat restait bridee a 784 px quand le
   formulaire occupait 1148 px : les deux blocs ne s'alignaient pas. */
.page-id-34474 .sec.cream .split > .in{max-width:none !important; width:100% !important}
.page-id-34474 .sec.cream .split > .in > h2,
.page-id-34474 .sec.cream .split > .in > p{max-width:62ch}
.page-id-34474 .sec.cream .split > .in > .g{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media (max-width:760px){ .page-id-34474 .sec.cream .split > .in > .g{grid-template-columns:1fr !important} }


/* ======================================================================
   Vingt-et-unieme passe - section du globe
   ====================================================================== */

/* Les commandes + - et recentrage mordaient de 20 px sur la sphere : leur
   fond blanc se confondait avec le globe blanc, d ou l impression de
   boutons coupes. Elles reviennent dans l angle carre de la scene, la ou
   la sphere ne va pas, avec un contour et une ombre qui tiennent sur
   n importe quel fond. */
.gl-zoom{top:0 !important; right:0 !important; left:auto !important; bottom:auto !important;
  display:grid !important; grid-auto-flow:row !important; gap:5px !important;
  width:auto !important; height:auto !important; transform:none !important; z-index:9 !important}
.gl-zoom button{width:30px !important; height:30px !important; border-radius:10px !important;
  border:1px solid rgba(26,54,8,.18) !important; background:#fff !important; color:#223314 !important;
  box-shadow:0 5px 16px -7px rgba(16,30,8,.55), 0 0 0 3px rgba(255,255,255,.6) !important}
@media (max-width:980px){
  .gl-zoom{grid-auto-flow:column !important; gap:6px !important}
  .gl-zoom button{width:28px !important; height:28px !important}
}

/* La rangee de pays portait un degrade d effacement a chaque extremite,
   prevu pour signaler qu on peut la faire defiler. Quand tout tient dans
   la largeur, ce degrade rognait le premier pays. La classe fit est posee
   par le script quand il n y a rien a faire defiler. */
.gl-t.fit{justify-content:center !important; overflow:visible !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  flex-wrap:wrap !important; row-gap:6px}

/* La rangee debordait de 320 px de chaque cote quelle que soit la largeur
   de l ecran : sous 1280 px elle passait sous le bord de la section et le
   premier pays disparaissait. Elle se cale desormais sur la largeur utile. */
.gl-wide .gl-t{margin-inline:min(0px, calc((620px - min(1180px, 92vw)) / 2)) !important; padding-inline:0 !important}

/* Dans l en-tete d accueil la colonne du globe fait environ 470 px : la
   rangee des onze pays n y tient pas et se retrouvait coupee en plein
   mot, juste au-dessus des chiffres. Les pastilles restent sur la page
   Nos realisations, ou la section est pleine largeur ; ici le visiteur
   clique directement sur un pays du globe. */
.hero-globe .gl-t{display:none !important}

/* Sur telephone la scene fait environ 340 px : l angle du carre est trop
   etroit, les commandes mordaient sur la sphere. Elles passent juste
   au-dessus du globe, alignees a droite, ou elles ne genent rien. */
@media (max-width:620px){
  .gl-zoom{top:-34px !important; right:0 !important; bottom:auto !important;
    grid-auto-flow:column !important; gap:6px !important}
  .gl-zoom button{width:26px !important; height:26px !important}
}

/* La rangee ne defile plus du tout : elle passe a la ligne. Le degrade
   d effacement, meme legitime quand il y a de quoi defiler, donnait
   l impression d un premier pays coupe. Onze pastilles tiennent sur deux
   ou trois lignes sans rien perdre. */
.gl-t{flex-wrap:wrap !important; justify-content:center !important; overflow:visible !important;
  -webkit-mask-image:none !important; mask-image:none !important; row-gap:6px !important}

/* L effet magnetique deplacait encore ces deux boutons au survol : il
   passe par la propriete translate, que les regles precedentes ne
   couvraient pas. Ils ne bougent plus d un pixel. */
.hdr-cta .btn, a.btn[href*="devenir-partenaire"], a.btn[href*="demander-un-devis"],
.hdr-cta .btn:hover, a.btn[href*="devenir-partenaire"]:hover, a.btn[href*="demander-un-devis"]:hover{
  translate:none !important; --mx:0px !important; --my:0px !important;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease !important}

/* Joel : on ne distingue pas assez les logos. La bande des logos passe
   de 190 x 96 a 250 x 132, et la hauteur utile du logo de 56 a 84 px. */
.mq-i{width:250px !important; height:132px !important; margin-inline:14px !important; padding:18px !important}
.mq-i img{max-height:84px !important}
@media (max-width:980px){
  .mq-i{width:200px !important; height:110px !important; margin-inline:10px !important; padding:14px !important}
  .mq-i img{max-height:66px !important}
}
@media (max-width:620px){
  .mq-i{width:168px !important; height:94px !important; margin-inline:8px !important}
  .mq-i img{max-height:56px !important}
}

/* Sur telephone la fenetre de l assistant reservait 218 px sous elle pour
   les pastilles, et pouvait monter a 620 px de haut : le champ de saisie
   et le bouton d envoi se retrouvaient sous le bas de l ecran, donc
   inaccessibles. La fenetre tient desormais toujours dans la hauteur
   visible, quelle que soit la barre du navigateur. */
.iap{max-height:min(72vh, 620px, calc(100vh - 140px)) !important}
@supports (height: 100dvh){
  .iap{max-height:min(72vh, 620px, calc(100dvh - 140px)) !important}
}
@media (max-width:620px){
  .iap{
    left:10px !important; right:10px !important; width:auto !important;
    bottom:calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    max-height:calc(100vh - 152px) !important;
  }
  @supports (height: 100dvh){
    .iap{max-height:calc(100dvh - 152px) !important}
  }
}

/* La pastille jaune posee sur le bouton d Ayouk depassait du rond : le
   bouton a overflow:hidden et un rayon de 25 px, le point se retrouvait
   donc rogne en quartier jaune dans l angle. Les trois autres pastilles
   n en ont pas : on l enleve. */
.ia-dot{display:none !important}