/* Kolvaya — jetons de couleur repris de l'appli Kolvaya (app/web/styles). Sans compilation (D-13). */

@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(polices/dmsans-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(polices/dmsans-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url(polices/dmsans-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url(polices/dmsans-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
/* Cormorant Garamond (correctif C5 des tests simulés, 09/10/2026) : dans ce fichier, les lettres accentuées composées d'un circonflexe,
   d'un grave ou d'une cédille ont leur signe décalé (« Tâches » ; vu dans Chromium et avec FreeType, à toutes les graisses). Ces
   lettres-là (minuscules, et Ç) sont prises dans la police de repli de --serif ; l'aigu, le tréma et les autres capitales restent en
   Cormorant. */
@font-face { font-family: 'Cormorant Garamond'; font-weight: 700; font-display: swap; src: url(polices/cormorantgaramond-700-latin.woff2) format('woff2'); unicode-range: U+0000-00C6, U+00C8-00DF, U+00E1, U+00E3-00E6, U+00E9, U+00EB, U+00ED, U+00EF-00F1, U+00F3, U+00F5-00F8, U+00FA, U+00FC-FFFF; }

:root {
  /* La palette chaude (CDC 00_Socle/INTERFACE_CONVIVIALE §6.1, 09/10/2026). Le bleu nuit reste la marque et le texte fort ;
     l'ambre est l'unique accent chaud (--ambre pour les dessins et les icônes, --ambre-fonce quand il porte du texte,
     --ambre-pale pour les fonds) ; le fond est crème et les gris tirent vers le chaud. Les cartes restent blanches.
     tests/palette.test.mjs calcule les contrastes AA des couples utilisés (4,5:1 le texte, 3:1 les icônes et les bordures utiles). */
  --marine: #002366;
  --marine-fonce: #001844;
  --rose: #E8A09A;
  --rose-pale: #FDF0EF;
  --retard: #A8463E;
  --vert: #3F7D6E;
  --ambre: #B4580F;
  --ambre-fonce: #7A3E05;
  --ambre-pale: #FBEBD3;
  /* Le fond Lagon, un turquoise très clair (D-124, 21/10/2026), et ses gris accordés : traits, séparateurs, pastilles. */
  --fond: #EAF5F3;
  --blanc: #FFFFFF;
  --texte: #1A1A2E;
  /* Plus foncé depuis le lot 1 (Hélène, tests simulés du 10/10/2026 : « le texte gris sur crème est pâle ») : 7:1 sur le fond
     crème (5,8:1 avant), 4,5:1 au moins sur chaque fond où il sert (tests/lot1_affichage.test.mjs). */
  --gris: #3F4A4D;
  --gris-clair: #93A5A2;
  --contour: #74898A;
  --bordure: #D3E5E2;
  --separateur: #E3EFED;
  --pastille: #E2F0ED;
  --survol: #F0F8F6;
  --panneau: #E0EFEC;
  --ombre: 0 2px 10px rgba(16, 60, 64, 0.09);
  --ombre-haute: 0 6px 18px rgba(16, 60, 64, 0.14);
  /* Agenda familial (CDC M06_Agenda/AGENDA_MVP, D-93, TD-63) : 8 teintes distinctes, une par membre —
     affectées par hachage du nom (web/agenda.js classeCouleurMembre), aucun registre à tenir. */
  --membre-0: #002366;
  --membre-1: #A8463E;
  --membre-2: #3F7D6E;
  --membre-3: #C17A1E;
  --membre-4: #6B4FA0;
  --membre-5: #1E7FA6;
  --membre-6: #B5566F;
  --membre-7: #4F7A28;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--fond); color: var(--texte); font-family: var(--sans); font-size: 1rem; line-height: 1.45;
  /* Les chiffres de Cormorant sont « à l'ancienne » : « 1 180 » se lisait « I I80 » dans les titres (C5). */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top, 0) max(16px, env(safe-area-inset-right, 0)) env(safe-area-inset-bottom, 0) max(16px, env(safe-area-inset-left, 0));
}
main { max-width: 640px; margin: 0 auto; padding-bottom: 48px; min-width: 0; }
html, body { overflow-x: hidden; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.marque { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: 4px; color: var(--marine); }
.titre { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--marine); margin: 4px 0 0; }
.sous-titre { color: var(--gris); margin: 4px 0 20px; }
.aide { font-size: 13px; color: var(--gris); }
.erreur { color: var(--retard); font-size: 14px; margin: 8px 0 0; }
/* Échéances (CDC M02_Taches/ECHEANCES_MVP, D-92 lot 4) : un bouton par échéance « à traiter », affiché comme
   une ligne de texte cliquable plutôt qu'un bouton standard. */
.echeance-a-traiter { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 2px;
  margin: 0 0 2px; color: var(--retard); font-size: 13px; }
.echeance-a-traiter:hover { text-decoration: underline; }

.carte { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 24px; margin-top: 12vh; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 12px; }
label input, label textarea { display: block; width: 100%; margin-top: 4px; }
input, textarea {
  border: 1px solid var(--contour); border-radius: 10px; background: var(--blanc); padding: 10px 12px; min-height: 44px;
  font-size: 16px; font-weight: 400; color: var(--texte);
}
input:focus, textarea:focus { outline: 2px solid var(--marine); outline-offset: -1px; border-color: transparent; }
.principal { background: var(--marine); color: var(--blanc); border: 0; border-radius: 10px; padding: 10px 18px; min-height: 44px; font-weight: 600; }
.principal:hover { background: var(--marine-fonce); }
.principal:disabled { opacity: .6; cursor: default; }
/* Connexion en un geste (CDC 00_Socle/CONNEXION_UN_GESTE) : un grand bouton, la connexion manuelle dessous. */
.principal.large { display: block; width: 100%; min-height: 52px; font-size: 17px; }
#connexion-un-geste { margin-bottom: 8px; }
#attente-nextcloud { margin-top: 12px; color: var(--gris); font-size: 14px; }
#attente-nextcloud p { margin: 6px 0; }
#lien-nextcloud { color: var(--marine); font-weight: 600; }
#connexion-manuelle summary { cursor: pointer; color: var(--marine); font-weight: 600; font-size: 14px; padding: 10px 0; min-height: 44px; }
#connexion[data-attente] #connexion-manuelle, #connexion[data-attente] #connexion-nextcloud { display: none; }
.discret { background: none; border: 0; color: var(--marine); padding: 10px 12px; min-height: 44px; font-weight: 600; border-radius: 10px; }
.discret:hover { background: var(--pastille); }
.danger { color: var(--retard); }

/* Une hauteur fixe (C11 des tests simulés) : la pastille « 2 à valider » (44 px) qui apparaît ne pousse plus l'écran de 4 px. */
.entete { display: flex; align-items: center; gap: 8px; padding: 16px 0 8px; min-height: 68px; }
.entete .marque { font-size: 18px; margin-right: auto; min-width: 0; }
.entete .avatar { flex: none; }
/* Le nom KOLVAYA ramène au Foyer, l'écran de départ (Fred, 08/10/2026 : « il manque un bouton pour revenir sur l'écran
   de départ »). Un lien sobre : pas de soulignement, un repère au survol et au clavier. */
a.marque { text-decoration: none; border-radius: 6px; }
a.marque:hover { opacity: .75; }
a.marque:focus-visible { outline: 2px solid var(--marine); outline-offset: 4px; }
/* La maison devant « Foyer » dans la barre du haut : l'onglet de l'écran de départ se reconnaît d'un coup d'œil. */
.listes button .icone { display: inline-grid; place-items: center; margin-right: 6px; vertical-align: -4px; }
.listes button .icone svg { width: 18px; height: 18px; }
/* L'état de la synchronisation (C7 des tests simulés) : une pastille de largeur fixe, son texte coupé d'un « … » s'il est plus long ;
   « Synchronisation… » ne pousse plus l'avatar hors de l'écran. Sur un écran étroit, le point seul (le texte reste son nom). */
.etat { flex: none; width: 11em; border: 0; background: var(--separateur); color: var(--gris); border-radius: 999px; padding: 6px 10px; font-size: 13px; line-height: 20px; min-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat::before { content: ''; display: inline-block; vertical-align: 0; margin-right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gris-clair); }
@media (max-width: 359px) { .etat { width: 32px; padding: 0; font-size: 0; } .etat::before { margin: 0; } }
@media (max-width: 459px) { .entete:has(> .compteur-a-valider:not([hidden])) .etat { width: 32px; padding: 0; font-size: 0; } .entete:has(> .compteur-a-valider:not([hidden])) .etat::before { margin: 0; } }
@media (max-width: 379px) { .entete .marque { font-size: 15px; letter-spacing: 2px; } .entete .compteur-a-valider { padding: 0 10px; } }
.etat[data-statut="ok"]::before { background: var(--vert); }
.etat[data-statut="horsligne"]::before { background: var(--rose); }
.etat[data-statut="erreur"]::before { background: var(--retard); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--pastille); color: var(--marine); border: 0; font-weight: 600; }

.listes { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 12px; scrollbar-width: none; }
/* Un fondu au bord où il reste des onglets (app.js, majBordsBarre). */
.listes.suite-droite { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.listes.suite-gauche { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.listes.suite-gauche.suite-droite { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.listes button { border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; padding: 8px 14px; white-space: nowrap; min-height: 40px; }
.listes button[aria-current="true"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); font-weight: 600; }
.listes .ajouter-liste { flex: none; width: 40px; padding: 0; color: var(--marine); font-size: 22px; line-height: 1; font-weight: 400; }
.listes .ajouter-liste:hover { background: var(--pastille); }
/* Écran d'ordinateur (PC de Fred, 08/10/2026) : la barre défilait dans une colonne de 640 px pour 1 570 px d'onglets,
   l'onglet choisi coupé par le fondu du bord. Au-delà de 900 px, tous les onglets se voient, sur deux lignes au besoin. */
@media (min-width: 900px) {
  .listes { flex-wrap: wrap; overflow: visible; }
  .listes.suite-gauche, .listes.suite-droite, .listes.suite-gauche.suite-droite { -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 1100px) { main { max-width: 880px; } }

/* La barre du bas (TD-66, demande de Fred du 07/10/2026) : sur téléphone, elle remplace la barre d'onglets du
   haut — quatre entrées et « Plus », à portée du pouce, au-dessus de la zone des gestes du téléphone. */
.barre-bas { display: none; }
@media (max-width: 760px) {
  .listes { display: none; }
  .barre-bas {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--blanc); border-top: 1px solid var(--bordure); box-shadow: 0 -4px 16px rgba(0, 35, 102, .06);
    padding: 4px max(4px, env(safe-area-inset-right, 0)) calc(4px + env(safe-area-inset-bottom, 0)) max(4px, env(safe-area-inset-left, 0));
  }
  #appli { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0)); }
  /* Un élément amené à l'écran (focus au clavier, scrollIntoView) s'arrête au-dessus de la barre, jamais dessous. */
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)); }
}

/* La barre en bas (nouvelle interface, étape 2, D-123). Sur grand écran, la barre et la carte de Kolvaya restent à leur place,
   en haut. Sur téléphone, elles se posent au-dessus de la navigation, la carte juste au-dessus de la barre, et la page défile
   au-dessus d'elles (--hauteur-nav et --barre-bas, mesurées par app.js). Pendant la frappe, la navigation s'efface et la barre
   se pose sur le clavier (--clavier). Tant que la barre est vide et qu'on n'y touche pas : une ligne et le micro. */
.dock { display: contents; }
@media (max-width: 760px) {
  .dock {
    display: flex; flex-direction: column-reverse; gap: 8px; position: fixed; left: 0; right: 0; z-index: 19;
    bottom: calc(var(--hauteur-nav, 72px) + var(--clavier, 0px));
    max-height: calc(100dvh - var(--hauteur-nav, 72px) - var(--clavier, 0px) - 48px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px));
    background: var(--fond); border-top: 1px solid var(--bordure);
  }
  .dock > * { flex: none; margin: 0; }
  #appli { padding-bottom: max(calc(var(--barre-bas) + 16px), calc(96px + env(safe-area-inset-bottom, 0px))); }
  html { scroll-padding-bottom: calc(var(--barre-bas) + 8px); }
  #appli:has(#form-ajout:focus-within) > .barre-bas { display: none; }
  .dock .ligne-ajout textarea { flex: 1 1 60%; min-height: calc(1lh + 20px); }
  .dock #form-ajout:not(:focus-within) .info-ajout { display: none; }
  .dock #form-ajout:not(:focus-within):has(textarea:placeholder-shown) .principal { display: none; }
  .dock #form-ajout:has(textarea:placeholder-shown) #nom-liste-ajout { display: none; }
}
.barre-bas button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px;
  border: 0; background: none; color: var(--gris); font-size: 12px; line-height: 1.2; padding: 6px 2px 4px;
}
.barre-bas .icone { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color .15s; }
.barre-bas svg { width: 24px; height: 24px; }
.barre-bas .libelle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-bas button[aria-current="page"] { color: var(--marine); font-weight: 600; }
.barre-bas button[aria-current="page"] .icone { background: var(--pastille); }

/* « Tout » (CDC 00_Socle/INTERFACE_CONVIVIALE 3.2) : la grille de chaque ancien onglet, icône et nom ; deux colonnes sur téléphone.
   Lot 1 (Hélène, très grande taille, 320 px : « Aujourd'h… », « Échéanc… ») : la largeur d'une tuile suit la taille du texte (rem),
   une tuile par ligne quand deux ne tiennent plus, et le nom passe à la ligne au lieu d'être coupé. */
.tout-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 8px; }
.tout-grille button {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--bordure); border-radius: 12px; background: var(--blanc); color: var(--texte);
}
.tout-grille button:hover { background: var(--fond); }
.tout-grille .icone { display: grid; flex: none; color: var(--marine); }
.tout-grille svg { width: 24px; height: 24px; }
.tout-grille .libelle { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 760px) { .tout-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); } }
/* Les groupes de « Tout » (étape 4b, maquette « Tout ») : un titre discret en capitales au-dessus de chaque grille. */
.tout-groupe-titre { margin: 18px 4px 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gris); }
.tout-groupe:first-child .tout-groupe-titre { margin-top: 4px; }
/* « Tout › Courses » : où l'on est, au-dessus de la barre de saisie ; le premier mot ramène à la grille. */
.vue-nom { display: flex; align-items: center; gap: 2px; margin: 0 0 4px; font-size: 14px; color: var(--gris); }
.vue-nom .nom { font-weight: 600; color: var(--marine); }
.vue-nom button { min-height: 32px; padding: 0 4px; }
/* « Tes missions » (CDC 3.3) : les cartes ont la présentation de celles de l'Accueil. */
#foyer-missions { margin-top: 20px; }
#foyer-missions-liste { display: flex; flex-direction: column; gap: 12px; }
.foyer-mission { display: block; width: 100%; text-align: left; background: var(--blanc); border: 0; border-radius: 16px; box-shadow: var(--ombre); padding: 16px 18px; }
.foyer-mission .jour-titre { margin: 0 0 6px; font-size: 17px; }
.foyer-mission .aide { margin: 2px 0; overflow-wrap: anywhere; }
/* « À valider » est la page de sa propre section : le reste de l'Accueil n'y paraît pas. */
#foyer-vue[data-page="avalider"] > :not(#foyer-a-trier) { display: none; }
@media (max-width: 760px) {
  dialog.feuille {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 88vh; max-height: 88dvh;
    padding: 20px max(16px, env(safe-area-inset-right, 0)) calc(12px + env(safe-area-inset-bottom, 0)) max(16px, env(safe-area-inset-left, 0));
  }
  dialog.feuille[open] { animation: feuille-monte .2s ease-out; }
}
@keyframes feuille-monte { from { transform: translateY(32px); opacity: .5; } to { transform: none; opacity: 1; } }
/* Budget lot 2 : les trois chiffres du mois et le graphique des dépenses par catégorie. Couleurs de la feuille de style seulement. */
.budget-bilan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.budget-chiffre { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 10px 12px; min-width: 0; }
.budget-chiffre-nom { display: block; font-size: 12px; font-weight: 600; color: var(--gris); }
.budget-chiffre strong { display: block; font-size: 16px; color: var(--marine); overflow-wrap: anywhere; }
.budget-chiffre.negatif strong { color: var(--retard); }
.budget-graphique { margin: 0 0 16px; }
.budget-graphique .jour-titre { margin-top: 0; }
#budget-graphique-dessin { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 10px 14px; }
#budget-graphique-dessin:empty { display: none; }
.graphique-svg { display: block; width: 100%; height: auto; }
.graphique-categorie { font-size: 13px; fill: var(--texte); font-family: inherit; }
.graphique-montant { font-size: 13px; font-weight: 600; fill: var(--marine); font-family: inherit; }
.graphique-barre { fill: var(--marine); }

@media (prefers-reduced-motion: reduce) { dialog.feuille[open] { animation: none; } }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.filtres #recherche { flex: 1 1 160px; min-width: 0; }
#filtre-moi { flex: none; border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; padding: 8px 14px; white-space: nowrap; min-height: 40px; }
#filtre-moi[aria-pressed="true"] { background: var(--pastille); border-color: var(--marine); color: var(--marine); font-weight: 600; }

