/* Outfit, grotesque géométrique, auto-hébergée (pas d'appel à Google) */
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --creme:#F9FEEA;
  --sauge:#AAAF9B;
  --anthracite:#202515;
  --accent:#24405E;
  --sauge-clair:#D6D9CC;
  --radius:24px;
  --radius-sm:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--creme);color:var(--anthracite);
  font-family:'Outfit','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}

/* ---------- typographie ---------- */
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.025em;line-height:1.04;}
h1{font-size:clamp(42px,5.6vw,84px);}
h2{font-size:clamp(30px,3.6vw,54px);}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.2;}
p{margin:0;}
.label{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--accent);
}
.lead{font-size:17px;line-height:1.6;}
.small{font-size:14px;line-height:1.6;opacity:.75;}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;padding:14px 28px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:.01em;transition:transform .15s;
}
.btn-primary{background:var(--anthracite);color:var(--creme);}
.btn-accent{background:var(--accent);color:var(--creme);}
/* sur fond anthracite, l'accent se fond (1,47) : c'est le bouton crème qui prend le relais */
.btn-cream{background:var(--creme);color:var(--anthracite);}
.btn-ghost{border:1px solid rgba(249,254,234,.55);color:var(--creme);}

/* ---------- header flottant ---------- */
header{
  position:absolute;top:0;left:0;right:0;z-index:10;padding:26px 0;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
/* symbole redessiné en SVG le 07/10 (inline, en currentColor), nom en texte à côté */
.logo{color:var(--creme);line-height:1.1;display:flex;align-items:center;gap:12px;}
.logo-sym{height:40px;width:auto;flex:none;fill:currentColor;}
.logo-txt b{display:block;font-size:19px;font-weight:600;letter-spacing:.18em;}
.logo-txt span{display:block;font-size:9px;letter-spacing:.3em;opacity:.8;}
nav{
  display:flex;align-items:center;gap:4px;padding:5px;
  background:rgba(249,254,234,.16);border:1px solid rgba(249,254,234,.22);
  border-radius:999px;backdrop-filter:blur(8px);
}
nav a{
  padding:9px 18px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--creme);
}
nav a.on{background:var(--creme);color:var(--anthracite);}
.tel{font-size:13px;font-weight:600;color:var(--creme);letter-spacing:.02em;}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer;}
.burger span{display:block;width:26px;height:2px;background:var(--creme);margin:5px 0;border-radius:2px;}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:96vh;display:flex;align-items:center;
  background:var(--anthracite);overflow:hidden;
}
.hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(18,22,12,.80) 0%,rgba(18,22,12,.62) 42%,rgba(18,22,12,.12) 78%,rgba(18,22,12,.05) 100%),
    linear-gradient(180deg,rgba(18,22,12,.55) 0%,rgba(18,22,12,.15) 40%,rgba(18,22,12,.55) 100%);
}
/* classe dédiée : `.hero .wrap` toucherait aussi le conteneur du header, qui est dans le hero.
   padding-top >= hauteur du header flottant, sinon le titre passe dessous sur les écrans peu hauts */
