/* ==========================================================================
   Composants d'interface — grammaire macOS.
   ========================================================================== */

/* ==========================================================================
   1. Fenêtre : barre latérale + zone de contenu
   ========================================================================== */

.fenetre {
  display: grid;
  grid-template-columns: auto 1fr;
  /* Ligne EXPLICITE bornée à la hauteur d'écran. Sans elle, la ligne implicite
     est en `auto` et grandit avec le contenu : la zone de travail dépasse alors
     le viewport, `body{overflow:hidden}` la coupe, et plus rien ne défile —
     c'était la cause du blocage de défilement sur mobile. */
  grid-template-rows: 100vh;
  grid-template-rows: 100dvh;
  height: 100vh;
  height: 100dvh;
  background: var(--fond-contenu);
  overflow: hidden;
}

/* ---- Barre latérale -----------------------------------------------------
   La vibrance (flou + sursaturation du fond) est la signature visuelle de
   macOS. `saturate` est ce qui la distingue d'un simple flou : sans elle, le
   panneau paraît terne et « web ». */
.laterale {
  width: 232px;
  display: flex;
  flex-direction: column;
  background: rgb(var(--fond-barre) / 0.72);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-right: var(--filet) solid var(--separateur);
  transition: width var(--moyen) var(--sortie);
  overflow: hidden;
}
.laterale.repliee { width: 0; border-right-width: 0; }

/* Repli navigateur : sans vibrance, on retombe sur un fond opaque plutôt que
   sur un panneau translucide illisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .laterale { background: rgb(var(--fond-barre)); }
}

.laterale-entete {
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: 0 var(--e5);
  flex-shrink: 0;
}

.marque {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-width: 0;
}
.marque-sceau {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: var(--r-controle);
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-fort));
  color: var(--sur-accent);
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  letter-spacing: -0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 var(--filet) 0 rgba(255, 255, 255, 0.28);
}
.marque-texte { min-width: 0; line-height: 1.2; }
.marque-nom {
  font-size: var(--t-base);
  font-weight: var(--graisse-demi);
  letter-spacing: -0.01em;
}
.marque-env {
  font-size: var(--t-mini);
  color: var(--texte-3);
}

.laterale-navigation {
  flex: 1;
  overflow-y: auto;
  padding: var(--e2) var(--e4) var(--e5);
}

.groupe-nav { margin-top: var(--e5); }
.groupe-nav:first-child { margin-top: var(--e2); }
.groupe-nav > .entete-groupe { padding: 0 var(--e4) var(--e2); }

/* Élément de navigation : pilule arrondie, comme les barres latérales des
   applications système (Réglages, Mail, Finder). */
.lien-nav {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: 6px var(--e4);
  border-radius: var(--r-controle);
  color: var(--texte);
  font-size: var(--t-base);
  font-weight: var(--graisse-moyenne);
  cursor: pointer;
  user-select: none;
  transition: background var(--court) var(--sortie);
}
.lien-nav:hover { background: var(--fond-survol); text-decoration: none; }
.lien-nav:active { background: var(--fond-actif); }
.lien-nav.actif {
  background: var(--accent);
  color: var(--sur-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}
.lien-nav.actif .icone { opacity: 1; }
.lien-nav .icone {
  width: 17px; height: 17px;
  flex-shrink: 0;
  opacity: 0.62;
  stroke-width: 1.7;
}
.lien-nav .compteur {
  margin-left: auto;
  font-size: var(--t-mini);
  font-variant-numeric: tabular-nums;
  color: var(--texte-3);
  background: var(--fond-actif);
  padding: 1px 6px;
  border-radius: var(--r-pilule);
}
.lien-nav.actif .compteur {
  color: var(--sur-accent);
  background: rgba(255, 255, 255, 0.22);
}

.laterale-pied {
  padding: var(--e4);
  border-top: var(--filet) solid var(--separateur);
  flex-shrink: 0;
}

.carte-utilisateur {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3);
  border-radius: var(--r-controle);
  cursor: pointer;
  transition: background var(--court) var(--sortie);
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
}
.carte-utilisateur:hover { background: var(--fond-survol); }
.pastille {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-doux);
  color: var(--accent-fort);
  font-size: var(--t-mini);
  font-weight: var(--graisse-forte);
  flex-shrink: 0;
}

/* ---- Zone de travail ---------------------------------------------------- */
.travail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Indispensable : un enfant de grille (comme un enfant flex) a min-height
     auto par défaut et refuse de rétrécir sous sa hauteur de contenu. Sans ce
     0, `.contenu` ne peut jamais devenir la zone défilante. */
  min-height: 0;
  background: var(--fond-contenu);
}

/* ---- Barre d'outils -----------------------------------------------------
   Translucide et collante : le contenu défile visiblement dessous, comme dans
   toutes les applications macOS récentes. */
.barre-outils {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: 0 var(--e7);
  background: rgb(var(--fond-barre) / 0.78);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: var(--filet) solid var(--separateur);
  position: relative;
  z-index: 20;
}
.barre-outils h1 { font-size: var(--t-titre); font-weight: var(--graisse-demi); }
.barre-outils .sous-titre {
  font-size: var(--t-petit);
  color: var(--texte-3);
  margin-top: -2px;
}

