/* =====================================================================
   INVENTAIRE MATÉRIEL — habillage CIP média
   Palette, polices, arrondis et animations repris du site cipmedia.
   ===================================================================== */

:root{
  /* Palette officielle CIP média */
  --bleu-nuit:#030F28;
  --bleu-fonce:#15274D;
  --bleu:#2F436D;
  --bleu-moyen:#566890;
  --bleu-clair:#98A5C1;
  --bleu-pale:#EEF2F9;
  --dore:#D7B777;
  --dore-fonce:#82642E;
  --dore-pale:#FFEBC3;
  --texte:#253248;
  --texte-pale:#566890;
  --blanc:#FFFFFF;
  --gris-ligne:#E1E7F0;

  /* Statuts */
  --vert:#1F7A4D; --vert-fond:#E4F5EC;
  --rouge:#B3282D; --rouge-fond:#FCE9E9;

  --rayon:14px;
  --rayon-sm:10px;
  --titres:'Oxanium','Segoe UI',sans-serif;
  --texte-police:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;

  --ombre:0 1px 2px rgba(21,39,77,.05), 0 8px 24px rgba(21,39,77,.06);
  --ombre-mid:0 4px 10px rgba(21,39,77,.07), 0 14px 40px rgba(21,39,77,.10);
  --ombre-forte:0 18px 48px rgba(3,15,40,.22);

  /* Rythme vertical — plus d'air qu'avant */
  --gout:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bleu-pale); color:var(--texte);
  font-family:var(--texte-police); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand-name,.stat .n{font-family:var(--titres);letter-spacing:-.01em}
.hidden{display:none !important}
.muted{color:var(--texte-pale)}
.small{font-size:13px}
a{color:var(--bleu)}

.surtitre{
  text-transform:uppercase;letter-spacing:2px;font-size:.72rem;font-weight:700;
  color:var(--dore-fonce);margin:0 0 7px
}

/* =====================================================================
   ANIMATIONS
   Toutes fondées sur transform / opacity — jamais sur un flou.
   L'opacité de départ n'existe que dans le @keyframes : si une animation
   ne se joue pas, le contenu reste visible.
   ===================================================================== */
@keyframes page-apparait{ from{opacity:0} to{opacity:1} }
@keyframes page-monte{ from{transform:translateY(16px)} to{transform:none} }
@keyframes pop{ from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
@keyframes fondu{ from{opacity:0} to{opacity:1} }
@keyframes glisse-bas{ from{transform:translateY(100%)} to{transform:none} }
@keyframes battement{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

main{ animation:page-apparait 190ms ease-out both, page-monte 420ms var(--gout) both }

/* Apparition en cascade des blocs d'une vue */
.a-reveler{opacity:0;transform:translateY(22px)}
.a-reveler.revele{
  opacity:1;transform:none;
  transition:opacity .55s ease, transform .55s var(--gout)
}

/* ===================== Connexion ===================== */
.auth{
  min-height:100vh;display:grid;place-items:center;padding:28px;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(47,67,109,.55), transparent 62%),
    linear-gradient(170deg, var(--bleu-fonce), var(--bleu-nuit));
}
.auth-card{
  width:100%;max-width:430px;background:var(--blanc);
  border-radius:22px;padding:46px 40px;text-align:center;box-shadow:var(--ombre-forte);
  animation:pop .5s var(--gout) both
}
.auth-logo{width:48px;height:48px;color:var(--bleu);margin-bottom:18px}
.auth-card h1{font-size:27px;margin:0 0 12px;color:var(--bleu-fonce)}
.auth-card > .muted{font-size:14px;margin:0 0 26px}
.auth-card .field{text-align:left}
.auth-msg{margin:16px 0 0;font-size:13px;min-height:18px;font-weight:500}
.auth-msg.ok{color:var(--vert)} .auth-msg.err{color:var(--rouge)}
#authHelp{margin:18px 0 0}

/* =====================================================================
   ÉCRAN DE DÉMARRAGE
   Il n'apparaît qu'après une demi-seconde : sur une connexion normale,
   personne ne le voit jamais. Sur un réseau lent, il évite la page
   blanche qui fait croire à une panne.
   ===================================================================== */
.demarrage{
  position:fixed;inset:0;z-index:80;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--bleu-pale);color:var(--texte-pale);
  opacity:0;animation:fondu .4s ease .5s forwards
}
.demarrage p{margin:0;font-size:14px}
.dem-logo{width:44px;height:44px;color:var(--bleu);animation:battement 1.7s ease-in-out infinite}
.demarrage.fini{display:none}

/* =====================================================================
   BANDEAU HORS LIGNE
   Doré, pas rouge : ce n'est pas une panne, c'est un mode dégradé
   annoncé. Il reste collé en haut, au-dessus de tout, parce que
   « ces chiffres datent de deux heures » doit rester visible.
   ===================================================================== */
