/* ============================================================
   Move&Shine — Auth & Account CSS
   Dépend de : colors_and_type.css (tokens CSS)
   ============================================================ */

/* ── #profil — brume dorée gauche/droite (même motif que #onglet, styles.css) ── */

#profil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#profil::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Étoiles gauche */
    radial-gradient(circle at  3% 12%, rgba(255,255,255,0.90) 0px, rgba(255,255,255,0.90) 1px,   transparent 2px),
    radial-gradient(circle at  7% 28%, rgba(232,203,138,0.95) 0px, rgba(232,203,138,0.95) 1.5px, transparent 2.5px),
    radial-gradient(circle at  2% 45%, rgba(255,255,255,0.85) 0px, rgba(255,255,255,0.85) 1px,   transparent 1.5px),
    radial-gradient(circle at 11% 58%, rgba(232,203,138,0.90) 0px, rgba(232,203,138,0.90) 2px,   transparent 3px),
    radial-gradient(circle at  5% 74%, rgba(255,255,255,0.80) 0px, rgba(255,255,255,0.80) 1px,   transparent 2px),
    radial-gradient(circle at  9% 88%, rgba(232,203,138,0.85) 0px, rgba(232,203,138,0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 14% 38%, rgba(255,255,255,0.75) 0px, rgba(255,255,255,0.75) 1px,   transparent 1.5px),
    radial-gradient(circle at  6% 65%, rgba(232,203,138,0.80) 0px, rgba(232,203,138,0.80) 1px,   transparent 2px),
    /* Étoiles droite */
    radial-gradient(circle at 97% 12%, rgba(255,255,255,0.90) 0px, rgba(255,255,255,0.90) 1px,   transparent 2px),
    radial-gradient(circle at 93% 28%, rgba(232,203,138,0.95) 0px, rgba(232,203,138,0.95) 1.5px, transparent 2.5px),
    radial-gradient(circle at 98% 45%, rgba(255,255,255,0.85) 0px, rgba(255,255,255,0.85) 1px,   transparent 1.5px),
    radial-gradient(circle at 89% 58%, rgba(232,203,138,0.90) 0px, rgba(232,203,138,0.90) 2px,   transparent 3px),
    radial-gradient(circle at 95% 74%, rgba(255,255,255,0.80) 0px, rgba(255,255,255,0.80) 1px,   transparent 2px),
    radial-gradient(circle at 91% 88%, rgba(232,203,138,0.85) 0px, rgba(232,203,138,0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 86% 38%, rgba(255,255,255,0.75) 0px, rgba(255,255,255,0.75) 1px,   transparent 1.5px),
    radial-gradient(circle at 94% 65%, rgba(232,203,138,0.80) 0px, rgba(232,203,138,0.80) 1px,   transparent 2px),
    /* Brume lumineuse gauche */
    radial-gradient(ellipse 55% 100% at 0%   30%, rgba(255,255,255,0.08) 0%, rgba(201,162,74,0.20) 30%, transparent 70%),
    radial-gradient(ellipse 55% 100% at 0%   70%, rgba(255,255,255,0.05) 0%, rgba(212,175,90,0.14) 30%, transparent 65%),
    /* Brume lumineuse droite */
    radial-gradient(ellipse 55% 100% at 100% 30%, rgba(255,255,255,0.08) 0%, rgba(201,162,74,0.20) 30%, transparent 70%),
    radial-gradient(ellipse 55% 100% at 100% 70%, rgba(255,255,255,0.05) 0%, rgba(212,175,90,0.14) 30%, transparent 65%);
}

#profil .e-con,
#profil .e-con-inner {
  background: transparent !important;
  justify-content: center !important;
  align-items: center !important;
}

.ms-account {
  width: 100%;
}

/* ── Login box ────────────────────────────────────────────── */
.ms-auth-box--login {
    max-width: 420px;
}

.ms-auth-box__header {
    text-align: center;
    margin-bottom: var(--sp-7);
}

.ms-auth-box__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--gold-500);
    margin-bottom: var(--sp-4);
}

.ms-auth-box__logo svg {
    width: 52px;
    height: 52px;
}

.ms-auth-box__title {
    margin-bottom: var(--sp-2);
}

.ms-auth-box__sub {
    font-size: 14px;
    color: var(--mute);
    margin: 0;
}

/* Erreur inline (login uniquement) */
.ms-auth-error {
    padding: var(--sp-3) var(--sp-4);
    background: rgba(201,72,58,.1);
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    color: #ff8a7a;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--sp-2);
}