.ajout { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 10px; margin-bottom: 16px; }
/* La zone de saisie sur toute la largeur, qui grandit avec la phrase ; « i », micro et Ajouter dessous (Fred, 10/10/2026). */
.ligne-ajout { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ligne-ajout textarea { flex: 1 1 100%; min-width: 0; border: 0; resize: none; field-sizing: content; min-height: calc(3lh + 20px); max-height: 40vh; line-height: 1.4; }
.ligne-ajout textarea:focus { outline: 0; }
.info-ajout { margin-right: auto; height: 36px; min-height: 0; padding: 0 14px; border: 1px solid var(--contour); border-radius: 999px; background: var(--blanc); color: var(--marine); font: 600 14px/1 var(--sans); }
/* Un nombre dans un bouton (« Envies… 2 ») : une pastille, jamais entre parenthèses (étape 1 de la nouvelle interface). */
.compte { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--pastille); color: var(--marine); font-size: 12px; font-weight: 700; }
.info-ajout[aria-expanded="true"] { background: var(--pastille); border-color: var(--marine); }
/* Dans l'onglet Courses, le « i » montre les exemples d'articles (Fred, 10/10/2026). */
#appli:not(:has(> #courses-vue:not([hidden]))) #form-ajout:has(#aide-ajout[hidden]) .info-ajout { display: none; }
#barre-exemples-courses { display: none; }
#appli:has(> #courses-vue:not([hidden])) #barre-exemples-courses:has(> #exemples-courses:not([hidden])) { display: block; }
#aide-ajout:has(> #nom-liste-ajout:empty):has(> #exemples-ajout[hidden]) { margin: 0; }
/* L'indication « Écris ou dis-le… » reste entière à 320 px (C4 des tests simulés : « Dis quelque chose à K ») : un peu moins de marge. */
@media (max-width: 380px) { .ligne-ajout { gap: 6px; } .ligne-ajout textarea { padding-left: 6px; padding-right: 6px; } .ligne-ajout .principal { padding-left: 12px; padding-right: 12px; } }
/* L'aperçu sous la barre et les annonces : une information, pas une erreur (09/10/2026) — accent pâle, texte foncé. Le rouge reste aux
   vrais avertissements (.avertissement, « Attention : déjà … ») et aux échecs. */
.apercu { margin: 4px 0 0; padding: 6px 12px; background: var(--ambre-pale); color: var(--ambre-fonce); border-radius: 10px; font-size: 13px; font-weight: 600; }
/* Avertissement de chevauchement (D-85) : cohérent avec .apercu, mais jamais bloquant — un bord le distingue. */
.avertissement { margin: 4px 0 0; padding: 6px 12px; background: var(--rose-pale); color: var(--retard); border: 1px solid var(--retard); border-radius: 10px; font-size: 13px; font-weight: 600; }
.type-saisie { display: flex; gap: 6px; margin: 8px 0 0; }
.preciser-type { margin: 6px 0 0; min-height: 36px; padding: 0 2px; font-size: 14px; }
.type-saisie button { border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; padding: 4px 12px; font-size: 12px; }
.type-saisie button[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); font-weight: 600; }
.type-saisie button:disabled { opacity: .4; }
/* « Visible par » d'un rendez-vous (CDC M06_Agenda/JUSTE_MOI_MVP) : une pastille comme les types, allumée sur « juste moi ». */
.visibilite-saisie { display: block; margin: 6px 0 0; border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--texte); }
.visibilite-saisie[hidden] { display: none; }
.visibilite-saisie[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); font-weight: 600; }
/* Le 🔒 devant un rendez-vous « juste moi », sans changer le texte du nom (lu « Juste moi » par les lecteurs d'écran). */
.corps .nom.prive::before, .agenda-apercu.prive::before { content: '🔒\00a0'; content: '🔒\00a0' / 'Juste moi, '; }
.etiq.lieu { background: transparent; border: 1px solid var(--separateur); color: var(--marine); text-decoration: none; }
.lien-carte { display: inline-flex; align-items: center; min-height: 44px; color: var(--marine); }
.lien-carte[hidden] { display: none; }
span.coche { display: flex; align-items: center; justify-content: center; font-size: 13px; border-color: transparent; background: transparent; }
/* Ce qui arrive (CDC 00_Socle/CE_QUI_ARRIVE_MVP) : l'icône du module à la place de la case, et dans l'étiquette d'une échéance. */
span.coche .icone { display: grid; place-items: center; }
span.coche .icone svg { width: 20px; height: 20px; }
.etiq.source { display: inline-flex; align-items: center; gap: 4px; }
.etiq.source .icone { display: inline-grid; }
.etiq.source .icone svg { width: 13px; height: 13px; }
.au-compteur .details .etiq.liste { white-space: nowrap; }
.ajout .aide { margin: 8px 0 2px; padding: 0 2px; }
/* Où va ce qu'on écrit, sur sa ligne, avant les exemples (C6 des tests simulés : « dans À valider Exemples : » se lisait d'un bloc). */
#nom-liste-ajout { display: block; }
#nom-liste-ajout:empty { display: none; }
#nom-liste-ajout { font-weight: 600; color: var(--marine); }

.taches { list-style: none; margin: 0; padding: 0; background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); overflow: hidden; }
.taches:empty { display: none; }
.tache { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--separateur); }
.tache:first-child { border-top: 0; }
.coche { flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--contour); background: var(--blanc); padding: 0; position: relative; }
.coche:hover { border-color: var(--marine); }
.fait .coche { background: var(--vert); border-color: var(--vert); }
.fait .coche::after { content: ''; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid var(--blanc); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.coche:disabled { opacity: .4; cursor: default; }
/* Correctif D3 (09/10/2026) : le rond d'une tâche se touche sur 44 px, débordant vers le bord de la ligne et jamais jusqu'au
   titre (6 px libres entre les deux) : on ne coche plus en voulant ouvrir la fiche. */
.tache > button.coche::before { content: ''; position: absolute; top: -9px; bottom: -9px; left: -12px; right: -6px; border-radius: 22px; }
.corps { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; }
.corps .nom { display: block; overflow-wrap: anywhere; }
.fait .corps .nom { color: var(--gris); text-decoration: line-through; }
.corps .details { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8125rem; color: var(--gris); margin-top: 3px; min-width: 0; }
.corps .details > * { max-width: 100%; overflow-wrap: anywhere; }
.corps .quand.retard { color: var(--retard); font-weight: 600; }
.etiq { background: var(--separateur); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
/* « Pour » sur une ligne (étape 4a) : la pastille de la couleur du membre, le prénom en couleur de texte (contraste AA). */
.etiq.pour { display: inline-flex; align-items: center; gap: 5px; background: var(--blanc); border: 1px solid var(--bordure); color: var(--texte); font-weight: 600; }
.etiq.pour::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--couleur-membre, var(--gris-clair)); }
.etiq.liste { background: var(--pastille); color: var(--marine); }
.etiq.prio-1 { background: var(--rose-pale); color: var(--retard); font-weight: 700; }
.etiq.mot { background: transparent; border: 1px solid var(--separateur); color: var(--marine); }
.etiq.prio-5 { background: var(--pastille); color: var(--marine); font-weight: 600; }
.jour-titre { font-family: var(--serif); font-size: 20px; color: var(--marine); margin: 20px 0 8px; font-weight: 700; }
.case { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; color: var(--texte); font-size: 14px; }
.case input { width: auto; min-height: 0; margin-top: 2px; }
/* Une vraie cible pour le doigt (testeur du lot B, 07/10/2026 : 13 px) : toute la ligne de la case se touche. */
.case { min-height: 44px; align-items: center; }
.case input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--marine); }
select { border: 1px solid var(--contour); border-radius: 10px; background: var(--blanc); padding: 10px 12px; min-height: 44px; width: 100%; margin-top: 4px; font-size: 16px; }
.attente .corps .quand::after, .attente .corps .nom::after { content: ' ·'; color: var(--rose); font-weight: 600; }

/* Courses (CDC M03, COURSES_MVP, D-92 lot 2) : des pastilles à toucher, comme .type-saisie (unités de la fiche). */
.pastille { border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; padding: 8px 14px; font-size: 14px; min-height: 36px; max-width: 100%; overflow-wrap: anywhere; }
/* Un libellé saisi d'un seul tenant (sans espace) reste dans la fiche (test utilisateur du 07/10/2026). */
#article-courses-libelle { overflow-wrap: anywhere; }
/* L'annonce des courses ajoutées ou déjà sur la liste : une information, pas une erreur (test du 07/10/2026). */
#annonce-courses, #annonce-depense { background: var(--fond); color: var(--texte); border: 1px solid var(--bordure); font-weight: 600; }
.pastille:hover { background: var(--pastille); border-color: var(--marine); }

details { margin-top: 20px; }
summary { cursor: pointer; color: var(--gris); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 0; }
.vide { text-align: center; color: var(--gris); padding: 32px 0; }

dialog { border: 0; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 35, 102, .18); padding: 20px; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 24, 68, .35); }
dialog h2 { font-family: var(--serif); color: var(--marine); font-size: 26px; margin: 0 0 16px; }
/* Une fenêtre plus haute que l'écran (Tâche, Équipement…, C10 des tests simulés) : ses boutons restent visibles en bas pendant
   qu'on fait défiler ; un champ (une date surtout) ne dépasse jamais de la fenêtre. */
dialog:not([class]) > form > .actions:last-child { position: sticky; bottom: -20px; z-index: 1; margin-bottom: -20px; padding: 8px 0 20px; background: var(--blanc); }
/* Ce qu'on amène à l'écran dans la fenêtre (un champ touché, scrollIntoView) s'arrête au-dessus de ces boutons, jamais dessous. */
dialog:not([class]):has(> form > .actions:last-child) { scroll-padding-bottom: 120px; }
dialog input, dialog select, dialog textarea { max-width: 100%; min-width: 0; }
/* Deux champs côte à côte qui ne dépassent jamais de la fenêtre (C10 des tests simulés : « Garantie jusqu'au », « Heure » coupés) ;
   l'un sous l'autre sur un écran étroit, où une date n'a pas la place d'être lue à moitié de largeur. */
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 380px) { .ligne { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.actions .espace { flex: 1; }
/* Contacts (CDC M10_Contacts/CONTACTS_MVP.md) : appeler/SMS/courriel/itinéraire, en frères du bouton qui
   ouvre la fiche — jamais imbriqués dans lui (web/app.js, ligneContact()). */
.contact-actions { display: flex; flex: none; gap: 4px; align-items: center; }
.contact-actions a { text-decoration: none; }
.menu button { display: block; width: 100%; text-align: left; }
/* Une ligne de tâche dans une fenêtre .menu (fiche véhicule, C2 des tests simulés) : le rond garde sa taille, le texte prend la place. */
.menu .tache > .coche { width: 26px; }
.menu .tache > .corps { width: auto; }

.invite-rappels { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 14px 16px; margin-bottom: 16px; }
.invite-rappels p { margin: 0 0 10px; font-size: 14px; }
.invite-rappels-actions { display: flex; gap: 8px; align-items: center; }

/* Sous-tâches (TD-21) */
#sous-taches { border: 1px solid var(--separateur); border-radius: 10px; padding: 6px 10px 10px; margin: 8px 0; }
#sous-taches legend { font-size: 13px; padding: 0 4px; }
#liste-sous-taches { list-style: none; margin: 0 0 6px; padding: 0; }
#liste-sous-taches li { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
#liste-sous-taches input[type=checkbox] { width: 20px; height: 20px; margin: 0; padding: 0; flex: none; }
#liste-sous-taches li.fait span { text-decoration: line-through; opacity: .6; }


/* Mode d'emploi dans l'appli */
#aide { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
/* « Fermer » toujours visible en haut pendant la lecture (lot F1) : l'en-tête colle au bord haut de la fenêtre,
   qui défile (20 px : sa marge intérieure). */
.aide-entete { position: sticky; top: -20px; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: -20px -20px 8px; padding: 12px 20px; background: var(--blanc); border-bottom: 1px solid rgba(0, 35, 102, .1); }
.aide-entete h2 { margin: 0; font-size: 22px; }
.menu .aide-entete button { width: auto; flex: none; }
.texte-aide h2 { scroll-margin-top: 76px; }
.texte-aide { overflow-wrap: anywhere; line-height: 1.5; }
.texte-aide h1 { font-family: var(--serif); color: var(--marine); font-size: 28px; margin: 0 0 12px; }
.texte-aide h2 { font-size: 20px; margin: 24px 0 8px; }
.texte-aide h3 { font-size: 17px; margin: 18px 0 6px; }
.texte-aide hr { border: 0; border-top: 1px solid rgba(0, 35, 102, .15); margin: 20px 0; }
.texte-aide ul, .texte-aide ol { padding-left: 22px; }
.texte-aide li { margin: 4px 0; }
.texte-aide code { background: rgba(0, 35, 102, .07); border-radius: 4px; padding: 1px 5px; font-size: .92em; }
.texte-aide .tableau { overflow-x: auto; margin: 10px 0; }
.texte-aide table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.texte-aide th, .texte-aide td { border: 1px solid rgba(0, 35, 102, .15); padding: 6px 8px; text-align: left; vertical-align: top; }
.texte-aide th { background: rgba(0, 35, 102, .05); }
.texte-aide a { color: var(--marine); }

/* Vue tableau (kanban) : trois colonnes côte à côte, qui défilent de côté sur un téléphone. Les boutons qui l'ouvraient sont partis
   avec l'étape 3 de la nouvelle interface ; ces règles ne servent plus et partiront avec le nettoyage des styles. */
#groupes.tableau { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
#groupes.tableau .colonne { scroll-snap-align: start; background: var(--separateur); border-radius: 12px; padding: 8px; min-width: 0; }
#groupes.tableau .tache { flex-wrap: wrap; background: var(--blanc); border-radius: 10px; margin-bottom: 8px; }
/* « Commencer ▸ » sur la ligne de la date (Fred, 10/10/2026) : la carte perd une ligne, on voit deux fois plus de tâches. */
.tache:has(> .corps .details):has(> .deplacer) { position: relative; }
.tache:has(> .corps .details) > .deplacer { position: absolute; right: 4px; bottom: 4px; flex-basis: auto; padding: 4px 8px; }
.tache:has(> .corps .details):has(> .deplacer) .details { padding-right: 116px; }
@media (max-width: 640px) { #groupes.tableau { grid-auto-columns: 85%; } }

/* Vue kanban jour/semaine (26/09/2026) : mêmes colonnes que la vue tableau par liste (classes partagées
   ci-dessus), une vue globale en plus, activable depuis Aujourd'hui/À venir. Les cartes-tâches se glissent
   (HTML5 natif) vers une autre colonne pour changer leur échéance ; les cartes-événements ne se glissent pas. */
/* D'une colonne à l'autre (Fred, 08/10/2026) : deux flèches en haut du tableau, qui restent en haut de l'écran pendant
   qu'on fait défiler de longues colonnes. */
.colonnes-nav { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 8px; position: sticky; top: 8px; z-index: 5; pointer-events: none; }
.colonnes-nav[hidden] { display: none; }
.colonnes-nav button { pointer-events: auto; border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; width: 44px; height: 44px; font-size: 22px; line-height: 1; color: var(--marine); box-shadow: var(--ombre); }
.colonnes-nav button:disabled { opacity: .35; cursor: default; }
.colonnes-nav button:not(:disabled):hover { background: var(--pastille); }
/* Grand écran : les colonnes d'un Kanban se partagent la largeur pour tenir toutes à l'écran — les 8 de la semaine
   comprises, et ses 9 colonnes avec « En retard » et « Sans date » — sans descendre sous 135 px pour les jours, 260 px pour
   les catégories (des cartes plus chargées) ; au-delà,
   on passe d'une colonne à l'autre par les flèches. */
@media (min-width: 1100px) {
  #groupes.tableau.kanban-large { grid-auto-columns: minmax(max(135px, calc((100% - (var(--nb-colonnes, 4) - 1) * 12px) / var(--nb-colonnes, 4))), 1fr); }
  #groupes.tableau.kanban-large.kanban-categories { grid-auto-columns: minmax(max(260px, calc((100% - (var(--nb-colonnes, 4) - 1) * 12px) / var(--nb-colonnes, 4))), 1fr); }
}
.kanban-semaine-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 12px; }
.kanban-semaine-nav button { border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; width: 36px; height: 36px; font-size: 18px; line-height: 1; }
.kanban-semaine-nav button:hover { background: var(--pastille); }
.kanban-semaine-nav span { font-weight: 600; color: var(--marine); min-width: 140px; text-align: center; }
#groupes.tableau .colonne.survol { outline: 2px dashed var(--marine); outline-offset: -2px; }
#groupes.tableau .tache[draggable="true"] { cursor: grab; }
#groupes.tableau .tache[draggable="true"]:active { cursor: grabbing; }

/* Planifier ma semaine / ma journée (CDC M02 Étape 4, 05/10/2026) : mêmes colonnes que le kanban qu'elle
   remplace. Le <select> « → jour »/« → créneau » sous chaque carte sans date fait au toucher ce que le
   glisser-déposer fait à la souris (le glisser tactile n'est pas vérifié, README taches) ; « Plus tard »
   est un bouton distinct, à côté. Un créneau libre se glisse-dépose dessus comme une colonne-jour. */
.planifier-vers { flex-basis: 100%; display: flex; gap: 8px; align-items: center; padding-top: 6px; }
.planifier-select { flex: 1; min-width: 0; border: 1px solid var(--contour); border-radius: 8px; padding: 6px 8px; background: var(--blanc); font-size: 14px; }
#groupes.tableau .tache.creneau-libre { background: var(--pastille); border: 1px dashed var(--marine); justify-content: center; text-align: center; cursor: default; }
#groupes.tableau .tache.creneau-libre .nom { color: var(--marine); font-weight: 600; }
#groupes.tableau .tache.creneau-libre.survol { outline: 2px dashed var(--marine); outline-offset: -2px; }

/* Le plan de la semaine (CDC M04_Repas, D-92 lot 3) : mêmes colonnes-jours que le kanban semaine (ci-dessus),
   deux cases (Midi, Soir) par jour au lieu d'une liste de cartes. */
.repas-actions { margin: 0 0 12px; }
#repas-grille.tableau { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
#repas-grille.tableau .colonne { scroll-snap-align: start; background: var(--separateur); border-radius: 12px; padding: 8px; min-width: 0; }
@media (max-width: 640px) { #repas-grille.tableau { grid-auto-columns: 42%; } }
.case-repas { display: block; width: 100%; text-align: left; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; min-height: 56px; }
.case-repas .creneau { display: block; font-size: 12px; color: var(--gris); }
.case-repas .plat { display: block; font-weight: 600; color: var(--marine); }
.case-repas.vide { color: var(--gris); border-style: dashed; }

/* Le budget du ménage (CDC M05_Budget/BUDGET_MVP.md, D-93) : une barre par catégorie, un total et le reste
   par semaine. */
.budget-categories { list-style: none; margin: 0 0 16px; padding: 0; background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); overflow: hidden; }
.budget-ligne { padding: 10px 14px; border-top: 1px solid var(--separateur); }
.budget-ligne:first-child { border-top: 0; }
.budget-ligne-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.budget-ligne-entete .nom { font-weight: 600; color: var(--marine); }
.budget-ligne-entete .chiffres { color: var(--gris); font-size: 13px; white-space: nowrap; }
.budget-barre { height: 8px; border-radius: 999px; background: var(--separateur); margin: 6px 0 4px; overflow: hidden; }
.budget-barre > span { display: block; height: 100%; width: 0; background: var(--marine); border-radius: 999px; transition: width .2s; }
.budget-barre.depasse > span { background: var(--retard); }
/* Par pas de 10 % plutôt qu'en style en ligne : la CSP du service bloque tout attribut style (voir app.js
   classeLargeur()). */
.budget-barre > span.p10 { width: 10%; }
.budget-barre > span.p20 { width: 20%; }
.budget-barre > span.p30 { width: 30%; }
.budget-barre > span.p40 { width: 40%; }
.budget-barre > span.p50 { width: 50%; }
.budget-barre > span.p60 { width: 60%; }
.budget-barre > span.p70 { width: 70%; }
.budget-barre > span.p80 { width: 80%; }
.budget-barre > span.p90 { width: 90%; }
.budget-barre > span.p100 { width: 100%; }
.budget-reste { font-size: 12px; color: var(--gris); margin: 0; }
.budget-reste.negatif { color: var(--retard); font-weight: 600; }
.budget-total { font-weight: 700; color: var(--marine); font-size: 16px; margin: 0 0 2px; }
.budget-semaine { color: var(--gris); margin: 0 0 16px; }
/* P3 (ECHEANCES_PAYEES_MVP) : « Par mois / Par semaine » au-dessus du budget, et les fois où une échéance a été faite. */
#budget-periodes { margin-bottom: 4px; }
.historique-echeance { list-style: none; padding: 0; margin: 0 0 12px; }
.historique-echeance li { padding: 4px 0; color: var(--texte); border-bottom: 1px solid var(--bordure); }
/* Les comptes entre membres (DEPENSES_PARTAGEES_MVP) : « C'est remboursé » garde sa largeur, la phrase passe à la ligne. */
#budget-comptes-dettes .tache { align-items: center; }
#budget-comptes-dettes .tache > button { flex: none; min-height: 44px; }
#enveloppes-budget-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
#enveloppes-budget-champs label { font-size: 13px; }
.case-repas .origine { display: block; font-size: 12px; color: var(--gris); }

/* Le tableau de bord du foyer (CDC M13_Tableau_de_bord/FOYER_MVP, D-93, TD-59) : quatre cartes cliquables,
   chacune menant à son onglet — même ombre que .taches/.carte, jamais un cadre vide (le texte le dit). */
#foyer-vue .jour-titre:first-child { margin-top: 4px; }
/* D-98 : la date au-dessus de la barre de saisie, puis « À trier » (des lignes de tâches ordinaires) avant les cartes. */
#foyer-salutation { margin-top: 4px; }
#foyer-a-trier { margin-bottom: 20px; }
#foyer-a-trier .jour-titre { font-size: 17px; }
#foyer-a-trier-tout { margin-top: 8px; }
#foyer-cartes { display: flex; flex-direction: column; gap: 12px; }
.foyer-carte { display: block; width: 100%; text-align: left; background: var(--blanc); border: 0; border-radius: 16px; box-shadow: var(--ombre); padding: 16px 18px; }
.foyer-carte .jour-titre { margin: 0 0 6px; font-size: 17px; }
.foyer-carte .aide { margin: 2px 0; overflow-wrap: anywhere; }
/* L'accueil parlé (CDC 00_Socle/INTERFACE_CONVIVIALE 1.1-1.2) : la phrase de Kolvaya, la date en petit dessous, puis
   les cartes qui ont quelque chose à dire et, tout en bas, une ligne discrète pour celles qui n'ont rien à dire. */
.foyer-accueil { font-family: var(--serif); color: var(--marine); font-size: 22px; line-height: 1.3; margin: 4px 0 2px; overflow-wrap: anywhere; }
.foyer-date { font-size: 13px; margin: 0 0 16px; }
.foyer-vides { margin: 16px 2px 0; font-size: 14px; }
.lien-discret { background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--marine); text-decoration: underline; cursor: pointer; min-height: 32px; }

/* Véhicules et entretiens (CDC M11_Vehicules/VEHICULES_MVP, D-93, TD-60) : une carte par véhicule, même
   présentation que Foyer (.foyer-carte réutilisée telle quelle). */
#vehicules-cartes { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#fiche-vehicule h3 { font-family: var(--serif); color: var(--marine); font-size: 16px; margin: 16px 0 6px; }

/* L'agenda familial (CDC M06_Agenda/AGENDA_MVP, D-93, TD-63) : un seul marquage, la mise en page seule
   change avec la largeur — une grille de 7 colonnes sur ordinateur, une liste jour par jour sur téléphone
   (la même idée que le défilement latéral du kanban, mais ici une colonne qui remplace les 7). */
.agenda-nav { margin-top: 0; }
.agenda-nav .jour-titre { flex: 1; text-align: center; margin: 0; font-size: 18px; }
#agenda-mois-precedent, #agenda-mois-suivant { border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; width: 36px; height: 36px; font-size: 18px; line-height: 1; flex: none; }
#agenda-mois-precedent:hover, #agenda-mois-suivant:hover { background: var(--pastille); }
.agenda-filtre { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.chip-membre { flex: none; max-width: 100%; overflow-wrap: anywhere; border: 1px solid var(--bordure); background: var(--blanc); border-radius: 999px; padding: 6px 12px; font-size: 0.8125rem; min-height: 36px; display: flex; align-items: center; gap: 6px; }
.chip-membre::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gris-clair); flex: none; }
/* La couleur d'un membre ne s'écrit plus en lettres (étape 4a : cinq teintes sur huit passaient sous AA sur un bouton enfoncé) :
   elle colore la pastille, le prénom reste en couleur de texte. --couleur-membre est posée par la classe membre-N. */