.hero-content{width:100%;position:relative;z-index:2;color:var(--creme);padding-top:170px;padding-bottom:190px;}
.hero h1{font-size:clamp(42px,5.2vw,78px);max-width:22ch;text-shadow:0 2px 26px rgba(18,22,12,.35);}
.hero h1 span{display:block;}
.hero .lead{max-width:520px;margin-top:28px;opacity:.92;}
.hero .actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- bento ---------- */
.bento-zone{margin-top:-150px;position:relative;z-index:5;}
.bento{
  background:var(--creme);border-radius:var(--radius);padding:14px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  box-shadow:0 24px 60px rgba(32,37,21,.18);
}
.card{border-radius:var(--radius-sm);padding:30px;display:flex;flex-direction:column;}
.card .small{margin-top:auto;padding-top:24px;}
.c-promesse{grid-column:span 2;background:#fff;}
.c-promesse h2{margin:14px 0 16px;font-size:clamp(30px,3vw,44px);}
.c-svc{background:#fff;border:1px solid var(--sauge-clair);}
.c-svc h3{margin-bottom:10px;}
.c-svc .go{margin-top:auto;padding-top:22px;font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.02em;}
.c-large{grid-column:span 3;position:relative;overflow:hidden;background:var(--sauge-clair);min-height:250px;}
.c-large img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.c-large .inner{position:relative;z-index:2;max-width:340px;}
.c-large::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(249,254,234,.96) 0%,rgba(249,254,234,.88) 34%,rgba(249,254,234,0) 72%);
}
.c-large .inner{position:relative;z-index:3;}
.c-dark{position:relative;overflow:hidden;background:var(--anthracite);color:var(--creme);min-height:250px;}
.c-dark img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;}
.c-dark .inner{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;}
.c-dark .num{font-size:56px;line-height:1;letter-spacing:-.04em;}
.c-dark .small{opacity:.85;}

/* ---------- sections ---------- */
section.pad{padding:110px 0;}
.sec-head{max-width:680px;margin-bottom:54px;}
.sec-head h2{margin:14px 0 18px;}

/* étapes */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.etape{padding:28px 24px 30px;border-top:2px solid var(--anthracite);}
.etape .n{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--accent);}
.etape h3{margin:16px 0 10px;font-size:19px;}