.ms-auth-error__hint {
    font-size: 12px;
    opacity: .8;
}

/* Label + lien "Mot de passe oublié ?" sur la même ligne */
.ms-form-field__labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
}

.ms-form-link {
    font-size: 12px;
    color: var(--mute);
    text-decoration: underline;
    white-space: nowrap;
    transition: color .15s;
}

.ms-form-link:hover {
    color: var(--gold-300);
}

/* Input avec icône et bouton œil */
.ms-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ms-input-wrap input {
    padding-left: calc(var(--sp-4) + 22px) !important;
    padding-right: calc(var(--sp-4) + 32px) !important;
    width: 100%;
    box-sizing: border-box;
}

.ms-input-icon {
    position: absolute;
    left: var(--sp-3);
    width: 16px;
    height: 16px;
    color: var(--mute);
    pointer-events: none;
    flex-shrink: 0;
}

.ms-input-eye {
    position: absolute;
    right: var(--sp-3);
    background: none;
    border: none;
    padding: var(--sp-1);
    cursor: pointer;
    color: var(--mute);
    display: flex;
    align-items: center;
    transition: color .15s;
    border-radius: var(--r-sm);
}

.ms-input-eye:hover {
    color: var(--gold-300);
}

.ms-input-eye svg {
    width: 16px;
    height: 16px;
}

/* Remember me */
.ms-checkbox-remember {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    font-size: 14px;
    color: var(--fg-2);
    user-select: none;
    margin-top: calc(-1 * var(--sp-2));
}

.ms-checkbox-remember input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ms-checkbox-remember__indicator {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--ink);
    transition: border-color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-checkbox-remember__indicator::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid transparent;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: border-color .15s;
}

.ms-checkbox-remember:has(input:checked) .ms-checkbox-remember__indicator {
    border-color: var(--gold-500);
    background: var(--gold-500);
}

.ms-checkbox-remember:has(input:checked) .ms-checkbox-remember__indicator::after {
    border-color: #000;
}

/* Bouton connexion */
.ms-btn--login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    width: 100%;
    margin-top: var(--sp-2);
}

/* ── Auth Box ─────────────────────────────────────────────── */
.ms-auth-box {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-8);
    max-width: 540px;
    margin: var(--sp-8) auto;
}

.ms-auth-box--success {
    border-color: var(--success);
    text-align: center;
}

.ms-auth-box__icon {
    width: 48px;
    height: 48px;
    color: var(--success);
    margin-bottom: var(--sp-4);
}

.ms-auth-box__title {
    color: var(--fg-1);
    margin-bottom: var(--sp-6);
}

.ms-auth-box--success .ms-auth-box__title {
    color: var(--success);
    margin-top: var(--sp-3);
}

/* ── Formulaire ───────────────────────────────────────────── */
.ms-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.ms-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

@media (min-width: 480px) {
    .ms-form-row--half {
        flex-direction: row;
    }
    .ms-form-row--half > * {
        flex: 1;
    }
}

.ms-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* wpautop insère un <br> entre label et input dès qu'ils sont sur deux lignes
   dans le HTML source (non passé par le helper ms_field()) — supprimé au profit
   de la marge de .ms-form-field label ci-dessous. */
.ms-auth-form br {
    display: none;
}

.ms-form-field label {
    margin: 10px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-2);
}

.ms-auth-form input[type="text"],
.ms-auth-form input[type="email"],
.ms-auth-form input[type="password"],
.ms-auth-form input[type="tel"],
.ms-auth-form textarea {
    background: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--paper);
    padding: var(--sp-3) var(--sp-4);
    font-size: 15px;
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
    width: 100%;
    box-sizing: border-box;
}

.ms-auth-form input[type="text"]:focus,
.ms-auth-form input[type="email"]:focus,
.ms-auth-form input[type="password"]:focus,
.ms-auth-form input[type="tel"]:focus,
.ms-auth-form textarea:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(201,162,74,.15);
}

