/* Madeleine — refonte visuelle.
   Chargé après style.css : ce qui suit remplace ou complète la base. */

/* L'attribut `hidden` doit vraiment cacher.

   Le navigateur ne lui applique qu'un `display: none` de très faible priorité,
   que la moindre classe posant `display: flex` ou `grid` écrase sans bruit.
   Résultat : des blocs que le code croit masqués restent affichés, vides — on
   voyait ainsi en permanence sur l'accueil une carte de capsule sans capsule et
   un rappel sans rappel. Cette règle vaut pour toute l'application : sans elle,
   chaque nouveau `display:` sur un élément masquable rouvre le même bug. */
[hidden] { display: none !important; }

/* ================= BARRE HAUTE ================= */

.place-vide { width: 40px; flex-shrink: 0; }

.avatar-haut {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer; overflow: hidden;
  background: var(--fond-haut); border: 1.5px solid var(--trait);
  transition: transform .08s, border-color .15s;
}
.avatar-haut:active { transform: scale(.93); }
.avatar-haut svg, .avatar-haut img { display: block; width: 100%; height: 100%; }

/* ================= BOUTON FLOTTANT ================= */

/* En bas à DROITE, et nettement au-dessus de la barre d'onglets.
   Trop près du bas, il recouvrait le dernier élément de chaque liste. */
.fab-ecrire {
  position: fixed; z-index: 45;
  right: max(var(--gouttiere), calc(50% - 320px + var(--gouttiere)));
  bottom: calc(var(--bas) + env(safe-area-inset-bottom) + 28px);
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent),
              0 3px 10px rgba(0,0,0,.35);
  transition: transform .12s;
}
.fab-ecrire svg { width: 26px; height: 26px; }
.fab-ecrire:active { transform: scale(.9); }
body.plein-ecran .fab-ecrire { display: none; }

/* ================= HUMEUR ================= */

.humeur-jour { padding: 20px; border-radius: var(--rayon-grand); }
.humeur-question { font-size: 16px; margin-bottom: 16px; }
.humeur-choix { display: flex; gap: 8px; }
.humeur-btn {
  flex: 1; background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hb-pastille {
  width: 100%; height: 42px; border-radius: 13px;
  border: 2px solid transparent; transition: transform .12s, border-color .15s;
}
.humeur-btn:active .hb-pastille { transform: scale(.93); }
.humeur-btn[aria-pressed="true"] .hb-pastille {
  border-color: var(--texte);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--texte) 12%, transparent);
}
.hb-label { font-size: 10.5px; color: var(--texte-doux); text-align: center; line-height: 1.25; }
.humeur-btn[aria-pressed="true"] .hb-label { color: var(--texte); font-weight: 600; }

/* ================= ÉMOTIONS ================= */

.emo-groupe { margin-bottom: 18px; }
.emo-groupe-titre {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-doux); font-weight: 700; margin-bottom: 10px;
}
.emo-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.emo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 11px; border-radius: 999px; cursor: pointer;
  background: var(--fond-carte); border: 1.5px solid var(--trait);
  color: var(--texte-doux); font: inherit; font-size: 14px;
  transition: border-color .15s, color .15s;
}
.emo-point { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; transition: transform .15s; }
.emo[aria-pressed="true"] { color: var(--texte); font-weight: 600; }
.emo[aria-pressed="true"] .emo-point { transform: scale(1.3); }

/* ================= ÉCRITURE ================= */

.vue.ecriture { padding: 0 0 calc(20px + env(safe-area-inset-bottom)); }

.entete-ecriture {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; z-index: 30;
  padding: calc(14px + env(safe-area-inset-top)) var(--gouttiere) 12px;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(12px);
}
.etat-ecriture { font-size: 12.5px; color: var(--texte-doux); }

.page-blanche { padding: 10px var(--gouttiere) 0; }

.champ-titre {
  width: 100%; background: none; border: 0; padding: 0 0 12px;
  color: var(--texte); font-family: var(--police-journal);
  font-size: 26px; font-weight: 600; line-height: 1.25;
}
.champ-titre::placeholder { color: color-mix(in srgb, var(--texte-doux) 50%, transparent); }
.champ-titre:focus { outline: none; }

.champ-texte {
  min-height: 44vh; padding: 4px 0 20px; outline: none;
  font-family: var(--police-journal);
  font-size: var(--taille-corps); line-height: var(--interligne);
  color: var(--texte); word-break: break-word;
}
.champ-texte:empty::before {
  content: attr(data-vide);
  color: color-mix(in srgb, var(--texte-doux) 50%, transparent);
  white-space: pre-line; pointer-events: none;
}
.champ-texte mark, .detail .corps mark {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  color: inherit; border-radius: 3px; padding: 0 3px;
}
.champ-texte h3, .detail .corps h3 { font-size: 1.2em; margin: .8em 0 .3em; font-weight: 700; }
.champ-texte blockquote, .detail .corps blockquote {
  border-left: 3px solid var(--accent); padding-left: 15px;
  margin: .7em 0; color: var(--texte-doux); font-style: italic;
}
.champ-texte ul, .champ-texte ol,
.detail .corps ul, .detail .corps ol { padding-left: 1.4em; margin: .5em 0; }

/* Barre de mise en forme : n'apparaît qu'à la sélection */
.barre-format {
  position: fixed; z-index: 60; display: flex; gap: 2px; padding: 5px;
  background: var(--fond-haut); border: 1px solid var(--trait);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.barre-format[hidden] { display: none; }
.bf-btn {
  min-width: 36px; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: var(--texte); font: inherit; font-size: 15px;
}
.bf-btn[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }

.barre-ecriture {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 7px;
  padding: 11px var(--gouttiere) calc(11px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fond) 94%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--trait);
  margin-top: 20px;
}
.barre-espace { flex: 1; }
.oi {
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--trait); color: var(--texte-doux);
  transition: color .15s, border-color .15s, transform .08s;
}
.oi svg { width: 20px; height: 20px; }
.oi:active { transform: scale(.92); }
.oi.actif { color: var(--sur-accent); background: var(--accent); border-color: var(--accent); }

.details-entree { margin: 20px var(--gouttiere) 0; }
.bloc-vocal, .suggestions, .galerie, #etat-media { margin-left: var(--gouttiere); margin-right: var(--gouttiere); }

/* ================= PROFIL ================= */

.profil-tete { display: flex; gap: 18px; align-items: center; margin-bottom: 26px; }
.avatar-grand {
  width: 84px; height: 84px; border-radius: 50%; padding: 0; overflow: hidden;
  background: var(--fond-haut); border: 2px solid var(--trait);
  cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
.avatar-grand svg, .avatar-grand img { display: block; width: 100%; height: 100%; }
.profil-infos { flex: 1; min-width: 0; }
.profil-nom {
  width: 100%; background: none; border: 0; padding: 0 0 5px;
  color: var(--texte); font: inherit; font-size: 21px; font-weight: 600;
}
.profil-nom:focus { outline: none; border-bottom: 1px solid var(--accent); }
.profil-stats { display: flex; gap: 18px; font-size: 13px; color: var(--texte-doux); }
.profil-stats b { color: var(--texte); font-weight: 600; }

.menu-profil { display: flex; flex-direction: column; gap: 3px; }
.mp-ligne {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 14px; cursor: pointer; font: inherit; color: var(--texte);
  background: var(--fond-carte); border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.mp-ligne.actif { border-color: var(--accent); }
.mp-icone { font-size: 19px; flex-shrink: 0; width: 24px; text-align: center; }
.mp-corps { flex: 1; min-width: 0; }
.mp-titre { display: block; font-size: 15.5px; font-weight: 500; }
.mp-sous { display: block; font-size: 12.5px; color: var(--texte-doux); margin-top: 1px; }
.mp-fleche { color: var(--texte-doux); font-size: 20px; }


/* ================= APPARENCE ================= */

.grille-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choix-papier {
  cursor: pointer; border: 2px solid var(--trait); border-radius: 14px;
  overflow: hidden; background: none; padding: 0; font: inherit;
}
.choix-papier[aria-pressed="true"] { border-color: var(--accent); }
.cp-apercu { height: 50px; display: block; }
.cp-nom {
  display: block; font-size: 12px; padding: 7px 4px;
  background: var(--fond-haut); color: var(--texte-doux);
}
.choix-papier[aria-pressed="true"] .cp-nom { color: var(--texte); font-weight: 600; }

.grille-encres { display: flex; flex-wrap: wrap; gap: 11px; }
.choix-encre {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2.5px solid transparent; transition: transform .12s;
}
.choix-encre[aria-pressed="true"] { border-color: var(--texte); transform: scale(1.08); }

.choix-police {
  width: 100%; text-align: left; padding: 13px 15px; cursor: pointer;
  background: var(--fond-haut); border: 1.5px solid var(--trait);
  border-radius: var(--rayon); color: var(--texte); margin-bottom: 8px;
}
.choix-police[aria-pressed="true"] { border-color: var(--accent); }
.cpol-nom { display: block; font-size: 11.5px; color: var(--texte-doux); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .06em; }
.cpol-apercu { display: block; font-size: 17px; }

.segmente {
  display: flex; gap: 4px; padding: 4px; background: var(--fond-haut);
  border: 1px solid var(--trait); border-radius: 12px;
}
.seg {
  flex: 1; padding: 9px 4px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--texte-doux); font: inherit; font-size: 13px;
}
.seg[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); font-weight: 600; }

.grille-teintes { display: flex; flex-wrap: wrap; gap: 12px; }
.choix-teinte {
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer; padding: 3px;
  background: var(--fond-haut); border: 2px solid transparent;
}
.choix-teinte[aria-pressed="true"] { border-color: var(--accent); }
.choix-teinte svg { display: block; width: 100%; height: 100%; }

/* ================= SAUVEGARDE ================= */

.etat-sauvegarde {
  display: flex; align-items: center; gap: 13px; padding: 15px;
  background: var(--fond-haut); border: 1px solid var(--trait);
  border-radius: var(--rayon); margin-bottom: 14px;
}
.es-pastille { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.es-pastille.ok { background: var(--vert); }
.es-pastille.partiel { background: var(--accent); }
.es-corps { flex: 1; min-width: 0; }
.es-titre { font-size: 14.5px; font-weight: 600; }
.es-sous { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; }

/* ================= LISIBILITÉ DU JOURNAL ================= */

.detail .corps {
  font-family: var(--police-journal);
  font-size: var(--taille-corps); line-height: var(--interligne);
}
.capsule-lettre { font-family: var(--police-journal); line-height: var(--interligne); }

/* ================= RESPIRATION ================= */

.section-titre { margin: 30px 0 14px; }
.carte { padding: 16px; gap: 15px; }
.liste { gap: 12px; }

/* Assez de vide sous le contenu pour que le bouton flottant ne recouvre
   jamais le dernier élément d'une liste. */
.vue { padding-bottom: calc(var(--bas) + env(safe-area-inset-bottom) + 120px); }
.salutation h1 { font-size: 32px; }
.bloc-ecrire { padding: 26px 22px; border-radius: var(--rayon-grand); }
.be-question { font-size: 20px; }
.carte-jouer, .capsule-alerte, .souvenir-anniversaire { border-radius: var(--rayon-grand); }

/* Icônes au trait, dessinées, pas des emoji.

   Un emoji ne prend pas la couleur du thème, ne suit pas l'épaisseur du reste
   de l'interface, et son dessin change d'un appareil à l'autre — trois raisons
   qui font qu'une barre d'onglets en emoji trahit immédiatement son âge. Un
   trait de 1,7 px, lui, épouse l'accent et reste net partout. */
.onglet-icone {
  display: grid; place-items: center; width: 24px; height: 24px;
  color: var(--texte-doux);
  transition: color .18s, transform .18s;
}
.onglet-icone svg { width: 23px; height: 23px; display: block; }
.onglet.actif .onglet-icone { color: var(--accent); transform: translateY(-1px); }

/* Point de couleur d'émotion, réutilisé dans les cartes et les filtres */
.pt-emo {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px; vertical-align: baseline;
}
.carte-titre .pt-emo { margin-right: 3px; }

/* ================= LE JEU DE MÉMOIRE ================= */

/* Bloc principal de l'onglet Mémoire : c'est le sujet, il occupe la place. */
.jeu-grand {
  position: relative; overflow: hidden;
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 26px 22px; margin-bottom: 14px; cursor: pointer;
  border-radius: var(--rayon-grand);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 17%, var(--fond-carte));
  color: var(--texte); font: inherit;
  transition: transform .12s;
}
.jeu-grand:active { transform: scale(.99); }

