/*
=========================================================
AP MATHS - V8.0.0 - PAGES COMPTE ÉLÈVE
(connexion, création de compte, profil, données)
Fichier : compte/css/compte.css
À charger après ../css/cahier.css.
=========================================================
*/

body {
    padding: 28px 16px;
}

.compte-page {
    width: min(560px, 100%);
    margin: 0 auto;
}

/* La carte = une feuille avec marge rouge */
.compte-carte {
    position: relative;
    padding: 30px 28px 26px 50px;
    border: 2px solid var(--encre);
    border-radius: 20px;
    background:
        linear-gradient(90deg, transparent 28px, var(--marge) 28px, var(--marge) 30px, transparent 30px),
        var(--feuille);
    box-shadow: var(--ombre-forte);
}

/* Gommette AP qui ramène à l'accueil */
.compte-logo {
    display: inline-grid;
    place-items: center;
    align-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
    border: 2px solid var(--encre);
    border-radius: 14px;
    background: var(--jaune);
    color: var(--encre);
    font-family: var(--police-titre);
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    transform: rotate(-5deg);
    box-shadow: 2px 3px 0 var(--encre);
}

.compte-logo small { font-size: 0.58rem; letter-spacing: 0.04em; }

.compte-sur-titre {
    margin: 0 0 4px;
    font-family: var(--police-main);
    font-weight: 700;
    color: var(--bleu);
}

.compte-carte h1 { font-size: 1.9rem; }
.compte-carte h2 { font-size: 1.2rem; margin-top: 4px; }

.compte-form {
    display: grid;
    gap: 14px;
    margin-top: 6px;
}

.compte-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 800;
}

.compte-form label:has(input[type=checkbox]) {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600;
}

.compte-form input[type=checkbox] {
    width: 20px !important;
    height: 20px;
    margin: 2px 0 0 !important;
    accent-color: var(--bleu);
    flex: 0 0 auto;
}

.compte-bouton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 10px 18px;
    border: 2px solid var(--encre);
    border-radius: 13px;
    font-weight: 900;
    text-decoration: none;
    color: var(--encre);
    background: var(--feuille);
    box-shadow: 2px 3px 0 var(--encre);
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}

.compte-bouton:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--encre); }
.compte-bouton:active { transform: translate(2px, 3px); box-shadow: none; }
.compte-bouton.principal { background: var(--bleu); color: #fff; }
.compte-bouton:disabled { opacity: 0.6; cursor: not-allowed; }

.compte-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.compte-message {
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1.5px solid currentColor;
    border-radius: 11px;
    font-weight: 800;
}

.compte-message.erreur { background: var(--rouge-clair); color: var(--rouge); }
.compte-message.succes { background: var(--vert-clair); color: #0f6a3f; }
.compte-message.info { background: var(--bleu-clair); color: var(--bleu-fonce); }

.compte-note {
    color: var(--crayon);
    font-size: 0.9rem;
    line-height: 1.5;
}

.compte-actions + .compte-note { margin-top: 16px; }

.compte-identite {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 2px dashed var(--trait);
    border-radius: 12px;
    background: var(--gomme);
}

.compte-separateur {
    margin: 24px 0;
    border: 0;
    border-top: 2px dashed var(--trait);
}

.compte-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.compte-liens a { font-weight: 800; }

@media (max-width: 600px) {
    body { padding: 14px 10px; }
    .compte-carte { padding: 22px 16px 20px 34px; }
    .compte-carte {
        background:
            linear-gradient(90deg, transparent 18px, var(--marge) 18px, var(--marge) 20px, transparent 20px),
            var(--feuille);
    }
    .compte-actions { flex-direction: column; }
    .compte-actions .compte-bouton { width: 100%; }
}

/* V8.3.0 — pages de texte (données personnelles, mentions légales) */
.compte-texte h2 {
    margin: 18px 0 4px;
    font-size: 1.05rem;
}
.compte-texte p {
    margin: 0 0 10px;
    line-height: 1.5;
}
.compte-texte .compte-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}