/* ============================================================
   LA PAGE COMPTE

   Un seul objet au centre, sous le projecteur. C'est la seule page
   du site qui n'a rien à montrer : ni classement, ni pourcentage,
   ni tableau. Elle n'a qu'une chose à faire — laisser entrer — donc
   tout ce qui n'est pas la carte s'efface devant elle.

   Les comptes sont réels : les champs parlent à Supabase, qui reçoit
   le mot de passe, le hache, et ne le rend jamais. Ce site n'en voit
   aucun — c'est la raison pour laquelle il n'existe pas de page
   « voir mon mot de passe ».

   LA FORME VIENT D'AILLEURS, LA COULEUR EST D'ICI.
   La disposition suit un modèle choisi par l'utilisateur : champs
   pleins à coins larges, icône à droite DANS le champ, ligne « se
   souvenir de moi » et « mot de passe oublié » aux deux bouts, gros
   bouton pleine largeur, et en bas « vous n'avez pas de compte ? ».

   Ce qui n'a PAS été repris, c'est le violet. Le site est ambre :
   c'est une décision prise, et une page de connexion qui change de
   couleur d'accent est une page qu'on soupçonne de ne pas être du
   même site. La forme vient du modèle, la couleur vient de Nocturne.
   ============================================================ */

.cp-page { max-width: 46rem; }

/* ============================================================
   LA CARTE
   ============================================================ */

/* Elle reçoit un halo ambre par le haut, comme tout ce que le site
   présente comme important. C'est le seul endroit où le projecteur touche
   un objet plutôt que le fond : c'est aussi le seul objet de la page. */
.cp-carte {
  max-width: 26rem;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
}

/* Le halo est posé en « ::before » et non dans le fond de la carte : le
   fond porte déjà le lustre du socle, et deux dégradés dans une même
   propriété se remplacent au lieu de s'additionner. */
.cp-carte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9rem;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 100% at 50% 0, var(--halo), transparent 70%);
}

/* Tout le contenu passe au-dessus du halo. Sans ça, le dégradé se
   poserait par-dessus le texte. */
.cp-carte > * { position: relative; }

/* ============================================================
   LE HAUT DE CHAQUE VUE
   ============================================================ */

.cp-titre {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

/* Une ligne, et une seule. Nos concurrents écrivent « Welcome back!
   Please sign in to continue » : deux phrases pour ne rien dire. */
.cp-accueil {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
  margin-top: calc(var(--s2) * -1);
  margin-bottom: var(--s1);
}

/* ---- les fournisseurs extérieurs ----
   Le bloc reste vide tant que Supabase n'a rien à y mettre, et un bloc
   vide ne doit pas laisser d'espace derrière lui — sinon la carte a un
   trou dont personne ne comprend la raison. */
.cp-tiers { display: flex; flex-direction: column; gap: var(--s4); }
.cp-tiers:empty { display: none; }

/* Blanc, et c'est la règle de Google : leur bouton doit rester
   reconnaissable, pas être reteint aux couleurs du site. C'est le seul
   élément du site qui échappe à Nocturne, et c'est assumé. */
.cp-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 52px;
  border-radius: var(--r-md);
  background: #FFFFFF;
  color: #1F1F1F;
  font-size: var(--t-base);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
}
.cp-google:hover { filter: brightness(0.95); }
.cp-google svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* Le mot « ou » entre deux filets, chacun prenant la place qui reste. */
.cp-ou {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}
.cp-ou::before, .cp-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ============================================================
   LE FORMULAIRE
   ============================================================ */

.cp-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6) var(--s5);
}

.cp-champ { display: flex; flex-direction: column; gap: var(--s2); }

/* Les étiquettes sont retirées de L'ÉCRAN, jamais de la page. Le modèle
   n'affiche que des textes d'exemple dans les champs ; un lecteur d'écran,
   lui, doit continuer d'annoncer « Adresse électronique ». Ces six lignes
   sont la façon standard de cacher à l'œil sans cacher à l'oreille —
   « display:none » ferait taire le lecteur d'écran aussi. */
.cp-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cp-boite { position: relative; display: flex; }

/* Champs PLEINS, sans bordure visible au repos, à coins larges : c'est la
   forme du modèle. Le remplissage droit de 3,2 rem réserve la place de
   l'icône — sans lui, un mot de passe long passerait dessous et
   deviendrait illisible au moment précis où on l'affiche pour le relire. */