.contenu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Défilement fluide même quand le doigt quitte l'écran, et sans propager le
     rebond au corps de page (déjà verrouillé) sur iOS. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--e7);
  scroll-behavior: smooth;
}
.contenu.sans-marge { padding: 0; }
.large { max-width: 1320px; margin: 0 auto; }

/* ==========================================================================
   2. Boutons
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  height: 28px;
  padding: 0 var(--e5);
  border-radius: var(--r-controle);
  border: var(--filet) solid var(--separateur-fort);
  background: var(--fond-eleve);
  color: var(--texte);
  font-size: var(--t-base);
  font-weight: var(--graisse-moyenne);
  white-space: nowrap;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: background var(--court) var(--sortie), transform var(--court) var(--ressort),
              box-shadow var(--court) var(--sortie), opacity var(--court) var(--sortie);
}
.bouton:hover { background: var(--fond-survol); }
/* L'enfoncement bref donne la sensation physique du contrôle natif. */
.bouton:active { transform: scale(0.97); }
.bouton:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }

.bouton .icone { width: 15px; height: 15px; stroke-width: 1.9; }

.bouton.principal {
  background: var(--accent);
  border-color: transparent;
  color: var(--sur-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), inset 0 var(--filet) 0 rgba(255, 255, 255, 0.22);
}
.bouton.principal:hover { background: var(--accent-fort); }

.bouton.discret {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--texte-2);
}
.bouton.discret:hover { background: var(--fond-survol); color: var(--texte); }

.bouton.danger { color: var(--rouge); }
.bouton.danger:hover { background: var(--rouge-doux); }

.bouton.grand { height: 34px; padding: 0 var(--e6); font-size: var(--t-corps); }
.bouton.icone-seule { width: 28px; padding: 0; }

/* Contrôle segmenté : le sélecteur de vue macOS. */
.segmente {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--fond-enfonce);
  border-radius: var(--r-controle);
  border: var(--filet) solid var(--separateur);
}
.segmente button {
  height: 22px;
  padding: 0 var(--e5);
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--texte-2);
  font-size: var(--t-petit);
  font-weight: var(--graisse-moyenne);
  transition: background var(--court) var(--sortie), color var(--court) var(--sortie);
}
.segmente button:hover { color: var(--texte); }
.segmente button.actif {
  background: var(--fond-eleve);
  color: var(--texte);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 0 0 var(--filet) rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   3. Champs de saisie
   ========================================================================== */

.champ { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.champ > label {
  font-size: var(--t-petit);
  font-weight: var(--graisse-moyenne);
  color: var(--texte-2);
}
.champ .aide { font-size: var(--t-mini); color: var(--texte-3); }
.champ .erreur { font-size: var(--t-mini); color: var(--rouge); }

.saisie,
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"],
.champ input[type="number"], .champ input[type="date"], .champ input[type="tel"],
.champ select, .champ textarea {
  width: 100%;
  height: 30px;
  padding: 0 var(--e4);
  border-radius: var(--r-controle);
  border: var(--filet) solid var(--separateur-fort);
  background: var(--fond-eleve);
  color: var(--texte);
  font-size: var(--t-base);
  transition: border-color var(--court) var(--sortie), box-shadow var(--court) var(--sortie);
  appearance: none;
}
.champ textarea { height: auto; min-height: 68px; padding: var(--e3) var(--e4); resize: vertical; line-height: 1.5; }

.saisie:focus,
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-doux);
}
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"] {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px var(--rouge-doux);
}
.champ input:disabled, .champ select:disabled, .champ textarea:disabled {
  background: var(--fond-enfonce);
  color: var(--texte-3);
  cursor: not-allowed;
}
.champ input[readonly] { background: var(--fond-enfonce); color: var(--texte-2); }

/* Chevron du menu déroulant, dessiné en SVG intégré pour éviter une requête. */
.champ select {
  padding-right: var(--e8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%238a8a8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e4) center;
}

/* Interrupteur — bascule macOS. */
.bascule {
  position: relative;
  width: 38px; height: 22px;
  flex-shrink: 0;
  border-radius: var(--r-pilule);
  border: none;
  background: var(--separateur-fort);
  transition: background var(--moyen) var(--sortie);
  padding: 0;
}
.bascule::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform var(--moyen) var(--ressort);
}
.bascule[aria-checked="true"] { background: var(--accent); }
.bascule[aria-checked="true"]::after { transform: translateX(16px); }

.case {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e2) 0;
  font-size: var(--t-base);
  cursor: pointer;
  user-select: none;
}
.case input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* Grille de formulaire : deux colonnes qui se replient d'elles-mêmes. */
.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e5) var(--e6);
}
.grille-champs .pleine-largeur { grid-column: 1 / -1; }

/* ==========================================================================
   4. Cartes, sections, indicateurs
   ========================================================================== */

