/* ═══════════════════════════════════════════════════════════════════════════
   Kokoro — DA 2026 · feuille de style du site
   ───────────────────────────────────────────────────────────────────────────
   FICHIER GÉNÉRÉ par 04_Site/migrate-da2026.py — ne pas éditer à la main.
   Copie de 05_Brand/Design_System/ui_kits/website/site.css, avec :
     1. les chemins relatifs `../../assets/…` passés en absolus `/assets/…`,
        et les photographies en .webp ;
     2. les commentaires @interne retirés ;
     3. le bloc « compatibilité components.js » ajouté en fin de fichier.

   Toute évolution de style se fait DANS LE DESIGN SYSTEM, puis se régénère.
   Chargée après /assets/da-2026/tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Kokoro — kokoro-ai.fr · site.css
   Classes de sections réutilisables par toutes les pages du site.
   Charger APRÈS /assets/da-2026/tokens.css (tokens, fonts, base).
   Accent dominant du site : Blue #2782FF (var(--kokoro-blue)).
   Fonds autorisés : White / Soft Canvas / Black — jamais de dégradé.
   ══════════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--kokoro-white);color:var(--kokoro-black);font-family:var(--font-body);overflow-x:hidden}
/* video et iframe manquaient : les trois pages de ville portent une vidéo
   de 1280 px de large et une carte Google. Sans plafond, la vidéo sortait
   de la page à TOUTES les largeurs — 1348 px de défilement horizontal sur
   un écran de 375. */
img,svg,video,iframe{max-width:100%}
video{height:auto;display:block;border-radius:var(--radius-tile-sm)}
iframe{border:0}

:root{
  --site-max:1240px;
  --site-pad:clamp(20px,4vw,48px);
  --section-pad:clamp(72px,9vw,128px);
}

/* ── Structure ─────────────────────────────────────────────────────────── */
.container{max-width:var(--site-max);margin-inline:auto;padding-inline:var(--site-pad)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.section{padding-block:var(--section-pad)}
.section--canvas{background:var(--kokoro-soft-canvas)}
.section--black{background:var(--kokoro-black);color:var(--kokoro-white)}
[id]{scroll-margin-top:112px}

/* ── Rôles typographiques ──────────────────────────────────────────────── */
/* L'opacité de l'eyebrow n'est pas qu'un effet : en petites capitales de
   11 px, elle décide de la lisibilité. Mesuré le 28/08, l'encre à .5 tombait
   à 3,83 sur Soft Canvas — sous le seuil des petits textes. .58 la remonte à
   4,6 sans changer la nature du traitement. Même raison pour les deux
   libellés du footer, remontés de .45 et .38 à .5 (blanc sur noir). */
.eyebrow{display:block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;opacity:.58}
.section--black .eyebrow{color:var(--kokoro-white)}
.section-head{margin-bottom:clamp(40px,5vw,68px)}
.section-head .eyebrow{margin-bottom:18px}
.section-title{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.03em}
.section-title--sm{font-size:clamp(29px,3.6vw,44px)}

/* ── Boutons pilule (fills qui permutent, jamais de teinte) ────────────── */
.btn-pill{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:17px;line-height:1;padding:17px 30px;border-radius:var(--radius-pill);border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color 140ms linear,color 140ms linear}
/* Une pilule à libellé long — « Cadrer mes cas d'usage — 45 min offertes »,
   « Planifier mon diagnostic Claude Code » — ne tenait pas dans 375 px et
   poussait TOUTE la page en défilement horizontal. Le nowrap est bon sur les
   libellés courts du desktop ; sous 560 px, la pilule s'autorise deux lignes
   plutôt que de sortir de l'écran. */
.btn-pill{max-width:100%}
@media (max-width:560px){
  .btn-pill{white-space:normal;text-align:center}
}
.btn-pill--dark{background:var(--kokoro-black);color:var(--kokoro-white)}
.btn-pill--dark:hover{background:var(--kokoro-blue);color:var(--kokoro-white)}
.btn-pill--pink{background:var(--kokoro-pink);color:var(--kokoro-black)}
.btn-pill--pink:hover{background:var(--kokoro-black);color:var(--kokoro-white)}
.btn-pill--orange{background:var(--kokoro-orange);color:var(--kokoro-white)}
.btn-pill--orange:hover{background:var(--kokoro-black);color:var(--kokoro-white)}
.btn-pill--blue{background:var(--kokoro-blue);color:var(--kokoro-white)}
.btn-pill--blue:hover{background:var(--kokoro-black);color:var(--kokoro-white)}
.btn-pill--light{background:var(--kokoro-white);color:var(--kokoro-black)}
.btn-pill--light:hover{background:var(--kokoro-soft-canvas);color:var(--kokoro-black)}

/* ── Lien flèche (glyphe système, glisse de 4px au survol) ─────────────── */
.arrow-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:var(--weight-medium);font-size:17px;line-height:1.4;color:var(--kokoro-blue-link);text-decoration:none}
.arrow-link svg{width:19px;height:19px;flex-shrink:0;transition:transform 160ms linear}
.arrow-link svg path{fill:currentColor}
.arrow-link:hover{color:var(--kokoro-black)}
.arrow-link:hover svg{transform:translateX(4px)}
.arrow-link--lg{font-size:18px}

/* ── Nav flottante verre ───────────────────────────────────────────────── */
/* Le verre de la nav : blanc à 48 %, flou de 18 px. Les 48 % sont un
   plancher, pas un goût — c'est l'opacité minimale à laquelle l'encre noire
   des liens reste lisible quand une section NOIRE défile derrière : 4,92 sur
   1 pour un seuil de 4,5. À 40 % on tombe à 3,66, à 30 % à 2,46. La nav ne
   peut donc pas être rendue plus transparente sans devenir illisible. */
.site-nav-wrap{position:sticky;top:clamp(12px,2vw,22px);z-index:60;height:0;padding-inline:var(--site-pad)}
.site-nav{position:relative;max-width:var(--site-max);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 26px;border-radius:var(--radius-pill)}
/* Le verre de la barre vit sur un pseudo-élément : un backdrop-filter posé
   directement sur .site-nav ferait d'elle un « backdrop root » et le blur
   des panneaux déroulants ne verrait plus la page derrière (H1 net sous le
   verre — revue Simon 30/08). Même rendu, mais les enfants floutent vraiment. */
.site-nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius-pill);background:var(--surface-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow-glass-bar)}
.site-nav__logo img{height:30px;width:auto;display:block}
.site-nav__right{display:flex;align-items:center;gap:10px}
.site-nav__links{display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.site-nav__links > li > a{display:inline-block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:17px;line-height:1;color:var(--kokoro-black);padding:12px 18px;border-radius:var(--radius-pill);text-decoration:none;white-space:nowrap;transition:background-color 140ms linear,color 140ms linear}
.site-nav__links > li > a:hover{background:var(--kokoro-blue);color:var(--kokoro-white)}
.site-nav .btn-pill{font-size:15px;padding:13px 22px}

/* ── Sous-menus desktop — 100 % CSS (:hover / :focus-within) ───────────── */
/* .nav-menu = pont invisible (padding-top couvre l'espace barre→panneau),
   .nav-menu__panel = carte White plate, mêmes items que .nav-burger__panel. */
.nav-item{position:relative}
.nav-item--menu:hover > a,
.nav-item--menu:focus-within > a{background:var(--kokoro-blue);color:var(--kokoro-white)}
.nav-menu{position:absolute;left:-8px;top:100%;padding-top:22px;display:none;z-index:5}
.nav-item--menu:hover .nav-menu,
.nav-item--menu:focus-within .nav-menu{display:block}
.nav-menu__panel{min-width:236px;background:var(--surface-glass);backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);border-radius:var(--radius-tile-sm);box-shadow:var(--shadow-glass-bar);padding:10px;display:flex;flex-direction:column}
.nav-menu__panel a{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:16px;line-height:1.25;color:var(--kokoro-black);text-decoration:none;padding:13px 16px;border-radius:var(--radius-pill);white-space:nowrap;transition:background-color 140ms linear,color 140ms linear}
.nav-menu__panel a:hover,
.nav-menu__panel a:focus-visible{background:var(--kokoro-blue);color:var(--kokoro-white);outline:none}


.nav-burger{position:relative;display:none}
.nav-burger summary{list-style:none;cursor:pointer;display:inline-block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:15px;line-height:1;padding:12px 18px;border-radius:var(--radius-pill);border:1px solid var(--kokoro-black);color:var(--kokoro-black);user-select:none}
.nav-burger summary::-webkit-details-marker{display:none}
.nav-burger[open] summary{background:var(--kokoro-black);color:var(--kokoro-white)}
.nav-burger__panel{position:absolute;right:0;top:calc(100% + 12px);width:min(300px,calc(100vw - 2*var(--site-pad)));max-height:calc(100vh - 130px);overflow:auto;background:var(--surface-glass);backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);border-radius:var(--radius-tile-sm);box-shadow:var(--shadow-glass-bar);padding:10px;display:flex;flex-direction:column}
.nav-burger__panel a{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:16px;line-height:1.3;color:var(--kokoro-black);text-decoration:none;padding:11px 16px;border-radius:var(--radius-pill)}
.nav-burger__panel a:hover{background:var(--kokoro-blue);color:var(--kokoro-white)}
.nav-burger__label{display:block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-black);opacity:.58;padding:18px 16px 8px}
.nav-burger__panel .nav-burger__label:first-child{padding-top:8px}
.nav-burger__direct{margin-top:10px}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--kokoro-soft-canvas);padding-top:clamp(140px,16vw,196px);padding-bottom:clamp(120px,14vw,190px);text-align:center}
.hero-grid{position:relative;display:flex;flex-direction:column;align-items:center}
.hero h1{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(40px,6vw,84px);line-height:1.06;letter-spacing:-.045em}
.h1-capsule{display:inline-block;font-family:var(--font-editorial);font-weight:var(--weight-regular);font-size:.86em;line-height:1.14;letter-spacing:-.01em;background:var(--kokoro-blue);color:var(--kokoro-white);padding:.03em .36em .11em;border-radius:var(--radius-pill);vertical-align:-.05em}
.h1-capsule--orange{background:var(--kokoro-orange)}
.h1-capsule--green{background:var(--kokoro-green)}
.h1-capsule--violet{background:var(--kokoro-violet)}
.h1-capsule--pink{background:var(--kokoro-pink);color:var(--kokoro-black)}
.h1-capsule--lime{background:var(--kokoro-lime);color:var(--kokoro-black)}
.h1-block{display:inline-block;background:var(--kokoro-blue);color:var(--kokoro-white);padding:.02em .18em .06em;line-height:1.05;vertical-align:-.02em}
.hero-sub{margin:clamp(24px,3vw,36px) auto 0;font-size:clamp(17px,1.5vw,20.5px);line-height:1.62;color:var(--kokoro-muted);max-width:56ch}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,32px);margin-top:clamp(32px,4vw,48px);flex-wrap:wrap}
.hero-character{position:absolute;right:clamp(-90px,-6vw,-40px);bottom:clamp(-150px,-9vw,-95px);width:clamp(180px,19vw,290px);height:auto;display:block;transform:rotate(-8deg);pointer-events:none}

/* ── Bande logos clients ───────────────────────────────────────────────── */
.logos{padding-block:clamp(48px,6vw,76px);border-top:var(--stroke-hairline) solid var(--border-hairline);border-bottom:var(--stroke-hairline) solid var(--border-hairline)}
.logos .eyebrow{text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.logos-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:clamp(30px,4.5vw,58px);row-gap:22px;margin:0;padding:0;list-style:none}
/* .logo-item : nom en texte, à remplacer plus tard par <img> du vrai logo */
.logo-item{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(15px,1.3vw,17.5px);line-height:1;color:var(--kokoro-muted);white-space:nowrap}

/* ── Cartes d'offre ────────────────────────────────────────────────────── */
.offers-cta{margin-top:clamp(36px,4.5vw,58px);text-align:center}


/* ── Le cabinet — teaser 2 colonnes + photo masquée ────────────────────── */
.cabinet-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,92px);align-items:center}
.cabinet-copy .eyebrow{margin-bottom:18px}
.cabinet-copy p{margin:22px 0 0;font-size:17px;line-height:1.66;color:var(--kokoro-muted);max-width:54ch}
.cabinet-copy .arrow-link{margin-top:30px}
.photo-blob{width:100%;max-width:520px;height:auto;display:block;margin-inline:auto}

/* ── FAQ — accordéons natifs <details> ─────────────────────────────────── */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,90px);align-items:start}
.faq-head .eyebrow{margin-bottom:18px}
.faq-list{border-top:var(--stroke-hairline) solid var(--border-hairline)}
.faq-item{border-bottom:var(--stroke-hairline) solid var(--border-hairline)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(18px,2.4vw,26px) 0;cursor:pointer;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(17px,1.6vw,20px);line-height:1.32;letter-spacing:-.01em;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-icon{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--weight-regular);font-size:27px;line-height:1;transition:transform 180ms linear}
details[open] .faq-icon{transform:rotate(45deg)}
.faq-a{margin:0;padding:0 0 clamp(20px,2.4vw,28px);font-size:16px;line-height:1.66;color:var(--kokoro-muted);max-width:62ch}

/* ── Contact — formulaire statique ─────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,90px);align-items:start}
.contact-copy .eyebrow{margin-bottom:18px}
.contact-copy p{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--kokoro-muted);max-width:38ch}
.contact-character{width:clamp(76px,8vw,104px);height:auto;display:block;margin-top:clamp(28px,4vw,44px)}
.form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{width:100%;background:var(--kokoro-white);border:var(--stroke-hairline) solid var(--border-hairline);border-radius:var(--radius-input);padding:17px 28px;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--kokoro-black);outline:none;transition:border-color 140ms linear}
.field:focus{border-color:var(--kokoro-blue)}
textarea.field{border-radius:var(--radius-tile-sm);min-height:168px;resize:vertical;padding:21px 28px;display:block}
.form .btn-pill{justify-self:start;margin-top:6px;padding:17px 42px}
/* L'attribut `hidden` doit gagner sur TOUTE règle d'affichage.
   Sans cette ligne, `.form-done{display:flex}` bat le `[hidden]` du
   navigateur — même spécificité, mais une feuille d'auteur passe devant celle
   de l'agent utilisateur — et l'écran de confirmation « Merci, c'est bien
   parti » s'affiche en même temps que le formulaire vide. C'est la règle de
   base des normalisations ; elle manquait. */
[hidden]{display:none !important}

/* ── Formulaire : leurre, erreur, confirmation ──────────────────────────
   Le leurre (.form-trap) doit être invisible pour l'humain SANS être
   display:none : certains robots ignorent les champs masqués de cette façon.
   Il sort du flux, du parcours clavier (tabindex=-1) et des lecteurs d'écran
   (aria-hidden sur le conteneur). */
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* L'orange de la charte donne 2,92 sur blanc : sous ce message, l'envoi vient
   d'échouer et le visiteur doit pouvoir lire l'adresse de secours. On garde le
   signal orange, assombri de 30 % pour le seul état d'erreur — 5,50 sur blanc,
   4,56 sur Soft Canvas. Ce n'est PAS un accent de marque, c'est un état
   d'interface : la valeur reste locale et n'entre pas dans les tokens. */
.form-error{margin:14px 0 0;font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:#B24800}
.form-error a{color:inherit;text-decoration:underline}

/* Confirmation : elle prend la place du formulaire dans le même panneau, donc
   elle en reprend le rythme — eyebrow, titre display, texte, une seule pilule. */
.form-done{display:flex;flex-direction:column;align-items:flex-start}
.form-done__title{margin:14px 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(23px,2.2vw,30px);line-height:1.15;letter-spacing:-.025em;color:var(--kokoro-ink);outline:none}
.form-done__text{margin:14px 0 0;font-family:var(--font-body);font-size:16.5px;line-height:1.62;color:var(--kokoro-muted);max-width:38ch}
.form-done .btn-pill{margin-top:clamp(22px,2.6vw,30px)}

.form-rgpd{margin:2px 0 0;font-size:13px;line-height:1.55;color:var(--kokoro-muted)}

/* ── Footer ────────────────────────────────────────────────────────────── */
/* Trois niveaux : (a) wordmark + 3 colonnes de liens, (b) bloc SEO compact
   derrière un filet hairline, (c) barre légale. Fond Black, liens
   muted-cool → blanc au survol. */
.footer{position:relative;overflow:hidden;background:var(--kokoro-black);color:var(--kokoro-white);padding-block:clamp(60px,8vw,100px) clamp(28px,4vw,40px)}
.footer > *{position:relative}
.footer-mascotte{position:absolute;right:clamp(-90px,-4vw,-40px);bottom:clamp(-160px,-9vw,-90px);width:clamp(380px,34vw,600px);height:auto;transform:rotate(-14deg);opacity:.08;pointer-events:none}
.footer-mascotte path{fill:var(--kokoro-white)}
.footer-main{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);row-gap:44px;align-items:start}
.footer-wordmark{color:var(--kokoro-white)}
.footer-wordmark svg{height:26px;width:auto;display:block}
.footer-col__title{display:block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-white);opacity:.5;margin-bottom:20px}
.footer-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.footer-col a{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:15px;line-height:1.45;color:var(--kokoro-muted-cool);text-decoration:none;transition:color 140ms linear}
.footer-col a:hover{color:var(--kokoro-white)}

