/*
 * PAGE D’ABONNEMENT À L’INFOLETTRE
 */

:root {
    --infolettre-rose: #ff078f;
    --infolettre-noir: #050505;
    --infolettre-noir-clair: #101010;
    --infolettre-blanc: #ffffff;
}


/* =========================================================
   FOND GÉNÉRAL DE LA PAGE
   ========================================================= */

body:has(.page-infolettre),
body:has(.page-infolettre) #page,
body:has(.page-infolettre) .site-content,
body:has(.page-infolettre) .content-area,
body:has(.page-infolettre) .site-main,
body:has(.page-infolettre) .entry-content {
    background: var(--infolettre-noir) !important;
    color: var(--infolettre-blanc);
}

body:has(.page-infolettre) .ast-container {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

body:has(.page-infolettre) .entry-content {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   CONTENEUR PRINCIPAL
   ========================================================= */

.page-infolettre {
    box-sizing: border-box;
    width: 100%;
    min-height: 100svh;
    margin: 0 !important;
    padding: 28px 20px 40px;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at top,
            rgba(255, 7, 143, 0.16) 0,
            rgba(255, 7, 143, 0.04) 25%,
            transparent 48%
        ),
        var(--infolettre-noir);
}


/* =========================================================
   LOGO
   Aucune règle de centrage n’est appliquée ici.
   Sa position reste celle configurée dans Gutenberg.
   ========================================================= */

.infolettre-logo {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}

.infolettre-logo img {
    display: block;
    width: 325px;
    max-width: 90vw;
    height: auto;

    filter: drop-shadow(
        0 0 12px rgba(255, 7, 143, 0.35)
    );
}


/* =========================================================
   CONTENU À CENTRER VERTICALEMENT
   Boutons de langue + formulaire seulement
   ========================================================= */

.infolettre-contenu {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 22px;
    padding-bottom: 55px;
}


/* =========================================================
   BOUTONS DE LANGUE
   ========================================================= */

.infolettre-langues {
    box-sizing: border-box;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 0;

    width: min(920px, calc(100% - 24px));
    margin: 0 auto !important;
}

.infolettre-langues .wp-block-button {
    margin: 0 !important;
}

.infolettre-langues .wp-block-button__link {
    box-sizing: border-box;
    min-width: 125px;
    padding: 10px 22px;

    border: 1px solid var(--infolettre-rose);
    border-radius: 0;

    background: #111111;
    color: var(--infolettre-blanc);

    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;

    box-shadow: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.infolettre-langues .wp-block-button:first-child
.wp-block-button__link {
    border-radius: 6px 0 0 0;
}

.infolettre-langues .wp-block-button:last-child
.wp-block-button__link {
    border-radius: 0 6px 0 0;
}

.infolettre-langues .wp-block-button__link:hover,
.infolettre-langues .wp-block-button__link:focus {
    background: var(--infolettre-rose);
    color: #000000;

    box-shadow:
        0 0 10px rgba(255, 7, 143, 0.8),
        0 0 24px rgba(255, 7, 143, 0.45);

    transform: translateY(-1px);
}


/* Français actif par défaut */

body:not(:has(#en:target))
.infolettre-langues a[href="#fr"] {
    background: var(--infolettre-rose);
    color: #000000;

    box-shadow:
        0 0 10px rgba(255, 7, 143, 0.75),
        0 0 22px rgba(255, 7, 143, 0.35);
}


/* Anglais actif lorsque l’adresse se termine par #en */

body:has(#en:target)
.infolettre-langues a[href="#en"] {
    background: var(--infolettre-rose);
    color: #000000;

    box-shadow:
        0 0 10px rgba(255, 7, 143, 0.75),
        0 0 22px rgba(255, 7, 143, 0.35);
}

body:has(#en:target)
.infolettre-langues a[href="#fr"] {
    background: #111111;
    color: var(--infolettre-blanc);
    box-shadow: none;
}


/* =========================================================
   CADRE DU FORMULAIRE
   ========================================================= */

.infolettre-section {
    box-sizing: border-box;
    display: none;

    width: min(920px, calc(100% - 24px));
    margin: 0 auto !important;
    padding: 7px;

    border: 2px solid var(--infolettre-rose);
    border-radius: 0 0 14px 14px;

    background: var(--infolettre-noir-clair);

    box-shadow:
        0 0 12px rgba(255, 7, 143, 0.75),
        0 0 30px rgba(255, 7, 143, 0.28);
}


/* =========================================================
   AFFICHAGE FRANÇAIS / ANGLAIS
   ========================================================= */

/* Français affiché par défaut */

.infolettre-fr {
    display: block !important;
}

.infolettre-en {
    display: none !important;
}


/* Anglais affiché avec #en */

body:has(#en:target) .infolettre-fr {
    display: none !important;
}

body:has(#en:target) .infolettre-en {
    display: block !important;
}


/* Français affiché avec #fr */

body:has(#fr:target) .infolettre-fr {
    display: block !important;
}

body:has(#fr:target) .infolettre-en {
    display: none !important;
}


/* =========================================================
   FORMULAIRE KLAVIYO
   ========================================================= */

.infolettre-section .klaviyo-form {
    width: 100%;
    margin: 0 auto;
}

/* =========================================================
   CHAMPS KLAVIYO — CORRECTION ASTRA / KLAVIYO
   ========================================================= */

/*
 * Champs texte.
 * On exclut les boutons, cases à cocher et champs masqués.
 */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
textarea {
    box-sizing: border-box !important;

    border: 1px solid #333333 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #333333 !important;
    border-radius: 8px !important;

    outline: 0 !important;

    background-color: #ffffff !important;
    background-image: none !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Empêche les champs de disparaître au survol */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
textarea:hover {
    border: 1px solid #333333 !important;
    border-color: #333333 !important;

    background-color: #ffffff !important;
    background-image: none !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: none !important;
}


/* Focus rose sans modifier l’épaisseur de la bordure */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
textarea:focus {
    border: 1px solid var(--infolettre-rose, #ff078f) !important;
    border-color: var(--infolettre-rose, #ff078f) !important;

    outline: 0 !important;

    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    opacity: 1 !important;

    box-shadow:
        0 0 0 2px rgba(255, 7, 143, 0.22),
        0 0 10px rgba(255, 7, 143, 0.45) !important;
}


/* Texte indicatif */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
input::placeholder,

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
textarea::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
}


/* =========================================================
   SÉLECTEUR DE PAYS
   La bordure et la flèche sont appliquées au select lui-même.
   ========================================================= */

/*
 * Neutralise toute bordure éventuellement ajoutée
 * par le conteneur Klaviyo.
 */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> select) {
    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
    overflow: visible !important;
}


/* Retire les flèches ou séparateurs ajoutés au conteneur */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> select)::before,

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> select)::after {
    content: none !important;
    display: none !important;
}


/* Select propre avec une seule bordure */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
select {
    box-sizing: border-box !important;
    display: block !important;

    width: 100% !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 42px 0 14px !important;

    border: 1px solid #333333 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #333333 !important;
    border-radius: 8px !important;

    outline: 0 !important;

    background-color: #ffffff !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 7px !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: none !important;
    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Le sélecteur reste blanc et visible au survol */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
select:hover {
    border: 1px solid #333333 !important;
    border-color: #333333 !important;

    background-color: #ffffff !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 7px !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    opacity: 1 !important;
    box-shadow: none !important;
}


/* Focus du sélecteur */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
select:focus {
    border: 1px solid var(--infolettre-rose, #ff078f) !important;
    border-color: var(--infolettre-rose, #ff078f) !important;

    outline: 0 !important;

    background-color: #ffffff !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 7px !important;

    color: #111111 !important;

    box-shadow:
        0 0 0 2px rgba(255, 7, 143, 0.22),
        0 0 10px rgba(255, 7, 143, 0.45) !important;
}

/* =========================================================
   KLAVIYO — RETIRE LA BORDURE INTÉRIEURE DU CHAMP PAYS
   ========================================================= */

.page-infolettre
:is(#fr, #en)
:is(.klaviyo-form, [class*="klaviyo-form-"])
input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
) {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 0 !important;

    outline: 0 !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}

/* =========================================================
   KLAVIYO — BOUTON DE LA FLÈCHE DU CHAMP PAYS
   Empêche Astra de lui appliquer un fond noir
   ========================================================= */

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
))
:is(:hover, :focus-within)
:is(div) > :is(button, [role="button"]),

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)) > :is(button, [role="button"]),

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)) > :is(button, [role="button"]):hover,

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)) > :is(button, [role="button"]):focus,

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)) > :is(button, [role="button"]):active,

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)) > :is(button, [role="button"])[aria-expanded="true"] {
    padding: 0 12px !important;

    border: 0 !important;
    outline: 0 !important;

    background-color: transparent !important;
    background-image: none !important;

    color: #111111 !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* La flèche demeure noire et visible */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)) > :is(button, [role="button"]) svg {
    color: #111111 !important;

    opacity: 1 !important;
    visibility: visible !important;

    filter: none !important;
}