.chip-membre { color: var(--texte); }
.chip-membre[class*="membre-"]::before { background: var(--couleur-membre); }
.membre-0 { --couleur-membre: var(--membre-0); } .membre-1 { --couleur-membre: var(--membre-1); }
.membre-2 { --couleur-membre: var(--membre-2); } .membre-3 { --couleur-membre: var(--membre-3); }
.membre-4 { --couleur-membre: var(--membre-4); } .membre-5 { --couleur-membre: var(--membre-5); }
.membre-6 { --couleur-membre: var(--membre-6); } .membre-7 { --couleur-membre: var(--membre-7); }
/* Le rond du compte, entouré de la couleur de la personne de l'appareil. */
.avatar[class*="membre-"] { box-shadow: inset 0 0 0 3px var(--couleur-membre); }
.chip-membre[aria-pressed="true"] { background: var(--pastille); border-color: var(--marine); font-weight: 600; }
.agenda-jours-semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; color: var(--gris); margin-bottom: 4px; }
.agenda-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.agenda-case { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 56px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 10px; padding: 6px; text-align: left; }
.agenda-case.hors-mois { background: var(--separateur); color: var(--gris-clair); }
.agenda-case.aujourdhui { border-color: var(--marine); border-width: 2px; }
.agenda-case.choisi { background: var(--pastille); }
/* Nom du jour et aperçu : seulement dans la liste du téléphone (voir plus bas) ; la grille a l'en-tête des jours. */
.agenda-nom-jour, .agenda-apercu { display: none; }
.agenda-numero { font-weight: 600; font-size: 0.8125rem; }
.agenda-pastilles { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.agenda-pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-clair); flex: none; }
.agenda-pastille.neutre { background: var(--gris-clair); }
/* Sous le filtre d'un membre (E2) : ce qui est à tout le foyer reste là, mais estompé (lot 1, 10/10/2026). */
.agenda-pastille.estompee { opacity: .4; }
.agenda-pastille.membre-0 { background: var(--membre-0); } .agenda-pastille.membre-1 { background: var(--membre-1); }
.agenda-pastille.membre-2 { background: var(--membre-2); } .agenda-pastille.membre-3 { background: var(--membre-3); }
.agenda-pastille.membre-4 { background: var(--membre-4); } .agenda-pastille.membre-5 { background: var(--membre-5); }
.agenda-pastille.membre-6 { background: var(--membre-6); } .agenda-pastille.membre-7 { background: var(--membre-7); }
.agenda-reste { font-size: 11px; color: var(--gris); }
#agenda-jour-detail { margin-top: 16px; }
/* Les habitudes du jour (rythmes du foyer, D-100) : discrètes, au-dessus de ce qui est prévu ; les jours fériés marqués. */
#agenda-jour-pays { margin: 0 0 8px; }
.agenda-habitudes { margin: 0 0 10px; padding: 6px 12px; border-left: 3px solid var(--gris-clair); }
.agenda-habitudes h3 { font-size: 13px; font-weight: 600; color: var(--gris); margin: 0 0 4px; }
.agenda-habitudes ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.agenda-habitudes li { margin: 2px 0; overflow-wrap: anywhere; }
.agenda-case.ferie .agenda-numero { color: var(--marine); font-weight: 700; text-decoration: underline dotted; }
/* Sur téléphone (≤ 640px), la grille devient une liste jour par jour : une seule colonne, chaque case une
   ligne pleine largeur avec son numéro à gauche (CDC, critère 9) — mêmes données, CSS seul change. */
/* Lot 1 (Hélène, très grande taille, 320 px : « les lignes des jours sortent de l'écran », titre, heure et cloche coupés) : la
   colonne ne s'élargit plus au texte d'une ligne (minmax(0, 1fr) au lieu de 1fr, qui prenait la largeur du plus long aperçu) ;
   l'aperçu tient sur deux lignes au plus, les tailles suivent le texte (rem). */
@media (max-width: 640px) {
  .agenda-jours-semaine { display: none; }
  .agenda-grille { grid-template-columns: minmax(0, 1fr); }
  .agenda-case { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; min-width: 0; }
  .agenda-nom-jour { display: inline; flex: none; width: 3.2em; color: var(--gris); font-size: 0.8125rem; text-transform: capitalize; }
  .agenda-apercu { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; flex: 1; min-width: 0; overflow: hidden; overflow-wrap: anywhere; font-size: 0.875rem; }
  .agenda-pastilles { flex: none; }
  #agenda-grille > #agenda-jour-detail { margin: 0 0 8px; }
  .agenda-case.hors-mois { display: none; }
  .agenda-numero { min-width: 24px; }
}
/* Contacts (tests utilisateur du 07/10/2026) : la recherche prend la largeur, un nom très long reste dans sa fiche. */
#contacts-recherche { flex: 1; min-width: 0; }
#titre-edition-contact, #contacts-groupes .nom { overflow-wrap: anywhere; }
/* Véhicules (testeur du 07/10/2026) : un nom très long reste dans sa carte et dans sa fiche. */
#vehicules-cartes .jour-titre, #vehicules-cartes .aide, #fiche-vehicule-titre { overflow-wrap: anywhere; }

/* Courses v2 (COURSES_V2.md, A2) : le panneau d'ajout sous le champ — « Populaire » / « Récent », puis les résultats.
   Boutons de 44 px au moins ; les lignes du panneau sont des .sugg (jamais des .tache). */
/* Une <dialog> ouverte par show() : non modale, dans le flux de la page, sans le centrage ni la largeur du modèle. */
#courses-ajout { position: static; display: flex; flex-direction: column; width: auto; max-width: none; height: auto; border: 0; color: inherit; background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 4px 12px; margin: 0 0 16px;
  /* Testeur du 07/10/2026 : 1195 px de haut. Au plus la moitié de l'écran (clavier déduit) ; le champ au-dessus et la croix
     restent à l'écran, seule la liste des suggestions défile. */
  max-height: calc((100dvh - var(--clavier, 0px)) / 2); overflow: hidden; }
#courses-ajout:not([open]) { display: none; }
#courses-ajout .ajout-tete { flex: none; }
#courses-ajout .sugg-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ajout-tete { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--separateur); }
.ajout-onglets { display: flex; flex: 1; min-width: 0; gap: 4px; }
.ajout-onglets button { flex: 1; min-height: 48px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 0 8px; font-weight: 600; color: var(--gris); }
.ajout-onglets button[aria-selected="true"] { color: var(--marine); border-bottom-color: var(--marine); }
.ajout-titre { flex: 1; font-size: 13px; font-weight: 600; color: var(--gris); letter-spacing: 1.5px; text-transform: uppercase; padding: 0 4px; }
.ajout-fermer { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--gris); font-size: 28px; line-height: 1; padding: 0 0 3px; }
.ajout-fermer:hover { background: var(--pastille); color: var(--marine); }
.sugg-liste { list-style: none; margin: 0; padding: 0; }
.sugg { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--separateur); }
.sugg:first-child { border-top: 0; }
.sugg-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sugg-commande { display: flex; flex: none; align-items: center; gap: 2px; }
.sugg-plus, .sugg-moins, .sugg-rond { flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0 0 2px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; }
.sugg-plus { border: 2px solid var(--marine); background: var(--blanc); color: var(--marine); }
.sugg-plus.plein { background: var(--marine); color: var(--blanc); }
.sugg-plus:hover { background: var(--pastille); }
.sugg-plus.plein:hover { background: var(--marine-fonce); }
.sugg-moins { border: 2px solid var(--bordure); background: var(--blanc); color: var(--marine); }
.sugg-moins:hover { background: var(--pastille); }
.sugg-qte { min-width: 3ch; max-width: 9ch; text-align: center; font-weight: 600; color: var(--marine); overflow-wrap: anywhere; line-height: 1.2; }
.sugg-ajouter-texte { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 0; background: none; border: 0; text-align: left; font-weight: 600; color: var(--marine); }
.sugg-ajouter-texte .sugg-nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sugg-rond { background: var(--marine); color: var(--blanc); }
.sugg-vide { padding: 16px 0; text-align: center; color: var(--gris); font-size: 14px; list-style: none; }
/* La rangée « habituels » est remplacée par « Populaire » / « Récent » (la liste, refaite à part, retire son élément). */

/* Grand écran : le panneau reste ouvert à droite de la liste, comme chez Listonic ; le champ et son message gardent la
   largeur de la liste. */