/* Bloc SEO — dense et sobre, mini-eyebrows + liens 13.5px qui wrappent */
.footer-seo{margin-top:clamp(44px,6vw,72px);padding-top:clamp(26px,3.4vw,38px);border-top:var(--stroke-hairline) solid color-mix(in srgb,var(--kokoro-white) 18%,transparent);display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.footer-seo__group{display:grid;grid-template-columns:clamp(88px,9vw,118px) minmax(0,1fr);column-gap:clamp(18px,2.5vw,34px);row-gap:8px;align-items:baseline}
.footer-seo__label{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:10.5px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--kokoro-white);opacity:.5;white-space:nowrap}
.footer-seo__links{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:clamp(16px,2vw,26px);row-gap:9px}
.footer-seo__links a{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:13.5px;line-height:1.5;color:var(--kokoro-muted-cool);opacity:.75;text-decoration:none;white-space:nowrap;transition:color 140ms linear,opacity 140ms linear}
.footer-seo__links a:hover{color:var(--kokoro-white);opacity:1}

/* Barre légale */
.footer-bottom{margin-top:clamp(32px,5vw,48px);padding-top:22px;border-top:var(--stroke-hairline) solid color-mix(in srgb,var(--kokoro-white) 18%,transparent);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--kokoro-muted-dark)}
.footer-legal{display:flex;gap:24px;flex-wrap:wrap}
.footer-bottom a{color:var(--kokoro-muted-cool);text-decoration:none;transition:color 140ms linear}
.footer-bottom a:hover{color:var(--kokoro-white)}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .cabinet-grid,.faq-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .cabinet-photo{order:2}
  .faq-head{margin-bottom:8px}
}
@media (max-width:960px){
  .footer-main{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:1080px){
  /* la barre complète (logo + 4 entrées + CTA) demande ~940px de contenu :
     sous 1080px les libellés wrappent — on passe au burger avant. */
  .site-nav__links{display:none}
  .nav-burger{display:block}
}
@media (max-width:780px){
  .footer-main{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .footer-seo__group{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .hero{padding-bottom:150px}
  .hero-character{width:112px;right:-30px;bottom:-26px;transform:rotate(-8deg)}
}
@media (max-width:700px){
  .hero-br{display:none}
}
@media (max-width:620px){
  .form-row{grid-template-columns:minmax(0,1fr)}
  .site-nav{padding:9px 10px 9px 18px}
  .site-nav__logo img{height:26px}
  .site-nav .btn-pill{font-size:14px;padding:12px 18px}
}

/* ══ Variante C — cas clients en mosaïque bento asymétrique ═══════════════
   
   Section prête à être copiée-collée telle quelle dans index.html. */


/* ── Base carte : à plat, radius token, pas d'ombre ── */

/* ── Clinitex — grande vedette bleue (accent dominant) ── */

/* ── Cartes chiffre : forme expressive + légende ── */

/* ── Pilliot — l'avant / après en pleine largeur ── */

/* ── Carte CTA — respiration noire, character + bouton ── */

/* ── Responsive ── */

/* ── Nos offres — éditorial numéroté coloré (variante C retenue le 26/08) ─ */
/* ══ Variante C — offres en liste éditoriale numérotée colorée ════════════
   Préfixe .ofv- : styles propres à la variante, ne pollue pas site.css.
   Section prête à être copiée-collée telle quelle dans index.html.
   Fond de section : White (neutre). La couleur vit dans les quatre formes
   numérotées — une couleur par offre, Blue en tête (accent dominant du
   site), Yellow / Lime / Orange en touches uniques, à la manière de la
   module gallery. Texte sur accent : blanc sur Blue et Orange, noir sur
   Yellow et Lime. */

.ofv-list{margin:0;padding:0;list-style:none;border-top:var(--stroke-hairline) solid var(--border-hairline)}

.ofv-row{
  display:grid;
  grid-template-columns:clamp(96px,10vw,132px) minmax(0,.9fr) minmax(0,1.1fr) auto;
  grid-template-areas:"num title desc link";
  align-items:center;
  column-gap:clamp(22px,3.4vw,56px);
  padding-block:clamp(24px,3vw,40px);
  border-bottom:var(--stroke-hairline) solid var(--border-hairline);
  transition:background-color 160ms linear;
}
.ofv-row:hover{background:var(--kokoro-soft-canvas)}

/* ── Forme numérotée (pattern module gallery : chiffre dans un container coloré) ── */
.ofv-shapecell{grid-area:num}
.ofv-shape{position:relative;width:100%}
.ofv-shape svg{display:block;width:100%;height:auto;transition:transform 180ms linear;transform-origin:50% 50%}
.ofv-row:hover .ofv-shape svg{transform:scale(1.07) rotate(-4deg)}
/* Le numéro passe en pastille dans le coin : la silhouette porte désormais
   une photo, un chiffre posé au centre par-dessus serait illisible. La
   pastille garde l'accent de l'offre — c'est lui qui code la couleur. */
/* L'accent de l'offre passe dans l'anneau de la pastille : la couleur
   code toujours l'offre, sans avoir à teinter la photo. */
.ofv-row:nth-of-type(1) .ofv-shape__num{--ofv-accent:var(--kokoro-blue)}
.ofv-row:nth-of-type(2) .ofv-shape__num{--ofv-accent:var(--kokoro-yellow)}
.ofv-row:nth-of-type(3) .ofv-shape__num{--ofv-accent:var(--kokoro-lime)}
.ofv-row:nth-of-type(4) .ofv-shape__num{--ofv-accent:var(--kokoro-orange)}
.ofv-shape__num{position:absolute;left:-6px;bottom:-6px;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding-inline:10px;border-radius:var(--radius-pill);background:var(--kokoro-black);color:var(--kokoro-white);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:15px;line-height:1;letter-spacing:-.01em;box-shadow:0 0 0 3px var(--kokoro-white),0 0 0 6px var(--ofv-accent,transparent)}

/* ── Titre, texte, lien ── */
.ofv-title{grid-area:title;margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(24px,2.8vw,38px);line-height:1.12;letter-spacing:-.02em;color:var(--kokoro-ink)}
.ofv-desc{grid-area:desc;margin:0;font-family:var(--font-body);font-size:16.5px;line-height:1.62;color:var(--kokoro-muted);max-width:52ch}
.ofv-link{grid-area:link;justify-self:end;white-space:nowrap;font-size:16px}
.ofv-row:hover .ofv-link svg{transform:translateX(4px)}

/* ── Responsive ── */
@media (max-width:980px){
  .ofv-row{
    grid-template-columns:clamp(80px,11vw,104px) minmax(0,1fr);
    grid-template-areas:
      "num title"
      "num desc"
      "num link";
    align-items:start;
    row-gap:12px;
    column-gap:clamp(20px,3.6vw,34px);
    padding-block:clamp(26px,4vw,36px);
  }
  .ofv-shapecell{align-self:center}
  .ofv-link{justify-self:start}
}
@media (max-width:560px){
  .ofv-row{
    grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:
      "num title"
      "desc desc"
      "link link";
    align-items:center;
    row-gap:14px;
    column-gap:18px;
    padding-block:26px;
  }
  .ofv-title{font-size:clamp(21px,5.6vw,24px)}
  .ofv-shape__num{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .ofv-shape svg,.ofv-row{transition:none}
  .ofv-row:hover .ofv-shape svg{transform:none}
}

/* ══ Variante C2 — bento « photo pleine carte » ═══════════════════════════
   Évolution du bento C : la photographie prend le pouvoir. La carte vedette
   Clinitex devient une photo full-bleed (people-03, grand mur blanc calme à
   droite) avec le 150 géant posé en noir directement sur le mur — aucun
   scrim, aucun dégradé. Sous 640px le cadrage se resserre : le bloc chiffre
   passe alors en badge verre (--surface-glass + --shadow-glass-badge), la
   seule élévation autorisée du système. Une seconde photo, masquée dans la
   silhouette organique (pattern PhotoBlob), équilibre la colonne droite.
   Les cartes stats passent sur accents plats francs :
   Blue dominant (Pilliot), Yellow et Green en touches uniques. Young Serif
   
   site.css. */


/* ── Base carte : à plat, radius token, pas d'ombre ── */

/* ── Clinitex — la photo pleine carte, le chiffre posé sur le mur calme ── */

/* ── Chiffres plats : le nombre vit directement sur l'accent ── */

/* ── Carte agence — Yellow franc, texte noir ── */

/* ── Photo blob — l'équilibre de la colonne droite (silhouette organique) ── */

/* ── Pilliot — Blue dominant, l'avant / après ── */

/* ── Dynabuy — Green franc, texte noir ── */

/* ── Carte CTA — respiration noire, character + bouton ── */

/* ── Responsive ── */
@media (max-width:640px){
  /* Le cadrage serré ne garantit plus le mur calme : le bloc chiffre passe
     en badge verre — recette système, pas un scrim. */
  /* Badge en haut : il recouvre le plafond, la personne reste visible en bas. */
}

/* ── Contact — panneau sur photographie (adopté le 26/08) ────────────── */
/* ══ Contact — formulaire sur photographie ════════════════════════════════
   Pattern du brand book « white panel over full-bleed photography » (comme
   la section Adoption de l’ancien site) : la photographie architecture-02
   (murs terracotta, puits de ciel bleu — chaleureuse et calme) occupe toute
   la section ; le formulaire vit dans un panneau White plat (--radius-panel)
   posé dessus, sans ombre ; le bloc titre se pose directement sur la photo,
   en blanc sur la zone calme des murs (aucun scrim, aucun dégradé).
   Le character passe en blanc (encre blanche, clin d’œil noir), recoloration
   canonique du composant Expression. Champs et textes identiques à la
   section contact d’index.html. Préfixe .cnt- : ne pollue pas site.css. */

.cnt-section{
  background-color:var(--kokoro-black); /* fond de secours avant chargement */
  background-image:url("/assets/photography/architecture-02.webp");
  background-repeat:no-repeat;
  /* Cadrage ancré en bas à gauche, piloté par la LARGEUR (175% auto) :
     le bandeau rose et le puits de ciel restent au-dessus du bloc titre,
     qui se pose sur la zone calme du mur terracotta sombre. Le zoom suit
     la largeur du viewport plus vite que la dérive du container centré :
     le titre reste sur le mur sombre à toutes les largeurs (vérifié au
     rendu 1024 / 1440 / 2000 / 2560 px ; ne pas repasser en auto NN% ni
     en cover — le dézoom fait descendre le bandeau rose sous le titre). */
  background-size:175% auto;
  background-position:0% 100%;
  padding-block:clamp(84px,10vw,148px);
}

/* Deux colonnes ancrées en bas : le titre s’assoit sur les murs terracotta
   (zone calme sombre → blanc lisible), le ciel respire au-dessus. */
.cnt-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(36px,6vw,96px);
  align-items:center; /* revue 30/08 : copie et panneau à la même hauteur */
}

/* ── Bloc titre, en blanc sur la photo ── */
.cnt-copy{color:var(--kokoro-white);padding-bottom:clamp(4px,1.2vw,18px)}
.cnt-copy .eyebrow{color:var(--kokoro-white);opacity:.68;margin-bottom:18px}
.cnt-title{color:var(--kokoro-white)}
.cnt-copy p{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--kokoro-white);max-width:38ch}

/* Character en blanc — encre blanche, clin d’œil (highlight) noir ;
   l’œil rond gauche reste un évidement qui laisse voir la photo. */
.cnt-character{width:clamp(84px,9vw,116px);height:auto;display:block;margin-top:clamp(30px,4.5vw,52px)}

/* ── Panneau blanc plat posé sur la photo ── */
.cnt-panel{
  background:var(--surface-panel);
  border-radius:var(--radius-panel);
  padding:clamp(28px,3.6vw,52px);
}

/* ── Responsive ── */
@media (max-width:900px){
  /* Une colonne : le titre passe au-dessus du panneau. La photo est
     recadrée (zoom CSS, pas de scrim) sur le bas du mur terracotta :
     zone unie et sombre → le bloc titre blanc reste lisible partout. */
  .cnt-section{background-size:auto 240%;background-position:0% 100%}
  .cnt-grid{grid-template-columns:minmax(0,1fr);gap:44px;align-items:start}
  .cnt-copy{padding-bottom:0}
  .cnt-character{width:88px;margin-top:28px}
  .cnt-panel{padding:clamp(24px,5.5vw,40px)}
}

/* ══ Variante C2v2 — bento « photo pleine carte », direction chaleur humaine ══
   Même structure que la C2 retenue (vedette photo full-bleed + cartes aplats +
   PhotoBlob + carte CTA character), palette et photographies réchauffées.
   Vedette : people-01 — deux collègues qui rient ensemble, tablette à la main,
   dans un espace chaleureux (pull vert, canapé rose, cuisine jaune moutarde).
   Le 150 géant se pose en noir sur le pan de placards moutarde, zone calme à
   droite du cadre — aucun scrim, aucun dégradé. Sous 640px le bloc chiffre
   passe en badge verre (--surface-glass + --shadow-glass-badge), seule
   élévation autorisée du système.
   Quatuor d'aplats gai et chaud : Orange dominant (Pilliot), Green et Yellow
   en touches uniques (agence, Dynabuy), Soft Canvas pour la carte CTA — la
   carte verte répond au pull vert de la vedette, le chip orange (demande
   Simon) annonce la carte Orange. La photo secondaire (PhotoBlob) devient
   nature-05, coquelicots orange sur vert : elle relie la vedette aux aplats.
   Texte : noir sur Yellow/Green/Soft Canvas, blanc sur Orange (règle charte).
   Young Serif réservé au « 15 min » en capsule blanche.


/* ── Base carte : à plat, radius token, pas d'ombre ── */

/* ── Clinitex — la photo pleine carte, le chiffre posé sur les placards moutarde ── */
/* object-position 100% : aux très grandes largeurs (≥1240, seul régime où la
   photo déborde horizontalement) l'image se cale à droite — la chevelure
   sombre recule et le pan moutarde s'élargit sous le chiffre. */
/* Le bloc chiffre est calé près du bord droit pour rester entièrement sur le
   pan de placards moutarde, à distance de la chevelure sombre (la plante et
   la desserte vivent en bas à droite du cadre) — vérifié au rendu 1120 /
   1240 / 1440 px. */
/* Chip orange — demande Simon ; il annonce l'accent dominant de la rangée basse. */

/* ── Chiffres plats : le nombre vit directement sur l'accent ── */

/* ── Carte agence — Green franc, texte noir : répond au pull vert de la vedette ── */

/* ── Photo blob — coquelicots orange sur vert (silhouette organique) ── */

/* ── Pilliot — Orange dominant, l'avant / après, texte blanc (règle charte) ── */

/* ── Dynabuy — Yellow franc, texte noir ── */

/* ── Carte CTA — respiration Soft Canvas, character noir + bouton ── */

/* ── Responsive ── */
@media (max-width:640px){
  /* Le cadrage serré ne garantit plus la zone calme : le bloc chiffre passe
     en badge verre — recette système, pas un scrim. */
  /* Badge en bas : il recouvre le canapé ; le visage rieur au pull vert
     reste visible en haut du cadre (le cadrage 38% sort l'autre visage). */
}

/* ── Cas clients — témoignage + stats logotées (retenue le 27/08) ──────── */
/* ══ Cas clients — variante « témoignage » (référence Eskimoz, DA Kokoro) ══
   Rangée de 3 cartes : une grande carte témoignage White (logo, citation,
   portrait full-bleed dans sa zone droite), une carte stat Sky, une carte
   stat Blue — puis un lien centré sous la rangée.
   Fond de section : Black. Deux raisons : (1) la home garde son rythme
   Soft Canvas → White → Black → Soft Canvas, la section reste un drop-in
   d'index.html ; (2) les cartes Kokoro sont posées à plat, sans ombre ni
   bordure — sur White, la carte témoignage blanche disparaîtrait ; sur
   Black, le trio White / Sky / Blue existe de lui-même, en luminosité
   décroissante comme la référence (blanche / claire / sombre).
   Accent dominant : Blue (carte Pilliot) ; Sky en touche de la même
   famille (carte agence) ; le portrait terracotta (people-09) apporte la
   chaleur humaine sur la carte blanche.
   Logos clients : SVG monochromes appliqués en masque CSS (technique
   logo-band) — la couleur vient du background-color, noir sur White et
   Sky, blanc sur Blue.
   Young Serif en parcimonie : le guillemet ouvrant géant de la citation
   (ornement) et la capsule « 15 min ». Texte noir sur Sky, blanc sur Blue
   (règles charte). Aucune ombre, aucun dégradé, aucun JS.
   Préfixe .cas4- : styles propres à la variante, ne pollue pas site.css. */

.cas4-row{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,1.8vw,22px);
  align-items:stretch;
}

/* ── Base carte : à plat, radius token, pas d'ombre ── */
.cas4-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--radius-tile-sm);padding:clamp(24px,2.6vw,36px)}

/* ── Logos monochromes en masque CSS (technique logo-band) ──
   Boîtes sources hauteur 100 ; --w = largeur de boîte, d'où la largeur
   d'affichage. La teinte vient du background-color, pas du fichier. */
.cas4-logo{
  flex:0 0 auto;
  height:calc(var(--h) * 1px);
  width:calc(var(--h) * var(--w) / 100 * 1px);
  max-width:100%;
  background-color:var(--kokoro-black);
  -webkit-mask:var(--src) left center/contain no-repeat;
          mask:var(--src) left center/contain no-repeat;
}
.cas4-logo--clinitex{--h:40;--w:205.24;--src:url(/assets/logos/mono/clinitex.svg)}
.cas4-logo--pilliot{--h:40;--w:223.47;--src:url(/assets/logos/mono/pilliot.svg);background-color:var(--kokoro-white)}
.cas4-logo--buro{--h:40;--w:181.28;--src:url(/assets/logos/mono/buro.svg)}
.cas4-logo--dynabuy{--h:35;--w:229.28;--src:url(/assets/logos/mono/dynabuy.svg)}
.cas4-logo--derbi{--h:35;--w:292.03;--src:url(/assets/logos/mono/derbi.svg)}
.cas4-logo--chateauform{--h:28;--w:470;--src:url(/assets/logos/mono/chateauform.svg)}
/* Quatre logos ajoutés le 30/08 pour l'index de /cas-clients. Les --w sont
   les largeurs de boîte calibrées de logo-band.css ; les --h suivent la
   règle d'œil des voisins : 34 pour les boîtes ~200-225, 30 au-delà. */
