/*
 * Pages de compte (inscription, connexion) — Inkwell
 * Même vocabulaire visuel que l'accueil : fond beige, tuiles décoratives,
 * carte blanche avec ombre, cohérent avec le hero et la section communauté
 */

.section-compte {
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    display: flex;
    align-items: center;
    padding: 72px 0;
}

.section-compte__entete {
    text-align: center;
    max-width: 460px;
    margin: 0 auto 36px;
}

.section-compte__badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: var(--couleur-corail);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(255, 103, 106, 0.35);
}

.section-compte__titre {
    font-family: var(--police-titres);
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--couleur-anthracite);
    margin-bottom: 10px;
    line-height: 1.15;
}

.section-compte__sous-titre {
    font-size: 0.98rem;
    color: rgba(38, 53, 60, 0.65);
}

/* ==========================================================================
   CARTE FORMULAIRE
   ========================================================================== */

.conteneur--etroit {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.carte-compte {
    background-color: #ffffff;
    border-radius: var(--rayon-carte);
    box-shadow: 0 20px 50px rgba(38, 53, 60, 0.12);
    padding: 44px 40px;
}

.formulaire-compte {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.formulaire-compte__groupe-titre {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(38, 53, 60, 0.45);
    margin: 8px 0 -4px;
}

.formulaire-compte__groupe-titre:first-child {
    margin-top: 0;
}

.formulaire-compte__groupe-titre i {
    color: var(--couleur-corail);
    font-size: 0.85rem;
}

.formulaire-compte__groupe-titre::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: rgba(38, 53, 60, 0.08);
}

.formulaire-compte__ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.champ-groupe {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.champ-groupe label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--couleur-anthracite);
}

.champ-avec-icone {
    position: relative;
}

.champ-avec-icone i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: rgba(38, 53, 60, 0.35);
    font-size: 0.9rem;
    pointer-events: none;
}

.champ-avec-icone input {
    padding-left: 42px !important;
}

