/* ============================================================================
   ONBOARDING — Feuille de style
   ----------------------------------------------------------------------------
   Couleurs de l'application d'origine :
     #2B2B2B  volet de navigation
     #5184E5  bleu principal (remplissages, progression, icônes)
     #3A63C4  bleu foncé : boutons et liens (5,6:1 sur blanc, contraste AA)
     crème    fond d'application
   Mise en page fluide : le volet latéral devient une barre horizontale sous
   1024 px, les grilles passent en une colonne sur téléphone.
   Pas d'animation ni de dégradé : chaque effet reste reproductible dans
   une Canvas App (couleurs unies, survol limité à un changement de couleur).
   ============================================================================ */

:root {
  --rail: #2B2B2B;
  --rail-2: #3B3B3B;
  --bleu: #5184E5;
  --bleu-fonce: #3A63C4;
  --bleu-100: #DCE6FA;
  --bleu-50: #EEF3FD;
  --vert: #16A34A;
  --vert-fonce: #107C10;
  --vert-50: #EAF7EE;
  --vert-bord: #BFE7CB;
  --rouge: #C0392B;
  --rouge-vif: #FF6961;
  --rouge-50: #FFECEA;
  --orange: #F59E0B;
  --orange-50: #FEF3E2;

  --fond: #FBF8F4;
  --surface: #FFFFFF;
  --encre: #1F2937;
  --texte-doux: #5F6B70;
  --texte-faible: #6B7780;
  --bordure: #E6E1DA;
  --bordure-claire: #F0ECE6;
  --champ: #F7F7F7;
  --champ-bord: #DBDBDB;

  --ombre: 0 1px 2px rgba(31, 41, 55, .05), 0 2px 8px rgba(31, 41, 55, .05);
  --ombre-forte: 0 12px 40px rgba(31, 41, 55, .18);
  --rayon: 12px;
  --rayon-s: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font-family: "Segoe UI", "Open Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--encre);
  background: var(--fond);
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.muet { color: var(--texte-doux); }
.petit { font-size: 12px; }
.vide { color: var(--texte-faible); padding: 24px; text-align: center; }

/* ---------- Structure générale ---------------------------------------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--rail);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.marque { display: flex; align-items: center; gap: 12px; padding: 24px 22px 28px; }
.marque svg { width: 40px; height: 40px; flex: 0 0 40px; }
.marque__nom { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.marque__sous { font-size: 12px; color: #B8B8B8; }

.nav { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; flex: 1; }
.nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--rayon-s);
  background: transparent;
  color: #E5E5E5;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.nav__item svg { width: 24px; height: 24px; flex: 0 0 24px; }
.nav__item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav__item--actif, .nav__item--actif:hover { background: rgba(81, 132, 229, .22); color: #fff; box-shadow: inset 3px 0 0 var(--bleu); }

.utilisateur { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--rail-2); }
.utilisateur__nom { font-weight: 600; font-size: 13px; }
.utilisateur__role { font-size: 12px; color: #B8B8B8; }

.contenu { padding: 28px 32px 40px; min-width: 0; }
.ecran { display: none; max-width: 1280px; margin: 0 auto; }
.ecran--actif { display: block; }

.entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.entete p { margin: 4px 0 0; color: var(--texte-doux); }

/* ---------- Composants ------------------------------------------------ */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.carte__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--bordure-claire);
}
.carte__corps { padding: 20px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--rayon-s);
  padding: 9px 16px;
  font-weight: 600;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--principal { background: var(--bleu-fonce); color: #fff; }
.btn--principal:hover { background: #2F52A6; }
.btn--secondaire { background: var(--surface); color: var(--encre); border-color: var(--bordure); }
.btn--secondaire:hover { background: var(--fond); }
.btn--vert { background: var(--vert); color: #fff; }
.btn--vert:hover { background: #12873E; }
.btn--danger { background: #D92D20; color: #fff; }
.btn--danger:hover { background: #B42318; }
.btn--icone { padding: 7px; border-radius: var(--rayon-s); background: transparent; color: var(--texte-doux); }
.btn--icone:hover { background: var(--fond); color: var(--encre); }
.btn--icone svg { width: 18px; height: 18px; }

.lien { border: none; background: none; padding: 0; color: var(--bleu-fonce); font-weight: 600; text-align: left; }
.lien:hover { text-decoration: underline; }

.champ {
  width: 100%;
  border: 1px solid var(--champ-bord);
  border-radius: var(--rayon-s);
  background: var(--champ);
  padding: 9px 12px;
  color: var(--encre);
}
.champ:hover { background: #F1F1F1; }
.champ:focus { outline: 2px solid var(--bleu); outline-offset: 0; background: #fff; }
.champ::placeholder { color: #8A8F94; }
textarea.champ { resize: vertical; min-height: 96px; }
select.champ { cursor: pointer; }
.champ--neuf { background: #FEF3C7; }
.champ[disabled] { color: var(--texte-doux); cursor: default; }

.groupe { display: flex; flex-direction: column; gap: 6px; }
.groupe > span { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #374151; }
.grille-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.grille-form .plein { grid-column: 1 / -1; }

.avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  background: #3860B2;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar--petit { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
.avatar--grand { width: 60px; height: 60px; flex-basis: 60px; font-size: 21px; }

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pastille--cours   { background: var(--bleu-50);  color: var(--bleu-fonce); border-color: var(--bleu-100); }
.pastille--complet { background: var(--vert-50);  color: var(--vert-fonce); border-color: var(--vert-bord); }
.pastille--retard  { background: var(--rouge-50); color: var(--rouge);      border-color: #F8C9C4; }
.pastille--neutre  { background: #F4F4F4;         color: #545454;           border-color: #E3E3E3; }
.pastille--phase   { background: #F7F7F7;         color: #545454;           border-color: #E3E3E3; font-size: 11px; letter-spacing: .03em; }

.progression { display: flex; align-items: center; gap: 10px; }
.progression__barre { flex: 1; height: 8px; min-width: 70px; background: #EEEEEE; border-radius: 4px; overflow: hidden; }
.progression__valeur { height: 100%; background: var(--bleu); }
.progression__texte { font-size: 12px; font-weight: 700; color: #41494D; min-width: 34px; text-align: right; }

.bulle { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.bulle svg { width: 26px; height: 26px; }

.segments { display: inline-flex; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-s); padding: 3px; gap: 2px; flex-wrap: wrap; }
.segment { border: none; background: transparent; border-radius: 6px; padding: 7px 16px; color: #6F6F6F; font-weight: 600; }
.segment:hover { color: var(--encre); background: var(--fond); }
.segment--actif, .segment--actif:hover { background: var(--bleu-50); color: var(--bleu-fonce); }

.case { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.case input { width: 18px; height: 18px; margin: 0; accent-color: var(--bleu-fonce); flex: 0 0 18px; cursor: pointer; }

.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__piste { width: 42px; height: 22px; flex: 0 0 42px; border-radius: 11px; border: 1px solid #8A8A8A; background: #fff; position: relative; }
.toggle__piste::after { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: #6F6F6F; }
.toggle input:checked + .toggle__piste { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.toggle input:checked + .toggle__piste::after { left: 24px; background: #fff; }
.toggle input:focus-visible + .toggle__piste { outline: 2px solid var(--bleu); outline-offset: 2px; }

button:focus-visible, .champ:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* ---------- Tableau de bord ------------------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; align-items: center; gap: 14px; padding: 18px; }
.kpi__libelle { color: var(--texte-doux); font-weight: 600; }
.kpi__valeur { font-size: 28px; font-weight: 700; line-height: 1.1; }

.filtres { display: flex; flex-wrap: wrap; gap: 10px; }
.filtres .champ { width: auto; min-width: 190px; }
.recherche { position: relative; }
.recherche .champ { padding-left: 36px; min-width: 230px; }
.recherche svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; pointer-events: none; }

/* Liste des arrivants : grille sur ordinateur, cartes empilées sur téléphone */
.liste-entete, .ligne {
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) minmax(170px, 1.6fr) 130px minmax(140px, 1fr) 110px 24px;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
}
.liste-entete { background: #F8F8F8; color: #7A7A7A; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; }
.ligne { width: 100%; border: none; border-top: 1px solid var(--bordure-claire); background: var(--surface); text-align: left; color: inherit; }
.ligne:hover { background: #F7F9FE; }
.ligne svg.chevron { width: 18px; height: 18px; color: #6F6F6F; }
.personne { display: flex; align-items: center; gap: 12px; min-width: 0; }
.personne__nom { font-weight: 600; }
.personne__mail, .ligne__sous { font-size: 12px; color: var(--texte-faible); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne__date { display: flex; align-items: center; gap: 8px; }
.ligne__date svg { width: 17px; height: 17px; color: #4D4D4D; }

/* ---------- Programmation -------------------------------------------- */
.modeles { display: flex; flex-direction: column; gap: 12px; }
.modele { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; }
.modele__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.modele__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; color: #7A7A7A; font-size: 13px; }
.modele__meta span { display: inline-flex; align-items: center; gap: 6px; }
.modele__meta svg { width: 17px; height: 17px; }
.modele__actions { display: flex; align-items: center; gap: 4px; }
.coche-validation { display: inline-flex; width: 22px; height: 22px; }

/* ---------- Assistant Nouvel arrivant -------------------------------- */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); padding: 26px 20px 8px; }
.pas { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; color: #9CA3AF; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.pas::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: #E5E7EB; z-index: 0; }
.pas:first-child::before { display: none; }
.pas--fait::before { background: var(--bleu); }
.pas__rond { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #D1D5DB; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; position: relative; z-index: 1; }
.pas--fait .pas__rond { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.pas--actif { color: var(--bleu-fonce); }

.photo { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px dashed var(--champ-bord); border-radius: var(--rayon-s); background: var(--champ); }
.photo img, .photo__vide { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #E8E8E8; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; color: #8A8A8A; }
.photo label { cursor: pointer; }

.grille-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grille-cases .case { padding: 12px 14px; border: 1px solid var(--bordure); border-radius: var(--rayon-s); }
.grille-cases .case:hover { background: var(--fond); }

.recap { margin: 0; }
.recap div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--bordure-claire); }
.recap dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #374151; }
.recap dd { margin: 0; font-weight: 600; text-align: right; }

.pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--bordure-claire); }

/* ---------- Besoin --------------------------------------------------- */
.table-besoins__entete, .besoin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
  gap: 16px;
  align-items: center;
  padding: 10px 20px;
}
.table-besoins__entete { background: #F8F8F8; color: var(--texte-faible); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--rayon) var(--rayon) 0 0; }
.besoin { border-top: 1px solid var(--bordure-claire); }

/* ---------- Suivi ---------------------------------------------------- */
.fiche-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; }
.retour { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--bordure); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; padding: 10px; }
.retour:hover { background: var(--fond); }
.fiche-tete__infos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--texte-doux); font-size: 13px; }
.barre-onglets { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }

.plan { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.phase { margin-bottom: 26px; }
.phase__titre { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 15px; font-weight: 700; }
.phase__titre .bulle { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.phase__titre .bulle svg { width: 22px; height: 22px; }
.phase__compte { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--texte-faible); }
.taches { position: relative; padding-left: 26px; display: flex; flex-direction: column; gap: 12px; }
.taches::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: #E1E5E7; }

.tache { position: relative; display: flex; gap: 12px; padding: 14px 16px; border: 1px solid #E6E6E6; border-radius: var(--rayon); background: var(--surface); cursor: pointer; }
.tache:hover { border-color: var(--bleu-100); background: #FBFCFF; }
.tache::before { content: ""; position: absolute; left: -23px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: #D9D9D9; border: 2px solid var(--fond); }
.tache--faite { background: var(--vert-50); border-color: var(--vert-bord); }
.tache--faite:hover { background: #E2F4E7; border-color: var(--vert-bord); }
.tache--faite::before { background: #4CAF50; }
.tache--retard::before { background: var(--rouge-vif); }
.tache__corps { flex: 1; min-width: 0; }
.tache__haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tache__titre { font-weight: 600; font-size: 15px; }
.tache--faite .tache__titre { color: var(--vert-fonce); }
.tache__desc { color: #4B5563; font-size: 13px; margin: 6px 0 10px; }
.tache__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: var(--texte-doux); }
.tache__pied .retard { color: var(--rouge); font-weight: 600; }
.tache__pied svg { width: 15px; height: 15px; vertical-align: -3px; }
.tache__actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.btn-fait { width: 36px; height: 36px; border-radius: 50%; border: none; background: #E6E6E6; padding: 7px; display: inline-flex; }
.btn-fait:hover { background: var(--bleu-100); }

.anneau-carte { padding: 22px; text-align: center; position: sticky; top: 20px; }
.anneau-carte__titre { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4A5568; margin-bottom: 14px; }
.anneau { width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.anneau__centre { width: 112px; height: 112px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }

.details { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.details div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--bordure-claire); }
.details dt { color: var(--texte-doux); }
.details dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.zone-danger { border-color: #F8C9C4; }
.zone-danger p { margin: 0 0 14px; color: #B42318; }

.besoins-liste { list-style: none; margin: 0; padding: 0; }
.besoins-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bordure-claire); }

/* ---------- Fenêtres (modales et panneau latéral) -------------------- */
.voile { position: fixed; inset: 0; background: rgba(26, 26, 26, .55); z-index: 30; display: none; }
.voile--visible { display: block; }
.modale {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--ombre-forte);
  z-index: 31;
}
.modale--petite { width: min(520px, calc(100vw - 32px)); }
.modale__entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; background: #F7F7F7; border-bottom: 1px solid #ECECEC; position: sticky; top: 0; z-index: 1; }
.modale__corps { padding: 24px; }
.modale__section { color: var(--bleu-fonce); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; }
.modale__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.modale__colonnes > div { display: flex; flex-direction: column; gap: 14px; }

.panneau {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 100vw);
  background: var(--fond);
  box-shadow: var(--ombre-forte);
  overflow-y: auto;
  z-index: 31;
  padding: 14px;
}
.panneau .carte { margin-bottom: 12px; }
.panneau__tete { padding: 18px 20px; position: relative; }
.panneau__tete h2 { font-size: 21px; font-weight: 700; margin: 10px 40px 4px 0; }
.panneau__fermer { position: absolute; top: 12px; right: 12px; }
.panneau__section { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.etiquette { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-faible); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.etiquette svg { width: 16px; height: 16px; }
.valide { padding: 12px 14px; border-radius: var(--rayon-s); background: var(--vert-50); border: 1px solid var(--vert-bord); color: #14532D; font-size: 13px; }
.responsable { display: flex; align-items: center; gap: 10px; }
.consignes { font-style: italic; color: #374151; margin: 0; }
.fichier { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid var(--bordure-claire); border-radius: var(--rayon-s); background: #fff; text-align: left; }
.fichier:hover { background: var(--fond); }
.fichier img { width: 36px; height: 36px; }
.signature { padding: 16px; border: 1px solid var(--bordure); border-radius: var(--rayon-s); background: #FAFAFA; display: flex; flex-direction: column; gap: 14px; }

.lecture { padding: 9px 12px; border: 1px solid var(--champ-bord); border-radius: var(--rayon-s); background: var(--champ); min-height: 40px; color: #333; }

/* ---------- Notify() ------------------------------------------------- */
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border-radius: var(--rayon-s);
  font-weight: 600;
  box-shadow: var(--ombre-forte);
  z-index: 50;
}
.toast--visible { display: flex; }
.toast--success { background: #DFF6DD; color: #0E5C0E; }
.toast--error   { background: #FDE7E9; color: #A80000; }
.toast--warning { background: #FFF4CE; color: #6B5100; }
.toast--info    { background: #EEF3FD; color: #2F52A6; }

/* ---------- Adaptation tablette et téléphone ------------------------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { grid-template-columns: 1fr; }
  .anneau-carte { position: static; order: -1; display: flex; align-items: center; gap: 20px; text-align: left; }
  .anneau-carte__titre { margin-bottom: 4px; }
  .anneau { width: 96px; height: 96px; margin: 0; flex: 0 0 96px; }
  .anneau__centre { width: 76px; height: 76px; font-size: 19px; }
}

@media (max-width: 1023px) {
  /* minmax(0, 1fr) et min-width: 0 : la barre de navigation défile au lieu d'élargir la page */
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav { min-width: 0; }
  .rail { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; }
  .marque { padding: 10px 14px; }
  .marque__sous { display: none; }
  .nav { flex-direction: row; overflow-x: auto; padding: 0 6px; gap: 2px; }
  .nav__item { padding: 8px 10px; }
  .nav__item--actif, .nav__item--actif:hover { box-shadow: inset 0 -3px 0 var(--bleu); }
  .utilisateur { background: transparent; padding: 8px 14px; }
  .utilisateur > div:last-child { display: none; }
  .contenu { padding: 22px 18px 32px; }

  .liste-entete { display: none; }
  .ligne {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "personne statut" "role role" "date progression";
    gap: 8px 14px;
  }
  .ligne > :nth-child(1) { grid-area: personne; }
  .ligne > :nth-child(2) { grid-area: role; padding-left: 50px; }
  .ligne > :nth-child(3) { grid-area: date; padding-left: 50px; }
  .ligne > :nth-child(4) { grid-area: progression; }
  .ligne > :nth-child(5) { grid-area: statut; }
  .ligne > :nth-child(6) { display: none; }
  .grille-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  h1 { font-size: 22px; }
  .marque__nom, .nav__item span { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; gap: 10px; }
  .kpi .bulle { width: 36px; height: 36px; flex-basis: 36px; }
  .kpi__valeur { font-size: 22px; }
  .filtres, .filtres .champ, .recherche, .recherche .champ { width: 100%; min-width: 0; }
  .grille-form, .modale__colonnes, .details, .grille-cases { grid-template-columns: 1fr; }
  .stepper .pas span:last-child { display: none; }
  .modele { grid-template-columns: minmax(0, 1fr) auto; }
  .modele > .avatar { display: none; }
  .table-besoins__entete { display: none; }
  .besoin { grid-template-columns: minmax(0, 1fr) 40px; }
  .besoin > :nth-child(2) { grid-column: 1; }
  .besoin > :nth-child(3) { grid-row: 1 / span 2; grid-column: 2; }
  /* Les actions d'une tâche passent dans l'angle de la carte pour ne pas ajouter une ligne */
  .tache { padding-right: 52px; }
  .tache__actions { position: absolute; top: 8px; right: 8px; gap: 4px; }
  .btn-fait { width: 32px; height: 32px; padding: 6px; }
  /* Onglets sur une seule ligne, défilants */
  .barre-onglets .segments { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .segment { white-space: nowrap; padding: 7px 12px; }
  .ligne > :nth-child(2), .ligne > :nth-child(3) { padding-left: 0; }
}