/* ============================================================
   website/base.css — le site public, refonte du 25/09/2026
   Une seule feuille pour tout le site : la grammaire de l'accueil (héros
   plein écran, titre à gauche, une chose vivante à droite), le menu pleine
   largeur, le pied signé de la légende du cachet, le bouton « Commencer »
   et ses deux choix, les carrousels, les registres qui s'écrivent. Les
   feuilles de page d'avant ont été retirées : une page n'apporte plus sa
   propre grammaire.
   Les maquettes de référence : mockups/site-v2-2026-09-24/.
   ============================================================ */

:root {
    --noir: #1a1a1a;
    --t2: #5a5a5e;
    --t3: #6e6e73;
    --t4: #767679;
    --doux: #f5f5f7;
    --doux-survol: #ebebef;
    --filet: rgba(0, 0, 0, .08);
    --vert: #00a86b;
    --vert-encre: #007a52;
    --vert-vif: #00d48a;
    /* Le bouton porte le VERT DE MARQUE avec du blanc, décision du fondateur
       (14/09 puis 27/09/2026, « pour tous les boutons ») : 3,08 pour 1 assumé,
       et pas d'assombrissement pour gagner du contraste. Le vert foncé ne sert
       qu'au survol et à l'appui. La page tarifs portait quatre verts, dont deux
       boutons d'inscription voisins peints différemment. */
    --vert-bouton: var(--vert);
    --vert-bouton-survol: #008857;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --barre: 68px;
    /* La gouttière de TOUTES les colonnes de page. Elle valait 28 px pour `.w`
       à toute largeur, 22 px pour la barre sous 1 020 px et 22 px pour le héros
       et les sections de tarifs sous 820 px : trois régimes, donc des axes qui
       divergeaient de 6 px d'un bloc à l'autre selon la largeur de l'écran.
       Une seule valeur, un seul endroit où la changer. */
    --gouttiere: 28px;
    /* La MESURE : la longueur de ligne au-delà de laquelle l'œil perd le
       retour à la ligne. Le site en comptait NEUF — 900, 836, 780, 720, 680,
       640, 620, 600, 520 — et aucune n'était écrite nulle part : deux blocs
       voisins s'arrêtaient à 60 px l'un de l'autre sans raison.

       Il y en a deux. `--mesure` est celle du texte courant : 640 px portent
       75 signes en corps 17. `--mesure-l` est la mesure large, pour les trois
       cas où la ligne s'allonge sans fatiguer — les grands caractères (la
       citation en corps 24 tient 65 signes dans 780), la lecture installée
       (un article de blog, qu'on ne survole pas), et les listes de lignes
       courtes (une FAQ, dont la question tient son « + » à bout de bras).

       Et une mesure se porte par le BLOC qui a du texte, jamais par la
       section : `.ww` plafonnait tout à 780 sans regarder quoi, relevés de
       vente et appels à l'action compris, et ces blocs-là s'arrêtaient
       284 px avant le bord de la page. */
    --mesure: 640px;
    --mesure-l: 780px;
    interpolate-size: allow-keywords;
}
@media (max-width: 1020px) { :root { --gouttiere: 22px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--noir);
    background: #fff;
    overflow-x: hidden;
    font-feature-settings: 'cv11', 'ss01';
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
/* L'italique est bannie : `em` et `i` restent droits. */
em, i { font-style: normal; }

/* ── Colonnes ── */
.w { max-width: 1120px; margin: 0 auto; padding: 0 var(--gouttiere); }

/* ── Titres ── */
h1 { font-size: 64px; line-height: 1.02; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
h2 { font-size: 44px; line-height: 1.06; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
h3 { font-size: 19px; letter-spacing: -.02em; font-weight: 650; line-height: 1.3; }
.sub { font-size: 19px; line-height: 1.55; color: var(--t2); margin-top: 20px; max-width: var(--mesure); text-wrap: pretty; }
.p { font-size: 15.5px; line-height: 1.6; color: var(--t2); margin-top: 8px; }
.p strong, .p b { color: var(--noir); font-weight: 600; }
.meta { font-size: 13px; color: var(--t4); margin-top: 14px; }
.etiquette { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); margin-bottom: 14px; }
.lien {
    color: var(--t2);
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, .25);
    text-underline-offset: 4px;
    transition: text-decoration-color .2s ease, color .2s ease;
}
.lien:hover { color: var(--noir); text-decoration-color: currentColor; }
/* Un lien POSÉ DANS UNE PHRASE : il garde la taille et l'encre du texte qui le
   porte, et ne se signale que par son soulignement. `.lien` est écrit pour un
   renvoi posé seul (14 px, gris) ; appliqué à deux mots au milieu d'un
   paragraphe de 17 px, il les rapetissait. */
.lien-texte {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0, 122, 82, .45);
    text-underline-offset: 4px;
    transition: text-decoration-color .2s ease;
}
.lien-texte:hover { text-decoration-color: var(--vert-encre); }
/* `.renvoi` est EN LIGNE : il finit une phrase aussi souvent qu'il tient seul.
   Il portait `display:inline-block; margin-top:34px`, écrits pour l'usage en
   bloc de l'accueil. Mesuré le 22/10/2026 sur /features/ : la marge d'un
   inline-block grandit la ligne qui le contient, et le paragraphe de la
   conformité faisait 118 px pour trois lignes de 28,9 — un trou de 34 px au
   milieu d'une phrase, sur /features/ comme sur /about/. L'usage en bloc
   demande maintenant `.renvoi-bloc`. */
.renvoi {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--vert-encre);
    text-decoration: underline;
    text-decoration-color: rgba(0, 122, 82, .35);
    text-underline-offset: 4px;
    transition: text-decoration-color .2s ease;
}
.renvoi:hover { text-decoration-color: var(--vert-encre); }
.renvoi-bloc { display: inline-block; margin-top: 34px; }

/* ── Sections ── */
.sec { padding: 72px 0; }
.sec-serre { padding-top: 24px; }
.sec-sans-bas { padding-bottom: 24px; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 52px; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 52px; }
.quatre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 52px; }
.numero { font-weight: 700; font-size: 15px; color: var(--vert-encre); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
/* Les items d'une grille sont des H3 sous le H2 de leur section. Quand la
   section n'a pas de titre — la page expert-comptable n'en a pas — ils sont
   les premiers titres après le H1 et deviennent des H2 : la taille d'un item
   ne doit pas devenir celle d'un titre de section pour autant. */
.trois h2, .deux h2, .quatre h2,
.trois h3, .deux h3, .quatre h3 { font-size: 19px; letter-spacing: -.02em; font-weight: 650; line-height: 1.3; text-wrap: wrap; }

/* Le périmètre de l'accueil : une ligne par geste, le verbe à gauche et ce
   qu'il recouvre en une phrase à droite. Pas de filet entre les lignes : elles
   sont de même nature, l'espace suffit à les séparer. */
.perimetre { margin-top: 44px; }
.perimetre > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 14px 0; }
.perimetre dt { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.perimetre dd { font-size: 17px; line-height: 1.55; color: var(--t2); max-width: var(--mesure); }

/* ════════════════════════════════════════════════════════════
   Le bouton : un seul, vert, texte blanc
   ════════════════════════════════════════════════════════════ */
.b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--vert-bouton);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: background .15s ease;
}
.b:hover { background: var(--vert-bouton-survol); }
.b-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.ctas { display: flex; gap: 18px; align-items: center; margin-top: 34px; flex-wrap: wrap; }

