/* =========================================================================
   RECYTHAL — feuille de style commune. Identité « Marine » choisie par
   Stéfan le 15/08/2026 parmi trois propositions : bleu marine classique sur
   fond ivoire, barre latérale claire, titres de page à empattements (voir
   --font-serif) pour un rendu plus habillé qu'une police unique. Mêmes
   conventions de construction que Couaridouc : jetons CSS, .btn/.btn-sec
   uniques.
   TOUJOURS CLAIR PAR DÉFAUT, quel que soit le réglage sombre/clair de
   l'appareil : demande explicite de Stéfan le 15/08/2026, qui préfère le
   clair et ne veut pas que le site bascule tout seul selon le système. Pas
   de @media(prefers-color-scheme) ici, contrairement à Couaridouc — ce
   dernier a un vrai bouton Clair/Sombre/Automatique dans Paramètres, que
   Recythal n'a pas encore. Le bloc [data-theme="dark"] reste prêt pour le
   jour où ce bouton sera construit, mais rien ne le déclenche aujourd'hui.
   ========================================================================= */
:root{
  color-scheme: light;
  --page:#f7f6f2;
  --surface-1:#ffffff;
  --text-primary:#1c2129;
  --text-secondary:#5c6472;
  --text-muted:#868f9c;
  --border:#e2ddd0;
  --border-strong:#cdc6b4;
  --accent:#1f3a5f;
  --on-accent:#ffffff;
  --accent-soft:#e6ecf3;
  --danger:#c0392b;
  --hover-wash:rgba(31,58,95,.07);
  --radius:12px;
  --radius-sm:8px;
  --side-bg:#eef1f4;
  --side-border:#dde2e8;
  --side-text:#3d4552;
  --side-active-bg:#e6ecf3;
  --side-active-text:#1f3a5f;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#12161c;
  --surface-1:#1a2029;
  --text-primary:#eef1f4;
  --text-secondary:#aab3c0;
  --text-muted:#737e8c;
  --border:#2a3140;
  --border-strong:#3a4356;
  --accent:#7fa8d6;
  --on-accent:#0b1420;
  --accent-soft:#1c2c40;
  --danger:#e0685a;
  --hover-wash:rgba(127,168,214,.12);
  --side-bg:#0f131a;
  --side-border:#242b38;
  --side-text:#c3cbd6;
  --side-active-bg:#1c2c40;
  --side-active-text:#8fb4de;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page);color:var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.45;
}
a{color:var(--accent);}
/* Titres de page à empattements, le reste en sans-serif : une touche plus
   habillée sans perdre en netteté sur les tableaux et les formulaires. */
h1{font-family:var(--font-serif);letter-spacing:-.01em;}
h2,h3{font-family:inherit;}

/* --- Structure générale : barre latérale + contenu --- */
.layout{display:flex;min-height:100vh;}
.side{width:220px;flex:none;background:var(--side-bg);border-right:1px solid var(--side-border);
  padding:18px 12px;display:flex;flex-direction:column;gap:2px;}
.side .marque{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;font-weight:700;
  font-size:16px;color:var(--side-active-text);}
.side a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--side-text);text-decoration:none;font-size:14px;}
.side a:hover{background:rgba(0,0,0,.04);}
.side a.actif{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600;}

/* Icônes du menu : SVG en trait, monochromes (mêmes conventions que Couaridouc,
   pas d'emoji dans la barre). currentColor suit la couleur du lien : elles
   deviennent accentuées sur l'entrée active sans règle séparée. */
