/* =====================================================================
   VITRINE STATIQUE — feuille de style
   =====================================================================

   ⭐ PROVENANCE — lisez ceci avant de retoucher une couleur ici.

   Ce fichier N'EST PAS le design system : c'est un EXTRAIT, recopié à la main depuis
   `app/static/ds.css` (dépôt coach-movetolive, commit 956e575, 2026-08-17) — les seules
   déclarations dont cette page a besoin : les tokens (palette, espacements, typo), le
   reset de base, les boutons (`.btn` et ses variantes), le sprite d'icônes de nav, la
   pastille `.badge-icone`, et les classes `.v-*` propres à la vitrine.

   ⚠️ PAS DE MÉCANISME DE SYNCHRONISATION AUTOMATIQUE (décision assumée, Fred 2026-08-17) :
   cette page ne vit que sur Cloudflare Pages, hors du déploiement de l'application — un
   script de build partagé aurait été plus de mécanique que ce que trois écrans justifient.
   Si `app/static/ds.css` change une teinte demain, RIEN ici ne le répercute tout seul.
   ⭐ Le filet, c'est l'œil : cette page ne fait que trois écrans, une divergence de couleur
   s'y verrait immédiatement à la revue. Si ça devait un jour diverger pour de vrai, recopier
   la section concernée depuis `app/static/ds.css` (les noms de variables sont identiques,
   copier-coller direct) — rien de plus à comprendre.

   ⚠️ Cette page ne pose JAMAIS `data-theme="dark"` : ni cookie, ni JS, donc uniquement le
   bloc `:root, :root[data-theme="light"]` peut jamais s'appliquer ici. C'est le comportement
   par défaut voulu par `ds.css` lui-même pour « le thème système seul, sans choix explicite »
   (cf. son commentaire de section MODULES, thème sombre) — pas une simplification propre à
   cette page. Le bloc `:root[data-theme="dark"]` n'a donc pas été recopié : mort par
   construction ici.
   ===================================================================== */

/* ------------------------------------------------------------- TOKENS (thème clair) */

:root, :root[data-theme="light"] {
  color-scheme: light;

  --color-brand: #111111;
  --color-brand-strong: #000000;
  --color-brand-on: #FFFFFF;
  --color-brand-muted: #595959;

  --color-ink: #111111;
  --color-on-ink: #FFFFFF;
  --color-on-ink-soft: rgba(255, 255, 255, .72);
  --color-on-ink-hover: #D6D6D6;
  --color-ink-border: rgba(255, 255, 255, .20);

  /* La carte principale du hero — maquette de cockpit validée par le coach. */
  --v-hero-grad-from: #5B21B6;
  --v-hero-grad-to:   #F97316;

  --color-canvas: #F6F7F9;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F1F3F6;

  --color-text: #13161C;
  --color-text-muted: #363E4A;
  --color-text-link: #1D4F91;
  --color-text-link-hover: #163D70;

  --color-border: rgba(19, 22, 28, .10);
  --color-border-subtle: rgba(19, 22, 28, .06);
  --color-border-strong: rgba(19, 22, 28, .16);
  --color-focus-ring: #005FCC;

  --color-action-primary-bg: #111111;
  --color-action-primary-bg-hover: #303030;
  --color-action-primary-fg: #FFFFFF;
  --color-action-secondary-bg: #FFFFFF;
  --color-action-secondary-bg-hover: #EFEFED;
  --color-action-secondary-fg: #171717;
  --color-action-secondary-border: #767676;
  --color-state-disabled-bg: #E7E7E3;

  --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font: var(--font-body);
  --fw-bold: 700;

  --fs-100: 12px; --fs-200: 14px; --fs-300: 16px; --fs-400: 18px;
  --fs-500: 20px; --fs-600: 24px; --fs-700: 32px; --fs-800: 40px; --fs-900: 56px;

  --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.5;
  --ls-tight: -.02em; --ls-caps: .08em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px;

  --r-card: 16px; --r-control: 10px;

  --content-max: 1200px;
  --reading-max: 720px;
  --h-control: 44px;
  --h-control-compact: 36px;
  --h-touch: 48px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* --- Modules consommés par cette page (methode, dashboard, sportifs, arbitrage,
     memoire, seances, messages) — cf. `[data-module="…"]` plus bas. --- */
  --module-dashboard-fg:      #07728B;
  --module-dashboard-bg:      #EEF7F9;
  --module-dashboard-border:  #95D6E4;

  --module-arbitrage-fg:      #3C63D6;
  --module-arbitrage-bg:      #EEF1F9;
  --module-arbitrage-border:  #95A9E4;

  --module-sportifs-fg:       #0F7844;
  --module-sportifs-bg:       #EEF9F4;
  --module-sportifs-border:   #95E4BD;

  --module-seances-fg:        #905F04;
  --module-seances-bg:        #F9F5EE;
  --module-seances-border:    #E4C995;

  --module-methode-fg:        #8945DC;
  --module-methode-bg:        #F3EEF9;
  --module-methode-border:    #B995E4;

  --module-messages-fg:       #0F766E;
  --module-messages-bg:       #EEF9F8;
  --module-messages-border:   #95E4DD;

  --module-memoire-fg:        #4338CA;
  --module-memoire-bg:        #F0EEF9;
  --module-memoire-border:    #A195E4;
}

