/* =====================================================================================================
   Pepe — styles. Tout passe par les tokens de theme.css : aucune couleur ni ombre en dur ici ; tailles et marges lisent l’échelle (seuls quelques réglages fins de 1 à 3 px restent écrits).
   Système de design PROPOSÉ (06/11), EN ATTENTE DE LA CHARTE DE JUSTINE. Vitrine : design.html.
   Plan : 1. socle · 2. les 10 composants de base · 3. coquille · 4. écrans · 5. téléphone et tactile.
   ===================================================================================================== */

/* ---------- 1. Socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: var(--graisse-normale) var(--texte-4)/var(--interligne) var(--police);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-2); }
::selection { background: var(--accent-doux); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font: var(--graisse-titre) var(--texte-6)/var(--interligne-serre) var(--police); letter-spacing: -.02em; }
h2 { font: var(--graisse-forte) var(--texte-5)/var(--interligne-serre) var(--police); letter-spacing: -.01em; }
h3, h2.petit { font: var(--graisse-forte) var(--texte-1)/var(--interligne-serre) var(--police); letter-spacing: var(--espacement-capitales); text-transform: uppercase; color: var(--texte-tiers); }
h2.petit { margin: var(--e-8) 0 var(--e-3); }
h3 { margin: 0 0 var(--e-2); }
p { margin: 0; }
.meta { color: var(--texte-tiers); font-size: var(--texte-2); }
.note { font-size: var(--texte-3); color: var(--texte-second); }
.vide { color: var(--vide-texte); }
.surtitre { font: var(--graisse-forte) var(--texte-1)/var(--interligne-serre) var(--police); letter-spacing: 0; text-transform: none; color: var(--accent-texte); }   /* casse normale (audit du 10/11, G3) */
.alerte, .ton-alerte strong { color: var(--accent-texte); }
.erreur { color: var(--erreur); }
kbd { font: var(--graisse-moyenne) var(--texte-1)/1.5 var(--police); color: var(--texte-tiers); background: var(--surface); border: var(--bord); border-radius: var(--r-1); padding: 0 var(--e-1); box-shadow: var(--ombre-1); }
/* Grain papier : sous le contenu, jamais par-dessus le texte. */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: var(--grain); opacity: var(--grain-force); mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; } }
:root[data-theme="dark"] body::after { mix-blend-mode: screen; }
a, button, input, select, textarea, label, summary, [role="button"], tr.cliquable, .resultats li { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }

/* ---------- 2. Les 10 composants de base ----------
   (1) bouton · (2) champ · (3) liste · (4) ligne de planning · (5) carte · (6) onglets · (7) badge · (8) menu · (9) état vide · (10) barre latérale.
   États communs : survol --survol, actif --actif, focus --focus, désactivé --desactive, erreur --erreur, chargement .chargement. */

/* (1) Bouton : .btn (contour léger), .btn.plein (action principale, une par écran), .btn.discret (sans cadre), .btn.petit, .btn-icone. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--cible-dense); padding: 0 var(--e-3);
  font: var(--graisse-moyenne) var(--texte-3)/1 var(--police); color: var(--texte); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--surface); border: var(--bord); border-color: var(--ligne-forte); border-radius: var(--r-3); box-shadow: var(--ombre-1);
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe); }
.btn:hover { background: color-mix(in srgb, var(--surface) 100%, transparent); border-color: var(--texte-tiers); }
.btn:active { background: var(--actif); }
.btn.plein { background: var(--accent); border-color: transparent; color: var(--accent-sur); font-weight: var(--graisse-forte); }
.btn.plein:hover { background: color-mix(in srgb, var(--accent) 92%, white); }
.btn.discret { background: transparent; border-color: transparent; box-shadow: none; color: var(--texte-second); }
.btn.discret:hover { background: var(--survol); color: var(--texte); }
.btn.discret:active { background: var(--actif); }
.btn.petit { min-height: 24px; padding: 0 var(--e-2); font-size: var(--texte-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--desactive); cursor: not-allowed; }
.btn-icone { display: inline-grid; place-items: center; flex: none; width: var(--cible-dense); height: var(--cible-dense); padding: 0; border: 0; border-radius: var(--r-2);
  background: none; color: var(--texte-tiers); cursor: pointer; font-size: var(--texte-4); transition: background var(--duree) var(--courbe); }
.btn-icone:hover { background: var(--survol); color: var(--texte); }
.btn-icone:active { background: var(--actif); }
.btn-icone[aria-pressed="true"] { color: var(--accent-texte); }

/* (2) Champ : libellé au-dessus, cadre fin, focus orange. */
.champ { display: grid; gap: var(--e-1); font-size: var(--texte-2); font-weight: var(--graisse-moyenne); color: var(--texte-second); }
.champ > :not(span) { color: var(--texte); }
.saisie, .champ input, .champ select, .champ textarea, .demande textarea, .fenetre input, .fenetre select, .fenetre textarea, .qui select, .connexion input, .recherche-champ {
  width: 100%; min-height: 32px; font: var(--graisse-normale) var(--texte-4)/var(--interligne) var(--police); color: var(--texte);
  padding: var(--e-1) var(--e-3); background: var(--surface); border: var(--bord); border-color: var(--ligne-forte); border-radius: var(--r-2);
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe); }
:is(.saisie, .champ input, .champ select, .champ textarea, .demande textarea, .fenetre input, .fenetre select, .fenetre textarea, .qui select, .connexion input):hover { border-color: var(--texte-tiers); }
:is(.saisie, .champ input, .champ select, .champ textarea, .demande textarea, .fenetre input, .fenetre select, .fenetre textarea, .qui select, .connexion input):focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
:is(.saisie, .champ input, .fenetre input, .fenetre textarea)[aria-invalid="true"] { border-color: var(--erreur); background: var(--erreur-fond); }
:is(input, select, textarea):disabled { opacity: var(--desactive); cursor: not-allowed; }
.message-erreur { font-size: var(--texte-2); color: var(--erreur); }

/* (3) Liste : rangées sans cadre, séparées par l'air ; survol discret. */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.liste > li { display: flex; align-items: center; gap: var(--e-3); min-height: 36px; padding: var(--e-2) var(--e-3); border-radius: var(--r-2); }
.liste > li:hover { background: var(--survol); }

/* (4) Ligne de planning : la puce d'un jour (heure, titre, qui). Voir aussi § Planning. */
.puce-plan { display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: 24px; padding: 3px var(--e-2); font-size: var(--texte-2); line-height: var(--interligne-serre);
  border-radius: var(--r-1); background: var(--accent-doux); cursor: grab; transition: background var(--duree) var(--courbe); }
.puce-plan:hover { background: color-mix(in srgb, var(--orange) 18%, transparent); }
.puce-plan.tache { background: var(--surface); box-shadow: inset 0 0 0 var(--trait) var(--ligne-forte); }
.puce-plan.tache:hover { background: var(--survol); }
.puce-plan.projet { background: transparent; box-shadow: inset 0 0 0 var(--trait) var(--ligne-forte); border: 0; }
.puce-plan.type-soiree { box-shadow: inset 3px 0 0 var(--accent); font-weight: var(--graisse-forte); }
.puce-plan.fait { opacity: .55; }
.puce-plan.fait .puce-titre { text-decoration: line-through; }
.puce-plan.retard .case { border-color: var(--accent); }

/* (5) Carte : surface blanche, ombre de niveau 1, pas de bordure appuyée. */
.carte, .carte-projet, .bloc, .bloc-pourmoi, .fiche, .proposition, .entree, .confirmation {
  background: var(--surface); border: 0; border-radius: var(--r-5); box-shadow: var(--ombre-1); padding: var(--e-4); }  /* refonte A : grands rayons, sans cadre */
a.carte, .carte-projet { text-decoration: none; color: inherit; transition: box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
a.carte:hover, .carte-projet:hover { box-shadow: var(--ombre-2), inset 0 0 0 var(--trait) var(--ligne-forte); }
a.carte:active, .carte-projet:active { transform: translateY(1px); }

/* (6) Onglets : soulignés (vues d'un projet) ; segments .vues (Semaine / Mois). */
.onglets { display: flex; gap: var(--e-1); border-bottom: var(--bord); overflow-x: auto; scrollbar-width: none; }
.onglets a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 36px; padding: 0 var(--e-3); margin-bottom: -1px; font-size: var(--texte-3); font-weight: var(--graisse-moyenne);
  text-decoration: none; color: var(--texte-tiers); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--duree) var(--courbe); }
.onglets a:hover { color: var(--texte); }
.onglets a[aria-current="page"] { color: var(--texte); border-color: var(--accent); }
.onglets .compte, :is(h2, h3, summary) > .compte { font-size: var(--texte-1); background: var(--actif); color: var(--texte-second); border-radius: var(--r-rond); padding: 0 var(--e-2); }
:is(h2, h3, summary) > .compte { margin-left: var(--e-2); font-weight: var(--graisse-moyenne); letter-spacing: 0; text-transform: none; vertical-align: .1em; }
/* Un morceau qui suit un autre sur la même ligne : de l'espace, jamais « · » (audit du 10/11, G4). */
.apres { margin-left: var(--e-2); }
.vues { display: inline-flex; gap: 2px; padding: 2px; background: var(--actif); border-radius: var(--r-3); }
.vues button { min-height: 26px; font: var(--graisse-moyenne) var(--texte-2)/1 var(--police); border: 0; background: none; color: var(--texte-second); padding: 0 var(--e-3); border-radius: var(--r-2); cursor: pointer; }
.vues button:hover { color: var(--texte); }
.vues button[aria-pressed="true"] { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-1); font-weight: var(--graisse-forte); }

/* (7) Badge : compteur plein (.badge), étiquette (.pastille, .etiquette). */
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; font: var(--graisse-forte) var(--texte-1)/1 var(--police);
  background: var(--accent); color: var(--accent-sur); border-radius: var(--r-rond); font-variant-numeric: tabular-nums; }
.pastille, .etiquette { display: inline-flex; align-items: center; gap: var(--e-1); height: 20px; padding: 0 var(--e-2); font: var(--graisse-moyenne) var(--texte-2)/1 var(--police);
  color: var(--texte-second); background: var(--actif); border: 0; border-radius: var(--r-1); white-space: nowrap; }
.etiquette { flex: none; height: 18px; font-size: var(--texte-1); margin-right: var(--e-1); }
.pastille.ton-alerte { color: var(--accent-texte); background: var(--accent-doux); }
.pastille.ton-ok { color: var(--texte); background: var(--accent-doux); }
.pastille.ton-pepe { background: var(--texte); color: var(--fond); }

/* (8) Menu : liste flottante (⋯, menu des blocs, palette). */
.menu-plus { position: relative; flex: none; }
.menu-plus summary { list-style: none; cursor: pointer; width: var(--cible-dense); height: var(--cible-dense); display: grid; place-items: center; border-radius: var(--r-2); color: var(--texte-tiers); font-weight: var(--graisse-titre); }
.menu-plus summary::-webkit-details-marker { display: none; }
.menu-plus summary:hover, .menu-plus[open] summary { background: var(--survol); color: var(--texte); }
.menu-plus-liste, .menu-blocs { position: absolute; z-index: 30; display: grid; gap: 1px; min-width: 13rem; padding: var(--e-1);
  background: var(--surface); border: 0; border-radius: var(--r-3); box-shadow: var(--ombre-3), inset 0 0 0 var(--trait) var(--ligne); }
.menu-plus-liste { right: 0; top: calc(100% + var(--e-1)); }
.menu-plus-liste > :is(button, a, .btn) { justify-content: flex-start; width: 100%; min-height: 30px; padding: 0 var(--e-3); border: 0; background: none; box-shadow: none; color: var(--texte); font-size: var(--texte-3); border-radius: var(--r-2); text-align: left; }
.menu-plus-liste > :is(button, a, .btn):hover { background: var(--survol); }
.menu-plus-liste > .alerte { color: var(--accent-texte); }
/* Un ⋯ en début de ligne : la liste s'ouvre vers la droite (posé par menuPlus, js/ui.js). */
.menu-plus-liste.a-droite { right: auto; left: 0; }

/* (9) État vide : ce qui manque, un exemple, le bouton qui crée le premier. */
.vide-exemple, .etat-vide { display: grid; gap: var(--e-2); justify-items: start; max-width: 40rem; padding: var(--e-6); color: var(--texte-second); font-size: var(--texte-3);
  background: var(--surface-creuse); border: var(--trait) dashed var(--ligne-forte); border-radius: var(--r-3); }
.vide-exemple .meta { font-style: normal; }
.vide-exemple > p:first-child, .etat-vide > strong { color: var(--texte); font-weight: var(--graisse-moyenne); font-size: var(--texte-4); }
.bloc-pourmoi .vide-exemple { padding: var(--e-1) 0; border: 0; background: none; }
/* Chargement : bandes qui respirent (sans texte qui saute). */
.chargement { padding: var(--e-8); color: var(--texte-tiers); font-size: var(--texte-3); }
.squelette { display: block; height: 12px; border-radius: var(--r-1); background: linear-gradient(90deg, var(--chargement-a), var(--chargement-b), var(--chargement-a)); background-size: 200% 100%; animation: respire 1.2s ease-in-out infinite; }
@keyframes respire { from { background-position: 100% 0; } to { background-position: -100% 0; } }
div.erreur { display: grid; gap: var(--e-3); justify-items: start; padding: var(--e-6); color: var(--texte); background: var(--erreur-fond); border-radius: var(--r-3); }

/* (10) Barre latérale : voir § 3 (.menu). */

/* ---------- 3. Coquille : barre latérale, contenu, fil d'Ariane ---------- */
.coquille { display: grid; grid-template-columns: var(--largeur-barre) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh;
  /* Règle de largeur unique (10/11) : marge de --marge-contenu au moins ; au-delà de --largeur-ecran, le surplus se répartit de chaque côté. */
  --barre-reelle: var(--largeur-barre);
  --gouttiere: max(var(--marge-contenu), calc((100vw - var(--barre-reelle) - var(--largeur-ecran)) / 2));
  --gouttiere-g: var(--gouttiere); }
