/* KOR'K Sensor — schémas animés et interactifs (gabarits/_schemas.html, js/schemas.js).
   Même langage partout : boîtes blanches à filet gris, zones en pointillé, l'orange seulement pour ce qui bouge,
   ce qui est actif ou ce qui sort de l'Union européenne. Les animations ne tournent que quand le schéma est à l'écran. */

.schema { margin: 0; }
.schema svg { width: 100%; height: auto; overflow: visible; font-family: var(--police); }
.schema .portrait { display: none; }
@media (max-width: 700px) {
  .schema .paysage { display: none; }
  .schema .portrait { display: block; }
  .schema.paysage-seul { display: none; }
}

/* ---------- Éléments communs ---------- */
.schema text { fill: var(--encre); font-size: 13px; }
.schema .t-titre { font-size: 16px; font-weight: 500; }
.schema .t-petit { font-size: 13px; fill: var(--encre-2); }
.schema .t-micro { font-size: 11px; fill: var(--encre-3); letter-spacing: 0.04em; }
.schema .t-zone { font-size: 13px; fill: var(--encre-3); letter-spacing: 0.02em; }
.schema .t-accent { fill: var(--accent-encre); }
.schema .t-fil { font-size: 12.5px; fill: var(--encre-2); }
.schema .halo { paint-order: stroke; stroke: var(--fond); stroke-width: 5px; stroke-linejoin: round; }
.schema .boite { fill: var(--fond); stroke: var(--filet-2); stroke-width: 1.5; transition: stroke 200ms ease, fill 200ms ease; }
.schema .boite-accent { stroke: var(--accent); }
.schema .zone { fill: none; stroke: var(--filet-2); stroke-width: 1.2; stroke-dasharray: 3 5; }
.schema .zone-accent { stroke: var(--accent); stroke-dasharray: 6 5; }
.schema .fil { fill: none; stroke: var(--encre); stroke-width: 1.5; }
.schema .fil-net { stroke-dasharray: 1.5 5; stroke-linecap: round; stroke-width: 2; }
.schema .pointe { fill: var(--encre); }
.schema .ico rect, .schema .ico circle, .schema .ico ellipse, .schema .ico path { fill: none; stroke: var(--encre-2); stroke-width: 1.5; }
.schema .ico .ico-voyant { fill: var(--voyant-blanc); stroke: var(--encre-2); stroke-width: 1; transition: fill 200ms ease; }

