/* ==========================================================
   Lala Luxury Cars — ERP Location de Véhicules & Engins de chantier
   Palette : asphalte graphite + ambre signalétique routière
   ========================================================== */

:root {
  --asphalte-900: #1B1F23;
  --asphalte-800: #262B31;
  --asphalte-700: #333A42;
  --asphalte-600: #4A535D;
  --papier: #F5F3EE;
  --papier-carte: #FFFFFF;
  --ligne: #E4E0D8;
  --ambre: #E2952E;
  --ambre-fonce: #C97D1B;
  --ambre-clair: #F6C87A;
  --teal: #3E8B74;
  --teal-fond: #E5F1EC;
  --alerte: #C3502F;
  --alerte-fond: #FBEBE5;
  --bleu-info: #3E6B8B;
  --bleu-fond: #E7EEF3;

  --font-display: 'Iowan Old Style', 'Georgia', 'Noto Serif', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  --radius: 6px;
  --radius-lg: 14px;

  /* Échelle d'élévation — cohérente avec le traitement déjà en place sur avis.html
     (cartes flottantes, halos dorés) : on l'étend ici à toute l'application pour que
     le SPA (tableau de bord, listes, connexion) ait la même profondeur "vitrine". */
  --ombre-xs: 0 1px 2px rgba(27, 31, 35, 0.06);
  --ombre-sm: 0 2px 10px rgba(27, 31, 35, 0.07);
  --ombre-md: 0 10px 28px -6px rgba(27, 31, 35, 0.16);
  --ombre-lg: 0 24px 56px -18px rgba(27, 31, 35, 0.38);
  --ombre-or: 0 10px 24px -6px rgba(226, 149, 46, 0.35);
  --degrade-or: linear-gradient(135deg, var(--ambre-fonce), var(--ambre));

  /* ---------- Jetons du modèle de présentation "CHIPNKE" (onglets, clics, ombres, fenêtres) ----------
     Ce ne sont PAS de nouvelles couleurs : juste des alias vers la palette Lala Luxury Cars
     ci-dessus, sous les noms que ce modèle utilise (--principale, --texte, --fond...). Toute la
     mise en page qui suit (barre du haut, menu, cartes, boutons, fenêtres, mobile) est écrite en
     suivant ce modèle — voir Presentation_onglets_fenetres_CHIPNKE.md fourni par le client. */
  --principale: var(--ambre-fonce);
  --principale-fonce: #A3660E;
  --principale-pale: #FBF1E2;
  --texte: var(--asphalte-700);
  --texte-doux: var(--asphalte-600);
  --trait: var(--ligne);
  --fond: var(--papier-carte);
  --fond-2: var(--papier);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papier);
  color: var(--asphalte-900);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar (modèle "CHIPNKE" : barre latérale claire et groupée) ----------
   Remplace l'ancienne barre latérale sombre (248px, dégradé graphite + actif ambre en
   dégradé) par une barre claire et plus étroite (190px), avec des éléments de menu
   regroupés sous des intitulés de section, et un état actif "fond pâle + trait coloré à
   gauche + texte en gras coloré" — voir Presentation_onglets_fenetres_CHIPNKE.md fourni
   par le client. Les jetons --fond/--texte/--texte-doux/--trait/--principale* (alias vers
   la palette Lala Luxury Cars existante, voir le bloc :root ci-dessus) portent tout ce
   changement : aucune nouvelle couleur n'est introduite. */
.sidebar {
  width: 190px;
  flex-shrink: 0;
  position: relative;
  background: var(--fond);
  color: var(--texte);
  display: flex;
  flex-direction: column;
  padding: 20px 0 16px;
  border-right: 1px solid var(--trait);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2px 16px 18px;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 14px;
}

/* Logo grand format (lockup camion + texte) : affiché en entier, jamais recadré ni
   déformé (object-fit: contain), sur toute la largeur utile de la barre latérale. */
.brand-mark {
  width: 100%;
  max-width: 152px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Marque générique de la barre latérale, affichée tant qu'une entreprise n'a pas chargé son
   propre logo (voir public/app.js, mettreAJourBrandingSidebar()) — même traitement texte que
   .login-wordmark (écran de connexion), pour rester cohérent d'un écran à l'autre. Sur fond
   clair désormais (barre latérale CHIPNKE) : couleurs texte/ambre normales, plus de texte
   clair pensé pour un fond sombre. */
.sidebar-wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--texte);
  letter-spacing: 0.2px;
}
.sidebar-wordmark span { color: var(--principale); }

.brand-text small {
  display: block;
  color: var(--texte-doux);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

.nav {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  gap: 14px;
  overflow-y: auto;
}

/* Groupe de la barre latérale (ex. PILOTAGE, FLOTTE & CHAUFFEURS...) — intitulé en
   majuscules discret suivi de ses éléments de menu, per modèle CHIPNKE. */
.nav-group { display: flex; flex-direction: column; gap: 2px; }

.nav-group-title {
  padding: 0 9px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--texte-doux);
  opacity: 0.8;
}

.nav-item {
  all: unset;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  padding: 9px 10px 9px 13px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--texte-doux);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--texte-doux);
  opacity: 0.65;
  width: 16px;
}

.nav-item:hover {
  background: var(--principale-pale);
  color: var(--texte);
}

.nav-item.active {
  background: var(--principale-pale);
  color: var(--principale-fonce);
  font-weight: 700;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--principale);
}

.nav-item.active .nav-num {
  color: var(--principale-fonce);
  opacity: 1;
}

.sidebar-foot {
  margin-top: auto;
  padding: 14px 18px 0;
  font-size: 10px;
  color: var(--texte-doux);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-top: 1px solid var(--trait);
}

/* ---------- Main ---------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 26px 36px 18px;
  border-bottom: 1px solid var(--ligne);
  background: var(--papier);
}

.topbar::after {
  content: '';
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--ambre-fonce), transparent 55%);
  opacity: 0.5;
}

.topbar h1 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  margin: 0;
  padding-left: 14px;
  letter-spacing: 0.2px;
  border-left: 3px solid var(--ambre);
}

.topbar-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--asphalte-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Bouton ☰ qui ouvre le menu mobile (voir .menu-mobile-panneau plus bas) — masqué sur
   desktop (la barre latérale est visible), affiché uniquement sous 900px, et seulement
   pour un compte admin (jamais pour un chauffeur, qui n'a de toute façon aucun autre écran
   à atteindre depuis "Mon espace" — voir la logique de rôle dans public/app.js). */
.btn-menu-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--principale-pale);
  color: var(--principale-fonce);
  font-size: 18px;
  flex-shrink: 0;
  margin-right: 10px;
}

.view-container {
  padding: 28px 36px 60px;
  overflow-y: auto;
}

/* ---------- Navigation mobile (modèle CHIPNKE) ----------
   Sous 900px, la barre latérale disparaît entièrement et est remplacée par deux éléments :
   - une barre d'onglets fixée en bas de l'écran (.bottom-nav), 5 destinations au plus —
     les plus utilisées au quotidien ;
   - un bouton ☰ (.btn-menu-mobile, voir plus haut) dans l'en-tête de page qui ouvre un
     panneau glissant (.menu-mobile-panneau + voile .menu-mobile-voile) contenant les
     destinations restantes et la déconnexion.
   Les boutons de ces deux surfaces portent les mêmes classes/attributs data-view que les
   éléments de la barre latérale (.nav-item, data-view="...") : un seul gestionnaire de clic
   dans app.js couvre les trois surfaces et garde leur état "actif" synchronisé. Rien de
   tout ceci ne s'affiche pour un chauffeur (voir le branchement par rôle dans app.js) :
   "Mon espace" est un écran unique, sans autre destination à atteindre. */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--fond);
  border-top: 1px solid var(--trait);
  box-shadow: 0 -4px 16px rgba(27, 31, 35, 0.08);
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav .nav-item {
  flex: 1;
  flex-direction: column;
  gap: 3px;
  padding: 6px 2px;
  border-radius: var(--radius);
  font-size: 10.5px;
  text-align: center;
  min-height: 48px;
  justify-content: center;
}

.bottom-nav .nav-item.active::before { display: none; }
.bottom-nav .nav-icone { font-size: 18px; line-height: 1; }

/* Voile sombre derrière le panneau glissant — ferme le panneau au clic, contrairement aux
   fenêtres modales (voir .modal-close) : ce n'est pas une fenêtre d'action mais un menu,
   le refermer en touchant à côté reste l'attendu normal d'un menu mobile. */
.menu-mobile-voile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 35, 0.5);
  z-index: 70;
}

.menu-mobile-panneau {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  right: -280px;
  width: 260px;
  max-width: 80vw;
  background: var(--fond);
  box-shadow: var(--ombre-lg);
  z-index: 71;
  padding: 18px 14px;
  transition: right 0.22s cubic-bezier(.3,.9,.4,1);
  overflow-y: auto;
}

.menu-mobile-panneau.ouvert { right: 0; }

.menu-mobile-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--trait);
}

.menu-mobile-entete strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.menu-mobile-panneau .nav {
  padding: 0;
  flex: 1;
}

/* Bouton "Changer mon mot de passe" du menu mobile (v3.81) — même forme que la déconnexion
   juste en dessous, en neutre plutôt qu'en rouge. */
.menu-mobile-mot-de-passe {
  all: unset;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: var(--fond-2);
  color: var(--texte);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.menu-mobile-mot-de-passe + .menu-mobile-deconnexion { margin-top: 8px; }

.menu-mobile-deconnexion {
  all: unset;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: var(--alerte-fond);
  color: var(--alerte);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  .btn-menu-mobile { display: flex; }
  .bottom-nav { display: flex; }
  .menu-mobile-voile.ouvert { display: block; }
  /* Place pour la barre d'onglets fixée en bas, pour qu'elle ne recouvre jamais le bas du
     contenu (dernier bouton d'un formulaire, dernière ligne d'un tableau...). */
  .view-container { padding-bottom: 86px; }

  /* L'en-tête de page (.topbar : titre + ☰ à gauche, date/utilisateur/déconnexion à droite)
     débordait sur téléphone — "Tableau de bord" + la date complète + "ADMINISTRATEUR ·
     ADMIN" ne tenaient jamais sur une largeur de 375px, ce qui élargissait toute la page
     (cartes coupées sur le bord, voir vérification Playwright) plutôt que de simplement
     passer à la ligne. La date (déjà visible sur le téléphone lui-même) est l'élément le
     moins utile ici : on la masque sur mobile plutôt que de la faire passer à la ligne. */
  .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 16px 16px 14px;
  }
  .topbar h1 { font-size: 19px; padding-left: 10px; }
  .topbar-meta { display: none; }
  .topbar-right { gap: 10px; }
  .topbar-user { font-size: 10px; }
}

/* ---------- Cards / grid ---------- */
.grid {
  display: grid;
  gap: 16px;
}

.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Sur téléphone, .grid-2/.grid-3/.grid-4 passent en une seule colonne plutôt que de forcer
   deux colonnes trop étroites pour leur contenu — conforme à la disposition prescrite par le
   modèle CHIPNKE pour les cartes chiffrées : "4 par ligne sur ordinateur, 2 sur tablette, 1
   sur téléphone" (voir Presentation_onglets_fenetres_CHIPNKE.md, section 4). .grid-2 ne
   sert qu'à l'espace chauffeur (public/app.js, renderChauffeurEspace(), les cartes "Ma
   fiche" / "Véhicule actuellement affecté") : avant ce correctif, le formulaire de relevé de
   compteur (saisie + 2 photos + bouton "Enregistrer") était coupé sur le bord de l'écran.
   .grid-3/.grid-4 servent aux cartes KPI (carteKpi(), voir app.js) et à quelques grilles de
   formulaire à 3-4 champs : à 375px de large, deux cartes KPI avec leur pastille d'icône de
   34px ne laissaient plus assez de place au texte, qui débordait hors de la carte (repéré à
   la vérification visuelle de l'étape 2 de la refonte CHIPNKE) — une seule colonne règle le
   problème pour les deux usages à la fois. */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Carte de base — modèle CHIPNKE (étape 4) : coins arrondis à 12px comme les cartes chiffrées
   et les cartes de liste, et AUCUNE ombre (règle d'or n°3 : "les cartes n'ont jamais
   d'ombre", seule la bordure les détache du fond). */
.card {
  background: var(--papier-carte);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: none;
}

/* ---------- Cartes chiffrées (KPI) — modèle CHIPNKE (étape 2 de la refonte) ----------
   Remplace l'ancien style (trait doré en haut, grand chiffre centré, ombre qui se soulève au
   survol) par le format CHIPNKE : carte plate (AUCUNE ombre, règle d'or n°3 du document),
   une barre de couleur de 4px à gauche selon le "sujet" de la carte (ex. teal = argent qui
   rentre ou état positif, rouge = à traiter, bleu = information neutre), et une pastille
   ronde pâle à droite avec une icône — voir Presentation_onglets_fenetres_CHIPNKE.md fourni
   par le client, section 4. La couleur ET l'icône se choisissent carte par carte via la
   fonction carteKpi() dans app.js (--c posée en style inline), jamais ici : ce fichier ne
   fixe que la mise en forme commune aux ~20 cartes de l'application. */
.stat-card {
  --c: var(--principale);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 4px solid var(--c);
  box-shadow: none;
}

.stat-card .stat-body { flex: 1; min-width: 0; }

.stat-card .stat-label {
  font-size: 12.5px;
  color: var(--texte-doux);
  margin-bottom: 4px;
}

.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--c);
  line-height: 1.15;
}

.stat-card .stat-sub {
  font-size: 11.5px;
  color: var(--c);
  margin-top: 3px;
}

/* Pastille ronde pâle (34px) contenant l'icône de la carte — le mélange de couleur se fait
   directement dans le navigateur (color-mix), pas besoin de calculer une teinte pâle par
   avance pour chacune des couleurs utilisées par carteKpi(). */
.stat-card .stat-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 18%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 30px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- Tableaux → "cartes de liste" (modèle CHIPNKE, étape 4 de la refonte) ----------
   Une seule présentation pour les ~30 tableaux de l'application : une carte plate (bordure,
   coins arrondis à 12px comme les cartes chiffrées, AUCUNE ombre), un en-tête discret en
   petites majuscules sur fond papier, des lignes aérées qui se teintent légèrement de la
   couleur principale au survol, et la colonne d'actions (boutons "Gérer", "Voir"...) calée à
   droite. border-collapse: separate est nécessaire pour que les coins arrondis s'appliquent
   réellement (avec "collapse", le navigateur ignore border-radius sur un tableau).
   La classe .carte-liste et les data-label des cellules sont posés automatiquement par
   preparerCartesDeListe() dans app.js — les règles ci-dessous visent quand même "table" tout
   court pour que l'affichage ordinateur soit correct dès la première image. */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
}

thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texte-doux);
  background: var(--fond-2);
  padding: 11px 16px;
  border-bottom: 1px solid var(--trait);
  font-weight: 600;
  white-space: nowrap;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--trait);
  font-size: 13px;
  color: var(--asphalte-900);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--principale-pale) 55%, #fff); }

