/* Les écrans du front — direction C « Poche » (15/10, `docs/front/maquettes-v3/c.html`),
   sur la structure validée le 05/10 (`docs/front/maquettes.html`). S'ajoute à style.css
   (le pont des jetons) et marque.css (polices, coquille). AUCUNE couleur ici : que des
   jetons `--sc-…` du thème choisi (mesurés, `front/themes.py`).

   Le vocabulaire C : une page est une FEUILLE ; un bloc est une TUILE arrondie (fond en
   retrait, ou la couleur douce de sa rubrique) ; une ligne d'une tuile est une CARTE
   blanche posée dessus ; les gestes sont des PILULES (44 px, la cible tactile). Chaque
   rubrique a sa couleur, partout : rendez-vous (rdv), ce qui t'attend (attente), à
   vérifier (verif), cette nuit (nuit), contenu, déposer. Ce qui est mécanique est replié
   (`details.replie`). */

main.ecran {
  max-width: 76rem;
  margin: 0 auto;
  padding: 12px var(--gouttiere) 32px;
}

.titre-page {
  font-family: var(--police-titre);
  font-size: clamp(2.1rem, 5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}
.sous-titre { color: var(--sc-texte-2); margin: 0 0 18px; font-size: 1rem; font-weight: 500; }
.note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--sc-rayon-champ, 14px);
  background: var(--sc-surface-2);
  color: var(--sc-texte);
  font-size: 0.92rem;
}

/* Deux colonnes à partir de 900 px : les grandes tuiles à gauche, les étroites à
   droite (le « bento » de C). Sur téléphone, l'ordre du DOM — celui de la maquette. */
.colonnes { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .colonnes { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: start; }
}
.colonne { min-width: 0; }

/* La tuile. */
.bloc {
  background: var(--sc-surface-2);
  border: 0;
  border-radius: var(--sc-rayon-tuile, 24px);
  padding: 18px 18px 16px;
  margin: 0 0 14px;
  min-width: 0;
}
.bloc > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  margin: 0 0 10px;
}
.bloc > h2 .icone { width: 20px; height: 20px; flex: none; }
.compte {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--sc-rayon-pastille);
  font-family: var(--police-texte);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--sc-texte);
  background: var(--sc-surface);
}

/* Les rubriques : la tuile prend la couleur douce, son titre la teinte qui se lit. Une
   sous-section d'une tuile (« Tu avais promis » dans « Ce qui t'attend ») n'a pas de fond. */
.bloc.sous { background: transparent; padding: 0; margin: 14px 0 0; border-radius: 0; }
.bloc.sous > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 8px; }
.bloc > h2 + .bloc.sous { margin-top: 0; }
.bloc.rdv, .aujourdhui #agenda, .annonce { background: var(--sc-rdv-doux); }
.bloc.rdv > h2, .aujourdhui #agenda > h2 { color: var(--sc-rdv-encre); }
.aujourdhui .attente-tuile { background: var(--sc-attente-doux); }
.aujourdhui .attente-tuile > h2, .aujourdhui .attente-tuile h3 { color: var(--sc-attente-encre); }
.bloc.or, .bloc.verif { background: var(--sc-verif-doux); }
.bloc.or > h2, .bloc.verif > h2 { color: var(--sc-verif-encre); }
.bloc.nuit, .aujourdhui .nuit-tuile { background: var(--sc-nuit-doux); }
.bloc.nuit > h2, .aujourdhui .nuit-tuile > h2, .aujourdhui .nuit-tuile h3 { color: var(--sc-nuit-encre); }
.bloc.contenu, .aujourdhui #a-lire { background: var(--sc-contenu-doux); }
.bloc.contenu > h2, .aujourdhui #a-lire > h2 { color: var(--sc-contenu-encre); }

