/* ============================================================================
   coralieponcelet.be — feuille unique
   ============================================================================

   Refonte d'octobre 2026. La référence visuelle est maquettes/moderne-2.html
   (accueil) et maquettes/services.html, et leurs valeurs vivent ici sous
   forme de tokens : AUCUNE valeur en dur dans les règles, hors cas ponctuel
   commenté. Les maquettes ne sont jamais servies.

   Ordre du fichier, à respecter :
     1. @font-face
     2. Tokens (:root)
     3. Remise à zéro et éléments de base
     4. Accessibilité
     5. Ratios d'image et placeholders
     6. Composants — boutons, en-tête, pied, textes, mises en page, médias,
        listes, frise, bulle d'étape, comparateur, paire, formulaire,
        messages, cartes, bandeau, rappel, apparitions
     7. Sections propres à une page — accueil, services
     8. Surcharges max-width — EN DERNIER, de la plus large à la plus étroite

   Structure fluide, surcharges en max-width uniquement. Ne jamais écrire de
   min-width : la cascade deviendrait illisible.
   ============================================================================ */


/* ---------------------------------------------------------------- 1. Polices
   Auto-hébergées, sous-ensemble latin (il couvre le français, œ et Œ compris).
   Polices variables : un seul fichier par famille couvre 400 à 600.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Literata';
    src: url('/fonts/literata-latin-var.woff2') format('woff2-variations');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('/fonts/instrument-sans-latin-var.woff2') format('woff2-variations');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ----------------------------------------------------------------- 2. Tokens
   Toute valeur vit ici. Les surcharges de § 8 ne font que redéfinir des
   tokens ou des grilles, jamais introduire une couleur.
   -------------------------------------------------------------------------- */

:root {
    /* --- Identité : les quatre couleurs de la charte ---------------------
       APLATS, TRAITS ET BORDURES DÉCORATIVES UNIQUEMENT. Seule la
       terracotta tient AA en texte (5,4:1 sur blanc, 4,6:1 sur sable) : elle
       ne sert de texte qu'en grand corps (exergue). */
    --sauge:            #7E8B78;
    --sauge-clair:      #A7B59D;
    --terracotta:       #A4524D;
    --terracotta-clair: #CE7368;

    /* --- Rôles : dérivés de la charte en OKLCH, ne pas retoucher à l'œil */
    --vert:            #596554;   /* 6,2:1 sur blanc */
    --vert-fonce:      #475241;   /* 8,2:1 sur blanc */
    --vert-voile:      rgba(89, 101, 84, .92);
    --accent:          #954440;   /* décor : puces, filets, surtitre · 6,6:1 */

    /* Focus : JAMAIS l'accent. La terracotta assombrie et le rouge d'erreur
       sont la même couleur à l'œil ; un anneau terracotta se lirait comme
       une erreur. La maquette posait --accent sur les boutons : écart
       volontaire, voir CLAUDE.md. */
    --focus:           var(--vert-fonce);
    --erreur:          #A8322B;

    --encre:           #232720;   /* 15,2:1 */
    --encre-douce:     #5E6A58;   /* 5,7:1 sur blanc, 4,9:1 sur sable */

    --surface:         #FFFFFF;
    --sable:           #F2EDE7;
    --sable-fonce:     #E7DFD6;
    --filet:           #E3DCD4;
    --filet-fort:      #C9C0B8;
    --sur-vert:        #D7E5D1;   /* 4,7:1 sur --vert */
    --entete-fond:     var(--surface);
    /* Fond du pied : le neutre chaud de la charte, et non une teinte de vert.
       Sur --sauge-clair, l'aplat et le trait sauge du logo disparaissaient.
       --vert-fonce dessus : 6,2:1 (AA). Se détache du blanc (1,3:1) et du
       vert de la section contact (4,7:1). */
    --pied-fond:       var(--sable-fonce);

    /* --- Typographie ----------------------------------------------------- */
    --police-titre: Literata, Georgia, 'Times New Roman', serif;
    --police-texte: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --t-h1:          clamp(39px, 4.8vw, 72px);
    --t-h2:          clamp(32px, 3.4vw, 49px);
    --t-h2-contact:  clamp(34px, 3.6vw, 51px);
    --t-h2-page:     clamp(27px, 3vw, 38px);    /* Services : lecture courte */
    --t-h1-page:     clamp(38px, 5vw, 60px);    /* Services */
    --t-h3:          clamp(22px, 2vw, 25px);
    --t-mission:     clamp(35px, 5vw, 68px);
    --t-exergue:     clamp(26px, 2.3vw, 32px);
    --t-situation:   clamp(23px, 2.2vw, 28px);
    --t-prix:        clamp(58px, 6vw, 80px);
    --t-montant:     30px;
    --t-forfait:     38px;
    --t-chapo:       clamp(17px, 1.6vw, 20px);
    --t-texte-plus:  clamp(17px, 1.4vw, 18px);
    --t-legende:     20px;
    --t-texte:       17px;
    --t-ui:          16px;
    --t-petit:       15px;
    --t-fine:        14px;
    --t-micro:       13px;
    --t-etiquette:   12px;

    --lh-texte:      1.8;
    --lh-section:    1.9;
    --lh-titre:      1.18;
    --ls-titre:      -.04em;
    --ls-surtitre:   .15em;
    --mesure:        58ch;     /* longueur de ligne maximale d'un paragraphe */

    /* --- Espacements ----------------------------------------------------- */
    --largeur-max:     1360px;
    --gouttiere:       clamp(24px, 5.5vw, 88px);
    --section-y:       clamp(64px, 8vw, 108px);
    --section-y-large: clamp(80px, 10vw, 144px);
    --section-y-court: clamp(40px, 5vw, 72px);  /* Services */
    --hero-y-haut:     clamp(15px, 2vw, 25px);
    --hero-y-bas:      clamp(45px, 5vw, 65px);
    --pied-y:          42px;

    --ecart-xs:        clamp(18px, 2.5vw, 28px);
    --ecart-md:        clamp(24px, 4vw, 56px);
    --ecart-lg:        clamp(28px, 5vw, 64px);
    --ecart-duo:       clamp(32px, 9vw, 130px);
    --ecart-duo-serre: clamp(24px, 5vw, 72px);

    /* --- Rayons ---------------------------------------------------------- */
    --r-etiquette: 10px;
    --r-champ:     10px;
    --r-carte:     14px;
    --r-media:     16px;
    --r-bouton:    999px;
    --r-rond:      50%;

    /* --- Boutons : modifier les paramètres ici --------------------------- */
    --bouton-h:          52px;
    --bouton-h-petit:    44px;
    --bouton-padding:    22px;
    --bouton-bordure:    1.5px;
    --bouton-t:          15px;
    --bouton-t-petit:    14px;
    --bouton-espace:     24px;   /* marge au-dessus d'un bouton dans le flux */

    /* --- En-tête --------------------------------------------------------- */
    --entete-h:             100px;
    --entete-h-compact:     72px;
    --logo-taille:          72px;
    --logo-taille-compact:  54px;
    /* Source UNIQUE du scroll-margin-top des ancres : l'ancre ne passe
       jamais sous l'en-tête collant. */
    --nav-h:                calc(var(--entete-h) + 10px);

    /* --- Frise et bulles ------------------------------------------------- */
    --frise-trait:        1px;
    --frise-point:        8px;
    --bulle-taille:       36px;

    /* --- Bon cadeau de l'accueil (jusqu'au 31/12/2026) -------------------
       Le bon est un objet dessiné : ses mesures lui sont propres. Réduites
       sous 600 px (§ 8). */
    --bon-largeur:        540px;
    --bon-talon:          150px;    /* largeur du talon perforé */
    --bon-encoche:        12px;     /* rayon des deux découpes */
    --bon-inclinaison:    -3deg;    /* redressé au survol */
    --r-bon:              12px;
    --t-bon-titre:        30px;
    --t-bon-prix:         52px;
    --t-bon-mini:         11px;     /* surtitre et durée, en capitales */
    --duree-bon:          .45s;
    --courbe-bon:         cubic-bezier(.2, .8, .2, 1);

    /* --- Mouvement ------------------------------------------------------- */
    --transition:          .25s ease;
    --duree-bouton:        200ms;
    --duree-entete:        .3s;
    --duree-zoom:          .6s;
    --zoom-survol:         1.025;
    --duree-apparition:    .85s;
    --decalage-apparition: 22px;
    --duree-mission:       1.4s;
    --duree-frise:         750ms;
}


