/* ==========================================================================
   POIDZ — feuille de style du site public
   Style « Signalétique routière » (décision de David du 01/10/2026) :
   plaques bleu nuit ou blanches à liseré, bandeau dégradé de 8 px en haut des
   plaques, chiffres façon panneau, grille de 12 colonnes sur multiples de 8 px.
   Les captures de l'application sont montrées dans un cadre de téléphone.

   Règles fermes :
   - aucune ressource extérieure (police servie par poidz.fr) ;
   - texte coloré sur blanc en #06705f, texte secondaire en #46586e (AA) ;
   - le dégradé n'est JAMAIS une couleur de texte, seulement une surface ;
   - au plus ~30 % de surface bleu nuit par écran.

   SOMMAIRE
   1. Police   2. Jetons (couleurs, échelle, espacements)   3. Base
   4. Mise en page (wrap, g12, sections)   5. Typographie
   6. En-tête et menu   7. Boutons et badges   8. Plaques et chiffres
   9. Téléphone, détails, pictos   10. Formulaires et calculateur
   11. Offres, tarifs, FAQ   12. Pied   13. Composants hérités
   14. Écrans étroits   15. Mouvement réduit
   ========================================================================== */

/* 1. Police ---------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Jetons ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  /* Couleurs (clair) */
  --fond: #ffffff;
  --surface: #f2f5f9;
  --texte: #0e1c30;
  --texte2: #46586e;          /* 7,3:1 sur blanc */
  --lien: #06705f;            /* 6,0:1 sur blanc */
  --filet: #0e1c30;           /* liseré des plaques claires (3 px) */
  --filet-doux: #d5dde7;
  --plaque: #0e1c30;
  --sur-plaque: #ffffff;
  --sur-plaque2: #c9d4e2;
  --lime: #c6f542;
  --turquoise: #27e0c5;
  --turq-graphique: #0a9c85;  /* éléments NON textuels seulement (3,4:1) */
  --rouge: #b3261e;
  --ambre: #8a4b0f;
  --ambre-fond: #fdf6ee;
  --degrade: linear-gradient(90deg, #c6f542, #27e0c5);
  --focus: #0e1c30;

  /* Échelle typographique (une seule) */
  --t-xs: 13px;
  --t-s: 15px;
  --t-m: 17px;
  --t-l: 21px;
  --t-xl: clamp(26px, 3.2vw, 40px);     /* h2 */
  --t-2xl: clamp(34px, 5vw, 60px);      /* h1 */
  --t-chiffre: clamp(56px, 8vw, 112px); /* chiffre phare d'une plaque */
  --t-chiffre-m: clamp(44px, 5vw, 72px);

  /* Espacements (multiples de 8) */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 48px;
  --e-6: 72px;

  --r: 8px;            /* rayon des plaques, boutons, champs */
  --r-tel: 36px;       /* rayon du cadre de téléphone */
  --largeur: 1248px;
  --gouttiere: 24px;
  --entete: 72px;

  /* Alias des anciens noms (pages pas encore refaites) */
  --blanc: var(--fond);
  --pierre: var(--surface);
  --pierre2: var(--surface);
  --filet2: var(--filet-doux);
  --encre: var(--texte);
  --encre-70: var(--texte2);
  --encre-50: var(--texte2);
  --vert: var(--lien);
  --vert-fonce: var(--lien);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #0a1322;
    --surface: #111e33;
    --texte: #eef3f8;
    --texte2: #b6c4d4;
    --lien: #5fe0c8;
    --filet: #dfe7f0;
    --filet-doux: #2a3b55;
    --plaque: #1b2d4a;
    --rouge: #ff8a80;
    --ambre: #f3c58f;
    --ambre-fond: #2a1f12;
    --focus: #c6f542;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-principal:not(.sombre *):not(.resultat *) { background: var(--lime); border-color: var(--lime); color: #0e1c30; }
}

