/* ==========================================================================
   ESPACE CLIENT — feuille SÉPARÉE, chargée sur trois pages seulement.
   ==========================================================================

   Pourquoi pas dans site.css, qui est censé être « le seul et unique fichier
   CSS » du thème : ces ~11 ko ne servent qu'à /connexion/, /mon-compte/ et
   /mot-de-passe-oublie/. Les laisser dans la feuille commune, c'était les
   faire télécharger par CHAQUE visiteur de l'accueil, des guides et du blog
   pour trois pages privées qu'ils ne verront jamais. La règle du fichier
   unique existe pour éviter la dispersion, pas pour imposer du poids mort :
   même raisonnement que pour `espace.js`, même périmètre, même garde dans
   `scripts/verifier-rendu.mjs`.

   ⚠️ `.entete__compte` et `.burger__liste--compte` restent dans site.css :
   le lien « Mon compte » est dans l'en-tête de TOUTES les pages.
   ========================================================================== */

/* --- Connexion / mot de passe oublié -------------------------------------- */

.espace-entete,
.espace-form,
.espace-aide {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.espace-entete {
  text-align: center;
}

.espace-sous-titre {
  margin-top: var(--gap-xs);
  color: var(--texte-doux);
  line-height: 1.6;
}

.espace-form {
  margin-top: var(--gap-m);
}

.espace-form__action {
  margin-top: var(--gap-s);
}

.espace-form__lien {
  max-width: 420px;
  margin: var(--gap-s) auto 0;
  text-align: center;
  font-size: var(--taille-corps);
}

.espace-aide {
  margin-top: var(--gap-m);
  padding: var(--gap-s) var(--gap-m);
  background: var(--creme-ombre);
  border-radius: var(--rayon);
}

.espace-aide__titre {
  font-family: var(--police-display);
  font-size: var(--taille-h5);
  font-weight: 500;
  color: var(--nuit);
}

.espace-aide__texte {
  margin-top: var(--gap-xs);
  color: var(--texte-doux);
  line-height: 1.6;
}

/* --- En-tête de « Mon compte » -------------------------------------------- */

.compte-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
}

.compte-entete__identite {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

/* Pastille d'initiale : nuit sur crème, comme le bouton primaire. */
.compte-initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nuit);
  color: var(--creme);
  font-weight: 600;
  font-size: var(--taille-corps);
}

.compte-deconnexion {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--texte-doux);
  cursor: pointer;
  text-underline-offset: 3px;
}

.compte-deconnexion:hover {
  color: var(--nuit);
  text-decoration: underline;
}

.compte-intro {
  margin-top: var(--gap-xs);
  max-width: var(--largeur-lecture);
  color: var(--texte-doux);
  line-height: 1.6;
}

.compte-bloc + .compte-bloc {
  margin-top: var(--gap-l);
  padding-top: var(--gap-l);
  border-top: 1px solid var(--voile-nuit-09);
}

/* --- Les cartes ----------------------------------------------------------- */

.compte-duo {
  display: grid;
  gap: var(--gap-s);
  margin-top: var(--gap-m);
}

@media (min-width: 720px) {
  .compte-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.compte-carte {
  padding: var(--gap-m);
  background: var(--blanc);
  border: 1px solid var(--voile-nuit-06);
  border-radius: var(--rayon);
}

.compte-duo + .compte-carte,
.compte-code + .compte-carte {
  margin-top: var(--gap-s);
}

.compte-carte__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-s);
}

.compte-carte__etiquette {
  font-family: var(--police-corps);
  font-size: var(--taille-mini);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texte-clair);
}

.compte-carte__titre {
  font-family: var(--police-display);
  font-size: var(--taille-h4);
  font-weight: 500;
  color: var(--nuit);
}

.compte-carte__texte {
  margin-top: var(--gap-xs);
  color: var(--texte-doux);
  line-height: 1.6;
}

/* Le chiffre ou le nom qui porte la carte. Fraunces : c'est une VALEUR qu'on
   lit d'un coup d'œil, pas une étiquette d'interface. */
.compte-chiffre {
  font-family: var(--police-display);
  font-size: var(--taille-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--nuit);
  overflow-wrap: anywhere;
}

/* --- Pastilles d'état ------------------------------------------------------
   La couleur ne dit JAMAIS l'état toute seule (WCAG 1.4.1) : chaque pastille
   porte son libellé en toutes lettres. La couleur ne fait que hiérarchiser. */

.compte-pastille {
  padding: 4px 12px;
  border-radius: var(--rayon-pilule);
  font-size: var(--taille-petit);
  font-weight: 600;
  white-space: nowrap;
}

.compte-pastille--ok {
  background: var(--voile-sauge-14);
  color: var(--sauge-texte);
}

.compte-pastille--essai {
  background: var(--voile-corail-12);
  color: var(--corail-texte);
}

.compte-pastille--attention {
  background: var(--voile-terre-13);
  color: var(--teinte-terre);
}

.compte-pastille--neutre {
  background: var(--creme-ombre);
  color: var(--texte-doux);
}

/* --- Lignes intitulé / valeur ---------------------------------------------- */

.compte-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-xs);
  padding: 10px 0;
  border-bottom: 1px solid var(--voile-nuit-06);
}

.compte-ligne:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.compte-ligne__intitule {
  color: var(--texte-doux);
}