/* --------------------------------------------------- 3. Remise à zéro et base
   -------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

[id] { scroll-margin-top: var(--nav-h); }

body {
    margin: 0;
    background: var(--surface);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: var(--t-ui);
    line-height: var(--lh-texte);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 400;
    letter-spacing: var(--ls-titre);
    color: var(--vert);
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: 1.12; }
h2 { font-size: var(--t-h2); line-height: var(--lh-titre); }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p, ul, ol, figure, figcaption, blockquote, dl, dd, fieldset { margin: 0; }

p { max-width: var(--mesure); }

a {
    color: var(--vert);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--vert-fonce);
    text-decoration-color: var(--vert);
}

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

/* 16 px minimum : en dessous, iOS Safari zoome au focus. */
input, textarea, select, button {
    font: inherit;
    font-size: var(--t-ui);
}

.conteneur {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}


/* ------------------------------------------------------- 4. Accessibilité
   -------------------------------------------------------------------------- */

/* NE JAMAIS supprimer sans remplacement visible. */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* Sur le vert, --focus disparaît : blanc à la place (6,2:1). Les surfaces
   blanches posées sur le vert gardent --focus. */
.section--vert :focus-visible { outline-color: var(--surface); }
.section--vert .formulaire :focus-visible,
.section--vert .message :focus-visible { outline-color: var(--focus); }
/* Même chose sur le vert foncé du bon cadeau. */
.cadeau :focus-visible { outline-color: var(--surface); }

.lien-evitement {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    transform: translateY(-120%);
    padding: 12px 20px;
    border-radius: 0 0 var(--r-carte) 0;
    background: var(--surface);
    color: var(--vert);
    text-decoration: none;
    transition: transform var(--transition);
}

.lien-evitement:focus { transform: translateY(0); }

main:focus { outline: none; }

/* Honeypot : hors écran plutôt que display:none, que les robots détectent. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ------------------------------------------ 5. Ratios d'image et placeholders
   Seule famille de classes utilitaires tolérée (avec .hp).
   -------------------------------------------------------------------------- */

.r-4-5  { aspect-ratio: 4 / 5;  }
.r-3-2  { aspect-ratio: 3 / 2;  }
.r-1-1  { aspect-ratio: 1 / 1;  }
.r-16-9 { aspect-ratio: 16 / 9; }

.photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-media);
}

.photo-attente {
    display: flex;
    align-items: flex-end;
    width: 100%;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--filet);
    border-radius: var(--r-media);
    background: repeating-linear-gradient(135deg,
                var(--sable) 0 12px, var(--sable-fonce) 12px 24px);
}

.photo-attente-format { position: absolute; left: -9999px; }

.photo-attente-brief {
    padding: 8px 12px;
    border: 1px solid var(--filet);
    border-radius: var(--r-etiquette);
    background: var(--surface);
    color: var(--encre);
    font-size: var(--t-fine);
    line-height: 1.4;
}


/* ============================================================================
   6. Composants
   ============================================================================ */

/* ------------------------------------------------------------- 6.1 Boutons
   Un seul système : .bouton (principal, plein) et .bouton--secondaire
   (contour). Tous en pilule. Les paramètres sont les tokens --bouton-*. */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: var(--bouton-h);
    padding: 0 var(--bouton-padding);
    border: var(--bouton-bordure) solid var(--vert);
    border-radius: var(--r-bouton);
    background: var(--vert);
    color: var(--surface);
    font: 500 var(--bouton-t) / 1.15 var(--police-texte);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duree-bouton) ease,
                color var(--duree-bouton) ease,
                border-color var(--duree-bouton) ease;
}

.bouton:hover {
    background: var(--vert-fonce);
    border-color: var(--vert-fonce);
    color: var(--surface);
}

.bouton--secondaire {
    background: transparent;
    color: var(--vert);
}

.bouton--secondaire:hover {
    background: var(--vert);
    border-color: var(--vert);
    color: var(--surface);
}

.bouton--petit {
    min-height: var(--bouton-h-petit);
    font-size: var(--bouton-t-petit);
}

/* Sur fond vert : le plein inversé, sinon vert sur vert. */
.bouton--clair {
    background: var(--surface);
    border-color: var(--surface);
    color: var(--vert);
}

.bouton--clair:hover {
    background: var(--sable);
    border-color: var(--sable);
    color: var(--vert-fonce);
}

/* Un bouton qui suit un texte prend son recul ici, une seule fois. */
.action { margin-top: var(--bouton-espace); }
/* Sans plafond de mesure : sinon le <p> s'arrête à 58ch et le bouton se
   centre dans cette colonne, à gauche de la section. */
.action--centre { max-width: none; text-align: center; }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: var(--bouton-espace);
}


