/*
Theme Name: Location Pompe 2026
Theme URI: https://locationpompe.com
Description: Thème code pur — location de pompes de chantier, d'épuisement et d'inondation en Île-de-France. L'ardoise d'un dépôt de location : un état de parc daté du jour, lu en lignes de bordereau. Zinc froid, bitume, jaune de signalisation RAL 1023. Zéro rayon, zéro ombre.
Author: Location Pompe
Version: 2026.09.17.1
Text Domain: lp-2026
*/

/* =========================================================
   00. POLICES — Kanit (titraille/chiffres) + Hanken Grotesk (lecture).
   Chargées en <link> Google Fonts depuis header.php (tolérance kit).
   ========================================================= */
:root{
  --f-titre: "Kanit", "Arial Narrow", sans-serif;
  --f-corps: "Hanken Grotesk", -apple-system, "Segoe UI", Arial, sans-serif;
}

/* =========================================================
   01. VARIABLES — palette « signalisation temporaire de chantier ».
   Un seul accent (--signal), un neutre froid zingué, zéro rayon,
   zéro ombre. Contrastes vérifiés dans DIRECTION-ARTISTIQUE.md §3.
   ========================================================= */
:root{
  /* fonds et surfaces */
  --bg: #F2F4F6;            /* --zinc : fond de page */
  --surface: #FFFFFF;       /* --tole : lignes impaires, encarts */
  --bande: #15171A;         /* --bitume : bandes sombres, en-tête tableau, pied de page */

  /* encre */
  --encre: #15171A;
  --encre-douce: #5A6068;
  --encre-claire: #A0A8B0;  /* texte secondaire sur fond bande */

  /* accent unique */
  --signal: #F7BA0B;
  --signal-sombre: #C08A00; /* filets/survol/gros titres only, jamais texte fin */
  --sur-signal: #15171A;    /* texte posé sur le jaune : toujours l'encre */

  /* autres jetons */
  --filet: #C9D1D8;
  --rupture: #B3261E;

  /* formes et matière */
  --rayon: 0;
  --ombre: none;
  --bande-signal: 10px;     /* hauteur des bandes jaunes de séparation */
  --trait-fin: 1px solid var(--filet);
  --trait-fort: 2px solid var(--encre);

  /* grille */
  --conteneur: 1400px;
  --gouttiere: 24px;

  /* décalages des barres collantes (mis à jour par site.js) */
  --h-bandeau: 44px;
  --h-dispo-sticky: 0px;
}

/* Mode sombre — inversion franche. Les bandes noires se fondent dans le
   fond (seule la lumière jaune reste visible), l'encre s'inverse. Le
   site s'OUVRE en clair (§9 interdit n°9) : ceci ne fait que respecter
   la préférence système du visiteur, jamais un défaut forcé par le thème. */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #15171A;
    --surface: #1E2126;
    --bande: #000000;
    --encre: #F2F4F6;
    --encre-douce: #A0A8B0;
    --encre-claire: #7D8590;
    --signal: #F7BA0B;
    --signal-sombre: #F2C744;
    --sur-signal: #15171A;
    --filet: #333940;
    --rupture: #FF6B5B;
  }
}

/* =========================================================
   02. RÉINITIALISATION ET BASE.
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--encre);
  font-family:var(--f-corps);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
table{ border-collapse:collapse; width:100%; }

:focus-visible{ outline:2px solid var(--signal-sombre); outline-offset:2px; }

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
  background:var(--bande); color:var(--signal); padding:12px 18px; z-index:200;
}
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =========================================================
   03. TYPOGRAPHIE.
   ========================================================= */