.cas4-logo--onemice{--h:35;--w:260.97;--src:url(/assets/logos/mono/onemice.svg)}
.cas4-logo--wba{--h:40;--w:204.33;--src:url(/assets/logos/mono/wba.svg)}
.cas4-logo--assemble{--h:35;--w:273.28;--src:url(/assets/logos/mono/assemble.svg)}
.cas4-logo--affective{--h:35;--w:265.86;--src:url(/assets/logos/mono/affective.svg)}

/* ── Client non nommé ───────────────────────────────────────────────────
   Un client qui n'a pas autorisé la citation de son nom garde sa carte : la
   ligne de secteur prend la place exacte du logo, sur la même hauteur de
   boîte, pour que la composition ne paraisse pas amputée à côté des cartes
   logotées. Traitement eyebrow assumé — le libellé désigne une catégorie, il
   ne doit pas se lire comme une raison sociale.

   La couleur est posée EXPLICITEMENT par contexte. La première version la
   laissait hériter de la carte — mais .cas4-card ne déclare pas de `color`,
   et la grille est posée dans une section noire : sur la carte Sky, le
   libellé héritait donc du blanc de la section, à 62 % d'opacité, soit un
   contraste de 1,6 sur 1. Illisible, et contraire à la charte, qui veut la
   carte Sky en encre noire. */
.cas4-anon{
  display:flex;align-items:center;
  min-height:calc(var(--h,28) * 1px);
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  font-size:12.5px;line-height:1.2;letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.62;
}
/* Sur fond noir d'abord, Sky ENSUITE : la carte Sky est posée DANS une
   section noire, les deux sélecteurs ont le même poids, et c'est donc le
   dernier écrit qui gagne. Les intervertir remettrait le libellé en blanc
   sur Sky. */
.off-proof__card .cas4-anon,.section--black .cas4-anon{color:var(--kokoro-white)}
/* Sur Sky, l'opacité de l'eyebrow coûte trop cher : à .62 le noir tombe à
   4,39 sur 1, sous le seuil des petits textes. .7 le remonte à 5,8 sans
   changer la nature du traitement. */
.section--black .cas4-sky .cas4-anon,.cas4-sky .cas4-anon{color:var(--kokoro-black);opacity:.7}

/* ── Lien « Découvrir le cas client » — Sen Medium + flèche du système ── */
.cas4-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:16px;line-height:1.3;color:var(--kokoro-blue-link);text-decoration:none;align-self:flex-start}
.cas4-link svg{width:18px;height:18px;flex-shrink:0;transition:transform 160ms linear}
.cas4-link svg path{fill:currentColor}
.cas4-link:hover svg{transform:translateX(4px)}
.cas4-link:hover{color:var(--kokoro-black)}
.cas4-link--onsky{color:var(--kokoro-black)}
.cas4-link--onsky:hover{color:var(--kokoro-black)}
.cas4-link--onblue{color:var(--kokoro-white)}
.cas4-link--onblue:hover{color:var(--kokoro-white)}

/* ── Carte témoignage Clinitex — White, portrait full-bleed à droite ── */
.cas4-cli{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.75fr);
  padding:0;
  background:var(--kokoro-white);
  border-radius:var(--radius-panel);
  overflow:hidden;
  min-height:clamp(400px,34vw,480px);
}
.cas4-cli__body{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,3.2vw,46px)}
.cas4-cli__body .cas4-logo{margin-bottom:clamp(22px,2.6vw,36px)}
/* Guillemet ouvrant géant — Young Serif en ornement (il ouvre la citation,
   le guillemet fermant reste dans le fil du texte). */
.cas4-mark{display:block;font-family:var(--font-editorial);font-weight:var(--weight-regular);font-size:clamp(52px,4.6vw,72px);line-height:.4;color:var(--kokoro-blue);margin-bottom:clamp(10px,1.2vw,16px)}
.cas4-quote{margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(18px,1.65vw,22.5px);line-height:1.44;letter-spacing:-.015em;color:var(--kokoro-ink);max-width:30ch}
.cas4-quote p{margin:0}
.cas4-quote .cas4-mark-close{font-family:var(--font-editorial);color:var(--kokoro-blue)}
.cas4-attrib{margin:clamp(14px,1.6vw,20px) 0 0;font-family:var(--font-body);font-weight:var(--weight-regular);font-size:15px;line-height:1.5;color:var(--kokoro-muted)}
.cas4-cli__body .cas4-link{margin-top:auto;padding-top:clamp(20px,2.4vw,30px)}
/* Portrait — full-bleed dans sa zone, cadré sur le visage et le pull
   terracotta (zone chaude et calme de people-09). */
.cas4-cli__photo{position:relative;min-height:100%;overflow:hidden}
.cas4-cli__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:63% 22%}

/* ── Carte stat agence — Sky, texte et logo noirs (règle charte) ── */
.cas4-sky{background:var(--kokoro-sky)}
/* ── Carte stat neutre — Soft Canvas. Était un style="" sur À propos. ── */
.cas4-canvas{background:var(--kokoro-soft-canvas)}
/* ── Carte stat Pilliot — Blue, texte et logo blancs (règle charte) ── */
.cas4-pil{background:var(--kokoro-blue)}

/* Liens des cartes stat : une seule ligne, taille fluide pour tenir dans la
   colonne étroite entre 1081 et 1240 px. */
.cas4-sky .cas4-link,.cas4-pil .cas4-link{white-space:nowrap;font-size:clamp(13.5px,1.2vw,15px)}
.cas4-sky .cas4-link svg,.cas4-pil .cas4-link svg{width:16px;height:16px}

.cas4-stat{margin-top:auto;padding-top:clamp(18px,2vw,28px)}
.cas4-stat__num{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(76px,7.6vw,118px);line-height:.95;letter-spacing:-.05em;color:var(--kokoro-black)}
.cas4-stat__label{margin:clamp(10px,1.2vw,16px) 0 0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(16.5px,1.5vw,19px);line-height:1.35;letter-spacing:-.01em;color:var(--kokoro-black);max-width:17ch}
.cas4-card .cas4-link{margin-top:clamp(20px,2.4vw,30px)}
/* Phrase de contexte sous le chiffre d'une carte stat. Elle vivait en
   style="" sur les trois cartes de la page À propos — trois fois la même
   déclaration, avec deux opacités différentes pour la même intention. Sur
   Blue, l'opacité était en plus payée deux fois : le blanc n'y donne déjà
   que 3,67, et .8 le ramenait à 2,89. Elle saute là où le fond est un
   accent. */
.cas4-card__note{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--kokoro-black);opacity:.75}
.cas4-pil .cas4-card__note{color:var(--kokoro-white);opacity:1}

/* Avant / après Pilliot — « 15 min » en capsule Young Serif blanche */
.cas4-pil .cas4-stat__label{color:var(--kokoro-white)}
.cas4-pil__row{display:flex;align-items:center;flex-wrap:wrap;column-gap:clamp(10px,1.1vw,16px);row-gap:10px}
.cas4-pil__from{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(34px,3.2vw,46px);line-height:1;letter-spacing:-.04em;color:var(--kokoro-white);white-space:nowrap}
.cas4-pil__arrow{width:clamp(20px,2vw,26px);height:auto;flex-shrink:0;color:var(--kokoro-white)}
.cas4-pil__arrow path{fill:currentColor}
.cas4-pil__to{display:inline-block;background:var(--kokoro-white);color:var(--kokoro-black);font-family:var(--font-editorial);font-weight:var(--weight-regular);font-size:clamp(28px,2.8vw,40px);line-height:1.1;letter-spacing:-.01em;padding:.06em .5em .18em;border-radius:var(--radius-pill);white-space:nowrap}

/* ── Lien centré sous la rangée — blanc sur Black (le hover Blue→noir du
   .arrow-link site serait invisible ici) ── */
.cas4-more{margin-top:clamp(36px,4.5vw,58px);text-align:center}
.cas4-more .cas4-link{align-self:auto;font-size:17.5px;color:var(--kokoro-white)}
.cas4-more .cas4-link:hover{color:var(--kokoro-white)}
.cas4-more .cas4-link svg{width:19px;height:19px}

/* ── Responsive ── */
@media (max-width:1080px){
  .cas4-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cas4-cli{grid-column:1 / -1;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:clamp(360px,44vw,440px)}
  /* Zone photo large : à ce ratio la quasi-totalité de l'image est visible —
     on resserre le cadrage (zoom + origine sur le visage) pour que le logo
     constructeur de la tablette sorte du champ. */
  .cas4-cli__photo img{object-position:63% 8%;transform:scale(1.4);transform-origin:63% 8%}
  .cas4-quote{max-width:32ch}
  .cas4-sky .cas4-link,.cas4-pil .cas4-link{font-size:15.5px}
  .cas4-sky .cas4-link svg,.cas4-pil .cas4-link svg{width:18px;height:18px}
}
@media (max-width:640px){
  .cas4-row{grid-template-columns:minmax(0,1fr)}
  .cas4-cli{grid-column:auto}
  /* La carte témoignage passe en pile : le texte d'abord, le portrait en
     bandeau plein bord en bas de carte. */
  .cas4-cli{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0}
  .cas4-cli__photo{min-height:min(78vw,300px)}
  /* Même resserrage qu'au palier précédent : le bandeau cadre le visage et
     le pull, la tablette reste hors champ. */
  .cas4-cli__photo img{object-position:60% 6%;transform:scale(1.35);transform-origin:60% 6%}
  .cas4-stat__num{font-size:clamp(64px,17vw,84px)}
  .cas4-pil__from{font-size:clamp(30px,8.5vw,38px)}
  .cas4-pil__to{font-size:clamp(25px,7vw,33px)}
}
@media (prefers-reduced-motion:reduce){
  .cas4-link svg{transition:none}
  .cas4-link:hover svg{transform:none}
}

/* Pilliot — bandeau photo en pied de carte (placeholder en attendant la vraie photo) */
.cas4-pil__photo{margin:clamp(18px,2vw,26px) calc(-1*clamp(24px,2.6vw,36px)) calc(-1*clamp(24px,2.6vw,36px));height:clamp(150px,14vw,200px);overflow:hidden;border-radius:0 0 var(--radius-tile-sm) var(--radius-tile-sm)}
.cas4-pil__photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}

/* Mention Qualiopi (conforme : partenariat, pas de logo sans certification propre) */
.footer-qualiopi{margin:clamp(28px,4vw,40px) 0 0;font-size:13.5px;line-height:1.6;color:var(--kokoro-muted-dark);max-width:70ch}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES OFFRE — rail commun aux 4 pages (préfixe .off-)
   ══════════════════════════════════════════════════════════════════════════

   Une seule structure sert les quatre pages d'offre (Formations, Audit,
   Déploiement, Développement). Ce qui change d'une page à l'autre :
   le contenu, et UNE variable — l'accent de l'offre, repris de la couleur
   qui numérote cette offre sur la home.

       <body class="offre offre--audit">

   L'accent ne remplace pas le Blue du site : il ne colore que la signature
   de la page (pastille du badge, capsule du H1, formes du déroulé, chips
   « Inclus », colonne Kokoro du comparatif). Les liens restent Blue,
   les boutons restent les pilules du système.

   Le reste du rail réutilise l'existant sans nouvelle CSS : .ofv- pour le
   cross-sell « Les autres offres », .faq- pour la FAQ, .cnt- pour le CTA
   final sur photographie, .footer- pour le pied de page. */

.offre{--offer-accent:var(--kokoro-blue);--offer-on-accent:var(--kokoro-white)}
.offre--formation{--offer-accent:var(--kokoro-blue);--offer-on-accent:var(--kokoro-white)}
.offre--audit{--offer-accent:var(--kokoro-yellow);--offer-on-accent:var(--kokoro-black)}
.offre--deploiement{--offer-accent:var(--kokoro-lime);--offer-on-accent:var(--kokoro-black)}
.offre--developpement{--offer-accent:var(--kokoro-orange);--offer-on-accent:var(--kokoro-white)}

/* ── 1 · Hero offre ─────────────────────────────────────────────────────
   Deux colonnes, texte à gauche : la home est centrée, les pages d'offre
   sont alignées à gauche — la hiérarchie se lit dès le premier écran. */
.off-hero{position:relative;overflow:hidden;background:var(--kokoro-soft-canvas);padding-top:clamp(126px,13vw,178px);padding-bottom:clamp(54px,6.5vw,84px)}
.off-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,76px);align-items:center}

.off-badge{display:inline-flex;align-items:center;gap:10px;background:var(--kokoro-white);border-radius:var(--radius-pill);padding:9px 19px 10px;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:14.5px;line-height:1.2;color:var(--kokoro-black)}
.off-badge::before{content:"";flex-shrink:0;width:9px;height:9px;border-radius:var(--radius-pill);background:var(--offer-accent)}

.off-hero h1{margin:clamp(22px,2.6vw,34px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(33px,4.4vw,60px);line-height:1.07;letter-spacing:-.04em}
/* Capsule Young Serif — un seul mot par page, comme sur la home. */
.off-hero .h1-capsule{background:var(--offer-accent);color:var(--offer-on-accent,var(--kokoro-white))}
.off-hero__lead{margin:clamp(20px,2.4vw,30px) 0 0;font-size:clamp(16.5px,1.4vw,19px);line-height:1.62;color:var(--kokoro-muted);max-width:52ch}
.off-hero__cta{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);margin-top:clamp(26px,3.2vw,38px);flex-wrap:wrap}
.off-hero__note{margin:clamp(18px,2.2vw,26px) 0 0;font-size:13.5px;line-height:1.55;color:var(--kokoro-muted);max-width:46ch}

/* Visuel : photographie masquée dans la silhouette de l'offre + capsule
   posée en débord. La silhouette est celle qui numérote l'offre sur la
   home (organic / blossom / cercle / scallop) — le lien home → page. */
.off-hero__art{position:relative;justify-self:center;width:100%;max-width:440px}
.off-hero__art svg{display:block;width:100%;height:auto}
.off-hero__chip{position:absolute;left:-4%;bottom:6%;display:flex;flex-direction:column;gap:2px;background:var(--offer-accent);color:var(--offer-on-accent,var(--kokoro-white));border-radius:var(--radius-pill);padding:15px 26px 17px}
.off-hero__chip b{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(17px,1.6vw,21px);line-height:1.1;letter-spacing:-.02em}
/* Sans opacité : le blanc sur Blue ne vaut déjà que 3,67, et .78 le
   ramenait à 2,82. La hiérarchie entre le chiffre et sa précision est déjà
   portée par la taille et la graisse. */
.off-hero__chip span{font-family:var(--font-body);font-size:13px;line-height:1.35}

/* ── 2 · Barre de confiance ─────────────────────────────────────────────
   Les chiffres de l'offre, tenus par des filets. Jamais plus de quatre :
   au-delà, plus aucun ne se retient. */
.off-trust{border-bottom:var(--stroke-hairline) solid var(--border-hairline);padding-block:clamp(34px,4vw,52px)}
.off-trust__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.off-trust__item{padding-inline:clamp(14px,2.4vw,34px);border-left:var(--stroke-hairline) solid var(--border-hairline)}
.off-trust__item:first-child{padding-left:0;border-left:0}
.off-trust__num{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(28px,3.2vw,44px);line-height:1.02;letter-spacing:-.045em;color:var(--kokoro-black)}
.off-trust__label{display:block;margin-top:10px;font-family:var(--font-body);font-size:14.5px;line-height:1.45;color:var(--kokoro-muted);max-width:22ch}

/* ── 3 · En quoi ça consiste ────────────────────────────────────────────
   Deux colonnes : la définition à gauche en trois points, une
   photographie masquée (pattern PhotoBlob) à droite. */
.off-intro-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(36px,6vw,88px);align-items:center}
.off-intro-photo{min-width:0} /* cellule illustration de la grille intro (hook sémantique) */
.off-intro-copy p{margin:22px 0 0;font-size:17px;line-height:1.66;color:var(--kokoro-muted);max-width:52ch}
.off-points{margin:clamp(28px,3.4vw,40px) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px)}
.off-point{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
.off-point__dot{flex-shrink:0;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--offer-accent);color:var(--offer-on-accent,var(--kokoro-white));display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:13.5px;line-height:1}
.off-point b{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:17.5px;line-height:1.3;letter-spacing:-.01em;color:var(--kokoro-ink)}
/* Le texte de description, et LUI SEUL. La règle visait `.off-point span`,
   or la puce numérotée est elle aussi un <span> : avec une spécificité
   supérieure (0,1,1 contre 0,1,0), elle lui imposait display:block,
   font-size:16px et line-height:1.6. Résultat : place-items:center ne
   s'appliquait plus, le chiffre se collait en haut à gauche du rond et la
   puce descendait de 6 px sous son titre. Le sélecteur descend d'un cran
   dans l'arbre — la description vit dans le <div>, pas la puce. */
.off-point div span{display:block;margin-top:6px;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--kokoro-muted);max-width:44ch}

/* ── 4 · Le déroulé ─────────────────────────────────────────────────────
   Même grammaire que les offres de la home (.ofv-) : une forme numérotée
   par étape, des rangées séparées par des filets. La colonne « quand »
   (J1–J2, Phase 1, Semaine 2…) est ce qui distingue ce bloc de la home. */
