/* Les polices sont servies par le site, pas par Google. Un site qui
       charge ses polices chez Google envoie l'adresse IP de chaque visiteur à
       Google avant tout consentement, ce que la page de confidentialité
       promet précisément de ne pas faire. Cinq fichiers WOFF2, 30 Ko chacun,
       dans site/fonts/, produits depuis site-gen/_fonts/ par fontTools. */
    @font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Barlow-400.woff2') format('woff2'); }
    @font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Barlow-500.woff2') format('woff2'); }
    @font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/Barlow-700.woff2') format('woff2'); }
    @font-face { font-family: 'Barlow Condensed'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/BarlowCondensed-400.woff2') format('woff2'); }
    @font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/BarlowCondensed-600.woff2') format('woff2'); }
    :root {
      --color-bg: #EDF2FB;
      --color-surface: #E2EAFC;
      --color-text: #1a1423;
      --color-divider: #C1D3FE;
      --color-accent: #ABC4FF;
      --color-accent-2: #B6CCFE;
      --color-neutral-100: #EDF2FB;   --color-neutral-200: #E2EAFC;
      --color-neutral-300: #D7E3FC; --color-neutral-400: #CCDBFD;
      --color-neutral-500: #C1D3FE;  --color-neutral-600: #B6CCFE;
      --color-neutral-700: #1a1423;  --color-neutral-800: #1a1423;  --color-neutral-900: #1a1423;
      --color-accent-100: #EDF2FB;    --color-accent-200: #E2EAFC;
      --color-accent-300: #D7E3FC; --color-accent-400: #CCDBFD;
      --color-accent-500: #C1D3FE;   --color-accent-600: #B6CCFE;
      --color-accent-700: #1a1423;   --color-accent-800: #1a1423;   --color-accent-900: #1a1423;
      --color-accent-2-100: #EDF2FB;  --color-accent-2-200: #E2EAFC;
      --color-accent-2-300: #D7E3FC; --color-accent-2-400: #CCDBFD;
      --color-accent-2-500: #C1D3FE; --color-accent-2-600: #B6CCFE;
      --color-accent-2-700: #1a1423; --color-accent-2-800: #1a1423; --color-accent-2-900: #1a1423;
      --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: 0;
      --hb-surface: #D7E3FC;
      --hb-pastille: #E2EAFC;
      --hb-emphase: #ABC4FF;
      --hb-gap: clamp(12px, 1.6vw, 20px);
      --hb-doux: color-mix(in srgb, #1a1423 74%, transparent);
    }

    html { scroll-behavior: smooth; overflow-x: clip; }
    /* La barre est collée en haut : une ancre atteinte par un lien (#pour-qui,
       #questions) doit s'arrêter sous elle, pas derrière. */
    [id] { scroll-margin-top: 78px; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    body { margin: 0; background: var(--color-bg); color: var(--color-text); }
    /* Le site tient à toute largeur. Deux règles y veillent :
       1. overflow-wrap: anywhere sur tout : un mot trop long pour sa boîte
          (une adresse email, un composé allemand) se coupe au lieu de
          déborder ou d'élargir la page. La règle n'agit que s'il n'existe
          aucun autre endroit où couper ; une phrase normale n'y touche pas.
       2. hyphens: auto sur les titres et les tuiles : là où les colonnes
          sont étroites, le navigateur coupe avec un trait d'union selon la
          langue déclarée sur <html>, au lieu d'un mot cassé n'importe où. */
    body { overflow-wrap: anywhere; }
    /* La barre ne se coupe jamais : ses trois éléments tiennent sur une
       ligne à 320px, et overflow-wrap ne doit pas leur permettre de se
       replier pour « aider » la boîte flexible. */
    .nav-brand, .nav > a, .nav-liens > a { white-space: nowrap; }
    h1, h2, h3, .hb-titre, .hb-h3, .hb-ref .nom, .hb-frise .nom, .hb-prix .valeur, .hb-horaire .valeur, .hb-bento .seul,
    .hb-bandes .nom, .hb-faces .tete, .hb-schema .terme, .hb-carte .hb-h3 { hyphens: auto; }
    * { border-radius: 0 !important; }
    a { color: var(--color-text); text-underline-offset: 3px; }
    a:hover { text-decoration-thickness: 2px; }
    a[href^="tel:"] { white-space: nowrap; }
    summary { list-style: none; cursor: pointer; }
    summary::-webkit-details-marker { display: none; }
    details[open] svg.chev { transform: rotate(180deg); }
    img { display: block; max-width: 100%; }
    .conteneur { max-width: 1760px; margin: 0 auto; padding: 0 clamp(45px, 4vw, 72px); }
    .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--color-bg); color: var(--color-text); padding: 12px 20px; border: 2px solid var(--color-text); text-decoration: none; font-weight: 600; }
    .skip-link:focus { left: 12px; top: 12px; }
    .nav-liens { display: contents; }
    .nav-burger { display: none; }
    .nav a:hover, .nav a[aria-current='page'] { color: var(--color-text); text-decoration: underline; }
    /* Les liens de la barre portent text-decoration: none en ligne : sans
       !important, ni le survol ni la page courante n'étaient soulignés
       (constaté le 27.09 en ajoutant l'étude, l'IA et le manifeste). */
    .nav-liens > a:hover, .nav-liens > a[aria-current='page'] { text-decoration: underline !important; text-underline-offset: 6px; }
    .nav a.btn-primary, .nav a.btn-primary:hover { color: var(--color-bg); text-decoration: none; }

    .btn { border-radius: 0; border: 1px solid transparent; font-weight: 600; letter-spacing: 0.01em; transition: background .18s, color .18s, border-color .18s; }
    .btn-primary { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
    .btn-primary:hover, .btn-primary:active { background: color-mix(in srgb, var(--color-text) 84%, transparent); border-color: transparent; }
    .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-text); }
    .btn-secondary:hover, .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
    .btn-lg { font-size: 17px; padding: 14px 26px; }
    .input, select.input { background: var(--hb-pastille); border: 1px solid var(--color-divider); color: var(--color-text); min-height: 42px; }
    .input:focus { outline: 2px solid var(--color-text); outline-offset: -2px; border-color: transparent; }
    .input::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); }

    .hb-p { font-size: 15px; line-height: 26px; margin: 0 0 18px; color: var(--hb-doux); }
    .hb-p strong { color: var(--color-text); font-weight: 600; }
    .hb-h2 { display: block; font-family: var(--font-body); font-size: 13px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin: 0 0 12px; }
    .hb-h3, .hb-titre { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 8px; }
    .hb-kicker { display: block; font-size: 13px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
    .hb-kicker a { text-decoration: none; }
    .hb-kicker a:hover { text-decoration: underline; }
    .hb-rule { height: 1px; border: 0; background: var(--color-divider); margin: 0 0 16px; }
    .hb-section { padding: 0 0 clamp(48px, 6vw, 80px); }
    .hb-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; flex-wrap: wrap; margin: 0 0 12px; }
    .hb-entete .hb-h2 { margin-bottom: 0; }
    .hb-entete a { display: inline-block; padding: 9px 14px; background: var(--hb-pastille); text-decoration: none; font-size: 12px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; transition: background .2s; }
    .hb-entete a:hover { background: var(--hb-emphase); }

    .blueprint, .hb-carte { background: var(--hb-surface); border: 0; }
    .hb-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--hb-gap); }
    .hb-carte { padding: 24px; }
    .hb-carte .num { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; font-feature-settings: 'tnum' 1; opacity: .7; }
    .hb-carte p { margin: 0; font-size: 15px; line-height: 24px; color: var(--hb-doux); }
    .hb-liste { margin: 0; padding-left: 18px; font-size: 15px; line-height: 26px; color: var(--hb-doux); }
    .hb-liste li { margin-bottom: 4px; }
    /* LES ÉNUMÉRATIONS : CINQ FORMES, UNE PAR SECTION.
       Le dessin est commun à tout le site (les mêmes sept teintes, les mêmes
       angles droits, les mêmes polices) mais deux sections ne partagent
       jamais la même structure. Une seule règle à retenir en ajoutant une
       section : elle prend une forme que ses voisines n'ont pas.

       1. .hb-bandes    une bande par entrée, le chiffre géant, teintes alternées
       2. .hb-faces     deux panneaux face à face, deux teintes
       3. .hb-schema    un dessin technique dont les étiquettes sont le texte
       4. .hb-bento     les tuiles de l'accueil, quatre teintes
       5. .hb-tableau   dans son cadre plein, pour ce qui se lit en colonnes */

    /* 1. Les bandes. Une bande par entrée, sur toute la largeur, la teinte
       change d'une bande à l'autre et le chiffre géant passe d'un côté à
       l'autre. Aucune colonne vide possible : il n'y a qu'une colonne. */
    .hb-bandes > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 56px); padding: clamp(20px, 2.4vw, 38px) clamp(20px, 2.6vw, 44px); }
    .hb-bandes > div:nth-child(odd) { background: #E2EAFC; }
    .hb-bandes > div:nth-child(even) { background: #CCDBFD; grid-template-columns: auto minmax(0, 1fr); }
    .hb-bandes > div:nth-child(even) .chiffre { order: -1; }
    .hb-bandes .chiffre { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(54px, 8vw, 116px); line-height: 0.8; letter-spacing: -0.01em; color: color-mix(in srgb, #1a1423 34%, transparent); font-feature-settings: 'tnum' 1; }
    .hb-bandes .mot { max-width: 40em; }
    .hb-bandes .nom { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(21px, 2.3vw, 30px); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 8px; }
    .hb-bandes p { margin: 0; font-size: 15px; line-height: 25px; color: var(--hb-doux); }

    /* 2. Le schéma. Un dessin technique : le domaine en haut, trois branches
       de langue, le lien hreflang, le plan du site en socle. Les exigences
       ne sont pas une liste posée à côté du dessin, elles sont les étiquettes
       du dessin, numérotées du haut vers le bas. */
    .hb-schema { border: 1px solid var(--color-text); background: var(--color-bg); }
    .hb-schema .rang { padding: clamp(18px, 2vw, 30px) clamp(18px, 2.2vw, 34px); border-top: 1px solid var(--color-text); }
    .hb-schema .rang:first-child { border-top: 0; }
    .hb-schema .tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; }
    .hb-schema .num { font-size: 12px; letter-spacing: 0.1em; font-weight: 600; opacity: .55; font-feature-settings: 'tnum' 1; }
    .hb-schema .terme { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
    .hb-schema .adr { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(24px, 2.8vw, 38px); line-height: 1; letter-spacing: 0.01em; margin: 0 0 16px; }
    .hb-schema p { margin: 0; font-size: 15px; line-height: 24px; color: var(--hb-doux); max-width: 40em; }
    .hb-schema .tuyaux { position: relative; height: 30px; border-top: 1px solid var(--color-text); }
    .hb-schema .tuyaux.bas { border-top: 0; border-bottom: 1px solid var(--color-text); }
    .hb-schema .tuyaux i { position: absolute; top: 0; width: 1px; height: 100%; background: var(--color-text); }
    .hb-schema .tuyaux i:nth-child(1) { left: 16.667%; }
    .hb-schema .tuyaux i:nth-child(2) { left: 50%; }
    .hb-schema .tuyaux i:nth-child(3) { left: 83.333%; }
    .hb-schema .branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-text); }
    .hb-schema .branche { padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 6px; background: #E2EAFC; }
    .hb-schema .branche:nth-child(2) { background: #D7E3FC; }
    .hb-schema .branche:nth-child(3) { background: #CCDBFD; }
    .hb-schema .lg { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 3vw, 40px); line-height: 1; }
    .hb-schema code { font-size: 14px; line-height: 20px; letter-spacing: 0.02em; }
    .hb-schema .socle { background: var(--hb-emphase); }

    /* 3. Les deux faces. Ce qui est gardé à gauche, ce qui est refait à
       droite, deux panneaux pleins de teintes différentes. Le contenu est
       une comparaison : la forme la dit avant qu'on ait lu. */
    .hb-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hb-gap); }
    .hb-faces > div { padding: clamp(20px, 2.4vw, 34px); background: #E2EAFC; }
    .hb-faces > div + div { background: #C1D3FE; }
    .hb-faces .tete { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(24px, 2.6vw, 32px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 6px; }
    .hb-faces ul { list-style: none; margin: 0; padding: 0; }
    .hb-faces li { padding: 14px 0 0; margin-top: 14px; border-top: 1px solid color-mix(in srgb, #1a1423 16%, transparent); }
    .hb-faces .terme { display: block; font-weight: 600; font-size: 15px; line-height: 22px; }
    .hb-faces p { margin: 4px 0 0; font-size: 15px; line-height: 23px; color: var(--hb-doux); }

    /* 4. Le bento, celui de l'accueil. La classe « mots » ne change qu'une
       chose : le texte est là tout de suite au lieu de s'ouvrir au survol. */
    .hb-bento.mots > div { justify-content: flex-start; min-height: 0; }
    .hb-bento.mots .num { font-size: 12px; letter-spacing: 0.1em; font-weight: 600; opacity: .55; margin-bottom: 10px; font-feature-settings: 'tnum' 1; }
    .hb-bento.mots .hb-titre { font-size: clamp(16px, 1.5vw, 19px); margin-bottom: 0; }
    .hb-bento.mots .seul { font-size: 16px; line-height: 25px; }
    .hb-bento.mots p { margin-top: 8px; }
    .hb-liens { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
    .hb-liens a { display: inline-block; padding: 9px 14px; background: var(--hb-pastille); text-decoration: none; font-size: 14px; line-height: 1.2; transition: background .2s; }
    .hb-liens a:hover, .hb-liens a[aria-current] { background: var(--hb-emphase); }

    /* L'agenda Google de la page de rendez-vous : un voile avec un bouton,
       et rien ne part chez Google avant le clic. */
    .hb-agenda .voile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 44px); background: var(--hb-pastille); }
    .hb-agenda .voile p { margin: 0; font-size: 15px; line-height: 25px; color: var(--hb-doux); max-width: 40em; }
    .hb-agenda .voile .hb-titre { margin: 0; }
    /* L'iframe porte un style= en ligne dans la page faite à la main :
       l'attribut hidden seul ne suffit pas à l'effacer, il laisserait un
       vide de six cents pixels sous le voile. */
    .hb-agenda iframe[hidden] { display: none !important; }

    /* Le bandeau de consentement, construit par consentement.js. Ses styles
       étaient écrits dans le script ; une CSP sans 'unsafe-inline' refuse les
       style= posés par innerHTML, ils sont donc ici (28.09.2026). La largeur
       s'écrit min(100%, 720px) : habiller() retire « max-width: 720px; » des
       pages de rendez-vous, et le bandeau y prenait toute la largeur. */
    #hb-consentement { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; padding: clamp(12px, 2vw, 20px); display: flex; justify-content: center; }
    #hb-consentement > .blueprint { background: var(--color-bg, #f2f2f3); padding: clamp(18px, 2.2vw, 26px); width: min(100%, 720px); box-shadow: 0 8px 32px rgba(0,0,0,.14); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; }
    #hb-consentement .texte { flex: 1 1 320px; min-width: 260px; }
    #hb-consentement .titre { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-bottom: 6px; }
    #hb-consentement p { margin: 0; font-size: 14px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 76%, transparent); }
    #hb-consentement p a { font-size: 14px; }
    #hb-consentement .boutons { display: flex; gap: 8px; flex: 0 0 auto; }
    /* Sur téléphone, le bandeau couvrait une bonne part du premier écran
       (audit du 13.10.2026) : plus de titre, moins de marge, deux boutons
       côte à côte sur toute la largeur. */
    @media (max-width: 600px) {
      #hb-consentement { padding: 8px; }
      #hb-consentement > .blueprint { padding: 14px 16px; gap: 10px; }
      #hb-consentement .titre { display: none; }
      #hb-consentement .texte { flex-basis: 100%; min-width: 0; }
      #hb-consentement p { font-size: 13px; line-height: 19px; }
      #hb-consentement .boutons { flex: 1 1 100%; }
      #hb-consentement .boutons .btn { flex: 1 1 0; }
    }

    .hb-faq details { border-top: 1px solid var(--color-divider); }
    .hb-faq details:first-child { border-top: 0; }
    .hb-faq details:last-child { border-bottom: 1px solid var(--color-divider); }
    .hb-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.2; letter-spacing: 0.02em; }
    .hb-faq summary svg { flex: none; transition: transform .2s; }
    .hb-faq p { margin: 0 0 18px; font-size: 15px; line-height: 26px; color: var(--hb-doux); }

    .hb-tableau { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
    .hb-tableau th, .hb-tableau td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
    .hb-tableau th { font-weight: 600; }
    .hb-tableau td { color: var(--hb-doux); }
    .hb-tableau td.prix { white-space: nowrap; }
    /* Le cadre d'un tableau défile horizontalement quand le tableau est
       plus large que l'écran ; les deux ombres sur les bords, qui
       n'apparaissent que s'il reste quelque chose à voir de ce côté-là, sont
       le seul indice qu'on peut faire défiler. Technique classique : deux
       dégradés attachés au contenu couvrent deux ombres attachées au cadre. */
    .hb-cadre { background: var(--hb-surface); padding: clamp(16px, 2vw, 24px); overflow-x: auto;
      background-image: linear-gradient(to right, var(--hb-surface) 40%, rgba(215, 227, 252, 0)), linear-gradient(to left, var(--hb-surface) 40%, rgba(215, 227, 252, 0)),
        radial-gradient(farthest-side at 0 50%, rgba(26, 20, 35, .22), rgba(26, 20, 35, 0)), radial-gradient(farthest-side at 100% 50%, rgba(26, 20, 35, .22), rgba(26, 20, 35, 0));
      background-position: left center, right center, left center, right center; background-repeat: no-repeat;
      background-size: 48px 100%, 48px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; }
    /* Un en-tête de ligne ne se coupe pas au milieu d'un mot : plutôt un
       trait d'union, ou la colonne qui s'élargit. */
    .hb-tableau th { overflow-wrap: normal; hyphens: auto; }

    .hb-prix { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--hb-gap); }
    .hb-prix > div { background: var(--hb-surface); padding: 28px; display: flex; flex-direction: column; }
    .hb-prix .valeur, .hb-horaire .valeur { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
    .hb-prix ul { flex: 1; margin: 18px 0 0; padding-left: 18px; font-size: 15px; line-height: 24px; color: var(--hb-doux); }
    .hb-prix li { margin-bottom: 6px; }
    .hb-prix .bas, .hb-horaire .bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
    .hb-prix .nom, .hb-horaire .nom { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
    .hb-prix .montant, .hb-horaire .montant { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 30px; line-height: 1; font-feature-settings: 'tnum' 1; white-space: nowrap; }
    .hb-prix .montant small, .hb-horaire .montant small { font-size: 13px; margin-left: 5px; font-family: var(--font-body); font-weight: 500; }
    /* Plus aucun montant publié (6.10.2026) : « Sur devis » à la place du prix. */
    .hb-prix .montant.devis, .hb-horaire .montant.devis { font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
    .hb-devis { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; margin: 8px 0 12px; }
    .hb-horaire { margin-top: var(--hb-gap); background: var(--hb-surface); padding: 28px; display: grid; grid-template-columns: 1fr auto; gap: 12px 40px; align-items: end; }
    .hb-horaire p { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--hb-doux); }
    .hb-horaire .bas { margin-top: 0; padding-top: 0; border-top: 0; flex-direction: column; align-items: flex-end; gap: 6px; }

    .hb-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--hb-gap); }
    /* Ce qu'un site doit faire en 2026 : quatre cases a cocher. */
    .hb-exigences-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(32px, 4vw, 64px); align-items: end; margin-bottom: 36px; }
    .hb-exigences-tete .hb-accent { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(24px, 2.8vw, 36px); line-height: 1.08; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
    .hb-exigences-tete .hb-p { margin: 0; }
    .hb-exigences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); border-top: 1px solid var(--color-divider); }
    .hb-exigence { padding: 24px 0 28px; border-bottom: 1px solid var(--color-divider); }
    .hb-exigence .hb-titre { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; }
    .hb-exigence .case { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--color-accent-700); stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
    .hb-exigence p { font-size: 15px; line-height: 24px; margin: 10px 0 0 32px; color: var(--hb-doux); }
    .hb-chute { font-size: 13px; line-height: 24px; margin: 24px 0 0; color: var(--hb-doux); }
    @media (min-width: 1500px) { .hb-exigences { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hb-exigence { border-bottom: 0; padding-bottom: 8px; } }
    .hb-bento > div { padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 140px; background: var(--hb-surface); }
    .hb-bento .c2 { grid-column: span 2; } .hb-bento .c3 { grid-column: span 3; } .hb-bento .c4 { grid-column: span 4; } .hb-bento .c6 { grid-column: span 6; } .hb-bento .r2 { grid-row: span 2; }
    .hb-bento .ton-1 { background: #E2EAFC; } .hb-bento .ton-2 { background: #D7E3FC; }
    .hb-bento .ton-3 { background: #CCDBFD; } .hb-bento .ton-4 { background: #C1D3FE; }
    .hb-bento .large { background: var(--hb-emphase); }
    .hb-bento .large .titre { font-size: clamp(26px, 2.6vw, 34px); }
    .hb-bento p, .hb-metier p, .hb-ref p { margin: 10px 0 0; font-size: 15px; line-height: 24px; color: var(--hb-doux); }
    .survol { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .3s ease; }
    .survol > div { overflow: hidden; }
    .hb-bento > div:hover .survol, .hb-metier:hover .survol, .hb-metier:focus-visible .survol { grid-template-rows: 1fr; opacity: 1; }
    @media (hover: none) { .survol { grid-template-rows: 1fr; opacity: 1; } }

    /* Le trait et les points doivent partir du même zéro : le trait est
       positionné sur .hb-frise, les points sur leur <li>. Toute marge
       intérieure en haut de .hb-frise décalerait les points sous le trait. */
    .hb-frise { --fg: clamp(16px, 2vw, 28px); --n: 5; position: relative; padding-top: 0; }
    .hb-frise .voie { position: absolute; left: 8px; right: calc((100% - (var(--n) - 1) * var(--fg)) / var(--n) - 8px); top: 72px; height: 4px; background: var(--color-divider); }
    .hb-frise .voie i { display: block; height: 100%; width: 0; background: var(--color-text); transition: width .12s linear; }
    .hb-frise ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 var(--fg); }
    .hb-frise li { position: relative; padding-top: 96px; }
    .hb-frise .num { position: absolute; top: 0; left: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(34px, 3.6vw, 46px); line-height: 1; letter-spacing: 0.02em; font-feature-settings: 'tnum' 1; opacity: .35; transition: opacity .3s ease; }
    .hb-frise .point { position: absolute; top: 66px; left: 0; width: 16px; height: 16px; background: var(--color-bg); box-shadow: inset 0 0 0 3px var(--color-text); transition: background .3s ease; }
    .hb-frise .nom { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(15px, 1.6vw, 20px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; opacity: .45; transition: opacity .3s ease; }
    .hb-frise p { margin: 10px 0 0; font-size: 15px; line-height: 24px; color: var(--hb-doux); opacity: .45; transition: opacity .3s ease; }
    .hb-frise .fait .num, .hb-frise .fait .nom { opacity: 1; }
    .hb-frise .fait .point { background: var(--color-text); }
    .hb-frise .fait p { opacity: 1; }

    .hb-metiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hb-gap); }
    .hb-metier { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 24px; background: var(--hb-surface); color: var(--color-text); text-decoration: none; transition: background .25s ease; }
    .hb-metier:hover, .hb-metier:focus-visible { background: var(--hb-emphase); }
    .hb-metier .fleche { position: absolute; top: 20px; right: 22px; font-size: 18px; line-height: 1; transition: transform .25s ease; }
    .hb-metier:hover .fleche { transform: translateX(4px); }

    /* Trois cartes par ligne sur six colonnes ; la dernière ligne se partage
       la largeur (28.09, cinq références) : 3 + 2 à cinq, 2 + 2 à quatre,
       jamais une carte seule. L'auto-fit d'avant donnait 4 + 1 à 1440 px.
       Sous 1101 px, une colonne (règle plus bas) : rien ne s'étend. */
    .hb-refs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hb-gap); }
    @media (min-width: 1101px) {
      .hb-refs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .hb-ref { grid-column: span 2; }
      .hb-ref:nth-child(3n+1):nth-last-child(2), .hb-ref:nth-child(3n+1):nth-last-child(2) ~ .hb-ref,
      .hb-ref:nth-child(3n+1):nth-last-child(4), .hb-ref:nth-child(3n+1):nth-last-child(4) ~ .hb-ref { grid-column: span 3; }
      .hb-ref:only-child { grid-column: 1 / -1; }
    }
    .hb-ref { display: block; padding: 24px; background: var(--hb-surface); text-decoration: none; color: var(--color-text); transition: background .25s ease; }
    .hb-ref:hover, .hb-ref:focus-visible { background: var(--hb-emphase); }
    .hb-ref .nom { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
    .hb-ref .cadre { display: block; margin: 16px 0 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg); }
    .hb-ref .cadre img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
    /* Sous les cartes, les liens vers les études de cas (6.10.2026). */
    .hb-refs + .hb-liens { margin-top: var(--hb-gap); }
    /* L'étude de cas : la capture du site livré, sous le texte du projet. */
    .hb-cas-image { margin: 28px 0 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hb-surface); }
    .hb-cas-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
    /* Les captures d'une étude de cas (7.10.2026) : la première sur toute la
       largeur, les autres deux par deux ; une colonne sous 721 px. */
    .hb-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hb-gap); }
    .hb-galerie figure { margin: 0; }
    .hb-galerie figure:first-child { grid-column: 1 / -1; }
    .hb-galerie .cadre { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hb-surface); }
    .hb-galerie img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
    .hb-galerie figcaption { margin-top: 10px; font-size: 14px; line-height: 22px; color: var(--hb-doux); max-width: 46em; }
    @media (max-width: 720px) { .hb-galerie { grid-template-columns: minmax(0, 1fr); } }
    .hb-ref .cadre.vide { display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; }

    .hb-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .hb-form .field span { display: block; margin-bottom: 6px; font-size: 14px; }
    .hb-form .input { width: 100%; box-sizing: border-box; }

    .hb-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 22px; }
    .hb-pleine { width: 100vw; margin-inline: calc(50% - 50vw); }
    .hb-cloture { background: var(--hb-emphase); padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 72px); text-align: center; }
    .hb-cloture h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; }
    .hb-cloture p { font-size: 15px; line-height: 24px; margin: 16px auto 0; }
    .hb-cloture .hb-cta { justify-content: center; margin-top: 28px; }

    .hb-pied { border-top: 1px solid var(--color-divider); padding: 40px 0 16px; font-size: 13px; line-height: 22px; color: var(--hb-doux); }
    .hb-pied-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 32px; margin-bottom: 32px; }
    .hb-pied h2 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; font-family: var(--font-body); color: var(--color-text); margin: 0 0 10px; }
    .hb-pied ul { list-style: none; margin: 0; padding: 0; }
    .hb-pied li { margin: 0 0 4px; }
    .hb-pied a { font-size: 13px; text-decoration: none; }
    .hb-pied a:hover { text-decoration: underline; }
    .hb-pied-bas { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--color-divider); }
    .hb-pied-bas span:first-child { margin-right: auto; }

    .hb-h1-grand { font-size: clamp(44px, 9vw, 132px) !important; line-height: 0.92 !important; }
    .hb-texte-libre .hb-bandes .mot { max-width: none; }
    .hb-exergue { margin: 8px 0 30px; padding: 4px 0 4px clamp(18px, 2vw, 28px); border-left: 6px solid #1a1423;
      font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: uppercase;
      font-size: clamp(26px, 3.6vw, 50px); line-height: 1.02; letter-spacing: 0.01em; }
    .hb-lettre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--hb-gap);
      background: #E2EAFC; padding: clamp(24px, 3.4vw, 56px); }
    .hb-lettre .qui, .hb-lettre .signe { font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: uppercase; letter-spacing: 0.02em; }
    .hb-lettre .qui { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.02; }
    .hb-lettre small { display: block; margin-top: 8px; font-family: var(--font-body); font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.08em; }
    .hb-lettre p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; margin: 0 0 18px; }
    .hb-lettre .signe { font-size: 22px; line-height: 1.1; margin: 26px 0 0; }
    .hb-capture { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end;
      max-width: 920px; margin: 32px auto 0; text-align: left; }
    .hb-capture .field span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
    .hb-capture .input { width: 100%; box-sizing: border-box; background: #EDF2FB; }
    .hb-capture .btn { white-space: nowrap; }
    .hb-capture .cf-turnstile { grid-column: 1 / -1; }
    .hb-cloture .note { font-size: 13px; line-height: 20px; margin-top: 14px; }
    .hb-chiffre-geant { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: clamp(72px, 12vw, 176px); line-height: 0.85; letter-spacing: -0.01em; margin: 0 0 18px; font-feature-settings: 'tnum' 1; }
    .hb-maison { margin: 0 0 clamp(28px, 3vw, 44px); background: #E2EAFC; padding: clamp(12px, 2vw, 28px); }
    .hb-maison svg { display: block; width: 100%; height: auto; }
    .hb-maison .m-fil { stroke: #1a1423; stroke-width: 1; }
    .hb-maison .m-point { fill: #1a1423; }
    .hb-maison .m-nom { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; fill: #1a1423; }
    .hb-maison .m-sous { font-family: var(--font-body); font-size: 15px; fill: #1a1423; }
    .hb-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--hb-gap); }
    .hb-pieces > div { padding: 20px 0 22px; border-top: 1px solid color-mix(in srgb, #1a1423 16%, transparent); }
    .hb-pieces .nom { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(21px, 2vw, 26px); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; }
    .hb-pieces .quoi { display: block; margin: 6px 0 8px; font-size: 13px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
    .hb-pieces p { margin: 0; font-size: 15px; line-height: 25px; color: var(--hb-doux); }
    @media (max-width: 860px) {
      .hb-lettre { grid-template-columns: minmax(0, 1fr); }
      .hb-capture { grid-template-columns: minmax(0, 1fr); }
      .hb-capture .btn { width: 100%; justify-content: center; }
      .hb-pieces { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 720px) {
      .hb-maison .m-etiquettes { display: none; }
    }

    .hb-metriques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--hb-gap); }
    .hb-metriques > div { border-top: 2px solid #1a1423; padding: 18px 0 0; }
    .hb-metriques .valeur { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: clamp(40px, 5vw, 76px); line-height: 0.9; letter-spacing: 0; white-space: nowrap; }
    .hb-metriques p { margin: 12px 0 0; font-size: 15px; line-height: 23px; color: var(--hb-doux); max-width: 22em; hyphens: auto; }
    .hb-defs dd, .hb-mesures .nom, .hb-pop-table th, .hb-tableau.regions th { hyphens: auto; }

    .piste { display: block; height: 14px; background: #D7E3FC; position: relative; }
    .piste i { display: block; height: 100%; background: #1a1423; }
    .val { font-weight: 600; font-feature-settings: 'tnum' 1; white-space: nowrap; }

    .hb-pop { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: calc(var(--hb-gap) * 2); align-items: start; }
    .hb-pop-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
    .hb-pop-table th, .hb-pop-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--color-divider); text-align: left; vertical-align: middle; }
    .hb-pop-table thead th { font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
    .hb-pop-table thead th + th, .hb-pop-table td { text-align: right; font-feature-settings: 'tnum' 1; }
    .hb-pop-table thead th:nth-child(2) { text-align: left; }
    .hb-pop-table tbody th { font-weight: 500; }
    .hb-pop-table td { color: var(--hb-doux); white-space: nowrap; }
    .hb-pop-table td.barre { width: 46%; color: var(--color-text); }
    .hb-pop-table td.barre, .hb-mesures li { --piste: 1; }
    .hb-pop-table td.barre { display: table-cell; }
    .hb-pop-table td.barre .piste { display: inline-block; vertical-align: middle; width: calc(100% - 4.2em); }
    .hb-pop-table td.barre .val { display: inline-block; width: 3.8em; text-align: right; }
    .hb-pop-table tr.total th, .hb-pop-table tr.total td { font-weight: 600; color: var(--color-text); border-bottom: 2px solid #1a1423; }
    .hb-pop-table tr.groupe th { padding-top: 26px; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; opacity: .7; }
    .hb-defs { margin: 0; background: #E2EAFC; padding: clamp(18px, 2vw, 28px); }
    .hb-defs > div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, #1a1423 16%, transparent); }
    .hb-defs dt { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
    .hb-defs dd { margin: 6px 0 0; font-size: 15px; line-height: 23px; color: var(--hb-doux); }
    .hb-apres { margin-top: 26px; }
    .hb-note { font-size: 13px; line-height: 20px; color: var(--hb-doux); margin: 18px 0 0; }

    .hb-mesures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--hb-gap) * 2); }
    .hb-mesures .hb-titre { margin-bottom: 4px; }
    .hb-mesures ul { list-style: none; margin: 0; padding: 0; }
    .hb-mesures li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom val" "piste piste";
      gap: 8px 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
    .hb-mesures .nom { grid-area: nom; font-size: 15px; line-height: 21px; }
    .hb-mesures .val { grid-area: val; font-size: 15px; }
    .hb-mesures .piste { grid-area: piste; }

    .hb-bento.chiffres .hb-titre { font-size: clamp(48px, 6vw, 88px); line-height: 0.9; letter-spacing: 0; margin-bottom: 14px; white-space: nowrap; }
    .hb-bento.chiffres p { font-size: 15px; line-height: 24px; }

    .hb-tableau.regions th, .hb-tableau.regions td { vertical-align: baseline; }
    .hb-tableau.regions thead th + th, .hb-tableau.regions td { text-align: right; font-feature-settings: 'tnum' 1; white-space: nowrap; padding-left: 16px; }
    .hb-tableau.regions th:last-child, .hb-tableau.regions td:last-child { font-weight: 600; color: var(--color-text); padding-right: 0; }
    .hb-tableau.regions tbody th { font-weight: 500; }

    @media (max-width: 1100px) {
      .hb-pop { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 860px) {
      .hb-metriques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--hb-gap); }
      .hb-mesures { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 720px) {
      /* Le tableau à barres sur un téléphone : le nom, la barre sur toute la
         largeur, puis les deux autres parts côte à côte, chacune avec son
         intitulé devant. Rien ne défile. */
      .hb-pop-table thead { display: none; }
      .hb-pop-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
      .hb-pop-table th, .hb-pop-table td { display: block; padding: 0; border: 0; text-align: left !important; }
      .hb-pop-table tbody th, .hb-pop-table td.barre { grid-column: 1 / -1; }
      .hb-pop-table td.barre { width: auto; }
      .hb-pop-table td::before, .hb-tableau.regions td::before { content: attr(data-col); display: block; font-size: 11px; line-height: 14px; letter-spacing: 0.08em;
        text-transform: uppercase; font-weight: 600; color: var(--color-text); opacity: .6; margin-bottom: 3px; }
      .hb-pop-table tr.total { border-bottom: 2px solid #1a1423; }
      .hb-pop-table tr.total th, .hb-pop-table tr.total td { border: 0; }
      .hb-pop-table tr.groupe { padding: 24px 0 6px; }
      .hb-tableau.regions tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
      .hb-tableau.regions th { grid-column: 1 / -1; }
      .hb-tableau.regions td { margin: 0; padding: 0 !important; text-align: left !important; white-space: normal; }
      .hb-tableau.regions td::before { font-size: 10px; letter-spacing: 0.04em; overflow-wrap: normal; }
    }
    @media (max-width: 440px) {
      /* Quatre colonnes ne tiennent plus : « Deutschschweiz » se coupait en deux. */
      .hb-tableau.regions tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    .hb-label-badge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; background: #E2EAFC; padding: clamp(18px, 2.4vw, 32px); }
    .hb-label-badge img { display: block; width: auto; height: 60px; max-width: 100%; }
    .hb-label-code { margin: 0; padding: 14px 16px; background: #EDF2FB; border: 1px solid #C1D3FE; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
    .hb-label-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px; }
    .hb-label-canton { background: #E2EAFC; padding: 16px 18px; }
    .hb-label-canton h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
    .hb-label-canton ul { margin: 0; padding: 0; list-style: none; }
    .hb-label-canton li { padding: 3px 0; }
    @media (max-width: 720px) { .hb-label-badge { grid-template-columns: 1fr; } }

    .hb-h1-accueil { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(34px, 6.2vw, 92px); line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 0 -0.04em; }
    .hb-chapeau { font-size: 17px; line-height: 27px; margin: 28px 0 0; color: var(--color-text); }
    /* Le téléphone et l'adresse sous le chapeau de l'accueil, visibles dans
       le premier écran d'un téléphone (audit du 13.10.2026). */
    .hb-contact-tete { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; font-size: 15px; line-height: 24px; }
    .hb-contact-tete a { overflow-wrap: anywhere; }

    .hb-diag { position: relative; margin-top: clamp(28px, 3.4vw, 48px); background: #D7E3FC; padding: clamp(20px, 3vw, 44px); }
    .hb-diag [hidden] { display: none !important; }
    .hb-diag-tete { display: flex; align-items: center; gap: 16px; }
    .hb-diag-etape { flex: none; font-size: 13px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; font-feature-settings: 'tnum' 1; }
    .hb-diag-progres { flex: 1; height: 4px; background: #C1D3FE; }
    .hb-diag-progres i { display: block; height: 100%; width: 0; background: #1a1423; }
    .hb-diag fieldset { border: 0; margin: 0; padding: 0; min-width: 0; outline: none; }
    .hb-diag fieldset + fieldset { margin-top: 32px; }
    .hb-diag-js fieldset + fieldset { margin-top: 0; }
    .hb-diag-question { display: block; float: none; width: 100%; padding: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; margin: 16px 0 20px; hyphens: auto; }
    .hb-diag-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hb-gap); }
    .hb-diag-choix label { position: relative; display: flex; align-items: center; min-height: 64px; box-sizing: border-box; padding: 16px 20px; background: #EDF2FB; border: 1px solid #C1D3FE; cursor: pointer; font-size: 16px; line-height: 22px; transition: background .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .hb-diag-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
    .hb-diag-choix label:has(input:focus-visible) { outline: 2px solid #1a1423; outline-offset: 2px; }
    .hb-diag-choix label.choisi, .hb-diag-choix label:has(input:checked) { background: #ABC4FF; border-color: #1a1423; }
    .hb-diag-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
    .hb-diag-nav [data-diag="suite"] { margin-left: auto; min-width: 9em; }
    .hb-diag .btn { min-height: 44px; }
    .hb-diag .btn:disabled { opacity: .4; cursor: not-allowed; }
    .hb-diag-duree, .hb-diag-note { font-size: 13px; line-height: 20px; color: var(--hb-doux); margin: 18px 0 0; }

    .hb-diag-triage .hb-diag-question { margin-top: 0; }
    .hb-diag-aide { font-size: 15px; line-height: 24px; color: var(--hb-doux); margin: -8px 0 20px; }
    .hb-diag-poles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hb-gap); }
    .hb-diag-pole { display: flex; flex-direction: column; gap: 8px; min-height: 140px; box-sizing: border-box; padding: 20px; background: #EDF2FB; border: 1px solid #C1D3FE; text-decoration: none; transition: background .16s ease, border-color .16s ease; touch-action: manipulation; }
    .hb-diag-pole .nom { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; hyphens: auto; }
    .hb-diag-pole .ligne { font-size: 14px; line-height: 21px; color: var(--hb-doux); }
    .hb-diag-pole:focus-visible { outline: 2px solid #1a1423; outline-offset: 2px; }
    .hb-diag-phrase { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 24px; }
    .hb-diag-phrase .field span { display: block; margin-bottom: 6px; font-size: 14px; }
    .hb-diag-phrase .input { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; padding: 0 14px; }
    .hb-diag-phrase .btn { min-height: 48px; }
    .hb-diag-phrase .hb-diag-note, .hb-diag-msg { grid-column: 1 / -1; margin: 0; }
    .hb-diag-msg { font-size: 15px; line-height: 24px; font-weight: 600; }

    .hb-diag-res { scroll-margin-top: 90px; display: grid; gap: clamp(22px, 2.6vw, 34px); }
    .hb-diag-niveau .hb-h2 { margin-bottom: 10px; }
    .hb-diag-niveau .nom { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(36px, 5.2vw, 68px); line-height: .95; letter-spacing: 0.01em; text-transform: uppercase; outline: none; }
    .hb-diag-niveau .score { display: block; margin-top: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; font-feature-settings: 'tnum' 1; }
    .hb-diag-niveau .jauge { display: block; height: 8px; background: #C1D3FE; margin: 12px 0 16px; }
    .hb-diag-niveau .jauge i { display: block; height: 100%; width: 0; background: #1a1423; }
    .hb-diag-niveau p { margin: 0; font-size: 16px; line-height: 26px; }
    .hb-diag-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hb-gap); }
    .hb-diag-chiffres > div { display: flex; flex-direction: column; gap: 2px; padding: clamp(18px, 2.2vw, 30px); }
    .hb-diag-chiffres .auj { background: #EDF2FB; }
    .hb-diag-chiffres .apres { background: #ABC4FF; }
    .hb-diag-chiffres .hb-h2 { margin: 0 0 10px; line-height: 16px; }
    .hb-diag-chiffres .montant { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(30px, 3.8vw, 54px); line-height: 1; font-feature-settings: 'tnum' 1; }
    .hb-diag-chiffres .sous { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-top: 6px; }
    .hb-diag-chiffres .heures { font-size: 15px; line-height: 23px; margin-top: 12px; }
    .hb-diag-chiffres .ans { font-size: 15px; line-height: 23px; font-weight: 600; margin-top: 4px; }
    .hb-diag-barres { display: grid; gap: 10px; }
    .hb-diag-barres > div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr) minmax(0, 8em); gap: 14px; align-items: center; font-size: 14px; line-height: 20px; }
    .hb-diag-barres b { display: block; height: 14px; background: #EDF2FB; }
    .hb-diag-barres i { display: block; height: 100%; width: 0; background: #1a1423; }
    .hb-diag-barres > div + div i { background: color-mix(in srgb, #1a1423 45%, transparent); }
    .hb-diag-barres em { font-style: normal; font-weight: 600; font-feature-settings: 'tnum' 1; white-space: nowrap; text-align: right; }
    .hb-diag-extra { margin: 0; font-size: 16px; line-height: 26px; font-weight: 600; }
    .hb-diag-viser { background: #EDF2FB; padding: clamp(18px, 2.2vw, 30px); }
    .hb-diag-viser .hb-h2 { margin-bottom: 12px; }
    .hb-diag-viser p { margin: 0 0 10px; font-size: 16px; line-height: 26px; }
    .hb-diag-viser .reco { margin: 16px 0 0; font-weight: 600; }
    .hb-diag-taux { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; align-items: end; }
    .hb-diag-taux label span { display: block; font-size: 14px; margin-bottom: 6px; }
    .hb-diag-taux .input { width: 7em; box-sizing: border-box; min-height: 44px; font-size: 16px; padding: 0 12px; font-feature-settings: 'tnum' 1; }
    .hb-diag-taux p { margin: 0; font-size: 13px; line-height: 20px; color: var(--hb-doux); }
    .hb-diag-calcul summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font-weight: 600; font-size: 15px; border-top: 1px solid #C1D3FE; border-bottom: 1px solid #C1D3FE; }
    .hb-diag-calcul[open] summary { border-bottom: 0; }
    .hb-diag-calcul ol { margin: 4px 0 12px; padding-left: 20px; font-size: 14px; line-height: 23px; color: var(--hb-doux); }
    .hb-diag-calcul li { margin-bottom: 6px; }
    .hb-diag-calcul p { font-size: 13px; line-height: 20px; margin: 0 0 14px; color: var(--hb-doux); }
    .hb-diag-envoi { position: relative; margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(20px, 2.4vw, 32px); border-top: 2px solid #1a1423; }
    .hb-diag-envoi .hb-titre { font-size: clamp(20px, 2vw, 26px); margin-bottom: 10px; }
    .hb-diag-envoi .input { min-height: 44px; font-size: 16px; padding: 0 12px; }
    .hb-diag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
    .hb-diag-lien { background: none; border: 0; padding: 12px 0; font: inherit; font-size: 14px; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

    @media (hover: hover) and (pointer: fine) {
      .hb-diag-choix label:hover, .hb-diag-pole:hover { background: #E2EAFC; border-color: #1a1423; }
      .hb-diag-choix label.choisi:hover { background: #ABC4FF; }
      .hb-index a:hover { background: #E2EAFC; }
      .hb-index a:hover .fleche { transform: translateX(4px); }
      .hb-quadrants a:hover { background: #ABC4FF; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .hb-diag-choix label, .hb-diag-pole { transition: background .16s ease, border-color .16s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1); }
      .hb-diag-choix label:active, .hb-diag-pole:active { transform: scale(0.98); }
      .hb-diag-progres i, .hb-diag-niveau .jauge i, .hb-diag-barres i { transition: width .45s cubic-bezier(0.23, 1, 0.32, 1); }
      .hb-index .fleche { transition: transform .16s cubic-bezier(0.23, 1, 0.32, 1); }
    }

    /* La liste des services d'un pôle : une ligne, toute la ligne est un lien. */
    .hb-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid #1a1423; }
    .hb-index li { border-bottom: 1px solid #C1D3FE; }
    .hb-index a { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; gap: 6px clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(16px, 1.8vw, 24px) 12px; text-decoration: none; transition: background .2s ease; }
    .hb-index li > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; gap: 6px clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(16px, 1.8vw, 24px) 12px; }
    .hb-index li > div::after { content: ''; width: 20px; }
    .hb-index .nom { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; hyphens: auto; }
    .hb-index .ligne { font-size: 15px; line-height: 24px; color: var(--hb-doux); }
    .hb-index .fleche { display: inline-block; font-size: 20px; line-height: 1; }

    /* Aujourd'hui, et après : la situation, puis deux cases face à face. */
    .hb-bascule { display: grid; gap: 2px; }
    .hb-bascule .tete, .hb-bascule .ligne { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr); gap: 2px; }
    .hb-bascule .tete span { font-size: 12px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 0 0 10px 20px; }
    .hb-bascule .tete span:first-child { padding-left: 0; }
    .hb-bascule .sit { display: flex; align-items: center; padding: 18px 20px 18px 0; border-top: 1px solid #1a1423; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; hyphens: auto; }
    .hb-bascule .auj, .hb-bascule .apres { padding: 18px 20px; font-size: 15px; line-height: 23px; }
    .hb-bascule .auj { background: #E2EAFC; color: var(--hb-doux); }
    .hb-bascule .apres { background: #ABC4FF; font-weight: 600; }
    .hb-bascule small { display: none; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; color: var(--color-text); }

    /* Les quatre pôles de l'accueil : quatre panneaux, quatre teintes. */
    .hb-quadrants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hb-gap); }
    .hb-quadrants a { display: flex; flex-direction: column; padding: clamp(22px, 2.8vw, 44px); text-decoration: none; transition: background .2s ease; }
    .hb-quadrants .q1 { background: #E2EAFC; }
    .hb-quadrants .q2 { background: #D7E3FC; }
    .hb-quadrants .q3 { background: #CCDBFD; }
    .hb-quadrants .q4 { background: #C1D3FE; }
    .hb-quadrants .nom { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 3vw, 42px); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; hyphens: auto; }
    .hb-quadrants p { margin: 14px 0 0; font-size: 16px; line-height: 25px; }
    .hb-quadrants ul { flex: 1; margin: 16px 0 0; padding-left: 18px; font-size: 15px; line-height: 24px; color: var(--hb-doux); }
    .hb-quadrants .voir { margin-top: 22px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }

    @media (max-width: 1100px) { .hb-diag-poles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 720px) {
      .hb-diag { margin-inline: -20px; padding: 24px 20px; }
      .hb-diag-choix { grid-template-columns: minmax(0, 1fr); }
      .hb-diag-choix label { min-height: 56px; }
      .hb-diag-chiffres, .hb-diag-phrase, .hb-diag-taux, .hb-quadrants { grid-template-columns: minmax(0, 1fr); }
      .hb-diag-barres > div { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
      .hb-diag-barres b { grid-column: 1 / -1; grid-row: 2; }
      .hb-diag-actions .btn { width: 100%; }
      .hb-index a, .hb-index li > div { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 0; }
      .hb-index .ligne { grid-column: 1; }
      .hb-index .fleche { grid-row: 1; grid-column: 2; }
      .hb-bascule .tete { display: none; }
      .hb-bascule .ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hb-bascule .sit { grid-column: 1 / -1; padding: 16px 0 10px; }
      .hb-bascule small { display: block; }
    }
    @media (max-width: 440px) {
      .hb-diag-poles { grid-template-columns: minmax(0, 1fr); }
      .hb-diag-pole { min-height: 0; }
      .hb-bascule .ligne { grid-template-columns: minmax(0, 1fr); }
    }

    @media (max-width: 1100px) {
      .hb-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hb-refs { grid-template-columns: minmax(0, 1fr); }
      .hb-metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 860px) {
      .hb-frise .voie { display: none; }
      .hb-frise ol { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
      .hb-frise li { padding: 20px 0 20px 76px; border-top: 1px solid var(--color-divider); }
      .hb-frise .num { top: 20px; }
      .hb-frise .point { display: none; }
      .hb-frise .num, .hb-frise .nom, .hb-frise p { opacity: 1; }
    }
    @media (max-width: 720px) {
      .nav { gap: 10px !important; padding-inline: 20px !important; }
      /* Cibles tactiles : 44px de haut pour tout ce qui se touche, 40px dans
         la barre pour ne pas la faire grossir. Les liens dans une phrase
         restent des liens dans une phrase. */
      .btn { min-height: 44px; }
      .nav .btn { min-height: 40px; }
      .nav-brand { padding-block: 9px; }
      .hb-entete a, .hb-liens a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 6px; }
      .hb-pied-colonnes a, .hb-pied-bas a, .hb-kicker a { display: inline-block; padding-block: 9px; }
      .hb-kicker a { padding-block: 14px; }
      /* 16px dans les champs : en dessous, Safari sur iPhone zoome à chaque
         saisie et ne revient pas. */
      .input, select.input, textarea.input { font-size: 16px; }
      .conteneur { padding-inline: 20px !important; }
      .hb-bento { grid-template-columns: minmax(0, 1fr); }
      .hb-exigences { grid-template-columns: minmax(0, 1fr); }
      .hb-exigences-tete { grid-template-columns: minmax(0, 1fr); }
      /* Sous 720px, le texte des tuiles est là d'office : rien à survoler sur un écran étroit. */
      .survol { grid-template-rows: 1fr; opacity: 1; }
      .hb-bento .c2, .hb-bento .c3, .hb-bento .c4, .hb-bento .c6 { grid-column: auto; }
      .hb-faces { grid-template-columns: minmax(0, 1fr); }
      .hb-bandes > div, .hb-bandes > div:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
      .hb-bandes > div .chiffre, .hb-bandes > div:nth-child(even) .chiffre { order: -1; }
      .hb-schema .branches { grid-template-columns: minmax(0, 1fr); }
      .hb-schema .tuyaux { display: none; }
      .hb-bento .r2 { grid-row: auto; }
      .hb-bento > div { min-height: 0; }
      .hb-metiers { grid-template-columns: minmax(0, 1fr); }
      .hb-metier { min-height: 0; }
      .hb-form { grid-template-columns: minmax(0, 1fr); }
      .hb-horaire { grid-template-columns: minmax(0, 1fr); }
      /* Les tableaux sur un téléphone. À deux colonnes, chaque ligne devient
         un bloc : le terme, puis sa définition. À quatre colonnes, le tableau
         garde ses colonnes et défile ; la première prend 40 % pour laisser
         voir les trois formules côte à côte. */
      /* Aucun tableau ne défile sur un téléphone : chacun se replie selon sa
         forme, et le cadre perd sa largeur minimale.
         deux     : le terme, puis sa définition.
         trois    : le terme et le prix sur une ligne s'ils y tiennent (sinon le
                    prix passe dessous), l'explication dessous.
         formules : le terme, puis les trois formules côte à côte, chacune
                    avec son nom au-dessus de la valeur.
         fiche    : le nom, puis chaque colonne avec son en-tête devant. */
      .hb-cadre .hb-tableau { min-width: 0 !important; }
      .hb-tableau thead { display: none; }
      .hb-tableau tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
      .hb-tableau tr:first-child { padding-top: 0; }
      .hb-tableau th, .hb-tableau td { display: block; padding: 0; border: 0; }
      .hb-tableau td { margin-top: 4px; }
      .hb-tableau td.prix { white-space: normal; }
      /* trois, en ligne souple (28.09) : la grille « 1fr auto » laissait un
         prix long écraser le terme jusqu'à 0 px (« Agences », « Nom de
         domaine », « Domainname » débordaient de 320 à 430 px). Le terme
         garde au moins son mot le plus long ; si le prix ne tient plus à
         côté, il passe dessous, aligné à gauche. */
      .hb-tableau.trois tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
      .hb-tableau.trois th { flex: 1 1 7em; }
      .hb-tableau.trois td.prix { flex: 0 1 auto; margin: 0; color: var(--color-text); font-weight: 600; text-align: left; }
      .hb-tableau.trois td:last-child { flex: 1 1 100%; }
      .hb-tableau.formules tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
      .hb-tableau.formules th { grid-column: 1 / -1; }
      .hb-tableau.formules td { margin: 0; }
      .hb-tableau.formules td::before, .hb-tableau.fiche td::before { content: attr(data-col); display: block; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-text); opacity: .6; margin-bottom: 2px; }
      .hb-tableau.fiche td { margin-top: 8px; }
      .hb-horaire .bas { flex-direction: row; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-divider); }
      .btn-lg { width: 100%; }
      .hb-pied-bas span:first-child { flex-basis: 100%; }
      .nav-liens {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-divider);
        padding: 4px 20px 12px;
      }
      .nav-liens[data-ouvert] { display: flex; }
      .nav-liens > a {
        display: block; width: 100%;
        padding: 11px 0; font-size: 15px !important;
        border-top: 1px solid var(--color-divider);
      }
      .nav-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 40px; height: 40px; padding: 0 10px;
        background: none; border: 1px solid var(--color-divider); cursor: pointer;
      }
      .nav-burger > span { display: block; height: 1px; background: var(--color-text); transition: transform .18s, opacity .18s; }
      .nav-burger[aria-expanded="true"] > span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
      .nav-burger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
      .nav-burger[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
    }

    @media (max-width: 860px) {
      .nav-liens {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-divider);
        padding: 4px max(clamp(45px, 4vw, 72px), calc((100% - 1760px) / 2 + clamp(45px, 4vw, 72px))) 12px;
      }
      .nav-liens[data-ouvert] { display: flex; }
      .nav-liens > a {
        display: block; width: 100%;
        padding: 11px 0; font-size: 15px !important;
        border-top: 1px solid var(--color-divider);
      }
      .nav-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 40px; height: 40px; padding: 0 10px; margin-left: auto;
        background: none; border: 1px solid var(--color-divider); cursor: pointer;
      }
      .nav-burger > span { display: block; height: 1px; background: var(--color-text); transition: transform .18s, opacity .18s; }
      .nav-burger[aria-expanded="true"] > span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
      .nav-burger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
      .nav-burger[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
    }
    @media (max-width: 720px) { .nav-liens { padding-inline: 20px; } }