/* Mister Diag Immo : feuille unique, sur le modèle d'En Diagonale.
   Bleu ardoise et jaune de l'ancienne identité, en attendant le logo définitif :
   les couleurs se changent ici, dans :root, et nulle part ailleurs. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url(polices/barlow-400i.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(polices/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(polices/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(polices/barlow-sc-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(polices/barlow-sc-700.woff2) format("woff2"); }

:root {
  --nuit: #12283a;
  --nuit-2: #1c3a52;
  --bleu: #163a57;
  --bleu-vif: #1f6fb2;
  --jaune: #f7b500;
  --jaune-2: #ffc933;
  --jaune-pale: #fff6dc;
  --jaune-bord: #f4dc94;
  --vert: #2e7d32;
  --rouge: #c0392b;
  --texte: #1d2733;
  --gris: #5a6573;
  --trait: #e2e6ec;
  --fond: #f3f5f8;
  --blanc: #fff;
  --rayon: 12px;
  --ombre: 0 4px 18px rgba(18, 40, 58, .08);
  --titres: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --corps: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 18px/1.62 var(--corps); }
img { max-width: 100%; height: auto; }
a { color: var(--bleu-vif); text-underline-offset: 2px; }
a:hover { color: var(--bleu); }
h1, h2, h3, h4 { font-family: var(--titres); font-weight: 700; line-height: 1.15; color: var(--bleu); }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); margin: 0 0 .8rem; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 2.2rem 0 .8rem; }
h3 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--jaune); padding: .5rem 1rem; }

/* ------------------------------------------------------------ en-tête */
.entete { background: var(--nuit); position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.entete-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; min-height: 72px; display: flex; align-items: center; gap: 1.5rem; }
.marque { display: flex; align-items: center; gap: .6rem; flex: none; text-decoration: none; color: var(--blanc); }
.marque:hover { color: var(--blanc); }
.marque-logo { display: block; width: auto; height: 46px; }
.menu-bouton { display: none; background: none; border: 0; color: var(--blanc); padding: .4rem; cursor: pointer; line-height: 0; }
.menu-bouton .ic { width: 28px; height: 28px; }
.menu { margin-left: auto; }
.menu > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.menu li { position: relative; list-style: none; }
.menu a { display: block; color: var(--blanc); text-decoration: none; padding: 1.55rem .62rem; font-weight: 600; font-size: .97rem; white-space: nowrap; }
.menu > ul > li > a:hover, .menu > ul > li > a.actif { color: var(--jaune); }
.menu > ul > li > a.actif { box-shadow: inset 0 -3px 0 var(--jaune); }
.menu li ul { display: none; position: absolute; left: 0; top: 100%; min-width: 250px; padding: .5rem 0; margin: 0; background: var(--blanc); border-radius: 0 0 var(--rayon) var(--rayon); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.menu li ul a { color: var(--texte); font-weight: 400; padding: .45rem 1.1rem; white-space: normal; }
.menu li ul a:hover { color: var(--bleu); background: var(--fond); }
.menu li:hover > ul, .menu li:focus-within > ul { display: block; }
.menu > ul > li:nth-child(3) > a, .menu > ul > li:nth-child(4) > a { color: var(--jaune); }

@media (max-width: 1100px) {
  .entete-in { min-height: 60px; justify-content: center; position: relative; }
  .menu-bouton { display: block; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
  .marque-logo { height: 36px; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--nuit); max-height: calc(100vh - 60px); overflow-y: auto; }
  .menu.ouvert { display: block; }
  .menu > ul { flex-direction: column; align-items: stretch; padding: .4rem 16px 1.2rem; }
  .menu a { padding: .7rem .2rem; }
  .menu > ul > li > a.actif { box-shadow: none; }
  .menu li ul { display: block; position: static; box-shadow: none; background: transparent; padding: 0 0 .4rem 1rem; min-width: 0; border-radius: 0; columns: 2; }
  .menu li ul a { color: #c6d2de; padding: .35rem .2rem; }
  .menu li ul a:hover { background: transparent; color: var(--jaune); }
}

/* ------------------------------------------------------------ boutons */
.bouton { display: inline-flex; align-items: center; gap: .5em; background: var(--bleu-vif); color: var(--blanc); padding: .7rem 1.35rem; border-radius: 999px; text-decoration: none; font: 700 1rem/1.2 var(--corps); border: 2px solid transparent; cursor: pointer; }
.bouton:hover { background: var(--bleu); color: var(--blanc); }
.bouton .ic { width: 1.1em; height: 1.1em; }
.bouton-jaune { background: var(--jaune); color: var(--nuit); }
.bouton-jaune:hover { background: var(--jaune-2); color: var(--nuit); }
.bouton-contour { background: transparent; border-color: var(--blanc); color: var(--blanc); }
.bouton-contour:hover { background: var(--blanc); color: var(--nuit); }
.boutons { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ------------------------------------------------------------ recherche */
.recherche { display: flex; align-items: center; gap: .4rem; background: var(--blanc); border-radius: 999px; padding: .35rem .35rem .35rem 1rem; max-width: 560px; box-shadow: 0 8px 24px rgba(0,0,0,.18); margin: 0 0 1.4rem; }
.recherche-ic { color: var(--bleu-vif); width: 1.4em; height: 1.4em; }
.recherche input { flex: 1; min-width: 0; border: 0; font: 1.05rem var(--corps); padding: .55rem .3rem; background: transparent; color: var(--texte); }
.recherche input:focus { outline: none; }
.recherche:focus-within { box-shadow: 0 0 0 3px var(--jaune), 0 8px 24px rgba(0,0,0,.18); }
.recherche .bouton { padding: .65rem 1.2rem; }
@media (max-width: 480px) { .recherche .bouton span { display: none; } }

/* ------------------------------------------------------------ accueil */
.heros { position: relative; color: var(--blanc); background: var(--nuit); overflow: hidden; }
.heros-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.heros::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(18,40,58,.93) 0%, rgba(18,40,58,.72) 48%, rgba(18,40,58,.15) 85%); }
.heros-in { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) 16px clamp(5.5rem, 10vw, 7.5rem); }
.heros h1 { color: var(--blanc); font-size: clamp(2.4rem, 6.4vw, 4.2rem); line-height: 1.02; max-width: 13ch; margin-bottom: 1.1rem; }
.heros h1 .jaune { color: var(--jaune); display: block; }
.heros-in > p { max-width: 36rem; font-size: clamp(1rem, 2.2vw, 1.15rem); margin: 0 0 1.5rem; }
.surtitre-heros { display: inline-flex !important; align-items: center; gap: .5rem; background: rgba(247,181,0,.16); border: 1px solid rgba(247,181,0,.5); color: var(--jaune); font-weight: 700; font-size: .92rem !important; padding: .35rem .8rem; border-radius: 999px; }
@media (max-width: 600px) {
  .heros::before { background: linear-gradient(180deg, rgba(18,40,58,.35) 0%, rgba(18,40,58,.82) 40%, rgba(18,40,58,.96) 100%); }
  .heros-in { padding-top: 7rem; }
  .heros .boutons .bouton { flex: 1 1 100%; justify-content: center; }
}
.tuiles { position: relative; z-index: 3; max-width: 1208px; margin: -3.6rem auto 0; background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 10px 30px rgba(18,40,58,.14); display: grid; grid-template-columns: repeat(6, 1fr); }
.tuiles a { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: 1.4rem .8rem; text-decoration: none; color: var(--texte); font-weight: 600; font-size: .98rem; line-height: 1.25; }
.tuiles a + a { border-left: 1px solid var(--trait); }
.tuiles a:hover { color: var(--bleu-vif); }
.tuiles .ic { width: 2.2rem; height: 2.2rem; color: var(--bleu-vif); }
@media (max-width: 1240px) { .tuiles { margin-left: 16px; margin-right: 16px; } }
@media (max-width: 800px) {
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .tuiles a + a { border-left: 0; }
  .tuiles a:not(:nth-child(3n+1)) { border-left: 1px solid var(--trait); }
  .tuiles a:nth-child(n+4) { border-top: 1px solid var(--trait); }
}
.section { max-width: 1240px; margin: 0 auto; padding: 2.6rem 16px 0; }
.section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.section-tete h2 { margin: 0; }
.section-tete a { font-size: .95rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.chiffres-cles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.chiffres-cles div { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.2rem 1rem; text-align: center; }
.chiffres-cles b { display: block; font: 700 clamp(1.5rem, 3.4vw, 2.1rem)/1.1 var(--titres); color: var(--bleu); }
.chiffres-cles span { font-size: .92rem; color: var(--gris); }
@media (max-width: 760px) { .chiffres-cles { grid-template-columns: repeat(2, 1fr); } }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.4rem; }
@media (max-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr); } }
.carte-devis { position: relative; border-radius: var(--rayon); overflow: hidden; color: var(--blanc); padding: 1.8rem; min-height: 300px; background: var(--nuit) var(--fond) center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; }
.carte-devis::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,40,58,.95) 0%, rgba(18,40,58,.75) 60%, rgba(18,40,58,.35) 100%); }
.carte-devis > * { position: relative; margin: 0 0 .9rem; max-width: 26rem; }
.carte-devis h2 { color: var(--blanc); font-size: 2rem; }
.bloc-blanc { background: var(--blanc); border-radius: var(--rayon); padding: 1.6rem 1.8rem; box-shadow: var(--ombre); }
.bloc-blanc h2 { margin: 0 0 1rem; font-size: 1.55rem; }
.liste-points { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .8rem; }
.liste-points li { display: flex; gap: .8rem; align-items: flex-start; }
.liste-points .ic { width: 1.5em; height: 1.5em; color: var(--bleu-vif); margin-top: .1rem; }
.villes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.villes a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--blanc); border-radius: 10px; padding: .75rem 1rem; text-decoration: none; color: var(--bleu); font-weight: 600; box-shadow: var(--ombre); }
.villes a:hover { color: var(--bleu-vif); box-shadow: 0 0 0 2px var(--jaune); }
.villes small { background: var(--jaune-pale); color: var(--nuit); font-weight: 700; border-radius: 999px; padding: .1rem .55rem; font-size: .82rem; }
.villes .cp { color: var(--gris); font-weight: 400; font-size: .9rem; margin-right: auto; }
.villes-compactes a { box-shadow: none; border: 1px solid var(--trait); }
.cartes-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.carte-guide { display: flex; flex-direction: column; gap: .35rem; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.2rem 1.3rem; text-decoration: none; color: var(--texte); border-top: 4px solid var(--jaune); }
.carte-guide .ic { width: 2rem; height: 2rem; color: var(--bleu-vif); }
.carte-guide b { font: 700 1.25rem var(--titres); color: var(--bleu); }
.carte-guide span { font-size: .93rem; color: var(--gris); line-height: 1.45; }
.carte-guide:hover b { color: var(--bleu-vif); }
.principal .carte-guide { box-shadow: none; border: 1px solid var(--trait); border-top: 4px solid var(--jaune); }

