/* =============================================================
   SPORT NETWORK, page de lancement. Direction « Flip Board ».
   Le panneau à palettes d'un stade. Rien n'apparaît, tout bascule.
   Palettes en greige relevé sur leur bannière, pas en ambre.

   Production. Différences avec la maquette :
     - la photo de fond de 412 Ko est retirée (non licenciée, hors sujet) ;
     - états du formulaire, focus clavier et zones tactiles ajoutés ;
     - une seule feuille pour les deux langues.
============================================================= */
:root{
  --board:#000; --flap:#D6CEC2; --flap-2:#B9AF9F; --paper:#EDE9E2; --ink:#000;
  --live:#E4572E; --err:#B3261E;
  --f:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,60px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);overflow-x:hidden}
.wrap{max-width:1400px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
a{color:inherit}

/* le focus clavier doit se voir, partout, sans exception */
:focus-visible{outline:3px solid var(--live);outline-offset:2px}

/* lu par les lecteurs d'écran, invisible à l'œil */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- en-tête ---------- */
header{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:20}
.hd{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px}
.crest{width:32px;color:var(--ink)}
.crest svg{display:block;width:100%;height:auto}
.wordmark{font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.hd .no{margin-left:auto;font-size:10px;letter-spacing:.22em;opacity:.6;text-transform:uppercase}
.lang{display:flex;gap:6px;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.lang a{text-decoration:none;opacity:.45;padding:4px 2px}
.lang a[aria-current="true"]{opacity:1;font-weight:700;text-decoration:underline;
  text-underline-offset:4px}
@media(max-width:560px){.hd .no{display:none}.lang{margin-left:auto}}

/* ---------- le panneau ---------- */
.board-wrap{position:relative;padding-top:clamp(40px,7vw,110px);
  padding-bottom:clamp(36px,6vw,90px);margin-bottom:clamp(30px,5vw,70px)}
.board-wrap::before{content:"";position:absolute;inset:0;left:50%;transform:translateX(-50%);
  width:100vw;background:#0a0a0a;z-index:0}
.board-wrap>*{position:relative;z-index:2}
.board{
  background:var(--board);padding:clamp(16px,2.6vw,38px) clamp(12px,2.2vw,32px);
  border:3px solid var(--ink);border-color:#2a2a2a;position:relative;
  box-shadow:inset 0 0 0 2px rgba(214,206,194,.16),0 30px 60px rgba(0,0,0,.45);
}
.board::after{ /* léger biseau de châssis, pas d'ombre douce */
  content:"";position:absolute;inset:6px;border:1px solid rgba(214,206,194,.10);
  pointer-events:none;
}
.rowline{display:flex;flex-wrap:nowrap;gap:clamp(2px,.35vw,5px);
  margin-bottom:clamp(5px,.8vw,10px);justify-content:center}
.rowline:last-child{margin-bottom:0}
.cell{
  position:relative;flex:1 1 0;min-width:0;max-width:42px;
  height:clamp(21px,4vw,64px);border-radius:clamp(2px,.5vw,6px);
  background:linear-gradient(var(--flap) 0 49.5%, var(--flap-2) 50.5% 100%);
  color:var(--ink);font-weight:700;font-size:clamp(11px,2.1vw,34px);line-height:1;
  display:flex;align-items:center;justify-content:center;
  transform-origin:center;backface-visibility:hidden;
}
.cell::before{ /* la fente centrale de la palette */
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.45);
}
.cell{overflow:hidden}
.cell.blank{background:#151515;color:transparent}
.cell.flip{animation:flap .11s linear}
@keyframes flap{0%{transform:rotateX(0)}49%{transform:rotateX(-88deg)}
  50%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
.board .sub{
  margin:clamp(14px,2vw,26px) 0 0;text-align:center;color:var(--flap);opacity:.62;
  font-size:clamp(9px,1vw,12px);letter-spacing:.24em;text-transform:uppercase;
}

/* ---------- la saisie, elle s'écrit sur le panneau ---------- */
.entry{display:flex;gap:0;margin:clamp(18px,3vw,34px) auto 0;max-width:640px}
.entry input[type="email"]{
  flex:1;min-width:0;background:#141414;border:3px solid #141414;border-right:0;
  outline:0;font:inherit;font-weight:600;font-size:clamp(.9rem,1.3vw,1.05rem);
  letter-spacing:.08em;padding:15px 16px;color:var(--flap);
  min-height:52px; /* cible tactile confortable au pouce */
}
.entry input::placeholder{color:rgba(214,206,194,.45);text-transform:uppercase;
  letter-spacing:.16em}
.entry input[aria-invalid="true"]{border-color:var(--err)}
button{
  font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(.8rem,1vw,.9rem);background:var(--live);color:#EFEBE3;
  border:3px solid var(--live);padding:0 clamp(18px,2.4vw,32px);cursor:pointer;
  min-height:52px;white-space:nowrap;
}
button:hover{background:#c9451f;border-color:#c9451f}
button[disabled]{opacity:.55;cursor:progress}
.microc{text-align:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  margin:12px 0 0;color:rgba(214,206,194,.55)}
.microc.is-error{color:#F2836E;opacity:1}
.hp{position:absolute;left:-9999px}
@media(max-width:520px){
  .entry{flex-direction:column;gap:10px}
  .entry input[type="email"]{border-right:3px solid #141414}
  button{padding:16px}
}

/* ---------- le parrainage, après inscription ---------- */
.ref{display:none;max-width:640px;margin:clamp(20px,3vw,30px) auto 0;text-align:center}
.ref.is-on{display:block}
.ref h2{margin:0 0 10px;font-size:clamp(1rem,2vw,1.35rem);letter-spacing:-.01em;
  color:var(--flap)}
.ref p{margin:0 0 14px;font-size:clamp(.8rem,1vw,.9rem);line-height:1.6;
  color:rgba(214,206,194,.7)}
.ref .row{display:flex;gap:0}
.ref input{flex:1;min-width:0;background:#141414;border:3px solid #141414;border-right:0;
  font:inherit;font-size:.8rem;padding:13px 14px;color:var(--flap);min-height:48px}
.ref button{min-height:48px}

/* ---------- les trois blocs ---------- */
.pages{padding-top:clamp(50px,8vw,120px);padding-bottom:clamp(40px,6vw,90px)}
.page{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(14px,3vw,44px);
  padding:clamp(20px,3vw,36px) 0;border-top:2px solid var(--ink);
}
.page:last-child{border-bottom:2px solid var(--ink)}
@media(max-width:760px){.page{grid-template-columns:1fr;gap:8px}}
.page .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.55;
  padding-top:.4em}
.page h3{margin:0 0 12px;font-size:clamp(1.3rem,3.4vw,2.8rem);letter-spacing:-.01em;
  text-transform:uppercase;line-height:1.05}
.page p{margin:0;font-size:clamp(.85rem,1vw,.95rem);line-height:1.6;max-width:56ch}

/* ---------- pied ---------- */
footer{border-top:2px solid var(--ink);padding:18px 0 34px;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase}
.ft{display:flex;gap:8px 24px;flex-wrap:wrap;align-items:center}
.ft .sp{margin-left:auto}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cell.flip{animation:none}
}

/* =============================================================
   Après l'inscription. Le panneau sort de sa boîte et prend tout
   l'écran : c'est le seul moment théâtral de la page, il dure deux
   secondes, et c'est celui dont les gens parlent.
============================================================= */
.after{display:none}

body.sn-done{overflow:hidden}
body.sn-done header,
body.sn-done .pages,
body.sn-done footer,
body.sn-done .entry,
body.sn-done .microc{display:none}

body.sn-done .board-wrap{background:#0a0a0a;max-width:none;
  position:fixed;inset:0;z-index:60;margin:0;overflow-y:auto;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,4vw,60px);
}
body.sn-done .board-wrap::before{left:0;width:100%;transform:none}
body.sn-done .after{display:block;max-width:640px;margin:clamp(20px,3vw,32px) auto 0;
  text-align:center}

/* ---------- la question de la discipline ---------- */
.disc h2,.ref h2{margin:0 0 10px;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:-.01em;
  color:var(--flap);font-weight:600}
.ref p{margin:0 0 16px;font-size:clamp(.8rem,1vw,.9rem);line-height:1.6;
  color:rgba(214,206,194,.7)}
.disc .row{display:flex;gap:0}
.disc select{
  flex:1;min-width:0;background:#141414;border:3px solid #141414;border-right:0;
  font:inherit;font-size:clamp(.85rem,1.1vw,.95rem);padding:13px 14px;color:var(--flap);
  min-height:52px;appearance:none;cursor:pointer;
}
.disc select option{background:#141414;color:var(--flap)}
.disc select optgroup{background:#0a0a0a;color:rgba(214,206,194,.55)}
.skip{background:none;border:0;color:rgba(214,206,194,.5);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;margin-top:14px;padding:8px;min-height:auto;cursor:pointer}
.skip:hover{background:none;color:var(--flap)}

/* ---------- le partage, en un geste et pas en trois ---------- */
.ref{display:none}
.ref.is-on{display:block}
.share{display:flex;gap:10px;margin-bottom:14px}
.share>*{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;
  font:inherit;font-weight:700;font-size:clamp(.7rem,.9vw,.8rem);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:transparent;color:var(--flap);border:3px solid rgba(214,206,194,.28);
}
.share>*:hover{background:var(--flap);color:#000;border-color:var(--flap)}
.share #sh-cp.done{background:var(--live);border-color:var(--live);color:var(--paper)}
.ref input{width:100%;background:#141414;border:3px solid #141414;font:inherit;font-size:.75rem;
  padding:12px 14px;color:rgba(214,206,194,.7);text-align:center;min-height:46px}
@media(max-width:520px){
  .disc .row{flex-direction:column;gap:10px}
  .disc select{border-right:3px solid #141414}
  .share{flex-wrap:wrap}
}

.close{background:none;border:0;color:rgba(214,206,194,.45);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;margin-top:26px;padding:10px;min-height:auto;cursor:pointer}
.close:hover{background:none;color:var(--flap)}

/* ---------- le visiteur parrainé, reconnu dès l'arrivée ---------- */
.invited{display:none;text-align:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--live);margin:0 0 14px;font-weight:700}
.invited.is-on{display:block}

/* ---------- le visiteur qui revient : jamais un formulaire vide ---------- */
body.sn-back .entry,
body.sn-back .microc,
body.sn-back .invited,
body.sn-back .close{display:none}
body.sn-back .after{max-width:640px;margin:clamp(20px,3vw,32px) auto 0;text-align:center}

/* ---------- la mention obligatoire, discrete mais lisible ---------- */
.legal{max-width:52ch;margin:16px auto 0;text-align:center;font-size:11px;line-height:1.6;
  color:rgba(214,206,194,.42)}
body.sn-done .legal,body.sn-back .legal{display:none}