/* GÉNÉRÉ depuis _commun/assets/css/forme.css — ne pas éditer ici, éditer la source puis relancer tools/build.php */
/* =====================================================================
   forme.css — la forme commune aux vitrines mentalsense
   ---------------------------------------------------------------------
   Chargée APRÈS base.css et AVANT le site.css de chaque site. Elle porte
   tout ce qui se voit pareil d'un site à l'autre : en-tête en pilule,
   coques arrondies, échelle typographique, boutons, cartes, mouvement.
   Elle est née sur la vitrine Entreprises, qui en reste la référence.

   Comme base.css, elle ne DÉFINIT aucune couleur. Au contrat de base.css
   s'ajoutent ces tokens, que chaque site pose dans son site.css :

     Décor     --deco --deco-soft        filets, barres, pastilles ; jamais
                                         de texte (contraste insuffisant)
     Lecture   --on-accent               texte posé sur --accent
               --on-ink-strong           emphase sur fond sombre
               --on-ink-muted            légendes sur fond sombre
     Traits    --line-soft --pale        bord des cartes, chiffres pâles
     Canaux    --ink-rgb --on-ink-rgb --accent-rgb --accent-lift-rgb
                                         « r, g, b » pour les ombres et voiles
     Motifs    --brush                   trait de pinceau sous les mots en
                                         couleur (data-URI, à la teinte --deco)
               --plus                    le « + » des accordéons (data-URI, à
                                         la teinte --accent)
               --liquid-filter           teinte de la texture des coques

   GÉOMÉTRIE — une seule règle tient tout au cordeau :
     --page   largeur du contenu (1240 px au plus)
     --edge   marge entre le bord de l'écran et une « coque » arrondie
     --inset  retrait intérieur d'une coque = l'écart entre son bord et
              --page. Il sert sur les QUATRE côtés : le contenu d'une coque
              est aligné sur celui des sections claires.
   Les sections se suivent par des marges (--sec-y) qui fusionnent : entre
   deux contenus, toujours le même écart, quel que soit le fond.
   ===================================================================== */

:root {
    /* Géométrie */
    --gut:   clamp(1.5rem, 4vw, 3rem);
    --page:  min(1240px, calc(100vw - 2 * var(--gut)));
    --edge:  clamp(.5rem, 1vw, 1rem);
    --inset: clamp(1rem, calc((100vw - 2 * var(--edge) - var(--page)) / 2), 6rem);
    --coque: calc(var(--page) + 2 * var(--inset));
    --sec-y: clamp(4rem, 2.4rem + 4.4vw, 6.5rem);
    --head-gap: clamp(2rem, 1.4rem + 1.8vw, 3rem);
    --gap:   clamp(1rem, .6rem + 1vw, 1.25rem);
    --gap-lg: clamp(2rem, 1rem + 3vw, 4.5rem);
    --pad:   clamp(1.5rem, 1rem + 1.2vw, 2rem);
    --r-band: clamp(1.5rem, 1rem + 1.4vw, 2rem);

    /* En-tête flottant */
    --hdr-h:   clamp(56px, 3.2rem + .6vw, 68px);
    --hdr-top: calc(var(--edge) + clamp(.4rem, .8vw, .75rem));
    --hdr-pad: clamp(1.25rem, calc(var(--hdr-h) * .46), 2rem);   /* logo hors de l’arrondi de la pilule */
    --hdr-zone: calc(var(--hdr-top) + var(--hdr-h));

    /* Typographie (suit le réglage de taille --fs) */
    --fs-h1:   calc(clamp(2.3rem, 1.2rem + 3.2vw, 3.9rem) * var(--fs, 1));
    --fs-h2:   calc(clamp(1.85rem, 1.15rem + 2.1vw, 3rem) * var(--fs, 1));
    --fs-h2s:  calc(clamp(1.7rem, 1.15rem + 1.6vw, 2.5rem) * var(--fs, 1));
    --fs-h3:   calc(clamp(1.3rem, 1.05rem + .7vw, 1.65rem) * var(--fs, 1));
    --fs-lead: calc(clamp(1.0625rem, 1rem + .3vw, 1.1875rem) * var(--fs, 1));
    --fs-body: calc(1.0625rem * var(--fs, 1));
    --fs-small: calc(.9375rem * var(--fs, 1));
    --fs-cap:  calc(.8125rem * var(--fs, 1));
    --ease:    cubic-bezier(.22, 1, .36, 1);
}

/* ── Socle ──────────────────────────────────────────────────────────── */
body {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.6;
    background: var(--ground);
}
strong, b { font-weight: 650; }
h1, h2, h3, h4 { font-weight: 400; }
section { position: relative; }        /* le rythme vertical est porté par .sec */
.wrap { width: var(--page); margin-inline: auto; }
::selection { background: var(--accent-soft); color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip {
    position: fixed; left: var(--edge); top: -100px; z-index: 300;
    padding: .7rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--on-ink);
    text-decoration: none; transition: top .2s;
}
.skip:focus { top: var(--edge); }
.ico { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ── Typographie ────────────────────────────────────────────────────── */
.limo { font-family: var(--font-serif); font-weight: 400; }
.h1 { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.h2 { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.h2s { font-family: var(--font-serif); font-size: var(--fs-h2s); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; }
.h1-xl { font-size: clamp(2.75rem, 1.9rem + 3vw, 4.5rem); }
.h3-lg { font-size: clamp(1.625rem, 1.3rem + .9vw, 1.875rem); }
.h3-xl { font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.25rem); line-height: 1.12; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-mid); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.6; color: var(--text-mid); }
.cap { font-size: var(--fs-cap); line-height: 1.45; color: var(--text-muted); }
.em { color: var(--accent); }
.strong-ink { color: var(--text); }
.brand { white-space: nowrap; }
.brand .limo { font-size: 1.04em; }
.kicker { font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

.eyebrow {
    display: inline-flex; align-items: center; gap: .65rem;
    font-size: .75rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent);
}
.eyebrow::before { content: ''; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--deco); flex-shrink: 0; }
.rule { width: 3.5rem; height: 2px; border-radius: 2px; background: var(--deco); }