.menu { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--e-4);
  padding: calc(var(--e-3) + env(safe-area-inset-top, 0px)) var(--e-2) calc(var(--e-3) + env(safe-area-inset-bottom, 0px)) calc(var(--e-2) + env(safe-area-inset-left, 0px));
  background: var(--fond-barre); border-right: var(--bord); font-size: var(--texte-3); }
.tete-menu { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-1) var(--e-2); }
.menu .bouton-menu { display: none; }
.corps-menu { display: flex; flex-direction: column; gap: var(--e-4); flex: 1; }
.marque { display: flex; gap: var(--e-2); align-items: center; text-decoration: none; font: var(--texte-4)/1.1 var(--police-marque); }
.marque small { display: block; font: var(--graisse-moyenne) var(--texte-1)/1.3 var(--police); color: var(--texte-tiers); letter-spacing: .02em; }
.logo { width: 28px; height: 28px; border-radius: var(--r-2); display: block; object-fit: cover; }
.arbre, .arbre .pages, .sous-pages { display: flex; flex-direction: column; gap: 1px; }
.page { display: flex; align-items: center; gap: var(--e-2); min-width: 0; flex: 1; min-height: var(--cible-dense); padding: 0 var(--e-2); border-radius: var(--r-2);
  text-decoration: none; color: var(--texte-second); font: var(--graisse-moyenne) var(--texte-3)/1 var(--police); background: none; border: 0; text-align: left; cursor: pointer; }
.page .titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page:hover, .ligne-noeud:hover { background: var(--survol); color: var(--texte); }
.page:active { background: var(--actif); }
.page[aria-current="page"] { background: var(--actif); color: var(--texte); font-weight: var(--graisse-forte); }
.page[aria-current="page"] .ico { color: var(--accent); }
.ligne-noeud { display: flex; align-items: center; border-radius: var(--r-2); }
.ligne-noeud .page:hover { background: none; }
.chevron, .bl-chevron { flex: none; width: 20px; height: 20px; border: 0; border-radius: var(--r-1); background: none; color: var(--texte-tiers); cursor: pointer;
  font: var(--graisse-titre) var(--texte-3)/1 var(--police); transition: transform var(--duree) var(--courbe); }
.chevron { margin-left: 2px; }
.chevron:hover, .bl-chevron:hover { background: var(--actif); color: var(--texte); }
.chevron[aria-expanded="true"], .bl-chevron[aria-expanded="true"] { transform: rotate(90deg); }
.chevron-vide { flex: none; width: 22px; }
.sous-pages { padding-left: var(--e-5); }
.sous-pages .page { font-size: var(--texte-3); }
.compte { font-size: var(--texte-1); color: var(--texte-tiers); font-weight: var(--graisse-normale); font-variant-numeric: tabular-nums; }
.section { display: grid; gap: 1px; }
.entete-section { display: flex; align-items: center; justify-content: space-between; }
.groupe { font: var(--graisse-forte) var(--texte-1)/1 var(--police); letter-spacing: var(--espacement-capitales); text-transform: uppercase; color: var(--texte-tiers);
  background: none; border: 0; cursor: pointer; padding: var(--e-2); border-radius: var(--r-2); text-align: left; }
.groupe:hover { color: var(--texte); }
.groupe[aria-expanded="false"]::after { content: ' ›'; }
.groupe .resp { text-transform: none; letter-spacing: 0; font-weight: var(--graisse-moyenne); }
.plus { opacity: 0; border: 0; background: none; color: var(--texte-tiers); font: var(--graisse-titre) var(--texte-4)/1 var(--police); width: 22px; height: 22px; border-radius: var(--r-1); cursor: pointer; }
.entete-section:hover .plus, .plus:focus-visible, .ligne-noeud:hover .plus, .ligne-noeud:focus-within .plus { opacity: 1; }
.plus:hover { background: var(--actif); color: var(--texte); }
.ligne-noeud .plus { margin-right: var(--e-1); }
.vide.petit { font-size: var(--texte-2); padding: var(--e-1) var(--e-3); }
.espaces { display: grid; gap: var(--e-2); }
.espace-bientot .groupe { display: inline-flex; align-items: center; white-space: nowrap; cursor: default; opacity: .75; }
.espace-bientot .groupe:hover { color: var(--texte-tiers); }
.etiquette-menu { margin: var(--e-2) 0 0; padding: var(--e-3) var(--e-2) 0; border-top: var(--bord); font: var(--graisse-forte) var(--texte-1)/1 var(--police); letter-spacing: var(--espacement-capitales); text-transform: uppercase; color: var(--texte-tiers); }
.bas-arbre { margin-top: var(--e-2); padding-top: var(--e-2); border-top: var(--bord); }
/* Recherche ⌘K en tête du menu : un faux champ. */
.recherche { color: var(--texte-tiers); flex: none; }
.menu .recherche { display: flex; align-items: center; gap: var(--e-2); min-height: 30px; padding: 0 var(--e-2); font: var(--graisse-normale) var(--texte-3)/1 var(--police);
  background: var(--surface); border: 0; border-radius: var(--r-2); box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); min-width: 0; cursor: pointer; }
.menu .recherche:hover { box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne-forte); color: var(--texte-second); }
.recherche kbd { margin-left: auto; }
.page .badge { margin-left: auto; }
/* Bas du menu : qui je suis. */
.pied-menu { margin-top: auto; display: grid; gap: var(--e-3); padding-top: var(--e-2); }
.qui { display: grid; gap: var(--e-2); font-size: var(--texte-3); padding: 0 var(--e-2); }
.qui label { display: grid; gap: var(--e-1); }
.qui .btn { justify-content: flex-start; }
.qui .btn.petit { background: transparent; border-color: transparent; box-shadow: none; color: var(--texte-second); padding: 0 var(--e-2); }
.qui .btn.petit:hover { background: var(--survol); color: var(--texte); }
.depot { display: contents; }
.menu .depot .btn { justify-content: center; }

.contenu { min-width: 0; padding: calc(var(--e-4) + env(safe-area-inset-top, 0px)) max(var(--gouttiere), env(safe-area-inset-right, 0px)) calc(var(--e-12) + env(safe-area-inset-bottom, 0px)) max(var(--gouttiere-g), env(safe-area-inset-left, 0px)); }
.barre-haut { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin: calc(-1 * var(--e-4)) calc(-1 * var(--gouttiere)) var(--e-5) calc(-1 * var(--gouttiere-g)); padding: var(--e-2) var(--gouttiere) var(--e-2) var(--gouttiere-g);
  background: color-mix(in srgb, var(--fond) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: var(--bord); }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: var(--texte-3); color: var(--texte-tiers); }
.fil a { display: inline-flex; align-items: center; gap: var(--e-1); min-height: 24px; padding: 0 var(--e-2); text-decoration: none; border-radius: var(--r-1); max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil a:hover { background: var(--survol); color: var(--texte); }
.fil a[aria-current="page"] { color: var(--texte); font-weight: var(--graisse-moyenne); }
.fil .sep { opacity: .5; }
.fil .etape { padding: 0 var(--e-2); }
.bandeau { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-5); padding: var(--e-2) var(--e-3); font-size: var(--texte-2); color: var(--texte-second);
  background: var(--surface-creuse); border-radius: var(--r-2); box-shadow: inset 0 0 0 var(--trait) var(--ligne); }
.bandeau::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--r-rond); background: var(--accent); }

/* Coque sur ordinateur : menu repliable, échelle, largeur (10/11) */
/* Échelle : la taille racine monte à partir de 1200 px (theme.css) ; textes, espacements, menu et lignes suivent. */
/* Largeur : voir --gouttiere sur .coquille ; le menu replié rend ses 15,5 rem au contenu. */
.replier-menu, .ouvrir-menu { display: none; align-items: center; justify-content: center; flex: none; padding: 0; color: var(--texte-tiers); background: none; border: 0; border-radius: var(--r-2); cursor: pointer; }
.replier-menu:hover, .ouvrir-menu:hover { background: var(--survol); color: var(--texte); }
.replier-menu:active, .ouvrir-menu:active { background: var(--actif); }
.replier-menu .ico, .ouvrir-menu .ico { width: 1.25rem; height: 1.25rem; }
@media screen and (min-width: 761px) {
  .replier-menu { display: inline-flex; width: var(--cible-dense); height: var(--cible-dense); }
  .menu { width: var(--largeur-barre); justify-self: start; }
  .coquille, .menu { transition: grid-template-columns .18s var(--courbe), transform .18s var(--courbe); }
  .ouvrir-menu { position: fixed; z-index: 6; top: var(--e-2); left: max(var(--e-3), env(safe-area-inset-left, 0px)); width: var(--cible); height: var(--cible); }
  body.menu-replie .coquille { --barre-reelle: 0px; --gouttiere-g: max(4.75rem, var(--gouttiere)); grid-template-columns: 0 minmax(0, 1fr); }
  body.menu-replie .menu { transform: translateX(-100%); visibility: hidden; transition: transform .18s var(--courbe), visibility 0s linear .18s; }
  body.menu-replie .ouvrir-menu { display: inline-flex; }
}
@media (hover: none) and (pointer: coarse) { .replier-menu { width: var(--cible); height: var(--cible); } }

/* ---------- 4. Écrans ---------- */
/* Commun */
.vue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); max-width: var(--largeur-ecran); }  /* minmax(0) : un tableau large défile dans son cadre au lieu d’élargir l’écran */
.entete { display: grid; gap: var(--e-2); }
.objectif { max-width: var(--largeur-lecture); color: var(--texte-second); }
.retour { font-size: var(--texte-3); color: var(--texte-tiers); }
.palette-btn { justify-content: space-between; color: var(--texte-tiers); }
.entete > .btn { justify-self: start; }
.barre-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.ligne-haut { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.partie { display: grid; gap: var(--e-3); min-width: 0; }
.partie > h2.petit { margin: 0; }
.partie > .entete h2 { margin: 0; }
.partie > .entete h2 a { color: inherit; text-decoration: none; }
.partie > .entete h2 a:hover { color: var(--accent-texte); }
.ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }
.page .ico { color: var(--texte-tiers); width: 16px; height: 16px; }
.page:hover .ico { color: inherit; }
a.avec-icone, span.avec-icone { display: inline-flex; align-items: center; gap: var(--e-2); }
a.avec-icone .ico { color: var(--texte-tiers); }
.surtitre .ico { vertical-align: -.2em; }
.ligne-icone { flex: none; padding-top: 2px; color: var(--texte-tiers); font-size: var(--texte-4); }
.propose { color: var(--texte-tiers); }
.propose .etiquette { margin-left: auto; }

/* Projets */
.grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--e-3); }
.carte-projet { display: grid; gap: var(--e-2); align-content: start; }
.carte-projet strong { font-size: var(--texte-4); font-weight: var(--graisse-forte); }
.carte-projet p.prochaine { font-size: var(--texte-3); color: var(--texte-second); }
.barre { height: 4px; background: var(--actif); border-radius: var(--r-rond); overflow: hidden; }
.barre span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.prochaine { font-size: var(--texte-3); }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--e-4); }
.espace-projets { display: grid; gap: var(--e-3); min-width: 0; }
.espace-projets h2.petit { margin: var(--e-3) 0 0; }
.espace-projets .resp { text-transform: none; letter-spacing: 0; font-weight: var(--graisse-moyenne); }
.pages-espace { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pages-espace li { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; }
.pages-espace .avec-icone { min-height: var(--cible-dense); padding: 0 var(--e-3); font-size: var(--texte-3); color: inherit; text-decoration: none; min-width: 0; overflow-wrap: anywhere;
  background: var(--surface); border-radius: var(--r-2); box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); }
.pages-espace a.avec-icone:hover { box-shadow: var(--ombre-2), inset 0 0 0 var(--trait) var(--ligne-forte); }
.rangement .pages-espace { flex-direction: column; align-items: flex-start; }
.projets-faits summary { cursor: pointer; padding: var(--e-2) 0; font: var(--graisse-forte) var(--texte-1)/1 var(--police); letter-spacing: var(--espacement-capitales); text-transform: uppercase; color: var(--texte-tiers); }
.projets-faits summary:hover { color: var(--texte); }
.projets-faits[open] summary { margin-bottom: var(--e-3); }

/* Projet : kanban, tableau, propriétés */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--e-3); margin-top: var(--e-3); align-items: start; }
.kanban.echeances { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.colonne { display: grid; gap: var(--e-2); align-content: start; background: var(--surface-creuse); border-radius: var(--r-3); padding: var(--e-2); min-height: 6rem; }
.colonne > h3 { padding: var(--e-1) var(--e-2) 0; }
.tache { display: flex; gap: var(--e-3); align-items: flex-start; background: var(--surface); border-radius: var(--r-2); padding: var(--e-3);
  box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); font-size: var(--texte-3); transition: box-shadow var(--duree) var(--courbe); }
.tache:hover { box-shadow: var(--ombre-2), inset 0 0 0 var(--trait) var(--ligne-forte); }
.tache.retard { box-shadow: var(--ombre-1), inset 3px 0 0 var(--accent), inset 0 0 0 var(--trait) var(--ligne); }
.tache .case, .fil-pourmoi .case, .puce-plan .case { position: relative; flex: none; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--texte-tiers); border-radius: var(--r-rond);
  background: none; color: var(--accent-texte); cursor: pointer; font-size: var(--texte-1); line-height: 1; transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe); }