.carte {
  background: var(--fond-eleve);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.carte-entete {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e5) var(--e6);
  border-bottom: var(--filet) solid var(--separateur);
}
.carte-entete h2, .carte-entete h3 { font-size: var(--t-corps); font-weight: var(--graisse-demi); }
.carte-corps { padding: var(--e6); }
.carte-corps.serre { padding: var(--e5); }

.section-fiche { margin-bottom: var(--e8); }
.section-fiche > .entete-groupe { margin-bottom: var(--e5); }

/* Grille d'indicateurs du tableau de bord. */
.grille-indicateurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--e5);
  margin-bottom: var(--e8);
}
.indicateur {
  background: var(--fond-eleve);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--e5) var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  transition: transform var(--moyen) var(--ressort), box-shadow var(--moyen) var(--sortie);
}
.indicateur.cliquable { cursor: pointer; }
.indicateur.cliquable:hover { transform: translateY(-1px); box-shadow: var(--ombre-elevee); }
.indicateur-libelle {
  font-size: var(--t-mini);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.indicateur-valeur {
  font-family: var(--police-affichage);
  font-size: var(--t-geant);
  font-weight: var(--graisse-forte);
  letter-spacing: -0.028em;
  line-height: 1.1;
}
.indicateur-note { font-size: var(--t-petit); color: var(--texte-2); }
.indicateur.accentue .indicateur-valeur { color: var(--accent-fort); }

/* ==========================================================================
   5. Tableaux
   ========================================================================== */

.tableau-cadre {
  background: var(--fond-eleve);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.tableau-defilement { overflow-x: auto; }

table.tableau {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-base);
}
table.tableau thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: var(--e3) var(--e5);
  font-size: var(--t-mini);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-3);
  background: var(--fond-eleve);
  border-bottom: var(--filet) solid var(--separateur);
  white-space: nowrap;
  user-select: none;
}
table.tableau thead th.triable { cursor: pointer; }
table.tableau thead th.triable:hover { color: var(--texte); }
table.tableau thead th .fleche { opacity: 0.55; margin-left: 3px; }

table.tableau tbody td {
  padding: var(--e4) var(--e5);
  border-bottom: var(--filet) solid var(--separateur);
  vertical-align: middle;
}
table.tableau tbody tr:last-child td { border-bottom: none; }
table.tableau tbody tr { transition: background var(--court) var(--sortie); }
table.tableau tbody tr.cliquable { cursor: pointer; }
table.tableau tbody tr.cliquable:hover { background: var(--fond-survol); }
table.tableau tbody tr.selectionnee { background: var(--accent-doux); }

td.numerique, th.numerique { text-align: right; font-variant-numeric: tabular-nums; }
td.principale { font-weight: var(--graisse-demi); }
td.code { font-family: var(--police-mono); font-size: var(--t-petit); color: var(--texte-3); }

/* ==========================================================================
   6. Pastilles d'état
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  height: 19px;
  padding: 0 var(--e4);
  border-radius: var(--r-pilule);
  font-size: var(--t-mini);
  font-weight: var(--graisse-demi);
  white-space: nowrap;
  background: var(--gris-doux);
  color: var(--gris);
}
.badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge.sans-point::before { display: none; }
.badge.vert { background: var(--vert-doux); color: var(--vert); }
.badge.orange { background: var(--orange-doux); color: var(--orange); }
.badge.rouge { background: var(--rouge-doux); color: var(--rouge); }
.badge.bleu { background: var(--bleu-doux); color: var(--bleu); }
.badge.violet { background: var(--violet-doux); color: var(--violet); }
.badge.accent { background: var(--accent-doux); color: var(--accent-fort); }

/* ==========================================================================
   7. Feuilles modales
   ========================================================================== */

.voile {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: start center;
  padding: var(--e11) var(--e6) var(--e6);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: apparaitre var(--moyen) var(--sortie);
  overflow-y: auto;
}
.feuille {
  width: min(760px, 100%);
  background: var(--fond-eleve);
  border-radius: var(--r-panneau);
  box-shadow: var(--ombre-flottante);
  /* La feuille descend du haut de la fenêtre : c'est le geste macOS, pas
     l'apparition centrée du web. */
  animation: descendre var(--long) var(--ressort);
  overflow: hidden;
  margin-bottom: var(--e9);
}
.feuille-entete {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e5) var(--e6);
  border-bottom: var(--filet) solid var(--separateur);
}
.feuille-entete h2 { font-size: var(--t-corps); font-weight: var(--graisse-demi); }
.feuille-corps { padding: var(--e6); max-height: min(66vh, 640px); overflow-y: auto; }
.feuille-pied {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e4);
  padding: var(--e5) var(--e6);
  border-top: var(--filet) solid var(--separateur);
  background: var(--fond-enfonce);
}

