/* SCS SUBMIT — feuille de style unique.
   Identité d'ERAD, relevée sur eradsn.org (assets/css/main.css) : mêmes couleurs, mêmes polices, mêmes usages.
   Règle : aucune couleur en dur dans une page, uniquement var(--...).

   Sommaire : 1. polices · 2. jetons · 3. base · 4. éléments communs · 5. connexion et inscription
              6. page d'accueil · 7. mise en page connectée · 8. tableau de bord · 9. tableaux
              10. messages et animations · 11. erreurs · 12. petits écrans */

/* ---------- 1. Polices (servies par le site, sans appel à un autre site) ---------- */

/* Titres : EB Garamond, de la même famille que la Cormorant Garamond d'ERAD, mais avec des accents
   dessinés normalement (le circonflexe très haut de Cormorant faisait croire à un accent mal placé). */
@font-face { font-family: 'EB Garamond'; src: url('../fonts/eb-garamond.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }

/* ---------- 2. Jetons (noms d'ERAD entre parenthèses) ---------- */

:root {
  --navy: #0B1F3A;            /* --nv  : titres, bouton principal, fonds sombres */
  --navy-2: #162F52;          /* --nv2 : survol, étiquettes */
  --forest: #0C2D18;          /* fin des dégradés sombres d'ERAD */
  --green: #1A9E52;           /* --gr  : accent, bouton d'appel, libellés */
  --green-2: #22C468;         /* --gr2 : vert clair sur fond sombre */
  /* Vert d'ERAD assombri avec son marine (70 / 30) : pour tout vert qui porte du texte sur fond clair.
     Contraste ≥ 4,8 sur tous les fonds clairs du site, 5,5 en texte blanc (WCAG AA = 4,5).
     Le vert d'origine reste pour les éléments graphiques (icônes, filets, points). */
  --green-text: #16784B;
  --green-text-hover: #146B48;
  --green-bg: rgba(26, 158, 82, 0.08);   /* --gbg : fond des icônes, puces */
  --green-line: rgba(26, 158, 82, 0.22);
  --sand: #F7F5F0;            /* --sd  : sections et cartes secondaires */
  --white: #FFFFFF;
  --text: #1C2B3A;
  --muted: #5E7080;
  --line: rgba(11, 31, 58, 0.1);          /* --bd */
  --tint-blue: #ECF1F9;
  --tint-green: #E5F3EC;
  --tint-blue-2: #EEF3FA;

  --success: #22C468;
  --success-text: #15803D;
  --warning: #F5A623;
  --danger: #EF4444;
  --danger-text: #B91C1C;

  --role-professeur: #1A9E52;
  --role-etudiant: #4E9AF1;
  --role-chercheur: #9C27B0;
  --role-partenaire: #F5A623;

  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, 0.78);
  --on-dark-muted: rgba(255, 255, 255, 0.55);
  --on-dark-line: rgba(255, 255, 255, 0.12);
  --on-dark-hover: rgba(255, 255, 255, 0.07);
  --backdrop: rgba(11, 31, 58, 0.45);

  --r-btn: 7px;
  --r: 12px;                  /* --r  */
  --r-lg: 20px;               /* --r2 */
  --shadow-1: 0 4px 20px rgba(11, 31, 58, 0.08);    /* --s1 */
  --shadow-2: 0 12px 40px rgba(11, 31, 58, 0.13);   /* --s2 */
  --shadow-3: 0 24px 64px rgba(11, 31, 58, 0.18);   /* --s3 */
  --shadow-btn: 0 4px 16px rgba(11, 31, 58, 0.2);
  --shadow-green: 0 4px 14px rgba(26, 158, 82, 0.28);

  --font-display: 'EB Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --dark-gradient: linear-gradient(148deg, var(--navy) 0%, var(--navy-2) 55%, var(--forest) 100%);
  --light-gradient: linear-gradient(148deg, var(--tint-blue) 0%, var(--tint-green) 52%, var(--tint-blue-2) 100%);

  --nav-height: 68px;
  --sidebar-open: 264px;
  --sidebar-closed: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 3. Base ---------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); }

body {
  margin: 0;
  font: 15px/1.65 var(--font-body);
  background: var(--white);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18;
  color: var(--navy); margin: 0; text-wrap: balance;
}
/* Mot mis en valeur dans un titre, comme sur eradsn.org. */
h1 em, h2 em { font-style: normal; color: var(--green-text); }
p { margin: 0; }
a { color: var(--navy); }
[x-cloak] { display: none !important; }

:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--green) 25%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Lien d'évitement : visible seulement au clavier, il saute la navigation. */
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: var(--r-btn);
  background: var(--navy); color: var(--on-dark); font-weight: 600; text-decoration: none; transition: top 0.15s;
}
.skip-link:focus { top: 16px; }

/* Libellé en capitales, vert : la « signature » typographique d'ERAD. */
.eyebrow, .label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--green-text);
}
.label { color: var(--muted); letter-spacing: 0.08em; }

/* ---------- 4. Éléments communs ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: 2px solid transparent; border-radius: var(--r-btn);
  font: 600 14px var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--navy); color: var(--on-dark); box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--navy-2); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); }
.btn-accent { background: var(--green-text); color: var(--on-dark); box-shadow: var(--shadow-green); }
.btn-accent:hover { background: var(--green-text-hover); }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.25); color: var(--on-dark-soft); }
.btn-ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }
.btn-danger { background: var(--white); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger-text); }
.btn-danger:hover { border-color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn-block { width: 100%; padding: 13px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.field input, .field textarea, select.input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r-btn);
  font: 15px var(--font-body); background: var(--white); color: var(--text); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input[type='file'] { padding: 9px 12px; color: var(--muted); font-size: 14px; }
.field input[type='file']::file-selector-button {
  margin-right: 12px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--navy); font: 600 13px var(--font-body); cursor: pointer; transition: border-color 0.15s;
}
.field input[type='file']::file-selector-button:hover { border-color: var(--navy); }
.field input:focus, .field textarea:focus, select.input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--danger-text); }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.field-optional { font-weight: 400; color: var(--muted); }
.field-password { position: relative; }
.field-password input { padding-right: 44px; }
.field-password button {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; border-radius: 4px; cursor: pointer; color: var(--muted); padding: 2px; display: flex;
}

.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--r-btn); font-size: 14px; border: 1px solid; }
.alert-error { background: color-mix(in srgb, var(--danger) 7%, var(--white)); border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger-text); }
.alert-warning { background: color-mix(in srgb, var(--warning) 10%, var(--white)); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--navy); }

/* Étiquette de rôle ou de statut : forme des « tags » d'ERAD, couleur selon le rôle ou le statut. */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px;
  font: 700 11px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--badge-color, var(--navy-2)) 50%, var(--navy));
  background: color-mix(in srgb, var(--badge-color, var(--navy)) 12%, transparent);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--badge-color, var(--navy-2)); }
.role-professeur { --badge-color: var(--role-professeur); }
.role-etudiant { --badge-color: var(--role-etudiant); }
.role-chercheur { --badge-color: var(--role-chercheur); }
.role-partenaire { --badge-color: var(--role-partenaire); }
.statut-en_attente { --badge-color: var(--warning); }
.statut-actif { --badge-color: var(--success); }
.statut-suspendu { --badge-color: var(--danger); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: color-mix(in srgb, var(--badge-color, var(--navy)) 50%, var(--navy));
  background: color-mix(in srgb, var(--badge-color, var(--navy)) 14%, var(--white));
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--navy)) 30%, transparent);
}

.identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.identity-text { min-width: 0; }
/* Dans un tableau, un e-mail trop long est coupé (…) au lieu d'élargir la colonne. */
.table .identity { max-width: 250px; }
.identity-name { font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-email { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.muted { color: var(--muted); }

/* Carré d'icône vert pâle (« sico » d'ERAD). */
.icon-box {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--green-bg); color: var(--green);
}

.panel { overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 21px; }
.panel-head a { font-size: 13px; font-weight: 600; color: var(--green-text); text-decoration: none; }
.panel-head a:hover { text-decoration: underline; }

.empty { padding: 36px 22px; text-align: center; color: var(--muted); }
.empty .icon-box { margin: 0 auto 12px; width: 48px; height: 48px; border-radius: 50%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 40px;
  background: var(--white); border: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.chip strong { font: 700 17px var(--font-display); color: var(--navy); }
a.chip { text-decoration: none; transition: border-color 0.15s, background 0.15s; }
a.chip:hover { border-color: var(--navy); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--on-dark-soft); }
.chip.is-active strong { color: var(--on-dark); }
.chip[class*='statut-']::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--badge-color); }

