/* ══════════════════════════════════════════════════════════════════════════
   Dépannage Fermetures 06 — feuille de style unique.
   Socle : design system Nocturne (jetons de couleur, type, espacement),
   accent bleu du logo appliqué ici et nulle part ailleurs.
   ══════════════════════════════════════════════════════════════════════════ */

/* — police auto-hébergée, variable 400→600 —
   Un seul fichier : le jeu latin couvre tout ce que le site écrit, « œ »
   compris. Charger en plus la variante étendue coûtait 85 Ko par page pour
   zéro caractère supplémentaire. */
/* Inter, variable 400-600, en trois sous-ensembles : le navigateur ne
   télécharge que ceux dont la page se sert (unicode-range). Le latin
   suffit au français, à l'anglais, à l'italien, à l'espagnol, au portugais
   et à l'allemand ; le latin étendu sert le turc ; le cyrillique le russe.
   L'arabe et le chinois passent par les polices du système. ⚠️ Les plages
   ne doivent pas se recouvrir : « œ » (U+0153), présent dans le latin ET dans
   U+0100-02BA, faisait télécharger les deux fichiers sur chaque page. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/polices/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/polices/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/polices/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* — jetons — */
:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;

  /* accent bleu repris du logo */
  --color-accent: #4a9eff;
  --color-accent-100: #eef5ff;
  --color-accent-200: #d3e6ff;
  --color-accent-300: #a9cdff;
  --color-accent-500: #4a9eff;
  --color-accent-600: #2b7fe0;
  --color-accent-700: #1f5fae;
  --color-accent-800: #1a437a;
  --color-accent-900: #152d50;

  /* accent secondaire : urgence, avertissements */
  --color-alerte: #ffd84d;

  --color-section: #14305a;
  --color-section-glow: #1e4a85;

  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle d'espacement en valeurs entières : les décimales produisaient
     des demi-pixels, donc des bordures floues et des hauteurs instables. */
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-6: 16px;
  --space-8: 24px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);

  --gouttiere: clamp(20px, 5vw, 72px);
  --rythme-section: clamp(56px, 8vw, 104px);
  /* ≈ 68 caractères réels, la cible de confort de lecture. */
  --mesure: 50ch;
  --h-nav: 121px;
  --h-barre-mobile: 64px;

  /* Filet signature Nocturne : s'estompe sur 48 px à chaque extrémité. */
  --filet: linear-gradient(to right, transparent, var(--color-neutral-800) 48px,
    var(--color-neutral-800) calc(100% - 48px), transparent) no-repeat top / 100% 1px;
  --filet-bas: linear-gradient(to right, transparent, var(--color-neutral-800) 48px,
    var(--color-neutral-800) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Les composants ci-dessous imposent un « display », qui l'emporterait sur la
   feuille du navigateur : sans cette règle, un élément masqué par l'attribut
   « hidden » resterait visible. */
[hidden] { display: none !important; }

/* Un fieldset a une largeur minimale intrinsèque imposée par le navigateur :
   sans cette remise à zéro, il refuse de descendre sous la largeur de son
   contenu le plus large et fait déborder la page sur un petit écran. */
fieldset { min-width: 0; }
/* Aucun champ ne peut dépasser son conteneur, quelle que soit sa largeur
   intrinsèque (le sélecteur de fichiers en particulier). */
input, select, textarea, button { max-width: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-accent-900) 70%, transparent), transparent 60%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  /* Un mot plus long que la colonne (« перепрограммирование ») se coupe au lieu
     d'élargir la page ; sans effet sur les mots qui tiennent. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
/* Aucune marge sur un paragraphe ni sur un titre : tout l'espacement
   vertical est porté par le « gap » du conteneur. C'est ce qui rend le rythme
   prévisible et permet à un générateur de produire des pages cohérentes. */
p, ul, ol, dl, figure, blockquote { margin: 0; }

a { color: var(--color-accent-300); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-200); text-decoration: underline; }

img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.tnum { font-feature-settings: 'tnum' 1; }
.muet { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.lighten { mix-blend-mode: lighten; background-color: transparent; }

/* Longueur de ligne : au-delà de 75 caractères, l'œil perd le début de la
   ligne suivante. Les blocs de texte suivi sont bornés. */
.mesure { max-width: var(--mesure); }
.note { max-width: var(--mesure); font-size: 13px; line-height: 1.6; color: var(--color-neutral-300); }

/* lien d'évitement clavier */
/* Hors écran mais lisible par les lecteurs d'écran : le rognage plutôt qu'un
   « left: -9999px », qui en écriture de droite à gauche crée 10 000 px de
   défilement horizontal (mesuré sur les pages arabes). */
.hors-ecran {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saut-contenu {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 20;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-accent); border-radius: var(--radius-md);
}
.saut-contenu:focus {
  width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible;
  clip: auto; clip-path: none; inset-inline-start: 12px; top: 12px;
}

/* — filets qui s'estompent aux extrémités (signature Nocturne) — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--filet); }

/* — boutons : contour, jamais d'aplat — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 500; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; padding: 10px 14px;
  min-height: 40px; border-radius: var(--radius-md);
}
.btn:hover { text-decoration: none; }
.btn svg { display: block; flex: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
/* Appel à l'action d'urgence : même graisse et même épaisseur que le reste
   du système, seule la couleur signale la priorité. */
.btn-alerte { border: 1px solid var(--color-alerte); color: var(--color-alerte); }
.btn-alerte:hover { background: rgba(255, 216, 77, .14); color: var(--color-alerte); }
.btn-bloc { width: 100%; }
.btn-lg { font-size: 16px; padding: 14px 22px; min-height: 48px; }

/* — formulaires — */
.champ > label, .champ-titre {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.champ .facultatif { color: var(--color-neutral-500); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit;
  /* 16 px : en dessous, Safari sur iPhone zoome à chaque champ touché
     et ne revient pas. Le corps redescend à 14 px sur grand écran. */
  font-size: 16px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-600); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
input[type="range"] {
  accent-color: var(--color-accent); width: 100%;
  height: 44px; touch-action: pan-y;
}
input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }

/* Le sélecteur de fichiers natif est blanc et libellé en anglais : on le
   remet dans le système. */
.input[type="file"] { padding: 6px; display: flex; align-items: center; }
.input[type="file"]::file-selector-button {
  font: inherit; font-family: var(--font-heading); font-weight: 500; font-size: 14px;
  margin-right: 12px; padding: 9px 14px; min-height: 40px;
  color: var(--color-accent); background: transparent;
  border: 1px solid var(--color-accent); border-radius: var(--radius-md); cursor: pointer;
}
.input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* Case à cocher : la native est en noir et blanc purs, interdits par le
   système, et fait 13 px là où il en faut 24. */
input[type="checkbox"].case {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; flex: none; margin: 0;
  border: 1px solid var(--color-neutral-600); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer; position: relative;
}
input[type="checkbox"].case:hover { border-color: var(--color-accent); }
input[type="checkbox"].case:checked {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 25%, var(--color-surface));
}
input[type="checkbox"].case:checked::after {
  content: ''; position: absolute; left: 8px; top: 3px;
  width: 6px; height: 12px; border: solid var(--color-accent);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* choix cliquables (l'ordre des questions de l'assistant) */
.choix { display: flex; gap: 10px; flex-wrap: wrap; }
.choix input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.choix label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 500; font-size: 14px; line-height: 1.2;
  padding: 11px 16px; min-height: 44px;
  border: 1px solid var(--color-neutral-600); border-radius: var(--radius-md); color: var(--color-text);
}
.choix label:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.choix label:has(input:checked) { color: var(--color-accent); border-color: var(--color-accent); }
/* L'entrée réelle est masquée : c'est le libellé qui doit porter le focus,
   sans quoi la navigation au clavier se fait à l'aveugle. */
