/* =========================================================================
   RECYTHAL — feuille de style commune. Identité visuelle volontairement
   différente de couaridouc.fr (accent bleu-vert au lieu d'indigo, barre
   latérale claire au lieu de sombre, sans-serif partout), mais mêmes
   conventions de construction : jetons CSS, .btn/.btn-sec uniques, thème
   sombre sélectionné (pas un inversion automatique), tout le reste des
   composants communs vit ici et nulle part ailleurs.
   ========================================================================= */
:root{
  color-scheme: light;
  --page:#f6f8f7;
  --surface-1:#ffffff;
  --text-primary:#10201d;
  --text-secondary:#48594f;
  --text-muted:#84948b;
  --border:#dde3e0;
  --border-strong:#c3cdc7;
  --accent:#0f7a6b;
  --on-accent:#ffffff;
  --accent-soft:#e2f2ee;
  --danger:#c0392b;
  --hover-wash:rgba(15,122,107,.07);
  --radius:12px;
  --radius-sm:8px;
  --side-bg:#eef2f0;
  --side-border:#dde3e0;
  --side-text:#3a4b43;
  --side-active-bg:#d7ece6;
  --side-active-text:#0f7a6b;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --page:#0e1512;
    --surface-1:#16201c;
    --text-primary:#f1f5f3;
    --text-secondary:#b6c4bc;
    --text-muted:#7d8d85;
    --border:#26332d;
    --border-strong:#34443c;
    --accent:#28ab96;
    --on-accent:#06130f;
    --accent-soft:#163530;
    --danger:#e0685a;
    --hover-wash:rgba(40,171,150,.12);
    --side-bg:#141d19;
    --side-border:#26332d;
    --side-text:#c4d1ca;
    --side-active-bg:#173731;
    --side-active-text:#3fc3ac;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0e1512;
  --surface-1:#16201c;
  --text-primary:#f1f5f3;
  --text-secondary:#b6c4bc;
  --text-muted:#7d8d85;
  --border:#26332d;
  --border-strong:#34443c;
  --accent:#28ab96;
  --on-accent:#06130f;
  --accent-soft:#163530;
  --danger:#e0685a;
  --hover-wash:rgba(40,171,150,.12);
  --side-bg:#141d19;
  --side-border:#26332d;
  --side-text:#c4d1ca;
  --side-active-bg:#173731;
  --side-active-text:#3fc3ac;
}

*{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);}
h1,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;}
@media(max-width:820px){
  .layout{flex-direction:column;}
  .side{width:100%;flex-direction:row;overflow-x:auto;padding:10px;border-right:none;border-bottom:1px solid var(--side-border);}
  .side .marque{display: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. */
.pwd-wrap{position:relative;}
.pwd-wrap input{width:100%;padding-right:38px;}
.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;}
.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;}

/* --- 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;}