.tache .case:hover, .fil-pourmoi .case:hover, .puce-plan .case:hover { border-color: var(--accent); background: var(--accent-doux); }
.tache .texte { all: unset; cursor: pointer; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; line-height: var(--interligne); }
.tache .texte .meta { font-size: var(--texte-2); }
.tache .corps-objectif { display: grid; gap: var(--e-2); min-width: 0; flex: 1; }
.tache .menu-plus summary { width: 24px; height: 24px; }
.tache.fait .texte { color: var(--texte-tiers); text-decoration: line-through; }
.tache.fait .case { border-color: var(--accent); background: var(--accent); color: var(--accent-sur); }
.tableau { overflow-x: auto; margin-top: var(--e-3); }
table { border-collapse: collapse; width: 100%; font-size: var(--texte-3); }
th { text-align: left; font: var(--graisse-forte) var(--texte-1)/1 var(--police); letter-spacing: var(--espacement-capitales); text-transform: uppercase; color: var(--texte-tiers); }
th, td { padding: var(--e-2) var(--e-3); border-bottom: var(--bord); vertical-align: top; }
td.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover { background: var(--survol); }
.bloc-note { display: block; }
.total { font-weight: var(--graisse-titre); }
.notes { width: 100%; font: inherit; background: var(--surface); color: inherit; border: var(--bord); border-radius: var(--r-3); padding: var(--e-4); margin-top: var(--e-4); }
table.base td { padding: 2px var(--e-1); vertical-align: middle; }
table.base .cellule { display: block; padding: var(--e-1) var(--e-2); min-width: 8rem; }
table.base tr.retard td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* Propriétés façon Notion : libellé gris à gauche, valeur à droite, écrite sur place. */
.proprietes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: var(--e-2) 0 0; max-width: 34rem; }
.propriete { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; min-height: 30px; }
.propriete dt { display: flex; gap: var(--e-2); align-items: center; color: var(--texte-tiers); font-size: var(--texte-3); }
.propriete dd { margin: 0; min-width: 0; font-size: var(--texte-3); }
.propriete dd .en-place { display: block; padding: var(--e-1) var(--e-2); }
.choix, .propriete input[type=date], table.base input[type=date] { font: inherit; color: inherit; background: transparent; border: 0; border-radius: var(--r-2); padding: var(--e-1) var(--e-2); cursor: pointer; max-width: 100%; }
.choix:hover, .propriete input[type=date]:hover, table.base input[type=date]:hover { background: var(--survol); }
.en-place { outline: none; border-radius: var(--r-2); cursor: text; }
.en-place:hover { background: var(--survol); }
.en-place:focus { background: var(--surface); box-shadow: 0 0 0 var(--trait) var(--ligne-forte); }
.en-place:empty::before { content: attr(data-vide); color: var(--texte-tiers); }
h1.en-place { padding: 0 var(--e-1); margin-left: calc(-1 * var(--e-1)); }
p.objectif.en-place { padding: 2px var(--e-1); margin-left: calc(-1 * var(--e-1)); min-height: 1.5em; }
.calendrier { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.cal-tete { display: flex; align-items: center; gap: var(--e-2); }
.cal-tete strong { min-width: 9rem; text-align: center; text-transform: capitalize; }
.cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); }
.cal-jour-nom { font: var(--graisse-forte) var(--texte-1)/1 var(--police); letter-spacing: var(--espacement-capitales); text-transform: uppercase; color: var(--texte-tiers); padding: var(--e-2); border-bottom: var(--bord); }
.cal-case { min-height: 5.5rem; padding: var(--e-1); display: flex; flex-direction: column; gap: 2px; border-right: var(--bord); border-bottom: var(--bord); min-width: 0; }
.vide-case { background: var(--surface-creuse); }
.cal-num { font-size: var(--texte-2); color: var(--texte-tiers); padding: 0 var(--e-1); }
.cal-case.auj .cal-num { color: var(--accent-sur); background: var(--accent); border-radius: var(--r-rond); align-self: flex-start; padding: 0 var(--e-2); font-weight: var(--graisse-titre); }
.cal-tache { font: inherit; font-size: var(--texte-2); text-align: left; border: 0; border-radius: var(--r-1); padding: 2px var(--e-1); background: var(--accent-doux); color: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tache.retard { box-shadow: inset 2px 0 0 var(--accent); }
.cal-tache.fait { text-decoration: line-through; opacity: .6; }
.pile { display: grid; gap: var(--e-2); }

/* Objectifs */
.liste-taches { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-2); }
.liste-taches li { display: grid; gap: 2px; padding: var(--e-3); background: var(--surface); border-radius: var(--r-2); box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); font-size: var(--texte-3); }
.liste-taches li.retard { box-shadow: var(--ombre-1), inset 3px 0 0 var(--accent), inset 0 0 0 var(--trait) var(--ligne); }
.liste-taches li.idee .actions { margin-top: var(--e-1); }
.liste-taches a { color: inherit; font-weight: var(--graisse-forte); text-decoration: none; }

/* Mémoire */
.memoire { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.memoire li, .entree { display: grid; gap: var(--e-2); }
.memoire li.remplacee { opacity: .55; }
input.recherche, .recherche:is(input) { font: inherit; font-size: var(--texte-3); min-height: 32px; padding: 0 var(--e-3); border: var(--bord); border-color: var(--ligne-forte); border-radius: var(--r-2); background: var(--surface); color: var(--texte); min-width: 14rem; }
input.recherche:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.filtres a { display: inline-flex; align-items: center; min-height: 26px; text-decoration: none; padding: 0 var(--e-3); border-radius: var(--r-rond); font-size: var(--texte-2); font-weight: var(--graisse-moyenne); color: var(--texte-second); background: var(--actif); }
.filtres a:hover { color: var(--texte); }
.filtres a[aria-current="page"] { background: var(--texte); color: var(--fond); }

/* Carnet */
.maitre-detail { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--e-6); }
.liste-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; align-content: start; }
.liste-contacts a { display: grid; gap: 2px; padding: var(--e-2) var(--e-3); border-radius: var(--r-2); text-decoration: none; font-size: var(--texte-3); }
.liste-contacts a:hover { background: var(--survol); }
.liste-contacts a[aria-current="page"] { background: var(--actif); }
.fiche { display: grid; gap: var(--e-3); padding: var(--e-5); align-content: start; }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-2) var(--e-4); margin: 0; font-size: var(--texte-3); }
dt { color: var(--texte-tiers); }
dd { margin: 0; overflow-wrap: anywhere; }

/* Pepe (l'agent) */
.demande { display: grid; gap: var(--e-2); }
.demande button { justify-self: start; }
.proposition { display: grid; gap: var(--e-2); }
.operations { margin: 0; padding-left: var(--e-5); font-size: var(--texte-3); color: var(--texte-second); }
.boite-pepe { display: grid; gap: var(--e-3); }
.fil-pepe { display: grid; gap: var(--e-2); max-height: 50vh; max-height: 50dvh; overflow-y: auto; }
.bulle { margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--r-4); white-space: pre-wrap; max-width: 90%; font-size: var(--texte-4); }
.bulle.moi { justify-self: end; background: var(--accent-doux); }
.bulle.pepe { justify-self: start; display: grid; gap: var(--e-2); white-space: normal; background: var(--surface); box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); }
.bulle.pepe > p { margin: 0; white-space: pre-wrap; }
.bulle.pepe.erreur { box-shadow: inset 0 0 0 var(--trait) var(--accent); }
.bulle.attente { color: var(--texte-tiers); }
.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--texte-3); }
.sources a { color: inherit; text-decoration: underline; text-decoration-color: var(--ligne-forte); text-underline-offset: 3px; }
.sources a:hover { text-decoration-color: var(--accent); }
.question-pepe { margin: 0; }
.choix { display: flex; flex-wrap: wrap; gap: var(--e-1); }

