Le split ne s'active qu'au-delà de TFE_SPLIT_BP (1200px). En dessous,
tout s'empile dans l'ordre du markup.
============================================================ */
:root {
--tfe-split-bp: 1200px;
--tfe-offers-bg: #f9f6f6;
--tfe-offers-border: #e8dede;
/* Alternance de fond des sections de la colonne droite.
--tfe-blend = hauteur de la bande de dégradé qui raccorde une section
à la précédente. Plus la valeur est grande, plus la transition est douce. */
--tfe-sec-light: #ffffff;
--tfe-sec-tint: #f7f1ef;
--tfe-blend: 220px;
}
/* ----------------------------------------------------------------
1) GRILLE — empilée par défaut, split au-delà de 1200px
---------------------------------------------------------------- */
.tfe-offers {
display: block;
background: var(--tfe-offers-bg);
}
.tfe-offers__aside {
background: #fff;
}
.tfe-offers__main {
background: var(--tfe-sec-light);
}
@media screen and (min-width: 1200px) {
.tfe-offers {
display: grid;
grid-template-columns: 33fr 66fr;
align-items: start;
}
/* Colonne gauche : figée sur toute la hauteur du viewport, sous le header.
align-self: start est indispensable — sans lui, l'élément s'étire sur
toute la hauteur de la ligne de grille et sticky n'a plus de course. */
.tfe-offers__aside {
position: sticky;
top: var(--headerHeight, 84px);
height: calc(100vh - var(--headerHeight, 84px));
align-self: start;
overflow: hidden;
}
/* Les sections occupent toute la largeur de la colonne pour que leur fond
aille bord à bord ; c'est leur padding interne qui recentre le contenu
sur 900px (voir .tfe-offers__section).
Exception : la modale FAQ est en position: fixed et tient sa largeur de
--tfe-faq-modal-width (posée par tfe-faq.js). Sans le :not(), ce width
100% l'emportait — même spécificité, feuille chargée après — et la
modale débordait de la colonne, poussant sa croix hors de l'écran. */
.tfe-offers__main > *:not(.tfe-faq-modal) {
width: 90%;
}
/* Le header reste blanc uni : la première section de la colonne droite
l'est aussi, donc le dégradé deux teintes n'a plus lieu d'être. On coupe
seulement le flou, qui rendait mal au-dessus des sections teintées. */
body:has(.tfe-offers) .tfe-site-header {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* ----------------------------------------------------------------
2) COLONNE GAUCHE — accroche centrée verticalement
---------------------------------------------------------------- */
.tfe-offers__aside-inner {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
padding: 3rem 2rem;
text-align: center;
}
/* Le partial hero garde son markup ; on neutralise sa largeur et ses
marges propres pour le laisser occuper la colonne. */
.tfe-offers__aside .tfe-membership-hero {
background: transparent;
margin: 0;
max-width: 340px;
padding: 0;
}
@media screen and (min-width: 1200px) {
.tfe-offers__aside .tfe-membership-hero__title {
font-size: 30px;
line-height: 1.3;
margin-bottom: 3rem;
}
}
/* ----------------------------------------------------------------
3) COLONNE DROITE — sections numérotées séparées par des filets
---------------------------------------------------------------- */
/* Chaque section va bord à bord dans la colonne droite. Le padding
horizontal en max() recentre le contenu sur 900px sans wrapper
supplémentaire : le fond reste pleine largeur, le texte reste lisible. */
.tfe-offers__section {
padding-block: 3.5rem;
padding-inline: max(1.5rem, calc((100% - 900px) / 2));
scroll-snap-align: start;
}
/* Raccord entre sections : le haut de chaque section reprend la couleur de
la précédente et fond vers la sienne sur --tfe-blend. Pas de hauteur à
connaître, donc ça tient quel que soit le contenu.
background-color assure le remplissage au-delà de la bande de dégradé. */
.tfe-offers__section--light,
.tfe-offers__section--tint {
background-repeat: no-repeat;
border: 1px solid gainsboro;
border-radius: 50px;
}
.tfe-offers__section--faq {
border: none !important;
}
.tfe-offers__section--light {
/*background-color: var(--tfe-sec-light);
background-image: linear-gradient(
to bottom,
var(--tfe-sec-tint) 0,
var(--tfe-sec-light) var(--tfe-blend)
);*/
}
.tfe-offers__section--tint {
/*background-color: var(--tfe-sec-tint);
background-image: linear-gradient(
to bottom,
var(--tfe-sec-light) 0,
var(--tfe-sec-tint) var(--tfe-blend)
);*/
}
/* La première section suit le header blanc : pas de raccord à faire. */
.tfe-offers__main > .tfe-offers__section:first-child {
background-image: none;
margin-bottom: 50px;
}
.tfe-offers__eyebrow {
color: #8c7a7a;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0 0 2.25rem;
text-transform: uppercase;
text-align: center;
}
/* --- Bénéfices en grille compacte (remplace la liste verticale) --- */
.tfe-offers__main .tfe-why-subscribe {
padding: 0;
}
.tfe-offers__main .tfe-why-subscribe__title {
display: none;
}
.tfe-offers__main .tfe-why-subscribe__list {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Section « bénéfices » désormais blanche : les cartes prennent la teinte
pour rester lisibles comme blocs distincts. */
.tfe-offers__main .tfe-why-subscribe__item {
background: var(--tfe-sec-tint);
border-radius: 16px;
flex-direction: column;
gap: 8px;
padding: 18px;
}
.tfe-offers__main .tfe-why-subscribe__icon {
background: transparent;
height: auto;
width: auto;
}
/* --- Bloc plans (étape 1) --- */
.tfe-offers__main .tfe-membership-wrap {
margin: 0;
max-width: none;
padding: 0;
}
.tfe-offers__main .tfe-plans-grid,
.tfe-offers__main .tfe-custom-amount-box,
.tfe-offers__main .tfe-summary-bar {
background-color: transparent;
}
/* --- FAQ : le partial impose un fond blanc et un padding généreux --- */
.tfe-offers__main .tfe-faq {
background: transparent;
padding: 0;
}
.tfe-offers__main .tfe-faq__inner {
max-width: none;
}
.tfe-offers__main .tfe-faq__title {
display: none;
}
/* ----------------------------------------------------------------
3 bis) SCROLL MAGNÉTIQUE
La classe .tfe-has-offers est posée sur par tfe-offers-ui.js :
le snap ne doit jouer que sur cette page, or scroll-snap-type doit vivre
sur l'élément qui scrolle (ici le document).
« proximity » et non « mandatory » : mandatory verrouille le scroll dès
qu'une section dépasse la hauteur du viewport — on ne peut plus s'arrêter
au milieu d'une longue FAQ. proximity n'attire que si on relâche près
d'un point d'accroche.
Désactivé sous 1000px (sections très hautes sur mobile, l'aimantation y
devient pénible) et si l'utilisateur a demandé moins d'animations.
---------------------------------------------------------------- */
@media screen and (min-width: 1000px) {
html.tfe-has-offers {
scroll-snap-type: y proximity;
/* Sans ça, le haut de la section se cale sous le header sticky. */
scroll-padding-top: var(--headerHeight, 84px);
}
}
@media (prefers-reduced-motion: reduce) {
html.tfe-has-offers {
scroll-snap-type: none;
}
}
/* Pendant que la modale est ouverte, le document ne scrolle plus :
on neutralise le snap pour éviter tout soubresaut à la fermeture. */
html.tfe-has-offers:has(body.tfe-modal-open) {
scroll-snap-type: none;
}
/* ----------------------------------------------------------------
4) MODALE PLEIN ÉCRAN — étapes 2 (coordonnées) et 3 (paiement)
---------------------------------------------------------------- */
.tfe-modal {
align-items: flex-start;
background: rgba(40, 40, 40, 0.55);
display: none;
inset: 0;
justify-content: center;
overflow-y: auto;
padding: 0;
position: fixed;
z-index: 1000;
}
.tfe-modal.is-open {
display: flex;
}
body.tfe-modal-open {
overflow: hidden;
}
.tfe-modal__panel {
background: #fff;
max-width: 640px;
min-height: 100%;
padding: 1.5rem 1.5rem 3rem;
position: relative;
width: 100%;
}
@media screen and (min-width: 800px) {
.tfe-modal {
padding: 3rem 1.5rem;
}
.tfe-modal__panel {
min-height: 0;
padding: 2rem 2.5rem 2.5rem;
}
}
.tfe-modal__close {
align-items: center;
background: none;
border: 0;
color: #282828;
cursor: pointer;
display: flex;
height: 40px;
justify-content: center;
position: absolute;
right: 8px;
top: 8px;
width: 40px;
}
.tfe-modal__close:hover {
color: #6D2929;
}
.tfe-modal .tfe-stepper {
margin-bottom: 2rem;
margin-top: 0.5rem;
}
/* ----------------------------------------------------------------
5) BARRE CTA MOBILE — visible seulement sous le breakpoint du split,
et seulement une fois le bloc plans sorti du champ.
---------------------------------------------------------------- */
.tfe-mobile-cta {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 45%);
bottom: 0;
left: 0;
opacity: 0;
padding: 1.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
pointer-events: none;
position: fixed;
right: 0;
transform: translateY(100%);
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 900;
}
.tfe-mobile-cta.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.tfe-mobile-cta__btn {
background: #6D2929;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 700;
padding: 14px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 1200px) {
.tfe-mobile-cta {
display: none;
}
}
/* ----------------------------------------------------------------
6) EMPILAGE SOUS 1200px
---------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
.tfe-offers__aside-inner {
padding: 2rem 1.25rem;
}
.tfe-offers__section {
padding: 2rem 1.25rem;
}
/* Marge basse pour que la barre CTA fixe ne recouvre pas le footer. */
.tfe-offers__main {
padding-bottom: 80px;
}
}