/* E1 : chaque valeur vient du reglage `atelier_jetons` (migration 178), rendu en
   :root par fabrique/interface/jetons.py dans base.html. Aucune valeur ici. */
/* O1 (18/10/2026) -- identite visuelle « la table du correcteur » : fond blanc
   legerement froid, encre presque noire, un seul accent vermillon reserve a
   l'action principale et a ce qui demande l'attention, une seule famille
   (Schibsted Grotesk), filets fins plutot que cartes, angles de 4 px au plus,
   ni degrade ni ombre. Les regles O1 sont a la fin de ce fichier. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre);
       font-family: var(--police-texte); font-size: var(--taille-15); line-height: 1.5; }
h1, h2, .marque { font-family: var(--police-titre); font-weight: 600; }
h1 { font-size: var(--taille-28); margin: 0 0 var(--espace-8); }
h2 { font-size: var(--taille-19); margin: var(--espace-28) 0 var(--espace-10); }
a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }
.chapeau { color: var(--encre-2); margin: 0 0 var(--espace-20); }
.etiquette { font-size: var(--taille-11); letter-spacing: .06em; text-transform: uppercase; color: var(--discret); margin-right: var(--espace-6); }

/* Ecran de connexion et pages de refus */
.porte { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--espace-24) var(--espace-16); }
.porte-carte { width: 100%; max-width: 400px; background: var(--surface); border: var(--trait-epaisseur) solid var(--trait);
               border-radius: var(--rayon-12); padding: var(--espace-32) var(--espace-28); }
.porte-carte .marque { font-size: var(--taille-25); margin: 0 0 var(--espace-20); }
form { display: flex; flex-direction: column; gap: var(--espace-6); }
label { font-size: var(--taille-14); font-weight: 500; margin-top: var(--espace-10); }
input[type=email], input[type=password] { font: inherit; padding: var(--espace-11) var(--espace-12); border: var(--trait-epaisseur) solid var(--bordure-champ);
               border-radius: var(--rayon-8); background: var(--surface); color: var(--encre); min-height: var(--cible-min); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: var(--focus-epaisseur) solid var(--accent-fonce); outline-offset: var(--espace-2); }
button { font: inherit; cursor: pointer; border-radius: var(--rayon-8); min-height: var(--cible-min); padding: var(--espace-10) var(--espace-16); }
button.principal { margin-top: var(--espace-20); background: var(--accent); color: var(--texte-sur-accent); border: none; font-weight: 600; }
button.principal:hover { background: var(--accent-fonce); }
button.secondaire { background: var(--surface); color: var(--encre-2); border: var(--trait-epaisseur) solid var(--trait); }
.erreur, .message { background: var(--alerte-pale); color: var(--alerte); border-radius: var(--rayon-8); padding: var(--espace-10) var(--espace-12); margin: 0 0 var(--espace-8); }
.note { background: var(--accent-pale); color: var(--accent-fonce); border-radius: var(--rayon-8); padding: var(--espace-10) var(--espace-12); }

/* Cadre apres connexion */
.bandeau { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-16);
           padding: var(--espace-12) var(--espace-24); background: var(--surface); border-bottom: var(--trait-epaisseur) solid var(--trait); flex-wrap: wrap; }
.bandeau .marque { font-size: var(--taille-22); text-decoration: none; color: var(--encre); }
.qui { display: flex; align-items: center; gap: var(--espace-12); color: var(--encre-2); }
.contenu { max-width: 880px; margin: 0 auto; padding: var(--espace-32) var(--espace-16); }
.espaces { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espace-10); }
.espaces a { display: flex; justify-content: space-between; align-items: center; gap: var(--espace-16); flex-wrap: wrap;
             background: var(--surface); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10);
             padding: var(--espace-16) var(--espace-18); text-decoration: none; color: var(--encre); min-height: var(--cible-min); }
.espaces a:hover { border-color: var(--accent); }
.espace-nom { font-weight: 600; }
.espace-role { color: var(--encre-2); }
.droits li { margin: var(--espace-4) 0; }

/* C39 -- ecran de commande et page de suivi */
.bouton-principal { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: var(--espace-10) var(--espace-18);
                    background: var(--accent); color: var(--texte-sur-accent); border-radius: var(--rayon-8); text-decoration: none; font-weight: 600; }
.bouton-principal:hover { background: var(--accent-fonce); color: var(--texte-sur-accent); }
.bloc { background: var(--surface); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-12); padding: var(--espace-20) var(--espace-22); margin: 0 0 var(--espace-18); }
.bloc h2 { margin-top: 0; display: flex; align-items: center; gap: var(--espace-10); }
.numero { width: 26px; height: 26px; border-radius: var(--rayon-rond); background: var(--accent); color: var(--texte-sur-accent);
          display: inline-flex; align-items: center; justify-content: center; font: 600 var(--taille-13) var(--police-texte-courte); }
.commande textarea, .commande input[type=text], .commande select { font: inherit; padding: var(--espace-10) var(--espace-12); border: var(--trait-epaisseur) solid var(--bordure-champ);
          border-radius: var(--rayon-8); background: var(--fond-champ); color: var(--encre); min-height: var(--cible-min); width: 100%; }
.aide { font-size: var(--taille-13); color: var(--discret); margin: var(--espace-2) 0 var(--espace-6); }
.actions { display: flex; gap: var(--espace-12); flex-wrap: wrap; margin: var(--espace-12) 0; }
.actions button.principal { margin-top: 0; }
.fiche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--espace-16); margin: 0 0 var(--espace-18); }
@media (max-width: 720px) { .fiche { grid-template-columns: 1fr; } }
.compris { background: var(--accent-pale); border: var(--trait-epaisseur) solid var(--bordure-compris); border-radius: var(--rayon-10); padding: var(--espace-18); }
.questions { background: var(--alerte-pale); border: var(--trait-epaisseur) solid var(--bordure-questions); border-radius: var(--rayon-10); padding: var(--espace-18); }
.compris h2, .questions h2 { margin-top: 0; font-size: var(--taille-16); }
.champ { margin: 0 0 var(--espace-12); display: flex; flex-direction: column; gap: var(--espace-4); }
.non-remplis { border-top: var(--trait-epaisseur) solid var(--bordure-compris); padding-top: var(--espace-10); }
.ajout summary { cursor: pointer; padding: var(--espace-8) 0; color: var(--accent-fonce); min-height: var(--cible-min); display: flex; align-items: center; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espace-10); margin: 0 0 var(--espace-14); }
.mode { display: flex; flex-direction: column; gap: var(--espace-6); padding: var(--espace-14); border: var(--trait-epaisseur) solid var(--trait);
        border-radius: var(--rayon-10); background: var(--fond-champ); margin: 0; font-weight: 600; }
.mode.choisi { border: 2px solid var(--accent-fonce); background: var(--accent-pale); }
.mode.indisponible { color: var(--discret); background: var(--doux); }
.sources { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espace-10); }
.source { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-12) var(--espace-14); }
.prendre { display: flex; gap: var(--espace-10); align-items: flex-start; margin: 0; }
.emploi { border: none; padding: var(--espace-8) 0 0 var(--espace-26); margin: 0; display: flex; flex-direction: column; gap: var(--espace-4); }
.emploi legend { font-size: var(--taille-14); font-weight: 500; padding: 0; }
.roles { display: flex; flex-wrap: wrap; gap: var(--espace-6) var(--espace-14); }
.roles label { margin: 0; font-weight: 400; font-size: var(--taille-14); min-height: 32px; display: flex; align-items: center; gap: var(--espace-6); }
.recap p:first-child { font-size: var(--taille-16); }
.suivi .etat { font-size: var(--taille-17); font-weight: 600; margin: 0 0 var(--espace-6); }
.texte, .citation { white-space: pre-wrap; background: var(--fond-champ); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-8); padding: var(--espace-12) var(--espace-14); }
.erreur ul { margin: 0; padding-left: var(--espace-18); }
.choix-sources summary { cursor: pointer; min-height: var(--cible-min); display: flex; align-items: center; font-weight: 600; color: var(--accent-fonce); }
.citation-source { font-size: var(--taille-12-5); color: var(--discret); font-style: italic; margin: var(--espace-2) 0 0; }
.actions-espace { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--espace-12); flex-wrap: wrap; }

/* C41 -- creer et configurer un espace */
.confirme { background: var(--accent-pale); color: var(--accent-fonce); border-radius: var(--rayon-8); padding: var(--espace-10) var(--espace-12); }
.etapes-assistant { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espace-8); padding: 0; margin: 0 0 var(--espace-18); }
.etapes-assistant li { font-size: var(--taille-13); padding: var(--espace-4) var(--espace-10); border-radius: var(--rayon-pilule); border: var(--trait-epaisseur) solid var(--trait); color: var(--discret); background: var(--surface); }
.etapes-assistant li.courante { border-color: var(--accent); color: var(--accent-fonce); font-weight: 600; }
.etapes-assistant li.faite { color: var(--encre-2); }
fieldset.champ { border: none; padding: 0; margin: var(--espace-10) 0 0; }
fieldset.champ legend { font-size: var(--taille-14); font-weight: 500; padding: 0; }
label.choix { display: flex; align-items: center; gap: var(--espace-8); font-weight: 400; min-height: var(--cible-min); margin-top: 0; }
.types-espace { list-style: none; padding: 0; margin: 0 0 var(--espace-12); }
.types-espace li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-8); padding: var(--espace-8) 0; border-bottom: var(--trait-epaisseur) solid var(--doux); }
/* C55 : `form` est en colonne par defaut ; une forme « en ligne » aligne ses boutons
   (vu a la capture : Retenir et Ecarter s'empilaient). */