/* Fenêtres, palette ⌘K, toast, connexion */
dialog { width: min(32rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: var(--e-6);
  color: var(--texte); background: var(--surface); border: 0; border-radius: var(--r-4); box-shadow: var(--ombre-3), inset 0 0 0 var(--trait) var(--ligne); }
dialog::backdrop { background: var(--voile); }
dialog h2 { margin-bottom: var(--e-2); }
.fenetre form { display: grid; gap: var(--e-4); }
.fenetre .actions { justify-content: flex-end; margin-top: var(--e-2); }
.fenetre .actions .autre:first-child { margin-right: auto; }
.palette { padding: var(--e-2); width: min(38rem, calc(100vw - 32px)); margin-top: 12vh; margin-top: 12dvh; }
.palette input { width: 100%; font: var(--graisse-normale) var(--texte-5)/1.3 var(--police); padding: var(--e-3); border: 0; border-bottom: var(--bord); background: transparent; color: inherit; outline: none; }
.resultats { list-style: none; margin: var(--e-2) 0; padding: 0; max-height: 50vh; max-height: 50dvh; overflow-y: auto; }
.resultats li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e-3); align-items: center; min-height: 36px; padding: var(--e-2) var(--e-3); border-radius: var(--r-2); cursor: pointer; font-size: var(--texte-3); }
.resultats li:hover { background: var(--survol); }
.resultats li[aria-selected="true"] { background: var(--accent-doux); }
.palette > .meta { padding: 0 var(--e-3) var(--e-1); font-size: var(--texte-1); }
.toast { position: fixed; bottom: calc(var(--e-5) + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: var(--e-4);
  max-width: calc(100vw - 32px); padding: var(--e-2) var(--e-4); font-size: var(--texte-3); background: var(--texte); color: var(--fond); border-radius: var(--r-3); box-shadow: var(--ombre-3); }
.toast[hidden] { display: none; }
.toast-action { font: inherit; font-weight: var(--graisse-forte); color: inherit; background: none; border: 0; padding: var(--e-1) 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.connexion { max-width: 22rem; margin: 18vh auto 0; margin-top: 18dvh; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: var(--e-4); }
.connexion form { display: grid; gap: var(--e-2); }
.double-facteur .btn { min-height: var(--cible); }
/* Double facteur (D-133, 10/11) : « Protège ton compte » et « Entre le code ». Même coquille que la connexion ; téléphone d'abord. */
.double-facteur { margin-top: 8vh; margin-top: 8dvh; margin-bottom: var(--e-8); }
.double-facteur .etapes { display: grid; gap: var(--e-3); margin: 0; padding-left: var(--e-5); line-height: var(--interligne); }
.double-facteur .qr-boite { display: grid; place-items: center; margin-top: var(--e-3); padding: var(--e-3); background: var(--papier); border-radius: var(--r-3); box-shadow: inset 0 0 0 var(--trait) var(--ligne-forte); }
.double-facteur .qr { display: block; width: 192px; max-width: 100%; height: auto; }
.double-facteur .cle { margin: var(--e-2) 0 0; padding: var(--e-3); font: var(--graisse-moyenne) var(--texte-4)/var(--interligne) var(--police-chiffres); overflow-wrap: anywhere; user-select: all; background: var(--surface-creuse); border-radius: var(--r-2); }
.double-facteur .champ-code { display: grid; gap: var(--e-1); font-size: var(--texte-3); color: var(--texte-second); }
.double-facteur input.code { min-height: var(--cible); font: var(--graisse-forte) var(--texte-5)/1 var(--police-chiffres); letter-spacing: .15em; text-align: center; }
.double-facteur .sortir { justify-self: start; min-height: var(--cible); }

/* Pour moi */
.pourmoi .entete { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
a.prochaine { position: relative; overflow: hidden; display: grid; gap: 2px; min-width: 0; max-width: 16rem; padding: var(--e-3) var(--e-4); border-radius: var(--r-3);
  background: var(--logo-fond); color: var(--encre); text-decoration: none; box-shadow: var(--ombre-1); font-size: var(--texte-3); }
a.prochaine strong { font: var(--texte-6)/1 var(--police-marque); color: var(--encre); }
a.prochaine span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.prochaine::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .35; mix-blend-mode: multiply; pointer-events: none; }
a.prochaine:hover { box-shadow: var(--ombre-2); }
.blocs-pourmoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); align-items: start; }
.blocs-pourmoi > .partie, .blocs-pourmoi > .projets-faits { grid-column: 1 / -1; }
.bloc-pourmoi { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.bloc-pourmoi h2.petit { margin: 0; }
.fil-pourmoi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.fil-pourmoi li { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-2); border-radius: var(--r-2); font-size: var(--texte-3); }
.fil-pourmoi li:hover { background: var(--survol); }
.fil-pourmoi a { display: grid; gap: 2px; flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.fil-pourmoi a .texte { font-weight: var(--graisse-moyenne); }
.fil-pourmoi li.retard .meta { color: var(--accent-texte); }
.fil-pourmoi .case { margin-top: 1px; }
.fil-pourmoi li.retard .case { border-color: var(--accent); }

/* Pour moi, refonte A « pro chaleureux » — proposé (06/11), en attente de la charte de Justine.
   Fond crème, cartes blanc chaud aux grands rayons, la prochaine soirée en aplat orange, un bouton noir Ajouter. */
.accueil-a { --carte-a: var(--surface); --rayon-a: var(--r-5); max-width: 40rem; gap: var(--e-4); }
.salut-a { display: flex; align-items: center; gap: var(--e-4); }
.logo-a { flex: none; width: 56px; height: 56px; border-radius: 16px; box-shadow: var(--ombre-2); }
.salut-a .bonjour { margin: 0; font-size: var(--texte-4); font-weight: var(--graisse-forte); color: var(--texte-second); }
.salut-a h1 { margin: 2px 0 0; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
a.soiree-a { display: grid; gap: 2px; padding: var(--e-5); border-radius: var(--rayon-a); background: var(--orange); color: var(--encre); text-decoration: none; box-shadow: var(--ombre-2); min-width: 0; }
a.soiree-a:hover { background: color-mix(in srgb, var(--orange) 94%, white); }
.soiree-a .etiquette-a { font-size: var(--texte-2); font-weight: 700; text-transform: uppercase; letter-spacing: var(--espacement-capitales); }
.soiree-a strong { font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.soiree-a .titre-a { font-size: var(--texte-5); font-weight: 700; overflow-wrap: anywhere; }
.soiree-a .jauge-a { display: block; height: 8px; margin: var(--e-3) 0 var(--e-1); border-radius: var(--r-rond); background: color-mix(in srgb, var(--encre) 18%, var(--orange)); overflow: hidden; }
.soiree-a .jauge-a span { display: block; height: 100%; border-radius: inherit; background: var(--encre); }
.soiree-a .avance-a { font-size: var(--texte-3); font-weight: 600; }
.accueil-a .blocs-pourmoi { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
.accueil-a .bloc-pourmoi { padding: var(--e-4); border: 0; border-radius: var(--rayon-a); background: var(--carte-a); box-shadow: 0 1px 0 color-mix(in srgb, var(--gris) 18%, transparent); }
.accueil-a .bloc-pourmoi h2.petit { font-size: var(--texte-3); font-weight: 700; text-transform: uppercase; letter-spacing: var(--espacement-capitales); color: var(--texte-second); }
.accueil-a .fil-pourmoi li { padding: var(--e-3) 0; font-size: 17px; border-radius: 0; border-top: var(--trait) solid color-mix(in srgb, var(--gris) 14%, transparent); }
.accueil-a .fil-pourmoi li:first-child { border-top: 0; }
.accueil-a .fil-pourmoi li:hover { background: none; }
.accueil-a .fil-pourmoi a .texte { font-weight: var(--graisse-forte); }
.accueil-a .fil-pourmoi .meta { font-size: var(--texte-3); }
.accueil-a .fil-pourmoi .case { width: 24px; height: 24px; margin-top: 0; border: 2.5px solid color-mix(in srgb, var(--orange) 70%, var(--creme)); }
a.ajouter-a { display: flex; align-items: center; justify-content: center; min-height: 58px; border-radius: 18px; background: var(--encre); color: var(--creme); font-size: 17px; font-weight: 700; text-decoration: none; }
a.ajouter-a:hover { background: color-mix(in srgb, var(--encre) 88%, var(--orange)); }
.choisir-blocs { text-align: center; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .accueil-a { --carte-a: var(--surface); }
  :root:not([data-theme="light"]) a.ajouter-a { background: var(--creme); color: var(--encre); }
}
:root[data-theme="dark"] .accueil-a { --carte-a: var(--surface); }
:root[data-theme="dark"] a.ajouter-a { background: var(--creme); color: var(--encre); }

/* Projet, refonte A — proposé (06/11), en attente de la charte de Justine : l'en-tête en carte, les propriétés repliées. */
.carte-projet-a { gap: var(--e-2); padding: var(--e-5); border-radius: var(--r-5); background: var(--surface); box-shadow: var(--ombre-1); }
.carte-projet-a .ligne-titre { align-items: center; }
.carte-projet-a .surtitre { margin: 0; }
.carte-projet-a .actions-titre { display: inline-flex; align-items: center; gap: var(--e-1); }
.carte-projet-a h1 { font-size: var(--texte-6); }
.carte-projet-a p.objectif { margin: 0 0 0 calc(-1 * var(--e-1)); font-size: var(--texte-4); }
.avance-projet-a { display: grid; gap: var(--e-1); margin-top: var(--e-2); }
.avance-projet-a .jauge-a { display: block; height: 8px; border-radius: var(--r-rond); background: var(--accent-doux); overflow: hidden; }
.avance-projet-a .jauge-a span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.details-projet-a { margin-top: var(--e-2); border-top: var(--trait) solid var(--ligne); padding-top: var(--e-2); }
.details-projet-a > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--cible); list-style: none; cursor: pointer; font-size: var(--texte-3); color: var(--texte-second); }
.details-projet-a > summary::-webkit-details-marker { display: none; }
.details-projet-a .resume-a { min-width: 0; overflow-wrap: anywhere; }
.details-projet-a .ouvrir-a { flex: none; font-weight: var(--graisse-forte); color: var(--accent-texte); }
.details-projet-a[open] .ouvrir-a { color: var(--texte-tiers); }
.details-projet-a .proprietes { margin-top: 0; }
.barre-a { margin-top: var(--e-4); }
.barre-a .titre-onglet { margin: 0; font-size: var(--texte-4); }
/* Le menu « ⋯ » d'une barre d'onglet : à côté du bouton principal ; l'export y perd son allure de bouton. */
.barre-actions .actions > .menu-plus summary { color: var(--texte-second); }
.menu-plus-liste > .btn.petit { font-size: var(--texte-3); }
.menu-plus-liste > [aria-checked="false"] { padding-left: calc(var(--e-3) + 1.1em); }
.menu-plus-liste > [role="menuitemradio"] + :not([role="menuitemradio"]) { margin-top: var(--e-1); border-top: var(--bord); border-radius: 0 0 var(--r-2) var(--r-2); }
.aide-repliee > summary { display: inline-flex; align-items: center; min-height: var(--cible-dense); cursor: pointer; font-size: var(--texte-2); color: var(--texte-tiers); }
.aide-repliee > p { margin-top: 0; }
.plus-champs { display: grid; gap: var(--e-4); }
.plus-champs > summary { min-height: var(--cible-dense); display: inline-flex; align-items: center; cursor: pointer; font-size: var(--texte-3); font-weight: var(--graisse-moyenne); color: var(--accent-texte); }
.plus-champs[open] > summary { margin-bottom: var(--e-1); }
.plus-champs > .champ + .champ { margin-top: 0; }
/* Projets et planning, refonte A — proposé (06/11), en attente de la charte de Justine. */
/* En-tête d'écran A : le titre à gauche ; à droite « ⋯ » puis le seul bouton principal, sur la même ligne, iPhone compris. */
.entete-a { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.entete-a > h1 { min-width: 0; }
.entete-a > .actions { flex: none; flex-wrap: nowrap; }
.carte-projet-liste-a { gap: var(--e-3); }
.carte-projet-liste-a .j-a { font-weight: var(--graisse-titre); font-size: var(--texte-3); color: var(--accent-texte); background: var(--accent-doux); border-radius: var(--r-rond); padding: 2px var(--e-3); }
.carte-projet-liste-a .j-a.passee { color: var(--texte-second); background: var(--actif); }
.barre-planning { flex-wrap: nowrap; }
.barre-planning > .nav-periode { flex: 1; min-width: 0; }
.barre-planning > .menu-plus { margin-left: auto; }
.nav-periode .retour-auj { margin-left: var(--e-1); color: var(--accent-texte); }
.barre-planning .nav-periode { flex-wrap: nowrap; }
.barre-planning .titre-periode { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Sur iPhone, le retour à aujourd'hui vit dans « ⋯ » : la période garde toute la ligne. */
@media (max-width: 760px) { .nav-periode .retour-auj { display: none; } }
/* Tableau en cartes au téléphone (refonte A, proposé 06/11, en attente de la charte de Justine) : .tableau.en-cartes ;
   la première cellule (.titre-carte) fait le titre, les autres se lisent « étiquette : valeur » grâce à data-label. */
@media (max-width: 760px) {
  .tableau.en-cartes { overflow: visible; }
  .tableau.en-cartes table, .tableau.en-cartes tbody { display: block; }
  .tableau.en-cartes thead { display: none; }
  .tableau.en-cartes tr { display: grid; gap: var(--e-1); padding: var(--e-4); margin-bottom: var(--e-3); background: var(--surface); border-radius: var(--r-5); box-shadow: var(--ombre-1); }
  .tableau.en-cartes td { display: flex; gap: var(--e-2); align-items: baseline; padding: 0; border: 0; text-align: left; }
  .tableau.en-cartes td[data-label]::before { content: attr(data-label); flex: none; min-width: 6.5rem; color: var(--texte-tiers); font-size: var(--texte-2); }
  .tableau.en-cartes td.titre-carte { display: block; font-size: var(--texte-4); margin-bottom: var(--e-1); overflow-wrap: anywhere; }
  .tableau.en-cartes td.nombre { white-space: normal; }
}

/* Pages et blocs (éditeur façon Notion) */
.ligne-titre { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.ligne-titre h1 { flex: 1; min-width: 0; }
.page-blocs { max-width: var(--largeur-lecture); }
.sous-pages-liste { display: grid; gap: var(--e-3); justify-items: start; max-width: var(--largeur-lecture); }
.sous-pages-liste h2.petit { margin: var(--e-4) 0 0; }
.liste-corbeille { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); max-width: var(--largeur-lecture); }
.confirmation { display: grid; gap: var(--e-2); box-shadow: inset 0 0 0 var(--trait) var(--accent); }
.choix-action { display: grid; gap: var(--e-3); }
.blocs { display: grid; gap: 2px; }
.bl-liste { display: grid; gap: 1px; }
.bl { position: relative; display: flex; align-items: flex-start; gap: var(--e-2); }
.bloc-texte { flex: 1; min-width: 0; outline: none; padding: 3px var(--e-1); border-radius: var(--r-1); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; line-height: var(--interligne-large); }
.bloc-texte:focus { background: var(--survol); }
.bloc-texte:empty:focus::before, .bl-texte:only-child .bloc-texte:empty::before, .bl-replie .bloc-texte:empty::before { content: attr(data-vide); color: var(--texte-tiers); }
.bl-titre1 .bloc-texte { font: var(--graisse-titre) var(--texte-5)/1.25 var(--police); margin-top: var(--e-4); }
.bl-titre2 .bloc-texte { font: var(--graisse-forte) 17px/1.3 var(--police); margin-top: var(--e-3); }
.bl-titre3 .bloc-texte { font: var(--graisse-forte) var(--texte-4)/1.3 var(--police); margin-top: var(--e-2); }
.bl-marque { flex: none; width: 22px; text-align: right; padding-top: 3px; color: var(--texte-tiers); font-variant-numeric: tabular-nums; }
.bl-case input { flex: none; margin: 7px 2px 0 var(--e-1); accent-color: var(--accent); width: 16px; height: 16px; }
.bl-case.fait .bloc-texte { color: var(--texte-tiers); text-decoration: line-through; }
.bl-citation .bloc-texte { border-left: 3px solid var(--texte); padding-left: var(--e-3); border-radius: 0; }
.bl-encadre .bloc-texte { background: var(--surface-creuse); padding: var(--e-3) var(--e-4); border-radius: var(--r-3); }
.bl-bascule { display: grid; gap: 0; }
.bl-titre-bascule { display: flex; align-items: flex-start; gap: var(--e-1); }
.bl-chevron { margin-top: 3px; }
.bl-titre-bascule .bloc-texte { font-weight: var(--graisse-forte); }
.bl-replie { padding-left: 26px; display: flex; }
.bl-fixe { flex: 1; min-width: 0; border-radius: var(--r-2); padding: var(--e-1); outline-offset: -2px; }
.bl-fixe:focus { background: var(--survol); }
.bl-separateur hr { border: 0; border-top: var(--bord); margin: var(--e-3) 0; }
.bl-lien { font-weight: var(--graisse-moyenne); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.bl-fixe select { font: inherit; color: inherit; background: var(--surface); border: var(--bord); border-radius: var(--r-2); padding: var(--e-1) var(--e-2); max-width: 100%; }
.bl-retirer { flex: none; opacity: 0; border: 0; background: none; color: var(--texte-tiers); font: var(--graisse-titre) var(--texte-4)/1 var(--police); width: 24px; height: 24px; border-radius: var(--r-1); cursor: pointer; }
.bl:hover .bl-retirer, .bl-retirer:focus-visible { opacity: 1; }
.bl-retirer:hover { background: var(--actif); color: var(--texte); }
.bl-fin { display: block; width: 100%; min-height: var(--e-12); border: 0; background: none; cursor: text; }
.bl-etat { font-size: var(--texte-1); min-height: 1em; text-align: right; color: var(--texte-tiers); }
.menu-blocs { left: 0; top: 100%; width: min(20rem, 100%); max-height: 16rem; overflow-y: auto; }
.menu-bloc { display: grid; text-align: left; font: inherit; font-size: var(--texte-3); color: inherit; background: none; border: 0; border-radius: var(--r-2); padding: var(--e-2) var(--e-3); cursor: pointer; }
.menu-bloc[aria-selected="true"], .menu-bloc:hover { background: var(--survol); }
.menu-bloc .meta { font-size: var(--texte-1); }
/* Menu : glisser-déposer, icônes de page */
.ligne-noeud[draggable="true"] { cursor: grab; }
.ligne-noeud.glisse { opacity: .45; }
.depot-dedans { background: var(--accent-doux); box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: var(--r-2); }
.depot-avant { box-shadow: inset 0 2px 0 var(--accent); }
.depot-apres { box-shadow: inset 0 -2px 0 var(--accent); }
.icone-page { display: inline-grid; place-items: center; justify-self: start; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--r-3); background: none; color: var(--texte); font-size: 40px; }
button.icone-page { cursor: pointer; }
button.icone-page:hover { background: var(--survol); }
.icone-page .ico { width: 1em; height: 1em; }
.choix-icone { display: grid; gap: var(--e-4); }
.choix-icone h2 { margin: 0; }
.grille-icones { display: grid; grid-template-columns: repeat(6, 44px); gap: var(--e-1); }
.grille-icones .btn-icone { width: 44px; height: 44px; font-size: var(--texte-5); color: var(--texte); }
.grille-icones .btn-icone[aria-pressed="true"] { background: var(--accent-doux); color: var(--accent-texte); }
.choix-icone .actions { display: flex; justify-content: flex-end; gap: var(--e-2); }
.bandeau-modele { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4); font-size: var(--texte-3);
  border: var(--trait) dashed var(--accent); border-radius: var(--r-3); background: var(--accent-doux); }

/* Planning : la page d'arrivée */
.planning .entete h1 { font-size: var(--texte-6); }
.saisie-planning { display: grid; gap: var(--e-2); }
.ligne-saisie { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-4); background: var(--surface); border-radius: var(--r-3);
  box-shadow: var(--ombre-2), inset 0 0 0 var(--trait) var(--ligne); transition: box-shadow var(--duree) var(--courbe); }
.ligne-saisie:focus-within { box-shadow: var(--ombre-2), 0 0 0 3px var(--accent-doux), inset 0 0 0 var(--trait) var(--accent); }
.ligne-saisie .ico { width: 18px; height: 18px; flex: none; color: var(--accent); }
.ligne-planning { flex: 1; min-width: 0; font: var(--graisse-normale) var(--texte-4)/1.3 var(--police); border: 0; background: none; color: inherit; padding: var(--e-3) 0; outline: none; }
.ligne-planning::placeholder { color: var(--texte-tiers); }
.apercu-planning { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--e-2); min-height: 24px; font-size: var(--texte-2); color: var(--texte-tiers); padding: 0 var(--e-1); }
.apercu-planning > * + * { margin-left: var(--e-3); }   /* de l'espace entre les morceaux, plus de point médian dessiné (audit du 10/11, G4) */
.apercu-planning strong { color: var(--texte); }
.apercu-planning .choix-ou { font-size: var(--texte-2); padding: 2px var(--e-2); background: var(--accent-doux); max-width: 100%; }
.barre-planning { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.nav-periode { display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap; }
.titre-periode { margin-left: var(--e-2); display: inline-block; font-size: var(--texte-4); font-weight: var(--graisse-forte); }
.titre-periode::first-letter { text-transform: uppercase; }
.retards-planning h2.petit, .ensuite h2.petit, .detail-jour h2.petit { margin: 0 0 var(--e-2); }
/* Le détail d'un jour du mois, amené à l'écran au doigt (js/views/planning.js, #68) : au-dessus de la barre d'onglets, sous l'en-tête. */
@media (max-width: 760px) { .detail-jour { scroll-margin-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); scroll-margin-top: calc(4.5rem + env(safe-area-inset-top, 0px)); } }
.retards-planning h2.petit { color: var(--accent-texte); }
.liste-retards { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.liste-retards .puce-plan { max-width: 22rem; }
.grille-plan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border-radius: var(--r-3); overflow: hidden;
  box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); }