/* 3. Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 600 var(--t-m)/1.6 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--lien); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sombre :focus-visible, .bloc-encre :focus-visible, .tarif.mise-en-avant :focus-visible,
.resultat :focus-visible { outline-color: var(--lime); }
/* Plaque lime : contour bleu nuit dans les deux modes (lime sur lime = invisible). */
.lime :focus-visible { outline-color: #0e1c30; }
/* Les commandes de la carte restent claires même en mode sombre. */
.leaflet-container :focus-visible { outline-color: #0e1c30; }
::placeholder { color: var(--texte2); opacity: 1; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.evitement {
  position: absolute; left: var(--e-1); top: -100px; z-index: 100;
  background: var(--plaque); color: #fff; padding: 12px 16px; border-radius: var(--r);
  font-weight: 800; text-decoration: none;
}
.evitement:focus { top: var(--e-1); }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 4. Mise en page -------------------------------------------------------------- */
.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.col-etroite { max-width: 816px; }
.col-moyenne { max-width: 968px; }

/* Grille modulaire de 12 colonnes */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-3); }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; }
.s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; }
.s8 { grid-column: span 8; } .s9 { grid-column: span 9; } .s12 { grid-column: 1 / -1; }
.g12.centre-v { align-items: center; }
.g12.haut { align-items: start; }
.pile { display: grid; gap: var(--e-3); align-content: start; }

section { padding: var(--e-6) 0; }
section.bande, section.pierre { background: var(--surface); }
section.serre { padding: var(--e-5) 0; }
.centre { text-align: center; }
.centre .lede, .centre .etiquette { margin-left: auto; margin-right: auto; }
.entete-section { max-width: 760px; margin-bottom: var(--e-4); }
.centre .entete-section { margin-left: auto; margin-right: auto; }

/* 5. Typographie ---------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 var(--e-2); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
h1 { font-size: var(--t-2xl); font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; }
p { margin: 0 0 var(--e-2); }
p.lede, .sous-titre { font-size: var(--t-l); line-height: 1.5; color: var(--texte2); max-width: 46em; font-weight: 600; }
strong, b { font-weight: 800; }
.discret { color: var(--texte2); }
.note { font-size: var(--t-s); color: var(--texte2); margin: var(--e-2) 0 0; }
.etiquette {
  display: block; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; margin: 0 0 var(--e-2); color: var(--texte);
}

/* Décision 3 : le texte courant est JUSTIFIÉ sur ordinateur, aligné à gauche
   sous 700 px. Jamais justifiés : titres, boutons, prix, listes courtes et
   cartes étroites (plaques, offres, fonctions…). */
@media (min-width: 700px) {
  main p, main dd, .justifie {
    text-align: justify; -webkit-hyphens: auto; hyphens: auto;
  }
  main :is(.plaque, .carte, .fonction, .offre, .tarif, .regle, .resultat, .badges,
           .qrs, .telephone, .detail, .note, .etat, .centre, .alerte, .liste-filets) p,
  main :is(.avis, .etape, .etapes-liste, .iti-transmet, .engagement, .encart) p,
  main p:is(.note, .etat, .etiquette, .offre-prix, .rassure, .voir-carte, .bas-note, .lede, .sous-titre, .chapeau),
  main .centre p { text-align: inherit; -webkit-hyphens: manual; hyphens: manual; }
  main .plaque.large p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
}
/* Jamais de césure dans un lien, un nom en gras ou un mot qu'on lit d'un bloc. */
main :is(a, strong, b, .sans-cesure) { -webkit-hyphens: manual; hyphens: manual; }
h1, h2, h3 { text-wrap: balance; }
.btn.btn-installer { gap: 0; }

/* 6. En-tête et menu ------------------------------------------------------------ */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--fond); border-bottom: 3px solid var(--filet);
}
.entete-ligne { display: flex; align-items: center; gap: var(--e-2); min-height: var(--entete); }
.marque {
  display: inline-flex; align-items: center; gap: var(--e-1); min-height: 44px;
  color: var(--texte); text-decoration: none;
}
.marque svg { flex: none; }
.marque .mot { font-weight: 900; font-size: 22px; letter-spacing: .14em; }
.marque .mot i { font-style: normal; }
.marque .suffixe {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte2); padding-top: 3px;
}
.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--r); color: var(--texte); font-weight: 800; text-decoration: none;
}
.menu a:hover { background: var(--surface); }
.menu a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--turq-graphique); border-radius: 0; }
.menu .espace { font-size: var(--t-s); font-weight: 700; color: var(--texte2); margin-left: var(--e-1); }
.ouvrir-menu {
  display: none; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--r);
  background: none; border: 3px solid var(--filet); color: var(--texte);
  font-weight: 800; font-size: var(--t-s); cursor: pointer;
}

