/* =====================================================================
   La Brig'ads — cockpit interne · feuille de style commune (lot 2)
   Reprise contrôlée de la DA du cockpit Restaurant (site-brigads/app/css/app.css et
   pages) : mêmes tokens, mêmes fontes locales, mêmes composants. Rien n'est importé du
   Restaurant à l'exécution : cette feuille est autonome. Aucun réseau.
   ===================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-var.woff2') format('woff2');
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --marine:#1E3A5C; --marine-fonce:#16293F; --marine-nuit:#0F1D2E;
  --jaune:#F0B429; --jaune-fonce:#d69c17; --gris:#5E6E7A; --gris-clair:#C7CFD6;
  --fond:#F5F7F9; --bord:#E4E9ED; --texte:#1B2733;
  --ok:#2E6B3E; --ko:#B3261E; --bleu:#2B6CB0; --acier:#6EA3C1;
  --or-fond:#FFF4DA; --or-texte:#8A6100; --ok-fond:#E6F4EA; --ko-fond:#FDECE7; --ko-texte:#8C2F20; --bleu-fond:#E8F0FE; --bleu-texte:#1A4B8C; --neutre-fond:#EDF0F2; --neutre-texte:#5A6874;
  --ombre:0 1px 2px rgba(30,58,92,.05), 0 6px 16px rgba(30,58,92,.07), 0 16px 40px rgba(30,58,92,.05);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --cible:44px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { color-scheme: light; }
body { font-family:'Instrument Sans', system-ui, sans-serif; background:var(--fond); color:var(--texte); min-height:100vh; line-height:1.5; }
h1, h2, h3 { font-family:'Bricolage Grotesque', sans-serif; color:var(--marine); letter-spacing:-.01em; text-wrap:balance; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
:focus-visible { outline:3px solid var(--jaune); outline-offset:2px; border-radius:4px; }
[hidden] { display:none !important; }
.visuellement-cache { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- Icônes SVG inline ---- */
.ico { width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ---- Barre du haut ---- */
.barre { background:#fff; border-bottom:1px solid var(--bord); padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; position:sticky; top:0; z-index:40; }
.barre .marque { display:flex; align-items:center; gap:12px; min-width:0; }
.marque .logo-pique { height:38px; width:auto; flex-shrink:0; }
.marque .logo-mot { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:.02em; color:var(--marine); line-height:1; white-space:nowrap; }
.marque .logo-mot em { font-style:normal; color:var(--jaune); }
.barre .titre-ecran { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; color:var(--marine); font-size:1.05rem; }
.barre .sous-titre { display:block; font-family:'Instrument Sans', sans-serif; font-weight:500; font-size:.8rem; color:var(--gris); margin-top:2px; }
.barre .droite { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.barre select, .selecteur-acteur { padding:8px 10px; border:1.5px solid var(--bord); border-radius:8px; font-size:.95rem; font-family:inherit; background:#fff; color:var(--texte); min-height:38px; }

@media (max-width: 640px) {
  .barre { padding:8px 12px; gap:8px; }
  .marque .logo-mot { display:none; }
  .marque .logo-pique { height:32px; }
  .barre .titre-ecran { font-size:.98rem; line-height:1.25; }
  .barre .droite { margin-left:auto; }
  .barre select, .selecteur-acteur { font-size:.88rem; padding:7px 8px; max-width:46vw; }
  .bandeau-demo { padding:5px 12px; font-size:.74rem; gap:6px; }
  .bandeau-demo .bouton-lien { padding:4px 2px; min-height:28px; }
}

/* ---- Bandeau de démonstration : toujours visible, jamais une connexion ---- */
.bandeau-demo { background:var(--marine-nuit); color:#fff; font-size:.8rem; padding:6px 18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.bandeau-demo b { color:var(--jaune); }
.bandeau-demo .bouton-lien { background:none; border:none; color:var(--gris-clair); text-decoration:underline; cursor:pointer; font-size:.78rem; padding:6px 4px; min-height:32px; }
.bandeau-demo .bouton-lien:hover { color:#fff; }

/* ---- Navigation des modules : barre horizontale (mobile) ---- */
.modules-nav { background:var(--marine); display:flex; gap:2px; padding:0 8px; overflow-x:auto; scrollbar-width:none; }
.modules-nav::-webkit-scrollbar { display:none; }
.modules-nav a { color:var(--gris-clair); padding:13px 14px; font-size:.88rem; font-weight:600; white-space:nowrap; border-bottom:3px solid transparent; transition:color .2s, border-color .2s; display:flex; align-items:center; gap:7px; min-height:var(--cible); }
.modules-nav a:hover { color:#fff; }
.modules-nav a.actif { color:var(--jaune); border-bottom-color:var(--jaune); }
.modules-nav a.bientot { opacity:.45; cursor:not-allowed; }
.modules-nav .pastille { font-size:.62rem; background:rgba(255,255,255,.15); color:var(--gris-clair); padding:2px 7px; border-radius:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.modules-nav .pastille.compte { background:var(--jaune); color:var(--marine); }

/* ---- Navigation latérale « nuit étoilée » (≥ 1060 px) ---- */
.nav-laterale { display:none; }
@media (min-width: 1060px) {
  .avec-nav-laterale { padding-left:236px; }
  .avec-nav-laterale .modules-nav { display:none; }
  .avec-nav-laterale .marque .logo-pique, .avec-nav-laterale .marque .logo-mot { display:none; }
  .nav-laterale {
    display:flex; flex-direction:column;
    position:fixed; left:0; top:0; bottom:0; width:236px; z-index:60;
    background:
      radial-gradient(700px 340px at 85% -8%, rgba(240,180,41,.12), transparent 60%),
      linear-gradient(170deg, var(--marine) 0%, var(--marine-fonce) 48%, var(--marine-nuit) 100%);
    overflow-y:auto; padding:18px 12px 14px; scrollbar-width:none;
  }
  .nav-laterale::-webkit-scrollbar { display:none; }
  .nav-laterale::before { content:""; position:fixed; left:0; top:0; bottom:0; width:236px; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size:26px 26px; }
  .nav-laterale .marque-nav { display:flex; align-items:center; gap:10px; padding:4px 10px 16px; position:relative; }
  .nav-laterale .marque-nav svg { height:34px; width:auto; flex-shrink:0; }
  .nav-laterale .marque-nav span { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:.98rem; color:#fff; letter-spacing:.02em; white-space:nowrap; }
  .nav-laterale .marque-nav span em { font-style:normal; color:var(--jaune); }
  .nav-laterale .groupe { font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(199,207,214,.55); padding:16px 12px 6px; position:relative; }
  .nav-laterale a { display:flex; align-items:center; gap:10px; color:var(--gris-clair); font-size:.89rem; font-weight:600; padding:9px 12px; border-radius:9px; border-left:3px solid transparent; transition:background .15s ease, color .15s ease; position:relative; }
  .nav-laterale a:hover { background:rgba(255,255,255,.07); color:#fff; }
  .nav-laterale a.actif { background:rgba(240,180,41,.13); color:var(--jaune); border-left-color:var(--jaune); }
  .nav-laterale a.bientot { opacity:.45; cursor:not-allowed; }
  .nav-laterale a .ico { width:16px; height:16px; }
  .nav-laterale .pastille { margin-left:auto; font-size:.62rem; background:rgba(255,255,255,.13); color:var(--gris-clair); padding:2px 7px; border-radius:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
  .nav-laterale .pastille.compte { background:var(--jaune); color:var(--marine); }
  .nav-laterale .personne { margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; color:var(--gris-clair); position:relative; line-height:1.4; }
  .nav-laterale .personne strong { color:#fff; display:block; }
}

/* ---- Contenu ---- */
.conteneur { max-width:1100px; margin:0 auto; padding:18px; }
.deux-col { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:14px; align-items:start; }
.trois-col { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width: 900px) { .deux-col, .trois-col { grid-template-columns:minmax(0,1fr); } }

.carte { background:#fff; border:1px solid var(--bord); border-radius:14px; padding:18px 20px; margin-bottom:14px; box-shadow:var(--ombre); }
.carte h2 { font-size:1.05rem; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.carte-titre { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.carte-titre h2 { margin-bottom:0; }
.compteur { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; color:var(--marine); font-size:1.2rem; font-variant-numeric:tabular-nums; }
.avert { background:var(--or-fond); color:var(--or-texte); border-radius:10px; padding:11px 14px; font-size:.85rem; line-height:1.55; }
.avert.gris { background:var(--neutre-fond); color:var(--neutre-texte); }
.avert.rouge { background:var(--ko-fond); color:var(--ko-texte); }
.vide { text-align:center; color:var(--gris); padding:26px 16px; font-size:.9rem; }
.detail { color:var(--gris); font-size:.85rem; margin-top:2px; overflow-wrap:anywhere; }
.pied { text-align:center; color:var(--gris); font-size:.75rem; padding:18px; }

/* ---- Boutons ---- */
.btn { border:none; cursor:pointer; border-radius:9px; padding:9px 14px; font-weight:600; font-size:.88rem; font-family:inherit; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:transform .12s, background .2s, opacity .2s; text-decoration:none; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-p { background:var(--marine); color:#fff; }
.btn-jaune { background:var(--jaune); color:var(--marine); }
.btn-ok { background:var(--ok); color:#fff; }
.btn-ko { background:transparent; color:var(--ko); border:1.5px solid var(--ko); }
.btn-g { background:transparent; border:1.5px solid var(--bord); color:var(--texte); }
.btn-g.actif { background:var(--marine); color:#fff; border-color:var(--marine); }
.btn-petit { min-height:30px; padding:5px 10px; font-size:.76rem; }
.btn-p, .btn-jaune, .btn-ok { box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pleine-largeur { width:100%; }
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-petit, .modules-nav a, .repli, .filtres button, .onglets button, .jours-puces button { min-height:var(--cible); }
  input, select, textarea { font-size:max(16px, 1em) !important; }
}

/* ---- Pastilles d'état : toujours écrites ---- */
.pastille { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:20px; background:var(--neutre-fond); color:var(--neutre-texte); white-space:nowrap; display:inline-block; }
.pastille.attente { background:var(--or-fond); color:var(--or-texte); }
.pastille.ok { background:var(--ok-fond); color:var(--ok); }
.pastille.ko { background:var(--ko-fond); color:var(--ko-texte); }
.pastille.bleu { background:var(--bleu-fond); color:var(--bleu-texte); }
.pastille.marine { background:var(--marine); color:#fff; }

/* ---- Items (listes de tâches, propositions, demandes) ---- */
.item { border:1px solid var(--bord); border-left:5px solid var(--bord); border-radius:12px; padding:12px 14px; margin-bottom:10px; background:#fff; }
.item.attente { border-left-color:var(--jaune); }
.item.retard { border-left-color:var(--ko); }
.item.bloque { border-left-color:var(--gris); }
.item.ok { border-left-color:var(--ok); }
.item.bleu { border-left-color:var(--bleu); }
.item.efface { opacity:.62; }
.item .haut { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.item .qui { font-weight:700; overflow-wrap:anywhere; }
.item .recap { background:var(--fond); border-radius:8px; padding:8px 11px; margin-top:8px; font-size:.85rem; font-style:italic; }
.repli { width:100%; text-align:left; border:1px solid var(--bord); border-radius:10px; padding:11px 14px; margin-bottom:10px; background:#fff; display:flex; justify-content:space-between; align-items:center; font-weight:600; min-height:var(--cible); cursor:pointer; font-size:.9rem; color:var(--texte); }
.repli small { color:var(--gris); font-weight:500; }
.colonne-membre { border:1px solid var(--bord); border-radius:10px; padding:10px 12px; min-width:0; }
.colonne-membre .nom { font-weight:700; display:flex; justify-content:space-between; gap:6px; align-items:center; flex-wrap:wrap; }

/* ---- Formulaires ---- */
.champ { margin-bottom:12px; }
.champ label, .champ legend { display:block; font-size:.76rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.champ input, .champ select, .champ textarea { width:100%; padding:10px 12px; border:1.5px solid var(--bord); border-radius:8px; font-size:.95rem; font-family:inherit; background:#fff; color:var(--texte); min-height:var(--cible); }
.champ textarea { min-height:80px; resize:vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color:var(--marine); }
.champ input:focus:not(:focus-visible), .champ select:focus:not(:focus-visible), .champ textarea:focus:not(:focus-visible) { outline:none; }
.champ.en-erreur input, .champ.en-erreur select, .champ.en-erreur textarea { border-color:var(--ko); }
.champ .aide { font-size:.78rem; color:var(--gris); margin-top:5px; }
.champ fieldset { border:none; padding:0; margin:0; }
.champ .choix { display:flex; flex-direction:column; gap:6px; }
.champ .choix label { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:.9rem; font-weight:500; color:var(--texte); min-height:var(--cible); cursor:pointer; }
.champ .choix input { width:20px; height:20px; min-height:0; margin:0; }
.grille-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grille-form .pleine { grid-column:1/-1; }
@media (max-width: 520px) { .grille-form { grid-template-columns:1fr; } }
.erreur { color:var(--ko); font-size:.85rem; margin-top:10px; }
.saisie-inline { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.saisie-inline .champ { flex:1; min-width:200px; margin:0; }

/* ---- Fenêtre modale (voile + fiche) ---- */
.voile { position:fixed; inset:0; background:rgba(27,39,51,.45); display:none; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; z-index:80; }
.voile.ouvert { display:flex; }
.fiche { background:#fff; border-radius:16px; padding:22px; width:100%; max-width:560px; box-shadow:0 24px 60px rgba(27,39,51,.3); margin:auto; animation:miseEnPlace .3s var(--ease-out); }
.fiche h2 { font-size:1.1rem; margin-bottom:14px; }
.fiche .pied-fiche { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:14px; }

/* ---- Toasts ---- */
#toasts { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:92vw; }
.toast { background:rgba(15,29,46,.92); backdrop-filter:blur(8px); color:#fff; padding:11px 18px; border-radius:10px; font-size:.9rem; font-weight:600; box-shadow:0 8px 30px rgba(9,18,30,.35); display:flex; align-items:center; gap:9px; animation:toast-arrive .3s var(--ease-out); max-width:100%; overflow-wrap:anywhere; }
.toast .ico { color:#7BC98F; stroke-width:2.5; }
.toast.erreur { background:#8C1D18; }
.toast.part { animation:toast-part .3s ease forwards; }
@keyframes toast-arrive { from { opacity:0; transform:translateY(12px); } }
@keyframes toast-part { to { opacity:0; transform:translateY(8px); } }

/* ---- Mise en place : la salle se monte élément par élément ---- */
@keyframes miseEnPlace { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.en-place .conteneur > * { animation:miseEnPlace .45s var(--ease-out) both; }
.en-place .conteneur > :nth-child(1) { animation-delay:.08s; }
.en-place .conteneur > :nth-child(2) { animation-delay:.15s; }
.en-place .conteneur > :nth-child(3) { animation-delay:.22s; }
.en-place .conteneur > :nth-child(4) { animation-delay:.29s; }
.squelette { border:1px solid var(--bord); border-radius:12px; height:96px; margin-bottom:10px; background:linear-gradient(100deg, #fff 40%, #EEF2F5 50%, #fff 60%); background-size:200% 100%; animation:miroite 1.2s linear infinite; }
@keyframes miroite { to { background-position:-200% 0; } }

/* ---- Agenda ---- */
.semaine-barre { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.semaine-barre .titre-sem { font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.1rem; color:var(--marine); }
.fleche { background:#fff; border:1.5px solid var(--bord); border-radius:9px; width:var(--cible); height:var(--cible); display:inline-grid; place-items:center; color:var(--marine); font-weight:700; font-size:1.1rem; cursor:pointer; }
.fleche:hover { border-color:var(--marine); }
.grille-sem { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; margin-top:10px; }
@media (max-width: 900px) { .grille-sem { display:none; } }
.jour { border:1px solid var(--bord); border-radius:10px; background:#fff; min-height:200px; padding:7px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.jour.aujourdhui { border-color:var(--jaune); box-shadow:inset 0 0 0 1px var(--jaune); }
.jour .entete { font-size:.78rem; font-weight:700; color:var(--marine); display:flex; flex-direction:column; gap:3px; }
.jour .entete .mode { font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:6px; background:var(--bleu-fond); color:var(--bleu-texte); align-self:flex-start; }
.jour .entete .mode.terrain { background:var(--or-fond); color:var(--or-texte); }
.jour .repere { margin-top:auto; font-size:.7rem; color:var(--gris); border-top:1px dashed var(--bord); padding-top:5px; }
.evt { border-radius:7px; padding:6px 7px; font-size:.76rem; line-height:1.3; border-left:4px solid var(--gris-clair); background:var(--fond); overflow-wrap:anywhere; text-align:left; width:100%; border-top:none; border-right:none; border-bottom:none; cursor:pointer; color:var(--texte); font-family:inherit; }
.evt .h { font-family:'Bricolage Grotesque', sans-serif; font-weight:700; color:var(--marine); }
.evt.forte { border-left-color:var(--ko); }
.evt.moyenne { border-left-color:var(--jaune); }
.evt.faible { border-left-color:var(--acier); }
.evt .badge { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:1px 5px; border-radius:5px; background:#fff; border:1px solid var(--bord); margin-top:3px; }
.evt.indispo { background:repeating-linear-gradient(135deg, #EDF0F2 0 6px, #F7F9FA 6px 12px); border-left-color:var(--gris); color:var(--gris); font-weight:600; cursor:default; }
.tache-puce { font-size:.76rem; color:var(--texte); display:flex; gap:5px; align-items:flex-start; overflow-wrap:anywhere; background:none; border:none; text-align:left; cursor:pointer; font-family:inherit; padding:2px 0; width:100%; }
.tache-puce::before { content:""; width:7px; height:7px; border-radius:2px; background:var(--marine); margin-top:6px; flex-shrink:0; }
.tache-puce.retard::before { background:var(--ko); }
.legende-ecran { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:.76rem; color:var(--gris); }
.legende-ecran span { display:flex; align-items:center; gap:5px; }
.legende-ecran i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.jours-puces { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.jours-puces button { border:1.5px solid var(--bord); border-radius:20px; padding:6px 12px; font-size:.82rem; font-weight:600; white-space:nowrap; background:#fff; color:var(--texte); cursor:pointer; min-height:38px; }
.jours-puces button.actif { background:var(--marine); color:#fff; border-color:var(--marine); }
.liste-jour { display:none; }
@media (max-width: 900px) { .liste-jour { display:block; } }
.colle-bas { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--bord); padding:10px 14px; margin:12px -18px -18px; display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; z-index:5; }

/* ---- Fiche établissement ---- */
.entete-fiche { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.entete-fiche h2 { font-size:1.3rem; margin-bottom:4px; }
.drapeaux { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.frise { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; margin:8px 0 4px; }
.frise span { font-size:.68rem; text-align:center; padding:7px 3px; border-radius:6px; background:var(--neutre-fond); color:var(--neutre-texte); font-weight:700; text-transform:uppercase; letter-spacing:.02em; overflow-wrap:anywhere; hyphens:auto; }
.frise span.fait { background:var(--marine); color:#fff; }
.frise span.courant { background:var(--jaune); color:var(--marine); }
.frise-note { font-size:.74rem; color:var(--gris); margin:0 0 10px; }
.kv { display:grid; grid-template-columns:140px minmax(0,1fr); gap:6px 12px; font-size:.88rem; }
@media (max-width: 520px) { .kv { grid-template-columns:1fr; gap:2px 0; } .kv dt { margin-top:8px; } }
.kv dt { color:var(--gris); font-weight:600; }
.kv dd { margin:0; overflow-wrap:anywhere; }
.onglets { display:flex; gap:4px; border-bottom:1px solid var(--bord); margin-bottom:12px; overflow-x:auto; scrollbar-width:none; }
.onglets button { background:none; border:none; padding:10px 12px; font-size:.86rem; font-weight:600; color:var(--gris); border-bottom:3px solid transparent; white-space:nowrap; cursor:pointer; min-height:var(--cible); }
.onglets button.actif { color:var(--marine); border-bottom-color:var(--jaune); }
.chrono { list-style:none; margin:0; padding:0; }
.chrono li { display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; padding:7px 0; border-bottom:1px dashed var(--bord); font-size:.84rem; }
.chrono li .d { color:var(--gris); font-variant-numeric:tabular-nums; }
.liste-etab { list-style:none; margin:0; padding:0; }
.liste-etab li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--bord); flex-wrap:wrap; }
.liste-etab a { font-weight:700; color:var(--marine); }

/* ---- Marketing ---- */
.version { display:grid; grid-template-columns:28px 96px minmax(0,1fr) auto; gap:10px; align-items:start; padding:10px 0; border-top:1px dashed var(--bord); font-size:.86rem; }
.carte-titre + .version { border-top:none; }
@media (max-width: 640px) { .version { grid-template-columns:28px minmax(0,1fr); } .version .reseau { grid-column:2; } .version .droite-version { grid-column:2; align-items:flex-start; } }
.version .droite-version { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.version input[type=checkbox] { width:22px; height:22px; margin-top:2px; accent-color:var(--marine); cursor:pointer; }
.reseau { font-weight:700; color:var(--marine); }
.extrait { color:var(--texte); overflow-wrap:anywhere; }
.extrait small { color:var(--gris); display:block; margin-top:2px; }
.barre-action { position:sticky; bottom:12px; background:var(--marine-nuit); color:#fff; border-radius:12px; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; box-shadow:0 10px 30px rgba(15,29,46,.3); }
.filtres { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; align-items:center; }
.filtres .groupe-filtre { font-size:.7rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; margin-right:2px; }
.filtres button { border:1.5px solid var(--bord); border-radius:20px; padding:6px 12px; font-size:.8rem; font-weight:600; background:#fff; color:var(--texte); cursor:pointer; min-height:36px; }
.filtres button.actif { background:var(--marine); color:#fff; border-color:var(--marine); }
/* Sur écran tactile, les boutons de filtre gardent la cible de 44 px (la règle ci-dessus vient après celle du bloc tactile). */
@media (hover: none) and (pointer: coarse) { .filtres button { min-height:var(--cible); } }

/* ---- FAQ ---- */
.recherche { display:flex; gap:8px; align-items:flex-end; }
.recherche .champ { flex:1; margin:0; }
.reponse { font-size:.92rem; margin:6px 0 4px; white-space:pre-line; }
.meta { font-size:.76rem; color:var(--gris); display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Compléments demandés par les pages (relecture du 07/09) ---- */
@media (min-width: 901px) { .jours-puces, .colle-bas.telephone { display:none; } }
.reponse, .meta, .kv dd, .chrono li { overflow-wrap:anywhere; }
summary::-webkit-details-marker { display:none; }
.tiroir summary { list-style:none; cursor:pointer; font-weight:600; color:var(--marine); min-height:var(--cible); display:flex; align-items:center; gap:6px; font-size:.9rem; }
.tiroir summary::before { content:"▸"; font-size:.8rem; }
.tiroir[open] summary::before { content:"▾"; }
.version label { display:flex; align-items:center; gap:8px; min-height:var(--cible); cursor:pointer; }
fieldset.champ, .champ fieldset { border:none; padding:0; margin:0; }
.liste-etab a { display:inline-flex; align-items:center; min-height:var(--cible); }
.evt.indispo.mienne { cursor:pointer; }
.cases { display:flex; flex-direction:column; gap:6px; }
.cases label { display:flex; align-items:center; gap:8px; min-height:var(--cible); font-size:.9rem; font-weight:500; color:var(--texte); text-transform:none; letter-spacing:0; cursor:pointer; }
.cases input { width:20px; height:20px; min-height:0; margin:0; accent-color:var(--marine); }
.texte-complet { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--fond); border-radius:8px; padding:10px 12px; font-size:.9rem; }
.carte, .item { scroll-margin-top:84px; }
.avert, .carte h2, .item .detail { overflow-wrap:anywhere; }
.tiroir > :not(summary) { margin-top:8px; }
.version > label { grid-column:1 / 3; }
@media (max-width: 640px) { .version .extrait { grid-column:2; } }
.conteneur > .colle-bas.page { margin:12px 0 0; border:1px solid var(--bord); border-radius:12px; box-shadow:var(--ombre); }

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  .toast, .squelette, .fiche, .en-place .conteneur > * { animation:none !important; }
  .btn { transition:none; }
}

/* Objectifs (8.11) */
.obj-champs { margin:8px 0 4px; display:flex; flex-direction:column; gap:4px; }
.obj-ligne { font-size:.88rem; overflow-wrap:anywhere; }
.obj-ligne .cle { color:var(--gris); font-weight:600; }
.obj-ligne .cle::after { content:" : "; }
.obj-ligne .non-renseigne { color:var(--gris); font-style:italic; }
.obj-etapes { margin:4px 0 0 18px; padding:0; font-size:.88rem; overflow-wrap:anywhere; }
.obj-etapes li { padding:2px 0; }
.obj-visibilite { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--gris); }

/* Connexion et mode serveur (9.8) */
.connexion { min-height:calc(100vh - 140px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 0; }
.carte-connexion { width:min(100%, 420px); margin:0; }
.carte-connexion h1 { font-size:1.35rem; margin:8px 0 16px; }
.carte-connexion .btn { width:100%; margin-top:4px; }
.carte-connexion .avert { margin-bottom:12px; }
.marque-connexion { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:.95rem; letter-spacing:.02em; color:var(--marine); line-height:1.2; }
.marque-connexion em { font-style:normal; color:var(--jaune); }
.marque-connexion span { display:block; font-family:'Instrument Sans', sans-serif; font-weight:500; font-size:.78rem; color:var(--gris); letter-spacing:0; margin-top:2px; }
.pied-connexion { color:var(--gris); font-size:.78rem; text-align:center; margin-top:14px; }
.bandeau-demo.serveur { background:var(--marine); }
.personne-serveur { font-size:.85rem; font-weight:600; color:var(--marine); white-space:nowrap; }
.barre .droite .bouton-lien { background:none; border:none; color:var(--gris); text-decoration:underline; cursor:pointer; font-size:.82rem; font-family:inherit; padding:6px 4px; min-height:38px; }
.barre .droite .bouton-lien:hover { color:var(--marine); }
.barre .droite .bouton-lien:disabled { opacity:.5; cursor:wait; }

/* Formation (8.12) */
/* Téléphone d'abord : une question par écran, boutons pleine largeur, aucune largeur fixe en px. */
.quiz { max-width:44rem; margin-left:auto; margin-right:auto; }
.quiz-entete { margin-bottom:10px; }
.quiz-progression { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.8rem; color:var(--gris); font-weight:600; margin-bottom:6px; }
.quiz-progression .quiz-compte { font-family:'Bricolage Grotesque', sans-serif; color:var(--marine); font-variant-numeric:tabular-nums; }
.progression-barre { height:10px; background:var(--neutre-fond); border-radius:999px; overflow:hidden; }
.progression-barre > span { display:block; height:100%; background:var(--marine); border-radius:999px; transition:width .3s var(--ease-out); }
.quiz-question { font-family:'Bricolage Grotesque', sans-serif; font-size:1.25rem; line-height:1.35; color:var(--marine); margin:14px 0 16px; overflow-wrap:anywhere; text-wrap:balance; }
.quiz-choix { display:flex; flex-direction:column; gap:10px; }
/* `button.choix` : la classe .choix sert déjà au groupe de boutons radio des fiches (commun.mjs champChoix). */
button.choix { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; text-align:left; padding:12px 16px; border:1.5px solid var(--bord); border-radius:12px; background:#fff; font-family:inherit; font-size:1rem; line-height:1.35; color:var(--texte); cursor:pointer; transition:border-color .15s, background .15s, transform .12s; }
button.choix:hover { border-color:var(--marine); background:var(--fond); }
button.choix:active { transform:scale(.99); }
button.choix .lettre { flex-shrink:0; width:2rem; height:2rem; border-radius:50%; background:var(--marine); color:#fff; display:inline-grid; place-items:center; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:.95rem; }
button.choix .texte { overflow-wrap:anywhere; }
.quiz-sortie { margin-top:16px; }
.correction { border-radius:12px; padding:14px 16px; margin-top:14px; border:1.5px solid var(--bord); overflow-wrap:anywhere; }
.correction.ok { background:var(--ok-fond); border-color:var(--ok); }
.correction.ko { background:var(--ko-fond); border-color:var(--ko); }
.correction .verdict { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.15rem; margin-bottom:6px; }
.correction.ok .verdict { color:var(--ok); }
.correction.ko .verdict { color:var(--ko-texte); }
.correction .votre { font-size:.9rem; color:var(--ko-texte); margin-bottom:4px; }
.correction .bonne { font-weight:700; margin-bottom:8px; }
.correction .explication { font-size:.95rem; line-height:1.55; }
.correction .source { font-size:.8rem; color:var(--gris); margin-top:8px; }
.score-final { text-align:center; padding:10px 0 4px; }
.score-final h2 { justify-content:center; font-size:1.3rem; }
.score-final .chiffre { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:2.6rem; color:var(--marine); line-height:1.1; font-variant-numeric:tabular-nums; }
.classement { width:100%; border-collapse:collapse; font-size:.9rem; margin-top:12px; }
.classement th, .classement td { padding:8px 6px; text-align:left; border-bottom:1px dashed var(--bord); vertical-align:top; overflow-wrap:anywhere; }
.classement th { font-size:.72rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; }
.classement .rang { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; color:var(--marine); font-variant-numeric:tabular-nums; }
.classement .sans-rang { color:var(--gris); font-style:italic; font-weight:500; }
.grille { margin:8px 0 12px; }
.grille-critere { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--bord); font-size:.9rem; }
.grille-critere .critere { display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.grille-critere .critere label { font-size:inherit; font-weight:600; color:var(--texte); text-transform:none; letter-spacing:0; margin:0; }
.grille-critere .points { font-size:.76rem; color:var(--gris); }
.grille-critere select { padding:8px 10px; border:1.5px solid var(--bord); border-radius:8px; font-size:1rem; font-family:inherit; background:#fff; color:var(--texte); min-height:var(--cible); min-width:4.5rem; }
.grille-critere .note { font-variant-numeric:tabular-nums; font-weight:700; color:var(--marine); }
.grille-critere.total { border-bottom:none; font-weight:700; }
.total-mise { font-size:1rem; margin:6px 0; }
.theme-progression { margin:12px 0 4px; }
.theme-progression .ligne { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:.9rem; margin:4px 0; }
.theme-progression .nom { font-weight:700; color:var(--marine); }
.theme-progression .taux { font-variant-numeric:tabular-nums; }
.maitrise { color:var(--ok); font-weight:700; }
.fiche-revision { border-left:4px solid var(--jaune); padding:10px 12px; background:var(--fond); border-radius:8px; margin-bottom:8px; overflow-wrap:anywhere; }
.fiche-revision .enonce { font-weight:700; color:var(--marine); }
.fiche-revision .bonne { margin-top:4px; }
.fiche-revision .explication { font-size:.9rem; margin-top:4px; }
.fiche-revision .source { font-size:.78rem; color:var(--gris); margin-top:4px; }
.onglets .pastille.compte { background:var(--jaune); color:var(--marine); font-size:.62rem; padding:2px 7px; }
/* Cinq onglets : passage à la ligne sur écran étroit plutôt qu'un défilement horizontal sans indice. */
.onglets.onglets-souples { flex-wrap:wrap; overflow-x:visible; }
@media (hover: none) and (pointer: coarse) { button.choix { min-height:60px; } }
@media (prefers-reduced-motion: reduce) { .progression-barre > span, button.choix { transition:none; } }

/* Courrier (8.13) */
/* Téléphone d'abord : cartes empilées, gestes en bas de carte ; le corps d'un mail est un texte inerte rendu tel quel. */
.carte.courrier { padding:16px 18px; }
.courrier-objet { font-size:1.02rem; overflow-wrap:anywhere; margin:0; }
.courrier-expediteur { font-size:.88rem; font-weight:600; color:var(--marine); overflow-wrap:anywhere; margin-bottom:4px; }
.courrier-raison { margin:8px 0; }
.courrier-extrait { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--fond); border-radius:8px; padding:10px 12px; font-size:.9rem; line-height:1.5; margin:8px 0 4px; max-height:16rem; overflow-y:auto; }
.courrier-extrait .non-renseigne { color:var(--gris); font-style:italic; }
.courrier-pieces { list-style:none; margin:0; padding:0; display:inline-flex; flex-wrap:wrap; gap:6px; }
.courrier-pieces li { border:1px solid var(--bord); border-radius:8px; padding:3px 8px; font-size:.82rem; background:#fff; overflow-wrap:anywhere; }
.courrier-pieces small { color:var(--gris); }
.courrier-historique { margin:4px 0 0 18px; padding:0; font-size:.85rem; color:var(--gris); overflow-wrap:anywhere; }
.courrier-historique li { padding:2px 0; }
.courrier-encart { margin-bottom:12px; }
.courrier-gestes { margin-top:12px; }
/* Téléphone : point de rupture en em (40em = 640 px), le bloc ne fixe aucune largeur en px. */
@media (max-width: 40em) {
  .carte.courrier { padding:14px; }
  .courrier-gestes .btn { flex:1 1 calc(50% - 8px); min-height:var(--cible); }
}

/* Factures (8.14) */
/* Téléphone d'abord : cartes empilées, montants en gros, gestes en bas de carte ; montants alignés à droite en chiffres tabulaires ; aucune largeur fixe en px. */
.carte.facture { padding:16px 18px; font-variant-numeric:tabular-nums; }
.facture-objet { font-size:1.02rem; overflow-wrap:anywhere; margin:0; }
.facture-fournisseur { font-size:.88rem; font-weight:600; color:var(--marine); overflow-wrap:anywhere; margin-bottom:4px; }
.facture-fournisseur small { font-weight:500; color:var(--gris); }
.montant { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.montant.gros { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.6rem; color:var(--marine); line-height:1.1; }
.facture-montant { display:flex; align-items:baseline; gap:6px; margin:6px 0 8px; }
.facture-montant small { color:var(--gris); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.facture-encart { margin-bottom:12px; }
.facture-entete { margin:0 0 12px; }
.facture-section { margin-bottom:18px; }
.facture-section h3 { font-size:.95rem; color:var(--marine); margin:0; }
.facture-section .aide, .apercu .aide { font-size:.78rem; color:var(--gris); margin:0 0 8px; }
.facture-declarations { margin:6px 0 0 18px; padding:0; font-size:.85rem; color:var(--gris); overflow-wrap:anywhere; }
.facture-declarations li { padding:2px 0; }
.facture-gestes { margin-top:12px; }
.facture-selection { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.9rem; font-weight:600; color:var(--marine); min-height:var(--cible); cursor:pointer; }
.facture-selection input { width:1.4rem; height:1.4rem; margin:0; accent-color:var(--marine); cursor:pointer; }
.facture-selection input:disabled { cursor:not-allowed; }
.facture-selection:has(input:disabled) { color:var(--gris); font-weight:500; font-style:italic; }
.facture-resultats { margin-bottom:12px; }
.facture-resultats ul { margin:6px 0 0 18px; padding:0; }
.facture-resultats li { padding:2px 0; overflow-wrap:anywhere; }
.facture-resultats li.ok { color:var(--ok); }
.facture-resultats li.ko { color:var(--ko-texte); }
/* Aperçu : un tableau qui défile dans son conteneur, jamais la page (largeur minimale en em). */
.apercu-defilant { overflow-x:auto; margin:10px 0 4px; border:1px solid var(--bord); border-radius:10px; }
.apercu-table { width:100%; min-width:34em; border-collapse:collapse; font-size:.88rem; }
.apercu-table th, .apercu-table td { padding:8px 10px; text-align:left; border-bottom:1px dashed var(--bord); vertical-align:top; overflow-wrap:anywhere; }
.apercu-table th { font-size:.72rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; }
.apercu-table th.montant, .apercu-table td.montant { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.apercu-table tfoot th { text-align:right; color:var(--texte); text-transform:none; letter-spacing:0; font-size:.88rem; }
.apercu-table tfoot tr.total th, .apercu-table tfoot tr.total td { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.05rem; color:var(--marine); border-bottom:none; }
/* Barre « Valider et envoyer (n) » : collée en bas du panneau, dans le flux du conteneur. */
.barre-validation { margin:12px 0 0; border:1px solid var(--bord); border-radius:12px; box-shadow:var(--ombre); }
.barre-validation-texte { font-size:.85rem; color:var(--neutre-texte); overflow-wrap:anywhere; flex:1 1 16em; }
.barre-validation .btn:disabled { opacity:.55; cursor:not-allowed; }
/* Synthèse : tuiles souples, jamais une colonne fixe. */
.synthese-tuiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(12em, 1fr)); gap:10px; margin-bottom:12px; }
.tuile { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:14px 16px; box-shadow:var(--ombre); }
.tuile-titre { font-size:.76rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; overflow-wrap:anywhere; }
.tuile .chiffre { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.7rem; color:var(--marine); line-height:1.15; margin-top:4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
/* Téléphone : point de rupture en em (40em = 640 px), le bloc ne fixe aucune largeur en px. */
@media (max-width: 40em) {
  .carte.facture { padding:14px; }
  .facture-gestes .btn { flex:1 1 calc(50% - 8px); min-height:var(--cible); }
  .barre-validation .btn { width:100%; }
  .montant.gros { font-size:1.45rem; }
}

/* Finance (8.15) */
/* Téléphone d'abord : tuiles empilées (grille souple), jauges ÉCRITES (mot + pourcentage, la couleur n'est jamais seule, largeur en %), tableaux qui défilent dans leur conteneur (largeur minimale en em) ; aucune largeur fixe en px. */
.finance-encart { margin-bottom:12px; }
.finance-gestes { margin:0 0 12px; }
.finance-tuiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(12em, 1fr)); gap:10px; margin-bottom:12px; }
.finance-tuiles .tuile { display:flex; flex-direction:column; gap:2px; min-height:var(--cible); }
a.tuile { color:inherit; transition:transform .12s, box-shadow .2s; }
a.tuile:hover { transform:translateY(-1px); box-shadow:0 2px 4px rgba(30,58,92,.08), 0 10px 24px rgba(30,58,92,.1); }
a.tuile .tuile-lien { font-size:.78rem; font-weight:600; color:var(--marine); margin-top:auto; padding-top:6px; }
.tuile .unite { font-size:.72rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; margin-left:4px; }
.tuile .detail { font-size:.8rem; color:var(--gris); overflow-wrap:anywhere; }
.tuile.tresorerie { border-color:var(--jaune); }
.tuile.tresorerie .chiffre.a-renseigner { font-size:1.2rem; color:var(--gris); font-style:italic; }
.finance-perimetre { font-size:.82rem; color:var(--neutre-texte); margin:0 0 12px; overflow-wrap:anywhere; }
.finance-perimetre b { color:var(--marine); }
.finance-titre-section { font-size:.95rem; color:var(--marine); margin:14px 0 8px; }
/* Jauge écrite : le mot et le pourcentage sont dans le flux ; la barre n'est qu'un rappel visuel (largeur en %, jamais en px). */
.jauge { display:flex; flex-direction:column; gap:4px; min-width:8em; }
.jauge-mot { font-size:.8rem; font-weight:700; white-space:nowrap; }
.jauge-mot.ok { color:var(--ok); }
.jauge-mot.attente { color:var(--or-texte); }
.jauge-mot.ko { color:var(--ko-texte); }
.jauge-barre { height:.5em; background:var(--neutre-fond); border-radius:999px; overflow:hidden; }
.jauge-barre > span { display:block; height:100%; background:var(--marine); border-radius:999px; max-width:100%; }
.jauge-barre > span.ok { background:var(--ok); }
.jauge-barre > span.attente { background:var(--jaune-fonce); }
.jauge-barre > span.ko { background:var(--ko); }
/* Tableaux Budgets, Prévisions, récapitulatifs : défilent dans leur conteneur, jamais la page. */
.tableau-defilant { overflow-x:auto; margin:8px 0 12px; border:1px solid var(--bord); border-radius:10px; background:#fff; }
.tableau-finance { width:100%; min-width:40em; border-collapse:collapse; font-size:.86rem; font-variant-numeric:tabular-nums; }
.tableau-finance th, .tableau-finance td { padding:8px 10px; text-align:left; border-bottom:1px dashed var(--bord); vertical-align:top; overflow-wrap:anywhere; }
.tableau-finance th { font-size:.72rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; }
.tableau-finance th.montant, .tableau-finance td.montant { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tableau-finance td.source { font-size:.8rem; color:var(--gris); }
.tableau-finance tfoot th, .tableau-finance tfoot td { border-bottom:none; border-top:2px solid var(--bord); font-weight:700; color:var(--marine); text-transform:none; letter-spacing:0; font-size:.86rem; }
.tableau-finance td.gestes { white-space:nowrap; }
.tableau-finance td.gestes .btn { margin:2px 4px 2px 0; }
.finance-tresorerie-historique { margin:6px 0 0 18px; padding:0; font-size:.85rem; color:var(--gris); overflow-wrap:anywhere; }
.finance-tresorerie-historique li { padding:2px 0; }
.carte.alerte-finance { padding:14px 16px; border-left:4px solid var(--jaune-fonce); }
.carte.alerte-finance h3 { font-size:.95rem; margin:0; overflow-wrap:anywhere; }
/* Entité liée « budget » : un bouton écrit comme un lien (même style que les entités ouvrables par <a>). */
.carte.alerte-finance .bouton-lien { background:none; border:none; padding:0; min-height:0; font:inherit; color:var(--marine); text-decoration:underline; cursor:pointer; overflow-wrap:anywhere; text-align:left; }
.carte.alerte-finance .bouton-lien:hover { color:var(--ok); }
/* Alerte levée (motif plus détecté aujourd'hui) : lisible, datée, mais retirée du compte ; le mot « levée » est écrit, la couleur n'est jamais seule. */
.carte.alerte-finance.levee { border-left-color:var(--ok); }
.carte.alerte-finance.levee h3 { color:var(--gris); }
.tuile .detail.declaration-datee-plus-recente { color:var(--or-texte); }
/* Information manquante (HT inconnu, à classer) : écrite à côté des totaux, jamais fondue dedans. */
.finance-incomplets { margin:0 0 12px; }
.finance-incomplets ul { margin:6px 0 0 18px; padding:0; }
.finance-incomplets li { padding:2px 0; overflow-wrap:anywhere; }
.carte.recapitulatif { padding:14px 16px; }
.carte.recapitulatif h3 { font-size:.95rem; margin:0; }
.recap-chiffres { display:grid; grid-template-columns:repeat(auto-fit, minmax(10em, 1fr)); gap:6px 12px; margin:8px 0; font-size:.86rem; }
.recap-chiffres .cle { color:var(--gris); font-weight:600; }
.recap-chiffres .cle::after { content:" : "; }
/* Téléphone : point de rupture en em (40em = 640 px), le bloc ne fixe aucune largeur en px. */
@media (max-width: 40em) {
  .finance-tuiles { grid-template-columns:1fr; }
  .tuile .chiffre { font-size:1.45rem; }
  .finance-gestes .btn { flex:1 1 calc(50% - 8px); min-height:var(--cible); }
  .tableau-finance td.gestes { white-space:normal; }
}

/* Contrats (8.16) */
/* Téléphone d'abord : cartes empilées par client, deux états ÉCRITS côte à côte (signature, vie), conditions et signatures en lignes, gestes en bas de carte ; aucune largeur fixe en px. */
.contrat-encart { margin-bottom:12px; }
.contrat-entete { margin:0 0 12px; }
.contrat-section, .contrat-groupe { margin-bottom:18px; }
.contrat-section h3, .contrat-groupe h3 { font-size:.95rem; color:var(--marine); margin:0; overflow-wrap:anywhere; }
.contrat-section .aide { font-size:.78rem; color:var(--gris); margin:0 0 8px; }
.carte.contrat, .carte.modele { padding:16px 18px; font-variant-numeric:tabular-nums; }
.contrat-reference { font-size:1.02rem; overflow-wrap:anywhere; margin:0; }
.contrat-reference small { font-weight:500; color:var(--gris); font-size:.78rem; }
.contrat-etats { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:.82rem; color:var(--gris); }
.contrat-client { font-size:.88rem; font-weight:600; color:var(--marine); overflow-wrap:anywhere; margin-bottom:4px; }
.contrat-client small { font-weight:500; color:var(--gris); }
.contrat-conditions { margin:8px 0; }
.contrat-sous-titre { font-size:.78rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; margin:10px 0 4px; }
.contrat-signatures, .contrat-documents { margin:0 0 0 18px; padding:0; font-size:.86rem; overflow-wrap:anywhere; }
.contrat-signatures li, .contrat-documents li { padding:2px 0; }
.contrat-gestes { margin-top:12px; }
/* Préparer : un formulaire en ligne, champs empilés, jamais une colonne fixe. */
.contrat-formulaire { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:14px 16px; box-shadow:var(--ombre); margin-bottom:12px; }
.contrat-formulaire .actions { margin-top:12px; }
/* Modèles : versions empilées, texte fictif en lecture seule (pre-wrap), mention écrite. */
.modele-mention { font-size:.82rem; color:var(--or-texte); font-style:italic; margin:4px 0 8px; overflow-wrap:anywhere; }
.modele-versions { list-style:none; margin:0; padding:0; }
.modele-version { border:1px solid var(--bord); border-radius:10px; padding:10px 12px; margin:6px 0; background:var(--fond); }
.modele-champs { font-size:.82rem; color:var(--gris); margin:4px 0; overflow-wrap:anywhere; }
.modele-section { margin:6px 0; }
.modele-section h4 { font-size:.85rem; margin:0 0 2px; color:var(--marine); overflow-wrap:anywhere; }
.modele-section h4 small { color:var(--gris); font-weight:500; }
.modele-section p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.86rem; margin:0; max-height:16rem; overflow-y:auto; }
/* Zone défilante atteignable au clavier seul (tabindex="0" sur le <p>) : le focus se voit. */
.modele-section p:focus-visible { outline:2px solid var(--marine); outline-offset:2px; }
/* Échéances : liste de cartes, date écrite en clair avec le délai. */
.contrat-echeances { list-style:none; margin:0; padding:0; }
.carte.echeance { padding:14px 16px; border-left:4px solid var(--jaune-fonce); }
.carte.echeance h3 { font-size:.95rem; margin:0; overflow-wrap:anywhere; }
/* Téléphone : point de rupture en em (40em = 640 px), le bloc ne fixe aucune largeur en px. */
@media (max-width: 40em) {
  .carte.contrat, .carte.modele { padding:14px; }
  .contrat-gestes .btn { flex:1 1 calc(50% - 8px); min-height:var(--cible); }
  .contrat-formulaire .actions .btn { width:100%; }
  .contrat-etats { font-size:.78rem; }
}

/* Équipe (8.17) */
/* Téléphone d'abord : cartes empilées par personne, étapes et états ÉCRITS (la couleur n'est jamais seule), documents et parcours en listes, gestes en bas de carte ; aucune largeur fixe en px. */
.equipe-encart { margin-bottom:12px; }
.equipe-section { margin-bottom:18px; }
.equipe-section h3 { font-size:.95rem; color:var(--marine); margin:0; overflow-wrap:anywhere; }
.equipe-section .aide { font-size:.78rem; color:var(--gris); margin:0 0 8px; }
.equipe-reserve { margin:0 0 14px; }
.carte.collaborateur, .carte.dossier, .carte.parcours, .carte.dispo { padding:16px 18px; font-variant-numeric:tabular-nums; }
.collaborateur-nom { font-size:1.02rem; margin:0; overflow-wrap:anywhere; }
.collaborateur-etape { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:.82rem; color:var(--gris); }
.collaborateur-role { font-size:.88rem; font-weight:600; color:var(--marine); overflow-wrap:anywhere; margin-bottom:4px; }
.equipe-sous-titre { font-size:.78rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; margin:10px 0 4px; }
.equipe-responsabilites { margin:0 0 0 18px; padding:0; }
.equipe-responsabilites li { padding:1px 0; overflow-wrap:anywhere; }
/* Documents et étapes : des références et des lignes de parcours, jamais un fichier ni un identifiant. */
.equipe-documents, .equipe-etapes { list-style:none; margin:0; padding:0; }
.equipe-document, .equipe-etape { border:1px solid var(--bord); border-radius:10px; padding:10px 12px; margin:6px 0; background:var(--fond); }
.equipe-document-titre, .equipe-etape-titre { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:.88rem; overflow-wrap:anywhere; }
.equipe-historique { margin:0 0 0 18px; padding:0; font-size:.86rem; overflow-wrap:anywhere; }
.equipe-historique li { padding:2px 0; }
.equipe-avertissement { margin:6px 0 8px; }
/* Disponibilités reprises de l'agenda : une semaine par ligne, le mode ÉCRIT à côté de la pastille. */
.equipe-semaines { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:.86rem; }
.equipe-gestes { margin-top:12px; }
/* Téléphone : point de rupture en em (40em = 640 px), le bloc ne fixe aucune largeur en px. */
@media (max-width: 40em) {
  .carte.collaborateur, .carte.dossier, .carte.parcours, .carte.dispo { padding:14px; }
  .equipe-gestes .btn { flex:1 1 calc(50% - 8px); min-height:var(--cible); }
  .collaborateur-etape { font-size:.78rem; }
}

/* Cartes (section 16) */
/* Téléphone d'abord : le plan est un SVG souple (largeur 100 %, hauteur automatique), la liste
   équivalente est empilée dessous, les gestes passent en bas de carte ; aucune largeur fixe en px,
   point de rupture en em. La carte n'est jamais indispensable : tout ce qu'elle montre est écrit
   dans la liste, au clavier, sans survol. */
.carte-encart { margin-bottom:12px; }
.carte-limites { margin:6px 0 0 18px; padding:0; font-size:.82rem; }
.carte-limites li { padding:2px 0; overflow-wrap:anywhere; }
.carte-sous-titre { font-size:.78rem; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; margin:10px 0 4px; }
.carte-recherche { background:#fff; border:1px solid var(--bord); border-radius:14px; padding:14px 16px; margin-bottom:14px; box-shadow:var(--ombre); }
.carte-recherche .aide { font-size:.78rem; color:var(--gris); margin-top:6px; overflow-wrap:anywhere; }
.carte-resultats h3 { font-size:.82rem; color:var(--marine); margin:10px 0 4px; }
.carte-liste-resultats, .carte-liste-territoire, .carte-lignes, .carte-arrets, .carte-avertissements { list-style:none; margin:0; padding:0; }
.carte-liste-resultats li, .carte-liste-territoire li { padding:6px 0; border-bottom:1px solid var(--bord); font-size:.88rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; overflow-wrap:anywhere; }
.carte-resultat { background:none; border:none; padding:0; font:inherit; font-weight:700; color:var(--marine); text-align:left; cursor:pointer; text-decoration:underline; overflow-wrap:anywhere; }
/* Le plan : un SVG qui s'adapte à la largeur disponible, jamais une boîte figée. */
.carte-cadre { margin-top:10px; }
.carte-fond { display:block; width:100%; height:auto; background:var(--fond); border:1px solid var(--bord); border-radius:12px; touch-action:none; cursor:grab; }
.carte-fond:active { cursor:grabbing; }
.carte-contour { fill:#E8EEF3; stroke:var(--gris-clair); stroke-width:1.5; stroke-linejoin:round; }
.carte-fond pattern path { stroke:var(--bord); stroke-width:1; }
.carte-groupe circle { fill:var(--marine); fill-opacity:.82; stroke:#fff; stroke-width:2; }
.carte-groupe text { fill:#fff; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:11px; }
.carte-groupe.carte-point-choisi circle { fill:var(--jaune); stroke:var(--marine); }
.carte-groupe:focus-visible circle { stroke:var(--jaune); stroke-width:3; }
.carte-echelle line { stroke:var(--texte); stroke-width:3; stroke-linecap:square; }
.carte-echelle text { fill:var(--texte); font-family:'Instrument Sans', sans-serif; font-size:12px; font-weight:600; }
.carte-commandes { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:6px; }
.carte-commandes .carte-largeur { font-size:.82rem; font-weight:700; color:var(--marine); font-variant-numeric:tabular-nums; }
.carte-commandes .aide { font-size:.76rem; color:var(--gris); }
/* Liste équivalente : une ligne par établissement, tout écrit, rien qui dépende d'un survol. */
.carte-ligne { border:1px solid var(--bord); border-radius:10px; padding:10px 12px; margin:6px 0; background:var(--fond); }
.carte-ligne.choisie { border-color:var(--marine); background:var(--bleu-fond); }
.carte-ligne-haut { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:.9rem; }
.carte-choix { display:inline-flex; align-items:center; min-height:var(--cible); }
.carte-choix input { width:1.25em; height:1.25em; margin:0; }
.carte-ligne .aide { font-size:.78rem; color:var(--gris); margin-top:4px; overflow-wrap:anywhere; }
.carte-territoire { border:1px solid var(--bord); border-radius:10px; padding:10px 12px; margin:8px 0; background:var(--fond); }
.carte-compte { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:6px 0 8px; font-size:.86rem; color:var(--or-texte); }
/* Tournées : un arrêt par ligne, ordre écrit en chiffre, distances et durées écrites telles qu'elles sont. */
.carte-tournees { margin-bottom:14px; }
.carte.carte-tournee { padding:16px 18px; font-variant-numeric:tabular-nums; }
.carte-arret { border:1px solid var(--bord); border-radius:10px; padding:10px 12px; margin:6px 0; background:var(--fond); }
.carte-arret-titre { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:.9rem; overflow-wrap:anywhere; }
.carte-arret-ordre { display:inline-grid; place-items:center; width:1.6em; height:1.6em; border-radius:50%; background:var(--marine); color:#fff; font-weight:800; font-size:.78rem; }
.carte-avertissements { margin:4px 0 0 18px; font-size:.85rem; }
.carte-qui-confirme { font-size:.82rem; color:var(--or-texte); font-weight:600; margin-top:8px; overflow-wrap:anywhere; }
.carte-gestes { margin-top:12px; }
/* Le seul lien sortant du cockpit : le bouton et sa phrase, jamais l'un sans l'autre. */
/* L05 (§16.30) : l'état du fond détaillé et le geste qui l'inverse, collés à la carte. Sur
   téléphone, ce bloc remonte avec les commandes (règle d'ordre plus bas) : « éteindre » doit
   rester à UN appui, sans dérouler quoi que ce soit — c'est la seule commande de l'écran dont
   l'appui referme une sortie réseau. */
.carte-fond-etat { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:4px 0 6px; }
.carte-fond-etat .carte-fond-etat-texte { font-size:.82rem; font-weight:700; color:var(--marine); }
.carte-fond-etat .aide { font-size:.78rem; color:var(--gris); flex:1 1 100%; overflow-wrap:anywhere; }
.carte-lien-externe { margin-top:10px; }
.carte-lien-externe .aide { font-size:.78rem; color:var(--gris); margin-top:5px; overflow-wrap:anywhere; }
.carte-honnetete { overflow-wrap:anywhere; }
/* Téléphone : point de rupture en em (40em = 640 px), le bloc ne fixe aucune largeur en px. */
@media (max-width: 40em) {
  .carte.carte-plan, .carte.carte-liste, .carte.carte-client, .carte.carte-tournee { padding:14px; }
  .carte-gestes .btn, .carte-liste-resultats .btn { flex:1 1 calc(50% - 8px); min-height:var(--cible); }
  .carte-commandes .aide { flex:1 1 100%; }
  .carte-ligne-haut { font-size:.86rem; }
}

/* Cartes — familles et site (section 16.11) */
/* Les six jetons de famille de commerce, déclarés dans `:root` comme tous les autres jetons du
   socle. AUCUN n'emprunte --ok ni --ko : le vert et le rouge veulent dire « bon » et « problème »
   partout ailleurs dans le cockpit, et les détourner pour dire « boulangerie » rendrait les deux
   langages faux (H-CAR-33). Le bloc est ajouté en fin de feuille, après « Cartes (section 16) ». */
:root {
  --cat-restaurant:#1E3A5C; --cat-rapide:#A3502A; --cat-boulangerie:#8A6100;
  --cat-bar:#6EA3C1; --cat-traiteur:#5B7A52; --cat-glacier:#6B5B95;
}
/* Remplissage = famille de commerce (H-CAR-31). La forme, elle, vient du chemin SVG : c'est le
   canal qui survit au plein soleil, au daltonisme et à l'impression en noir et blanc (H-CAR-32). */
.carte-forme { stroke:#fff; stroke-width:1.5; }
.carte-forme.cat-restaurant { fill:var(--cat-restaurant); }
.carte-forme.cat-rapide { fill:var(--cat-rapide); }
.carte-forme.cat-boulangerie { fill:var(--cat-boulangerie); }
.carte-forme.cat-bar { fill:var(--cat-bar); }
.carte-forme.cat-traiteur { fill:var(--cat-traiteur); }
.carte-forme.cat-glacier { fill:var(--cat-glacier); }
/* Type non renseigné : gris, jamais une famille par défaut. */
.carte-forme.cat-non-renseignee { fill:var(--gris-clair); stroke:var(--gris); }
/* Remplissage = constat de site, quand la bascule échange les deux canaux — voir 16.10. */
.carte-forme.site-aucun-trouve { fill:var(--jaune); stroke:var(--marine); }
.carte-forme.site-a-revoir { fill:var(--or-fond); stroke:var(--jaune-fonce); stroke-width:2.5; }
.carte-forme.site-en-ligne { fill:none; stroke:var(--marine); stroke-width:2; }
.carte-forme.site-non-regarde { fill:var(--gris-clair); stroke:var(--gris); stroke-dasharray:2 2; }
/* Anneau = l'autre canal. « aucun site trouvé » est jaune, jamais rouge : c'est une occasion
   commerciale, pas une anomalie (H-CAR-33). « site en ligne » n'a aucun anneau : c'est le signal. */
.carte-anneau { fill:none; stroke-width:2.5; }
.carte-anneau.anneau-aucun-trouve { stroke:var(--jaune); stroke-width:3.5; }
.carte-anneau.anneau-a-revoir { stroke:var(--jaune); stroke-dasharray:3 3; }
.carte-anneau.anneau-non-regarde { stroke:var(--gris-clair); stroke-dasharray:1 3; }
.carte-anneau.anneau-famille.cat-restaurant { stroke:var(--cat-restaurant); }
.carte-anneau.anneau-famille.cat-rapide { stroke:var(--cat-rapide); }
.carte-anneau.anneau-famille.cat-boulangerie { stroke:var(--cat-boulangerie); }
.carte-anneau.anneau-famille.cat-bar { stroke:var(--cat-bar); }
.carte-anneau.anneau-famille.cat-traiteur { stroke:var(--cat-traiteur); }
.carte-anneau.anneau-famille.cat-glacier { stroke:var(--cat-glacier); }
.carte-anneau.anneau-famille.cat-non-renseignee { stroke:var(--gris-clair); stroke-dasharray:2 2; }
.carte-groupe.carte-point-choisi .carte-forme { stroke:var(--marine); stroke-width:3; }
.carte-groupe:focus-visible .carte-forme { stroke:var(--jaune); stroke-width:3; }
/* Légende : une ligne par famille et par état, la couleur toujours doublée d'un mot écrit. */
.carte-bascule { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:6px 0 10px; }
.carte-bascule .aide { font-size:.78rem; color:var(--gris); }
.carte-legende-liste { list-style:none; margin:4px 0 10px; padding:0; }
.carte-legende-ligne { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:6px 0; border-bottom:1px solid var(--bord); }
.carte-legende-ligne:last-child { border-bottom:0; }
.carte-legende-mot { font-weight:700; font-size:.88rem; color:var(--marine); }
.carte-legende-ligne .aide { font-size:.78rem; color:var(--gris); flex:1 1 100%; overflow-wrap:anywhere; }
.carte-puce { display:inline-block; width:.85em; height:.85em; border-radius:3px; border:1.5px solid var(--gris); background:var(--gris-clair); flex-shrink:0; }
.carte-puce.cat-restaurant { background:var(--cat-restaurant); border-color:var(--cat-restaurant); }
.carte-puce.cat-rapide { background:var(--cat-rapide); border-color:var(--cat-rapide); }
.carte-puce.cat-boulangerie { background:var(--cat-boulangerie); border-color:var(--cat-boulangerie); }
.carte-puce.cat-bar { background:var(--cat-bar); border-color:var(--cat-bar); }
.carte-puce.cat-traiteur { background:var(--cat-traiteur); border-color:var(--cat-traiteur); }
.carte-puce.cat-glacier { background:var(--cat-glacier); border-color:var(--cat-glacier); }
.carte-puce.cat-non-renseignee { background:var(--gris-clair); border-color:var(--gris); }
.carte-puce-contour { background:none; border-width:.18em; }
/* Même spécificité que les six règles de famille ci-dessus, et posée APRÈS elles : sinon
   `.carte-puce.cat-restaurant` (deux classes) l'emportait sur `.carte-puce-contour` (une), les
   puces restaient PLEINES dans les deux positions de la bascule, et la légende montrait un autre
   signal que la carte (H-CAR-32 : « son libellé dans la liste et la légende »). */
.carte-puce.carte-puce-contour { background:none; border-width:.18em; }
.carte-puce.anneau-aucun-trouve, .carte-puce.site-aucun-trouve { background:var(--jaune); border-color:var(--jaune-fonce); border-radius:50%; }
.carte-puce.anneau-a-revoir, .carte-puce.site-a-revoir { background:var(--or-fond); border-color:var(--jaune-fonce); border-style:dashed; border-radius:50%; }
.carte-puce.anneau-en-ligne, .carte-puce.site-en-ligne { background:none; border-color:var(--marine); border-radius:50%; }
.carte-puce.anneau-non-regarde, .carte-puce.site-non-regarde { background:var(--neutre-fond); border-color:var(--gris-clair); border-style:dotted; border-radius:50%; }
/* Constat de site sur une fiche ouverte, et étiquette de la nappe : deux blocs DISTINCTS. */
.carte-site, .carte-site-nappe { margin-top:10px; }
.carte-site .aide, .carte-site-nappe .aide { font-size:.78rem; color:var(--gris); margin-top:5px; overflow-wrap:anywhere; }
.carte-site-nappe { border-left:3px solid var(--gris-clair); padding-left:10px; }
/* §16.28 (L30) — la lecture publique du site. Même retrait que l'étiquette de la nappe, parce que
   c'est la même nature : un RENSEIGNEMENT daté, pas notre constat. Rien ici n'emprunte le jaune du
   constat ni la couleur d'un état : une lecture ne peint aucun anneau (H-CAR-70). */
.carte-lecture { margin-top:10px; border-left:3px solid var(--gris-clair); padding-left:10px; }
.carte-lecture .carte-lecture-titre h4 { margin:0; font-size:.9rem; }
.carte-lecture .aide { font-size:.78rem; color:var(--gris); margin-top:5px; overflow-wrap:anywhere; }
.carte-lecture .carte-lecture-entete { color:var(--texte); font-weight:600; }
.carte-lecture .obj-ligne .val { overflow-wrap:anywhere; }
.carte-lecture a { overflow-wrap:anywhere; }
/* Points hors du champ : le bouton de leur territoire, jamais un conseil impossible à suivre. */
.carte-hors-champ { margin-top:6px; }
.carte-aller-territoire { margin-top:8px; }
@media (max-width: 40em) {
  .carte-legende-ligne { padding:8px 0; }
  .carte-aller-territoire .btn, .carte-bascule .btn { flex:1 1 calc(50% - 8px); min-height:var(--cible); }
}

/* Cartes §16.23 — le code couleur sur les commerces d'OpenStreetMap (14/09/2026, démonstration).
   Même forme et même teinte que nos fiches, en plus petit et légèrement translucide ; jamais le
   jaune du constat (H-CAR-30). Le liseré blanc détache le point du fond IGN. */
.carte-nappe-point { fill-opacity:.88; stroke:#fff; stroke-width:.9; }
.carte-nappe-point.cat-restaurant { fill:var(--cat-restaurant); }
.carte-nappe-point.cat-rapide { fill:var(--cat-rapide); }
.carte-nappe-point.cat-boulangerie { fill:var(--cat-boulangerie); }
.carte-nappe-point.cat-bar { fill:var(--cat-bar); }
.carte-nappe-point.cat-traiteur { fill:var(--cat-traiteur); }
.carte-nappe-point.cat-glacier { fill:var(--cat-glacier); }
.carte-nappe-point.cat-non-renseignee { fill:var(--gris-clair); stroke:var(--gris); }
.carte-nappe-point.nappe-site-renseigne { fill:var(--marine); }
.carte-nappe-point.nappe-site-non-renseigne { fill:var(--gris-clair); stroke:var(--gris); }
.carte-anneau-nappe { fill:none; stroke-width:1.6; pointer-events:none; }
.carte-anneau-nappe.nappe-site-osm { stroke:var(--marine); }
.carte-anneau-nappe.anneau-famille-nappe.cat-restaurant { stroke:var(--cat-restaurant); }
.carte-anneau-nappe.anneau-famille-nappe.cat-rapide { stroke:var(--cat-rapide); }
.carte-anneau-nappe.anneau-famille-nappe.cat-boulangerie { stroke:var(--cat-boulangerie); }
.carte-anneau-nappe.anneau-famille-nappe.cat-bar { stroke:var(--cat-bar); }
.carte-anneau-nappe.anneau-famille-nappe.cat-traiteur { stroke:var(--cat-traiteur); }
.carte-anneau-nappe.anneau-famille-nappe.cat-glacier { stroke:var(--cat-glacier); }
.carte-anneau-nappe.anneau-famille-nappe.cat-non-renseignee { stroke:var(--gris-clair); }
.carte-nappe-marque { cursor:pointer; }
/* §16.26 : survol, focus et sélection d'un point de nappe ne prennent JAMAIS le jaune — la légende affirme
   « un point d'OpenStreetMap ne porte jamais le jaune : le jaune est un constat fait par l'un de vous ».
   Ces contours étaient en jaune foncé, la teinte du « à revoir » de nos fiches. */
.carte-nappe-marque:hover .carte-nappe-point, .carte-nappe-marque:focus-visible .carte-nappe-point { stroke:var(--marine); stroke-width:1.8; }

/* Cartes §16.24 — sélection sur la carte (Ctrl + clic, mode tactile) et liste « À analyser ». */
.carte-nappe-selectionnee .carte-nappe-point { stroke:var(--texte); stroke-width:2.6; stroke-dasharray:2 1.5; fill-opacity:1; }
.carte-nappe-choisi .carte-nappe-point { stroke:var(--marine); stroke-width:2.2; fill-opacity:1; }
.carte-barre-selection { display:flex; flex-direction:column; gap:.4rem; margin-top:.6rem; }
.carte-barre-selection.carte-barre-active { padding:.75rem .9rem; border:1px solid var(--jaune); border-radius:12px; background:var(--or-fond); }
.carte-barre-selection .carte-titre h4 { margin:0; font-size:1rem; }
.carte-liste-analyses { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.carte-analyse { padding:.65rem .8rem; border:1px solid var(--bord); border-radius:10px; background:#fff; display:flex; flex-direction:column; gap:.25rem; }
.carte-analyse .actions { flex-wrap:wrap; gap:.4rem; }

/* Cartes §16.25 — gestes et téléphone (demande de Rémi du 15/09/2026 : « rends ça fluide »).
   La VITRE est le cadre fixe de la carte : elle découpe le dessin qui glisse et s'agrandit sous le
   doigt pendant un geste (H-TEL-1), et elle seule refuse le défilement et le zoom de la page
   (`touch-action: none`, H-TEL-10). Partout ailleurs, la page défile au doigt comme avant. */
.carte-vitre { position:relative; overflow:hidden; border:1px solid var(--bord); border-radius:12px; background:var(--fond); touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; cursor:grab; }
.carte-vitre:active { cursor:grabbing; }
.carte-vitre .carte-fond { border:0; border-radius:0; transform-origin:0 0; }
.carte-vitre.carte-en-geste .carte-fond { will-change:transform; }
.carte-recherche-aides { margin:-6px 0 14px; padding:0 6px; }
.carte-recherche-aides .aide { font-size:.78rem; color:var(--gris); margin-top:4px; overflow-wrap:anywhere; }
.carte-commandes-aide { font-size:.76rem; color:var(--gris); margin:0 0 6px; overflow-wrap:anywhere; }
.carte-fiches-ouvertes > .carte { margin-top:12px; box-shadow:none; }
@media (hover: none) and (pointer: coarse) {
  .carte-commandes .btn, .carte-fond-detaille button, .carte-fond-etat .btn, .carte-bascule .btn { min-height:var(--cible); min-width:var(--cible); }
}
/* Téléphone (≤ 37,5 em, soit 600 px) : la carte et sa barre de recherche dans le PREMIER écran
   (H-TEL-8). L'ordre est VISUEL seulement : le document, donc le lecteur d'écran et le clavier,
   garde l'ordre d'avant, et les encarts d'honnêteté restent dans la page, sous la carte. */
@media (max-width: 37.5em) {
  .carte-ecran { display:flex; flex-direction:column; }
  .carte-ecran > .carte-bloc { order:10; min-width:0; }
  .carte-ecran > [data-bloc="titre"] { order:0; }
  .carte-ecran > [data-bloc="recherche"] { order:1; }
  .carte-ecran > [data-bloc="plan"] { order:2; }
  .carte-ecran > [data-bloc="recherche-aides"] { order:4; }
  .carte-ecran > [data-bloc="encart"], .carte-ecran > [data-bloc="lecture"] { order:5; }
  .carte-ecran > [data-bloc="titre"] > .carte-titre { margin-bottom:4px; }
  .carte-ecran > [data-bloc="titre"] h2 { font-size:1.15rem; }
  .carte-recherche { padding:8px 10px; margin-bottom:8px; }
  .carte-recherche .champ { margin-bottom:0; }
  .carte-recherche .champ label { font-size:.72rem; }
  .carte-recherche-aides { margin:0 0 14px; }
  .carte.carte-plan { display:flex; flex-direction:column; padding:8px 6px 12px; }
  .carte-plan > * { order:3; }
  .carte-plan > .carte-titre { order:0; padding:0 6px; margin-bottom:2px; }
  .carte-plan > .carte-commandes { order:1; padding:0 6px; margin-bottom:4px; }
  /* L05 : « Fond IGN » / « éteindre » restent dans le premier écran du téléphone, avec les
     commandes de zoom, et jamais sous la carte : un geste, sans faire défiler. */
  .carte-plan > .carte-fond-etat { order:1; padding:0 6px; margin-bottom:4px; }
  .carte-plan > .carte-cadre { order:2; margin-top:0; }
  .carte-plan > .carte-barre-selection { order:2; }
  .carte-plan > .carte-fiches-ouvertes { order:2; }
  .carte-plan > p, .carte-plan > ul, .carte-plan > .filtres, .carte-plan > .carte-barre-selection { margin-left:6px; margin-right:6px; }
  .carte-commandes .btn, .carte-fond-detaille button, .carte-fond-etat .btn, .carte-bascule .btn, .carte-barre-selection .btn, .carte-aller-territoire .btn { min-height:var(--cible); min-width:var(--cible); }
  .carte-commandes [data-action="zoom-avant"], .carte-commandes [data-action="zoom-arriere"] { font-size:1.3rem; }
  .carte-cadre > .aide { margin-left:6px; margin-right:6px; }
}