:root { color-scheme: light; --vert: #2e7d32; }
/* un élément caché reste caché, même si une règle lui donne un display */
[hidden] { display: none !important; }
body { font-family: system-ui, sans-serif; max-width: 900px; margin: 24px auto; padding: 0 16px; color: #222; background: #fff; }
.brand { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
h1 { font-size: 1.5rem; margin: 0; }
.tagline { color: #777; font-size: 0.8rem; margin: 0 0 8px; }
.hint { color: #444; font-size: 0.9rem; margin-bottom: 16px; background: #f1f8f2; border-left: 4px solid var(--vert); padding: 8px 12px; border-radius: 4px; }
textarea { width: 100%; box-sizing: border-box; height: 260px; font-family: ui-monospace, monospace; font-size: 0.9rem; padding: 8px; }
.small-area { height: 110px; }
#drop { border: 2px dashed #aaa; border-radius: 8px; padding: 20px; text-align: center; color: #666; margin: 12px 0 6px; cursor: pointer; }
#drop.hover, #drop:focus { border-color: var(--vert); color: var(--vert); background: #f1f8f2; outline: none; }
button { background: var(--vert); color: white; border: none; padding: 10px 18px; border-radius: 6px; font-size: 1rem; cursor: pointer; }
button:disabled { background: #999; cursor: default; }
button.secondary { background: #555; }
button.tertiary { background: #8a8f98; font-size: 0.78rem; padding: 6px 12px; }
.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.option { font-size: 0.85rem; color: #444; display: inline-flex; align-items: center; gap: 6px; }
.status { color: #444; font-size: 0.9rem; min-height: 1.2em; margin: 4px 0; }
progress { width: 100%; height: 8px; }
.files { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.files li { border: 1px solid #ccc; border-radius: 6px; display: inline-flex; align-items: center; font-size: 0.85rem; overflow: hidden; }
.files .badge { color: #fff; font-weight: 700; font-size: 0.7rem; padding: 4px 6px; }
.files .name { padding: 0 6px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files button { background: none; color: #888; padding: 2px 8px; font-size: 0.9rem; }
details { margin: 16px 0; }
summary { cursor: pointer; color: #333; }
.small { font-size: 0.8rem; color: #555; }
footer { margin-top: 24px; color: #777; font-size: 0.8rem; line-height: 1.5; }
@media (max-width: 600px) { textarea { height: 200px; } button { padding: 10px 14px; } }
dialog { border: 1px solid #ccc; border-radius: 8px; padding: 16px 20px; max-width: 420px; width: calc(100% - 32px); box-sizing: border-box; }
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.field { display: block; font-size: 0.9rem; margin: 8px 0; }
.field input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px; font-size: 1rem; }
.error { color: #b71c1c; min-height: 1em; }
textarea[readonly] { background: #f6f6f6; color: #666; }

.vigilance { border: 1px solid #e0b46c; background: #fdf6e9; border-radius: 8px; padding: 12px 14px; margin: 8px 0; font-size: 0.88rem; }
.vigilance.attention { border-color: #cfd3d8; background: #f6f7f9; }
.vigilance p { margin: 0 0 8px; }
.vigilance .titre { font-weight: 600; color: #333; }
.vigilance ul { list-style: none; padding: 0; margin: 0 0 8px; }
.vigilance li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.vigilance li:first-child { border-top: none; }
.vigilance .extrait { font-family: ui-monospace, monospace; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 1px 6px; }
.vigilance .pourquoi { color: #666; font-size: 0.82rem; }
.vigilance .spacer { flex: 1 1 auto; }
.vigilance button { font-size: 0.78rem; padding: 5px 10px; }
.vigilance button.ecarter { background: none; color: #777; text-decoration: underline; padding: 5px 4px; }
.repli { color: #555; }

.logiciel { border: 1px solid #b7dcc0; background: #f1f8f2; border-radius: 8px; padding: 14px 16px; margin: 24px 0 8px; }
.logiciel h2 { font-size: 1.05rem; margin: 0 0 6px; color: #222; }
.logiciel p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.5; }
.logiciel p:last-child { margin-bottom: 0; }
a.bouton { display: inline-block; background: #2e7d32; color: #fff; text-decoration: none; font-weight: 600; padding: 9px 16px; border-radius: 6px; }
a.bouton:hover { background: #27682b; }

.ocr-alerte { border: 1px solid #e0b46c; background: #fdf6e9; border-radius: 8px; padding: 12px 14px; margin: 8px 0; font-size: 0.88rem; }
.ocr-alerte p { margin: 0 0 8px; line-height: 1.5; }
.ocr-alerte p:last-child { margin-bottom: 0; }
.ocr-alerte .titre { font-weight: 600; color: #333; }
.ocr-alerte .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ocr-alerte button { font-size: 0.82rem; padding: 6px 12px; }
.masquage { border: 1px solid #ccc; border-radius: 8px; padding: 12px 14px; margin: 8px 0; }
.masquage h2 { font-size: 1.05rem; margin: 0 0 6px; }
.masquage p { margin: 0 0 8px; }
.masquage .avertissement { border-left: 4px solid #e0b46c; background: #fdf6e9; padding: 6px 10px; border-radius: 4px; }
#masquage-canevas { display: block; width: 100%; height: auto; border: 1px solid #bbb; cursor: crosshair; touch-action: none; }
.masquage select { font-size: 0.85rem; padding: 4px; max-width: 260px; }
.masquage-liste { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.82rem; max-height: 160px; overflow-y: auto; }
.masquage-liste label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.masquage-liste .extrait { font-family: ui-monospace, monospace; color: #555; }
.historique { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; box-sizing: border-box; overflow-y: auto; background: #f6f8f6; border-right: 1px solid #dde3dd; padding: 14px 12px 24px; font-size: 0.85rem; z-index: 5; }
.historique .option { align-items: flex-start; margin: 3px 0; }
.historique .option input { margin-top: 2px; }
.historique-tete { display: flex; align-items: center; justify-content: space-between; }
.historique h2 { font-size: 1.05rem; margin: 0; }
.historique .small { margin: 6px 0 8px; }
.historique-liste { list-style: none; padding: 0; margin: 10px 0; }
.historique-liste li { display: flex; align-items: stretch; border-radius: 6px; margin-bottom: 2px; }
.historique-liste li:hover, .historique-liste li.actif { background: #e3ece4; }
.historique-entree { flex: 1 1 auto; min-width: 0; background: none; color: #222; text-align: left; padding: 6px 8px; font-size: 0.84rem; border-radius: 6px; }
.historique-entree .titre { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.historique-entree .date { display: block; color: #777; font-size: 0.74rem; margin-top: 2px; }
.historique-suppr { background: none; color: #999; padding: 2px 8px; font-size: 1rem; visibility: hidden; }
.historique-liste li:hover .historique-suppr, .historique-suppr:focus { visibility: visible; }
.historique-fermer, .exemples-fermer { background: none; color: #666; padding: 2px 8px; font-size: 1.2rem; }
.volets-boutons { position: fixed; top: 12px; right: 12px; z-index: 6; display: flex; gap: 6px; }
/* place pour les boutons fixes au-dessus du bandeau, qu'ils ne recouvrent pas */
body:not(.page-texte) { padding-top: 26px; }
.volets-boutons button { font-size: 0.8rem; padding: 6px 12px; }
.exemples { position: fixed; top: 0; right: 0; width: 280px; height: 100vh; box-sizing: border-box; overflow-y: auto; background: #f6f7fa; border-left: 1px solid #dde0e8; padding: 14px 12px 24px; font-size: 0.85rem; z-index: 5; }
.exemples h2 { font-size: 1.05rem; margin: 0; }
.exemples .small { margin: 6px 0 10px; }
.exemples-liste { list-style: none; padding: 0; margin: 0; }
.exemples-liste li { border: 1px solid #dde0e8; background: #fff; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; cursor: grab; }
.exemples-liste li:active { cursor: grabbing; }
.exemples-liste .tete { display: flex; align-items: center; gap: 6px; }
.exemples-liste .badge { color: #fff; font-weight: 700; font-size: 0.66rem; padding: 2px 5px; border-radius: 3px; }
.exemples-liste .titre { font-weight: 600; color: #222; }
.exemples-liste .detail { display: block; color: #666; font-size: 0.76rem; margin: 3px 0 6px; }
.exemples-liste .actions { display: flex; align-items: center; gap: 10px; }
.exemples-liste button { font-size: 0.76rem; padding: 4px 10px; }
.exemples-liste a { font-size: 0.76rem; color: #2e7d32; }
#drop.exemple-survol { border-color: var(--vert); color: var(--vert); background: #f1f8f2; }

.beta { background: #fff8e1; border: 1px solid #f0d58a; border-radius: 6px; padding: 7px 12px; margin: 0 0 10px; font-size: 0.86rem; color: #5d4600; }
.beta a { color: #5d4600; }
body.page-texte { line-height: 1.6; margin: 24px auto !important; }
.page-texte h2 { font-size: 1.1rem; margin: 22px 0 6px; }
.page-texte a { color: #2e7d32; }

/* Tutoriel : gros caractères, phrases courtes, étapes numérotées */
.tutoriel { border: 2px solid #b7dcc0; background: #f7fbf7; border-radius: 10px; padding: 16px 20px; margin: 12px 0 16px; font-size: 1.05rem; line-height: 1.55; }
.tuto-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tutoriel h2 { font-size: 1.3rem; margin: 0 0 8px; color: #1b5e20; }
.tuto-croix { background: none; color: #555; font-size: 1.6rem; line-height: 1; padding: 0 6px; }
.tuto-rassurer { background: #e8f5e9; border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; }
.tuto-etapes { margin: 0 0 10px; padding-left: 1.6em; }
.tuto-etapes li { margin: 0 0 10px; padding-left: 4px; }
.tuto-etapes li::marker { font-weight: 700; color: #2e7d32; font-size: 1.15em; }
.tutoriel .small { font-size: 0.92rem; }
.tutoriel .row button { font-size: 1.05rem; padding: 11px 20px; }
.aide-liens { margin: 2px 0 0; font-size: 0.85rem; display: flex; gap: 14px; flex-wrap: wrap; }
.aide-liens a, footer a { color: #2e7d32; }
button.lien { background: none; color: #2e7d32; padding: 0; font-size: inherit; text-decoration: underline; cursor: pointer; }

/* Signaler un problème */
.signaler { border: 1px solid #ddd; border-radius: 8px; padding: 10px 14px; margin: 20px 0 8px; }
.signaler summary { font-weight: 600; color: #333; }
.signaler .field textarea { width: 100%; box-sizing: border-box; margin-top: 4px; font-family: inherit; font-size: 0.95rem; }
.signaler a.bouton[aria-disabled="true"] { background: #999; pointer-events: none; }
.historique-menu { position: fixed; z-index: 20; background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); padding: 4px; display: flex; flex-direction: column; min-width: 140px; }
.historique-menu button { background: none; color: #222; text-align: left; font-size: 0.85rem; padding: 6px 10px; border-radius: 4px; }
.historique-menu button:hover, .historique-menu button:focus { background: #eef3ee; }
.historique-menu button[data-action="supprimer"] { color: #b71c1c; }
@media (min-width: 1200px) {
  body { margin-left: 300px; margin-right: max(16px, calc((100vw - 1232px) / 2)); }
  .historique-bouton, .historique-fermer { display: none; }
}
@media (max-width: 1199px) {
  .historique { transform: translateX(-100%); transition: transform 0.2s; box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12); }
  .historique.ouvert { transform: none; }
  .historique:not(.ouvert) { visibility: hidden; }
}
/* Très large : l'historique à gauche, les exemples à droite, la page au milieu */
@media (min-width: 1600px) {
  body:not(.sans-exemples) { margin-right: 300px; }
  body:not(.sans-exemples) .exemples-bouton { display: none; }
  /* fermé d'un clic sur la croix : le volet laisse sa place, le bouton le rouvre */
  body.sans-exemples .exemples { display: none; }
}
@media (max-width: 1599px) {
  .exemples { transform: translateX(100%); transition: transform 0.2s; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12); }
  .exemples.ouvert { transform: none; }
  .exemples:not(.ouvert) { visibility: hidden; }
}
a.bouton-lien { display: inline-block; background: none; color: #2e7d32; font-weight: 600; text-decoration: underline; font-size: 0.82rem; padding: 6px 2px; }