:root{
  --vf:#196B24; --vv:#4EA72E; --or:#E97132; --nv:#0E2841;
  --ivoire:#F6F8F3; --gris:#5C6A5E; --trait:#DDE4D8;
  --display:'Poppins',"Segoe UI",sans-serif;
  --body:'Open Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--nv);background:#fff;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.12;letter-spacing:-.02em;
  text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none}
h2{font-size:30px;font-size:clamp(25px,3.4vw,44px);font-weight:800;max-width:34ch}
h3{font-size:20px;font-weight:600}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--vf);display:flex;align-items:center;gap:12px;margin:0 0 18px;white-space:nowrap}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--trait)}

.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:14.5px;
  padding:13px 24px;border-radius:2px;text-decoration:none;transition:.25s;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden}
.btn-p{background:var(--vf);color:#fff}
.btn-p:hover{background:var(--vv);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(25,107,36,.9)}
.btn-o{background:var(--or);color:#fff}
.btn-o:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(233,113,50,.9)}
.btn-g{border-color:var(--nv);color:var(--nv)}
.btn-g:hover{background:var(--nv);color:#fff;transform:translateY(-2px)}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait);transition:.3s}
header.scrolled{box-shadow:0 6px 24px -18px rgba(14,40,65,.8)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.nav img.lg{height:54px;width:auto;max-width:none;object-fit:contain;display:block}
@media(max-width:680px){.nav img.lg{height:42px}}
.menu{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-family:var(--display);font-size:14.5px;font-weight:500}
.menu a{text-decoration:none;padding:6px 0;position:relative;text-decoration:none}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--vv);transition:.3s}
.menu a:hover::after,.menu a:focus-visible::after{width:100%}
.burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--nv)}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;background:var(--ivoire);padding:clamp(64px,9vw,150px) 0 clamp(70px,10vw,160px)}
.hero::before{content:"";position:absolute;top:-30px;left:-30px;width:280px;height:280px;opacity:.4;
  background-image:radial-gradient(var(--vv) 1.8px,transparent 1.9px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 72%);mask-image:linear-gradient(135deg,#000,transparent 72%)}
.hero::after{content:"";position:absolute;right:-120px;top:12%;width:min(52vw,620px);height:min(52vw,620px);border-radius:50%;
  background:radial-gradient(circle,rgba(78,167,46,.16),transparent 68%);animation:pulse 7s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:.5}}
.hero .eyebrow{max-width:none}
.hero h1{max-width:none;white-space:normal;text-wrap:balance}
.hero .baseline,.hero .hero-cta{max-width:62ch}
.hero h1{font-size:40px;font-size:clamp(30px,4.6vw,66px);font-weight:900;letter-spacing:-.035em;line-height:1.08}
.hero h1 em{font-style:normal;color:var(--vf);position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;left:0;bottom:6px;height:.16em;width:100%;
  background:rgba(78,167,46,.28);z-index:-1;transform-origin:left;animation:swipe 1s .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes swipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.baseline{font-family:var(--display);font-style:italic;font-weight:600;color:var(--vv);
  font-size:20px;font-size:clamp(19px,1.9vw,28px);margin:30px 0 0}
.hero p.lead{font-size:18px;font-size:clamp(17px,1.5vw,23px);color:var(--gris);max-width:62ch;margin:28px 0 0;line-height:1.62}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,3.4vw,48px)}
.fade{opacity:0;transform:translateY(20px);animation:up .8s cubic-bezier(.2,.7,.3,1) both}
.fade.d1{animation-delay:.1s}.fade.d2{animation-delay:.25s}.fade.d3{animation-delay:.4s}
.fade.d4{animation-delay:.55s}.fade.d5{animation-delay:.7s}
@keyframes up{to{opacity:1;transform:none}}

/* bandeau chiffres */
.preuve{background:var(--vf);color:#fff;position:relative;overflow:hidden}
.preuve::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;opacity:.18;
  background-image:radial-gradient(#fff 1.6px,transparent 1.7px);background-size:13px 13px}
.preuve .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:38px;padding-bottom:38px;position:relative;z-index:1}
.preuve div{border-left:2px solid rgba(255,255,255,.3);padding-left:16px}
.preuve b{font-family:var(--display);font-size:34px;font-weight:800;display:block;line-height:1}
.preuve small{font-size:12.5px;opacity:.9;line-height:1.5;display:block;margin-top:8px}

/* marquee */
.marquee{background:var(--nv);color:#fff;overflow:hidden;padding:14px 0;white-space:nowrap}
.mq{display:inline-block;animation:slide 26s linear infinite;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.mq span{padding:0 26px;opacity:.85}
.mq i{color:var(--vv);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* sections */
section{padding:92px 0}
.sec-head{max-width:64ch;margin-bottom:46px}
.sec-head p{color:var(--gris);font-size:17px;margin:16px 0 0}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--trait);border-radius:3px;padding:30px;background:#fff;transition:.3s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--vv);transition:.4s}
.card:hover::before{width:100%}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 46px -30px rgba(14,40,65,.55);border-color:var(--vv)}
.num{font-family:var(--mono);font-size:12px;color:#fff;background:var(--nv);width:32px;height:32px;
  display:grid;place-items:center;border-radius:2px;margin-bottom:18px;transition:.3s}
.card:hover .num{background:var(--vv)}
.card.acc .num{background:var(--or)}
.card p{color:var(--gris);font-size:15.5px;margin:14px 0 0}
.card ul{margin:16px 0 0;padding-left:0;list-style:none;font-size:14.5px;color:var(--gris)}
.card ul li{padding-left:20px;position:relative;margin-bottom:6px}
.card ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--vv)}

