/* ============================================================================
   ASSIST — tokens.css
   ----------------------------------------------------------------------------
   Source unique de vérité du système. AUCUNE valeur de couleur, de rayon,
   d'ombre ou de durée ne doit apparaître en dur ailleurs dans le projet.

   La palette n'est pas inventée : elle prolonge l'identité Assist existante
   (papier ivoire, encre, vert forêt, famille Satoshi) telle qu'elle vit déjà
   dans `app/globals.css` du produit. Ce qui est AJOUTÉ ici, c'est la
   discipline sémantique à quatre rôles — Assist n'avait qu'un accent, ce qui
   suffit pour une page mais pas pour cent deux.
   ========================================================================= */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,800,900&display=swap");

:root {
  /* ==========================================================================
     1. FONDS
     --------------------------------------------------------------------------
     Le fond par défaut n'est PAS blanc. #FDFCF9 est un ivoire chaud très
     désaturé. C'est la décision la plus structurante du système : elle rend le
     blanc pur disponible comme COULEUR D'ÉLÉVATION. Une carte blanche posée sur
     l'ivoire « monte » d'elle-même, sans ombre lourde ni bordure marquée. Sur
     un fond blanc, il aurait fallu des bordures grises ou des ombres appuyées
     pour obtenir la même séparation — et ça se voit immédiatement.
     ======================================================================== */
  --bg: #fdfcf9;          /* ivoire — fond de page par défaut */
  --bg-alt: #f6f4ef;      /* même teinte, un cran plus soutenue — alternance */
  --bg-elevated: #ffffff; /* blanc pur — cartes, surfaces qui montent */
  --bg-dark: #0d1a14;     /* nuit désaturée teintée forêt — sections dramatiques */
  --bg-darker: #08110c;   /* un cran plus sombre */

  /* ==========================================================================
     2. ACCENTS — quatre couleurs, quatre rôles, zéro exception
     --------------------------------------------------------------------------
     RÈGLE ABSOLUE : une couleur ne sert JAMAIS à décorer. Choisir un accent
     « parce que c'est plus joli ici » casse le système.

     Quand la couleur est sémantique, un visiteur qui scrolle vite sans lire
     comprend malgré tout la structure de l'argumentaire :
       brique = voici ton problème · émeraude = voici ton gain · bleu = clique ici.
     C'est de la lisibilité structurelle gratuite.
     ======================================================================== */

  /* --brand : identité. Logo, wordmark, surlignage du nom, CTA du header,
     CTA des landing pages. C'est le vert forêt d'Assist, inchangé.
     Il est volontairement très sombre : il « flotte » au-dessus du contenu
     sans entrer en concurrence avec --action, qui appartient au contenu. */
  --brand: #14432a;
  --brand-2: #1e5f3b;
  --brand-3: #2c7d51;
  --brand-tint: rgba(20, 67, 42, 0.07);
  --brand-tint-2: rgba(20, 67, 42, 0.14);

  /* --action : tout ce qui est cliquable. CTA primaire de contenu, liens,
     entrée de nav active. Le bleu est la seule couleur que l'œil lit
     spontanément comme « cliquable », et il tranche franchement sur le vert. */
  --action: #1b5fd1;
  --action-dark: #164ba6;
  --action-light: #4b86e4;
  --action-tint: rgba(27, 95, 209, 0.08);
  --action-tint-2: rgba(27, 95, 209, 0.16);

  /* --proof : preuve et gain. Chiffres positifs, encadrés « À RETENIR »,
     statuts de succès, résultat du simulateur. Émeraude vive — assez éloignée
     en valeur du forêt pour ne jamais être confondue avec la marque. */
  --proof: #0fa36b;
  --proof-dark: #0b8155;
  --proof-tint: rgba(15, 163, 107, 0.09);
  --proof-tint-2: rgba(15, 163, 107, 0.18);

  /* --pain : douleur. Section problème UNIQUEMENT, pertes, coûts, alertes.
     N'apparaît nulle part ailleurs — c'est ce qui lui donne sa force. */
  --pain: #d14524;
  --pain-dark: #a8351a;
  --pain-tint: rgba(209, 69, 36, 0.07);
  --pain-tint-2: rgba(209, 69, 36, 0.15);

  /* ==========================================================================
     3. TEXTE
     --------------------------------------------------------------------------
     Le corps de texte n'est JAMAIS en noir pur : #5c5c5c à 17px/1.7 se lit
     nettement plus longtemps sans fatigue, et le noir reste disponible pour
     les titres — donc la hiérarchie se lit aussi par la densité d'encre.
     ======================================================================== */
  --text: #0f0f0e;
  --text-secondary: #5c5c5c;
  --text-muted: #8f8a81;
  --text-inv: #f6f4ef;
  --text-inv-muted: #8fa79a;

  /* ==========================================================================
     4. BORDURES ET FILETS
     ======================================================================== */
  --border: rgba(15, 15, 14, 0.07);
  --border-strong: rgba(15, 15, 14, 0.16);
  --border-hover: rgba(27, 95, 209, 0.18);
  --border-dark: rgba(255, 255, 255, 0.09);
  --border-dark-strong: rgba(255, 255, 255, 0.18);

  /* ==========================================================================
     5. OMBRES — deux familles, deux intentions
     --------------------------------------------------------------------------
     Famille classique : « cet élément FLOTTE au-dessus ». Cartes, panneaux,
     surfaces qui se détachent du fond.

     Famille néomorphique (double ombre claire + sombre) : « cet élément est un
     OBJET que je peux manipuler ». STRICTEMENT réservée aux contrôles
     interactifs — sliders, champs de saisie, chips sélectionnables. C'est elle
     qui donne au simulateur un toucher tactile que des ombres classiques ne
     produisent jamais. L'utiliser sur une carte tuerait l'effet partout.
     ======================================================================== */
  --shadow-sm: 0 1px 3px rgba(15, 15, 14, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 15, 14, 0.06);
  --shadow-lg: 0 12px 40px rgba(15, 15, 14, 0.08);
  --shadow-xl: 0 24px 64px rgba(15, 15, 14, 0.12);
  --shadow-hover: 0 16px 48px rgba(15, 15, 14, 0.1),
    0 0 0 1px rgba(27, 95, 209, 0.08);
  --shadow-dark: 0 24px 64px rgba(0, 0, 0, 0.45);

  --shadow-out: 5px 5px 14px rgba(15, 15, 14, 0.05),
    -5px -5px 14px rgba(255, 255, 255, 0.8);
  --shadow-out-lg: 8px 8px 24px rgba(15, 15, 14, 0.06),
    -8px -8px 24px rgba(255, 255, 255, 0.9);
  --shadow-in: inset 3px 3px 7px rgba(15, 15, 14, 0.04),
    inset -3px -3px 7px rgba(255, 255, 255, 0.7);
  --shadow-in-input: inset 3px 3px 6px rgba(15, 15, 14, 0.05),
    inset -3px -3px 6px rgba(255, 255, 255, 0.5);

  /* Variantes des accents sur fond sombre.
     Un accent calculé pour l'ivoire perd son contraste sur la nuit : il faut
     l'éclaircir, sinon les pastilles de statut deviennent illisibles. Ce sont
     les MÊMES rôles, pas de nouvelles couleurs. */
  --proof-on-dark: #4fd8a3;
  --action-on-dark: #8db4f0;
  --pain-on-dark: #f0906f;

  /* Lueurs — uniquement sur fond sombre, pour rattacher un élément à son rôle */
  --glow-action: 0 0 24px rgba(27, 95, 209, 0.24);
  --glow-proof: 0 0 18px rgba(15, 163, 107, 0.3);
  --glow-brand: 0 0 24px rgba(44, 125, 81, 0.3);

  /* ==========================================================================
     6. FORMES — quatre valeurs, pas quatorze
     --------------------------------------------------------------------------
     Si un composant réclame un 13px ou un 22px, c'est qu'il a été dessiné hors
     système : on corrige le composant, pas l'échelle. Le site de référence
     audité a laissé filer 14 rayons distincts — c'est exactement le défaut
     qu'on ne reproduit pas.
     ======================================================================== */
  --radius-lg: 24px;   /* surfaces qui portent tout un écran : plan mis en avant, tunnel */
  --radius: 16px;      /* valeur de référence : cartes, fenêtres, encadrés */
  --radius-sm: 10px;   /* contrôles et petits blocs */
  --radius-xs: 6px;    /* puces, pastilles, cellules d'agenda */
  --radius-micro: 3px; /* barres de graphique et jauges, à l'échelle du pixel */
  --radius-pill: 999px;

  /* ==========================================================================
     7. MOUVEMENT
     ======================================================================== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-interactions seules */
  --duration: 0.35s;
  --duration-fast: 0.18s;
  --duration-slow: 0.7s;

  /* ==========================================================================
     8. GABARIT
     ======================================================================== */
  --max-w: 1200px;      /* cœur marketing, articles */
  --max-w-lp: 1100px;   /* landing pages SEO */
  --max-w-read: 820px;  /* colonne de lecture juridique */
  --gutter: clamp(20px, 4vw, 32px);
  --nav-h: 64px;

  /* ==========================================================================
     9. TYPOGRAPHIE
     --------------------------------------------------------------------------
     UNE seule famille pour tout le site. Pas de serif, pas de police
     d'affichage secondaire. Toute la hiérarchie passe par le poids et le
     tracking. Satoshi est la famille du produit Assist — on ne la change pas.

     Le tracking négatif n'est PAS cosmétique. Une grotesque en 900 à 68px avec
     letter-spacing: normal paraît gonflée et amateur ; à −0.03em elle devient
     un titre de magazine. C'est un réglage, pas un détail.
     ======================================================================== */
  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  --fs-body: 17px;
  --lh-body: 1.7;

  /* Barème des h1, corrélé à l'importance commerciale de la page.
     Ces couples taille/poids/tracking sont appliqués sur les 102 pages sans
     exception — c'est l'erreur de cohérence la plus fréquente et la plus
     visible quand elle n'est pas tenue. */
  --h1-home: 68px;
  --h1-home-track: -0.03em;
  --h1-produit: 52px;
  --h1-produit-track: -0.025em;
  --h1-outil: 56px;
  --h1-outil-track: -0.025em;
  --h1-tarifs: 52px;
  --h1-tarifs-track: -0.02em;
  --h1-hub: 56px;
  --h1-hub-track: -0.03em;
  --h1-lp: 60px;
  --h1-lp-track: -0.015em;
  --h1-compare: 52px;
  --h1-compare-track: -0.015em;
  --h1-article: 48px;
  --h1-article-track: -0.02em;
  --h1-legal: 48px;
  --h1-legal-track: -0.025em;

  /* ==========================================================================
     10. TEXTURES — elles portent les sections calmes sans concurrencer le texte
     ======================================================================== */
  --texture-grid: linear-gradient(rgba(15, 15, 14, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 15, 14, 0.035) 1px, transparent 1px);
  --texture-grid-size: 56px 56px;
  --texture-stripes: repeating-linear-gradient(
    -45deg,
    rgba(15, 15, 14, 0.016) 0 1px,
    transparent 1px 11px
  );

  /* ==========================================================================
     11. RYTHME VERTICAL
     --------------------------------------------------------------------------
     Le padding de section n'est PAS une constante. L'espace est un signal
     d'importance : la section la plus lourde narrativement reçoit le double de
     la norme. Ces paliers sont nommés par intention, pas par taille.
     ======================================================================== */
  --pad-xs: 40px;
  --pad-sm: 60px;
  --pad-md: 80px;
  --pad-lg: 100px;
  --pad-xl: 140px;
  --pad-2xl: 200px;

  --z-nav: 1000;
  --z-panel: 1010;
  --z-scrim: 1005;
  --z-cookie: 1100;
  --z-fab: 900;
}


/* ============================================================================
   ASSIST — base.css
   Reset, échelle typographique, gabarit, sections, utilitaires de fond.
   Zéro valeur en dur : tout vient de tokens.css.
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  /* Le body ne défile JAMAIS horizontalement. Les tableaux larges et les
     carrousels gèrent leur propre débordement dans leur conteneur. */
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------------------------
   Titres — le barème de tokens.css, appliqué par classe de famille de page.
   La classe vit sur le <body> : une page ne peut pas se tromper de barème.
   ------------------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
  color: var(--text);
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(34px, 6.2vw, var(--h1-size, 52px));
  font-weight: var(--h1-weight, 800);
  letter-spacing: var(--h1-track, -0.02em);
  line-height: var(--h1-lh, 1.12);
}

.page-home {
  --h1-size: var(--h1-home);
  --h1-track: var(--h1-home-track);
  --h1-weight: 900;
  --h1-lh: 1.08;
}
.page-produit {
  --h1-size: var(--h1-produit);
  --h1-track: var(--h1-produit-track);
  --h1-weight: 900;
  --h1-lh: 1.12;
}
.page-outil {
  --h1-size: var(--h1-outil);
  --h1-track: var(--h1-outil-track);
  --h1-weight: 900;
  --h1-lh: 1.05;
}
.page-tarifs {
  --h1-size: var(--h1-tarifs);
  --h1-track: var(--h1-tarifs-track);
  --h1-weight: 800;
  --h1-lh: 1.15;
}
.page-hub {
  --h1-size: var(--h1-hub);
  --h1-track: var(--h1-hub-track);
  --h1-weight: 800;
  --h1-lh: 1.1;
}
.page-lp {
  --h1-size: var(--h1-lp);
  --h1-track: var(--h1-lp-track);
  --h1-weight: 800;
  --h1-lh: 1.1;
}
.page-compare {
  --h1-size: var(--h1-compare);
  --h1-track: var(--h1-compare-track);
  --h1-weight: 800;
  --h1-lh: 1.12;
}
.page-article {
  --h1-size: var(--h1-article);
  --h1-track: var(--h1-article-track);
  --h1-weight: 800;
  --h1-lh: 1.12;
}
.page-legal {
  --h1-size: var(--h1-legal);
  --h1-track: var(--h1-legal-track);
  --h1-weight: 800;
  --h1-lh: 1.1;
}

h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.14;
}

h3 {
  font-size: clamp(19px, 1.9vw, 22px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.3;
}

h4 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

p {
  margin: 0 0 1.05em;
}
p:last-child {
  margin-bottom: 0;
}

strong,
b {
  color: var(--text);
  font-weight: 700;
}

a {
  color: var(--action);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--action-dark);
}

ul,
ol {
  margin: 0 0 1.05em;
  padding-left: 1.25em;
}
li {
  margin-bottom: 0.45em;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--action-tint);
  color: var(--action-dark);
  padding: 0.14em 0.44em;
  border-radius: var(--radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--pad-sm) 0;
}

::selection {
  background: var(--brand-tint-2);
  color: var(--text);
}

/* Focus clavier visible partout — exigence d'accessibilité, pas une option. */
:focus-visible {
  outline: 2.5px solid var(--action);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--z-cookie) + 1);
  background: var(--bg-elevated);
  color: var(--text);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  font-size: 14px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ---------------------------------------------------------------------------
   Gabarit
   ------------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-lp {
  max-width: var(--max-w-lp);
}
.wrap-read {
  max-width: var(--max-w-read);
}
.wrap-wide {
  max-width: 1340px;
}

main {
  padding-top: var(--nav-h);
}

/* ---------------------------------------------------------------------------
   Sections — fonds et rythme vertical.
   Deux sections consécutives ne partagent JAMAIS ni le même fond ni le même
   gabarit : c'est le mécanisme qui empêche l'abandon sur une page de 10 écrans.
   ------------------------------------------------------------------------ */

.sec {
  position: relative;
  padding-block: var(--pad-lg);
}
.sec--xs { padding-block: var(--pad-xs); }
.sec--sm { padding-block: var(--pad-sm); }
.sec--md { padding-block: var(--pad-md); }
.sec--lg { padding-block: var(--pad-lg); }
.sec--xl { padding-block: var(--pad-xl); }
.sec--2xl { padding-block: var(--pad-2xl); }

.bg-default { background: var(--bg); }
.bg-alt { background: var(--bg-alt); }
.bg-white { background: var(--bg-elevated); }
.bg-dark {
  background: var(--bg-dark);
  color: var(--text-inv-muted);
}
.bg-darker {
  background: var(--bg-darker);
  color: var(--text-inv-muted);
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-darker h1,
.bg-darker h2,
.bg-darker h3,
.bg-darker h4 {
  color: var(--text-inv);
}
.bg-dark strong,
.bg-darker strong {
  color: var(--text-inv);
}

/* Textures — très faibles, elles empêchent les grands aplats de paraître vides
   sans jamais entrer en concurrence avec le contenu. */
.tex-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-grid);
  background-size: var(--texture-grid-size);
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
}
.tex-stripes::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-stripes);
  pointer-events: none;
}
.tex-grid > *,
.tex-stripes > * {
  position: relative;
  z-index: 1;
}

/* Grain très léger — casse le plat des grands aplats clairs. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Grilles génériques — toutes s'effondrent en une colonne au point de rupture
   ------------------------------------------------------------------------ */

.grid {
  display: grid;
  gap: 24px;
}
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Deux colonnes texte/visuel. Sur mobile le visuel passe SOUS le texte. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
.split--narrow-left { grid-template-columns: 0.72fr 1.28fr; }

/* 🔴 Le piège des grilles CSS, et la cause de tous les débordements
   horizontaux que cet audit a trouvés : un élément de grille a
   `min-width: auto`, donc sa piste ne peut PAS descendre sous la largeur
   min-content de son contenu. Un tableau à `min-width: 720px` posé dans une
   colonne `1fr` élargit donc la colonne à 720px — et la page avec elle, même
   quand la requête média a bien basculé sur une seule colonne.
   `min-width: 0` rend la piste réellement compressible ; le clipping est alors
   assuré par `.table-scroll`, qui défile comme prévu. */
.split > *,
.grid > * { min-width: 0; }

.stack-sm > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 36px; }

.center { text-align: center; }
.center-x { margin-inline: auto; }
.measure { max-width: 60ch; }
.measure-sm { max-width: 46ch; }
.measure-xs { max-width: 34ch; }

.lead {
  font-size: clamp(17px, 1.55vw, 19px);
  line-height: 1.62;
  color: var(--text-secondary);
}
.bg-dark .lead,
.bg-darker .lead {
  color: var(--text-inv-muted);
}

.muted { color: var(--text-muted); }
.fine {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.t-action { color: var(--action); }
.t-brand { color: var(--brand); }
.t-proof { color: var(--proof); }
.t-pain { color: var(--pain); }
.t-ink { color: var(--text); }
.bg-dark .t-brand { color: var(--brand-3); }

/* ---------------------------------------------------------------------------
   Révélation au scroll — opacité + translation légère.
   Sans JS (ou si l'utilisateur réduit les animations), tout reste visible.
   ------------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
html.no-js .reveal,
.no-reveal .reveal {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Responsive — rupture principale 900px, secondaire 600px
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .split,
  .split--wide-right,
  .split--wide-left,
  .split--narrow-left {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* Le visuel passe sous le texte, quel que soit l'ordre du DOM. */
  .split > .split-visual { order: 2; }
  .split > .split-text { order: 1; }

  .g-3,
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sec { padding-block: var(--pad-md); }
  .sec--xl,
  .sec--2xl { padding-block: var(--pad-lg); }
  .sec--lg { padding-block: var(--pad-md); }
}

@media (max-width: 600px) {
  :root {
    --pad-lg: 64px;
    --pad-xl: 76px;
    --pad-2xl: 88px;
  }
  .g-2,
  .g-3,
  .g-4 { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  h2 { letter-spacing: -0.02em; }
}


/* ============================================================================
   ASSIST — components.css
   Les primitives du système (§3). Chacune est autonome, réutilisable, et ne
   dépend que des tokens. Elles sont testées isolément sur /_primitives.html.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   EYEBROW — étiquette de section.
   Sa couleur EST l'accent de la section. C'est le composant qui porte le plus
   la discipline sémantique : sur les LP, sa couleur tourne d'une page à
   l'autre, ce qui donne de la variation gratuite sans casser le système.
   ------------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 16px;
}
.eyebrow::before { display: none; }
.eyebrow--bare::before { display: none; }
.eyebrow--action { color: var(--action); }
.eyebrow--brand { color: var(--brand-2); }
.eyebrow--proof { color: var(--proof-dark); }
.eyebrow--pain { color: var(--pain); }
.bg-dark .eyebrow--brand,
.bg-darker .eyebrow--brand { color: var(--brand-3); }
.bg-dark .eyebrow--action,
.bg-darker .eyebrow--action { color: var(--action-light); }
.bg-dark .eyebrow--proof,
.bg-darker .eyebrow--proof { color: var(--proof); }

/* ---------------------------------------------------------------------------
   PILULE BADGE — fond blanc, point coloré, ombre légère.
   ------------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 18px 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--action);
  flex: none;
}
.badge--proof .badge__dot { background: var(--proof); }
.badge--brand .badge__dot { background: var(--brand-2); }
.badge--pain .badge__dot { background: var(--pain); }

.badge--live .badge__dot {
  position: relative;
  animation: pulse-dot 2s var(--ease-out) infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 5px transparent; opacity: 0.65; }
}

.badge--onDark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-dark-strong);
  color: var(--text-inv);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------------------
   CTA — trois formes.
   --action pour les CTA de contenu, --brand pour le header et les LP.
   Ils ne se concurrencent jamais : le brand (vert très sombre) flotte
   au-dessus du contenu, l'action (bleu) appartient au contenu.
   ------------------------------------------------------------------------ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--action);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 17px 30px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
  text-align: center;
}
.cta:hover {
  background: var(--action-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--action-tint-2);
}
.cta:active { transform: translateY(0); }
.cta__arrow {
  transition: transform var(--duration-fast) var(--ease-out);
  font-size: 1.05em;
}
.cta:hover .cta__arrow { transform: translateX(4px); }

.cta--brand { background: var(--brand); }
.cta--brand:hover {
  background: var(--brand-2);
  box-shadow: 0 10px 28px var(--brand-tint-2);
}
.cta--sm { padding: 12px 22px; font-size: 14px; }
.cta--lg { padding: 20px 38px; font-size: 16px; }
.cta--block { display: flex; width: 100%; }

.cta--outline {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.cta--outline:hover {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--text);
}
.cta--outline-light {
  background: transparent;
  color: var(--text-inv);
  box-shadow: inset 0 0 0 1.5px var(--border-dark-strong);
}
.cta--outline-light:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.cta[disabled],
.cta[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* CTA secondaire — texte souligné + flèche */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
.link-arrow:hover {
  color: var(--text);
  text-decoration-color: var(--action);
}
.link-arrow svg,
.link-arrow .cta__arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}
.link-arrow:hover .cta__arrow { transform: translateX(4px); }
.bg-dark .link-arrow,
.bg-darker .link-arrow {
  color: var(--text-inv);
  text-decoration-color: var(--border-dark-strong);
}
.bg-dark .link-arrow:hover { text-decoration-color: var(--action-light); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}
.cta-row--center { justify-content: center; }

