/* ============================================================================
   FEUILLE DE STYLE — v2 (mobile-first, aucune ressource externe)
   ----------------------------------------------------------------------------
   Direction : bleu nuit des soirs d'Ariège, lumière orange de l'action,
   carte des communes desservies comme élément signature.
   Titres : Poppins (hébergée sur le site, ~20 Ko) — texte : police système.
   Contrastes vérifiés WCAG 2.1 AA :
     encre/blanc 17,4:1 · gris/blanc 7,6:1 · bleu/blanc 5,2:1 · action/blanc 5,2:1
     blanc/nuit 15,1:1 · brume-texte/nuit 9,8:1
   ============================================================================ */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Couleurs */
  --nuit: #0E2240;
  --nuit-2: #16325A;
  --nuit-3: #22457A;
  --encre: #0F172A;
  --gris: #475569;
  --gris-clair: #94A3B8;
  --trait: #E2E8F0;
  --brume: #F4F7FB;
  --ciel: #E6EEFA;
  --blanc: #FFFFFF;
  --bleu: #2457C5;
  --action: #C2410C;
  --action-vif: #EA580C;
  --action-survol: #9A3412;
  --vert: #15803D;
  --texte-sur-nuit: #C9D6EA;
  --focus: #2457C5;
  --focus-sombre: #FCD34D;

  /* Paliers de la carte (du plus proche au plus loin) */
  --p1: #86EFAC;
  --p2: #FDE047;
  --p3: #FDBA74;
  --p4: #FB7185;
  --p0: #475A78;

  /* Typographie */
  --titre: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-s: .9375rem;
  --t-0: 1.0625rem;
  --t-1: 1.25rem;
  --t-2: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  --t-3: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
  --t-4: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);

  /* Formes */
  --r-s: 10px;
  --r: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --ombre-1: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .05);
  --ombre-2: 0 2px 4px rgba(15, 23, 42, .05), 0 12px 32px -8px rgba(15, 34, 64, .18);
  --ombre-3: 0 30px 60px -20px rgba(4, 12, 28, .6);

  --conteneur: 76rem;
  --marge: 1rem;
  --barre-mobile: 0px;
}
@media (min-width: 768px) { :root { --marge: 2rem; } }

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font: 400 var(--t-0)/1.65 var(--texte);
  color: var(--encre);
  background: var(--blanc);
  padding-bottom: var(--barre-mobile);
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4); letter-spacing: -.035em; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); font-weight: 500; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--bleu); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.conteneur { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding-inline: var(--marge); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1rem; background: var(--encre); color: var(--blanc); border-radius: var(--r-s);
}
.lien-evitement:focus { top: 1rem; }

