/* L’Abritant — feuille pages : pages CMS, contact, 404, légales, livraison, FAQ, pros, devis, marque (#cms #contact #pagenotfound #stores #sitemap).
   Chargée sur toutes les pages : chaque règle est limitée à l’identifiant de page porté par <body> (Hummingbird : body id = page_name).
   Uniquement des jetons var(--…), aucun !important, même couche @layer que l’original quand on redéclare Hummingbird. */

/* Cartes du design system V2 : E1_BlogCategorie, E2_ArticleBlog, E3_Contact, E4_Erreur404, E5_PagesLegales,
   E6_LivraisonServices, E7_FAQ, I1_ProsCollectivites, I2_DemandeDevis (variante du contact), D2_MarqueLAB.
   Classes locales des cartes (e1-*, e2-*, e3-*, e4-*, e5-*, e6-*, e7-*, i1-*, d2-*) : hors couche, comme maquettes.css.

   Sommaire : §1 prose · §2 en-têtes · §3 grilles, sommaire, ancres, colonne d’appui · §4 encadrés posables par l’éditeur ·
   §5 FAQ · §6 bandeau conseiller et page en rédaction · §8 rubrique Conseils · §9 contact et devis ·
   §10 404 et 410 · §11 plan du site · §12 paliers (1 200 / 992 / 768 / 480 / 380 px). */


/* §1 Prose (Q22, lecteurs dyslexiques) : 66 caractères, 18 px, interlignage 1,75, jamais justifiée, sans césure automatique. */
#cms .e2-prose { max-width: 66ch; font-family: var(--font-texte); font-size: 18px; line-height: 1.75; word-spacing: .04em; text-align: start; hyphens: manual; color: var(--texte); min-width: 0; }
#cms .e2-prose--large { max-width: none; }
#cms .e2-prose--large > :is(p, ul, ol, blockquote, h2, h3, h4) { max-width: 66ch; }
#cms .e2-prose > * { margin-block: 0; }
#cms .e2-prose > * + * { margin-block-start: 1em; }
#cms .e2-prose h2 { margin-block: 1.6em .6em; font-family: var(--font-titre); font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--texte); scroll-margin-top: calc(var(--barre-collante) + var(--espace-6)); }
#cms .e2-prose h3 { margin-block: 1.6em .6em; font-family: var(--font-titre); font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--texte); }
#cms .e2-prose h4 { margin-block: 1.4em .4em; font-family: var(--font-titre); font-size: 19px; line-height: 24px; font-weight: 700; }
#cms .e2-prose > :is(h2, h3, h4):first-child { margin-block-start: 0; }
#cms .e2-prose a:not(.ab-bouton) { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--trait-moyen); text-underline-offset: 4px; }
#cms .e2-prose a:not(.ab-bouton):hover { background: linear-gradient(transparent 58%, var(--jaune-hauban) 58%); }
#cms .e2-prose a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#cms .e2-prose ul { padding: 0; list-style: none; }
#cms .e2-prose ul > li { position: relative; padding-inline-start: 22px; }
#cms .e2-prose ul > li::before { content: ""; position: absolute; left: 0; top: .85em; width: 12px; height: var(--trait-hauban); background: var(--graphite); }
#cms .e2-prose ol { padding-inline-start: 1.4em; }
#cms .e2-prose li + li { margin-block-start: .3em; }
#cms .e2-prose li::marker { font-family: var(--font-technique); font-weight: 600; }
#cms .e2-prose blockquote { padding: var(--espace-1) 0 var(--espace-1) var(--espace-6); border-left: var(--trait-hauban) solid var(--graphite); font-weight: 500; }
#cms .e2-prose img { max-width: 100%; height: auto; border-radius: var(--rayon-m); }
#cms .e2-prose figure figcaption { margin-block-start: var(--espace-2); font-size: 14px; line-height: 20px; color: var(--texte-doux); }
#cms .e2-prose hr { margin-block: 2em; border: 0; border-top: var(--trait-fin) solid var(--trait); opacity: 1; }
#cms .e2-prose strong, #cms .e2-prose b { font-weight: 700; }

/* Tableaux : enveloppe posée par le gabarit, ils défilent seuls ; la page ne défile jamais de côté. */
#cms .e2-tableau { overflow-x: auto; max-width: 100%; margin-block: 1.6em; }
#cms .e2-tableau:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#cms .e2-tableau table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; word-spacing: 0; background: var(--blanc); }
#cms .e2-tableau :is(th, td) { min-width: 7em; padding: var(--espace-3) var(--espace-4); text-align: left; vertical-align: top; border: var(--trait-fin) solid var(--trait); }
#cms .e2-tableau :is(thead th, tr:first-child th) { border-bottom: var(--trait-moyen) solid var(--graphite); font-weight: 600; }
#cms .e2-tableau tbody tr:hover { background: var(--jaune-pale); }


