/* ══════════════════════════════════════════════════════════════════════════════
   GIRI ACADÉMIE — CHARTE DE L'ESPACE ÉLÈVE
   Une seule matière : le MARBRE. Deux lumières : le jour, la nuit.
   Un seul accent : l'OR.
   Posée le 2026-08-30 sur ordre de Maha (« unifier de façon exhaustive »).

   ⛔ RÈGLE : aucune page de l'espace élève ne définit sa propre couleur de fond,
      son propre panneau, ni son propre bouton. Tout vient d'ici.
      Le brun/chocolat, le gris froid, le violet et le turquoise sont BANNIS.

   Thèmes : body[data-theme="marbre"] = jour · body[data-theme="dark"] = nuit
   (« dark » garde son nom pour ne rien casser ; il ne veut plus dire brun.)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── L'or de la maison (identique jour et nuit) ─────────────────────────── */
:root,
body{
  --ga-or-profond:#8a6512;
  --ga-or:#c9971b;
  --ga-or-vif:#e8b93a;
  --ga-or-lum:#f7e3a4;
  --ga-or-pale:#fdf0c0;
  --ga-or-filet:linear-gradient(90deg,transparent,rgba(201,151,27,.75) 18%,rgba(232,185,58,.9) 50%,rgba(201,151,27,.75) 82%,transparent);
  --ga-lingot:linear-gradient(180deg,#fdf3cf 0%,#f0d78f 16%,#e0bd63 42%,#c9a144 68%,#e8cf8d 100%);
  --ga-lingot-bord:rgba(122,90,16,.55);
  --ga-serif:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  --ga-sans:'Jost','Inter','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ga-r-carte:18px;
  --ga-r-panneau:24px;
}

/* ── LE JOUR — marbre clair ────────────────────────────────────────────── */
body[data-theme="marbre"],
body[data-theme="light"],
body[data-theme="sepia"],
body[data-theme="ocean"]{
  --ga-pierre:url('/charte-ga/pierre-jour.webp');
  --ga-voile:linear-gradient(180deg,rgba(255,253,248,.40),rgba(255,252,245,.54));
  --ga-fond-plat:#fdfaf2;
  --ga-encre:#33281a;
  --ga-encre-2:#6b5c44;
  --ga-encre-3:#7a6a4d;
  /* [31/08] #8a6512 ne tenait que sur le marbre le PLUS clair : sur un panneau
     creme (#ece7dd), il tombait a 4,13 -- sous le seuil. #7a5910 donne 5,06 la
     et 5,9 sur la pierre, et reste de l'or a l'oeil. */
  --ga-or-texte:#7a5910;          /* l'or lisible SUR fond clair */
  /* Le titre gravé : sur pierre CLAIRE, le sommet du dégradé ne monte jamais
     dans les pâles — sinon la lettre s'efface (incident du 26/08 sur le marbre). */
  --ga-or-grave:linear-gradient(180deg,#b28619 0%,#9a7414 34%,#87610f 66%,#6b4d0c 100%);
  --ga-verre:linear-gradient(180deg,rgba(255,253,249,.90) 0%,rgba(253,250,243,.86) 62%,rgba(251,246,236,.88) 100%);
  --ga-verre-plat:rgba(255,253,248,.86);
  --ga-verre-creux:rgba(255,255,255,.55);
  --ga-filet:rgba(150,112,52,.32);
  --ga-filet-fort:rgba(150,112,52,.58);
  --ga-ombre:0 12px 30px rgba(96,70,20,.14);
  --ga-ombre-h:0 20px 44px rgba(96,70,20,.22);
  --ga-luisant:inset 0 1px 0 rgba(255,255,255,.92);
  --ga-vitre:rgba(250,246,236,.72);
  --ga-champ:rgba(255,255,255,.80);
  --ga-eteint:linear-gradient(180deg,rgba(252,249,242,.72),rgba(246,241,231,.66));
}

/* ── LA NUIT — marbre bleu nuit veiné d'or ─────────────────────────────── */
body[data-theme="dark"],
body:not([data-theme]){
  --ga-pierre:url('/charte-ga/pierre-nuit.webp');
  --ga-voile:linear-gradient(180deg,rgba(4,8,17,.52),rgba(3,6,14,.68));
  --ga-fond-plat:#070c17;
  --ga-encre:#edf1f8;
  --ga-encre-2:#b4c2d6;
  --ga-encre-3:#8593aa;
  --ga-or-texte:#f0d98c;          /* l'or lisible SUR fond nuit */
  --ga-or-grave:linear-gradient(180deg,#fdf3cf 0%,#f3d98c 32%,#e0b243 64%,#c9971b 100%);
  --ga-verre:linear-gradient(180deg,rgba(20,32,54,.80) 0%,rgba(14,24,43,.86) 62%,rgba(10,18,33,.90) 100%);
  --ga-verre-plat:rgba(14,24,43,.80);
  --ga-verre-creux:rgba(255,255,255,.055);
  --ga-filet:rgba(212,175,55,.30);
  --ga-filet-fort:rgba(212,175,55,.58);
  --ga-ombre:0 14px 34px rgba(0,0,0,.48);
  --ga-ombre-h:0 22px 48px rgba(0,0,0,.58);
  --ga-luisant:inset 0 1px 0 rgba(255,240,200,.10);
  --ga-vitre:rgba(7,13,25,.66);
  --ga-champ:rgba(255,255,255,.06);
  --ga-eteint:linear-gradient(180deg,rgba(28,40,63,.62),rgba(20,30,50,.68));
}

/* ══ LA PIERRE — le fond de toute page élève ═══════════════════════════ */
/* La couleur de secours va sur HTML, et le BODY reste transparent.
   Le contexte d'empilement est `html` : une couleur opaque sur le body se
   peint APRES les couches a z-index negatif -- le body masque alors son
   propre ::before. C'est le piege n.10 de la charte, et il etait reste actif
   en plein JOUR : la texture du marbre clair etait posee, chargee, jamais
   visible. La nuit y echappait par hasard, `nuit.css` rendant le body
   transparent avec 5 ID. La pierre du jour n'existait donc nulle part. */
html.ga-pierre{background:var(--ga-fond-plat)!important}
body.ga-pierre{background:transparent!important}

/* ⛔ z-index NÉGATIF, jamais 0 : avec 0 il faudrait pousser tout le contenu en
   `position:relative`, ce qui écrase les `position:fixed` des panneaux (le mur des
   formations est retombé en bas de page le 30/08 pour cette raison exacte). */
body.ga-pierre::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;display:block!important;
  background:var(--ga-voile),var(--ga-pierre) center center/cover no-repeat!important;
  filter:none!important;
}
body[data-theme="marbre"].ga-pierre::before{filter:contrast(1.10) saturate(1.06)!important}

/* ══ LA TYPOGRAPHIE ═══════════════════════════════════════════════════ */
.ga-sur{font-family:var(--ga-sans);font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ga-or-texte);opacity:.9}
.ga-titre{font-family:var(--ga-serif);font-weight:600;letter-spacing:.06em;color:var(--ga-encre);
  font-variant-numeric:lining-nums}
.ga-titre-or{font-family:var(--ga-serif);font-weight:600;letter-spacing:.14em;
  background:var(--ga-or-grave);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ga-or-texte);
  font-variant-numeric:lining-nums}
