/*
 * Espace fidélité — thème sombre bordeaux.
 *
 * Le brief précise que le fond rouge s'applique UNIQUEMENT aux onglets fidélité :
 * tout est donc porté par .splio-loyalty, jamais par des sélecteurs globaux.
 * CSS écrit à la main volontairement : le thème compile son SCSS via gulp, on ne
 * dépend pas de ce pipeline pour un module.
 */

/*
 * Couleurs relevées au pixel sur docs/briefs/splio-loyaties/MAQUETTE 1.png et MAQUETTE 2.png.
 * Ne pas les « ajuster à l'œil » : elles viennent des maquettes validées.
 */
.splio-loyalty-page {
    --splio-bordeaux: #4f1111;        /* fond de page */
    --splio-cream: #f6ebcb;           /* textes et filets */
    --splio-ivory: #fcfbf7;           /* bouton Se déconnecter */
    --splio-gold: #9e8c5d;            /* logo, séparateurs du menu */
    --splio-border: rgba(246, 235, 203, .35);
}

/* ------------------------------------------------- Fond bordeaux sur TOUTE la page
 * Le brief impose que le rouge s'applique à l'ensemble de la page — en-tête et menu
 * du compte compris — mais UNIQUEMENT sur les onglets fidélité. Tout est donc porté
 * par la classe de body `splio-loyalty-page`, posée par les layouts du module.
 * Aucune règle globale : les autres pages du site sont strictement inchangées.
 */

.splio-loyalty-page,
.splio-loyalty-page .page-wrapper,
.splio-loyalty-page .page-main,
.splio-loyalty-page .columns,
.splio-loyalty-page .column.main,
.splio-loyalty-page .sidebar-main,
.splio-loyalty-page .page-header,
.splio-loyalty-page .header.content,
.splio-loyalty-page .nav-sections,
.splio-loyalty-page .panel.wrapper,
/* Le menu principal est le mégamenu Amasty (classes ammenu-*), pas la navigation Magento. */
.splio-loyalty-page .ammenu-header-container,
.splio-loyalty-page .ammenu-nav-sections,
.splio-loyalty-page .ammenu_wrapper,
.splio-loyalty-page .ammenu-button {
    background-color: var(--splio-bordeaux);
    color: var(--splio-cream);
}

/*
 * Le mégamenu Amasty impose son fond blanc avec une spécificité supérieure. On force,
 * mais uniquement sous .splio-loyalty-page : aucune autre page du site n'est touchée.
 */
.splio-loyalty-page .nav-sections,
.splio-loyalty-page .navigation,
.splio-loyalty-page .ammenu_wrapper,
.splio-loyalty-page .ammenu-nav-sections,
.splio-loyalty-page .ammenu-header-container,
.splio-loyalty-page [class*="ammenu"] {
    background-color: var(--splio-bordeaux) !important;
    border-color: var(--splio-border);
}

/*
 * Panneaux déroulants du mégamenu : une fois le fond passé en bordeaux, les libellés
 * hérités du thème resteraient sombres et donc illisibles. On force la couleur sur
 * l'ensemble des descendants textuels, en épargnant images et pictogrammes.
 */
.splio-loyalty-page [class*="ammenu"] a,
.splio-loyalty-page [class*="ammenu"] span,
.splio-loyalty-page [class*="ammenu"] p,
.splio-loyalty-page [class*="ammenu"] li,
.splio-loyalty-page [class*="ammenu"] strong,
.splio-loyalty-page [class*="ammenu"] div {
    color: var(--splio-cream) !important;
}

.splio-loyalty-page [class*="ammenu"] img {
    color: initial !important;
}

/* En-tête : liens, menu principal et pictogrammes passent en crème. */
.splio-loyalty-page .page-header a,
.splio-loyalty-page .nav-sections a,
.splio-loyalty-page .navigation a,
.splio-loyalty-page .header.links a,
.splio-loyalty-page .page-header .switcher,
.splio-loyalty-page .page-header .switcher a,
.splio-loyalty-page .ammenu-nav-sections a,
.splio-loyalty-page .ammenu-text,
.splio-loyalty-page .ammenu-text-block {
    color: var(--splio-cream);
}

