:root{
  --papier:#F7F3EA; --papier-2:#EFE8DA; --encre:#16171A; --encre-2:#4A4B50; --gris:#6F6D67;
  --jaune:#FFC21A; --jaune-fonce:#E0A300; --vert:#1F5B3A; --vert-clair:#E3EEE6; --blanc:#FFFFFF;
  --urgence:#B42318; --urgence-fonce:#8E1B12; --urgence-clair:#FDEDEB;
  --rayon:22px; --ombre:0 1px 0 rgba(22,23,26,.04), 0 18px 50px -18px rgba(22,23,26,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--papier);color:var(--encre);font-family:'Figtree',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* En-tête */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,4vw,56px)}
.marque{display:flex;align-items:center;gap:10px;min-height:44px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:23px;letter-spacing:-.4px}
.marque .niveau{width:34px;height:20px;border-radius:6px;background:var(--jaune);position:relative;box-shadow:inset 0 0 0 2px var(--encre)}
.marque .niveau::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:var(--papier);box-shadow:inset 0 0 0 2px var(--encre)}
.marque b{font-weight:800;color:var(--vert)}
.nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:15.5px;color:var(--encre-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font-family:'Figtree',sans-serif;font-weight:700;border-radius:999px;transition:transform .15s ease, box-shadow .15s ease, background .15s}
.btn-jaune{background:var(--jaune);color:var(--encre);box-shadow:0 2px 0 var(--jaune-fonce)}
.btn-jaune:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--jaune-fonce)}
.nav .btn{padding:11px 18px;font-size:15px;color:var(--encre);min-height:44px}
.nav a.lien{display:inline-flex;align-items:center;min-height:44px}
.nav .btn .court{display:none}

/* Héros */
.hero{position:relative;padding:28px clamp(16px,4vw,56px) 96px;display:grid;grid-template-columns:1.02fr 1fr;grid-template-areas:'texte carte' 'preuves carte';column-gap:clamp(24px,4vw,64px);align-items:center;max-width:1360px;margin:0 auto}
.texte{grid-area:texte;align-self:end}.carte{grid-area:carte}.preuves{grid-area:preuves;align-self:start}
.zone{display:inline-flex;align-items:center;gap:8px;background:var(--blanc);border:1px solid var(--papier-2);border-radius:999px;padding:7px 14px 7px 10px;font-size:14px;font-weight:600;color:var(--encre-2)}
.zone i{width:8px;height:8px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 4px var(--vert-clair)}
h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(40px,5.6vw,78px);line-height:.98;letter-spacing:-2.2px;margin:22px 0 22px}
h1 .souligne{background:linear-gradient(transparent 62%, var(--jaune) 62%, var(--jaune) 92%, transparent 92%);padding:0 4px;margin:0 -4px}
.chapeau{font-size:clamp(17px,1.5vw,20.5px);line-height:1.5;color:var(--encre-2);max-width:560px}
.chapeau strong{color:var(--encre);font-weight:700}
.preuves{list-style:none;display:grid;gap:12px;margin-top:30px}
.preuves li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:16.5px}
.preuves svg{flex:none}
.preuves li span small{display:block;font-weight:500;font-size:14px;color:var(--gris);margin-top:3px;line-height:1.35}
.preuves li:first-child{align-items:flex-start}
.sceau{position:absolute;top:-34px;right:-26px;width:116px;height:116px;border-radius:50%;background:var(--vert);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 10px 30px -10px rgba(31,91,58,.6);transform:rotate(-10deg);border:4px solid var(--papier);z-index:2}
.sceau .niv{width:34px;height:20px;border-radius:6px;background:var(--jaune);position:relative;box-shadow:inset 0 0 0 2px var(--encre);margin-bottom:6px}
.sceau .niv::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:inset 0 0 0 2px var(--encre)}
.sceau b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;line-height:1.05;letter-spacing:.2px}
.sceau span{font-size:11px;font-weight:600;opacity:.85;margin-top:3px}

