/*
 * ATI — Page Mon compte.
 *
 * Le formulaire vient du widget WooCommerce d'Elementor, habille par The7.
 * Deux contraintes ont dicte l'ecriture :
 *
 *   - The7 pose ses propres couleurs de bouton avec une specificite elevee,
 *     et sa feuille peut se charger apres la notre. Les declarations qui lui
 *     disputent un bouton portent donc un selecteur long et, la ou il le
 *     faut vraiment, un !important. Ailleurs on reste en specificite basse.
 *
 *   - Deconnectee, la page n'affichait qu'une colonne etroite sur un tiers de
 *     l'ecran, le reste vide. On passe en deux colonnes : connexion a gauche,
 *     invitation a rejoindre a droite, sur le meme alignement haut.
 */

body.woocommerce-account .woocommerce {
    --ati-rouge: #DD1E2C;
    --ati-rouge-fonce: #A81420;
    --ati-encre: #343434;
    --ati-encre-2: #6B6B6B;
    --ati-trait: #E4E4E4;
    --ati-fond: #FBFBFB;
}

/* ==========================================================================
   LA SCENE DE CONNEXION
   Le bandeau n'existe que dans le gabarit du formulaire de connexion : rien
   ici ne peut atteindre l'espace compte d'un client connecte.
========================================================================== */

/*
 * Le decor est pose sur .content — le conteneur du theme qui va du bas de
 * l'en-tete au haut du pied de page, mesure a 1585x730 sur cette page. C'est
 * le seul niveau qui englobe le fil d'Ariane : celui-ci est rendu avant le
 * formulaire, un bandeau ouvert plus bas ne pouvait pas passer derriere lui.
 *
 * Porte par la classe ati-cc-connexion, posee sur le body uniquement pour un
 * visiteur non identifie sur la page compte. Un client connecte ne recoit ni
 * la classe ni ces regles.
 */
body.ati-cc-connexion .content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

body.ati-cc-connexion .content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--ati-cc-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(7px) saturate(.85);
    transform: scale(1.06);
}

/* Le voile garantit le contraste quelle que soit la photo choisie. */
body.ati-cc-connexion .content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(118deg, rgba(30, 30, 30, .94) 0%, rgba(36, 36, 36, .88) 62%, rgba(88, 20, 26, .80) 100%);
}

/*
 * Le conteneur de premier niveau de la page Elementor porte un aplat
 * #EFEFEF. Comme il est enfant de .content, il est peint APRES le decor
 * (qui vit en z-index negatif dans le contexte d'empilement de .content) et
 * le recouvrait entierement — la page ressortait grise, texte blanc sur
 * blanc. On le rend transparent, uniquement sur la page de connexion.
 *
 * Si un jour un fond volontaire est pose sur un conteneur de cette page, il
 * faudra le reintroduire ici : la regle est large parce que la page n'a
 * qu'un conteneur de premier niveau.
 */
body.ati-cc-connexion .content .elementor > .e-con,
body.ati-cc-connexion .content .elementor > .elementor-element {
    background-color: transparent !important;
}

/*
 * Le bandeau ne porte plus d'image : il ne sert qu'a centrer la grille sur la
 * largeur de la fenetre, en sortant des 100px de marge du conteneur
 * Elementor. The7 pose deja overflow-x:hidden sur body et #page, donc les
 * ~15px que 100vw ajoute sont rognes sans provoquer de defilement.
 */
.ati-cc-scene {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 44px 28px 64px;
    background: transparent;
    color: #FFFFFF;
}

.ati-cc-scene__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 26px 36px;
    align-items: start;
    max-width: 1120px;
    margin-inline: auto;
}

/* Le « Se connecter » de WooCommerce coiffe les deux colonnes. */
/*
 * Le widget Mon compte d'Elementor colore tous les titres de section en
 *   var(--typography-section-titles-color, #000)
 * avec un selecteur a trois classes. Sur le bandeau sombre, ses h2 sortaient
 * donc en noir sur noir — dont le titre du panneau « Devenir revendeur »,
 * illisible. On le remet en blanc franc, verifie dans le navigateur.
 */
.ati-cc-scene__grille > h2 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.woocommerce .ati-cc-scene .ati-cc-scene__grille > h2,
.woocommerce .ati-cc-scene .ati-cc-invite .ati-cc-invite__titre {
    color: #FFFFFF !important;
}

.ati-cc-scene__grille > p,
.ati-cc-scene__grille > h1,
.ati-cc-scene__grille > h3 {
    color: #FFFFFF;
}

.ati-cc-scene__grille > .woocommerce-error,
.ati-cc-scene__grille > .woocommerce-message,
.ati-cc-scene__grille > .woocommerce-info,
.ati-cc-scene__grille > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    margin: 0;
}

@media (max-width: 900px) {
    .ati-cc-scene {
        padding: 28px 20px 44px;
    }

    .ati-cc-scene__grille {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   CARTE DE CONNEXION
========================================================================== */

body.woocommerce-account .woocommerce-form-login {
    margin: 0;
    padding: 30px 30px 26px;
    border: 1px solid var(--ati-trait);
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

body.woocommerce-account .woocommerce-form-login .form-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 18px;
    padding: 0;
    width: 100%;
}

body.woocommerce-account .woocommerce-form-login label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ati-encre);
}

