/* ==========================================================
ACCOUNT — mise en page spécifique
Composants génériques (panneaux, champs...) dans css/ai-suite.css.
========================================================== */

/* Sous-titre du topbar — même recette que profile.css (.topbar-title p),
dupliquée ici car account.html ne charge pas profile.css. Remplace
l'ancien bloc .ai-page-header (icône + h1 + p) qui répétait à
l'identique le h1 du topbar juste au-dessus : double en-tête retiré,
un seul titre + une seule ligne de contexte désormais. */
.topbar-title p{

color:var(--text-light);

font-size:var(--fs-meta);

}

.account-info-grid{

display:grid;

grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));

gap:18px;

}

.account-info-grid > div{

display:flex;

flex-direction:column;

gap:4px;

}

.account-info-grid p.ai-field-hint{

grid-column:1 / -1;

margin-top:6px;

}

.account-info-label{

font-size:.76rem;

font-weight:700;

text-transform:uppercase;

letter-spacing:.04em;

color:var(--text-muted);

}

.account-info-grid strong{

font-size:.98rem;

color:var(--text-color);

}

.account-toggle-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:16px;

padding:12px 14px;

border:1px solid var(--border-color);

border-radius:var(--radius-sm);

cursor:pointer;

}

.account-toggle-row strong{

display:block;

font-size:.94rem;

color:var(--text-color);

}

.account-toggle-row .ai-field-hint{

margin-top:2px;

}

.account-toggle-row input[type="checkbox"]{

width:20px;

height:20px;

flex-shrink:0;

accent-color:var(--accent-color);

cursor:pointer;

}

.account-form-error{

margin-top:12px;

padding:11px 14px;

border-radius:var(--radius-sm);

background:rgba(239,68,68,.1);

border:1px solid rgba(239,68,68,.35);

color:var(--danger);

font-size:.84rem;

}

.account-danger-zone{

border-color:rgba(239,68,68,.3);

}

.account-danger-zone .ai-panel-header h2 i,
.account-danger-zone .ai-panel-header h2 svg{

color:var(--danger);

}

.account-danger-btn{

display:inline-flex;

align-items:center;

gap:9px;

padding:12px 22px;

border-radius:var(--radius-md);

/* --danger-600 et non --danger : mesuré, #EF4444 ne tient que 3,76:1
avec du blanc. C'est le bouton qui supprime définitivement un compte —
son libellé doit être le plus lisible de la page, pas le moins.
#DC2626 tient 4,83:1. Même correction que .btn-danger dans base.css. */
background:var(--danger-600);

color:#fff;

font-weight:700;

border:none;

cursor:pointer;

transition:var(--transition);

}

/* Le survol descend d'un cran de plus, l'état au repos ayant pris
--danger-600. */
.account-danger-btn:hover{

background:var(--danger-700);

transform:translateY(-2px);

box-shadow:0 14px 28px rgba(239,68,68,.28);

}

.account-danger-btn:disabled{

opacity:.6;

cursor:not-allowed;

transform:none;

}

.account-danger-btn i,
.account-danger-btn svg{

width:16px;

height:16px;

}

/* ==========================================================
MODALE DE CONFIRMATION FINALE
========================================================== */

.account-modal{

position:fixed;

inset:0;

z-index:10000;

display:flex;

align-items:center;

justify-content:center;

background:rgba(23,19,16,.72);

padding:20px;

}

.account-modal-card{

width:100%;

max-width:420px;

padding:28px;

border-radius:var(--radius-lg);

background:var(--background);

border:1px solid var(--border-color);

box-shadow:var(--shadow-lg);

}

.account-modal-card h2{

font-size:1.1rem;

font-weight:800;

color:var(--text-color);

margin-bottom:10px;

}

.account-modal-card p{

color:var(--text-light);

font-size:.9rem;

line-height:1.55;

margin-bottom:22px;

}

.account-modal-actions{

display:flex;

justify-content:flex-end;

gap:10px;

}

/* ==========================================================
MON ABONNEMENT (2026-09-02) — formule actuelle, quota, demande de
changement en cours (annulable), CTA vers le comparatif.
========================================================== */

.account-sub-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:18px;
margin-bottom:16px;
}

.account-sub-grid strong{
display:block;
font-family:var(--font-display);
font-size:var(--fs-h4);
color:var(--text-color);
margin:2px 0;
}

.account-sub-meta{
display:block;
font-size:var(--fs-caption);
line-height:1.5;
color:var(--text-light);
}

.account-sub-pending{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 16px;
border-radius:var(--radius-sm);
border:1px solid rgba(233,163,25,.35);
background:rgba(233,163,25,.08);
margin-bottom:16px;
}

.account-sub-pending > i,
.account-sub-pending > svg{
width:18px;
height:18px;
flex-shrink:0;
margin-top:2px;
color:var(--amber-700);
}

.account-sub-pending-body strong{
display:block;
font-size:var(--fs-small);
color:var(--text-color);
margin-bottom:4px;
}

.account-sub-pending-body p{
font-size:var(--fs-caption);
line-height:1.5;
color:var(--text-light);
margin:0 0 8px;
}

.account-sub-cancel{
background:none;
border:none;
padding:0;
font-size:var(--fs-caption);
font-weight:700;
color:var(--text-light);
text-decoration:underline;
text-decoration-color:rgba(233,163,25,.45);
text-underline-offset:3px;
cursor:pointer;
}

.account-sub-cancel:hover{color:var(--text-color);}

.account-sub-cancel:disabled{opacity:.6;cursor:default;}

.account-sub-actions{
display:flex;
flex-direction:column;
gap:8px;
align-items:flex-start;
}

.account-sub-actions .ai-field-hint{max-width:560px;}