/* ==========================================================================
   CapVitality — Design system
   Charte graphique CapVitality — bleu marine + turquoise
   Base 8px · Caladea (titres) · Carlito (texte) · WCAG 2.2 AA
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées (RGPD : aucun appel à un CDN tiers)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Caladea";
  src: url("../fonts/caladea-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caladea";
  src: url("../fonts/caladea-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Couleurs — thème clair (défaut) */
  --cv-bg: #F7FAF9;
  --cv-bg-alt: #EDF4F3;
  --cv-surface: #FFFFFF;
  --cv-surface-2: #F1F7F6;
  --cv-surface-deep: #0A4C73;
  --cv-surface-deep-2: #073A59;
  --cv-border: #D6E3E4;
  --cv-border-strong: #A2BCC2;

  --cv-accent: #2FA396;          /* turquoise de marque — décor, traits, icônes */
  --cv-accent-ink: #0F6F62;      /* turquoise assombri — texte / liens / boutons
                                    (>= 4.5:1 sur bg, surface ET accent-soft) */
  --cv-accent-ink-hover: #0E6459;
  --cv-accent-soft: #DCF0ED;     /* décoratif uniquement, jamais du texte */
  --cv-accent-soft-2: #C3E6E1;

  --cv-text: #12303D;
  --cv-text-muted: #4F6C79;      /* calibré pour 4.5:1 sur bg, surface et accent-soft */
  --cv-text-strong: #0A4C73;
  --cv-on-deep: #FFFFFF;
  --cv-on-deep-muted: #CDE4F0;
  --cv-on-deep-accent: #7FE3D6;

  --cv-on-accent: #FFFFFF;       /* texte posé sur --cv-accent-ink */
  --cv-focus: #0F6F62;
  --cv-danger: #A3231F;
  --cv-danger-bg: #FDEDEC;
  --cv-success: #1A6B45;
  --cv-success-bg: #E8F5EE;
  --cv-warning-bg: #FDF4E3;
  --cv-warning-line: #A06A05;

  --cv-shadow-1: 0 1px 2px rgba(10, 76, 115, .06), 0 2px 8px rgba(10, 76, 115, .06);
  --cv-shadow-2: 0 2px 4px rgba(10, 76, 115, .07), 0 12px 28px rgba(10, 76, 115, .10);

  /* Typographie */
  --cv-font-title: "Caladea", Cambria, Georgia, "Times New Roman", serif;
  --cv-font-body: "Carlito", Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
  --cv-text-scale: 1;

  /* Espacement — base 8 */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem; --s-9: 6rem;

  /* Formes */
  --r-sm: 8px; --r-card: 12px; --r-feature: 20px; --r-pill: 999px;

  --cv-container: 74rem;
  --cv-measure: 38rem;
}

/* Thème sombre — suit la préférence système, surchargeable par l'utilisateur */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cv-bg: #062435;
    --cv-bg-alt: #041C2A;
    --cv-surface: #0C3348;
    --cv-surface-2: #0F3D55;
    --cv-surface-deep: #041926;
    --cv-surface-deep-2: #03131D;
    --cv-border: #1C4E68;
    --cv-border-strong: #4C87A3;

    --cv-accent: #4DD9CB;
    --cv-accent-ink: #5FE3D5;
    --cv-accent-ink-hover: #96F0E6;
    --cv-accent-soft: #10465A;
    --cv-accent-soft-2: #16566E;

    --cv-text: #EAF3F1;
    --cv-text-muted: #A9C6D1;
    --cv-text-strong: #EAF3F1;
    --cv-on-deep: #FFFFFF;
    --cv-on-deep-muted: #C3DDEB;
    --cv-on-deep-accent: #7FE3D6;

    --cv-on-accent: #12303D;     /* l'accent devient clair : le texte passe en marine */
    --cv-focus: #7FE3D6;
    --cv-danger: #FFB3AE;
    --cv-danger-bg: #43201F;
    --cv-success: #8EE0B4;
    --cv-success-bg: #10352A;
    --cv-warning-bg: #3A2E19;
    --cv-warning-line: #E4B65A;

    --cv-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --cv-shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cv-bg: #062435;
  --cv-bg-alt: #041C2A;
  --cv-surface: #0C3348;
  --cv-surface-2: #0F3D55;
  --cv-surface-deep: #041926;
  --cv-surface-deep-2: #03131D;
  --cv-border: #1C4E68;
  --cv-border-strong: #4C87A3;

  --cv-accent: #4DD9CB;
  --cv-accent-ink: #5FE3D5;
  --cv-accent-ink-hover: #96F0E6;
  --cv-accent-soft: #10465A;
  --cv-accent-soft-2: #16566E;

  --cv-text: #EAF3F1;
  --cv-text-muted: #A9C6D1;
  --cv-text-strong: #EAF3F1;
  --cv-on-deep: #FFFFFF;
  --cv-on-deep-muted: #C3DDEB;
  --cv-on-deep-accent: #7FE3D6;

  --cv-on-accent: #12303D;
  --cv-focus: #7FE3D6;
  --cv-danger: #FFB3AE;
  --cv-danger-bg: #43201F;
  --cv-success: #8EE0B4;
  --cv-success-bg: #10352A;
  --cv-warning-bg: #3A2E19;
  --cv-warning-line: #E4B65A;

  --cv-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --cv-shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
}

/* Confort de lecture : réglage utilisateur (A / A+ / A++) */
:root[data-textsize="l"]  { --cv-text-scale: 1.15; }
:root[data-textsize="xl"] { --cv-text-scale: 1.3; }

/* --------------------------------------------------------------------------
   3. Réglages de base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(100% * var(--cv-text-scale));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--cv-bg);
  color: var(--cv-text);
  font-family: var(--cv-font-body);
  font-size: 1.125rem;            /* 18px — jamais sous 16px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--cv-font-title);
  color: var(--cv-text-strong);
  line-height: 1.2;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--s-5); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--cv-accent-ink); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--cv-accent-ink-hover); }

strong, b { font-weight: 700; color: var(--cv-text-strong); }
small { font-size: .9375rem; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
hr { border: 0; border-top: 1px solid var(--cv-border); margin: var(--s-7) 0; }
abbr[title] { text-decoration-style: dotted; cursor: help; }

::selection { background: var(--cv-accent-soft-2); color: var(--cv-text-strong); }

:focus-visible {
  outline: 3px solid var(--cv-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. Utilitaires
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2rem, var(--cv-container)); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-2);
  transform: translateY(-180%);
  z-index: 200;
  background: var(--cv-surface); color: var(--cv-text-strong);
  border: 2px solid var(--cv-focus); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); font-weight: 700; text-decoration: none;
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

.measure { max-width: var(--cv-measure); }
.text-center { text-align: center; }
.text-muted { color: var(--cv-text-muted); }
.text-strong { color: var(--cv-text-strong); }
.text-on-deep-muted { color: var(--cv-on-deep-muted); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-5); }

/* Utilitaires d'espacement et de taille.
   Le site n'utilise aucun attribut `style` en ligne : la CSP interdit les
   styles en ligne (`style-src 'self'`), et tout doit passer par une classe. */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--s-3); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.my-6 { margin-block: var(--s-6); }
.mx-auto { margin-inline: auto; }

.fs-1  { font-size: 1rem; }
.fs-lg { font-size: 1.125rem; }
.fs-xl { font-size: 1.25rem; }
/* Titre de niveau intermédiaire, plus petit qu'un h2 de section */
.h-sub { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }

.w-46 { max-width: 46rem; }
.w-50 { max-width: 50rem; }
.w-52 { max-width: 52rem; }
.w-58 { max-width: 58rem; }
.input--short { max-width: 12rem; }

.items-start { align-items: start; }
.list-reset { list-style: none; padding: 0; margin: 0; }
.link-plain { color: var(--cv-text-strong); text-decoration: none; }
.link-plain:hover { color: var(--cv-accent-ink); text-decoration: underline; }
.address-inline { display: inline; font-style: normal; }
.card--accent { border: 2px solid var(--cv-accent); }

/* Visuels SVG intégrés : la police vient de la feuille de style, pas d'un
   attribut en ligne (bloqué par la CSP). */
.cv-svg { width: 100%; height: auto; display: block; }
.cv-svg text { font-family: var(--cv-font-body); }
.cv-svg text.t { font-family: var(--cv-font-title); }

.eyebrow {
  display: block;
  font-family: var(--cv-font-body);
  font-size: .875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cv-accent-ink);
  margin-bottom: var(--s-3);
}
.eyebrow--on-deep { color: var(--cv-on-deep-accent); }

.lead {
  font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  line-height: 1.6;
}

/* Sur fond marine, l'eyebrow et les libellés passent en turquoise clair */
.section--deep .eyebrow,
.cta-band .eyebrow,
.site-footer .eyebrow { color: var(--cv-on-deep-accent); }

/* --------------------------------------------------------------------------
   5. Sections
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(var(--s-7), 5vw, var(--s-9)); }
.section--tight { padding-block: clamp(var(--s-6), 4vw, var(--s-8)); }
.section--alt { background: var(--cv-bg-alt); }
.section--surface { background: var(--cv-surface); }
.section--deep { background: var(--cv-surface-deep); color: var(--cv-on-deep); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--cv-on-deep); }
.section--deep p, .section--deep li { color: var(--cv-on-deep-muted); }
.section--deep a:not(.btn) { color: var(--cv-on-deep-accent); }
.section--deep .card { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); box-shadow: none; }
.section--deep .card h3 { color: var(--cv-on-deep); }

.section__head { max-width: 46rem; margin-bottom: var(--s-6); }
.section__head--center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem; padding: .75rem 1.5rem;
  font-family: var(--cv-font-body); font-size: 1.0625rem; font-weight: 700;
  line-height: 1.3; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:focus-visible { outline: 3px solid var(--cv-focus); outline-offset: 3px; }

.btn--primary { background: var(--cv-accent-ink); color: var(--cv-on-accent); border-color: var(--cv-accent-ink); }
.btn--primary:hover { background: var(--cv-accent-ink-hover); border-color: var(--cv-accent-ink-hover); color: var(--cv-on-accent); }

.btn--secondary { background: transparent; color: var(--cv-text-strong); border-color: var(--cv-border-strong); }
.btn--secondary:hover { background: var(--cv-surface-2); border-color: var(--cv-text-strong); color: var(--cv-text-strong); }

.btn--on-deep { background: #FFFFFF; color: #0A4C73; border-color: #FFFFFF; }
.btn--on-deep:hover { background: var(--cv-accent-soft); color: #073A59; border-color: var(--cv-accent-soft); }

.btn--ghost-on-deep { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .7); }
.btn--ghost-on-deep:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; border-color: #FFFFFF; }

.btn--lg { min-height: 3.5rem; padding: 1rem 2rem; font-size: 1.1875rem; }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .65; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.btn-row--center { justify-content: center; }

.icon {
  flex: none; width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   7. En-tête
   -------------------------------------------------------------------------- */
.topbar { background: var(--cv-surface-deep); color: var(--cv-on-deep); font-size: .9375rem; }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2) var(--s-4); padding-block: var(--s-1);
}
.topbar a {
  color: #FFFFFF; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding-inline: var(--s-2); border-radius: var(--r-sm);
}
.topbar a:hover { text-decoration: underline; color: #FFFFFF; }
.topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.topbar__phone { font-weight: 700; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cv-surface);
  border-bottom: 1px solid var(--cv-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 4.5rem; padding-block: var(--s-2);
  position: relative;
}

.logo {
  display: inline-flex; align-items: center; gap: var(--s-3);
  text-decoration: none; min-height: 3rem;
  color: var(--cv-text-strong);   /* le tracé de pouls hérite de currentColor */
}
.logo__mark { flex: none; width: 2.75rem; height: 2.75rem; }
.logo__word {
  font-family: var(--cv-font-title); font-weight: 700;
  font-size: 1.5rem; line-height: 1; color: var(--cv-text-strong);
  letter-spacing: -.01em; white-space: nowrap;
}
.logo__word em { font-style: normal; color: var(--cv-accent-ink); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 3rem; min-width: 3rem; padding: .5rem 1rem;
  background: var(--cv-surface); color: var(--cv-text-strong);
  border: 2px solid var(--cv-border-strong); border-radius: var(--r-pill);
  font-family: var(--cv-font-body); font-size: 1rem; font-weight: 700; cursor: pointer;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__open,
.nav-toggle[aria-expanded="false"] .nav-toggle__close { display: none; }

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-1); }
.site-nav__link {
  display: inline-flex; align-items: center;
  min-height: 3rem; padding: .5rem .75rem;
  color: var(--cv-text-strong); font-weight: 700; font-size: 1.0625rem;
  text-decoration: none; border-radius: var(--r-sm);
  border-bottom: 3px solid transparent;
}
.site-nav__link:hover { background: var(--cv-surface-2); color: var(--cv-text-strong); text-decoration: underline; }
.site-nav__link[aria-current="page"] { border-bottom-color: var(--cv-accent); color: var(--cv-accent-ink); }
.site-header__cta { display: none; }

