/* La fenêtre Mon compte, ses trois façons de se connecter et le mot de passe (src/compte.js,
   src/compte-mdp.js). Direction « Instrument » : jetons --i-* de src/instrument.css, aucune couleur
   d'accent, contrôles de 34 px arrondis à 8, segment à 2 px de jeu. */

/* Les trois façons : un segment sur toute la largeur */
.compte-facons { display: grid; grid-template-columns: repeat(3, 1fr); margin: 2px 0 0; }
html[data-theme] .page-app .compte-facons > button { padding: 0 6px; font-size: var(--t-13); }
.compte-panneau { display: flex; flex-direction: column; gap: 10px; }
.compte-panneau[hidden], .compte-cgu[hidden] { display: none; }
.compte-panneau form { display: flex; flex-direction: column; gap: 10px; }
.compte-panneau .compte-note { margin: 0; }

/* Les champs : le gabarit des autres (34 px, 36 au téléphone), mot de passe compris */
html[data-theme] .page-app .compte-fenetre input[type="password"],
html[data-theme] .page-app .compte-mdp-saisie input {
  width: 100%; height: var(--i-bouton); padding: 0 10px; border: 0; border-radius: var(--r-bouton); background-color: var(--i-seg); box-shadow: var(--i-filet); color: var(--i-encre); font-family: inherit; font-size: var(--t-13);
}
html[data-theme] .page-app .compte-fenetre .pg-champ input[type="email"] { width: 100%; padding: 0 10px; }
html[data-theme] .page-app .compte-mdp-saisie input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--i-encre-2); }
@media (max-width: 899px) { html[data-theme] .page-app .compte-mdp-saisie input { font-size: 1rem; } }
html[data-theme] .page-app .compte-fenetre .pg-champ { gap: 5px; color: var(--i-lib); font-size: var(--t-12); }

/* « Afficher » posé dans le champ, à droite */
.compte-mdp-saisie { position: relative; display: block; }
html[data-theme] .page-app .compte-mdp-saisie input { padding-right: 76px; }
.compte-oeil { position: absolute; top: 3px; right: 3px; bottom: 3px; min-width: 64px; padding: 0 8px; border: 0; border-radius: var(--r-pastille); background: none; color: var(--i-encre-2, var(--encre-2)); font: inherit; font-size: var(--t-12); font-weight: 500; cursor: pointer; }
.compte-oeil:hover { background: var(--i-survol, var(--survol)); color: var(--i-encre, var(--encre)); }
.compte-oeil:focus-visible { outline: 2px solid var(--i-anneau, var(--filet-2)); outline-offset: 0; }

/* La robustesse : quatre traits gris qui se remplissent d'encre, et un mot */
.compte-force { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; color: var(--i-lib, var(--encre-3)); font-size: var(--t-12); }
.compte-force-barres { display: grid; grid-template-columns: repeat(4, 22px); gap: 3px; }
.compte-force-barres i { height: 3px; border-radius: var(--r-fin); background: var(--i-piste, var(--filet-2)); }
.compte-force[data-niveau="1"] i:nth-child(-n+1),
.compte-force[data-niveau="2"] i:nth-child(-n+2),
.compte-force[data-niveau="3"] i:nth-child(-n+3),
.compte-force[data-niveau="4"] i { background: var(--i-encre, var(--encre)); }
.compte-force[data-niveau="1"] i:nth-child(-n+1) { opacity: 0.55; }
.compte-force[data-niveau="2"] i:nth-child(-n+2) { opacity: 0.75; }

/* Les liens d'action (se connecter, mot de passe oublié, créer un compte) : du texte, pas des boutons */
.compte-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--i-lib, var(--encre-3)); font-size: var(--t-13); }
.compte-lien { padding: 2px 0; border: 0; background: none; color: var(--i-encre, var(--encre)); font: inherit; font-size: var(--t-13); font-weight: 500; text-decoration: underline; text-decoration-color: var(--i-piste, var(--filet-2)); text-underline-offset: 3px; cursor: pointer; }
.compte-lien:hover { text-decoration-color: currentColor; }
.compte-lien:disabled { opacity: 0.55; cursor: default; }
.compte-etat .compte-lien { font-size: var(--t-13); }
html[data-theme] .page-app .compte-fenetre .bouton-primaire:disabled { opacity: 0.55; cursor: default; }
html[data-theme] .page-app .compte-fenetre .compte-google { width: 100%; }
html[data-theme] .page-app .compte-fenetre .compte-note { color: var(--i-lib); font-size: var(--t-12); line-height: 1.45; }
html[data-theme] .page-app .compte-fenetre .compte-etat { color: var(--i-encre-2); }
html[data-theme] .page-app .compte-fenetre .compte-cgu { background: var(--i-seg); color: var(--i-encre-2); }
html[data-theme] .page-app .compte-fenetre .compte-alerte { box-shadow: inset 0 0 0 1px var(--i-encre-2); }

/* La fenêtre tient dans un téléphone : elle défile plutôt que de déborder */
.compte-fenetre { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 480px) { .compte-fond { align-items: start; padding-top: max(16px, env(safe-area-inset-top)); } .compte-fenetre { padding: 22px 16px 16px; gap: 10px; } }

/* Le rappel dans le menu du compte, tant que l'adresse n'est pas confirmée */
.compte-bandeau { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 4px 6px; padding: 9px 10px; border-radius: var(--r-bouton); background: var(--i-seg, var(--survol)); font-size: var(--t-13); line-height: 1.4; color: var(--i-encre-2, var(--encre-2)); }
.compte-bandeau p { margin: 0; }
.compte-bandeau b { color: var(--i-encre, var(--encre)); font-weight: 600; }
/* et sur le bouton du compte, le point plein devient un anneau */
html[data-theme] .page-app .commande-connecte.compte-a-confirmer::after { background: transparent; box-shadow: inset 0 0 0 1.5px var(--i-encre); }

/* La carte réservée aux comptes (src/carte-porte.js) : le voile, et une fenêtre de compte qui ne se referme pas */
.cp-voile { position: fixed; inset: 0; z-index: 900; background: var(--fond, #0e0e0e); }
.cp-fermee .compte-fond { z-index: 901; }
.cp-fermee .compte-fermer { display: none; }