@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }
@keyframes descendre {
  from { opacity: 0; transform: translateY(-14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   8. Palette de commandes (⌘K)
   ========================================================================== */

.palette {
  width: min(580px, 100%);
  background: rgb(var(--fond-barre) / 0.92);
  backdrop-filter: saturate(180%) blur(32px);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  border-radius: var(--r-panneau);
  box-shadow: var(--ombre-flottante);
  overflow: hidden;
  animation: descendre var(--moyen) var(--ressort);
}
.palette input {
  width: 100%;
  height: 46px;
  padding: 0 var(--e6);
  border: none;
  border-bottom: var(--filet) solid var(--separateur);
  background: transparent;
  font-size: var(--t-titre);
  color: var(--texte);
}
.palette input::placeholder { color: var(--texte-3); }
.palette input:focus { outline: none; }
.palette-liste { max-height: 340px; overflow-y: auto; padding: var(--e3); }
.palette-item {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-controle);
  cursor: pointer;
  font-size: var(--t-corps);
}
.palette-item .icone { width: 16px; height: 16px; opacity: 0.6; flex-shrink: 0; }
.palette-item.survole { background: var(--accent); color: var(--sur-accent); }
.palette-item.survole .icone, .palette-item.survole .muet { opacity: 1; color: inherit; }
.palette-item .contexte { margin-left: auto; font-size: var(--t-petit); color: var(--texte-3); }
.palette-item.survole .contexte { color: rgba(255, 255, 255, 0.72); }

kbd {
  font-family: var(--police);
  font-size: var(--t-mini);
  padding: 1px 5px;
  border-radius: var(--r-petit);
  background: var(--fond-actif);
  color: var(--texte-2);
  border: var(--filet) solid var(--separateur);
}

/* ==========================================================================
   9. Notifications éphémères
   ========================================================================== */

.zone-notifications {
  position: fixed;
  top: var(--e6);
  right: var(--e6);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  pointer-events: none;
  max-width: 380px;
}
.notification {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  padding: var(--e5);
  border-radius: var(--r-carte);
  background: rgb(var(--fond-barre) / 0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--ombre-flottante);
  font-size: var(--t-base);
  pointer-events: auto;
  animation: glisser var(--long) var(--ressort);
}
.notification.sortante { animation: sortir var(--moyen) var(--sortie) forwards; }
.notification .icone { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.notification.succes .icone { color: var(--vert); }
.notification.alerte .icone { color: var(--orange); }
.notification.echec .icone { color: var(--rouge); }
.notification .titre { font-weight: var(--graisse-demi); }
.notification .detail { color: var(--texte-2); margin-top: 1px; }

@keyframes glisser {
  from { opacity: 0; transform: translateX(20px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes sortir {
  to { opacity: 0; transform: translateX(20px) scale(0.97); }
}

/* ==========================================================================
   10. États vides et squelettes de chargement
   ========================================================================== */

.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e4);
  padding: var(--e11) var(--e6);
}
/* Dans une carte, l'état vide reste discret : sa hauteur ne doit pas dicter
   celle de la carte, ni déséquilibrer une rangée de cartes côte à côte. */
.carte .vide {
  padding: var(--e8) var(--e6);
  text-align: center;
  color: var(--texte-2);
}
.vide .icone { width: 34px; height: 34px; opacity: 0.28; stroke-width: 1.4; }
.vide h3 { font-size: var(--t-corps); font-weight: var(--graisse-demi); color: var(--texte); }
.vide p { max-width: 380px; font-size: var(--t-base); }

/* Le squelette respecte la forme du contenu à venir : la page ne saute pas
   quand les données arrivent. */
.squelette {
  border-radius: var(--r-petit);
  background: linear-gradient(90deg, var(--fond-enfonce) 25%, var(--fond-survol) 37%, var(--fond-enfonce) 63%);
  background-size: 400% 100%;
  animation: chatoyer 1.3s ease-in-out infinite;
}
@keyframes chatoyer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ==========================================================================
   11. Calendrier
   ========================================================================== */

.calendrier { display: flex; flex-direction: column; min-width: 780px; }
.calendrier-entete {
  display: grid;
  grid-template-columns: 190px 1fr;
  border-bottom: var(--filet) solid var(--separateur);
  position: sticky; top: 0; z-index: 3;
  background: var(--fond-eleve);
}
.calendrier-jours { display: grid; }
.calendrier-jour {
  padding: var(--e3) 0;
  text-align: center;
  font-size: var(--t-mini);
  color: var(--texte-3);
  border-left: var(--filet) solid var(--separateur);
}
.calendrier-jour.weekend { background: var(--fond-enfonce); }
.calendrier-jour.aujourdhui { color: var(--accent-fort); font-weight: var(--graisse-forte); }
.calendrier-jour .numero { display: block; font-size: var(--t-base); color: var(--texte); font-weight: var(--graisse-moyenne); }
.calendrier-jour.aujourdhui .numero { color: var(--accent-fort); }

.calendrier-ligne {
  display: grid;
  grid-template-columns: 190px 1fr;
  border-bottom: var(--filet) solid var(--separateur);
  min-height: 42px;
}
.calendrier-ligne:last-child { border-bottom: none; }
.calendrier-bien {
  padding: var(--e4) var(--e5);
  font-size: var(--t-base);
  font-weight: var(--graisse-moyenne);
  display: flex; flex-direction: column; justify-content: center;
  position: sticky; left: 0; z-index: 2;
  background: var(--fond-eleve);
  border-right: var(--filet) solid var(--separateur);
}
.calendrier-piste { position: relative; display: grid; }
.calendrier-cellule { border-left: var(--filet) solid var(--separateur); }
.calendrier-cellule.weekend { background: var(--fond-enfonce); }

.sejour {
  position: absolute;
  /* Hauteur fixe : la position verticale encode la sous-ligne (voir
     calendrier.js), elle ne peut donc plus dépendre de la hauteur de rangée. */
  height: 26px;
  border-radius: var(--r-petit);
  padding: 0 var(--e3);
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-mini);
  font-weight: var(--graisse-demi);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform var(--court) var(--ressort), filter var(--court) var(--sortie);
}
.sejour:hover { transform: scale(1.015); filter: brightness(1.06); z-index: 4; }

/* Séjour engagé : aplat plein — la masse colorée se lit d'un coup d'œil,
   c'est elle qui donne le taux de remplissage d'une ligne. */
.sejour.ferme {
  background: var(--planning);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

/* Demande non validée : contour seul. La distinction avec un séjour engagé
   est structurelle (rempli / vide), donc lisible sans perception des
   couleurs — et pas seulement une nuance de teinte. */
.sejour.provisoire {
  background: var(--planning-doux);
  color: var(--texte);
  box-shadow: inset 0 0 0 1.5px var(--planning);
}

/* Blocage : ce n'est pas une vente. Hachures neutres, aucune teinte de
   planning — l'œil ne le comptabilise pas comme du chiffre d'affaires. */
.sejour.blocage {
  background:
    repeating-linear-gradient(-45deg,
      var(--separateur-fort) 0 5px, transparent 5px 10px),
    var(--fond-enfonce);
  color: var(--texte-2);
  box-shadow: inset 0 0 0 var(--filet) var(--separateur-fort);
}

/* Séjour en cours aujourd'hui : liseré clair au bord gauche. */
.sejour.en-cours::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #fff;
  opacity: 0.85;
}

/* Légende du planning : l'identité n'est jamais portée par la couleur seule,
   la forme est nommée explicitement. */
.legende-planning {
  display: flex; align-items: center; gap: var(--e6);
  flex-wrap: wrap;
  font-size: var(--t-petit);
  color: var(--texte-2);
}
.legende-planning span { display: inline-flex; align-items: center; gap: var(--e3); }
.legende-puce {
  width: 22px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legende-puce.ferme { background: var(--planning); }
.legende-puce.provisoire { background: var(--planning-doux); box-shadow: inset 0 0 0 1.5px var(--planning); }
.legende-puce.blocage {
  background:
    repeating-linear-gradient(-45deg, var(--separateur-fort) 0 4px, transparent 4px 8px),
    var(--fond-enfonce);
  box-shadow: inset 0 0 0 var(--filet) var(--separateur-fort);
}

/* ==========================================================================
   12. Barre de filtres
   ========================================================================== */

.barre-filtres {
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e5);
}
.recherche { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.recherche input { padding-left: var(--e9); height: 30px; }
.recherche .icone {
  position: absolute;
  left: var(--e4); top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--texte-3);
  pointer-events: none;
}
.filtre-select { min-width: 130px; }
.filtre-select select { height: 30px; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  border-top: var(--filet) solid var(--separateur);
  font-size: var(--t-petit);
  color: var(--texte-2);
}

/* ==========================================================================
   13. Bandeau d'avertissement (montants indicatifs — CDC CS-1)
   ========================================================================== */

.bandeau {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  border-radius: var(--r-carte);
  font-size: var(--t-petit);
  line-height: 1.5;
  background: var(--orange-doux);
  color: var(--texte);
  border: var(--filet) solid transparent;
}
.bandeau .icone { width: 16px; height: 16px; color: var(--orange); flex-shrink: 0; margin-top: 1px; }
.bandeau.info { background: var(--bleu-doux); }
.bandeau.info .icone { color: var(--bleu); }
.bandeau strong { font-weight: var(--graisse-demi); }

/* ==========================================================================
   14. Page de connexion
   ========================================================================== */

.page-connexion {
  height: 100vh; height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--e6);
  /* Dégradé sourd rappelant la lumière des Alpilles, sans image à charger. */
  background:
    radial-gradient(1100px 620px at 18% -8%, var(--accent-doux), transparent 62%),
    radial-gradient(880px 520px at 108% 108%, var(--bleu-doux), transparent 58%),
    var(--fond-bureau);
}
.carte-connexion {
  width: min(392px, 100%);
  background: var(--fond-eleve);
  border-radius: var(--r-panneau);
  box-shadow: var(--ombre-flottante);
  padding: var(--e9) var(--e8) var(--e8);
  animation: descendre var(--long) var(--ressort);
}
.carte-connexion .marque-sceau { width: 42px; height: 42px; font-size: var(--t-corps); margin: 0 auto; }
.carte-connexion h1 { text-align: center; margin-top: var(--e5); font-size: var(--t-titre); }
.carte-connexion .sous { text-align: center; color: var(--texte-2); font-size: var(--t-petit); margin-top: var(--e2); }
.carte-connexion form { margin-top: var(--e8); display: flex; flex-direction: column; gap: var(--e5); }
.carte-connexion .bouton { width: 100%; height: 34px; }
.mention-legale {
  margin-top: var(--e7);
  text-align: center;
  font-size: var(--t-mini);
  color: var(--texte-3);
  line-height: 1.5;
}

/* ==========================================================================
   15. Adaptation aux petits écrans
   ========================================================================== */

@media (max-width: 900px) {
  .fenetre { grid-template-columns: 1fr; }
  .laterale {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 262px;
    transform: translateX(-100%);
    transition: transform var(--moyen) var(--sortie);
    box-shadow: var(--ombre-flottante);
  }
  .laterale.ouverte { transform: none; }
  .laterale.repliee { width: 262px; }
  .contenu { padding: var(--e5); }
  .barre-outils { padding: 0 var(--e5); }
  .grille-indicateurs { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e4); }
  .indicateur-valeur { font-size: 1.6rem; }
}

.rideau-laterale {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0, 0, 0, 0.28);
  animation: apparaitre var(--court) var(--sortie);
}
@media (min-width: 901px) { .rideau-laterale { display: none; } }

