/* Appli – mise en page des écrans et composants propres à un écran. Couleurs, tailles et durées : uniquement les
   jetons de tokens.css ; tailles de texte par rôle (--t-…) ; composants communs (en-tête, section, bloc, encadré,
   boutons, champs, listes…) : composants.css (design/DESIGN.md, vitrine design/systeme.html). */
html, body { margin: 0; height: 100%; background: var(--bg-page); color: var(--ink); }
body { font-family: var(--font-ui); font-size: var(--t-texte); line-height: var(--lh-body); }
.cache { display: none !important; }
button { font: inherit; cursor: pointer; color: inherit; }

.ecran { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg-page); }
.moi { font-size: var(--t-secondaire); color: var(--ink-2); }
.retour, .icone { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); flex: none;
  background: none; border: 0; border-radius: var(--radius-md); color: var(--ink); }
.retour:active, .icone:active { background: var(--surface-pressed); }
.contenu { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--gutter); }


/* Tournées : jauge d'avancement */
.jauge { display: block; height: var(--bar-h); background: var(--surface-2); border-radius: var(--radius-full); overflow: hidden; }
.jauge > * { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.vide { color: var(--ink-2); text-align: center; margin-top: var(--sp-10); }
#btn-departements { width: 100%; margin-top: var(--sp-2); }
/* Utilisateurs : rôle à côté du nom, sans gras */
.ligne-vendeur__role { font-weight: var(--fw-regular); }
/* Écran Utilisateurs : haut (synchro, « à vérifier »), recherche, action principale collée en bas sur téléphone
   (pouce) ; sur tablette et PC, en haut à droite, sur la ligne de la recherche et du filtre */
@media (min-width: 768px) { .filtres.filtres-utilisateurs > .choix, .filtres.filtres-utilisateurs > .btn--compact { flex: none; } }
.utilisateurs-haut { display: grid; gap: var(--sp-2); }
.utilisateurs-haut:empty { display: none; }
.recherche-utilisateurs { flex: 1 1 auto; }
.a-verifier { display: grid; gap: var(--sp-2); }
.contenu > .barre-actions { bottom: calc(var(--sp-6) * -1); margin: auto calc(var(--gutter) * -1) calc(var(--sp-6) * -1);
  padding: var(--sp-3) var(--gutter); }
@media (min-width: 768px) {
  .contenu > .barre-actions { margin-left: calc(var(--gutter-pc) * -1); margin-right: calc(var(--gutter-pc) * -1);
    padding-left: var(--gutter-pc); padding-right: var(--gutter-pc); }
}
.aide { color: var(--ink-2); font-size: var(--t-secondaire); margin: 0 0 var(--sp-3); }

/* Signaler un problème */
.types-signalement { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-2) 0; }
.types-signalement .tile { font-weight: var(--fw-semibold); }
#texte-signalement { width: 100%; min-height: var(--tile-v-h); font: inherit; padding: var(--sp-2); color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--border-strong); border-radius: var(--radius-md); }
.apercu { display: flex; gap: var(--sp-3); align-items: center; margin: var(--sp-2) 0; font-size: var(--t-secondaire); }
.apercu img { width: var(--sidebar-w-mini); max-height: calc(var(--sp-16) * 2); object-fit: cover; border: var(--bw) solid var(--border); border-radius: var(--radius-sm); }
.filtres { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.signalement { margin-bottom: var(--sp-3); }
.signalement .titre { display: flex; justify-content: space-between; gap: var(--sp-2); font-weight: var(--fw-semibold); }
.signalement .sous { color: var(--ink-2); font-size: var(--t-secondaire); margin: var(--sp-1) 0; }
.signalement select { min-height: var(--touch); border-radius: var(--radius-sm); border: var(--bw) solid var(--border-strong); background: var(--surface); color: var(--ink); }
.signalement pre { white-space: pre-wrap; word-break: break-word; font-family: var(--font-data); font-size: var(--t-secondaire); background: var(--surface-2);
  padding: var(--sp-2); border-radius: var(--radius-sm); max-height: calc(var(--sp-16) * 4); overflow: auto; }
.signalement .images img { max-width: 48%; margin: var(--sp-1) 1% 0 0; border: var(--bw) solid var(--border); border-radius: var(--radius-sm); }

.actions-ligne { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.actions-ligne .btn { flex: 1; min-width: auto; }
.repartition-portes .non { color: var(--ink-3); }
/* Ouverture de la carte : invisible le temps du cadrage, puis fondu */
.carte { transition: opacity var(--dur-3) var(--ease-out); }

/* Messages et réseau (message temporaire : voir « Série 6 » plus bas) */
.reseau { position: fixed; top: calc(var(--sp-2) + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  display: inline-flex; align-items: center; min-height: var(--chip-h); padding: 0 var(--sp-3); border-radius: var(--radius-full);
  font-size: var(--t-legende); font-weight: var(--fw-semibold); background: var(--surface-raised); color: var(--ink);
  border: var(--bw-strong) dashed var(--st-pending); box-shadow: var(--shadow-2); white-space: nowrap; pointer-events: none; }
.reseau.hors-ligne { background: var(--offline-bg); color: var(--offline); border-color: transparent; }

/* Connexion et choix du mot de passe : carte centrée dans l'écran */
.ecran-centre { overflow-y: auto; padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.ecran-centre::before, .ecran-centre::after { content: ""; flex: 1; }
.carte-form { display: grid; gap: var(--sp-4); width: 100%; max-width: var(--form-w); margin: 0 auto; padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-1); }
.carte-form__tete { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; margin-bottom: var(--sp-2); }
.logo-outil { display: grid; place-items: center; width: var(--ctl-lg); height: var(--ctl-lg); border-radius: var(--radius-btn);
  background: var(--inverse); color: var(--on-inverse); }
.logo-outil .ico { width: var(--icon-lg); height: var(--icon-lg); }
.carte-form .encadre:empty { display: none; }
.carte-form .encadre { padding: var(--sp-3); }
.carte-form .btn--primary { margin-top: var(--sp-2); }
.double-auth { display: grid; gap: var(--sp-3); }
.mdp > .input { padding-left: var(--sp-4); padding-right: var(--ctl); }
.mdp > .voir-mdp { color: var(--ink-2); }
.mdp > .voir-mdp[aria-pressed="true"] { color: var(--ink); }
.position-signalement { margin: var(--sp-3) 0; padding: var(--sp-3); border: var(--bw) solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.position-signalement .check { font-weight: var(--fw-semibold); }
.position-signalement .aide { margin: var(--sp-2) 0 0; }

/* ── Carte de la tournée (téléphone) : la carte d'abord ────────────────────────
   Deux panneaux flottants opaques, avec marge : en haut la tournée sur une ligne (compteurs dépliables), en bas
   la répartition (consigne + vignettes vendeurs). Tout le reste dans le menu « ⋯ ». */
.ecran-carte { background: var(--map-bg); }
.zone-carte { position: absolute; inset: 0; }
.carte { position: absolute; inset: 0; }
/* Choix de l'IRIS : écran à part par-dessus le formulaire de la nouvelle tournée — titre et retour, puis la carte
   encadrée (coins arrondis, contour) sur toute la place restante */
.choix-iris { position: absolute; inset: 0; z-index: var(--z-float); display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom)); background: var(--bg-page); }
.choix-iris.cache { display: none; }
.carte-iris { position: relative; flex: 1; min-height: 0; overflow: hidden; border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg); background: var(--map-bg); }
@media (min-width: 768px) { .choix-iris { padding: var(--sp-4) var(--gutter-pc) var(--gutter-pc); } }
.carte-haut { position: absolute; z-index: var(--z-float); top: calc(var(--marge-carte) + env(safe-area-inset-top));
  left: var(--marge-carte); right: var(--marge-carte); padding: var(--sp-1); border-radius: var(--radius-lg); }
.contexte { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.contexte .retour, .contexte .icone { width: var(--touch); height: var(--touch); border-radius: var(--radius-md); }
.contexte .ico { width: var(--icon); height: var(--icon); }
.logo-societe { display: grid; place-items: center; width: var(--avatar-sm); height: var(--avatar-sm); flex: none; border-radius: var(--radius-sm);
  background: var(--brand-2); color: var(--on-brand-2); font-size: var(--t-legende); font-weight: var(--fw-semibold); overflow: hidden; }
.logo-societe img { width: 100%; height: 100%; object-fit: contain; }
.contexte__titre { flex: 1; min-width: 0; display: grid; justify-items: start; min-height: var(--touch); padding: 0 var(--sp-1);
  background: none; border: 0; text-align: left; align-content: center; }
.contexte__sous { display: flex; align-items: center; gap: var(--sp-2); max-width: 100%; white-space: nowrap; overflow: hidden; }
#sous-titre-tournee { overflow: hidden; text-overflow: ellipsis; }
/* Synchro : un point et un mot, sans cadre */
.synchro { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; font-weight: var(--fw-semibold); }
.synchro::before { content: ""; width: var(--sp-2); height: var(--sp-2); border-radius: var(--radius-full); background: currentColor; }
.synchro--ok { color: var(--ok); } .synchro--attente { color: var(--st-pending); } .synchro--hors { color: var(--offline); }
/* Portes restantes (vierges) : le chiffre qui compte le matin ; touche = déplier les compteurs */
/* Compteurs dépliés : rendus mais repliés (hauteur 0), pour garder leur texte lisible par les outils d'accessibilité */
.details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease); }
.details > * { overflow: hidden; min-height: 0; }
.carte-haut.deplie .details { grid-template-rows: 1fr; }
.carte-haut .counters { padding: 0 var(--sp-2); }
.carte-haut.deplie .counters { padding: var(--sp-3) var(--sp-2) var(--sp-2); border-top: var(--bw) solid var(--border); margin-top: var(--sp-1); }
.counters__cell { gap: var(--bw-strong); padding: 0; border: 0; }
.counters__value { line-height: var(--lh-tight); }
.counters__label { display: block; line-height: var(--lh-tight); }
.progress .num { font-size: var(--t-legende); color: var(--ink-2); white-space: nowrap; }
/* Compteurs « à part » et « à débloquer » : puces qui ouvrent le détail */
.counters__extras { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.extra { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--chip-h); padding: 0 var(--sp-3);
  font: inherit; font-size: var(--t-bouton-petit); font-weight: var(--fw-semibold); color: var(--warn); background: var(--warn-bg);
  border: 0; border-radius: var(--radius-full); cursor: pointer; }
.extra b { font-family: var(--font-data); }
.extra .ico { width: var(--icon-sm); height: var(--icon-sm); }

/* Boutons de carte : colonne en bas à droite (fond de carte, me localiser, légende tout en bas) ; les fonds de
   carte s'ouvrent au-dessus, en colonne, à la même largeur */
.carte-boutons { position: absolute; z-index: var(--z-float); right: var(--marge-carte); bottom: calc(var(--marge-carte) + env(safe-area-inset-bottom));
  display: grid; gap: var(--sp-2); }