@media (min-width: 1100px) {
  main:has(#courses-vue:not([hidden])) { max-width: 1040px; }
  main:has(#courses-vue:not([hidden])) :is(#form-ajout, #annonce-courses) { max-width: calc(100% - 392px); }
  #courses-vue { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; align-items: start; }
  #courses-vue > * { grid-column: 1; min-width: 0; }
  #courses-vue > #courses-ajout { grid-column: 2; grid-row: 1 / span 40; margin: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); }
  .ajout-fermer { display: none; }
}
/* ===== Courses v2 (COURSES_V2.md, lot A) : la liste, la fiche, le menu. Thème clair, couleurs de Kolvaya. =====
   --barre-bas : la hauteur de la barre de navigation fixe du bas sur téléphone (environ 70 px), posée par la
   branche qui l'apporte ; sans elle, 0. Rien d'important ne se range derrière : le total et le bandeau
   « supprimé · Annuler » restent au-dessus, et la fin de la liste garde sa marge. */
:root { --barre-bas: 0px; --clavier: 0px; }
.sr-seulement { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icone-rayon { display: inline-flex; flex: none; align-items: center; justify-content: center; line-height: 0; }
.icone-rayon svg { display: block; }

#courses-vue { padding-bottom: calc(var(--barre-bas) + 72px); }
.courses-entete { margin: 4px 0 12px; }
.courses-titre-ligne { display: flex; align-items: center; gap: 4px; }
.courses-nom { flex: 1; min-width: 0; margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--marine); overflow-wrap: anywhere; }
.courses-icone { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--marine); border-radius: 50%; font-size: 28px; line-height: 1; padding: 0; }
.courses-icone:hover { background: var(--pastille); }
.courses-menu-ancre { position: relative; flex: none; }
.courses-menu { position: absolute; left: auto; right: 0; top: 100%; margin: 0; height: auto; border: 0; color: inherit; z-index: 30; width: min(290px, calc(100vw - 32px)); background: var(--blanc); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 35, 102, .22); padding: 6px; }
.courses-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 12px 14px; min-height: 44px; font-size: 16px; color: var(--texte); }
.courses-menu button:hover:not(:disabled), .courses-menu button:focus-visible { background: var(--pastille); }
.courses-menu button:disabled { color: var(--gris-clair); cursor: default; }
.courses-menu button[aria-checked="true"] { font-weight: 600; color: var(--marine); }
.courses-menu button[aria-checked="true"]::after { content: '\2713'; float: right; color: var(--vert); }
.courses-menu hr { border: 0; border-top: 1px solid var(--separateur); margin: 4px 6px; }
.courses-menu-titre { margin: 6px 14px 2px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gris); }
#courses-recherche { width: 100%; margin: 8px 0 0; }
.courses-barre { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.courses-barre progress { flex: 1; height: 8px; border: 0; border-radius: 999px; background: var(--pastille); overflow: hidden; appearance: none; -webkit-appearance: none; }
.courses-barre progress::-webkit-progress-bar { background: var(--pastille); border-radius: 999px; }
.courses-barre progress::-webkit-progress-value { background: var(--vert); border-radius: 999px; transition: width .2s; }
.courses-barre progress::-moz-progress-bar { background: var(--vert); border-radius: 999px; }
.courses-compte { flex: none; min-width: 3ch; text-align: right; font-size: 14px; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }

.courses-carte { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); overflow: hidden; margin: 0 0 12px; padding: 0; list-style: none; }
.courses-carte:empty { display: none; }
.courses-groupe + .courses-groupe { border-top: 1px solid var(--bordure); }
.courses-groupe + .courses-groupe .courses-ligne:first-child, .courses-carte > .courses-ligne:first-child { border-top: 0; }
.courses-liste { list-style: none; margin: 0; padding: 0; }
.courses-ligne { align-items: center; gap: 0; padding: 0 12px 0 4px; min-height: 56px; }
.courses-ligne:first-child { border-top: 0; }
.courses-ligne .coche { width: 44px; height: 44px; margin: 0 8px 0 0; border: 0; background: none; border-radius: 50%; flex: none; }
.courses-ligne .coche::before { content: ''; position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--gris-clair); background: var(--blanc); transition: background .15s, border-color .15s; }
.courses-ligne .coche:hover::before { border-color: var(--vert); }
.courses-ligne.fait .coche::before { background: var(--vert); border-color: var(--vert); }
.courses-ligne.fait .coche::after { left: 17px; top: 12px; width: 7px; height: 13px; }
.courses-ligne:not(.fait) .coche::after { content: none; }
.courses-ligne .corps { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 56px; padding: 8px 0 8px 6px; font-size: 16px; color: var(--texte); }
.texte-ligne { flex: 1; min-width: 0; display: block; }
.titre-ligne { display: block; overflow-wrap: anywhere; }
.courses-ligne .corps .nom { display: inline; font-weight: 600; }
.courses-ligne .qte { display: inline; margin-left: 6px; padding: 0; background: none; border-radius: 0; font-size: 15px; font-weight: 400; color: var(--gris); }
.courses-ligne .note { display: block; margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--gris); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.courses-ligne.fait .corps .nom { color: var(--gris-clair); text-decoration: none; font-weight: 600; }
.courses-ligne.fait .qte, .courses-ligne.fait .note { color: var(--gris-clair); }
.courses-ligne.fait .icone-rayon { opacity: .45; }
.courses-ligne.attente .corps .nom::after { content: none; }
.signe-attente { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 3px var(--rose-pale); }
.prix-ligne { flex: none; font-size: 15px; font-weight: 600; color: var(--marine); white-space: nowrap; font-variant-numeric: tabular-nums; }
.courses-ligne.fait .courses-ligne.attente .corps .nom::after { content: none; }
.signe-attente { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 3px var(--rose-pale); }
/* Un prix est un texte : le gris des textes secondaires, plus le gris clair des dessins (2,6:1, lot 1). */
.prix-ligne { color: var(--gris); }
#courses-pris:not(:empty) { margin-top: 16px; }
.courses-total { position: sticky; bottom: calc(var(--barre-bas) + var(--clavier) + 8px); z-index: 5; margin: 12px 0 0; padding: 12px 16px; background: var(--marine); color: var(--blanc); border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 35, 102, .25); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
#courses-vide { padding: 40px 0; }
#courses-vide p { margin: 0 0 16px; }
#courses-aucun { padding: 24px 0; overflow-wrap: anywhere; }
.courses-bandeau { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barre-bas) + var(--clavier) + 76px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 4px; width: min(480px, calc(100vw - 32px)); margin: 0; padding: 4px 4px 4px 18px; background: var(--texte); color: var(--blanc); border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.courses-bandeau span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.courses-bandeau button { flex: none; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--rose); font-weight: 700; border-radius: 8px; }
.courses-bandeau button:hover { background: rgba(255, 255, 255, .12); }

/* La fiche d'un article : en bas de l'écran sur téléphone, à droite sur grand écran. */
.fiche-article { width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; margin: auto auto 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; overflow-y: auto; box-sizing: border-box; }
.fiche-article::backdrop { background: rgba(0, 24, 68, .4); }
.fiche-haut { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.fiche-nom { flex: 1; min-width: 0; border: 0; border-bottom: 2px solid var(--separateur); border-radius: 0; padding: 6px 2px; font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--marine); }
.fiche-nom:focus { outline: 0; border-bottom-color: var(--marine); }
.fiche-rayon { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 4px 0 12px; padding: 8px 12px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 12px; text-align: left; }
.fiche-rayon:hover { background: var(--pastille); }
.fiche-rayon-nom { flex: 1; font-weight: 600; }
.fiche-chevron { color: var(--gris); font-size: 24px; line-height: 1; }
.fiche-ligne { display: flex; gap: 12px; align-items: flex-start; }
.fiche-champ { flex: 1; min-width: 0; display: block; font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 12px; }
.fiche-etiquette { display: block; font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 4px; }
.fiche-champ input { display: block; width: 100%; margin-top: 4px; }
.fiche-pas { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.fiche-pas input { margin: 0; text-align: center; min-width: 0; flex: 1; }
.fiche-pas button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bordure); background: var(--blanc); color: var(--marine); font-size: 22px; line-height: 1; padding: 0; }
.fiche-pas button:hover { background: var(--pastille); }
.fiche-unites { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.fiche-unites .pastille[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); font-weight: 600; }
.fiche-total { margin: 0; min-height: 44px; display: flex; align-items: center; font-size: 18px; font-weight: 700; color: var(--marine); font-variant-numeric: tabular-nums; }
#fiche-prix-aide { margin: -6px 0 12px; }
#form-edition-article-courses input[aria-invalid="true"] { outline: 2px solid var(--retard); }
.fiche-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fiche-tuile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 8px 4px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--blanc); font-size: 13px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.fiche-tuile:hover { background: var(--pastille); }
.fiche-tuile[aria-pressed="true"] { border: 2px solid var(--marine); background: var(--pastille); font-weight: 600; }
@media (min-width: 900px) {
  .fiche-article { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; border-radius: 16px 0 0 16px; }
}
@media (max-width: 380px) { .fiche-grille { grid-template-columns: repeat(2, 1fr); } .courses-nom { font-size: 24px; } }