/* ---------------------------------------------------------------------------
   CARTE — blanc sur ivoire. L'élévation vient du fond teinté, pas de l'ombre.
   ------------------------------------------------------------------------ */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
.card--lg { padding: 36px; border-radius: var(--radius-lg); }
.card--sm { padding: 20px; border-radius: var(--radius-sm); }
.card--flat { box-shadow: var(--shadow-sm); }
.card--link {
  display: block;
  color: inherit;
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}
.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
  color: inherit;
}
.card--dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  box-shadow: none;
}
.card--accent {
  border-color: var(--action-tint-2);
  box-shadow: var(--shadow-lg);
}

.card__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text);
  margin-bottom: 8px;
}
.card__text {
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0;
}
.card--dark .card__title { color: var(--text-inv); }
.card--dark .card__text { color: var(--text-inv-muted); }

/* ---------------------------------------------------------------------------
   CARTE STATISTIQUE — chiffre 40-48px/900 coloré + label + sous-label
   ------------------------------------------------------------------------ */
.stat {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px;
}
.stat__num {
  font-size: clamp(34px, 4.2vw, 46px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--proof);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 10px;
}
.stat__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  display: block;
  margin-bottom: 5px;
}
.stat__sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  display: block;
}
.stat--brand .stat__num { color: var(--brand-2); }
.stat--action .stat__num { color: var(--action); }
.stat--pain .stat__num { color: var(--pain); }
.stat--dark {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-dark);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 0;
}
.stat--dark .stat__label { color: var(--text-inv); }
.stat--dark .stat__sub { color: var(--text-inv-muted); }

/* Barre statistique empilée (section sombre « chiffres du problème ») */
.statbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--border-dark);
}
.statbar:last-child { border-bottom: 1px solid var(--border-dark); }
.statbar__num {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
}
.statbar__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-inv-muted);
}
.statbar__text b { color: var(--text-inv); font-weight: 600; }

/* ---------------------------------------------------------------------------
   CHIP / TAG — pilule sélectionnable. Ombre néomorphique : c'est un OBJET.
   ------------------------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 9px 17px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--border-hover);
  color: var(--text);
}
.chip[aria-pressed="true"],
.chip.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--border); }
.chip--tint {
  background: var(--action-tint);
  border-color: transparent;
  color: var(--action-dark);
}
.chip--proof { background: var(--proof-tint); color: var(--proof-dark); }
.chip--pain { background: var(--pain-tint); color: var(--pain-dark); }
.chip--brand { background: var(--brand-tint); color: var(--brand); }

/* Rangée de chips — ÉQUILIBRÉE sur mobile, pas 3 puis 1. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chips--center { justify-content: center; }

/* ---------------------------------------------------------------------------
   ACCORDÉON FAQ — le + devient × à l'ouverture
   ------------------------------------------------------------------------ */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration) var(--ease-out);
}
.faq__item[open] { box-shadow: var(--shadow-md); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  line-height: 1.4;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__sign {
  flex: none;
  width: 26px;
  height: 26px;
  position: relative;
  color: var(--action);
  margin-top: 1px;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: var(--radius-micro);
  transition: transform var(--duration) var(--ease-out),
    opacity var(--duration) var(--ease-out);
}
.faq__sign::before {
  left: 4px; right: 4px; top: 50%;
  height: 2.5px;
  transform: translateY(-50%);
}
.faq__sign::after {
  top: 4px; bottom: 4px; left: 50%;
  width: 2.5px;
  transform: translateX(-50%);
}
.faq__item[open] .faq__sign::before { transform: translateY(-50%) rotate(180deg); }
.faq__item[open] .faq__sign::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq__a {
  padding: 0 26px 24px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: 68ch;
}
.faq__a p { margin-bottom: 0.8em; }

/* ---------------------------------------------------------------------------
   ENCADRÉ (CALLOUT) — fond teinté + barre d'accent 3px à gauche
   ------------------------------------------------------------------------ */
.callout {
  position: relative;
  background: var(--action-tint);
  border-radius: var(--radius-sm);
  padding: 22px 26px 22px 28px;
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--action);
}
.callout__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action-dark);
  margin-bottom: 8px;
  display: block;
}
.callout p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin-bottom: 0;
}
.callout p + p { margin-top: 0.8em; }
.callout--proof { background: var(--proof-tint); }
.callout--proof::before { background: var(--proof); }
.callout--proof .callout__eyebrow { color: var(--proof-dark); }
.callout--pain { background: var(--pain-tint); }
.callout--pain::before { background: var(--pain); }
.callout--pain .callout__eyebrow { color: var(--pain-dark); }
.callout--brand { background: var(--brand-tint); }
.callout--brand::before { background: var(--brand); }
.callout--brand .callout__eyebrow { color: var(--brand); }

/* ---------------------------------------------------------------------------
   BADGE DE SECTION — 01, 02… devant les h2 juridiques
   ------------------------------------------------------------------------ */
.secnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  background: var(--action-tint);
  color: var(--action-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ---------------------------------------------------------------------------
   LISTE À COCHES
   ------------------------------------------------------------------------ */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.checks li {
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.checks svg { margin-top: 2px; color: var(--proof); flex: none; }
.checks--action svg { color: var(--action); }
.checks--brand svg { color: var(--brand-2); }
.bg-dark .checks li { color: var(--text-inv-muted); }

/* Puces d'alerte (section problème) */
.alerts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.alerts li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.alerts li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--pain);
  margin-top: 9px;
}

/* ---------------------------------------------------------------------------
   TABLEAU DE DONNÉES — en-tête sombre, lignes alternées, coins arrondis.
   Toujours enveloppé dans .table-scroll : le body ne défile jamais en X.
   ------------------------------------------------------------------------ */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  -webkit-overflow-scrolling: touch;
}
.dtable {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.dtable thead th {
  background: var(--bg-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  padding: 16px 20px;
  white-space: nowrap;
}
.dtable tbody td {
  padding: 15px 20px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  line-height: 1.55;
  vertical-align: top;
}
.dtable tbody tr:nth-child(even) { background: var(--bg-alt); }
.dtable tbody td:first-child {
  color: var(--text);
  font-weight: 600;
}
.dtable__group td {
  background: var(--action-tint) !important;
  color: var(--action-dark) !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dtable__yes { color: var(--proof-dark); font-weight: 600; }
.dtable__no { color: var(--text-muted); }
.table-note {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 12px;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   SLIDER — piste 4px, poignée 20px, ombre néomorphique interne.
   Famille néomorphique STRICTEMENT réservée aux contrôles manipulables.
   ------------------------------------------------------------------------ */
.slider { margin-bottom: 26px; }
.slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.slider__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.slider__value {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--action);
  font-variant-numeric: tabular-nums;
}
/* La zone de préhension fait 40px de haut alors que la piste visible n'en fait
   que 4 : le curseur reste fin à l'œil mais devient attrapable au pouce. C'est
   gratuit visuellement — l'input est transparent, seule la piste se voit. La
   marge négative compense la hauteur pour ne pas écarter les curseurs entre
   eux. */
.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  background: transparent;
  cursor: pointer;
  margin-block: -10px;
  margin-inline: 0;
}
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  box-shadow: var(--shadow-in);
}
.slider input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  box-shadow: var(--shadow-in);
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: var(--radius-pill);
  background: var(--action);
  border: 3px solid var(--bg-elevated);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--action);
  border: 3px solid var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
.slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.96); }

/* ---------------------------------------------------------------------------
   TOGGLE SEGMENTÉ — conteneur pilule gris, segment actif blanc + ombre
   ------------------------------------------------------------------------ */
.seg {
  display: inline-flex;
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: var(--shadow-in);
  gap: 2px;
}
.seg button {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  /* 36px de haut au minimum : c'est un vrai bouton, pas un onglet décoratif. */
  min-height: 36px;
  padding: 9px 20px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.seg button[aria-pressed="true"] {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.seg__save {
  color: var(--proof-dark);
  font-weight: 700;
  font-size: 11.5px;
  margin-left: 5px;
}

/* ---------------------------------------------------------------------------
   CHAMP DE SAISIE — ombre néomorphique interne
   ------------------------------------------------------------------------ */
.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  box-shadow: var(--shadow-in-input);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.field input:focus,
.field textarea:focus { border-color: var(--action); }

/* ---------------------------------------------------------------------------
   FENÊTRE MOCKUP — 3 pastilles macOS
   ------------------------------------------------------------------------ */
.win {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.win__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  flex: none;
}
.win__dot:nth-child(1) { background: #ec6a5e; }
.win__dot:nth-child(2) { background: #f4bf4f; }
.win__dot:nth-child(3) { background: #61c554; }
.win__title {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.win__body { padding: 0; }
.win--dark {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}
.win--dark .win__bar {
  background: var(--bg-darker);
  border-bottom-color: var(--border-dark);
}
.win--dark .win__title { color: var(--text-inv-muted); }

/* ---------------------------------------------------------------------------
   PASTILLE DE STATUT
   ------------------------------------------------------------------------ */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.status--ok { background: var(--proof-tint); color: var(--proof-dark); }
.status--info { background: var(--action-tint); color: var(--action-dark); }
.status--warn { background: var(--pain-tint); color: var(--pain-dark); }
.status--neutral { background: var(--bg-alt); color: var(--text-muted); }
.win--dark .status--ok { background: rgba(15, 163, 107, 0.16); color: var(--proof-on-dark); }
.win--dark .status--info { background: rgba(75, 134, 228, 0.16); color: var(--action-on-dark); }
.win--dark .status--warn { background: rgba(209, 69, 36, 0.18); color: var(--pain-on-dark); }
.win--dark .status--neutral { background: rgba(255, 255, 255, 0.07); color: var(--text-inv-muted); }

/* ---------------------------------------------------------------------------
   AVATAR À INITIALES
   ------------------------------------------------------------------------ */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  flex: none;
}
.avatar--a { background: var(--action); }
.avatar--b { background: var(--brand-2); }
.avatar--c { background: var(--proof-dark); }
.avatar--d { background: var(--pain); }
.avatar--e { background: #6b4e9e; }

/* ---------------------------------------------------------------------------
   TRANSCRIPT — la section la plus convaincante des LP
   ------------------------------------------------------------------------ */
.transcript {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.transcript__turn { padding: 26px 30px; }
.transcript__turn + .transcript__turn { border-top: 1px solid var(--border); }
.transcript__who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.transcript__pin {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  color: var(--text-muted);
  flex: none;
}
.transcript__turn--agent .transcript__pin {
  background: var(--brand);
  color: #fff;
}
.transcript__turn--agent .transcript__who { color: var(--brand); }
.transcript__say {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--text);
  margin: 0;
}
.transcript__turn--caller .transcript__say {
  font-style: italic;
  color: var(--text-secondary);
}
.transcript__meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.transcript__foot {
  background: var(--proof-tint);
  padding: 15px 30px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--proof-dark);
  display: flex;
  align-items: center;
  gap: 9px;
}

/* ---------------------------------------------------------------------------
   HEADER — identique sur les 102 pages, sans exception.
   ------------------------------------------------------------------------ */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.hdr__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brand);
  flex: none;
}
.logo:hover { color: var(--brand-2); }
.logo__word {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.nav__link:hover { color: var(--text); background: var(--bg-alt); }
.nav__link.is-active { color: var(--action); }
.hdr__right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}
.hdr__login {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 5px;
}
.hdr__login:hover { text-decoration-color: var(--brand); color: var(--text); }

/* Panneau déroulant de nav */
.navdrop { position: relative; }
.navdrop__btn {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  /* Aligné sur la hauteur des liens de navigation voisins, et au-dessus du
     seuil de cible tactile — le même en-tête sert sur tablette. */
  min-height: 36px;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--duration-fast) var(--ease-out);
}
.navdrop__btn:hover { color: var(--text); background: var(--bg-alt); }
.navdrop__btn svg { transition: transform var(--duration-fast) var(--ease-out); }
.navdrop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.navdrop__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 272px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast);
  z-index: var(--z-panel);
}
.navdrop__panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.navdrop__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  transition: background var(--duration-fast) var(--ease-out);
}
.navdrop__link:hover { background: var(--bg-alt); color: var(--text); }
.navdrop__link svg { color: var(--action); flex: none; }
.navdrop__sep {
  height: 1px;
  background: var(--border);
  margin: 8px 12px;
}
.navdrop__link--social { font-size: 13.5px; color: var(--text-secondary); }
.navdrop__link--social svg { color: var(--text-muted); }