/* Compatibilité avec les différentes icônes Klaviyo */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)) > :is(button, [role="button"]) svg path {
    fill: #111111 !important;
    stroke: #111111 !important;
}

/* =========================================================
   KLAVIYO — CONSERVE LA BORDURE EXTÉRIEURE DU CHAMP PAYS
   ========================================================= */

/* État normal */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)) {
    box-sizing: border-box !important;

    border: 1px solid #333333 !important;
    border-radius: 8px !important;

    outline: 0 !important;

    background-color: #ffffff !important;

    box-shadow: none !important;
}


/* Survol */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)):hover {
    border: 1px solid #333333 !important;
    border-color: #333333 !important;

    background-color: #ffffff !important;

    box-shadow: none !important;
}


/* Champ sélectionné ou liste ouverte */
.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)):focus-within,

.page-infolettre
.infolettre-section
:is(.klaviyo-form, [class*="klaviyo-form-"])
div:has(> input:is(
    [role="combobox"],
    [aria-autocomplete="list"]
)):has(
    > :is(button, [role="button"])[aria-expanded="true"]
) {
    border: 1px solid var(--infolettre-rose, #ff078f) !important;
    border-color: var(--infolettre-rose, #ff078f) !important;

    outline: 0 !important;

    background-color: #ffffff !important;

    box-shadow:
        0 0 0 2px rgba(255, 7, 143, 0.22),
        0 0 10px rgba(255, 7, 143, 0.45) !important;
}

/* =========================================================
   TABLETTES ET TÉLÉPHONES
   ========================================================= */

@media (max-width: 700px) {

    .page-infolettre {
        min-height: 100svh;
        padding: 20px 10px 30px;
    }

    .infolettre-contenu {
        padding-top: 18px;
        padding-bottom: 45px;
    }

    .infolettre-langues {
        width: min(100%, calc(100% - 8px));
    }

    .infolettre-langues .wp-block-button {
        flex: 1 1 50%;
    }

    .infolettre-langues .wp-block-button__link {
        width: 100%;
        min-width: 0;
        padding: 9px 12px;
        font-size: 12px;
    }

    .infolettre-section {
        width: min(100%, calc(100% - 8px));
        padding: 4px;
        border-radius: 0 0 10px 10px;
    }

    .infolettre-logo img {
        max-width: min(220px, 72vw);
    }
}

/* =========================================================
   MESSAGE LORSQUE KLAVIYO NE PRÉSENTE PAS LE FORMULAIRE
   ========================================================= */

.infolettre-message-klaviyo {
    box-sizing: border-box;
    display: none;

    width: 100%;
    min-height: 210px;

    padding: 45px 30px;

    background-color: #ffffff;
    color: #111111;

    text-align: center;
}

.infolettre-message-klaviyo h2 {
    margin: 0 0 15px;

    color: #111111;

    font-size: 30px;
    line-height: 1.2;
    text-transform: uppercase;
}

.infolettre-message-klaviyo p {
    max-width: 650px;
    margin: 0 auto;

    color: #333333;

    font-size: 17px;
    line-height: 1.6;
}


/*
 * Le JavaScript ajoute cette classe lorsque le conteneur
 * Klaviyo reste vide.
 */
.infolettre-section.klaviyo-form-absent
.infolettre-message-klaviyo {
    display: block;
}


/*
 * Masque le conteneur Klaviyo vide afin que seul
 * le message soit affiché.
 */
.infolettre-section.klaviyo-form-absent
:is(.klaviyo-form, [class*="klaviyo-form-"]) {
    display: none !important;
}


/* Le formulaire est revenu : le message reste masqué */
.infolettre-section.klaviyo-form-present
.infolettre-message-klaviyo {
    display: none !important;
}


@media (max-width: 700px) {

    .infolettre-message-klaviyo {
        min-height: 180px;
        padding: 35px 20px;
    }

    .infolettre-message-klaviyo h2 {
        font-size: 24px;
    }

    .infolettre-message-klaviyo p {
        font-size: 15px;
    }
}