/* ==========================================================================
   COULEURS ET FOND DU SITE
   Le seul endroit où sont écrites les couleurs, les ombres, les arrondis et
   le fond de page. Tout le reste du site s'en sert par var(--so-…) et ne
   redit jamais une couleur en clair.

   Ce fichier est chargé par TOUTES les pages, y compris les pages juridiques
   qui ne chargent pas style.css. Il ne doit donc contenir QUE des variables
   et le fond de la page, jamais l'habillage d'un composant : celui-ci vit
   dans style.css.

   ⚠️ Il se charge APRÈS style.css, jamais avant. La règle « .student-page,
   .teacher-page » de style.css pose encore le texte en blanc pour la page
   élève ; si ce fichier passait devant, l'espace enseignant écrirait en
   blanc sur beige. Le jour où la page élève passera au thème clair elle
   aussi, cette contrainte tombera.

   ⚠️ La page d'accueil (public/index.html) NE charge PAS ce fichier : elle
   recopie les tokens --so-* et la règle .btn--primary::before dans son propre
   <style> (choix de rapidité). Toute retouche du verre ici doit être reportée
   À LA MAIN dans index.html, sinon la vitrine ne suivra pas.
   ========================================================================== */

:root {
  /* Couleurs dérivées du thème choisi en base (onglet Enseignants) :
     le JS pose --bg-start / --bg-end / --color-accent-rgb sur <html>,
     tout le thème se recalcule automatiquement à partir d'elles. */
  --so-accent: var(--bg-start, #FF6B35);
  --so-accent-end: var(--bg-end, #C0392B);
  --so-accent-rgb: var(--color-accent-rgb, 255, 107, 53);
  --so-accent-deep: color-mix(in srgb, var(--bg-end, #C0392B) 68%, #1C1917 32%);
  --so-accent-soft: color-mix(in srgb, var(--bg-start, #FF6B35) 10%, #FFFFFF 90%);
  /* Teinte de SURVOL, et elle est volontairement plus soutenue que
     --so-accent-soft. Les deux ne font pas le même métier, et c'est pour les
     avoir confondues que tous les survols du site paraissaient délavés :
       • --so-accent-soft (10 %) est un fond AU REPOS : badge de degré, jour
         d'une période choisie, plaque d'un réglage. Il doit rester discret,
         puisqu'il est là en permanence ;
       • --so-accent-hover (20 %) est un fond MOMENTANÉ, qui ne dure que le
         temps où le doigt ou la souris est dessus. Il doit se voir tout de
         suite, et surtout se rattacher à la couleur des boutons pleins :
         un survol qui part vers un gris pâle n'appartient plus au site.
     ⛔ Ne pas remonter --so-accent-soft « pour que le survol se voie » : cela
     assombrirait du même coup tous les fonds au repos ci-dessus. */
  --so-accent-hover: color-mix(in srgb, var(--bg-start, #FF6B35) 30%, #FFFFFF 70%);
  /* 🔑 CETTE LIGNE EST LE SEUL RÉGLAGE DU SURVOL DE TOUS LES BOUTONS DU SITE.
     Changer le 30 % la change partout, d'un coup, sur toutes les pages sauf la
     page élève (qui a son propre habillage, volontairement).

     Les RÈGLES, elles, restent éparpillées, et ce n'est pas un oubli : chacune
     est là où la spécificité ou une media query l'exige (`.btn--barre` ne vaut
     qu'en dessous de 1024px, `.cmp-iconbtn` doit battre le fond de la Compta…).
     Les regrouper en une seule règle en casserait la moitié. Ce qui est
     centralisé, c'est la COULEUR, et c'est ce qui compte pour la retoucher.

     Elles pointent toutes ici : style.css (.btn--ghost, .btn--barre, .icon-btn,
     .eval-info-btn, .set-row, .set-back, .st-pill, .sheet-item, .ex-bc-item,
     .ex-nav-item, .ex-pill__action-btn, .ex-search-scope__all, .drp__nav,
     .drp__day, .eval-add-col, .exd-btn, .exd-vote, .exd-breadcrumb a,
     .exd-close, .org-plaque--picker, .student-item__prenom--editable,
     .binome-duree, .mobile-ex-card, .teacher-header .btn--ghost),
     accueil.css (.ac-open, .ac-rac, .ac-stat--lien), todo.css (.td-add,
     .td-menu button), compta.css (.cmp-btn.ghost, .cmp-btn.add-toggle,
     .cmp-iconbtn), checkliste.css (.ck-menu button, .ck-page__btn),
     suivi.css (.sv-bc-add, .sv-edit).

     ⛔ Gardent EXPRÈS leur propre survol, parce qu'il porte un SENS et non un
     habillage : le rouge d'une suppression, le jaune d'un favori, le vert
     d'une réussite. Et ne sont pas des boutons, donc hors sujet : la ligne
     survolée d'un tableau, une carte d'exercice, la croix d'une pastille du
     Suivi, le bouton d'un message d'alerte (posé sur du sombre). */
  --so-grad: linear-gradient(135deg, var(--bg-start, #FF6B35) 0%, var(--bg-end, #C0392B) 100%);
  /* Halo lumineux et anneau de focus : dérivés DIRECTEMENT de --bg-start
     (et non du triplet --color-accent-rgb), pour qu'ils suivent toujours la
     couleur du bouton même sur les pages où le JS n'a pas posé le triplet. */
  --so-glow: color-mix(in srgb, var(--bg-start, #FF6B35) 45%, transparent);
  --so-ring: color-mix(in srgb, var(--bg-start, #FF6B35) 24%, transparent);

  --so-bg: color-mix(in srgb, var(--bg-start, #FF6B35) 5%, #FBF8F4 95%);

  /* ═══ L'ÉCHELLE DES SURFACES — trois degrés, et pas un de plus ═══════════
     Décidé le 31.08.2026 : le blanc pur sur le fond de la page tapait trop
     dur, et l'ivoire de la Compta tirait trop sur le beige. Les trois degrés
     sont donc du blanc TEINTÉ DE LA COULEUR DU SITE (celle de la base), de
     plus en plus dosé. Changez la couleur en base : les trois suivent.

       • --so-surface    la CARTE   → et TOUT ce qu'elle contient
       • --so-surface-2  la ZONE QUI S'OUVRE dans une carte (la seule exception)
       • --so-surface-3  le SQUELETTE d'attente, le temps que la vraie donnée
                         arrive

     🔑 LA RÈGLE, réécrite le 01.09.2026 : DANS UNE CARTE, RIEN N'EST ENFERMÉ.
        Le fond de la page est coloré, la carte est claire : deux enveloppes,
        c'est déjà assez. Ce qui sépare deux informations à l'intérieur, c'est
        un FILET ou du VIDE, jamais une troisième boîte teintée. La première
        version de cette échelle empilait justement trois fonds, et Marouane
        l'a trouvée « encore plus lourde que le verre 3D » : il avait raison.
     ⛔ La COULEUR, dans une carte, ne sert qu'à une chose : dire ce qui est
        ACTIF (le jour d'aujourd'hui, la rubrique ouverte, l'exercice affiché)
        ou ce qui est SURVOLÉ. Une seule chose teintée par carte. */
     ⚠️ Chaque degré est écrit DEUX fois : d'abord une couleur ordinaire, puis
        la version teintée. Les vieux Safari d'iPad ne comprennent pas
        color-mix() : ils ignorent la seconde ligne et gardent la première,
        donc la surface reste pleine au lieu de devenir transparente. Sans ce
        doublon, un tableau de notes deviendrait illisible sur ces iPad. */
  --so-surface: #FFFDFC;
  --so-surface: color-mix(in srgb, var(--bg-start, #FF6B35) 3%, #FFFFFF 97%);
  --so-surface-2: #FCF9F5;
  --so-surface-2: color-mix(in srgb, var(--bg-start, #FF6B35) 6%, #FDFCFA 94%);
  --so-surface-3: #F8F3EC;
  --so-surface-3: color-mix(in srgb, var(--bg-start, #FF6B35) 10%, #FBF9F6 90%);
  --so-border: color-mix(in srgb, var(--bg-start, #FF6B35) 9%, #ECE8E1 91%);
  --so-border-strong: color-mix(in srgb, var(--bg-start, #FF6B35) 16%, #DFD8CD 84%);
  --so-text: #1C1917;
  --so-text-2: #57534E;
  --so-text-3: #A8A29E;
  --so-success: #15803D;
  --so-danger: #B91C1C;

  /* Le vert et le rouge des SCORES, et ils sont distincts de --so-success et
     --so-danger : ces deux-là servent aux messages et aux boutons, où il faut
     un fort contraste sur fond clair. Sur une jauge de quelques pixels et des
     chiffres de 13px, ce vert-là paraissait sombre et éteint. Ceux-ci sont
     ceux du site depuis le début, Marouane les préfère (31.08.2026). */
  --score-ok: #16a34a;
  --score-ko: #dc2626;

  /* Variables globales de style.css recalibrées pour le fond clair
     (sinon elles restent blanches et deviennent illisibles) */
  --color-muted: #57534E;
  --color-border: rgba(28, 25, 23, 0.1);
  --color-success: #15803D;
  --color-danger: #B91C1C;

  /* Liquid glass = COPIE VERBATIM de la démo Apple (box-shadow neutre #fff/#000),
     appliquée PARTOUT via ces tokens. Le VERRE lui-même est teinté avec une couleur
     de la DB : --so-glass-tint = beige + accent du thème, donc tout suit la couleur
     du site. Opacités = celles de la démo (12% base / 36% « fort »), pas touché.
       • le bord ne vient QUE de la lumière : --so-glass-border = transparent, et
         l'arête est l'anneau clair `inset 0 0 0 1px #fff` INCLUS dans le specular ;
       • --so-specular = démo `.switcher::after` (petits éléments : boutons, chips,
         onglet actif) ; --so-specular-lg = démo `.switcher` (grandes plaques :
         tableau, cartes, modales, portail) ; --so-shadow-sm = les 2 ombres démo. */
  /* Teinte du verre = CRÈME clair (pas de gris : #bbbbbc était un gris = un teintage).
     Le crème éclaircit/réchauffe ; opacités volontairement BASSES pour rester bien
     transparent. (Aucun teintage du tout = blanc pur, mais alors les reflets blancs
     du relief disparaissent → rendu plat ; le crème est le bon compromis.) */
  --so-glass-tint: #F1EADC;
  --so-glass: color-mix(in srgb, var(--so-glass-tint) 11%, transparent);
  --so-glass-strong: color-mix(in srgb, var(--so-glass-tint) 24%, transparent);
  /* Surface de TRAVAIL : celles sur lesquelles on lit des colonnes de chiffres
     (cartes de la Compta, carte d'exercice affichée). Ce n'est plus du verre
     depuis le 31.08.2026, et surtout plus de l'ivoire : c'était le fond le plus
     beige du site, Marouane le trouvait trop jaune. C'est simplement la TUILE
     de l'échelle des surfaces, donc du blanc teinté de la couleur du site.
     Le nom reste pour ne pas avoir à retoucher les feuilles qui l'emploient. */
  --so-glass-work: var(--so-surface-2);
  --so-glass-edge: var(--so-accent-deep);
  --so-glass-border: transparent;
  --so-blur: blur(8px) saturate(150%);
  /* Bord des PETITS éléments (boutons, chips, onglet) = LUMIÈRE seule. Les 2 insets
     #000 de la démo formaient, sur un petit bouton, un liseré gris JUSTE à côté du
     reflet blanc → l'œil lisait « deux couches de verre » (retiré, retour Marouane
     2026-07-01). Les grandes plaques gardent leurs creux via --so-specular-lg. */
  --so-specular:
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
    inset 2px 1px 0 -1px color-mix(in srgb, #fff 90%, transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, #fff 80%, transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, #fff 60%, transparent);
  --so-specular-lg:
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, #fff 90%, transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, #fff 80%, transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, #000 12%, transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, #000 20%, transparent),
    inset 0 3px 4px -2px color-mix(in srgb, #000 20%, transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 10%, transparent);

  /* Petits éléments (boutons, onglets, chips) : ombre douce de la démo + un fin
     LISERÉ EXTÉRIEUR (le ring `0 0 0 1px`, non-inset) pour qu'on voie nettement où
     est le verre sur le fond crème (demandé par Marouane 2026-07-01). C'est le
     liseré du DEHORS — l'intérieur reste lumière seule (pas de gris). Teinte chaude
     translucide qui suit l'accent du thème. */
  --so-shadow-sm:
    0 0 0 1px color-mix(in srgb, var(--so-accent) 22%, transparent),
    0 3px 6px 0 color-mix(in srgb, #000 8%, transparent);
  /* L'ombre de ce qui se POSE et ne flotte pas : un tableau, une carte qu'on
     lit. Une seule ombre, très courte. Les tableaux portaient jusqu'ici une
     ombre noire de 24px héritée du thème sombre : sur fond clair elle les
     faisait paraître lourds et sales. */
  --so-shadow-pose: 0 1px 2px rgba(28, 25, 23, 0.05);
  --so-shadow-md: 0 12px 32px -10px rgba(var(--so-accent-rgb), 0.18), 0 2px 6px rgba(87, 53, 21, 0.05);
  --so-shadow-lg: 0 18px 44px -10px rgba(var(--so-accent-rgb), 0.26), 0 2px 8px rgba(87, 53, 21, 0.06);
  --so-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Fond : canevas beige + couche fixe de halos ──────────────────────────
   Défilement NATUREL (le contenu peut descendre jusqu'au bord, derrière la
   pilule Safari). Le fond vit sur DEUX couches : le canevas html (couleur beige
   --so-bg, la seule chose qu'iOS peint dans la fine bande basse et pendant un
   flash) et html::before (fixe, les halos qui finissent en beige en bas). Les
   deux finissant sur le même beige, le raccord du bas est invisible. */
html {
  /* CANEVAS = beige de base --so-bg. C'est lui qui remplit la fine bande Safari
     (derrière la pilule) et un éventuel flash ; comme le fond FINIT en ce même
     beige en bas, le raccord est invisible. */
  background-color: var(--so-bg) !important;
  background-image: none !important;
}

/* FOND FIXE plein écran (position:fixed; inset:0 dans style.css), STATIQUE
   pendant que le contenu défile dessous. Halos colorés sur fond beige qui
   FONDENT vers --so-bg en bas (1er calque = voile beige croissant) : ainsi la
   fine bande basse rognée par iOS (remplie par le canevas --so-bg) se raccorde
   sans coupure visible. */
html::before {
  background-color: var(--so-bg) !important;
  background-image:
    linear-gradient(to bottom, transparent 84%, var(--so-bg) 98%),
    radial-gradient(55% 38% at 82% -8%, rgba(var(--so-accent-rgb), 0.26), transparent 65%),
    radial-gradient(45% 30% at 8% -4%, rgba(252, 211, 77, 0.22), transparent 60%),
    radial-gradient(40% 34% at 28% 52%, color-mix(in srgb, var(--bg-end, #C0392B) 14%, transparent), transparent 70%),
    radial-gradient(50% 40% at 78% 88%, rgba(var(--so-accent-rgb), 0.16), transparent 62%),
    radial-gradient(32% 26% at 70% 18%, rgba(var(--so-accent-rgb), 0.18), transparent 70%),
    radial-gradient(26% 22% at 22% 36%, rgba(252, 211, 77, 0.14), transparent 70%),
    radial-gradient(30% 26% at 55% 80%, color-mix(in srgb, var(--bg-end, #C0392B) 12%, transparent), transparent 70%) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent; /* inutilisé : les halos sont sur html::before */
}

/* ── Dégradé de raccord en haut (portail) ──
   Voile beige doux : part du fond Safari (--so-bg), le tient sur la safe-area,
   puis se fond vers le bas. Efface la ligne sous la barre d'état sur la page de
   connexion (qui n'a pas de bandeau). Suit le thème. */
.login-page::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(env(safe-area-inset-top, 0px) + 150px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--so-bg) 0,
    var(--so-bg) calc(env(safe-area-inset-top, 0px) + 36px),
    transparent 100%
  );
}

.teacher-page { color: var(--so-text); text-shadow: none; background: transparent !important; /* transparent : le contenu défile par-dessus le fond fixe html::before */ }

/* ── Focus clavier ── */
:focus-visible {
  outline: 2px solid var(--so-accent);
  outline-offset: 2px;
}
/* ⛔ Sauf les menus déroulants : ils gardent la mise au point après un choix, et
   comme le bouton de tri coupe ce qui dépasse, il n'en restait qu'un trait de
   couleur au bord gauche, qui ne partait plus. */
select:focus-visible { outline: none; }
.btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--so-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--so-ring);
}

/* ── Onglets : aucune animation d'entrée. Les barres d'action (Imprimer,
   Exporter, le « i »…) restent EXACTEMENT à la même position d'un onglet à
   l'autre — on a l'impression d'un seul et même bouton qui ne bouge pas
   quand on change de page. ── */

