/* =====================================================================
   site.css — vitrine mentalsense Académie
   ---------------------------------------------------------------------
   1. Les tokens attendus par base.css et forme.css (_commun), posés à
      partir de la palette de l'app Académie (acad-kit.css, « Encre & Or »).
      La feuille source documente sa propre logique, qu'on respecte ici :
      — l'or est la couleur de marque. Plein (#C8922E), il ne tient pas le
        contraste d'un texte courant sur fond clair : il dessine filets,
        barres et pastilles (--deco) et porte l'encre sur les boutons. Le
        texte accentué est en bronze (#8A6318) sur fond clair, en or clair
        (#E8B84B) sur l'encre ;
      — le vert-de-gris est « la patine que prend le bronze doré en
        vieillissant ». Il reste un contrepoint, en deux rôles seulement :
        le pied de page et les coques .coque-alt.
   2. Les composants propres au site : catalogue, fiche de formation,
      guides, preuves.
   3. Les écrans redessinés (.ak-mock), voir lib/mockups.php.

   La forme (en-tête, coques, typographie, boutons, cartes, mouvement)
   vient de forme.css : rien de tout cela ne se redéfinit ici.
   ===================================================================== */

:root {
    /* Contrat de base.css */
    --ink:         #17100A;
    --ink-2:       #241A10;
    --on-ink:      #F7F0E2;
    --on-ink-mid:  rgba(247, 240, 226, .78);
    --on-ink-dim:  rgba(247, 240, 226, .42);
    --accent:       #8A6318;                   /* bronze : AA sur --paper */
    --accent-lift:  #E8B84B;                   /* or clair, sur l'encre */
    --accent-deep:  #6B4C10;
    --accent-soft:  #F6EDDA;
    --accent-line:  rgba(200, 146, 46, .34);
    --alt:         #24413C;                    /* vert-de-gris */
    --alt-deep:    #1B302C;
    --alt-lift:    #E8B84B;                    /* l'or clair, posé sur la patine */
    --on-alt:      #E6EFEC;
    --on-alt-mid:  #BACDC7;
    --alt-line:    rgba(230, 239, 236, .16);
    --ground:      #FAF6EE;
    --paper:       #FFFDF9;
    --parchment:   #F3ECDF;
    --sunken:      #EDE4D3;
    --text:        #17100A;
    --text-mid:    rgba(23, 16, 10, .68);
    --text-muted:  rgba(23, 16, 10, .56);
    --line:        rgba(23, 16, 10, .11);
    --line-strong: #9B9082;
    --chrome:      rgba(255, 253, 249, .84);
    --chrome-line: rgba(23, 16, 10, .09);
    --chrome-blur: blur(14px) saturate(1.4);
    --danger:      #A03A2B;
    --danger-soft: #F8EAE6;
    --ok:          #3E6B63;
    --radius:     20px;
    --radius-sm:  12px;
    --radius-lg:  28px;
    --elev-1: 0 1px 2px rgba(23, 16, 10, .04), 0 4px 12px rgba(23, 16, 10, .06);
    --elev-2: 0 2px 4px rgba(23, 16, 10, .05), 0 12px 28px rgba(23, 16, 10, .10);
    --elev-3: 0 2px 4px rgba(23, 16, 10, .06), 0 14px 32px rgba(23, 16, 10, .14), 0 40px 80px -24px rgba(23, 16, 10, .35);
    --font-sans:  'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'RL Limo', Georgia, serif;
    /* La texture source est ocre : elle est déjà dans la famille de l'or. */
    --hero-texture: url('../img/liquid.webp');

    /* Contrat de forme.css */
    --deco:          #C8922E;                  /* or plein */
    --deco-soft:     #F6E6C4;
    --on-accent:     #FFFDF9;
    --on-ink-strong: #FFFDF9;
    --on-ink-muted:  #AFA291;
    --line-soft:     rgba(23, 16, 10, .08);
    --pale:          #D9CDB6;
    --ink-rgb:         23, 16, 10;
    --on-ink-rgb:      247, 240, 226;
    --accent-rgb:      138, 99, 24;
    --accent-lift-rgb: 232, 184, 75;
    --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C38 5 78 4.2 112 6.3s63 2.7 85-1.6' fill='none' stroke='%23C8922E' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.6'/%3E%3C/svg%3E");
    --plus:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%238A6318' d='M222 128a6 6 0 0 1-6 6h-82v82a6 6 0 0 1-12 0v-82H40a6 6 0 0 1 0-12h82V40a6 6 0 0 1 12 0v82h82a6 6 0 0 1 6 6Z'/%3E%3C/svg%3E");
}