.nav-ico{width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.main{flex:1;min-width:0;}
.app{max-width:1080px;margin:0 auto;padding:28px 24px 72px;}

/* --- Menu mobile : barre fine en haut, tiroir coulissant à GAUCHE ---
   Même principe que Couaridouc (nav.php + shared.css) : sur petit écran, la
   barre latérale ne devient plus une rangée horizontale qui pousse le
   contenu, elle glisse depuis la gauche par-dessus, déclenchée par un
   bouton ☰. Demande explicite de Stéfan le 16/08/2026, "idem Couaridouc". */
.nav-barre{display:none;}
.nav-fond{display:none;}
@media(max-width:820px), (max-height:500px){
  .layout{flex-direction:column;}
  .nav-barre{
    display:flex;align-items:center;gap:10px;
    position:fixed;top:0;left:0;right:0;height:52px;z-index:60;
    background:var(--side-bg);border-bottom:1px solid var(--side-border);padding:0 12px;
  }
  .nav-burger{
    border:1px solid var(--side-border);background:var(--hover-wash);color:var(--side-active-text);
    border-radius:var(--radius-sm);font-size:18px;line-height:1;padding:6px 11px;cursor:pointer;font-family:inherit;
  }
  .nav-barre img{width:26px;height:26px;object-fit:cover;border-radius:3px;}
  .nav-barre .titre{font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--side-active-text);}

  .side{
    position:fixed;top:0;left:0;bottom:0;width:250px;z-index:80;
    overflow-y:auto;border-right:1px solid var(--side-border);border-bottom:none;
    padding:18px 12px;transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:2px 0 16px rgba(0,0,0,.18);flex-direction:column;
  }
  .side.ouvert{transform:translateX(0);}
  .side .marque{display:flex;}

  .nav-fond.visible{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;}

  .main{padding-top:52px;}
}
@media (prefers-reduced-motion: reduce){ .side{transition:none;} }

header.top h1{font-size:26px;margin:0;}
header.top p{margin:4px 0 0;color:var(--text-secondary);font-size:14px;}
.subtle{font-size:13px;color:var(--text-secondary);}
.aide{font-size:12px;color:var(--text-muted);line-height:1.45;margin:4px 0 0;}
.msg{font-size:12px;color:var(--text-secondary);}
.msg.err{color:var(--danger);font-weight:600;}
.msg.ok{color:var(--accent);font-weight:600;}

/* --- Boutons : source unique --- */
.btn{
  display:inline-block;box-sizing:border-box;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:8px 12px;font-size:14px;line-height:1.2;
  background:var(--surface-1);color:var(--text-primary);
  font-family:inherit;text-decoration:none;cursor:pointer;
}
.btn:hover{background:var(--hover-wash);}
.btn:disabled{opacity:.55;cursor:default;}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600;}
.btn.primary:hover{filter:brightness(1.08);background:var(--accent);}
.btn.small{padding:6px 10px;font-size:13px;}
.btn.danger{color:var(--danger);}
.btn-sec{background:var(--surface-1);color:var(--text-primary);border:1px solid var(--border);
  border-radius:6px;padding:8px 13px;font-size:13px;cursor:pointer;font-family:inherit;}
.btn-sec:hover{background:var(--hover-wash);}
.btn-sec.danger{color:var(--danger);}

/* --- Champs de formulaire : source unique --- */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.field label{font-size:12.5px;color:var(--text-secondary);}
.champ{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 11px;
  font-size:14px;background:var(--surface-1);color:var(--text-primary);font-family:inherit;}
.champ-groupe{display:flex;flex-direction:column;gap:3px;}
.champ-groupe label{font-size:11px;color:var(--text-secondary);}
.champ-groupe input,.champ-groupe select{border:1px solid var(--border);border-radius:6px;padding:7px 9px;
  font-size:14px;background:var(--surface-1);color:var(--text-primary);}

/* Bouton "afficher le mot de passe" — dès le premier jour cette fois.
   padding-right en !important : une règle de page (ex. .login-card input)
   a la même spécificité (0,1,1) que .pwd-wrap input et gagnait à la place
   en cascade, annulant la marge réservée au bouton — le bouton recouvrait
   alors la zone de saisie du mot de passe, la rendant quasi impossible à
   cliquer. Bug signalé par Stéfan le 16/08/2026 (Couaridouc et Recythal). */