.champ-groupe input[type="text"],
.champ-groupe input[type="email"],
.champ-groupe input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(38, 53, 60, 0.15);
    border-radius: var(--rayon-bouton);
    font-size: 0.95rem;
    font-family: var(--police-corps);
    color: var(--couleur-anthracite);
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* CORRECTIF — cette règle a exactement la même spécificité que
   "[data-theme="sombre"] .champ-groupe input" dans theme.css, donc en cas
   d'égalité c'est l'ORDRE DE CHARGEMENT des fichiers qui décide. Si compte.css
   est chargé après theme.css (cas de la page d'écriture), le fond blanc
   l'emportait même en mode sombre. Déclarée ici avec la même spécificité,
   cette règle gagne toujours car elle vient après dans CE fichier. */
[data-theme="sombre"] .champ-groupe input[type="text"],
[data-theme="sombre"] .champ-groupe input[type="email"],
[data-theme="sombre"] .champ-groupe input[type="password"] {
    background-color: #1c2126;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f0ebe6;
}

.champ-groupe input:focus {
    outline: none;
    border-color: var(--couleur-corail);
    box-shadow: 0 0 0 3px rgba(255, 103, 106, 0.15);
}

.champ-groupe__aide {
    font-size: 0.76rem;
    color: rgba(38, 53, 60, 0.5);
}

.champ-mot-de-passe {
    position: relative;
}

.champ-mot-de-passe input {
    width: 100%;
    padding-left: 42px !important;
    padding-right: 44px !important;
}

.champ-mot-de-passe i.fa-lock {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: rgba(38, 53, 60, 0.35);
    font-size: 0.9rem;
    pointer-events: none;
}

.champ-mot-de-passe__bascule {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: rgba(38, 53, 60, 0.45);
    font-size: 0.95rem;
}

.champ-mot-de-passe__bascule:hover {
    color: var(--couleur-anthracite);
}

.formulaire-compte__submit {
    width: 100%;
    margin-top: 10px;
    padding: 15px 28px;
    font-size: 1rem;
}

.carte-compte__pied {
    text-align: center;
    margin-top: 26px;
    font-size: 0.88rem;
    color: rgba(38, 53, 60, 0.65);
}

.carte-compte__pied a {
    color: var(--couleur-corail);
    font-weight: 600;
}

/* ==========================================================================
   ANIMATIONS — entrée en cascade des champs à l'ouverture de la page
   ========================================================================== */

.formulaire-compte > * {
    animation: formulaire-compte-apparition 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.formulaire-compte > *:nth-child(1) { animation-delay: 0.05s; }
.formulaire-compte > *:nth-child(2) { animation-delay: 0.09s; }
.formulaire-compte > *:nth-child(3) { animation-delay: 0.13s; }
.formulaire-compte > *:nth-child(4) { animation-delay: 0.17s; }
.formulaire-compte > *:nth-child(5) { animation-delay: 0.21s; }
.formulaire-compte > *:nth-child(6) { animation-delay: 0.25s; }
.formulaire-compte > *:nth-child(7) { animation-delay: 0.29s; }
.formulaire-compte > *:nth-child(8) { animation-delay: 0.33s; }
.formulaire-compte > *:nth-child(9) { animation-delay: 0.37s; }
.formulaire-compte > *:nth-child(10) { animation-delay: 0.41s; }

@keyframes formulaire-compte-apparition {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carte-compte {
    animation: carte-compte-apparition 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes carte-compte-apparition {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Micro-interaction au focus --- */

.champ-groupe:focus-within label {
    color: var(--couleur-corail);
    transition: color 0.15s ease;
}

.champ-avec-icone:focus-within i,
.champ-mot-de-passe:focus-within i.fa-lock {
    color: var(--couleur-corail);
    transition: color 0.15s ease;
}

/* --- Icône de validation (ajoutée en JS via classe champ--valide) --- */

.champ-avec-icone {
    position: relative;
}

.champ-avec-icone__validation {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%) scale(0);
    color: var(--couleur-vert-emeraude);
    font-size: 0.9rem;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    pointer-events: none;
}

.champ-avec-icone--valide .champ-avec-icone__validation {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

.champ-avec-icone--valide input {
    padding-right: 40px;
    border-color: rgba(1, 144, 124, 0.35);
}

/* ==========================================================================
   ANIMATIONS COMPLÉMENTAIRES — dosées, pour donner un peu de vie sans distraire
   ========================================================================== */

/* Flottement très subtil des tuiles décoratives (mouvement de fond, jamais au premier plan) */
.section-compte .hero__decor .tuile {
    animation: tuile-flottement 6s ease-in-out infinite;
}

.section-compte .hero__decor--gauche .tuile:nth-child(odd) { animation-delay: 0s; }
.section-compte .hero__decor--gauche .tuile:nth-child(even) { animation-delay: 1.5s; }
.section-compte .hero__decor--droite .tuile:nth-child(odd) { animation-delay: 0.8s; }
.section-compte .hero__decor--droite .tuile:nth-child(even) { animation-delay: 2.2s; }

@keyframes tuile-flottement {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Bouton principal : lift + ombre au survol, retour naturel au clic */
.formulaire-compte__submit {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.formulaire-compte__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 103, 106, 0.35);
}

.formulaire-compte__submit:active {
    transform: translateY(0);
}

/* Secousse légère sur un champ invalide au moment où l'utilisateur le quitte */
.champ-groupe--erreur input {
    animation: champ-secousse 0.4s ease;
    border-color: var(--couleur-rouge-vif) !important;
}

@keyframes champ-secousse {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

.lien-mot-de-passe-oublie {
    display:inline-block;
    margin-top:8px;
    font-size:0.82rem;
    font-weight:600;
    color:var(--couleur-corail);
}

.lien-mot-de-passe-oublie:hover {
    text-decoration:underline;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .section-compte {
        padding: 44px 0;
    }

    .section-compte__titre {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .carte-compte {
        padding: 30px 22px;
    }

    .formulaire-compte__ligne {
        grid-template-columns: 1fr;
    }
}