/* Une ligne = une carte posée sur la tuile. */
.lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ligne {
  padding: 14px 16px;
  border: 0;
  border-radius: var(--sc-rayon-carte, 20px);
  background: var(--sc-surface);
  overflow-wrap: anywhere;
  min-width: 0;
}
.lignes > .ligne:first-child { padding-top: 14px; }
.ligne p { margin: 0 0 4px; }
.quoi { font-weight: 600; color: var(--sc-texte); }
a.quoi { color: var(--sc-accent-encre); }
.meta { color: var(--sc-texte-2); font-size: 0.86rem; }
.meta a { color: var(--sc-texte-2); text-decoration-color: var(--sc-bordure-forte); }
.meta a:hover { color: var(--sc-accent-encre); }
.surtitre {
  color: var(--sc-verif-encre);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.doute { color: var(--sc-attention-encre); font-size: 0.9rem; }
.pour { font-size: 0.92rem; color: var(--sc-texte); }
.garde { font-size: 0.95rem; }
.deja { color: var(--sc-succes-encre); font-size: 0.88rem; font-weight: 600; }
.ligne.repondu { background: color-mix(in srgb, var(--sc-surface) 70%, transparent); }
.ligne.repondu .quoi { color: var(--sc-texte-2); font-weight: 500; }

.extrait {
  margin: 6px 0 8px;
  padding: 2px 12px;
  border-left: 3px solid var(--sc-verif);
  color: var(--sc-texte-2);
  font-style: italic;
  font-size: 0.92rem;
}

/* Les pastilles (chips) : l'activité, un retard, « nouvelle ». */
.pastille {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  font-family: var(--police-texte);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 11px;
  padding: 0 9px;
  margin: 0 4px 2px 0;
  border: 0;
  color: var(--sc-texte-2);
  background: var(--sc-surface-2);
  white-space: nowrap;
}
.ligne .pastille { background: var(--sc-surface-2); }
.pastille.activite { color: var(--sc-accent-encre); background: var(--sc-accent-doux); }
.pastille.retard { color: var(--sc-attente-sur); background: var(--sc-attente); }
.pastille.neuf { color: var(--sc-nuit-encre); background: var(--sc-nuit-doux); }
.pastille.oui { color: var(--sc-succes-encre); background: var(--sc-succes-doux); }
/* 19/10 — l'agenda en direct : « ajouté depuis ce matin », « passé » ; le pied « fraîcheur ». */
.pastille.ajoute { color: var(--sc-nuit-encre); background: var(--sc-nuit-doux); }
.ligne.passe { opacity: 0.7; }
.fraicheur { margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.fraicheur .meta { margin: 0; }
.fraicheur .actualiser { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.fraicheur .actualiser form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.fraicheur button:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.fraicheur .raison { color: var(--sc-texte-2); font-size: 0.85rem; }

/* Les gestes : des pilules. Le premier plein, le deuxième blanc, le troisième discret.
   44 px de haut : la cible tactile. Les liens « bouton » prennent la même forme. */
.gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; align-items: center; }
.gestes form { margin: 0; }
.gestes .pourquoi-google { color: var(--sc-texte-2); font-size: 0.85rem; }
button, a.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 22px;
  background: var(--sc-accent);
  color: var(--sc-accent-sur);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
button.second, a.bouton.second {
  background: var(--sc-surface);
  color: var(--sc-texte);
  box-shadow: inset 0 0 0 1px var(--sc-bordure-forte);
}
a.bouton.discret, button.discret {
  background: transparent;
  color: var(--sc-texte-2);
  box-shadow: inset 0 0 0 1px var(--sc-bordure-forte);
}
.ligne button.second, .ligne a.bouton.second { background: var(--sc-surface-2); box-shadow: none; }
a.bouton:hover, button:hover { filter: brightness(1.06); }
button.discret:hover, a.bouton.discret:hover { color: var(--sc-texte); filter: none; }
@media (max-width: 420px) {
  .gestes button, .gestes a.bouton { white-space: normal; text-align: center; }
}

/* Une place proposée : la case et sa phrase. */
label.place { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; }
label.place input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--sc-accent); }