/* Colonne d'actions (en-tête vide + boutons) : calée à droite. Chaque bouton reste d'un seul
   tenant, mais la colonne peut passer à la ligne entre deux boutons — sinon une ligne à 4
   actions (ex. facture émise) déborde de sa carte et le dernier bouton est coupé. */
/* !important : plusieurs écrans posent encore style="white-space:nowrap" directement sur la
   cellule (factures, proformas, console) — c'est ce qui coupait "Imprimer / PDF" avant. */
td.cellule-actions { text-align: right; white-space: normal !important; }
td.cellule-actions .btn { white-space: nowrap; margin: 2px 0 2px 6px; }

/* Ligne "Aucun ... enregistré" étalée sur toutes les colonnes. */
tr.ligne-vide td {
  text-align: center;
  color: var(--texte-doux);
  font-style: italic;
  padding: 22px 16px;
}
tr.ligne-vide:hover { background: transparent; }

/* Un tableau déjà dans une carte de liste repliable (accordéon) ou dans une fenêtre n'a
   pas besoin d'un 2e cadre trop marqué : même carte, bordure simplement plus douce. */
.accordion-body-inner table,
.modal table { border-color: color-mix(in srgb, var(--trait) 70%, #fff); }

/* ---------- Téléphone : chaque ligne devient sa propre carte ----------
   Sous 640px, un tableau de 5 à 9 colonnes ne tient pas : on le déplie en une pile de
   petites cartes (1re colonne = titre de la carte, puis "Nom de colonne ........ valeur",
   puis les boutons d'action en pleine largeur en bas). Le nom de colonne vient de data-label,
   posé par preparerCartesDeListe() dans app.js. Plus besoin de faire défiler à l'horizontale. */
@media (max-width: 640px) {
  table.carte-liste-empilable,
  table.carte-liste-empilable tbody,
  table.carte-liste-empilable tr,
  table.carte-liste-empilable td { display: block; width: 100%; }

  table.carte-liste-empilable {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  table.carte-liste-empilable thead { display: none; }

  table.carte-liste-empilable tbody tr {
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 12px;
    padding: 4px 14px;
    margin-bottom: 10px;
  }
  table.carte-liste-empilable tbody tr:last-child { margin-bottom: 0; }
  table.carte-liste-empilable tbody tr:hover { background: var(--fond); }

  table.carte-liste-empilable td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    text-align: right;
    border-bottom: 1px dashed var(--trait);
  }
  table.carte-liste-empilable td::before {
    content: attr(data-label);
    flex-shrink: 0;
    max-width: 45%;
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texte-doux);
    font-weight: 600;
  }
  table.carte-liste-empilable td:not([data-label])::before { content: none; }

  /* 1re colonne = titre de la carte (référence, nom du client, matériel, date...). */
  table.carte-liste-empilable td:first-child {
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--trait);
  }
  table.carte-liste-empilable td:first-child::before { content: none; }

  table.carte-liste-empilable td:last-child { border-bottom: none; }

  /* Boutons d'action : en bas de la carte, à droite, retour à la ligne si plusieurs. */
  table.carte-liste-empilable td.cellule-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    white-space: normal;
    padding: 10px 0 12px;
  }
  table.carte-liste-empilable td.cellule-actions .btn { margin: 0; }

  table.carte-liste-empilable tr.ligne-vide td {
    display: block;
    text-align: center;
    border-bottom: none;
    padding: 18px 0;
    font-size: 13px;
  }

  /* Plus de défilement horizontal nécessaire une fois les lignes empilées. */
  .table-scroll:has(> table.carte-liste-empilable) { overflow-x: visible; }
}

/* ---------- Parc matériel : cartes façon "résultats de recherche" ---------- */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.fleet-card {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

/* Cartes de liste CHIPNKE (étape 4) : plus d'ombre ni de "soulèvement" au survol — le
   contour passe à la couleur principale, la photo garde son léger zoom. */
.fleet-card:hover { border-color: var(--principale); }

.fleet-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #EDEAE2;
  overflow: hidden;
}

.fleet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.fleet-card:hover .fleet-photo img {
  transform: scale(1.045);
}

.fleet-photo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

/* Alerte échéance (assurance/visite technique/vignette/autorisation) expirée ou proche —
   voir renderMateriel() dans app.js, alimenté par GET /materiel/alertes/documents. */
.fleet-photo-badge-echeance {
  position: absolute;
  top: 10px;
  right: 10px;
}

.fleet-photo-upload, .crew-avatar-upload {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 50%;
  background: rgba(27, 31, 35, 0.72);
  color: #F5F3EE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  text-transform: none;
}

.fleet-photo-upload:hover, .crew-avatar-upload:hover { background: var(--asphalte-900); }

.fleet-body { padding: 14px 16px 16px; }

.fleet-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.fleet-meta {
  font-size: 12px;
  color: var(--asphalte-600);
  margin-bottom: 2px;
}

.fleet-btn { margin-top: 10px; padding-left: 0; }

/* ---------- Chauffeurs : cartes avec avatar ---------- */
.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.crew-card {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 16px;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

/* Même traitement que .fleet-card (cartes de liste CHIPNKE, étape 4). */
.crew-card:hover { border-color: var(--principale); }

.crew-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: visible;
}

.crew-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--papier-carte);
  box-shadow: 0 0 0 1px var(--ligne), var(--ombre-xs);
}

.crew-avatar-upload { width: 28px; height: 28px; bottom: -2px; right: -2px; }
.crew-avatar-upload svg { width: 14px; height: 14px; }

.crew-body { min-width: 0; flex: 1; }

.crew-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
}

.crew-meta {
  font-size: 12px;
  color: var(--asphalte-600);
  margin-bottom: 2px;
}

.crew-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

/* ---------- Graphiques (barres horizontales en HTML/CSS) ---------- */
.chart-legend {
  display: flex;
  gap: 18px;
  font-size: 11.5px;
  color: var(--asphalte-600);
  margin-bottom: 10px;
}

.chart-legend-item { display: flex; align-items: center; gap: 6px; }

.chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 24px;
}

/* Coupure visuelle entre deux groupes non adjacents d'un classement tronqué (voir
   extremes() dans app.js) — signale que les barres du dessous ne suivent pas celles
   du dessus dans le classement réel. */
.chart-separator {
  height: 1px;
  margin: 2px 0;
  background-image: repeating-linear-gradient(90deg, var(--ligne) 0 5px, transparent 5px 10px);
}

/* ---------- Camembert / donut (répartitions) ---------- */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 10px 0 24px;
  flex-wrap: wrap;
}

.donut {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-hole {
  position: absolute;
  inset: 24px;
  background: var(--papier-carte);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.donut-hole .donut-total {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--asphalte-900);
  line-height: 1;
}

.donut-hole .donut-caption {
  font-size: 10.5px;
  color: var(--asphalte-600);
  margin-top: 4px;
  max-width: 80px;
}

.donut-legend-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 200px;
}

.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}

.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-legend-label { flex: 1; color: var(--asphalte-700); }
.donut-legend-value { font-weight: 600; }

.chart-row {
  display: grid;
  grid-template-columns: 160px 1fr 96px;
  align-items: center;
  gap: 12px;
}

.chart-row-label {
  font-size: 12px;
  color: var(--asphalte-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-track {
  position: relative;
  height: 16px;
  background: #EDEAE2;
  border-radius: 8px;
}

.chart-track.diverging { background: transparent; }

.chart-track.diverging::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: rgba(27, 31, 35, 0.28);
}

.chart-fill {
  position: absolute;
  top: 0;
  height: 16px;
  border-radius: 8px;
  min-width: 3px;
}

.chart-fill-thin { height: 7px; border-radius: 4px; }

.chart-row-value {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .chart-row { grid-template-columns: 120px 1fr 84px; }
}

/* ---------- Dossier documents (fiche chauffeur) ---------- */
.doc-categories {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 4px;
}

.doc-category-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--asphalte-700);
}

