/* ============================================================
   VERINCO
   Registre : corporate moderne (référence tgcc.ma)
   Signature : titres à graisse mixte — léger + gras sur le mot clé
   Typo : Outfit (titres) + Inter (texte)
   ============================================================ */
:root{  --navy:#0B1F4A;
  --deep:#061530;
  --blue:#1B47B4;
  --blue-lt:#4C7BF0;
  --red:#E1251B;
  --green:#0E9F63;
  --ink:#101828;
  --grey:#5C6A85;
  --line:#E6EAF2;
  --soft:#F6F8FC;
  --white:#fff;

  --disp:'Outfit',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;

  --pad:clamp(20px,5vw,72px);
  --maxw:1320px;
  --sp:clamp(72px,10vw,140px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:16px;line-height:1.72;color:var(--grey);background:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:var(--sp)}

/* --- titres à graisse mixte : la signature TGCC --- */
h1,h2,h3,h4{font-family:var(--disp);color:var(--navy);font-weight:300;line-height:1.12;letter-spacing:-.02em}
h1 b,h2 b,h3 b,h4 b{font-weight:700}
h1{font-size:clamp(38px,6.4vw,82px)}
h2{font-size:clamp(30px,4.4vw,56px)}
h3{font-size:clamp(20px,2vw,25px);line-height:1.2}

.kick{
  font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--blue);display:block;margin-bottom:22px;
}
.lead{font-size:clamp(16.5px,1.5vw,19px);max-width:62ch;line-height:1.75}