/* Le repli : la mécanique, à un geste. */
details.replie {
  border: 0;
  border-radius: var(--sc-rayon-carte);
  padding: 12px 16px;
  margin: 10px 0 0;
  background: var(--sc-surface-2);
}
details.replie > summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 28px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.replie > summary::-webkit-details-marker { display: none; }
details.replie > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin: 0 4px 0 2px;
}
details.replie[open] > summary::before { transform: rotate(45deg); }
details.replie .dedans { padding-top: 10px; font-size: 0.94rem; color: var(--sc-texte); }
details.replie .dedans p { margin: 0 0 8px; }
.ligne details.replie, .bloc details.replie { background: var(--sc-surface); }

/* Le bandeau du geste (style.css) : sa phrase sur une ligne, l'« Annuler » de
   la revue à côté. */
.bandeau { margin: 0 0 16px; }
.bandeau-revue { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; white-space: normal; }
.bandeau-revue p { margin: 0; }
.bandeau-revue form { margin: 0; }

/* ===========================================================================
   Personnes et clients, la fiche, Projets, Réglages, les filtres.
   =========================================================================== */

.tete-page { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 4px; }
.tete-page .gestes { margin: 0 0 10px; }
.ariane { font-size: 0.86rem; color: var(--sc-texte-2); margin: 0 0 8px; font-weight: 500; }
.ariane a { color: var(--sc-texte-2); }

/* Les filtres : Tout · Personnes · … · une activité. Des liens en puces, l'actif plein. */
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.puce {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--sc-rayon-carte);
  background: var(--sc-surface-2);
  color: var(--sc-texte-2);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.puce.activite::before { content: "·\00a0"; }
.puce[aria-current="page"] { background: var(--sc-texte); color: var(--sc-surface); }

/* L'annonce de la fiche : le prochain rendez-vous, et les gestes. */
.annonce {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--sc-rayon-tuile, 24px);
  padding: 14px 18px;
  margin: 0 0 14px;
}
.annonce .gestes { margin: 0; }
.annonce b { color: var(--sc-rdv-encre); }
form.en-ligne { display: inline; margin: 0; }
.quand { color: var(--sc-rdv-encre); }

