/* Thème partagé GAIA — mêmes tokens que le menu applicatif (public/index.php).
   Toute page de public/ doit inclure ce fichier pour rester visuellement cohérente. */

:root{
  --ink:#1B2430;
  --muted:#5A6472;
  --paper:#F1F4F8;
  --sidebar-bg:#10182B;
  --sidebar-bg-alt:#182036;
  --sidebar-text:#E7E5DE;
  --sidebar-text-dim:#9AA3B8;
  --brass:#C08A2E;
  --indigo-accent:#6C6FA8;
  --border:#E3E6E9;
  --input-border:#D8DCE1;
  --danger-bg:#FBEAE7;
  --danger-text:#8C2F22;
  --danger-border:#F1C6BC;
  --info-bg:#EAF1F4;
  --info-text:#2F5F7D;
  --info-border:#C9DEE6;
  --transition-fast:160ms ease;
}
@media (prefers-reduced-motion: reduce){ :root{ --transition-fast:0ms; } }

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
}
a{ color:#3B6E8F; }
h1,h2,h3{ color:var(--ink); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brass); color:#1B1400; padding:.6em 1em; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

/* --- Gabarit "carte centrée" (connexion, mot de passe oublié, activation...) --- */
.auth-shell{
  display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px;
}
.auth-card{
  background:#fff;
  border:1px solid rgba(16,24,43,.08);
  border-radius:10px;
  box-shadow:0 1px 3px rgba(16,24,43,.06), 0 8px 24px rgba(16,24,43,.05);
  max-width:400px; width:100%;
  padding:32px 28px;
}
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.auth-brand .mark{
  width:34px; height:34px; border-radius:8px;
  background:var(--sidebar-bg); color:var(--sidebar-text);
  display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700; font-size:.7rem; flex:0 0 auto;
}
.auth-brand .txt .name{ font-weight:700; font-size:.95rem; line-height:1.2; }
.auth-brand .txt .sub{ font-size:.75rem; color:var(--muted); line-height:1.2; }

.auth-title{ font-size:1.05rem; font-weight:700; margin:0 0 6px; }
.auth-desc{ font-size:.86rem; color:var(--muted); margin:0 0 20px; line-height:1.45; }

.field{ margin-bottom:14px; display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:.78rem; font-weight:600; color:var(--ink); }
.field input, .field select{
  font:inherit; padding:9px 10px; border:1px solid var(--input-border);
  border-radius:6px; background:#fff; color:var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field input:focus-visible{
  outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass);
}
.field-check{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.field-check input{ width:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; border-radius:6px; border:1px solid transparent;
  font:inherit; font-weight:600; font-size:.88rem; cursor:pointer;
  text-decoration:none; transition:background var(--transition-fast), border-color var(--transition-fast);
}
.btn-primary{ background:var(--sidebar-bg); color:var(--sidebar-text); width:100%; }
.btn-primary:hover{ background:var(--sidebar-bg-alt); }
.btn-primary:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.btn-secondary{ background:#fff; color:var(--ink); border-color:var(--border); }
.btn-secondary:hover{ background:#F7F8F7; }

.auth-links{ margin-top:16px; font-size:.85rem; text-align:center; }
.auth-links a{ text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }

.alert{ padding:10px 12px; border-radius:6px; font-size:.85rem; margin-bottom:16px; line-height:1.4; }
.alert ul{ margin:4px 0 0 18px; padding:0; }
.alert-error{ background:var(--danger-bg); color:var(--danger-text); border:1px solid var(--danger-border); }
.alert-info{ background:var(--info-bg); color:var(--info-text); border:1px solid var(--info-border); }

.code-block{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem; background:#F4F5F3; border:1px solid var(--border);
  border-radius:6px; padding:10px; word-break:break-all; margin:12px 0;
}

/* --- Gabarit "contenu applicatif" (écrans ouverts dans l'iframe du menu, ex: admin) --- */
.contenu-shell{ max-width:1040px; margin:0 auto; padding:28px 32px 60px; }
.page-header{ margin-bottom:22px; }
.page-header h1{ font-size:1.25rem; font-weight:700; margin:0 0 4px; }
.page-header p{ margin:0; color:var(--muted); font-size:.88rem; }

/* Grands écrans (résolution native PC courante, 1920px) : la zone de contenu profite de la
   place disponible plutôt que de rester plafonnée à 1040px avec de larges marges vides —
   surtout utile pour les listes (tickets...), qui gagnent en confort de lecture. N'affecte que
   les écrans larges ; tablettes, petits écrans et mobile restent inchangés (règles séparées,
   déjà definies par ailleurs pour max-width: 640px). */
@media (min-width: 1440px){
  .contenu-shell{ max-width:1600px; }
}

.panel{
  background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:20px 22px; margin-bottom:24px;
}
.panel h2{ font-size:.95rem; margin:0 0 16px; }

table.data-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.data-table th{
  text-align:left; padding:9px 12px; font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--muted);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.data-table td{ padding:9px 12px; border-top:1px solid #EDEFEF; }
table.data-table tr:first-child td{ border-top:none; }

/* Défilement horizontal pour un tableau trop large pour son panneau, plutôt que de le laisser
   déborder du cadre (surtout utile sur des tableaux à beaucoup de colonnes ou sur mobile). */
.table-scroll{ overflow-x:auto; margin:0 -22px; padding:0 22px; }
.table-scroll table.data-table{ min-width:640px; }
@media (max-width: 640px){
  .table-scroll{ margin:0 -16px; padding:0 16px; }
}

.tag{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.tag-ok{ background:#E4EFE4; color:#3C6B3C; }
.tag-off{ background:#F5E7E4; color:#8C4A34; }
.tag-neutral{ background:#EEF0EF; color:var(--muted); }

.form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px 18px; }

.topbar-simple{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px; border-bottom:1px solid var(--border); background:#fff;
}
.topbar-simple .name{ font-weight:600; font-size:.9rem; }
.topbar-simple a{ font-size:.85rem; text-decoration:none; }
.topbar-simple a:hover{ text-decoration:underline; }

.avatar{
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  border:1px solid var(--border); flex:0 0 auto; background:#F4F5F3;
}

.logo-auth{ height:40px; width:auto; display:block; }
.logo-secours{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  background:var(--sidebar-bg); color:var(--sidebar-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700; font-size:.7rem;
}

@media (max-width: 640px){
  .contenu-shell{ padding:18px 16px 48px; }
  .page-header h1{ font-size:1.1rem; }
  .panel{ padding:16px; }
  table.data-table th, table.data-table td{ padding:8px; font-size:.82rem; }
}