.doc-upload-btn { text-transform: none; margin: 0; }

.doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--ligne);
  font-size: 12.5px;
}

.doc-row:last-child { border-bottom: none; }

.doc-row a { color: var(--bleu-info); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }
.doc-row a:hover { text-decoration: underline; }

.doc-empty { font-size: 12px; color: var(--asphalte-600); margin: 2px 0 0; }

.doc-delete-btn { padding: 2px 8px; color: var(--alerte); font-size: 14px; line-height: 1; }

/* ---------- Mini-statistiques (fiche chauffeur) ---------- */
.stat-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 4px;
}

.stat-mini {
  background: #FAF8F4;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-align: center;
}

.stat-mini-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--asphalte-900);
}

.stat-mini-label {
  font-size: 10.5px;
  color: var(--asphalte-600);
  margin-top: 2px;
  line-height: 1.3;
}

/* ---------- Classement du mois (podium chauffeurs) ---------- */
.podium {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 14px 0 18px;
  flex-wrap: wrap;
}

.podium-card {
  background: var(--papier-carte);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  flex: 1 1 160px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: none;
}

/* Le 1er du mois se distingue sans ombre (cartes CHIPNKE plates, étape 4) : contour
   principal plus épais et fond légèrement teinté. */
.podium-rang-1 {
  border: 2px solid var(--principale);
  background: var(--principale-pale);
  box-shadow: none;
  padding-top: 22px;
  order: 2;
}

.podium-rang-2 { order: 1; }
.podium-rang-3 { order: 3; }

.podium-medaille { font-size: 26px; line-height: 1; }

.podium-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ligne);
  margin: 4px 0;
}

.podium-rang-1 .podium-avatar { width: 72px; height: 72px; border-color: var(--ambre-fonce); }

.podium-nom { font-weight: 600; font-size: 13.5px; }

.podium-score {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ambre-fonce);
}

.podium-score span { font-size: 12px; color: var(--asphalte-600); font-weight: 400; }

@media (max-width: 560px) {
  .podium { flex-direction: column; align-items: stretch; }
  .podium-rang-1, .podium-rang-2, .podium-rang-3 { order: 0; }
}

/* ---------- Photo dans les fiches détail ---------- */
.detail-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #EDEAE2;
  border: 1px solid var(--ligne);
}

.detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.detail-photo.detail-photo-round {
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 auto 18px;
}

.detail-photo-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-transform: none;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--asphalte-900);
  white-space: nowrap;
}

.detail-photo-round .detail-photo-btn {
  position: static;
  display: flex;
  margin: 10px auto 0;
  width: fit-content;
  bottom: auto;
  right: auto;
}

.detail-photo-round { display: flex; flex-direction: column; align-items: center; overflow: visible; background: none; border: none; }
.detail-photo-round img { border-radius: 50%; border: 1px solid var(--ligne); }

/* ---------- Vidéo de présentation dans la fiche matériel ---------- */
.detail-media-row {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.detail-media-row .detail-photo { margin-bottom: 0; flex: 1; min-width: 0; }

.detail-video {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #EDEAE2;
  border: 1px solid var(--ligne);
}

.detail-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #1B1F23; }

.detail-video-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: var(--asphalte-600);
}

@media (max-width: 640px) {
  .detail-media-row { flex-direction: column; }
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.badge-disponible, .badge-payee, .badge-valide { background: var(--teal-fond); color: var(--teal); }
.badge-loue, .badge-en_cours, .badge-confirme, .badge-envoyee { background: var(--bleu-fond); color: var(--bleu-info); }
.badge-maintenance, .badge-en_attente, .badge-emise { background: #FBF2E2; color: var(--ambre-fonce); }
.badge-validee_client { background: #F5E6C8; color: var(--ambre-fonce); font-weight: 700; }
.badge-hors_service, .badge-annule, .badge-annulee, .badge-expire { background: var(--alerte-fond); color: var(--alerte); }
.badge-critique { background: var(--alerte); color: #FFFFFF; font-weight: 700; }
.badge-reforme, .badge-cloture { background: #ECEAE4; color: var(--asphalte-600); }

/* ---------- Buttons ---------- */
/* Réinitialisation ciblée (pas "all: unset") : ne touche ni "position" ni "display", pour ne
   pas écraser les classes qui positionnent ces boutons en overlay (.detail-photo-btn,
   .fleet-photo-upload, .crew-avatar-upload, .doc-upload-btn...), y compris sur des <label>. */
/* Boutons en pilule (coins totalement arrondis) — modèle CHIPNKE : seul border-radius
   change par rapport à l'ancien style (toujours --radius ailleurs, cartes/champs/etc.),
   le reste (couleurs, ombres, tailles) reste la palette Lala Luxury Cars existante. */
.btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  margin: 0;
  font-family: inherit;
  line-height: normal;
  color: inherit;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: opacity 0.15s, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--asphalte-800), var(--asphalte-900));
  color: var(--ambre-clair);
  box-shadow: var(--ombre-xs);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--ombre-sm); opacity: 1; }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: #ECE9E2;
  color: var(--asphalte-900);
  box-shadow: var(--ombre-xs);
}
.btn-secondary:hover { opacity: 1; background: #E4E0D6; transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--bleu-info); padding: 6px 10px; border-radius: var(--radius); }
.btn-ghost:hover { text-decoration: underline; }

.btn-danger { background: var(--alerte-fond); color: var(--alerte); }
.btn-danger:hover { opacity: 1; background: #F7DED5; }

.actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.filters {
  display: flex;
  gap: 8px;
}

select, input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="tel"], input[type="search"], textarea {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--papier-carte);
  color: var(--asphalte-900);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="password"]:focus, input[type="tel"]:focus, input[type="search"]:focus, textarea:focus {
  outline: none;
  border-color: var(--ambre-fonce);
  box-shadow: 0 0 0 3px rgba(226, 149, 46, 0.14);
}

textarea { resize: vertical; }

label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--asphalte-600);
  display: block;
  margin-bottom: 5px;
}

.field { margin-bottom: 14px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 35, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  position: relative;
  background: var(--papier-carte);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--ambre-fonce);
  width: 560px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 28px;
  border-left: 1px solid var(--ligne);
  border-right: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  box-shadow: var(--ombre-lg);
  animation: entreeDouce 0.22s cubic-bezier(.3,.9,.4,1) both;
}

.modal h2 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 18px;
  padding-right: 26px;
}

/* Croix de fermeture explicite — modèle CHIPNKE : désormais le SEUL moyen de fermer une
   fenêtre modale en cliquant en dehors du bouton d'action prévu (voir openModal() dans
   app.js, qui n'attache plus de fermeture au clic sur le voile) ; la touche Échap ferme
   aussi (même fichier). openModalBloquant() n'ajoute pas cette croix : ses messages
   restent fermables uniquement par l'action prévue (voir le commentaire sur cette
   fonction dans app.js). */
.modal-close {
  all: unset;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  color: var(--asphalte-600);
  cursor: pointer;
}
.modal-close:hover { background: var(--principale-pale); color: var(--principale-fonce); }

.modal.modal-large { width: 860px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--asphalte-600);
  border: 1px dashed var(--ligne);
  border-radius: 12px;
  background: var(--papier-carte);
}

.empty-state strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--asphalte-900);
  margin-bottom: 6px;
}

/* ---------- Detail panel ---------- */
.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--ligne);
  font-size: 13px;
}