/* Halo décoratif : donne de la profondeur sans image à charger. */
.jg-halo {
  position: absolute; right: -50px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.jg-corps { flex: 1; min-width: 0; position: relative; }
.jg-sur {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.jg-titre {
  display: block; font-family: var(--police-journal);
  font-size: 23px; font-weight: 600; line-height: 1.25;
}
.jg-sous { display: block; font-size: 14px; color: var(--texte-doux); margin-top: 5px; }
.jg-action {
  position: relative; flex-shrink: 0; align-self: center;
  padding: 11px 18px; border-radius: 999px; white-space: nowrap;
  background: var(--accent); color: var(--sur-accent);
  font-size: 14.5px; font-weight: 600;
}

/* Les façons de jouer : une rangée qui défile, pas une grille figée. */
.jeu-modes {
  display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px;
  scrollbar-width: none;
}
.jeu-modes::-webkit-scrollbar { display: none; }
.jm {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 11px 15px; border-radius: 999px; cursor: pointer; font: inherit;
  background: var(--fond-carte); border: 1px solid var(--trait);
  color: var(--texte); font-size: 14px;
  transition: border-color .15s, transform .08s;
}
.jm:active { transform: scale(.96); }
.jm-n {
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--texte-doux); background: var(--fond-haut);
  border-radius: 999px; padding: 2px 8px;
}

.jeu-formes { list-style: none; margin: 12px 0; display: flex; flex-direction: column; gap: 7px; }
.jeu-formes li {
  position: relative; padding-left: 18px; font-size: 14px; color: var(--texte-doux);
}
.jeu-formes li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ================================================================== */
/* BOUTON + DANS LA BARRE D'ONGLETS                                   */
/* ================================================================== */

/* Intégré à la barre plutôt que flottant : c'est la seule position qui ne
   recouvre jamais rien, quel que soit le contenu de la page. */
.onglet-plus {
  flex: 0 0 auto; align-self: center; margin: 0 4px;
  width: 46px; height: 46px; border-radius: 16px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .12s;
}
.onglet-plus svg { width: 24px; height: 24px; }
.onglet-plus:active { transform: scale(.9); }

/* ================================================================== */
/* MÉMOIRE — REFONTE                                                  */
/* ================================================================== */

.repli.enjeu { border-color: color-mix(in srgb, var(--accent) 32%, var(--trait)); }
.repli.enjeu > summary { color: var(--accent); font-weight: 600; }

/* Les deux voies, côte à côte et de même poids : « Retrouver » n'est pas un
   lot de consolation en attendant d'avoir écrit. */
.deux-voies { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 16px; }
.voie {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  text-align: left; padding: 18px 16px 16px; cursor: pointer; font: inherit;
  border-radius: var(--rayon-grand); color: var(--texte);
  border: 1px solid var(--trait); background: var(--fond-carte);
  transition: transform .1s, border-color .15s;
}
.voie:active { transform: scale(.98); }
.voie-retrouver {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, var(--fond-carte));
}
.voie-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--texte-doux); font-weight: 700;
}
.voie-retrouver .voie-tag { color: var(--accent); }
.voie-titre { font-family: var(--police-journal); font-size: 21px; font-weight: 600; }
.voie-sous { font-size: 12.5px; color: var(--texte-doux); line-height: 1.4; }
.voie-n {
  margin-top: 6px; font-size: 12px; color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.voie[disabled] { opacity: .55; cursor: default; }

/* La question du jour : le chemin le plus court vers l'écriture. */
.question-jour {
  padding: 22px 20px; margin-bottom: 18px; border-radius: var(--rayon-grand);
  background: var(--fond-carte); border: 1px solid var(--trait);
}
.qj-sur {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); font-weight: 700; margin-bottom: 10px;
}
.qj-texte {
  font-family: var(--police-journal); font-size: 21px;
  font-weight: 600; line-height: 1.35;
}
.qj-aide { font-size: 13.5px; color: var(--texte-doux); margin-top: 9px; line-height: 1.5; }
.qj-actions { display: flex; gap: 10px; margin-top: 16px; }
.qj-actions .bouton { flex: 1; }

/* L'ancrage : une barre unique, lisible d'un coup d'œil. */
.ancrage-barre {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--fond-haut); margin-bottom: 12px;
}
.ancrage-part { height: 100%; transition: width .3s; }
.ancrage-legende { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ancrage-legende li {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
}
.al-point { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.al-nom { flex: 1; }
.al-aide { color: var(--texte-doux); font-size: 12px; }
.al-n { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ================================================================== */
/* CARTE DU MONDE EN BARRE                                            */
/* ================================================================== */

.monde-barre {
  display: flex; height: 34px; border-radius: 10px; overflow: hidden;
  background: var(--fond-haut); margin-bottom: 12px;
}
.mb-part {
  display: grid; place-items: center; min-width: 0;
  font-size: 16px; transition: width .3s;
}
.monde-legende { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.monde-legende li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ml-drapeau { font-size: 18px; flex-shrink: 0; }
.ml-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-lieux { color: var(--texte-doux); font-size: 12px; }
.ml-n {
  font-variant-numeric: tabular-nums; color: var(--texte-doux);
  background: var(--fond-haut); border-radius: 999px; padding: 2px 9px; font-size: 12px;
}

/* ================================================================== */
/* CARNETS                                                            */
/* ================================================================== */

.carnets { display: flex; flex-direction: column; gap: 10px; }
.carnet {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px; cursor: pointer; font: inherit; color: var(--texte);
  background: var(--fond-carte); border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.carnet:active { border-color: var(--accent); }
.carnet-emoji { font-size: 26px; flex-shrink: 0; }
.carnet-corps { flex: 1; min-width: 0; }
.carnet-nom { font-weight: 600; font-size: 15.5px; }
.carnet-meta { font-size: 12.5px; color: var(--texte-doux); margin-top: 3px; }
.carnet-jauge {
  height: 4px; border-radius: 2px; background: var(--fond-haut);
  margin-top: 8px; overflow: hidden;
}
.carnet-part { height: 100%; background: var(--accent); border-radius: 2px; }

.modele-carnet {
  display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left;
  padding: 14px; margin-bottom: 9px; cursor: pointer; font: inherit; color: var(--texte);
  background: var(--fond-haut); border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.mc-corps { flex: 1; min-width: 0; }
.mc-nom { font-weight: 600; font-size: 15px; }
.mc-resume { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; line-height: 1.45; }
.mc-n { font-size: 11.5px; color: var(--texte-doux); margin-top: 5px; }

/* ================================================================== */
/* AMBIANCE — carnet, café, lumière chaude                            */
/* ================================================================== */

/* Le titre respire davantage sans la date en dessous. */
.barre-haute .titre-haut { display: flex; align-items: center; justify-content: center; }
/* Le nom est devenu un bouton de retour à l'accueil : il doit continuer à se
   lire comme un titre, pas comme une commande. D'où le dépouillement complet
   du bouton — seul le curseur et un très léger repli à l'appui trahissent
   qu'il est cliquable. */
.marque {
  font-size: 22px; letter-spacing: .6px;
  background: none; border: 0; padding: 0; margin: 0 auto;
  cursor: pointer; font-weight: inherit;
  transition: opacity .12s, transform .12s;
}
.marque:hover { opacity: .78; }
.marque:active { transform: scale(.97); }

/* Ombres réchauffées : un noir pur sur un fond crème fait une tache grise.
   Un brun très sombre garde la chaleur du papier. */
.modale-boite, .barre-format, .toast {
  box-shadow: 0 12px 32px rgba(58, 42, 28, .28);
}
.onglet-plus { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent); }

/* Séparateurs et contours plus discrets : le trait franc fait « formulaire ». */
.carte, .repli, .mp-ligne, .humeur-jour, .question-jour, .capsule, .membre {
  border-color: color-mix(in srgb, var(--trait) 70%, transparent);
}

/* Un grain très léger sur le fond : sans ça, un aplat de crème paraît
   plastique. Deux dégradés radiaux suffisent — aucune image à charger. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 45% at 15% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%);
}
/* Seul #app a besoin d'être remonté : il est en flux normal, donc sans contexte
   d'empilement propre il passerait sous le grain. Les deux barres sont déjà
   `position: fixed; z-index: 40` — les inclure ici leur retirait leur `fixed`,
   et elles redescendaient dans le flux : la barre du bas ne se voyait plus
   qu'une fois arrivé au bas de la page. */
#app { position: relative; z-index: 1; }

/* ================================================================== */
/* RÉGLURE DE LA PAGE                                                 */
/* ================================================================== */

/* Les lignes suivent l'interligne réel du texte : calées sur --hauteur-ligne,
   elles restent sous les mots quelle que soit la taille choisie. */
:root[data-reglure="lignee"] .champ-texte,
:root[data-reglure="lignee"] .detail .corps {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--hauteur-ligne) - 1px),
    color-mix(in srgb, var(--trait) 55%, transparent) calc(var(--hauteur-ligne) - 1px),
    color-mix(in srgb, var(--trait) 55%, transparent) var(--hauteur-ligne));
  background-position: 0 calc(var(--hauteur-ligne) * .78);
}

:root[data-reglure="pointillee"] .champ-texte,
:root[data-reglure="pointillee"] .detail .corps {
  background-image: radial-gradient(
    color-mix(in srgb, var(--trait) 80%, transparent) 1px, transparent 1px);
  background-size: var(--hauteur-ligne) var(--hauteur-ligne);
  background-position: 0 calc(var(--hauteur-ligne) * .78);
}

:root[data-reglure="carreaux"] .champ-texte,
:root[data-reglure="carreaux"] .detail .corps {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0,
      transparent calc(var(--hauteur-ligne) - 1px),
      color-mix(in srgb, var(--trait) 45%, transparent) calc(var(--hauteur-ligne) - 1px),
      color-mix(in srgb, var(--trait) 45%, transparent) var(--hauteur-ligne)),
    repeating-linear-gradient(to right, transparent 0,
      transparent calc(var(--hauteur-ligne) - 1px),
      color-mix(in srgb, var(--trait) 30%, transparent) calc(var(--hauteur-ligne) - 1px),
      color-mix(in srgb, var(--trait) 30%, transparent) var(--hauteur-ligne));
  background-position: 0 calc(var(--hauteur-ligne) * .78);
}

/* Marge de gauche, comme sur un cahier. Le filet rouge est adouci en terre
   cuite : le rouge vif d'un Seyès jure avec une palette chaude. */
.champ-texte, .detail .corps {
  padding-left: var(--marge-page, 0);
  text-align: var(--alignement, left);
}
.champ-texte { position: relative; }
:root:not([style*="--marge-page: 0"]) .champ-texte::after { content: none; }

/* Lettrine : la première lettre du texte, agrandie. */
:root[data-lettrine="1"] .detail .corps > p:first-child::first-letter,
:root[data-lettrine="1"] .champ-texte > p:first-child::first-letter,
:root[data-lettrine="1"] .champ-texte > div:first-child::first-letter {
  float: left; font-size: 3.1em; line-height: .82;
  padding: .06em .1em 0 0; color: var(--accent);
  font-family: var(--police-journal);
}

/* ================================================================== */
/* ÉCRITURE À LA MAIN                                                 */
/* ================================================================== */

.bloc-manuscrit {
  margin: 0 var(--gouttiere) 18px;
  padding: 14px; border-radius: var(--rayon-grand);
  background: var(--fond-carte); border: 1px solid var(--trait);
}

.mn-outils { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.mn-outils::-webkit-scrollbar { display: none; }
.mn-outil {
  flex-shrink: 0; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--fond-haut); border: 1.5px solid var(--trait);
  color: var(--texte-doux); font: inherit; font-size: 13.5px;
}
.mn-outil[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--sur-accent); font-weight: 600;
}

.mn-reglages { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.mn-couleurs { display: flex; gap: 7px; flex: 1; flex-wrap: wrap; }
.mn-couleur {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent; transition: transform .12s;
}
.mn-couleur[aria-pressed="true"] { border-color: var(--texte); transform: scale(1.12); }
.mn-epaisseurs { flex: 0 0 auto; }
.mn-epaisseurs .seg { padding: 7px 12px; font-size: 12px; }

/* La toile prend le fond du papier et sa réglure : on dessine sur la page,
   pas dans une fenêtre à part. */
.mn-toile {
  position: relative; height: 44vh; min-height: 240px;
  border-radius: var(--rayon); overflow: hidden;
  background: var(--fond-haut);
  border: 1px solid color-mix(in srgb, var(--trait) 70%, transparent);
  background-image: repeating-linear-gradient(to bottom, transparent 0,
    transparent 27px, color-mix(in srgb, var(--trait) 45%, transparent) 27px,
    color-mix(in srgb, var(--trait) 45%, transparent) 28px);
}
.mn-toile canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.mn-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.manuscrit-vignette {
  width: 100%; border-radius: var(--rayon); display: block;
  background: var(--fond-haut);
  border: 1px solid color-mix(in srgb, var(--trait) 70%, transparent);
}
.detail .manuscrit-vignette { margin-bottom: 12px; }

/* ================================================================== */
/* SUPPRESSION — reléguée en bas de fiche                             */
/* ================================================================== */

/* Séparée du reste par un trait et beaucoup d'air. Une action irréversible ne
   se met pas à portée de pouce des actions courantes — et surtout pas là où
   l'écran précédent posait « Terminer ». */
.zone-suppression {
  margin-top: 40px; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--trait) 70%, transparent);
  text-align: center;
}

/* Volontairement discret. Le rouge vif attire l'œil et la main : sur un bouton
   qu'on ne veut voir cliqué que délibérément, c'est exactement l'inverse du
   but recherché. La couleur d'alerte n'apparaît qu'au survol. */
.discret-danger {
  color: var(--texte-doux); font-size: 13px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 6px 10px;
}
.discret-danger:hover, .discret-danger:focus-visible { color: var(--rouge); }

/* ================================================================== */
/* INFOBULLES — dire ce que fait un bouton avant qu'on le presse      */
/* ================================================================== */

/* Pourquoi pas l'attribut `title` natif : il met environ une seconde à
   apparaître, ne se met pas en forme, et se coupe sur plusieurs lignes. Il est
   tout de même posé en parallèle par le script, comme filet.

   `@media (hover: hover)` est indispensable : sur un écran tactile, `:hover`
   reste collé après une tape, et l'infobulle resterait affichée par-dessus le
   contenu jusqu'à la tape suivante. */
