/* ============================================================
   RCF — LOT ONLINE 2A · PSEUDO JOUEUR ET ÉCRAN COMPTE
   ------------------------------------------------------------
   Chargée en dernier. Elle n'habille que deux choses :
   le portail de premier pseudo (#compteGate) et le corps de la
   feuille Compte (#compteStage). Aucun sélecteur générique,
   aucune règle qui puisse atteindre un autre écran.
   ============================================================ */

/* ------------------------------------------------- le portail de pseudo */
/* Il vit dans la scène 9:16 (#rcfStage, position:relative), comme les
   feuilles remontantes : jamais au-dessus de la page. z-index 40 le place
   au-dessus des feuilles (20) — tant qu'il n'y a pas de pseudo, rien ne
   passe devant. */
#compteGate{ position:absolute; inset:0; z-index:40; display:none }
#compteGate.on{ display:block }

#compteGate .cpt-gate-veil{
  position:absolute; inset:0;
  background:rgba(3,10,18,.82);
  backdrop-filter:blur(4px);
}

#compteGate .cpt-box{
  position:absolute; left:0; right:0; bottom:0;
  max-height:92%;
}

#compteGate .cpt-sub{
  font-size:12.5px; line-height:1.55; color:var(--dim);
  margin:0 0 16px;
}

/* ------------------------------------------- champ de saisie, partagé */
.cpt-lab{
  display:block; margin:0 0 6px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}
.cpt-input{
  width:100%; box-sizing:border-box;
  padding:13px 14px; border-radius:12px;
  border:1px solid rgba(150,185,215,.28);
  background:rgba(4,15,26,.72); color:var(--ink);
  font-family:var(--body); font-size:15px;
  /* 15px minimum : en dessous, iOS zoome sur le champ au focus et sort la
     scène de son cadre. */
}
.cpt-input:focus{
  outline:none;
  border-color:rgba(255,196,40,.55);
  box-shadow:var(--shadow-focus);
}
.cpt-input::placeholder{ color:rgba(140,160,180,.55) }

.cpt-err{
  min-height:15px; margin:7px 0 0;
  font-size:11.5px; line-height:1.3; color:var(--red);
}
#compteGate.cpt-gate--err .cpt-input{ border-color:rgba(255,102,119,.6) }

#compteGate .cpt-go{ width:100%; margin-top:14px }

#compteGate .cpt-note{
  margin:14px 0 0; padding:10px 12px; border-radius:10px;
  border-left:3px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
  font-size:11.5px; line-height:1.5; color:var(--dim);
}

/* ------------------------------------------------ le corps de la feuille */
#compteStage .l12-compte-ic{
  width:46px; height:46px; margin:2px auto 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,196,40,.42);
  background:rgba(255,196,40,.1);
}
#compteStage .l12-compte-ic svg{ width:24px; height:24px; color:var(--hivis) }
#compteStage .l12-sheet-title{ text-align:center }

/* Le pseudo est l'information principale de l'écran : il est traité comme
   un titre, pas comme une ligne de formulaire. */
#compteStage .cpt-pseudo{
  margin:6px 0 4px; text-align:center;
  font-family:var(--disp); font-weight:600; font-size:24px;
  letter-spacing:.04em; color:#fff;
  overflow-wrap:anywhere;
}
#compteStage .cpt-statut{ margin:0 0 14px; text-align:center }
#compteStage .cpt-badge{
  display:inline-block; padding:3px 11px; border-radius:999px;
  border:1px solid rgba(150,185,215,.34);
  background:rgba(255,255,255,.05);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}
#compteStage .l12-compte-n{
  margin:0 auto; max-width:34em; padding:10px 12px; border-radius:10px;
  border-left:3px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  font-size:12.5px; line-height:1.5; color:var(--dim);
}

#compteStage .cpt-actions{ margin-top:14px; display:flex; flex-direction:column; gap:9px }