.choix label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (forced-colors: active) {
  .choix label:has(input:checked) { outline: 3px solid Highlight; outline-offset: 1px; }
  .choix label:has(input:focus-visible) { outline: 2px dashed CanvasText; outline-offset: 4px; }
  input[type="checkbox"].case:checked { outline: 3px solid Highlight; }
}

/* — cartes — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); margin: 0; }
.elev-md { box-shadow: var(--shadow-md); }

/* — étiquettes — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em;
  padding: 3px 10px; border-radius: var(--radius-sm);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }

/* — tableaux : filets de ligne qui s'estompent — */
.table-enveloppe {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Ombres de bord qui disparaissent en fin de course : sans elles, rien
     n'indique qu'un tableau plus large que l'écran peut défiler. */
  background:
    linear-gradient(to right, var(--color-bg) 30%, transparent) left / 40px 100% no-repeat,
    linear-gradient(to left, var(--color-bg) 30%, transparent) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .55), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .55), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table-enveloppe:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid transparent; white-space: nowrap;
}
.table td { padding: var(--space-2); border-bottom: 1px solid transparent; }
.table thead tr {
  background: linear-gradient(to right, transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr {
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr.sous-titre { background: none; }
.table .sous-titre td {
  padding-top: 18px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.table td a { display: inline-block; padding: 11px 0; }

/* ══ mise en page ══ */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.contenant { max-width: 1200px; width: 100%; margin-inline: auto; padding-inline: var(--gouttiere); }
/* Largeurs de page. Remplacent les « style="max-width:…" » portés jusqu'ici
   par la balise <main> de chaque document : une largeur de lecture se règle
   dans la feuille, pas dans le gabarit. */
.contenant-document { max-width: 920px; }
.contenant-etroit   { max-width: 760px; }
.pleine-largeur { width: 100%; }

/* — barre de navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--gouttiere);
  position: sticky; top: 0; z-index: 5;
  /* Fond opaque : sous un fond translucide, le « lighten » du logo se
     composait contre le calque de la barre et laissait un carré sombre. */
  background: var(--color-bg);
}
.nav-marque {
  display: flex; align-items: center; gap: 14px; color: inherit; padding: 8px 0; flex-shrink: 0;
  white-space: nowrap; font-family: var(--font-heading); font-weight: 500;
}
.nav-marque:hover { color: inherit; text-decoration: none; }
.nav-marque img { width: 88px; height: 88px; object-fit: contain; mix-blend-mode: lighten; }
.nav-marque span { text-transform: uppercase; letter-spacing: .08em; font-size: 17px; }
.nav-liens { display: flex; gap: var(--space-6); }
.nav-liens a { color: var(--color-text); font-size: 14px; padding: 10px 0; }
.nav-liens a:hover, .nav-liens a[aria-current="page"] { color: var(--color-accent); text-decoration: none; }
.nav-fin { margin-left: auto; display: flex; gap: var(--space-4); align-items: center; }

/* — titre de section (filet + majuscules) — */
.kicker {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent);
  margin: 0; display: flex; align-items: center; gap: 4px 12px;
  /* Sans ce retour à la ligne, le kicker est un conteneur flex d'une seule
     ligne : « Saint-Laurent-du-Var · Alpes-Maritimes » exigeait 322 px d'un
     bloc, pour 280 px utiles à 320 px de large, et poussait toute la page
     hors de l'écran. Un surtitre se plie, il ne force pas la largeur. */
  flex-wrap: wrap;
}
.kicker::before { content: ''; width: 44px; height: 1px; background: currentColor; flex: none; }

.section { padding-block: var(--rythme-section); display: grid; gap: 28px; }
.section-serree { padding-block: 0 var(--rythme-section); display: grid; gap: 28px; }
.bandeau {
  background: radial-gradient(900px 480px at 85% -30%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%), var(--color-section);
  padding-block: var(--rythme-section);
}

/* La barre de navigation est collante : sans cette marge, une ancre
   amènerait le haut de la section juste dessous, à demi masqué. */
[id] { scroll-margin-top: calc(var(--h-nav) + 8px); }

.titre-geant {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(42px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 0 -.05em; max-width: 14ch;
}
.titre-section {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.015em; line-height: 1.15; margin: 0;
}
/* Deux crans en dessous, pour les sous-sections : l'échelle vit ici, jamais
   dans un attribut « style » du HTML. */
.titre-section-md { font-size: clamp(22px, 2.2vw, 30px); }
.titre-section-sm { font-size: clamp(19px, 1.8vw, 24px); }
.titre-page {
  font-family: var(--font-heading); font-weight: 500;
  /* Plancher à 26 px, et non 34 : « Saint-Laurent-du-Var » est tenu en un
     seul mot par .insecable, il mesurait 331 px pour 280 px disponibles à
     320 px de large et poussait la page entière 157 px hors de l'écran. Un
     composé insécable fixe donc le plancher de l'échelle, pas l'inverse. */
  font-size: clamp(26px, 4.2vw + 12px, 60px);
  line-height: 1.08; letter-spacing: -.02em; margin: 0;
}
.chapo { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; max-width: 46ch; margin: 0; color: var(--color-neutral-200); }
/* Accueil : le titre et le chapeau courent jusqu'au bord droit du
   comparateur placé dessous (demande de François, 2026-09-13). */
.hero .titre-geant, .hero .chapo { max-width: none; }

/* Les pages légales portent une échelle plus sobre : ce sont des documents,
   pas des pages de conversion. */
.page-document .titre-page { font-size: clamp(26px, 3.2vw + 10px, 46px); }
.page-document .titre-section { font-size: clamp(18px, 1.8vw, 22px); }
.page-document .contenant p { max-width: var(--mesure); }

/* — comparateur avant / après — */
.comparateur { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1672 / 941; user-select: none; }
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur .avant { clip-path: inset(0 var(--reste, 20%) 0 0); }
.comparateur .barre {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 80%); width: 2px;
  background: var(--color-text); transform: translateX(-1px);
  box-shadow: 0 0 12px rgba(0, 0, 0, .6); pointer-events: none;
}
.comparateur .poignee {
  position: absolute; top: 50%; left: var(--pos, 80%); transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg);
  border: 1px solid var(--color-accent); display: flex; align-items: center; justify-content: center;
  color: var(--color-text); pointer-events: none; box-shadow: var(--shadow-md);
}
.comparateur input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  /* Sans cela, un balayage vertical pour faire défiler la page déplaçait
     le curseur au passage. */
  touch-action: pan-y;
}
.comparateur input[type="range"]:focus-visible ~ .poignee { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — grille des forfaits — */
.grille-tarifs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tarif { padding: 22px; display: grid; gap: 14px; border: 1px solid transparent; background: var(--color-surface); border-radius: var(--radius-md); }
/* L'emphase va au créneau que le visiteur paiera réellement, pas au forfait
   le plus cher. */
.tarif.est-maintenant {
  border-color: var(--color-accent-600);
  box-shadow: 0 0 0 1px var(--color-accent-500), 0 0 32px color-mix(in srgb, var(--color-accent) 26%, transparent);
}
.tarif.est-prioritaire {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: 48px; align-items: start;
  border-color: var(--color-accent-800);
  background: var(--color-surface);
}
.tarif.est-prioritaire .tarif-filet { grid-column: 2; }
.tarif-entete { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.tarif-nom { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-300); }
.tarif-total {
  font-family: var(--font-heading); font-weight: 500; font-size: clamp(38px, 4vw, 56px);
  letter-spacing: -.02em; line-height: 1; white-space: nowrap; font-feature-settings: 'tnum' 1;
  color: var(--color-accent-100);
}
.tarif-detail { display: grid; gap: 4px; font-size: 14px; }
.tarif-detail div { display: flex; justify-content: space-between; gap: 8px; }
.tarif-detail span:first-child { color: var(--color-neutral-300); }
.tarif-detail div > span:last-child { white-space: nowrap; }
.tarif-filet { height: 1px; background: linear-gradient(to right, var(--color-neutral-700), transparent); }

/* — liste des pannes — */
.panne {
  display: grid; grid-template-columns: 48px 72px minmax(0, 1fr);
  gap: 8px clamp(16px, 3vw, 40px); padding-block: 24px;
  /* « center » alignait chaque colonne indépendamment : le titre tombait au
     niveau de la deuxième ligne de son propre paragraphe. */
  align-items: start;
  background: var(--filet);
}
.panne > .numero { grid-column: 1; grid-row: 1; }
/* L'icône couvre les deux rangées : sinon elle impose sa hauteur de 72 px à
   la rangée du titre, qui se retrouve à 49 px de son paragraphe. */
.panne > picture { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.panne > h3 { grid-column: 3; grid-row: 1; }
.panne > p { grid-column: 3; grid-row: 2; max-width: var(--mesure); }
.panne img { width: 72px; height: 72px; object-fit: contain; border-radius: 50%; justify-self: center; }
.panne h3 { margin: 0; font-size: clamp(18px, 1.7vw, 22px); letter-spacing: -.01em; line-height: 1.3; }
.panne p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-300); }
.panne .numero { font-size: 14px; color: var(--color-accent); }