.cp-champ input {
  font-family: var(--body);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--s3) 3.2rem var(--s3) var(--s4);
  min-height: 52px;
  width: 100%;
}

.cp-champ input::placeholder { color: var(--ink-faint); }

/* Un champ sans icone recupere son remplissage droit : la place reservee
   a une icone absente ferait une marge que rien n'explique. */
.cp-boite:not(:has(.cp-arobase)):not(:has(.cp-oeil)) input { padding-right: var(--s4); }

.cp-champ input:focus-visible {
  outline: none;
  border-color: var(--a);
  background: var(--surface);
}

/* ---- l'arobase ----
   Purement décorative : l'étiquette dit déjà « Adresse électronique » et le
   texte d'exemple montre une adresse. Elle est donc masquée aux lecteurs
   d'écran et ne capte pas le clic — cliquer dessus doit poser le curseur
   dans le champ, comme si elle n'existait pas. */
.cp-arobase {
  position: absolute;
  right: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--t-lg);
  color: var(--ink-faint);
  pointer-events: none;
}

/* ---- l'œil ----
   La zone que touche un pouce doit être plus grande que le dessin qu'elle
   porte : le champ fait 52 px de haut, le bouton en prend 40. */
.cp-oeil {
  position: absolute;
  right: var(--s2);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.5rem;
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cp-oeil:hover { color: var(--a); }
.cp-oeil:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }
.cp-oeil svg { width: 1.25rem; height: 1.25rem; }

/* L'œil est barré quand le mot de passe est VISIBLE : l'icône montre ce
   que le clic va faire — masquer — et jamais l'état où l'on se trouve.
   C'est la règle de tous les boutons du site. */
.cp-barre { display: none; }
.cp-oeil[aria-pressed="true"] .cp-barre { display: block; }

/* ---- le champ du code ----

   Les six chiffres sont ecrits dans la police a chasse fixe du site, celle
   qui sert deja a TOUS les chiffres du site : un score, un pourcentage et
   un code de verification sont la meme famille de chose, ils doivent se
   composer pareil. L'ecartement des lettres fait le reste — six chiffres
   espaces se recopient sans perdre sa place, six chiffres colles non.

   Le remplissage droit du champ est remis a la valeur de gauche : il n'y a
   aucune icone ici, et un texte centre dans un champ dont un cote est plus
   large que l'autre penche visiblement. */
/* « .cp-champ .cp-code » et non « .cp-code » tout court : la regle
   generale des champs s'ecrit « .cp-champ input », qui compte une classe et
   un element. Une regle a une seule classe perd contre elle, et la police a
   chasse fixe ne s'appliquait pas. Deux classes l'emportent. C'est le piege
   classique des feuilles de style : ce n'est pas l'ordre d'ecriture qui
   tranche, c'est le poids du selecteur. */
.cp-champ .cp-code {
  font-family: var(--mono);
  font-size: var(--t-xl);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.35em;
  /* Le decalage rattrape l'ecartement ajoute APRES le dernier chiffre, que
     le centrage compte comme s'il etait du texte. Sans lui, la suite parait
     poussee vers la gauche. */
  text-indent: 0.35em;
  padding-right: var(--s4);
}
.cp-champ .cp-code::placeholder { letter-spacing: 0.35em; opacity: 0.45; }

/* ---- l'adresse rappelee dans la phrase d'accueil ----
   Une adresse electronique n'a pas de coupure naturelle : sur un telephone,
   une adresse longue depasserait de la carte. */
.cp-adresse { color: var(--ink-soft); word-break: break-all; }

/* ---- la longueur du mot de passe ----
   Grise tant que c'est trop court, verte quand ça suffit. Le TEXTE change
   aussi, et pas seulement la couleur : la couleur seule ne dit rien à qui
   ne distingue pas le vert du gris. */
.cp-jauge {
  font-size: var(--t-sm);
  color: var(--ink-faint);
  padding-left: var(--s2);
  transition: color 0.15s ease;
}
.cp-jauge-ok { color: var(--win); }

/* ============================================================
   « SE SOUVENIR DE MOI » ET « MOT DE PASSE OUBLIÉ »
   ============================================================ */

/* Les deux sur une ligne, aux deux bouts. Sur un écran étroit ils passent
   l'un sous l'autre plutôt que de se serrer : deux cibles tactiles
   collées se cliquent de travers. */
.cp-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
}

