/* Page de donnees departementales : lisible sur telephone d'abord, chiffres dans le HTML */
body{background:#FBFCFE;overflow:auto}
.bandeau{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(217,223,229,.7)}
.bandeau-int{display:flex;align-items:center;gap:9px;height:60px;max-width:820px;margin:0 auto;padding:0 20px}
.bandeau-int .marque{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--encre);text-decoration:none}

.page-dep{max-width:820px;margin:0 auto;padding:20px 20px 64px}
.ariane{font-size:13px;color:var(--encre-3)}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.ariane li+li::before{content:"\203A";margin-right:6px;color:var(--encre-3)}
.ariane a{color:var(--encre-2);text-decoration:none}
.ariane a:hover{text-decoration:underline}
.page-dep h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(27px,4.2vw,40px);line-height:1.12;letter-spacing:-.025em;margin:16px 0 14px}
.chapo{font-size:17.5px;line-height:1.65;color:var(--encre-2)}
.page-dep h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(21px,2.6vw,25px);letter-spacing:-.015em;margin:46px 0 8px}
.page-dep p{font-size:16px;line-height:1.7;color:var(--encre-2);margin-top:10px}
.page-dep strong{color:var(--encre)}
.periode{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--encre-3);margin-top:4px}

/* Chiffres cles en tete : trois tuiles */
.cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:24px}
.cle{background:var(--panneau);border:1px solid rgba(217,223,229,.9);border-radius:16px;padding:16px 18px}
.cle .valeur{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px;line-height:1.1;color:var(--encre)}
.cle .libelle{font-size:13.5px;color:var(--encre-2);margin-top:4px;line-height:1.45}

/* Tableaux de donnees */
.tableau{overflow-x:auto;margin-top:14px;background:var(--panneau);border:1px solid rgba(217,223,229,.9);border-radius:16px}
.tableau table{width:100%;border-collapse:collapse;font-size:15px;min-width:320px}
.tableau caption{text-align:left;padding:14px 18px 0;font-size:13px;color:var(--encre-3)}
.tableau th,.tableau td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--ligne)}
.tableau thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-3);font-weight:700}
.tableau td.n,.tableau th.n{text-align:right;font-family:'IBM Plex Mono',monospace;font-weight:600}
.tableau tbody tr:last-child td{border-bottom:none}
.tableau tfoot td{font-weight:700;color:var(--encre);border-top:2px solid var(--ligne);border-bottom:none}
.classe{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--encre)}
.classe .badge-dpe{width:30px;height:30px;font-size:15px;border-radius:8px}
.tableau tr.specificite td{font-weight:800;color:var(--encre);border-bottom:2px solid var(--encre)}
.note-tableau{font-size:13.5px !important;color:var(--encre-3) !important;margin-top:10px !important}


/* Apercu de l'outil : les composants de l'application, adresses masquees */
.apercu{display:grid;gap:24px;margin-top:26px;align-items:center}
.apercu-ecran{margin:0;background:var(--fond);border:1px solid rgba(217,223,229,.9);border-radius:22px;padding:14px 14px 12px;box-shadow:0 2px 5px rgba(20,30,40,.05),0 22px 48px rgba(20,30,40,.12);transform:rotate(-.8deg)}
.apercu-barre{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 4px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;color:var(--encre)}
.apercu-barre .compte{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12.5px;background:var(--encre);color:#fff;border-radius:999px;padding:4px 11px}
.apercu-liste{position:relative}
.apercu-liste .lead{margin-top:10px;transition:none}
.apercu-liste::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(transparent,var(--fond));border-radius:0 0 16px 16px;pointer-events:none}
.apercu-ecran figcaption{margin-top:10px;font-size:12px;color:var(--encre-3);text-align:center}
.apercu-texte .gros{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(23px,3vw,29px);line-height:1.18;letter-spacing:-.015em;color:var(--encre);margin:0}
.apercu-texte .apercu-note{font-size:14px;color:var(--encre-3)}
@media(min-width:760px){.apercu{grid-template-columns:1fr 1fr;gap:36px}}
@media(prefers-reduced-motion:reduce){.apercu-ecran{transform:none}}

