/**
* All of the CSS for your public-facing functionality should be
* included in this file.
*/
#breadcrumbs ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
body #breadcrumbs a,
body.ast-single-post .entry-content #breadcrumbs a {
background-image: linear-gradient(var(--e-global-color-text), var(--e-global-color-text));
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
padding-bottom: 1px;
transition: background-size .3s ease-in-out;
}
/* body #breadcrumbs #breadcrumbs_last{
background-image: linear-gradient(var(--e-global-color-text), var(--e-global-color-text));
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
padding-bottom: 1px;
transition: background-size .3s ease-in-out;
line-height: 110%;
} */
body .elementor-widget-counter .elementor-counter-number-wrapper p{
margin-bottom: 0px;
}
body .elementor-button-content-wrapper p.elementor-button-text, body .jet-color-image-list__item p.jet-color-image-list__label{
margin-bottom: 0px!important;
}
/* Add smooth transitions for better UX */
div[data-filter-id="1493"] .jet-color-image-list__button .jet-color-image-list__label{
}
div[data-filter-id="1493"] .jet-color-image-list__button {
transition: all 0.3s ease;
}
/* Checked state */
div[data-filter-id="1493"] .jet-color-image-list__input:checked + .jet-color-image-list__button {
background: #0859A6;
border-color: #0859A6;
border-width: 0px!important;
border-radius: 50px;
}
div[data-filter-id="1493"] .jet-color-image-list__input:checked + .jet-color-image-list__button .jet-color-image-list__label {
color: #fff!important;
background: #0859A6!important;
}
/* Style the color indicator */
div[data-filter-id="1493"] .jet-color-image-list__input:checked + .jet-color-image-list__button .jet-color-image-list__color {
border: 2px solid #fff;
box-sizing: border-box;
}
@media(max-width: 768px) {
#breadcrumbs ul {
display: block;
}
#breadcrumbs ul li {
display: inline;
margin-right: 5px;
}
}
/* === FICHES PRATIQUES === */
/**
* Fiches pratiques — blog styling for archive & single post views.
*
* Conventions :
* - selectors namespaced `.fp-*` to avoid clashing
* - high-specificity selectors used to defeat Elementor's per-widget colors
* and Astra's defaults; !important reserved for cases where Elementor
* writes inline-equivalent rules that can't otherwise be beaten.
*
* ===========================================================================
* RÉGLAGES RAPIDES — marges du bloc « Toutes nos fiches pratiques »
* Modifie les 5 valeurs ci-dessous pour ajuster chaque marge indépendamment.
* ===========================================================================
*/
:root {
/* ────────── ZONE LAVANDE (H2 + vagues) ────────── */
/* 1) Marge AU-DESSUS du titre « Toutes nos fiches pratiques »
(depuis le haut du bloc lavande) */
--fp-h2-margin-top: 48px;
/* 2) Marge APRÈS les vagues (purement cosmétique : la zone lavande
est indépendante de la zone verte ci-dessous) */
--fp-vagues-margin-bottom: 40px;
/* 2b) Marge GAUCHE du titre « Toutes nos fiches pratiques »
(par rapport au bord interne du elementor-container). */
--fp-title-margin-left: -104px;
/* 2c) Marge GAUCHE des vagues (indépendante du titre). */
--fp-vagues-margin-left: -104px;
/* ────────── ZONE VERTE (flèche + cartes) ────────── */
/* 3) Position du haut de la zone verte (offset depuis le haut du bloc) */
--fp-green-top-offset: 180px;
/* 4) Marge AU-DESSUS de la flèche déco (depuis le haut de la zone verte).
Valeur négative = la flèche remonte par-dessus la frontière vert/lavande. */
--fp-arrow-margin-top: -32px;
/* 5) Marge APRÈS la flèche déco (sous la flèche, avant les vignettes) */
--fp-arrow-margin-bottom: 3px;
/* 6) Décalage horizontal des cards (sans changement de taille).
Valeur négative (ex: -84px) = décale vers la GAUCHE (déborde à gauche).
Valeur positive = décale vers la DROITE. */
--fp-cards-overhang-left: -84px;
/* 7) Hauteur du bloc lavande "Toutes nos fiches pratiques". Utile surtout
en mobile où le H2 peut prendre plus de place sur 2-3 lignes. */
--fp-lavender-height: 200px;
/* ────────── CARTES ACTUS ────────── */
/* 8) Marge entre l'IMAGE et la ligne catégorie / date */
--fp-card-img-to-meta: 6px;
/* 9) Marge entre la catégorie / date et le SÉPARATEUR (trait sous la meta) */
--fp-card-meta-to-separator: 6px;
/* ────────── PAGE DÉTAIL — pictos autour du chapô ──────────
Réglage indépendant de la position de chaque picto.
X positif = vers l'intérieur du texte ; Y positif = vers le bas. */
/* Picto GAUCHE */
--fp-picto-gauche-x: -40px; /* distance depuis le bord gauche du bloc */
--fp-picto-gauche-y: 0px; /* décalage vertical (0 = centré) */
/* Picto DROITE */
--fp-picto-droite-x: 0px; /* distance depuis le bord droit du bloc */
--fp-picto-droite-y: 0px; /* décalage vertical (0 = centré) */
/* Picto DESSOUS */
--fp-picto-sous-x: 0px; /* décalage horizontal (0 = centré) */
--fp-picto-sous-y: 1px; /* distance depuis le bas du bloc */
/* Marge AU-DESSUS du bloc vert complet (« Les principales aides ») */
--fp-green-block-margin-top: 32px;
}
/* ===========================================================================
* RESPONSIVE — surcharger les variables pour tablet et mobile
* Ajuste les valeurs dans chaque media query indépendamment.
* ===========================================================================
*/
/* TABLET (≤ 1024px) ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
:root {
--fp-h2-margin-top: 40px;
--fp-vagues-margin-bottom: 32px;
--fp-green-top-offset: 160px;
--fp-arrow-margin-top: -24px;
--fp-arrow-margin-bottom: 4px;
--fp-cards-overhang-left: 0px;
--fp-lavender-height: 180px;
}
}
/* MOBILE (≤ 768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
:root {
--fp-h2-margin-top: 32px;
--fp-vagues-margin-bottom: 24px;
--fp-green-top-offset: 178px;
--fp-arrow-margin-top: 1px;
--fp-arrow-margin-bottom: 0px;
--fp-cards-overhang-left: 0px;
--fp-lavender-height: 212px;
}
/*
* Mobile alignment : H2, vagues, flèche et cards partagent le même
* bord gauche.
* - H2 widget : left:10px (= offset naturel du widget grid dans la
* colonne Elementor), padding 0 pour éviter un double décalage.
* - Flèche : margin-left 0 (au lieu de 5%).
* - Container : padding latéral réduit à 16px.
*/
.fp-archive-h2 {
left: 10px !important;
right: 10px !important;
padding: 0;
}
.fp-archive-grid::before {
margin-left: 0 !important;
}
.fp-archive-grid-wrap > .elementor-container,
.fp-archive-grid-wrap > .e-con-inner {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ===========================================================================
* MENU PRINCIPAL — fit 4 items sur une seule ligne en desktop
* (le menu d'origine, prévu pour 3 items, faisait passer le 4e à la ligne)
* ===========================================================================
*/
@media (min-width: 1025px) {
body .elementor-widget-nav-menu .elementor-nav-menu__container {
width: auto;
}
body ul.elementor-nav-menu {
flex-wrap: nowrap !important;
gap: 22px;
white-space: nowrap;
justify-content: center;
}
body ul.elementor-nav-menu > li {
flex: 0 0 auto;
}
body ul.elementor-nav-menu > li > a {
white-space: nowrap;
}
}
/* ===== Tokens ============================================================ */
:root {
--fp-color-blue: #0859A6;
--fp-color-blue-deep: #0D2A6C;
--fp-color-bordeaux: #A93455;
--fp-color-green-soft: #D7E9CF;
--fp-color-lavender: #EFF2FF;
--fp-color-peach: #FCEFE3;
--fp-color-card: #FFFFFF;
--fp-color-text: #1A1A1A;
--fp-radius-section: 32px;
/* Bandeau titre « Les fiches pratiques » : retrait du texte par rapport au
bord gauche de la zone de contenu (le fond file jusqu'au bord de l'écran). */
--fp-title-bleed-indent: 28px;
/* Décalage vertical de la petite flèche à gauche de « Lire la suite » sur les
cartes (valeur négative = remonte). */
--fp-card-readmore-arrow-up: -11px;
/* Flèches du carrousel « Les autres articles » (page détail) : position de
la flèche gauche (débordant dans le fond blanc, valeur négative) et droite
(à l'intérieur du fond pêche), + nudge vertical par rapport au centre. */
--fp-rel-arrow-left: -66px;
--fp-rel-arrow-right: 18px;
--fp-rel-arrow-y: 0px;
/* Bloc « Trouvez l'aide adaptée » (bas des pages détail) : panneau bleu
plein-largeur à gauche, derrière l'encadré orange. Hauteur 722px =
688px (encadré orange) + 34px de débord en bas ; arrondi en bas à droite. */
--fp-precise-blue-color: #EFF2FF;
/* Décalage du HAUT du panneau lavande par rapport au haut de l'encadré
orange (0 = aligné ; 32px = 32px plus bas). Ajustable. */
--fp-precise-blue-top: 32px;
/* Hauteur du panneau. 690 = 722 (encadré 688 + débord 34) − 32 de top,
pour conserver un débord de 34px en bas malgré le décalage du haut. */
--fp-precise-blue-height: 690px;
--fp-precise-blue-radius: 40px;
--fp-precise-text-color: #0859A6;
/* Largeur de l'encadré orange, ancré au bord DROIT de l'écran. En %vw
(et non en px) pour suivre l'encadré qui fait 48% de large : son bord
gauche est donc toujours à `100vw − 48vw = 52vw`, à toute largeur de
fenêtre. C'est ce qui garde le bord droit du panneau caché derrière
l'orange en responsive (au lieu de ressortir avec un angle droit). */
--fp-precise-orange-width: 48vw;
/* Profondeur de pénétration du panneau lavande dans l'encadré orange (à
droite) : le panneau part du bord gauche de l'écran et s'arrête à
`pénétration` px à l'intérieur du bord gauche de l'encadré orange. */
--fp-precise-blue-penetration: 400px;
/* Marge au-dessus du footer sur les pages de détail d'article. */
--fp-footer-margin-top: 46px;
/* Bloc « Les autres articles » : demi-largeur de la zone contenue (1240/2)
qui fixe le bord GAUCHE du bloc ; le bord DROIT file jusqu'au bord de
l'écran. Augmenter cette valeur décale le bord gauche vers la gauche. */
--fp-related-left-half: 620px;
/* SVG wave kept here for the single-article lead decoration. The archive
H2 uses the heavier vagues.png asset instead — see .fp-archive-h2. */
--fp-wave: url("data:image/svg+xml;utf8,");
}
/* ===== Generic accessibility helpers ===================================== */
.fp-visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ===== Archive: hero bandeau ============================================ */
.elementor-widget-image.fp-archive-hero-img img,
.fp-archive-hero-img img,
.fp-archive-hero .elementor-widget-image img {
display: block !important;
width: 100% !important;
height: clamp(180px, 28vw, 360px) !important;
max-height: 360px !important;
object-fit: cover !important;
object-position: center !important;
transform: none !important;
position: relative !important;
}
/*
* Stretch the hero section full-width but disable the broken Elementor
* stretch transform that pushes the image off the canvas.
*/
.elementor-section.fp-archive-hero.elementor-section-stretched,
.fp-archive-hero.elementor-section-stretched {
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: relative !important;
}
/* ===== Breadcrumb top section (above the hero, per PSD) ================== */
.fp-archive-bc-section {
margin-bottom: 0 !important;
}
.fp-archive-bc-section .elementor-container {
max-width: 1140px;
margin: 0 auto;
}
/* ===== Breadcrumb (Elementor widget) ===================================== */
.fp-breadcrumb .elementor-widget-container > ul,
.fp-breadcrumb ul,
.elementor-widget-breadcrumbs .fp-breadcrumb ul {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 6px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
/* Fil d'Ariane façon /les-aides/ : Poppins Normal 13,6px, texte quasi noir. */
color: #050505;
font-family: "Poppins", "Marianne", sans-serif !important;
font-weight: 400 !important;
font-size: 13.6px !important;
}
.fp-breadcrumb ul li {
list-style: none !important;
display: inline-flex;
align-items: center;
}
/* Pages parentes : cliquables ET soulignées (comme /les-aides/). */
.fp-breadcrumb a,
.fp-breadcrumb a:link,
.fp-breadcrumb a:visited {
color: #050505 !important;
font-family: "Poppins", "Marianne", sans-serif !important;
font-weight: 400 !important;
font-size: 13.6px !important;
text-decoration: underline !important;
}
.fp-breadcrumb a:hover,
.fp-breadcrumb a:focus {
text-decoration: underline !important;
}
@media (max-width: 768px) {
.fp-breadcrumb ul {
display: block !important;
}
.fp-breadcrumb ul li {
display: inline;
margin-right: 5px;
}
}
/* ===== Archive: title block (H1 + sub) =================================== */
/* Wrap inner container — same width as the wrap section below for alignment */
.fp-archive-head > .elementor-container,
.fp-archive-head > .e-con-inner {
max-width: 1140px;
margin: 0 auto;
}
/*
* H1 wrapped in a rounded lavender pill (PSD: title sits on a light-purple
* rounded block, not plain text). We apply the lavender background DIRECTLY
* on the