.horsligne{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:11px;
  padding:11px 26px;
  background:linear-gradient(180deg,#FFF3D6,#FFEBC3);
  color:var(--dore-fonce);
  border-bottom:1px solid #E8D5A8;
  font-size:13.5px;line-height:1.45;
  animation:fondu .3s ease both
}
.horsligne svg{width:19px;height:19px;flex:0 0 19px}
.horsligne strong{color:#6B5220}
@media(max-width:900px){ .horsligne{padding:10px 18px;font-size:12.5px} }

/* ===================== Barre du haut ===================== */
/* Logo à gauche, menu centré, actions à droite. Les deux colonnes
   latérales ont la même largeur (1fr) pour que le menu soit vraiment
   au milieu de la barre, et non au milieu de ce qui reste. */
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:12px 32px;background:var(--bleu-fonce);color:var(--blanc);
  position:sticky;top:0;z-index:30
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand-mark{width:27px;height:27px;color:var(--blanc);flex-shrink:0;transition:transform .4s var(--gout)}
.brand:hover .brand-mark{transform:rotate(-90deg)}
.brand-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-name{font-weight:700;font-size:16px}
.brand-sub{font-size:11.5px;color:var(--bleu-clair);letter-spacing:.02em}
.topbar-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.badge{
  font-size:11px;padding:4px 11px;border-radius:99px;
  background:rgba(255,255,255,.10);color:var(--bleu-clair);
  border:1px solid rgba(255,255,255,.16);white-space:nowrap
}
.badge.demo{color:var(--dore);border-color:rgba(215,183,119,.4);background:rgba(215,183,119,.12)}

/* ===================== Menu central (dans la bande bleue) ===================== */
.tabs{
  position:relative;display:flex;gap:2px;padding:4px;
  background:rgba(255,255,255,.07);border-radius:99px
}
.tab{
  position:relative;z-index:1;background:none;border:none;color:var(--bleu-clair);
  padding:8px 16px;font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;
  white-space:nowrap;border-radius:99px;transition:color .25s ease
}
.tab:hover{color:var(--blanc)}
.tab.active{color:var(--blanc);font-weight:600}
/* Pastille qui glisse d'un onglet à l'autre */
.tab-ind{
  position:absolute;top:4px;height:calc(100% - 8px);border-radius:99px;background:var(--bleu);
  transition:transform .42s var(--gout), width .42s var(--gout), opacity .25s ease;
  pointer-events:none;z-index:0;left:0;
  box-shadow:0 2px 10px rgba(0,0,0,.22)
}

main{padding:40px 32px 100px;max-width:1220px;margin:0 auto}

@media(max-width:1200px){
  .topbar{padding:12px 20px;gap:14px}
  .tab{padding:8px 12px;font-size:13px}
  .brand-sub{display:none}
}

/* ===================== Champs ===================== */
input,select,textarea{
  width:100%;background:var(--blanc);border:1.5px solid var(--gris-ligne);color:var(--texte);
  padding:12px 14px;border-radius:var(--rayon-sm);font-family:inherit;font-size:14.5px;
  transition:border-color .2s ease, box-shadow .2s ease
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(47,67,109,.12)
}

/* =====================================================================
   FOCUS CLAVIER
   Les champs de saisie avaient bien leur repère, mais rien ne couvrait
   les boutons, les onglets ni les liens : en naviguant à la touche Tab,
   on ne savait jamais où on se trouvait. :focus-visible n'apparaît qu'au
   clavier — la souris ne déclenche donc aucun contour.
   ===================================================================== */
:focus-visible{
  outline:2.5px solid var(--bleu);
  outline-offset:2px;
  border-radius:4px
}
/* La fenêtre reçoit le focus pour les lecteurs d'écran, mais elle n'a pas
   à s'entourer d'un cadre : ce n'est pas une cible cliquable. */
.modal-card:focus-visible{outline:none}
.bnav:focus-visible,.tab:focus-visible{outline-offset:-2px}
tr.clic:focus-visible{outline-offset:-2px;background:var(--bleu-pale)}
.mcard:focus-visible{outline-offset:1px}
/* Le fond ne défile plus sous la fenêtre ouverte. */
body.modale-ouverte{overflow:hidden}
input::placeholder{color:#a9b4c8}
textarea{min-height:82px;resize:vertical}
label{display:block;font-size:12px;font-weight:600;color:var(--texte-pale);margin:0 0 6px}
.field{margin-bottom:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}

/* ===================== Boutons ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blanc);border:1.5px solid var(--gris-ligne);color:var(--bleu-fonce);
  padding:11px 20px;border-radius:var(--rayon);font-family:inherit;font-size:14px;
  font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease
}
.btn:hover{border-color:var(--bleu-clair);background:var(--bleu-pale);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);transition-duration:.05s}
.btn.primary{background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.btn.primary:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce);
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(47,67,109,.30)}
.btn.accent{background:var(--dore);border-color:var(--dore);color:var(--bleu-fonce)}
.btn.accent:hover{background:#E4C98F;border-color:#E4C98F;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(215,183,119,.35)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--texte-pale)}
.btn.ghost:hover{background:var(--bleu-pale);color:var(--bleu-fonce)}
.btn.ghost.light{color:var(--bleu-clair)}
.btn.ghost.light:hover{background:rgba(255,255,255,.12);color:var(--blanc)}
.btn.danger{color:var(--rouge);border-color:#f0d3d4;background:var(--blanc)}
.btn.danger:hover{background:var(--rouge-fond);border-color:#e5b9bb}
.btn.icon{padding:10px 12px}
.btn.block{width:100%}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ===================== Titres de section ===================== */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.head h2{font-size:26px;margin:0;color:var(--bleu-fonce);line-height:1.2}
.head p{margin:4px 0 0;font-size:13.5px;color:var(--texte-pale)}

/* ===================== Cartes stats ===================== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:18px;margin-bottom:36px}
.stat{
  background:var(--blanc);border:1px solid var(--gris-ligne);border-radius:var(--rayon);
  padding:22px;box-shadow:var(--ombre);position:relative;overflow:hidden;
  transition:transform .25s var(--gout), box-shadow .25s ease
}
.stat:hover{transform:translateY(-3px);box-shadow:var(--ombre-mid)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bleu-clair)}
.stat .n{font-size:32px;font-weight:700;color:var(--bleu-fonce);line-height:1.1;
  font-variant-numeric:tabular-nums}
.stat .l{font-size:12.5px;color:var(--texte-pale);margin-top:4px}
.stat.warn::before{background:var(--dore)} .stat.warn .n{color:var(--dore-fonce)}
.stat.bad::before{background:var(--rouge)}  .stat.bad .n{color:var(--rouge)}
.stat.ok::before{background:var(--vert)}

.card{
  background:var(--blanc);border:1px solid var(--gris-ligne);border-radius:var(--rayon);
  padding:26px;margin-bottom:24px;box-shadow:var(--ombre)
}
.card h3{margin:0 0 16px;font-size:17px;color:var(--bleu-fonce)}
.card.alerte{border-color:#eec9ca;background:linear-gradient(180deg,var(--rouge-fond),var(--blanc) 55%)}

/* ===================== Tableaux ===================== */
.tablewrap{
  background:var(--blanc);border:1px solid var(--gris-ligne);border-radius:var(--rayon);
  overflow-x:auto;box-shadow:var(--ombre)
}
.card .tablewrap{box-shadow:none;border-radius:var(--rayon-sm)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:660px}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bleu-moyen);font-weight:700;padding:14px 18px;
  border-bottom:1px solid var(--gris-ligne);white-space:nowrap;background:#F7F9FC
}
th.sortable{cursor:pointer;user-select:none;transition:color .2s ease}
th.sortable:hover{color:var(--bleu-fonce)}
th .arrow{opacity:.5;font-size:9px;margin-left:4px}
td{padding:14px 18px;border-bottom:1px solid var(--gris-ligne);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .18s ease}
tbody tr.clic{cursor:pointer}
tbody tr.clic:hover{background:var(--bleu-pale)}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600;
  color:var(--bleu);background:var(--bleu-pale);padding:3px 8px;border-radius:6px
}
.nom{font-weight:600;color:var(--bleu-fonce)}