.details { margin: 0; }
.details > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.details > div:last-child { border-bottom: none; }
.details dt { font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.details dd { margin: 0; font-weight: 500; color: var(--navy); text-align: right; overflow-wrap: anywhere; }

/* Marque : monogramme SCS + nom. Version claire par défaut, version sombre dans la barre latérale. */
.brand-link { text-decoration: none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: var(--navy); color: var(--green-2);
  display: flex; align-items: center; justify-content: center; font: 700 16px var(--font-display); letter-spacing: 0.02em;
}
.brand-name { font: 700 19px/1.1 var(--font-display); color: var(--navy); white-space: nowrap; }
.brand-sub { font: 700 10px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-text); margin-top: 2px; white-space: nowrap; }
.sidebar .brand-mark, .site-footer .brand-mark { background: var(--on-dark-hover); border: 1px solid var(--green); }
.sidebar .brand-name, .site-footer .brand-name { color: var(--on-dark); }
.sidebar .brand-sub, .site-footer .brand-sub { color: var(--green-2); }

/* ---------- 5. Connexion et inscription ---------- */

.auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--light-gradient); }
.auth-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--nav-height); padding: 0 5%; background: var(--white); border-bottom: 1px solid var(--line);
}
.auth-back { color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.auth-back:hover { color: var(--navy); }
.auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 48px 16px; }
.auth-card {
  width: 100%; max-width: 440px; padding: 40px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
}
.auth-card h2 { font-size: 34px; margin-bottom: 6px; }
.auth-card .lead { color: var(--muted); margin-bottom: 28px; }
.auth-card .alert { margin-bottom: 20px; }
.auth-foot { font-size: 14px; color: var(--muted); margin-top: 24px; text-align: center; }
.auth-foot a { color: var(--green-text); font-weight: 600; }
.auth-note { font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- 6. Page d'accueil : portail de l'application ---------- */

.site-nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-height);
  background: color-mix(in srgb, var(--white) 94%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav-inner { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; }

/* Écran unique : en-tête, contenu centré dans la hauteur restante, pied de page. */
.portal { min-height: 100vh; display: flex; flex-direction: column; background: var(--light-gradient); }
.portal-main { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* Halos, comme sur eradsn.org : décor, sans image. */
.portal-main::before, .portal-main::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.portal-main::before { width: 460px; height: 460px; right: -60px; top: 0; background: radial-gradient(circle, rgba(26, 158, 82, 0.1), transparent 68%); }
.portal-main::after { width: 260px; height: 260px; left: 3%; bottom: 5%; background: radial-gradient(circle, rgba(11, 31, 58, 0.06), transparent 70%); }

.entry { position: relative; z-index: 1; width: 100%; max-width: 1120px; padding: 36px 32px; }
/* Deux colonnes : le message et les boutons à gauche, l'identité du responsable à droite. */
.entry-top { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px; margin-bottom: 20px;
  background: var(--white); border: 1px solid var(--green-line); border-radius: 40px; box-shadow: var(--shadow-1);
  font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-text);
}
.hero-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.entry h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; }
.portal-lead { margin-top: 14px; font-size: 17px; color: var(--muted); }

/* Appels à l'action : « Se connecter » principal (le geste le plus fréquent), « Créer un compte » secondaire. */
.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.portal-actions .btn-primary svg { transition: transform 0.2s; }
.portal-actions .btn-primary:hover svg { transform: translateX(3px); }

/* Parcours en 4 étapes, sur une ligne, dans une carte : le fonctionnement réel, pas une présentation. */
.journey {
  list-style: none; margin: 32px 0 0; padding: 20px 12px; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.journey li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 10px; }
/* Flèche discrète entre deux étapes. */
.journey li:not(:last-child)::after {
  content: ''; position: absolute; top: 20px; right: -6px; width: 12px; height: 12px;
  border-top: 2px solid var(--green-line); border-right: 2px solid var(--green-line); transform: rotate(45deg);
}
.journey-icon {
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--green-text); background: var(--green-bg); border: 1.5px solid var(--green-line);
}
.journey li:first-child .journey-icon { background: var(--navy); border-color: var(--navy); color: var(--green-2); }
.journey strong { color: var(--navy); font-weight: 600; line-height: 1.3; }
.journey-text { font-size: 13px; color: var(--muted); line-height: 1.4; }

.entry-rules { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--muted); }

/* Carte d'identité du responsable (« idc » d'ERAD) : fond marine vers vert profond, nom en grand. */
.owner-card {
  position: relative; overflow: hidden; padding: 28px 28px 24px; border-radius: var(--r-lg);
  color: var(--on-dark); background: var(--dark-gradient); box-shadow: var(--shadow-3);
}
.owner-card::after {
  content: ''; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(26, 158, 82, 0.22), transparent 65%);
}
.owner-card > * { position: relative; z-index: 1; }
.owner-card-head { display: flex; align-items: center; gap: 18px; }
/* Portrait fourni par le Dr SARR, cadré sur le visage. */
.owner-photo {
  width: 96px; height: 117px; flex-shrink: 0; object-fit: cover; object-position: center top;
  border-radius: 14px; border: 2px solid color-mix(in srgb, var(--green-2) 70%, transparent); box-shadow: var(--shadow-2);
}
.owner-eyebrow { font: 700 11px var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--green-2); }
.owner-card h2 { margin-top: 6px; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; color: var(--on-dark); }
.owner-titles { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.owner-titles li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--on-dark-soft); }
.owner-titles li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 9px; height: 2px; border-radius: 1px; background: var(--green-2); }
.owner-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.owner-fields span { padding: 4px 10px; border-radius: 20px; font-size: 12px; color: var(--on-dark-soft); background: var(--on-dark-hover); border: 1px solid var(--on-dark-line); }
.owner-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--green-2); text-decoration: none; }
/* Logo d'ERAD sur une pastille blanche : son fond d'origine est blanc. */
.owner-link img { width: 40px; height: auto; padding: 3px; border-radius: 8px; background: var(--white); }
.owner-link span { display: flex; flex-direction: column; font-weight: 500; line-height: 1.35; }
.owner-link strong { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.owner-link:hover span { text-decoration: underline; }
.entry-rules span { display: inline-flex; align-items: center; gap: 6px; }
.entry-rules svg { color: var(--green); }

.site-footer { background: var(--navy); color: var(--on-dark-muted); font-size: 13px; }
.site-footer-inner { max-width: 1200px; margin: 0 auto; padding: 20px 32px; text-align: center; }
.site-footer a { color: var(--on-dark-soft); }

/* ---------- 7. Mise en page connectée ---------- */

.layout { display: flex; min-height: 100vh; background: var(--sand); }

.sidebar {
  position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-open); z-index: 40; overflow: hidden;
  display: flex; flex-direction: column; color: var(--on-dark);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 65%, var(--forest) 100%);
  transition: width 0.25s ease, transform 0.25s ease;
}
.sidebar-head { padding: 0 18px; height: var(--nav-height); display: flex; align-items: center; border-bottom: 1px solid var(--on-dark-line); }
.sidebar-nav { flex: 1; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.nav-label { padding: 0 12px 8px; font: 700 10px var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-muted); }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
  border: none; border-radius: var(--r-btn); background: transparent; cursor: pointer;
  color: var(--on-dark-soft); font: 500 14px var(--font-body); text-decoration: none; white-space: nowrap; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--on-dark-hover); color: var(--on-dark); }
.nav-link.is-active { background: var(--on-dark-line); color: var(--on-dark); font-weight: 600; }
.nav-link.is-active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green-2); }
.nav-link svg { flex-shrink: 0; }
.sidebar-foot { padding: 12px; border-top: 1px solid var(--on-dark-line); display: flex; flex-direction: column; gap: 4px; }
.sidebar-user { display: flex; align-items: center; gap: 12px; padding: 8px; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--r-btn); }
.sidebar-user:hover { background: var(--on-dark-hover); }
.sidebar-user .avatar { color: var(--navy); background: var(--badge-color); border: none; }
.sidebar-user-text { min-width: 0; }
.sidebar-user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font: 700 10px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-2); }
.sidebar-backdrop { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-open); transition: margin-left 0.25s ease; }
.topbar {
  position: sticky; top: 0; z-index: 30; min-height: var(--nav-height); padding: 10px 40px;
  display: flex; align-items: center; gap: 16px;
  background: color-mix(in srgb, var(--white) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { font-size: 26px; }
.topbar-title p { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-date { display: inline-block; font-size: 13px; color: var(--muted); white-space: nowrap; }
.topbar-date::first-letter { text-transform: uppercase; }
.topbar-toggle {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.topbar-toggle:hover { border-color: var(--navy); color: var(--navy); }
.content { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 40px 48px; display: flex; flex-direction: column; gap: 24px; }

.layout.is-collapsed .sidebar { width: var(--sidebar-closed); }
.layout.is-collapsed .main { margin-left: var(--sidebar-closed); }
.layout.is-collapsed .hide-collapsed { display: none; }
.layout.is-collapsed .nav-link, .layout.is-collapsed .sidebar-user, .layout.is-collapsed .sidebar-head { justify-content: center; }

/* ---------- 8. Tableau de bord ---------- */

/* Le bonjour : une ligne, avec ce qui attend. */
.greeting h2 { font-size: 28px; margin-bottom: 2px; }
.greeting p { font-size: 14px; color: var(--muted); }

/* Les compteurs : des pastilles basses, cliquables. La couleur ne s'allume que s'il y a quelque chose (valeur > 0). */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit;
  border-left: 4px solid var(--stat-color); transition: transform 0.22s, box-shadow 0.22s;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.stat-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--stat-color) 55%, var(--navy)); background: color-mix(in srgb, var(--stat-color) 14%, transparent);
}
.stat-value { font: 700 28px/1 var(--font-display); color: var(--navy); }
.stat-label { font-size: 13px; color: var(--muted); line-height: 1.3; }
.stat.is-zero { border-left-color: var(--line); }
.tone-success { --stat-color: var(--success); }
.tone-warning { --stat-color: var(--warning); }
.tone-danger { --stat-color: var(--danger); }
.tone-info { --stat-color: var(--navy-2); }

/* Le tableau de bord en rangées : une carte large et une étroite par rangée, à la même hauteur ;
   .dashboard-wide occupe toute la largeur. */
.dashboard { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.dashboard-wide { grid-column: 1 / -1; }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
/* « Mon compte » en bref, en bas du tableau de bord. */
.account-card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; }

.list-row { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--line); transition: background 0.15s; }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--sand); }
.list-row .identity, .list-row-text { flex: 1; min-width: 0; }
a.list-row { color: inherit; text-decoration: none; }
.list-row-title { font-weight: 600; color: var(--navy); }
.list-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Sous le titre d'une ligne, le texte passe à la ligne au lieu de sortir de la carte (sur téléphone surtout). */
.list-row-text .list-meta { white-space: normal; }