/* Bouton mobile */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  margin-left: auto;
}
.burger__bars { width: 20px; height: 14px; position: relative; }
.burger__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-micro);
  transition: transform var(--duration) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 6px; }
.burger__bars span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Scrim mobile — le site de référence n'en a pas, la page reste défilable
   sous le panneau. On le met, et on bloque le scroll du body. */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 14, 0.42);
  backdrop-filter: blur(2px);
  z-index: var(--z-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out), visibility var(--duration);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.mnav {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  background: var(--bg-elevated);
  z-index: var(--z-panel);
  padding: 8px var(--gutter) 28px;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out), visibility var(--duration);
  border-bottom: 1px solid var(--border);
}
.mnav.is-open { opacity: 1; visibility: visible; transform: none; }
.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.mnav__sub { padding: 0 0 10px 2px; }
.mnav__sub a {
  display: block;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}
.mnav details > summary { list-style: none; cursor: pointer; }
.mnav details > summary::-webkit-details-marker { display: none; }
.mnav__cta { margin-top: 22px; }

@media (max-width: 980px) {
  .nav, .hdr__right { display: none; }
  .burger { display: inline-flex; }
}

/* FAB mobile — CTA persistant qui survit à tout le scroll */
.fab {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl);
  z-index: var(--z-fab);
}
.fab:hover { background: var(--brand-2); color: #fff; }
@media (max-width: 980px) {
  .fab { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
   FOOTER — c'est un plan de site, pas un footer.
   ------------------------------------------------------------------------ */
.ftr {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding-block: var(--pad-md) var(--pad-xs);
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1.55fr repeat(5, 1fr);
  gap: 40px 28px;
}
.ftr__brand { max-width: 30ch; }
.ftr__baseline {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 16px 0 20px;
}
.ftr__social { display: flex; gap: 10px; }
.ftr__social a {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}
.ftr__social a:hover { color: var(--brand); border-color: var(--border-hover); }
.ftr__h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 15px;
}
.ftr__col ul { list-style: none; padding: 0; margin: 0; }
.ftr__col li { margin-bottom: 9px; }
.ftr__col a {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ftr__col a:hover { color: var(--action); }
.ftr__all a { font-style: italic; color: var(--text-muted); }
.ftr__legal {
  margin-top: var(--pad-sm);
  padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 32px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ftr__legal a { color: var(--text-muted); }
.ftr__legal a:hover { color: var(--action); }
.ftr__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
/* « Gérer les cookies » est un bouton, pas un lien : il doit rester une cible
   tactile atteignable au pouce. La marge verticale négative compense le
   rembourrage pour ne pas décaler la barre légale du pied de page. */
.ftr__cookiebtn {
  background: none;
  border: 0;
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding-inline: 2px;
  margin-block: -9px;
}
.ftr__cookiebtn:hover { color: var(--text); }

@media (max-width: 1080px) {
  .ftr__grid { grid-template-columns: 1fr 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; max-width: 46ch; }
}
@media (max-width: 600px) {
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .ftr__brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   BANNIÈRE COOKIES — bandeau BAS, jamais une carte au milieu du viewport.
   Chez le site de référence elle recouvre le mockup du hero, c'est-à-dire
   précisément l'élément de preuve le plus important de la page.
   Les 3 choix sont présentés à égalité visuelle (exigence CNIL).
   ------------------------------------------------------------------------ */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-cookie);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 32px rgba(15, 15, 14, 0.08);
  padding: 18px var(--gutter);
  transform: translateY(100%);
  transition: transform var(--duration) var(--ease-out);
}
.cookie.is-open { transform: none; }
.cookie__in {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie__text {
  flex: 1 1 380px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Égalité visuelle stricte : même forme, même taille, même poids. */
.cookie__btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.cookie__btn:hover { border-color: var(--text); }

/* ---------------------------------------------------------------------------
   FIL D'ARIANE
   ------------------------------------------------------------------------ */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--action); }
.crumbs span[aria-hidden] { opacity: 0.5; }

/* ---------------------------------------------------------------------------
   SURLIGNAGE DU NOM DE MARQUE — bloc plein --brand
   ------------------------------------------------------------------------ */
.mark-hl {
  display: inline-block;
  background: var(--brand);
  color: var(--bg);
  padding: 0.02em 0.22em 0.1em;
  border-radius: var(--radius-xs);
  letter-spacing: -0.035em;
}

/* ---------------------------------------------------------------------------
   LIENS TRANSVERSES — 4 liens séparés par des points
   ------------------------------------------------------------------------ */
.crosslinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  font-size: 14.5px;
  font-weight: 600;
}
.crosslinks span { color: var(--border-strong); }


/* ============================================================================
   ASSIST — blocks.css
   Blocs de composition : au-dessus des primitives, en dessous des pages.
   Tout ce qui est réutilisé par au moins deux templates vit ici.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   EN-TÊTE DE SECTION
   ------------------------------------------------------------------------ */
.sechead { margin-bottom: 48px; max-width: 68ch; }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead--center .measure { margin-inline: auto; }
.sechead h2 + .lead { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   ICÔNE DE CARTE — pastille teintée
   ------------------------------------------------------------------------ */
.card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: var(--action-tint);
  color: var(--action);
}
.card__icon--brand { background: var(--brand-tint); color: var(--brand); }
.card__icon--proof { background: var(--proof-tint); color: var(--proof-dark); }
.card__icon--pain { background: var(--pain-tint); color: var(--pain); }
.card--dark .card__icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-inv);
}

/* ---------------------------------------------------------------------------
   CARTE DE RENVOI (hubs, grilles de distribution)
   Le liseré supérieur coloré est le seul endroit où la carte porte son accent :
   il donne à une grille de 22 cartes un rythme chromatique sans bruit.
   ------------------------------------------------------------------------ */
.lcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px 24px;
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}
.lcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--action);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform var(--duration) var(--ease-out);
}
.lcard--brand::before { background: var(--brand); }
.lcard--proof::before { background: var(--proof); }
.lcard--pain::before { background: var(--pain); }
.lcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
}
.lcard:hover::before { transform: scaleX(1); }
.lcard__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lcard__title {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.28;
}
.lcard__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
}
.lcard__go {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--action);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lcard--brand .lcard__go { color: var(--brand-2); }
.lcard--proof .lcard__go { color: var(--proof-dark); }
.lcard--pain .lcard__go { color: var(--pain); }
.lcard:hover .cta__arrow { transform: translateX(4px); }
.lcard--compact { padding: 20px; gap: 6px; }
.lcard--compact .lcard__title { font-size: 16px; }

/* ---------------------------------------------------------------------------
   DÉCORS SYSTÉMIQUES
   Ce ne sont pas des ornements : chacun a une fonction de lecture.
   ------------------------------------------------------------------------ */

/* Contours en pointillés très pâles derrière le hero d'accueil.
   Ils évoquent la propagation d'un signal — le monogramme Assist EST un arc de
   signal, le décor prolonge donc l'identité au lieu de la décorer. */
.decor-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.decor-waves span {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
  opacity: 0.16;
}
.decor-waves span:nth-child(1) { width: 460px; height: 460px; }
.decor-waves span:nth-child(2) { width: 760px; height: 760px; opacity: 0.11; }
.decor-waves span:nth-child(3) { width: 1120px; height: 1120px; opacity: 0.07; }
.decor-waves span:nth-child(4) { width: 1560px; height: 1560px; opacity: 0.05; }

/* Lavis radial — réchauffe un grand aplat sans le colorer. */
.decor-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 62% at 68% 32%,
    var(--brand-tint),
    transparent 66%
  );
}
.decor-wash--action {
  background: radial-gradient(ellipse 70% 60% at 30% 40%, var(--action-tint), transparent 64%);
}
.decor-wash--pain {
  background: radial-gradient(ellipse 70% 60% at 74% 30%, var(--pain-tint), transparent 62%);
}

/* Filigrane géant — occupe l'espace vide d'une section aérée. */
.watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(120px, 22vw, 300px);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--text);
  opacity: 0.028;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}
.bg-dark .watermark { color: #fff; opacity: 0.035; }

/* Lueur d'orbe sur fond sombre. */
.orb {
  position: absolute;
  border-radius: var(--radius-pill);
  pointer-events: none;
  filter: blur(72px);
  opacity: 0.4;
}
.orb--brand { background: var(--brand-3); }
.orb--action { background: var(--action); }
.orb--proof { background: var(--proof); }

/* Filet de manchette — rattache un bloc à la grille. */
.rule-top {
  border-top: 1px solid var(--border);
  padding-top: 26px;
}
.bg-dark .rule-top { border-top-color: var(--border-dark); }

/* ---------------------------------------------------------------------------
   HERO — quatre traitements distincts. Aucune famille de page ne partage son
   hero avec une autre : c'est la première chose vue, elle doit signer la page.
   ------------------------------------------------------------------------ */

/* 1. Hero centré (accueil) */
.hero-c {
  position: relative;
  padding-block: clamp(64px, 9vw, 118px) clamp(40px, 6vw, 72px);
  text-align: center;
  overflow: hidden;
  background: var(--bg-elevated);
}
.hero-c__in { position: relative; z-index: 1; }
.hero-c h1 { max-width: 17ch; margin-inline: auto; }
.hero-c .lead {
  max-width: 54ch;
  margin: 26px auto 34px;
  font-size: clamp(17px, 1.7vw, 20px);
}

/* 2. Hero asymétrique (page produit) */
.hero-a {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 84px) clamp(56px, 7vw, 96px);
  background: var(--bg-elevated);
}
.hero-a__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-a__stats {
  display: flex;
  gap: 40px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.hero-a__stat b {
  display: block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--action);
  margin-bottom: 7px;
}
.hero-a__stat span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 3. Hero à lavis de dégradé (LP métier / ville / comparatif) —
   pleine largeur, s'arrêtant NET en bas. Le bord franc est ce qui fait la
   différence entre un dégradé assumé et un dégradé qui bave. */