.pill{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:99px;white-space:nowrap;display:inline-block}
.pill.ok{background:var(--vert-fond);color:var(--vert)}
.pill.out{background:var(--dore-pale);color:var(--dore-fonce)}
.pill.late{background:var(--rouge-fond);color:var(--rouge)}
.pill.off{background:var(--bleu-pale);color:var(--bleu-moyen)}

.empty{padding:64px 24px;text-align:center;color:var(--texte-pale);font-size:14px}
.empty .big{font-size:34px;display:block;margin-bottom:12px;opacity:.45}

/* =====================================================================
   MENUS DE SÉLECTION
   Un vrai menu déroulant, à la place du <select> du système.
   ===================================================================== */
.filters{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;align-items:center}
.filters .search{flex:1;min-width:220px;position:relative}
.filters .search input{padding-left:42px;height:46px}
.filters .search svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--bleu-moyen);pointer-events:none
}

.menu{position:relative}
.menu-btn{
  display:inline-flex;align-items:center;gap:10px;height:46px;
  background:var(--blanc);border:1.5px solid var(--gris-ligne);color:var(--bleu-fonce);
  padding:0 16px;border-radius:var(--rayon-sm);font-family:inherit;font-size:14px;
  font-weight:500;cursor:pointer;white-space:nowrap;
  transition:border-color .2s ease, box-shadow .2s ease
}
.menu-btn:hover{border-color:var(--bleu-clair)}
.menu.open .menu-btn{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(47,67,109,.12)}
.menu-btn .chev{width:14px;height:14px;color:var(--bleu-moyen);transition:transform .3s var(--gout)}
.menu.open .menu-btn .chev{transform:rotate(180deg)}
.menu-btn .pastille{
  background:var(--bleu);color:var(--blanc);font-size:11px;font-weight:700;
  border-radius:99px;padding:1px 7px;margin-left:-2px
}
.menu-pop{
  position:absolute;top:calc(100% + 8px);left:0;min-width:100%;width:max-content;max-width:280px;
  background:var(--blanc);border:1px solid var(--gris-ligne);border-radius:var(--rayon);
  box-shadow:var(--ombre-mid);padding:6px;z-index:45;max-height:min(340px,60vh);overflow-y:auto;
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;visibility:hidden;
  transform-origin:top left;
  transition:opacity .2s ease, transform .22s var(--gout), visibility 0s linear .22s
}
.menu.open .menu-pop{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .2s ease, transform .22s var(--gout), visibility 0s
}
.menu-opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:none;font-family:inherit;font-size:14px;color:var(--texte);
  padding:9px 12px;border-radius:8px;cursor:pointer;text-align:left;
  transition:background .15s ease, color .15s ease
}
.menu-opt:hover{background:var(--bleu-pale);color:var(--bleu-fonce)}
.menu-opt.on{background:var(--bleu-pale);color:var(--bleu-fonce);font-weight:600}
.menu-opt .check{opacity:0;color:var(--bleu);font-size:12px}
.menu-opt.on .check{opacity:1}

.menu-sep{height:1px;background:var(--gris-ligne);margin:5px 8px}
.menu-opt.danger{color:var(--rouge)}
.menu-opt.danger:hover{background:var(--rouge-fond);color:var(--rouge)}
.menu-pop.droite{left:auto;right:0;transform-origin:top right}

/* Le bouton « … » d'une ligne */
.menu.actions{display:inline-block;vertical-align:middle;margin-left:6px}
.menu-btn.ico{
  height:34px;width:34px;padding:0;justify-content:center;font-size:17px;
  line-height:1;color:var(--bleu-moyen);border-radius:9px;letter-spacing:1px
}
.menu-btn.ico:hover{color:var(--bleu-fonce);background:var(--bleu-pale)}

/* Poubelles : discrètes au repos, franches au survol */
.btn.poub{color:var(--bleu-clair);padding:7px 8px;margin-left:2px}
.btn.poub:hover{color:var(--rouge);background:var(--rouge-fond)}
.btn.danger svg{vertical-align:-2px}

/* ===================== Avatars et profils ===================== */
.avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;object-fit:cover;
  display:inline-grid;place-items:center;background:var(--bleu);color:var(--blanc);
  font-family:var(--titres);font-weight:700;font-size:11px;letter-spacing:.02em;
  border:2px solid var(--blanc);box-shadow:0 0 0 1px var(--gris-ligne)
}
.avatar.grand{width:76px;height:76px;font-size:26px;border-width:3px}
.pers{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}

/* Le menu du compte, dans la bande bleue */
.menu.compte .compte-btn{
  background:rgba(255,255,255,.07);border-color:transparent;color:var(--blanc);
  height:40px;padding:0 12px 0 6px;gap:9px;border-radius:99px
}
.menu.compte .compte-btn:hover{background:rgba(255,255,255,.14);border-color:transparent}
.menu.compte.open .compte-btn{background:rgba(255,255,255,.16);box-shadow:none;border-color:transparent}
.menu.compte .avatar{border-color:rgba(255,255,255,.25);box-shadow:none}
.compte-nom{font-size:13.5px;font-weight:600;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.compte-pop{left:auto;right:0;transform-origin:top right;min-width:230px}

.profil-tete{display:flex;align-items:center;gap:20px;margin-bottom:24px}

.equipe{display:flex;flex-direction:column}
.membre{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--gris-ligne)}
.membre:first-child{border-top:none;padding-top:0}
.membre .nom{font-weight:600;color:var(--bleu-fonce)}

