/* Oqora CRM · crm.css (lot 0) : jetons, coquille et composants communs.
   copié de css/styles.css @07a7242 (sections 1 à 4, 16, 17, 18 et « Couleur et vie »), adapté au CRM :
   barre latérale bleu nuit (.theme-bleu), panneau de droite, modale d'une ligne, bandeaux, recherche, annonce.
   SEUL fichier qui définit des jetons :root et des règles globales ; chaque section préfixe ses règles par sa classe
   racine (.s-journee, .s-conv, .s-agenda, .s-rdv, .s-preappel, .s-pipe, .s-contacts, .s-fiche, .s-appel, .st,
   .s-ventes, .s-chiffres, .s-regl). */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&family=Montserrat:wght@800;900&display=swap');

/* ---------------------------------------------------------------- 1. Jetons */
:root{
  --ink:#22262b; --ink-soft:#50575e; --ink-faint:#6a7178;
  --rule:#dde1e5; --rule-soft:#eceef1; --bande:#f7f8f9; --surface:#ffffff; --page-bg:#eef2f9; --sidebar-bg:#fbfbfc;
  --bleu:#2f6fe0; --bleu-dark:#2359c2; --bleu-tint:#eaf1fd; --bleu-ring:rgba(47,111,224,.32);
  --navy-1:#17325e; --navy-2:#12203b; --navy-3:#0b1733; --navy-lede:#c9d6ee; --navy-eyebrow:#9fbdf0;
  --navy-grad:linear-gradient(150deg, var(--navy-1) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  --vert:#15875a; --vert-vif:#1aa36c; --vert-tint:#e2f5ec;
  --rouge:#d8372c; --rouge-tint:#fdeceb;
  --ambre:#b46200; --ambre-vif:#ec8b12; --ambre-tint:#fdf1de;
  --violet:#6348cc; --violet-tint:#efeafc;
  --rose:#c93583; --rose-tint:#fbe7f1;
  --teal:#0b7f76; --teal-tint:#e0f4f2;
  --or:#b8944f; --or-vif:#d4af6a; --or-clair:#ecd9ae; --or-tint:#f7efdc;
  --fs-xs:12px; --fs-sm:13px; --fs-base:14.5px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  --fs-3xl:clamp(26px, 2vw + 12px, 34px); --fs-stat:clamp(28px, 1.4vw + 14px, 34px);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --gutter:clamp(16px, 3.2vw, 44px);
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-full:999px;
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.04);
  --sh-2:0 2px 4px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.08);
  --sh-pop:0 24px 60px rgba(11,23,51,.24);
  --sh-bleu:0 6px 16px rgba(47,111,224,.28);
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-brand:'Montserrat', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --sidebar-w:252px; --panneau-w:480px; --tap:44px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------- 2. Base */
*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html, body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  min-height:100vh; width:100%;
  background:var(--page-bg); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font); margin:0; letter-spacing:-.02em; line-height:1.2; color:var(--ink); }
p{ margin:0; }
button, input, textarea, select{ font-family:inherit; font-size:inherit; }
a{ color:var(--bleu); text-decoration:none; }
img{ max-width:100%; display:block; }
svg{ flex:none; }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.num, .nav-badge{ font-variant-numeric:tabular-nums; }
:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }

/* ---------------------------------------------------------------- 3. Composants */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap); padding:0 var(--sp-5); border-radius:var(--r-sm); border:0;
  font-size:var(--fs-base); font-weight:650; letter-spacing:-.005em; cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--bleu); color:#fff; box-shadow:var(--sh-bleu); }
.btn--primary:hover{ background:var(--bleu-dark); }
.btn--ghost{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule), var(--sh-1); }
.btn--ghost:hover{ color:var(--bleu); box-shadow:inset 0 0 0 1px var(--bleu), var(--sh-1); }
.btn--danger{ background:var(--rouge); color:#fff; }
.btn--sm{ min-height:40px; padding:0 var(--sp-4); font-size:var(--fs-sm); border-radius:11px; }
.btn--sm svg{ width:16px; height:16px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn .cadenas svg, .cadenas svg{ width:15px; height:15px; }

.pill{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-full); padding:7px 14px;
  font-size:var(--fs-sm); font-weight:650; background:var(--surface); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--rule); }