.cpt-btn{
  width:100%; min-height:var(--tap);
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:12px; border-radius:12px;
  border:1px solid rgba(150,185,215,.26);
  background:rgba(255,255,255,.04); color:#e8eef5; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase;
}
.cpt-btn:hover{ border-color:rgba(255,196,40,.5); color:#fff }
.cpt-btn--fort{
  border-color:rgba(255,196,40,.55);
  background:rgba(255,196,40,.12); color:#fff;
}
.cpt-btn svg{ width:17px; height:17px; flex:none }

/* Préparé, pas branché. Le bouton se voit, se lit, et ne ment pas :
   il est inerte et la ligne dessous dit pourquoi. */
.cpt-btn--google[disabled]{
  opacity:.45; cursor:not-allowed;
}
.cpt-btn--google[disabled]:hover{
  border-color:rgba(150,185,215,.26); color:#e8eef5;
}
#compteStage .cpt-soon{
  margin:2px 0 0; text-align:center;
  font-size:11px; line-height:1.4; color:var(--faint);
}

#compteStage .cpt-edit{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(150,185,215,.18) }
#compteStage .cpt-edit-row{ display:flex; gap:9px; margin-top:10px }
#compteStage .cpt-edit-row .cpt-btn{ flex:1 }

@media (max-width:380px){
  #compteStage .cpt-pseudo{ font-size:21px }
  .cpt-btn{ font-size:10px; letter-spacing:.12em }
}

/* ============================================================
   LOT ONLINE 2B — les trois visages de l'écran Compte
   ------------------------------------------------------------
   Invité · Compte Google · Hors ligne. Même gabarit, même
   grammaire visuelle : seul le badge et le bloc d'actions
   changent. Rien ici ne sort de #compteStage.
   ============================================================ */

/* Le badge « Compte Google » est le seul état où la pastille
   s'allume : c'est un statut acquis, pas une information neutre. */
#compteStage .cpt-badge--on{
  border-color:rgba(73,212,154,.5);
  background:rgba(73,212,154,.12);
  color:#9ff0cb;
}

/* L'adresse, discrète et masquée : elle confirme le bon compte
   sans s'étaler sur un écran qu'on montre à quelqu'un. */
#compteStage .cpt-mail{
  margin:-8px 0 14px; text-align:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--faint); overflow-wrap:anywhere;
}

/* Le bouton officiel Google, quand GIS parvient à le dessiner.
   Il remplace visuellement le nôtre, qui reste le repli. */
#compteStage .cpt-gis{ display:flex; justify-content:center }
#compteStage .cpt-gis:not(:empty) + .cpt-btn--google{ display:none }
#compteStage .cpt-gis:not(:empty) ~ .cpt-soon{ margin-top:6px }

/* Le bouton Google n'est plus décoratif : il agit. Il ne s'estompe
   que si le serveur ne l'a pas configuré ou reste injoignable. */
#compteStage .cpt-btn--google[disabled]{ opacity:.45; cursor:not-allowed }
#compteStage .cpt-btn--google[disabled]:hover{
  border-color:rgba(150,185,215,.26); color:#e8eef5;
}

/* Les messages d'action : rouge quand c'est un refus, neutre quand
   ce n'est qu'une étape en cours (« Vérification… »). */
#compteStage .cpt-err{ text-align:center; margin:4px 0 0 }
#compteStage .cpt-err--info{ color:var(--dim) }


/* ============================================================
   LOT ONLINE 2B.1 — LE BANDEAU DE MISE À JOUR
   ------------------------------------------------------------
   Il ne disparaît pas tout seul : une nouvelle version qui
   s'annonce pendant deux secondes n'est pas annoncée du tout.
   Posé dans la scène, au-dessus de tout, et refermable.
   ============================================================ */
