/* =====================================================================
   COULEURS ET VARIABLES — fichier unique, à remplacer d'un bloc.
   Les pastels servent aux fonds et aux accents, JAMAIS au texte.
   Le texte est en bleu marine (clair) ou en blanc cassé (sombre).
   ===================================================================== */

:root {
  /* Palette de l'école */
  --bleu:   #6A9BCB;
  --vert:   #8DBA82;
  --jaune:  #F5C953;
  --peche:  #F4B07A;
  --corail: #E8787A;
  --rose:   #F2A7B8;
  --lilas:  #B9A3D9;
  --marine: #2F4A68;

  /* Une couleur par rubrique (l'arc-en-ciel du logo comme fil conducteur) */
  --r-accueil:     var(--bleu);
  --r-agenda:      var(--corail);
  --r-contacts:    var(--vert);
  --r-infos:       var(--lilas);
  --r-documents:   var(--jaune);
  --r-formulaires: var(--peche);
  --r-horaires:    var(--rose);
  --r-pedagogie:   var(--vert);
  --r-eleves:      var(--jaune);
  --r-equipe:      var(--lilas);
  --r-absences:    var(--peche);
  --r-acces:       var(--marine);

  /* Catégories de l'agenda */
  --cat-reunion:   var(--bleu);
  --cat-sortie:    var(--vert);
  --cat-formation: var(--lilas);
  --cat-conge:     var(--jaune);
  --cat-evenement: var(--rose);
  --cat-echeance:  var(--corail);

  /* Thème clair */
  --fond:          #F7F9FC;
  --surface:       #FFFFFF;
  --surface-2:     #EEF3F8;
  --texte:         var(--marine);
  --texte-doux:    #566B82;
  --bordure:       #DCE4EE;
  --base-teinte:   #FFFFFF;   /* couleur avec laquelle on mélange les pastels */
  --teinte:        24%;       /* intensité des fonds pastel */
  --teinte-forte:  45%;
  --bouton-fond:   var(--marine);
  --bouton-texte:  #FFFFFF;
  --danger:        #A3262A;
  --focus:         var(--marine);
  --ombre:         0 2px 12px rgba(47, 74, 104, 0.08);

  /* Formes et typographie */
  --police: "Nunito", "Segoe UI Rounded", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --rayon: 18px;
  --rayon-petit: 12px;

  color-scheme: light;
}

/* Thème sombre : suit le réglage de l'appareil, sauf si on force le clair */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:          #121B26;
    --surface:       #1B2735;
    --surface-2:     #243345;
    --texte:         #E9EFF6;
    --texte-doux:    #AEBCCC;
    --bordure:       #31445A;
    --base-teinte:   #1B2735;
    --teinte:        30%;
    --teinte-forte:  48%;
    --bouton-fond:   #E9EFF6;
    --bouton-texte:  #1B2735;
    --danger:        #C8474B;
    --focus:         #F5C953;
    --ombre:         0 2px 12px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

/* Thème sombre forcé (bouton de la maquette) */
:root[data-theme="dark"] {
  --fond:          #121B26;
  --surface:       #1B2735;
  --surface-2:     #243345;
  --texte:         #E9EFF6;
  --texte-doux:    #AEBCCC;
  --bordure:       #31445A;
  --base-teinte:   #1B2735;
  --teinte:        30%;
  --teinte-forte:  48%;
  --bouton-fond:   #E9EFF6;
  --bouton-texte:  #1B2735;
  --danger:        #C8474B;
  --focus:         #F5C953;
  --ombre:         0 2px 12px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}