.meter-track { height: 8px; border-radius: 4px; background: var(--sand); overflow: hidden; }
.meter-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color) 60%, transparent), var(--badge-color)); }

/* ---------- 9. Tableaux ---------- */

.table-card { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 14px 18px; background: var(--sand); border-bottom: 1px solid var(--line);
  font: 700 11px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.table td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table td:first-child, .table th:first-child { padding-left: 22px; }
.table tbody tr { transition: background 0.15s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--sand) 60%, transparent); }
.table tr:last-child td { border-bottom: none; }
.nowrap { white-space: nowrap; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-actions form { display: flex; gap: 8px; align-items: center; }
.row-actions select { padding: 6px 10px; width: auto; font-size: 13px; }

/* ---------- 9 bis. Travaux et dépôts ---------- */

.page-actions { display: flex; justify-content: flex-end; }
.back-link { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--green-text); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* Une carte par travail, autant de colonnes que la largeur le permet. */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.work-card {
  display: flex; flex-direction: column; gap: 12px; padding: 22px; color: inherit; text-decoration: none;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--green-line); }
.work-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.work-card h2 { font-size: 22px; line-height: 1.2; }
.work-card-text { font-size: 14px; color: var(--muted); }
.work-card-count { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.work-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.deadline { font-weight: 600; color: var(--navy); }
.deadline.is-past { color: var(--danger-text); }

.type-examen { --badge-color: var(--navy-2); }
.type-exercice { --badge-color: var(--green); }
.statut-a_temps, .statut-acceptee { --badge-color: var(--success); }
.statut-en_attente_validation { --badge-color: var(--warning); }
.statut-refusee { --badge-color: var(--danger); }
.statut-non_rendu { --badge-color: var(--muted); }

.statut-corrige { --badge-color: var(--green); }
.statut-brouillon { --badge-color: var(--warning); }

/* Note : grand chiffre, barème en petit (« 14,5 / 20 »). */
.grade { font: 700 26px var(--font-display); color: var(--navy); white-space: nowrap; }
.grade small { font: 600 14px var(--font-body); color: var(--muted); }
.table .grade, .work-card-grade { font-size: 18px; }
.work-card-grade { margin-left: auto; }

/* Commentaires sur un document : la page, le passage recopié (en citation), puis le commentaire. */
.comments h3 { font-size: 18px; margin-bottom: 12px; }
.comments { display: flex; flex-direction: column; gap: 12px; }
.panel > .comments { padding: 0 22px 22px; }
.comment { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white); }
.comment-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.comment-page { font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-text); }
.comment-excerpt { margin: 0 0 8px; padding: 6px 12px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--white)); font-style: italic; color: var(--navy); white-space: pre-line; }
.comment-text { white-space: pre-line; }
/* Projets : statut, participants, versions. */
.statut-projet-en_cours { --badge-color: var(--success); }
.statut-projet-termine { --badge-color: var(--danger); }
.statut-projet-archive { --badge-color: var(--muted); }
.participants { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); }
.participant { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 40px; font-size: 14px; font-weight: 600; color: var(--navy); }
.participant .avatar { width: 28px; height: 28px; font-size: 11px; }
.participant small { font-weight: 400; color: var(--muted); }
.list-row.is-current { background: var(--green-bg); box-shadow: inset 3px 0 0 var(--green); }
.comment-author { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy); }

