/* Section « Rester connecté » (le scanner). Tout est préfixé par .s-scanner ; les couleurs viennent des variables de la page. */
.s-scanner { position:relative; overflow:clip; min-height:max(100vh, 760px); --sc-col:min(33rem, 34vw);
  --sc-papier:var(--papier, #efe9dc); --sc-encre:var(--encre, #121110); --sc-fluo:var(--fluo, #e8ff2b); --sc-doux:var(--doux, #5d574d); --sc-filet:var(--filet, rgba(18,17,16,.18)); color:var(--sc-encre); }
.s-scanner .sc-mono { font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-style:normal; }
.s-scanner .sc-h2 { font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:-.005em; font-size:clamp(3rem,5.3vw,5.6rem); }
.s-scanner .sc-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.s-scanner :focus-visible { outline:3px solid var(--sc-encre); outline-offset:3px; }
.s-scanner:not(.sc-js) .sc-js-seul { display:none; }

.s-scanner .sc-poste { position:absolute; left:0; right:0; top:0; height:100vh; min-height:740px; max-height:1100px; z-index:0; }
.s-scanner .sc-poste canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.s-scanner .sc-fond { pointer-events:none; }
.s-scanner .sc-scene { position:absolute; inset:0; touch-action:pan-y; }
.s-scanner .sc-zone { position:absolute; left:0; top:0; width:10px; height:10px; border-radius:50%; touch-action:none; cursor:grab; z-index:3; -webkit-tap-highlight-color:transparent; user-select:none; }
.s-scanner .sc-zone.sc-tire { cursor:grabbing; }
.s-scanner .sc-zone:focus-visible { outline:3px solid var(--sc-fluo); outline-offset:2px; box-shadow:0 0 0 2px var(--sc-encre); }
.s-scanner .sc-aide { position:absolute; z-index:3; pointer-events:none; background:var(--sc-encre); color:var(--sc-fluo); padding:.3rem .65rem; white-space:nowrap; transform:translate(-50%, 0) rotate(-2deg); transition:opacity .5s; opacity:0; }
.s-scanner .sc-aide.sc-vu { opacity:1; }
/* la fréquence secrète : un bouton HTML invisible posé sur le poussoir rouge de l'appareil (grosse zone pour le pouce), et le champ du code,
   invisible lui aussi mais bien réel (c'est lui qui fait sortir le clavier du téléphone ; 16 px, sinon iOS zoome dans la page) */
.s-scanner .sc-secret { position:absolute; left:0; top:0; width:48px; height:40px; margin:0; padding:0; border:0; border-radius:8px; background:none; cursor:pointer; z-index:3; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.s-scanner .sc-secret[hidden] { display:none; }
.s-scanner .sc-secret:focus-visible { outline:3px solid var(--sc-fluo); outline-offset:2px; box-shadow:0 0 0 2px var(--sc-encre); }
.s-scanner .sc-bulle { position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%) rotate(-2deg); background:var(--sc-encre); color:var(--sc-fluo); padding:.3rem .65rem; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; }
.s-scanner .sc-secret:focus-visible .sc-bulle { opacity:1; }
@media (hover:hover) { .s-scanner .sc-secret:hover .sc-bulle { opacity:1; } }
.s-scanner .sc-code-form { position:absolute; left:12%; top:24%; width:9rem; height:1.6rem; margin:0; opacity:0; pointer-events:none; z-index:0; overflow:hidden; }
.s-scanner .sc-code { display:block; width:100%; height:100%; font:16px/1 'Space Mono',monospace; border:0; padding:0; margin:0; background:transparent; color:transparent; caret-color:transparent; outline:none; }

.s-scanner .sc-tete, .s-scanner .sc-suite { position:relative; z-index:2; width:var(--sc-col); }
.s-scanner .sc-sur { color:var(--sc-doux); margin-bottom:.8rem; }
.s-scanner .sc-chapo { margin-top:1.1rem; max-width:27rem; }
.s-scanner .sc-lecteur { margin-top:1.8rem; border-top:3px solid var(--sc-encre); padding-top:.9rem; }
.s-scanner .sc-etat { display:flex; align-items:center; gap:.6rem; color:var(--sc-doux); min-height:1.6rem; }
.s-scanner .sc-pt { width:.7rem; height:.7rem; border-radius:50%; border:2px solid var(--sc-encre); flex:none; transition:background .25s; }
.s-scanner .sc-lecteur.sc-capte .sc-etat { color:var(--sc-encre); }
.s-scanner .sc-lecteur.sc-capte .sc-pt { background:var(--sc-fluo); box-shadow:0 0 0 3px rgba(232,255,43,.45); }
.s-scanner .sc-lecteur.sc-capte.sc-vieux .sc-pt { background:var(--sc-doux); box-shadow:none; }
.s-scanner .sc-meta { display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; margin-top:.9rem; min-height:1.7rem; }
.s-scanner .sc-cat { background:var(--sc-encre); color:var(--sc-papier); padding:.12rem .5rem; font-weight:700; }
.s-scanner .sc-cat:empty { display:none; }
.s-scanner .sc-passe { border:2px dashed var(--sc-encre); padding:.02rem .45rem; font-weight:700; font-style:normal; }
.s-scanner .sc-passe[hidden] { display:none; }
.s-scanner .sc-nom { font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(1.5rem,2.3vw,2.2rem); line-height:1.1; margin-top:.7rem; letter-spacing:.005em; overflow-wrap:anywhere; transition:opacity .2s; }
.s-scanner .sc-lecteur:not(.sc-capte) .sc-nom, .s-scanner .sc-lecteur:not(.sc-capte) .sc-note { opacity:.42; }
.s-scanner .sc-lecteur.sc-vide .sc-nom { font-family:'Space Mono',monospace; text-transform:none; font-size:1rem; line-height:1.5; opacity:.75; letter-spacing:0; }
.s-scanner .sc-note { margin-top:.6rem; max-width:28rem; line-height:1.5; } .s-scanner .sc-note:empty { display:none; }
.s-scanner .sc-pied { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin-top:1rem; min-height:3.2rem; }
.s-scanner .sc-src { color:var(--sc-doux); }
.s-scanner .sc-btn { display:inline-flex; align-items:center; gap:.6rem; font:600 .85rem 'Space Mono',monospace; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; padding:.8rem 1.3rem; border:2px solid var(--sc-encre); border-radius:99px; background:var(--sc-encre); color:var(--sc-papier); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.s-scanner .sc-btn:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--sc-fluo), 4px 4px 0 2px var(--sc-encre); }
.s-scanner .sc-btn.sc-clair { background:var(--sc-papier); color:var(--sc-encre); }
.s-scanner .sc-btn[hidden] { display:none; }
.s-scanner .sc-cmd { display:flex; align-items:center; gap:.6rem; margin-top:1.4rem; flex-wrap:wrap; }
.s-scanner .sc-cpt { margin-left:.4rem; color:var(--sc-doux); }
.s-scanner .sc-filtres { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.s-scanner .sc-filtres button { font:600 .74rem 'Space Mono',monospace; text-transform:uppercase; letter-spacing:.05em; padding:.45rem .8rem; border:2px solid var(--sc-encre); border-radius:99px; background:var(--sc-papier); color:var(--sc-encre); cursor:pointer; }
.s-scanner .sc-filtres button[aria-pressed="true"] { background:var(--sc-fluo); }
.s-scanner .sc-liste { margin-top:1.3rem; }
.s-scanner .sc-liste summary { cursor:pointer; font:400 .78rem 'Space Mono',monospace; letter-spacing:.06em; text-transform:uppercase; padding:.3rem 0; width:max-content; max-width:100%; }
.s-scanner .sc-ol { list-style:none; margin:.6rem 0 0; background:var(--sc-papier); border:2px solid var(--sc-encre); padding:.3rem 1rem; max-height:22rem; overflow:auto; }
.s-scanner .sc-ol li { padding:.75rem 0; border-bottom:1px solid var(--sc-filet); font-size:.86rem; line-height:1.45; } .s-scanner .sc-ol li:last-child { border:0; }
.s-scanner .sc-ol li[hidden] { display:none; }
.s-scanner .sc-ol .sc-m { display:block; color:var(--sc-doux); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.15rem; }
.s-scanner .sc-ol a { font-weight:700; white-space:nowrap; color:inherit; }
.s-scanner .sc-ol button { font:inherit; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; background:none; border:0; border-bottom:2px solid var(--sc-fluo); cursor:pointer; margin-left:.6rem; color:var(--sc-encre); }
.s-scanner.sc-sans-gl, .s-scanner:not(.sc-js) { min-height:0; }
.s-scanner.sc-sans-gl .sc-poste, .s-scanner:not(.sc-js) .sc-poste { display:none; }
.s-scanner.sc-sans-gl .sc-tete, .s-scanner.sc-sans-gl .sc-suite, .s-scanner:not(.sc-js) .sc-tete, .s-scanner:not(.sc-js) .sc-suite { width:min(46rem, 100%); }
.s-scanner.sc-sans-gl .sc-ol { max-height:none; }

@media (max-width:900px), (max-aspect-ratio:9/10) {
  .s-scanner { min-height:0; overflow:visible; }
  .s-scanner .sc-tete, .s-scanner .sc-suite { width:auto; }
  .s-scanner .sc-poste { position:relative; height:min(52svh, 470px); min-height:370px; max-height:none; margin:.4rem -16px 0; overflow:hidden; }
  .s-scanner .sc-suite { display:flex; flex-direction:column; }
  .s-scanner .sc-cmd { order:-1; margin-top:.2rem; } .s-scanner .sc-cpt { margin-left:auto; }
  .s-scanner .sc-cmd .sc-btn { padding:.7rem .85rem; font-size:.74rem; gap:.4rem; }
  .s-scanner .sc-lecteur { margin-top:1rem; } .s-scanner .sc-pied { min-height:0; }
  .s-scanner .sc-nom { font-size:1.55rem; }
  /* téléphone : rien sous 13 px, le texte se lit sans zoomer */
  .s-scanner .sc-mono { font-size:.8rem; }
  .s-scanner .sc-chapo, .s-scanner .sc-note { font-size:1rem; line-height:1.5; }
  .s-scanner .sc-nom { font-size:1.9rem; }
  .s-scanner .sc-lecteur.sc-vide .sc-nom { font-size:1.05rem; }
  .s-scanner .sc-cmd .sc-btn { font-size:.8rem; }
  .s-scanner .sc-filtres button { font-size:.8rem; padding:.55rem .9rem; }
  .s-scanner .sc-liste summary { font-size:.84rem; }
  .s-scanner .sc-ol li { font-size:1rem; } .s-scanner .sc-ol .sc-m, .s-scanner .sc-ol button { font-size:.8rem; }
}
@media (prefers-reduced-motion:reduce) { .s-scanner .sc-btn, .s-scanner .sc-aide, .s-scanner .sc-nom { transition:none; } }