.nom-colonne { font: var(--graisse-forte) var(--texte-1)/1 var(--police); letter-spacing: var(--espacement-capitales); text-transform: uppercase; color: var(--texte-tiers); padding: var(--e-2); border-bottom: var(--bord); }
.jour-plan { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: var(--e-1) var(--e-1) var(--e-2); border-right: var(--bord); border-bottom: var(--bord); cursor: cell; transition: background var(--duree) var(--courbe); }
.grille-plan > .jour-plan:nth-child(7n) { border-right: 0; }
.grille-plan.semaine .jour-plan { min-height: 15rem; }
.grille-plan.mois .jour-plan { min-height: 6.5rem; }
.jour-plan.hors-mois { background: var(--surface-creuse); }
.jour-plan.hors-mois .tete-jour { opacity: .55; }
.jour-plan.passe { background: color-mix(in srgb, var(--surface-creuse) 50%, transparent); }
.jour-plan.passe .tete-jour { color: var(--texte-tiers); }
.jour-plan.choisi { box-shadow: inset 0 0 0 2px var(--accent); }
.jour-plan.survol { background: var(--accent-doux); }
.tete-jour { display: flex; align-items: baseline; gap: var(--e-1); font: inherit; font-size: var(--texte-3); color: inherit; background: none; border: 0; padding: 2px var(--e-1) var(--e-1); cursor: pointer; text-align: left; border-radius: var(--r-1); }
.tete-jour:hover { background: var(--survol); }
.nom-jour { text-transform: uppercase; letter-spacing: var(--espacement-capitales); font-size: var(--texte-1); color: var(--texte-tiers); font-weight: var(--graisse-forte); }
.num-jour { font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; }
.jour-plan.auj .num-jour { color: var(--accent-sur); background: var(--accent); border-radius: var(--r-rond); padding: 0 6px; }
.puce-icone { display: inline-flex; flex: none; color: var(--accent); }
.puce-icone .ico { width: 13px; height: 13px; }
.puce-heure { flex: none; font-variant-numeric: tabular-nums; color: var(--texte-second); font-size: var(--texte-1); font-weight: var(--graisse-moyenne); }
.puce-titre { flex: 1; min-width: 0; font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; text-decoration: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grille-plan.semaine .puce-titre, .liste-detail .puce-titre, .liste-ensuite .puce-titre { white-space: normal; overflow-wrap: anywhere; }
.grille-plan.mois .badge-av, .grille-plan.mois .qui-initiale { display: none; }
.puce-titre:hover { text-decoration: underline; }
.puce-plan .case { width: 14px; height: 14px; font-size: 9px; }
.badge-av { flex: none; font: var(--graisse-forte) var(--texte-1)/1.4 var(--police); font-variant-numeric: tabular-nums; text-decoration: none; color: var(--accent-texte); background: var(--accent-doux); border-radius: var(--r-rond); padding: 0 var(--e-1); }
.qui-initiale { flex: none; width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 10px; font-weight: var(--graisse-forte); border-radius: var(--r-rond); background: var(--actif); color: var(--texte-second); }
.plus-jour { font: inherit; font-size: var(--texte-1); color: var(--texte-tiers); background: none; border: 0; text-align: left; padding: 2px var(--e-2); cursor: pointer; border-radius: var(--r-1); }
.plus-jour:hover { background: var(--survol); color: var(--texte); }
.liste-detail, .liste-ensuite { display: grid; gap: var(--e-1); max-width: 40rem; }
.liste-ensuite { list-style: none; margin: 0; padding: 0; }
.liste-ensuite li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--e-3); font-size: var(--texte-3); }
.date-ensuite { display: inline-block; color: var(--texte-tiers); font-size: var(--texte-2); font-weight: var(--graisse-moyenne); }
.date-ensuite::first-letter { text-transform: uppercase; }
/* Planning : calendrier en premier (10/11) : proposé, en attente de la charte de Justine.
   Antoine : « le bandeau orange dans planning colle en haut » et « le planning visible en premier ».
   Bandeau d'une ligne (44 px), collé en haut ; --haut-collant = hauteur de la barre du haut du téléphone (0 sur grand écran). */
.planning { --haut-collant: 0px; }
a.bandeau-soiree { position: sticky; top: var(--haut-collant); z-index: 3; display: flex; align-items: center; gap: var(--e-3); min-height: var(--cible); margin: calc(-1 * var(--e-4)) calc(-1 * var(--e-8)) 0; padding: 0 var(--e-8);
  background: var(--orange); color: var(--encre); font-size: var(--texte-3); font-weight: 600; text-decoration: none; white-space: nowrap; }
a.bandeau-soiree:hover { background: color-mix(in srgb, var(--orange) 94%, white); }
/* Audit du 10/11, G5 : plus de point médian entre les morceaux du bandeau (il restait orphelin devant la date, poussée à droite) ; l'espace sépare. */
.bandeau-soiree .bs-etiquette { flex: none; font-size: var(--texte-2); font-weight: 700; }
.bandeau-soiree .bs-j { flex: none; font-weight: 800; font-size: var(--texte-4); }
.bandeau-soiree .bs-titre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.bandeau-soiree .bs-taches, .bandeau-soiree .bs-date { flex: none; }
.apercu-planning:empty { min-height: 0; }
.corps-planning { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.calendrier-plan { display: grid; gap: var(--e-3); min-width: 0; }
.cote-plan { display: grid; gap: var(--e-4); min-width: 0; }
.cote-plan .bloc-pourmoi h2.petit { margin: 0; }
.cote-plan .bloc-pourmoi, .cote-plan .fil-pourmoi { grid-template-columns: minmax(0, 1fr); }
/* « Pour toi aujourd'hui », « À décider » : une ligne par tâche, le projet en petit à droite. */
.cote-plan .fil-pourmoi a { display: flex; align-items: baseline; gap: var(--e-3); }
.cote-plan .fil-pourmoi li { align-items: center; min-height: var(--cible); padding-block: var(--e-1); }
.cote-plan .fil-pourmoi .texte { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cote-plan .fil-pourmoi .meta { flex: 0 1 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--texte-2); }
@media (min-width: 1520px) {
  .corps-planning.avec-cote { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "cal cote" "ven cote"; }
  .corps-planning.avec-cote > .calendrier-plan { grid-area: cal; }
  .corps-planning.avec-cote > .cote-plan { grid-area: cote; }
  .corps-planning.avec-cote > .ensuite { grid-area: ven; }
  .cote-plan .liste-retards { flex-direction: column; align-items: stretch; }
  .cote-plan .liste-retards .puce-plan { max-width: none; }
}
@media (max-width: 760px) {
  .planning { --haut-collant: calc(var(--cible) + var(--e-4) + var(--trait) + env(safe-area-inset-top, 0px)); }  /* la barre du haut du téléphone est collée aussi */
  a.bandeau-soiree { margin: calc(-1 * var(--e-4)) calc(-1 * var(--e-4)) 0; padding: 0 var(--e-4); gap: var(--e-2); }
  .bandeau-soiree .bs-etiquette, .bandeau-soiree .bs-mot { display: none; }
  .bandeau-soiree .bs-j::before { content: none; }
}

/* Réglages */
.reglages .partie { max-width: 34rem; margin-top: var(--e-6); }
.reglage-blocs { list-style: none; margin: 0; padding: var(--e-1); display: grid; gap: 1px; background: var(--surface); border-radius: var(--r-3); box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); }
.reglage-blocs li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 36px; padding: 0 var(--e-2); border-radius: var(--r-2); font-size: var(--texte-3); }
.reglage-blocs li:hover { background: var(--survol); }
.reglage-blocs li.masque label { color: var(--texte-tiers); }
.reglage-blocs label, .reglage-un { display: flex; align-items: center; gap: var(--e-3); min-width: 0; cursor: pointer; }
.reglage-blocs .deplacer { display: flex; gap: 2px; flex: none; }
/* Refonte A (proposé 06/11, en attente de la charte de Justine) : flèches à la demande, parties en cartes, pied de palette caché au tactile. */
.reglage-blocs:not(.en-ordre) .deplacer { display: none; }
.reglages > .partie { padding: var(--e-4) var(--e-5); border-radius: var(--r-5); background: var(--surface); box-shadow: var(--ombre-1); }
.reglages > .partie .reglage-blocs { box-shadow: inset 0 0 0 var(--trait) var(--ligne); }
@media (hover: none) and (pointer: coarse) { .pied-palette { display: none; } }
.reglage-vue { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; font-size: var(--texte-3); }

/* Onglets du bas : téléphone seulement. */
.onglets-bas { display: none; }