form.en-ligne { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--espace-8); }
form.en-ligne button { margin: 0; }
.manques ul { padding-left: var(--espace-18); }
.manques li { margin-bottom: var(--espace-10); }
.bloc textarea, .bloc input[type=text] { font: inherit; padding: var(--espace-10) var(--espace-12); border: var(--trait-epaisseur) solid var(--bordure-champ);
               border-radius: var(--rayon-8); background: var(--surface); color: var(--encre); min-height: var(--cible-min); width: 100%; }

/* C43 -- la liste des livrables, et la relecture avec provenance */
.filtre { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--espace-10); margin: 0 0 var(--espace-16); }
.filtre label { margin: 0; }
.filtre select { font: inherit; padding: var(--espace-8) var(--espace-10); border: var(--trait-epaisseur) solid var(--bordure-champ); border-radius: var(--rayon-8); min-height: var(--cible-min); background: var(--surface); }
.filtre button { min-height: var(--cible-min); }
.livrables { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espace-8); }
.livrables a { display: flex; flex-direction: column; gap: var(--espace-4); padding: var(--espace-14) var(--espace-16); background: var(--surface);
               border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); text-decoration: none; color: var(--encre); }
.livrables li.a-decider a { border-color: var(--accent); }
.livrable-titre { font-weight: 600; }
.livrable-infos { font-size: var(--taille-13); color: var(--discret); }
.pastille { display: inline-block; font-size: var(--taille-12); font-weight: 600; color: var(--accent-fonce); background: var(--accent-pale);
            border-radius: var(--rayon-pilule); padding: var(--espace-2) var(--espace-8); margin-right: var(--espace-6); }
.relecture { display: grid; grid-template-columns: 1fr; gap: var(--espace-18); align-items: start; }
@media (min-width: 1000px) { .relecture:has(.panneau-source) { grid-template-columns: 3fr 2fr; } }
.texte-relu { white-space: normal; }
.texte-relu p { font-size: var(--taille-16); line-height: 1.7; margin: 0 0 var(--espace-14); }
.infobulle { white-space: normal; }
button.prov { font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; min-height: 0;
              cursor: pointer; border-radius: 0; text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px;
              text-underline-offset: 3px; }
button.prov:hover, button.prov:focus-visible { background: var(--accent-pale); }
button.prov.sans-appui { text-decoration-color: var(--alerte); }
.infobulle { max-width: min(420px, calc(100vw - 32px)); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-14) var(--espace-16);
             background: var(--surface); color: var(--encre); box-shadow: 0 6px 24px var(--ombre); font-size: var(--taille-14); }
.infobulle > span, .infobulle > strong { display: block; margin-bottom: var(--espace-6); }
.infobulle-actions { display: flex !important; flex-wrap: wrap; gap: var(--espace-12); margin-top: var(--espace-10); }
.passage-cite { font-style: italic; color: var(--encre-2); }
.panneau-source .source-texte { white-space: pre-wrap; line-height: 1.6; }
.panneau-source mark { background: var(--surligne-source); color: var(--encre); padding: 0 var(--espace-2); border-radius: var(--rayon-3); }
.decisions { display: grid; grid-template-columns: 1fr; gap: var(--espace-14); }
@media (min-width: 900px) { .decisions { grid-template-columns: repeat(3, 1fr); } }
.decision { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-12); }
.decision textarea, .bloc form textarea { font: inherit; padding: var(--espace-10) var(--espace-12); border: var(--trait-epaisseur) solid var(--bordure-champ); border-radius: var(--rayon-8); width: 100%; }
.historique { list-style: none; padding: 0; margin: 0; }
.historique li { padding: var(--espace-8) 0; border-bottom: var(--trait-epaisseur) solid var(--doux); }
.reponse { border-left: 3px solid var(--accent-fonce); padding: var(--espace-4) 0 var(--espace-4) var(--espace-14); margin: 0 0 var(--espace-16); }
.secondaire-lien { font-weight: 500; }

/* C44 -- a trancher, matiere, remarques, publication */
.reponse-fil { margin: var(--espace-8) 0 0 var(--espace-16); padding-left: var(--espace-10); border-left: 2px solid var(--trait); }
.historique li.resolue { opacity: .7; }
p.actions-espace { display: flex; flex-wrap: wrap; gap: var(--espace-10); }
/* C45 : bouton permanent « Creer un livrable », accueil, sortie du texte */
.bandeau .creer-livrable { min-height: 40px; padding: var(--espace-8) var(--espace-16); }
.bouton-secondaire { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: var(--espace-10) var(--espace-18);
  border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-8); color: var(--encre); background: var(--surface);
  text-decoration: none; font-weight: 500; }
.bouton-secondaire:hover { border-color: var(--accent); color: var(--accent-fonce); }
.espaces li { display: flex; align-items: center; gap: var(--espace-12); }
.espaces li > a:first-child { flex: 1; }
.livrables li.arrete .livrable-infos { color: var(--accent-fonce); }
.sortie-actions { display: flex; flex-wrap: wrap; gap: var(--espace-12); align-items: center; margin: var(--espace-8) 0 var(--espace-12); }
.sortie-actions form { margin: 0; }
.texte-a-copier { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; }
.alerte-appui { color: var(--alerte); }
/* C46 : la matiere d'un espace */
.ajouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--espace-16); }
/* C55 : ces regles visent les cartes de depot de la bibliotheque (`form.ajout`) ;
   ecrites `.ajout`, elles encadraient aussi chaque `details.ajout` de l'atelier
   (« Corriger et retenir » devenait une grande carte vide, vu a la capture). */
form.ajout { display: flex; flex-direction: column; gap: var(--espace-6); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-14); }
form.ajout h3 { margin: 0 0 var(--espace-4); font-size: var(--taille-16); }
form.ajout input[type=text], form.ajout input[type=url], form.ajout textarea { font: inherit; padding: var(--espace-8) var(--espace-10); border: var(--trait-epaisseur) solid var(--bordure-champ); border-radius: var(--rayon-8); }
form.ajout button { align-self: flex-start; margin-top: var(--espace-6); }
.matieres li.matiere { display: flex; flex-direction: column; gap: var(--espace-6); padding: var(--espace-12) var(--espace-16); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); }
.matiere-tete { display: flex; flex-direction: column; gap: var(--espace-4); }
.matiere-actions { display: flex; flex-wrap: wrap; gap: var(--espace-10); align-items: center; }
.matiere-actions form { margin: 0; }
.matiere.etat-illisible { border-color: var(--alerte); }
.pastille.marque-ecartee { background: var(--fond-ecartee); color: var(--alerte); }
/* C53 : documents de l'audit, fiche, trame d'entretien imprimable (A4, noir et blanc) */
p.actions-audit { display: flex; flex-wrap: wrap; gap: var(--espace-12); align-items: center; }
.documents-audit li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-12); padding: var(--espace-6) 0; }
.documents-audit li > span { flex: 1; }
.fiche-audit { white-space: pre-wrap; line-height: 1.55; background: var(--surface); border: var(--trait-epaisseur) solid var(--trait);
  border-radius: var(--rayon-10); padding: var(--espace-16); }
.trame { max-width: 780px; margin: 0 auto; padding: var(--espace-24) var(--espace-16); background: var(--trame-fond); color: var(--trame-encre);
  font-size: var(--taille-15); line-height: 1.45; }
.trame h1 { font-size: var(--taille-22); margin: var(--espace-12) 0; }
.trame h2 { font-size: var(--taille-16); margin: 0 0 var(--espace-6); }
.trame-ecran { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--espace-12); }
.trame-entete { width: 100%; border-collapse: collapse; margin-bottom: var(--espace-10); }
.trame-entete th { text-align: left; width: 30%; padding: var(--espace-6) var(--espace-8) var(--espace-6) 0; font-weight: 600; }
.trame-entete td.a-remplir { border-bottom: var(--trait-epaisseur) solid var(--trame-encre); }
.trame .case { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--trame-encre); vertical-align: -1px; }
.trame-question { display: grid; grid-template-columns: 1fr 34%; gap: var(--espace-12); border-top: var(--trait-epaisseur) solid var(--trame-encre);
  padding: var(--espace-10) 0; break-inside: avoid; page-break-inside: avoid; }
.trame-question p { margin: var(--espace-4) 0; }
.trame .numero { display: inline; width: auto; height: auto; border-radius: 0; background: none; color: var(--trame-encre); font-weight: 700; }
.trame-connu, .trame-relances { font-size: var(--taille-14); }
.trame-marge { border-left: var(--trait-epaisseur) dashed var(--trame-encre); padding-left: var(--espace-8); min-height: 110px; font-size: var(--taille-12); }
.trame-fin h2 { margin-top: var(--espace-18); }
.trame-fin .lignes { height: 90px; border-bottom: var(--trait-epaisseur) solid var(--trame-encre);
  background: repeating-linear-gradient(to bottom, transparent 0 29px, var(--trame-encre) 29px 30px); }
