/* [hors-planning 2026-10-05 · HP-EPE-DESIGN] Refonte EPE — styles propres à la famille « compte », en complément des feuilles des maquettes (styles/refonte/epe-*.css). Les couleurs de lien portent !important : la feuille compilée d'Encore impose a{color:…!important}. */

/* Erreur de champ, sous le champ (G2/G3) : texte en français, contraste AA sur fond blanc (#b3261e = 6,5:1). */
.account-panel .field-error,
.account-panel .captcha-erreur,
.account-panel .form-errors p {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #b3261e;
}
.account-panel .captcha-erreur[hidden] { display: none; }
.account-panel .field input[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 1px #b3261e;
}
.account-panel > .field-error.form-message-erreur,
.account-panel .form-message.form-message-erreur {
  background: #fdecea;
  border: 1px solid #e0a8a3;
  border-radius: 9px;
  padding: 13px 15px;
  margin: 0 0 20px;
  color: #8a1c15;
}

/* Messages d'état (flashes) : même bloc que .form-message des maquettes, en tête du panneau. */
.account-panel .form-message { margin: 0 0 20px; }
.account-panel .form-message.flash-success { background: #e9f5ee; border-color: #9ccbb0; color: #1d5a3a; }
.account-panel .form-message.flash-warning { background: #fff6e9; border-color: #e8d3ae; color: #654715; }
.account-panel .verification-banner { background: #fff6e9; border-color: #e8d3ae; color: #654715; }
.account-panel .verification-banner p { margin: 0 0 8px; }
.account-panel .verification-banner p:last-child { margin-bottom: 0; }
.account-panel .verification-banner strong { overflow-wrap: anywhere; }

/* Une saisie et son libellé : libellé au-dessus, pleine largeur ; la case de la maquette garde sa ligne. */
.account-panel .field label { display: block; margin-bottom: 6px; font-weight: 600; }
.account-panel .field input:not([type="checkbox"]) { width: 100%; }
.account-panel .field-help { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.account-panel .form-links { margin: 0 0 18px; }
.account-panel .form-actions .secondary-button { flex: 1; }

/* Les règles du mot de passe : l'état « ok » est posé par compte-formulaires.js ; sans script, la liste reste lisible. */
.password-rules [data-rule-state="ko"]:before { content: '✗ '; color: #8a1c15; font-weight: 600; }

/* Le contrôle anti-robot garde sa largeur propre et ne déborde pas à 360 px. */
.account-panel .captcha-field { max-width: 100%; overflow-x: auto; margin: 6px 0 4px; }

/* [ABC-4-8] Composant d'adresse : liste de propositions (combobox ARIA) posée sous le champ de recherche, même style que la
   liste de commune (G3). Le module est assets/importmap/adresse-ban.js. */
.adresse-ban { grid-column: 1 / -1; position: relative; }
.adresse-ban .adresse-recherche { position: relative; }
.adresse-ban .adresse-liste { list-style: none; margin: 4px 0 0; padding: 4px 0; position: absolute; z-index: 20; left: 0; right: 0; background: #fff; border: 1px solid var(--line, #c9d6e3); border-radius: 8px; box-shadow: 0 6px 18px rgba(8, 31, 59, .12); max-height: 280px; overflow-y: auto; }
.adresse-ban .adresse-liste[hidden], [data-ban-bloc][hidden] { display: none !important; }
.adresse-ban .adresse-liste [role="option"] { padding: 8px 12px; cursor: pointer; font-size: 15px; }
.adresse-ban .adresse-liste [role="option"]:hover, .adresse-ban .adresse-liste [role="option"][aria-selected="true"] { background: var(--pale, #eaf1f8); }
.adresse-ban .fields-grid { margin-top: 4px; }
/* [ABC-4-24 G3] Liste des communes (code postal OU nom) : largeur selon le texte, jamais moins que le champ, plafonnée à 28 rem. */
.adresse-ban .commune-liste { list-style: none; margin: 4px 0 0; padding: 4px 0; position: absolute; z-index: 20; top: 100%; left: 0; min-width: 100%; width: max-content; max-width: min(28rem, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line, #c9d6e3); border-radius: 8px; box-shadow: 0 6px 18px rgba(8, 31, 59, .12); max-height: 280px; overflow-y: auto; }
.adresse-ban .commune-liste[hidden] { display: none !important; }
.adresse-ban .commune-liste [role="option"] { display: flex; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 15px; overflow-wrap: anywhere; }
.adresse-ban .commune-liste [role="option"]:hover, .adresse-ban .commune-liste [role="option"][aria-selected="true"] { background: var(--pale, #eaf1f8); }
.adresse-ban .commune-liste__cp { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }

/* Ancienne largeur des formulaires de réinitialisation et du profil connecté : panneau seul, centré. */
.account-single { max-width: 720px; margin: 0 auto; }

/* Espace connecté (menu latéral, tableau de bord, mes évaluations). */
.compte-menu { padding: 18px; position: sticky; top: 130px; }
.compte-menu ul, .compte-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.compte-menu .button, .compte-menu .secondary-button, .compte-actions .button, .compte-actions .secondary-button { width: 100%; text-align: center; }
.compte-actions { max-width: 420px; margin: 0 auto; }
#main.panel .categorie-form { max-width: 420px; margin-bottom: 20px; }
#evaluations thead th { vertical-align: middle; }
#main.panel { min-width: 0; }
@media (max-width: 900px) {
  .compte-menu { position: static; }
}

/* [hors-planning ABC-4-7 2026-10-05] Lot 2 (E18) : photo de profil, ronde, carrée à l'origine (aucun style en ligne). */
img.photo-profil { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; display: block; margin: 0 0 1rem; }

/* [BC-4-149 2026-10-13] « Mon profil » : section photo compacte sous « Mes informations » — vignette 80 px à gauche, actions à droite (aucune action retirée). */
main.espace-personnel .photo-profil-compacte{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:start;padding:20px}
main.espace-personnel .photo-profil-compacte>h2{grid-column:1/-1;margin-bottom:12px;font-size:1.1rem}
main.espace-personnel .photo-profil-compacte img.photo-profil{width:80px;height:80px;margin:0}
main.espace-personnel .photo-profil-compacte>p{grid-column:1/-1;margin:0 0 12px}
main.espace-personnel .photo-profil-compacte>form{grid-column:2}
main.espace-personnel .photo-profil-compacte>form+form{margin-top:10px}
@media (max-width:600px){main.espace-personnel .photo-profil-compacte{grid-template-columns:minmax(0,1fr)}main.espace-personnel .photo-profil-compacte>form{grid-column:1}}

/* [ABC-4-152 2026-10-13] Page du second facteur : carte compacte, centrée, champ de code en avant, actions secondaires discrètes. */
[data-page-connexion] .carte-2fa{max-width:440px;margin:0 auto;padding:24px}
[data-page-connexion] .carte-2fa h1{font-size:26px;margin:0 0 8px}
[data-page-connexion] .carte-2fa-intro{margin:0 0 16px;color:var(--muted);font-size:16px}
[data-page-connexion] .carte-2fa .field{margin-bottom:12px}
[data-page-connexion] .carte-2fa .champ-code{font-size:26px;letter-spacing:.35em;text-align:center;height:56px}
[data-page-connexion] .carte-2fa .field>label.carte-2fa-confiance{font-size:14px;font-weight:400;display:flex;gap:8px;align-items:center;margin:0}
[data-page-connexion] .carte-2fa-confiance input{width:18px;height:18px;flex:0 0 18px;margin:0;padding:0}
[data-page-connexion] .carte-2fa .button{width:100%}
[data-page-connexion] .carte-2fa-qr{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
[data-page-connexion] .carte-2fa-qr h2{font-size:16px;margin:0 0 10px}
[data-page-connexion] .carte-2fa-qr [data-qr-image]{width:150px;margin:0 auto}
[data-page-connexion] .carte-2fa-qr [data-qr-image] svg{width:100%;height:auto;display:block}
[data-page-connexion] .carte-2fa-qr [data-qr-statut]{font-size:13px;color:var(--muted);margin:8px 0 0}
[data-page-connexion] .carte-2fa-actions{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
[data-page-connexion] .carte-2fa-actions form{margin:0}
[data-page-connexion] .lien-bouton{background:none;border:0;padding:4px;color:var(--blue);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer}
[data-page-connexion] .carte-2fa-recuperation{width:100%;text-align:center}
[data-page-connexion] .carte-2fa-recuperation summary{cursor:pointer;color:var(--blue);text-decoration:underline}
[data-page-connexion] .carte-2fa-recuperation form{margin-top:10px;text-align:left}
@media (max-width:650px){[data-page-connexion] .carte-2fa{padding:18px 16px}[data-page-connexion] .carte-2fa h1{font-size:23px}}
/* [ABC-4-161] « Renvoyer le code » : vrai bouton visible sous le formulaire de saisie, plus un lien discret. */
[data-page-connexion] .carte-2fa-renvoi{margin:12px 0 0}
[data-page-connexion] .carte-2fa-renvoi .secondary-button{width:100%}
[data-page-connexion] .carte-2fa-qr + form{margin-top:16px}