.ms-auth-form input[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.ms-auth-form textarea {
    resize: vertical;
    min-height: 100px;
}

.ms-form-hint {
    font-size: 12px;
    color: var(--mute);
    line-height: 1.4;
}

/* Rapproche le hint du champ au-dessus quand il est enfant direct de .ms-form-field
   (pas la variante imbriquée dans .ms-form-field__body du helper ms_field(), déjà serrée).
   Marge négative sur le hint plutôt que gap du conteneur : évite de resserrer aussi
   l'espacement label→input, qui décalerait les champs sans hint d'une ligne voisine
   (ex. mot de passe / confirmation côte à côte). */
.ms-form-field > .ms-form-hint {
    margin-top: -4px;
}

.ms-form-hint-inline {
    font-size: 12px;
    color: var(--mute);
    font-weight: 400;
}

.ms-form-meta {
    font-size: 13px;
    color: var(--mute);
    text-align: center;
    margin-top: var(--sp-2);
}

.ms-form-meta a {
    color: var(--gold-300);
    text-decoration: underline;
}

.ms-required {
    color: var(--gold-500);
}

.ms-form-actions {
    padding-top: var(--sp-2);
    display: flex;
    justify-content: center;
}

.ms-form-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin: 0;
}

.ms-form-fieldset legend {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-2);
    padding: 0 var(--sp-2);
}

.ms-auth-form--admin .ms-form-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.ms-form-hint--fieldset {
    margin-top: var(--sp-4);
}

/* ── Erreurs ──────────────────────────────────────────────── */
.ms-auth-errors {
    list-style: none;
    padding: var(--sp-4) var(--sp-5);
    background: rgba(201,72,58,.1);
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    color: #ff8a7a;
    font-size: 14px;
    margin: 0;
}

.ms-auth-errors li + li {
    margin-top: var(--sp-2);
}

.ms-auth-errors li::before {
    content: '⚠ ';
}

/* ── Cartes type de compte ────────────────────────────────── */
.ms-account-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    align-items: stretch;
}

@media (max-width: 420px) {
    .ms-account-type-grid {
        grid-template-columns: 1fr;
    }
}

/* wpautop enveloppe chaque <label> dans un <p> et insère des <br>
   parasites entre les enfants — neutralisés ici plutôt que combattus
   avec des hauteurs en pourcentage imprévisibles. */
.ms-account-type-grid > p {
    margin: 0;
    display: flex;
}

.ms-account-type-card {
    display: flex;
    flex: 1;
    cursor: pointer;
    position: relative;
}

.ms-account-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ms-account-type-card__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: rgba(255,255,255,.03);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    box-sizing: border-box;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.ms-account-type-card__inner strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--paper);
}

.ms-account-type-card__inner span {
    font-size: 13px;
    color: var(--mute);
    line-height: 1.4;
}

.ms-account-type-card__icon {
    width: 28px;
    height: 28px;
    color: var(--gold-500);
    margin-bottom: var(--sp-1);
}

.ms-account-type-card.is-selected .ms-account-type-card__inner,
.ms-account-type-card:has(input:checked) .ms-account-type-card__inner {
    border-color: var(--gold-500);
    background: rgba(201,162,74,.06);
    box-shadow: var(--halo-gold);
}

.ms-account-type-card:hover .ms-account-type-card__inner {
    border-color: var(--gold-400);
}

/* ── Espace compte (ms-account) ───────────────────────────── */
.ms-account {
    max-width: 720px;
    margin: var(--sp-8) auto;
}

@media (max-width: 768px) {
    .ms-account {
        padding-left: var(--sp-5);
        padding-right: var(--sp-5);
        box-sizing: border-box;
    }

    .ms-tabs {
        justify-content: center;
    }
}

.ms-auth-info {
    text-align: center;
    color: var(--mute);
    padding: var(--sp-8);
}

.ms-auth-info a {
    color: var(--gold-300);
    text-decoration: underline;
}

/* ── Notices ──────────────────────────────────────────────── */
.ms-account__notice {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    margin-top: 50px;
    margin-bottom: var(--sp-5);
    border-left: 3px solid;
    font-size: 14px;
    line-height: 1.5;
}

.ms-account__notice a {
    text-decoration: underline;
}

.ms-account__notice--info {
    background: rgba(201,162,74,.08);
    border-color: var(--gold-500);
    color: var(--gold-300);
}
.ms-account__notice--info a { color: var(--gold-300); }

.ms-account__notice--warn {
    background: rgba(232,160,0,.08);
    border-color: #E8A000;
    color: #E8C050;
}

.ms-account__notice--success {
    background: rgba(92,138,79,.1);
    border-color: var(--success);
    color: #8bc880;
}