@media (max-width: 600px) { .trame-question { grid-template-columns: 1fr; } .trame-marge { border-left: 0; border-top: var(--trait-epaisseur) dashed var(--trame-encre); padding: var(--espace-6) 0 0; } }
@media print {
  @page { size: A4; margin: 15mm 14mm; }
  body { background: var(--trame-fond); }
  .trame { max-width: none; padding: 0; font-size: 11pt; }
  .trame-ecran { display: none; }
  .trame-question { grid-template-columns: 1fr 34%; }
  .trame-marge { border-left: var(--trait-epaisseur) dashed var(--trame-encre); border-top: 0; padding: 0 0 0 var(--espace-8); }
  .trame-fin .lignes { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* C54 : le calendrier. Les grilles sont de vrais tableaux, dans leur propre
   conteneur defilant (WCAG 1.4.10) ; la semaine se lit en liste de sept jours
   sur ecran etroit ; une surcharge se dit en mots, jamais par la seule couleur. */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vues { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--espace-12); margin: 0 0 var(--espace-18); }
.vues a { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--espace-12); border-radius: var(--rayon-8); }
.vues a.vue-choisie { background: var(--accent); color: var(--texte-sur-accent); font-weight: 600; text-decoration: none; }
.occurrences { list-style: none; padding: 0; margin: var(--espace-6) 0 0; display: flex; flex-direction: column; gap: var(--espace-6); }
.occ { display: block; padding: var(--espace-8) var(--espace-10); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-8); text-decoration: none;
       color: var(--encre); background: var(--fond-champ); }
.occ:hover, .occ:focus { border-color: var(--accent); }
.occ-titre { font-weight: 600; }
.occ-infos { display: block; font-size: var(--taille-13); color: var(--encre-2); }
.occ.etat-sautee, .occ.etat-suspendue { color: var(--discret); background: var(--doux); }
.charge { font-size: var(--taille-14); color: var(--encre-2); }
.charge.au-dessus { color: var(--alerte); font-weight: 600; }
.charge.au-dessus::before { content: "⚠ "; }
.grille-conteneur { overflow: auto; margin: 0 0 var(--espace-18); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-12); background: var(--surface); }
.grille-conteneur:focus { outline: var(--focus-epaisseur-fine) solid var(--accent-fonce); }
.grille { border-collapse: collapse; width: 100%; min-width: 760px; table-layout: fixed; }
.grille caption { text-align: left; font-weight: 600; font-size: var(--taille-18); padding: var(--espace-12) var(--espace-14); }
.grille th { font-size: var(--taille-13); font-weight: 600; padding: var(--espace-8); border-bottom: var(--trait-epaisseur) solid var(--trait); text-align: left; }
.grille td { vertical-align: top; padding: var(--espace-6); border: var(--trait-epaisseur) solid var(--trait); height: 96px; }
.grille td.hors { background: var(--doux); color: var(--discret); }
.grille td.aujourd-hui { box-shadow: inset 0 0 0 2px var(--accent); }
.grille .occ { padding: var(--espace-4) var(--espace-6); font-size: var(--taille-13); }
.grille .occ-infos { font-size: var(--taille-12); }
.jour-numero { font-size: var(--taille-13); font-weight: 600; }
.rien { color: var(--discret); font-size: var(--taille-13); }
.semaine-etroite { display: none; list-style: none; padding: 0; }
.mois-etroit { display: none; list-style: none; padding: 0; }
@media (max-width: 720px) {
  .semaine-large { display: none; }
  .semaine-etroite { display: block; }
  /* O3 : la vue mois, en liste des jours qui ont quelque chose, au telephone */
  .mois-large { display: none; }
  .mois-etroit { display: block; }
}
.champs-ligne { display: flex; flex-wrap: wrap; gap: var(--espace-12); }
.dates { margin: 0; padding-left: var(--espace-20); }

/* C55 -- vu a la capture : sur l'ecran d'audit, les faits a confirmer se
   suivaient sans separation, la question de l'un collee aux boutons du
   precedent. */
.fait { border-top: var(--trait-epaisseur) solid var(--doux); padding-top: var(--espace-14); margin-top: var(--espace-14); }
.fait:first-of-type { border-top: none; margin-top: 0; }

/* C55 -- vu a la capture : les champs de date, d'heure et de nombre
   n'avaient aucun style (petits, sans marge, bord d'origine du navigateur). */
input[type=date], input[type=time], input[type=number] { font: inherit; padding: var(--espace-10) var(--espace-12); border: var(--trait-epaisseur) solid var(--bordure-champ);
               border-radius: var(--rayon-8); background: var(--surface); color: var(--encre); min-height: var(--cible-min); }
input[type=number] { max-width: 10em; }

/* C55 -- programmer : ne montrer que ce qui sert au choix fait. Sans `:has`
   (navigateur ancien), tout reste affiche, comme avant. */
form.programmer .mode:has(input:checked) { border: 2px solid var(--accent-fonce); background: var(--accent-pale); }
form.programmer .mode:not(:has(input:checked)) { border: var(--trait-epaisseur) solid var(--trait); background: var(--surface); }
form.programmer:has(input[name=r_mode][value=unique]:checked) section[aria-labelledby=titre-rythme] { display: none; }
form.programmer:not(:has(#r_frequence option[value=WEEKLY]:checked)) .si-hebdo { display: none; }
form.programmer:not(:has(#r_frequence option[value=MONTHLY]:checked)) .si-mensuel { display: none; }

/* C55 -- vu a la capture : sur telephone, la vue mois elargissait TOUTE la page
   a 602 px (la page se dezoomait). Cause : un texte `visuellement-cache`
   (position absolue) d'une case a droite du tableau n'avait pas de parent
   positionne, donc echappait au conteneur defilant. */
.grille-conteneur { position: relative; }
.grille td { position: relative; }

/* C55 -- une occurrence preparee (rattachee a son livrable), une occurrence
   manquee (dite en mots, la couleur ne fait que doubler). */
.occ.etat-preparee { border-color: var(--accent); }
.occ.etat-manquee { border-color: var(--alerte); background: var(--alerte-pale); }
.occ.etat-manquee .etat { color: var(--alerte); font-weight: 600; }

/* C56 -- vu a la capture (defaut R8 de C55) : dans la vue mois, au bureau, le
   titre d'une occurrence se coupait en trois lignes et les cases
   s'allongeaient. Le titre tient en deux lignes (entier au survol et dans la
   liste), le detail type · canal · signataire reste lu par un lecteur d'ecran
   mais n'est plus affiche dans la case ; l'etat reste ecrit. */
.grille.mois .occ-titre { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; }
.grille.mois .occ-detail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.grille.mois .occ { position: relative; }

/* C56 -- l'audit par parties (defaut R1 de C55) : l'essentiel d'abord, puis
   une partie repliee par groupe de la liste, avec son compte ; l'avancement
   se voit. */
.avancement { display: flex; align-items: center; gap: var(--espace-10); flex-wrap: wrap; }
.avancement progress { width: min(260px, 100%); height: 10px; accent-color: var(--accent); }
details.partie { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: 0 var(--espace-14); margin: var(--espace-12) 0;
  background: var(--surface); }
details.partie > summary { min-height: 48px; display: flex; align-items: center; gap: var(--espace-10); flex-wrap: wrap;
  font-weight: 600; cursor: pointer; }
details.partie[open] > summary { border-bottom: var(--trait-epaisseur) solid var(--doux); margin-bottom: var(--espace-8); }
details.partie .question { border-top: var(--trait-epaisseur) solid var(--doux); padding-top: var(--espace-12); }

/* C56 -- la fiche d'audit (defaut R4 de C55) : les parties sont des titres, chaque
   ligne dit sa question, sa valeur, puis sa source en petit. */
.fiche-audit { white-space: normal; }
.fiche-audit h2 { font-size: var(--taille-17); margin: var(--espace-18) 0 var(--espace-8); }
.fiche-ligne { border-top: var(--trait-epaisseur) solid var(--doux); padding: var(--espace-10) 0; }
.fiche-ligne p { margin: var(--espace-2) 0; white-space: pre-wrap; }
.fiche-question { font-weight: 600; }

/* C56 -- apres publication : ou le texte est paru, ses retours, la saisie. */
.publication { border-top: var(--trait-epaisseur) solid var(--doux); padding-top: var(--espace-12); margin-top: var(--espace-12); }
.publication:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.publication h3 { font-size: var(--taille-15); margin: var(--espace-12) 0 var(--espace-6); }
.retours { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espace-10); }
.retours li { border-left: 3px solid var(--trait); padding-left: var(--espace-10); }
.mesures { display: flex; flex-wrap: wrap; gap: var(--espace-4) var(--espace-16); }
.grille-mesures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--espace-10); }
.grille-mesures label { display: flex; flex-direction: column; gap: var(--espace-4); font-size: var(--taille-14); }
.deux-champs { display: flex; flex-wrap: wrap; gap: var(--espace-12); }
.deux-champs .champ { flex: 1 1 160px; }
button.lien { background: none; border: none; padding: 0; min-height: var(--cible-min); color: var(--accent); text-decoration: underline;
  font: inherit; font-size: var(--taille-14); cursor: pointer; }
.tendance { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espace-8) var(--espace-20); }

/* C56 -- vu a la capture : dans une section (bloc), les listes deroulantes et
   le champ d'adresse n'avaient pas le style des autres champs (petits, bord
   d'origine du navigateur). */
.bloc .champ select, .bloc .champ input[type=url] { font: inherit; padding: var(--espace-10) var(--espace-12); border: var(--trait-epaisseur) solid var(--bordure-champ);
  border-radius: var(--rayon-8); background: var(--surface); color: var(--encre); min-height: var(--cible-min); width: 100%; }
.grille-mesures input[type=text] { width: 100%; }
/* C56 -- vu a la capture : « Je l'ai publie » et « Dire si ca a marche »
   ressemblaient a une ligne de texte ; ce sont les gestes de la section. */