/* ── La marque dans la forme ────────────────────────────────────────── */
/* Bouton principal : l'or porte l'encre, comme dans l'app. */
.btn-primary { background: var(--deco); color: var(--ink); }
.btn-primary:hover { background: var(--accent-lift); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--ink-2); }
.pill-logo img { height: clamp(17px, .95rem + .35vw, 21px); }
/* Cinq rubriques dans la pilule : la connexion passe au menu mobile dès que la place manque. */
@media (max-width: 1280px) { .pill-actions .btn-ghost { display: none; } .pill-nav { margin-left: .5rem; } }
/* Le pied de page prend la patine, comme la navigation de l'app. */
.ftr { background: var(--alt); }
.ftr-cols { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
.ftr-id img { height: 22px; }
.ftr-id p, .ftr li a { color: var(--on-alt-mid); }
.ftr-contact { display: flex; flex-direction: column; gap: .3rem; }
.ftr-contact a { font-size: var(--fs-small); color: var(--on-alt); }
.ftr-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.ftr-badges span { padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--alt-line); font-size: var(--fs-cap); color: var(--on-alt-mid); }
.ftr-bottom { display: grid; gap: 1rem; border-top-color: var(--alt-line); color: var(--on-alt-mid); }
.ftr-note { max-width: 60rem; line-height: 1.6; }
.ftr-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ftr-cookies { font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ftr-fs { display: flex; align-items: center; gap: .6rem; }
.ftr .fs { display: flex; border-color: var(--alt-line); }

/* Utilitaires hérités des gabarits */
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.muted { font-size: var(--fs-small); color: var(--text-muted); }
.prose { display: flex; flex-direction: column; gap: 1rem; }
.prose p { color: var(--text-mid); max-width: 40rem; }
.prose a, .fx-box a, .feat a:not(.btn) { color: var(--accent-deep); text-underline-offset: 3px; }
.split-rev > :first-child { order: 2; }
.fx-h2 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; }
.cat-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: var(--head-gap); }
.cat-top .head-stack { margin-bottom: 0; }
:is(.liquid, .coque-ink) .chip.is-key { border-color: var(--accent-line); background: rgba(var(--accent-lift-rgb), .12); color: var(--accent-lift); }

/* ── Briques éditoriales ────────────────────────────────────────────── */
/* Deux entrées par public (accueil) */
.aud-card .aud-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: auto; padding-top: .5rem; }

/* Piliers : numéro, titre, texte */
.pillars { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pillar { display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 2px solid var(--deco); }
.pillar-n { font-family: var(--font-serif); font-size: 1.125rem; color: var(--accent); }
.pillar h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; }
.pillar p { font-size: var(--fs-small); color: var(--text-mid); }
:is(.coque-ink, .coque-alt, .liquid) .pillar-n { color: var(--accent-lift); }
.coque-alt .pillar p { color: var(--on-alt-mid); }
:is(.coque-ink, .liquid) .pillar p { color: var(--on-ink-mid); }

/* Cartes-liens vers pôles, publics, offres */
.link-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.link-card {
    display: flex; flex-direction: column; gap: .5rem; padding: var(--pad);
    border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--paper); box-shadow: var(--elev-1);
    color: var(--text); text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
a.link-card:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: var(--accent-line); }
.link-card > .ico { width: 3rem; height: 3rem; padding: .7rem; border-radius: 14px; background: var(--accent-soft); color: var(--accent); margin-bottom: .35rem; }
.link-card b { font-family: var(--font-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--text); }
.link-card span { font-size: var(--fs-small); line-height: 1.55; color: var(--text-mid); }
.link-card em { margin-top: auto; padding-top: .5rem; font-style: normal; font-size: var(--fs-small); font-weight: 650; color: var(--accent); }
:is(.coque-ink, .liquid) .link-card { background: rgba(var(--on-ink-rgb), .05); border-color: rgba(var(--on-ink-rgb), .12); box-shadow: none; }
:is(.coque-ink, .liquid) .link-card b { color: var(--on-ink-strong); font-size: 1.125rem; }