.ms-account__notice--danger {
    background: rgba(201,72,58,.1);
    border-color: var(--danger);
    color: #ff8a7a;
}
.ms-account__notice--danger a { color: #ff8a7a; }

/* Flash : disparaît automatiquement */
.ms-account__notice--flash {
    animation: ms-flash-out 4s ease forwards;
}

@keyframes ms-flash-out {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* ── Onglets ──────────────────────────────────────────────── */
.ms-tabs {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-8);
    overflow-x: auto;
    scrollbar-width: none;
}
.ms-tabs::-webkit-scrollbar { display: none; }

.ms-tabs__tab {
    padding: var(--sp-2) var(--sp-5) !important;
    color: var(--mute) !important;
    text-decoration: none !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border: 1px solid var(--gold-700) !important;
    border-radius: var(--r-pill) !important;
    white-space: nowrap !important;
    background: transparent !important;
    transition: color .2s, border-color .2s, background .2s, box-shadow .2s !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ms-tabs__tab:hover {
    color: var(--gold-300) !important;
    border-color: var(--gold-500) !important;
    background: rgba(201,162,74,0.08) !important;
}

.ms-tabs__tab.is-active {
    background: linear-gradient(to bottom, var(--gold-300), var(--gold-500)) !important;
    color: var(--ink) !important;
    border-color: transparent !important;
    box-shadow: var(--halo-gold) !important;
    font-weight: 700 !important;
}

/* ── Photo profil ─────────────────────────────────────────── */
.ms-form-field--photo {
    gap: var(--sp-3);
}

.ms-current-photo {
    margin-bottom: var(--sp-2);
}

.ms-current-photo .ms-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--r-circle);
    object-fit: cover;
    border: 2px solid var(--gold-500);
}

/* ── Champs fichier ───────────────────────────────────────── */
.ms-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.ms-file-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: rgba(255,255,255,.05);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    color: var(--gold-300);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    width: fit-content;
}

.ms-file-label:hover {
    border-color: var(--gold-500);
    background: rgba(201,162,74,.08);
}

.ms-file-existing {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    color: var(--mute);
    margin: 0 0 var(--sp-2) 0;
}

.ms-file-existing svg {
    color: var(--gold-500);
    flex-shrink: 0;
}

.ms-file-existing a {
    color: var(--gold-300);
    text-decoration: underline;
}

.ms-file-delete {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: var(--r-circle);
    background: transparent;
    color: var(--mute);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: color .18s, background .18s;
}

.ms-file-delete:hover {
    color: var(--danger);
    background: rgba(201,72,58,.12);
}

.ms-form-field--file.is-uploading .ms-file-label {
    opacity: .5;
    pointer-events: none;
}

.ms-file-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ms-file-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    color: var(--mute);
}

.ms-file-list li svg {
    color: var(--gold-500);
    flex-shrink: 0;
}

.ms-file-list a {
    color: var(--gold-300);
    text-decoration: underline;
}

/* ── Spécialités (checkboxes) ─────────────────────────────── */
.ms-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.ms-checkbox-card {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 14px;
    color: var(--fg-2);
    transition: border-color .18s, color .18s, background .18s;
    user-select: none;
}

.ms-checkbox-card:hover {
    border-color: var(--gold-400);
    color: var(--gold-300);
}

.ms-checkbox-card input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--gold-500);
    cursor: pointer;
}

.ms-checkbox-card:has(input:checked) {
    border-color: var(--gold-500);
    background: rgba(201,162,74,.07);
    color: var(--gold-300);
}

/* ── ms-form-field__body : wrapper input + hint ───────────── */
.ms-form-field__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.ms-form-field__body--pair {
    flex-direction: row;
    gap: var(--sp-4);
}

.ms-form-field__body--pair input:first-child {
    width: 110px;
    flex-shrink: 0;
}

/* ── Paragraphes vides (WordPress wpautop) ────────────────── */
.ms-auth-form p:empty {
    display: none;
    margin: 0;
    padding: 0;
}

/* ── Onglet Administratif : layout 2 colonnes desktop ─────── */
.ms-auth-form--admin {
    gap: var(--sp-6);
}

@media (min-width: 640px) {
    .ms-auth-form--admin .ms-form-field {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--sp-6);
    }
    .ms-auth-form--admin .ms-form-field > label:first-child {
        width: 160px;
        min-width: 160px;
        flex-shrink: 0;
        padding-top: 10px;
    }
    .ms-auth-form--admin .ms-form-field__body {
        flex: 1;
        min-width: 0;
    }
    .ms-auth-form--admin .ms-form-actions {
        padding-left: calc(160px + var(--sp-6));
    }
}