/* ══════════════════════════════════════════════════════════════════════
   La respiration latérale de la page.

   Tailwind donne au conteneur la largeur du point de rupture : dès que la
   fenêtre fait 1280 px, le contenu fait 1280 px et vient coller aux bords.
   On impose donc une gouttière fluide et une largeur de lecture, valables à
   toutes les tailles d'écran.
   ══════════════════════════════════════════════════════════════════════ */
.container {
    max-width: 1220px;
    padding-left: clamp(1.25rem, 5vw, 4rem);
    padding-right: clamp(1.25rem, 5vw, 4rem);
}

/* ══════════════════════════════════════════════════════════════════════
   ABELEC — design system (meme palette/typo que le site principal
   D:\abelec.com\abelec.com\frontend : navy + orange terracotta + creme,
   Roboto Slab pour les titres, Inter pour le corps, JetBrains Mono pour
   les petits labels majuscules).
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --navy: #1a3a5c;
    --navy-ink: #0f2340;
    --navy-soft: #2b4c72;
    --orange: #d97e3a;
    --orange-dark: #b8612a;
    --orange-soft: #f4dfc8;
    --cream-light: #F8F5F0;
    --cream-deep: #F4EFE6;
    --cream-line: #E8DFD0;
    --muted: #5a5a5a;
    --muted-2: #8a8a8a;
    /* Le vert ne sert QUE a la confirmation d'envoi : c'est ce qui
       lui donne son sens. Ne pas l'employer ailleurs. */
    --vert: #1a7f4b;
    --vert-halo: rgba(26, 127, 75, .13);
}

body {
    font-family: 'Inter', system-ui, sans-serif;
}

.font-slab, h1, h2, h3 {
    font-family: 'Roboto Slab', Georgia, serif;
}

.font-mono, .eyebrow {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--orange);
}

/* Couleurs de marque — classes utilitaires (le CDN Tailwind v2 ne permet pas
   d'etendre la palette au runtime, donc on complete a la main). */
.bg-navy { background-color: var(--navy); }
.bg-navy-ink { background-color: var(--navy-ink); }
.bg-navy-soft { background-color: var(--navy-soft); }
.bg-orange { background-color: var(--orange); }
.bg-orange-dark { background-color: var(--orange-dark); }
.bg-orange-soft { background-color: var(--orange-soft); }
.bg-cream { background-color: var(--cream-light); }
.bg-cream-deep { background-color: var(--cream-deep); }

.text-navy { color: var(--navy); }
.text-navy-ink { color: var(--navy-ink); }
.text-orange { color: var(--orange); }
.text-muted { color: var(--muted); }
.text-muted-2 { color: var(--muted-2); }

.border-navy { border-color: var(--navy); }
.border-cream-line { border-color: var(--cream-line); }
.border-orange { border-color: var(--orange); }

.hover\:bg-orange:hover { background-color: var(--orange); }
.hover\:bg-orange-dark:hover { background-color: var(--orange-dark); }
.hover\:bg-navy:hover { background-color: var(--navy); }
.hover\:bg-navy-soft:hover { background-color: var(--navy-soft); }
.hover\:text-orange:hover { color: var(--orange); }
.hover\:text-orange-dark:hover { color: var(--orange-dark); }
.hover\:text-navy-ink:hover { color: var(--navy-ink); }
.hover\:border-orange:hover { border-color: var(--orange); }
.group:hover .group-hover\:bg-orange { background-color: var(--orange); }
.group:hover .group-hover\:border-orange { border-color: var(--orange); }
.group:hover .group-hover\:bg-navy { background-color: var(--navy); }
.group:hover .group-hover\:border-navy { border-color: var(--navy); }
.hover\:border-navy:hover { border-color: var(--navy); }
.text-orange-dark { color: var(--orange-dark); }

/* Alias numerotes pour appareil_detail.html, qui compose ses classes
   dynamiquement via {{ couleur }} (ex: bg-{{ couleur }}-600) -- ce gabarit
   attend le pattern Tailwind complet, donc on le complete avec nos tons. */