.more{
  font-family:var(--disp);font-size:14px;font-weight:500;letter-spacing:.05em;
  color:var(--navy);display:inline-flex;align-items:center;gap:11px;
  padding-bottom:5px;border-bottom:1px solid var(--line);transition:.22s;
}
.more::after{content:"→";transition:transform .22s}
.more:hover{color:var(--blue);border-bottom-color:var(--blue)}
.more:hover::after{transform:translateX(6px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:.02em;
  padding:17px 34px;border-radius:999px;transition:.22s;
}
.btn-b{background:var(--blue);color:#fff}
.btn-b:hover{background:var(--navy);transform:translateY(-2px)}
.btn-g{background:var(--green);color:#fff}
.btn-g:hover{filter:brightness(.9);transform:translateY(-2px)}
.btn-o{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.btn-o:hover{background:#fff;color:var(--navy)}
.btn-w{border:1.5px solid var(--line);color:var(--navy)}
.btn-w:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}

/* photo, avec repli si le fichier n'existe pas */
.ph{background-color:var(--navy);background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===================== BARRE FIXE ===================== */
.topwrap{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .35s,box-shadow .35s}
.topwrap.solid{background:#fff;box-shadow:0 1px 24px rgba(11,31,74,.09)}
.nav-back{display:none}

.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);height:86px;transition:height .35s}
.topwrap.solid .head .wrap{height:76px}
.logo{flex:none}
.logo svg{height:54px;width:auto;transition:filter .35s}
.topwrap:not(.solid) .logo svg{filter:brightness(0) invert(1)}
@media(max-width:480px){
  .head .wrap{height:70px}
  .topwrap.solid .head .wrap{height:66px}
  .logo svg{height:46px}
}

.head .btn{
  white-space:nowrap;
  padding:10px 24px;
  line-height:1;
}

.nav{display:flex;align-items:center;gap:30px;margin-left:clamp(24px,3vw,56px)}
.nav > a,.dd > a{
  font-family:var(--disp);font-size:15px;font-weight:400;color:#fff;
  padding-block:8px;display:inline-block;position:relative;transition:color .22s;
}
.topwrap.solid .nav > a,.topwrap.solid .dd > a{color:var(--navy)}
.nav > a::after,.dd > a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:currentColor;transition:width .26s;
}
.nav > a:hover::after,.dd:hover > a::after,.nav > a.active::after,.dd > a.active::after{width:100%}
.nav > a.active,.dd > a.active{font-weight:600}
.dd{position:relative}
.dd-menu{
  position:absolute;top:calc(100% + 14px);left:-22px;min-width:310px;background:#fff;
  box-shadow:0 24px 60px rgba(11,31,74,.18);opacity:0;visibility:hidden;
  transform:translateY(10px);transition:.24s;padding:12px 0;
}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:block;padding:11px 26px;font-size:14.5px;color:var(--grey);transition:.18s}
.dd-menu a:hover{background:var(--soft);color:var(--navy);padding-left:32px}

.burger{display:none;flex-direction:column;gap:6px;padding:8px;z-index:2}
.burger span{width:26px;height:1.5px;background:#fff;display:block;transition:background .35s}
.topwrap.solid .burger span{background:var(--navy)}
@media(max-width:1200px){
  .nav,.head .btn{display:none}
  .burger{display:flex}
  .nav-back{display:block;position:fixed;inset:0;z-index:80;background:rgba(6,21,48,.55);opacity:0;visibility:hidden;transition:opacity .3s}
  .nav-back.show{opacity:1;visibility:visible}
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;position:fixed;
    top:0;right:0;bottom:0;width:min(400px,88vw);background:#fff;
    padding:calc(96px + env(safe-area-inset-top)) var(--pad) calc(40px + env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:-10px 0 50px rgba(11,31,74,.2);
  }
  .nav.open > a,.nav.open .dd > a{color:var(--navy);padding-block:15px;border-bottom:1px solid var(--line);font-size:15.5px}
  .nav.open .nav-cta{margin-top:18px;display:inline-flex;justify-content:center;font-size:16px;padding:14px 24px;color:#fff;border-bottom:0}
  .nav.open .nav-cta::after{display:none}
  .nav.open .dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:4px 0 12px 16px;min-width:0}
  .nav.open .dd-menu a{padding:12px 0;font-size:15px}
}

/* ===================== HÉROS (accueil) ===================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,21,48,.72) 0%,rgba(6,21,48,.34) 34%,rgba(6,21,48,.9) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:0 clamp(56px,8vw,104px)}
.hero h1{color:#fff;max-width:15ch;margin-bottom:26px}
.hero h1 b{color:#fff}
.hero .since{
  font-family:var(--disp);font-size:clamp(15px,1.5vw,19px);font-weight:200;
  color:rgba(255,255,255,.8);display:block;margin-bottom:26px;letter-spacing:.02em;
}
.hero p{color:rgba(255,255,255,.86);max-width:56ch;margin-bottom:38px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.scroll-hint{
  position:absolute;bottom:26px;right:var(--pad);z-index:2;
  font-family:var(--disp);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.55);writing-mode:vertical-rl;
}
@media(max-width:700px){.scroll-hint{display:none}}

/* ===================== BANNIÈRE PAGES INTÉRIEURES ===================== */
.pagehero{position:relative;min-height:clamp(340px,52vh,480px);display:flex;align-items:flex-end;color:#fff;padding-top:140px}
.pagehero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,21,48,.78) 0%,rgba(6,21,48,.45) 55%,rgba(6,21,48,.88) 100%)}
.pagehero .wrap{position:relative;z-index:2;padding-block:0 clamp(46px,6vw,80px)}
.pagehero .kick{color:#7FA3F5}
.pagehero h1{color:#fff;max-width:18ch;margin-bottom:18px}
.pagehero h1 b{color:#fff}
.pagehero p{color:rgba(255,255,255,.85);max-width:58ch}
.crumbs{font-family:var(--disp);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:16px;display:flex;gap:10px;flex-wrap:wrap}
.crumbs a{color:rgba(255,255,255,.9);transition:.2s}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}

/* ===================== INTRO ===================== */
.intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,90px);align-items:start}
@media(max-width:940px){.intro-grid{grid-template-columns:1fr}}

/* ===================== PÔLES ===================== */
.poles{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;background:var(--line);margin-top:clamp(44px,6vw,70px)}
.pole{background:#fff;padding:clamp(30px,3.2vw,44px) clamp(26px,2.6vw,38px);display:flex;flex-direction:column;transition:.3s}
.pole:hover{background:var(--soft)}
.pole .n{font-family:var(--disp);font-size:13px;font-weight:500;letter-spacing:.2em;color:var(--blue);margin-bottom:26px}
.pole h3{margin-bottom:14px}
.pole p{font-size:15px;margin-bottom:26px;flex:1}
.pole .more{align-self:flex-start}

/* ===================== DOMAINES (10) ===================== */
.dom-soft,.domaines{background:var(--soft)}
.dom-head{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.grid-dom{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(18px,2vw,28px)}
.dom{background:#fff;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.dom:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(11,31,74,.14)}
.dom-img{position:relative;aspect-ratio:16/9.4;overflow:hidden}
.dom-img .ph{position:absolute;inset:0;transition:transform .6s}
.dom:hover .dom-img .ph{transform:scale(1.07)}
.dom-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,21,48,.72),transparent 58%)}
.dom-img .n{position:absolute;top:18px;left:20px;z-index:2;font-family:var(--disp);font-size:12.5px;
  font-weight:500;letter-spacing:.18em;color:rgba(255,255,255,.85)}
.dom-img h3{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;color:#fff;font-weight:500;font-size:20px}
.dom-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.dom-body p{font-size:14.8px;line-height:1.68;margin-bottom:22px;flex:1}
.dom-body .more{align-self:flex-start}

/* ===================== BANDE ===================== */
.band{position:relative;color:#fff;background-attachment:fixed}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,21,48,.94),rgba(6,21,48,.62))}
.band .wrap{position:relative;z-index:2}
.band h2{color:#fff;max-width:20ch;margin-bottom:22px}
.band h2 b{color:#fff}
.band p{color:rgba(255,255,255,.82);max-width:54ch;margin-bottom:36px}
.band .btns{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:900px){.band{background-attachment:scroll}}

/* ===================== MOYENS HUMAINS ===================== */
.moyens-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,86px);align-items:center}
@media(max-width:940px){.moyens-grid{grid-template-columns:1fr}}
.moyens-img .ph{aspect-ratio:4/3.4;width:100%}
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:clamp(30px,4vw,44px)}
.fig{background:#fff;padding:26px 24px}
.fig .n{font-family:var(--disp);font-size:clamp(32px,4vw,48px);font-weight:300;color:var(--navy);line-height:1}
.fig .n span{font-weight:700}
.fig .l{font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:10px}

/* ===================== INTERVENTIONS ===================== */
.inter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.inter{position:relative;overflow:hidden;aspect-ratio:3/3.6}
.inter:nth-child(1),.inter:nth-child(6){grid-row:span 1;aspect-ratio:3/2.2}
.inter .ph{position:absolute;inset:0;transition:transform .7s}
.inter:hover .ph{transform:scale(1.06)}
.inter::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,21,48,.82),transparent 55%);transition:.4s}
.inter h4{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff;font-weight:400;font-size:19px}
.inter .tagl{position:absolute;left:22px;top:20px;z-index:2;font-family:var(--disp);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}
@media(max-width:900px){.inter-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.inter-grid{grid-template-columns:1fr}.inter,.inter:nth-child(1),.inter:nth-child(6){aspect-ratio:3/2.2}}