#paru details.ajout > summary { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: var(--espace-8) var(--espace-18);
  border: var(--trait-epaisseur) solid var(--accent-fonce); border-radius: var(--rayon-8); background: var(--surface); color: var(--accent-fonce);
  font-weight: 600; list-style: none; margin: var(--espace-8) 0; }
#paru details.ajout > summary::-webkit-details-marker { display: none; }
#paru details.ajout[open] > summary { background: var(--accent-pale); }
/* C56 -- vu a la capture : le message d'accueil qui porte un geste
   (« Annuler : remettre en attente ») touchait la section suivante. */
div.note[role=status] { margin-bottom: var(--espace-18); }
div.note[role=status] p { margin: 0 0 var(--espace-10); }

/* C57 : le calendrier en langage courant -- rythmes lus et lignes proposees,
   une carte par ligne ; les appuis d'abord, lisibles sans clic. */
.lignes-proposees { list-style: none; padding: 0; margin: var(--espace-10) 0 0; display: flex; flex-direction: column; gap: var(--espace-14); }
.ligne-proposee { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-12) var(--espace-14); }
.ligne-proposee h3 { margin-top: 0; }
.ligne-proposee h4 { margin: var(--espace-12) 0 var(--espace-4); font-size: var(--taille-14); }
.ligne-proposee .quand { font-weight: 600; margin: 0 0 var(--espace-6); }
.ligne-proposee .citation { margin: 0 0 var(--espace-8); }
.appuis { margin: var(--espace-4) 0 var(--espace-8); padding-left: var(--espace-20); }
.appuis li { margin: var(--espace-3) 0; }
.ligne-proposee .actions { display: flex; flex-wrap: wrap; gap: var(--espace-10); align-items: flex-end; }
form.refus label { font-size: var(--taille-13); }
form.refus input { min-width: 12em; }
/* C59 : le refus sous « Accepter », sur sa propre ligne : le champ « Pourquoi »
   n'est plus decale a droite du bouton sur un ecran large. */
.ligne-proposee .actions form.refus { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-8); }
.ligne-proposee .actions form.refus label { flex-basis: 100%; margin: 0; }
.ligne-proposee .actions form.refus input { flex: 1 1 12em; max-width: 28em; margin: 0; }
/* C59 : au telephone, un espace de « Mes espaces » prend toute la ligne, ses
   boutons passent dessous au lieu de se serrer a cote. */
@media (max-width: 720px) {
  .espaces li { flex-wrap: wrap; }
  .espaces li > a:first-child { flex: 1 1 100%; }
}
.ligne-proposee details { margin-top: var(--espace-10); }
.ligne-proposee details > summary { min-height: var(--cible-min); display: flex; align-items: center; cursor: pointer; }

/* C69 : l'identite d'un espace, maquette 4 (colonne d'avancement a gauche,
   blocs par nature a droite ; une colonne sur telephone). */
.identite { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--espace-24); align-items: start; }
.identite-avancement { position: sticky; top: 16px; }
.identite-colonne { list-style: none; padding: 0; margin: 0 0 var(--espace-12); display: flex; flex-direction: column; gap: var(--espace-8); }
.identite-colonne li { display: flex; flex-direction: column; }
.identite-colonne li[aria-current="page"] a { font-weight: 600; color: var(--accent-fonce); }
.declarations { list-style: none; padding: 0; margin: var(--espace-8) 0; display: flex; flex-direction: column; gap: var(--espace-10); }
.declaration { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-12) var(--espace-14); }
.declaration-texte { margin: 0 0 var(--espace-6); white-space: pre-wrap; }
.declaration-infos { font-size: var(--taille-13); color: var(--encre-2); margin: 0; }
.declaration.etat-ecarte .declaration-texte { color: var(--discret); text-decoration: line-through; }
.declaration-gestes { align-items: flex-start; }
.declaration-gestes form { margin: 0; }
.declaration-form { display: flex; flex-direction: column; gap: var(--espace-6); }
.champs-source { padding-left: var(--espace-26); display: flex; flex-direction: column; gap: var(--espace-4); }
@media (max-width: 720px) {
  .identite { grid-template-columns: minmax(0, 1fr); }
  .identite-avancement { position: static; }
}

/* C70 : l'ecran de la voix (maquette 5), la creation d'espace (maquette 3). */
.bloc.a-revoir { border-left: 4px solid var(--accent-fonce); }
.bloc-groupe > h2 { margin-top: var(--espace-24); }
.choix-simples fieldset { border: 0; padding: 0; margin: var(--espace-8) 0; display: flex; flex-direction: column; gap: var(--espace-4); }
.choix-simples legend { padding: 0; }
.assistant .personne { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-12) var(--espace-14); margin: 0 0 var(--espace-10);
                        display: flex; flex-direction: column; gap: var(--espace-6); }
.assistant .personne button { align-self: flex-start; }

/* C71 : a qui s'adressent les textes (maquette 10) : les questions a gauche,
   ce qu'elles changent a droite ; une colonne sur telephone. */
.lecteurs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--espace-24); align-items: start; }
.lecteurs-effets { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-12) var(--espace-14); }
.lecteurs-effets h2 { font-size: var(--taille-16); margin: var(--espace-12) 0 var(--espace-6); }
.lecteurs-effets h2:first-child { margin-top: 0; }
.lecteurs-lignes { margin: var(--espace-6) 0; padding-left: var(--espace-18); display: flex; flex-direction: column; gap: var(--espace-6); }
.lecteurs-questions textarea { width: 100%; font: inherit; }
@media (max-width: 720px) {
  .lecteurs { grid-template-columns: minmax(0, 1fr); }
}

/* C72 : les idees de sujets (maquette 8 v2) : l'idee et une carte par voix a
   gauche, ce que l'espace refuse a droite ; une colonne sur telephone. */
.idees { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--espace-24); align-items: start; }
.idees-refus { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-12) var(--espace-14); }
.idees-refus h2 { font-size: var(--taille-16); margin: 0 0 var(--espace-6); }
.idees-cartes { display: flex; flex-direction: column; gap: var(--espace-12); }
.idee-carte { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-10); padding: var(--espace-12) var(--espace-14);
              display: flex; flex-direction: column; gap: var(--espace-8); }
.idee-carte h3 { font-size: var(--taille-16); margin: 0; }
.idee-carte.pas-pour { opacity: 0.7; }
.idee-carte blockquote { margin: 0; padding: var(--espace-6) var(--espace-10); border-left: 3px solid var(--trait); }
.idee-carte textarea { width: 100%; font: inherit; }
.idee-carte fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espace-4); }
.idee-carte .gestes { display: flex; flex-wrap: wrap; gap: var(--espace-8); align-items: center; }
.idees-liste li { margin: 0 0 var(--espace-8); }
@media (max-width: 720px) {
  .idees { grid-template-columns: minmax(0, 1fr); }
}

/* C73 -- « Creer un texte » (maquette 9 v2) : quatre departs, precisions par
   des choix, une ligne par case avec sa provenance. */
.onglets { display: flex; flex-wrap: wrap; gap: var(--espace-8); margin: 0 0 var(--espace-16); }
.onglet { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: var(--espace-8) var(--espace-14);
          border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-8); background: var(--surface);
          color: var(--encre); text-decoration: none; }
.onglet.choisi { border-color: var(--accent); background: var(--accent-pale); color: var(--accent-fonce); font-weight: 600; }
.liste-simple { list-style: none; padding: 0; margin: 0 0 var(--espace-12); }
.liste-simple li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-8);
                   padding: var(--espace-8) 0; border-bottom: var(--trait-epaisseur) solid var(--trait); }
.precision { border-left: 4px solid var(--accent-fonce); }
.choix-boutons { display: flex; flex-wrap: wrap; gap: var(--espace-8); align-items: center; margin: var(--espace-8) 0; }
.choix-boutons button { min-height: var(--cible-min); }
.choix-date { display: inline-flex; gap: var(--espace-6); align-items: center; flex-wrap: wrap; }
.compris .ligne { border-bottom: var(--trait-epaisseur) solid var(--trait); padding: var(--espace-10) 0; }
.compris details.ligne > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--espace-6) var(--espace-12); align-items: baseline;
                                   list-style: none; min-height: var(--cible-min); }
.compris details.ligne > summary::-webkit-details-marker { display: none; }
.ligne-libelle { font-weight: 600; min-width: 11em; }
.ligne-valeur { flex: 1 1 12em; overflow-wrap: anywhere; }
.provenance { font-size: var(--taille-12); color: var(--discret); background: var(--doux); border-radius: var(--rayon-10); padding: var(--espace-1) var(--espace-8); }
.changer { font-size: var(--taille-13); color: var(--accent); }
.choix-liste { border: 0; padding: 0; margin: var(--espace-8) 0; display: grid; gap: var(--espace-6); }
.choix-liste label { display: flex; gap: var(--espace-8); align-items: flex-start; min-height: 32px; overflow-wrap: anywhere; }
.critere input[type="range"] { width: min(100%, 28em); }
.critere output { font-weight: 600; margin-left: var(--espace-8); }
@media (max-width: 600px) {
  .ligne-libelle { min-width: 0; flex: 1 1 100%; }
}

/* C74 -- se reperer : barre de navigation fixe de l'espace, fil d'Ariane,
   en-tete de page (titre, phrase, action principale). */
.barre-navigation { position: sticky; top: 0; z-index: 20; background: var(--surface);
                    border-bottom: var(--trait-epaisseur) solid var(--trait); padding: 0 var(--espace-16); }