@media (hover: hover) and (pointer: fine) {
  [data-aide] { position: relative; }

  [data-aide]::after {
    content: attr(data-aide);
    position: absolute; z-index: 200;
    bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(3px);
    /* La bulle dépasse largement la largeur du bouton : sans `max-content`,
       une phrase se replierait sur la largeur d'une icône de 40 px. */
    width: max-content; max-width: 230px;
    padding: 7px 10px; border-radius: 9px;
    background: var(--texte); color: var(--fond);
    font-size: 12.5px; line-height: 1.4; font-weight: 400;
    letter-spacing: 0; text-align: center; white-space: normal;
    box-shadow: 0 6px 18px rgba(58, 42, 28, .28);
    opacity: 0; pointer-events: none;
    transition: opacity .13s ease, transform .13s ease;
    transition-delay: .35s;      /* on ne veut pas d'une bulle au moindre passage */
  }

  [data-aide]:hover::after,
  [data-aide]:focus-visible::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }

  /* Les boutons du haut de l'écran n'ont pas de place au-dessus d'eux : leur
     bulle sort du cadre et se retrouve tranchée par le bord. On bascule donc
     toute aide posée dans un en-tête, plutôt que de marquer chaque bouton un
     par un — un en-tête ajouté plus tard hérite ainsi du bon placement. */
  [data-aide][data-aide-sous]::after,
  .entete [data-aide]::after,
  .entete-ecriture [data-aide]::after,
  .barre-haute [data-aide]::after {
    bottom: auto; top: calc(100% + 9px);
    transform: translateX(-50%) translateY(-3px);
  }
  [data-aide][data-aide-sous]:hover::after,
  [data-aide][data-aide-sous]:focus-visible::after,
  .entete [data-aide]:hover::after,
  .entete [data-aide]:focus-visible::after,
  .entete-ecriture [data-aide]:hover::after,
  .entete-ecriture [data-aide]:focus-visible::after,
  .barre-haute [data-aide]:hover::after,
  .barre-haute [data-aide]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
  }

  /* Un en-tête est collant : sans cette levée, la bulle est rognée à sa base. */
  .entete, .entete-ecriture { overflow: visible; }

  /* Les bulles des boutons de bord restent alignées sur leur bord même quand
     l'en-tête les fait basculer vers le bas. */
  .entete [data-aide][data-aide-bord="gauche"]::after,
  .barre-haute [data-aide][data-aide-bord="gauche"]::after { left: 0; transform: translateX(0) translateY(-3px); }
  .entete [data-aide][data-aide-bord="gauche"]:hover::after,
  .entete [data-aide][data-aide-bord="gauche"]:focus-visible::after,
  .barre-haute [data-aide][data-aide-bord="gauche"]:hover::after,
  .barre-haute [data-aide][data-aide-bord="gauche"]:focus-visible::after { transform: translateX(0) translateY(0); }
  .entete [data-aide][data-aide-bord="droite"]::after,
  .barre-haute [data-aide][data-aide-bord="droite"]::after { left: auto; right: 0; transform: translateX(0) translateY(-3px); }
  .entete [data-aide][data-aide-bord="droite"]:hover::after,
  .entete [data-aide][data-aide-bord="droite"]:focus-visible::after,
  .barre-haute [data-aide][data-aide-bord="droite"]:hover::after,
  .barre-haute [data-aide][data-aide-bord="droite"]:focus-visible::after { transform: translateX(0) translateY(0); }

  /* Aux deux bords de l'écran, une bulle centrée déborderait. */
  [data-aide][data-aide-bord="gauche"]::after { left: 0; transform: translateX(0) translateY(3px); }
  [data-aide][data-aide-bord="gauche"]:hover::after,
  [data-aide][data-aide-bord="gauche"]:focus-visible::after { transform: translateX(0) translateY(0); }
  [data-aide][data-aide-bord="droite"]::after { left: auto; right: 0; transform: translateX(0) translateY(3px); }
  [data-aide][data-aide-bord="droite"]:hover::after,
  [data-aide][data-aide-bord="droite"]:focus-visible::after { transform: translateX(0) translateY(0); }

  /* Une bulle ne doit jamais être rognée par la barre qui la contient. */
  .onglets, .barre-haute, .barre-ecriture, .mn-barre { overflow: visible; }
}

/* Un souvenir né d'une question de vie. Il porte la date du jour où on y a
   répondu, pas celle du souvenir : sans ce repère, on ne le reconnaît pas au
   milieu des entrées ordinaires. */
.carte-badge.retrouve {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-fonce);
}

/* ================================================================== */
/* DOCUMENTS JOINTS                                                   */
/* ================================================================== */

.documents { margin: 16px var(--gouttiere) 0; }
.detail .doc-liste { margin: 8px 0 16px; }

.doc-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

.doc {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 13px; border-radius: var(--rayon);
  background: var(--fond-carte);
  border: 1px solid color-mix(in srgb, var(--trait) 70%, transparent);
}
.doc-icone { font-size: 21px; line-height: 1.2; flex-shrink: 0; }
.doc-corps { flex: 1; min-width: 0; display: grid; gap: 3px; }
.doc-nom {
  font-weight: 600; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-meta { font-size: 12px; color: var(--texte-doux); }

/* L'aperçu du texte lu : la preuve visible que le fichier a bien été
   compris. Sans lui, on ne sait pas si le dépôt a servi à quelque chose. */
.doc-apercu {
  font-size: 12.5px; color: var(--texte-doux); line-height: 1.45;
  font-family: var(--police-journal); font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.doc-note {
  font-size: 12px; color: var(--accent-fonce);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 5px 8px; border-radius: 8px; margin-top: 3px;
}
.doc-retirer {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--texte-doux); font-size: 14px; line-height: 1;
}
.doc-retirer:hover { color: var(--rouge); }
.doc-ouvrir {
  flex-shrink: 0; font-size: 13px; color: var(--accent-fonce);
  text-decoration: none; padding: 5px 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.doc-texte { white-space: pre-wrap; font-size: 14px; max-height: 50vh; overflow: auto; }

/* ================================================================== */
/* DATES LUES DANS UN DOCUMENT                                        */
/* ================================================================== */

/* Proposées, jamais appliquées d'office : dater un souvenir de travers le
   range au mauvais endroit d'une vie, ce que ce journal cherche à éviter. */
.dates-trouvees {
  margin: 14px var(--gouttiere) 0; padding: 15px;
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--accent) 8%, var(--fond-carte));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.dt-titre { font-size: 14px; font-weight: 600; margin-bottom: 11px; }
.dt-choix { display: grid; gap: 7px; margin-bottom: 10px; }
.dt-btn {
  display: grid; gap: 2px; text-align: left; width: 100%;
  padding: 10px 12px; border-radius: 11px; cursor: pointer; font: inherit;
  background: var(--fond-carte); border: 1.5px solid var(--trait);
  transition: border-color .15s;
}
.dt-btn.actif {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--fond-carte));
}
.dt-quand { font-weight: 600; font-size: 14.5px; }
/* Le passage du document où la date apparaît : c'est lui qui permet de
   trancher entre la date d'une lettre et celle d'un rendez-vous qu'elle cite. */
.dt-ou {
  font-size: 12px; color: var(--texte-doux);
  font-family: var(--police-journal); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ================================================================== */
/* MISE À JOUR VISUELLE                                               */
/* ================================================================== */

/* Ce qui datait l'interface, dans l'ordre où ça se voyait :
   des emoji en guise d'icônes, des cartes très hautes à gros carré coloré,
   des champs et des pilules énormes, et un titre de page suivi d'un sous-titre
   puis d'un pavé d'explication qui repoussait le contenu hors de l'écran.

   Le remède n'est pas décoratif : plus de densité, moins de rayon, une
   hiérarchie typographique franche, et de la couleur seulement là où elle
   informe. */

/* --- En-tête de vue : une ligne, pas trois --- */

.entete-vue {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.titre-vue {
  font-size: 30px; font-weight: 650; letter-spacing: -.022em; line-height: 1.1;
}
.compte-vue {
  font-size: 13px; color: var(--texte-doux); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* --- Barre d'outils du journal : recherche + filtre sur une ligne --- */

.barre-outils { display: flex; gap: 8px; margin-bottom: 12px; }

.champ-recherche {
  flex: 1; display: flex; align-items: center; gap: 9px;
  padding: 0 13px; border-radius: 13px;
  background: color-mix(in srgb, var(--texte) 5%, var(--fond-carte));
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.champ-recherche:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--fond-carte);
}
.cr-loupe { width: 17px; height: 17px; color: var(--texte-doux); flex-shrink: 0; }
.champ-recherche input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--texte); font: inherit; font-size: 15px; padding: 11px 0;
}
.champ-recherche input::placeholder { color: var(--texte-doux); }
/* La croix native de `search` est dessinée par le navigateur et jure avec le
   reste ; on la retire et le champ se vide au clavier comme partout. */
.champ-recherche input::-webkit-search-cancel-button { display: none; }

.btn-icone {
  flex-shrink: 0; width: 43px; border-radius: 13px; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--texte) 5%, var(--fond-carte));
  border: 1px solid transparent; color: var(--texte-doux);
  transition: color .15s, background .15s;
}
.btn-icone svg { width: 19px; height: 19px; }
.btn-icone:hover, .btn-icone.actif { color: var(--accent); }

/* --- Bascule de vue : une pilule fine, pas trois gros boutons --- */

.bascule-vue {
  display: flex; gap: 2px; padding: 3px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--texte) 5%, var(--fond-carte));
  border: 0; border-radius: 11px;
}
.bv-onglet {
  flex: 1; padding: 7px 6px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--texte-doux); font: inherit;
  font-size: 13px; font-weight: 500;
  transition: color .15s;
}
.bv-onglet.actif {
  background: var(--fond-carte); color: var(--texte); font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--texte) 12%, transparent);
}

/* --- Cartes d'entrée : compactes, lisibles, sans pictogramme inutile --- */

.liste { display: grid; gap: 2px; }

.carte {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 4px; cursor: pointer; position: relative;
  border: 0; border-radius: 0; background: none;
  /* Un filet entre les entrées plutôt qu'une boîte autour de chacune : la
     liste se lit comme une liste, et non comme une pile de tuiles. */
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--trait) 60%, transparent);
  transition: background .12s;
}
.carte:last-child { box-shadow: none; }
.carte:hover { background: color-mix(in srgb, var(--texte) 3%, transparent); }
.carte:active { background: color-mix(in srgb, var(--texte) 6%, transparent); }

.carte-vignette {
  width: 52px; height: 52px; border-radius: 11px; object-fit: cover;
  flex-shrink: 0; background: var(--fond-haut);
}
.carte-corps { flex: 1; min-width: 0; display: grid; gap: 3px; }

.carte-titre {
  font-size: 15.5px; font-weight: 600; line-height: 1.3;
  letter-spacing: -.008em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* L'extrait passe avant les métadonnées : c'est le souvenir qu'on cherche à
   reconnaître, pas sa date. */
.carte-extrait {
  font-size: 13.5px; line-height: 1.45; color: var(--texte-doux);
  font-family: var(--police-journal);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.carte-meta {
  font-size: 11.5px; color: var(--texte-doux); letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: .85;
}
.carte .pt-emo { width: 7px; height: 7px; vertical-align: middle; margin-right: 1px; }

/* Les badges deviennent discrets : ce sont des annotations, pas des alertes. */
.carte-badge {
  position: absolute; top: 14px; right: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  text-transform: lowercase; padding: 3px 7px; border-radius: 6px;
}

/* --- Sections nommées : dire ce qu'on regarde --- */

/* L'onglet Mémoire empilait onze blocs au même niveau. Un titre de section et
   une ligne d'explication suffisent à séparer « jouer » de « revoir » — c'est
   la hiérarchie qui manquait, pas des couleurs. */
.bloc-section { margin: 34px 0 14px; }
.bloc-section:first-of-type { margin-top: 8px; }
.bs-titre {
  font-size: 20px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2;
}
.bs-sous {
  font-size: 13.5px; color: var(--texte-doux); margin-top: 3px; line-height: 1.45;
}

.section-titre {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .085em; color: var(--texte-doux);
  margin: 22px 0 10px;
}

/* --- Écrans vides : plus d'emoji géant --- */

.vide { text-align: center; padding: 40px 20px; }
.vide-emoji { display: none; }
.vide h2 { font-size: 19px; font-weight: 650; margin-bottom: 8px; }
.vide p { font-size: 14.5px; color: var(--texte-doux); line-height: 1.55; }

/* --- Les deux voies du jeu --- */

.deux-voies { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.voie {
  display: grid; gap: 2px; align-content: start; text-align: left;
  padding: 16px 15px; border-radius: 16px; cursor: pointer; font: inherit;
}
.voie-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texte-doux);
}
.voie-titre { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin-top: 4px; }
.voie-sous { font-size: 12.5px; color: var(--texte-doux); line-height: 1.4; }
.voie-n { font-size: 12px; color: var(--accent-fonce); font-weight: 600; margin-top: 6px; }
.voie:disabled { opacity: .55; cursor: default; }

/* --- Barre d'onglets : plus légère --- */

.onglets { border-top: 1px solid color-mix(in srgb, var(--trait) 55%, transparent); }
.onglet { padding: 9px 4px 8px; gap: 4px; }
.onglet-label { font-size: 10px; font-weight: 500; letter-spacing: .005em; }
.onglet.actif .onglet-label { font-weight: 650; }
/* Le trait au-dessus de l'onglet actif faisait « barre de navigation de site
   web ». L'icône colorée dit déjà où l'on est. */
.onglet.actif::before { display: none; }

/* ================================================================== */
/* ACCUEIL : LA PHRASE, LE SOUVENIR, PUIS L'ÉCRITURE                  */
/* ================================================================== */

.salutation { margin-bottom: 18px; }
#salut { font-size: 30px; font-weight: 650; letter-spacing: -.022em; line-height: 1.15; }
#salut-date {
  font-size: 13px; color: var(--texte-doux); margin-top: 4px;
  text-transform: lowercase; letter-spacing: .01em;
}

/* La citation du jour. Un filet à gauche plutôt qu'une carte : elle doit se
   lire comme une note en marge, pas comme un bloc de plus à traiter. */