.off-steps{margin:0;padding:0;list-style:none;border-top:var(--stroke-hairline) solid var(--border-hairline)}
.off-step{display:grid;grid-template-columns:clamp(84px,8.6vw,116px) minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"num head desc";align-items:center;column-gap:clamp(22px,3.4vw,54px);padding-block:clamp(24px,3vw,40px);border-bottom:var(--stroke-hairline) solid var(--border-hairline);transition:background-color 160ms linear}
.off-step:hover{background:var(--kokoro-soft-canvas)}
.off-step__shapecell{grid-area:num}
.off-step__shape{position:relative;width:100%}
.off-step__shape svg{display:block;width:100%;height:auto;transition:transform 180ms linear;transform-origin:50% 50%}
.off-step:hover .off-step__shape svg{transform:scale(1.07) rotate(-4deg)}
.off-step__shape svg path{fill:var(--offer-accent)}
/* Rythme couleur du déroulé : la 1re forme porte l'accent de la page, les
   suivantes empruntent au spectre SANS reprendre les couleurs des trois
   autres offres (Blue / Lime / Orange) — sinon le lecteur croit lire un
   renvoi vers une autre offre. Retirer les modificateurs = déroulé
   monochrome à l'accent de la page. */
.off-step__shape--sky svg path{fill:var(--kokoro-sky)}
.off-step__shape--green svg path{fill:var(--kokoro-green)}
.off-step__shape--violet svg path{fill:var(--kokoro-violet)}
.off-step__shape--pink svg path{fill:var(--kokoro-pink)}
.off-step__shape--sky .off-step__num,
.off-step__shape--pink .off-step__num{color:var(--kokoro-black)}
.off-step__shape--green .off-step__num,
.off-step__shape--violet .off-step__num{color:var(--kokoro-white)}
.off-step__num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(26px,2.8vw,36px);line-height:1;letter-spacing:-.05em;color:var(--offer-on-accent,var(--kokoro-white))}
.off-step__head{grid-area:head}
.off-step__when{display:block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;opacity:.58;margin-bottom:12px}
.off-step__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(21px,2.2vw,30px);line-height:1.14;letter-spacing:-.02em;color:var(--kokoro-ink)}
.off-step__desc{grid-area:desc;margin:0;font-family:var(--font-body);font-size:16.5px;line-height:1.62;color:var(--kokoro-muted);max-width:54ch}

/* ── 5 · Ce que vous recevez ────────────────────────────────────────────
   Quatre cartes à plat. Chaque carte porte une méta chiffrée : c'est elle
   qui rend le livrable vérifiable plutôt que déclaratif. */
.off-deliv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.off-deliv__card{display:flex;flex-direction:column;background:var(--kokoro-soft-canvas);border-radius:var(--radius-tile-sm);padding:clamp(26px,3vw,40px)}
.off-chip{align-self:flex-start;background:var(--offer-accent);color:var(--offer-on-accent,var(--kokoro-white));border-radius:var(--radius-pill);padding:7px 16px 8px;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:12.5px;line-height:1.2;letter-spacing:.01em}
/* Le numéro remplace la pastille « Inclus », qui répétait le même mot
   quatre fois sans rien dire. Traitement provisoire — en filigrane derrière
   le titre — en attendant que Simon tranche entre les trois variantes de
   rebrand-preview/da-2026/variantes-livrables.html. */
.off-deliv__card{position:relative;overflow:hidden}
.off-deliv__num{position:absolute;right:-6px;top:-22px;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(96px,11vw,150px);line-height:1;letter-spacing:-.06em;color:var(--offer-accent);opacity:.16;pointer-events:none}
.off-deliv__card > *{position:relative}
.off-deliv__title{margin:clamp(20px,2.4vw,28px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(20px,1.9vw,25px);line-height:1.2;letter-spacing:-.02em;color:var(--kokoro-ink)}
.off-deliv__card p{margin:14px 0 0;font-size:16px;line-height:1.62;color:var(--kokoro-muted)}
.off-deliv__meta{margin-top:auto;padding-top:clamp(22px,2.6vw,30px);font-family:var(--font-body);font-size:14.5px;line-height:1.45;color:var(--kokoro-muted)}
.off-deliv__meta b{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:16.5px;color:var(--kokoro-black)}
.off-note{margin:clamp(26px,3vw,38px) 0 0;font-size:14.5px;line-height:1.6;color:var(--kokoro-muted);max-width:78ch}
.section-head .off-note{margin-top:20px}
/* Chapô de section : la phrase qui apporte un fait que les cartes
   suivantes ne portent pas. La page À propos l'utilisait sous le nom
   `.off-intro`, une classe jamais écrite — ses deux chapôs rendaient
   donc en texte courant. Nom générique : ce n'est pas propre aux
   pages d'offre, qui n'en ont d'ailleurs pas (règle de wording : pas
   d'intro qui répète les cartes). */
.section-intro{margin:0 0 clamp(30px,3.6vw,48px);font-family:var(--font-body);font-size:clamp(17px,1.5vw,19.5px);line-height:1.62;color:var(--kokoro-muted);max-width:62ch}
.section-head + .section-intro{margin-top:calc(-1 * clamp(20px,2.6vw,34px))}
.section--black .off-note,
/* Le chapô de section n'existait qu'à fond clair. Sur la page À propos il
   est posé dans une section noire, où le gris de corps tombe à 3,83. */
.section--black .section-intro{color:var(--kokoro-muted-dark)}

/* ── 6 · Module libre (slot) ────────────────────────────────────────────
   Le bloc propre à chaque offre : « Deux temps » pour l'audit, le
   financement OPCO pour la formation, la stack technique pour le
   développement. Duo de cartes blanches sur Soft Canvas. */
.off-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.off-duo__card{display:flex;flex-direction:column;background:var(--kokoro-white);border-radius:var(--radius-tile-sm);padding:clamp(28px,3.2vw,44px)}
.off-duo__title{margin:clamp(20px,2.4vw,28px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(21px,2.1vw,28px);line-height:1.16;letter-spacing:-.02em;color:var(--kokoro-ink)}
.off-duo__card p{margin:14px 0 0;font-size:16.5px;line-height:1.64;color:var(--kokoro-muted)}
.off-duo__card .btn-pill,.off-duo__card .arrow-link{margin-top:clamp(24px,2.8vw,34px);align-self:flex-start}
.off-duo__card .arrow-link{margin-top:auto;padding-top:clamp(24px,2.8vw,34px)}

/* ── 7 · Preuve ─────────────────────────────────────────────────────────
   Sur noir. Deux exemples tenus par des filets clairs, puis la seule
   citation autorisée. On montre, on n'affirme pas. */
.off-proof__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.off-proof__card{display:flex;flex-direction:column;border-radius:var(--radius-tile-sm);padding:clamp(26px,3vw,40px);border:var(--stroke-hairline) solid color-mix(in srgb,var(--kokoro-white) 20%,transparent)}
.off-proof__card .off-chip{background:var(--offer-accent);color:var(--offer-on-accent,var(--kokoro-white))}
.off-proof__title{margin:clamp(20px,2.4vw,28px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(20px,1.9vw,25px);line-height:1.2;letter-spacing:-.02em;color:var(--kokoro-white)}
.off-proof__card p{margin:14px 0 0;font-size:16px;line-height:1.64;color:var(--kokoro-muted-dark)}
/* Carte preuve « cas client » : logo du jeu mono en tête (blanc sur noir),
   lien individuel poussé en pied de carte. Zéro nouvelle famille de classes. */
.off-proof__card .cas4-logo{background-color:var(--kokoro-white);margin-bottom:clamp(18px,2vw,24px);--h:38}  /* hauteur de boîte unique : le jeu est calibré pour qu'une seule valeur donne un poids visuel homogène */
/* Correction d'œil : le lockup Dynabuy porte trois éléments dans sa boîte,
   il pèse moins que les autres à hauteur de boîte égale. */
.off-proof__card .cas4-logo--dynabuy{--h:48}
.off-proof__card .cas4-anon{--h:38;margin-bottom:clamp(18px,2vw,24px);color:var(--kokoro-white)}
.off-proof__card .cas4-link{margin-top:auto;padding-top:clamp(20px,2.4vw,28px);color:var(--kokoro-white)}
.off-proof__card .cas4-link:hover{color:var(--offer-accent)}
.off-proof__card--case{transition:border-color 160ms linear}
.off-proof__card--case:hover{border-color:color-mix(in srgb,var(--kokoro-white) 42%,transparent)}
/* Un seul cas à montrer : la carte tient toute la largeur, le texte reste lisible. */
.off-proof__grid--solo{grid-template-columns:minmax(0,1fr)}
.off-proof__grid--solo .off-proof__title{max-width:26ch}
.off-proof__grid--solo p{max-width:64ch}
.off-quote{margin:clamp(34px,4vw,54px) 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,2.4vw,30px);align-items:start}
.off-quote__mark{font-family:var(--font-editorial);font-weight:var(--weight-regular);font-size:clamp(48px,4.4vw,68px);line-height:.72;color:var(--offer-accent)}
.off-quote blockquote p{margin:0}
.off-quote blockquote{margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(19px,1.9vw,25px);line-height:1.42;letter-spacing:-.015em;color:var(--kokoro-white);max-width:38ch}
.off-quote figcaption{margin-top:16px;font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--kokoro-muted-dark)}
.off-proof__more{margin-top:clamp(30px,3.6vw,44px)}
.section--black .arrow-link{color:var(--kokoro-sky)}
.section--black .arrow-link:hover{color:var(--kokoro-white)}

/* ── 8 · Comparatif (optionnel) ─────────────────────────────────────────
   Trois approches, pas de dénigrement : la colonne Kokoro est simplement
   celle qui est tenue. Scroll horizontal en dessous de sa largeur utile. */
/* Le tableau déborde sur petit écran — 760 px de large dans 335 px — et il
   défilait sans le dire : rien n'indiquait qu'il restait des colonnes à
   droite. L'ombre de défilement (deux dégradés « couvercle » attachés au
   contenu, deux ombres radiales attachées à la fenêtre) n'apparaît que du
   côté où il reste quelque chose à voir, et disparaît en bout de course.
   `--fond` s'aligne sur la couleur de la section : sans quoi le couvercle
   se voit sur Soft Canvas. */
.off-table-wrap{
  overflow-x:auto;
  --fond:var(--kokoro-white);
  background:
    linear-gradient(to right, var(--fond) 34%, color-mix(in srgb, var(--fond) 0%, transparent)),
    linear-gradient(to left,  var(--fond) 34%, color-mix(in srgb, var(--fond) 0%, transparent)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(23,0,52,.13), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(23,0,52,.13), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}
.section--canvas .off-table-wrap,.pr-note .off-table-wrap{--fond:var(--kokoro-soft-canvas)}
.section--black .off-table-wrap{--fond:var(--kokoro-black)}
.off-table{width:100%;min-width:760px;border-collapse:collapse;font-family:var(--font-body)}
.off-table th,.off-table td{padding:clamp(16px,1.8vw,22px) clamp(14px,1.6vw,22px);text-align:left;vertical-align:top;font-size:15.5px;line-height:1.55;border-bottom:var(--stroke-hairline) solid var(--border-hairline)}
.off-table thead th{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;opacity:.58;padding-bottom:14px}
.off-table tbody th{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:16px;color:var(--kokoro-ink);width:16%}
.off-table td{color:var(--kokoro-muted)}
.off-table thead .off-table__own{opacity:1;color:var(--kokoro-black)}
.off-table__own{background:var(--kokoro-soft-canvas);color:var(--kokoro-black);font-family:var(--font-display);font-weight:var(--weight-medium)}
.off-table tbody tr:last-child .off-table__own{border-bottom-left-radius:var(--radius-card);border-bottom-right-radius:var(--radius-card)}
.off-table thead .off-table__own{border-top-left-radius:var(--radius-card);border-top-right-radius:var(--radius-card)}

/* ── 11 · CTA final — réutilise .cnt- (panneau sur photographie) ────────
   Le panneau accueille un bloc de relance, pas le formulaire : les pages
   d'offre convertissent vers le rendez-vous, pas vers un champ Message. */
.off-ctapanel{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(30px,3.4vw,46px) clamp(28px,3.2vw,44px)}
.off-ctapanel h3{margin:16px 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(23px,2.3vw,32px);line-height:1.14;letter-spacing:-.025em;color:var(--kokoro-ink)}
.off-ctapanel p{margin:16px 0 0;font-size:16.5px;line-height:1.62;color:var(--kokoro-muted)}
.off-ctapanel .btn-pill{margin-top:clamp(24px,2.8vw,34px)}
.off-ctapanel .off-note{margin-top:16px}

/* ── Responsive ─────────────────────────────────────────────────────────
   Trois régimes : 1080 (la barre de nav bascule déjà), 900 (les duos de
   colonnes s'empilent), 560 (le déroulé passe en deux colonnes). */
@media (max-width:1080px){
  .off-trust__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(26px,3.4vw,36px)}
  .off-trust__item:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:900px){
  .off-hero__grid,.off-intro-grid{grid-template-columns:minmax(0,1fr)}
  .off-hero__art{max-width:340px;margin-top:clamp(30px,5vw,44px)}
  .off-deliv,.off-duo,.off-proof__grid{grid-template-columns:minmax(0,1fr)}
  .off-step{
    grid-template-columns:clamp(74px,10vw,96px) minmax(0,1fr);
    grid-template-areas:
      "num head"
      "num desc";
    align-items:start;
    row-gap:14px;
    column-gap:clamp(20px,3.6vw,32px);
  }
  .off-step__shapecell{align-self:center}
}
@media (max-width:640px){
  .off-trust__list{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .off-trust__item{padding-left:0;border-left:0}
  .off-trust__label{max-width:38ch}
  .off-step{
    grid-template-columns:60px minmax(0,1fr);
    grid-template-areas:
      "num head"
      "desc desc";
    column-gap:18px;
  }
  .off-step__num{font-size:20px}
  .off-hero__chip{left:0;padding:12px 20px 14px}
}
@media (prefers-reduced-motion:reduce){
  .off-step,.off-step__shape svg{transition:none}
  .off-step:hover .off-step__shape svg{transform:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   BLOCS DE CONTENU (.pr-) — remontés d'article.css le 27/08/2026
   ──────────────────────────────────────────────────────────────────────────
   Ils sont nés pour le corps des articles de blog, d'où le préfixe. Mais un
   encadré, une grille de cartes, une suite d'étapes ou un enchaînement ne
   sont pas propres au blog : les pages de destination (agence IA <ville>,
   agence <outil>) en ont exactement le même besoin. Les faire vivre dans
   article.css obligeait ces pages à charger 27 Ko de styles de prose dont
   elles n'ont que faire.

   Le préfixe reste `.pr-` : le renommer casserait les 43 articles convertis
   pour un gain nul.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Composants du corps (.pr-) ──────────────────────────────────────────
   Le contrat offert à la rédaction. Six blocs, pas plus : les articles
   existants portaient une quinzaine de classes maison inventées au fil de
   l'eau (scenario-card, workflow-step, tool-card, gpt-card, error-card…),
   chacune stylée dans un <style> inline. Tout cela retombe ici. */

/* 1. Encadré — l'aparté, la mise en garde, le chiffre à retenir. */
.pr-note{margin:clamp(26px,3vw,36px) 0 0;padding:clamp(20px,2.4vw,28px);background:var(--kokoro-soft-canvas);border-radius:var(--radius-tile-sm)}
.pr-note__label{display:block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-black);opacity:.58;margin-bottom:10px}
.pr-note > :nth-child(2){margin-top:0}
.pr-note--blue{background:color-mix(in srgb,var(--kokoro-blue) 10%,var(--kokoro-white))}

/* 2. Étapes numérotées — remplace workflow-step, scenario-step, step-card. */
.pr-steps{margin:clamp(26px,3vw,36px) 0 0;padding:0;list-style:none;counter-reset:pr-step}
.pr-steps > li{counter-increment:pr-step;position:relative;margin-top:0;padding:clamp(18px,2.2vw,24px) 0 clamp(18px,2.2vw,24px) clamp(54px,5vw,68px);border-top:var(--stroke-hairline) solid var(--border-hairline)}
.pr-steps > li::before{content:counter(pr-step,decimal-leading-zero);position:absolute;left:0;top:clamp(18px,2.2vw,24px);display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-pill);background:var(--kokoro-blue);color:var(--kokoro-white);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:15px;line-height:1}
.pr-steps > li:last-child{border-bottom:var(--stroke-hairline) solid var(--border-hairline)}
.pr-steps h3,.pr-steps h4{margin-top:0}
.pr-steps .pr-chip{margin-bottom:10px}
.pr-steps p{margin-top:8px;color:var(--kokoro-muted)}

/* 3. Grille de cartes — remplace use-case-card, feature-card, tool-card,
      gpt-card, error-card, info-card en grille. */
.pr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,1.8vw,20px);margin:clamp(26px,3vw,36px) 0 0;padding:0;list-style:none}
.pr-cards > li,.pr-card{margin:0;padding:clamp(20px,2.4vw,26px);border:var(--stroke-hairline) solid var(--border-hairline);border-radius:var(--radius-tile-sm);list-style:none}
.pr-cards > li::before{display:none}
.pr-card__title,.pr-cards h3,.pr-cards h4{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:18px;line-height:1.28;letter-spacing:-.015em;color:var(--kokoro-black)}
.pr-cards p,.pr-card p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--kokoro-muted)}

/* 4. Chiffre mis en avant — remplace time-saved, value/label. */
.pr-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(16px,2vw,26px);margin:clamp(26px,3vw,36px) 0 0;padding:clamp(24px,2.8vw,32px) 0;border-block:var(--stroke-hairline) solid var(--border-hairline);list-style:none}
.pr-figures > li{margin:0;padding:0}
.pr-figures > li::before{display:none}
/* Une valeur longue — « 59 euros/mois » — dépassait de 33 px de sa
   colonne à 41 px de corps. Elle passe sur deux lignes plutôt que de
   sortir de la grille ; sans effet sur les valeurs courtes. */
.pr-figure__value{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(30px,3.2vw,42px);line-height:1;letter-spacing:-.04em;color:var(--kokoro-black);overflow-wrap:break-word}
.pr-figure__label{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:var(--kokoro-muted)}