/* Discussions : les messages (les siens à droite, en vert), à côté les participants. */
.chat-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.chat-messages { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; padding: 20px 22px; background: var(--sand); border-bottom: 1px solid var(--line); }
.chat-messages .empty { padding: 24px; }
.message { max-width: 80%; align-self: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white); }
.message.is-mine { align-self: flex-end; background: var(--green-bg); border-color: var(--green-line); }
.message-meta { margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.message-author { font-weight: 600; color: var(--navy); }
.message-text { white-space: pre-line; overflow-wrap: anywhere; }
.chat-participants { border-top: none; }
.chat-project { border-top: 1px solid var(--line); font-size: 14px; }
.chat-project a { color: var(--green-text); font-weight: 600; }
.list-row-text .chat-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Historique : filtres sur une ligne, puis le tableau et les pages. */
.history-filters { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; padding: 16px 22px; }
.history-filters .field { margin-bottom: 0; }
.history-count { margin: 0; font-size: 13px; }
.history-details { overflow-wrap: anywhere; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; }

/* Annonces : une carte par annonce, la plus récente en haut. */
.announcement { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.announcement-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.announcement h2 { font-size: 22px; line-height: 1.2; }
.announcement-meta { margin-top: 4px; font-size: 13px; color: var(--muted); }
.announcement-text { white-space: pre-line; }
.announcement-file { padding-top: 12px; border-top: 1px solid var(--line); }
.announcement-file .file-links { justify-content: flex-start; }

/* Page de correction : le document à gauche (il reste à l'écran quand on fait défiler), le reste à droite. */
.review { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
.review-document { position: sticky; top: calc(var(--nav-height) + 16px); }
/* Des cartes empilées dans une même colonne. */
.file-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.file-viewer-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.file-viewer-frame { display: block; width: 100%; height: 75vh; border: 0; background: var(--sand); }

.comment-form { border-bottom: 1px solid var(--line); }
.comment-form > .field-hint { margin: 0 0 16px; }
/* La page et le passage sur une même ligne : le formulaire tient en haut du panneau. */
.comment-form-place { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
.comment-form textarea { height: 96px; }

/* Panneau à onglets, à côté du document : il garde sa place à l'écran ; seul son contenu défile. */
.review-panel { position: sticky; top: calc(var(--nav-height) + 16px); display: flex; flex-direction: column; max-height: calc(100vh - var(--nav-height) - 32px); overflow: hidden; }
.tabs { display: flex; padding: 0 8px; border-bottom: 1px solid var(--line); flex-shrink: 0; overflow-x: auto; }
.tab {
  display: inline-flex; flex: 1 1 auto; justify-content: center; align-items: center; gap: 6px; padding: 14px 6px 12px; border: none; border-bottom: 2px solid transparent;
  background: none; font: 600 13px var(--font-body); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--navy); }
.tab.is-active { color: var(--navy); border-bottom-color: var(--green); }
.tab-count { padding: 1px 7px; border-radius: 20px; background: var(--sand); font: 700 11px var(--font-body); color: var(--muted); }
.tab-panel { overflow-y: auto; min-height: 0; }
.version-row { gap: 12px; }

/* Barre d'un travail ou d'un projet : statut, repères et actions sur une ligne. */
.assignment-bar, .project-head { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.assignment-bar-row, .project-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.bar-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; flex: 1; }
.bar-facts dt { font: 700 10px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bar-facts dd { margin: 0; font-weight: 600; color: var(--navy); }
.bar-actions { margin-left: auto; }
.assignment-bar-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.assignment-bar-form .field { flex: 1; min-width: min(260px, 100%); margin-bottom: 0; }
.assignment-bar-form .btn { margin-top: 26px; }
.assignment-bar-foot { padding-top: 12px; border-top: 1px solid var(--line); }
.assignment-bar-note { margin: 0; flex: 1; min-width: min(280px, 100%); font-size: 13px; color: var(--muted); }
.project-head-text { margin: 0; white-space: pre-line; }
.project-head .participants { border-top: none; }

/* Consignes repliées (élément <details>) : le titre sert de bouton. */
.consignes > summary { cursor: pointer; list-style: none; }
.consignes > summary::-webkit-details-marker { display: none; }
.consignes > summary::after { content: '▸'; color: var(--muted); transition: transform 0.15s; }
.consignes[open] > summary::after { transform: rotate(90deg); }
.consignes:not([open]) > summary { border-bottom: none; }

/* Nouveau document : le formulaire s'ouvre en haut de la liste. */
.new-document { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--sand) 50%, var(--white)); }
.new-document-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 16px; }

.statut-publie { --badge-color: var(--success); }
.statut-cloture { --badge-color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-head .badges { justify-content: flex-end; }
/* Informations clés d'un travail : des encadrés côte à côte, qui passent à la ligne sur petit écran. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0 22px 22px; }
.fact { padding: 12px 14px; border-radius: var(--r-btn); background: var(--sand); }
.fact dt { font: 700 10px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.fact dd { margin: 0; font-weight: 600; color: var(--navy); }


/* Classes sur la page des comptes : le nom filtre la liste, le crayon ouvre la classe. */
.class-chip { padding: 0; gap: 0; }
.class-chip a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 14px; color: inherit; text-decoration: none; }
.class-chip .class-chip-edit { padding: 7px 12px 7px 6px; border-left: 1px solid var(--line); color: var(--muted); }
.class-chip:hover { border-color: var(--navy); }
.class-chip.is-active .class-chip-edit { border-left-color: rgba(255, 255, 255, 0.25); color: var(--on-dark-soft); }
/* Nom d'une classe sur la ligne d'un compte, sous le rôle. */
.role-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--sand); font-size: 12px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* Choix des étudiants : classes en pastilles, puis une case par étudiant. */
.fieldset { margin: 6px 0 18px; padding: 0; border: none; }
.fieldset legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 600; color: var(--navy); }
.fieldset .field-hint { margin: 0 0 12px; }
.fieldset .field-hint a { color: var(--green-text); font-weight: 600; }
.class-picker { margin-bottom: 14px; }
.class-picker .chip { cursor: pointer; }
.class-picker input { accent-color: var(--green-text); }
.checklist { max-height: 340px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: var(--r-btn); }
/* « .checklist .check-row » est plus précis que « .field label » : la ligne garde sa mise en page. */
.checklist .check-row {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-weight: 400; cursor: pointer;
}
.checklist .check-row:last-child { border-bottom: none; }
.checklist .check-row:hover { background: var(--sand); }
/* Annule le style des champs texte (« .field input ») sur les cases à cocher. */
.checklist .check-row input { width: 18px; height: 18px; flex-shrink: 0; padding: 0; border: none; box-shadow: none; accent-color: var(--green-text); }
.field.has-error .checklist { border-color: var(--danger); }