/* Deux tuiles côte à côte (« Tu lui dois » · « De son côté ») à partir de 700 px. */
.deux { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Une carte clé → valeur : le contact, l'affaire. */
.cle-valeur { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 4px 0 8px; }
.cle-valeur dt { color: var(--sc-texte-2); font-size: 0.9rem; }
.cle-valeur dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cle-valeur a.src, .cle-valeur a.lien { font-weight: 500; }
a.src { text-decoration: none; color: var(--sc-texte-2); font-size: 0.85rem; }

/* Les renvois d'une phrase rédigée : de petits numéros, pas des liens en clair. */
sup.src { font-size: 0.7rem; font-weight: 700; margin-left: 2px; }
sup.src a { color: var(--sc-accent-encre); text-decoration: none; }
ol.sources, ul.public, ul.resumes { margin: 0; padding-left: 18px; }
ol.sources li, ul.public li, ul.resumes li { margin: 0 0 6px; overflow-wrap: anywhere; }
ol.sources { list-style: none; padding-left: 0; }

.pied { color: var(--sc-texte-2); font-size: 0.85rem; border-top: 1px solid var(--sc-bordure); padding-top: 10px; margin: 16px 0 0; }
.bloc.grise { color: var(--sc-texte-2); }
.bloc.grise > h2 { color: var(--sc-texte-2); }
.lignes.serrees { gap: 6px; }
.lignes.serrees > .ligne { padding: 10px 14px; }
details.replie h3 { font-size: 1.05rem; margin: 14px 0 6px; display: flex; gap: 8px; align-items: center; }
details.replie + details.replie { margin-top: 10px; }

/* « Tout ce que je sais » : une info, sa case quand on corrige. */
.ligne.info.avec-case { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 4px; }
.cocher { display: flex; align-items: flex-start; justify-content: center; min-height: 44px; margin: 0; padding-top: 2px; cursor: pointer; }
.cocher input { width: 20px; height: 20px; margin: 0; accent-color: var(--sc-accent); }
.pages { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; margin: 12px 0; font-size: 0.9rem; color: var(--sc-texte-2); }
.pages a { padding: 8px 4px; }
/* Le panneau des gestes de la revue (`front/navigateur.py`), repris tel quel. */
.gestes-revue { margin: 20px 0 0; padding: 16px; background: var(--sc-accent-doux); border: 0; border-radius: var(--sc-rayon-tuile, 24px); }
.gestes-revue h2 { margin: 0 0 4px; font-size: 1.2rem; scroll-margin-top: 16px; }
.gestes-revue details { margin-top: 12px; border-top: 1px solid var(--sc-bordure); padding-top: 10px; }
.gestes-revue summary { cursor: pointer; min-height: 32px; font-weight: 600; color: var(--sc-accent-encre); }
.gestes-revue label, .fusion label { margin-top: 10px; }
.gestes-revue select, .fusion input, .gestes-revue input[type="text"] { width: 100%; }
.entree-cachee { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; }

/* Projets : une tuile par projet. */
.cartes-projets { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cartes-projets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cartes-projets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte-projet {
  background: var(--sc-rdv-doux);
  border: 0;
  border-radius: var(--sc-rayon-tuile, 24px);
  padding: 18px;
  overflow-wrap: anywhere;
}
.carte-projet h2 { font-size: 1.3rem; margin: 0 0 8px; }
.carte-projet h2 a { color: var(--sc-rdv-encre); text-decoration: none; }
.carte-projet h2 a:hover { text-decoration: underline; }
.carte-projet .marques { margin: 0 0 8px; }
.carte-projet .marques .pastille { background: var(--sc-surface); }
.carte-projet p { margin: 0 0 6px; }
a.pastille { text-decoration: none; }

/* La carte d'identité d'une fiche (personne, entreprise, projet) : grande initiale,
   nom, rôle, et les gestes. */
.carte-id {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
  padding: 18px;
  margin: 0 0 14px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--sc-rdv-doux), var(--sc-attente-doux));
}
.carte-id .avatar {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sc-accent);
  color: var(--sc-accent-sur);
  font: 700 24px/1 var(--police-titre);
}
.carte-id .titre-page { margin: 0; align-self: end; }
.carte-id .sous-titre { margin: 0; align-self: start; }
.carte-id .ariane, .carte-id .annonce { grid-column: 1 / -1; }
.carte-id .ariane { margin: 0 0 4px; order: -1; }
.carte-id .annonce { margin: 8px 0 0; padding: 12px 14px; background: color-mix(in srgb, var(--sc-surface) 72%, transparent); }
.carte-id .annonce .gestes button:not(.discret) { background: var(--sc-accent); }
@media (min-width: 700px) {
  .carte-id { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 22px; padding: 26px; }
  .carte-id .avatar { width: 96px; height: 96px; font-size: 34px; }
}

/* ===========================================================================
   Réglages, en UNE colonne (C : la liste groupée façon réglages de téléphone).
   Un groupe = une ligne (pastille de couleur, titre, résumé d'une ligne, « Modifier »
   discret) qui s'ouvre EN PLACE (`details`, sans script).
   =========================================================================== */

main.reglages { max-width: 46rem; }
body:has(.entete-ecrans) > main.ecran.reglages { padding-inline: max(34px, calc((100% - 44rem) / 2)); }

.profil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 16px 18px;
  margin: 12px 0 24px;
  border-radius: var(--sc-rayon-tuile, 24px);
  background: var(--sc-surface-2);
}
.profil .avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--sc-accent);
  color: var(--sc-accent-sur);
  font: 700 18px/1 var(--police-titre);
}
.profil .qui { min-width: 0; flex: 1 1 10rem; }
.profil .qui b { display: block; font: 700 1.15rem/1.2 var(--police-titre); overflow-wrap: anywhere; }
.profil .qui span { color: var(--sc-texte-2); font-size: 0.9rem; }
.profil form { margin: 0; }
.segment {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin: 0;
  border: 0;
  border-radius: var(--sc-rayon-champ);
  background: var(--sc-surface);
}
.segment legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.segment button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--sc-rayon-pastille);
  background: transparent;
  color: var(--sc-texte-2);
  font-size: 0.86rem;
}
.segment button[aria-pressed="true"] { background: var(--sc-texte); color: var(--sc-surface); }