/* 5. Relance en cours de lecture — le CTA inline, entre deux H2. */
.pr-cta{margin:clamp(34px,4vw,48px) 0 0;padding:clamp(24px,2.8vw,34px);background:var(--kokoro-black);border-radius:var(--radius-tile-sm)}
.pr-cta p{margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(18px,1.8vw,22px);line-height:1.38;letter-spacing:-.015em;color:var(--kokoro-white);max-width:34ch}
.pr-cta .btn-pill{margin-top:clamp(18px,2vw,24px)}

/* 6. Enchaînement — la suite d'outils ou d'étapes qui se lit d'un trait.
      Remplace workflow-step/workflow-arrow et scenario-step/scenario-steps :
      42 occurrences dans les articles, chacune avec ses flèches écrites en
      dur dans le HTML. La flèche est maintenant tracée par le CSS, ce qui la
      retire du texte lu par les lecteurs d'écran. */
.pr-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:clamp(26px,3vw,36px) 0 0;padding:0;list-style:none}
.pr-flow > li{position:relative;margin:0;padding:0;display:inline-flex;align-items:center;gap:10px}
.pr-flow > li::before{display:none}
.pr-flow > li + li::after{content:"";order:-1;width:16px;height:9px;flex:0 0 auto;background:var(--kokoro-quiet-stone);-webkit-mask:var(--fleche) center/contain no-repeat;mask:var(--fleche) center/contain no-repeat}
.pr-flow{--fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M11.2 0 10 1.2 12.9 4H0v1.9h12.9L10 8.8 11.2 10 16 4.9z'/%3E%3C/svg%3E")}
.pr-flow span{display:inline-flex;align-items:center;padding:9px 17px;border-radius:var(--radius-pill);background:var(--kokoro-soft-canvas);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:15px;line-height:1;color:var(--kokoro-black)}
.pr-flow li:first-child span{background:var(--kokoro-blue);color:var(--kokoro-white)}

/* Puce — le gain chiffré d'un cas d'usage, la date d'une étape de frise.
   Générique : elle sert dans .pr-cards comme dans .pr-steps. */
.pr-chip{display:inline-flex;align-items:center;margin-bottom:12px;padding:7px 14px;border-radius:var(--radius-pill);background:var(--kokoro-blue);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:13.5px;line-height:1;color:var(--kokoro-white)}

/* 7. Étiquettes de fin d'article. */
.pr-tags{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(30px,3.4vw,42px) 0 0;padding:0;list-style:none}
.pr-tags > li{margin:0;padding:0}
.pr-tags > li::before{display:none}
.pr-tags span,.pr-tags a{display:inline-flex;align-items:center;padding:7px 15px;border-radius:var(--radius-pill);border:var(--stroke-hairline) solid var(--border-hairline);font-family:var(--font-body);font-size:14px;line-height:1;color:var(--kokoro-muted);text-decoration:none}
.pr-tags a:hover{border-color:var(--kokoro-black);color:var(--kokoro-black)}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES DU PARCOURS PRINCIPAL — À propos, FAQ, Contact (27/08/2026)
   ──────────────────────────────────────────────────────────────────────────
   Trois pages qui ne sont pas des offres et n'ont donc pas le rail `.off-`.
   Elles réutilisent tout ce qui existe — `.off-trust`, `.off-steps`,
   `.faq-`, `.cnt-`, `.photo-blob`, `.btn-pill` — et n'ajoutent que ce qui
   n'existait nulle part : une carte de personne, une liste d'outils, un
   groupe de FAQ et un aiguillage à deux voies.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
.art-crumbs{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--kokoro-muted)}
.art-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.art-crumbs a{color:var(--kokoro-muted);text-decoration:none;transition:color 140ms linear}
.art-crumbs a:hover{color:var(--kokoro-black)}
.art-crumbs li+li::before{content:"›";margin-right:8px;color:var(--kokoro-quiet-stone)}
.art-crumbs [aria-current]{color:var(--kokoro-black)}

/* ── En-tête des pages simples ───────────────────────────────────────────
   Même dégagement que .off-hero : la barre de nav est flottante et ne
   pousse rien, l'en-tête doit lui faire la place. */
/* La page À propos réutilise le rail .off-steps, qui consomme --offer-accent.
   Sans cette ligne, les silhouettes des étapes n'ont pas de remplissage. */
/* Toutes les pages qui empruntent le rail .off-steps sans être une page
   d'offre doivent fournir l'accent qu'il consomme. Sans cela, les
   silhouettes des étapes n'ont pas de remplissage. */
/* La paire se pose ENTIÈRE. La première version ne donnait que l'accent :
   .off-step__num consomme var(--offer-on-accent) sans repli, un var() sans
   valeur invalide la déclaration, et `color` retombait sur l'hérité — le
   premier numéro d'étape sortait en noir sur la pastille bleue quand les
   suivants étaient blancs, sur 12 pages. */
.a-propos,.landing,.comparatif{--offer-accent:var(--kokoro-blue);--offer-on-accent:var(--kokoro-white)}

/* Une étape de méthode porte un paragraphe ET une liste, là où une étape
   d'offre n'a qu'un paragraphe : l'enveloppe reprend la place de grille. */
.off-step__descwrap{grid-area:desc}
.off-step__descwrap .off-step__desc{grid-area:auto}
.off-step__list{margin:14px 0 0;padding:0;list-style:none}
.off-step__list li{position:relative;padding-left:22px;margin-top:8px;font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--kokoro-muted)}
.off-step__list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:var(--radius-pill);background:var(--offer-accent)}

.pg-hero{background:var(--kokoro-soft-canvas);padding-top:clamp(126px,13vw,178px);padding-bottom:clamp(46px,5.6vw,76px)}
.pg-hero h1{margin:clamp(16px,2vw,24px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(34px,4.6vw,64px);line-height:1.06;letter-spacing:-.045em;color:var(--kokoro-black);max-width:19ch}
.pg-lead{margin:clamp(20px,2.4vw,30px) 0 0;font-family:var(--font-body);font-size:clamp(17px,1.5vw,20.5px);line-height:1.62;color:var(--kokoro-muted);max-width:60ch}
.pg-hero .btn-pill{margin-top:clamp(26px,3vw,38px)}

/* ── L'équipe ────────────────────────────────────────────────────────────
   Portrait rond, nom, rôle, spécialité, lien. La carte n'a ni fond ni
   bordure : c'est le filet qui la sépare de la suivante, comme partout
   ailleurs dans le système. */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(26px,3.4vw,48px);margin-top:clamp(30px,3.6vw,48px)}
.eq-card{display:flex;flex-direction:column;align-items:flex-start}
.eq-card__photo{width:104px;height:104px;border-radius:var(--radius-pill);object-fit:cover;background:var(--kokoro-soft-canvas)}
.eq-card__name{margin:clamp(18px,2vw,24px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--kokoro-black)}
.eq-card__role{display:block;margin-top:6px;font-family:var(--font-body);font-weight:var(--weight-medium);font-size:15px;line-height:1.4;color:var(--kokoro-blue-link)}
.eq-card__field{display:block;margin-top:10px;font-family:var(--font-body);font-size:15.5px;line-height:1.5;color:var(--kokoro-muted)}
.eq-card .arrow-link{margin-top:clamp(14px,1.8vw,20px);font-size:15px}

/* Portrait long : deux personnes détaillées, sur filet. */
.eq-bio{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.8vw,22px);padding-top:clamp(28px,3.2vw,40px);margin-top:clamp(28px,3.2vw,40px);border-top:var(--stroke-hairline) solid var(--border-hairline)}
@media (min-width:820px){.eq-bio{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);column-gap:clamp(30px,4vw,64px)}}
.eq-bio__name{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(21px,2vw,26px);line-height:1.16;letter-spacing:-.025em;color:var(--kokoro-black)}
.eq-bio__field{display:block;margin-top:8px;font-family:var(--font-body);font-size:15px;line-height:1.45;color:var(--kokoro-muted)}
.eq-bio__text p{margin:0;font-family:var(--font-body);font-size:16.5px;line-height:1.66;color:var(--kokoro-muted)}
.eq-bio__text p + p{margin-top:14px}

/* ── Les outils ──────────────────────────────────────────────────────────
   Une liste, pas des cartes : ce sont des noms, pas des arguments. */
.outils{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 clamp(28px,3.4vw,56px);margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none}
.outils li{padding:clamp(16px,2vw,22px) 0;border-top:var(--stroke-hairline) solid var(--border-hairline)}
.outils__nom{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:18px;line-height:1.25;letter-spacing:-.015em;color:var(--kokoro-black)}
.outils__quoi{display:block;margin-top:6px;font-family:var(--font-body);font-size:15.5px;line-height:1.5;color:var(--kokoro-muted)}

/* ── FAQ en groupes (page dédiée) ────────────────────────────────────────
   La home pose ses huit questions d'un bloc ; la page FAQ les range par
   sujet. Même `.faq-item`, seul le regroupement est nouveau. */
.faqp{margin-top:clamp(34px,4.2vw,56px)}
.faqp + .faqp{margin-top:clamp(46px,5.4vw,76px)}
.faqp__title{margin:0 0 clamp(10px,1.4vw,18px);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(22px,2.2vw,29px);line-height:1.16;letter-spacing:-.025em;color:var(--kokoro-black)}
.faqp__intro{margin:0 0 clamp(16px,2vw,24px);font-family:var(--font-body);font-size:16.5px;line-height:1.6;color:var(--kokoro-muted);max-width:60ch}

/* ── Aiguillage contact — deux voies ─────────────────────────────────────
   Réserver, ou écrire. Deux cartes de même poids : on ne pousse pas l'une
   au détriment de l'autre, elles ne servent pas le même besoin. */
.ct-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(30px,3.6vw,48px)}
.ct-voie{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,3vw,38px);border-radius:var(--radius-tile-sm);border:var(--stroke-hairline) solid var(--border-hairline)}
.ct-voie--noir{background:var(--kokoro-black);border-color:transparent}
.ct-voie h2{margin:14px 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(21px,2vw,27px);line-height:1.16;letter-spacing:-.025em;color:var(--kokoro-black)}
.ct-voie p{margin:14px 0 0;font-family:var(--font-body);font-size:16.5px;line-height:1.6;color:var(--kokoro-muted);max-width:40ch}
.ct-voie .btn-pill{margin-top:clamp(22px,2.6vw,30px)}
.ct-voie--noir h2{color:var(--kokoro-white)}
.ct-voie--noir p{color:var(--kokoro-muted-dark)}
.ct-voie--noir .eyebrow{color:var(--kokoro-white)}
.ct-note{margin:clamp(22px,2.6vw,32px) 0 0;font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--kokoro-muted)}
.ct-note a{color:var(--kokoro-blue-link);text-decoration:none}
.ct-note a:hover{color:var(--kokoro-black)}

/* Le formulaire sur la page contact : panneau blanc sur Soft Canvas, sans la
   photographie de la home — la page a déjà son aiguillage en tête, une
   deuxième image ferait redite. */
.ct-form{background:var(--kokoro-soft-canvas);padding-block:clamp(52px,6.4vw,88px)}
.ct-form__panel{max-width:640px;margin-top:clamp(26px,3vw,38px);padding:clamp(26px,3vw,40px);background:var(--kokoro-white);border-radius:var(--radius-tile-sm)}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES DE DESTINATION — landings SEO et outils (27/08/2026)
   ──────────────────────────────────────────────────────────────────────────
   Dix pages qui partagent le même rail : le problème, la différence, ce que
   ça change, les étapes, des exemples, un comparatif, une FAQ. Elles
   réutilisent `.off-steps`, `.off-table`, `.pr-cards`, `.faq-`, `.cnt-` et
   `.off-trust` — le seul motif qui n'existait nulle part est le face-à-face
   « avant / après ».
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Le face-à-face ──────────────────────────────────────────────────────
   Deux colonnes qui s'opposent : ce qui coince aujourd'hui, ce qui change
   après. Les pages actuelles le rendaient avec des icônes coche et croix de
   Font Awesome ; le système n'a pas de jeu d'icônes, la distinction passe
   donc par la matière — Soft Canvas contre Blue — et par la puce. */
.lp-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(30px,3.6vw,48px)}
.lp-col{padding:clamp(24px,2.8vw,36px);border-radius:var(--radius-tile-sm);background:var(--kokoro-soft-canvas)}
.lp-col--apres{background:var(--kokoro-blue)}
.lp-col__title{margin:12px 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(19px,1.9vw,24px);line-height:1.2;letter-spacing:-.02em;color:var(--kokoro-black)}
.lp-col--apres .lp-col__title,.lp-col--apres .eyebrow{color:var(--kokoro-white)}
.lp-col ul{margin:clamp(16px,2vw,22px) 0 0;padding:0;list-style:none}
.lp-col li{position:relative;padding-left:26px;margin-top:12px;font-family:var(--font-body);font-size:16.5px;line-height:1.6;color:var(--kokoro-muted)}
.lp-col li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--kokoro-quiet-stone)}
.lp-col--apres li{color:color-mix(in srgb,var(--kokoro-white) 88%,transparent)}
.lp-col--apres li::before{background:var(--kokoro-white)}

/* ── Bandeau de ressources ───────────────────────────────────────────────
   Les landings outil renvoient vers des articles du blog. Même carte que
   « à lire ensuite », sans avoir à charger article.css. */
.lp-liens{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(26px,3vw,38px)}
.lp-lien{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,28px);border:var(--stroke-hairline) solid var(--border-hairline);border-radius:var(--radius-tile-sm);text-decoration:none;transition:border-color 160ms linear}
/* Une carte de ressource qui n'est pas un lien dans la source ne doit pas
   avoir l'air cliquable : pas de survol qui promet un clic. Le convertisseur
   fabriquait un <a href=""> quand il n'y avait pas d'URL — neuf cartes qui
   rechargeaient la page. */
a.lp-lien:hover{border-color:var(--kokoro-black)}
.lp-lien--statique{cursor:default}
.lp-lien__titre{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:18px;line-height:1.28;letter-spacing:-.015em;color:var(--kokoro-black)}
.lp-lien__desc{margin:10px 0 0;font-family:var(--font-body);font-size:15.5px;line-height:1.55;color:var(--kokoro-muted)}
.lp-lien__meta{margin-top:auto;padding-top:clamp(16px,2vw,22px);font-family:var(--font-body);font-size:14.5px;line-height:1.4;color:var(--kokoro-muted)}

/* ══════════════════════════════════════════════════════════════════════════
   COMPARATIFS — /outils/ et ses quatorze duels
   ══════════════════════════════════════════════════════════════════════════ */

/* Le verdict : la réponse d'abord, l'argumentaire ensuite. */
/* ══ Comparatif ══════════════════════════════════════════════════════════
   Les treize pages « X vs Y » avaient perdu leur grammaire à la migration.
   Les sources la portaient — .winner (116 occurrences), .check (111),
   .cross (53), .score-box, .use-case-card — mais la DA n'avait rien en
   face : le convertisseur a aplati tout ça en encadrés génériques et en
   listes à puces identiques. Sur make-vs-n8n, les quatre points forts et
   les trois points faibles de Make se retrouvaient dans une seule liste,
   même puce : la page annonçait « coût mensuel récurrent » comme un
   argument de vente.

   Sept composants, et sept seulement. Ils couvrent les trois mises en page
   d'origine : « versus » (6 pages, face-à-face + notes), « pros-cons »
   (5 pages, un bloc par outil) et les deux pages longues.

   Pas d'icône : la DA n'a pas de jeu d'icônes et le sous-ensemble des
   polices n'a ni ✓ ni ✗. Le plus et le moins sont dessinés en CSS. */

/* 1 · Face-à-face — le premier écran doit poser les deux outils côte à
   côte. Sans note quand la source n'en donne pas : on n'invente pas un
   chiffre. */
.cmp-face{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,3.2vw,40px)}
.cmp-face__outil{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(22px,2.6vw,32px);background:var(--kokoro-white);border:var(--stroke-hairline) solid var(--border-hairline);border-radius:var(--radius-tile-sm);text-align:center}
.cmp-face__nom{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(20px,2.2vw,28px);line-height:1.14;letter-spacing:-.03em;color:var(--kokoro-ink)}
.cmp-face__note{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.045em;color:var(--kokoro-black)}
.cmp-face__note small{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:15px;letter-spacing:0;color:var(--kokoro-muted)}
.cmp-face__vs{display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-muted);padding-inline:clamp(4px,1vw,10px)}
/* L'outil recommandé porte le trait plein — un seul par page. */
.cmp-face__outil--reco{border-color:var(--kokoro-black);border-width:2px}
.cmp-face__reco{display:inline-flex;align-self:center;margin-top:4px;padding:6px 14px;border-radius:var(--radius-pill);background:var(--kokoro-black);color:var(--kokoro-white);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){
  .cmp-face{grid-template-columns:1fr;gap:10px}
  .cmp-face__vs{padding-block:2px}
}

/* 2 · Verdict — sur noir, il tranche. C'est la phrase que le lecteur vient
   chercher, elle ne se noie pas dans le corps de la page. */
.cmp-verdict{padding:clamp(26px,3vw,40px);background:var(--kokoro-black);border-radius:var(--radius-tile-sm);margin-top:clamp(26px,3vw,38px)}
.cmp-verdict h2{margin:12px 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(22px,2.2vw,30px);line-height:1.16;letter-spacing:-.025em;color:var(--kokoro-white)}
.cmp-verdict p{margin:14px 0 0;font-family:var(--font-body);font-size:16.5px;line-height:1.64;color:var(--kokoro-muted-dark);max-width:62ch}
.cmp-verdict p strong{color:var(--kokoro-white);font-weight:var(--weight-semibold)}
.cmp-verdict .eyebrow{color:var(--kokoro-white)}

/* 3 · Tableau — le composant .off-table fait déjà le travail ; il ne
   manquait que la marque du gagnant. Un rond Lime pour le vainqueur d'une
   ligne, un rond gris pour une égalité. */