/* ------------------------------------------------- 6.2 En-tête, navigation
   .entete-espace est l'élément COLLANT, de hauteur fixe ; .entete est posé
   en absolu dedans. Quand l'en-tête se compacte au défilement, rien ne
   bouge dessous : la page ne saute pas. */

.entete-espace {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--entete-h);
}

.entete {
    position: absolute;
    inset: 0 0 auto;
    background: var(--entete-fond);
    border-bottom: 1px solid var(--filet);
}

.entete-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 24px;
    min-height: var(--entete-h);
    transition: min-height var(--duree-entete) ease;
}

.entete.is-compact .entete-barre { min-height: var(--entete-h-compact); }

.entete-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    color: var(--encre);
    text-decoration: none;
}

.entete-logo-marque {
    flex: 0 0 auto;
    width: var(--logo-taille);
    height: var(--logo-taille);
    object-fit: contain;
    transition: width var(--duree-entete) ease, height var(--duree-entete) ease;
}

.entete.is-compact .entete-logo-marque {
    width: var(--logo-taille-compact);
    height: var(--logo-taille-compact);
}

.entete-logo-nom {
    display: grid;
    line-height: 1.4;
    white-space: nowrap;
}

.entete-logo-personne {
    font-family: var(--police-titre);
    font-size: 18px;   /* entre --t-texte et --t-legende : propre au logo */
    color: var(--vert);
}

.entete-logo-metier {
    font-size: var(--t-micro);
    color: var(--encre-douce);
}

.entete-nav { margin-left: auto; }

.entete-liste {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.entete-liste a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid transparent;
    color: var(--encre);
    font-size: var(--t-fine);
    text-decoration: none;
}

.entete-liste a:hover { color: var(--vert); }
.entete-liste a[aria-current="page"] { color: var(--vert); box-shadow: inset 0 -2px 0 -0.5px var(--accent); }

/* Le contact : toujours visible, en contour pendant le premier écran, plein
   ensuite (.is-plein, posé par js/site.js). */
.entete-contact { flex-shrink: 0; }

.entete-contact.is-plein {
    background: var(--vert);
    color: var(--surface);
}

.entete-contact.is-plein:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }

.entete-contact-court { display: none; }

.entete-bascule {
    display: none;              /* affiché sous 900 px, voir § 8 */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.entete-bascule span {
    display: block;
    width: 24px;
    height: 2px;
    margin-inline: auto;
    background: var(--encre);
    transition: transform var(--transition), opacity var(--transition);
}

.entete-bascule.is-ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.entete-bascule.is-ouvert span:nth-child(2) { opacity: 0; }
.entete-bascule.is-ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* --------------------------------------------------------- 6.3 Pied de page */

.pied {
    padding-block: var(--pied-y) 0;
    background: var(--pied-fond);
    color: var(--vert-fonce);
}

.pied-grille {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 24px 65px;
}

.pied-identite {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pied-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.pied-nom {
    font-family: var(--police-titre);
    font-size: var(--t-fine);
}

.pied-zone {
    font-size: var(--t-micro);
    color: var(--vert-fonce);
    text-align: right;
    justify-self: end;
}

.pied a {
    color: var(--vert-fonce);
    font-size: var(--t-micro);
}

.pied-email { justify-self: start; }

.pied-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 20px;
}

.pied-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
}

.pied-nav a:hover { text-decoration: underline; }

.pied-bas { padding-block: 10px 30px; }


/* ------------------------------------------------- 6.4 Sections et textes */

.section { padding-block: var(--section-y); }
.section--sable { background: var(--sable); }
.section--filet { border-top: 1px solid var(--filet); }
.section--hero { padding-block: var(--hero-y-haut) var(--hero-y-bas); }

.section--vert {
    background: var(--vert);
    color: var(--surface);
}

.section--vert h1,
.section--vert h2,
.section--vert h3 { color: var(--surface); }

.section--vert a:not(.bouton) {
    color: var(--surface);
    text-decoration-color: rgba(255, 255, 255, .5);
}

/* Rythme interne : un titre prend son recul, deux paragraphes aussi. */
.section h1 { margin-bottom: 28px; }
.section h2 { margin-bottom: 30px; }
.section p + p { margin-top: 18px; }

/* Petite ligne au-dessus du h1 : capitales espacées, accent. */
.surtitre {
    margin-bottom: 24px;
    color: var(--accent);
    font-size: var(--t-etiquette);
    font-weight: 600;
    letter-spacing: var(--ls-surtitre);
    text-transform: uppercase;
}

.chapo {
    max-width: 43ch;
    font-size: var(--t-chapo);
    line-height: 1.7;
}

.texte-section {
    font-size: var(--t-texte-plus);
    line-height: var(--lh-section);
}

.note {
    margin-top: 16px;
    color: var(--encre-douce);
    font-size: var(--t-micro);
}

.section .note + .note { margin-top: 5px; }
.section--vert .note { color: var(--sur-vert); }

/* La voix de la page, en grand, sans filet ni fond. Terracotta : 5,4:1 sur
   blanc, 4,6:1 sur sable, toujours en corps de titre. */
.exergue {
    max-width: 26ch;
    margin-block: 36px 0;
    font-family: var(--police-titre);
    font-size: var(--t-exergue);
    font-style: normal;
    line-height: 1.45;
    color: var(--terracotta);
}

.exergue + p { margin-top: 36px; }

.titre-centre { text-align: center; }
.titre-centre p { margin-inline: auto; }


/* ------------------------------------------------------ 6.5 Mises en page
   .duo : deux colonnes. Les variantes règlent les proportions, l'ordre et
   l'alignement ; elles se combinent. Une colonne sous 600 px (§ 8), ou
   sous 900 px avec --tablette. */

.duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--ecart-duo);
}

.duo--texte  { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--ecart-duo-serre); }
.duo--media  { grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr); }
.duo--titre  { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.duo--haut   { align-items: start; }

/* Ordinateur : le média à gauche alors qu'il vient après le texte dans le
   HTML (le texte reste premier à la lecture et en mobile). */
.duo--inverse > :first-child { grid-column: 2; grid-row: 1; }
.duo--inverse > :last-child  { grid-column: 1; grid-row: 1; }

.grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ecart-xs);
}

.grille--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecart-md); }


/* ------------------------------------------------------------- 6.6 Médias */

.media {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-media);
}

.media img,
.media .photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform var(--duree-zoom) ease;
}

.media:hover img { transform: scale(var(--zoom-survol)); }

.media--portrait {
    width: 100%;
    max-width: 335px;
    max-height: 420px;
    margin-inline: auto;
}


/* -------------------------------------------------------------- 6.7 Listes */