.detail-row:last-child { border-bottom: none; }
.detail-row .k { color: var(--asphalte-600); }
.detail-row .v { font-weight: 600; }

.alert-banner {
  background: var(--alerte-fond);
  color: var(--alerte);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 12.5px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rentabilite-pos { color: var(--teal); font-weight: 700; }
.rentabilite-neg { color: var(--alerte); font-weight: 700; }

.loading {
  padding: 40px;
  text-align: center;
  color: var(--asphalte-600);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
}

/* ---------- Utilitaire ---------- */
.hidden { display: none !important; }
.table-scroll { overflow-x: auto; margin-bottom: 4px; }

/* ---------- Écran de connexion (split-screen) ---------- */
.login-screen {
  min-height: 100vh;
}

.login-split {
  display: flex;
  min-height: 100vh;
}

/* -- Colonne gauche : identité de marque, fond sombre -- */
.login-brand-panel {
  flex: 0 0 55%;
  position: relative;
  background:
    radial-gradient(circle at 18% 18%, rgba(226, 149, 46, 0.22), transparent 45%),
    radial-gradient(circle at 85% 82%, rgba(62, 139, 116, 0.14), transparent 50%),
    linear-gradient(160deg, #14171A 0%, var(--asphalte-900) 55%, #22262B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  overflow: hidden;
}

.login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/branding/flotte-linart.jpg');
  background-repeat: no-repeat;
  /* background-attachment: fixed + mêmes valeurs de size/position que le panneau clair
     (voir .login-form-illustration) : les deux panneaux deviennent des "fenêtres" sur la
     même image plaquée sur l'écran, donc la scène reste continue de part et d'autre de la
     séparation (voitures à gauche, engin/camion à droite), au lieu d'être recadrée deux fois. */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* Image source : traits sombres sur fond blanc. On l'inverse (fond sombre, traits clairs)
     pour qu'elle se fonde dans le panneau noir, avec une opacité très faible. */
  filter: invert(1) grayscale(0.4);
  opacity: 0.1;
  pointer-events: none;
}

.login-brand-panel::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--degrade-or);
  z-index: 2;
}

.login-brand-content {
  position: relative;
  z-index: 1;
  max-width: 380px;
  text-align: center;
}

/* Pas de plaque : la marque "Lala Luxury Cars" flotte directement en texte sur le fond sombre
   de l'écran de connexion, sans boîte ni cadre (voir .wordmark-texte ci-dessous — plus de logo
   en image ici depuis le renommage ParcFlex/Kiep Metoua → Lala Luxury Cars, voir le commentaire
   dans public/app.js). */
.login-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  animation: loginLogoFlotte 5s ease-in-out infinite;
}

@keyframes loginLogoFlotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Marque générique de la plateforme en texte simple (logo texte, pas d'image) : voir
   .wordmark-texte (commun aux écrans vitrine/connexion) et .sidebar-wordmark /
   .marque-wordmark (même traitement texte, une fois connecté). */
.wordmark-texte {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--papier);
  letter-spacing: 0.3px;
  display: block;
}
.wordmark-texte span { color: var(--ambre); }

.wordmark-login { font-size: 40px; }
.wordmark-vitrine { font-size: 22px; }
.wordmark-vitrine-footer { font-size: 20px; text-align: center; margin: 0 auto 10px; }

.login-brand-legal {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ambre-clair);
  margin: 10px 0 22px;
}

/* -- Puces "services" : équivalent des chiffres-clés du site vitrine, sans donnée
   dynamique nécessaire côté écran de connexion (avant authentification). -- */
.login-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 24px;
}

.login-service-chip {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ambre-clair);
  background: rgba(226, 149, 46, 0.1);
  border: 1px solid rgba(226, 149, 46, 0.3);
  border-radius: 20px;
  padding: 5px 12px;
}

.login-accroche {
  font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', 'Comic Sans MS', cursive;
  font-size: 21px;
  color: var(--ambre);
  transform: rotate(-2deg);
  margin: 0;
}

.login-accroche-trait {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--ambre);
  opacity: 0.6;
  margin: 16px auto 0;
}

/* -- Colonne droite : formulaire sur fond clair, illustration en filigrane -- */
.login-form-panel {
  flex: 1;
  position: relative;
  background: var(--papier);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 24px;
}

.login-form-illustration {
  position: absolute;
  inset: 0;
  background-image: url('assets/branding/flotte-linart.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.14;
  pointer-events: none;
}

.login-form-wrap {
  position: relative;
  z-index: 1;
  width: 360px;
  max-width: 100%;
  background: var(--papier-carte);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--ambre);
  box-shadow: var(--ombre-lg);
  padding: 36px 32px;
  animation: entreeDouce 0.4s cubic-bezier(.3,.9,.4,1) both;
}

.login-form-wrap h1 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 20px;
  color: var(--asphalte-900);
}

.login-form-wrap .field { margin-bottom: 14px; }

.login-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.login-submit.btn-primary {
  background: var(--degrade-or);
  color: var(--asphalte-900);
  font-weight: 700;
  padding: 11px 16px;
  box-shadow: var(--ombre-or);
}

.login-submit.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(226, 149, 46, 0.45); }

@media (max-width: 720px) {
  .login-split { flex-direction: column; }

  .login-brand-panel {
    flex: 0 0 auto;
    padding: 26px 24px;
  }

  .login-logo-plate { padding: 14px; margin-bottom: 12px; }
  .wordmark-login { font-size: 28px; }
  .login-brand-legal { margin: 6px 0 12px; }
  .login-accroche { font-size: 18px; }
  .login-accroche-trait { margin-top: 10px; }

  .login-form-panel { flex: 1; padding: 32px 24px; }
  .login-form-wrap { padding: 26px 22px; }
  .login-services { display: none; }
}

.login-error {
  background: var(--alerte-fond);
  color: var(--alerte);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
}

/* ---------- Topbar : utilisateur connecté / déconnexion ---------- */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-user {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--asphalte-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- Messages de formulaire (succès / erreur) ---------- */
.form-success {
  background: var(--teal-fond);
  color: var(--teal);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 12.5px;
}
.form-error {
  background: var(--alerte-fond);
  color: var(--alerte);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 12.5px;
}

/* ---------- Listes en accordéon (regroupées par statut) ---------- */
.accordion-group {
  border: 1px solid var(--trait);
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--fond);
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
/* Cartes de liste CHIPNKE (étape 4) : plates, sans ombre — seul le contour prend la couleur
   principale au survol, et reste teinté tant que la section est ouverte. */
.accordion-group:hover { border-color: var(--principale); }
.accordion-group.open { border-color: color-mix(in srgb, var(--principale) 45%, var(--trait)); }

.accordion-header {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 13px 18px;
  background: var(--papier-carte);
}

.accordion-header:hover { background: var(--fond-2); }

.accordion-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accordion-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.accordion-count {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--principale-fonce);
  background: var(--principale-pale);
  border-radius: 999px;
  min-width: 26px;
  padding: 2px 9px;
  text-align: center;
}

.accordion-chevron {
  transition: transform 0.2s ease;
  color: var(--asphalte-600);
  flex-shrink: 0;
}

.accordion-group.open .accordion-chevron { transform: rotate(90deg); }

/* Animation d'ouverture/fermeture fluide (technique grid-template-rows 0fr → 1fr) :
   .accordion-body est le conteneur grid animé, .accordion-body-inner porte le padding
   réel et masque son contenu tant que la ligne de grille fait 0fr (overflow: hidden). */
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(.3,.9,.4,1);
  border-top: 0px solid var(--ligne);
}

.accordion-group.open .accordion-body {
  grid-template-rows: 1fr;
  border-top: 1px solid var(--ligne);
}

