/* ===========================================================================
 * Chemin : /assets/css/style.css
 *
 * Feuille unique du site. Aucun framework, aucune étape de build.
 * Conception mobile d'abord : les styles de base décrivent le mobile,
 * les media queries ajoutent les paliers 640, 900 et 1200 px.
 *
 * Plan du fichier
 *   1.  Jetons          variables extraites de la maquette
 *   2.  Base            réinitialisation, typographie, accessibilité
 *   3.  Mise en page    conteneurs, sections, grilles
 *   4.  Boutons
 *   5.  En-tête et navigation
 *   6.  Héros
 *   7.  Réassurance
 *   8.  Prestations
 *   9.  Dépannage
 *   10. Tarifs
 *   11. Marques agréées
 *   12. Zone d'intervention
 *   13. Contact
 *   14. Pied de page
 *   15. Barre d'appel mobile
 *   16. Formulaire
 *   17. Composants réservés aux pages de la phase 2
 *   18. Paliers responsives
 *   19. Préférences utilisateur et impression
 * ======================================================================== */

@import url("polices.css");

/* ===========================================================================
 * 1. JETONS
 *
 * Valeurs relevées au pixel près dans le bloc <style> et les styles en ligne
 * de la maquette. Rien n'est approximé : modifier une valeur ici la propage
 * partout.
 * ======================================================================== */

:root {
    /* --- Couleurs de fond et d'encre --------------------------------- */
    --c-fond:            #ffffff;
    --c-surface:         #f4f4f4;   /* fond des blocs secondaires */
    --c-encre:           #111111;   /* texte principal ET filets structurels */
    --c-texte:           #2c2926;   /* paragraphes */
    --c-texte-doux:      #55504d;   /* méta, étiquettes, légendes */
    --c-filet-clair:     #d7d3d3;   /* séparateur interne sur fond clair */

    /* --- Accent rouge de la charte ------------------------------------ */
    --c-accent:          #C0392B;
    --c-accent-fonce:    #a52f23;   /* survol et appui */

    /* --- Bleu-acier : réservé à l'univers PAC et climatisation --------- */
    --c-acier:           #2F5D75;
    --c-acier-fonce:     #244a5e;

    /* --- Déclinaisons sur fond sombre ---------------------------------- */
    --c-sur-sombre:          #ffffff;
    --c-sur-sombre-doux:     #cfcac7;
    --c-sur-sombre-meta:     #c9c4c1;
    --c-sur-sombre-note:     #a29d9a;
    --c-sur-sombre-tenu:     #8f8a87;
    --c-filet-sombre:        #3a3634;
    --c-filet-sombre-fin:    #2c2926;

    /* --- Typographie --------------------------------------------------- */
    --f-titre: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
    --f-corps: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fw-titre:   700;
    --fw-menu:    600;
    --fw-appui:   600;   /* mises en évidence dans le corps de texte */

    /* Échelle de titres — mobile d'abord, redéfinie au palier 900 px */
    --t-h1:       32px;
    --t-h1-lh:    1.0;
    --t-h2:       27px;
    --t-h3:       22px;
    --t-corps:    17px;
    --t-corps-lh: 1.5;
    --t-menu:     15px;
    --t-bouton:   19px;
    --t-surtitre: 11px;  /* kicker : PAC, Climatisation, Chauffage… */
    --t-baseline: 11px;  /* baseline de l'en-tête — fixe à tous les paliers */
    --t-etiquette:12px;  /* libellé de colonne en capitales espacées */
    --t-meta:     15px;
    --t-note:     14px;
    --t-prix-fort:38px;  /* montant des contrats annuels */
    --t-prix:     20px;  /* montant des forfaits */

    --ls-titre:    -0.01em;
    --ls-surtitre:  0.12em;
    --ls-etiquette: 0.14em;
    --ls-bouton:    0.03em;
    --ls-menu:      0.02em;

    /* --- Trames et filets ----------------------------------------------- */
    --filet:        2px solid var(--c-encre);
    --filet-clair:  1px solid var(--c-filet-clair);
    --filet-sombre: 1px solid var(--c-filet-sombre);

    /* Aucun arrondi dans cette charte : angles vifs partout. */
    --rayon: 0;

    /* --- Espacements ----------------------------------------------------- */
    --pas-1:  4px;
    --pas-2:  8px;
    --pas-3:  12px;
    --pas-4:  16px;
    --pas-5:  20px;
    --pas-6:  24px;
    --pas-8:  32px;
    --pas-10: 40px;
    --pas-12: 48px;

    /* Marge intérieure des sections : 16 px en mobile, 48 px en desktop. */
    --marge-section:  16px;
    --marge-verticale: 20px;

    /* Gouttière entre les colonnes du bandeau de réassurance. Les cellules
       n'ont AUCUNE marge intérieure horizontale : le texte tombe donc pile
       sur la marge du conteneur, comme dans toutes les autres sections. Les
       filets de séparation sont tracés au milieu de cette gouttière. */
    --gouttiere-reassurance: 0px;

    /* --- Gabarit ---------------------------------------------------------- */
    --largeur-site: 1440px;
    --largeur-lecture: 70ch;   /* confort de lecture des pages rédactionnelles */

    /* Hauteur de la barre d'appel collante. La réserve appliquée au bas du
       <body> vaut cette hauteur, plus son filet supérieur de 2 px, plus la
       zone sûre des écrans à encoche, plus une respiration : sans quoi la
       barre viendrait mordre sur le bloc d'action du pied de page. */
    --h-barre-appel: 56px;
    --reserve-barre-appel: calc(
        var(--h-barre-appel) + 2px + var(--pas-4) + env(safe-area-inset-bottom, 0px)
    );

    /* Cible tactile minimale imposée par l'accessibilité. */
    --cible-tactile: 44px;
}

/* ===========================================================================
 * 2. BASE
 * ======================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Décale les ancres sous l'en-tête collant. */
    scroll-padding-top: var(--pas-6);
}

body {
    margin: 0;
    background: var(--c-fond);
    color: var(--c-encre);
    font-family: var(--f-corps);
    font-size: var(--t-corps);
    line-height: var(--t-corps-lh);
    font-weight: 400;
    /* Place pour la barre d'appel collante en mobile. */
    padding-bottom: var(--reserve-barre-appel);
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    line-height: 1.1;
    letter-spacing: var(--ls-titre);
    margin: 0;
    text-wrap: pretty;
}

h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); text-transform: uppercase; }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 var(--pas-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-fonce); text-decoration: underline; }

strong, b { font-weight: var(--fw-appui); }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0 0 var(--pas-3); padding-left: 1.25em; }
li { margin-bottom: var(--pas-1); }

figure { margin: 0; }

address { font-style: normal; }

table { border-collapse: collapse; width: 100%; }

/* --- Accessibilité : focus toujours visible ---------------------------- */
:focus { outline: none; }

:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* Sur fond rouge ou sombre, un contour rouge serait invisible. */
.est-sombre :focus-visible,
.bouton--primaire:focus-visible,
.entete__appel:focus-visible,
.barre-appel a:focus-visible {
    outline-color: #ffffff;
}

::selection {
    background: var(--c-accent);
    color: #ffffff;
}

/* --- Lien d'évitement ---------------------------------------------------- */
.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--pas-3) var(--pas-4);
    background: var(--c-encre);
    color: #ffffff;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    text-transform: uppercase;
}

.lien-evitement:focus {
    left: 0;
    color: #ffffff;
    text-decoration: none;
}

/* --- Cibles tactiles ------------------------------------------------------
   Tout lien autonome doit offrir au moins 44 px de hauteur au doigt.
   Les liens insérés au fil d'un paragraphe en sont volontairement exclus :
   la règle 2.5.8 des WCAG les dispense, et les agrandir disloquerait
   l'interlignage du texte courant.

   La contrainte est levée au palier 900 px, où l'on retrouve l'interlignage
   serré de la maquette desktop. */
.prestation__titre a,
.lien-action,
.contact__numero,
.contact__email,
.pied__liste a,
.pied address a,
.fil-ariane a {
    display: flex;
    align-items: center;
    min-height: var(--cible-tactile);
}

