/* ---------------------------------------------------------------------------
   Espace membre : tableau de bord, formulaires de connexion et d'inscription.

   Repris des <style> de inscrits/profile.php et inscrits/login.php, qui étaient
   produits par des chaînes PHP et réémis dans le HTML à chaque visite.
   --------------------------------------------------------------------------- */

.compte { width:100%; max-width:var(--largeur-max); margin-inline:auto; padding:var(--e-8) var(--e-5) var(--e-10); }

.compte-entete { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
                 gap:var(--e-4); margin-bottom:var(--e-6); }
.compte-entete h1 { margin:0 0 var(--e-2); font-size:var(--t-2xl); }
.compte-entete .sous { margin:0; color:var(--texte-doux); font-size:var(--t-sm); }

.compte-grille { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--e-5); align-items:start; }
@media (max-width:900px){ .compte-grille { grid-template-columns:1fr; } }

.bloc { padding:var(--e-5); background:var(--fond-1); border:1px solid var(--bord);
        border-radius:var(--r-md); margin-bottom:var(--e-5); }
.bloc h2 { margin:0 0 var(--e-4); font-size:var(--t-lg); }

.ligne { display:flex; justify-content:space-between; gap:var(--e-4); padding:var(--e-3) 0;
         border-bottom:1px solid var(--bord); font-size:var(--t-sm); }
.ligne:last-child { border-bottom:none; }
.ligne dt { margin:0; color:var(--texte-doux); }
.ligne dd { margin:0; text-align:right; font-weight:500; }

.etiquette { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-plein);
             font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.etiquette--actif   { background:rgba(143,227,172,.14); color:#8FE3AC; border:1px solid rgba(143,227,172,.35); }
.etiquette--inactif { background:var(--fond-2); color:var(--texte-faible); border:1px solid var(--bord); }

.avis { display:flex; gap:var(--e-3); padding:var(--e-4); border-radius:var(--r-md);
        margin-bottom:var(--e-5); font-size:var(--t-sm); line-height:1.5; }
.avis--attention { background:var(--or-voile); border:1px solid rgba(224,163,60,.35); color:var(--texte); }
.avis--info      { background:var(--rose-voile); border:1px solid rgba(232,51,109,.35); color:var(--texte); }

.compte-videos { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--e-4); }
.compte-video { display:block; border:1px solid var(--bord); border-radius:var(--r-md); overflow:hidden;
                background:var(--fond-2); transition:border-color var(--transition), transform var(--transition); }
.compte-video:hover { border-color:var(--bord-fort); transform:translateY(-3px); }
.compte-video img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.compte-video img.miniature-absente { object-fit:contain; padding:var(--e-5); opacity:.35;
                                      background:var(--fond-3); }
.compte-video .titre { padding:var(--e-3); font-size:var(--t-sm); font-weight:500; color:var(--texte); }

.compte-vide { padding:var(--e-6) 0; color:var(--texte-faible); font-size:var(--t-sm); text-align:center; }

.factures { list-style:none; margin:0; padding:0; }
.factures li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-3);
               padding:var(--e-3) 0; border-bottom:1px solid var(--bord); font-size:var(--t-sm); }
.factures li:last-child { border-bottom:none; }
.factures .montant { font-variant-numeric:tabular-nums; font-weight:600; }

.bouton { display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
          padding:var(--e-3) var(--e-5); min-height:44px; border-radius:var(--r-plein);
          font-size:var(--t-sm); font-weight:600; border:1px solid transparent; cursor:pointer; }