.etiquette { font-size: 0.82rem; font-weight: 600; color: var(--sc-texte-2); margin: 0 0 8px 16px; }

.groupe-liste {
  margin: 0 0 22px;
  border-radius: 22px;
  background: var(--sc-surface-2);
  overflow: hidden;
}
.groupe-liste > * + * { border-top: 1px solid var(--sc-bordure); }

details.ouvrable > summary { list-style: none; cursor: pointer; }
details.ouvrable > summary::-webkit-details-marker { display: none; }
.ligne-reglage {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: center;
  padding: 14px 16px;
  min-height: 44px;
}
.ligne-reglage:hover { background: color-mix(in srgb, var(--sc-surface) 50%, transparent); }
.ligne-reglage .pastille-rubrique {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--sc-rayon-pastille, 12px);
}
.pastille-rubrique .icone { width: 18px; height: 18px; }
.pastille-rubrique.r-verif { background: var(--sc-verif); color: var(--sc-verif-sur); }
.pastille-rubrique.r-rdv { background: var(--sc-rdv); color: var(--sc-rdv-sur); }
.pastille-rubrique.r-nuit { background: var(--sc-nuit); color: var(--sc-nuit-sur); }
.pastille-rubrique.r-attente { background: var(--sc-attente); color: var(--sc-attente-sur); }
.pastille-rubrique.r-contenu { background: var(--sc-contenu); color: var(--sc-contenu-sur); }
.pastille-rubrique.r-neutre { background: var(--sc-texte-2); color: var(--sc-surface); }
.ligne-reglage h2 {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ligne-reglage .resume { grid-column: 2; margin: 0; color: var(--sc-texte-2); font-size: 0.9rem; line-height: 1.35; }
.ligne-reglage .modifier-lien {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 6px 10px;
  border-radius: 10px;
  color: var(--sc-texte-2);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}
.ligne-reglage .modifier-lien::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 4px;
}
details.ouvrable[open] > .ligne-reglage .modifier-lien::after { transform: rotate(45deg); }
details.ouvrable[open] > .ligne-reglage .modifier-lien .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
details.ouvrable > .ligne-reglage:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: -2px; border-radius: 22px; }
.deplie { padding: 0 16px 18px 68px; }
.deplie > :first-child { margin-top: 0; }
@media (max-width: 600px) {
  .deplie { padding: 0 12px 16px; }
  .ligne-reglage .resume { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ligne-reglage { grid-template-columns: 38px minmax(0, 1fr); }
  .ligne-reglage .modifier-lien { grid-column: 2; grid-row: auto; justify-self: start; padding-left: 0; }
}

/* Les cartes de réglage (`gabarits.carte_reglage`) et les sections venues d'ailleurs,
   posées dans la ligne ouverte. */
.deplie .reglage { background: var(--sc-surface); border: 0; border-radius: var(--sc-rayon-carte); padding: 16px; margin: 0 0 10px; }
.deplie .reglage h2 { font-size: 1rem; font-family: var(--police-texte); font-weight: 600; letter-spacing: 0; }
.deplie .cadres { border: 0; padding: 0; margin: 0; background: transparent; }
.deplie .cadres > h2 { display: none; }
.deplie .gestes:first-child { margin-top: 0; }
.presenter .cadres, .modifier .cadres { border: 0; padding: 0; margin: 0; background: transparent; }
.presenter .cadres > h2, .modifier .cadres > h2 { display: none; }
.modifier .reglage { background: var(--sc-surface); }

/* « Tes routines » (Réglages) : une carte par routine, son aperçu, ses champs ; un seul bouton en bas. */
.routines-reglees fieldset.routine { background: var(--sc-surface); border: 0; border-radius: var(--sc-rayon-carte);
  padding: 16px; margin: 0 0 10px; min-width: 0; }
.routines-reglees fieldset.routine > legend { font-weight: 600; padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.routines-reglees .apercu { clear: both; color: var(--sc-texte-2); margin: 0 0 10px; }
.routines-reglees .champ { margin: 0 0 8px; }
.routines-reglees .champ > label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.routines-reglees .champ input[type="text"] { max-width: 12rem; }
.routines-reglees fieldset.cases { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap;
  gap: 4px 14px; }
.routines-reglees fieldset.cases > legend { padding: 0; margin-bottom: 4px; color: var(--sc-texte-2); width: 100%; }
.routines-reglees fieldset.jours label { text-transform: capitalize; }
/* Une pastille suit un nom : un espace, la police du texte (même dans un titre). */
.ligne > a + .pastille, .ligne > span + .pastille, h2 .pastille { margin-left: 6px; }

/* Agendas : vide, branché, refusé, succès (C, « Parcours agenda »). */
.agendas-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.agenda-c {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--sc-rayon-champ);
  background: var(--sc-surface);
}
.agenda-c .point { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--sc-succes-encre); }
.agenda-c.en-echec .point { background: var(--sc-attention-encre); }
.agenda-c .nom { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.agenda-c .info { grid-column: 2; color: var(--sc-texte-2); font-size: 0.86rem; overflow-wrap: anywhere; }
.agenda-c .info.apres { grid-column: 1 / -1; }
.agenda-c form.retirer { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.agenda-c form.retirer button { background: transparent; color: var(--sc-erreur-encre); box-shadow: none; padding: 0 8px; }
.agenda-c.neuf { box-shadow: 0 0 0 2px var(--sc-succes-encre); }
/* « Tes agendas » (16/10) : deux parties, lire puis écrire, dans la même ligne ouverte. */
.partie-agendas { margin: 0 0 18px; }
.partie-agendas:last-child { margin-bottom: 0; }
.partie-agendas > h3 { font-family: var(--police-texte); font-size: 0.95rem; font-weight: 700; letter-spacing: 0;
  margin: 0 0 6px; color: var(--sc-texte); overflow-wrap: anywhere; }
.partie-agendas + .partie-agendas { padding-top: 14px; border-top: 1px solid var(--sc-surface-2); }
.meta.usages b { color: var(--sc-texte); }
.meta.renvoi { margin-top: 4px; }
.chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 11px; font-size: 0.72rem; font-weight: 700; }
.chip.pro { background: var(--sc-rdv-doux); color: var(--sc-rdv-encre); }
.chip.perso { background: var(--sc-attente-doux); color: var(--sc-attente-encre); }
.chip.echec { background: var(--sc-attention-doux); color: var(--sc-attention-encre); }

.vide-c { text-align: center; padding: 14px 10px 6px; }
.vide-c .icone-vide {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: var(--sc-rayon-carte);
  background: var(--sc-attente-doux);
  color: var(--sc-attente-encre);
}
.vide-c .icone-vide .icone { width: 24px; height: 24px; }
.vide-c p { color: var(--sc-texte-2); margin: 0 auto 6px; max-width: 26rem; }
.vide-c p b { display: block; color: var(--sc-texte); font: 700 1.05rem/1.3 var(--police-titre); margin-bottom: 4px; }

.succes-c {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  margin: 0 0 10px;
  border-radius: var(--sc-rayon-champ);
  background: var(--sc-succes-doux);
  font-size: 0.92rem;
}
.succes-c .ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--sc-succes);
  color: var(--sc-succes-sur);
}
.succes-c .ic .icone { width: 16px; height: 16px; }
.succes-c b { color: var(--sc-succes-encre); }