/* Sous 34em, le lien partenaires quitte la barre haute pour le menu :
   on garde le téléphone et le réglage de taille du texte visibles d'emblée. */
@media (max-width: 33.99em) {
  .topbar__b2b { display: none; }
}
@media (min-width: 34em) {
  .site-nav__b2b { display: none; }
}

@media (max-width: 77.49em) {
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cv-surface);
    border-bottom: 1px solid var(--cv-border);
    box-shadow: var(--cv-shadow-2);
    padding: var(--s-4) 0 var(--s-5);
    max-height: calc(100dvh - 4.5rem); overflow-y: auto;
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--s-2); width: min(100% - 2rem, var(--cv-container)); margin-inline: auto; }
  .site-nav__link {
    min-height: 3.25rem; padding: .75rem 1rem; font-size: 1.125rem;
    border: 1px solid var(--cv-border); border-radius: var(--r-card);
    border-bottom-width: 1px;
  }
  .site-nav__link[aria-current="page"] { border-color: var(--cv-accent); background: var(--cv-accent-soft); }
  .site-nav__cta { margin-top: var(--s-3); }
}
@media (min-width: 77.5em) {
  .nav-toggle { display: none; }
  .site-nav__b2b { display: none; }
  .site-header__inner { gap: var(--s-5); }
  .site-header__cta { display: inline-flex; }
  .site-nav__cta { display: none; }
}

/* --------------------------------------------------------------------------
   Le sigle qui bat
   Le tracé de pouls est la marque : il bat en permanence, doucement, comme un
   cœur au repos — jamais il ne s'arrête sur une ligne plate.
   Sur l'accueil, une traînée part du sigle, passe au-dessus du nom et vient
   battre une seconde fois au-dessus de « Notre approche », puis s'efface.
   Tout est désactivé si « animations réduites » est demandé, ou si la personne
   coupe les animations depuis le pied de page.
   -------------------------------------------------------------------------- */
.logo-trail {
  display: none;                 /* réservée aux écrans où la navigation est visible */
  position: absolute; left: 3.5rem; top: .25rem;
  width: 23.5rem; height: 1.5rem;
  pointer-events: none;          /* ne masque jamais un lien */
  opacity: 0;
}
.logo-trail svg { width: 100%; height: 100%; overflow: visible; }
.logo-trail__line,
.logo-trail__head { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.logo-trail__line { stroke: var(--cv-accent-soft-2); stroke-width: 2.5; }
.logo-trail__head { stroke: var(--cv-accent); stroke-width: 3; }

@media (min-width: 77.5em) {
  .logo-trail { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Battement permanent : un cycle « lub-dub » puis du repos, 3 s en tout. */
  :root:not([data-motion="off"]) .site-header .logo__mark {
    transform-origin: center;
    animation: cv-heartbeat 3s ease-in-out infinite;
  }

  /* Au premier affichage de l'accueil : le tracé se dessine dans la bulle… */
  :root:not([data-motion="off"]).cv-intro .site-header .logo__pulse {
    stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: cv-draw .55s ease-out forwards;
  }
  /* … puis la traînée s'élance et va battre au-dessus de « Notre approche ». */
  :root:not([data-motion="off"]).cv-intro .logo-trail {
    animation: cv-trail 2.6s linear forwards;
  }
  :root:not([data-motion="off"]).cv-intro .logo-trail__line {
    stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: cv-draw 1.15s cubic-bezier(.3, .5, .3, 1) .85s forwards;
  }
  :root:not([data-motion="off"]).cv-intro .logo-trail__head {
    stroke-dasharray: 5 95; stroke-dashoffset: 5;
    animation: cv-head 1.15s cubic-bezier(.3, .5, .3, 1) .85s forwards;
  }
}

@keyframes cv-draw { to { stroke-dashoffset: 0; } }
@keyframes cv-head { to { stroke-dashoffset: -95; } }

/* Contraction forte, contraction faible, puis repos. */
@keyframes cv-heartbeat {
  0%        { transform: scale(1); }
  7%        { transform: scale(1.07); }
  14%       { transform: scale(1); }
  21%       { transform: scale(1.035); }
  30%, 100% { transform: scale(1); }
}

/* La traînée n'existe que le temps de sa course : rien ne reste figé. */
@keyframes cv-trail {
  0%, 30%  { opacity: 0; }
  36%      { opacity: 1; }
  77%      { opacity: 1; }
  100%     { opacity: 0; }
}

.footer__prefs { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Réglage de la taille du texte */
.topbar__outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }

/* Lecture à voix haute de la page (bouton affiché par app.js si le navigateur sait lire). */
.ecoute-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--s-3); justify-content: center;
  background: transparent; color: #FFFFFF; border: 2px solid rgba(255, 255, 255, .6); border-radius: var(--r-sm);
  font: inherit; font-weight: 700; cursor: pointer;
}
.ecoute-btn[hidden] { display: none; }
.ecoute-btn:hover { background: rgba(255, 255, 255, .16); }
.ecoute-btn[aria-pressed="true"] { background: #FFFFFF; color: #0A4C73; border-color: #FFFFFF; }
.ecoute-btn .icon { width: 1.25rem; height: 1.25rem; }
@media (max-width: 33.99em) {
  .ecoute-lecteur { flex-wrap: nowrap; }
  .ecoute-lecteur__etat span,
  .ecoute-btn__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.ecoute-lecteur {
  position: fixed; z-index: 60; left: 50%; bottom: var(--s-4); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: 999px;
  background: #0A4C73; color: #FFFFFF; box-shadow: var(--cv-shadow-2);
}
.ecoute-lecteur[hidden] { display: none; }
.ecoute-lecteur__etat { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; padding-left: var(--s-1); }
.ecoute-lecteur__etat .icon { width: 1.25rem; height: 1.25rem; }
.ecoute-lecteur button {
  min-height: 2.75rem; padding: 0 var(--s-4); border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF;
}
.ecoute-lecteur button:hover { background: rgba(255, 255, 255, .16); }
.ecoute-lecteur button:focus-visible, .ecoute-btn:focus-visible { outline: 3px solid #7FE3D6; outline-offset: 2px; }
/* Passage en cours de lecture : surligné pour le suivre des yeux. */
.ecoute-en-cours {
  background: #FFF1B8 !important; color: #12303D !important;
  box-shadow: 0 0 0 .3rem #FFF1B8; border-radius: 4px;
}
.textsize { display: flex; align-items: center; gap: var(--s-2); }
.textsize__label { font-size: .9375rem; color: #FFFFFF; }
.textsize__group { display: flex; gap: var(--s-1); }
.textsize__btn {
  min-width: 2.75rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, .6); border-radius: var(--r-sm);
  font-family: var(--cv-font-body); font-weight: 700; cursor: pointer; line-height: 1;
}
.textsize__btn:hover { background: rgba(255, 255, 255, .16); }
.textsize__btn[aria-pressed="true"] { background: #FFFFFF; color: #0A4C73; border-color: #FFFFFF; }
.textsize__btn--a  { font-size: .9375rem; }
.textsize__btn--l  { font-size: 1.125rem; }
.textsize__btn--xl { font-size: 1.3125rem; }

/* --------------------------------------------------------------------------
   8. Fil d'Ariane
   -------------------------------------------------------------------------- */
.breadcrumb { background: var(--cv-surface); font-size: .9375rem; border-bottom: 1px solid var(--cv-border); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-1) 0; }
.breadcrumb li { display: flex; align-items: center; gap: var(--s-2); color: var(--cv-text-muted); }
.breadcrumb li + li::before { content: "\203A"; color: var(--cv-text-muted); }
.breadcrumb a { color: var(--cv-text-muted); display: inline-flex; align-items: center; min-height: 2.75rem; }
.breadcrumb [aria-current="page"] { color: var(--cv-text); }

/* --------------------------------------------------------------------------
   9. Héros
   -------------------------------------------------------------------------- */
.hero { background: var(--cv-surface); border-bottom: 1px solid var(--cv-border); }
.hero__inner {
  display: grid; gap: var(--s-6);
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}
.hero__lead { max-width: 34rem; margin-bottom: var(--s-5); }
.hero__media img, .hero__media svg { width: 100%; border-radius: var(--r-feature); }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.hero__proof li {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: .9375rem; font-weight: 700; color: var(--cv-text-muted);
}
.hero__proof .icon { stroke: var(--cv-accent-ink); width: 1.25rem; height: 1.25rem; }

@media (min-width: 60em) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--s-8); }
}

.page-hero { background: var(--cv-surface); border-bottom: 1px solid var(--cv-border); }
.page-hero__inner { padding-block: clamp(var(--s-5), 4vw, var(--s-7)); max-width: 48rem; }

/* --------------------------------------------------------------------------
   9 bis. Photographies
   -------------------------------------------------------------------------- */
.photo { display: block; }
.photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-card);
  background: var(--cv-surface-2);   /* fond neutre pendant le chargement */
}

/* Photo en tête de carte, jusqu'aux bords */
.card--media { padding-top: 0; overflow: hidden; }
.card__media { margin: 0 calc(-1 * var(--s-5)) var(--s-5); }
.card--media.card--feature .card__media { margin-inline: calc(-1 * var(--s-6)); }
.card__media img { border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; }

/* Bandeau illustré pleine largeur de colonne */
.media-band { border-radius: var(--r-feature); overflow: hidden; }
.media-band img { border-radius: var(--r-feature); }

/* Visuel du héros */
.hero__photo img { border-radius: var(--r-feature); box-shadow: var(--cv-shadow-2); }

/* Encart « aperçu du programme » */
.programme-card {
  background: var(--cv-surface); border: 1px solid var(--cv-border);
  border-radius: var(--r-feature); padding: var(--s-5); box-shadow: var(--cv-shadow-1);
}
.programme-card > figcaption {
  margin-top: var(--s-4); font-size: .9375rem; color: var(--cv-text-muted);
}

/* --------------------------------------------------------------------------
   10. Cartes et grilles
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 40em) {
  .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.grid--split { grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 60em) { .grid--split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

.card {
  background: var(--cv-surface);
  border: 1px solid var(--cv-border);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--cv-shadow-1);
}
.card--feature { border-radius: var(--r-feature); padding: var(--s-6); }
.card--quiet { box-shadow: none; background: var(--cv-surface-2); }
.card--flow { display: flex; flex-direction: column; height: 100%; }
.card__title { margin-bottom: var(--s-3); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: var(--s-4);
  background: var(--cv-accent-soft); border-radius: var(--r-card);
}
.card__icon .icon { width: 2rem; height: 2rem; stroke: var(--cv-accent-ink); stroke-width: 2; }
.section--deep .card__icon { background: rgba(127, 227, 214, .18); }
.section--deep .card__icon .icon { stroke: var(--cv-on-deep-accent); }
.card__link { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-weight: 700; min-height: 2.75rem; }
.card__link .icon { width: 1.1em; height: 1.1em; stroke-width: 2.4; }

/* Tuile chiffre-clé */
.stat-tile__value {
  display: block; font-family: var(--cv-font-title); font-weight: 700;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); line-height: 1.05;
  color: var(--cv-text-strong);
}
.section--deep .stat-tile__value { color: var(--cv-on-deep-accent); }
.stat-tile__label { display: block; margin-top: var(--s-2); color: var(--cv-text-muted); font-size: 1rem; }
.section--deep .stat-tile__label { color: var(--cv-on-deep-muted); }
.stat-tile__source { display: block; margin-top: var(--s-2); font-size: .875rem; color: var(--cv-text-muted); }
.section--deep .stat-tile__source { color: var(--cv-on-deep-muted); }

/* Listes de navigation : chaque lien reste une cible confortable */
.list-links li, .article-toc li, .related li { margin-bottom: var(--s-1); }
.list-links li > a,
.article-toc li > a,
.related li > a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-inline: .25rem; margin-inline: -.25rem; border-radius: var(--r-sm);
}

/* Listes */
.list-check { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.list-check li { position: relative; padding-left: 2.25rem; margin-bottom: var(--s-3); }
.list-check li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 1.5rem; height: 1.5rem; background: var(--cv-accent-soft); border-radius: 50%;
}
.list-check li::after {
  content: ""; position: absolute; left: .4rem; top: .63em;
  width: .7rem; height: .38rem;
  border-left: .17rem solid var(--cv-accent-ink); border-bottom: .17rem solid var(--cv-accent-ink);
  transform: rotate(-45deg);
}
.section--deep .list-check li::before { background: rgba(127, 227, 214, .2); }
.section--deep .list-check li::after { border-color: var(--cv-on-deep-accent); }