.off-table .cmp-gagnant{font-weight:var(--weight-semibold);color:var(--kokoro-black);white-space:nowrap}
.off-table .cmp-gagnant::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:var(--radius-pill);background:var(--kokoro-lime);vertical-align:middle}
.off-table .cmp-gagnant--nul{color:var(--kokoro-muted);font-weight:var(--weight-regular)}
.off-table .cmp-gagnant--nul::before{background:var(--border-hairline)}
/* La première colonne est un intitulé de ligne : elle porte le poids du
   titre, pas celui d'une donnée. */
.off-table tbody th[scope="row"]{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:16px;line-height:1.5;letter-spacing:-.01em;color:var(--kokoro-black);text-align:left;vertical-align:top}

/* 4 · Pour et contre — LE composant qui manquait. Deux colonnes, une par
   outil, et dans chacune les avantages et les inconvénients séparés,
   marqués différemment. Le plus et le moins sont dessinés : deux traits
   pour l'un, un seul pour l'autre. */
.cmp-pc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3vw,38px)}
.cmp-pc__col{padding:clamp(22px,2.6vw,32px);border:var(--stroke-hairline) solid var(--border-hairline);border-radius:var(--radius-tile-sm);background:var(--kokoro-white)}
.cmp-pc__nom{margin:0 0 clamp(16px,2vw,22px);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:20px;line-height:1.2;letter-spacing:-.02em;color:var(--kokoro-ink)}
.cmp-pc__titre{display:block;margin:0;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-black);opacity:.58}
.cmp-pc__titre + ul{margin:10px 0 0}
.cmp-pc ul + .cmp-pc__titre{margin-top:clamp(20px,2.4vw,26px)}
.cmp-pc ul{list-style:none;margin:0;padding:0}
.cmp-pc li{position:relative;margin-top:9px;padding-left:28px;font-family:var(--font-body);font-size:15.5px;line-height:1.55;color:var(--kokoro-muted)}
/* Le marqueur. Un plus dans une pastille Lime, un moins dans une pastille
   creuse : la forme ET la couleur distinguent, pour que ça tienne aussi en
   noir et blanc et pour qui ne distingue pas le vert. Les deux signes sont
   de vrais caractères — le sous-ensemble des polices les a — plutôt que des
   traits dessinés en box-shadow, que la première version rendait illisibles. */
.cmp-pc li::before{content:"+";position:absolute;left:0;top:.24em;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:12px;line-height:1}
.cmp-pc__plus li::before{background:var(--kokoro-lime);color:var(--kokoro-black)}
.cmp-pc__moins li::before{content:"\2212";background:transparent;border:var(--stroke-hairline) solid var(--border-hairline);color:var(--kokoro-muted)}

/* 5 · Cas d'usage — « quel outil selon votre situation ». La réponse est
   un nom d'outil, elle se détache du descriptif. */
.cmp-cas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3vw,38px)}
.cmp-cas__item{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,30px);border-radius:var(--radius-tile-sm);border:var(--stroke-hairline) solid var(--border-hairline)}
.cmp-cas__nom{margin:12px 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:19px;line-height:1.24;letter-spacing:-.02em;color:var(--kokoro-black)}
.cmp-cas__item p{margin:10px 0 0;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--kokoro-muted)}
.cmp-cas__reponse{margin-top:auto;padding-top:clamp(16px,2vw,22px);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:17px;letter-spacing:-.015em;color:var(--kokoro-black)}

/* Respiration entre les blocs. .section-title a margin:0 — elle est prévue
   pour vivre dans un .section-head qui porte l'espacement. Sur un
   comparatif, les titres s'enchaînent directement dans le conteneur : sans
   ça, « Besoin d'aide pour déployer n8n ? » se colle au bloc précédent. */
/* Chaque bloc du comparatif vit dans son propre <div> sous .container, et
   son titre en est le premier enfant : .section-title porte margin:0, elle
   est prévue pour un .section-head qui n'existe pas ici. C'est donc aux
   blocs de respirer entre eux — sinon « Besoin d'aide pour déployer n8n ? »
   se colle au tableau qui le précède. */
.comparatif .container > div + div{margin-top:clamp(52px,6.5vw,92px)}
.comparatif .container > div > .section-title:first-child + *{margin-top:clamp(20px,2.4vw,28px)}

/* Le titre du bloc de relance : plus petit que les titres de section, il ne
   concurrence pas la structure de la page. */
.pr-cta__titre{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(20px,2vw,26px);line-height:1.18;letter-spacing:-.025em;color:var(--kokoro-white)}
.pr-cta p{margin:12px 0 0;font-family:var(--font-body);font-size:16.5px;line-height:1.62;color:var(--kokoro-muted-dark);max-width:58ch}
.pr-cta .btn-pill{margin-top:clamp(20px,2.4vw,26px)}

/* 6 · Autres comparatifs — le rail de fin, mêmes cartes que le blog. */
.cmp-autres{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.8vw,20px);margin-top:clamp(22px,2.6vw,30px)}

/* ── Page légale / prose simple ──────────────────────────────────────────
   Mentions, confidentialité : une colonne de texte, rien d'autre. On
   emprunte la typographie de prose du blog sans charger article.css. */
.lg-prose{max-width:68ch;margin-top:clamp(30px,3.6vw,48px);font-family:var(--font-body);font-size:17px;line-height:1.72;color:var(--kokoro-ink)}
.lg-prose h2{margin:clamp(38px,4.4vw,56px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(21px,2vw,27px);line-height:1.2;letter-spacing:-.025em;color:var(--kokoro-black)}
.lg-prose h3{margin:clamp(26px,3vw,36px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:19px;line-height:1.28;letter-spacing:-.02em;color:var(--kokoro-black)}
.lg-prose p{margin:clamp(14px,1.6vw,20px) 0 0}
.lg-prose strong{font-weight:var(--weight-semibold);color:var(--kokoro-black)}
.lg-prose a{color:var(--kokoro-blue-link);text-decoration:underline;text-underline-offset:3px}
.lg-prose a:hover{color:var(--kokoro-black)}
.lg-prose ul,.lg-prose ol{margin:clamp(14px,1.6vw,20px) 0 0;padding-left:0;list-style:none}
.lg-prose li{position:relative;margin-top:9px;padding-left:26px}
.lg-prose ul > li::before{content:"";position:absolute;left:5px;top:.72em;width:7px;height:7px;border-radius:var(--radius-pill);background:var(--kokoro-blue)}
.lg-prose ol{counter-reset:lg}
.lg-prose ol > li{counter-increment:lg}
/* Le numéro de liste se lit, il n'est pas décoratif : bleu de TEXTE.
   --kokoro-blue donnait 3,12 sur Soft Canvas à la taille du corps. */
.lg-prose ol > li::before{content:counter(lg) ".";position:absolute;left:0;top:0;font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--kokoro-blue-link)}
/* Les tableaux des pages légales ont trois colonnes : 424 px minimum,
   soit 49 de trop sur un écran de 375. Ils défilent seuls plutôt que
   d'emporter la page — même principe que .table-wrap des articles. */
.lg-prose table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;margin-top:clamp(20px,2.4vw,28px);font-size:16px}
.lg-prose th,.lg-prose td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:var(--stroke-hairline) solid var(--border-hairline)}

/* ── 404 ─────────────────────────────────────────────────────────────────
   Une page d'erreur doit proposer une sortie, pas s'excuser longuement. */
.err{min-height:70vh;display:flex;align-items:center;background:var(--kokoro-soft-canvas);padding-block:clamp(126px,13vw,178px) clamp(60px,7vw,100px)}
.err h1{margin:16px 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(34px,4.6vw,60px);line-height:1.07;letter-spacing:-.045em;color:var(--kokoro-black);max-width:16ch}
.err__liens{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,38px)}


/* ── Bloc auteur ─────────────────────────────────────────────────────────
   Écrit pour l'article, mais /auteur/simon-guichard/ et la page du guide
   l'emploient aussi — et elles ne chargent pas article.css. Sans ces règles
   la photo se posait au-dessus du nom au lieu d'être à côté, sur le bloc qui
   EST l'en-tête d'identité de la page auteur. Même raison que .art-crumbs,
   déplacée ici pour le même motif. */
.art-author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.2vw,26px);align-items:start;margin:clamp(44px,5vw,64px) 0 0;padding-top:clamp(28px,3.2vw,38px);border-top:var(--stroke-hairline) solid var(--border-hairline)}
.art-author__photo{width:84px;height:84px;border-radius:var(--radius-pill);object-fit:cover}
.art-author__name{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:19px;line-height:1.25;letter-spacing:-.015em;color:var(--kokoro-black)}
.art-author__name a{color:inherit;text-decoration:none}
.art-author__name a:hover{color:var(--kokoro-blue-link)}
.art-author__role{display:block;margin-top:4px;font-family:var(--font-body);font-size:14.5px;line-height:1.4;color:var(--kokoro-muted)}
.art-author__bio{margin:12px 0 0;font-family:var(--font-body);font-size:16px;line-height:1.62;color:var(--kokoro-muted)}

/* ── Bande de logos restée en balisage nu ────────────────────────────────
   Trois pages d'atterrissage portent leur bande « Ils nous font confiance »
   en <img> bruts, hors du jeu calibré : chaque SVG se dessinait à sa taille
   intrinsèque, et l'écart montait à 1 pour 13 en hauteur entre Unow et
   Affective — une bande censée rassurer qui donne l'air bricolé.

   Ici on ne fait qu'égaliser : même hauteur de boîte, même traitement que
   la bande calibrée. Passer ces trois pages sur .logo-band-wrap demanderait
   de trancher le cas d'Unow et de Pleyce, absents du jeu mono. */
.lb-brut{margin-top:clamp(20px,2.4vw,28px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(26px,4vw,54px)}
.lb-brut img{height:26px;width:auto;max-width:150px;object-fit:contain;opacity:.62;filter:grayscale(1)}

/* ── Récapitulatif des offres ────────────────────────────────────────────
   La page /offres donne enfin une destination au CTA « Voir le détail de nos
   offres », qui pointait sur `#`. Elle ne redit pas les quatre pages : elle
   aide à choisir, d'où la liste de faits sous chaque description. */
.ofrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.ofrs__card{position:relative;display:flex;flex-direction:column;background:var(--kokoro-white);border-radius:var(--radius-tile-sm);padding:clamp(26px,3vw,38px)}
.ofrs__num{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:38px;height:38px;border-radius:var(--radius-pill);background:var(--kokoro-black);color:var(--kokoro-white);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:15px;line-height:1}
.ofrs__card:nth-child(1) .ofrs__num{box-shadow:0 0 0 3px var(--kokoro-white),0 0 0 6px var(--kokoro-blue)}
.ofrs__card:nth-child(2) .ofrs__num{box-shadow:0 0 0 3px var(--kokoro-white),0 0 0 6px var(--kokoro-yellow)}
.ofrs__card:nth-child(3) .ofrs__num{box-shadow:0 0 0 3px var(--kokoro-white),0 0 0 6px var(--kokoro-lime)}
.ofrs__card:nth-child(4) .ofrs__num{box-shadow:0 0 0 3px var(--kokoro-white),0 0 0 6px var(--kokoro-orange)}
.ofrs__titre{margin:clamp(20px,2.4vw,28px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(21px,2vw,27px);line-height:1.16;letter-spacing:-.025em;color:var(--kokoro-ink);max-width:22ch}
.ofrs__card > p{margin:14px 0 0;font-family:var(--font-body);font-size:16.5px;line-height:1.62;color:var(--kokoro-muted)}
.ofrs__faits{list-style:none;margin:clamp(20px,2.4vw,26px) 0 0;padding:0;border-top:var(--stroke-hairline) solid var(--border-hairline)}
.ofrs__faits li{padding:11px 0;font-family:var(--font-body);font-size:15.5px;line-height:1.45;color:var(--kokoro-muted);border-bottom:var(--stroke-hairline) solid var(--border-hairline)}
.ofrs__faits b{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:16.5px;color:var(--kokoro-black);margin-right:6px}
.ofrs__card .arrow-link{margin-top:auto;padding-top:clamp(20px,2.4vw,28px)}
@media (max-width:820px){.ofrs{grid-template-columns:minmax(0,1fr)}}

/* ── Citation portée par une personne ────────────────────────────────────
   Une citation institutionnelle se survole ; une citation avec un visage se
   lit. Le logo du client ferme la ligne, à droite, en retrait. */
.off-quote__pied{display:flex;align-items:center;gap:clamp(14px,1.8vw,20px);flex-wrap:wrap;margin-top:clamp(20px,2.4vw,28px)}
.off-quote__photo{width:72px;height:72px;border-radius:var(--radius-pill);object-fit:cover;flex-shrink:0}
.off-quote__qui{display:flex;flex-direction:column;gap:2px;min-width:0}
.off-quote__qui b{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:17px;letter-spacing:-.015em;color:var(--kokoro-white)}
.off-quote__qui > span{font-family:var(--font-body);font-size:14.5px;line-height:1.4;color:var(--kokoro-muted-dark)}
.off-quote__source{font-size:13px !important;opacity:.72}
.off-quote__logo{margin-left:auto;--h:40;background-color:var(--kokoro-white);opacity:.8}
@media (max-width:640px){.off-quote__logo{margin-left:0}}

/* ── Accessibilité au clavier ────────────────────────────────────────────
   Deux manques constatés à la revue du 28/08, tous deux hérités : la DA
   n'avait ni lien d'évitement, ni anneau de focus global.

   Le lien d'évitement est le PREMIER élément focusable de la page. Sans
   lui, arriver au contenu au clavier demande de traverser les 14 liens de
   la nav, sur chacune des 86 pages. Il reste hors écran tant qu'il n'a pas
   le focus — décalé, jamais `display:none` ni `visibility:hidden`, qui le
   sortiraient de l'ordre de tabulation et le rendraient inatteignable.

   L'anneau, lui, remplace l'outline par défaut du navigateur, que la DA
   supprimait par endroits (`.field` porte `outline:none`) sans rien mettre
   à la place : au clavier, on ne savait plus où on était. Bleu sur fond
   clair, blanc sur les blocs noirs — un anneau doit contraster avec CE
   qu'il entoure, une seule couleur ne peut pas tenir les deux. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;display:inline-flex;align-items:center;background:var(--kokoro-black);color:var(--kokoro-white);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:16px;text-decoration:none;padding:14px 24px;border-radius:var(--radius-pill)}
.skip-link:focus{left:16px;top:16px}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--kokoro-blue);outline-offset:3px;border-radius:var(--radius-pill)}
.field:focus-visible,textarea.field:focus-visible{outline:3px solid var(--kokoro-blue);outline-offset:2px;border-radius:var(--radius-input)}
textarea.field:focus-visible{border-radius:var(--radius-tile-sm)}

.section--black :where(a,button,summary):focus-visible,
.footer :where(a,button,summary):focus-visible,
.pr-cta :where(a,button):focus-visible,
.ct-voie--noir :where(a,button):focus-visible,
.cmp-verdict :where(a,button):focus-visible,
.art-ctabox :where(a,button):focus-visible,
.art-aside__panel :where(a,button):focus-visible,
.nav-burger[open] > summary:focus-visible{outline-color:var(--kokoro-white)}

/* ══════════════════════════════════════════════════════════════════════════
   /CAS-CLIENTS — index des cas (30/08/2026)
   ──────────────────────────────────────────────────────────────────────────
   La page réutilise l'existant : .pg-hero en tête, la section noire .cas4-
   de la home pour les cas à la une, le rail .off-steps pour l'index (le
   logo mono prend la place de la forme numérotée), .faq- et .cnt-/.off-
   ctapanel pour la fin de page. Ne manquaient que quatre règles — les
   voici, et rien d'autre.
   ══════════════════════════════════════════════════════════════════════════ */

/* La page emprunte le rail .off-steps sans être une page d'offre : elle
   fournit la paire accent/on-accent qu'il consomme — même règle (et même
   piège du var() sans repli) que .a-propos plus haut. */
.cas-clients{--offer-accent:var(--kokoro-blue);--offer-on-accent:var(--kokoro-white)}

/* Logos de l'index : encre noire sur fond clair, hauteur de boîte commune
   38 — même règle d'homogénéité que les cartes preuve (.off-proof__card),
   exception Dynabuy comprise (lockup à trois éléments, il pèse moins à
   hauteur égale). La règle contextuelle écrase aussi le fond blanc du
   logo Pilliot, calibré pour la carte Blue : sur le White de l'index, il
   serait invisible. Le display:block n'est pas décoratif : dans les cartes,
   le span est blockifié par leur flex parent ; ici la cellule est un bloc
   simple et un span inline ignorerait width/height — logo invisible. */
.cas-liste .cas4-logo{display:block;background-color:var(--kokoro-black);--h:56}
.cas-liste .cas4-logo--dynabuy{--h:70}

/* Statut d'une mission — texte simple en traitement eyebrow, pas de
   pastille : le statut est un fait, pas un badge. Marge haute (l'eyebrow
   du système n'en porte qu'en bas) pour le décoller des livrables. */
.cas-statut{display:block;margin-top:clamp(14px,1.8vw,20px);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-black);opacity:.58}

/* Renvoi d'offre en pied de rangée : l'arrow-link du système, un cran plus
   petit et espacé du statut qui le précède. */
.cas-liste .arrow-link{margin-top:clamp(10px,1.4vw,14px);font-size:15px}

/* ── Acquis « rail de phases » (formation) — essai revue Simon 30/08 :
      cartes fines chaînées sur le modèle de l'ancienne timeline, en DA :
      rail hairline, points aux accents du déroulé, cartes Soft Canvas. ── */
.acq-list{list-style:none;margin:0;padding:0;position:relative;max-width:860px}
.acq-list::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:var(--stroke-hairline);background:var(--border-hairline)}
.acq-item{position:relative;padding-left:38px}
.acq-item + .acq-item{margin-top:clamp(14px,1.8vw,20px)}
.acq-dot{position:absolute;left:0;top:30px;width:11px;height:11px;border-radius:50%;background:var(--acq-accent,var(--offer-accent))}
/* points du rail : les accents autorisés du déroulé de chaque page */
.offre--formation .acq-item:nth-child(1){--acq-accent:var(--kokoro-blue)}
.offre--formation .acq-item:nth-child(2){--acq-accent:var(--kokoro-pink)}
.offre--formation .acq-item:nth-child(3){--acq-accent:var(--kokoro-green)}
.offre--formation .acq-item:nth-child(4){--acq-accent:var(--kokoro-violet)}
.offre--audit .acq-item:nth-child(1){--acq-accent:var(--kokoro-yellow)}
.offre--audit .acq-item:nth-child(2){--acq-accent:var(--kokoro-sky)}
.offre--audit .acq-item:nth-child(3){--acq-accent:var(--kokoro-green)}
.offre--audit .acq-item:nth-child(4){--acq-accent:var(--kokoro-violet)}
.offre--deploiement .acq-item:nth-child(1){--acq-accent:var(--kokoro-lime)}
.offre--deploiement .acq-item:nth-child(2){--acq-accent:var(--kokoro-sky)}
.offre--deploiement .acq-item:nth-child(3){--acq-accent:var(--kokoro-violet)}
.offre--deploiement .acq-item:nth-child(4){--acq-accent:var(--kokoro-pink)}
.offre--developpement .acq-item:nth-child(1){--acq-accent:var(--kokoro-orange)}
.offre--developpement .acq-item:nth-child(2){--acq-accent:var(--kokoro-sky)}
.offre--developpement .acq-item:nth-child(3){--acq-accent:var(--kokoro-green)}
.offre--developpement .acq-item:nth-child(4){--acq-accent:var(--kokoro-violet)}
.acq-card{background:var(--kokoro-soft-canvas);border-radius:var(--radius-tile-sm);padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px)}
.acq-step{display:block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--offer-accent)}
.acq-title{margin:10px 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(19px,1.8vw,23px);line-height:1.22;letter-spacing:-.02em;color:var(--kokoro-ink)}
.acq-card p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--kokoro-muted)}
.acq-meta{font-size:14.5px}
.acq-meta b{color:var(--kokoro-ink)}