/* Étapes numérotées en cartes */
.timeline { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); counter-reset: t; }
.tl { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--paper); box-shadow: var(--elev-1); }
.tl::before {
    counter-increment: t; content: counter(t);
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-bottom: .5rem;
    border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .9375rem;
}
.tl h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 650; line-height: 1.35; }
.tl p { font-size: var(--fs-small); line-height: 1.55; color: var(--text-mid); }
.tl-auto { display: inline-flex; align-items: center; align-self: flex-start; gap: .35rem; margin-top: .5rem; padding: .2rem .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: .75rem; font-weight: 650; }
:is(.coque-ink, .coque-alt, .liquid) .tl { background: rgba(var(--on-ink-rgb), .05); border-color: rgba(var(--on-ink-rgb), .12); box-shadow: none; }
:is(.coque-ink, .coque-alt, .liquid) .tl::before { background: var(--deco); color: var(--ink); }
:is(.coque-ink, .coque-alt, .liquid) .tl h3 { color: var(--on-ink-strong); }
:is(.coque-ink, .coque-alt, .liquid) .tl p { color: var(--on-ink-mid); }
:is(.coque-ink, .coque-alt, .liquid) .tl-auto { background: rgba(var(--accent-lift-rgb), .14); color: var(--accent-lift); }

/* Encart à pictogramme, posé seul dans une colonne */
.feat { display: flex; flex-direction: column; gap: .9rem; padding: var(--pad); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--paper); box-shadow: var(--elev-1); }
.feat-ico { width: 3rem; height: 3rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.feat h3 { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 650; line-height: 1.35; }
.feat p { font-size: var(--fs-small); line-height: 1.6; color: var(--text-mid); }
.feat-sand { background: var(--parchment); box-shadow: none; }

/* Encart d'appel en milieu de page : la patine */
.callout {
    display: grid; gap: 1.25rem 2rem; align-items: center; grid-template-columns: minmax(0, 1fr) auto;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-lg);
    background: var(--alt); color: var(--on-alt);
}
.callout :is(h2, h3) { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; }
.callout p { margin-top: .4rem; font-size: var(--fs-small); color: var(--on-alt-mid); }
.callout .hero-cta { margin: 0; }
.callout .btn-ghost { border-color: rgba(var(--on-ink-rgb), .42); color: var(--on-alt); }
.callout .btn-ghost:hover { background: rgba(var(--on-ink-rgb), .08); }

/* Tableau comparatif */
.fmt-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--paper); box-shadow: var(--elev-1); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.compare th, .compare td { padding: .95rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.5; }
.compare tr:last-child > * { border-bottom: 0; }
.compare thead th { background: var(--parchment); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.compare thead th:last-child { background: var(--accent); color: var(--on-accent); }
.compare tbody th { font-weight: 650; color: var(--text); width: 26%; }
.compare td { color: var(--text-mid); }
.compare td:last-child { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.compare-plain thead th:last-child { background: var(--parchment); color: var(--text-muted); }
.compare-plain td:last-child { background: none; color: var(--text-mid); font-weight: 400; }

/* Références clientes : chaque logo sur sa pastille blanche, de taille fixe
   (les sources vont du carré au format 3:1, PNG transparents et JPEG mêlés). */
.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.client { display: flex; align-items: center; justify-content: center; overflow: hidden; width: 152px; height: 78px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: #FFFFFF; box-shadow: var(--elev-1); }
.client img { max-height: 52px; max-width: 124px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.2); opacity: .9; transition: filter .3s, opacity .3s; }
.client:hover img { filter: none; opacity: 1; }

/* Avis de stagiaires */
.carousel { max-width: 48rem; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; text-align: center; }
.avis-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .5rem 1.2rem; margin-bottom: 2rem; }
.avis-note { font-family: var(--font-serif); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.75rem); line-height: 1; color: var(--accent); }
.avis-sub { color: var(--text-mid); }
.carousel-track { position: relative; min-height: 11rem; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.slide.is-on { opacity: 1; visibility: visible; transform: none; position: relative; }
.slide blockquote { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem); line-height: 1.35; color: var(--text); }
.slide blockquote::before { content: '« '; color: var(--deco); }
.slide blockquote::after  { content: ' »'; color: var(--deco); }
.slide cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: var(--fs-small); color: var(--text-muted); }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 2rem; }
.carousel-nav button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--text); display: grid; place-items: center; font-size: 1.1rem; line-height: 1; transition: background-color .2s, border-color .2s; }
.carousel-nav button:hover { background: var(--parchment); }
.carousel-count { min-width: 4.5rem; font-size: var(--fs-small); color: var(--text-muted); }