/* 7. Boutons et badges ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1);
  min-height: 48px; padding: 0 var(--e-3); border-radius: var(--r);
  border: 3px solid var(--plaque); background: var(--plaque); color: #fff;
  font-weight: 800; font-size: var(--t-m); line-height: 1.15; text-align: center;
  text-decoration: none; cursor: pointer;
}
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-principal, .btn-encre { background: var(--plaque); border-color: var(--plaque); color: #fff; }
.btn-secondaire, .btn-contour { background: var(--fond); border-color: var(--filet); color: var(--texte); }
.btn-lime { background: var(--lime); border-color: var(--lime); color: #0e1c30; }
.btn-degrade { background: var(--degrade); border-color: transparent; color: #0e1c30; }
.btn-clair { background: #fff; border-color: #fff; color: #0e1c30; }
.btn-fantome { background: transparent; border-color: transparent; color: var(--texte); }
.btn-s { min-height: 44px; padding: 0 var(--e-2); font-size: var(--t-s); }
.sombre .btn-principal, .resultat .btn-principal { background: #fff; border-color: #fff; color: #0e1c30; }
.boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

.badges { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 var(--e-2); padding: 0; list-style: none; }
.badges li { margin: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 6px 20px 6px 16px; border-radius: var(--r);
  background: var(--plaque); color: #fff; border: 3px solid var(--plaque);
  font-weight: 800; font-size: 18px; line-height: 1.1; text-decoration: none;
}
.badge:hover { text-decoration: underline; }
.badge svg { width: 26px; height: 26px; flex: none; }
.badge small { display: block; font-weight: 600; font-size: 12px; opacity: .92; }
.sombre .badge, .pied .badge { background: #fff; color: #0e1c30; border-color: #fff; }
.badges-petits .badge { min-height: 48px; font-size: var(--t-s); padding: 4px 14px 4px 12px; }
.badges-petits .badge svg { width: 22px; height: 22px; }

.installer .qrs { display: flex; gap: var(--e-3); margin-top: var(--e-1); }
.qrs figure { margin: 0; text-align: center; font-size: var(--t-xs); color: var(--texte2); font-weight: 800; }
.sombre .qrs figure, .sombre .qrs figcaption { color: var(--sur-plaque2); }
.qr { width: 112px; height: 112px; border: 3px solid var(--filet); border-radius: var(--r); background: #fff; display: block; margin-bottom: 4px; }
.rassure { font-weight: 800; margin-top: var(--e-1); }

/* 8. Plaques et chiffres ---------------------------------------------------------- */
.plaque {
  position: relative; border-radius: var(--r); padding: 40px var(--e-3) var(--e-3);
  overflow: hidden;
}
.plaque::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--degrade);
}
.plaque > :last-child { margin-bottom: 0; }
.claire { background: var(--fond); border: 3px solid var(--filet); padding-top: 37px; }
.sombre { background: var(--plaque); color: var(--sur-plaque); }
.sombre p, .sombre .discret, .sombre li { color: var(--sur-plaque2); }
.sombre h2, .sombre h3, .sombre .chiffre, .sombre strong, .sombre .etiquette { color: #fff; }
.sombre a:not(.btn):not(.badge) { color: var(--lime); }
.bloc-encre .badge { background: #fff; color: #0e1c30; border-color: #fff; }
.lime { background: var(--lime); color: #0e1c30; }
.lime::before { background: #0e1c30; }
.lime p, .lime .etiquette, .lime .chiffre { color: #0e1c30; }
.plaque h3 { margin-bottom: var(--e-1); }

.chiffre {
  display: block; font-weight: 900; font-size: var(--t-chiffre); line-height: .95;
  letter-spacing: -.03em; margin: var(--e-1) 0;
}
.chiffre .u { font-weight: 800; font-size: .42em; letter-spacing: 0; }
.chiffre.moyen { font-size: var(--t-chiffre-m); }

.pastilles { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.pastille-pont {
  display: inline-flex; align-items: center; gap: var(--e-1);
  background: #fff; color: #b3261e; border: 3px solid #b3261e; border-radius: 999px;
  padding: 4px 14px; font-weight: 900; font-size: var(--t-l);
}
.pastille-pont.ok { color: #0e1c30; border-color: #c98a00; }

/* Plaque de gabarit : quatre « panneaux » chiffrés */
.gabarit-plaque { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin: var(--e-1) 0 0; padding: 0; list-style: none; }
.panneau-gab { border: 3px solid #fff; border-radius: var(--r); padding: 12px 8px; text-align: center; min-width: 0; }
.panneau-gab b { display: block; font-size: clamp(26px, 7vw, 40px); font-weight: 900; line-height: 1; color: #fff; white-space: nowrap; }
.panneau-gab b small { font-size: .5em; font-weight: 800; }
.panneau-gab span { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--sur-plaque2); }

.engagement {
  border: 3px solid var(--filet); border-radius: var(--r); padding: var(--e-3);
  font-weight: 800; font-size: var(--t-l); line-height: 1.4; background: var(--fond); margin: var(--e-3) 0 0;
}
.engagement::before { content: ""; display: block; width: 48px; height: 8px; background: var(--degrade); border-radius: 2px; margin-bottom: 12px; }

.alerte {
  display: flex; gap: 12px; align-items: flex-start; border: 3px solid var(--rouge);
  border-radius: var(--r); padding: 12px var(--e-2); color: var(--rouge); background: var(--fond);
  font-weight: 800;
}
.sombre .alerte { background: #fff; color: #b3261e; border-color: #ff8a80; }
.picto-mini { width: 28px; height: 28px; flex: none; }

.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: 12px 0 12px var(--e-4); border-top: 2px solid var(--filet-doux); position: relative; }
.liste li:last-child { border-bottom: 2px solid var(--filet-doux); }
.liste li::before { content: ""; position: absolute; left: 0; top: 21px; width: 16px; height: 8px; background: var(--degrade); border-radius: 2px; }

.lien-fort { font-weight: 800; display: inline-flex; align-items: center; min-height: 44px; }

/* 9. Téléphone, détails, pictos ----------------------------------------------------- */
.telephone { margin: 0; justify-self: center; width: min(300px, 78vw); }
.cadre {
  border: 10px solid #0e1c30; border-radius: var(--r-tel); overflow: hidden;
  background: #0e1c30; box-shadow: 0 24px 48px -28px rgba(14, 28, 48, .55);
}
.cadre img { width: 100%; border-radius: 26px; }
.telephone figcaption { font-size: var(--t-xs); color: var(--texte2); font-weight: 800; text-align: center; margin-top: 12px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cadre { border-color: #34496a; background: #34496a; box-shadow: 0 0 0 2px #5d7699, 0 24px 48px -28px rgba(0,0,0,.8); }
  :root:not([data-theme="light"]) .tarif.mise-en-avant { border-color: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
}

/* Capture recadrée sur un détail, reliée à sa légende par un filet de 2 px */
.detail { display: flex; align-items: center; margin: 0 0 var(--e-3); }
.detail img { flex: none; max-width: 62%; border-radius: var(--r); border: 3px solid var(--filet); background: #fff; }
.detail figcaption { flex: 1; display: flex; align-items: center; font-weight: 800; line-height: 1.35; }
.detail figcaption::before { content: ""; flex: 0 0 32px; height: 2px; background: var(--filet); margin: 0 12px; }

.picto { width: 64px; height: 64px; color: var(--texte); flex: none; }
.acces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-4); padding: 0; list-style: none; }
.acces a {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-1);
  padding: var(--e-2) var(--e-1); min-height: 44px; border-radius: var(--r);
  color: var(--texte); font-weight: 800; text-align: center; text-decoration: none;
}
.acces a:hover { background: var(--surface); text-decoration: underline; }

/* 10. Formulaires et calculateur ----------------------------------------------------- */
.champs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-2); }
.champs > * { grid-column: 1 / -1; }
.champs > .demi { grid-column: span 6; }
.champ { position: relative; display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e-2); }
.champs .champ { margin-bottom: 0; }
.champ label, .etiquette-champ {
  font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--texte);
}
.champ input:not([type="checkbox"]):not([type="radio"]), .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: 3px solid var(--filet); border-radius: var(--r);
  background: var(--fond); color: var(--texte); font-size: var(--t-m); font-weight: 700;
}
.champ textarea { min-height: 120px; line-height: 1.5; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.champ [aria-invalid="true"] { border-color: var(--rouge); }
.champ.num input { font-size: 28px; font-weight: 900; text-align: center; }
.champ .unite { font-size: var(--t-xs); color: var(--texte2); font-weight: 700; }
.case { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; font-weight: 700; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--turq-graphique); flex: none; }

/* Suggestions d'adresse : liste du motif combobox (itineraire.js) */
.suggestions {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--fond); border: 3px solid var(--filet); border-radius: var(--r);
  box-shadow: 0 16px 32px -16px rgba(14, 28, 48, .45);
  max-height: 260px; overflow-y: auto;
}
.suggestions li {
  min-height: 44px; display: flex; align-items: center; padding: 8px 12px;
  border-radius: 6px; cursor: pointer; font-weight: 700; color: var(--texte); text-transform: none; letter-spacing: 0;
}
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--plaque); color: #fff; }

.etat { min-height: 24px; font-size: var(--t-s); font-weight: 700; color: var(--texte2); margin: var(--e-1) 0 0; }
.etat.erreur { color: var(--rouge); }

/* Carte de résultat (même esprit que celle de l'application) */
.resultat {
  position: relative; margin-top: var(--e-2); background: var(--plaque); color: #fff;
  border-radius: var(--r); padding: 32px var(--e-3) var(--e-3); overflow: hidden;
}
.resultat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--degrade); }
.sombre .resultat { background: transparent; padding: 0; margin-top: 0; }
.sombre .resultat::before { display: none; }
.resultat .trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: var(--e-2); border-bottom: 2px solid #2f4566; }
.resultat .trois + .trois { padding: var(--e-2) 0 0; border-bottom: 0; }
.resultat .trois > div { border-left: 3px solid var(--turquoise); padding-left: 10px; }
.resultat .val { font-size: clamp(22px, 2.6vw, 34px); font-weight: 900; line-height: 1.1; color: #fff; white-space: nowrap; }
.resultat .val.accent2 { color: var(--lime); }
.resultat .val.turq { color: var(--turquoise); }
.resultat .quoi { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--sur-plaque2); font-weight: 800; margin-top: 4px; }
.resultat .bas-note { font-size: var(--t-xs); color: var(--sur-plaque2); margin: var(--e-2) 0 0; }
.resultat a { color: var(--lime); font-weight: 800; }
.resultat .voir-carte { margin: var(--e-2) 0 0; }
.exemple .trois > div { border-left-color: var(--sur-plaque2); }