/* --- Réservé aux lecteurs d'écran --------------------------------------- */
.visuellement-cache {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===========================================================================
 * 3. MISE EN PAGE
 * ======================================================================== */

/* Chaque section saigne sur toute la largeur ; le contenu est borné à
   1440 px et centré. Sur écran large les bandes sombres continuent donc
   jusqu'aux bords, ce qui reste fidèle à l'intention de la maquette. */
.conteneur {
    width: 100%;
    max-width: var(--largeur-site);
    margin-inline: auto;
}

.section {
    border-bottom: var(--filet);
}

.section__interieur {
    padding: var(--marge-verticale) var(--marge-section);
}

/* Variante à fond sombre : la classe pilote aussi la couleur du focus. */
.est-sombre {
    background: var(--c-encre);
    color: var(--c-sur-sombre);
}

.est-sombre a { color: var(--c-sur-sombre-meta); }
.est-sombre a:hover { color: #ffffff; }

/* En-tête de section : titre à gauche, complément à droite. */
.section__entete {
    padding-bottom: var(--pas-3);
    border-bottom: var(--filet);
    margin-bottom: var(--pas-4);
}

.section__complement {
    display: none;
    font-size: 16px;
    color: var(--c-texte-doux);
}

/* --- Surtitres et étiquettes -------------------------------------------- */
.surtitre {
    font-size: var(--t-surtitre);
    font-weight: var(--fw-appui);
    letter-spacing: var(--ls-surtitre);
    text-transform: uppercase;
}

.surtitre--pac      { color: var(--c-acier); }
.surtitre--chauffage{ color: var(--c-accent); }

.etiquette {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-etiquette);
    letter-spacing: var(--ls-etiquette);
    text-transform: uppercase;
    color: var(--c-texte-doux);
}

.etiquette--pac       { color: var(--c-acier); }
.etiquette--chauffage { color: var(--c-accent); }
.etiquette--sombre    { color: var(--c-sur-sombre-doux); }

/* Pastille pleine : « Pompe à chaleur · Climatisation », « Dépannage ». */
.pastille {
    display: inline-block;
    padding: 5px 8px;
    font-size: var(--t-surtitre);
    font-weight: var(--fw-appui);
    letter-spacing: var(--ls-surtitre);
    text-transform: uppercase;
    color: #ffffff;
}

.pastille--pac       { background: var(--c-acier); }
.pastille--chauffage { background: var(--c-accent); }

.note {
    font-size: var(--t-note);
    line-height: 1.45;
    color: var(--c-texte-doux);
}

/* --- Utilitaires d'espacement -------------------------------------------
   Réservés aux quelques réglages ponctuels de gabarit. Ils évitent tout
   attribut style= en ligne, que la CSP du .htaccess interdit. */
.espace-haut-4 { margin-top: var(--pas-4); }
.espace-haut-5 { margin-top: var(--pas-5); }
.bloc-etroit   { max-width: 46rem; }

.est-sombre .note { color: var(--c-sur-sombre-note); }

/* ===========================================================================
 * 4. BOUTONS
 * ======================================================================== */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--pas-2);
    min-height: var(--cible-tactile);
    padding: 15px 18px;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-bouton);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--ls-bouton);
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--rayon);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bouton:hover { text-decoration: none; }

.bouton svg { flex: none; }

.bouton--primaire {
    background: var(--c-accent);
    color: #ffffff;
}
.bouton--primaire:hover,
.bouton--primaire:active {
    background: var(--c-accent-fonce);
    color: #ffffff;
}

.bouton--contour {
    background: transparent;
    color: var(--c-encre);
    border-color: var(--c-encre);
}
.bouton--contour:hover,
.bouton--contour:active {
    background: var(--c-encre);
    color: #ffffff;
}

.bouton--acier {
    background: var(--c-acier);
    color: #ffffff;
}
.bouton--acier:hover,
.bouton--acier:active {
    background: var(--c-acier-fonce);
    color: #ffffff;
}

/* Sur fond sombre, la variante contour s'inverse. */
.est-sombre .bouton--contour {
    color: #ffffff;
    border-color: #ffffff;
}
.est-sombre .bouton--contour:hover {
    background: #ffffff;
    color: var(--c-encre);
}

.bouton--bloc {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Groupe de boutons : empilés en mobile, côte à côte ensuite. */
.boutons {
    display: flex;
    flex-direction: column;
    gap: var(--pas-2);
    margin-top: 18px;
}

/* Lien d'action discret : « Voir tous les tarifs → ». */
.lien-action {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ===========================================================================
 * 5. EN-TÊTE ET NAVIGATION
 * ======================================================================== */

.entete {
    position: relative;
    background: var(--c-fond);
    border-bottom: var(--filet);
}

.entete__barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pas-3);
    padding: var(--pas-3) 14px;
}

/* En mobile, le bloc logo cède la place aux boutons d'appel et de menu :
   sans flex-basis nulle, la liste des villes, trop longue pour tenir à côté
   d'eux, faisait passer ces boutons sur une seconde ligne. Elle revient
   désormais à la ligne sous le logo. Réglage levé au palier 900 px. */
.entete__marque {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    order: 1;
    color: inherit;
}
.entete__marque:hover { text-decoration: none; }

.entete__logo {
    width: 158px;
    height: auto;
}

.entete__baseline {
    margin-top: 5px;
    /* Jeton dédié, et non --t-surtitre : ce dernier passe de 11 à 13 px au
       palier 900, ce qui élargissait la baseline de 465 px et faisait
       déborder la barre d'en-tête sur une seconde ligne. La maquette la fixe
       à 11 px quelle que soit la largeur. */
    font-size: var(--t-baseline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-texte-doux);
}

/* La baseline se compose en trois fragments, révélés selon la place :
     mobile          les villes seules, comme la maquette mobile
     900 à 1319 px   « Artisan chauffagiste — » suivi des villes, en entier :
                     le menu est replié, la barre a la place
     1320 px et plus le métier seul : le menu horizontal occupe la barre
   Rien n'est perdu quand les villes s'effacent : elles figurent juste en
   dessous, dans le bandeau de réassurance et dans les repères du héros. */
.entete__baseline-metier,
.entete__baseline-tiret { display: none; }

.entete__actions {
    display: flex;
    order: 2;
    align-items: center;
    gap: var(--pas-2);
}

/* Bouton d'appel compact du bandeau mobile. */
.entete__appel-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--c-accent);
    color: #ffffff;
}
.entete__appel-compact:hover {
    background: var(--c-accent-fonce);
    color: #ffffff;
}

/* Bloc d'appel complet, visible à partir du palier desktop. */
.entete__appel {
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 16px 30px;
    background: var(--c-accent);
    color: #ffffff;
    border-left: var(--filet);
}
.entete__appel:hover {
    background: var(--c-accent-fonce);
    color: #ffffff;
    text-decoration: none;
}

.entete__appel-libelle {
    font-size: var(--t-etiquette);
    letter-spacing: var(--ls-surtitre);
    text-transform: uppercase;
    opacity: 0.85;
}

.entete__appel-numero {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 26px;
    letter-spacing: 0.01em;
}

/* --- Bouton burger -------------------------------------------------------- */
.burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: var(--c-fond);
    border: var(--filet);
    color: var(--c-encre);
    cursor: pointer;
}

.burger:hover { background: var(--c-surface); }

/* Les deux icônes sont superposées ; aria-expanded choisit laquelle montrer. */
.burger__fermer { display: none; }
.burger[aria-expanded="true"] .burger__ouvrir { display: none; }
.burger[aria-expanded="true"] .burger__fermer { display: block; }

/* --- Menu principal -------------------------------------------------------- */
/* En mobile la navigation se replie SOUS la barre : flex-basis 100 % la
   force sur sa propre ligne, order 3 la place après le logo et les actions.
   Les marges négatives annulent le padding de la barre pour que les filets
   du menu aillent d'un bord à l'autre. */
.nav-principale {
    display: none;
    order: 3;
    flex-basis: 100%;
    margin: var(--pas-3) -14px calc(var(--pas-3) * -1);
    border-top: var(--filet);
}

/* Déplié par le JavaScript. Sans JavaScript, la règle .sans-js plus bas
   laisse le menu ouvert en permanence : la navigation reste utilisable. */