/* ==========================================================================
   16. Barres de rapport (occupation par bien)
   Une seule grandeur encodée par la longueur, une seule teinte, valeur en
   label direct. Pas de palette catégorielle : rien à valider côté CVD.
   ========================================================================== */

.barre-ligne {
  display: grid;
  grid-template-columns: 190px 1fr 56px;
  align-items: center;
  gap: var(--e5);
}
.barre-etiquette {
  font-size: var(--t-base);
  font-weight: var(--graisse-moyenne);
  text-align: right;
  color: var(--texte-2);
}
.barre-piste {
  position: relative;
  height: 22px;
  background: var(--fond-enfonce);
  border-radius: var(--r-petit);
  overflow: hidden;
}
.barre-remplissage {
  height: 100%;
  background: var(--planning);
  border-radius: var(--r-petit);
  /* La barre s'étire à l'arrivée des données : le classement se lit comme un
     remplissage plutôt qu'un saut brut. */
  animation: barre-pousse var(--long) var(--sortie);
  transform-origin: left;
}
/* Valeur toujours hors de la barre, en colonne dédiée : lisible quelle que
   soit la longueur du remplissage, sans jamais le chevaucher. */
.barre-valeur {
  font-size: var(--t-petit);
  font-weight: var(--graisse-demi);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

@keyframes barre-pousse {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

table.tableau tfoot td {
  padding: var(--e4) var(--e5);
  background: var(--fond-enfonce);
}

@media (max-width: 640px) {
  .barre-ligne { grid-template-columns: 96px 1fr 48px; gap: var(--e4); }
}

/* ==========================================================================
   17. Portail propriétaire (CDC §8.2)

   Surface publique, sans barre latérale ni barre d'outils : le propriétaire
   n'a pas de bureau à piloter, il consulte son activité. On garde les mêmes
   jetons et les mêmes cartes que l'ERP — c'est la même marque — mais une mise
   en page en colonne unique, centrée, qui se lit du téléphone au grand écran.
   ========================================================================== */

.portail {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond-contenu);
  display: flex;
  flex-direction: column;
}

.portail-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--e5);
  padding: var(--e5) var(--e7);
  background: rgb(var(--fond-barre) / 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--filet) solid var(--separateur);
}
.portail-entete .marque-sceau { width: 30px; height: 30px; font-size: var(--t-petit); }
.portail-titre { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.portail-titre strong { font-size: var(--t-corps); font-weight: var(--graisse-demi); }
.portail-titre span { font-size: var(--t-petit); color: var(--texte-3); }

.portail-corps {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--e8) var(--e7) var(--e10);
  flex: 1;
}
.portail-corps > .section-fiche:last-child { margin-bottom: 0; }