/* Surfaces sombres : encre, coques, bandeaux */
:is(.on-ink, .liquid, .coque-ink) { color: var(--on-ink); }
:is(.on-ink, .liquid, .coque-ink) .eyebrow { color: var(--accent-lift); }
:is(.on-ink, .liquid, .coque-ink) .lead, :is(.on-ink, .liquid, .coque-ink) .small { color: var(--on-ink-mid); }
:is(.on-ink, .liquid, .coque-ink) .cap { color: var(--on-ink-muted); }
:is(.on-ink, .liquid, .coque-ink) .em { color: var(--accent-lift); }
:is(.on-ink, .liquid, .coque-ink) strong, :is(.on-ink, .liquid, .coque-ink) b { color: var(--on-ink-strong); }
:is(.on-ink, .liquid, .coque-ink) .card .lead, :is(.on-ink, .liquid, .coque-ink) .card .small { color: var(--text-mid); }
:is(.on-ink, .liquid, .coque-ink) .card .cap { color: var(--text-muted); }
:is(.on-ink, .liquid, .coque-ink) .card strong, :is(.on-ink, .liquid, .coque-ink) .card b { color: var(--text); }
:is(.on-ink, .liquid, .coque-ink) .card .em { color: var(--accent); }
:is(.on-ink, .liquid, .coque-ink) .card .eyebrow { color: var(--accent); }

/* ── Géométrie des sections ─────────────────────────────────────────── */
.sec { margin-block: var(--sec-y); }
.sec-sm { margin-block: clamp(2rem, 1.4rem + 1.6vw, 3rem); }
.bleed { margin-block: var(--sec-y); padding-block: var(--sec-y); background: var(--parchment); }
.coque {
    position: relative; isolation: isolate; overflow: hidden;
    width: min(var(--coque), calc(100vw - 2 * var(--edge)));
    margin: var(--sec-y) auto;
    padding: var(--inset);
    border-radius: var(--r-band);
}
.coque-ink { background: var(--ink); color: var(--on-ink); }
.coque-alt { background: var(--alt); color: var(--on-alt); }
.coque-alt .eyebrow { color: var(--deco-soft); }
.coque-alt :is(.lead, .small) { color: var(--on-alt-mid); }
.coque-alt :is(.em, .link-go) { color: var(--alt-lift); }
.coque-alt .checks li { color: var(--on-alt-mid); }
.coque-alt .card :is(.lead, .small, .checks li) { color: var(--text-mid); }
.coque-alt .card :is(.em, .link-go) { color: var(--accent); }
.coque-sand { background: var(--parchment); }

/* Texture organique : la matière passe sous un voile d'encre. Deux calques,
   pour que le filtre de teinte ne touche que la matière, jamais le voile. */
.liquid { background-color: var(--ink); color: var(--on-ink); }
.liquid::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: var(--hero-texture) center / cover no-repeat;
    filter: var(--liquid-filter, none);
}
.liquid::after {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(115deg, rgba(var(--ink-rgb), .94) 30%, rgba(var(--ink-rgb), .74));
}
.liquid-anim::before, .liquid-anim::after { inset: -12%; animation: liquid 38s ease-in-out infinite alternate; }   /* le voile dérive avec la matière */
@keyframes liquid {
    0%   { transform: rotate(0deg)   scale(1)    translate(0, 0); }
    50%  { transform: rotate(6deg)   scale(1.14) translate(-2%, 1%); }
    100% { transform: rotate(-5deg)  scale(1.08) translate(2%, -2%); }
}

/* La forme de la marque, en filigrane : découpée dans un aplat --deco. */
.forme {
    position: absolute; z-index: -1; pointer-events: none;
    width: clamp(18rem, 36vw, 36rem); aspect-ratio: 300 / 180;
    background: var(--deco);
    -webkit-mask: url('../img/forme.svg') center / contain no-repeat;
            mask: url('../img/forme.svg') center / contain no-repeat;
    opacity: .22;
}
.forme-br { right: -4%; bottom: -8%; }
.forme-bl { left: -6%; bottom: -10%; }
.forme-tl { left: -8%; top: -12%; }
.forme-tr { right: -6%; top: -14%; transform: rotate(180deg); }
.forme-soft { opacity: .35; }

/* Héros : une coque en tête de page, sous l'en-tête flottant. Le contenu
   commence un --inset sous le bas de l'en-tête : mêmes marges partout. */
