/* Kitotel Studio — feuille de style. Structure reprise de Barian Studio (menu latéral, barre du bas sur téléphone,
   cartes, feuilles modales), matière de kitotel.fr : noir, or #C8A276, Poppins. Mode sombre par data-theme ou réglage système. */
:root{
  --or:#C8A276; --or-presse:#B08C5E; --or-teinte:#F6EFE4; --or-texte:#8A6A3E;
  --encre:#141311; --gris:#6B655E; --faible:#A8A199;
  --papier:#FFFFFF; --toile:#F6F4F0; --toile-survol:#EFEBE5;
  --trait:#E3DCD2; --trait-doux:#EEE9E2;
  --vert:#1F7A4D; --vert-teinte:#E4F3EA; --ambre:#B9640A; --ambre-teinte:#FBF0E0;
  --rouge:#C0392B; --rouge-teinte:#FBE7E4; --bleu:#2F6FA4; --bleu-teinte:#E6F0F8;
  --ombre:0 1px 2px rgba(20,19,17,.04), 0 8px 24px -14px rgba(20,19,17,.14);
  --ombre-vive:0 12px 40px rgba(20,19,17,.22);
  --rayon:16px; --nb-h:60px;
  --police:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --bouton-fond:#141311; --bouton-texte:#FFFFFF;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --or:#D6B588; --or-presse:#E3C79F; --or-teinte:#2A2318; --or-texte:#D6B588;
  --encre:#F3EFE8; --gris:#A49C92; --faible:#6E675F;
  --papier:#1B1917; --toile:#0F0E0D; --toile-survol:#26231F;
  --trait:#2E2A25; --trait-doux:#242019;
  --vert:#4CC38A; --vert-teinte:#12281C; --ambre:#F0A24A; --ambre-teinte:#2E2010;
  --rouge:#F0665A; --rouge-teinte:#3A1512; --bleu:#6FA8DC; --bleu-teinte:#15283A;
  --ombre:0 0 0 .5px rgba(255,255,255,.05); --ombre-vive:0 12px 40px rgba(0,0,0,.6);
  --bouton-fond:#D6B588; --bouton-texte:#141311;
}}
:root[data-theme="dark"]{
  --or:#D6B588; --or-presse:#E3C79F; --or-teinte:#2A2318; --or-texte:#D6B588;
  --encre:#F3EFE8; --gris:#A49C92; --faible:#6E675F;
  --papier:#1B1917; --toile:#0F0E0D; --toile-survol:#26231F;
  --trait:#2E2A25; --trait-doux:#242019;
  --vert:#4CC38A; --vert-teinte:#12281C; --ambre:#F0A24A; --ambre-teinte:#2E2010;
  --rouge:#F0665A; --rouge-teinte:#3A1512; --bleu:#6FA8DC; --bleu-teinte:#15283A;
  --ombre:0 0 0 .5px rgba(255,255,255,.05); --ombre-vive:0 12px 40px rgba(0,0,0,.6);
  --bouton-fond:#D6B588; --bouton-texte:#141311;
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden; overscroll-behavior:none}
body{margin:0; background:var(--toile); color:var(--encre); font-family:var(--police); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; display:flex; min-height:100vh}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--or-texte)}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
::selection{background:color-mix(in srgb, var(--or) 35%, transparent)}
:focus-visible{outline:3px solid color-mix(in srgb, var(--or) 55%, transparent); outline-offset:2px}
:focus:not(:focus-visible){outline:none}
[hidden]{display:none !important}
svg.ico{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* --- Menu latéral (ordinateur) ----------------------------------------------------------------------------- */
.barre-laterale{width:250px; flex:none; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  background:var(--papier); border-right:1px solid var(--trait-doux); padding:16px 12px 14px}
.marque{display:flex; align-items:center; gap:10px; padding:6px 10px 16px; font-weight:700; font-size:15px; color:var(--encre); text-decoration:none}
.marque-ico{width:32px; height:32px; border-radius:10px; background:#141311; color:#C8A276; display:grid; place-items:center;
  font-weight:800; font-size:16px; letter-spacing:-.02em; flex:none}
.marque small{display:block; font-size:10.5px; font-weight:600; color:var(--or-texte); letter-spacing:.08em; text-transform:uppercase; line-height:1}
.onglets{display:flex; flex-direction:column; gap:2px; overflow:auto; flex:1; scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.bl-titre{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--faible); font-weight:600; padding:16px 10px 6px}
.onglet{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; color:var(--gris); font-weight:500;
  text-decoration:none; font-size:14px; border:0; background:none; width:100%; text-align:left}
.onglet svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.onglet:hover{background:var(--toile)}
.onglet.actif{background:var(--or-teinte); color:var(--or-texte); font-weight:600}
.onglet.desactive{opacity:.5; cursor:default}
.onglet.desactive:hover{background:none}
.onglet em{margin-left:auto; font-style:normal; font-size:10px; font-weight:600; color:var(--faible); border:1px solid var(--trait); border-radius:999px; padding:1px 7px}
.bl-pied{border-top:1px solid var(--trait-doux); padding-top:12px; display:flex; align-items:center; gap:10px}
.bl-compte{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2}
.bl-compte b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bl-compte small{font-size:11px; color:var(--gris)}
.bouton-rond{width:38px; height:38px; border-radius:50%; border:1px solid var(--trait); background:var(--papier); color:var(--encre); display:grid; place-items:center; padding:0; flex:none}
.bouton-rond:hover{border-color:var(--encre)}
.bouton-rond svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* --- Contenu ---------------------------------------------------------------------------------------------- */
#module-root{flex:1; min-width:0; display:flex; flex-direction:column}
main.page{width:100%; max-width:1480px; margin:0 auto; padding:26px clamp(16px, 3vw, 40px) 60px; flex:1}
header.entete{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.entete h1{font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.entete .sous{font-size:13.5px; color:var(--gris); margin-top:3px}
.entete-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.carte{background:var(--papier); border:1px solid var(--trait-doux); border-radius:var(--rayon); padding:20px 22px; box-shadow:var(--ombre); min-width:0}
.carte + .carte{margin-top:18px}
.grille > .carte{margin-top:0; align-self:start}
.carte-tete{display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.carte-tete h2{font-size:16px; font-weight:700}
.carte-tete p{margin:2px 0 0; font-size:12.5px; color:var(--gris)}
.carte-tete .espace{flex:1}
.carte-tete > .tuile + div{flex:1 1 240px; min-width:0}
.tuile{width:42px; height:42px; border-radius:12px; background:var(--or-teinte); color:var(--or-texte); display:grid; place-items:center; flex:none}
.tuile svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tuile.vert{background:var(--vert-teinte); color:var(--vert)}
.tuile.ambre{background:var(--ambre-teinte); color:var(--ambre)}
.tuile.rouge{background:var(--rouge-teinte); color:var(--rouge)}
.tuile.bleu{background:var(--bleu-teinte); color:var(--bleu)}
.tuile.noir{background:var(--encre); color:var(--or)}

.grille{display:grid; gap:16px}
.grille.kpis{grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr))}
/* Sur ordinateur, le nombre de colonnes suit le nombre de tuiles : jamais de tuile orpheline. */
@media (min-width:881px){
  .grille.kpis:has(> :nth-child(6):last-child){grid-template-columns:repeat(3, minmax(0, 1fr))}
  .grille.kpis:has(> :nth-child(7):last-child),.grille.kpis:has(> :nth-child(8):last-child){grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (min-width:881px) and (max-width:1279px){
  .grille.kpis:has(> :nth-child(5):last-child){grid-template-columns:repeat(6, minmax(0, 1fr))}
  .grille.kpis:has(> :nth-child(5):last-child) > *{grid-column:span 2}
  .grille.kpis:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}
}
@media (min-width:1280px){
  .grille.kpis:has(> :nth-child(5):last-child){grid-template-columns:repeat(5, minmax(0, 1fr))}
}
.grille.deux{grid-template-columns:repeat(auto-fit, minmax(min(380px, 100%), 1fr))}
.colonnes{display:grid; grid-template-columns:minmax(0, 36fr) minmax(0, 64fr); gap:18px; align-items:start}
.colonnes.devis{grid-template-columns:minmax(0, 60fr) minmax(0, 40fr)}
.colonnes.devis > #synthese{position:sticky; top:20px}
.kpi{background:var(--papier); border:1px solid var(--trait-doux); border-radius:var(--rayon); padding:16px 18px; box-shadow:var(--ombre); display:flex; flex-direction:column; gap:4px}
.kpi span{font-size:12px; color:var(--gris); font-weight:500}
.kpi b{font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.kpi small{font-size:12px; color:var(--gris)}
.kpi .delta{font-size:12px; font-weight:600}
.kpi .delta.pos{color:var(--vert)}
.kpi .delta.neg{color:var(--rouge)}
.kpi.alerte{border-color:color-mix(in srgb, var(--ambre) 40%, transparent)}

/* --- Tableaux -------------------------------------------------------------------------------------------------- */
.defile-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tableau{width:100%; border-collapse:collapse; font-size:13.5px}
.tableau th{text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--gris); font-weight:600; padding:6px 10px 10px; border-bottom:1px solid var(--trait); white-space:nowrap}
.tableau td{padding:10px; border-bottom:1px solid var(--trait-doux); vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau .num,.tableau th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tableau tr.cliquable{cursor:pointer}
.tableau tr.cliquable:hover td{background:var(--toile)}
.tableau tr.actif td{background:var(--or-teinte)}
.tableau td b{font-weight:600}
.tableau .sous{display:block; font-size:12px; color:var(--gris)}
.tableau input,.tableau select{padding:7px 9px; border-radius:8px}
.tableau input.court{width:90px; text-align:right}
.tableau tfoot td{font-weight:600; border-top:1px solid var(--trait); border-bottom:0; background:var(--toile)}

/* --- Pilules, badges ----------------------------------------------------------------------------------------- */
.pilule{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--toile); color:var(--gris); white-space:nowrap; line-height:1.5}
.pilule.vert{background:var(--vert-teinte); color:var(--vert)}
.pilule.ambre{background:var(--ambre-teinte); color:var(--ambre)}
.pilule.rouge{background:var(--rouge-teinte); color:var(--rouge)}
.pilule.or{background:var(--or-teinte); color:var(--or-texte)}
.pilule.bleu{background:var(--bleu-teinte); color:var(--bleu)}
.pilule.noir{background:var(--encre); color:var(--papier)}
.point{width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block}

/* --- Boutons ---------------------------------------------------------------------------------------------- */
.principal,.second,.danger,.or-bouton{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:999px;
  font-weight:600; font-size:13.5px; text-decoration:none; border:1px solid transparent; white-space:nowrap; transition:opacity .15s, background .15s}
.principal{background:var(--bouton-fond); color:var(--bouton-texte); border-color:var(--bouton-fond)}
.principal:hover:not(:disabled){opacity:.88}
.second{background:var(--papier); color:var(--encre); border-color:var(--trait)}
.second:hover:not(:disabled){border-color:var(--encre)}
.or-bouton{background:var(--or); color:#141311; border-color:var(--or)}
.or-bouton:hover:not(:disabled){background:var(--or-presse)}
.danger{background:var(--papier); color:var(--rouge); border-color:color-mix(in srgb, var(--rouge) 50%, transparent)}
.danger:hover:not(:disabled){background:var(--rouge-teinte)}
.principal:disabled,.second:disabled,.danger:disabled,.or-bouton:disabled{opacity:.45; cursor:default}
.petit{padding:7px 13px; font-size:12.5px}
.principal svg,.second svg,.danger svg,.or-bouton svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.lien{background:none; border:0; padding:0; color:var(--or-texte); font-weight:600; cursor:pointer; text-decoration:none; font-size:inherit}
.lien:hover{text-decoration:underline}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* --- Formulaires ----------------------------------------------------------------------------------------- */
.champ{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0}
.champ label{font-size:12px; font-weight:600; color:var(--encre)}
.champ label small{font-weight:400; color:var(--gris)}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%; padding:10px 12px; border:1px solid var(--trait); border-radius:10px;
  background:var(--papier); color:var(--encre); font-size:14px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb, var(--or) 40%, transparent); outline-offset:0; border-color:var(--or)}
textarea{min-height:84px; resize:vertical}
input[type=checkbox],input[type=radio]{accent-color:var(--or-texte); width:16px; height:16px}
.case{display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer}
.rangee{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px}
.rangee .champ{margin-bottom:0}
.aide{font-size:12px; color:var(--gris)}
.alerte-bloc{padding:12px 14px; border-radius:12px; font-size:13px; background:var(--ambre-teinte); color:var(--ambre); font-weight:500}
.alerte-bloc.rouge{background:var(--rouge-teinte); color:var(--rouge)}
.alerte-bloc.vert{background:var(--vert-teinte); color:var(--vert)}
.alerte-bloc.info{background:var(--bleu-teinte); color:var(--bleu)}

.recherche{display:flex; align-items:center; gap:8px; border:1px solid var(--trait); border-radius:12px; padding:0 12px; background:var(--papier); color:var(--gris); min-width:0}
.recherche input{border:0; background:none; padding:10px 0; outline:none !important; font-size:14px; flex:1; min-width:0}
.recherche svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}

.segment{display:inline-flex; background:var(--toile); border-radius:11px; padding:3px; gap:2px; flex-wrap:wrap}
.segment button{background:transparent; border:0; border-radius:9px; padding:7px 13px; font-size:13px; font-weight:500; color:var(--gris)}
.segment button.actif{background:var(--papier); color:var(--encre); font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,.08)}
.segment button span{margin-left:5px; font-size:11px; color:var(--faible)}