/* §2 En-têtes de page */
#cms :is(.e2-tete, .e5-tete, .e7-tete, .i1-tete) { display: grid; gap: var(--espace-4); max-width: 920px; padding: var(--espace-4) 0 var(--espace-8); }
#cms :is(.e2-tete, .e5-tete, .e7-tete, .i1-tete) :is(h1, p) { margin: 0; }
#cms .e2-tete .chapo, #cms .e5-tete .chapo, #cms .e7-tete .chapo, #cms .i1-tete .chapo { max-width: 62ch; color: var(--texte-doux); }
#cms .e2-titre { font-family: var(--font-titre); font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -0.02em; color: var(--texte); }
#cms .e2-rubrique { display: flex; }
#cms .e5-tete .titre-1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; }
#cms .i1-tete .titre-affiche { font-size: clamp(40px, 5.4vw, 72px); }
#cms .i1-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4) var(--espace-6); }
#cms .i1-actions .ab-bouton--lien { min-height: 44px; }
#cms .e7-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: end; gap: var(--espace-12); max-width: none; }
#cms .e7-tete__titre { display: grid; gap: var(--espace-3); }

/* Ligne « Mise à jour le … · Version … » (class e5-maj dans le contenu, remontée sous le titre) */
#cms .e2-dates, #cms .e5-maj { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-4); margin: 0; font-family: var(--font-technique); font-size: 13px; line-height: 18px; word-spacing: 0; color: var(--texte-doux); }
#cms .e2-dates b, #cms .e2-dates strong { color: var(--texte); font-weight: 600; }
#cms .e2-dates a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }


/* §3 Grilles : sommaire (260 px) | prose (66 caractères) | colonne d’appui ; FAQ : thèmes (280 px) | questions. */
#cms .e5-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-12); align-items: start; padding-bottom: var(--espace-16); }
#cms .e5-page--legale { grid-template-columns: minmax(0, 66ch) minmax(0, 1fr); }
#cms .e5-page--legale.e5-avec-sommaire { grid-template-columns: 260px minmax(0, 66ch) minmax(0, 1fr); }
#cms .e5-page--page.e5-avec-sommaire { grid-template-columns: 260px minmax(0, 66ch); }
#cms .e5-page--faq.e5-avec-sommaire { grid-template-columns: 280px minmax(0, 1fr); }
#cms .e5-page--service { gap: var(--espace-8); }
#cms .e5-corps { min-width: 0; display: grid; gap: var(--espace-6); align-content: start; }

/* Sommaire collant et thèmes de la FAQ : entrées de 44 px, section courante en jaune pâle + filet graphite. */
#cms .e5-sommaire:not([hidden]) { position: sticky; top: calc(var(--barre-collante) + var(--espace-6)); display: grid; gap: var(--espace-2); max-height: calc(100vh - var(--barre-collante) - var(--espace-12)); overflow-y: auto; }
#cms .e5-sommaire__titre { margin: 0 0 var(--espace-2); font-family: var(--font-technique); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
#cms .e5-sommaire ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
#cms .e5-sommaire a { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); min-height: 44px; padding: 6px var(--espace-3); border-left: var(--trait-moyen) solid var(--trait); font-size: 15px; line-height: 20px; color: var(--texte-doux); text-decoration: none; }
#cms .e5-sommaire a:hover { color: var(--texte); background: var(--fond-section); }
#cms .e5-sommaire a.on { border-left: var(--trait-hauban) solid var(--graphite); color: var(--texte); font-weight: 600; background: var(--jaune-pale); }
#cms .e5-sommaire a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#cms .e5-sommaire a .pg-mono { font-size: 12px; color: var(--texte-doux); }

/* Ancres de page (E6) : puces de 44 px, une ligne qui défile seule. */
#cms .e6-ancres ol { display: flex; gap: var(--espace-2); margin: 0; padding: 0 0 var(--espace-1); list-style: none; overflow-x: auto; }
#cms .e6-ancres li { flex: none; }
#cms .e6-ancres a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--espace-4); background: var(--blanc); border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-s); font-size: 15px; font-weight: 600; color: var(--texte); text-decoration: none; white-space: nowrap; }
#cms .e6-ancres a:hover, #cms .e6-ancres a.on { border-color: var(--graphite); background: var(--jaune-pale); }
#cms .e6-ancres a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }

/* Colonne d’appui des pages légales : « Changer d’avis » et service client. */
#cms .e5-aside { position: sticky; top: calc(var(--barre-collante) + var(--espace-6)); display: grid; gap: var(--espace-4); min-width: 0; }
#cms .e5-carte { display: grid; gap: var(--espace-3); padding: var(--espace-6); }
#cms .e5-carte h2 { margin: 0; }
#cms .e5-carte .ab-bouton { width: 100%; white-space: normal; text-align: center; }
#cms .e5-carte__tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 20px; font-weight: 500; color: var(--texte); text-decoration: none; }
#cms .e5-carte__lien { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--texte); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
#cms .e5-carte a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }


/* §4 Encadrés posables par l’éditeur (attribut class, bouton « Code source » de l’éditeur de texte).
   Classes du kit déjà utilisables telles quelles : pg-legal (garanties légales, rétractation), pg-retenir (à retenir),
   pg-message pg-message--info | --attention, pg-encart pg-encart--pale, pg-doc, ab-astuce, pg-phase2.
   Classes de la page : e5-commerciale, e5-legal__duo, e5-societe, e6-paliers / e6-palier, e6-jour,
   i1-profils / i1-profil, i1-tuiles, i1-process, i1-pro, d2-chiffres. */
#cms .e2-prose .pg-legal { gap: var(--espace-3); padding: var(--espace-6); font-size: 16px; line-height: 25px; word-spacing: 0; }
#cms .e2-prose :is(.pg-legal, .e5-commerciale, .pg-retenir, .pg-message, .pg-encart, .i1-profil, .e6-palier) > * { margin: 0; }
#cms .e2-prose :is(.pg-legal, .e5-commerciale) :is(h2, h3, h4) { margin: 0; font-family: var(--font-titre); font-size: 21px; line-height: 26px; font-weight: 750; }
#cms .e2-prose .e5-commerciale { display: grid; gap: var(--espace-2); padding: var(--espace-6); background: var(--blanc); border: var(--trait-moyen) dashed var(--trait-fort); border-radius: var(--rayon-m); font-size: 16px; line-height: 25px; word-spacing: 0; }
#cms .e2-prose .e5-legal__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4); }
#cms .e2-prose .e5-legal__duo > * { display: grid; gap: var(--espace-2); align-content: start; margin: 0; padding: var(--espace-4); background: var(--toile); border-radius: var(--rayon-s); }
#cms .e2-prose .e5-societe { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: var(--espace-1) var(--espace-4); padding: var(--espace-4) var(--espace-6); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); font-size: 16px; line-height: 24px; word-spacing: 0; }
#cms .e2-prose .e5-societe :is(dt, dd) { margin: 0; }
#cms .e2-prose .e5-societe dt { color: var(--texte-doux); font-weight: 400; }
#cms .e2-prose .e5-societe dd { font-family: var(--font-technique); font-size: 15px; overflow-wrap: anywhere; }
#cms .e2-prose .pg-retenir ul > li { padding-inline-start: 22px; }
#cms .e2-prose .pg-message { display: block; font-size: 16px; line-height: 24px; word-spacing: 0; }
#cms .e2-prose .ab-astuce { display: block; margin-inline: var(--espace-2); }
#cms .e2-prose .pg-doc { font-size: 16px; line-height: 22px; word-spacing: 0; }

/* E6 : niveaux de livraison (cartes numérotées) et déroulé du jour de livraison (étapes en colonnes). */
#cms .e2-prose .e6-paliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-4); counter-reset: e6-palier; }
#cms .e2-prose .e6-palier { position: relative; display: grid; gap: var(--espace-2); align-content: start; padding: var(--espace-6); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); font-size: 16px; line-height: 24px; word-spacing: 0; counter-increment: e6-palier; }
#cms .e2-prose .e6-palier::before { content: counter(e6-palier, decimal-leading-zero); font-family: var(--font-technique); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--texte-doux); }
#cms .e2-prose .e6-palier :is(h3, h4) { margin: 0; font-size: 21px; line-height: 26px; }
#cms .e2-prose ol.e6-jour { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--espace-4); padding: 0; list-style: none; counter-reset: e6-jour; }
#cms .e2-prose ol.e6-jour > li { margin: 0; padding: var(--espace-4) 0 0; border-top: var(--trait-hauban) solid var(--graphite); font-size: 16px; line-height: 24px; word-spacing: 0; counter-increment: e6-jour; }
#cms .e2-prose ol.e6-jour > li::before { content: counter(e6-jour, decimal-leading-zero); display: block; margin-bottom: var(--espace-2); font-family: var(--font-technique); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--texte-doux); }