.portail-pied {
  border-top: var(--filet) solid var(--separateur);
  padding: var(--e7);
  text-align: center;
  font-size: var(--t-petit);
  color: var(--texte-3);
}

/* Aperçu administrateur (RH-2) : la bande doit être impossible à confondre
   avec le portail réel — un membre du staff doit toujours savoir qu'il
   regarde par-dessus l'épaule de quelqu'un, et que rien n'est actionnable. */
.portail-apercu {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4) var(--e7);
  background: var(--orange-doux);
  color: var(--orange);
  font-size: var(--t-base);
  font-weight: var(--graisse-moyenne);
  border-bottom: var(--filet) solid var(--separateur);
}
.portail-apercu .icone { width: 16px; height: 16px; flex: none; }

/* ---- Histogramme de tendance -------------------------------------------
   Une seule mesure à la fois (bascule nuits / revenus). Superposer deux
   échelles différentes sur un même axe produirait une comparaison visuelle
   qui ne veut rien dire : c'est le second axe qu'on refuse, pas la seconde
   mesure. */
.histo {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: var(--e5);
  height: 190px;
  padding-top: var(--e7);
}
.histo-colonne {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--e3);
  height: 100%;
  position: relative;
}
.histo-piste {
  width: 100%;
  max-width: 64px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  border-radius: var(--r-petit);
}
.histo-barre {
  width: 100%;
  min-height: 2px;
  background: var(--planning);
  /* Extrémité arrondie côté donnée seulement : la barre reste ancrée à la
     ligne de base, qui est la référence de lecture. */
  border-radius: var(--r-petit) var(--r-petit) 0 0;
  transform-origin: bottom;
  animation: barre-monte var(--long) var(--sortie);
}
/* Mois en cours : hachuré. Il est forcément plus bas — il n'est pas fini —
   et le signaler par la texture plutôt que par la seule couleur garde
   l'information lisible sans perception des teintes. */
