/* Page de vente publique.
   Couleurs pilotées par les variables --pv-* (configurées en admin). */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif&family=Inria+Serif&family=Inter:wght@400;600;700&display=swap');

:root {
    --pv-accent: var(--pv-bouton, #e2001a);
}

.pv-titre, .pv-groupe-titre, .pv-offre-titre, .pv-faq-titre,
.pv-faq-q, .pv-toggle-btn, .pv-bouton {
    font-family: var(--pv-font-titres, var(--pv-font-corps, sans-serif));
}

.pv-page {
    background: var(--pv-fond, #fbf3de);
    color: var(--pv-fond-1, #1a1a1a);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--pv-font-corps, sans-serif);
    font-feature-settings: "kern";
    --pv-fond-1: #1a1a1a;
    --pv-fond-2: rgba(0, 0, 0, .55);
    --pv-card-1: #1a1a1a;
    --pv-card-2: #3a3a3a;
    --pv-card-3: #888;
    --pv-bouton-texte: #ffffff;
    --pv-toggle-texte: #1a1a1a;
}
.pv-page.txt-fond-clair {
    --pv-fond-1: #ffffff;
    --pv-fond-2: rgba(255, 255, 255, .75);
}
.pv-page.txt-card-clair {
    --pv-card-1: #ffffff;
    --pv-card-2: rgba(255, 255, 255, .82);
    --pv-card-3: rgba(255, 255, 255, .55);
}
.pv-page.txt-bouton-clair { --pv-bouton-texte: #ffffff; }
.pv-page.txt-bouton-fonce { --pv-bouton-texte: #1a1a1a; }
.pv-page.txt-toggle-clair { --pv-toggle-texte: #ffffff; }
.pv-page.txt-toggle-fonce { --pv-toggle-texte: #1a1a1a; }

.pv-page .container {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ===== Header / Topbar ===== */
.pv-topbar {
    padding: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.pv-topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}
.pv-topbar-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
/* Logo cliquable (retour à la page d'abonnement) : pas de décoration de lien. */
.pv-topbar-logo-lien {
    display: flex;
    align-items: center;
    color: inherit;
    transition: opacity .15s;
}
.pv-topbar-logo-lien:hover { opacity: .75; }
.pv-topbar-logo-img {
    max-height: 36px;
    width: auto;
    display: block;
}
.pv-topbar-logo-svg {
    height: 36px;
    display: flex;
    align-items: center;
}
.pv-topbar-logo-svg svg {
    height: 36px;
    width: auto;
    display: block;
}
.pv-topbar-logo-svg svg,
.pv-topbar-logo-svg svg * { fill: currentColor !important; }
.pv-topbar-actions {
    display: flex;
    align-items: center;
}
/* Zone burger : simple wrapper autour de .pv-topbar-actions. Le burger lui-même
   est masqué par défaut (bouton "Se connecter" seul → pas besoin de burger) ;
   seul .pv-vente l'active en mobile (cf. media 900px), où le header est plus
   chargé (liens décoratifs + connexion). */
.pv-topbar-burger-zone { position: relative; display: flex; align-items: center; }
.pv-topbar-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.pv-topbar-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.pv-compte { color: var(--pv-fond-2); font-size: .85rem; }

/* Bouton "Se connecter" — pilule outlined */
.pv-connexion {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1.5px solid var(--pv-fond-1);
    border-radius: 999px;
    padding: .5rem 1.25rem;
    font-weight: 600;
    font-size: .83rem;
    letter-spacing: .01em;
    color: var(--pv-fond-1);
    text-decoration: none;
    transition: background .18s, color .18s;
}
.pv-connexion:hover {
    background: var(--pv-fond-1);
    color: var(--pv-fond, #fff);
    opacity: 1;
}

/* Menu déroulant « Mon compte » */
.pv-compte-menu { position: relative; }
.pv-compte-bouton {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: transparent;
    border: 1.5px solid var(--pv-fond-1);
    border-radius: 999px;
    color: var(--pv-fond-1);
    font-weight: 600;
    font-size: .83rem;
    padding: .5rem 1.25rem;
    cursor: pointer;
    line-height: 1;
    letter-spacing: .01em;
    transition: background .18s, color .18s;
}
.pv-compte-bouton:hover {
    background: var(--pv-fond-1);
    color: var(--pv-fond, #fff);
}
.pv-compte-chevron { font-size: .65rem; }
.pv-compte-liste {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    min-width: 180px;
    background: #fff;
    color: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .13);
    border: 1px solid rgba(0, 0, 0, .07);
    padding: .35rem;
    z-index: 50;
}
.pv-compte-item {
    display: block;
    padding: .5rem .8rem;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
}
.pv-compte-item:hover { background: #f4f4f4; }
.pv-compte-item.is-active { background: #f4f4f4; color: var(--pv-accent); }
.pv-compte-sep { margin: .35rem 0; border: 0; border-top: 1px solid #eee; }
.pv-compte-deco { color: #c0392b; }

/* Espace compte — fil d'Ariane discret (le maillon courant est le seul appuyé) */
.pv-fil { margin-bottom: .9rem; }
.pv-fil a { color: #6b7280; }
.pv-fil a:hover { color: #363636; }
.pv-fil li.is-active a { color: #363636; font-weight: 600; cursor: default; }

.compte-page .button,
.compte-page .button.is-primary {
    background: #6b7280;
    color: #fff;
    border: 1px solid #6b7280;
    box-shadow: none;
}
.compte-page .button:hover,
.compte-page .button.is-primary:hover {
    background: #565b64;
    color: #fff;
    border-color: #565b64;
}

.pv-preview-bandeau {
    background: #ffdd57;
    color: #000;
    text-align: center;
    font-size: .82rem;
    padding: .35rem;
    font-weight: 600;
}

/* ===== En-tête ===== */
.pv-entete { padding: 2.5rem 1rem 2.5rem; }
.pv-logo { display: block; margin: 0 auto 1.5rem; max-height: 72px; width: auto; }

.pv-support-logo {
    display: block;
    margin: 0 auto 1.75rem;
    max-width: 280px;
    max-height: 110px;
}
.pv-support-logo svg { width: 100%; height: auto; max-height: 110px; display: block; }
.pv-support-logo svg, .pv-support-logo svg * { fill: currentColor !important; }
img.pv-support-logo { width: auto; object-fit: contain; }

.pv-titre {
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--pv-fond-1);
    margin-bottom: 1rem;
}
/* Pas de titre affiché saisi → on n'occupe aucune place (l'élément reste présent
   pour l'aperçu live, qui le remplit dès qu'on tape un titre). */
.pv-titre:empty { display: none; }
.pv-description {
    max-width: 620px;
    margin: 0 auto;
    color: var(--pv-fond-2);
    font-size: 1.5rem;
    line-height: 1.65;
}

/* Mise en gras */
.pv-entete strong, .pv-entete b,
.pv-description strong, .pv-description b { color: var(--pv-fond-1); }
.pv-offre strong, .pv-offre b,
.pv-faq strong, .pv-faq b { color: var(--pv-card-1); }

/* ===== Page de vente — header magazine (bandeau imposant + logo débordant) ===== */
/* La zone .pv-vente est blanche ; seuls le bandeau du haut (.pv-topbar) et le bloc
   du bas (.pv-fond-bas) reprennent la couleur « Page Fond » configurée en admin
   (--pv-fond). */
.pv-vente { background: #fff; }
.pv-vente .pv-topbar {
    background: var(--pv-fond, #fff);
    border-bottom: none;
    position: relative;
    z-index: 5;
    overflow: visible;
}
.pv-vente .pv-topbar .container { height: 120px; overflow: visible; }
.pv-vente .pv-topbar-actions { font-family: 'Bebas Neue', sans-serif; }
/* Le logo est ancré en bas de la barre puis tiré vers le bas (margin négative) :
   il déborde du header gris et empiète sur la zone blanche du contenu. */
.pv-vente .pv-topbar-logo {
    align-self: flex-end;
    margin-left: 36px;
    margin-bottom: -40px;
    overflow: visible;
}
.pv-vente .pv-topbar-logo-img,
.pv-vente .pv-topbar-logo-svg,
.pv-vente .pv-topbar-logo-svg svg { height: 105px; width: auto; max-height: none; }

/* Liens décoratifs (ajoutés en JS, cf. page.twig) + lien réel « Se connecter » */
.pv-vente-nav { display: flex; align-items: center; gap: 2.25rem; margin-right: 2rem; }
.pv-vente-nav-item {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: inherit;
}
a.pv-vente-nav-item:hover { opacity: .6; }
.pv-vente .pv-connexion,
.pv-vente .pv-compte-bouton {
    border: 0;
    padding: 0;
    border-radius: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: normal;
    color: inherit;
    letter-spacing: .03em;
}
.pv-vente .pv-connexion i { display: none; }
.pv-vente .pv-connexion:hover,
.pv-vente .pv-compte-bouton:hover { background: none; color: var(--pv-fond-1); opacity: .6; }

/* Le logo géant du header tient lieu de logo de page : celui de l'en-tête (au-dessus
   du titre) est masqué pour ne pas le dupliquer. */
.pv-vente .pv-entete .pv-logo,
.pv-vente .pv-entete .pv-support-logo { display: none; }

/* 3 zones nommées : entete et carousel empilés dans la colonne gauche (carousel
   absent → .pv-sans-carousel retombe à 2 zones, cf. plus bas), droite = colonne
   des offres, occupe les 2 lignes. En mobile (media 900px), réordonné pour que
   le carrousel passe APRÈS les offres (cf. media query). */
.pv-vente-grille {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    grid-template-areas: "entete droite" "carousel droite";
    align-items: start;
    gap: 2.5rem;
    padding: 3.5rem 0 3rem;
}
.pv-vente-grille.pv-sans-carousel { grid-template-areas: "entete droite"; }
.pv-vente-grille > .pv-entete { grid-area: entete; }
.pv-vente-grille > .pv-dernieres-parutions { grid-area: carousel; }
.pv-vente-grille > .pv-vente-droite { grid-area: droite; }
/* +36px pour retomber sur le même bord gauche que le logo du header (qui a lui
   aussi 36px de plus que le padding du .container). */
.pv-vente .pv-entete { padding: 0 0 0 36px; text-align: left; }
.pv-vente .pv-titre {
    text-align: left;
    margin-bottom: 1.25rem;
}
.pv-vente .pv-description {
    text-align: left;
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    margin: 0;
    max-width: 420px;
    font-size: 3.4rem;
    line-height: .96;
    color: var(--pv-fond-1);
}
.pv-vente .pv-description p { margin: 0; }

/* Derniers numéros (carrousel de couvertures SOGEST) : zone de grille séparée,
   pas nichée dans .pv-entete (cf. grid-template-areas) — l'espacement avec les
   zones voisines vient donc du gap de la grille, pas d'une marge ici. Même
   padding-left que .pv-entete pour garder le même bord gauche que le titre. */
.pv-vente .pv-dernieres-parutions { padding-left: 36px; }
@media (min-width: 901px) {
    /* Remonte le bloc dans la colonne gauche (2e ligne de la grille, cf.
       grid-template-areas) sans toucher au mobile, où il passe après les
       offres à une position différente. */
    .pv-vente .pv-dernieres-parutions { margin-top: -5.5rem; }
}
.pv-dernieres-parutions-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pv-fond-2);
    margin-bottom: 1rem;
}
.pv-carousel-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
}

/* Pile de couvertures : chaque item est empilé en position absolue (top:0;left:0)
   dans un conteneur dont la taille correspond à l'item « devant » ; les items
   derrière débordent en bas/à droite (cf. data-pos), sans rien à chevaucher
   depuis qu'il n'y a plus de flèches. */
.pv-carousel-stack {
    position: relative;
    width: 320px;
    height: 427px;
    flex: 0 0 auto;
}
.pv-carousel-item {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform-origin: bottom left;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .3s, filter .3s;
}
.pv-carousel-item:focus-visible { outline: 2px solid var(--pv-fond-1); outline-offset: 4px; }
.pv-carousel-couv {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 3px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
}
.pv-carousel-item[data-pos="0"] { transform: translate(-56px, 0); z-index: 50; }
.pv-carousel-item[data-pos="1"] { transform: translate(-36px, 15px) rotate(3deg) scale(.95); z-index: 40; opacity: .92; filter: brightness(.92); }
.pv-carousel-item[data-pos="2"] { transform: translate(-18px, 28px) rotate(5deg) scale(.90); z-index: 30; opacity: .8;  filter: brightness(.86); }
.pv-carousel-item[data-pos="3"] { transform: translate(-2px,  38px) rotate(7deg) scale(.86); z-index: 20; opacity: .65; filter: brightness(.8);  }
.pv-carousel-item[data-pos="4"] { transform: translate(10px,  46px) rotate(8deg) scale(.82); z-index: 10; opacity: .5;  filter: brightness(.74); }
.pv-carousel-item:not([data-pos="0"]):hover { opacity: 1; filter: none; }

.pv-carousel-infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    /* Recentré sur la pile : les couvertures sont décalées à gauche via transform
       (cf. .pv-carousel-item[data-pos]), ce qui ne bouge pas la boîte de mise en
       page dont ce bloc hérite le centrage — on corrige donc ici aussi. */
    transform: translateX(-50px);
}
.pv-carousel-numero-actif {
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 2rem;
    line-height: 1;
    color: var(--pv-fond-1);
}
.pv-carousel-dots {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pv-carousel-dot {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pv-fond-2);
    opacity: .35;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}
.pv-carousel-dot:hover { opacity: .7; }
.pv-carousel-dot.is-active { opacity: 1; transform: scale(1.4); background: var(--pv-fond-1); }

.pv-groupe .pv-offre-tete {
    align-items: flex-start;
    gap: .5rem;
    text-align: left;
}
.pv-groupe .pv-offre-support-logo { margin: 0; }

@media (max-width: 900px) {
    /* 1 colonne : le carrousel des derniers numéros passe après les cards
       d'offres (au lieu de rester sous la description, cf. desktop). */
    .pv-vente-grille {
        grid-template-columns: 1fr;
        grid-template-areas: "entete" "droite" "carousel";
        gap: 2rem;
        padding: 2.5rem 0 2rem;
    }
    .pv-vente-grille.pv-sans-carousel { grid-template-areas: "entete" "droite"; }
    /* Cards l'une sous l'autre : .pv-vente-droite .pv-offres (plus bas dans ce
       fichier, non scopé à un media) impose minmax(0,1fr) qui ne wrap jamais
       (autant de colonnes que de cartes) — spécificité accrue pour l'emporter. */
    .pv-vente-grille .pv-vente-droite .pv-offres { grid-template-columns: 1fr; }
    /* Carrousel centré en pleine largeur : les décalages en px (translate) sont
       tunés pour la colonne asymétrique du desktop (cf. plus haut), hors contexte
       ici — on les neutralise pour un centrage propre (padding-left : cf. plus
       bas, resserré en même temps que .pv-entete). */
    .pv-dernieres-parutions-label { text-align: center; }
    .pv-carousel-item[data-pos="0"] { transform: translate(-12px, 0); }
    .pv-carousel-item[data-pos="1"] { transform: translate(8px,  15px) rotate(3deg) scale(.95); }
    .pv-carousel-item[data-pos="2"] { transform: translate(26px, 28px) rotate(5deg) scale(.90); }
    .pv-carousel-item[data-pos="3"] { transform: translate(42px, 38px) rotate(7deg) scale(.86); }
    .pv-carousel-item[data-pos="4"] { transform: translate(54px, 46px) rotate(8deg) scale(.82); }
    .pv-carousel-infos { transform: none; }
    .pv-vente .pv-description { font-size: 2.2rem; max-width: none; }
    .pv-vente .pv-topbar-logo { margin-bottom: -26px; }
    .pv-vente .pv-topbar-logo-img,
    .pv-vente .pv-topbar-logo-svg,
    .pv-vente .pv-topbar-logo-svg svg { height: 62px; }
    /* Barre du haut : hauteur fixe (120px) + liens décoratifs à 1.3rem + bouton
       connexion sur une seule ligne débordaient sous ~430px de large. On bascule
       sur un burger : logo à gauche, icône burger à droite, le reste (liens +
       connexion/compte) passe dans un panneau déroulant (cf. .pv-topbar-burger
       et .pv-topbar-actions.is-ouvert plus bas). */
    .pv-vente .pv-topbar .container { height: auto; min-height: 64px; padding: .85rem 0; }
    .pv-vente .pv-topbar-burger { display: flex; margin-right: 1rem; }

    /* Panneau déroulant : toujours dans le flux (pas de display:none) pour animer
       l'ouverture en opacité/translation ; .is-ouvert bascule la visibilité réelle
       (pointer-events) en plus du visuel, pour ne pas laisser un panneau invisible
       mais cliquable/focusable en dessous. */
    .pv-vente .pv-topbar-actions {
        position: absolute;
        right: 0;
        top: calc(100% + .6rem);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        color: var(--pv-fond-1, #1a1a1a);
        border-radius: 0;
        border: 1px solid rgba(0, 0, 0, .15);
        box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
        padding: 1.25rem;
        min-width: 340px;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px) scale(.98);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .pv-vente .pv-topbar-actions.is-ouvert {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    /* Les liens décoratifs (SOCIETY+ / SOCIETY.FR) l'un sous l'autre, comme le
       reste du panneau, au lieu d'une rangée horizontale. */
    .pv-vente .pv-topbar-actions .pv-vente-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-right: 0;
    }
    /* Un seul style de « ligne » pour tout le panneau : liens décoratifs, bouton
       connexion, bouton « Mon compte » — pleine largeur, surlignage au survol,
       séparateur entre le groupe de liens et connexion/compte. */
    .pv-vente .pv-topbar-actions .pv-vente-nav-item,
    .pv-vente .pv-topbar-actions .pv-connexion,
    .pv-vente .pv-topbar-actions .pv-compte-bouton {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 1.15rem 1.25rem;
        border-radius: 0;
        font-size: 1rem;
        text-align: left;
        text-decoration: none;
        transition: background .12s;
    }
    .pv-vente .pv-topbar-actions .pv-compte-bouton { display: flex; justify-content: space-between; }
    .pv-vente .pv-topbar-actions .pv-vente-nav-item:hover,
    .pv-vente .pv-topbar-actions .pv-connexion:hover,
    .pv-vente .pv-topbar-actions .pv-compte-bouton:hover {
        background: rgba(0, 0, 0, .06);
        opacity: 1;
    }
    .pv-vente .pv-topbar-actions .pv-compte-menu { width: 100%; }
    .pv-vente .pv-topbar-actions .pv-vente-nav + * {
        margin-top: .4rem;
        padding-top: .6rem;
        border-top: 1px solid rgba(0, 0, 0, .08);
    }
    /* .pv-entete/.pv-dernieres-parutions ont un padding-left fixe de 36px (cf.
       plus haut, pour s'aligner au logo du header) plus spécifique que ne l'était
       l'ancien réglage générique à cette largeur → jamais appliqué jusqu'ici.
       On resserre explicitement, à même spécificité, pour un rendu équilibré. */
    .pv-vente .pv-entete { padding: 0 1.25rem; }
    .pv-vente .pv-dernieres-parutions { padding: 0 1.25rem; }
}

/* ===== Toggle de groupes — outlined pill avec pilule pleine ===== */
.pv-toggle {
    position: relative;
    display: flex;
    width: fit-content;
    margin: 0 auto 2.5rem;
    padding: .3rem;
    background: transparent;
    border-radius: 999px;
    border: 1.5px solid var(--pv-fond-1, #1a1a1a);
    gap: 0;
    box-shadow: none;
}
/* Pilule pleine glissante positionnée par JS */
.pv-toggle-pilule {
    position: absolute;
    top: .3rem;
    bottom: .3rem;
    left: 0;
    width: 0;
    background: var(--pv-fond-1, #1a1a1a);
    border-radius: 999px;
    box-shadow: none;
    transition:
        transform .3s cubic-bezier(0.34, 1.22, 0.64, 1),
        width .3s cubic-bezier(0.34, 1.22, 0.64, 1);
    pointer-events: none;
    will-change: transform, width;
}
.pv-toggle-btn {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: var(--pv-fond-1, #1a1a1a);
    opacity: .5;
    font-weight: bold;
    font-size: .88rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .6rem 1.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity .22s ease, color .22s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.pv-toggle-btn.is-active {
    opacity: 1;
    color: var(--pv-fond, #fff);
    box-shadow: none;
    background: transparent;
}

/* ===== Groupes / grille de cartes ===== */
.pv-groupe { padding: 0 0 2.5rem; }
.pv-groupe[hidden] { display: none !important; }
.pv-groupe-titre {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--pv-fond-1);
    text-align: center;
    margin-bottom: 1.75rem;
}
.pv-offres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1040px;
    margin: 0 auto;
}

/* Carte « Offrez un abonnement » : pleine largeur, sous les offres */
.pv-cadeau-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    max-width: 1040px;
    margin: 1.5rem auto 0;
    padding: 1.1rem 1.5rem;
    /* Même contour, rayon et ombre que les cards d'offre (.pv-offre). */
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .07);
    background: var(--pv-card-bg, #fff);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .04),
        0 4px 16px rgba(0, 0, 0, .06);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition:
        box-shadow .28s ease,
        border-color .28s;
}
.pv-cadeau-card:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, .05),
        0 16px 48px rgba(0, 0, 0, .12);
    border-color: rgba(0, 0, 0, .1);
    color: inherit;
}
.pv-cadeau-icone {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--pv-accent, currentColor);
}
.pv-cadeau-texte {
    font-size: 1.1rem;
}

/* Bandeau moyens de paiement */
.pv-paiements {
    text-align: center;
    margin: 2.5rem auto 0;
    max-width: 1040px;
    color: var(--pv-fond-2);
    font-size: .85rem;
}
.pv-paiements img {
    max-width: min(100%, 440px);
    height: auto;
    display: inline-block;
    margin-top: .75rem;
    opacity: .85;
}

/* ===== Accueil (racine /) ===== */
.pv-accueil {
    max-width: 580px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.pv-accueil-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--pv-card-bg, #fff);
    color: var(--pv-card-1, #1a1a1a);
    border-radius: 14px;
    padding: 1.1rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: none;
    font-weight: 600;
    transition: border-color .18s, transform .18s cubic-bezier(.2,.8,.4,1);
}
.pv-accueil-card:hover {
    border-color: rgba(0, 0, 0, .22);
    transform: translateY(-2px);
    color: var(--pv-card-1, #1a1a1a);
}
.pv-accueil-titre { font-size: 1.05rem; }
.pv-accueil-card .icon { color: var(--pv-accent, #e2001a); }

/* ===== Tunnel de souscription — direction artistique « page de vente » =====
   Reprend le langage visuel de la page de vente refondue : Bebas Neue pour les
   titres et boutons, Instrument Serif pour les bénéfices, prix en Inria Serif,
   cartes blanches à filet fin, boutons plats noirs. CSS seul, structure et
   logique du tunnel inchangées. Couleurs volontairement explicites (le panneau
   reste clair quel que soit le thème de la page). */
.pv-tunnel .title { color: var(--pv-fond-1); }
.pv-tunnel .subtitle { color: var(--pv-fond-2); }

/* -- Fil d'Ariane -- */
.pv-tunnel .souscription-fil {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .76rem;
}
.pv-tunnel .souscription-fil li.is-active a {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: .1em;
    font-size: .95rem;
}

/* -- Carte de rappel de l'offre (colonne gauche) -- */
.souscription-offre .pv-offre {
    background: #fff;
    color: #3a3a3a;
    border-radius: 10px;
    border-color: #fff;
    box-shadow: 0 0 0 1px #ececec;
    padding: 1.75rem 1.5rem;
    gap: .9rem;
}
.souscription-offre .pv-offre:hover { box-shadow: 0 0 0 1px #e0e0e0; }
.souscription-offre .pv-offre-titre {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: .015em;
    color: #212121;
}
.souscription-offre .pv-offre-soustitre {
    font-family: 'Inter', sans-serif;
    color: #8a8a8a;
}
.souscription-offre .pv-offre-prix {
    font-weight: 400;
    letter-spacing: 0;
    color: #1a1a1a;
    padding-top: .9rem;
    border-top-color: #ececec;
}
.souscription-offre .pv-offre-prix-normal {
    font-family: 'Inria Serif', serif;
    font-size: 2.4rem;
}
.souscription-offre .pv-offre-prix-euro {
    font-family: 'Inria Serif', serif;
    font-weight: 400;
}
.souscription-offre .pv-offre-prix-barre {
    font-size: 1.15rem;
    font-weight: 400;
    color: #b0b0b0;
}
.souscription-offre .pv-offre-description { color: #555; }
/* Bénéfices : sérif éditorial + coche simple (pas de pastille colorée) */
.souscription-offre .pv-benefices-bloc { border-top-color: #ececec; }
.souscription-offre .pv-benefices li {
    font-family: 'Instrument Serif', serif;
    font-size: 1.15rem;
    line-height: 1.4;
    color: #1a1a1a;
}
.souscription-offre .pv-benefices li::before {
    content: "✓";
    background: none;
    box-shadow: none;
    border-radius: 0;
    width: auto;
    height: auto;
    color: #1a1a1a;
    font-size: .78rem;
    margin-top: .18rem;
}
.souscription-offre .pv-offre-mention {
    font-style: italic;
    color: #8a8a8a;
    max-width: none;
}
.souscription-offre .pv-offre-zone {
    background: #f4f4f4;
    border-color: #ececec;
    color: #666;
}

/* -- Boîtes d'étape -- */
.pv-tunnel .box {
    background: #fff;
    color: #3a3a3a;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: none;
}
.pv-tunnel .box .title { color: #1a1a1a; }
.pv-tunnel .box .subtitle,
.pv-tunnel .box h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 1.25rem;
    color: #1a1a1a;
}
.pv-tunnel .box strong, .pv-tunnel .box b { color: #1a1a1a; }

/* -- Champs de formulaire -- */
.pv-tunnel .label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: 700;
    color: #6a6a6a;
}
.pv-tunnel .input,
.pv-tunnel .select select,
.pv-tunnel .textarea {
    border-radius: 2px;
    border-color: #d8d8d8;
    box-shadow: none;
}
.pv-tunnel .input:focus,
.pv-tunnel .select select:focus,
.pv-tunnel .textarea:focus {
    border-color: #1a1a1a;
    box-shadow: none;
}

/* -- Boutons : plats, noirs, Bebas Neue (comme la CTA de la page de vente) -- */
.pv-tunnel .button { border-radius: 2px; }
.pv-tunnel .button.is-primary,
.pv-tunnel .button.is-link {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 1.15rem;
    height: auto;
    padding: .55em 1.4em;
    transition: filter .15s;
}
.pv-tunnel .button.is-primary:hover,
.pv-tunnel .button.is-link:hover { filter: brightness(.85); }

/* Tunnel — mobile : marges extérieures réduites + plus aucun débordement horizontal. */
@media (max-width: 768px) {
    .pv-tunnel .section { padding: 1.25rem .75rem; }
    .pv-tunnel .container { padding-left: .75rem; padding-right: .75rem; }
    /* Les colonnes empilées passent pleine largeur (la card n'est plus figée à 340px). */
    .souscription-offre .pv-offres { max-width: none !important; }
    .souscription-tunnel .column { padding-left: 0; padding-right: 0; }
    /* Boutons groupés (bannière d'adresse, navigation) : retour à la ligne autorisé
       pour ne pas imposer une largeur mini supérieure à l'écran. */
    .pv-tunnel .field.is-grouped { flex-wrap: wrap; }
    .pv-tunnel .field.is-grouped > .control { margin-bottom: .5rem; }
    /* La carte d'offre resserre ses marges intérieures sur petit écran. */
    .pv-tunnel .pv-offre { padding: 1.5rem 1.25rem; }
    /* Prix moins imposant en mobile (spécificité accrue pour passer devant la règle
       de base .pv-offre-prix définie plus bas dans la feuille). */
    .pv-page .pv-offre-prix { font-size: 1.6rem; }
    .pv-page .pv-offre-prix-euro { font-size: 1rem; }
    .pv-page .pv-offre-prix-barre { font-size: 1.05rem; }
}

/* ===== Carte d'offre ===== */
.pv-offre {
    position: relative;
    background: var(--pv-card-bg, #fff);
    color: var(--pv-card-2);
    border-radius: 5px;
    padding: 2.25rem 2rem;
    /* Largeur max d'une card (utile quand une seule offre occuperait toute la
       colonne) ; centrée dans sa cellule de grille. */
    width: 100%;
    max-width: 600px;
    justify-self: center;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .04),
        0 4px 16px rgba(0, 0, 0, .06);
    text-align: center;
    transition:
        box-shadow .28s ease,
        border-color .28s;
}
.pv-offre:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, .05),
        0 16px 48px rgba(0, 0, 0, .12);
    border-color: rgba(0, 0, 0, .1);
}
.pv-page.txt-card-clair .pv-offre { background: var(--pv-card-bg, #1f1f1f); }

.pv-offre-tete { min-height: 3rem; }
/* Logo du support, au-dessus du nom de l'offre. */
.pv-offre-support-logo {
    display: block;
    max-height: 40px;
    width: auto;
    max-width: 70%;
    margin: 0 auto .6rem;
    object-fit: contain;
}
.pv-offre-titre {
    font-size: 1.35rem;
    letter-spacing: -.01em;
    color: var(--pv-card-1);
}
.pv-offre-soustitre {
    font-size: .75rem;
    color: var(--pv-card-3);
    font-weight: 500;
    margin-top: .25rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.pv-offre-image {
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 10px;
}

/* Prix — séparé visuellement du reste */
.pv-offre-prix {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--pv-card-1);
    line-height: 1;
    letter-spacing: -.04em;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.pv-page.txt-card-clair .pv-offre-prix { border-top-color: rgba(255, 255, 255, .12); }
.pv-offre-prix-euro { font-size: 1.2rem; font-weight: 700; letter-spacing: 0; vertical-align: .15em; }
.pv-offre-prix-barre {
    /* Prix barré sous le prix normal. */
    display: block;
    margin-top: .3rem;
    font-size: 2rem;
    font-weight: 500;
    color: var(--pv-card-3);
    text-decoration: line-through;
    letter-spacing: 0;
}

/* Page de vente : corps de card en deux colonnes — prix à gauche (40 %),
   description à droite (60 %). Empilé partout ailleurs (tunnel, retour…). */
.pv-groupe .pv-offre-corps {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: left;
}
.pv-groupe .pv-offre-corps .pv-offre-prix {
    flex: 0 0 40%;
    padding-top: 0;
    border-top: 0;
    text-align: right;
}
/* Le symbole € reste collé au montant (jamais seul à la ligne). */
.pv-offre-prix-normal { white-space: nowrap; font-size: 2.3rem; font-family: 'Inria Serif', serif; }
.pv-groupe .pv-offre-corps .pv-offre-description {
    flex: 0 0 60%;
    margin: 0;
    /* Petit séparateur discret entre le prix et la description. */
    padding-left: .75rem;
    border-left: 1px solid rgba(0, 0, 0, .08);
}
.pv-page.txt-card-clair .pv-groupe .pv-offre-corps .pv-offre-description {
    border-left-color: rgba(255, 255, 255, .12);
}

/* Pastille de réduction */
.pv-offre-reduction {
    position: absolute;
    top: -1.0rem;
    right: -0.8rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    /* Contour dentelé façon « sceau » : étoile à dents pointues (R extérieur/intérieur). */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%23e62b4a" points="50.00,1.00 57.22,13.71 68.75,4.73 70.56,19.24 84.65,15.35 80.76,29.44 95.27,31.25 86.29,42.78 99.00,50.00 86.29,57.22 95.27,68.75 80.76,70.56 84.65,84.65 70.56,80.76 68.75,95.27 57.22,86.29 50.00,99.00 42.78,86.29 31.25,95.27 29.44,80.76 15.35,84.65 19.24,70.56 4.73,68.75 13.71,57.22 1.00,50.00 13.71,42.78 4.73,31.25 19.24,29.44 15.35,15.35 29.44,19.24 31.25,4.73 42.78,13.71"/></svg>') center / contain no-repeat;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transform: rotate(10deg);
}

/* Badge promotionnel */
.pv-offre-badge {
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: #b80000;
    color: #ffffff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .35rem 1rem;
    box-shadow: none;
}

/* Description */
.pv-offre-support {
    font-size: .8rem;
    font-weight: 700;
    color: var(--pv-card-1);
    margin-bottom: .35rem;
}
/* Sur la page de vente, le support est déjà identifié (logo/titre) → on masque le
   nom du support dans chaque card d'offre. */
.pv-groupe .pv-offre-support { display: none; }
.pv-offre-description {
    font-size: .88rem;
    color: var(--pv-card-2);
    line-height: 1.55;
    margin-bottom: 0 !important;
}

/* Bouton */
.pv-bouton {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--pv-bouton, #ffd400);
    color: var(--pv-bouton-texte, #1a1a1a);
    border: 0;
    border-radius: 999px;
    padding: .72rem 2.1rem;
    font-weight: 800;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .04em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: filter .18s, transform .18s cubic-bezier(.2, .8, .4, 1);
}
.pv-bouton:hover {
    filter: brightness(.82);
    transform: translateY(-2px);
}
.pv-bouton:active {
    transform: translateY(0);
}
.pv-bouton[disabled] { opacity: .6; cursor: default; transform: none; }

/* Bénéfices : liste à coches en pastilles */
/* Bloc dépliable « Voir les bénéfices » */
.pv-benefices-bloc {
    margin-top: .1rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}
.pv-page.txt-card-clair .pv-benefices-bloc { border-top-color: rgba(255, 255, 255, .1); }
.pv-benefices-toggle {
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .85rem 0 .15rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--pv-card-2);
    transition: opacity .15s;
}
.pv-benefices-toggle:hover { opacity: .7; }
.pv-benefices-toggle::-webkit-details-marker { display: none; }
.pv-benefices-toggle::after {
    content: "▾";
    flex-shrink: 0;
    font-size: .9rem;
    line-height: 1;
    transition: transform .25s cubic-bezier(.34,1.22,.64,1);
}
.pv-benefices-bloc[open] .pv-benefices-toggle::after { transform: rotate(180deg); }
/* Variante dépliée (tunnel) : bénéfices toujours visibles, plus rien à ouvrir. */
.pv-benefices-bloc.is-deplie > .pv-benefices-toggle { display: none; }
.pv-benefices-bloc.is-deplie > .pv-benefices { padding-top: .85rem; }

.pv-benefices {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding-top: .75rem;
}
.pv-benefices li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .87rem;
    color: var(--pv-card-2);
    line-height: 1.4;
}
.pv-benefices li::before {
    content: "✓";
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--pv-accent);
    border-radius: 50%;
    color: #fff;
    font-size: .58rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.pv-offre-zone {
    margin-top: auto;
    align-self: center;
    display: inline-block;
    font-size: .67rem;
    color: var(--pv-card-2);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    background: rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 999px;
    padding: .22rem .85rem;
}

/* Mention légale — effet tag (comme la zone/pays) */
.pv-offre-mention {
    max-width: 70%;
    margin-top: .5rem;
    align-self: center;
    display: inline-block;
    font-size: .72rem;
    line-height: 1.4;
    /* font-weight: 600; */
    color: var(--pv-card-2);
    padding: .3rem .85rem;
}
.pv-offre-zone + .pv-offre-mention { margin-top: .35rem; }
.pv-offre > .pv-offre-mention:last-child { margin-top: auto; }

/* ===== Liens (cards bas de page) ===== */
/* Bloc bas (liens + FAQ + footer) : reprend la couleur « Page Fond » (--pv-fond). */
.pv-fond-bas {
    width: 100%;
    margin-top: 3rem;
    padding-top: 1px; /* évite le margin-collapse */
    background: var(--pv-fond, #fff);
}
.pv-fond-bas .container {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.pv-liens-groupe {
    max-width: 1040px;
    margin: 0 auto 0;
    padding-bottom: 1.5rem;
}
.pv-liens-titre {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -.015em;
    color: var(--pv-fond-1);
    text-align: center;
    margin-bottom: 2rem;
}
.pv-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
/* Les cartes se répartissent pour occuper 100 % de la largeur : ~4 par ligne, mais
   elles s'étirent quand il y en a moins (2 → 50 % chacune, 3 → un tiers…). */
.pv-liens > .pv-lien-card { flex: 1 1 calc(25% - .75rem); }
@media (max-width: 900px) {
    .pv-liens > .pv-lien-card { flex-basis: calc(50% - .5rem); }
}
@media (max-width: 540px) {
    .pv-liens > .pv-lien-card { flex-basis: 100%; }
}
/* Variante « liste » : une carte par ligne, pleine largeur. */
.pv-liens.is-liste { flex-direction: column; }
.pv-liens.is-liste > .pv-lien-card { flex: 1 1 auto; }
.pv-liens.is-liste .pv-lien-card { flex-direction: row; align-items: stretch; }
.pv-liens.is-liste .pv-lien-image { width: 200px; height: auto; flex: 0 0 auto; }
.pv-liens.is-liste .pv-lien-corps { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 540px) {
    .pv-liens.is-liste .pv-lien-card { flex-direction: column; }
    .pv-liens.is-liste .pv-lien-image { width: 100%; height: 140px; }
}

/* Card lien */
.pv-lien-card {
    display: flex;
    flex-direction: column;
    background: var(--pv-card-bg, #fff);
    color: var(--pv-card-2);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #f9f7f1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    transition:
        box-shadow .24s ease,
        border-color .24s ease,
        transform .24s cubic-bezier(.2,.8,.4,1);
    text-decoration: none;
}
.pv-lien-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
    border-color: rgba(0, 0, 0, .14);
    transform: translateY(-3px);
}
.pv-page.txt-card-clair .pv-lien-card { background: #1f1f1f; }

/* Image avec zoom au hover */
.pv-lien-image {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.pv-lien-card:hover .pv-lien-image {
    transform: scale(1.04);
}

.pv-lien-corps {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.pv-lien-titre {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--pv-card-1);
    letter-spacing: -.01em;
    line-height: 1.3;
    text-align: center;
}
.pv-lien-desc {
    font-size: .82rem;
    color: var(--pv-card-2);
    line-height: 1.45;
    margin-top: auto;
    padding-top: .35rem;
}
.pv-lien-card.a-image .pv-lien-decouvrir {
    display: block;
    margin-top: auto;
    padding: .2rem .2rem;
    background: #1a1a1a;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: .06em;
    transition: background .15s;
}
.pv-lien-card.a-image:hover .pv-lien-decouvrir { background: #3a3a3a; }

/* Carte sans image (CTA) */
.pv-lien-card:not(.a-image) {
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    padding: 1.1rem 1.5rem;
}
.pv-lien-card:not(.a-image) .pv-lien-corps {
    padding: 0;
    text-align: center;
}
/* Filet au-dessus du titre uniquement quand il y a une image */
.pv-lien-card.a-image .pv-lien-titre {
    /* padding-top: .75rem; */
    /* border-top: 1px solid rgba(0, 0, 0, .1); */
}

.pv-lien-card:not(.a-image) .pv-lien-titre {
    font-size: 1.2rem; /* 2× le titre normal (.92rem) pour une card CTA sans image */
    letter-spacing: .01em;
}

/* ===== FAQ — rendu éditorial premium (cartes sur fond de page) =====
   Structure et logique inchangées : <details>/<summary> natifs, aucun JS.
   Palette locale, chaude et désaturée, indépendante du thème de la page. */
.pv-faq {
    --faq-encre:    #20232E;   /* noir légèrement bleuté */
    --faq-sourdine: rgba(32, 35, 46, .58);
    --faq-terre:    #B06A3B;   /* accent chaud, discret */
    --faq-peche:    #F4E5D5;   /* pastel du cercle d'icône */
    --faq-trait:    rgba(43, 38, 30, .07);

    max-width: 900px;
    margin: 3.5rem auto 1rem;
    padding: 1rem 0 2rem;
    /* L'en-tête est posé sur le fond de page : il suit la couleur de contraste
       de la page (--pv-fond-1/2), les cartes gardent leur propre encre foncée. */
    color: var(--pv-fond-1, #20232E);
}

/* En-tête : badge discret + grand titre serif + sous-titre */
.pv-faq-entete {
    text-align: center;
    margin-bottom: 2.75rem;
}
.pv-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--faq-terre);
}
/* Petits traits éditoriaux de part et d'autre du badge */
.pv-faq-badge::before,
.pv-faq-badge::after {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}
.pv-faq-titre {
    font-family: 'Instrument Serif', 'Inria Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.1rem, 4.4vw, 2.95rem);
    line-height: 1.06;
    letter-spacing: -.01em;
    color: inherit;
    text-align: center;
    margin: .75rem 0 0;
    padding: 0;
}
.pv-faq-sous {
    margin: .85rem auto 0;
    max-width: 34rem;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--pv-fond-2, rgba(32, 35, 46, .58));
}

/* Liste de cartes */
.pv-faq-liste {
    position: relative;
}
.pv-faq-item {
    background: #FFF;
    border: 1px solid var(--faq-trait);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.pv-faq-item + .pv-faq-item { margin-top: 1.15rem; }
@media (hover: hover) {
    .pv-faq-item:hover {
        transform: translateY(-2px);
        background: #fff;
        box-shadow:
            0 2px 4px rgba(30, 25, 18, .04),
            0 20px 38px -18px rgba(30, 25, 18, .22);
    }
}

.pv-faq-q {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.2rem 1rem;
    font-family: var(--pv-font-corps, 'Inter', sans-serif);
    user-select: none;
}
.pv-faq-q::-webkit-details-marker { display: none; }

/* Cercle pastel + icône « ? » (Font Awesome, déjà chargé) */
.pv-faq-q::before {
    content: "\f128"; /* fa-question */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .82rem;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background: var(--faq-peche);
    color: var(--faq-terre);
    margin-top: -.1rem;
}

.pv-faq-q-txt {
    flex: 1;
    min-width: 0;
    font-size: 1.06rem;
    line-height: 1.45;
    color: var(--faq-encre);
}

/* Contrôle +/− à l'extrême droite */
.pv-faq-q::after {
    content: "+";
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-content: center;
    border-radius: 50%;
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1;
    color: var(--faq-encre);
    background: rgba(43, 38, 30, .05);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .25s ease, color .25s ease;
}
.pv-faq-item[open] .pv-faq-q::after {
    transform: rotate(135deg);
    background: var(--faq-encre);
    color: #fff;
}

/* Réponse : le <details> natif masque ce bloc à la fermeture ; on ne peut donc
   animer que l'ouverture (l'élément apparaît) → animation d'entrée douce. */
.pv-faq-r {
    padding: 0 1rem 1.6rem calc(1rem + 2.1rem + 1.1rem);
    color: var(--faq-sourdine);
    font-size: .96rem;
    line-height: 1.7;
}
.pv-faq-item[open] > .pv-faq-r {
    animation: pv-faq-ouvre .3s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes pv-faq-ouvre {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pv-faq-r > :first-child { margin-top: 0; }
.pv-faq-r > :last-child { margin-bottom: 0; }
.pv-faq .pv-faq-r a {
    color: var(--faq-terre);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Gras lisible sur le panneau clair, quel que soit le thème de page */
.pv-faq strong, .pv-faq b { color: var(--faq-encre); }

@media (prefers-reduced-motion: reduce) {
    .pv-faq-item,
    .pv-faq-q::after { transition: none; }
    .pv-faq-item[open] > .pv-faq-r { animation: none; }
}

@media (max-width: 640px) {
    .pv-faq {
        margin-top: 2.5rem;
        padding: 2.25rem .15rem 2.5rem;
        border-radius: 22px;
    }
    .pv-faq-entete { margin-bottom: 2rem; }
    .pv-faq-q {
        padding: 1.15rem 1.15rem;
        gap: .85rem;
    }
    .pv-faq-q::before { width: 1.9rem; height: 1.9rem; }
    .pv-faq-q::after  { width: 1.9rem; height: 1.9rem; font-size: 1.2rem; }
    .pv-faq-q-txt { font-size: 1rem; }
    .pv-faq-r {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }
}

/* ===== Fil d'Ariane du tunnel de souscription ===== */
.souscription-fil { justify-content: center; margin-bottom: 1.75rem; }
.souscription-fil a { color: var(--pv-fond-2); }
.souscription-fil li.is-active a { color: var(--pv-fond-1); font-weight: 600; }
.souscription-fil a.is-avenir { opacity: .55; pointer-events: none; }
.souscription-fil li + li::before { color: var(--pv-fond-2); content: "\203A"; } /* › au lieu du / par défaut */

/* Interstitiel « vous êtes déjà abonné » : rappel des abonnements en cours. */
.souscription-abos { list-style: none; margin: 0; }
.souscription-abos li {
    padding: .6rem .8rem;
    border-left: 3px solid var(--pv-accent, #3273dc);
    background: rgba(0, 0, 0, .03);
    border-radius: 0 4px 4px 0;
}
.souscription-abos li + li { margin-top: .5rem; }

.pv-vide { padding: 4rem 0; color: var(--pv-fond-2); }

.pv-footer {
    margin-top: auto;
    padding: 3rem 1rem;
    background: #fff;
    color: rgba(0, 0, 0, .5);
    border-top: 1px solid rgba(0, 0, 0, .07);
    font-size: .88rem;
}

/* Mobile/tablette : cards d'offres centrées (colonnes bornées, plus de 1fr qui
   étire et cale la dernière card à gauche). */
@media (max-width: 768px) {
    .pv-offres {
        grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
        justify-content: center;
    }
}
@media (max-width: 640px) {
    .pv-entete { padding: 1.75rem 1rem 1.75rem; }
    .pv-titre { font-size: 2rem; }
    /* Cards pleine largeur DANS le conteneur : on supprime juste la marge de
       centrage interne de la grille (le padding latéral du conteneur est conservé). */
    .pv-offres {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        max-width: none;
    }
    .pv-offre { max-width: none; padding: 1.65rem 1.4rem; }
}
@media (max-width: 420px) {
    .pv-titre { font-size: 1.75rem; }
}

/* ===== Page de vente — colonne abonnement, esthétique éditoriale compacte ===== */
.pv-vente-droite .pv-toggle {
    border: 1px solid rgb(210, 210, 210);
    background: #fff;
    margin: 0 auto 1.5rem;
    padding: .25rem;
}
.pv-vente-droite .pv-toggle-btn {
    opacity: 1;
    color: var(--pv-fond-1);
    padding: .45rem 1.4rem;
    font-size: .78rem;
    font-family: 'Inter', sans-serif;
}
.pv-vente-droite .pv-toggle-btn.is-active {
    color: var(--pv-fond, #fff);
    font-family: 'Inter', sans-serif;
    font-weight: bold;
}

/* Phrase d'accroche déplacée juste au-dessus des cartes par le script (cf. page.twig). */
.pv-vente-accroche {
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 1rem;
    color: var(--pv-fond-1);
}
.pv-vente-accroche p { margin: 0; }

.pv-vente-droite .pv-groupe { padding-bottom: 1.25rem; }
.pv-vente-droite .pv-offres {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
    max-width: none;
}
.pv-vente-droite .pv-groupe .pv-offre {
    cursor: pointer;
    max-width: none;
    padding: .75rem 1.15rem;
    gap: .4rem;
    text-align: center;
    /* Les 2 cartes d'une même ligne sont étirées à hauteur égale par la grille :
       on force explicitement le contenu à démarrer en haut (comme la carte de
       gauche), la mention (margin-top: auto) absorbant seule l'espace restant. */
    justify-content: flex-start;
    border-radius: 10px;
    border-color: transparent;
    box-shadow: none;
}
.pv-vente-droite .pv-groupe .pv-offre-radio {
    display: inline-block;
    position: relative;
    align-self: flex-start;
    margin-top: .2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .25);
    background: #fff;
    flex-shrink: 0;
}
/* Masqué temporairement à la demande — retirer cette ligne pour le faire réapparaître. */
.pv-vente-droite .pv-groupe .pv-offre-radio { display: none; }
/* Effet « radio coché » : l'anneau se fonce et un point plein apparaît au centre. */
.pv-vente-droite .pv-groupe .pv-offre.is-selectionnee .pv-offre-radio {
    border-color: #fce98a;
}
.pv-vente-droite .pv-groupe .pv-offre.is-selectionnee .pv-offre-radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: #fce98a;
    transform: translate(-50%, -50%);
}
.pv-vente-droite .pv-groupe .pv-offre-soustitre,
.pv-vente-droite .pv-groupe .pv-offre-description,
.pv-vente-droite .pv-groupe .pv-offre-image,
.pv-vente-droite .pv-groupe .pv-offre-zone,
.pv-vente-droite .pv-groupe .pv-offre-support-logo,
.pv-vente-droite .pv-groupe .pv-benefices-bloc,
.pv-vente-droite .pv-groupe .pv-bouton { display: none; }

/* Hauteur fixée pour 2 lignes de titre max : les cartes restent alignées entre
   elles qu'un titre tienne sur 1 ou 2 lignes, avec le titre (+ le radio) centrés
   verticalement dans cet espace (align-items: center, cf. .pv-groupe .pv-offre-tete). */
.pv-vente-droite .pv-groupe .pv-offre-tete {
    order: 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 2rem × line-height 1.25 × 2 lignes = 5rem, cf. commentaire ci-dessus. */
    min-height: 5rem;
    text-align: center;
}
.pv-vente-droite .pv-groupe .pv-offre-titre {
    /* min-width:0 : sans ça, en enfant flex de .pv-offre-tete (display:flex),
       le titre garde son min-width:auto par défaut (= largeur sur une seule
       ligne) et ne se contraint plus correctement à la largeur de la carte. */
    width: 100%;
    min-width: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: #212121;
    text-align: center;
    letter-spacing: .015em;
    line-height: 1.25;
}
.pv-vente-droite .pv-groupe .pv-offre-corps {
    order: 2;
    display: block;
    text-align: center;
}
.pv-vente-droite .pv-groupe .pv-offre-corps .pv-offre-prix {
    flex: none;
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: 1.3rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
/* Repasse le prix barré sur la même ligne (au lieu d'un bloc en dessous) ; l'ordre
   visuel « prix normal au centre, barré derrière » vient du row-reverse ci-dessus
   (DOM : normal puis barré → visuellement barré avant, normal après/au centre). */
.pv-vente-droite .pv-groupe .pv-offre-prix-barre {
    display: inline;
    margin-top: 0;
    font-size: 1rem;
}
.pv-vente-droite .pv-groupe .pv-offre-mention {
    order: 3;
    max-width: 100%;
    /* Pousse la mention en bas de la carte (flex-column) quel que soit le contenu
       au-dessus, y compris quand les cartes d'une même ligne sont étirées à la
       même hauteur (comportement par défaut d'une grille CSS). */
    margin-top: auto;
    padding-top: .2rem;
    font-style: italic;
    font-size: .68rem;
    color: var(--pv-card-3);
}

/* Bloc = carte + sa colonne de bénéfices, empilées (cf. page.twig) : la carte
   garde sa propre boîte discrète (fond blanc, liseré gris clair, cf. .pv-offre),
   et c'est CE bloc — pas la carte seule — qui porte le rectangle de sélection,
   pour englober carte + bénéfices dans un même carré. */
/* Même traitement que la bordure de .pv-offre en contexte compact (border 1px,
   pas de box-shadow) : transparente au repos (réserve l'espace), colorée en
   var(--pv-fond-1) une fois sélectionnée — cf. .pv-vente-droite .pv-groupe .pv-offre. */
.pv-groupe-carte-bloc {
    position: relative; /* ancre .pv-offre-badge (déplacé ici, cf. page.twig) */
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: .6rem;
    border: 1px solid #eee;
    border-radius: 12px;
    transition: border-color .2s ease;
}
.pv-groupe-carte-bloc.is-selectionnee {
    border: 1px solid #7b7b7b;
}

/* Bénéfices dupliqués sous chaque carte par le script (une colonne par offre),
   texte réduit + coche noire simple (pas de pastille colorée). */
.pv-groupe-benefices-col {
    padding-top: 1.1rem;
}
/* Titre « Bénéfices » avec traits de part et d'autre, même effet que .pv-faq-badge. */
.pv-groupe-benefices-titre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: fit-content;
    margin: 0 auto .6rem;
    font-family: 'Instrument Serif', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--pv-fond-1, #1a1a1a);
}
.pv-groupe-benefices-titre::before,
.pv-groupe-benefices-titre::after {
    content: "";
    width: 48px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}
.pv-groupe-benefices-col .pv-benefices { gap: .5rem; }
.pv-groupe-benefices-col .pv-benefices li {
    font-family: 'Instrument Serif', serif;
    font-size: 1.3rem;
    line-height: 1.45;
    gap: .45rem;
    color: var(--pv-fond-1, #1a1a1a);
}
.pv-groupe-benefices-col .pv-benefices li::before {
    content: "✓";
    background: none;
    box-shadow: none;
    color: var(--pv-fond-1, #1a1a1a);
    width: auto;
    height: auto;
    border-radius: 0;
    font-size: .72rem;
    font-weight: 900;
    margin-top: .05rem;
}

/* CTA partagée (agit sur l'offre sélectionnée) + carte cadeau assortie :
   boutons plats, rectangulaires, hauteur fixe ~40px. */
.pv-groupe-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    margin-top: 1.5rem;
    padding: .3rem 1rem;
    border: 0;
    border-radius: 1px;
    background: #1a1a1a;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: .06em;
    cursor: pointer;
    transition: filter .15s;
}
.pv-groupe-cta:hover { filter: brightness(.9); }
.pv-groupe-cta:disabled { opacity: .5; cursor: not-allowed; }

.pv-vente-droite .pv-cadeau-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: .6rem 0 0;
    max-width: none;
    padding: .3rem 1rem;
    background: #ececec;
    color: var(--pv-fond-1, #1a1a1a);
    border: 0;
    box-shadow: none;
    border-radius: 1px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: .06em;
    transition: background .15s;
}
.pv-vente-droite .pv-cadeau-card:hover { background: #e2e2e2; }
.pv-vente-droite .pv-cadeau-icone { display: none; }
/* .pv-cadeau-texte a son propre font-size ailleurs (1.1rem) qui prime sinon sur
   l'héritage depuis .pv-cadeau-card : on le réaligne ici sur la taille de S'abonner. */
.pv-vente-droite .pv-cadeau-texte { font-size: 2rem; }

.pv-vente-droite .pv-paiements {
    margin: 1.75rem 0 0;
    max-width: none;
    text-align: center;
}
.pv-vente-droite .pv-paiements img { max-width: 340px; }

@media (max-width: 640px) {
    .pv-groupe-benefices { grid-template-columns: 1fr !important; gap: 1.25rem; }
}