/* Sonarys : charte Encre, Signal, Brume, Ardoise ; grotesque sobre (Archivo, sinon la police système).
   Mise en page : cadre de 72rem, sections en bandes pleine largeur, textes longs limités à 44rem. */

/* Police Archivo (licence libre OFL) : déposer le fichier dans src/assets/fonts/ puis ajouter
   url("/assets/fonts/Archivo.woff2") format("woff2") après local(). Sans lui, la police système prend le relais. */
@font-face {
  font-family: "Archivo";
  src: local("Archivo");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --encre: #16293F;
  --signal: #2B7A8A;
  --signal-fonce: #22626F;
  --brume: #EDF1F4;
  --ardoise: #5A6B78;
  --blanc: #FFFFFF;
  --filet: #D3DCE2;
  --signal-pale: #E2EFF1;
  --alerte: #A3341F;
  --surligne: #FFF0BF;
  --police: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cadre: 72rem;
  --texte: 44rem;
  --rayon: 6px;
  --section: clamp(3rem, 7vw, 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; }
a { color: var(--signal); text-underline-offset: 0.18em; }
a:hover { color: var(--signal-fonce); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--police); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 750; font-stretch: 104%; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 720; font-stretch: 104%; }
h3 { font-size: 1.2rem; font-weight: 680; line-height: 1.3; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }
li::marker { color: var(--signal); }
strong { font-weight: 650; }

.cadre {
  width: 100%;
  max-width: calc(var(--cadre) + 2 * max(20px, env(safe-area-inset-left, 0px)));
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 1rem; top: -4rem; background: var(--encre); color: var(--blanc); padding: 0.6rem 1rem; z-index: 100; border-radius: var(--rayon); }
.evitement:focus { top: 1rem; }
.surtitre { display: block; margin: 0 0 0.8rem; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.chapeau { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--ardoise); max-width: 40rem; }
.petit { font-size: 0.9rem; color: var(--ardoise); }
.h3-like { font-size: 1.2rem; font-weight: 680; margin-top: 1.5rem; }
.a-completer { background: var(--surligne); color: var(--encre); padding: 0 0.25em; border-radius: 3px; font-style: normal; }

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.7em 1.3em;
  background: var(--signal); color: var(--blanc);
  border: 2px solid var(--signal); border-radius: var(--rayon);
  font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.bouton:hover { background: var(--signal-fonce); border-color: var(--signal-fonce); color: var(--blanc); }
