/* ═══════════════════════════════════════════════════════════════════════════
   SOBOX FORMATION — le système visuel de la plateforme

   ─── D'OÙ VIENNENT CES VALEURS ───────────────────────────────────────────
   Elles ne sont pas inventées : elles sont relevées sur soboxformation.com,
   qui est la marque telle qu'elle est réellement vue par les clients.

   ⚠️ Elles CORRIGENT ce que j'avais déduit du nuancier imprimé de la charte.
      J'en avais tiré une plateforme au magenta, en Nunito, aux coins très
      arrondis. Le site, lui, est turquoise, en Raleway, et ses boutons sont
      presque carrés. Le nuancier donnait des encres ; il ne disait pas
      comment la marque s'habille à l'écran.

     police         Raleway (400 → 800)          — et c'est une police LIBRE :
                                                   plus besoin de substitut
     turquoise      #51B1BC   les grands aplats
     bleu           #3389A1   les titres de section
     vert           #28B195   les liens, l'accent
     vert vif       #81C826   l'action secondaire
     orange         #F49817   l'action principale
     encre          #202020   le texte
     coins          3 px      — presque carrés, c'est une signature
     boutons        MAJUSCULES, graisse 800, 13 px

   ─── COMMENT S'EN SERVIR ─────────────────────────────────────────────────
   Chaque page lie cette feuille AVANT son propre <style>, et n'y garde que
   ce qui lui est propre.

   ⚠️ CET ORDRE A UN PRIX, ET IL FAUT LE CONNAÎTRE. Une page qui redéclare
      `button`, `input` ou `--police` GAGNE contre la charte — silencieusement.
      C'est arrivé au bouton de connexion, le tout premier écran que voit un
      participant : graisse 400 au lieu de 800, coins à 7 px au lieu de 3, et
      la police du système au lieu de Raleway. Trouvé EN LIGNE, parce qu'en
      local je mettais au point sur les écrans déjà refaits.

      Règle : une page ne redéfinit JAMAIS ce que porte cette feuille. Si un
      écran a besoin d'autre chose, il le nomme autrement. ⚠️ Les anciens noms de variables (--sb-magenta…)
   restent définis et pointent vers les vraies couleurs : sans cet alias, il
   aurait fallu réécrire chaque règle de chaque écran d'un coup, et une seule
   oubliée aurait laissé une tache de l'ancienne palette.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Le nuancier de la marque, relevé sur le site */
  --sb-turquoise:#51B1BC;
  --sb-bleu:#3389A1;
  --sb-vert:#28B195;
  --sb-vert-vif:#81C826;
  --sb-orange:#F49817;
  --sb-orange-vif:#FF9900;
  --sb-rose:#EE2E6A;
  --sb-encre:#202020;
  --sb-gris:#535353;
  --sb-gris-clair:#8C8C8C;

  /* Rôles — c'est par ces noms-là qu'on devrait écrire les règles neuves */
  --action:var(--sb-orange);        /* le geste principal */
  --action-2:var(--sb-vert-vif);    /* le geste secondaire */
  --accent:var(--sb-vert);          /* liens, page courante, mises en avant */
  --bandeau:var(--sb-turquoise);    /* les grands aplats */

  --fond:#f7f8f9; --carte:#fff; --bord:#e3e7ea;
  --texte:var(--sb-encre); --texte2:#5c666e; --texte3:#8e979e;

  /* ⚠️ 3 px, pas 14. Les coins presque carrés sont une signature Sobox ;
     les arrondis généreux appartiennent à une autre marque. */
  --rayon:4px;
  --rayon-bouton:3px;
  --police:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ombre:0 1px 2px rgba(16,24,32,.06);
  --ombre-forte:0 6px 20px rgba(16,24,32,.10);

  /* ─── Alias de transition ──────────────────────────────────────────────
     Les écrans écrits avant ce système emploient ces noms. Ils pointent
     désormais vers les vraies couleurs de la marque. À résorber au fil des
     retouches, pas d'un coup. */
  --sb-magenta:var(--accent);
  --sb-ciel:var(--sb-turquoise);
  --sb-rouge:#EF4052;
  --primaire:var(--accent);
  --primaire-fond:#e6f6f2;
}

@media (prefers-color-scheme: dark){
  :root{
    --fond:#14181a; --carte:#1c2124; --bord:#2b3236;
    --texte:#e8edef; --texte2:#a6b1b7; --texte3:#78848a;
    --ombre:0 1px 2px rgba(0,0,0,.4);
    --ombre-forte:0 6px 20px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--fond);color:var(--texte);
  font:16px/1.55 var(--police);-webkit-font-smoothing:antialiased}

/* ─── Titres ─────────────────────────────────────────────────────────────
   Graisse 700, et surtout : les titres de section portent la COULEUR. C'est
   ce qui donne au site son air vivant, et ce qui manquait le plus à la
   plateforme — des pages entières en gris sur gris. */
h1{font-size:34px;font-weight:700;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
h2{font-size:22px;font-weight:700;line-height:1.25;margin:0 0 6px}
h3{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texte3);margin:22px 0 8px}
a{color:var(--accent)}

/* ─── L'en-tête ──────────────────────────────────────────────────────────
   Blanc, comme la barre du site — et non un aplat turquoise : le turquoise
   est réservé aux bandeaux de contenu, sinon il ne dit plus rien. */
header{background:var(--carte);border-bottom:1px solid var(--bord);
  padding:12px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  box-shadow:var(--ombre);position:sticky;top:0;z-index:20}
header img{height:34px;width:auto;display:block}
header .sep{flex:1}

/* ─── Boutons ────────────────────────────────────────────────────────────
   MAJUSCULES, graisse 800, 13 px, coins à 3 px : c'est la signature du site,
   et elle se reconnaît immédiatement. */
button{font:inherit;font-size:14px;font-weight:700;padding:8px 14px;
  border-radius:var(--rayon-bouton);border:1px solid var(--bord);
  background:var(--carte);color:var(--texte2);cursor:pointer;
  transition:filter .12s,background .12s}
button:hover{filter:brightness(.97)}
button:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* ⚠️ Les MAJUSCULES sont réservées aux APPELS À L'ACTION. Posées sur
   `button` tout court, elles s'appliquaient aussi aux cartes de la frise —
   qui sont des boutons — et tout le parcours se lisait en capitales.
   Une règle de typographie doit viser un rôle, pas une balise. */
button.principal,button.secondaire,.bouton{
  font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:9px 16px;color:#fff}
button.principal{background:var(--action);border-color:var(--action)}
button.secondaire{background:var(--action-2);border-color:var(--action-2)}

/* Les gestes de service : « modifier », « retirer ». Discrets par nature. */
button.discret,button.mini,button.doux{font-size:12.5px;font-weight:700;
  padding:4px 10px;text-transform:none;letter-spacing:0}

/* ─── Champs ─────────────────────────────────────────────────────────── */
input,select,textarea{font:inherit;padding:9px 11px;border-radius:var(--rayon);
  border:1px solid var(--bord);background:var(--carte);color:var(--texte);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);
  outline-offset:-1px;border-color:var(--accent)}
label{display:block;font-size:12px;font-weight:700;color:var(--texte2);margin-bottom:4px}

/* ─── Cartes ─────────────────────────────────────────────────────────── */
.carte,.bloc{background:var(--carte);border:1px solid var(--bord);
  border-radius:var(--rayon);box-shadow:var(--ombre)}
.bloc{padding:20px 22px;margin-bottom:18px}

/* ─── Le bandeau de page ─────────────────────────────────────────────────
   L'aplat turquoise du site, repris pour coiffer une page. C'est lui qui
   fait qu'on reconnaît Sobox en une seconde, et il ne coûte rien. */
.bandeau{background:var(--bandeau);color:#fff;padding:26px 0 28px;margin-bottom:22px;
  /* La trame de points du site, en CSS : pas d'image à charger. */
  background-image:radial-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.6px);
  background-size:14px 14px;background-position:right -20px top -20px}
.bandeau h1,.bandeau h2{color:#fff}
.bandeau .surtitre{font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.85)}
.bandeau .sous{color:rgba(255,255,255,.92);font-size:15.5px;margin-top:6px;max-width:75ch}

.muet{color:var(--texte2);font-size:14px}
.tres-muet{color:var(--texte3);font-size:12.5px}

/* ─── Messages ─────────────────────────────────────────────────────────── */
#msg{padding:11px 15px;border-radius:var(--rayon);margin-bottom:16px;display:none;
  font-weight:600}
#msg.erreur{background:#fdeaea;color:#b4232a;display:block;
  border:1px solid #f3c9c9}
#msg.ok{background:#e9f7f2;color:#1c7a5e;display:block;border:1px solid #bfe5d8}
@media (prefers-color-scheme: dark){
  #msg.erreur{background:#3a1d1d;color:#f7b9b9;border-color:#5c2c2c}
  #msg.ok{background:#12332a;color:#a9e6d2;border-color:#255246}
}