/*
Theme Name: Masarix
Theme URI: https://masarix.com
Description: Theme enfant Bricks pour Masarix. Design system.
Author: Masarix
Template: bricks
Version: 5.8.0
Text Domain: masarix
*/
/* =========================================================================
ATTENTION — Bricks pose html{font-size:62.5%} dans frontend-layer.min.css.
Donc 1rem = 10px, PAS 16px. Toute valeur en rem ici serait rendue a 62,5%
de l'intention. C'est le bug de la v3.
REGLE : toute taille de texte de cette feuille est en px ou en clamp px/vw.
Ne jamais reintroduire de rem.
========================================================================= */
:root{
--m-fond: var(--bricks-color-fond, #0A1418);
--m-fond-2: var(--bricks-color-fond-2, #0F1D23);
--m-fond-3: var(--bricks-color-fond-3, #14252C);
--m-bordure: var(--bricks-color-bordure, #1D323B);
--m-bleu: var(--bricks-color-bleu, #55A1BE);
--m-bleu-clair: var(--bricks-color-bleu-clair, #7FBBD2);
--m-bleu-fonce: var(--bricks-color-bleu-fonce, #316B81);
--m-texte: var(--bricks-color-texte, #EDF5F8);
--m-doux: var(--bricks-color-texte-doux, #A8BCC4);
/* litteral volontaire : #6E838C echouait WCAG AA sur les cartes (4,33:1) */
--m-faible: #8296A0;
--m-police: "Geist", "Inter", system-ui, -apple-system, sans-serif;
--m-e1:4px; --m-e2:8px; --m-e3:12px; --m-e4:16px; --m-e5:24px;
--m-e6:32px; --m-e7:48px; --m-e8:64px; --m-e9:88px;
--m-rayon:14px;
--m-pilule:999px;
--m-conteneur:1320px;
--m-transition:.25s cubic-bezier(.4,0,.2,1);
/* ---- mouvement ---- */
--m-ease: cubic-bezier(.22,.61,.36,1); /* blocs de texte */
--m-ease-doux: cubic-bezier(.16,1,.3,1); /* photos */
--m-ease-trait:cubic-bezier(.65,0,.35,1); /* traits qui se tracent */
--m-t-bloc:520ms; --m-t-media:760ms; --m-t-trait:700ms;
--m-t-survol:240ms; --m-t-presse:90ms;
--m-monte:14px;
--m-d:0ms; /* delai de cascade, pose par le JS */
--m-pas-grille:72px; /* rythme de mise en page ; la texture de fond ne s'en sert plus */
--m-entete-h:100px; /* hauteur de l'en-tete colle, sert aux ancres */
}
/* ===== BASE ===== */
body{
background-color: var(--m-fond);
color: var(--m-doux);
font-family: var(--m-police);
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.6;
font-weight: 400;
/* pas d'antialiased : cela amincit le texte clair sur fond sombre */
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
text-rendering: optimizeLegibility;
}
h1,h2,h3,h4{
font-family: var(--m-police);
color: var(--m-texte);
text-wrap: balance;
overflow-wrap: anywhere;
margin-block: 0;
}
h1{ font-size: clamp(36px, 5vw, 72px); font-weight:700; line-height:1.04; letter-spacing:-2px; }
h2{ font-size: clamp(28px, 3.2vw, 48px); font-weight:700; line-height:1.1; letter-spacing:-1px; }
h3{ font-size: clamp(20px, 1.6vw, 24px); font-weight:600; line-height:1.25; letter-spacing:-.24px; }
h4{ font-size: 20px; font-weight:600; line-height:1.35; letter-spacing:-.2px; }
strong{ color: var(--m-texte); font-weight:600; }
small,.m-petit{ font-size:16px; line-height:1.55; color: var(--m-faible); }
.m-surtitre{
font-size:14px; font-weight:600; line-height:1.2;
letter-spacing:1.2px; text-transform:uppercase;
color: var(--m-bleu); margin:0; display:block;
}
.m-accent{ color: var(--m-bleu); }
.m-prix{
font-size: clamp(34px, 2.8vw, 44px);
font-weight:700; letter-spacing:-.9px; line-height:1;
color: var(--m-texte); font-variant-numeric: tabular-nums; margin:0;
}
.m-stat{
font-size: clamp(40px, 3.8vw, 64px);
font-weight:700; letter-spacing:-1.9px; line-height:.95;
color: var(--m-texte); font-variant-numeric: tabular-nums; margin:0;
}
.m-num{
font-size: clamp(30px, 3vw, 48px);
font-weight:600; letter-spacing:-1px; line-height:1;
color: var(--m-bleu); font-variant-numeric: tabular-nums; margin:0;
padding-bottom: var(--m-e4);
border-bottom: 1px solid var(--m-bordure);
}
.m-lead{
font-size: clamp(19px, 1.6vw, 23px); line-height:1.5;
color: var(--m-doux); max-width:600px; text-wrap: pretty;
}
.m-citation{
font-size: clamp(19px, 1.9vw, 26px); line-height:1.45;
letter-spacing:-.26px; color: var(--m-texte); text-wrap: pretty;
}
a{ color: var(--m-bleu); text-decoration:none; transition: color var(--m-transition); }
a:hover{ color: var(--m-bleu-clair); }
:focus-visible{ outline:2px solid var(--m-bleu); outline-offset:3px; }
/* ===== BOUTONS ===== */
.brxe-button.m-btn,.m-btn{
display:inline-flex; align-items:center; justify-content:center; gap:var(--m-e2);
padding:16px 28px; min-height:52px; border-radius:var(--m-pilule);
font-family:var(--m-police); font-size:17px; font-weight:600; line-height:1.2;
letter-spacing:0; border:1px solid transparent; cursor:pointer;
transition: background var(--m-transition), border-color var(--m-transition), color var(--m-transition);
}
.m-btn--principal{ background:var(--m-bleu-fonce); color:var(--m-texte); }
.m-btn--principal:hover{ background:var(--m-bleu); color:#07141A; }
.m-btn--secondaire{ background:transparent; color:var(--m-texte); border-color:var(--m-bordure); }
.m-btn[disabled]{ opacity:.55; cursor:default; pointer-events:none; }
.m-btn--secondaire:hover{ border-color:var(--m-bleu); color:var(--m-texte); }
/* ===== STRUCTURE ===== */
/* v3 : 88px en haut + 88px en bas = 176px de vide entre deux sections.
v4 : moitie moins, et un filet 1px remplace le vide par une structure.
v5 : ce filet passe en ::after pour pouvoir se tracer au defilement.
v5.8 : la texture de fond est passee sur body::before, donc le ::before
des sections est libre. */
.brxe-section.m-section{
padding-block: 36px;
position: relative;
}
.brxe-section.m-section::after{
content:""; position:absolute; top:0; left:0; right:0; height:1px;
background: var(--m-bordure);
transform: scaleX(1); transform-origin: 0 50%;
pointer-events:none;
}
/* le heros et les sections a fond distinct n'ont pas de filet :
le changement de fond fait deja la separation */
.brxe-section.m-heros::after,
.brxe-section.m-fond-alt::after{ content:none; }
@media (min-width:1024px){
.brxe-section.m-section{ padding-block: 44px; }
}
/* exceptions de rythme, par classe et non par rang : la section des guides
change de place, un nth-of-type se serait decale en silence. */
.brxe-section.m-heros{ padding-top: 56px; padding-bottom: 88px; }
.brxe-section.m-fond-alt{ background: var(--m-fond-2); }
.brxe-section.m-bande-sec{ padding-block: 40px; }
.brxe-section.m-temoins{ padding-top: 72px; }
.brxe-section.m-final{ padding-block: 96px; }
@media (max-width:1023px){
.brxe-section.m-heros{ padding-bottom: 56px; }
.brxe-section.m-final{ padding-block: 64px; }
}
.brxe-container.m-conteneur{
width:100%; max-width:var(--m-conteneur);
margin-inline:auto; padding-inline: clamp(20px, 3vw, 40px);
align-items:stretch;
}
/* rythme vertical : Bricks ne pose aucun ecart entre les enfants directs
du conteneur. Sans cette regle, un titre touche le bloc qui le suit. */
.brxe-container.m-conteneur > * + *{ margin-top: var(--m-e5); }
.brxe-container.m-conteneur > .m-surtitre + *{ margin-top: 10px; }
.brxe-container.m-conteneur > .m-lead + .m-btnrow{ margin-top: var(--m-e6); }
.m-fond-alt{ background: var(--m-fond-2); }
/* prose : largeur de lecture, seulement en pleine colonne */
.m-prose{ max-width:64ch; }
/* ===== MISES EN PAGE ===== */
.brxe-block.m-split{
display:grid; grid-template-columns:7fr 5fr;
gap:56px; align-items:center; width:100%;
}
.brxe-block.m-split--texte{ grid-template-columns:1.05fr .95fr; }
.brxe-block.m-editorial{
display:grid; grid-template-columns:360px 1fr;
gap:72px; width:100%; align-items:start; max-width:1040px;
}
.brxe-block.m-grid3{
display:grid; grid-template-columns:repeat(3,1fr);
gap:20px; width:100%; align-items:stretch;
}
.brxe-block.m-grid2{
display:grid; grid-template-columns:repeat(2,1fr);
gap:20px; width:100%; align-items:stretch;
}
.brxe-block.m-btnrow{
display:flex; flex-direction:row; align-items:center;
gap:var(--m-e3); flex-wrap:wrap; width:auto;
}
.brxe-block.m-pile{ display:flex; flex-direction:column; gap:var(--m-e4); width:100%; }
.brxe-block.m-pile--serre{ gap:10px; }
/* ===== FAQ : un filet par question, elle devient un tableau ===== */
.brxe-block.m-faq{
display:grid; grid-template-columns:repeat(2,1fr);
gap:0 var(--m-e8); width:100%; align-items:start;
}
.brxe-block.m-faq > *{
padding-block: var(--m-e5);
border-top: 1px solid var(--m-bordure);
}
.m-faq h4{ font-size:20px; line-height:1.35; }
.m-faq h4 + *{ font-size:18px; line-height:1.5; color: var(--m-doux); }
/* ===== BANDE DE CHIFFRES ===== */
.brxe-block.m-bande{
display:grid; grid-template-columns:repeat(3,1fr); gap:0; width:100%;
border-top:1px solid var(--m-bordure); border-bottom:1px solid var(--m-bordure);
}
.brxe-block.m-bande > *{
padding:var(--m-e6) var(--m-e5);
border-right:1px solid var(--m-bordure);
display:flex; flex-direction:column; gap:10px;
}
.brxe-block.m-bande > *:last-child{ border-right:none; }
.brxe-block.m-bande > *:first-child{ padding-left:0; }
.m-bande h4{ font-size:16px; font-weight:500; line-height:1.4; color: var(--m-doux); letter-spacing:0; }
/* ===== CARTES ===== */
.brxe-block.m-carte{
display:flex; flex-direction:column; gap:var(--m-e4);
background:var(--m-fond-2); border:1px solid var(--m-bordure);
border-radius:var(--m-rayon); padding:28px 28px 24px;
align-items:stretch;
transition: border-color var(--m-transition), background var(--m-transition);
}
.brxe-block.m-carte:hover{ border-color:var(--m-bleu-fonce); background:var(--m-fond-3); }
.brxe-block.m-carte--vedette{ border-color:var(--m-bleu-fonce); }
.brxe-block.m-carte--nue{ background:transparent; border:none; padding:0; }
.m-carte .m-petit{ font-size:18px; line-height:1.6; color: var(--m-doux); }
.m-carte .m-btnrow{ margin-top:auto; padding-top:var(--m-e3); }
.m-carte .m-btn{ width:100%; }
/* cartes d'offre : le prix se detache, et les trois libelles
« Pour qui / Format / Vous repartez avec » deviennent des etiquettes
au lieu de trois titres empiles qui se lisent comme une liste a puces. */
.m-offres .m-prix{
padding-bottom: var(--m-e5);
border-bottom: 1px solid var(--m-bordure);
}
.m-offres .m-carte .m-petit{ gap:0; }
.m-offres .m-carte .m-petit strong{
display:block;
font-size:14px; font-weight:600; line-height:1.2;
letter-spacing:1.2px; text-transform:uppercase;
color: var(--m-faible); margin-bottom:6px;
}
/* l'etiquette est deja en display:block, le
du contenu ferait un trou */
.m-offres .m-carte .m-petit br{ display:none; }
/* ===== IMAGES ===== */
.brxe-image.m-media,.m-media{ border-radius:var(--m-rayon); overflow:hidden; }
.m-media img{ display:block; width:100%; height:auto; object-fit:cover; }
.m-media--haute img{ aspect-ratio:4/5; }
.m-media--large img{ aspect-ratio:16/10; }
.m-media--carre img{ aspect-ratio:1/1; }
/* filet */
.brxe-block.m-filet{ height:1px; background:var(--m-bordure); width:100%; padding:0; }
/* ===== TEXTURE DE FOND =====
Un champ de points ondulant, dessine une seule fois en une tuile de
1152 x 864 qui se raccorde bord a bord. Fichier et non canvas : aucun
JavaScript, aucune boucle de rendu a payer en batterie. Le WebP sans
perte fait 20 Ko, trois fois moins que le PNG ; .htaccess sert l'un ou
l'autre selon le navigateur.
Elle est posee sur la page entiere et non section par section : toute
page du site en herite, y compris celles qui n'existent pas encore. Les
sections qui portent leur propre fond (.m-fond-alt, le pied) la
recouvrent, ce qui conserve l'alternance de la maquette.
position:fixed : la couche fait exactement un ecran, elle est peinte une
fois et ne se repeint pas au defilement. */
body::before{
content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
background-image: url("fond-ondes.png");
background-size: 1152px 864px;
background-repeat: repeat;
}
/* Sur telephone, une tuile de 1152 px ne laisse voir qu'un tiers d'onde :
le motif se lit alors comme une grille reguliere. A 576 px (toujours un
multiple de 72) la vague redevient lisible. Verifie a 375 px de large. */
@media (max-width:900px){
body::before{ background-size:576px 432px; }
}
/* Le seul mouvement permanent de la page, et seulement sur grand ecran avec
une souris. Sur telephone, animer une couche plein ecran en boucle coute
de la batterie pour une derive que personne ne remarque.
On deplace background-position et non transform. La couche est fixe et
fait un ecran : il n'y a rien a faire deborder, et le raccord est exact
puisque le motif se repete tous les 1152 px. L'ancienne derive par
transform ne marchait que parce que la grille avait une periode de 72 px,
la distance exacte du deplacement ; avec ce motif elle sauterait a chaque
fin de boucle.
steps(1152) decoupe la derive en pas de un pixel : le navigateur repeint
six fois par seconde au lieu de soixante, pour un resultat identique a
l'oeil. */
@media (min-width:992px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
body::before{ animation: m-derive 200s steps(1152) infinite; }
}
@keyframes m-derive{
from{ background-position: 0 0; }
to { background-position: -1152px 0; }
}
/* .m-grille ne porte plus de texture, mais la classe reste posee sur deux
sections par Bricks et sert encore de conteneur. */
.m-grille{ position:relative; overflow:hidden; isolation:isolate; }
.m-grille > *{ position:relative; z-index:1; }
/* ===== MOBILE ===== */
@media (max-width:900px){
.brxe-block.m-split,
.brxe-block.m-split--texte,
.brxe-block.m-editorial,
.brxe-block.m-grid2{ grid-template-columns:1fr; gap:32px; }
.brxe-block.m-editorial{ gap:20px; }
.brxe-block.m-grid3{ grid-template-columns:repeat(2,1fr); gap:20px; }
.brxe-block.m-faq{ grid-template-columns:1fr; gap:0; }
.brxe-block.m-bande{ grid-template-columns:1fr; }
/* en colonne : trois enfants en ligne dans 335px se chevauchent */
.brxe-block.m-bande > *{
flex-direction:column; align-items:flex-start; gap:var(--m-e2);
padding:var(--m-e5) 0;
border-right:none; border-bottom:1px solid var(--m-bordure);
}
.brxe-block.m-bande > *:first-child{ padding-top:0; }
.brxe-block.m-bande > *:last-child{ border-bottom:none; padding-bottom:0; }
}
@media (max-width:620px){
.brxe-block.m-grid3{ grid-template-columns:1fr; gap:var(--m-e4); }
.brxe-block.m-btnrow{ flex-direction:column; align-items:stretch; width:100%; }
/* seulement dans une rangee : la barre collante garde un bouton compact,
sinon il ecrase le texte a cote de lui */
.m-btnrow .m-btn{ width:100%; }
.brxe-block.m-carte{ padding:var(--m-e5); }
}
@media (max-width:719px){
.m-media img{ max-height:340px; }
.m-split .m-media img{ object-position:50% 20%; }
}
/* =========================================================================
MOUVEMENT
La classe .m-anim est posee sur par un petit script en tete de page,
et seulement si : JavaScript repond, IntersectionObserver existe, le
visiteur n'a pas demande moins d'animations, et on n'est pas dans l'editeur
Bricks. Sans elle, RIEN n'est cache : la page reste entierement lisible.
Le JS ne fait qu'une chose, poser data-vu sur les elements qui entrent.
========================================================================= */
@keyframes m-entree{
from{ opacity:0; transform: translateY(var(--m-monte)); }
to { opacity:1; transform: none; }
}
/* Etat de depart. :where() ne pese rien en specificite, donc la regle de
revelation ci-dessous gagne sans avoir besoin de !important.
Cette liste doit rester identique a celle de mouvement.js. */
html.m-anim :where(
.m-section:not(.m-heros) .m-conteneur > *:not(.m-grid3):not(.m-grid2):not(.m-faq):not(.m-bande):not(.m-split):not(.m-editorial),
.m-section:not(.m-heros) .m-grid3 > *,
.m-section:not(.m-heros) .m-grid2 > *,
.m-section:not(.m-heros) .m-faq > *,
.m-section:not(.m-heros) .m-bande > *,
.m-section:not(.m-heros) .m-split > *,
.m-section:not(.m-heros) .m-editorial > *
){ opacity:0; }
/* Les entrees passent par animation et non par transition : transition reste
disponible pour le survol et la pression, sans delai residuel.
:not(.m-section) est indispensable : les sections portent aussi data-vu,
mais uniquement pour tracer leur filet. Sans cette exclusion, la section
entiere se fondrait, heros compris. */
html.m-anim [data-vu]:not(.m-section){
opacity:1;
animation: m-entree var(--m-t-bloc) var(--m-ease) var(--m-d) backwards;
}
/* Photos : elles se decouvrent par le bas au lieu de monter. */
html.m-anim .m-section:not(.m-heros) .m-media{
clip-path: inset(0 0 14% 0 round var(--m-rayon));
transition: opacity var(--m-t-media) var(--m-ease-doux) var(--m-d),
clip-path var(--m-t-media) var(--m-ease-doux) var(--m-d);
-webkit-transform: translateZ(0); /* stabilise le decoupage sur iOS */
}
html.m-anim .m-section:not(.m-heros) .m-media[data-vu]{
opacity:1; animation:none;
clip-path: inset(0 0 0 0 round var(--m-rayon));
}
html.m-anim .m-section:not(.m-heros) .m-media img{
transform: scale(1.04);
transition: transform 900ms var(--m-ease-doux) var(--m-d);
}
html.m-anim .m-section:not(.m-heros) .m-media[data-vu] img{ transform:none; }
/* Le filet de section se trace de gauche a droite, comme un trait de plan. */
html.m-anim .brxe-section.m-section::after{
transform: scaleX(0);
transition: transform var(--m-t-trait) var(--m-ease-trait);
}
html.m-anim .brxe-section.m-section[data-vu]::after{ transform: scaleX(1); }
/* ===== PREMIER ECRAN =====
En CSS pur, sans JavaScript et sans attendre le defilement : la page doit
deja vivre a l'ouverture. Le h1 n'est jamais anime, c'est lui que Google
mesure pour la vitesse d'affichage. */
@media (prefers-reduced-motion: no-preference){
.m-heros .m-surtitre{ animation: m-entree 560ms var(--m-ease) 60ms backwards; }
.m-heros .m-lead { animation: m-entree 560ms var(--m-ease) 200ms backwards; }
.m-heros .m-btnrow { animation: m-entree 560ms var(--m-ease) 300ms backwards; }
.m-heros .m-btnrow + .m-petit{ animation: m-entree 560ms var(--m-ease) 380ms backwards; }
.m-heros .m-media { animation: m-media-heros 900ms var(--m-ease-doux) 120ms backwards; }
}
@keyframes m-media-heros{
from{ clip-path: inset(0 0 16% 0 round var(--m-rayon)); }
to { clip-path: inset(0 0 0 0 round var(--m-rayon)); }
}
/* ===== CARTES : LIGNE D'ACCENT ET SURVOL ===== */
.brxe-block.m-carte::after{
content:""; position:absolute; top:0; left:0; right:0; height:2px;
background: var(--m-bleu); border-radius: var(--m-rayon) var(--m-rayon) 0 0;
transform: scaleX(0); transform-origin: 0 50%;
transition: transform 380ms var(--m-ease-trait);
pointer-events:none;
}
.brxe-block.m-carte--vedette::after{ transform: scaleX(1); }
.brxe-block.m-carte--nue::after{ content:none; }
@media (hover:hover) and (pointer:fine){
.brxe-block.m-carte{
transition: transform var(--m-t-survol) var(--m-ease),
background var(--m-t-survol) linear,
border-color var(--m-t-survol) linear,
box-shadow var(--m-t-survol) var(--m-ease);
}
.brxe-block.m-carte:hover{
transform: translateY(-3px);
box-shadow: 0 18px 40px -26px rgba(0,0,0,.85);
}
.brxe-block.m-carte:hover::after{ transform: scaleX(1); }
.brxe-block.m-carte:hover .m-num{ color: var(--m-bleu-clair); }
}
.m-carte .m-num{ transition: color var(--m-t-survol) linear; }
/* ===== BOUTONS ===== */
/* La fleche n'apparait que sur grand ecran, elle elargit le bouton d'environ
22px. La syntaxe content / "" la rend muette pour les lecteurs d'ecran. */
@media (min-width:782px){
.m-btn--principal::after{
content: "\2192" / "";
display:inline-block; margin-left:8px;
transform: translateX(0);
transition: transform 260ms var(--m-ease);
}
}
@media (hover:hover) and (pointer:fine){
.m-btn--principal:hover{ transform: translateY(-1px); }
.m-btn--principal:hover::after{ transform: translateX(4px); }
.m-btn--secondaire:hover{ transform: translateY(-1px); }
}
/* La pression : seul retour qui existe au doigt sur telephone. */
.brxe-button.m-btn:active,.m-btn:active{
transform: translateY(0) scale(.98);
transition-duration: var(--m-t-presse);
}
/* ===== BLOC REMISE DANS LES CARTES DE PRIX =====
Le prix de 870 EUR n'est jamais barre : c'est le prix reellement pratique.
La remise est presentee comme une condition, sous le prix, et le bloc
entier est cliquable pour offrir une cible tactile confortable. */
.m-remise{
display:block; margin:0; padding:12px 14px;
border:1px solid var(--m-bordure);
border-left:2px solid var(--m-bleu);
border-radius:10px;
background: rgba(85,161,190,.07);
color: var(--m-doux); text-decoration:none;
transition: background var(--m-t-survol) linear,
border-color var(--m-t-survol) linear;
}
/* Bricks ne rend pas un bloc en balise : le lien vit dans le texte et
s'etire sur tout le bloc, pour une cible tactile confortable. */
.m-remise{ position:relative; }
.m-remise__lien{ color:inherit; text-decoration:none; }
.m-remise__lien::after{ content:""; position:absolute; inset:0; border-radius:10px; }
.m-remise--lien:hover{ background: rgba(85,161,190,.12); border-left-color: var(--m-bleu-clair); }
.m-remise__lien:focus-visible::after{ outline:2px solid var(--m-bleu-clair); outline-offset:2px; }
/* aucun selecteur de type : Bricks peut sortir un div ou un p */
.m-remise .m-remise__l1{ margin:0; font-size:16px; line-height:1.45; color: var(--m-doux); }
.m-remise .m-remise__px{ font-size:22px; font-weight:700; letter-spacing:-.01em; color: var(--m-bleu-clair); }
.m-remise .m-remise__note{ margin:4px 0 0; font-size:14px; line-height:1.4; color: var(--m-faible); }
/* Les cartes 02 et 03 recoivent un bloc de meme taille, en neutre, pour que
la carte 01 ne paraisse pas soldee a cote de deux cartes nues. */
.m-remise--neutre{ border-left-color: var(--m-bordure); background: transparent; }
.m-remise--neutre .m-remise__px{ font-size:16px; font-weight:600; color: var(--m-doux); }
@media (min-width:768px){ .m-remise{ min-height:78px; } }
@media (max-width:400px){ .m-remise{ padding:12px; } }
/* ===== SECTION DES GUIDES ===== */
/* pas de scroll-margin ici : html a deja scroll-padding-top, les deux s ajouteraient */
#m-bundle .brxe-container.m-conteneur{ max-width:920px; }
/* Signal d'arrivee depuis la carte de prix : de la couleur, aucun deplacement,
donc aucun decalage de mise en page. */
#m-bundle:target{ animation: m-signal 2400ms ease-out 1; }
@keyframes m-signal{
0%,70%{ box-shadow: inset 0 3px 0 0 var(--m-bleu); }
100% { box-shadow: inset 0 3px 0 0 rgba(85,161,190,0); }
}
/* une seule onde sur toute la page, sur le bouton des guides */
html.m-anim #m-bundle[data-vu] .m-btn--principal{
animation: m-pouls 1100ms var(--m-ease) 500ms 1;
}
@keyframes m-pouls{
from{ box-shadow: 0 0 0 0 rgba(85,161,190,.42); }
to { box-shadow: 0 0 0 16px rgba(85,161,190,0); }
}
/* ===== BARRE COLLANTE, TELEPHONE UNIQUEMENT =====
Rendue en PHP hors de Bricks : elle ne peut pas etre cassee dans l'editeur.
position:fixed, donc hors flux : elle ne peut pas decaler la page. */
.m-barre{
position:fixed; inset:auto 0 0 0; z-index:60; display:none;
padding:8px 12px;
padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
background: var(--m-fond-2);
border-top:1px solid var(--m-bordure);
box-shadow: 0 -10px 30px rgba(0,0,0,.34);
transform: translate3d(0,110%,0);
visibility:hidden;
transition: transform 280ms var(--m-ease), visibility 0s linear 280ms;
will-change: transform;
}
@media (max-width:767px){ .m-barre{ display:block; } }
.m-barre.est-visible{
transform: translate3d(0,0,0); visibility:visible;
transition: transform 280ms var(--m-ease), visibility 0s linear 0s;
}
.m-barre__in{ display:flex; align-items:center; gap:8px; }
.m-barre__txt{ flex:1 1 auto; min-width:0; margin:0; font-size:12px; line-height:1.3; color: var(--m-bleu-clair); }
.m-barre__txt b{
display:block; font-size:14px; font-weight:600; color: var(--m-texte);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-barre .m-btn{ flex:0 0 auto; white-space:nowrap; min-height:44px; padding:10px 14px; font-size:14px; }
.m-barre .m-btn--principal::after{ content:none; }
.m-barre__x{
flex:0 0 auto; width:34px; height:34px; padding:0;
border:0; border-radius:8px; background:none;
color: var(--m-faible); font-size:20px; line-height:1; cursor:pointer;
}
.m-barre__x:focus-visible{ outline:2px solid var(--m-bleu-clair); outline-offset:2px; }
@media print{ .m-barre{ display:none; } }
html{ scroll-behavior: smooth; scroll-padding-top: var(--m-entete-h); }
/* =========================================================================
EN-TETE
Modele Bricks de type header, condition « tout le site ».
Pas de menu deroulant ni de JavaScript : sous 820px la barre de liens
passe simplement a la ligne. Rien ne se cache derriere un bouton.
========================================================================= */
#brx-header{ position:sticky; top:0; z-index:50; }
.brxe-section.m-entete{
padding-block:0;
background: rgba(10,20,24,.92);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom:1px solid var(--m-bordure);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.brxe-section.m-entete{ background: var(--m-fond); }
}
.brxe-container.m-entete__in{
display:flex; flex-direction:row; flex-wrap:wrap; align-items:center;
gap: var(--m-e5); padding-block:14px;
}
.m-logo{ font-size:19px; font-weight:700; letter-spacing:-.3px; }
.m-logo a{ color: var(--m-texte); text-decoration:none; }
.brxe-block.m-nav{
display:flex; flex-direction:row; flex-wrap:wrap; align-items:center;
gap: var(--m-e5); flex:1 1 auto; width:auto;
}
.m-nav a{ font-size:16px; color: var(--m-doux); text-decoration:none;
transition: color var(--m-transition); }
.m-nav a:hover{ color: var(--m-texte); }
.brxe-block.m-entete__cta{ flex:0 0 auto; width:auto; }
.m-entete__cta .m-btn{ min-height:44px; padding:11px 20px; font-size:15px; }
.m-entete__cta .m-btn--principal::after{ content:none; }
@media (max-width:820px){
/* Sur telephone l'en-tete ne colle pas : a deux lignes il mangerait un quart
de l'ecran. C'est la barre de rappel en bas qui assure la presence du
bouton, et l'en-tete non colle ne recouvre plus les ancres. */
#brx-header{ position:static; }
:root{ --m-entete-h:16px; }
.brxe-container.m-entete__in{ gap:10px 16px; padding-block:12px; }
.m-logo{ flex:1 1 auto; }
.brxe-block.m-nav{ order:3; flex:1 0 100%; gap: var(--m-e4); }
.m-nav a{ font-size:15px; }
}
@media (max-width:480px){
/* les quatre liens doivent tenir sur une seule ligne a 375px */
.brxe-block.m-nav{ gap:14px; flex-wrap:nowrap; }
.m-nav a{ font-size:14px; white-space:nowrap; }
.m-entete__cta .m-btn{ padding:11px 14px; font-size:14px; }
}
/* =========================================================================
PIED DE PAGE
========================================================================= */
.brxe-section.m-pied{
padding-block: var(--m-e8) var(--m-e6);
background: var(--m-fond-2);
border-top:1px solid var(--m-bordure);
}
.brxe-block.m-pied__grille{
display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr;
gap: var(--m-e7) var(--m-e5); width:100%; align-items:start;
}
.brxe-block.m-pied__col{ display:flex; flex-direction:column; gap:10px; width:100%; }
.m-pied__marque{ font-size:19px; font-weight:700; letter-spacing:-.3px; color: var(--m-texte); }
.m-pied__titre{
font-size:14px; font-weight:600; line-height:1.2;
letter-spacing:1.2px; text-transform:uppercase;
color: var(--m-faible); margin-bottom:4px;
}
.m-pied .m-petit{ max-width:34ch; }
.m-pied a{ font-size:16px; color: var(--m-doux); text-decoration:none;
transition: color var(--m-transition); }
.m-pied a:hover{ color: var(--m-bleu-clair); }
.brxe-block.m-pied__bas{
width:100%; margin-top: var(--m-e7); padding-top: var(--m-e5);
border-top:1px solid var(--m-bordure);
}
@media (max-width:900px){
.brxe-block.m-pied__grille{ grid-template-columns:1fr 1fr; gap: var(--m-e6) var(--m-e5); }
.brxe-block.m-pied__col:first-child{ grid-column:1 / -1; }
}
@media (max-width:520px){
.brxe-block.m-pied__grille{ grid-template-columns:1fr; }
}
/* =========================================================================
PAGES DE TEXTE (mentions legales, confidentialite, a propos, merci...)
Colonne unique, largeur de lecture, titres un cran sous ceux de l accueil.
========================================================================= */
.brxe-section.m-page .brxe-container.m-conteneur{ max-width:860px; }
.m-page h1{ font-size: clamp(32px, 4vw, 52px); }
.m-page h2{ font-size: clamp(23px, 2.1vw, 30px); }
.m-page .m-lead{ max-width:100%; }
.m-page .m-conteneur > h2{ margin-top: var(--m-e6); }
.m-page .m-conteneur > .m-btnrow{ margin-top: var(--m-e6); }
.brxe-section.m-page--tete::after{ content:none; }
.brxe-section.m-page--tete{ padding-top: var(--m-e7); padding-bottom: var(--m-e5); }
/* =========================================================================
FORMULAIRES — reservation et candidature (raccourci [masarix_reservation])
Les noms de classes suivent le HTML de mu-plugins/masarix-formulaire.php.
Toute taille est en px : voir l avertissement en tete de feuille.
========================================================================= */
.m-form{ margin-top: var(--m-e6); }
.m-form [hidden]{ display:none !important; }
.m-form__form{ display:grid; gap: var(--m-e5); }
.m-form__grille{
display:grid; gap: var(--m-e4);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.m-champ{ display:grid; gap: var(--m-e2); }
.m-champ > span{
font-size:15px; font-weight:600; line-height:1.35;
letter-spacing:.2px; color: var(--m-texte);
}
.m-champ > span > em{
font-style:normal; font-weight:400; color: var(--m-faible);
}
.m-champ input,
.m-champ textarea{
width:100%; box-sizing:border-box;
font-family: var(--m-police); font-size:17px; line-height:1.5;
color: var(--m-texte);
background: var(--m-fond-2);
border:1px solid var(--m-bordure);
border-radius: var(--m-rayon);
padding: 13px 16px;
transition: border-color var(--m-transition), background-color var(--m-transition);
-webkit-appearance:none; appearance:none;
}
.m-champ textarea{ resize:vertical; min-height:120px; }
.m-champ input::placeholder,
.m-champ textarea::placeholder{ color: var(--m-faible); }
.m-champ input:hover,
.m-champ textarea:hover{ border-color: var(--m-bleu-fonce); }
.m-champ input:focus,
.m-champ textarea:focus{
outline:none; border-color: var(--m-bleu);
background: var(--m-fond-3);
box-shadow: 0 0 0 3px rgba(85,161,190,.18);
}
/* le remplissage automatique de Chrome repeint le champ en blanc */
.m-champ input:-webkit-autofill{
-webkit-text-fill-color: var(--m-texte);
box-shadow: 0 0 0 1000px var(--m-fond-3) inset;
}
/* ---- case a cocher ---- */
.m-case{
display:grid; grid-template-columns: 22px 1fr; gap: var(--m-e3);
align-items:start; cursor:pointer;
font-size:16px; line-height:1.5; color: var(--m-doux);
}
.m-case > input{
width:22px; height:22px; margin:0; margin-top:1px;
-webkit-appearance:none; appearance:none;
background: var(--m-fond-2);
border:1px solid var(--m-bordure);
border-radius:6px; cursor:pointer;
display:grid; place-content:center;
transition: background-color var(--m-transition), border-color var(--m-transition);
}
.m-case > input::after{
content:""; width:11px; height:6px;
border-left:2px solid var(--m-fond); border-bottom:2px solid var(--m-fond);
transform: rotate(-45deg) scale(.4); transform-origin:center;
opacity:0; transition: opacity var(--m-t-presse) linear, transform var(--m-t-survol) var(--m-ease);
margin-top:-3px;
}
.m-case > input:hover{ border-color: var(--m-bleu-fonce); }
.m-case > input:checked{ background: var(--m-bleu); border-color: var(--m-bleu); }
.m-case > input:checked::after{ opacity:1; transform: rotate(-45deg) scale(1); }
.m-case a{ text-decoration:underline; text-underline-offset:3px; }
/* ---- bloc guides, revele par la case ---- */
.m-form__guides{
display:grid; gap: var(--m-e3);
padding: var(--m-e5);
background: var(--m-fond-2);
border:1px solid var(--m-bordure);
border-radius: var(--m-rayon);
}
.m-form__guides .m-petit{ margin:0; }
/* ---- pot de miel : invisible pour l humain, atteignable pour le robot ---- */
.m-form__pot{
position:absolute !important; width:1px; height:1px;
padding:0; margin:-1px; border:0; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* ---- etat et resultat ---- */
.m-form__etat{ margin:0; min-height:1px; color: var(--m-bleu-clair); }
.m-form__etat:empty{ display:none; }
.m-form__resultat{
display:grid; gap: var(--m-e4);
padding: var(--m-e6);
background: var(--m-fond-2);
border:1px solid var(--m-bleu-fonce);
border-radius: var(--m-rayon);
animation: m-entree var(--m-t-bloc) var(--m-ease) backwards;
}
.m-form__rtitre{
margin:0;
font-size: clamp(26px, 2.4vw, 36px); font-weight:700;
line-height:1.15; letter-spacing:-.7px; color: var(--m-texte);
font-variant-numeric: tabular-nums;
}
.m-form__rtexte{ margin:0; color: var(--m-doux); }
.m-form__rnote{ margin:0; }
.m-form__rbtn:empty{ display:none; }
@media (max-width:520px){
.m-form__resultat{ padding: var(--m-e5); }
.m-form__guides{ padding: var(--m-e4); }
}
/* ---- signature manuscrite ----
Le cadre est blanc, comme du papier : le trait est sombre et doit rester
lisible une fois converti en JPEG dans le PDF. */
.m-signature{
display:grid; gap: var(--m-e2);
padding: var(--m-e4);
background: var(--m-fond-2);
border:1px solid var(--m-bordure);
border-radius: var(--m-rayon);
}
.m-signature__tete{
display:flex; align-items:center; justify-content:space-between; gap: var(--m-e3);
}
.m-signature__titre{
font-size:15px; font-weight:600; letter-spacing:.2px; color: var(--m-texte);
}
.m-signature__effacer{
font-family: var(--m-police); font-size:14px; font-weight:500;
color: var(--m-bleu); background:none; border:none; cursor:pointer;
padding:4px 6px; border-radius:8px;
transition: color var(--m-transition), background-color var(--m-transition);
}
.m-signature__effacer:hover{ color: var(--m-bleu-clair); background: var(--m-fond-3); }
.m-signature__zone{
display:block; width:100%; height:150px;
background:#FFFFFF; border-radius:10px; cursor:crosshair;
touch-action:none; /* sinon le doigt fait defiler la page au lieu de signer */
}
.m-signature__aide{ margin:0; }
@media (max-width:520px){
.m-signature{ padding: var(--m-e3); }
}
/* =========================================================================
BANDEAU DE CONSENTEMENT
« Refuser » et « Accepter » ont le meme poids visuel : un bouton de refus
discret serait un procede trompeur, et la CNIL le refuse.
========================================================================= */
.m-consent{
position:fixed; left:0; right:0; bottom:0; z-index:1000;
background: var(--m-fond-2);
border-top:1px solid var(--m-bordure);
box-shadow: 0 -12px 40px rgba(0,0,0,.45);
animation: m-consent-monte 420ms var(--m-ease) both;
}
@keyframes m-consent-monte{ from{ transform: translateY(100%); } to{ transform:none; } }
.m-consent__in{
max-width: var(--m-conteneur); margin:0 auto;
padding: var(--m-e5) var(--m-e6);
display:flex; align-items:center; gap: var(--m-e6); flex-wrap:wrap;
}
.m-consent__txt{
margin:0; flex:1 1 420px; min-width:0;
font-size:16px; line-height:1.55; color: var(--m-doux);
}
.m-consent__txt a{ text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.m-consent__btns{ display:flex; gap: var(--m-e3); flex:0 0 auto; }
/* Les deux boutons partagent exactement le meme style : ni fleche, ni fond
plein d'un cote. Un « Accepter » plus attirant que « Refuser » est un
procede trompeur, et la CNIL le sanctionne. */
.m-btn.m-consent__b{
padding:13px 26px; min-height:46px; font-size:16px; font-weight:600;
background: var(--m-fond-3); color: var(--m-texte);
border:1px solid var(--m-bordure);
}
.m-btn.m-consent__b:hover{ border-color: var(--m-bleu); background: var(--m-fond-2); }
.m-btn.m-consent__b::after{ content:none; }
/* la barre de rappel et le bandeau ne peuvent pas occuper le meme bas d ecran */
body.m-consent-ouvert .m-barre{ display:none !important; }
.m-consent-choix{ margin-top: var(--m-e5); }
.m-consent-choix .m-petit{ margin-bottom: var(--m-e3); }
@media (max-width:720px){
.m-consent__in{ padding: var(--m-e4); gap: var(--m-e4); }
.m-consent__txt{ flex-basis:100%; font-size:15px; }
.m-consent__btns{ width:100%; }
.m-consent__btns .m-btn{ flex:1 1 0; }
}
@media (prefers-reduced-motion: reduce){
.m-consent{ animation:none; }
}
/* =========================================================================
MOUVEMENT REDUIT — doit rester le dernier bloc de la feuille
========================================================================= */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
html.m-anim :where(
.m-section .m-conteneur > *, .m-section .m-grid3 > *, .m-section .m-grid2 > *,
.m-section .m-faq > *, .m-section .m-bande > *, .m-section .m-split > *,
.m-section .m-editorial > *
),
html.m-anim [data-vu],
html.m-anim .m-media,
html.m-anim .m-media img,
.m-heros .m-surtitre, .m-heros .m-lead, .m-heros .m-btnrow, .m-heros .m-media{
opacity:1 !important; transform:none !important;
clip-path:none !important; animation:none !important; transition:none !important;
}
.brxe-section.m-section::after,
.brxe-block.m-carte::after{ transform:none !important; transition:none !important; }
body::before,
.m-form__resultat,
#m-bundle:target,
html.m-anim #m-bundle[data-vu] .m-btn--principal{ animation:none !important; }
.brxe-block.m-carte:hover,
.m-btn:hover, .m-btn:active,
.m-btn--principal:hover::after{ transform:none !important; }
.m-barre{ transition:none; }
/* le retour de couleur reste : ce n'est pas du mouvement */
.brxe-block.m-carte, .m-btn, a{
transition-property: color, background-color, background, border-color !important;
transition-duration: 150ms !important;
}
}