.citation {
  margin: 0 0 26px; padding: 2px 0 2px 16px; cursor: pointer;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.cit-texte {
  font-family: var(--police-journal); font-size: 16.5px; line-height: 1.5;
  font-style: italic; color: var(--texte);
}
.cit-auteur {
  font-size: 12px; color: var(--texte-doux); margin-top: 6px;
  letter-spacing: .01em;
}
.cit-auteur::before { content: '— '; }
.citation:active .cit-texte { opacity: .6; }

/* Le bloc d'écriture : il n'est plus l'élément le plus haut de l'écran, il
   reste le plus visible. */
.bloc-ecrire {
  width: 100%; text-align: left; display: grid; gap: 4px;
  padding: 20px; margin-bottom: 10px; cursor: pointer; font: inherit;
  border-radius: var(--rayon-grand); border: 0;
  background: color-mix(in srgb, var(--accent) 13%, var(--fond-carte));
  color: var(--texte);
  transition: transform .12s;
}
.bloc-ecrire:active { transform: scale(.99); }
.be-question { font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.be-invite { font-size: 13.5px; color: var(--texte-doux); }

/* ================================================================== */
/* HUMEUR : UNE LIGNE, DES MOTS                                       */
/* ================================================================== */

/* Cinq grands carrés colorés sans libellé lisible occupaient le haut de
   l'écran et ne transmettaient rien : on ne savait pas si le gris valait
   « ordinaire » ou « rude ». Ce sont des étiquettes qu'on lit, alignées, et
   le bloc est descendu sous les souvenirs. */
.humeur-ligne {
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--trait) 60%, transparent);
}
.humeur-ligne .humeur-question {
  font-size: 13px; color: var(--texte-doux); margin-bottom: 10px; font-weight: 500;
}
.humeur-ligne .humeur-choix {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.humeur-ligne .humeur-btn {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px;
  padding: 7px 12px 7px 9px; border-radius: 999px; cursor: pointer;
  background: var(--fond-carte);
  border: 1px solid color-mix(in srgb, var(--trait) 70%, transparent);
  transition: border-color .15s, background .15s;
}
.humeur-ligne .hb-pastille {
  width: 9px; height: 9px; border-radius: 50%; border: 0; flex-shrink: 0;
  box-shadow: none;
}
.humeur-ligne .hb-label {
  font-size: 12.5px; color: var(--texte-doux); text-align: left; line-height: 1.2;
}
.humeur-ligne .humeur-btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--fond-carte));
}
.humeur-ligne .humeur-btn[aria-pressed="true"] .hb-label {
  color: var(--texte); font-weight: 600;
}
.humeur-ligne .humeur-btn[aria-pressed="true"] .hb-pastille { transform: none; }
.humeur-ligne #humeur-note { margin-top: 9px; font-size: 12px; }

/* ================================================================== */
/* LA PAGE BLANCHE                                                    */
/* ================================================================== */

/* Un carnet ouvert : la date en tête, le titre en grand, puis le texte. Le
   champ de titre ne s'annonce plus comme un champ — pas de cadre, pas de fond,
   juste une ligne d'écriture plus grande que les autres. */
.page-date {
  font-size: 12px; color: var(--texte-doux);
  text-transform: lowercase; letter-spacing: .04em;
  margin-bottom: 14px;
}
/* `input[type="text"]` pose un cadre, un fond et un rayon, et sa spécificité
   bat celle d'une simple classe : le titre s'affichait donc en boîte de
   formulaire au milieu d'une page qu'on veut nue. On repasse devant. */
.page-blanche input.champ-titre {
  font-size: 27px; letter-spacing: -.015em;
  background: none; border: 0; border-radius: 0;
  padding: 0 0 14px;
}
.champ-titre::placeholder {
  color: color-mix(in srgb, var(--texte-doux) 42%, transparent);
  font-style: italic;
}

/* L'invite de la page vide : en italique, dans la police du journal, à la
   place exacte où le texte va s'écrire. */
.champ-texte:empty::before {
  font-style: italic;
  color: color-mix(in srgb, var(--texte-doux) 55%, transparent);
}

/* La vignette d'un brouillon : un signe, pas un emoji. */
.carte-vignette.placeholder {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--texte) 5%, var(--fond-carte));
  color: var(--texte-doux);
}
.carte-vignette.placeholder svg { width: 22px; height: 22px; }

/* ================================================================== */
/* ATLAS                                                              */
/* ================================================================== */

/* Le fond est dessiné, pas téléchargé : une carte à tuiles demanderait ses
   images à un serveur à chaque déplacement, ce qui reviendrait à lui dire où
   quelqu'un regarde dans son propre journal. */
.atlas { margin-bottom: 18px; }

.atlas-cadre {
  border-radius: var(--rayon-grand); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--trait) 70%, transparent);
  background: var(--fond-carte);
  touch-action: none;                 /* sinon le geste devient un défilement */
}
.atlas-cadre.en-pose { cursor: crosshair; }
.atlas-cadre.en-pose .at-terre { opacity: .75; }

#atlas-svg { display: block; width: 100%; height: auto; cursor: grab; }
#atlas-svg:active { cursor: grabbing; }

/* La mer et la terre restent dans la palette : une carte bleu vif au milieu
   d'un carnet crème ferait pièce rapportée. */
.at-mer { fill: color-mix(in srgb, var(--accent) 7%, var(--fond-carte)); }
.at-terre {
  fill: color-mix(in srgb, var(--accent) 22%, var(--fond-haut));
  stroke: color-mix(in srgb, var(--accent) 40%, transparent);
  stroke-width: .3; stroke-linejoin: round;
}

.at-amas { cursor: pointer; }
.at-halo { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.at-point {
  fill: var(--accent); stroke: var(--fond-carte); stroke-width: .35;
  transition: fill .15s;
}
.at-amas:hover .at-point, .at-amas:focus-visible .at-point { fill: var(--accent-fonce); }
.at-nb {
  fill: var(--sur-accent); text-anchor: middle; font-weight: 700;
  pointer-events: none; font-family: var(--police);
}

.atlas-outils { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.atlas-outils .btn-icone { height: 38px; width: 38px; }
.atlas-outils .bouton.actif {
  background: var(--accent); color: var(--sur-accent); border-color: var(--accent);
}
.atlas-note {
  font-size: 12.5px; color: var(--texte-doux); margin-top: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ================================================================== */
/* CHOIX DE LA LANGUE                                                 */
/* ================================================================== */

.choix-langues { display: grid; gap: 8px; margin-top: 12px; }
.langue-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border-radius: 13px; cursor: pointer; font: inherit;
  background: var(--fond-carte);
  border: 1.5px solid color-mix(in srgb, var(--trait) 70%, transparent);
  color: var(--texte); text-align: left;
  transition: border-color .15s, background .15s;
}
.langue-btn.actif {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--fond-carte));
}
.lg-drapeau { font-size: 21px; line-height: 1; }
.lg-nom { font-size: 15px; font-weight: 500; }
.langue-btn.actif .lg-nom { font-weight: 650; }

/* L'icône du menu profil accepte maintenant un dessin comme un emoji. */
.mp-icone svg { width: 21px; height: 21px; display: block; }

/* ================================================================== */
/* CE QU'ON PEUT AJOUTER À UNE ENTRÉE                                 */
/* ================================================================== */

/* Un bloc dépliant cachait huit champs derrière deux mots : on ne savait pas
   ce qu'il y avait dedans, et l'ouvrir donnait un mur de formulaire. Chaque
   possibilité est visible d'emblée ; son champ n'apparaît qu'à la demande. */
.ajouts {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 4px 0 6px;
}
.ajout {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px 8px 10px; border-radius: 999px; cursor: pointer;
  background: none; font: inherit; font-size: 13px;
  border: 1px dashed color-mix(in srgb, var(--trait) 90%, transparent);
  color: var(--texte-doux);
  transition: color .15s, border-color .15s, background .15s;
}
.ajout svg { width: 15px; height: 15px; flex-shrink: 0; }
.ajout:hover {
  color: var(--accent-fonce);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  border-style: solid;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ajout:active { transform: scale(.97); }

/* Un champ ouvert glisse en place plutôt que d'apparaître d'un coup : le
   mouvement dit d'où il vient, sinon la page semble sauter. */
.champs-ouverts [data-champ] { animation: champ-entre .18s ease-out; }
@keyframes champ-entre {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .champs-ouverts [data-champ] { animation: none; }
}

/* ================================================================== */
/* LES PORTES D'ENTRÉE DE LA PAGE BLANCHE                             */
/* ================================================================== */

/* « Garder un souvenir » n'annonçait qu'une seule façon de faire — écrire.
   Or on peut aussi dicter, photographier, dessiner, déposer une lettre. Les
   possibilités sont montrées tant que la page est vide, et s'effacent dès le
   premier mot pour laisser la place au texte. */
.portes {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 2px 0 10px;
  transition: opacity .2s;
}
.porte {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px 10px 12px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 13.5px;
  background: color-mix(in srgb, var(--texte) 4%, var(--fond-carte));
  border: 1px solid transparent; color: var(--texte);
  transition: border-color .15s, background .15s, transform .1s;
}
.porte svg { width: 17px; height: 17px; color: var(--accent-fonce); }
.porte:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.porte:active { transform: scale(.97); }

/* Tant que les portes sont proposées, le champ de texte se resserre : à
   `min-height: 44vh` il les repousse hors de l'écran, donc hors d'usage. */
.page-blanche.avec-portes .champ-texte { min-height: 24vh; }

/* ================================================================== */
/* HIÉRARCHIE DES ONGLETS                                             */
/* ================================================================== */

/* Journal et Mémoire sont le produit ; Carte et Cercle sont des vues
   complémentaires. Cette hiérarchie était d'abord exprimée par la largeur
   (`flex: 1.35` contre `1`) — une erreur : elle déséquilibrait la barre et
   décentrait le bouton « + » de trente-deux pixels, puisque les deux onglets
   de gauche occupaient 262 px contre 198 à droite.

   La priorité se dit par la place et par le ton, pas par la taille : Journal
   et Mémoire sont les deux premiers, et les deux autres portent un libellé
   légèrement estompé. Les quatre gardent la même largeur, ce qui remet le
   « + » exactement au centre. */
.onglet { flex: 1 1 0; }

.onglet[data-onglet="carte"] .onglet-label,
.onglet[data-onglet="cercle"] .onglet-label { opacity: .8; }
.onglet[data-onglet="carte"].actif .onglet-label,
.onglet[data-onglet="cercle"].actif .onglet-label { opacity: 1; }

/* La barre ne porte plus « Aujourd'hui » : on y arrive au lancement, et le nom
   « Madeleine » y ramène. Le bouton « + » reprend donc sa place au centre. */

/* Le détail européen remplace le fond mondial plutôt que de s'y superposer :
   sinon les côtes grossières transparaissent sous les fines. */
.at-detail {
  fill: color-mix(in srgb, var(--accent) 22%, var(--fond-haut));
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: .12;
}
/* Les frontières sont ce qui permet de se repérer : sans elles, l'Europe est
   une seule masse. Elles restent plus claires que les côtes. */
.at-frontieres {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: .1; stroke-dasharray: .5 .35; stroke-linecap: round;
}

/* Les frontières mondiales, plus discrètes que celles d'Europe.
   Elles sont dessinées en permanence, à tous les zooms : au trait des
   frontières européennes, elles feraient un quadrillage qui mangerait la
   carte. Elles doivent se lire sans se regarder. */
.at-monde {
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
  stroke-width: .09;
  stroke-dasharray: .45 .5;
}

/* Le sélecteur de pays : la recherche, puis la liste. */
.lieu-pays { display: grid; gap: 6px; margin-top: 10px; }
.lp-libelle { font-size: .86rem; color: var(--texte-doux); }
.lp-rech,
#f-lieu-pays {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  color: var(--texte);
  background: var(--fond-haut);
  border: 1px solid var(--trait);
  border-radius: 9px;
}
.lp-rech::-webkit-search-cancel-button { cursor: pointer; }
.lp-rech:focus-visible,
#f-lieu-pays:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.lp-aucun { margin: 0; }

/* --- Les questions tirées par l'IA --- */
.ia-questions { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ia-q {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--fond-haut);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.ia-q-source { flex: none; font-size: 1rem; line-height: 1.4; }
.ia-q-corps { display: grid; gap: 3px; }
.ia-q-texte { color: var(--texte); }
/* La réponse est là, en plus clair : c'est un aide-mémoire, pas un contrôle.
   La cacher obligerait à jouer pour savoir ce que l'IA a compris. */
.ia-q-reponse { color: var(--texte-doux); font-size: .88rem; }
.ia-note { margin-top: 8px; }

/* L'invitation, et son avertissement. Le fond distinct existe pour qu'on ne
   puisse pas appuyer sans avoir vu la phrase qui dit ce qui part. */
.ia-invite {
  margin-top: 10px; padding: 14px;
  background: var(--fond-haut);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-grand);
}
.ia-invite p { margin: 0 0 10px; }
.ia-avertissement {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: .92rem;
}

/* --- Les dates qui reviennent --- */
.evenements { margin: 18px 0; display: grid; gap: 8px; }
.ev-carte {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--fond-haut);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-grand);
  font: inherit; color: var(--texte); text-align: left; cursor: pointer;
  transition: transform .12s, border-color .15s;
}
.ev-carte:active { transform: scale(.99); }
/* Ce qui tombe aujourd'hui se distingue : c'est le seul qui demande d'agir
   maintenant, les autres sont une simple annonce. */
.ev-aujourdhui {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--fond-haut));
}
.ev-emoji { flex: none; font-size: 22px; line-height: 1; }
.ev-corps { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ev-nom { font-weight: 600; }
.ev-amorce { font-size: .88rem; color: var(--texte-doux); }
.ev-dans {
  flex: none; font-size: .78rem; color: var(--texte-doux);
  white-space: nowrap;
}

/* La proposition de retenir un anniversaire. Un fond distinct, parce qu'elle
   demande une réponse — contrairement à tout le reste de l'accueil. */
.ev-proposition {
  margin: 16px 0; padding: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--fond-haut));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--trait));
  border-radius: var(--rayon-grand);
}
.evp-texte { margin: 0 0 12px; }

/* --- Partager : on touche qui, puis à quel titre --- */
.pt-liste { display: grid; gap: 6px; margin-bottom: 14px; }
.pt-ligne {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: var(--fond-haut);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font: inherit; color: var(--texte); text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pt-ligne.actif {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--fond-haut));
}
.pt-avatar { flex: none; font-size: 19px; line-height: 1; }
.pt-corps { flex: 1; display: grid; gap: 1px; min-width: 0; }
.pt-nom { font-weight: 550; }
.pt-sous { font-size: .82rem; color: var(--texte-doux); }
/* La coche n'apparaît qu'une fois choisi : une case vide sur chaque ligne
   ferait un formulaire, alors qu'on veut une liste qu'on touche. */