/* — rail horizontal (album) — */
.rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 8px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 clamp(280px, 30vw, 360px); scroll-snap-align: start; min-width: 0; }

/* — fil d'Ariane — */
.ariane { font-size: 13px; color: var(--color-neutral-400); display: flex; gap: 8px; flex-wrap: wrap; padding-block: 18px 0; }
.ariane a { color: var(--color-neutral-300); display: inline-block; padding-block: 3px; min-width: 24px; text-align: center; }
.ariane [aria-current="page"] { color: var(--color-neutral-500); }

/* — questions fréquentes — */
.faq { display: grid; gap: 2px; }
.faq details {
  background: var(--color-surface); border-radius: var(--radius-md); padding: 16px 20px;
  border: 1px solid transparent;
}
.faq details[open] { border-color: var(--color-neutral-800); }
.faq summary {
  cursor: pointer; font-family: var(--font-heading); font-weight: 500; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 44px; max-width: 72ch;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--color-accent); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--color-neutral-300); max-width: var(--mesure); }

/* — pied de page — */
.pied {
  padding-block: 24px 40px; padding-inline: var(--gouttiere);
  max-width: 1200px; width: 100%; margin-inline: auto; margin-top: auto;
  font-size: 13px; line-height: 1.7; color: var(--color-neutral-500);
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  background: var(--filet);
}
.pied a { color: var(--color-neutral-400); padding: 8px 0; }
.pied img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: lighten; }

/* — barre d'action fixe (mobile) — */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; display: none; gap: 8px;
  padding: 10px clamp(16px, 4vw, 24px);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--color-neutral-800); z-index: 6;
}
.barre-mobile .btn { min-height: 44px; }

/* Récapitulatif compact du prix, collé au-dessus de la barre d'action :
   sur mobile la carte complète tombe après les huit questions, et le client
   ne verrait jamais son prix changer pendant qu'il répond. */
.recap-mobile { display: none; }

/* — encart d'avertissement — */
.encart-alerte {
  border: 1px solid color-mix(in srgb, var(--color-alerte) 45%, transparent);
  background: color-mix(in srgb, var(--color-alerte) 7%, transparent);
  border-radius: var(--radius-md); padding: 16px 20px; display: grid; gap: 6px;
}
.encart-alerte strong { color: var(--color-alerte); font-weight: 500; }

/* — promesse commerciale mise en avant — */
.promesse {
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-md);
  padding: 20px 24px; display: grid; gap: 8px;
  background: color-mix(in srgb, var(--color-accent-900) 45%, transparent);
}
.promesse strong { font-family: var(--font-heading); font-weight: 500; font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -.01em; }
.promesse p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-200); max-width: var(--mesure); }

