/* ============================================================
   sonum.css — ce qui distingue le carnet de SoNum
   ------------------------------------------------------------
   Chargée APRÈS socle.css, carnet.css et document.css (copiés du carnet d'Acabaná le 17/09) :
   elle redéfinit les jetons — mêmes noms, autres valeurs — et habille ce que le carnet d'un
   groupe de recherche fait de plus : notes privées, note de section, navigation du document,
   liste des réunions, projection.

   Palette : encre bleu nuit et papier clair, un bleu d'encre pour l'accent.
   Contrastes sur --coquille (#F4F3EE) : encre 15:1 · bleu 9,3:1 · ardoise 5,4:1 · brique 8:1.
   ============================================================ */

:root {
  --coquille: #F4F3EE;
  --papier: #FBFAF7;
  --lin: #E3E6EA;
  --encre: #1B2230;
  --foret: #23407A;          /* l'accent : bleu d'encre (le nom du jeton vient du carnet d'origine) */
  --sous-bois: #3A4556;
  --sauge: #5B6579;
  --toile: #8A6D3B;
  --travertin: #C9A45C;
  --eau: #93A3B8;
  --tuile: #A0674F;
  --tuile-encre: #8A3B2A;
  --trait: rgba(27, 34, 48, .12);
  --trait-fort: rgba(27, 34, 48, .28);
}

body.carnet, body.crn-porche { background-image: none; }
.carnet { padding-bottom: 48px; }

/* ---------- le porche, sans photo ---------- */

.porche.porche-sans-image { grid-template-columns: 1fr; place-items: center; }
.porche-sans-image .porche-corps { padding: 56px var(--marge); }

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

.qui-nom small {
  margin-left: .35em; padding: 0 .5em; border-radius: 999px; background: var(--foret); color: var(--coquille);
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- la navigation du document (grand écran) ---------- */

crn-nav { display: none; }
@media (min-width: 960px) {
  crn-nav { display: block; }
  .nav-doc { position: sticky; top: 72px; padding: 26px 0 24px var(--marge); max-height: calc(100vh - 80px); overflow: auto; font-size: .9rem; }
  .nav-doc .surtitre { margin: 0 0 .5rem; }
  .nav-doc ol, .nav-doc ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1px; }
  .nav-doc a { display: block; padding: .38rem .6rem; border-left: 2px solid transparent; color: var(--sous-bois); text-decoration: none; line-height: 1.3; }
  .nav-doc a:hover { color: var(--foret); background: var(--papier); }
  .nav-doc a[aria-current] { color: var(--foret); border-left-color: var(--foret); background: var(--papier); font-weight: 700; }
  .nav-doc li.annexe a { font-size: .84rem; }
}

/* ---------- l'accueil : les réunions ---------- */

.reunions { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: grid; gap: .8rem; }
.reunions a { display: grid; gap: .25rem; padding: 16px 18px; border: 1px solid var(--trait-fort); border-radius: var(--r); background: var(--papier); color: var(--encre); text-decoration: none; }
.reunions a:hover { border-color: var(--foret); }
.reunions b { font-family: var(--f-titre); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var(--foret); }
.reunions .resume { color: var(--sous-bois); font-size: .95rem; }
.reunions .version { font-size: .75rem; color: var(--sauge); }
/* L'historique (08/10) : par séance ; une version prolongée reste, en retrait. */
.seance + .seance { margin-top: 2.2rem; }
.seance-titre { font-family: var(--f-texte); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sauge); margin: 0; }
.reunions li.prolongee a { background: transparent; border-style: dashed; }
.reunions li.prolongee b { font-size: 1.35rem; color: var(--sous-bois); }
.filiation { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .4rem 0 0; font-size: .82rem; color: var(--sauge); }
.reunions .filiation { margin: .35rem 18px 0; }
.filiation .version { font-weight: 700; }

/* ---------- tableaux : la première colonne passe à la ligne ----------
   document.css la garde sur une ligne (des libellés courts chez Acabaná) ; ici elle porte des
   phrases, et le tableau devenait illisible, en projection surtout. */