/* ===================== PAGES SERVICES ===================== */
.serv-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,6vw,80px);align-items:start}
@media(max-width:940px){.serv-grid{grid-template-columns:1fr}}
.serv-img .ph{aspect-ratio:16/11;width:100%}
.tick{list-style:none;margin-top:26px}
.tick li{display:flex;gap:14px;align-items:flex-start;padding-block:13px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink)}
.tick li:first-child{border-top:1px solid var(--line)}
.tick .mk{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(14,159,99,.12);color:var(--green);
  display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:3px}
.spec{background:var(--soft);border-left:3px solid var(--blue);padding:26px 28px;margin-top:clamp(30px,4vw,44px)}
.spec .k{font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.spec .v{font-family:var(--disp);font-size:clamp(24px,3vw,34px);font-weight:300;color:var(--navy);line-height:1.2}
.spec .v b{font-weight:700}
.spec p{font-size:14.5px;margin-top:8px}
.prest{list-style:none;margin-top:24px}
.prest li{position:relative;padding:15px 0 15px 34px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink)}
.prest li:first-child{border-top:1px solid var(--line)}
.prest li::before{content:"✓";position:absolute;left:4px;color:var(--green);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(32px,4vw,46px)}
.chips a{font-family:var(--disp);font-size:14.5px;font-weight:400;border:1px solid var(--line);
  padding:12px 24px;color:var(--navy);border-radius:999px;transition:.22s}
