/* ==========================================================================
   Music4Store : habillage du tunnel de paiement et de l'espace client.
   Ces pages conservent leur structure Bootstrap d'origine (aucun risque sur le
   paiement) ; on se contente ici de les mettre aux couleurs de la nouvelle identité.
   ========================================================================== */

body.legacy {
    --special-blue: #3A2BE2;
    --special-light-blue: #3A2BE2;
    --special-dark-blue: #17124F;
    --special-grey: #5B5878;
    --special-grey-half: #DCD9F0;
    --special-grey-light: #F5F4FC;
    --special-orange: #F2B300;
    --special-orange2: rgba(255, 201, 60, .22);
    --hover-color: #2A1FB8;
    font-family: var(--texte); color: var(--encre); background: var(--blanc);
}

/* Le pied de page d'origine était positionné en absolu sur 30 px de haut. */
body.legacy footer { position: static; height: auto; line-height: inherit; width: auto; margin-top: 0 !important; }
body.legacy .compte-page { min-height: 55vh; padding: clamp(28px, 5vw, 56px) var(--gouttiere) clamp(48px, 7vw, 88px); max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; }

body.legacy h1, body.legacy .h1, body.legacy h2, body.legacy .h2, body.legacy h3, body.legacy .h3, body.legacy h4, body.legacy h5 { font-family: var(--titre); color: var(--nuit); letter-spacing: -.02em; }
body.legacy .compte-page h1, body.legacy .compte-page .h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; margin-top: 0 !important; }
body.legacy .myriad-pro-sb, body.legacy .myriad-pro-b { font-family: var(--titre); }
body.legacy .roboto-rg, body.legacy .roboto-b { font-family: var(--texte) !important; }
body.legacy main a:not(.btn):not(.rounded-button) { color: var(--outremer); }
body.legacy .text-info { color: var(--outremer) !important; }
body.legacy .text-danger { color: var(--corail) !important; }

/* Boutons et zones cliquables d'origine */
body.legacy .rounded-button, body.legacy .btn { border-radius: 999px !important; font-family: var(--texte); font-weight: 600; text-transform: none; letter-spacing: 0; box-shadow: none !important; }
body.legacy .btn-primary, body.legacy .special-blue-bg { background-color: var(--outremer) !important; border-color: var(--outremer) !important; color: #fff !important; }
body.legacy button.rounded-button, body.legacy a.rounded-button { padding: .75em 1.5em !important; border-width: 2px !important; font-weight: 600; color: var(--nuit); cursor: pointer; transition: background-color .15s, color .15s; }
body.legacy button.special-blue-border:hover, body.legacy a.special-blue-border:hover { background: var(--outremer) !important; color: #fff !important; }
body.legacy button[type="submit"].rounded-button:not(.disabled) { background: var(--outremer) !important; border-color: var(--outremer) !important; color: #fff !important; }
body.legacy button[type="submit"].rounded-button:not(.disabled):hover { background: var(--outremer-fonce) !important; }
body.legacy .disabled { opacity: .5; }
body.legacy .selected-order, body.legacy .selected-order-next { border: 2px solid var(--outremer) !important; border-radius: 16px; }
body.legacy .pointer.border { border-radius: 16px; }

/* Tableaux, cartes, formulaires */
body.legacy .table thead th { background: var(--nuit); color: #fff; border: 0; font-weight: 600; }
body.legacy .table td, body.legacy .table th { border-color: var(--ligne); vertical-align: middle; }
body.legacy .card { border-radius: 16px; box-shadow: none; border: 1.5px solid var(--ligne); }
body.legacy .alert { border-radius: 12px; }
body.legacy .md-form label.active { color: var(--outremer); }
body.legacy .md-form input:not([type]):focus:not([readonly]), body.legacy .md-form input[type="text"]:focus:not([readonly]), body.legacy .md-form input[type="email"]:focus:not([readonly]), body.legacy .md-form input[type="password"]:focus:not([readonly]), body.legacy .md-form textarea.md-textarea:focus:not([readonly]) { border-bottom-color: var(--outremer); box-shadow: 0 1px 0 0 var(--outremer); }
body.legacy .nav-tabs .nav-link.active { color: var(--outremer); border-bottom: 3px solid var(--outremer); }
body.legacy .modal-content { border-radius: 16px; }

/* L'en-tête commun ne doit pas hériter des règles Bootstrap */
body.legacy .entete ul, body.legacy .pied ul { margin-bottom: 0; }
body.legacy .entete a:not(.btn), body.legacy .menu a { color: var(--nuit); }
body.legacy .pied ul { margin-bottom: 26px; }
body.legacy .pied a { color: #E9E7FA; }
body.legacy .pied-bas ul { margin: 0; }
body.legacy .entete .btn-soleil { color: var(--nuit) !important; }
body.legacy .entete p, body.legacy .pied p { margin-bottom: 1em; }
body.legacy .logo-clair, body.legacy .pied-titre a { color: #fff; }
body.legacy summary { outline: none; }

/* Marges d'origine prévues pour un en-tête fixe : ramenées à des valeurs normales. */
body.legacy .mt-13 { margin-top: 0 !important; }
body.legacy .mt-6 { margin-top: 2rem !important; }
body.legacy .mt-full { margin-top: 6rem !important; }
body.legacy .my-13 { margin-top: 2rem !important; margin-bottom: 2rem !important; }