/* — bandeau de preuves — */
.preuves {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 28px;
  padding: 20px 0; background: var(--filet);
}
.preuves div { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--color-neutral-200); }
.preuves svg { flex: none; color: var(--color-accent); margin-top: 2px; }

/* — mention à compléter par le client (documents légaux) — */
.a-completer {
  background: color-mix(in srgb, var(--color-alerte) 22%, transparent);
  color: var(--color-alerte); padding: 1px 6px; border-radius: var(--radius-sm); font-style: normal;
}

/* ══ points de rupture ══ */
/* — menu repliable (tablette et mobile) —
   Un <details> : il s'ouvre sans script, au clavier comme au doigt. Sous
   1140 px les liens de la barre disparaissaient sans aucun remplaçant, et
   Pannes, Zones et Questions n'étaient plus atteignables que par le pied. */
.nav-menu { display: none; position: relative; margin-left: auto; }
.nav-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 8px 4px; border-radius: var(--radius-md);
  color: var(--color-text); font-size: 14px; user-select: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover, .nav-menu[open] summary { color: var(--color-accent); }
.nav-menu summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav-menu-icone {
  position: relative; width: 22px; height: 2px; background: currentColor; border-radius: 2px; flex: none;
}
.nav-menu-icone::before, .nav-menu-icone::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .18s ease, top .18s ease;
}
.nav-menu-icone::before { top: -7px; }
.nav-menu-icone::after { top: 7px; }
.nav-menu[open] .nav-menu-icone { background: transparent; }
.nav-menu[open] .nav-menu-icone::before { top: 0; transform: rotate(45deg); }
.nav-menu[open] .nav-menu-icone::after { top: 0; transform: rotate(-45deg); }
.nav-panneau {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 6;
  width: min(320px, calc(100vw - 2 * var(--gouttiere)));
  display: grid; gap: 2px; padding: 10px;
  background: var(--color-surface); border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .55);
}
.nav-panneau a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px;
  color: var(--color-text); font-size: 15px; border-radius: var(--radius-sm);
}
.nav-panneau a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); text-decoration: none; }
.nav-panneau a[aria-current="page"] { color: var(--color-accent); }
.nav-panneau .btn { justify-content: center; margin-top: 8px; }
/* Au-dessus de 720 px, le bouton d'action est déjà dans la barre : pas de doublon. */
@media (min-width: 721px) { .nav-panneau .btn { display: none; } }
/* — sélecteur de langue : même mécanique que le menu, visible à toute
   largeur ; les traductions ne se chargent qu'au clic (page dédiée). — */