.compte-ligne__valeur {
  font-weight: 500;
  color: var(--nuit);
}

/* --- Le code du cercle : le seul aplat nuit de la page --------------------- */

.compte-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-top: var(--gap-s);
  padding: var(--gap-m);
  background: var(--nuit);
  border-radius: var(--rayon);
}

.compte-code__texte {
  flex: 1 1 260px;
}

.compte-code__titre {
  font-family: var(--police-display);
  font-size: var(--taille-h4);
  font-weight: 500;
  color: var(--creme);
}

.compte-code__aide {
  margin-top: 6px;
  max-width: 46ch;
  color: var(--voile-creme-72);
  line-height: 1.55;
}

.compte-code__valeur {
  padding: 12px 20px;
  background: rgba(251, 248, 244, 0.1);
  border-radius: var(--rayon-s);
  font-family: var(--police-display);
  font-size: var(--taille-h3);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--creme);
  /* Un code se sélectionne d'un double-clic pour être recopié. */
  user-select: all;
}

/* --- Les tablettes --------------------------------------------------------- */

.compte-tablettes {
  list-style: none;
}

.compte-tablette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xs);
  padding: 12px 0;
  border-bottom: 1px solid var(--voile-nuit-06);
}

.compte-tablette:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.compte-tablette__infos {
  min-width: 0;
}

.compte-tablette__nom {
  display: block;
  font-weight: 500;
  color: var(--nuit);
}

.compte-tablette__detail {
  display: block;
  margin-top: 2px;
  font-size: var(--taille-corps);
  color: var(--texte-clair);
}

.compte-tablette__etat {
  font-size: var(--taille-corps);
  color: var(--sauge-texte);
}

/* --- L'action portée par la carte d'état -----------------------------------
   Chaque état d'abonnement propose UNE action, posée sous son texte plutôt
   qu'en bas de page : la réponse doit se trouver là où la question se pose.

   `margin-top: auto` colle l'action au bas de la carte. Les deux cartes du duo
   n'ont pas la même hauteur de texte ; sans cela, le bouton flotterait au
   milieu de la plus courte. La carte devient donc une colonne flex. */

.compte-carte {
  display: flex;
  flex-direction: column;
}

.compte-carte > .compte-offre,
.compte-carte > .bouton {
  margin-top: auto;
}

.compte-offre {
  margin-top: var(--gap-s);
}

/* L'alternative annuelle : un vrai bouton de soumission, présenté comme un
   lien. Elle ne doit pas rivaliser avec l'action principale — mais elle reste
   une cible de 44 px et garde un focus visible, parce que c'est un bouton. */
.compte-offre__alt {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--gap-xs);
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--taille-petit);
  line-height: 1.5;
  color: var(--texte-doux);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.compte-offre__alt:hover {
  color: var(--nuit);
}

/* La mention discrète du bas de carte (droit à l'effacement). Elle vient APRÈS
   l'action, et le `margin-top: auto` du bouton la pousse donc en pied de carte. */
.compte-carte__mention {
  margin-top: var(--gap-s);
  font-size: var(--taille-petit);
  line-height: 1.5;
  color: var(--texte-clair);
}

/* --- Actions de bas de page ------------------------------------------------ */

.compte-actions-bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  margin-top: var(--gap-m);
}

.compte-actions-bas__message {
  flex: 1 1 100%;
  color: var(--texte-doux);
  line-height: 1.6;
}

/* --- Squelette de chargement -----------------------------------------------
   Un squelette plutôt qu'un tourniquet : il montre la FORME de ce qui arrive,
   donc la page ne saute pas quand les données se posent. */

.squelette {
  display: block;
  border-radius: var(--rayon-s);
  background: var(--creme-ombre);
  animation: squelette-respire 1.6s ease-in-out infinite;
}

.squelette--etiquette {
  width: 96px;
  height: 12px;
  margin-bottom: var(--gap-s);
}

.squelette--chiffre {
  width: 62%;
  height: 26px;
  margin-bottom: var(--gap-s);
}

.squelette--ligne {
  width: 100%;
  height: 14px;
  margin-bottom: 12px;
}

@keyframes squelette-respire {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .squelette {
    animation: none;
    opacity: 0.85;
  }
}

/* --- /commencer/ : inscription → cercle → code ----------------------------- */

/* L'indicateur d'étape. Petit et factuel : le client sait où il en est sans
   qu'on lui dessine une frise. */
.espace-etape {
  font-size: var(--taille-mini);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--corail-texte);
}

.reussite-suite {
  margin-top: var(--gap-m);
}

.reussite-suite__titre {
  font-family: var(--police-display);
  font-size: var(--taille-h4);
  font-weight: 500;
  color: var(--nuit);
}

/* Le code reçoit le focus à l'affichage (annonce lecteur d'écran) : pas
   d'anneau — ce n'est pas un élément interactif, juste une cible d'annonce. */
.compte-code__valeur:focus {
  outline: none;
}

/* L'adresse du compte connecté, sous le titre de /mon-compte/. Discrète : c'est
   un repère, pas une information à lire — mais elle doit rester au contraste AA
   (--texte-doux, 6,42:1 sur crème). */
.compte-entete__email {
  margin-top: 4px;
  font-size: var(--taille-corps);
  color: var(--texte-doux);
  overflow-wrap: anywhere;
}