.barre-navigation ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; }
.barre-large { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-4); }
.barre-large a, .barre-menu a { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: var(--espace-8) var(--espace-12);
                 color: var(--encre-2); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 500; }
.barre-large a:hover, .barre-menu a:hover { color: var(--accent); }
.barre-large a.active, .barre-menu a.active { color: var(--accent-fonce); border-bottom-color: var(--accent); font-weight: 600; }
.barre-large li:last-child { margin-left: auto; }
.barre-menu { display: none; }
.barre-menu summary { min-height: var(--cible-min); display: flex; align-items: center; cursor: pointer; font-weight: 600;
                      color: var(--accent-fonce); }
.barre-menu ul { display: flex; flex-direction: column; padding-bottom: var(--espace-8); }
.barre-menu a { width: 100%; border-bottom: 0; border-left: 3px solid transparent; }
.barre-menu a.active { border-left-color: var(--accent); }
@media (max-width: 720px) {
  .barre-large { display: none; }
  .barre-menu { display: block; }
}
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espace-4); margin: 0 0 var(--espace-14); padding: 0;
                 font-size: var(--taille-13); color: var(--discret); }
.fil-ariane li + li::before { content: "›"; margin-right: var(--espace-4); color: var(--discret); }
.fil-ariane a { color: var(--discret); }
.fil-ariane [aria-current] { color: var(--encre-2); }
.entete { margin: 0 0 var(--espace-22); }
.entete-phrase { color: var(--encre-2); margin: 0 0 var(--espace-12); max-width: 70ch; }
.entete-action { margin: 0; }
/* C74 -- accueil de l'espace (maquette 2) et liste des espaces */
.cartes-attente { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espace-14); margin: 0 0 var(--espace-22); }
.carte-attente { background: var(--surface); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-12); padding: var(--espace-18) var(--espace-20);
                 display: flex; flex-direction: column; gap: var(--espace-6); }
.carte-attente .chiffre { font-family: var(--police-titre); font-size: var(--taille-34); line-height: 1; color: var(--accent-fonce); }
.carte-attente .quoi { font-weight: 600; }
.carte-attente .geste { margin-top: auto; }
.semaine-espace { list-style: none; padding: 0; margin: 0 0 var(--espace-12); display: flex; flex-direction: column; gap: var(--espace-8); }
.semaine-espace li { display: flex; gap: var(--espace-12); flex-wrap: wrap; align-items: baseline; }
.semaine-espace .quand { font-weight: 600; min-width: 9em; }
.gestes-courants { display: flex; flex-wrap: wrap; gap: var(--espace-10); list-style: none; padding: 0; margin: 0 0 var(--espace-22); }
.espace-attente { color: var(--encre-2); font-size: var(--taille-14); }
.identite-sous { list-style: none; margin: var(--espace-4) 0 0; padding: 0 0 0 var(--espace-12); font-size: var(--taille-14); }

/* C75 : relire un texte (maquette 1-2 v5) : le texte et les commentaires côte à côte. */
.relire-colonnes { display: grid; grid-template-columns: 1fr; gap: var(--espace-18); align-items: start; }
@media (min-width: 1000px) { .relire-colonnes { grid-template-columns: 3fr 2fr; } }
.relire-colonnes .commentaires { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); }
@media (max-width: 999px) { .relire-colonnes .commentaires { position: static; } }
mark.commente { background: var(--surligne-commente); color: inherit; padding: 0 var(--espace-1); border-radius: var(--rayon-2); }
.renvoi { font-size: .75em; text-decoration: none; font-weight: 700; margin-left: var(--espace-1); }
.ancre { scroll-margin-top: 80px; }
.liste-commentaires { padding-left: 0; list-style: none; }
.liste-commentaires > li { border-top: var(--trait-epaisseur) solid var(--trait); padding: var(--espace-10) 0; scroll-margin-top: 80px; }
.liste-commentaires > li:target, .ancre:target + mark { outline: var(--focus-epaisseur-fine) solid var(--accent-fonce); }
.partie { font-size: .95rem; margin-top: var(--espace-14); }
.partie-editeur { color: var(--discret); font-weight: 500; }
.piece-jointe { border: var(--trait-epaisseur) dashed var(--trait); border-radius: var(--rayon-6); padding: var(--espace-12); margin-top: var(--espace-16); }
.piece-jointe .formats { list-style: none; padding-left: 0; }
.changement { border-left: 3px solid var(--trait); padding-left: var(--espace-10); margin: var(--espace-6) 0; }
.portee[hidden] { display: none; }
/* C76 -- menu local d'une page qui a des parties (sous-pages d'une rubrique,
   ou parties d'un objet long) : une rangee d'onglets qui passe a la ligne. */
.menu-local { margin: 0 0 var(--espace-22); border-bottom: var(--trait-epaisseur) solid var(--trait); }
.menu-local ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-6); margin: 0; padding: 0; }
.menu-local a { display: inline-flex; align-items: center; min-height: 40px; padding: var(--espace-6) var(--espace-12); color: var(--encre-2);
                text-decoration: none; border-bottom: 2px solid transparent; }
.menu-local a:hover { color: var(--accent); }
.menu-local a.active { color: var(--accent-fonce); border-bottom-color: var(--accent); font-weight: 600; }
.menu-avance > summary { display: inline-flex; align-items: center; min-height: 44px; padding: var(--espace-6) var(--espace-12); color: var(--encre-2); cursor: pointer; }
.menu-avance[open] > summary { color: var(--encre); }
@media (max-width: 640px) { .menu-local a { padding: var(--espace-6) var(--espace-8); font-size: var(--taille-14); } }
.carte-attente.a-agir { border-color: var(--accent); }

/* C78 : l'ecran generique des reglages ne deborde jamais sur un telephone
   (valeurs longues, JSON). */
.reglage { overflow-wrap: anywhere; }
.reglage textarea, .reglage input[type="text"], .reglage select { max-width: 100%; box-sizing: border-box; }
.reglage textarea { width: 100%; }

/* ==========================================================================
   O1 (18/10/2026) -- identite visuelle et cadre commun.
   Toutes les valeurs viennent des jetons (`atelier_jetons`, migration 181).
   ========================================================================== */

/* -- Identite : texte, titres, liens, focus -- */
body { font-size: var(--taille-16); }
/* Chiffres tabulaires dans les nombres et les tableaux seulement : appliques au texte
   courant, ils elargissent aussi la virgule et le point de cette police. */
table, .nombre, .chiffre, .grille, .liste-espaces-infos, .livrable-infos, .occ-infos, .mesures, time,
input[type=number] { font-variant-numeric: tabular-nums; }
h1, h2, h3, .marque { font-family: var(--police-titre); font-weight: 700; }
h1 { font-size: var(--taille-28); line-height: 1.2; }
h2 { font-size: var(--taille-19); line-height: 1.3; }
h3 { font-size: var(--taille-16); }
.etiquette { font-size: var(--taille-12); }
a { color: var(--encre); text-underline-offset: 2px; }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: var(--focus-epaisseur) solid var(--accent-fonce); outline-offset: var(--espace-2); }
summary { cursor: pointer; }
input, textarea, select { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=url], textarea, select {
  border-color: var(--bordure-champ); }

/* -- Boutons : un seul plein par page (l'action principale), le reste en contour -- */
.bouton-principal, button.principal { border-radius: var(--rayon-8); }
.bouton-secondaire, button.secondaire { background: var(--surface); color: var(--encre);
  border: var(--trait-epaisseur) solid var(--bordure-champ); border-radius: var(--rayon-8); }
.bouton-secondaire:hover, button.secondaire:hover { border-color: var(--encre); color: var(--encre); }

/* -- Filets fins plutot que cartes en boite -- */
.bloc, details.partie, .declaration, .idee-carte, .ligne-proposee, .source, .decision, .lecteurs-effets,
.idees-refus, .matieres li.matiere, form.ajout, .mode, .carte-attente, .fiche-audit, .assistant .personne,
.grille-conteneur, .piece-jointe {
  background: transparent; border: 0; border-top: var(--trait-epaisseur) solid var(--trait);
  border-radius: 0; box-shadow: none; }
.bloc { padding: var(--espace-20) 0; margin: 0 0 var(--espace-8); }
details.partie, .declaration, .idee-carte, .ligne-proposee, .source, .decision, .lecteurs-effets, .idees-refus,
.matieres li.matiere, form.ajout, .mode, .assistant .personne { padding-left: 0; padding-right: 0; }
.mode.choisi { border: 0; border-top: var(--focus-epaisseur-fine) solid var(--encre); background: transparent; }
form.programmer .mode:has(input:checked) { border: 0; border-top: var(--focus-epaisseur-fine) solid var(--encre); background: transparent; }
form.programmer .mode:not(:has(input:checked)) { border: 0; border-top: var(--trait-epaisseur) solid var(--trait); background: transparent; }
.compris, .questions { background: transparent; border: 0; border-left: var(--focus-epaisseur) solid var(--trait); border-radius: 0;
  padding: var(--espace-4) 0 var(--espace-4) var(--espace-16); }
.questions { border-left-color: var(--accent); }
.livrables a { background: transparent; border: 0; border-bottom: var(--trait-epaisseur) solid var(--trait);
  border-radius: 0; padding: var(--espace-14) 0; }
.livrables li.a-decider a { border-color: var(--trait); }
.livrables li.a-decider .livrable-titre::before { content: ""; display: inline-block; width: var(--espace-8); height: var(--espace-8);
  margin-right: var(--espace-8); background: var(--accent); vertical-align: middle; }
