/* Page de vente publique.
Couleurs pilotées par les variables --pv-* (configurées en admin). */
/* Polices fixes (Bebas Neue, Instrument Serif, Inria Serif, Inter — licence SIL OFL),
AUTO-HÉBERGÉES dans assets/fonts/ (sous-ensembles latin + latin-ext de Google
Fonts, unicode-range d'origine) : plus de feuille Google bloquante ni de connexion
tierce. font-display: swap ; les deux polices du haut de page sont préchargées
(cf base.twig). Fichiers immuables : en changer ⇒ nouveau nom de fichier.
Chemins relatifs « ../fonts/ » réécrits en absolu quand la feuille est injectée
inline (cssInline). */
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/bebas-neue-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/bebas-neue-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inria Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inria-serif-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inria Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/inria-serif-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/instrument-serif-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/instrument-serif-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(../fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(../fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
: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;
/* Gris secondaires assombris pour un contraste ≥ 4,5:1 (WCAG AA) sur fond clair. */
--pv-fond-2: rgba(0, 0, 0, .6);
--pv-card-1: #1a1a1a;
--pv-card-2: #3a3a3a;
--pv-card-3: #6b6b6b;
--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, .7);
}
.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; }
/* Téléphone (tunnel, espace compte) : le logo cède la place au bouton connexion /
« Mon compte » au lieu de déborder (réduit sans déformation). */
@media (max-width: 540px) {
.pv-topbar-logo { flex-shrink: 1; min-width: 0; margin-right: .75rem; }
.pv-topbar-logo-img,
.pv-topbar-logo-svg svg { max-width: 45vw; }
.pv-topbar-logo-img { object-fit: contain; object-position: left center; }
}
.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: none;
color: inherit;
transition: color .15s;
}
/* Survol : changement de couleur (accent de la page), pas de soulignement. */
a.pv-vente-nav-item:hover { color: var(--pv-accent); }
.pv-vente .pv-connexion,
.pv-vente .pv-compte-bouton {
border: 0;
padding: 0;
border-radius: 0;
text-decoration: none;
text-transform: uppercase;
font-size: 1.3rem;
font-weight: normal;
color: inherit;
letter-spacing: .03em;
transition: color .15s;
}
.pv-vente .pv-connexion i { display: none; }
.pv-vente .pv-connexion:hover,
.pv-vente .pv-compte-bouton:hover { background: none; color: var(--pv-accent); }
/* Menu encore dans la barre (> 900px, avant le burger) : chaque item reste sur une
ligne (« Plateforme de streaming » passait sur 2 lignes vers 1200px), et la taille
(police, écarts) se réduit avec la largeur pour que l'ensemble tienne à côté du
logo. Linéaire de ~13px / 12px d'écart à 901px jusqu'à la taille pleine
(1.3rem / 2.25rem) vers 1408px (container Bulma fullhd) → grand écran inchangé. */
@media (min-width: 901px) {
.pv-vente .pv-topbar-actions { white-space: nowrap; }
.pv-vente .pv-vente-nav {
gap: clamp(.75rem, calc(4.73vw - 30.6px), 2.25rem);
margin-right: clamp(.75rem, calc(3.94vw - 23.5px), 2rem);
}
.pv-vente .pv-vente-nav-item,
.pv-vente .pv-connexion,
.pv-vente .pv-compte-bouton { font-size: clamp(.8125rem, calc(1.54vw - 1px), 1.3rem); }
}
/* 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; }
/* Pas de titre_affiche saisi (h1 masqué, cf. .pv-titre:empty) → l'en-tête
ne contient que la tagline, donc bien plus courte que le cas titre +
description sur lequel la remontée ci-dessus est calée : appliquée
telle quelle, elle fait chevaucher le carrousel sur le texte de la
tagline. On retombe alors sur le gap normal de la grille. */
.pv-vente-grille.pv-sans-titre .pv-dernieres-parutions { margin-top: 0; }
}
.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: 2.25rem;
text-align: center; /* centré comme la pile, le numéro et les pastilles en dessous */
transform: translateX(-50px); /* même recentrage sur la pile que .pv-carousel-infos */
}
.pv-carousel-main {
display: flex;
flex-direction: column;
align-items: center;
/* Les couvertures de derrière débordent vers le bas (translate + rotation, cf
data-pos) : assez d'écart pour que le numéro ne passe pas dessous. */
gap: 4.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); }
/* Au-delà de 5 couvertures (sélection manuelle longue) : les suivantes attendent
invisibles derrière la dernière de l'éventail, et y glissent quand on avance. */
.pv-carousel-item[data-pos]:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]):not([data-pos="3"]):not([data-pos="4"]) {
transform: translate(10px, 46px) rotate(8deg) scale(.82); z-index: 0; opacity: 0; pointer-events: none;
}
.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: 0;
}
/* Zone cliquable de 24×24 px (cible tactile minimale, WCAG 2.5.8) ; le point
visible (8 px) est dessiné par ::before, rendu inchangé. */
.pv-carousel-dot {
position: relative;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.pv-carousel-dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: .5rem;
height: .5rem;
margin: -.25rem 0 0 -.25rem;
border-radius: 50%;
background: var(--pv-fond-2);
opacity: .35;
transition: opacity .15s, transform .15s;
}
.pv-carousel-dot:hover::before { opacity: .7; }
.pv-carousel-dot.is-active::before { opacity: 1; transform: scale(1.4); background: var(--pv-fond-1); }
.pv-carousel-dot:focus-visible { outline: 2px solid var(--pv-fond-1); outline-offset: -2px; border-radius: 50%; }
.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-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-item[data-pos]:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]):not([data-pos="3"]):not([data-pos="4"]) { transform: translate(54px, 46px) rotate(8deg) scale(.82); }
.pv-carousel-infos, .pv-dernieres-parutions-label { transform: none; }
.pv-vente .pv-description { font-size: 2.2rem; max-width: none; }
/* Logo du header en mobile : hauteur proportionnelle à la largeur d'écran
(62px dès ~480px, 40px mini) et largeur plafonnée → un logo large (Society,
ratio ~4:1 ≈ 250px à 62px) + marge de 36px + langue + burger dépassaient
la largeur d'un téléphone (~360–414px) : burger poussé hors écran et
défilement horizontal. Marge gauche alignée sur le padding de .pv-entete. */
.pv-vente .pv-topbar-logo {
margin-left: 1.25rem;
margin-right: .75rem;
margin-bottom: clamp(-26px, -5.4vw, -17px);
min-width: 0;
flex-shrink: 1;
}
.pv-vente .pv-topbar-logo-img,
.pv-vente .pv-topbar-logo-svg,
.pv-vente .pv-topbar-logo-svg svg { height: clamp(40px, 13vw, 62px); }
.pv-vente .pv-topbar-logo-img,
.pv-vente .pv-topbar-logo-svg svg { max-width: min(260px, calc(100vw - 10rem)); }
/* Plafond atteint (logo très large) : réduit sans déformation, calé à gauche. */
.pv-vente .pv-topbar-logo-img { object-fit: contain; object-position: left bottom; }
/* 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;
}
/* Lien « S'abonner hors de France » sous le CTA (?pays=true, sélecteur de pays) :
collé au bouton noir (marge négative = padding-bottom de .pv-groupe), aligné à gauche. */
.pv-hors-france {
max-width: 1040px;
margin: -2.5rem auto 0;
text-align: left;
font-size: .9rem;
}
.pv-vente-droite .pv-hors-france { margin-top: -1.25rem; }
.pv-hors-france a {
color: inherit;
text-decoration: underline;
}
/* 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 /) : vitrine =====
Toutes les pages de vente actives sur fond noir, touches d'or : une carte par page, pile de ses
derniers numéros sur fond sombre et logo du titre (blanc) en dessous, lien vers sa
page de vente. Couleurs fixes (pas de thème de page). */
.pv-vitrine {
--vt-fond: #050505;
--vt-carte: #141414;
--vt-filet: #1f1f1f;
--vt-texte: #f5f1e8;
--vt-texte-2: #b9b3a6; /* ≈ 9:1 sur le fond */
--vt-accent: #d8b56a; /* or */
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--vt-fond);
color: var(--vt-texte);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
html:has(body.pv-vitrine) { background: #050505; }
.pv-vitrine a { color: var(--vt-texte); }
.pv-vitrine a:hover { color: var(--vt-accent); }
.pv-vitrine :focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 3px; }
.pv-vitrine-cadre { max-width: 1320px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; width: 100%; }
/* En-tête */
.pv-vitrine-entete { border-bottom: 1px solid var(--vt-filet); }
.pv-vitrine-entete-in {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
}
.pv-vitrine-logo img { display: block; height: 34px; width: auto; }
/* Logo inline (currentColor) : couleur du texte de la vitrine. */
.pv-vitrine-logo { color: var(--vt-texte); }
.pv-vitrine-logo svg { display: block; height: 34px; width: auto; }
.pv-vitrine-btn {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 1.4rem;
border-radius: 999px;
font-size: .85rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.pv-vitrine a.pv-vitrine-btn-contour { border: 1px solid var(--vt-accent); color: var(--vt-accent); }
.pv-vitrine a.pv-vitrine-btn-contour:hover { background: var(--vt-accent); color: var(--vt-fond); }
/* Scène : la grille, centrée verticalement dans l'écran. */
.pv-vitrine-scene { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 4rem; padding-bottom: 4rem; }
.pv-vitrine-vide { text-align: center; color: var(--vt-texte-2); }
.pv-vitrine-titre {
margin: 0 0 3rem;
text-align: center;
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: .95;
letter-spacing: .01em;
color: var(--vt-texte);
}
/* « SO PRESS » en or. */
.pv-vitrine-titre span { color: var(--vt-accent); }
.pv-vitrine-grille {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
justify-content: center;
gap: 28px;
}
/* Carte : fond sombre, logo en haut, pile au centre, actions en dessous. Le lien « Voir les offres » est étendu à toute la carte (::after) ;
« Offrir » passe au-dessus. */
.pv-vitrine-carte {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
height: 100%;
box-sizing: border-box;
padding: 3rem 2rem 2rem;
background: linear-gradient(180deg, #181818, #0d0d0d);
border: 1px solid var(--vt-filet);
isolation: isolate; /* contexte d'empilement : le halo (z-index -1) reste dans la carte */
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Halo doré derrière la pile, avivé au survol. */
.pv-vitrine-carte::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(ellipse 65% 45% at 50% 52%, rgba(216, 181, 106, .14), transparent 72%);
opacity: .7;
transition: opacity .35s ease;
pointer-events: none;
}
.pv-vitrine-carte:hover::before,
.pv-vitrine-carte:focus-within::before { opacity: 1; }
.pv-vitrine-carte:hover,
.pv-vitrine-carte:focus-within {
border-color: var(--vt-accent);
transform: translateY(-4px);
box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
}
/* Éventail de couvertures : la plus récente devant à gauche, les précédentes
l'une après l'autre derrière, vers la droite (pivot sous la pile, comme des
cartes tenues en main) ; l'éventail s'ouvre davantage au survol.
Effet magazine 3D : perspective sur la pile, chaque magazine légèrement tourné
(rotateY), tranche reliée + reflet glacé (::before) et épaisseur des pages
(ombres empilées sur la droite / le bas) ; il se redresse face au visiteur au survol. */
.pv-vitrine-pile {
position: relative;
display: block;
width: 62%;
max-width: 220px;
aspect-ratio: 3 / 4;
perspective: 1100px; /* sans preserve-3d : l'ordre d'empilement (z-index) reste maître */
}
/* Ombre portée au sol, sous la pile. */
.pv-vitrine-pile::before {
content: '';
position: absolute;
left: -8%;
right: -8%;
bottom: -7%;
height: 12%;
background: radial-gradient(closest-side, rgba(0, 0, 0, .8), transparent);
filter: blur(4px);
}
.pv-vitrine-mag {
--mag-y: -14deg; /* rotation 3D (face tournée vers la droite) */
position: absolute;
inset: 0;
display: block;
border-radius: 1px 3px 3px 1px;
/* Épaisseur : feuillets clairs/ombrés décalés à droite et en bas, puis ombre portée. */
box-shadow:
1px 1px 0 #ece7dc, 2px 2px 0 #9d978a,
14px 22px 40px rgba(0, 0, 0, .7);
transform-origin: 50% 130%; /* pivot sous la pile : éventail « en main » */
transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .4s ease, box-shadow .4s ease;
}
.pv-vitrine-mag img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
border-radius: inherit;
}
/* Tranche reliée (bande sombre / claire à gauche) + reflet glacé en diagonale. */
.pv-vitrine-mag::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0, 0, 0, .45) 0, rgba(255, 255, 255, .22) 1.6%, rgba(0, 0, 0, .28) 3.5%, rgba(255, 255, 255, .08) 5%, transparent 9%),
linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .07) 100%);
/* Liseré clair : détache la couverture du fond même quand elle est sombre. */
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pv-vitrine-pile .pv-vitrine-pile-1 { z-index: 3; transform: translateX(-11%) rotateY(var(--mag-y)) rotate(-5deg); }
.pv-vitrine-pile .pv-vitrine-pile-2 { z-index: 2; transform: rotateY(var(--mag-y)); filter: brightness(.72); }
.pv-vitrine-pile .pv-vitrine-pile-3 { z-index: 1; transform: translateX(11%) rotateY(var(--mag-y)) rotate(5deg); filter: brightness(.5); }
.pv-vitrine-carte:hover .pv-vitrine-mag { --mag-y: -6deg; }
.pv-vitrine-carte:hover .pv-vitrine-pile-1 {
transform: translate(-24%, -3%) rotateY(var(--mag-y)) rotate(-11deg);
box-shadow:
1px 1px 0 #ece7dc, 2px 2px 0 #9d978a,
18px 30px 50px rgba(0, 0, 0, .75), 0 0 40px rgba(216, 181, 106, .18);
}
.pv-vitrine-carte:hover .pv-vitrine-pile-2 { transform: translateY(-1%) rotateY(var(--mag-y)); filter: brightness(.88); }
.pv-vitrine-carte:hover .pv-vitrine-pile-3 { transform: translateX(24%) rotateY(var(--mag-y)) rotate(11deg); filter: brightness(.72); }
/* 2 couvertures : éventail recentré ; 1 seule : posée droite (toujours en 3D). */
.pv-vitrine-pile:not(:has(.pv-vitrine-pile-3)) { transform: translateX(5.5%); }
.pv-vitrine-pile:not(:has(.pv-vitrine-pile-2)) { transform: none; }
.pv-vitrine-pile:not(:has(.pv-vitrine-pile-2)) .pv-vitrine-mag { transform: rotateY(var(--mag-y)); }
.pv-vitrine-carte:hover .pv-vitrine-pile:not(:has(.pv-vitrine-pile-2)) .pv-vitrine-mag { transform: translateY(-4%) rotateY(var(--mag-y)); }
@media (prefers-reduced-motion: reduce) { .pv-vitrine-mag { transition: none; } }
/* Logos SOGEST : SVG sans dimensions (viewBox seule, ratios très variables) → boîte
fixe, dessin centré dedans par object-fit. */
.pv-vitrine-carte-logo {
display: flex;
align-items: center;
justify-content: center;
width: 70%;
height: 52px;
margin: 0;
color: var(--vt-accent);
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 1;
}
.pv-vitrine-carte-lien::after { content: ''; position: absolute; inset: 0; z-index: 4; }
.pv-vitrine-carte-logo img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
}
/* Actions : « Voir les offres » (décoratif, la carte est le lien) et « Offrir ». */
.pv-vitrine-carte-pied {
align-self: stretch;
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid var(--vt-filet);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .75rem 1.5rem;
}
.pv-vitrine-btn .pv-icone { margin-left: .5rem; }
.pv-vitrine a.pv-vitrine-btn-plein { background: var(--vt-accent); color: var(--vt-fond); }
.pv-vitrine .pv-vitrine-carte:hover a.pv-vitrine-btn-plein { background: var(--vt-texte); color: var(--vt-fond); }
.pv-vitrine a.pv-vitrine-lien-discret {
position: relative;
z-index: 5;
display: inline-flex;
align-items: center;
gap: .4rem;
min-height: 44px;
font-size: .9rem;
font-weight: 600;
color: var(--vt-texte-2);
text-decoration: underline;
text-underline-offset: .2em;
}
.pv-vitrine a.pv-vitrine-lien-discret:hover { color: var(--vt-accent); }
/* Pied (base.twig) passé en sombre */
.pv-vitrine .pv-footer { background: var(--vt-fond); color: var(--vt-texte-2); border-top-color: var(--vt-filet); }
.pv-vitrine .pv-footer a { color: var(--vt-texte-2); }
@media (max-width: 600px) {
.pv-vitrine-scene { padding-top: 2rem; padding-bottom: 2rem; }
.pv-vitrine-grille { grid-template-columns: minmax(0, 1fr); }
}
/* ===== 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: 2rem; font-weight: 700; letter-spacing: 0; vertical-align: .15em; }
/* « / numéro » sous le prix au numéro, en plus petit que le prix mais dans la
même couleur (contrairement à la note grise du prix total ci-dessous).
flex: 0 0 100% : même traitement que .pv-offre-prix-numero ci-dessous, pour
repasser à la ligne dans les scopes où .pv-offre-prix est en flex (cf.
.pv-vente-droite … .pv-offre-prix, row-reverse). */
.pv-offre-prix-unite { display: block; flex: 0 0 100%; margin-top: .1rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
/* Prix par numéro (saisi à la main sur l'offre) : petite ligne sous le prix.
flex-basis 100% pour passer à la ligne quand le bloc prix est en flex (page de
vente, cf. .pv-vente-droite … .pv-offre-prix qui porte le flex-wrap). */
.pv-offre-prix-numero {
display: block;
flex: 0 0 100%;
margin-top: .3rem;
font-size: .8rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
white-space: normal;
color: var(--pv-card-3);
}
/* Frais de port pour le pays de livraison (cf port.inc.php) : même gabarit que la
note du prix total, un ton plus soutenu (information de prix, pas décorative). */
.pv-offre-port {
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
flex: 0 0 100%;
margin-top: .3rem;
font-size: .8rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0;
white-space: normal;
color: var(--pv-card-2);
}
.pv-offre-port-drapeau {
flex: 0 0 auto;
width: 20px;
height: 15px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
/* Choix du pays de livraison (au-dessus des offres, cf _pays_livraison.twig) : la
géolocalisation propose, le visiteur choisit. Encart d'information jaune vif :
couleurs fixes (contraste garanti quel que soit le thème), qui ne
ressemblent ni à un bouton (noir, cf .pv-groupe-cta) ni à une card d'offre (pas de
bordure ni d'arrondi de card) : il doit se lire comme une question. */
.pv-pays {
display: flex;
align-items: flex-start;
gap: .9rem;
margin: 0 0 1.25rem;
padding: 1rem 1.25rem;
border-radius: 0;
background: #ffe066;
color: #1a1a1a;
font-size: 1rem;
line-height: 1.4;
text-align: left;
}
.pv-pays-icone { flex: 0 0 auto; font-size: 1.9rem; line-height: 1; margin-top: .1rem; color: #c2410c; }
.pv-pays-corps { flex: 1 1 auto; min-width: 0; }
.pv-pays p { margin: 0; }
.pv-pays-question { font-size: 1.05rem; font-weight: 600; }
.pv-pays strong { font-weight: 800; color: inherit; }
.pv-pays-drapeau {
display: inline-block;
width: 24px;
height: 18px;
margin-right: .35rem;
vertical-align: -3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}
.pv-pays-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem !important; }
.pv-pays-bouton {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: .35rem 1.3rem;
border: 2px solid currentColor;
border-radius: 1px;
background: transparent;
color: inherit;
font: inherit;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
/* Réponse principale (Oui / Voir les tarifs) : pleine. */
.pv-pays-bouton--plein { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.pv-pays-bouton:hover, .pv-pays-bouton:focus-visible { opacity: .85; }
.pv-pays-bouton:focus-visible, .pv-pays-autre > summary:focus-visible, .pv-pays-lien:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.pv-pays-lien { margin-left: .4rem; color: inherit; font-weight: 700; text-decoration: underline; }
.pv-pays-autre { margin-top: .7rem; }
.pv-pays-autre > summary { cursor: pointer; text-decoration: underline; min-height: 24px; }
.pv-pays-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.pv-pays-form select {
min-height: 36px;
max-width: 100%;
padding: .25rem .5rem;
border: 2px solid #1a1a1a;
border-radius: 1px;
background: #fff;
color: #1a1a1a;
font: inherit;
}
/* Liste déroulante des pays avec drapeaux (JS, cf _pays_livraison.twig). */
.pv-pp { position: relative; flex: 1 1 16rem; min-width: 0; max-width: 100%; }
.pv-pp-bouton {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
min-height: 36px;
padding: .25rem .5rem;
border: 2px solid #1a1a1a;
border-radius: 1px;
background: #fff;
color: #1a1a1a;
font: inherit;
text-align: left;
cursor: pointer;
}
.pv-pp-bouton:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.pv-pp-texte { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-pp-chevron { flex: 0 0 auto; }
.pv-pp-drapeau {
flex: 0 0 auto;
width: 20px;
height: 15px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.pv-pp-panneau {
position: absolute;
z-index: 30;
top: calc(100% + 2px);
left: 0;
right: 0;
border: 2px solid #1a1a1a;
background: #fff;
color: #1a1a1a;
box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.pv-pp-recherche {
display: block;
width: 100%;
padding: .45rem .6rem;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .15);
font: inherit;
color: inherit;
background: #fff;
}
.pv-pp-recherche:focus { outline: none; background: #fffbea; }
.pv-pp-liste { margin: 0; padding: .25rem 0; list-style: none; max-height: 16rem; overflow-y: auto; }
.pv-pp-option {
display: flex;
align-items: center;
gap: .55rem;
min-height: 32px;
padding: .3rem .6rem;
cursor: pointer;
}
.pv-pp-option[hidden] { display: none; }
.pv-pp-option.is-actif { background: #ffe066; }
.pv-pp-option[aria-selected="true"] { font-weight: 700; }
.pv-pp-vide { margin: 0; padding: .5rem .6rem; font-style: italic; }
.pv-offre-prix-barre {
/* Prix barré sous le prix normal. */
display: block;
margin-top: .6rem;
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; }
/* Remise du coupon appliqué, à côté du prix (≠ pastille d'angle, simple claim kiosque). */
.pv-offre-coupon {
display: inline-block;
margin-left: .35rem;
padding: .15rem .45rem;
border-radius: 3px;
background: #0f7a3d;
color: #fff;
font-family: inherit;
font-size: .95rem;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0;
vertical-align: .55em;
}
.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,') center / contain no-repeat;
color: #fff;
font-size: .82rem;
font-weight: 700;
line-height: 1;
text-align: center;
transform: rotate(10deg);
}
/* Badge promotionnel */
/* Carte avec badge (posé à cheval sur le bord haut) : de l'air sous le badge. */
.pv-offre--badge .pv-offre-tete,
.pv-vente-droite .pv-groupe .pv-offre--badge .pv-offre-tete { margin-top: 1rem; }
.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%;
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: 2rem 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; }
/* Fond personnalisé (couleur posée en style inline) : texte contrasté selon la
luminance du fond (fond-fonce → texte clair, fond-clair → texte foncé). */
.pv-lien-card.a-fond { border-color: transparent; }
.pv-lien-card.fond-fonce { --pv-card-1: #fff; --pv-card-2: rgba(255, 255, 255, .8); }
.pv-lien-card.fond-clair { --pv-card-1: #1a1a1a; --pv-card-2: #555; }
/* 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;
}
/* ===== Découvrez nos titres — cards couverture seule (juste avant la FAQ) =====
Couvertures au format magazine (3:4), centrées, retour à la ligne au-delà de la
largeur ; lévitation au survol comme les cards de liens. Nombre par ligne réglé
dans l'éditeur (--titres-par-ligne, posé sur la grille ; 2 sur mobile). */
.pv-titres {
max-width: 1040px;
margin: 2rem auto 1rem;
padding-bottom: 1.5rem;
}
.pv-titres-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-titres-grille {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
}
.pv-titre-card {
--n: var(--titres-par-ligne, 4);
flex: 0 0 calc((100% - (var(--n) - 1) * 1.25rem) / var(--n));
border-radius: 5px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
transition:
box-shadow .24s ease,
transform .24s cubic-bezier(.2,.8,.4,1);
}
.pv-titre-card:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
transform: translateY(-3px);
}
.pv-titre-card img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
}
@media (max-width: 768px) {
.pv-titres-grille { gap: .75rem; }
.pv-titre-card { flex-basis: calc((100% - .75rem) / 2); }
}
/* ===== Mosaïque — grille défilante d'images cliquables titrée (avant la FAQ) =====
Grille de 2 rangées : colonnes de 2 images, 4 colonnes remplissant la largeur ; au-
delà, défilement horizontal (swipe + flèches, aimantation). Dans une colonne, hauteur de chaque image proportionnelle à son
format (flex-grow posé par le script) → effet masonry, bas aligné. Logo de contenu
en haut à droite, titre au survol. */
.pv-mosaique {
max-width: 1040px; /* même largeur que les groupes de liens juste au-dessus (.pv-liens-groupe) */
margin: .5rem auto 1rem;
}
.pv-mosaique-titre {
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
font-weight: 400;
letter-spacing: -.015em;
text-transform: uppercase;
color: var(--pv-fond-1);
text-align: center;
margin-bottom: 1.25rem;
}
/* Largeur d'une colonne : 4 remplissent exactement la largeur (même rendu que la
grille), 2 sur mobile. Moins de 4 colonnes : elles s'élargissent pour remplir. */
.pv-mosaique-carrousel {
--pv-mosaique-col: calc((100% - 3 * 4px) / 4);
position: relative;
}
.pv-mosaique-piste {
display: flex;
gap: 4px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.pv-mosaique-piste::-webkit-scrollbar { display: none; }
.pv-mosaique-colonne {
flex: 1 0 var(--pv-mosaique-col);
display: flex;
flex-direction: column;
gap: 4px;
aspect-ratio: 1 / 2;
scroll-snap-align: start;
}
/* Colonne d'une seule image (mosaïque de 1 ou 2 images) : vignette carrée. */
.pv-mosaique-colonne.is-simple { aspect-ratio: 1; }
.pv-mosaique-item {
position: relative;
display: block;
flex: 1 1 0; /* flex-grow = hauteur/largeur de l'image, posé par le script */
min-height: 0;
overflow: hidden;
background: rgba(0, 0, 0, .06);
}
.pv-mosaique-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s ease;
}
a.pv-mosaique-item:hover .pv-mosaique-image { transform: scale(1.04); }
/* Flèches : à l'extérieur de la mosaïque, de part et d'autre, centrées verticalement ;
cercle fin à la couleur du texte de la page (fond de page, pas l'image), chevron SVG.
Écran trop étroit pour les loger dehors : ramenées sur les bords de la mosaïque, en
version pastille claire (lisible sur l'image). En butée, elles s'effacent. */
.pv-mosaique-fleche {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 1px solid currentColor;
border-radius: 50%;
background: transparent;
color: var(--pv-fond-1, #1a1a1a);
cursor: pointer;
opacity: .55;
transform: translateY(-50%);
transition: opacity .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.pv-mosaique-fleche.is-prec { left: -3.5rem; }
.pv-mosaique-fleche.is-suiv { right: -3.5rem; }
.pv-mosaique-carrousel:hover .pv-mosaique-fleche:not(:disabled) { opacity: .85; }
.pv-mosaique-fleche:hover:not(:disabled) { opacity: 1; transform: translateY(-50%) scale(1.06); }
.pv-mosaique-fleche.is-prec:hover:not(:disabled) svg { transform: translateX(-1px); }
.pv-mosaique-fleche.is-suiv:hover:not(:disabled) svg { transform: translateX(1px); }
.pv-mosaique-fleche svg { transition: transform .2s ease; }
.pv-mosaique-fleche:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.pv-mosaique-fleche:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 1180px) {
.pv-mosaique-fleche {
border-color: rgba(255, 255, 255, .6);
background: rgba(255, 255, 255, .8);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: #111;
box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.pv-mosaique-fleche.is-prec { left: .75rem; }
.pv-mosaique-fleche.is-suiv { right: .75rem; }
}
.pv-mosaique-fleche[hidden] { display: none; }
.pv-mosaique-logo {
position: absolute;
top: 6%;
right: 5%;
width: auto;
max-width: 40%;
max-height: 12%;
object-fit: contain;
pointer-events: none;
}
/* Titre de l'image, affiché au survol (ou au focus clavier) : voile sombre sur toute
la vignette, titre en grand dans le tiers bas. Écrans sans survol (tactile) :
toujours visible, plus discret. */
.pv-mosaique-legende {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 1rem 1rem 22%;
background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .65) 45%, rgba(0, 0, 0, .35) 100%);
color: #fff;
font-weight: 700;
font-size: clamp(1.1rem, 2vw, 1.5rem);
line-height: 1.15;
text-wrap: balance;
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.pv-mosaique-legende > span {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
transform: translateY(8px);
transition: transform .25s ease;
}
.pv-mosaique-item:hover .pv-mosaique-legende,
.pv-mosaique-item:focus-visible .pv-mosaique-legende { opacity: 1; }
.pv-mosaique-item:hover .pv-mosaique-legende > span,
.pv-mosaique-item:focus-visible .pv-mosaique-legende > span { transform: none; }
@media (hover: none) {
.pv-mosaique-legende {
opacity: 1;
top: auto;
padding: 2rem .6rem .6rem;
font-size: .9rem;
background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
}
.pv-mosaique-legende > span { transform: none; }
}
/* Logo « texte » (logo sans image) : le nom en majuscules, couleur du logo. */
.pv-mosaique-logo-texte {
position: absolute;
top: 5%;
right: 5%;
max-width: 70%;
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(.9rem, 2.2vw, 1.35rem);
line-height: 1;
letter-spacing: .02em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 3px rgba(0, 0, 0, .45); /* lisible sur une image claire */
pointer-events: none;
}
@media (max-width: 540px) {
.pv-mosaique-carrousel { --pv-mosaique-col: calc((100% - 4px) / 2); }
.pv-mosaique-fleche { display: none; } /* swipe au doigt */
.pv-mosaique-titre { font-size: 32px; }
}
/* ===== FAQ — rendu éditorial premium (cartes sur fond de page) =====
Structure et logique inchangées : / 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: #94592F; /* accent chaud, discret (assombri : contraste AA du badge) ; repris en dur dans l'icône « ? » (.pv-faq-q::before) */
--faq-peche: #F4E5D5; /* pastel du cercle d'icône */
--faq-trait: rgba(43, 38, 30, .07);
/* Marge de respiration quand on arrive par l'ancre #faq du menu. */
scroll-margin-top: 1.5rem;
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: 'Bebas Neue', sans-serif; /* comme les titres des liens et de la mosaïque */
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));
}
/* Groupe de questions (titre dépliable) : même carte que .pv-faq-item (mêmes
fond/bordure/ombre/icône) pour que groupes et questions à plat forment un seul
langage visuel homogène — seul le contenu (icône + questions imbriquées au lieu
d'une réponse) distingue un groupe d'une question. */
.pv-faq > .pv-faq-groupe + .pv-faq-groupe,
.pv-faq > .pv-faq-liste + .pv-faq-groupe,
.pv-faq > .pv-faq-groupe + .pv-faq-liste {
margin-top: 1.15rem;
}
.pv-faq-groupe {
background: #FFF;
border: 1px solid var(--faq-trait);
border-radius: 10px;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
@media (hover: hover) {
.pv-faq-groupe: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-groupe-titre {
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-groupe-titre::-webkit-details-marker { display: none; }
/* Cercle pastel + icône — même « ? » que les questions, pour une FAQ homogène. */
.pv-faq-groupe-titre::before {
content: "";
flex-shrink: 0;
width: 2.1rem;
height: 2.1rem;
display: grid;
place-content: center;
border-radius: 50%;
background: var(--faq-peche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%2394592F' d='M80 160c0-35.3 28.7-64 64-64l32 0c35.3 0 64 28.7 64 64l0 3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74l0 1.4c0 17.7 14.3 32 32 32s32-14.3 32-32l0-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7l0-3.6c0-70.7-57.3-128-128-128l-32 0C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/%3E%3C/svg%3E") center / .52rem .82rem no-repeat;
color: var(--faq-terre);
margin-top: -.1rem;
}
.pv-faq-groupe-titre-txt {
flex: 1;
min-width: 0;
font-size: 1.06rem;
line-height: 1.45;
color: var(--faq-encre);
}
/* Contrôle +/− : même logique que celui d'une question. */
.pv-faq-groupe-titre::after {
/* « + » dessiné en CSS (deux traits centrés) plutôt qu'en glyphe : un caractère
n'est pas centré dans sa boîte et se décale une fois tourné en « × ». */
content: "";
flex-shrink: 0;
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
color: var(--faq-encre);
background-color: rgba(43, 38, 30, .05);
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
background-size: .8rem 2px, 2px .8rem;
background-position: center;
background-repeat: no-repeat;
transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .25s ease, color .25s ease;
}
.pv-faq-groupe[open] > .pv-faq-groupe-titre::after {
transform: rotate(135deg);
background-color: var(--faq-encre);
color: #fff;
}
/* Questions imbriquées : indentées sous l'icône du groupe, mêmes cartes que les
questions à plat (juste plus petites/rapprochées, vu leur position imbriquée). */
.pv-faq-groupe > .pv-faq-liste {
padding: 0 1rem 1.2rem calc(1rem + 2.1rem + 1.1rem);
}
.pv-faq-groupe[open] > .pv-faq-liste {
animation: pv-faq-ouvre .3s cubic-bezier(.22, .61, .36, 1) both;
}
.pv-faq-groupe > .pv-faq-liste .pv-faq-item + .pv-faq-item { margin-top: .75rem; }
/* 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 « ? » : SVG Font Awesome Free « question » (CC BY 4.0) en
image de fond — Font Awesome n'est plus chargé sur le front public. Couleur figée
dans le SVG = --faq-terre (#94592F) : les modifier ensemble. */
.pv-faq-q::before {
content: "";
flex-shrink: 0;
width: 2.1rem;
height: 2.1rem;
display: grid;
place-content: center;
border-radius: 50%;
background: var(--faq-peche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%2394592F' d='M80 160c0-35.3 28.7-64 64-64l32 0c35.3 0 64 28.7 64 64l0 3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74l0 1.4c0 17.7 14.3 32 32 32s32-14.3 32-32l0-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7l0-3.6c0-70.7-57.3-128-128-128l-32 0C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/%3E%3C/svg%3E") center / .52rem .82rem no-repeat;
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 {
/* « + » dessiné en CSS (deux traits centrés) plutôt qu'en glyphe : un caractère
n'est pas centré dans sa boîte et se décale une fois tourné en « × ». */
content: "";
flex-shrink: 0;
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
color: var(--faq-encre);
background-color: rgba(43, 38, 30, .05);
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
background-size: .8rem 2px, 2px .8rem;
background-position: center;
background-repeat: no-repeat;
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-color: var(--faq-encre);
color: #fff;
}
/* Réponse : le 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-groupe,
.pv-faq-q::after,
.pv-faq-groupe-titre::after { transition: none; }
.pv-faq-item[open] > .pv-faq-r,
.pv-faq-groupe[open] > .pv-faq-liste { 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; }
.pv-faq-q-txt { font-size: 1rem; }
.pv-faq-r {
padding-left: 1.15rem;
padding-right: 1.15rem;
}
.pv-faq-groupe-titre {
padding: 1.15rem 1.15rem;
gap: .85rem;
}
.pv-faq-groupe-titre::before { width: 1.9rem; height: 1.9rem; }
.pv-faq-groupe-titre::after { width: 1.9rem; height: 1.9rem; }
.pv-faq-groupe-titre-txt { font-size: 1rem; }
.pv-faq-groupe > .pv-faq-liste {
padding-left: calc(1.15rem + 1.9rem + .85rem);
padding-right: 1.15rem;
}
.pv-faq-recherche { margin-top: -.75rem; }
}
/* Recherche FAQ : champ arrondi pleine largeur de la FAQ, loupe à droite. */
.pv-faq-recherche {
position: relative;
margin: -1rem 0 2rem;
}
.pv-faq-recherche-champ {
width: 100%;
padding: .95rem 3.4rem .95rem 1.5rem;
border: 1px solid var(--faq-trait);
border-radius: 999px;
background: #FFF;
color: var(--faq-encre);
font-family: var(--pv-font-corps, 'Inter', sans-serif);
font-size: 1rem;
outline: none;
-webkit-appearance: none;
appearance: none;
transition: box-shadow .25s ease, border-color .25s ease;
}
.pv-faq-recherche-champ::placeholder { color: var(--faq-sourdine); }
.pv-faq-recherche-champ::-webkit-search-cancel-button { cursor: pointer; }
.pv-faq-recherche-champ:focus {
border-color: var(--faq-terre);
box-shadow: 0 0 0 3px rgba(176, 106, 59, .15);
}
.pv-faq-recherche-icone {
position: absolute;
right: 1.4rem;
top: 50%;
transform: translateY(-50%);
color: var(--faq-terre);
pointer-events: none;
}
.pv-faq-aucun {
text-align: center;
color: var(--pv-fond-2, rgba(32, 35, 46, .58));
padding: 1rem 0 2rem;
}
.pv-faq [hidden] { display: none !important; }
/* Occurrences de la recherche (surlignage posé par le script de la FAQ). */
mark.pv-faq-surligne {
background: rgba(176, 106, 59, .22);
color: inherit;
border-radius: 3px;
padding: 0 .08em;
}
/* ===== 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, .62); /* contraste AA (≥ 4,5:1) sur le blanc */
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;
}
/* Onglet actif : texte blanc sur la pilule (couleur du texte de page, foncée) —
plutôt que la couleur de fond de page, peu lisible quand elle est vive (ex.
jaune So Foot Club). Texte de page clair ⇒ pilule claire ⇒ texte foncé. */
.pv-vente-droite .pv-toggle-btn.is-active {
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: bold;
}
.pv-page.txt-fond-clair .pv-vente-droite .pv-toggle-btn.is-active { color: #1a1a1a; }
/* 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: 0rem 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-bouton { display: none; }
.pv-vente-droite .pv-groupe .pv-offre-tete {
order: 1;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
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;
/* wrap : laisse le prix par numéro passer sur sa propre ligne (flex 100%). */
flex-wrap: wrap;
text-align: center;
font-family: Georgia, 'Times New Roman', serif;
font-weight: 600;
font-size: 1.3rem;
padding-top: .35rem;
padding-bottom: .35rem;
}
/* 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;
margin-right: .5rem;
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;
}
/* Sélection : on ne change que la COULEUR (largeur inchangée à 1px, sinon la
carte se décale d'un pixel au changement d'offre). */
.pv-groupe-carte-bloc.is-selectionnee {
border-color: var(--pv-fond-1, #1a1a1a);
}
/* Zone unique des bénéfices, sous les offres (rendue en Twig depuis la liste
unifiée préparée en PHP) : texte réduit + coche noire simple (pas de pastille
colorée). Les bénéfices absents de l'offre sélectionnée passent en .is-absent. */
.pv-benefices-zone {
padding-top: 1.1rem;
}
.pv-benefices-zone .pv-benefices { gap: .5rem; }
.pv-benefices-zone .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-benefices-zone .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;
}
/* Bénéfice non inclus dans l'offre sélectionnée : simplement grisé, avec la coche
remplacée par une croix. Pas de texte barré — illisible sur une serif. */
.pv-benefices-zone .pv-benefices li.is-absent {
color: var(--pv-fond-2); /* grisé mais lisible (contraste AA), suit le texte clair/foncé */
}
.pv-benefices-zone .pv-benefices li.is-absent::before {
content: "✕";
color: var(--pv-fond-2);
}
/* 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;
gap: .6rem;
width: 100%;
height: auto;
margin: .6rem 0 0;
max-width: none;
padding: .3rem 1rem;
background: #ececec;
color: var(--pv-fond-1, #1a1a1a);
/* Liseré fin pour détacher le bouton « offrir » du fond clair. */
border: 1px solid rgba(0, 0, 0, .55);
box-shadow: none;
border-radius: 1px;
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: 1.4rem;
line-height: 1.1;
letter-spacing: .06em;
transition: background .15s;
}
.pv-vente-droite .pv-cadeau-card:hover { background: #e2e2e2; }
/* Le picto cadeau reste visible sur le bouton : calé sur la taille du texte. */
.pv-vente-droite .pv-cadeau-icone {
font-size: 1.1rem;
color: inherit;
}
/* .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 du bouton. */
.pv-vente-droite .pv-cadeau-texte { font-size: 1.4rem; }
.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; }
}
/* Sélecteur de langue de la topbar (page de vente multilingue uniquement, cf
public/components/_langue_menu.twig). Hors panneau burger : toujours visible.
Desktop : à droite, après « Se connecter » / le compte (order). */
.pv-langue-menu { position: relative; order: 3; margin-left: 1rem; }
.pv-langue-bouton {
display: inline-flex;
align-items: center;
gap: .35rem;
background: transparent;
border: 0;
padding: .4rem .3rem;
color: inherit;
cursor: pointer;
line-height: 1;
}
.pv-langue-bouton:hover { opacity: .75; }
/* display posé ici (et pas seulement par flag-icons, chargé en asynchrone sur la page
de vente) : la place du drapeau est réservée avant l'arrivée de la feuille. */
.pv-langue-drapeau { display: inline-block; width: 1.5em; height: 1.125em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.pv-langue-code { font-weight: 700; font-size: .8rem; letter-spacing: .03em; }
.pv-langue-chevron { font-size: .65rem; }
.pv-langue-liste {
position: absolute;
right: 0;
top: calc(100% + .4rem);
min-width: 170px;
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: 60;
font-family: var(--pv-font-corps, inherit);
}
.pv-langue-item {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .8rem;
border-radius: 8px;
color: #1a1a1a;
font-size: .88rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.pv-langue-item:hover { background: #f4f4f4; color: #1a1a1a; }
.pv-langue-item.is-active { background: #f4f4f4; color: var(--pv-accent); font-weight: 700; }
@media (max-width: 900px) {
/* Mobile : juste avant le burger (le panneau burger est hors flux). */
.pv-vente .pv-langue-menu { order: 0; margin-left: 0; margin-right: .5rem; }
}
/* ===== Accessibilité ===== */
/* Liens au fil du texte : soulignés (un lien ne doit pas se distinguer par sa seule
couleur, WCAG 1.4.1). Pas les liens-boutons / cartes / menus, qui ont leur forme. */
.pv-footer a,
.pv-page .content a:not(.button),
.pv-description a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .15em;
}
/* Lien d'évitement « Aller au contenu » : hors écran, visible au focus clavier. */
.pv-aller-contenu {
position: absolute;
left: .75rem;
top: -4rem;
z-index: 1000;
padding: .6rem 1rem;
background: #1a1a1a;
color: #fff;
border-radius: 4px;
font-weight: 600;
}
.pv-aller-contenu:focus { top: .75rem; color: #fff; }
/* Focus clavier visible sur les éléments interactifs (couleur du texte : l'accent de
la page, souvent clair — ex. jaune Society —, serait peu visible sur le fond). */
.pv-page a:focus-visible,
.pv-page button:focus-visible,
.pv-page summary:focus-visible,
.pv-page input:focus-visible {
outline: 2px solid var(--pv-fond-1, #1a1a1a);
outline-offset: 2px;
}
/* Texte réservé aux lecteurs d'écran (ex. « au lieu de » devant le prix barré). */
.pv-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------------
Encart promotionnel en tête de la colonne des offres (onglet Blocs, ex.
So Foot digital offert sur la page So Foot Club) : tablette stylisée à gauche,
étiquette / titre / texte à droite, format compact. Palette fixe (fond encre,
étiquette rouge) : indépendante des couleurs de la page pour rester lisible
quel que soit le thème (blanc sur #e2001a ≈ 4,9:1, AA).
--------------------------------------------------------------------------- */
.pv-encart {
display: flex;
align-items: center;
gap: 1rem;
margin: 0 0 1rem;
padding: .85rem 1.1rem;
border-radius: 10px;
background: #141414;
color: #ffffff;
}
.pv-encart-visuel {
flex-shrink: 0;
}
.pv-encart-tablette {
display: block;
box-sizing: border-box;
width: 68px;
height: 88px;
padding: 4px;
border-radius: 9px;
background: #3a3a3a;
box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.pv-encart-ecran {
display: flex;
flex-direction: column;
gap: 3px;
height: 100%;
border-radius: 5px;
background: #ffffff;
overflow: hidden;
}
.pv-encart-ecran-nom {
min-height: 13px;
padding: 3px 4px 1px;
background: #e2001a;
color: #ffffff;
font-family: 'Bebas Neue', sans-serif;
font-size: 10px;
line-height: 1;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
/* Visuel choisi (onglet Blocs › Encart) : remplit l'écran, recadré au centre. */
.pv-encart-ecran-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pv-encart-bloc { display: block; height: 16px; margin: 0 3px; background: #dddddd; }
.pv-encart-bloc-bas { height: 11px; }
.pv-encart-ligne { display: block; height: 2px; margin: 0 3px; background: #bbbbbb; }
.pv-encart-ligne-courte { width: 60%; }
.pv-encart-corps {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .25rem;
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
.pv-encart-etiquette {
padding: .15rem .5rem;
background: #e2001a;
color: #ffffff;
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.pv-encart .pv-encart-titre {
margin: 0;
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: 1.45rem;
line-height: 1;
color: #ffffff;
}
.pv-encart-texte {
margin: 0;
font-size: .82rem;
line-height: 1.4;
color: #d6d6d6;
}
@media (max-width: 540px) {
.pv-encart { padding: .75rem .9rem; gap: .8rem; }
.pv-encart-tablette { width: 56px; height: 73px; }
}
/* ---------------------------------------------------------------------------
Compte à rebours en tête de la colonne des offres (onglet Blocs) : fond au choix
(encre #141414 par défaut, posé en style inline), texte blanc ou encre selon sa
luminance (.is-clair), cases jours / heures / minutes / secondes en chiffres
Bebas Neue.
--------------------------------------------------------------------------- */
.pv-compteur {
margin: 0 0 1rem;
padding: .8rem 1rem;
border-radius: 10px;
background: #141414;
color: #ffffff;
text-align: center;
}
.pv-compteur[hidden] { display: none; }
.pv-compteur-titre {
margin: 0 0 .5rem;
font-size: .8rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.pv-compteur-cases {
display: flex;
justify-content: center;
gap: .5rem;
}
.pv-compteur-cases[hidden], .pv-compteur-fin[hidden] { display: none; }
.pv-compteur-case {
display: flex;
flex-direction: column;
align-items: center;
min-width: 3.4rem;
padding: .35rem .3rem .3rem;
border-radius: 6px;
background: #2a2a2a;
}
.pv-compteur-nombre {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pv-compteur-unite {
margin-top: .15rem;
font-size: .65rem;
letter-spacing: .04em;
text-transform: uppercase;
color: inherit; /* lisible sur tout fond choisi (gris fixe : contraste insuffisant sur un rouge) */
}
.pv-compteur-fin {
margin: 0;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.45rem;
line-height: 1.1;
}
/* Placé sous les bénéfices : un peu d'air au-dessus. En bas de page : centré, largeur
contenue (le bas de page fait toute la largeur du container). */
.pv-vente-droite .pv-benefices-zone ~ .pv-compteur,
.pv-vente-droite .pv-benefices-zone ~ .pv-zone-edit .pv-compteur { margin-top: 1rem; }
.pv-fond-bas .pv-compteur { max-width: 640px; margin: 2rem auto 1rem; }
/* Fond clair choisi (onglet Blocs) : texte foncé, cases assombries. */
.pv-compteur.is-clair { color: #141414; }
.pv-compteur.is-clair .pv-compteur-case { background: rgba(0, 0, 0, .08); }
/* Fond foncé autre que l'encre : cases éclaircies plutôt que gris fixe. */
.pv-compteur:not(.is-clair) .pv-compteur-case { background: rgba(255, 255, 255, .12); }
@media (max-width: 540px) {
.pv-compteur-case { min-width: 2.9rem; }
.pv-compteur-nombre { font-size: 1.6rem; }
}
/* ---------------------------------------------------------------------------
Bloc texte (onglet Blocs) : titre + sous-titre centrés sur un fond de couleur ;
fond et couleurs des deux textes choisis dans l'éditeur (styles inline).
--------------------------------------------------------------------------- */
.pv-texte {
margin: 0 0 1rem;
padding: 1.6rem 1.25rem;
border-radius: 10px;
background: #f5f1e8;
text-align: center;
}
.pv-texte-titre {
margin: 0;
font-family: var(--pv-font-titres, 'Bebas Neue', sans-serif);
font-weight: 400;
font-size: 2rem;
line-height: 1.1;
}
.pv-texte-sous-titre {
margin: .5rem 0 0;
font-size: 1.05rem;
line-height: 1.5;
white-space: pre-line;
}
.pv-texte-titre:empty + .pv-texte-sous-titre { margin-top: 0; }
/* Marges intérieures réglables (onglet Blocs). */
.pv-texte.is-reduit { padding: .8rem 1rem; }
.pv-texte.is-reduit .pv-texte-sous-titre { margin-top: .3rem; }
.pv-texte.is-reduit .pv-texte-action { margin-top: .7rem; }
.pv-texte.is-minimal { padding: .35rem .75rem; }
.pv-texte.is-minimal .pv-texte-sous-titre { margin-top: .15rem; }
.pv-texte.is-minimal .pv-texte-action { margin-top: .4rem; }
/* Bouton facultatif : bouton de la page (.pv-bouton), largeur du texte, centré. */
.pv-texte-action { margin: 1rem 0 0; }
.pv-texte-bouton { display: inline-block; width: auto; }
.pv-vente-droite .pv-benefices-zone ~ .pv-texte,
.pv-vente-droite .pv-benefices-zone ~ .pv-zone-edit .pv-texte { margin-top: 1rem; }
.pv-fond-bas .pv-texte { max-width: 900px; margin: 2rem auto 1rem; }
@media (max-width: 540px) {
.pv-texte-titre { font-size: 1.6rem; }
}
/* ---------------------------------------------------------------------------
Bloc notification (onglet Blocs) : message sur fond teinté, filet coloré à
gauche, icône du style ; liens soulignés en gras. Couleurs de texte ≥ 4,5:1 sur
leur fond (AA).
--------------------------------------------------------------------------- */
.pv-notif {
display: flex;
align-items: flex-start;
gap: .6rem;
margin: 0 0 1rem;
padding: .75rem 1rem;
border-left: 4px solid var(--notif-filet);
border-radius: 8px;
background: var(--notif-fond);
color: var(--notif-texte);
text-align: left;
font-size: .95rem;
line-height: 1.45;
}
.pv-notif.is-info { --notif-fond: #e8f1fb; --notif-filet: #2f6fbf; --notif-texte: #163a63; }
.pv-notif.is-attention { --notif-fond: #fff6d6; --notif-filet: #d9a400; --notif-texte: #4f3b00; }
.pv-notif.is-succes { --notif-fond: #e6f6ec; --notif-filet: #2e8b57; --notif-texte: #1b4a2f; }
.pv-notif.is-important { --notif-fond: #fdecec; --notif-filet: #cc0f35; --notif-texte: #7a0b20; }
.pv-notif.is-neutre { --notif-fond: #f2f2f2; --notif-filet: #7a7a7a; --notif-texte: #2b2b2b; }
.pv-notif-icone { flex: none; font-size: 1.15rem; line-height: 1.25; color: var(--notif-filet); }
.pv-notif.is-attention .pv-notif-icone { color: #8a6500; }
/* Fond libre foncé (onglet Blocs) : texte, icône et filet blancs. */
.pv-notif.is-fonce { --notif-texte: #ffffff; --notif-filet: rgba(255, 255, 255, .7); }
.pv-notif.is-fonce .pv-notif-icone { color: #ffffff; }
.pv-notif-texte { margin: 0; }
.pv-notif-texte a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pv-notif-texte a:hover { text-decoration-thickness: 2px; }
.pv-vente-droite .pv-benefices-zone ~ .pv-notif,
.pv-vente-droite .pv-benefices-zone ~ .pv-zone-edit .pv-notif { margin-top: 1rem; }
.pv-fond-bas .pv-notif { max-width: 900px; margin: 2rem auto 1rem; }
/* Bon de réduction (coupon) sous les offres : même bouton secondaire que « Offrir cet
abonnement » (summary d'un , ouvert = champ code + « Appliquer »). */
.pv-coupon { max-width: 1040px; margin: 0 auto; }
.pv-coupon > summary { box-sizing: border-box; list-style: none; cursor: pointer; }
.pv-coupon > summary::-webkit-details-marker { display: none; }
.pv-coupon-form {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: .6rem;
}
.pv-coupon-champ {
flex: 1 1 12rem;
min-height: 44px;
padding: .5rem .75rem;
border: 1px solid rgba(0, 0, 0, .55);
border-radius: 1px;
background: #fff;
color: #1a1a1a;
font: inherit;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.pv-coupon-champ[aria-invalid="true"] { border-color: #b3261e; }
.pv-coupon-bouton {
min-height: 44px;
padding: .4rem 1.25rem;
border: 0;
border-radius: 1px;
background: var(--pv-bouton, #1a1a1a);
color: var(--pv-bouton-texte, #fff);
font-family: 'Bebas Neue', sans-serif;
font-size: 1.3rem;
letter-spacing: .06em;
cursor: pointer;
}
.pv-coupon-bouton:hover { filter: brightness(.9); }
.pv-coupon-erreur {
flex-basis: 100%;
margin: 0;
color: #b3261e;
font-size: .9rem;
}
.pv-coupon-applique {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .5rem;
max-width: 1040px;
margin: .6rem auto 0;
padding: .5rem 1rem;
border: 1px dashed rgba(0, 0, 0, .55);
background: #f4f8f1;
color: #1a1a1a;
font-size: .95rem;
}
.pv-coupon-applique a { color: inherit; text-decoration: underline; }