/* Liste à filets : une entrée par ligne, séparées par un trait. Le titre de
   l'entrée en Literata, le texte dessous. */
.liste-filets {
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste-filets li {
    padding-block: 26px;
    border-bottom: 1px solid var(--filet-fort);
}

.liste-filets li:first-child { border-top: 1px solid var(--filet-fort); }

.liste-filets p {
    display: grid;
    gap: 10px;
    max-width: none;
}

.liste-filets strong {
    font-family: var(--police-titre);
    font-size: var(--t-situation);
    font-weight: 400;
    line-height: 1.4;
    color: var(--vert);
}

/* Libellé / valeur, sur un <dl>. */
.liste-paire { margin: 0; }

.liste-paire > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding-block: 14px;
    border-bottom: 1px solid var(--filet);
}

.liste-paire > div:first-child { border-top: 1px solid var(--filet); }

.liste-paire dt { color: var(--encre); }

.liste-paire dd {
    margin: 0;
    font-weight: 600;
    color: var(--vert);
    text-align: right;
    white-space: nowrap;
}

/* Zone d'intervention : une province, ses communes. */
.zone-provinces {
    display: grid;
    gap: 13px;
    margin-top: 30px;
    color: var(--encre-douce);
    font-size: var(--t-micro);
}

.zone-provinces dt { font-weight: 600; }
.zone-provinces dd { margin: 0; }

.section--vert .zone-provinces { color: var(--sur-vert); }


/* ---------------------------------------------------------------- 6.8 Frise
   Les étapes de « Comment ça se passe ». Un trait les relie, avec un point
   terracotta par étape. Le trait se dessine quand la frise entre à l'écran
   (.is-prete puis .is-visible, posées par js/site.js). Quatre colonnes ;
   deux sous 900 px ; une, avec un trait vertical, sous 700 px (§ 8). */

.frise {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px;
    margin: 60px 0 0;
    padding: 0;
    list-style: none;
    isolation: isolate;   /* le trait en z-index -1 reste au-dessus du fond */
}

.frise::before {
    content: "";
    position: absolute;
    top: calc(var(--frise-point) / 2);
    left: 0;
    right: 0;
    height: var(--frise-trait);
    background: var(--filet-fort);
    transform-origin: left center;
}

.frise.is-prete::before { transform: scaleX(0); }

.frise.is-visible::before {
    transform: scaleX(1);
    transition: transform var(--duree-frise) ease-out;
}

.frise-etape {
    position: relative;
    padding-top: 35px;
}

.frise-etape::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--frise-point);
    height: var(--frise-point);
    border-radius: var(--r-rond);
    background: var(--terracotta);
}

.frise-etape h3 { margin-bottom: 20px; }

.frise-etape p {
    font-size: var(--t-petit);
    line-height: 1.85;
}

.frise-detail { font-weight: 600; }


/* ----------------------------------------------------- 6.9 Bulle d'étape
   Une petite pastille verte numérotée devant chaque étape d'un parcours
   raconté sur toute la page (Services). Même composant à chaque fois. Un
   court trait descend sous la bulle, sauf à la dernière : il dit « la suite
   est plus bas ». */

.bulle-etape {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: none;
    margin: 0 0 18px;
    color: var(--vert);
    font-size: var(--t-petit);
    font-weight: 600;
    line-height: 1.4;
}

.bulle-etape-numero {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--bulle-taille);
    height: var(--bulle-taille);
    border-radius: var(--r-rond);
    background: var(--vert);
    color: var(--surface);
    font: 500 var(--t-texte) / 1 var(--police-titre);
}

.offre-etape .bulle-etape { margin-bottom: 24px; }

/* Étapes 2 et suivantes : un trait pointillé remonte de la bulle jusqu'au
   haut de sa section, vers l'étape d'avant. Il suppose que la section
   s'ouvre par la bulle, avec --section-y-court de marge haute. */
.bulle-etape--suite::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 6px);
    left: calc(var(--bulle-taille) / 2 - .5px);
    height: calc(var(--section-y-court) - 6px);
    border-left: 1px dashed var(--sauge);
}


/* ---------------------------------------------------------- 6.10 Comparateur
   .comparateurs : grille de trois. --piste : en mobile, une piste
   horizontale à accrochage (§ 8). */

.comparateurs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Galerie : trois chantiers depuis le 22/10/2026, donc trois colonnes, puis
   une seule sous 700 px (§ 8). Plus d'auto-fit : entre 600 et 950 px il en
   rangeait deux, et le troisième restait seul sur sa ligne. */
.comparateurs--grille { gap: var(--ecart-md); }

.comparateur { min-width: 0; }

.comparateur-cadre {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-media);
    background: var(--sable);
    /* pan-y : le balayage vertical fait défiler la page, le geste
       horizontal déplace la poignée (AUDIT I-15). */
    touch-action: pan-y;
    cursor: ew-resize;
    user-select: none;
}

.comparateur-cadre img { -webkit-user-drag: none; }

.comparateur-apres,
.comparateur-avant {
    position: absolute;
    inset: 0;
}

.comparateur-apres > *,
.comparateur-avant > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
}

/* État servi, avant tout geste : les deux moitiés. Le JS prend le relais. */
.comparateur-avant { clip-path: inset(0 50% 0 0); }

.comparateur-etiquette,
.paire-etiquette {
    position: absolute;
    top: 14px;
    padding: 7px 11px;
    border-radius: var(--r-etiquette);
    font-size: var(--t-etiquette);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.comparateur-etiquette--avant,
.paire-etiquette--avant {
    left: 14px;
    background: rgba(255, 255, 255, .94);
    color: var(--encre);
}

.comparateur-etiquette--apres,
.paire-etiquette--apres {
    right: 14px;
    background: var(--vert-voile);
    color: var(--surface);
}

.comparateur-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 1px);
    width: 2px;
    background: var(--surface);
    box-shadow: 0 0 0 1px rgba(35, 39, 32, .18);   /* filet, pas une ombre */
}

.comparateur-poignee {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid var(--vert);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--vert);
    font-size: var(--t-ui);
    line-height: 1;
    transform: translate(-50%, -50%);
    cursor: ew-resize;
}

/* Posée sur une photo claire ou sombre : double contour, blanc puis encre. */
.comparateur-poignee:focus-visible {
    outline: 3px solid var(--surface);
    outline-offset: 2px;
    box-shadow: 0 0 0 8px var(--encre);
}

.comparateur-legende {
    margin-top: 12px;
    color: var(--encre);
    font-size: var(--t-legende);
}

.comparateur-texte {
    margin-top: 8px;
    font-size: var(--t-texte);
}