.texte, .citation { background: var(--surface); border-radius: var(--rayon-8); }
.infobulle { box-shadow: none; border-color: var(--bordure-champ); }
.pastille { background: var(--surface); color: var(--encre); border: var(--trait-epaisseur) solid var(--bordure-champ); }
.note { background: var(--doux); color: var(--encre); border-left: var(--focus-epaisseur) solid var(--encre-2); border-radius: 0; }
.erreur, .message { background: var(--erreur-pale); color: var(--erreur); border-left: var(--focus-epaisseur) solid var(--erreur);
  border-radius: 0; }
.confirme { background: var(--succes-pale); color: var(--succes); border-left: var(--focus-epaisseur) solid var(--succes); border-radius: 0; }
.vues a.vue-choisie { background: var(--encre); color: var(--surface); }
.onglet.choisi { border-color: var(--encre); background: var(--surface); color: var(--encre); }
.numero { background: var(--encre); color: var(--surface); }

/* -- Le cadre : bandeau en haut ; dans un espace, menu a gauche et contenu -- */
.aller-au-contenu { position: absolute; left: var(--espace-16); top: 0; transform: translateY(-200%); z-index: 50; background: var(--surface);
  padding: var(--espace-8) var(--espace-12); border: var(--trait-epaisseur) solid var(--encre); }
.aller-au-contenu:focus { transform: translateY(var(--espace-8)); }
.cadre { min-height: 100vh; }
.cadre-corps { display: block; }
.cadre.avec-menu .cadre-corps { display: grid; grid-template-columns: var(--largeur-menu) minmax(0, 1fr); align-items: start; }
.contenu { max-width: var(--largeur-contenu); margin: 0 auto; padding: var(--espace-28) var(--espace-24) var(--espace-32); }
.contenu:focus { outline: none; }

/* bandeau (B1 a B3, AR1) */
.bandeau { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--espace-10);
  min-height: var(--hauteur-bandeau); padding: 0 var(--espace-16); background: var(--surface);
  border-bottom: var(--trait-epaisseur) solid var(--trait); }
.bandeau .marque { font-size: var(--taille-19); color: var(--encre); text-decoration: none; white-space: nowrap;
  min-height: var(--cible-min); display: inline-flex; align-items: center; }
.bandeau-separateur { color: var(--encre-2); }
.deroulant { position: relative; }
.deroulant > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--espace-8);
  min-height: var(--cible-min); padding: 0 var(--espace-8); border-radius: var(--rayon-8); }
.deroulant > summary::-webkit-details-marker { display: none; }
.deroulant > summary::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid var(--encre-2); }
.deroulant > summary:hover { background: var(--doux); }
.choix-espace { min-width: 0; }
.choix-espace > summary { max-width: 100%; }
.espace-en-cours { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.menu-compte { margin-left: auto; }
.compte-nom { color: var(--encre-2); white-space: nowrap; }
.compte-initiales { display: inline-flex; align-items: center; justify-content: center; width: var(--taille-signature); height: var(--taille-signature);
  border: var(--trait-epaisseur) solid var(--bordure-champ); border-radius: var(--rayon-rond);
  font-size: var(--taille-12); font-weight: 700; color: var(--encre); }
.deroulant-liste { position: absolute; top: calc(100% + var(--espace-4)); left: 0; z-index: 40; min-width: var(--largeur-deroulant);
  max-width: calc(100vw - var(--espace-32)); margin: 0; padding: var(--espace-6) 0; list-style: none;
  background: var(--surface); border: var(--trait-epaisseur) solid var(--bordure-champ); border-radius: var(--rayon-8); }
.deroulant-droite { left: auto; right: 0; min-width: var(--largeur-deroulant); padding: var(--espace-8); }
.deroulant-droite form { margin: 0; }
.deroulant-droite button { width: 100%; }
.deroulant-liste a { display: flex; align-items: center; gap: var(--espace-10); min-height: var(--cible-min);
  padding: 0 var(--espace-12); text-decoration: none; color: var(--encre); }
.deroulant-liste a:hover { background: var(--doux); }
.deroulant-liste a[aria-current] { font-weight: 600; }
.deroulant-pied { border-top: var(--trait-epaisseur) solid var(--trait); margin-top: var(--espace-6); padding-top: var(--espace-6); }
.signature { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--taille-signature); height: var(--taille-signature);
  border-radius: var(--rayon-8); color: var(--surface); font-size: var(--taille-12); font-weight: 700;
  letter-spacing: .02em; line-height: 1; }
.signature-grande { width: var(--taille-signature-grande); height: var(--taille-signature-grande); font-size: var(--taille-16); vertical-align: middle; margin-right: var(--espace-8); }

/* menu d'un espace (M1, M2, AR3) : colonne a gauche, deux groupes */
.menu-espace { align-self: stretch;
  padding: var(--espace-20) var(--espace-12) var(--espace-24); border-right: var(--trait-epaisseur) solid var(--trait);
  background: var(--fond); }
.menu-groupe + .menu-groupe { margin-top: var(--espace-20); }
.menu-groupe-titre { margin: 0 0 var(--espace-6); padding: 0 var(--espace-10); font-size: var(--taille-12);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.menu-espace ul { list-style: none; margin: 0; padding: 0; }
.menu-espace a { display: flex; align-items: center; min-height: var(--cible-min); padding: var(--espace-6) var(--espace-10);
  border-left: var(--focus-epaisseur) solid transparent; color: var(--encre); text-decoration: none; }
.menu-espace a:hover { background: var(--doux); color: var(--encre); }
.menu-espace a.active { border-left-color: var(--encre); font-weight: 700; background: var(--surface); }
.menu-fermer, .barre-bas { display: none; }

/* chemin (C1) : « Rubrique › Objet » */
.chemin ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espace-4); margin: 0 0 var(--espace-12);
  padding: 0; font-size: var(--taille-14); color: var(--encre-2); }
.chemin li + li::before { content: "›"; margin-right: var(--espace-4); color: var(--encre-2); }
.chemin a { color: var(--encre-2); display: inline-flex; align-items: center; min-height: var(--espace-24); }
.chemin [aria-current] { color: var(--encre); }

/* en-tete */
.entete { margin: 0 0 var(--espace-24); }
.entete-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-12); }
.entete-ligne h1 { margin: 0; display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.entete-phrase { color: var(--encre-2); }

/* « Mes espaces » (L1 a L3, AR4) */
.liste-espaces { list-style: none; margin: 0; padding: 0; border-top: var(--trait-epaisseur) solid var(--trait); }
.liste-espaces li { border-bottom: var(--trait-epaisseur) solid var(--trait); }
.liste-espaces a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--espace-12); min-height: var(--hauteur-bandeau); padding: var(--espace-10) var(--espace-8); text-decoration: none; color: var(--encre); }
.liste-espaces a:hover { background: var(--surface); }
.liste-espaces-nom { font-weight: 600; overflow-wrap: anywhere; }
.liste-espaces-infos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espace-4) var(--espace-16);
  color: var(--encre-2); font-size: var(--taille-14); }
.liste-espaces-infos .attend { color: var(--accent-fonce); font-weight: 600; }
.espaces-fermes { margin-top: var(--espace-24); }
.espaces-fermes > summary { min-height: var(--cible-min); display: inline-flex; align-items: center; color: var(--encre-2); }
.page-vide { max-width: var(--largeur-lecture); padding: var(--espace-24) 0; }
.page-vide p { margin: 0 0 var(--espace-16); }

/* creation d'un espace (N1, N2) */
.creer-nom { max-width: var(--largeur-lecture); display: flex; flex-direction: column; gap: var(--espace-8); }
.creer-nom input[type=text] { padding: var(--espace-10) var(--espace-12); border: var(--trait-epaisseur) solid var(--bordure-champ);
  border-radius: var(--rayon-8); background: var(--surface); color: var(--encre); min-height: var(--cible-min); }
.creer-nom button.principal { align-self: flex-start; margin-top: var(--espace-12); }
.doublon { max-width: var(--largeur-lecture); }
.doublon .actions { align-items: center; }

/* accueil d'un espace (A1 a A3, AR6, AR11) */
.etat-espace { display: inline-block; margin: 0 0 var(--espace-16); padding: var(--espace-2) var(--espace-8);
  border: var(--trait-epaisseur) solid var(--avertissement); color: var(--avertissement); font-size: var(--taille-14); }
.pour-demarrer h3 { margin: var(--espace-18) 0 var(--espace-6); font-size: var(--taille-14); color: var(--encre-2);
  text-transform: uppercase; letter-spacing: .06em; }
.pour-demarrer > details > summary { list-style: none; }
.pour-demarrer > details > summary h2 { display: inline; }
.liste-demarrer, .liste-a-traiter, .liste-en-cours { list-style: none; margin: 0; padding: 0;
  border-top: var(--trait-epaisseur) solid var(--trait); }
.liste-demarrer li, .liste-a-traiter li, .liste-en-cours li { border-bottom: var(--trait-epaisseur) solid var(--trait); }
.liste-demarrer li { display: flex; align-items: center; gap: var(--espace-12); min-height: var(--cible-min); }
.liste-demarrer a { flex: 1; display: flex; align-items: center; min-height: var(--cible-min); }
.liste-demarrer li.fait a { color: var(--encre-2); }
.etat-fait { color: var(--succes); font-size: var(--taille-14); border: var(--trait-epaisseur) solid var(--succes);
  padding: 0 var(--espace-6); }