/* --- Listes ------------------------------------------------------------------------------------------------- */
.liste{display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 290px); overflow:auto; margin:0 -8px; padding:0 8px}
.ligne{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; cursor:pointer; border:1px solid transparent; background:none; width:100%; text-align:left; color:inherit}
.ligne:hover{background:var(--toile)}
.ligne.actif{background:var(--or-teinte); border-color:color-mix(in srgb, var(--or) 50%, transparent)}
.ligne .txt{flex:1; min-width:0}
.ligne .txt b{display:block; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ligne .txt span{display:block; font-size:12px; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ligne .chiffre{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; font-size:13.5px; white-space:nowrap}
.ligne .chiffre small{display:block; font-weight:500; color:var(--gris); font-size:11px}
.vign{width:38px; height:38px; border-radius:10px; background:var(--toile); display:grid; place-items:center; font-weight:700; color:var(--gris); font-size:13px; flex:none; overflow:hidden}
.vign img{width:100%; height:100%; object-fit:cover}
.vide{padding:50px 20px; text-align:center; color:var(--gris); font-size:13.5px}
.vide b{display:block; color:var(--encre); margin-bottom:4px}
.def{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 20px}
.def div span{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); font-weight:600}
.def div b{display:block; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px}
.def div small{color:var(--gris); font-size:12px}
.sep{height:1px; background:var(--trait-doux); margin:18px 0}
h3.sous-titre{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--gris); font-weight:600; margin:18px 0 10px}