/* ---- Boutons ------------------------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.35rem;
  font: 500 1rem/1.2 var(--titre); letter-spacing: -.005em;
  text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.bouton:hover { text-decoration: none; }
.bouton:active { transform: translateY(1px); }
.bouton svg { width: 1.15em; height: 1.15em; flex: none; }
.bouton--grand { min-height: 56px; padding: .9rem 1.7rem; font-size: 1.0625rem; }
.bouton--action { background: var(--action); color: var(--blanc); box-shadow: 0 6px 18px -6px rgba(194, 65, 12, .55); }
.bouton--action:hover { background: var(--action-survol); color: var(--blanc); }
.bouton--clair { background: rgba(255, 255, 255, .1); color: var(--blanc); border-color: rgba(255, 255, 255, .35); }
.bouton--clair:hover { background: rgba(255, 255, 255, .18); color: var(--blanc); }
.bouton--contour { border-color: var(--trait); color: var(--encre); background: var(--blanc); }
.bouton--contour:hover { border-color: var(--encre); color: var(--encre); }

/* ---- En-tête flottant --------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  padding-block: .6rem;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, .8);
}
.page-index .entete { background: rgba(14, 34, 64, .82); border-bottom-color: rgba(255, 255, 255, .08); }
.entete__barre { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-height: 3.25rem; }
.logo {
  display: inline-flex; align-items: center; gap: .6rem; flex: 1 1 0; min-width: 0;
  color: var(--encre); text-decoration: none;
  font: 700 1.0625rem/1.15 var(--titre); letter-spacing: -.02em;
}
.logo:hover { text-decoration: none; }
.logo__icone { width: 2.25rem; height: 2.25rem; flex: none; }
.logo__texte { overflow-wrap: anywhere; }
.page-index .logo { color: var(--blanc); }

.menu-bouton {
  display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem;
  font: 500 .95rem var(--titre); color: inherit;
  background: transparent; border: 1px solid currentColor; border-radius: 999px; cursor: pointer;
}
.page-index .menu-bouton { color: var(--blanc); }
.menu-bouton__barres, .menu-bouton__barres::before, .menu-bouton__barres::after {
  display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.menu-bouton__barres::before, .menu-bouton__barres::after { content: ""; position: absolute; left: 0; }
.menu-bouton__barres::before { top: -5px; }
.menu-bouton__barres::after { top: 5px; }

.nav ul { display: flex; flex-wrap: wrap; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: block; padding: .55rem .9rem; border-radius: 999px;
  color: var(--encre); font: 500 .975rem var(--titre); text-decoration: none;
  transition: background-color .15s;
}
.nav a:hover { background: var(--brume); }
.nav a[aria-current="page"] { background: var(--ciel); color: var(--nuit); }
.page-index .nav a { color: var(--blanc); }
.page-index .nav a:hover { background: rgba(255, 255, 255, .1); }
.page-index .nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: var(--blanc); }
.page-index .entete :focus-visible { outline-color: var(--focus-sombre); }

.entete__tel { padding: .55rem 1.1rem; min-height: 44px; font-size: .95rem; }

@media (max-width: 959px) {
  .entete__tel { order: 3; }
  .nav { order: 4; flex-basis: 100%; }
  @media (scripting: enabled) {
    .menu-bouton { display: inline-flex; order: 2; }
    .nav { display: none; }
    .nav.est-ouvert { display: block; padding-block: .5rem .75rem; }
  }
  .nav ul { flex-direction: column; }
  .nav a { padding: .85rem 1rem; border-radius: var(--r-s); }
}
@media (max-width: 519px) {
  .entete__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .entete__tel { width: 44px; padding: 0; }
  .logo { font-size: .975rem; }
}
@media (min-width: 960px) { .nav { margin-left: auto; } .logo { flex: 0 1 auto; } }

/* ---- Barre d'action fixe sur mobile ------------------------------------- */
.barre-mobile { display: none; }
@media (max-width: 767px) {
  :root { --barre-mobile: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  .barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    padding: .6rem var(--marge) calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--trait);
    box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, .25);
  }
  .barre-mobile .bouton { min-height: 50px; padding-inline: .75rem; }
}

/* ---- Hero --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--blanc);
  background:
    radial-gradient(60rem 30rem at 85% 10%, rgba(36, 87, 197, .45), transparent 60%),
    var(--nuit);
  padding-block: 2.5rem 4rem;
  margin-top: -4.5rem;      /* passe sous l'en-tête translucide */
  padding-top: 7rem;
}
.hero::before { /* trame topographique discrète */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.hero :focus-visible { outline-color: var(--focus-sombre); }
.hero .calc-dep :focus-visible { outline-color: var(--focus); }
.hero__grille { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
  .hero { padding-block: 9rem 6rem; }
  .hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; }
}
.hero__lieu {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .85rem .35rem .45rem; margin-bottom: 1.4rem;
  font: 500 .9rem var(--titre); color: var(--texte-sur-nuit);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
}
.hero__lieu::before {
  content: ""; width: .6rem; height: .6rem; margin-left: .3rem; border-radius: 50%;
  background: var(--p1); box-shadow: 0 0 0 4px rgba(134, 239, 172, .18);
}
.hero h1 { max-width: 13ch; margin-bottom: .45em; }
.hero__chapo { font-size: var(--t-1); line-height: 1.55; color: var(--texte-sur-nuit); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero__preuves {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none;
  font-size: var(--t-s); color: var(--texte-sur-nuit);
}
.hero__preuves li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__preuves svg { width: 1.1rem; height: 1.1rem; color: var(--p1); flex: none; }

/* Panneau carte + calculateur */
.panneau-zone {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-xl);
  padding: 1rem;
  box-shadow: var(--ombre-3);
}
@media (min-width: 640px) { .panneau-zone { padding: 1.25rem; } }
.panneau-zone .calc-dep { border-radius: var(--r-l); box-shadow: var(--ombre-2); }
.panneau-zone .carte-zone { margin-top: 1rem; }

