/* =============================================================================
   shared.css — Thème global “Album des finissants”
   Palette: bleu nuit, argent, lueurs feutrées
   ========================================================================== */

/* -------------------- Variables de thème -------------------- */
:root{
  /* Couleurs */
  --bg-0: #0b1625;                 /* fond profond */
  --bg-1: #0f1a2b;                 /* header / surfaces */
  --bg-2: #14243a;                 /* cartes sombres */
  --glass: rgba(35, 50, 80, .42);  /* encadrés "verre" */
  --glass-strong: rgba(35, 50, 80, .58);

  --primary:   #e6ebf4;            /* texte principal (argent bleuté) */
  --secondary: #cfd6e3;            /* texte secondaire / éléments clairs */
  --muted-300: #93a1b5;            /* texte atténué */
  --muted-500: #6b778b;

  --accent-1: #b6c6e3;             /* lueurs / bordures */
  --accent-2: #2b4e7d;             /* bouton primaire hover */

  --success: #16a34a;
  --danger:  #dc2626;
  --warning: #f59e0b;
  --info:    #38bdf8;

  --border:        rgba(255,255,255,.12);
  --border-strong: rgba(191,219,254,.28);

  /* Effets */
  --shadow-1: 0 8px 22px rgba(0,0,0,.35);
  --shadow-2: 0 12px 30px rgba(0,0,0,.45);
  --shadow-3: 0 18px 48px rgba(0,0,0,.55);
  --backdrop: blur(10px);

  /* Rounds & spacing */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;

  --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 18px; --sp-5: 22px;

  /* Typo */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", Times, serif;
}

/* -------------------- Reset minimal & base -------------------- */
*{ box-sizing: border-box; }
html, body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--primary);
  background:
    radial-gradient(1200px 800px at 18% -10%, rgba(79,97,132,.22), transparent 65%),
    radial-gradient(900px 700px at 85% 10%, rgba(45,68,108,.18), transparent 70%),
    linear-gradient(180deg, #101d32, #0b1625 60%, #0a1422);
  background-attachment: fixed;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--secondary); text-decoration: none; }