.hero-g {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 78px);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.hero-g::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    138deg,
    var(--g1, var(--brand-tint)) 0%,
    var(--bg) 46%,
    var(--g2, var(--action-tint)) 100%
  );
}
.hero-g > * { position: relative; z-index: 1; }
.hero-g h1 { max-width: 20ch; margin-inline: auto; }
.hero-g .lead {
  max-width: 62ch;
  margin: 24px auto 30px;
}
.hero-g__reassure { margin: 28px 0 16px; }
.hero-g__fine { font-size: 12.5px; color: var(--text-muted); }

/* 4. Hero sombre (parrainage) */
.hero-d {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--text-inv-muted);
  padding-block: clamp(64px, 8vw, 112px);
  text-align: center;
}
.hero-d > * { position: relative; z-index: 1; }
.hero-d__amount {
  font-size: clamp(64px, 12vw, 108px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.92;
  color: var(--text-inv);
  margin: 22px 0 6px;
}
.hero-d__amount sup {
  font-size: 0.34em;
  vertical-align: super;
  color: var(--proof);
  letter-spacing: -0.02em;
  margin-left: 4px;
}

/* 5. Hero photographique (articles) */
.hero-p {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-dark);
}
.hero-p__img { position: absolute; inset: 0; }
.hero-p__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 17, 12, 0.94) 0%,
    rgba(8, 17, 12, 0.72) 42%,
    rgba(8, 17, 12, 0.38) 100%
  );
}
.hero-p__in {
  position: relative;
  z-index: 1;
  padding-block: 44px;
  width: 100%;
}
.hero-p h1 {
  color: var(--text-inv);
  max-width: 22ch;
  margin-bottom: 18px;
}
.hero-p__chapo {
  color: rgba(246, 244, 239, 0.82);
  font-size: 17px;
  line-height: 1.6;
  max-width: 64ch;
  margin-bottom: 22px;
}
.hero-p__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 13px;
  color: rgba(246, 244, 239, 0.62);
}
.hero-p__share { display: flex; gap: 8px; margin-left: auto; }
.hero-p__share a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(246, 244, 239, 0.82);
  transition: all var(--duration-fast) var(--ease-out);
}
.hero-p__share a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Le « photographique » du hero d'article est composé en CSS : le système
   interdit les images, et une banque d'images générique trahirait plus qu'elle
   ne servirait. Cinq compositions, une par catégorie éditoriale, pour que
   trente et un articles ne partagent pas la même image d'ouverture. Chacune
   superpose deux lavis radiaux décentrés, une trame et un motif propre. */
.hero-p__img { background: var(--bg-darker); }
.hero-p__img::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.92;
}

/* Guides — deux lavis croisés et une trame régulière : la composition la plus
   sobre, parce que ces articles sont les plus longs. */
.hero-p--guides .hero-p__img::before {
  background:
    radial-gradient(680px 420px at 16% 8%, rgba(27, 95, 209, 0.5), transparent 68%),
    radial-gradient(520px 520px at 88% 96%, rgba(20, 67, 42, 0.62), transparent 70%),
    var(--texture-grid);
  background-size: auto, auto, 34px 34px;
}

/* Secteurs — bandes obliques : l'idée d'un métier, d'un atelier, d'un rythme. */
.hero-p--secteurs .hero-p__img::before {
  background:
    radial-gradient(720px 460px at 82% 14%, rgba(44, 125, 81, 0.55), transparent 70%),
    radial-gradient(560px 480px at 6% 92%, rgba(20, 67, 42, 0.7), transparent 72%),
    repeating-linear-gradient(
      116deg,
      rgba(255, 255, 255, 0.045) 0 2px,
      transparent 2px 26px
    );
}

/* Coûts & ROI — une grille de points serrée, comme un tableur vu de loin. */
.hero-p--roi .hero-p__img::before {
  background:
    radial-gradient(640px 440px at 24% 92%, rgba(15, 163, 107, 0.5), transparent 68%),
    radial-gradient(600px 500px at 90% 6%, rgba(11, 47, 30, 0.75), transparent 72%),
    radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: auto, auto, 18px 18px;
}

/* Comparatifs — deux masses qui se font face, séparées par une diagonale. */
.hero-p--comparatifs .hero-p__img::before {
  background:
    linear-gradient(104deg, rgba(19, 66, 148, 0.62) 0 47%, transparent 47.4%),
    radial-gradient(600px 520px at 92% 88%, rgba(20, 67, 42, 0.66), transparent 72%),
    var(--texture-grid);
  background-size: auto, auto, 44px 44px;
}

/* Conformité — trame verticale stricte, presque un registre. */
.hero-p--conformite .hero-p__img::before {
  background:
    radial-gradient(600px 420px at 12% 12%, rgba(209, 69, 36, 0.42), transparent 66%),
    radial-gradient(640px 540px at 86% 92%, rgba(11, 47, 30, 0.78), transparent 74%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 15px
    );
}

/* Le monogramme de catégorie, très grand et très discret, ancré en bas à
   droite — il donne l'échelle du bandeau sans ajouter de bruit lisible. */
.hero-p__mark {
  position: absolute;
  right: clamp(-18px, -1vw, 0px);
  bottom: -34px;
  font-size: clamp(120px, 15vw, 210px);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.hero-p__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.9);
  margin-bottom: 18px;
}
.hero-p .crumbs { margin-bottom: 20px; }
.hero-p .crumbs a,
.hero-p .crumbs span { color: rgba(246, 244, 239, 0.66); }
.hero-p .crumbs a:hover { color: #fff; }

/* 6. Hero de hub — titre + recherche, sur lavis */
.hero-h {
  position: relative;
  overflow: hidden;
  padding-block: clamp(54px, 6.5vw, 88px) clamp(40px, 5vw, 60px);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.hero-h > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .hero-a__grid { grid-template-columns: 1fr; }
  .hero-a__stats { gap: 26px; }
  .hero-p { min-height: 340px; }
  .hero-p__share { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
   CHEVAUCHEMENT INTER-SECTIONS
   Le mockup du hero déborde sur la section suivante : c'est ce qui coud les
   deux sections ensemble et empêche la page de se lire comme un empilement.
   ------------------------------------------------------------------------ */
.overlap {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(-160px, -11vw, -80px);
}
.overlap-pad { padding-top: clamp(112px, 13vw, 200px); }

/* ---------------------------------------------------------------------------
   BENTO — tuiles de tailles inégales
   ------------------------------------------------------------------------ */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bento__big { grid-column: span 2; }
.bento__tall { grid-row: span 2; }
.bento__tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 190px;
}
.bento__metric {
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--action);
}
.bento__tile--dark {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  color: var(--text-inv-muted);
}
.bento__tile--dark .bento__metric { color: var(--proof); }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__big { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento__big { grid-column: span 1; }
}

/* ---------------------------------------------------------------------------
   CARROUSEL — débordement horizontal VOLONTAIRE.
   La carte coupée au bord droit est le signal : il y en a d'autres.
   Le débordement est contenu dans son propre conteneur — le body ne défile
   jamais horizontalement.
   ------------------------------------------------------------------------ */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { height: 6px; }
.carousel__track::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
.carousel__card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.carousel__head {
  height: 108px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.carousel__head::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-grid);
  background-size: 22px 22px;
  opacity: 0.25;
}
.carousel__head svg { position: relative; z-index: 1; opacity: 0.95; }
.carousel__body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.carousel__nav {
  position: absolute;
  right: 0;
  top: -58px;
  display: flex;
  gap: 8px;
}
.carousel__btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.carousel__btn:hover { border-color: var(--text); background: var(--bg-alt); }
@media (max-width: 600px) {
  .carousel__card { flex-basis: 82vw; }
  .carousel__nav { display: none; }
}

/* ---------------------------------------------------------------------------
   BARRES DE SCORE (section sombre « qualité »)
   ------------------------------------------------------------------------ */
.scores { display: grid; gap: 22px; }
.score__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}
.score__label { font-size: 14.5px; font-weight: 600; color: var(--text-inv); }
.score__val {
  font-size: 14px;
  font-weight: 800;
  color: var(--proof);
  font-variant-numeric: tabular-nums;
}
.score__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.score__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand-3), var(--proof));
  width: 0;
  transition: width 1.4s var(--ease-out);
}
.score__big {
  font-size: clamp(80px, 13vw, 148px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.86;
  color: var(--text-inv);
}
.score__big sup {
  font-size: 0.24em;
  color: var(--proof);
  vertical-align: super;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   ÉTAPES NUMÉROTÉES
   ------------------------------------------------------------------------ */
.steps { display: grid; gap: 26px; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}
.step__n {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.step--brand .step__n { background: var(--brand); }
.step__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 8px;
}
.step__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 7px;
}
.step__text { font-size: 15px; line-height: 1.62; color: var(--text-secondary); }

/* Étapes reliées par des flèches (parrainage) */
.steps-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.steps-flow__arrow { color: var(--border-strong); }
@media (max-width: 900px) {
  .steps-flow { grid-template-columns: 1fr; }
  .steps-flow__arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---------------------------------------------------------------------------
   TARIFS
   ------------------------------------------------------------------------ */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.plan {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 28px 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Filet de couleur en haut de carte — une couleur par plan. */
.plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--action);
}
.plan--brand::before { background: var(--brand); }
.plan--proof::before { background: var(--proof); }
.plan--featured {
  box-shadow: var(--shadow-xl);
  transform: translateY(-14px);
  border-color: var(--brand-tint-2);
}
.plan__tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--brand);
  color: #fff;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.plan__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 5px;
}
.plan__target { font-size: 13.5px; color: var(--text-muted); margin-bottom: 22px; }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 4px;
}
.plan__amount {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plan__per { font-size: 15px; color: var(--text-muted); }
.plan__note { font-size: 12.5px; color: var(--text-muted); margin-bottom: 22px; }
.plan__pitch {
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--text-secondary);
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.plan__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; flex: 1; }
.plan__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.plan__list svg { margin-top: 2px; color: var(--proof); }
.plan--brand .plan__list svg { color: var(--brand-2); }
/* Les éléments quantifiés sont soulignés en pointillés : l'infobulle explique
   la limite au lieu de la cacher dans les CGV. */
.quant {
  border-bottom: 1.5px dotted var(--border-strong);
  cursor: help;
}
.plan__over {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: -14px;
  margin-bottom: 20px;
}
@media (max-width: 980px) {
  .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .plan--featured { transform: none; }
}

/* ---------------------------------------------------------------------------
   SIMULATEUR
   ------------------------------------------------------------------------ */