/* ------------------------------------------------------------ bandeau des pages intérieures */
.bandeau-page { position: relative; color: var(--blanc); background: var(--nuit) url('img/heros-900.webp') center 40% / cover no-repeat; }
.bandeau-page::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,40,58,.96) 0%, rgba(18,40,58,.86) 55%, rgba(18,40,58,.6) 100%); }
.bandeau-in { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(1.8rem, 5vw, 3rem) 16px clamp(2rem, 5vw, 3rem); }
.bandeau-in h1 { color: var(--blanc); max-width: 24ch; }
.bandeau-in > p { max-width: 44rem; margin: 0 0 1.2rem; color: #dbe3ec; font-size: 1.08rem; }
.bandeau-in .recherche { margin-bottom: 0; }
.bandeau-picto { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 12px; background: var(--jaune); color: var(--nuit); margin-bottom: 1rem; }
.bandeau-picto .ic { width: 2rem; height: 2rem; }
.bandeau-devis { background-image: url('img/canal-900.webp'); }

/* ------------------------------------------------------------ gabarit */
.fil { max-width: 1240px; margin: 0 auto; padding: .9rem 16px 0; font-size: .88rem; color: var(--gris); position: relative; }
.fil + main .bandeau-page { margin-top: .9rem; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fil li + li::before { content: "›"; margin: 0 .45rem; }
.fil [aria-current] { color: var(--bleu); font-weight: 600; }
.cadre { max-width: 1240px; margin: 0 auto; padding: 1.6rem 16px 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.cadre-large { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
@media (max-width: 960px) { .cadre { grid-template-columns: minmax(0, 1fr); } }
.principal { background: var(--blanc); border-radius: var(--rayon); padding: clamp(1.1rem, 3.2vw, 2.4rem); box-shadow: var(--ombre); min-width: 0; }
.titre-premier { margin-top: 0; }
.note-liste { color: var(--gris); font-size: .95rem; }
.meta-ligne { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--gris); margin: 0 0 1rem; }

/* ------------------------------------------------------------ texte des guides */
.prose { overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; margin: 1.4rem 0; }
.prose th, .prose td { border-bottom: 1px solid var(--trait); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.prose th { background: var(--nuit); color: var(--blanc); font-weight: 600; }
.prose tbody tr:nth-child(even) td { background: #f8f9fb; }
.prose li { margin: .25rem 0; }
.apres-formulaire { margin-top: 2.4rem; padding-top: 1rem; border-top: 3px solid var(--jaune); }
.note { position: relative; background: var(--jaune-pale); border: 1px solid var(--jaune-bord); padding: 1rem 1.2rem 1rem 3.2rem; border-radius: 10px; margin: 1.8rem 0 1.2rem; font-size: .95rem; }
.note::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.4rem; height: 1.4rem; background: var(--jaune); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2zM9 20h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2zM9 20h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.note p { margin: 0; }
.faq { margin-top: 2.6rem; padding-top: 1rem; border-top: 3px solid var(--jaune); }
.faq details { border: 1px solid var(--trait); border-radius: 10px; margin: .6rem 0; background: var(--blanc); }
.faq summary { cursor: pointer; padding: .85rem 1.1rem; font-weight: 700; color: var(--bleu); }
.faq details[open] summary { border-bottom: 1px solid var(--trait); }
.faq details p { margin: 0; padding: .85rem 1.1rem; }
.sources { margin-top: 2.4rem; font-size: .9rem; }
.sources h2 { font-size: 1.2rem; }
.sources ul { padding-left: 1.2rem; color: var(--gris); }
.enfants { margin-top: 2.6rem; padding-top: 1rem; border-top: 3px solid var(--jaune); }

/* ------------------------------------------------------------ annuaire */
.liste-deps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .5rem; }
.liste-deps a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--trait); border-radius: 10px; text-decoration: none; color: var(--bleu); font-weight: 600; }
.liste-deps a:hover { border-color: var(--jaune); background: var(--jaune-pale); }
.liste-deps small { margin-left: auto; color: var(--gris); font-weight: 400; }
.dep-code { display: inline-grid; place-items: center; min-width: 2.4rem; height: 1.9rem; border-radius: 6px; background: var(--nuit); color: var(--jaune); font: 700 .92rem var(--titres); }
.lettre { margin: 1.4rem 0 .4rem; font-size: 1.15rem; color: var(--bleu-vif); border-bottom: 1px solid var(--trait); padding-bottom: .2rem; }
.liste-communes { list-style: none; margin: 0; padding: 0; columns: 3 200px; column-gap: 1.5rem; }
.liste-communes li { break-inside: avoid; padding: .18rem 0; font-size: .97rem; }
.liste-communes small { color: var(--gris); }
.filtres { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.4rem; }
.filtre { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--trait); background: var(--blanc); color: var(--texte); border-radius: 999px; padding: .4rem .85rem; font: 600 .92rem var(--corps); cursor: pointer; }
.filtre .ic { color: var(--bleu-vif); }
.filtre:hover { border-color: var(--jaune); }
.filtre.actif { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.filtre.actif .ic { color: var(--jaune); }
.pros { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.pro { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; background: var(--blanc); }
.pro[hidden] { display: none; }
.pro-tete { display: flex; gap: .8rem; align-items: center; }
.pro-initiales { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--nuit); color: var(--jaune); display: grid; place-items: center; font: 700 1.05rem var(--titres); text-transform: uppercase; }
.pro-nom { margin: 0; font-size: 1.2rem; }
.pro-societe { margin: .1rem 0 0; color: var(--gris); font-size: .93rem; }
.pro-adresse, .pro-tel { margin: 0; display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; }
.pro-adresse .ic, .pro-tel .ic { color: var(--bleu-vif); margin-top: .2rem; }
.pro-adresse small { color: var(--gris); }
.pro-tel a { font-weight: 700; text-decoration: none; }
.pro-certifs { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.pro-certifs li { background: var(--jaune-pale); border: 1px solid var(--jaune-bord); color: var(--nuit); border-radius: 6px; padding: .12rem .5rem; font-size: .8rem; font-weight: 600; }
.pro-details { font-size: .88rem; color: var(--gris); margin-top: auto; }
.pro-details summary { cursor: pointer; color: var(--bleu-vif); font-weight: 600; }
.pro-details ul { padding-left: 1.1rem; margin: .5rem 0 0; }
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.6rem 0 0; }
.pagination a, .pagination span { min-width: 2.4rem; text-align: center; padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--trait); text-decoration: none; font-weight: 600; }
.pagination span { background: var(--nuit); color: var(--blanc); border-color: var(--nuit); }
.page-num { font: 600 .95rem var(--corps); color: var(--gris); margin-left: .4rem; }
.vide-filtre { color: var(--gris); font-style: italic; }

/* ------------------------------------------------------------ colonne latérale */
.barre { display: grid; gap: 1.4rem; position: sticky; top: 90px; }
@media (max-width: 960px) { .barre { position: static; } }
.bloc { background: var(--blanc); border-radius: var(--rayon); padding: 1.3rem 1.4rem; box-shadow: var(--ombre); }
.bloc h2 { font-size: 1.3rem; margin: 0 0 .9rem; }
.bloc-sombre { background: var(--nuit); color: #dbe3ec; }
.bloc-sombre h2 { color: var(--blanc); }
.bloc-sombre .recherche { margin: 0; box-shadow: none; }
.bloc-sombre .recherche .bouton span { display: none; }
.liste-icones { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.liste-icones a { display: flex; align-items: center; gap: .7rem; padding: .42rem 0; text-decoration: none; color: var(--texte); font-size: .98rem; }
.liste-icones a:hover, .liste-icones a[aria-current] { color: var(--bleu-vif); }
.liste-icones a[aria-current] { font-weight: 700; }
.liste-icones .ic { width: 1.35em; height: 1.35em; color: var(--bleu-vif); }
.appel-devis { display: grid; gap: .8rem; }
.principal .appel-devis { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 1.6rem; }
.appel { display: flex; align-items: center; gap: .9rem; background: var(--jaune-pale); border: 1px solid var(--jaune-bord); border-radius: var(--rayon); padding: 1rem 1.1rem; text-decoration: none; color: var(--texte); font-size: .92rem; line-height: 1.4; }
.appel b { display: block; font: 700 1.2rem var(--titres); color: var(--bleu); margin-bottom: .15rem; }
.appel:hover { border-color: var(--jaune); background: #ffefc0; color: var(--texte); }
.appel-ic { width: 2.4rem !important; height: 2.4rem !important; color: var(--bleu-vif); }
.appel > .ic:last-child { color: var(--bleu); }

/* ------------------------------------------------------------ formulaires */
.etapes { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; counter-reset: e; }
.etapes li { display: flex; gap: .7rem; align-items: flex-start; background: var(--fond); border-radius: 10px; padding: .9rem 1rem; font-size: .95rem; line-height: 1.4; }
.etapes b { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--jaune); color: var(--nuit); font: 700 1rem var(--titres); }
@media (max-width: 700px) { .etapes { grid-template-columns: 1fr; } }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 640px) { .champs { grid-template-columns: 1fr; } }
.champ { margin: 0 0 1rem; min-width: 0; }
.champ-large { grid-column: 1 / -1; }
.champ label, .champ legend { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--bleu); padding: 0; }
fieldset.champ { border: 0; padding: 0; }
.requis { color: var(--rouge); }
.champ input, .champ select, .champ textarea { width: 100%; padding: .7rem .85rem; border: 1px solid #c9d1db; border-radius: 10px; font: 1rem var(--corps); background: var(--blanc); color: var(--texte); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid rgba(247,181,0,.5); border-color: var(--bleu); }
.choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .45rem; }
.choix label { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; color: var(--texte); border: 1px solid var(--trait); border-radius: 10px; padding: .6rem .8rem; cursor: pointer; margin: 0; line-height: 1.35; }
.choix label:has(input:checked) { border-color: var(--bleu-vif); background: #eef5fc; }
.choix input, .consentement input { width: auto; margin-top: .2rem; flex: none; }
.consentement { font-size: .9rem; color: var(--gris); }
.consentement label { display: flex; gap: .6rem; align-items: flex-start; }
.consentement input { margin-top: .25rem; flex: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message { padding: .9rem 1.1rem; border-radius: 10px; font-weight: 600; }
.message-ok { background: #e6f4ea; color: #1e5b23; }
.message-erreur { background: #fdecea; color: #8c1d18; }

/* ------------------------------------------------------------ pied */
.pied { background: var(--nuit); color: #c6d2de; margin-top: 2rem; }
.pied-in { max-width: 1240px; margin: 0 auto; padding: 2.6rem 16px 1.6rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; font-size: .95rem; }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr; } }
.pied-logo { margin: 0 0 .9rem; }
.pied-logo img { display: block; width: auto; height: 44px; }
.pied-marque p { max-width: 32rem; }
.pied-source { font-size: .85rem; color: #9fb0c1; }
.pied-titre { font: 700 1.15rem var(--titres); color: var(--jaune); margin: 0 0 .6rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: .3rem 0; }
.pied a { color: var(--blanc); text-decoration: none; }
.pied a:hover { color: var(--jaune); }
.pied-bas { max-width: 1240px; margin: 0 auto; padding: 1rem 16px 1.6rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: #9fb0c1; }
.pied-bas a { color: #c6d2de; text-decoration: underline; }

/* ------------------------------------------------------------ téléphone */
@media (max-width: 600px) {
  .cadre { padding: 1rem 0 2.5rem; gap: 1.4rem; }
  .principal { border-radius: 0; padding: 1.2rem 16px 1.6rem; box-shadow: none; }
  .barre { padding: 0 16px; }
  .pros { grid-template-columns: minmax(0, 1fr); }
  .section-tete a { white-space: nowrap; }
}