.hero-c {
    margin-top: var(--edge);
    padding-top: calc(var(--hdr-zone) - var(--edge) + var(--inset));
    min-height: min(56rem, 100svh - 2 * var(--edge));
    display: grid; align-content: center;
}
.hero-c.hero-auto { min-height: 0; }
.hero-grid { display: grid; gap: var(--gap-lg); align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.hero-txt { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-txt .lead { max-width: 36rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
.hero-c .crumbs { margin-bottom: -.25rem; }
.hero-hub .hero-txt { max-width: 60rem; }
.js .hero-c .rise { animation: rise .9s var(--ease) both; }
.js .hero-c .rise:nth-child(2) { animation-delay: .08s; }
.js .hero-c .rise:nth-child(3) { animation-delay: .16s; }
.js .hero-c .rise:nth-child(4) { animation-delay: .24s; }
.js .hero-c .rise:nth-child(5) { animation-delay: .32s; }
.js .hero-c .rise:nth-child(6) { animation-delay: .40s; }
.js .hero-c .rise-late { animation: rise 1.1s var(--ease) .3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* En-têtes de section */
.head { display: grid; gap: 1.25rem var(--gap-lg); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; margin-bottom: var(--head-gap); }
.head > div { display: flex; flex-direction: column; gap: 1.1rem; }
.head-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; margin: 0 auto var(--head-gap); max-width: 60rem; }
.head-center .lead { max-width: 46rem; }
.head-stack { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: var(--head-gap); max-width: 58rem; }

/* Grilles */
.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.split { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split-top { align-items: start; }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.stack-sm { display: flex; flex-direction: column; gap: .75rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.mt { margin-top: var(--gap); }
.mt-lg { margin-top: var(--head-gap); }
.mt-xl { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.mt-sm { margin-top: .875rem; }
.center { text-align: center; justify-content: center; }
/* Colonnes propres à un bloc (style="--cols: …"), repliées en une colonne sous 1024 px. */
.cols { grid-template-columns: var(--cols); }

/* ── En-tête flottant ───────────────────────────────────────────────── */
.pill {
    position: fixed; z-index: 150;
    top: var(--hdr-top); left: 50%; transform: translateX(-50%);
    width: min(calc(var(--page) + 2 * var(--hdr-pad)), calc(100vw - 2 * var(--edge)));
    height: var(--hdr-h);
    display: flex; align-items: center; gap: .5rem;
    padding: 0 calc(var(--hdr-h) * .12) 0 var(--hdr-pad);
    border-radius: 999px;
    background: var(--chrome);
    -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
    box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 10px 30px rgba(var(--ink-rgb), .14);
    view-transition-name: entete;
    transition: box-shadow .35s, background-color .35s;
}
.pill.scrolled { box-shadow: 0 1px 2px rgba(var(--ink-rgb), .06), 0 14px 36px rgba(var(--ink-rgb), .18); }
.pill-logo { display: flex; align-items: center; flex-shrink: 0; }
.pill-logo img { height: clamp(18px, 1rem + .4vw, 22px); width: auto; }
.pill-nav { display: flex; align-items: center; align-self: stretch; gap: .15rem; margin-left: clamp(.75rem, 2vw, 1.75rem); }
.pill-nav > a, .pill-top {
    padding: .55rem .9rem; border-radius: 999px;
    font-size: .9375rem; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap;
    transition: background-color .2s, color .2s;
}
.pill-nav > a:hover, .pill-top:hover, .pill-item:focus-within > .pill-top { background: var(--parchment); }
.pill-nav > a[aria-current], .pill-item.is-current > .pill-top { background: var(--accent-soft); color: var(--accent-deep); }
.pill-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.pill-actions .btn { height: calc(var(--hdr-h) - 16px); padding-inline: 1.25rem; font-size: .9375rem; }
.pill .burger { display: none; position: relative; width: calc(var(--hdr-h) - 12px); height: calc(var(--hdr-h) - 12px); margin-left: auto; border-radius: 50%; background: var(--ink); }
.pill .burger span { position: absolute; left: 30%; width: 40%; height: 2px; border-radius: 2px; background: var(--on-ink); transition: transform .35s, opacity .25s, background-color .4s; }
.pill .burger span:nth-child(1) { top: 36%; }
.pill .burger span:nth-child(2) { top: calc(50% - 1px); }
.pill .burger span:nth-child(3) { top: calc(64% - 2px); }
.pill .burger.open span:nth-child(1) { transform: translateY(calc(var(--hdr-h) * .13)) rotate(45deg); }
.pill .burger.open span:nth-child(2) { opacity: 0; }
.pill .burger.open span:nth-child(3) { transform: translateY(calc(var(--hdr-h) * -.13)) rotate(-45deg); }

/* Sous-menus de la pilule. Chaque rubrique reste un vrai lien vers sa page
   d'entrée ; le panneau s'ouvre au survol et au focus clavier, sans script.
   forme.js n'ajoute qu'Échap et l'état aria-expanded. */
.pill-item { position: relative; display: flex; align-items: center; align-self: stretch; }
.pill-top { display: inline-flex; align-items: center; gap: .3rem; }
.pill-top .ico { opacity: .55; transition: transform .3s var(--ease); }
.pill-item:hover > .pill-top .ico, .pill-item:focus-within > .pill-top .ico { transform: rotate(180deg); }
.pill-panel {
    position: absolute; top: calc(100% + .6rem); left: -.75rem; min-width: 21.5rem;
    padding: .5rem; border-radius: var(--radius);
    background: var(--paper); border: 1px solid var(--line-soft); box-shadow: var(--elev-3);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s, transform .4s var(--ease), visibility .25s;
}
.pill-panel::before { content: ''; position: absolute; inset: -1rem 0 auto; height: 1rem; }   /* pont de survol */
.pill-item:hover > .pill-panel, .pill-item:focus-within > .pill-panel { opacity: 1; visibility: visible; transform: none; }
.pill-item.closed > .pill-panel { opacity: 0; visibility: hidden; }
.pill-panel.cols-2 { min-width: 38rem; }
.pill-panel.cols-2 ul { display: grid; grid-template-columns: 1fr 1fr; }
.pill-panel a { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: background-color .2s; }
.pill-panel a:hover { background: var(--ground); }
.pill-panel b { font-size: .9375rem; font-weight: 600; color: var(--text); }
.pill-panel span { font-size: var(--fs-cap); line-height: 1.4; color: var(--text-muted); }

/* Menu mobile (le panneau et son voile sont dans base.css) */
.mnav { padding: calc(var(--hdr-zone) + 1.5rem) 1.75rem 2rem; overflow-y: auto; }
.mnav a { font-size: 1.35rem; padding: .8rem 0; border-bottom-color: rgba(var(--on-ink-rgb), .12); }
.mnav .mnav-sub { margin-top: 1.5rem; font-family: var(--font-sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lift); border: 0; padding: 0 0 .25rem; }
.mnav .btn { margin-top: 1.25rem; align-self: stretch; justify-content: center; font-family: var(--font-sans); font-size: 1rem; border-bottom: 0; }
.mnav .btn + .btn { margin-top: .6rem; }
.mnav-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; font-family: var(--font-serif); font-size: 1.35rem; border-bottom: 1px solid rgba(var(--on-ink-rgb), .12); }
.mnav-group summary::-webkit-details-marker { display: none; }
.mnav-group summary::after { content: '+'; font-family: var(--font-sans); font-size: 1.25rem; color: var(--accent-lift); transition: transform .3s var(--ease); }
.mnav-group[open] summary::after { transform: rotate(45deg); }
.mnav-group ul { padding: .5rem 0 .75rem; }
.mnav-group li a { display: block; padding: .5rem 0; border: 0; font-family: var(--font-sans); font-size: 1rem; color: var(--on-ink-mid); }

/* ── Boutons ────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    height: 3.25rem; padding: 0 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
    font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
    cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .18s;
    will-change: transform;
}
.btn .ico { transition: transform .3s var(--ease); }
.btn:hover .ico-go { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { background: var(--parchment); }
.btn-light { background: var(--paper); color: var(--text); }
.btn-light:hover { background: var(--accent-soft); }
.btn-onink { border-color: rgba(var(--on-ink-rgb), .42); color: var(--on-ink); background: transparent; }
.btn-onink:hover { background: rgba(var(--on-ink-rgb), .08); border-color: rgba(var(--on-ink-rgb), .6); }
/* Un bouton fantôme posé sur une coque sombre se lit comme .btn-onink ; dans une carte claire, il reste lui-même. */
:is(.on-ink, .liquid, .coque-ink, .coque-alt) .btn-ghost { border-color: rgba(var(--on-ink-rgb), .42); color: var(--on-ink); }
:is(.on-ink, .liquid, .coque-ink, .coque-alt) .btn-ghost:hover { background: rgba(var(--on-ink-rgb), .08); border-color: rgba(var(--on-ink-rgb), .6); }
:is(.on-ink, .liquid, .coque-ink, .coque-alt) :is(.card, .form-card) .btn-ghost { border-color: var(--line-strong); color: var(--text); }
:is(.on-ink, .liquid, .coque-ink, .coque-alt) :is(.card, .form-card) .btn-ghost:hover { background: var(--parchment); }
.btn-sm { height: 2.875rem; padding-inline: 1.25rem; font-size: .9375rem; }
.btn-block { width: 100%; }
.link-go { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; color: var(--accent); text-decoration: none; }
.link-go .ico { transition: transform .3s var(--ease); }
.link-go:hover .ico { transform: translateX(3px); }
:is(.on-ink, .liquid, .coque-ink) .link-go, .card-ink .link-go { color: var(--accent-lift); }
:is(.on-ink, .liquid, .coque-ink) .card:not(.card-ink) .link-go { color: var(--accent); }

/* ── Briques ────────────────────────────────────────────────────────── */
.card {
    padding: var(--pad);
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: var(--paper); box-shadow: var(--elev-1); color: var(--text);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
a.card { text-decoration: none; display: block; }
.card:hover { transform: none; box-shadow: var(--elev-1); border-color: var(--line-soft); }
a.card:hover, .card-hover:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: var(--accent-line); }
a.card:hover .link-go .ico { transform: translateX(3px); }
a.card.card-flex { display: flex; }
.card-lg { padding: clamp(1.75rem, 1rem + 2.4vw, 3.5rem); border-radius: var(--radius-lg); }
.card-sm { padding: 1.25rem; }
.card-flex { display: flex; flex-direction: column; gap: .9rem; }
.card-top { border-top: 3px solid var(--deco); }
.card-t { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 650; line-height: 1.35; }
.card-serif { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; }
.card-n { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; color: var(--pale); }
.card-soft { background: var(--ground); border: 1px solid var(--line); box-shadow: none; }
.card-ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); box-shadow: 0 14px 32px rgba(var(--ink-rgb), .2); }
.card-ink :is(.small, .lead, .li) { color: var(--on-ink-mid); }
.card-ink .eyebrow { color: var(--accent-lift); }
.card-ink .cap { color: var(--on-ink-muted); }
.card-ink .checks li { color: var(--on-ink-mid); }
.card-ink .checks .ico { color: var(--accent-lift); }
.card-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 14px 32px rgba(var(--accent-rgb), .25); }
.ink-card { padding: var(--pad); border-radius: var(--radius); background: rgba(var(--on-ink-rgb), .05); border: 1px solid rgba(var(--on-ink-rgb), .12); }
.ink-card-t { border-top: 2px solid var(--deco); }
.row-card { display: flex; gap: 1rem; align-items: flex-start; }
.row-card .card-t { margin-bottom: .25rem; }

.tag { display: inline-flex; align-items: center; align-self: flex-start; height: 1.75rem; padding: 0 .75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.tag-muted { background: var(--parchment); color: var(--text-mid); margin-top: auto; }
.chip { display: inline-flex; align-items: center; gap: .5rem; height: 2.375rem; padding: 0 1rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: .875rem; font-weight: 500; color: var(--text-mid); white-space: nowrap; }
.chip .ico { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; }
.chips-start { justify-content: flex-start; }
:is(.on-ink, .liquid, .coque-ink) .chip { background: rgba(var(--on-ink-rgb), .06); border-color: rgba(var(--on-ink-rgb), .18); color: var(--on-ink-mid); }
:is(.on-ink, .liquid, .coque-ink) .chip .ico { color: var(--accent-lift); }

.icon-tile { width: 3rem; height: 3rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); }
:is(.on-ink, .liquid, .coque-ink) .icon-tile, .icon-tile-ink { background: rgba(var(--accent-lift-rgb), .14); color: var(--accent-lift); }
.icon-tile-light { background: var(--paper); }
.icon-tile-sm { width: 2.75rem; height: 2.75rem; border-radius: 12px; }

.note { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.35rem; border-radius: 16px; background: var(--parchment); font-size: var(--fs-small); line-height: 1.55; color: var(--text-mid); }
.note > .ico { color: var(--accent); margin-top: .1rem; }
.note strong { color: var(--text); }
.note-soft { background: var(--accent-soft); }
.note-soft strong { color: var(--accent-deep); }
.note-paper { background: var(--paper); }
.note-ink { background: var(--ink); color: var(--on-ink-mid); }
.note-ink strong { color: var(--accent-lift); }
.note-accent { background: var(--accent); color: var(--on-accent); }
.note-accent strong { color: var(--on-accent); }
.note-deco { background: var(--deco-soft); color: var(--text); }
.note-lg { font-size: 1rem; padding: 1.35rem 1.6rem; }
.note-center { justify-content: center; text-align: center; }
.note-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; }

.bar { height: .5rem; border-radius: 999px; background: var(--parchment); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--deco); transform-origin: left; }
.js .reveal .bar > span { transform: scaleX(0); transition: transform 1.2s var(--ease) .3s; }
.js .reveal.seen .bar > span { transform: none; }
.bar-lg { height: .75rem; }
.bar-xl { height: 1.375rem; }
.dots { display: flex; gap: .375rem; }
.dots i { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--parchment); display: block; }
.dots i.on { background: var(--deco); }