.sim {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.sim__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sim__panel { padding: clamp(26px, 3.4vw, 40px); }
.sim__panel + .sim__panel {
  border-left: 1px solid var(--border);
  background: var(--bg);
}
.sim__ptitle {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}
/* Encadré de résultat — --proof, barre latérale. */
.sim__result {
  position: relative;
  background: var(--proof-tint);
  border-radius: var(--radius-sm);
  padding: 24px 26px 24px 28px;
  overflow: hidden;
  margin-bottom: 22px;
}
.sim__result::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--proof);
}
.sim__gain {
  font-size: clamp(38px, 5.4vw, 56px);
  font-weight: 900;
  letter-spacing: -0.048em;
  line-height: 1;
  color: var(--proof-dark);
  font-variant-numeric: tabular-nums;
}
.sim__gainlabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--proof-dark);
  margin-bottom: 10px;
}
.sim__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.sim__metric {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px;
}
.sim__metric b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.sim__metric span {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  display: block;
}
.sim__reco {
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  color: var(--text-inv-muted);
  margin-bottom: 20px;
}
.sim__reco-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--proof);
  margin-bottom: 9px;
}
.sim__reco-name {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-inv);
  margin-bottom: 6px;
}
.sim__reco-why { font-size: 13.5px; line-height: 1.55; }
.sim__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--proof-tint);
  color: var(--proof-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .sim__grid { grid-template-columns: 1fr; }
  .sim__panel + .sim__panel { border-left: 0; border-top: 1px solid var(--border); }
}

/* Jauge semi-circulaire */
.gauge { position: relative; width: 100%; max-width: 300px; margin-inline: auto; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge__track { stroke: var(--bg-alt); }
.gauge__fill {
  stroke: var(--proof);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease-out);
}
.gauge__center {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  text-align: center;
}
.gauge__value {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--proof-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gauge__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 7px;
}

/* ---------------------------------------------------------------------------
   LOCKUP « VS » (comparatifs)
   ------------------------------------------------------------------------ */
.vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 34px);
  margin-bottom: 30px;
}
.vs__side { text-align: center; }
.vs__logo {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.05em;
}
.vs__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.vs__badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Verdict en deux cartes opposées */
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.verdict__card {
  border-radius: var(--radius);
  padding: 30px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
/* La carte « nous » est posée sur du blanc et porte un liseré de marque en
   haut : elle flotte au-dessus. La carte « eux » est enfoncée dans le fond
   teinté, sans liseré — deux traitements franchement distincts, pour qu'on ne
   puisse pas confondre les deux colonnes en survolant la page. */
.verdict__card { position: relative; overflow: hidden; }
.verdict__card--us { border-color: var(--brand-tint-2); }
.verdict__card--us::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-3));
}
.verdict__card--them {
  background: var(--bg-alt);
  box-shadow: var(--shadow-sm);
  border-style: dashed;
}
/* Sur la carte « eux », la puce n'est pas une validation mais une direction :
   on n'affirme pas une qualité de notre produit, on renvoie ailleurs. */
.verdict__card--them .checks li { grid-template-columns: 21px 1fr; }
.verdict__card--them .checks svg { display: none; }
.verdict__card--them .checks li::before {
  content: "→";
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--action);
}
.verdict__h {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 16px;
}
@media (max-width: 900px) { .verdict { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   ARTICLE — corps + sommaire sticky
   ------------------------------------------------------------------------ */
.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
/* Même piège que sur `.split` et `.grid` (voir base.css) : sans `min-width: 0`,
   un tableau à `min-width` posé dans la prose élargit la colonne — et la page
   avec elle. C'est ce qui faisait déborder les 31 articles à 390px. */
.article > * { min-width: 0; }

/* Variante des pages juridiques : colonne de lecture calée sur la largeur de
   confort, l'ensemble centré. Le gabarit vit ici et non en `style=` inline —
   un style inline gagne contre la requête média et laisserait deux colonnes à
   390px. */
.article--legal {
  grid-template-columns: minmax(0, var(--max-w-read)) 268px;
  justify-content: center;
}
.toc {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
.toc__h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin-bottom: 3px; }
.toc a {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  border-left: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
}
.toc a:hover { background: var(--bg-alt); color: var(--text); }
.toc a.is-current {
  color: var(--action);
  border-left-color: var(--action);
  background: var(--action-tint);
  font-weight: 600;
}
@media (max-width: 980px) {
  .article { grid-template-columns: 1fr; }
  .toc { position: static; order: -1; }
}

/* Prose longue — articles et pages juridiques */
.prose { font-size: 17px; line-height: 1.75; color: var(--text-secondary); }
.prose > h2 {
  margin-top: 56px;
  margin-bottom: 20px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 36px; margin-bottom: 14px; }
.prose p { margin-bottom: 1.15em; }
.prose ul, .prose ol { margin-bottom: 1.3em; padding-left: 1.35em; }
.prose li { margin-bottom: 0.5em; }
.prose ul li::marker { color: var(--action); }
.prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--brand);
  font-size: 19px;
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
}
.prose figure { margin: 34px 0; }
.prose figcaption {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 10px;
  font-style: italic;
}
.prose .table-scroll { margin: 34px 0 10px; }
.prose .callout { margin: 32px 0; }
.prose .methodo {
  font-style: italic;
  font-size: 14.5px;
  color: var(--text-muted);
  border-left: 2px solid var(--border-strong);
  padding-left: 18px;
  margin: 28px 0;
}
.prose a[target="_blank"]::after {
  content: "↗";
  font-size: 0.78em;
  margin-left: 3px;
  opacity: 0.7;
}
.sources { font-size: 14px; }
.sources li { margin-bottom: 0.65em; color: var(--text-muted); }

/* Chapô éditorial — posé sur du blanc, il détache l'entrée en matière du corps
   sans introduire un second niveau de titre. */
.artchapo {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
  margin-bottom: 44px;
}
.artchapo p { font-size: 17.5px; line-height: 1.68; color: var(--text); margin-bottom: 0.9em; }
.artchapo p:last-child { margin-bottom: 0; }

/* Bloc d'appel dans le sommaire collant. Discret : le sommaire sert d'abord à
   naviguer, la conversion vient après. */
.toc__cta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.toc__cta p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.toc__cta .link-arrow { font-size: 13.5px; }

/* Chiffres au milieu du texte — rompent la colonne de prose. */
.artstats {
  gap: 14px;
  margin: 36px 0;
}

/* Étapes numérotées dans un article : en ligne, pas en cartes — une carte
   couperait la lecture, alors qu'un guide se lit d'un trait. */
.artsteps { display: grid; gap: 22px; margin: 34px 0; }
.artstep { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; }
.artstep__t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 9px 0 7px; }
.artstep__d { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin: 0; }

/* Barres proportionnelles composées en CSS — un ordre de grandeur, sans
   bibliothèque de graphiques ni image. */
.artbars { display: grid; gap: 18px; margin: 36px 0; }
.artbar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.artbar__head b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.artbar__track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  overflow: hidden;
}
.artbar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  transition: width 1.1s var(--ease-out);
}
.artbar__fill--action { background: var(--action); }
.artbar__fill--proof { background: var(--proof); }
.artbar__fill--pain { background: var(--pain); }
.artbar__fill--brand { background: var(--brand-2); }

@media (max-width: 700px) {
  .artchapo { padding: 20px 22px; }
  .artchapo p { font-size: 16.5px; }
  .artstats { grid-template-columns: 1fr 1fr; }
  .artstep { grid-template-columns: 38px 1fr; gap: 14px; }
  .artstep .step__n { width: 38px; height: 38px; font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   PAGES JURIDIQUES
   ------------------------------------------------------------------------ */
.legal-head { text-align: center; margin-bottom: 52px; }
.legal-head h1 { margin: 20px auto 20px; max-width: 22ch; }
.legal-head__chapo {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 56ch;
  margin-inline: auto;
}
.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.legal-sec { padding-top: 44px; }
.legal-sec + .legal-sec { border-top: 1px solid var(--border); }
.legal-sec > h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(22px, 2.4vw, 27px);
  margin-bottom: 22px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.legal-sec h3 {
  font-size: 16.5px;
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--text);
}
.legal-sec h3 .art {
  color: var(--action);
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}
/* Grille d'identité des mentions légales : 3 × 3 champs. Elle DOIT s'effondrer
   en mobile — trois colonnes de 193px débordaient la fenêtre à 390px. C'est le
   dernier des débordements horizontaux trouvés par l'audit. */
.idcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}
@media (max-width: 900px) {
  .idcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .idcards { grid-template-columns: 1fr; gap: 10px; }
}
.idcard {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.idcard__k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
/* Les valeurs d'identité contiennent des chaînes qu'on ne peut pas couper au
   hasard (numéro de TVA, SIRET, adresse d'hébergeur). `overflow-wrap` autorise
   la coupure en dernier recours : sans elle, la largeur min-content du champ
   maintenait la colonne à 193px et la grille débordait malgré `1fr`. */
.idcard__v {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   SECTION CTA FINALE — deux variantes, alternées selon le type de page.
   ------------------------------------------------------------------------ */
.finalcta { position: relative; overflow: hidden; text-align: center; }
.finalcta > * { position: relative; z-index: 1; }
.finalcta h2 {
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 18ch;
  margin-inline: auto;
}
.finalcta .lead { margin: 24px auto 32px; max-width: 52ch; }
.finalcta__fine { margin-top: 24px; font-size: 12.5px; color: var(--text-muted); }
.finalcta--dark .finalcta__fine { color: var(--text-inv-muted); }

/* ---------------------------------------------------------------------------
   PAGE TRANSACTIONNELLE
   ------------------------------------------------------------------------ */
.checkout {
  max-width: 620px;
  margin-inline: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 44px);
}
/* Marge seulement : la TAILLE vient du barème `page-legal`. */
.checkout__h1 { margin: 22px 0 12px; }
.recap { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px; }
.recap td { padding: 13px 0; border-bottom: 1px solid var(--border); }
.recap td:first-child { color: var(--text-muted); font-size: 13.5px; }
.recap td:last-child { text-align: right; font-weight: 700; color: var(--text); }
/* Le `<label>` enveloppe la case : la cible tactile réelle est tout le
   paragraphe de consentement. La case elle-même monte tout de même à 24px, le
   minimum recommandé pour qui la viserait directement au pouce. */
.consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 13px;
  align-items: start;
  margin: 26px 0;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}
.consent input { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--brand); }

/* ---------------------------------------------------------------------------
   CARTES DE CANAL (contact)
   ------------------------------------------------------------------------ */