.liste-a-traiter a { display: flex; align-items: center; gap: var(--espace-14); min-height: var(--cible-min); text-decoration: none; color: var(--encre); }
.liste-a-traiter a:hover { background: var(--surface); }
.liste-a-traiter .nombre { min-width: var(--taille-signature-grande); font-size: var(--taille-22); font-weight: 700; color: var(--accent-fonce); }
.en-cours-titre { margin: var(--espace-24) 0 var(--espace-6); color: var(--encre-2); }
.en-cours-groupe { margin: var(--espace-10) 0 var(--espace-4); font-size: var(--taille-14); color: var(--encre-2); }
.liste-en-cours a { display: flex; align-items: center; min-height: var(--cible-min); }
.rien { color: var(--encre-2); }

/* -- Telephone (390 px) : bandeau sur une ligne, menu derriere « Menu », barre du bas -- */
@media (max-width: 720px) {
  .contenu { padding: var(--espace-20) var(--espace-16) calc(var(--hauteur-barre-bas) + var(--espace-24)); }
  .bandeau { gap: var(--espace-4); padding: 0 var(--espace-8); }
  .bandeau .marque { font-size: var(--taille-16); }
  .compte-nom { display: none; }
  .cadre.avec-menu .cadre-corps { display: block; }
  .menu-espace { display: none; }
  .menu-espace:target { display: block; position: fixed; inset: 0 0 var(--hauteur-barre-bas) 0; z-index: 30;
    max-height: none; border-right: 0; background: var(--surface); padding-top: var(--espace-16); }
  .menu-espace:target + .menu-fermer { display: block; position: fixed; top: var(--espace-8); right: var(--espace-8); z-index: 31; margin: 0; }
  .menu-fermer a { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--espace-12);
    background: var(--surface); border: var(--trait-epaisseur) solid var(--bordure-champ); }
  .menu-espace a { min-height: var(--cible-min); }
  .barre-bas { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: var(--hauteur-barre-bas);
    background: var(--surface); border-top: var(--trait-epaisseur) solid var(--trait); }
  .barre-bas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 100%; }
  .barre-bas a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 var(--espace-4);
    text-align: center; font-size: var(--taille-13); line-height: 1.2; color: var(--encre); text-decoration: none;
    border-top: var(--focus-epaisseur) solid transparent; }
  .barre-bas a.active { border-top-color: var(--encre); font-weight: 700; }
  .liste-espaces a { grid-template-columns: auto minmax(0, 1fr); }
  .liste-espaces-infos { grid-column: 2; justify-content: flex-start; }
  .entete-ligne { align-items: flex-start; }
  .chemin a { min-height: var(--cible-min); }
}
@media (min-width: 721px) {
  .chemin-telephone { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none; animation: none; } }

/* O2 : « Plus de réglages » d'un type de contenu, la liste des questions de « Décrire » */
details.plus-de-reglages, details#groupes { margin: var(--espace-22) 0; border-top: var(--trait-epaisseur) solid var(--trait); }
details.plus-de-reglages > summary, details#groupes > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.titre-section { margin-top: var(--espace-22); }

/* V-a : les sources suivies d'un espace. Les adresses longues se coupent (aucun défilement à 390 px). */
.sources-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espace-16); }
.sources-liste .source { min-width: 0; overflow-wrap: anywhere; }
.sources-liste h3 { margin: 0 0 var(--espace-8); }
.source-faits { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--espace-8) var(--espace-16); margin: 0; }
.source-faits > div { display: contents; }
.source-faits dt { font-weight: 600; }
.source-faits dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .source-faits { grid-template-columns: minmax(0, 1fr); gap: var(--espace-4) 0; }
  .source-faits dd { margin-bottom: var(--espace-8); }
}
.robot pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* T-b -- l'ecran de tri (R53 § 13, R53-2 T28). Sans script, les cartes s'empilent avec leurs
   boutons ; avec le script, une seule carte se montre en mode « une a une ». Les choix sont des
   boutons d'au moins la cible minimale ; aucune valeur ici. */
.tri-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-8) var(--espace-16); }
.tri-compte { margin: 0; color: var(--encre-2); }
.tri-mode button[aria-pressed="true"] { border-color: var(--encre); color: var(--encre); font-weight: 600; }
.tri-etat:empty, .tri-envoi[hidden] { display: none; }
.tri-etat { margin: var(--espace-12) 0; padding: var(--espace-10) var(--espace-12); border-left: var(--focus-epaisseur) solid var(--encre-2); background: var(--doux); }
.tri-etat p { margin: 0 0 var(--espace-6); }
.tri-raisons, .tri-annuler { margin: var(--espace-6) 0; }
.tri-raisons-titre { align-self: center; color: var(--encre-2); margin-right: var(--espace-6); }
.tri-raisons button[aria-pressed="true"] { border-color: var(--encre); color: var(--encre); font-weight: 600; }
.tri-envoi { margin: var(--espace-8) 0; color: var(--encre-2); }
.tri-cartes { display: flex; flex-direction: column; gap: var(--espace-16); margin-top: var(--espace-12); }
.carte-tri { border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-6); padding: var(--espace-16); background: var(--surface);
  min-width: 0; overflow-wrap: anywhere; }
.carte-tri h2 { margin: 0 0 var(--espace-8); font-size: var(--taille-19); }
.carte-tri p { margin: 0 0 var(--espace-8); }
.carte-tri-sources, .carte-tri-date { color: var(--encre-2); font-size: var(--taille-14); }
.appris-lien a { display: inline-flex; align-items: center; min-height: var(--cible-min); }
/* T-d : les liens des listes « Gardées » et « Fondamental », de la provenance d'une idee et des references a lire */
.gardee a, .fondamental a, .idee-veille a, .a-lire a, .liens-pied a { display: inline-flex; align-items: center; min-height: var(--cible-min); }
.carte-tri-raison { color: var(--encre-2); font-size: var(--taille-14); font-style: italic; }
.carte-tri .date-inconnue { color: var(--alerte); }
.carte-tri-extrait, .carte-tri-extrait-long { max-width: var(--largeur-lecture); }
.carte-tri-versions ul { padding-left: var(--espace-18); }
.carte-tri-lien a, .carte-tri-versions li > a { display: inline-flex; align-items: center; min-height: var(--cible-min); }
.carte-tri-choix { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--espace-8); margin-top: var(--espace-12); }
.carte-tri-choix button { flex: 1 1 auto; min-height: var(--cible-min); }
.carte-tri kbd, .tri-raccourcis kbd { font: inherit; font-size: var(--taille-12); border: var(--trait-epaisseur) solid var(--trait); border-radius: var(--rayon-3); padding: 0 var(--espace-4); color: var(--encre-2); }
#fil.tri-actif[data-mode="carte"] .carte-tri:not(.courante) { display: none; }
#fil.tri-actif .carte-tri.courante { touch-action: pan-y; }
#fil[data-mode="liste"] .carte-tri { padding: var(--espace-10) var(--espace-12); }
#fil[data-mode="liste"] .carte-tri h2 { font-size: var(--taille-16); }
#fil[data-mode="liste"] .carte-tri-extrait, #fil[data-mode="liste"] .carte-tri-extrait-long,
#fil[data-mode="liste"] .carte-tri-revue, #fil[data-mode="liste"] .carte-tri-marque { display: none; }
#fil[data-mode="liste"] .carte-tri-choix { margin-top: var(--espace-6); }
.tri-fin { margin-top: var(--espace-16); }
.tri-raccourcis { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espace-6) var(--espace-16); }
@media (max-width: 600px) {
  .carte-tri-choix button { flex: 1 1 40%; }
}
/* V-c : les liens et les cases des pages « Sources suivies », d'une adresse explorée et de « Sources à vérifier » */
.sources-liste a, .source-faits a, #exploration-acces a, .titres-trouves a, .regle-liste a, #sources-a-voir a,
#explorations a { display: inline-flex; align-items: center; min-height: var(--cible-min); }
.rubrique input[type="checkbox"], .rubrique input[type="radio"], .source input[type="checkbox"] { width: var(--espace-24); height: var(--espace-24); }
.titres-trouves { padding-left: var(--espace-18); }
.titre-adresse, .rubrique, .titres-trouves, #explorations, #exploration-acces, #sources-a-voir { overflow-wrap: anywhere; }
/* V-e : les liens de la page « Temps forts » (réglage de l'alerte, sources, liens des contenus) */
.temps-forts-reglage a, #temps-forts-sources a, .temps-fort a, #temps-forts-evenements a {
  display: inline-flex; align-items: center; min-height: var(--cible-min); }
.temps-fort, #temps-forts-evenements li, #temps-forts-sources li { overflow-wrap: anywhere; }
/* V-f : les liens de la page « Propositions de la veille » (réglage, appui, idée, ligne du calendrier) */
.propositions-reglage a, .proposition a, #propositions-a-voir a, .ligne-proposee .appuis a {
  display: inline-flex; align-items: center; min-height: var(--cible-min); }
.proposition, #propositions-a-voir li { overflow-wrap: anywhere; }

/* C-cal -- le calendrier relie a la veille. Une proposition de la veille se distingue du prevu
   (bord en tirets, pastille ecrite) ; un jour sensible, une matiere manquante, une actualite
   ancienne se disent en mots, la couleur ne fait que doubler ; jamais un blocage. */
.prop-veille { border: var(--trait-epaisseur) dashed var(--trait); border-radius: var(--rayon-8); padding: var(--espace-6) var(--espace-10);
  background: var(--surface); }
.prop-veille > summary { cursor: pointer; min-height: var(--cible-min); display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-6);
  overflow-wrap: anywhere; }