.d-tableau td:first-child { white-space: normal; min-width: 8rem; }

/* ---------- les notes : six natures (« Réponse », 08/10), deux envois ---------- */

.d-natures { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 520px) {
  .d-natures { grid-template-columns: repeat(3, 1fr); }
  .d-natures label { border-bottom: 1px solid var(--trait-fort); }
}
.d-envois { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.d-case-aide { margin: -.2rem 0 0; font-size: .85rem; color: var(--sous-bois); }
.d-note-tete b { color: var(--foret); }
.d-note[data-nature='action'] { border-left-color: var(--foret); }
.d-note[data-nature='decision'] { border-left-color: var(--toile); }
.d-note[data-privee] { border-style: dashed; border-left: 3px solid var(--sauge); background: color-mix(in srgb, var(--papier) 65%, var(--lin)); }
.d-pastille-privee { color: var(--sauge); }
.d-partager { border-color: var(--foret); color: var(--foret); }
.d-tout-partager { justify-content: space-between; padding: .6rem .8rem; border: 1px dashed var(--trait-fort); border-radius: var(--r); font-size: .88rem; color: var(--sous-bois); }

/* « ＋ note » sur un titre de section */
.d-note-section {
  margin-left: .6rem; vertical-align: .35em; min-height: 26px; padding: 0 .6em;
  border: 1px dashed var(--trait-fort); border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--f-texte); font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--sauge);
  opacity: .55; transition: opacity .15s, color .15s, border-color .15s;
}
.d-h2:hover .d-note-section, .d-note-section:focus-visible { opacity: 1; }
.d-note-section:hover { color: var(--foret); border-color: var(--foret); opacity: 1; }
@media (hover: none) { .d-note-section { opacity: 1; } }

/* le rôle, au bout de la barre d'outils */
.d-role { border-style: solid; border-color: var(--trait-fort); color: var(--sous-bois); }
.d-role[data-publie] { border-color: var(--foret); color: var(--foret); }

/* ---------- projeter ---------- */

body.projection crn-entete, body.projection .d-aide, body.projection .d-sommaire { display: none; }
body.projection .page-document { max-width: 1240px; }
body.projection .d-doc { font-size: 1.3rem; }
body.projection .d-doc p.d-bloc, body.projection .d-liste, body.projection .d-encart, body.projection .d-notes,
body.projection .d-version, body.projection .d-proposition { max-width: 74ch; }
body.projection .d-encart p.d-bloc { font-size: 1.2rem; }
body.projection .d-tete .titre-page { font-size: clamp(3rem, 7vw, 5.4rem); }
body.projection .d-h2 { font-size: clamp(2.4rem, 4.4vw, 3.4rem); margin-top: 1.4rem; }
body.projection .d-doc h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
body.projection .d-section { min-height: calc(100vh - 70px); }
body.projection .d-tableau table { font-size: 1.08rem; }
body.projection .d-tableau th { font-size: .8rem; }
body.projection .d-note { font-size: 1.05rem; }
@media (min-width: 960px) {
  body.projection .carnet-corps { max-width: 1560px; grid-template-columns: 240px minmax(0, 1fr); }
  body.projection .nav-doc { top: 64px; }
}

/* ---------- répondre ---------- */

.d-reponses { display: grid; gap: .45rem; margin: .6rem 0 0; padding-left: .8rem; border-left: 2px solid var(--lin); }
.d-reponse { font-size: .9rem; }
.d-reponse-tete { font-size: .75rem; color: var(--sauge); }
.d-reponse-texte { margin: .1rem 0 0; white-space: pre-wrap; }
.d-reponse .d-supprimer { min-height: 26px; margin-top: .2rem; }
.d-repondre { display: grid; gap: .4rem; margin-top: .6rem; }
.d-repondre textarea { min-height: 64px; }
.d-note.d-retour { border-left-color: var(--eau); }

/* ---------- supprimer ---------- */

.d-supprimer:hover { border-color: var(--tuile-encre); color: var(--tuile-encre); }

/* ---------- lecture : le texte seul, les corrections en suivi de modifications ---------- */