.ga-sous{font-family:var(--ga-serif);font-style:italic;color:var(--ga-encre-2);letter-spacing:.06em}
.ga-filet{height:1px;width:64px;margin:16px auto 0;background:var(--ga-or-filet);opacity:.85}

/* ══ LES SURFACES ═════════════════════════════════════════════════════ */
.ga-carte{background:var(--ga-verre);border:1px solid var(--ga-filet);border-radius:var(--ga-r-carte);
  box-shadow:var(--ga-ombre),var(--ga-luisant);
  backdrop-filter:blur(9px) saturate(108%);-webkit-backdrop-filter:blur(9px) saturate(108%);
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s,border-color .28s}
.ga-carte:hover{transform:translateY(-4px);box-shadow:var(--ga-ombre-h),var(--ga-luisant);border-color:var(--ga-filet-fort)}
.ga-carte.ga-eteinte{background:var(--ga-eteint);border-color:var(--ga-filet);opacity:.72;box-shadow:none}
.ga-carte.ga-eteinte:hover{transform:none;box-shadow:none}

.ga-panneau{background:var(--ga-verre);border:1px solid var(--ga-filet-fort);border-radius:var(--ga-r-panneau);
  box-shadow:var(--ga-ombre-h),var(--ga-luisant)}
.ga-vitre{background:var(--ga-vitre);backdrop-filter:blur(16px) saturate(105%);
  -webkit-backdrop-filter:blur(16px) saturate(105%)}

/* ══ LES GESTES ═══════════════════════════════════════════════════════ */
/* Le lingot — UNE SEULE action principale par écran. */
.ga-lingot{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ga-sans);font-weight:700;font-size:14.5px;letter-spacing:.06em;
  padding:13px 28px;border-radius:12px;cursor:pointer;text-decoration:none;
  color:#3a2708!important;-webkit-text-fill-color:#3a2708;
  background:var(--ga-lingot);border:1px solid var(--ga-lingot-bord);
  box-shadow:0 6px 16px rgba(125,90,25,.28),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 6px rgba(120,86,20,.22);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.ga-lingot:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 10px 24px rgba(125,90,25,.36),inset 0 1px 0 rgba(255,255,255,.85)}