/* ===== SOLUTION (image réelle) ===== */
.solution{background:var(--nv);color:#fff;position:relative;overflow:hidden;padding:0}
.sol-img{position:relative;overflow:hidden}
.sol-img img{width:100%;transform:scale(1.05);transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.sol-img.in img{transform:scale(1)}
.sol-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,40,65,.35),transparent 26%,transparent 70%,rgba(10,30,49,.5));pointer-events:none}
.sol-legend{max-width:var(--max);margin:0 auto;padding:34px 24px 56px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}
.sol-legend h3{font-size:18px;margin-bottom:8px;color:#fff}
.sol-legend p{color:rgba(255,255,255,.72);font-size:14.5px;margin:0}
.sol-legend .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--vv)}
.sol-top{max-width:var(--max);margin:0 auto;padding:76px 24px 34px}
.sol-top h2{color:#fff;max-width:18ch}
.sol-top p{color:rgba(255,255,255,.75);max-width:60ch;margin:16px 0 0;font-size:17px}
.sol-top .eyebrow{color:var(--vv)}
.sol-top .eyebrow::after{background:rgba(255,255,255,.2)}

/* ===== PDG ===== */
.pdg{background:var(--ivoire);position:relative;overflow:hidden}
.pdg::before{content:"";position:absolute;left:-40px;bottom:-40px;width:300px;height:300px;opacity:.35;
  background-image:radial-gradient(var(--vv) 1.8px,transparent 1.9px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(45deg,#000,transparent 72%);mask-image:linear-gradient(45deg,#000,transparent 72%)}
.pdg-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center;position:relative;z-index:1}
.quote{font-family:var(--display);font-size:clamp(21px,2.6vw,30px);font-weight:600;line-height:1.35;
  color:var(--nv);margin:0 0 22px;position:relative;padding-left:26px}
.quote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;background:var(--vv)}
.pdg-name{font-family:var(--display);font-size:21px;font-weight:700;margin:0}
.pdg-role{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--vf);margin:6px 0 18px}
.pdg-bio{color:var(--gris);font-size:15.5px;margin:0 0 18px}
.pdg-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.pdg-facts span{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  border:1px solid var(--trait);background:#fff;padding:9px 15px;border-radius:99px;color:var(--nv)}

/* formations */
.methode{background:var(--nv);color:#fff;padding:36px;border-radius:3px;margin-bottom:26px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden}
.methode::after{content:"";position:absolute;right:-50px;bottom:-50px;width:230px;height:230px;opacity:.2;
  background-image:radial-gradient(var(--vv) 1.8px,transparent 1.9px);background-size:14px 14px}
.methode h3{font-size:25px;margin-bottom:10px}
.methode p{color:rgba(255,255,255,.78);font-size:15.5px;margin:0}
.triptyque{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.triptyque span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--vv);color:var(--vv);padding:9px 15px;border-radius:99px}
.form-card{border:1px solid var(--trait);border-radius:3px;overflow:hidden;background:#fff;transition:.3s;display:flex;flex-direction:column}
.form-card:hover{transform:translateY(-6px);box-shadow:0 26px 46px -30px rgba(14,40,65,.55)}
.form-top{height:6px;transition:.3s}
.form-card:hover .form-top{height:10px}
.form-body{padding:26px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:12px}
.form-body h3{font-size:18.5px;margin-bottom:10px}
.form-body p{color:var(--gris);font-size:14.5px;margin:0 0 16px}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--nv);border-top:1px dashed var(--trait);
  padding-top:14px;margin-top:auto;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.g2b{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}

/* espace */
.espace{background:var(--ivoire)}
.pilier{background:#fff;border:1px solid var(--trait);border-top:3px solid var(--vv);padding:28px;border-radius:3px;transition:.3s}
.pilier:hover{transform:translateY(-6px);box-shadow:0 26px 46px -30px rgba(14,40,65,.5)}
.pilier .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--vf);text-transform:uppercase}
.pilier h3{margin:12px 0 10px;font-size:19px}
.pilier p{color:var(--gris);font-size:14.5px;margin:0}
.pilier:nth-child(2){border-top-color:var(--or)}.pilier:nth-child(2) .k{color:var(--or)}
.pilier:nth-child(3){border-top-color:var(--nv)}.pilier:nth-child(3) .k{color:var(--nv)}

.partenaires{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.partenaires span{font-family:var(--display);font-weight:600;font-size:17px;color:var(--nv);
  border:1px solid var(--trait);padding:14px 26px;border-radius:2px;background:#fff;transition:.3s}
.partenaires span:hover{border-color:var(--vv);color:var(--vf);transform:translateY(-3px)}

/* promo */
.promo{background:var(--nv);color:#fff;position:relative;overflow:hidden}
.promo::after{content:"";position:absolute;right:-40px;bottom:-40px;width:300px;height:300px;opacity:.22;
  background-image:radial-gradient(var(--vv) 1.8px,transparent 1.9px);background-size:14px 14px}
.promo .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.promo h2{color:#fff}
.promo p{color:rgba(255,255,255,.8);margin:16px 0 0;font-size:16.5px}
.promo .stack{display:flex;flex-direction:column;gap:12px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.infos{padding:0;margin:0}
.infos li{list-style:none;display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--trait);align-items:flex-start}
.infos .ic{color:var(--vf);font-size:18px;flex:0 0 auto;width:22px}
.infos b{font-family:var(--display);display:block;font-size:15px}
.infos small{color:var(--gris);font-size:14px}
form label{font-family:var(--display);font-size:13px;font-weight:600;display:block;margin-bottom:6px}
form input,form select,form textarea{width:100%;padding:12px 14px;border:1px solid var(--trait);border-radius:2px;
  font-family:var(--body);font-size:15px;margin-bottom:16px;background:#fff;color:var(--nv);transition:.2s}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--vv);outline-offset:1px;border-color:var(--vv)}

footer{background:#0A1E31;color:rgba(255,255,255,.72);padding:56px 0 26px;font-size:14.5px}
footer h4{color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;font-family:var(--mono);font-weight:500}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:9px}
footer a{text-decoration:none;transition:.2s}
footer a:hover{color:var(--vv);padding-left:4px}
.f-logo{background:#fff;padding:14px 20px;border-radius:4px;display:inline-block;margin-bottom:18px}
.f-logo img{height:46px;width:auto;object-fit:contain;display:block}
.socials{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.socials a{width:36px;height:36px;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-family:var(--mono);transition:.25s}
.socials a:hover{border-color:var(--vv);background:rgba(78,167,46,.16);transform:translateY(-3px)}
.f-bas{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

.wa{position:fixed;right:20px;bottom:20px;z-index:80;background:#25D366;color:#fff;padding:14px 20px;
  border-radius:99px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:14.5px;
  box-shadow:0 14px 32px -10px rgba(37,211,102,.9);display:flex;gap:9px;align-items:center;
  animation:wapulse 3.2s ease-in-out infinite}
@keyframes wapulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.rv{opacity:0;transform:translateY(24px);transition:.75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:960px){
  .hero-grid,.g2,.contact-grid,.methode,.promo .wrap,.pdg-grid{grid-template-columns:1fr}
  .g3,.sol-legend{grid-template-columns:1fr 1fr}
  .preuve .wrap{grid-template-columns:1fr 1fr;gap:26px}
  .f-grid{grid-template-columns:1fr 1fr}
  }
@media(max-width:680px){
  .menu{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;flex-direction:column;
    gap:0;padding:12px 24px 20px;border-bottom:1px solid var(--trait)}
  .menu.open{display:flex}
  .menu li{border-bottom:1px solid var(--trait)}
  .menu a{display:block;padding:14px 0}
  .burger{display:block}
  .nav .btn{display:none}
  .g3,.g2b,.f-grid,.sol-legend{grid-template-columns:1fr}
  section{padding:64px 0}
  .sol-top{padding:60px 24px 28px}
  .wa{padding:13px 16px;font-size:0;gap:0}
  .wa::after{content:"WhatsApp";font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.fade{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ===== ACRONYME (signature) ===== */
.acro{background:var(--nv);color:#fff;position:relative;overflow:hidden;padding:96px 0}
.acro::before{content:"";position:absolute;left:-60px;top:-60px;width:340px;height:340px;opacity:.22;
  background-image:radial-gradient(var(--vv) 1.8px,transparent 1.9px);background-size:14px 14px}
.acro::after{content:"";position:absolute;right:-160px;bottom:-160px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(78,167,46,.22),transparent 66%);animation:pulse 8s ease-in-out infinite}
.acro .wrap{position:relative;z-index:2}
.acro .eyebrow{color:var(--vv)}
.acro .eyebrow::after{background:rgba(255,255,255,.18)}
.acro h2{color:#fff;margin-bottom:12px;max-width:none}
.acro .intro{color:rgba(255,255,255,.74);max-width:62ch;font-size:17px;margin:0 0 40px}
.letters{display:grid;gap:2px}
.lt{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:22px;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.09);opacity:0;transform:translateX(-18px);transition:.6s cubic-bezier(.2,.7,.3,1)}
.letters.in .lt{opacity:1;transform:none}
.lt b{font-family:var(--display);font-size:46px;font-weight:900;line-height:1;color:var(--vv);
  text-align:center;letter-spacing:0;font-variant-numeric:tabular-nums;display:block}
.lt span{font-family:var(--display);font-size:clamp(17px,2.2vw,24px);font-weight:600;color:#fff;
  letter-spacing:-.01em;line-height:1.25}
.acro-note{margin-top:34px;padding:22px 26px;border-left:3px solid var(--vv);background:rgba(78,167,46,.09);
  color:rgba(255,255,255,.86);font-size:16px;max-width:70ch}

/* ===== carte présence ===== */
.pays{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.pays span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:8px 14px;border-radius:99px;
  border:1px solid var(--trait);background:#fff;transition:.3s;cursor:default}
.pays span:hover{border-color:var(--vv);background:var(--vv);color:#fff;transform:translateY(-3px)}
.pays span.hq{background:var(--vf);color:#fff;border-color:var(--vf)}

/* ===== onglets services ===== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tab{font-family:var(--display);font-size:14px;font-weight:600;padding:11px 18px;border-radius:99px;
  border:1px solid var(--trait);background:#fff;color:var(--gris);cursor:pointer;transition:.25s}
.tab:hover{border-color:var(--vv);color:var(--vf)}
.tab.on{background:var(--vf);color:#fff;border-color:var(--vf);box-shadow:0 10px 22px -12px rgba(25,107,36,.9)}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.plist div{display:flex;gap:11px;align-items:flex-start;font-size:14.8px;color:var(--gris);
  background:#fff;border:1px solid var(--trait);padding:13px 15px;border-radius:3px;transition:.25s}
.plist div:hover{border-color:var(--vv);transform:translateX(4px)}
.plist i{color:var(--vv);font-style:normal;font-weight:700;flex:0 0 auto}

/* ===== parcours PDG ===== */
.parcours{margin-top:34px;position:relative;padding-left:26px}
.parcours::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--trait)}
.etape{position:relative;padding-bottom:20px}
.etape::before{content:"";position:absolute;left:-25px;top:7px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--vv);z-index:2;transition:.4s}
.etape:hover::before{transform:scale(1.35);background:var(--vv)}
.etape b{font-family:var(--display);font-size:15.5px;display:block}
.etape small{color:var(--gris);font-size:14px}
.etape .yr{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--vf);text-transform:uppercase}

/* ===== vie d'affaires ===== */
.aff{background:var(--nv);color:#fff;position:relative;overflow:hidden}
.aff::after{content:"";position:absolute;left:-50px;bottom:-50px;width:300px;height:300px;opacity:.2;
  background-image:radial-gradient(var(--vv) 1.8px,transparent 1.9px);background-size:14px 14px}
.aff .wrap{position:relative;z-index:1}
.aff h2{color:#fff}
.aff .sec-head p{color:rgba(255,255,255,.75)}
.aff .eyebrow{color:var(--vv)}
.aff .eyebrow::after{background:rgba(255,255,255,.18)}
.acard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:3px;padding:28px;transition:.3s}
.acard:hover{background:rgba(78,167,46,.12);border-color:var(--vv);transform:translateY(-6px)}
.acard .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--vv)}
.acard h3{color:#fff;margin:12px 0 10px;font-size:19px}
.acard p{color:rgba(255,255,255,.72);font-size:14.5px;margin:0}
.acard .tvbadge{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--or);color:#fff;padding:5px 11px;border-radius:99px}

@media(max-width:960px){.plist{grid-template-columns:1fr}}
@media(max-width:680px){
  .lt{grid-template-columns:44px 1fr;gap:14px}
  .lt b{font-size:34px}
  .acro{padding:64px 0}
}


/* ===== AVANT / APRES ===== */
.av{background:var(--ivoire);position:relative;overflow:hidden}
.switch{display:inline-flex;background:#fff;border:1px solid var(--trait);border-radius:99px;padding:5px;margin-bottom:30px;gap:4px}
.switch button{font-family:var(--display);font-weight:600;font-size:14px;padding:11px 26px;border-radius:99px;
  border:0;background:none;color:var(--gris);cursor:pointer;transition:.3s}
.switch button.on{color:#fff}
.switch button[data-s="avant"].on{background:#B4442A}
.switch button[data-s="apres"].on{background:var(--vf)}
.state{display:none}
.state.on{display:block;animation:fadein .55s cubic-bezier(.2,.7,.3,1) both}
.slist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sline{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--trait);
  border-left:4px solid var(--trait);padding:17px 19px;border-radius:3px;font-size:15.5px;transition:.3s}
.sline:hover{transform:translateX(5px)}
.state[data-s="avant"] .sline{border-left-color:#B4442A;color:#6B3226}
.state[data-s="apres"] .sline{border-left-color:var(--vv);color:var(--nv)}
.sline b{font-family:var(--mono);font-size:16px;flex:0 0 auto;line-height:1.3}
.state[data-s="avant"] .sline b{color:#B4442A}
.state[data-s="apres"] .sline b{color:var(--vv)}
.state-note{margin-top:22px;font-family:var(--display);font-size:19px;font-weight:600}
.state[data-s="avant"] .state-note{color:#B4442A}
.state[data-s="apres"] .state-note{color:var(--vf)}

/* ===== modules ===== */
.mod{border:1px solid var(--trait);border-radius:3px;background:#fff;overflow:hidden;transition:.3s}
.mod:hover{box-shadow:0 26px 46px -32px rgba(14,40,65,.5)}
.mod-h{padding:24px 28px;border-bottom:1px solid var(--trait);display:flex;gap:16px;align-items:center}
.mod-h .n{font-family:var(--display);font-weight:800;font-size:26px;color:#fff;background:var(--vf);
  width:48px;height:48px;display:grid;place-items:center;border-radius:3px;flex:0 0 auto}
.mod:nth-child(2) .mod-h .n{background:var(--nv)}
.mod-h h3{font-size:19px;margin:0}
.mod-h small{color:var(--gris);font-size:13.5px;display:block;margin-top:3px}
.mod-b{padding:24px 28px}
.step{display:flex;gap:13px;padding:10px 0;border-bottom:1px dashed var(--trait);font-size:15px;color:var(--gris)}
.step:last-child{border:0}
.step i{font-family:var(--mono);font-size:11.5px;color:var(--vv);font-style:normal;flex:0 0 auto;padding-top:3px;font-weight:600}

/* ===== fiche indexation ===== */
.fiche{background:var(--nv);border-radius:4px;padding:24px;color:#fff}
.fiche h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--vv);margin-bottom:16px}
.frow{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;padding:7px 0;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--mono);font-size:11.5px}
.frow span{color:rgba(255,255,255,.6);text-align:right}
.frow em{font-style:normal;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:2px;padding:6px 10px;color:rgba(255,255,255,.85)}
.frow:first-of-type em{background:rgba(233,113,50,.18);border-color:var(--or)}

/* ===== planète ===== */
.planete{background:linear-gradient(135deg,var(--vf),var(--vv));color:#fff;text-align:center;padding:64px 0;position:relative;overflow:hidden}
.planete::after{content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(#fff 1.6px,transparent 1.7px);background-size:15px 15px}
.planete .wrap{position:relative;z-index:1}
.planete h2{color:#fff;font-size:clamp(26px,3.6vw,40px)}
.planete p{color:rgba(255,255,255,.9);max-width:60ch;margin:16px auto 0;font-size:17px}

/* ===== réseaux ===== */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.rlink{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--trait);
  border-radius:3px;padding:17px 19px;text-decoration:none;transition:.3s}
.rlink:hover{border-color:var(--vv);transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(14,40,65,.5)}
.rlink .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-family:var(--mono);font-size:13px;font-weight:600;flex:0 0 auto}
.rlink b{font-family:var(--display);font-size:15px;display:block}
.rlink small{color:var(--gris);font-size:12.5px}

/* ===== bureaux ===== */
.bureaux{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.bur{border:1px solid var(--trait);border-left:4px solid var(--vv);padding:20px;border-radius:3px;background:#fff}
.bur .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--vf)}
.bur b{font-family:var(--display);display:block;font-size:16px;margin:8px 0 4px}
.bur small{color:var(--gris);font-size:13.5px;display:block;line-height:1.6}
.bur:nth-child(2){border-left-color:var(--nv)}
.bur:nth-child(2) .k{color:var(--nv)}

@media(max-width:960px){.res{grid-template-columns:1fr 1fr}.slist,.bureaux{grid-template-columns:1fr}}
@media(max-width:680px){.res{grid-template-columns:1fr}}


/* ===== GALERIE RÉFÉRENCES ===== */
.gal{background:var(--nv);color:#fff;position:relative;overflow:hidden}
.gal::before{content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px;opacity:.2;
  background-image:radial-gradient(var(--vv) 1.8px,transparent 1.9px);background-size:14px 14px}
.gal .wrap{position:relative;z-index:1}
.gal h2{color:#fff}
.gal .sec-head p{color:rgba(255,255,255,.75)}
.gal .eyebrow{color:var(--vv)}
.gal .eyebrow::after{background:rgba(255,255,255,.18)}
.gfilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.gf{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:none;
  color:rgba(255,255,255,.72);cursor:pointer;transition:.25s}
.gf:hover{border-color:var(--vv);color:#fff}
.gf.on{background:var(--vv);border-color:var(--vv);color:#fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gitem{position:relative;overflow:hidden;border-radius:3px;cursor:pointer;background:#0A1E31;
  border:1px solid rgba(255,255,255,.1);transition:.35s;aspect-ratio:4/3}
.gitem.hide{display:none}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1);filter:saturate(.95)}
.gitem:hover{border-color:var(--vv);transform:translateY(-5px);box-shadow:0 24px 44px -26px rgba(0,0,0,.9)}
.gitem:hover img{transform:scale(1.07)}
.gcap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(to top,rgba(6,20,34,.95),rgba(6,20,34,.55) 55%,transparent);pointer-events:none}
.gcap .city{font-family:var(--display);font-weight:700;font-size:16px;display:block;line-height:1.2}
.gcap .what{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vv)}
.gnote{margin-top:26px;font-size:14.5px;color:rgba(255,255,255,.6);font-family:var(--mono)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,20,34,.96);display:none;
  align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(6px)}
.lb.on{display:flex;animation:fadein .3s both}
.lb figure{margin:0;max-width:1000px;width:100%}
.lb img{width:100%;max-height:76vh;object-fit:contain;border-radius:3px}
.lb figcaption{color:#fff;font-family:var(--display);font-weight:600;font-size:17px;margin-top:16px;text-align:center}
.lb figcaption small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vv);font-weight:400;margin-top:5px}
.lb .x{position:absolute;top:18px;right:22px;background:none;border:1px solid rgba(255,255,255,.3);
  color:#fff;width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer;transition:.25s}
.lb .x:hover{border-color:var(--vv);background:rgba(78,167,46,.2)}
.lb .nav-b{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,.3);
  color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;cursor:pointer;transition:.25s}
.lb .nav-b:hover{border-color:var(--vv);background:rgba(78,167,46,.2)}
.lb .prev{left:18px}.lb .next{right:18px}

@media(max-width:960px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.grid{grid-template-columns:1fr}.lb .nav-b{width:38px;height:38px}}


/* ===== BANDE AUDIT (CTA principal) ===== */
.audit{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--nv) 0%,#123B5C 52%,var(--vf) 100%);
  color:#fff;border-radius:5px;margin-top:44px;padding:0}
.audit::after{content:"";position:absolute;right:-70px;top:-70px;width:340px;height:340px;opacity:.2;
  background-image:radial-gradient(var(--vv) 1.9px,transparent 2px);background-size:15px 15px}
.audit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--or)}
.audit-in{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .65fr;gap:36px;
  align-items:center;padding:44px 46px}
.audit .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--vv)}
.audit h3{font-size:clamp(23px,3vw,32px);font-weight:800;color:#fff;margin:12px 0 12px;line-height:1.15}
.audit p{color:rgba(255,255,255,.8);font-size:16px;margin:0;max-width:52ch}
.audit-act{display:flex;flex-direction:column;gap:12px}
.audit-act .btn{text-align:center}
.audit-tel{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.72);text-align:center;text-decoration:none;transition:.25s}
.audit-tel:hover{color:var(--vv)}
.audit-pts{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.audit-pts span{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.26);padding:7px 13px;border-radius:99px;color:rgba(255,255,255,.85)}
@media(max-width:880px){.audit-in{grid-template-columns:1fr;padding:34px 26px;gap:24px}}

/* accents orange plus présents */
.eyebrow::before{content:"";width:16px;height:2px;background:var(--or);flex:0 0 auto}
.sec-head h2::after{content:"";display:block;width:56px;height:4px;background:var(--or);margin-top:18px;border-radius:2px}
.acro h2::after,.gal h2::after,.aff h2::after,.promo h2::after{background:var(--vv)}
.planete h2::after{display:none}


/* ===== GALERIE FORMATION (fond clair) ===== */
.galf{background:var(--ivoire);position:relative;overflow:hidden}
.galf::before{content:"";position:absolute;left:-60px;bottom:-60px;width:320px;height:320px;opacity:.32;
  background-image:radial-gradient(var(--vv) 1.8px,transparent 1.9px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(45deg,#000,transparent 72%);mask-image:linear-gradient(45deg,#000,transparent 72%)}
.galf .wrap{position:relative;z-index:1}
.galf .gitem{background:#fff;border-color:var(--trait)}
.galf .gitem:hover{border-color:var(--vv)}
.galf .gcap{background:linear-gradient(to top,rgba(10,30,49,.92),rgba(10,30,49,.4) 60%,transparent)}
.galf .gcap .what{color:var(--vv)}
.hero-shot{position:relative;border-radius:4px;overflow:hidden;margin-bottom:22px;border:1px solid var(--trait);cursor:pointer}
.hero-shot img{width:100%;display:block;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.hero-shot:hover img{transform:scale(1.03)}
.hero-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:46px 26px 22px;
  background:linear-gradient(to top,rgba(10,30,49,.94),transparent);color:#fff}
.hero-shot .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--vv);display:block}
.hero-shot strong{font-family:var(--display);font-size:clamp(17px,2.2vw,23px);font-weight:700;display:block;margin-top:6px}


/* ===== TERRASSE / LIEU ===== */
.terrasse{margin-top:34px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:4px;overflow:hidden}
.terrasse-img{display:grid;grid-template-columns:2fr 1fr;gap:3px;background:rgba(255,255,255,.13)}
.terrasse-img figure{margin:0;overflow:hidden;position:relative;cursor:pointer}
.terrasse-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.terrasse-img figure:hover img{transform:scale(1.06)}
.terrasse-img .stack{display:grid;grid-template-rows:1fr 1fr;gap:3px}
.terrasse-txt{padding:28px 30px;display:grid;grid-template-columns:1.4fr .6fr;gap:28px;align-items:center}
.terrasse-txt h3{color:#fff;font-size:22px;margin-bottom:10px}
.terrasse-txt p{color:rgba(255,255,255,.76);font-size:15.5px;margin:0}
.terrasse-txt .pts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.terrasse-txt .pts span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.26);padding:7px 13px;border-radius:99px;color:rgba(255,255,255,.86)}

/* ===== SIÈGE ===== */
.siege{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.siege figure{margin:0;border-radius:3px;overflow:hidden;border:1px solid var(--trait);position:relative;cursor:pointer}
.siege img{width:100%;display:block;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.siege figure:hover img{transform:scale(1.05)}
.siege figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;color:#fff;
  background:linear-gradient(to top,rgba(10,30,49,.92),transparent);font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:880px){
  .terrasse-img,.terrasse-txt,.siege{grid-template-columns:1fr}
  .terrasse-img .stack{grid-template-columns:1fr 1fr;grid-template-rows:none}
}


/* ==========================================================================
   SYSTÈME RESPONSIVE COMPLET — de la montre au téléviseur
   Ce bloc est placé en dernier : il fait autorité sur tout ce qui précède.
   ========================================================================== */

/* --- Bases fluides : la typographie suit la largeur, sans jamais casser --- */
html{
  font-size:100%;
  -webkit-text-size-adjust:100%;      /* pas de zoom auto iOS en paysage */
  text-size-adjust:100%;
}
body{font-size:16px;font-size:clamp(15px,0.55vw + 13px,19px)}
.wrap{width:100%;padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}
section{padding-top:clamp(48px,6vw,110px);padding-bottom:clamp(48px,6vw,110px)}
.sec-head{margin-bottom:clamp(28px,3.4vw,54px)}
img,video,iframe{max-width:100%;height:auto}
.gitem img,.terrasse-img img{height:100%}

/* ==========================================================================
   1. TRÈS PETITS TÉLÉPHONES  (≤ 380 px)
   ========================================================================== */
@media (max-width:380px){
  .nav{height:64px}
  .nav img.lg{height:34px}
  .menu{top:64px}
  .hero{padding:44px 0 52px}
  .hero h1{font-size:31px;line-height:1.08}
  .hero p.lead{font-size:16px}
  .baseline{font-size:17px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;text-align:center}
  h2{font-size:25px}
  .preuve b{font-size:26px}
  .lt{grid-template-columns:40px 1fr;gap:10px}
  .lt b{font-size:26px}
  .lt span{font-size:15px}
  .audit-in{padding:24px 18px}
  .card,.form-body,.pilier,.acard,.mod-b,.mod-h{padding:20px}
  .methode{padding:22px}
  .terrasse-txt{padding:20px}
  .fiche{padding:16px}
  .frow{grid-template-columns:1fr;gap:4px}
  .frow span{text-align:left}
}

/* ==========================================================================
   2. TÉLÉPHONES  (≤ 600 px)
   ========================================================================== */
@media (max-width:600px){
  .eyebrow{white-space:normal}
  .g2,.g3,.g2b,.grid,.res,.slist,.bureaux,.siege,.plist,
  .f-grid,.sol-legend,.contact-grid,.pdg-grid,
  .methode,.promo .wrap,.audit-in,.terrasse-txt,.terrasse-img,
  .preuve .wrap{grid-template-columns:1fr!important}
  .terrasse-img .stack{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .preuve div{border-left:0;border-top:2px solid rgba(255,255,255,.3);padding:12px 0 0 0}
  .promo .stack{width:100%}
  .promo .stack .btn{text-align:center}
  .audit-act .btn{width:100%}
  .tabs{gap:6px}
  .tab{font-size:12.5px;padding:9px 13px}
  .switch{width:100%}
  .switch button{flex:1;padding:11px 10px;font-size:13px}
  .gfilters{gap:6px}
  .gf{font-size:10.5px;padding:8px 12px}
  .partenaires span{font-size:15px;padding:11px 18px}
  .pays span{font-size:11px;padding:7px 11px}
        .lb{padding:12px}
  .lb figcaption{font-size:14.5px}
  .lb .x{top:10px;right:12px;width:38px;height:38px}
  .f-bas{flex-direction:column;gap:8px}
}

/* --- Téléphone en paysage : on écrase les hauteurs --- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:34px 0 40px}
  section{padding-top:40px;padding-bottom:40px}
  .menu{max-height:70vh;overflow-y:auto}
  .lb img{max-height:64vh}
}

/* ==========================================================================
   3. GRANDS TÉLÉPHONES ET PETITES TABLETTES  (601 – 900 px)
   ========================================================================== */
@media (min-width:601px) and (max-width:900px){
  .contact-grid,.pdg-grid,.methode,.promo .wrap,
  .audit-in,.terrasse-txt,.sol-legend{grid-template-columns:1fr}
  .g2,.g2b,.g3,.grid,.res,.slist,.siege,.plist,.bureaux{grid-template-columns:1fr 1fr}
  .preuve .wrap{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
    .terrasse-img{grid-template-columns:1fr}
  .terrasse-img .stack{grid-template-columns:1fr 1fr;grid-template-rows:none}
}

/* --- Le menu horizontal ne tient plus : passage au menu déroulant --- */
@media (max-width:1000px){
  .burger{display:block}
  .nav .btn{display:none}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:10px clamp(16px,3vw,40px) 18px;
    border-bottom:1px solid var(--trait);box-shadow:0 18px 30px -24px rgba(14,40,65,.7);
    max-height:calc(100vh - 78px);overflow-y:auto;
  }
  .menu.open{display:flex}
  .menu li{border-bottom:1px solid var(--trait)}
  .menu li:last-child{border-bottom:0}
  .menu a{display:block;padding:15px 0;font-size:16px}
  .menu a::after{display:none}
}
@media (min-width:1001px){
  .menu{display:flex!important;position:static;flex-direction:row;padding:0;
    background:none;border:0;box-shadow:none;max-height:none;overflow:visible}
  .menu li{border:0}
  .burger{display:none}
}

/* ==========================================================================
   4. TABLETTES  (901 – 1180 px)
   ========================================================================== */
@media (min-width:901px) and (max-width:1180px){

  .g3,.grid,.res{grid-template-columns:repeat(3,1fr)}
  .pdg-grid{grid-template-columns:.9fr 1.1fr;gap:34px}
  .sol-legend{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1.4fr 1fr 1fr}
}

/* ==========================================================================
   5. GRANDS ÉCRANS  (≥ 1500 px)
   ========================================================================== */
@media (min-width:1500px){
  :root{--max:1340px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .res{grid-template-columns:repeat(4,1fr)}
}

/* ==========================================================================
   6. TRÈS GRANDS ÉCRANS ET TÉLÉVISEURS  (≥ 1800 px)
   Distance de lecture plus grande : tout grossit, rien ne s'étire.
   ========================================================================== */
@media (min-width:1800px){
  :root{--max:1560px}
  body{font-size:20px;line-height:1.7}
  .hero{padding:110px 0 120px}
  .hero h1{font-size:74px}
  .hero p.lead{font-size:25px;max-width:60ch}
  .baseline{font-size:23px}
  h2{font-size:52px}
  h3{font-size:23px}
  .eyebrow{font-size:14px}
  .btn{font-size:17px;padding:16px 30px}
  .preuve b{font-size:42px}
  .preuve small{font-size:15px}
  .lt b{font-size:56px}
  .card p,.form-body p,.pilier p,.acard p{font-size:17px}
  .nav{height:92px}
  .nav img.lg{height:64px}
  .menu{font-size:17px;gap:32px}
}

@media (min-width:2400px){
  :root{--max:1780px}
  body{font-size:23px}
  .hero h1{font-size:88px}
  h2{font-size:62px}
  .nav{height:104px}
  .nav img.lg{height:74px}
  .btn{font-size:19px;padding:18px 34px}
  .grid,.res{grid-template-columns:repeat(4,1fr)}
}

/* ==========================================================================
   7. ÉCRANS TACTILES ET TÉLÉCOMMANDES
   Pas de survol : les effets de hover ne doivent pas rester « collés ».
   ========================================================================== */
@media (hover:none){
  .card:hover,.form-card:hover,.pilier:hover,.acard:hover,
  .gitem:hover,.rlink:hover,.partenaires span:hover,
  .siege figure:hover,.terrasse-img figure:hover{transform:none;box-shadow:none}
  .gitem:hover img,.hero-shot:hover img,.sol-img img,
  .siege figure:hover img,.terrasse-img figure:hover img{transform:none}
  .card::before{display:none}
  /* cibles tactiles confortables */
  .menu a,.tab,.gf,.switch button,.btn,.socials a,.rlink{min-height:44px}
  .socials a{width:44px;height:44px}
}

/* Navigation au clavier / télécommande : la cible doit être visible de loin */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.gitem:focus-visible{
  outline:3px solid var(--vv);outline-offset:3px;border-radius:2px;
}
.gitem,.hero-shot,.siege figure,.terrasse-img figure{scroll-margin-top:100px}

/* ==========================================================================
   8. IMPRESSION
   ========================================================================== */
@media print{
  header,.wa,.lb,.marquee,.gfilters,.switch,.tabs,form,.burger{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  .hero,.preuve,.acro,.gal,.aff,.promo,.planete,.solution{background:#fff!important;color:#000!important}
  .acro h2,.gal h2,.aff h2,.promo h2,.planete h2,.sol-top h2{color:#000!important}
  .state{display:block!important}
  section{padding:18px 0;break-inside:avoid}
  .grid{grid-template-columns:repeat(3,1fr)}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}


/* Une image absente ne doit jamais laisser un trou dans la mise en page */
img[data-broken]{display:none}
figure[data-broken]{display:none!important}

/* sept entrées dans le menu : on resserre sur les écrans intermédiaires */
@media (min-width:1001px) and (max-width:1340px){
  .menu{gap:18px;font-size:13.5px}
  .nav .btn{padding:12px 18px;font-size:13.5px}
  .nav img.lg{height:46px}
}

/* ==========================================================================
   MON COMPTE
   ========================================================================== */
.tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}

.acct-btn{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--trait);
  border-radius:99px;padding:7px 16px 7px 8px;cursor:pointer;font-family:var(--display);
  font-weight:600;font-size:14px;color:var(--nv);transition:.25s;white-space:nowrap}
.acct-btn:hover{border-color:var(--vv);color:var(--vf);transform:translateY(-1px)}
.acct-btn .avatar{width:28px;height:28px;border-radius:50%;background:var(--vf);color:#fff;
  display:grid;place-items:center;flex:0 0 auto}

.acct-ov{position:fixed;inset:0;z-index:150;background:rgba(14,40,65,.74);backdrop-filter:blur(6px);
  display:none;overflow-y:auto;padding:clamp(16px,5vh,60px) 16px}
.acct-ov.on{display:block;animation:fadein .24s both}
.acct-win{position:relative;max-width:620px;margin:0 auto;background:#fff;border-radius:5px;
  border-top:4px solid var(--vf);padding:clamp(26px,3.4vw,44px);
  box-shadow:0 40px 80px -32px rgba(0,0,0,.6)}
.acct-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border:1px solid var(--trait);
  background:#fff;border-radius:50%;font-size:16px;color:var(--gris);cursor:pointer;transition:.2s}
.acct-x:hover{border-color:var(--vv);color:var(--vf);background:var(--ivoire)}

.acct-head{margin-bottom:22px}
.acct-k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--vf)}
.acct-win h3{font-size:clamp(21px,2.4vw,27px);margin-top:8px;color:var(--nv)}
.acct-sub{color:var(--gris);font-size:15.5px;margin:0 0 22px}

.acct-tabs{display:flex;gap:6px;background:var(--ivoire);padding:5px;border-radius:99px;margin-bottom:24px}
.atab{flex:1;border:0;background:none;padding:11px 14px;border-radius:99px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:14px;color:var(--gris);transition:.25s}
.atab:hover{color:var(--vf)}
.atab.on{background:var(--vf);color:#fff;box-shadow:0 8px 18px -10px rgba(25,107,36,.9)}

.avue{display:none}
.avue.on{display:block;animation:fadein .3s both}

.profils{display:grid;gap:10px}
.profil{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--trait);
  border-left:4px solid var(--trait);border-radius:3px;padding:17px 19px;cursor:pointer;transition:.25s}
.profil:hover{border-color:var(--vv);border-left-color:var(--vv);transform:translateX(4px);
  box-shadow:0 16px 30px -22px rgba(14,40,65,.5)}
.profil .pk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--or);display:block}
.profil b{font-family:var(--display);font-size:17px;color:var(--nv);display:block;margin:6px 0 4px}
.profil small{color:var(--gris);font-size:13.8px;display:block;line-height:1.5}

.acct-win label{font-family:var(--display);font-size:13px;font-weight:600;display:block;margin-bottom:6px}
.acct-win input,.acct-win select{width:100%;padding:13px 15px;border:1px solid var(--trait);
  border-radius:2px;font-family:var(--body);font-size:15.5px;margin-bottom:17px;color:var(--nv);background:#fff}
.acct-win input:focus,.acct-win select:focus{outline:2px solid var(--vv);outline-offset:1px;border-color:var(--vv)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;align-items:flex-start;gap:9px;font-family:var(--body);font-size:14px;
  font-weight:400;color:var(--gris);cursor:pointer;margin:2px 0 20px}
.check input{width:auto;margin:2px 0 0}
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.lien-fin{font-size:14px;color:var(--vf);font-weight:600;text-decoration:none}
.lien-fin:hover{text-decoration:underline}
.btn.large{width:100%;text-align:center;padding:15px}
.retour{border:0;background:none;color:var(--vf);font-family:var(--display);font-weight:600;
  font-size:14px;cursor:pointer;padding:0;margin-bottom:14px}
.retour:hover{text-decoration:underline}
.acct-note{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--trait);
  font-size:13px;color:var(--gris);text-align:center}

@media (max-width:1200px){.nav-cta{display:none}}
@media (max-width:1000px){
  .acct-label{display:none}
  .acct-btn{padding:7px;border-radius:50%}
}
@media (max-width:600px){
  .tools{gap:7px}
  .f2{grid-template-columns:1fr}
  .acct-win{padding:24px 18px}
  .acct-tabs{margin-bottom:18px}
}
@media (min-width:1800px){
  .acct-btn{font-size:17px;padding:9px 20px 9px 9px}
  .acct-btn .avatar{width:34px;height:34px}
  .acct-win{max-width:760px}
}
@media (hover:none){
  .acct-btn:hover,.profil:hover{transform:none;box-shadow:none}
  .acct-btn,.atab,.profil{min-height:44px}
}



/* ==========================================================================
   MENU PRINCIPAL À SOUS-MENUS
   ========================================================================== */
.menu{align-items:center}
.menu > li{position:relative}
.has-sub > .sub-top{display:inline-flex;align-items:center;gap:6px}
.has-sub > .sub-top .ch{font-size:10px;color:var(--gris);transition:.25s}
.has-sub:hover > .sub-top .ch,.has-sub.open > .sub-top .ch{transform:rotate(180deg);color:var(--vf)}

.sub{
  position:absolute;left:-14px;top:calc(100% + 14px);min-width:310px;list-style:none;
  background:#fff;border:1px solid var(--trait);border-top:3px solid var(--vf);
  border-radius:4px;padding:9px;margin:0;z-index:80;
  box-shadow:0 30px 55px -28px rgba(14,40,65,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.24s cubic-bezier(.2,.7,.3,1);
}
/* zone tampon : le curseur peut descendre sans fermer le sous-menu */
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.has-sub:hover > .sub,.has-sub:focus-within > .sub,.has-sub.open > .sub{
  opacity:1;visibility:visible;transform:none}

.sub li{border:0;margin:0}
.sub a{display:block;padding:11px 13px;border-radius:3px;text-decoration:none;transition:.2s;border:0}
.sub a::after{display:none}
.sub a:hover,.sub a:focus-visible{background:var(--ivoire)}
.sub a b{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--nv);display:block}
.sub a:hover b{color:var(--vf)}
.sub a small{font-family:var(--body);font-weight:400;font-size:12.8px;color:var(--gris);
  display:block;margin-top:3px;line-height:1.45}
.sub a.sub-cta{background:var(--vf);color:#fff;font-family:var(--display);font-weight:600;
  font-size:14px;text-align:center;margin-top:6px}
.sub a.sub-cta:hover{background:var(--vv);color:#fff}

/* --- menu déroulant sur téléphone et tablette : accordéon --- */
@media (max-width:1000px){
  .menu{align-items:stretch}
  .has-sub > .sub-top{justify-content:space-between;width:100%}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--vv);border-radius:0;padding:2px 0 10px 14px;
    margin:0 0 6px;min-width:0;display:none;background:none}
  .has-sub.open > .sub{display:block}
  .has-sub::after{display:none}
  .sub a{padding:10px 4px}
  .sub a.sub-cta{margin-top:8px;padding:12px}
}

/* --- écrans intermédiaires : on resserre --- */
@media (min-width:1001px) and (max-width:1500px){
  .menu{gap:13px;font-size:12.8px}
  .nav .btn{padding:12px 16px;font-size:13.5px}
  .nav img.lg{height:46px}
  .sub{min-width:280px}
}
@media (min-width:1800px){
  .sub{min-width:360px}
  .sub a b{font-size:16.5px}
  .sub a small{font-size:14px}
}


/* mots clés des services */
.mots{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--trait)}
.mots span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:8px 13px;
  border-radius:99px;border:1px solid var(--trait);background:var(--ivoire);color:var(--nv);white-space:nowrap}
.mots span.edit{border-color:var(--vv);background:rgba(78,167,46,.1);color:var(--vf);font-weight:500}
.sub-large{min-width:400px}
@media (min-width:1800px){.sub-large{min-width:480px}}
@media (max-width:1000px){.sub-large{min-width:0}}


/* triptyque affiché au bas du sous-menu Formations */
.sub-slogan{font-family:var(--display);font-style:italic;font-weight:600;font-size:14px;
  color:var(--vv);text-align:center;padding:12px 8px 4px;margin-top:6px;
  border-top:1px solid var(--trait);letter-spacing:.01em}


/* ==========================================================================
   EN-TÊTE : aucun libellé ne doit se couper en deux lignes
   ========================================================================== */
.nav{gap:clamp(20px,3vw,54px)}
.brand,.nav > a:first-child{margin-right:clamp(6px,1.6vw,26px)}
.menu > li > a{white-space:nowrap}
.sub-top{white-space:nowrap}
.nav .btn{white-space:nowrap}
.acct-btn{white-space:nowrap}

/* le sous-menu, lui, peut respirer sur plusieurs lignes */
.sub a b,.sub a small{white-space:normal}

@media (min-width:1001px) and (max-width:1400px){
  .menu{gap:15px;font-size:13px}
  .nav{gap:24px}
  .sub-large{min-width:300px}
}
@media (min-width:1501px) and (max-width:1700px){
  .menu{gap:18px;font-size:13.6px}
}


/* ==========================================================================
   RÉSERVATION ET PAIEMENT
   ========================================================================== */
.res-ov{position:fixed;inset:0;z-index:160;background:rgba(14,40,65,.76);backdrop-filter:blur(6px);
  display:none;overflow-y:auto;padding:clamp(16px,4vh,54px) 16px}
.res-ov.on{display:block;animation:fadein .24s both}
.res-win{position:relative;max-width:700px;margin:0 auto;background:#fff;border-radius:5px;
  border-top:4px solid var(--or);padding:clamp(26px,3.4vw,44px);
  box-shadow:0 40px 80px -32px rgba(0,0,0,.6)}
.res-win label{font-family:var(--display);font-size:13px;font-weight:600;display:block;margin-bottom:6px}
.res-win input,.res-win select{width:100%;padding:13px 15px;border:1px solid var(--trait);
  border-radius:2px;font-family:var(--body);font-size:15.5px;margin-bottom:17px;color:var(--nv);background:#fff}
.res-win input:focus,.res-win select:focus{outline:2px solid var(--vv);outline-offset:1px;border-color:var(--vv)}

.etapes{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap}
.et{flex:1;min-width:110px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);padding:9px 6px;text-align:center;
  border-bottom:3px solid var(--trait);transition:.3s}
.et.on{color:var(--vf);border-bottom-color:var(--or);font-weight:500}

.rvue{display:none}
.rvue.on{display:block;animation:fadein .3s both}

.recap{background:var(--ivoire);border-left:4px solid var(--vf);border-radius:3px;
  padding:18px 20px;margin-bottom:24px}
.recap div{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:14.5px;color:var(--gris)}
.recap div b{color:var(--nv);font-family:var(--display);text-align:right}
.recap .total{border-top:1px solid var(--trait);margin-top:8px;padding-top:12px;font-size:17px}
.recap .total b{font-size:21px;font-weight:800;color:var(--vf)}

.moyens{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.moyen{text-align:left;background:#fff;border:1px solid var(--trait);border-left:4px solid var(--trait);
  border-radius:3px;padding:15px 16px;cursor:pointer;transition:.25s}
.moyen:hover{border-color:var(--vv);border-left-color:var(--vv);transform:translateY(-3px);
  box-shadow:0 16px 30px -22px rgba(14,40,65,.5)}
.moyen.on{border-color:var(--vf);border-left-color:var(--or);background:rgba(78,167,46,.07)}
.moyen .mk{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--or);display:block}
.moyen b{font-family:var(--display);font-size:16px;color:var(--nv);display:block;margin:5px 0 4px}
.moyen small{color:var(--gris);font-size:12.8px;display:block;line-height:1.45}

.detail{background:var(--nv);color:#fff;border-radius:3px;padding:20px 22px;margin-bottom:20px;
  animation:fadein .3s both}
.detail h5{font-family:var(--display);font-size:15px;color:var(--vv);margin:0 0 10px}
.detail p{color:rgba(255,255,255,.8);font-size:14.5px;margin:0 0 12px}
.detail .ligne{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);
  font-size:12.5px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.detail .ligne:last-child{border-bottom:0}
.detail .ligne span{color:rgba(255,255,255,.6)}
.detail .ligne b{color:#fff;text-align:right}
.detail input{margin-bottom:0}

.res-actions{display:flex;gap:12px;flex-wrap:wrap}
.res-actions .btn{flex:1;text-align:center;min-width:150px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.fin-ok{text-align:center;padding:14px 0 4px}
.coche{width:64px;height:64px;border-radius:50%;background:var(--vf);color:#fff;font-size:30px;
  display:grid;place-items:center;margin:0 auto 18px}
.fin-ok h4{font-family:var(--display);font-size:23px;color:var(--nv);margin:0 0 12px}
.fin-ok p{color:var(--gris);font-size:15.5px;margin:0 0 10px}
.fin-sub{font-size:14px!important;color:var(--gris)}
.fin-ok .btn{margin-top:16px}

@media (max-width:600px){
  .moyens{grid-template-columns:1fr}
  .res-win{padding:24px 18px}
  .etapes{gap:4px}
  .et{font-size:9.5px;min-width:0}
  .res-actions .btn{min-width:0}
}
@media (hover:none){.moyen:hover{transform:none;box-shadow:none}}


/* ==========================================================================
   EN-TÊTE : logo au coin, menu centré, actions à droite
   ========================================================================== */
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);justify-content:flex-start}
.nav > a:first-child{margin-right:auto;flex:0 0 auto}
.nav nav{flex:0 1 auto}
.wrap.nav{max-width:none;width:100%;
  padding-left:clamp(14px,1.6vw,30px);padding-right:clamp(14px,1.6vw,30px)}

/* bouton d'audit mis en avant */
.btn-audit{background:var(--or);color:#fff;font-weight:700;letter-spacing:.01em;
  box-shadow:0 12px 26px -12px rgba(233,113,50,.95);border:0;position:relative;overflow:hidden}
.btn-audit:hover{background:#F0803C;transform:translateY(-2px);
  box-shadow:0 16px 32px -12px rgba(233,113,50,1)}
.btn-audit::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  animation:brille 4.2s ease-in-out infinite}
@keyframes brille{0%,70%{left:-60%}100%{left:130%}}

/* sous-menu sur deux colonnes, avec intertitres */
.sub-deux{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;min-width:640px;align-items:start}
.sub-deux > .col{display:block}
.sub-deux > .col > ul{list-style:none;margin:0 0 6px;padding:0}
.col-titre{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gris);padding:8px 13px 9px;
  border-bottom:1px solid var(--trait);margin-bottom:5px}
.sub-deux > .col > .col-titre:not(:first-child){margin-top:12px}

/* ==========================================================================
   RECHERCHE PAR MOT CLÉ
   ========================================================================== */
.icon-btn{width:42px;height:42px;border:1px solid var(--trait);background:#fff;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--nv);transition:.25s;flex:0 0 auto}
.icon-btn:hover{border-color:var(--vv);color:var(--vf);background:rgba(78,167,46,.08)}

.search-ov{position:fixed;inset:0;z-index:170;background:rgba(14,40,65,.76);backdrop-filter:blur(6px);
  display:none;padding:clamp(50px,10vh,120px) 18px 20px;overflow-y:auto}
.search-ov.on{display:block;animation:fadein .22s both}
.search-box{max-width:760px;margin:0 auto}
.search-field{display:flex;align-items:center;gap:12px;background:#fff;border-radius:4px;
  padding:16px 18px;box-shadow:0 30px 60px -26px rgba(0,0,0,.6);color:var(--gris)}
.search-field input{flex:1;border:0;outline:0;font-family:var(--body);font-size:18px;
  color:var(--nv);background:none;padding:0;margin:0}
.search-field button{border:0;background:none;font-size:18px;color:var(--gris);cursor:pointer;
  width:34px;height:34px;border-radius:50%;transition:.2s}
.search-field button:hover{background:var(--ivoire);color:var(--nv)}

.cles{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cles-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);width:100%;margin-bottom:2px}
.cles button{font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:99px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;
  cursor:pointer;transition:.22s}
.cles button:hover{background:var(--vv);border-color:var(--vv)}

.results{margin-top:16px;border-radius:4px}
.results a{display:block;background:#fff;padding:16px 18px;text-decoration:none;
  border-bottom:1px solid var(--trait);transition:.2s}
.results a:first-child{border-radius:4px 4px 0 0}
.results a:last-child{border-bottom:0;border-radius:0 0 4px 4px}
.results a:hover,.results a:focus-visible{background:var(--ivoire)}
.results .rp{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
.results .rt{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--nv);display:block;margin-top:4px}
.results .rx{font-size:14px;color:var(--gris);margin-top:5px;display:block}
.results mark{background:rgba(78,167,46,.3);color:inherit;padding:0 2px;border-radius:2px}
.results .vide{background:#fff;padding:24px 18px;border-radius:4px;color:var(--gris);text-align:center}
.search-hint{color:rgba(255,255,255,.62);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-align:center;margin:16px 0 0}
.search-hint kbd{border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:2px 6px}

@media (max-width:1300px){
  .sub-deux{min-width:520px}
  .menu{gap:14px;font-size:13px}
}
@media (max-width:1000px){
  .sub-deux{grid-template-columns:1fr;min-width:0}
  .acct-label{display:none}
  .acct-btn{padding:7px;border-radius:50%}
  .nav-cta{display:inline-block;padding:11px 16px;font-size:13px}
}
@media (max-width:720px){
  .nav-cta{display:none}
  .icon-btn{width:38px;height:38px}
}
@media (min-width:1800px){
  .icon-btn{width:52px;height:52px}
  .search-field input{font-size:22px}
  .sub-deux{min-width:760px}
}
@media (hover:none){
  .btn-audit::after{display:none}
  .btn-audit:hover{transform:none}
  .icon-btn,.cles button{min-height:44px}
}


/* ==========================================================================
   ACCUEIL
   ========================================================================== */
.hero h1{max-width:16ch}
.hero p.lead{max-width:54ch}

.hero-mini{display:flex;gap:clamp(18px,3vw,38px);margin-top:clamp(30px,3.6vw,48px);
  padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--trait);flex-wrap:wrap}
.hero-mini div{display:flex;flex-direction:column}
.hero-mini b{font-family:var(--display);font-size:clamp(26px,2.8vw,38px);font-weight:800;
  color:var(--vf);line-height:1}
.hero-mini span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin-top:6px}

/* visuel : photo principale, incrustation et pastille */

@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}


/* flèche de défilement */
.hero-fleche{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);transition:.25s}
.hero-fleche:hover{color:var(--vf)}
.hero-fleche i{font-style:normal;font-size:17px;color:var(--vf);animation:saute 2.2s ease-in-out infinite}
@keyframes saute{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}

@media (max-width:1000px){
        .hero-fleche{display:none}
}
@media (max-width:600px){
        .hero-mini{gap:22px}
}
@media (min-width:1800px){
    }
@media (hover:none){
  .hv-inc,  }


/* ==========================================================================
   PIED DE PAGE : même architecture que l'en-tête, sans redondance
   ========================================================================== */
.f-haut{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,60px);
  align-items:center;padding-bottom:36px;margin-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.f-marque p{max-width:56ch;margin:0}
.f-cta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-left:4px solid var(--or);border-radius:4px;padding:24px 26px}
.f-cta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vv);display:block}
.f-cta b{font-family:var(--display);font-size:19px;font-weight:700;color:#fff;
  display:block;margin:9px 0 18px;line-height:1.3}
.f-cta .btn{width:100%;text-align:center}
.f-tel{display:block;text-align:center;margin-top:12px;font-family:var(--mono);
  font-size:12px;color:rgba(255,255,255,.6);text-decoration:none}
.f-tel:hover{color:var(--vv)}

.f-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}