a:hover{ color:#fff; text-decoration: underline; }

/* Conteneur global */
.container{
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 0 0 36px;
}

/* Utilitaires typographiques */
h1,h2,h3{ margin:0 0 8px; line-height:1.2; }
h1 .subtitle, h2 .subtitle{ color:var(--muted-300); font-weight:400; }
.muted{ color: var(--muted-300); }
.small{ font-size: 12px; }
.right{ text-align:right; }
.center{ text-align:center; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* -------------------- En-tête / barre supérieure -------------------- */
.committee-header, .dashboard-header, .tags-header, .upload-header{
  position: sticky; top:0; z-index:20;
  background: linear-gradient(180deg, rgba(22,40,66,.86), rgba(22,40,66,.55));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }

/* Carré logo (fallback + image) */
.logo{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  font-size:20px; font-weight:700;
  color:#0f1a2b;
  /* Style par défaut quand il n’y a PAS d’image dedans */
  background: linear-gradient(180deg, #e6ebf4, #cfd6e3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
  overflow:hidden;
}

/* Quand un <img> est présent → bord à bord, pas de halo */
.logo:has(img){ background: transparent; box-shadow:none; }
.logo img{
  width:100%; height:100%;
  object-fit: cover;        /* Remplit totalement le carré */
  border-radius: inherit;
  display:block;
}

.title{ font-weight:800; letter-spacing:.2px; font-family: var(--font-serif); }
.actions{ display:flex; gap:8px; }

/* Séparation visuelle header → contenu */
header + main.container{ margin-top:24px; }

/* -------------------- Boutons -------------------- */
.btn{
  --btn-bg: linear-gradient(180deg, #dfe6f2, #cfd6e3);
  --btn-fg: #0f1a2b;
  --btn-bd: rgba(255,255,255,.7);

  appearance:none; border:1px solid var(--btn-bd);
  color: var(--btn-fg); background: var(--btn-bg);
  padding:10px 14px; font-weight:700; border-radius:999px;
  box-shadow: 0 2px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.25);
  cursor:pointer; transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter:saturate(1.05); }
.btn:active{ transform: translateY(0); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.btn-outline{
  --btn-bg: rgba(255,255,255,.04);
  --btn-fg: var(--secondary);
  --btn-bd: var(--border-strong);
  color: var(--btn-fg); background: var(--btn-bg);
  box-shadow: none; backdrop-filter: var(--backdrop);
}
.btn-outline:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.35); }

.btn-ghost{ background:transparent; color:var(--secondary); border:1px dashed var(--border); }
.btn-ghost:hover{ border-style:solid; }

.btn-danger{
  --btn-bg: linear-gradient(180deg, #fecaca, #fda4a4);
  --btn-fg: #7f1d1d; --btn-bd: #fecaca;
  color:var(--btn-fg); background:var(--btn-bg); border-color:var(--btn-bd);
}
.btn-success{
  --btn-bg: linear-gradient(180deg, #bbf7d0, #86efac);
  --btn-fg: #064e3b; --btn-bd: #bbf7d0;
  color:var(--btn-fg); background:var(--btn-bg); border-color:var(--btn-bd);
}
.btn-sm{ padding:8px 12px; font-size:13px; }
.actions-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* -------------------- Formulaires -------------------- */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea{
  width:100%; color:var(--primary); font:inherit;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:10px 12px;
  outline:none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder, textarea::placeholder{ color:#8ea0b7; }
.input:focus, select:focus, textarea:focus{
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(125,162,224,.25);
  background: rgba(255,255,255,.08);
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field-actions{ display:flex; align-items:end; gap:8px; }
.form-message{ margin-top:8px; font-size:13px; }
.form-message.error{ color:#fecaca; }
.form-message.success{ color:#bbf7d0; }

/* -------------------- Cartes / panneaux -------------------- */
.card, .photo-card{
  background: var(--glass);
  backdrop-filter: var(--backdrop);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow:hidden;
}
.card{ padding: var(--sp-4); }
.card + .card{ margin-top:12px; }
.card:hover, .photo-card:hover{
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* KPI */
.cards{ display:grid; gap:16px; }
.kpi-cards .card-title{ font-weight:800; letter-spacing:.2px; }
.kpi-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.kpi{
  background: rgba(35,50,80,.45);
  border:1px solid var(--border);
  border-radius:12px; padding:12px;
}
.kpi .label{ color:var(--muted-300); font-size:12px; }
.kpi .value{ font-weight:800; font-size:22px; }

/* -------------------- Grilles & listes génériques -------------------- */
.grid-cards{ display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.list{ display:grid; gap:10px; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; margin:12px 0; color:var(--muted-300); }

/* Cartes photo */
.photo-card .thumb{ display:block; line-height:0; background:#0f1a2b; }
.photo-card img{ width:100%; height:auto; display:block; }
.photo-card .meta{ padding:12px; }
.photo-card .line{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.photo-card .title{ font-weight:700; }
.photo-card .sub{ color:var(--muted-300); font-size:12px; display:flex; gap:6px; margin-top:4px; }
.photo-card .actions{ display:flex; gap:8px; margin-top:10px; }

/* -------------------- Badges -------------------- */
.badge{
  display:inline-block; font-size:12px;
  padding:2px 8px; border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid var(--border);
  color:var(--secondary);
}
.badge.green{ background:#16a34a; border-color:#15803d; color:#fff; }
.badge.red{ background:#dc2626; border-color:#991b1b; color:#fff; }
.badge.orange{ background:#f59e0b; border-color:#b45309; color:#0f1a2b; }
.badge.blue{ background:#1d4ed8; border-color:#1e40af; color:#fff; }

/* -------------------- Tableaux -------------------- */
.table{
  width:100%; border-collapse:collapse; font-size:14px;
  background: rgba(35,50,80,.28);
  border:1px solid var(--border); border-radius: var(--radius); overflow:hidden;
}
.table th, .table td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.table th{ text-align:left; color:var(--muted-300); font-weight:600; }
.table tr:hover td{ background: rgba(255,255,255,.03); }

/* =======================================================================
   MODALES
   ==================================================================== */
@keyframes modal-fade { from{opacity:0} to{opacity:1} }
@keyframes modal-scale { from{ transform:scale(.96) translateY(6px); opacity:0 } to{ transform:scale(1) translateY(0); opacity:1 } }

.modal-open{ overflow:hidden; }
.modal-backdrop{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(7,12,20,.62); backdrop-filter: blur(2px);
  padding:16px; z-index:1000; animation: modal-fade .18s ease both;
}
.modal-backdrop.show{ display:grid; }

.modal{
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  border:1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  width: min(940px, 96vw);
  max-height:90vh;
  box-shadow: var(--shadow-3);
  color:var(--primary);
  display:flex; flex-direction:column;
  animation: modal-scale .18s ease both;
}
.modal--sm{ width:min(520px,96vw); }
.modal--md{ width:min(820px,96vw); }
.modal--lg{ width:min(1100px,96vw); }

.modal-header, .modal-actions{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px;
}
.modal-header{ border-bottom:1px solid var(--border); }
.modal-actions{ border-top:1px solid var(--border); }
.modal-title{ font-weight:800; font-family:var(--font-serif); }
.modal-close{ border:none; background:transparent; color:var(--secondary); cursor:pointer; padding:6px 8px; border-radius:10px; }
.modal-close:hover{ background: rgba(255,255,255,.06); }
.modal-body{ padding:14px; overflow:auto; }
.modal-body--grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .modal-body--grid{ grid-template-columns:1fr; } }
.modal--danger{ border-color: rgba(239,68,68,.35); }
.modal--danger .modal-header{ border-color: rgba(239,68,68,.25); }
.modal--success{ border-color: rgba(34,197,94,.35); }
.modal--info{ border-color: rgba(56,189,248,.35); }
.modal .preview img{ max-width:100%; border-radius:12px; box-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* =======================================================================
   TOASTS — notifications
   ==================================================================== */
@keyframes toast-slide-in   { from{ transform: translateY(8px); opacity:.0 } to{ transform:none; opacity:1 } }
@keyframes toast-slide-out  { to  { transform: translateY(8px); opacity:.0 } }
@keyframes toast-progress   { from{ transform: scaleX(1) } to{ transform: scaleX(0) } }

.toast{
  position: fixed; z-index: 1100;
  display: grid; gap: 12px; max-width: 92vw;
  pointer-events: none;
}
.toast.bottom-right { right: 18px; bottom: 18px; }
.toast.bottom-left  { left: 18px;  bottom: 18px; }
.toast.top-right    { right: 18px; top: 18px; }
.toast.top-left     { left: 18px;  top: 18px; }
.toast.top-center   { left: 50%;   top: 18px;    transform: translateX(-50%); }
.toast.bottom-center{ left: 50%;   bottom: 18px; transform: translateX(-50%); }

.toast-item{
  pointer-events:auto; position:relative;
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:10px;
  min-width:280px; max-width:480px; padding:12px 14px 10px;
  background: var(--glass-strong);
  border: 1px solid var(--border-strong);
  border-radius: 16px; color: var(--primary);
  backdrop-filter: var(--backdrop); box-shadow: var(--shadow-1);
  animation: toast-slide-in .18s ease both;
}
.toast-item.hide{ animation: toast-slide-out .16s ease both; }
.toast-item::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  border-radius:16px 0 0 16px; background: rgba(191,219,254,.25);
}
.toast-icon{
  width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border); font-size:16px;
}
.toast-body{ display:grid; gap:4px; }
.toast-title{ font-weight:800; letter-spacing:.2px; font-family: var(--font-serif); }
.toast-desc{ font-size:13px; color: var(--secondary); line-height:1.35; }
.toast-close{
  appearance:none; border:none; background:transparent; color:var(--secondary);
  cursor:pointer; padding:4px 6px; border-radius:10px;
}
.toast-close:hover{ background: rgba(255,255,255,.08); }
.toast-progress{
  grid-column:1 / -1; height:3px; background: rgba(255,255,255,.10);
  border-radius:999px; overflow:hidden; margin-top:2px;
}
.toast-progress > span{
  display:block; width:100%; height:100%;
  background: linear-gradient(90deg, #9bb7ff, #7ea7ff);
  transform-origin:left center; animation: toast-progress linear forwards;
}
.toast-item.success{ border-color: rgba(34,197,94,.35); box-shadow: 0 10px 28px rgba(7,38,17,.45); }
.toast-item.error  { border-color: rgba(239,68,68,.35); box-shadow: 0 10px 28px rgba(49,7,7,.45); }
.toast-item.warn   { border-color: rgba(245,158,11,.35); box-shadow: 0 10px 28px rgba(48,35,5,.45); }
.toast-item.info   { border-color: rgba(56,189,248,.35); box-shadow: 0 10px 28px rgba(8,33,48,.45); }
.toast-item.success .toast-icon{ background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.28); }
.toast-item.error   .toast-icon{ background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.28); }
.toast-item.warn    .toast-icon{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); }
.toast-item.info    .toast-icon{ background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.28); }

/* -------------------- État vide -------------------- */
.empty{ text-align:center; color:var(--primary); }
.empty.card{
  background: rgba(35,50,80,.42);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:28px 18px;
}

/* -------------------- Helpers -------------------- */
.hidden{ display:none!important; }
.badge + .badge{ margin-left:6px; }
.right .btn + .btn, .actions .btn + .btn{ margin-left:6px; }

@media (max-width:900px){
  .header-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .actions{ flex-wrap:wrap; }
}

/* =======================================================================
   INPUT FILE
   ==================================================================== */
input[type="file"].input{
  background: rgba(255,255,255,.04);
  border:1px dashed var(--border-strong);
  padding:8px;
}
input[type="file"].input::file-selector-button{
  appearance:none;
  border:1px solid rgba(255,255,255,.72);
  color:#0f1a2b;
  background: linear-gradient(180deg, #bcd2ff, #99b8f5);
  padding:9px 14px; margin-right:12px; border-radius:999px; font-weight:800; cursor:pointer;
  box-shadow: 0 2px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
input[type="file"].input:hover::file-selector-button{ transform:translateY(-1px); filter:saturate(1.05); }
input[type="file"].input:active::file-selector-button{ transform:translateY(0); }

/* =======================================================================
   DROPZONE
   ==================================================================== */
.dropzone{
  margin-top:14px; padding:28px 18px; border-radius: var(--radius-lg);
  border:2px dashed var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  box-shadow: var(--shadow-1);
  text-align:center; cursor:pointer;
  transition: border-color .15s ease, box-shadow .2s ease, background .2s ease, transform .08s ease;
}
.dropzone:hover{ border-color:rgba(191,219,254,.45); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.dropzone .dz-inner .big{ font-weight:800; font-size:20px; letter-spacing:.2px; }
.dropzone .dz-inner .small{ margin-top:4px; color:var(--muted-300); }
.dropzone.is-dragover{
  background:
    radial-gradient(600px 260px at 50% -10%, rgba(125,162,224,.25), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color: rgba(125,162,224,.7);
  box-shadow: 0 0 0 3px rgba(125,162,224,.25), var(--shadow-2);
  transform: translateY(-1px);
}

/* =======================================================================
   FILE QUEUE (horizontale)
   ==================================================================== */
.queue{ display:grid; gap:12px; margin-top:16px; }
.q-item{
  background: var(--glass); border:1px solid var(--border);
  border-radius: var(--radius); padding:10px 12px; box-shadow: var(--shadow-1);
}
.q-row{
  display:grid; grid-template-columns: 160px 1fr auto;
  align-items:center; gap:14px;
}
.q-thumb{
  width:160px; height:110px; border-radius:10px; overflow:hidden;
  background: rgba(255,255,255,.04); border:1px solid var(--border);
}
.q-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.q-meta{ display:grid; gap:8px; }
.q-title{ display:grid; gap:8px; grid-template-columns: 1fr 220px; }
.q-sub{ color: var(--muted-300); font-size:12px; display:flex; gap:6px; align-items:center; }
.q-meta .progress{
  height:6px; background: rgba(255,255,255,.08);
  border:1px solid var(--border); border-radius:999px; overflow:hidden;
}
.q-meta .progress > div{
  height:100%; width:0%;
  background: linear-gradient(90deg, #9bb7ff, #75a0ff);
  transition: width .2s ease;
}
.q-actions{ display:flex; gap:8px; align-self:center; }
@media (max-width:900px){
  .q-row{ grid-template-columns: 120px 1fr; align-items:start; gap:12px; }
  .q-actions{ grid-column: 2 / -1; justify-self:end; }
  .q-title{ grid-template-columns: 1fr; }
  .q-thumb{ width:120px; height:90px; }
}

/* =======================================================================
   AUTH (login/register) — pages centrées
   ==================================================================== */
.page-auth{
  min-height:100vh; display:grid; place-items:center; padding:32px 16px;
}
.auth-wrapper{ width:min(960px, 96vw); margin:0 auto; }
.auth-card{
  background: var(--glass); backdrop-filter: var(--backdrop);
  border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); padding:28px 24px; display:grid; gap:18px;
}
.auth-header{
  display:flex; align-items:center; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--border);
}
.auth-header .logo{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:24px; font-weight:800; color:#0f1a2b;
  background: linear-gradient(180deg, #e6ebf4, #cfd6e3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
  overflow:hidden;
}
/* logo auth: si image, pas de halo */
.auth-header .logo:has(img){ background:transparent; box-shadow:none; }
.auth-header .logo img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }

.auth-title{ font:800 26px/1 var(--font-serif); margin:0; }
.auth-subtitle{ margin:2px 0 0 0; color:var(--muted-300); font-size:13px; }

.page-auth form{ display:grid; gap:12px; }
.page-auth .field{ display:grid; gap:6px; }
.page-auth .field label{ font-weight:600; }
.page-auth input[type="email"], .page-auth input[type="password"]{
  width:100%; color:var(--primary); font:inherit;
  background: rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:12px 12px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.page-auth input::placeholder{ color:#8ea0b7; }
.page-auth input:focus{
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(125,162,224,.25);
  background: rgba(255,255,255,.08);
}
.page-auth .error{ min-height:16px; font-size:12px; color:#fecaca; }
.page-auth .options{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.page-auth .remember{ display:inline-flex; align-items:center; gap:8px; user-select:none; }
.page-auth .remember input[type="checkbox"]{ width:16px; height:16px; accent-color:#9bb7ff; }
.page-auth .forgot{ color:var(--secondary); font-size:13px; }
.page-auth .forgot:hover{ color:#fff; text-decoration:underline; }

.btn-primary{
  --btn-bg: linear-gradient(180deg, #cfe0ff, #abc7ff);
  --btn-fg: #0f1a2b; --btn-bd: rgba(255,255,255,.75);
  color: var(--btn-fg); background: var(--btn-bg); border:1px solid var(--btn-bd);
  box-shadow: 0 2px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.25);
}
.btn-submit{ width:100%; padding:12px 14px; font-weight:800; border-radius:999px; }

.page-auth .form-message{ margin-top:4px; font-size:13px; }
.page-auth .form-message[aria-live="polite"].error{ color:#fecaca; }
.page-auth .form-message[aria-live="polite"].success{ color:#bbf7d0; }

.page-auth .alt{ text-align:center; color:var(--muted-300); margin:8px 0 0 0; }
.page-auth .alt a{ color:var(--secondary); }
.page-auth .alt a:hover{ color:#fff; text-decoration:underline; }

@media (max-width:720px){
  .auth-card{ padding:22px 18px; }
  .auth-header .logo{ width:46px; height:46px; font-size:21px; }
  .auth-title{ font-size:22px; }
  .page-auth .options{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* =======================================================================
   RÉGLAGES — aperçu logo
   ==================================================================== */
#logoPreview{
  display:flex; align-items:center; gap:12px; padding:12px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius: var(--radius);
}
#logoPreview .logo{
  width:48px; height:48px; border-radius:12px; overflow:hidden; flex:none;
  /* Par défaut gradient si pas d'image */
  background: linear-gradient(180deg, #e6ebf4, #cfd6e3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
#logoPreview .logo:has(img){ background:transparent; box-shadow:none; }
#logoPreview .logo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
/* ============================================================================
   ACCUEIL (page-home) — header & hero alignés sur les autres pages
   ========================================================================== */

/* Header public = même traitement que .committee-header & co. */
.site-header{
  position: sticky; top:0; z-index:20;
  background: linear-gradient(180deg, rgba(22,40,66,.86), rgba(22,40,66,.55));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

/* Même gabarit que .header-inner (rythme et alignements) */
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0;
}

/* Marque (identique à .brand) */
.site-header .brand{ display:flex; align-items:center; gap:12px; }

/* Carré logo : gradient par défaut, image bord à bord s’il y en a une */
.site-header .logo{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  font-size:20px; font-weight:700; color:#0f1a2b;
  background: linear-gradient(180deg, #e6ebf4, #cfd6e3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
  overflow:hidden;
}
.site-header .logo:has(img){ background:transparent; box-shadow:none; }
.site-header .logo img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }

/* Texte de marque (cohérent avec la typo globale) */
.brand-text .app-name{ font-weight:800; letter-spacing:.2px; font-family:var(--font-serif); margin:0; }
.brand-text .tagline{ margin:2px 0 0; color:var(--muted-300); font-size:13px; }

/* Actions */
.nav-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Séparation visuelle header → contenu, cohérente avec le reste */
.site-header + .hero{ margin-top:24px; }

/* -------------------- HERO -------------------- */
.hero{
  position:relative; isolation:isolate;
  padding: clamp(28px, 6vw, 54px) 0;
}

/* grille 2 colonnes comme ailleurs (cards / uploads) */
.hero-grid{
  display:grid; gap:18px;
  grid-template-columns: 1.2fr .8fr;   /* texte / encart */
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
}

/* Texte principal */
.hero-title{
  font: 800 clamp(22px, 3vw, 28px)/1.1 var(--font-serif);
  margin: 0 0 8px;
}
.hero-lead{
  color: var(--secondary);
  font-size: clamp(15px, 1.8vw, 17px);
  margin: 0 0 12px;
}
.hero-points{
  margin: 0 0 14px 0; padding-left: 18px;
  color: var(--muted-300);
}
.hero-points li{ margin: 6px 0; }
.cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* Carte latérale (réutilise .card, mais on l’ancre visuellement) */
.hero-card .card{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.hero-card .card h3{
  margin:0 0 8px; font-weight:800; letter-spacing:.2px; font-family:var(--font-serif);
}

/* -------------------- Footer site -------------------- */
.site-footer{
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(15,26,43,.35), rgba(15,26,43,.15));
  padding: 18px 0 28px;
  margin-top: clamp(24px, 6vw, 48px);
}
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.footer-nav{ display:flex; gap:12px; flex-wrap:wrap; }
.footer-nav a{ color: var(--muted-300); }
.footer-nav a:hover{ color:#fff; }
.copyright{ margin:0; color: var(--muted-500); font-size:12px; }

/* -------------------- Petites adaptations responsives -------------------- */
@media (max-width:900px){
  .site-header .container{ flex-direction:column; align-items:flex-start; gap:10px; }
  .nav-actions{ flex-wrap:wrap; }
}
/* ============================================================================
   STICKY FOOTER (toutes pages dont Accueil)
   ========================================================================== */
html, body{ height:100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Les entêtes restent en haut (même avec position:sticky) */
.site-header,
.committee-header,
.dashboard-header,
.tags-header,
.upload-header{
  flex: 0 0 auto;
}

/* Le contenu prend l'espace disponible */
body > main{
  flex: 1 0 auto;
}

/* Le footer colle en bas quand le contenu est court */
.site-footer{
  flex: 0 0 auto;
  margin-top: auto !important; /* override l’ancienne marge */
}
/* ===== Admin — Réglages : menus déroulants (select) ===== */
.page-admin select.input{
  padding-right:36px;                 /* place pour la flèche */
  appearance:none;
  background: #142137;                /* fond plus contrasté que les inputs */
  border:1px solid rgba(255,255,255,.16);
  color:#e5edf7;
  border-radius:12px;
  color-scheme: dark;

  /* flèche personnalisée */
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23e6ebf4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;
}

.page-admin select.input:hover{
  background-color:#17243d;
  border-color:rgba(255,255,255,.22);
}

.page-admin select.input:focus{
  border-color:rgba(148,163,184,.7);
  box-shadow:0 0 0 3px rgba(125,162,224,.28);
}

/* Couleur du fond des options du menu */
.page-admin select.input option{
  background-color:#0f172a;
  color:#e5edf7;
}

/* Scrollbar douce dans la liste d’options (si supportée) */
@supports selector(::-webkit-scrollbar){
  .page-admin select.input::-webkit-scrollbar{ width:10px; }
  .page-admin select.input::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:8px; }
  .page-admin select.input::-webkit-scrollbar-track{ background: transparent; }
}