.prop-veille[open] > summary { border-bottom: var(--trait-epaisseur) solid var(--doux); margin-bottom: var(--espace-8); }
.prop-veille .actions { flex-wrap: wrap; }
.prop-veille select { max-width: 100%; min-height: var(--cible-min); }
.grille .prop-veille { padding: var(--espace-4) var(--espace-6); font-size: var(--taille-13); }
.alerte-jour { margin: var(--espace-4) 0; padding: var(--espace-4) var(--espace-8); border-left: 3px solid var(--alerte);
  background: var(--alerte-pale); font-size: var(--taille-13); font-weight: 600; overflow-wrap: anywhere; }
.marque-calendrier { display: block; font-size: var(--taille-13); font-weight: 600; color: var(--alerte); }
.marque-calendrier::before { content: "⚠ "; }
.marque-detail { font-weight: 400; color: var(--encre-2); }
.grille .marque-detail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jours-a-prevoir { list-style: none; padding: 0; margin: var(--espace-12) 0 0; display: flex; flex-direction: column; gap: var(--espace-14); }
.jour-a-prevoir h3 { font-size: var(--taille-16); margin: 0 0 var(--espace-6); }
.jour-a-prevoir.aujourd-hui h3 { color: var(--accent); }
.compte-a-prevoir { font-weight: 600; }
.prop-veille .pastille { white-space: nowrap; }
/* C-cal 2 : le lien de la recherche ciblée sur une date, et les liens à lire d'une recherche : des cibles d'au moins
   24 px (contrôles 390 et 1 280 px). */
.lien-recherche { display: inline-flex; align-items: center; min-height: var(--cible-min); font-size: var(--taille-13); }
.pistes-jour > summary { cursor: pointer; min-height: var(--cible-min); display: flex; align-items: center; }
.pistes-jour li a { display: inline-flex; align-items: center; min-height: var(--cible-min); }

/* RV : le bandeau de la mise a jour en arriere-plan (meme apparence qu'une note, sa propre classe) */
.mise-a-jour { background: var(--doux); color: var(--encre); border-left: var(--focus-epaisseur) solid var(--encre-2);
  border-radius: 0; padding: var(--espace-10) var(--espace-12); }

/* E2E-corr (D3) : les liens d'une liste et les cases d'un choix ont au moins 24 px de haut, sur toutes les pages
   (WCAG 2.2, 2.5.8). Specificite nulle (`:where`) : une regle propre a une page l'emporte toujours. */
:where(main li > a[href], main .aide > a[href], main p > a[href]:only-child) {
  display: inline-flex; align-items: center; min-height: var(--espace-24); }
:where(main input[type="radio"], main input[type="checkbox"]) { width: var(--espace-24); height: var(--espace-24); flex: none; }

/* RF-1 : le menu a cinq entrees, ses onglets, le repere de focus (B01, D0573, D0602) */
.menu-espace { max-height: 100vh; overflow-y: auto; }
html { scroll-padding-top: var(--espace-24); scroll-padding-bottom: calc(var(--hauteur-barre-bas) + var(--espace-16)); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: var(--focus-epaisseur) solid var(--encre); outline-offset: var(--espace-2); }
.onglets-entree ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--espace-4); margin: 0 0 var(--espace-20);
  padding: 0; border-bottom: var(--trait-epaisseur) solid var(--trait); }
.onglets-entree a { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--espace-10);
  color: var(--encre-2); text-decoration: none; border-bottom: var(--focus-epaisseur) solid transparent; }
.onglets-entree a.active { color: var(--encre); font-weight: 700; border-bottom-color: var(--encre); }
.prochaine-action { border: var(--trait-epaisseur) solid var(--trait); border-left: var(--focus-epaisseur) solid var(--accent-fonce);
  padding: var(--espace-12) var(--espace-16); margin: 0 0 var(--espace-24); background: var(--surface); }
.prochaine-action p { margin: 0 0 var(--espace-8); }
.mention-ia { color: var(--encre-2); font-size: var(--taille-14); }
.rubriques-entree { list-style: none; margin: 0; padding: 0; border-top: var(--trait-epaisseur) solid var(--trait); }
.rubriques-entree li { border-bottom: var(--trait-epaisseur) solid var(--trait); padding: var(--espace-10) 0; }
.rubriques-entree a { font-weight: 600; display: inline-flex; align-items: center; min-height: var(--cible-min); }
@media (max-width: 720px) {
  .barre-bas a { font-size: var(--taille-12); padding: 0 var(--espace-2); overflow-wrap: anywhere; }
  .onglets-entree ul { flex-wrap: nowrap; overflow-x: auto; }
  .onglets-entree a { white-space: nowrap; }
}

/* RF-1 (reprise) : la prochaine action se lit d'abord, l'action elle-meme en bouton (critere 1 du § 10) */
.prochaine-action h2 { margin-top: 0; }
.prochaine-libelle .bouton-principal { font-size: var(--taille-19); }

/* RF-2 (V3, § 3) : une page lue sans droit d'ecrire (reponses en texte) et la page « Ton entreprise » en blocs. */
.lecture-seule { margin: 0; display: flex; flex-direction: column; gap: var(--espace-16); }
.lecture-seule dt { font-weight: 600; }
.lecture-seule dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.entreprise-blocs { display: flex; flex-direction: column; gap: var(--espace-16); }
.entreprise-blocs .bloc-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--espace-8); }
.entreprise-blocs ul { margin: 0; padding-left: var(--espace-16); }
.entreprise-blocs li { overflow-wrap: anywhere; }
.historique-espace { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espace-16); }
.historique-espace li { min-width: 0; overflow-wrap: anywhere; }
.historique-espace .valeurs { margin: var(--espace-4) 0 0; }

/* -- RF-3 agent B : le cadre a 200 % (640 x 400), a 390 px, et la page d'une voix (N7, N8, N11, R17) -- */
/* N8 : une page de la rubrique sans colonne d'avancement (la page d'une voix, C76) occupe toute la largeur. */
.identite:not(:has(> .identite-avancement)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  /* N11, R17 : les onglets passent a la ligne au lieu d'etre coupes sans indice. */
  .onglets-entree ul { flex-wrap: wrap; overflow-x: visible; }
  .onglets-entree a { white-space: normal; }
}
@media (max-width: 720px) and (max-height: 520px) {
  /* N7, R17 : sur un ecran bas (affichage agrandi), la barre du bas suit la page au lieu de recouvrir une ligne,
     et le menu ne reste plus colle en haut. */
  .barre-bas { position: static; height: auto; min-height: var(--hauteur-barre-bas); }
  .barre-bas ul { height: auto; min-height: var(--hauteur-barre-bas); }
  .contenu { padding-bottom: var(--espace-24); }
  .barre-navigation { position: static; }
  html { scroll-padding-bottom: var(--espace-16); }
}
/* RF-3 (§ 0 point 6) : « Mes espaces » dit l'etat du demarrage ; « Reprendre le demarrage » sous la ligne */
.liste-espaces .liste-espaces-reprendre { margin: 0; padding: 0 var(--espace-8) var(--espace-8); }
.liste-espaces .liste-espaces-reprendre a { display: inline-flex; align-items: center; min-height: var(--cible-min);
  padding: 0; text-decoration: underline; color: var(--encre); }

/* -- RF-4 (session principale) : questions a choix du demarrage, un choix par ligne, cibles accessibles -- */
fieldset.question-choix { border: 0; border-top: var(--trait-epaisseur) solid var(--trait); padding: var(--espace-8) 0 0; margin: var(--espace-10) 0 0; display: flex; flex-direction: column; gap: var(--espace-4); }
fieldset.question-choix legend { font-weight: 600; padding: 0; }
fieldset.question-choix label { display: flex; align-items: center; gap: var(--espace-8); min-height: var(--cible-min); }
fieldset.question-choix label.precision { display: block; margin-top: var(--espace-8); font-size: var(--taille-14); }
details.notes-demarrage { margin-top: var(--espace-16); }

/* -- RF-4 agent C : la page d'un contenu, le texte d'abord (B17) -------------------------------------------- */
main.contenu:has(.relecture) > .menu-local { display: none; }   /* les quinze parties : remplacees par les acces courts */
.entete-relire { margin: 0 0 var(--espace-12); }
.entete-relire h1 { margin: 0 0 var(--espace-4); }
.entete-relire .chapeau-relire { margin: 0 0 var(--espace-4); font-size: var(--taille-14); }
.entete-relire .entete-phrase { margin: 0 0 var(--espace-8); }
.relire-aller ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espace-8) var(--espace-16); align-items: center; }
.relire-aller a { display: inline-flex; align-items: center; min-height: 24px; }
.relire-cote { display: flex; flex-direction: column; gap: var(--espace-18); min-width: 0; }
.relire-colonnes .relire-cote .commentaires { position: static; }
.points-a-trancher .point { border-top: var(--trait-epaisseur) solid var(--trait); padding-top: var(--espace-12); margin-top: var(--espace-12); }
.points-a-trancher .deux-gestes, .points-a-trancher .actions { display: flex; flex-wrap: wrap; gap: var(--espace-8); }
.plan-relu .plan-parties { padding-left: 1.2em; }
.plan-relu .plan-parties > li { margin-bottom: var(--espace-16); }
.reste-titre { margin-top: var(--espace-24); }
#remarque-phrase { max-width: 100%; }
@media (max-width: 700px) {
  .entete-relire h1 { font-size: 1.35rem; line-height: 1.25; }
  .entete-relire .entete-phrase { font-size: var(--taille-14); }
}