/* --------------------------------------------------------------- base */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

a { color: var(--color-text-link); }
a:hover { color: var(--color-text-link-hover); }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------ boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--h-control);
  padding: var(--sp-2) var(--sp-5);
  background: var(--color-action-secondary-bg);
  border: 1px solid var(--color-action-secondary-border);
  color: var(--color-action-secondary-fg);
  border-radius: var(--r-control);
  font: inherit; font-size: var(--fs-200); font-weight: var(--fw-bold);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { background: var(--color-action-secondary-bg-hover); }
.btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.btn[disabled], .btn.is-off {
  opacity: .5; cursor: not-allowed;
  background: var(--color-state-disabled-bg); border-color: var(--color-border);
}

.btn-p {
  background: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-bg);
  color: var(--color-action-primary-fg);
}
.btn-p:hover {
  background: var(--color-action-primary-bg-hover);
  border-color: var(--color-action-primary-bg-hover);
}

.btn-s { min-height: var(--h-control-compact); padding: var(--sp-1) var(--sp-3);
         font-size: var(--fs-100); }
.btn-lg { min-height: 56px; padding: var(--sp-3) var(--sp-8); font-size: var(--fs-400); }

/* --------------------------------------------------- icônes de nav (sprite + pastille) */

.nav-icono {
  display: block; flex-shrink: 0;
  width: 20px; height: 20px;
  fill: none; stroke: var(--color-on-ink);
  stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
}

.badge-icone {
  --badge-forme: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); /* hexagone */
  --badge-ombre: var(--mod-fg, var(--color-text-muted));
  --badge-eclat: var(--mod-border, var(--color-border-strong));
  --badge-lueur: color-mix(in srgb, var(--badge-ombre) 45%, transparent);
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px;
  filter: drop-shadow(0 6px 14px var(--badge-lueur));
}
.badge-icone::before {
  content: ""; position: absolute; inset: 0;
  clip-path: var(--badge-forme); background: var(--badge-ombre); opacity: .32;
}
.badge-icone::after {
  content: ""; position: absolute; inset: 4px; clip-path: var(--badge-forme);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, var(--badge-eclat), var(--badge-ombre));
}
.badge-icone > svg { grid-area: 1 / 1; position: relative; z-index: 1; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* La couleur de module, par la même mécanique que le poste coach : un token, jamais une
   classe en dur. Seuls les 7 modules réellement utilisés par cette page. */
[data-module="dashboard"]  { --mod-fg: var(--module-dashboard-fg);  --mod-bg: var(--module-dashboard-bg);  --mod-border: var(--module-dashboard-border); }
[data-module="arbitrage"]  { --mod-fg: var(--module-arbitrage-fg);  --mod-bg: var(--module-arbitrage-bg);  --mod-border: var(--module-arbitrage-border); }
[data-module="sportifs"]   { --mod-fg: var(--module-sportifs-fg);   --mod-bg: var(--module-sportifs-bg);   --mod-border: var(--module-sportifs-border); }
[data-module="seances"]    { --mod-fg: var(--module-seances-fg);    --mod-bg: var(--module-seances-bg);    --mod-border: var(--module-seances-border); }
[data-module="methode"]    { --mod-fg: var(--module-methode-fg);    --mod-bg: var(--module-methode-bg);    --mod-border: var(--module-methode-border); }
[data-module="messages"]   { --mod-fg: var(--module-messages-fg);   --mod-bg: var(--module-messages-bg);   --mod-border: var(--module-messages-border); }
[data-module="memoire"]    { --mod-fg: var(--module-memoire-fg);    --mod-bg: var(--module-memoire-bg);    --mod-border: var(--module-memoire-border); }

/* --------------------------------------------------------------- vitrine (.v-*) */

.v-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--sp-5); }

.v-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-ink); color: var(--color-on-ink);
}
.v-nav .v-wrap {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 64px;
}
.v-nav .logo {
  font-weight: var(--fw-bold); font-style: italic; font-size: var(--fs-500);
  letter-spacing: var(--ls-tight); color: var(--color-on-ink); text-decoration: none;
}
.v-nav a:not(.logo):not(.btn) {
  color: var(--color-on-ink); text-decoration: none;
  font-size: var(--fs-200); opacity: .85;
}
.v-nav a:not(.logo):not(.btn):hover { opacity: 1; }