/* jetons qui circulent */
.schema .jeton { pointer-events: none; transition: opacity 220ms ease; }
.schema .jeton-clip rect { fill: var(--accent); stroke: var(--fond); stroke-width: 2; }
.schema .jeton-clip .jeton-ico { fill: #fff; }
.schema .jeton-doc rect { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.schema .jeton-doc .jeton-lignes { stroke: var(--accent); stroke-width: 1.5; fill: none; }

/* noeuds cliquables */
.schema [role="button"] { cursor: pointer; outline: none; }
.schema [role="button"]:focus-visible .boite { stroke: var(--accent-encre); stroke-width: 2.5; }
.schema .noeud.actif .boite, .schema .composant.actif .boite { stroke: var(--accent); stroke-width: 2.5; fill: var(--accent-pale); }
@media (hover: hover) and (pointer: fine) {
  .schema .noeud:hover .boite, .schema .composant:hover .boite { stroke: var(--encre-2); }
}

/* commandes au-dessus d'un schéma */
.schema-commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.bouton-lecture {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid var(--encre); background: var(--fond);
  font-size: 15px; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.bouton-lecture:active { transform: scale(0.97); }
.ico-lecture { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.bouton-lecture.en-cours .ico-lecture { width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
@media (hover: hover) and (pointer: fine) { .bouton-lecture:hover { background: var(--encre); color: #fff; } }
.schema-legende { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 13px; color: var(--encre-3); }
.schema-legende li { display: inline-flex; align-items: center; gap: 8px; }
.cle-fil { width: 28px; height: 0; border-top: 1.5px solid var(--encre); }
.cle-fil.pointille { border-top: 2px dotted var(--encre); }
.cle-zone { width: 22px; height: 14px; border: 1.5px dashed var(--accent); border-radius: 4px; }
.schema-note { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--encre-2); max-width: 70ch; }

/* ---------- A. Trajet d'une vidéo ---------- */
.schema-trajet .nuage { transition: opacity 300ms var(--ease-out); }
.schema-trajet .si-ater { display: none; }
.schema-trajet[data-mode="ater"] .si-ater { display: revert; }
.schema-trajet[data-mode="ater"] .si-auj { display: none; }
.schema-trajet[data-mode="ater"] .nuage { opacity: 0.22; }
.schema-trajet[data-mode="ater"] .bouton-lecture { visibility: hidden; }
.schema-trajet[data-mode="ater"] .schema-legende { display: none; }
.schema-trajet .pastille rect { fill: var(--fond); stroke: var(--encre); stroke-width: 1.5; }
.schema-trajet .pastille text { font-size: 14px; font-weight: 500; }
.schema-trajet .fil.actif { stroke: var(--accent); }
.schema-trajet.voyant-rouge [data-noeud="1"] .ico-voyant { fill: var(--voyant-rouge); stroke: var(--voyant-rouge); }
.schema-trajet.en-vue .fil-net.actif { animation: fourmis 900ms linear infinite; }
@keyframes fourmis { to { stroke-dashoffset: -13; } }
.flux li { cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
.flux li.actif { border-top-color: var(--accent); background: linear-gradient(180deg, var(--accent-pale), transparent 80%); }
.flux li.actif h3 { color: var(--accent-encre); }
@media (max-width: 960px) { .flux li { padding-left: 12px; } }

/* ---------- B. Les règles du stand ---------- */
.schema-stand { border: 1px solid var(--filet-2); padding: clamp(16px, 2.4vw, 28px); }
.stand-haut { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(16px, 3vw, 36px); align-items: center; }
.schema-stand .stand-objet { width: 120px; }
.stand-voyant { fill: var(--voyant-blanc); transition: fill 200ms ease; }
.stand-lueur { fill: var(--voyant-blanc); opacity: 0.6; filter: blur(3px); transition: fill 200ms ease; }
.schema-stand[data-etat="enregistrement"] .stand-voyant, .schema-stand[data-etat="enregistrement"] .stand-lueur { fill: var(--voyant-rouge); }
.schema-stand[data-etat="enregistrement"].en-vue .stand-lueur { animation: lueur 1.2s ease-in-out infinite; }
@keyframes lueur { 50% { opacity: 0.25; } }
.etats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: e; }
.etats li { position: relative; padding: 12px 18px 0 0; border-top: 3px solid var(--filet); display: grid; gap: 4px; align-content: start; transition: border-color 220ms ease; }
.etats li::after { content: "→"; position: absolute; right: 4px; top: 8px; font-size: 13px; color: var(--encre-3); }
.etats li:last-child::after { content: none; }
.etat-nom { font-size: 15px; font-weight: 500; color: var(--encre-3); transition: color 220ms ease; }
.etat-detail { font-size: 13px; line-height: 1.4; color: var(--encre-3); }
.schema-stand[data-etat="presentation"] [data-etat="presentation"],
.schema-stand[data-etat="accord"] [data-etat="accord"],
.schema-stand[data-etat="enregistrement"] [data-etat="enregistrement"],
.schema-stand[data-etat="clip"] [data-etat="clip"],
.schema-stand[data-etat="analyse"] [data-etat="analyse"] { border-top-color: var(--accent); }
.schema-stand[data-etat="presentation"] [data-etat="presentation"] .etat-nom,
.schema-stand[data-etat="accord"] [data-etat="accord"] .etat-nom,
.schema-stand[data-etat="enregistrement"] [data-etat="enregistrement"] .etat-nom,
.schema-stand[data-etat="clip"] [data-etat="clip"] .etat-nom,
.schema-stand[data-etat="analyse"] [data-etat="analyse"] .etat-nom { color: var(--encre); }
.stand-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.stand-boutons .bouton { cursor: pointer; transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.stand-boutons .bouton:active { transform: scale(0.97); }
.stand-boutons .bouton.refuse { animation: refus 320ms var(--ease-out); border-color: var(--voyant-rouge); }
@keyframes refus { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.stand-barre { margin-top: 16px; height: 3px; background: var(--filet); overflow: hidden; opacity: 0; transition: opacity 200ms ease; }
.stand-barre span { display: block; height: 100%; width: 100%; background: var(--voyant-rouge); transform: scaleX(0); transform-origin: left; }
.schema-stand[data-etat="enregistrement"] .stand-barre { opacity: 1; }
.stand-message { margin-top: 14px; min-height: 3.1em; font-size: 16px; line-height: 1.55; }
.stand-message.refus { color: var(--voyant-rouge); }
.stand-compteur { font-size: 13px; color: var(--encre-3); }
.stand-compteur strong { color: var(--encre); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .stand-haut { grid-template-columns: 1fr; }
  .schema-stand .stand-objet { width: 96px; }
  .etats { grid-template-columns: 1fr; }
  .etats li { border-top: 0; border-left: 3px solid var(--filet); padding: 8px 0 8px 14px; }
  .etats li::after { content: "↓"; right: auto; left: -9px; top: auto; bottom: -11px; background: var(--fond); }
  .schema-stand[data-etat] li[data-etat] { border-top: 0; }
  .schema-stand[data-etat="presentation"] [data-etat="presentation"],
  .schema-stand[data-etat="accord"] [data-etat="accord"],
  .schema-stand[data-etat="enregistrement"] [data-etat="enregistrement"],
  .schema-stand[data-etat="clip"] [data-etat="clip"],
  .schema-stand[data-etat="analyse"] [data-etat="analyse"] { border-left-color: var(--accent); }
}

/* ---------- C. Câblage ---------- */
.schema-cablage .nappe { fill: none; stroke: #d9d9d6; stroke-width: 9; stroke-linecap: round; }
.schema-cablage .cable { fill: none; stroke: var(--encre-2); stroke-width: 3; stroke-linecap: round; }
.schema-cablage .flux-donnees { fill: none; stroke: var(--encre); stroke-width: 2.5; stroke-dasharray: 0 14; stroke-linecap: round; }
.schema-cablage .flux-courant { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.schema-cablage.en-vue .flux-donnees, .schema-cablage.en-vue .flux-courant { animation: fourmis-c 1100ms linear infinite; }
@keyframes fourmis-c { to { stroke-dashoffset: -28; } }
.schema-cablage .fil-dupont { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.schema-cablage .f-gnd { stroke: #222; } .schema-cablage .f-r { stroke: #D14545; }
.schema-cablage .f-v { stroke: #2F8F5B; } .schema-cablage .f-b { stroke: #3A6FB0; }
.schema-cablage .broches circle { fill: #c9c9c9; }
.schema-cablage .broches .b-gnd { fill: #222; } .schema-cablage .broches .b-r { fill: #D14545; }
.schema-cablage .broches .b-v { fill: #2F8F5B; } .schema-cablage .broches .b-b { fill: #3A6FB0; }
.schema-cablage .ventilo { fill: var(--lavis); stroke: var(--filet-2); }
.schema-cablage .ventilo-pale { fill: none; stroke: var(--filet-2); stroke-width: 1.5; }
.schema-cablage.en-vue .ventilo-pale { animation: tourne 2.4s linear infinite; transform-box: view-box; }
.schema-cablage .paysage .ventilo-pale { transform-origin: 492px 256px; }
@keyframes tourne { to { transform: rotate(360deg); } }
.schema-cablage .led-point { fill: var(--voyant-blanc); stroke: var(--encre-2); stroke-width: 1; }
.schema-cablage.en-vue .led-point { animation: led 6s steps(1) infinite; }
@keyframes led { 0% { fill: var(--voyant-blanc); } 50% { fill: var(--voyant-rouge); } }
.schema-cablage .t-secteur { font-size: 12px; font-weight: 500; fill: var(--accent-encre); letter-spacing: 0.04em; }
.schema-cablage .lien, .schema-cablage .composant { transition: opacity 200ms ease; }
.schema-cablage.focalise .lien:not(.actif), .schema-cablage.focalise .composant:not(.actif):not([data-composant="pi"]) { opacity: 0.3; }
.schema-info { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet); min-height: 7.2em; }
.schema-info-titre { font-size: 17px; font-weight: 500; }
.schema-info-texte { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--encre-2); max-width: 68ch; }

/* ---------- D. Capteur ---------- */
.capteur-corps { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.schema-capteur .capteur-fond { fill: #f1f0ec; }
.schema-capteur .capteur-bord { fill: none; stroke: var(--encre); stroke-width: 1.5; }
.schema-capteur .scene-sol { fill: #e6e2da; }
.schema-capteur .scene-tapis { fill: #d9cfc0; }
.schema-capteur .scene-meuble { fill: #dcd9d2; }
.schema-capteur .scene-enfant path { fill: #8a9bb0; }
.schema-capteur .scene-enfant .tete { fill: #e7c4a4; }
.schema-capteur .scene-enfant .cheveux { fill: #5b4636; }
.schema-capteur .grille-px { fill: none; stroke: rgba(17, 17, 17, 0.16); stroke-width: 0.8; }
.schema-capteur .grille-mode, .schema-capteur .cadre-garde, .schema-capteur .t-cadre { opacity: 0; transition: opacity 260ms var(--ease-out); }
.schema-capteur .cadre-garde { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.schema-capteur .t-cadre { font-size: 13px; font-weight: 500; fill: var(--accent-encre); }
.schema-capteur[data-mode="recadre"] .m-recadre,
.schema-capteur[data-mode="reduit"] .m-reduit,
.schema-capteur[data-mode="hd"] .m-hd { opacity: 1; }
.capteur-visage { display: grid; gap: 10px; justify-items: start; }
.capteur-visage canvas { width: 176px; height: 176px; image-rendering: pixelated; border: 1px solid var(--filet-2); background: #f1f0ec; }
.capteur-px { font-size: clamp(36px, 4vw, 48px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.capteur-jauge { position: relative; width: 100%; max-width: 240px; height: 6px; background: var(--filet); }
.capteur-jauge-val { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 260ms var(--ease-out); }
.capteur-jauge-seuil { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--encre); }
.capteur-verdict { font-size: 14px; color: var(--encre-2); }
.capteur-distance { display: grid; justify-items: stretch; gap: 6px; width: 100%; max-width: 240px; font-size: 14px; color: var(--encre-2); margin-top: 6px; }
.capteur-distance strong { color: var(--encre); font-weight: 500; font-variant-numeric: tabular-nums; }
.capteur-distance input { width: 100%; accent-color: var(--accent); }
@media (max-width: 760px) { .capteur-corps { grid-template-columns: 1fr; } }

.schema-capteur .t-zone, .schema-capteur .t-cadre { font-size: 15px; }

/* ---------- F. Ligne de la feuille de route ---------- */
.schema-route { margin-bottom: clamp(24px, 3vw, 36px); }
.schema-route .route-fait { stroke: var(--encre); stroke-width: 3; fill: none; }
.schema-route .route-avenir { stroke: var(--filet-2); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; fill: none; }
.schema-route .r-point { fill: var(--fond); stroke: var(--encre-2); stroke-width: 2; transition: transform 200ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
.schema-route .faite .r-point { fill: var(--encre); stroke: var(--encre); }
.schema-route .ici .r-point { fill: var(--accent); stroke: var(--accent); }
.schema-route .t-num { font-size: 12px; font-weight: 500; fill: var(--encre-2); pointer-events: none; }
.schema-route .faite .t-num, .schema-route .ici .t-num { fill: #fff; }
.schema-route .t-station { font-size: 14px; font-weight: 500; }
.schema-route .r-onde { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.schema-route.en-vue .r-onde { animation: onde 2.2s var(--ease-out) infinite; }
@keyframes onde { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }
.schema-route .cadenas path { fill: none; stroke: var(--encre); stroke-width: 1.8; }
.schema-route .cadenas rect { fill: var(--fond); stroke: var(--encre); stroke-width: 1.8; }
.schema-route .t-ici { font-size: 13px; font-weight: 500; }
.schema-route .verrous-lien text { fill: var(--accent-encre); }
@media (hover: hover) and (pointer: fine) {
  .schema-route .station:hover .r-point { transform: scale(1.18); }
  .schema-route .station:hover .t-station { fill: var(--accent-encre); }
}
.phases li { transition: background-color 400ms ease; }
.phases li.eclaire { background-color: var(--accent-pale); }

/* ---------- G. Qui filme ---------- */
.schema-qui svg { max-width: 640px; }
.schema-qui .noeud-qui .boite { transition: stroke 200ms ease, fill 200ms ease; }
.schema-qui .noeud-qui.actif .boite { stroke: var(--accent); stroke-width: 2.5; fill: var(--accent-pale); }
.schema-qui .fil.actif { stroke: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .schema .jeton { transition: none; }
}

/* ---------- Chapitre 08 : les conditions du concours ---------- */
.criteres .n { letter-spacing: 0.02em; }
.conditions-total { display: grid; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--encre); }
.conditions-compte { font-size: 19px; line-height: 1.4; }
.conditions-compte strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.conditions-barre { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; max-width: 520px; }
.conditions-barre li { height: 8px; background: var(--filet); position: relative; overflow: hidden; }
.conditions-barre li::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out); }
.conditions-barre li.ok::after { background: var(--encre); }
.conditions-barre li.verifier::after { background: repeating-linear-gradient(135deg, var(--accent) 0 4px, var(--accent-pale) 4px 8px); }
.conditions.en-vue .conditions-barre li::after { transform: scaleX(1); }
.conditions-barre li:nth-child(2)::after { transition-delay: 60ms; } .conditions-barre li:nth-child(3)::after { transition-delay: 120ms; }
.conditions-barre li:nth-child(4)::after { transition-delay: 180ms; } .conditions-barre li:nth-child(5)::after { transition-delay: 240ms; }
.conditions-barre li:nth-child(6)::after { transition-delay: 300ms; } .conditions-barre li:nth-child(7)::after { transition-delay: 360ms; }
.conditions-barre li:nth-child(8)::after { transition-delay: 460ms; } .conditions-barre li:nth-child(9)::after { transition-delay: 520ms; }
.conditions-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gouttiere); }
.conditions-liste li { padding: 16px 0 18px; border-bottom: 1px solid var(--filet); display: grid; gap: 6px; align-content: start; }
.conditions-liste .statut { justify-self: start; font-size: 12px; letter-spacing: 0.03em; padding: 2px 8px 3px; border: 1px solid var(--encre); }
.conditions-liste .statut::before { content: "✓ "; }
.conditions-liste .verifier .statut { border-color: var(--accent); color: var(--accent-encre); background: var(--accent-pale); }
.conditions-liste .verifier .statut::before { content: "! "; font-weight: 500; }
.conditions-liste h3 { font-size: 16px; line-height: 1.35; }
.conditions-liste p { font-size: 14px; line-height: 1.5; color: var(--encre-2); }
@media (max-width: 960px) { .conditions-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .conditions-liste { grid-template-columns: 1fr; } .conditions-compte { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .conditions-barre li::after { transform: scaleX(1); } }