.rcf-maj{
  position:absolute; left:10px; right:10px;
  top:calc(8px + var(--rcf-safe-t, 0px));
  z-index:60;
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 10px 13px; border-radius:12px;
  border:1px solid rgba(255,196,40,.45);
  background:linear-gradient(180deg, rgba(22,46,70,.97), rgba(9,24,40,.98));
  box-shadow:0 14px 34px -18px rgba(0,0,0,.9);
  animation:rcfMajEntre .28s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes rcfMajEntre{ from{ transform:translateY(-8px); opacity:0 } to{ transform:none; opacity:1 } }
.rcf-maj-t{
  flex:1; font-size:12px; line-height:1.35; color:#e8eef5;
}
.rcf-maj-go{
  flex:none; padding:8px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,196,40,.6); background:rgba(255,196,40,.16); color:#fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
.rcf-maj-go:hover{ background:rgba(255,196,40,.26) }
.rcf-maj-x{
  flex:none; width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(150,185,215,.28); background:transparent; color:var(--dim);
  font-size:16px; line-height:1;
}
.rcf-maj-x:hover{ color:#fff; border-color:rgba(255,196,40,.5) }
@media (prefers-reduced-motion:reduce){ .rcf-maj{ animation:none } }

/* ============================================================================
   LOT LEGAL — LES DEUX LIENS LÉGAUX
   ----------------------------------------------------------------------------
   Partagé par la feuille Compte et la feuille Infos. Le bloc vit ici parce que
   cette feuille est chargée en dernier dans index.html : aucune règle de thème
   antérieure ne peut le contredire, et cela évite un fichier CSS de plus pour
   quatre déclarations.

   Discret, volontairement : ce sont des mentions obligatoires, pas des entrées
   de menu. Elles se voient quand on les cherche, et ne disputent rien à
   « Jouer ».
   ============================================================================ */
.rcf-legal{
  margin:18px 0 0; padding-top:14px;
  border-top:1px solid rgba(150,185,215,.18);
  display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:6px 10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase;
}
.rcf-legal a{ color:var(--faint); text-decoration:none;
  border-bottom:1px solid rgba(150,185,215,.28); padding-bottom:1px; }
.rcf-legal a:hover,.rcf-legal a:focus{ color:var(--hivis);
  border-bottom-color:rgba(255,196,40,.6); }
.rcf-legal i{ font-style:normal; color:rgba(150,185,215,.4); }

/* LOT LEGAL 1.1 — la variante d'ACCUEIL. Même bloc, moins de place : l'accueil
   tient en un écran et n'a pas 32 px à donner. Le filet du dessus disparaît —
   `.l12-foot-rule` et la ligne de version en tiennent déjà lieu — et le texte
   descend d'un cran pour rester un murmure sous « RCF V1.0 · Solo ». */
.rcf-legal--accueil{
  margin:8px 0 0; padding-top:0; border-top:0;
  font-size:9px; letter-spacing:.18em; gap:4px 8px;
}
.rcf-legal--accueil a{ color:rgba(150,185,215,.62); border-bottom-color:rgba(150,185,215,.2) }
.rcf-legal--accueil a:hover,.rcf-legal--accueil a:focus{ color:var(--hivis) }
@media (max-height:700px){ .rcf-legal--accueil{ margin-top:6px; font-size:8.5px } }

/* LEGAL 1.3 — la variante INTRO. La vidéo occupe tout l'écran : les liens se
   posent par-dessus, en bas, au-dessus de la safe-area de l'iPhone. Un léger
   voile derrière le texte, sinon une image claire le rendrait illisible. */
#scIntroVideo .rcf-legal--intro{
  position:absolute; left:0; right:0;
  bottom:calc(10px + var(--rcf-safe-b, 0px));
  z-index:6; margin:0; padding:6px 10px; border-top:0;
  font-size:9px; letter-spacing:.16em; gap:4px 8px;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
#scIntroVideo .rcf-legal--intro a{ color:rgba(233,241,248,.72); border-bottom-color:rgba(233,241,248,.28) }
#scIntroVideo .rcf-legal--intro a:hover,
#scIntroVideo .rcf-legal--intro a:focus{ color:var(--hivis); border-bottom-color:rgba(255,196,40,.7) }