/* ============================================
   Onboardy — Dashboard cohortes (pilote)
   Charte app Onboardy : Sora, bleu #1A6CF6, marine.
   Reprend l'esthétique validée de dashboard-mockup.
   ============================================ */

@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden doit toujours gagner, meme sur les conteneurs flex/grid */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper-alt);
}
h1, h2 { line-height: 1.2; margin: 0 0 var(--space-2); }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 18px; font-weight: 700; }
button { font: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }

/* ── Boutons ── */
.btn {
  display: inline-block;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 16px;
  text-decoration: none;
}
.btn-bleu { background: var(--color-brand); color: #fff; box-shadow: var(--shadow-cta); }
.btn-bleu:hover { background: var(--color-cta-hover); }
.btn-contour { background: #fff; color: var(--color-ink); border: 1.5px solid var(--color-line); }
.btn-contour:hover { border-color: var(--color-ink-muted); }
.btn-danger { background: #fff; color: var(--color-error); border: 1.5px solid var(--color-error); }
.btn-danger:hover { background: #fee2e2; }
.btn-large { width: 100%; padding: 12px; font-size: 15px; }
.btn[disabled] { opacity: 0.55; cursor: wait; }
.btn-lien {
  background: none; border: none; padding: 0;
  color: var(--color-brand); font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.btn-lien:hover { text-decoration: underline; }

/* ── Écran de connexion ── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-deep);
  background-image: radial-gradient(ellipse 70% 60% at 50% 30%, var(--color-deep-glow) 0%, transparent 70%);
}
.login-carte {
  width: min(420px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.login-logo { font-weight: 800; font-size: 22px; color: var(--color-brand); margin: 0 0 18px; }
.login-carte h1 { font-size: 22px; }
.login-sous-titre { color: var(--color-ink-muted); font-size: 13.5px; margin: 0 0 22px; }
.login-carte label { display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 6px; }
.login-carte input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
}
.login-carte input:focus { border-color: var(--color-brand); outline: none; }
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 40px; }
.toggle-mdp {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-ink-muted);
  cursor: pointer;
}
.toggle-mdp:hover { color: var(--color-ink); }
.toggle-mdp svg { width: 20px; height: 20px; }
.login-carte .btn-large { margin-top: 22px; }
.login-statut { min-height: 1.4em; font-weight: 600; font-size: 13.5px; color: var(--color-error); margin: 12px 0 0; }

/* ── Layout général ── */
.layout { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--color-deep);
  color: #fff;
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .logo { font-weight: 800; font-size: 21px; color: #9cc0ff; padding: 0 22px 14px; margin: 0; }
.choix-cohorte { padding: 0 22px 16px; }
.choix-cohorte label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-deep-soft);
  margin-bottom: 4px;
}
.choix-cohorte select {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.choix-cohorte select option { color: var(--color-ink); }
.nav { display: flex; flex-direction: column; }
.nav-icone { width: 16px; height: 16px; flex-shrink: 0; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-on-deep-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-left: 3px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a.active {
  background: rgba(26, 108, 246, 0.18);
  color: #9cc0ff;
  border-left-color: var(--color-brand);
}
.sidebar-pied { margin-top: auto; padding: 0 22px; }
.sidebar-utilisateur {
  display: block;
  font-size: 13px;
  color: var(--color-on-deep-soft);
  margin: 0 0 8px;
  text-decoration: none;
  cursor: pointer;
}
.sidebar-utilisateur::before { content: "\2699\FE0F  "; }
.sidebar-utilisateur:hover, .sidebar-utilisateur.active { color: #fff; }
.sidebar-pied .btn-lien { color: #9cc0ff; }

/* Largeur plafonnée pour la lisibilité (lignes et tableaux), mais centrée
   dans l'espace restant : sur grand écran le vide se répartit des deux côtés */
.contenu { padding: 26px 30px 60px; max-width: 1220px; margin: 0 auto; width: 100%; }

.bandeau-demo {
  background: var(--color-deep);
  color: #fff;
  text-align: center;
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 10px;
  margin-bottom: 18px;
}

.vue[hidden] { display: none; }

/* ── En-tête de vue ── */
.entete-vue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.entete-vue h1 { margin: 0; }
.entete-badges { display: flex; gap: 8px; }
.badge-info {
  background: var(--color-brand); color: #fff;
  font-weight: 700; font-size: 12.5px;
  padding: 5px 13px; border-radius: 999px;
}
.badge-ok {
  background: #d1fae5; color: #065f46;
  font-weight: 700; font-size: 12.5px;
  padding: 5px 13px; border-radius: 999px;
}
.entete-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── KPIs ── */
/* Grille symétrique : 3 cartes par rangée (2 rangées de 3), jamais de carte
   orpheline ; passe à 2 puis 1 colonne sur les écrans plus étroits */
.grille-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .grille-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grille-kpi { grid-template-columns: 1fr; }
}
.kpi-emoji { font-size: 21px; margin-right: 8px; }

/* Étiquettes de pourcentage du tableau (progression, score) :
   mêmes pastels que les pastilles de statut */
.etiquette-pct {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}
.etiquette-ok { background: #d1fae5; color: #065f46; }
.etiquette-moyen { background: #fef3c7; color: #92400e; }
.etiquette-bas { background: #fee2e2; color: #991b1b; }
.kpi {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  border-left: 4px solid transparent;
  display: flex;
  flex-direction: column;
}
/* Libellé et détail sur hauteurs FIXES : les chiffres de toutes les cartes
   tombent exactement au même niveau, au pixel près */
.kpi .libelle { font-size: 12.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0 0 4px; min-height: 38px; }
.kpi .valeur { height: 36px; display: flex; align-items: baseline; gap: 4px; }
.kpi .detail { height: 36px; overflow: hidden; }
.kpi .valeur { font-size: 28px; font-weight: 800; line-height: 1.15; }
.kpi .valeur small { font-size: 15px; font-weight: 600; color: var(--color-ink-muted); }
.kpi .detail { font-size: 12px; color: var(--color-ink-muted); margin: 2px 0 0; }
.kpi-ok { border-left-color: var(--color-success); }
.kpi-ok .valeur { color: #065f46; }
.kpi-alerte { border-left-color: var(--color-error); }
.kpi-alerte .valeur { color: var(--color-error); }

/* ── Panneaux ── */
.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.panneau {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.panneau-sous-titre { font-size: 13px; color: var(--color-ink-muted); margin: 0 0 14px; }

/* Recommandations d'atelier */
.reco {
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: var(--color-brand-soft);
  border-left: 4px solid var(--color-brand);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.reco .rang { font-size: 20px; font-weight: 800; color: var(--color-brand); }
.reco .titre { font-weight: 700; margin: 0; }
.reco .stat { font-size: 13px; color: var(--color-ink-soft); margin: 2px 0 6px; }
.reco .reco-detail { color: var(--color-ink-muted); font-style: italic; }

/* Ateliers suivis en présentiel (fiche apprenant) */
.liste-ateliers { list-style: none; padding: 0; margin: 0; }
.liste-ateliers li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--color-line);
}
.liste-ateliers li:first-child { border-top: none; }
.liste-ateliers .stat { font-size: 13px; color: var(--color-ink-muted); }

/* Couverture d'un atelier : combien d'apprenants sur l'effectif total */
.couverture-totale { color: var(--color-success); font-weight: 600; }
.couverture-partielle { color: #ea580c; font-weight: 600; }

/* ── Déroulé d'atelier en cartes ── */
.deroule-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}
.deroule-entete h3 { margin: 0 0 2px; font-size: 17px; }
.deroule-entete .panneau-sous-titre { margin: 0; }
.deroule-alerte {
  background: rgba(234, 88, 12, 0.08);
  border-left: 3px solid #ea580c;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  margin: 0 0 12px;
}
.temps-fort {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.tf-entete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.tf-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tf-titres { min-width: 0; }
.tf-titre { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.3; }
.tf-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--color-ink-muted); }
.tf-bloom {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  vertical-align: middle;
}
/* Une couleur par niveau de Bloom, du plus simple (gris neutre) au plus
   complexe (magenta), en passant par la mise en pratique (vert) et l'esprit
   critique (violet). La diversité des couleurs d'un atelier signale d'un
   coup d'œil la diversité cognitive de ses temps forts. */
.tf-bloom--memoriser  { background: #eef1f5; color: #566072; }
.tf-bloom--comprendre { background: #e4effe; color: #1a5fce; }
.tf-bloom--appliquer  { background: #e2f3ec; color: #0f6e56; }
.tf-bloom--analyser   { background: #fdf0dd; color: #9a6a12; }
.tf-bloom--evaluer    { background: #efe9fb; color: #6d4fc4; }
.tf-bloom--creer      { background: #fce6f3; color: #b5237e; }
.tf-contenu {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.tf-contenu:focus { border-color: var(--color-brand); outline: none; }
.tf-etape {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-alt);
  color: var(--color-ink-soft);
  vertical-align: middle;
}
.tf-controles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
}
.tf-select {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  max-width: 340px;
}
.btn-petit { padding: 6px 12px; font-size: 13px; }
.diag-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
}
.diag-themes label { display: inline-flex; align-items: center; gap: 5px; }

/* Recommandation d'atelier déjà traitée en présentiel */
.reco-est-traite { opacity: 0.85; }
.reco .reco-traite { color: var(--color-success); font-weight: 600; }

/* Icône d'aide « ? » : le calcul en clair au survol d'un indicateur.
   L'info-bulle est un ::after maîtrisé (largeur bornée, plusieurs lignes,
   sous l'icône), au lieu du title natif qui s'étirait en une longue ligne
   pouvant déborder sur la barre latérale. */
.aide {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-ink-muted);
  background: var(--color-paper-alt);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  cursor: help;
  vertical-align: middle;
}
.aide:hover, .aide:focus { color: var(--color-brand); border-color: var(--color-brand); outline: none; }
.aide::after {
  content: attr(data-aide);
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  text-align: left;
  color: var(--color-on-deep);
  background: var(--color-deep);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(13, 27, 62, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  pointer-events: none;
}
.aide:hover::after, .aide:focus::after { opacity: 1; visibility: visible; }
/* Les KPI de droite : l'info-bulle s'ancre à droite pour ne pas sortir de la
   fenêtre. La grille compte 3 colonnes, la 3e est la plus à droite. */
.grille-kpi > .kpi:nth-child(3n) .aide::after { left: auto; right: 0; }

/* Panneau « Comment lire ce tableau de bord » */
.aide-lecture .aide-niveaux { margin: 14px 0; }
.aide-lecture .aide-niveaux dt { font-weight: 700; color: var(--color-brand); margin-top: 10px; }
.aide-lecture .aide-niveaux dd { margin: 2px 0 0; color: var(--color-ink-soft); }
.aide-lecture .aide-para { font-size: 14px; color: var(--color-ink-soft); margin: 12px 0 0; }

/* Effet d'un atelier mesuré sur le boss suivant (bibliothèque) */
.effet-boss {
  background: var(--color-paper-alt);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0;
}
.effet-boss-titre { font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
.effet-boss ul { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; }
.effet-boss li { margin: 2px 0; }
.effet-boss-note { font-size: 12px; color: var(--color-ink-muted); margin: 0; font-style: italic; }

/* Liste des présents à un atelier : une grille de puces cliquables, lisible
   même à 24 apprenants. Coché (présent) = accent ; décoché (absent) = grisé. */
.presence-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.presence-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13.5px;
  text-align: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.presence-item:hover { border-color: var(--color-brand); }
.presence-item input { margin: 0; flex-shrink: 0; accent-color: var(--color-brand); }
/* Absent (décoché) : le nom passe en retrait pour distinguer d'un coup d'œil */
.presence-item:has(input:not(:checked)) { background: var(--color-paper-alt); opacity: 0.6; }
.presence-item:has(input:checked) { border-color: rgba(26, 108, 246, 0.4); }
.reco .btn { margin-top: 2px; }

/* Barres de réussite par thématique */
.barre-ligne { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.barre-nom { color: var(--color-ink-soft); }
.barre-fond { background: var(--color-paper-alt); border-radius: 999px; height: 12px; overflow: hidden; }
.barre-valeur { height: 100%; border-radius: 999px; background: var(--color-brand); }
.barre-pct { font-weight: 700; text-align: right; }
/* Code couleur des taux d'erreur : la couleur parle avant le chiffre */
.barre-ok { background: var(--color-success); }
.barre-moyen { background: #f59e0b; }
.barre-critique { background: var(--color-error); }
.pct-ok { color: #065f46; }
.pct-moyen { color: #92400e; }
.pct-critique { color: var(--color-error); }

/* Onglets (écran ateliers) */
.onglets { display: flex; gap: 6px; margin-bottom: 16px; }
.onglet {
  background: #fff;
  border: 1.5px solid var(--color-line);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  color: var(--color-ink-soft);
}
.onglet.actif { color: var(--color-brand); border-color: var(--color-brand); background: var(--color-brand-soft); }

/* Colonnes triables et recherche */
.triable { cursor: pointer; user-select: none; white-space: nowrap; }
.triable:hover { color: var(--color-ink); }
.triable::after { content: " ↕"; opacity: 0.35; }
.triable.tri-asc::after { content: " ↑"; opacity: 1; color: var(--color-brand); }
.triable.tri-desc::after { content: " ↓"; opacity: 1; color: var(--color-brand); }
.champ-recherche { max-width: 340px; }

/* ── Tableau des jeunes ── */
.table-scroll { overflow-x: auto; }
.table-jeunes { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-jeunes th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 2px solid var(--color-line);
}
.table-jeunes td { padding: 9px 10px; border-bottom: 1px solid var(--color-line); }
.table-jeunes tr:hover td { background: var(--color-brand-soft); }
.table-jeunes .nom-jeune { font-weight: 700; }
/* L'adresse est là pour être relue caractère par caractère, à la recherche
   d'une faute de frappe. D'où la chasse fixe : un « rn » ne se confond plus
   avec un « m », ni un « l » avec un « 1 ». */
.table-jeunes .email-jeune { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; }
.prog { display: flex; align-items: center; gap: 8px; }
.prog .barre-fond { width: 90px; }
.pastille { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pastille-actif { background: #d1fae5; color: #065f46; }
.pastille-attente { background: #fef3c7; color: #92400e; }
.pastille-alerte { background: #fee2e2; color: #991b1b; }
.pastille-desactive { background: var(--color-paper-alt); color: var(--color-ink-muted); }
/* Fenêtre statistique de risque de rupture de contrat (signal temporel,
   s'éteint seul en fin de fenêtre) : orange plein, aussi visible que
   l'alerte inactivité mais distinct de son rouge */
.pastille-risque { background: #ea580c; color: #fff; }

/* ── Bilan de cohorte (page Bilan & documents) ── */
/* En-tête de marque : présent à l'écran, indispensable au PDF, qui sinon
   sortait sans aucune identité Onboardy. */
.bilan-marque {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--color-brand);
}
.bilan-logo { font-size: 22px; font-weight: 800; color: var(--color-brand); letter-spacing: -0.01em; }
.bilan-marque-sous { font-size: 12.5px; color: var(--color-ink-muted); }
.bilan-page h3 {
  font-size: 15px;
  color: var(--color-brand);
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--color-line);
}
.bilan-ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font-size: 14px;
}
.bilan-page ul { margin: 8px 0 0 18px; font-size: 14px; }
.bilan-page li { margin-bottom: 4px; }
.bilan-pied { margin-top: 20px; font-size: 12px; color: var(--color-ink-muted); }

/* Impression : seul le bilan sort sur papier, aux couleurs Onboardy.
   Les couleurs de marque sont forcées (print-color-adjust) car les
   navigateurs coupent par défaut les fonds et bordures colorés à
   l'impression, ce qui effaçait toute l'identité visuelle du PDF. */
@media print {
  .sidebar, .bandeau-demo, .no-impression,
  #vue-cohorte, #vue-jeunes, #vue-ateliers, #vue-profil,
  .bilan-page ~ .no-impression { display: none !important; }
  .layout { display: block; }
  .contenu { padding: 0; }
  body { background: #fff; font-family: var(--font-body, "Sora", sans-serif); }
  .bilan-page {
    box-shadow: none;
    border: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bilan-marque { border-bottom-color: var(--color-brand); }
  .bilan-logo, .bilan-page h3 { color: var(--color-brand) !important; }
  .bilan-page h3 { break-after: avoid; }
  .bilan-ligne { break-inside: avoid; }
  @page { margin: 1.6cm; }
}

/* ── Fiche jeune ── */
.fiche-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 14px 0 20px; }
.fiche-entete h1 { margin: 0; }
.fiche-coordonnees { font-size: 13.5px; color: var(--color-ink-soft); }
.fiche-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.liste-details { font-size: 14px; }
.liste-details dt { font-weight: 700; margin-top: 10px; }
.liste-details dd { margin: 2px 0 0; color: var(--color-ink-soft); }
.semaine-barres { display: flex; gap: 6px; align-items: flex-end; height: 90px; margin-top: 10px; }
.semaine-barre { flex: 1; background: var(--color-brand); border-radius: 6px 6px 0 0; min-height: 3px; }
.semaine-barre.vide { background: var(--color-line); }
.semaine-libelle { font-size: 11px; color: var(--color-ink-muted); text-align: center; margin-top: 4px; }

/* ── Formulaires génériques des vues ── */
.champ { margin-bottom: 14px; }
.champ label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
}
.champ textarea { min-height: 220px; line-height: 1.5; }
.zone-depot {
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-md);
  padding: 34px;
  text-align: center;
  color: var(--color-ink-soft);
  background: #fff;
}
.zone-depot.survol { border-color: var(--color-brand); background: var(--color-brand-soft); }
.message-ok { color: #065f46; font-weight: 600; }
.message-erreur { color: var(--color-error); font-weight: 600; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 10px 14px; }
  .sidebar .logo { padding: 0 14px 0 0; font-size: 17px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav a { padding: 8px 10px; border-left: none; border-bottom: 3px solid transparent; }
  .nav a.active { border-left: none; border-bottom-color: var(--color-brand); }
  .sidebar-pied { margin: 0 0 0 auto; display: flex; gap: 10px; align-items: center; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .contenu { padding: 16px; }
}