/* ---------- 5. Téléphone et tactile ---------- */
.menu, .resultats, .fil-pepe, dialog { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.onglets, .tableau { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
@media (max-width: 900px) { .blocs-pourmoi { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  :root { --texte-6: 28px; --texte-5: 19px; --texte-4: 16px; --texte-3: 14px; }  /* refonte A : plus grand, lisible au pouce */
  .coquille { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .menu { position: sticky; top: 0; z-index: 10; height: auto; max-height: 100vh; max-height: 100dvh; gap: var(--e-2); border-right: 0; border-bottom: var(--bord);
    padding: calc(var(--e-2) + env(safe-area-inset-top, 0px)) max(var(--e-3), env(safe-area-inset-right, 0px)) var(--e-2) max(var(--e-3), env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--fond-barre) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
  .tete-menu { padding: 0; }
  .menu .bouton-menu { display: inline-flex; }
  .menu:not(.ouvert) .corps-menu { display: none; }
  .contenu { padding: var(--e-4) max(var(--e-4), env(safe-area-inset-right, 0px)) calc(5.5rem + env(safe-area-inset-bottom, 0px)) max(var(--e-4), env(safe-area-inset-left, 0px)); }
  .barre-haut { position: static; margin: 0 0 var(--e-3); padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
  /* Refonte A : le fil d'Ariane tient sur une ligne au téléphone (il défile au besoin), au lieu de trois. */
  .fil { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fil a { flex: none; max-width: 11rem; min-height: 32px; }
  .vue { gap: var(--e-5); }
  .kanban, .maitre-detail { grid-template-columns: 1fr; }
  .propriete { grid-template-columns: 7.5rem minmax(0, 1fr); }
  body.menu-ouvert { overflow: hidden; }
  /* 07/11 : le menu du téléphone montre les autres endroits (Compta passe en onglet) ; les principales sont déjà en bas. */
  .corps-menu .recherche, .corps-menu .arbre .principales { display: none; }
  .corps-menu .arbre .autres { border-top: 0; padding-top: 0; margin-top: 0; }
  /* Planning : la semaine devient une liste de jours ; le mois garde sa grille, en pastilles. */
  .grille-plan.semaine { grid-template-columns: minmax(0, 1fr); }
  .grille-plan.semaine .nom-colonne { display: none; }
  .grille-plan.semaine .jour-plan { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); padding: var(--e-2) var(--e-3); border-right: 0; }
  .grille-plan.semaine .tete-jour { width: 4.6rem; flex: none; }
  .grille-plan.semaine .puce-plan { flex: 1 1 100%; }
  .grille-plan.semaine .jour-plan.libre.passe { display: none; }
  .grille-plan.mois .jour-plan { min-height: 3.6rem; padding: 2px; gap: 2px; }
  .grille-plan.mois .puce-plan { padding: 2px; justify-content: center; }
  .grille-plan.mois .puce-plan > :not(.puce-icone):not(.case) { display: none; }
  .grille-plan.mois .tete-jour { justify-content: center; padding: 2px; }
  .grille-plan.mois .plus-jour { text-align: center; }
  .nom-colonne { padding: var(--e-2) 2px; text-align: center; letter-spacing: 0; }
  .liste-ensuite li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cal-case { min-height: 3.6rem; }
  .cal-tache { font-size: var(--texte-1); }
  /* Onglets du bas, comme une app. */
  .onglets-bas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: var(--e-1) max(var(--e-2), env(safe-area-inset-right, 0px)) calc(var(--e-1) + env(safe-area-inset-bottom, 0px)) max(var(--e-2), env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--fond-barre) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-top: var(--bord); }
  .onglet { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 50px; padding: var(--e-1); font: var(--graisse-moyenne) var(--texte-1)/1.2 var(--police);
    color: var(--texte-tiers); text-decoration: none; background: none; border: 0; border-radius: var(--r-3); cursor: pointer; }
  .onglet[aria-current="page"] { color: var(--accent-texte); font-weight: var(--graisse-forte); }
  .onglet-icone { position: relative; display: inline-flex; }
  .onglet-icone .ico { width: 22px; height: 22px; }
  .onglet-icone .badge { position: absolute; top: -6px; left: 100%; margin-left: -8px; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) and (pointer: coarse) {
  body:has(input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus) .onglets-bas { display: none; }
}
/* Doigts : 44 px au moins (recommandation Apple) ; iOS zoome sur tout champ sous 16 px. */
@media (max-width: 760px), (pointer: coarse) {
  input, select, textarea, .en-place:not(h1), .recherche, .choix, .bloc-texte, .bl-fixe select, .ligne-planning { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"], input[type="file"] { font-size: inherit !important; }
  .btn, .btn.petit, .page, .groupe, .vues button, .filtres a, .liste-contacts a, .choix, input[type="date"], .recherche, .onglets a, .fil a,
  .resultats li, .menu-bloc, .menu-plus summary, .fil-pourmoi li, .menu-plus-liste > :is(button, a, .btn), .reglage-blocs label, .reglage-un { min-height: var(--cible); }
  .btn.petit { padding: 0 var(--e-3); font-size: var(--texte-3); }
  .chevron, .plus, .btn-icone, .bl-retirer, .bl-chevron, .bouton-menu { width: var(--cible); height: var(--cible); min-width: var(--cible); margin-left: 0; opacity: 1; }
  .chevron-vide { width: var(--cible); }
  .tache .texte { min-height: var(--cible); align-content: center; }
  .tache { align-items: center; }
  /* Les cases restent petites à l'œil mais se touchent sur 44 px. */
  .tache .case::after, .fil-pourmoi .case::after, .puce-plan .case::after { content: ""; position: absolute; inset: -13px; }
  .puce-plan { min-height: 36px; cursor: default; }
  .puce-plan .case { width: 18px; height: 18px; }
  .tete-jour { min-height: 36px; }
  table.base .cellule, .propriete dd .en-place { min-height: var(--cible); display: flex; align-items: center; }
  .liste-taches a, .sources a { display: inline-block; padding: var(--e-3) 0; }
  .cal-tache { min-height: var(--cible-dense); }
  .bl-case input { width: 22px; height: 22px; }
  .palette > .meta { display: none; }
}

/* Corrections après captures (06/11) : la ligne du planning montre son focus par son cadre ; les mots ne se coupent qu'en dernier recours. */
.ligne-planning:focus-visible, .palette input:focus-visible { box-shadow: none; }
.grille-plan.semaine .puce-titre, .liste-detail .puce-titre, .liste-ensuite .puce-titre { overflow-wrap: break-word; hyphens: manual; }
.colonne > .vide, .colonne > p.vide { font-size: var(--texte-3); padding: 0 var(--e-2) var(--e-2); }
.vue > .vues, .partie > .vues, .entete > .vues { justify-self: start; }

/* Lot A1 (corbeille, historique), repris sur les tokens (06/11). */
.vue > .bloc + .bloc { margin-top: var(--e-4); }
.vue > .bloc h2 { margin: 0 0 var(--e-3); font-size: var(--texte-4); }
.bandeau-corbeille { display: grid; gap: var(--e-3); max-width: var(--largeur-lecture); padding: var(--e-3) var(--e-4); border: var(--trait) dashed var(--accent); border-radius: var(--r-3); background: var(--accent-doux); font-size: var(--texte-3); }
.bandeau-corbeille .actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* « Ce qui a changé » : replié par défaut, lu à l'ouverture. */
.historique { margin-top: var(--e-6); max-width: var(--largeur-lecture); border-top: var(--bord); padding-top: var(--e-3); }
.historique > summary { cursor: pointer; color: var(--texte-tiers); font-size: var(--texte-3); font-weight: var(--graisse-moyenne); min-height: var(--cible); display: flex; align-items: center; }
.historique > summary:hover { color: var(--texte); }
.historique-liste { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-3); font-size: var(--texte-3); }
.historique-liste > li p { margin: 0; overflow-wrap: anywhere; }
.historique-champs { margin: 2px 0 0; padding-left: var(--e-5); font-size: var(--texte-2); color: var(--texte-second); overflow-wrap: anywhere; }
/* Toast : width max-content (lot A1) — placé à left 50 %, il ne s'écrase plus sur téléphone. */
.toast { width: max-content; }

/* ---------- Revue du 06/11 (agent Sonnet, grille de 10 critères) : corrections ---------- */
/* Focus clavier : l'anneau gagne sur toute ombre de composant (il était écrasé par .btn, .vues, .qui). */
:is(.btn, .btn.discret, .btn.plein, .qui .btn.petit, .vues button, .page, .btn-icone, .onglets a, .filtres a, .tete-jour, .puce-titre, .menu-plus summary, .chevron, .plus, .case, a.carte, .carte-projet, .recherche):focus-visible { box-shadow: var(--focus); outline: none; }
select:focus-visible, input:focus-visible, textarea:focus-visible { box-shadow: var(--focus); border-color: var(--accent); outline: none; }
.ligne-planning:focus-visible, .palette input:focus-visible { box-shadow: none; }
/* Cadre des champs lisible (3:1). */
.saisie, .champ input, .champ select, .champ textarea, .demande textarea, .fenetre input, .fenetre select, .fenetre textarea, .qui select, .connexion input, .recherche-champ, input.recherche { border-color: var(--champ-bord); }
/* Titre des cartes projet : un vrai titre, pas une capitale grise. */
.carte-projet h3 { font: var(--graisse-forte) var(--texte-4)/var(--interligne-serre) var(--police); letter-spacing: 0; text-transform: none; color: var(--texte); margin: 0; }
/* Boutons discrets en début de ligne : alignés sur le bord du contenu. */
.actions > .btn.discret:first-child, .barre-actions > .btn.discret:first-child { margin-left: calc(-1 * var(--e-3)); }
/* Colonne de kanban vide : rien (audit du 10/11, G2 : trois colonnes qui répétaient « Rien ici pour l'instant »). */
.colonne { box-shadow: inset 0 0 0 var(--trait) var(--ligne); }
.fil .sep { opacity: 1; color: var(--texte-tiers); }
/* Grille de 4 : dérives corrigées. */
.chevron-vide { width: var(--e-5); }
.bl-marque { width: var(--e-6); }
.bl-replie { padding-left: var(--e-6); }
.btn.petit, .menu-plus summary { min-height: var(--e-6); }
.pastille, .etiquette, .qui-initiale { height: var(--e-5); }
.badge { min-width: var(--e-5); height: var(--e-5); }
.qui-initiale { width: var(--e-5); }
.menu .recherche, .menu-plus-liste > :is(button, a, .btn) { min-height: var(--e-8); }
@media (max-width: 760px) {
  .onglets { -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--e-8)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--e-8)), transparent); padding-right: var(--e-8); }
  input.recherche { width: 100%; min-width: 0; }
}
/* Doigts : les cibles encore sous 44 px à 375 (mesurées par la revue). */
@media (max-width: 760px), (pointer: coarse) {
  .marque, .tete-jour, .puce-plan, .projets-faits summary, input.recherche, .memoire .meta a, .memoire a.meta, .blocs-pourmoi + p a, .vue > p > a, p.meta > a, .historique > summary { min-height: var(--cible); }
  .marque, .projets-faits summary, .memoire .meta a, .memoire a.meta, .blocs-pourmoi + p a, .vue > p > a, p.meta > a { display: inline-flex; align-items: center; }
  .nav-periode .btn, .reglage-blocs .deplacer .btn, .menu-plus summary { min-width: var(--cible); width: auto; }
  .menu-plus summary { width: var(--cible); }
  .puce-titre { padding-block: var(--e-3); }
  /* Mesuré à 375 px le 09/11 (#68) : la « grille de 4 » ci-dessus passe après le premier bloc Doigts et ramenait ces cibles à 24, 28 et 32 px. */
  .btn.petit, .menu-plus summary, .tache .menu-plus summary, .aide-repliee > summary, .plus-champs > summary, .pages-espace .avec-icone, .menu .recherche, .menu-plus-liste > :is(button, a, .btn) { min-height: var(--cible); }
  .menu-plus summary, .tache .menu-plus summary { height: var(--cible); width: var(--cible); }
  /* Fenêtres (09/11, #68) : elles se posent au-dessus du clavier (--clavier, js/app.js), et Annuler / Enregistrer restent visibles en bas
     quand le formulaire défile (« + Facture » : 955 px de contenu pour 780 visibles). */
  dialog { bottom: var(--clavier, 0px); max-height: calc(100dvh - 32px - var(--clavier, 0px)); }
  .fenetre .actions { position: sticky; bottom: calc(-1 * var(--e-6)); z-index: 1; margin: var(--e-2) calc(-1 * var(--e-6)) calc(-1 * var(--e-6)); padding: var(--e-3) var(--e-6) var(--e-6); background: var(--surface); border-top: var(--bord); }
}
/* Second passage (06/11) : derniers défauts vus sur capture. */
.grille-plan.semaine .puce-titre { overflow-wrap: normal; word-break: normal; hyphens: auto; }
.ligne-titre { flex-wrap: nowrap; align-items: center; }
.ligne-titre > :not(h1) { flex: none; }
.liste-contacts a { padding-inline: 0 var(--e-3); }
.liste-contacts a:hover, .liste-contacts a[aria-current="page"] { padding-inline: var(--e-2) var(--e-3); margin-inline: calc(-1 * var(--e-2)) 0; }
@media (max-width: 760px), (pointer: coarse) {
  .nav-periode .btn.discret { font-size: var(--texte-3); }
}
/* Focus des champs modifiables en place et des propriétés (vérifié au clavier le 06/11). */
:root :is(.en-place, .proprietes select, .choix, [contenteditable], a.prochaine, .qui select):focus-visible { box-shadow: var(--focus); outline: none; border-radius: var(--r-1); }
/* Lot 1 (propositions sûres) : le détail d'une opération proposée, repris sur les tokens. */
.operations > li + li { margin-top: var(--e-1); }
.op-titre { color: var(--texte); }
.op-champs { margin: 2px 0 0; padding-left: var(--e-4); overflow-wrap: anywhere; white-space: pre-line; }
.op-champs .avant { text-decoration: line-through; color: var(--texte-tiers); }
/* Lot B (tâches et calendrier) — proposé (06/11), en attente de la charte de Justine. */
.fil-pourmoi li.fait .texte { color: var(--texte-tiers); text-decoration: line-through; font-weight: var(--graisse-normale); }
.fil-pourmoi li.fait .case { border-color: var(--accent); background: var(--accent); color: var(--accent-sur); display: grid; place-items: center; font-size: var(--texte-1); line-height: 1; }
.dates-projet { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.dates-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.dates-tete h3 { margin: 0; }
.dates-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.date-projet { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-3); row-gap: 2px; align-items: baseline;
  min-height: var(--cible); padding: var(--e-2) var(--e-3); border-radius: var(--r-2); background: var(--surface); box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); font-size: var(--texte-3); }
.date-projet:hover { background: var(--survol); }
.date-projet:focus-visible { box-shadow: var(--focus); }
.date-projet strong { color: var(--accent-texte); font-variant-numeric: tabular-nums; }
.date-projet .meta { grid-column: 2; font-size: var(--texte-2); }

/* Lot F (compta et caisse) — proposé (06/11), en attente de la charte de Justine. */
.bloc-compta { margin-top: var(--e-6); min-width: 0; }
.onglet-caisse { min-width: 0; }   /* la grille de la vue ne s'élargit pas au tableau Qonto (375 px) */
.bloc-compta .barre-actions h2 { margin: 0; }
ul.alertes { margin: 0; padding-left: var(--e-4); color: var(--accent-texte); font-size: var(--texte-2); }
.avance { margin: var(--e-3) 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--surface); box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); }
.avance h3 { margin: 0 0 var(--e-2); font-variant-numeric: tabular-nums; }
.avance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.avance li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); font-size: var(--texte-3); font-variant-numeric: tabular-nums; }
.caisse-totaux { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.caisse-totaux li { display: grid; gap: 2px; min-width: 8rem; padding: var(--e-2) var(--e-3); border-radius: var(--r-2); background: var(--surface); box-shadow: inset 0 0 0 var(--trait) var(--ligne); }
.caisse-totaux strong { font-variant-numeric: tabular-nums; }
/* Refonte A (proposé 06/11, en attente de la charte de Justine) : 3 chiffres en haut, blocs repliés. */
.chiffres-a { list-style: none; margin: var(--e-2) 0 var(--e-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e-3); }
.chiffres-a li { display: grid; gap: var(--e-1); align-content: start; padding: var(--e-4); border-radius: var(--r-5); background: var(--surface); box-shadow: var(--ombre-1); }
.chiffres-a strong { font-size: var(--texte-6); font-weight: var(--graisse-titre); line-height: 1; font-variant-numeric: tabular-nums; }
.chiffres-a span { font-size: var(--texte-2); color: var(--texte-second); }
.chiffres-a li.alerte strong { color: var(--accent-texte); }
.bloc-replie-a { border-top: var(--trait) solid var(--ligne); padding-top: var(--e-2); }
.bloc-replie-a > summary { display: flex; align-items: baseline; gap: var(--e-3); min-height: var(--cible); padding: var(--e-2) 0; list-style: none; cursor: pointer; }
.bloc-replie-a > summary::-webkit-details-marker { display: none; }
.bloc-replie-a > summary h2 { margin: 0; }
.bloc-replie-a .resume-a { flex: 1; min-width: 0; font-size: var(--texte-3); color: var(--texte-second); overflow-wrap: anywhere; }
.bloc-replie-a .ouvrir-a::after { content: 'Ouvrir'; font-size: var(--texte-3); font-weight: var(--graisse-forte); color: var(--accent-texte); }
.bloc-replie-a[open] .ouvrir-a::after { content: 'Fermer'; color: var(--texte-tiers); }
.actions-bloc-a { justify-content: flex-end; margin-bottom: var(--e-2); }
@media (max-width: 760px) { .chiffres-a { gap: var(--e-2); grid-template-columns: repeat(2, minmax(0, 1fr)); } .chiffres-a li { padding: var(--e-3); } .chiffres-a strong { font-size: var(--texte-5); } }

/* Finitions A (06/11, proposé, en attente de la charte de Justine) : défauts relevés par la relecture à l'aveugle.
   1. Plus d'étiquettes grises en petites capitales : titres de partie, groupes, en-têtes de tableau et jours en casse normale.
      Le surtitre orange et l'étiquette du bandeau de la soirée passent aussi en casse normale (audit du 10/11, G3). */
h3, h2.petit { font-size: var(--texte-4); font-weight: var(--graisse-forte); letter-spacing: 0; text-transform: none; color: var(--texte-second); }
.groupe, .etiquette-menu, .projets-faits summary, th, .cal-jour-nom, .nom-colonne { font-size: var(--texte-2); letter-spacing: 0; text-transform: none; }
.nom-jour { font-size: var(--texte-2); letter-spacing: 0; text-transform: none; }
.accueil-a .bloc-pourmoi h2.petit { font-size: var(--texte-4); letter-spacing: 0; text-transform: none; }
/* 4. Cartes de la semaine : plus de césure au milieu d'un mot (« pré-cuite ») ; texte un cran plus petit sur ordinateur. */
.grille-plan.semaine .puce-titre { hyphens: manual; overflow-wrap: break-word; }
@media (min-width: 761px) { .grille-plan.semaine .puce-plan { font-size: var(--texte-2); } }
/* Audit du 10/11, C1 : sur ordinateur, le titre d'une date prend toute la largeur de la carte (semaine et mois) ;
   l'heure, « Échéance », l'avancement et l'initiale passent sur la ligne du dessous, alignés sous le titre. */
/* Séries (audit du 10/11, G4) : des éléments côte à côte, séparés par de l'espace, jamais par un point médian. */
.serie { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-4); min-width: 0; }
.emplacement-historique:empty { display: none; }
.vue-nom { margin-left: var(--e-2); font-weight: var(--graisse-moyenne); }
.puce-genre { flex: none; color: var(--texte-second); font-size: var(--texte-1); }
@media (min-width: 761px) {
  .grille-plan .puce-plan { flex-wrap: wrap; row-gap: 0; }
  .grille-plan .puce-plan > :is(.puce-icone, .case) { order: 0; }
  .grille-plan .puce-titre { order: 1; flex: 1 1 calc(100% - 1.5rem); }
  .grille-plan .puce-plan::after { content: ""; order: 2; flex: 0 0 14px; }
  .grille-plan .puce-plan > :is(.puce-heure, .puce-genre, .badge-av, .qui-initiale) { order: 3; }
  /* Mois : la case est étroite, le titre passe sur deux lignes avant de se couper ; l'étiquette « Échéance » est dans l'info-bulle. */
  .grille-plan.mois .puce-titre { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .grille-plan.mois .puce-genre { display: none; }
}
/* 2. Accueil sur grand écran : la soirée et « + Ajouter » à gauche, les blocs à droite, au lieu de 640 px serrés à gauche. */
@media (min-width: 1100px) {
  .accueil-a { max-width: var(--largeur-ecran); grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--e-6); align-items: start; }
  .accueil-a > * { grid-column: 1; }
  .accueil-a > .blocs-pourmoi, .accueil-a > p.vide { grid-column: 2; grid-row: 1 / span 4; }
}