.histo-colonne.en-cours .histo-barre {
  background:
    repeating-linear-gradient(-45deg,
      var(--planning) 0 5px, var(--planning-doux) 5px 10px);
  box-shadow: inset 0 0 0 var(--filet) var(--planning);
}
.histo-etiquette {
  font-size: var(--t-mini);
  color: var(--texte-3);
  font-weight: var(--graisse-moyenne);
  white-space: nowrap;
}
.histo-colonne.en-cours .histo-etiquette { color: var(--texte-2); }
/* Étiquette directe sur le seul mois record : un nombre sur chaque barre
   transformerait l'histogramme en tableau mal rangé. */
.histo-valeur {
  position: absolute;
  top: 0;
  font-size: var(--t-petit);
  font-weight: var(--graisse-demi);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Infobulle au survol ET au focus clavier : la valeur exacte de chaque mois
   reste atteignable sans souris. */
.histo-infobulle {
  position: absolute;
  bottom: calc(100% - 14px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: var(--e3) var(--e4);
  background: var(--fond-eleve);
  border-radius: var(--r-controle);
  box-shadow: var(--ombre-flottante);
  font-size: var(--t-petit);
  color: var(--texte);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--court) var(--sortie), transform var(--court) var(--sortie);
  z-index: 5;
}
.histo-colonne:hover .histo-infobulle,
.histo-colonne:focus-visible .histo-infobulle {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes barre-monte {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ---- Comparatif anonymisé (RG-45) --------------------------------------- */
.comparatif-ligne {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e5);
  padding: var(--e4) 0;
}
.comparatif-ligne + .comparatif-ligne { border-top: var(--filet) solid var(--separateur); }
.comparatif-mesure { font-size: var(--t-mini); color: var(--texte-3); text-align: center; }
.comparatif-valeur {
  font-size: var(--t-titre);
  font-weight: var(--graisse-demi);
  font-variant-numeric: tabular-nums;
}
.comparatif-valeur.mienne { color: var(--accent-fort); text-align: right; }
.comparatif-valeur.pair { color: var(--texte-2); text-align: left; }

/* ---- Galerie avant / après ---------------------------------------------- */
.galerie-couple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e5);
}
.galerie-volet { display: flex; flex-direction: column; gap: var(--e3); }
.galerie-vignettes { display: flex; gap: var(--e3); flex-wrap: wrap; }
.galerie-vignettes img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-petit);
  background: var(--fond-enfonce);
  box-shadow: 0 0 0 var(--filet) var(--separateur);
}

@media (max-width: 640px) {
  .portail-entete { padding: var(--e4) var(--e5); gap: var(--e4); }
  /* L'en-tête tient sur une ligne : sur un téléphone, chaque ligne prise par
     la barre collante est une ligne de contenu en moins. */
  .portail-titre strong { font-size: var(--t-base); }
  .portail-entete .bouton { padding-inline: var(--e4); }
  .portail-corps { padding: var(--e6) var(--e5) var(--e9); }
  .histo { height: 150px; gap: var(--e3); }
  .comparatif-ligne { grid-template-columns: 1fr auto 1fr; gap: var(--e3); }
  .comparatif-valeur { font-size: var(--t-corps); }
}

/* ==========================================================================
   18. Page terrain (CDC §8.3)

   Interface pour un téléphone tenu à bout de bras, en plein soleil, parfois
   avec des gants. Trois conséquences concrètes, qui expliquent tout l'écart
   avec le reste de l'application :

   - **Cibles tactiles de 48 px minimum.** C'est la taille d'un doigt, pas
     celle d'un curseur. Les boutons discrets de 22 px du bureau y seraient
     inutilisables.
   - **Texte plus grand et plus contrasté.** On lit ici debout, en extérieur,
     pas assis devant un écran calibré.
   - **Une action visible par étape.** L'agent n'arbitre pas entre six
     boutons : il fait avancer la tâche, point.
   ========================================================================== */

.terrain {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond-contenu);
  display: flex;
  flex-direction: column;
  /* Encoche et barre gestuelle des téléphones récents. */
  padding-bottom: env(safe-area-inset-bottom);
}