.nav-principale.est-ouvert { display: block; }

.sans-js .nav-principale { display: block; }
.sans-js .burger { display: none; }

.nav-principale__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-principale__lien {
    display: flex;
    align-items: center;
    min-height: var(--cible-tactile);
    padding: var(--pas-3) var(--marge-section);
    border-bottom: var(--filet-clair);
    font-family: var(--f-titre);
    font-weight: var(--fw-menu);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: var(--ls-menu);
    color: var(--c-encre);
}

.nav-principale__lien:hover {
    background: var(--c-surface);
    color: var(--c-accent);
    text-decoration: none;
}

.nav-principale__lien[aria-current="page"] {
    color: var(--c-accent);
    box-shadow: inset 4px 0 0 var(--c-accent);
}

/* --- Sous-menu déroulant (« Chaudières ») ---------------------------------
   Le libellé parent reste un lien ; le bouton voisin, seul porteur de
   aria-expanded, déroule la sous-liste. Aucun survol : doigt, clic ou
   clavier (assets/js/main.js). En mobile, la sous-liste se déplie dans le
   flux, sous son parent ; à partir de 1320 px, en panneau (voir ce palier). */
.nav-principale__parent {
    display: flex;
    align-items: stretch;
}

.nav-principale__parent .nav-principale__lien {
    flex: 1;
    min-width: 0;
}

/* Page du groupe affichée, autre que celle du parent : même repère que
   aria-current, sans l'attribut, réservé au lien exact. */
.nav-principale__lien--section {
    color: var(--c-accent);
    box-shadow: inset 4px 0 0 var(--c-accent);
}

.nav-principale__deplier {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-height: var(--cible-tactile);
    padding: 0;
    background: none;
    border: 0;
    border-bottom: var(--filet-clair);
    border-left: var(--filet-clair);
    color: var(--c-encre);
    cursor: pointer;
}

.nav-principale__deplier:hover {
    background: var(--c-surface);
    color: var(--c-accent);
}

.nav-principale__chevron { transition: transform 0.2s ease; }

.nav-principale__deplier[aria-expanded="true"] .nav-principale__chevron {
    transform: rotate(180deg);
}

.nav-principale__sous-liste {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--c-surface);
}

.nav-principale__groupe.est-ouvert .nav-principale__sous-liste { display: block; }

/* Sans JavaScript, le bouton ne ferait rien : il s'efface, et la sous-liste
   reste dépliée dans le menu mobile, lui-même déplié. */
.sans-js .nav-principale__deplier { display: none; }
.sans-js .nav-principale__sous-liste { display: block; }

.nav-principale__sous-lien {
    display: flex;
    align-items: center;
    min-height: var(--cible-tactile);
    padding: var(--pas-3) var(--marge-section) var(--pas-3) calc(var(--marge-section) + var(--pas-5));
    border-bottom: var(--filet-clair);
    font-size: 17px;
    color: var(--c-encre);
}

.nav-principale__sous-lien:hover {
    color: var(--c-accent);
    text-decoration: none;
}

.nav-principale__sous-lien[aria-current="page"] {
    color: var(--c-accent);
    box-shadow: inset 4px 0 0 var(--c-accent);
}

/* ===========================================================================
 * 6. HÉROS
 * ======================================================================== */

.hero { border-bottom: var(--filet); }

.hero__conteneur { display: block; }

.hero__texte {
    padding: var(--marge-verticale) var(--marge-section) 22px;
}

.hero__titre { margin: 14px 0 0; }

.hero__accroche {
    margin: 12px 0 0;
    font-size: var(--t-corps);
    line-height: var(--t-corps-lh);
    color: var(--c-texte);
    max-width: 52ch;
}

/* Bandeau de repères sous les boutons : horaires et zone d'intervention.
   La ligne fixe en a été retirée — elle reste en section « Nous joindre »
   et en pied de page. Deux colonnes égales, avec un écart plus large qu'à
   trois blocs. */
.hero__reperes {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pas-10);
    width: 100%;
    margin-top: 26px;
    padding-top: 18px;
    border-top: var(--filet);
}

.hero__repere {
    font-size: 16px;
    color: var(--c-texte);
}

.hero__repere strong { font-weight: var(--fw-appui); }

/* --- Média ---------------------------------------------------------------- */
.hero__media {
    position: relative;
    /* Le rapport est figé ici : la hauteur est donc connue avant même que
       l'image arrive, ce qui garantit un CLS nul. */
    aspect-ratio: 39 / 47;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__legende {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 14px;
    background: var(--c-encre);
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ===========================================================================
 * 7. RÉASSURANCE
 * ======================================================================== */

.reassurance {
    background: var(--c-encre);
    color: var(--c-sur-sombre);
    border-bottom: var(--filet);
}

/* Trois niveaux, comme toutes les autres sections :
     .reassurance            porte le fond, pleine largeur
     .reassurance__interieur conteneur centré, MÊME marge intérieure que
                             .section__interieur — var(--marge-section)
     .reassurance__liste     la grille, sans marge propre

   Les cellules n'ont pas de marge intérieure horizontale : le premier
   caractère tombe donc exactement sur la marge du conteneur, et le dernier
   sur la marge droite. Les filets verticaux sont tracés au milieu de la
   gouttière par un pseudo-élément, ce qui laisse le même dégagement de part
   et d'autre sans décaler quoi que ce soit. */
.reassurance__interieur {
    padding-inline: var(--marge-section);
}

.reassurance__liste {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reassurance__item {
    position: relative;
    margin: 0;
    padding: var(--pas-3) 0;
    border-bottom: var(--filet-sombre);
    font-size: 16px;
}

.reassurance__item:last-child { border-bottom: 0; }

.reassurance__titre {
    display: block;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 18px;
}

/* Corps propre, et non --t-meta : ce jeton passe à 16 px au palier 900, où
   la ligne des départements ne tiendrait plus sur une seule ligne. */
.reassurance__detail {
    display: none;
    margin-top: var(--pas-1);
    font-size: 15px;
    color: var(--c-sur-sombre-meta);
}

/* ===========================================================================
 * 8. PRESTATIONS
 * ======================================================================== */

.prestations__liste {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.prestation {
    margin: 0;
    padding: 14px 0;
    border-bottom: var(--filet-clair);
}

.prestation:last-child { border-bottom: 0; }

/* Le trait de couleur n'apparaît qu'en grille, à partir de 640 px. */
.prestation__trait { display: none; }

.prestation__titre {
    margin: var(--pas-1) 0 0;
    font-size: var(--t-h3);
}

.prestation__texte {
    margin: var(--pas-1) 0 0;
    font-size: var(--t-corps);
    line-height: 1.45;
    color: var(--c-texte);
}

/* ===========================================================================
 * 9. DÉPANNAGE
 * ======================================================================== */

.depannage {
    background: var(--c-encre);
    color: var(--c-sur-sombre);
    border-top: var(--filet);
    border-bottom: var(--filet);
}

.depannage__titre {
    margin: var(--pas-3) 0 var(--pas-2);
    font-size: 28px;
    line-height: 1.05;
    text-transform: none;
}

.depannage__accroche {
    margin: 0 0 14px;
    font-size: var(--t-corps);
    line-height: 1.45;
    color: var(--c-sur-sombre-doux);
}

.depannage__points {
    display: grid;
    gap: var(--pas-2) 22px;
    margin: 0 0 var(--pas-4);
    padding: var(--pas-4) 0 0;
    border-top: var(--filet-sombre);
    list-style: none;
}

.depannage__points li {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
}

.depannage__points li::before {
    content: "· ";
}

/* Chiffre mis en avant : part des pannes réparées au premier passage.
   Le nombre porte l'accent ; la phrase qui le complète reste dans le fil du
   texte, pour qu'un lecteur d'écran l'énonce d'une traite. */
.depannage__chiffre {
    margin: 0 0 var(--pas-4);
    padding: var(--pas-4) 0 0;
    border-top: var(--filet-sombre);
}

.depannage__chiffre-ligne {
    margin: 0;
    font-size: var(--t-corps);
    line-height: 1.3;
}

.depannage__chiffre-valeur {
    display: block;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 52px;
    line-height: 1;
    color: #ffffff;
}

.depannage__chiffre-note {
    margin: var(--pas-2) 0 0;
    font-size: var(--t-note);
    color: var(--c-sur-sombre-doux);
}

.depannage__mention { margin-top: var(--pas-4); }

/* Lien vers la page dépannage, entre la liste et le bouton d'appel. */
.depannage__lien { margin: 0 0 var(--pas-4); }

/* --- Tarifs répartis par groupe : hors contrat, sous contrat… ------------ */
.groupe-prix__titre {
    margin: var(--pas-4) 0 0;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
}

.groupe-prix__note { margin: var(--pas-1) 0 0; }

/* ===========================================================================
 * 10. TARIFS
 * ======================================================================== */

/* --- Liste prix : libellé à gauche, montant à droite --------------------- */
.liste-prix {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-prix__ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--pas-3);
    margin: 0;
    padding: 10px 0;
    border-bottom: var(--filet-clair);
    font-size: 16px;
}

.liste-prix__ligne:last-child { border-bottom: 0; }

.liste-prix__montant {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    white-space: nowrap;
}

/* Sur fond sombre, les filets s'assombrissent. */
.est-sombre .liste-prix__ligne,
.depannage .liste-prix__ligne {
    border-bottom-color: var(--c-filet-sombre-fin);
}

/* --- Cartes de contrat annuel -------------------------------------------- */
.contrats {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 14px;
    border: var(--filet);
}

.contrat {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    border-bottom: var(--filet);
}

.contrat:last-child { border-bottom: 0; }

.contrat__appareil {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 20px;
    line-height: 1.15;
}

.contrat__prix {
    margin-top: auto;
    padding-top: 10px;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-prix-fort);
    line-height: 1;
}

.contrat__unite {
    margin-top: var(--pas-1);
    font-size: var(--t-meta);
    color: var(--c-texte-doux);
}

.tarifs__bloc + .tarifs__bloc { margin-top: var(--pas-6); }

.tarifs__mention { margin-top: var(--pas-3); }

/* ===========================================================================
 * 11. MARQUES AGRÉÉES
 * ======================================================================== */

.marques__groupe + .marques__groupe { margin-top: var(--pas-6); }

.marques__grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: var(--pas-3);
    list-style: none;
    padding: 0;
}

.marque {
    margin: 0;
    padding: 14px 12px;
    border: var(--filet);
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 19px;
    text-transform: uppercase;
}

/* Précisions propres à une marque, rendues juste sous la grille dont elles
   relèvent — traitement de note de bas de bloc : corps réduit, interligne
   resserré, marge supérieure courte, pour les rattacher visuellement à leur
   grille au lieu de les laisser flotter. */
.marques__notes {
    list-style: none;
    margin: var(--pas-3) 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--c-texte-doux);
}