/* ── Catalogue ──────────────────────────────────────────────────────── */
.cat-layout { display: grid; gap: var(--gap-lg) clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 16.5rem minmax(0, 1fr); align-items: start; }
.cat-layout > * { min-width: 0; }
.cat-side { position: sticky; top: calc(var(--hdr-zone) + 1rem); display: grid; gap: 1.4rem; }
.facets { display: grid; gap: 1.2rem; }
.facet summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; margin-bottom: .55rem; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.facet summary::-webkit-details-marker { display: none; }
.facet-list { display: grid; gap: .15rem; }
.facet-list a { display: flex; justify-content: space-between; gap: .6rem; padding: .5rem .8rem; border-radius: 999px; font-size: var(--fs-small); color: var(--text-mid); text-decoration: none; transition: background-color .2s, color .2s; }
.facet-list a:hover { background: var(--parchment); color: var(--text); }
.facet-list a.is-on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.facet-list a small { color: inherit; opacity: .65; }
.facet-list a.is-empty { opacity: .45; }
.cat-search { position: relative; max-width: 35rem; margin-bottom: 1.75rem; }
.cat-search .input { padding-left: 2.9rem; border-radius: 999px; }
.cat-search .ico { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.3rem; }
.cat-count { font-size: var(--fs-small); color: var(--text-mid); }
.cat-active { display: flex; flex-wrap: wrap; gap: .4rem; }
.cat-active a { display: inline-flex; align-items: center; gap: .4rem; height: 1.75rem; padding: 0 .75rem; border-radius: 999px; background: var(--accent-soft); font-size: .8125rem; font-weight: 600; color: var(--accent-deep); text-decoration: none; }
.cat-active a::after { content: '×'; font-size: 1rem; line-height: 1; }
[data-cat][aria-busy="true"] [data-cat-results] { opacity: .5; transition: opacity .2s; }

.fgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.fcard {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--paper); box-shadow: var(--elev-1);
    color: var(--text); text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.fcard:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: var(--accent-line); }
.fcard-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin: .625rem .625rem 0; border-radius: 14px; overflow: hidden; background: var(--parchment); }
/* <picture> est un conteneur en ligne : sans display:block, la hauteur à
   100 % de l'image n'a rien contre quoi se résoudre et object-fit ne recadre pas. */
.fcard-img picture { display: block; width: 100%; height: 100%; }
.fcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.fcard:hover .fcard-img img { transform: scale(1.04); }
.fcard-ph { color: var(--accent); opacity: .45; }
.fcard-flag { position: absolute; left: .6rem; bottom: .6rem; padding: .25rem .7rem; border-radius: 999px; background: var(--ink); color: var(--accent-lift); font-size: .75rem; font-weight: 600; }
.fcard-body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 1.25rem var(--pad) var(--pad); }
.fcard-pole { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.fcard-t { font-family: var(--font-serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; }
.fcard-a { flex: 1; font-size: var(--fs-small); line-height: 1.55; color: var(--text-mid); }
.fcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.badge { display: inline-flex; align-items: center; gap: .3rem; height: 1.625rem; padding: 0 .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: .78125rem; font-weight: 600; white-space: nowrap; }
.badge-plain { background: var(--parchment); color: var(--text-mid); }
.fcard-prix { margin-left: auto; font-size: var(--fs-cap); font-weight: 600; color: var(--text-mid); }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 2.5rem; }
.pager a, .pager span { min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-strong); font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--text); transition: background-color .2s; }
.pager a:hover { background: var(--parchment); }
.pager .is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.soon { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: clamp(1.75rem, 1rem + 2.4vw, 3rem); border-radius: var(--radius-lg); border: 1.5px dashed var(--line-strong); background: var(--paper); text-align: center; }
.soon p { max-width: 34rem; color: var(--text-mid); }
.themes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.themes li { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .875rem; font-weight: 500; color: var(--text-mid); }