.channel {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition: all var(--duration) var(--ease-out);
}
.channel:hover { box-shadow: var(--shadow-md); border-color: var(--border-hover); }
.channel__ic {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--action);
  background: var(--action-tint);
}
.channel__k { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.channel__v { font-size: 13.5px; color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   MARQUEE — bande de logos / mots-clés
   ------------------------------------------------------------------------ */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 46s linear infinite;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
.marquee__item {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------------------------------------------------------------------------
   GRAPPE DE LOGOS D'INTÉGRATION
   ------------------------------------------------------------------------ */

/* Le gabarit du bandeau intégrations vit ICI et pas en `style=` inline : un
   style inline gagne toujours contre une requête média, et la grille restait
   donc à deux colonnes à 390px — c'était la cause du débordement horizontal de
   l'accueil. Règle générale du projet : aucun `grid-template-columns` en
   inline sur un conteneur qui doit changer de gabarit en mobile. */
.intband__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 900px) {
  .intband__grid { grid-template-columns: 1fr; gap: 34px; }
}

.intgrid { display: flex; flex-wrap: wrap; gap: 12px; }
.intcard {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
/* Cadre commun des logos d'intégration : même carré, même padding, quel que
   soit le fichier officiel derrière — marque détourée ou tuile d'app. */
.intlogo {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 7%);
}
.intlogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.intmore {
  display: inline-flex;
  align-items: center;
  background: var(--bg-dark);
  color: var(--text-inv);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   RECHERCHE ET FILTRES (hub ressources)
   ------------------------------------------------------------------------ */
.searchbar {
  display: flex;
  gap: 10px;
  max-width: 620px;
}
.searchbar__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 20px;
  box-shadow: var(--shadow-in-input);
}
.searchbar__field svg { color: var(--text-muted); flex: none; }
.searchbar input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 15px 0;
  outline: none;
}
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Carte d'article avec couverture générée */
.acard {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--duration) var(--ease-out);
}
.acard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
}
.acard__cover {
  height: 168px;
  position: relative;
  overflow: hidden;
}
.acard__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-grid);
  background-size: 26px 26px;
  opacity: 0.3;
}
.acard__mark {
  position: absolute;
  right: -14px;
  bottom: -26px;
  font-size: 100px;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.14);
  line-height: 1;
}
.acard__body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.acard__title {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.32;
}
.acard__ex { font-size: 13.5px; line-height: 1.58; color: var(--text-secondary); flex: 1; }
.acard__meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
   ÉQUIPE / VALEURS (qui sommes-nous)
   ------------------------------------------------------------------------ */
.member {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px;
  text-align: center;
}
.member__ph {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-pill);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
}
.member__n { font-size: 16.5px; font-weight: 700; color: var(--text); }
.member__r {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--action);
  margin: 5px 0 12px;
}
.member__b { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   PALIERS (parrainage)
   ------------------------------------------------------------------------ */
.tier-row td:first-child { font-weight: 700; }
.tier-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  margin-right: 9px;
}


/* ============================================================================
   ASSIST — mockups.css
   ----------------------------------------------------------------------------
   Les interfaces produit, en HTML/CSS pur — jamais en image.

   Pourquoi pas des captures : elles restent nettes à tout zoom, elles sont
   animables, elles n'ajoutent aucun octet de bitmap, et surtout elles PEUVENT
   AVOIR UNE VARIANTE MOBILE. Une capture réduite à 390 px devient une texture
   qui suggère « il y a un produit » au lieu de le démontrer — c'est exactement
   l'atout qu'on perdrait.

   Chaque mockup a donc deux corps : `.mk__desk` et `.mk__mob`, et l'un des
   deux seulement est rendu selon la largeur. Ce n'est pas une réduction
   homothétique, ce sont deux compositions.
   ========================================================================= */

.mk { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.mk__mob { display: none; }
@media (max-width: 700px) {
  .mk__desk { display: none; }
  .mk__mob { display: block; }
}

/* ==========================================================================
   1. TABLEAU DE BORD
   ======================================================================== */
.mk-dash {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 216px;
  min-height: 452px;
}

/* --- Barre latérale --- */
.mk-side {
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mk-side__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 16px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.mk-side__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.mk-side__item svg { width: 15px; height: 15px; opacity: 0.65; flex: none; }
.mk-side__item.is-on {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.mk-side__item.is-on svg { opacity: 1; color: var(--action); }
.mk-side__badge {
  margin-left: auto;
  background: var(--pain);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}
.mk-side__foot {
  margin-top: auto;
  padding: 12px 9px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Colonne centrale --- */
.mk-main { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.mk-main__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mk-main__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}
.mk-main__sub { font-size: 11.5px; color: var(--text-muted); }

.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mk-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.mk-kpi__ic {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}
.mk-kpi__ic svg { width: 13px; height: 13px; }
.mk-kpi__ic--a { background: var(--action-tint); color: var(--action); }
.mk-kpi__ic--b { background: var(--proof-tint); color: var(--proof-dark); }
.mk-kpi__ic--c { background: var(--brand-tint); color: var(--brand); }
.mk-kpi__ic--d { background: var(--pain-tint); color: var(--pain); }
.mk-kpi__n {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mk-kpi__l {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.3;
}
.mk-kpi__d {
  font-size: 10px;
  font-weight: 700;
  margin-top: 5px;
  display: inline-flex;
  gap: 3px;
}
.mk-kpi__d--up { color: var(--proof-dark); }
.mk-kpi__d--down { color: var(--pain); }

/* --- Graphique en aires à deux courbes --- */
.mk-chart {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mk-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mk-chart__t { font-size: 11.5px; font-weight: 700; color: var(--text); }
.mk-chart__legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-muted); }
.mk-chart__legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-micro);
  margin-right: 5px;
}
.mk-chart svg { width: 100%; height: 118px; overflow: visible; }
.mk-chart__x {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 7px;
}
.mk-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
}
.is-in .mk-line,
.mk--play .mk-line { animation: draw 1.8s var(--ease-out) forwards; }
.mk-line--b { animation-delay: 0.25s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mk-area { opacity: 0; }
.is-in .mk-area,
.mk--play .mk-area { animation: fadein 1.2s var(--ease-out) 0.7s forwards; }
@keyframes fadein { to { opacity: 1; } }

/* --- Panneau droit --- */
.mk-aside {
  border-left: 1px solid var(--border);
  background: var(--bg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mk-aside__block { }
.mk-aside__h {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.mk-live {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--proof-tint);
  border-radius: var(--radius-xs);
  padding: 9px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--proof-dark);
}
.mk-live__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--proof);
  animation: mk-pulse 1.9s var(--ease-out) infinite;
}
@keyframes mk-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}
.mk-mini {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  padding: 10px 11px;
}
.mk-mini__t {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.mk-mini__s { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
.mk-meter { margin-top: 4px; }
.mk-meter__bar {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  overflow: hidden;
  margin: 7px 0 6px;
}
.mk-meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--action);
  width: 0;
  transition: width 1.6s var(--ease-out);
}
.is-in .mk-meter__fill,
.mk--play .mk-meter__fill { width: var(--w, 58%); }
.mk-meter__l {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Variante mobile du tableau de bord : un seul KPI + mini-courbe --- */
.mk-dash-m { padding: 18px; }
.mk-dash-m__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mk-dash-m__kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 12px;
}
.mk-dash-m__n {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mk-dash-m__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ==========================================================================
   2. LISTE D'ACTIVITÉ (fond sombre)
   ======================================================================== */
.mk-feed { padding: 6px 0; }
.mk-feed__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 13px 20px;
}
.mk-feed__row + .mk-feed__row { border-top: 1px solid var(--border-dark); }
.mk-feed__t {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-inv);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-feed__s {
  font-size: 11.5px;
  color: var(--text-inv-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-feed__time {
  font-size: 10.5px;
  color: var(--text-inv-muted);
  text-align: right;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.mk-feed__row--new { animation: slidein 0.6s var(--ease-out) both; }
@keyframes slidein {
  from { opacity: 0; transform: translateY(-8px); }
}
.mk-feed__foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border-dark);
  font-size: 11px;
  color: var(--text-inv-muted);
  display: flex;
  justify-content: space-between;
}

/* Variante mobile : 3 lignes, sans sous-titre */
.mk-feed-m .mk-feed__row { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 12px 16px; }
.mk-feed-m .mk-feed__s { display: none; }
.mk-feed-m .avatar { width: 30px; height: 30px; font-size: 11px; }

/* ==========================================================================
   3. PANNEAU DE CONFIGURATION
   ======================================================================== */
.mk-cfg { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.mk-cfg__field { }
.mk-cfg__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-inv-muted);
  margin-bottom: 7px;
  display: block;
}
.mk-cfg__input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-inv);
}
.mk-cfg__input--multi { line-height: 1.6; min-height: 62px; }
.mk-cfg__caret {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  background: var(--brand-3);
  vertical-align: -2px;
  margin-left: 1px;
  animation: caret 1.05s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.mk-tog {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--border-dark);
}
.mk-tog__t { font-size: 12.5px; font-weight: 600; color: var(--text-inv); }
.mk-tog__s { font-size: 10.5px; color: var(--text-inv-muted); margin-top: 2px; line-height: 1.4; }
.mk-switch {
  width: 38px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.13);
  position: relative;
  flex: none;
  transition: background var(--duration) var(--ease-out);
}
.mk-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  transition: transform var(--duration) var(--ease-spring);
}
.mk-switch.is-on { background: var(--brand-3); }
.mk-switch.is-on::after { transform: translateX(16px); }
.mk-switch.is-off-disabled { opacity: 0.3; }
.mk-tog--disabled .mk-tog__t,
.mk-tog--disabled .mk-tog__s { opacity: 0.42; }

/* ==========================================================================
   4. CALENDRIER MENSUEL
   ======================================================================== */