.li { display: flex; gap: .65rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text-mid); }
.li::before { content: ''; width: .375rem; height: .375rem; border-radius: 50%; background: var(--deco); flex-shrink: 0; margin-top: .55em; }
:is(.on-ink, .liquid, .coque-ink) .li { color: var(--on-ink-mid); }
:is(.on-ink, .liquid, .coque-ink) .card .li { color: var(--text-mid); }
.checks { display: flex; flex-direction: column; gap: .75rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-small); color: var(--text-mid); line-height: 1.5; }
.checks .ico { color: var(--accent); margin-top: .1rem; }
.checks-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; }
:is(.on-ink, .liquid, .coque-ink) .checks li { color: var(--on-ink-mid); }
:is(.on-ink, .liquid, .coque-ink) .checks .ico { color: var(--accent-lift); }
:is(.on-ink, .liquid, .coque-ink) .card .checks li { color: var(--text-mid); }
:is(.on-ink, .liquid, .coque-ink) .card .checks .ico { color: var(--accent); }
.card-accent .checks .ico, .coque-alt .checks .ico { color: var(--deco-soft); }

.num-big { font-family: var(--font-serif); line-height: 1; color: var(--accent); }
.num-big small { font-size: .42em; margin-left: .08em; }
:is(.on-ink, .liquid, .coque-ink) .num-big, .card-ink .num-big { color: var(--on-ink-strong); }
.fig { font-family: var(--font-serif); font-size: clamp(2rem, 1.7rem + .8vw, 2.375rem); line-height: 1; color: var(--accent); margin-bottom: .35rem; }
.fig + .small { font-size: .875rem; }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.stat { padding-top: .875rem; border-top: 2px solid var(--deco); display: flex; flex-direction: column; gap: .35rem; }
.stat .limo { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); line-height: 1; color: var(--accent); }
.stat .small { font-size: .875rem; }
.stat .cap { font-size: .75rem; }
:is(.on-ink, .liquid, .coque-ink) .stat .limo { color: var(--on-ink-strong); }
.pull { margin: 0; padding-left: 1.25rem; border-left: 2px solid var(--deco); font-family: var(--font-serif); font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem); line-height: 1.35; }