/* Le creux — les gestes secondaires. */
.ga-creux{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ga-sans);font-weight:500;font-size:13px;letter-spacing:.04em;
  padding:9px 16px;border-radius:10px;cursor:pointer;text-decoration:none;
  color:var(--ga-encre)!important;background:var(--ga-verre-creux);
  border:1px solid var(--ga-filet);box-shadow:none;
  transition:border-color .2s,background .2s,color .2s}
.ga-creux:hover{border-color:var(--ga-filet-fort);color:var(--ga-or-texte)!important}

/* Le nu — un lien qui ne pèse rien. */
.ga-nu{font-family:var(--ga-sans);font-size:13px;color:var(--ga-encre-3)!important;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ga-nu:hover{color:var(--ga-or-texte)!important;border-color:var(--ga-filet-fort)}

/* ══ LES CHAMPS ═══════════════════════════════════════════════════════ */
.ga-champ{background:var(--ga-champ)!important;border:1px solid var(--ga-filet)!important;
  color:var(--ga-encre)!important;border-radius:11px}
.ga-champ::placeholder{color:var(--ga-encre-3)!important;opacity:.9}
.ga-champ:focus{border-color:var(--ga-filet-fort)!important;outline:none;
  box-shadow:0 0 0 3px rgba(201,151,27,.14)!important}

/* ══ L'ASCENSEUR — doré, sur les deux thèmes ══════════════════════════ */
body.ga-pierre ::-webkit-scrollbar{width:11px;height:11px}
body.ga-pierre ::-webkit-scrollbar-track{background:transparent}
body.ga-pierre ::-webkit-scrollbar-thumb{border-radius:99px;
  background:linear-gradient(180deg,var(--ga-or-vif),var(--ga-or-profond));border:3px solid transparent;
  background-clip:padding-box}
body.ga-pierre{scrollbar-color:var(--ga-or) transparent;scrollbar-width:thin}

/* ══════════════════════════════════════════════════════════════════════════
   LES WIDGETS PARTAGÉS — l'assistance et le bandeau des cookies
   Le widget d'assistance (`giri-app.com/giri-assistance/widget.js`) s'injecte
   sur TOUTES les pages de l'espace élève et pose son propre décor : un panneau
   BRUN CHOCOLAT, dans les deux thèmes. Le jour, il écrivait en brun foncé
   dessus — « Retrouver mes accès » était illisible.
   ⛔ Son `<style>` est injecté en fin de body, donc APRÈS ces feuilles : il faut
      `!important` ET une spécificité supérieure (`#ga-menu a:not(#zz)` = 2 ID).
      On ne touche pas au widget lui-même : il sert aussi hors de l'Académie.
   ══════════════════════════════════════════════════════════════════════════ */
body.ga-pierre #ga-menu:not(#zz) a{
  background:var(--ga-verre)!important;
  border:1px solid var(--ga-filet)!important;
  box-shadow:var(--ga-ombre)!important;
  color:var(--ga-encre)!important;-webkit-text-fill-color:var(--ga-encre)!important}
body.ga-pierre #ga-menu:not(#zz) a:hover{border-color:var(--ga-filet-fort)!important}
body.ga-pierre #ga-menu:not(#zz) .tt{
  color:var(--ga-encre)!important;-webkit-text-fill-color:var(--ga-encre)!important;font-weight:600}
body.ga-pierre #ga-menu:not(#zz) .ts{
  color:var(--ga-encre-2)!important;-webkit-text-fill-color:var(--ga-encre-2)!important}
body.ga-pierre #ga-hint:not(#zz){
  background:var(--ga-verre)!important;border:1px solid var(--ga-filet)!important;
  box-shadow:var(--ga-ombre)!important;
  color:var(--ga-encre-2)!important;-webkit-text-fill-color:var(--ga-encre-2)!important}
body.ga-pierre #ga-hint:not(#zz) b{
  color:var(--ga-or-texte)!important;-webkit-text-fill-color:var(--ga-or-texte)!important}
/* La croix de fermeture reprend le creux de la maison. */
body.ga-pierre #ga-fab:not(#zz) .ga-close{
  background:var(--ga-verre-plat)!important;border:1px solid var(--ga-filet)!important;
  box-shadow:var(--ga-ombre)!important}