/* L'impression : seulement les articles à acheter, par rayon, sans boutons ni barres. À l'écran, rien. */
.courses-impression { display: none; }
@media print {
  body > * { display: none !important; }
  body > #appli { display: block !important; }
  #appli > * { display: none !important; }
  #appli > #courses-vue { display: block !important; padding: 0; }
  #courses-vue > * { display: none !important; }
  #courses-vue > #courses-impression { display: block !important; }
  body { background: #fff; padding: 0; }
  main { max-width: none; padding: 0; }
  .courses-impression h3 { font-family: var(--serif); font-size: 16pt; margin: 14pt 0 4pt; color: #000; break-after: avoid; }
  .courses-impression ul { list-style: none; margin: 0; padding: 0; }
  .courses-impression li { display: flex; align-items: baseline; gap: 6pt; padding: 3pt 0; font-size: 12pt; color: #000; break-inside: avoid; overflow-wrap: anywhere; }
  .courses-impression .case-imprimee { flex: none; width: 10pt; height: 10pt; border: 1pt solid #000; border-radius: 2pt; align-self: center; }
  .courses-impression .nom { font-weight: 700; }
  .courses-impression .qte, .courses-impression .note { color: #444; }
}
/* Le total affiché : le bandeau se pose au-dessus de lui, jamais dessus. */
.courses-total:not([hidden]) ~ .courses-bandeau { bottom: calc(var(--barre-bas) + var(--clavier) + 140px + env(safe-area-inset-bottom, 0px)); }
/* Plusieurs agendas Google (agenda-multi, 07/10/2026) : la couleur de chaque agenda, posée en JS (CSSOM). */
.liste-agendas { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.liste-agendas .case { align-items: center; }
.pastille-agenda { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gris-clair); flex: none; margin-right: 4px; vertical-align: baseline; }
#voir-agenda-quand { font-weight: 600; }

/* ===== Courses façon Listonic (demande de Fred du 07/10/2026) : la composition, les proportions et les gestes de
   Listonic, aux couleurs de Kolvaya, en DM Sans partout dans l'onglet (la marque garde sa police dans l'en-tête).
   Contrastes AA : texte gris au plus clair var(--gris) sur blanc (4,8:1), contour du rond à cocher au moins 3:1. ===== */
#courses-vue, #edition-article-courses, #coller-courses { font-family: var(--sans); }
#coller-courses h2 { font-family: var(--sans); font-weight: 600; color: var(--texte); }
.courses-ligne[data-rayon="fruits_legumes"], .fiche-tuile[data-rayon="fruits_legumes"] { --disque: #FDE9E7; }
.courses-ligne[data-rayon="boulangerie"], .fiche-tuile[data-rayon="boulangerie"] { --disque: #F9F1E9; }
.courses-ligne[data-rayon="viande"], .fiche-tuile[data-rayon="viande"] { --disque: #F6E7EB; }
.courses-ligne[data-rayon="poisson"], .fiche-tuile[data-rayon="poisson"] { --disque: #E6F2F8; }
.courses-ligne[data-rayon="laitiers"], .fiche-tuile[data-rayon="laitiers"] { --disque: #FEF8E6; }
.courses-ligne[data-rayon="vegetal"], .fiche-tuile[data-rayon="vegetal"] { --disque: #EFF6E7; }
.courses-ligne[data-rayon="plats_prepares"], .fiche-tuile[data-rayon="plats_prepares"] { --disque: #FCEEE9; }
.courses-ligne[data-rayon="produits_secs"], .fiche-tuile[data-rayon="produits_secs"] { --disque: #F5F6E6; }
.courses-ligne[data-rayon="conserves"], .fiche-tuile[data-rayon="conserves"] { --disque: #ECEFF1; }
.courses-ligne[data-rayon="epices"], .fiche-tuile[data-rayon="epices"] { --disque: #F8E4E6; }
.courses-ligne[data-rayon="patisserie"], .fiche-tuile[data-rayon="patisserie"] { --disque: #FCF1F3; }
.courses-ligne[data-rayon="biscuits"], .fiche-tuile[data-rayon="biscuits"] { --disque: #FBEAF3; }
.courses-ligne[data-rayon="cafe_the"], .fiche-tuile[data-rayon="cafe_the"] { --disque: #EEEAE7; }
.courses-ligne[data-rayon="boissons"], .fiche-tuile[data-rayon="boissons"] { --disque: #EBEFFA; }
.courses-ligne[data-rayon="alcools"], .fiche-tuile[data-rayon="alcools"] { --disque: #F1E6EF; }
.courses-ligne[data-rayon="surgeles"], .fiche-tuile[data-rayon="surgeles"] { --disque: #EBF8FC; }
.courses-ligne[data-rayon="bebe"], .fiche-tuile[data-rayon="bebe"] { --disque: #FEF4F1; }
.courses-ligne[data-rayon="soins"], .fiche-tuile[data-rayon="soins"] { --disque: #F2EEFA; }
.courses-ligne[data-rayon="sante"], .fiche-tuile[data-rayon="sante"] { --disque: #E4F5EB; }
.courses-ligne[data-rayon="nettoyage"], .fiche-tuile[data-rayon="nettoyage"] { --disque: #E8F8F5; }
.courses-ligne[data-rayon="maison_jardin"], .fiche-tuile[data-rayon="maison_jardin"] { --disque: #E6EFEC; }
.courses-ligne[data-rayon="animaux"], .fiche-tuile[data-rayon="animaux"] { --disque: #F3EEE9; }
.courses-ligne[data-rayon="papeterie"], .fiche-tuile[data-rayon="papeterie"] { --disque: #E3F5F9; }
.courses-ligne[data-rayon="electronique"], .fiche-tuile[data-rayon="electronique"] { --disque: #E8EAF6; }
.courses-ligne[data-rayon="vetements"], .fiche-tuile[data-rayon="vetements"] { --disque: #F6ECF9; }
.courses-ligne[data-rayon="autres"], .fiche-tuile[data-rayon="autres"] { --disque: #F0F1F4; }

/* La carte de la liste : l'en-tête (titre, loupe, ⋮, progression) en est le haut, les lignes le bas. */
.courses-entete { margin: 0; padding: 20px 20px 12px 24px; background: var(--blanc); border-radius: 16px 16px 0 0; }
#courses-vue:has(#courses-groupes:empty) .courses-entete { border-radius: 16px; box-shadow: 0 1px 3px rgba(70, 48, 20, .06); }
.courses-titre-ligne { gap: 2px; }
.courses-nom { font-family: var(--sans); font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.5px; color: var(--texte); }
.courses-icone { color: var(--gris); }
.courses-barre { margin-top: 14px; gap: 14px; }
.courses-barre progress { height: 8px; background: var(--separateur); }
.courses-barre progress::-webkit-progress-bar { background: var(--separateur); }
.courses-compte { color: var(--gris); font-weight: 600; }
.courses-carte { border-radius: 16px; box-shadow: 0 1px 3px rgba(70, 48, 20, .06); }
#courses-groupes { border-radius: 0 0 16px 16px; padding: 0 8px 12px; margin-bottom: 16px; box-shadow: 0 3px 4px -2px rgba(70, 48, 20, .07); }
#courses-pris { padding: 8px; }
#courses-pris:not(:empty) { margin-top: 0; }
.courses-groupe + .courses-groupe { border-top: 0; }

/* Les lignes : hautes, aérées, sans trait ; le rond à gauche, le nom en gros, la quantité en gris, l'icône du rayon
   sur son disque pâle à droite. Au survol, un fond très pâle ; la ligne dont la fiche est ouverte, un fin contour. */
.courses-ligne { min-height: 70px; padding: 0 12px 0 4px; border-top: 0; border-radius: 12px; transition: background-color .12s; }
.courses-ligne:hover { background: var(--survol); }
.courses-ligne.choisi { box-shadow: inset 0 0 0 1.5px #3D5FA8; background: var(--blanc); }
.courses-ligne .coche { margin: 0 8px 0 0; }
.courses-ligne .coche::before { left: 11px; top: 11px; width: 22px; height: 22px; border: 2px solid var(--contour); }
.courses-ligne.fait .coche::after { left: 18.5px; top: 14.5px; width: 6px; height: 11px; }
.courses-ligne .corps { min-height: 70px; gap: 14px; padding: 10px 0 10px 4px; }
.courses-ligne .corps .nom { font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--texte); }
.courses-ligne .qte { margin-left: 16px; font-size: 18px; color: var(--gris); }
.courses-ligne .note { font-size: 14px; margin-top: 2px; }
.courses-ligne .icone-rayon { width: 44px; height: 44px; border-radius: 50%; background: var(--disque, var(--separateur)); }
.courses-ligne .icone-rayon svg { width: 28px; height: 28px; }
/* Les articles pris : rond vert plein et coche blanche, nom en gris moyen non barré, icône grisée sur disque blanc. */
.courses-ligne.fait .corps .nom { color: var(--gris); font-weight: 600; }
.courses-ligne.fait .qte, .courses-ligne.fait .note { color: var(--gris); }
.courses-ligne.fait .icone-rayon { opacity: 1; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--bordure); }
.courses-ligne.fait .icone-rayon svg { filter: grayscale(1); opacity: .6; }
.courses-total { background: var(--texte); border-radius: 12px; }

@media (max-width: 760px) {
  :root { --barre-bas: 66px; }
  .courses-entete { padding: 16px 12px 10px 18px; }
  .courses-nom { font-size: 30px; }
  #courses-groupes { padding: 0 4px 8px; }
  #courses-pris { padding: 4px; }
  .courses-ligne, .courses-ligne .corps { min-height: 64px; }
  .courses-ligne { padding-right: 8px; }
  .courses-ligne .corps .nom { font-size: 18px; }
  .courses-ligne .qte { margin-left: 12px; font-size: 16px; }
  .courses-ligne .icone-rayon { width: 40px; height: 40px; }
  .courses-ligne .icone-rayon svg { width: 25px; height: 25px; }
}

/* Le panneau « Ajouter des produits » : fond bleu très pâle, une carte blanche avec « Populaire » / « Récent »,
   puis une liste compacte. Un petit « + » à gauche (gris : absent ; bleu plein : déjà sur la liste), la quantité et
   un petit « − » rouge à droite. Le dessin est petit, la cible ne l'est pas : le « + » couvre toute la ligne
   (::after, 44 px de haut), le « − » déborde de son dessin jusqu'à 44 × 44 px. */
#courses-ajout { background: var(--panneau); border-radius: 16px; box-shadow: none; padding: 16px; }
#courses-ajout .ajout-tete { background: var(--blanc); border-radius: 12px 12px 0 0; padding: 0 4px 0 16px; border-bottom: 1px solid var(--separateur); }
/* E4 (tests simulés du 09/10/2026, Monique) : en voulant fermer, le doigt touchait le « − » de la première ligne, juste sous la
   croix. 16 px sous l'en-tête : au moins 8 points entre la croix et tout bouton du panneau, même quand l'en-tête est réduit
   à « Suggestions ». */
#courses-ajout .sugg-liste { background: var(--blanc); border-radius: 0 0 12px 12px; padding: 16px 6px 8px; }
.ajout-onglets { flex: 1; gap: 24px; justify-content: flex-start; }
.ajout-onglets button { flex: none; min-height: 50px; padding: 0 2px; border-bottom-width: 2px; font-size: 16px; font-weight: 600; color: var(--gris); }
.ajout-onglets button:hover { color: var(--texte); }
.ajout-onglets button[aria-selected="true"] { color: var(--marine); border-bottom-color: var(--marine); }
.ajout-titre { font-size: 13px; letter-spacing: 1.2px; padding: 0; }
.ajout-fermer { color: var(--gris); }
#courses-ajout { outline: none; }
.sugg { position: relative; gap: 12px; min-height: 44px; padding: 0 10px; border-top: 0; border-radius: 8px; }
.sugg:hover { background: var(--survol); }
.sugg:has(.sugg-plus:focus-visible) { outline: 2px solid var(--marine); outline-offset: -2px; }
.sugg-nom { order: 0; font-size: 17px; line-height: 1.3; color: var(--texte); }
.sugg-commande { display: contents; }
/* Chaque bouton mesure 44 × 44 px (cible tactile) ; seul son dessin (::before) fait 18 px, et des marges négatives
   gardent la ligne compacte. */
.sugg-plus, .sugg-moins { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 0; color: transparent; }
.sugg-plus { order: -1; margin: 0 -13px; }
.sugg-plus::before, .sugg-moins::before, .sugg-rond { content: ''; display: block; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; }
.sugg-plus::before, .sugg-rond {
  flex: none; font-size: 0; color: transparent;
  background: linear-gradient(#fff, #fff) center / 8px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 8px no-repeat, var(--contour);
}
.sugg-plus:hover, .sugg-plus.plein, .sugg-plus.plein:hover, .sugg-moins:hover { background: none; }
.sugg-plus:hover::before { background-color: var(--gris); }
.sugg-plus.plein::before, .sugg-rond { background: linear-gradient(#fff, #fff) center / 8px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 8px no-repeat, var(--marine); }
.sugg-plus.plein:hover::before { background-color: var(--marine-fonce); }
.sugg-plus:focus-visible { outline: 0; }
.sugg-plus::after { content: ''; position: absolute; inset: 0; border-radius: 8px; }
/* Le « − » et le « × » restent au-dessus de la zone élargie du « + » : sinon les toucher ajoutait le produit (testeur du
   lot B, 07/10/2026). */
.sugg-moins, .sugg-retirer { position: relative; z-index: 1; }
.sugg-qte { order: 1; min-width: 0; font-size: 16px; font-weight: 400; color: var(--gris); }
/* 8 points au moins entre le « − » et le « × » « Ne plus proposer » qui le suit (E4) : la marge droite ne mange plus l'écart. */
.sugg-moins { order: 2; position: relative; z-index: 1; margin: 0 -4px 0 -6px; }
.sugg-moins::before { background: linear-gradient(var(--retard), var(--retard)) center / 8px 2px no-repeat, #FBE9E7; }
.sugg-moins:hover::before { background-color: #F6D3CF; }
.sugg-ajouter-texte { min-height: 44px; gap: 12px; padding: 0 10px; font-size: 17px; color: var(--marine); border-radius: 8px; }
.sugg-ajouter-texte:hover { background: var(--survol); }
.sugg-vide { padding: 20px 12px; }
@media (min-width: 1100px) {
  #courses-ajout { padding: 24px 28px 28px; }
  #courses-ajout::before { content: 'Ajouter des produits'; display: block; flex: none; margin: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--texte); }
}

/* La fiche d'un article : des champs libellés sur fond gris pâle arrondi — Nom, Catégorie (icône, nom en
   majuscules, ›), Quantité et Unité côte à côte, Prix et Total côte à côte, Note —, puis le grand bouton vert
   « Terminé ». En bas de l'écran sur téléphone ; panneau de droite, à côté de la liste, sur grand écran. */
.fiche-article { padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); color: var(--texte); }
#form-edition-article-courses { --champ: var(--fond); }
.fiche-haut { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 0; margin: 0; }
.fiche-haut > .courses-icone { grid-column: 2; grid-row: 1; color: var(--gris); font-size: 30px; }
.fiche-haut::before, #fiche-principal::before { display: block; font-size: 13px; font-weight: 600; color: var(--gris); margin: 0 0 6px; }
.fiche-haut::before { content: 'Nom'; grid-column: 1; grid-row: 2; margin-top: 2px; }
#fiche-principal::before { content: 'Catégorie'; }
.fiche-nom { grid-column: 1 / -1; grid-row: 3; margin: 0 0 16px; min-height: 52px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--champ); font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--texte); }
.fiche-nom:focus { outline: 2px solid var(--marine); outline-offset: -2px; }
.fiche-rayon { min-height: 56px; margin: 0 0 16px; padding: 6px 12px 6px 10px; gap: 12px; border: 0; border-radius: 12px; background: var(--champ); }
.fiche-rayon:hover { background: var(--pastille); }
.fiche-rayon-nom { font-size: 15px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--texte); }
.fiche-chevron { font-size: 28px; color: var(--gris); }
.fiche-ligne { gap: 12px; }
.fiche-champ, #form-edition-article-courses > #fiche-principal > label { margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--gris); }
.fiche-etiquette { margin-bottom: 6px; }
#form-edition-article-courses input:not(.fiche-nom), #form-edition-article-courses textarea { margin-top: 6px; min-height: 52px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--champ); font-size: 17px; }
#form-edition-article-courses textarea { min-height: 88px; resize: vertical; }
#form-edition-article-courses input:focus, #form-edition-article-courses textarea:focus { outline: 2px solid var(--marine); outline-offset: -2px; }
.fiche-pas { gap: 0; margin-top: 6px; padding: 4px; min-height: 52px; border-radius: 12px; background: var(--champ); }
#form-edition-article-courses .fiche-pas input { margin: 0; min-height: 44px; padding: 0 4px; background: transparent; font-weight: 600; }
.fiche-pas button { border: 0; background: transparent; color: var(--marine); font-size: 24px; }
.fiche-pas button:hover { background: var(--pastille); }
.fiche-unites { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin: -6px 0 16px; padding: 2px 0; }
.fiche-unites .pastille { flex: none; min-height: 34px; padding: 6px 12px; font-size: 14px; border-color: var(--bordure); }
.fiche-total { margin-top: 6px; min-height: 52px; padding: 0 14px; border-radius: 12px; background: var(--champ); font-size: 17px; font-weight: 600; color: var(--texte); }
#fiche-prix-aide { margin: -8px 0 14px; }
#form-edition-article-courses .actions { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 4px; }
#form-edition-article-courses .actions .espace { display: none; }
#form-edition-article-courses button[value="termine"] { order: -1; min-height: 54px; border-radius: 14px; background: var(--vert); font-size: 17px; }
#form-edition-article-courses button[value="termine"]:hover { background: #33685B; }
#form-edition-article-courses button[value="supprimer"] { min-height: 44px; }
.fiche-tuile { border: 0; background: var(--champ); }
.fiche-tuile .icone-rayon { width: 44px; height: 44px; border-radius: 50%; background: var(--disque, var(--separateur)); }
.fiche-tuile[aria-pressed="true"] { border: 0; box-shadow: inset 0 0 0 2px #3D5FA8; background: var(--blanc); }
@media (min-width: 1100px) {
  /* Grand écran : la fiche n'est plus une fenêtre par-dessus (app.js l'ouvre par show()) mais le panneau de droite. */
  #edition-article-courses:not(:modal) {
    position: fixed; z-index: 30; inset: 124px calc(16px + max(0px, (100vw - 1512px) / 2)) 16px auto; width: 380px; height: auto; max-height: none;
    margin: 0; padding: 16px 24px 24px; border-radius: 16px; box-shadow: 0 1px 3px rgba(70, 48, 20, .08), 0 8px 24px rgba(70, 48, 20, .06);
  }
}

/* Grand écran (≥ 1100 px), comme Listonic : trois colonnes sous l'en-tête — la liste, le panneau « Ajouter des
   produits » (son champ compris), et la fiche de l'article choisi quand elle est ouverte. Le panneau et la fiche
   restent en place pendant que la liste défile ; la liste prend la largeur qui reste. --droite : le bord droit de
   <main> (marge du corps + centrage), --haut : sous l'en-tête et la barre des onglets. */
@media (min-width: 1100px) {
  #appli:has(> #courses-vue:not([hidden])) {
    --droite: calc(16px + max(0px, (100vw - 1512px) / 2)); --haut: 124px; --col-ajout: 400px; --col-fiche: 0px;
    max-width: 1480px; padding-right: calc(var(--col-ajout) + var(--col-fiche) + 24px);
  }
  body:has(#edition-article-courses[open]:not(:modal)) #appli:has(> #courses-vue:not([hidden])) { --col-fiche: 404px; }
  #appli:has(> #courses-vue:not([hidden])) > .entete, #appli:has(> #courses-vue:not([hidden])) > .listes { margin-right: calc(-1 * (var(--col-ajout) + var(--col-fiche) + 24px)); }
  #appli:has(> #courses-vue:not([hidden])) :is(#form-ajout, #annonce-courses) { max-width: none; }
  #courses-vue { display: block; }
  #courses-vue > #courses-ajout {
    position: fixed; z-index: 10; top: var(--haut); bottom: 16px; left: auto; right: calc(var(--droite) + var(--col-fiche)); width: var(--col-ajout);
    max-height: none; margin: 0; padding: 24px 28px 28px;
  }
  #courses-ajout::before { margin-bottom: 84px; }
  #courses-ajout .sugg-liste { flex: 0 1 auto; }
  #appli:has(> #courses-vue:not([hidden])) #form-ajout {
    position: fixed; z-index: 11; top: calc(var(--haut) + 65px); right: calc(var(--droite) + var(--col-fiche) + 28px); width: calc(var(--col-ajout) - 56px);
    margin: 0; padding: 4px 4px 4px 6px; border-radius: 12px; box-shadow: 0 1px 2px rgba(70, 48, 20, .06);
  }
  /* Le panneau des courses sur grand écran garde sa barre d'une ligne (sa place est réservée au-dessus de la liste). */
  #appli:has(> #courses-vue:not([hidden])) #form-ajout .ligne-ajout { flex-wrap: nowrap; }
  #appli:has(> #courses-vue:not([hidden])) #form-ajout :is(.info-ajout, #barre-exemples-courses) { display: none; }
  #appli:has(> #courses-vue:not([hidden])) #form-ajout [name="titre"] { flex: 1; min-height: 44px; height: 44px; font-size: 17px; }
  #appli:has(> #courses-vue:not([hidden])) #form-ajout .principal { min-height: 40px; padding: 8px 14px; border-radius: 9px; }
}

/* Téléphone : le champ d'ajout en haut de la liste ; touché, le panneau s'ouvre juste dessous, à la moitié de l'écran
   au plus (défaut 3 du testeur du 07/10/2026, vérifié par le scénario) : le champ et la croix restent visibles. */
@media (max-width: 760px) {
  /* Le panneau ouvert se place au-dessus de la carte de la liste, jamais entre son titre et ses lignes (vu à
     l'intégration du 07/10/2026). */
  #courses-vue { display: flex; flex-direction: column; }
  #courses-vue > #courses-ajout { order: -1; }
  #appli:has(> #courses-vue:not([hidden])) #form-ajout { padding: 6px 6px 6px 8px; border-radius: 14px; margin-bottom: 12px; }
  #appli:has(> #courses-vue:not([hidden])) #form-ajout .principal { min-height: 44px; padding: 8px 16px; }
  #courses-ajout { padding: 12px; }
  #courses-ajout .sugg-liste { flex: 0 1 auto; }
}

/* Courses v2, lot B « listes » (COURSES_V2.md) : « Vos listes de courses », la corbeille des listes, la fenêtre
   « Partager », le lien « ‹ Mes listes ». Même langage que la liste : DM Sans, cartes blanches aérées, barre verte. */
#listes-courses-vue, #dialogue-liste, #dialogue-partage { font-family: var(--sans); }
#listes-courses-vue { padding-bottom: calc(var(--barre-bas) + 72px); }
.listes-entete { padding: 8px 4px 16px; }
.listes-entete .courses-nom { font-family: var(--sans); font-size: 34px; font-weight: 600; letter-spacing: -.5px; color: var(--texte); }
.listes-cartes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.carte-liste { display: flex; align-items: flex-start; gap: 0; background: var(--blanc); border-radius: 16px; box-shadow: 0 1px 3px rgba(70, 48, 20, .06); padding: 4px 4px 4px 0; }
.carte-liste-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; background: none; border: 0; border-radius: 14px; padding: 16px 8px 16px 20px; min-height: 44px; font: inherit; color: var(--texte); }
.carte-liste-corps:hover { background: var(--survol); }
.carte-liste-ligne { display: flex; align-items: baseline; gap: 12px; }
.carte-liste-nom { flex: 1; min-width: 0; font-size: 21px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.carte-liste-compte { flex: none; font-size: 15px; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.carte-liste progress { width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--separateur); overflow: hidden; appearance: none; -webkit-appearance: none; }
.carte-liste progress::-webkit-progress-bar { background: var(--separateur); border-radius: 999px; }
.carte-liste progress::-webkit-progress-value { background: var(--vert); border-radius: 999px; }
.carte-liste progress::-moz-progress-bar { background: var(--vert); border-radius: 999px; }
.carte-liste .courses-menu-ancre { margin: 8px 4px 0 0; }
.avatars-liste { display: flex; align-items: center; }
.pastille-membre { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pastille); color: var(--blanc); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 2px var(--blanc); }
.avatars-liste .pastille-membre + .pastille-membre { margin-left: -8px; }
.pastille-membre.membre-0 { background: var(--membre-0); } .pastille-membre.membre-1 { background: var(--membre-1); }
.pastille-membre.membre-2 { background: var(--membre-2); } .pastille-membre.membre-3 { background: var(--membre-3); }
.pastille-membre.membre-4 { background: var(--membre-4); } .pastille-membre.membre-5 { background: var(--membre-5); }
.pastille-membre.membre-6 { background: var(--membre-6); } .pastille-membre.membre-7 { background: var(--membre-7); }
.pastille-membre.neutre { background: var(--gris-clair); }
.pastille-membre.reste { background: var(--pastille); color: var(--marine); }
.liste-creer { display: block; width: 100%; margin-top: 16px; min-height: 52px; border-radius: 14px; background: var(--vert); font-size: 17px; }
.liste-creer:hover { background: #33685B; }
.listes-corbeille { margin-top: 24px; }
.listes-corbeille summary { min-height: 44px; display: flex; align-items: center; letter-spacing: .8px; }
.carte-corbeille { display: flex; align-items: center; gap: 12px; background: var(--blanc); border-radius: 16px; box-shadow: 0 1px 3px rgba(70, 48, 20, .06); padding: 12px 8px 12px 20px; }
.carte-corbeille-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carte-corbeille-nom { font-size: 18px; font-weight: 600; color: var(--gris); overflow-wrap: anywhere; }
.carte-corbeille-date { font-size: 13px; color: var(--gris); }
.courses-retour { display: block; border: 0; background: none; color: var(--marine); font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 8px 0 0; margin: -8px 0 0 -4px; border-radius: 10px; }
.courses-retour:hover { color: var(--marine-fonce); text-decoration: underline; }
#dialogue-liste h2, #dialogue-partage h2 { font-family: var(--sans); font-weight: 600; color: var(--texte); font-size: 22px; margin: 0; overflow-wrap: anywhere; }
#dialogue-liste h2 { margin-bottom: 16px; }
.partage-haut { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.partage-haut h2 { flex: 1; min-width: 0; }
.partage-personnes { list-style: none; margin: 0 0 8px; padding: 0; }
.partage-personne { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--separateur); }
.partage-personne:first-child { border-top: 0; }
.partage-personne .pastille-membre { width: 40px; height: 40px; font-size: 15px; box-shadow: none; }
.partage-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.partage-nom { font-weight: 600; overflow-wrap: anywhere; }
.partage-role { font-size: 13px; color: var(--gris); }
.partage-inviter { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.partage-inviter label { flex: 1; min-width: 0; margin: 0; }
.partage-inviter .principal { flex: none; }
#partage-message { margin: 8px 0 0; }
#partage-message.erreur { color: var(--retard); font-size: 14px; }
@media (max-width: 760px) {
  .listes-entete .courses-nom { font-size: 30px; }
  .carte-liste-corps { padding-left: 16px; }
}
/* « Valider » est le premier bouton du formulaire (Entrée dans le champ le choisit), mais s'affiche en dernier. */
#form-liste .actions #liste-valider { order: 2; }
#form-liste .actions .discret { order: 1; }
/* ===== Courses v2, lot B : gestes et confort en magasin ===== */
/* La ligne est enveloppée dans .ligne-glisse (ce qui glisse sous le doigt) ; son fond coloré est dessous. La marge
   intérieure de la ligne passe dans .ligne-glisse : le fond ne déborde jamais de chaque côté au premier pixel. */
.courses-ligne { position: relative; padding: 0; }
.ligne-glisse { display: flex; align-items: center; flex: 1; min-width: 0; align-self: stretch; padding: 0 12px 0 4px; border-radius: 12px; background: transparent; }
@media (max-width: 760px) { .courses-ligne { padding: 0; } .ligne-glisse { padding-right: 8px; } }
/* Le défilement vertical reste au navigateur : seul le sens horizontal est pour nous (décision après 10 px, app.js). */
.courses-ligne.balayable { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.courses-ligne.glisse-actif { overflow: hidden; }
.courses-ligne.glisse-actif .ligne-glisse { background: var(--blanc); }
.ligne-glisse.retour { transition: transform .28s cubic-bezier(.3, 1.5, .5, 1); }
.ligne-glisse.sort { transition: transform .16s ease-in; }
.balayage-fond { position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-start; padding: 0 24px; border-radius: 12px; color: var(--blanc); pointer-events: none; }
.glisse-actif .balayage-fond { display: flex; }
.balayage-droite .balayage-fond { background: var(--vert); justify-content: flex-start; }
.balayage-gauche .balayage-fond { background: var(--retard); justify-content: flex-end; }
.balayage-droite .balayage-corbeille, .balayage-gauche .balayage-coche { display: none; }
.balayage-icone { display: inline-flex; opacity: .65; transform: scale(.85); transition: transform .12s, opacity .12s; }
.balayage-arme .balayage-icone { opacity: 1; transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { .ligne-glisse.retour, .ligne-glisse.sort, .balayage-icone { transition: none; } }

/* L'icône du rayon est un bouton : le dessin et le disque restent ceux de la ligne (44 px sur grand écran, 40 sur téléphone). */
.courses-ligne .rayon-bouton { margin-left: 10px; padding: 0; border: 0; cursor: pointer; }
.courses-ligne .rayon-bouton:hover { filter: brightness(.95); }
.courses-ligne .rayon-bouton:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }

/* « × » des suggestions venues de l'historique : retire le produit des suggestions de cet appareil. 44 × 44 px de cible, le
   dessin reste discret ; il rougit au toucher. */
.sugg-retirer { order: 3; flex: none; width: 44px; height: 44px; margin: 0 -12px 0 0; padding: 0 0 2px; border: 0; border-radius: 50%; background: none; color: var(--gris-clair); font-size: 22px; line-height: 1; }
.sugg-retirer:hover, .sugg-retirer:focus-visible { color: var(--retard); background: #FBE9E7; }

/* Paramètres › Courses */
.reglage-titre { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gris); }
#reglages-courses .case { margin-top: 4px; }
#reglages-courses .aide { margin: 4px 0 10px 24px; }

/* Agendas extérieurs (CDC M06_Agenda/AGENDA_ABONNEMENTS) */
.abonnement { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.abonnement-nom { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.abonnement-gestes { display: flex; gap: 8px; }
.abonnement-etat.erreur, #abonnement-message { color: var(--retard); }
.choix-couleurs { display: flex; flex-wrap: wrap; gap: 10px; }
.choix-couleur { display: inline-flex; cursor: pointer; }
.choix-couleur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille-choix { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; box-sizing: border-box; }
.choix-couleur input:checked + .pastille-choix { border-color: var(--texte); }
.choix-couleur input:focus-visible + .pastille-choix { outline: 2px solid var(--texte); outline-offset: 2px; }
fieldset.couleurs { border: 0; padding: 0; margin: 8px 0; }
/* Courses → Budget et plan du magasin (COURSES_V2, lot C partie 1) */
#depense-courses, #ordre-rayons { font-family: var(--sans); }
#depense-courses h2, #ordre-rayons h2 { font-family: var(--sans); font-weight: 600; color: var(--texte); font-size: 22px; margin: 0 0 12px; overflow-wrap: anywhere; }
#depense-courses label { display: block; margin-bottom: 10px; min-width: 0; }
#depense-courses input, #depense-courses select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
#depense-courses .ligne { gap: 10px; }
#depense-courses-origine { margin: 0 0 10px; font-size: 14px; color: var(--gris); }
#depense-courses-erreur { margin: 0 0 8px; font-size: 14px; color: var(--retard); }
#depense-courses .actions button { min-height: 44px; }
#ordre-rayons { padding: 16px 12px; }
#ordre-rayons .partage-haut { padding: 0 4px; }
#ordre-rayons > .aide { margin: 0 4px 8px; font-size: 14px; }
.ordre-rayons-liste { list-style: none; margin: 0 0 8px; padding: 0; max-height: min(62vh, 700px); overflow-y: auto; overflow-x: hidden; }
.ordre-ligne { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 4px 4px 4px 6px; border-top: 1px solid var(--separateur); background: var(--blanc); position: relative; }
.ordre-ligne:first-child { border-top: 0; }
.ordre-ligne .icone-rayon { width: 40px; height: 40px; border-radius: 50%; background: var(--disque, var(--separateur)); }
.ordre-ligne .icone-rayon svg { width: 26px; height: 26px; }
.ordre-nom { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; margin-left: 4px; }
.ordre-bouton { flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 22px; color: var(--marine); }
.ordre-bouton:hover:not(:disabled), .ordre-bouton:focus-visible { background: var(--pastille); }
.ordre-bouton:disabled { color: var(--gris-clair); }
.ordre-poignee { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--gris); cursor: grab; touch-action: none; user-select: none; border-radius: 10px; }
.ordre-poignee:hover { background: var(--pastille); }
.ordre-ligne.glisse { z-index: 2; background: var(--blanc); box-shadow: 0 6px 18px rgba(0, 35, 102, .25); border-radius: 12px; }
.ordre-ligne.glisse .ordre-poignee { cursor: grabbing; }
.ordre-ligne:not(.glisse) { transition: transform .12s ease; }

/* Kanban Catégories (CDC M02_Taches/KANBAN_CATEGORIES, Fred, 08/10/2026) : une colonne par liste de tâches. */
/* Le choix Jour · Semaine · Catégories : trois boutons collés, chacun assez haut pour le doigt (44 px). */
.periodes { display: flex; flex: none; gap: 0; }
.periodes .bascule { min-height: 44px; border-radius: 0; margin-left: -1px; }
.periodes .bascule:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.periodes .bascule:last-child { border-radius: 0 999px 999px 0; }
.periodes .bascule[aria-pressed="true"] { position: relative; z-index: 1; }
#bascule-colonnes { min-height: 44px; }
/* Grand écran : un Kanban prend la largeur utile (jusqu'à 1480 px, comme Courses) ; les autres vues gardent la leur.
   Les colonnes font 260 px au moins et défilent de côté s'il y en a plus que la largeur. */
@media (min-width: 1100px) {
  #appli:has(#groupes.kanban-large) { max-width: 1480px; }
}
.entete-categorie { display: flex; align-items: center; gap: 8px; margin: 4px 4px 10px; font-size: 19px; }
.entete-categorie .pastille-agenda { width: 12px; height: 12px; margin: 0; }
.entete-categorie .nom-categorie { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.compte-categorie { flex: none; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--marine); background: var(--pastille); border-radius: 999px; min-width: 24px; padding: 1px 8px; text-align: center; }
#groupes.kanban-categories .colonne { display: flex; flex-direction: column; min-height: 160px; }
#groupes.kanban-categories .colonne .taches { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
#groupes.kanban-categories .colonne-vide { margin: 4px; padding: 14px 8px; text-align: center; color: var(--gris); font-size: 14px; border: 1px dashed var(--bordure); border-radius: 10px; }
#groupes.kanban-categories .tache { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: var(--ombre); }
#groupes.kanban-categories .tache .coche { margin-top: 0; }
#groupes.kanban-categories .tache .corps { min-height: 28px; }
.glisse-source { opacity: .35; }
.glisse-copie { position: fixed; z-index: 60; margin: 0; pointer-events: none; list-style: none; background: var(--blanc); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 35, 102, .3); transform: rotate(1.5deg); opacity: .96; }
#groupes.glisse { scroll-snap-type: none; }
/* « + Ajouter » : une ligne discrète en bas de la colonne, qui devient le champ. */
/* « + » dans l'en-tête de la colonne (Fred, 08/10/2026) ; le champ s'ouvre en haut de la colonne, au-dessus des cartes. */
.ajout-colonne { margin: 0 0 8px; }
.ajout-colonne[hidden] { display: none; }
.entete-categorie .ajout-colonne-ouvrir { flex: none; width: 44px; height: 44px; margin: -8px -4px -8px 0; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--marine); font-family: var(--sans); font-size: 26px; font-weight: 400; line-height: 1; }
.entete-categorie .ajout-colonne-ouvrir:hover, .entete-categorie .ajout-colonne-ouvrir[aria-expanded="true"] { background: var(--pastille); }
.ajout-colonne-champ { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--blanc); font-size: 16px; }
.ajout-colonne-champ:focus { outline: 2px solid var(--marine); outline-offset: -1px; }
/* Les tâches faites (K3, Fred 08/10/2026) : grisées, JAMAIS barrées, dans tous les tableaux (Kanban jour, semaine,
   catégories, Planifier, et la colonne « Fait » du Tableau d'une liste). Les vues en liste gardent leur trait. */
#groupes.tableau .tache.fait { opacity: .72; background: var(--fond); box-shadow: none; }
#groupes.tableau .tache.fait .corps .nom { color: var(--gris); text-decoration: none; }
#groupes.tableau .tache.fait .corps .details { color: var(--gris-clair); }
.terminees-colonne { margin: 6px 0 0; }
.terminees-colonne > summary { min-height: 44px; display: flex; align-items: center; padding: 0 12px; color: var(--gris); font-weight: 600; font-size: 14px; cursor: pointer; border-radius: 10px; list-style: none; }
.terminees-colonne > summary::-webkit-details-marker { display: none; }
.terminees-colonne > summary:hover { background: var(--pastille); }
.terminees-colonne[open] > summary { color: var(--marine); }
/* Kanban : le bandeau « Annuler » se pose juste au-dessus de la barre du bas (ou du bord de l'écran). */
#kanban-bandeau { bottom: calc(var(--barre-bas) + var(--clavier) + 12px + env(safe-area-inset-bottom, 0px)); }
/* « Colonnes… » */
#colonnes-categories { font-family: var(--sans); padding: 16px 12px; }
#colonnes-categories h2 { font-family: var(--sans); font-weight: 600; color: var(--texte); font-size: 22px; margin: 0 0 12px; }
#colonnes-categories .partage-haut { padding: 0 4px; }
#colonnes-categories > .aide { margin: 0 4px 8px; font-size: 14px; }
.colonne-case { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.colonne-case input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--marine); }
.colonne-case .pastille-agenda { width: 12px; height: 12px; margin: 0; }
/* Téléphone : les réglages du Kanban se serrent un peu pour que « Kanban » et le choix à trois tiennent sur une ligne. */
@media (max-width: 640px) {
  .filtres #bascule-kanban, .periodes .bascule { padding-left: 10px; padding-right: 10px; font-size: 15px; }
}

/* « 2 à valider » (CDC 00_Socle/INTERFACE_CONVIVIALE 2.4) : une pastille dans l'en-tête, donc sur chaque onglet, sans rien décaler dessous. */
.compteur-a-valider { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--marine); border-radius: 999px; background: var(--pastille); color: var(--marine); font-weight: 600; font-size: 14px; white-space: nowrap; }
.compteur-a-valider[hidden] { display: none; }

/* Le micro de la barre (CDC 00_Socle/INTERFACE_CONVIVIALE 2.5 et 5.3) : une cible de 44 px ; plein quand il écoute. */
.micro { flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--bordure); border-radius: 50%; background: var(--blanc); color: var(--marine); }
.micro:hover { background: var(--pastille); }
.micro[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.micro:disabled { opacity: .6; }
/* « ?micro=1 » sans écoute possible : le bouton ressort jusqu'au prochain geste (pas de minuterie). */
.micro.micro-en-avant { background: var(--marine); border-color: var(--marine); color: var(--blanc); box-shadow: 0 0 0 4px var(--pastille); }
.micro-etat { background: var(--fond); color: var(--texte); border: 1px solid var(--bordure); font-weight: 600; }

/* La carte « J'ai compris » (CDC 00_Socle/INTERFACE_CONVIVIALE 2.3). */
.comprise { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 16px; box-shadow: var(--ombre); padding: 8px 12px 10px; margin: 0 0 16px; }
.comprise[hidden] { display: none; }
.comprise-tete { display: flex; align-items: center; gap: 8px; }
.comprise-titre { flex: 1; margin: 0; font-family: var(--serif); font-size: 18px; color: var(--marine); }
.comprise-tete .discret, .comprise-actions .discret { min-height: 44px; }
.comprise-fermer { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--gris); font-size: 26px; line-height: 1; padding: 0 0 3px; }
.comprise-fermer:hover { background: var(--pastille); color: var(--marine); }
.comprise-liste { list-style: none; margin: 0; padding: 0; }
.comprise-liste:empty { display: none; }
/* Les boutons passent sous le texte quand la place manque (C3 des tests simulés : « Ren / dez / - / vous » à 320 px) : le texte
   garde au moins 8em avant que Voir et Corriger ne passent à la ligne. */
.comprise-ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--separateur); }
.comprise-ligne:first-child { border-top: 0; }
.comprise-icone { flex: none; width: 28px; text-align: center; font-size: 18px; line-height: 1.4; }
.comprise-corps { flex: 1 1 8em; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.comprise-nom { overflow-wrap: anywhere; font-weight: 600; }
.comprise-detail { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
/* « Celle-ci attend dans À valider. », « pain : déjà sur la liste » : un avertissement doux, en ambre foncé ; le rouge est pour les échecs. */
.comprise-avert { font-size: 13px; color: var(--ambre-fonce); font-weight: 600; }
.comprise-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; }
/* La proposition d'un modèle de mission (MISSIONS_MVP §6.3) : sous la ligne de la mission, jusqu'au choix. */
.comprise-modele { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.comprise-modele-question { font-weight: 600; overflow-wrap: anywhere; }
.comprise-modele-precision { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.comprise-modele-actions { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -8px; }
.comprise-modele-actions .discret { min-height: 44px; }
.comprise-echec .comprise-detail { color: var(--retard); font-weight: 600; }
.comprise .aide { margin: 4px 0 0; }
@media (max-width: 380px) { .comprise-actions { flex-basis: calc(100% - 38px); margin-left: 38px; justify-content: flex-start; } }

/* Le dossier du foyer (CDC 00_Socle/DOSSIER_DU_FOYER, D-100) : « Ce que Kolvaya sait » et « Faisons connaissance ». */
#memoire, #tes-donnees { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.memoire-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.memoire-entete h2 { margin: 0; }
#memoire-fermer, #tes-donnees-fermer { font-size: 24px; min-width: 44px; min-height: 44px; }
.memoire-bloc { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.memoire-bloc h3 { margin: 0; font-family: var(--serif); color: var(--marine); font-size: 19px; }
.memoire-invitation { background: var(--rose-pale); border-radius: 12px; padding: 14px 16px; }
.memoire-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.memoire-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; background: var(--blanc); border-radius: 10px; box-shadow: var(--ombre); }
.memoire-liste .memoire-texte { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.memoire-liste .memoire-meta { flex-basis: 100%; font-size: 13px; color: var(--gris); }
.memoire-liste .memoire-gestes { display: flex; gap: 6px; flex-wrap: wrap; }
.memoire-sous-titre { margin: 8px 0 6px; font-size: 15px; color: var(--gris); font-weight: 600; }
.memoire-liste li.arretee .memoire-texte { color: var(--gris); }
.fil-habitude-texte, .fil-habitude-suite { margin: 2px 0 0; overflow-wrap: anywhere; }
.fil-habitude-suite { color: var(--gris); font-size: 14px; }
.fil-habitude-gestes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fil-habitude-gestes button { min-height: 44px; }
.memoire-liste li.proposee { outline: 2px dashed var(--rose-pale); }
.memoire-champs { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.memoire-ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.memoire-ligne > label { flex: 1 1 180px; min-width: 0; }
.memoire-jours { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.memoire-jours label { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.memoire-pied { margin-top: 18px; }
.tes-donnees-corps p { margin: 0 0 8px; overflow-wrap: anywhere; }
#tes-donnees-courriel { display: inline-flex; align-items: center; text-decoration: none; }
#tes-donnees .memoire-bloc > button { align-self: flex-start; }

/* « Kolvaya réfléchit » (CDC 00_Socle/MOTEUR, D-100) : la carte provisoire sous la barre. */
.reflexion { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 14px 16px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.reflexion p { margin: 0; }
.reflexion-qui { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ambre-fonce); }
.reflexion-comprise { font-weight: 600; }
.reflexion-questions { display: flex; flex-direction: column; gap: 8px; }
.reflexion-liste { display: flex; flex-direction: column; gap: 4px; }
.reflexion-choix { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.reflexion-choix input { margin-top: 3px; }
/* Deuxième passage des testeurs (10/10/2026) : des cases énormes, le libellé rejeté à droite ; et « Créer » caché sous la barre du bas. */
.reflexion-remplacer { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; margin-top: 4px; }
.reflexion-choix input[type=checkbox], .reflexion-remplacer input[type=checkbox] { width: 20px; height: 20px; min-width: 20px; flex: none; padding: 0; margin-top: 2px; accent-color: var(--ambre-fonce); }
.reflexion .actions { scroll-margin-bottom: 104px; }
.reflexion-idees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* La réponse à une question et les idées de repas (CDC 00_Socle/MOTEUR, section du 10/10/2026). */
.reflexion-reponse, .fil-reponse { white-space: pre-line; font-size: 16px; line-height: 1.45; }
.fil-reponse { margin: 6px 0 0; }
.idees-repas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.idee-repas { border-top: 1px solid var(--separateur); padding: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.idee-repas p { margin: 0; }
.idee-titre { font-weight: 600; color: var(--marine); }
.idee-ingredients { font-size: 14px; }
.idee-ajouter { align-self: flex-start; }
.foyer-connaissance { margin: 0 0 12px; }
.foyer-connaissance button { text-align: left; }
/* Faire entrer le foyer (CDC 00_Socle/FOYER_INVITER_MVP) : les gestes de l'invitation sont des liens (WhatsApp, SMS) qui ont l'air de boutons. */
.inviter-foyer { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.inviter-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.inviter-gestes a { display: inline-flex; align-items: center; text-decoration: none; }
.inviter-gestes a.discret { border: 1px solid var(--contour); }
.inviter-partage { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--separateur); }
.inviter-partage label { flex: 1 1 200px; min-width: 0; margin: 0; }
/* Inviter par un lien (CDC 00_Socle/INVITATION_LIEN_MVP) */
.inviter-par-lien { margin: 0 0 12px; }
.inviter-voir { border: 0; padding: 0; margin: 0 0 10px; }
.inviter-voir legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.inviter-voir label { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 400; }
.inviter-suivi { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--separateur); }
.inviter-suivi h3 { font-size: 15px; margin: 0 0 4px; }
.inviter-suivi ul { list-style: none; margin: 0; padding: 0; }
.inviter-suivi li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
#inviter-message { font-size: 15px; }

/* L'entretien de la maison (CDC M14_Maison/ENTRETIEN_MVP, D-101) : une carte par équipement, même présentation que Véhicules. */
#entretien-cartes { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#entretien-cartes .jour-titre, #entretien-cartes .aide, #fiche-equipement-titre, #fiche-equipement-champs li, #fiche-equipement-notes { overflow-wrap: anywhere; }
#fiche-equipement h3 { font-family: var(--serif); color: var(--marine); font-size: 16px; margin: 16px 0 6px; }
.fiche-lignes { list-style: none; margin: 8px 0; padding: 0; font-size: 14px; }
.fiche-lignes li { margin: 2px 0; }
#fiche-equipement-etat .avertissement { margin: 0 0 8px; }
#fiche-equipement-confirmer, #intervention-confirmer { margin-top: 12px; }
#fiche-equipement-confirmer p, #intervention-confirmer p { margin: 0 0 6px; }
/* « Kolvaya propose » dans la carte « J'ai compris » : la section du moteur n'est plus une carte à part. */
.comprise .reflexion { background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--separateur); padding: 10px 0 2px; margin: 8px 0 0; }

/* L'énergie et les compteurs (CDC M12_Energie/ENERGIE_MVP) : résumé, barres des douze derniers mois (classes de hauteur par pas
   de 5 %, la CSP bloque les attributs style), historique. */
#energie-resume, #energie-barres { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
#energie-resume .jour-titre, #energie-resume .aide, #energie-resume .avertissement, #energie-historique .details, #reprise-resume li, #reprise-refus li { overflow-wrap: anywhere; }
.energie-titre { font-family: var(--serif); color: var(--marine); font-size: 16px; margin: 16px 0 6px; }
.energie-barres { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 14px 16px; }
.energie-barres h3 { margin: 0 0 10px; font-size: 15px; }
.barres { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.barres .barre { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.barres .colonne { display: block; background: var(--marine); border-radius: 3px 3px 0 0; min-height: 2px; }
.barres .barre.vide .colonne { background: var(--gris); opacity: .35; }
.barres .etiquette { display: block; font-size: 10px; color: var(--gris); text-align: center; margin-top: 3px; white-space: nowrap; overflow: hidden; }
.barres .colonne.h0 { height: 0; } .barres .colonne.h5 { height: 5%; } .barres .colonne.h10 { height: 10%; } .barres .colonne.h15 { height: 15%; }
.barres .colonne.h20 { height: 20%; } .barres .colonne.h25 { height: 25%; } .barres .colonne.h30 { height: 30%; } .barres .colonne.h35 { height: 35%; }
.barres .colonne.h40 { height: 40%; } .barres .colonne.h45 { height: 45%; } .barres .colonne.h50 { height: 50%; } .barres .colonne.h55 { height: 55%; }
.barres .colonne.h60 { height: 60%; } .barres .colonne.h65 { height: 65%; } .barres .colonne.h70 { height: 70%; } .barres .colonne.h75 { height: 75%; }
.barres .colonne.h80 { height: 80%; } .barres .colonne.h85 { height: 85%; } .barres .colonne.h90 { height: 90%; } .barres .colonne.h95 { height: 95%; }
.barres .colonne.h100 { height: 100%; }
#releve-champs label small { display: block; font-weight: 400; color: var(--gris); }
#releve-champs .avertissement { margin: 2px 0 8px; }
#releve-confirmer, #compteur-confirmer { margin-top: 12px; }
#releve-confirmer p, #compteur-confirmer p { margin: 0 0 6px; }
#compteurs-proposes { border: 0; padding: 0; margin: 12px 0; }
#compteurs-proposes label { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
#compteurs-proposes input { width: auto; margin: 0; }

/* Les présences (CDC M01_Planning/PRESENCES_MVP) : sept jours, chacun avec ses lignes (un bouton par présence). */
#presences-jours { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.presences-jour { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 14px 16px; }
.presences-jour .jour-titre { margin: 0 0 6px; font-size: 17px; }
.presences-jour .aide { margin: 2px 0; overflow-wrap: anywhere; }
.presences-jour ul { list-style: none; margin: 0; padding: 0; }
.presences-jour li button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 0; font: inherit; color: inherit; overflow-wrap: anywhere; }
#presence-confirmer { margin-top: 12px; }
#presence-confirmer p { margin: 0 0 6px; }

/* Contrats et abonnements (CDC M05_Budget/CONTRATS_MVP) : le total mensuel puis une carte par contrat, même présentation qu'Entretien. */
#contrats-total, #contrats-cartes { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#contrats-total:empty { display: none; }
#contrats-vue .jour-titre, #contrats-vue .aide, #fiche-contrat-titre, #fiche-contrat-champs li, #fiche-contrat-notes { overflow-wrap: anywhere; }
#contrats-total .total { font-size: 22px; font-weight: 600; margin: 4px 0; }
#contrats-total ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
#contrats-total li { display: flex; justify-content: space-between; gap: 12px; margin: 2px 0; }
#fiche-contrat-etat .avertissement { margin: 0 0 8px; }
#fiche-contrat-resilier, #fiche-contrat-confirmer { margin-top: 12px; }

/* Activités des enfants (CDC M15_Activites/ACTIVITES_MVP) : une carte par activité, même présentation que les contrats. */
#activites-cartes { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#activites-vue .jour-titre, #activites-vue .aide, #activites-vue .avertissement, #fiche-activite-titre, #fiche-activite-champs li, #fiche-activite-notes { overflow-wrap: anywhere; }
#activites-vue .foyer-carte p { margin: 2px 0; }
#fiche-activite-afaire .avertissement { margin: 0 0 8px; }
#fiche-activite-marquer, #fiche-activite-confirmer, #fiche-activite-horaire { margin-top: 12px; }

/* Le fil (CDC 00_Socle/INTERFACE_CONVIVIALE §4) : la personne à droite, Kolvaya à gauche, la plus récente en bas. */
#fil-vue[hidden] { display: none; }
/* Correctif D8 (09/10/2026) : le fil se lit en bas, la barre de saisie est en haut (CDC 2.1) — dans « Le fil », elle reste
   à l'écran pendant qu'on lit, collée sous le bord du haut. */
#appli:has(> #fil-vue:not([hidden])) #form-ajout { position: sticky; top: 0; z-index: 6; }
/* « overflow-x: hidden » sur html et body fait de body un conteneur de défilement qui ne défile pas : rien n'y colle. Dans
   « Le fil », « clip » coupe pareil le débordement sans créer ce conteneur, et la barre colle. */
html:has(#fil-vue:not([hidden])), html:has(#fil-vue:not([hidden])) body { overflow-x: clip; }
/* Ce qu'on fait venir à l'écran (un bouton de la carte, une réponse du fil) s'arrête sous la barre collée, jamais dessous. */
html:has(#fil-vue:not([hidden])) { scroll-padding-top: 9rem; }
.fil-liste, .fil-echanges, .fil-lignes { list-style: none; margin: 0; padding: 0; }
.fil-jour { margin: 0 0 12px; }
.fil-echanges { display: flex; flex-direction: column; gap: 14px; }
.fil-echange { display: flex; flex-direction: column; gap: 6px; }
.fil-moi { align-self: flex-end; max-width: 85%; background: var(--marine); color: var(--blanc); border-radius: 16px 16px 4px 16px; padding: 8px 12px; }
.fil-texte { margin: 0; overflow-wrap: anywhere; }
.fil-heure { display: block; font-size: 12px; opacity: 0.75; margin-top: 2px; }
.fil-kolvaya { align-self: flex-start; max-width: 95%; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 16px 16px 16px 4px; box-shadow: var(--ombre); padding: 6px 12px 8px; }
.fil-qui { margin: 2px 0 0; font-family: var(--serif); font-size: 16px; color: var(--marine); display: flex; justify-content: space-between; gap: 12px; }
.fil-qui .fil-heure { margin: 0; align-self: center; font-family: inherit; color: var(--gris); }
.fil-mot-titre { margin: 4px 0 0; font-weight: 600; }
.fil-mot-corps { margin: 2px 0 0; overflow-wrap: anywhere; }
.fil-ligne { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--separateur); }
.fil-ligne:first-child { border-top: 0; }
.fil-icone { flex: none; width: 28px; text-align: center; font-size: 18px; line-height: 1.4; }
.fil-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fil-nom { overflow-wrap: anywhere; font-weight: 600; }
.fil-detail { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.fil-avert { font-size: 13px; color: var(--ambre-fonce); font-weight: 600; }
.fil-echec .fil-detail { color: var(--retard); font-weight: 600; }
.fil-actions { flex: none; }
.fil-actions .discret { min-height: 44px; }
.fil-propose { border-top: 1px solid var(--separateur); margin-top: 6px; padding-top: 6px; }
.fil-propose p:last-child { margin: 2px 0 0; overflow-wrap: anywhere; }
/* L'énergie et les compteurs (CDC M12_Energie/ENERGIE_MVP) : résumé, barres des douze derniers mois (classes de hauteur par pas
   de 5 %, la CSP bloque les attributs style), historique. */
#energie-resume, #energie-barres { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
#energie-resume .jour-titre, #energie-resume .aide, #energie-resume .avertissement, #energie-historique .details, #reprise-resume li, #reprise-refus li { overflow-wrap: anywhere; }
.energie-titre { font-family: var(--serif); color: var(--marine); font-size: 16px; margin: 16px 0 6px; }
.energie-barres { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 14px 16px; }
.energie-barres h3 { margin: 0 0 10px; font-size: 15px; }
.barres { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.barres .barre { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.barres .colonne { display: block; background: var(--marine); border-radius: 3px 3px 0 0; min-height: 2px; }
.barres .barre.vide .colonne { background: var(--gris); opacity: .35; }
.barres .etiquette { display: block; font-size: 10px; color: var(--gris); text-align: center; margin-top: 3px; white-space: nowrap; overflow: hidden; }
.barres .colonne.h0 { height: 0; } .barres .colonne.h5 { height: 5%; } .barres .colonne.h10 { height: 10%; } .barres .colonne.h15 { height: 15%; }
.barres .colonne.h20 { height: 20%; } .barres .colonne.h25 { height: 25%; } .barres .colonne.h30 { height: 30%; } .barres .colonne.h35 { height: 35%; }
.barres .colonne.h40 { height: 40%; } .barres .colonne.h45 { height: 45%; } .barres .colonne.h50 { height: 50%; } .barres .colonne.h55 { height: 55%; }
.barres .colonne.h60 { height: 60%; } .barres .colonne.h65 { height: 65%; } .barres .colonne.h70 { height: 70%; } .barres .colonne.h75 { height: 75%; }
.barres .colonne.h80 { height: 80%; } .barres .colonne.h85 { height: 85%; } .barres .colonne.h90 { height: 90%; } .barres .colonne.h95 { height: 95%; }
.barres .colonne.h100 { height: 100%; }
#releve-champs label small { display: block; font-weight: 400; color: var(--gris); }
#releve-champs .avertissement { margin: 2px 0 8px; }
#releve-confirmer, #compteur-confirmer { margin-top: 12px; }
#releve-confirmer p, #compteur-confirmer p { margin: 0 0 6px; }
#compteurs-proposes { border: 0; padding: 0; margin: 12px 0; }
#compteurs-proposes label { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
#compteurs-proposes input { width: auto; margin: 0; }

/* Les fenêtres de Kolvaya (fenetres.js) : confirmer, demander, et les bandeaux d'information qui ne bloquent rien. */
.fenetre-kolvaya { font-family: var(--sans); width: min(420px, calc(100vw - 32px)); }
.fenetre-texte { margin: 0 0 16px; font-size: 17px; line-height: 1.4; color: var(--texte); white-space: pre-line; overflow-wrap: anywhere; }
label > .fenetre-texte { font-weight: 600; margin: 0; }
#fenetre-confirmer .actions, #fenetre-demander .actions { margin-top: 12px; }
/* « Oui » / « OK » est le premier bouton (Entrée le choisit) mais s'affiche en dernier. */
#fenetre-confirmer-oui, #fenetre-demander-valider { order: 2; }
#fenetre-confirmer-non, #fenetre-demander-annuler { order: 1; }
/* La fenêtre d'une fiche modifiée ailleurs (D-104 (2)) : les champs qui diffèrent, ta valeur et la sienne ; les trois choix empilés sur téléphone. */
.fenetre-conflit { width: min(520px, calc(100vw - 32px)); }
.conflit-ecarts { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 12px; table-layout: fixed; }
.conflit-ecarts th, .conflit-ecarts td { text-align: left; vertical-align: top; padding: 6px 6px 6px 0; border-bottom: 1px solid var(--separateur); overflow-wrap: anywhere; }
.conflit-ecarts thead th { font-weight: 600; color: var(--texte); }
.conflit-ecarts tbody th { font-weight: 400; color: var(--texte); width: 30%; }
.conflit-actions { flex-wrap: wrap; gap: 8px; }
.conflit-actions button { min-height: 44px; }
@media (max-width: 480px) { .conflit-actions button { flex: 1 1 100%; } }
.principal.danger-fort { background: var(--retard); }
.principal.danger-fort:hover { background: #8E3A33; }
.bandeaux { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barre-bas) + var(--clavier) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(480px, calc(100vw - 32px)); pointer-events: none; }
.bandeaux:empty { display: none; }
.bandeau-message { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 18px; background: var(--texte); color: var(--blanc); border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); font-size: 15px; line-height: 1.35; cursor: pointer; }
.bandeau-message.erreur { border-left: 6px solid var(--retard); }
.bandeau-texte { flex: 1; min-width: 0; padding: 8px 0; overflow-wrap: anywhere; white-space: pre-line; }
.bandeau-fermer { flex: none; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--rose); font-weight: 700; border-radius: 8px; }
.bandeau-fermer:hover { background: rgba(255, 255, 255, .12); }

/* Les missions (CDC 00_Socle/MISSIONS_MVP) : la carte et son lien « Fiche de la mission », la fin dépassée en ambre. */
.foyer-mission-bloc { display: flex; flex-direction: column; gap: 4px; }
.foyer-mission-fiche { align-self: flex-end; }
.foyer-mission .mission-fin-depassee { color: var(--ambre-fonce); font-weight: 600; }
/* Le point de la mission (MISSIONS_MVP §7) : une ligne repliée sous la carte, dépliée à la demande. */
.mission-point { padding: 0 4px; }
.mission-point summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gris); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; padding: 12px 0; }
.mission-point[open] summary { white-space: normal; }
.mission-point p { margin: 4px 0; }
#fiche-mission-point { border-bottom: 1px solid var(--bordure); padding-bottom: 8px; margin-bottom: 8px; }
#fiche-mission-point h3 { margin: 0 0 4px; font-size: 1rem; }
#fiche-mission-point p, #fiche-mission-point ul { margin: 4px 0; }
#fiche-mission-point ul { padding-left: 1.2em; }

/* ===== La chaleur visuelle (CDC 00_Socle/INTERFACE_CONVIVIALE §6, 09/10/2026) : l'ambre, le crème, l'emblème, les dessins des
   états vides, des apparitions douces. Seule la présentation change. ===== */
::selection { background: var(--ambre-pale); color: var(--texte); }
.avatar { background: var(--ambre-pale); }
.barre-bas button[aria-current="page"] .icone { background: var(--ambre-pale); }
.foyer-carte, .foyer-mission { border-radius: 18px; transition: box-shadow .15s; }
.foyer-carte:hover, .foyer-mission:hover { box-shadow: var(--ombre-haute); }

/* L'écran de chargement (index.html, C9 des tests simulés) : l'emblème et « Kolvaya s'ouvre… » tant que ni la connexion ni l'appli
   ne sont affichées. Rien à cacher en JavaScript : il disparaît dès que l'une des deux est là. */
.chargement { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--fond); color: var(--marine); font-family: var(--serif); font-weight: 700; font-size: 22px; }
.chargement p { margin: 0; }
.chargement-embleme { display: block; }
body:has(> #connexion:not([hidden])) > .chargement, body:has(> #appli:not([hidden])) > .chargement { display: none; }
/* L'emblème de Kolvaya (web/visage.js) : deux tailles, des couleurs par classes (la CSP bloque les attributs style). */
.visage { display: inline-flex; flex: none; line-height: 0; }
.visage-svg { display: block; }
.vis-disque { fill: var(--ambre); }
.vis-halo { fill: var(--ambre); fill-opacity: .16; }
.vis-eclat { fill: var(--ambre); }
.vis-trait { fill: none; stroke: var(--blanc); stroke-linecap: round; stroke-linejoin: round; }
/* À côté de la phrase d'accueil : l'emblème à gauche, la phrase à droite ; le tout disparaît avec la phrase. */
.foyer-parole { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; }
.foyer-parole:has(> #foyer-accueil[hidden]) { display: none; }
.foyer-parole .foyer-accueil { margin: 0; min-width: 0; flex: 1; }
/* Kolvaya répond à voix haute (CDC 7.1) : le bouton « Lis-moi ma journée », sous la date de l'Accueil. */
.foyer-lire { margin: 0 0 4px; padding-left: 0; }
.foyer-lire[hidden] { display: none; }
/* En tête de la carte « J'ai compris ». */
.comprise-tete .visage { margin-left: 2px; }
.comprise { background: linear-gradient(var(--ambre-pale), var(--blanc) 64px); border-color: var(--bordure); }
/* Devant chaque réponse de Kolvaya dans le fil : l'emblème, puis la bulle ; les consignes du membre restent à droite. */
.fil-rep { display: flex; align-items: flex-start; gap: 8px; align-self: flex-start; max-width: 100%; min-width: 0; }
.fil-rep .visage { margin-top: 2px; }
.fil-rep .fil-kolvaya { flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* Les dessins des états vides (web/illustrations.js) : au-dessus du texte, centrés, 96 px de haut. */
.illustration { display: flex; justify-content: center; margin: 24px 0 0; line-height: 0; }
.illustration-svg { display: block; max-width: 100%; height: auto; }
.illustration + .vide, .illustration + .aide, .illustration + #courses-vide { padding-top: 8px; }
.ill-m, .ill-a { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill-m { stroke: var(--marine); }
.ill-a { stroke: var(--ambre); }
.ill-fond { fill: var(--ambre); fill-opacity: .14; stroke: none; }
.ill-point { fill: var(--ambre); stroke: none; }

/* Des apparitions douces (150 à 200 ms), en opacité et en léger glissement seulement : la taille et la place d'un élément sont
   celles de son état final dès la première image, rien ne saute. `.apparait` est posé par app.js une seule fois par élément. */
@keyframes apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.comprise:not([hidden]), .apparait, .fenetre-kolvaya[open], .bandeau-message { animation: apparition .18s ease-out backwards; }
/* Les gestes rapides sous une tâche (nouvelle interface, étape 3) : la ligne touchée s'entoure, ses six boutons dessous. */
.tache.ouverte { flex-wrap: wrap; background: var(--blanc); border-radius: 14px; box-shadow: 0 0 0 2px var(--marine); border-top-color: transparent; }
.tache.ouverte + .tache { border-top-color: transparent; }
.gestes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 2px 38px; }
.geste, .quand-rapide button { min-height: 40px; padding: 0 14px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--blanc); color: var(--texte); font-size: 14px; font-weight: 600; }
.geste:hover, .quand-rapide button:hover { background: var(--pastille); border-color: var(--marine); }
.geste-fiche { border-color: transparent; background: none; color: var(--marine); }
/* « À ranger » (étape 4b, maquette) : le bouton « Ranger » au bout de la ligne, et « Supprimer » en rouge, sans contour. */
.tache .ranger { flex: none; align-self: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--blanc); color: var(--marine); font-size: 14px; font-weight: 600; }
.tache .ranger:hover { background: var(--pastille); border-color: var(--marine); }
.geste-supprimer { border-color: transparent; background: none; color: var(--retard); }
/* La fiche courte : « Quand » en un toucher, « Pour », puis « Plus d'options » replié, qui dit ce qu'il contient. */
.quand-fiche { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.quand-fiche legend { font-size: 13px; font-weight: 600; color: var(--gris); padding: 0; margin-bottom: 6px; }
.quand-rapide { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.plus-options { margin: 4px 0 0; border-top: 1px solid var(--separateur); }
.plus-options > summary { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 0; color: var(--marine); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.plus-options-resume { color: var(--gris); font-weight: 500; }
.plus-options[open] > summary { margin-bottom: 8px; }
.plus-options-actions { margin: 4px 0 8px; }
/* « Dans le caddie » : les articles pris de Courses, repliés sous leur nombre (étape 4b). */
.courses-caddie { margin: 16px 0 0; }
.courses-caddie > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 8px 4px; }
/* La flèche dit qu'on peut déplier : ▸ fermé, ▾ ouvert. */
.courses-caddie > summary::before { content: '▸'; font-size: 14px; }
.courses-caddie[open] > summary::before { content: '▾'; }
.courses-caddie[open] > summary { margin-bottom: 8px; }
.courses-caddie #courses-pris { margin-top: 0; }
/* « Finir les courses » sous le caddie et la fenêtre « Courses passées » (COURSES_V2, lot D). */
.courses-finir { display: block; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 10px 18px; border: 1px solid var(--marine); border-radius: 10px; background: var(--blanc); color: var(--marine); font-weight: 600; }
.courses-finir:hover { background: var(--pastille); }
/* La croix « Retirer de la liste » (lot D4) : cachée quand le pointeur principal est un doigt, où le balayage fait ce geste. */
.retirer-ligne { flex: none; width: 36px; height: 36px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gris); font-size: 22px; line-height: 1; opacity: .6; }
.courses-ligne:hover .retirer-ligne, .retirer-ligne:focus-visible { opacity: 1; }
.retirer-ligne:hover { background: var(--survol); color: var(--retard); }
@media (pointer: coarse) { .retirer-ligne { display: none; } }
/* « Voir » (TD-118) : la ligne montrée est soulignée d'un fond doré pendant deux secondes (app.js retire la classe), sans
   animation (charte : seules les apparitions de 150 à 200 ms) ; elle s'arrête sous l'en-tête en défilant. */
li.tache.montree { scroll-margin-top: 120px; background: var(--ambre-pale); box-shadow: inset 0 0 0 2px var(--ambre); }
#agenda-grille [data-jour] { scroll-margin-top: 16px; }
.version-kolvaya { margin: 12px 0 0; text-align: center; font-size: 13px; }
.courses-passees-lien { display: block; margin: 12px auto 0; text-decoration: underline; text-underline-offset: 3px; }
.courses-passees { max-height: calc(100dvh - 32px); }
.courses-passees input[type="search"] { width: 100%; min-height: 44px; margin: 0 0 4px; }
.passees-mois { border-bottom: 1px solid var(--separateur); }
.passees-mois > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 52px; padding: 14px 0 12px 22px; position: relative; cursor: pointer; font-size: 17px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--texte); }
.passees-mois > summary::-webkit-details-marker { display: none; }
.passees-mois > summary::before { content: '▸'; position: absolute; left: 2px; top: 15px; font-size: 14px; color: var(--marine); }
.passees-mois[open] > summary::before { content: '▾'; }
.passees-mois > summary .passees-quand { font-family: var(--serif); font-size: 21px; }
.passees-tickets-du-mois { margin: 0 0 8px 16px; }
.passees-tickets-du-mois .passees-ticket:last-child { border-bottom: 0; }
.passees-ticket { border-bottom: 1px solid var(--separateur); }
.passees-ticket > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 52px; padding: 12px 0 10px 22px; position: relative; cursor: pointer; font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--texte); }
.passees-ticket > summary::-webkit-details-marker { display: none; }
.passees-ticket > summary::before { content: '▸'; position: absolute; left: 2px; top: 13px; font-size: 14px; color: var(--marine); }
.passees-ticket[open] > summary::before { content: '▾'; }
.passees-quand { font-weight: 600; color: var(--marine); }
.passees-resume { color: var(--gris); font-size: 14px; }
.passees-ticket .passees-articles { margin: 0 0 10px 22px; }
.passees-ticket .passees-articles li:last-child { border-bottom: 0; }
.passees-articles { list-style: none; margin: 0; padding: 0; }
.passees-articles li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--separateur); }
.passees-nom { min-width: 0; overflow-wrap: anywhere; }
.courses-passees .actions { justify-content: flex-end; margin-top: 16px; }
/* Les boutons de personnes en haut de « Tâches » et « Pour » dans la fiche (étape 4a). */
.filtres .filtre-membres { flex-basis: 100%; margin: 0; }
.pour-fiche { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.pour-fiche legend { font-size: 13px; font-weight: 600; color: var(--gris); padding: 0; margin-bottom: 6px; }
.choix-pour { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
label.chip-membre { margin: 0; font-size: 14px; font-weight: 500; min-height: 40px; cursor: pointer; position: relative; }
.choix-pour input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choix-pour label:has(input:checked) { background: var(--pastille); border-color: var(--marine); font-weight: 600; }
.choix-pour label:has(input:focus-visible) { outline: 2px solid var(--marine); outline-offset: 2px; }
/* Le menu du compte en groupes (étape 4a). */
.menu .menu-groupe { margin: 14px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.menu .menu-sortir { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .comprise:not([hidden]), .apparait, .fenetre-kolvaya[open], .bandeau-message { animation: none; }
  .foyer-carte, .foyer-mission, .barre-bas .icone, .courses-ligne, .courses-ligne .coche::before, .budget-barre > span { transition: none; }
}

/* Équité (CDC M02_Taches/EQUITE_MVP) : une carte par personne, sa couleur en pastille devant le prénom, jamais en lettres. */
#equite-membres { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.equite-membre { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 14px 16px; }
.equite-prenom { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; overflow-wrap: anywhere; }
.equite-pastille { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--couleur-membre, var(--gris-clair)); }
.equite-membre p { margin: 2px 0; overflow-wrap: anywhere; }
.equite-membre details { margin-top: 8px; }
.equite-membre summary { cursor: pointer; color: var(--marine); font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.equite-membre h3 { margin: 10px 0 4px; font-size: 14px; color: var(--gris); font-weight: 600; }
.equite-membre ul { list-style: none; margin: 0; padding: 0; }
.equite-membre li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; overflow-wrap: anywhere; }
.equite-membre li .quand { flex: none; color: var(--gris); font-size: 0.8125rem; }
/* Énergie lot 2 : les deux champs du tarif (prix et redevance) restent alignés quand un libellé passe sur deux lignes. */
#form-edition-compteur .ligne { align-items: end; }

/* Accueil cartes (CDC M13 FOYER_MVP, lot 2) : le bloc « Accueil (cet appareil) » des Paramètres. */
.accueil-reglage { list-style: none; margin: 8px 0 0; padding: 0; }
.accueil-reglage-ligne { display: flex; align-items: center; gap: 8px; }
.accueil-reglage-ligne .case { flex: 1; min-width: 0; margin: 0; }
.accueil-reglage-ligne .accueil-deplacer { flex: none; width: 44px; min-height: 44px; margin: 0; padding: 0; }
.accueil-reglage-ligne .accueil-deplacer:disabled { opacity: .35; }

/* Repas lot 2 (CDC M04_Repas, section du 24/10/2026) : la fenêtre « Copier une semaine passée » et ses semaines au choix. */
.copie-semaines { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.copie-semaine { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 6px; padding: 8px 12px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--blanc); color: var(--texte); font-size: 15px; font-weight: 500; cursor: pointer; }
.copie-semaine input { flex: none; width: auto; margin: 0; }
.copie-semaine:has(input:checked) { background: var(--pastille); border-color: var(--marine); font-weight: 600; }

/* Agenda .ics (CDC M06_Agenda/AGENDA_ABONNEMENTS, lot 2) : le bouton d'import et la fenêtre qui montre ce qui va entrer. */
.agenda-importer { margin: 0 0 10px; }
.importer-agenda-premiers { list-style: none; margin: 0 0 10px; padding: 0; }
.importer-agenda-premiers li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; overflow-wrap: anywhere; }
.importer-agenda-premiers .quand { flex: none; color: var(--gris); font-size: 0.8125rem; }
#importer-agenda-remarques p { margin: 0 0 6px; }

/* Activités lot 2 : la dépense d'une activité (même forme que la fenêtre des courses) et la liste des dépenses dans la fiche. */
#depense-activite { font-family: var(--sans); }
#depense-activite h2 { font-family: var(--sans); font-weight: 600; color: var(--texte); font-size: 22px; margin: 0 0 12px; overflow-wrap: anywhere; }
#depense-activite label { display: block; margin-bottom: 10px; min-width: 0; }
#depense-activite input, #depense-activite select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
#depense-activite .ligne { gap: 10px; }
#depense-activite-origine { margin: 0 0 10px; font-size: 14px; color: var(--gris); }
#depense-activite-erreur { margin: 0 0 8px; font-size: 14px; color: var(--retard); }
#depense-activite .actions button { min-height: 44px; }
#fiche-activite-depenses { margin-top: 4px; overflow-wrap: anywhere; }


/* Capture photo (CDC 01_Capture/PHOTO_MVP) : le bouton appareil photo, à côté du micro. */
.photo-bouton { flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--bordure); border-radius: 50%; background: var(--blanc); color: var(--marine); }
.photo-bouton:hover { background: var(--pastille); }
.photo-bouton[hidden] { display: none; }

/* Contacts lot 2 : les anniversaires (CDC M10_Contacts, section du 24/10/2026). Dans la case d'un jour : un petit libellé qui se coupe
   proprement ; dans le détail d'un jour : une ligne qui ouvre la fiche ; dans Contacts : une liste comme les autres fiches. */
.agenda-anniv { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--gris); }
@media (max-width: 640px) { .agenda-anniv { flex: 1; min-width: 0; font-size: 0.875rem; } }
.agenda-anniversaires { list-style: none; margin: 0 0 10px; padding: 0; }
.agenda-anniversaires li { margin: 2px 0; }
.agenda-anniversaires button { min-height: 44px; padding: 0 4px; text-align: left; overflow-wrap: anywhere; }
#contacts-anniversaires { margin-bottom: 12px; }
#contacts-anniversaires .nom { overflow-wrap: anywhere; }
#contact-naissance-phrase { margin: -4px 0 8px; }
#contact-rappel-anniversaire { margin: 0 0 8px; min-height: 44px; }

/* Véhicules lot 2 : les pleins (fiche du véhicule) et la fenêtre « Noter un plein ». */
#noter-plein label { display: block; margin-bottom: 10px; min-width: 0; }
#noter-plein input[type="text"], #noter-plein input[type="date"] { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
#noter-plein .ligne { gap: 10px; }
#noter-plein .actions button { min-height: 44px; }
#fiche-vehicule-conso { margin: 0 0 8px; overflow-wrap: anywhere; }
#fiche-vehicule-pleins .tache { align-items: center; }
#fiche-vehicule-pleins .tache > .corps { display: block; flex: 1 1 0; min-width: 0; width: auto; }
#fiche-vehicule-pleins .tache > button { flex: none; width: auto; min-height: 44px; }
#fiche-vehicule-propositions p { margin: 4px 0; overflow-wrap: anywhere; }

/* Échéances lot 2 : plusieurs rappels */
fieldset.rappels-echeance { border: 0; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
fieldset.rappels-echeance legend { padding: 0; margin-bottom: .2rem; font-size: .85rem; color: var(--discret, inherit); }
fieldset.rappels-echeance label.case { display: flex; flex-direction: row; align-items: center; gap: .4rem; min-height: 2.5rem; }
fieldset.rappels-echeance label.case input { width: auto; margin: 0; }
fieldset.rappels-echeance label:not(.case) { flex: 1 1 100%; }

/* Équité lot 2 : le choix de la période et le titre qui le suit. */
#equite-periodes { margin: 0 0 8px; flex-wrap: wrap; }
.equite-titre { margin: 4px 0 0; font-weight: 600; color: var(--marine); }
#equite-periodes .bascule[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); font-weight: 600; }

/* Contrats lot 2 : la phrase de synthèse de l'onglet Contrats et le bloc des prélèvements prévus du Budget. Couleurs de la feuille de style seulement. */
#contrats-total .synthese { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 4px 0 8px; overflow-wrap: anywhere; }
.budget-contrats-cadre { margin: 16px 0; }
.budget-contrats { background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre); padding: 0 14px; margin: 0; }
.budget-contrats > summary { min-height: 44px; display: flex; align-items: center; padding: 8px 0; color: var(--marine); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.budget-contrats-liste { list-style: none; margin: 0; padding: 0 0 10px; }
.budget-contrat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--pastille); }
.budget-contrat .nom { overflow-wrap: anywhere; }
.budget-contrat strong { color: var(--marine); white-space: nowrap; }
.budget-contrat .detail { grid-column: 1 / -1; font-size: 13px; overflow-wrap: anywhere; }
.budget-contrats-cadre > .aide { margin: 6px 4px 0; }

/* Socle, revue des fiches : le bloc « À revoir » et son bandeau « Annuler » (dans la fenêtre modale). */
.memoire-revue { display: block; background: var(--rose-pale); border-radius: 12px; padding: 12px 16px; }
.memoire-revue > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--serif); color: var(--marine); font-size: 19px; font-weight: 600; }
.memoire-revue > p { margin: 0 0 8px; }
.memoire-bandeau { bottom: 16px; z-index: 50; }

/* Repas lot 3 : le signalement d'une allergie ou d'une aversion (case de la grille, fiche de recette) et la fenêtre des moments. */
.case-repas .alerte-allergie { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #8a3b00; overflow-wrap: anywhere; }
p.alerte-allergie { margin: 0 0 8px; font-weight: 600; color: #8a3b00; }
#repas-moments .aide { margin: 0 0 10px; }
#contact-allergies-bloc textarea { min-height: 44px; }

/* Emporter lot 2 : restaurer depuis une archive */
.restaurer-detail { list-style: none; margin: 0 0 10px; padding: 0; }
.restaurer-detail li { padding: 3px 0; overflow-wrap: anywhere; }
#restaurer-remarques p { margin: 0 0 6px; overflow-wrap: anywhere; }
#restaurer-confirmer { display: flex; flex-direction: row; align-items: center; gap: .5rem; min-height: 2.75rem; margin: 0 0 8px; }
#restaurer-confirmer input { width: auto; margin: 0; }

/* Énergie lot 3 : l'écran « Sur une période… » et la ligne « Compteur remplacé ». */
#energie-periode { margin-top: 12px; }
#energie-periode-resultat { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
#energie-periode-raccourcis { flex-wrap: wrap; margin-top: 8px; }
#energie-periode .aide, #energie-periode .avertissement, #remplacement-avertissement { overflow-wrap: anywhere; }
.mois-periode { margin-top: 8px; }
.ligne-mois { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--pastille); font-size: 14px; }
.ligne-mois .valeur, .ligne-mois .cout { text-align: right; white-space: nowrap; }
.ligne-mois .cout { color: var(--marine); min-width: 4.5em; }
li.remplacement .nom { color: var(--marine); }
#compteur-remplace { align-self: flex-start; }

/* Habitudes lot 2 : la fenêtre « Corriger l'habitude ». */
#habitude-corriger .aide { margin: 0 0 10px; overflow-wrap: anywhere; }
#habitude-corriger label { display: block; margin-bottom: 10px; }
#habitude-corriger select, #habitude-corriger input { width: 100%; min-height: 44px; }

/* Semaine posée (CDC 00_Socle/MOTEUR, marche 3) : le bouton de « Tâches » et la fenêtre des propositions. */
.semaine-pose { margin: 0 0 8px; }
#semaine { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
#semaine-resume { margin: 0 0 10px; overflow-wrap: anywhere; }
.semaine-lignes { list-style: none; margin: 0 0 10px; padding: 0; }
.semaine-ligne { padding: 10px 0; border-top: 1px solid var(--pastille); }
.semaine-ligne:first-child { border-top: 0; }
.semaine-ligne .semaine-titre { display: block; font-weight: 700; overflow-wrap: anywhere; }
.semaine-ligne .choix { display: block; color: var(--marine); font-weight: 600; margin: 2px 0; overflow-wrap: anywhere; }
.semaine-ligne .pourquoi { margin: 0 0 8px; overflow-wrap: anywhere; }
.semaine-ligne .reglages { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.semaine-ligne select { min-height: 44px; flex: 1 1 140px; min-width: 0; }
.semaine-ligne button { flex: none; min-height: 44px; }
.semaine-ligne .appliquee { font-weight: 600; color: var(--marine); }
.semaine-ligne .refus { margin: 6px 0 0; color: #8a3b00; font-size: 14px; }