/* --- Graphique en barres ----------------------------------------------------------------------------------- */
.barres{display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:18px}
.barre{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px}
.barre i{display:block; width:100%; max-width:38px; background:var(--or); border-radius:6px 6px 2px 2px; position:relative; min-height:2px; transition:height .3s}
.barre i::after{content:attr(data-v); position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--gris); white-space:nowrap; font-style:normal}
.barre small{font-size:10.5px; color:var(--gris); white-space:nowrap}

/* --- Fenêtres --------------------------------------------------------------------------------------------- */
.modal-fond{position:fixed; inset:0; background:rgba(10,9,8,.5); display:grid; place-items:center; z-index:90; padding:20px}
.modal-carte{background:var(--papier); border-radius:18px; width:min(640px, 100%); max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--ombre-vive); min-width:0}
.modal-carte.large{width:min(1080px, 100%)}
.modal-carte.moyen{width:min(820px, 100%)}
.modal-entete{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--trait-doux)}
.modal-entete h3{font-size:16px}
.modal-entete p{margin:2px 0 0; font-size:12.5px; color:var(--gris)}
.modal-fermer{width:32px; height:32px; border-radius:50%; border:0; background:var(--toile); color:var(--gris); font-size:15px; display:grid; place-items:center; flex:none}
.modal-fermer:hover{background:var(--toile-survol); color:var(--encre)}
.modal-corps{padding:18px 22px; overflow:auto; min-width:0}
.modal-pied{display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--trait-doux); flex-wrap:wrap}
.modal-pied .gauche{margin-right:auto}