/* Le bandeau des cookies : il ouvre la visite, il porte la matière de la maison. */
body.ga-pierre #ga-cookie-banner:not(#zz){
  background:var(--ga-verre)!important;border-top:1px solid var(--ga-filet)!important;
  box-shadow:var(--ga-ombre-h)!important;
  backdrop-filter:blur(14px) saturate(105%)!important;-webkit-backdrop-filter:blur(14px) saturate(105%)!important}
body.ga-pierre #ga-cookie-banner:not(#zz) *{
  color:var(--ga-encre-2)!important;-webkit-text-fill-color:var(--ga-encre-2)!important}
body.ga-pierre #ga-cookie-banner:not(#zz) :is(b,strong){
  color:var(--ga-encre)!important;-webkit-text-fill-color:var(--ga-encre)!important}
body.ga-pierre #ga-cookie-banner:not(#zz) a{
  color:var(--ga-or-texte)!important;-webkit-text-fill-color:var(--ga-or-texte)!important}
body.ga-pierre #ga-cookie-banner:not(#zz) button{
  background:var(--ga-lingot)!important;border:1px solid var(--ga-lingot-bord)!important;
  color:#3a2708!important;-webkit-text-fill-color:#3a2708!important;
  box-shadow:0 5px 14px rgba(125,90,25,.24),inset 0 1px 0 rgba(255,255,255,.75)!important}

/* ══ LE VOILE DU JOUR — 31/08/2026 ═══════════════════════════════════════
   Vu le 31/08 : sur les pages du domaine, le marbre clair ne se VOYAIT pas.
   Deux voiles creme s'y empilaient -- celui de la charte (body::before) et
   celui de "marbre-academie.css" (body::after), injecte par le vhost APRES
   nos feuilles. Additionnes, ils montaient a ~0,72 d'opacite : la pierre
   disparaissait sous une teinte plate. La nuit, elle, n'en a qu'un -- c'est
   pour cela qu'elle etait magnifique et que le jour semblait fade.
   On ne retire pas le voile du domaine partout : seulement la ou la charte
   pose deja le sien (classe "ga-pierre"), et seulement de jour.
   RQ Specificite : body.ga-pierre[data-theme] (element+classe+attribut) bat
   body::after meme injecte apres -- seule facon de reprendre la main sans
   toucher a marbre-academie.css, qui sert aussi aux pages sans charte. */
body.ga-pierre[data-theme="marbre"]::after,
body.ga-pierre[data-theme="light"]::after,
body.ga-pierre[data-theme="sepia"]::after,
body.ga-pierre[data-theme="ocean"]::after,
/* ⛔⛔⛔ ET LA NUIT AUSSI — 01/09/2026, ordre de Maha : « le filtre grisatre qui
   survole quasiment toute la page ». Le raisonnement du 31/08 tenait pour vrai
   que « la nuit n'a qu'un voile ». C'est faux : les pages du portail posent
   LEUR PROPRE body::after, un voile CREME, en plus de celui de la charte --
   jusqu'a rgba(255,252,245,.48) sur /choisis-ton-prof et /qui-enseigne, .40 sur
   l'Arbre, .30 sur le Centre d'Examen. Sur le marbre clair il adoucit ; sur le
   marbre de NUIT il DELAVE : le bleu profond devient un gris plat, et la pierre
   disparait. Un voile clair n'a rien a faire au-dessus d'une pierre sombre.
   La nuit garde donc, elle aussi, sa pierre nue : le voile sombre est deja pose
   par la charte sur body::before.
   ⛔ Ne jamais reposer un voile creme en body::after sans l'eteindre en nuit. */
body.ga-pierre[data-theme="dark"]::after{
  background:none!important;background-image:none!important;background-color:transparent!important}

/* ══ UN NOM NE SE COUPE PAS — 31/08/2026 ═════════════════════════════════
   Vu sur la page des Professeurs en marbre de nuit : "Sand-rine Petit",
   "Marie Marti-corena", "Maitre Raya-hine". La cesure automatique traite un
   nom propre comme un mot ordinaire et le brise en deux -- c'est le nom de
   quelqu'un, il n'a pas de syllabes negociables. Aucun controle ne le voit :
   le contraste est bon, rien ne deborde, la page est "au vert".
   On coupe donc la cesure sur les titres et les noms, partout. */
body.ga-pierre :is(h1,h2,h3,h4,h5,.name,.nom,.titre,.title,
      [class*="-name"],[class*="-nom"],[class*="-titre"],[class*="-title"],
      [class*="prof"],[class*="auteur"],[class*="signature"]){
  hyphens:manual!important;-webkit-hyphens:manual!important;
  overflow-wrap:normal!important;word-break:normal!important}