/* I1 : profils, tuiles « ce qui existe aujourd’hui », process collectivités sur graphite, compte pro en tireté. */
#cms .e2-prose .i1-profils, #cms .e2-prose .i1-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--espace-4); }
#cms .e2-prose .i1-profil { display: grid; gap: var(--espace-3); align-content: start; padding: var(--espace-6); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); font-size: 16px; line-height: 24px; word-spacing: 0; }
#cms .e2-prose .i1-profil :is(h3, h4) { margin: 0; font-size: 21px; line-height: 26px; }
#cms .e2-prose .i1-tuiles > * { margin: 0; padding: var(--espace-4) 0 0; border-top: var(--trait-hauban) solid var(--graphite); font-size: 16px; line-height: 24px; word-spacing: 0; }
#cms .e2-prose ol.i1-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--espace-6); padding: var(--espace-8); list-style: none; background: var(--fond-inverse); color: var(--texte-inverse); border-radius: var(--rayon-m); counter-reset: i1-etape; }
#cms .e2-prose ol.i1-process > li { margin: 0; font-size: 16px; line-height: 24px; word-spacing: 0; counter-increment: i1-etape; }
#cms .e2-prose ol.i1-process > li::before { content: counter(i1-etape, decimal-leading-zero); display: block; margin-bottom: var(--espace-2); font-family: var(--font-technique); font-size: 20px; font-weight: 600; color: var(--jaune-hauban); }
#cms .e2-prose ol.i1-process a { color: inherit; }
#cms .e2-prose ol.i1-process a:focus-visible { outline-color: var(--jaune-hauban); }
#cms .e2-prose .i1-pro { display: grid; gap: var(--espace-3); padding: var(--espace-6); border: var(--trait-moyen) dashed var(--trait-fort); border-radius: var(--rayon-m); font-size: 16px; line-height: 24px; word-spacing: 0; }
#cms .e2-prose .i1-pro > * { margin: 0; }

/* D2 : chiffres en mono 34/40. */
#cms .e2-prose .d2-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-6); padding: 0; }
#cms .e2-prose .d2-chiffres > li { padding: 0; font-size: 15px; line-height: 22px; word-spacing: 0; }
#cms .e2-prose .d2-chiffres > li::before { content: none; }
#cms .e2-prose .d2-chiffres strong, #cms .e2-prose .d2-chiffres b { display: block; font-family: var(--font-technique); font-size: 34px; line-height: 40px; font-weight: 500; }


/* §5 FAQ : questions repliables (titre 3 finissant par « ? », transformé par le gabarit), recherche, état vide. */
#cms .e7-faq details.e7-q { border-bottom: var(--trait-fin) solid var(--trait); }
#cms .e7-faq h2 + details.e7-q, #cms .e7-faq > details.e7-q:first-child { border-top: var(--trait-moyen) solid var(--graphite); }
#cms .e7-faq details.e7-q + details.e7-q { margin-block-start: 0; }
#cms .e7-q__q { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); min-height: 56px; padding: var(--espace-3) var(--espace-2) var(--espace-3) 0; cursor: pointer; list-style: none; transition: background-color .12s ease-out; }
#cms .e7-q__q::-webkit-details-marker { display: none; }
#cms .e7-q__q h3 { margin: 0; font-family: var(--font-texte); font-size: 17px; line-height: 24px; font-weight: 600; word-spacing: 0; }
#cms .e7-q__q:hover { background: var(--fond-section); }
#cms .e7-q__q:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#cms details.e7-q[open] > .e7-q__q { padding-inline-start: var(--espace-4); background: var(--jaune-pale); box-shadow: inset var(--trait-hauban) 0 0 var(--graphite); }
#cms .e7-q__ico { position: relative; flex: none; width: 24px; height: 24px; }
#cms .e7-q__ico::before, #cms .e7-q__ico::after { content: ""; position: absolute; left: 4px; right: 4px; top: 11px; height: var(--trait-moyen); background: currentColor; }
#cms .e7-q__ico::after { transform: rotate(90deg); transition: transform .12s ease-out; }
#cms details.e7-q[open] .e7-q__ico::after { transform: rotate(0deg); }
#cms .e7-q__r { padding: var(--espace-4) 64px var(--espace-6) var(--espace-4); max-width: 72ch; font-size: 17px; line-height: 1.65; }
#cms .e7-q__r > * { margin: 0; }
#cms .e7-q__r > * + * { margin-block-start: .8em; }
#cms .e7-faq.e7-filtre > :not(details):not(h2) { display: none; }
#cms .e7-recherche:not([hidden]) { display: grid; gap: var(--espace-2); }
#cms .e7-recherche .pg-recherche { max-width: none; }
#cms .e7-recherche .pg-recherche__champ { min-width: 0; color: var(--graphite); font: inherit; font-size: 16px; }
#cms .e7-recherche .pg-recherche__champ:focus-visible { border-color: var(--graphite); outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#cms .e7-compte { min-height: 20px; margin: 0; font-family: var(--font-technique); font-size: 13px; line-height: 20px; color: var(--texte-doux); }
#cms .e7-vide:not([hidden]) { justify-items: start; text-align: left; }
#cms .e7-vide p { margin: 0; }