.chips a:hover{border-color:var(--blue);color:var(--blue)}
.chips span{font-family:var(--disp);font-size:14.5px;font-weight:400;border:1px solid var(--line);
  padding:12px 24px;color:var(--navy);border-radius:999px;transition:.22s}
.chips span:hover{border-color:var(--blue);color:var(--blue)}

/* ===================== POURQUOI LE CONTRÔLE ===================== */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);margin-top:clamp(40px,5vw,60px)}
.why .item{background:#fff;padding:34px 30px}
.why .ico{font-family:var(--disp);font-size:13px;font-weight:500;letter-spacing:.2em;color:var(--blue);margin-bottom:18px}
.why h3{font-size:20px;margin-bottom:10px}
.why p{font-size:15px}

/* ===================== RÉFÉRENCES ===================== */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:clamp(40px,5vw,60px)}
.ref{background:var(--soft);border:1px solid var(--line);padding:36px 20px;text-align:center;transition:.25s;display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:150px}
.ref:hover{background:#fff;border-color:var(--blue);transform:translateY(-4px);box-shadow:0 14px 34px rgba(11,31,74,.1)}
.ref .init{font-family:var(--disp);font-size:34px;font-weight:300;color:var(--blue)}
.ref .init b{font-weight:700}
.ref .nm{font-family:var(--disp);font-size:14.5px;color:var(--navy)}

/* ===================== GALERIE ===================== */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:clamp(40px,5vw,60px)}
.gal{position:relative;aspect-ratio:1;overflow:hidden;cursor:zoom-in;border:0;padding:0;width:100%}
.gal .ph{position:absolute;inset:0;transition:transform .6s}
.gal:hover .ph{transform:scale(1.07)}
.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,21,48,.5),transparent 45%);opacity:0;transition:.3s}
.gal:hover::after{opacity:1}
.gal span{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-family:var(--disp);
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:.3s}
.gal:hover span{opacity:1}
.lbox{position:fixed;inset:0;z-index:200;background:rgba(6,21,48,.94);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.lbox.open{display:flex}
.lbox .ph{max-width:min(1200px,94vw);max-height:92vh;aspect-ratio:auto;width:auto;height:auto;background:none}
.lbox .ph img{max-width:94vw;max-height:92vh;object-fit:contain}
.lbox .close{position:absolute;top:24px;right:30px;color:#fff;font-family:var(--disp);font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;background:none;border:0;cursor:pointer;transition:.2s}
.lbox .close:hover{color:#7FA3F5}
.lbox .cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);
  font-family:var(--disp);font-size:14px;letter-spacing:.08em}

/* ===================== DOCUMENTS ===================== */
.doc-list{margin-top:clamp(40px,5vw,56px)}
.doc{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding:24px 28px;border:1px solid var(--line);border-bottom-width:0;background:#fff;transition:.22s}
.doc:last-of-type{border-bottom-width:1px}
.doc:hover{border-color:var(--blue);box-shadow:0 12px 30px rgba(11,31,74,.08)}
.doc .t{font-family:var(--disp);font-weight:500;color:var(--navy);font-size:18px}
.doc .s{font-size:13.5px;color:var(--grey);margin-top:4px}
.doc .d{flex:none}
.btn-dl{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-size:13.5px;font-weight:500;
  color:var(--blue);border:1.5px solid var(--line);padding:11px 20px;border-radius:999px;transition:.22s}
.btn-dl:hover{border-color:var(--blue);background:var(--soft)}
.doc-note{font-size:13.5px;color:var(--grey);margin-top:18px;max-width:70ch}

/* ===================== RÉGLEMENTATION ===================== */
.reg-wrap{overflow-x:auto;margin-top:clamp(38px,5vw,58px)}
table{width:100%;border-collapse:collapse;min-width:700px}
thead th{
  font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);text-align:left;padding:0 24px 18px;border-bottom:1.5px solid var(--navy);white-space:nowrap;
}
tbody td{padding:20px 24px;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:middle}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--soft)}
td.eq{font-family:var(--disp);font-weight:500;color:var(--navy);font-size:16.5px}
td.fq{font-family:var(--disp);font-weight:700;color:var(--blue);white-space:nowrap;font-size:17px}
.reg-note{font-size:14px;margin-top:22px;max-width:78ch}