.pill--vert{ background:var(--vert-tint); color:var(--vert); box-shadow:none; }
.pill--rouge{ background:var(--rouge-tint); color:var(--rouge); box-shadow:none; }
.pill--ambre{ background:var(--ambre-tint); color:var(--ambre); box-shadow:none; }
.pill--bleu{ background:var(--bleu-tint); color:var(--bleu); box-shadow:none; }

.tag{ display:inline-flex; align-items:center; border-radius:7px; padding:4px 9px; font-size:11px; font-weight:750;
  line-height:1.3; letter-spacing:.05em; text-transform:uppercase; background:var(--rule-soft); color:var(--ink-soft); white-space:nowrap; }
.tag--rouge{ background:var(--rouge); color:#fff; }
.tag--ambre{ background:var(--ambre-tint); color:var(--ambre); }
.tag--vert{ background:var(--vert-tint); color:var(--vert); }
.tag--bleu{ background:var(--bleu-tint); color:var(--bleu); }

.card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:var(--sp-6); }
.card h2, .card h3{ font-size:var(--fs-lg); font-weight:750; }
.etat-vide{ text-align:center; color:var(--ink-faint); font-weight:600; padding:var(--sp-8) var(--sp-6); }
.en-construction{ max-width:560px; }
.en-construction h2{ margin-bottom:var(--sp-2); }

/* Champs de saisie : un seul style */
.champ{ display:block; width:100%; min-height:var(--tap); border:0; border-radius:var(--r-sm); background:var(--bande);
  padding:10px var(--sp-4); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); }
.champ:focus{ background-color:var(--surface); box-shadow:inset 0 0 0 2px var(--bleu), 0 0 0 4px var(--bleu-ring); }
/* Menus : WebKit ignore min-height sur un <select> natif (21 px au lieu de 44, G.3.21). Sans l'apparence native, la
   hauteur du style commun s'applique partout ; le chevron est un SVG en data: (aucune ressource externe, CSP inchangée). */
select.champ{ -webkit-appearance:none; -moz-appearance:none; appearance:none; min-height:var(--tap); cursor:pointer;
  padding-right:calc(var(--sp-4) + 22px); text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236a7178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--sp-4) center; background-size:12px 8px; }