/* 11. Offres, tarifs, FAQ ------------------------------------------------------------ */
.offre { display: flex; flex-direction: column; }
.offre-tete { display: flex; align-items: center; gap: 12px; margin-bottom: var(--e-2); }
.offre-tete h2, .offre-tete h3 { margin: 0; font-size: var(--t-l); }
.offre-tete .picto { width: 52px; height: 52px; }
.offre-tete.grand h2 { font-size: var(--t-xl); }
.offre-tete.grand .picto { width: 64px; height: 64px; }
.offre > p:not(.offre-prix) { flex: 1; }
.offre-prix { margin: var(--e-1) 0 var(--e-2); }
.offre-prix .avant { display: block; font-weight: 800; color: var(--texte2); }
.offre-prix .prix { display: block; font-weight: 900; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -.02em; }
.offre-prix .prix .u { font-size: .36em; font-weight: 800; letter-spacing: 0; }
.offre-prix .unite-prix { display: block; font-weight: 800; min-height: 3em; }
.offre .btn { align-self: stretch; }

.tableau { width: 100%; border-collapse: collapse; font-weight: 700; }
.tableau caption { caption-side: top; text-align: left; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding-bottom: var(--e-1); }
.sombre .tableau caption { color: #fff; }
.tableau th, .tableau td { text-align: left; padding: 12px 8px; border-bottom: 2px solid var(--filet-doux); vertical-align: top; }
.tableau thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; border-bottom: 3px solid var(--filet); }
.tableau .montant { font-weight: 900; font-size: var(--t-l); white-space: nowrap; }
.sombre .tableau th, .sombre .tableau td { border-color: #2f4566; color: #fff; }

details.faq, .faq-liste details { border-top: 3px solid var(--filet); }
.faq-liste details:last-of-type, details.faq:last-of-type { border-bottom: 3px solid var(--filet); }
details summary {
  min-height: 56px; display: flex; align-items: center; position: relative;
  padding: 8px 48px 8px 0; font-weight: 800; font-size: var(--t-l); line-height: 1.3;
  cursor: pointer; list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 8px; font-weight: 900; font-size: 28px; }
details[open] summary::after { content: "\2212"; }
details > p, details > div { padding: 0 0 var(--e-2); max-width: 52em; }

/* Fil d'Ariane et « autres offres » */
.fil { padding: var(--e-2) 0 0; }
.fil ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; font-weight: 700; font-size: var(--t-s); }
.fil li + li::before { content: "›"; margin-right: 6px; color: var(--texte2); }
.fil a { display: inline-flex; align-items: center; min-height: 44px; }
.fil [aria-current] { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte2); }
.autres-offres { background: var(--surface); padding: var(--e-4) 0; border-top: 3px solid var(--filet); }
.autres-offres ul { list-style: none; padding: 0; margin: 0 0 var(--e-1); }
.autres-offres li { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 0; }
.autres-offres a { font-weight: 800; display: inline-flex; align-items: center; min-height: 44px; }
.autres-offres .ao-prix { color: var(--texte2); font-size: var(--t-s); font-weight: 700; }