.accordion-body-inner {
  overflow: hidden;
  padding: 0 18px;
  transition: padding 0.28s ease;
}

.accordion-group.open .accordion-body-inner { padding: 14px 18px 18px; }

/* ---------- Onglets (fiches détail) ---------- */
.tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ligne);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.tab-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--asphalte-600);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-btn:hover { color: var(--asphalte-900); }

.tab-btn.active {
  color: var(--ambre-fonce);
  border-bottom-color: var(--ambre);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Petites animations d'entrée (pages/cartes qui viennent d'apparaître) ---------- */
@keyframes entreeDouce {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.entree-douce { animation: entreeDouce 0.35s cubic-bezier(.3,.9,.4,1) both; }
.entree-douce-1 { animation-delay: 0.04s; }
.entree-douce-2 { animation-delay: 0.08s; }
.entree-douce-3 { animation-delay: 0.12s; }
.entree-douce-4 { animation-delay: 0.16s; }

/* ---------- Message éphémère (étape 3 de la refonte CHIPNKE : "retour visuel des clics") ----------
   Confirme toute action (enregistrement, suppression, envoi...) par un petit message en bas à
   droite pendant quelques secondes — fond foncé, barre de couleur à gauche (vert = réussi,
   rouge = erreur), comme prescrit par Presentation_onglets_fenetres_CHIPNKE.md, section 5 et
   règle d'or n°5 ("chaque clic donne une réponse visible"). Affiché/retiré par
   afficherMessageEphemere() dans app.js ; .glisse-sortie anime la disparition avant que le
   nœud ne soit retiré du DOM. Une des 3 seules ombres autorisées par le modèle CHIPNKE (les
   cartes, elles, n'en ont jamais). */
#messages-ephemeres {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100vw - 40px);
}

.message-ephemere {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--asphalte-900);
  color: #F3F1EC;
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  animation: entreeDouce 0.25s cubic-bezier(.3,.9,.4,1) both;
  max-width: 340px;
}

.message-ephemere.erreur { border-left-color: var(--alerte); }

.message-ephemere.glisse-sortie {
  animation: messageEphemereSortie 0.2s ease both;
}

@keyframes messageEphemereSortie {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}

@media (max-width: 640px) {
  #messages-ephemeres { left: 16px; right: 16px; bottom: calc(16px + 70px); }
  .message-ephemere { max-width: none; }
}

/* ==========================================================
   CONSOLE SUPER-ADMIN (Phase 2 — sélection d'entreprise + bandeau de visite)
   ========================================================== */
.superadmin-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--asphalte-900) 0%, #15181B 100%);
  padding: 24px;
}

.superadmin-card {
  width: 100%;
  max-width: 560px;
  background: var(--papier-carte);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-lg);
  padding: 36px 40px;
}

/* Console plateforme (Phase 5) : le tableau de bord des entreprises clientes a besoin de
   bien plus de largeur que les écrans de connexion/inscription/suspension, qui partagent
   par ailleurs le même fond plein écran (.superadmin-screen) et la même carte de base
   (.superadmin-card) — ce modificateur agrandit juste la carte pour cet écran-là. */
.superadmin-console-card { max-width: 1180px; }

/* Tableau des entreprises clientes : 9 colonnes + 5 boutons d'action — les marges standard des
   cartes de liste (16px) le faisaient déborder d'une trentaine de pixels à droite, coupant les
   boutons "Entrer", "Marquer payé"... On les resserre pour ce tableau-là uniquement. */
#superadmin-liste thead th,
#superadmin-liste tbody td { padding-left: 10px; padding-right: 10px; }

/* Barre de recherche/filtres au-dessus du tableau des entreprises clientes (Console
   Lala Luxury Cars) — masquée quand la liste est vide (rien à filtrer), voir app.js. */
.superadmin-filtres {
  display: flex;
  gap: 10px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}
.superadmin-filtres input[type="search"] { flex: 1 1 220px; }
.superadmin-filtres select { flex: 0 1 190px; }

.badge-etat-actif, .badge-etat-illimite { background: var(--teal-fond); color: var(--teal); }
.badge-etat-grace { background: #FBF2E2; color: var(--ambre-fonce); }
.badge-etat-suspendu { background: var(--alerte-fond); color: var(--alerte); }

.superadmin-card h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--asphalte-900);
}

.superadmin-intro {
  margin: 0 0 24px;
  color: var(--asphalte-600);
}

.superadmin-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.superadmin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--papier);
}

.superadmin-item-nom { font-weight: 600; color: var(--asphalte-900); }
.superadmin-item-meta { font-size: 0.82rem; color: var(--asphalte-600); margin-top: 2px; }

.superadmin-liste-vide {
  color: var(--asphalte-600);
  font-size: 0.9rem;
  padding: 12px 0;
}

.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  background: var(--degrade-or);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
}

.impersonation-banner .btn {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  padding: 6px 14px;
}
.impersonation-banner .btn:hover { background: rgba(255, 255, 255, 0.15); }

/* ==========================================================
   INSCRIPTION EN LIBRE-SERVICE (Phase 3) — écran + liens de bascule avec la connexion
   ========================================================== */
.inscription-card { max-width: 480px; }

.lien-secondaire {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--asphalte-600);
}
.lien-secondaire a { color: var(--ambre); font-weight: 600; text-decoration: none; }
.lien-secondaire a:hover { text-decoration: underline; }

/* Compte à rebours d'essai gratuit / délai de grâce (Phases 3 et 4) */
.essai-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 24px;
  background: #EEF3F8;
  color: #3A4550;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.essai-banner.essai-urgent { background: #FCEAEA; color: #B4232A; }
.essai-banner-btn {
  border: 1px solid currentColor;
  padding: 4px 12px;
  font-size: 0.82rem;
  white-space: nowrap;
}
.essai-banner-btn:hover { background: rgba(0, 0, 0, 0.06); }

/* Suspension (Phase 4) */
#suspension-payer-message.suspension-succes { color: #1E7A3C; background: #E9F6EE; }

/* ==========================================================
   Vitrine commerciale — page de présentation statique affichée avant l'écran de connexion
   (voir afficherVitrine() dans app.js). Continuité visuelle avec le reste de l'application :
   mêmes variables de couleur/typo/ombre que ci-dessus, aucune nouvelle palette introduite.
   ========================================================== */

.vitrine-screen {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--asphalte-900);
  background: var(--papier);
}

.vitrine-screen h1, .vitrine-screen h2, .vitrine-screen h3 { font-family: var(--font-display); }

.vitrine-screen a { text-decoration: none; }

.vitrine-screen a:focus-visible,
.vitrine-screen button:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 2px;
}

/* ---------- Nav sticky ---------- */
.vitrine-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(27, 31, 35, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vitrine-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.vitrine-nav-links { display: flex; align-items: center; gap: 24px; }

.vitrine-nav-links a {
  color: var(--papier);
  opacity: 0.82;
  font-size: 13.5px;
  font-weight: 600;
}
.vitrine-nav-links a:hover { opacity: 1; }

/* ---------- Hero ---------- */
.vitrine-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 15%, rgba(226, 149, 46, 0.22), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(62, 139, 116, 0.16), transparent 50%),
    linear-gradient(160deg, #14171A 0%, var(--asphalte-900) 55%, #22262B 100%);
  padding: 88px 32px 96px;
}

/* Filigrane ligne-art très discret derrière tout le hero (continuité avec l'écran de
   connexion), en plus — pas à la place — de l'aperçu produit ci-dessous. */
.vitrine-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/branding/flotte-linart.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: invert(1) grayscale(0.4);
  opacity: 0.06;
  pointer-events: none;
}

.vitrine-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.vitrine-eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ambre-clair);
  margin: 0 0 14px;
}