/* ── Fiche formation ────────────────────────────────────────────────── */
.fx-pole { display: inline-flex; align-self: flex-start; text-decoration: none; }
.fx-title { font-size: var(--fs-h2); line-height: 1.08; }
.fx-layout { display: grid; gap: var(--gap-lg) clamp(2rem, 4vw, 3.5rem); align-items: start; grid-template-columns: minmax(0, 1fr) 22rem; }
.fx-layout > * { min-width: 0; }
.fx-tabs {
    position: sticky; top: calc(var(--hdr-zone) + .5rem); z-index: 80;
    display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; align-self: flex-start;
    margin-bottom: 2.25rem; padding: .3rem; border-radius: 999px;
    background: var(--chrome); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); box-shadow: var(--elev-1);
}
.fx-tabs::-webkit-scrollbar { display: none; }
.fx-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.1rem; border-radius: 999px; font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--text-mid); transition: background-color .3s, color .3s; }
.fx-tabs a:hover { background: var(--parchment); color: var(--text); }
.fx-tabs a.is-on { background: var(--accent); color: var(--on-accent); }
.fx-sec { scroll-margin-top: calc(var(--hdr-zone) + 5rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: flex; flex-direction: column; gap: 1.1rem; }
.fx-sec + .fx-sec, .callout + .fx-sec { border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.fx-sec + .callout { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.fx-sec > .h2s { margin-bottom: .25rem; }
.fx-h3 { margin-top: .75rem; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.fx-text p { color: var(--text-mid); line-height: 1.7; }
.fx-obj { display: grid; gap: .7rem; }
.fx-obj li { display: flex; gap: .75rem; align-items: flex-start; color: var(--text); line-height: 1.5; }
.fx-obj .ico { color: var(--accent); margin-top: .15rem; }
.fx-part { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--paper); box-shadow: var(--elev-1); overflow: hidden; }
.fx-part summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1.1rem 1.35rem; cursor: pointer; list-style: none; }
.fx-part summary::-webkit-details-marker { display: none; }
.fx-part-n { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.fx-part-t { font-weight: 650; line-height: 1.35; }
.fx-part summary::after {
    content: ''; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: linear-gradient(var(--accent), var(--accent)) center / 52% 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1.5px 52% no-repeat, var(--accent-soft);
    transition: transform .35s var(--ease);
}
.fx-part[open] summary::after { transform: rotate(45deg); }
.fx-part-body { padding: 0 1.35rem 1.25rem; }
.fx-part-body p { font-size: var(--fs-small); color: var(--text-mid); margin-bottom: .7rem; }
.fx-acts { display: grid; }
.fx-acts li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--text-mid); }
.fx-acts .ico { color: var(--accent); }
.fx-acts em { font-style: normal; font-size: var(--fs-cap); color: var(--text-muted); white-space: nowrap; }
.fx-cond { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-deep); vertical-align: middle; }
.fx-grid2 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fx-box { display: flex; flex-direction: column; gap: .45rem; padding: 1.25rem 1.35rem; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--paper); }
.fx-box h3 { display: flex; align-items: center; gap: .6rem; font-family: var(--font-sans); font-weight: 650; font-size: 1.0625rem; }
.fx-box h3 .ico { color: var(--accent); }
.fx-box p, .fx-box li { font-size: var(--fs-small); line-height: 1.6; color: var(--text-mid); }
.fx-box ul { display: grid; gap: .3rem; }
.fx-authors { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.35rem; border-radius: var(--radius); background: var(--parchment); }
.fx-avatar { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ink); color: var(--accent-lift); flex: 0 0 auto; }
.fx-authors b { display: block; }
.fx-authors div span { font-size: var(--fs-small); color: var(--text-mid); }

/* Carte d'action collante */
.fx-aside { position: sticky; top: calc(var(--hdr-zone) + 1rem); }
.fx-card { padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); background: var(--paper); box-shadow: var(--elev-3); }
.fx-card-img { margin: -1.5rem -1.5rem 1.25rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--parchment); }
.fx-card-img picture, .fx-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-fmts { display: flex; gap: .25rem; padding: .25rem; margin-bottom: 1.1rem; border-radius: 999px; background: var(--parchment); }
.fx-fmts button { flex: 1; height: 2.375rem; padding: 0 .6rem; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--text-mid); transition: background-color .3s, color .3s; }
.fx-fmts button[aria-pressed="true"] { background: var(--paper); color: var(--text); box-shadow: var(--elev-1); }
.fx-fmt[hidden] { display: none; }
.fx-price { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1.05; }
.fx-price small { font-family: var(--font-sans); font-size: .8125rem; color: var(--text-muted); margin-left: .35rem; }
.fx-rows { display: grid; margin: 1rem 0 1.25rem; }
.fx-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); }
.fx-rows dt { color: var(--text-muted); }
.fx-rows dd { color: var(--text); text-align: right; font-weight: 600; }
.fx-card .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.fx-card .btn + .btn { margin-top: .6rem; }
.fx-note { margin-top: .9rem; font-size: var(--fs-cap); color: var(--text-muted); text-align: center; }
/* Barre d'action mobile */
.fx-bar { position: fixed; inset: auto var(--edge) var(--edge); z-index: 140; display: none; align-items: center; gap: 1rem; padding: .6rem .6rem .6rem 1.25rem; border-radius: 999px; background: var(--chrome); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); box-shadow: 0 10px 30px rgba(var(--ink-rgb), .2); }
.fx-bar b { display: block; font-size: .875rem; line-height: 1.25; }
.fx-bar span { display: block; font-size: var(--fs-cap); color: var(--text-muted); }
.fx-bar .btn { margin-left: auto; height: 2.875rem; padding-inline: 1.1rem; font-size: .875rem; }