.carte-boutons .btn--map { width: var(--touch); height: var(--touch); min-height: var(--touch); padding: 0; border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--ink); border: var(--bw) solid var(--border); box-shadow: var(--shadow-2); }
.carte-boutons .btn--map[aria-expanded="true"] { background: var(--surface-2); }
.ecran-carte .maplibregl-ctrl-attrib, .ecran-carte .maplibregl-ctrl-bottom-left { display: none; }
/* Indicateur réseau (hors ligne, actions en attente) : sous l'en-tête de la carte */
body.sur-carte .reseau { top: calc(var(--marge-carte) * 2 + var(--touch) + var(--sp-2) * 2 + env(safe-area-inset-top)); }

/* Message temporaire juste au-dessus du panneau du bas */
body.sur-carte .message { top: auto; left: var(--marge-carte); right: calc(var(--marge-carte) * 2 + var(--touch));
  bottom: calc(var(--hauteur-pied, 0px) + var(--marge-carte) * 2 + env(safe-area-inset-bottom)); }

/* Panneau du bas : consigne + ronds des vendeurs, à la taille de son contenu, à gauche de la colonne de boutons */
.pied-carte { position: absolute; z-index: var(--z-sheet); left: var(--marge-carte); bottom: calc(var(--marge-carte) + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100% - var(--marge-carte) * 3 - var(--touch)); display: grid; gap: var(--sp-2);
  grid-template-columns: minmax(0, 1fr); padding: var(--sp-2) 0; border-radius: var(--radius-lg); }
.consigne { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0 var(--sp-3); min-height: var(--sp-6);
  font-size: var(--t-secondaire); color: var(--ink-2); line-height: var(--lh-tight); }
.vtiles-rangee { display: flex; gap: var(--sp-1); overflow-x: auto; padding: 0 var(--sp-2); scroll-padding: 0 var(--sp-2);
  scroll-snap-type: x proximity; scrollbar-width: none; }
.vtiles-rangee::-webkit-scrollbar { display: none; }
#pastilles { display: contents; }
/* Vendeur = son rond (44 px à toucher) ; choisi : le rond s'allonge avec son prénom et sa charge */
.vrond { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--touch); min-width: var(--touch);
  padding: var(--bw-strong); font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--radius-full);
  scroll-snap-align: start; cursor: pointer; transition: background-color var(--dur-2) var(--ease), padding var(--dur-2) var(--ease); }
.vrond .avatar { width: calc(var(--touch) - var(--bw-strong) * 2); height: calc(var(--touch) - var(--bw-strong) * 2); }
.vrond:active { transform: scale(.96); }
.vrond__info { display: none; line-height: var(--lh-tight); text-align: left; }
.vrond__nom { display: block; font-size: var(--t-legende); font-weight: var(--fw-semibold); white-space: nowrap; }
.vrond__charge { display: block; font-family: var(--font-data); font-size: var(--t-legende); }
.vrond.autre .avatar { opacity: .85; }
.vrond--autres { justify-content: center; font-size: var(--t-legende); font-weight: var(--fw-semibold); color: var(--ink-2); }
.vrond--autres .ico { width: var(--icon-sm); height: var(--icon-sm); }
/* Fiche d'un vendeur (appui long sur son rond) */
.fiche-vendeur { gap: var(--sp-3); }
.fiche-vendeur .avatar { width: var(--ctl-lg); height: var(--ctl-lg); font-size: var(--t-texte); }

/* Voile sous un menu ou une fenêtre */
.voile { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); animation: fondu var(--dur-2) var(--ease-out); }
@keyframes fondu { from { opacity: 0; } }

/* ── Fiches (rue, point, légende) : carte flottante, la carte reste visible au-dessus ── */
.fiche { position: fixed; z-index: var(--z-overlay); left: var(--marge-carte); right: var(--marge-carte);
  bottom: calc(var(--marge-carte) + env(safe-area-inset-bottom)); max-height: 62%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border: var(--bw) solid var(--border); border-radius: var(--radius-sheet); box-shadow: var(--shadow-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-4); animation: monter var(--dur-3) var(--ease-out); }
.fiche::before { content: ""; display: block; width: var(--handle-w); height: var(--handle-h); margin: 0 auto var(--sp-2);
  border-radius: var(--radius-full); background: var(--border-strong); }
.fermer { position: absolute; top: var(--sp-4); right: var(--sp-3); width: var(--touch); height: var(--touch); display: grid; place-items: center;
  border: 0; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); }
.fiche-tete { display: grid; gap: var(--sp-2); }
/* En-tête d'une fenêtre : la croix (en haut à droite) garde sa place */
.fiche .entete { padding-right: calc(var(--touch) + var(--sp-2)); }
.fiche-resume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.fiche .status { min-height: var(--sp-8); }
.repartition-portes { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding: var(--sp-2) var(--sp-3); background: var(--surface-2);
  border-radius: var(--radius-md); font-size: var(--t-secondaire); }
.repartition-portes span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.repartition-portes b { font-family: var(--font-data); font-weight: var(--fw-semibold); }
.forme { width: var(--sp-3); height: var(--sp-3); flex: none; }
.fiche .list .row { width: 100%; min-height: var(--ctl-lg); padding: var(--sp-2) var(--sp-3); font: inherit; color: inherit; text-align: left;
  background: none; border-left: 0; border-right: 0; border-bottom: 0; }
.fiche .list .row__num { font-size: var(--t-secondaire); }
.fiche .list button.row:first-child { border-top: 0; }
.fiche .list button.row:active { background: var(--surface-pressed); }
.fiche .avatar--lg { width: var(--avatar); height: var(--avatar); font-size: var(--t-legende); }
.fiche .btn--primary { font-size: var(--t-bouton); }
.categorie { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: start; padding: 0 var(--sp-3); min-height: var(--sp-8);
  border-radius: var(--radius-sm); font-size: var(--t-legende); font-weight: var(--fw-semibold); border: var(--bw) solid var(--border-strong); background: var(--surface); color: var(--ink); }
.categorie i { width: var(--sp-3); height: var(--sp-3); border-radius: var(--radius-full); background: var(--cc); }
.ligne { margin: 0; font-size: var(--t-secondaire); }
.ligne.petit { color: var(--ink-2); }
.legende { display: grid; gap: var(--sp-1); }
.legende div { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t-secondaire); }
.legende svg { flex: 0 0 var(--sp-16); height: var(--sp-8); overflow: visible; }

/* Réglages fins (retours du 1er/11) */
.contexte__sous .synchro:empty { gap: 0; }
/* Mention des sources de la carte : au-dessus du panneau du bas, jamais dessous */
.ecran-carte .maplibregl-ctrl-bottom-right { bottom: calc(var(--hauteur-pied, 0px) + var(--marge-carte) * 2);
  right: calc(var(--marge-carte) * 2 + var(--touch)); }
.ecran-carte .maplibregl-ctrl-bottom-left { display: none; }
/* Fiche plus compacte : vendeurs en lignes de 48 px, pastilles 32 px */
.fiche .list .row { min-height: var(--ctl); padding: var(--sp-1) var(--sp-3); gap: var(--sp-3); }
.fiche .list .row__titre { font-size: var(--t-texte); }
.fiche .btn--split .detail { font-size: var(--t-texte); }
.fiche .intitule { margin-bottom: calc(var(--sp-1) * -1); }

/* Compteurs : barre sur toute la largeur, totaux dessous ; « au total » peut passer à la ligne */
.counters .progress { display: grid; gap: var(--sp-2); }
.counters .progress__bar { width: 100%; }
.counters__sub { white-space: normal; overflow-wrap: anywhere; }

/* Liste des rues (retours du 1er/11) : lignes basses, motif · nom · logements · actions */
.ligne-rue { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--sp-2); min-height: var(--ctl-lg);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); }

/* Compteurs en 2 × 2 : chiffre et libellé sur une ligne, total dessous (lisible sur un petit écran) */
.counters__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.counters__cell { grid-template-columns: auto 1fr; column-gap: var(--sp-2); align-items: baseline; }
.counters__cell .swatch { grid-row: 1 / 3; align-self: center; width: var(--sp-6); height: var(--sp-3); margin: 0; }
.counters__cell .counters__value { grid-column: 2; }
.counters__cell .counters__label { display: inline; }
.counters__haut { grid-column: 2; display: flex; align-items: baseline; gap: var(--sp-2); }
.counters__cell .counters__sub { grid-column: 2; white-space: nowrap; }

/* ══ Retours du 1er/11 (série 4) : règles communes des fenêtres, carte prête d'avance, page de la tournée ══ */

/* Carte préparée en arrière-plan : son écran reste disposé (invisible) pendant qu'on est sur la page de la tournée ;
   elle est donc déjà cadrée et dessinée quand on l'ouvre, puis apparaît en fondu */
#ecran-carte.cache { display: flex !important; visibility: hidden; pointer-events: none; }
#ecran-carte:not(.cache) { animation: fondu var(--dur-2) var(--ease-out); }

/* En-tête de la carte : ville / IRIS à gauche, restants alignés à gauche dans leur bouton, barre de progression */
.carte-haut { padding: var(--sp-2); }
.contexte { gap: var(--sp-2); }
.restant { display: flex; align-items: center; gap: var(--sp-2); flex: none; min-height: var(--touch);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); text-align: left; background: var(--surface-2); border: 0; border-radius: var(--radius-md); }
.restant__texte { display: grid; justify-items: start; }
.restant__n { font-size: var(--t-chiffre); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.restant__l { font-size: var(--t-legende); color: var(--ink-3); line-height: var(--lh-tight); }
.restant__chevron { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-2); transition: transform var(--dur-2) var(--ease); }
.carte-haut.deplie .restant__chevron, .resume.deplie .restant__chevron { transform: rotate(180deg); }

/* Calques : sous-menu dans un bloc à part, fond inversé, titre, pointe vers le bouton */
.carte-boutons { justify-items: end; }

/* Vendeurs : la rangée laisse la place au contour ; choisi = à sa propre couleur */
.vtiles-rangee { padding: var(--sp-1) var(--sp-2); }

/* ── Fenêtres : deux formats seulement ──
   « carte » : 50 % de l'écran, la carte reste visible au-dessus ; la poignée se glisse (haut = plein écran,
   bas = 50 % puis fermer). « page » : plein écran, pour lire (légende, détail, sources…). */
.fiche { left: 0; right: 0; bottom: 0; max-height: none; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border-left: 0; border-right: 0; border-bottom: 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  transition: height var(--dur-3) var(--ease); }
.fiche::before { display: none; }
.fiche__poignee { flex: none; display: grid; place-items: center; height: var(--sp-6); cursor: grab; touch-action: none; }
.fiche__poignee span { width: var(--handle-w); height: var(--handle-h); border-radius: var(--radius-full); background: var(--border-strong); }
.fermer { top: var(--sp-6); right: var(--sp-3); z-index: 1; }
.fiche--carte { height: 50vh; height: 50dvh; }
.fiche--plein { height: calc(100vh - var(--marge-carte)); height: calc(100dvh - var(--marge-carte) - env(safe-area-inset-top)); }
.fiche--glisse { transition: none; }
.fiche--page { top: 0; height: auto; border-radius: 0; border: 0; box-shadow: none; animation: fondu var(--dur-2) var(--ease-out); }
.fiche--page .fiche__poignee { display: none; }
.fiche--page #fiche-contenu { padding-top: calc(var(--sp-5) + env(safe-area-inset-top)); }
.fiche--page .fermer { top: calc(var(--sp-3) + env(safe-area-inset-top)); }

/* Informations en lignes « libellé : valeur » */
.infos { display: grid; margin: 0; border-top: var(--bw) solid var(--border); }
.infos > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-3); padding: var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--border); font-size: var(--t-secondaire); }
.infos dt { color: var(--ink-3); }
.infos dd { margin: 0; color: var(--ink); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.infos dd small { color: var(--ink-3); font-weight: var(--fw-regular); }

/* Fiche d'une adresse : adresse + copie discrète, outils en petits boutons en bas */
.fiche-resume .num { font-family: var(--font-ui); font-size: var(--t-secondaire); color: var(--ink-2); }

/* ══ Série 5 (2/11) : cadre commun, page de la tournée, fenêtres, fiche d'une adresse ══════════════════════════ */

/* ── Cadre commun : bandeau du haut fixe, barre du bas, menu latéral, menu du profil ──
   Sur tous les écrans sauf la carte (vue pure) et la connexion. */
.appbar { position: fixed; z-index: var(--z-nav); top: 0; left: 0; right: 0; display: none;
  grid-template-columns: var(--touch) minmax(0, 1fr) var(--touch); align-items: center; gap: var(--sp-2);
  height: calc(var(--appbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--sp-2) 0;
  background: var(--surface); border-bottom: var(--bw) solid var(--border); }
body.cadre .appbar { display: grid; }
.appbar__btn { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0; color: var(--ink);
  background: none; border: 0; border-radius: var(--radius-md); }
.appbar__btn:active { background: var(--surface-pressed); }
.appbar__btn .ico { width: var(--icon-lg); height: var(--icon-lg); }
.appbar > .appbar__btn { grid-column: 1; grid-row: 1; }
/* Téléphone : toujours le menu ☰ en haut à gauche, jamais de flèche (retour : bouton du téléphone) */
@media (max-width: 767px) { #btn-retour { display: none; } }
.appbar__logo { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 0; height: var(--touch); }
.appbar__logo img { max-height: var(--avatar); max-width: 100%; object-fit: contain; }
/* Logo de la société cliente à côté du nôtre (offre Standard) : à la hauteur de notre picto */
.marque__client { display: block; max-height: var(--avatar); max-width: 100%; object-fit: contain; }
.marque { display: grid; place-items: center; flex: none; width: var(--avatar); height: var(--avatar); border-radius: var(--radius-sm);
  background: var(--brand-2); color: var(--on-brand-2); }
.marque .ico { width: var(--icon); height: var(--icon); }
.marque__nom { font-size: var(--t-texte); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__profil { grid-column: 3; grid-row: 1; display: grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0;
  background: none; border: 0; border-radius: var(--radius-full); }
.appbar__profil .avatar { width: var(--avatar); height: var(--avatar); }
.appbar__profil[aria-expanded="true"] .avatar { box-shadow: 0 0 0 var(--bw-strong) var(--surface), 0 0 0 calc(var(--bw-strong) * 2) var(--ink); }

/* Écrans dans le cadre : entre le bandeau et la barre du bas (la carte, préparée derrière, reste plein écran) */
body.cadre .ecran:not(.ecran-carte) { top: calc(var(--appbar-h) + env(safe-area-inset-top)); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
/* Contenu qui défile : colonne de blocs qui gardent leur hauteur (une grille les écraserait ou les étirerait) */
.contenu { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; padding: var(--sp-4) var(--gutter) var(--sp-6); }
.contenu > * { flex: none; margin-top: 0; margin-bottom: 0; }
/* Rubriques espacées partout (règle générale de Jean-Lou, 4/11) : 24 px entre deux rubriques d'une page (écart de la
   page + --sp-3), le reste de la page garde son écart serré */
.contenu > .section:not(:first-child) { margin-top: var(--sp-3); }

/* Barre du bas : 5 boutons au plus ; « Nouvelle » en rond à la couleur de la charte */
#tabbar { position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0; display: none;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
body.cadre #tabbar { display: grid; }
#tabbar button { min-width: 0; padding: 0 var(--sp-1); }
#tabbar button > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabbar__rond { display: grid; place-items: center; width: var(--sp-12); height: var(--sp-8); border-radius: var(--radius-full);
  background: var(--brand); color: var(--on-brand); }
.tabbar__plus[aria-current="page"]::before { display: none; }

/* Menu latéral : glisse depuis la gauche sous un voile (téléphone) ; colonne fixe sur PC */
.tiroir { position: fixed; z-index: var(--z-overlay); top: 0; bottom: 0; left: 0; width: min(var(--tiroir-w), 86vw); overflow: hidden;
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  transform: translateX(-100%); visibility: hidden; transition: transform var(--dur-3) var(--ease), visibility 0s var(--dur-3); }
.tiroir.ouvert { transform: none; visibility: visible; box-shadow: var(--shadow-3); transition: transform var(--dur-3) var(--ease-out); }
.tiroir__tete { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); padding: 0 var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2); border-bottom: var(--bw) solid var(--border); }
.tiroir .sidenav__item { width: 100%; font: inherit; font-size: var(--t-menu); font-weight: var(--fw-medium); text-align: left; background: none; border: 0; cursor: pointer; }
.tiroir .sidenav__item:active { background: var(--surface-pressed); }
.tiroir__section { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: var(--bw) solid var(--border); }
.tiroir__titre { padding: 0 var(--sp-3) var(--sp-1); }
.tiroir__bas { display: grid; gap: var(--sp-1); margin-top: auto; padding-top: var(--sp-3); border-top: var(--bw) solid var(--border); }
/* Administration de la plateforme (super-admin : Données, Facturation, Signalements) en bas du menu ; « Réduire le
   menu » reste à part, sous un trait (retour du 4/11) */
.tiroir__plateforme { display: grid; gap: var(--sp-1); }
.tiroir__plateforme:not(:has(> :not(.cache))) { display: none; }
/* En-tête du menu (logo) et bas (Aide, Réduire) toujours en place : seul le corps défile s'il ne tient pas */
.tiroir__tete, .tiroir__bas { flex: none; }
.tiroir__corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-1);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tiroir .sidenav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidenav__item > .tag { margin-left: auto; }
#voile-cadre { z-index: var(--z-overlay); }

/* Menu du profil : sous la photo, en haut à droite */
.menu--profil { position: fixed; z-index: var(--z-palette); top: calc(var(--appbar-h) + env(safe-area-inset-top) + var(--sp-1)); right: var(--sp-2);
  width: min(var(--form-w), calc(100vw - var(--sp-4))); min-width: 0; }
.menu__qui { display: grid; min-width: 0; }
.menu__qui b { font-weight: var(--fw-semibold); }
.menu__theme { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--touch); padding: 0 var(--sp-3); }
.menu__theme-l { display: inline-flex; align-items: center; gap: var(--sp-3); }
.menu__theme-l .ico { color: var(--ink-2); }
.menu__theme .segmented button { min-height: var(--chip-h); min-width: var(--touch); justify-content: center; }

/* Messages et indicateur réseau : sous le bandeau du haut */
body.cadre .message { top: calc(var(--appbar-h) + env(safe-area-inset-top) + var(--sp-2)); }
body.cadre .reseau { top: calc(var(--appbar-h) + env(safe-area-inset-top) + var(--sp-2)); }


/* ── Page de la tournée : résumé repliable, outils collants, une ligne par voie ── */
.ecran-tournee .contenu { gap: var(--sp-2); padding-bottom: calc(var(--ctl-lg) + var(--sp-8)); }
.resume { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.resume__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: var(--touch);
  padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.resume__titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
.resume__titre span { font-size: var(--t-secondaire); color: var(--ink-2); }
.resume.deplie .details { grid-template-rows: 1fr; }
.resume.deplie .restant__chevron, .carte-haut.deplie .restant__chevron { transform: rotate(180deg); }
.resume.deplie .bandeau-compteurs { padding-top: var(--sp-3); }
.barre-progression { display: flex; height: var(--sp-1); margin: var(--sp-2) var(--sp-1) 0; border-radius: var(--radius-full);
  background: var(--surface-2); overflow: hidden; }
.barre-progression i { display: block; height: 100%; }
.liste-outils { position: sticky; top: calc(var(--sp-4) * -1); z-index: var(--z-float); display: flex; gap: var(--sp-2);
  margin: 0 calc(var(--gutter) * -1); padding: var(--sp-2) var(--gutter); background: var(--bg-page); }
.liste-outils .input-wrap { flex: 1 1 0; min-width: 0; }
.liste-outils .input-wrap .input { padding-right: var(--sp-2); font-size: var(--t-bouton-petit); }
.counters .progress .num { white-space: normal; font-family: var(--font-ui); }
.ligne-rue { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--touch); padding: 0 var(--sp-4);
  font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.ligne-rue + .ligne-rue { border-top: var(--bw) solid var(--border); }
.ligne-rue:active { background: var(--surface-pressed); }
.ligne-rue__nom { flex: 1; min-width: 0; font-size: var(--t-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-rue__n { flex: none; font-family: var(--font-data); font-size: var(--t-texte); font-weight: var(--fw-semibold); }
.point-statut { flex: none; width: var(--dot-statut); height: var(--dot-statut); border-radius: var(--radius-full); }
.point-statut--vierge { box-shadow: inset 0 0 0 var(--bw-strong) var(--st-vierge); }
.point-statut--affectee { background: var(--vc, var(--ink-2)); }
.point-statut--faite { background: var(--ok); }
.point-statut--bloquee { background: var(--st-bloquee); }
.point-statut--attente { background: var(--st-pending); }
.pied-flottant { position: absolute; z-index: var(--z-float); left: var(--gutter); right: var(--gutter); bottom: var(--sp-3); }
.pied-flottant .btn { box-shadow: var(--shadow-3); }

/* ── Carte ── */
.contexte__titre h1 { max-width: 100%; white-space: normal; }
.pied-carte > * { min-width: 0; }
/* Calques : bloc attaché, même largeur que les boutons de la carte, mêmes couleurs ; fond actif à la couleur de la charte */
.fonds { display: grid; width: var(--touch); margin-bottom: var(--sp-1); overflow: hidden; background: var(--surface-raised);
  border: var(--bw) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); animation: monter var(--dur-2) var(--ease-out); }
.carte-boutons .fonds .btn--map { width: 100%; height: var(--touch); border: 0; border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; }
.carte-boutons .fonds .btn--map + .btn--map { border-top: var(--bw) solid var(--border); }
.carte-boutons .fonds .btn--map[aria-checked="true"] { background: var(--brand); color: var(--on-brand); }
/* Vendeur choisi : un seul contour à sa couleur, fond légèrement teinté, texte toujours à l'encre (lisible pour tous) */
.vrond[aria-pressed="true"] { padding-right: var(--sp-4); background: var(--surface-2); color: var(--ink);
  box-shadow: inset 0 0 0 var(--bw-strong) var(--vc); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .vrond[aria-pressed="true"] { background: color-mix(in srgb, var(--vc) var(--vc-teinte), var(--surface)); }
}
.vrond[aria-pressed="true"] .vrond__info { display: block; }
.vrond[aria-pressed="true"] .vrond__charge { color: var(--ink-2); }

/* ── Fenêtres : contenu en colonne, chaque bloc à sa hauteur (jamais étiré quand la fenêtre grandit) ── */
#fiche-contenu { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
#fiche-contenu > * { flex: none; margin: 0; }
/* Barre collée en bas d'une fenêtre : de bord à bord, ses boutons alignés sur le contenu (la règle ci-dessus lui ôtait
   ses marges : boutons en retrait de 16 px) */
#fiche-contenu > .barre-actions { margin: auto calc(var(--sp-4) * -1) calc((var(--sp-6) + env(safe-area-inset-bottom)) * -1); }
.fiche .categorie, .fiche .lien-discret { align-self: flex-start; }
/* Titre et croix sur la même ligne, à la même hauteur (fenêtre de carte : sous la poignée ; page : en haut) */
.fermer { top: var(--sp-6); right: var(--sp-3); }
.fiche--page .fermer { top: calc(var(--sp-4) + env(safe-area-inset-top)); }
.fiche--page #fiche-contenu { padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); }
.fiche-outils { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fiche-outils .btn { flex: 1 1 auto; min-height: var(--touch); padding: var(--sp-2) var(--sp-3); font-size: var(--t-bouton-petit); }

/* ── Fiche d'une adresse : faits en lignes, sources, barre d'icônes collée en bas ── */
.fait { align-items: flex-start; }
.fait > .ico { flex: none; margin-top: var(--bw-strong); color: var(--ink-3); }
.fait__valeur { font-size: var(--t-texte); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.fiche .list .row > .ico { flex: none; color: var(--ink-3); }
.infos--sources > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.barre-actions { position: sticky; bottom: calc((var(--sp-6) + env(safe-area-inset-bottom)) * -1); z-index: 1; display: flex; gap: var(--sp-2);
  margin: auto calc(var(--sp-4) * -1) calc((var(--sp-6) + env(safe-area-inset-bottom)) * -1);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: var(--bw) solid var(--border); }
.barre-actions .btn { flex: 1 1 0; min-width: 0; }
/* ══ Série 6 (2/11) : cartes de tournées, en-tête de la tournée, chargement, Mes rues, nouvelle tournée, messages ══ */

/* Écrans : apparition en fondu (la carte a le sien) */
body.cadre .ecran:not(.cache):not(.ecran-carte) { animation: fondu var(--dur-2) var(--ease-out); }

/* Marque d'un produit : logo de la base selon la place, sinon pastille à sa couleur et son nom */
.marque-produit { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; max-width: 100%; padding: var(--sp-1) var(--sp-2);
  font-size: var(--t-legende); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--ink-2); white-space: nowrap;
  background: var(--surface-2); border-radius: var(--radius-sm); }
.marque-produit__pastille { flex: none; width: var(--dot); height: var(--dot); border-radius: var(--bw-strong); background: var(--pc); }
.marque-produit--seule { padding: 0; background: none; }
.marque-produit--v { flex-direction: column; gap: var(--sp-1); padding: 0; background: none; color: var(--ink); white-space: normal; text-align: center; }
/* Logo d'un produit : le SVG tel quel, sur fond transparent ; en sombre, sa version sombre, ou blanc s'il se lit mal */
.logo-produit { display: block; flex: none; object-fit: contain; }
.logo--sombre { display: none; }
[data-theme="dark"] .logo--clair { display: none; }
[data-theme="dark"] .logo--sombre { display: block; }
.logo-produit--h { height: var(--logo-h); width: auto; max-width: 50%; }
.logo-produit--v { height: var(--logo-v); width: auto; max-width: 100%; }
/* Picto d'un produit devant un texte : le même carré de 20 px pour tous les produits, le logo centré dedans (quelle
   que soit sa forme), une petite marge, puis le texte — les produits s'alignent partout de la même façon */
.logo-produit--picto { width: var(--picto); height: var(--picto); object-fit: contain; object-position: center; }
.logo-produit--picto-l { width: calc(var(--picto) * 2); height: calc(var(--picto) * 2); }

/* Cartes des tournées : toutes de la même hauteur (ville sur une ligne, zone dessous), grille sur grand écran */
#liste-anciennes, .cartes-tournees, .cartes-produits { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--carte-tournee-min)), 1fr)); }
/* Tournées en cours : un groupe par secteur (Télécom, Énergie…), sous-titre et nombre de tournées */
#liste-tournees { display: grid; gap: var(--sp-6); }
/* Colonnes des tableaux de gestion (PC, 4/11) */
.tableau--utilisateurs { --colonnes: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.8fr); }
.tableau--utilisateurs-plateforme { --colonnes: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.8fr); }
.tableau--societes { --colonnes: minmax(0, 2.2fr) minmax(0, 1.1fr) repeat(3, minmax(0, .9fr)) minmax(0, 1fr); }
#filtres-equipes #btn-nouvelle-equipe { margin-left: auto; }  /* pas de recherche : le bouton de création reste à droite */
.tableau--equipes { --colonnes: minmax(0, 2fr) minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1fr); }
.tableau--tournees { --colonnes: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .9fr); }
/* Catalogue des produits (4/11) : une carte par produit, côte à côte, comme les cartes des tournées */
.carte-tournee, .carte-produit { display: grid; gap: var(--sp-2); align-content: start; }
.carte-produit__pied { color: var(--ink-2); font-size: var(--t-secondaire); }
.carte-tournee__tete { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.carte-tournee__titres { flex: 1; min-width: 0; display: grid; gap: var(--bw-strong); }
.carte-tournee__ville, .carte-tournee__zone { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-tournee__pied { font-size: var(--t-legende); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-tournee__avance { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--t-secondaire); color: var(--ink-2); }
.carte-tournee__avance b { font-size: var(--t-texte); color: var(--ink); }

/* Page de la tournée : clôture en icône dans l'en-tête */
.btn-cloturer { flex: none; color: var(--ok); }
@media (hover: hover) { .btn-cloturer:hover { border-color: var(--ok); } }

/* Chargement d'une tournée : squelettes à la forme du contenu, puis résumé et liste d'un coup, en fondu */
.ecran-tournee.charge .liste-outils { pointer-events: none; }
.ecran-tournee.charge .liste-outils > * { border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-shine) 50%, var(--skeleton) 100%) 0 0 / 200% 100%;
  animation: luire calc(var(--dur-3) * 6) linear infinite; }
.ecran-tournee.charge .liste-outils > * > * { visibility: hidden; }
.ecran-tournee.prete .resume, .ecran-tournee.prete .liste-voies { animation: fondu var(--dur-3) var(--ease-out); }
.ligne-squelette { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); padding: 0 var(--sp-4); }
.ligne-squelette + .ligne-squelette { border-top: var(--bw) solid var(--border); }
.ligne-squelette .skeleton:nth-child(1) { flex: none; width: var(--dot-statut); height: var(--dot-statut); min-height: 0; border-radius: var(--radius-full); }
.ligne-squelette .skeleton:nth-child(2) { flex: 1; max-width: 60%; }
.ligne-squelette .skeleton:nth-child(3) { flex: none; width: var(--sp-6); margin-left: auto; }
.skeleton--chiffre { display: inline-block; width: var(--sp-10); height: var(--sp-6); vertical-align: middle; }
.skeleton--titre { width: 70%; height: var(--sp-6); }

/* Liste des rues : picto des immeubles (6 logements et plus) devant les logements */
.ligne-rue__imm { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--font-data);
  font-size: var(--t-secondaire); font-weight: var(--fw-semibold); color: var(--ink-2); }
.ligne-rue__imm .ico { width: var(--icon-sm); height: var(--icon-sm); }

/* Nouvelle tournée : produit en tuiles, objectif sur une ligne (bulle d'aide au besoin), résultats en liste */
.champ-groupe { display: grid; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-groupe legend { padding: 0; margin-bottom: var(--sp-2); }
/* Tuiles des produits : à la taille du logo, la coche à une marge fixe à droite */
.tuiles-produit { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tuile-produit { width: auto; max-width: 100%; gap: var(--sp-4); min-height: var(--ctl-lg); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); }
.tuile-produit .logo-produit--h { height: var(--logo-h-tuile); }
.tuile-produit .picto-produit, .tuile-produit .logo-produit--picto { width: var(--picto); height: var(--picto);
  margin-right: calc(var(--sp-2) - var(--sp-4)); }  /* petite marge avant le nom (la coche garde la sienne) */
.tuile-produit__nom { flex: 1; min-width: 0; font-size: var(--t-texte); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile-produit .tile__check { flex: none; width: var(--icon); height: var(--icon); visibility: hidden; }
.tuile-produit .tile__check .ico { width: var(--icon-sm); height: var(--icon-sm); }
.tuile-produit:has(input:checked) { border: var(--bw-strong) solid var(--ink);
  padding: calc(var(--sp-2) - var(--bw)) calc(var(--sp-3) - var(--bw)) calc(var(--sp-2) - var(--bw)) calc(var(--sp-4) - var(--bw)); }
.tuile-produit:has(input:checked) .tile__check { visibility: visible; }
.tuile-produit:has(input:focus-visible) { outline: var(--bw-strong) solid var(--focus); outline-offset: var(--bw-strong); }
.champ-objectif { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.champ-objectif .input { margin-left: auto; width: var(--input-court); text-align: right; }
.champ-objectif .bulle { flex-basis: 100%; }
.btn-aide { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0; color: var(--ink-3);
  background: none; border: 0; border-radius: var(--radius-full); cursor: pointer; }
.btn-aide .ico { width: var(--icon-sm); height: var(--icon-sm); }
.btn-aide[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
.bulle { animation: apparaitre var(--dur-1) var(--ease-out); }
#resultats-communes:empty { display: none; }
.commune-res .row__sub { color: var(--ink-3); }
.commune-res .btn { flex: none; gap: var(--sp-2); min-width: var(--btn-court-w); justify-content: center; }
.commune-res .btn[disabled] { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.choix-zone { display: grid; gap: var(--sp-2); }
.titre-zone { margin: var(--sp-2) 0 0; }

/* Messages temporaires : discrets, translucides, teintés selon le type (vert fait, bleu info, orange alerte, rouge erreur) */
.message { position: fixed; z-index: var(--z-toast); left: var(--gutter); right: var(--gutter); top: calc(var(--sp-3) + env(safe-area-inset-top));
  width: fit-content; max-width: min(calc(100% - var(--gutter) * 2), var(--toast-w)); margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-secondaire); font-weight: var(--fw-medium); line-height: var(--lh-tight); color: var(--ink);
  background: var(--toast-fond); border: var(--bw) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  animation: apparaitre var(--dur-2) var(--ease-out); pointer-events: none; }
.message.ok { --toast-c: var(--ok); } .message.info { --toast-c: var(--info); }
.message.alerte { --toast-c: var(--warn); } .message.erreur { --toast-c: var(--danger); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .message { background: color-mix(in srgb, var(--toast-c, var(--ink)) var(--toast-teinte), var(--toast-fond));
    border-color: color-mix(in srgb, var(--toast-c, var(--ink)) var(--toast-bord), transparent); }
}
.message__icone { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--toast-c, var(--ink-2)); }
.message__texte { flex: 1; min-width: 0; display: grid; gap: var(--bw-strong); }
.message__detail { font-family: var(--font-data); font-size: var(--t-secondaire); font-weight: var(--fw-medium); color: var(--ink-2); }
.message .btn { flex: none; min-height: var(--chip-h); padding: 0 var(--sp-3); font-size: var(--t-bouton-petit); pointer-events: auto;
  color: var(--ink); background: var(--surface); border-color: var(--border-strong); }

/* ══ Série 7 (2/11) : picto des produits, ouverture d'une tournée, colonnes de la liste, Mes rues, bandeau ══ */

/* Picto d'un produit sans logo : carré à sa couleur, ses initiales ; plus grand dans l'angle des cartes */
.picto-produit { flex: none; display: inline-grid; place-items: center; width: var(--picto); height: var(--picto);
  border-radius: var(--radius-sm); background: var(--pc); color: var(--pc-on); font-family: var(--font-data);
  font-size: var(--t-legende); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
/* En-tête d'une carte de tournée ou d'un groupe de Mes rues : une tuile discrète de la hauteur des deux lignes (ville,
   zone), centrée sur elles, le logo du produit centré dedans à un peu plus de la moitié de sa taille — la même pour
   tous les produits, comme une icône d'appli : en clair, un simple contour gris clair sur le fond de la carte (aucun
   fond gris sous le logo, ses couleurs restent exactes) ; en sombre, une tuile gris foncé */
.picto-tuile { display: grid; place-items: center; flex: none; width: var(--picto-titre); height: var(--picto-titre);
  border: var(--bw) solid var(--border); border-radius: var(--radius-md); background: none; }
[data-theme="dark"] .picto-tuile { background: var(--surface-2); border-color: transparent; }
.groupe-rues__tete .picto-tuile { width: var(--picto-titre-l); height: var(--picto-titre-l); }
.picto-tuile .logo-produit--picto { width: calc(var(--picto-titre) * var(--picto-dans-tuile)); height: calc(var(--picto-titre) * var(--picto-dans-tuile)); }
.picto-tuile .picto-produit { width: 100%; height: 100%; border-radius: inherit; }
/* Logo d'une intégration dans sa tuile (console › Intégrations, 5/11) ; aperçu du logo sombre sur une tuile sombre */
.picto-tuile .logo-marque { width: calc(var(--picto-titre) * var(--picto-dans-tuile)); height: calc(var(--picto-titre) * var(--picto-dans-tuile)); }
.picto-tuile.t-dark { background: var(--surface-2); border-color: transparent; color: var(--ink); }
/* Centrage optique : la ville en gras pèse en haut du bloc, il descend un peu face à la tuile */
.carte-tournee__tete .carte-tournee__titres, .groupe-rues__tete .groupe-rues__titres { transform: translateY(var(--titre-optique)); }
.carte-tournee__tete .carte-tournee__zone, .groupe-rues__zone { line-height: var(--lh-body); }

/* Ouverture depuis une carte ou un bouton : l'écran reste, le déclencheur montre la lecture (jauge qui défile) */
.carte-tournee[aria-busy="true"] { cursor: progress; border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.carte-tournee[aria-busy="true"] .jauge > i { width: 35% !important; background: var(--ink-3);
  animation: lecture calc(var(--dur-3) * 4) var(--ease) infinite; }
@keyframes lecture { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .ico { animation: dots calc(var(--dur-3) * 4) var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .carte-tournee[aria-busy="true"] .jauge > i, .btn[aria-busy="true"] .ico { animation: none; } }

/* Liste des rues : colonnes alignées (point, nom, immeubles, logements) ; type de voie en retrait. Largeur des deux
   colonnes de chiffres = celle du plus grand nombre de la tournée (--n-log, --n-imm, posés par l'appli) : immeubles
   collés aux logements, le nom garde toute la place restante */
.liste-voies { --l-log: calc(var(--n-log, 4) * var(--t-texte) * var(--chasse-data) + var(--bw-strong));
  --l-imm: calc(var(--icon-sm) + var(--sp-1) + var(--n-imm, 2) * var(--t-secondaire) * var(--chasse-data)); }
.ligne-rue { display: grid; grid-template-columns: var(--dot-statut) minmax(0, 1fr) var(--l-imm) var(--l-log);
  column-gap: var(--sp-2); padding: 0 var(--sp-3); }
.ligne-rue__nom { padding: 0 var(--sp-2) 0 var(--sp-1); }
.ligne-rue__imm { justify-self: start; }
.ligne-rue__n { justify-self: end; text-align: right; }
.liste-voies.sans-immeubles .ligne-rue { grid-template-columns: var(--dot-statut) minmax(0, 1fr) var(--l-log); }
.liste-voies.sans-immeubles .ligne-rue__imm { display: none; }
.voie__type { color: var(--ink-3); }

/* Mes rues : un groupe par tournée (ville, zone, picto) ; une ligne par rue à la hauteur des boutons (⋯, terminée) */
#liste-mes-rues { display: grid; gap: var(--sp-6); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--carte-tournee-min)), 1fr)); }
.groupe-rues { gap: var(--sp-2); }
.ma-rue { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4); }
.ma-rue + .ma-rue { border-top: var(--bw) solid var(--border); }
.ma-rue__tete { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); align-self: stretch; padding: 0 var(--sp-1) 0 0;
  font: inherit; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.ma-rue__textes { display: grid; gap: var(--bw-strong); min-width: 0; }
.ma-rue__nom { min-width: 0; font-size: var(--t-texte); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-rue__nom .voie__type { font-weight: var(--fw-regular); }
.ma-rue__infos { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: var(--t-secondaire); line-height: var(--lh-tight); color: var(--ink-2); }
.ma-rue__infos > span { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); }
.ma-rue__infos > span + span::before { content: "·"; color: var(--ink-3); }
.ma-rue__infos .ico { width: var(--icon-sm); height: var(--icon-sm); }
.ma-rue__infos b { color: var(--ink); }
.ma-rue__ok { color: var(--ok); }
.ma-rue__attente { color: var(--offline); }
.ma-rue > .btn { flex: none; }
.ma-rue .btn-terminee .ico { color: var(--ok); }
.ma-rue .btn-terminee[disabled] { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.menu--contexte { position: fixed; z-index: var(--z-palette); min-width: 0; max-height: calc(100dvh - var(--sp-2));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* Carte : bandeau des vendeurs à la hauteur des deux boutons voisins ; chaque vendeur = son rond et sa charge dessous,
   choisi = prénom, charge et × (toucher pour terminer) ; la rangée laisse toujours la place aux contours */
.pied-carte { height: calc(var(--touch) * 2 + var(--sp-2)); align-content: center; padding: 0; }
.vtiles-rangee { align-items: flex-start; padding: var(--sp-1) var(--sp-2); }
/* Plus de vendeurs que de place : bords estompés du côté qui défile (masque : seule l'opacité de la couleur compte) */
.vtiles-rangee.deborde-d { --masque: linear-gradient(to right, var(--ink) calc(100% - var(--sp-5)), transparent); }
.vtiles-rangee.deborde-g { --masque: linear-gradient(to right, transparent, var(--ink) var(--sp-5)); }
.vtiles-rangee.deborde-g.deborde-d { --masque: linear-gradient(to right, transparent, var(--ink) var(--sp-5),
  var(--ink) calc(100% - var(--sp-5)), transparent); }
.vtiles-rangee.deborde-g, .vtiles-rangee.deborde-d { -webkit-mask-image: var(--masque); mask-image: var(--masque); }
.vrond { height: auto; gap: var(--sp-2); padding: var(--sp-1); border-radius: var(--radius-md); }
.vrond__col { display: grid; justify-items: center; gap: var(--bw-strong); }
.vrond__mini { font-family: var(--font-data); font-size: var(--t-legende); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--ink-2); }
.vrond[aria-pressed="true"] { padding-right: var(--sp-3); border-radius: var(--radius-full); }
.vrond[aria-pressed="true"] .vrond__mini { display: none; }
.vrond__fin { display: none; flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-3); }
.vrond[aria-pressed="true"] .vrond__fin { display: block; }
.vrond--autres { padding: var(--sp-1); background: none; }
.vrond__plus { display: grid; place-items: center; width: calc(var(--touch) - var(--bw-strong) * 2); height: calc(var(--touch) - var(--bw-strong) * 2);
  border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-2); font-family: var(--font-data); font-size: var(--t-legende); }
.vrond__plus .ico { width: var(--icon-sm); height: var(--icon-sm); }
/* Astuces : petite bulle au premier passage sur un écran (fermée = ne revient plus) ; sur la carte, au-dessus du
   bandeau des vendeurs et de sa largeur */
.astuce { align-items: flex-start; padding: 0 0 0 var(--sp-3); color: var(--ink); font-weight: var(--fw-regular);
  animation: apparaitre var(--dur-2) var(--ease-out); }
.astuce > .ico { margin-top: calc((var(--touch) - var(--icon-sm)) / 2); color: var(--info); }
.astuce p { flex: 1; min-width: 0; margin: 0; padding: calc((var(--touch) - var(--t-secondaire) * var(--lh-body)) / 2) 0; }
.astuce .astuce__fermer { flex: none; background: none; border-color: transparent; color: var(--ink-2); }
.astuce-place:empty { display: none; }
.astuce-carte { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--sp-2)); }
.astuce-carte .astuce { background: var(--surface-raised); border: var(--bw) solid var(--border); box-shadow: var(--shadow-2); }
/* Aide : rubriques d'astuces */
.aide-rubriques { display: grid; gap: var(--sp-5); }
.aide-ligne { align-items: flex-start; min-height: var(--touch); font-size: var(--t-texte); }
.aide-ligne > .ico { flex: none; margin-top: var(--bw-strong); color: var(--info); }




/* ══ Série 8 (2/11) : structure tablette et PC ═══════════════════════════════════════════════════════════════════
   Téléphone (< 768 px) : bandeau du haut, barre du bas, menu qui glisse. Tablette et PC (≥ 768 px) : menu latéral fixe
   à gauche, rétractable (déplié 264 px ; replié 72 px : logo et icônes, info-bulle au survol), état mémorisé ; plus
   de barre du bas ; recherche rapide (Ctrl+K) au milieu du bandeau ; fenêtres en panneau à droite. PC et tablette en
   largeur (≥ 1024 px) : la tournée en deux volets, sa page à gauche et la carte sur le reste. */

/* Menu latéral : groupes à sous-menu (ouverts par défaut, état mémorisé) */
.sidenav__groupe { display: grid; gap: var(--sp-1); }
.sidenav__chevron { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-left: auto; color: var(--ink-3);
  transition: transform var(--dur-2) var(--ease); }
.sidenav__groupe.replie .sidenav__chevron { transform: rotate(-90deg); }
.sidenav__groupe.replie .sidenav__sub { display: none; }
.tiroir .sidenav__sub .sidenav__item { font-size: var(--t-sous-menu); font-weight: var(--fw-regular); }
.tiroir .sidenav__sub .sidenav__item[aria-current="page"] { font-weight: var(--fw-semibold); }
.sidenav__parent--actif { color: var(--ink); }
/* Téléphone : bas du menu vide (« Réduire le menu » sur tablette et PC seulement ; Aide, Mentions et version : menu du profil),
   sauf l'administration de la plateforme du super-admin (Données, Facturation, Signalements, 4/11) */
.sidenav__replier, .appbar__recherche, .tiroir__bas { display: none; }
.tiroir__bas:has(> .tiroir__plateforme > [data-plateforme]:not(.cache)) { display: grid; }
.infobulle { position: fixed; z-index: var(--z-palette); pointer-events: none; }
.infobulle b { font-weight: var(--fw-semibold); }

/* Recherche rapide : palette en haut de l'écran, au-dessus d'un voile */
.palette { position: fixed; inset: 0; z-index: var(--z-palette); display: grid; justify-items: center; align-content: start;
  padding: calc(var(--sp-16) + env(safe-area-inset-top)) var(--gutter) var(--gutter); background: var(--scrim);
  animation: fondu var(--dur-2) var(--ease-out); }
.palette .cmdk { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 100%; }
.cmdk__search .ico { flex: none; color: var(--ink-3); }
.cmdk__list { max-height: calc(var(--sp-16) * 6); overflow-y: auto; overscroll-behavior: contain; }
.cmdk__item { width: 100%; font: inherit; font-size: var(--t-sous-menu); text-align: left; background: none; border: 0; cursor: pointer; }
.cmdk__item .ico { flex: none; color: var(--ink-2); }
.cmdk__texte { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__item .faint { color: var(--ink-3); white-space: nowrap; }
.cmdk__vide { margin: 0; padding: var(--sp-6) var(--sp-4); text-align: center; font-size: var(--t-legende); color: var(--ink-3); }
.cmdk__foot .kbd + .kbd { margin-left: var(--sp-1); }
@media (hover: none) { .appbar__recherche .kbd, .cmdk__search .kbd, .cmdk__foot { display: none; } }

@media (min-width: 768px) {
  body { --nav-w: var(--sidebar-w); }
  body.menu-replie { --nav-w: var(--sidebar-w-mini); }
  body.cadre .tiroir { top: 0; width: var(--nav-w); padding-top: 0; transform: none; visibility: visible; box-shadow: none;
    z-index: var(--z-nav); overflow-x: hidden; transition: width var(--dur-3) var(--ease); }
  body.cadre #tabbar, body.cadre #btn-menu, body.cadre .appbar__logo { display: none; }
  body.cadre .appbar { left: var(--nav-w); padding-left: var(--sp-3); padding-right: var(--sp-3); transition: left var(--dur-3) var(--ease); }
  body.cadre .ecran:not(.ecran-carte) { left: var(--nav-w); bottom: 0; transition: left var(--dur-3) var(--ease); }
  .tiroir__tete { height: calc(var(--appbar-h) + env(safe-area-inset-top)); min-height: 0; margin: 0 0 var(--sp-3);
    padding: env(safe-area-inset-top) var(--sp-2) 0; }
  .sidenav__replier { display: flex; }
  .tiroir__bas { display: grid; }
  .tiroir__plateforme:has(> :not(.cache)) { padding-bottom: var(--sp-3); margin-bottom: var(--sp-2);
    border-bottom: var(--bw) solid var(--border); }
  .contenu { padding: var(--sp-6) var(--gutter-pc); }
  .liste-outils { margin: 0 calc(var(--gutter-pc) * -1); padding: var(--sp-2) var(--gutter-pc); }
  body.cadre .message { left: calc(var(--nav-w) + var(--gutter)); }
  .pied-flottant { left: auto; right: var(--gutter-pc); width: var(--form-w); }
  /* Recherche rapide : champ au milieu du bandeau (raccourci affiché s'il y a une souris) */
  .appbar__recherche { grid-column: 2; grid-row: 1; justify-self: center; display: flex; align-items: center; gap: var(--sp-2);
    width: min(100%, var(--cmdk-w)); min-height: var(--chip-h); padding: 0 var(--sp-2) 0 var(--sp-3); font: inherit;
    font-size: var(--t-secondaire); color: var(--ink-3); text-align: left; background: var(--surface-2); border: var(--bw) solid var(--border);
    border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-1) var(--ease); }
  .appbar__recherche-texte { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Menu replié : logo et icônes centrés, sans libellés ; un groupe s'ouvre à côté de son icône */
  /* Menu replié : les icônes ne bougent pas (centrées dans les 72 px dans les deux états), les libellés s'effacent
     pendant que la colonne se rétrécit, les sous-menus se replient en douceur */
  .tiroir .sidenav__item { padding-left: calc((var(--sidebar-w-mini) - var(--icon)) / 2 - var(--sp-3)); }
  .tiroir__tete { padding-left: calc((var(--sidebar-w-mini) - var(--avatar)) / 2 - var(--sp-3)); }
  .tiroir .sidenav__label, .tiroir .tag, .tiroir .badge, .tiroir .sidenav__chevron, .tiroir__tete .marque__nom {
    transition: opacity var(--dur-2) var(--ease); }
  body.menu-replie .tiroir .sidenav__label, body.menu-replie .tiroir .tag, body.menu-replie .tiroir .badge,
  body.menu-replie .tiroir .sidenav__chevron,
  body.menu-replie .tiroir__tete .marque__nom { opacity: 0; }
  body.menu-replie .tiroir .sidenav__sub { grid-template-rows: 0fr; }
  /* Fenêtres : panneau à droite, sur toute la hauteur (sous le bandeau dans le cadre) */
  .fiche, .fiche--carte, .fiche--plein, .fiche--page { top: 0; bottom: 0; left: auto; right: 0; width: var(--form-w); height: auto;
    border: 0; border-left: var(--bw) solid var(--border); border-radius: 0; box-shadow: var(--shadow-3);
    animation: entrer-droite var(--dur-3) var(--ease-out); }
  body.cadre .fiche { top: calc(var(--appbar-h) + env(safe-area-inset-top)); }
  .fiche__poignee { display: none; }
  .fiche #fiche-contenu { padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); }
  .fiche .fermer { top: calc(var(--sp-4) + env(safe-area-inset-top)); }
  body.cadre .fiche #fiche-contenu { padding-top: var(--sp-4); }
  body.cadre .fiche .fermer { top: var(--sp-4); }
  body.fiche-ouverte .carte-boutons { right: calc(var(--form-w) + var(--marge-carte)); }
  /* Carte seule (tablette en hauteur) : en-tête à la largeur d'un panneau */
  .carte-haut { right: auto; width: var(--panel-w); }
}
@media (min-width: 768px) and (hover: hover) {
  .appbar__recherche:hover { border-color: var(--border-strong); }
}
@keyframes entrer-droite { from { transform: translateX(var(--sp-8)); opacity: 0; } }

@media (min-width: 1024px) {
  /* La tournée en deux volets : sa page à gauche (largeur d'un panneau), la carte sur le reste, sous le bandeau. La
     carte garde cette place même cachée : elle reste cadrée d'avance */
  #ecran-carte { top: calc(var(--appbar-h) + env(safe-area-inset-top)); left: calc(var(--nav-w-carte) + var(--panel-w)); }
  body.duo #ecran-liste { right: auto; width: var(--panel-w); border-right: var(--bw) solid var(--border); }
  body.duo #ecran-liste .contenu { padding: var(--sp-4) var(--gutter) var(--sp-6); }
  body.duo .liste-outils { margin: 0 calc(var(--gutter) * -1); padding: var(--sp-2) var(--gutter); }
  body.duo .pied-flottant, body.duo .carte-haut { display: none; }
}
#ecran-carte .zone-carte { transition: opacity var(--dur-3) var(--ease-out); }
#ecran-carte.prepa .zone-carte { opacity: 0; transition: none; }
#ecran-carte.prepa .pied-carte, #ecran-carte.prepa .carte-boutons { visibility: hidden; }
/* Rue choisie (sa fiche est ouverte) : aussi en avant dans la liste, trait à la couleur de la charte */
.ligne-rue--choisie { background: var(--surface-2); box-shadow: inset var(--gauge-h) 0 0 var(--brand); }
/* Recherche rapide : le champ n'a pas de cadre propre (la palette entière est le champ) */
.cmdk__search input:focus, .cmdk__search input:focus-visible { outline: none; box-shadow: none; }
.cmdk .kbd { display: inline-block; min-width: var(--icon); text-align: center; }
@media (min-width: 768px) {
  body.fiche-ouverte .pied-carte { max-width: calc(100% - var(--form-w) - var(--marge-carte) * 2); }
}
/* Menu latéral : étiquette « bientôt » resserrée, le libellé garde sa place */
.tiroir .tag { padding-inline: var(--sp-1); }
/* Pastille d'un nombre à traiter (signalements nouveaux) : à droite du libellé, avant le chevron */
.tiroir .badge { flex: none; margin-left: auto; }
.tiroir .badge + .sidenav__chevron { margin-left: var(--sp-2); }
@media (min-width: 768px) {
  /* Formulaire et aide : largeur de lecture, alignés à gauche */
  #ecran-nouvelle .contenu > *, #ecran-aide .contenu > * { width: 100%; max-width: var(--lecture-w); }
}
@media (min-width: 768px) {
  /* Fenêtre ouverte à droite : l'en-tête de la carte et les messages restent dans la partie visible */
  body.fiche-ouverte .carte-haut { max-width: calc(100% - var(--form-w) - var(--marge-carte) * 2); }
  body.fiche-ouverte.sur-carte .message { right: calc(var(--form-w) + var(--marge-carte)); }
}

/* Sous-menus : repliés ou dépliés en douceur (hauteur animée) */
.sidenav__sub { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-3) var(--ease); }
.sidenav__sub-in { display: grid; gap: var(--bw-strong); min-height: 0; overflow: hidden; }
.sidenav__groupe.replie .sidenav__sub { display: grid; grid-template-rows: 0fr; }


/* Listes de choix de l'appli (filtres, tri) : bouton qui montre le choix, petit menu coché */
.choix { flex: none; justify-content: flex-start; gap: var(--sp-2); padding: 0 var(--sp-3); font-size: var(--t-bouton-petit); text-align: left; }
.choix .ico { color: var(--ink-3); }
.choix.btn--icon .ico { color: var(--ink); }
.choix__texte { white-space: nowrap; }
.menu__libelle { flex: 1; min-width: 0; }
.menu__item[aria-checked="true"] { font-weight: var(--fw-semibold); }
.menu__item .menu__coche { flex: none; color: var(--ink); }
.filtres .choix { flex: 1 1 auto; justify-content: space-between; }
.signalement .choix { min-height: var(--chip-h); }

/* Fenêtre de confirmation : boîte centrée sur un voile ; titre, texte, boutons à droite (côte à côte sur téléphone) */
.dialogue { width: min(var(--form-w), calc(100vw - var(--gutter) * 2)); max-width: none; padding: 0; color: var(--ink);
  background: var(--surface-raised); border: var(--bw) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.dialogue[open] { animation: apparaitre var(--dur-2) var(--ease-out); }
.dialogue::backdrop { background: var(--scrim); }
.dialogue__boite { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-5); }
.dialogue__texte { margin: 0; color: var(--ink-2); white-space: pre-line; }
.dialogue__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.dialogue__actions .btn--primary { min-height: var(--ctl); padding: 0 var(--sp-5); font-size: var(--t-bouton); }
@media (max-width: 767px) { .dialogue__actions .btn { flex: 1; } }
.tuile-produit .logo-produit--h { width: auto; max-width: none; }

/* ══ Série 10 (2/11) ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* Tournée en deux volets (PC) : languette au bord de la liste des rues, qui la replie ; repliée, la carte prend toute
   la place et l'en-tête de la tournée revient sur la carte */
.volet-languette { display: none; }
@media (min-width: 1024px) {
  body.duo .volet-languette { position: fixed; z-index: var(--z-float); top: calc(50% + var(--appbar-h) / 2);
    left: calc(var(--nav-w) + var(--panel-w)); display: grid; place-items: center; width: var(--sp-6); height: var(--sp-12); padding: 0;
    color: var(--ink-2); background: var(--surface); border: var(--bw) solid var(--border); border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: var(--shadow-2); transform: translateY(-50%); cursor: pointer;
    transition: left var(--dur-3) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
  body.duo .volet-languette .ico { width: var(--icon-sm); height: var(--icon-sm); }
  body.duo.volet-replie .volet-languette { left: var(--nav-w); }
  body.duo #ecran-liste { transition: left var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
  body.duo.volet-replie #ecran-liste { transform: translateX(-100%); visibility: hidden;
    transition: left var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3); }
  body.carte-pleine #ecran-carte { left: var(--nav-w-carte); }
  /* La page de la tournée passe au-dessus de la carte pendant qu'elle glisse */
  body.duo #ecran-liste { z-index: var(--z-float); }
  /* Panneaux de la carte en fondu pendant que la carte change de place */
  #ecran-carte .pied-carte, #ecran-carte .carte-haut { transition: opacity var(--dur-2) var(--ease); }
  body.carte-bouge #ecran-carte .pied-carte, body.carte-bouge #ecran-carte .carte-haut { opacity: 0; transition: none; }
  body.duo.volet-replie .carte-haut { display: block; }
  body.duo .carte-haut .retour { display: none; }
}
@media (min-width: 1024px) and (hover: hover) {
  body.duo .volet-languette:hover { color: var(--ink); background: var(--surface-hover); }
}

/* Menu latéral replié : le sous-menu se déplie du bord de la colonne, comme le bloc des calques sur la carte —
   attaché (aucun espace ni flèche), même fond que le menu, sa première ligne (le nom du groupe) exactement sur la
   ligne de l'icône, l'icône du groupe en avant tant qu'il est ouvert ; page ouverte = trait à la couleur de la charte */
.menu--droite { min-width: var(--menu-w); background: var(--surface); border-left: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  animation: deplier-droite var(--dur-2) var(--ease-out); transform-origin: left center; }
.menu__titre { display: flex; align-items: center; min-height: var(--touch); padding: 0 var(--sp-3); margin-bottom: var(--sp-1);
  font-size: var(--t-menu); font-weight: var(--fw-semibold); color: var(--ink); border-bottom: var(--bw) solid var(--border); }
.menu--droite .menu__item { position: relative; }
.menu--droite .menu__item[aria-current="true"] { background: var(--surface-2); font-weight: var(--fw-semibold); }
.menu--droite .menu__item[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-2);
  width: var(--gauge-h); border-radius: var(--radius-full); background: var(--brand); }
body.menu-replie .tiroir .menu-source { background: var(--surface-2); color: var(--ink); }
@keyframes deplier-droite { from { opacity: 0; transform: scaleX(.96); } }

/* Fiche d'une rue : statut et vendeurs sur une ligne ; actions côte à côte ; détail en rubriques */
.fiche-statut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fiche-statut .status { padding: 0 var(--sp-2); }
.vendeur-puce { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--sp-8); padding: 0 var(--sp-2) 0 var(--sp-1);
  border-radius: var(--radius-full); background: var(--surface-2); font-size: var(--t-legende); font-weight: var(--fw-semibold); color: var(--ink); }
.vendeur-puce .ico { width: var(--icon-sm); height: var(--icon-sm); }
.vendeur-puce .avatar { margin-right: var(--sp-1); }
.vendeur-puce__ok { color: var(--ok); }
.actions-rue { display: flex; gap: var(--sp-2); }
.actions-rue .btn { flex: 1 1 0; min-width: 0; min-height: var(--ctl); padding: 0 var(--sp-3); font-size: var(--t-bouton); border-radius: var(--radius-md); }
.portes-rue { display: grid; gap: var(--sp-2); }
.portes-rue__total { margin: 0; font-size: var(--t-secondaire); color: var(--ink-2); }
.portes-rue__total b { margin-right: var(--sp-1); font-size: var(--t-chiffre); font-weight: var(--fw-semibold); color: var(--ink); }
.portes-rue__total span { color: var(--ink-3); }
.cats-rue { display: grid; }
.cat-rue { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); font-size: var(--t-texte); }
.cat-rue + .cat-rue { border-top: var(--bw) solid var(--border); }
.cat-rue i, .porte-num i, .pastille-cat { flex: none; width: var(--sp-3); height: var(--sp-3); border-radius: var(--radius-full); background: var(--cc); }
.cat-rue__nom { flex: 1; min-width: 0; }
.cat-rue__nom small { margin-left: var(--sp-2); font-size: var(--t-legende); color: var(--ink-3); }
.cat-rue b { font-size: var(--t-texte); font-weight: var(--fw-semibold); }
.cat-rue--non { color: var(--ink-2); }
.cote-rue { display: grid; gap: var(--sp-2); }
.portes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--porte-num-min), 1fr)); gap: var(--sp-1); }
.porte-num { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; min-height: var(--touch); padding: 0 var(--sp-2);
  font: inherit; color: var(--ink); text-align: left; background: var(--surface); border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.porte-num i { width: var(--sp-2); height: var(--sp-2); }
.porte-num__n { min-width: 0; font-family: var(--font-data); font-size: var(--t-secondaire); font-weight: var(--fw-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.porte-num__log { display: inline-flex; align-items: center; gap: var(--bw-strong); margin-left: auto; font-family: var(--font-data);
  font-size: var(--t-secondaire); color: var(--ink-3); white-space: nowrap; }
.porte-num__log .ico { width: calc(var(--icon-sm) * .75); height: calc(var(--icon-sm) * .75); }
.porte-num--immeuble { background: var(--info-bg); border-color: transparent; }
.porte-num--immeuble .porte-num__log { color: var(--info); font-weight: var(--fw-semibold); }
.porte-num--non .porte-num__n { color: var(--ink-3); }
.porte-num:active { background: var(--surface-pressed); }
@media (hover: hover) { .porte-num:hover { border-color: var(--border-strong); } }
.cote-rue .list .row { gap: var(--sp-3); }

/* Tournée déjà ouverte : la tournée existante en carte, « Rejoindre » en bouton principal ; créer quand même en petit,
   en rouge (déconseillé) */
.fiche-texte { margin: 0; font-size: var(--t-texte); color: var(--ink-2); }
.tournee-existante { display: grid; gap: var(--sp-3); }
.tournee-existante .carte-tournee__tete { margin: 0; }
.tournee-existante__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0; font-size: var(--t-secondaire); color: var(--ink-2); }
.tournee-existante__meta .ico, .tournee-existante__meta .num { color: var(--ink-3); }
/* « Rejoindre » et « Créer quand même » : même largeur et même hauteur (44 px, texte 15 px, retour du 3/11) */
.fiche .tournee-existante .btn--primary { min-height: var(--ctl); font-size: var(--t-bouton); }
.quand-meme { display: grid; gap: var(--bw-strong); }
.quand-meme .lien-discret { display: inline-flex; align-items: center; gap: var(--sp-2); }
.quand-meme .ligne { color: var(--ink-3); }

/* Aide : une rubrique = son picto (tuile à la couleur de la société) et son titre ; chaque astuce avec son picto et les
   boutons de l'appli dessinés dans le texte (aussi dans les bulles d'astuce) */
.aide-rubrique__titre { align-items: center; gap: var(--sp-3); }
.aide-rubrique__picto { display: grid; place-items: center; flex: none; width: var(--avatar); height: var(--avatar); border-radius: var(--radius-md);
  background: var(--brand); color: var(--on-brand); }
.aide-rubrique__picto .ico { width: var(--icon-sm); height: var(--icon-sm); }
.aide-ligne { gap: var(--sp-3); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.aide-ligne__picto { display: grid; place-items: center; flex: none; width: var(--avatar); height: var(--avatar); border-radius: var(--radius-full);
  background: var(--info-bg); color: var(--info); }
.aide-ligne__picto .ico { width: var(--icon-sm); height: var(--icon-sm); }
.aide-ligne .row__main { display: block; margin: 0; align-self: center; line-height: var(--lh-body); }
.touche { display: inline-grid; place-items: center; width: var(--sp-6); height: var(--sp-6); margin: 0 var(--bw-strong); vertical-align: middle;
  color: var(--ink); background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-sm); }
.touche .ico { width: var(--icon-sm); height: var(--icon-sm); }
.touche--principal { color: var(--on-brand); background: var(--brand); border-color: var(--brand); box-shadow: none; }
.astuce .touche { width: var(--sp-5); height: var(--sp-5); }
.astuce .touche .ico { width: calc(var(--icon-sm) * .75); height: calc(var(--icon-sm) * .75); }

/* Tournée en deux volets, liste dépliée : une fiche (rue, adresse) prend la place de la liste, la carte garde toute sa
   largeur ; liste repliée : la fiche s'ouvre à droite, comme ailleurs */
@media (min-width: 1024px) {
  body.duo:not(.volet-replie) .fiche { left: var(--nav-w); right: auto; width: var(--panel-w); border-left: 0;
    border-right: var(--bw) solid var(--border); box-shadow: none; animation: fondu var(--dur-2) var(--ease-out); }
  body.duo:not(.volet-replie).fiche-ouverte .carte-boutons { right: var(--marge-carte); }
  body.duo:not(.volet-replie).fiche-ouverte .pied-carte { max-width: calc(100% - var(--marge-carte) * 3 - var(--touch)); }
  body.duo:not(.volet-replie).fiche-ouverte .volet-languette { display: none; }
}

/* Ajouter un vendeur : bouton « ajouter » au bout du bandeau, ligne au bout de « Ou affecter à », résultats */
.vrond--autres .vrond__plus { color: var(--ink-2); }
.row--ajouter .row__picto { display: grid; place-items: center; flex: none; width: var(--avatar); height: var(--avatar);
  border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-2); }
.row--ajouter .row__picto .ico { width: var(--icon-sm); height: var(--icon-sm); }
.row--ajouter .row__titre { font-weight: var(--fw-semibold); }
.vendeur-trouve .btn { flex: none; }

/* PC : place de la carte selon le menu (replié ou non), changée d'un coup par l'appli (placerCarte) */
@media (min-width: 768px) {
  body { --nav-w-carte: var(--sidebar-w); }
  body.carte-menu-replie { --nav-w-carte: var(--sidebar-w-mini); }
}
/* Tournée déjà ouverte : « Créer quand même » en bouton d'avertissement de la charte, de la taille de « Rejoindre »
   (décision du 3/11) */
.quand-meme { gap: var(--sp-2); }
.quand-meme .btn { min-height: var(--ctl); font-size: var(--t-bouton); }

/* Où l'on est dans le menu (2/11, série 11) : le groupe de la page ouverte (Tournées, Administration) garde toujours
   le trait à la couleur de la charte, menu déplié ou replié ; la page elle-même, dans son sous-menu (ou le sous-menu
   ouvert à côté du menu replié), un point discret de la même couleur */
.tiroir .sidenav__parent--actif { color: var(--ink); font-weight: var(--fw-semibold); }
.tiroir .sidenav__parent--actif::before { content: ""; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-2);
  width: var(--gauge-h); border-radius: var(--radius-full); background: var(--brand); }