/* Carte formulaire */
.carte{background:var(--blanc);border-radius:28px;box-shadow:var(--ombre);padding:28px;position:relative}
.etape{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.8px}
.barre{height:6px;border-radius:99px;background:var(--papier-2);margin:12px 0 20px;overflow:hidden}
.barre i{display:block;width:20%;height:100%;background:var(--jaune);border-radius:99px}
.carte h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.6px;margin-bottom:16px}
.metiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.metier{border:2px solid var(--papier-2);border-radius:18px;padding:14px 12px 12px;background:var(--blanc);cursor:pointer;text-align:left;transition:border-color .15s, transform .15s, background .15s;font-family:'Figtree',sans-serif;color:var(--encre)}
.metier:hover{border-color:var(--encre);transform:translateY(-2px)}
.metier.choisi{border-color:var(--encre);background:#FFF8E1}
.metier .ic{width:42px;height:42px;border-radius:12px;background:var(--papier);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.metier.choisi .ic{background:var(--jaune)}
.metier b{display:block;font-size:16px;font-weight:700}
.metier span{display:block;font-size:13px;color:var(--gris);margin-top:3px;line-height:1.3}
.npa{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:18px}
.champ{display:flex;align-items:center;gap:10px;border:2px solid var(--papier-2);border-radius:16px;padding:0 16px;height:58px}
.champ input{border:0;outline:0;font:600 17px 'Figtree',sans-serif;width:100%;background:transparent;color:var(--encre)}
.champ:focus-within{border-color:var(--encre)}
.npa .btn{height:58px;padding:0 26px;font-size:17px}
.rassure{margin-top:14px;font-size:13.5px;color:var(--gris);text-align:center}

/* Le mètre pliant */
.metre{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:1;background:var(--jaune);
  background-image:repeating-linear-gradient(90deg, var(--encre) 0 2px, transparent 2px 100%),repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 100%);
  background-size:100px 14px, 10px 8px;background-repeat:repeat-x;background-position:0 0, 0 0;border-top:2px solid var(--encre)}
.metre::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg, transparent 0 199px, rgba(22,23,26,.18) 199px 201px)}
.bandeau{position:relative}

/* Métiers chips sous le héros */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr;grid-template-areas:'texte' 'carte' 'preuves';row-gap:22px;padding-top:6px;padding-bottom:70px}
  .nav .btn{padding:0 16px;font-size:14px;min-height:44px}
  .nav .btn .long{display:none}
  .nav .btn .court{display:inline}
  .chapeau{font-size:16.5px}
  .metier{display:flex;align-items:center;gap:10px;padding:10px}
  .metier .ic{margin:0;width:36px;height:36px;flex:none}
  .metier span{display:none}
  .metier b{font-size:15.5px}
  .carte h2{font-size:24px;margin-bottom:12px}
  .nav a.lien{display:none}
  h1{letter-spacing:-1.4px}
  .metiers{grid-template-columns:repeat(2,1fr)}
  .carte{padding:20px;border-radius:24px}
  .npa{grid-template-columns:1fr}
  .preuves{margin-top:0}
  .sceau{width:92px;height:92px;top:-26px;right:-8px}
  .sceau b{font-size:11.5px}
  .sceau .niv{width:28px;height:16px;margin-bottom:4px}
  .sceau span{font-size:10px}
  .marque{font-size:20px}
}