/* Les <select> restants (formulaires) reçoivent au moins un chevron propre */
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566890' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px
}

/* ===================== Aide : étapes et règles ===================== */
.etapes{display:flex;flex-direction:column;gap:4px}
.etape{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--gris-ligne)}
.etape:first-child{border-top:none;padding-top:0}
.et-num{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:var(--bleu-pale);color:var(--bleu);display:grid;place-items:center;
  font-family:var(--titres);font-weight:700;font-size:16px
}
.et-txt{flex:1;min-width:0}
.et-txt h4{margin:6px 0 6px;font-size:15.5px;color:var(--bleu-fonce);font-family:var(--titres)}
.et-txt p{margin:0 0 12px;font-size:14.5px;color:var(--texte)}
.et-txt p:last-child{margin-bottom:0}

.regles{display:flex;flex-direction:column;gap:0}
.regle{padding:16px 0;border-top:1px solid var(--gris-ligne);display:block}
.regle:first-child{border-top:none;padding-top:0}
.rg-t{display:block;font-weight:600;color:var(--bleu-fonce);margin-bottom:5px;font-size:15px}
.rg-d{display:block;font-size:14.5px;color:var(--texte-pale)}

/* Bandeau de première visite */
.bienvenue{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--bleu-fonce),var(--bleu));color:var(--blanc);
  border:none;box-shadow:0 12px 32px rgba(21,39,77,.18)
}
.bienvenue h3{color:var(--blanc);margin:0 0 4px}
.bienvenue p{margin:0;color:var(--bleu-clair);font-size:14px}
.bienvenue .bv-txt{flex:1;min-width:220px}

/* Feuille « Plus » du mobile */
.plus-liste{display:flex;flex-direction:column;gap:2px}
.plus-item{
  display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:none;border:none;border-radius:var(--rayon-sm);padding:15px 14px;
  font-family:inherit;cursor:pointer;transition:background .15s ease
}
.plus-item:hover,.plus-item:active{background:var(--bleu-pale)}
.pi-t{font-weight:600;color:var(--bleu-fonce);font-size:15.5px}
.pi-d{font-size:13px;color:var(--texte-pale)}

/* ===================== Vignettes des items ===================== */
.vign{
  width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;
  background:var(--bleu-pale);border:1px solid var(--gris-ligne);display:block
}
.vign.vide{
  display:grid;place-items:center;font-family:var(--titres);font-weight:700;
  font-size:15px;color:var(--bleu-clair)
}
.mcard .vign{width:48px;height:48px}

/* Zone photo du formulaire */
.photo-zone{
  border:1.5px dashed var(--gris-ligne);border-radius:var(--rayon-sm);
  padding:14px;background:#FAFCFF
}
.photo-zone img{
  width:100%;max-height:220px;object-fit:cover;border-radius:8px;
  margin-bottom:12px;display:block;animation:fondu .3s ease both
}
.photo-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.photo-actions label.btn{margin:0}
.photo-actions .cam{display:none}
@media(hover:none) and (pointer:coarse){ .photo-actions .cam{display:inline-flex} }

/* =====================================================================
   ALERTES DU TABLEAU DE BORD
   Elles n'apparaissent que quand elles ont quelque chose à dire. Le
   liseré de gauche porte le degré d'urgence — le reste reste calme,
   sinon plus rien ne ressort.
   ===================================================================== */