/* « Rester connecté » plutot que « Se souvenir de moi » : deux mots de
   moins, et surtout une phrase qui dit CE QUI SE PASSE au lieu de traduire
   mot a mot l'anglais. Sur un telephone de 375 px, les deux libelles
   d'origine faisaient 288 px pour 288 px disponibles — ils passaient a la
   ligne pour un cheveu. Ils tiennent maintenant avec quarante pixels de
   marge, ce qui les fait tenir aussi sur les ecrans plus etroits. */

.cp-case {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}

.cp-case input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--a);
  cursor: pointer;
}

/* La case du consentement porte deux lignes de texte : elle doit s'aligner
   sur la PREMIÈRE ligne et non sur le milieu du bloc. */
.cp-case-haute { align-items: flex-start; gap: var(--s3); }
.cp-case-haute input { margin-top: 0.2em; }

/* Un bouton qui doit se lire comme un lien : il change de vue sans changer
   de page, donc ce n'est pas un lien — mais c'en est un pour l'œil. */
.cp-lien {
  font-family: var(--body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cp-lien:hover { color: var(--a); }
.cp-lien:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 2px; }

.cp-lien-fort {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--a);
  text-decoration: none;
}
.cp-lien-fort:hover { text-decoration: underline; }

/* ============================================================
   LES MESSAGES
   ============================================================ */

/* Rouge quand ça a échoué, vert quand c'est passé. La couleur n'est JAMAIS
   le seul porteur de l'information : le texte dit toujours ce qui s'est
   passé, pour qui ne distingue pas le rouge du vert. */
.cp-msg {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--live);
  background: var(--live-soft);
  border: 1px solid var(--live);
  border-radius: var(--r-sm);
  padding: var(--s3);
}

.cp-msg-bon {
  color: var(--win);
  background: var(--n-soft);
  border-color: var(--win);
}

/* Pendant l'aller-retour avec le serveur, le bouton est éteint : sans ça,
   un double clic envoie deux inscriptions et la seconde échoue en
   annonçant que l'adresse existe déjà — ce qui est vrai, et
   incompréhensible. */
.cp-champ input:disabled,
.cp-valide:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cp-valide { width: 100%; }

/* ============================================================
   LE BAS DE LA CARTE
   ============================================================ */

/* La bascule vers l'autre vue. Séparée par un filet, comme dans le modèle :
   c'est une sortie, pas une étape du formulaire. */
.cp-bascule {
  border-top: 1px solid var(--line);
  padding: var(--s4) var(--s5);
  text-align: center;
  font-size: var(--t-md);
  color: var(--ink-faint);
}

/* La mention de confiance. Nos concurrents posent ici le logo de leur
   fournisseur avec « Secured by », ce qui ne dit ni ce qui est protégé ni
   comment. On nomme le fournisseur ET ce qu'il fait. */
/* ---- le mot d'accueil de qui arrive par le verrou ----

   Il coiffe la carte, en ambre discret : c'est une explication, pas une
   alerte. Le rouge de .cp-msg dirait « vous avez fait une erreur », et
   personne n'en a fait une — on a cliqué sur un match, c'est tout.

   Un filet dessous plutôt qu'un cadre autour : la carte a déjà le sien,
   et deux cadres emboîtés donneraient à cette phrase le poids d'un
   avertissement. */
.cp-verrou {
  margin: 0;
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--a-soft);
  color: var(--a);
  font-size: var(--t-md);
  line-height: 1.5;
  text-align: center;
}

.cp-gage {
  border-top: 1px solid var(--line);
  padding: var(--s3) var(--s5);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}
.cp-gage strong { color: var(--ink-soft); font-weight: 600; }

/* ---- l'état « déjà connecté » ---- */
.cp-bonjour {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
}
.cp-bonjour strong { color: var(--a); word-break: break-all; }

/* ============================================================
   LES DEUX COLONNES DU BAS
   ============================================================ */

.cp-apres {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.cp-apres h2 {
  font-size: var(--t-lg);
  font-weight: 650;
  letter-spacing: -0.012em;
}

.cp-apres ul {
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* La puce est posée en absolu plutôt que laissée à « list-style » : sur
   une ligne qui passe à trois, le texte doit revenir sous le texte et pas
   sous la puce. */
.cp-apres li {
  position: relative;
  padding-left: var(--s4);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink-soft);
}

.cp-apres li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: var(--r-pill);
  background: var(--a);
}

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