/* Photos cadrées */
.frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--parchment); }
.frame picture, .frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame-in { border-radius: 14px; margin: .625rem .625rem 0; }

/* Fil d'Ariane */
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8125rem; color: var(--text-muted); margin-bottom: 0; }
.crumbs li + li::before { content: '/'; margin-right: .4rem; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
:is(.on-ink, .liquid, .coque-ink) .crumbs ol { color: var(--on-ink-muted); }
:is(.on-ink, .liquid, .coque-ink) .crumbs a:hover { color: var(--accent-lift); }

/* ── Pied de page ───────────────────────────────────────────────────── */
.ftr { background: var(--ink); color: var(--on-ink); padding-block: clamp(3.5rem, 2rem + 4vw, 5rem) 2.5rem; }
.ftr-cols { display: grid; gap: var(--gap-lg) 2rem; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.ftr-id { display: flex; flex-direction: column; gap: 1.1rem; }
.ftr-id img { height: 28px; width: auto; align-self: flex-start; }
.ftr-id p { font-size: var(--fs-small); color: var(--on-ink-mid); max-width: 22rem; }
.ftr-id a { color: var(--accent-lift); text-decoration: none; }
.ftr :is(strong, b) { color: var(--on-ink-strong); }
.ftr-t { font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lift); margin-bottom: 1rem; }
.ftr ul { display: flex; flex-direction: column; gap: .6rem; }
.ftr li a { color: var(--on-ink-mid); text-decoration: none; font-size: var(--fs-small); transition: color .2s; }
.ftr li a:hover { color: var(--on-ink-strong); }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgba(var(--on-ink-rgb), .12); font-size: var(--fs-cap); color: var(--on-ink-muted); }
.ftr-bottom a { color: inherit; }
.ftr .ftr-legal { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.25rem; }
.ftr .ftr-legal a { font-size: inherit; color: inherit; }

