/* ==========================================================================
   POLICE — Instrument Sans, hébergée localement
   Fichier variable, axe de graisse 400 à 700, axe de chasse figé à 100.
   Sous-ensemble latin étendu au français, augmenté de l'espace fine
   insécable U+202F et U+2009, absentes de la police d'origine.
   ========================================================================== */
@font-face {
    font-family: "Instrument Sans";
    src: url("/assets/fonts/instrument-sans-v1.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("/assets/fonts/instrument-sans-italic-v1.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   DIRECTION C — LE TERRAIN
   Le site se consulte debout, téléphone en main, devant la chaudière.
   Contraste élevé, cibles de clic très larges, chrome sombre, surfaces
   franches, et le vocabulaire visuel de la signalisation électrique.
   ========================================================================== */

:root {
    --papier:      #ffffff;
    --fond:        #eef1f4;
    --encre:       #0c1013;
    --encre-doux:  #55606b;
    --trait:       #d7dde3;
    --chrome:      #171c22;
    --chrome-doux: #98a5b2;

    --action:      #0b6e7f;   /* aplats : texte blanc par-dessus */
    --lien:        #075661;   /* texte : plus dense que son entourage */
    --action-fond: #e6f2f4;

    --expert:      #10704f;
    --expert-fond: #e9f5f0;
    --danger:      #b3241a;
    --danger-fond: #fdedeb;
    --hazard:      #f2b705;
    --info-fond:   #eef1f4;

    --police: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

    --mesure: 43.5rem; /* colonne de lecture : ~75 signes a 19px */
    --rail:   15rem;   /* colonne du sommaire */
    --ecart:  3.25rem; /* entre le rail et le texte */
    --page:   64rem;   /* largeur globale du site */
    --rayon:  10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--police);
    font-size: 1.125rem;   /* 18px : mesure courte sur telephone */
    line-height: 1.62;
}
/* 19px des que la colonne est assez large pour l'absorber. */
@media (min-width: 48em) { body { font-size: 1.1875rem; line-height: 1.65; } }

/* Seul l'accueil alterne les fonds ; les pages interieures sont sur papier. */
.page--home { background: var(--fond); }

img, svg { max-width: 100%; height: auto; }
a { color: var(--lien); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
/* Le teal ne ressort pas sur le chrome sombre : on bascule sur le jaune. */
.entete :focus-visible, .pied :focus-visible, .hero :focus-visible,
.bande :focus-visible, .nav :focus-visible { outline-color: var(--hazard); }

.conteneur { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 1.125rem; }

/* --- Surtitre ------------------------------------------------------------- */
.surtitre {
    display: inline-block; margin: 0 0 .875rem;
    padding: .3125rem .625rem; border-radius: 999px;
    background: var(--action-fond); color: var(--action);
    font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* --- En-tête sombre ------------------------------------------------------- */
.entete { background: var(--chrome); color: #fff; }
.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; }
/* L'espace sous la signature doit valoir celui qui surmonte le nom. */
@media (min-width: 64em) { .entete__inner { min-height: 5.5rem; padding-block: .875rem; } }
.logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #fff; }
.logo__marque { flex: none; display: block; width: 34px; height: 34px; }
.logo__marque svg { display: block; width: 100%; height: 100%; }
.logo__texte { display: block; }
.logo__nom { display: block; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em; }
.logo__tld { color: var(--chrome-doux); font-weight: 500; }
/* Le nom de domaine dit le sujet ; la signature dit ce qu'est le site. */
.logo__signature {
    display: none; margin-top: .375rem; white-space: nowrap;
    font-size: .6875rem; font-weight: 600; line-height: 1.2;
    letter-spacing: .09em; text-transform: uppercase; color: var(--chrome-doux);
}
/* Affichee seulement quand l'en-tete a la place de la porter sur une ligne. */
@media (min-width: 64em) {
    .logo__signature { display: block; }
    .logo__marque { width: 40px; height: 40px; }
}
.logo:hover .logo__nom { text-decoration: underline; text-underline-offset: .22em; }

.menu-bouton {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1rem;
    background: #232a32; border: 0; border-radius: var(--rayon);
    font: inherit; font-size: .9375rem; font-weight: 600; color: #fff; cursor: pointer;
}
.menu-bouton__barres { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

.nav__liste { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.nav__lien {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem;
    text-decoration: none; color: #cbd5df;
    font-size: .9375rem; font-weight: 600;
}
/* Survol : le texte passe au blanc ET se souligne — jamais la couleur seule. */
/* Le filet est pose par un pseudo-element : il se rapproche du mot sans
   reduire la surface cliquable, qui reste a 44px. */
.nav__lien { position: relative; }
.nav__lien::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: transparent;
}
.nav__lien:hover { color: #fff; }
.nav__lien:hover::before { background: rgba(255,255,255,.55); }
.nav__lien.est-actif { color: #fff; font-weight: 700; }
.nav__lien.est-actif::before { background: var(--hazard); height: 3px; }

/* Elements reserves au panneau mobile : invisibles sur grand ecran. */
.nav__entete, .nav__groupe, .nav__liste--secondaire { display: none; }

@media (min-width: 48em) {
    .menu-bouton { display: none; }
    .nav__panneau { display: contents; }
}

/* --- Panneau mobile : plein ecran, une entree par ligne ------------------- */
@media (max-width: 47.99em) {
    .nav { display: none; }
    .nav.est-ouvert {
        display: block;
        position: fixed; inset: 0; z-index: 60;
        background: var(--chrome); color: #fff;
        overflow-y: auto; overscroll-behavior: contain;
    }
    body.menu-ouvert { overflow: hidden; }

    .nav__panneau { padding: 0 1.125rem 2.5rem; }

    .nav__entete {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        min-height: 4rem; margin-bottom: .75rem;
        border-bottom: 1px solid #2b333c;
        position: sticky; top: 0; background: var(--chrome); z-index: 1;
    }
    .nav__titre { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-doux); }
    .nav__fermer {
        display: inline-flex; align-items: center; gap: .5rem;
        min-height: 48px; padding: 0 1rem;
        background: #232a32; border: 0; border-radius: var(--rayon);
        font: inherit; font-size: .9375rem; font-weight: 600; color: #fff; cursor: pointer;
    }
    .nav__fermer::after { content: "\00D7"; font-size: 1.375rem; line-height: 1; }

    .nav__liste { display: block; }

    .nav__lien {
        display: flex; width: 100%;
        align-items: center; justify-content: space-between; gap: 1rem;
        min-height: 58px; padding: .875rem 1rem;
        border-radius: 0; border-bottom: 1px solid #2b333c;
        font-size: 1.125rem; font-weight: 600; color: #fff;
    }
    .nav__lien::after { content: "\203A"; font-size: 1.5rem; line-height: 1; color: var(--chrome-doux); flex: none; }
    .nav__lien:hover { background: #232a32; }

    /* Rubrique en cours : un filet, pas une pastille. */
    .nav__lien.est-actif {
        background: transparent; color: #fff;
        box-shadow: inset 3px 0 0 var(--hazard);
        padding-left: 1.25rem;
    }
    .nav__lien.est-actif::after { color: var(--hazard); }

    .nav__groupe {
        display: block; margin: 1.75rem 0 .25rem;
        font-size: .75rem; font-weight: 700; letter-spacing: .12em;
        text-transform: uppercase; color: var(--chrome-doux);
    }
    .nav__liste--secondaire { display: block; }
    .nav__liste--secondaire .nav__lien { min-height: 52px; font-size: 1rem; font-weight: 500; color: #dbe3ea; }
}

/* --- Fil d'Ariane --------------------------------------------------------- */
.ariane {
    background: var(--fond); border-bottom: 1px solid var(--trait);
    font-size: .9375rem; color: var(--encre-doux);
}
.ariane a { text-decoration: underline; text-decoration-color: rgba(7,86,97,.45); text-underline-offset: .2em; }
.ariane a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.ariane__liste { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: .875rem 0; list-style: none; }
.ariane__item [aria-current] { color: var(--encre); }
.ariane__item + .ariane__item::before { content: "\203A"; margin-right: .5rem; color: #a9b4be; }
.ariane a { color: var(--lien); font-weight: 500; }

/* --- Hero : trois portes d'entrée ---------------------------------------- */
.hero { background: var(--chrome); color: #fff; }
.hero__inner { padding-block: 2.5rem 2.75rem; }
.hero__titre {
    margin: 0 0 .875rem; max-width: 20ch;
    font-size: clamp(2rem, 1.2rem + 3.6vw, 3.25rem);
    font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
}
.hero__chapo { margin: 0 0 2rem; max-width: 44ch; font-size: 1.1875rem; color: #c3ced8; }
.hero__mention { margin: 1.5rem 0 0; font-size: .875rem; color: var(--chrome-doux); }

.portes { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.porte {
    display: flex; flex-direction: column; gap: .25rem;
    min-height: 76px; padding: 1rem 3rem 1rem 1.125rem;
    background: #fff; border-radius: var(--rayon); text-decoration: none;
    position: relative;
}
.porte::after {
    content: "\203A"; position: absolute; right: 1.125rem; top: 50%;
    transform: translateY(-50%); font-size: 1.75rem; color: var(--action); line-height: 1;
}
.porte__q { font-size: 1.0625rem; font-weight: 700; color: var(--encre); letter-spacing: -.015em; }
.porte__a { margin-top: auto; font-size: .9375rem; color: var(--action); font-weight: 600; }
.porte:hover { background: var(--action-fond); }
@media (min-width: 52em) { .portes { grid-template-columns: repeat(3, 1fr); } }

/* --- Titre de page -------------------------------------------------------- */
/* Le filet reprend la couleur de la rubrique : un reperage, pas un ornement. */
.page-entete { position: relative; max-width: 46rem; margin: 2rem 0 1.75rem; padding-top: 1.5rem; }
.page-entete::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 3.5rem; height: 3px; background: var(--silo, var(--action));
}
.page-entete__titre {
    margin: 0 0 .75rem; font-size: clamp(1.9375rem, 1.25rem + 2.7vw, 3rem);
    font-weight: 700; line-height: 1.14; letter-spacing: -.032em; text-wrap: balance;
}
.page-entete__chapo { margin: 0; font-size: 1.25rem; line-height: 1.5; color: var(--encre-doux); max-width: 50ch; }
@media (min-width: 48em) { .page-entete__chapo { font-size: 1.3125rem; } }
.page-entete__maj { margin: 1rem 0 0; font-size: .8125rem; color: var(--encre-doux); }

/* --- Article : le texte pose a meme le papier ----------------------------- */
.article, .hub, .accueil { padding-bottom: 2rem; }
.page--article { background: var(--papier); }
body:not(.page--home) .carte { background: var(--fond); border-color: transparent; }
body:not(.page--home) .carte:hover { border-color: var(--action); }
.article__texte { max-width: var(--mesure); }
@media (min-width: 65em) {
    /* rail + ecart + colonne = exactement la largeur interieure du conteneur. */
    .article__corps {
        display: grid;
        grid-template-columns: var(--rail) minmax(0, var(--mesure));
        column-gap: var(--ecart);
        align-items: start;
    }
    .article__rail { position: sticky; top: 1.25rem; }
}

/* --- Sommaire : une liste d'accès, pas un ornement ------------------------ */
.sommaire {
    max-width: var(--mesure); margin: 0 0 1.75rem;
    background: var(--fond); border-radius: var(--rayon); padding: .875rem 1rem 1rem;
}
.sommaire__titre { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-doux); }
.sommaire__liste { margin: 0; padding: 0; list-style: none; }
.sommaire__liste li + li { border-top: 1px solid rgba(85,96,107,.14); }
.sommaire a {
    display: block; min-height: 46px; padding: .6875rem .625rem .6875rem .875rem;
    border-left: 3px solid transparent;
    font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--encre);
    text-decoration: underline; text-decoration-color: rgba(85,96,107,.35);
    text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.sommaire a:hover { color: var(--action); text-decoration-color: currentColor; background: var(--papier); }
/* Second niveau du sommaire : les H3 rencontres par le parseur. */
.sommaire__sous-liste { margin: 0 0 .375rem; padding: 0 0 0 1.5rem; list-style: none; }
.sommaire__sous-liste li { border-top: 0; }
.sommaire__sous-liste a { min-height: 40px; padding-top: .375rem; padding-bottom: .375rem; font-size: .9375rem; font-weight: 400; }

/* Section en cours de lecture : un filet, pas seulement une couleur. */
.sommaire a.est-courant {
    border-left-color: var(--action); color: var(--action);
    font-weight: 700; background: var(--papier);
}

/* --- Corps de texte ------------------------------------------------------- */
/* Le texte est la page : aucun contenant. Les cadres sont reserves aux blocs. */
.prose { max-width: var(--mesure); }
.prose > h2 {
    margin: 3rem 0 .875rem; font-size: 1.75rem; font-weight: 700;
    line-height: 1.18; letter-spacing: -.03em; scroll-margin-top: 1.5rem; text-wrap: balance;
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 2rem 0 .5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.25rem; }
.prose li { margin-bottom: .375rem; }
.prose strong { font-weight: 700; }
.prose code { font-family: var(--mono); font-size: .85em; background: var(--fond); padding: .15em .4em; border-radius: 4px; }

/* --- Encarts -------------------------------------------------------------- */
.encart { max-width: var(--mesure); margin: 1.75rem 0; padding: 1.125rem 1.25rem; border-radius: var(--rayon); background: var(--info-fond); }
.encart__titre { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.encart__corps > :last-child { margin-bottom: 0; }
.encart__corps p { margin: 0 0 .875rem; font-size: 1.0625rem; }

.encart--expert { background: var(--expert-fond); border-left: 6px solid var(--expert); border-radius: 4px var(--rayon) var(--rayon) 4px; }
.encart--expert .encart__titre { color: var(--expert); }
.encart--expert .encart__titre::before { content: ""; display: inline-block; width: .625rem; height: .625rem; margin-right: .5rem; border-radius: 50%; background: var(--expert); vertical-align: .05em; }

/* Le bloc rouge porte la bande d'avertissement de la signalisation 230 V. */
.encart--danger { background: var(--danger-fond); padding: 0; overflow: hidden; }
.encart--danger .encart__titre {
    margin: 0; padding: .875rem 1.25rem .875rem 1.25rem;
    background: var(--danger); color: #fff;
    font-size: .9375rem; letter-spacing: .02em; text-transform: uppercase;
    position: relative;
}
.encart--danger .encart__titre::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: repeating-linear-gradient(135deg, var(--hazard) 0 10px, var(--chrome) 10px 20px);
}
.encart--danger .encart__corps { padding: 1.125rem 1.25rem; }

/* --- Donnée chiffrée ------------------------------------------------------ */
/* Volontairement plus discret que l'encart de danger : une donnee ne doit
   jamais peser plus lourd qu'un avertissement de securite. */
.chiffre-cle {
    max-width: var(--mesure); margin: 2rem 0; padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    background: var(--fond); border-left: 6px solid var(--action);
    border-radius: 4px var(--rayon) var(--rayon) 4px;
    display: grid; gap: .375rem;
}
.chiffre-cle__valeur { margin: 0; font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -.045em; color: var(--action); }
.chiffre-cle__corps p { margin: 0; font-size: 1rem; color: var(--encre-doux); }
.chiffre-cle__source { margin: 0; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-doux); }
@media (min-width: 40em) {
    .chiffre-cle { grid-template-columns: 7.5rem 1fr; column-gap: 1.5rem; align-items: start; }
    .chiffre-cle__source { grid-column: 2; }
}

/* --- Tableau comparatif --------------------------------------------------- */
.comparatif { margin: 2rem 0; max-width: var(--mesure); }
.comparatif__titre { margin: 0 0 .75rem; font-size: 1.0625rem; font-weight: 700; }
.table-wrap { overflow-x: auto; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--papier); }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 1rem; }
.table-wrap th, .table-wrap td { padding: .875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
.table-wrap thead th { background: var(--chrome); color: #fff; font-weight: 600; font-size: .9375rem; border-bottom: 0; }
.table-wrap tbody th { font-weight: 600; width: 32%; background: var(--fond); }
.table-wrap tbody tr:last-child th, .table-wrap tbody tr:last-child td { border-bottom: 0; }
.comparatif__legende { margin-top: .625rem; font-size: .8125rem; color: var(--encre-doux); }

/* --- Appel à l'action ----------------------------------------------------- */
/* Renvoi vers une fiche constructeur : pas de bouton plein, qui donnerait a
   un site sans affiliation l'apparence d'un site marchand — mais une surface,
   pour qu'on ne le confonde pas avec le texte courant. */
.cta {
    max-width: var(--mesure); margin: 2.25rem 0;
    padding: 1.25rem 1.375rem 1.125rem;
    background: var(--action-fond); border-radius: var(--rayon);
    border-left: 6px solid var(--action);
}
.cta__produit { margin: 0 0 .25rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.015em; }
.cta__texte p:last-child { margin: 0 0 .625rem; font-size: .9375rem; color: var(--encre-doux); }
.cta__lien {
    display: inline-block; min-height: 44px; padding: .5rem 0;
    font-size: 1rem; font-weight: 600; color: var(--lien);
    text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.cta__lien::after { content: "\00A0\2197"; }
.cta__lien:hover { text-decoration-thickness: 2px; }

/* --- FAQ et sources ------------------------------------------------------- */
/* Contenu secondaire : sur le fond bleute, pour rester sous le texte principal. */
.faq, .sources {
    max-width: var(--mesure); margin: 2.5rem 0 0;
    background: var(--fond); border-radius: var(--rayon); padding: 1.5rem 1.375rem;
}
.faq__titre { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
.faq__corps h3 { margin: 1.5rem 0 .375rem; padding-top: 1.25rem; border-top: 1px solid rgba(85,96,107,.18); font-size: 1.125rem; font-weight: 700; }
.faq__corps h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.faq__corps p { margin: 0 0 1.25rem; }
.faq__corps > :last-child { margin-bottom: 0; }
.sources { margin-top: 1rem; font-size: .9375rem; color: var(--encre-doux); padding: 1.25rem 1.375rem; }
.sources__titre { margin: 0 0 .75rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; color: var(--encre); }
.sources ul { margin: 0; padding-left: 1.125rem; }
.sources li { margin-bottom: .375rem; }
.sources > :last-child { margin-bottom: 0; }

/* --- Cartes --------------------------------------------------------------- */
.cartes { margin: 2.5rem 0; }
.cartes__titre { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -.025em; }
.cartes__liste { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.carte {
    background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
    padding: 1.125rem 1.25rem;
}
.carte:hover { border-color: var(--action); }
.carte__intent { margin: 0 0 .375rem; font-size: .8125rem; font-weight: 600; color: var(--action); }
.carte__titre { margin: 0 0 .375rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.carte__titre a {
    color: var(--encre);
    text-decoration: underline; text-decoration-color: rgba(85,96,107,.35);
    text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.carte__titre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte { position: relative; }
.carte__titre a:hover { color: var(--action); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
/* Le focus clavier entoure la carte entiere, pas le seul libelle. */
.carte__titre a:focus-visible { outline: none; }
.carte:has(a:focus-visible) { outline: 3px solid var(--action); outline-offset: 2px; }
.carte__resume { margin: 0; font-size: .9375rem; color: var(--encre-doux); line-height: 1.5; }

@media (min-width: 44em) { .cartes__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66em) {
    .cartes--hub .cartes__liste, .cartes--silos .cartes__liste { grid-template-columns: repeat(3, 1fr); }
}

/* --- Pied de page --------------------------------------------------------- */
.pied { margin-top: 3.5rem; padding: 2.5rem 0 1.5rem; background: var(--chrome); color: #c3ced8; font-size: .9375rem; }

.pied__tete { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #2b333c; }
.pied__marque { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.pied__marque span { color: var(--chrome-doux); font-weight: 500; }
.pied__accroche { margin: 0 0 .5rem; max-width: 54ch; color: #c3ced8; }
.pied__independance { margin: 0; max-width: 54ch; font-weight: 600; color: #fff; }

.pied__inner { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .pied__inner { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 62em) { .pied__inner { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.pied__bas {
    display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: start; justify-content: space-between;
    margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid #2b333c;
}
.pied__haut {
    flex: none; min-height: 44px; display: inline-flex; align-items: center;
    color: #fff; font-weight: 600; font-size: .875rem;
    text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: .22em;
}
.pied__haut::before { content: "\2191\00A0"; }
.pied__haut:hover { text-decoration-color: #fff; }
.pied__titre {
    margin: 0 0 .625rem; min-height: 1.25rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--chrome-doux);
}
.pied__bloc ul { margin: 0; padding: 0; list-style: none; }
.pied__bloc li { padding: .3125rem 0; }
.pied__bloc a {
    color: #fff;
    text-decoration: underline; text-decoration-color: rgba(255,255,255,.3);
    text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.pied__bloc a:hover { text-decoration-color: #fff; text-decoration-thickness: 2px; }
.pied__mention { margin: 0; color: var(--chrome-doux); font-size: .875rem; max-width: 60ch; line-height: 1.65; }
.pied__mention p { margin: 0 0 .5rem; }
.pied__mention p:last-child { margin: 0; }

/* --- Compléments : identité des silos ------------------------------------- */
.carte--silo { border-left: 6px solid var(--trait); }
.carte--silo[data-silo="guide-achat"]       { border-left-color: #1e6fb8; }
.carte--silo[data-silo="analyses"]          { border-left-color: #5b3f9e; }
.carte--silo[data-silo="installation"]      { border-left-color: #b4611a; }
.carte--silo[data-silo="domotique"]         { border-left-color: var(--action); }
.carte--silo[data-silo="economies-energie"] { border-left-color: var(--expert); }
.carte--silo[data-silo="guide-achat"]       .carte__intent { color: #1e6fb8; }
.carte--silo[data-silo="analyses"]          .carte__intent { color: #5b3f9e; }
.carte--silo[data-silo="installation"]      .carte__intent { color: #b4611a; }
.carte--silo[data-silo="economies-energie"] .carte__intent { color: var(--expert); }

@media (min-width: 66em) { .cartes--piliers .cartes__liste { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   COMPOSANTS PROPRES À LA PAGE D'ACCUEIL
   Ces blocs n'existent pas encore dans templates/views/home.php : ce sont les
   seules additions de balisage que demande cette maquette.
   ========================================================================== */

.section { margin: 2.75rem 0; }
.section__entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin: 0 0 1rem; }
.section__titre { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -.025em; }
.section__lien { margin-left: auto; font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.section__lien:hover { text-decoration: underline; }
.section__intro { margin: -.25rem 0 1.25rem; max-width: 54ch; color: var(--encre-doux); font-size: 1rem; }

/* --- Sélecteur : par quel générateur commencer --------------------------- */
.generateurs { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .generateurs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 66em) { .generateurs { grid-template-columns: repeat(6, 1fr); } }

.generateur {
    display: flex; flex-direction: column; gap: .5rem;
    min-height: 108px; padding: 1rem .875rem;
    background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
    text-decoration: none; color: var(--encre);
    font-size: .9375rem; font-weight: 600; line-height: 1.3;
}
.generateur svg { width: 26px; height: 26px; color: var(--action); flex: none; }
.generateur:hover { border-color: var(--action); background: var(--action-fond); }
.generateur--flou { background: transparent; border-style: dashed; }
.generateur--flou svg { color: var(--encre-doux); }

/* --- Repères : trois mises au point --------------------------------------- */
.reperes { display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 52em) { .reperes { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }
/* Pose a meme le fond : casse la repetition des cartes sur l'accueil. */
.repere { padding: 1.25rem 0 0; border-top: 3px solid var(--action); display: flex; flex-direction: column; }
.repere__chiffre {
    margin: 0 0 .25rem; font-size: 2.25rem; font-weight: 700;
    line-height: 1; letter-spacing: -.04em; color: var(--action);
}
.repere__titre { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.repere__texte { margin: 0 0 .75rem; font-size: .9375rem; color: var(--encre-doux); line-height: 1.5; }
.repere__lien {
    margin-top: auto; padding-top: .5rem; font-size: .9375rem; font-weight: 600;
    text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.repere__lien:hover { text-decoration-thickness: 2px; }

/* --- Bande sombre : le cluster « thermostat offert » ---------------------- */
.bande { background: var(--chrome); color: #fff; margin: 3rem 0; padding: 2.25rem 0; }
.bande__inner { max-width: var(--page); margin-inline: auto; padding-inline: 1.125rem; }
.bande__titre { margin: 0 0 .625rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; max-width: 24ch; }
.bande__texte { margin: 0 0 1.5rem; max-width: 56ch; color: #c3ced8; }
.puces-liens { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.puces-liens a {
    display: inline-flex; align-items: center; min-height: 46px; padding: 0 1rem;
    background: #232a32; border-radius: var(--rayon);
    color: #fff; text-decoration: none; font-size: .9375rem; font-weight: 600;
}
.puces-liens a:hover { background: var(--action); }
.bande__suite { margin: 0; font-size: .9375rem; }
.bande__suite a { color: #6fd0e0; font-weight: 600; }

/* --- Questions fréquentes en entrée de site ------------------------------- */
.questions { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 52em) { .questions { grid-template-columns: repeat(2, 1fr); } }
.questions a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 60px; padding: .875rem 1.125rem;
    background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
    color: var(--encre); text-decoration: none; font-size: 1rem; font-weight: 600; line-height: 1.35;
}
.questions a::after { content: "\203A"; color: var(--action); font-size: 1.5rem; line-height: 1; flex: none; }
.questions a:hover { border-color: var(--action); background: var(--action-fond); }

/* --- Méthode -------------------------------------------------------------- */
.methode { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.5rem 1.375rem; }
.methode__liste { display: grid; gap: 1.5rem; margin: 0; padding: 0; }
@media (min-width: 52em) { .methode__liste { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.methode__liste dt { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .375rem; }
.methode__liste dd { margin: 0; font-size: .9375rem; color: var(--encre-doux); line-height: 1.5; }
.methode__pied { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--trait); font-size: .9375rem; }
@media (min-width: 66em) { .cartes--marques .cartes__liste { grid-template-columns: repeat(4, 1fr); } }
.accueil > :last-child { margin-bottom: 0; }

/* ==========================================================================
   BLOC SCHÉMA — dessins techniques en SVG inline
   Aucune image chargée : le dessin hérite des variables de couleur et de la
   police du site, reste net à toute résolution et ne décale pas la mise en page.
   ========================================================================== */

.schema { max-width: var(--mesure); margin: 2rem 0; }

.schema__titre {
    margin: 0 0 .75rem;
    font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em;
}

.schema__cadre {
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.25rem 1rem;
    overflow-x: auto;              /* même comportement que les tableaux */
    overscroll-behavior-x: contain;
}
.schema__cadre svg { display: block; width: 100%; height: auto; min-width: 30rem; }
.schema--dense .schema__cadre svg { min-width: 33rem; }

/* Typographie interne du dessin : suit la police du site. */
.schema text { font-family: var(--police); fill: var(--encre); }
.schema .t-libelle  { font-size: 14px; font-weight: 600; }
.schema .t-petit    { font-size: 12px; fill: var(--encre-doux); }
.schema .t-chip     { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.schema .t-borne    { font-size: 11px; font-weight: 700; }

.schema .s-boitier  { fill: var(--papier); stroke: var(--encre); stroke-width: 2; }
.schema .s-fil      { stroke: var(--encre-doux); stroke-width: 2; fill: none; }
.schema .s-bus      { stroke: var(--action); stroke-width: 2.5; fill: none; }
.schema .s-borne    { fill: var(--papier); stroke: var(--encre); stroke-width: 1.5; }
.schema .s-axe      { stroke: var(--trait); stroke-width: 1.5; fill: none; }
.schema .s-courbe-a { stroke: var(--encre-doux); stroke-width: 2.5; fill: none; }
.schema .s-courbe-b { stroke: var(--action); stroke-width: 2.5; fill: none; }
.schema .s-separateur { stroke: var(--trait); stroke-width: 1; }
.schema .f-fil      { fill: var(--encre-doux); }
.schema .f-bus      { fill: var(--action); }
/* Jugement porte par le dessin : ce qu'il faut fuir, ce qu'il faut viser. */
.schema .s-eviter   { stroke: var(--danger); stroke-width: 2; fill: none; }
.schema .f-eviter   { fill: var(--danger); }
.schema .s-bon      { stroke: var(--expert); stroke-width: 2.5; fill: none; }
.schema .f-bon      { fill: var(--expert); }
.schema .s-tirets   { stroke: var(--encre-doux); stroke-width: 2; fill: none; stroke-dasharray: 6 5; }

.schema__legende {
    margin: .75rem 0 0;
    font-size: .875rem; color: var(--encre-doux); line-height: 1.5;
}
.schema__source {
    display: block; margin-top: .25rem;
    font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-doux);
}

/* Indice de defilement : vrai texte HTML, masque des que le dessin tient. */
.schema__glisser {
    margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--action);
}
@media (min-width: 48em) { .schema__glisser { display: none; } }
@media (max-width: 47.99em) { .schema__cadre { padding-inline: .875rem; } }

/* ==========================================================================
   AJOUTS v4
   ========================================================================== */

/* --- Couleur de rubrique, exposee en variable ----------------------------- */
body.silo-guide-achat       { --silo: #1e6fb8; }
body.silo-analyses          { --silo: #5b3f9e; }
body.silo-installation      { --silo: #b4611a; }
body.silo-domotique         { --silo: var(--action); }
body.silo-economies-energie { --silo: var(--expert); }

/* --- Lien d'evitement : hors ecran jusqu'a la tabulation ------------------ */
.skip {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.skip:focus {
    position: fixed; left: 1rem; top: 1rem; z-index: 100;
    width: auto; height: auto; overflow: visible;
    padding: .75rem 1.125rem; border-radius: var(--rayon);
    background: var(--papier); color: var(--encre);
    font-size: .9375rem; font-weight: 600; text-decoration: none;
    outline: 3px solid var(--hazard); outline-offset: 2px;
}

/* --- Texte d'introduction de l'accueil ------------------------------------ */
.intro-site { max-width: 46rem; margin: 3rem 0; }
.intro-site h2 {
    margin: 0 0 1rem; font-size: 1.625rem; font-weight: 700;
    line-height: 1.2; letter-spacing: -.03em; text-wrap: balance;
}
.intro-site p { margin: 0 0 1.125rem; }
.intro-site p:last-child { margin-bottom: 0; }
.intro-site a {
    text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.intro-site a:hover { text-decoration-thickness: 2px; }

/* --- Rythme de l'accueil : respirations plus larges entre les ensembles --- */
.accueil > .section + .cartes,
.accueil > .cartes + .section { margin-top: 3.75rem; }

/* --- Blocs lateraux de l'article : sur le fond bleute --------------------- */
/* Les cartes sont posees sur le papier : pas de cadre gris contenant des
   cartes grises, qui alourdissait la fin de page. */
.page--article .cartes--lateral { margin-top: 3.5rem; }

/* --- Feuille d'impression : les tutoriels s'emportent sur papier ---------- */
@media print {
    .entete, .pied, .ariane, .article__rail,
    .cta, .cartes--lateral, .skip, .schema__glisser { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
    .conteneur { max-width: none; padding: 0; }
    .article__corps { display: block !important; }
    .prose, .encart, .comparatif, .schema, .faq, .sources, .chiffre-cle { max-width: none; }
    .prose > h2, .prose h3, .faq__corps h3 { break-after: avoid; }
    .encart, .schema, .comparatif, .chiffre-cle, .faq { break-inside: avoid; }
    .encart--danger .encart__titre { background: #fff !important; color: #000 !important; border: 2px solid #000; }
    .encart--danger .encart__titre::after { display: none; }
    .chiffre-cle { border-left: 3px solid #000; }
    /* Les liens internes deviennent inutiles sur papier : on montre l'adresse. */
    .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* ==========================================================================
   AJOUTS v5
   ========================================================================== */

/* --- Date de mise a jour : adossee au lien de methode ---------------------- */
.page-entete__maj { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.page-entete__maj a {
    color: var(--lien); font-weight: 600;
    text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.page-entete__maj a:hover { text-decoration-thickness: 2px; }

/* --- Retour au sommaire : uniquement sur telephone, ou le rail disparait --- */
.retour-sommaire {
    display: block; min-height: 44px; padding: .625rem 0;
    margin: 2rem 0 -1.25rem;
    font-size: .875rem; font-weight: 600; color: var(--lien);
    text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.retour-sommaire::before { content: "\2191\00A0"; }
@media (min-width: 48em) { .retour-sommaire { display: none; } }

/* --- Liens de service : meme densite que le texte qu'ils accompagnent ------ */
.section__lien, .repere__lien, .bande__suite a, .methode__pied a, .sommaire a { color: var(--lien); }
.bande__suite a, .bande a { color: #7fd8e6; }

/* --- Le texte courant garde ses liens tres lisibles ------------------------ */
.prose a, .faq__corps a, .intro-site a {
    color: var(--lien); font-weight: 500;
    text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.prose a:hover, .faq__corps a:hover, .intro-site a:hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   AJOUTS v6
   ========================================================================== */

/* --- Zones a defilement horizontal : atteignables au clavier -------------- */
.table-wrap:focus-visible,
.schema__cadre:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }

/* --- Cible du lien d'evitement : le focus s'y depose reellement ----------- */
main:focus { outline: none; }

/* --- Ligne de mise a jour : un separateur, pas un simple espace ----------- */
.page-entete__maj { align-items: baseline; }
.page-entete__maj .sep { color: #9aa5b0; }

/* --- Schéma élargi -------------------------------------------------------- */
/* Le dessin déborde vers la droite, dans la marge extérieure de la page —
   jamais vers la gauche, où le sommaire est collant : aucun recouvrement
   possible. Le débord vaut zéro dès que l'écran n'offre plus de marge, donc
   la mise en page reste identique sur un portable de 1024 px. */
@media (min-width: 65em) {
    .schema--large {
        --debord: max(0px, min((100vw - 64rem) / 2 - 2rem, 14rem));
        max-width: none;
        width: calc(100% + var(--debord));
    }
    .schema--large .schema__cadre svg { min-width: 0; }
}
.schema--large .schema__cadre svg { min-width: 38rem; }
.schema--large .schema__legende { max-width: var(--mesure); }
.schema .s-eau      { stroke: #b4611a; stroke-width: 3; fill: none; }
.schema .s-cloison  { stroke: var(--trait); stroke-width: 2; }
.schema .s-radiateur{ fill: var(--papier); stroke: var(--encre-doux); stroke-width: 1.5; }
.schema .f-eau      { fill: #b4611a; }
.schema .t-piece    { font-size: 11px; font-weight: 700; letter-spacing: .1em; fill: var(--encre-doux); }

/* ==========================================================================
   GABARITS PILIER, PAGE SIMPLE, PLAN DU SITE ET 404
   ========================================================================== */

.pilier, .page-simple, .plan, .erreur { padding-bottom: 2rem; }
.pilier .prose, .page-simple .prose { max-width: var(--mesure); }

/* --- Sommaire en bandeau : le rail n'existe pas sur ces gabarits ---------- */
/* Pilier et page structurelle placent leur sommaire au-dessus du texte. Sur
   une page longue, un sommaire deplie en colonnes se lit mieux qu'un rail. */
.sommaire--large { max-width: var(--mesure); margin: 0 0 2.5rem; }
.sommaire--large .sommaire__liste { display: grid; gap: 0; }
/* Deux colonnes, et jamais plus large que la colonne de lecture : les deux
   bords droits doivent coincider. */
@media (min-width: 44em) {
    .sommaire--large .sommaire__liste { grid-template-columns: repeat(2, 1fr); column-gap: 1.75rem; }
    .sommaire--large .sommaire__liste li:nth-child(-n+2) { border-top: 0; }
}

/* --- Plan du site --------------------------------------------------------- */
.plan__groupe { max-width: var(--mesure); margin: 2.75rem 0; }
.plan__groupe h2 {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
    margin: 0 0 .875rem; padding-bottom: .625rem; border-bottom: 2px solid var(--encre);
    font-size: 1.375rem; font-weight: 700; letter-spacing: -.025em;
}
.plan__compte {
    font-size: .75rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--encre-doux);
}
.plan__liste { margin: 0; padding: 0; list-style: none; }
.plan__item { border-bottom: 1px solid var(--trait); }
.plan__item a {
    display: block; min-height: 46px; padding: .6875rem 0;
    color: var(--encre); font-weight: 500; line-height: 1.35;
    text-decoration: underline; text-decoration-color: rgba(85,96,107,.3);
    text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.plan__item a:hover { color: var(--lien); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
/* La profondeur se lit au retrait et au filet, pas a la seule indentation. */
.plan__item--n1 a { padding-left: 1.25rem; border-left: 2px solid var(--trait); font-weight: 400; }
.plan__item--n2 a { padding-left: 2.5rem; border-left: 2px solid var(--trait); font-weight: 400; font-size: .9375rem; }
.plan__item--n1 a:hover, .plan__item--n2 a:hover { border-left-color: var(--lien); }

/* --- Page 404 ------------------------------------------------------------- */
.erreur .page-entete { padding-top: 0; }
.erreur .page-entete::before { display: none; }
.erreur .prose { max-width: var(--mesure); margin-bottom: 1rem; }

/* --- Grille de programmation hebdomadaire (accueil) ----------------------- */
.grille-semaine { margin: 2.5rem 0 3.25rem; }
.grille-semaine .schema__cadre { background: var(--papier); }
.grille-semaine .schema__cadre svg { min-width: 34rem; }
.legende-cles { display: flex; flex-wrap: wrap; gap: .375rem 1.5rem; margin-bottom: .625rem; }
.cle { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--encre); }
.cle i { width: 1rem; height: 1rem; border-radius: 3px; flex: none; }
.cle__eco { background: #c9dae4; }
.cle__confort { background: #e2820c; }

/* --- Introduction de l'accueil : texte et illustration -------------------- */
.intro-site { max-width: none; }
.intro-site__texte { max-width: 42rem; }
.intro-site__visuel { margin: 2.25rem 0 0; }
.intro-site__visuel svg { display: block; width: 100%; max-width: 22rem; height: auto; }
.intro-site__visuel figcaption {
    margin-top: .75rem; max-width: 22rem;
    font-size: .875rem; line-height: 1.5; color: var(--encre-doux);
}
@media (min-width: 62em) {
    .intro-site {
        display: grid; grid-template-columns: minmax(0, 1fr) 22rem;
        column-gap: 4rem; align-items: center;
    }
    .intro-site__visuel { margin: 0; }
}

/* --- Cartes : plus présentes hors accueil, et repérables au survol -------- */
body:not(.page--home) .cartes--silos .carte,
body:not(.page--home) .cartes--hub .carte { padding: 1.375rem 1.5rem; }
body:not(.page--home) .cartes--silos .carte__titre,
body:not(.page--home) .cartes--hub .carte__titre { font-size: 1.25rem; }

/* Le filet de rubrique doit survivre au fond bleuté des pages intérieures. */
body:not(.page--home) .carte--silo { border-left-width: 6px; border-left-style: solid; }
body:not(.page--home) .carte--silo[data-silo="guide-achat"]       { border-left-color: #1e6fb8; }
body:not(.page--home) .carte--silo[data-silo="analyses"]          { border-left-color: #5b3f9e; }
body:not(.page--home) .carte--silo[data-silo="installation"]      { border-left-color: #b4611a; }
body:not(.page--home) .carte--silo[data-silo="domotique"]         { border-left-color: var(--action); }
body:not(.page--home) .carte--silo[data-silo="economies-energie"] { border-left-color: var(--expert); }

/* Les cartes sans rubrique reprennent le même repère au survol. */
body:not(.page--home) .cartes--lateral .carte { border-left: 6px solid transparent; }
body:not(.page--home) .cartes--lateral .carte:hover { border-left-color: var(--action); }
/* Les guides d'un hub appartiennent tous a la meme rubrique : le filet le dit. */
body:not(.page--home) .cartes--hub .carte { border-left: 6px solid var(--silo, var(--trait)); }

/* ==========================================================================
   v8 — GABARITS SANS RAIL : la colonne se centre au lieu de laisser un vide
   ========================================================================== */

/* Pilier et page structurelle n'ont pas de rail. Sans centrage, les deux tiers
   droits de l'ecran restent vides sur toute la hauteur. */
.pilier .page-entete,
.pilier .sommaire,
.pilier .prose,
.pilier .faq,
.pilier .sources,
.page-simple .page-entete,
.page-simple .sommaire,
.page-simple .prose {
    max-width: var(--mesure);
    margin-inline: auto;
}
.pilier .page-entete, .page-simple .page-entete { max-width: var(--mesure); }

/* Sur le pilier, un schema elargi peut deborder des deux cotes, puisque rien
   n'occupe la gauche. C'est le seul gabarit ou la pleine largeur est possible. */
@media (min-width: 65em) {
    .pilier .schema--large {
        width: 61.75rem; max-width: none;
        margin-left: calc((100% - 61.75rem) / 2);
    }
    .pilier .schema--large .schema__cadre svg { min-width: 0; }
    .pilier .schema--large .schema__legende { max-width: 46rem; margin-inline: 0; }
}

/* --- Plan du site : deux colonnes de groupes ------------------------------ */
.plan .page-entete, .plan .prose { max-width: var(--mesure); }
.plan__groupes { margin-top: 2rem; }
.plan__groupe { max-width: none; margin: 0 0 2.5rem; }
@media (min-width: 60em) {
    .plan__groupes { columns: 2; column-gap: 3.5rem; }
    /* Un groupe ne doit jamais etre coupe entre deux colonnes : un enfant
       separe de son parent devient illisible. */
    .plan__groupe { break-inside: avoid; }
}
.schema .s-separateur { stroke: var(--trait); stroke-width: 1; }