.alertes{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.alerte-c{
  display:flex;align-items:center;gap:16px;
  background:var(--blanc);border:1px solid var(--gris-ligne);
  border-left:3px solid var(--bleu-clair);
  border-radius:var(--rayon-sm);padding:14px 16px
}
.alerte-c strong{font-size:14.5px;display:block;margin-bottom:2px}
.alerte-c .small{color:var(--texte-pale);line-height:1.5}
.alerte-c.rouge{border-left-color:var(--rouge);background:linear-gradient(90deg,var(--rouge-fond),var(--blanc) 42%)}
.alerte-c.rouge strong{color:var(--rouge)}
.alerte-c.dore{border-left-color:var(--dore);background:linear-gradient(90deg,#FFF8E9,var(--blanc) 42%)}
.alerte-c.dore strong{color:var(--dore-fonce)}
.alerte-c.bleu{border-left-color:var(--bleu)}
.alerte-c .btn{flex:0 0 auto}
@media(max-width:640px){
  .alerte-c{flex-direction:column;align-items:flex-start;gap:11px}
  .alerte-c .btn{align-self:stretch;text-align:center;justify-content:center}
}

/* ===================== Jauge ===================== */
.jauge{
  display:inline-block;width:104px;height:7px;flex:0 0 104px;
  background:var(--bleu-pale);border-radius:99px;overflow:hidden;margin:0 12px
}
.jauge > span{display:block;height:100%;background:var(--bleu);border-radius:99px;
  transition:width .45s var(--gout)}
.jauge.grande{display:block;width:100%;height:10px;flex:none;margin:0}
.jauge.grande > span{background:linear-gradient(90deg,var(--bleu),var(--bleu-moyen))}

/* Ligne d'informations sous un titre : les séparateurs sont posés par le
   CSS, jamais dans le texte — sinon un élément vide laissait un « · »
   orphelin en début de ligne. */
.meta-res{gap:8px;flex-wrap:wrap;align-items:center}
/* Le séparateur termine l'élément précédent au lieu d'ouvrir le suivant :
   quand la ligne passe à la ligne, le « · » reste accroché au texte d'avant
   plutôt que de se retrouver seul en début de ligne. */
.meta-res > *:not(:last-child)::after{content:" ·";color:var(--bleu-clair)}

/* ===================== Listes gérées (fournisseurs, projets) ===================== */
.liste-gerée{display:flex;flex-direction:column}
.lg-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 0;border-top:1px solid var(--gris-ligne)
}
.lg-item:first-child{border-top:none;padding-top:2px}
.lg-nom{
  font-weight:600;color:var(--bleu-fonce);font-size:14.5px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap
}
.lg-item.archive{opacity:.55}
.lg-actions{gap:8px;flex:0 0 auto}
/* Le champ « créer sans quitter le formulaire » */
.zone-ajout:empty{display:none}

/* ===================== Bascule (réglages) ===================== */
.bascule{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-top:1px solid var(--gris-ligne);cursor:pointer;margin:0
}
.bascule input{width:auto;margin:2px 0 0;flex:0 0 auto;accent-color:var(--bleu)}
.bascule span{display:block;font-size:14px;color:var(--texte);font-weight:400}
.bascule strong{display:block;font-weight:600;margin-bottom:1px}
.bascule .small{display:block;color:var(--texte-pale)}

/* ===================== Bloc repliable (fiche matériel) ===================== */
.repli{border-top:1px solid var(--gris-ligne);padding-top:14px;margin-bottom:18px}
.repli > summary{
  cursor:pointer;font-size:12px;font-weight:600;color:var(--texte-pale);
  list-style:none;display:flex;align-items:center;gap:7px;padding:2px 0
}
.repli > summary::-webkit-details-marker{display:none}
.repli > summary::before{content:"▸";transition:transform .2s ease;display:inline-block}
.repli[open] > summary::before{transform:rotate(90deg)}
.repli > summary:hover{color:var(--bleu)}

/* ===================== Scan en rafale (inventaire physique) ===================== */
.scan-bilan{max-height:150px;overflow-y:auto;margin-top:12px}
.sb-ligne{
  font-size:13px;padding:6px 10px;border-radius:7px;margin-bottom:4px;
  animation:fondu .25s ease both
}
.sb-ligne.ok{background:var(--vert-fond);color:var(--vert)}
.sb-ligne.err{background:var(--rouge-fond);color:var(--rouge)}
.chip.vu{background:var(--vert-fond);color:var(--vert);border-color:transparent}

/* ===================== Cartes mobiles (inventaire) =====================
   Le JS ne produit plus qu'UNE des deux versions (tableau ou cartes) selon
   la largeur de la fenêtre : avant, les deux étaient construites à chaque
   rendu et l'une était simplement masquée ici. */
.cards{display:flex;flex-direction:column;gap:12px}
.mcard{
  background:var(--blanc);border:1px solid var(--gris-ligne);border-radius:var(--rayon);
  padding:16px 18px;box-shadow:var(--ombre);display:flex;gap:14px;align-items:center;
  transition:transform .18s var(--gout), box-shadow .18s ease
}
.mcard:active{transform:scale(.985)}
.mcard .mc-main{flex:1;min-width:0}
.mcard .mc-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mcard .mc-nom{font-weight:600;color:var(--bleu-fonce);font-size:15px}
.mcard .mc-meta{font-size:12.5px;color:var(--texte-pale);margin-top:5px}

/* ===================== Lieux et carte ===================== */
#carte{height:380px;border-radius:var(--rayon-sm);overflow:hidden;z-index:0}
.carte-edit{height:250px;border-radius:var(--rayon-sm);overflow:hidden;
  border:1.5px solid var(--gris-ligne);z-index:0}
.leaflet-container{font-family:var(--texte-police)}
.leaflet-popup-content{font-size:13px;line-height:1.5}

/* Le point sur la carte : un disque coloré portant le nombre d'items */
.pin{
  border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;
  font-family:var(--titres);font-size:13px;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 3px 12px rgba(3,15,40,.4)
}

.puce{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}

.lieu-b{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:500;
  color:var(--bleu-fonce);background:var(--bleu-pale);padding:4px 10px;border-radius:99px;
  cursor:pointer;white-space:nowrap;transition:background .15s ease
}
.lieu-b:hover{background:#E1E9F8}
.lieu-b.dehors{background:var(--dore-pale);color:var(--dore-fonce);cursor:default}

.chip{
  display:inline-block;font-family:ui-monospace,monospace;font-size:11.5px;font-weight:600;
  background:var(--bleu-pale);color:var(--bleu);padding:5px 10px;border-radius:7px;cursor:pointer;
  transition:background .15s ease
}
.chip:hover{background:var(--bleu);color:var(--blanc)}
.chip.dehors{background:var(--dore-pale);color:var(--dore-fonce)}

.adr-liste{margin-top:8px;border:1px solid var(--gris-ligne);border-radius:var(--rayon-sm);overflow:hidden}
.adr-item{
  display:block;width:100%;text-align:left;background:none;border:none;padding:10px 12px;
  font-family:inherit;font-size:13px;color:var(--texte);cursor:pointer;
  border-top:1px solid var(--gris-ligne)
}
.adr-item:first-child{border-top:none}
.adr-item:hover{background:var(--bleu-pale);color:var(--bleu-fonce)}

/* ===================== Panier de sélection ===================== */
.coche{
  width:17px;height:17px;accent-color:var(--bleu);cursor:pointer;margin:0;
  flex-shrink:0;border-radius:4px
}
tr.coche-on{background:#E9EFFA}
tr.coche-on:hover{background:#E1E9F8}
.mcard.coche-on{border-color:var(--bleu);box-shadow:0 0 0 1px var(--bleu), var(--ombre)}

.panier{
  position:sticky;bottom:20px;z-index:35;margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--bleu-fonce);color:var(--blanc);
  padding:14px 20px;border-radius:var(--rayon);box-shadow:var(--ombre-forte);
  animation:pop .3s var(--gout) both
}
.panier-info{font-size:14.5px}
.panier .muted{color:var(--bleu-clair)}
.panier .btn.ghost{color:var(--bleu-clair)}
.panier .btn.ghost:hover{background:rgba(255,255,255,.12);color:var(--blanc)}

/* Liste des items dans le formulaire groupé */
.lot-liste{max-height:270px;overflow-y:auto;border:1px solid var(--gris-ligne);
  border-radius:var(--rayon-sm);padding:6px}
.lot-item{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:8px}
.lot-item + .lot-item{border-top:1px solid var(--gris-ligne)}
.lot-qte{width:70px;flex-shrink:0}

.conflit{
  background:#FFF8E9;border:1px solid #e8d5a8;color:var(--texte);
  border-radius:var(--rayon-sm);padding:14px 16px;margin-top:18px;font-size:13.5px
}
.conflit ul{margin:8px 0;padding-left:18px}
.conflit li{margin-bottom:4px}

/* ===================== Calendrier des réservations ===================== */
.cal{overflow-x:auto;padding-bottom:4px}
.cal-ligne{display:flex;align-items:stretch;gap:2px;min-width:640px}
.cal-ligne.tete{margin-bottom:4px}
.cal-nom{
  width:104px;flex-shrink:0;display:flex;align-items:center;
  position:sticky;left:0;background:var(--blanc);z-index:1;padding-right:8px
}
.cal-jour{
  flex:1;min-width:24px;text-align:center;font-size:9px;color:var(--texte-pale);
  display:flex;flex-direction:column;line-height:1.25;padding-bottom:3px
}
.cal-jour b{font-size:11.5px;color:var(--bleu-fonce)}
.cal-jour.auj b{color:var(--blanc);background:var(--bleu);border-radius:5px}
.cal-case{
  flex:1;min-width:24px;height:26px;background:var(--bleu-pale);
  border-radius:4px;margin-bottom:3px
}
.cal-case.prise{background:var(--bleu);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cal-case.auj{box-shadow:inset 0 0 0 1.5px var(--dore)}

.pill.res{background:#E6ECFA;color:var(--bleu);margin-left:5px}

/* ===================== Modale ===================== */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,15,40,.55);animation:fondu .25s ease both}
.modal-card{
  position:relative;background:var(--blanc);border-radius:20px;
  width:100%;max-width:600px;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:var(--ombre-forte);overflow:hidden;
  animation:pop .34s var(--gout) both
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px 26px;border-bottom:1px solid var(--gris-ligne);background:#F7F9FC
}
.modal-head h2{margin:0;font-size:18px;color:var(--bleu-fonce)}
.modal-body{padding:26px;overflow-y:auto}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:26px;flex-wrap:wrap}
.infogrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gris-ligne);
  border:1px solid var(--gris-ligne);border-radius:var(--rayon-sm);overflow:hidden}
.infogrid > div{background:var(--blanc);padding:14px 16px}
.infogrid .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--bleu-moyen);font-weight:700}
.infogrid .v{font-size:14.5px;margin-top:3px}