/* 12. Pied ---------------------------------------------------------------------------- */
.pied { border-top: 3px solid var(--filet); padding: var(--e-5) 0 var(--e-3); font-size: 16px; background: var(--fond); }
.pied h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--e-1); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li a { display: flex; align-items: center; min-height: 44px; color: var(--texte); font-weight: 700; text-decoration: none; }
.pied li a:hover { text-decoration: underline; }
.pied-poidz p { color: var(--texte2); margin-top: var(--e-1); }
.pied .badge { background: var(--plaque); color: #fff; border-color: var(--plaque); }
.pied-bas a { display: inline-flex; align-items: center; min-height: 44px; }
.pied-bas {
  border-top: 2px solid var(--filet-doux); margin-top: var(--e-4); padding-top: var(--e-2);
  font-size: 14px; color: var(--texte2); display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
}

/* 13. Composants hérités (pages pas encore refaites) ---------------------------------------- */
.heros { padding: var(--e-4) 0 var(--e-5); }
.heros-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--e-5); align-items: center; }
.grille { display: grid; gap: var(--e-3); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aligne-centre { align-items: center; }

.fonction { position: relative; border-top: 3px solid var(--filet); padding-top: var(--e-2); }
.fonction .ico {
  width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--filet);
  color: var(--texte); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.fonction .ico svg { width: 22px; height: 22px; }
.fonction h3 { margin-bottom: 6px; font-size: 19px; }
.fonction p { margin: 0; font-size: 16px; color: var(--texte2); }

.carte { background: var(--fond); border: 3px solid var(--filet); border-radius: var(--r); padding: var(--e-3); position: relative; }
.carte h2, .carte h3 { margin-bottom: 12px; }

.liste-filets { border-top: 3px solid var(--filet); padding: 0; margin: 0; }
.liste-filets > li {
  list-style: none; padding: 20px 0; border-bottom: 2px solid var(--filet-doux);
  display: grid; grid-template-columns: 48px 1fr; gap: var(--e-2); align-items: start;
}
.liste-filets .num { font-weight: 900; font-size: var(--t-l); line-height: 1.1; }
.liste-filets h3 { margin-bottom: 4px; font-size: 19px; }
.liste-filets p { margin: 0; font-size: 16px; color: var(--texte2); }

.coches { list-style: none; padding: 0; margin: 0; }
.coches li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 16px; }
.coches li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px;
  border-left: 3px solid var(--turq-graphique); border-bottom: 3px solid var(--turq-graphique); transform: rotate(-45deg);
}
.coches li.non { color: var(--texte2); }
.coches li.non::before { width: 12px; height: 0; border-left: 0; border-bottom: 3px solid var(--filet-doux); transform: none; top: 12px; }