.formulaire-c {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--sc-rayon-carte);
  background: var(--sc-surface);
}
.formulaire-c h3 { margin: 0 0 12px; font-size: 1rem; }
.champ { margin: 0 0 14px; }
.champ > label { display: block; font-weight: 600; font-size: 0.9rem; margin: 0 0 6px; }
.champ input[type="text"], .champ input[type="password"] {
  min-height: 48px;
  border-radius: var(--sc-rayon-champ, 14px);
  border: 2px solid var(--sc-bordure-forte);
  background: var(--sc-surface-2);
}
.champ input[aria-invalid="true"] { border-color: var(--sc-erreur-encre); background: var(--sc-erreur-doux); }
.champ .aide { font-size: 0.82rem; color: var(--sc-texte-2); margin: 6px 0 0; }
.erreur-sous {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  margin: 8px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--sc-texte);
}
.erreur-sous .ic {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sc-erreur);
  color: var(--sc-erreur-sur);
  font: 800 13px/1 var(--police-titre);
}
.erreur-sous b { color: var(--sc-erreur-encre); }
.choix2 { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.choix2 legend { font-weight: 600; font-size: 0.9rem; padding: 0; margin: 0 0 6px; }
.choix2-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: var(--sc-rayon-champ); background: var(--sc-surface-2); }
.choix2 label.choix {
  display: block;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--sc-rayon-pastille);
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--sc-texte-2);
  line-height: 1.3;
}
.choix2 label.choix b { display: block; font-size: 0.92rem; color: var(--sc-texte); }
.choix2 label.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix2 label.choix:has(input:checked) { background: var(--sc-surface); box-shadow: var(--sc-ombre); outline: 2px solid var(--sc-attente-encre); }
.choix2 label.choix:has(input:focus-visible) { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
@media (max-width: 600px) { .choix2-options { grid-template-columns: 1fr; } }
.formulaire-c .gestes button[type="submit"] { width: 100%; }

/* Les thèmes : un aperçu par thème, ses couleurs à lui en clair ET en sombre — chaque
   moitié redéclare les jetons de SON thème (`/themes-apercus.css`), la page n'en porte
   aucune. Choisi d'un geste (un bouton par thème). */
.themes { margin: 0; }
.themes-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.themes-choix legend { font-weight: 600; font-size: 0.9rem; margin: 0 0 8px; padding: 0; }
button.theme-apercu {
  display: grid;
  gap: 8px;
  justify-content: stretch;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--sc-rayon-champ);
  background: var(--sc-surface);
  color: var(--sc-texte);
  box-shadow: inset 0 0 0 1px var(--sc-bordure-forte);
  text-align: left;
  white-space: normal;
}
button.theme-apercu[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--sc-texte); }
.theme-apercu .nom { font-weight: 600; }
.theme-apercu .moities { display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; overflow: hidden; }
.theme-apercu .moitie { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px 6px; background: var(--sc-fond); }
.theme-apercu .moitie span { width: 13px; height: 13px; border-radius: 50%; }
.theme-apercu .t-rdv { background: var(--sc-rdv); }
.theme-apercu .t-attente { background: var(--sc-attente); }
.theme-apercu .t-verif { background: var(--sc-verif); }
.theme-apercu .t-nuit { background: var(--sc-nuit); }
.theme-apercu .t-contenu { background: var(--sc-contenu); }