/* ── Guides ─────────────────────────────────────────────────────────── */
.guide { width: min(46rem, var(--page)); margin-inline: auto; }
.guide-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: var(--fs-small); color: var(--on-ink-muted); }
.guide-toc { margin-bottom: 2.5rem; }
.guide-toc ol { list-style: decimal; padding-left: 1.2rem; display: grid; gap: .35rem; margin-top: .75rem; }
.guide-toc li::marker { color: var(--deco); }
.guide-toc a { color: var(--text); text-decoration: none; font-size: var(--fs-small); }
.guide-toc a:hover { color: var(--accent); }
.guide-body h2 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; margin: 2.75rem 0 1rem; }
.guide-body h3 { font-family: var(--font-sans); font-weight: 650; font-size: 1.125rem; margin: 1.8rem 0 .6rem; }
.guide-body p, .guide-body li { color: var(--text-mid); line-height: 1.75; }
.guide-body p { margin-bottom: 1.1rem; }
.guide-body ul, .guide-body ol { margin: 0 0 1.2rem 1.3rem; display: grid; gap: .45rem; }
.guide-body ul { list-style: disc; }
.guide-body ol { list-style: decimal; }
.guide-body li::marker { color: var(--deco); }
.guide-body a:not(.btn) { color: var(--accent-deep); text-underline-offset: 3px; }
.guide-body strong { color: var(--text); }
.guide-key { padding: 1.2rem 1.4rem; margin: 1.6rem 0; border-left: 2px solid var(--deco); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--paper); }
.guide-key p { margin: 0; color: var(--text); }
.guide-cta { margin: 2.4rem 0; }
/* L'encart d'appel garde ses couleurs au milieu d'un article. */
.guide-body .callout :is(h2, h3) { margin: 0; color: var(--on-alt); }
.guide-body .callout p { margin: .4rem 0 0; color: var(--on-alt-mid); line-height: 1.6; }
.guide-body .callout .btn { white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 3.25rem; padding-block: .6rem; }
.guide-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); }
.guide-card { display: flex; flex-direction: column; gap: .6rem; padding: var(--pad); border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--paper); box-shadow: var(--elev-1); color: var(--text); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: var(--accent-line); }
.guide-card small { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.guide-card b { font-family: var(--font-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--text); }
.guide-card span { font-size: var(--fs-small); line-height: 1.55; color: var(--text-mid); }
.guide-card em { margin-top: auto; padding-top: .6rem; font-style: normal; font-size: var(--fs-cap); color: var(--text-muted); }

/* ── Questions fréquentes (page dédiée) ─────────────────────────────── */
.acc summary h3 { font: inherit; }
.faq-cols { display: grid; gap: var(--gap-lg); grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
.faq-cols > * { min-width: 0; }
.faq-nav { position: sticky; top: calc(var(--hdr-zone) + 1rem); display: grid; gap: .15rem; }
.faq-nav a { padding: .5rem .9rem; border-radius: 999px; text-decoration: none; color: var(--text-mid); font-size: var(--fs-small); font-weight: 500; transition: background-color .2s, color .2s; }
.faq-nav a:hover { background: var(--parchment); color: var(--text); }
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group h2 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 1rem; }

/* ── Contact et formulaires ─────────────────────────────────────────── */
.seg-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; margin-bottom: 1.5rem; border-radius: 1.5rem; background: var(--parchment); align-self: flex-start; }
.seg-tabs a { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.1rem; border-radius: 999px; font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--text-mid); transition: background-color .3s, color .3s; }
.seg-tabs a:hover { color: var(--text); }
.seg-tabs a.is-on { background: var(--paper); color: var(--text); box-shadow: var(--elev-1); }
.contact-side { display: grid; }
.contact-line { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--line-soft); }
.contact-line:first-child { border-top: 0; padding-top: 0; }
.contact-line > .ico { width: 2.75rem; height: 2.75rem; padding: .65rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.contact-line b { display: block; }
.contact-line a, .contact-line span { font-size: var(--fs-small); color: var(--text-mid); }
.contact-line a:hover { color: var(--accent); }
.form-picked { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: var(--fs-small); color: var(--text); }
.form-picked .ico { color: var(--accent); }
.direct { display: grid; gap: .6rem; padding-top: 1.5rem; border-top: 1px solid rgba(var(--on-ink-rgb), .14); }
.direct a { display: inline-flex; align-items: center; gap: .6rem; color: var(--on-ink); text-decoration: none; }
.direct a:hover { color: var(--accent-lift); }
.direct span { font-size: var(--fs-small); color: var(--on-ink-muted); }

/* Mesure d'audience : bandeau de consentement */
.cookie-bar { position: fixed; left: 50%; bottom: var(--edge); z-index: 400; width: min(40rem, calc(100vw - 2 * var(--edge))); transform: translateX(-50%); display: grid; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); background: var(--ink); color: var(--on-ink-mid); box-shadow: var(--elev-3); font-size: var(--fs-small); }
.cookie-bar[hidden] { display: none; }
.cookie-bar a { color: var(--accent-lift); }
.cookie-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.cookie-bar .btn { height: 2.75rem; padding-inline: 1.25rem; font-size: .9375rem; }