/* ── Citations, appel final ─────────────────────────────────────────── */
.quote { margin: 0; display: flex; flex-direction: column; gap: 1.4rem; }
.quote blockquote { margin: 0; font-family: var(--font-serif); font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem); line-height: 1.35; }
.quote figcaption { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.avatar { width: 2.625rem; height: 2.625rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quote .ico-q { color: var(--deco); }

.cta-final { text-align: center; }
.cta-final .head-center { margin-bottom: 0; }
.cta-final .hero-cta { justify-content: center; margin-top: .5rem; }
.coque.cta-final { margin-bottom: var(--sec-y); padding-block: calc(var(--inset) * 1.1); }

/* ── Frises et jalons ───────────────────────────────────────────────── */
.day { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; height: 2.125rem; padding: 0 .9rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .875rem; white-space: nowrap; }
.day-ink { background: var(--ink); color: var(--on-ink-strong); }
.day-deco { background: var(--deco); color: var(--ink); }
.halo { box-shadow: 0 0 0 6px var(--ground); }
.halo-paper { box-shadow: 0 0 0 5px var(--paper); }
.halo-ink { box-shadow: 0 0 0 6px var(--ink); }
.vtimeline { position: relative; display: flex; flex-direction: column; gap: .625rem; }
.vtimeline::before { content: ''; position: absolute; left: 2rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: linear-gradient(var(--deco), var(--accent)); }
.vt-row { position: relative; display: grid; grid-template-columns: 4rem 1fr; gap: 1.1rem; align-items: center; }
.vt-row .day { justify-self: center; }
.vt-box { padding: .9rem 1.1rem; border-radius: 14px; background: var(--ground); }
.vt-box b { display: block; }
.vt-box .small { font-size: .875rem; }
.vt-box-ink { background: var(--ink); color: var(--on-ink); }
.vt-box-ink .small { color: var(--on-ink-mid); }

/* Étapes numérotées reliées */
.steps4 { position: relative; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.steps4::before { content: ''; position: absolute; left: 1.5rem; right: 1.5rem; top: 1.45rem; height: 2px; background: linear-gradient(90deg, var(--deco), var(--accent)); }
.step4 { position: relative; display: flex; flex-direction: column; gap: 1.1rem; }
.step-dot { width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.125rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--ground); }
.step-dot-ink { background: var(--ink); color: var(--on-ink-strong); }
.bleed .step-dot { box-shadow: 0 0 0 6px var(--parchment); }
.step4 .card { flex-grow: 1; display: flex; flex-direction: column; gap: .75rem; }
.step4 .card .link-go { margin-top: auto; padding-top: .35rem; font-size: .875rem; }

/* Frise de cartes liées (cinq jalons) */
.frise5 { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.frise5::before { content: ''; position: absolute; left: 1.9rem; right: 1.9rem; top: 1rem; height: 2px; background: linear-gradient(90deg, var(--deco), var(--accent)); }
.frise5 a { position: relative; display: flex; flex-direction: column; gap: .875rem; text-decoration: none; color: inherit; }   /* positionné : passe devant la ligne */
.frise5 .card { padding: 1.25rem; flex-grow: 1; transition: transform .4s var(--ease), box-shadow .4s; }
.frise5 a:hover .card { transform: translateY(-3px); box-shadow: var(--elev-2); }

/* Frise horizontale à points (--n jalons) */
.tl6 { position: relative; display: grid; gap: .875rem; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.tl6::before { content: ''; position: absolute; left: .75rem; right: calc((100% - (var(--n, 6) - 1) * .875rem) / var(--n, 6) - .75rem); top: .7rem; height: 2px; background: linear-gradient(90deg, var(--ink), var(--accent) 40%, var(--deco) 60%, var(--accent)); }
.tl6 > :is(div, li) { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.tl-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--ground); display: block; }
.tl-dot.ink { background: var(--ink); }
.tl-dot.deco { background: var(--deco); }
.tl-lbl { font-size: var(--fs-cap); font-weight: 700; letter-spacing: .08em; color: var(--text-muted); }
.tl-lbl.hi { color: var(--accent); }
.tl6 .card { padding: 1.1rem; margin-top: -.375rem; }
.tl6 .card .small { font-size: .84375rem; margin-top: .25rem; }
.row-list > div { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--line-soft); }
.row-list b { display: block; font-size: 1rem; }
.row-list .small { font-size: .90625rem; margin-top: .15rem; }

/* ── Onglets ────────────────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: var(--paper); box-shadow: var(--elev-1); }
.tabs [role="tab"] { display: inline-flex; align-items: center; height: 2.875rem; padding: 0 1.5rem; border-radius: 999px; font-size: 1.0625rem; font-weight: 600; color: var(--text-mid); text-decoration: none; white-space: nowrap; transition: background-color .3s, color .3s; }
.tabs [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.tabs [role="tab"]:not([aria-selected="true"]):hover { background: var(--ground); color: var(--text); }
.tabs-row { display: flex; justify-content: center; margin-bottom: var(--head-gap); }
.tabs[hidden] { display: none; }          /* sans script : pas d'onglets, les panneaux se suivent */
.tabpanel { display: flex; flex-direction: column; gap: var(--head-gap); }
.tabpanel[hidden] { display: none; }
.tabpanel + .tabpanel { margin-top: var(--gap); }
.js .tabpanel.enter { animation: panel .5s var(--ease) both; }
@keyframes panel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.panel-grid { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 27.5rem) minmax(0, 1fr); align-items: center; }
.tool { display: flex; gap: 1rem; padding: 1.35rem; border-radius: 18px; background: var(--ground); }
.tool-n { width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fineprint { padding-top: 1.1rem; border-top: 1px solid var(--line); }

/* ── Formulaires ────────────────────────────────────────────────────── */
.form-card { padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--elev-3); color: var(--text); }
.form-card .h3 { margin-bottom: .35rem; font-size: clamp(1.75rem, 1.5rem + .6vw, 2rem); }
.form-head { margin-bottom: 1.5rem; }
:is(.on-ink, .liquid, .coque-ink) .form-card { color: var(--text); }
:is(.on-ink, .liquid, .coque-ink) .form-card :is(.cap, .small) { color: var(--text-muted); }
:is(.on-ink, .liquid, .coque-ink) .form-card :is(strong, b) { color: var(--text); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42.5rem); gap: var(--gap-lg); align-items: start; }
.contact-aside { padding-top: .75rem; }
.box { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem 1.65rem; border-radius: var(--radius); font-size: .96875rem; line-height: 1.55; color: var(--text-mid); }
.box-k { font-size: .75rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.box-soft { background: var(--accent-soft); }
.box-soft .box-k { color: var(--accent-deep); }
.box-soft strong { color: var(--text); }
.box-ink { background: var(--ink); color: var(--on-ink-mid); }
.box-ink .box-k { color: var(--accent-lift); }
.form { gap: 1.25rem; }
.form-row { gap: 1rem; }
.field label, .field legend { font-size: .875rem; font-weight: 600; color: var(--text); }
.input { height: 3.125rem; padding: 0 1rem; border: 1.5px solid var(--line-strong); border-radius: 12px; font-size: 1rem; }
textarea.input { height: auto; min-height: 8rem; padding: .85rem 1rem; }
select.input { appearance: auto; }
.input:focus-visible { box-shadow: 0 0 0 4px var(--accent-soft); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field legend { padding: 0; margin-bottom: .5rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-pill { position: relative; }
.choice-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-pill span { display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--line-strong); font-size: .9375rem; font-weight: 500; transition: background-color .2s, border-color .2s, color .2s; }
.choice-pill input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 650; }
.choice-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.field-hint { font-size: var(--fs-cap); color: var(--text-muted); }
.consent { font-size: .875rem; }
.form .btn { width: 100%; height: 3.5rem; font-size: 1.0625rem; }
.form-msg { text-align: center; }
.form-msg:empty { display: none; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--gap-lg); align-items: start; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.35rem 0; cursor: pointer; list-style: none;
    font-size: 1.0625rem; font-weight: 600; transition: color .25s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--accent-deep); }