.pt-coche { flex: none; opacity: 0; color: var(--accent); font-weight: 700; }
.pt-ligne.actif .pt-coche { opacity: 1; }

.pt-chercher {
  width: 100%; padding: 9px 11px; margin-bottom: 8px;
  font: inherit; color: var(--texte);
  background: var(--fond-haut);
  border: 1px solid var(--trait); border-radius: 9px;
}

.pt-roles { display: grid; gap: 6px; }
.pt-role {
  width: 100%; display: grid; gap: 2px; padding: 10px 12px;
  background: var(--fond-haut);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font: inherit; color: var(--texte); text-align: left; cursor: pointer;
}
.pt-role.actif {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--fond-haut));
}
.pt-role-titre { font-weight: 600; }
.pt-role-aide { font-size: .84rem; color: var(--texte-doux); }

/* Le bouton d'annulation dans le message fugace : présent, mais discret —
   il ne doit pas concurrencer le message qu'il accompagne. */
.toast-action {
  margin-left: 12px; padding: 2px 8px;
  background: none; border: 0; border-bottom: 1px solid currentColor;
  font: inherit; font-weight: 600; color: inherit; cursor: pointer;
}

/* --- Une entrée qui couvre plusieurs jours --- */
.dates-ligne { display: flex; gap: 8px; align-items: center; }
.dates-ligne input[type="date"] { flex: 1; min-width: 0; }
/* La case reste discrète : c'est une option, pas une étape. La plupart des
   entrées tiennent en un jour et ne doivent rien avoir à décocher. */
.bascule-periode {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; font-size: .88rem; color: var(--texte-doux); cursor: pointer;
}
.bascule-periode input { margin: 0; }
.aide-alerte { color: var(--rouge); }
/* Un jour couvert par une période, mais qui n'est pas son premier jour, reste
   marqué comme les autres : on y était, c'est tout ce qui compte. */

/* --- Le calendrier montre les photos --- */
/* Un mois de points identiques ne dit rien : on sait qu'on a écrit, pas ce
   qu'on a vécu. La vignette rend le mois reconnaissable d'un coup d'œil. */
.cal-case { overflow: hidden; }
.cal-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Presque à pleine force : le but est de VOIR la photo. C'est la pastille
     sous le numéro qui assure sa lisibilité, pas l'affadissement de l'image. */
  opacity: .88;
}
.cal-numero { position: relative; z-index: 1; }
/* Sur une image, le chiffre a besoin d'un fond pour rester lisible quelle que
   soit la photo — un ciel clair comme une nuit. */
.cal-case.avec-image .cal-numero {
  padding: 1px 5px; border-radius: 6px;
  background: color-mix(in srgb, var(--fond-carte) 78%, transparent);
  font-weight: 650;
}
.cal-case.avec-image { background: var(--fond-carte); }
.cal-case.avec-image:hover .cal-image,
.cal-case.selectionnee .cal-image { opacity: 1; }

/* --- L'avertissement de sauvegarde --- */
/* Un encadré net, pas une bannière rouge : ce n'est pas une erreur, c'est un
   fait qu'on préfère apprendre avant de le découvrir. */
.alerte-sauvegarde {
  margin: 18px 0; padding: 15px;
  background: color-mix(in srgb, var(--accent) 9%, var(--fond-haut));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--trait));
  border-radius: var(--rayon-grand);
}
.as-titre { margin: 0 0 6px; font-weight: 650; }
.as-corps { margin: 0 0 12px; font-size: .92rem; color: var(--texte-doux); }
.as-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* « Plus tard » reste accessible mais discret : il ne doit pas concurrencer
   les deux gestes qui protègent réellement. */
.as-plus-tard {
  display: block; margin-top: 10px;
  font-size: .86rem; color: var(--texte-doux);
}

/* --- Le journal de bord --- */
/* Une pile d'appels se lit en chasse fixe, et doit pouvoir défiler sans
   pousser la page : un rapport d'erreur est large par nature. */
.inc-rapport {
  margin: 12px 0; padding: 12px;
  max-height: 340px; overflow: auto;
  background: var(--fond-haut);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  color: var(--texte-doux);
}

/* ================================================================== */
/* LE FIL DE QUELQU'UN                                                */
/* ================================================================== */
/*
   Un nom, jusqu'ici, était du texte. Il devient une porte — et une porte doit
   se voir. D'où le soulignement discret : pas un bleu de lien web, qui jurerait
   dans un journal, mais un trait sous le nom, qui dit « ceci s'ouvre » sans
   faire de bruit.
*/

.nom-lien,
.puce-lien {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.nom-lien {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.nom-lien:hover { text-decoration-color: var(--accent); }

.puce-lien {
  background: var(--fond-carte); border: 1.5px solid var(--trait);
  border-radius: 999px; padding: 5px 11px;
  transition: border-color .15s, transform .15s;
}
.puce-lien:hover { border-color: var(--accent); transform: translateY(-1px); }
.puce-lien:active { transform: none; }

#pe-corps { padding: 0 var(--gouttiere) 40px; }

/* --- L'en-tête --- */

.pe-tete { display: flex; align-items: center; gap: 14px; padding: 18px 0 4px; }
.pe-avatar {
  width: 58px; height: 58px; flex: 0 0 58px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 26px;
  background: color-mix(in srgb, var(--accent) 14%, var(--fond-carte));
  border: 1.5px solid var(--trait);
}
.pe-titre {
  font-family: var(--police-journal); font-size: 25px; font-weight: 600;
  line-height: 1.2;
}
.pe-sous { color: var(--texte-doux); font-size: 13.5px; margin-top: 3px; }

.pe-phrase {
  font-family: var(--police-journal); font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: var(--texte-doux);
  margin: 12px 0 22px;
}

/* --- La première fois ---
   Le seul bloc de l'écran qui porte la couleur d'accent sur toute sa surface.
   C'est l'information que personne ne peut retrouver seul, et la seule qui
   mérite qu'on lève les yeux : elle ne se dispute la vedette avec rien. */

.pe-jalon {
  border-radius: var(--rayon-grand);
  padding: 18px 20px; margin-bottom: 26px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 10%, var(--fond-carte));
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--trait));
  transition: transform .15s;
}
.pe-jalon:hover { transform: translateY(-2px); }
.pe-jalon-etiq {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.pe-jalon-date {
  font-family: var(--police-journal); font-size: 20px;
  margin: 7px 0 2px;
}
.pe-jalon-titre { font-size: 15px; }
.pe-jalon-depuis { color: var(--texte-doux); font-size: 13px; margin-top: 8px; }

/* --- La frise des années ---
   Les colonnes ont toutes la même largeur, les années vides comprises : c'est
   ce qui rend un creux visible. Un graphique qui saute les années sans rien
   raconterait une présence continue qui n'a pas eu lieu. */

.pe-frise {
  display: flex; align-items: flex-end; gap: 4px;
  height: 92px; margin: 6px 0 10px;
  overflow-x: auto; padding-bottom: 2px;
}
.pe-an {
  flex: 1 1 0; min-width: 20px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 5px;
}
.pe-baton {
  width: 100%; border-radius: 4px 4px 2px 2px;
  background: var(--accent); min-height: 2px;
}
.pe-an.vide .pe-baton { background: var(--trait); }
.pe-annee { font-size: 10.5px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

/* --- Qui d'autre était là --- */

.pe-avec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.pe-qui {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fond-carte); border: 1.5px solid var(--trait);
  border-radius: 999px; padding: 7px 8px 7px 13px;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.pe-qui:hover { border-color: var(--accent); transform: translateY(-1px); }
.pe-qui-n {
  min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* --- Le silence ---
   Ton neutre, volontairement : ni rouge, ni point d'exclamation, ni « tu as
   oublié ». C'est un constat, et il peut concerner quelqu'un qui est mort. */

.pe-silence {
  border: 1.5px solid var(--trait); border-radius: var(--rayon);
  padding: 15px 17px; margin: 22px 0;
  background: var(--fond-haut);
}
.pe-silence p { margin: 0 0 11px; color: var(--texte-doux); font-size: 14.5px; }

/* --- Les chiffres, tout en bas --- */

.pe-chiffres {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 26px 0 18px;
}
.pe-chiffre {
  flex: 1 1 82px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 13px 8px; border-radius: var(--rayon);
  background: var(--fond-carte); border: 1.5px solid var(--trait);
}
.pe-chiffre b { font-family: var(--police-journal); font-size: 21px; }
.pe-chiffre span { font-size: 11.5px; color: var(--texte-doux); text-align: center; }

.pe-inviter { margin-top: 10px; }
.pe-vide { padding: 40px var(--gouttiere); text-align: center; }

/* Les étiquettes n'étaient stylées que sous `.detail` ; hors de cet écran
   elles retombaient en éléments en ligne et débordaient de la page. La règle
   vaut pour toute l'application, pas pour un écran. */
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

/* Cinq années remplies de barres larges comme la main donnent un graphique de
   tableur, pas un rythme. La colonne garde sa place — c'est elle qui rend les
   creux visibles — mais le bâton reste fin. */
.pe-baton { max-width: 30px; }

/* ================================================================== */
/* L'ATMOSPHÈRE                                                       */
/* ================================================================== */
/*
   Ce que ce bloc corrige, dit franchement : l'application était éteinte.

   Trois causes, toutes structurelles et aucune décorative :

   1. L'accent ne se détachait pas du papier. Un brun clair sur un crème :
      rien n'attirait l'œil, donc rien n'avait d'importance. Les ambiances
      règlent ça côté couleurs ; ici on en tire les conséquences en donnant à
      l'accent les endroits où il doit se voir — les titres de section, la
      première fois, l'invitation à écrire.

   2. Tout était posé à plat. Des rectangles séparés par un filet, sur un fond
      de la même famille. À plat, rien n'a d'ordre : le bloc principal et le
      bloc secondaire pèsent pareil. L'ombre teintée de l'encre rend cet ordre
      — et elle est teintée, pas noire, parce qu'une ombre noire sur un papier
      chaud donne un gris sale.

   3. Le fond était un aplat uniforme du haut en bas de chaque écran. Le halo
      lui donne un haut et un bas.
*/

/* --- Le halo ------------------------------------------------------- */

body {
  background: linear-gradient(var(--halo, var(--fond)) 0, var(--fond) 340px);
  background-attachment: fixed;
}

/* --- Le relief ----------------------------------------------------- */

.repli, .humeur-jour, .question-jour, .capsule, .membre, .carnet,
.pe-jalon, .pe-chiffre, .groupe-carte, .mp-ligne {
  box-shadow: var(--ombre);
}
.modale-boite, .barre-format, .toast { box-shadow: var(--ombre-forte); }

/* La barre d'onglets se décolle du contenu : sans ombre, sur un fond de la
   même couleur, on ne voyait plus où finissait la page. */
.onglets {
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--trait) 55%, transparent),
              0 -8px 24px color-mix(in srgb, var(--accent) 7%, transparent);
}

/* --- Les titres de section reprennent de la voix -------------------
   Ils étaient en `--texte-doux`, c'est-à-dire de la même couleur que le texte
   secondaire qu'ils annoncent. Un titre qui a le poids de son contenu ne
   sépare rien. En accent, il redevient un repère. */

.section-titre { color: var(--accent); opacity: .95; }

/* --- L'invitation à écrire -----------------------------------------
   C'est le geste central de l'application et il avait l'apparence d'un champ
   de formulaire vide. */

.bloc-ecrire {
  box-shadow: var(--ombre);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--trait));
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bloc-ecrire:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-forte);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--trait));
}
.bloc-ecrire:active { transform: none; }
.be-question { color: var(--texte); }

/* --- Les boutons principaux ----------------------------------------
   Un aplat d'accent sur un fond de la même famille disparaissait. Le léger
   dégradé et l'ombre portée leur rendent la qualité d'un objet qu'on presse. */

.bouton.principal {
  background: linear-gradient(var(--accent), var(--accent-fonce));
  box-shadow: var(--ombre);
  border-color: transparent;
}
.bouton.principal:hover { filter: brightness(1.05); }
.bouton.principal:active { filter: brightness(.96); transform: translateY(1px); }

/* --- Les photos ----------------------------------------------------
   Une vignette posée sans rien autour flotte. Un liseré de la couleur du trait
   et une ombre très courte la posent sur la page. */