.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.tarif {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 3px solid var(--filet); border-radius: var(--r); padding: 37px var(--e-3) var(--e-3); background: var(--fond);
}
.tarif::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--degrade); }
.tarif.mise-en-avant { background: var(--plaque); color: #fff; border-color: var(--plaque); }
.tarif.mise-en-avant .cible, .tarif.mise-en-avant .unite, .tarif.mise-en-avant li { color: var(--sur-plaque2); }
.tarif.mise-en-avant .btn-encre { background: #fff; color: #0e1c30; border-color: #fff; }
.tarif .nom { font-weight: 900; font-size: var(--t-l); }
.tarif .cible { color: var(--texte2); font-size: var(--t-s); min-height: 46px; margin-top: 4px; }
.tarif .montant { font-size: clamp(48px, 5vw, 72px); font-weight: 900; letter-spacing: -.02em; margin: var(--e-2) 0 2px; line-height: 1; }
.tarif .unite { font-size: var(--t-s); color: var(--texte2); font-weight: 800; margin-bottom: var(--e-3); }
.tarif .coches { margin-bottom: var(--e-3); }
.tarif .btn { margin-top: auto; width: 100%; }
.modalites { margin-top: var(--e-3); font-size: var(--t-s); color: var(--texte2); }
.modalites li { margin-bottom: 6px; }

.bloc-encre { position: relative; overflow: hidden; background: var(--plaque); color: #fff; border-radius: var(--r); padding: var(--e-5) var(--e-5); }
.bloc-encre::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--degrade); z-index: 2; }
.bloc-encre h2 { color: #fff; }
.bloc-encre p { color: var(--sur-plaque2); }
.bloc-encre .etiquette { color: var(--lime); }
.bloc-encre a:not(.btn):not(.badge) { color: var(--lime); }
.bloc-encre.sur-photo .fond { position: absolute; inset: 0; z-index: 0; }
.bloc-encre.sur-photo .fond img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.bloc-encre.sur-photo .fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,28,48,.95) 0%, rgba(14,28,48,.78) 46%, rgba(14,28,48,.35) 100%); }
.bloc-encre.sur-photo .dessus { position: relative; z-index: 1; max-width: 40rem; }