/* §6 Bandeau conseiller (kit pg-conseiller, sans prénom) et page en rédaction (E2 état 03). */
#cms .e1-conseiller { margin-block: var(--espace-12) var(--espace-16); border-radius: var(--rayon-m); }
#cms .e1-conseiller__texte { display: grid; gap: var(--espace-2); }
#cms .e1-conseiller__texte :is(p, h2) { margin: 0; color: inherit; }
#cms .e1-conseiller__texte .corps { max-width: 60ch; }
#cms .e1-conseiller__droite { display: grid; gap: var(--espace-3); justify-items: start; }
#cms .e1-conseiller__btns { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
#cms .e1-conseiller .pg-conseiller__tel { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }

#cms .e2-redaction { max-width: 760px; margin-bottom: var(--espace-16); padding: var(--espace-6); }
#cms .e2-redaction__texte { display: grid; gap: var(--espace-3); justify-items: start; }
#cms .e2-redaction__texte p { margin: 0; }
#cms .e2-redaction__coord { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-6); }
#cms .e2-redaction__coord a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }


/* §8 Rubrique Conseils (E1) : thèmes en puces, compteur, cartes d’articles (avec image, ou filet graphite sans image). */
#cms .e1-page { padding-bottom: var(--espace-4); }
#cms .e1-tete { display: grid; gap: var(--espace-4); max-width: 860px; padding: var(--espace-4) 0 var(--espace-8); }
#cms .e1-tete :is(h1, p) { margin: 0; }
#cms .e1-tete .titre-affiche { font-size: clamp(40px, 4.6vw, 64px); }
#cms .e1-tete .chapo { max-width: 62ch; color: var(--texte-doux); }
#cms .e1-themes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-6); margin-bottom: var(--espace-12); }
#cms .e1-themes__liste { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin: 0; padding: 0; list-style: none; }
#cms .e1-themes .pg-souscat { min-height: 44px; color: var(--texte); text-decoration: none; }
#cms .e1-themes .pg-souscat:hover { border-color: var(--graphite); }
#cms .e1-themes .pg-souscat:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#cms .e1-themes__compte { margin: 0 0 0 auto; font-family: var(--font-technique); font-size: 13px; color: var(--texte-doux); }
#cms .e1-liste > h2 { margin: 0 0 var(--espace-6); }
#cms .e1-cartes { margin: 0; padding: 0; list-style: none; }
#cms .e1-cartes > li { display: flex; min-width: 0; }
#cms .e1-cartes .pg-carte-photo { position: relative; flex: 1; }
#cms .e1-cartes .pg-carte-photo:hover { box-shadow: var(--ombre-flottante); }
#cms .e1-cartes .pg-carte-photo__img { height: 200px; }
#cms .e1-cartes .pg-carte-photo__corps :is(p, h3) { margin: 0; }
#cms .e1-cartes .e1-sans { border-top: var(--trait-hauban) solid var(--graphite); }
#cms .e1-carte__lien { color: inherit; text-decoration: none; }
#cms .e1-carte__lien::after { content: ""; position: absolute; inset: 0; }
#cms .e1-carte__lien:focus-visible { outline: 0; }
#cms .e1-cartes .pg-carte-photo:has(.e1-carte__lien:focus-visible) { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#cms .e1-cartes .ab-bouton--lien { display: inline-flex; align-items: center; min-height: 44px; }
#cms .e1-vide { margin-bottom: var(--espace-12); }
#cms .e1-vide p { margin: 0; }