/* Presta, lot P2 — proposé (06/11), en attente de la charte de Justine : le bandeau presta de l'en-tête,
   les formules côte à côte en cartes (la retenue cerclée d'orange), le calculateur de pizzas replié. */
.bandeau-presta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); margin-top: var(--e-2); padding-top: var(--e-2); border-top: var(--trait) solid var(--ligne); }
.bandeau-presta .resume-presta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; min-width: 0; font-size: var(--texte-3); overflow-wrap: anywhere; }
.onglet-chiffrage .sous-titre { margin: var(--e-6) 0 var(--e-2); font-size: var(--texte-4); }
.formules-presta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--e-3); margin-top: var(--e-3); }
.carte-formule { display: grid; align-content: start; gap: var(--e-2); padding: var(--e-4); border-radius: var(--r-5); background: var(--surface); box-shadow: var(--ombre-1); border: var(--trait) solid transparent; }
.carte-formule.retenue { border-color: var(--accent); }
.carte-formule .tete-formule { display: flex; align-items: center; gap: var(--e-2); }
.carte-formule .tete-formule h3 { flex: 1; margin: 0; font-size: var(--texte-4); }
/* D-134 (10/11, proposé, en attente de la charte de Justine) : une ligne = un libellé et sa valeur ; si les deux ne tiennent pas, la valeur passe dessous, à gauche.
   La précision (« 3 coûts restent à chiffrer ») est en petit, dessous. Seules « Total » et « Marge » sont fortes. */
.chiffres-formule { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); margin: 0; font-size: var(--texte-3); }
.chiffres-formule .ligne-chiffre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--e-3); min-width: 0; }
.chiffres-formule dt { flex: none; color: var(--texte-second); }
.chiffres-formule dd { flex: none; max-width: 100%; margin: 0; white-space: nowrap; font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; }
.chiffres-formule dd.precision { flex: 0 0 100%; order: 3; font-family: inherit; font-size: var(--texte-2); color: var(--texte-tiers); white-space: normal; text-align: left; }
.chiffres-formule .fort { font-size: var(--texte-4); }
.chiffres-formule .fort dt, .chiffres-formule .fort dd { color: var(--texte); font-weight: var(--graisse-forte); }
.chiffres-formule .fort dd.precision { font-size: var(--texte-2); font-weight: inherit; color: var(--texte-tiers); }
/* Lignes offertes (017, D-128) — proposé (08/11), en attente de la charte de Justine : la valeur normale reste lisible, barrée ;
   « Offert » se lit dans la teinte d'accent, sans couleur nouvelle. */
.chiffres-formule .offert dt, .chiffres-formule .offert dd { color: var(--accent-texte); }
.prix-offert { text-decoration: line-through; color: var(--texte-tiers); }
.titre-carte .pastille { margin-left: var(--e-2); }
.calcul-pizzas { margin-top: var(--e-6); padding: var(--e-4); border-radius: var(--r-5); background: var(--surface-creuse); }
.calcul-pizzas > summary { min-height: var(--cible); display: flex; align-items: center; cursor: pointer; font-weight: var(--graisse-forte); }
.champs-pizzas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--e-3); margin-top: var(--e-2); }
.resultat-pizzas { margin: var(--e-3) 0 var(--e-1); font-size: var(--texte-4); font-weight: var(--graisse-forte); }

/* Menu du 07/11 (Antoine : « c'est où la compta ? c'est où tout ça ? ») : trois groupes visibles, séparés d'un trait.
   Proposé (07/11), en attente de la charte de Justine. */
.arbre .autres, .arbre .rangement { margin-top: var(--e-2); padding-top: var(--e-2); border-top: var(--bord); }

/* (15) Devis à imprimer — D-129, proposé (09/11), en attente de la charte de Justine. Modèle : devis v18 de Daphné et Hélie.
   Une feuille A4 blanche par formule (--papier, même en thème sombre). À l'écran : la barre d'outils et la liste de ce qui manque ;
   à l'impression : les feuilles seules, une par page. Montré dans design.html § 15. */
.vue-devis { justify-items: center; max-width: none; }
.barre-devis { display: grid; gap: var(--e-2); width: min(210mm, 100%); }
.actions-devis { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; justify-content: space-between; }
.aide-devis { margin: 0; font-size: var(--texte-3); color: var(--texte-second); }
.manques-devis { font-size: var(--texte-3); color: var(--texte-second); background: var(--surface); border-radius: var(--r-3); box-shadow: var(--ombre-1), inset 0 0 0 var(--trait) var(--ligne); padding: var(--e-3) var(--e-4); }
.manques-devis summary { cursor: pointer; font-weight: var(--graisse-forte); color: var(--accent-texte); }
.manques-devis ul { margin: var(--e-2) 0 0; padding-left: var(--e-5); }
.outils-page { width: min(210mm, 100%); display: flex; justify-content: flex-end; margin-bottom: calc(-1 * var(--e-4)); }

.page-devis { box-sizing: border-box; position: relative; width: 210mm; min-height: 297mm; padding: 0 16mm 30mm; background: var(--papier); color: var(--papier-texte);
  font: var(--graisse-normale) 12px/1.5 var(--police); box-shadow: var(--ombre-3); border-radius: var(--r-1); color-scheme: light; }
.page-devis .etiquette { font-size: 10px; font-weight: var(--graisse-titre); text-transform: uppercase; letter-spacing: 1.2px; color: var(--papier-accent); }
.tete-devis { display: flex; justify-content: space-between; align-items: center; gap: 8mm; padding: 14mm 0 6mm; border-bottom: 3px solid var(--orange); }
.marque-devis { display: flex; align-items: center; gap: 4mm; }
.marque-devis img { height: 17mm; width: auto; }
.nom-marque { font: 40px/.9 var(--police-marque); color: var(--orange); }
.emetteur-devis { margin-top: 2mm; font-size: 9.5px; line-height: 1.45; color: var(--papier-second); }
.emetteur-devis b { color: var(--papier-texte); }
.titre-devis { text-align: right; }
.date-devis { font-size: 12px; color: var(--papier-second); margin-top: 1mm; }
.cadres-devis { display: flex; justify-content: space-between; gap: 8mm; margin: 8mm 0 6mm; }
.cadre-devis { flex: 1; border: 1.5px solid var(--orange); border-radius: var(--r-2); padding: 9px 12px; font-size: 12px; line-height: 1.55; }
.cadre-devis .etiquette { margin-bottom: 1mm; }
.cadre-devis .libelle { color: var(--papier-second); }
.page-devis .a-completer { color: var(--papier-pale); font-style: italic; }
.intro-devis { margin: 0 0 4mm; font-size: 12.5px; color: var(--papier-second); }
.table-devis { width: 100%; border-collapse: collapse; }
.table-devis th { font-size: 10px; font-weight: var(--graisse-titre); text-transform: uppercase; letter-spacing: 1px; color: var(--papier-accent); text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--orange); }
.table-devis td { padding: 11px 14px; border-bottom: var(--trait) solid var(--papier-ligne); vertical-align: top; }
.table-devis .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-devis td b { font-size: 13.5px; }
.table-devis small { display: block; color: var(--papier-second); font-size: 11px; margin-top: 1mm; }
.puces-devis { margin: 1mm 0 0; padding-left: 5mm; color: var(--papier-second); }
.table-devis s { color: var(--papier-pale); }
.offert-devis { color: var(--orange); font-weight: 900; }
.options-devis { margin-top: 4mm; font-size: 11.5px; color: var(--papier-second); }
.options-devis ul { margin: 1mm 0 0; padding-left: 5mm; }
.total-devis { display: flex; justify-content: space-between; align-items: baseline; margin-top: 5mm; padding-top: 4mm; border-top: 2px solid var(--papier-texte); }
.total-devis span { font: 16px/1.2 var(--police-marque); }
.total-devis b { font: 34px/1 var(--police-marque); color: var(--orange); font-weight: normal; }
.tva-devis { margin: 2mm 0 0; text-align: right; font-size: 11px; color: var(--papier-second); }
.signatures-devis { display: flex; gap: 8mm; margin-top: 10mm; }
.signatures-devis > div { flex: 1; height: 26mm; box-sizing: border-box; border: 1.5px solid var(--orange); border-radius: var(--r-2); padding: 8px 12px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--papier-second); }
.pied-devis { position: absolute; left: 16mm; right: 16mm; bottom: 10mm; display: flex; flex-direction: column; align-items: center; gap: 1mm;
  padding-top: 3mm; border-top: 2px solid var(--orange); font-size: 10px; text-align: center; color: var(--papier-second); }
.mention-tva { font-size: 11px; font-weight: var(--graisse-titre); color: var(--papier-texte); }
/* Téléphone : la feuille se lit en pleine largeur ; l'impression garde le format A4. */
@media screen and (max-width: 860px) {
  .page-devis { width: 100%; min-height: 0; padding: 0 var(--e-4) var(--e-4); }
  .tete-devis, .cadres-devis { flex-direction: column; align-items: stretch; }
  .titre-devis { text-align: left; }
  .table-devis th, .table-devis td { padding: 8px 6px; }
  .signatures-devis { flex-direction: column; }
  .pied-devis { position: static; margin-top: var(--e-6); }
}
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: var(--papier); }
  body::after, .menu, .barre-haut, .bandeau, .onglets-bas, .barre-devis, .outils-page, .toast { display: none !important; }
  .coquille { display: block; min-height: 0; }
  .contenu, .vue-devis { padding: 0; margin: 0; display: block; max-width: none; }
  .page-devis { width: 210mm; height: 297mm; min-height: 0; overflow: hidden; box-shadow: none; border-radius: 0; margin: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-devis:not(:last-of-type) { break-after: page; }
}

/* (16) Plaquette commerciale à imprimer — D-130, proposé (09/11), en attente de la charte de Justine.
   Une couverture crème, les formules trois par feuille au prix par personne, puis les options et le contact. Feuilles A4 (--papier,
   même en thème sombre) ; la barre d'outils est celle du devis (§ 15), cachée à l'impression. Montré dans design.html § 16. */
.page-plaquette { box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: 210mm; min-height: 297mm; padding: 16mm 16mm 26mm;
  background: var(--papier); color: var(--papier-texte); font: var(--graisse-normale) 12px/1.5 var(--police); box-shadow: var(--ombre-3); border-radius: var(--r-1); color-scheme: light; }