.pwd-wrap{position:relative;}
.pwd-wrap input{width:100%;padding-right:38px !important;}
/* VRAIE CAUSE trouvée le 16/08/2026, après que le correctif du padding n'a
   rien changé : Edge pose SON PROPRE bouton "afficher le mot de passe"
   à l'intérieur de tout champ type="password" (pseudo-élément ::-ms-reveal),
   par-dessus notre bouton, dans le même espace. Aucun padding ne peut
   l'esquiver, il faut le désactiver explicitement pour ne garder que le nôtre. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{display:none;}
.pwd-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;font-size:16px;padding:6px 8px;color:var(--text-muted);line-height:1;}
.pwd-toggle:hover{color:var(--text-primary);}

/* --- Cartes, encadrés --- */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;}
.stat-tile{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;}
.stat-tile .label{font-size:12px;color:var(--text-secondary);}
.stat-tile .value{font-size:22px;font-weight:600;margin-top:2px;}
.stat-tile .sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
/* UNE TUILE QUI MENE QUELQUE PART LE DIT (18/08/2026, point 47 de la note 66).
   Elle devient un <a> : le clavier et les lecteurs d'écran la voient alors
   comme un lien, ce qu'un <div> muni d'un onclick ne donne jamais. Les couleurs
   du texte sont reprises explicitement, sinon le bleu de lien recouvrirait la
   hierarchie label / valeur / sous-titre. */
a.stat-tile{display:block;color:inherit;text-decoration:none;
  transition:border-color .12s, background .12s;}
a.stat-tile:hover{border-color:var(--accent);background:var(--accent-soft);}
a.stat-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
a.stat-tile .label,a.stat-tile .value,a.stat-tile .sub{color:inherit;}
a.stat-tile .label{color:var(--text-secondary);}
a.stat-tile .sub{color:var(--text-muted);}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.encadre{background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-size:13px;}
.encadre.discret{background:var(--surface-1);}
.encadre-titre{font-weight:600;margin-bottom:6px;}

/* =========================================================================
   LES EXPLICATIONS SONT SOUS UN VOLET, REPLIÉ PAR DÉFAUT.
   Demande de Stéfan du 18/08/2026 (note 67, point 16), posée pour LES DEUX
   applications : même composant et même comportement que sur Couaridouc, aux
   couleurs de Recythal. Les textes d'explication restent où ils sont, le plus
   souvent en bas de page, mais ne prennent plus la place tant qu'on ne les
   ouvre pas.

   `<details>` NATIF, sans une ligne de JavaScript : le clavier, la recherche du
   navigateur et les lecteurs d'écran le connaissent déjà, et l'état ne survit
   pas au changement de page, ce qui est exactement « repliées par défaut ».

   Ne PAS y mettre : les alertes et les aides d'une ligne sous un champ.
   ========================================================================= */
/* En tête d'écran, sous le titre de la page (même choix que sur Couaridouc,
   18/08/2026) : replié, le volet ne fait qu'une ligne et se rattache tout seul
   à l'écran qu'il explique. En bas de page, il flottait sans qu'on sache de
   quoi il parlait. La marge vient d'ici, jamais d'un style en ligne. */
details.explique{
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:6px 0 20px;
  font-size:13px;
  color:var(--text-secondary);
}
details.explique > summary{
  cursor:pointer;
  padding:11px 16px;
  display:flex;align-items:center;gap:8px;
  font-weight:600;font-size:13px;
  color:var(--accent);
  list-style:none;
}
details.explique > summary::-webkit-details-marker{display:none;}
details.explique > summary::before{
  content:"\25B8";
  display:inline-block;font-size:13px;line-height:1;
  transition:transform .15s ease;
}
details.explique[open] > summary::before{transform:rotate(90deg);}
details.explique > summary:hover{color:var(--text-primary);}
details.explique > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
details.explique > :not(summary){margin-left:16px;margin-right:16px;}
details.explique > :not(summary):last-child{margin-bottom:14px;}
details.explique p{margin:0 0 8px;}
details.explique a{color:var(--accent);}
@media (prefers-reduced-motion: reduce){
  details.explique > summary::before{transition:none;}
}

/* --- Tableaux --- */
.table-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;}
table.grille{width:100%;border-collapse:collapse;font-size:13.5px;}
table.grille th{text-align:left;font-weight:600;color:var(--text-secondary);font-size:12px;
  padding:8px 10px;border-bottom:1px solid var(--border-strong);}
table.grille td{padding:8px 10px;border-bottom:1px solid var(--border);}
table.grille td.num, table.grille th.num{text-align:right;font-variant-numeric:tabular-nums;}