.comparateurs-aide {
    max-width: none;
    margin-top: 12px;
    color: var(--encre-douce);
    font-size: var(--t-fine);
    text-align: center;
}


/* ------------------------------------------------------ 6.11 Paire de photos
   Le motif frère du comparateur, quand les deux photos ne se superposent
   pas. Voir includes/paire.php. */

.paires {
    display: grid;
    gap: var(--ecart-md);
    margin-top: var(--ecart-md);
}

.paire-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.paire-vue {
    position: relative;
    line-height: 0;
}

.paire-legende {
    margin-top: 12px;
    font-size: var(--t-legende);
}

.paire-texte {
    margin-top: 8px;
    font-size: var(--t-texte);
}


/* ---------------------------------------------------------- 6.12 Formulaire */

.formulaire {
    display: grid;
    gap: 20px;
    align-self: start;
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--r-carte);
    background: var(--surface);
    color: var(--encre);
}

.formulaire-groupe { display: grid; gap: 6px; }

/* Prénom et contact côte à côte, la commune dessous. Chaque champ occupe
   trois rangées partagées (libellé, champ, erreur) grâce à subgrid : un
   libellé sur deux lignes ne désaligne pas les cases. */
.formulaire-ligne {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 6px;
}

.formulaire-ligne .formulaire-groupe {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 6px;
    min-width: 0;
}

.formulaire-ligne .formulaire-groupe:last-child { grid-column: 1 / -1; }

.formulaire-ligne label { align-self: end; }
.formulaire-ligne input[type="text"] { width: 100%; min-width: 0; }

.formulaire-groupe label,
.formulaire-bloc legend {
    font-size: var(--t-fine);
    font-weight: 500;
}

.formulaire input[type="text"],
.formulaire textarea {
    min-height: 46px;
    padding: 12px 14px;
    /* --encre-douce : 5,7:1, au-dessus des 3:1 d'un contour de champ. */
    border: 1px solid var(--encre-douce);
    border-radius: var(--r-champ);
    background: var(--surface);
    color: var(--encre);
}

.formulaire textarea { resize: vertical; }

.formulaire input[type="text"]:focus,
.formulaire textarea:focus {
    border-color: var(--vert);
    box-shadow: inset 0 0 0 1px var(--vert);   /* bordure doublée, pas une ombre */
}

.formulaire-bloc {
    margin: 0;
    padding: 0;
    border: 0;
}

.formulaire-bloc legend { padding: 0 0 12px; }

/* Cases en PASTILLES : la case réelle reste en place, transparente, et
   reçoit clic, focus et envoi ; le <span> porte le visuel. */
.formulaire-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pastille {
    position: relative;
    display: inline-flex;
}

.pastille input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pastille span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 13px;
    border: 1px solid var(--encre-douce);
    border-radius: var(--r-bouton);
    background: var(--surface);
    color: var(--encre);
    font-size: var(--t-micro);
    line-height: 1.3;
    transition: background-color var(--transition), border-color var(--transition);
}

.pastille:hover span { border-color: var(--vert); }

/* Cochée : fond ET coche — l'état ne repose pas sur la seule couleur. */
.pastille input:checked + span {
    border-color: var(--vert);
    background: var(--sur-vert);
    color: var(--vert-fonce);
    box-shadow: inset 0 0 0 1px var(--vert);
}

.pastille input:checked + span::before {
    content: "✓";
    flex: 0 0 auto;
    font-weight: 600;
    line-height: 1;
}

.pastille input:focus-visible + span {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.formulaire .pastilles-autre { flex: 1 0 100%; }
.formulaire .pastilles-autre[hidden] { display: none; }

.formulaire .bouton { justify-self: start; }

.formulaire-note {
    color: var(--encre-douce);
    font-size: var(--t-etiquette);
}

/* Erreur, posée côté serveur. input[type="text"] : sans l'attribut, la règle
   pèserait moins que .formulaire input[type="text"] et ne s'afficherait pas. */
.a-erreur input[type="text"],
.a-erreur textarea { border-color: var(--erreur); }

.a-erreur input[type="text"]:focus,
.a-erreur textarea:focus {
    border-color: var(--erreur);
    box-shadow: inset 0 0 0 1px var(--erreur);
}

.formulaire-erreur {
    color: var(--erreur);
    font-size: var(--t-petit);
}


/* ------------------------------------------------------------ 6.13 Messages */

.message {
    align-self: start;
    padding: 30px;
    border-radius: var(--r-carte);
    background: var(--surface);
    color: var(--encre);
}

.message-titre {
    margin-bottom: 10px;
    font-family: var(--police-titre);
    font-size: 22px;
    color: var(--vert);
}

.section--vert .message-titre { color: var(--vert); }

.message--panne { border-left: 4px solid var(--erreur); }


/* -------------------------------------------------------------- 6.14 Cartes */

.carte {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--filet-fort);
    border-radius: var(--r-media);
    background: var(--surface);
}

.carte-titre {
    margin-bottom: 18px;
    font-size: 27px;   /* entre --t-h3 et --t-h2-page : titre de carte de prix */
    color: var(--vert);
}