/* ---- Section « zone » (accueil) ----------------------------------------- */
.hero { padding-bottom: 3rem; }
@media (min-width: 1024px) { .hero { padding-bottom: 5rem; } }
.zone { padding-top: 1rem; background: linear-gradient(var(--nuit), #0B1B33); }
.zone__grille { display: grid; gap: 2rem; align-items: center; }
.zone__grille > * { min-width: 0; }
@media (min-width: 1024px) { .zone__grille { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 4rem; } }
.zone__texte p { color: var(--texte-sur-nuit); font-size: var(--t-1); line-height: 1.55; max-width: 34ch; }
.zone .carte-zone__cadre { border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--ombre-3); }

/* ---- Carte des communes (SVG généré) ------------------------------------ */
.carte-zone { margin: 0; color: var(--texte-sur-nuit); }
.carte-zone__cadre {
  position: relative; border-radius: var(--r-l); overflow: hidden;
  background: radial-gradient(circle at 50% 50%, var(--nuit-2), var(--nuit) 70%);
}
.carte-zone__cadre { aspect-ratio: 1040 / 930; }
.carte-zone svg { display: block; width: 100%; height: 100%; }
.carte-zone__attente { display: grid; place-items: center; height: 100%; margin: 0; color: var(--texte-sur-nuit); font-size: var(--t-s); }
.carte-zone .point { cursor: pointer; transition: r .15s; }
.carte-zone .point:hover { stroke: var(--blanc); stroke-width: 3; }
.carte-zone .point.est-choisi { stroke: var(--blanc); stroke-width: 4; }
.carte-zone .pulsation { fill: none; stroke: var(--blanc); stroke-width: 3; opacity: 0; }
.carte-zone .pulsation.est-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .carte-zone .pulsation.est-active { animation: pulsation 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  .carte-zone .apparition { animation: apparition .5s ease-out both; }
}
@keyframes pulsation { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes apparition { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.carte-zone .apparition { transform-box: fill-box; transform-origin: center; }
.carte-zone .etiquette { font: 500 26px var(--titre); fill: var(--blanc); paint-order: stroke; stroke: var(--nuit); stroke-width: 7px; stroke-linejoin: round; pointer-events: none; }
.carte-zone .etiquette--centre { font-size: 28px; font-weight: 700; }
.carte-zone .echelle { stroke: var(--texte-sur-nuit); stroke-width: 3; }
.carte-zone .echelle-texte { font: 500 20px var(--texte); fill: var(--texte-sur-nuit); }
.carte-zone__infobulle {
  position: absolute; z-index: 2; pointer-events: none;
  padding: .45rem .7rem; border-radius: var(--r-s);
  font-size: .875rem; line-height: 1.3; color: var(--encre); background: var(--blanc);
  box-shadow: var(--ombre-2); transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap;
}
.carte-zone__infobulle strong { display: block; font-family: var(--titre); font-weight: 500; }
.carte-zone__legende {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .8rem .25rem 0; padding: 0; list-style: none;
  font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.carte-zone__legende li { display: inline-flex; align-items: center; gap: .4rem; }
.carte-zone__legende i { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.carte-zone__note { margin: .5rem .25rem 0; font-size: .8125rem; color: var(--gris-clair); }
.carte-zone--claire .carte-zone__legende, .carte-zone--claire .carte-zone__note { color: var(--gris); }

/* ---- Sections ----------------------------------------------------------- */
.section { padding-block: 4rem; }
@media (min-width: 768px) { .section { padding-block: 6rem; } }
.section--brume { background: var(--brume); }
.section--nuit { background: var(--nuit); color: var(--blanc); }
.section--nuit :focus-visible { outline-color: var(--focus-sombre); }
.section__tete { max-width: 44rem; margin-bottom: 2.5rem; }
.section__tete p { color: var(--gris); font-size: var(--t-1); line-height: 1.55; margin: 0; }
.section--nuit .section__tete p { color: var(--texte-sur-nuit); }
.titre-section { margin-bottom: .5rem; }

.entete-page {
  position: relative; overflow: hidden;
  padding-block: 3.5rem 3rem;
  background:
    radial-gradient(40rem 18rem at 100% 0%, rgba(36, 87, 197, .12), transparent 70%),
    var(--brume);
}
.entete-page h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); margin-bottom: .4rem; }
.entete-page__chapo { font-size: var(--t-1); line-height: 1.55; color: var(--gris); max-width: 48ch; margin: 0; }
.entete-page--404 { padding-block: 6rem; }

.deux-colonnes { display: grid; gap: 2.5rem; }
.deux-colonnes > * { min-width: 0; }
@media (min-width: 960px) {
  .deux-colonnes { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .deux-colonnes--contact { grid-template-columns: 1.55fr 1fr; }
  .deux-colonnes--profil { grid-template-columns: 1.4fr 1fr; }
  .deux-colonnes--calc { grid-template-columns: 1fr 1.1fr; align-items: stretch; }
}
.texte-courant { max-width: 66ch; }
.note { font-size: var(--t-s); color: var(--gris); }

/* ---- Bandeau de confiance ----------------------------------------------- */
.confiance { padding-block: 2rem; border-bottom: 1px solid var(--trait); }
.confiance ul { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .confiance ul { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.confiance li { display: flex; align-items: center; gap: .9rem; }
.confiance strong { display: block; font: 500 1.05rem/1.3 var(--titre); }
.confiance span { color: var(--gris); font-size: var(--t-s); }
.pastille {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 14px; background: var(--ciel); color: var(--nuit-3);
}
.pastille svg { width: 1.4rem; height: 1.4rem; }

/* ---- Cartes de services ------------------------------------------------- */
.grille-services { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .grille-services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .grille-services { grid-template-columns: repeat(4, 1fr); } }
.carte-service {
  position: relative; display: flex; flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-l);
  box-shadow: var(--ombre-1);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.carte-service:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); border-color: #CBD5E1; }
.carte-service:focus-within { box-shadow: var(--ombre-2); }
.carte-service h3 { margin: 1.25rem 0 .4rem; }
.carte-service h3 a { color: var(--encre); text-decoration: none; }
.carte-service h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* toute la carte cliquable */
.carte-service p { color: var(--gris); margin: 0 0 1.25rem; flex: 1; }
.carte-service__lien { font: 500 .95rem var(--titre); color: var(--bleu); display: inline-flex; align-items: center; gap: .35rem; }
.carte-service__lien svg { width: 1rem; height: 1rem; transition: transform .2s; }
.carte-service:hover .carte-service__lien svg { transform: translateX(3px); }
.icone-service {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 16px;
  background: var(--nuit); color: var(--blanc);
}
.icone-service svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carte-service--deplacement .icone-service, .icone-service--action { background: var(--action); }

/* ---- Étapes (vraie séquence) -------------------------------------------- */
.etapes { counter-reset: etape; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.etapes li {
  counter-increment: etape; position: relative;
  padding: 1.5rem; background: var(--blanc); border-radius: var(--r-l); border: 1px solid var(--trait);
}
.etapes li::before {
  content: counter(etape); display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: 50%;
  font: 700 1.05rem var(--titre); color: var(--blanc); background: var(--nuit);
}
.etapes strong { display: block; font: 500 1.1rem/1.3 var(--titre); margin-bottom: .3rem; }
.etapes span { color: var(--gris); }

/* ---- Engagements / listes ----------------------------------------------- */
.liste-coches { display: grid; gap: .75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.liste-coches li { position: relative; padding-left: 2.1rem; }
.liste-coches li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: #DCFCE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / .85rem no-repeat;
}
.section--nuit .liste-coches li::before { background-color: rgba(134, 239, 172, .2); }
.liste-simple { padding-left: 1.2rem; }
.liste-simple li { margin-bottom: .5rem; }

.encart {
  padding: 1.75rem; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r-l); box-shadow: var(--ombre-1);
}
.encart--nuit { background: var(--nuit); color: var(--blanc); border-color: transparent; }
.encart__tel { font: 700 var(--t-2) var(--titre); letter-spacing: -.02em; margin-bottom: .5rem; }
.encart__tel a { color: var(--encre); text-decoration: none; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: .75rem; max-width: 52rem; }
.faq details { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); }
.faq details[open] { box-shadow: var(--ombre-1); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 1.35rem; cursor: pointer; list-style: none;
  font: 500 1.0625rem/1.35 var(--titre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--brume) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / .9rem no-repeat;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: var(--r); }
.faq details > div { padding: 0 1.35rem 1.25rem; color: var(--gris); }
.faq details > div p:last-child { margin: 0; }

/* ---- Bandeau d'appel ---------------------------------------------------- */
.bandeau-appel { padding-block: 0 5rem; }
.bandeau-appel__carte {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 1.5rem; align-items: center;
  padding: 2.5rem 1.75rem; border-radius: var(--r-xl); color: var(--blanc);
  background:
    radial-gradient(30rem 16rem at 100% 0%, rgba(234, 88, 12, .35), transparent 70%),
    linear-gradient(135deg, var(--nuit-2), var(--nuit));
}
@media (min-width: 900px) { .bandeau-appel__carte { grid-template-columns: 1.4fr auto; padding: 3.5rem; } }
.bandeau-appel__carte h2 { margin-bottom: .3em; }
.bandeau-appel__carte p { color: var(--texte-sur-nuit); font-size: var(--t-1); margin: 0; }
.bandeau-appel__carte :focus-visible { outline-color: var(--focus-sombre); }
.bandeau-appel__carte .hero__actions { margin-top: 0; }

/* ---- Page Services ------------------------------------------------------ */
.sommaire { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.sommaire a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border: 1px solid var(--trait); border-radius: 999px;
  background: var(--blanc); color: var(--encre); font: 500 .95rem var(--titre); text-decoration: none;
  transition: border-color .15s;
}
.sommaire a:hover { border-color: var(--encre); }
.service__grille { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 960px) { .service__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 5rem; } }
.service__titre { display: flex; flex-direction: column; gap: 1rem; }
.service__titre h2 { margin: 0; }
.service__corps { max-width: 62ch; }
.service__corps > p:first-child { font-size: var(--t-1); line-height: 1.6; }
.lien-fleche { font: 500 1rem var(--titre); }

.paliers { margin: 1.5rem 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.paliers li {
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1.1rem; border-radius: var(--r-s);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
}
.paliers li::before { /* la barre suit la distance */
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--l); z-index: 0;
  background: linear-gradient(90deg, var(--c), transparent); opacity: .22;
}
.paliers li > * { position: relative; }
.paliers li span { display: inline-flex; align-items: center; gap: .6rem; }
.paliers li span::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); }
.paliers li:nth-child(1) { --l: 20%; --c: var(--p1); }
.paliers li:nth-child(2) { --l: 50%; --c: var(--p2); }
.paliers li:nth-child(3) { --l: 80%; --c: var(--p3); }
.paliers li:nth-child(4) { --l: 100%; --c: var(--p4); }
.paliers strong { font: 700 var(--t-1) var(--titre); font-variant-numeric: tabular-nums; }

/* ---- Tarifs ------------------------------------------------------------- */
.grille-tarifs { display: grid; gap: 1.25rem; }
@media (min-width: 960px) { .grille-tarifs { grid-template-columns: repeat(3, 1fr); } }
.grille-tarifs__groupe {
  padding: 1.75rem 1.5rem; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r-l); box-shadow: var(--ombre-1);
}
.grille-tarifs__groupe h3 { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; font-weight: 700; }
.grille-tarifs__groupe h3::before { content: ""; width: .6rem; height: 1.6rem; border-radius: 4px; background: var(--action); }
.table-tarifs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-tarifs caption { text-align: left; font: 700 var(--t-1) var(--titre); padding-bottom: .75rem; }
.table-tarifs th, .table-tarifs td { padding: .8rem 0; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--trait); }
.table-tarifs tr:last-child th, .table-tarifs tr:last-child td { border-bottom: 0; }
.table-tarifs thead { display: none; }
.table-tarifs tbody th { font-weight: 400; padding-right: 1rem; }
.table-tarifs td { text-align: right; font: 700 1.05rem var(--titre); white-space: nowrap; }
.table-tarifs--paliers { background: var(--blanc); border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--trait); }
.table-tarifs--paliers thead { display: table-header-group; }
.table-tarifs--paliers thead th { font: 500 .85rem var(--titre); color: var(--gris); background: var(--brume); padding: .8rem 1.25rem; border-bottom: 1px solid var(--trait); }
.table-tarifs--paliers thead th:last-child { text-align: right; }
.table-tarifs--paliers tbody th, .table-tarifs--paliers td { padding: .85rem 1.25rem; border-bottom-style: solid; }
.table-tarifs--paliers caption { padding-left: .25rem; }
.carte-calc { display: grid; gap: 1rem; padding: 1rem; border-radius: var(--r-xl); background: var(--nuit); box-shadow: var(--ombre-2); }
.carte-calc .calc-dep { border-radius: var(--r-l); }

