/* ==========================================================================
   Arcademia : variables du design (seul fichier de couleurs, polices et tailles), clair et sombre.
   Changer de charte = changer ce fichier (et le dossier marque/ pour le logo, marque.js pour le nom).
   Les autres feuilles (style.css, prof.css…) n'utilisent que ces variables.
   ========================================================================== */

/* Polices hébergées sur notre serveur (licence SIL OFL 1.1, texte complet à côté de chaque fichier dans polices/).
   Sous-ensembles : latin pour Archivo et Archivo Black ; DotGothic16 = latin + les quelques mots japonais du décor. */
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("/polices/Archivo-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("/polices/Archivo-SemiBold-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700 900; font-display: swap; src: url("/polices/Archivo-Bold-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo Black"; font-weight: 400; font-display: swap; src: url("/polices/ArchivoBlack-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "DotGothic16"; font-weight: 400; font-display: swap; src: url("/polices/DotGothic16-Regular-sous-ensemble.woff2") format("woff2"); }
/* Police de l'inconnue (x, y…) : Tinos Italique, équivalent de Times New Roman, identique sur tous les appareils. */
@font-face { font-family: "Inconnue"; font-style: italic; font-weight: 400; src: url("/polices/Tinos-Italic-latin.woff2") format("woff2"); }

:root {
  /* Palette de la charte (bande arc-en-ciel : seules couleurs vives) */
  --creme: #F1E6CC;
  --nuit: #1A1613;
  --rouge: #D93A32;
  --orange: #EC7A2A;
  --jaune: #F0B92E;
  --vert-bleu: #1C9A8E;
  --bleu: #1B5E86;

  /* Thèmes (domaines) : couleurs provisoires de la charte */
  --theme-nombres: var(--rouge);
  --theme-geometrie: var(--bleu);
  --theme-donnees: var(--jaune);
  --theme-fonctions: var(--orange);
  --theme-informatique: var(--vert-bleu);
  /* Paliers des badges (cadre de l'hexagone) : métaux et gemmes, identiques en sombre */
  --palier-bronze: #B26A3C;
  --palier-argent: #B8C0C7;
  --palier-amethyste: #8A4FC0;
  --palier-saphir: #2F6FCF;
  --palier-dore: #F0B92E;

  /* Polices */
  --police-texte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-titre: "Archivo Black", "Arial Black", Impact, sans-serif;
  --police-pixel: "DotGothic16", "Courier New", monospace; /* score, chrono, mots japonais : jamais pour un énoncé */
  --police-inconnue: "Inconnue", "Times New Roman", Times, serif;

  /* Formes : ombre dure décalée, sans flou ; coins peu arrondis (maquette validée) */
  --rayon: 10px;
  --rayon-petit: 6px;
  --trait-fort: 2.5px;
  --decalage: 4px;
  --bande: linear-gradient(to bottom, var(--rouge) 0 20%, var(--orange) 20% 40%, var(--jaune) 40% 60%, var(--vert-bleu) 60% 80%, var(--bleu) 80% 100%); /* 5 filets horizontaux, comme le logo : à ancrer à un bord */

  /* Logo (marque/logo.svg) : hauteur d'en-tête et rapport largeur / hauteur des deux versions */
  --logo-hauteur: 34px;
  --logo-rapport-compact: 4.615;
  --logo-rapport: 3.6;

  /* ---- Mode clair ---- */
  --fond: var(--creme);
  --carte: #F7EFDC;          /* surface posée sur le fond (jamais de blanc pur) */
  --encre: #1B1916;
  --discret: #5E564A;
  --trait: #CBBE9F;
  --doux: #E6D8B8;
  --colonne: #E3D6BA;        /* colonne de gauche de l'écran d'exercice */
  --ombre-dure: #D2C5A6;
  --fiche: #2B2621;          /* boîtes sombres du score et du chrono */
  --accent: var(--bleu);
  --accent-encre: var(--creme);
  --entrainement: #2F7D3E;   /* types d'activité : teintes provisoires */
  --evaluation: var(--orange);
  --remediation: var(--bleu);
  --sur-entrainement: var(--creme);
  --sur-evaluation: var(--encre);
  --sur-remediation: var(--creme);
  --juste: #2F7D3E;
  --faux: var(--rouge);
  --juste-fond: #DCE3C2;
  --faux-fond: #F1D2C0;
  --partiel: var(--orange);
  --selection: color-mix(in srgb, var(--jaune) 45%, var(--fond)); /* réponse choisie, avant validation */
  --action: #2F7D3E;         /* bouton Valider */
  --action-encre: var(--creme);
  --centre: var(--rouge);
  --cite: var(--vert-bleu);
  --score-clarte: 78%;
  --sur-couleur: var(--creme);
  --rang-facile: #2F7D3E;
  --rang-difficile: var(--rouge);
  --pointille: var(--discret);
  --logo-encre: var(--encre);
  /* Bande de combat (bas de l'écran d'exercice) */
  --ciel: #E9D9AE;
  --relief: #D9C592;
  --relief-2: #CDB67C;
  --sol: #DCCBA0;
  --sol-motif: #C9B686;
  /* Objets de la console (cartouches, étagères, manette) : plastique, creux, reflet */
  --console-corps: #DCCFB1;
  --console-panneau: #B7AA8C;
  --console-creux: #8F8468;
  --console-reflet: #F8F1DF;
  --console-face: #CBBE9F;   /* face avant de la console (accueil) */
  --decor-forme: #2B2621;    /* formes concentriques de l'accueil */
  --feu-blanc: #F8F1DF;      /* cœur du feu du dragon (identique en sombre) */
  --decor-pale: #DACBA4;     /* manette très pâle du décor (page du milieu) */
  --decor-trait: #BCAC82;
  /* Coffre (coffre.js) : bois, métal et objets ; le cadre utilise --encre */
  --coffre-bois: #A8642E; --coffre-bois-clair: #C98445; --coffre-bois-sombre: #6E3E1E;
  --coffre-metal: #CBBE9F; --coffre-metal-sombre: #8F8468; --coffre-acier: #B9C4C9; --coffre-acier-clair: #E4EBEC;
  --coffre-tissu: var(--bleu); --coffre-tissu-clair: #3F86B5; --coffre-or: var(--jaune); --coffre-interieur: #2B2621;
  /* Dragon : masque des restes de queue de l'image voisine (colonnes 58 à 63, et la zone à droite du corps, lignes 30 à 57) */
  --dragon-masque: polygon(0 0, 90.6% 0, 90.6% 46.9%, 81.2% 46.9%, 81.2% 89.1%, 90.6% 89.1%, 90.6% 100%, 0 100%);
  --colonne-eleve: color-mix(in srgb, var(--console-panneau) 22%, var(--fond));
  color-scheme: light;
}

/* ---- Mode sombre : brun très foncé, textes et décors en crème, bande inchangée ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: var(--nuit); --carte: #241E19; --encre: var(--creme); --discret: #B5AA94; --trait: #4A4036; --doux: #2E2620;
    --colonne: #211B17; --ombre-dure: #050403; --fiche: #0E0C0A;
    --accent: var(--jaune); --accent-encre: var(--nuit);
    --entrainement: #4E9E5C; --remediation: #3F86B5; --sur-entrainement: var(--nuit); --sur-remediation: var(--creme);
    --juste: #5BAF6A; --faux: #EE6A60; --juste-fond: #22301F; --faux-fond: #3A1F1A;
    --selection: color-mix(in srgb, var(--jaune) 32%, var(--fond)); --action: #2F7D3E;
    --score-clarte: 28%; --sur-couleur: var(--nuit); --rang-facile: #5BAF6A;
    --ciel: #2A2019; --relief: #3A2D22; --relief-2: #4A3A2D; --sol: #241C16; --sol-motif: #33261C;
    --console-corps: #4A4036; --console-panneau: #352E27; --console-creux: #221D18; --console-reflet: #6A5C4E; --console-face: #3D352C; --decor-forme: #4A4036; --decor-pale: #3A312A; --decor-trait: #5A4D3F;
    --coffre-bois: #B7712F; --coffre-bois-clair: #D69550; --coffre-bois-sombre: #7B4624; --coffre-metal: #6A5C4E; --coffre-metal-sombre: #4A4036; --coffre-interieur: #0E0C0A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: var(--nuit); --carte: #241E19; --encre: var(--creme); --discret: #B5AA94; --trait: #4A4036; --doux: #2E2620;
  --colonne: #211B17; --ombre-dure: #050403; --fiche: #0E0C0A;
  --accent: var(--jaune); --accent-encre: var(--nuit);
  --entrainement: #4E9E5C; --remediation: #3F86B5; --sur-entrainement: var(--nuit); --sur-remediation: var(--creme);
  --juste: #5BAF6A; --faux: #EE6A60; --juste-fond: #22301F; --faux-fond: #3A1F1A;
  --selection: color-mix(in srgb, var(--jaune) 32%, var(--fond)); --action: #2F7D3E;
  --score-clarte: 28%; --sur-couleur: var(--nuit); --rang-facile: #5BAF6A;
  --ciel: #2A2019; --relief: #3A2D22; --relief-2: #4A3A2D; --sol: #241C16; --sol-motif: #33261C;
    --console-corps: #4A4036; --console-panneau: #352E27; --console-creux: #221D18; --console-reflet: #6A5C4E; --console-face: #3D352C; --decor-forme: #4A4036; --decor-pale: #3A312A; --decor-trait: #5A4D3F;
  --coffre-bois: #B7712F; --coffre-bois-clair: #D69550; --coffre-bois-sombre: #7B4624; --coffre-metal: #6A5C4E; --coffre-metal-sombre: #4A4036; --coffre-interieur: #0E0C0A;
  color-scheme: dark;
}

/* ---------- Éléments communs ---------- */

/* Logo compact en haut à gauche (logo.js le pose dans chaque .logo-marque) */
.logo-marque { flex: none; display: inline-flex; align-items: center; color: var(--encre); text-decoration: none; }
.logo-marque svg { display: block; height: var(--logo-hauteur); width: calc(var(--logo-hauteur) * var(--logo-rapport-compact)); }
.logo-marque.grand svg { height: auto; width: min(440px, 80vw); aspect-ratio: var(--logo-rapport); }

/* Mots japonais du décor : rares, petits, discrets, jamais utiles à la compréhension */
.jp { font-family: var(--police-pixel); font-weight: 400; font-size: 0.8em; letter-spacing: 0.05em; opacity: 0.5; text-transform: none; }

/* Boutons : trait d'encre, ombre dure décalée ; le bouton s'enfonce au clic */
.btn { font-family: var(--police-texte); font-weight: 700; border: var(--trait-fort) solid var(--encre); border-radius: var(--rayon); padding: 8px 20px; background: var(--fond); color: var(--encre); box-shadow: 3px 3px 0 var(--ombre-dure); text-decoration: none; transition: transform 0.06s, box-shadow 0.06s; }
.btn:hover:not(:disabled) { background: var(--doux); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ombre-dure); }
.btn.principal { background: var(--action); color: var(--action-encre); border-color: var(--encre); font-family: var(--police-titre); font-weight: 400; letter-spacing: 0.03em; }
.btn.principal:hover:not(:disabled) { background: color-mix(in srgb, var(--action) 85%, var(--encre)); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Boutons-icônes de la barre du haut (maison, thème, déconnexion) : carré à trait d'encre */
.bouton-icone, .bouton-theme { flex: none; width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; border: var(--trait-fort) solid var(--encre); border-radius: 8px; background: none; color: var(--encre); }
.bouton-icone:hover, .bouton-theme:hover { background: var(--doux); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Petits monstres (monstres.js) : première image de la bande de 16 images de 64 px, zoom entier, pieds sur le bas de la vignette */
.mini-monstres { display: inline-flex; align-items: flex-end; gap: 0; }
.mini-monstre { --t: 32px; flex: none; display: inline-block; width: var(--t); height: var(--t); background-repeat: no-repeat; background-size: calc(var(--t) * 16) var(--t); background-position: 0 0; image-rendering: pixelated; }
.mini-monstre[hidden], .mini-monstres[hidden] { display: none; }
.mini-monstres-plus { align-self: center; font-size: 0.72rem; font-weight: 700; margin-left: 2px; }