.bg-navy-600, .bg-navy-500, .bg-navy-400 { background-color: var(--navy); }
.text-navy-600, .text-navy-500 { color: var(--navy); }
.text-navy-400 { color: #9db8d2; } /* teinte claire : visible en icone sur le hero navy fonce */
.border-navy-600 { border-color: var(--navy); }
.bg-navy-50 { background-color: var(--cream-deep); }
.border-navy-100 { border-color: var(--cream-line); }

.bg-orange-600, .bg-orange-500, .bg-orange-400 { background-color: var(--orange); }
.text-orange-600, .text-orange-500, .text-orange-400 { color: var(--orange); }
.border-orange-600 { border-color: var(--orange); }
.bg-orange-50 { background-color: var(--orange-soft); }
.border-orange-100 { border-color: var(--orange-soft); }

/* Grille technique en filigrane (identique a l'effet du hero abelec.com) */
.abelec-grid-bg {
    background-image:
        linear-gradient(rgba(15, 35, 64, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 35, 64, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Carte interactive (meme comportement hover que sur abelec.com) */
.abelec-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.abelec-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(26, 58, 92, 0.12);
    border-color: rgba(217, 126, 58, 0.4);
}
.cart-message[data-message-type="success"] {
background-color: #22c55e; /* Vert */
}

.cart-message[data-message-type="error"] {
background-color: #ef4444; /* Rouge */
}

.cart-message[data-message-type="warning"] {
background-color: #facc15; /* Jaune */
color: #000;
}

.progress-bar[data-message-type="success"] {
background-color: #15803d; /* Vert foncé */
}

.progress-bar[data-message-type="error"] {
background-color: #b91c1c; /* Rouge foncé */
}

.progress-bar[data-message-type="warning"] {
background-color: #ca8a04; /* Jaune foncé */
}

/* ══════════════════════════════════════════════════════════════════════
   Le logo dans l'en-tête.

   L'en-tête est transparent sur le hero, puis prend un fond blanc au
   défilement (classe .bg-white posée par le script). Le logo bleu marine
   disparaîtrait sur le premier, le blanc sur le second : on garde les deux
   dans le HTML et on laisse le CSS montrer celui qui se voit.
   ══════════════════════════════════════════════════════════════════════ */
.logo-abelec {
    display: block;
    width: auto;
    height: 1.85rem;
}

header .logo-abelec.sur-fond-clair { display: none; }
header.bg-white .logo-abelec.sur-fond-sombre { display: none; }
header.bg-white .logo-abelec.sur-fond-clair { display: block; }

/* Quand le hero est clair (classe posée sur <body>), l'en-tête n'a jamais de
   fond sombre sous lui : c'est le logo bleu qui vaut, dès le haut de page. Le
   script fait de même pour la couleur du texte. */
.hero-clair header .logo-abelec.sur-fond-sombre { display: none; }
.hero-clair header .logo-abelec.sur-fond-clair { display: block; }

@media (max-width: 767px) {
    .logo-abelec { height: 1.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Affichage mobile
   ══════════════════════════════════════════════════════════════════════ */

/* Un titre ne doit pas laisser un mot seul sur sa dernière ligne. */
h1, h2, h3 {
    text-wrap: balance;
}

@media (max-width: 640px) {
    /* Deux boutons côte à côte deviennent deux boutons de largeurs
       différentes, mal alignés. Sur un écran étroit on les empile, chacun
       sur toute la largeur : la cible est plus grande et le bloc est net. */
    .cta-paire {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .cta-paire > a {
        justify-content: center;
        margin-left: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   L'en-tête, repris du site principal.

   En haut de page il est transparent, posé sur le hero. Dès qu'on descend il
   devient une pastille blanche translucide aux bords ronds, centrée et plus
   étroite que la page. Et il s'efface quand on descend pour revenir dès qu'on
   remonte : sur une page longue, la lecture passe avant le menu.
   ══════════════════════════════════════════════════════════════════════ */
header {
    transition: transform .32s cubic-bezier(.16, 1, .3, 1),
                background-color .25s ease,
                box-shadow .25s ease,
                width .32s ease,
                border-radius .32s ease;
    will-change: transform;
}

header.bg-white {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - clamp(1rem, 6vw, 3rem));
    max-width: 980px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(26, 58, 92, .10);
    box-shadow: 0 4px 22px rgba(26, 58, 92, .10);
}

/* Dans la pastille, la gouttière large de la page n'a plus lieu d'être. Le
   bouton d'appel arrive jusqu'au bord : à droite, on ne garde que le jeu
   nécessaire pour que sa pastille ne touche pas celle de l'en-tête. */
header.bg-white .container {
    padding-left: 1.5rem;
    padding-right: 0.5rem;
    max-width: none;
}

header.bg-white .container > div {
    padding-top: 0;
    padding-bottom: 0;
}

header.entete-cachee { transform: translateY(-160%); }
header.bg-white.entete-cachee { transform: translateX(-50%) translateY(-180%); }

@media (prefers-reduced-motion: reduce) {
    header { transition: none; }
    header.entete-cachee,
    header.bg-white.entete-cachee { transform: none; }
}

/* Le texte du hero est calé à gauche, avec juste ce qu'il faut de marge pour
   respirer. La gouttière large de la page vaut pour les sections de contenu,
   pas pour une accroche qui doit occuper le bord de l'écran. */
#accueil > .container {
    max-width: none;
    padding-left: clamp(1.5rem, 3.2vw, 3rem);
    padding-right: clamp(1.5rem, 3.2vw, 3rem);
}

/* En haut de page, le logo doit tomber sur la même verticale que le titre du
   hero. Une fois en pastille, l'en-tête a sa propre géométrie. */
header:not(.bg-white) .container {
    /* Meme bande que le hero : au-dela de 1560 px, le logo doit tomber sur la
       meme verticale que le titre, sinon l'en-tete reste au bord pendant que
       le contenu se centre. */
    max-width: 1560px;
    padding-left: clamp(1.5rem, 3.2vw, 3rem);
    padding-right: clamp(1.5rem, 3.2vw, 3rem);
}

/* ══════════════════════════════════════════════════════════════════════
   Le hero.

   Le texte tient la colonne de gauche. La photo sort de la gouttière par la
   droite — c'est ce débordement qui donne son mouvement au bloc — et la carte
   du Hainaut se pose sur son coin inférieur gauche.

   Sur téléphone rien ne se superpose : le visuel suit le texte dans le flux,
   et la carte passe sous la photo. La bascule se fait à 1024 px, là où la
   colonne de texte cesse d'occuper toute la largeur.
   ══════════════════════════════════════════════════════════════════════ */
.hero-texte { max-width: 33rem; }

.hero-pastille {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--navy-ink);
    background: #fff;
    border: 1px solid var(--cream-line);
    border-radius: 9999px;
    padding: 0.375rem 0.75rem;
}

.hero-visuel {
    position: relative;
    padding: 0 clamp(1.5rem, 3.2vw, 3rem) 3rem;
}

.hero-visuel__photo {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(15, 35, 64, .5);
}

.hero-visuel__photo img {
    display: block;
    width: 100%;
    height: 15rem;
    object-fit: cover;
    /* Le cadrage tombe sur les mains et le tambour, pas sur le mur. */
    object-position: 54% 42%;
}

.hero-visuel__carte {
    margin: 1rem auto 0;
    max-width: 19rem;
    background: var(--cream-light);
    padding: 0.75rem;
    border-radius: 18px;
    box-shadow: 0 20px 44px -26px rgba(15, 35, 64, .45);
}

@media (min-width: 1200px) {
    /* Assez de hauteur pour que le visuel, qui est en absolu, ait la place de
       se poser sans que la section se referme dessus. */
    #accueil { min-height: 50rem; }

    /* Le visuel occupait 53 vw : entre la fin du texte et son bord gauche il
       restait 166 px de vide, trop etroit pour porter quoi que ce soit et trop
       large pour passer pour une gouttiere. Rien n'y est ajoute -- le trou est
       supprime.

       La largeur n'est pas un pourcentage : un pourcentage donne le bon ecart a
       une seule taille d'ecran et mord le texte partout ailleurs. Elle se
       calcule pour que l'ecart reste constant a 80 px :

           largeur = fenetre - (colonne de texte 33rem + 80px d'ecart) - gouttiere

       soit 34,25rem a retrancher, plus la gouttiere du hero. Plafonnee a 850 px,
       au-dela le hero deviendrait une photo avec du texte a cote. */
    /* Au-dela de 1560 px la bande du hero cesse de s'etirer et se centre :
       sans cela le texte reste colle au bord gauche pendant que la fenetre
       grandit, et l'ecart repasse a 500 px sur un grand ecran. */
    #accueil > .container { max-width: 1560px; }

    .hero-visuel {
        position: absolute;
        top: 9.5rem;
        /* Le visuel suit la bande quand elle se centre. */
        /* La photo ne sort plus de l'ecran. Elle y touchait le bord droit,
           et cette coupe franche ne plaisait pas : elle rentre dans la
           gouttiere, alignee sur le bord droit du contenu comme le reste de
           la page. Au-dela de 1560 px, la bande se centre et la photo suit :
           d'ou la marge ajoutee. */
        right: calc(clamp(1.5rem, 3.2vw, 3rem) + max(0px, (var(--vw) - 1560px) / 2));
        /* Le bloc entier -- photo ET carte, qui vaut 46 % de cette largeur --
           est reduit : d'abord de 10 % pour que le bas de la botte du Hainaut
           reste visible sur un 16:9, puis encore pour aerer maintenant que la
           photo ne deborde plus. */
        width: calc(min(970px, calc(min(var(--vw), 1560px) - 34.25rem - clamp(1.5rem, 3.2vw, 3rem))) * .84);
        padding: 0;
        z-index: 10;
    }

    .hero-visuel__photo { border-radius: 24px; }
    /* 31,25 rem moins 10 % : la photo suit la reduction de sa largeur. */
    .hero-visuel__photo img { height: 28.125rem; }

    /* Positionnée sur la photo et non sur la page : la carte reste accrochée
       à son coin quelle que soit la largeur de l'écran. */
    .hero-visuel__carte {
        position: absolute;
        /* En pixels et non en pourcentage : le decalage doit rester inferieur a
           l'ecart de 80 px, sinon la carte passe devant le texte. */
        left: -2.5rem;
        bottom: -3.5rem;
        width: 46%;
        max-width: none;
        margin: 0;
        padding: 0.875rem;
        border-radius: 20px;
        box-shadow: 0 24px 50px -26px rgba(15, 35, 64, .5);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   La grille des appareils.

   Elle en compte cinq depuis l'ajout du sèche-linge : dans une grille à deux
   colonnes, la dernière carte resterait seule sur sa ligne. Elle s'étend alors
   sur toute la largeur. La règle vaut pour tout nombre impair : ajouter un
   sixième appareil la désactive d'elle-même.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .grille-appareils > article:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Le comparatif des tarifs.

   Une seule liste d'items, deux formes selon la largeur. Chaque item porte sa
   valeur en pourcentage du maximum dans --part ; c'est la seule donnée, et
   elle sert de largeur sur téléphone comme de hauteur sur grand écran.

   Sous 768 px : une ligne par tarif, la barre pousse vers la droite derrière
   le texte. À quatre colonnes sur un téléphone, chacune tomberait à 64 px de
   large et les libellés se casseraient sur quatre lignes.

   Au-dessus : quatre colonnes posées sur un filet, le chiffre au-dessus.
   L'écart entre 40 € et 150 € se voit alors sans être lu.
   ══════════════════════════════════════════════════════════════════════ */
.comparatif {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    overflow: hidden;
}

.comparatif__item {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
}

.comparatif__item + .comparatif__item { border-top: 1px solid rgba(255, 255, 255, .08); }

/* La barre etait un aplat sur TOUTE la hauteur de la ligne, avec un liseré vif
   de 2 px sur son bord droit. Derriere le texte, ce liseré tombait au milieu
   d'un mot -- « Mons, Charleroi et les communes » coupe apres « Mons » -- et
   se lisait comme un defaut d'affichage, pas comme une barre.

   Elle devient un rail de 5 px pose au bas de la ligne : la barre redevient
   une barre, et le texte n'a plus rien qui le traverse. */
.comparatif__piste {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: .55rem;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    overflow: hidden;
}

.comparatif__barre {
    width: var(--part);
    height: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
}

.comparatif__item--nous .comparatif__barre { background: var(--orange); }

/* Le rail occupe le bas de la ligne : on lui laisse la place. */
.comparatif__item { padding-bottom: 1.6rem; }

.comparatif__valeur {
    position: relative;
    margin: 0;
    font-family: 'Roboto Slab', Georgia, serif;
    font-weight: 700;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .6);
    white-space: nowrap;
}

.comparatif__item--nous .comparatif__valeur { color: var(--orange); font-weight: 800; }

.comparatif__legende { position: relative; }
.comparatif__nom { margin: 0; font-weight: 600; color: rgba(255, 255, 255, .75); }
.comparatif__item--nous .comparatif__nom { color: #fff; font-weight: 700; }
.comparatif__detail { margin: 0.125rem 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, .45); }

.comparatif__ecart {
    margin: 0.375rem 0 0;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
}

@media (min-width: 768px) {
    .comparatif {
        flex-direction: row;
        align-items: flex-end;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    /* Pas d'écart entre les items : leurs légendes portent le filet de base,
       qui doit se lire comme une seule ligne continue sous les quatre colonnes.
       La respiration passe donc par le padding. */
    /* Aucun padding sur l'item : le filet de base porte par sa légende doit
       courir d'un bord à l'autre sans interruption. L'écart entre les colonnes
       vient de la largeur maximale de la piste, pas d'une gouttière. */
    .comparatif__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0;
        border: 0;
    }

    .comparatif__item + .comparatif__item { border-top: 0; }

    .comparatif__valeur { font-size: 1.75rem; margin-bottom: 0.75rem; }
    .comparatif__item--nous .comparatif__valeur { font-size: 2.25rem; }

    .comparatif__piste {
        position: static;
        display: flex;
        align-items: flex-end;
        width: 100%;
        max-width: 8.25rem;
        height: 17.5rem;
        /* Le rail arrondi est une forme MOBILE : ici la piste n'est qu'un
           espace de dessin, sans fond ni arrondi -- sinon la colonne serait
           rognee par le overflow du rail. */
        background: none;
        border-radius: 0;
        overflow: visible;
    }

    .comparatif__barre {
        width: 100%;
        height: var(--part);
        border-right: 0;
        border-radius: 4px 4px 0 0;
        background: rgba(255, 255, 255, .4);
    }

    .comparatif__item--nous .comparatif__barre { background: var(--orange); }

    .comparatif__legende {
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, .25);
        padding: 1rem 0.75rem 0;
        box-sizing: border-box;
    }

    .comparatif__nom { font-size: 0.9375rem; }
    .comparatif__detail { font-size: 0.8125rem; line-height: 1.4; }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile : les textes longs cessent d'être centrés.

   Un paragraphe de sept lignes centré fait repartir l'œil d'une abscisse
   différente à chaque ligne ; sur 375 px de large, la lecture décroche. Les
   blocs marqués `centre-md` restent centrés à partir de 768 px et s'alignent
   à gauche en dessous. Les titres courts et les libellés mono, eux, gardent
   leur centrage partout — c'est la longueur qui pose problème, pas le
   centrage lui-même.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .centre-md,
    .centre-md p,
    .centre-md h2,
    .centre-md h3 {
        text-align: left;
    }

    /* Ces blocs sont centrés par `mx-auto` sous une largeur de lecture ; une
       fois alignés à gauche, la marge automatique n'a plus lieu d'être. */
    .centre-md .mx-auto { margin-left: 0; margin-right: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   La barre d'action mobile.

   Elle remplace le bouton rond de 56 px, qui n'offrait que l'appel et
   recouvrait le contenu sans réserver sa place. Deux actions : décrire la
   panne, ou téléphoner. Le pied de page porte la marge basse correspondante
   — la mettre sur <body> laisserait une bande crème sous le footer navy.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .barre-mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        gap: 0.625rem;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        background: rgba(15, 35, 64, .92);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .barre-mobile__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        height: 3.125rem;          /* 50 px : au-dessus du minimum tactile */
        border-radius: 9999px;
        font-weight: 600;
        font-size: 0.9375rem;
        white-space: nowrap;
        transition: background-color .2s ease;
    }

    .barre-mobile__action--principale {
        flex: 1;
        min-width: 0;
        background: var(--orange);
        color: #fff;
    }

    .barre-mobile__action--seconde {
        flex: 0 0 auto;
        padding: 0 1.125rem;
        color: #fff;
        background: rgba(255, 255, 255, .10);
        border: 1px solid rgba(255, 255, 255, .22);
    }

    /* La barre recouvre le bas de page : on lui réserve sa hauteur. */
    #contact { padding-bottom: 5.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   La bannière d'une page ville.

   Une photo de la commune sous un voile navy. Le dégradé est presque opaque
   à gauche, là où passe le titre, et s'ouvre vers la droite : la photo se
   voit sans que le texte ait à lutter. Le contraste ne dépend donc pas de
   la photo — une commune claire ou sombre donne le même résultat.
   ══════════════════════════════════════════════════════════════════════ */
.hero-ville {
    position: relative;
    background-color: var(--navy-ink);   /* tant que la photo n'est pas chargée */
    background-size: cover;
    background-position: center;
}

.hero-ville::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(15, 35, 64, .95) 0%,
        rgba(15, 35, 64, .90) 42%,
        rgba(15, 35, 64, .62) 78%,
        rgba(15, 35, 64, .48) 100%);
}

/* Tout le contenu repasse au-dessus du voile. */
.hero-ville > * { position: relative; z-index: 1; }

/* Present dans le DOM, hors de l'ecran.

   Sert au credit photo : la licence CC BY exige une attribution, et un
   commentaire HTML n'en est pas une -- un lecteur d'ecran ne le lit pas,
   un robot ne l'indexe pas. Ce bloc, si.

   clip-path plutot que display:none ou visibility:hidden, qui le
   retireraient de l'arbre d'accessibilite. */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    /* Sur un écran étroit la photo n'a plus de place à droite : le voile se
       ferme, et elle ne sert plus que de texture. */
    .hero-ville::before {
        background: linear-gradient(180deg, rgba(15, 35, 64, .90) 0%, rgba(15, 35, 64, .95) 100%);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Icones reseaux sociaux du pied de page

   Elles etaient quatre fois la meme balise de 300 caracteres, styles en
   ligne. Le pied de page boucle desormais sur site_config.CONTACT["reseaux"].
   ══════════════════════════════════════════════════════════════════════ */
.lien-reseau {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    color: #b8c6d6;
    transition: background-color .2s, color .2s;
}

.lien-reseau:hover {
    background: var(--orange);
    color: #fff;
}

/* Lien inactif ("#") : il reste visible, mais rien n'invite a cliquer. */
.lien-reseau[aria-disabled="true"] {
    cursor: default;
    opacity: .55;
}

.lien-reseau[aria-disabled="true"]:hover {
    background: rgba(255, 255, 255, .06);
    color: #b8c6d6;
}

/* ══════════════════════════════════════════════════════════════════════
   Page de confirmation (/depannage/merci/)

   La meme page sert deux fois : en pleine page quand le formulaire part
   sans JavaScript, et dans le cadre de la fenetre de confirmation quand il
   part en arriere-plan. `.dans-cadre` est pose sur <html> par un script en
   tete de page -- avant le premier pixel, donc sans scintillement.
   ══════════════════════════════════════════════════════════════════════ */
.merci {
    padding: 4.5rem 0 5.5rem;
}

.merci__carte {
    max-width: 40rem;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--cream-line);
    border-radius: 1rem;
    padding: 2.75rem 2.5rem 2.25rem;
    box-shadow: 0 30px 60px -32px rgba(15, 35, 64, .35);
}

/* La pastille verte : le seul element de la page a etre vu avant d'etre lu.
   Le vert n'existait pas dans la palette -- il n'y a de vert nulle part
   ailleurs sur le site, et c'est voulu : ici il ne decore pas, il dit
   « c'est passe ». */
.merci__sceau {
    width: 5.25rem;
    height: 5.25rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vert);
    color: #fff;
    font-size: 2.6rem;
    /* Le halo double le diametre apparent sans peser : c'est lui qui donne
       sa taille a la confirmation. */
    box-shadow: 0 0 0 .75rem var(--vert-halo);
}

.merci__titre {
    font-family: 'Roboto Slab', Georgia, serif;
    /* Le titre est passe d'un « C'est envoye » de trois mots a une phrase
       entiere : il descend d'un cran pour tenir sur deux lignes. */
    font-size: clamp(1.4rem, 3.4vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--navy-ink);
    text-align: center;
    margin-bottom: .85rem;
}

.merci__chapo {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.6;
    text-align: center;
    max-width: 26rem;
    margin: 0 auto 2rem;
}

/* Trois lignes, une idee chacune. C'etaient trois paragraphes numerotes. */
.merci__etapes {
    list-style: none;
    margin: 0 0 2rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--cream-line);
}

.merci__etapes li {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
    padding: .45rem 0;
}

.merci__etapes i {
    flex-shrink: 0;
    color: var(--vert);
    font-size: 1rem;
    width: 1.35rem;
    text-align: center;
}

.merci__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cream-line);
}