.bouton-contour { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton-contour:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.bouton-clair { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.bouton-clair:hover { background: var(--brume); border-color: var(--brume); color: var(--encre); }
.bouton-petit { min-height: 2.5rem; padding: 0.45em 1em; font-size: 0.95rem; }
.bouton[disabled] { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

/* ---------- en-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--blanc); border-bottom: 1px solid var(--filet); }
.entete-in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--encre); text-decoration: none; font-weight: 750; font-size: 1.35rem; letter-spacing: -0.01em; }
.logo:hover { color: var(--encre); }
.logo .onde { width: 2.1rem; height: 1.3rem; flex: none; }
.onde path { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.logo-clair, .logo-clair:hover { color: var(--blanc); }
.logo-clair .onde path { stroke: #7FC0CC; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav ul a { color: var(--encre); text-decoration: none; font-weight: 550; font-size: 0.98rem; padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.nav ul a:hover, .nav ul a[aria-current="page"] { border-bottom-color: var(--signal); color: var(--encre); }
.menu-bouton { display: none; margin-left: auto; background: none; border: 1.5px solid var(--encre); border-radius: var(--rayon); padding: 0.45rem 0.9rem; font: inherit; font-weight: 600; color: var(--encre); cursor: pointer; }
.entete-simple .entete-in { justify-content: space-between; }
.entete-tel { font-weight: 650; color: var(--encre); text-decoration: none; }

@media (max-width: 1140px) {
  .js .menu-bouton { display: inline-block; }
  .js .nav { display: none; }
  .js .nav.ouvert {
    display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanc); border-bottom: 1px solid var(--filet);
    padding: 1rem max(20px, env(safe-area-inset-right, 0px)) 1.5rem max(20px, env(safe-area-inset-left, 0px));
  }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--filet); }
  .nav ul a[aria-current="page"] { color: var(--signal); }
  .entete-in { position: relative; flex-wrap: wrap; }
  .nav:not(.ouvert) { flex-wrap: wrap; }
}

/* ---------- fil d'Ariane ---------- */
.fil ol { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; padding: 0; margin: 1rem auto 0; font-size: 0.875rem; color: var(--ardoise); }
.fil li { margin: 0; }
.fil li + li::before { content: "›"; margin-right: 0.3rem; color: var(--ardoise); }
.fil a { color: var(--ardoise); }

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section-brume { background: var(--brume); }
.section-encre { background: var(--encre); color: var(--blanc); }
.section-encre .chapeau, .section-encre .petit { color: #C9D4DC; }
.section-encre .surtitre { color: #7FC0CC; }
.section-encre a:not(.bouton) { color: var(--blanc); }
.entete-section { max-width: var(--texte); margin-bottom: 2.25rem; }
.prose { max-width: var(--texte); }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose > :first-child { margin-top: 0; }

/* ---------- accueil : ouverture ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { max-width: 15ch; }
.onde-ligne { display: block; width: 100%; height: 48px; margin-top: clamp(2rem, 5vw, 3rem); }
.onde-ligne path { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; }

/* accueil : photo de fond selon la saison (data-saison posé par precoce.js ; sans JavaScript, l'intérieur).
   Seule l'image de la saison est téléchargée. Voile Encre côté texte pour que le titre reste lisible. */
.hero-photo {
  --fond: url("/assets/img/fond-interieur.jpg");
  --cadrage: 72% center;
  position: relative; isolation: isolate; display: grid; align-items: center;
  min-height: clamp(540px, 76vh, 780px); padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--encre) var(--fond) var(--cadrage) / cover no-repeat;
  color: var(--blanc);
}
[data-saison="exterieur"] .hero-photo { --fond: url("/assets/img/fond-exterieur.jpg"); --cadrage: 60% center; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(22, 41, 63, 0.94) 0%, rgba(22, 41, 63, 0.84) 32%, rgba(22, 41, 63, 0.4) 60%, rgba(22, 41, 63, 0.06) 85%);
}
.hero-texte { max-width: 36rem; }
.hero-photo h1 { color: var(--blanc); max-width: 15ch; }
.hero-photo .chapeau { color: #DCE4EA; }
.hero-photo .surtitre { color: #8FD0DB; }
.bouton-contour-clair { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, 0.85); }
.bouton-contour-clair:hover { background: var(--blanc); border-color: var(--blanc); color: var(--encre); }
.grille-2 .rapport { margin: 1.5rem 0 1.25rem; max-width: 30rem; }

/* extrait de rapport de mesure */
.rapport { background: var(--blanc); border: 1px solid var(--filet); border-radius: 10px; box-shadow: 0 18px 40px -24px rgba(22, 41, 63, 0.45); padding: 1.4rem 1.5rem 1.2rem; }
.rapport-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.rapport-tete strong { font-size: 1rem; }
.etiquette { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ardoise); background: var(--brume); border-radius: 999px; padding: 0.2em 0.7em; }
.rapport table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.rapport th { text-align: left; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ardoise); padding: 0 0 0.5rem; border-bottom: 1px solid var(--filet); }
.rapport td { padding: 0.65rem 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.rapport td.n, .rapport th.n { text-align: right; white-space: nowrap; padding-left: 0.8rem; }
.rapport td span { display: block; font-size: 0.8rem; color: var(--ardoise); }
.rapport .ok { color: var(--signal); font-weight: 650; }
.rapport-pied { margin: 0.8rem 0 0; font-size: 0.78rem; color: var(--ardoise); }

/* bandeau de preuves */
.preuves { background: var(--brume); padding-block: 1.4rem; }
.preuves ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; list-style: none; margin: 0; padding: 0; }
.preuves li { margin: 0; padding-left: 1rem; border-left: 2px solid var(--signal); font-weight: 600; font-size: 0.95rem; line-height: 1.4; }

/* ---------- grilles de contenu ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.point { border-top: 2px solid var(--signal); padding-top: 1rem; }
.point h3 { margin-bottom: 0.4em; }
.point p { margin: 0; color: var(--ardoise); }
.section-encre .point { border-top-color: #7FC0CC; }
.section-encre .point p { color: #C9D4DC; }

.liste-coche { list-style: none; padding: 0; }
.liste-coche li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; }
.liste-coche li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.9rem; height: 0.45rem; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }

/* étapes numérotées */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; counter-reset: etape; }
.etapes-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.etapes li { counter-increment: etape; margin: 0; padding-top: 0.6rem; border-top: 1px solid var(--filet); }
.etapes li::before { content: counter(etape); display: block; font-size: 2.4rem; font-weight: 750; line-height: 1; color: var(--signal); margin-bottom: 0.6rem; }
.etapes-zero li::before { content: counter(etape, decimal); }
.etapes h3 { margin-bottom: 0.35em; }
.etapes p { margin: 0; color: var(--ardoise); font-size: 0.98rem; }
.etapes-verticales { grid-template-columns: 1fr; max-width: var(--texte); }
.etapes-verticales li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.2rem; }
.etapes-verticales li::before { grid-row: span 3; margin: 0; }

