.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-12788 .elementor-element.elementor-element-2e2023fb{font-family:"Roboto", Roboto, sans-serif;font-weight:400;color:#FFFFFF;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-image .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:var( --e-global-typography-accent-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-12788 .elementor-element.elementor-element-6c107c9a{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Roboto, sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-12788 .elementor-element.elementor-element-59c84e96 .elementor-heading-title{font-family:"Roboto", Roboto, sans-serif;font-size:37px;font-weight:600;}.elementor-12788 .elementor-element.elementor-element-43c43276{width:var( --container-widget-width, 8.227% );max-width:8.227%;--container-widget-width:8.227%;--container-widget-flex-grow:0;}.elementor-12788 .elementor-element.elementor-element-43c43276.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12788 .elementor-element.elementor-element-43c43276 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-6f2ec4a1{width:var( --container-widget-width, 8.227% );max-width:8.227%;--container-widget-width:8.227%;--container-widget-flex-grow:0;}.elementor-12788 .elementor-element.elementor-element-6f2ec4a1.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12788 .elementor-element.elementor-element-6f2ec4a1 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-775a4cb9{width:var( --container-widget-width, 8.227% );max-width:8.227%;--container-widget-width:8.227%;--container-widget-flex-grow:0;}.elementor-12788 .elementor-element.elementor-element-775a4cb9.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12788 .elementor-element.elementor-element-775a4cb9 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-2da127a3 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-25eb09f7 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-64876c90 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-4c6b0dd .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-e7e8b44 .elementor-heading-title{font-family:"Roboto", Roboto, sans-serif;font-size:18px;font-weight:600;}.elementor-12788 .elementor-element.elementor-element-6242b80{width:var( --container-widget-width, 9.744% );max-width:9.744%;--container-widget-width:9.744%;--container-widget-flex-grow:0;}.elementor-12788 .elementor-element.elementor-element-6242b80.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12788 .elementor-element.elementor-element-4621f9c3{--display:flex;}.elementor-12788 .elementor-element.elementor-element-6c1863c7 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-32ab5564 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-4d1220f5 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-1a6cc36a .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-ac8c008 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-2950508c .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-ef1833 .elementor-heading-title{font-family:"Roboto", Roboto, sans-serif;font-size:18px;font-weight:600;}.elementor-12788 .elementor-element.elementor-element-2d4112be{width:var( --container-widget-width, 9.744% );max-width:9.744%;--container-widget-width:9.744%;--container-widget-flex-grow:0;}.elementor-12788 .elementor-element.elementor-element-2d4112be.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12788 .elementor-element.elementor-element-76efe555{--display:flex;}.elementor-12788 .elementor-element.elementor-element-24f20fa6 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-7e04b46e .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-5c1763d6 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-5f03b0c .elementor-heading-title{font-family:"Roboto", Roboto, sans-serif;font-size:18px;font-weight:600;}.elementor-12788 .elementor-element.elementor-element-bd98fac{width:var( --container-widget-width, 9.744% );max-width:9.744%;--container-widget-width:9.744%;--container-widget-flex-grow:0;}.elementor-12788 .elementor-element.elementor-element-bd98fac.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-12788 .elementor-element.elementor-element-6b821e54{--display:flex;}.elementor-12788 .elementor-element.elementor-element-7a6126c8{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:0px;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-12788 .elementor-element.elementor-element-7a6126c8 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-12788 .elementor-element.elementor-element-7a6126c8 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-12788 .elementor-element.elementor-element-7a6126c8 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:"TT Firs Neue", Roboto, sans-serif;font-weight:500;}.elementor-12788 .elementor-element.elementor-element-3543493b{--display:flex;}.elementor-12788 .elementor-element.elementor-element-ddae89c .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-af0e79a .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-4d35d0e .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-5fda9c3e .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-167a1fc0 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-b0d7a9c .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-9dfa500 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-35ab5166{--display:flex;}.elementor-12788 .elementor-element.elementor-element-4f06865b .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-7deb6715 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-2f6a477a .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-34e67cac .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-3b34dd40 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-58ebaafd .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-3956a010 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-2260e146{--display:flex;}.elementor-12788 .elementor-element.elementor-element-7a8911f1 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-504fb04a .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-251b9009 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-4bdf54c8 .elementor-icon-wrapper{text-align:center;}.elementor-12788 .elementor-element.elementor-element-6bd661a0{--n-accordion-title-font-size:1rem;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:15px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-12788 .elementor-element.elementor-element-6bd661a0{--n-accordion-title-icon-order:initial;}}/* Start custom CSS *//* ==========================================================
25. HEADER MOBILE ET TABLETTE — version 4
==========================================================
>> CE QUE CORRIGE CETTE VERSION
1. Le contenu ne touche plus les bords. Le padding
latéral était posé sur .menu-m-groupe, qui ne le
recevait pas. Il est maintenant sur le CONTENEUR DE
CONTENU de l'accordéon, qui existe toujours quelle
que soit la structure interne. Voir 25.5.
2. Le chevron est dessiné en CSS sur l'en-tête, et
l'icône native du widget est masquée. Tes nouveaux
onglets sont donc corrects sans réglage : plus de
« + » par défaut à changer à chaque ajout. Voir 25.4.
3. Typographie fine. Le problème n'était pas la taille
mais la GRAISSE : PayFit est en 500 partout, jamais
en 600. Tout est redescendu d'un cran, et les écarts
sont resserrés.
Se colle APRÈS la §24 (l'aiguillage).
----------------------------------------------------------
STRUCTURE ELEMENTOR
----------------------------------------------------------
Flexbox → entete-m + classe header-mobile
├── Flexbox → entete-m-bar
│ ├── Image → entete-m-logo
│ ├── Bouton → entete-m-cta "Demander une démo"
│ └── HTML → entete-m-toggle (code ci-dessous)
└── Flexbox → entete-m-drawer
├── Bouton → menu-m-lien-simple
│ (rubrique sans sous-menu)
├── Accordéon imbriqué → menu-m-acc
│ └── dans chaque onglet :
│ Flexbox → menu-m-groupe
│ ├── Titre → menu-m-sur "PAR PROFIL"
│ ├── Flexbox → menu-m-lien × n
│ │ ├── Icône → menu-m-lien-icone
│ │ └── Flexbox → menu-m-lien-texte
│ │ ├── Titre → menu-m-lien-nom
│ │ └── Paragraphe → menu-m-lien-desc
│ └── Flexbox → menu-m-carte (facultatif)
│ ├── Icône → menu-m-carte-icone
│ ├── Titre → menu-m-carte-titre
│ ├── Paragraphe → menu-m-carte-texte
│ └── Bouton → menu-m-carte-lien
├── Bouton → menu-m-cta "Demander une démo"
└── Bouton → menu-m-connexion "Se connecter"
Variante blanche de la carte : ajouter la classe
menu-m-carte-blanche à côté de menu-m-carte.
----------------------------------------------------------
LE CODE DU WIDGET HTML
----------------------------------------------------------
----------------------------------------------------------
RÉGLAGES DU WIDGET ACCORDÉON IMBRIQUÉ
----------------------------------------------------------
▸ Classe menu-m-acc -> onglet AVANCÉ
▸ Balise HTML de titre : div
▸ Schéma FAQ : NON
▸ L'ICÔNE N'A PLUS BESOIN D'ÊTRE RÉGLÉE.
Quel que soit le dessin choisi par Elementor pour un
nouvel onglet, il est masqué et remplacé par un chevron
en masque SVG (§25.4). C'est ce qui règle le « + » qui
revenait à chaque ajout de rubrique.
----------------------------------------------------------
⚠ LES DEUX VALEURS COUPLÉES
----------------------------------------------------------
--entete-m-h : hauteur RÉELLE de la barre. Elle fixe la
hauteur du tiroir, qui vaut 100dvh moins cette valeur.
--menu-m-pad : marge latérale de TOUT le tiroir. Une
seule valeur pour l'en-tête de rubrique, le contenu, les
cartes et les boutons du pied. C'est elle qui garantit
que le bord gauche des icônes tombe pile sous celui du
libellé de rubrique.
Les deux se règlent en §25.1.
========================================================== */
/* ==========================================================
25.1 — LA BARRE
========================================================== */
.entete-m {
--entete-m-h: 60px;
--menu-m-pad: 20px;
/* Repère du tiroir, qui est en position absolue */
position: sticky !important;
top: 0;
z-index: 1000;
display: block !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
background: #FFFFFF !important;
border: none !important;
border-bottom: 1px solid #E9ECF1 !important;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.entete-m-bar,
.entete-m-bar > .e-con-inner {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.entete-m-bar {
height: var(--entete-m-h) !important;
padding: 0 var(--menu-m-pad) !important;
box-sizing: border-box;
}
.entete-m-bar > .e-con-inner { padding: 0 !important; }
.entete-m-logo {
flex: 0 0 auto !important;
margin: 0 auto 0 0 !important; /* pousse le reste à droite */
padding: 0 !important;
line-height: 0;
}
.entete-m-logo img {
display: block;
width: auto;
height: auto;
max-height: 26px;
}
/* --- Le bouton de la barre --- */
.entete-m-cta {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
.entete-m-cta :is(a, button, .elementor-button) {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 42px;
background: #1565E4 !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 9px !important;
padding: 10px 14px !important;
font-size: 13.5px;
font-weight: 500;
letter-spacing: -.005em;
white-space: nowrap;
text-decoration: none !important;
box-shadow: none !important;
}
.entete-m-cta :is(a, button, .elementor-button):active {
background: #0C4CA0 !important;
}
/* ==========================================================
25.2 — LE BURGER
La case à cocher est masquée mais reste focusable au
clavier : on ne la met pas en display: none, sinon elle
sortirait de l'ordre de tabulation.
========================================================== */
.entete-m-toggle {
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
}
.entete-m-toggle .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
line-height: 0;
}
.menu-m-toggle {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.menu-m-burger {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
background: transparent;
border: 1px solid #E9ECF1;
border-radius: 9px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 150ms linear, border-color 150ms linear;
}
.menu-m-burger:active {
background: #F5F7FA;
border-color: #CFD6E0;
}
.menu-m-toggle:focus-visible + .menu-m-burger {
outline: 2px solid #1565E4;
outline-offset: 2px;
}
/* Trois traits : le span porte celui du milieu, ses deux
pseudo-éléments les autres. */
.menu-m-burger-ligne {
position: absolute;
top: 50%;
left: 50%;
width: 17px;
height: 1.4px;
background: #101214;
border-radius: 2px;
transform: translate(-50%, -50%);
transition: background 120ms linear;
}
.menu-m-burger-ligne::before,
.menu-m-burger-ligne::after {
content: "";
position: absolute;
left: 0;
width: 17px;
height: 1.4px;
background: #101214;
border-radius: 2px;
transition: transform 220ms cubic-bezier(.2, 0, 0, 1);
}
.menu-m-burger-ligne::before { top: -5.5px; }
.menu-m-burger-ligne::after { top: 5.5px; }
/* --- Le burger devient une croix --- */
.entete-m:has(.menu-m-toggle:checked) .menu-m-burger-ligne {
background: transparent;
}
.entete-m:has(.menu-m-toggle:checked) .menu-m-burger-ligne::before {
transform: translateY(5.5px) rotate(45deg);
}
.entete-m:has(.menu-m-toggle:checked) .menu-m-burger-ligne::after {
transform: translateY(-5.5px) rotate(-45deg);
}
/* ==========================================================
25.3 — LE TIROIR
En position absolue sous la barre, pas en fixed : comme
.entete-m est collant, le tiroir suit la barre sans qu'on
ait à recalculer sa position au défilement.
100dvh et non 100vh : sur mobile, dvh tient compte de la
barre d'adresse du navigateur, qui apparaît et disparaît.
Avec vh, le bas du tiroir — donc les deux boutons —
passerait dessous et deviendrait inatteignable.
========================================================== */
.entete-m-drawer,
.entete-m-drawer > .e-con-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.entete-m-drawer {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
height: calc(100vh - var(--entete-m-h));
height: calc(100dvh - var(--entete-m-h));
overflow-y: auto;
overscroll-behavior: contain; /* le geste ne file pas à la page */
-webkit-overflow-scrolling: touch;
padding: 0 0 32px !important;
box-sizing: border-box;
background: #F7F8FA !important;
border: none !important;
/* Fermé par défaut. La visibility est retardée le temps
de l'animation, sinon le tiroir disparaîtrait d'un coup
avant d'avoir fini de s'estomper. */
visibility: hidden;
opacity: 0;
transform: translateY(-6px);
transition: opacity 160ms linear,
transform 200ms cubic-bezier(.2, 0, 0, 1),
visibility 0s linear 200ms;
}
.entete-m-drawer > .e-con-inner { padding: 0 !important; }
.entete-m:has(.menu-m-toggle:checked) .entete-m-drawer {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition-delay: 0s;
}
/* Blocage du défilement de l'arrière-plan. Le :has() sur la
racine est ce qui rend ça possible sans JavaScript.
Le !important bat l'overflow visible posé en §22.1. */
html:has(.menu-m-toggle:checked),
body:has(.menu-m-toggle:checked) {
overflow: hidden !important;
}
/* ==========================================================
25.4 — LES RUBRIQUES (l'accordéon imbriqué)
Le widget pose ses propres bordures en plus des nôtres :
on remet tout à zéro, puis on ne rajoute qu'un séparateur
entre rubriques.
LE CHEVRON EST DESSINÉ ICI, pas choisi dans le panneau.
L'icône native est masquée quoi qu'elle contienne, donc
un nouvel onglet n'arrive plus avec un « + » à corriger.
========================================================== */
.menu-m-acc,
.menu-m-acc .elementor-widget-container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Remise à zéro de toutes les bordures du widget */
.menu-m-acc .e-n-accordion,
.menu-m-acc .e-n-accordion-item,
.menu-m-acc details,
.menu-m-acc summary,
.menu-m-acc .e-n-accordion-item-title,
.menu-m-acc .e-n-accordion-item-title-header,
.menu-m-acc :is(.e-n-accordion-item, details) > .e-con,
.menu-m-acc :is(.e-n-accordion-item, details) > .e-con > .e-con-inner {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.menu-m-acc .e-n-accordion {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Le seul trait conservé : entre deux rubriques */
.menu-m-acc :is(.e-n-accordion-item, details) {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
border-bottom: 1px solid #E9ECF1 !important;
}
/* --- L'en-tête d'une rubrique ---
Graisse 500 et non 600 : c'est la graisse, pas la taille,
qui donnait l'aspect lourd. */
.menu-m-acc :is(summary, .e-n-accordion-item-title) {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 7px !important;
min-height: 54px;
margin: 0 !important;
padding: 15px var(--menu-m-pad, 20px) !important;
border-radius: 0 !important;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
letter-spacing: -.01em !important;
color: #101214 !important;
transition: background 150ms linear;
}
/* La flèche native de details */
.menu-m-acc summary::-webkit-details-marker { display: none; }
.menu-m-acc summary::marker { content: ""; }
.menu-m-acc :is(summary, .e-n-accordion-item-title):active {
background: #EFF2F6 !important;
}
.menu-m-acc :is(.e-n-accordion-item-title-text,
.e-n-accordion-item-title-header) {
flex: 0 1 auto !important;
font: inherit !important;
color: inherit !important;
letter-spacing: inherit !important;
margin: 0 !important;
padding: 0 !important;
}
/* --- Le chevron ---
L'icône du widget est masquée quoi qu'elle contienne :
c'est ce qui évite d'avoir à la régler à chaque nouvel
onglet. Le chevron ci-dessous la remplace. */
.menu-m-acc .e-n-accordion-item-title-icon {
display: none !important;
}
.menu-m-acc :is(summary, .e-n-accordion-item-title)::after {
content: "";
order: 2;
flex: 0 0 auto;
width: 15px;
height: 15px;
background: currentColor;
transition: transform 200ms cubic-bezier(.2, 0, 0, 1);
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.menu-m-acc :is(details[open], .e-n-accordion-item[open])
:is(summary, .e-n-accordion-item-title)::after {
transform: rotate(180deg);
}
/* ==========================================================
25.5 — LE CONTENU D'UNE RUBRIQUE
⚠ LE PADDING EST POSÉ ICI, sur le conteneur que le widget
crée autour du contenu. Il existe toujours, quelle que
soit la structure que tu montes à l'intérieur — alors que
.menu-m-groupe peut être imbriqué plus profond ou porter
une autre classe. C'est ce qui garantit que rien ne touche
les bords de l'écran.
Même valeur que l'en-tête de rubrique : le bord gauche
des icônes tombe donc pile sous celui du libellé.
========================================================== */
.menu-m-acc :is(.e-n-accordion-item, details) > .e-con {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 var(--menu-m-pad, 20px) 20px !important;
box-sizing: border-box;
}
.menu-m-acc :is(.e-n-accordion-item, details) > .e-con > .e-con-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.menu-m-groupe,
.menu-m-groupe > .e-con-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* --- Le sur-titre ---
Écarts resserrés. On garde un léger déséquilibre haut /
bas pour que les groupes se lisent comme des blocs, mais
sans le trou de la version précédente. */
.menu-m-sur {
width: 100% !important;
max-width: 100% !important;
margin: 18px 0 4px !important;
padding: 0 !important;
}
.menu-m-groupe > .menu-m-sur:first-child,
.menu-m-groupe > .e-con-inner > .menu-m-sur:first-child {
margin-top: 2px !important;
}
.menu-m-sur .elementor-heading-title {
font-size: 11.5px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: #98A2B3 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
25.6 — UNE LIGNE DE LIEN
Classe répétée sur le margin : c'est le margin négatif
d'une version précédente qui décalait les lignes vers la
gauche. On s'assure qu'aucun réglage du panneau ne peut
le réintroduire.
========================================================== */
.menu-m-lien,
.menu-m-lien > .e-con-inner {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
max-width: none !important;
}
.menu-m-lien.menu-m-lien.menu-m-lien {
margin: 0 !important;
}
.menu-m-lien {
min-height: 44px; /* zone tactile */
padding: 9px 0 !important;
border-radius: 8px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 150ms linear;
}
.menu-m-lien > .e-con-inner {
flex: 1 1 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Pas de survol au doigt : seul l'appui donne un retour */
.menu-m-lien:active {
background: #EFF2F6;
}
/* On ne pilote que la couleur et la taille : forcer fill ou
stroke viderait les icônes pleines, qui n'ont pas de
tracé. */
.menu-m-lien-icone {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 21px !important;
width: 21px !important;
height: 21px !important;
margin: 0 !important;
padding: 0 !important;
color: #101214 !important;
}
.menu-m-lien-icone :is(svg, i) {
width: 20px !important;
height: 20px !important;
font-size: 18px !important;
color: inherit !important;
fill: currentColor !important;
stroke-width: 1.4 !important;
}
.menu-m-lien-texte,
.menu-m-lien-texte > .e-con-inner {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.menu-m-lien-texte {
flex: 1 1 auto !important;
min-width: 0;
}
.menu-m-lien-nom {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 1px !important;
padding: 0 !important;
}
.menu-m-lien-nom .elementor-heading-title {
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
letter-spacing: -.005em !important;
color: #101214 !important;
margin: 0 !important;
padding: 0 !important;
}
.menu-m-lien-desc {
width: 100% !important;
max-width: 100% !important;
}
.menu-m-lien-desc,
.menu-m-lien-desc p {
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: #7B8794 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
25.7 — UNE RUBRIQUE SANS SOUS-MENU
Même apparence qu'un en-tête d'accordéon, pour que la
liste reste homogène.
========================================================== */
.menu-m-lien-simple {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #E9ECF1;
}
.menu-m-lien-simple :is(a, button, .elementor-button) {
display: flex !important;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 54px;
margin: 0 !important;
padding: 15px var(--menu-m-pad, 20px) !important;
background: transparent !important;
color: #101214 !important;
border: none !important;
border-radius: 0 !important;
font-size: 17px;
font-weight: 500;
line-height: 1.35;
letter-spacing: -.01em;
text-align: left;
text-decoration: none !important;
box-shadow: none !important;
}
.menu-m-lien-simple :is(a, button, .elementor-button):active {
background: #EFF2F6 !important;
}
/* ==========================================================
25.8 — LE PIED DU TIROIR
Le pied est plus resserré que le reste du tiroir : sa
marge propre s'ajoute à celle du tiroir, via un calc().
Ce léger retrait détache le bloc d'action de la liste
au-dessus — c'est lui qui empêche le bouton de peser,
pas sa hauteur.
L'arrondi reste discret : un radius généreux sur un bloc
large le ferait paraître mou.
La flèche est collée au libellé et non repoussée au bord,
pour que le groupe texte + flèche reste centré.
⚠ Le calc() garde le lien avec --menu-m-pad : le jour où
tu changes la marge du tiroir, le pied suit. Si le
bouton te paraît encore large, monte le + 8px à + 14px
sur les DEUX règles ci-dessous, sinon les deux libellés
ne s'alignent plus.
========================================================== */
.menu-m-cta {
width: 100% !important;
margin: 30px 0 0 !important;
padding: 0 calc(var(--menu-m-pad, 20px) + 8px) !important;
box-sizing: border-box;
}
.menu-m-cta :is(a, button, .elementor-button) {
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 50px;
background: #1565E4 !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 8px !important;
padding: 14px 20px !important;
font-size: 15px;
font-weight: 600;
letter-spacing: -.005em;
text-decoration: none !important;
box-shadow: none !important;
transition: background 150ms linear;
}
.menu-m-cta :is(a, button, .elementor-button)::after {
content: "";
flex: 0 0 auto;
width: 17px;
height: 17px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.menu-m-cta :is(a, button, .elementor-button):active {
background: #0C4CA0 !important;
}
/* L'icône native ferait doublon avec la flèche */
.menu-m-cta :is(.elementor-button-icon, svg, i) {
display: none !important;
}
.menu-m-connexion {
width: 100% !important;
margin: 8px 0 0 !important;
padding: 0 calc(var(--menu-m-pad, 20px) + 8px) !important;
box-sizing: border-box;
}
.menu-m-connexion :is(a, button, .elementor-button) {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
background: transparent !important;
color: #101214 !important;
border: none !important;
padding: 12px !important;
font-size: 15px;
font-weight: 600;
letter-spacing: -.005em;
text-decoration: none !important;
box-shadow: none !important;
}
/* ==========================================================
25.9 — TRÈS PETIT ÉCRAN (≤ 380 px)
Une seule variable à changer : le padding suit partout.
========================================================== */
@media (max-width: 380px) {
.entete-m {
--entete-m-h: 56px;
--menu-m-pad: 16px;
}
.entete-m-bar,
.entete-m-bar > .e-con-inner { gap: 8px !important; }
.entete-m-logo img { max-height: 24px; }
.entete-m-cta :is(a, button, .elementor-button) {
padding: 9px 11px !important;
font-size: 13px;
}
.menu-m-burger { width: 40px; height: 40px; }
.menu-m-acc :is(summary, .e-n-accordion-item-title),
.menu-m-lien-simple :is(a, button, .elementor-button) {
min-height: 50px;
padding: 14px var(--menu-m-pad, 16px) !important;
font-size: 16px !important;
}
.menu-m-lien-nom .elementor-heading-title { font-size: 14.5px !important; }
}
/* ==========================================================
25.10 — RESPECT DES PRÉFÉRENCES SYSTÈME
========================================================== */
@media (prefers-reduced-motion: reduce) {
.entete-m-drawer,
.menu-m-burger,
.menu-m-burger-ligne,
.menu-m-burger-ligne::before,
.menu-m-burger-ligne::after,
.menu-m-acc :is(summary, .e-n-accordion-item-title),
.menu-m-acc :is(summary, .e-n-accordion-item-title)::after,
.menu-m-lien {
transition-duration: 1ms !important;
}
.entete-m-drawer { transform: none !important; }
}
/* ==========================================================
25.11 — MODE ÉDITEUR
Dans l'éditeur, impossible de cocher la case : Elementor
intercepte les clics pour la sélection. Le tiroir resterait
invisible et inatteignable.
Ces règles ne s'appliquent qu'avec la classe
.elementor-editor-active, que seul l'éditeur pose. Sur le
site publié, rien ne change.
⚠ Tu ne peux donc pas tester l'ouverture dans l'éditeur.
Vérifie-la sur l'aperçu ou la page publiée.
========================================================== */
body.elementor-editor-active .entete-m-drawer {
position: static !important;
height: auto !important;
overflow: visible !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
body.elementor-editor-active
.menu-m-acc :is(.e-n-accordion-item, details) > .e-con {
display: block !important;
}
/* ==========================================================
25.12 — LES CARTES DE MISE EN AVANT
Le padding latéral vient du conteneur de contenu (§25.5),
donc la carte s'aligne d'elle-même sur les lignes de lien
et ne touche jamais le bord.
Le fond est plus soutenu que la version précédente : sur
un tiroir déjà gris clair, un bleu trop pâle ne se
détachait pas.
========================================================== */
.menu-m-carte,
.menu-m-carte > .e-con-inner {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.menu-m-carte {
margin: 18px 0 0 !important;
padding: 16px !important;
border-radius: 12px !important;
background: #DBEFFF !important;
box-sizing: border-box;
}
.menu-m-carte > .e-con-inner { padding: 0 !important; }
.menu-m-carte + .menu-m-carte { margin-top: 10px !important; }
/* --- La variante blanche --- */
.menu-m-carte-blanche {
background: #FFFFFF !important;
border: 1px solid #E9ECF1 !important;
}
/* --- L'icône --- */
.menu-m-carte-icone {
flex: 0 0 auto !important;
width: auto !important;
margin: 0 0 12px !important;
padding: 0 !important;
line-height: 0;
color: #101214 !important;
}
.menu-m-carte-icone :is(svg, i) {
width: 22px !important;
height: 22px !important;
font-size: 20px !important;
color: inherit !important;
fill: currentColor !important;
stroke-width: 1.4 !important;
}
/* --- Les textes --- */
.menu-m-carte-titre,
.menu-m-carte-texte,
.menu-m-carte-lien {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}
.menu-m-carte-titre,
.menu-m-carte-titre .elementor-heading-title {
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: -.005em !important;
color: #101214 !important;
margin: 0 0 5px !important;
padding: 0 !important;
}
.menu-m-carte-texte,
.menu-m-carte-texte p {
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
color: #5B6B7F !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
/* --- Le lien --- */
.menu-m-carte-lien :is(a, button, .elementor-button) {
display: inline-flex !important;
align-items: center;
gap: 7px;
min-height: 40px;
background: transparent !important;
color: #1565E4 !important;
border: none !important;
padding: 0 !important;
font-size: 14px;
font-weight: 500;
letter-spacing: -.005em;
text-decoration: none !important;
box-shadow: none !important;
}
.menu-m-carte-lien :is(a, button, .elementor-button)::after {
content: "";
flex: 0 0 auto;
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.menu-m-carte-lien :is(a, button, .elementor-button):active {
color: #0C4CA0 !important;
}
.menu-m-carte-lien :is(.elementor-button-icon, svg, i) {
display: none !important;
}
/* ==========================================================
RÉGLAGES RAPIDES — HEADER MOBILE
>> LA MARGE LATÉRALE, UNE SEULE VALEUR
--menu-m-pad -> 20px (25.1)
Elle pilote la barre, l'en-tête de rubrique, le
contenu, les cartes et les boutons du pied.
Change-la ici et tout suit.
⚠ Elle est appliquée sur le CONTENEUR DE CONTENU
de l'accordéon (§25.5), pas sur .menu-m-groupe.
Ce conteneur existe toujours, quelle que soit
la structure montée dedans : c'est ce qui
garantit que rien ne touche le bord.
>> LA GRAISSE, LA CLÉ DU RENDU
En-tête de rubrique -> 17px / 500
Titre de lien -> 15px / 500
Description -> 12,5px / 400
Sur-titre -> 11,5px / 500 / .1em
PayFit est en 500 partout, jamais en 600. C'est la
graisse, pas la taille, qui donnait l'aspect lourd.
Si tu remontes à 600, tout redevient épais.
>> LES ÉCARTS DES GROUPES
Au-dessus d'un sur-titre -> 18px (25.5)
En dessous -> 4px (25.5)
Premier sur-titre -> 2px seulement
Le léger déséquilibre suffit à faire lire les
groupes comme des blocs, sans creuser un trou.
>> LE CHEVRON
Dessiné en CSS sur l'en-tête (§25.4), l'icône
native du widget est masquée quoi qu'elle
contienne. Un nouvel onglet n'arrive donc plus
avec un « + » à corriger : il n'y a plus rien à
régler dans le panneau.
>> LES CARTES
Fond teinté -> #DBEFFF (25.12)
Variante blanche -> classe
menu-m-carte-blanche
Pour un bloc encore plus marqué : #C9E2FF,
ou #12376B avec les textes en blanc.
>> LA HAUTEUR DE LA BARRE
--entete-m-h -> 60px (25.1)
Elle fixe la barre ET le tiroir, qui vaut
100dvh moins cette valeur.
>> MODE ÉDITEUR
Le tiroir reste ouvert dans l'éditeur (25.11).
Vérifie l'ouverture sur l'aperçu ou la page
publiée.
>> SI LE TIROIR NE S'OUVRE PAS
Vérifie que le widget HTML est bien DANS
.entete-m : le :has() de la §25.3 part de là.
========================================================== */
/* ==========================================================
22. EN-TÊTE FLOTTANT ET MÉGA MENU — version 11
==========================================================
>> CE QUE CHANGE CETTE VERSION
1. Icônes réparées. Le fill: none de la v10 affinait les
icônes de type contour mais VIDAIT les icônes pleines,
qui n'ont pas de tracé. On ne pilote plus que la
couleur et la taille. Voir 22.8.
2. Hiérarchie typographique reprise sur PayFit : deux
niveaux forts à 14-15px (en-têtes de rubrique et
titres de liens) et un seul niveau faible à 12,5px
pour les descriptions. Voir 22.7 et 22.8.
3. Animation du bouton de démo : nappe foncée qui balaie
depuis la gauche, flèche qui déplie sa largeur. La
place de la croissance est réservée d'avance pour ne
pas pousser « Se connecter ». Voir 22.4.
La police
---------
Elle n'est pas imposée en CSS : elle reste pilotable dans
le panneau. On ajoute seulement le lissage antialiasé et
un léger resserrement sur les titres — c'est ce qui creuse
vraiment l'écart de rendu, plus que la fonte elle-même.
Pour la typo PayFit à l'identique :
Réglages du site > Typographie > Inter.
----------------------------------------------------------
À VÉRIFIER DANS ELEMENTOR
----------------------------------------------------------
▸ Le CSS ID nav-glow se pose sur l'ITEM de menu
(le 4e élément du widget Menu), pas sur le texte.
▸ Affichage = FLEX sur .entete-inner, .entete-cta,
.menu-panneau, .menu-cols, .menu-col, .menu-lien,
.menu-lien-texte, .menu-carte
▸ Écarts = 0 sur tous ces Flexbox
▸ Aucune Largeur max sur .entete-cta ni sur .entete-nav
▸ .entete-inner : Débordement = Visible
▸ Widget Menu > Contenu :
Ouvrir au : Survol
Position du contenu : Pleine largeur
⚠ Si tu utilises la §23, elle se colle APRÈS celle-ci :
elle remplace volontairement le collage de la §22.1.
----------------------------------------------------------
CLASSES À POSER
----------------------------------------------------------
HEADER
.entete -> Flexbox extérieur (transparent)
.entete-inner -> Flexbox intérieur (la bulle blanche)
.entete-logo -> widget Image du logo
.entete-nav -> widget Menu
.entete-cta -> Flexbox des boutons
.btn-ghost -> Bouton "Se connecter"
.btn-plein -> Bouton "Demander une démo"
#nav-glow -> CSS ID sur le 4e item de menu
PANNEAU DÉROULANT
.menu-panneau -> Flexbox du panneau
.menu-cols -> Flexbox des colonnes
.menu-col -> chaque colonne
.menu-col-titre -> Titre de colonne
.menu-lien -> Flexbox d'une ligne cliquable
.menu-lien-icone -> l'Icône
.menu-lien-texte -> Flexbox titre + description
.menu-lien-nom -> Titre du lien
.menu-lien-desc -> la description
.menu-carte -> Flexbox de la carte à droite
.menu-carte-img -> l'Image
.menu-carte-sur -> le sur-titre
.menu-carte-titre -> le Titre
.menu-carte-texte -> le Paragraphe
.menu-carte-lien -> le Bouton
========================================================== */
/* ==========================================================
22.1 — LE CADRE FLOTTANT ET LE COLLAGE AU DÉFILEMENT
========================================================== */
html,
body,
#page,
main,
.site-main,
.elementor,
.elementor-location-header {
overflow: visible !important;
overflow-x: clip; /* clip ne casse pas le sticky, hidden si */
}
.elementor-location-header {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
background: transparent !important;
}
.entete {
position: sticky !important;
top: 0;
z-index: 999;
display: block !important;
background: transparent !important;
border: none !important;
padding: 14px 20px 0 !important;
box-sizing: border-box;
/* Jamais d'overflow: hidden : il rognerait le panneau. */
overflow: visible !important;
}
.entete-inner {
/* Repère de position du panneau */
position: relative !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 34px !important;
max-width: 1320px;
width: 100%;
margin: 0 auto !important;
/* Padding droit à 0 : c'est .entete-cta qui le porte, pour
réserver la place où le bouton de démo va grandir (22.4).
Le padding BAS de 16px est structurel : c'est lui que
vient recouvrir la bande de fusion de la §22.10. */
padding: 16px 0 16px 20px !important;
box-sizing: border-box;
background: #FFFFFF !important;
border: none !important;
box-shadow: 0 2px 12px -7px rgba(18, 55, 107, .16) !important;
overflow: visible !important;
transition: box-shadow 150ms linear;
}
/* Le lissage antialiasé fait plus pour le rendu que le
choix de la fonte : les graisses moyennes cessent de
baver et les titres gagnent en netteté. */
.entete-inner,
.entete-nav .e-n-menu-content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.entete-inner:hover,
.entete-inner:has(.e-n-menu-item[aria-expanded="true"]),
.entete-inner:has(.e-n-menu-title[aria-expanded="true"]),
.entete-inner:has(.e-n-menu-item.e-active) {
box-shadow: none !important;
}
.entete-logo {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
}
.entete-logo img {
display: block;
width: auto;
height: auto;
max-height: 34px;
}
/* ----------------------------------------------------------
22.2 — LES TITRES DE MENU
Quasi noir et non bleu, comme chez PayFit : le bleu reste
réservé aux boutons d'action. L'encart de survol passe au
même gris que les liens du panneau, pour que le header et
le panneau parlent la même langue.
Pour revenir à l'encart bleu : fond #EDF4FF et
color: #1565E4 sur la règle de survol.
---------------------------------------------------------- */
.entete-nav {
flex: 0 1 auto !important;
min-width: 0;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.entete-nav .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
.entete-nav .e-n-menu-heading {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 3px !important;
margin: 0 !important;
padding: 0 !important;
}
.entete-nav .e-n-menu-title {
display: flex !important;
align-items: center !important;
gap: 6px !important;
background: transparent !important;
border: none !important;
border-radius: 9px !important;
padding: 9px 12px !important;
margin: 0 !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: -.005em !important;
color: #101214 !important;
white-space: nowrap;
cursor: pointer;
transition: background 150ms linear;
}
.entete-nav .e-n-menu-title-text,
.entete-nav .e-n-menu-title-container {
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
margin: 0 !important;
padding: 0 !important;
}
.entete-nav .e-n-menu-title:hover,
.entete-nav .e-n-menu-item[aria-expanded="true"] .e-n-menu-title,
.entete-nav .e-n-menu-title[aria-expanded="true"] {
background: #F5F7FA !important;
color: #101214 !important;
}
/* --- Le chevron --- */
.entete-nav .e-n-menu-dropdown-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 12px !important;
height: 12px !important;
margin: 0 !important;
padding: 0 !important;
color: #8296B0 !important;
transition: transform 220ms cubic-bezier(.2, 0, 0, 1),
color 150ms linear;
}
.entete-nav .e-n-menu-dropdown-icon svg,
.entete-nav .e-n-menu-dropdown-icon i {
width: 12px !important;
height: 12px !important;
font-size: 11px !important;
color: inherit !important;
fill: currentColor !important;
}
.entete-nav .e-n-menu-dropdown-icon .e-opened { display: none !important; }
.entete-nav .e-n-menu-dropdown-icon .e-closed { display: flex !important; }
.entete-nav .e-n-menu-item[aria-expanded="true"] .e-n-menu-dropdown-icon,
.entete-nav .e-n-menu-title[aria-expanded="true"] .e-n-menu-dropdown-icon {
transform: rotate(180deg);
color: #101214 !important;
}
/* ==========================================================
22.3 — LE BADGE #nav-glow
Le texte est dans le content : c'est ici et nulle part
ailleurs qu'on le change.
Pour un badge à plat, supprimer la ligne box-shadow.
========================================================== */
#nav-glow .e-n-menu-title-text,
.e-n-menu-title-text#nav-glow {
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
}
#nav-glow .e-n-menu-title-text::after,
.e-n-menu-title-text#nav-glow::after {
content: "Sept. 2027";
display: inline-flex;
align-items: center;
flex: 0 0 auto;
padding: 3px 9px 4px;
border-radius: 999px;
background: #DBEFFF;
color: #1565E4;
font-size: 11.5px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .2px;
white-space: nowrap;
text-transform: none;
box-shadow: 0 0 0 4px rgba(219, 239, 255, .55);
}
#nav-glow .e-n-menu-dropdown-icon {
display: none !important;
}
/* ==========================================================
22.4 — LES BOUTONS DE DROITE
Seul endroit du header où le bleu est employé : c'est ce
qui lui rend sa valeur de signal.
Le bouton plein grandit VRAIMENT : le gap s'ouvre et la
flèche déplie sa largeur. Pour que ça ne pousse pas
« Se connecter », les 20px de croissance sont réservés
d'avance en padding sur .entete-cta. Le bouton grandit
dedans, la largeur du groupe ne change jamais.
⚠ padding-right de .entete-cta = gap + largeur de flèche.
Ces trois valeurs vont ensemble.
========================================================== */
.entete-cta {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
gap: 10px !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin: 0 0 0 auto !important;
/* La place où le bouton va grandir : 6px de gap + 14px
de flèche. Remplace aussi le padding droit de la bulle,
retiré en §22.1. */
padding: 0 20px 0 0 !important;
}
/* --- Bouton contour --- */
.btn-ghost :is(a, button, .elementor-button) {
display: inline-flex !important;
align-items: center;
background: transparent !important;
color: #101214 !important;
border: 1px solid #E1E6EE !important;
border-radius: 10px !important;
padding: 11px 18px !important;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -.005em;
white-space: nowrap;
text-decoration: none !important;
box-shadow: none !important;
transition: background 150ms cubic-bezier(.2, 0, 0, 1),
border-color 150ms cubic-bezier(.2, 0, 0, 1);
}
.btn-ghost :is(a, button, .elementor-button):hover {
background: #F5F7FA !important;
border-color: #C9D3E0 !important;
}
/* --- Bouton plein --- */
.btn-plein :is(a, button, .elementor-button) {
position: relative;
z-index: 0;
isolation: isolate;
overflow: hidden;
display: inline-flex !important;
align-items: center;
gap: 0;
background: #1565E4 !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 10px !important;
padding: 12px 18px !important;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -.005em;
white-space: nowrap;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer;
transition: gap 160ms cubic-bezier(.2, 0, 0, 1);
}
/* La nappe foncée qui se déploie depuis la gauche.
C'est elle qui porte l'effet — la flèche seule est
beaucoup moins satisfaisante. */
.btn-plein :is(a, button, .elementor-button)::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #0C4CA0;
transform: scaleX(0);
transform-origin: left center;
transition: transform 240ms cubic-bezier(.2, 0, 0, 1);
}
.btn-plein :is(a, button, .elementor-button):hover::before,
.btn-plein :is(a, button, .elementor-button):focus-visible::before {
transform: scaleX(1);
}
/* La flèche déplie sa largeur : c'est ce qui fait grandir
le bouton, pas une translation. */
.btn-plein :is(a, button, .elementor-button)::after {
content: "";
flex: 0 0 auto;
width: 0;
height: 14px;
background: #FFFFFF;
opacity: 0;
transition: width 160ms cubic-bezier(.2, 0, 0, 1),
opacity 120ms linear;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.btn-plein :is(a, button, .elementor-button):hover,
.btn-plein :is(a, button, .elementor-button):focus-visible {
gap: 6px;
}
.btn-plein :is(a, button, .elementor-button):hover::after,
.btn-plein :is(a, button, .elementor-button):focus-visible::after {
width: 14px;
opacity: 1;
}
.btn-plein :is(a, button, .elementor-button):active::before {
background: #093A7D;
}
/* L'icône native ferait doublon avec la flèche */
.btn-plein :is(.elementor-button-icon, svg, i) {
display: none !important;
}
.btn-ghost :is(a, button, .elementor-button):focus-visible,
.btn-plein :is(a, button, .elementor-button):focus-visible {
outline: 2px solid #1565E4;
outline-offset: 3px;
}
/* ==========================================================
22.5 — L'ANCRAGE DU PANNEAU
On ne touche QU'aux repères de position. Le position, le
top et l'animation d'ouverture restent à Elementor.
========================================================== */
.entete-nav,
.entete-nav .e-n-menu,
.entete-nav .e-n-menu-wrapper,
.entete-nav .e-n-menu-heading,
.entete-nav .e-n-menu-item,
.entete-nav .e-n-menu-title {
position: static !important;
}
.entete-nav .e-n-menu-content {
left: 0 !important;
right: 0 !important;
inset-inline-start: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
/* ==========================================================
22.6 — NEUTRALISER LES CONTENEURS INTERNES
Elementor glisse un .e-con-inner dans chaque Flexbox et le
bride à la largeur de contenu du site. Chaque .e-con-inner
recopie ici le flex de son parent.
Réflexe : si un Flexbox ignore tes règles alors que la
classe est bien posée, cherche un .e-con-inner entre les
deux — il n'apparaît nulle part dans le Navigateur.
========================================================== */
.entete-inner .e-con-inner,
.entete-nav .e-n-menu-content .e-con-inner,
.entete-nav .e-n-menu-content > .e-con {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.menu-panneau > .e-con-inner {
display: flex !important;
flex-flow: row nowrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 48px !important;
flex: 1 1 auto !important;
}
.menu-cols > .e-con-inner {
display: flex !important;
flex-flow: row wrap !important;
align-items: flex-start !important;
gap: 40px !important;
flex: 1 1 auto !important;
}
.menu-col > .e-con-inner,
.menu-lien-texte > .e-con-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
flex: 1 1 auto !important;
}
/* L'air ENTRE les rangées. Le couple titre + description
reste serré : c'est ce contraste qui aère, pas un
espacement uniforme partout. */
.menu-col > .e-con-inner { gap: 8px !important; }
.menu-lien-texte > .e-con-inner { gap: 0 !important; }
.menu-carte > .e-con-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
flex: 1 1 auto !important;
}
.menu-lien > .e-con-inner {
display: flex !important;
flex-flow: row nowrap !important;
align-items: flex-start !important;
gap: 12px !important;
flex: 1 1 auto !important;
}
/* ----------------------------------------------------------
22.7 — LE PANNEAU
---------------------------------------------------------- */
.menu-panneau {
display: flex !important;
flex-flow: row nowrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 48px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 32px 30px 40px !important;
border: none !important;
box-sizing: border-box;
}
.menu-cols {
order: 1 !important;
display: flex !important;
flex-flow: row wrap !important;
align-items: flex-start !important;
gap: 40px !important;
flex: 1 1 auto !important;
min-width: 0;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.menu-col {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
flex: 1 1 250px !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.menu-col-titre {
width: 100% !important;
max-width: 100% !important;
/* 4px seulement : le padding haut de la première ligne
ajoute déjà 14px, sinon le titre décrocherait. */
margin: 0 0 4px !important;
padding: 0 !important;
}
/* Un vrai en-tête de rubrique, pas une étiquette. Le peu
d'interlettrage est ce qui fait la différence : au-delà
de .02em le titre passe en mode chuchoté. */
.menu-col-titre .elementor-heading-title {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
color: #6B7A94 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ----------------------------------------------------------
22.8 — UNE LIGNE DE LIEN
Deux niveaux forts à 14-15px — en-tête de rubrique et
titre de lien — et un seul niveau faible, la description,
nettement plus petite et plus claire. C'est ce qui creuse
la hiérarchie, pas la couleur seule.
Le padding de 14px et le margin négatif correspondant
font déborder le fond du survol hors de la colonne, pour
que le texte reste aligné sur le titre de colonne.
---------------------------------------------------------- */
.menu-lien {
display: flex !important;
flex-flow: row nowrap !important;
align-items: flex-start !important;
gap: 12px !important;
width: auto !important;
max-width: none !important;
padding: 14px !important;
margin: 0 -14px !important;
border-radius: 12px;
cursor: pointer;
transition: background 150ms linear;
}
.menu-lien:hover {
background: #F5F7FA;
}
/* --- L'icône ---
On ne pilote QUE la couleur et la taille. Forcer fill ou
stroke viderait les icônes pleines, qui n'ont pas de
tracé : il ne resterait qu'un contour fantôme. */
.menu-lien-icone {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 20px !important;
width: 20px !important;
height: 20px !important;
margin: 1px 0 0 !important;
padding: 0 !important;
color: #101214 !important;
}
.menu-lien-icone svg,
.menu-lien-icone i {
width: 19px !important;
height: 19px !important;
font-size: 17px !important;
color: inherit !important;
fill: currentColor !important;
stroke-width: 1.5 !important;
}
/* --- Le bloc texte --- */
.menu-lien-texte {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
flex: 1 1 auto !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.menu-lien-nom {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 2px !important;
padding: 0 !important;
}
.menu-lien-nom .elementor-heading-title {
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: -.005em !important;
color: #101214 !important;
margin: 0 !important;
padding: 0 !important;
}
.menu-lien-desc {
width: 100% !important;
max-width: 100% !important;
}
.menu-lien-desc,
.menu-lien-desc p {
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
color: #6B7A94 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ----------------------------------------------------------
22.9 — LA CARTE DE DROITE
Même hiérarchie que les colonnes : sur-titre à 14px,
description à 12,5px.
---------------------------------------------------------- */
.menu-carte {
order: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
margin: 0 0 0 auto !important;
background: #EDF4FF;
border-radius: 14px;
padding: 16px 16px 20px !important;
box-sizing: border-box;
}
.menu-carte-img,
.menu-carte-sur,
.menu-carte-titre,
.menu-carte-texte,
.menu-carte-lien {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}
.menu-carte-img {
margin: 0 0 14px !important;
padding: 0 !important;
line-height: 0;
}
.menu-carte-img img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 10px;
}
.menu-carte-sur,
.menu-carte-sur .elementor-heading-title {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
color: #6B7A94 !important;
margin: 0 0 7px !important;
padding: 0 !important;
}
.menu-carte-titre,
.menu-carte-titre .elementor-heading-title {
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: -.01em !important;
color: #101214 !important;
margin: 0 0 8px !important;
padding: 0 !important;
}
.menu-carte-texte,
.menu-carte-texte p {
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
color: #6B7A94 !important;
margin: 0 0 14px !important;
padding: 0 !important;
}
/* Le lien de la carte est une action : le bleu y revient */
.menu-carte-lien :is(a, button, .elementor-button) {
display: inline-flex !important;
align-items: center;
gap: 8px;
background: transparent !important;
color: #1565E4 !important;
border: none !important;
padding: 0 !important;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -.005em;
text-decoration: none !important;
box-shadow: none !important;
transition: color 150ms linear;
}
.menu-carte-lien :is(a, button, .elementor-button)::after {
content: "";
flex: 0 0 auto;
width: 15px;
height: 15px;
background: currentColor;
transition: transform 200ms cubic-bezier(.2, 0, 0, 1);
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.menu-carte-lien :is(a, button, .elementor-button):hover {
color: #0C4CA0 !important;
}
.menu-carte-lien :is(a, button, .elementor-button):hover::after {
transform: translateX(4px);
}
.menu-carte-lien :is(.elementor-button-icon, svg, i) {
display: none !important;
}
/* ==========================================================
22.10 — LA FUSION HEADER / PANNEAU
Le panneau est collé sous la bulle, coins hauts carrés.
Un ::before le prolonge de 16px vers le haut : cette bande
blanche recouvre exactement le padding bas du header, donc
elle comble ses coins arrondis.
Comme cette bande appartient à .e-n-menu-content, elle
sert aussi de PASSERELLE DE SURVOL : il n'existe plus un
seul pixel mort entre le titre et le panneau.
⚠ Les 16px de la bande = le padding bas de .entete-inner.
========================================================== */
.entete-nav .e-n-menu-content {
z-index: 5 !important;
margin-top: 0 !important;
background: #FFFFFF !important;
border: none !important;
box-shadow: 0 24px 48px -28px rgba(18, 55, 107, .30) !important;
padding: 0 !important;
}
.entete-nav .e-n-menu-content::before {
content: "";
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
background: #FFFFFF;
pointer-events: auto;
}
/* ==========================================================
22.11 — ÉCRAN INTERMÉDIAIRE (≤ 1320 px)
========================================================== */
@media (max-width: 1320px) {
.entete { padding: 12px 16px 0 !important; }
.entete-inner { gap: 24px !important; }
.entete-nav .e-n-menu-title {
padding: 9px 10px !important;
font-size: 14.5px !important;
}
.menu-panneau,
.menu-panneau > .e-con-inner { gap: 36px !important; }
.menu-panneau { padding: 30px 24px 36px !important; }
.menu-cols,
.menu-cols > .e-con-inner { gap: 32px !important; }
.menu-col { flex: 1 1 220px !important; }
.menu-carte {
flex: 0 0 290px !important;
width: 290px !important;
max-width: 290px !important;
}
}
/* ==========================================================
22.12 — PETIT PORTABLE (≤ 1100 px)
========================================================== */
@media (max-width: 1100px) {
.entete-inner {
gap: 16px !important;
padding: 14px 0 14px 16px !important;
}
/* La bande suit le padding bas */
.entete-nav .e-n-menu-content::before {
top: -14px;
height: 14px;
}
.entete-logo img { max-height: 30px; }
.entete-nav .e-n-menu-title {
padding: 8px 9px !important;
font-size: 14px !important;
}
#nav-glow .e-n-menu-title-text::after,
.e-n-menu-title-text#nav-glow::after {
font-size: 11px;
padding: 2px 8px 3px;
}
.entete-cta {
gap: 8px !important;
padding-right: 18px !important;
}
.btn-ghost :is(a, button, .elementor-button) {
padding: 10px 14px !important;
font-size: 14px;
}
.btn-plein :is(a, button, .elementor-button) {
padding: 11px 14px !important;
font-size: 14px;
}
.menu-panneau,
.menu-panneau > .e-con-inner { gap: 28px !important; }
.menu-cols,
.menu-cols > .e-con-inner { gap: 26px !important; }
.menu-col { flex: 1 1 200px !important; }
.menu-lien { padding: 12px !important; margin: 0 -12px !important; }
.menu-carte {
flex: 0 0 250px !important;
width: 250px !important;
max-width: 250px !important;
}
}
/* ==========================================================
22.13 — TABLETTE (≤ 900 px)
La carte disparaît : à cette largeur elle mange la place
des liens, qui sont l'essentiel du menu.
========================================================== */
@media (max-width: 900px) {
.menu-carte { display: none !important; }
.menu-panneau { padding: 26px 20px 30px !important; }
.menu-panneau,
.menu-panneau > .e-con-inner { gap: 0 !important; }
.menu-cols,
.menu-cols > .e-con-inner { gap: 24px 28px !important; }
.menu-col { flex: 1 1 200px !important; }
/* Le bouton contour passe à la trappe avant le mobile :
deux CTA plus un menu ne tiennent plus. */
.btn-ghost { display: none !important; }
}
/* ==========================================================
22.14 — MOBILE (≤ 767 px)
Le panneau redevient un tiroir dans le flux, et les
effets de survol sont neutralisés : au doigt il n'y a pas
de sortie de survol, donc un bouton ouvert le resterait.
========================================================== */
@media (max-width: 767px) {
.entete { padding: 10px 12px 0 !important; }
.entete-inner {
gap: 10px !important;
padding: 8px 8px 8px 14px !important;
justify-content: space-between !important;
}
.entete-inner:hover {
box-shadow: 0 2px 12px -7px rgba(18, 55, 107, .16) !important;
}
.entete-logo img { max-height: 28px; }
/* Plus de croissance : plus de place à réserver */
.entete-cta { padding-right: 0 !important; }
.btn-plein :is(a, button, .elementor-button) {
min-height: 44px; /* zone tactile */
padding: 11px 16px !important;
font-size: 14px;
}
.btn-plein :is(a, button, .elementor-button)::after {
display: none;
}
.btn-plein :is(a, button, .elementor-button):hover {
gap: 0;
}
/* Le balayage foncé reste : c'est le retour visuel
de l'appui. */
.btn-plein :is(a, button, .elementor-button):hover::before {
transform: scaleX(1);
}
/* --- Retour au flux normal --- */
.entete-nav .e-n-menu-content {
z-index: auto !important;
box-shadow: none !important;
}
.entete-nav .e-n-menu-content::before {
display: none;
}
.menu-panneau,
.menu-panneau > .e-con-inner {
flex-flow: column nowrap !important;
gap: 22px !important;
}
.menu-panneau { padding: 18px 14px 24px !important; }
.menu-cols,
.menu-cols > .e-con-inner {
flex-flow: column nowrap !important;
gap: 24px !important;
}
.menu-col { flex: 1 1 100% !important; }
/* Zone tactile confortable, et pas de survol au doigt */
.menu-lien {
min-height: 56px;
align-items: center !important;
padding: 12px !important;
margin: 0 -12px !important;
}
.menu-lien > .e-con-inner { align-items: center !important; }
.menu-lien:hover { background: transparent; }
.menu-lien-icone { margin-top: 0 !important; }
.entete-nav .e-n-menu-title {
padding: 14px 12px !important;
font-size: 16px !important;
min-height: 48px;
}
}
/* ==========================================================
22.15 — TRÈS PETIT ÉCRAN (≤ 380 px)
========================================================== */
@media (max-width: 380px) {
.entete { padding: 8px 8px 0 !important; }
.entete-inner { padding: 7px 7px 7px 12px !important; }
.entete-logo img { max-height: 25px; }
.btn-plein :is(a, button, .elementor-button) {
padding: 10px 12px !important;
font-size: 13.5px;
}
.menu-panneau { padding: 16px 12px 20px !important; }
.menu-lien-desc,
.menu-lien-desc p { font-size: 12px !important; }
}
/* ==========================================================
22.16 — RESPECT DES PRÉFÉRENCES SYSTÈME
Le balayage du bouton reste déployé au survol : on
supprime le mouvement, pas le retour visuel.
========================================================== */
@media (prefers-reduced-motion: reduce) {
.entete-inner,
.entete-nav .e-n-menu-title,
.entete-nav .e-n-menu-dropdown-icon,
.menu-lien,
.menu-carte-lien :is(a, button, .elementor-button),
.menu-carte-lien :is(a, button, .elementor-button)::after,
.btn-ghost :is(a, button, .elementor-button),
.btn-plein :is(a, button, .elementor-button),
.btn-plein :is(a, button, .elementor-button)::before,
.btn-plein :is(a, button, .elementor-button)::after {
transition-duration: 1ms !important;
}
.btn-plein :is(a, button, .elementor-button):hover::before {
transform: scaleX(1) !important;
}
.menu-carte-lien :is(a, button, .elementor-button):hover::after {
transform: none !important;
}
}
/* ==========================================================
22.17 — LES ARRONDIS
Le border-radius passe bien sur .entete-inner, mais la
surface blanche visible peut être peinte par une autre
couche : la pseudo-couche de fond d'Elementor, ou le
.e-con-inner. Ces couches ne reprennent pas l'arrondi de
leur parent toutes seules. On arrondit donc la boîte ET
ses couches.
⚠ SI ÇA RÉSISTE
Sélectionne .entete-inner dans le Navigateur, puis
Style > Bordure > Rayon > 16. Elementor pose alors
l'arrondi sur la bonne couche lui-même.
========================================================== */
.entete-inner.entete-inner.entete-inner,
.entete-inner.entete-inner.entete-inner > .e-con-inner {
border-radius: 16px !important;
}
.entete-inner::before,
.entete-inner::after,
.entete-inner > .e-con-inner::before,
.entete-inner > .e-con-inner::after {
border-radius: inherit !important;
}
.entete-nav .e-n-menu-content.e-n-menu-content.e-n-menu-content,
.entete-nav .e-n-menu-content.e-n-menu-content.e-n-menu-content > .e-con,
.entete-nav .e-n-menu-content .menu-panneau,
.entete-nav .e-n-menu-content .menu-panneau > .e-con-inner {
border-radius: 0 0 16px 16px !important;
}
.entete-nav .e-n-menu-content::after,
.entete-nav .menu-panneau::before,
.entete-nav .menu-panneau::after {
border-radius: inherit !important;
}
@media (max-width: 767px) {
.entete-inner.entete-inner.entete-inner,
.entete-inner.entete-inner.entete-inner > .e-con-inner {
border-radius: 14px !important;
}
.entete-nav .e-n-menu-content.e-n-menu-content.e-n-menu-content,
.entete-nav .e-n-menu-content.e-n-menu-content.e-n-menu-content > .e-con,
.entete-nav .e-n-menu-content .menu-panneau,
.entete-nav .e-n-menu-content .menu-panneau > .e-con-inner {
border-radius: 0 !important;
}
}
@media (max-width: 380px) {
.entete-inner.entete-inner.entete-inner,
.entete-inner.entete-inner.entete-inner > .e-con-inner {
border-radius: 12px !important;
}
}
/* ==========================================================
RÉGLAGES RAPIDES — EN-TÊTE ET MÉGA MENU
>> LA RÈGLE DE COULEUR
Quasi noir #101214 -> tous les titres et les icônes
Gris moyen #6B7A94 -> en-têtes de rubrique ET
descriptions
Gris clair #8296B0 -> chevrons
Bleu #1565E4 -> UNIQUEMENT les actions :
bouton plein, lien de la carte,
badge.
C'est cette discipline qui fait le rendu PayFit. Si tu
remets du bleu sur les titres de liens, tout redevient
uniformément « cliquable » et la hiérarchie tombe.
>> LA HIÉRARCHIE TYPOGRAPHIQUE
Deux niveaux FORTS à 14-15px :
en-têtes de rubrique -> 14px / 600 / .02em (22.7)
titres de menu -> 15px / 500 (22.2)
titres de liens -> 15px / 600 (22.8)
Un seul niveau FAIBLE :
descriptions -> 12,5px / #6B7A94 (22.8)
L'écart de 2,5 points est ce qui creuse la
hiérarchie. Quatre niveaux de taille voisine
distingués par la seule couleur donnaient une
bouillie.
⚠ L'interlettrage des en-têtes : au-delà de .02em
ils repassent en mode étiquette chuchotée.
>> LES ICÔNES
Taille -> 20px (22.8)
Couleur -> #101214, fixe au survol
Écart icône / texte -> gap 12px (22.8)
⚠ Ne JAMAIS forcer fill: none ni stroke sur les
icônes : ça affine les icônes de type contour
mais vide les icônes pleines, qui n'ont pas de
tracé. Seules la couleur et la taille se pilotent.
>> L'ANIMATION DU BOUTON DE DÉMO
Balayage foncé -> 240ms (22.4)
Gap et flèche -> 160ms (22.4)
Place réservée -> padding-right 20px
sur .entete-cta (22.4)
⚠ padding-right de .entete-cta = gap (6px) +
largeur de flèche (14px). Si tu changes l'un,
change les autres, sinon « Se connecter » se
remet à bouger au survol.
>> LE RYTHME
Air entre les rangées -> gap 8px sur .menu-col
Couple titre / desc -> margin 2px seulement
Padding d'une ligne -> 14px, margin -14px (22.8)
>> LES DEUX CURSEURS DE LA FUSION
Padding bas de la bulle -> 16px (22.1)
Hauteur de la bande -> 16px (22.10)
Ces deux valeurs vont ensemble.
>> CE QUI DISPARAÎT, ET QUAND
La carte -> sous 900 px (22.13)
Le bouton contour -> sous 900 px (22.13)
La flèche et la bande -> sous 767 px (22.14)
========================================================== */
/* ==========================================================
23. BANDEAU D'ANNONCE — version 2
==========================================================
Un bandeau bleu au-dessus du header. Il glisse hors de
l'écran au défilement, le header reste collé en haut.
Une croix le ferme définitivement.
----------------------------------------------------------
STRUCTURE ELEMENTOR
----------------------------------------------------------
Tout en haut du modèle d'en-tête, AVANT .entete :
Flexbox → bandeau (pleine largeur)
└── Flexbox → bandeau-inner (max 1320px)
├── Éditeur texte → bandeau-texte
├── Bouton → bandeau-lien
└── Icône → bandeau-fermer (lien : #)
▸ Affichage = FLEX sur les deux Flexbox
▸ Direction horizontale, tout centré
▸ Écarts = 0 (le gap vient du CSS)
▸ Sur .bandeau-fermer : n'importe quelle icône fait
l'affaire, elle est masquée et la croix est redessinée
en masque SVG. Ça évite de dépendre de la
bibliothèque d'icônes.
⚠ Orthographe : « électronique », pas « éléctronique ».
----------------------------------------------------------
LE SCRIPT DE FERMETURE — OÙ LE COLLER
----------------------------------------------------------
Elementor > Modèles > Code personnalisé
Nouveau code, Emplacement :
Pourquoi dans le et pas dans un widget HTML :
la classe est posée AVANT le premier rendu, donc le
bandeau ne clignote pas chez ceux qui l'ont déjà fermé.
Pourquoi une écoute sur document et pas sur la croix :
le clic remonte, donc ça marche même si le bandeau est
rendu après le script.
Pour le revoir pendant les tests : console du navigateur,
localStorage.removeItem('bandeau-ferme') puis F5.
----------------------------------------------------------
LE MÉCANISME DU COLLAGE, EN DEUX LIGNES
----------------------------------------------------------
Le bandeau et le header sont dans le MÊME bloc collant.
Ce bloc est calé avec un top NÉGATIF valant exactement la
hauteur du bandeau. Quand la page défile, le bloc se colle
mais décalé vers le haut de cette hauteur : le bandeau sort
de l'écran, le header se pose à zéro.
⚠ LA CONTRAINTE
--bandeau-h doit valoir la hauteur RÉELLE du bandeau.
C'est pour ça que la hauteur est imposée en dur plutôt
que laissée au contenu, et c'est aussi pour ça que la
fermeture doit remettre la variable à 0 : sinon le header
resterait décalé de 44px vers le haut.
========================================================== */
/* ==========================================================
23.1 — LE COLLAGE
Ces règles écrasent volontairement celles de la §22.1 :
ce n'est plus .entete qui colle, c'est le bloc entier.
========================================================== */
:root {
--bandeau-h: 44px;
}
.elementor-location-header {
position: sticky !important;
top: calc(var(--bandeau-h) * -1) !important;
z-index: 999 !important;
background: transparent !important;
}
/* .entete ne colle plus tout seul : il suivrait le bloc et
les deux sticky se marcheraient dessus. */
.entete {
position: relative !important;
top: auto !important;
z-index: 2 !important;
}
/* Sans modèle Theme Builder (donc sans
.elementor-location-header), remplace le sélecteur
ci-dessus par le conteneur qui enveloppe bandeau + header,
et donne-lui une classe, par exemple .entete-bloc. */
/* ==========================================================
23.2 — L'ÉTAT FERMÉ
Deux effets d'un seul geste : le bandeau disparaît, et la
variable retombe à 0 pour que le header se recolle pile
en haut. Le !important est nécessaire pour battre les
redéfinitions de --bandeau-h dans les media queries.
========================================================== */
.bandeau-off {
--bandeau-h: 0px !important;
}
.bandeau-off .bandeau {
display: none !important;
}
/* ==========================================================
23.3 — LE BANDEAU
========================================================== */
.bandeau {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: center !important;
/* Hauteur imposée : elle doit coller à --bandeau-h */
height: var(--bandeau-h) !important;
min-height: var(--bandeau-h) !important;
width: 100%;
margin: 0 !important;
padding: 0 20px !important;
box-sizing: border-box;
background: #1565E4 !important;
border: none !important;
border-radius: 0 !important;
overflow: hidden;
}
.bandeau-inner,
.bandeau > .e-con-inner {
/* Repère pour la croix, qui est en position absolue */
position: relative !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
max-width: 1320px;
width: 100%;
margin: 0 auto !important;
/* Réserve la place de la croix à droite, sans quoi le
texte passerait dessous sur les écrans étroits. */
padding: 0 44px !important;
box-sizing: border-box;
}
.bandeau-texte,
.bandeau-texte p {
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: #FFFFFF !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap;
}
/* ==========================================================
23.4 — LE LIEN ET SON SOULIGNEMENT
Le trait est présent au repos et se rétracte au survol,
vers la droite. C'est un scaleX sur un pseudo-élément :
la transformation ne déclenche aucun recalcul de mise en
page, contrairement à une animation de width.
Le text-decoration natif est retiré, sinon il doublerait
le trait sans jamais s'animer.
========================================================== */
.bandeau-lien {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
.bandeau-lien :is(a, button, .elementor-button) {
position: relative !important;
display: inline-flex !important;
align-items: center;
background: transparent !important;
color: #FFFFFF !important;
border: none !important;
padding: 0 0 3px !important;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
text-decoration: none !important;
box-shadow: none !important;
transition: opacity 150ms linear;
}
.bandeau-lien :is(a, button, .elementor-button)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.5px;
background: currentColor;
transform: scaleX(1);
transform-origin: right center;
transition: transform 220ms cubic-bezier(.2, 0, 0, 1);
}
.bandeau-lien :is(a, button, .elementor-button):hover::after {
transform: scaleX(0);
}
.bandeau-lien :is(a, button, .elementor-button):hover {
opacity: .9;
}
.bandeau-lien :is(a, button, .elementor-button):focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 3px;
}
/* Pas d'icône dans le lien : le trait est le seul mouvement.
Pour remettre une flèche, il faudrait libérer ::after,
qui sert ici au soulignement. */
.bandeau-lien :is(.elementor-button-icon, svg, i) {
display: none !important;
}
/* ==========================================================
23.5 — LA CROIX
En position absolue plutôt qu'en élément de flux : comme
ça elle ne compte pas dans le centrage, et la phrase reste
optiquement au milieu du bandeau.
La croix est redessinée en masque SVG : l'icône choisie
dans Elementor n'a aucune importance, et le trait suit la
couleur du texte.
========================================================== */
.bandeau-fermer {
position: absolute !important;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 8px;
cursor: pointer;
transition: background 150ms linear;
}
.bandeau-fermer:hover {
background: rgba(255, 255, 255, .16);
}
/* L'icône d'Elementor est masquée, on redessine la croix */
.bandeau-fermer :is(svg, i, .elementor-icon) {
display: none !important;
}
.bandeau-fermer :is(a, .elementor-icon-wrapper, .elementor-widget-container) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #FFFFFF !important;
}
.bandeau-fermer::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 14px;
height: 14px;
background: #FFFFFF;
pointer-events: none;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bandeau-fermer :is(a, button):focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
border-radius: 8px;
}
/* ==========================================================
23.6 — RESPONSIVE
La hauteur change par palier, et --bandeau-h suit : c'est
la même variable qui pilote le décalage du collage, donc
les deux restent d'accord automatiquement.
========================================================== */
@media (max-width: 1100px) {
.bandeau { padding: 0 16px !important; }
.bandeau-inner,
.bandeau > .e-con-inner { gap: 11px !important; }
.bandeau-texte,
.bandeau-texte p,
.bandeau-lien :is(a, button, .elementor-button) {
font-size: 13.5px !important;
}
}
@media (max-width: 767px) {
:root { --bandeau-h: 44px; }
.bandeau { padding: 0 8px !important; }
.bandeau-inner,
.bandeau > .e-con-inner {
gap: 9px !important;
padding: 0 44px !important;
}
.bandeau-texte,
.bandeau-texte p,
.bandeau-lien :is(a, button, .elementor-button) {
font-size: 13px !important;
}
/* Zone tactile de 44px, minimum confortable au pouce */
.bandeau-fermer {
width: 44px !important;
height: 44px !important;
}
/* Pas de survol au doigt : le trait reste posé */
.bandeau-lien :is(a, button, .elementor-button):hover::after {
transform: scaleX(1);
}
}
/* Sous 560px la phrase et le lien ne tiennent plus sur une
ligne. Plutôt que de laisser le texte se couper, on ne
garde que le lien : c'est lui qui porte l'action. */
@media (max-width: 560px) {
.bandeau-texte { display: none !important; }
.bandeau-lien :is(a, button, .elementor-button) {
font-size: 13.5px !important;
}
}
/* ==========================================================
23.7 — RESPECT DES PRÉFÉRENCES SYSTÈME
========================================================== */
@media (prefers-reduced-motion: reduce) {
.bandeau-lien :is(a, button, .elementor-button),
.bandeau-lien :is(a, button, .elementor-button)::after,
.bandeau-fermer {
transition-duration: 1ms !important;
}
}
/* ==========================================================
RÉGLAGES RAPIDES — BANDEAU
>> LE CURSEUR PRINCIPAL
Hauteur du bandeau -> --bandeau-h (23.1)
Une seule valeur : elle pilote la hauteur réelle
du bandeau (23.3) ET le décalage du collage (23.1).
Si tu la modifies ailleurs qu'ici, le header se
posera trop haut ou trop bas au défilement.
>> LA FERMETURE
Classe posée par le script -> .bandeau-off (23.2)
Le script est en tête de ce fichier, à coller
dans Elementor > Code personnalisé, emplacement
. Le choix reste mémorisé d'une visite à
l'autre via localStorage.
Pour revoir le bandeau en test :
localStorage.removeItem('bandeau-ferme')
>> LE SOULIGNEMENT
Épaisseur -> 1.5px (23.4)
Sens de sortie -> transform-origin (23.4)
right = se rétracte vers la droite
left = vers la gauche
Pour l'inverser (trait absent au repos, qui
apparaît au survol) : mettre scaleX(0) sur la
règle de base et scaleX(1) sur le :hover.
>> LES COULEURS
Fond -> #1565E4 (23.3)
Texte, lien, croix -> #FFFFFF (23.3 à 23.5)
Pour une variante sobre : fond #12376B.
>> LES TEXTES
Phrase et lien se saisissent dans Elementor,
pas dans le CSS.
⚠ « électronique », pas « éléctronique ».
>> CE QUI CHANGE, ET QUAND
Croix à 44px -> sous 767 px (23.6)
Survol neutralisé -> sous 767 px (23.6)
La phrase (lien seul) -> sous 560 px (23.6)
========================================================== */
/* ==========================================================
24. AIGUILLAGE DES DEUX HEADERS
==========================================================
Deux headers distincts, jamais affichés en même temps :
celui de bureau (§22) au-dessus de 1024px, celui du
mobile et de la tablette en dessous.
----------------------------------------------------------
LES DEUX CLASSES À POSER
----------------------------------------------------------
.header-desktop -> sur le Flexbox .entete existant
(le plus extérieur, celui qui porte
déjà la classe entete)
.header-mobile -> sur le Flexbox extérieur du futur
header mobile
Une classe suffit sur chacun : mets-la à côté de celle
qui existe déjà, séparée par un espace.
Champ Classes CSS -> entete header-desktop
⚠ Ces deux classes ne servent QU'À l'aiguillage. Ne pose
aucun style dessus : le jour où tu voudras changer une
couleur, tu ne sauras plus si tu touches au bureau ou
à l'aiguillage.
----------------------------------------------------------
POURQUOI 1024 ET 1025, ET PAS 1024 DEUX FOIS
----------------------------------------------------------
Les deux media queries doivent être STRICTEMENT
complémentaires. Avec max-width: 1024 d'un côté et
min-width: 1024 de l'autre, les deux règles s'appliquent
à la fois à exactement 1024px : les deux headers
disparaissent ensemble.
Avec 1024 / 1025, il n'existe aucune largeur où les deux
s'affichent, ni aucune où il n'y en a aucun.
⚠ Cette bascule doit valoir la même chose que celle du
§22 : le point d'arrêt du widget Menu, et les media
queries des §22.5, §22.10 et §22.13. Si tu la déplaces,
déplace-la partout.
----------------------------------------------------------
PENDANT LA CONSTRUCTION
----------------------------------------------------------
Le header mobile sera invisible dans l'éditeur tant que
tu es en vue bureau. Bascule la barre du haut sur
tablette ou téléphone pour le voir et le monter.
Si ça te gêne, commente le bloc 24.2 le temps du montage
et remets-le avant de publier.
========================================================== */
/* ----------------------------------------------------------
24.1 — SOUS 1024 px : le header de bureau disparaît
display: none et non visibility: hidden : le second
laisserait l'élément occuper sa place et pousserait la
page vers le bas d'une hauteur de header.
---------------------------------------------------------- */
@media (max-width: 1024px) {
.header-desktop {
display: none !important;
}
}
/* ----------------------------------------------------------
24.2 — AU-DESSUS DE 1024 px : le header mobile disparaît
---------------------------------------------------------- */
@media (min-width: 1025px) {
.header-mobile {
display: none !important;
}
}
/* ==========================================================
RÉGLAGES RAPIDES — AIGUILLAGE
>> LA BASCULE
Sous 1024 px -> header mobile
Au-dessus -> header bureau
Les deux bornes sont 1024 et 1025. Elles doivent
rester collées, sinon il existe une largeur où
les deux headers sont masqués.
>> SI RIEN NE SE PASSE
Vérifie que la classe est bien sur le Flexbox le
plus EXTÉRIEUR de chaque header, pas sur la bulle
intérieure. Masquer .entete-inner laisserait le
conteneur .entete en place, avec son padding : tu
aurais une bande vide à la place du header.
>> POUR TESTER SANS REDIMENSIONNER
Barre du haut de l'éditeur, icônes bureau /
tablette / téléphone. La tablette d'Elementor est
à 1024px par défaut, donc pile sur la bascule :
c'est le bon endroit pour vérifier qu'un seul des
deux headers s'affiche.
========================================================== */
/* ==========================================================
27. COLLAGE DU HEADER MOBILE — LE MOT DE LA FIN
==========================================================
⚠⚠ CE BLOC DOIT ÊTRE LA TOUTE DERNIÈRE CHOSE DU FICHIER.
Pas après la §26. Pas après la §20. Après TOUT.
Descends jusqu'en bas du champ CSS personnalisé, place le
curseur après le dernier caractère, et colle ici.
Il remplace la §26 et le petit bloc qui la suit : tu peux
les supprimer tous les deux.
==========================================================
POURQUOI ÇA MARCHE SUR TABLETTE ET PAS SUR TÉLÉPHONE
==========================================================
Ta §20.1 contient ceci :
@media (max-width: 767px) {
html, body { overflow-x: hidden !important; }
}
Un overflow autre que visible crée un conteneur de
défilement, et un conteneur de défilement ANNULE le
position: sticky de tous ses descendants. Sans erreur,
sans avertissement.
Cette règle ne s'applique que SOUS 767px. Au-dessus, rien
ne bloque : le header colle. En dessous, elle reprend la
main. C'est exactement ton symptôme.
Et si elle gagne contre la §26, c'est une question
d'ORDRE : à spécificité et !important égaux, c'est la
dernière règle lue qui l'emporte. Ta §20 est donc placée
après ta §26 dans le fichier.
----------------------------------------------------------
LA CORRECTION DÉFINITIVE, EN DEUX MINUTES
----------------------------------------------------------
Ce bloc suffit s'il est vraiment en dernier. Mais pour ne
plus jamais y revenir, fais aussi ceci :
Ctrl+F dans le champ CSS, cherche : overflow-x: hidden
Remplace CHAQUE occurrence par : overflow-x: clip
clip rogne exactement comme hidden — tu gardes ta
protection contre le défilement latéral — mais il ne crée
PAS de conteneur de défilement. C'est la seule différence
entre les deux valeurs, et c'est précisément celle qui
compte pour un sticky.
Une fois ça fait, l'ordre des sections n'a plus aucune
importance.
========================================================== */
/* ----------------------------------------------------------
27.1 — LES ANCÊTRES NE BLOQUENT PLUS
La liste est large exprès : une seule ligne oubliée suffit
à annuler le collage, et selon le thème le conteneur de
page porte des noms différents.
---------------------------------------------------------- */
@media (max-width: 1024px) {
html,
body,
#page,
#content,
#main,
main,
.site,
.site-content,
.site-main,
.content-area,
.elementor,
.elementor-page,
.elementor-location-single {
overflow: visible !important;
overflow-x: clip !important;
overflow-y: visible !important;
}
}
/* ----------------------------------------------------------
27.2 — LE WRAPPER DU THEME BUILDER
Le contient TROIS enfants : .bandeau, .entete
(bureau) et .entete-m (mobile).
Un sticky ne colle que dans les limites de son PARENT.
.entete-m étant le dernier des trois, sa course s'arrête
au bas du — c'est-à-dire tout de suite, puisqu'il
en occupe déjà le bas.
display: contents efface la boîte du sans
toucher à son contenu : les trois enfants remontent d'un
cran et .entete-m retrouve toute la page comme course.
⚠ position: static est indispensable. La §23.1 rend ce
même collant avec un top négatif, pour faire
glisser le bandeau. Un élément ne peut pas être à la
fois effacé du rendu ET collant : les deux se
neutralisent, et c'est le sticky qui gagne.
---------------------------------------------------------- */
@media (max-width: 1024px) {
header.elementor-location-header,
.elementor-location-header {
position: static !important;
top: auto !important;
display: contents !important;
}
}
/* ----------------------------------------------------------
27.3 — LE HEADER COLLE
La classe est répétée trois fois pour monter la
spécificité au-dessus de tout ce qui traîne ailleurs,
sans avoir à connaître l'ID Elementor de l'élément.
transform, filter et perspective annulent un sticky sur
l'élément lui-même : on les neutralise, car une
interaction Elementor en pose un au défilement.
opacity et animation sont remises à plat pour la même
raison : sans ça, le header resterait invisible une fois
son animation coupée.
---------------------------------------------------------- */
@media (max-width: 1024px) {
.entete-m.entete-m.entete-m {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
transform: none !important;
translate: none !important;
rotate: none !important;
scale: none !important;
filter: none !important;
backdrop-filter: none !important;
perspective: none !important;
will-change: auto !important;
opacity: 1 !important;
animation: none !important;
}
}
/* ==========================================================
RÉGLAGES RAPIDES — COLLAGE DU HEADER MOBILE
>> LES TROIS FAMILLES DE BLOCAGE D'UN STICKY
1. Un ANCÊTRE en overflow hidden, auto ou scroll
-> overflow-x: clip à la place (27.1)
2. Un PARENT trop court : le sticky n'a aucune
course s'il occupe déjà toute la hauteur
-> display: contents sur le parent (27.2)
3. Un transform, filter ou perspective SUR
l'élément lui-même
-> remis à none (27.3)
Ce bloc couvre les trois. Il n'y en a pas d'autre.
>> LA DIFFÉRENCE ENTRE hidden ET clip
Les deux rognent le débordement de la même façon.
Mais hidden crée un conteneur de défilement, et clip
non. Un conteneur de défilement annule le sticky de
tous ses descendants.
C'est LA raison pour laquelle ton header collait sur
tablette et pas sur téléphone : la règle
overflow-x: hidden de la §20.1 ne s'applique que sous
767px.
>> POURQUOI EN DERNIER
À spécificité et !important égaux, c'est la DERNIÈRE
règle lue qui gagne. Les media queries n'y changent
rien : elles activent un bloc, elles ne lui donnent
aucune priorité.
Si tu rajoutes quoi que ce soit après ce bloc et que
ça touche à html, body ou .entete-m, le collage
recassera.
>> À FAIRE DANS ELEMENTOR
Supprime l'interaction « Scroll into view : Fade In »
sur .entete-m, onglet Interactions. Le CSS la
neutralise, mais elle tourne en JavaScript pour rien
à chaque défilement — et le jour où tu ajoutes une
autre animation, tu repasseras une heure à chercher
pourquoi le header ne colle plus.
>> POUR NE PLUS JAMAIS Y REVENIR
Ctrl+F dans le champ CSS : overflow-x: hidden
Remplace par : overflow-x: clip
Une fois toutes les occurrences corrigées, l'ordre
des sections n'a plus aucune importance.
>> SI ÇA NE MARCHE TOUJOURS PAS
Teste sur la PAGE PUBLIÉE, jamais dans l'éditeur :
le sticky n'y fonctionne pas, c'est normal.
Puis vide le cache du plugin de cache.
========================================================== *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'TT Firs Neue';
font-style: normal;
font-weight: normal;
font-display: auto;
src: url('https://simplifiaforbusiness.com/wp-content/uploads/2026/08/TT-Firs-Neue-Trial-Var-Roman.ttf') format('truetype');
}
/* End Custom Fonts CSS */