.vitrine-h1 {
  color: var(--papier);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  margin: 0 0 20px;
}

.vitrine-lead {
  color: var(--papier);
  opacity: 0.78;
  font-size: 16px;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 0 30px;
}

.vitrine-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.vitrine-cta-row-centree { justify-content: center; margin: 0 auto; }

.vitrine-cta-sub {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--ambre-clair);
  opacity: 0.85;
}

.vitrine-hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--asphalte-800), var(--asphalte-900));
  border: 1px solid rgba(226, 149, 46, 0.25);
  box-shadow: var(--ombre-lg), var(--ombre-or);
  overflow: hidden;
  /* Léger effet "flottant" : renforce l'impression de vraie fenêtre logicielle posée
     devant le fond sombre, plutôt qu'une simple image plate. */
  transform: rotate(-1deg);
}

/* Barre de titre façon fenêtre de navigateur — habille la vraie capture d'écran
   ci-dessous en "aperçu logiciel" plutôt qu'une image brute plaquée dans le hero. */
.vitrine-hero-card-topbar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: var(--asphalte-700);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vitrine-hero-card-topbar span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.vitrine-hero-card-topbar span:nth-child(1) { background: var(--ambre); }
.vitrine-hero-card-topbar span:nth-child(2) { background: var(--ambre-clair); }
.vitrine-hero-card-topbar span:nth-child(3) { background: var(--teal); }

.vitrine-hero-screenshot {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Bandeau bénéfices ---------- */
.vitrine-benefices {
  position: relative;
  background: var(--asphalte-800);
  padding: 52px 32px 56px;
}
.vitrine-benefices::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--degrade-or);
}

.vitrine-benefices-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.vitrine-benefice h3 { color: var(--papier); font-size: 18px; margin: 0 0 10px; }
.vitrine-benefice p { color: var(--papier); opacity: 0.72; font-size: 13.5px; line-height: 1.6; margin: 0; }

/* ---------- Badges d'icônes réutilisés partout (bénéfices, modules, formules) ---------- */
.vitrine-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.vitrine-icon-badge svg { width: 24px; height: 24px; }
.vitrine-icon-badge.tint-ambre { background: rgba(226, 149, 46, 0.16); color: var(--ambre-fonce); }
.vitrine-icon-badge.tint-teal { background: rgba(62, 139, 116, 0.16); color: var(--teal); }
/* Sur fond sombre (bénéfices, formules), le trait de l'icône reste lisible en le
   remontant vers les tons clairs de la marque plutôt que les tons "foncés" pensés pour
   un fond clair. */
.vitrine-benefices .vitrine-icon-badge.tint-ambre,
.vitrine-formule .vitrine-icon-badge.tint-ambre { color: var(--ambre-clair); }
.vitrine-benefices .vitrine-icon-badge.tint-teal,
.vitrine-formule .vitrine-icon-badge.tint-teal { background: rgba(62, 139, 116, 0.22); }

/* ---------- Sections communes (modules / formules) ---------- */
.vitrine-section-inner { max-width: 1180px; margin: 0 auto; padding: 80px 32px; }

.vitrine-modules, .vitrine-formules { overflow: hidden; }
.vitrine-modules { background: var(--papier); }
.vitrine-formules { background: var(--asphalte-900); }

.vitrine-modules h2, .vitrine-formules h2, .vitrine-cta-finale h2 {
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 48px;
}
.vitrine-modules h2 { color: var(--asphalte-900); }
.vitrine-formules h2 { color: var(--papier); }

/* ---------- Grille des modules ---------- */
.vitrine-modules-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.vitrine-module {
  position: relative;
  background: var(--papier-carte);
  border: 1px solid var(--ligne);
  border-top: 3px solid var(--ambre-fonce);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: var(--ombre-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vitrine-module:hover { transform: translateY(-3px); box-shadow: var(--ombre-md); }
.vitrine-module.tint-teal { border-top-color: var(--teal); }

.vitrine-module-num {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--ligne);
  letter-spacing: 1px;
}

.vitrine-module h3 { font-size: 15px; margin: 0 0 8px; color: var(--asphalte-900); }
.vitrine-module p { font-size: 12.5px; color: var(--asphalte-600); line-height: 1.55; margin: 0; }

/* ---------- Formules ---------- */
.vitrine-formules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.vitrine-formule {
  position: relative;
  background: var(--asphalte-800);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 34px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vitrine-formule .vitrine-icon-badge { margin-bottom: 0; }
.vitrine-formule h3 { color: var(--papier); font-size: 22px; margin: 6px 0 0; }
.vitrine-formule-limite { color: var(--ambre-clair); font-weight: 600; font-size: 14.5px; margin: 0; }
.vitrine-formule-prix { color: var(--papier); opacity: 0.6; font-size: 12.5px; margin: 0 0 10px; }

/* Liste à coches : identique sur les 3 formules (seule la limite de véhicules diffère
   réellement entre elles, voir lib/paliers.js) — sert à donner du rythme visuel, pas à
   suggérer des fonctionnalités différentes selon le palier. */
.vitrine-check-list { list-style: none; padding: 0; margin: 4px 0 6px; width: 100%; text-align: left; }
.vitrine-check-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--papier);
  opacity: 0.85;
  font-size: 13px;
  margin-bottom: 9px;
}
.vitrine-check-list li:last-child { margin-bottom: 0; }
.vitrine-check-list svg { width: 16px; height: 16px; color: var(--teal); flex: none; }

.vitrine-formule-featured {
  background: linear-gradient(160deg, var(--asphalte-700), var(--asphalte-800));
  border-color: var(--ambre-fonce);
  box-shadow: var(--ombre-or);
  transform: translateY(-10px);
}

.vitrine-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--degrade-or);
  color: var(--asphalte-900);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: var(--ombre-or);
  white-space: nowrap;
}

/* ---------- CTA finale & footer ---------- */
.vitrine-cta-finale {
  background: linear-gradient(160deg, #14171A 0%, var(--asphalte-900) 100%);
  padding: 84px 32px;
  text-align: center;
}
.vitrine-cta-finale h2 { color: var(--papier); }

.vitrine-footer {
  background: var(--asphalte-900);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px;
  text-align: center;
}
.vitrine-footer p { color: var(--papier); opacity: 0.55; font-size: 12px; margin: 0; }

/* ---------- Boutons vitrine ---------- */
.vitrine-btn-plein {
  background: var(--degrade-or);
  color: var(--asphalte-900);
  font-weight: 700;
  padding: 13px 26px;
  font-size: 14px;
  box-shadow: var(--ombre-or);
}
.vitrine-btn-plein:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(226, 149, 46, 0.45); }

.vitrine-btn-contour {
  background: transparent;
  color: var(--papier);
  border: 1.5px solid rgba(245, 243, 238, 0.45);
  padding: 12px 24.5px;
  font-size: 14px;
  font-weight: 600;
}
.vitrine-btn-contour:hover { background: rgba(245, 243, 238, 0.08); border-color: rgba(245, 243, 238, 0.75); }

.vitrine-btn-sm { padding: 8px 16px; font-size: 12.5px; }

/* Lien "Retour au site" sur l'écran de connexion (voir index.html) */
.lien-retour-vitrine {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--asphalte-600);
}
.lien-retour-vitrine:hover { color: var(--ambre-fonce); }