.splio-loyalty-page .page-header svg,
.splio-loyalty-page .nav-sections svg {
    fill: var(--splio-cream);
    color: var(--splio-cream);
}

.splio-loyalty-page .page-header img,
.splio-loyalty-page .logo img {
    filter: brightness(0) invert(1);
}

.splio-loyalty-page .page-header,
.splio-loyalty-page .nav-sections,
.splio-loyalty-page .header.content {
    border-color: var(--splio-border);
}

/* Titre de page natif : masqué, le bloc porte son propre en-tête (cf. maquettes). */
.splio-loyalty-page .page-title-wrapper {
    display: none;
}

/* ------------------------------------------------- Menu du compte client */

/*
 * Le thème cible ce menu avec des sélecteurs très longs
 * (.account.page-layout-2columns-left .columns .sidebar-main .content .item a { color: #000 }),
 * donc plus spécifiques que tout ce qu'on peut écrire raisonnablement ici.
 * D'où le !important, cantonné à .splio-loyalty-page. Sans lui le menu reste noir sur bordeaux,
 * illisible.
 */
.splio-loyalty-page .sidebar-main .item strong,
.splio-loyalty-page .sidebar-main .item a,
.splio-loyalty-page .sidebar-main .item > a,
.splio-loyalty-page .sidebar-main a,
.splio-loyalty-page .sidebar-main strong,
.splio-loyalty-page .sidebar-main .block .title strong {
    color: var(--splio-cream) !important;
}

/* Maquettes : les séparateurs du menu sont dorés, pas gris. */
.splio-loyalty-page .sidebar-main .item:after {
    background-color: var(--splio-gold) !important;
}

/* L'onglet courant est mis en avant en doré. */
.splio-loyalty-page .sidebar-main .item.current strong,
.splio-loyalty-page .sidebar-main .item.current a {
    color: var(--splio-gold) !important;
}

.splio-loyalty-page .sidebar-main .item.current:after {
    background-color: var(--splio-gold) !important;
}

/* Le bouton de déconnexion est un lien : il ne doit PAS hériter du crème ci-dessus. */
.splio-loyalty-page .sidebar-main .logout a,
.splio-loyalty-page .sidebar-main .logout .btn {
    color: var(--splio-bordeaux) !important;
}

/* Bouton de déconnexion : pastille ivoire sur fond bordeaux, comme sur les maquettes. */
.splio-loyalty-page .sidebar-main .logout .btn,
.splio-loyalty-page .sidebar-main .logout .btn-black,
.splio-loyalty-page .sidebar-main .action,
.splio-loyalty-page .sidebar-main button {
    background-color: var(--splio-ivory) !important;
    border: 1px solid var(--splio-ivory) !important;
    border-radius: 2.4rem !important;
    letter-spacing: .1em;
}

/* ------------------------------------------------- Bloc fidélité
 * Le fond est désormais porté par la page : le bloc n'a plus de fond propre,
 * sinon on verrait un rectangle plus foncé dans un rectangle.
 */

.splio-loyalty {
    color: var(--splio-cream);
    padding: 3rem 0 4rem;
}

.splio-loyalty__header {
    text-align: center;
    margin-bottom: 3rem;
}

.splio-loyalty__eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 1.4rem;
    margin: 0 0 .5rem;
    color: var(--splio-cream);
}

/*
 * Maquettes : « LA CERISE » en gras très appuyé, « SUR LE GÂTEAU » plus léger juste en dessous.
 * Le découpage vient du paramétrage (« La Cerise|sur le Gâteau »), pas du code.
 */
.splio-loyalty__title {
    margin: 0;
    color: var(--splio-cream);
    text-transform: uppercase;
    line-height: 1;
}

.splio-loyalty__title-main,
.splio-loyalty__title-sub {
    display: block;
}