h1,h2,h3{ font-family:var(--f-titre); font-weight:700; color:var(--encre); }
h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:0.98;
  text-transform:uppercase;
  letter-spacing:-0.015em;
  font-feature-settings:"tnum" 1;
}
h2{
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  line-height:1.04;
  text-transform:uppercase;
  letter-spacing:-0.015em;
}
h3{ font-family:var(--f-titre); font-weight:600; font-size:1.35rem; line-height:1.15; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-corps); font-weight:500; font-size:0.8125rem;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--encre-douce);
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--signal-sombre); display:inline-block; }
.chapo{ font-size:1.15rem; line-height:1.55; color:var(--encre-douce); max-width:68ch; }
.corps-lecture{ max-width:68ch; }
.corps-lecture p + p{ margin-top:1.1em; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* =========================================================
   04. GRILLE ET UTILITAIRES DE MISE EN PAGE.
   ========================================================= */
.wrap{ max-width:var(--conteneur); margin-inline:auto; padding-inline:var(--gouttiere); }
.section{ padding-block:64px; }
.section--serree{ padding-block:40px; }
.section--zinc{ background:var(--bg); }
.section--bande{ background:var(--bande); color:var(--encre-claire); }
.section--surface{ background:var(--surface); }
.section-tete{ margin-bottom:36px; max-width:64ch; }
.section-tete--centre{ margin-inline:auto; text-align:center; }
.section-tete h2{ margin-top:10px; }

.bande-separation{
  height:var(--bande-signal);
  background:var(--signal);
  width:100%;
}

.grille-3{ display:grid; grid-template-columns:repeat(3,1fr); }
.grille-3 > *{ padding:0 28px; border-left:1px solid var(--filet); }
.grille-3 > *:first-child{ border-left:0; padding-left:0; }
.grille-3 > *:last-child{ padding-right:0; }

.grille-2col{ display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:start; }
.grille-8-4{ display:grid; grid-template-columns:8fr 4fr; gap:48px; align-items:start; }

@media (max-width:900px){
  .grille-3{ grid-template-columns:1fr; row-gap:32px; }
  .grille-3 > *{ border-left:0; padding:0 0 28px; border-bottom:1px solid var(--filet); }
  .grille-3 > *:last-child{ border-bottom:0; padding-bottom:0; }
  .grille-2col,.grille-8-4{ grid-template-columns:1fr; gap:32px; }
}

/* =========================================================
   05. BOUTONS ET CHAMPS.
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-titre); font-weight:600; text-transform:uppercase; letter-spacing:0.02em;
  font-size:0.9375rem; padding:14px 26px; border:2px solid var(--encre);
  border-radius:var(--rayon); box-shadow:var(--ombre);
  background:var(--signal); color:var(--sur-signal);
  transition:background 90ms linear, color 90ms linear, border-color 90ms linear;
  white-space:nowrap;
}
.btn:hover,.btn:focus-visible{ background:var(--bande); color:var(--signal); border-color:var(--encre); }
.btn--sombre{ background:var(--bande); color:var(--signal); border-color:var(--encre); }
.btn--sombre:hover,.btn--sombre:focus-visible{ background:var(--signal); color:var(--sur-signal); }
.btn--secondaire{ background:transparent; color:var(--encre); border:2px solid var(--encre); }
.btn--secondaire:hover,.btn--secondaire:focus-visible{ background:var(--encre); color:var(--bg); }
.btn--pleine{ width:100%; }

.champ-groupe{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.champ-label{ font-size:0.8125rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color:var(--encre-douce); }
.champ-label .req{ color:var(--rupture); text-transform:none; letter-spacing:0; font-weight:400; }
.champ-label .fac{ text-transform:none; letter-spacing:0; font-weight:400; }
.champ{
  height:52px; padding:0 16px; background:var(--surface); color:var(--encre);
  border:2px solid var(--encre); border-radius:var(--rayon); width:100%;
}
textarea.champ{ height:auto; min-height:110px; padding-top:14px; resize:vertical; }
.champ:focus-visible{ border-color:var(--signal-sombre); box-shadow:inset 0 0 0 3px var(--signal); outline:none; }
.champ::placeholder{ color:var(--encre-douce); opacity:0.8; }
select.champ{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--encre) 50%),linear-gradient(135deg, var(--encre) 50%, transparent 50%); background-position:calc(100% - 22px) center, calc(100% - 16px) center; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }

/* =========================================================
   06. EN-TÊTE — bandeau d'astreinte + navigation.
   ========================================================= */
.bandeau-astreinte{
  position:sticky; top:0; z-index:60; height:var(--h-bandeau);
  background:var(--bande); color:var(--signal);
  display:flex; align-items:center;
}
.bandeau-astreinte .wrap{ display:flex; align-items:center; gap:18px; width:100%; }
.bandeau-astreinte__tel{ font-family:var(--f-titre); font-weight:700; font-size:0.9375rem; letter-spacing:0.02em; white-space:nowrap; }
.bandeau-astreinte__note{ color:var(--encre-claire); font-size:0.8125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.bandeau-astreinte__date{ margin-left:auto; flex:0 0 auto; font-family:var(--f-titre); font-weight:700; font-size:0.8125rem; text-transform:uppercase; white-space:nowrap; }
@media (max-width:480px){
  .bandeau-astreinte__date{ display:none; }
}

.site-header{ background:var(--surface); border-bottom:2px solid var(--encre); }
.site-header__inner{ display:flex; align-items:center; gap:24px; min-height:76px; }
.brand{ display:flex; align-items:center; }
.brand svg,.brand img{ height:34px; width:auto; }

.nav{ display:flex; align-items:center; gap:28px; margin-left:24px; }
.nav a{ font-family:var(--f-titre); font-weight:600; font-size:0.9375rem; text-transform:uppercase; letter-spacing:0.01em; padding:6px 0; border-bottom:2px solid transparent; }
.nav a:hover,.nav a:focus-visible,.nav a.is-current{ border-bottom-color:var(--signal-sombre); }

.header-cta{ margin-left:auto; }
.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:2px solid var(--encre); }
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{ content:""; display:block; width:20px; height:2px; background:var(--encre); position:relative; }
.nav-toggle__bars::before{ position:absolute; top:-6px; }
.nav-toggle__bars::after{ position:absolute; top:6px; }

.mobile-nav-panel{ display:contents; }

@media (max-width:900px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .header-cta{ display:none; }
  .mobile-nav-panel{
    display:block; position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh;
    background:var(--bande); color:var(--encre-claire); padding:24px; transform:translateX(100%);
    transition:transform 160ms ease; z-index:120; overflow-y:auto;
  }
  .mobile-nav-panel.is-open{ transform:translateX(0); }
  .mobile-nav-panel .nav{ display:flex; flex-direction:column; gap:0; margin:0 0 24px; }
  .mobile-nav-panel .nav a{ color:var(--encre-claire); border-bottom:1px solid #333940; padding:16px 0; }
  .mobile-nav-panel .nav a:hover,.mobile-nav-panel .nav a:focus-visible,.mobile-nav-panel .nav a.is-current{ color:var(--signal); border-bottom-color:#333940; }
  .mobile-nav-panel .btn{ width:100%; }
}
@media (min-width:901px){
  .mobile-nav-panel{ display:none; }
}

/* =========================================================
   07. HERO + BARRE DE SÉLECTION.
   ========================================================= */
.hero{ position:relative; min-height:min(72vh,620px); display:flex; align-items:flex-end; background:var(--bande); }
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.06); }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 46%, rgba(0,0,0,0.12) 100%); }
.hero__content{ position:relative; z-index:2; width:100%; padding-bottom:64px; }
.hero__eyebrow{ color:var(--signal); }
.hero__eyebrow::before{ background:var(--signal); }
.hero__title{ color:#FFFFFF; max-width:64rem; margin-top:14px; }
.hero__sous{ color:#E4E7EB; max-width:52ch; margin-top:16px; font-size:1.05rem; }

.hero-select{
  position:relative; z-index:3; background:var(--surface); border:2px solid var(--encre);
  margin-top:40px; margin-bottom:-40px; padding:22px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:16px; align-items:end;
}
.hero-select__champ{ display:flex; flex-direction:column; gap:6px; }
.hero-select__label{ font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color:var(--encre-douce); }
.hero-select .btn{ height:52px; }

@media (max-width:900px){
  .hero{ min-height:64vh; align-items:stretch; }
  .hero__content{ padding-bottom:0; display:flex; flex-direction:column; justify-content:flex-end; min-height:64vh; padding-top:40px; }
  .hero-select{ position:static; margin-top:20px; margin-bottom:0; grid-template-columns:1fr; }
}

/* =========================================================
   08. LA BANDE DE DISPONIBILITÉ — geste signature (§7 DIRECTION-ARTISTIQUE).
   ========================================================= */
.dispo{ background:var(--signal); color:var(--sur-signal); }
.dispo__inner{ display:flex; align-items:stretch; }
.dispo__label{
  flex:0 0 200px; background:var(--bande); color:var(--signal);
  display:flex; flex-direction:column; justify-content:center; padding:14px 18px;
}
.dispo__label-titre{ font-family:var(--f-titre); font-weight:700; font-size:0.8125rem; text-transform:uppercase; line-height:1.2; }
.dispo__label-date{ font-family:var(--f-titre); font-weight:700; font-size:1.05rem; text-transform:uppercase; margin-top:4px; }

.dispo__liste{ display:flex; flex:1; overflow-x:auto; scrollbar-width:none; }
.dispo__liste::-webkit-scrollbar{ display:none; }
.dispo__item{
  flex:1; min-width:150px; display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:14px 20px; border-left:2px solid var(--encre);
}
.dispo__etat{ width:12px; height:12px; border:2px solid var(--sur-signal); display:inline-block; margin-bottom:6px; }
.dispo__item--disponible .dispo__etat{ background:var(--sur-signal); }
.dispo__item--dernieres .dispo__etat{ background:linear-gradient(to top, var(--sur-signal) 50%, transparent 50%); }
.dispo__item--rupture .dispo__etat{ background:transparent; position:relative; }
.dispo__item--rupture .dispo__etat::after{ content:""; position:absolute; inset:-2px; background:linear-gradient(to top right, transparent calc(50% - 1px), var(--rupture), transparent calc(50% + 1px)); }
.dispo__item--rupture{ background:var(--surface); color:var(--rupture); }
.dispo__item--rupture .dispo__nom,.dispo__item--rupture .dispo__sous{ color:var(--rupture); }

.dispo__nom{ font-family:var(--f-titre); font-weight:600; text-transform:uppercase; font-size:0.8125rem; letter-spacing:0.02em; }
.dispo__compte{ font-family:var(--f-titre); font-weight:700; font-size:2.25rem; line-height:1; }
.dispo__sous{ font-size:0.75rem; }

.dispo.is-sticky{ position:sticky; top:var(--h-bandeau); z-index:50; }
.dispo.is-sticky .dispo__inner{ min-height:56px; }
.dispo.is-sticky .dispo__label{ flex-basis:auto; padding:8px 14px; flex-direction:row; align-items:center; gap:8px; }
.dispo.is-sticky .dispo__label-titre{ display:none; }
.dispo.is-sticky .dispo__item{ flex-direction:row; align-items:center; gap:8px; padding:8px 16px; white-space:nowrap; }
.dispo.is-sticky .dispo__compte{ font-size:1.15rem; }
.dispo.is-sticky .dispo__sous,.dispo.is-sticky .dispo__etat{ display:none; }

@media (max-width:780px){
  .dispo__inner{ flex-direction:row; }
  .dispo__liste{ scroll-snap-type:x mandatory; }
  .dispo__item{ min-width:128px; flex:0 0 128px; scroll-snap-align:start; }
  .dispo__label{ flex-basis:128px; padding:10px; }
}

/* =========================================================
   09. LE BORDEREAU DE PARC — tableau, jamais des cartes.
   ========================================================= */
.bordereau{ margin-top:8px; }
.bordereau__table{ width:100%; }
.bordereau__table thead th{
  position:sticky; top:calc(var(--h-bandeau) + var(--h-dispo-sticky));
  background:var(--bande); color:var(--signal); text-align:left; z-index:10;
  font-family:var(--f-titre); font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em;
  padding:12px 14px; border-bottom:2px solid var(--encre); white-space:nowrap;
}
.bordereau__table thead th button{
  display:inline-flex; align-items:center; gap:4px; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit;
}
.bordereau__table thead th[aria-sort]{ cursor:pointer; }
.bordereau__table tbody tr{ height:88px; border-bottom:1px solid var(--filet); background:var(--surface); }
.bordereau__table tbody tr:nth-child(even){ background:var(--bg); }
.bordereau__table td{ padding:8px 14px; vertical-align:middle; font-size:0.95rem; }
.bordereau__ref{ color:var(--encre-douce); font-size:0.8125rem; }
.bordereau__photo{ width:96px; height:72px; overflow:hidden; background:var(--bande); position:relative; display:block; }
.bordereau__photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.06); }
.bordereau__photo-vide{ width:100%; height:100%; background:repeating-linear-gradient(45deg, #21242A, #21242A 6px, var(--bande) 6px, var(--bande) 12px); }
.bordereau__machine-nom{ font-family:var(--f-titre); font-weight:600; }
.bordereau__machine-usage{ display:block; color:var(--encre-douce); font-size:0.8125rem; margin-top:2px; }
.bordereau__prix{ font-family:var(--f-titre); font-weight:700; background:rgba(247,186,11,0.22); }
.bordereau__prix-unite{ font-family:var(--f-corps); font-weight:400; font-size:0.75rem; color:var(--encre-douce); }
.bordereau__badge{ display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:500; }
.bordereau__badge::before{ content:""; width:10px; height:10px; border:2px solid var(--encre); flex:none; }
.bordereau__badge--disponible::before{ background:var(--encre); }
.bordereau__badge--dernieres::before{ background:linear-gradient(to top, var(--encre) 50%, transparent 50%); }
.bordereau__badge--rupture{ color:var(--rupture); }
.bordereau__badge--rupture::before{ border-color:var(--rupture); background:transparent; }
.bordereau__more{ text-align:center; margin-top:28px; }

@media (max-width:780px){
  .bordereau__table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .bordereau__table,.bordereau__table tbody,.bordereau__table tr,.bordereau__table td{ display:block; width:100%; }
  .bordereau__table tr{
    height:auto; border:2px solid var(--encre); margin-bottom:16px; padding:14px;
    display:grid; grid-template-columns:96px 1fr; gap:10px 16px;
  }
  .bordereau__table td{ padding:0; border:0; }
  .bordereau__table td.bordereau__cell-photo{ grid-row:1 / 4; }
  .bordereau__table td[data-label]::before{
    content:attr(data-label); display:block; font-size:0.6875rem; font-weight:500; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--encre-douce); margin-bottom:2px;
  }
  .bordereau__table td.bordereau__cell-photo::before{ display:none; }
  .bordereau__table td.bordereau__cell-machine{ grid-column:2; }
  .bordereau__table td.bordereau__cell-specs{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:14px 24px; border-top:1px solid var(--filet); padding-top:10px; margin-top:4px; }
  .bordereau__table td.bordereau__cell-prix{ grid-column:1 / -1; display:flex; gap:24px; }
  .bordereau__table td.bordereau__cell-etat{ grid-column:1 / -1; }
  .bordereau__photo{ width:96px; height:72px; }
}

/* =========================================================
   10. TROIS CAS D'URGENCE.
   ========================================================= */
.urgence-fig{ aspect-ratio:4/3; overflow:hidden; background:var(--bande); margin-bottom:6px; }
.urgence-fig img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.06); }
.fig-credit{ margin:0 0 14px; font-size:.7rem; color:var(--encre-douce); text-align:right; opacity:.8; }
.urgence-titre{ margin-bottom:10px; }
.urgence-texte{ color:var(--encre-douce); margin-bottom:16px; }
.urgence-liste li{ border-top:1px solid var(--filet); padding:10px 0; }
.urgence-liste li:first-child{ border-top:0; padding-top:0; }
.urgence-liste a{ text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.urgence-liste a:hover{ color:var(--signal-sombre); }

/* =========================================================
   11. BANDE BITUME — LES 4 COMPTEURS.
   ========================================================= */
.compteurs__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.compteurs__item{ padding:0 24px; border-left:2px solid #333940; }
.compteurs__item:first-child{ border-left:0; padding-left:0; }
.compteurs__chiffre{ font-family:var(--f-titre); font-weight:700; font-size:clamp(3rem,7vw,5.5rem); color:var(--signal); line-height:1; }
.compteurs__label{ font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--encre-claire); margin-top:8px; }
@media (max-width:780px){
  .compteurs__grid{ grid-template-columns:1fr 1fr; row-gap:32px; }
  .compteurs__item:nth-child(2){ border-left:2px solid #333940; }
  .compteurs__item:nth-child(3){ border-left:0; padding-left:0; }
}

/* =========================================================
   12. COMMENT ÇA SE PASSE — asymétrique 5/7.
   ========================================================= */
.etapes-fig{ aspect-ratio:3/4; overflow:hidden; background:var(--bande); }
.etapes-fig img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.06); }
.etapes-liste li{ display:flex; gap:20px; padding:20px 0; border-top:1px solid var(--filet); }
.etapes-liste li:first-child{ border-top:0; padding-top:0; }
.etapes-num{ font-family:var(--f-titre); font-weight:700; color:var(--signal-sombre); font-size:1.75rem; flex:none; width:2ch; }
.etapes-corps h3{ margin-bottom:4px; }
.etapes-corps p{ color:var(--encre-douce); }