/* ---- Formulaire --------------------------------------------------------- */
.carte-formulaire { padding: 1.75rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-l); box-shadow: var(--ombre-1); }
@media (min-width: 640px) { .carte-formulaire { padding: 2.25rem; } }
.formulaire { display: grid; gap: 1.15rem; }
.formulaire__legende, .champ__aide, .formulaire__rgpd { font-size: var(--t-s); color: var(--gris); margin: 0; }
.champ { display: grid; gap: .4rem; }
.champ-ligne { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .champ-ligne { grid-template-columns: 1fr 1fr; } }
.champ label { font: 500 .975rem var(--titre); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: .75rem 1rem;
  font: inherit; font-size: 1rem; color: var(--encre); background: var(--brume);
  border: 1.5px solid #8B99AE; border-radius: var(--r-s);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--gris); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; background: var(--blanc); border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(36, 87, 197, .18);
}
.champ textarea { resize: vertical; min-height: 9rem; }
.champ [aria-invalid="true"] { border-color: #B91C1C; background: #FEF2F2; }
.champ__erreur { margin: 0; color: #B91C1C; font-weight: 600; font-size: var(--t-s); }
.piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alerte { padding: 1rem 1.25rem; border-radius: var(--r); margin-bottom: 1.25rem; border: 1px solid; }
.alerte p:last-child, .alerte ul:last-child { margin-bottom: 0; }
.alerte--succes { background: #F0FDF4; border-color: #86EFAC; }
.alerte--erreur { background: #FEF2F2; border-color: #FCA5A5; }
.alerte--info { background: var(--ciel); border-color: #A9C2EC; }

/* ---- Pages légales ------------------------------------------------------ */
.texte-legal h2 { font-size: var(--t-2); margin-top: 2.25rem; }
.texte-legal h2:first-child { margin-top: 0; }

/* ---- Pied de page ------------------------------------------------------- */
.pied { background: var(--nuit); color: var(--texte-sur-nuit); padding-block: 4rem 1.5rem; font-size: var(--t-s); }
.pied a { color: var(--blanc); }
.pied :focus-visible { outline-color: var(--focus-sombre); }
.pied__grille { display: grid; gap: 2rem; }
@media (min-width: 768px) { .pied__grille { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }
.pied__nom { display: flex; align-items: center; gap: .6rem; color: var(--blanc); font: 700 1.15rem var(--titre); letter-spacing: -.02em; }
.pied__titre { color: var(--blanc); font: 500 1rem var(--titre); margin-bottom: .6rem; }
.pied__google { display: flex; flex-wrap: wrap; gap: 1rem; }
.pied__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1);
}
.pied__legal p { margin: 0; }
.pied__legal ul { display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

/* ============================================================================
   CALCULATEUR DE DÉPLACEMENT
   ============================================================================ */
.calc-dep { padding: 1.5rem; color: var(--encre); background: var(--blanc); border-radius: var(--r-l); }
@media (min-width: 640px) { .calc-dep { padding: 1.75rem; } }
.calc-dep__titre { font-size: var(--t-2); margin-bottom: .25rem; }
.calc-dep__intro { color: var(--gris); margin-bottom: 1.1rem; }
.calc-dep__label { display: block; margin-bottom: .4rem; font: 500 .95rem var(--titre); }
.calc-dep__ligne { display: flex; gap: .5rem; flex-wrap: wrap; }
.calc-dep__zone { position: relative; flex: 1 1 13rem; }
.calc-dep__zone::before { /* loupe */
  content: ""; position: absolute; left: 1rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.calc-dep__champ {
  width: 100%; min-height: 56px; padding: .75rem 1rem .75rem 2.75rem;
  font: inherit; font-size: 1.0625rem; color: var(--encre); background: var(--brume);
  border: 1.5px solid #8B99AE; border-radius: 999px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.calc-dep__champ:focus { outline: none; background: var(--blanc); border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(36, 87, 197, .2); }
.calc-dep__champ:disabled { cursor: progress; opacity: .7; }
.calc-dep__bouton {
  min-height: 56px; padding: .75rem 1.5rem; font: 500 1rem var(--titre);
  color: var(--blanc); background: var(--action); border: 0; border-radius: 999px; cursor: pointer;
  transition: background-color .15s;
}
.calc-dep__bouton:hover { background: var(--action-survol); }
.calc-dep__bouton:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.calc-dep__liste {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 18rem; overflow-y: auto; margin: 0; padding: .35rem; list-style: none;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r);
  box-shadow: var(--ombre-2);
}
.calc-dep__option { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .85rem; border-radius: var(--r-s); cursor: pointer; }
.calc-dep__option:hover, .calc-dep__option[aria-selected="true"] { background: var(--ciel); }
.calc-dep__option[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--bleu); }
.calc-dep__option-nom { font-weight: 500; }
.calc-dep__option-cp { color: var(--gris); font-size: .9rem; font-variant-numeric: tabular-nums; }
.calc-dep__aide { margin: .5rem 0 0; font-size: .875rem; color: var(--gris); min-height: 1.3em; }
.calc-dep__resultat:not(:empty) { margin-top: .75rem; }
.calc-dep__carte {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center;
  padding: 1rem 1.25rem; border-radius: var(--r); background: #F0FDF4; border: 1px solid #BBF7D0;
}
@media (prefers-reduced-motion: no-preference) { .calc-dep__carte { animation: resultat .3s ease-out; } }
@keyframes resultat { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.calc-dep__carte--hors { background: #FFF7ED; border-color: #FED7AA; grid-template-columns: 1fr; }
.calc-dep__carte p { margin: 0; }
.calc-dep__commune { font: 500 1.05rem var(--titre); }
.calc-dep__prix { grid-row: span 2; font: 700 2.5rem/1 var(--titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--vert); }
.calc-dep__carte--hors .calc-dep__prix { grid-row: auto; font-size: 1.6rem; color: var(--action); }
.calc-dep__detail { font-size: .9rem; color: var(--gris); }
.calc-dep__carte--hors .calc-dep__detail { color: var(--encre); }
.calc-dep__detail a { color: var(--bleu); font-weight: 600; }


/* ============================================================================
   DISPONIBILITÉS EN DIRECT
   ============================================================================ */
/* Couleur du point selon le statut (texte toujours présent : pas d'info par la couleur seule) */
.statut--disponible { --pt: #22C55E; --halo: rgba(34, 197, 94, .25); }
.statut--intervention { --pt: #F59E0B; --halo: rgba(245, 158, 11, .25); }
.statut--absent { --pt: #94A3B8; --halo: rgba(148, 163, 184, .25); }
.statut--ferme { --pt: #EF4444; --halo: rgba(239, 68, 68, .25); }
.hero__lieu[class*="statut--"]::before { background: var(--pt); box-shadow: 0 0 0 4px var(--halo); }
@media (prefers-reduced-motion: no-preference) {
  .hero__lieu.statut--disponible::before { animation: halo 2s ease-in-out infinite; }
}
@keyframes halo { 50% { box-shadow: 0 0 0 7px transparent; } }

.pastille-statut {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
  padding: .35rem .85rem; border-radius: 999px; background: var(--brume);
  font: 500 .95rem var(--titre);
}
.pastille-statut::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--pt, var(--gris-clair)); }

.dispo__grille { display: grid; gap: 2rem; align-items: start; }
.dispo__grille > * { min-width: 0; }
@media (min-width: 960px) { .dispo__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; } }
.dispo__etat { display: flex; align-items: center; gap: .65rem; margin: .5rem 0 .4rem; font: 700 var(--t-2) var(--titre); letter-spacing: -.02em; }
.dispo__etat::before { content: ""; flex: none; width: .9rem; height: .9rem; border-radius: 50%; background: var(--pt, var(--gris-clair)); box-shadow: 0 0 0 5px var(--halo, transparent); }
.dispo__detail { font-size: var(--t-1); line-height: 1.5; color: var(--gris); margin-bottom: .4rem; }
.dispo__retour { font: 500 1rem var(--titre); color: var(--encre); }
.dispo__cadre { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-l); padding: .5rem 1rem 1rem; box-shadow: var(--ombre-1); }
.dispo__tableau { width: 100%; border-collapse: collapse; }
.dispo__tableau th, .dispo__tableau td { padding: .55rem .4rem; text-align: left; border-bottom: 1px solid var(--trait); }
.dispo__tableau tbody tr:last-child th, .dispo__tableau tbody tr:last-child td { border-bottom: 0; }
.dispo__tableau thead th { font: 500 .85rem var(--titre); color: var(--gris); }
.dispo__tableau tbody th { font: 500 .975rem var(--titre); white-space: nowrap; }
.creneau {
  display: inline-flex; align-items: center; gap: .4rem; min-width: 5.5rem; padding: .3rem .7rem;
  border-radius: 999px; font: 500 .875rem var(--titre);
}
.creneau::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.creneau--libre { background: #DCFCE7; color: #166534; }
.creneau--pris { background: #FEF3C7; color: #92400E; }
.creneau--ferme { background: #F1F5F9; color: #475569; }
.creneau--passe { background: transparent; color: #64748B; text-decoration: line-through; }
.dispo__cadre .note { margin: .75rem 0 0; }


/* ============================================================================
   BANDEAU D'ANNONCE, AVIS CLIENTS, FORMULAIRE D'AVIS
   ============================================================================ */
.annonce { position: relative; z-index: 51; padding-block: .7rem; font: 500 .975rem/1.4 var(--titre); }
.annonce__texte { margin: 0 auto; }
.annonce__lien { font-weight: 700; color: inherit; }
.annonce--info { background: var(--ciel); color: var(--nuit); }
.annonce--promo { background: #FFEDD5; color: #7C2D12; }
.annonce--alerte { background: #FEE2E2; color: #7F1D1D; }

.statut--conges { --pt: #818CF8; --halo: rgba(129, 140, 248, .25); }
.creneau--conges { background: #E0E7FF; color: #3730A3; }
.dispo__conges { margin-top: .75rem; padding: .6rem .9rem; border-radius: var(--r-s); background: #EEF2FF; color: #3730A3; font: 500 .95rem var(--titre); }

.avis-clients__tete { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 2rem; }
@media (min-width: 768px) { .avis-clients__tete { grid-template-columns: 1fr auto; } .avis-clients__tete .section__tete { margin-bottom: 0; } }
.note-globale { display: grid; justify-items: start; gap: .2rem; padding: 1.25rem 1.5rem; border-radius: var(--r-l); background: var(--nuit); color: var(--blanc); }
.note-globale__val { margin: 0; font: 700 2.75rem/1 var(--titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.note-globale__val span { font-size: 1.1rem; font-weight: 500; color: var(--texte-sur-nuit); }
.note-globale__nb { margin: 0; font-size: var(--t-s); color: var(--texte-sur-nuit); }
.etoiles { color: #F59E0B; letter-spacing: .08em; font-size: 1.15rem; line-height: 1; }
.etoiles__vides { color: #CBD5E1; }
.etoiles--grandes { font-size: 1.6rem; }
.liste-avis { display: grid; gap: 1.25rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
@media (min-width: 768px) { .liste-avis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .liste-avis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte-avis { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-l); box-shadow: var(--ombre-1); }
.carte-avis blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.carte-avis blockquote p { margin: 0; }
.carte-avis__auteur { margin: auto 0 0; }
.carte-avis__date { margin: 0; font-size: .85rem; color: var(--gris); }
.carte-avis__reponse { padding: .75rem 1rem; border-radius: var(--r-s); background: var(--brume); font-size: .95rem; }
.carte-avis__reponse p { margin: 0; }
.carte-avis__qui { font: 500 .85rem var(--titre); color: var(--gris); margin-bottom: .2rem !important; }

.conteneur--etroit { max-width: 46rem; }
.notation { border: 0; margin: 0; padding: 0; }
.notation legend { font: 500 .975rem var(--titre); margin-bottom: .4rem; padding: 0; }
.notation__etoiles { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.notation__etoiles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.notation__etoiles label { cursor: pointer; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--r-s); }
.notation__etoiles label::before { content: "★"; font-size: 2.4rem; line-height: 1; color: #CBD5E1; transition: color .1s, transform .1s; }
/* Étoile choisie + toutes celles avant elle (ordre inversé en CSS) */
.notation__etoiles input:checked ~ label::before,
.notation__etoiles label:hover::before, .notation__etoiles label:hover ~ label::before { color: #F59E0B; }
.notation__etoiles input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.case-accord { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-s); cursor: pointer; }
.case-accord input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: var(--nuit); }

/* Ajustements téléphone (placés après les règles de base) */
@media (max-width: 639px) {
  .panneau-zone { padding: .5rem; border-radius: var(--r-l); }
  .calc-dep__carte { grid-template-columns: 1fr; }
  .calc-dep__prix { grid-row: auto; order: -1; font-size: 2.25rem; }
}
.calc-dep__prix { white-space: nowrap; }
.calc-dep__resultat { scroll-margin-top: 7rem; scroll-margin-bottom: 6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .entete, .pied, .barre-mobile, .calc-dep, .carte-zone, .bandeau-appel { display: none !important; }
  .hero { background: none; color: #000; margin: 0; padding: 0; }
  body { color: #000; padding: 0; }
}
.titre-espace { margin-top: 2.5rem; }
.pied { border-top: 1px solid rgba(255, 255, 255, .08); }