/* ============================================================================
   Primitives partagées par les pages connectées (connexion, inscription, espace).
   ----------------------------------------------------------------------------
   Ces pages utilisent des classes que la vitrine n'avait pas besoin de définir :
   formulaires, messages d'erreur, indicateur de chargement. Tout s'appuie sur les
   variables de style.css, qui reste la seule source de vérité des couleurs — changer
   la palette du site répercutera ici.

   Charger dans cet ordre : style.css, puis ce fichier.
   ========================================================================== */

/* ── Utilitaires ───────────────────────────────────────────────────────── */

.cache { display: none !important; }
.contenu { position: relative; z-index: 1; }

.chargement {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tourne .7s linear infinite;
    vertical-align: -2px;
}
@keyframes tourne { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .chargement { animation-duration: 1.6s; }
}

/* ── Boutons complémentaires ───────────────────────────────────────────── */
/* .btn, .btn-primary et .btn-outline viennent de style.css. On n'ajoute ici que
   les variantes propres aux formulaires — et l'alias francisé, pour ne pas avoir
   à réécrire chaque page. */

.btn-primaire {
    background: linear-gradient(135deg, var(--accent-pink), var(--secondary));
    color: #fff;
    border: none;
}
.btn-primaire:hover { opacity: .92; text-decoration: none; }

.btn-secondaire {
    background: transparent;
    color: var(--on-bg);
    border: 1.5px solid var(--outline);
}
.btn-secondaire:hover { border-color: var(--secondary); text-decoration: none; }

.btn-bloc  { width: 100%; }
.btn-large { padding: 15px 32px; font-size: 1rem; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Pages d'authentification ──────────────────────────────────────────── */

.page-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
}

.carte-auth {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 22px;
    padding: 40px 36px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.carte-auth h1 { font-size: 1.65rem; margin: 0 0 8px; letter-spacing: -.02em; }
.carte-auth .sous-titre { color: var(--muted); margin-bottom: 28px; font-size: .95rem; }

/* Marque : pastille + nom. Définie hors de tout conteneur, car elle sert aussi bien
   dans la carte d'authentification que dans la barre latérale du tableau de bord.
   Sans cette règle générale, le nom passait à la ligne sous la pastille. */
.marque {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--on-bg);
    text-decoration: none;
    white-space: nowrap;
}
.marque:hover { text-decoration: none; }

.carte-auth .marque { margin-bottom: 24px; }
.carte-auth .marque:hover { text-decoration: none; }
.marque-logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-pink), var(--secondary));
    display: grid;
    place-items: center;
    font-size: .95rem;
}

/* ── Champs de formulaire ──────────────────────────────────────────────── */

.champ { margin-bottom: 16px; }
.champ label {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--muted);
}
.champ input,
.champ select,
.champ textarea {
    width: 100%;
    padding: 13px 15px;
    background: var(--bg);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    color: var(--on-surface);
    font-size: .97rem;
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .18);
}
.champ input::placeholder { color: #7A7196; }

.ligne-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Messages ──────────────────────────────────────────────────────────── */
/* Masqué par défaut : la classe « visible » est ajoutée par le script. Sans cette
   règle, un bloc vide occuperait de la place en permanence. */

.message {
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    font-size: .89rem;
    margin-bottom: 16px;
    display: none;
}
.message.visible { display: block; }
.message.erreur { background: rgba(248, 113, 113, .13); border: 1px solid rgba(248, 113, 113, .34); color: #FCA5A5; }
.message.succes { background: rgba(34, 197, 94, .12);   border: 1px solid rgba(34, 197, 94, .3);   color: #86EFAC; }
.message.info   { background: rgba(139, 92, 246, .12);  border: 1px solid rgba(139, 92, 246, .3);  color: var(--secondary); }

/* ── Bas de carte ──────────────────────────────────────────────────────── */

.lien-bas {
    text-align: center;
    margin-top: 20px;
    font-size: .9rem;
    color: var(--muted);
}
.lien-bas a { color: var(--secondary); font-weight: 600; }

.separateur {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0; color: #7A7196; font-size: .84rem;
}
.separateur::before, .separateur::after {
    content: ""; flex: 1; height: 1px; background: var(--outline);
}

@media (max-width: 480px) {
    .carte-auth { padding: 30px 22px; }
    .ligne-champs { grid-template-columns: 1fr; }
}