/* =========================================================
   13. LE PARC PAR FAMILLE — bandeaux 21:9.
   ========================================================= */
.famille-bandeau{ display:block; position:relative; aspect-ratio:21/9; overflow:hidden; background:var(--bande); margin-bottom:var(--gouttiere); }
.famille-bandeau img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.06); }
.famille-bandeau__voile{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 60%); }
.famille-bandeau__cartouche{
  position:absolute; left:0; bottom:0; background:var(--bande); color:var(--signal);
  font-family:var(--f-titre); font-weight:600; text-transform:uppercase; font-size:0.8125rem;
  padding:6px 14px; letter-spacing:0.03em;
}
.famille-bandeau__corps{ position:absolute; left:0; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; padding:0 5%; max-width:70%; }
.famille-bandeau__titre{ color:#FFFFFF; font-size:clamp(1.6rem,3vw,2.2rem); }
.famille-bandeau__specs{ display:flex; gap:20px; margin-top:14px; flex-wrap:wrap; }
.famille-bandeau__specs span{ color:#E4E7EB; font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.04em; }
.famille-bandeau__specs strong{ color:var(--signal); font-family:var(--f-titre); }
@media (max-width:600px){
  .famille-bandeau{ aspect-ratio:4/5; }
  .famille-bandeau__corps{ max-width:88%; }
}

/* =========================================================
   14. ENTRÉES ET SORTIES DE PARC — asymétrique 8/4.
   ========================================================= */
.mouvements-liste li{ display:flex; gap:18px; padding:14px 0; border-top:1px solid var(--filet); }
.mouvements-liste li:first-child{ border-top:0; padding-top:0; }
.mouvements-date{ font-family:var(--f-titre); font-weight:700; color:var(--signal-sombre); flex:none; width:5ch; }

.mouvements-form{ background:var(--bande); color:var(--encre-claire); padding:28px; position:sticky; top:calc(var(--h-bandeau) + 16px); }
.mouvements-form h3{ color:#FFFFFF; margin-bottom:18px; }
.mouvements-form .champ{ background:#1E2126; border-color:#333940; color:#F2F4F6; }
.mouvements-form .champ-label{ color:var(--encre-claire); }
.mouvements-form .fac,.mouvements-form .req{ color:var(--encre-claire); }

/* =========================================================
   15. ZONE DE LIVRAISON.
   ========================================================= */
.zone-intro{ margin-bottom:24px; color:var(--encre-douce); }
.zone-liste{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px 24px; }
.zone-liste li{ font-size:0.875rem; padding-left:14px; position:relative; }
.zone-liste li::before{ content:""; position:absolute; left:0; top:0.55em; width:4px; height:4px; background:var(--signal-sombre); }
@media (max-width:780px){ .zone-liste{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   16. PIED DE PAGE.
   ========================================================= */
.site-footer{ background:var(--bande); color:var(--encre-claire); }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-block:48px; }
/* Nombre de colonnes réellement rendues (cf. footer.php : "Le matériel" et
   "Les urgences" ne s'affichent que si des pages existent). */
.site-footer__grid--cols-3{ grid-template-columns:1.4fr repeat(2,1fr); }
.site-footer__grid--cols-4{ grid-template-columns:1.4fr repeat(3,1fr); }
.site-footer__grid--cols-5{ grid-template-columns:1.4fr repeat(4,1fr); }
.site-footer__col h4{ font-family:var(--f-titre); font-weight:600; text-transform:uppercase; font-size:0.875rem; color:var(--signal); margin-bottom:14px; letter-spacing:0.03em; }
.site-footer__col ul li{ padding:6px 0; }
.site-footer__col a:hover{ color:var(--signal); }
.site-footer__brand{ margin-bottom:14px; }
.site-footer__desc{ font-size:0.875rem; max-width:34ch; }
.site-footer__bottom{ border-top:1px solid #333940; padding:18px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.8125rem; }
.site-footer__bottom a:hover{ color:var(--signal); }
@media (max-width:900px){ .site-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .site-footer__grid{ grid-template-columns:1fr; } }

.pied-appel{ background:var(--bande); color:#FFFFFF; }
.pied-appel .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:32px; flex-wrap:wrap; }
.pied-appel h2{ color:#FFFFFF; font-size:clamp(1.6rem,3vw,2.2rem); }
.pied-appel p{ color:var(--encre-claire); margin-top:6px; }

/* =========================================================
   17. TABLEAUX DU CORPS DE PAGE (contenu éditorial, cf. socle-mobile.php).
   ========================================================= */
.sbs_tableau{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:24px 0; border:2px solid var(--encre); }
.sbs_tableau table{ min-width:32rem; width:100%; }
.sbs_tableau th,.sbs_tableau td{ padding:10px 14px; border-bottom:1px solid var(--filet); text-align:left; }
.sbs_tableau thead th{ background:var(--bande); color:var(--signal); font-family:var(--f-titre); text-transform:uppercase; font-size:0.8125rem; }
.sbs_tableau tbody tr:nth-child(even){ background:var(--bg); }

/* =========================================================
   18. GABARITS ÉDITORIAUX — page, article, catégorie, 404.
   ========================================================= */
.fil{ display:flex; gap:6px; flex-wrap:wrap; font-size:0.8125rem; color:var(--encre-douce); margin-bottom:20px; }
.fil a:hover{ color:var(--signal-sombre); }
.fil--clair{ color:var(--encre-claire); }
.fil--clair a:hover{ color:var(--signal); }

.article-entete{ margin-top:8px; }
.article-tag{ display:inline-block; font-family:var(--f-titre); font-weight:600; text-transform:uppercase; font-size:0.75rem; letter-spacing:0.05em; background:var(--signal); color:var(--sur-signal); padding:5px 10px; margin-bottom:14px; }
.article-meta{ display:flex; gap:10px; flex-wrap:wrap; font-size:0.8125rem; color:var(--encre-douce); margin-top:14px; }
.article-hero-img{ aspect-ratio:16/9; max-height:520px; overflow:hidden; margin:28px 0; background:var(--bande); }
.article-hero-img img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.06); }

.article-mise-en-page{ display:grid; grid-template-columns:8fr 4fr; gap:48px; align-items:start; }
.article-corps p{ margin-bottom:1.1em; }
.article-corps h2{ margin-top:2em; margin-bottom:0.6em; text-transform:none; font-size:1.6rem; }
.article-corps h3{ margin-top:1.6em; margin-bottom:0.5em; }
.article-corps a{ text-decoration:underline; text-underline-offset:3px; }
.article-corps a:hover{ color:var(--signal-sombre); }
.article-corps ul,.article-corps ol{ margin:1em 0 1.1em; padding-left:1.4em; }
.article-corps li{ margin-bottom:0.4em; }
.article-corps li::marker{ color:var(--signal-sombre); }
.body-figure{ margin:1.6em 0; background:var(--bande); }
.body-figure img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:saturate(0.92) contrast(1.06); }
.body-figure figcaption{ font-size:0.8125rem; color:var(--encre-douce); padding:8px 4px 0; }

.aside-carte{ border:2px solid var(--encre); padding:22px; margin-bottom:24px; background:var(--surface); }
.aside-carte__titre{ font-family:var(--f-titre); font-weight:600; text-transform:uppercase; font-size:0.9375rem; margin-bottom:14px; }
.aside-sommaire ol{ list-style:decimal; padding-left:1.2em; }
.aside-sommaire li{ margin-bottom:8px; font-size:0.9375rem; }
.aside-sommaire a:hover{ color:var(--signal-sombre); }

.auteur-bloc{ display:flex; gap:18px; align-items:flex-start; border-top:2px solid var(--encre); padding-top:24px; margin-top:36px; }
.auteur-bloc__ecusson{ flex:none; width:56px; height:56px; background:var(--bande); color:var(--signal); display:flex; align-items:center; justify-content:center; padding:12px; }
.auteur-bloc h4{ font-family:var(--f-titre); font-weight:600; text-transform:uppercase; font-size:0.9375rem; margin-bottom:4px; }
.auteur-bloc p{ color:var(--encre-douce); font-size:0.9375rem; }

.cta-milieu{ background:var(--bg); border:2px solid var(--encre); padding:22px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:32px 0; }
.cta-fin{ background:var(--bande); color:#FFFFFF; padding:32px; margin-top:36px; }
.cta-fin h3{ color:#FFFFFF; }
.cta-fin p{ color:var(--encre-claire); margin:8px 0 18px; }

@media (max-width:900px){ .article-mise-en-page{ grid-template-columns:1fr; } }

.cat-hero{ background:var(--bande); color:var(--encre-claire); padding-block:56px 40px; }
.cat-hero h1{ color:#FFFFFF; margin-top:12px; }
.cat-hero .chapo{ color:var(--encre-claire); margin-top:14px; }

.grille-articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gouttiere); }
.carte-article{ border:2px solid var(--encre); background:var(--surface); display:flex; flex-direction:column; }
.carte-article__img{ aspect-ratio:3/2; overflow:hidden; background:var(--bande); }
.carte-article__img img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.06); }
.carte-article__corps{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.carte-article__cat{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--signal-sombre); font-weight:500; }
.carte-article__titre{ font-family:var(--f-titre); font-weight:600; font-size:1.15rem; line-height:1.2; }
.carte-article__meta{ margin-top:auto; font-size:0.8125rem; color:var(--encre-douce); }
@media (max-width:960px){ .grille-articles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grille-articles{ grid-template-columns:1fr; } }

.vide{ text-align:center; padding:48px 0; }
.vide p{ color:var(--encre-douce); margin-bottom:18px; }

.erreur-404{ text-align:center; padding-block:40px; }
.erreur-404__code{ font-family:var(--f-titre); font-weight:700; font-size:clamp(4rem,14vw,8rem); color:var(--signal-sombre); line-height:1; }
.erreur-404 .chapo{ margin-inline:auto; }

/* =========================================================
   19. GABARITS MACHINE ET SITUATION.
   ========================================================= */
.machine-hero{ background:var(--bande); color:#FFFFFF; }
.machine-hero .wrap{ display:grid; grid-template-columns:7fr 5fr; gap:40px; padding-block:48px; align-items:center; }
.machine-hero__img{ aspect-ratio:4/3; overflow:hidden; background:#000; }
.machine-hero__img img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.06); }
.machine-hero h1{ color:#FFFFFF; }
.machine-hero__ref{ color:var(--encre-claire); font-size:0.9375rem; margin-top:8px; }
.machine-hero__prix{ display:flex; gap:24px; margin-top:22px; flex-wrap:wrap; }
.machine-hero__prix strong{ display:block; font-family:var(--f-titre); font-weight:700; font-size:2rem; color:var(--signal); }
.machine-hero__prix span{ font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--encre-claire); }
.machine-hero__actions{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:900px){ .machine-hero .wrap{ grid-template-columns:1fr; padding-block:32px; } }

.caracteristiques{ display:grid; grid-template-columns:repeat(5,1fr); border:2px solid var(--encre); }
.caracteristiques__item{ padding:20px; border-left:1px solid var(--filet); }
.caracteristiques__item:first-child{ border-left:0; }
.caracteristiques__label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--encre-douce); }
.caracteristiques__valeur{ font-family:var(--f-titre); font-weight:700; font-size:1.5rem; margin-top:6px; }
.caracteristiques__valeur--vide{ color:var(--encre-douce); font-family:var(--f-corps); font-weight:400; font-size:0.95rem; }
@media (max-width:900px){ .caracteristiques{ grid-template-columns:repeat(2,1fr); } .caracteristiques__item:nth-child(2){ border-left:1px solid var(--filet); } .caracteristiques__item:nth-child(odd){ border-left:0; } }
@media (max-width:480px){ .caracteristiques{ grid-template-columns:1fr; } .caracteristiques__item{ border-left:0 !important; border-top:1px solid var(--filet); } .caracteristiques__item:first-child{ border-top:0; } }

.machine-usage{ background:var(--bg); border:2px solid var(--encre); padding:24px; margin:32px 0; }
.machine-usage h3{ margin-bottom:10px; }

.situation-hero{ background:var(--bande); }
.situation-hero .wrap{ padding-block:56px 40px; }
.situation-hero h1{ color:#FFFFFF; }
.situation-hero .chapo{ color:var(--encre-claire); margin-top:16px; }

.situation-machines h2{ margin-bottom:24px; }

/* =========================================================
   20. FORMULAIRE DE DEMANDE (page-devis.php et blocs réutilisés).
   ========================================================= */
.devis{ display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:start; }
.devis .devis-form,.aside-carte .devis-form{ background:var(--surface); border:2px solid var(--encre); padding:28px; }
.mouvements-form .devis-form{ padding:0; }
.devis-form fieldset{ border:0; padding:0; margin:0 0 22px; }
.devis-form legend{ font-family:var(--f-titre); font-weight:600; text-transform:uppercase; font-size:0.9375rem; margin-bottom:12px; padding:0; }
.devis-form__ligne{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.devis-succes{ text-align:center; padding:40px 20px; background:var(--surface); border:2px solid var(--encre); }
.devis-succes__coche{ width:52px; height:52px; border:2px solid var(--encre); background:var(--signal); color:var(--sur-signal); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 16px; }
.devis-aside{ background:var(--bg); border:2px solid var(--encre); padding:24px; }
.devis-aside h3{ margin-bottom:12px; }
.devis-aside ul{ margin-top:14px; }
.devis-aside li{ padding:10px 0; border-top:1px solid var(--filet); font-size:0.9375rem; }
.devis-aside li:first-child{ border-top:0; }
@media (max-width:900px){ .devis{ grid-template-columns:1fr; } .devis-form__ligne{ grid-template-columns:1fr; } }

/* =========================================================
   21. FORMULAIRE QUALIFIANT 5 ÉTAPES (.quiz) — portage du modèle interne du
   réseau (mécanique : assets/site.js::initQuiz), habillé en lignes et bandes
   jaunes, zéro rayon/ombre. Remplace template-parts/formulaire-demande.php
   partout (accueil, page de demande, colonne des articles, pages locales).
   ========================================================= */
.quiz{ background:var(--surface); border:2px solid var(--encre); padding:26px; }
.quiz--compact{ padding:22px; }
.quiz-topline{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.quiz-back{ font-family:var(--f-titre); font-weight:600; font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--encre-douce); }
.quiz-back:hover{ color:var(--signal-sombre); }
.quiz-step-label{ font-family:var(--f-titre); font-weight:600; font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--encre-douce); margin-left:auto; }
.quiz-progress{ height:4px; background:var(--filet); margin-bottom:22px; }
.quiz-progress__fill{ display:block; height:100%; width:0; background:var(--signal); transition:width 160ms linear; }
.quiz-recap{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.quiz-pill{ border:2px solid var(--encre); background:var(--bg); color:var(--encre); font-size:0.8125rem; font-weight:500; padding:6px 12px; }
.quiz-pill:hover{ background:var(--encre); color:var(--bg); }

.quiz-step{ display:block; margin-bottom:28px; }
html.js .quiz-step{ display:none; margin-bottom:0; }
html.js .quiz-step.active{ display:block; }
.quiz-q{ font-family:var(--f-titre); font-weight:700; font-size:1.25rem; text-transform:none; letter-spacing:0; margin-bottom:16px; }

.opt-grid{ display:grid; gap:10px; margin-bottom:18px; }
.opt-grid--cards{ grid-template-columns:repeat(2,1fr); }
.opt-grid--pills{ grid-template-columns:1fr; }
.opt{
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  border:2px solid var(--encre); border-radius:var(--rayon); background:var(--surface); color:var(--encre);
  padding:14px 16px; font-family:var(--f-corps); font-weight:500; font-size:0.9375rem;
  transition:background 90ms linear, color 90ms linear;
}
.opt:hover{ background:var(--bg); }
.opt.selected{ background:var(--signal); border-color:var(--encre); color:var(--sur-signal); font-weight:600; }
.opt--card{ flex-direction:column; align-items:flex-start; gap:12px; }
.opt-ico{ width:26px; height:26px; flex:none; color:var(--signal-sombre); }
.opt.selected .opt-ico{ color:var(--sur-signal); }
.opt-ico svg{ width:100%; height:100%; }
.opt-txt{ line-height:1.25; }

.quiz-idf-note{ font-size:0.8125rem; color:var(--encre-douce); margin:-10px 0 18px; }
.quiz-nav{ margin-top:4px; }

.quiz-success{ text-align:center; padding:24px 0; }
.quiz-success h3{ margin-top:16px; }

@media (max-width:480px){
  .opt-grid--cards{ grid-template-columns:1fr; }
}

/* =========================================================
   22. PAGES LOCALES — commune / département / hub / capture (page-local.php,
   page-intervention.php, page-capture.php). Portage du modèle interne,
   habillage entièrement réécrit : bandeau bitume, lignes de bordereau pour
   les listes de communes, zéro carte à coin arrondi (interdit n°1 de
   DIRECTION-ARTISTIQUE.md §9).
   ========================================================= */
.local-hero{ background:var(--bande); padding-block:40px 0; }
.local-hero-grid{ display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:start; padding-bottom:48px; }
.local-hero-text{ padding-top:8px; }
.local-badge{
  display:inline-block; font-family:var(--f-titre); font-weight:600; text-transform:uppercase;
  font-size:0.75rem; letter-spacing:0.05em; background:var(--signal); color:var(--sur-signal);
  padding:5px 10px; margin-bottom:16px;
}
.local-hero-text h1{ color:#FFFFFF; }
.local-accroche{ color:var(--encre-claire); font-size:1.05rem; margin-top:16px; max-width:52ch; }
.local-hero-points{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.local-hero-points li{ color:var(--encre-claire); font-size:0.9375rem; padding-left:22px; position:relative; }
.local-hero-points li::before{ content:""; position:absolute; left:0; top:0.45em; width:10px; height:10px; border:2px solid var(--signal); }

.local-section{ }
.local-prose{ max-width:68ch; }
.local-prose p + p{ margin-top:1.1em; }

.faq details{ border-top:1px solid var(--filet); padding:16px 0; }
.faq details:first-child{ border-top:0; }
.faq summary{
  cursor:pointer; font-family:var(--f-titre); font-weight:600; font-size:1.0625rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--f-titre); font-weight:700; font-size:1.3rem; color:var(--signal-sombre); flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq__reponse{ color:var(--encre-douce); margin-top:12px; max-width:68ch; }

.local-depts{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px 48px; }
.local-dept-titre{ display:flex; align-items:center; gap:10px; font-size:1.0625rem; margin-bottom:10px; padding-bottom:10px; border-bottom:2px solid var(--encre); }
.local-dept-num{ font-family:var(--f-titre); font-weight:700; color:var(--signal-sombre); }
.local-dept-villes{ display:flex; flex-direction:column; }
.local-ville-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-top:1px solid var(--filet); font-size:0.9375rem; }
.local-ville-row:first-child{ border-top:0; }
.local-ville-nom{ font-weight:500; }
.local-ville-liens{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.local-ville-liens a{ text-decoration:underline; text-underline-offset:3px; color:var(--encre-douce); font-size:0.8125rem; }
.local-ville-liens a:hover{ color:var(--signal-sombre); }

.local-voisines-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.local-voisines-list a{ border:1px solid var(--filet); padding:6px 12px; font-size:0.875rem; }
.local-voisines-list a:hover{ border-color:var(--encre); color:var(--signal-sombre); }

@media (max-width:900px){
  .local-hero-grid{ grid-template-columns:1fr; padding-bottom:32px; }
  .local-depts{ grid-template-columns:1fr; }
  .local-ville-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .local-ville-liens{ justify-content:flex-start; }
}

/* =========================================================
   23. CARTE ÎLE-DE-FRANCE (.lp-carte-*) — accueil (front-page.php) + hub
   (page-intervention.php). Portage du modèle interne : logique et données
   géographiques copiées à l'identique (inc/carte-idf-data.php), habillage
   entièrement réécrit dans le registre de ce site — à plat, zéro rayon,
   zéro ombre, zinc/bitume/jaune signal, titraille Kanit. Aucune classe ni
   couleur du modèle ne survit ici. Arbitrage du 17/09/2026 : lève l'interdit
   n°7 de DIRECTION-ARTISTIQUE.md §9 pour ce portage uniquement.
   ========================================================= */
.lp-carte-layout{ display:grid; grid-template-columns:7fr 5fr; gap:40px; align-items:start; margin-top:8px; }
.lp-carte-map-wrap{ background:var(--surface); border:2px solid var(--encre); padding:20px; }
.lp-carte-maps{ display:flex; gap:24px; flex-wrap:wrap; }
.lp-carte-zoom-block{ flex:1 1 260px; min-width:220px; }
.lp-carte-main-block{ flex:2 1 360px; min-width:280px; }
.lp-carte-mini-titre{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--encre-douce); margin-bottom:8px; }
.lp-carte-svg{ width:100%; height:auto; display:block; }

.lp-carte-dept-contexte{ fill:var(--bg); stroke:var(--filet); stroke-width:1; }
.lp-carte-dept path{ fill:var(--bg); stroke:var(--encre); stroke-width:1.4; transition:fill 90ms linear; }
.lp-carte-dept:hover path,.lp-carte-dept:focus path{ fill:var(--signal); }
.lp-carte-dept-label{ font-family:var(--f-titre); font-weight:600; font-size:9px; text-transform:uppercase; fill:var(--encre-douce); text-anchor:middle; pointer-events:none; }
.lp-carte-dept-label--contexte{ fill:var(--encre-claire); }

.lp-carte-point{ fill:var(--bande); stroke:var(--signal); stroke-width:1.5; }
.lp-carte-hit{ fill:transparent; cursor:pointer; }
.lp-carte-commune:hover .lp-carte-point,.lp-carte-commune:focus .lp-carte-point,.lp-carte-commune.lp-carte-open .lp-carte-point{ fill:var(--signal); stroke:var(--encre); }
.lp-carte-bulle{ opacity:0; pointer-events:none; transition:opacity 90ms linear; }
.lp-carte-commune:hover .lp-carte-bulle,.lp-carte-commune:focus-within .lp-carte-bulle,.lp-carte-commune.lp-carte-open .lp-carte-bulle{ opacity:1; pointer-events:auto; }
.lp-carte-bulle-in{ background:var(--bande); border:2px solid var(--encre); padding:8px 10px; font-family:var(--f-corps); font-size:11px; color:#FFFFFF; }
.lp-carte-bulle-in strong{ display:block; font-family:var(--f-titre); font-weight:600; margin-bottom:4px; color:var(--signal); }
.lp-carte-bulle-liens{ display:flex; flex-direction:column; gap:2px; }
.lp-carte-bulle-liens a{ color:var(--encre-claire); text-decoration:underline; text-underline-offset:2px; }
.lp-carte-bulle-liens a:hover{ color:var(--signal); }

.lp-carte-legende{ margin-top:14px; font-size:0.8125rem; color:var(--encre-douce); text-align:center; }

.lp-carte-dept-acc{ border-top:1px solid var(--filet); padding:14px 0; }
.lp-carte-dept-acc:first-child{ border-top:0; }
.lp-carte-dept-acc summary{ cursor:pointer; display:flex; align-items:center; gap:10px; font-family:var(--f-titre); font-weight:600; font-size:0.9375rem; list-style:none; }
.lp-carte-dept-acc summary::-webkit-details-marker{ display:none; }
.lp-carte-dept-num{ color:var(--signal-sombre); }
.lp-carte-villes-liste{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.lp-carte-villes-liste li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:0.875rem; padding:4px 0; }
.lp-carte-ville-liens{ display:flex; gap:10px; }
.lp-carte-ville-liens a{ color:var(--encre-douce); text-decoration:underline; text-underline-offset:2px; font-size:0.8125rem; }
.lp-carte-ville-liens a:hover{ color:var(--signal-sombre); }
.lp-carte-liste--renvoi{ text-align:center; padding:24px; border:2px solid var(--encre); background:var(--surface); }
.lp-carte-liste--renvoi p{ color:var(--encre-douce); margin-bottom:14px; }

.lp-carte-cta{ text-align:center; margin-top:32px; }

@media (max-width:900px){
  .lp-carte-layout{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .lp-carte-maps{ flex-direction:column; }
}