.v-liens { display: flex; align-items: center; gap: var(--sp-5); }

.v-nav .btn-p, .v-hero .btn-p, .v-inverse .btn-p {
  background: var(--color-on-ink); border-color: var(--color-on-ink);
  color: var(--color-ink);
}
.v-nav .btn-p:hover, .v-hero .btn-p:hover, .v-inverse .btn-p:hover {
  background: var(--color-on-ink-hover); border-color: var(--color-on-ink-hover);
  color: var(--color-ink);
}
.v-nav .btn:not(.btn-p), .v-hero .btn:not(.btn-p), .v-inverse .btn:not(.btn-p) {
  background: transparent;
  border-color: var(--color-on-ink-soft);
  color: var(--color-on-ink);
}
.v-nav .btn:not(.btn-p):hover,
.v-hero .btn:not(.btn-p):hover,
.v-inverse .btn:not(.btn-p):hover {
  background: var(--color-ink-border); border-color: var(--color-on-ink);
}

.v-hero {
  background-color: var(--v-hero-grad-from);
  background-image: linear-gradient(135deg, var(--v-hero-grad-from) 0%, var(--v-hero-grad-to) 100%);
  color: var(--color-on-ink);
  padding: var(--sp-20) 0 0;
}
.v-hero .v-wrap { display: grid; gap: var(--sp-10); align-items: center; }
.v-surtitre {
  font-size: var(--fs-100); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; opacity: .7;
  margin-bottom: var(--sp-4);
}
.v-hero h1 { font-size: var(--fs-800); line-height: var(--lh-tight); }
.v-hero p { font-size: var(--fs-400); opacity: .85; max-width: 46ch; }
.v-hero img { border-radius: var(--r-card); }

.v-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

.v-section { padding: var(--sp-20) 0; }
.v-section h2 { font-size: var(--fs-700); margin-bottom: var(--sp-5); }
.v-section > .v-wrap > p:not(.v-phrase) {
  max-width: var(--reading-max); font-size: var(--fs-400);
}
.v-section.v-inverse { background: var(--color-ink); color: var(--color-on-ink); }

.v-phrase {
  font-size: var(--fs-600); font-weight: var(--fw-bold); line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  border-left: 4px solid currentColor; padding-left: var(--sp-5);
  margin: var(--sp-10) 0 0; max-width: var(--reading-max);
}

.v-grille { display: grid; gap: var(--sp-6); margin-top: var(--sp-10); }
.v-carte {
  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-card); padding: var(--sp-6);
}
.v-inverse .v-carte {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.v-carte .badge-icone { display: block; margin-bottom: var(--sp-4); }
.v-carte h3 { font-size: var(--fs-500); margin-bottom: var(--sp-3); }
.v-carte p { margin: 0 0 var(--sp-3); }
.v-carte p:last-child { margin-bottom: 0; }
.v-num {
  display: inline-block; font-size: var(--fs-100); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); opacity: .55; margin-bottom: var(--sp-2);
}

.v-media { margin-top: var(--sp-10); }
.v-media img { border-radius: var(--r-card); width: 100%; }

.v-limites li {
  list-style: none; padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.v-limites { padding: 0; margin: var(--sp-8) 0 0; max-width: var(--reading-max); }
.v-limites strong { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-400); }

.v-footer {
  background: var(--color-ink); color: var(--color-on-ink);
  padding: var(--sp-12) 0; font-size: var(--fs-200);
}
.v-footer .v-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.v-footer a { color: var(--color-on-ink); opacity: .8; }
.v-editeur { margin-left: auto; opacity: .6; }

/* --------------------------------------------------- responsive */

@media (min-width: 900px) {
  .v-hero .v-wrap { grid-template-columns: 1fr 1fr; padding-bottom: var(--sp-20); }
  .v-hero { padding-bottom: 0; }
  .v-grille { grid-template-columns: repeat(2, 1fr); }
  .v-grille.v-3 { grid-template-columns: repeat(3, 1fr); }
  .v-hero h1 { font-size: var(--fs-900); }
}

@media (min-width: 1100px) {
  .v-grille.v-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  .btn { min-height: var(--h-touch); }
  .v-section { padding: var(--sp-12) 0; }
  .v-hero { padding-top: var(--sp-12); }
  .v-hero h1 { font-size: var(--fs-700); }
  .v-section h2 { font-size: var(--fs-600); }
  .v-nav .v-wrap { gap: var(--sp-3); flex-wrap: wrap; }
  .v-liens { display: none; }
  .v-cta { flex-direction: column; }
  .v-cta .btn { white-space: normal; }
}

/* Seule dérogation admise au « pas de CSS one-off » : le saut au contenu. */
.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-brand); color: var(--color-on-ink);
  padding: var(--sp-3) var(--sp-4); z-index: 999;
}
.saut-contenu:focus { left: 0; }