/* ============================================================================
   jetons.css — Jetons de style d'ÉlèveOS, thème « Lagon ».

   Repris de l'esprit de Mini_OS/css/tokens.css (Prof_OS) et de la maquette
   retenue par le professeur le 19/09/2026 (TEMP/maquettes/piste-a.html) :
   couleurs plus franches, formes plus rondes, verre dépoli comme les docks de
   Géométria.

   Un thème = ce fichier. Le thème « Cahier » viendra plus tard sous
   css/themes/, sans toucher à la disposition (voir DOCUMENTATION_ELEVEOS.md
   §12).
   ========================================================================== */

:root {
  /* ── Couleurs ─────────────────────────────────────────────────────────── */
  --lagon:       #12b3c7;
  --lagon-fonce: #0a7f96;
  --profond:     #093b57;
  --corail:      #ff6a55;
  --menthe:      #37d6a6;
  --encre:       #0d2a3a;
  --encre-douce: #4a6b7c;

  /* Teintes des applications : celles de Prof_OS (Mini_OS/js/icons.js et
     apps.json — Géométria 210, Progy 95, MyLIVE 15), rendues plus franches.
     Un élève et son professeur reconnaissent ainsi les mêmes icônes. */
  --app-dossier-de: oklch(0.76 0.15 240);  --app-dossier-a: oklch(0.55 0.18 245);
  --app-notes-de:   oklch(0.86 0.16 95);   --app-notes-a:   oklch(0.74 0.17 80);
  --app-calc-de:    oklch(0.64 0.04 250);  --app-calc-a:    oklch(0.42 0.05 255);
  --app-geo-de:     oklch(0.76 0.15 210);  --app-geo-a:     oklch(0.56 0.16 215);
  --app-progy-de:   oklch(0.76 0.16 110);  --app-progy-a:   oklch(0.57 0.16 110);
  --app-seance-de:  oklch(0.74 0.16 15);   --app-seance-a:  oklch(0.57 0.19 20);
  /* AK3 : la teinte 285 de Prof_OS (apps.json), pour que l'icone soit la meme
     des deux cotes du bureau. */
  --app-ak3-de:     oklch(0.74 0.16 285);  --app-ak3-a:     oklch(0.55 0.18 290);

  /* ── Verre dépoli ─────────────────────────────────────────────────────── */
  --verre:      rgba(255, 255, 255, 0.62);
  --verre-fort: rgba(255, 255, 255, 0.80);
  --flou:       blur(20px);
  --bord:       1px solid rgba(255, 255, 255, 0.65);

  /* ── Rayons et ombres ─────────────────────────────────────────────────── */
  --r-grand:  22px;
  --r-moyen:  16px;
  --r-petit:  12px;
  --ombre:       0 10px 30px rgba(9, 59, 87, 0.22);
  --ombre-haute: 0 22px 55px rgba(9, 59, 87, 0.33);

  /* ── Typographie ──────────────────────────────────────────────────────── */
  --police: "Segoe UI Variable", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* ── Mesures du bureau ────────────────────────────────────────────────── */
  --barre-h: 56px;
  --cible:   44px;   /* jamais moins : c'est la taille d'un doigt */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  color: var(--encre);
  background: linear-gradient(170deg, #bfeaf4 0%, #7fd6e6 38%, #2ba7c4 100%);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ── Fond d'écran : le lagon, sa houle et son soleil ──────────────────────── */
.fond { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.fond svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fond .soleil {
  position: absolute; top: 6%; right: 9%; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d8, #ffd08a 60%, rgba(255, 208, 138, 0) 72%);
}

/* La houle ne bouge que si l'appareil ne demande pas moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .fond .vague   { animation: houle 11s ease-in-out infinite alternate; }
  .fond .vague-2 { animation-duration: 15s; animation-direction: alternate-reverse; }
  .fond .vague-3 { animation-duration: 19s; }
  @keyframes houle { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.bouton {
  min-height: var(--cible); padding: 13px 22px; border: 0; border-radius: var(--r-moyen);
  cursor: pointer; font: 800 16px/1 var(--police);
  background: linear-gradient(150deg, var(--lagon), var(--lagon-fonce)); color: #fff;
  box-shadow: 0 8px 18px rgba(10, 127, 150, 0.35);
}
.bouton:disabled { opacity: .6; cursor: default; }
.bouton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }