/* Feuille de bureau. L'adaptation aux petits écrans vit dans `mobile.css`,
   chargée APRÈS celle-ci (voir `base.html`) : une requête @media n'ajoute
   aucune spécificité, donc une règle écrite ici plus bas dans le fichier
   l'écraserait à spécificité égale. En feuille séparée, l'ordre de cascade
   tient à l'ordre des <link> — ce fichier reste le point d'ajout commun,
   sans précaution particulière à retenir. */

/* --pad-x / --marge-v : respiration horizontale et verticale du contenu.
   Déclarées en variables pour que l'adaptation mobile (en fin de fichier)
   les resserre sans avoir à redéclarer les règles qui s'en servent. */
:root { --wine: #6b1f2a; --ink: #2b2b2b; --bg: #faf8f5; --pad-x: 24px; --marge-v: 32px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
.topbar { background: var(--wine); color: #fff; padding: 14px var(--pad-x); display: flex; align-items: baseline; gap: 12px; }
.brand { font-weight: 700; letter-spacing: 1px; }
.sub { opacity: .8; font-size: .9rem; }
.content { max-width: 900px; margin: var(--marge-v) auto; padding: 0 var(--pad-x); }
h1 { color: var(--wine); }
.cards { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.card { background: #fff; border: 1px solid #e7e0d8; border-radius: 10px; padding: 18px 24px; min-width: 130px; text-align: center; }
.num { display: block; font-size: 2rem; font-weight: 700; color: var(--wine); }
.lbl { color: #7a7068; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; }
.foot { text-align: center; color: #9a9087; font-size: .8rem; padding: 24px; }

/* Navigation */
.nav { margin-left: auto; display: flex; gap: 18px; align-items: baseline; }
.nav a { color: #fff; opacity: .85; text-decoration: none; font-size: .9rem; }
.nav a:hover { opacity: 1; text-decoration: underline; }
.nav .who { color: #f1e3d0; font-size: .82rem; opacity: .9; }
/* Bascule du menu escamotable : sans objet au-dessus de 900 px, où les liens
   tiennent sur une ligne. `display: none` (et non un masquage visuel) pour
   sortir la case à cocher de l'ordre de tabulation sur grand écran. */
.nav-bascule, .nav-hamburger { display: none; }

/* Connexion */
.login { max-width: 360px; margin: 60px auto; background: #fff; border: 1px solid #e7e0d8; border-radius: 10px; padding: 28px; }
.login form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: #7a7068; }
.login input { padding: 9px 10px; border: 1px solid #d8cfc4; border-radius: 8px; }
.login button { background: var(--wine); color: #fff; border: 0; padding: 10px; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.error { color: #9a3b2a; background: #f3d9d2; padding: 8px 12px; border-radius: 8px; }
/* Pendant de `.error` pour une confirmation brève (changement de mot de passe). */
.ok-msg { color: #2f6b2a; background: #d6e8d2; padding: 8px 12px; border-radius: 8px; }

/* Bannière d'alerte (échec synchro quotidienne) */
.alert { background: #f7e2b8; color: #7a4a10; border: 1px solid #e6c982; border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: .92rem; }
.content { max-width: 1040px; }

/* Recherche */
.search { display: flex; gap: 8px; align-items: center; margin: 16px 0; }
.search input[type=search] { flex: 1; min-width: 240px; padding: 8px 10px; border: 1px solid #d8cfc4; border-radius: 8px; }
.search select { padding: 8px 10px; border: 1px solid #d8cfc4; border-radius: 8px; background: #fff; }
.search { flex-wrap: wrap; }
.search button { background: var(--wine); color: #fff; border: 0; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.search .clear { color: #7a7068; font-size: .85rem; }
/* Panneau de filtres clients (plusieurs lignes de critères). */
.filtres { flex-direction: column; align-items: stretch; gap: 10px; }
.filtres-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtres .champ { display: inline-flex; align-items: center; gap: 6px; color: #6b1f2a; font-size: .85rem; }
.filtres .champ input[type=number] { width: 90px; padding: 8px 10px; border: 1px solid #d8cfc4; border-radius: 8px; }
.filtres .champ input[type=date] { padding: 8px 10px; border: 1px solid #d8cfc4; border-radius: 8px; }
.muted { color: #8a8077; }
/* Libellé de règle (tâches) : infobulle explicative au survol. */
.regle { border-bottom: 1px dotted #b58; cursor: help; white-space: nowrap; }

/* Tableaux */
.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e7e0d8; border-radius: 10px; overflow: hidden; }
.grid th, .grid td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #efe9e1; }
.grid thead th { background: #f3ede5; color: #6b1f2a; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid a { color: var(--wine); text-decoration: none; font-weight: 600; }
.grid a:hover { text-decoration: underline; }
/* Le numéro de téléphone est un lien `tel:` — utile au doigt, sans intérêt
   à la souris : il garde donc l'allure du texte courant. */
.grid a.tel { color: inherit; font-weight: inherit; }
.grid.sub { margin-top: 8px; box-shadow: none; }
/* Table des tâches : largeurs de colonnes fixes (via <colgroup>) pour que la mise
   en page reste identique quel que soit le contenu (donc le filtre de statut). */
.grid.fixed { table-layout: fixed; }
.grid.fixed td { overflow-wrap: anywhere; }
/* Surcharge : dans les tableaux/commandes, .num est une cellule alignée à droite,
   pas le gros chiffre des cartes d'accueil. */
.grid .num, .order-head .num { display: table-cell; font-size: .95rem; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; }
.order-head .num { display: inline; }

/* Filtres tâches */
.filters { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 12px 0; font-size: .88rem; }
.filters a { color: #7a7068; text-decoration: none; padding: 2px 8px; border-radius: 8px; }
.filters a.on { background: var(--wine); color: #fff; }
/* Groupes de tâches d'un même client : lignes reliées visuellement. */
.grid tr.lie td { border-bottom-style: dashed; }
.grid tr.suite td { background: #fbf8f4; }
.suite-marque { color: #b3a89b; margin-right: 4px; }
.tag.multi { background: var(--wine); color: #fff; }

/* Formulaire admin des paramètres de règles (onglet Règles). */
.params-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 24px; align-items: end; }
.params-form label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: #6f665d; }
.params-form input { padding: 6px 8px; border: 1px solid #ded5c9; border-radius: 8px; max-width: 10rem; }
.params-form button { justify-self: start; }

/* Onglets (Liste / Règles) : même mécanique que .filters, mais soulignés. */
.tabs { border-bottom: 1px solid #efe9e1; padding-bottom: 0; gap: 2px; }
.tabs a { border-radius: 8px 8px 0 0; padding: 6px 14px; }
.tabs a.on { background: var(--wine); color: #fff; }

/* Formulaires inline (réassignation, reset mdp) */
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form select, .inline-form input { padding: 4px 6px; border: 1px solid #d8cfc4; border-radius: 6px; font-size: .85rem; }
.inline-form button { background: var(--wine); color: #fff; border: 0; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: .82rem; }
.inline-form button.ghost { background: #efe9e1; color: #7a3b2a; padding: 2px 8px; }
/* Cellule « Traiter » de l'écran tâches */
/* Colonne « Traiter » étroite : boutons empilés verticalement. */
.traiter { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.traiter form { margin: 0; display: flex; }
.traiter form button { width: 100%; }
.traiter .btn { text-align: center; }
.traiter .tag { align-self: flex-start; }
.btn { background: var(--wine); color: #fff; text-decoration: none; border: 0; padding: 4px 10px; border-radius: 6px; font-size: .82rem; white-space: nowrap; cursor: pointer; display: inline-block; }
.btn.ghost { background: #efe9e1; color: #7a3b2a; }

/* Carte de tâche sur la fiche client (clôture avec commentaire large) */
.task-card { border: 1px solid #efe9e1; border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.task-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.close-form-lg { display: flex; flex-direction: column; gap: 8px; }
.close-form-lg select { align-self: flex-start; padding: 5px 8px; border: 1px solid #d8cfc4; border-radius: 6px; font-size: .85rem; }
.close-form-lg textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d8cfc4; border-radius: 8px; font: inherit; resize: vertical; }
.task-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.task-actions button { background: var(--wine); color: #fff; border: 0; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: .85rem; }
.task-actions button.ghost { background: #efe9e1; color: #7a3b2a; }

/* Popup « Me le rappeler » */
.remind-dialog { border: 1px solid #e7e0d8; border-radius: 12px; padding: 22px; min-width: 300px; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.remind-dialog::backdrop { background: rgba(40,26,22,.4); }
.remind-dialog h3 { color: var(--wine); margin: 0 0 4px; }
.remind-shortcuts { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.remind-date { display: block; margin: 10px 0 4px; color: #7a7068; font-size: .9rem; }
.remind-date input { display: block; margin-top: 4px; padding: 6px 8px; border: 1px solid #d8cfc4; border-radius: 8px; }
.remind-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 18px 0 0; padding: 0; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.row-actions button.ghost { background: #efe9e1; color: #7a3b2a; border: 0; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: .82rem; }

/* Formulaire de création (comptes) */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 12px; align-items: end; margin-top: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: #7a7068; }
.form-grid input, .form-grid select { padding: 7px 9px; border: 1px solid #d8cfc4; border-radius: 8px; }
.form-grid button { background: var(--wine); color: #fff; border: 0; padding: 9px 16px; border-radius: 8px; cursor: pointer; }

/* Pagination */
.pager { display: flex; gap: 16px; align-items: center; margin: 18px 0; }
.pager a { color: var(--wine); text-decoration: none; }

/* Panneaux fiche */
.panel { background: #fff; border: 1px solid #e7e0d8; border-radius: 10px; padding: 18px 22px; margin: 18px 0; }
.panel h2 { color: var(--wine); margin-top: 0; font-size: 1.1rem; }
/* Panneau repliable (<details>) : en-tête cliquable, chevron à droite. */
.collapsible > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary h2 { margin: 0; }
.collapsible > summary .chevron { color: var(--wine); font-size: 1.6rem; font-weight: 700; line-height: 1; transition: transform .15s ease; }
.collapsible[open] > summary .chevron { transform: rotate(90deg); }
.collapsible-body { margin-top: 14px; }
/* En-tête fiche : nom à gauche, boutons de saisie (menus déroulants) à droite. */
.client-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.client-head h1 { margin: 0; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.head-details { position: relative; }
.head-details > summary { list-style: none; cursor: pointer; }
.head-details > summary::-webkit-details-marker { display: none; }
.head-details .add-btn { display: inline-block; background: var(--wine); color: #fff; padding: 7px 12px; border-radius: 6px; font-size: .85rem; white-space: nowrap; }
.head-details[open] .add-btn { background: #efe9e1; color: #7a3b2a; }
/* Le formulaire s'ouvre en panneau flottant sous le bouton (n'affecte pas la mise en page). */
.head-form { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 320px; max-width: 86vw; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #e7e0d8; border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.14); padding: 14px 16px; }
.head-form label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: #6b1f2a; }
.head-form select, .head-form input, .head-form textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #d8cfc4; border-radius: 6px; font: inherit; font-size: .85rem; }
.head-form textarea { resize: vertical; }
.head-form button[type=submit] { background: var(--wine); color: #fff; border: 0; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-size: .85rem; }
.head-form .rgpd-note { font-size: .75rem; margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; }
.kv dt { color: #8a8077; }
.kv dd { margin: 0; }
.emails { margin: 6px 0 0; padding-left: 18px; }
.kv .emails { margin: 0; padding-left: 0; list-style: none; }
.order { border: 1px solid #efe9e1; border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.order-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.order-head .status { color: #6b1f2a; font-size: .85rem; }
.tag { display: inline-block; white-space: nowrap; background: #efe2d2; color: #6b1f2a; font-size: .72rem; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
.tag.warn { background: #f3d9d2; color: #9a3b2a; }
.tag.cercle { background: #6b1f2a; color: #f6d97a; font-weight: 600; }
.tag.reporte { background: #f6e6b8; color: #7a5c00; font-weight: 600; }
.tag.offline { background: #dde6ef; color: #2a4a6b; }
.tag.societe { background: #e7e0ef; color: #4a2a6b; }

/* Adresse postale. Le trait ne sépare qu'à partir de la DEUXIÈME : une fiche
   n'ayant qu'une adresse — la grande majorité — ne gagne aucune décoration. */
.adresse + .adresse { margin-top: 8px; padding-top: 8px; border-top: 1px solid #efe9e1; }

/* Bouton « remonter en haut » : caché tant qu'on n'a pas scrollé. */
.back-to-top {
  position: fixed; right: 48px; bottom: 40px; width: 54px; height: 54px;
  border: 2px solid #f6d97a; border-radius: 50%; background: #6b1f2a; color: #f6d97a;
  font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 100;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, background .2s;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: #521721; }
.tag.ok { background: #d6e8d2; color: #2f6b2a; }

/* Import Grappe : résultat + anomalies */
.panel.resultat.error { border-left: 4px solid #9a3b2a; }
.panel.resultat.warning { border-left: 4px solid #b8860b; }
.panel.resultat.success { border-left: 4px solid #2f6b2a; }
.metrics { margin: 6px 0 0; }
.anomalies { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.anomalie { padding: 7px 12px; border-radius: 8px; font-size: .9rem; }
.anomalie.error { background: #f3d9d2; color: #9a3b2a; }
.anomalie.warning { background: #f7e2b8; color: #7a4a10; }
.anomalie.info { background: #f0ece5; color: #6a6055; }
.grid.totaux { width: auto; min-width: 260px; margin-bottom: 12px; }
.grid.totaux th, .grid.totaux td { padding: 3px 0 3px 18px; }
.grid.totaux th:first-child, .grid.totaux td:first-child { padding-left: 0; }
.grid.totaux tr.somme td { font-weight: 600; border-top: 1px solid #d8cbb8; }

/* Préférences (aime / n'aime pas) */
.prefs { list-style: none; margin: 6px 0 12px; padding: 0; }
.prefs li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.prefs li form { margin: 0; }

/* Fusion de fiches (admin) — panneau volontairement discret : c'est une
   opération rare et définitive, elle ne doit pas concurrencer le 360. */
.fusions-note { margin: 12px 0 0; padding: 8px 12px; background: #f0ece5; border-radius: 8px; font-size: .88rem; }
.panel.fusion { padding: 10px 16px; background: #faf7f3; }
.panel.fusion h3 { margin: 0; font-size: .92rem; font-weight: 600; color: #7a3b2a; }
.fusion-res { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fusion-res li { font-size: .85rem; }
.fusion-res button.ghost { background: #efe9e1; color: #7a3b2a; border: 0; padding: 3px 10px; border-radius: 6px; cursor: pointer; font-size: .82rem; font-weight: 600; }
.fusion-res button.ghost:hover { background: #e5dbd0; }
/* 360 : les avoirs sont déduits du total mais restent lisibles comme tels. */
.grid.totaux tr.avoirs td { color: #9a3b2a; }

/* Profil régional du 360 : radar à 7 axes fixes + repère de la maison.
   L'ordre des axes et l'échelle (0 à 100 %) sont figés dans le service :
   c'est ce qui rend deux silhouettes comparables d'une fiche à l'autre. */
.radar { margin: 6px 0 14px; }
/* Bascule montant / bouteilles : radios masqués, pilotage par sélecteur CSS.
   Aucun JavaScript dans le projet — et rien à recharger, les deux jeux de
   valeurs sont déjà dans la page. */
.radar-unite { position: absolute; opacity: 0; width: 0; height: 0; }
.radar-onglets { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .85rem; }
.radar-onglets label { border: 1px solid #d8cfc4; border-radius: 999px; padding: 2px 10px; cursor: pointer; color: #7a7068; background: #fff; }
.radar-unite:nth-of-type(1):checked ~ .radar-onglets .lab-mnt,
.radar-unite:nth-of-type(2):checked ~ .radar-onglets .lab-btl { background: var(--wine); border-color: var(--wine); color: #fff; }
.radar-unite:focus-visible ~ .radar-onglets label { outline: 2px solid var(--wine); outline-offset: 2px; }
.radar-corps .u-btl { display: none; }
.radar-unite:nth-of-type(2):checked ~ .radar-corps .u-mnt { display: none; }
.radar-unite:nth-of-type(2):checked ~ .radar-corps .u-btl { display: block; }
.radar-svg { width: 100%; max-width: 420px; height: auto; display: block; }
.radar-anneau { fill: none; stroke: #e7e0d8; stroke-width: 1; }
.radar-axe { stroke: #e7e0d8; stroke-width: 1; }
.radar-label { font-size: 11px; fill: #7a7068; }
.radar-graduation { font-size: 9px; fill: #b3a99f; }
/* La moyenne Vitis en gris pointillé, le client en accent : motif « emphase »,
   deux séries seulement, donc aucun risque de confusion de teintes. */
.radar-moyenne { fill: #8a8077; fill-opacity: .16; stroke: #8a8077; stroke-width: 2; stroke-dasharray: 4 3; stroke-linejoin: round; }
.radar-client { fill: var(--wine); fill-opacity: .22; stroke: var(--wine); stroke-width: 2; stroke-linejoin: round; }
.radar-legende { font-size: .82rem; color: #7a7068; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.pastille-client { background: var(--wine); }
.pastille-moyenne { background: #8a8077; }
.radar-valeurs { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .88rem; }
.radar-note { font-size: .82rem; margin: 6px 0 0; }
/* Repli sous 3 régions : barre empilée, au plus deux segments. */
.barre { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #efe9e2; max-width: 420px; }
.barre-seg { background: var(--wine); }
.barre-seg + .barre-seg { margin-left: 2px; background: #a8737c; }

/* Profil d'achat du 360 : grille 5 × 5 fréquence × récence, le contact situé
   parmi toutes les fiches. Les seuils des tranches sont figés dans le service —
   c'est ce qui rend deux fiches comparables et ce qui laisse la grille valable
   quand la base grossit. */
.grille { margin: 6px 0 14px; }
/* Bascule fiches / chiffre d'affaires : même dispositif que le radar, radios
   masqués et pilotage par sélecteur CSS. Les deux pondérations sont déjà dans
   la page ; elles disent des choses opposées, aucune ne peut être supprimée. */
.grille-unite { position: absolute; opacity: 0; width: 0; height: 0; }
.grille-onglets { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .85rem; flex-wrap: wrap; }
.grille-onglets label { border: 1px solid #d8cfc4; border-radius: 999px; padding: 2px 10px; cursor: pointer; color: #7a7068; background: #fff; }
.grille-unite:nth-of-type(1):checked ~ .grille-onglets .lab-fic,
.grille-unite:nth-of-type(2):checked ~ .grille-onglets .lab-ca { background: var(--wine); border-color: var(--wine); color: #fff; }
.grille-unite:focus-visible ~ .grille-onglets label { outline: 2px solid var(--wine); outline-offset: 2px; }
/* Le chiffre d'affaires est la vue par défaut : l'état au repos de la feuille
   dit la même chose que le `checked` du gabarit, pour qu'une perte de l'attribut
   n'inverse pas la grille en silence. */
.grille-corps .u-fic { display: none; }
.grille-unite:nth-of-type(1):checked ~ .grille-corps .u-ca { display: none; }
.grille-unite:nth-of-type(1):checked ~ .grille-corps .u-fic { display: block; }
/* Un tableau et non un SVG : le chiffre écrit se lit tout de suite là où un
   diamètre demandait une comparaison (essayé puis écarté le 14/08/2026). Le
   texte reste sélectionnable, annonçable, et se replie sur un écran étroit. */
.grille-tab { border-collapse: collapse; font-size: .86rem; max-width: 460px; }
.grille-tab caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grille-tab th, .grille-tab td { border: 1px solid #e7e0d8; padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.grille-tab thead th { font-weight: 600; color: #7a7068; text-align: center; font-size: .8rem; background: #faf7f3; }
.grille-tab tbody th { font-weight: 600; color: #7a7068; text-align: right; background: #faf7f3; white-space: nowrap; }
.grille-coin { border: 0 !important; background: transparent; }
/* Une case vide se distingue d'un « 0 % » arrondi : le tiret est estompé. */
.grille-tab td.vide { color: #c9c0b6; }
/* La case du contact est encadrée, pas remplie : elle peut ne rien contenir
   d'autre que lui, et un aplat sur « — » ne dirait rien. */
.grille-tab td.est-client { outline: 2px solid var(--wine); outline-offset: -2px; font-weight: 700; color: var(--wine); background: #f7efe9; }
.grille-axes { font-size: .8rem; margin: 6px 0 0; }
.grille-case-dit { font-size: .88rem; margin: 2px 0 0; }
.grille-phrase { font-size: .92rem; margin: 8px 0 0; }

/* Ciblage par les vins : bloc replié de l'écran Clients. Le marqueur natif est
   conservé — il dit à lui seul que le bloc s'ouvre, là où les `.collapsible`
   de la fiche portent leur propre chevron. */
.filtres .vins > summary { cursor: pointer; color: var(--wine); font-size: .88rem; padding: 4px 0; }
.filtres .vins[open] > summary { margin-bottom: 2px; }
/* Aide du bloc de ciblage : elle porte la sémantique que les champs ne peuvent
   pas montrer (les critères d'une ligne visent la même bouteille). */
.filtres .aide { margin: 2px 0 8px; font-size: .82rem; color: #7a7068; max-width: 62ch; line-height: 1.5; }
.filtres .filtres-ligne.indente { padding-left: 14px; }