/* ---------------------------------------------------------------- 4. Coquille */
.shell{ width:100%; min-height:100vh; display:flex; }
.sidebar{
  width:var(--sidebar-w); flex:none; position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:var(--sp-6) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-6);
  background:var(--sidebar-bg);
}
.brand{ display:block; padding:0 var(--sp-2); }
.brand-logo{ display:block; font-family:var(--font-brand); font-weight:800; font-size:22px; letter-spacing:.14em; line-height:1; color:var(--navy-3); }
.brand small{ display:block; margin-top:var(--sp-2); font-weight:550; color:var(--ink-faint); font-size:var(--fs-xs); }
.nav-list{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:var(--sp-3); min-height:var(--tap); padding:0 var(--sp-3);
  border-radius:var(--r-sm); color:var(--ink-soft); font-weight:600; font-size:var(--fs-base); cursor:pointer;
  border:none; background:none; width:100%; text-align:left; transition:background-color .12s ease, color .12s ease;
}
.nav-item .nav-texte{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item svg{ width:19px; height:19px; }
.nav-badge{
  margin-left:auto; min-width:24px; height:22px; padding:0 7px; display:inline-grid; place-items:center;
  border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:700; background:var(--rule-soft); color:var(--ink-soft);
}
.nav-badge--point{ min-width:10px; width:10px; height:10px; padding:0; }
.nav-badge--texte{ font-weight:650; }
.sidebar-foot{ margin-top:auto; padding-top:var(--sp-3); display:flex; flex-direction:column; gap:2px; }

.theme-bleu .sidebar{ background:linear-gradient(170deg, #2f6fe0 0%, #1f4fb0 32%, #17325e 72%, #0b1733 100%); }
.theme-bleu .brand-logo{ color:#fff; }
.theme-bleu .brand small{ color:#c9d6ee; }
.theme-bleu .nav-item{ color:rgba(255,255,255,.86); }
.theme-bleu .nav-item svg{ color:rgba(255,255,255,.7); }
.theme-bleu .nav-item:hover{ background:rgba(255,255,255,.1); color:#fff; }
.theme-bleu .nav-item.active{ background:#fff; color:var(--navy-1); box-shadow:inset 4px 0 0 var(--or-vif); }
.theme-bleu .nav-item.active svg{ color:var(--bleu); }
.theme-bleu .nav-badge{ background:rgba(255,255,255,.18); color:#fff; }
.theme-bleu .nav-item.active .nav-badge{ background:var(--bleu); color:#fff; }
.theme-bleu .nav-badge--point{ background:#fff; }
.theme-bleu .nav-item.active .nav-badge--point{ background:var(--bleu); }
.theme-bleu .nav-badge--rouge, .theme-bleu .nav-item.active .nav-badge--rouge{ background:var(--rouge); }
.theme-bleu .sidebar-foot{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-8) var(--gutter) var(--sp-5); flex-wrap:wrap; }
.hamburger{
  display:none; position:relative; width:var(--tap); height:var(--tap); flex:none; border-radius:var(--r-sm); border:0;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule), var(--sh-1); color:var(--ink);
  align-items:center; justify-content:center; cursor:pointer;
}
.hamburger svg{ width:22px; height:22px; }
.hamburger-badge, .theme-bleu .hamburger-badge{ position:absolute; top:-6px; right:-6px; margin:0; background:var(--rouge); color:#fff; }
.topbar-titre{ flex:1 1 280px; min-width:0; display:flex; align-items:center; gap:var(--sp-3); }
.topbar-titre h1{ font-size:var(--fs-3xl); font-weight:800; letter-spacing:-.035em; line-height:1.1; }
.topbar-aide{ margin-top:var(--sp-1); color:var(--ink-soft); font-size:var(--fs-base); max-width:70ch; }
.topbar-aide:empty{ display:none; }
.topbar-retour{ width:44px; height:44px; flex:none; display:grid; place-items:center; border:0; border-radius:var(--r-full);
  background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule), var(--sh-1); cursor:pointer; }
.topbar-retour svg{ width:20px; height:20px; }
.topbar-actions{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.maj-discrete{ font-size:var(--fs-xs); color:var(--ink-faint); white-space:nowrap; }
.avatar{ width:44px; height:44px; border-radius:var(--r-full); background:var(--navy-grad); color:#fff; display:grid;
  place-items:center; font-weight:700; font-size:var(--fs-sm); letter-spacing:.02em; flex:none; box-shadow:0 0 0 2px var(--or-clair); }
.view-content{ flex:1; padding:0 var(--gutter) 72px; width:100%; }

/* Recherche de l'en-tête */
.recherche{ position:relative; display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); width:min(340px, 100%);
  background:var(--surface); border-radius:var(--r-sm); padding:0 var(--sp-3); box-shadow:inset 0 0 0 1px var(--rule); }
.recherche-icone svg{ width:18px; height:18px; color:var(--ink-faint); }
.recherche input{ border:0; outline:none; background:none; color:var(--ink); flex:1; min-width:0; min-height:40px; }
/* G.3.21 : le focus se voit sur le champ lui-même (le contour du parent ne compte pas), comme partout ailleurs. */
.recherche input:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }
.recherche-resultats{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:var(--surface);
  border-radius:var(--r-md); box-shadow:var(--sh-2); padding:var(--sp-2); max-height:60vh; overflow-y:auto; }
.recherche-ligne{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:var(--tap);
  border:0; background:none; text-align:left; padding:var(--sp-2) var(--sp-3); border-radius:10px; cursor:pointer; color:var(--ink); }
.recherche-ligne:hover, .recherche-ligne:focus-visible{ background:var(--bleu-tint); }
.recherche-ligne span{ font-size:var(--fs-sm); color:var(--ink-soft); }
.recherche-vide{ padding:var(--sp-3); color:var(--ink-faint); font-weight:600; }

/* Bandeaux globaux (un seul à la fois, le plus grave d'abord) */
.bandeau{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--gutter); font-weight:650;
  background:var(--ambre-tint); color:var(--ambre); }
.bandeau--n1, .bandeau--n2{ background:var(--rouge); color:#fff; }
.bandeau--n3{ background:var(--violet-tint); color:var(--violet); }
.bandeau--n4{ background:var(--navy-1); color:#fff; }
.bandeau--n6{ background:var(--rouge-tint); color:var(--rouge); }
.bandeau--n8{ background:var(--bleu-tint); color:var(--bleu-dark); }
.bandeau-texte{ flex:1; min-width:0; }
.bandeau-action{ min-height:40px; padding:0 var(--sp-4); border:0; border-radius:var(--r-sm); background:var(--surface);
  color:var(--ink); font-weight:700; cursor:pointer; box-shadow:var(--sh-1); }
.bandeau-fermer{ width:40px; height:40px; border:0; background:none; color:inherit; cursor:pointer; display:grid; place-items:center; }
.bandeau-fermer svg{ width:18px; height:18px; }

/* ---------------------------------------------------------------- Panneau de droite (pleine page sur téléphone) */
.panneau-fond{ position:fixed; inset:0; background:rgba(11,23,51,.32); z-index:350; animation:fadeIn .18s ease; }
.panneau{
  position:fixed; top:0; right:0; bottom:0; z-index:351; width:min(100vw, var(--panneau-w));
  background:var(--surface); box-shadow:var(--sh-pop); overflow-y:auto; border-radius:var(--r-xl) 0 0 var(--r-xl);
  padding:var(--sp-5) var(--sp-6) var(--sp-10); animation:panneauIn .24s var(--ease);
}
@keyframes panneauIn{ from{ transform:translateX(32px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.panneau-tete{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.panneau-fermer{ width:44px; height:44px; flex:none; display:grid; place-items:center; border:0; border-radius:var(--r-full);
  background:var(--bande); color:var(--ink); cursor:pointer; }
.panneau-fermer svg{ width:20px; height:20px; }
.panneau-titre{ font-size:var(--fs-xl); font-weight:800; letter-spacing:-.03em; min-width:0; overflow-wrap:anywhere; }

/* Annonce « Ce qui va se passer » (dans le panneau, au-dessus du bouton) */
.annonce{ display:flex; flex-direction:column; gap:var(--sp-4); }
.annonce-bloc{ background:var(--bande); border-radius:var(--r-md); padding:var(--sp-4); }
.annonce-titre{ font-size:var(--fs-xs); font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--sp-2); }
details.annonce-bloc > summary{ cursor:pointer; min-height:var(--tap); display:flex; align-items:center; margin:0; }
.annonce-bloc ul, .annonce-bloc ol{ margin:0; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-1); }
.annonce-recoit{ background:var(--bleu-tint); }
.annonce-asavoir{ background:var(--ambre-tint); }
.annonce-asavoir .annonce-titre{ color:var(--ambre); }
.annonce-entete{ font-weight:700; color:var(--ambre); }
.annonce-bloque, .annonce-erreur{ font-weight:650; color:var(--rouge); background:var(--rouge-tint); border-radius:var(--r-md); padding:var(--sp-4); }
.annonce-cadenas{ display:flex; align-items:center; gap:var(--sp-2); font-weight:650; }
.annonce-cadenas svg{ width:18px; height:18px; }
.annonce-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:flex-end; }

/* ---------------------------------------------------------------- Modale : une ligne de confirmation */
.modale-fond{ position:fixed; inset:0; z-index:400; background:rgba(11,23,51,.45); display:flex; align-items:center;
  justify-content:center; padding:var(--sp-4); animation:fadeIn .18s ease; }
.modale{ width:100%; max-width:440px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-pop); padding:var(--sp-6); }
.modale-texte{ font-size:var(--fs-md); font-weight:650; }
.modale-actions{ display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-5); }

/* ---------------------------------------------------------------- Toast */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 160%);
  background:var(--navy-3); color:#fff; padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5); min-height:48px;
  display:flex; align-items:center; gap:var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-base); font-weight:600;
  box-shadow:var(--sh-pop); transition:transform .28s var(--ease); z-index:500; max-width:min(92vw, 560px);
}
.toast.show{ transform:translate(-50%, 0); }
.toast-annuler{ min-height:var(--tap); padding:0 var(--sp-4); border:0; border-radius:var(--r-sm); background:rgba(255,255,255,.14);
  color:#fff; font-weight:750; cursor:pointer; }

/* ---------------------------------------------------------------- Écran de code */
.connexion{ min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-8) var(--sp-4); background:var(--navy-grad); }
.connexion--pardessus{ position:fixed; inset:0; z-index:600; }
.connexion-carte{ width:100%; max-width:420px; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-pop);
  padding:var(--sp-10) var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-3); }
.connexion-marque{ font-family:var(--font-brand); font-weight:800; font-size:30px; letter-spacing:.14em; color:var(--navy-2); text-align:center; }
.connexion-carte h1{ font-size:var(--fs-xl); font-weight:800; text-align:center; margin-bottom:var(--sp-3); }
.connexion-carte label{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.connexion-carte input{ width:100%; min-height:56px; border:0; border-radius:var(--r-md); background:var(--bande); text-align:center;
  font-size:26px; font-weight:700; letter-spacing:.4em; color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); }
.connexion-carte input:focus{ background:var(--surface); box-shadow:inset 0 0 0 2px var(--bleu), 0 0 0 4px var(--bleu-ring); }
.connexion-erreur{ color:var(--rouge); font-size:var(--fs-sm); font-weight:650; min-height:20px; }
.connexion-carte .btn{ min-height:52px; font-size:var(--fs-md); }

/* ---------------------------------------------------------------- Adaptation écrans */
.tiroir-fond{ display:none; position:fixed; inset:0; background:rgba(11,23,51,.45); z-index:40; }
@media (max-width:899px){
  .hamburger{ display:inline-flex; }
  .sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:50; height:auto; width:min(86vw, 320px);
    transform:translateX(-105%); transition:transform .26s var(--ease); box-shadow:var(--sh-pop); border-radius:0 var(--r-xl) var(--r-xl) 0; }
  .sidebar:not(.open){ box-shadow:none; }
  .shell:not(.shell--pret) .sidebar{ transition:none; }
  .sidebar.open{ transform:translateX(0); }
  .tiroir-fond.open{ display:block; animation:fadeIn .18s ease; }
  .topbar{ padding-top:var(--sp-5); }
  .topbar-actions{ width:100%; }
  .recherche{ flex:1 1 auto; width:auto; }
  .panneau{ width:100vw; border-radius:0; padding:var(--sp-4) var(--sp-4) calc(var(--sp-10) + env(safe-area-inset-bottom, 0px)); }
  .panneau-fond{ display:none; }
}
@media (max-width:640px){
  :root{ --gutter:16px; }
  body{ font-size:15px; }
  .topbar{ padding:var(--sp-4) var(--gutter) var(--sp-4); gap:var(--sp-3); }
  .topbar-titre h1{ font-size:26px; }
  .topbar-actions{ gap:var(--sp-2); flex-wrap:nowrap; }
  .topbar-actions .btn{ min-height:var(--tap); width:var(--tap); padding:0; flex:none; }
  .topbar-actions .btn span{ display:none; }
  .maj-discrete{ display:none; }
  .avatar{ display:none; }
  .card{ padding:var(--sp-5); }
  .btn, .nav-item, .bandeau-action, .toast-annuler{ min-height:var(--tap); }
  .modale-actions .btn{ flex:1 1 0; }
  .annonce-actions .btn{ flex:1 1 100%; }
  .connexion-carte{ padding:var(--sp-8) var(--sp-5); }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}