body.menu-replie .tiroir .sidenav__parent--actif { background: var(--surface-2); }
.tiroir .sidenav__sub .sidenav__item[aria-current="page"] { background: none; }
.tiroir .sidenav__sub .sidenav__item[aria-current="page"]::before, .menu--droite .menu__item[aria-current="true"]::before {
  top: 50%; bottom: auto; left: var(--sp-1); width: var(--point-menu); height: var(--point-menu); margin-top: calc(var(--point-menu) / -2);
  border-radius: var(--radius-full); background: var(--brand); }
.menu--droite .menu__item[aria-current="true"] { background: none; }
@media (hover: hover) {
  .tiroir .sidenav__sub .sidenav__item[aria-current="page"]:hover, .menu--droite .menu__item[aria-current="true"]:hover {
    background: var(--surface-hover); }
}
/* Paramètres société (3/11, revu) : une carte par rubrique, à la largeur de lecture sur tablette et PC ; identité en
   paires libellé / valeur ; champ et bouton sur une ligne ; logo, couleur et police sur une ligne (PC) ; sources
   côte à côte (logo de la marque, nom, étiquette « bientôt ») */
@media (min-width: 768px) { #ecran-parametres .contenu > * { width: 100%; max-width: var(--lecture-w); } }
/* Paramètres société et fiche d'une société (4/11, retour de Jean-Lou) : rubriques espacées, onglets (choix segmenté
   pleine largeur, défilant sur un téléphone étroit), une rubrique à la fois */
.onglets-parametres { display: flex; max-width: 100%; overflow-x: auto; }
.onglets-parametres button { flex: 1 0 auto; justify-content: center; }
@media (max-width: 767px) { .onglets-parametres button { padding: 0 var(--sp-2); } }
#ecran-parametres .section[data-onglet]:not(.onglet-actif) { display: none; }
/* Console de la plateforme (super-admin, 3/11) : pas de barre du bas (pas de terrain) ; le menu ☰ suffit sur
   téléphone ; listes à la largeur de lecture sur PC ; filtre par société en tête */
body.cadre.plateforme #tabbar { display: none; }
body.cadre.plateforme .ecran:not(.ecran-carte) { bottom: env(safe-area-inset-bottom); }
.plateforme-colonne { display: grid; gap: var(--sp-6); }
/* Choix de la société : à sa largeur, jamais toute la ligne (règle de largeur des champs) */
.filtres[data-filtre-societe] .choix { flex: none; }
/* Listes et pages de gestion (règle du 4/11) : jamais plus larges que --gestion-w sur grand écran, alignées à gauche
   avec le titre ; la carte et la liste des tournées du terrain gardent toute la largeur */
@media (min-width: 768px) {
  #ecran-plateforme .contenu > *, #ecran-tournees-plateforme .contenu > *, #ecran-donnees .contenu > *,
  #ecran-facturation .contenu > *, #ecran-societes .contenu > *, #ecran-produits .contenu > *,
  #ecran-utilisateurs .contenu > *, #ecran-signalements .contenu > *, #ecran-anciennes .contenu > *,
  #ecran-mes-rues .contenu > *, #ecran-equipes .contenu > * { width: 100%; max-width: var(--gestion-w); }
  #ecran-compte .contenu > *, #ecran-reglages .contenu > * { width: 100%; max-width: var(--lecture-w); }
}
.parametres-rubrique { display: grid; gap: var(--sp-3); }
/* Contacts de la société (3/11) : signataire et contact facturation côte à côte sur PC, empilés sur téléphone */
.contacts-societe { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .contacts-societe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-societe { display: grid; gap: var(--sp-2); align-content: start; }
.contact-societe > h3 { margin: 0; }
/* Champs regroupés dans une fenêtre (tarif particulier, adresse de facturation) : même écart que le formulaire */
.champ-tarif, .champ-adresse { display: grid; gap: var(--sp-3); }
.champ-tarif.cache, .champ-adresse.cache { display: none; }
/* Paliers d'un tarif, en tableau : tranche, limite haute, prix HT par utilisateur, retirer (le dernier : « au-delà »,
   sans limite) ; colonnes alignées d'une ligne à l'autre, à la largeur de la fenêtre */
.paliers { display: grid; gap: var(--sp-2); }
.paliers:empty { display: none; }
.palier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) var(--ctl); align-items: center; gap: var(--sp-2); }
.palier--dernier .palier__borne { grid-column: span 2; }
.palier--titres { align-items: end; }
.palier__borne { color: var(--ink-2); font-size: var(--t-secondaire); }
.palier .input { width: 100%; min-width: 0; }
.filtres[data-filtre-mois] .choix { flex: none; }
.parametres-rubrique .field p { margin: 0; }
.parametres-rubrique > h3 { margin: 0; }
#siren-resultat:not(:empty) { display: grid; gap: var(--sp-3); }
#siren-resultat:empty, #siren-autre:empty { display: none; }
.ligne-saisie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* Mon compte : la photo en grand, le nom et « Changer ma photo » à côté (4/11) */
.ligne-saisie--photo { gap: var(--sp-4); }
.compte-qui { display: grid; justify-items: start; gap: var(--sp-2); }
/* Photos à valider : la photo actuelle (pastille), la proposée en grand, Refuser / Valider */
.photo-a-valider { display: grid; gap: var(--sp-3); }
.photo-a-valider__qui { display: grid; min-width: 0; }
.photo-a-valider .fiche-outils { justify-content: flex-end; }
.ligne-saisie > .input { flex: 1 1 0; width: auto; min-width: 0; }
.ligne-source, .ligne-offre, .logo-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ligne-source > .t-legende { margin-right: auto; }
.apercu-charte .btn { transition: none; }
#liste-produits { display: grid; gap: var(--sp-4); }
.actions-rubrique { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.logo-apercu { display: inline-grid; place-items: center; width: calc(var(--ctl) * 3); height: var(--ctl); padding: var(--sp-1) var(--sp-2);
  border: var(--bw) solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.logo-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.charte-reglage { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .charte-reglage { grid-template-columns: repeat(3, auto); justify-content: start; align-items: start; } }
/* L'aide du logo suit la largeur de sa colonne (logo et bouton), sans repousser la couleur et la police */
.charte-reglage .field__help { contain: inline-size; }
.sources { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.couleur-saisie { display: flex; gap: var(--sp-2); align-items: center; }
.couleur-saisie input[type="color"] { flex: none; width: var(--ctl); height: var(--ctl); padding: 0; border: var(--bw) solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); appearance: none; overflow: hidden; cursor: pointer; }
/* La couleur remplit toute la case, sans marge intérieure (retour du 4/11) */
.couleur-saisie input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.couleur-saisie input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
.couleur-saisie input[type="color"]::-moz-color-swatch { border: 0; border-radius: 0; }
.apercu-charte { display: grid; gap: var(--sp-2); justify-items: start; font-family: var(--font-ui); }
.creation-produit { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
/* Marque blanche : le logo du client seul dans l'en-tête, sans « propulsé par » */
.marque-blanche .appbar__logo .marque, .marque-blanche .tiroir__tete .marque, .marque-blanche .menu__propulse { display: none; }
.integration { display: grid; gap: var(--sp-2); }
.integration__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.integration__tete > .btn { margin-left: auto; }
.lien-externe { justify-self: start; padding-inline: 0; }
/* Tournée déjà ouverte : « Créer quand même » de la largeur exacte de « Rejoindre » (dans la carte) */
.quand-meme { padding: 0 calc(var(--sp-4) + var(--bw)); }

/* ══ Série 12 (2/11) ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* Menu latéral (tablette et PC) : libellés un peu plus petits (14 px), par les jetons --t-menu et --t-sous-menu */
/* Bulles d'astuce : lignes régulières — interligne de lecture, et les petites touches dessinées dans le texte
   n'agrandissent plus leur ligne (marges négatives), le texte reste centré dans la bulle */

.astuce .touche { margin-block: calc(var(--sp-1) * -1); }