/* citation pleine page (revue Simon 30/08 — le verbatim long de Céline) */
.off-quote--pleine blockquote{max-width:none}

/* ══════════════════════════════════════════════════════════════════════════
   /CAS-CLIENTS/<slug> — mosaïque des pages dédiées (30/08/2026, préfixe .cx-)
   ──────────────────────────────────────────────────────────────────────────
   Cinq tuiles bento à zones FIXES (grid-template-areas, pas d'auto-flow) :
   la grille tient quelles que soient les longueurs de contenu — la rangée
   s'aligne sur sa tuile la plus haute — et s'empile en une colonne sous
   640px. Le gabarit est cas-template.html ; tout le reste de la page
   réutilise l'existant (.pg-hero, .cas4-logo, .off-step__list, .cas-statut,
   .arrow-link, .off-quote, .cnt-/.off-ctapanel). Le body .cas-clients
   fournit déjà la paire accent/on-accent que consomment les puces.
   Palette : Soft Canvas (logo) / Blue (chiffre, accent dominant) / Black
   (contexte) / White hairline (livrables) / Sky (statut) — le trio
   Blue-Sky-Black répond au bento .cas4- de la home. Aucune ombre, aucun
   dégradé, aucun JS. */

.cx-mosaic{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:
    "logo num num"
    "ctx  liv statut";
  gap:clamp(14px,1.8vw,22px);
  align-items:stretch;
}

/* Base tuile : à plat, radius token, même padding que .cas4-card. */
.cx-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;border-radius:var(--radius-tile-sm);padding:clamp(24px,2.6vw,36px)}

/* (a) Logo — tuile claire, logo mono centré. Le fond est posé en noir
   EXPLICITEMENT : le modificateur Pilliot calibre son masque en blanc pour
   la carte Blue, il serait invisible sur Soft Canvas (même règle que
   .cas-liste). Hauteur de boîte commune 60, exception Dynabuy (lockup à
   trois éléments, il pèse moins à hauteur égale — même correction d'œil
   que les cartes preuve). */
.cx-tile--logo{grid-area:logo;background:var(--kokoro-soft-canvas);align-items:center;justify-content:center;min-height:clamp(180px,19vw,250px)}
.cx-tile--logo .cas4-logo{--h:60;max-width:80%;background-color:var(--kokoro-black);-webkit-mask-position:center;mask-position:center}
.cx-tile--logo .cas4-logo--dynabuy{--h:76}

/* (b) Le chiffre — Blue, accent dominant. Stat géante (grammaire
   .cas4-stat, en blanc — règle charte du texte sur Blue) OU accroche
   qualitative : même tuile, même emplacement, même taille. L'eyebrow reste
   à pleine opacité : le blanc sur Blue ne vaut que 3,67, une opacité le
   ferait tomber sous le seuil des petits textes (même arbitrage que
   .off-hero__chip). */
.cx-tile--num{grid-area:num;background:var(--kokoro-blue)}
.cx-tile--num .eyebrow{color:var(--kokoro-white);opacity:1}
.cx-num{margin-top:auto;padding-top:clamp(18px,2.2vw,30px)}
.cx-num__value{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(56px,6.4vw,100px);line-height:.98;letter-spacing:-.05em;color:var(--kokoro-white);overflow-wrap:break-word}
.cx-num__label{margin:clamp(10px,1.2vw,16px) 0 0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(16.5px,1.5vw,19px);line-height:1.35;letter-spacing:-.01em;color:var(--kokoro-white);max-width:34ch}
.cx-accroche{margin:auto 0 0;padding-top:clamp(18px,2.2vw,30px);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(24px,2.5vw,36px);line-height:1.18;letter-spacing:-.03em;color:var(--kokoro-white);max-width:24ch}

/* (c) Contexte — noir, corps en muted-dark comme partout sur Black. */
.cx-tile--ctx{grid-area:ctx;background:var(--kokoro-black)}
.cx-tile--ctx .eyebrow{color:var(--kokoro-white)}
.cx-texte{margin:14px 0 0;font-family:var(--font-body);font-size:16px;line-height:1.62;color:var(--kokoro-muted-dark)}

/* (d) Livrables — White sur section White : c'est le filet qui la dessine.
   La liste est .off-step__list, puces à l'accent fourni par le body. */
.cx-tile--liv{grid-area:liv;background:var(--kokoro-white);border:var(--stroke-hairline) solid var(--border-hairline)}

/* (e) Statut + offre — Sky, texte noir (règle charte). Le statut garde le
   traitement .cas-statut de l'index ; sur Sky son opacité remonte à .7,
   même correction de contraste que .cas4-anon sur la carte Sky. Le lien
   d'offre passe en noir : le bleu lien ne tient pas sur Sky (même règle
   que .cas4-link--onsky). */
.cx-tile--statut{grid-area:statut;background:var(--kokoro-sky)}
.cx-tile--statut .cas-statut{margin-top:0;opacity:.7}
.cx-tile--statut .arrow-link{margin-top:auto;padding-top:clamp(20px,2.4vw,30px);font-size:15.5px;color:var(--kokoro-black)}
.cx-tile--statut .arrow-link:hover{color:var(--kokoro-black)}

/* Retour à l'index dans le CTA final : l'arrow-link vit sur la photographie
   de .cnt-section — blanc, comme tout le bloc titre (le bleu lien y serait
   illisible, même raison que .cas4-more sur Black). */
.cx-retour{margin-top:clamp(22px,2.6vw,32px);color:var(--kokoro-white)}
.cx-retour:hover{color:var(--kokoro-white)}

/* ── Responsive — 980 : deux colonnes ; 640 : la pile ── */
@media (max-width:980px){
  .cx-mosaic{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "logo num"
      "ctx  ctx"
      "liv  statut";
  }
}
@media (max-width:640px){
  .cx-mosaic{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "logo"
      "num"
      "ctx"
      "liv"
      "statut";
  }
  .cx-tile--logo{min-height:150px}
  .cx-tile--logo .cas4-logo{--h:48}
  .cx-tile--logo .cas4-logo--dynabuy{--h:60}
  .cx-num__value{font-size:clamp(50px,14vw,72px)}
  .cx-accroche{font-size:clamp(23px,6vw,30px)}
}

/* ── Trois approches en « tableau-cartes » (proposition A retenue par Simon,
      revue 30/08) : un vrai <table> pour l'alignement, critères à gauche,
      chaque approche devient une colonne-carte — la nôtre en noir + chip. ── */
.off-table--cartes{border-collapse:separate;border-spacing:14px 0;min-width:840px;margin-inline:-14px;width:calc(100% + 28px)}
.off-table--cartes th,.off-table--cartes td{border-bottom:0}
.off-table--cartes tbody th{width:15%;padding-left:0;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-ink);opacity:.72}
.off-table--cartes thead th:not(:first-child){background:var(--kokoro-soft-canvas);opacity:1;border-top-left-radius:var(--radius-card);border-top-right-radius:var(--radius-card);padding-top:clamp(18px,2vw,24px);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:17px;letter-spacing:-.01em;text-transform:none;color:var(--kokoro-ink)}
.off-table--cartes td{background:var(--kokoro-soft-canvas);border-top:var(--stroke-hairline) solid var(--border-hairline);color:var(--kokoro-muted)}
.off-table--cartes tbody tr:first-child td{border-top:0}
.off-table--cartes tbody tr:last-child td{border-bottom-left-radius:var(--radius-card);border-bottom-right-radius:var(--radius-card);padding-bottom:clamp(20px,2.2vw,26px)}
.off-table--cartes thead th.off-table__own{background:var(--kokoro-black);color:var(--kokoro-white)}
.off-table--cartes td.off-table__own{background:var(--kokoro-black);color:var(--kokoro-white);font-family:var(--font-body);font-weight:var(--weight-medium);border-top-color:rgba(255,255,255,.18)}
.off-table--cartes tbody tr:first-child td.off-table__own{border-top:0}
.ot-chip{display:inline-block;margin-left:10px;padding:3px 11px 4px;border-radius:var(--radius-pill);background:var(--offer-accent,var(--kokoro-yellow));color:var(--kokoro-black);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;vertical-align:2px;white-space:nowrap}

/* cartes équipe sans photo (Salomé, Mailys — photos à venir, revue Simon 30/08) */
.eq-card__photo--attente{display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border-radius:50%;background:var(--kokoro-soft-canvas);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:38px;line-height:1;color:var(--kokoro-ink)}

/* fond photographique du formulaire de contact (revue Simon 30/08) */
.ct-form--photo{position:relative;overflow:hidden}
.ct-form--photo .ct-form__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ct-form--photo::after{content:"";position:absolute;inset:0;background:rgba(237,234,221,.55)}
.ct-form--photo .container{position:relative;z-index:1}

/* ── Benchmark du hub /outils (tableau ressuscité et mis à jour, 30/08) ── */
  /* ── Benchmark : compléments du composant .off-table ── */
  .off-table--bench{min-width:920px}
  .off-table--bench tbody th[scope="row"]{width:32%;min-width:250px}
  .off-table--bench td{white-space:nowrap}
  .off-table--bench td:nth-child(6){white-space:normal;min-width:150px}
  .bt-cat{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-ink);opacity:.62;padding-top:clamp(38px,4.2vw,54px)}
  .off-table--bench tbody tr:first-child .bt-cat{padding-top:0}
  .bt-desc{display:block;margin-top:5px;font-family:var(--font-body);font-weight:var(--weight-regular);font-size:13.5px;line-height:1.5;letter-spacing:0;color:var(--kokoro-muted)}
  .bt-reco{display:inline-block;margin-left:10px;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--kokoro-ink);opacity:.62;white-space:nowrap;vertical-align:2px}
  .bt-num{font-variant-numeric:tabular-nums}
  .bt-global{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:16px;color:var(--kokoro-black)}
  .off-table--bench .arrow-link{font-size:15px}

/* le chiffre des cartes stat ne déborde plus (revue 30/08 : « +150 » coupé
   sur /cas-clients, où les cartes sont plus étroites que sur la home).
   PAS de container-type ici : la grille dimensionne ses colonnes au contenu,
   le confinement faisait s'effondrer la carte à 48px. */
.cas-clients .cas4-stat__num{font-size:clamp(54px,4.6vw,84px)}
.cas-clients .cas4-stat__label{font-size:clamp(15px,1.3vw,17px)}

/* hero des pages cas : photo d'illustration sous voile sable (revue 30/08) */
.pg-hero--photo{position:relative;overflow:hidden}
.pg-hero--photo .pg-hero__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-hero--photo::after{content:"";position:absolute;inset:0;background:rgba(237,234,221,.86)}
.pg-hero--photo .container{position:relative;z-index:1}

/* indicateurs d'À propos : chiffres alignés en haut de carte (revue 30/08) */
.cas4-row--haut .cas4-stat{margin-top:0}

/* attribution avec portrait (citation DERBI à la une — revue 30/08) */
.cas4-attrib--photo{display:flex;align-items:center;gap:12px}
.cas4-attrib__photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}

/* relance noire avec illustration (revue 30/08) */
.pr-cta--photo{position:relative;overflow:hidden}
.pr-cta__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pr-cta--photo::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.58)}
.pr-cta--photo > *:not(.pr-cta__fond){position:relative;z-index:1}

/* lockup du footer : la fleur rejoint le wordmark (revue 30/08) */
.footer-lockup{display:inline-flex;align-items:center;gap:14px}
.footer-lockup__fleur{width:clamp(34px,3vw,44px);height:auto;flex:0 0 auto}
.footer-lockup__fleur path{fill:var(--kokoro-white)}

/* mascotte de hero — à droite du titre, derrière le texte (revue 30/08) */
.pg-hero{position:relative;overflow:hidden}
.pg-hero__mascotte{position:absolute;right:clamp(-52px,-3vw,-26px);bottom:clamp(-64px,-3.6vw,-34px);width:clamp(200px,21vw,320px);height:auto;transform:rotate(-8deg);z-index:0;pointer-events:none}
.pg-hero .container{position:relative;z-index:1}
@media (max-width:760px){.pg-hero__mascotte{width:118px;right:-28px;bottom:-30px;opacity:1}}