.mk-cal { padding: 18px; }
.mk-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mk-cal__m { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.mk-cal__nav { display: flex; gap: 6px; }
.mk-cal__nav span {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.mk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mk-cal__dow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 5px;
}
.mk-cal__d {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  position: relative;
  font-variant-numeric: tabular-nums;
}
.mk-cal__d--out { color: var(--text-muted); opacity: 0.35; }
.mk-cal__d--has { background: var(--action-tint); color: var(--action-dark); font-weight: 700; }
.mk-cal__d--full { background: var(--brand); color: #fff; font-weight: 700; }
.mk-cal__d--today { box-shadow: inset 0 0 0 1.5px var(--proof); color: var(--proof-dark); }
.mk-cal__d--has::after,
.mk-cal__d--full::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.7;
}
.mk-cal__next { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 13px; }
.mk-cal__ev {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 8px 0;
  font-size: 11.5px;
}
.mk-cal__ev + .mk-cal__ev { border-top: 1px dashed var(--border); }
.mk-cal__hh { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.mk-cal__who { color: var(--text); font-weight: 600; }
.mk-cal__what { color: var(--text-muted); font-size: 10.5px; }

/* ==========================================================================
   5. VISUALISATION RADIALE
   ======================================================================== */
.mk-radial {
  position: relative;
  aspect-ratio: 1;
  max-width: 460px;
  margin-inline: auto;
}
.mk-radial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-radial__spoke {
  stroke: var(--border-strong);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  opacity: 0.5;
}
.mk-radial__ring { fill: none; stroke: var(--border); stroke-width: 1; }
.mk-radial__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: var(--shadow-lg), 0 0 0 10px var(--brand-tint);
}
.mk-radial__hub b { font-size: 11px; font-weight: 800; letter-spacing: -0.02em; }
.mk-radial__hub span { font-size: 8.5px; opacity: 0.7; letter-spacing: 0.06em; }
.mk-radial__node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: nodein 0.6s var(--ease-spring) both;
}
@keyframes nodein {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}
.mk-radial__tag {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.mk-radial__tag--ok { background: var(--proof-tint); color: var(--proof-dark); }
.mk-radial__tag--info { background: var(--action-tint); color: var(--action-dark); }
.mk-radial__tag--brand { background: var(--brand-tint); color: var(--brand); }

/* Variante mobile : liste verticale de 6 lignes */
.mk-radial-m { padding: 16px; }
.mk-radial-m__hub {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 12px;
}
.mk-radial-m__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.mk-radial-m__num { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   6. TRANSCRIPT DE CONVERSATION (bulles)
   ======================================================================== */
.mk-chat { padding: 20px; display: flex; flex-direction: column; gap: 11px; }
.mk-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.mk-chat__ring {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mk-chat__ring i {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mk-pulse 2.1s var(--ease-out) infinite;
}
.mk-chat__ring svg { width: 13px; height: 13px; }
.mk-chat__who { font-size: 13px; font-weight: 700; color: var(--text); }
.mk-chat__num { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mk-chat__timer {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-2);
  font-variant-numeric: tabular-nums;
}
.mk-bub {
  max-width: 86%;
  border-radius: var(--radius);
  padding: 11px 15px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  animation: bubin 0.5s var(--ease-out) both;
}
@keyframes bubin { from { opacity: 0; transform: translateY(7px); } }
.mk-bub--agent { background: var(--brand-tint); border-top-left-radius: var(--radius-xs); align-self: flex-start; }
.mk-bub--caller { background: var(--bg-alt); border-top-right-radius: var(--radius-xs); align-self: flex-end; }
.mk-bub:nth-of-type(2) { animation-delay: 0.25s; }
.mk-bub:nth-of-type(3) { animation-delay: 0.5s; }
.mk-bub:nth-of-type(4) { animation-delay: 0.75s; }
.mk-bub:nth-of-type(5) { animation-delay: 1s; }
.mk-chat__done {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--proof-tint);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: 12px;
  font-weight: 600;
  color: var(--proof-dark);
  margin-top: 6px;
  animation: bubin 0.6s var(--ease-out) 1.3s both;
}
.mk-typing { display: inline-flex; gap: 3px; align-items: center; }
.mk-typing i {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  animation: typing 1.3s var(--ease-out) infinite;
}
.mk-typing i:nth-child(2) { animation-delay: 0.17s; }
.mk-typing i:nth-child(3) { animation-delay: 0.34s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ==========================================================================
   7. CAMPAGNE DE RELANCE — écran propre à Assist.
   Aucun concurrent n'affiche les fenêtres d'appel légales dans son produit :
   le montrer est un argument, pas une décoration.
   ======================================================================== */
.mk-camp { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.mk-camp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mk-camp__name { font-size: 15px; font-weight: 800; letter-spacing: -0.025em; color: var(--text); }
.mk-camp__seg {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.mk-camp__prog {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.mk-camp__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  overflow: hidden;
  display: flex;
  margin: 10px 0 9px;
}
.mk-camp__seg-fill { height: 100%; width: 0; transition: width 1.5s var(--ease-out); }
.is-in .mk-camp__seg-fill,
.mk--play .mk-camp__seg-fill { width: var(--w); }
.mk-camp__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.mk-camp__legend i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-micro);
  margin-right: 5px;
}
.mk-camp__win {
  background: var(--proof-tint);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.mk-camp__win-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--proof-dark);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mk-camp__slots { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-camp__slot {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--bg-elevated);
  border-radius: var(--radius-xs);
  padding: 4px 9px;
  color: var(--proof-dark);
  font-variant-numeric: tabular-nums;
}
.mk-camp__slot--off {
  background: transparent;
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.65;
}
.mk-camp__rows { border-top: 1px solid var(--border); }
.mk-camp__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  font-size: 11.5px;
  border-bottom: 1px dashed var(--border);
}
.mk-camp__who { font-weight: 600; color: var(--text); }
.mk-camp__meta { font-size: 10.5px; color: var(--text-muted); }

/* ==========================================================================
   8. RAPPORT HEBDOMADAIRE — barres + forme d'onde
   ======================================================================== */
.mk-rep { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.mk-rep__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.mk-bars { display: flex; align-items: flex-end; gap: 7px; height: 122px; }
.mk-bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.mk-bars__seg {
  border-radius: var(--radius-micro);
  height: 0;
  transition: height 1s var(--ease-out);
}
.is-in .mk-bars__seg,
.mk--play .mk-bars__seg { height: var(--h); }
.mk-bars__x {
  display: flex;
  gap: 7px;
  margin-top: 8px;
  font-size: 9.5px;
  color: var(--text-muted);
}
.mk-bars__x span { flex: 1; text-align: center; }

/* Forme d'onde d'un appel */
.mk-wave { display: flex; align-items: center; gap: 2px; height: 44px; }
.mk-wave i {
  flex: 1;
  background: var(--brand-3);
  border-radius: var(--radius-pill);
  opacity: 0.75;
  height: var(--h, 30%);
  animation: wave 1.5s var(--ease-out) infinite alternate;
}
@keyframes wave { to { transform: scaleY(0.55); } }
.mk-rep__quote {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: italic;
  border-left: 2px solid var(--brand-tint-2);
  padding-left: 12px;
}

/* ==========================================================================
   VARIANTES MOBILES DÉDIÉES — six compositions
   Aucune n'est une réduction de son équivalent desktop : chacune choisit ce qui
   a du sens sur 390px et abandonne le reste. Une grille mensuelle de 35 cases,
   une barre segmentée à trois couleurs ou une transcription de six bulles sont
   illisibles à cette largeur — c'est précisément le défaut relevé sur le site
   de référence, et la raison pour laquelle ces variantes existent.
   ======================================================================== */

/* --- Studio : la progression, pas le formulaire --- */
.mk-cfg-m { padding: 18px; }
.mk-cfg-m__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}
.mk-cfg-m__step { font-size: 12px; font-weight: 700; color: var(--text-inv); }
.mk-cfg-m__pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--proof-on-dark);
  font-variant-numeric: tabular-nums;
}
.mk-cfg-m__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mk-cfg-m__li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  padding: 8px 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-inv-muted);
}
.mk-cfg-m__li b { color: var(--text-inv); font-weight: 600; }
.mk-cfg-m__d { font-size: 11px; color: var(--text-inv-muted); }
.mk-cfg-m__dot {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-inv-muted);
}
.mk-cfg-m__li.is-done .mk-cfg-m__dot {
  background: var(--proof);
  border-color: var(--proof);
  color: #fff;
}
.mk-cfg-m__li.is-cur .mk-cfg-m__dot {
  background: var(--action-on-dark);
  border-color: var(--action-on-dark);
  color: var(--bg-darker);
}
.mk-cfg-m__note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-inv-muted);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.mk-cfg-m__note svg { flex: none; margin-top: 1px; }

/* --- Agenda : une semaine en bandeau, la journée en frise --- */
.mk-cal-m { padding: 16px; }
.mk-cal-m__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 12px 0 16px;
}
.mk-cal-m__d {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 8px 0 7px;
  border-radius: var(--radius-xs);
  background: var(--bg);
  border: 1px solid var(--border);
}
.mk-cal-m__d.is-today { background: var(--brand); border-color: var(--brand); }
.mk-cal-m__d.is-today .mk-cal-m__dow,
.mk-cal-m__d.is-today .mk-cal-m__n { color: #fff; }
.mk-cal-m__d.is-out { opacity: 0.4; }
.mk-cal-m__dow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.mk-cal-m__n {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mk-cal-m__dot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: transparent; }
.mk-cal-m__dot.is-has { background: var(--proof); }
.mk-cal-m__dot.is-full { background: var(--pain); }
.mk-cal-m__day { display: grid; gap: 8px; }
.mk-cal-m__ev {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.mk-cal-m__evb { display: grid; gap: 2px; }

/* --- Appel : l'écran de combiné, pas la transcription --- */
.mk-chat-m { padding: 20px 18px; text-align: center; }
.mk-chat-m__pulse {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill);
  background: var(--proof-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--proof-dark);
  position: relative;
  margin-bottom: 12px;
}
.mk-chat-m__pulse::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--proof);
  opacity: 0;
}
.mk--play .mk-chat-m__pulse::after { animation: mk-pulse 2.1s var(--ease-out) infinite; }
.mk-chat-m__num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mk-chat-m__st { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.mk-chat-m__live {
  margin: 16px 0 14px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
}
.mk-chat-m__lbl {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.mk-chat-m__live p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.mk-chat-m__acts { display: grid; gap: 7px; margin-bottom: 14px; text-align: left; }
.mk-chat-m__act {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.mk-chat-m__act.is-done { color: var(--proof-dark); font-weight: 600; }

/* --- Campagne : le résultat d'abord --- */
.mk-camp-m { padding: 16px; }
.mk-camp-m__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.mk-camp-m__hero {
  background: var(--proof-tint);
  border: 1px solid var(--proof-tint-2);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
}
.mk-camp-m__n {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--proof-dark);
  font-variant-numeric: tabular-nums;
}
.mk-camp-m__sub { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.mk-camp-m__rows { display: grid; gap: 1px; margin-bottom: 14px; }
.mk-camp-m__r {
  display: grid;
  grid-template-columns: 9px 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.mk-camp-m__r i { width: 9px; height: 9px; border-radius: var(--radius-pill); }
.mk-camp-m__r b { color: var(--text); font-variant-numeric: tabular-nums; }
.mk-camp-m__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* --- Rapport : la forme d'un e-mail, parce qu'on le lit dans un e-mail --- */
.mk-rep-m { padding: 16px; }
.mk-rep-m__mail {
  display: grid;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.mk-rep-m__from { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.mk-rep-m__subj { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.mk-rep-m__hero { margin-bottom: 16px; }
.mk-rep-m__n {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mk-rep-m__chart {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
}
.mk-rep-m__bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  align-items: end;
  height: 104px;
  margin: 12px 0 7px;
}
.mk-rep-m__col { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.mk-rep-m__seg {
  display: block;
  width: 100%;
  height: 0;
  border-radius: var(--radius-micro);
  transition: height 0.9s var(--ease-out);
}
.mk--play .mk-rep-m__seg { height: var(--h); }
.mk-rep-m__quote {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: italic;
  border-left: 2px solid var(--brand-tint-2);
  padding-left: 12px;
  display: grid;
  gap: 7px;
}
.mk-rep-m__ql {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-style: normal;
}

/* --- Appels manqués : la forme du journal d'appels d'un téléphone --- */
.mk-miss { padding: 18px; }
.mk-miss__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.mk-miss__head b { font-size: 13.5px; color: var(--text); }
.mk-miss__row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.mk-miss__h { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mk-miss__n { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mk-miss__d { font-size: 10.5px; color: var(--text-muted); }
.mk-miss__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
}
.mk-miss-m { padding: 14px 16px; }
.mk-miss-m__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.mk-miss-m__badge {
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: var(--pain);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-miss-m__row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.mk-miss-m__ic { color: var(--pain); display: inline-flex; }
.mk-miss-m__b { display: grid; gap: 2px; min-width: 0; }
.mk-miss-m__n {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mk-miss-m__d { font-size: 10.5px; color: var(--text-muted); }
.mk-miss-m__h { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Cadre commun : ombre plus marquée quand le mockup est « en scène »
   ======================================================================== */
.mk-stage { position: relative; }
.mk-stage::before {
  content: "";
  position: absolute;
  inset: 14% 6% -6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 15, 14, 0.12), transparent 68%);
  filter: blur(34px);
  pointer-events: none;
}