.nav-langue { display: block; margin-left: auto; }
.nav-langue summary { gap: 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.nav-langue-code { font-family: var(--font-heading); font-weight: 500; }
.nav-panneau-langue { width: min(240px, calc(100vw - 2 * var(--gouttiere))); grid-template-columns: 1fr 1fr; }
.nav-panneau-langue a { min-height: 40px; font-size: 14px; }
.nav-panneau-langue a[aria-current="true"] { color: var(--color-accent); }
.nav-langue + .nav-menu { margin-left: 0; }
.pied-liens-langues { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pied-liens-langues a[aria-current="true"] { color: var(--color-text); }
/* Écriture de droite à gauche (arabe) : les positions absolues du
   comparateur et des panneaux suivent le sens de lecture. */
[dir="rtl"] .nav-panneau { right: auto; left: 0; }
[dir="rtl"] .nav-fin, [dir="rtl"] .nav-langue { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-langue + .nav-menu { margin-right: 0; }
[dir="rtl"] .ariane { flex-direction: row; }
[dir="rtl"] .tnum, [dir="rtl"] .tarif-total, [dir="rtl"] .apercu-prix, [dir="rtl"] .montant { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 1140px) {
  .nav-liens { display: none; }
  .nav-menu { display: block; }
  .nav-fin { margin-left: 0; }
  .nav-langue { margin-left: auto; }
}
@media (max-width: 1080px) {
  .grille-tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .panne { grid-template-columns: 32px 56px minmax(0, 1fr); }
  .panne img { width: 56px; height: 56px; }
  /* Le titre et sa description restent dans la même colonne, sinon leurs
     bords gauches se décalent de 80 px selon la largeur d'écran. */
  .panne > h3 { grid-column: 3; grid-row: 1; }
  .panne > p { grid-column: 3; grid-row: 2; }
  .tarif.est-prioritaire { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .tarif.est-prioritaire .tarif-filet { grid-column: auto; }
}
@media (max-width: 700px) {
  .grille-tarifs { grid-template-columns: minmax(0, 1fr); }
}

/* La compaction dépend aussi de la hauteur : en paysage sur téléphone,
   l'en-tête pleine taille mangeait un tiers de l'écran. */
@media (max-width: 720px), (max-height: 500px) {
  body { padding-bottom: calc(var(--h-barre-mobile) + 8px); }
  .barre-mobile { display: flex; }
  .sticky { position: static !important; }
  .nav-marque img { width: 56px; height: 56px; }
  /* La marque doit pouvoir se replier sur deux lignes : en arabe, à 414 px,
     le logo, le nom, la langue et le menu dépassaient de 23 px. */
  .nav-marque { flex-shrink: 1; min-width: 0; }
  .nav-marque span { font-size: 14px; white-space: normal; }
  h1 { font-size: 32px; }
  /* L'appel à l'action de l'en-tête ferait déborder la barre : sur mobile,
     c'est la barre fixe du bas qui le porte. */
  .nav-fin { display: none; }
  .nav-menu { margin-left: 0; }
  .nav-langue { margin-left: auto; }
  [dir="rtl"] .nav-langue { margin-left: 0; margin-right: auto; }
  .nav-menu-libelle { display: none; }
  .nav-langue summary { min-width: 0; padding-inline: 6px; }
  .nav { gap: var(--space-3); padding-block: var(--space-2); }
  :root { --h-nav: 89px; }

  /* Le formulaire tient sur une colonne : une piste minimale de 320 px
     débordait de l'écran à 320 px de large. */
  #form-demande { grid-template-columns: minmax(0, 1fr) !important; }

  /* Position fixe et non collante : dans la grille du formulaire, un
     élément collant ne peut apparaître qu'après la colonne des questions,
     donc jamais pendant la saisie. Il n'est révélé que lorsque le
     formulaire est réellement à l'écran. */
  .recap-mobile {
    position: fixed; left: 0; right: 0; bottom: var(--h-barre-mobile); z-index: 5;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px clamp(16px, 4vw, 24px);
    background: color-mix(in srgb, var(--color-section) 97%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 -1px 0 var(--color-accent-700);
    font-size: 14px; color: var(--color-neutral-200);
    transform: translateY(110%); transition: transform .18s ease;
  }
  .recap-mobile.est-visible { transform: translateY(0); }
  body:has(.recap-mobile.est-visible) { padding-bottom: calc(var(--h-barre-mobile) + 56px); }
  .recap-mobile .montant {
    font-family: var(--font-heading); font-weight: 500; font-size: 24px;
    letter-spacing: -.02em; white-space: nowrap; font-feature-settings: 'tnum' 1;
  }

  /* Première colonne figée : sans elle, le tableau défile et le lecteur
     perd de vue la prestation à laquelle correspond le prix. */
  .table th:first-child, .table td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--color-bg); max-width: 190px; white-space: normal;
  }
  .table th { white-space: normal; }
}

@media (max-height: 500px) { .nav { position: static; } }

@media (max-width: 400px) {
  .nav-marque { flex-shrink: 1; min-width: 0; }
  .nav-marque span { font-size: 13px; letter-spacing: .04em; }
}

@media (min-width: 835px) {
  .input { font-size: 14px; min-height: 40px; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .nav, .barre-mobile, .rail, .btn, .recap-mobile { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Une pastille de réponse longue ne peut pas rester insécable sur un petit
   écran : « Départ immédiat, je passe devant tout · 2 000 € » mesure 352 px
   et débordait à 320 et 360 px. */
@media (max-width: 520px) {
  .choix label { white-space: normal; text-align: left; }
}

/* Le curseur d'une glissière déborde de la moitié de sa largeur à chaque
   extrémité de la piste : sans ce retrait, la page défile de 2 à 3 px. */
input[type="range"] { width: calc(100% - 6px); margin-inline: 3px; }

/* Deux glissières côte à côte font 137 px chacune à 320 px : intenable au
   doigt pour dimensionner une ouverture. Elles passent l'une sous l'autre. */
@media (max-width: 520px) {
  #simulateur-neuf .champ { grid-column: 1 / -1; }
  #simulateur-neuf > div > div:last-child { grid-template-columns: minmax(0, 1fr) !important; }
}

/* — simulateur de store banne sur mesure (page tarifs) — */
.simulateur-store {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px; align-items: start; margin-top: 12px;
}
.simulateur-store-choix { display: grid; gap: 18px; }
.simulateur-store-choix .champ-titre { margin-bottom: 8px; }
.simulateur-store-choix .champ > .note { margin-top: 8px; }
.simulateur-store-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.champ-glissiere { display: grid; gap: 6px; font-size: 14px; color: var(--color-neutral-300); }
.champ-case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--color-neutral-300); cursor: pointer; }
.champ-case input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--color-accent); }
.simulateur-store-resultat { display: grid; gap: 6px; font-size: 15px; }
.texte-neutre { color: var(--color-neutral-300); }
.filet-carte { height: 1px; margin: 4px 0; background: linear-gradient(to right, transparent, var(--color-neutral-700) 24px calc(100% - 24px), transparent); }
.montant-total {
  font-family: var(--font-heading); font-weight: 500; font-size: 28px;
  letter-spacing: -.01em; white-space: nowrap;
}
.simulateur-store .card .note.erreur { color: var(--color-alerte); }
.simulateur-store-note { margin-top: 18px; }
/* — choix du moteur de store dans le formulaire de demande — */
.choix-moteur { display: grid; gap: 8px; padding-top: 4px; }
.choix-moteur .champ-titre { margin-bottom: 2px; }
@media (max-width: 520px) {
  .simulateur-store-dimensions { grid-template-columns: minmax(0, 1fr); }
}

/* Accès discret au back-office depuis le pied de page : présent pour
   l'artisan, effacé pour le visiteur, et jamais suivi par les robots. */
.pied .lien-pro { margin-left: auto; color: var(--color-neutral-600); font-size: 12px; }
.pied .lien-pro:hover { color: var(--color-accent-300); }

/* ══════════════════════════════════════════════════════════════════════════
   Éléments natifs : sans ces règles, le navigateur les dessine pour un fond
   clair et ils apparaissent en blanc au milieu d'une page sombre.
   ══════════════════════════════════════════════════════════════════════════ */

/* Indique au navigateur que la page est sombre : il adapte alors ses propres
   widgets, ses barres de défilement et ses menus. */
:root { color-scheme: dark; }

/* Glissières : la piste native rendait un blanc pur sur le fond sombre. */
input[type="range"] {
  appearance: none; -webkit-appearance: none; background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--radius-sm); background: var(--color-neutral-800);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: var(--radius-sm); background: var(--color-neutral-800);
}
input[type="range"]::-moz-range-progress {
  height: 4px; border-radius: var(--radius-sm); background: var(--color-accent);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: var(--color-bg); border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-bg); border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}
input[type="range"]:hover::-webkit-slider-thumb { background: var(--color-accent-900); }
input[type="range"]:hover::-moz-range-thumb { background: var(--color-accent-900); }
/* Le comparateur superpose une glissière transparente sur la photo. */
.comparateur input[type="range"]::-webkit-slider-thumb { opacity: 0; }
.comparateur input[type="range"]::-moz-range-thumb { opacity: 0; }

/* Remplissage automatique de Chrome : il peignait un bleu très clair avec un
   texte noir sur trois champs du formulaire. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-accent);
  box-shadow: inset 0 0 0 1000px var(--color-surface);
  transition: background-color 5000s ease-in-out 0s;
}

.input::placeholder { color: var(--color-neutral-500); opacity: 1; }

/* ── états manquants sur les éléments interactifs ── */

/* Un bloc dépliable avec un curseur « main » mais aucun retour au survol. */
.faq summary { border-radius: var(--radius-md); padding-inline: 4px; margin-inline: -4px; }
.faq summary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.faq summary:hover::after { color: var(--color-accent-200); }
.faq summary:active { background: color-mix(in srgb, var(--color-text) 11%, transparent); }
.faq details[open] summary { color: var(--color-accent-200); }

/* Le survol de ligne de Nocturne n'avait pas été repris : cinq tableaux dont
   quatre portent des liens. */
.table tbody tr:hover {
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right, transparent,
      color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent)
      no-repeat bottom / 100% 1px;
}