/* 06/10 — le choix d'apparence (cases de repli) : les cases prennent l'accent. */
.choix-apparence input { accent-color: var(--sc-accent); width: 18px; height: 18px; margin-right: 6px; }

/* La recherche et les écrans simples : les lignes nues dans des tuiles. */
section.bloc > .lignes > .ligne { box-shadow: none; }

/* Aujourd'hui (C) : les rendez-vous en cartes — côte à côte sur ordinateur, qui défilent
   à l'horizontale (aimantées) sur téléphone ; la grande heure en Bricolage. */
.aujourdhui #agenda .lignes { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
@media (max-width: 899px) {
  .aujourdhui #agenda .lignes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: -18px;
    padding-right: 18px;
  }
  .aujourdhui #agenda .lignes > .ligne { scroll-snap-align: start; }
}
.aujourdhui #agenda .ligne .quoi { font-family: var(--police-titre); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.aujourdhui .titre-page { margin-top: 4px; }

/* La fiche (C) : « Tu lui dois » prend la couleur de « ce qui t'attend ». */
.fiche .deux > .bloc:first-child { background: var(--sc-attente-doux); }
.fiche .deux > .bloc:first-child > h2 { color: var(--sc-attente-encre); }

/* Tes connexions (16/10) : une ligne par fournisseur, son état, ses gestes. */
.connexions-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.connexion-c {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--sc-rayon-champ);
  background: var(--sc-surface);
}
.connexion-c .point { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--sc-texte-3); }
.connexion-c.connecte .point { background: var(--sc-succes-encre); }
.connexion-c.a_reconnecter .point { background: var(--sc-attention-encre); }
.connexion-c .corps { min-width: 0; }
.connexion-c .nom { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.connexion-c .info { color: var(--sc-texte-2); font-size: 0.86rem; margin: 2px 0 0; overflow-wrap: anywhere; }
.connexion-c .gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.connexion-c .gestes form { margin: 0; }
.chip.etat-cx { background: var(--sc-surface-2); color: var(--sc-texte-2); }
.connexion-c.connecte .chip.etat-cx { background: var(--sc-succes-doux); color: var(--sc-succes-encre); }
.connexion-c.a_reconnecter .chip.etat-cx { background: var(--sc-attention-doux); color: var(--sc-attention-encre); }
.connexion-c input[type="password"], .connexion-c input[type="text"] { width: 100%; max-width: 100%; box-sizing: border-box; }

/* « Qui est-ce ? » (16/10) : une ligne par inconnu — ce qu'il est, d'où il vient, ce que je
   propose et pourquoi — puis trois choix en verbes. */
.qui-est-ce .quoi { font-weight: 600; overflow-wrap: anywhere; }
.qui-est-ce .provenance { margin: 2px 0 0; overflow-wrap: anywhere; }
.qui-est-ce .propose { margin: 4px 0 0; color: var(--sc-texte); overflow-wrap: anywhere; }
.choix-qui { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.choix-qui form { margin: 0; }
.qui-est-ce-carte .tout-valider { margin-top: 10px; }
.qui-est-ce-carte .aide-qui { margin-top: 10px; }

/* Les pages du squelette `gabarits._page` : la porte (entrée, lien de connexion, panne) tient dans une colonne
   étroite ; les réglages d'accès, dans une colonne de lecture. */
.ecran.porte {
  max-width: 34rem;
  margin: 6vh auto 32px;
  padding: 28px 24px 24px;
  background: var(--sc-surface);
  border-radius: var(--sc-rayon-feuille);
  box-shadow: var(--sc-ombre);
}
@media (max-width: 640px) { .ecran.porte { margin: 12px var(--gouttiere); padding: 22px 18px; } }
.ecran.gabarit { max-width: 52rem; }

/* 30/10 — Aujourd'hui : « À faire maintenant » et les rendez-vous du jour, côte à côte quand la place le permet. */
.a-faire-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.a-faire-liste .tache { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--sc-bordure); }
.a-faire-liste .tache.retard .quand { color: var(--sc-erreur-encre); font-weight: 600; }
.a-faire-liste .tache.sans-date .quand { color: var(--sc-texte-3); font-style: italic; }
.a-faire-liste form.dater input[type="date"] { min-height: 36px; padding: 0 8px; width: auto; }
.a-faire-liste .quand, .a-faire-liste .projet { font-size: 0.85rem; color: var(--sc-texte-2); }
.a-faire-liste .texte { flex: 1 1 14rem; }
.a-faire-liste .gestes { display: flex; gap: 4px; }

/* Un formulaire que le bouton de la tête de page ouvre (« + Nouveau contact », « Ajouter un projet ») : caché tant
   qu'on ne l'a pas demandé, pour ne pas montrer deux fois le même geste. Sans script : l'ancre (:target) l'affiche,
   un formulaire refusé ou en attente le garde (.ouvert). */
details.cible:not(:target):not(.ouvert) { display: none; }