.merci__bouton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* Le minimum tactile, compense du zoom : voir --cible-tactile. */
    min-height: var(--cible-tactile);
    padding: .7rem 1.25rem;
    border-radius: .55rem;
    font-weight: 600;
    font-size: .95rem;
    transition: background-color .2s, border-color .2s, color .2s;
}

.merci__bouton--principal {
    background: var(--orange);
    color: #fff;
}

.merci__bouton--principal:hover {
    background: var(--orange-dark);
    color: #fff;
}

.merci__bouton--second {
    border: 1px solid var(--cream-line);
    color: var(--navy-ink);
}

.merci__bouton--second:hover {
    border-color: var(--orange);
    color: var(--navy-ink);
}

/* ── Dans le cadre de la fenetre ─────────────────────────────────────── */
.dans-cadre .hors-cadre {
    display: none;
}

/* Blanc, comme la carte. Sur telephone la fenetre occupe tout l'ecran et la
   carte ne le remplit pas : le creme du fond apparaissait sous les boutons
   comme une bande etrangere. */
.dans-cadre body {
    background: #fff;
}

.dans-cadre .merci {
    padding: 0;
}

.dans-cadre .container {
    padding-left: 0;
    padding-right: 0;
}

/* Dans la fenetre, la carte EST la fenetre : ni ombre, ni bord, ni coins
   arrondis a l'interieur d'une boite qui en a deja. */