/* §9 Contact (E3) et variante devis (I2) : formulaire | coordonnées de 420 px. */
/* Hummingbird met le contact en « colonne de gauche » (theme.yml) : la colonne centrale reprend toute la largeur. */
@layer bs-base {
  #contact #center-column { flex: 0 0 auto; width: 100%; }
}
#contact .e3-page { padding-bottom: var(--espace-4); }
#contact .e3-tete { display: grid; gap: var(--espace-3); max-width: 860px; padding: var(--espace-4) 0 var(--espace-8); }
#contact .e3-tete :is(h1, p) { margin: 0; }
#contact .e3-tete .chapo { max-width: 62ch; color: var(--texte-doux); }
#contact .e3-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--espace-12); align-items: start; }
#contact .e3-ecrire { min-width: 0; }
#contact .e3-form { display: grid; gap: var(--espace-6); }
#contact .e3-form > h2 { margin: 0; }
#contact .e3-champs { display: grid; gap: var(--espace-6); }
#contact .e3-champs .ab-champ { max-width: none; }
#contact .e3-champs .ab-champ__libelle { margin: 0; }
#contact .e3-champs .ab-champ__libelle .pg-doux { font-weight: 400; }
#contact .e3-champs .ab-champ__saisie { border-radius: var(--rayon-s); box-shadow: none; }
#contact .e3-champs .ab-champ__saisie:focus-visible, #contact .e3-fichier:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#contact .e3-champs select.ab-champ__saisie { padding-inline-end: var(--espace-12); }
#contact .e3-zone { min-height: 168px; padding-block: var(--espace-3); resize: vertical; }
#contact .e3-fichier { min-height: 48px; padding: var(--espace-2); font-size: 15px; background: var(--blanc); border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-s); }
#contact .e3-champs .ab-champ__aide { margin: 0; }
#contact .e3-consentement { font-size: 14px; line-height: 20px; }
#contact .e3-envoi { display: flex; }
#contact .e3-envoyer { white-space: normal; text-align: center; }
#contact .e3-form .pg-message { scroll-margin-top: calc(var(--barre-collante) + var(--espace-6)); }
#contact .e3-form .pg-message:focus { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#contact .e3-message__liste { margin: var(--espace-1) 0 0; padding: 0; list-style: none; }

#contact .e3-coord { display: grid; gap: var(--espace-4); }
#contact .e3-carte { display: grid; gap: var(--espace-2); padding: var(--espace-6); }
#contact .e3-carte :is(h2, p, address) { margin: 0; }
#contact .e3-tel { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-technique); font-size: 24px; line-height: 30px; font-weight: 500; color: var(--texte); text-decoration: none; }
#contact .e3-lien { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--texte); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
#contact .e3-carte a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#contact .e3-mtel { display: none; }

#contact .e3-faq { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--espace-16); align-items: start; padding: var(--espace-16) 0; }
#contact .e3-faq > h2 { margin: 0; }
#contact .e3-liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--espace-6); border-top: var(--trait-moyen) solid var(--graphite); }
#contact .e3-liens a, #contact .e3-liens--module :is(a) { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); min-height: 56px; border-bottom: var(--trait-fin) solid var(--trait); font-size: 17px; font-weight: 600; color: var(--texte); text-decoration: none; }
#contact .e3-liens a:hover { background: var(--fond-section); }
#contact .e3-liens a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#contact .e3-liens--module :is(ul) { margin: 0; padding: 0; list-style: none; }