.carte-vignette, .cal-image {
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* --- Les fonds sombres ---------------------------------------------
   Sur un papier sombre, un bord clair vaut mieux qu'une ombre : l'ombre se
   perd dans le fond, le liseré rend le relief. */

:root[data-clair="0"] .repli,
:root[data-clair="0"] .humeur-jour,
:root[data-clair="0"] .question-jour,
:root[data-clair="0"] .capsule,
:root[data-clair="0"] .carnet,
:root[data-clair="0"] .pe-jalon,
:root[data-clair="0"] .pe-chiffre {
  border-color: color-mix(in srgb, var(--texte) 14%, var(--trait));
}

/* --- Le choix d'ambiance -------------------------------------------
   Chaque vignette montre ce qu'elle fait : la couleur du papier, deux traits
   de l'encre, et « Aa » dans la police du journal. Une pastille de couleur
   seule ne dit pas à quoi ressemblera l'application. */

.grille-ambiances {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.choix-ambiance {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.amb-echantillon {
  position: relative; display: block; height: 62px; margin-bottom: 5px;
  border-radius: var(--rayon); overflow: hidden;
  border: 1.5px solid var(--trait);
  box-shadow: var(--ombre);
  transition: transform .15s, border-color .15s;
}
.choix-ambiance:hover .amb-echantillon { transform: translateY(-2px); }
.choix-ambiance[aria-pressed="true"] .amb-echantillon {
  border-color: var(--accent); border-width: 2.5px;
}
.amb-trait {
  position: absolute; left: 10px; right: 10px; top: 14px;
  height: 3px; border-radius: 2px; opacity: .85;
}
.amb-trait.court { top: 22px; right: 42%; }
.amb-lettre {
  position: absolute; left: 10px; bottom: 6px;
  font-size: 19px; line-height: 1;
}
.amb-nom { font-size: 13px; font-weight: 600; }
.amb-sous { font-size: 11px; color: var(--texte-doux); line-height: 1.3; }

/* --- L'amorce et son renvoi ---------------------------------------- */

.amorce-ligne { display: flex; align-items: stretch; gap: 6px; }
.amorce-ligne .ligne-amorce-carte { flex: 1; min-width: 0; }
.amorce-ecarter {
  flex: 0 0 auto; padding: 0 10px; align-self: center;
  font-size: 13px; opacity: .45; transition: opacity .15s;
}
.amorce-ecarter:hover { opacity: 1; }

/* ================================================================== */
/* LA RÉTROSPECTIVE                                                   */
/* ================================================================== */

#retro-periodes, #retro-corps { padding: 0 var(--gouttiere); }
#retro-corps { padding-bottom: 44px; }

/* --- Le choix de période ------------------------------------------- */

.retro-onglets {
  display: flex; gap: 7px; overflow-x: auto; padding: 14px 0 4px;
  scrollbar-width: none;
}
.retro-onglets::-webkit-scrollbar { display: none; }
.ro-onglet {
  flex: 0 0 auto; padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid var(--trait); background: var(--fond-carte);
  font: inherit; font-size: 13.5px; color: var(--texte-doux); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ro-onglet[aria-pressed="true"] {
  border-color: var(--accent); color: var(--sur-accent);
  background: var(--accent); font-weight: 600;
}

/* --- L'ouverture --------------------------------------------------- */

.retro-tete { padding: 18px 0 10px; }
.retro-titre {
  font-family: var(--police-journal); font-size: 34px; font-weight: 600;
  line-height: 1.05; letter-spacing: -.02em;
}
.retro-phrase { color: var(--texte-doux); font-size: 15px; margin-top: 7px; }

/* --- La mosaïque ---------------------------------------------------
   Des carrés serrés, sans légende et sans date. À cette taille les photos ne
   se lisent pas une par une : elles font masse — et c'est cette masse qui
   frappe, parce qu'on ne se souvient jamais d'en avoir pris autant. */

.retro-mosaique {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 3px; margin-bottom: 10px;
  border-radius: var(--rayon); overflow: hidden;
}
.rmo-case {
  position: relative; aspect-ratio: 1; padding: 0; border: 0;
  background: var(--fond-haut); cursor: pointer; overflow: hidden;
}
.rmo-case img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s, filter .25s;
}
.rmo-case:hover img { transform: scale(1.07); }
.rmo-case:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -2px; }

/* --- La courbe d'humeur -------------------------------------------- */

.retro-courbe {
  width: 100%; height: 64px; display: block; margin: 4px 0 6px;
  overflow: visible;
}
.rc-zero { stroke: var(--trait); stroke-width: 1; }
.rc-ligne {
  fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linejoin: round; stroke-linecap: round; opacity: .55;
  vector-effect: non-scaling-stroke;
}

/* --- Les mois ------------------------------------------------------ */

.retro-mois {
  display: flex; align-items: flex-end; gap: 4px;
  height: 86px; margin: 6px 0 8px;
}
.rm-col {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 5px;
}
.rm-baton {
  width: 100%; max-width: 26px; min-height: 2px;
  border-radius: 4px 4px 2px 2px; background: var(--accent);
}
.rm-baton.vide { background: var(--trait); }
.rm-nom { font-size: 10px; color: var(--texte-doux); }

/* --- La grande porte vers la rétrospective ------------------------- */

.grande-porte {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 17px 18px; margin: 4px 0 20px; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  border-radius: var(--rayon-grand);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--trait));
  background: color-mix(in srgb, var(--accent) 8%, var(--fond-carte));
  box-shadow: var(--ombre);
  transition: transform .15s, box-shadow .15s;
}
.grande-porte:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.grande-porte:active { transform: none; }
.gp-corps { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gp-titre { font-family: var(--police-journal); font-size: 20px; font-weight: 600; }
.gp-sous { font-size: 13px; color: var(--texte-doux); }

/* --- Les échos -----------------------------------------------------
   Chaque écho annonce d'abord POURQUOI il est là, en accent et en petit, puis
   le titre. L'ordre compte : sans la raison, un rapprochement passe pour du
   hasard, et on cesse de regarder le bloc au bout de trois fois. */

.echos { display: grid; gap: 8px; margin-bottom: 26px; }
.echo {
  display: grid; gap: 2px; text-align: left; width: 100%;
  padding: 13px 15px; cursor: pointer; font: inherit; color: inherit;
  border-radius: var(--rayon);
  border: 1.5px solid var(--trait);
  background: var(--fond-carte);
  border-left: 3px solid var(--accent);
  transition: transform .15s, box-shadow .15s;
}
.echo:hover { transform: translateX(2px); box-shadow: var(--ombre); }
.echo:active { transform: none; }
.echo-raison {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.echo-titre { font-family: var(--police-journal); font-size: 16.5px; }
.echo-date { font-size: 12px; color: var(--texte-doux); }

/* ================================================================== */
/* L'ACCUEIL, EN QUATRE TEMPS                                         */
/* ================================================================== */
/*
   L'accueil peut afficher treize blocs : salutation, citation, humeur,
   capsule échue, ce qui remonte, rappel, alerte de sauvegarde, événements,
   proposition d'anniversaire, écrire, amorce, récemment, brouillons.

   Chacun est justifié. Empilés au même écart et au même poids, ils forment
   une colonne où rien ne commence ni ne finit — et c'est ça, l'impression de
   page morte : pas un manque de fonctions, un manque d'articulation.

   Quatre temps, donc, séparés d'un filet :
     le rituel (salutation, citation, humeur)   — toujours là, jamais annoncé ;
     ce qui remonte (capsule, souvenirs, rappel) ;
     une raison d'écrire (événements, invitation, amorce) ;
     ton journal (récemment, brouillons).

   Aucun libellé de zone n'est ajouté : le filet et l'écart suffisent, et
   quatre titres de plus alourdiraient précisément ce qu'on cherche à alléger.

   Tout tient en CSS, sans un mot de JavaScript : un bloc caché disparaît avec
   son filet, donc un temps vide ne laisse pas de trace. C'est ce qui rend la
   chose sûre — aucun état à tenir à jour, rien à oublier de mettre à jour le
   jour où un bloc s'ajoute.
*/

#vue-aujourdhui > #capsule-alerte,
#vue-aujourdhui > #bloc-remontee,
#vue-aujourdhui > #rappel-discret,
#vue-aujourdhui > #bloc-evenements,
#vue-aujourdhui > .bloc-ecrire,
#vue-aujourdhui > #bloc-brouillons {
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, var(--trait) 65%, transparent);
}

/* Un seul filet par temps : dans un même groupe, les suivants s'effacent.
   `~` regarde les frères précédents encore visibles, donc la règle se règle
   toute seule selon ce que la journée contient. */
#vue-aujourdhui > #capsule-alerte:not([hidden]) ~ #bloc-remontee,
#vue-aujourdhui > #capsule-alerte:not([hidden]) ~ #rappel-discret,
#vue-aujourdhui > #bloc-remontee:not([hidden]) ~ #rappel-discret,
#vue-aujourdhui > #bloc-evenements:not([hidden]) ~ .bloc-ecrire,
#vue-aujourdhui > #ev-proposition:not([hidden]) ~ .bloc-ecrire {
  border-top: 0; margin-top: 14px; padding-top: 0;
}

/* La salutation prend la place qui lui revient : c'est la première chose
   qu'on lit, et elle était de la taille d'un titre de section. */
.salutation h1 {
  font-family: var(--police-journal);
  font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
}
.salutation p { color: var(--texte-doux); font-size: 13.5px; margin-top: 4px; }

/* ================================================================== */
/* SUPPRIMER                                                          */
/* ================================================================== */
/*
   Le bouton était un lien gris sans contour, au bas d'une fiche qui peut
   faire seize cents pixels. Il a été signalé comme absent — le verdict le plus
   net qu'on puisse recevoir sur un élément d'interface.

   Il reste en bas et reste sobre : une action irréversible ne se met pas à
   portée de pouce des actions courantes. Mais un contour et un pictogramme
   suffisent à en faire un bouton plutôt qu'une note de bas de page. Le rouge
   n'arrive qu'au survol, parce qu'une couleur d'alerte permanente attire l'œil
   et la main — l'inverse du but.
*/

.bouton-supprimer {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--rayon);
  font: inherit; font-size: 14px; cursor: pointer;
  color: var(--texte-doux);
  background: var(--fond-carte);
  border: 1.5px solid var(--trait);
  transition: color .15s, border-color .15s, background .15s;
}
.bouton-supprimer svg { width: 17px; height: 17px; }
.bouton-supprimer:hover,
.bouton-supprimer:focus-visible {
  color: var(--rouge);
  border-color: color-mix(in srgb, var(--rouge) 55%, var(--trait));
  background: color-mix(in srgb, var(--rouge) 7%, var(--fond-carte));
}

/* --- Le menu d'une carte, sur appui long ou clic droit --- */

.menu-carte { display: grid; gap: 9px; margin-top: 16px; }
.menu-carte .bouton { width: 100%; }
.menu-carte .bouton-supprimer { width: 100%; }

/* La ligne qui dit que le geste existe.
   Un appui long ne se devine pas : c'est un geste caché, et un geste caché
   qu'on n'annonce pas n'existe pas non plus. Une ligne suffit — elle ne se
   referme pas, parce qu'on ne cherche à supprimer qu'une fois de temps en
   temps, souvent des mois après avoir lu l'astuce. */
.astuce-liste {
  font-size: 12px; color: var(--texte-doux);
  opacity: .8; margin: 2px 0 10px;
}

/* --- Les vignettes différées ---------------------------------------
   Un `<img>` sans `src` n'affiche rien et ne montre aucune icône de fichier
   cassé : il occupe simplement sa place. Le fond suffit donc à tenir la grille
   pendant que la vignette se fabrique, sans faire clignoter la page. */

img[data-vig] {
  background: var(--fond-haut);
  opacity: 0; transition: opacity .2s;
}
img[data-vig][data-vig-pret] { opacity: 1; }

.rmo-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s, opacity .2s;
}
.rmo-case:hover .rmo-img { transform: scale(1.07); }

/* ================================================================== */
/* ÉCRIRE : UNE SEULE CARTE                                           */
/* ================================================================== */
/*
   Il y avait deux boîtes empilées pour un seul geste : une grande carte
   « Garder quelque chose d'aujourd'hui », puis une pilule grise contenant
   l'idée du jour — et une croix qui flottait à l'extérieur, accrochée à rien.
   On pouvait la lire comme « fermer tout ce bloc ».

   Ici, une carte. L'invitation, un filet, l'idée du jour. C'est la même action
   avec un point de départ facultatif, et la croix vit sur la ligne de l'idée,
   donc on voit ce qu'elle écarte.

   La pilule grise posait un autre problème : avec son fond clair, son texte
   pâle et ses coins très arrondis, elle ressemblait à un champ de recherche.
   On lisait l'idée du jour comme un texte d'exemple à remplacer.
*/

.bloc-ecrire {
  display: block; width: 100%; padding: 0; overflow: hidden;
  border-radius: var(--rayon-grand);
  border: 1.5px solid color-mix(in srgb, var(--accent) 26%, var(--trait));
  background: var(--fond-carte);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bloc-ecrire:active { transform: none; }

/* L'invitation : c'est le geste central de l'application. */
.be-principal {
  display: grid; gap: 3px; width: 100%; text-align: left;
  padding: 19px 20px 17px; cursor: pointer;
  font: inherit; color: var(--texte); border: 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background .15s;
}
.be-principal:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.be-question { font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.be-invite { font-size: 13.5px; color: var(--texte-doux); }

/* L'idée du jour, dans la même carte, sous un filet. */
.be-idee {
  display: flex; align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--trait) 75%, transparent);
}
.be-idee[hidden] { display: none; }

.be-idee-texte {
  flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left;
  padding: 13px 8px 13px 20px; cursor: pointer;
  font: inherit; color: var(--texte); background: none; border: 0;
  transition: background .15s;
}
.be-idee-texte:hover { background: color-mix(in srgb, var(--texte) 4%, transparent); }

/* L'étiquette dit ce que c'est. Sans elle, la phrase se lisait comme une
   consigne — « une peur que tu avais, enfant » — plutôt que comme une offre. */