.toast{position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 16px); background:var(--encre); color:var(--papier); padding:11px 20px; font-size:13px; font-weight:600;
  border-radius:999px; opacity:0; transform:translate(-50%, -10px); transition:.2s; pointer-events:none; z-index:10050; box-shadow:var(--ombre-vive); max-width:min(560px, 90vw); text-align:center}
.toast.vu{opacity:1; transform:translate(-50%, 0)}
.toast.souci{background:var(--rouge); color:#fff}

/* --- Connexion ------------------------------------------------------------------------------------------- */
.page-connexion{min-height:100vh; width:100%; display:grid; place-items:center; padding:20px}
.carte-connexion{width:min(400px, 100%); background:var(--papier); border-radius:22px; padding:34px 30px 30px; box-shadow:var(--ombre); border:1px solid var(--trait-doux)}
.logo-connexion{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.logo-connexion .marque-ico{width:46px; height:46px; border-radius:14px; font-size:22px}
.logo-connexion b{font-size:19px; display:block; line-height:1.1}
.logo-connexion small{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--or-texte); font-weight:600}
.erreur-connexion{background:var(--rouge-teinte); color:var(--rouge); font-size:12.5px; padding:10px 13px; border-radius:12px; margin-bottom:14px; font-weight:600}
.mdp-ligne{display:flex; gap:8px}
.mdp-ligne input{flex:1}

/* --- Téléphone / tablette ------------------------------------------------------------------------------------ */
.nav-bas{display:none}
.tiroir-fond{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:80; display:flex; justify-content:flex-end}
.tiroir{width:min(320px, 86vw); height:100%; background:var(--papier); padding:14px 12px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:2px; overflow:auto; box-shadow:var(--ombre-vive)}
.tiroir-tete{display:flex; justify-content:space-between; align-items:center; padding:6px 10px 14px}
.tiroir-tete b{font-size:16px}
.tiroir .bl-titre{padding-top:12px}
.tiroir-pied{margin-top:auto; border-top:1px solid var(--trait-doux); padding-top:8px}
@media (max-width:880px){
  body{display:block}
  .barre-laterale{display:none}
  main.page{padding:16px 16px calc(var(--nb-h) + 30px + env(safe-area-inset-bottom))}
  .entete h1{font-size:22px}
  .colonnes,.colonnes.devis{grid-template-columns:1fr}
  .colonnes.devis > #synthese{position:static; order:-1}
  .carte{padding:16px}
  .liste{max-height:none}
  .nav-bas{display:flex; position:fixed; left:0; right:0; bottom:0; height:calc(var(--nb-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
    background:var(--papier); border-top:1px solid var(--trait-doux); z-index:70}
  .nb-item{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10.5px; font-weight:500; color:var(--gris); text-decoration:none; background:none; border:0; padding:6px 0}
  .nb-item svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .nb-item.actif{color:var(--or-texte); font-weight:600}
  .modal-fond{align-items:end; padding:0}
  .modal-carte,.modal-carte.large,.modal-carte.moyen{width:100%; max-width:none; border-radius:20px 20px 0 0; max-height:94vh}
  .modal-pied{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .kpi b{font-size:21px}
  .tableau{font-size:13px}
  .tableau td,.tableau th{padding:8px 6px}
  .masquer-mobile{display:none !important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}}
@media print{.barre-laterale,.nav-bas,.entete-actions,.toast{display:none !important} body{background:#fff} .carte{box-shadow:none; break-inside:avoid}}