.f-coord{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.f-coord .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--vv);display:block}
.f-coord b{font-family:var(--display);font-size:15px;color:#fff;display:block;margin:7px 0 4px}
.f-coord b a{text-decoration:none}
.f-coord b a:hover{color:var(--vv)}
.f-coord small{color:rgba(255,255,255,.6);font-size:13px;line-height:1.55;display:block}

@media (max-width:1100px){
  .f-grid{grid-template-columns:repeat(3,1fr)}
  .f-haut{grid-template-columns:1fr}
  .f-coord{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .f-grid{grid-template-columns:1fr 1fr}
  .f-coord{grid-template-columns:1fr}
}
@media (max-width:460px){
  .f-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   PHOTOS DU PDG : diptyque au même format, cadres réguliers
   ========================================================================== */
.pdg-photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.pp{margin:0;position:relative;overflow:hidden;border-radius:4px;background:var(--nv);
  aspect-ratio:3/4;cursor:pointer;border:1px solid var(--trait)}
.pp img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.pp:hover img{transform:scale(1.05)}
.pp figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;
  background:linear-gradient(to top,rgba(10,30,49,.94),transparent);pointer-events:none}
.pp figcaption .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--vv)}

/* la première photo est légèrement mise en avant */
.pp-1{border-top:3px solid var(--vf);box-shadow:0 26px 46px -28px rgba(14,40,65,.6)}
.pp-2{margin-top:30px;border-top:3px solid var(--or)}

