/* CONTRAT LU. Encres propres, le reste vient de ../commun/socle.css.
   Signature : le surligneur. Chaque clause à faire préciser est surlignée comme on le fait
   sur un contrat papier, et la question à poser suit, au crayon d'ardoise. Le reste reste sobre. */
:root{
  --fond:#F0F1EE;          /* gris papier */
  --encre:#14162B;
  --accent:#2E3B4E;        /* ardoise */
  --accent2:#FFB224;       /* or de la charte, le surligneur */
  --surligne:#FFE08A;      /* le trait de surligneur, sous le texte */
  --present:#2F6A4A;       /* vert d'annotation, pour « le texte en parle » */
  --alerte:#A4281F;
  --sur-accent:#fff;
  --feuille:#FFFFFF;
  --doux:#4A505C;
  --filet:#D3D6DA;
  --teinte:#E4E7EB;
}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.marque img{width:30px;height:30px;flex:none}
.etiq{color:var(--accent)}

.bandeau-exemple{margin:0;background:var(--surligne);padding:10px var(--gouttiere);font-size:.94rem}
.bandeau-exemple a{font-weight:700}

/* Plan : le pupitre à gauche, la lecture à droite sur grand écran */
.plan{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;max-width:1180px;margin:0 auto;padding:24px var(--gouttiere) 0}
@media (min-width:980px){
  .plan{grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:36px;align-items:start}
  .pupitre{position:sticky;top:16px}
}
.pupitre h1{margin:6px 0 10px}
.chapo{font-size:1.06rem;max-width:60ch}
.lien-exemple{display:inline-block;margin-top:10px;font-weight:600;color:var(--accent);min-height:44px;padding-top:10px}
#formulaire{display:grid;gap:16px;margin-top:20px}
#texte{min-height:220px;font:400 .95rem/1.5 var(--texte)}
.compteur{font:400 .78rem var(--mono);color:var(--doux);justify-self:end}
.compteur.trop{color:var(--alerte);font-weight:700}
label:has(.compteur){grid-template-columns:minmax(0,1fr)}

.confidentiel{border:1.5px dashed var(--filet);border-radius:var(--rayon);padding:14px 16px;display:grid;gap:8px;font-size:.93rem;background:var(--feuille)}
.conf-titre{display:flex;align-items:center;gap:8px;font-weight:700}
.conf-titre svg{width:20px;height:20px;color:var(--accent);flex:none}
.detecte:empty{display:none}
.detecte{font-weight:600;color:var(--alerte)}
.detecte.net{color:var(--present)}
.confidentiel .bouton{justify-self:start}

.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bouton{cursor:pointer;transition:filter .15s,background-color .15s}
.bouton.petit{min-height:44px;padding:0 16px;font-size:.92rem}
.bouton.danger{border-color:var(--alerte);color:var(--alerte)}
.bouton[aria-busy="true"]{opacity:.75;cursor:progress}
.erreur{color:var(--alerte);font-weight:600;border-left:3px solid var(--alerte);padding:6px 10px;background:var(--feuille)}
.statut{font-size:.9rem;color:var(--doux)}
.avertissement{margin:20px 0 0;padding:12px 14px;border-left:3px solid var(--accent);background:var(--teinte);font-size:.92rem}

/* La lecture */
.lecture{background:var(--feuille);border:1px solid var(--filet);border-radius:var(--rayon);padding:clamp(18px,3vw,36px);min-width:0;outline:none}
.lecture>h2{margin:6px 0 16px}
.lecture h3{margin:0 0 10px}
.demo{background:color-mix(in srgb,var(--accent2) 22%,#fff);border:1.5px solid var(--accent2);border-radius:var(--rayon);padding:12px 14px;margin-bottom:18px;font-size:.94rem}
.objet{font-family:var(--titre);font-size:1.18rem;line-height:1.35;margin-bottom:22px}

/* Signature : clause surlignée, puis la question */
.preciser{margin-bottom:28px}
.questions{list-style:none;margin:0;padding:0;counter-reset:q;display:grid;gap:18px}
.question{counter-increment:q;position:relative;padding:0 0 18px 54px;border-bottom:1px solid var(--filet)}
.question:last-child{border-bottom:0;padding-bottom:0}
.question::before{content:"Q" counter(q);position:absolute;left:0;top:2px;font:700 .8rem var(--mono);color:var(--accent);
  border:1.5px solid var(--accent);border-radius:6px;padding:2px 5px;min-width:32px;text-align:center}
.clause{font-weight:700;margin-bottom:4px}
mark{background:linear-gradient(transparent 38%,var(--surligne) 38%,var(--surligne) 92%,transparent 92%);color:inherit;padding:0 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.pourquoi{color:var(--doux);font-size:.95rem;margin-bottom:6px}
.demande{font-weight:600;color:var(--accent)}

.message{border-top:2px solid var(--accent);padding-top:18px;margin-bottom:28px;display:grid;gap:12px}
.message h3{margin:0}
#texte-message{min-height:260px;font:400 .95rem/1.5 var(--texte)}

.faits{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:28px;border-top:1px solid var(--filet)}
@media (min-width:720px){.faits{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
.fait{padding:16px 0;border-bottom:1px solid var(--filet);min-width:0}
.fait.large{grid-column:1/-1}
.fait h3{font-family:var(--mono);font-size:.74rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.fait ul{margin:0;padding-left:18px}
.partie+.partie{margin-top:10px}
.partie p{font-weight:700}
.partie ul{margin-top:4px}
.couts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;margin:0}
.couts dt{min-width:0}
.couts dd{margin:0;text-align:right;font-weight:600;max-width:26ch}
.dates{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dates li{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:10px}
.dates .quand{font-family:var(--mono);font-size:.84rem;color:var(--accent)}

/* Liste de vérification locale */
.verif{margin-bottom:20px}
.verif-colonnes{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:14px}
.verif-tete{display:flex;align-items:center;gap:8px;font:700 .95rem var(--texte);margin:0 0 8px}
.verif-tete svg{width:22px;height:22px;flex:none;border-radius:50%;padding:2px}
.verif-tete[data-etat="present"] svg{color:#fff;background:var(--present)}
.verif-tete[data-etat="absent"] svg{color:var(--encre);background:var(--accent2)}
.points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.point{border:1px solid var(--filet);border-radius:8px;padding:10px 12px}
.point-theme{font-weight:700}
.point-question{font-size:.95rem}
.point-pourquoi{font-size:.88rem;color:var(--doux);margin-top:4px}
.points-vide{color:var(--doux);font-size:.92rem}
.refs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem}
.refs a{color:var(--accent)}

/* Données de l'appareil */
.donnees{max-width:1180px;margin:40px auto 0;padding:0 var(--gouttiere);display:grid;gap:10px}
.donnees h2{font-size:.74rem}

@media print{.pupitre,.donnees,.actions,.message label:first-of-type{display:none!important}.plan{display:block}.lecture{border:0;padding:0}}