.carte-icone {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    fill: none;
    stroke: var(--terracotta);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* --------------------------------------------------- 6.15 Bandeau, rappel */

/* Une phrase seule, en grand. Pas un titre : elle n'est pas dans le plan. */
.bandeau {
    padding-block: var(--section-y-large);
    background: var(--sable);
}

.bandeau-phrase {
    max-width: 25ch;
    margin-inline: auto;
    font-family: var(--police-titre);
    font-size: var(--t-mission);
    letter-spacing: -.035em;
    line-height: 1.24;
    text-align: center;
    text-wrap: balance;
    color: var(--vert);
}

/* Bloc d'appel final des pages intérieures, centré sur le vert. */
.rappel {
    max-width: 34em;
    margin-inline: auto;
    text-align: center;
}

.rappel p { margin-inline: auto; }


/* ---------------------------------------------------------- 6.16 Apparitions
   .apparition est posée dans le HTML ; elle ne fait RIEN sans JS. js/site.js
   pose .a-mouvement sur <html> si le visiteur accepte le mouvement, puis
   .is-attente sur ce qui est sous la ligne de flottaison et .is-visible
   quand il y arrive. */

.a-mouvement .apparition {
    transition: opacity var(--duree-apparition) ease,
                transform var(--duree-apparition) ease;
}

.a-mouvement .apparition.is-attente {
    opacity: 0;
    transform: translateY(var(--decalage-apparition));
}

.a-mouvement .bandeau .apparition { transition-duration: var(--duree-mission); }


/* ============================================================================
   7. Sections propres à une page
   ============================================================================ */

/* ----------------------------------------------------------------- 7.1 Accueil
   Une classe par section, qui ne règle QUE ce que la maquette lui donne en
   propre : rythme vertical, proportions, tailles. Tout le reste vient des
   composants de § 6. */

/* Hero : texte et photo au même centre. */
.hero-media {
    aspect-ratio: 4 / 5;
    max-height: 590px;
}

.hero-media .photo { aspect-ratio: auto; object-position: center 35%; }

/* L'accroche : un filet au-dessus, le titre étroit à gauche. */
.accroche { padding-block: 10px clamp(65px, 8.5vw, 110px); }

.accroche-grille {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: clamp(25px, 13vw, 170px);
    padding-top: clamp(35px, 3.5vw, 45px);
    border-top: 1px solid var(--filet);
}

.accroche h2 { max-width: 15ch; margin: 0; }

/* Concrètement : le texte se pose au bas de la photo. */
.concretement-texte {
    align-self: end;
    max-width: 530px;
    padding-bottom: 65px;
}

.concretement-media {
    aspect-ratio: 4 / 5;
    max-height: 680px;
}

.concretement-media .photo { aspect-ratio: auto; }

/* Déclencheurs : titre collant, fleur décorative dessous. */
.declencheurs-titre {
    position: sticky;
    top: calc(var(--entete-h-compact) + 53px);
    align-self: start;
}

.declencheurs-titre h2 { max-width: 12ch; margin: 0; }

.declencheurs-fleur {
    width: 100px;
    height: 108px;
    margin-top: 48px;
    object-fit: contain;
}

.declencheurs .liste-filets span { font-size: var(--t-ui); }

.declencheurs-suite { margin-top: 35px; }
.declencheurs-suite p { font-size: var(--t-texte); }
.declencheurs-suite .declencheurs-question { margin-top: 24px; font-weight: 500; }
.declencheurs-action { margin-top: 12px; }

/* Réalisations : titre centré au-dessus des trois comparateurs. */
.realisations h2 { margin-bottom: 36px; }

/* Processus. */
.processus h2 { max-width: 18ch; }
.processus-action { margin-top: 28px; }

/* Contact : titre plus grand, colonne de texte serrée. */
.contact { padding-block: clamp(65px, 8vw, 100px); }

.contact h2 {
    max-width: 15ch;
    font-size: var(--t-h2-contact);
}

.contact .texte-section { font-size: var(--t-texte); line-height: var(--lh-texte); }

.contact-colonne { min-width: 0; }

.contact-coordonnees {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-petit);
}

.contact-coordonnees a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.contact-mention {
    max-width: 32ch;
    margin-top: 35px;
    font-size: var(--t-ui);
    font-weight: 600;
}

/* « Où j'interviens » : un intertitre en texte, pas en Literata. */
.contact .zone-titre {
    margin: 30px 0 10px;
    font-family: var(--police-texte);
    font-size: var(--t-texte-plus);
    font-weight: 500;
    letter-spacing: 0;
}

.zone-intro { font-size: var(--t-texte); line-height: 1.6; }
.contact .zone-provinces { margin-top: 18px; }

.zone-deplacement {
    margin-top: 18px;
    color: var(--sur-vert);
    font-size: var(--t-fine);
}

/* Messages de panne et d'erreur empilés AU-DESSUS du formulaire, dans la
   même cellule de .duo. */
.contact-formulaire {
    display: grid;
    gap: 18px;
    align-content: start;
    min-width: 0;
}


/* Bon cadeau de Noël — content/offre-cadeau.php, affiché jusqu'à sa date de
   fin. Le lien du hero, puis la section 1 bis sur le vert foncé. Le bon est
   un objet papier : talon perforé, deux encoches découpées par masque,
   lignes à remplir. Pas d'ombre portée (règle du site) : le blanc du bon
   sur le vert foncé suffit à le détacher. */

/* .section : passe devant « .section p + p », qui imposerait 18 px. */
.section .cadeau-lien-ligne { margin-top: 26px; }

.cadeau-lien {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--encre);
    font-size: var(--t-petit);
    font-weight: 500;
    text-decoration: none;
}

.cadeau-lien svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--terracotta); }

.cadeau-lien-texte {
    padding-bottom: 2px;
    border-bottom: 1.5px solid var(--terracotta);
    transition: border-color var(--transition);
}

.cadeau-lien:hover .cadeau-lien-texte { border-color: var(--vert); }

.cadeau {
    background: var(--vert-fonce);
    color: var(--sable);
}

.cadeau-grille {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: var(--ecart-duo-serre);
    padding-block: var(--section-y);
}

.cadeau-texte { min-width: 0; }

.cadeau-surtitre {
    margin-bottom: 18px;
    color: var(--sur-vert);
    font-size: var(--t-etiquette);
    font-weight: 600;
    letter-spacing: var(--ls-surtitre);
    text-transform: uppercase;
}

.cadeau-titre {
    margin-bottom: 24px;
    font-size: var(--t-mission);
    line-height: var(--lh-titre);
    color: var(--sable);
}

.cadeau-chapo {
    max-width: 36ch;
    margin-bottom: 30px;
    font-size: var(--t-chapo);
    color: var(--sable);
}

.cadeau-note { margin-top: 14px; color: var(--sur-vert); font-size: var(--t-fine); }

.cadeau-signature {
    max-width: 30ch;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--sauge);
    font-family: var(--police-titre);
    font-size: var(--t-legende);
    line-height: 1.4;
    color: var(--sur-vert);
}

/* Le bon, légèrement de biais. */
.cadeau-pose {
    justify-self: center;
    width: min(var(--bon-largeur), 100%);
    transform: rotate(var(--bon-inclinaison));
    transition: transform var(--duree-bon) var(--courbe-bon);
}

.cadeau-pose:hover { transform: none; }