.splio-loyalty__title-main {
    font-size: 5.2rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.splio-loyalty__title-sub {
    font-size: 3.6rem;
    font-weight: 400;
    letter-spacing: .02em;
    margin-top: .2rem;
}

.splio-loyalty__intro {
    margin: 0 0 3rem;
    line-height: 1.6;
    font-size: 1.5rem;
}

.splio-loyalty__intro p:last-child {
    margin-bottom: 0;
}

.splio-loyalty__notice,
.splio-loyalty__empty {
    text-align: center;
    padding: 2rem;
    border: 1px solid var(--splio-border);
}

/* ---------------------------------------------------------------- Avantages */

/*
 * Maquette 2 : trois cartes par ligne, sans fond propre — seulement un filet crème.
 * Le titre est EN HAUT de la carte, l'illustration au centre, la description et le
 * bouton en bas, tous alignés d'une carte à l'autre.
 */
.splio-loyalty__rewards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.splio-loyalty__reward {
    border: 1px solid var(--splio-border);
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
}

.splio-loyalty__reward--used {
    opacity: .45;
}

/*
 * Les visuels renvoyés par Splio ne sont pas de simples pictogrammes : ce sont des
 * images composées, avec le libellé de l'avantage intégré. Les contraindre en hauteur
 * rendait ce texte illisible. On les laisse donc occuper la largeur de la carte.
 */
.splio-loyalty__reward-visual {
    min-height: 14rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
    order: 2;
}

.splio-loyalty__reward-visual img {
    width: 100%;
    max-width: 22rem;
    height: auto;
}

/* Repli tant que les visuels ne sont pas renseignés dans Splio (1 avantage sur 8 aujourd'hui). */
.splio-loyalty__reward-placeholder {
    display: block;
    width: 9rem;
    height: 9rem;
    border: 1px solid var(--splio-cream);
    border-radius: 50%;
    opacity: .35;
}

.splio-loyalty__reward-title {
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.4;
    margin: 0;
    color: var(--splio-cream);
    order: 1;
}

.splio-loyalty__reward-expiry,
.splio-loyalty__reward-flag {
    font-size: 1.3rem;
    margin: 0 0 1.5rem;
    opacity: .8;
    order: 3;
}

.splio-loyalty__reward-flag {
    text-transform: uppercase;
    letter-spacing: .1em;
}

.splio-loyalty__reward-details {
    margin-top: auto;
    width: 100%;
    order: 4;
}

.splio-loyalty__reward-details summary {
    cursor: pointer;
    display: inline-block;
    border: 1px solid var(--splio-border);
    padding: .9rem 2.4rem;
    font-size: 1.3rem;
    letter-spacing: .04em;
    color: var(--splio-cream);
}

.splio-loyalty__reward-details summary::-webkit-details-marker {
    display: none;
}

.splio-loyalty__reward-details[open] summary {
    margin-bottom: 1.5rem;
}

.splio-loyalty__reward-details p {
    font-size: 1.3rem;
    line-height: 1.6;
    margin: 0 0 .5rem;
}

.splio-loyalty__reward-condition {
    color: var(--splio-gold);
}

/* Une récompense consommée reste lisible mais n'est plus actionnable. */
.splio-loyalty__reward--used .splio-loyalty__reward-details summary {
    pointer-events: none;
    opacity: .5;
}

/* ---------------------------------------------------------------- Adhésion */

/*
 * Maquette 0 : pastille ivoire alignée à gauche, sous le texte de présentation.
 * Le brief parlait d'une case à cocher ; la maquette a tranché pour un bouton,
 * qui vaut consentement — d'où la mention légale juste en dessous.
 */
.splio-loyalty__join {
    margin: 0 0 3rem;
}

.splio-loyalty__join-submit {
    display: inline-block;
    background-color: var(--splio-ivory);
    border: 1px solid var(--splio-ivory);
    border-radius: 2.4rem;
    color: var(--splio-bordeaux);
    font-size: 1.4rem;
    letter-spacing: .04em;
    padding: 1.1rem 3.2rem;
    cursor: pointer;
}

.splio-loyalty__join-submit:hover {
    background-color: transparent;
    color: var(--splio-ivory);
}

.splio-loyalty__join-terms {
    font-size: 1.2rem;
    opacity: .75;
    line-height: 1.6;
    margin-top: 1.5rem;
    max-width: 60rem;
}

/* ---------------------------------------------- Ma carte de fidélité
 * Aucune maquette fournie pour cet écran. Le parti pris : reprendre la carte telle
 * qu'elle apparaît dans le Wallet (bordeaux, filet doré, nom du porteur, numéro),
 * posée à côté du bloc d'ajout au téléphone.
 */

.splio-card__layout {
    display: grid;
    grid-template-columns: minmax(28rem, 38rem) 1fr;
    gap: 4rem;
    align-items: start;
}

.splio-card__visual {
    border: 1px solid var(--splio-gold);
    border-radius: 1.6rem;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* Proportions proches d'une carte physique, sans la figer. */
    min-height: 24rem;
}

.splio-card__brand {
    margin: 0;
    text-align: center;
    line-height: 1.2;
}

.splio-card__brand span {
    display: block;
    font-size: 2rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--splio-gold);
}