.list-plain { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.list-plain li { margin-bottom: var(--s-3); }

/* --------------------------------------------------------------------------
   11. Étapes numérotées
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.steps__item {
  background: var(--cv-surface);
  border: 1px solid var(--cv-border);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--cv-shadow-1);
}
.steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: var(--s-4);
  background: var(--cv-surface-deep); color: #FFFFFF;
  border-radius: 50%;
  font-family: var(--cv-font-title); font-size: 1.375rem; font-weight: 700; line-height: 1;
}
.steps__title { margin-bottom: var(--s-3); }
.steps__meta {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4);
  font-size: .9375rem; color: var(--cv-text-muted); font-weight: 700;
}
.steps__meta .icon { width: 1.125rem; height: 1.125rem; stroke: var(--cv-accent-ink); }
@media (min-width: 48em) {
  .steps__item { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-5); align-items: start; padding: var(--s-6); }
  .steps__num { margin-bottom: 0; }
}

/* Enchaînement d'étapes relié par des flèches ------------------------------ */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-7);
}
.flow__step {
  position: relative;
  display: flex; flex-direction: column;   /* pour aligner les repères en bas */
  background: var(--cv-surface);
  border: 1px solid var(--cv-border);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--cv-shadow-1);
}
.flow__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: var(--s-3);
  background: var(--cv-accent-ink); color: var(--cv-on-accent);
  border-radius: 50%;
  font-family: var(--cv-font-title); font-size: 1.25rem; font-weight: 700; line-height: 1;
}
.flow__title { font-size: 1.1875rem; margin-bottom: var(--s-2); }
.flow__step p { font-size: 1rem; }
.flow__meta {
  display: inline-flex; align-items: center; align-self: flex-start; gap: var(--s-2);
  margin-top: auto; padding-top: var(--s-4);
  font-size: .9375rem; font-weight: 700; color: var(--cv-text-muted);
}
.flow__meta .icon { width: 1.125rem; height: 1.125rem; stroke: var(--cv-accent-ink); }

/* Flèche entre deux étapes : vers le bas en colonne, vers la droite en ligne */
.flow__step + .flow__step::before {
  content: ""; position: absolute;
  width: 1.15rem; height: 1.15rem;
  border-right: 4px solid var(--cv-accent);
  border-bottom: 4px solid var(--cv-accent);
  left: 50%; top: calc(-1 * var(--s-7) / 2);
  transform: translate(-50%, -50%) rotate(45deg);
}

.flow--compact .flow__step { padding: var(--s-4) var(--s-5); }
.flow--compact .flow__num { width: 2.25rem; height: 2.25rem; font-size: 1.0625rem; margin-bottom: var(--s-2); }
.flow--compact .flow__title { font-size: 1.0625rem; }

@media (min-width: 56em) {
  .flow { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .flow--compact { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .flow__step + .flow__step::before {
    left: calc(-1 * var(--s-6) / 2); top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   12. Piliers (sport / nutrition / mental)
   -------------------------------------------------------------------------- */
.pillar { border-top: 5px solid var(--cv-accent); }
.pillar--sport { border-top-color: #2FA396; }
.pillar--nutrition { border-top-color: #0A4C73; }
.pillar--mental { border-top-color: #7092A8; }
.pillar__tag {
  display: inline-block; align-self: flex-start; margin-bottom: var(--s-3);
  padding: .125rem .75rem; border-radius: var(--r-pill);
  background: var(--cv-accent-soft); color: var(--cv-text-strong);
  font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   13. Bandeau d'appel à l'action
   -------------------------------------------------------------------------- */
.cta-band { background: var(--cv-surface-deep); color: var(--cv-on-deep); }
.cta-band__inner { padding-block: clamp(var(--s-7), 5vw, var(--s-8)); display: grid; gap: var(--s-5); align-items: center; }
.cta-band h2 { color: var(--cv-on-deep); }
.cta-band p { color: var(--cv-on-deep-muted); }
.cta-band__note { font-size: .9375rem; }
@media (min-width: 60em) {
  .cta-band__inner { grid-template-columns: 1.3fr 1fr; gap: var(--s-8); }
}

/* --------------------------------------------------------------------------
   14. Tarifs
   -------------------------------------------------------------------------- */
.price-grid { display: grid; gap: var(--s-5); align-items: stretch; }
@media (min-width: 62em) { .price-grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
  background: var(--cv-surface); border: 2px solid var(--cv-border);
  border-radius: var(--r-feature); padding: var(--s-6);
  display: flex; flex-direction: column; height: 100%;
}
.price-card--featured { border-color: var(--cv-accent); box-shadow: var(--cv-shadow-2); }
.price-card__badge {
  display: inline-block; align-self: flex-start; margin-bottom: var(--s-3);
  background: var(--cv-accent-ink); color: var(--cv-on-accent);
  padding: .25rem .875rem; border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.price-card__name { margin-bottom: var(--s-2); }
.price-card__for { color: var(--cv-text-muted); margin-bottom: var(--s-4); font-size: 1rem; }
.price-card__price {
  font-family: var(--cv-font-title); font-weight: 700;
  font-size: 2.5rem; line-height: 1.1; color: var(--cv-text-strong);
  display: flex; align-items: baseline; gap: .25rem; flex-wrap: wrap;
}
.price-card__period { font-family: var(--cv-font-body); font-size: 1rem; font-weight: 400; color: var(--cv-text-muted); }
/* Réserve la place du badge sur les cartes qui n'en ont pas, pour que les
   titres des formules restent alignés d'une colonne à l'autre. */
.price-card:not(:has(.price-card__badge))::before {
  content: ""; display: block; height: 1.875rem; margin-bottom: var(--s-3);
}
.price-card__rhythm {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4); font-weight: 700; color: var(--cv-text-strong); font-size: 1rem;
}
.price-card__rhythm .icon { width: 1.125rem; height: 1.125rem; stroke: var(--cv-accent-ink); flex: none; }
.price-card__unit { margin-top: var(--s-1); font-size: .9375rem; color: var(--cv-text-muted); }
.price-card__note { margin: var(--s-3) 0 var(--s-5); font-size: .9375rem; color: var(--cv-text-muted); }
.price-card__features { margin-bottom: var(--s-5); }
.price-card .btn { margin-top: auto; }

.price-compare { width: 100%; border-collapse: collapse; font-size: 1rem; }
.price-compare caption { text-align: left; color: var(--cv-text-muted); padding-bottom: var(--s-3); }
.price-compare th, .price-compare td { padding: var(--s-3); border-bottom: 1px solid var(--cv-border); text-align: left; vertical-align: top; }
.price-compare thead th { color: var(--cv-text-strong); border-bottom: 2px solid var(--cv-border-strong); }
.price-compare tbody th { font-weight: 400; color: var(--cv-text); }
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   15. FAQ (balise native <details>)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); max-width: 52rem; }
.faq__item {
  background: var(--cv-surface); border: 1px solid var(--cv-border);
  border-radius: var(--r-card); overflow: hidden;
}
.faq__item[open] { border-color: var(--cv-border-strong); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); min-height: 3.5rem; cursor: pointer;
  font-family: var(--cv-font-title); font-size: 1.1875rem; font-weight: 700;
  color: var(--cv-text-strong); list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h2, .faq__q h3, .faq__q h4 { font: inherit; color: inherit; margin: 0; }
.faq__q:hover { background: var(--cv-surface-2); }
.faq__q::after {
  content: ""; flex: none; width: .75rem; height: .75rem;
  border-right: .17rem solid var(--cv-accent-ink); border-bottom: .17rem solid var(--cv-accent-ink);
  transform: rotate(45deg) translate(-.15rem, -.15rem);
  transition: transform .15s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-.1rem, -.1rem); }
.faq__a { padding: 0 var(--s-5) var(--s-5); max-width: var(--cv-measure); }

/* --------------------------------------------------------------------------
   16. Formulaires
   -------------------------------------------------------------------------- */
.form { max-width: 40rem; }
.form__section { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.form__legend {
  font-family: var(--cv-font-title); font-size: 1.25rem; font-weight: 700;
  color: var(--cv-text-strong); padding: 0; margin-bottom: var(--s-4);
}
.field { margin-bottom: var(--s-5); }
.field__label { display: block; font-weight: 700; color: var(--cv-text-strong); margin-bottom: var(--s-2); }
.field__hint { display: block; font-size: .9375rem; color: var(--cv-text-muted); margin-bottom: var(--s-2); font-weight: 400; }
.field__req { color: var(--cv-danger); font-weight: 700; }

.input, .textarea, .select {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem;
  font-family: var(--cv-font-body); font-size: 1.0625rem; line-height: 1.5;
  color: var(--cv-text); background: var(--cv-surface);
  border: 2px solid var(--cv-border-strong); border-radius: var(--r-sm);
}
.textarea { min-height: 9rem; resize: vertical; }
.select {
  appearance: none; padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352707E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25rem;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--cv-text-muted); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 3px solid var(--cv-focus); outline-offset: 1px; border-color: var(--cv-focus); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--cv-danger); background: var(--cv-danger-bg); }

.field__error {
  display: none; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-2); color: var(--cv-danger); font-weight: 700; font-size: 1rem;
}
.field__error.is-visible { display: flex; }
.field__error::before { content: "\26A0"; flex: none; font-size: 1.1em; line-height: 1.4; }

.choice-list { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.choice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  min-height: 3rem; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2);
  border: 2px solid var(--cv-border); border-radius: var(--r-card);
  background: var(--cv-surface); cursor: pointer;
}
.choice:hover { border-color: var(--cv-border-strong); background: var(--cv-surface-2); }
.choice:has(input:checked) { border-color: var(--cv-accent-ink); background: var(--cv-accent-soft); }
.choice:has(input:focus-visible) { outline: 3px solid var(--cv-focus); outline-offset: 2px; }
.choice input { flex: none; width: 1.5rem; height: 1.5rem; margin: .2rem 0 0; accent-color: var(--cv-accent-ink); }
.choice strong { display: block; }
.choice span { font-size: .9375rem; color: var(--cv-text-muted); }

.consent-field { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-5); }
.consent-field input { flex: none; width: 1.75rem; height: 1.75rem; margin: .1rem 0 0; accent-color: var(--cv-accent-ink); }
.consent-field label { font-size: 1rem; padding-block: .5rem; }

.form__note { font-size: .9375rem; color: var(--cv-text-muted); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-card);
  border: 2px solid; margin-bottom: var(--s-5);
}
.alert--info { background: var(--cv-accent-soft); border-color: var(--cv-accent); }
.alert--success { background: var(--cv-success-bg); border-color: var(--cv-success); }
.alert--error { background: var(--cv-danger-bg); border-color: var(--cv-danger); }
.alert--warning { background: var(--cv-warning-bg); border-color: var(--cv-warning-line); }
.alert .icon { width: 1.5rem; height: 1.5rem; margin-top: .2rem; }
.alert[hidden] { display: none; }
.alert p:last-child { margin-bottom: 0; }
.alert h2, .alert h3 { margin-bottom: var(--s-2); font-size: 1.1875rem; }

/* --------------------------------------------------------------------------
   17. Contenu éditorial (blog)
   -------------------------------------------------------------------------- */
.article-layout { display: grid; gap: var(--s-7); }
@media (min-width: 64em) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s-8); align-items: start; }
  .article-aside { position: sticky; top: 6.5rem; }
}
.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--cv-accent-ink); font-weight: 700; }
.prose blockquote {
  border-left: 5px solid var(--cv-accent); margin-left: 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5); font-size: 1.1875rem;
  color: var(--cv-text-strong);
}

.answer-box {
  background: var(--cv-accent-soft); border: 2px solid var(--cv-accent);
  border-radius: var(--r-feature); padding: var(--s-5) var(--s-6);
}
.answer-box > *:first-child { margin-top: 0; }
.answer-box__label {
  display: block; font-size: .875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cv-accent-ink); margin-bottom: var(--s-2);
}

/* Schéma d'étapes intégré à l'encadré : cartes claires sur le fond turquoise */
.answer-box .flow { margin-top: var(--s-5); }
.answer-box .flow__step { border-color: transparent; box-shadow: var(--cv-shadow-1); }
.answer-box .flow__step + .flow__step::before {
  border-right-color: var(--cv-accent-ink);
  border-bottom-color: var(--cv-accent-ink);
}