/* ===================== SECTEURS ===================== */

/* ===================== CONTACT ===================== */
.contact{background:var(--soft)}
.c-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px)}
@media(max-width:900px){.c-grid{grid-template-columns:1fr}}
.card{background:#fff;padding:clamp(28px,3.6vw,48px)}
.f{margin-bottom:20px}
.f label{display:block;font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);margin-bottom:9px}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  padding:14px 0;border:0;border-bottom:1px solid var(--line);background:transparent;transition:.2s;
}
.f input:focus,.f select:focus,.f textarea:focus{border-bottom-color:var(--blue);outline:none}
.f textarea{resize:vertical;min-height:100px}
.hint{font-size:13px;margin-top:16px}
.ci{padding:24px 0;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:0}
.ci .k{font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.ci .v{font-family:var(--disp);font-size:19px;font-weight:300;color:var(--navy);line-height:1.55}
.ci .v a:hover{color:var(--blue)}

/* ===================== PIED DE PAGE ===================== */
footer{background:var(--deep);color:rgba(255,255,255,.62);font-size:15px;padding-block:clamp(60px,7vw,96px) 0}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px}
footer h5{font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:22px}
footer li{list-style:none;margin-bottom:12px}
footer a{transition:color .2s}
footer a:hover{color:#fff}
.f-brand svg{height:56px;width:auto;margin-bottom:22px;filter:brightness(0) invert(1)}
.f-brand p{max-width:34ch;line-height:1.75}
.f-bot{border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(44px,5vw,64px);padding-block:24px 30px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}
@media(max-width:920px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}

/* ===================== WHATSAPP ===================== */
.wa{position:fixed;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:95;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.24);transition:.22s}
.wa:hover{transform:scale(1.09)}
.wa svg{width:29px;height:29px;fill:#fff}

/* ===================== RÉVÉLATION ===================== */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   MODE DÉMO — photos provisoires
   Images picsum.photos teintées en bleu VERINCO pour paraître
   voulues plutôt qu'aléatoires.
   ➜ À la livraison des vraies photos :
      1. remplacer les URL picsum par images/<nom>.jpg
      2. retirer  class="demo"  de la balise <body>
   ============================================================ */
body.demo .ph{background-color:var(--navy);background-blend-mode:luminosity}
body.demo .dom-img .ph{filter:contrast(1.06) brightness(.97)}

/* ===================== MOBILE ===================== */
@media(max-width:600px){
  .hero{min-height:92svh}
  .hero h1{font-size:clamp(34px,11vw,46px);max-width:12ch}
  .hero .since{font-size:15px;margin-bottom:20px}
  .hero p{margin-bottom:30px}
  .hero-btns{flex-direction:column;width:100%;gap:12px}
  .hero-btns .btn,.band .btns .btn{width:100%;justify-content:center;padding:16px 24px}
  .band .btns{flex-direction:column;width:100%;gap:12px}
  .pagehero{min-height:clamp(300px,60vh,360px);padding-top:110px}
  .crumbs{font-size:11px;letter-spacing:.12em}
  h2{font-size:clamp(26px,8vw,34px)}
  .intro-grid,.serv-grid,.moyens-grid,.c-grid{gap:30px}
  .grid-dom{grid-template-columns:1fr}
  .figs{grid-template-columns:repeat(2,1fr)}
  .ref-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ref{padding:24px 12px;min-height:120px}
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .doc{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .doc .d{width:100%}
  .btn-dl{justify-content:center;width:100%}
  .ci .v{font-size:17px}
  .f-grid{gap:32px}
  .kick{font-size:11px;letter-spacing:.22em}
  .lead{font-size:16px}
  .spec{padding:22px 20px}
  .chips a,.chips span{padding:12px 20px;font-size:14px}
  section{padding-block:clamp(56px,16vw,84px)}
}

/* hauteur 100dvh pour les smartphones */
@media(min-width:601px) and (max-width:900px){
  .grid-dom{grid-template-columns:repeat(2,1fr)}
  .hero-btns .btn{width:auto}
}