.splio-card__brand em {
    display: block;
    font-style: normal;
    font-size: 1.1rem;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--splio-cream);
    margin-top: .4rem;
}

.splio-card__program {
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--splio-cream);
    opacity: .8;
}

.splio-card__holder {
    margin-top: auto;
}

.splio-card__holder-label {
    display: block;
    font-size: 1rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .4rem;
}

.splio-card__holder-name {
    display: block;
    font-size: 2rem;
    font-weight: 400;
}

.splio-card__number {
    margin: 0;
    padding-top: 2rem;
    border-top: 1px solid var(--splio-border);
}

.splio-card__number-label {
    display: block;
    font-size: 1rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .6rem;
}

/* Chiffres tabulaires : les groupes restent alignés quel que soit le numéro. */
.splio-card__number-value {
    display: block;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.8rem;
    letter-spacing: .3em;
    color: var(--splio-gold);
}

.splio-card__aside-title {
    margin: 0 0 1.2rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--splio-cream);
}

.splio-card__aside-text {
    margin: 0 0 2.5rem;
    max-width: 46rem;
    line-height: 1.6;
    font-size: 1.5rem;
}

/* Boutons Wallet : même gabarit pour les deux, alignés sur la charte de la page. */
.splio-wallet {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.splio-wallet__button {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 21rem;
    padding: 1.1rem 2rem;
    border: 1px solid var(--splio-cream);
    border-radius: 3rem;
    color: var(--splio-cream);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.splio-wallet__button:hover,
.splio-wallet__button:focus {
    background-color: var(--splio-ivory);
    border-color: var(--splio-ivory);
    color: var(--splio-bordeaux);
    text-decoration: none;
}

.splio-wallet__icon svg {
    width: 2.6rem;
    height: 2.6rem;
    display: block;
}

.splio-wallet__label {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.splio-wallet__label small {
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.splio-wallet__label strong {
    font-size: 1.6rem;
    font-weight: 400;
}

.splio-card__back-link {
    margin: 3rem 0 0;
}

.splio-card__back-link a {
    color: var(--splio-gold);
}

/* ---------------------------------------------- Aperçu des avantages (non adhérent) */

.splio-loyalty__teaser {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.splio-loyalty__teaser-item {
    border: 1px solid var(--splio-border);
    padding: 3rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    text-align: center;
    min-height: 26rem;
}

/* Les pictogrammes sont des SVG au trait : ils prennent la couleur du texte. */
.splio-loyalty__teaser-icon svg {
    width: 8rem;
    height: 8rem;
    color: var(--splio-cream);
}

.splio-loyalty__teaser-label {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.5;
    color: var(--splio-cream);
}

/*
 * Encart d'incitation à installer la carte dans le téléphone.
 * Encadré et non un simple lien : c'est une action que le client ne pense pas à faire
 * spontanément, et elle vaut aussi pour l'adhérent qui n'a pas encore acheté.
 */
.splio-loyalty__card-cta {
    margin: 4rem 0 0;
    border: 1px solid var(--splio-gold);
    padding: 2.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.splio-loyalty__card-cta-text {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.5;
    max-width: 52rem;
}

.splio-loyalty__card-cta-button {
    flex-shrink: 0;
    display: inline-block;
    border: 1px solid var(--splio-cream);
    border-radius: 3rem;
    padding: 1.1rem 2.8rem;
    color: var(--splio-cream);
    font-size: 1.4rem;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.splio-loyalty__card-cta-button:hover,
.splio-loyalty__card-cta-button:focus {
    background-color: var(--splio-ivory);
    border-color: var(--splio-ivory);
    color: var(--splio-bordeaux);
    text-decoration: none;
}

/* ------------------------------------------------- Responsive
 * Les maquettes ne couvrent que le desktop. Choix d'adaptation :
 *  - tablette : 2 avantages par ligne, la grille à 3 colonnes devient illisible sous 1024px
 *  - mobile   : 1 avantage par ligne, titre réduit, marges resserrées
 * Le menu du compte passe en accordéon replié — comportement natif du thème, qu'on ne
 * touche pas : on se contente d'y appliquer les couleurs.
 */

@media (max-width: 1024px) {
    .splio-loyalty__rewards,
    .splio-loyalty__teaser {
        grid-template-columns: repeat(2, 1fr);
    }

    .splio-loyalty__title-main {
        font-size: 4.4rem;
    }

    .splio-loyalty__title-sub {
        font-size: 3rem;
    }
}

@media (max-width: 767px) {
    .splio-loyalty {
        padding: 2rem 0 3rem;
    }

    .splio-loyalty__header {
        margin-bottom: 2rem;
    }

    .splio-loyalty__eyebrow {
        font-size: 1.2rem;
    }

    .splio-loyalty__title-main {
        font-size: 3.4rem;
    }

    .splio-loyalty__title-sub {
        font-size: 2.4rem;
    }

    .splio-loyalty__intro {
        font-size: 1.4rem;
        margin-bottom: 2.5rem;
    }

    .splio-loyalty__rewards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Deux colonnes conservées pour l'aperçu : les vignettes sont courtes, une seule
       colonne allongerait inutilement la page avant le bouton d'adhésion. */
    .splio-loyalty__teaser {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .splio-loyalty__teaser-item {
        min-height: 18rem;
        padding: 2rem 1rem 1.5rem;
        gap: 1.5rem;
    }

    .splio-loyalty__teaser-icon svg {
        width: 5.5rem;
        height: 5.5rem;
    }

    .splio-loyalty__teaser-label {
        font-size: 1.1rem;
    }

    .splio-loyalty__join-submit {
        width: 100%;
        text-align: center;
    }

    /* Carte : une seule colonne, la carte au-dessus du bloc Wallet. */
    .splio-card__layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .splio-card__visual {
        padding: 2.5rem 2rem;
        gap: 2rem;
    }

    .splio-card__number-value {
        font-size: 1.5rem;
        letter-spacing: .2em;
    }

    .splio-wallet__button {
        width: 100%;
        justify-content: center;
    }

    /* L'encart carte passe en colonne, bouton pleine largeur. */
    .splio-loyalty__card-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 1.8rem;
        margin-top: 3rem;
    }

    .splio-loyalty__card-cta-button {
        text-align: center;
    }

    .splio-loyalty__reward {
        padding: 2rem 1.5rem;
    }

    .splio-loyalty__reward-visual {
        min-height: 0;
        margin: 1.5rem 0;
    }

    /* La carte occupe toute la largeur : le visuel composé reste lisible. */
    .splio-loyalty__reward-visual img {
        max-width: 26rem;
    }

    .splio-loyalty__reward-placeholder {
        width: 7rem;
        height: 7rem;
    }

    /*
     * Le menu du compte est replié en accordéon par le thème, avec un bandeau de titre
     * dont le fond blanc est porté par un élément interne. On neutralise tous les fonds
     * du bloc, sinon le bandeau « MON COMPTE » ressort en blanc sur la page bordeaux.
     */
    .splio-loyalty-page .sidebar-main,
    .splio-loyalty-page .sidebar-main .block,
    .splio-loyalty-page .sidebar-main .title,
    .splio-loyalty-page .sidebar-main .content,
    .splio-loyalty-page .sidebar-main .block-collapsible-nav,
    .splio-loyalty-page .sidebar-main .block-collapsible-nav .title,
    .splio-loyalty-page .sidebar-main .block-collapsible-nav .content {
        background-color: var(--splio-bordeaux) !important;
    }

    .splio-loyalty-page .sidebar-main .title,
    .splio-loyalty-page .sidebar-main .title strong {
        color: var(--splio-cream) !important;
    }

    .splio-loyalty__join-label {
        font-size: 1.4rem;
    }

    .splio-loyalty__card-link {
        margin-top: 2rem;
    }
}

/* ---------------------------------------------- Code promo de l'avantage
 * L'API expose le code dans l'external_id de l'attribution (confirmé par Splio le 12/08).
 * Il est mis en avant comme un code à recopier : monospace, lettres espacées, encadré.
 */
.splio-loyalty__reward-code {
    margin: 1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--splio-border);
}

.splio-loyalty__reward-code-label {
    display: block;
    font-size: 1rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .6rem;
}

.splio-loyalty__reward-code-value {
    display: inline-block;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: .18em;
    color: var(--splio-gold);
    border: 1px dashed var(--splio-gold);
    padding: .6rem 1.4rem;
    /* Le client doit pouvoir sélectionner le code d'un double-clic. */
    user-select: all;
}

/* ---------------------------------------------- Création de compte
 * Section « communications et fidélité ». Sur fond clair, contrairement au reste du module :
 * le formulaire de création de compte n'est pas un écran fidélité et garde la charte du site.
 */
.splio-optin__phone {
    margin: 1rem 0 1.5rem;
}

.splio-optin__hint {
    margin: .6rem 0 0;
    font-size: 1.2rem;
    font-style: italic;
}

.splio-optin__terms {
    margin: .5rem 0 1.5rem;
    font-size: 1.2rem;
    line-height: 1.5;
    opacity: .8;
}

.splio-optin__terms p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------- Bannière newsletter du pied de page */
.splio-newsletter {
    margin-top: 1.2rem;
}

/*
 * La case et son libellé se collaient. La marge sur la case est écrasée par le thème
 * (mesuré : écart de 0 px), on passe donc par `gap` sur le conteneur flex, que le thème
 * ne surcharge pas — et on double avec une marge plus spécifique par sécurité.
 */
.splio-newsletter__join.field.choice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.splio-newsletter .splio-newsletter__join input[type="checkbox"] {
    flex-shrink: 0;
    margin: .2rem 1rem 0 0;
}

.splio-newsletter__join label {
    font-size: 1.2rem;
    line-height: 1.4;
}

.splio-newsletter__birthdate {
    margin-top: 1rem;
}

.splio-newsletter__birthdate label {
    display: block;
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.splio-newsletter__birthdate input {
    max-width: 20rem;
}

/* ---------------------------------------------- Confirmation de commande */
.splio-success {
    max-width: 68rem;
    margin: 3rem auto 0;
    padding: 2.5rem;
    border: 1px solid rgba(0, 0, 0, .12);
    /* La page de confirmation est centrée : le bloc s'y conforme. */
    text-align: center;
}

/* Case et texte groupés au centre, le texte restant lisible aligné à gauche. */
.splio-success__join {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    text-align: left;
}

.splio-success .splio-success__join input[type="checkbox"] {
    flex-shrink: 0;
    margin: .3rem 0 0;
}

.splio-success__join label {
    font-size: 1.4rem;
    line-height: 1.5;
    max-width: 52rem;
}

.splio-success__details {
    margin-top: 1.5rem;
}

.splio-success__details label {
    display: block;
    font-size: 1.3rem;
    margin-bottom: .5rem;
}

/*
 * Le champ date et le bouton partagent une ligne, alignés sur leur base.
 * Le bouton reprend les classes .btn.btn-black du thème : on ne redéfinit donc ni sa
 * couleur ni sa typographie, seulement sa hauteur pour qu'elle épouse celle du champ.
 */
.splio-success__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/*
 * En disposition colonne, flex-basis porte sur la HAUTEUR : utiliser `flex` ici rendait
 * le champ carré. On dimensionne donc en largeur, et on fige la hauteur du flex.
 */
.splio-success__details input[type="date"] {
    width: 22rem;
    flex: 0 0 auto;
    margin: 0;
}

.splio-success__submit {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 767px) {
    .splio-success__details input[type="date"],
    .splio-success__submit {
        width: 100%;
        max-width: none;
    }
}