/* Le « + » est une image de fond : elle ne sait pas hériter d'une couleur, d'où le token --plus. */
.acc summary::after {
    content: ''; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%;
    background: var(--accent-soft) var(--plus) center / 60% no-repeat;
    transition: transform .35s var(--ease);
}
.acc details[open] summary::after { transform: rotate(45deg); }
.acc-body { padding-bottom: 1.5rem; font-size: var(--fs-small); line-height: 1.65; color: var(--text-mid); max-width: 68ch; }

/* ── Pages de texte ─────────────────────────────────────────────────── */
.doc { padding-top: calc(var(--hdr-zone) + var(--sec-y) * .6); padding-bottom: var(--sec-y); }
.doc .wrap-nw { width: min(46rem, var(--page)); margin-inline: auto; }
.doc .crumbs { margin-bottom: 1.5rem; }
.doc h1 { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.1; margin: .75rem 0 .75rem; }
.doc-date { margin-bottom: 2.5rem; }
.doc p, .doc li { font-size: 1rem; line-height: 1.7; color: var(--text-mid); }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: .75rem; }
.doc ul { padding-left: 1.25rem; list-style: disc; margin-bottom: 1rem; }
.doc li + li { margin-top: .35rem; }
.doc li::marker { color: var(--deco); }
.doc strong { color: var(--text); }
/* Venue de base.css et gardée telle quelle : la teinte vaut aussi pour le texte des boutons d'une
   page de texte (page 404), où elle l'emporte sur la couleur du bouton. */
.doc a { color: var(--accent-deep); }
.doc a:not(.btn) { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc .note { margin-block: 1rem; }
.doc .crumbs a { color: inherit; text-decoration: none; }
.doc p.eyebrow { font-size: .75rem; line-height: 1.3; color: var(--accent); }
.doc p.cap { font-size: var(--fs-cap); color: var(--text-muted); }
.doc h2 { font-family: var(--font-serif); font-size: 1.375rem; color: var(--accent-deep); margin: 2.5rem 0 .9rem; }
.doc h3 { font-family: var(--font-sans); font-weight: 650; font-size: 1.0625rem; margin: 1.75rem 0 .6rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .9375rem; }
.doc th, .doc td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { background: var(--parchment); font-weight: 650; }

/* ── Écrans redessinés (illustrations) ──────────────────────────────── */
/* Scène : l'écran est composé à sa taille de maquette, puis mis à l'échelle
   de la colonne par forme.js (data-stage). Sa mise en page ne bouge jamais. */
.stage { position: relative; width: 100%; }
.stage-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.js .stage-in { transform: scale(var(--k, 1)); }
.stage-center { margin-inline: auto; }
.mock { color: var(--text); font-size: 12px; line-height: 1.4; }
.mock .limo { font-family: var(--font-serif); }
.mock .card, .mock-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--elev-1); }
.mock .float { box-shadow: var(--elev-3); }
.mock .tag { height: auto; padding: .15rem .5rem; font-size: 9.5px; }
.mock .cap { font-size: 11px; }
.mock .bar { height: 8px; }
.mock-win { border-radius: 16px; overflow: hidden; background: var(--ground); border: 1px solid var(--line); box-shadow: var(--elev-3); }
.win-bar { height: 32px; background: var(--parchment); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.win-bar .d { width: 10px; height: 10px; border-radius: 50%; background: var(--pale); display: block; }
.win-url { margin-left: 12px; height: 20px; padding: 0 12px; max-width: 70%; border-radius: 999px; background: var(--paper); font-size: 10px; color: var(--text-muted); display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.mock-phone { width: 14.375rem; height: 29.375rem; border-radius: 40px; background: var(--ink); padding: 8px; box-shadow: 0 2px 4px rgba(var(--ink-rgb), .1), 0 24px 60px rgba(var(--ink-rgb), .35); }
.mock-phone.lg { width: 16.375rem; height: 34.25rem; border-radius: 44px; padding: 9px; }
.phone-in { width: 100%; height: 100%; border-radius: 33px; background: var(--ground); overflow: hidden; display: flex; flex-direction: column; position: relative; padding: 22px 14px 14px; gap: 9px; }
.mock-phone.lg .phone-in { border-radius: 36px; padding: 0; gap: 0; }
/* Les écrans redessinés gardent leurs couleurs, même posés sur un fond sombre. */
.mock :is(strong, b) { color: inherit; }
:is(.on-ink, .liquid, .coque-ink) .mock .cap { color: var(--text-muted); }
:is(.on-ink, .liquid, .coque-ink) .mock .small, :is(.on-ink, .liquid, .coque-ink) .mock .lead { color: var(--text-mid); }

/* Graisse sur fond sombre : base.css force strong/b en encre. */
.card-ink :is(b, strong), .vt-box-ink :is(b, strong), .coque-alt :is(b, strong), .card-accent :is(b, strong), .note-ink b { color: var(--on-ink-strong); }
:is(.on-ink, .liquid, .coque-ink) .card-ink :is(.small, .lead, .li) { color: var(--on-ink-mid); }
:is(.on-ink, .liquid, .coque-ink) .card-ink :is(strong, b) { color: var(--on-ink-strong); }
.coque-alt .card :is(b, strong) { color: var(--text); }

/* ── Transitions entre pages ────────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
::view-transition-group(entete) { animation-duration: .4s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
/* Navigateurs sans View Transitions : fondu d'entrée de la page. */
@supports not (view-transition-name: none) {
    .js main { animation: vt-in .6s var(--ease) both; }
}

/* ══ Mouvement (assets/js/effects.js) ═══════════════════════════════════ */

/* Ancres : la cible s'arrête sous l'en-tête flottant. */
[id] { scroll-margin-top: calc(var(--hdr-zone) + 1rem); }

/* Défilement doux (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Titres révélés mot à mot */
.ws .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .16em; margin: 0 -.04em -.16em; }
.ws .wi { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1s var(--ease) calc(.04s + var(--i, 0) * 32ms); }
.ws.w-on .wi { transform: none; }
.js .hero-c .ws.rise { animation: none; }

/* Trait de pinceau sous les mots en couleur des grands titres */
:is(.h1, .h2, .h2s) .em { background: var(--brush) no-repeat 0 96% / 100% .28em; }
.js :is(.h1, .h2, .h2s).ws .em { background-size: 0% .28em; transition: background-size 1.2s var(--ease) .55s; }
.js :is(.h1, .h2, .h2s).ws.w-on .em { background-size: 100% .28em; }

/* Héros : l'inclinaison part du centre de la scène */
.hero-c [data-parallax] .stage { transform-origin: 50% 50%; will-change: transform; }
.hero-c [data-parallax] .stage-in > * { will-change: translate; }

/* Écrans vivants : états de départ posés seulement quand le script tourne */
.lv .stage .lv-bar { transform-origin: left center; transform: scaleX(0); transition: transform 1.2s var(--ease) calc(.3s + var(--lv-i, 0) * 70ms); }
.lv .stage .lv-col { transform-origin: bottom center; transform: scaleY(0); transition: transform 1s var(--ease) calc(.5s + var(--lv-i, 0) * 180ms); }
.lv .stage .lv-draw { stroke-dashoffset: var(--lv-len); transition: stroke-dashoffset 1.8s var(--ease) .25s; }
.lv .stage .lv-fade { opacity: 0; transition: opacity 1.2s var(--ease) .9s; }
.lv .stage .lv-grow { transform-box: fill-box; transform-origin: center; transform: scale(.15); opacity: 0; transition: transform 1.2s var(--ease) .35s, opacity .8s .35s; }
.lv .stage .lv-pop { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); transition: transform .6s var(--ease) 1.5s, opacity .5s 1.5s; }
.lv .stage.lv-on :is(.lv-bar, .lv-col, .lv-grow, .lv-pop) { transform: none; opacity: 1; }
.lv .stage.lv-on .lv-draw { stroke-dashoffset: 0; }
.lv .stage.lv-on .lv-fade { opacity: 1; }