.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--cv-text-muted); font-size: .9375rem; margin-bottom: var(--s-5); }
.article-toc { background: var(--cv-surface-2); border: 1px solid var(--cv-border); border-radius: var(--r-card); padding: var(--s-5); }
.article-toc h2 { font-size: 1.125rem; margin: 0 0 var(--s-3); }
.article-toc ol { margin: 0; padding-left: 1.25rem; }
.article-toc li { margin-bottom: var(--s-2); }

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__tag { font-size: .875rem; font-weight: 700; color: var(--cv-accent-ink); text-transform: uppercase; letter-spacing: .08em; }
.post-card__title { font-size: 1.25rem; margin: var(--s-3) 0; }
.post-card__title a { color: var(--cv-text-strong); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.post-card__title a:hover { color: var(--cv-accent-ink); text-decoration: underline; }
.post-card__meta { margin-top: auto; padding-top: var(--s-4); font-size: .9375rem; color: var(--cv-text-muted); }

.related { background: var(--cv-surface-2); border: 1px solid var(--cv-border); border-radius: var(--r-feature); padding: var(--s-5); }
.related h2 { font-size: 1.25rem; margin: 0 0 var(--s-4); }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { margin-bottom: var(--s-3); }
.related li:last-child { margin-bottom: 0; }

.sources { font-size: .9375rem; color: var(--cv-text-muted); }
.sources ol { padding-left: 1.25rem; }

/* --------------------------------------------------------------------------
   18. Équipe
   -------------------------------------------------------------------------- */
.person__photo {
  width: 6rem; height: 6rem; border-radius: 50%;
  background: var(--cv-accent-soft); margin-bottom: var(--s-4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.person__photo .icon { width: 3.25rem; height: 3.25rem; stroke: var(--cv-accent-ink); stroke-width: 1.8; }
.person__name { font-size: 1.25rem; margin-bottom: var(--s-1); }
.person__role { color: var(--cv-accent-ink); font-weight: 700; font-size: 1rem; margin-bottom: var(--s-3); }

/* Marqueur de contenu à personnaliser avant mise en ligne (voir README) */
.icope-label { font-weight: 700; color: var(--cv-text-strong); margin: 0; }

.todo { background: var(--cv-warning-bg); border-bottom: 2px dotted var(--cv-warning-line); padding: 0 .2em; font-style: normal; }

/* --------------------------------------------------------------------------
   19. Pied de page
   -------------------------------------------------------------------------- */
.site-footer { background: var(--cv-surface-deep); color: var(--cv-on-deep-muted); padding-block: var(--s-7) var(--s-5); }
.site-footer h2, .site-footer h3 {
  color: #FFFFFF; font-size: 1rem; font-family: var(--cv-font-body);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.site-footer a { color: var(--cv-on-deep-muted); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 48em) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer .logo { color: #FFFFFF; }
.footer__brand .logo__word { color: #FFFFFF; }
.footer__brand .logo__word em { color: var(--cv-on-deep-accent); }
.footer__tagline { margin-top: var(--s-4); max-width: 24rem; font-size: 1rem; }
.footer__contact { margin-top: var(--s-4); font-size: 1rem; font-style: normal; }
.footer__contact a { font-weight: 700; color: #FFFFFF; }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between; font-size: .9375rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); list-style: none; padding: 0; margin: 0; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }

.theme-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: .5rem 1rem;
  background: transparent; color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, .5); border-radius: var(--r-pill);
  font-family: var(--cv-font-body); font-size: .9375rem; font-weight: 700; cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .14); }
.theme-toggle .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2; }

/* --------------------------------------------------------------------------
   20. Bandeau de consentement
   -------------------------------------------------------------------------- */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 150;
  background: var(--cv-surface); border-top: 3px solid var(--cv-surface-deep);
  box-shadow: 0 -8px 30px rgba(10, 76, 115, .18);
  padding: var(--s-5) 0;
}
.consent[hidden] { display: none; }
.consent__inner { display: grid; gap: var(--s-4); align-items: center; }
.consent h2 { font-size: 1.25rem; margin-bottom: var(--s-2); }
.consent p { font-size: 1rem; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.consent__actions .btn { flex: 1 1 12rem; }
@media (min-width: 60em) {
  .consent__inner { grid-template-columns: 1.7fr 1fr; gap: var(--s-6); }
  .consent__actions { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   21. Micro-interactions — discrètes, désactivables
   -------------------------------------------------------------------------- */
.card, .price-card, .steps__item { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover, .steps__item:hover { transform: translateY(-2px); box-shadow: var(--cv-shadow-2); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

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

/* --------------------------------------------------------------------------
   22. Contraste forcé et impression
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonBorder; }
  .card, .price-card, .faq__item, .card__icon { border: 1px solid CanvasText; }
}

@media print {
  .ecoute-lecteur, .topbar, .site-header, .consent, .cta-band, .site-footer, .btn, .breadcrumb { display: none !important; }
  body { background: #FFFFFF; color: #000000; font-size: 12pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ==========================================================================
   23. Lot « Expertises, méthode, exemples, simulateur »
   ========================================================================== */

/* --- Utilitaires ---------------------------------------------------------- */
.mt-7 { margin-top: var(--s-7); }
.mt-auto { margin-top: auto; }
.stack-xl > * + * { margin-top: var(--s-8); }
.list-dash { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.list-dash li { position: relative; padding-left: 1.5rem; margin-bottom: var(--s-2); }
.list-dash li::before { content: ""; position: absolute; left: .25rem; top: .8em; width: .7rem; height: 2px; background: var(--cv-accent); }
.tag-new, .pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: .15rem .75rem; border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 700; line-height: 1.5;
  background: var(--cv-accent-soft); color: var(--cv-text-strong);
}
.tag-new { font-size: .875rem; text-transform: lowercase; }
.pill--warning { background: var(--cv-warning-bg); border: 1px solid var(--cv-warning-line); }
.link-button {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0;
  background: none; border: 0; color: var(--cv-accent-ink);
  font: inherit; font-size: 1rem; text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
}
.link-button:hover { color: var(--cv-accent-ink-hover); }

.footer__disclaimer {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .18);
  color: #FFFFFF; font-weight: 700; font-size: 1rem;
}
.footer__disclaimer .icon { flex: none; width: 1.25rem; height: 1.25rem; stroke: var(--cv-on-deep-accent); }

/* --- Bandeau « profil fictif » ------------------------------------------- */
.bandeau-fictif {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4);
  background: var(--cv-warning-bg); border-left: 4px solid var(--cv-warning-line);
  border-radius: var(--r-sm); font-size: 1rem;
}
.bandeau-fictif .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; stroke: var(--cv-warning-line); }

/* --- Intervenants : couleur + icône + nom, jamais la couleur seule --------
   Palette unique du site (lot 2). --c-* : couleur de marque (pastilles,
   bordures, fonds d'icône). --ink-* : déclinaison pour le TEXTE coloré,
   calculée pour un contraste d'au moins 4,5:1 sur les surfaces du thème. */
:root {
  --c-apa: #2F7FD0;         --ink-apa: #2970B7;
  --c-corps: #2FA396;       --ink-corps: #247C72;
  --c-kine: #E0782F;        --ink-kine: #A65923;
  --c-dieteticien: #6BAA2C; --ink-dieteticien: #4D7A20;
  --c-mental: #8A63C9;      --ink-mental: #7F5BB9;
  --c-conseiller: #0A4C73;  --ink-conseiller: #0A4C73;
  --c-autonome: #7F97A3;    --ink-autonome: #4F6C79;
}
:root[data-theme="dark"] {
  --c-conseiller: #6FB4DE;
  --ink-apa: #619EDB; --ink-corps: #3BA99C; --ink-kine: #E2803B; --ink-dieteticien: #6BAA2C;
  --ink-mental: #A88CD7; --ink-conseiller: #8CC4E6; --ink-autonome: #A9C6D1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-conseiller: #6FB4DE;
    --ink-apa: #619EDB; --ink-corps: #3BA99C; --ink-kine: #E2803B; --ink-dieteticien: #6BAA2C;
    --ink-mental: #A88CD7; --ink-conseiller: #8CC4E6; --ink-autonome: #A9C6D1;
  }
}
.qui--apa, .seance--apa                 { --qui: var(--c-apa); }
.qui--corps, .seance--corps             { --qui: var(--c-corps); }
.qui--dieteticien, .seance--dieteticien { --qui: var(--c-dieteticien); }
.qui--mental, .seance--mental           { --qui: var(--c-mental); }
.qui--kine, .seance--kine               { --qui: var(--c-kine); }
.qui--conseiller, .seance--conseiller   { --qui: var(--c-conseiller); }
.qui--autonome, .seance--autonome       { --qui: var(--c-autonome); }

.qui {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .2rem .8rem .2rem .3rem; border-radius: var(--r-pill);
  background: var(--cv-surface);
  border: 2px solid var(--qui); color: var(--cv-text-strong); font-weight: 700; font-size: 1rem;
}
.qui .icon {
  width: 1.75rem; height: 1.75rem; padding: .3rem; border-radius: 50%;
  background: var(--qui); stroke: #FFFFFF; stroke-width: 2.2;
}

/* --- Semaine type --------------------------------------------------------- */
.semaine { background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--r-feature); padding: var(--s-5); }
.semaine__titre { font-weight: 700; color: var(--cv-text-strong); margin-bottom: var(--s-4); }
.semaine__jours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.semaine__jour { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); align-items: start; padding-bottom: var(--s-3); border-bottom: 1px solid var(--cv-border); }
.semaine__jour:last-child { border-bottom: 0; padding-bottom: 0; }
.semaine__nom { font-weight: 700; color: var(--cv-text-strong); padding-top: .35rem; }
.semaine__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.semaine__repos { margin: 0; padding-top: .35rem; color: var(--cv-text-muted); font-style: italic; }
.seance {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-2); row-gap: 0;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: var(--cv-surface);
  border-left: 5px solid var(--qui); font-size: 1rem; line-height: 1.4;
}
.seance__icon { grid-row: span 3; width: 1.9rem; height: 1.9rem; padding: .35rem; border-radius: 50%; background: var(--qui); stroke: #FFFFFF; stroke-width: 2.2; }
.seance__qui { font-size: .9375rem; font-weight: 700; color: var(--cv-text-strong); }
.seance__titre { color: var(--cv-text); }
.seance__duree { font-size: .9375rem; color: var(--cv-text-muted); }
/* Assiette du jour : plat type dessiné, sous chaque jour de la semaine type. */
.assiette {
  grid-column: 1 / -1; display: grid; grid-template-columns: 4rem 1fr; column-gap: var(--s-3); row-gap: .15rem; align-items: start;
  margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: #FFF8EC; border: 1px solid #F1DDB8;
  font-size: .9375rem; line-height: 1.4; color: #12303D;
}
.assiette__dessin { grid-row: span 5; width: 4rem; height: 4rem; }
.assiette__titre { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A4B08; }
.assiette__repas-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.assiette__repas { margin: 0; }
.semaine__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.semaine__entete .semaine__titre { margin-bottom: 0; }
.semaine__repas { display: none; }
.semaine__repas-label { font-weight: 700; color: var(--cv-text-strong); margin-right: .15rem; }
.semaine__repas .assiette__onglet { flex: 0 0 auto; min-width: 4.5rem; padding-inline: var(--s-4); font-size: .9375rem; }
.assiette__onglets { display: flex; gap: .25rem; margin: .15rem 0 .25rem; }
.assiette__onglet {
  flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding: .2rem .35rem; border-radius: 999px;
  border: 1px solid #E6CFA3; background: #FFFFFF; color: #0A4C73;
  font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.assiette__onglet:hover { border-color: #8A4B08; }
.assiette__onglet[aria-pressed="true"] { background: #8A4B08; border-color: #8A4B08; color: #FFFFFF; }
.assiette__onglet:focus-visible { outline: 3px solid var(--cv-focus); outline-offset: 2px; }
/* Mode défilant (activé par app.js) : un repas visible à la fois. */
.assiette--defilante .assiette__repas-liste {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.assiette--defilante .assiette__repas-liste::-webkit-scrollbar { display: none; }
.assiette--defilante .assiette__repas { flex: 0 0 100%; scroll-snap-align: start; }
.assiette--defilante .assiette__moment { display: none; }
.assiette__moment { display: block; font-size: .8125rem; font-weight: 700; color: #0A4C73; }
.assiette__conseil { margin: .2rem 0 0; padding-top: .3rem; border-top: 1px dashed #E6CFA3; color: #4F5F66; font-style: italic; }
.semaine__legende { list-style: none; margin: var(--s-5) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--cv-border); display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (min-width: 64em) {
  .semaine__jours { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); }
  .semaine__jour { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--cv-border); border-radius: var(--r-card); background: var(--cv-surface-2); }
  .semaine__jour:last-child { border-bottom: 1px solid var(--cv-border); padding-bottom: var(--s-2); }
  .semaine__nom { padding: 0; text-align: center; }
  .seance { grid-template-columns: 1fr; }
  .seance__icon { grid-row: auto; margin-bottom: var(--s-1); }
  .semaine__repos { text-align: center; }
  .assiette { grid-template-columns: 1fr; padding: var(--s-2); text-align: left; }
  .assiette__dessin { grid-row: auto; justify-self: center; width: 4.5rem; height: 4.5rem; margin-bottom: .2rem; }
  .assiette__titre { letter-spacing: .02em; }
  .assiette__moment { display: block; min-width: 0; font-size: .8125rem; }
  /* Colonnes étroites : un seul sélecteur pour toute la semaine. */
  .semaine__repas:not([hidden]) { display: flex; align-items: center; gap: .35rem; }
  .assiette__onglets { display: none; }
  .assiette--defilante .assiette__moment { display: block; }
  @supports (grid-template-rows: subgrid) {
    /* Aligne l'« assiette du jour » sur une même ligne, sous les sept jours. */
    .semaine__jours--nutrition { grid-template-rows: auto 1fr auto; }
    .semaine__jours--nutrition .semaine__jour { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; }
    .semaine__jours--nutrition .assiette { grid-column: auto; align-self: stretch; align-content: start; }
  }
}

/* --- Frise ---------------------------------------------------------------- */
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: frise; }
.frise__item { position: relative; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--r-card); padding: var(--s-5); padding-left: 4.5rem; }
.frise__num {
  position: absolute; left: var(--s-4); top: var(--s-5);
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--cv-surface-deep); color: #FFFFFF; font-weight: 700; font-family: var(--cv-font-title);
}
.frise__title { font-size: 1.1875rem; margin-bottom: var(--s-2); }
.frise__item p { font-size: 1rem; }
@media (min-width: 64em) {
  .frise { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
  .frise__item { padding: var(--s-5) var(--s-4); padding-top: 4.25rem; }
  .frise__num { left: var(--s-4); top: var(--s-4); }
  .frise__item + .frise__item::before {
    content: ""; position: absolute; top: 2.2rem; left: calc(-1 * var(--s-3) - 1px); width: var(--s-3); height: 2px; background: var(--cv-accent);
  }
}

/* --- Métiers -------------------------------------------------------------- */
.metier__head { display: flex; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--s-5); }
.metier__head .card__icon { flex: none; margin: 0; }
.metier__title { margin-bottom: var(--s-2); }
.metier__badge { display: inline-block; margin: 0; padding: .15rem .8rem; border-radius: var(--r-pill); background: var(--cv-accent-soft); color: var(--cv-text-strong); font-weight: 700; font-size: 1rem; }
.metier__grid { display: grid; gap: var(--s-4); }
.metier__cell { background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--r-card); padding: var(--s-5); }
.metier__cell p:last-child, .metier__cell ul:last-child { margin-bottom: 0; }
.metier__label { font-family: var(--cv-font-body); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cv-accent-ink); margin-bottom: var(--s-3); }
@media (min-width: 48em) { .metier__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .metier__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.referent { display: flex; gap: var(--s-4); align-items: flex-start; }
.referent .person__photo { flex: none; margin: 0; }
.referent .person__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Modes de coordination kiné / APA -------------------------------------- */
.modes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 56em) { .modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.modes__item { position: relative; background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--r-card); padding: var(--s-5); padding-top: var(--s-6); }
.modes__letter {
  position: absolute; top: calc(-1 * var(--s-4)); left: var(--s-5);
  display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--cv-surface-deep); color: #FFFFFF; font-family: var(--cv-font-title); font-weight: 700; font-size: 1.25rem;
}
.modes__title { font-size: 1.25rem; margin-bottom: var(--s-2); }
.modes__when { color: var(--cv-text-muted); font-size: 1rem; }
.modes__track { display: flex; gap: 4px; margin: var(--s-4) 0; }
.modes__track--parallel { flex-direction: column; }
.modes__bar { flex: 1; padding: .3rem .6rem; border-radius: var(--r-sm); font-size: .9375rem; font-weight: 700; color: var(--cv-text-strong); border-left: 5px solid; }
.modes__bar--kine { background: var(--cv-surface-2); border-color: var(--c-kine); }
.modes__bar--apa { background: var(--cv-surface-2); border-color: var(--c-apa); }
.modes__bar--long { flex: 3; }
.modes__pin { align-self: center; padding: .1rem .6rem; border-radius: var(--r-pill); border: 2px dashed var(--c-kine); font-size: .9375rem; font-weight: 700; }