/* aperçu réalisations */
.projets{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.projet{border-radius:var(--radius-sm);overflow:hidden;background:var(--sauge);}
.ph{
  height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:24px;
  border:2px dashed rgba(32,37,21,.42);border-radius:var(--radius-sm);
  background:repeating-linear-gradient(135deg,rgba(32,37,21,.05) 0 12px,transparent 12px 24px);
}
.ph .t{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}
.ph .s{font-size:13px;max-width:280px;opacity:.85;}
/* carte avec photo réelle (accueil) */
a.projet{display:flex;flex-direction:column;transition:transform .2s ease;}
a.projet:hover{transform:translateY(-3px);}
.projet-img{position:relative;height:290px;overflow:hidden;}
.projet-img img{width:100%;height:100%;object-fit:cover;}
.projet-img .tag{position:absolute;left:16px;bottom:16px;background:var(--creme);padding:7px 13px;
  border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;}
.projet-nm{background:#fff;padding:22px 24px;flex:1;}
.projet-nm h3{margin-bottom:8px;}
@media(max-width:640px){ .projet-img{height:220px;} }
.projet .meta{display:flex;gap:0;background:var(--anthracite);color:var(--creme);}
.projet .meta > div{flex:1;padding:16px 18px;border-right:1px solid rgba(249,254,234,.16);}
.projet .meta > div:last-child{border-right:none;}
.projet .meta .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;}
.projet .meta .v{font-size:15px;font-weight:600;margin-top:3px;}

/* témoignages */
.temoins{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.temoin{background:#fff;border-radius:var(--radius-sm);padding:36px 34px;border:1px solid var(--sauge-clair);}
.temoin .q{font-size:44px;line-height:.7;color:var(--accent);}
.temoin p{margin:18px 0 22px;font-size:16.5px;line-height:1.6;}
.temoin .who{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.temoin .who span{display:block;font-weight:400;letter-spacing:.02em;text-transform:none;opacity:.65;margin-top:4px;}

/* zone */
.zone{background:var(--sauge);}
.zone .grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
/* l'accent tient sur le sauge (4,73), contrairement au terracotta : le libellé peut le porter */
.zone .label{color:var(--accent);}
.villes{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.villes span{background:rgba(32,37,21,.1);padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:600;}

/* cta */
.cta{background:var(--anthracite);color:var(--creme);text-align:center;}
.cta h2{margin-bottom:18px;}
.cta .lead{max-width:520px;margin:0 auto 32px;opacity:.8;}

footer{background:var(--anthracite);color:var(--creme);padding:0 0 46px;}
footer .top{border-top:1px solid rgba(249,254,234,.16);padding-top:44px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;}
footer .logo{margin-bottom:14px;}
footer a{font-size:14px;opacity:.75;display:block;margin-bottom:9px;}
footer a.logo{display:flex;opacity:1;font-size:inherit;}
footer .ft{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin-bottom:16px;}
footer .end{margin-top:44px;padding-top:20px;border-top:1px solid rgba(249,254,234,.14);font-size:12.5px;opacity:.55;}

/* bannière de consentement (js/consentement.js) : carte crème en bas à gauche,
   Refuser et Accepter de même taille, comme l'exige la CNIL */
.consentement{
  position:fixed;left:20px;bottom:20px;z-index:80;max-width:440px;
  background:var(--creme);color:var(--anthracite);border:1px solid var(--sauge-clair);
  border-radius:var(--radius-sm);padding:22px 24px;box-shadow:0 18px 50px rgba(32,37,21,.25);
  opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease;
}
.consentement.on{opacity:1;transform:none;}
.consentement p{font-size:14px;line-height:1.55;}
.consentement a{text-decoration:underline;}
.consentement-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.consentement .btn{border:0;cursor:pointer;font-family:inherit;text-align:center;padding:12px 18px;}
.btn-ghost-dark{background:transparent;color:var(--anthracite);box-shadow:inset 0 0 0 1px var(--anthracite);}
@media(max-width:640px){ .consentement{left:12px;right:12px;bottom:12px;max-width:none;} }
@media(prefers-reduced-motion:reduce){ .consentement{transition:none;} }

/* bandeau de maquette */
.flag{background:var(--accent);color:var(--creme);text-align:center;font-size:12.5px;padding:9px 20px;letter-spacing:.04em;position:relative;z-index:20;}
.flag b{letter-spacing:.12em;}

/* capture pleine page : neutralise le hero en vh quand la fenêtre est très haute */
@media(min-height:2000px){ .hero{min-height:760px;} }

@media(max-width:900px){
  .bento{grid-template-columns:1fr 1fr;}
  .c-promesse,.c-large,.c-dark{grid-column:span 2;}
  .etapes{grid-template-columns:1fr 1fr;}
  .projets,.temoins,.zone .grid{grid-template-columns:1fr;gap:22px;}
  .hero h1 span{padding-left:0 !important;}
  nav,.tel{display:none;}
  .burger{display:block;}
  .hero-content{padding-top:140px;padding-bottom:150px;}
  section.pad{padding:70px 0;}
  .wrap{padding-left:22px;padding-right:22px;}
}

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */

/* en-tête de page compact (remplace le hero plein écran) */
.pagehead{position:relative;background:var(--anthracite);color:var(--creme);overflow:hidden;}
.pagehead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.30;}
.pagehead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,22,12,.86) 0%,rgba(18,22,12,.62) 60%,rgba(18,22,12,.42) 100%);}
.pagehead-content{position:relative;z-index:2;padding-top:190px;padding-bottom:78px;}
/* l'accent est illisible sur l'anthracite (1,47) : ici le sur-titre passe en sauge (6,97) */
.pagehead .label{color:var(--sauge);}
.pagehead h1{font-size:clamp(36px,4.4vw,62px);max-width:20ch;margin-top:14px;}
.pagehead .lead{max-width:620px;margin-top:20px;opacity:.86;}

/* texte long */
.prose{max-width:70ch;}
.prose p+p{margin-top:16px;}
.anchors{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.anchors a{padding:9px 18px;border:1px solid var(--sauge-clair);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--accent);background:#fff;}

/* blocs de service */
.svc{padding:74px 0;border-top:1px solid var(--sauge-clair);}
.svc .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;}
.svc h2{font-size:clamp(27px,3vw,42px);}
.svc ul{margin:20px 0 0;padding-left:20px;}
.svc li{margin-bottom:9px;font-size:15.5px;}
.svc .aside{background:#fff;border:1px solid var(--sauge-clair);border-radius:var(--radius-sm);padding:26px 28px;}
.svc .aside h3{font-size:17px;margin-bottom:12px;}
/* contenu de la prestation, dans les mots du client : liste cochée, sans cadre,
   pour ne pas concurrencer l'encadré « Dans quels cas » */
.inclus{margin-top:30px;}
.inclus h3{font-size:17px;margin-bottom:4px;}
.svc .inclus ul{list-style:none;padding:0;margin:12px 0 0;}
.svc .inclus li{position:relative;padding:9px 0 9px 30px;margin:0;border-top:1px solid var(--sauge-clair);}
.svc .inclus li:last-child{border-bottom:1px solid var(--sauge-clair);}
.inclus li::before{
  content:"";position:absolute;left:4px;top:15px;width:12px;height:7px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}

/* les « En savoir plus » sont des liens : sans display:block, la marge auto
   et les marges hautes ne s'appliquent pas sur un élément inline */
.go{display:block;}

/* questions fréquentes */
.faq{margin-top:34px;}
.faq .qa{padding:24px 0;border-top:1px solid var(--sauge-clair);}
.faq .qa:last-child{border-bottom:1px solid var(--sauge-clair);}
.faq h3{font-size:18px;margin-bottom:10px;}
.faq p{font-size:15px;line-height:1.65;max-width:78ch;}

/* tableau comparatif */
.cmp{width:100%;border-collapse:collapse;margin-top:26px;background:#fff;
  border:1px solid var(--sauge-clair);border-radius:var(--radius-sm);overflow:hidden;}
.cmp th,.cmp td{padding:15px 18px;text-align:left;font-size:14.5px;vertical-align:top;
  border-bottom:1px solid var(--sauge-clair);}
.cmp thead th{background:var(--anthracite);color:var(--creme);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;}
.cmp tbody th{font-weight:600;width:32%;}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0;}
.note{margin-top:18px;padding:15px 20px;border-left:3px solid var(--accent);
  background:#fff;font-size:13.5px;border-radius:0 10px 10px 0;}
.note b{color:var(--accent);}

/* bio */
.bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.parcours{margin-top:24px;}
.parcours div{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--sauge-clair);}
.parcours .d{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--accent);min-width:78px;padding-top:2px;}

