/* reviser-copie-papier.css : feuille de la composition sur papier (brique de l'ordinateur et page
   /copie du téléphone). MODÈLE COMMUN, recopié par le générateur avec la brique. Voir
   _commun/docs/BRIQUE-COMPOSITION-PAPIER.md.
   Encre sur l'accent (INVARIANTS § 39) : fond var(--accent-plein), texte var(--sur-accent), survol
   var(--accent-plein-survol) ; accent en texte var(--accent-encre) ; gris en texte var(--muted-encre).
   Jamais de blanc écrit en dur sur l'accent, jamais de filtre de luminosité, jamais d'opacité sous 1
   sur un texte posé sur l'accent. Cibles tactiles de 44 px au moins. */

.rvcp { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; margin: 8px 0 24px; color: var(--heading, #1b1f27); }
.rvcp *, .rvcp *::before, .rvcp *::after { box-sizing: border-box; }
.rvcp-titre { margin: 0; font-size: 1.35rem; line-height: 1.3; color: var(--heading, #1b1f27); text-align: left; }
.rvcp-titre:focus { outline: none; }
.rvcp-sous-titre { margin: 10px 0 0; font-size: 1.05rem; text-align: left; }
.rvcp-msg { margin: 0; line-height: 1.55; text-align: left; }
.rvcp-info { margin: 0; color: var(--muted-encre, var(--muted, #4b5263)); line-height: 1.5; text-align: left; }
.rvcp-alerte { margin: 0; padding: 10px 12px; border-left: 4px solid var(--warn, #b45309); background: var(--card2, var(--card, #f6f7f9)); line-height: 1.5; text-align: left; }
.rvcp-legende { margin: 0; line-height: 1.6; text-align: justify; hyphens: auto; }
.rvcp-compte, .rvcp-echeance { margin: 0; font-weight: 600; text-align: left; }
.rvcp-note { color: var(--muted-encre, var(--muted, #4b5263)); font-weight: 400; }

.rvcp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rvcp-btn { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line, #c9cfda); border-radius: 10px; background: var(--card, #ffffff); color: var(--heading, #1b1f27); font: inherit; font-weight: 600; line-height: 1.25; cursor: pointer; text-align: left; }
.rvcp-btn:hover { border-color: var(--accent-encre, var(--accent, #0d8462)); }
.rvcp-btn:focus-visible, .rvcp-onglet:focus-visible, .rvcp-choix:focus-visible { outline: 3px solid var(--accent-encre, var(--accent, #0d8462)); outline-offset: 2px; }
.rvcp-btn:disabled { cursor: not-allowed; border-style: dashed; color: var(--muted-encre, var(--muted, #4b5263)); }
.rvcp-principal { border: 0; background: var(--accent-plein, var(--accent, #0d8462)); color: var(--sur-accent, #ffffff); }
.rvcp-principal:hover { background: var(--accent-plein-survol, var(--accent-plein, var(--accent, #0b7254))); }
.rvcp-principal:disabled { background: var(--card2, #e9ecf1); color: var(--muted-encre, var(--muted, #4b5263)); border: 1px dashed var(--line, #c9cfda); }
.rvcp-discret { background: transparent; border-color: transparent; color: var(--muted-encre, var(--muted, #4b5263)); text-decoration: underline; }

.rvcp-qr-bloc { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.rvcp-qr { width: 236px; max-width: 100%; aspect-ratio: 1 / 1; padding: 8px; border-radius: 12px; background: #ffffff; border: 1px solid var(--line, #c9cfda); display: flex; align-items: center; justify-content: center; }
.rvcp-qr .rvcp-msg { color: #1b1f27; font-size: .9rem; }
.rvcp-qr-svg { display: block; width: 100%; height: auto; }
.rvcp-rappels { margin: 0; padding-left: 1.2em; line-height: 1.6; text-align: left; }
.rvcp-suivi { min-height: 1.5em; }
.rvcp-liste { margin: 0; padding-left: 1.2em; line-height: 1.7; text-align: left; }
.rvcp-st-illisible { font-weight: 600; }

.rvcp-onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.rvcp-onglet { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line, #c9cfda); border-radius: 999px; background: var(--card, #ffffff); color: var(--heading, #1b1f27); font: inherit; font-weight: 600; cursor: pointer; }
.rvcp-onglet.rvcp-actif { border-color: transparent; background: var(--accent-plein, var(--accent, #0d8462)); color: var(--sur-accent, #ffffff); }
.rvcp-onglet.rvcp-st-illisible:not(.rvcp-actif) { border-color: var(--warn, #b45309); border-width: 2px; }
.rvcp-page { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line, #c9cfda); border-radius: 12px; background: var(--card, #ffffff); }
.rvcp-texte { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; font-size: 1rem; text-align: left; }
.rvcp-d { color: inherit; background: color-mix(in srgb, var(--warn, #b45309) 20%, transparent); border-bottom: 2px dotted var(--warn, #b45309); border-radius: 2px; padding: 0 1px; }
.rvcp-ill { background: color-mix(in srgb, var(--bad, #c0392b) 18%, transparent); border-bottom: 2px solid var(--bad, #c0392b); }
/* Texte lu modifié au clavier (27/10/2026) : enroulé à la largeur, jamais de défilement horizontal ; la zone
   grandit avec le texte là où le navigateur le sait (field-sizing), sinon elle défile en hauteur. */
.rvcp-saisie { display: block; width: 100%; min-height: 16em; padding: 10px 12px; border: 1px solid var(--line, #c9cfda); border-radius: 10px; background: var(--card, #ffffff); color: var(--heading, #1b1f27); font: inherit; font-size: 1rem; line-height: 1.75; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; resize: vertical; field-sizing: content; }
.rvcp-saisie:focus { outline: 3px solid var(--accent-encre, var(--accent, #0d8462)); outline-offset: 2px; }

.rvcp-questions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rvcp-question { padding: 10px 12px; border: 1px solid var(--line, #c9cfda); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.rvcp-manque { border-left: 4px solid var(--warn, #b45309); }
.rvcp-passage { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line, #c9cfda); border-radius: 10px; }
.rvcp-orphelin { border: 1px dashed var(--warn, #b45309); }
.rvcp-extrait { margin: 0; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid var(--line, #c9cfda); line-height: 1.6; text-align: left; }
.rvcp-choix { min-height: 44px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--line, #c9cfda); border-radius: 10px; background: var(--card, #ffffff); color: var(--heading, #1b1f27); font: inherit; }
.rvcp-fin { margin-top: 6px; }

/* ---------------------------------------------------------------------------------------------
   Moteurs d'écrit (ifsi, DEC) : choix au lancement, pastille du repère, consigne
   --------------------------------------------------------------------------------------------- */
.rvcp-mode { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.rvcp-mode[hidden], .rvcp-mode-papier[hidden], .rvcp [hidden] { display: none; }
.rvcp-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.rvcp-tuile { min-height: 56px; padding: 12px 14px; border: 2px solid var(--line, #c9cfda); border-radius: 12px; background: var(--card, #ffffff); color: var(--heading, #1b1f27); font: inherit; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; }
.rvcp-tuile[aria-checked="true"] { border-color: var(--accent-encre, var(--accent, #0d8462)); background: color-mix(in srgb, var(--accent-encre, var(--accent, #0d8462)) 8%, var(--card, #ffffff)); }
.rvcp-tuile:focus-visible { outline: 3px solid var(--accent-encre, var(--accent, #0d8462)); outline-offset: 2px; }
.rvcp-mode-papier { display: flex; flex-direction: column; gap: 8px; }
.rvcp-prose { margin: 0; line-height: 1.6; text-align: justify; hyphens: auto; }
.rvcp-aide summary, .rvcp-consigne summary { cursor: pointer; font-weight: 600; color: var(--accent-encre, var(--accent, #0d8462)); min-height: 44px; display: flex; align-items: center; list-style: none; }
.rvcp-aide summary::-webkit-details-marker, .rvcp-consigne summary::-webkit-details-marker { display: none; }
/* Triangle qui pointe vers le bas tant que le texte est replie (demande de Victor du 26/10/2026), retourne une fois deroule. */
.rvcp-aide summary::before, .rvcp-consigne summary::before { content: "\25BC"; font-size: .7em; margin-right: .55em; display: inline-block; transition: transform .2s ease; }
.rvcp-aide[open] > summary::before, .rvcp-consigne[open] > summary::before { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .rvcp-aide summary::before, .rvcp-consigne summary::before { transition: none; } }
.rvcp-consigne { margin: 12px 0; padding: 4px 14px 12px; border: 1px solid var(--line, #c9cfda); border-left: 4px solid var(--accent-encre, var(--accent, #0d8462)); border-radius: 10px; background: var(--card, #ffffff); }
.rvcp-pastille { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent-encre, var(--accent, #0d8462)) 11%, transparent); color: var(--accent-encre, var(--accent, #0d8462)); font-weight: 700; font-size: .95rem; }

/* ---------------------------------------------------------------------------------------------
   Page /copie du téléphone (copie-papier.html pose les jetons du site sur :root)
   --------------------------------------------------------------------------------------------- */
.rvcp-tel { margin: 0 auto; max-width: 560px; padding: 16px 16px 40px; }
.rvcp-tel .rvcp-btn { width: 100%; justify-content: center; text-align: center; }
.rvcp-tel .rvcp-gros { min-height: 56px; font-size: 1.1rem; }
.rvcp-site { margin: 0; font-size: .95rem; font-weight: 600; color: var(--accent-encre, var(--accent, #0d8462)); text-align: left; }
.rvcp-vignettes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.rvcp-vignette { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line, #c9cfda); border-radius: 10px; background: var(--card, #ffffff); }
.rvcp-vignette img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 6px; background: var(--card2, #e9ecf1); }
.rvcp-vignette .rvcp-btn { min-height: 44px; padding: 6px 8px; font-size: .9rem; }
/* Écran de contrôle (27/10/2026, essai de Victor : la vignette de 320 px, agrandie, paraissait illisible) : l'image
   ENVOYÉE, à la largeur de l'écran ; le bouton principal reste collé au bas de l'écran tant que l'image le
   pousserait plus bas (« Page suivante » sans faire défiler). */
.rvcp-apercu { display: block; width: 100%; height: auto; margin: 0; border: 1px solid var(--line, #c9cfda); border-radius: 8px; }
.rvcp-tel .rvcp-colle { position: sticky; bottom: 0; z-index: 1; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg, #ffffff); }
.rvcp-bandeau { margin: 0; padding: 10px 12px; border-left: 4px solid var(--warn, #b45309); background: var(--card2, var(--card, #f6f7f9)); text-align: left; }
.rvcp-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------------------------------------
   Viseur en direct de la page /copie (26/10/2026) : caméra plein écran, image entière (contain),
   cadre de page dont la couleur ET le trait disent l'état (rouge ou orange en pointillé, vert en
   trait plein), consigne courte au-dessus. Toujours sombre, quel que soit le thème : texte clair
   sur fond presque noir (plus de 15 pour 1). Au vert, le bouton de prise prend le VERT de l'état
   (#4ade80) sous une encre presque noire (#0b0d10, 11,2 pour 1), le même sur les neuf sites : l'accent
   du site (rose-rouge sur ifsi) y disait le contraire du cadre (relecture du 26/10/2026). Ce n'est pas
   une surface d'accent (§ 39) : couleur d'état fixe, sur un viseur toujours sombre.
   --------------------------------------------------------------------------------------------- */
.rvcp-viseur-ouvert > :not(.rvcp-viseur) { display: none !important; }
.rvcp-viseur { --rvcp-viseur-fond: #0b0d10; --rvcp-viseur-bande: #1c1f24; --rvcp-viseur-encre: #f4f5f7; --rvcp-viseur-discret: #b7bfcc; --rvcp-viseur-etat: #b7bfcc;
  position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; margin: 0;
  background: var(--rvcp-viseur-fond); color: var(--rvcp-viseur-encre); }
.rvcp-viseur[data-etat="rouge"] { --rvcp-viseur-etat: #ff6b6b; }
.rvcp-viseur[data-etat="orange"] { --rvcp-viseur-etat: #ffb547; }
.rvcp-viseur[data-etat="vert"] { --rvcp-viseur-etat: #4ade80; }
.rvcp-viseur:focus { outline: none; }
.rvcp-viseur-haut { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 10px; }
.rvcp-viseur-page { margin: 0; font-size: .9rem; font-weight: 600; color: var(--rvcp-viseur-discret); text-align: left; }
.rvcp-viseur-msg { margin: 0; min-height: 3.2em; padding: 8px 12px; border-left: 6px solid var(--rvcp-viseur-etat); border-radius: 4px; background: var(--rvcp-viseur-bande); color: var(--rvcp-viseur-encre); font-size: 1.05rem; font-weight: 700; line-height: 1.4; text-align: left; }
.rvcp-viseur-scene { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.rvcp-viseur-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000000; }
.rvcp-viseur-cadre { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; border: 4px dashed var(--rvcp-viseur-etat); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 0 0 100vmax rgba(0, 0, 0, .35); pointer-events: none; transition: border-color .15s ease; }
.rvcp-viseur[data-etat="vert"] .rvcp-viseur-cadre { border-style: solid; border-width: 6px; }
.rvcp-viseur[data-hs] .rvcp-viseur-cadre, .rvcp-viseur[data-hs] .rvcp-viseur-natif { display: none; }
.rvcp-viseur-bas { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; }
.rvcp-tel .rvcp-viseur .rvcp-viseur-declencheur { min-height: 60px; border: 2px solid var(--rvcp-viseur-encre); border-radius: 999px; background: transparent; color: var(--rvcp-viseur-encre); font-size: 1.15rem; font-weight: 700; }
.rvcp-tel .rvcp-viseur .rvcp-viseur-declencheur.rvcp-viseur-pret { border: 3px solid var(--rvcp-viseur-etat); background: var(--rvcp-viseur-etat); color: var(--rvcp-viseur-fond); box-shadow: 0 0 0 4px rgba(74, 222, 128, .35); }
.rvcp-tel .rvcp-viseur .rvcp-viseur-declencheur.rvcp-viseur-pret:hover { background: #6ee7a0; }
.rvcp-tel .rvcp-viseur .rvcp-viseur-declencheur:disabled { border-style: dashed; background: transparent; color: var(--rvcp-viseur-discret); cursor: default; }
.rvcp-viseur-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.rvcp-tel .rvcp-viseur .rvcp-viseur-lien { width: auto; min-height: 44px; padding: 8px 6px; border: 0; background: transparent; color: var(--rvcp-viseur-encre); font-weight: 600; text-decoration: underline; }
.rvcp-tel .rvcp-viseur .rvcp-btn:focus-visible { outline: 3px solid var(--rvcp-viseur-encre); outline-offset: 2px; }

/* ---------------------------------------------------------------------------------------------
   Recadrage de la feuille (chantier papier v4, reviser-copie-papier-recadrage.js) : après la photo, écran
   plein, toujours sombre comme le viseur, la photo AUSSI GRANDE QUE POSSIBLE (leçon du viseur : bandeaux
   courts), contour de la feuille et coins déplaçables dessinés par l'éditeur de scanic. « C'est bon » prend
   le VERT d'état du viseur (#4ade80) sous une encre presque noire (#0b0d10, 11,2 pour 1) : couleur d'état
   fixe sur un écran toujours sombre, pas une surface d'accent (§ 39). Le reste de la page est masqué
   derrière l'écran (:has ; à défaut, l'écran opaque le recouvre).
   --------------------------------------------------------------------------------------------- */
.rvcp-tel:has(> .rvcp-recadrage) > :not(.rvcp-recadrage) { display: none !important; }
.rvcp-recadrage { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; margin: 0;
  background: #0b0d10; color: #f4f5f7; }
.rvcp-recadrage:focus { outline: none; }
.rvcp-recadrage-haut { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 6px; }
.rvcp-recadrage-titre { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; text-align: left; }
.rvcp-recadrage-aide { margin: 0; font-size: .9rem; line-height: 1.35; color: #b7bfcc; text-align: left; }
.rvcp-recadrage-alerte { margin: 2px 0 0; padding: 6px 10px; border-left: 6px solid #ffb547; border-radius: 4px; background: #1c1f24; font-size: .92rem; font-weight: 700; line-height: 1.35; text-align: left; }
.rvcp-recadrage-alerte[hidden] { display: none; }
.rvcp-recadrage-erreur { border-left-color: #ff8a8a; }
.rvcp-recadrage-diag { margin: 0; font-size: .8rem; line-height: 1.3; color: #b7bfcc; text-align: left; }
.rvcp-recadrage-image { position: relative; flex: 1 1 auto; min-height: 0; }
.rvcp-recadrage-bas { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.rvcp-tel .rvcp-recadrage .rvcp-recadrage-ok { min-height: 56px; border: 0; border-radius: 999px; background: #4ade80; color: #0b0d10; font-size: 1.15rem; font-weight: 700; }
.rvcp-tel .rvcp-recadrage .rvcp-recadrage-ok:hover { background: #6ee7a0; }
.rvcp-tel .rvcp-recadrage .rvcp-recadrage-ok:disabled { border: 1px dashed #b7bfcc; background: transparent; color: #b7bfcc; }
.rvcp-recadrage-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.rvcp-tel .rvcp-recadrage .rvcp-recadrage-lien { width: auto; min-height: 44px; padding: 8px 6px; border: 0; background: transparent; color: #f4f5f7; font-weight: 600; text-decoration: underline; }
.rvcp-tel .rvcp-recadrage .rvcp-btn:focus-visible { outline: 3px solid #f4f5f7; outline-offset: 2px; }
.rvcp-recadrage .scanic-handle:focus-visible { outline: 3px solid #f4f5f7; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .rvcp *, .rvcp *::before, .rvcp *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}