.niveaux { margin: 0; padding-left: 1.5rem; }
.niveaux li { margin-bottom: var(--s-2); }

/* --- Accueil : bandeau des six expertises --------------------------------- */
.expertises-bandeau { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.expertises-bandeau__lien {
  display: flex; flex-direction: column; height: 100%; padding: var(--s-4);
  background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--r-card);
  text-decoration: none; color: var(--cv-text);
}
.expertises-bandeau__lien:hover { border-color: var(--cv-accent-ink); }
.expertises-bandeau__lien .card__icon { width: 3rem; height: 3rem; margin-bottom: var(--s-3); }
.expertises-bandeau__lien .card__icon .icon { width: 1.6rem; height: 1.6rem; }
.expertises-bandeau__titre { font-family: var(--cv-font-title); font-weight: 700; font-size: 1.125rem; color: var(--cv-text-strong); text-decoration: underline; text-decoration-color: var(--cv-accent); text-underline-offset: .2em; }
.expertises-bandeau__role { margin-top: var(--s-1); font-size: 1rem; color: var(--cv-text-muted); }

/* --- Page Exemples -------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; margin-bottom: var(--s-5); }
.filtres[hidden] { display: none; }
.filtres__groupe { flex: 1 1 14rem; max-width: 20rem; }
.filtres__statut { flex-basis: 100%; margin: 0; color: var(--cv-text-muted); font-size: 1rem; }
.exemples-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.exemple-carte[hidden] { display: none; }
.exemple-carte__lien {
  display: flex; flex-direction: column; gap: var(--s-1); height: 100%; padding: var(--s-5);
  background: var(--cv-surface); border: 2px solid var(--cv-border); border-radius: var(--r-card);
  text-decoration: none; color: var(--cv-text);
}
.exemple-carte__lien:hover { border-color: var(--cv-accent-ink); box-shadow: var(--cv-shadow-2); }
.exemple-carte__fictif { align-self: flex-start; padding: .05rem .6rem; border-radius: var(--r-pill); background: var(--cv-warning-bg); border: 1px solid var(--cv-warning-line); font-size: .875rem; font-weight: 700; color: var(--cv-text-strong); }
.exemple-carte__nom { margin-top: var(--s-2); font-family: var(--cv-font-title); font-size: 1.375rem; font-weight: 700; color: var(--cv-text-strong); text-decoration: underline; text-decoration-color: var(--cv-accent); text-underline-offset: .2em; }
.exemple-carte__niveau { font-weight: 700; color: var(--cv-accent-ink); }
.exemple-carte__objectifs, .exemple-carte__formule { font-size: 1rem; color: var(--cv-text-muted); }
.fiche { background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--r-feature); padding: clamp(var(--s-5), 4vw, var(--s-7)); scroll-margin-top: 6rem; }
.fiche[hidden] { display: none; }
.fiche__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.fiche .semaine { background: var(--cv-surface-2); }
.intervenants { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.intervenants__item { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--cv-border); border-radius: var(--r-card); background: var(--cv-surface); }
.intervenants__item .qui { justify-self: start; }
.intervenants__item p { margin: 0; }
@media (min-width: 48em) { .intervenants__item { grid-template-columns: 15rem 1fr; align-items: center; } }
.jalons { margin: 0 0 var(--s-5); padding-left: 1.5rem; }
.jalons li { margin-bottom: var(--s-2); }
.jalons li::marker { color: var(--cv-accent-ink); font-weight: 700; }

/* --- Simulateur ----------------------------------------------------------- */
.sim { font-size: 1.1875rem; }
.sim__inner { max-width: 46rem; }
.sim-progress { margin-bottom: var(--s-5); }
.sim-progress__text { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin-bottom: var(--s-2); font-size: 1.0625rem; }
.sim-progress__text span { color: var(--cv-text-muted); }
.sim-progress__bar {
  display: block; width: 100%; height: .875rem; border: 0; border-radius: var(--r-pill);
  background: var(--cv-accent-soft); overflow: hidden; -webkit-appearance: none; appearance: none;
}
.sim-progress__bar::-webkit-progress-bar { background: var(--cv-accent-soft); border-radius: var(--r-pill); }
.sim-progress__bar::-webkit-progress-value { background: var(--cv-accent-ink); border-radius: var(--r-pill); }
.sim-progress__bar::-moz-progress-bar { background: var(--cv-accent-ink); border-radius: var(--r-pill); }
.sim-intro { margin-bottom: var(--s-5); }
.sim-intro__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sim-intro__points li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 1.0625rem; }
.sim-intro__points .icon { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .2rem; stroke: var(--cv-accent-ink); }
.sim-form { margin: 0; }
.sim-question { background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: var(--r-feature); padding: clamp(var(--s-5), 4vw, var(--s-6)); box-shadow: var(--cv-shadow-1); }
.sim-question__head { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; justify-content: space-between; margin-bottom: var(--s-3); }
.sim-titre { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin: 0; flex: 1 1 20rem; }
.sim-titre:focus { outline: none; }
.sim-ecouter { flex: none; }
.sim-ecouter[hidden] { display: none; }
.sim-ecouter[aria-pressed="true"] { background: var(--cv-accent-soft); border-color: var(--cv-accent-ink); }
.sim-aide { color: var(--cv-text-muted); margin-bottom: var(--s-5); }
.sim-legend { font-weight: 700; color: var(--cv-text-strong); font-size: 1.1875rem; margin-bottom: var(--s-3); padding: 0; }
.sim-choix { margin-top: var(--s-4); }
.sim-choix + .sim-choix { margin-top: var(--s-6); }
.sim-choix__liste { display: grid; gap: var(--s-2); }
.sim-choix .choice { margin: 0; min-height: 3.5rem; align-items: center; font-size: 1.125rem; }
.sim-choix .choice input { margin: 0; width: 1.625rem; height: 1.625rem; }
.choice--neutre { border-style: dashed; }
@media (min-width: 36em) {
  .sim-choix--colonnes .sim-choix__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sim-choix--intensite .sim-choix__liste { grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); }
.sim-choix--intensite .choice { flex-direction: column; justify-content: center; gap: var(--s-1); padding: var(--s-2); text-align: center; }
.sim-choix--echelle .choice { gap: var(--s-3); }
.visage { flex: none; width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--cv-text-strong); stroke-width: 1.6; stroke-linecap: round; }
.visage__oeil { fill: var(--cv-text-strong); stroke: none; }
.sim-mots { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.sim-mots li { padding: var(--s-3) var(--s-5); border-radius: var(--r-card); background: var(--cv-surface-deep); color: #FFFFFF; font-family: var(--cv-font-title); font-size: 1.75rem; font-weight: 700; }
.sim-compteur { margin: var(--s-2) 0 0; font-size: 1rem; color: var(--cv-text-muted); min-height: 1.5em; }
.sim-chrono { margin-top: var(--s-6); }
.sim-chrono__outil { margin-bottom: var(--s-4); }
.sim-chrono__outil[hidden] { display: none; }
.sim-chrono__temps { font-family: var(--cv-font-title); font-size: 2.5rem; font-weight: 700; color: var(--cv-text-strong); margin-bottom: var(--s-3); }
.sim-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center; margin-top: var(--s-5); }
.sim-actions .btn .icon { width: 1.25rem; height: 1.25rem; }
.sim-retour--vide { display: block; }
.sim-recommencer { margin-top: var(--s-5); text-align: right; }
.consent-field--erreur { padding: var(--s-3); border-radius: var(--r-sm); background: var(--cv-danger-bg); border: 2px solid var(--cv-danger); }
.sim .form__note { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-4); }
.sim .form__note .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; stroke: var(--cv-accent-ink); }
.sim .field__label { font-size: 1.1875rem; }
.sim .input { font-size: 1.1875rem; }