/* galerie réalisations */
.gal{display:grid;grid-template-columns:.85fr 2.15fr;gap:44px;align-items:start;}
.gal-list{border-left:1px solid var(--sauge-clair);}
.gal-list a{display:block;border-left:2px solid transparent;margin-left:-1px;padding:15px 22px;}
.gal-list a.on{border-left-color:var(--accent);}
.gal-list a.on .nm{color:var(--accent);}
.gal-list .nm{font-size:16.5px;font-weight:600;line-height:1.25;}
.gal-list .cm{font-size:12.5px;opacity:.78;margin-top:3px;}
.gal-view{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:var(--sauge);}
.gal-ab{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.gal-ab .half{height:470px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:40px;
  gap:8px;text-align:center;padding:26px;
  background:repeating-linear-gradient(135deg,rgba(32,37,21,.06) 0 12px,transparent 12px 24px);}
.gal-ab .tag{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;}
.gal-ab .s{font-size:12.5px;max-width:230px;opacity:.8;}
/* photo réelle dans une moitié : elle remplit la case, l'étiquette passe en pastille */
.gal-ab .half.has-img{position:relative;padding:0;overflow:hidden;}
.gal-ab .half.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gal-ab .half.has-img .tag{position:absolute;left:16px;bottom:16px;background:var(--creme);
  padding:7px 13px;border-radius:999px;font-size:10.5px;}
/* les deux moitiés portent une image depuis le 08/10 : la fiche passe sous les photos */
.gal-card{background:var(--creme);padding:22px 26px;border-top:1px solid var(--sauge-clair);}
.gal-card h2{font-size:19px;margin-bottom:9px;letter-spacing:-.01em;line-height:1.2;}
/* mention obligatoire des visuels générés par IA */
.note-ia{margin-top:14px;padding:13px 18px;border-left:3px solid var(--accent);background:#fff;
  border-radius:0 10px 10px 0;font-size:13px;line-height:1.55;}
.gal-meta{display:flex;background:var(--anthracite);color:var(--creme);}
.gal-meta > div{flex:1;padding:16px 20px;border-right:1px solid rgba(249,254,234,.16);}
.gal-meta > div:last-child{border-right:none;}
.gal-meta .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;}
.gal-meta .v{font-size:15px;font-weight:600;margin-top:3px;}