.pp-badge{position:absolute;left:50%;transform:translateX(-50%);bottom:-16px;z-index:3;
  background:var(--vf);color:#fff;padding:9px 18px;border-radius:99px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 14px 28px -12px rgba(25,107,36,.9)}

.pdg-grid{align-items:start}
.pdg-grid > .pdg-photos{padding-bottom:26px}

@media (max-width:1000px){
  .pdg-photos{max-width:520px;margin:0 auto}
}
@media (max-width:520px){
  .pdg-photos{grid-template-columns:1fr;gap:12px}
  .pp-2{margin-top:0}
  .pp{aspect-ratio:4/3}
  .pp img{object-position:center 25%}
  .pp-badge{position:static;transform:none;display:inline-block;margin-top:12px}
}
@media (hover:none){.pp:hover img{transform:none}}


/* ==========================================================================
   BARRE UTILITAIRE
   ========================================================================== */
.topbar{background:var(--nv);color:rgba(255,255,255,.82);font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:9px;padding-bottom:9px;max-width:none;
  padding-left:clamp(14px,1.6vw,30px);padding-right:clamp(14px,1.6vw,30px)}
.tb-slogan{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--vv)}
.tb-liens{display:flex;align-items:center;gap:22px}
.tb-liens a,.tb-liens button{color:rgba(255,255,255,.82);text-decoration:none;font-family:var(--body);
  font-size:13px;background:none;border:0;cursor:pointer;padding:0;transition:.2s;white-space:nowrap}