.bouton--principal { background:var(--rose); color:#fff; }
.bouton--principal:hover { background:var(--rose-clair); color:#fff; }
.bouton--neutre { border-color:var(--bord-fort); color:var(--texte); }
.bouton--neutre:hover { background:var(--fond-2); }
.bouton--pleine { width:100%; }
.lien-discret { display:inline-block; margin-top:var(--e-3); color:var(--texte-faible); font-size:var(--t-xs); }
.lien-discret:hover { color:var(--rose-clair); }

/* .register-container > .formulaire > .form-container > .form-section : c'est
   toute la structure réellement posée par connexion.ejs/inscription.ejs.

   L'ancien CSS ci-dessous visait une tout autre maquette — deux colonnes avec
   une carte d'offre (.offre, .promo-group, jamais utilisées par aucun
   gabarit actuel) et un slider à onglets connexion/inscription
   (.form-header, .forms-wrapper, .form-section2, tout aussi inutilisés). Deux
   règles `.form-container` strictement identiques se succédaient même, la
   seconde imposant une largeur fixe de 620px. Sur mobile, le
   `@media (max-width:768px)` tentait de rattraper ce slider inexistant à
   coups de `!important`, sans jamais résoudre le vrai problème : aucune règle
   ne bornait la taille du texte, d'où le titre « Me connecter » coupé mot par
   mot et les champs qui débordaient.

   Une seule carte centrée, avec les jetons du design system utilisés partout
   ailleurs sur le site (voir .bloc plus haut) : elle se redimensionne
   naturellement, aucun média query dédié au mobile n'est nécessaire. */
.register-container {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e-8) var(--e-5) var(--e-12);
  display: flex;
  justify-content: center;
}

.formulaire {
  width: 100%;
  max-width: 440px;
}

.form-container {
  width: 100%;
  padding: var(--e-6) var(--e-5);
  background: var(--fond-1);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  box-sizing: border-box;
  color: var(--texte);
}

.form-section h2 {
  margin: 0 0 var(--e-2);
  font-size: clamp(var(--t-xl), 6vw, var(--t-2xl));
  text-align: center;
}

.form-section p {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--texte-doux);
  margin: 0 0 var(--e-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.form-group label {
  font-size: var(--t-sm);
  color: var(--texte-doux);
}

.form-group input {
  width: 100%;
  min-height: 44px;
  padding: var(--e-3);
  border-radius: var(--r-md);
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte);
  font: inherit;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: var(--rose-clair);
  background: var(--fond-3);
}

.form-section button[type="submit"] {
  width: 100%;
  min-height: 44px;
  padding: var(--e-3) var(--e-5);
  border: none;
  border-radius: var(--r-plein);
  background: var(--rose);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-sm);
  cursor: pointer;
  margin-top: var(--e-2);
}
.form-section button[type="submit"]:hover { background: var(--rose-clair); }

.form-section hr {
  border: none;
  border-top: 1px solid var(--bord);
  margin: var(--e-5) 0;
}

/* ---------------------------------------------------------------------------
   Ajouts du portage.
   --------------------------------------------------------------------------- */

/* Le bouton « afficher le mot de passe » était un <span> positionné par un
   style en ligne différent dans chaque formulaire — d'où un œil décalé selon la
   page. C'est désormais un vrai <button>, donc accessible au clavier. */
.champ-secret { position: relative; }

.champ-secret .bascule-secret {
  position: absolute;
  right: 10px;
  bottom: 8px;
  background: none;
  border: none;
  padding: 4px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  width: auto;
  min-height: 0;
}

.form-intro,
.form-aide,
.bloc-intro,
.bloc-mention {
  color: var(--texte-doux, #aaa);
  font-size: 0.9rem;
}

.form-liens { text-align: center; }
.form-liens a { color: #ff69b4; }

.facture-date { color: var(--texte-faible, #888); font-size: 0.8rem; }
.bouton--petit { min-height: 36px; padding: 8px 14px; }
.coupable { word-break: break-all; }

/* Miniature manquante : un aplat discret vaut mieux que l'icône cassée du
   navigateur. */
.miniature-absente {
  background: linear-gradient(135deg, #241d21, #150f12);
  object-fit: cover;
}

/* Page centrée : inscription confirmée, résiliation. */
.message-central {
  max-width: 620px;
  margin: 60px auto;
  padding: 40px;
  background: #1b1b1b;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 25px rgba(230, 0, 115, 0.25);
}

.message-central h1 { color: #e60073; margin-bottom: 20px; }
.message-central p { line-height: 1.5; margin-bottom: 20px; }
.message-central-aide { color: var(--texte-faible, #888); font-size: 0.9rem; }

.errors  { background: #900; padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; }
.success { background: #0a7a3a; padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; }
.errors ul { margin: 0; padding-left: 20px; }

/* Libellé réservé aux lecteurs d'écran. */
.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;
}