/* Récit épinglé : sur grand écran, l'illustration reste fixe et change à chaque étape */
.story { margin-block: var(--sec-y); }
.story-step { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 32.5rem) minmax(0, 1fr); align-items: center; }
.story-step + .story-step { margin-top: var(--sec-y); }
.story-aside { display: none; }
.story.is-pinned .story-grid { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: var(--gap-lg); align-items: start; }
.story.is-pinned .story-step { display: flex; align-items: center; min-height: calc(100svh - var(--hdr-zone)); padding-block: 3rem; }
.story.is-pinned .story-step + .story-step { margin-top: 0; }
.story.is-pinned .story-aside { display: flex; align-items: center; position: sticky; top: var(--hdr-zone); height: calc(100svh - var(--hdr-zone)); }
.story-sticky { width: 100%; display: flex; flex-direction: column; gap: 1.5rem; }
.story-meter { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.story-count { font-size: var(--fs-cap); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.story-count b { color: var(--text); }
.story-bar { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.story-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--deco), var(--accent)); transform-origin: left center; transform: scaleX(0); }
.story-day { transition: background-color .4s; min-width: 3.25rem; }
.story-vis { position: relative; aspect-ratio: 656 / 500; }
.story-vis .story-scene { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 2rem, 0) scale(.97); transition: opacity .7s var(--ease), transform .9s var(--ease); pointer-events: none; }
.story-vis .story-scene.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* Frises verticales : la ligne se remplit, les étapes s'allument */
.vtimeline.scrub::before { opacity: .22; }
.vtimeline.scrub::after { content: ''; position: absolute; left: 2rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: linear-gradient(var(--deco), var(--accent)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.vtimeline.scrub .vt-row { z-index: 1; }
.vtimeline.scrub .vt-row > :not(.day) { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.vtimeline.scrub .vt-row:not(.is-on) > :not(.day) { opacity: .38; transform: translateX(6px); }
.vtimeline.scrub .day { transition: background-color .4s, color .4s; }
.vtimeline.scrub .vt-row:not(.is-on) .day { background: var(--pale); color: var(--paper); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .pill-nav > a, .pill-top { padding-inline: .65rem; font-size: .875rem; }
    .g5, .frise5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .frise5::before { display: none; }
    .g6, .tl6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tl6::before { display: none; }
}
@media (max-width: 1024px) {
    .pill-nav, .pill-actions { display: none; }
    .pill .burger { display: block; }
    .hero-grid, .split, .panel-grid, .faq, .story-step { grid-template-columns: minmax(0, 1fr); }
    .head { grid-template-columns: minmax(0, 1fr); }
    .g4, .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps4::before { display: none; }
    .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-grid, .note-row, .cols { grid-template-columns: minmax(0, 1fr); }
    .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ftr-cols { grid-template-columns: 1fr 1fr; }
    .ftr-id { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .g2, .g3, .g4, .g5, .g6, .steps4, .frise5, .tl6, .contact-grid, .stats4, .note-row, .checks-2 { grid-template-columns: minmax(0, 1fr); }
    /* Héros mobile : le texte seul, boutons pleine largeur. */
    .hero-grid > .rise-late { display: none; }
    .hero-grid > .rise-late.hero-keep { display: block; }   /* du contenu, pas une illustration */
    .hero-c { min-height: 0; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { justify-content: center; }
    .ftr-cols { grid-template-columns: minmax(0, 1fr); }
    .tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .tabs [role="tab"] { flex: 1; justify-content: center; padding: 0 .75rem; font-size: .9375rem; }
    .vtimeline::before, .vtimeline.scrub::after { left: 1.75rem; }
    .vt-row { grid-template-columns: 3.5rem 1fr; }
}

/* ── Mouvement réduit ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .liquid-anim::before, .liquid-anim::after { animation: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .js .reveal .bar > span { transform: none; }
    .ws .wi, .lv .stage *, .story-vis .story-scene { transition: none !important; }
    .js :is(.h1, .h2, .h2s).ws .em { background-size: 100% .28em; }
}