.tb-liens a:hover,.tb-liens button:hover{color:var(--vv)}
.tb-lang{display:flex;align-items:center;gap:8px;padding-left:20px;border-left:1px solid rgba(255,255,255,.2);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em}
.tb-lang b{color:var(--vv)}
.tb-lang a{opacity:.55}


/* ==========================================================================
   QUEL EST VOTRE BESOIN ?
   ========================================================================== */
.besoin{background:var(--ivoire)}
.bes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bes{display:flex;flex-direction:column;justify-content:space-between;min-height:172px;
  background:#fff;border:1px solid var(--trait);border-top:3px solid var(--vv);
  border-radius:3px;padding:22px;text-decoration:none;transition:.3s}
.bes:hover{transform:translateY(-6px);border-color:var(--vv);border-top-color:var(--or);
  box-shadow:0 26px 46px -30px rgba(14,40,65,.55)}
.bes .bk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--vf)}
.bes b{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--nv);
  display:block;margin:10px 0 16px;line-height:1.35}
.bes .go{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--vf);transition:.3s}
.bes:hover .go{color:var(--vv);transform:translateX(4px)}
.bes-cta{background:var(--nv);border-color:var(--nv);border-top-color:var(--or)}
.bes-cta .bk{color:var(--vv)}
.bes-cta b{color:#fff}
.bes-cta .go{color:var(--or)}

/* ==========================================================================
   RAPPELEZ-NOUS
   ========================================================================== */
.rappel{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:4px;
  padding:26px 28px;margin-bottom:36px}
.rappel .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--vv)}
.rappel b{font-family:var(--display);font-size:19px;color:#fff;display:block;margin:8px 0 6px}
.rappel small{color:rgba(255,255,255,.6);font-size:13.5px}
.rap-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}
.rap-form input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:2px;padding:12px 14px;color:#fff;font-family:var(--body);font-size:14px;width:100%}
.rap-form input::placeholder{color:rgba(255,255,255,.45)}
.rap-form input:focus{outline:2px solid var(--vv);outline-offset:1px}