/* ===== Composants partagés (pages intérieures) ===== */
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.section{padding:clamp(56px,8vw,104px) 0}
.section.blanc{background:var(--blanc)}
.surtitre{display:inline-block;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--vert);margin-bottom:12px}
.h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.04;letter-spacing:-1.2px;max-width:820px}
.lead{font-size:clamp(16.5px,1.4vw,19px);line-height:1.55;color:var(--encre-2);max-width:680px;margin-top:14px}
.grille{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g6{grid-template-columns:repeat(6,1fr)}
.tuile{background:var(--blanc);border:1px solid var(--papier-2);border-radius:var(--rayon);padding:24px}
.section.blanc .tuile{background:var(--papier)}
.tuile h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.3px;margin:10px 0 8px}
.tuile p{color:var(--encre-2);line-height:1.5;font-size:16px}
.num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;width:38px;height:38px;border-radius:50%;background:var(--jaune);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px var(--encre)}
.faq details{border-bottom:1px solid var(--papier-2);padding:8px 0}
.faq details[open]{padding-bottom:18px}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:10px 0;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:'Bricolage Grotesque',sans-serif;font-size:24px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:0;color:var(--encre-2);line-height:1.55}
.cta-band{background:var(--encre);color:var(--papier);border-radius:28px;padding:clamp(28px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band .h2{color:var(--papier)}
.btn-lg{padding:18px 28px;font-size:17px}
.btn-ligne{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 2px var(--encre);padding:14px 22px}
.pied{background:var(--encre);color:#CFCBC2;padding:56px 0 34px;margin-top:0}
.pied a{color:#CFCBC2}.pied a:hover{color:var(--jaune)}
.pied .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.pied h4{color:var(--papier);font-family:'Bricolage Grotesque',sans-serif;font-size:16px;margin-bottom:12px}
.pied ul{list-style:none;display:grid;gap:8px;font-size:15px}
.pied .bas{border-top:1px solid #2E2F33;margin-top:36px;padding-top:20px;font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied .marque{color:var(--papier)}
.pied .marque b{color:#8FD0A5}
.fil{font-size:14px;color:var(--gris);padding:6px 0 0}.fil a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;margin:-13px 0}
@media (max-width:900px){
  .g2,.g3{grid-template-columns:1fr}.g6{grid-template-columns:repeat(2,1fr)}
  .pied .cols{grid-template-columns:1fr 1fr}
}

/* ===== Deux codes visuels fixes : DEVIS = jaune, URGENCE = rouge brique (--urgence, texte blanc : 6,6:1) ===== */
.ic-urg{flex:none}

/* Bandeau urgence en haut des pages */
.urgence-haut{display:block;background:var(--urgence);color:#fff;text-align:center;font-size:14.5px;font-weight:500;padding:9px 16px;line-height:1.45}
.urgence-haut .urg-mot{display:inline-flex;align-items:center;gap:5px;vertical-align:1px;margin-right:6px;background:#fff;color:var(--urgence);border-radius:999px;padding:2px 10px 2px 7px;font-weight:800;font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;line-height:1.35}
.urgence-haut:hover{background:var(--urgence-fonce)}
.urgence-haut:focus-visible{outline:3px solid #fff;outline-offset:-6px;border-radius:0}

/* En-tête : lien Urgence rouge à côté du bouton jaune des devis (ordinateur) */
.nav-urgence{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 16px 9px 13px;border-radius:999px;font-weight:700;font-size:15px;color:var(--urgence);background:var(--blanc);box-shadow:inset 0 0 0 2px var(--urgence);transition:background .15s,color .15s}
.nav-urgence:hover{background:var(--urgence);color:#fff}
@media (max-width:1060px){.nav{gap:18px}}
@media (max-width:900px){.nav-urgence{display:none}}

/* Boutons de la page urgence */
.btn-urgence{background:var(--urgence);color:#fff;box-shadow:0 2px 0 var(--urgence-fonce)}
.btn-urgence:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--urgence-fonce)}
.nav .btn.btn-urgence{color:#fff}

/* Accueil : choix devis / urgence en haut de la carte */
.mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:26px}
.mode-btn{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:66px;padding:11px 14px;border-radius:16px;line-height:1.2;text-align:left;min-width:0}
.mode-titre{display:flex;align-items:center;gap:7px;font-weight:800;font-size:16.5px;letter-spacing:-.1px}
.mode-ic{display:inline-flex;flex:none}
.mode-sous{font-size:13.5px;font-weight:600}
.mode-devis{background:var(--jaune);color:var(--encre);box-shadow:inset 0 0 0 2px var(--encre)}
.mode-devis .mode-sous{color:var(--encre-2)}
.mode-urgence{background:var(--urgence);color:#fff;box-shadow:0 2px 0 var(--urgence-fonce);transition:transform .15s,box-shadow .15s,background .15s}
.mode-urgence:hover{background:var(--urgence-fonce);transform:translateY(-1px);box-shadow:0 4px 0 var(--urgence-fonce)}
.mode-urgence .mode-sous{color:#FFE7E3}
.mode-fleche{margin-left:auto;font-weight:700}
@media (max-width:1180px){.mode-devis .mode-ic{display:none}}
@media (max-width:1100px){.mode-titre{font-size:15.5px}.mode-btn{padding:10px 12px}}
@media (max-width:900px){
  .mode{gap:8px;margin-bottom:18px}
  .mode-btn{padding:10px 11px;min-height:62px}
  .mode-titre{font-size:15px;gap:6px}
  .mode-sous{font-size:12.5px}
}

/* Étiquette en haut des formulaires */
.badge-mode{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:5px 14px 5px 6px;font-size:14px;font-weight:700;line-height:1.3;margin-bottom:16px;max-width:100%}
.badge-mode .rond-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.badge-devis{background:var(--jaune);color:var(--encre);box-shadow:inset 0 0 0 2px var(--encre)}
.badge-devis .rond-ic{background:var(--blanc)}
.badge-urgence{background:var(--urgence);color:#fff}
.badge-urgence .rond-ic{background:#fff;color:var(--urgence)}

/* Encadré d'aiguillage sous le titre (on s'est trompé de page ?) */
.aiguillage[hidden]{display:none}
.aiguillage{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:13px 16px;margin-top:18px;max-width:620px;font-size:15.5px;line-height:1.45;color:var(--encre);background:var(--blanc);transition:background .15s}
.aiguillage .aig-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.aiguillage .aig-txt{min-width:0}
.aiguillage b{font-weight:700}
.aiguillage .aig-lien{display:block;margin-top:4px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.vers-urgence{box-shadow:inset 0 0 0 2px var(--urgence)}
.vers-urgence .aig-ic{background:var(--urgence);color:#fff}
.vers-urgence .aig-lien{color:var(--urgence)}
.vers-urgence:hover{background:var(--urgence-clair)}
.vers-devis{background:#FFF8E1;box-shadow:inset 0 0 0 2px var(--jaune-fonce)}
.vers-devis .aig-ic{background:var(--jaune);color:var(--encre)}
.vers-devis:hover{background:#FFEFC2}

/* Pied de page : deux lignes distinctes, devis et urgence */
.pied .pied-voies{margin-top:20px;gap:10px;font-size:15.5px}
.pied .pied-voies a{display:inline-flex;align-items:center;gap:10px;color:var(--papier);font-weight:700}
.pied .pied-voies a:hover{color:var(--jaune)}
.pied .pied-voies a.voie-urgence:hover{color:#FFB4A8}
.voie-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.voie-devis .voie-ic{background:var(--jaune);color:var(--encre)}
.voie-urgence .voie-ic{background:var(--urgence);color:#fff}
@media (max-width:560px){.urgence-haut{font-size:13.5px;padding:8px 14px}}

/* Cibles au toucher de 44 px au moins (téléphone et écrans tactiles) */
@media (max-width:900px),(pointer:coarse){
  .pied ul{gap:0}
  .pied h4{margin-bottom:2px}
  .pied ul a,.pied .bas a{display:inline-flex;align-items:center;min-height:44px}
  .pied .pied-voies{gap:4px}
  .pied .pied-voies a{min-height:44px}
}