.marques__notes li {
    margin: 0;
    padding-left: 0.9em;
    text-indent: -0.9em;
}

.marques__notes li + li { margin-top: 3px; }

.marques__notes li::before { content: "\00B7\00A0"; }

/* Mentions générales, valables pour les deux univers. */
.marques__mentions {
    display: grid;
    gap: var(--pas-2);
    margin: var(--pas-5) 0 0;
    padding-top: var(--pas-3);
    border-top: var(--filet-clair);
    list-style: none;
    font-size: 13px;
    line-height: 1.35;
    color: var(--c-texte-doux);
}

.marques__mentions li {
    margin: 0;
    padding-left: 0.9em;
    text-indent: -0.9em;
}

.marques__mentions li::before { content: "\00B7\00A0"; }

/* ===========================================================================
 * 12. ZONE D'INTERVENTION
 * ======================================================================== */

/* En mobile, .zone__texte n'était bordé par rien : son H2 se collait au bord
   de la fenêtre alors que toutes les autres sections respectaient la marge.
   Au palier 900 la règle est redéfinie avec un filet de séparation. */
.zone__texte {
    padding: var(--marge-verticale) var(--marge-section);
}

.zone__accroche {
    margin: 0 0 var(--pas-5);
    font-size: var(--t-corps);
    color: var(--c-texte);
}

/* Les filets intérieurs ne sont pas des bordures de cellule : ils sont
   tracés par l'écart de la grille, qui laisse voir le fond encre du
   conteneur. Ils restent donc justes quel que soit le nombre de villes, sans
   calcul de fin de rangée à refaire quand une ville s'ajoute.
   Contrepartie : une rangée incomplète laisserait voir ce fond. La dernière
   ville s'étire donc sur les colonnes restantes (voir aussi le palier 640). */
.zone__villes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--c-encre);
    border: var(--filet);
    list-style: none;
    margin: 0;
    padding: 0;
}

.zone__ville {
    margin: 0;
    padding: 18px 16px;
    background: var(--c-fond);
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 22px;
    text-transform: uppercase;
}

/* Deux colonnes : une dernière ville seule sur sa rangée prend les deux. */
.zone__ville:last-child:nth-child(2n+1) { grid-column: span 2; }

.zone__complement { margin: 14px 0 0; }

.zone__media {
    aspect-ratio: 4 / 5;
    background: var(--c-surface);
}

.zone__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================================================================
 * 13. CONTACT
 * ======================================================================== */

.contact__bloc {
    padding: var(--marge-verticale) var(--marge-section);
    border-bottom: var(--filet-clair);
}

.contact__bloc:last-child { border-bottom: 0; }

.contact__bloc--surface { background: var(--c-surface); }

.contact__numero {
    display: block;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 30px;
    color: var(--c-accent);
}

.contact__numero--secondaire {
    margin-top: var(--pas-1);
    font-size: 24px;
    color: var(--c-encre);
}

.contact__email {
    display: inline-block;
    margin-top: 14px;
    font-size: var(--t-corps);
}

.contact__adresse {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--c-texte-doux);
}

.horaires__saison + .horaires__saison {
    margin-top: var(--pas-5);
    padding-top: var(--pas-5);
    border-top: var(--filet-clair);
}

.horaires__plage {
    margin-top: 10px;
    font-size: var(--t-corps);
    line-height: 1.5;
}

.horaires__plage strong { font-weight: var(--fw-appui); }