.be-idee-etiq {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.be-idee-mot {
  font-family: var(--police-journal); font-size: 16px; line-height: 1.35;
}

/* La croix : discrète, mais dans la carte et sur la ligne qu'elle concerne. */
.be-idee-non {
  flex: 0 0 auto; padding: 0 17px; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1;
  color: var(--texte-doux); background: none; border: 0;
  opacity: .5; transition: opacity .15s, color .15s;
}
.be-idee-non:hover, .be-idee-non:focus-visible { opacity: 1; color: var(--rouge); }

/* Les anciennes règles ne s'appliquent plus à rien, mais `style.css` est
   chargée avant : on neutralise ce qui pourrait repeindre la nouvelle carte. */
.bloc-ecrire { background-image: none; }

/* La carte entière ne se soulève plus au survol : chaque zone répond
   maintenant pour elle-même, et voir toute la carte bouger parce qu'on
   approche de la croix disait le contraire de ce qui allait se passer. */
.bloc-ecrire { box-shadow: var(--ombre); }
.bloc-ecrire:hover { transform: none; box-shadow: var(--ombre); }

/* Le filet des « quatre temps » a été pensé pour des blocs transparents : il
   pose une bordure et un retrait EN HAUT de l'élément. Sur une carte qui a
   désormais son propre fond et son propre contour, ça creusait une bande vide
   à l'intérieur et doublait le trait. La carte se distingue toute seule — elle
   garde l'écart, elle n'a pas besoin du filet. */
#vue-aujourdhui > .bloc-ecrire { border-top: 0; padding-top: 0; }

/* --- « À quoi sert chaque page » --------------------------------------
   Les explications qui occupaient la tête des onglets. Chacune se lit une
   fois ; réunies ici, elles se trouvent quand on les cherche et ne pèsent
   plus sur les pages qu'on ouvre tous les jours. */

.pg-emoji { margin-right: 7px; }
.pg-sous {
  display: block; font-size: 12.5px; font-weight: 400;
  color: var(--texte-doux); margin-top: 2px;
}
.pg-corps p + p { margin-top: 10px; }
.pg-corps .aide { margin-top: 12px; }

/* Le renvoi en bas de la Mémoire : présent, jamais encombrant. */
.renvoi-explication {
  display: block; margin: 34px auto 12px;
  font-size: 13px; color: var(--texte-doux);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
}
.renvoi-explication:hover { color: var(--accent); }

/* ================================================================== */
/* JOUER : TROIS CHOSES, TROIS COULEURS                               */
/* ================================================================== */
/*
   Les trois blocs étaient au même niveau et de la même couleur : deux cartes
   côte à côte, puis la question du jour. On lisait trois propositions
   interchangeables, alors qu'il y en a une qui porte tout le reste.

   « Se souvenir » est la seule à faire ce qu'aucune galerie photo ne fait :
   rendre un souvenir qu'on avait laissé, et montrer au passage s'il tient
   encore. Elle passe donc en tête, seule, pleine largeur.

   « Raconter » et la « question du jour » forment le second groupe — les deux
   servent à écrire sur ce qu'on n'aurait pas pensé à écrire, et la question du
   jour n'est d'ailleurs qu'une question du catalogue, posée directement.

   ── Pourquoi des couleurs FIXES ─────────────────────────────────────────

   --vert, --bleu et --rouge ne sont pas retouchés par les ambiances : ils
   restent les mêmes sur le vélin comme sur le velours. C'est voulu. Une
   couleur ne sert de repère que si elle ne bouge pas — un code couleur qui
   change avec le papier n'est plus un code, c'est une décoration.
   L'accent, lui, suit l'ambiance : c'est la couleur de l'application, et la
   voie principale a le droit de la porter.
*/

/* --- 1. La voie principale --- */

.voie-maitresse {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 20px 20px 20px 22px; margin-bottom: 10px;
  text-align: left; font: inherit; color: var(--texte); cursor: pointer;
  border-radius: var(--rayon-grand);
  border: 1.5px solid color-mix(in srgb, var(--accent) 38%, var(--trait));
  background: color-mix(in srgb, var(--accent) 14%, var(--fond-carte));
  box-shadow: var(--ombre);
  transition: transform .15s, box-shadow .15s;
}
.voie-maitresse:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.voie-maitresse:active { transform: none; }
.voie-maitresse:disabled { opacity: .55; cursor: default; transform: none; }

.vm-corps { flex: 1; min-width: 0; display: grid; gap: 3px; }
.vm-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.vm-titre {
  font-family: var(--police-journal); font-size: 25px; font-weight: 600;
  line-height: 1.15; letter-spacing: -.01em;
}
.vm-sous { font-size: 13.5px; color: var(--texte-doux); line-height: 1.4; }

.vm-droite {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 1px;
  padding-left: 6px;
}
.vm-n {
  font-family: var(--police-journal); font-size: 28px; font-weight: 600;
  line-height: 1; color: var(--accent);
}
.vm-n-label { font-size: 10.5px; color: var(--texte-doux); }
.vm-fleche { color: var(--accent); font-size: 17px; margin-top: 5px; }

/* --- Le second groupe --- */

.bloc-section.groupe-raconter { margin-top: 30px; }
.bs-titre-petit { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

/* --- 2. La question du jour : sa couleur à elle --- */

.question-jour {
  border-color: color-mix(in srgb, var(--vert) 45%, var(--trait));
  background: color-mix(in srgb, var(--vert) 11%, var(--fond-carte));
}
.qj-sur { color: var(--vert); }
.question-jour .bouton.principal {
  background: linear-gradient(var(--vert), color-mix(in srgb, var(--vert) 70%, #000));
  color: #fff;
}

/* --- 3. Le catalogue : la même chose, en libre-service --- */

.voie-secondaire {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 17px; margin-top: 9px;
  text-align: left; font: inherit; color: var(--texte); cursor: pointer;
  border-radius: var(--rayon);
  border: 1.5px solid color-mix(in srgb, var(--bleu) 45%, var(--trait));
  background: color-mix(in srgb, var(--bleu) 9%, var(--fond-carte));
  transition: transform .15s, border-color .15s;
}
.voie-secondaire:hover { transform: translateY(-1px); }
.voie-secondaire:active { transform: none; }
.voie-secondaire:disabled { opacity: .55; cursor: default; transform: none; }

.vs-corps { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vs-titre { font-size: 15.5px; font-weight: 600; }
.vs-sous { font-size: 12.5px; color: var(--texte-doux); }
.vs-n {
  flex: 0 0 auto; min-width: 26px; height: 24px; padding: 0 8px;
  display: grid; place-items: center; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  background: color-mix(in srgb, var(--bleu) 24%, transparent);
  color: var(--bleu);
}
.vs-n:empty { display: none; }
.voie-secondaire .vm-fleche { color: var(--bleu); margin-top: 0; }

/* ================================================================== */
/* LES CAPSULES, REMONTÉES ET RECONNAISSABLES                         */
/* ================================================================== */
/*
   Elles étaient tout en bas de « Revenir », après la rétrospective, les
   souvenirs du jour, les moments, les pays et les souvenirs fragiles. Six
   sections à faire défiler avant de découvrir qu'on peut s'écrire une lettre
   à ouvrir dans dix ans — c'est la chose la plus singulière de la page, et
   c'était la moins visible.

   Sa couleur lui est propre : ce n'est ni du jeu, ni de la relecture. C'est le
   seul endroit de l'application qui regarde devant.
*/

.bloc-capsules {
  padding: 18px 19px; margin: 6px 0 26px;
  border-radius: var(--rayon-grand);
  border: 1.5px solid color-mix(in srgb, var(--rouge) 40%, var(--trait));
  background: color-mix(in srgb, var(--rouge) 10%, var(--fond-carte));
  box-shadow: var(--ombre);
}
.bc-tete { display: grid; gap: 3px; margin-bottom: 12px; }
.bc-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rouge);
}
.bc-titre {
  font-family: var(--police-journal); font-size: 21px; font-weight: 600;
  line-height: 1.2;
}
.bc-sous { font-size: 13.5px; color: var(--texte-doux); line-height: 1.45; }
.bc-bouton {
  margin-top: 12px;
  background: color-mix(in srgb, var(--rouge) 18%, transparent);
  border-color: color-mix(in srgb, var(--rouge) 45%, var(--trait));
  color: var(--texte);
}
.bc-bouton:hover { background: color-mix(in srgb, var(--rouge) 26%, transparent); }

/* ================================================================== */
/* LE SOUVENIR QUI ATTEND, SUR L'ACCUEIL                              */
/* ================================================================== */
/*
   C'était une ligne fine et grise sous les souvenirs remontés — une note de
   bas de page. C'est pourtant la seule invitation de l'accueil qui propose de
   faire ce que l'application sait faire de singulier.
   Le compte en grand : un nombre donne une prise qu'une phrase n'a pas, et il
   dit du même coup combien il en reste.
*/

.rappel-attente {
  display: flex; align-items: center; gap: 15px; width: 100%;
  padding: 17px 19px; cursor: pointer;
  text-align: left; font: inherit; color: var(--texte);
  border-radius: var(--rayon-grand);
  border: 1.5px solid color-mix(in srgb, var(--accent) 38%, var(--trait));
  background: color-mix(in srgb, var(--accent) 13%, var(--fond-carte));
  box-shadow: var(--ombre);
  transition: transform .15s, box-shadow .15s;
}
.rappel-attente:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.rappel-attente:active { transform: none; }
.rd-compte {
  flex: 0 0 auto;
  font-family: var(--police-journal); font-size: 36px; font-weight: 600;
  line-height: 1; color: var(--accent);
}
.rd-corps { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rappel-attente .rd-texte { font-size: 16.5px; font-weight: 600; }
.rd-sous { font-size: 13px; color: var(--texte-doux); }
.rappel-attente .rd-fleche { color: var(--accent); font-size: 18px; flex-shrink: 0; }

/* Ce bloc a maintenant son propre fond : le filet des « quatre temps » y
   ferait doublon, comme sur la carte d'écriture. */
#vue-aujourdhui > #rappel-discret.rappel-attente { border-top: 0; padding-top: 17px; }

/* ================================================================== */
/* LES CARNETS, EN TÊTE DE LA LISTE                                   */
/* ================================================================== */
/*
   Ils étaient tout en bas de l'onglet Journal, après toutes les entrées :
   personne ne descend jusque-là, donc personne ne savait qu'ils existaient.
   Ils avaient été descendus parce qu'en tête, avec leur paragraphe
   d'explication, ils repoussaient les entrées hors de l'écran — mais c'était
   l'explication le problème, pas la position.

   Une bande horizontale qui défile : sa hauteur ne dépend pas du nombre de
   carnets, donc les entrées restent à portée de regard quoi qu'il arrive.
*/

#bloc-carnets { margin-bottom: 18px; }
.carnets-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.carnets-tete .section-titre { margin: 4px 0 8px; }
.carnets-ouvrir {
  flex: 0 0 auto; font-size: 13px; color: var(--accent);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
}
.carnets-ouvrir:hover { text-decoration-color: var(--accent); }

/* LA DIRECTION, QUI MANQUAIT.
   La règle de base « .carnets » impose une colonne, et celle-ci ne la
   réinitialisait pas. Le rail horizontal décrit trois lignes plus haut n'a
   donc jamais existé : c'était une pile verticale de cartes étroites, et
   comme une colonne étire ses enfants sur toute la largeur disponible, elles
   faisaient toutes la même taille. Une tuile de 158 px avec un emoji, deux
   marges et une flèche laissait une soixantaine de pixels au texte — « Mon
   enfance / Aucune entrée pour l'instant » s'y cassait à un mot par ligne et
   montait à sept lignes de haut. D'où un bloc énorme pour dire qu'un carnet
   est vide.

   En ligne, les quatre carnets tiennent sur la hauteur d'un seul. */
#bloc-carnets .carnets {
  display: flex; flex-direction: row; gap: 9px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: none;
}
#bloc-carnets .carnets::-webkit-scrollbar { display: none; }
/* LA TUILE D'UN CARNET.

   Elle faisait 158 px de large avec 16 px de marge intérieure de chaque côté,
   un emoji de 26 px et une flèche : il restait une soixantaine de pixels pour
   le texte. « Mon enfance / Aucune entrée pour l'instant » s'y cassait à un
   mot par ligne et la tuile montait à sept lignes de haut — un bloc énorme
   pour dire qu'un carnet est vide.

   Trois corrections, et c'est la première qui compte :

     — la largeur suit le contenu au lieu d'être fixe. Un carnet qui s'appelle
       « Japon » n'a aucune raison d'occuper la même place que « Mon enfance
       en Bretagne ». Le plafond est là pour les noms trop longs, et
       l'ellipse s'en charge ;
     — chaque ligne tient sur une ligne. C'est ce qui borne la hauteur : deux
       lignes, quoi qu'on écrive dans le nom du carnet ;
     — la flèche est partie. Elle prenait de la largeur sur une tuile qui en
       manquait, pour indiquer que quelque chose de cliquable est cliquable.

   Le reste rétrécit à l'avenant : l'emoji, les marges, les corps de texte.
*/
#bloc-carnets .carnet {
  flex: 0 0 auto;
  width: auto;
  max-width: 200px;
  gap: 10px;
  padding: 10px 13px;
  border-radius: var(--rayon);
}
#bloc-carnets .carnet-emoji { font-size: 19px; }
/* Un « flex: 1 » sur le corps forçait CHAQUE tuile à la largeur maximale, même
   « Japon ». Un enfant qui grandit avec une base de 0 fait grossir le calcul
   de largeur intrinsèque de son parent : la tuile n'a plus besoin de grandir,
   elle a besoin de pouvoir rétrécir. */
#bloc-carnets .carnet-corps { flex: 0 1 auto; min-width: 0; }
#bloc-carnets .carnet-nom,
#bloc-carnets .carnet-meta {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#bloc-carnets .carnet-nom { font-size: 14px; }
#bloc-carnets .carnet-meta { font-size: 11.5px; margin-top: 1px; }
#bloc-carnets .carnet-jauge { height: 3px; margin-top: 6px; }

/* Le filet des « quatre temps » désignait #bloc-dernier, qui n'existe plus.
   « À développer » hérite donc du sien. */
#vue-aujourdhui > #bloc-brouillons {
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, var(--trait) 65%, transparent);
}

/* Aucun carnet : une ligne, pas un paragraphe. Le bloc est en tête de la
   liste — trois lignes d'explication y repousseraient les entrées hors de
   l'écran, ce qui était précisément la raison de l'ancien exil en bas de page. */
.carnets-vide { margin: 2px 0 0; font-size: 12.5px; }

/* ================================================================== */
/* LA CARTE D'ÉCRITURE DIT CE QU'EST L'APPLICATION                    */
/* ================================================================== */
/*
   Le bloc arrivait en dixième position. On voyait d'abord une citation de
   philosophe et une rangée d'humeurs : ça ressemblait à une application de
   bien-être, pas à un journal intime — et l'invitation à écrire n'apparaissait
   qu'après avoir fait défiler tout le reste.

   Il est maintenant le premier objet de la page après le rituel d'ouverture,
   et il est de loin le plus gros. Trois lignes le nomment :

     l'étiquette dit l'objet — « ton journal », pas « une note » ;
     la question invite au lieu de demander de remplir un champ ;
     la promesse de confidentialité dit ce qui distingue un journal intime de
     tout le reste — et elle est vraie au pied de la lettre.
*/