/* Silhouette : décorative, la sélection se fait toujours par les boutons radio */
.sim-choix--silhouette { display: grid; gap: var(--s-5); }
.sim-choix--silhouette .sim-legend { grid-column: 1 / -1; }
@media (min-width: 40em) { .sim-choix--silhouette { grid-template-columns: 9rem 1fr; align-items: start; } }
.sil { width: 9rem; height: auto; justify-self: center; }
.sil__corps { fill: none; stroke: var(--cv-border-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sil__corps circle { fill: var(--cv-surface-2); }
.sil__zone { fill: var(--cv-accent-soft); stroke: var(--cv-accent-ink); stroke-width: 1.5; cursor: pointer; }
.sil__zone:hover { fill: var(--cv-accent-soft-2); }
.sim-choix--silhouette:has(input[value="cou"]:checked) .sil__zone--cou,
.sim-choix--silhouette:has(input[value="epaule"]:checked) .sil__zone--epaule,
.sim-choix--silhouette:has(input[value="dos"]:checked) .sil__zone--dos,
.sim-choix--silhouette:has(input[value="hanche"]:checked) .sil__zone--hanche,
.sim-choix--silhouette:has(input[value="genou"]:checked) .sil__zone--genou,
.sim-choix--silhouette:has(input[value="cheville"]:checked) .sil__zone--cheville { fill: var(--cv-accent-ink); }

/* Résultat protégé */
.sim--resultat { font-size: 1.125rem; }
.sim-impression { display: none; }
.programme-protege { position: relative; }
.programme-protege__contenu { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.programme-protege__contenu img, .programme-protege__contenu svg { -webkit-user-drag: none; pointer-events: none; }
.filigrane {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
  display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-around; justify-items: center; gap: 5rem 1rem;
}
.filigrane span {
  transform: rotate(-24deg); white-space: nowrap;
  font-size: 1.125rem; font-weight: 700; color: var(--cv-text-strong); opacity: .1;
}
.programme-protege__voile {
  display: none; position: sticky; top: 40vh; z-index: 3; margin: 0 auto; max-width: 30rem;
  padding: var(--s-5); text-align: center; border-radius: var(--r-card);
  background: var(--cv-surface-deep); color: #FFFFFF; font-weight: 700; box-shadow: var(--cv-shadow-2);
}
.programme-protege.is-voile .programme-protege__voile { display: block; }
.programme-protege.is-voile .programme-protege__contenu { filter: blur(14px); }
.sim-profil .pill { margin-right: var(--s-2); }
.sim-kine { border: 2px solid var(--c-kine); }
.cta-panel { background: var(--cv-surface-deep); color: var(--cv-on-deep); border-radius: var(--r-feature); padding: clamp(var(--s-5), 4vw, var(--s-7)); }
.cta-panel h2 { color: #FFFFFF; }
.cta-panel p { color: var(--cv-on-deep-muted); }
.cta-panel strong { color: #FFFFFF; }
.cta-panel .alert strong { color: var(--cv-text-strong); }
.cta-panel a:not(.btn) { color: var(--cv-on-deep-accent); }
.cta-panel .btn-row form { margin: 0; }
.cta-panel .btn--primary { background: #FFFFFF; color: #0A4C73; border-color: #FFFFFF; }
.cta-panel .btn--primary:hover { background: var(--cv-accent-soft); color: #073A59; }
.cta-panel .btn--secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, .75); }
.cta-panel .btn--secondary:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.cta-panel .btn .icon { width: 1.25rem; height: 1.25rem; }
.cta-panel .alert { color: var(--cv-text); }
.cta-panel .alert p { color: var(--cv-text); }
.sim-fin-options form { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

@media print {
  .programme-protege, .sim-actions, .sim-fin-options, .cta-panel { display: none !important; }
  .sim-impression {
    display: block !important; padding: 2rem; border: 2px solid #000;
    font-size: 16pt; font-weight: 700; text-align: center;
  }
}

/* --- Back-office (/admin/) ------------------------------------------------ */
.admin__barre { background: var(--cv-surface-deep); color: #FFFFFF; }
.admin__barre-inner { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; min-height: 4rem; }
.admin__barre form { margin: 0; }
.admin__marque { color: #FFFFFF; font-family: var(--cv-font-title); font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.admin__reponses { display: grid; gap: var(--s-1) var(--s-5); margin: 0; }
.admin__reponses dt { font-weight: 700; color: var(--cv-text-strong); }
.admin__reponses dd { margin: 0 0 var(--s-3); }
@media (min-width: 48em) { .admin__reponses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.price-compare a, .lien-retour { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ==========================================================================
   24. Lot 2 — « Notre force : le moteur IA » et « Aperçu de l'application »
   ========================================================================== */

/* --- Moteur IA ------------------------------------------------------------ */
.mia { position: relative; }
.mia__schema { display: grid; gap: var(--s-3); align-items: center; }
.mia__col-titre { font-family: var(--cv-font-body); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cv-accent-ink); margin-bottom: var(--s-3); }
.mia__sources, .mia__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mia__source, .mia__etape {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4); background: var(--cv-surface);
  border: 1px solid var(--cv-border); border-radius: var(--r-card); box-shadow: var(--cv-shadow-1);
}
.mia__source strong, .mia__etape strong { display: block; color: var(--cv-text-strong); line-height: 1.35; }
.mia__source-texte span, .mia__etape span span { display: block; font-size: 1rem; color: var(--cv-text-muted); line-height: 1.45; }
.mia__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--cv-accent-soft); color: var(--cv-text-strong); font-weight: 700; font-size: 1rem;
}
.mia__etape--2 { border: 2px solid var(--cv-surface-deep); }
.mia__etape--2 .mia__num, .mia__etape--3 .mia__num { background: var(--cv-surface-deep); color: #FFFFFF; }

.mia__fleche { display: flex; justify-content: center; padding-block: var(--s-4); }
.mia__fleche svg { width: 4.5rem; height: 1.5rem; overflow: visible; transform: rotate(90deg); }
.mia__fleche-trait, .mia__fleche-pointe { fill: none; stroke: var(--cv-border-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mia__flux { fill: var(--cv-accent); opacity: 0; }

.mia__col--coeur { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); }
.mia__halo {
  display: flex; align-items: center; justify-content: center;
  width: 13rem; height: 13rem; border-radius: 50%; background: #CFE6EA;
}
:root[data-theme="dark"] .mia__halo { background: rgba(207, 230, 234, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mia__halo { background: rgba(207, 230, 234, .22); } }
.mia__disque {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  width: 10rem; height: 10rem; border-radius: 50%; background: #0A4C73; color: #FFFFFF; padding: var(--s-4);
  box-shadow: 0 10px 30px rgba(10, 76, 115, .35);
}
.mia__disque-icone { width: 2.25rem; height: 2.25rem; stroke: #7FE3D6; stroke-width: 1.8; }
.mia__disque-titre { margin: 0; font-family: var(--cv-font-title); font-weight: 700; font-size: 1.125rem; line-height: 1.25; color: #FFFFFF; }
.mia__referentiel { margin: 0; max-width: 20rem; font-size: 1rem; color: var(--cv-text-muted); }

.mia__bandeau { margin-top: var(--s-6); padding: var(--s-5) var(--s-6); border-radius: var(--r-feature); background: var(--cv-surface-deep); color: var(--cv-on-deep); }
.mia__bandeau p { margin: 0; color: var(--cv-on-deep); }
.mia__bandeau strong { color: #FFFFFF; }
.mia__signature { display: block; margin-top: var(--s-2); font-family: var(--cv-font-title); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); color: var(--cv-on-deep-accent); }
.mia__garde-fous { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.mia__garde-fous li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 1rem; }
.mia__garde-fous .icon { flex: none; width: 1.4rem; height: 1.4rem; stroke: var(--cv-accent-ink); margin-top: .15rem; }
.mia__lien { margin-top: var(--s-5); }

@media (min-width: 64em) {
  .mia__schema { grid-template-columns: minmax(0, 1fr) 4.5rem minmax(13rem, .85fr) 4.5rem minmax(0, 1fr); gap: var(--s-2); }
  .mia__fleche svg { transform: none; width: 100%; }
  .mia__garde-fous { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mia--compacte .mia__source, .mia--compacte .mia__etape { padding: var(--s-2) var(--s-3); }
.mia--compacte .mia__halo { width: 10.5rem; height: 10.5rem; }
.mia--compacte .mia__disque { width: 8.25rem; height: 8.25rem; }
.mia--compacte .mia__referentiel { display: none; }

/* Apparition dans l'ordre du parcours (classe posée par app.js si les animations sont permises) */
.mia-anim { transition: opacity .35s ease, transform .35s ease; }
.mia.anim-pret:not(.is-on) .mia-anim { opacity: 0; transform: translateY(12px); }
.mia-o1 { transition-delay: 0ms; }    .mia-o2 { transition-delay: 120ms; }  .mia-o3 { transition-delay: 240ms; }
.mia-o4 { transition-delay: 360ms; }  .mia-o5 { transition-delay: 480ms; }  .mia-o6 { transition-delay: 600ms; }
.mia-o7 { transition-delay: 720ms; }  .mia-o8 { transition-delay: 840ms; }  .mia-o9 { transition-delay: 960ms; }
.mia-o10 { transition-delay: 1080ms; } .mia-o11 { transition-delay: 1200ms; } .mia-o12 { transition-delay: 1320ms; }
/* Flux de points : seulement si les animations sont permises, en pause hors écran */
.mia.anim-pret .mia__flux { opacity: 1; animation: mia-flux 2.4s linear infinite; animation-play-state: paused; }
.mia.anim-pret .mia__flux--2 { animation-delay: .8s; }
.mia.anim-pret .mia__flux--3 { animation-delay: 1.6s; }
.mia.anim-pret.is-visible .mia__flux { animation-play-state: running; }
@keyframes mia-flux { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }

/* --- Aperçu de l'application ---------------------------------------------- */
.apercu { position: relative; }
.apercu__grille > *, .apercu__scene { min-width: 0; }
.apercu__mention {
  display: inline-flex; gap: var(--s-2); align-items: center; margin: var(--s-3) 0 0;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: var(--cv-warning-bg); border: 1px solid var(--cv-warning-line);
  font-weight: 700; font-size: 1rem; color: var(--cv-text-strong);
}
.apercu__mention .icon { flex: none; width: 1.25rem; height: 1.25rem; stroke: var(--cv-warning-line); }
.apercu__grille { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 80em) { .apercu__grille { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s-5); } }
.apercu__profil-nom { font-family: var(--cv-font-title); font-weight: 700; font-size: 1.375rem; color: var(--cv-text-strong); margin-bottom: var(--s-2); }
.apercu__profil-nom span { font-family: var(--cv-font-body); font-weight: 400; font-size: 1rem; color: var(--cv-text-muted); }
.apercu__profil-sous { font-weight: 700; margin-bottom: var(--s-3); }
.apercu__combine { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
.apercu__combine li { display: flex; gap: var(--s-3); align-items: center; font-weight: 700; }
.apercu__profil-note { font-size: 1rem; color: var(--cv-text-muted); margin: 0; }
.apercu__cta { margin-top: var(--s-6); }
.apercu__points { display: none; }

.app-ink--apa { color: var(--ink-apa); }
.app-ink--corps { color: var(--ink-corps); }
.app-ink--kine { color: var(--ink-kine); }
.app-ink--dieteticien { color: var(--ink-dieteticien); }
.app-ink--mental { color: var(--ink-mental); }
.app-tuile {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; color: #FFFFFF;
}
.app-tuile .icon { width: 1.4rem; height: 1.4rem; stroke: #FFFFFF; stroke-width: 2.1; }
.app-tuile--apa { background: var(--c-apa); }
.app-tuile--corps { background: var(--c-corps); }
.app-tuile--kine { background: var(--c-kine); }
.app-tuile--dieteticien { background: var(--c-dieteticien); }
.app-tuile--mental { background: var(--c-mental); }
.app-tuile--conseiller { background: #0A4C73; }

/* Scène des trois écrans : côte à côte sur grand écran, carrousel sinon */
.apercu__ecrans {
  position: relative;
  display: flex; gap: var(--s-4); overflow-x: auto; padding: var(--s-5) var(--s-2) var(--s-4);
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-4); -webkit-overflow-scrolling: touch;
}
.apercu__ecrans:focus-visible { outline: 3px solid var(--cv-focus); outline-offset: 2px; border-radius: var(--r-card); }
.apercu__ecrans .telephone-figure { flex: 0 0 auto; scroll-snap-align: center; }
.js .apercu__points:not([hidden]) { display: flex; justify-content: center; gap: var(--s-1); margin-top: var(--s-2); }
.apercu__point {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer;
}
.apercu__point::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--cv-text-strong); }
.apercu__point[aria-current="true"]::before { background: var(--cv-text-strong); width: 1.6rem; border-radius: var(--r-pill); }
.apercu__point:focus-visible { outline: 3px solid var(--cv-focus); border-radius: 50%; }
@media (min-width: 64em) {
  .apercu__ecrans { justify-content: center; overflow: visible; scroll-snap-type: none; padding-top: var(--s-7); }
  .apercu__ecrans .telephone-figure--2 { transform: translateY(-1.75rem); }
  .js .apercu__points:not([hidden]) { display: none; }
  .apercu__scene .telephone { transition: transform .2s ease-out; transform: translate3d(var(--px, 0), var(--py, 0), 0); }
  .apercu__scene .telephone-figure--2 .telephone { transform: translate3d(calc(var(--px, 0) * 1.6), calc(var(--py, 0) * 1.6), 0); }
}

/* Cadre de téléphone (l'écran reproduit l'application : couleurs fixes, hors thème) */
.telephone-figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.telephone-figure__legende { font-weight: 700; color: var(--cv-text-strong); }
.telephone {
  width: 17.5rem; padding: .55rem; border-radius: 2.5rem;
  background: #0F1C24; box-shadow: 0 24px 50px rgba(10, 76, 115, .22), 0 4px 10px rgba(10, 76, 115, .12);
}
.telephone__ecran {
  position: relative; display: flex; flex-direction: column; height: 34rem; overflow: hidden;
  border-radius: 2rem; background: #F2F7F6; color: #12303D; font-size: .875rem; line-height: 1.4;
}
.telephone--sombre .telephone__ecran { background: #0C2230; color: #FFFFFF; }
.telephone__statut { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1.2rem .4rem; font-weight: 700; font-size: .8125rem; }
.telephone__encoche { width: 5.5rem; height: 1.35rem; border-radius: 1rem; background: #0F1C24; }
.telephone__points { letter-spacing: .1em; }
.telephone__contenu { flex: 1; overflow: hidden; padding: .35rem .95rem .8rem; }
.telephone__onglets { display: grid; grid-template-columns: repeat(4, 1fr); padding: .45rem .3rem .7rem; background: #FFFFFF; border-top: 1px solid #DCE7E6; font-size: .75rem; color: #4F6C79; }
.telephone__onglet { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.telephone__onglet .icon { width: 1.2rem; height: 1.2rem; }
.telephone__onglet.is-actif { color: #0A4C73; font-weight: 700; }

.telephone .app-ink--apa { color: #2970B7; }
.telephone .app-ink--corps { color: #247C72; }
.telephone .app-ink--kine { color: #A65923; }
.telephone .app-ink--dieteticien { color: #4D7A20; }
.telephone .app-ink--mental { color: #7F5BB9; }
.telephone .app-tuile--conseiller { background: #0A4C73; }
.telephone .app-tuile--corps { background: #2FA396; } .telephone .app-tuile--apa { background: #2F7FD0; }
.telephone .app-tuile--kine { background: #E0782F; } .telephone .app-tuile--dieteticien { background: #6BAA2C; }
.telephone .app-tuile--mental { background: #8A63C9; }

.app-bonjour { margin: .2rem 0 0; color: #4F6C79; }
.app-titre { margin: 0 0 .5rem; font-family: var(--cv-font-title); font-weight: 700; font-size: 1.6rem; line-height: 1.15; color: #0A4C73; }
.app-valide { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; padding: .25rem .7rem; border-radius: var(--r-pill); background: #DCF0ED; color: #0F6F62; font-weight: 700; font-size: .8125rem; }
.app-valide .icon { width: .95rem; height: .95rem; stroke: #0F6F62; stroke-width: 2.6; }
.app-bilan {
  display: grid; grid-template-columns: 3.9rem 1fr; gap: .8rem; align-items: center;
  padding: .75rem .9rem; margin-bottom: .7rem; border-radius: 1.1rem;
  background-color: #0A4C73; background-image: linear-gradient(120deg, #0A4C73, #16707D); color: #FFFFFF;
}
.anneau { grid-area: 1 / 1; width: 3.9rem; height: 3.9rem; transform: rotate(-90deg); }
.anneau__fond { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 5; }
.anneau__valeur { fill: none; stroke: #5EE0D2; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 1.4s cubic-bezier(.2, .7, .2, 1); }
@media screen { .apercu.anim-pret:not(.is-on) .anneau__valeur { stroke-dasharray: 0 100; } }
.app-bilan__pct { grid-area: 1 / 1; text-align: center; font-weight: 700; font-size: .9rem; }
.app-bilan__texte strong { display: block; font-family: var(--cv-font-title); font-size: 1.1rem; color: #FFFFFF; }
.app-bilan__texte span { font-size: .8125rem; color: #D6EEF2; }
.app-jours { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
.app-jour { display: flex; flex-direction: column; align-items: center; padding: .25rem 0 .3rem; border: 1px solid #DCE7E6; border-radius: .7rem; background: #FFFFFF; font-size: .75rem; color: #4F6C79; }
.app-jour strong { font-size: .95rem; color: #12303D; }
.app-jour.is-actif { background: #0A4C73; border-color: #0A4C73; color: #D6EEF2; }
.app-jour.is-actif strong { color: #FFFFFF; }
.app-jour__points { display: flex; gap: 2px; min-height: .45rem; }
.app-point { width: .4rem; height: .4rem; border-radius: 50%; display: block; }
.app-point--apa { background: #2F7FD0; } .app-point--corps { background: #2FA396; } .app-point--kine { background: #E0782F; }
.app-point--dieteticien { background: #6BAA2C; } .app-point--mental { background: #8A63C9; }
.app-jour.is-actif .app-point--corps { background: #5EE0D2; }
.app-seances { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.app-seance {
  display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center;
  padding: .55rem .65rem; border-radius: .9rem; background: #FFFFFF; box-shadow: 0 1px 3px rgba(10, 76, 115, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.app-seance:hover, .app-seance:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10, 76, 115, .18); }
.app-seance:focus-visible { outline: 3px solid var(--cv-focus); outline-offset: 2px; }
.app-seance__corps { min-width: 0; }
.app-seance__cat { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.app-seance__titre { display: block; color: #12303D; font-size: .9rem; line-height: 1.25; }
.app-seance__detail { display: block; font-size: .75rem; color: #4F6C79; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-seance__quand { text-align: right; font-size: .75rem; color: #4F6C79; }
.app-seance__quand strong { display: block; color: #0A4C73; font-size: .85rem; }

/* Séance en direct */
.app-direct { display: inline-flex; align-items: center; gap: .4rem; margin: .1rem 0 .5rem; padding: .2rem .7rem; border-radius: var(--r-pill); background: #C62828; color: #FFFFFF; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.app-direct__pastille { width: .55rem; height: .55rem; border-radius: 50%; background: #FFFFFF; }
.app-titre--direct { color: #FFFFFF; font-size: 1.35rem; margin-bottom: .1rem; }
.app-sous-titre { margin: 0 0 .6rem; font-size: .8125rem; color: #B9D6E2; }
.app-video { position: relative; height: 13.5rem; border-radius: 1.2rem; background: linear-gradient(#F2F8F7, #E3F0EE); overflow: hidden; margin-bottom: .6rem; }
.app-video__coach { position: absolute; top: .55rem; left: .55rem; margin: 0; padding: .3rem .6rem; border-radius: .6rem; background: #0A4C73; color: #FFFFFF; font-size: .75rem; line-height: 1.25; z-index: 1; }
.app-video__coach strong { display: block; font-size: .85rem; color: #FFFFFF; }
.app-video__chrono { position: absolute; top: .55rem; right: .55rem; margin: 0; padding: .15rem .5rem; border-radius: .5rem; background: #FFFFFF; color: #0A4C73; font-weight: 700; font-size: .8125rem; z-index: 1; }
.silhouette { position: absolute; inset: 1.4rem 0 0; width: 100%; height: calc(100% - 1.4rem); }
.silhouette__sol { stroke: #A9C1C7; stroke-width: 2; }
.silhouette__torse { fill: #2FA396; stroke: #2FA396; stroke-width: 4; stroke-linejoin: round; }
.silhouette__membre { fill: none; stroke: #0A4C73; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.silhouette__tete { fill: #FFFFFF; stroke: #0A4C73; stroke-width: 6; }
.app-pause {
  position: absolute; right: .45rem; bottom: .45rem; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid #0A4C73; background: #FFFFFF; cursor: pointer;
}
.app-pause[hidden] { display: none; }
.app-pause { color: #0A4C73; }
.app-pause .icon { width: 1.2rem; height: 1.2rem; stroke: #0A4C73; stroke-width: 2.6; }
.app-pause .app-pause__lecture { display: none; fill: #0A4C73; }
.app-pause[aria-pressed="true"] .app-pause__pause { display: none; }
.app-pause[aria-pressed="true"] .app-pause__lecture { display: block; }
.app-pause:focus-visible { outline: 3px solid #7FE3D6; outline-offset: 2px; }
.app-participants { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem .4rem; }
.app-participant { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .6875rem; color: #C3DDEB; }
.app-avatar { width: 2.6rem; height: 2.3rem; border-radius: .7rem; font-family: var(--cv-font-title); font-weight: 700; font-size: 1.1rem; }
.telephone .app-avatar.app-tuile--kine { background: #A65923; }
.telephone .app-avatar.app-tuile--dieteticien { background: #4D7A20; }
.telephone .app-avatar.app-tuile--corps { background: #247C72; }
.telephone .app-avatar.app-tuile--apa { background: #2970B7; }
.app-participant.is-moi .app-avatar { box-shadow: 0 0 0 3px #0C2230, 0 0 0 5px #5EE0D2; }
.app-message { margin: 0 0 .5rem; padding: .45rem .7rem; border-radius: .8rem; background: #15384A; font-size: .8125rem; color: #FFFFFF; }
.app-message strong { color: #7FE3D6; }
.app-appel { display: flex; justify-content: center; gap: .8rem; }
.app-appel button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: #1F4458; }
.app-appel .icon { width: 1.15rem; height: 1.15rem; stroke: #FFFFFF; }
.app-appel__raccrocher { background: #D93A3A !important; }

/* Mes progrès */
.app-fictif { display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 .5rem; padding: .1rem .55rem; border-radius: var(--r-pill); background: #FDF4E3; border: 1px solid #A06A05; font-size: .75rem; font-weight: 700; color: #12303D; }
.app-fictif .icon { width: .9rem; height: .9rem; stroke: #A06A05; }
.app-carte { padding: .6rem .75rem; margin-bottom: .45rem; border-radius: .9rem; background: #FFFFFF; box-shadow: 0 1px 3px rgba(10, 76, 115, .12); }
.app-carte__titre { display: flex; justify-content: space-between; align-items: center; margin: 0 0 .1rem; font-family: var(--cv-font-title); font-weight: 700; font-size: .95rem; color: #12303D; }
.app-evol { padding: .05rem .5rem; border-radius: var(--r-pill); background: #DCF0ED; color: #0F6F62; font-family: var(--cv-font-body); font-size: .75rem; }
.app-chiffre { margin: 0 0 .3rem; font-size: .8125rem; color: #4F6C79; }
.app-chiffre strong { font-family: var(--cv-font-title); font-size: 1.6rem; color: #0A4C73; }
.jauge { display: block; width: 100%; height: .5rem; }
.jauge__fond { fill: #E3EEEC; }
.jauge__valeur { fill: #2FA396; transform-box: fill-box; transform-origin: left center; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.barres { display: block; width: 100%; height: 3.4rem; }
.barres__barre { fill: #BFE3DD; transform-box: fill-box; transform-origin: center bottom; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.barres__barre.is-derniere { fill: #2FA396; }
.apercu.anim-pret:not(.is-on) .jauge__valeur { transform: scaleX(0); }
.apercu.anim-pret:not(.is-on) .barres__barre { transform: scaleY(0); }
.app-barres-legende { display: flex; justify-content: space-between; margin: .1rem 0 0; font-size: .6875rem; color: #4F6C79; }
.app-cartes-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.app-objectif { padding: .55rem .75rem; margin-bottom: .45rem; border-radius: .9rem; background: #FDF1DC; border: 1px solid #F0D49B; }
.app-objectif .app-carte__titre { color: #7A4F00; }
.app-objectif p:last-child, .app-mot p:last-child { margin: 0; font-size: .8125rem; color: #5A3B00; }
.app-mot { padding: .55rem .75rem; border-radius: .9rem; background: #FFFFFF; border-left: 4px solid #2FA396; }
.app-mot p:last-child { color: #4F6C79; }

/* Version compacte (encart Tarifs) */
.apercu--compacte { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56em) { .apercu--compacte { grid-template-columns: minmax(0, 1fr) auto; } }
.apercu__ecrans--seul { justify-content: center; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .app-seance:hover, .app-seance:focus-visible { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .apercu.is-on .app-direct__pastille { animation: app-pulse 2s ease-in-out infinite; }
}
@keyframes app-pulse { 50% { opacity: .35; } }

@media print {
  /* Contenu animé : toujours visible à l'impression, même si l'animation ne s'est pas jouée. */
  .mia-anim, .jauge__valeur, .barres__barre { opacity: 1 !important; transform: none !important; }
  .mia__flux, .app-pause { display: none !important; }
}

/* ==========================================================================
   25. Lot 3 — La Salle, la Formule Libre et l'Espace Coachs
   ========================================================================== */

/* Mention imposée de la Formule Libre (jamais masquée) */
.mention-libre {
  display: flex; gap: var(--s-2); align-items: flex-start;
  margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  background: var(--cv-warning-bg); border-left: 4px solid var(--cv-warning-line);
  font-size: .9375rem; color: var(--cv-text);
}
.mention-libre .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; stroke: var(--cv-warning-line); }
.mention-libre--compacte { max-width: var(--cv-measure); }

/* Rappel de ce que l'accompagnement humain apporte en plus */
.rappel-humain {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); border-radius: var(--r-feature);
  background: var(--cv-accent-soft); border: 1px solid var(--cv-accent-soft-2);
}
.rappel-humain__icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%; background: var(--cv-accent-ink);
}
.rappel-humain__icone .icon { width: 1.5rem; height: 1.5rem; stroke: var(--cv-on-accent); }
.rappel-humain__titre { font-weight: 700; color: var(--cv-text-strong); margin-bottom: var(--s-1); }
.rappel-humain p:last-child { margin: 0; }
@media (max-width: 40em) { .rappel-humain { flex-direction: column; gap: var(--s-3); } }

/* Accueil : lien d'essai sous l'appel principal, carte Formule Libre */
.hero__essai { margin: var(--s-2) 0 0; }
.hero__essai a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.grid--formules { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 40em) { .grid--formules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .grid--formules { grid-template-columns: repeat(5, 1fr); } }
.card--libre { border-style: dashed; }

/* Bloc 1 : les quatre univers */
.univers-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 40em) { .univers-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .univers-grille { grid-template-columns: repeat(4, 1fr); } }
.univers {
  --u: var(--c-apa);
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); border-radius: var(--r-feature);
  background: var(--cv-surface); border: 1px solid var(--cv-border); border-top: 5px solid var(--u);
}
.univers--corps-esprit { --u: var(--c-corps); }
.univers--respirer { --u: var(--c-mental); }
.univers--moments { --u: #0A4C73; }
.univers__icone { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--r-card); background: var(--u); }
.univers__icone .icon { width: 1.6rem; height: 1.6rem; stroke: #FFFFFF; stroke-width: 2.1; }
.univers__nom { margin: var(--s-2) 0 0; font-size: 1.375rem; }
.univers__exemples { margin: 0; color: var(--cv-text); }
.univers__duree { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-weight: 700; color: var(--cv-text-strong); font-size: 1rem; }
.univers__duree .icon { width: 1.125rem; height: 1.125rem; stroke: var(--cv-accent-ink); }
.univers__details { margin-top: var(--s-2); border-top: 1px solid var(--cv-border); }
.univers__ouvrir {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 2.75rem; padding: var(--s-2) 0; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--cv-accent-ink);
}
.univers__ouvrir::-webkit-details-marker { display: none; }
.univers__ouvrir::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.univers__details[open] .univers__ouvrir::after { content: "\2212"; }
.univers__ouvrir:focus-visible { outline: 3px solid var(--cv-focus); outline-offset: 2px; border-radius: var(--r-sm); }
.univers__themes { margin: 0 0 var(--s-2); padding-left: 1.25rem; display: grid; gap: var(--s-1); }

/* Bloc 2 : trois étapes illustrées */
.salle-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 56em) { .salle-etapes { grid-template-columns: repeat(3, 1fr); } }
.salle-etape { display: flex; flex-direction: column; gap: var(--s-3); }
.salle-etape__visuel {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 7.5rem; border-radius: var(--r-feature); background: var(--cv-surface); border: 1px solid var(--cv-border);
}
.salle-etape__visuel .icon { width: 3rem; height: 3rem; stroke: var(--cv-accent-ink); stroke-width: 1.6; }
.salle-etape__num {
  position: absolute; top: var(--s-3); left: var(--s-3);
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--cv-accent-ink); color: var(--cv-on-accent); font-weight: 700;
}
.salle-etape__titre { margin: 0; font-size: 1.25rem; }
.salle-etape p { margin: 0; }

/* Bloc 3 : maquette — écrans de la Salle (couleurs fixes, hors thème) */
.salle-apercu__ecrans .telephone-figure--2 { transform: none; }
@media (min-width: 64em) { .salle-apercu__ecrans { gap: var(--s-8); } }
.telephone .app-ink--conseiller { color: #0A4C73; }
.salle-filtres { display: flex; gap: .3rem; margin: 0 0 .55rem; overflow: hidden; }
.salle-filtre { flex: none; padding: .2rem .6rem; border-radius: var(--r-pill); border: 1px solid #C9DAD9; background: #FFFFFF; font-size: .72rem; font-weight: 700; color: #4F6C79; white-space: nowrap; }
.salle-filtre.is-actif { background: #0A4C73; border-color: #0A4C73; color: #FFFFFF; }
.salle-rubrique { display: flex; align-items: center; gap: .35rem; margin: .1rem 0 .3rem; font-family: var(--cv-font-title); font-weight: 700; font-size: .95rem; color: #0A4C73; }
.salle-rubrique__pastille { background: #C62828; }
.salle-seances { list-style: none; margin: 0 0 .45rem; padding: 0; display: grid; gap: .35rem; }
.salle-seance {
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center;
  padding: .45rem .55rem; border-radius: .9rem; background: #FFFFFF; box-shadow: 0 1px 3px rgba(10, 76, 115, .12);
}
.salle-seance.is-avant { box-shadow: 0 0 0 2px #2FA396, 0 4px 10px rgba(10, 76, 115, .12); }
.salle-seance .app-tuile { width: 2.1rem; height: 2.1rem; border-radius: .6rem; }
.salle-seance .app-tuile .icon { width: 1.1rem; height: 1.1rem; }
.salle-seance__corps { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.salle-seance__cat { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.salle-seance__titre { font-size: .85rem; color: #12303D; }
.salle-seance__detail { font-size: .72rem; color: #4F6C79; }
.salle-seance__type { font-size: .66rem; color: #4F6C79; }
.salle-seance__action { padding: .25rem .5rem; border-radius: var(--r-pill); background: #0A4C73; color: #FFFFFF; font-size: .7rem; font-weight: 700; }
.salle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: 0 0 .55rem; }
.salle-action { display: flex; align-items: center; justify-content: center; min-height: 2.2rem; border-radius: .8rem; border: 1px solid #0A4C73; color: #0A4C73; font-weight: 700; font-size: .75rem; text-align: center; }
.salle-action--principale { background: #0A4C73; color: #FFFFFF; }

.salle-video { height: 11.5rem; }
.salle-variante {
  position: absolute; bottom: .55rem; left: .55rem; z-index: 1; margin: 0;
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: var(--r-pill);
  background: #0F6F62; color: #FFFFFF; font-size: .72rem; font-weight: 700;
}
.salle-variante .icon { width: .9rem; height: .9rem; stroke: #FFFFFF; stroke-width: 2.8; }
.salle-consigne { margin: 0 0 .45rem; padding: .35rem .6rem; border-radius: .7rem; background: #15384A; font-size: .78rem; color: #FFFFFF; }
.salle-avatars { list-style: none; margin: 0 0 .45rem; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
.salle-avatar { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0; }
.salle-avatar .app-avatar { width: 2rem; height: 2rem; border-radius: .55rem; font-size: .9rem; }
.salle-avatar.is-moi .app-avatar { box-shadow: 0 0 0 2px #0C2230, 0 0 0 4px #5EE0D2; }
.salle-avatar__nom { max-width: 100%; font-size: .6rem; color: #C3DDEB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.salle-effort { display: flex; gap: 1px; }
.salle-effort span { width: .22rem; height: .45rem; border-radius: 1px; background: #2B5163; }
.salle-effort[data-effort="1"] span:nth-child(-n+1),
.salle-effort[data-effort="2"] span:nth-child(-n+2),
.salle-effort[data-effort="3"] span:nth-child(-n+3),
.salle-effort[data-effort="4"] span:nth-child(-n+4),
.salle-effort[data-effort="5"] span { background: #5EE0D2; }
.salle-musique { display: flex; align-items: center; gap: .3rem; margin: 0 0 .5rem; overflow: hidden; }
.salle-musique > .icon { flex: none; width: 1rem; height: 1rem; stroke: #7FE3D6; }
.salle-musique__choix { flex: none; padding: .15rem .5rem; border-radius: var(--r-pill); border: 1px solid #2B5163; font-size: .66rem; color: #C3DDEB; white-space: nowrap; }
.salle-musique__choix.is-actif { background: #7FE3D6; border-color: #7FE3D6; color: #0C2230; font-weight: 700; }
.salle-stop {
  display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0;
  min-height: 2.6rem; border-radius: .9rem; background: #D93A3A; color: #FFFFFF; font-weight: 700; font-size: .85rem;
}
.salle-stop .icon { width: 1.15rem; height: 1.15rem; stroke: #FFFFFF; stroke-width: 2.4; }

/* Bloc 5 : sécurité */
.salle-securite { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .salle-securite { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .salle-securite { grid-template-columns: repeat(3, 1fr); } }
.salle-securite__item { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--r-card); background: var(--cv-surface); border: 1px solid var(--cv-border); }
.salle-securite__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--cv-accent-soft); }
.salle-securite__icone .icon { width: 1.4rem; height: 1.4rem; stroke: var(--cv-accent-ink); }
.salle-securite__titre { margin: 0 0 var(--s-1); font-size: 1.125rem; }
.salle-securite__item p { margin: 0; }

/* Tarifs : quatre cartes, encarts de la Formule Libre */
@media (min-width: 62em) { .price-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80em) { .price-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.price-card--libre { border-style: dashed; border-color: var(--cv-border-strong); }
.price-card__badge--libre { background: var(--cv-surface-2); color: var(--cv-text-strong); border: 1px solid var(--cv-border-strong); }
.price-card--libre .mention-libre { margin: 0 0 var(--s-5); font-size: .875rem; }
.libre-encarts { margin: var(--s-6) 0; }
.libre-encart { padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--cv-surface); border: 1px solid var(--cv-border); }
.libre-encart--montee { border: 2px solid var(--cv-accent); }
.libre-encart__titre { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); font-weight: 700; color: var(--cv-text-strong); }
.libre-encart__titre .icon { flex: none; width: 1.2rem; height: 1.2rem; stroke: var(--cv-accent-ink); }
.libre-encart p:last-child { margin: 0; }

/* Comparatif : <table> sur grand écran, accordéon par formule sur mobile */
.cmp { display: inline-flex; align-items: flex-start; gap: .4rem; }
.cmp__icone { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; stroke-width: 2.6; }
.cmp--oui .cmp__icone { stroke: var(--cv-success); }
.cmp--non .cmp__icone { stroke: var(--cv-text-muted); }
.cmp--non { color: var(--cv-text-muted); }
.cmp--info .cmp__icone { stroke: var(--cv-text-strong); }
.comparatif__accordeon { display: grid; gap: var(--s-3); }
.comparatif__table { display: none; }
@media (min-width: 60em) {
  .comparatif__table { display: block; }
  .comparatif__accordeon { display: none; }
}
.cmp-formule { border: 1px solid var(--cv-border); border-radius: var(--r-card); background: var(--cv-surface); }
.cmp-formule__titre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 2.75rem; padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none;
  font-weight: 700; color: var(--cv-text-strong); font-size: 1.125rem;
}
.cmp-formule__titre::-webkit-details-marker { display: none; }
.cmp-formule__titre::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--cv-accent-ink); }
.cmp-formule[open] .cmp-formule__titre::after { content: "\2212"; }
.cmp-formule__titre:focus-visible { outline: 3px solid var(--cv-focus); outline-offset: 2px; border-radius: var(--r-card); }
.cmp-formule__prix { margin-left: auto; font-weight: 400; color: var(--cv-text-muted); font-size: 1rem; }
.cmp-formule__liste { margin: 0; padding: 0 var(--s-4) var(--s-3); }
.cmp-formule__liste > div { padding: var(--s-2) 0; border-top: 1px solid var(--cv-border); }
.cmp-formule__liste dt { font-weight: 700; color: var(--cv-text-strong); font-size: .9375rem; }
.cmp-formule__liste dd { margin: .15rem 0 0; }
.cmp-formule .mention-libre { margin: 0 var(--s-4) var(--s-4); }

/* Espace Coachs : champs côte à côte dans le formulaire */
.form__ligne { gap: 0 var(--s-4); }

/* Page d'invitation */
.invitation__carte {
  display: grid; gap: var(--s-3); max-width: 34rem; margin: var(--s-4) 0 var(--s-5);
  padding: var(--s-5); border-radius: var(--r-feature); background: var(--cv-surface); border: 1px solid var(--cv-border);
}
.invitation__theme, .invitation__date { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: 1.125rem; }
.invitation__theme .icon, .invitation__date .icon { flex: none; width: 1.75rem; height: 1.75rem; stroke: var(--cv-accent-ink); }
.invitation__theme span span { display: block; font-size: 1rem; color: var(--cv-text-muted); }
.invitation__stores a { display: inline-flex; align-items: center; min-height: 2.75rem; }