/* Saison en vigueur : signalée sans dépendre uniquement de la couleur. */
.horaires__saison--active .horaires__marque {
    display: inline-block;
    margin-left: var(--pas-2);
    padding: 2px 6px;
    background: var(--c-acier);
    color: #ffffff;
    font-family: var(--f-corps);
    font-size: 11px;
    font-weight: var(--fw-appui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact__invite {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 24px;
    line-height: 1.15;
}

.contact__invite-texte {
    margin: var(--pas-3) 0 var(--pas-5);
    font-size: var(--t-corps);
    line-height: 1.5;
    color: var(--c-texte);
}

/* ===========================================================================
 * 14. PIED DE PAGE
 * ======================================================================== */

/* --- Bloc d'action -------------------------------------------------------
   Les pages intérieures ne portant plus d'appel à l'action dans leur corps,
   c'est ici que se joue la conversion en bas de page.

   Contrastes mesurés sur le fond #111111 du pied :
     bouton plein    blanc sur #C0392B   =  5,4:1
     bouton contour  blanc sur #111111   = 18,9:1
     texte d'appel   #ffffff sur #111111 = 18,9:1
   Les trois dépassent le seuil AA. */
.pied__action {
    display: flex;
    flex-direction: column;
    gap: var(--pas-4);
    padding-bottom: var(--pas-6);
    margin-bottom: var(--pas-6);
    border-bottom: var(--filet-sombre);
}

.pied__action-texte {
    margin: 0;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-h3);
    line-height: 1.2;
    color: #ffffff;
}

.pied__action-boutons {
    display: flex;
    flex-direction: column;
    gap: var(--pas-2);
}

/* La règle de couleur du pied vise tous ses liens : on rétablit celle des
   boutons, qui ont leur propre traitement. */
.pied__action-boutons .bouton--primaire,
.pied__action-boutons .bouton--primaire:hover {
    color: #ffffff;
    text-decoration: none;
}

.pied__action-boutons .bouton--contour {
    color: #ffffff;
    border-color: #ffffff;
}

.pied__action-boutons .bouton--contour:hover,
.pied__action-boutons .bouton--contour:active {
    background: #ffffff;
    color: var(--c-encre);
    text-decoration: none;
}

/* Même découpage que les sections : le <footer> porte le fond sur toute la
   largeur et ne règle que le rythme vertical ; la marge latérale est posée
   sur le conteneur centré. La mettre sur le <footer> lui-même décalait tout
   le pied de 48 px vers la gauche par rapport aux sections, sur écran large. */
.pied {
    background: var(--c-encre);
    color: var(--c-sur-sombre-meta);
    padding: 22px 0;
    font-size: var(--t-meta);
    line-height: 1.6;
}

.pied__interieur {
    padding-inline: var(--marge-section);
}

.pied a { color: var(--c-sur-sombre-meta); }
.pied a:hover { color: #ffffff; }

.pied__logo-cadre {
    display: inline-block;
    padding: 8px 12px;
    background: #ffffff;
}

.pied__logo { width: 158px; height: auto; }

.pied__resume { margin-top: 10px; }

.pied__colonnes {
    display: grid;
    gap: var(--pas-5);
    margin-top: 14px;
    padding-top: var(--pas-3);
    border-top: var(--filet-sombre);
}

.pied__titre-colonne {
    color: #ffffff;
    font-weight: var(--fw-appui);
    margin-bottom: var(--pas-1);
}

.pied__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pied__liste li { margin: 0; }

.pied__liste a { display: block; padding: 2px 0; }

.pied__bas {
    margin-top: var(--pas-3);
    padding-top: var(--pas-3);
    border-top: var(--filet-sombre);
    font-size: 13px;
    color: var(--c-sur-sombre-tenu);
}

/* ===========================================================================
 * 15. BARRE D'APPEL MOBILE
 *
 * Collée en bas d'écran, elle porte le mobile en CTA principal.
 * Masquée à partir du palier 900 px, où l'en-tête affiche déjà le numéro.
 * ======================================================================== */

.barre-appel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    border-top: var(--filet);
    /* Respecte la zone sûre des iPhone à encoche. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.barre-appel a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-2);
    min-height: var(--h-barre-appel);
    padding: var(--pas-3) 10px;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-bouton);
    text-transform: uppercase;
    text-decoration: none;
}

.barre-appel__tel {
    background: var(--c-accent);
    color: #ffffff;
}
.barre-appel__tel:hover { background: var(--c-accent-fonce); color: #ffffff; }

.barre-appel__devis {
    background: var(--c-encre);
    color: #ffffff;
    font-size: 17px;
}
.barre-appel__devis:hover { background: var(--c-texte); color: #ffffff; }

/* ===========================================================================
 * 16. FORMULAIRE
 * ======================================================================== */

.formulaire {
    display: flex;
    flex-direction: column;
    gap: var(--pas-4);
    max-width: 46rem;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.champ__label {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-etiquette);
    letter-spacing: var(--ls-etiquette);
    text-transform: uppercase;
    color: var(--c-texte-doux);
}

.champ__obligatoire {
    color: var(--c-accent);
    font-family: var(--f-corps);
}

.champ__aide {
    font-size: var(--t-note);
    color: var(--c-texte-doux);
}

.champ__saisie {
    width: 100%;
    min-height: var(--cible-tactile);
    padding: 11px 12px;
    font-family: var(--f-corps);
    /* 16 px minimum : en dessous, iOS zoome à la mise au point. */
    font-size: 16px;
    line-height: 1.4;
    color: var(--c-encre);
    background: var(--c-fond);
    border: var(--filet);
    border-radius: var(--rayon);
}

textarea.champ__saisie {
    min-height: 160px;
    resize: vertical;
}

.champ__saisie::placeholder { color: #8b8683; }

.champ__saisie:hover { background: var(--c-surface); }

.champ__saisie:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 1px;
}

/* --- Erreur de champ ------------------------------------------------------ */
.champ--erreur .champ__saisie {
    border-color: var(--c-accent);
    background: #fdf4f3;
}

.champ__erreur {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--t-note);
    font-weight: var(--fw-appui);
    color: var(--c-accent-fonce);
}

.champ__erreur::before {
    content: "▲";
    font-size: 11px;
    line-height: 1.5;
}

/* --- Case à cocher de consentement ---------------------------------------- */
.consentement {
    display: flex;
    align-items: flex-start;
    gap: var(--pas-3);
    padding: var(--pas-3);
    background: var(--c-surface);
    border: var(--filet-clair);
    font-size: var(--t-note);
    line-height: 1.5;
}

.consentement input[type="checkbox"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--c-accent);
    cursor: pointer;
}

.consentement--erreur { border-color: var(--c-accent); }

/* --- Honeypot : invisible pour l'humain, présent pour le robot ------------ */
/* Ni display:none ni hidden : trop de robots les détectent. On sort du flux
   et on rend le champ inatteignable au clavier comme au lecteur d'écran. */
.piege {
    position: absolute !important;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* --- Messages de résultat -------------------------------------------------- */
.message {
    padding: var(--pas-4);
    border: var(--filet);
    margin-bottom: var(--pas-5);
}

.message__titre {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-h3);
    margin-bottom: var(--pas-2);
}

.message--succes {
    background: #eef5f8;
    border-color: var(--c-acier);
}

.message--erreur {
    background: #fdf4f3;
    border-color: var(--c-accent);
}

.message__liste { margin: var(--pas-2) 0 0; padding-left: 1.2em; }

.message__appel { margin-top: var(--pas-3); }

/* --- Récapitulatif de la demande envoyée ----------------------------------
 *
 * Affiché sous le message de succès, il reprend les champs partis à
 * l'entreprise. Volontairement sobre : c'est une pièce justificative, pas un
 * second appel à l'action.
 */
.recapitulatif {
    border-left: 3px solid var(--c-acier);
    padding: var(--pas-3) 0 var(--pas-3) var(--pas-4);
    margin-bottom: var(--pas-5);
}

.recapitulatif__titre {
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-h3);
    margin-bottom: var(--pas-2);
}

.recapitulatif__objet {
    font-size: var(--t-note);
    color: var(--c-texte-doux);
    margin-bottom: var(--pas-3);
}

.recapitulatif__liste {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--pas-1) var(--pas-4);
    margin: 0 0 var(--pas-4);
}

.recapitulatif__liste dt {
    font-weight: 600;
}

.recapitulatif__liste dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.recapitulatif__sous-titre {
    font-weight: 600;
    margin-bottom: var(--pas-1);
}

.recapitulatif__message {
    overflow-wrap: anywhere;
    margin-bottom: var(--pas-3);
}

/* ===========================================================================
 * 17. COMPOSANTS RÉSERVÉS AUX PAGES DE LA PHASE 2
 *
 * Écrits maintenant pour que les 17 pages à venir n'aient rien à ajouter
 * au CSS : tableau de tarifs complet, contenu rédactionnel, fil d'Ariane,
 * accordéon de questions fréquentes, encart d'appel.
 * ======================================================================== */

/* --- Fil d'Ariane ---------------------------------------------------------- */
.fil-ariane {
    padding: var(--pas-3) var(--marge-section);
    border-bottom: var(--filet-clair);
    font-size: var(--t-note);
    color: var(--c-texte-doux);
}

.fil-ariane__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.fil-ariane__liste li { margin: 0; }

.fil-ariane__liste li + li::before {
    content: "›";
    margin-right: var(--pas-2);
    color: var(--c-texte-doux);
}

.fil-ariane a { color: var(--c-texte-doux); }
.fil-ariane a:hover { color: var(--c-accent); }
.fil-ariane [aria-current="page"] { color: var(--c-encre); font-weight: var(--fw-appui); }

/* --- Tableau de tarifs ------------------------------------------------------ */
/* Enveloppe défilante : sur mobile, un tableau large défile dans son cadre
   au lieu de faire déborder la page. */
.tableau-enveloppe {
    overflow-x: auto;
    border: var(--filet);
    margin-bottom: var(--pas-5);
}

.tableau {
    width: 100%;
    min-width: 30rem;
    font-size: 16px;
}