@media (max-width: 1024px) {
    .cat-layout, .fx-layout, .faq-cols { grid-template-columns: minmax(0, 1fr); }
    .cat-side, .faq-nav { position: static; }
    .cat-side details:not([open]) .facet-list { display: none; }
    .faq-nav { display: flex; flex-wrap: wrap; }
    .fx-aside { position: static; order: -1; }
    .fx-bar { display: flex; }
    body.has-bar { padding-bottom: 5rem; }
    .split-rev > :first-child { order: 0; }
    .ftr-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .callout { grid-template-columns: minmax(0, 1fr); }
    .fx-acts li { grid-template-columns: 1.4rem minmax(0, 1fr); }
    .fx-acts em { grid-column: 2; }
    .ftr-cols { grid-template-columns: minmax(0, 1fr); }
    .seg-tabs { border-radius: var(--radius-sm); }
}

/* ── Écrans redessinés (.ak-mock) ───────────────────────────────────── */
/* Composés à 560 px de large, puis mis à l'échelle par leur scène. */
.ak-mock {
    --m-side: var(--alt);
    width: 100%; border-radius: 16px; overflow: hidden;
    background: var(--paper); color: var(--text);
    box-shadow: var(--elev-3);
    font-size: 12px; line-height: 1.45; text-align: left;
}
.ak-mock * { font-size: inherit; }
.ak-mock b { color: var(--text); }
.mock-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; background: var(--parchment); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pale); }
.mock-bar span { margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: var(--paper); color: var(--text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-body { display: flex; min-height: 260px; }
.mock-side { flex: 0 0 26%; padding: 14px 10px; background: var(--m-side); color: var(--on-alt-mid); }
.ak-mock .mock-logo { display: block; margin-bottom: 12px; font-weight: 600; font-size: 12.5px; color: var(--on-alt); }
.mock-logo em { font-family: var(--font-serif); font-style: normal; font-weight: 400; color: var(--accent-lift); }
.mock-side li { padding: 6px 8px; border-radius: 8px; margin-bottom: 2px; font-size: 11px; }
.mock-side li.on { background: rgba(255, 255, 255, .1); color: var(--on-alt); font-weight: 600; }
.mock-main { flex: 1; min-width: 0; padding: 14px; background: var(--ground); display: grid; gap: 10px; align-content: start; }
.mock-center { justify-items: center; text-align: center; align-content: center; }
.mock-crumb { color: var(--text-muted); font-size: 10.5px; }
.mock-progress { height: 6px; border-radius: 6px; background: var(--sunken); overflow: hidden; }
.mock-progress span { display: block; height: 100%; background: var(--deco); border-radius: 6px; }
.mock-progress.sm { height: 5px; min-width: 60px; }
.mock-grid2 { display: grid; gap: 10px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.mock-plan { display: grid; gap: 4px; counter-reset: mp; }
.mock-plan li { padding: 7px 8px 7px 26px; border-radius: 8px; background: var(--paper); position: relative; color: var(--text-mid); }
.mock-plan li::before { counter-increment: mp; content: counter(mp); position: absolute; left: 9px; color: var(--text-muted); }
.mock-plan li.done { color: var(--text-muted); text-decoration: line-through; }
.mock-plan li.done::before { content: '✓'; color: var(--ok); }
.mock-plan li.now { background: var(--ink); color: var(--on-ink); }
.mock-plan li.now::before { color: var(--accent-lift); }
.mock-box { padding: 11px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-soft); box-shadow: var(--elev-1); display: grid; gap: 6px; align-content: start; }
.mock-tag { justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 10px; font-weight: 600; }
.mock-q, .mock-h { font-family: var(--font-serif); color: var(--text); line-height: 1.25; }
.ak-mock .mock-q { font-size: 14.5px; }
.ak-mock .mock-h { font-size: 19px; }
.ak-mock .mock-h.sm { font-size: 16px; }
.mock-opt { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); color: var(--text-mid); }
.mock-opt i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); }
.mock-opt.ok { border-color: rgba(62, 107, 99, .4); background: rgba(62, 107, 99, .07); }
.mock-opt.ok i { background: var(--ok); border-color: var(--ok); }
.mock-fb { padding: 6px 9px; border-radius: 8px; background: rgba(62, 107, 99, .1); color: var(--ok); }
.mock-gauge { position: relative; width: 70%; height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--ok), var(--deco), var(--danger)); margin: 6px 0 16px; }
.mock-gauge span { position: absolute; top: -4px; left: calc(var(--v) * 100%); width: 4px; height: 18px; border-radius: 3px; background: var(--ink); }
.ak-mock .mock-gauge em { position: absolute; top: 15px; left: calc(var(--v) * 100%); transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--text-mid); white-space: nowrap; }
.mock-list { display: grid; gap: 4px; width: 90%; }
.mock-list li { padding: 6px 9px; border-radius: 8px; background: var(--paper); color: var(--text-mid); text-align: left; }
.mock-list li.on::before { content: '+ '; color: var(--ok); }
.mock-list li.off { opacity: .45; text-decoration: line-through; }
.mock-btn { display: inline-block; justify-self: center; padding: 7px 15px; border-radius: 999px; background: var(--deco); color: var(--ink); font-weight: 600; }
.ak-mock .mock-btn.sm { padding: 5px 11px; font-size: 10.5px; }
.mock-btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.mock-chat { display: grid; gap: 6px; align-content: start; }
.mock-chat p { padding: 7px 10px; border-radius: 12px; max-width: 92%; }
.mock-chat .bot { background: var(--paper); color: var(--text-mid); border-bottom-left-radius: 3px; }
.mock-chat .me { justify-self: end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 3px; }
.mock-bar-h { display: grid; gap: 3px; }
.ak-mock .mock-bar-h b { font-weight: 600; font-size: 10.5px; }
.mock-bar-h span { display: block; height: 6px; border-radius: 6px; background: var(--deco); }
.mock-tip { padding: 6px 9px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-kpis div { padding: 9px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line-soft); }
.ak-mock .mock-kpis b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 20px; color: var(--accent); }
.ak-mock .mock-kpis span { color: var(--text-muted); font-size: 10.5px; }
.mock-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 10px; overflow: hidden; }
.mock-table th, .mock-table td { padding: 6px 9px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.ak-mock .mock-table th { font-weight: 600; color: var(--text-muted); font-size: 10px; }
.ak-mock .mock-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sunken); color: var(--text-mid); font-size: 10px; white-space: nowrap; }
.mock-pill.ok { background: rgba(62, 107, 99, .12); color: var(--ok); }
.mock-pill.warn { background: var(--accent-soft); color: var(--accent-deep); }
.mock-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 6px; }
.mock-doc { display: grid; gap: 6px; align-content: start; padding: 12px 10px; min-height: 180px; border-radius: 8px; background: var(--paper); box-shadow: var(--elev-2); }
.mock-doc i { display: block; height: 5px; border-radius: 4px; background: var(--sunken); }
.mock-doc i.short { width: 60%; }
.ak-mock .mock-sign { margin-top: auto; justify-self: start; padding: 2px 9px; border-radius: 999px; background: rgba(62, 107, 99, .12); color: var(--ok); font-size: 10px; }
.mock-obj { display: grid; gap: 3px; margin-top: 4px; }
.ak-mock .mock-obj em { font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--sunken); color: var(--text-muted); }
.ak-mock .mock-obj em.ok { background: rgba(62, 107, 99, .12); color: var(--ok); }
.mock-session { padding: 11px; border-radius: 12px; background: var(--ink); color: var(--on-ink-mid); display: grid; gap: 3px; }
.mock-session .mock-h { color: var(--on-ink); }
.mock-session .mock-tag { background: rgba(var(--accent-lift-rgb), .15); color: var(--accent-lift); }
.ak-mock .mock-meta { font-size: 10.5px; }
.mock-quote { padding: 6px 9px; border-radius: 8px; background: var(--parchment); color: var(--text-mid); font-style: italic; }
.mock-sig { display: flex; gap: 5px; margin: 4px 0 6px; }
.mock-sig i { width: 22px; height: 22px; border-radius: 50%; background: var(--sunken); }
.mock-sig i.ok { background: rgba(62, 107, 99, .25); }