/* formulaire */
.contact-grid{display:grid;grid-template-columns:1.45fr .85fr;gap:52px;align-items:start;}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:span 2;}
.field label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.field label i{color:var(--accent);font-style:normal;}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:15px;padding:13px 15px;color:var(--anthracite);
  border:1px solid var(--sauge-clair);border-radius:12px;background:#fff;}
.field textarea{min-height:130px;resize:vertical;}
.field .hint{font-size:12px;opacity:.8;}
.rgpd{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;margin-top:4px;}
.rgpd input{width:17px;height:17px;margin-top:2px;flex:none;}
.infocard{background:var(--sauge);border-radius:var(--radius-sm);padding:30px 28px;}
.infocard .label{color:var(--accent);}
.infocard .it{padding:15px 0;border-top:1px solid rgba(32,37,21,.16);}
.infocard .it .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;}
.infocard .it .v{font-size:16px;font-weight:600;margin-top:3px;}

/* retour d'envoi du formulaire (contact.php) et piège à robots */
.envoi-retour{padding:15px 18px;border-radius:12px;font-size:15px;margin-bottom:20px;}
.envoi-retour.ok{background:var(--sauge-clair);border-left:3px solid var(--accent);}
.envoi-retour.ko{background:#fff;border-left:3px solid #9b2c2c;}
.appat{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.field button[disabled]{opacity:.6;cursor:wait;}

/* mentions légales */
.legal h2{font-size:23px;margin:44px 0 14px;}
.legal h2:first-child{margin-top:0;}
.legal p{font-size:15px;line-height:1.65;}
.legal p+p{margin-top:12px;}

@media(max-width:900px){
  .pagehead-content{padding-top:150px;padding-bottom:56px;}
  .svc .grid,.bio,.gal,.contact-grid{grid-template-columns:1fr;gap:30px;}
  .gal-list{border-left:0;display:flex;overflow-x:auto;gap:8px;}
  .gal-list a{border-left:0;border-bottom:2px solid transparent;flex:none;padding:12px 4px;}
  .gal-list a.on{border-bottom-color:var(--accent);}
  .gal-ab{grid-template-columns:1fr;}
  .gal-ab .half{height:250px;}
  .gal-card{margin:0;}
  .formgrid{grid-template-columns:1fr;}
  .field.full{grid-column:span 1;}
  .cmp thead{display:none;}
  .cmp tbody th,.cmp tbody td{display:block;width:auto;border-bottom:0;padding:6px 16px;}
  .cmp tbody th{padding-top:16px;}
  .cmp tbody tr{display:block;border-bottom:1px solid var(--sauge-clair);padding-bottom:12px;}
}

/* ---------- menu mobile ---------- */
body.no-scroll{overflow:hidden;}
.mnav{
  position:fixed;inset:0;z-index:60;display:none;
  flex-direction:column;justify-content:center;
  background:var(--anthracite);color:var(--creme);padding:80px 26px 40px;
}
.mnav.open{display:flex;}
.mnav-close{
  position:absolute;top:24px;right:22px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0;
}
.mnav-close span{
  position:absolute;left:9px;top:21px;width:26px;height:2px;
  background:var(--creme);border-radius:2px;display:block;
}
.mnav-close span:first-child{transform:rotate(45deg);}
.mnav-close span:last-child{transform:rotate(-45deg);}
.mnav-links{display:flex;flex-direction:column;gap:4px;}
.mnav-links a{
  font-size:32px;font-weight:500;letter-spacing:-.02em;
  padding:12px 0;border-bottom:1px solid rgba(249,254,234,.14);
}
/* l'accent est illisible sur l'anthracite : la page active se signale en sauge */
.mnav-links a.on{color:var(--sauge);}
.mnav-foot{margin-top:38px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.mnav-foot .tel-big{font-size:19px;font-weight:600;letter-spacing:.02em;}

/* au-dessus de 900 px le panneau ne doit jamais apparaître, même laissé ouvert */
@media(min-width:901px){ .mnav{display:none !important;} }

/* ============================================================
   PALIER TÉLÉPHONE (≤ 640 px)
   Le palier 900 px passe en 2 colonnes, ce qui reste trop dense
   sur un téléphone : ici tout descend en une colonne.
   ============================================================ */
@media(max-width:640px){

  /* typographie resserrée */
  h1{font-size:clamp(32px,8.4vw,44px);}
  h2{font-size:clamp(25px,6.6vw,34px);}
  h3{font-size:19px;}
  .lead{font-size:16px;}
  .hero h1{font-size:clamp(33px,8.8vw,46px);}
  .pagehead h1{font-size:clamp(27px,7.4vw,38px);}
  .c-promesse h2{font-size:clamp(25px,6.6vw,32px);}
  .sec-head{margin-bottom:32px;}
  .wrap{padding-left:20px;padding-right:20px;}

  /* hero et bento */
  .hero-content{padding-top:130px;padding-bottom:120px;}
  .bento-zone{margin-top:-100px;}
  .bento{grid-template-columns:1fr;padding:10px;gap:10px;}
  .c-promesse,.c-svc,.c-large,.c-dark{grid-column:span 1;}
  .card{padding:24px 22px;}
  .c-large,.c-dark{min-height:0;}
  .c-large .inner{max-width:none;}
  /* le dégradé de la carte photo passe en vertical, sinon le texte retombe sur l'image */
  .c-large::after{background:linear-gradient(180deg,rgba(249,254,234,.97) 0%,rgba(249,254,234,.90) 58%,rgba(249,254,234,.45) 100%);}
  .c-large img{object-position:center 65%;}

  /* étapes et sections */
  .etapes{grid-template-columns:1fr;}
  .etape{padding:20px 0 22px;}
  section.pad{padding:56px 0;}
  .svc{padding:46px 0;}
  .temoin{padding:26px 22px;}

  /* barres de métadonnées : 3 colonnes illisibles sous 640 px */
  .projet .meta,.gal-meta{flex-direction:column;}
  .projet .meta > div,.gal-meta > div{
    border-right:0;border-bottom:1px solid rgba(249,254,234,.16);padding:12px 18px;}
  .projet .meta > div:last-child,.gal-meta > div:last-child{border-bottom:0;}
  .gal-ab .half{height:200px;padding-bottom:26px;}
  .gal-card{padding:18px 20px;}

  /* formulaire : 16 px minimum, sinon iOS zoome au focus */
  .field input,.field select,.field textarea{font-size:16px;}
  .infocard{padding:24px 22px;}

  /* pied de page : les 3 colonnes ne tiennent pas */
  footer .top{grid-template-columns:1fr;gap:30px;}
  footer{padding-bottom:34px;}

  /* menu mobile */
  .mnav-links a{font-size:27px;padding:10px 0;}
  .mnav{padding:74px 22px 32px;}

  /* bandeau de maquette */
  .flag{text-align:left;font-size:11.5px;line-height:1.45;}
}

/* tableau comparatif : en colonnes empilées, chaque cellule reprend son en-tête */
@media(max-width:900px){
  .cmp tbody td::before{
    content:attr(data-l) " : ";font-weight:700;color:var(--accent);
  }
}

.etapes-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){ .etapes-5{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .etapes-5{grid-template-columns:1fr;} }

@media(max-width:640px){
  .pagehead-content{padding-top:128px;padding-bottom:46px;}
}