.terrain-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(var(--e5) + env(safe-area-inset-top)) var(--e6) var(--e5);
  background: rgb(var(--fond-barre) / 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--filet) solid var(--separateur);
}
.terrain-entete h1 { font-size: var(--t-grand); font-weight: var(--graisse-forte); }
.terrain-sous { font-size: var(--t-corps); color: var(--texte-2); margin-top: 2px; }

.terrain-corps {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e10);
}

/* Bandeau de zone : c'est le regroupement géographique (RG-48) qui structure
   la page, donc il doit être la chose la plus visible après le titre. */
.terrain-zone { margin-bottom: var(--e8); }
.terrain-zone-titre {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e5);
  background: var(--accent-doux);
  border-radius: var(--r-controle);
  font-size: var(--t-titre);
  font-weight: var(--graisse-demi);
  color: var(--accent-fort);
  position: sticky;
  top: 72px;
  z-index: 10;
}
.terrain-zone-titre .icone { width: 18px; height: 18px; flex: none; }
.terrain-zone-compte {
  margin-left: auto;
  font-size: var(--t-base);
  font-weight: var(--graisse-moyenne);
  color: var(--texte-2);
}

.terrain-etape {
  background: var(--fond-eleve);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--e6);
  margin-bottom: var(--e5);
}
.terrain-etape.retard { box-shadow: var(--ombre-carte), inset 3px 0 0 var(--rouge); }
.terrain-etape.ticket { box-shadow: var(--ombre-carte), inset 3px 0 0 var(--orange); }

/* Sur grand écran, c'est le coordinateur qui regarde — la même tournée, mais
   d'un coup d'œil. On élargit la colonne et on pose les étapes d'une zone
   côte à côte ; le regroupement par commune, lui, ne bouge pas, sinon on
   perdrait ce qui fait l'intérêt de l'écran. */
@media (min-width: 1080px) {
  .terrain-corps { max-width: 1180px; }
  .terrain-etapes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--e5);
    align-items: start;
  }
  .terrain-etapes .terrain-etape { margin-bottom: 0; }
}

.terrain-etape-titre {
  font-size: var(--t-titre);
  font-weight: var(--graisse-demi);
  line-height: 1.3;
}
.terrain-lieu {
  font-size: var(--t-corps);
  color: var(--texte-2);
  margin-top: var(--e2);
}
.terrain-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
}

/* Boutons du terrain : hauteur d'un doigt, pas d'un curseur. */
.terrain-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e4);
  width: 100%;
  min-height: 48px;
  margin-top: var(--e5);
  padding: 0 var(--e6);
  border: none;
  border-radius: var(--r-controle);
  background: var(--accent);
  color: var(--sur-accent);
  font-family: inherit;
  font-size: var(--t-corps);
  font-weight: var(--graisse-demi);
  cursor: pointer;
  transition: transform var(--court) var(--sortie), filter var(--court) var(--sortie);
}
.terrain-action:active { transform: scale(0.985); filter: brightness(0.94); }
.terrain-action.secondaire {
  background: var(--fond-enfonce);
  color: var(--texte);
  box-shadow: inset 0 0 0 var(--filet) var(--separateur);
}
.terrain-action[disabled] { opacity: 0.45; cursor: default; }

/* Ligne de checklist : la zone cliquable est la ligne entière, pas la case. */
.terrain-checklist { margin-top: var(--e6); }
.terrain-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e5);
  width: 100%;
  min-height: 48px;
  padding: var(--e4) var(--e3);
  border: none;
  border-radius: var(--r-petit);
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: var(--t-corps);
  text-align: left;
  cursor: pointer;
}
.terrain-item:active { background: var(--fond-survol); }
.terrain-item + .terrain-item { border-top: var(--filet) solid var(--separateur); }
.terrain-case {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px var(--separateur-fort);
  display: grid;
  place-items: center;
  transition: background var(--court) var(--sortie), box-shadow var(--court) var(--sortie);
}
.terrain-item.fait .terrain-case {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.terrain-item.fait .terrain-case::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--sur-accent);
  border-bottom: 2.5px solid var(--sur-accent);
  transform: rotate(-45deg) translate(1px, -1px);
}
.terrain-item.fait > span { color: var(--texte-3); text-decoration: line-through; }

/* Le code d'accès : révélé à la demande, jamais affiché d'emblée. */
.terrain-secret {
  margin-top: var(--e5);
  padding: var(--e5);
  border-radius: var(--r-controle);
  background: var(--fond-enfonce);
  text-align: center;
}
.terrain-secret-valeur {
  font-family: var(--police-mono);
  font-size: var(--t-geant);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.08em;
  color: var(--texte);
}
.terrain-secret-note { font-size: var(--t-petit); color: var(--texte-3); margin-top: var(--e3); }

.terrain-bascule {
  display: flex;
  gap: var(--e3);
  margin-top: var(--e5);
}
.terrain-bascule button {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: var(--r-controle);
  background: var(--fond-enfonce);
  color: var(--texte-2);
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: var(--graisse-moyenne);
  cursor: pointer;
}
.terrain-bascule button.actif {
  background: var(--accent);
  color: var(--sur-accent);
}