/* ---------- Responsive (< 860px : empiler hero/formules, cacher les liens de nav secondaires) ---------- */
@media (max-width: 860px) {
  .vitrine-nav-links a.vitrine-nav-ancre { display: none; }

  .vitrine-hero { padding: 64px 24px 72px; }
  .vitrine-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .vitrine-hero-visuel { order: -1; }
  .vitrine-hero-card { transform: none; }
  .vitrine-lead { max-width: none; }

  .vitrine-benefices-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .vitrine-benefices-inner .vitrine-icon-badge { margin-left: auto; margin-right: auto; }

  .vitrine-section-inner { padding: 56px 24px; }
  .vitrine-modules-grid { grid-template-columns: repeat(2, 1fr); }

  .vitrine-formules-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .vitrine-formule-featured { transform: none; }

  .vitrine-cta-finale { padding: 64px 24px; }
}

@media (max-width: 480px) {
  .vitrine-nav-inner { padding: 12px 18px; }
  .vitrine-modules-grid { grid-template-columns: 1fr; }
  .vitrine-cta-row { flex-direction: column; align-items: stretch; }
  .vitrine-cta-row .btn { width: 100%; text-align: center; }
}

/* ==========================================================
   COMPTE PROPRIÉTAIRE — MODE CONSULTATION (v3.83)
   ==========================================================
   body.mode-consultation est posé par afficherApplication() (app.js) pour un compte
   'proprietaire'. Tous les boutons qui créent, modifient ou suppriment quelque chose sont
   masqués ; restent ceux qui servent à CONSULTER (ouvrir une fiche "Gérer/Détail/Historique",
   imprimer, fermer une fenêtre, déplier une section, onglets). Ce n'est qu'un confort
   d'affichage : le serveur refuse de toute façon toute modification venant de ce compte
   (middleware/auth.js, bloquerEcrituresProprietaire). Les champs de saisie des fenêtres sont,
   eux, désactivés par appliquerModeConsultation() dans app.js. */
body.mode-consultation:not(.role-superviseur) :is(#view-container, #modal-root)
  :is(.btn, label.btn, .doc-delete-btn, .btn-photo-etat-lieux-suppr, .fleet-photo-upload,
      .crew-avatar-upload, .doc-upload-btn, .detail-photo-btn, input[type=file]):not([data-detail], [data-detail-btn], [data-action="imprimer"], #cancel, #close, #ouvrir,
       #mdp-annuler, #mdp-enregistrer, .modal-close, .accordion-header, [data-tab-btn],
       [data-consultation-ok]) {
  display: none !important;
}
/* Superviseur (v3.86) : même consultation, SAUF ce qui est marqué data-superviseur-ok (bouton
   isolé, ex. "+ Plein carburant") ou placé dans une zone data-superviseur-zone (formulaires de
   départ/retour, contrôle d'état, gasoil d'un voyage) — le travail de terrain qu'il peut faire. */
body.mode-consultation.role-superviseur :is(#view-container, #modal-root)
  :is(.btn, label.btn, .doc-delete-btn, .btn-photo-etat-lieux-suppr, .fleet-photo-upload,
      .crew-avatar-upload, .doc-upload-btn, .detail-photo-btn, input[type=file]):not([data-detail], [data-detail-btn], [data-action="imprimer"], #cancel, #close, #ouvrir,
       #mdp-annuler, #mdp-enregistrer, .modal-close, .accordion-header, [data-tab-btn],
       [data-consultation-ok], [data-superviseur-ok], [data-superviseur-zone] *) {
  display: none !important;
}
.consultation-banner.superviseur { background: var(--teal-fond); color: var(--teal); border-bottom-color: color-mix(in srgb, var(--teal) 25%, transparent); }
.controle-signe { font-size: 12px; color: var(--texte-doux); }

.consultation-banner {
  padding: 10px 24px;
  background: var(--bleu-fond);
  color: var(--bleu-info);
  font-size: 0.86rem;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--bleu-info) 25%, transparent);
}

/* Console super-admin : demandes de comptes propriétaires en attente. */
.demandes-proprietaires {
  border: 1px solid color-mix(in srgb, var(--principale) 45%, var(--trait));
  background: var(--principale-pale);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.demandes-proprietaires h2 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.demandes-proprietaires .accordion-count { background: var(--principale); color: #fff; }
.demandes-proprietaires table { background: var(--fond); }

/* ==========================================================
   VOYAGES (v3.84) — jauge de gasoil d'un voyage
   ========================================================== */
.jauge-gasoil { min-width: 180px; }
.jauge-gasoil-barre { height: 8px; border-radius: 999px; background: var(--fond-2); overflow: hidden; border: 1px solid var(--trait); }
.jauge-gasoil-barre span { display: block; height: 100%; border-radius: 999px; }
.jauge-gasoil-texte { font-size: 12px; margin-top: 4px; font-weight: 600; }
.float-solde { font-family: var(--font-display); font-size: 24px; font-weight: 700; }

/* Choix en pilules (prime de voyage, v3.85) : boutons radio présentés comme des pilules. */
.choix-pilules { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-pilules label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border: 1px solid var(--trait); border-radius: 999px; background: var(--fond);
  font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--texte);
}
.choix-pilules label:has(input:checked) { border-color: var(--principale); background: var(--principale-pale); color: var(--principale-fonce); font-weight: 600; }
.choix-pilules input { width: auto; margin: 0; accent-color: var(--principale); }

/* ==========================================================
   TÉLÉPHONE (v3.88) — finitions pour tous les rôles
   ==========================================================
   Audit à 390 px de large (admin, propriétaire, superviseur, chauffeur, super-admin, chaque
   écran) : rien ne débordait, mais boutons trop petits pour un doigt, barre du haut
   encombrée, barres d'actions écrasées, zoom automatique de l'iPhone sur les champs. */
@media (max-width: 900px) {
  /* "Mot de passe" et "Déconnexion" sont déjà dans le menu ☰ : on ne garde dans la barre du
     haut que le nom de l'utilisateur, sur une ligne. Le chauffeur, lui, n'a pas de menu ☰ :
     il garde ses deux boutons. */
  body:not([data-role="chauffeur"]) #btn-mot-de-passe,
  body:not([data-role="chauffeur"]) #btn-logout { display: none !important; }
  .topbar-user { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

@media (max-width: 640px) {
  /* Barre du haut : le titre sur la première ligne, le nom de l'utilisateur en dessous
     (sinon "Tableau de bord" et "ADMINISTRATEUR · ADMIN" se collaient). */
  .topbar-right { width: 100%; }

  /* Cible tactile confortable (~40 px) pour tous les boutons. */
  .btn { min-height: 40px; }
  .btn-ghost { padding: 8px 12px; }
  .accordion-header { padding: 14px 14px; }

  /* 16 px minimum dans les champs : sinon l'iPhone zoome toute la page à chaque saisie. */
  select, input[type="text"], input[type="number"], input[type="date"], input[type="password"],
  input[type="tel"], input[type="search"], input[type="month"], textarea { font-size: 16px; }

  /* Barres d'actions (filtres + boutons) : sur deux lignes, chaque élément à sa vraie taille. */
  .actions-bar { flex-wrap: wrap; gap: 10px; }
  .actions-bar > div:empty { display: none; }
  .actions-bar > div { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .actions-bar > div > * { flex: 1 1 auto; }
  .actions-bar > .btn { margin-left: auto; }
  .filters select { flex: 1 1 0; min-width: 0; }

  /* Fenêtres : en "feuille" qui monte du bas de l'écran, sur toute la largeur. */
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
  }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }

  /* Console super-admin et écrans de connexion : moins de marge perdue. */
  .superadmin-screen { padding: 12px; align-items: flex-start; }
  .superadmin-card { padding: 22px 16px; }
  .superadmin-filtres { flex-wrap: wrap; }
  .superadmin-filtres > * { flex: 1 1 100%; }

  /* Grilles de formulaire : une seule colonne. */
  .form-grid { grid-template-columns: 1fr !important; }
}