/* Blocs fixes */
.etapes-dep{list-style:none;counter-reset:etape;padding:0;margin:14px 0 0;display:grid;gap:12px}
.etapes-dep li{counter-increment:etape;position:relative;background:var(--panneau);border:1px solid rgba(217,223,229,.9);border-radius:14px;padding:16px 18px 16px 62px;font-size:15.5px;line-height:1.6;color:var(--encre-2)}
.etapes-dep li::before{content:counter(etape);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--encre);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
.etapes-dep b{display:block;color:var(--encre);margin-bottom:2px}

.confirmation-attente{margin-top:12px;font-weight:700;color:var(--encre) !important}
.confirmation-attente::before{content:"\2713\00a0"}
.voisins{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.voisins a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--panneau);border:1px solid var(--ligne);color:var(--encre);font-weight:600;font-size:14.5px;text-decoration:none}
.voisins a:hover{border-color:var(--encre-3)}
.sources{margin-top:40px !important;font-size:13px !important;color:var(--encre-3) !important;border-top:1px solid var(--ligne);padding-top:16px}
.pied-dep{max-width:820px;margin:0 auto;padding:0 20px 44px;font-size:13px;color:var(--encre-3);display:flex;flex-wrap:wrap;gap:14px}
.pied-dep a{color:var(--encre-2)}

/* Stock de DPE : reperes chiffres, barre de repartition, calendrier. Filets, pas de cartes. */
.reperes{display:grid;gap:0 28px;margin:26px 0 0;border-top:2px solid var(--encre)}
.reperes div{padding:14px 0 16px;border-bottom:1px solid var(--ligne)}
.reperes dt{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-3)}
.reperes dd{margin:4px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(34px,6vw,46px);line-height:1.05;letter-spacing:-.02em;color:var(--encre)}
.reperes dd.detail{margin-top:6px;font-family:inherit;font-weight:400;font-size:14px;line-height:1.45;letter-spacing:0;color:var(--encre-2)}
@media(min-width:760px){.reperes{grid-template-columns:repeat(3,1fr)}.reperes div{border-bottom:none}}
.repartition{display:block;width:100%;height:22px;margin-top:18px;border-radius:6px}
.dpe-A{fill:#1E9E6A}.dpe-B{fill:#57B551}.dpe-C{fill:#A9CF6F}.dpe-D{fill:var(--dpe-d)}.dpe-E{fill:var(--dpe-e)}.dpe-F{fill:var(--dpe-f)}.dpe-G{fill:var(--dpe-g)}
.badge-dpe.A{background:#1E9E6A}.badge-dpe.B{background:#57B551}.badge-dpe.C{background:#A9CF6F;color:#2f4a12}
.tableau tr.passoire td{font-weight:700;color:var(--encre)}
.calendrier{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--ligne)}
.calendrier li{display:grid;gap:4px;padding:16px 0 16px 18px;border-bottom:1px solid var(--ligne);border-left:4px solid var(--ligne)}
.calendrier li.en-vigueur{border-left-color:var(--dpe-g)}
.calendrier .echeance{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-3)}
.calendrier .quoi{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;color:var(--encre)}
.calendrier .quoi .badge-dpe{width:30px;height:30px;font-size:15px;border-radius:8px}
.calendrier .combien{font-size:15px;color:var(--encre-2)}
.page-dep h2.pour-artisans{margin-top:64px;padding-top:28px;border-top:2px solid var(--encre)}
@media(max-width:560px){
  .tableau.serre table{font-size:14px;min-width:0}
  .tableau.serre th,.tableau.serre td{padding:11px 9px}
  .tableau.serre th:first-child,.tableau.serre td:first-child{padding-left:14px}
  .tableau.serre th:last-child,.tableau.serre td:last-child{padding-right:14px}
  .tableau.serre .classe .mot{position:absolute;left:-9999px}
}