/* ==========================================================================
   RETOUR EN HAUT
   ========================================================================== */
.haut{position:fixed;right:20px;bottom:88px;z-index:75;width:44px;height:44px;border-radius:50%;
  background:var(--nv);color:#fff;display:grid;place-items:center;text-decoration:none;font-size:18px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s;
  box-shadow:0 14px 28px -12px rgba(14,40,65,.9)}
.haut.on{opacity:1;visibility:visible;transform:none}
.haut:hover{background:var(--vf)}

@media (max-width:1200px){
  .bes-grid{grid-template-columns:repeat(3,1fr)}
  .rappel{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .topbar .wrap{justify-content:center}
  .tb-liens{gap:16px;font-size:12.5px}
}
@media (max-width:760px){
  .bes-grid{grid-template-columns:1fr 1fr}
  .rap-form{grid-template-columns:1fr}
}
@media (max-width:520px){
  .bes-grid{grid-template-columns:1fr}
  .tb-liens{flex-wrap:wrap;justify-content:center;gap:12px}
  .tb-lang{padding-left:12px}
  .haut{right:16px;bottom:76px;width:40px;height:40px}
}
@media (min-width:1800px){
  .topbar{font-size:15px}
  .bes b{font-size:19px}
}
@media (hover:none){
  .bes:hover{transform:none;box-shadow:none}
}


/* coordonnées : téléphone détaché en bas */
.f-coord .tel{display:block;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:12.5px;color:var(--vv)}
.f-coord .tel a{text-decoration:none;color:var(--vv)}
.f-coord .tel a:hover{color:#fff}

/* ligne légale */
.legal a{text-decoration:none;transition:.2s}
.legal a:hover{color:var(--vv);text-decoration:underline}

/* six colonnes de navigation */
.f-grid{grid-template-columns:repeat(6,1fr);gap:22px}
@media (max-width:1300px){.f-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.f-grid{grid-template-columns:1fr}}


/* ==========================================================================
   ACCUEIL : image de fond, texte en surimpression
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--nv);
  padding:clamp(72px,11vw,170px) 0 clamp(96px,12vw,190px);min-height:clamp(520px,74vh,880px);
  display:flex;align-items:center}
.hero::before,.hero::after{display:none}

.hero-fond{position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index:0;overflow:hidden}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:center 45%;
  transform:scale(1.06);animation:zoomlent 26s ease-in-out infinite alternate}
@keyframes zoomlent{from{transform:scale(1.06)}to{transform:scale(1.16)}}

/* voile : lisible à gauche, image dégagée à droite */
.voile{position:absolute;top:0;right:0;bottom:0;left:0;display:block;background:rgba(8,22,38,.62);
  background:linear-gradient(100deg,rgba(8,22,38,.97) 0%,rgba(8,22,38,.93) 30%,
             rgba(8,22,38,.72) 52%,rgba(8,22,38,.34) 76%,rgba(8,22,38,.5) 100%)}
.voile::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;display:block;
  background:linear-gradient(to top,rgba(8,22,38,.72),transparent 34%)}
.trame{position:absolute;top:0;right:0;bottom:0;left:0;display:block;opacity:.16;
  background-image:radial-gradient(var(--vv) 1.5px,transparent 1.6px);background-size:15px 15px;
  -webkit-mask-image:linear-gradient(105deg,#000,transparent 52%);
  mask-image:linear-gradient(105deg,#000,transparent 52%)}

.hero-in{position:relative;z-index:2;width:100%;flex:1 1 auto;max-width:var(--max)}
.hero .eyebrow{color:var(--vv)}
.hero .eyebrow::after{background:rgba(255,255,255,.22)}
.hero .eyebrow::before{background:var(--or)}
.hero h1{color:#fff;max-width:17ch;text-shadow:0 3px 26px rgba(0,0,0,.55)}
.hero h1 em{color:var(--vv)}
.hero h1 em::after{background:rgba(78,167,46,.3)}
.hero p.lead{color:rgba(255,255,255,.9);max-width:56ch;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero .baseline{color:var(--vv);text-shadow:0 2px 14px rgba(0,0,0,.5)}

.btn-clair{border:2px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(3px);
  background:rgba(255,255,255,.06)}
.btn-clair:hover{background:#fff;color:var(--nv);border-color:#fff;transform:translateY(-2px)}

.hero-mini{display:flex;gap:clamp(16px,2.6vw,40px);margin-top:clamp(30px,3.6vw,48px);
  padding-top:clamp(22px,2.6vw,32px);border-top:1px solid rgba(255,255,255,.2);
  flex-wrap:wrap;align-items:flex-start}
.hero-mini div{flex:0 1 auto}
.hero-mini span{white-space:nowrap}
.hero-mini div{display:flex;flex-direction:column}
.hero-mini b{font-family:var(--display);font-size:clamp(26px,2.8vw,38px);font-weight:800;
  color:var(--vv);line-height:1;text-shadow:0 3px 18px rgba(0,0,0,.6)}
.hero-mini span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-top:6px;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* légendes posées sur l'image */
.hero-legende{position:absolute;right:clamp(16px,3vw,48px);bottom:clamp(74px,9vw,120px);
  z-index:2;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.hl{display:flex;align-items:center;gap:9px;background:rgba(10,26,44,.72);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);
  padding:9px 16px;border-radius:99px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:#fff;white-space:nowrap;
  opacity:0;transform:translateX(18px);animation:venir .8s cubic-bezier(.2,.7,.3,1) both}
.hl-1{animation-delay:1.1s}
.hl-2{animation-delay:1.35s}
@keyframes venir{to{opacity:1;transform:none}}
.hl i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.hl-1 i{background:var(--or);box-shadow:0 0 0 0 rgba(233,113,50,.7);animation:pulseP 2.6s infinite}
.hl-2 i{background:var(--vv);box-shadow:0 0 0 0 rgba(78,167,46,.7);animation:pulseP 2.6s .8s infinite}
@keyframes pulseP{70%{box-shadow:0 0 0 9px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

.hero-fleche{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);transition:.25s}
.hero-fleche:hover{color:var(--vv)}
.hero-fleche i{font-style:normal;font-size:17px;color:var(--vv);animation:saute 2.2s ease-in-out infinite}

@media (max-width:1000px){
  .voile{background:linear-gradient(170deg,rgba(10,26,44,.9) 0%,rgba(10,26,44,.78) 45%,rgba(10,26,44,.88) 100%)}
  .hero-legende{position:static;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
    margin-top:26px;padding:0 clamp(16px,3vw,40px)}
  .hero-fleche{display:none}
  .hero{min-height:0;padding-bottom:clamp(56px,8vw,90px)}
}
@media (max-width:600px){
  .hero h1{max-width:none}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;text-align:center}
  .hl{font-size:10.5px;padding:8px 13px}
}
@media (min-width:1800px){
  .hero-mini b{font-size:44px}
  .hl{font-size:14px;padding:11px 20px}
}
@media (prefers-reduced-motion:reduce){
  .hero-fond img{animation:none;transform:none}
}


/* ==========================================================================
   ADAPTATION FINALE — ce bloc est le dernier, il fait autorité
   Objectif : rien ne déborde, rien ne se coupe, tout reste lisible,
   de la montre connectée au téléviseur.
   ========================================================================== */

/* aucun élément ne peut dépasser la largeur de l'écran */
html,body{max-width:100%;overflow-x:hidden}
*{min-width:0}
img,svg,video,table{max-width:100%}
pre,code,kbd{white-space:pre-wrap;word-break:break-word}

/* --- SOUS-MENUS : jamais plus larges que l'écran --- */
.sub,.sub-large,.sub-deux{max-width:calc(100vw - 32px)}

/* ==========================================================================
   TÉLÉPHONES — jusqu'à 600 px
   ========================================================================== */
@media (max-width:600px){
  /* toutes les grilles passent en une colonne */
  .g2,.g3,.g2b,.grid,.res,.slist,.plist,.bureaux,.siege,.f-grid,.f-coord,
  .sol-legend,.contact-grid,.pdg-grid,.methode,.promo .wrap,.audit-in,
  .terrasse-txt,.terrasse-img,.preuve .wrap,.bes-grid,.rap-form,.rappel,
  .f-haut,.sub-deux,.moyens,.f2,.pdg-photos,.hero-grid{
    grid-template-columns:1fr!important}

  .terrasse-img .stack{grid-template-columns:1fr 1fr}
  .preuve div{border-left:0;border-top:2px solid rgba(255,255,255,.3);padding:14px 0 0}
  .preuve b{font-size:30px}

  /* le héro reste lisible sur l'image */
  .hero{min-height:0;padding:clamp(48px,12vw,80px) 0 clamp(56px,12vw,90px)}
  .hero h1{font-size:29px;font-size:clamp(26px,7.6vw,38px);max-width:none;letter-spacing:-.03em}
  .hero p.lead{font-size:16px}
  .hero-mini{gap:20px 26px}
  .hero-mini b{font-size:26px}
  .hero-mini span{white-space:normal}

  /* barre utilitaire compacte */
  .topbar{font-size:12px}
  .topbar .wrap{flex-wrap:wrap;justify-content:center;gap:10px}
  .tb-liens{flex-wrap:wrap;justify-content:center;gap:14px}

  /* fenêtres : plein écran confortable */
  .acct-win,.res-win{padding:22px 16px;border-radius:4px}
  .search-ov{padding-top:64px}
  .search-field{padding:13px 14px}
  .search-field input{font-size:16px}
  .cles button{font-size:11.5px;padding:8px 12px}

  /* tableaux de mots clés et pastilles */
  .mots span,.pays span,.pdg-facts span,.triptyque span{font-size:10.5px;padding:7px 11px}
  .tabs,.gfilters,.cles{gap:6px}

  /* pied de page */
  .f-bas{flex-direction:column;gap:10px;text-align:center}
  .legal{line-height:2}
}

/* ==========================================================================
   GRANDS TÉLÉPHONES ET TABLETTES — 601 à 1000 px
   ========================================================================== */
@media (min-width:601px) and (max-width:1000px){
  .g2,.g2b,.g3,.grid,.res,.slist,.siege,.plist,.bureaux,.bes-grid,
  .f-grid,.f-coord,.preuve .wrap,.moyens,.pdg-photos{grid-template-columns:1fr 1fr}
  .hero-grid,.contact-grid,.pdg-grid,.methode,.promo .wrap,.audit-in,
  .terrasse-txt,.terrasse-img,.rappel,.f-haut,.sub-deux,.sol-legend{grid-template-columns:1fr}
  .rap-form{grid-template-columns:1fr 1fr}
  .terrasse-img .stack{grid-template-columns:1fr 1fr}
  .hero{min-height:0}
}

/* ==========================================================================
   TABLETTES LARGES ET PETITS ORDINATEURS — 1001 à 1300 px
   ========================================================================== */
@media (min-width:1001px) and (max-width:1300px){
  .bes-grid{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:repeat(3,1fr)}
  .f-coord{grid-template-columns:1fr 1fr}
  .g3,.grid,.res,.sol-legend{grid-template-columns:repeat(3,1fr)}
  .menu{gap:12px;font-size:12.6px}
  .nav{gap:16px}
  .nav img.lg{height:44px}
  .sub{min-width:280px}
  .sub-large{min-width:330px}
  .sub-deux{min-width:500px}
}

/* ==========================================================================
   TÉLÉVISEURS ET TRÈS GRANDS ÉCRANS — au-delà de 1800 px
   Distance de lecture : tout grossit, rien ne s'étire.
   ========================================================================== */
@media (min-width:1800px){
  :root{--max:1560px}
  body{font-size:20px;line-height:1.7}
  .hero h1{font-size:74px}
  .hero p.lead{font-size:24px;max-width:52ch}
  .baseline{font-size:28px}
  h2{font-size:52px}
  h3{font-size:24px}
  .btn{font-size:17px;padding:16px 30px}
  .preuve b{font-size:44px}
  .preuve small{font-size:15px}
  .bes b{font-size:19px}
  .card p,.form-body p,.pilier p,.acard p,.nav-card p{font-size:17px}
  .f-coord b{font-size:17px}
  .f-coord small,.f-coord .tel{font-size:15px}
  footer{font-size:16px}
}
@media (min-width:2400px){
  :root{--max:1800px}
  body{font-size:23px}
  .hero h1{font-size:88px}
  h2{font-size:62px}
  .bes-grid,.grid,.res{grid-template-columns:repeat(4,1fr)}
  .f-grid{grid-template-columns:repeat(6,1fr)}
}

/* ==========================================================================
   TACTILE ET TÉLÉCOMMANDE
   ========================================================================== */
@media (hover:none){
  .card:hover,.form-card:hover,.pilier:hover,.acard:hover,.gitem:hover,
  .rlink:hover,.nav-card:hover,.bes:hover,.moyen:hover,.profil:hover,
  .siege figure:hover,.terrasse-img figure:hover,.pp:hover,
  .partenaires span:hover,.dash-card:hover{transform:none;box-shadow:none}
  .gitem:hover img,.hero-shot:hover img,.pp:hover img,
  .siege figure:hover img,.terrasse-img figure:hover img{transform:none}
  .card::before,.nav-card::before{display:none}
  .btn-audit::after{display:none}
  .hero-fond img{animation:none;transform:none}
  a,button,.menu a,.tab,.gf,.switch button,.btn,.socials a,.rlink,
  .icon-btn,.acct-btn,.cles button,.profil,.moyen{min-height:44px}
  .socials a{width:44px;height:44px}
}

/* visibilité de la cible au clavier et à la télécommande */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.gitem:focus-visible,.hero-shot:focus-visible{
  outline:3px solid var(--vv);outline-offset:3px;border-radius:2px}

/* mouvement réduit */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.fade,.hl{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}


/* triptyque de la barre utilitaire : cliquable et réactif */
.tb-slogan{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vv);padding:5px 12px;border-radius:99px;border:1px solid transparent;
  transition:color .25s,background .25s,border-color .25s,transform .25s;white-space:nowrap}
.tb-slogan span{position:relative;transition:color .25s}
.tb-slogan i{font-style:normal;opacity:.55;transition:.25s}
.tb-slogan span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}

/* survol, appui, sélection au clavier : tout devient blanc */
.tb-slogan:hover,.tb-slogan:active,.tb-slogan.actif{
  color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.tb-slogan:hover span,.tb-slogan:active span,.tb-slogan.actif span{color:#fff}
.tb-slogan:hover i,.tb-slogan:active i,.tb-slogan.actif i{opacity:1;color:#fff}
.tb-slogan:hover span::after,.tb-slogan.actif span::after{transform:scaleX(1)}
.tb-slogan:focus-visible{color:#fff;background:rgba(255,255,255,.12);border-color:var(--vv)}
.tb-slogan:focus-visible span{color:#fff}
.tb-slogan:focus-visible i{opacity:1;color:#fff}
.tb-slogan:focus-visible span::after{transform:scaleX(1)}
.tb-slogan:active{transform:scale(.97)}

@media (max-width:1000px){
  .tb-slogan{display:inline-flex;font-size:10px;gap:7px;padding:5px 10px}
}
@media (max-width:600px){
  .tb-slogan{order:-1;width:100%;justify-content:center}
}
@media (min-width:1800px){
  .tb-slogan{font-size:14px;padding:7px 16px}
}


/* ==========================================================================
   PIED DE PAGE TOUJOURS EN BAS
   Sur une page courte, le pied de page se cale au bas de la fenêtre
   au lieu de laisser du blanc en dessous. Sur une page longue,
   il se place normalement à la suite du contenu.
   ========================================================================== */
html{height:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* tout ce qui compose le corps de la page occupe l'espace disponible */
body > header,body > .topbar,body > .fil{flex:0 0 auto}
body > footer{flex:0 0 auto;margin-top:auto}

/* les fenêtres et boutons flottants sortent du flux : ils ne comptent pas */
body > .lb,body > .search-ov,body > .res-ov,body > .acct-ov,
body > .wa,body > .haut{flex:0 0 auto}

/* les sections s'empilent sans s'étirer inutilement */
body > section,body > div:not(.topbar):not(.fil):not(.lb):not(.search-ov):not(.res-ov):not(.acct-ov){
  flex:0 0 auto}


/* ==========================================================================
   NAVIGATION PAR VUES
   L'en-tête et le pied de page ne sont jamais rechargés : seul le corps
   de la page change. Le passage d'une rubrique à l'autre est instantané.
   ========================================================================== */
[data-vue]{display:none}
[data-vue].vue-on{display:block;animation:vueEntre .38s cubic-bezier(.2,.7,.3,1) both}
@keyframes vueEntre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* fil d'Ariane de la vue courante */
.fil-vue{background:var(--ivoire);border-bottom:1px solid var(--trait);display:none}
.fil-vue.on{display:block}
.fil-vue .wrap{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.fil-vue a{color:var(--gris);text-decoration:none;cursor:pointer}
.fil-vue a:hover{color:var(--vf)}
.fil-vue span{color:var(--trait)}
.fil-vue b{color:var(--vf);font-weight:500}

/* entrée active du menu */
.menu .sub-top.actif,.menu > li > a.actif{color:var(--vf);font-weight:700}
.menu .sub-top.actif .ch{color:var(--vf)}

@media (prefers-reduced-motion:reduce){
  [data-vue].vue-on{animation:none}
}


/* ==========================================================================
   PIED DE PAGE : deux cercles de contact au centre
   ========================================================================== */
.f-haut{grid-template-columns:1.05fr auto .85fr;gap:clamp(24px,3vw,48px)}

.f-cercles{display:flex;gap:clamp(18px,2.4vw,34px);justify-content:center;align-items:flex-start}
.cercle{display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;width:150px;transition:transform .3s}
.cercle .anneau{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  color:var(--vv);background:rgba(78,167,46,.1);border:2px solid rgba(78,167,46,.5);
  transition:.32s cubic-bezier(.2,.7,.3,1);position:relative}
.cercle .anneau::after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;
  border-radius:50%;border:2px solid var(--vv);opacity:.55;
  animation:onde 3s ease-out infinite}
.cercle:nth-child(2) .anneau::after{animation-delay:1.5s}
@keyframes onde{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}

.cercle b{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;
  display:block;margin-top:14px;transition:.25s}
.cercle .num{font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:rgba(255,255,255,.66);margin-top:5px;transition:.25s;white-space:nowrap}

.cercle:hover,.cercle:focus-visible,.cercle:active{transform:translateY(-5px)}
.cercle:hover .anneau,.cercle:focus-visible .anneau,.cercle:active .anneau{
  background:var(--vv);border-color:var(--vv);color:#fff;
  box-shadow:0 16px 34px -14px rgba(78,167,46,.95)}
.cercle:hover .num,.cercle:focus-visible .num,.cercle:active .num{color:var(--vv)}
.cercle:active{transform:scale(.96)}

@media (max-width:1100px){
  .f-haut{grid-template-columns:1fr}
  .f-cercles{justify-content:flex-start;padding:6px 0}
}
@media (max-width:600px){
  .f-cercles{justify-content:center;gap:22px;width:100%}
  .cercle{width:132px}
  .cercle .anneau{width:70px;height:70px}
  .cercle .num{font-size:11px}
}
@media (min-width:1800px){
  .cercle{width:190px}
  .cercle .anneau{width:104px;height:104px}
  .cercle b{font-size:18px}
  .cercle .num{font-size:14.5px}
}
@media (hover:none){
  .cercle:hover{transform:none}
  .cercle .anneau::after{animation:none}
}



/* extrait de contrôle : les deux zones à la suite, sans le corps du site */
[data-vue]{display:block}
body{min-height:0;display:block}
.rv{opacity:1;transform:none}
.sep{background:var(--ivoire);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.sep .wrap{padding-top:26px;padding-bottom:26px;text-align:center}
.sep span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}

/* Final visual corrections: real social logos + green telephone numbers. */
.socials a svg{width:18px;height:18px;display:block;fill:currentColor}
.socials a{display:grid;place-items:center}
.f-coord .tel,.f-coord .tel a,.f-tel{color:var(--vv)!important}
.f-coord .tel a:hover{color:#8ad45f!important}