/* §10 Pages introuvable (404) et retirée (410) — E4. La 410 peut être servie sous une fiche ou une catégorie. */
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-page { padding-bottom: var(--espace-16); text-align: start; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: var(--espace-16); align-items: center; padding: var(--espace-12) 0 var(--espace-16); }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-page--410 .e4-bloc { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-txt { display: grid; gap: var(--espace-6); justify-items: start; min-width: 0; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-txt :is(h1, p) { margin: 0; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-txt .titre-affiche { font-size: clamp(44px, 5.4vw, 72px); }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-txt .chapo { max-width: 46ch; color: var(--texte-doux); }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4) var(--espace-6); }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-actions .ab-bouton--lien { min-height: 44px; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-recherche { width: 100%; max-width: 520px; margin: 0; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-recherche .pg-recherche__champ { min-width: 0; color: var(--graphite); font: inherit; font-size: 16px; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-recherche .pg-recherche__champ:focus-visible { border-color: var(--graphite); outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-recherche .pg-recherche__btn { border: 0; cursor: pointer; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-recherche .pg-recherche__btn:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-410__ico { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--toile-fonce); border-radius: var(--rayon-m); }

/* Dessin au trait : couleurs par classes, jamais par attribut */
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin { position: relative; margin: 0; aspect-ratio: 560 / 460; background: var(--toile-fonce); border-radius: var(--rayon-m); overflow: hidden; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin svg { position: absolute; inset: 0; width: 100%; height: 100%; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin .e4-sol { stroke: var(--trait-fort); stroke-width: 2; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin .e4-toit { fill: var(--jaune-hauban); stroke: var(--graphite); stroke-width: 3; stroke-linejoin: miter; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin .e4-trait { fill: none; stroke: var(--graphite); stroke-width: 3; stroke-linecap: square; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin .e4-hauban { fill: none; stroke: var(--graphite); stroke-width: 2; stroke-dasharray: 8 7; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin .e4-plein { fill: var(--graphite); }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin .e4-vent { fill: none; stroke: var(--graphite); stroke-width: 2; stroke-linecap: square; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-dessin .ab-cote { position: absolute; left: 26.8%; width: 53.6%; top: 91.3%; }

/* Liens utiles : 3 colonnes de 60 px (404), une colonne (410) */
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens-zone > h2 { margin: 0; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--espace-6); margin-top: var(--espace-4); border-top: var(--trait-moyen) solid var(--graphite); }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-page--410 .e4-liens { grid-template-columns: minmax(0, 1fr); }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens a { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); min-height: 60px; padding-right: var(--espace-6); border-bottom: var(--trait-fin) solid var(--trait); font-size: 17px; font-weight: 600; color: var(--texte); text-decoration: none; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens a svg { transition: transform .12s ease-out; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens a:hover svg { transform: translateX(2px); }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens--module ul { margin: 0; padding: 0; list-style: none; }


/* §11 Plan du site : redéclarations de Hummingbird (@layer ps-components), liens de 44 px. */
@layer ps-components {
  #sitemap .sitemap__block h2 { font-family: var(--font-titre); font-size: 22px; line-height: 28px; font-weight: 700; }
  #sitemap .sitemap__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte); text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 4px; }
  #sitemap .sitemap__link:hover { color: var(--texte); text-decoration-color: var(--graphite); }
  #sitemap .sitemap__link:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
  #sitemap .sitemap__list--nested { border-left-color: var(--trait); }
  #sitemap .sitemap__list--nested > .sitemap__item > .sitemap__link::before { background-color: var(--trait); }
}


/* §12 Paliers du design system */
@media (prefers-reduced-motion: reduce) {
  #cms .e7-q__q, #cms .e7-q__ico::after, :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens a svg { transition: none; }
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens a:hover svg { transform: none; }
}

@media (max-width: 1199.98px) {
  #cms .e5-page--legale, #cms .e5-page--legale.e5-avec-sommaire { grid-template-columns: 240px minmax(0, 1fr); }
  #cms .e5-page--legale:not(.e5-avec-sommaire) { grid-template-columns: minmax(0, 1fr); }
  #cms .e5-page--legale .e5-aside { position: static; grid-column: -2 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  #cms .e5-page--page.e5-avec-sommaire { grid-template-columns: 240px minmax(0, 1fr); }
  #cms .e5-page--faq.e5-avec-sommaire { grid-template-columns: 240px minmax(0, 1fr); }
  #cms .e7-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--espace-8); }
  #contact .e3-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--espace-8); }
  #contact .e3-faq { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--espace-8); }
  #contact .e3-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-bloc { gap: var(--espace-8); }
  #cms .e2-prose .d2-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  #cms .e5-page, #cms .e5-page--legale, #cms .e5-page--legale.e5-avec-sommaire, #cms .e5-page--page.e5-avec-sommaire, #cms .e5-page--faq.e5-avec-sommaire { grid-template-columns: minmax(0, 1fr); gap: var(--espace-8); }
  #cms .e5-page--legale .e5-aside { grid-column: auto; }
  #cms .e5-sommaire:not([hidden]) { position: static; max-height: none; overflow: visible; padding: var(--espace-4); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
  #cms .e7-nav:not([hidden]) { padding: 0; background: none; border: 0; }
  #cms .e7-nav ol { display: flex; gap: var(--espace-2); overflow-x: auto; padding-bottom: var(--espace-1); }
  #cms .e7-nav li { flex: none; }
  #cms .e7-nav a { border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-s); background: var(--blanc); white-space: nowrap; }
  #cms .e7-nav a.on { border-color: var(--graphite); }
  #cms .e7-tete { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--espace-6); }
  #contact .e3-grille { grid-template-columns: minmax(0, 1fr); }
  #contact .e3-coord { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  #contact .e3-faq { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); padding: var(--espace-12) 0; }
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-bloc, :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-page--410 .e4-bloc { grid-template-columns: minmax(0, 1fr); padding: var(--espace-8) 0 var(--espace-12); }
  #cms .e2-prose .e6-paliers { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  /* Téléphone : titres sur l’échelle téléphone, prose à 17 px */
  #cms .e2-titre { font-size: 36px; line-height: 40px; }
  #cms .e5-tete .titre-1, #cms .e7-tete .titre-1, #contact .e3-tete .titre-1 { font-size: 34px; line-height: 38px; }
  #cms .i1-tete .titre-affiche, :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-txt .titre-affiche { font-size: 44px; line-height: 46px; }
  #cms .e1-tete .titre-affiche { font-size: 40px; line-height: 44px; }
  #cms :is(.e2-tete, .e5-tete, .e7-tete, .i1-tete, .e1-tete) .chapo, #contact .e3-tete .chapo { font-size: 18px; line-height: 28px; }
  #cms .e2-prose { font-size: 17px; }
  #cms .e2-prose h2 { font-size: 26px; }
  #cms .e2-prose h3 { font-size: 20px; }
  #cms .e7-q__r { padding-inline-end: var(--espace-4); }
  #cms .e2-prose .e5-legal__duo, #cms .e2-prose .e5-societe { grid-template-columns: minmax(0, 1fr); }
  #cms .e2-prose .e5-societe dt { margin-top: var(--espace-2); }
  #cms .i1-actions .ab-bouton--principal { width: 100%; }

  /* Bandeau conseiller : boutons en pleine largeur, téléphone en 24/32 */
  #cms .e1-conseiller { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); padding: var(--espace-6) var(--espace-4); }
  #cms .e1-conseiller__droite { justify-items: stretch; }
  #cms .e1-conseiller__btns .ab-bouton { flex: 1 1 auto; }
  #cms .e1-conseiller .pg-conseiller__tel { font-size: 24px; line-height: 32px; }

  /* Rubrique Conseils : une colonne, image en 4/3 */
  #cms .e1-themes { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
  #cms .e1-themes__liste { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--espace-1); }
  #cms .e1-themes__liste > li { flex: none; }
  #cms .e1-themes__compte { margin: 0; }
  #cms .e1-cartes .pg-carte-photo__img { height: auto; aspect-ratio: 4 / 3; }

  /* Contact : téléphone d’abord sur bandeau graphite, e-mail en lien de 44 px ; cartes téléphone et e-mail retirées de la colonne */
  #contact .e3-mtel { display: grid; gap: var(--espace-2); margin-bottom: var(--espace-6); padding: var(--espace-4); border-radius: var(--rayon-m); }
  #contact .e3-mtel__num { display: inline-flex; align-items: center; min-height: 44px; font-size: 24px; line-height: 32px; font-weight: 500; color: inherit; text-decoration: none; }
  #contact .e3-mtel .ab-bouton { width: 100%; }
  #contact .e3-mmail { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
  #contact .e3-carte--tel, #contact .e3-carte--mail { display: none; }
  #contact .e3-form { padding: var(--espace-6) var(--espace-4); }
  #contact .e3-envoyer { width: 100%; }
  #contact .e3-liens { grid-template-columns: minmax(0, 1fr); }

  /* 404 / 410 : dessin sous le texte, bouton en pleine largeur, liens en une colonne de 56 px */
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-actions { flex-direction: column; align-items: stretch; width: 100%; }
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-actions .ab-bouton { width: 100%; }
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-actions .ab-bouton--lien { justify-content: flex-start; }
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens { grid-template-columns: minmax(0, 1fr); }
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-liens a { min-height: 56px; }
}

@media (max-width: 479.98px) {
  #cms .e2-prose .d2-chiffres { grid-template-columns: minmax(0, 1fr); }
  #cms .e2-tete .e2-titre { font-size: 32px; line-height: 36px; }
  #cms .e1-conseiller__btns { flex-direction: column; }
}

@media (max-width: 379.98px) {
  :is(#pagenotfound, #product, #category, #manufacturer, #supplier, #cms) .e4-txt .titre-affiche { font-size: 38px; line-height: 40px; }
  #cms .i1-tete .titre-affiche { font-size: 38px; line-height: 40px; }
  #cms .e2-prose { word-spacing: .02em; }
}