/* ===================== Bon de sortie ===================== */
.bon{font-size:13px;color:#111}
.bon-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:16px;border-bottom:2px solid var(--bleu-fonce);margin-bottom:18px}
.bon-logo{display:flex;align-items:center;gap:12px}
.bon-logo svg{width:34px;height:34px;color:var(--bleu)}
.bon-agence{font-family:var(--titres);font-weight:700;font-size:17px;color:var(--bleu-fonce)}
.bon-sous{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--dore-fonce);font-weight:700}
.bon-ref{text-align:right;font-size:11px;color:var(--texte-pale)}
.bon-num{font-family:ui-monospace,monospace;font-size:12px;color:var(--bleu-fonce);margin-top:3px}

.bon-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-bottom:20px}
.bon-meta .k,.bon-notes .k,.bon-signatures .k{
  display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--bleu-moyen);font-weight:700}
.bon-meta .v{display:block;font-size:14px;font-weight:600;color:var(--bleu-fonce);margin-top:2px}

.bon-table{width:100%;border-collapse:collapse;font-size:12px;min-width:0;margin-bottom:20px}
.bon-table th{
  background:none;border-bottom:1.5px solid var(--bleu-fonce);padding:7px 8px;
  font-size:9.5px;color:var(--bleu-fonce)}