.cadeau-bon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--bon-talon);
    border-radius: var(--r-bon);
    background: var(--surface);
    color: var(--encre);
    /* Deux demi-masques, chacun percé d'un cercle au droit de la perforation :
       une encoche en haut, une en bas. */
    -webkit-mask:
        radial-gradient(circle at calc(100% - var(--bon-talon)) 0,    #0000 var(--bon-encoche), #000 calc(var(--bon-encoche) + .5px)) top    / 100% 51% no-repeat,
        radial-gradient(circle at calc(100% - var(--bon-talon)) 100%, #0000 var(--bon-encoche), #000 calc(var(--bon-encoche) + .5px)) bottom / 100% 51% no-repeat;
            mask:
        radial-gradient(circle at calc(100% - var(--bon-talon)) 0,    #0000 var(--bon-encoche), #000 calc(var(--bon-encoche) + .5px)) top    / 100% 51% no-repeat,
        radial-gradient(circle at calc(100% - var(--bon-talon)) 100%, #0000 var(--bon-encoche), #000 calc(var(--bon-encoche) + .5px)) bottom / 100% 51% no-repeat;
}

.cadeau-bon-corps {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px 28px 28px 32px;
    overflow: hidden;
}

.cadeau-bon-fleur {
    position: absolute;
    right: -14px;
    bottom: -22px;
    width: 104px;
    height: auto;
    opacity: .17;
    pointer-events: none;
}

.cadeau-bon-surtitre {
    color: var(--accent);
    font-size: var(--t-bon-mini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cadeau-bon-titre {
    margin-top: 8px;
    font: 500 var(--t-bon-titre) / 1.12 var(--police-titre);
    letter-spacing: -.02em;
    color: var(--vert);
    text-wrap: balance;
}

.cadeau-bon-sous {
    margin-top: 6px;
    color: var(--encre-douce);
    font-size: var(--t-micro);
    line-height: 1.45;
}

.cadeau-bon-champs { position: relative; display: grid; gap: 11px; margin-top: 22px; }

.cadeau-bon-champ {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--encre-douce);
    font-size: var(--t-etiquette);
    line-height: 1.2;
    white-space: nowrap;
}

.cadeau-bon-champ::after {
    content: "";
    flex: 1;
    min-width: 24px;
    border-bottom: 1px dotted var(--filet-fort);
}

/* La perforation : des pointillés sur le bord gauche du talon. */
.cadeau-bon-talon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 10px;
    background: linear-gradient(to bottom, var(--filet-fort) 55%, transparent 0) left top / 1.5px 8px repeat-y;
    text-align: center;
}

/* Terracotta : en grand corps seulement, voir les tokens. */
.cadeau-bon-prix {
    font: 500 var(--t-bon-prix) / 1 var(--police-titre);
    letter-spacing: -.035em;
    white-space: nowrap;
    color: var(--terracotta);
}

.cadeau-bon-duree {
    color: var(--encre-douce);
    font-size: var(--t-bon-mini);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------------- 7.2 Services
   Une lecture courte : sections resserrées, titres plus petits qu'à
   l'accueil. Le parcours 1 → 2 → 3 est porté par .bulle-etape (§ 6.9). */

.offre-haut,
.offre-etape,
.offre-deplacement { padding-block: var(--section-y-court); }

.offre-etape .duo,
.offre-deplacement .duo { gap: var(--ecart-lg); }

.offre-haut h1 { font-size: var(--t-h1-page); margin-bottom: 18px; }
.offre-etape h2,
.offre-deplacement h2 { font-size: var(--t-h2-page); margin: 0; }

.offre-haut-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
    gap: var(--ecart-lg);
}

.offre-photo { height: clamp(200px, 30vw, 380px); }
.offre-photo .photo { aspect-ratio: auto; object-position: center 58%; }

/* Étape 1, sous l'intro : un filet la détache du chapô. */
.offre-appel {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--filet-fort);
}

/* Prix de la visite en grand. */
.offre-forfait {
    margin-top: 22px;
    font: 500 var(--t-forfait) / 1.3 var(--police-titre);
    color: var(--vert);
}

.offre-forfait span {
    display: block;
    margin-top: 6px;
    font: 400 var(--t-ui) / 1.5 var(--police-texte);
}

.offre-prix {
    margin-top: 18px;
    font: 500 var(--t-prix) / 1.1 var(--police-titre);
    letter-spacing: var(--ls-titre);
    color: var(--vert);
}

.offre-prix span { font-size: .45em; letter-spacing: 0; }

/* Sous le tarif horaire, le tarif dégressif en texte courant : il se lit
   sans être mis en avant comme une promotion. */
.offre-degressif {
    margin-top: 6px;
    font: 400 var(--t-ui) / 1.5 var(--police-texte);
    color: var(--vert);
}

/* Points de la visite et de la mission : une petite pastille d'accent. */
.offre-points {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offre-points li {
    position: relative;
    max-width: var(--mesure);
    padding-left: 22px;
}

.offre-points li::before {
    content: "";
    position: absolute;
    top: .75em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--r-rond);
    background: var(--accent);
}

.offre-points + .note { margin-top: 22px; font-size: var(--t-petit); }

.offre-missions { margin-top: 34px; }

/* Lignes d'une carte de mission : libellé à gauche, valeur alignée à
   gauche dans sa colonne, sur le filet fort de la carte. */
.liste-paire--carte > div {
    grid-template-columns: 40% minmax(0, 1fr);
    border-color: var(--filet-fort);
    font-size: var(--t-petit);
}

.liste-paire--carte dt { font-weight: 500; color: var(--encre-douce); }

.liste-paire--carte dd {
    font-weight: 400;
    color: var(--encre);
    text-align: left;
    white-space: normal;
}

.offre-montant {
    display: block;
    font: 500 var(--t-montant) / 1.2 var(--police-titre);
    color: var(--vert);
}

/* Sous le montant d'une carte : le détail du prix. */
.offre-calcul { display: block; margin-top: 6px; }

.offre-frais {
    display: block;
    margin-top: 10px;
    color: var(--encre-douce);
    font-size: var(--t-micro);
    line-height: 1.5;
}

.offre-precision { margin-top: 22px; font-size: var(--t-petit); }

/* Le déplacement : texte courant, ton calme. */
.offre-exemple { margin-top: 18px; }
.offre-zone { margin-top: 28px; }
.offre-deplacement .zone-provinces { margin-top: 14px; font-size: var(--t-petit); }

/* ============================================================================
   8. Surcharges max-width — EN DERNIER
   ============================================================================ */

@media (max-width: 1100px) {
    :root { --logo-taille: 62px; }
    .entete-liste { gap: 14px; }
    .entete-barre { gap: 0 16px; }
    .entete-logo-personne { font-size: var(--t-ui); }
    .frise { gap: 25px; }
    .concretement-texte { padding-bottom: 15px; }
}

/* Menu en tiroir sous 900 px. */
@media (max-width: 899px) {
    :root {
        --entete-h: 90px;
        --entete-h-compact: 70px;
        --logo-taille: 62px;
        --logo-taille-compact: 50px;
    }

    .entete-bascule { display: flex; order: 3; }
    .entete-contact { order: 2; margin-left: auto; }

    .entete-nav {
        display: none;
        flex: 0 0 100%;
        order: 4;
        margin: 0;
    }

    .entete-nav.is-ouvert { display: block; }

    .entete-liste {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 16px;
    }

    .entete-liste a {
        display: flex;
        min-height: 46px;
        border-bottom: 1px solid var(--filet);
        font-size: var(--t-ui);
    }

    .entete-liste a[aria-current="page"] { box-shadow: none; }

    .duo--tablette { grid-template-columns: minmax(0, 1fr); }

    .frise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
    .frise::before { display: none; }

    /* Deux colonnes : un trait par étape, qui file vers la suivante. */
    .frise-etape::after {
        content: "";
        position: absolute;
        top: calc(var(--frise-point) / 2);
        left: var(--frise-point);
        right: -32px;
        z-index: -1;
        height: var(--frise-trait);
        background: var(--filet-fort);
        transform-origin: left center;
    }

    .frise-etape:nth-child(even)::after { right: 0; }
    .frise.is-prete .frise-etape::after { transform: scaleX(0); }
    .frise.is-visible .frise-etape::after {
        transform: scaleX(1);
        transition: transform var(--duree-frise) ease-out;
    }

    .grille--deux { grid-template-columns: minmax(0, 1fr); }
    .comparateurs { gap: 16px; }
    /* Bon cadeau sur une colonne, le texte au-dessus. Ici et non sous 600 px
       comme le hero : à 768 px, sur deux colonnes, le bon n'avait plus que
       ~300 px et son titre était coupé. */
    .cadeau-grille { grid-template-columns: minmax(0, 1fr); }
    .cadeau-texte { order: 1; }
    .cadeau-pose { order: 2; }
    .declencheurs-titre { position: static; }
    .contact h2 { max-width: 23ch; }
    .contact .formulaire { max-width: 700px; }
    /* Assez de place pour les trois champs courts sur une ligne. */
    .contact .formulaire-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .contact .formulaire-ligne .formulaire-groupe:last-child { grid-column: auto; }
}

/* Frise en colonne, comparateurs de l'accueil en piste. */
@media (max-width: 699px) {
    .frise {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding-left: 26px;
    }

    .frise::before {
        display: block;
        top: 4px;
        bottom: 0;
        left: 4px;
        right: auto;
        width: var(--frise-trait);
        height: auto;
        transform-origin: center top;
    }

    .frise.is-prete::before { transform: scaleY(0); }
    .frise.is-visible::before { transform: scaleY(1); }
    .frise-etape::after { display: none; }
    .frise-etape { padding-top: 0; }
    .frise-etape::before { top: 8px; left: -26px; }

    .comparateurs--piste {
        display: flex;
        gap: 14px;
        padding-bottom: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .comparateurs--piste .comparateur {
        flex: 0 0 88%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Dans la piste, le doigt fait défiler la piste ; seule la poignée
       compare. js/comparateur.js ignore le toucher hors poignée. */
    .comparateurs--piste .comparateur-cadre { touch-action: auto; }
    .comparateurs--piste .comparateur-poignee { touch-action: pan-y; }
    .comparateurs--grille { grid-template-columns: minmax(0, 1fr); }

    .bouton { width: 100%; }
    .entete .bouton,
    .formulaire .bouton { width: auto; }
}

@media (max-width: 599px) {
    :root {
        --entete-h: 72px;
        --entete-h-compact: 72px;
        --logo-taille: 46px;
        --logo-taille-compact: 46px;
        --bouton-h-petit: 38px;
        --nav-h: 86px;
    }

    .entete-barre { gap: 0 6px; padding-inline: 12px; }
    .entete-logo { gap: 6px; }
    .entete-logo-personne { font-size: var(--t-fine); }
    .entete-logo-metier { font-size: 11px; }   /* tient sur une ligne à 375 px */
    .entete-contact { padding-inline: 12px; }
    .entete-contact-long { display: none; }
    .entete-contact-court { display: inline; }
    .entete-bascule { width: 40px; }

    .section .note { font-size: var(--t-etiquette); line-height: 1.6; }
    .texte-section { line-height: 1.85; }
    .exergue { margin-top: 28px; }

    .duo,
    .duo--texte,
    .duo--media,
    .duo--titre { grid-template-columns: minmax(0, 1fr); gap: 30px; }

    .duo--inverse > :first-child,
    .duo--inverse > :last-child { grid-column: 1; grid-row: auto; }

    /* Accueil. La photo du hero passe au-dessus du texte, en carré. */
    .hero .duo { gap: 24px; }
    .hero-media { order: -1; aspect-ratio: 1 / 1; max-height: none; }
    .hero-media .photo { object-position: 65% 32%; }
    .hero h1 { max-width: 14ch; margin-bottom: 24px; }
    .hero .surtitre { margin-bottom: 14px; }
    .accroche-grille { padding-top: 35px; gap: 25px; }
    .accroche h2 { max-width: 19ch; }
    .concretement-texte { padding: 0; }
    .declencheurs-fleur { display: none; }
    .realisations h2 { margin-bottom: 28px; }
    .contact .formulaire-ligne { grid-template-columns: minmax(0, 1fr); }
    .offre-haut-grille { grid-template-columns: minmax(0, 1fr); }

    /* Bon cadeau : le bon réduit. */
    :root {
        --bon-talon: 104px;
        --bon-encoche: 10px;
        --t-bon-titre: 21px;
        --t-bon-prix: 34px;
    }
    .cadeau-bon-corps { padding: 20px 16px 20px 20px; }
    .cadeau-bon-sous { font-size: var(--t-etiquette); }
    .cadeau-bon-champs { gap: 10px; margin-top: 18px; }
    .liste-paire--carte > div { grid-template-columns: 42% minmax(0, 1fr); }
    .carte { padding: 18px; }

    .media--portrait { width: 75%; max-width: 260px; max-height: 325px; }
    .media:hover img { transform: none; }

    .liste-filets li { padding-block: 24px; }
    .comparateurs { grid-template-columns: minmax(0, 1fr); }
    .formulaire-ligne { grid-template-columns: minmax(0, 1fr); }
    .paire-grille { grid-template-columns: 1fr; }

    .pied { padding-block: 30px 0; }
    .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pied-zone { justify-self: start; text-align: left; }
    .pied-nav { justify-content: flex-start; gap: 0 22px; }
    .pied-logo { width: 65px; height: 65px; }
}

/* Mouvement réduit : rien ne glisse, rien ne s'étire, tout est visible. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

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

    .a-mouvement .apparition.is-attente { opacity: 1; transform: none; }
    .media:hover img { transform: none; }
    .frise.is-prete::before,
    .frise.is-prete .frise-etape::after { transform: none; }
}

/* Contraste forcé (Windows) : couleurs et box-shadow écrasés. */
@media (forced-colors: active) {
    .comparateur-poignee:focus-visible { outline: 3px solid Highlight; box-shadow: none; }
    .pastille input:checked + span { border-width: 3px; }
}