/* Le bouton jaune, le plus cliqué du site, ne réagissait pas au clic. */
.btn-alerte:hover { background: color-mix(in srgb, var(--color-alerte) 12%, transparent); }
.btn-alerte:active { background: color-mix(in srgb, var(--color-alerte) 22%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.choix label:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* L'anneau de focus du bouton primaire avait exactement la couleur de sa
   propre bordure : invisible au clavier. */
.btn-primary:focus-visible,
.choix label:has(input:focus-visible) {
  outline: 2px solid var(--color-accent-200);
  outline-offset: 3px;
}

/* Le filet d'une carte s'arrêtait net contre son bord gauche. 24 px et non
   48 : dans une carte de 360 px, le fondu long mangerait le quart du trait. */
.tarif-filet {
  height: 1px;
  background: linear-gradient(to right, transparent,
    var(--color-neutral-700) 24px, var(--color-neutral-700) calc(100% - 24px), transparent);
}

/* Un choix multiple doit se distinguer d'un choix unique : sans cette coche,
   rien n'annonce que la question des symptômes accepte plusieurs réponses. */
.choix-multiple label::before {
  content: ''; width: 16px; height: 16px; flex: none;
  border: 1px solid currentColor; border-radius: var(--radius-sm);
}
.choix-multiple label:has(input:checked)::before {
  background: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-bg), inset 0 0 0 8px var(--color-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Titres : coupure, équilibrage et alignement optique.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le navigateur répartit le texte sur ses lignes au lieu de remplir la
   première à 99 % puis de laisser un moignon en dessous. */
.titre-geant, .titre-page, .titre-section, .titre-section-md, .titre-section-sm,
.card h2, .card h3, .panne h3, .faq summary, .promesse strong {
  text-wrap: balance;
}

/* Un titre est borné par sa mesure, jamais par un « max-width » écrit dans le
   HTML : cinq titres cassaient en deux lignes alors qu'il restait jusqu'à
   65 % de place libre à leur droite. */
.titre-section { max-width: 42ch; }
.titre-section-md, .titre-section-sm { max-width: 46ch; }
.titre-page { max-width: 32ch; }
.page-document .titre-page { max-width: 22ch; }

/* Indentation optique : le premier caractère d'un titre en chasse serrée
   paraît en retrait par rapport au paragraphe qu'il coiffe. La compensation
   existait sur le titre d'accueil ; elle vaut pour tous les rangs. */
.titre-page, .titre-section, .titre-section-md, .titre-section-sm {
  margin-inline-start: -.05em;
}

/* Composés que la coupure ne doit jamais séparer : « Saint-Laurent-du-Var »
   se cassait au trait d'union à toutes les largeurs. Le trait d'union
   insécable U+2011 est absent d'Inter — il s'afficherait dans une autre
   police, d'où cette classe plutôt qu'un caractère. */
.insecable { white-space: nowrap; }

/* Écart titre → texte : quatre paliers, adossés à la taille du titre. */
.titre-geant + *, .titre-page + * { margin-top: 24px; }
.titre-section + * { margin-top: 16px; }
.titre-section-md + *, .titre-section-sm + * { margin-top: 12px; }

/* Deux colonnes voisines dont l'une est une carte : la colonne nue reçoit le
   même retrait haut, sinon les premières lignes se ratent de 24 px. */
.aligne-carte { padding-block-start: 24px; }
@media (max-width: 900px) { .aligne-carte { padding-block-start: 0; } }

/* Les paragraphes d'une carte suivent la mesure commune. */
.card p { max-width: var(--mesure); }

/* L'encart d'avertissement partage la géométrie de la carte : ils se
   côtoient dans le guide et se décalaient de 5 px sur les titres. */
.encart-alerte { padding: 22px; gap: 8px; }
.encart-alerte strong {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(19px, 1.8vw, 22px); line-height: 1.25; letter-spacing: -.01em;
}

/* Étiquette « prioritaire » collée à son libellé plutôt que rejetée à
   135 px de là, au bord d'une colonne large. */
.tarif.est-prioritaire .tarif-entete { justify-content: flex-start; gap: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   Finition : transitions, états, chiffres.
   ══════════════════════════════════════════════════════════════════════════ */

/* Vingt états de survol étaient déclarés, aucune transition : chaque bouton
   changeait de couleur d'un coup sec. C'est le détail qui sépare le plus
   « correct » de « soigné ». */
.btn, .choix label, .card, .faq summary, .table tbody tr, .pro-chiffre,
.tarif, .planning-bloc-modifier, .input, a {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .btn, .choix label, .card, .faq summary, .table tbody tr, .pro-chiffre,
  .tarif, .planning-bloc-modifier, .input, a { transition: none; }
}

/* Le site est truffé d'ancres ; chacune produisait un saut brutal. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Une pastille sélectionnée était MOINS contrastée que ses voisines : contour
   et texte bleus contre contour gris et texte blanc. Contresens visuel sur le
   composant central du site. La maquette validée portait ce fond. */
.choix label:has(input:checked) {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-200);
  border-color: var(--color-accent);
}

/* Deux informations de nature opposée portaient le même bleu : le créneau en
   cours (neutre) et l'urgence absolue à 2 000 € (exception coûteuse). */
.tarif.est-prioritaire .tag {
  background: color-mix(in srgb, var(--color-alerte) 18%, transparent);
  color: var(--color-alerte);
}

/* Le « + » se plantait à 63 % de la largeur, laissant 440 px de vide : il ne
   lisait ni comme aligné à droite ni comme aligné sur une colonne. */
.faq summary { max-width: 100%; min-width: 0; gap: 24px; }
.faq summary > span:first-child { max-width: var(--mesure); min-width: 0; }
.faq details { min-width: 0; }

/* Les montants dansaient d'une ligne à l'autre dans les colonnes empilées. */
.tarif-total, .tarif-detail, .table td, .table th,
.pro-chiffre-valeur, [data-est-total], [data-est-forfait], [data-est-deplacement],
[data-neuf-total], [data-neuf-fourniture], [data-neuf-pose], .montant {
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* Les sur-titres en petites capitales transformaient les unités :
   « 1,7 m² » devenait « 1,7 M² », soit des mégamètres carrés. */
.card-kicker .unite, .kicker .unite, .tarif-nom .unite { text-transform: none; }

/* Une carte qui ne mène nulle part ne doit pas ressembler à une carte
   cliquable : la maquette la dessinait en contour tireté, sans fond. */
.card-avenir {
  background: transparent;
  border: 1px dashed var(--color-neutral-700);
}

/* Contrôles natifs restants. Le libellé du navigateur reste visible : il
   indique le nom du fichier choisi, information utile au client. */
textarea.input { resize: vertical; }
.input[type="file"] { font-size: 13px; color: var(--color-neutral-300); }

/* ══════════════════════════════════════════════════════════════════════════
   Pied de page : pour un artisan joignable 24h/24, c'est un signal de
   légitimité. Il ne pesait qu'une ligne.
   ══════════════════════════════════════════════════════════════════════════ */
.pied {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
  align-items: start;
  padding-block: 40px 48px;
}
.pied-bloc { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pied-titre {
  font-family: var(--font-heading); font-weight: 500; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-400);
  margin: 0;
}
.pied-marque { display: flex; align-items: center; gap: 12px; }
.pied-marque img { width: 48px; height: 48px; object-fit: contain; mix-blend-mode: lighten; }
.pied-marque span {
  font-family: var(--font-heading); font-weight: 500; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-text);
}
.pied p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-neutral-400); max-width: 42ch; }
.pied a { color: var(--color-neutral-300); font-size: 13px; padding-block: 4px; }
.pied a:hover { color: var(--color-accent-300); }
.pied-liens { display: grid; gap: 2px; }
.pied .pied-tel a { font-size: 17px; font-weight: 500; letter-spacing: .02em; color: var(--color-text); }
.pied-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }

/* — aperçu des pannes sur l'accueil : un rang par panne, cause à droite — */
.liste-pannes { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.liste-pannes li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px;
  justify-content: space-between; padding-block: 14px; background: var(--filet);
}
.liste-pannes li:first-child { background: none; }
.liste-pannes a { font-size: 16px; color: var(--color-text); }
.liste-pannes a:hover { color: var(--color-accent-300); }
.liste-pannes span { font-size: 13px; color: var(--color-neutral-400); }

/* ══ Classes engendrées par outils/generer-pages.py ══
   Ces sélecteurs remplacent les attributs « style » que portaient les cartes
   tarifaires écrites à la main. Le générateur ne produit que des classes :
   une décision de mise en forme ne doit jamais revenir dans le HTML. */
.tarif-montant { display: grid; gap: 4px; }
.tarif-heures  { font-size: 13px; color: var(--color-neutral-300); }
.tarif-colonne { display: grid; gap: 14px; min-width: 0; align-content: start; }
.rang-prix     { display: grid; gap: 2px; padding-block: 8px; background: var(--filet-bas); }
/* Le lien « simulateur ↓ » d'un rang tient dans une ligne de 13 px : on lui
   donne 24 px de cible tactile sans toucher la hauteur de ligne. */
.rang-prix .texte-sm a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.nowrap        { white-space: nowrap; }
.droite        { text-align: right; }
.vide          { text-align: right; color: var(--color-neutral-400); }
.apercu-tarif  { display: grid; gap: 6px; align-content: start; }
.apercu-prix   { font-family: var(--font-heading); font-weight: 500;
                 font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em;
                 color: var(--color-accent-100); white-space: nowrap; }
.pied-bas {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px;
  align-items: center; justify-content: space-between;
  padding-top: 24px; background: var(--filet);
  font-size: 12px; color: var(--color-neutral-500);
}
.pied .lien-pro { margin-left: 0; color: var(--color-neutral-500); font-size: 12px; }
.pied .lien-pro:hover { color: var(--color-accent-300); }