.panel-body { padding: 20px 22px; }
.panel-body .alert { margin-bottom: 18px; }
.assignment-text { white-space: pre-line; }
.form-panel { max-width: 720px; }
.form-panel form { padding: 24px; }
.form-note { margin-bottom: 16px; font-size: 13px; }
.file-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--green-text); text-decoration: none; overflow-wrap: anywhere; }
.file-link:hover { text-decoration: underline; }
.file-links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.file-open { padding: 2px 10px; border: 1px solid var(--line); border-radius: 40px; font-size: 12px; font-weight: 600; color: var(--navy); text-decoration: none; }
.file-open:hover { border-color: var(--navy); }

/* ---------- 10. Messages et animations ---------- */

/* Confirmation : petite carte en haut à droite qui disparaît seule (Alpine). */
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 60; width: min(400px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px;
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: var(--r-btn); box-shadow: var(--shadow-2);
}
.toast > svg { flex-shrink: 0; margin-top: 3px; color: var(--green); }
.toast p { flex: 1; font-size: 14px; line-height: 1.5; color: var(--navy); }
.toast-close {
  flex-shrink: 0; width: 24px; height: 24px; border: none; border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.toast-close:hover { background: var(--sand); color: var(--navy); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--badge-color) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}

/* Mouvement coupé si le système demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .content > *, .auth-card, .entry { animation: rise 0.5s var(--ease) both; }
  .content > :nth-child(2) { animation-delay: 0.08s; }
  .content > :nth-child(3) { animation-delay: 0.14s; }
  .content > :nth-child(4) { animation-delay: 0.2s; }
  .meter-bar { transform-origin: left; animation: grow 0.7s var(--ease) 0.2s both; }
  .statut-en_attente::before, .statut-en_attente_validation::before { animation: pulse 2.2s ease-out infinite; }
}

/* ---------- 11. Pages d'erreur ---------- */

