/* Appli mobile Confort Rent a Car — mêmes couleurs que le logiciel de bureau
   (app/theme.py, thème « Confort » tiré du logo). */
:root {
  --primaire: #4A2D96;
  --primaire-fonce: #3D257B;
  --primaire-doux: #F1ECFB;
  --marque: #301D66;
  --rouge-marque: #E62F2B;
  --selection: #D3C6F2;
  --texte: #1F1A38;
  --discret: #635D7F;
  --bord: #E6E1F0;
  --surface: #FFFFFF;
  --fond: #F6F4FB;
  --champ: #F8F6FC;
  --rouge: #C62828;
  --rouge-doux: #FDECEC;
  --rouge-ligne: #F8C9C9;
  --orange: #C2410C;
  --orange-doux: #FFF1E6;
  --bleu: #1D5FBF;
  --bleu-doux: #EAF2FD;
  --violet: #6D3FB8;
  --violet-doux: #F3EDFC;
  --vert: #15803D;
  --vert-doux: #E8F7EE;
  --vert-ligne: #CFEFD9;
  --rayon: 14px;
  --rayon-petit: 10px;
  --haut-sur: env(safe-area-inset-top, 0px);
  --bas-sur: env(safe-area-inset-bottom, 0px);
  --nav-h: 66px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* clip et non hidden : hidden ferait de body une zone de défilement à part, et
   avec overscroll-behavior la molette ne ferait plus défiler la page. */
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { overscroll-behavior-y: contain; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.ar { font-weight: 600; direction: rtl; unicode-bidi: isolate; color: var(--discret); font-size: .92em; }
.ic { width: 22px; height: 22px; flex: none; }
.ic-petit { width: 17px; height: 17px; }
.ic-grand { width: 30px; height: 30px; }

/* ------------------------------------------------------------- Connexion */
.connexion {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: linear-gradient(160deg, var(--marque), var(--primaire));
}
.connexion-carte {
  width: 100%; max-width: 400px; background: var(--surface); border-radius: 20px;
  padding: 24px 20px; box-shadow: 0 20px 50px rgba(20, 10, 60, .35);
}
.connexion-logo { width: 100%; max-width: 260px; display: block; margin: 0 auto 12px; }
.connexion h1 { font-size: 20px; margin: 0 0 16px; text-align: center; }
.connexion h1 .ar { display: block; font-size: 16px; }

/* ---------------------------------------------------------------- Entête */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + var(--haut-sur)) 12px 10px;
  background: var(--marque); color: #fff;
  box-shadow: 0 2px 10px rgba(20, 10, 60, .25);
}
.entete-titre { flex: 1; min-width: 0; }
.titre-fr { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titre-ar { color: #DCD4F5; font-size: 13px; text-align: left; }
.entete-btn {
  position: relative; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center;
}
.entete-btn:active { background: rgba(255, 255, 255, .25); }
.pastille {
  position: absolute; top: 3px; right: 3px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--rouge-marque); color: #fff; font-size: 11px;
  font-weight: 700; display: grid; place-items: center; border: 2px solid var(--marque);
}
.direct { width: 10px; height: 10px; border-radius: 50%; background: #8b83a8; flex: none; }
.direct.ok { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }

/* ------------------------------------------------------------------ Page */
.page {
  padding: 12px 12px calc(var(--nav-h) + 90px + var(--bas-sur));
  max-width: 760px; margin: 0 auto;
}
.page.sans-nav { padding-bottom: calc(110px + var(--bas-sur)); }
.vide { text-align: center; color: var(--discret); padding: 40px 10px; }
.chargement { text-align: center; color: var(--discret); padding: 50px 0; }
.spin {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--selection);
  border-top-color: var(--primaire); animation: tour 0.8s linear infinite; margin: 0 auto 10px;
}
@keyframes tour { to { transform: rotate(360deg); } }

.section-titre {
  display: flex; align-items: center; gap: 8px; margin: 18px 4px 8px; font-size: 16px; font-weight: 700;
}
.section-titre .ar { font-size: 13px; margin-inline-start: auto; }
.section-titre .compte {
  background: var(--primaire-doux); color: var(--primaire); border-radius: 10px;
  padding: 1px 8px; font-size: 13px;
}

.carte {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 12px 14px; margin-bottom: 10px;
}
a.carte, button.carte { display: block; width: 100%; text-align: left; }
a.carte:active, button.carte:active { background: var(--primaire-doux); }

/* Tuiles de chiffres */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tuile {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 12px; display: flex; gap: 10px; align-items: center;
}
.tuile .rond { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.tuile > div { min-width: 0; }
.tuile .chiffre { font-size: 24px; font-weight: 800; line-height: 1.1; }
.tuile .libelle { font-size: 12.5px; }
.tuile .libelle .ar { display: block; font-size: 12px; }
.tuiles-3 { grid-template-columns: minmax(0, 1fr); }
.tuiles-3 .tuile .chiffre { font-size: 21px; }

/* Actions rapides */
.actions-rapides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.action-rapide {
  border: 0; border-radius: var(--rayon); padding: 12px 6px; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; min-height: 92px;
}
.action-rapide .ar { color: rgba(255, 255, 255, .85); font-size: 12px; }
.action-rapide:active { filter: brightness(.9); }

/* Couleurs utilitaires */
.f-vert { background: var(--vert); } .f-violet { background: var(--primaire); } .f-bleu { background: var(--bleu); }
.f-rouge { background: var(--rouge); } .f-orange { background: var(--orange); }
.t-vert { color: var(--vert); } .t-rouge { color: var(--rouge); } .t-bleu { color: var(--bleu); }
.t-orange { color: var(--orange); } .t-violet { color: var(--primaire); } .t-discret { color: var(--discret); }
.d-vert { background: var(--vert-doux); color: var(--vert); } .d-rouge { background: var(--rouge-doux); color: var(--rouge); }
.d-bleu { background: var(--bleu-doux); color: var(--bleu); } .d-orange { background: var(--orange-doux); color: var(--orange); }
.d-violet { background: var(--primaire-doux); color: var(--primaire); }

/* Lignes d'alerte */
.carte.alerte, .alerte { display: flex; gap: 10px; align-items: center; }
.alerte .rond { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.alerte .corps { flex: 1; min-width: 0; }
.alerte .ligne1 { font-weight: 700; }
.alerte .ligne2 { color: var(--discret); font-size: 13.5px; margin-top: 2px; }

/* ------------------------------------------------------------ Recherche */
.recherche {
  position: sticky; top: calc(64px + var(--haut-sur)); z-index: 10;
  background: var(--fond); padding: 4px 0 8px; margin: -4px 0 4px;
}
.boite-recherche {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 2px solid var(--bord); border-radius: 12px; padding: 0 10px; height: 48px;
}
.boite-recherche:focus-within { border-color: var(--primaire); }
.boite-recherche input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; height: 100%; font-size: 16px; }
.boite-recherche .effacer { border: 0; background: none; color: var(--discret); padding: 6px; }
.puces { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.puces::-webkit-scrollbar { display: none; }
.puce {
  flex: none; border: 1.5px solid var(--bord); background: var(--surface); border-radius: 18px;
  padding: 6px 12px; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
}
.puce.active { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.puce.active .ar { color: rgba(255, 255, 255, .85); }
.puce .x { margin-inline-start: 2px; opacity: .8; }
.resume-filtre { font-size: 13px; color: var(--discret); margin: 6px 4px 0; }

/* -------------------------------------------------------- Cartes métier */
.voiture { position: relative; padding-left: 18px; overflow: hidden; }
.voiture::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--vert);
}
.voiture.loue::before { background: var(--bleu); }
.voiture.maintenance::before { background: var(--orange); }
.voiture.hors_service::before { background: var(--discret); }
.voiture.depasse { background: var(--rouge-doux); border-color: var(--rouge-ligne); }
.voiture.depasse::before { background: var(--rouge); }
.ligne-titre { display: flex; align-items: center; gap: 8px; }
.ligne-titre .nom { font-size: 16.5px; font-weight: 800; flex: 1; min-width: 0; }
.matricule {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; font-size: 13.5px;
  background: var(--primaire-doux); color: var(--primaire); border-radius: 7px; padding: 2px 7px; white-space: nowrap;
}
.infos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 14px; color: var(--discret); }
.infos .i { display: inline-flex; align-items: center; gap: 5px; }
.infos .fort { color: var(--texte); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.etiq {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 3px 8px; font-size: 12.5px; font-weight: 700;
}
.remarque { margin-top: 6px; font-size: 13.5px; color: var(--texte); background: var(--champ); border-radius: 8px; padding: 6px 8px; }
.tel { color: var(--primaire); }

.contrat.en_cours { background: var(--vert-doux); border-color: var(--vert-ligne); }
.contrat.retard { background: var(--rouge-doux); border-color: var(--rouge-ligne); }
.contrat.clos .nom { color: var(--discret); }
.periode { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; }
.montants { display: flex; gap: 14px; margin-top: 6px; font-size: 14px; }

.resa.aujourdhui { background: var(--vert-doux); border-color: var(--vert-ligne); }
.resa.passee { opacity: .7; }

/* ------------------------------------------------------- Détail / fiches */
.bandeau {
  border-radius: var(--rayon); padding: 14px; margin-bottom: 10px; color: #fff;
  background: linear-gradient(135deg, var(--primaire), var(--marque));
}
.bandeau .grand { font-size: 21px; font-weight: 800; }
.bandeau .ar { color: rgba(255, 255, 255, .85); }
.bandeau .matricule { background: rgba(255, 255, 255, .18); color: #fff; }
.bandeau.vert { background: linear-gradient(135deg, #1b8f48, var(--vert)); }
.bandeau.rouge { background: linear-gradient(135deg, #d63a3a, var(--rouge)); }
.bandeau.gris { background: linear-gradient(135deg, #7b7596, #5b5578); }

.liste-def { margin: 0; }
.liste-def .l { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bord); }
.liste-def .l:last-child { border-bottom: 0; }
.liste-def .k { color: var(--discret); font-size: 13.5px; }
.liste-def .k .ar { display: block; font-size: 12px; }
.liste-def .v { text-align: right; font-weight: 700; word-break: break-word; }

.boutons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.boutons.trois { grid-template-columns: repeat(3, 1fr); }
.boutons .plein { grid-column: 1 / -1; }

.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chiffres .c { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 10px 8px; }
.chiffres .c .n { font-size: 16px; font-weight: 800; margin-top: 2px; }
.chiffres .c .lib { font-size: 12px; color: var(--discret); }
.chiffres .c .lib .ar { display: block; }

/* --------------------------------------------------------------- Boutons */
.btn {
  border: 0; border-radius: 12px; min-height: 50px; padding: 8px 12px; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; font-weight: 700; text-align: center; line-height: 1.15;
}
.btn .ar { display: block; font-size: 12.5px; }
.btn .txt { display: flex; flex-direction: column; align-items: flex-start; }
.btn-large { width: 100%; min-height: 54px; font-size: 16px; }
.btn-primaire { background: var(--primaire); color: #fff; } .btn-primaire .ar { color: rgba(255,255,255,.85); }
.btn-vert { background: var(--vert); color: #fff; } .btn-vert .ar { color: rgba(255,255,255,.85); }
.btn-rouge { background: var(--rouge); color: #fff; } .btn-rouge .ar { color: rgba(255,255,255,.85); }
.btn-orange { background: var(--orange); color: #fff; } .btn-orange .ar { color: rgba(255,255,255,.85); }
.btn-clair { background: var(--surface); color: var(--texte); border: 2px solid var(--bord); }
.btn-lien { background: none; color: var(--primaire); min-height: 40px; padding: 4px 6px; }
.btn:active { filter: brightness(.92); }
.btn[disabled] { opacity: .55; }

.fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-h) + 16px + var(--bas-sur)); z-index: 25;
  height: 58px; border: 0; border-radius: 29px; padding: 0 20px 0 16px; background: var(--vert); color: #fff;
  display: flex; align-items: center; gap: 8px; font-weight: 700; box-shadow: 0 8px 20px rgba(21, 128, 61, .4);
}
.fab .ar { color: rgba(255, 255, 255, .85); display: block; font-size: 12px; }
.fab:active { filter: brightness(.9); }

/* ------------------------------------------------------- Barre du bas */
.barre-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--bord);
  padding-bottom: var(--bas-sur); box-shadow: 0 -4px 14px rgba(20, 10, 60, .06);
}
.barre-nav a {
  height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; font-size: 11px; color: var(--discret); position: relative;
}
.barre-nav a .ar { font-size: 10.5px; }
.barre-nav a.actif { color: var(--primaire); }
.barre-nav a.actif::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--primaire);
}
.barre-nav a.actif .ar { color: var(--primaire); }

/* ----------------------------------------------------------- Formulaires */
.form-section { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 6px 14px 12px; margin-bottom: 12px; }
.form-section > .section-titre { margin: 10px 0 6px; }
details.form-section > summary { list-style: none; cursor: pointer; }
details.form-section > summary::-webkit-details-marker { display: none; }
details.form-section > summary .section-titre::after { content: "▾"; margin-inline-start: 6px; color: var(--discret); }
.champ { display: block; margin: 10px 0; }
.etiquette { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 5px; }
.etiquette .ar { font-size: 13px; }
.etiquette .requis { color: var(--rouge); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; border: 2px solid var(--bord); border-radius: var(--rayon-petit);
  background: var(--champ); padding: 10px 12px; font-size: 16px; outline: none; font-weight: 600;
}
.champ textarea { min-height: 84px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--primaire); background: #fff; }
.champ .aide { font-size: 12.5px; color: var(--discret); margin-top: 4px; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.deux-1 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 10px; }
.erreur { color: var(--rouge); background: var(--rouge-doux); border-radius: 10px; padding: 10px 12px; margin: 10px 0; white-space: pre-line; }
.info { color: var(--bleu); background: var(--bleu-doux); border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 14px; white-space: pre-line; }
.ok-box { color: var(--vert); background: var(--vert-doux); border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }

.choix-voiture {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 2px dashed var(--selection);
  border-radius: var(--rayon-petit); background: var(--primaire-doux); padding: 12px; min-height: 60px;
}
.choix-voiture.rempli { border-style: solid; background: #fff; border-color: var(--primaire); }
.choix-voiture .corps { flex: 1; min-width: 0; }

.barre-enregistrer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 12px calc(10px + var(--bas-sur));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--bord); display: flex; gap: 8px;
  backdrop-filter: blur(6px);
}
.barre-enregistrer .btn { flex: 1; }
.barre-enregistrer .btn-clair { flex: 0 0 auto; }

/* ------------------------------------------------- Feuilles (modales) */
.voile {
  position: fixed; inset: 0; z-index: 50; background: rgba(20, 12, 50, .45);
  display: flex; align-items: flex-end; justify-content: center; animation: apparait .15s ease-out;
}
.feuille {
  width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--fond); border-radius: 20px 20px 0 0; animation: monte .2s ease-out;
  padding-bottom: var(--bas-sur);
}
.feuille.pleine { height: 92vh; }
.feuille-tete { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; background: var(--surface); border-radius: 20px 20px 0 0; border-bottom: 1px solid var(--bord); }
.feuille-tete .t { flex: 1; font-size: 17px; font-weight: 800; }
.feuille-tete .t .ar { display: block; font-size: 13px; }
.feuille-tete .fermer { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--primaire-doux); color: var(--primaire); display: grid; place-items: center; }
.feuille-corps { padding: 10px 14px; overflow-y: auto; flex: 1; }
.feuille-pied { padding: 10px 14px 14px; display: flex; gap: 8px; background: var(--surface); border-top: 1px solid var(--bord); flex-wrap: wrap; }
.feuille-pied .btn { flex: 1; min-width: 120px; }
@keyframes apparait { from { opacity: 0; } }
@keyframes monte { from { transform: translateY(40px); opacity: .5; } }

.option-voiture { display: flex; align-items: center; gap: 10px; }
.option-voiture.prise { background: var(--rouge-doux); border-color: var(--rouge-ligne); }
.option-voiture .etat { font-size: 13px; margin-top: 3px; }
.option-voiture.choisie { border: 2px solid var(--primaire); }

/* ----------------------------------------------------------------- Toasts */
.toasts { position: fixed; left: 0; right: 0; top: calc(70px + var(--haut-sur)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.toast {
  pointer-events: auto; max-width: 520px; width: 100%; background: var(--texte); color: #fff; border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); display: flex; gap: 10px; align-items: center;
  animation: monte .2s ease-out; white-space: pre-line;
}
.toast.ok { background: var(--vert); } .toast.ko { background: var(--rouge); }
.toast .ar { color: rgba(255, 255, 255, .85); display: block; }

/* Notifications */
.notif { display: flex; gap: 10px; }
.notif.non-lue { border-color: var(--selection); box-shadow: inset 4px 0 0 var(--primaire); }
.notif .quand { font-size: 12px; color: var(--discret); margin-top: 3px; }

@media (min-width: 560px) {
  .tuiles-3 { grid-template-columns: repeat(3, 1fr); }
  .tuiles { grid-template-columns: repeat(4, 1fr); }
}

.voile .option-voiture, .feuille .carte { display: flex; }
.feuille .carte[data-aucune] { display: block; }

/* ===================================================================
   Grand écran (PC du bureau) : menu latéral, tableaux, fenêtres centrées.
   Même charte que l'ancien logiciel de bureau.
   =================================================================== */
.barre-laterale { display: none; }
.action-entete { display: none; }
.tableau-zone { display: none; }
.vue-large { display: none; }

.tableau { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface);
  font-size: 14px; }
.tableau th { position: sticky; top: 0; z-index: 1; background: var(--primaire-doux); color: var(--texte);
  text-align: left; padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tableau th .ar { display: block; font-size: 12px; }
.tableau td { padding: 8px 10px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau td + td, .tableau th + th { border-left: 1px solid var(--bord); }
.tableau tr.lien { cursor: pointer; }
.tableau tr.lien:hover td { background: var(--selection); }
.tableau tr.loue td { background: var(--bleu-doux); }
.tableau tr.depasse td { background: var(--rouge-ligne); color: #7f1d1d; }
.tableau tr.en_cours td { background: var(--vert-ligne); }
.tableau tr.retard td { background: var(--rouge-ligne); }
.tableau tr.clos td, .tableau tr.passee td, .tableau tr.vide td { color: var(--discret); }
.tableau tr.maintenance td { background: var(--orange-doux); }
.tableau tr.hors_service td { background: #EEEDF3; color: var(--discret); }
.tableau tr.aujourdhui td { background: var(--vert-ligne); }
.tableau tr.perte td { background: var(--rouge-doux); color: var(--rouge); }
.tableau tr.echeance_proche td { background: var(--orange-doux); }
.tableau tr.solde td, .tableau tr.termine td { color: var(--discret); }
.tableau .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau .centre { text-align: center; }
.tableau .court { white-space: nowrap; }
.cadre-tableau { border: 1px solid var(--bord); border-radius: var(--rayon); overflow: auto; background: var(--surface);
  max-height: calc(100vh - 230px); }
.pied-tableau { color: var(--discret); font-size: 13px; margin: 8px 4px; }

.onglets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.onglet { border: 2px solid var(--bord); background: var(--surface); border-radius: 12px; padding: 8px 14px;
  display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.onglet .ar { font-size: 12px; }
.onglet.actif { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.onglet.actif .ar { color: rgba(255,255,255,.85); }
.verrou { max-width: 420px; margin: 40px auto; text-align: center; }
.verrou .rond { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px;
  background: var(--primaire-doux); color: var(--primaire); }
.puces-banque { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.grille-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.doc { display: flex; flex-direction: column; gap: 6px; }
.doc .apercu { height: 120px; border-radius: 10px; background: var(--champ); display: grid; place-items: center;
  overflow: hidden; color: var(--primaire); }
.doc .apercu img { width: 100%; height: 100%; object-fit: cover; }
.doc .actions { display: flex; gap: 6px; margin-top: auto; }
.doc .actions .btn { flex: 1; min-height: 40px; font-size: 13px; padding: 4px 8px; }

@media (min-width: 1024px) {
  body.large { --lat-w: 248px; }
  .large .barre-laterale {
    display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: var(--lat-w); z-index: 40;
    background: var(--marque); color: #fff; padding: 18px 12px; overflow-y: auto;
  }
  .large .lat-marque { background: #fff; border-radius: var(--rayon); padding: 8px; }
  .large .lat-marque img { width: 100%; display: block; }
  .large .lat-agence { text-align: center; margin: 10px 0 12px; font-size: 14px; }
  .large .lat-agence .ar { color: #A99DD3; display: block; font-size: 12px; }
  .large .lat-agence::after { content: ""; display: block; height: 3px; background: var(--rouge-marque); border-radius: 2px; margin: 12px 18px 0; }
  .large .lat-nav { display: flex; flex-direction: column; gap: 2px; }
  .large .lat-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--rayon);
    color: #DCD4F5; font-size: 14px; line-height: 1.2; }
  .large .lat-nav a .ar { display: block; color: #A99DD3; font-size: 12.5px; }
  .large .lat-nav a:hover { background: #422B84; }
  .large .lat-nav a.actif { background: #fff; color: var(--primaire); }
  .large .lat-nav a.actif .ar { color: var(--primaire); }
  .large .lat-pied { margin-top: auto; padding-top: 12px; font-size: 12px; color: #A99DD3; text-align: center; }
  .large .lat-pied button { background: none; border: 0; color: #DCD4F5; cursor: pointer; text-decoration: underline; }

  .large .entete { margin-left: var(--lat-w); background: var(--fond); color: var(--texte); box-shadow: none;
    padding: 16px 24px 10px; }
  .large .entete .titre-fr { font-size: 22px; }
  .large .entete .titre-ar { color: var(--discret); }
  .large .entete-btn { background: var(--surface); color: var(--texte); border: 1px solid var(--bord); }
  .large .pastille { border-color: var(--surface); }
  .large .action-entete { display: block; }
  .large .action-entete .btn { min-height: 48px; }
  .large .page { margin-left: var(--lat-w); max-width: none; padding: 4px 24px 32px; }
  .large .page.sans-nav { padding-bottom: 110px; }
  .large .barre-nav, .large .fab { display: none !important; }
  .large .recherche { top: 72px; }
  .large .barre-enregistrer { left: var(--lat-w); padding-left: 24px; padding-right: 24px; }
  .large .barre-enregistrer .btn { flex: 0 0 auto; min-width: 200px; }
  .large .tableau-zone { display: block; }
  .large .cartes-zone { display: none; }
  .large .vue-large { display: block; }
  .large .vue-mobile { display: none; }
  .large .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .large .colonnes-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  .large .colonnes-2 > * { min-width: 0; }
  /* Formulaire de contrat : deux colonnes qui se remplissent à la suite,
     sans trou sous les petites sections. */
  .large #f-ctr { column-count: 2; column-gap: 16px; }
  .large #f-ctr > * { break-inside: avoid; }
  .large #f-ctr > .info, .large #f-ctr > #f-erreur { column-span: all; }
  .large .voile { align-items: center; }
  .large .feuille { border-radius: 20px; max-height: 88vh; }
  .large .feuille.pleine { height: 88vh; }
  .large .feuille-tete { border-radius: 20px 20px 0 0; }
  .large .toasts { top: 20px; }
  .large .actions-rapides { grid-template-columns: repeat(3, minmax(0, 220px)); }
}