.tableau caption {
    padding: var(--pas-3);
    text-align: left;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-etiquette);
    letter-spacing: var(--ls-etiquette);
    text-transform: uppercase;
    color: var(--c-texte-doux);
    border-bottom: var(--filet);
}

.tableau th {
    text-align: left;
    padding: var(--pas-3);
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-etiquette);
    letter-spacing: var(--ls-etiquette);
    text-transform: uppercase;
    color: var(--c-texte-doux);
    border-bottom: var(--filet);
}

.tableau td {
    padding: var(--pas-3);
    border-bottom: var(--filet-clair);
}

.tableau tbody tr:last-child td { border-bottom: 0; }

/* En-têtes de ligne : du texte courant, pas le libellé en capitales des
   en-têtes de colonne. */
.tableau tbody th {
    font-family: var(--f-corps);
    font-weight: var(--fw-appui);
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-encre);
    border-bottom: var(--filet-clair);
}

.tableau tbody tr:last-child th { border-bottom: 0; }

/* Tableau court (comparatif de deux ou trois lignes) : sans largeur
   minimale, il tient dans l'écran d'un téléphone sans défilement. Ses
   en-têtes peuvent passer à la ligne : à 900 px, dans la colonne de texte
   voisine d'une photo, l'en-tête de montant insécable faisait défiler le
   tableau. Les montants, eux, restent insécables. */
.tableau--compact { min-width: 0; }

.tableau--compact thead th { white-space: normal; }

.tableau__montant {
    text-align: right;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-prix);
    white-space: nowrap;
}

/* --- Contenu rédactionnel ---------------------------------------------------- */
.prose {
    max-width: var(--largeur-lecture);
    font-size: 18px;
    line-height: 1.6;
    color: var(--c-texte);
}

.prose h2 {
    margin: var(--pas-8) 0 var(--pas-3);
    color: var(--c-encre);
}

.prose h3 {
    margin: var(--pas-6) 0 var(--pas-2);
    color: var(--c-encre);
    text-transform: none;
}

.prose > :first-child { margin-top: 0; }

.prose ul, .prose ol { margin-bottom: var(--pas-4); }
.prose li { margin-bottom: var(--pas-2); }

.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Questions fréquentes ---------------------------------------------------- */
.faq { border-top: var(--filet); }

.faq__item { border-bottom: var(--filet-clair); }

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pas-3);
    min-height: var(--cible-tactile);
    padding: var(--pas-4) 0;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-h3);
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
    content: "+";
    flex: none;
    font-size: 26px;
    line-height: 1;
    color: var(--c-accent);
}

.faq__item[open] .faq__question::after { content: "−"; }

.faq__reponse { padding: 0 0 var(--pas-4); color: var(--c-texte); }

/* --- Encart d'appel de fin de page -------------------------------------------- */
.encart-appel {
    padding: var(--pas-8) var(--marge-section);
    background: var(--c-encre);
    color: var(--c-sur-sombre);
    border-top: var(--filet);
}

.encart-appel__titre { font-size: var(--t-h2); margin-bottom: var(--pas-3); }

.encart-appel__texte {
    color: var(--c-sur-sombre-doux);
    margin-bottom: var(--pas-5);
    max-width: 56ch;
}

/* --- Page prestation : texte et photo -------------------------------------------
   Le texte est en deux blocs, la photo entre les deux dans le document.
   En mobile, elle s'intercale donc après le déroulé de la visite ; à partir
   de 900 px, elle passe dans une colonne à droite et reste visible pendant
   la lecture (voir les paliers). */
/* Le bloc de suite commence par un H2, dont .prose retire la marge haute :
   c'est l'écart de la grille qui la remplace. */
.fiche-prestation {
    display: grid;
    gap: var(--pas-8);
}

.fiche-prestation__media { max-width: 26rem; }

.fiche-prestation__photo { background: var(--c-surface); }

.fiche-prestation__photo img { width: 100%; }

/* Encadré du prix, dans le fil du texte. */
.fiche-prestation__tarif {
    margin: var(--pas-4) 0 var(--pas-5);
    padding: var(--pas-2) var(--pas-4) var(--pas-4);
    border: var(--filet);
}

.fiche-prestation__tarif .liste-prix__ligne {
    align-items: center;
    font-size: 18px;
}

.fiche-prestation__tarif .liste-prix__montant { font-size: var(--t-prix-fort); }

/* Encadré de plusieurs tarifs (pages dépannage, tarifs, zone) : la taille des
   forfaits, et non celle, plus forte, du montant unique d'une fiche
   prestation. */
.fiche-prestation__tarif--multiple .liste-prix__ligne {
    align-items: baseline;
    font-size: 17px;
}

.fiche-prestation__tarif--multiple .liste-prix__montant { font-size: var(--t-prix); }

/* Tarifs répartis par groupe : les titres de groupe sont des H3 dans .prose,
   dont la marge haute est faite pour un intertitre de texte courant.
   Resserrée ici, et réduite sur le premier. */
.prose .fiche-prestation__tarif--multiple .groupe-prix__titre { margin: var(--pas-4) 0 0; }

.prose .fiche-prestation__tarif--multiple .groupe-prix:first-child .groupe-prix__titre { margin-top: var(--pas-2); }

/* --- Chiffre clé, sur fond clair ------------------------------------------------
   Pendant du chiffre du bloc dépannage de l'accueil, qui est sur fond sombre.
   Le nombre porte l'accent ; la phrase qui le complète reste dans le même
   paragraphe, pour qu'un lecteur d'écran l'énonce d'une traite. */
.chiffre-cle {
    margin: 0 0 var(--pas-5);
    padding: var(--pas-4) 0;
    border-top: var(--filet);
    border-bottom: var(--filet-clair);
}

.prose .chiffre-cle__ligne {
    margin: 0;
    font-size: var(--t-corps);
    line-height: 1.3;
    color: var(--c-encre);
}

.chiffre-cle__valeur {
    display: block;
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: 52px;
    line-height: 1;
    color: var(--c-accent);
}

.prose .chiffre-cle__note {
    margin: var(--pas-2) 0 0;
    font-size: var(--t-note);
    color: var(--c-texte-doux);
}

/* --- Déroulé d'intervention : étapes numérotées ---------------------------------
   Numéros en capitales étroites de la charte. Chaque <li> ne contient qu'un
   <span> : le numéro et le texte forment ainsi deux cellules de grille, et
   le texte long revient à la ligne sous lui-même, pas sous le numéro. */
.etapes {
    list-style: none;
    counter-reset: etape;
    margin: var(--pas-4) 0 var(--pas-5);
    padding: 0;
    border-top: var(--filet);
}

.prose .etapes li {
    counter-increment: etape;
    display: grid;
    grid-template-columns: 2.4em 1fr;
    gap: var(--pas-3);
    margin: 0;
    padding: var(--pas-3) 0;
    border-bottom: var(--filet-clair);
}

.etapes li::before {
    content: counter(etape, decimal-leading-zero);
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    color: var(--c-accent);
}

.etapes--pac li::before { color: var(--c-acier); }

/* --- Rubrique obligatoire en attente d'information -------------------------------
   Mentions légales : signale sans ambiguïté une rubrique dont le contenu
   n'est pas encore disponible, au lieu de la taire. Le repère n'est pas
   qu'une couleur : l'étiquette « À compléter » porte l'information. */
.a-completer {
    margin: var(--pas-3) 0 var(--pas-5);
    padding: var(--pas-3) var(--pas-4);
    border: 2px dashed var(--c-accent);
    background: var(--c-surface);
}

.a-completer p { margin: 0; }

.prose .a-completer__etiquette,
.a-completer__etiquette {
    margin-bottom: var(--pas-1);
    font-family: var(--f-titre);
    font-weight: var(--fw-titre);
    font-size: var(--t-etiquette);
    letter-spacing: var(--ls-etiquette);
    text-transform: uppercase;
    color: var(--c-accent);
}

/* --- Page « en préparation » --------------------------------------------------- */
.en-preparation {
    padding: var(--pas-12) var(--marge-section);
    text-align: center;
}

.en-preparation__titre { margin-bottom: var(--pas-4); }