.dans-cadre .merci__carte {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 2.25rem 2rem 2rem;
}

@media (max-width: 480px) {
    .merci {
        padding: 2.5rem 0 3.5rem;
    }

    .merci__carte {
        padding: 1.75rem 1.35rem 1.5rem;
    }

    .dans-cadre .merci__carte {
        padding: 1.75rem 1.35rem 1.5rem;
    }

    .merci__bouton {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Bac a messages

   Remplace top-[75px] et max-w-[95%] : des valeurs arbitraires Tailwind,
   sans effet sur la version CDN 2.2.19, qui est pre-compilee. Le bac
   restait donc sans decalage sous l'en-tete mobile.
   ══════════════════════════════════════════════════════════════════════ */
.bac-messages {
    top: 75px;
    max-width: 95%;
    pointer-events: none;
}

.bac-messages > * {
    pointer-events: auto;
}

@media (min-width: 768px) {
    .bac-messages {
        max-width: 26rem;
    }
}

/* Erreur de validation renvoyee par le formulaire en arriere-plan. */
.message-erreur {
    background: #b3261e;
    color: #fff;
    padding: .75rem 1.15rem;
    border-radius: .55rem;
    font-weight: 500;
    font-size: .93rem;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5);
}

/* ══════════════════════════════════════════════════════════════════════
   Fenetre de confirmation

   Elle ne contient qu'un cadre : /depannage/merci/ y est chargee telle
   quelle, avec son URL et sa balise Analytics. Voir index.html.
   ══════════════════════════════════════════════════════════════════════ */
.modale {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.modale[hidden] {
    display: none;
}

.modale__voile {
    position: absolute;
    inset: 0;
    background: rgba(15, 35, 64, .62);
    backdrop-filter: blur(3px);
    animation: modale-voile .22s ease-out;
}

.modale__boite {
    position: relative;
    width: 100%;
    max-width: 41rem;
    /* Hauteur de depart, le temps que le cadre charge. Le script la remplace
       ensuite par la hauteur REELLE du contenu (voir index.html) : la
       confirmation a maigri, une hauteur figee laissait un pan de creme vide
       sous les boutons. Elle ne depasse jamais l'ecran. */
    height: min(30rem, calc(100vh - 2.5rem));
    max-height: calc(100vh - 2.5rem);
    transition: height .2s ease;
    background: var(--cream-deep);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
    animation: modale-boite .26s cubic-bezier(.2, .8, .3, 1);
}

.modale__cadre {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.modale__fermer {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    /* Le minimum tactile, compense du zoom : voir --cible-tactile. */
    width: var(--cible-tactile);
    height: var(--cible-tactile);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--cream-line);
    color: var(--navy-ink);
    font-size: .95rem;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.modale__fermer:hover {
    background: var(--navy-ink);
    border-color: var(--navy-ink);
    color: #fff;
}

/* Le site ne defile plus derriere la fenetre. */
body.modale-ouverte {
    overflow: hidden;
}

@keyframes modale-voile {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modale-boite {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .modale__voile,
    .modale__boite {
        animation: none;
    }
}

@media (max-width: 600px) {
    .modale {
        padding: 0;
    }

    .modale__boite {
        max-width: none;
        height: 100%;
        border-radius: 0;
    }
}

/* Barre ordinaire, pour les pages sans hero (confirmation). `bg-white` ne
   convient pas : sur les autres pages, cette classe declenche la pastille
   flottante -- pilule arrondie, centree par translateX. */
.entete-simple {
    background: #fff;
    border-bottom: 1px solid var(--cream-line);
}

/* ══════════════════════════════════════════════════════════════════════
   Echelle generale du site

   Demande : « dezoome le site entier de 10 %, comme quand on dezoome dans
   Chrome ». C'est exactement ce que fait `zoom` -- et c'est la seule
   propriete qui le fasse : `font-size: 90%` ne toucherait que les rem et
   laisserait tous les px en place, `transform: scale()` casserait les
   elements en position fixe et les unites de viewport.

   Pose sur :root, donc les media queries continuent de s'evaluer sur la
   VRAIE largeur de fenetre : les points de rupture ne bougent pas, seul le
   contenu retrecit.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    zoom: .9;

    /* La largeur de la fenetre, exprimee dans les px du sous-arbre zoome.
       `zoom` retrecit ce qu'il contient mais laisse 100vw valoir la largeur
       NON zoomee : a 1440 px de fenetre, 100vw se rend a 1296 px. Toute
       formule qui compare 100vw a une largeur en px se trompe donc de 10 %
       -- c'est ce qui faisait deborder la photo du hero de 54 px.

       Le .9 doit rester identique a celui du zoom ci-dessus. */
    --vw: calc(100vw / .9);

    /* Meme raison pour les cibles tactiles : 44 px declares n'en font plus
       que 39,6 a l'ecran une fois zoomes -- sous le minimum au-dela duquel
       un doigt rate le bouton. On les declare a 44 / .9 pour en retrouver
       44 REELS. La barre mobile, elle, etait deja a 50 px : elle passe a
       45, toujours au-dessus. */
    --cible-tactile: 3.0625rem;
}

/* Les deux boutons de l'en-tete mobile portaient w-11 h-11 (44 px) en classes
   Tailwind. Zoomes, ils tombaient a 39,6 px : ils passent au minimum reel. */
header .cible-tactile {
    width: var(--cible-tactile);
    height: var(--cible-tactile);
}

/* ══════════════════════════════════════════════════════════════════════
   Cibles tactiles du formulaire et du pied de page

   Les champs faisaient 42 px de haut en CSS, soit 37,8 px a l'ecran une
   fois le zoom applique : sous le seuil ou un doigt commence a manquer sa
   cible. C'est le chemin de conversion du site, c'est la que ca compte le
   plus.
   ══════════════════════════════════════════════════════════════════════ */
#form-depannage input,
#form-depannage textarea,
#form-depannage select,
/* Le champ code postal du hero : premiere chose que touche un visiteur. */
#accueil form input {
    min-height: var(--cible-tactile);
}

/* Un lien qui a l'apparence d'un bouton doit avoir la taille d'un bouton.
   Ceux-la tombaient entre 36 et 43 px reels. min-height suffit : ils sont
   tous en inline-flex, donc le texte reste centre. */
button,
a.bg-orange,
a.bg-navy-ink,
.cta-paire a,
.lien-reseau {
    min-height: var(--cible-tactile);
}

.lien-reseau {
    width: var(--cible-tactile);
    height: var(--cible-tactile);
}

#form-depannage textarea {
    /* Trois lignes de saisie : le minimum ne doit pas l'ecraser. */
    min-height: calc(var(--cible-tactile) * 2);
}

/* Les liens du pied de page etaient empiles sans respiration : sur un
   telephone, deux communes voisines se touchent presque. */
footer nav a,
footer ul a {
    display: inline-block;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Navigation de l'en-tete

   Six sections au lieu de trois : les libelles se resserrent pour tenir
   entre le logo et le bouton d'appel.
   ══════════════════════════════════════════════════════════════════════ */
.lien-nav {
    font-size: .95rem;
    white-space: nowrap;
    transition: color .2s;
}

.lien-nav:hover { color: var(--orange); }

@media (max-width: 1150px) {
    .lien-nav { font-size: .875rem; }
    header nav li { margin-left: .55rem; margin-right: .55rem; }
}

/* Menu mobile : une ligne par section, cible tactile pleine largeur. */
.lien-menu {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--cible-tactile);
    font-size: 1.05rem;
    color: var(--navy-ink);
}

.lien-menu i { color: var(--orange); font-size: 1.05rem; width: 1.4rem; }
.lien-menu:hover { color: var(--orange); }

.lien-menu--appel {
    margin-top: .5rem;
    justify-content: center;
    background: var(--orange);
    color: #fff;
    border-radius: .6rem;
    font-weight: 600;
}

.lien-menu--appel i { color: #fff; width: auto; }
.lien-menu--appel:hover { background: var(--orange-dark); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   Champ telephone : la case pays et la saisie

   La case etait figee a h-12 (48 px) pendant que le champ recevait le
   minimum tactile de 49 px. Un pixel d'ecart, mais il suffit a decaler les
   deux filets et a faire lire l'ensemble comme mal monte. Les deux
   partagent desormais la meme hauteur, et le bord commun n'est trace
   qu'une fois.
   ══════════════════════════════════════════════════════════════════════ */
.champ-telephone__pays {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    min-height: var(--cible-tactile);
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--cream-line);
    /* Le filet de droite appartient au champ : sans cela, deux traits d'un
       pixel se superposent et la jointure parait plus epaisse. */
    border-right: 0;
    border-radius: .25rem 0 0 .25rem;
}

.champ-telephone__saisie {
    border-radius: 0 .25rem .25rem 0;
}

/* Les deux actions se centrent comme le reste de la confirmation. */
.merci__actions { justify-content: center; }