/* ============================================================
   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 : le vert Mary le plus clair qui porte encore un texte blanc
       de 15 px au seuil AA (4,5:1). Plus clair, le blanc tombe sous le seuil. */
    --vert-bouton: #008857;
    --vert-bouton-survol: #007a4f;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --barre: 68px;
    interpolate-size: allow-keywords;
}

* { 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 28px; }
/* La colonne étroite est CENTRÉE : un texte de 720 px calé sur le bord
   gauche d'une colonne de 1 120 laissait un grand vide à droite, et la page
   paraissait décalée. Le texte, lui, reste aligné à gauche dans son bloc. */
.ww { max-width: 836px; margin: 0 auto; padding: 0 28px; }

/* ── 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: 600px; 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; }
.renvoi {
    display: inline-block;
    margin-top: 34px;
    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); }

/* ── 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; }

/* ════════════════════════════════════════════════════════════
   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; }
.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 28px; 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; color: var(--t2); 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. */
.liens a[aria-current] { color: var(--noir); font-weight: 600; }
.liens a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--noir); }
.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; }
.pied h4 { color: #fff; font-size: 13px; margin: 6px 0 14px; font-weight: 600; }
.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) 28px;
}
.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 28px; }
.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 ── */
.registre { margin-top: 40px; }
.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); }
/* Le tampon se pose DANS LA MARGE : les trois montants restent alignés. */
.tampon { position: absolute; right: -58px; 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 ── */
.sombre { background: var(--noir); color: #fff; border-radius: 28px; margin: 0 20px; padding: 96px 0; text-align: center; }
.sombre .sub { color: #b9b9be; margin-left: auto; margin-right: auto; }
.sombre .ctas { justify-content: center; }
.sombre .lien { color: #b9b9be; text-decoration-color: rgba(255, 255, 255, .3); }
.sombre .lien:hover { color: #fff; }
.sombre .choix-menu { left: 50%; transform: translateX(-50%); 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 ── */
.faq { margin-top: 36px; }
.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; }
.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: 640px; }
.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: 640px; }
.recit strong { color: var(--noir); font-weight: 600; }
.recit-sous-titre { margin-top: 20px; }
.modules { font-size: 13.5px; color: var(--t4); margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ── Les domaines : titre, phrase, contenu en lignes simples ── */
.domaines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 44px; margin-top: 52px; }
.domaines h3 { font-size: 18px; }
.domaines p { font-size: 14.5px; line-height: 1.6; color: var(--t2); margin: 8px 0 12px; }
.domaines ul { list-style: none; font-size: 14.5px; line-height: 1.5; }
.domaines li { padding: 3px 0; }

/* ── 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; }
.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); }
.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 ── */
.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
   ════════════════════════════════════════════════════════════ */
.heros-tarifs { grid-template-columns: 1fr auto; align-items: end; }
.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; 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; }
.pricing-plan-name { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vert-encre); }
.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(--t4); margin-left: 6px; }
.pricing-plan-total { font-size: 13.5px; color: var(--t4); 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; }
.pricing-plan-note { font-size: 13px; color: var(--t4); 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; }
.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); }
.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; }

.pricing-section { max-width: 1120px; margin: 0 auto; padding: 72px 28px; }
.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: 680px; }
.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-faq .ww { padding: 0; }

.pricing-deduct { max-width: 1120px; margin: 0 auto; padding: 72px 28px; }
.pricing-deduct-lead { max-width: 680px; }
.pricing-deduct-math { display: flex; align-items: flex-end; 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); }
.pricing-deduct-lien { font-size: 14px; color: var(--t4); padding-bottom: 22px; }
.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: 680px; }

/* ════════════════════════════════════════════════════════════
   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) 28px 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: 999px; 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 22px 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 { padding: 0 22px; 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 a[aria-current] { color: var(--vert-encre); }
    .liens.ouvert a[aria-current]::after { display: none; }
    .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, .renvoi { padding: 11px 0; margin: -11px 0; }
    .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; }
    .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 22px 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-in { padding: 0 22px; }
    .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; }
    .prix { font-size: 76px; }
    .sombre { margin: 0 10px; }
    .formulaire .rang { grid-template-columns: 1fr; }
    .heros-tarifs { grid-template-columns: 1fr; align-items: 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 22px; }
    .tab { font-size: 13.5px; }
    .tab td:first-child, .tab thead th:first-child { width: auto; }
}
@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; }
}


/* ════════════════════════════════════════════════════════════
   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: 999px;
    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: #00a86b;
    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: #00875a; }
.nl-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.nl-modal-feedback {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}
.nl-modal-feedback.ok { background: #ecfdf5; color: #047857; }
.nl-modal-feedback.err { background: #fef2f2; 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;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #00a86b;
    background: #ecfdf5;
    border-radius: 4px;
    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;
}