body.lecture .d-puce, body.lecture .d-notes, body.lecture .d-note-section, body.lecture .d-proposition,
body.lecture .d-version, body.lecture .d-aide { display: none !important; }
body.lecture .d-marque { background: none; cursor: auto; }
body.lecture .d-marque.d-corr-del { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--tuile-encre); }
.d-corr { margin-left: .2em; padding: 0 .15em; border-radius: 2px; background: rgba(35, 64, 122, .12); color: var(--foret); text-decoration: none; }

@media print {
  crn-nav, .d-note-section { display: none !important; }
  body.lecture .d-marque.d-corr-del { text-decoration: line-through !important; }
  .d-corr { background: none; text-decoration: underline; }
}

/* ---------- en-tête sur téléphone (08/10) ----------
   À 375 px, la marque, le nom et les deux liens dépassaient de 32 px : la page glissait de côté.
   Le sous-titre de la marque s'efface, les liens se resserrent. */
@media (max-width: 480px) {
  .marque span { display: none; }
  .qui { gap: .45rem; }
}

/* ---------- « ＋ » et « Répondre » (08/10) — repris de la fin de lecteur.css (sis-lecteur, 07/10) ----------
   « ＋ » au bout de chaque bloc et de chaque rangée de tableau : une note sans rien sélectionner ;
   « Répondre » là où le texte pose une question. Le signal « Prêt pour l'IA » n'existe qu'en local. */
.d-plus { margin-left: .45em; padding: 0 .5em; min-width: 1.7em; height: 1.55em; line-height: 1.45; font: inherit; font-size: .78rem;
  vertical-align: .08em; border: 1px solid var(--lin); border-radius: 1em; background: var(--papier); color: var(--sauge);
  cursor: pointer; opacity: .28; transition: opacity .15s; }
.d-bloc:hover > .d-plus, tr:hover .d-plus, .d-plus:focus-visible { opacity: 1; }
@media (hover: none) { .d-plus { opacity: .65; } }
td > .d-plus:first-child { margin: 0 .45em 0 0; }
.d-plus-q { opacity: 1; border-color: var(--foret); color: var(--foret); font-weight: 700; }
.d-plus-q[data-repondu] { border-color: var(--lin); color: var(--sauge); font-weight: 400; opacity: .8; }
.d-note[data-nature="reponse"] { border-left-color: var(--foret); }
.d-tableau { overflow-x: auto; }
@media print { .d-plus { display: none !important; } }

/* ---------- l'entrée par lien personnel (10/10) ---------- */
.porche-lien { margin: 1.4rem 0 1rem; padding: 16px 18px; border: 1px solid var(--trait-fort); border-radius: var(--r); background: var(--papier); }
.porche-lien p { margin: 0 0 .6rem; }
.porche-lien p:last-child { margin-bottom: 0; }
.porche-lien .aide { font-size: .92rem; color: var(--sous-bois); }
.porche-repli { margin: 0 0 1rem; }
.porche-repli summary { cursor: pointer; font-size: .9rem; color: var(--sauge); }
.porche-repli[open] summary { margin-bottom: .8rem; }
.porche-noscript { padding: 16px; text-align: center; }

/* ---------- « À la une » (10/10) : ce qu'on attend du groupe ---------- */
.a-la-une { margin-bottom: 2.2rem; }
.a-la-une .reunions a { border: 2px solid var(--foret); background: var(--papier); }
.a-la-une .resume { color: var(--encre); font-weight: 700; }
.a-la-une-bandeau { margin: .8rem 0 0; padding: .6em .9em; border-left: 4px solid var(--foret); background: var(--papier); font-weight: 700; color: var(--foret); }

/* ---------- centrage (retour de Cédrick, 10/10 : « cette page n'est pas centrée ») ----------
   carnet.css met `.page { margin: 0 }` sur grand écran, pour la grille des documents (navigation à
   gauche). Hors de cette grille — l'accueil, le profil, l'administration — la page se recentre. */
@media (min-width: 960px) {
  body > .page { margin: 0 auto; }
  .page-tableau, .page-compte { max-width: 860px; }
}

