/* =============================================================================
   Theme « Marine »

   Rail de navigation bleu nuit, fond bleu tres pale, cartes blanches.
   Le vert est reserve a deux choses : l'entree de menu active et l'action
   principale. Il guide l'oeil au lieu de decorer.

   Le rouge et l'ambre restent la propriete exclusive des etats critiques :
   une alerte doit se voir avant tout le reste, elle ne peut donc pas partager
   la couleur d'un bouton d'action.
   ========================================================================== */

:root {
  --fond: #eef4fb;
  --surface: #ffffff;
  --surface-2: #f4f8fd;
  --bordure: #d3e3f2;
  --texte: #0f2c52;
  --texte-doux: #5c7b9c;

  /* Le vert porte l'action. */
  --accent: #14805a;
  --accent-doux: #dff3e9;

  --ok: #0d6b48;
  --ok-doux: #dff3e9;
  --alerte: #c2392c;
  --alerte-doux: #fbe6e4;
  --attention: #9a6512;
  --attention-doux: #fdf1dd;

  --ombre: 0 1px 2px rgba(15, 44, 82, .06), 0 10px 24px rgba(15, 44, 82, .07);
  --rayon: 10px;
  --rayon-carte: 12px;

  /* Propres au theme. */
  --rail: #0f2c52;
  --rail-2: #17406f;
  --rail-texte: #b9cee5;
  --rail-doux: #7192b8;
  --vert-vif: #1fa971;
  --sur-vert: #05271a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #08172a;
    --surface: #102540;
    --surface-2: #16304f;
    --bordure: #22456d;
    --texte: #dfebf8;
    --texte-doux: #8fabc9;

    --accent: #35d08a;
    --accent-doux: #10362a;

    --ok: #5fd6a0;
    --ok-doux: #10362a;
    --alerte: #ff8f7d;
    --alerte-doux: #3a1a22;
    --attention: #e0b055;
    --attention-doux: #33280f;

    --ombre: 0 1px 2px rgba(0, 0, 0, .45);

    --rail: #06132a;
    --rail-2: #0f2c52;
    --rail-texte: #9fbcda;
    --rail-doux: #6486ad;
    --sur-vert: #04271b;
  }
}

/* ------------------------------------------------------ Rail de navigation */

nav.menu {
  background: var(--rail);
  border-right-color: var(--rail);
}

nav.menu button { color: var(--rail-texte); }
nav.menu button:hover { background: var(--rail-2); color: #fff; }

nav.menu button.actif {
  background: var(--vert-vif);
  color: var(--sur-vert);
  font-weight: 600;
}

nav.menu .groupe { color: var(--rail-doux); opacity: 1; }

/* ------------------------------------------------------------- Ajustements */

header.barre .marque { color: var(--texte); }

/* Le bouton principal porte le vert vif ; l'accent sert au reste de l'interface
   dans une nuance plus sombre, lisible sur fond blanc. */
button.bouton.principal {
  background: var(--vert-vif);
  border-color: var(--vert-vif);
  color: var(--sur-vert);
}

.tuile .valeur { color: var(--texte); }

@media (max-width: 820px) {
  nav.menu { border-bottom-color: var(--rail-2); }
}