.bon-table td{padding:9px 8px;border-bottom:1px solid var(--gris-ligne);vertical-align:top}
.bon-table tfoot td{border-bottom:none;border-top:1.5px solid var(--bleu-fonce);padding-top:10px}
.bon-table .c{text-align:center}
.bon-table .r{text-align:right}
.bon-table .mono{font-family:ui-monospace,monospace;font-size:11px}
.bon-table .gris{color:#777;font-weight:400}
.bon-table .case{display:inline-block;width:14px;height:14px;border:1.4px solid #555;border-radius:3px}

.bon-notes{margin-bottom:18px}
.bon-lignes{margin-top:10px}
.bon-lignes span{display:block;border-bottom:1px solid var(--gris-ligne);height:22px}
.bon-clause{font-size:10.5px;color:#666;line-height:1.55;margin:0 0 26px}
.bon-signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bon-signatures .ligne{display:block;border-bottom:1px solid #444;height:34px;margin-bottom:5px}

/* À l'impression, il ne reste que le bon */
body.impr-bon > *:not(#modal){display:none !important}
@media print{
  @page{margin:14mm}
  body.impr-bon #modal{position:static;padding:0;display:block}
  body.impr-bon .modal-backdrop,
  body.impr-bon .modal-head,
  body.impr-bon .modal-actions{display:none !important}
  body.impr-bon .modal-card{
    max-width:none;max-height:none;border-radius:0;box-shadow:none;display:block;animation:none}
  body.impr-bon .modal-body{padding:0;overflow:visible}
  body.impr-bon .bon{font-size:11.5px}
}

/* ===================== Toast ===================== */
.toast{
  position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%) translateY(24px) scale(.96);
  background:var(--bleu-fonce);color:var(--blanc);
  padding:13px 22px;border-radius:99px;font-size:14px;font-weight:500;
  opacity:0;pointer-events:none;z-index:99;box-shadow:var(--ombre-forte);
  transition:opacity .25s ease, transform .35s var(--gout)
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.err{background:var(--rouge)}

/* ===================== Étiquettes QR ===================== */
.labels{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:14px}
.label{
  background:#fff;color:#000;border:1px solid var(--gris-ligne);border-radius:10px;padding:14px;
  display:flex;gap:14px;align-items:center;break-inside:avoid
}
.label canvas{width:64px !important;height:64px !important;flex-shrink:0}
.label .lt{flex:1;min-width:0}
.label .ln{font-weight:700;font-size:13px;line-height:1.25;overflow-wrap:break-word;color:#111}
.label .lc{font-family:ui-monospace,monospace;font-size:11px;color:#555;margin-top:4px}
.label .lg{font-size:9px;color:#999;margin-top:3px;text-transform:uppercase;letter-spacing:.08em}

#scanner{width:100%;border-radius:var(--rayon-sm);overflow:hidden}

/* ===================== Navigation basse (mobile) ===================== */
.bottomnav{display:none}

/* =====================================================================
   TABLEAUX SUR TÉLÉPHONE
   Un tableau à sept colonnes dans 390 pixels, c'est soit du texte
   découpé lettre par lettre, soit des colonnes hors de l'écran — dans
   les deux cas le statut et les boutons deviennent introuvables.
   Chaque ligne devient donc une fiche, avec l'en-tête de colonne repris
   en étiquette (attribut data-l). Une seule règle pour tous les
   tableaux de l'application.
   ===================================================================== */
@media(max-width:760px){
  .tablewrap{overflow:visible;border:none;background:none;border-radius:0}
  .tablewrap table{min-width:0;width:100%;display:block;border-collapse:separate}
  .tablewrap thead{display:none}
  .tablewrap tbody{display:block}

  .tablewrap tbody tr{
    display:block;background:var(--blanc);
    border:1px solid var(--gris-ligne);border-radius:var(--rayon-sm);
    padding:12px 14px;margin-bottom:10px
  }
  .tablewrap tbody tr:last-child{margin-bottom:0}
  /* L'étiquette est posée en absolu, pas en colonne flex : une cellule
     qui contient plusieurs éléments (un nom + sa description) doit les
     empiler normalement, pas les mettre côte à côte. */
  .tablewrap tbody td{
    position:relative;display:block;
    padding:5px 0 5px 94px;min-height:25px;
    border:none;text-align:left;white-space:normal
  }
  .tablewrap tbody td::before{
    content:attr(data-l);
    position:absolute;left:0;top:7px;width:86px;
    font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--texte-pale);line-height:1.3
  }
  /* Une cellule sans étiquette (actions, vignette) prend toute la largeur */
  .tablewrap tbody td:not([data-l]){padding-left:0}
  .tablewrap tbody td:empty{display:none}
  .tablewrap tbody td.vign-c{padding-bottom:8px}
  .tablewrap tbody td.actions-c{
    display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;
    border-top:1px solid var(--gris-ligne);margin-top:8px;padding-top:11px
  }
  .tablewrap tbody td.actions-c .btn{flex:1 1 auto;justify-content:center}
  .tablewrap tbody td.actions-c .btn.icon{flex:0 0 auto}
  .tablewrap tbody td.right{text-align:left}
  /* Les états vides gardent leur cadre */
  .tablewrap > .empty{background:var(--blanc);border:1px solid var(--gris-ligne);border-radius:var(--rayon-sm)}
}

/* =====================================================================
   LE RESTE DE LA MISE EN PAGE SUR TÉLÉPHONE
   ===================================================================== */
@media(max-width:760px){

  /* En-tête de vue : le titre d'abord, les boutons dessous sur toute la
     largeur. Avant, un bouton long poussait le titre sur deux lignes. */
  .head{flex-direction:column;align-items:stretch;gap:13px;margin-bottom:22px}
  .head > .row{width:100%;gap:8px;justify-content:flex-end}
  /* Un seul bouton garde sa taille ; plusieurs se partagent la largeur —
     un bouton unique étiré sur tout l'écran écrasait le titre. */
  /* Un libellé long ne doit pas être coupé : « Sortir maintenant »
     s'affichait « Sortir ». Sur téléphone, le texte d'un bouton passe
     donc à la ligne au lieu d'être rogné. */
  .btn{white-space:normal;text-align:center}
  .head > .row{flex-wrap:wrap}
  .head > .row > .btn{padding-inline:16px}
  .head > .row > .btn:not(:only-child){flex:1 1 138px;min-width:0;padding-inline:10px}
  /* Un bouton posé directement dans l'en-tête (cartes de listes) ne doit
     pas s'étirer sur toute la largeur à cause de align-items:stretch. */
  .head > .btn{align-self:flex-end}
  .head h2{font-size:23px}
  .head .surtitre{font-size:.66rem;letter-spacing:1.4px}

  /* Compteurs : deux par ligne, plus ramassés. */
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px}
  /* Un nombre impair de compteurs laissait un trou : le dernier prend
     alors toute la largeur. */
  .stats > .stat:last-child:nth-child(odd){grid-column:1 / -1}
  .stat{padding:14px 15px}
  .stat .n{font-size:26px}
  .stat .l{font-size:11.5px;line-height:1.35}

  /* Alertes : le bouton ne prend plus toute la largeur — quatre alertes
     remplissaient l'écran avant qu'on voie le moindre contenu. */
  .alertes{gap:8px;margin-bottom:20px}
  .alerte-c{
    flex-direction:row;align-items:center;gap:12px;
    padding:12px 13px;border-radius:var(--rayon-sm)
  }
  .alerte-c strong{font-size:13.5px}
  /* Deux lignes suffisent : quatre alertes bavardes remplissaient l'écran
     avant qu'on voie le moindre chiffre. Le détail est derrière le bouton. */
  .alerte-c .small{
    font-size:12.5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden
  }
  .alerte-c .btn{
    align-self:center;flex:0 0 auto;width:auto;
    padding:8px 12px;font-size:12.5px
  }

  /* Filtres : recherche pleine largeur, menus deux par ligne. */
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
  .filters .search{grid-column:1 / -1;min-width:0}
  .filters .search input{font-size:14px}
  .filters .menu{min-width:0}
  .filters .menu-btn{width:100%;justify-content:space-between}
  .filters .menu-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Fiche d'inventaire : le nom sur sa ligne, les boutons sous le reste. */
  .mcard{
    display:grid;align-items:center;gap:8px 12px;padding:14px;
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:"coche vign main" "actions actions actions"
  }
  .mcard > .coche{grid-area:coche}
  .mcard > .vign{grid-area:vign}
  .mcard > .mc-main{grid-area:main}
  .mcard > .row{grid-area:actions;justify-content:flex-end;gap:8px;
    border-top:1px solid var(--gris-ligne);padding-top:11px;margin-top:2px}
  .mcard > .row > .btn{flex:1 1 auto;justify-content:center}
  .mcard .mc-top{gap:7px}
  .mcard .mc-meta{margin-top:3px}

  /* Au doigt, un bouton de 31 pixels de haut se rate une fois sur trois.
     Les petits boutons gardent leur discrétion visuelle mais gagnent une
     vraie zone tactile. */
  .btn.sm{min-height:40px;padding-block:9px}
  .btn.icon{min-width:40px;min-height:40px}
  .coche{width:22px;height:22px}

  /* Boutons d'une fenêtre : empilés, l'action principale en premier. */
  .modal-actions{flex-direction:column-reverse;gap:9px;margin-top:22px}
  .modal-actions .btn{width:100%}
  .modal-actions .btn.danger{order:2;margin-top:4px}

  /* Calendrier des réservations : il défile, on le dit. */
  .cal{-webkit-overflow-scrolling:touch}
  .cal-ligne{min-width:560px}
  .cal-nom{flex:0 0 96px;width:96px}

  /* Chaque information prend sa ligne : le séparateur « · » n'a plus de
     raison d'être, et il pendait en fin de ligne. */
  .meta-res{gap:3px 8px}
  .meta-res > span{width:100%}
  .meta-res > *:not(:last-child)::after{content:none}

  /* Listes gérées (fournisseurs, projets) */
  .lg-item{flex-direction:column;align-items:stretch;gap:10px}
  .lg-actions{justify-content:flex-end}
  .lg-actions .btn{flex:1 1 auto;justify-content:center}

  /* Deux colonnes serrées dans une fenêtre étroite, ça ne marche pas. */
  .grid2{grid-template-columns:1fr;gap:0}
  .grid2 > .field{margin-bottom:16px}

  /* La modale plein écran ne doit pas coller aux bords. */
  .modal-body{padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
  /* Une information seule sur la dernière ligne prend toute la largeur —
     sinon la moitié vide ressemble à une case manquante. */
  .infogrid > div:last-child:nth-child(odd){grid-column:1 / -1}

  /* Le bon de sortie reste lisible : il défile plutôt que de se tasser. */
  .bon{overflow-x:auto}
  .bon-table{min-width:520px}
  .bon-meta{grid-template-columns:1fr 1fr}
  .bon-signatures{grid-template-columns:1fr;gap:22px}
}

/* Très petits écrans (iPhone SE et compagnie) */
@media(max-width:380px){
  .stats{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
  .infogrid{grid-template-columns:1fr}
  .head > .row{flex-wrap:wrap}
  .head > .row > .btn{flex:1 1 100%}
}

@media(max-width:900px){
  .tabs{display:none}
  main{padding:24px 18px calc(104px + env(safe-area-inset-bottom))}
  .topbar{padding:12px 18px}
  .brand-sub{display:none}
  /* Sans les onglets, la colonne du milieu disparaît : la barre passe à
     deux colonnes, sinon le nom de l'agence débordait sur le badge. */
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .brand-name{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px
  }
  .badge{display:none}
  .badge.demo{display:inline-block}   /* celui-là doit rester visible : il prévient */
  .compte-nom{display:none}
  .menu.compte .compte-btn{padding:0 8px 0 4px}
  .head h2{font-size:22px}
  .card{padding:20px}
  .stats{gap:12px;margin-bottom:28px}
  .stat{padding:18px}


  .bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(255,255,255,.97);border-top:1px solid var(--gris-ligne);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 24px rgba(21,39,77,.08)
  }
  .bnav{
    flex:1;background:none;border:none;font-family:inherit;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:7px 2px;color:var(--texte-pale);font-size:10.5px;font-weight:600;
    transition:color .22s ease
  }
  .bnav svg{width:21px;height:21px;transition:transform .3s var(--gout)}
  .bnav.active{color:var(--bleu)}
  .bnav.active svg{transform:translateY(-2px) scale(1.08)}
  .bnav.scan{
    background:var(--bleu);color:var(--blanc);border-radius:50%;
    width:54px;height:54px;flex:0 0 54px;margin:-18px 10px 0;
    align-self:center;box-shadow:0 8px 22px rgba(47,67,109,.42);padding:0;
    transition:transform .2s var(--gout), box-shadow .2s ease
  }
  .bnav.scan:active{transform:scale(.92)}
  .bnav.scan svg{width:24px;height:24px}

  /* Sur iPhone, « vh » mesure l'écran BARRE D'ADRESSE MASQUÉE : une
     fenêtre calée en bas et haute de 92vh dépassait donc par le haut,
     et son titre passait sous la barre d'état. « dvh » mesure ce qui est
     réellement visible à l'instant présent. On garde vh en repli pour
     les navigateurs qui ne connaissent pas dvh. */
  .modal{padding:0;place-items:end center;bottom:auto;height:100vh;height:100dvh}
  .modal-card{max-width:none;border-radius:22px 22px 0 0;
    max-height:92vh;max-height:92dvh;
    animation:glisse-bas .34s var(--gout) both}
  /* Le titre reste visible pendant qu'on fait défiler un long formulaire. */
  .modal-head{
    position:sticky;top:0;z-index:2;
    padding:16px 20px;
    padding-top:max(16px, env(safe-area-inset-top))
  }
  .modal-head h2{font-size:17px;line-height:1.25}
  .modal-body{padding:22px}
  .menu-pop{max-width:calc(100vw - 36px)}
}

/* ===================== Mouvement réduit ===================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .a-reveler{opacity:1;transform:none}
}

@media print{
  .topbar,.tabs,.bottomnav,.filters,.no-print,.btn{display:none !important}
  body{background:#fff}
  main{padding:0;max-width:none;animation:none}
  .a-reveler{opacity:1;transform:none}
  .labels{grid-template-columns:repeat(4,1fr);gap:4mm}
  .label{border:1px dashed #bbb}
}