/* « Commencer » ouvre deux choix : l'essai, ou l'abonnement tout de suite.
   Deux boutons côte à côte se disputaient l'œil. */
.choix { position: relative; display: inline-block; }
/* Le chevron dit que le bouton s'ouvre : il a un travail. */
.choix > .b::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    margin-left: 11px;
    transition: transform .2s ease;
}
.choix > .b[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.choix-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 40;
    min-width: min(300px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 16px;
    padding: 6px;
    text-align: left;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 18px 44px rgba(0, 0, 0, .14);
    animation: choix .18s ease;
}
.choix-menu[hidden] { display: none; }
/* Le chevron ne se dessine que si le menu peut s'ouvrir : sans JavaScript,
   « Commencer » est un lien direct vers l'essai, et un chevron y promettrait
   un dépliement qui n'arrivera pas. */
html:not(.js-enabled) .choix > .b::after { display: none; }
.choix-droite .choix-menu { left: auto; right: 0; }
.choix-menu a { display: block; padding: 12px 14px; border-radius: 11px; color: var(--noir); }
.choix-menu a:hover, .choix-menu a:focus-visible { background: var(--doux); outline: none; }
.choix-menu b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.choix-menu span { display: block; font-size: 13px; color: var(--t4); margin-top: 2px; }
@keyframes choix { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════
   Le menu : pleine largeur, un filet seulement quand la page passe dessous
   ════════════════════════════════════════════════════════════ */
.barre {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
    view-transition-name: menu;
}
.barre.passe { box-shadow: 0 1px 0 var(--filet); }
.barre.cachee { transform: translateY(-100%); }
.barre-in { max-width: 1120px; margin: 0 auto; height: var(--barre); padding: 0 var(--gouttiere); display: flex; align-items: center; gap: 40px; }
.marque { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 650; font-size: 19px; letter-spacing: -.02em; }
.marque .marque-sceau { width: 30px; height: 30px; color: var(--vert); }
.marque .marque-sceau svg { width: 100%; height: 100%; }
.liens { display: flex; gap: 30px; height: 100%; list-style: none; }
.liens li { display: flex; }
.liens a { display: flex; align-items: center; font-size: 14.5px; font-weight: 500; color: var(--t3); position: relative; transition: color .15s ease; }
.liens a:hover { color: var(--noir); }
/* La page courante : l'encre, et un trait au ras de la barre. Ce trait-là a un travail. */
/* La page courante ne se souligne pas : les autres reculent (27/10/2026). */
.liens a[aria-current] { color: var(--noir); font-weight: 700; }
.liens .liens-mobile { display: none; }
.actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.discret { font-size: 14.5px; color: var(--t2); transition: color .15s ease; }
.discret:hover { color: var(--noir); }
.menu-b { display: none; font: inherit; font-size: 14.5px; font-weight: 600; background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--noir); }

/* ════════════════════════════════════════════════════════════
   Le pied : la légende du cachet
   ════════════════════════════════════════════════════════════ */
.pied { background: var(--noir); color: #b9b9be; margin-top: 48px; padding: 64px 0 36px; }
.pied-g { display: grid; grid-template-columns: 1.3fr .9fr .9fr 1.1fr 1.6fr; gap: 36px; }
.pied-marque { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 650; font-size: 18px; }
.pied-marque .marque-sceau { width: 40px; height: 40px; color: #fff; }
.pied-marque .marque-sceau svg { width: 100%; height: 100%; }
.pied-legende { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; color: #fff; margin-top: 22px; }
.pied-dit { font-size: 13.5px; line-height: 1.6; margin-top: 12px; max-width: 300px; }
/* Titres des colonnes du pied. C'étaient des H4 posés sous le dernier H2 du
   contenu : deux niveaux sautés, sur toutes les pages du site. */
.pied-titre { color: #fff; font-size: 13px; margin: 6px 0 14px; font-weight: 600; line-height: 1.6; letter-spacing: normal; text-wrap: wrap; }
.pied ul { list-style: none; }
.pied ul a { display: block; font-size: 13.5px; margin-bottom: 10px; transition: color .15s ease; }
.pied ul a:hover { color: #fff; }
.pied-bas { margin-top: 48px; font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pied-mots { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* ════════════════════════════════════════════════════════════
   Le héros plein écran : l'écran moins le menu, rempli
   ════════════════════════════════════════════════════════════ */
.heros { min-height: calc(100svh - var(--barre)); display: flex; flex-direction: column; }
.heros-corps {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(20px, 5vh, 56px) var(--gouttiere);
}
.heros-texte { min-width: 0; }
.heros-visuel { min-width: 0; }
/* La taille suit la plus longue ligne du titre (--n caractères) : un titre de
   trois mots et un titre de trois lignes ne prennent pas la même taille. */
.heros .t {
    font-size: clamp(36px, min(8.8vh, calc(min(100vw, 1120px) * 1.22 / var(--n, 20))), 94px);
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 700;
    text-wrap: balance;
}
/* La plus longue ligne du titre, posée par le gabarit (une classe, pas un
   style en ligne) : .n16 pour « Deux formules. », .n24 pour « La facture
   électronique, ». */
.n10 { --n: 10; } .n16 { --n: 16; } .n18 { --n: 18; } .n20 { --n: 20; } .n22 { --n: 22; }
.n24 { --n: 24; } .n26 { --n: 26; } .n28 { --n: 28; } .n30 { --n: 30; }
.heros .sub { margin: clamp(14px, 2.8vh, 28px) 0 0; max-width: 520px; font-size: clamp(17px, 2.4vh, 20px); }
.heros .ctas { margin-top: clamp(22px, 4.4vh, 40px); }
.heros-compact { min-height: 0; }
.heros-compact .heros-corps { padding-top: clamp(40px, 9vh, 96px); padding-bottom: 24px; }
.heros-sceau { justify-self: center; width: min(54vh, 34vw, 500px); aspect-ratio: 1; color: var(--vert); }
.heros-sceau svg { width: 100%; height: 100%; }
/* L'anneau tourne, le M reste droit : un tour en 80 s, on le remarque à peine. */
.heros-sceau .bague { transform-origin: 120px 120px; animation: tourne 80s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.legende-visuel { font-size: 13.5px; color: var(--t4); margin-bottom: 14px; }

/* ── Le carrousel : il avance quand la barre active est pleine ── */
.car-fenetre { overflow: hidden; width: 100%; }
.car-piste { position: relative; display: flex; transition: transform .85s cubic-bezier(.65, 0, .35, 1); }
.diapo { flex: 0 0 100%; display: flex; flex-direction: column; justify-content: center; }
.points { display: flex; gap: 6px; margin-top: clamp(22px, 4vh, 40px); }
.points button { width: 46px; padding: 11px 0; border: 0; background: none; cursor: pointer; }
.points button i { display: block; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .12); overflow: hidden; }
.points button i b { display: block; height: 100%; width: 0; background: var(--noir); }
.points button.passe i b { width: 100%; }
.points button.on i b { animation: remplit var(--delai, 6s) linear forwards; }
.car-pause .points button.on i b { animation-play-state: paused; }
@keyframes remplit { from { width: 0; } to { width: 100%; } }

/* ── Le fil du jour : ce que Mary a fait, qui défile vers la droite ── */
.fil { padding: 16px 0; }
.fil-in { display: flex; gap: 22px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 0 var(--gouttiere); }
.fil-lib { flex: none; font-size: 13.5px; font-weight: 600; }
.fil-fen {
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.fil-piste { display: flex; width: max-content; animation: fil 70s linear infinite; }
.fil-piste ul { display: flex; gap: 44px; padding-right: 44px; list-style: none; }
.fil-piste li { font-size: 13.5px; color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@keyframes fil { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.fil:hover .fil-piste { animation-play-state: paused; }

/* ── La journée qui défile : trois moments à la fois ── */
.journee { margin-top: 52px; }
.journee .moment-c { flex: 0 0 calc((100% - 80px) / 3); margin-right: 40px; }
.moment { font-size: 14px; font-weight: 600; color: var(--vert-encre); margin-bottom: 8px; font-variant-numeric: tabular-nums; }

/* ── Le relevé qui s'écrit, et le tampon ── */
/* Le cachet déborde du relevé par la droite. C'était gratuit tant que le
   relevé s'arrêtait à 780 px dans une colonne de 1 064 : il tombait dans le
   vide qui restait. Le relevé tient maintenant toute la colonne, ce vide
   n'existe plus, et sans cette réserve le cachet sortait de la page entre
   900 et 1 236 px de fenêtre — où `overflow-x: hidden` le coupait en deux.
   La réserve et le débord sont la même quantité, écrite une fois. */
.registre { margin-top: 40px; --cachet: 58px; padding-right: var(--cachet); }
.registre-qui { font-size: 14px; color: var(--t4); margin-bottom: 6px; }
.registre-l { position: relative; display: grid; grid-template-columns: 76px 1fr auto; gap: 22px; align-items: baseline; padding: 18px 0; }
.registre time { font-size: 14px; color: var(--t4); font-variant-numeric: tabular-nums; }
.registre b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.registre-l > div > span { display: block; font-size: 14.5px; color: var(--t2); margin-top: 3px; }
.registre-m { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.registre-m small { font-size: 13px; font-weight: 500; color: var(--t4); letter-spacing: 0; margin-left: 5px; }
.registre-m.recu { color: var(--vert-encre); }
/* Il se pose dans la réserve : les trois montants restent alignés. */
.tampon { position: absolute; right: calc(var(--cachet) * -1); top: 50%; margin-top: -21px; width: 42px; height: 42px; color: var(--vert); transform: rotate(-14deg); }
.tampon svg { width: 100%; height: 100%; }
.registre.a-ecrire .registre-l { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.registre.a-ecrire .registre-l.ecrit { opacity: 1; transform: none; }
.registre.a-ecrire .tampon { opacity: 0; transform: rotate(-14deg) scale(1.9); }
.registre.tamponne .tampon { opacity: 1; transform: rotate(-14deg) scale(1); transition: opacity .18s ease, transform .32s cubic-bezier(.3, 1.5, .5, 1); }

/* ── Le bloc noir du tarif, centré comme une affiche ── */
/* Son bord était à 20 px (10 au téléphone) quand le texte de la page était
   à 22 : un écart de 2 px qui se lit comme une erreur, pas comme un parti
   pris. Le bord du bloc tombe sur la gouttière. */
/* ALIGNÉ À GAUCHE comme tout le reste depuis le 22/10/2026. Ce bloc était le
   seul centré de l'accueil : sur un écran large, le titre, le prix et le
   bouton revenaient à 400 px quand les six autres sections tenaient leur axe
   à 188 px, et l'œil redescendait la page en zigzag. */
.sombre { background: var(--noir); color: #fff; border-radius: 28px; margin: 0 var(--gouttiere); padding: 96px 0; }
.sombre .sub { color: #b9b9be; }
.sombre .lien { color: #b9b9be; text-decoration-color: rgba(255, 255, 255, .3); }
.sombre .lien:hover { color: #fff; }
.sombre .choix-menu { animation: none; }
.prix { font-size: 108px; font-weight: 700; letter-spacing: -.06em; line-height: 1; margin-top: 30px; font-variant-numeric: tabular-nums; }
.prix small { font-size: 22px; font-weight: 500; color: #9a9aa0; letter-spacing: 0; margin-left: 6px; }

/* ── Questions ── */
/* Une FAQ est une LISTE DE LIGNES, et sa question tient le « + » à bout
   de bras : `justify-content: space-between`. Sur toute la colonne, le
   signe se retrouvait à 800 px de la question qu'il ouvre. */
.faq { margin-top: 36px; max-width: var(--mesure-l); }
.faq details { padding: 0; }
/* La question entière est la cible : 18 px au-dessus et au-dessous, pas seulement le texte. */
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 16.5px; font-weight: 550; text-wrap: pretty; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--t4); font-size: 22px; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { font-size: 15px; line-height: 1.6; color: var(--t2); margin-top: -6px; padding-bottom: 18px; max-width: var(--mesure); }
.faq p a { text-decoration: underline; text-underline-offset: 3px; }
/* Les dépliants s'ouvrent au lieu de sauter. */
@supports (interpolate-size: allow-keywords) {
    details::details-content { height: 0; overflow: clip; transition: height .38s cubic-bezier(.4, 0, .2, 1), content-visibility .38s allow-discrete; }
    details[open]::details-content { height: auto; }
}

/* ── Chapitres : le titre à gauche, le récit à droite ── */
.chapitres { margin-top: 24px; }
.chap { display: grid; grid-template-columns: 300px 1fr; gap: 28px 64px; padding: 44px 0; scroll-margin-top: 90px; }
.chap h3 { font-size: 28px; line-height: 1.12; letter-spacing: -.03em; font-weight: 700; }
.chap h3 span { display: block; color: var(--t3); font-weight: 600; }
.recit { font-size: 17px; line-height: 1.7; color: var(--t2); max-width: var(--mesure); }
.recit strong { color: var(--noir); font-weight: 600; }
.recit-sous-titre { margin-top: 20px; }
/* Deux récits de suite dans un même chapitre : sans cette respiration, le
   second se colle au premier et les deux se lisent comme un seul bloc. */
.recit + .recit { margin-top: 20px; }
/* ── Les domaines : un titre, des lignes simples ── */
/* Les douze domaines. Chaque case portait un chapô de deux ou trois lignes
   (`.domaines p`) qui redisait ses propres puces ; retiré le 22/10/2026, avec
   lui est parti le décalage des listes d'une même rangée — elles démarraient
   à des hauteurs différentes selon la longueur du chapô. */
.domaines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 44px; margin-top: 52px; }
.domaines h3 { font-size: 18px; margin-bottom: 12px; }
.domaines ul { list-style: none; font-size: 14.5px; line-height: 1.5; }
.domaines li { padding: 3px 0; }
.meta-metiers { margin-top: 38px; }

/* ── Registres vivants (expert-comptable, conformité) ── */
.vivant { font-size: 14px; font-variant-numeric: tabular-nums; }
.viv-tete, .vivant li { display: grid; gap: 14px; align-items: baseline; }
.journal .viv-tete, .journal li { grid-template-columns: 40px 58px minmax(0, 1fr) 70px 70px; }
.chaine .viv-tete, .chaine li { grid-template-columns: 44px 48px 70px 1fr 1fr; }
.viv-tete { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); padding-bottom: 10px; }
.journal .viv-tete span:nth-child(n+4), .journal li span:nth-child(n+4) { text-align: right; }
.viv-corps { list-style: none; }
.vivant li { padding: 10px 0; white-space: nowrap; }
.vivant li span { overflow: hidden; text-overflow: ellipsis; }
.vivant li span:nth-child(-n+2) { color: var(--t4); }
.vivant li.entre { animation: entre-l .55s cubic-bezier(.2, .8, .2, 1); }
.vivant li.sort { animation: sort-l .45s ease forwards; }
@keyframes entre-l { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sort-l { to { opacity: 0; margin-top: -41px; } }
.chaine code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--t2); transition: color .4s ease; }
/* Le lien d'un ticket au précédent, montré une seconde : l'annotation verte. */
.chaine li.entre code.p, .chaine li.lie code.e { color: var(--vert-encre); font-weight: 600; }

/* ── L'ordre du jour qui se déroule (démo) ── */
.demo-agenda { list-style: none; }
/* Sans script (ou sans mouvement), l'ordre du jour se lit entier, à l'encre ;
   quand il se déroule, seul le point en cours l'est. */
.demo-agenda li { display: grid; grid-template-columns: 62px 1fr; gap: 4px 16px; padding: 16px 0; transition: color .4s ease; }
.demo-agenda.deroule li { color: var(--t4); }
.demo-agenda-time { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-agenda-txt strong { display: block; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.demo-agenda-txt > span { font-size: 14.5px; }
.demo-agenda li > i { grid-column: 2; display: block; height: 2px; background: rgba(0, 0, 0, .08); margin-top: 10px; overflow: hidden; }
.demo-agenda li > i b { display: block; height: 100%; width: 0; background: var(--noir); }
.demo-agenda.deroule li.on { color: var(--noir); }
.demo-agenda-txt > span { display: block; color: var(--t2); }
.demo-agenda.deroule li:not(.on) .demo-agenda-txt > span { color: var(--t4); }
.demo-agenda li.on > i b { animation: remplit calc(var(--part) * .5s) linear forwards; }
.demo-agenda li.fait > i b { width: 100%; }
/* La durée de chaque point, à proportion de son temps réel (5 ou 15 min). */
.part5 { --part: 5; } .part15 { --part: 15; }

/* ── L'heure qu'il est à Pointe-à-Pitre (contact) ── */
.ici-heure { font-size: clamp(34px, 6vh, 54px); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ici-etat { font-size: 16px; color: var(--t2); margin-top: 6px; }
.ici dl { margin-top: 34px; font-size: 15px; }
.ici dt { font-size: 13.5px; color: var(--t4); margin-top: 16px; }
.ici dd { margin-top: 3px; font-weight: 600; }
.ici dd a { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .2); text-underline-offset: 3px; }

/* ── Le sommaire qui s'allume (fonctionnalités) ── */
.sommaire { display: flex; flex-direction: column; }
.sommaire a { display: flex; align-items: baseline; gap: 16px; font-size: clamp(24px, 4.4vh, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.25; color: var(--t4); transition: color .45s ease; }
.sommaire a span { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--vert-encre); width: 22px; font-variant-numeric: tabular-nums; }
.sommaire a.on, .sommaire a:hover { color: var(--noir); }

/* ── Qui répond de quoi (à propos) ── */
.qui-quoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 36px; margin-top: 30px; }
.qui-quoi dt { font-size: 13.5px; color: var(--t4); margin-bottom: 6px; }
.qui-quoi dd { font-size: 15px; line-height: 1.55; }
.qui-quoi a { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: 3px; }
.citation { font-size: 24px; line-height: 1.5; letter-spacing: -.01em; max-width: var(--mesure-l); }
.signature { margin-top: 26px; font-size: 14px; }
.signature span { color: var(--t4); }

/* ── Un bloc discret (les intégrations Google sur Fonctionnalités) ── */
.discret-bloc { font-size: 14px; line-height: 1.6; color: var(--t4); max-width: var(--mesure); }
.discret-bloc h2, .discret-bloc h3 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--t2); margin-bottom: 8px; }
.discret-bloc dt { display: inline; font-weight: 600; color: var(--t2); }
.discret-bloc dt::after { content: " : "; }
.discret-bloc dd { display: inline; }
.discret-bloc dd::after { content: ""; display: block; margin-bottom: 6px; }
.discret-bloc a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Témoignages ── */
.voix { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-top: 44px; }
.voix blockquote { font-size: 18px; line-height: 1.55; letter-spacing: -.01em; }
.voix-qui { margin-top: 14px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.voix-qui span { color: var(--t4); }

/* ── Formulaire de contact ── */
/* Pas une mesure de lecture : la largeur que demandent deux champs côte
   à côte. Elle ne suit donc pas `--mesure`. */
.formulaire { max-width: 720px; margin-top: 26px; }
.formulaire .rang { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: block; margin-bottom: 16px; }
.champ label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 7px; }
.champ input, .champ textarea {
    width: 100%;
    font: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--doux);
    color: var(--noir);
    transition: background .15s ease, box-shadow .15s ease;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ textarea:focus { background: #fff; outline: none; box-shadow: 0 0 0 2px var(--vert); }
.champ-erreur { display: block; font-size: 13px; color: #b42318; margin-top: 6px; }
.alerte { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 14.5px; background: var(--doux); }
.alerte.is-error { color: #b42318; }
.alerte.is-success { color: var(--vert-encre); }
.formulaire .legal-mention { font-size: 13px; color: var(--t4); margin: 4px 0 18px; }
.formulaire .legal-mention a { text-decoration: underline; text-underline-offset: 2px; }

/* ════════════════════════════════════════════════════════════
   Tarifs : le minimum par défaut, la comparaison se déplie
   ════════════════════════════════════════════════════════════ */
/* Un haut de page sans rien à droite : une seule colonne, sinon le titre
   se serre dans 1,5fr et laisse un vide à sa droite. */
.heros-tarifs { grid-template-columns: 1fr; }
/* Au-dessus des cartes, à l'aplomb de leur bord droit au large ; au
   téléphone, sur la gouttière comme tout le reste. */
.pricing-toggle-rang { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.pricing-toggle { display: inline-flex; background: var(--doux); border-radius: 10px; padding: 3px; font-size: 14px; }
.pricing-toggle-btn { font: inherit; border: 0; background: none; cursor: pointer; min-height: 44px; padding: 8px 18px; border-radius: 8px; color: var(--t2); }
.pricing-toggle-btn.active { background: #fff; color: var(--noir); font-weight: 600; }
.pricing-toggle-save { color: var(--vert-encre); font-weight: 700; margin-left: 6px; }
.pricing-plans { padding-bottom: 24px; }
.pricing-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pricing-plan { border-radius: 24px; padding: 36px; background: var(--doux); }
.pricing-plan-featured { background: var(--noir); color: #fff; }
/* Le nom de la formule est un H2 : sous le H1 de la page, c'est le premier
   niveau qui compte, et sauter de H1 à H3 laissait les deux cartes hors de la
   navigation par titres. La hauteur de ligne est posée ici parce que `h2` en
   apporte une de titre (1,06) qui n'a rien à faire sur une étiquette. */
.pricing-plan-name { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vert-encre); line-height: 1.6; }
.pricing-plan-featured .pricing-plan-name { color: var(--vert-vif); }
.pricing-plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.pricing-plan-amount { font-size: 64px; font-weight: 700; letter-spacing: -.05em; line-height: 1; transition: opacity .25s ease; }
.pricing-plan-amount.switching { opacity: 0; }
.pricing-plan-currency { font-size: 44px; font-weight: 700; letter-spacing: -.04em; }
.pricing-plan-period { font-size: 15px; color: var(--t3); margin-left: 6px; }
.pricing-plan-total { font-size: 13.5px; color: var(--t3); margin-top: 4px; }
.pricing-plan-tagline { font-size: 15px; color: var(--t2); margin: 10px 0 24px; }
.pricing-plan-featured .pricing-plan-period, .pricing-plan-featured .pricing-plan-total,
.pricing-plan-featured .pricing-plan-tagline, .pricing-plan-featured .pricing-plan-note,
.pricing-plan-featured .pricing-plan-include { color: #b9b9be; }
.pricing-plan .choix { display: block; }
.pricing-plan .choix > .b { width: 100%; }
.pricing-plan .choix-menu { right: 0; }
.pricing-plan-include { font-size: 14.5px; margin-top: 26px; }
.pricing-plan-features { list-style: none; margin-top: 26px; font-size: 14.5px; line-height: 1.5; }
.pricing-plan-include + .pricing-plan-features { margin-top: 10px; }
.pricing-plan-features li { padding: 5px 0; }
/* --t4 sur le gris de la carte ne tient que 4,16:1, sous le seuil AA de 4,5
   que le même gris passe de justesse sur blanc. --t3 remonte à 4,66. */
.pricing-plan-note { font-size: 13px; color: var(--t3); margin-top: 18px; line-height: 1.55; }

.comparer { margin-top: 28px; }
.comparer > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 52px;
    border-radius: 14px;
    background: var(--doux);
    font-size: 15px;
    font-weight: 600;
    transition: background .15s ease;
}
.comparer > summary:hover { background: #ebebef; }
.comparer > summary::-webkit-details-marker { display: none; }
.comparer > summary::after { content: "+"; font-weight: 400; font-size: 20px; color: var(--t4); }
.comparer[open] > summary::after { content: "\2212"; }
.comparer[open] .comparer-ouvrir, .comparer:not([open]) .comparer-fermer { display: none; }
.tab { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
/* L'en-tête se colle SOUS la barre — mais la barre s'efface quand on
   descend (`.cachee`), et l'en-tête restait alors 68 px plus bas, des lignes
   défilant dans la bande laissée au-dessus de lui. */
.tab thead th { position: sticky; top: var(--barre); background: #fff; z-index: 2; text-align: left; font-size: 13px; font-weight: 600; color: var(--t4); padding: 14px 18px 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .14); transition: top .32s cubic-bezier(.4, 0, .2, 1); }
.barre.cachee ~ main .tab thead th { top: 0; }
.tab thead th b { display: block; font-size: 17px; color: var(--noir); letter-spacing: -.01em; }
.tab td:first-child, .tab thead th:first-child { width: 46%; }
.tab tbody th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); padding: 30px 0 8px; }
.tab td { padding: 11px 18px 11px 0; vertical-align: top; border-bottom: 1px solid var(--filet); }
.tab td.non { color: var(--t4); }
.tab td small { display: block; color: var(--t4); font-size: 13px; margin-top: 2px; }

/* Le tableau ne garde que ce qui sépare les deux formules : 21 rangées
   « Inclus / Inclus » sur 29 ne comparaient rien. Le socle commun se lit en
   quatre lignes, sous le tableau. */
.comparer-commun { margin-top: 38px; }
.comparer-commun h3 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.comparer-commun dl { margin-top: 16px; display: grid; grid-template-columns: 150px 1fr; gap: 12px 24px; }
.comparer-commun dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); padding-top: 3px; }
.comparer-commun dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--t2); }

.pricing-section { max-width: 1120px; margin: 0 auto; padding: 72px var(--gouttiere); }
.pricing-faq .faq { max-width: var(--mesure-l); }
.pricing-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); margin-bottom: 14px; }
.pricing-section-title { font-size: 44px; line-height: 1.06; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.pricing-section-lead { font-size: 17px; line-height: 1.65; color: var(--t2); margin-top: 18px; max-width: var(--mesure); }
.pricing-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.pricing-promise-key { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.pricing-promise-desc { font-size: 15.5px; line-height: 1.6; color: var(--t2); margin-top: 8px; }

.pricing-deduct { max-width: 1120px; margin: 0 auto; padding: 72px var(--gouttiere); }
.pricing-deduct-lead { max-width: var(--mesure); }
.pricing-deduct-math { display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px 28px; margin-top: 36px; }
.pricing-deduct-amount { font-size: 40px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pricing-deduct-label { font-size: 13.5px; color: var(--t4); }
/* « soit » est collé au montant qu'il introduit. Posés à plat dans le flex,
   les cinq éléments se coupaient où ça tombait : au téléphone, la ligne
   finissait par un « soit » orphelin et le montant partait seul au-dessous.
   Il se pose sur la ligne de base du montant, pas sur celle de sa légende. */
.pricing-deduct-maillon { display: flex; align-items: baseline; gap: 18px 28px; }
.pricing-deduct-lien { font-size: 14px; color: var(--t4); }
.pricing-deduct-result .pricing-deduct-amount { color: var(--vert-encre); }
.pricing-deduct-caveat { font-size: 14px; line-height: 1.65; color: var(--t4); margin-top: 28px; max-width: var(--mesure); }

/* ════════════════════════════════════════════════════════════
   Réservation de la démo (agenda/booking_mary.html, 28/09/2026)
   Le titre à gauche, le calendrier à droite. Le choix, le formulaire
   et la confirmation sont le balisage commun agenda/_reservation_choix.html :
   leurs classes (.day, .slot, .chip, .cta…) ne sont lues qu'ici, sous .resa.
   Aucun trait : jours, heures, puces et champs se posent sur un aplat, le
   survol le fonce, et le blanc sépare les étapes (règle anti IA cheap du
   20/09). Le seul contour est l'anneau de la saisie en cours.
   ════════════════════════════════════════════════════════════ */
.resa-g {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 64px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(40px, 8vh, 88px) var(--gouttiere) 24px;
}
/* Le titre reste sous les yeux pendant qu'on choisit, en dessous de la barre. */
.resa-cote { position: sticky; top: calc(var(--barre) + 24px); }
.resa-t { font-size: clamp(40px, 5.4vw, 64px); line-height: 1; letter-spacing: -.05em; }
.resa .sub { max-width: 440px; }
.resa-faits { margin-top: 30px; }
.resa-faits > div { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 6px 0; font-size: 14.5px; }
.resa-faits dt { color: var(--t4); }
.resa-faits dd { color: var(--noir); }
.resa-ecart { display: block; color: var(--vert-encre); font-weight: 600; margin-top: 2px; }
.resa-ecart[hidden] { display: none; }
.resa .meta { margin-top: 22px; line-height: 1.7; }
.resa-annuler { margin-top: 26px; }

/* Les étapes : un blanc les sépare, aucune boîte. */
.resa .card { margin-bottom: 40px; scroll-margin-top: calc(var(--barre) + 16px); }
.resa .card[hidden] { display: none; }
.resa .seclabel { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); margin-bottom: 16px; }

/* Les jours, rangés en semaines : lundi en tête, comme un calendrier. */
.resa .days-tete, .resa .days-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.resa .days-tete { margin-bottom: 6px; }
.resa .days-tete span { font-size: 12px; color: var(--t4); text-align: center; }
.resa .day {
    position: relative;
    height: 54px;
    border: 0;
    border-radius: 12px;
    background: var(--doux);
    color: var(--noir);
    font: inherit;
    cursor: pointer;
    transition: background .15s ease;
}
.resa .day:hover:not([disabled]) { background: var(--doux-survol); }
.resa .day .dnum { display: block; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.resa .day .dmonth { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--t4); line-height: 1; }
/* Un jour sans créneau se distingue par la surface, sans s'effacer. */
.resa .day[disabled] { background: none; color: var(--t4); cursor: default; }
.resa .day[aria-pressed="true"] { background: var(--vert); color: #fff; }
.resa .day[aria-pressed="true"] .dmonth { color: #fff; }
.resa .days-suite { margin-top: 10px; }
.resa .day-suite { height: auto; padding: 8px 0; background: none; font-size: 14px; font-weight: 600; color: var(--vert-encre); text-decoration: underline; text-decoration-color: rgba(0, 122, 82, .35); text-underline-offset: 4px; }
.resa .day-suite:hover:not([disabled]) { background: none; text-decoration-color: var(--vert-encre); }

/* Les heures */
.resa .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 26px; }
.resa .slot {
    height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--doux);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--noir);
    cursor: pointer;
    transition: background .15s ease;
}
.resa .slot:hover { background: var(--doux-survol); }
.resa .slot[aria-pressed="true"] { background: var(--vert); color: #fff; }
.resa .no-slots { grid-column: 1 / -1; padding: 18px 0; color: var(--t2); font-size: 15px; }

/* Le créneau retenu, puis les coordonnées */
.resa .retenu { margin-bottom: 30px; }
.resa .summary { font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.resa .summary::first-letter { text-transform: uppercase; }
.resa .chez-vous { font-size: 14px; color: var(--t2); margin-top: 6px; }
.resa .changer { margin-top: 10px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--t2); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: 4px; cursor: pointer; }
.resa .changer:hover { color: var(--noir); text-decoration-color: currentColor; }
.resa form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.resa form .full { grid-column: 1 / -1; }
.resa form label, .resa form .label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 7px; }
.resa form input, .resa form textarea {
    width: 100%;
    font: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--doux);
    color: var(--noir);
    transition: background .15s ease, box-shadow .15s ease;
}
.resa form textarea { min-height: 110px; resize: vertical; }
.resa form input:focus, .resa form textarea:focus { background: #fff; outline: none; box-shadow: 0 0 0 2px var(--vert); }
.resa .hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.resa .hint { font-size: 13px; color: var(--t4); margin-top: 6px; }
.resa .combo { position: relative; }
.resa .sirene-dd { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; list-style: none; background: #fff; border-radius: 14px; padding: 6px; max-height: 280px; overflow-y: auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 18px 44px rgba(0, 0, 0, .14); }
.resa .sirene-dd[hidden] { display: none; }
.resa .sirene-opt { padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.resa .sirene-opt:hover, .resa .sirene-opt[aria-selected="true"] { background: var(--doux); }
.resa .sirene-opt .sn { display: block; font-size: 14.5px; font-weight: 600; }
.resa .sirene-opt .sm { display: block; font-size: 12.5px; color: var(--t4); margin-top: 1px; }
.resa .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.resa .chip { height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--doux); font: inherit; font-size: 14px; font-weight: 600; color: var(--noir); cursor: pointer; transition: background .15s ease; }
.resa .chip:hover { background: var(--doux-survol); }
.resa .chip.active { background: var(--vert); color: #fff; }
.resa .cta { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.resa .cta:disabled { background: var(--doux); color: var(--t4); cursor: default; }
.resa .rgpd { grid-column: 1 / -1; font-size: 13px; color: var(--t4); }
.resa .rgpd a { text-decoration: underline; text-underline-offset: 2px; }
.resa .err { font-size: 14.5px; font-weight: 600; color: #b42318; }
.resa .err[hidden] { display: none; }

/* La confirmation */
.resa .ok strong { display: block; font-size: 40px; line-height: 1.05; letter-spacing: -.04em; font-weight: 700; outline: none; }
.resa .ok-quand { display: block; font-size: 19px; font-weight: 650; letter-spacing: -.015em; margin-top: 18px; }
.resa #ok-message, .resa .ok-suite { display: block; font-size: 15.5px; color: var(--t2); margin-top: 6px; }
.resa .ok-liens { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; }
.resa .ok-liens[hidden], .resa .ok-liens a[hidden] { display: none; }
.resa .ok-liens a { font-size: 14.5px; font-weight: 600; color: var(--vert-encre); text-decoration: underline; text-decoration-color: rgba(0, 122, 82, .35); text-underline-offset: 4px; }
.resa .ok-liens a:hover { text-decoration-color: var(--vert-encre); }

@media (max-width: 900px) {
    .resa-g { grid-template-columns: 1fr; gap: 36px; padding: 28px var(--gouttiere) 16px; }
    .resa-cote { position: static; }
    .resa-t { font-size: clamp(34px, 10vw, 48px); }
    .resa-faits { margin-top: 22px; }
}
@media (max-width: 560px) {
    .resa form { grid-template-columns: 1fr; }
    .resa .days-tete, .resa .days-grille { gap: 4px; }
    .resa .day { height: 48px; border-radius: 10px; }
    .resa .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .resa .cta { justify-self: stretch; }
    .resa .ok strong { font-size: 32px; }
}
/* Au téléphone, un champ sous 16 px fait zoomer Safari à la saisie. */
@media (max-width: 1020px) {
    .resa form input, .resa form textarea { font-size: 16px; }
}

/* ── D'une page à l'autre : un fondu, le menu ne bouge pas ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

/* ════════════════════════════════════════════════════════════
   Téléphone et tablette
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1020px) {
    .barre-in { gap: 16px; }
    .liens, .actions .discret { display: none; }
    .menu-b { display: block; }
    .actions { gap: 14px; }
    /* Le menu du téléphone : les pages en grand, sous la barre. */
    .liens.ouvert {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: var(--barre) 0 0;
        height: auto;
        background: #fff;
        padding: 28px 28px 36px;
        gap: 0;
        overflow-y: auto;
        animation: tiroir .28s cubic-bezier(.2, .8, .2, 1);
    }
    .liens.ouvert a { font-size: 30px; font-weight: 700; letter-spacing: -.03em; padding: 10px 0; color: var(--noir); }
    .liens.ouvert:has(a[aria-current]) li:not(.liens-mobile) a:not([aria-current]) { color: var(--t3); }
    .liens.ouvert .liens-mobile { display: flex; }
    .liens.ouvert .liens-mobile a { font-size: 17px; font-weight: 600; color: var(--t2); letter-spacing: -.01em; }
    .liens.ouvert .liens-mobile:first-of-type { margin-top: 18px; }
    .pied-g { grid-template-columns: 1fr 1fr; }
    .pied-g > :first-child, .pied-g > :last-child { grid-column: 1 / -1; }
}
/* Au doigt, les petites cibles grandissent sans que la mise en page bouge :
   les barres du carrousel (25 px de haut), les liens de texte (22 px). */
@media (pointer: coarse) {
    .points button { padding: 20px 0; }
    .lien, .lien-texte, .renvoi { padding: 11px 0; margin: -11px 0; }
    /* Le renvoi posé seul garde son air avant lui : la marge négative lui
       mangeait ses 34 px et le collait au paragraphe au-dessus. */
    .renvoi-bloc { margin: 23px 0 -11px; }
    .pied ul a { padding: 6px 0; margin-bottom: 4px; }
    /* Téléphone et e-mail de la page Contact, liens de « Qui répond de quoi »
       (À propos) : 19 px de haut, alors que ce sont les liens qu'on vient
       toucher. Un remplissage vertical sur un lien en ligne agrandit la zone
       sans bouger une ligne. */
    .ici dd a, .qui-quoi a { padding: 7px 0; }
}
@keyframes tiroir { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .heros-visuel { margin-top: 10px; }
    .journal .viv-tete, .journal li { grid-template-columns: 40px minmax(0, 1fr) 70px 70px; }
    .journal .viv-tete span:nth-child(2), .journal li span:nth-child(2) { display: none; }
    .chaine .viv-tete, .chaine li { grid-template-columns: 40px 64px 1fr 1fr; }
    .chaine .viv-tete span:nth-child(2), .chaine li span:nth-child(2) { display: none; }
    .qui-quoi { grid-template-columns: 1fr 1fr; }
    .registre { padding-right: 0; }
    .tampon { right: auto; left: -2px; top: 6px; margin-top: 0; width: 34px; height: 34px; }
    .registre-l:last-child time { padding-left: 40px; }
}
@media (max-width: 820px) {
    /* Au téléphone, seul l'accueil impose l'écran entier : ailleurs, un haut de
       page court se centrait dans 844 px et commençait au tiers de l'écran. */
    .heros:not(.heros-accueil) { min-height: 0; }
    .heros:not(.heros-accueil) .heros-corps { padding-top: 28px; padding-bottom: 40px; }
    .heros-sceau { order: -1; }
    .sommaire a { font-size: 24px; line-height: 1.35; }
    h1 { font-size: 42px; }
    h2 { font-size: 32px; }
    .sub { font-size: 17px; }
    .sec { padding: 60px 0; }
    .trois, .deux, .quatre, .domaines { grid-template-columns: 1fr; }
    .heros-corps { grid-template-columns: 1fr; gap: 18px; padding: 18px var(--gouttiere) 26px; align-content: center; }
    .heros .t { font-size: clamp(28px, calc((100vw - 44px) * 2.25 / var(--n, 20)), 60px); }
    .heros-sceau { justify-self: start; width: min(24vh, 38vw); }
    .heros .ctas { flex-direction: column; align-items: flex-start; gap: 14px; }
    .fil-lib { display: none; }
    .journee .moment-c { flex-basis: 82%; margin-right: 24px; }
    .chap { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
    .chap h3 { font-size: 24px; }
    .registre-l { grid-template-columns: 1fr auto; gap: 4px 16px; }
    .registre time { grid-column: 1 / -1; }
    .perimetre > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
    .prix { font-size: 76px; }
    .formulaire .rang { grid-template-columns: 1fr; }
    .pricing-toggle-rang { justify-content: flex-start; }
    .pricing-plans-grid, .pricing-promise-grid { grid-template-columns: 1fr; }
    .pricing-plan { padding: 28px; }
    .pricing-section-title { font-size: 32px; }
    .pricing-section, .pricing-deduct { padding: 60px var(--gouttiere); }
    /* Trois montants ne tiennent pas sur une ligne de téléphone : le troisième
       partait seul, au bord gauche. Un maillon par ligne, « soit » en tête. */
    .pricing-deduct-math { flex-direction: column; align-items: flex-start; gap: 14px; }
    .pricing-deduct-maillon { gap: 16px; }
    .tab { font-size: 13.5px; }
    .tab td:first-child, .tab thead th:first-child { width: auto; }
    .comparer-commun dl { grid-template-columns: 1fr; gap: 4px; }
    .comparer-commun dt { margin-top: 16px; }
}
@media (max-width: 560px) {
    /* Le menu de « Commencer » dans la barre : accroché sous la barre, de bord à
       bord. Ancré au bouton, il sortait de l'écran par la gauche à 360 px. */
    .barre .choix-menu { position: fixed; top: calc(var(--barre) - 4px); left: 16px; right: 16px; min-width: 0; max-width: none; }
    .qui-quoi { grid-template-columns: 1fr; }
    .pied-g { grid-template-columns: 1fr; }
}
/* Les très petits écrans — 320 px du vieil iPhone SE, 280 du Galaxy Fold replié.
   La barre y débordait de sa propre gouttière : le nom, le bouton et « Menu »
   demandaient 290 px là où il en restait 284, et « Menu » venait coller le bord
   droit pendant que le nom gardait ses 22 px à gauche (mesuré le 22/10/2026).
   Rien à retirer : l'espace entre les trois suffit à les faire tenir. */
@media (max-width: 400px) {
    .barre-in { gap: 10px; }
    .actions { gap: 10px; }
    .barre .b-sm { padding: 0 14px; }
    .marque { gap: 8px; }
}


/* ════════════════════════════════════════════════════════════
   Repris tels quels de la feuille précédente : lien d'évitement,
   newsletter du pied, modal, accessibilité. Ils marchent et sont gardés.
   ════════════════════════════════════════════════════════════ */
/* ============================================================
   Lien d'évitement
   ============================================================ */
/* Premier élément focusable du document. Hors écran tant qu'il n'a pas le
   focus : `display: none` le retirerait de l'ordre de tabulation, ce qui
   annulerait sa raison d'être. z-index au-dessus de la nav flottante (1000),
   qui est en `position: fixed` et le recouvrirait sinon. */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 1100;
    padding: 12px 20px;
    border-radius: 10px;
    /* Vert d'aplat, assombri jusqu'au seuil du petit texte. Le vert de marque
       #00a86b ne rend que 3,08:1 sous du blanc : lisible sur un grand titre,
       pas sur un libellé de bouton. Le vert de marque garde les accents, les
       icônes et les grands aplats décoratifs. */
    background: #00875a;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 16px;
}


/* Newsletter du pied (refaite le 26/09/2026). Le champ et le bouton tiennent
   sur UNE ligne, tous deux en pilule : l'ancien couple « champ arrondi à
   gauche, bouton arrondi à droite » débordait de la colonne et renvoyait le
   bouton à la ligne, ses coins ne répondant plus à rien. */
.footer-newsletter { min-width: 0; }
.footer-newsletter h4 { margin-top: 6px; }
.newsletter-desc { font-size: 13.5px; line-height: 1.55; color: #9a9aa0; margin-bottom: 14px; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; }

/* Honeypot anti-bot : hors écran, jamais `display:none` (des bots l'ignorent).
   Ni sélectionnable ni copiable : un visiteur qui copie le pied de page ne
   doit pas y ramasser « Site web (ne pas remplir) ». */
.nl-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    user-select: none;
    -webkit-user-select: none;
}

/* Prénom + nom : requis par le serveur. Le modal JS les collecte, donc on ne
   les montre QUE si JS est absent, sinon le pied de page double la saisie. */
.newsletter-names { display: flex; gap: 8px; width: 100%; }
.js-enabled .newsletter-names { display: none; }

.newsletter-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: background .15s ease, box-shadow .15s ease;
}
.newsletter-input::placeholder { color: #8a8a90; }
.newsletter-input:focus { background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 2px var(--vert); }

.newsletter-btn {
    flex: none;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--vert-bouton);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.newsletter-btn:hover { background: var(--vert-bouton-survol); }

.newsletter-legal { font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: 12px; line-height: 1.5; }
.newsletter-legal a {
    color: rgba(255, 255, 255, .75);
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Tap target: 44px min height (WCAG AA) */
    display: inline-block;
    padding: 8px 4px;
    margin: -8px -4px;
}
.newsletter-legal a:hover { color: #fff; }

/* ============================================================
   Modal d'inscription newsletter (ouvert depuis le pied de page)

   Ces 35 règles vivaient dans un `<style nonce>` au milieu de
   base_website.html, donc chargées à l'octet près sur chaque page publique et
   invisibles à toute relecture de feuille. Elles sont ici : une feuille, un
   endroit, rien à surcharger.
   ============================================================ */
.nl-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.nl-modal[hidden] { display: none; }

.nl-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    animation: nlFadeIn 180ms ease-out;
}

.nl-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    padding: 32px 32px 28px;
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: nlSlideUp 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nl-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
}
.nl-modal-close:hover { color: #111827; background: #f3f4f6; }

.nl-modal-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.nl-modal-subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.nl-modal-row { margin-bottom: 14px; }
.nl-modal-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.nl-modal-req { color: #00a86b; }
.nl-modal-opt { color: #9ca3af; font-weight: 400; }

.nl-modal-row input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #111827;
    box-sizing: border-box;
    transition: border-color 120ms, box-shadow 120ms;
}
.nl-modal-row input:focus {
    outline: none;
    border-color: #00a86b;
    box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.18);
}

.nl-modal-submit {
    width: 100%;
    padding: 12px 16px;
    background: var(--vert-bouton);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms;
    margin-top: 4px;
}
.nl-modal-submit:hover { background: var(--vert-bouton-survol); }
.nl-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.nl-modal-feedback {
    margin: 8px 0 0;
    font-size: 13px;
}
.nl-modal-feedback.ok { color: #047857; }
.nl-modal-feedback.err { color: #b91c1c; }

.nl-modal-legal {
    margin: 12px 0 0;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.5;
    text-align: center;
}
.nl-modal-legal a { color: #00a86b; text-decoration: none; }

.nl-modal-company { position: relative; }

.nl-suggest {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
}
.nl-suggest[hidden] { display: none; }
.nl-suggest li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}
.nl-suggest li:hover,
.nl-suggest li.active { background: #f3f4f6; }
.nl-suggest .nl-suggest-name { color: #111827; font-weight: 600; }
.nl-suggest .nl-suggest-meta { color: #6b7280; font-size: 11px; margin-top: 2px; }
.nl-suggest-loading,
.nl-suggest-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

.nl-suggest-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--vert-encre);
    vertical-align: middle;
}

@keyframes nlFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes nlSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

body.nl-modal-open { overflow: hidden; }

/* Le panneau se déclare `aria-modal="true"`, mais deux surfaces flottantes
   passaient encore devant lui : la bulle « Besoin d'aide ? » du chatbot et sa
   fenêtre. Elles restaient claires, cliquables et tabulables au-dessus d'un
   fond assombri, ce qui donnait deux dialogues concurrents à l'écran. La
   bannière de consentement, elle, garde sa priorité : c'est la seule surface
   qui doit passer devant tout le reste. */
body.nl-modal-open .chatbot-trigger,
body.nl-modal-open .chatbot-window { visibility: hidden; }

/* Même conflit avec le tiroir du menu mobile : en paysage, la bulle couvrait
   « À propos ». `menu-ouvert` est posée par site.js (pas `:has()`, absent des
   WebView anciennes). */
body.menu-ouvert .chatbot-trigger,
body.menu-ouvert .chatbot-window { visibility: hidden; }

/* ── Champs au téléphone et à la tablette ──
   Safari iOS zoome sur tout champ dont le texte fait moins de 16 px au moment
   du focus, et ne dézoome pas en sortant : le champ e-mail du pied (14 px),
   le formulaire de contact (15 px) et le modal newsletter (15 px) faisaient
   tous sauter la page. Le honeypot aussi, pour qu'un lecteur d'écran ou un
   remplissage automatique qui l'atteindrait ne déclenche pas le zoom.
   La croix du modal passe à 44 px de côté : 36 px, sous le pouce, touchait
   le titre. Le bureau ne change pas. */
@media (max-width: 1020px) {
    .newsletter-input,
    .champ input, .champ textarea,
    .nl-modal-row input,
    .nl-honeypot input { font-size: 16px; }
    .nl-modal-close { top: 8px; right: 8px; min-width: 44px; min-height: 44px; }
}


/* ============================================================
   Accessibility
   ============================================================ */
/* Seul `!important` admis de la feuille, et il est irréductible : le sélecteur
   universel pèse 0,0,0 et le repli `[class*="-reveal"]` (0,1,0) est déclaré ici,
   AVANT le CSS de page qui pose `.js-enabled .home-reveal` (0,2,0). Aucune
   combinaison de sélecteurs ne peut gagner depuis cette feuille : c'est
   l'interrupteur d'accessibilité, pas une guerre de spécificité. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Fallback : si JS désactivé ou reduce-motion, afficher tous les éléments reveal */
    [class*="-reveal"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #00a86b;
    outline-offset: 2px;
}

/* ── Le recentrage (22/10/2026) ──
   Une section d'une seule colonne — un titre, un chapô, un bouton, une FAQ,
   le bloc du prix — se tenait contre le bord gauche d'une colonne de 1 120 px
   et laissait sa moitié droite vide, sur toutes les pages. Ces sections se
   centrent : les titres, chapôs et boutons au milieu, et les blocs de lecture
   (relevé, FAQ, formulaire, périmètre, encart) posés au milieu en gardant leur
   texte au fer à gauche. Ce qui remplit déjà la largeur ne bouge pas : les
   grilles, les chapitres, les hauts de page à visuel, les pages à sommaire.
   Au-dessus de 820 px seulement : en dessous la colonne tient tout l'écran,
   rien n'est décalé, et un paragraphe de dix lignes centré ne se lit plus.
   En fin de feuille : elle passe après les marges et alignements qu'elle
   corrige. */
@media (min-width: 821px) {
    .sec > .w > :is(h2, .etiquette, .sub, .recit, .meta, .citation, .signature),
    .sombre .w > :is(h2, .prix, .sub),
    .heros-tarifs .heros-texte > *,
    .blog-hero > *,
    :is(.pricing-section, .pricing-deduct-inner) > :is(.pricing-eyebrow, .pricing-section-title, .pricing-section-lead, .pricing-deduct-caveat) {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .sec > .w > .ctas, .sombre .ctas, .pricing-deduct-math, .pricing-toggle-rang { justify-content: center; }
    .sec > .w > .renvoi-bloc { display: table; margin-left: auto; margin-right: auto; }
    .sec > .w > :is(.registre, .faq, .formulaire, .perimetre, .discret-bloc),
    .pricing-faq .faq { margin-left: auto; margin-right: auto; }
    .sec > .w > .registre { max-width: var(--mesure-l); }
    .perimetre { max-width: calc(200px + 24px + var(--mesure)); }
    .legal-section:not(.avec-sommaire) .legal-container { margin: 0 auto; }
}