.page-plaquette .etiquette { font-size: 10px; font-weight: var(--graisse-titre); text-transform: uppercase; letter-spacing: 1.2px; color: var(--papier-accent); }
.page-plaquette .a-completer { color: var(--papier-pale); font-style: italic; }
.couverture-plaquette { background: var(--creme); justify-content: center; align-items: center; text-align: center; gap: 6mm; }
.marque-plaquette { display: flex; flex-direction: column; align-items: center; gap: 4mm; }
.marque-plaquette img { height: 34mm; width: auto; }
.marque-plaquette .nom-marque { font-size: 64px; }
.titre-plaquette { margin: 8mm 0 0; font: 30px/1.15 var(--police-marque); color: var(--papier-texte); font-weight: normal; max-width: 150mm; }
.accroche-plaquette { margin: 0; max-width: 130mm; font-size: 15px; line-height: 1.5; color: var(--papier-second); }
.date-plaquette { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--papier-accent); }
.tete-plaquette { display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; padding-bottom: 4mm; border-bottom: 3px solid var(--orange); }
.base-plaquette { font-size: 11px; color: var(--papier-second); }
.formules-plaquette { display: grid; grid-template-columns: repeat(var(--colonnes, 3), minmax(0, 1fr)); gap: 6mm; margin-top: 8mm; align-items: start; }
.formule-plaquette { border: 1.5px solid var(--orange); border-radius: var(--r-3); padding: 6mm 5mm; display: grid; gap: 2mm; }
.formule-plaquette h2 { margin: 0; font: 22px/1.1 var(--police-marque); font-weight: normal; color: var(--papier-texte); }
.accroche-formule { margin: 0; font-size: 11.5px; color: var(--papier-second); }
.prix-plaquette { display: flex; align-items: baseline; gap: 2mm; margin-top: 2mm; }
.prix-plaquette b { font: 34px/1 var(--police-marque); font-weight: normal; color: var(--orange); }
.prix-plaquette span { font-size: 11px; color: var(--papier-second); }
.total-formule { margin: 0 0 2mm; font-size: 10.5px; color: var(--papier-second); padding-bottom: 3mm; border-bottom: var(--trait) solid var(--papier-ligne); }
.inclus-plaquette { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.5mm; }
.inclus-plaquette b { font-size: 12px; }
.inclus-plaquette ul { margin: .5mm 0 0; padding-left: 4mm; color: var(--papier-second); font-size: 11px; }
.options-plaquette { margin-bottom: 10mm; }
.options-plaquette ul { margin: 2mm 0 0; padding-left: 5mm; display: grid; gap: 1.5mm; }
.options-plaquette small { color: var(--papier-second); }
.contact-plaquette { margin-top: auto; margin-bottom: auto; text-align: center; display: grid; gap: 3mm; justify-items: center; }
.contact-plaquette p { margin: 0; font-size: 13px; line-height: 1.6; }
.pied-plaquette { position: absolute; left: 16mm; right: 16mm; bottom: 10mm; padding-top: 3mm; border-top: 2px solid var(--orange); font-size: 10px; text-align: center; color: var(--papier-second); }
@media screen and (max-width: 860px) {
  .page-plaquette { width: 100%; min-height: 0; padding: var(--e-5) var(--e-4); }
  .couverture-plaquette { min-height: 70vh; }
  .formules-plaquette { grid-template-columns: minmax(0, 1fr); }
  .pied-plaquette { position: static; margin-top: var(--e-6); }
}
@media print {
  .page-plaquette { width: 210mm; height: 297mm; min-height: 0; overflow: hidden; box-shadow: none; border-radius: 0; margin: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-plaquette:not(:last-of-type) { break-after: page; }
}

/* Compta rassemblée et exports (10/11) */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin: var(--e-3) 0; }
.filtres-selects { display: contents; }
.filtres :is(select, input.filtre, .recherche-depenses) { min-height: var(--cible-dense); max-width: 100%; }
.filtres .recherche-depenses { flex: 1 1 12rem; min-width: 10rem; }
.filtres select.filtre { flex: 0 1 auto; max-width: 14rem; }
.case-filtre { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible-dense); font-size: var(--texte-2); color: var(--texte-second); cursor: pointer; }
.tableau-depenses { max-height: 70vh; overflow: auto; border-top: var(--bord); }
table.depenses { font-size: var(--texte-2); }
table.depenses th, table.depenses td { padding: var(--e-2) 5px; }
table.depenses thead th { position: sticky; top: 0; z-index: 1; background: var(--fond); border-bottom: var(--trait) solid var(--ligne-forte); vertical-align: bottom; }
table.depenses th.nombre { text-align: right; }
table.depenses th span.tri { cursor: default; }
table.depenses th .tri { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; display: inline-flex; align-items: flex-end; min-height: var(--cible-dense); text-align: left; }
table.depenses th .tri:hover, table.depenses th[aria-sort="ascending"] .tri, table.depenses th[aria-sort="descending"] .tri { color: var(--texte); }
table.depenses th .tri:focus-visible { outline: none; box-shadow: var(--focus); }
table.depenses td { vertical-align: top; }
table.depenses td.date, table.depenses td.piece, table.depenses td.nombre { white-space: nowrap; }
table.depenses td.nombre { font-variant-numeric: tabular-nums; }
table.depenses td.fournisseur { min-width: 5rem; }
table.depenses td.libelle { min-width: 5rem; max-width: 15rem; overflow-wrap: anywhere; }
table.depenses td.points-ligne { color: var(--accent-texte); min-width: 5rem; }
table.depenses tr.prevu td { color: var(--texte-second); }
table.depenses tr:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
table.depenses .manque, table.depenses td.attend { color: var(--accent-texte); }
.titre-secours { display: none; }
.pied-depenses { margin: var(--e-2) 0 0; font-variant-numeric: tabular-nums; }
.detail-depense { max-width: min(40rem, calc(100vw - 2rem)); width: 100%; }
.export-depenses { max-width: min(56rem, calc(100vw - 2rem)); width: 100%; }
.export-depenses .choix-radio input { width: auto; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--accent); box-shadow: none; }
.detail-depense .detail { display: grid; gap: var(--e-3); }
.detail-depense h2, .detail-depense h3 { margin: 0; }
.montant-detail { margin: 0; font-size: var(--texte-5); font-weight: var(--graisse-titre); font-variant-numeric: tabular-nums; }
.detail-depense .propriete { grid-template-columns: 9rem minmax(0, 1fr); min-height: 28px; }
.detail-depense .propriete dd { overflow-wrap: anywhere; }
.detail-depense .detail-points ul { margin: var(--e-1) 0 0; padding-left: var(--e-4); }
.export-depenses .choix { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.export-depenses .choix-radio { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible-dense); padding: 0 var(--e-3); border: var(--bord); border-radius: var(--r-3); cursor: pointer; }
.export-depenses .choix-radio:has(input:checked) { background: var(--accent-doux); border-color: var(--accent); }
.export-depenses .dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.export-depenses .apercu-export { min-width: 0; }
.export-depenses .apercu-export .tableau { max-height: 14rem; }
.export-depenses .apercu-export td { white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.export-depenses .nom-fichier { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px), (pointer: coarse) {
  .filtres :is(select, input.filtre, .recherche-depenses), .case-filtre, table.depenses th .tri, .export-depenses .choix-radio { min-height: var(--cible); }
  .filtres .recherche-depenses { flex-basis: 100%; }
  .filtres :is(select.filtre, input.filtre) { flex: 1 1 calc(50% - var(--e-2)); width: auto; min-width: 0; max-width: none; }
}
@media (max-width: 760px) {
  .tableau-depenses { max-height: none; overflow: visible; border-top: 0; }
  table.depenses, table.depenses tbody { display: block; }
  table.depenses thead { display: none; }
  table.depenses tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); padding: var(--e-3); margin-bottom: var(--e-2); background: var(--surface); border-radius: var(--r-4); box-shadow: var(--ombre-1); }
  table.depenses td { display: flex; gap: var(--e-2); align-items: baseline; grid-column: 1 / -1; padding: 0; border: 0; min-width: 0; text-align: left; }
  table.depenses td.vide-cell { display: none; }
  table.depenses td[data-label]::before { content: attr(data-label); flex: none; min-width: 5.5rem; color: var(--texte-tiers); font-size: var(--texte-1); }
  table.depenses td.fournisseur { grid-column: 1; grid-row: 1; font-size: var(--texte-3); min-width: 0; }
  table.depenses td.fournisseur::before, table.depenses td.nombre::before { content: none; }
  table.depenses td.nombre { grid-column: 2; grid-row: 1; justify-content: flex-end; font-size: var(--texte-3); font-weight: var(--graisse-forte); }
  table.depenses td.libelle { grid-column: 1 / -1; grid-row: 2; max-width: none; color: var(--texte-second); }
  table.depenses td.libelle::before { content: none; }
  table.depenses tr.sans-fournisseur td.libelle, table.depenses .sans-four { display: none; }
  table.depenses .titre-secours { display: inline; }
  table.depenses td.date { grid-row: 3; }
  .detail-depense .propriete, .export-depenses .dimensions { grid-template-columns: minmax(0, 1fr); }
}
/* Compta et Carnet plus lisibles (10/11) */
/* Compta : raccourcis vers les outils, trois chiffres, un constat commun, points à compléter en un badge, sections vides en bas. */
.raccourcis { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-2) 0 var(--e-4); }
.raccourcis .btn { text-decoration: none; }
.sr-lien { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chiffres-a.chiffres-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chiffres-a.chiffres-trois li { min-width: 0; }
.chiffres-a.chiffres-trois strong { overflow-wrap: anywhere; }
.constat { margin: var(--e-2) 0 0; color: var(--texte-second); font-size: var(--texte-3); }
.points > summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.points > summary::-webkit-details-marker { display: none; }
.points > summary .pastille::after { content: '▾'; margin-left: var(--e-1); font-size: var(--texte-1); }
.points[open] > summary .pastille::after { content: '▴'; }
.points ul { margin: var(--e-2) 0 0; padding-left: var(--e-4); color: var(--texte-second); font-size: var(--texte-2); }
.pas-utilise { margin-top: var(--e-8); }
.pas-utilise h2 { font-size: var(--texte-4); color: var(--texte-second); }
.pas-utilise .ligne-vide { border-top: var(--bord); padding: 0; }
.pas-utilise div.ligne-vide { display: flex; align-items: center; min-height: var(--cible); }
.pas-utilise .ligne-vide > summary { padding: 0; }
.ligne-vide-texte { flex: 1; min-width: 0; font-size: var(--texte-3); color: var(--texte-second); overflow-wrap: anywhere; }
.ligne-vide-texte strong { font-weight: var(--graisse-moyenne); }
.pas-utilise .ligne-vide[open] { padding-bottom: var(--e-3); }
@media (max-width: 760px) {
  .chiffres-a.chiffres-trois { gap: var(--e-2); }
  .chiffres-a.chiffres-trois li { padding: var(--e-3) var(--e-2); }
  .chiffres-a.chiffres-trois strong { font-size: var(--texte-4); }
  .chiffres-a.chiffres-trois span { font-size: var(--texte-1); }
  .points > summary { min-height: var(--cible); }
}
/* Carnet : recherche, lignes utiles, résumé quand aucun contact n'est choisi. */
.colonne-contacts { display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.recherche-contacts { display: grid; gap: var(--e-1); }
.compte-contacts { margin: 0; }
.liste-contacts .contact { display: grid; min-width: 0; }
.liste-contacts .coupe { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-contacts .contact-liens { display: flex; gap: var(--e-4); min-width: 0; padding-bottom: var(--e-1); font-size: var(--texte-2); }
.liste-contacts .contact-liens a { display: flex; align-items: center; min-height: 24px; min-width: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent-texte); font-size: var(--texte-2); }
.liste-contacts .contact-liens a[href^="tel:"] { flex: none; }
.liste-contacts .contact-liens a:hover { background: none; text-decoration: underline; }
.apercu-carnet { display: grid; gap: var(--e-6); align-content: start; padding: var(--e-5); border-radius: var(--r-5); background: var(--surface); box-shadow: var(--ombre-1); min-width: 0; }
.apercu-carnet h2, .apercu-carnet h3 { margin: 0 0 var(--e-2); }
.comptes-types, .apercu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.comptes-types { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--e-2); }
.comptes-types a { display: grid; gap: 2px; min-height: var(--cible); padding: var(--e-2) var(--e-3); border-radius: var(--r-3); text-decoration: none; background: var(--actif); color: var(--texte); }
.comptes-types a:hover { background: var(--survol); }
.comptes-types strong { font-size: var(--texte-5); font-weight: var(--graisse-titre); line-height: 1; }
.comptes-types span { font-size: var(--texte-2); color: var(--texte-second); }
.apercu-liste li { display: flex; gap: var(--e-3); align-items: baseline; justify-content: space-between; min-height: var(--cible); border-top: var(--bord); }
.apercu-liste a { color: var(--texte); text-decoration: none; font-weight: var(--graisse-moyenne); display: inline-flex; align-items: center; min-height: var(--cible); }
.apercu-liste a:hover { text-decoration: underline; }
@media (min-width: 761px) { .maitre-detail.carnet-pro { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
@media (max-width: 760px) { .apercu-carnet { display: none; } .liste-contacts .contact-liens { padding-bottom: 0; } }
@media (max-width: 760px), (pointer: coarse) { .liste-contacts .contact-liens a { min-height: var(--cible); } }

/* Facture à émettre (D-148, D-149) — proposé (10/11), en attente de la charte de Justine : .copie (une valeur qui se copie d'un clic),
   .infos-facture, .totaux-facture, .champs-libres, .barre-facture, .formulaire-facture. Montrés dans design.html § 17. */
.vue-facture { min-width: 0; }
.vue-facture > * + * { margin-top: var(--e-4); }
.copie { display: inline; max-width: 100%; margin: 0; padding: 0 var(--e-1); border: 0; border-radius: var(--r-1); background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: copy; overflow-wrap: anywhere; }
.copie:hover { background: var(--survol); }
.copie:focus-visible { outline: none; box-shadow: var(--focus); }
.infos-facture { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--e-3); margin: 0; font-size: var(--texte-3); }
.infos-facture dt { font-size: var(--texte-2); color: var(--texte-tiers); }
.infos-facture dd { margin: 0; min-width: 0; }
.totaux-facture { max-width: 22rem; margin-left: auto; }
.mention-facture { margin: 0; font-size: var(--texte-3); color: var(--texte-second); }
.champs-libres, .champs-emission { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--e-3); }
.barre-facture { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.formulaire-facture { display: grid; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r-5); background: var(--surface); box-shadow: var(--ombre-1); }
.formulaire-facture h2 { margin: 0; }
.erreur-champ { margin: 0; font-size: var(--texte-2); color: var(--erreur); }
.erreur-champ:empty { display: none; }
.factures-projet { margin-top: var(--e-6); min-width: 0; }
.factures-projet .barre-actions { margin-bottom: var(--e-2); }
.factures-projet .sous-titre { margin: 0; }
.vue-facture .entete-a { flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
@media (max-width: 760px) { .vue-facture .entete-a h1 { flex: 1 1 100%; } }
.champs-emission { align-items: start; }