.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--light-gradient); }
.error-card { max-width: 440px; padding: 48px 40px; border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.error-code { font: 700 84px/1 var(--font-display); color: var(--navy); }
.error-rule { width: 48px; height: 3px; margin: 18px auto; border-radius: 2px; background: var(--green); }
.error-card h2 { font-size: 30px; }
.error-page p { color: var(--muted); margin: 8px 0 28px; }

/* ---------- 12. Petits écrans ---------- */

@media (max-width: 900px) {
  .auth-bar { padding: 0 16px; }
  .auth-main { padding: 24px 16px; }
  .auth-card { padding: 28px 20px; }

  .site-nav-inner { padding: 0 16px; }
  .entry { padding: 28px 16px; }
  .entry-top { grid-template-columns: 1fr; gap: 28px; }
  .owner-card { padding: 22px 20px; }
  .portal-lead { font-size: 16px; }
  .portal-actions .btn { flex: 1; }
  /* Sur téléphone, le parcours passe en 2 × 2, sans flèches. */
  .journey { grid-template-columns: repeat(2, 1fr); gap: 18px 0; margin-top: 28px; padding: 18px 6px; }
  .journey li:not(:last-child)::after { content: none; }
  .site-footer-inner { padding: 18px 16px; }

  /* La barre latérale passe par-dessus la page ; un voile la referme au clic. */
  .main, .layout.is-collapsed .main { margin-left: 0; }
  .sidebar { width: var(--sidebar-open); box-shadow: var(--shadow-3); }
  .layout.is-collapsed .sidebar { width: var(--sidebar-open); transform: translateX(-100%); }
  .layout.is-collapsed .hide-collapsed { display: revert; }
  .layout.is-collapsed .nav-link, .layout.is-collapsed .sidebar-user, .layout.is-collapsed .sidebar-head { justify-content: flex-start; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: var(--backdrop); }
  .layout.is-collapsed .sidebar-backdrop { display: none; }

  .topbar { padding: 10px 16px; gap: 12px; }
  .topbar-title h1 { font-size: 22px; }
  .topbar-date { display: none; }
  .content { padding: 20px 16px 32px; gap: 18px; }

  .greeting h2 { font-size: 24px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 10px 12px; gap: 10px; }
  .stat-icon { display: none; }
  .dashboard, .grid-2, .review, .chat-layout, .history-filters { grid-template-columns: 1fr; }
  .history-filters { padding: 14px 16px; }
  .chat-messages { padding: 16px; }
  .message { max-width: 92%; }
  .review-document { position: static; }
  /* Sur téléphone, les onglets passent au-dessus du document, sans hauteur imposée. */
  .review-panel { position: static; order: -1; max-height: none; }
  .assignment-bar, .project-head { padding: 14px 16px; }
  .assignment-bar-row, .project-head-row { flex-direction: column; align-items: flex-start; }
  .bar-facts { flex: none; }
  .bar-actions { margin-left: 0; }
  .file-viewer-frame { height: 60vh; }
  .file-viewer-bar { padding: 12px 16px; }
  .facts { padding: 0 16px 16px; }
  .list-row { flex-wrap: wrap; padding: 14px 16px; }
  .list-row .identity { flex-basis: 100%; }
  .panel-head, .details > div, .panel-body, .form-panel form { padding-left: 16px; padding-right: 16px; }

  /* Chaque ligne du tableau devient une fiche : plus de défilement de côté. */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table tr:last-child { border-bottom: none; }
  .table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border: none; }
  .table td:first-child { padding-left: 0; }
  .table td::before {
    content: attr(data-label); flex-shrink: 0;
    font: 700 10px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
  }
  .table td:first-child::before, .table td:last-child::before, .table td[colspan]::before { content: none; }
  .table td:last-child { display: block; padding-top: 12px; }
  /* Sauf si la dernière colonne est une simple valeur (les détails de l'historique, un « — ») : elle garde son libellé. */
  .table td:last-child:not([colspan]):not(:has(form, .btn)) { display: flex; }
  .table td:last-child:not([colspan]):not(:has(form, .btn))::before { content: attr(data-label); }
  .table td[colspan] { display: block; }
  .row-actions form { flex: 1; }
  .row-actions select { flex: 1; }

}

/* ---------- 13. Chiffres ---------- */

/* En fin de fichier : les raccourcis « font: » plus haut remettraient sinon les chiffres par défaut. */
/* Chiffres droits et alignés : les chiffres « à l'ancienne » des Garamond font lire un 1 comme un I. */
.stat-value, .chip strong, .step-number { font-variant-numeric: lining-nums tabular-nums; }