body.woocommerce-account .woocommerce-form-login label .required {
    color: var(--ati-rouge);
    text-decoration: none;
    border: 0;
}

body.woocommerce-account .woocommerce-form-login input[type="text"],
body.woocommerce-account .woocommerce-form-login input[type="email"],
body.woocommerce-account .woocommerce-form-login input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ati-encre);
    background: #FFFFFF;
    border: 1px solid var(--ati-trait);
    border-radius: 3px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.woocommerce-account .woocommerce-form-login input[type="text"]:focus,
body.woocommerce-account .woocommerce-form-login input[type="email"]:focus,
body.woocommerce-account .woocommerce-form-login input[type="password"]:focus {
    outline: none;
    border-color: var(--ati-rouge);
    box-shadow: 0 0 0 3px rgba(221, 30, 44, .12);
}

body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ati-encre-2);
}

body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme input {
    width: auto;
    margin: 0;
    accent-color: var(--ati-rouge);
}

/*
 * Le bouton : c'est ici que The7 impose son bleu. On enonce la regle avec le
 * selecteur le plus complet possible et on la verrouille, sinon la couleur du
 * theme repasse devant selon l'ordre de chargement des feuilles.
 */
body.woocommerce-account .woocommerce form.woocommerce-form-login button.woocommerce-button,
body.woocommerce-account .woocommerce form.woocommerce-form-login button[type="submit"],
body.woocommerce-account .woocommerce form.woocommerce-form-login .button {
    display: block;
    width: 100%;
    padding: 14px 22px !important;
    font-family: inherit;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em;
    text-transform: none;
    color: #FFFFFF !important;
    background: var(--ati-rouge) !important;
    background-color: var(--ati-rouge) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .15s ease;
}

body.woocommerce-account .woocommerce form.woocommerce-form-login button.woocommerce-button:hover,
body.woocommerce-account .woocommerce form.woocommerce-form-login button[type="submit"]:hover,
body.woocommerce-account .woocommerce form.woocommerce-form-login button[type="submit"]:focus-visible {
    background: var(--ati-rouge-fonce) !important;
    background-color: var(--ati-rouge-fonce) !important;
    color: #FFFFFF !important;
}

body.woocommerce-account .woocommerce-form-login .lost_password {
    margin: 18px 0 0;
    font-size: 14px;
}

body.woocommerce-account .woocommerce-form-login .lost_password a {
    color: var(--ati-encre-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.woocommerce-account .woocommerce-form-login .lost_password a:hover {
    color: var(--ati-rouge);
}

/* ==========================================================================
   PANNEAU « DEVENIR REVENDEUR »
   Verre depoli sur la photo : il tient la colonne de droite sans rivaliser
   avec la carte blanche, qui reste l'action principale.
========================================================================== */

.ati-cc-invite {
    margin: 0;
    padding: 30px 30px 28px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-left: 3px solid var(--ati-rouge, #DD1E2C);
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #FFFFFF;
}

.ati-cc-invite__surtitre {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #FF8A93;
}

.ati-cc-invite__titre {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    text-wrap: balance;
}

.ati-cc-invite__texte {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
}

.ati-cc-invite__bouton {
    display: inline-block;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF !important;
    background: var(--ati-rouge, #DD1E2C);
    border-radius: 3px;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(221, 30, 44, .34);
    transition: background-color .15s ease, transform .15s ease;
}

.ati-cc-invite__bouton:hover {
    background: #F02434;
    transform: translateY(-1px);
}

.ati-cc-invite__bouton:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.ati-cc-invite__aide {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .68);
}

.ati-cc-invite__aide a {
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    white-space: nowrap;
}

.ati-cc-invite__aide a:hover {
    border-bottom-color: #FFFFFF;
}

/* Sans backdrop-filter (Firefox selon la configuration), le verre depoli
   devient illisible : on retombe sur un aplat sombre franc. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .ati-cc-invite {
        background: rgba(26, 26, 26, .72);
    }
}

/* ==========================================================================
   ESPACE CONNECTE
========================================================================== */

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ati-trait);
    border-radius: 4px;
    overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
    border-top: 1px solid var(--ati-trait);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 16px;
    font-size: 14.5px;
    color: var(--ati-encre);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--ati-fond);
    color: var(--ati-rouge);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--ati-rouge);
    color: #FFFFFF;
    font-weight: 600;
}

/* ==========================================================================
   MESSAGES ET TELEPHONES
========================================================================== */

body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info {
    border-top-color: var(--ati-rouge);
}

body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before {
    color: var(--ati-rouge);
}

@media (max-width: 600px) {
    body.woocommerce-account .woocommerce-form-login {
        padding: 22px 20px 20px;
    }

    .ati-cc-invite {
        padding: 24px 20px 22px;
    }

    .ati-cc-invite__bouton {
        display: block;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-account .woocommerce-form-login input,
    body.woocommerce-account .woocommerce form.woocommerce-form-login button,
    .ati-cc-invite__bouton,
    body.woocommerce-account .woocommerce-MyAccount-navigation li a {
        transition: none;
    }

    .ati-cc-invite__bouton:hover {
        transform: none;
    }
}