/* explication des décibels */
.echelle { display: grid; gap: 0.6rem; margin: 1.5rem 0; max-width: 34rem; }
.echelle div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 0.8rem; font-size: 0.92rem; }
.echelle span.barre { display: block; height: 0.9rem; background: var(--signal); border-radius: 2px; }

/* encadrés */
.encadre { background: var(--brume); border-radius: var(--rayon); padding: 1.4rem 1.6rem; margin: 1.5rem 0; }
.encadre > :last-child { margin-bottom: 0; }
.encadre-signal { background: var(--signal-pale); border-left: 3px solid var(--signal); border-radius: 0 var(--rayon) var(--rayon) 0; }
.note-independance { font-size: 0.88rem; color: var(--ardoise); border-left: 2px solid var(--filet); padding-left: 0.9rem; margin-top: 1.25rem; max-width: 40rem; }
.section-encre .note-independance { color: #C9D4DC; border-left-color: #3A506A; }

/* tableau de statut des financements */
.tableau { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1rem 0 1.5rem; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: 0.75rem 0.9rem 0.75rem 0; border-bottom: 1px solid var(--filet); }
.tableau th { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ardoise); }
.tableau-defile { overflow-x: auto; }
.statut { display: inline-block; font-size: 0.78rem; font-weight: 650; padding: 0.15em 0.65em; border-radius: 999px; white-space: nowrap; }
.statut-actif { background: var(--signal-pale); color: var(--signal-fonce); }
.statut-termine { background: var(--brume); color: var(--ardoise); }
.statut-cas { background: #F4ECDA; color: #6E5414; }

/* FAQ */
.faq { max-width: var(--texte); border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.2rem 1.1rem 0; font-weight: 650; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.3rem; top: 0.9rem; font-size: 1.4rem; font-weight: 400; color: var(--signal); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 1.1rem; color: var(--ardoise); }
.faq details > div > :last-child { margin-bottom: 0; }

/* communes */
.communes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.communes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.communes li { margin: 0; }
.communes a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--encre); text-decoration: none; font-weight: 600; background: var(--blanc); }
.communes a:hover { border-color: var(--signal); color: var(--encre); }
.communes a span { font-weight: 400; font-size: 0.85rem; color: var(--ardoise); }