/* ---------- le tableau de bord (10/10) ---------- */
.tb-bloc { margin: 0 0 2.2rem; }
.tb-carte { display: grid; gap: .35rem; padding: 16px 18px; border: 1px solid var(--trait-fort); border-radius: var(--r); background: var(--papier); }
.tb-titre { font-family: var(--f-titre); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--foret); }
.tb-prochaine { border: 2px solid var(--foret); }
.tb-quand { margin: 0; font-weight: 700; color: var(--encre); }
.tb-seances { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; }
.tb-seances .resume, .tb-carte .resume { margin: 0; color: var(--sous-bois); font-size: .95rem; }
.tb-presents { margin: 0; font-size: .88rem; color: var(--sous-bois); }
.tb-presents .etiquette { margin-right: .3em; }
.tb-absents { color: var(--sauge); }
.tb-liens { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: .3rem 0 0; }
.tb-liens .bouton-lien { min-height: 32px; display: inline-flex; align-items: center; }
.lien-discret { font-size: .9rem; color: var(--sous-bois); }
.badge { display: inline-block; margin-left: .4em; padding: 0 .55em; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: var(--lin); color: var(--encre); vertical-align: .1em; }
.badge-prive { margin: .8rem 0 0; padding: .5em .9em; border-left: 4px solid var(--sauge); background: var(--papier); font-size: .92rem; color: var(--sous-bois); }

/* ---------- le profil et l'administration (10/10) ---------- */
.cpt-bloc { margin: 0 0 1.4rem; padding: 16px 18px; border: 1px solid var(--trait-fort); border-radius: var(--r); background: var(--papier); }
.cpt-bloc > h2, .cpt-bloc > summary { margin: 0 0 .6rem; font-family: var(--f-titre); font-weight: 400; font-size: 1.45rem; color: var(--foret); }
.cpt-bloc > summary { cursor: pointer; }
details.cpt-bloc:not([open]) > summary { margin: 0; }
.cpt-bloc p { margin: .4rem 0; }
.chip { display: inline-block; margin: 0 .3em .2em 0; padding: .1em .6em; border-radius: 999px; background: var(--lin); font-size: .8rem; font-weight: 700; }
.cpt-interrupteur { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 700; cursor: pointer; }
.cpt-interrupteur input { width: 22px; height: 22px; accent-color: var(--foret); }
.cpt-appareils { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.cpt-appareils li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; padding: .5rem 0; border-top: 1px solid var(--trait); }
.cpt-app-quoi { flex: 1 1 12rem; }
.cpt-app-quand { font-size: .82rem; color: var(--sauge); }
.etat { font-size: .78rem; font-weight: 700; padding: .05em .55em; border-radius: 999px; }
.etat-ok { background: #E2F2E6; color: #1C5530; }
.etat-off { background: var(--lin); color: var(--sous-bois); }
.adm-personnes { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.adm-carte { padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--coquille); }
.adm-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.adm-tete b { font-size: 1.05rem; }
.adm-nom { color: var(--sous-bois); font-size: .9rem; }
.adm-lien { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; margin: .4rem 0; }
.adm-lien .bouton-lien { min-height: 32px; }
.adm-apps summary { cursor: pointer; font-size: .88rem; color: var(--sous-bois); }
.adm-boite-lien { border: 2px solid var(--foret); }
.adm-lien-champ { width: 100%; padding: .55em .7em; font: inherit; font-size: .9rem; border: 1px solid var(--trait-fort); border-radius: var(--r); background: var(--coquille); }
.adm-form { display: grid; gap: .8rem; margin-top: .6rem; }
.adm-roles { display: flex; flex-wrap: wrap; gap: .3rem 1rem; border: 0; padding: 0; margin: 0; }
.adm-roles legend { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sous-bois); margin-bottom: .3rem; }
.adm-role { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; }
.porche-coller { margin-top: .8rem; }
.porche-coller summary { cursor: pointer; font-size: .9rem; color: var(--foret); font-weight: 700; }
.porche-coller .porche-form { margin-top: .6rem; }
.qui a.qui-nom { text-decoration: none; color: var(--encre); }