.en-preparation__texte {
    max-width: 46ch;
    margin: 0 auto var(--pas-6);
    color: var(--c-texte);
}

/* ===========================================================================
 * 18. PALIERS RESPONSIVES
 * ======================================================================== */

/* --- 640 px : les listes deviennent des grilles ------------------------- */
@media (min-width: 640px) {
    :root {
        --marge-section: 24px;
        --marge-verticale: 28px;
        --gouttiere-reassurance: 48px;
    }

    .boutons { flex-direction: row; flex-wrap: wrap; }

    .prestations__liste {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        border-left: var(--filet);
    }

    .prestation {
        padding: 22px 20px;
        border-right: var(--filet);
        border-bottom: var(--filet);
    }

    .prestation:last-child { border-bottom: var(--filet); }

    .prestation__trait {
        display: block;
        width: 44px;
        height: 4px;
        margin-bottom: 14px;
    }

    .prestation__trait--pac       { background: var(--c-acier); }
    .prestation__trait--chauffage { background: var(--c-accent); }

    .marques__grille { grid-template-columns: repeat(3, 1fr); }

    /* Trois colonnes : cinq villes tiennent sur deux rangées, et le nom le
       plus long garde la place de s'écrire sur une ligne. La dernière ville
       comble la rangée qu'elle termine. */
    .zone__villes { grid-template-columns: repeat(3, 1fr); }
    .zone__ville:last-child:nth-child(2n+1) { grid-column: auto; }
    .zone__ville:last-child:nth-child(3n+1) { grid-column: span 3; }
    .zone__ville:last-child:nth-child(3n+2) { grid-column: span 2; }

    .contrats { grid-template-columns: repeat(3, 1fr); }
    .contrat { border-bottom: 0; border-right: var(--filet); }
    .contrat:last-child { border-right: 0; }
    .contrat__appareil { min-height: 2.3em; }

    .depannage__points { grid-template-columns: repeat(2, 1fr); }

    .reassurance__liste {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--gouttiere-reassurance);
    }

    .reassurance__item { padding: 20px 0; }

    /* Deux colonnes : seule la cellule de droite porte un filet à sa gauche. */
    .reassurance__item:nth-child(2n)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--gouttiere-reassurance) / -2);
        border-left: var(--filet-sombre);
    }

    .reassurance__item:nth-last-child(-n+2) { border-bottom: 0; }

    .reassurance__detail { display: block; }

    .pied__colonnes { grid-template-columns: repeat(2, 1fr); }

    .pied__action-boutons { flex-direction: row; flex-wrap: wrap; }
}

/* --- 900 px : passage à la mise en page desktop -------------------------- */
@media (min-width: 900px) {
    :root {
        --marge-section: 40px;
        --marge-verticale: 40px;
        --t-h1: 40px;
        --t-h1-lh: 0.98;
        --t-h2: 34px;
        --t-h3: 26px;
        --t-corps: 18px;
        --t-surtitre: 13px;
        --t-etiquette: 15px;
        --t-meta: 16px;
    }

    body { padding-bottom: 0; }

    /* La barre collante disparaît : le numéro est dans l'en-tête. */
    .barre-appel { display: none; }

    /* Au-delà de ce palier, on pointe à la souris : les liens retrouvent
       l'interlignage exact de la maquette. */
    .prestation__titre a,
    .lien-action,
    .contact__numero,
    .contact__email,
    .pied__liste a,
    .pied address a,
    .fil-ariane a {
        display: block;
        min-height: 0;
    }

    .lien-action { display: inline-block; }

    /* --- En-tête ---------------------------------------------------- */
    .entete__barre {
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    .entete__marque {
        display: flex;
        flex: 0 1 auto;
        min-width: auto;
        flex-direction: column;
        justify-content: center;
        padding: 18px 26px;
        border-right: var(--filet);
    }

    .entete__logo { width: 200px; }

    /* Interlettrage desktop de la maquette : 0,06em et non 0,08em. */
    .entete__baseline { letter-spacing: 0.06em; }

    /* Le menu est encore replié derrière le burger : la barre a toute la
       place pour la baseline complète. */
    .entete__baseline-metier,
    .entete__baseline-tiret { display: inline; }

    .entete__appel { display: flex; }
    .entete__appel-compact { display: none; }

    .entete__actions {
        align-items: stretch;
        gap: 0;
    }

    .burger {
        width: auto;
        min-width: 60px;
        border: 0;
        border-left: var(--filet);
    }

    /* La barre n'a plus de padding à ce palier : les marges négatives du
       menu replié n'ont plus lieu d'être. */
    .nav-principale { margin: 0; }

    /* --- Héros ------------------------------------------------------- */
    .hero__conteneur {
        display: grid;
        grid-template-columns: 1fr 420px;
    }

    .hero__texte {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 36px var(--marge-section) 32px;
        border-right: var(--filet);
    }

    .hero__titre { margin: 16px 0 0; max-width: 27ch; }
    .hero__accroche { margin: 14px 0 0; }
    .boutons { margin-top: 20px; }

    .hero__reperes { display: grid; }

    .hero__media { aspect-ratio: auto; height: 100%; min-height: 560px; }

    /* --- Sections ----------------------------------------------------- */
    .section__interieur { padding: 42px var(--marge-section) 46px; }

    .section__entete {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--pas-5);
        padding-bottom: 14px;
        margin-bottom: 0;
    }

    .section__complement { display: block; }

    /* --- Prestations : grille de 6 colonnes comme la maquette --------- */
    .prestations__liste { grid-template-columns: repeat(6, 1fr); }
    .prestation { padding: 26px 24px 28px; }
    .prestation--pac       { grid-column: span 2; }
    .prestation--chauffage { grid-column: span 3; }

    /* --- Dépannage ---------------------------------------------------- */
    .depannage__conteneur {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
    }

    .depannage__texte {
        padding: 34px var(--marge-section) 36px;
        border-right: var(--filet-sombre);
    }

    .depannage__tarifs { padding: 34px 36px 36px; }

    .depannage__titre { font-size: 38px; line-height: 1.03; }
    .depannage__accroche { max-width: 56ch; margin-bottom: 20px; }

    /* --- Tarifs -------------------------------------------------------- */
    .tarifs__blocs {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        border-left: var(--filet);
    }

    .tarifs__bloc {
        padding: 24px 26px 26px;
        border-right: var(--filet);
        border-bottom: var(--filet);
    }

    .tarifs__bloc + .tarifs__bloc { margin-top: 0; }

    /* --- Marques -------------------------------------------------------- */
    .marques__groupes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--pas-10);
        margin-top: var(--pas-6);
    }

    .marques__groupe + .marques__groupe { margin-top: 0; }

    /* Trois colonnes pour les chaudières jusqu'à 1199 px, et non quatre :
       dans une demi-largeur, quatre cases réclamaient 438 px quand la colonne
       n'en offre que 382 à 900 px. La grille s'élargissait alors et la page
       débordait horizontalement. Quatre colonnes au palier 1200. */
    .marques__grille--pac        { grid-template-columns: repeat(3, 1fr); }
    .marques__grille--chaudieres { grid-template-columns: repeat(3, 1fr); }

    .marques__grille--pac .marque { padding: 16px 14px; font-size: 21px; }

    .marques__mentions {
        grid-template-columns: 1fr 1fr;
        gap: var(--pas-2) var(--pas-10);
    }

    /* --- Zone ------------------------------------------------------------ */
    .zone__conteneur {
        display: grid;
        grid-template-columns: 1fr 380px;
    }

    .zone__texte {
        padding: 40px var(--marge-section) 44px;
        border-right: var(--filet);
    }

    .zone__ville { padding: 22px 18px; font-size: 26px; }

    .zone__media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 420px;
        padding: 30px;
    }

    /* --- Contact ---------------------------------------------------------- */
    .contact__conteneur {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .contact__bloc {
        padding: 36px var(--marge-section) 40px;
        border-right: var(--filet);
        border-bottom: 0;
    }

    .contact__bloc:last-child { border-right: 0; }

    .contact__numero { font-size: 34px; }
    .contact__numero--secondaire { font-size: 28px; }
    .contact__invite { font-size: 26px; }

    /* --- Pied -------------------------------------------------------------- */
    .pied { padding: 34px 0 30px; font-size: 16px; }

    .pied__action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--pas-8);
        padding-bottom: var(--pas-8);
        margin-bottom: var(--pas-8);
    }

    .pied__action-texte { max-width: 34ch; }
    .pied__action-boutons { flex: none; }

    .pied__colonnes {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: var(--pas-8);
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .pied__logo { width: 196px; }

    .pied__bas {
        margin-top: 26px;
        padding-top: 14px;
        font-size: var(--t-note);
    }

    .encart-appel { padding: var(--pas-12) var(--marge-section); }

    .fil-ariane { padding: var(--pas-3) var(--marge-section); }

    /* --- Page prestation : le texte à gauche, la photo à droite --------- */
    .fiche-prestation {
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: var(--pas-12);
        align-items: start;
    }

    .fiche-prestation__texte--debut { grid-column: 1; grid-row: 1; }
    .fiche-prestation__texte--suite { grid-column: 1; grid-row: 2; }

    /* La photo couvre les deux rangées et reste visible pendant la lecture.
       L'en-tête n'étant pas collant, un simple retrait suffit en haut. */
    .fiche-prestation__media {
        grid-column: 2;
        grid-row: 1 / span 2;
        position: sticky;
        top: var(--pas-6);
        max-width: none;
    }
}