/* explications en vidéo */
.hero-compact { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.hero-compact h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); max-width: 26ch; }
.themes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.themes a { padding: 0.45rem 0.95rem; border: 1.5px solid var(--filet); border-radius: 999px; background: var(--blanc); color: var(--encre); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.themes a:hover { border-color: var(--signal); color: var(--encre); }
.cartes-video { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.cartes-video.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartes-video.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50rem; }
.carte-video { margin: 0; }
.carte-video a { display: grid; gap: 0.55rem; color: var(--encre); text-decoration: none; }
.carte-video h3 { margin: 0.45rem 0 0; font-size: 1.08rem; }
.carte-video p { margin: 0; color: var(--ardoise); font-size: 0.95rem; line-height: 1.5; }
.carte-video a:hover h3 { color: var(--signal); text-decoration: underline; text-underline-offset: 0.18em; }
.vignette { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--encre); display: grid; place-items: center; }
:is(.vignette, .lecteur-attente)[data-theme="fenetres"] { background: var(--signal-fonce); }
:is(.vignette, .lecteur-attente)[data-theme="pose"] { background: #34495C; }
:is(.vignette, .lecteur-attente)[data-theme="mesure"] { background: var(--signal); }
:is(.vignette, .lecteur-attente)[data-theme="demarche"] { background: var(--ardoise); }
:is([data-theme="fenetres"], [data-theme="mesure"], [data-theme="demarche"]) .onde-vignette path { stroke: #E2EFF1; }
.lecteur-attente:is([data-theme="mesure"], [data-theme="demarche"]) { color: #EEF4F6; }
:is(.vignette, .lecteur-attente)[data-theme="aides"] { background: var(--signal-pale); color: var(--encre); }
[data-theme="aides"] .onde-vignette path { stroke: var(--signal); }
[data-theme="aides"] .vignette-etat { background: rgba(22, 41, 63, 0.08); color: var(--encre); }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.onde-vignette { width: 52%; height: auto; }
.onde-vignette path { fill: none; stroke: #7FC0CC; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vignette-etat { position: absolute; left: 0.75rem; bottom: 0.7rem; background: rgba(255, 255, 255, 0.14); color: #E6ECF1; font-size: 0.75rem; font-weight: 600; padding: 0.2em 0.65em; border-radius: 999px; }
.vignette-duree { position: absolute; right: 0.7rem; bottom: 0.7rem; background: rgba(15, 29, 46, 0.85); color: var(--blanc); font-size: 0.78rem; font-weight: 650; padding: 0.15em 0.5em; border-radius: 4px; }
.vignette-lecture { position: absolute; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.94); display: grid; place-items: center; }
.vignette-lecture::before { content: ""; margin-left: 0.25rem; border-style: solid; border-width: 0.6rem 0 0.6rem 1rem; border-color: transparent transparent transparent var(--encre); }
.lien-suite { margin: 1.75rem 0 0; font-weight: 600; }
.grille-video { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.lecteur { margin: 0; }
.lecteur video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; }
.lecteur figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ardoise); }
/* chapitre d'un film : panneau de fin (analyse gratuite des aides ou devis) posé sur la vidéo */
.lecteur-chapitre { position: relative; }
.lecteur-fin { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; box-sizing: border-box; border-radius: 8px; background: rgba(14, 27, 43, 0.9);
  color: var(--blanc); display: grid; align-content: center; justify-items: center; gap: 0.6rem; padding: 1.25rem; text-align: center; }
.lecteur-fin-titre { margin: 0; font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.6rem); }
.lecteur-fin .actions { justify-content: center; margin-top: 0.4rem; }
.lecteur-fin-suite { margin: 0.3rem 0 0; font-size: 0.9rem; color: #C9D4DC; }
.lecteur-fin-suite a, .lecteur-fin .lien-bouton { color: var(--blanc); }
.chapitres { padding-left: 1.3rem; }
.chapitres li { margin-bottom: 0.6rem; }
@media (max-width: 640px) { .lecteur-fin { position: static; aspect-ratio: auto; margin-top: 0.6rem; } }
.lecteur-attente { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 8px; background: var(--encre); color: #C9D4DC; display: grid; align-content: center; justify-items: start; gap: 0.6rem; padding: clamp(1.25rem, 4vw, 2.5rem); }
.lecteur-attente .onde-vignette { width: 40%; margin-bottom: 0.4rem; }
.lecteur-attente strong { color: var(--blanc); font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
.reponse > .h3-like:first-child { margin-top: 0; }
.reponse h3 { margin-top: 1.5rem; }

/* appel final */
.appel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.appel h2 { margin-bottom: 0.3em; }
.appel p { margin: 0; }

/* ---------- formulaire ---------- */
.formulaire { background: var(--blanc); border: 1px solid var(--filet); border-radius: 10px; padding: clamp(1.25rem, 3vw, 2rem); max-width: 40rem; }
.section-brume .formulaire { border-color: transparent; }
.formulaire fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.etape + .etape { margin-top: 2rem; }
.js .etape:not(.active) { display: none; }
.js .etape + .etape { margin-top: 0; }
.etape > legend { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.2rem; padding: 0; }
.indicateur { display: none; }
.js .indicateur { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.indicateur li { flex: 1; margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--ardoise); padding-top: 0.5rem; border-top: 3px solid var(--filet); }
.indicateur li.fait, .indicateur li.actuel { border-top-color: var(--signal); color: var(--encre); }
.champ { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; }
.champ label, .groupe legend { font-weight: 600; font-size: 0.95rem; }
.champ .aide { font-size: 0.85rem; color: var(--ardoise); }
.champ-ligne { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.9rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font: inherit; color: var(--encre); background: var(--blanc);
  border: 1.5px solid #B9C5CE; border-radius: var(--rayon); padding: 0.65rem 0.75rem; min-height: 3rem;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(43, 122, 138, 0.25); }
[aria-invalid="true"] { border-color: var(--alerte) !important; }
.erreur { color: var(--alerte); font-size: 0.88rem; font-weight: 600; margin: 0; }
.groupe { border: 0; padding: 0; margin: 0 0 1.75rem; }
.groupe legend { margin-bottom: 0.6rem; padding: 0; }
.options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.options label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border: 1.5px solid #B9C5CE; border-radius: var(--rayon); font-weight: 500; font-size: 0.95rem; cursor: pointer; background: var(--blanc); }
.options label:has(input:checked) { border-color: var(--signal); background: var(--signal-pale); }
.options input, .case input { accent-color: var(--signal); width: 1.1rem; height: 1.1rem; margin: 0; }
.case { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 0.92rem; margin-bottom: 0.9rem; }
.case input { margin-top: 0.2rem; }
.etape-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }
.etape-actions [data-suivant], .etape-actions [data-retour] { display: none; }
.js .etape-actions [data-suivant], .js .etape-actions [data-retour] { display: inline-flex; }
.formulaire-alerte { margin: 1rem 0 0; color: var(--alerte); font-weight: 600; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* calculateur des aides : une carte par aide, avec son niveau (probablement éligible, à vérifier, probablement pas) */
.calculateur { max-width: 48rem; }
.calculateur .champ { max-width: 24rem; margin-bottom: 1.75rem; }
.calculateur .groupe { margin-bottom: 1.75rem; }
.niveau { display: inline-block; font-size: 0.78rem; font-weight: 650; padding: 0.15em 0.65em; border-radius: 999px; white-space: nowrap; background: var(--brume); color: var(--ardoise); }
.niveau-oui .niveau, .niveau.niveau-oui { background: var(--signal-pale); color: var(--signal-fonce); }
.niveau-verifier .niveau, .niveau.niveau-verifier { background: #F4ECDA; color: #6E5414; }
.niveau-info .niveau, .niveau.niveau-info { background: var(--encre); color: var(--blanc); }
.resultats { max-width: 48rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.resultats > h2:focus { outline: none; }
.liste-aides { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; }
.carte-aide { margin: 0; background: var(--blanc); border: 1px solid var(--filet); border-left: 4px solid #B9C5CE; border-radius: 0 var(--rayon) var(--rayon) 0; padding: 1.1rem 1.3rem; }
.carte-aide.niveau-oui { border-left-color: var(--signal); }
.carte-aide.niveau-verifier { border-left-color: #C9A24A; }
.carte-aide.niveau-info { border-left-color: var(--encre); }
.carte-aide h3 { margin: 0.55rem 0 0.4rem; font-size: 1.05rem; }
.carte-aide p { margin: 0 0 0.5rem; }
.carte-aide > :last-child { margin-bottom: 0; }
.carte-aide-source { font-size: 0.85rem; color: var(--ardoise); }
.tableau-communes td:first-child { width: 34%; }

/* page d'atterrissage */
/* Ordinateur : texte à gauche, formulaire à droite. Téléphone : titre, formulaire, puis détails. */
.atterrissage-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  grid-template-areas: "intro form" "details form"; grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0.5rem; align-items: start;
}
.att-intro { grid-area: intro; }
.att-details { grid-area: details; }
.atterrissage-grille .formulaire { grid-area: form; max-width: none; }

/* résultat */
.resultat { max-width: var(--texte); }
.resultat .marque-ok { width: 3rem; height: 3rem; border-radius: 50%; background: var(--signal-pale); display: grid; place-items: center; margin-bottom: 1.2rem; }
.resultat .marque-ok::before { content: ""; width: 1.1rem; height: 0.55rem; border-left: 3px solid var(--signal); border-bottom: 3px solid var(--signal); transform: rotate(-45deg) translate(1px, -2px); }

/* ---------- pied de page ---------- */
.pied { background: #0F1D2E; color: #C9D4DC; padding-top: 3.5rem; font-size: 0.95rem; }
.pied a { color: var(--blanc); }
.pied h2 { font-size: 0.8rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: #8FA3B2; margin-bottom: 1rem; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding-bottom: 2.5rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.45rem; }
.pied li a { text-decoration: none; }
.pied li a:hover { text-decoration: underline; color: var(--blanc); }
.pied-baseline { margin: 0.8rem 0 1rem; color: var(--blanc); font-weight: 600; }
.pied-note { font-size: 0.85rem; color: #8FA3B2; max-width: 30rem; }
.pied-bas { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; border-top: 1px solid #2C4058; padding-block: 1.25rem 1.5rem; font-size: 0.875rem; }
.pied-bas a { color: #C9D4DC; }
.pied-simple { padding-top: 0; }
.pied-simple .pied-note { padding-bottom: 1.5rem; margin: 0 auto; }
.pied .a-completer { color: var(--encre); }

/* ---------- bandeau cookies ---------- */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--blanc); border-top: 1px solid var(--filet); box-shadow: 0 -12px 32px -20px rgba(22, 41, 63, 0.5); padding-block: 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
.cookies-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; }
.cookies h2 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.cookies p { margin: 0; font-size: 0.92rem; color: var(--ardoise); }
.cookies-choix { display: grid; gap: 0.4rem; margin-top: 0.8rem; font-size: 0.92rem; }
.cookies-choix input { accent-color: var(--signal); margin-right: 0.4rem; }
.cookies-boutons { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: flex-end; }

/* ---------- petits écrans ---------- */
@media (max-width: 900px) {
  .hero-grille, .grille-2, .appel, .cookies-in { grid-template-columns: 1fr; }
  .atterrissage-grille { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "details"; grid-template-rows: auto; row-gap: 1.5rem; }
  .grille-3 { grid-template-columns: 1fr; }
  .preuves ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes, .etapes-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .communes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes-video, .cartes-video.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-video { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
  .cookies-boutons { justify-content: flex-start; }
}
/* Téléphone : la photo occupe le haut, le texte se pose en bas sur un voile qui fonce vers le bas. */
@media (max-width: 760px) {
  .hero-photo { --fond: url("/assets/img/fond-interieur-mobile.jpg"); --cadrage: center top; min-height: 0; align-items: end; padding-block: 15rem 2.5rem; }
  [data-saison="exterieur"] .hero-photo { --fond: url("/assets/img/fond-exterieur-mobile.jpg"); --cadrage: center top; }
  .hero-photo::before { background: linear-gradient(180deg, rgba(22, 41, 63, 0.1) 0%, rgba(22, 41, 63, 0.45) 30%, rgba(22, 41, 63, 0.9) 58%, rgba(22, 41, 63, 0.96) 100%); }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .preuves ul, .etapes, .etapes-5, .communes, .pied-grille, .cartes-video, .cartes-video.n-4, .cartes-video.n-2 { grid-template-columns: 1fr; }
  .champ-ligne { grid-template-columns: 1fr; }
  .actions .bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .entete, .pied, .cookies, .formulaire { display: none; }
}