.be-principal { padding: 21px 20px 18px; gap: 5px; }

.be-etiq {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}

/* La question est dans la police du journal, pas dans celle de l'interface.
   C'est un détail et c'est tout le sujet : une invitation à écrire posée dans
   la typographie d'un formulaire se lit comme un formulaire. */
.be-question {
  font-family: var(--police-journal);
  font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
}
.be-invite { font-size: 13.5px; color: var(--texte-doux); }

.be-prive {
  display: flex; align-items: center; gap: 6px;
  margin-top: 9px; font-size: 12px; color: var(--texte-doux);
  opacity: .85;
}
.be-prive svg { width: 13px; height: 13px; flex-shrink: 0; }

/* La carte est la plus grosse chose de la page : c'est le geste central, et
   sa taille doit le dire avant qu'on ait lu un mot. */
.bloc-ecrire { margin-bottom: 4px; }

/* --- Installer sur le téléphone ---------------------------------------
   Sur iOS il n'existe aucune API : l'installation passe uniquement par le
   menu Partager de Safari, et rien dans l'interface ne le laisse deviner. Le
   mode d'emploi est donc écrit — c'est la seule voie possible, pas un pis-
   aller de paresse. */

.etapes-install {
  list-style: none; counter-reset: etape;
  display: grid; gap: 12px; margin: 16px 0 14px; padding: 0;
}
.etapes-install li {
  counter-increment: etape;
  display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start;
}
.etapes-install li::before {
  content: counter(etape);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.ei-titre { display: block; font-size: 14.5px; line-height: 1.4; }
.ei-detail { display: block; font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; }

/* ================================================================== */
/* LES ITINÉRAIRES                                                    */
/* ================================================================== */
/*
   La carte posait des points. Un voyage n'est pas un nuage de points : c'est
   un ordre — on est parti de là, on est passé par là, on a fini ici. C'est cet
   ordre qu'on raconte, et c'est exactement ce que la carte perdait.

   Le tracé suit le grand cercle, pas la ligne droite de la projection : un
   Paris–Tokyo droit sur une carte plate ne décrit aucun trajet réel.
*/

.atlas-routes {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 10px 0 2px; scrollbar-width: none;
}
.atlas-routes::-webkit-scrollbar { display: none; }

.chip-route {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid var(--trait); background: var(--fond-carte);
  font: inherit; font-size: 13px; color: var(--texte-doux); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip-route:hover { border-color: var(--accent); }
.chip-route[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--sur-accent); font-weight: 600;
}
.cr-emoji { font-size: 14px; }
.cr-n {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.atlas-resume-route {
  font-size: 13px; color: var(--texte-doux);
  margin: 8px 0 2px; line-height: 1.45;
}

/* --- Le tracé --- */

.at-trace {
  fill: none; stroke: var(--accent);
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2 1.6; opacity: .85;
}

/* --- Les étapes, numérotées dans le sens du trajet --- */

.at-etape { cursor: pointer; }
.at-etape-rond {
  fill: var(--accent); stroke: var(--fond-carte); stroke-width: .5;
}
.at-etape-nb {
  fill: var(--sur-accent); text-anchor: middle; font-weight: 700;
  pointer-events: none; font-family: var(--police);
}
.at-etape:hover .at-etape-rond { fill: var(--accent-fonce); }
.at-etape:focus-visible { outline: none; }
.at-etape:focus-visible .at-etape-rond { stroke: var(--texte); stroke-width: .8; }

/* ================================================================== */
/* LE TROISIÈME JEU : LE RAPPEL LIBRE                                 */
/* ================================================================== */
/*
   Les deux autres jeux interrogent toujours UNE entrée, et toujours avec un
   indice. Celui-ci ne donne rien : un mois, une page blanche, et ce qui
   revient. Il a donc sa couleur à lui — la quatrième et dernière des teintes
   fixes, celle qui ne bouge pas d'une ambiance à l'autre.
*/

.bloc-section.groupe-rappel { margin-top: 30px; }

.voie-rappel {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 18px 19px; margin-top: 2px;
  text-align: left; font: inherit; color: var(--texte); cursor: pointer;
  border-radius: var(--rayon-grand);
  border: 1.5px solid color-mix(in srgb, var(--prune) 45%, var(--trait));
  background: color-mix(in srgb, var(--prune) 12%, var(--fond-carte));
  box-shadow: var(--ombre);
  transition: transform .15s, box-shadow .15s;
}
.voie-rappel:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.voie-rappel:active { transform: none; }
.voie-rappel[hidden] { display: none; }

.vr-corps { flex: 1; min-width: 0; display: grid; gap: 3px; }
.vr-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--prune);
}
.vr-titre {
  font-family: var(--police-journal); font-size: 21px; font-weight: 600;
  line-height: 1.2;
}
.vr-sous { font-size: 13px; color: var(--texte-doux); line-height: 1.4; }
.vr-droite { flex: 0 0 auto; display: grid; justify-items: center; gap: 3px; }
.vr-n {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: color-mix(in srgb, var(--prune) 22%, transparent);
  color: var(--prune);
}
.vr-n:empty { display: none; }
.voie-rappel .vm-fleche { color: var(--prune); margin-top: 0; }

/* --- L'écran : la page blanche ------------------------------------- */

#rappel-corps { padding: 0 var(--gouttiere) 40px; }

.rap-consigne {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--prune); margin-top: 16px;
}
.rap-mois {
  font-family: var(--police-journal); font-size: 32px; font-weight: 600;
  line-height: 1.1; margin: 4px 0 8px; text-transform: capitalize;
}
.rap-aide { font-size: 14.5px; color: var(--texte-doux); line-height: 1.5; }

#rap-texte {
  width: 100%; margin-top: 16px; padding: 15px 16px;
  border-radius: var(--rayon); border: 1.5px solid var(--trait);
  background: var(--fond-carte); color: var(--texte);
  font-family: var(--police-journal); font-size: var(--taille-corps);
  line-height: var(--interligne); resize: vertical;
}
#rap-texte:focus { outline: none; border-color: var(--prune); }

#rap-compte { text-align: right; margin-top: 5px; font-size: 11.5px; }
.rap-note { margin-top: 12px; text-align: center; }

/* --- L'écran : l'écart --------------------------------------------- */

.rap-verdict {
  font-family: var(--police-journal); font-size: 21px; line-height: 1.35;
  margin: 18px 0 8px;
}
.rap-liste { list-style: none; display: grid; gap: 2px; margin: 14px 0 16px; }

.rap-ligne {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--trait) 55%, transparent);
}
.rap-ligne:last-child { box-shadow: none; }

/* Le repère bascule d'un côté à l'autre : la correspondance automatique se
   trompe forcément, et ce classement décide de ce qui reviendra plus tôt. */
.rap-bascule {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1;
  border: 1.5px solid var(--trait); background: none; color: var(--texte-doux);
  transition: background .15s, border-color .15s, color .15s;
}
.rap-ligne.revenu .rap-bascule {
  background: color-mix(in srgb, var(--vert) 22%, transparent);
  border-color: color-mix(in srgb, var(--vert) 60%, var(--trait));
  color: var(--vert); font-weight: 700;
}

.rap-corps {
  flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.rap-titre { font-size: 15px; font-weight: 600; }
.rap-ligne.reste .rap-titre { color: var(--texte-doux); }
.rap-date { font-size: 12px; color: var(--texte-doux); }

.rap-suite {
  font-size: 14px; color: var(--texte-doux); line-height: 1.5;
  padding: 13px 15px; margin-bottom: 16px;
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--prune) 10%, var(--fond-carte));
  border: 1.5px solid color-mix(in srgb, var(--prune) 35%, var(--trait));
}

.rap-relire { margin-top: 22px; }
.rap-mien {
  font-family: var(--police-journal); line-height: var(--interligne);
  white-space: pre-wrap;
}

/* ================================================================== */
/* LE RETOUR APRÈS UNE ABSENCE                                        */
/* ================================================================== */
/*
   Volontairement discret. La tentation serait d'en faire une bannière, avec
   une bordure épaisse et une couleur d'alerte — et une bannière, à ce
   moment-là, se lit comme un reproche : « il s'est passé quelque chose,
   regarde ». Or il ne s'est rien passé. On rend juste un souvenir.

   Pas de teinte fixe, donc : le papier de l'ambiance, un filet, et c'est
   tout. Les quatre couleurs réservées (--vert, --bleu, --rouge, --prune)
   servent à distinguer des choses entre elles ; ici il n'y a rien à
   distinguer, il n'y a qu'une seule chose.
*/

.retour {
  margin: 4px var(--gouttiere) 22px;
  padding: 16px 17px 14px;
  border-radius: var(--rayon-grand);
  border: 1.5px solid var(--trait);
  background: var(--fond-carte);
  box-shadow: var(--ombre);
}
.retour[hidden] { display: none; }

.ret-titre {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texte-doux);
}
.ret-pourquoi {
  font-family: var(--police-journal); font-size: 19px; line-height: 1.3;
  margin: 3px 0 12px;
}

/* La carte du souvenir vit à l'intérieur : elle ne doit pas porter une
   seconde fois le cadre et l'ombre du bloc qui la contient. */
.retour #ret-carte .carte {
  background: none; border: 0; box-shadow: none;
  padding-left: 0; padding-right: 0;
}

.ret-suite {
  margin-top: 10px; padding-top: 11px;
  font-size: 13px; color: var(--texte-doux); line-height: 1.45;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--trait) 60%, transparent);
}

/* ================================================================== */
/* PROFIL : L'ACCORDÉON, ET L'ALIGNEMENT DES RUBRIQUES                */
/* ================================================================== */

/* CHAQUE RUBRIQUE PORTE SON PANNEAU.
   Il n'y en avait qu'un, après la liste entière. Ouvrir « Langue », deuxième
   ligne sur huit, faisait apparaître le contenu six rubriques plus bas :
   hors de l'écran sur un téléphone, et sans lien visible avec ce qu'on venait
   de toucher. */
.mp-bloc { display: contents; }
.mp-bloc[hidden] { display: none; }

.mp-panneau {
  margin: 2px 0 8px;
  padding: 16px;
  border-radius: var(--rayon-grand);
  background: var(--fond-carte);
  border: 1px solid var(--accent);
}
.mp-panneau[hidden] { display: none; }
.mp-panneau:empty { display: none; }
/* Le panneau prolonge la ligne qu'on vient de toucher : les deux se touchent
   par un coin, ce qui dit lequel a ouvert lequel. */
.mp-ligne.actif { border-color: var(--accent); }
.mp-ligne.actif .mp-fleche { transform: rotate(90deg); }
.mp-fleche { transition: transform .15s; display: inline-block; }

/* « À QUOI SERT CHAQUE PAGE » : QUATRE COLONNES, PAS QUATRE FLOTTEURS.

   Le résumé était un `flex` en `space-between` dont le nom de la page était un
   nœud de texte anonyme. Trois éléments de largeurs différentes répartis à
   l'espace disponible : le nom tombait quelque part au milieu, le sous-titre
   quelque part à droite, et à chaque ligne ailleurs. Rien n'était aligné avec
   rien.

   Une grille aux colonnes fixes règle ça une fois : l'icône dans la même
   gouttière que celle des rubriques au-dessus (24 px), le nom dans une
   colonne assez large pour le plus long d'entre eux, le sous-titre qui prend
   le reste, le chevron au bout. */
.repli.pg > summary {
  display: grid;
  grid-template-columns: 24px 6.5em 1fr auto;
  align-items: baseline;
  gap: 12px;
}
.repli.pg > summary .pg-emoji { margin-right: 0; text-align: center; }
.pg-nom { font-weight: 600; }
.repli.pg > summary .pg-sous {
  margin-top: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sous 380 px, six caractères et demi de colonne pour le nom ne laissent plus
   rien au sous-titre : il passe sous le nom plutôt que de s'abréger à deux
   mots. */
@media (max-width: 380px) {
  .repli.pg > summary {
    grid-template-columns: 24px 1fr auto;
    align-items: center;
  }
  .repli.pg > summary .pg-sous {
    grid-column: 2 / 3; white-space: normal;
  }
  .pg-nom { grid-column: 2 / 3; }
}

/* L'identité, en tête du panneau Compte. */
.cp-identite {
  margin: 14px 0 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--trait);
}
.cp-pseudo {
  font-family: var(--police-journal); font-size: 22px; font-weight: 600;
}

/* LA PORTE D'ENTRÉE.
   Elle réutilise l'habillage du verrou — même fond plein écran, même boîte —
   parce que c'est le même moment : on est devant Madeleine, pas encore
   dedans. Elle est seulement plus large, un formulaire à deux champs ne
   tenant pas dans la largeur d'un code à quatre chiffres. */
.bienvenue-boite { max-width: 380px; text-align: left; }
.bienvenue-boite .verrou-emoji,
.bienvenue-boite h1,
.bienvenue-boite .verrou-sous { text-align: center; }
.bienvenue-boite .champ { margin-top: 16px; }
.bienvenue-boite input {
  width: 100%; padding: 12px 13px; font: inherit;
  border-radius: var(--rayon); border: 1.5px solid var(--trait);
  background: var(--fond); color: var(--texte);
}
.bienvenue-boite input:focus { outline: none; border-color: var(--accent); }
.bienvenue-boite .bouton { margin-top: 18px; }
/* La note de fin dit ce que le compte ne fait pas. Elle est séparée par un
   filet : c'est une réserve, pas un argument de vente. */
.bv-note {
  margin-top: 18px; padding-top: 14px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--trait) 60%, transparent);
  line-height: 1.5;
}