/* --- 1200 px : le menu se déploie dans l'en-tête ------------------------ */
@media (min-width: 1200px) {
    :root {
        --marge-section: 48px;
        --t-h1: 44px;
        --t-h2: 38px;
        --gouttiere-reassurance: 52px;
    }

    .entete__logo { width: 214px; }

    .hero__conteneur { grid-template-columns: 1fr 520px; }
    .hero__texte { padding: 40px var(--marge-section) 36px; }
    .hero__media { min-height: 660px; }

    .zone__conteneur { grid-template-columns: 1fr 420px; }
    .zone__ville { font-size: 27px; }
    .zone__media { min-height: 480px; }

    /* La quatrième cellule porte les trois départements en toutes lettres.
       Mesuré : cette ligne réclame 407 px de large à 15 px de corps. Les
       cellules n'ayant plus de marge intérieure, la largeur utile est celle
       de la colonne elle-même : 1,85fr lui en accorde 453. */
    .reassurance__liste { grid-template-columns: repeat(3, 1fr) 1.85fr; }

    .reassurance__item {
        padding: 22px 0;
        border-bottom: 0;
    }

    /* Quatre colonnes sur une rangée : toutes sauf la première portent un
       filet à leur gauche. La règle du palier 640 reste vraie et se contente
       de faire doublon sur les cellules paires. */
    .reassurance__item + .reassurance__item::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--gouttiere-reassurance) / -2);
        border-left: var(--filet-sombre);
    }

    .depannage__titre { font-size: 40px; }

    .marques__grille--pac .marque { font-size: 21px; }
    .marques__grille--chaudieres  { grid-template-columns: repeat(4, 1fr); }

    .fiche-prestation { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* --- 1320 px : le menu se déploie dans l'en-tête -------------------------
 *
 * Pourquoi 1320 et non 1200, contrairement aux autres paliers.
 *
 * L'en-tête doit loger, sur une seule ligne : le logo et sa baseline, sept
 * entrées de menu, et le bloc d'appel. Mesuré, cela réclame environ 1240 px
 * — davantage que les 1185 px utiles d'une fenêtre de 1200. Forcer le menu
 * horizontal à 1200 le faisait passer sur deux lignes et doublait la hauteur
 * de l'en-tête.
 *
 * En dessous de ce palier, le menu burger prend le relais : il reste
 * parfaitement utilisable sur un portable 1366 px, ce qui n'est pas le cas
 * d'un menu écrasé.
 * ---------------------------------------------------------------------- */
@media (min-width: 1320px) {

    .burger { display: none; }

    /* La barre ne passe jamais à la ligne. C'est le menu qui absorbe le
       manque de place : ses écarts et sa marge intérieure se resserrent, et
       sa liste peut se replier en dernier recours, plutôt que d'éjecter le
       bloc d'appel sous le logo. */
    .entete__barre { flex-wrap: nowrap; }

    /* Le menu redevient une barre horizontale, quel que soit l'état du
       bouton burger — qui n'est plus affiché. */
    .nav-principale,
    .nav-principale.est-ouvert,
    .sans-js .nav-principale {
        display: flex;
        order: 2;
        flex: 1;
        flex-basis: auto;
        /* Lève la taille minimale automatique d'un élément flex, qui
           interdisait au menu de descendre sous la largeur de son contenu. */
        min-width: 0;
        align-items: center;
        margin: 0;
        border-top: 0;
    }

    .entete__actions { order: 3; }

    .nav-principale__liste {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px clamp(10px, 1.1vw, 18px);
        padding: 0 clamp(12px, 1.4vw, 20px);
    }

    .nav-principale__lien {
        min-height: 0;
        padding: 6px 0;
        border-bottom: 0;
        font-size: var(--t-menu);
        white-space: nowrap;
    }

    .nav-principale__lien:hover { background: none; }

    .nav-principale__lien[aria-current="page"],
    .nav-principale__lien--section {
        box-shadow: inset 0 -3px 0 var(--c-accent);
    }

    /* Sous-menu : panneau sous le parent, par-dessus le contenu. Mesuré : la
       barre garde 101 px de marge à 1320 px avant l'ajout du bouton de 44 px,
       le menu tient donc toujours sur une ligne. */
    .nav-principale__groupe { position: relative; }

    .nav-principale__parent { align-items: center; }

    .nav-principale__deplier {
        width: var(--cible-tactile);
        height: var(--cible-tactile);
        border: 0;
    }

    .nav-principale__deplier:hover { background: none; }

    .nav-principale__sous-liste {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 50;
        min-width: 17rem;
        background: var(--c-fond);
        border: var(--filet);
    }

    /* Sans JavaScript, pas de panneau figé par-dessus la page : les deux
       pages chaudière restent accessibles par le lien parent et par le pied
       de page. */
    .sans-js .nav-principale__sous-liste { display: none; }

    .nav-principale__sous-lien {
        padding: var(--pas-3) var(--pas-4);
        font-size: 16px;
        white-space: nowrap;
    }

    .nav-principale__sous-liste li:last-child .nav-principale__sous-lien { border-bottom: 0; }

    /* ÉCART ASSUMÉ AVEC LA MAQUETTE.
       La maquette place « Artisan chauffagiste — Tarbes · Lourdes · Pau ·
       Marciac » en entier à côté du logo. Mesuré avec les vraies métriques
       d'Archivo, l'ensemble logo + baseline complète + menu + bloc d'appel
       réclame 1450 px sur une ligne, pour un conteneur plafonné à 1440 :
       il manque 10 px, à toute largeur d'écran. La maquette avait été
       composée à exactement 1440 px, sans marge.
       Plutôt que de rogner le menu au pixel — fragile dès que la police de
       repli se substitue à Archivo — on retire la liste des villes tant que
       le menu horizontal occupe la barre. Elle reste lisible juste en
       dessous, dans le bandeau de réassurance et dans les repères du héros,
       où elle figure déjà deux fois. */
    .entete__baseline-zone,
    .entete__baseline-tiret { display: none; }
}

/* ===========================================================================
 * 19. PRÉFÉRENCES UTILISATEUR ET IMPRESSION
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Contraste renforcé : on épaissit les filets plutôt que de changer la
   palette, qui respecte déjà le niveau AA. */
@media (prefers-contrast: more) {
    :root { --filet-clair: 1px solid var(--c-texte-doux); }
}

@media print {
    .entete__actions,
    .nav-principale,
    .barre-appel,
    .lien-evitement,
    .hero__media,
    .zone__media,
    .fiche-prestation__media { display: none !important; }

    body { padding-bottom: 0; font-size: 12pt; }

    .est-sombre,
    .reassurance,
    .depannage,
    .pied {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .est-sombre a, .pied a { color: #000000; }

    /* Les liens perdent leur destination à l'impression : on la rétablit. */
    a[href^="http"]::after,
    a[href^="tel:"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }
}