.avis {
  border: 3px solid var(--ambre); background: var(--ambre-fond); border-radius: var(--r);
  padding: var(--e-2) var(--e-3); color: var(--texte); font-size: var(--t-s);
}
.avis p { color: var(--texte); }
.avis p:last-child { margin-bottom: 0; }

.regle { display: grid; grid-template-columns: 28px 1fr; gap: 14px; margin-bottom: var(--e-3); }
.regle .cadenas { color: var(--texte); padding-top: 3px; }
.regle .cadenas svg { width: 22px; height: 22px; }
.regle b { display: block; margin-bottom: 3px; }
.regle span { color: var(--texte2); font-size: 16px; }

.telephone > img { border-radius: 26px; }
.legende-visuel { text-align: center; font-size: var(--t-xs); color: var(--texte2); margin: var(--e-2) 0 0; }
.bande-visuel { padding: 0; }
.bande-visuel img { width: 100%; max-width: 1440px; margin: 0 auto; }
.duo-visuel img { border-radius: var(--r); border: 3px solid var(--filet); }
.reperes { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 3px solid var(--filet); border-bottom: 3px solid var(--filet); }
.repere { padding: var(--e-3); border-left: 2px solid var(--filet-doux); }
.repere:first-child { border-left: 0; }
.repere .chiffre { font-size: 28px; margin: 0; }
.repere .quoi { font-size: var(--t-s); color: var(--texte2); }
.defs dt { font-weight: 800; margin-top: var(--e-3); }
.defs dd { margin: 4px 0 0; color: var(--texte2); }
.aide { font-size: var(--t-s); color: var(--texte2); }
.texte-legal h2 { font-size: var(--t-l); margin: var(--e-3) 0 var(--e-1); }