@media (max-width: 900px) {
  .pied { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied-bloc:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pied { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pied-bas { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* La barre de navigation est enveloppée dans un <header> : c'est lui qui
   porte le point de repère « banner » et le comportement collant. */
.entete { position: sticky; top: 0; z-index: 5; background: var(--color-bg); }
.entete .nav { position: static; }

/* Le pied porte la marque simplifiée : le logo complet réduit rendait son
   lettrage illisible. */
.pied-marque img { width: 52px; height: 52px; }

/* Dans un tableau de prix, la valeur ne peut pas avoir la même taille ni la
   même graisse que son libellé : à 14/14, l'œil parcourait 700 px de vide
   sans savoir ce qu'il cherchait. */
.table td:not(:first-child) { font-size: 17px; font-weight: 500; }
.table .sous-titre td { font-size: 15px; color: var(--color-accent); font-weight: 500; }

/* Un intertitre ne peut pas être plus petit que les lignes qu'il coiffe. */
.tarif-nom { font-size: 11px; }

/* Le jeton de mesure n'était pas câblé sur les réponses des pages ville et
   guide : elles tenaient encore 120 caractères par ligne. */
.faq details p, .faq details li { max-width: var(--mesure); }

/* Le jaune est réservé à l'urgence : une mention de rédaction en pied de page
   n'en relève pas. */
.pied .a-completer {
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  color: var(--color-neutral-400);
}

/* L'étiquette « prioritaire » en contour plutôt qu'en aplat, conformément au
   système : le jaune plein rendait terne. */
.tarif.est-prioritaire .tag {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-alerte) 60%, transparent);
  color: var(--color-alerte);
}

/* ══════════════════════════════════════════════════════════════════════════
   SYSTÈME DE MISE EN PAGE
   Ce bloc remplace les attributs « style » écrits dans le HTML. Trois experts
   ont désigné ces 581 attributs comme le plafond commun de leurs notes : ils
   échappent aux requêtes média et rendent impossible la génération de pages.

   Principe : aucune marge sur un titre ni sur un paragraphe. Tout l'espacement
   vertical est porté par le « gap » du conteneur.
   ══════════════════════════════════════════════════════════════════════════ */

/* — l'espacement vient du conteneur, jamais de l'élément — */
.pile > *, .pile-texte > *, .pile-large > *, .pile-serree > *,
.card > *, .grille > * { margin: 0; }

.pile        { display: grid; gap: 12px; }   /* titre + son texte      */
.pile-texte  { display: grid; gap: 16px; }   /* paragraphes suivis     */
.pile-serree { display: grid; gap: 8px; }    /* lignes d'une carte     */
.pile-large  { display: grid; gap: 28px; }   /* en-tête + contenu      */

/* Une pile ne répartit JAMAIS la hauteur en trop entre ses éléments. Sans
   cette ligne, une colonne étirée pour égaler sa voisine gonfle chacune de
   ses rangées : le titre « Règles simples » mesurait 41 px contre 27 px pour
   celui d'en face, et le premier paragraphe des deux colonnes se ratait de
   15 px. L'espace en trop se met en bas, il ne se distribue pas. */
.pile, .pile-texte, .pile-serree, .pile-large { align-content: start; }

/* — quatre dispositions de colonnes, et rien d'autre —
   « repeat(auto-fit, minmax(…)) » est proscrit : il produit des pistes
   fractionnaires (346,656 contre 346,672 px) et des rangées orphelines
   imprévisibles selon le nombre d'éléments injectés. */
.grille        { display: grid; gap: 16px 40px; align-items: start; }
.grille-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-aside  { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grille-media  { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }

/* Colonnes d'une même rangée : leurs lignes s'alignent par la grille parente
   plutôt qu'en réservant une hauteur fixe à chaque titre, ce qui allongeait
   la page sans raison quand le titre tenait sur une ligne.
   Ce bloc suit .grille à dessein : « align-items: start » y est le bon
   réglage pour des colonnes de texte nu, mais il empêchait les cartes — qui
   ont un fond visible — de descendre à la même hauteur ; trois cartes de
   villes finissaient à 83 px d'écart. Le nombre de rangs se règle par
   --rangs, sans quoi une carte à quatre éléments déborde de la subgrille. */
.grille-cartes { align-items: stretch; }
.grille-cartes > * {
  grid-row: span var(--rangs, 3);
  display: grid;
  grid-template-rows: subgrid;
  align-content: start;
}
.rangs-2 { --rangs: 2; }
.rangs-4 { --rangs: 4; }
.rangs-5 { --rangs: 5; }
@supports not (grid-template-rows: subgrid) {
  .grille-cartes > * { grid-row: auto; display: grid; }
  .grille-cartes > * > h2, .grille-cartes > * > h3 { min-block-size: 2.5em; }
}
@media (max-width: 700px) {
  .grille-cartes > * { grid-row: auto; grid-template-rows: none; }
}

@media (max-width: 1140px) { .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grille-3, .grille-aside, .grille-media { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px)  { .grille-2, .grille-4 { grid-template-columns: minmax(0, 1fr); } }

/* — rangs de texte : six tailles, et rien d'autre — */
.texte      { font-size: 15px; line-height: 1.7; color: var(--color-neutral-200); max-width: var(--mesure); }
.texte-sm   { font-size: 14px; line-height: 1.65; color: var(--color-neutral-300); max-width: var(--mesure); }
.fort-accent { font-weight: 500; color: var(--color-accent-300); }
.titre-carte{ font-family: var(--font-heading); font-weight: 500; font-size: clamp(18px, 1.7vw, 20px);
              line-height: 1.25; letter-spacing: -.01em; }
.fort       { font-weight: 500; color: var(--color-text); }
.accent     { color: var(--color-accent-300); font-weight: 500; }

/* — lignes de valeur : un libellé à gauche, un montant à droite — */
/* flex-wrap : un montant en 28 ou 34 px (« a partir de 500 € », « 720 – 800 € »)
   passe sous son libellé quand la carte fait 280 px, au lieu d'élargir la page. */
.ligne      { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.ligne > :first-child { color: var(--color-neutral-300); min-width: 0; flex: 1 1 auto; }
/* Le libellé se replie, le montant jamais : à 320 px, « Оценка с установкой »
   et son montant élargissaient la carte du simulateur de 5 px. */
.ligne > :last-child  { flex: 0 0 auto; margin-inline-start: auto; }
.ligne > :last-child  { white-space: nowrap; font-feature-settings: 'tnum' 1; }
/* Le prix d'une option peut être une phrase (« 0 – 1 200 € ou devis », plus
   long encore en allemand) : il se replie sur deux lignes, aligné à droite,
   au lieu d'élargir la carte au-delà de l'écran. */
.ligne > [data-est-option-prix] { white-space: normal; text-align: end; max-width: 62%; }

/* — les tableaux alignent leurs valeurs à droite par nature — */
.table td:not(:first-child), .table th:not(:first-child) { text-align: right; }
.table .sous-titre td { text-align: left; }

/* — la carte a trois dessins, pas sept — */
.card       { padding: 22px; gap: 8px; align-content: start; }
.card-lg    { padding: 24px; gap: 16px; }
.card-media { padding: 0; gap: 0; overflow: hidden; }

/* — utilitaires de composition, bornés — */
.rangee     { display: flex; gap: 16px 32px; flex-wrap: wrap; align-items: center; }
.rangee-fin { justify-content: space-between; }
.centre     { align-items: center; }

/* Conteneurs de texte qui n'ont pas de « gap » propre : on leur en donne un,
   sans quoi les paragraphes se collent une fois leurs marges retirées. */
.section > div:not([class]), .section-serree > div:not([class]),
.card > div:not([class]), .promesse, .encart-alerte, .pro-estimation,
.faq details, article > div:not([class]) {
  display: grid;
  gap: 12px;
  align-content: start;
}
.faq details { align-content: initial; }
.faq details p:first-of-type { margin-top: 0; }

/* Les listes gardent leur retrait mais pas leur marge. */
ul:not([class]), ol:not([class]) { padding-left: 22px; display: grid; gap: 12px; }

/* — listes de contenu et d'engagements — */
.liste-simple { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--color-neutral-200); }
.liste-coches { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--color-neutral-300); }
.liste-coches li { display: flex; gap: 8px; align-items: flex-start; }
.liste-coches li::before { content: '✓'; color: var(--color-accent); font-weight: 500; flex: none; }
.confiance-ligne {
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13px; color: var(--color-neutral-300);
}
.confiance-ligne li { display: flex; gap: 6px; align-items: baseline; }
.confiance-ligne li::before { content: '✓'; color: var(--color-accent-300); }

/* — aperçu des photos choisies : sans lui, « 3 fichiers » ne rassure personne — */
.photos-apercu { display: flex; flex-wrap: wrap; gap: 8px; }
.photos-apercu img {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-700); background: var(--color-surface);
}

/* — sur la page de demande, la barre d'action générale (« Décrire ma panne »)
     n'a plus de sens : le récapitulatif de prix prend sa place et porte
     le bouton d'envoi — */
.recap-mobile .btn { min-height: 44px; padding-inline: 18px; flex: none; }
.recap-mobile .recap-libelle { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px), (max-height: 500px) {
  body:has(#form-demande) .barre-mobile { display: none; }
  body:has(#form-demande) { padding-bottom: 8px; }
  body:has(#form-demande) .recap-mobile { bottom: 0; z-index: 6; box-shadow: 0 -1px 0 var(--color-neutral-800); }
  body:has(#form-demande):has(.recap-mobile.est-visible) { padding-bottom: 76px; }
}
@media (max-width: 359px) { .recap-mobile .recap-libelle { display: none; } }