/* bandeau partenaires pleine largeur, tout en haut du hub /outils (revue 30/08) */
.bande-partenaires{background:var(--kokoro-black);color:var(--kokoro-white);padding-block:12px}
.bande-partenaires__ligne{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bande-partenaires__label{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;opacity:.7;margin-right:8px}
.bande-partenaires .ot-chip{margin-left:0}

/* ══════════════════════════════════════════════════════════════════════════
   COMPARATIFS « X vs Y » — habillage DA des 13 duels (30/08/2026, préfixe .vs-)
   Tout le reste vient de l'existant : .pg-hero, .h1-capsule, .off-table--cartes,
   .cmp-verdict/.cmp-pc/.cmp-cas, .faq-*, .pr-cta, .cnt-/.off-ctapanel.
   ══════════════════════════════════════════════════════════════════════════ */

/* Accents par outil. La paire couleur/encre suit la charte : blanc réservé
   aux gros corps sur Blue/Green/Violet, noir sur Sky/Yellow/Lime/Pink —
   et pas d'Orange ici (jamais de blanc dessus). */
.vs-a-blue{--vs-accent:var(--kokoro-blue);--vs-on:var(--kokoro-white)}
.vs-a-sky{--vs-accent:var(--kokoro-sky);--vs-on:var(--kokoro-black)}
.vs-a-yellow{--vs-accent:var(--kokoro-yellow);--vs-on:var(--kokoro-black)}
.vs-a-lime{--vs-accent:var(--kokoro-lime);--vs-on:var(--kokoro-black)}
.vs-a-pink{--vs-accent:var(--kokoro-pink);--vs-on:var(--kokoro-black)}
.vs-a-green{--vs-accent:var(--kokoro-green);--vs-on:var(--kokoro-white)}
.vs-a-violet{--vs-accent:var(--kokoro-violet);--vs-on:var(--kokoro-white)}

/* Hero : copie à gauche, duel de formes à droite — les deux silhouettes
   organiques de la home, une par outil, qui se chevauchent légèrement.
   Le « X vs Y » incarné à la DA, sans logos tiers. */
.vs-hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.vs-duel{position:relative;justify-self:center;width:100%;max-width:430px;aspect-ratio:43/38}
.vs-duel__forme{position:absolute;height:auto}
.vs-duel__forme--a{left:0;top:0;width:55%}
.vs-duel__forme--b{right:0;bottom:0;width:61%}
.vs-duel__forme path{fill:var(--vs-accent,var(--kokoro-blue))}
.vs-duel__forme text{fill:var(--vs-on,var(--kokoro-white));font-family:var(--font-display);font-weight:var(--weight-semibold);letter-spacing:-.02em}
@media (max-width:900px){
  .vs-hero__grid{grid-template-columns:minmax(0,1fr)}
  .vs-duel{justify-self:start;max-width:300px;margin-top:clamp(26px,4.5vw,40px)}
}

/* Cartes de score : Soft Canvas, la note en filigrane géant (grammaire
   .off-deliv__num) teinté à l'accent de l'outil, chip pour la
   recommandation (Yellow, encre noire — lisible partout). */
.vs-face{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,1.6vw,20px);align-items:stretch;margin-top:clamp(28px,3.2vw,40px)}
.vs-face__card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;background:var(--kokoro-soft-canvas);border-radius:var(--radius-tile-sm);padding:clamp(24px,2.8vw,38px);min-height:clamp(180px,20vw,240px)}
.section--canvas .vs-face__card{background:var(--kokoro-white)}
.vs-face__card > *{position:relative}
.vs-face__filigrane{position:absolute;right:-8px;top:-24px;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(110px,12vw,170px);line-height:1;letter-spacing:-.06em;color:var(--vs-accent,var(--kokoro-blue));opacity:.16;pointer-events:none}
.vs-face__nom{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(20px,2.1vw,27px);line-height:1.14;letter-spacing:-.03em;color:var(--kokoro-ink);max-width:14ch}
.vs-face__note{margin-top:auto;padding-top:clamp(18px,2.2vw,28px);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(42px,4.4vw,60px);line-height:.95;letter-spacing:-.05em;color:var(--kokoro-black)}
.vs-face__note small{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:15px;letter-spacing:0;color:var(--kokoro-muted)}
.vs-face__reco{display:inline-flex;align-self:flex-start;margin-top:14px;padding:7px 15px 8px;border-radius:var(--radius-pill);background:var(--kokoro-yellow);color:var(--kokoro-black);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:11.5px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.vs-face__vs{display:flex;align-items:center;justify-content:center;font-family:var(--font-editorial);font-weight:var(--weight-regular);font-size:clamp(21px,2.2vw,28px);color:var(--kokoro-muted);padding-inline:clamp(2px,.8vw,8px)}
@media (max-width:640px){
  .vs-face{grid-template-columns:minmax(0,1fr)}
  .vs-face__vs{padding-block:2px}
  .vs-face__card{min-height:0}
}

/* Tableau : traitement colonnes-cartes du site ; la colonne « Gagnant »
   reste une annotation à droite — pas de carte, la pastille .cmp-gagnant
   suffit. Sur Soft Canvas, les colonnes-cartes passent en White. */
.vs-table thead th:last-child{background:transparent;border-radius:0}
.vs-table td:last-child{background:transparent;border-top-color:transparent}
.section--canvas .vs-table thead th:not(:first-child):not(:last-child){background:var(--kokoro-white)}
.section--canvas .vs-table td:not(:last-child){background:var(--kokoro-white)}

/* FAQ : les questions gardent leur <h3> (SEO) dans le résumé de
   l'accordéon .faq-item du site. */
.vs-faq .faq-q h3{margin:0;font:inherit;letter-spacing:inherit;color:inherit}

/* Le titre posé en .section-head porte déjà sa respiration : le bloc qui
   suit ne reprend pas la marge inter-blocs du comparatif. */
.comparatif .container > .section-head + *{margin-top:0}

/* ── Benchmark du hub /outils — proposition A retenue (index éditorial, 30/08) ── */
/* ══ A · L'index éditorial — rangées à filets, zéro tableau ══
   Le score global prend la place de la forme numérotée du pattern .ofv- :
   un grand chiffre Young Serif ancre chaque rangée, le reste se lit en
   ligne. Catégories en eyebrow, filets hairline partout. */
.va-cat + .va-cat{margin-top:clamp(44px,5.4vw,72px)}
.va-cat > .eyebrow{margin-bottom:16px}
.va-rows{list-style:none;margin:0;padding:0;border-top:var(--stroke-hairline) solid var(--border-hairline)}
/* Pistes FIXES pour subs / tarif / lien : en auto, les rangées sans lien
   Comparatif décalaient leurs colonnes — l'index doit s'aligner d'une
   rangée à l'autre comme un tableau, sans en être un. */
.va-row{display:grid;grid-template-columns:clamp(64px,6.5vw,88px) minmax(0,1fr) 238px clamp(148px,15vw,182px) 108px;grid-template-areas:"score name subs tarif link";align-items:center;column-gap:clamp(18px,2.6vw,42px);padding-block:clamp(18px,2.2vw,26px);border-bottom:var(--stroke-hairline) solid var(--border-hairline);transition:background-color 160ms linear}
.va-row:hover{background:var(--kokoro-soft-canvas)}
.va-scorecell{grid-area:score}
.va-score{display:block;font-family:var(--font-editorial);font-weight:var(--weight-regular);font-size:clamp(28px,2.8vw,38px);line-height:1;letter-spacing:-.01em;color:var(--kokoro-black);font-variant-numeric:tabular-nums}
.va-namecell{grid-area:name;min-width:0}
.va-name{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(19px,1.9vw,23px);line-height:1.18;letter-spacing:-.02em;color:var(--kokoro-ink)}
.va-name .ot-chip,.va-name .bt-reco{vertical-align:3px}
.va-desc{margin:5px 0 0;font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--kokoro-muted);max-width:46ch}
.va-subs{grid-area:subs;display:flex;column-gap:20px}
.va-sub{display:flex;flex-direction:column;gap:5px}
.va-sub span{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:10px;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;color:var(--kokoro-muted)}
.va-sub b{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:15.5px;line-height:1;color:var(--kokoro-black);font-variant-numeric:tabular-nums}
.va-tarif{grid-area:tarif;font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--kokoro-muted)}
.va-link{grid-area:link;justify-self:end;white-space:nowrap;font-size:15px}
.va-link svg{width:17px;height:17px}
@media (max-width:900px){.va-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name score" "subs subs" "tarif tarif" "link link";row-gap:12px;align-items:start;column-gap:18px}.va-scorecell{justify-self:end}.va-link{justify-self:start}}
@media (max-width:560px){.va-name{font-size:19px}.va-score{font-size:26px}}

/* 404 : la mascotte pensive en grand face au message (revue 30/08) */
.err__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,70px);align-items:center}
.err__mascotte{width:clamp(200px,26vw,360px);height:auto;justify-self:center;transform:rotate(-8deg)}
@media (max-width:760px){.err__grid{grid-template-columns:1fr}.err__mascotte{width:180px;justify-self:start}}

/* ══════════════════════════════════════════════════════════════════════════
   LANDINGS LONGUE TRAÎNE (.ld-) — refonte DA du 31/08/2026
   ──────────────────────────────────────────────────────────────────────────
   Onze pages (agence-<outil>, agence-ia-<ville/segment>, formation-ia-opco).
   Tout le reste vient de l'existant : .pg-hero, .off-trust, .logo-band-wrap,
   .off-intro-grid / .photo-blob, .acq-list, .off-steps, .lp-duo, .pr-cards,
   .off-table, .faq-*, .pr-cta--photo, .cnt-. Le préfixe .ld- ne couvre que
   le hero deux colonnes et ses médias — vidéo pour les trois pages ville,
   photographie masquée (silhouettes de la home) ou mascotte pour les autres.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le hero garde la grammaire .pg-hero (fond Soft Canvas, dégagement nav) et
   passe en deux colonnes : copie à gauche, média à droite. */
.ld-hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,76px);align-items:center;margin-top:clamp(22px,2.6vw,32px)}
.ld-hero__media{justify-self:center;align-self:center;width:100%;max-width:440px}
.ld-hero__media svg,.ld-hero__media video{display:block;width:100%;height:auto}
.ld-hero__media video{border-radius:var(--radius-tile-sm);background:var(--kokoro-black)}
/* Mascotte : un personnage, pas une scène — plus petite qu'une photo, posée
   avec la légère rotation canonique du composant Expression. */
.ld-hero__media--mascotte{max-width:min(300px,60vw)}
.ld-hero__media--mascotte img{display:block;width:100%;height:auto;transform:rotate(-6deg)}
@media (max-width:900px){
  .ld-hero__grid{grid-template-columns:minmax(0,1fr)}
  .ld-hero__media{max-width:380px;margin-top:clamp(26px,4.5vw,40px);justify-self:start}
  .ld-hero__media--mascotte{max-width:200px}
}

/* Points du rail .acq-list sur les landings : Blue en tête (accent du site),
   puis les touches neutres du déroulé — jamais les accents des autres offres
   en série, pour ne pas se lire comme un renvoi. */
.landing .acq-item:nth-child(4n+2){--acq-accent:var(--kokoro-sky)}
.landing .acq-item:nth-child(4n+3){--acq-accent:var(--kokoro-green)}
.landing .acq-item:nth-child(4n)  {--acq-accent:var(--kokoro-violet)}

/* Respiration entre deux compositions successives d'une même section — les
   landings enchaînent plusieurs blocs DA sous un seul id d'ancre, là où les
   pages d'offre changent de section. */
.ld-bloc{margin-top:clamp(44px,5.4vw,72px)}

/* Liste .off-step__list posée dans une relance noire (.pr-cta--photo) : le
   gris de corps ne tient pas sur Black — même encre que le corps du .pr-cta. */
.ld-cta-liste li{color:var(--kokoro-muted-dark)}

/* ── Index des cas clients en mosaïque bento (proposition A retenue,
      revue Simon 31/08 — « plus de couleur ») : la grammaire .cas4- de la
      home étendue aux dix missions, chaque tuile cliquable vers sa page. ── */
.ma-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"cli cli pil" "dyn der buro" "one one wba" "ass aff anon";gap:clamp(14px,1.8vw,22px);align-items:stretch}
.ma-cli{grid-area:cli}.ma-pil{grid-area:pil}.ma-dyn{grid-area:dyn}.ma-der{grid-area:der}.ma-buro{grid-area:buro}.ma-one{grid-area:one}.ma-wba{grid-area:wba}.ma-ass{grid-area:ass}.ma-aff{grid-area:aff}.ma-anon{grid-area:anon}
.ma-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;border-radius:var(--radius-tile-sm);padding:clamp(24px,2.6vw,36px);min-height:clamp(210px,21vw,270px);text-decoration:none;color:inherit}
.ma-tile--sky{background:var(--kokoro-sky)}
.ma-tile--canvas{background:var(--kokoro-soft-canvas)}
.ma-tile--blue{background:var(--kokoro-blue)}
.ma-tile--noir{background:var(--kokoro-black)}
.ma-tile--yellow{background:var(--kokoro-yellow)}
.ma-tile--lime{background:var(--kokoro-lime)}
.ma-tile--violet{background:var(--kokoro-violet)}
.ma-tile--pink{background:var(--kokoro-pink)}
.ma-tile--green{background:var(--kokoro-green)}
.ma-tile--blanc{background:var(--kokoro-white);border:var(--stroke-hairline) solid var(--border-hairline)}
.ma-tile .cas4-logo{display:block;background-color:var(--kokoro-black)}
.ma-tile--blue .cas4-logo,.ma-tile--violet .cas4-logo,.ma-tile--green .cas4-logo{background-color:var(--kokoro-white)}
.ma-tile .eyebrow{margin-top:14px}
.ma-tile--sky .eyebrow,.ma-tile--sky .cas-statut,.ma-tile--yellow .eyebrow,.ma-tile--yellow .cas-statut,.ma-tile--lime .eyebrow,.ma-tile--lime .cas-statut,.ma-tile--pink .eyebrow,.ma-tile--pink .cas-statut{opacity:.7}
.ma-tile--blue .eyebrow,.ma-tile--blue .cas-statut,.ma-tile--violet .eyebrow,.ma-tile--violet .cas-statut,.ma-tile--green .eyebrow,.ma-tile--green .cas-statut{color:var(--kokoro-white);opacity:.85}
.ma-tile--noir .eyebrow{color:var(--kokoro-white)}
.ma-tile--noir .cas-statut{color:var(--kokoro-white);opacity:.7}
.ma-tile--noir .cas4-anon{color:var(--kokoro-white)}
.ma-tile--noir .cas4-stat__num,.ma-tile--noir .cas4-stat__label,.ma-tile--blue .cas4-stat__label,.ma-tile--violet .cas4-stat__num,.ma-tile--violet .cas4-stat__label,.ma-tile--green .ma-text,.ma-tile--violet .ma-text,.ma-tile--blue .ma-text{color:var(--kokoro-white)}
.ma-text{margin:clamp(16px,1.8vw,24px) 0 0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(18px,1.7vw,23px);line-height:1.42;letter-spacing:-.015em;color:var(--kokoro-ink);max-width:36ch}
.ma-tile .cas-statut{margin-top:auto;padding-top:clamp(14px,1.8vw,20px)}
.ma-voir{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(12px,1.4vw,18px);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:15.5px;line-height:1.3;color:var(--kokoro-blue-link)}
.ma-voir svg{width:17px;height:17px;flex-shrink:0;transition:transform 160ms linear}
.ma-voir svg path{fill:currentColor}
.ma-tile:hover .ma-voir svg{transform:translateX(4px)}
.ma-tile--sky .ma-voir,.ma-tile--yellow .ma-voir,.ma-tile--lime .ma-voir,.ma-tile--pink .ma-voir{color:var(--kokoro-black)}
.ma-tile--blue .ma-voir,.ma-tile--violet .ma-voir,.ma-tile--green .ma-voir{color:var(--kokoro-white)}
.ma-tile:focus-visible{outline:3px solid var(--kokoro-black);outline-offset:3px}
@media (max-width:980px){
  .ma-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"cli cli" "pil dyn" "der buro" "one one" "wba anon" "ass aff"}
}
@media (max-width:640px){
  .ma-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"cli" "pil" "dyn" "der" "buro" "one" "wba" "ass" "aff" "anon"}
  .ma-tile{min-height:180px}
}
@media (prefers-reduced-motion:reduce){.ma-voir svg{transition:none}.ma-tile:hover .ma-voir svg{transform:none}}

/* ── Photo d'équipe réelle (home § cabinet + /a-propos § équipe) ─────── */
.photo-equipe{margin:0}
.photo-equipe img{display:block;width:100%;height:auto;max-width:none;border-radius:var(--radius-tile-sm)}
.eq-photo{max-width:880px;margin:clamp(30px,3.6vw,48px) auto 0}

/* ══════════════════════════════════════════════════════════════════════════
   COMPATIBILITÉ components.js — ajout du site, absent du design system
   ──────────────────────────────────────────────────────────────────────────
   Les pages DA 2026 chargent components.js pour le consentement CNIL, GTM,
   les events dataLayer et les UTM cal.com. Elles n'ont VOLONTAIREMENT pas de
   placeholders #kokoro-nav / #kokoro-footer : le script n'injecte donc ni la
   nav ni le footer Glass Light — chaque page porte les siens, à la DA.

   Restent trois blocs de CSS que components.js injecte SANS condition. Ils
   sont écrits en :where() (spécificité 0), donc tout sélecteur de classe
   normal les bat. On s'en sert pour deux choses :

     A. neutraliser les propriétés qui fuient sur des noms de classes que la
        DA emploie aussi (.footer-brand, .footer-bottom) ;
     B. rhabiller à la DA la bannière cookies et le CTA collant, qui sont
        injectés en dur et se retrouveraient sinon en Montserrat / #3A86FF
        par-dessus une page Sen / #2782FF.

   Si un jour la nav et le footer de components.js passent à la DA 2026, ce
   bloc devient inutile — le supprimer plutôt que de l'empiler.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. Neutralisation des fuites ───────────────────────────────────────── */
/* :where(.footer-brand){max-width:300px} écraserait la colonne du wordmark. */
.footer .footer-brand{max-width:none}
/* :where(.footer-bottom){max-width:1100px;margin:0 auto;padding:16px 25px} :
   site.css ne pose que margin-top et padding-top, le reste du raccourci
   passait au travers (barre centrée sur 1100px + padding latéral parasite). */
.footer .footer-bottom{max-width:none;margin-inline:0;margin-bottom:0;padding-inline:0;padding-bottom:0}
/* :where(.footer-bottom a){opacity:.92} ternissait les liens légaux. */
.footer .footer-bottom a{opacity:1}

/* ── B. Bannière de consentement, à la DA ───────────────────────────────── */
.kokoro-consent-banner{
  background:var(--kokoro-white);
  border:var(--stroke-hairline) solid var(--border-hairline);
  border-radius:var(--radius-tile-sm);
  box-shadow:var(--shadow-glass-bar);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:26px;
  font-family:var(--font-body);
}
.kokoro-consent-banner h3{
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:19px;line-height:1.25;color:var(--kokoro-black);margin:0 0 8px;
}
.kokoro-consent-banner p{
  font-family:var(--font-body);font-size:15px;line-height:1.5;
  color:var(--kokoro-muted);margin:0 0 18px;
}
.kokoro-consent-banner p a{color:var(--kokoro-blue-link);text-decoration:underline}
.kokoro-consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.kokoro-consent-actions button{
  flex:1;min-width:130px;
  font-family:var(--font-display);font-weight:var(--weight-medium);
  font-size:16px;line-height:1;padding:15px 22px;
  border-radius:var(--radius-pill);cursor:pointer;
  transition:background-color 140ms linear,color 140ms linear,border-color 140ms linear;
}
.kokoro-consent-accept{background:var(--kokoro-black);color:var(--kokoro-white);border:var(--stroke-hairline) solid var(--kokoro-black);box-shadow:none}
.kokoro-consent-accept:hover{background:var(--kokoro-blue);border-color:var(--kokoro-blue);transform:none}
.kokoro-consent-refuse{background:var(--kokoro-white);color:var(--kokoro-black);border:var(--stroke-hairline) solid var(--border-hairline)}
.kokoro-consent-refuse:hover{background:var(--kokoro-soft-canvas);border-color:var(--kokoro-black)}

/* ── B (suite). CTA collant mobile, à la DA ─────────────────────────────── */
.kokoro-sticky-cta{
  background:var(--kokoro-white);
  border-top:var(--stroke-hairline) solid var(--border-hairline);
  box-shadow:0 -5px 40px rgba(0,0,0,.10);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:12px 18px;color:var(--kokoro-black);
}
.kokoro-sticky-cta .sticky-cta-text{
  font-family:var(--font-body);font-weight:var(--weight-medium);
  font-size:15px;line-height:1.3;color:var(--kokoro-black);
}
.kokoro-sticky-cta .sticky-cta-button{
  background:var(--kokoro-black);color:var(--kokoro-white);
  font-family:var(--font-display);font-weight:var(--weight-medium);
  font-size:15px;line-height:1;padding:13px 24px;
  border-radius:var(--radius-pill);box-shadow:none;
}