/* Page « calcul d'itinéraire » (héritée) */
.bandeau-app { background: var(--plaque); color: #fff; }
.bandeau-app .wrap { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; font-size: var(--t-s); }
.bandeau-app strong { color: #fff; }
.bandeau-app p { margin: 0; color: var(--sur-plaque2); }
.bandeau-app .boutons { margin-left: auto; }
.outil-express { max-width: 600px; margin: var(--e-4) auto 0; text-align: left; }
.outil-express .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.itin { display: grid; grid-template-columns: 400px 1fr; gap: var(--e-4); align-items: start; }
.panneau { border: 3px solid var(--filet); border-radius: var(--r); padding: var(--e-3); background: var(--fond); }
.panneau h2 { font-size: var(--t-l); }
.grille-gabarit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
#carte { height: 620px; border-radius: var(--r); border: 3px solid var(--filet); z-index: 0; }
#carte.leaflet-container { background: #aad3df; } /* « mer » là où l'IGN n'a pas de tuile */
.marqueur span {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-weight: 900; font-size: 13px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(14,28,48,.4);
}
.leaflet-container { background: var(--surface); font: inherit; }

/* 14. Écrans étroits ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .menu a { padding: 0 8px; }
}
@media (max-width: 980px) {
  .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9 { grid-column: 1 / -1; }
  .t6 { grid-column: span 6; }
  .heros-grille, .itin { grid-template-columns: 1fr; }
  #carte { height: 420px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reperes { grid-template-columns: repeat(2, 1fr); }
  .tarifs { grid-template-columns: 1fr; }
  .pied .g12 > * { grid-column: span 6; }
  .bandeau-app .boutons { margin-left: 0; width: 100%; }
  .ordre-avant { order: -1; }
}
@media (max-width: 900px) {
  :root { --entete: 60px; }
  .entete { border-bottom-width: 3px; }
  .entete-ligne { gap: var(--e-1); }
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fond); padding: var(--e-1) var(--e-2) var(--e-2);
    border-bottom: 3px solid var(--filet); margin: 0;
  }
  .menu.ouvert { display: flex; }
  .menu a { min-height: 48px; padding: 0 var(--e-1); border-bottom: 2px solid var(--filet-doux); border-radius: 0; }
  .menu .espace { margin-left: 0; }
  .menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--turq-graphique); }
  .menu.ouvert { box-shadow: 0 28px 40px -12px rgba(14, 28, 48, .45); }
  .btn-installer { margin-left: auto; min-height: 44px; padding: 0 14px; font-size: var(--t-s); white-space: nowrap; }
  .offre-prix .unite-prix { min-height: 0; }
  .ouvrir-menu { display: inline-flex; }
  .installer .qrs { display: none; }
  .acces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entete { position: sticky; }
}
@media (max-width: 700px) {
  :root { --gouttiere: 16px; --e-6: 48px; --e-5: 40px; }
  section { padding: var(--e-6) 0; }
  .g12 { gap: var(--e-2); }
  .t6 { grid-column: 1 / -1; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .champs > .demi { grid-column: span 6; }
  .detail { flex-direction: column; align-items: flex-start; }
  .detail img { max-width: 100%; }
  .detail figcaption { margin-top: var(--e-1); }
  .detail figcaption::before { flex-basis: 16px; margin-left: 0; }
  .badges .badge { width: 100%; justify-content: center; }
  .badges li { flex: 1 1 100%; }
  .pied .g12 > * { grid-column: 1 / -1; }
  .pied nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-2); }
  .pied nav h2 { margin-top: var(--e-3); }
  .bloc-encre { padding: var(--e-4) var(--e-3); }
  .resultat .val { font-size: 20px; }
  .resultat .trois > div { padding-left: 6px; }
  h1 br, h2 br { display: none; }
  .marque .mot { font-size: 19px; }
}
@media (max-width: 360px) {
  .gabarit-plaque { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .marque .mot { display: none; }
}
@media (max-width: 420px) {
  .acces.fn-acces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 15. Mouvement réduit ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* 16. Bloc final « Installer POIDZ » (un seul composant, commun.section_installer) */
.installer-plaque { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e-3) var(--e-5); align-items: center; }
.installer-plaque .installer-texte > :last-child { margin-bottom: 0; }
.installer-plaque .installer { justify-self: end; }
.installer-plaque .badges { margin-top: 0; }
.installer-plaque .installer-avert { grid-column: 1 / -1; margin: 0; font-size: var(--t-s); border-top: 2px solid #2f4566; padding-top: var(--e-2); }
.installer-plaque .btn-clair { border-color: #fff; }
@media (max-width: 900px) {
  .installer-plaque { grid-template-columns: 1fr; }
  .installer-plaque .installer { justify-self: stretch; }
}
/* Tableau qui ne coupe jamais son contenu : il défile s'il le faut. */
.tableau-defile { overflow-x: auto; }
.tableau th a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 700px) { .pro-recap { display: none; } }

/* Grande plaque étirée à la hauteur de ses voisines : le contenu se cale en bas. */
.plaque-etiree { display: flex; flex-direction: column; }
.plaque-etiree .pastilles { margin-top: auto; padding-top: var(--e-2); }

/* Étapes numérotées : un seul style (commun.etape / bloc_etapes). */
.etapes-liste { list-style: none; padding: 0; margin: 0; }
.etapes-liste.pile { gap: var(--e-2); }
.etape .chiffre { margin-top: 0; }
.etape h3 { font-size: var(--t-l); }
.etape p { color: var(--texte2); }