*/
.article-visual-builder section p:has(> img:only-child) { margin: 24px auto !important; padding-bottom: 0 !important; }
.article-visual-builder section p:has(> img:only-child) > img { margin: 0 auto !important; }
.article-visual-builder section :is(h2, h3, h4, ul, ol) + :is(figure, p:has(> img:only-child)),
.article-visual-builder section div:has(> :is(h2, h3, h4, ul, ol):last-child) + :is(figure, p:has(> img:only-child)) { margin-top: 40px !important; } /* image sous un titre ou une liste (même enveloppés dans un div) : 40 px */
.article-visual-builder section :is(figure, p:has(> img:only-child)) + :is(h2, h3, h4, p, ul, ol) { margin-top: 40px !important; } /* texte ou titre sous une image : 40 px */
.article-visual-builder section p:has(> img:only-child) + p:has(> img:only-child) { margin-top: 40px !important; }
.article-visual-builder section table + :is(figure, p:has(> img:only-child)),
.article-visual-builder section :is(figure, p:has(> img:only-child)) + table { margin-top: 40px !important; } /* tableau et image qui se suivent : 40 px */
.article-visual-builder section :is(h2, h3, h4) + ol:not(.jr-sommaire-inline) { margin-top: 30px !important; } /* liste numérotée sous un titre : 30 px */
.article-visual-builder section figure + div:not(:has(> a[href*="/files/citations/"])) { padding-top: 16px !important; } /* texte après une image : 24 + 16 (rembourrage, ne fusionne pas) = 40 px */
.article-visual-builder section figure + div > :is(ul, ol):first-child { margin-top: 0 !important; } /* liste juste après une image : 40 px, pas 54 */
.article-visual-builder div:has(> a[href*="/files/citations/"]) { margin: 30px 0 0 !important; } /* image → bouton Citation : 30 px (Divi) */
.article-visual-builder div:has(> a[href*="/files/citations/"]) + *,
.article-visual-builder div:has(> a[style*="#D99175"]) + * { margin-top: 40px !important; } /* texte après un bouton : 40 px, la norme validée */
/* Deux blocs de même fond qui se suivent (sable après sable, céladon après céladon) : un seul espace de 40 px
entre leurs contenus, au lieu de 40 + 40 (photo des chevaux, bouton Citation, encadré du guide… Aurélie 16.09) */
.article-visual-builder section[style*="#FFFDEB"] + section[style*="#FFFDEB"],
.article-visual-builder section[style*="#C1DDD5"] + section[style*="#C1DDD5"] { padding-top: 0 !important; }
/* Paragraphes d'introduction (« Le plat se compose ainsi : », « Exemples : ») : la marge héritée de Divi s'ajoutait à la respiration */
.article-visual-builder p[style*="margin:0 0 14px"] { margin-bottom: 0 !important; }
/* Bords de bloc réguliers quel que soit le premier / dernier élément (titre, liste, image, citation) */
.article-visual-builder section:not(.jr-article-hero) > :is(p, h2, h3, h4, ul, ol, figure, blockquote):first-child,
.article-visual-builder section:not(.jr-article-hero) > div:first-child > :is(p, h2, h3, h4, ul, ol, figure, blockquote):first-child { margin-top: 0 !important; padding-top: 0 !important; }
.article-visual-builder section:not(.jr-article-hero) > :is(p, h2, h3, h4, ul, ol, figure, blockquote):last-child,
.article-visual-builder section:not(.jr-article-hero) > div:last-child > :is(p, h2, h3, h4, ul, ol, figure, blockquote):last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.article-visual-builder section:not(.jr-article-hero) > :is(figure, p):first-child > img,
.article-visual-builder section:not(.jr-article-hero) > div > :is(figure, p):first-child > img { margin-top: 0 !important; }
.article-visual-builder section:not(.jr-article-hero) > :is(figure, p):last-child > img,
.article-visual-builder section:not(.jr-article-hero) > div:last-child > :is(figure, p):last-child > img { margin-bottom: 0 !important; }
/* vidéo (wrapper 16:9) et encadrés en bord de bloc : seule la marge extérieure est neutralisée, jamais le padding */
.article-visual-builder section:not(.jr-article-hero) > div:has(> div > iframe):first-child,
.article-visual-builder section:not(.jr-article-hero) > div > div:has(> div > iframe):first-child { margin-top: 0 !important; }
.article-visual-builder section:not(.jr-article-hero) > div:has(> div > iframe):last-child,
.article-visual-builder section:not(.jr-article-hero) > div:last-child > div:has(> div > iframe):last-child,
.article-visual-builder section:not(.jr-article-hero) > div[style*="padding"]:last-child,
.article-visual-builder section:not(.jr-article-hero) > div:last-child > div[style*="padding"]:last-child,
.article-visual-builder section:not(.jr-article-hero) > div:last-child > table:last-child { margin-bottom: 0 !important; }
.article-visual-builder p > img:only-child { display: block; margin-left: auto; margin-right: auto; } /* image seule dans un paragraphe : pas d'espace de ligne sous l'image */
/* bouton Guide hors encadré : centré comme sur l'ancien site */
.article-visual-builder p:has(> a[href="/guide-des-limites"]), .article-visual-builder p:has(> a[href="/guide-offert"]) { text-align: center !important; }
.article-visual-builder section:not(.jr-article-hero) > ul:last-child > li:last-child,
.article-visual-builder section:not(.jr-article-hero) > ol:last-child > li:last-child,
.article-visual-builder section:not(.jr-article-hero) > div:last-child > ul:last-child > li:last-child,
.article-visual-builder section:not(.jr-article-hero) > div:last-child > ol:last-child > li:last-child { margin-bottom: 0 !important; }
/* Hero article GrapesJS */
.article-visual-builder .jr-article-hero {
min-height: 420px;
}
/*
Typographie des sections migrées depuis Divi
Le HTML inline a des styles inline explicites — on surcharge
uniquement les valeurs manquantes ou incorrectes
*/
/* Corps de texte — MESURÉ sur WP: 500, 16px, lh 22.4px, #004348, justify */
.article-visual-builder p {
font-family: 'CenturyGoth', var(--font-body) !important; /* corps d'article : Century Gothic comme sur Divi (Aurélie 09.09) */
font-weight: 500;
line-height: 24px !important; /* Divi : 16px / 24px */
font-size: 1rem; /* 16px base */
text-align: justify !important; /* les wrappers centrés du convertisseur ne doivent pas centrer le corps */
color: #004348 !important; /* teal WP — certains ont un inline color:#333 qu'il faut battre */
padding-bottom: 16px; /* respiration entre paragraphes — valeur mesurée sur le WP */
margin: 0;
}
/* Exceptions d'alignement : certains articles ont des h2 volontairement à gauche/justifiés (inline WP) */
.article-visual-builder h2[style*="text-align: left"],
.article-visual-builder h2[style*="text-align:left"] { text-align: left !important; }
.article-visual-builder h2[style*="text-align: justify"] { text-align: justify !important; }
/* Filtre catégories — pastilles sur desktop, dropdown stylé sur mobile */
.category-filter-select-wrap { display: none; }
@media (max-width: 767px) {
.category-filter__btn { font-size: 0.95rem; padding: 4px 6px; }
.category-filter-select-wrap {
display: none;
max-width: 420px;
margin: 0 auto 28px;
padding: 0 16px;
}
.category-filter-select-label {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--teal-dark, #004348);
margin-bottom: 8px;
text-align: center;
}
.category-filter-select {
display: block;
width: 100%;
padding: 12px 46px 12px 20px;
font-family: var(--font-body);
font-size: 16px;
font-weight: 500;
color: #D99175;
background-color: var(--cream, #FFFDEB);
border: 2px solid #D99175;
border-radius: 30px; /* même arrondi que les pastilles */
appearance: none;
-webkit-appearance: none;
cursor: pointer;
/* chevron terracotta */
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23D99175' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
}
.category-filter-select:focus {
outline: none;
border-color: #c07a5e;
box-shadow: 0 0 0 3px rgba(217, 145, 117, 0.25);
}
}
/* ============================================================
.jr-divi-text — bloc de texte « à la Divi », mesuré sur le WP :
corps rgba(53,53,53,0.83) (brun foncé, PAS le teal), 16px/22.4px,
justifié, p avec padding-bottom 16px et marge nulle, listes à
puces disc avec retrait 50px et items 26px/marge 10px.
Utilisé sur la page coaching (sections défi + mon coaching).
============================================================ */
/* Encadré « Guide offert » des articles : géométrie de l'ancien site (460px, 35px 10px) et espacements
« – Guide offert – » → titre 20px, titre → bouton 33px, bouton → soleil 22px (Aurélie 09.09) */
.article-visual-builder div[style*="#FFE9D6"]:has(a[href="/guide-des-limites"], a[href="/guide-offert"]) { max-width: 460px !important; padding: 35px 10px !important; margin: 24px auto 40px !important; } /* 16 + 24 = 40 avant, 40 après (Aurélie 16.09) */
.article-visual-builder section > div[style*="#FFE9D6"]:first-child, .article-visual-builder section > div > div[style*="#FFE9D6"]:first-child { margin-top: 0 !important; }
.article-visual-builder section > div[style*="#FFE9D6"]:last-child, .article-visual-builder section > div:last-child > div[style*="#FFE9D6"]:last-child { margin-bottom: 0 !important; }
.article-visual-builder div[style*="#FFE9D6"]:has(a[href="/guide-des-limites"], a[href="/guide-offert"]) > p:first-child { font-size: 16px !important; line-height: 22.4px !important; color: #004348 !important; margin: 0 !important; padding: 0 0 20px !important; text-align: center !important; }
.article-visual-builder div[style*="#FFE9D6"]:has(a[href="/guide-des-limites"], a[href="/guide-offert"]) h3 { font-size: 20px !important; line-height: 22px !important; font-weight: 700 !important; color: #004348 !important; margin: 0 0 20px !important; }
.article-visual-builder div[style*="#FFE9D6"]:has(a[href="/guide-des-limites"], a[href="/guide-offert"]) p:has(> a[href="/guide-des-limites"]),
.article-visual-builder div[style*="#FFE9D6"]:has(a[href="/guide-des-limites"], a[href="/guide-offert"]) p:has(> a[href="/guide-offert"]) { margin: 33px 0 22px !important; padding: 0 !important; }
.article-visual-builder div[style*="#FFE9D6"]:has(a[href="/guide-des-limites"], a[href="/guide-offert"]) h3:last-child { font-size: 16px !important; line-height: 22px !important; margin: 0 !important; }
.jr-divi-text { color: rgba(53, 53, 53, 0.83); }
.jr-divi-text p {
color: rgba(53, 53, 53, 0.83);
font-size: 16px;
line-height: 22.4px;
text-align: justify;
margin: 0;
padding-bottom: 16px;
}
.jr-divi-text ul {
margin: 0;
padding: 14px 0 30px 50px;
list-style: disc;
}
.jr-divi-text ul li {
color: rgba(53, 53, 53, 0.83);
font-size: 16px;
line-height: 26px;
margin: 0 0 10px;
text-align: justify;
}
@media (max-width: 767px) {
/* Demande Justine (06.08, précision) : sur mobile seule la LISTE À PUCES
perd la justification ; les paragraphes et les encadrés accordéon
restent justifiés comme sur ordinateur */
.jr-divi-text ul li {
text-align: left !important;
}
}
/* Section « Quel est ton défi aujourd'hui ? » : centrée (demande Justine 06.08,
choix design volontaire — le Divi justifie encore) */
.jr-divi-text--center p {
text-align: center !important;
}
@media (min-width: 768px) {
/* Demande Justine (06.08) : puces packs moins aérées en desktop
(l'interligne hérité de 28.8px gonflait la liste ; mobile inchangé) */
.coaching-steps__packs li {
line-height: 22px;
margin: 0 0 4px;
}
}
/* Sommaire yoga — boîte flottante à droite, fidèle au WP */
.article-visual-builder .jr-sommaire-box {
float: right;
width: 340px;
margin: 0 0 25px 30px;
padding: 18px 22px 14px;
background: #FFFDEB;
border: 1px solid #c4a882;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
text-align: center;
}
.article-visual-builder .jr-sommaire-box p,
.article-visual-builder .jr-sommaire-box h2,
.article-visual-builder .jr-sommaire-box h3 {
font-size: 13px !important;
line-height: 1.5 !important;
text-align: center !important;
margin: 0 0 6px !important;
text-transform: none;
}
.article-visual-builder .jr-sommaire-box ol {
margin: 6px 0;
padding: 0;
list-style-position: inside;
}
.article-visual-builder .jr-sommaire-box li {
font-size: 13px !important;
line-height: 1.5 !important;
text-align: center !important;
margin-bottom: 6px !important;
}
/* Titre « – SOMMAIRE – » dans la boîte (comme le WP) */
.article-visual-builder .jr-sommaire-box h6 {
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-align: center;
margin: 0 0 10px;
}
/* Liens saumon sans soulignement, comme dans la boîte WP
(le !important neutralise les
hérités de la migration Divi) */
.article-visual-builder .jr-sommaire-box a,
.article-visual-builder .jr-sommaire-box span {
color: #bc7962;
text-decoration: none !important;
}
@media (max-width: 767px) {
.article-visual-builder .jr-sommaire-box { float: none; width: auto; margin: 0 0 24px; }
}
/* ============================================================
Hero mobile (pages au papillon : accueil + coaching) — mesuré sur Divi :
logo 240x90, image de fond PORTRAIT dédiée (400x800) calée en bas,
au lieu de l'image desktop zoomée à 2.6x. Les !important sont requis
car le logo et le background sont en style inline dans le contenu.
Desktop intouché (déjà aligné pixel : logo 734px).
============================================================ */
@media (max-width: 767px) { /* téléphone seulement : l'iPad portrait (768) garde la photo d'origine (revue tablette 09.09) */
.hero[style*="papillon-philosophie"] {
background-image: url('/images/home/papillon-mobile.webp') !important;
background-position: 50% 100% !important;
}
}
@media (max-width: 480px) {
.hero[style*="papillon-philosophie"] .hero__logo {
width: 240px !important;
max-width: 100% !important;
}
/* Position du logo sur l'image comme Divi (demande Mme Primat 04.08) :
89px sous le haut visible de la photo (nav fixe 52px + 89 = 141) */
.hero[style*="papillon-philosophie"] { padding-top: 141px; }
}
/* ============================================================
Flèches du carrousel Success Stories — mesurées sur Divi :
bouton 60x60 / glyphe 40px en desktop (hors du carrousel),
36x36 / 36px en mobile au bord du carrousel. Couleur #D99175 déjà en place.
============================================================ */
.testimonials-swiper-wrap { position: relative; }
.testimonials-swiper-wrap .swiper-button-prev,
.testimonials-swiper-wrap .swiper-button-next {
width: 60px;
height: 60px;
margin-top: -30px;
left: 0;
right: auto;
}
.testimonials-swiper-wrap .swiper-button-next { left: auto; right: 0; }
.testimonials-swiper-wrap .swiper-button-prev::after,
.testimonials-swiper-wrap .swiper-button-next::after {
/* Chevron court ETmodules de Divi (encre 11x19 à 40px, trait 2.6px arrondi) :
reproduit en SVG — le glyphe swiper-icons occupait toute la hauteur d'em
et paraissait deux fois plus massif */
content: '';
font-size: 0;
width: 12px;
height: 20px;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M9.5 2.5 3 10l6.5 7.5' fill='none' stroke='%23D99175' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.testimonials-swiper-wrap .swiper-button-next::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2.5 2.5 9 10l-6.5 7.5' fill='none' stroke='%23D99175' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 1240px) {
/* Divi place les flèches hors de la zone des cartes */
.testimonials-swiper-wrap .swiper-button-prev { left: -60px; }
.testimonials-swiper-wrap .swiper-button-next { right: -60px; }
}
@media (max-width: 980px) {
.testimonials-swiper-wrap .swiper-button-prev,
.testimonials-swiper-wrap .swiper-button-next {
width: 36px;
height: 36px;
}
.testimonials-swiper-wrap .swiper-button-prev::after,
.testimonials-swiper-wrap .swiper-button-next::after {
width: 11px;
height: 18px;
}
}
@media (max-width: 767px) {
/* Carte pleine largeur comme Divi (312px) : colonne de citation ~278px */
.testimonials-swiper { padding: 0 !important; }
.testimonial-slide { padding: 0 20px; }
}
/* Art. yoga 1/3 : le WP n'y utilise PAS de boîte flottante — le sommaire
est une liste numérotée centrée dans le flux, la couverture des
Yoga-Sutras flottée à sa droite. */
.article-visual-builder ol.jr-sommaire-inline {
list-style-position: inside;
padding-left: 0;
margin: 0 0 18px;
}
.article-visual-builder ol.jr-sommaire-inline li {
margin-bottom: 4px !important;
text-align: center !important; /* la règle globale sur les li écrase le style inline */
}
.article-visual-builder ol.jr-sommaire-inline p { text-align: center !important; } /* ☀️ final */
.article-visual-builder ol.jr-sommaire-inline li::marker { font-weight: 700; }
.article-visual-builder .jr-yoga-cover {
float: right;
width: 230px;
margin: 0 0 24px 30px;
text-align: center;
}
@media (max-width: 767px) {
.article-visual-builder .jr-yoga-cover { float: none; width: auto; margin: 24px auto; }
}
/* Ancres (sommaire yoga, notes) : compenser le header fixe */
.article-visual-builder [id],
.article-visual-builder a[name] { scroll-margin-top: 70px; }
/* Citations bleues : h2 light ET en casse normale (le WP ne les met pas en majuscules) */
.article-visual-builder section[style*="background:#8DB1CE"] h2,
.article-visual-builder section[style*="background:#93B0C8"] h2 {
font-weight: 300 !important;
text-transform: none !important;
}
/* Largeur de colonne — WP Divi: row 80% / max 1080px (le convertisseur avait mis 720-760px) */
.article-visual-builder section > div[style*="max-width"],
.article-visual-builder section > figure[style*="max-width"] {
max-width: 1080px !important;
}
/* H1 (titre hero) — PIXEL-PERFECT WP Divi: Open Sans 45px small-caps #004348, ls 0.5px */
.article-visual-builder h1,
.article-visual-builder .jr-article-hero h1 {
font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif !important;
font-size: 36px !important; /* Divi : 36px / graisse 500 (Aurélie 09.09) */
font-weight: 500 !important;
/* PAS de small-caps : mesuré sur le WP, le titre d'article est en casse normale */
color: #004348 !important; /* Teal foncé WP — pas blanc */
letter-spacing: 0 !important;
line-height: 1.2em !important;
}
/* Sur mobile, réduire le h1 — WP mobile mesuré : 34px / 40.8px / 500.
La variante .jr-article-hero h1 est nécessaire : la règle de base l'utilise
et sa spécificité écrasait l'override mobile (h1 restait à 45px). */
@media (max-width: 640px) {
.article-visual-builder h1,
.article-visual-builder .jr-article-hero h1 {
font-size: 34px !important;
line-height: 40.8px !important;
font-weight: 500 !important;
}
}
/* H2 — MESURÉ sur WP : Open Sans 600, 30px, lh 33px, uppercase, #004348, centré, mb 20px */
.article-visual-builder h2 {
font-family: var(--font-heading) !important;
font-weight: 600 !important;
font-size: 30px !important;
text-align: center !important;
text-transform: uppercase;
line-height: 33px !important;
letter-spacing: normal !important;
color: #004348; /* non-!important : les sections foncées gardent leur blanc inline */
margin: 0 0 20px;
padding: 0;
}
/* H3 — MESURÉ sur WP : Open Sans 600, 20px, lh 22px, ls 1px, uppercase, #004348, GAUCHE, mb 20px */
.article-visual-builder h3 {
font-family: var(--font-heading) !important;
font-weight: 600 !important;
font-size: 20px !important;
text-align: left !important;
text-transform: uppercase;
letter-spacing: 1px !important;
line-height: 22px !important;
color: #004348;
margin: 0 0 20px !important; /* Divi : 16 px (respiration du paragraphe) avant, 20 px après (Aurélie 16.09) */
}
/* H4 — Open Sans 600, 16px, uppercase (peu utilisé dans les articles) */
.article-visual-builder h4 { margin: 0 0 20px !important; }
.article-visual-builder h4 {
font-family: var(--font-heading) !important;
font-weight: 600 !important;
font-size: 16px !important;
text-align: left !important;
text-transform: uppercase;
letter-spacing: 1px !important;
line-height: 1.4em;
color: #004348;
}
/* Blocs de citation bleus sur téléphone : marges latérales réduites comme sur l'ancien site, pour que les lignes demandées
(« de changements naturels. ») tiennent sur une ligne (Aurélie 16.09) */
@media (max-width: 767px) {
.article-visual-builder section[style*="#8DB1CE"], .article-visual-builder section[style*="#93B0C8"] { padding-left: 16px !important; padding-right: 16px !important; }
.article-visual-builder section[style*="#8DB1CE"] h2, .article-visual-builder section[style*="#93B0C8"] h2 { font-size: 28px !important; line-height: 31px !important; }
}
@media (max-width: 380px) {
.article-visual-builder section h2:not([style*="#8DB1CE"]) { font-size: 28px !important; line-height: 31px !important; } /* iPhone 375 : les lignes demandées tiennent (Aurélie 16.09) ; sélecteur renforcé face à la règle générale des h2 */
}
/* Auteur d'une citation (« – Lao-Tseu – ») : en romain, seule la citation est en italique (Aurélie 16.09) */
.article-visual-builder section[style*="#8DB1CE"] h2 + p, .article-visual-builder section[style*="#93B0C8"] h2 + p { font-style: normal !important; }
/* Titres jamais coupés par un trait d'union (Aurélie 16.09) : un mot trop long passe simplement à la ligne */
.article-visual-builder :is(h1, h2, h3, h4, h5, h6), .article-visual-builder .jr-article-hero h1 { hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; }
/* Photos et illustrations : pas de glisser-déposer (Aurélie 16.09) */
.article-visual-builder img, .article-card img, .hero img, .bubble img { -webkit-user-drag: none; user-drag: none; }
/* Liens dans le contenu — WP: #D99175 */
.article-visual-builder a {
color: var(--terracotta);
}
/* Listes — Divi: padding 30px 0 30px 50px, li margin-bottom 10px, alignées à GAUCHE */
.article-visual-builder ul,
.article-visual-builder ol {
padding: 0 0 0 16px; /* puces au bord du texte, comme Divi (Aurélie 16.09) */
margin: 0 0 16px; /* 16 px avant (respiration du paragraphe) et 16 px après */
list-style-position: outside;
text-align: left !important;
}
.article-visual-builder li:last-child { margin-bottom: 0 !important; } /* le dernier point n'ajoute pas ses 10 px */
@media (max-width: 767px) {
.article-visual-builder p strong, .article-visual-builder li strong { -webkit-text-stroke: 0.45px currentColor; paint-order: stroke fill; } /* gras plus marqués sur téléphone (Aurélie 16.09) */
.article-visual-builder p, .article-visual-builder li { hyphens: auto; -webkit-hyphens: auto; } /* texte justifié sans trous : coupure des mots longs (jamais dans les titres) */
.article-visual-builder ul { padding-left: 20px; } /* Divi téléphone */
.article-visual-builder section ol:not(.jr-sommaire-inline), .article-visual-builder section .jr-list-num { padding-left: 24px !important; } /* numéros moins collés au bord (Aurélie 16.09) */
.article-visual-builder section .jr-sommaire-box ol { padding-left: 0 !important; } /* la boîte du sommaire (yoga) garde ses listes sans retrait */
.article-visual-builder .jr-sommaire-inline li, .article-visual-builder .jr-sommaire-box li { hyphens: manual; -webkit-hyphens: manual; } /* pas de césure dans les liens d'un sommaire */
}
/* Liste numérotée (style réutilisable « jr-list-num ») : numéros alignés sur le bord du texte (retrait 16px
comme Divi), texte justifié, même espace avant et après la liste (Aurélie 09.09) */
.article-visual-builder ol:not(.jr-sommaire-inline),
.jr-list-num {
padding: 0 0 0 16px !important;
margin: 14px 0 30px !important; /* 14 + 16 de respiration du paragraphe précédent = 30 ; 30 après (le dernier point n'a plus de marge) */
list-style-position: outside;
text-align: justify !important;
}
.article-visual-builder ol:not(.jr-sommaire-inline) li, .jr-list-num li { margin-bottom: 10px !important; line-height: 26px; text-align: justify; }
.article-visual-builder ol:not(.jr-sommaire-inline) li:last-child, .jr-list-num li:last-child { margin-bottom: 0 !important; }
.article-visual-builder .jr-sommaire-box ol { padding: 0 !important; margin: 6px 0 !important; text-align: center !important; list-style-position: inside; }
.article-visual-builder .jr-sommaire-box ol li { margin-bottom: 0 !important; text-align: center !important; }
.article-visual-builder ul:empty, .article-visual-builder ol:empty { display: none; } /* restes de la conversion Divi */
.article-visual-builder figure img[src] { margin-top: 0 !important; } /* bat la règle img[src*=citation] (marge 16px) : image calée à 40px du bord du bloc */
.article-visual-builder li {
margin-bottom: 10px !important; /* bat les styles hérités de Divi (6 px) ; le dernier point reste à 0 */
line-height: 26px !important; /* mesuré WP */
font-family: 'CenturyGoth', var(--font-body) !important;
font-weight: 500;
font-size: 1rem;
color: #004348 !important; /* bat les inline color:#333 hérités de la migration */
text-align: justify !important; /* mesuré WP : listes justifiées */
}
/* Tableaux — même typo que le corps */
.article-visual-builder table td,
.article-visual-builder table th {
font-family: var(--font-body);
color: #004348;
}
.article-visual-builder li::marker {
font-weight: bold;
}
/* Citations (blockquote) dans les sections */
.article-visual-builder blockquote {
font-style: italic;
line-height: 1.8;
}
/* Strong / em dans le texte */
.article-visual-builder strong {
font-weight: 700;
color: inherit; /* suit la couleur du parent (teal en clair, blanc en foncé) */
}
.article-visual-builder em {
font-style: italic;
}
/* === Sections FONCÉES (#004348) — texte blanc et centré (newsletter CTA, encarts teal) === */
.article-visual-builder section[style*="background:#004348"] p,
.article-visual-builder section[style*="background:#004348"] li,
.article-visual-builder section[style*="background:#004348"] h2,
.article-visual-builder section[style*="background:#004348"] h3,
.article-visual-builder section[style*="background:#004348"] h4 {
color: #ffffff;
text-align: center !important;
}
/* === Sections CITATION bleues (#8DB1CE / #93B0C8) — WP: blanc, centré, italique === */
.article-visual-builder section[style*="background:#8DB1CE"] p,
.article-visual-builder section[style*="background:#93B0C8"] p {
color: #ffffff;
text-align: center !important;
font-style: italic;
font-size: 18px !important;
line-height: 1.7 !important;
}
/* ===== RESPONSIVE MOBILE pour visual builder ===== */
@media (max-width: 640px) {
.article-visual-builder section {
padding-left: 20px !important;
padding-right: 20px !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.article-visual-builder section > div,
.article-visual-builder section > figure {
max-width: 100% !important;
width: 100% !important;
}
/* Hero mobile */
.article-visual-builder .jr-article-hero {
min-height: 320px !important;
}
/* H1 déjà surchargé au-dessus */
/* WP mobile mesuré : les H2/H3 gardent leur taille desktop (30px et 20px) */
.article-visual-builder h2 {
font-size: 30px !important;
line-height: 33px !important;
}
.article-visual-builder h3 {
font-size: 20px !important;
line-height: 22px !important;
}
.article-visual-builder p,
.article-visual-builder li {
font-size: 16px !important; /* mêmes réglages que sur ordinateur (Aurélie 09.09) */
line-height: 24px !important;
word-break: break-word;
}
.article-visual-builder li {
line-height: 26px !important;
}
.article-visual-builder img {
max-width: 100% !important;
height: auto !important;
}
/* Colonnes et grilles inline du contenu : empilées en mobile (le WP empile tout) */
.article-visual-builder div[style*="columns"] { columns: 1 !important; }
.article-visual-builder div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.article-visual-builder figure[style*="float"] { float: none !important; margin: 24px auto !important; }
/* Boutons pilules */
.article-visual-builder a[style*="border-radius:30px"] {
padding: 12px 24px !important;
font-size: 0.95rem !important;
}
}
/* ===== COMMENT SECTION ===== */
.comments-section {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(0, 48, 59, 0.1);
}
.comments-section__title {
font-family: var(--font-heading);
font-size: 1.4rem;
margin-bottom: 32px;
}
.comment {
background: var(--white);
border-radius: var(--radius-sm);
padding: 20px;
margin-bottom: 16px;
border-left: 3px solid var(--terracotta);
}
.comment__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.comment__author {
font-family: var(--font-heading);
font-weight: 600;
color: var(--teal);
font-size: 0.95rem;
}
.comment__date {
font-size: 0.8rem;
color: var(--text-light);
}
.comment__content {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.7;
color: var(--text);
}
.comment-form {
background: var(--white);
border-radius: var(--radius);
padding: 28px;
margin-top: 32px;
}
.comment-form__title {
font-family: var(--font-heading);
font-size: 1.1rem;
margin-bottom: 20px;
}
.comment-form__group {
margin-bottom: 16px;
}
.comment-form__label {
display: block;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--teal);
margin-bottom: 6px;
}
.comment-form__input,
.comment-form__textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid rgba(0, 48, 59, 0.15);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--text);
background: var(--cream);
transition: var(--transition);
}
.comment-form__input:focus,
.comment-form__textarea:focus {
outline: none;
border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(217, 145, 117, 0.15);
}
.comment-form__textarea {
resize: vertical;
min-height: 120px;
}
.comment-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.comment-form__honeypot {
display: none;
}
.comment-form__submit {
margin-top: 8px;
}
.alert {
padding: 12px 20px;
border-radius: var(--radius-sm);
margin-bottom: 16px;
font-size: 0.9rem;
}
.alert--success {
background: rgba(46, 204, 113, 0.15);
color: #1a7a3a;
border: 1px solid rgba(46, 204, 113, 0.3);
}
/* ===== ADMIN TOOLBAR ===== */
.admin-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
background: #1a1a2e;
color: rgba(255, 255, 255, 0.9);
font-size: 0.8rem;
height: 36px;
display: flex;
align-items: center;
}
.admin-bar__container {
max-width: 1400px;
margin: 0 auto;
padding: 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.admin-bar__left,
.admin-bar__right {
display: flex;
align-items: center;
gap: 16px;
}
.admin-bar__link {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
padding: 4px 10px;
border-radius: 4px;
transition: all 0.2s;
font-size: 0.8rem;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.admin-bar__link:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.admin-bar__user {
color: rgba(255, 255, 255, 0.5);
font-size: 0.75rem;
}
.admin-bar__logout {
color: rgba(255, 100, 100, 0.8);
}
.admin-bar__logout:hover {
color: #ff6464;
background: rgba(255, 100, 100, 0.1);
}
/* Shift everything down when admin bar is present */
.has-admin-bar .nav {
top: 36px;
}
.has-admin-bar .hero {
padding-top: 108px;
}
.has-admin-bar .reading-progress {
top: 88px;
}
/* ===== FOOTER ===== */
.footer {
background: var(--cream);
color: var(--text);
padding: 14px 20px;
text-align: center;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.footer p {
font-family: var(--font-body);
font-size: 0.8rem;
color: #d99175;
margin: 0;
}
.footer a {
color: #d99175;
text-decoration: none;
border-bottom: 1px solid rgba(217, 145, 117, 0.4);
transition: border-color 0.2s;
}
.footer a:hover {
border-bottom-color: #d99175;
}
/* ===== COOKIE CONSENT POPUP ===== */
.cookie-consent {
position: fixed;
bottom: 20px;
right: 20px;
left: auto;
z-index: 9999;
background: var(--cream);
border: 1px solid var(--card-border);
border-radius: var(--radius);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
padding: 24px;
display: none;
max-width: 380px;
width: calc(100% - 40px);
}
.cookie-consent--visible {
display: block;
}
.cookie-consent__container {
display: flex;
flex-direction: column;
gap: 16px;
}
.cookie-consent__text {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text);
}
.cookie-consent__text strong {
font-weight: 700;
}
.cookie-consent__buttons {
display: flex;
gap: 10px;
}
.cookie-consent__btn {
font-family: var(--font-body);
padding: 8px 20px;
border-radius: var(--radius-sm);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
border: none;
}
.cookie-consent__btn--accept {
background: var(--terracotta);
color: var(--white);
}
.cookie-consent__btn--accept:hover {
background: var(--terracotta-dark);
}
.cookie-consent__btn--refuse {
background: transparent;
border: 1px solid var(--text-light);
color: var(--text);
}
.cookie-consent__btn--refuse:hover {
border-color: var(--teal);
color: var(--teal);
}
/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 90;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--terracotta);
color: var(--white);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
transition: var(--transition);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
}
.back-to-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--terracotta-dark);
transform: translateY(-3px);
}
.pagination .active {
background: var(--terracotta);
color: var(--white);
}
.pagination .page-item.active .page-link {
background-color: var(--terracotta);
border-color: var(--terracotta);
color: var(--white);
}
/* Article Body Typography and Layout */
.article-body {
font-size: 1.1rem;
line-height: 1.8;
color: var(--grey-text);
}
.article-body p {
margin-bottom: 1.5rem;
}
.article-body h2, .article-body h3, .article-body h4 {
color: var(--terracotta);
margin-top: 2.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
.article-body h2 {
font-size: 1.8rem;
}
.article-body h3 {
font-size: 1.5rem;
}
.article-body ul, .article-body ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.article-body li {
margin-bottom: 0.5rem;
}
.article-body blockquote {
border-left: 4px solid var(--terracotta);
padding-left: 1.5rem;
margin-left: 0;
margin-right: 0;
font-style: italic;
background: var(--light-cream);
padding: 1.5rem;
border-radius: 0 8px 8px 0;
margin-bottom: 1.5rem;
}
.article-image {
display: block;
max-width: 100%;
height: auto;
margin: 2rem auto;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Parallax Hero */
.parallax-layer {
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
will-change: transform;
}
/* ===================================
HOMEPAGE: Justine Section
=================================== */
.justine-section {
display: flex;
align-items: center;
gap: 48px;
}
.justine-section__photo {
flex-shrink: 0;
}
.justine-section__img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(0, 67, 72, 0.1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.justine-section__text {
flex: 1;
}
.justine-section__text p {
font-family: var(--font-body);
color: var(--text);
line-height: 1.7;
margin-bottom: 12px;
font-size: 1rem;
}
.justine-section__signature {
max-width: 180px;
margin-top: 16px;
}
/* ===================================
HOMEPAGE: Conferences (sand bg #F7EAD7)
=================================== */
.section--sand {
background-color: #F7EAD7;
padding: 54px 0; /* 54px sous « Réserver une conférence », comme le reste du rythme (Aurélie 31.08) */
}
.conference__title {
font-family: var(--font-heading);
font-size: 35px;
color: #004B50;
font-weight: 500;
text-align: center;
margin-bottom: 8px;
text-transform: uppercase;
}
.conference__subtitle {
font-family: var(--font-heading);
font-size: 20px;
letter-spacing: 1px;
color: #004348;
font-weight: 700;
text-align: center;
margin-bottom: 30px;
}
.conference__description {
font-size: 16px;
font-weight: 500;
color: #004B50;
text-align: center;
max-width: 700px;
margin: 30px auto;
line-height: 22.4px;
}
.conference-banner__photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.conference-banner__img {
overflow: hidden;
}
.conference-banner__img img {
width: 100%;
height: 254px;
object-fit: cover;
display: block;
}
.btn--peach-solid {
background-color: #D99175;
color: #FFFFFF; /* texte + picto en blanc pur (Aurélie 22.08) */
border: 0;
border-radius: 6px;
padding: 10px 30px;
font-size: 20px;
font-family: var(--font-body);
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: letter-spacing 300ms ease 0ms, background-color 0.3s; /* même vitesse de stretch que les autres boutons (Aurélie 01.09) */
}
.btn--peach-solid:hover {
background-color: #D99175;
color: #FFFFFF; /* sans cela le a:hover global passait le texte en brun (Aurélie 31.08) */
letter-spacing: 3px; /* stretch Divi, sans changement de fond (Aurélie 22.08) */
}
/* Rangée « Réserver ma séance / DM-moi » (page Coaching) : au survol, l'étirement
ne fait plus passer « DM-moi » à la ligne sur ordinateur (Aurélie 01.09) */
.coaching-btn-row { flex-wrap: nowrap !important; }
/* Les boutons gardent leur largeur : sans cela ils se compressaient et leur émoji passait à la ligne (Aurélie 02.09) */
.coaching-btn-row > * { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 767px) {
.coaching-btn-row { flex-wrap: wrap !important; }
.coaching-btn-row > * { flex-shrink: 1; white-space: normal; }
}
/* ===================================
SUCCESS STORIES (teal dark #004348)
=================================== */
.section--teal-dark {
background-color: #004348;
padding: 35px 0 40px;
}
/* ===================================
JUSTINE CIRCLE PHOTO + PICTOGRAMMES
=================================== */
.justine-circle-section {
padding: 40px 0 54px;
}
/* Géométrie mesurée sur WP : rangée 1265px, photo 585px centrée,
pictos 158px — 2 empilés à gauche (10% / top 152 & 263px), 2 à droite (right 10%). */
.justine-circle {
position: relative;
max-width: 1265px;
margin: 0 auto;
min-height: 585px;
}
.justine-circle__photo {
width: 585px;
max-width: 90vw;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto;
}
.justine-circle__picto {
position: absolute;
width: 158px;
height: 158px;
animation: jr-move-updown 5s ease-in-out infinite; /* WP: MoveUpDown, -30px */
}
/* max(8px, …) : sous 1020px de large les pictos restaient hors écran et faisaient défiler la page horizontalement
sur tablette (revue 09.09) ; ils se calent maintenant à 8px du bord */
.justine-circle__picto--l1 { left: max(8px, calc(50% - 510px)); top: 140px; } /* Divi mesuré : 60px entre bulle et photo */
.justine-circle__picto--l2 { left: max(8px, calc(50% - 510px)); top: 263px; animation-delay: -2.5s; }
.justine-circle__picto--r1 { right: max(8px, calc(50% - 510px)); top: 140px; animation-delay: -1.2s; }
.justine-circle__picto--r2 { right: max(8px, calc(50% - 510px)); top: 263px; animation-delay: -3.7s; }
.justine-circle { overflow-x: clip; }
/* Tablette portrait (768–949) : comme le WP à 768, photo et pictos réduits pour qu'ils ne se chevauchent pas (09.09) */
@media (min-width: 768px) and (max-width: 999px) {
.justine-circle__photo { width: 440px; }
.justine-circle { min-height: 440px; }
.justine-circle__picto { width: 130px; height: 130px; }
.justine-circle__picto--l1, .justine-circle__picto--r1 { top: 100px; }
.justine-circle__picto--l2, .justine-circle__picto--r2 { top: 215px; }
.article-card__title { font-size: 26px; line-height: 29px; } /* cartes de 352px : titres sur 4 lignes maximum */
}
@keyframes jr-move-updown {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
/* ===================================
CGU FOOTER
=================================== */
.section--cgu {
background: var(--cream);
padding: 20px 0;
}
.cgu__link {
color: var(--text-light);
font-size: 14px;
text-decoration: none;
}
.cgu__link:hover {
text-decoration: underline;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
.benefits { grid-template-columns: 1fr; }
.categories-grid { justify-content: flex-start; }
.articles-grid { grid-template-columns: 1fr; }
.fini-grid { grid-template-columns: 1fr; gap: 32px; }
.fini-divider { width: 100%; height: 1px; min-height: auto; }
.section { padding: 40px 16px; }
.section--teal { padding: 54px 16px; } /* rythme 54px aussi sur téléphone (Aurélie 01.09) */
.hero { min-height: 65vh; padding: 120px 16px 60px; }
.hero__logo { max-width: 380px; }
.quote { font-size: 1.15rem; }
.comment-form__row { grid-template-columns: 1fr; }
.newsletter-form { flex-direction: column; }
.newsletter-form__input { min-width: 100%; }
.conference-banner__photos { grid-template-columns: 1fr; }
.conference-banner__img img { height: auto; }
.justine-section { flex-direction: column; text-align: center; }
/* Mobile fidèle au WP : photo 300px, pictos masqués */
.justine-circle__photo { width: 300px; height: 300px; }
.justine-circle { min-height: auto; }
.justine-circle__picto { display: none; }
/* Home mobile refondue par Aurélie (23.07, x3 vues) : le WP mobile AFFICHE
désormais ces blocs — ampoule à la place des lunettes, et les 13 bulles
EMPILÉES verticalement (mesuré sur la variante mobile Divi). */
.home-glasses { padding-top: 14px; } /* 40 px de la section précédente + 14 = 54 px avant « Dès lors » (Aurélie 16.09) */
.home-glasses .glasses__img--desktop { display: none; }
.home-glasses .glasses__img--mobile { display: block; margin: 16px auto 0; max-width: 300px; } /* taille Divi mobile */
.bubbles-section { padding: 30px 0 20px; }
.latest-articles .section__title-badge { max-width: 210px; } /* taille Divi mobile (Aurélie 22.08) */
.latest-articles .articles-grid .article-card:nth-child(n+4) { display: none; } /* 3 derniers articles sur téléphone */
.bubbles-collage {
position: static;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* WP mobile : pas de 305px pour des bulles de 312 -> léger chevauchement */
.bubble + .bubble { margin-top: -7px; }
.bubble {
position: static;
width: min(312px, 80%);
/* les images sont en lazy : réserver la hauteur (fichiers carrés 510x510)
pour une mise en page stable avant chargement */
aspect-ratio: 1 / 1;
animation: none;
}
.bubble img { width: 100%; height: 100%; }
}
/* Entre la tablette paysage et l'ordinateur (1024–1279) : passage continu de la disposition tablette (bulles de 256 px
qui se touchent un peu, validée le 16.09) à la disposition ordinateur validée à 1280 (281 px) : largeur et colonnes
glissent avec la fenêtre, sans saut ni bulles « immenses » sur un écran d'ordinateur réduit (Aurélie 16.09 soir) */
@media (min-width: 1024px) and (max-width: 1279px) {
.bubbles-collage { height: calc(1135px + 9.766vw); } /* 979 px + largeur d'une bulle */
.bubble { width: calc(156px + 9.766vw); } /* 256 px à 1024, 281 px à 1280 */
.bubble--1 { left: calc(-4.10px + 2.320vw); }
.bubble--2 { left: calc(-77.31px + 44.040vw); }
.bubble--3 { left: calc(-154.62px + 88.080vw); }
.bubble--4 { left: calc(-39.94px + 22.820vw); }
.bubble--5 { left: calc(-25.60px + 60.000vw); }
.bubble--6 { left: calc(-4.10px + 2.320vw); }
.bubble--7 { left: calc(-78.85px + 44.860vw); }
.bubble--8 { left: calc(-154.62px + 88.080vw); }
.bubble--9 { left: calc(-42.50px + 24.320vw); }
.bubble--10 { left: calc(-118.27px + 67.440vw); }
.bubble--11 { left: calc(-5.12px + 2.900vw); }
.bubble--12 { left: calc(-82.43px + 46.940vw); }
.bubble--13 { left: calc(-154.62px + 88.080vw); }
}
/* Tablette portrait (768–1023) : pastille « Derniers articles » à 154px et bulles de 265px sur 3 colonnes en quinconce,
positions mesurées sur l'ancien site à 768px (Aurélie 14.09) */
@media (min-width: 768px) and (max-width: 1023px) {
/* hauteurs en vw (valeurs 768 px ÷ 7,68) : la disposition validée à 768 s'agrandit avec l'écran au lieu de se
resserrer (sur iPad Air 820 / Pro 834 les bulles grandissaient sans que les hauteurs suivent, vérification 16.09) */
.bubbles-collage { height: 162.24vw; }
.bubble { width: 34.5%; }
.bubble--1 { left: 1.95%; top: 18.36vw; }
.bubble--2 { left: 31%; top: 15.23vw; }
.bubble--3 { left: 63%; top: 11.59vw; }
.bubble--4 { left: 20%; top: 48.05vw; }
.bubble--5 { left: 54%; top: 40.76vw; }
.bubble--6 { left: 1.95%; top: 76.69vw; }
.bubble--7 { left: 33%; top: 74.61vw; }
.bubble--8 { left: 63%; top: 68.36vw; }
.bubble--9 { left: 21%; top: 102.73vw; }
.bubble--10 { left: 55%; top: 99.09vw; }
.bubble--11 { left: 1.95%; top: 127.21vw; }
.bubble--12 { left: 32%; top: 127.73vw; }
.bubble--13 { left: 63%; top: 126.69vw; }
}
/* L'ampoule est la variante mobile uniquement (le WP la masque en desktop) */
.glasses__img--mobile { display: none; }
@media (max-width: 1024px) and (min-width: 768px) { /* tablette dès 768 : 3 colonnes de 227px étaient trop étroites (09.09) */
.articles-grid { grid-template-columns: repeat(2, 1fr); }
.benefits { grid-template-columns: repeat(2, 1fr); }
.benefit--card:last-child { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; }
}
/* ===================================
Section Builder Styles
=================================== */
.article-sections {
margin-top: -20px;
overflow: hidden;
}
.content-section {
width: 100%;
overflow: hidden;
}
.content-section__inner {
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
}
/* Full-bleed sections */
.content-section--cta .content-section__inner,
.content-section--image .content-section__inner {
max-width: 1100px;
}
.content-section--text .content-section__inner h2 {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
margin-bottom: 24px;
color: inherit;
}
.content-section--text .content-section__inner h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 16px;
color: inherit;
}
.content-section--text .content-section__inner p {
line-height: 1.8;
margin-bottom: 16px;
text-align: justify;
color: inherit;
}
.content-section--text .content-section__inner a {
color: var(--terracotta);
text-decoration: underline;
text-decoration-color: var(--terracotta);
text-underline-offset: 2px;
}
.content-section--text .content-section__inner ul,
.content-section--text .content-section__inner ol {
padding-left: 24px;
margin-bottom: 16px;
}
.content-section--text .content-section__inner li {
margin-bottom: 8px;
line-height: 1.7;
}
/* Two & Three Columns */
.content-section__grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.content-section__grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
align-items: start;
}
.content-section__col h2,
.content-section__col h3 {
font-family: var(--font-heading);
color: inherit;
}
.content-section__col p {
line-height: 1.7;
color: inherit;
}
.content-section__col a {
color: var(--terracotta);
}
/* Image section */
.content-section__caption {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text-light);
font-style: italic;
margin-top: 12px;
}
/* CTA section */
.content-section__cta-title {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 12px;
}
.content-section__cta-subtitle {
font-family: var(--font-body);
font-size: 1.05rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.btn--teal {
background: var(--teal);
color: var(--white);
padding: 10px 24px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-weight: 600;
text-decoration: none;
transition: var(--transition);
border: 2px solid var(--teal);
}
.btn--teal:hover {
background: var(--teal-light);
border-color: var(--teal-light);
}
/* Quote section */
.content-section__blockquote {
border-left: 4px solid var(--terracotta);
padding: 24px 32px;
margin: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.content-section__blockquote p {
font-family: var(--font-heading);
font-size: 1.2rem;
font-style: italic;
line-height: 1.7;
margin-bottom: 12px;
color: inherit;
}
.content-section__blockquote cite {
font-family: var(--font-body);
font-size: 0.9rem;
font-style: normal;
color: var(--terracotta);
font-weight: 600;
}
/* Separator section */
.content-section__separator {
text-align: center;
max-width: 200px;
margin: 0 auto;
}
.content-section__separator--line {
border: none;
border-top: 2px solid var(--terracotta);
opacity: 0.4;
}
.content-section__separator--dots {
font-size: 1.5rem;
color: var(--terracotta);
letter-spacing: 8px;
}
.content-section__separator--wave {
font-size: 1.2rem;
color: var(--terracotta);
opacity: 0.5;
letter-spacing: 4px;
}
/* ===================================
HOMEPAGE: Conference Banner & Section
=================================== */
/* ===== CONFERENCES SECTION (sand bg #F7EAD7) ===== */
.section--sand {
background-color: #F7EAD7;
padding: 54px 0; /* 54px sous « Réserver une conférence », comme le reste du rythme (Aurélie 31.08) */
}
.conference__title {
font-family: var(--font-heading);
font-size: 35px;
color: #004B50;
font-weight: 500;
text-align: center;
margin-bottom: 8px;
text-transform: uppercase;
}
.conference__subtitle {
font-family: var(--font-heading);
font-size: 20px;
letter-spacing: 1px;
color: #004348;
font-weight: 700;
text-align: center;
margin-bottom: 30px;
}
.conference__description {
font-size: 16px;
font-weight: 500;
color: #004B50;
text-align: center;
max-width: 700px;
margin: 30px auto;
line-height: 22.4px;
}
.conference-banner__photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.conference-banner__img {
overflow: hidden;
border-radius: 12px;
}
.conference-banner__img img {
width: 100%;
height: 254px;
object-fit: cover;
display: block;
border-radius: 12px;
}
.family-section {
display: flex;
align-items: center;
gap: 48px;
justify-content: center;
}
.family-section__text {
flex: 1;
max-width: 600px;
}
.family-section__image {
flex-shrink: 0;
}
.family-section__image img {
width: 280px;
border-radius: var(--radius-lg);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
/* ===================================
RESPONSIVE: New homepage sections
=================================== */
@media (max-width: 768px) {
.justine-section {
flex-direction: column;
text-align: center;
}
.justine-section__img {
width: 160px;
height: 160px;
}
.conference-banner {
grid-template-columns: 1fr;
}
.family-section {
flex-direction: column;
}
.family-section__image img {
width: 220px;
}
}
/* ===================================
RESPONSIVE: 375px (iPhone)
=================================== */
@media (max-width: 375px) {
.hero__logo {
max-width: 240px;
}
.hero__title {
font-size: 1.2rem;
}
.btn {
padding: 6px 16px;
font-size: 0.9rem;
min-width: 180px;
}
.benefit--card {
padding: 24px 16px;
}
.bubble {
padding: 20px; /* largeur : min(312px, 80 %) comme à 390 (revue 14.09) */
font-size: 0.75rem;
}
.bubble strong {
font-size: 1rem;
}
.article-card__body {
padding: 16px;
}
.container {
padding: 0 16px;
}
}
/* ===== RELATED ARTICLES ===== */
.related-articles {
padding: 64px 0 80px;
background: var(--cream-warm);
}
.related-articles__title {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--teal);
text-align: center;
margin-bottom: 40px;
}
.related-articles__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) {
.related-articles__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 601px) and (max-width: 900px) {
/* 3 cartes en 2 colonnes : la dernière, seule, est centrée au lieu de rester collée à gauche (09.09) */
.related-articles__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 12px); margin: 0 auto; }
}
@media (max-width: 600px) {
.related-articles__grid {
grid-template-columns: 1fr;
}
.newsletter-article__inner {
padding: 32px 20px;
}
}
/* ===================================
COACHING PAGE
=================================== */
/* -- Coaching Steps (Timeline) -- */
.coaching-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 16px;
}
/* Grille asymétrique : étape 3 prend 2x la largeur */
.coaching-steps--asymmetric {
grid-template-columns: 1fr 1fr 2fr 1fr;
align-items: start;
}
/* Grid interne 2 colonnes dans l'étape 3 */
.coaching-steps__details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
text-align: left;
margin-top: 8px;
}
@media (max-width: 640px) {
/* WP mobile : une seule colonne centrée pour l'étape Accompagnement */
.coaching-steps__details-grid { grid-template-columns: 1fr; }
}
.coaching-steps__item {
text-align: center;
padding: 32px 20px;
background: rgb(247, 234, 215); /* Crème chaud comme les cartes accordéon */
border-radius: 10px;
position: relative;
transition: var(--transition);
}
.coaching-steps__item:hover {
background: rgb(240, 224, 200);
transform: translateY(-4px);
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.coaching-steps__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--terracotta);
color: var(--white);
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
margin-bottom: 12px;
}
.coaching-accordion__icon {
font-size: 0.85rem; /* Petit et élégant (réduit depuis 1.4rem) */
flex-shrink: 0;
opacity: 0.85;
}
.coaching-steps__icon {
font-size: 1.5rem; /* Réduit pour plus d'élégance */
margin-bottom: 12px;
line-height: 1;
}
.coaching-steps__title {
font-family: var(--font-heading);
font-size: 1.05rem;
color: var(--teal); /* Teal sur fond crème comme Divi */
margin-bottom: 8px;
font-weight: 600;
}
.coaching-steps__text {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text); /* Texte foncé sur fond crème */
line-height: 1.5;
}
/* -- Coaching Modalities -- */
.coaching-modalities {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-bottom: 40px;
}
.coaching-modalities__card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 40px 32px;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
}
.coaching-modalities__card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.coaching-modalities__icon {
font-size: 2.5rem;
margin-bottom: 16px;
line-height: 1;
}
.coaching-modalities__title {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--teal);
margin-bottom: 12px;
font-weight: 600;
}
.coaching-modalities__text {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--text);
line-height: 1.6;
}
.coaching-modalities__info {
text-align: center;
font-family: var(--font-body);
font-size: 1rem;
color: var(--text);
}
.coaching-modalities__info p {
margin-bottom: 8px;
}
/* -- Coaching Guide (Brochure Download) -- */
.coaching-guide {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 48px;
align-items: center;
}
.coaching-guide__visual {
display: flex;
justify-content: center;
}
.coaching-guide__cover-wrapper {
position: relative;
max-width: 320px;
}
.coaching-guide__cover {
border-radius: var(--radius-lg);
width: 100%;
}
.coaching-guide__pastille {
position: absolute;
top: -18px;
right: -18px;
width: 80px;
height: 80px;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
.coaching-guide__title {
font-family: var(--font-heading);
font-size: 1.6rem;
color: #D99175 !important; /* titre du guide en orange (Aurélie 19.08) */
margin-bottom: 8px;
}
.coaching-guide__subtitle {
font-family: var(--font-body);
font-size: 1rem;
color: #004348;
margin-bottom: 4px;
}
.coaching-guide__headline {
font-family: var(--font-heading);
font-size: 1.1rem;
color: var(--terracotta);
margin-bottom: 12px;
line-height: 1.5;
}
.coaching-guide__description {
font-family: var(--font-body);
font-size: 0.95rem;
color: #004348;
line-height: 1.6;
margin-bottom: 24px;
}
.coaching-guide__content p { color: #004348; } /* mention newsletter comprise */
.coaching-guide__form {
position: relative;
}
.coaching-guide__field {
margin-bottom: 12px;
}
.coaching-guide__input {
width: 100%;
box-sizing: border-box;
height: 46px;
padding: 14px 16px; /* = champs Newsletter / Commentaires */
border: 0;
border-radius: 3px;
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: #004348;
background: var(--white);
transition: box-shadow 0.2s ease;
}
.coaching-guide__input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(217, 145, 117, 0.35);
}
.coaching-guide__input::placeholder {
color: #004348;
opacity: 1;
}
.coaching-guide__btn {
width: 100%;
border: none;
margin-top: 4px;
letter-spacing: 0;
transition: letter-spacing 300ms ease 0ms, background 300ms ease;
}
.coaching-guide__btn:hover {
background: var(--terracotta); /* effet stretch Divi comme les boutons du bandeau */
color: var(--white);
letter-spacing: 3px;
transform: none;
box-shadow: none;
}
.coaching-guide__consent {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--text-light);
margin-top: 12px;
line-height: 1.4;
text-align: center;
}
.coaching-guide__error {
display: block;
font-family: var(--font-body);
font-size: 0.82rem;
color: #c0392b;
margin-top: 4px;
}
.coaching-guide__alert {
padding: 12px 16px;
border-radius: 3px;
font-family: var(--font-body);
font-size: 16px;
margin-bottom: 16px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(217, 145, 117, 0.45);
color: #004348;
}
.coaching-guide__alert--error {
background: #fdecea;
color: #c0392b;
border: 1px solid #f5c6cb;
}
/* -- Coaching Bio -- */
.coaching-bio {
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
align-items: center;
}
.coaching-bio__photo {
display: flex;
justify-content: center;
}
.coaching-bio__img {
width: 240px;
height: 240px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.coaching-bio__title {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--terracotta);
margin-bottom: 16px;
}
.coaching-bio__text p {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--text);
line-height: 1.7;
margin-bottom: 12px;
}
.coaching-bio__signature {
max-width: 180px;
margin-top: 16px;
}
/* Bandeau photo des sous-pages (Blog, Association) — Aurélie 26.08 */
.hero--page { min-height: 46vh; padding: 130px 24px 60px; }
/* Page Oops et pages d'erreur : photo de l'accueil recadrée sur le papillon (entier, à gauche du texte)
+ léger voile orange #D99175 (Aurélie 09.09). Variantes essayées : sépia, sépia + orange. */
.hero--oops { background-size: 130% !important; background-position: 100% 6% !important; }
.hero--oops .hero__overlay { display: block; position: absolute; inset: 0; background: #D99175; opacity: 0.28; pointer-events: none; }
@media (min-width: 768px) and (max-width: 1024px) { /* tablette : le recadrage ordinateur coupait le haut du papillon sous la barre */
.hero--oops { background-size: 150% !important; background-position: 70% 0% !important; }
}
@media (max-width: 767px) {
.hero.hero--oops[style*="papillon-philosophie"] { background-size: cover !important; background-position: 50% 75% !important; } /* papillon entier entre la barre et le titre */
}
/* Bandeau de la page Association : nouvelle photo (papillon monarque, Mme Primat 17.09). Le papillon est placé AU-DESSUS du
titre sur toutes les vues, pour que ni le titre ni le sous-titre ne passent sur lui : la photo est calée en px/vw
(haut du papillon à ~13 px sous la barre de menu) et le texte descend d'autant. */
.hero.hero--asso { background-size: cover !important; background-repeat: no-repeat; background-color: #74783b; /* teinte du bas de la photo : filet de sécurité invisible sous 300 px de large */ min-height: 0; }
.hero.hero--asso .hero__description { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 15px rgba(0, 0, 0, 0.35); }
@media (min-width: 768px) {
.hero.hero--asso { background-position: 50% calc(65px - 22vw) !important; padding-top: calc(105px + 11.5vw); }
}
@media (max-width: 767px) {
.hero.hero--asso { background-size: 200vw auto !important; background-position: -38.8vw calc(62px - 44vw) !important; padding-top: calc(74px + 28vw); padding-bottom: 48px; }
}
/* Bandeau des pages Blog et Résultats : photo du bureau (choix de Mme Primat, 17.09), plein cadre sur toutes les vues */
.hero--blog { background-size: cover !important; }
/* Le sous-titre se pose sur la fenêtre, zone la plus claire de la photo : même ombre renforcée que sur l'Association */
.hero.hero--blog .hero__description { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 15px rgba(0, 0, 0, 0.35); }
/* Bande jaune du blog : paragraphe + choix des catégories */
.blog-intro { background: #FFFDEB; padding: 46px 24px 54px; } /* crème ; 54px vers les résultats (Aurélie 07.09) */
.blog-intro__text {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.7;
color: var(--teal-dark);
max-width: 880px;
margin: 0 auto 30px;
text-align: center;
}
/* -- Coaching Responsive -- */
@media (min-width: 769px) {
.hero--coaching {
min-height: 70vh;
}
}
@media (max-width: 900px) {
.coaching-steps {
grid-template-columns: repeat(2, 1fr);
}
.coaching-guide {
grid-template-columns: 1fr;
gap: 32px;
}
.coaching-guide__visual {
order: -1;
}
.coaching-guide__cover-wrapper {
max-width: 260px;
}
.coaching-bio {
grid-template-columns: 1fr;
text-align: center;
gap: 32px;
}
.coaching-bio__signature {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 600px) {
.coaching-steps {
grid-template-columns: 1fr;
gap: 16px;
}
.coaching-steps__item {
padding: 24px 16px;
}
.coaching-modalities {
grid-template-columns: 1fr;
gap: 20px;
}
.coaching-modalities__card {
padding: 28px 20px;
}
.coaching-guide__cover-wrapper {
max-width: 220px;
}
.coaching-bio__img {
width: 180px;
height: 180px;
}
}
/* ===================================
YOGA ARTICLES — Footnote Highlight
=================================== */
a[id^="_ftnref"]:target,
a[id^="_ftn"]:target,
a[id^="note"]:target {
background-color: #FFD54F;
box-shadow: 0 0 16px rgba(255, 213, 79, 0.9);
border-radius: 4px;
padding: 2px 6px;
animation: fn-pulse 3s ease-out forwards;
}
@keyframes fn-pulse {
0% { background-color: #FFD54F; box-shadow: 0 0 16px rgba(255, 213, 79, 0.9); }
70% { background-color: #FFD54F; box-shadow: 0 0 16px rgba(255, 213, 79, 0.9); }
100% { background-color: transparent; box-shadow: none; }
}
/* ===================================
YOGA ARTICLES — Article Footnotes
=================================== */
.article-footnotes {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid #c4a882;
font-size: 0.85rem;
color: rgba(53, 53, 53, 0.75);
}
.article-footnotes h4 {
font-size: 0.9rem;
font-weight: 600;
color: #004b50;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.article-footnotes ol {
padding-left: 20px;
}
.article-footnotes li {
margin-bottom: 6px;
line-height: 1.5;
}
.article-footnotes a {
color: #d99175;
font-weight: 600;
}
/* ============================================================
Notes de bas de page Word-style — articles yoga 2/3 et 3/3
Le WP masque carrément ces sections en production
(.postid-35194/.postid-35224 .et_pb_section_5 {display:none!important}) ;
on garde le contenu mais en densité « notes » (13px/18px).
Ciblage par la classe .jr-notes posée sur le div des notes
(les sélecteurs :has(a[id^="_ftn"]) attrapaient par erreur le corps
de l'article 11, qui contient une ancre _ftn1 inline — quirk de
migration).
============================================================ */
.article-visual-builder .jr-notes > p {
font-size: 13px !important;
line-height: 18px !important;
padding-bottom: 6px !important;
}
.article-visual-builder .jr-notes > p:last-child {
padding-bottom: 0 !important;
}
/* Le sommaire dupliqué en bas de l'article 13 vit dans la même section
que les notes ; le WP le masque par CSS (.sommaire-moved
.et_pb_section_1{display:none}) — même mécanisme ici, aucune
donnée supprimée (le bloc reste éditable dans GrapesJS). */
.article-visual-builder section:has(> .jr-notes) > div:has(> h6) {
display: none;
}
/* Padding vertical réduit de la section notes (44px -> 28px) */
.article-visual-builder section:has(> .jr-notes) {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
.article-divider {
border: none;
border-top: 1px solid #e5cdb8;
margin: 40px 0;
}
/* ===================================
YOGA ARTICLES — Floating Sommaire (TOC)
=================================== */
.article-toc {
float: right;
width: 340px;
margin: 0 0 24px 30px;
background: #FFFDEB;
border: 1px solid #c4a882;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
padding: 20px 22px;
clear: right;
}
.article-toc__title {
font-size: 18px;
font-weight: 600;
color: #0a0404;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 14px;
font-family: var(--font-heading);
}
.article-toc__top-link {
display: block;
font-size: 13px;
font-weight: 600;
color: #004b50;
margin-bottom: 8px;
text-decoration: underline;
text-underline-offset: 2px;
}
.article-toc__list {
padding-left: 18px;
margin-bottom: 12px;
}
.article-toc__list li {
font-size: 13px;
margin-bottom: 5px;
line-height: 1.4;
}
.article-toc__list a {
color: #0a0404;
text-decoration: none;
transition: color 0.2s ease;
}
.article-toc__list a:hover {
color: #d99175;
}
.article-toc__bottom-link {
display: block;
font-size: 13px;
color: #004b50;
font-style: italic;
margin-top: 6px;
text-decoration: underline;
text-underline-offset: 2px;
}
.article-toc__footer {
text-align: center;
font-size: 1.2rem;
margin-top: 10px;
}
@media (max-width: 900px) {
.article-toc {
width: 280px;
margin-left: 20px;
}
.article-toc__title {
font-size: 16px;
}
.article-toc__list li {
font-size: 12px;
}
}
@media (max-width: 768px) {
.article-toc {
float: none;
width: 100%;
margin: 0 0 24px 0;
}
.article-toc__title {
font-size: 16px;
}
.article-toc__list li {
font-size: 12px;
}
}
/* ===================================
YOGA ARTICLES — Poursuivre la lecture cards
=================================== */
.yoga-read-next {
margin: 40px 0 48px;
padding: 32px 24px;
background: transparent;
border-top: 1px solid #e5cdb8;
clear: both;
}
.yoga-read-next__title {
font-size: 22px;
font-weight: 600;
color: #004b50;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: center;
margin-bottom: 28px;
font-family: 'Open Sans', var(--font-heading), sans-serif;
}
.yoga-read-next__grid {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
.yoga-read-next__card {
background: #FFFDEB;
border: 1px solid #c4a882;
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
max-width: 400px;
flex: 1 1 280px;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
text-decoration: none;
display: block;
}
.yoga-read-next__card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}
.yoga-read-next__card-img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.yoga-read-next__card-body {
padding: 18px 20px;
}
.yoga-read-next__card-title {
font-size: 16px;
font-weight: 600;
color: #004b50;
font-family: 'Open Sans', var(--font-heading), sans-serif;
margin-bottom: 8px;
line-height: 1.35;
}
.yoga-read-next__card-desc {
font-size: 13px;
color: #666;
margin-bottom: 14px;
line-height: 1.5;
}
.yoga-read-next__card-btn {
display: inline-block;
background: #d99175;
color: #FFFDEB;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
padding: 8px 16px;
text-decoration: none;
transition: background 0.2s ease, letter-spacing 0.2s ease;
font-family: 'Open Sans', var(--font-heading), sans-serif;
}
.yoga-read-next__card-btn:hover {
background: #c47a5e;
letter-spacing: 0.08em;
color: #FFFDEB;
}
@media (max-width: 600px) {
.yoga-read-next__grid {
flex-direction: column;
}
.yoga-read-next__card {
max-width: 100%;
}
.yoga-read-next__card-img {
height: 160px;
}
.yoga-read-next__title {
font-size: 18px;
}
}
/* ========================================
BOUTON J'AIME
======================================== */
.like-section {
display: flex;
justify-content: center;
margin: 40px 0 24px;
}
/* === Bouton J'aime — badge compact saumon/orange (WP style) === */
/* Sur WP, c'est un petit badge compact, pas un gros bouton blanc pleine largeur */
.like-section {
display: flex;
justify-content: flex-start; /* Aligné à gauche comme WP, pas centré */
margin: 0 0 16px; /* le bloc précédent apporte déjà ses 40px (Aurélie 09.09) */
padding: 0 0 0 4px;
}
.like-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px; /* Compact, pas 12px 28px */
background: #d89f81; /* Fond saumon/terracotta doux */
border: none;
border-radius: 6px; /* Rectangle légèrement arrondi, pas pilule */
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
color: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.like-btn:hover:not(.like-btn--liked) {
background: #c47a5a;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(196, 122, 90, 0.3);
}
.like-btn--liked {
background: #c47a5a;
color: #ffffff;
}
.like-btn__heart {
display: flex;
align-items: center;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.like-btn--animating .like-btn__heart {
transform: scale(1.4);
}
.like-btn__count {
display: inline-block;
font-weight: 700;
font-size: 0.8rem;
color: rgba(255,255,255,0.85);
}
@keyframes like-pulse {
0% { transform: scale(1); }
40% { transform: scale(1.5); }
70% { transform: scale(0.9); }
100% { transform: scale(1); }
}
.like-btn--animating svg {
animation: like-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ========================================
DROPDOWN CATÉGORIES — NAVIGATION
======================================== */
.nav__dropdown {
position: relative;
}
.nav__link--dropdown {
display: inline-flex;
align-items: center;
gap: 5px;
}
.nav__dropdown-arrow {
transition: transform 0.2s ease;
opacity: 0.6;
}
.nav__dropdown:hover .nav__dropdown-arrow {
transform: rotate(180deg);
opacity: 1;
}
.nav__dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: rgba(255, 253, 235, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(196, 168, 130, 0.3);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 48, 59, 0.12);
min-width: 240px;
padding: 8px 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.22s ease;
z-index: 200;
}
.nav__dropdown:hover .nav__dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.nav__dropdown-item {
display: block;
padding: 9px 20px;
font-size: 0.88rem;
color: var(--text);
text-decoration: none;
transition: background 0.15s, color 0.15s;
font-family: var(--font-body);
}
.nav__dropdown-item:hover {
background: rgba(217, 145, 117, 0.1);
color: #D99175;
}
/* Flèche decorative du dropdown */
.nav__dropdown-menu::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background: rgba(255, 253, 235, 0.97);
border-left: 1px solid rgba(196, 168, 130, 0.3);
border-top: 1px solid rgba(196, 168, 130, 0.3);
}
/* Association page — address block */
.association-address {
margin-top: 20px;
padding: 16px 20px;
background: rgba(196, 168, 130, 0.1);
border-left: 3px solid #c4a882;
border-radius: 6px;
font-size: 0.95rem;
color: var(--text-light);
line-height: 1.7;
}
/* ========================================
MENU — liens à gauche, catégories du Blog à
droite du terme « Blog » (Mme Primat, 01.09)
======================================== */
.nav__menu {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 880px;
gap: 18px;
}
.nav__menu-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.nav__mobile-main-link {
display: block;
padding: 6px 24px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--teal);
text-decoration: none;
border-radius: 10px; /* encadré arrondi, comme l'encadré Coaching du pied d'article */
transition: background 0.15s, color 0.15s;
letter-spacing: 0.01em;
}
.nav__mobile-main-link--icon svg { display: block; }
.nav__mobile-main-link:hover {
background: #F7EAD7; /* encadré rose arrondi + texte orange (Aurélie 01.09) */
color: #D99175;
}
/* « Blog » garde l'encadré bleu au survol : il signale l'univers Blog/catégories */
.nav__menu-blog-row .nav__mobile-main-link:hover {
background: var(--blue-steel, #93B0C8);
color: #fff;
}
/* Rangée « Blog ▸ » : la flèche pointe vers la liste et la replie/déplie */
.nav__menu-blog-row {
display: inline-flex;
align-items: center;
gap: 2px;
}
.nav__menu-toggle {
background: none;
border: none;
cursor: pointer;
padding: 6px;
color: var(--terracotta, #D99175);
display: inline-flex;
align-items: center;
}
.nav__menu-toggle:hover { color: var(--blue-steel, #93B0C8); }
.nav__menu-toggle { gap: 3px; }
.nav__menu-toggle svg { transition: transform 0.2s ease; }
@media (max-width: 767px) { .nav__menu-toggle-extra { display: none; } } /* téléphone : une seule flèche (validé par Mme Primat) */
/* Les deux triangles ajoutés (2 × 13 px + 2 × 3 px) débordent à droite sans élargir la rangée :
« Blog » et le premier triangle restent exactement à leur place validée */
@media (min-width: 768px) { .nav__menu-toggle { margin-right: -32px; } }
.nav__menu-toggle.is-closed svg { transform: rotate(90deg); } /* ordinateur/tablette : replié → la flèche pivote vers le bas (Aurélie 03.09) */
/* Catégories : titre + liste alignée à gauche */
.nav__menu-cats {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.nav__menu-cats.is-closed { display: none; }
.nav__menu-cats-title {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--teal);
padding: 2px 10px;
}
.nav__menu-cats-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.nav__menu-cat {
font-family: var(--font-body);
font-size: 0.9rem;
line-height: 1.3; /* catégories sur deux lignes plus compactes (Aurélie 07.09) */
color: var(--teal);
text-decoration: none;
padding: 2px 10px;
transition: color 0.15s;
}
.nav__menu-cat:hover {
color: var(--blue-steel, #93B0C8); /* texte bleu au survol, sans encadré (Aurélie 01.09) */
}
.nav__menu-cat--active {
color: var(--blue-steel, #93B0C8);
font-weight: 700;
}
.nav__menu-social {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 4px;
}
/* Instagram et LinkedIn côte à côte : encadré de survol resserré autour du pictogramme (30 px entre les deux, cible tactile de 46 px) */
.nav__menu-social .nav__mobile-main-link--icon { padding: 6px 10px; }
@media (min-width: 768px) {
/* Grille : liens en colonne 1, catégories en colonne 2 (le bloc suit « Blog » dans le HTML
pour s'afficher sous Blog sur téléphone — Aurélie 03.09) */
.nav__menu-links {
display: grid;
grid-template-columns: 210px auto;
column-gap: 56px;
row-gap: 2px;
align-items: start;
justify-items: center;
}
.nav__menu-links > * { grid-column: 1; }
/* Liste repliée : une seule colonne, sans espace fantôme → bloc de liens parfaitement centré (Aurélie 07.09) */
.nav__menu-links.is-folded { grid-template-columns: 210px; column-gap: 0; }
.nav__menu-links > .nav__menu-cats {
grid-column: 2;
grid-row: 1 / span 6;
justify-self: start;
align-items: flex-start;
border-left: 1px solid rgba(196, 168, 130, 0.25);
padding-left: 44px;
}
.nav__menu-cats-title { padding: 2px 0 4px; }
/* Deux colonnes remplies verticalement : plus de « trous » d'alignement
(Empathie/Sexualité) qu'imposait l'ancienne grille (Aurélie 01.09) */
.nav__menu-cats-list {
display: block;
column-count: 2;
column-gap: 40px;
}
.nav__menu-cat {
display: block;
break-inside: avoid;
text-align: left;
padding: 3px 0;
}
}
@media (max-width: 767px) {
/* Sur téléphone la liste est en dessous : la flèche pointe vers le bas ; repliée, elle pivote vers la droite */
.nav__menu-toggle svg { transform: rotate(90deg); }
.nav__menu-toggle.is-closed svg { transform: rotate(0deg); }
/* Interlignes resserrés pour moins de défilement (Aurélie 03.09) */
.nav__menu-cats { gap: 2px; margin: 2px 0 6px; }
.nav__menu-cats-list { gap: 0; }
.nav__menu-cat { font-size: 0.88rem; line-height: 1.35; padding: 1px 10px; }
.nav__menu-cats-title { padding: 0 10px 2px; }
}
/* Essai demandé (Aurélie 03.09) : « Toutes les catégories » aux couleurs du bouton Blog du menu */
/* Recherche sans résultat : invitation à la lecture (Aurélie 01.09) */
.search-empty {
text-align: center;
padding: 10px 0 54px;
}
.search-empty__msg {
font-family: var(--font-body);
color: var(--teal);
font-size: 1.05rem;
margin-bottom: 22px;
}
.search-empty__invite {
font-family: var(--font-modern);
color: var(--teal);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 22px;
}
/* ========================================
FOOTER ENRICHI
======================================== */
.footer {
background: var(--cream, #FFFDEB);
border-top: 1px solid rgba(196, 168, 130, 0.25);
padding: 48px 0 0;
margin-top: 0;
}
.footer__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
padding-bottom: 40px;
}
.footer__brand {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer__logo {
height: 36px;
width: auto;
object-fit: contain;
margin-bottom: 4px;
}
.footer__address {
font-size: 0.87rem;
color: var(--text-light, #6b7280);
margin: 0;
line-height: 1.6;
}
.footer__email {
font-size: 0.87rem;
color: #D99175;
text-decoration: none;
transition: opacity 0.2s;
}
.footer__email:hover {
opacity: 0.75;
}
.footer__links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer__col {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer__col strong {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--teal, #00303B);
margin-bottom: 4px;
}
.footer__col a {
font-size: 0.88rem;
color: var(--text-light, #6b7280);
text-decoration: none;
transition: color 0.15s;
line-height: 1.5;
}
.footer__col a:hover {
color: #D99175;
}
.footer__bottom {
padding: 16px 24px;
text-align: center;
}
.footer__bottom p {
font-size: 0.82rem;
color: var(--text-light, #6b7280);
margin: 0;
}
@media (max-width: 768px) {
.footer__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.footer__links {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.footer__links {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ===== ARTICLE META CONTAINER (Divi et_pb_title_meta_container) ===== */
/* WP Divi: PAR JUSTINE | 4 MAR 2026 | COUPLE, CROYANCES... */
.article-meta-container {
background-color: transparent;
padding: 10px 24px 18px;
text-align: center;
font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
font-size: 18px; /* WP: 18px exact */
font-weight: 500;
color: #004348 !important; /* WP: teal foncé */
text-transform: uppercase; /* WP: majuscules */
letter-spacing: 0.03em;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px;
}
.article-meta-container__label {
font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
color: #004348 !important;
font-size: 18px;
text-transform: uppercase;
}
.article-meta-container__label strong {
color: #004348 !important;
font-weight: 600;
}
.article-meta-container__sep {
color: rgba(0, 67, 72, 0.4);
margin: 0 4px;
}
.article-meta-container__date {
color: #004348 !important;
font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
font-size: 18px;
text-transform: uppercase;
}
/* Catégories: couleur saumon WP #D99175, bold */
.article-meta-container__tag {
color: #D99175 !important;
text-decoration: none;
font-weight: 700;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.03em;
font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
transition: opacity 0.15s;
}
.article-meta-container__tag:hover {
opacity: 0.75;
text-decoration: underline;
}
.article-meta-container__read {
color: rgba(0, 67, 72, 0.6);
font-weight: 400;
font-size: 0.85rem; /* Minute de lecture: plus discret */
}
@media (max-width: 640px) {
.article-meta-container {
padding: 8px 16px 14px;
font-size: 13px;
gap: 3px;
}
.article-meta-container__label,
.article-meta-container__date,
.article-meta-container__tag { font-size: 13px; }
}
/* ===== INDICATEURS MOBILES DUPLIQUÉS — masquer la version centrée WP ===== */
/* Les tables sans width:80% et avec margin:auto sont la version mobile GrapesJS.
On les cache (elles sont un doublon de la version 2 colonnes).
Note: Le sélecteur sur les tables suffit — pas de masquage de div parent. */
.article-visual-builder table[style*="margin-left: auto"][style*="margin-right: auto"]:not([style*="width: 80%"]):not([border="2"]) {
display: none !important;
}
/* ============================================================
STANDARDISATION TEMPLATE GRAPEJS — Toutes les corrections
applicables à TOUS les articles, anciens et futurs.
============================================================ */
/* Uniformiser la largeur des colonnes des tables (ex: indicateurs) */
.article-visual-builder table[style*="width: 80%"] {
table-layout: fixed;
}
.article-visual-builder table[style*="width: 80%"] td:first-child {
width: 30% !important;
}
.article-visual-builder table[style*="width: 80%"] td:nth-child(2) {
width: 70% !important;
}
/* [Nettoyé 2026-07-31] Les overrides h2/h3/p « vert foncé #0d3b36 / gris #2c2c2c »
et la conversion des sections bleues #8DB1CE en sauge sont SUPPRIMÉS :
la référence est désormais la palette WP réelle (#004348, citations #8DB1CE),
définie dans le bloc ARTICLE VISUAL BUILDER en haut de fichier. */
/* [09.09] Bouton et image « Citation » : règles définies une seule fois dans le bloc ARTICLE VISUAL BUILDER en haut de fichier. */
/* Conteneur parent de l'image citation : limiter la largeur */
.article-visual-builder div:has(> img[src*="Citation"]),
.article-visual-builder div:has(> img[alt*="Citation"]) {
max-width: 760px !important; /* Divi affiche les images-citation à ~755px, pas 400 */
margin-left: auto !important;
margin-right: auto !important;
}
/* --- Tableaux exemples (❌ ✅) : aération pixel-perfect WP (override final) --- */
.article-visual-builder table td,
.article-visual-builder table th {
border: none !important;
padding: 10px 14px !important;
height: auto !important;
vertical-align: middle !important;
line-height: 1.5 !important;
}
.article-visual-builder table[border="2"] {
margin-bottom: 12px !important;
height: auto !important;
}
@media (max-width: 600px) {
.article-visual-builder table[border="2"] td {
display: block !important;
width: 100% !important;
}
}
/* --- Masquer la vue mobile dupliquée sur desktop --- */
@media (min-width: 768px) {
.article-visual-builder .indicators-mobile-view,
.article-visual-builder .mobile-only {
display: none !important;
}
}
/* --- Hero GrapesJS : méta sous le titre h1 (doublon CSS consolidé) --- */
.jr-article-hero {
position: relative;
}
.jr-article-hero .jr-hero-meta {
display: block;
position: static;
margin-top: 14px;
text-align: center;
color: rgba(255, 255, 255, 0.88) !important;
font-family: 'Open Sans', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
background: none;
backdrop-filter: none;
padding: 0;
pointer-events: auto;
}
/* --- Meta container GrapesJS : caché en CSS (JS le masque aussi dynamiquement) ---
Le contenu est cloné dans le hero par JS, le conteneur externe est inutile. */
.article-meta-container--grapes {
display: none !important;
}
.article-meta-container--grapes .article-meta-container__label,
.article-meta-container--grapes .article-meta-container__date {
color: #c47b5f; /* Cuivre/saumon WP */
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.72rem !important;
font-weight: 600;
}
.article-meta-container--grapes .article-meta-container__label strong {
color: #c47b5f !important;
}
.article-meta-container--grapes .article-meta-container__sep {
color: rgba(196, 123, 95, 0.35);
}
.article-meta-container--grapes .article-meta-container__tag {
color: #c47b5f !important;
text-transform: uppercase !important;
font-size: 0.7rem !important;
}
/* --- Articles similaires : fidèle au WP (cartes crème AVEC image, titre terracotta) --- */
.related-articles {
background: transparent; /* WP : grille posée sur le crème de la page */
padding: 40px 20px;
}
.related-articles .article-card {
background: #FFFDEB; /* WP : crème identique au fond de page */
border: 1px solid rgba(196, 168, 130, 0.25);
border-radius: 10px;
}
.related-articles .article-card__title {
font-size: 28px; /* WP : 28px terracotta (couleur héritée de la base) */
}
.related-articles .article-card__excerpt {
font-size: 16px; /* WP : 16px justifié brun Divi */
text-align: justify;
color: rgba(53, 53, 53, 0.83);
}
/* --- Cookie banner : bouton "Refuser" en saumon/pêche --- */
/* Classes génériques de bandeaux cookies (Tarteaucitron, Cookiebot, custom) */
.cookie-deny,
.cookie-refuse,
.tarteaucitronDeny,
[class*="cookie"][class*="deny"],
[class*="cookie"][class*="refus"] {
background: #d89f81 !important;
color: #ffffff !important;
border-color: #d89f81 !important;
}
.cookie-deny:hover,
.cookie-refuse:hover,
.tarteaucitronDeny:hover {
background: #c47a5a !important;
border-color: #c47a5a !important;
}
/* ============================================================
HERO DIVI — Fondu image vers la page (#fffdeb)
Reproduit exactement le rendu WordPress/Divi :
- Gradient 180deg : blanc semi-transparent (haut) → crème (#fffdeb, bas)
- border-image : fondu parfait du bord bas dans la couleur de page
============================================================ */
/* Le hero GrapesJS principal */
.article-visual-builder .jr-article-hero {
/* Assurer un fondu vers la couleur crème de page */
border-image: fill 0 linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 98%,
#fffdeb 99%
);
}
/* L'overlay div du hero (2e enfant absolu) — override le gradient inline */
/* Le gradient Divi exact : blanc 48% transparent → #fffdeb opaque */
.article-visual-builder .jr-article-hero > div:nth-child(2) {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.48) 0%,
#fffdeb 100%
) !important;
}
/* Aussi pour le cas où l'overlay est ciblé par position */
.article-visual-builder .jr-article-hero [style*="linear-gradient"] {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.48) 0%,
#fffdeb 100%
) !important;
}
/* S'assurer que la section hero elle-même fond dans la page */
.article-visual-builder .jr-article-hero {
margin-bottom: 0 !important;
}
/* Le meta-container GrapesJS qui suit le hero : fond crème continu */
.article-meta-container--grapes {
background-color: #fffdeb !important;
border-bottom: 1px solid rgba(196, 168, 130, 0.15);
}
/* ============================================================
CORRECTIONS SPÉCIFIQUES ARTICLES 1-5
============================================================ */
/* Art.01 + Art.03 : listes li/ul/ol avec couleur blanche héritée
dans les sections à fond clair. Override global sécurisé. */
.article-visual-builder section[style*="background:#faf8f5"] li,
.article-visual-builder section[style*="background: #faf8f5"] li,
.article-visual-builder section[style*="background:#ffffff"] li,
.article-visual-builder section[style*="background: #ffffff"] li,
.article-visual-builder section[style*="background:white"] li {
color: #333333 !important;
}
.article-visual-builder section[style*="background:#faf8f5"] ul,
.article-visual-builder section[style*="background: #faf8f5"] ul,
.article-visual-builder section[style*="background:#faf8f5"] ol,
.article-visual-builder section[style*="background: #faf8f5"] ol {
color: #333333 !important;
}
/* Art.03 : icône infini/cœur surdimensionnée → limiter à 120px */
.article-visual-builder img[src*="infin"],
.article-visual-builder img[alt*="infin"],
.article-visual-builder img[src*="Infin"],
.article-visual-builder img[alt*="Infin"],
.article-visual-builder img[src*="coeur-infini"],
.article-visual-builder img[src*="heart"] {
max-width: 120px !important;
height: auto !important;
display: block !important;
margin: 0 auto 2rem auto !important;
}
/* Art.05 : H3 dans les sections de contenu → aligné à gauche, uppercase */
.article-visual-builder section[style*="background:#faf8f5"] h3,
.article-visual-builder section[style*="background: #faf8f5"] h3 {
text-align: left !important;
text-transform: uppercase !important;
}
/* ============================================================
CORRECTIONS SPÉCIFIQUES ARTICLES 6-10
============================================================ */
/* Art.07 : grande image d'arbre (gestion émotionnelle) → contraindre à 300px max */
.article-visual-builder img[src*="arbre"],
.article-visual-builder img[alt*="arbre"],
.article-visual-builder img[src*="Arbre"],
.article-visual-builder img[alt*="Arbre"],
.article-visual-builder img[src*="tree"],
.article-visual-builder img[src*="Tree"] {
max-width: 300px !important;
height: auto !important;
display: block !important;
margin: 0 auto 1.5rem auto !important;
}
/* Art.06 : texte dans bloc citation bleu — forcer blanc et pas de majuscules forcées
via inline styles text-transform:uppercase qui écrasent parfois */
.article-visual-builder section[style*="#8da4b4"] p,
.article-visual-builder section[style*="#8DB1CE"] p,
.article-visual-builder section[style*="background:#e8f2f2"] p {
color: #ffffff !important;
text-transform: none !important;
}
/* Art.06/08/09 : H3 dans section e8f2f2 (bleu-vert clair) → aligné gauche, uppercase */
.article-visual-builder section[style*="#e8f2f2"] h3,
.article-visual-builder section[style*="background:#e8f2f2"] h3,
.article-visual-builder div[style*="background:#e8f2f2"] h3 {
text-align: left !important;
text-transform: uppercase !important;
color: #1a4d46 !important;
}
/* Art.08 : section "Sortir du mode" — fond vert d'eau si fond gris clair généré */
.article-visual-builder section[style*="background:#f1f5f9"] {
background-color: #d1e7dd !important;
}
/* ============================================================
CORRECTIONS SPÉCIFIQUES ARTICLES 11-20
============================================================ */
/* Art.11-13 : image de yoga / posture grande en plein milieu du contenu
Les images yoga sont souvent très larges → on les contraigne à 500px max */
.article-visual-builder img[src*="yoga"],
.article-visual-builder img[alt*="yoga"],
.article-visual-builder img[src*="Yoga"],
.article-visual-builder img[alt*="Yoga"] {
max-width: min(500px, 100%) !important;
height: auto !important;
display: block !important;
margin: 1rem auto !important;
}
/* Art.11 : image livre Patañjali — flotter à droite, compact */
.article-visual-builder img[alt*="Pata"] { /* couverture Patañjali (articles yoga) : flottante à droite */
max-width: 200px !important;
float: right;
margin: 0 0 1rem 1.5rem !important;
height: auto !important;
}
.article-visual-builder img[src*="livre"]:not([alt*="Pata"]),
.article-visual-builder img[src*="book"]:not([alt*="Pata"]),
.article-visual-builder img[alt*="livre"]:not([alt*="Pata"]) { /* autres couvertures : centrées sous le texte, comme l'ancien site (09.09) */
float: none !important; display: block !important; margin: 24px auto 0 !important; max-width: min(282px, 100%) !important; height: auto !important;
}
/* Art.15 : liste de valeurs longue → 3 colonnes automatiques */
.article-visual-builder ul[style*="column"],
.article-visual-builder ol[style*="column"] {
column-count: 3;
column-gap: 2rem;
}
/* Art.20 : spans mal formatés dans les listes (background/display:block intempestifs) */
.article-visual-builder li span {
display: inline !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Art.20 : images citation groupées → disposition horizontale flex */
.article-visual-builder figure + figure {
display: inline-block;
}
/* ============================================================
CORRECTIONS SPÉCIFIQUES ARTICLES 21-30
============================================================ */
/* Art.21-30 : Blocs de citations bleues — forcer blanc et italique.
Cible les sections avec fond bleu soutenu (7a9bbc, 7b94b2, 8cb3d9, etc.) */
.article-visual-builder section[style*="#7a9bbc"] p,
.article-visual-builder section[style*="#7b94b2"] p,
.article-visual-builder section[style*="#8cb3d9"] p,
.article-visual-builder section[style*="#92b0cb"] p,
.article-visual-builder div[style*="background-color:#7a9bbc"] p,
.article-visual-builder div[style*="background-color:#7b94b2"] p {
color: #ffffff !important;
text-transform: none !important;
font-weight: 300 !important;
font-style: italic !important;
}
/* Art.28 : blocs "DES SOLUTIONS" — fond vert d'eau (#dbeaea) si présent inline */
.article-visual-builder div[style*="background-color: #dbeaea"],
.article-visual-builder div[style*="background-color:#dbeaea"] {
border-radius: 4px !important;
padding: 30px !important;
margin: 30px 0 !important;
}
/* Art.24 : grande image superflue avant le bouton citation — contraindre */
.article-visual-builder .citation-image-container img,
.article-visual-builder img[alt*="stress"] {
max-width: 400px !important;
height: auto !important;
display: block !important;
margin: 1rem auto !important;
}
/* Art.27 : texte bloc "Objectivement..." — supprimer la bordure noire complète,
garder uniquement une bordure gauche (style citation classique) */
.article-visual-builder blockquote[style*="border:"],
.article-visual-builder blockquote[style*="border :"] {
border: none !important;
border-left: 4px solid #b0bec5 !important;
padding-left: 20px !important;
background-color: transparent !important;
}
/* ============================================================
CORRECTIONS SPÉCIFIQUES ARTICLES 31-40
============================================================ */
/* Art.31-40 : Listes li/ol avec text-transform uppercase forcé → retirer */
.article-visual-builder ul li,
.article-visual-builder ol li {
text-transform: none !important;
}
/* Art.31 : image de couverture de livre superflue à la fin → contraindre */
.article-visual-builder img[alt*="jalou"],
.article-visual-builder img[src*="jalou"],
.article-visual-builder img[alt*="Jalou"],
.article-visual-builder img[src*="Jalou"] {
max-width: 220px !important;
height: auto !important;
display: block !important;
margin: 1rem auto !important;
}
/* Art.33 : image "blessures du passé" intruse → contraindre à 350px */
.article-visual-builder img[alt*="blessure"],
.article-visual-builder img[src*="blessure"] {
max-width: 350px !important;
height: auto !important;
display: block !important;
margin: 1rem auto !important;
}
/* Art.34 : image grille illusion optique → contraindre */
.article-visual-builder img[alt*="illusion"],
.article-visual-builder img[src*="illusion"],
.article-visual-builder img[alt*="grille"],
.article-visual-builder img[src*="grille"] {
max-width: 300px !important;
height: auto !important;
display: block !important;
margin: 1rem auto !important;
}
/* Art.36 : tailles de l'ancien site (bouclier et pas barrés 216 px, cadre et plume 324 px — Aurélie 16.09) */
.article-visual-builder img[src*="Cadre-invisible"], .article-visual-builder img[src*="Plume"] { max-width: 324px !important; margin: 0 auto !important; }
.article-visual-builder img[src*="Bouclier"], .article-visual-builder img[src*="Frontiere"] { max-width: 216px !important; margin: 0 auto !important; }
.article-visual-builder img[alt*="bouclier"]:not([src*="Bouclier"]),
.article-visual-builder img[src*="bouclier"],
.article-visual-builder img[alt*="barre"]:not([src*="Frontiere"]),
.article-visual-builder img[alt*="limit"]:not([src*="Plume"]):not([src*="Cadre"]) {
max-width: 250px !important;
height: auto !important;
display: block !important;
margin: 2rem auto !important;
}
/* Art.37 : texte blanc dans liste "compatibilité" → forcer sombre */
.article-visual-builder ol[style*="color:#fff"] li,
.article-visual-builder ul[style*="color:#fff"] li,
.article-visual-builder ol[style*="color: #fff"] li,
.article-visual-builder ul[style*="color: white"] li {
color: #333333 !important;
}
/* Art.38 : image cheval + section 9 clefs → cibler si fond vert */
.article-visual-builder img[alt*="cheval"],
.article-visual-builder img[src*="cheval"] {
width: 100% !important;
max-width: 700px !important;
height: auto !important;
display: block !important;
margin: 1rem auto !important;
}
/* ============================================================
CORRECTIONS SPÉCIFIQUES ARTICLES 41-47
============================================================ */
/* (Retiré 08.08 : la règle « li em → font-style:normal » neutralisait à tort
les italiques légitimes des listes — triggers, crash… — que le WP affiche
bien en italique ; le WP italise aussi le li em de l'art 41.) */
/* Art.42 : section "SORTIR DU JEU TOXIQUE" avec fond vert d'eau (si manquant via inline) */
.article-visual-builder div[style*="dbece8"],
.article-visual-builder section[style*="dbece8"] {
padding: 60px 20px !important;
}
/* Art.44 : liste numérotée illisible en blanc dans encart vert → forcer sombre */
.article-visual-builder ol li[style*="color:white"],
.article-visual-builder ol li[style*="color: white"],
.article-visual-builder ul li[style*="color:white"],
.article-visual-builder ul li[style*="color: white"] {
color: #333333 !important;
}
/* Art.46 : bannière "SOLUTIONS" vert foncé superflue → masquer si présente */
.article-visual-builder div[style*="background-color:#004348"] > h2:only-child,
.article-visual-builder div[style*="background: #004348"] > h2:only-child {
/* Ces gros blocs sont gérés par CSS global, pas spécifique ici */
}
/* Art.46 : image Violentomètre — présente sur le WP, donc affichée (l'ancienne
règle qui la masquait a été retirée le 2026-08-03). */
/* Art.47 : section articles liés title style WP */
.article-visual-builder .related-articles-title,
.article-visual-builder h2[style*="background-color:#0b4b56"] {
display: inline-block;
padding: 15px 30px !important;
text-transform: uppercase;
font-weight: bold;
}
/* ============================================================
FIN DES CORRECTIONS - 47 ARTICLES TRAITÉS
============================================================ */
/* ============================================================
CORRECTIONS ROUND 2 — ARTICLES 1-10 (Nouvelles analyses)
============================================================ */
/* --- TEXTE BLANC INVISIBLE SUR FONDS CLAIRS (Art.01-10 critique) ---
Cible TOUT texte p/li/span/div qui aurait color:#fff ou color:white
dans les sections à fond vert d'eau / pastel */
/* Fond vert d'eau (~#c8e1dd / #d1e7dd / #d6ebe6 / #d5e8e5 / #dbece8) */
.article-visual-builder [style*="background-color:#c8e1dd"] p,
.article-visual-builder [style*="background-color:#c8e1dd"] li,
.article-visual-builder [style*="background-color:#c8e1dd"] span,
.article-visual-builder [style*="background-color:#d1e7dd"] p,
.article-visual-builder [style*="background-color:#d1e7dd"] li,
.article-visual-builder [style*="background-color:#d1e7dd"] span,
.article-visual-builder [style*="background-color:#d6ebe6"] p,
.article-visual-builder [style*="background-color:#d6ebe6"] li,
.article-visual-builder [style*="background-color:#d6ebe6"] span,
.article-visual-builder [style*="background-color:#d5e8e5"] p,
.article-visual-builder [style*="background-color:#d5e8e5"] li,
.article-visual-builder [style*="background-color:#d5e8e5"] span,
.article-visual-builder [style*="background-color: #c8e1dd"] p,
.article-visual-builder [style*="background-color: #c8e1dd"] li,
.article-visual-builder [style*="background-color: #c8e1dd"] span,
.article-visual-builder [style*="background-color: #d1e7dd"] p,
.article-visual-builder [style*="background-color: #d1e7dd"] li,
.article-visual-builder [style*="background-color: #d1e7dd"] span {
color: #333333 !important;
}
/* Fond bleu clair (Art.01 section exercices, Art.04 examples) */
.article-visual-builder [style*="background-color:#eaf1f4"] p,
.article-visual-builder [style*="background-color:#eaf1f4"] li,
.article-visual-builder [style*="background-color:#d8e5e2"] p,
.article-visual-builder [style*="background-color:#d8e5e2"] li,
.article-visual-builder [style*="background-color: #eaf1f4"] p,
.article-visual-builder [style*="background-color: #eaf1f4"] li {
color: #333333 !important;
}
/* Correction générique : tout span/p avec color:white ou #fff dans section non sombre */
.article-visual-builder section:not([style*="#004"]):not([style*="#003"]):not([style*="#2d5"]):not([style*="#1a4"]) p[style*="color:white"],
.article-visual-builder section:not([style*="#004"]):not([style*="#003"]):not([style*="#2d5"]):not([style*="#1a4"]) p[style*="color: white"],
.article-visual-builder section:not([style*="#004"]):not([style*="#003"]):not([style*="#2d5"]):not([style*="#1a4"]) li[style*="color:white"],
.article-visual-builder section:not([style*="#004"]):not([style*="#003"]):not([style*="#2d5"]):not([style*="#1a4"]) span[style*="color:white"],
.article-visual-builder div:not([style*="#004"]):not([style*="#003"]):not([style*="#2d5"]):not([style*="#1a4"]) p[style*="color:#fff"],
.article-visual-builder div:not([style*="#004"]):not([style*="#003"]):not([style*="#2d5"]):not([style*="#1a4"]) li[style*="color:#fff"] {
color: #333333 !important;
}
/* [Nettoyé 2026-07-31] line-height 1.75 forcé + h2/h3 « vert canard #2b4b40 »
supprimés — remplacés par la typo WP réelle du bloc principal. */
/* Art.06 : paragraphe disloqué (display:flex erroné sur span) — correction */
.article-visual-builder p[style*="display:flex"],
.article-visual-builder p[style*="display: flex"] {
display: block !important;
flex-direction: unset !important;
}
/* Art.01 : encadré citation sombre — gradient */
.article-visual-builder [style*="background:#1c2833"],
.article-visual-builder [style*="background: #1c2833"],
.article-visual-builder [style*="background-color:#1c2833"] {
background: linear-gradient(135deg, #1c2833 0%, #0b1014 100%) !important;
padding: 60px 40px !important;
text-align: center !important;
}
/* Art.04 : boîtes d'exemples CNV (❌/✅) — enlever bordure gauche dure */
.article-visual-builder [style*="border-left: 4px solid red"],
.article-visual-builder [style*="border-left:4px solid red"],
.article-visual-builder [style*="border-left: 4px solid green"],
.article-visual-builder [style*="border-left:4px solid green"] {
border-left: none !important;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
background-color: #ffffff !important;
}
/* Art.06 : section 9 outils — fond vert d'eau si absent */
.article-visual-builder [style*="background-color:#c8e1dd"],
.article-visual-builder [style*="background-color: #c8e1dd"] {
padding: 3rem 2rem !important;
}
/* ============================================================
FIN CORRECTIONS ROUND 2 - ART 1-10
============================================================ */
/* ============================================================
CORRECTIONS BATCH 11-20
============================================================ */
/* --- BANNIÈRES DE CITATION BLEUE (art.11-20, 21-47 récurrents) ---
Sur WP: fond bleu moyen, texte blanc italique serif. Sur Laravel: fond gris, noir majuscules.
Cibler les sections avec fond bleu/gris acier contenant du texte */
/* Fond bleu acier / bleu-gris (code couleurs identifiées) */
.article-visual-builder [style*="background-color:#8fa8cc"] p,
.article-visual-builder [style*="background-color:#8fa8cc"] span,
.article-visual-builder [style*="background-color: #8fa8cc"] p,
.article-visual-builder [style*="background-color:#7b9fc6"] p,
.article-visual-builder [style*="background-color:#7b9fc6"] span,
.article-visual-builder [style*="background-color:#8cb4d6"] p,
.article-visual-builder [style*="background-color:#83a2c0"] p,
.article-visual-builder [style*="background-color:#5b7185"] p,
.article-visual-builder [style*="background-color:#5c7e8e"] p,
.article-visual-builder [style*="background-color:#78a5b6"] p,
.article-visual-builder [style*="background-color:#82a5c9"] p,
.article-visual-builder [style*="background-color:#8bb7d6"] p,
.article-visual-builder [style*="background-color:#8faecf"] p,
.article-visual-builder [style*="background-color:#8da8ce"] p,
.article-visual-builder [style*="background-color:#365b6d"] p,
.article-visual-builder [style*="background-color:#1a4a5a"] p {
color: #ffffff !important;
font-style: italic !important;
font-weight: 400 !important;
text-transform: none !important;
font-family: Georgia, 'Times New Roman', serif !important;
}
/* Force sections avec fond bleu/gris — text-transform none (annule ALL CAPS de GrapesJS) */
.article-visual-builder [style*="background-color:#8fa8cc"] blockquote,
.article-visual-builder [style*="background-color:#7b9fc6"] blockquote,
.article-visual-builder [style*="background-color:#8cb4d6"] blockquote,
.article-visual-builder [style*="background-color:#83a2c0"] blockquote,
.article-visual-builder [style*="background-color:#8faecf"] blockquote,
.article-visual-builder [style*="background-color:#8da8ce"] blockquote {
color: #ffffff !important;
font-style: italic !important;
font-weight: 400 !important;
text-transform: none !important;
background: transparent !important;
border: none !important;
}
/* --- MÉTADONNÉES HERO (auteur/date/catégorie) — texte blanc illisible ---
Force sombre sur tout ce qui ressemble à du texte de méta dans le hero */
.article-visual-builder [class*="hero"] p[style*="color:white"],
.article-visual-builder [class*="hero"] p[style*="color: white"],
.article-visual-builder [class*="hero"] p[style*="color:#fff"],
.article-visual-builder [class*="hero"] span[style*="color:white"],
.article-visual-builder [class*="hero"] span[style*="color: white"],
.article-visual-builder [class*="hero"] span[style*="color:#fff"] {
color: #333333 !important;
}
/* Art.11 spécifique — Liste numérotée en corail (Yamas, Niyamas...) */
.article-visual-builder ol[style*="color:#cf7c64"] li,
.article-visual-builder ol li[style*="color:#cf7c64"] {
color: #cf7c64 !important;
font-weight: bold !important;
}
/* Art.13 — Section citation fond bleu ciel (Ode à chaque yogi) */
.article-visual-builder [style*="background-color:#8cb4d6"] {
padding: 50px 20px !important;
text-align: center !important;
}
/* Art.15 — Encadré "Attention" — fond vert légèrement plus foncé */
.article-visual-builder [style*="background-color:#b8d4c8"] p,
.article-visual-builder [style*="background-color:#b8d4c8"] li,
.article-visual-builder [style*="background-color: #b8d4c8"] p {
color: #333333 !important;
}
/* Art.15 — Liste de valeurs en texte blanc sur fond vert d'eau → correction */
.article-visual-builder [style*="background-color:#cce3d8"] span,
.article-visual-builder [style*="background-color:#cce3d8"] li,
.article-visual-builder [style*="background-color:#cce3d8"] p,
.article-visual-builder [style*="background-color: #cce3d8"] span {
color: #333333 !important;
}
/* Art.16 — Section fond bleu clair (incarner idéal de vie) */
.article-visual-builder [style*="background-color:#c9dfdf"] p,
.article-visual-builder [style*="background-color:#c9dfdf"] span,
.article-visual-builder [style*="background-color:#c9dfdf"] strong,
.article-visual-builder [style*="background-color: #c9dfdf"] p {
color: #333333 !important;
}
/* Art.17 — Section "LE BILAN DE MA VIE" fond gris-bleu clair */
.article-visual-builder [style*="background-color:#d8e4e5"] p,
.article-visual-builder [style*="background-color:#d8e4e5"] li,
.article-visual-builder [style*="background-color:#d8e4e5"] h2,
.article-visual-builder [style*="background-color: #d8e4e5"] p {
color: #333333 !important;
}
/* Art.18 — Bannière bleue citation (fond #e6eff4) */
.article-visual-builder [style*="background-color:#e6eff4"] p {
text-transform: none !important;
font-style: italic !important;
font-weight: 400 !important;
color: #5a7082 !important;
}
/* Art.18 — Bannière vert d'eau fin article: text-align left, pas justify */
.article-visual-builder [style*="background-color:#eaf1ed"] p {
text-align: left !important;
}
/* Art.19 — Section 8 astuces fond vert d'eau #e4f2ed — padding ajouté */
.article-visual-builder [style*="background-color:#e4f2ed"] {
padding: 40px 5% !important;
}
.article-visual-builder [style*="background-color:#e4f2ed"] p,
.article-visual-builder [style*="background-color:#e4f2ed"] li {
color: #333333 !important;
}
/* Art.20 — Fond vert d'eau contenu principal #d2e5d9 */
.article-visual-builder [style*="background-color:#d2e5d9"] p,
.article-visual-builder [style*="background-color:#d2e5d9"] li,
.article-visual-builder [style*="background-color:#d2e5d9"] span {
color: #333333 !important;
}
/* --- TEXTE EN COULEUR TEAL/VERT CANARD ERRONÉE SUR LISTES (art.23, 36) ---
Les li avec color teal héritent du thème Laravel par défaut */
.article-visual-builder ul li[style*="color:#004348"],
.article-visual-builder ul li[style*="color:#2b4b40"],
.article-visual-builder ul li[style*="color:#1f727a"],
.article-visual-builder ol li[style*="color:#004348"],
.article-visual-builder ol li[style*="color:#1f727a"] {
color: #333333 !important;
}
/* ============================================================
FIN CORRECTIONS BATCH 11-20
============================================================ */
/* ============================================================
CORRECTIONS BATCH 21-30
============================================================ */
/* Art.22 — Section "MÉCANISMES DE COPING SAINS" fond vert/menthe */
.article-visual-builder [style*="background-color:#d1e4dd"] p,
.article-visual-builder [style*="background-color:#d1e4dd"] li,
.article-visual-builder [style*="background-color: #d1e4dd"] p {
color: #333333 !important;
}
/* Art.24 — Section verte "COMMENT GÉRER EFFICACEMENT..." */
.article-visual-builder [style*="background-color:#dcece8"] p,
.article-visual-builder [style*="background-color:#dcece8"] li,
.article-visual-builder [style*="background-color: #dcece8"] p {
color: #333333 !important;
}
.article-visual-builder [style*="background-color:#dcece8"] ul,
.article-visual-builder [style*="background-color:#dcece8"] ul li {
color: #333333 !important;
}
/* Art.25 — Section "LA MÉTHODE IRTER" fond vert d'eau */
.article-visual-builder [style*="background-color:#c0d8d0"] p,
.article-visual-builder [style*="background-color:#c0d8d0"] li,
.article-visual-builder [style*="background-color:#c0d8d0"] span,
.article-visual-builder [style*="background-color: #c0d8d0"] p {
color: #333333 !important;
}
/* Art.27 — Section "LES 8 REMÈDES" fond vert d'eau doux #d1e8e2 */
.article-visual-builder [style*="background-color:#d1e8e2"] p,
.article-visual-builder [style*="background-color:#d1e8e2"] li,
.article-visual-builder [style*="background-color: #d1e8e2"] p {
color: #333333 !important;
line-height: 1.8 !important;
}
/* Art.27 — Citation bleue #8fa8cc déjà couverte en batch 11-20 */
/* Art.28 — Bloc "DES SOLUTIONS" fond bleu/vert clair #d1e5e2 */
.article-visual-builder [style*="background-color:#d1e5e2"] p,
.article-visual-builder [style*="background-color:#d1e5e2"] li,
.article-visual-builder [style*="background-color: #d1e5e2"] p {
color: #333333 !important;
}
/* Art.29 — Titres articles liés (corail) */
.article-visual-builder .related-article-title,
.article-visual-builder [class*="related"] h3,
.article-visual-builder [class*="related"] h4 {
color: #d18a75 !important;
}
/* Art.30 — Contenu "10 astuces" — texte blanc sur fond clair */
.article-visual-builder [style*="background-color:#8faecf"] {
padding: 40px 20px !important;
text-align: center !important;
}
/* Art.21 — Blocs citations bleu #83a2c0 — déjà couverts en batch 11-20 */
/* Art.23 — Listes en bleu canard hérité — correction */
.article-visual-builder [style*="background-color:#dcece8"] ol li,
.article-visual-builder [style*="background-color:#d8e9e3"] p,
.article-visual-builder [style*="background-color:#d8e9e3"] li {
color: #333333 !important;
}
/* --- CORRECTION GLOBALE : MAJUSCULES forcées sur citations --- */
/* Toute section avec fond bleu/gris qui force text-transform:uppercase */
.article-visual-builder [style*="background-color:#7b9fc6"] *,
.article-visual-builder [style*="background-color:#8fa8cc"] *,
.article-visual-builder [style*="background-color:#83a2c0"] *,
.article-visual-builder [style*="background-color:#8cb4d6"] *,
.article-visual-builder [style*="background-color:#8bb7d6"] *,
.article-visual-builder [style*="background-color:#82a5c9"] *,
.article-visual-builder [style*="background-color:#78a5b6"] *,
.article-visual-builder [style*="background-color:#5b7185"] *,
.article-visual-builder [style*="background-color:#5c7e8e"] * {
text-transform: none !important;
font-weight: 400 !important;
}
/* ============================================================
FIN CORRECTIONS BATCH 21-30
============================================================ */
/* ============================================================
CORRECTIONS BATCH 31-40
============================================================ */
/* Art.31 — 5 bannières citation bleues + textes secondaires illisibles */
/* Textes sous "4 COMPORTEMENTS À FUIR" et sous point 4 */
.article-visual-builder [style*="background-color:#eaf2e8"] p,
.article-visual-builder [style*="background-color:#eaf2e8"] li,
.article-visual-builder [style*="background-color: #eaf2e8"] p {
color: #333333 !important;
}
/* Fond gris léger pour certains paragraphes art.31 */
.article-visual-builder [style*="background-color:#f5f5f5"] p,
.article-visual-builder [style*="background-color:#f5f5f5"] li {
color: #333333 !important;
}
/* Art.32 — Bloc vert "3 QUESTIONS POUR BIEN CHOISIR NOS DISPUTES" */
.article-visual-builder [style*="background-color:#dcece6"] p,
.article-visual-builder [style*="background-color:#dcece6"] li,
.article-visual-builder [style*="background-color:#dcece6"] span,
.article-visual-builder [style*="background-color: #dcece6"] p {
color: #333333 !important;
font-size: 16px !important;
line-height: 1.6 !important;
}
/* Art.33 — Section fond vert pastel "Tsunami Émotionnel" */
.article-visual-builder [style*="background-color:#e4f0e2"] p,
.article-visual-builder [style*="background-color:#e4f0e2"] li,
.article-visual-builder [style*="background-color: #e4f0e2"] p {
color: #333333 !important;
}
/* Art.34 — Section fond vert d'eau/teal "Conclusion" */
.article-visual-builder [style*="background-color:#e6f0eb"] p,
.article-visual-builder [style*="background-color:#e6f0eb"] span,
.article-visual-builder [style*="background-color: #e6f0eb"] p,
.article-visual-builder [style*="background-color:#e6f0eb"] strong {
color: #333333 !important;
font-weight: 400 !important;
}
.article-visual-builder [style*="background-color:#e6f0eb"] strong {
font-weight: 700 !important;
}
/* Art.35 — Section "COMMENT RENONCER AU DÉSIR DE VENGEANCE ?" fond bleu/teal clair */
.article-visual-builder [style*="background-color:#E6F0F0"] p,
.article-visual-builder [style*="background-color:#E6F0F0"] li,
.article-visual-builder [style*="background-color:#e6f0f0"] p,
.article-visual-builder [style*="background-color:#e6f0f0"] li,
.article-visual-builder [style*="background-color: #e6f0f0"] p {
color: #333333 !important;
line-height: 1.6 !important;
}
/* Art.36 — Listes avec couleur teal héritée */
.article-visual-builder ul li[style*="color:#4a4a4a"] {
color: #4a4a4a !important; /* Déjà bon */
}
/* Art.36 — Liste disloquée (flex erroné sur li) */
.article-visual-builder ul li[style*="display:flex"],
.article-visual-builder ul li[style*="display: flex"] {
display: list-item !important;
text-align: left !important;
}
/* Art.37 — Liste compatibilité fond vert */
.article-visual-builder [style*="background-color:#dbe7e4"] p,
.article-visual-builder [style*="background-color:#dbe7e4"] li,
.article-visual-builder [style*="background-color:#dbe7e4"] ol li,
.article-visual-builder [style*="background-color: #dbe7e4"] p {
color: #333333 !important;
}
/* Art.38 — Section "9 CLEFS" texte invisible */
.article-visual-builder [style*="background-color:#f0f4f2"] p,
.article-visual-builder [style*="background-color:#f0f4f2"] li,
.article-visual-builder [style*="background-color: #f0f4f2"] p {
color: #333333 !important;
}
/* Art.39 — Corps texte justifié (WP utilisait justify) */
.article-visual-builder p {
/* line-height déjà forcé en 1.75 global */
}
/* Art.40 — Bloc "Guide offert" fond crème */
.article-visual-builder [style*="background-color:#fcf6eb"] p,
.article-visual-builder [style*="background-color:#fcf6eb"] h3,
.article-visual-builder [style*="background-color: #fcf6eb"] p {
color: #11645e !important; /* Vert canard */
}
/* --- CORRECTION GLOBALE supplémentaire : text-transform:uppercase annulé ---
Sur toutes les sections bleues — déjà fait mais renforcement via !important direct */
.article-visual-builder blockquote p,
.article-visual-builder blockquote span {
text-transform: none !important;
font-style: italic;
}
/* ============================================================
FIN CORRECTIONS BATCH 31-40
============================================================ */
/* ============================================================
CORRECTIONS BATCH 41-47
============================================================ */
/* Art.41 — Sections fond vert d'eau clair (conseil/astuces) */
.article-visual-builder [style*="background-color:#e2ede8"] p,
.article-visual-builder [style*="background-color:#e2ede8"] li,
.article-visual-builder [style*="background-color: #e2ede8"] p {
color: #333333 !important;
}
/* Art.42 — Section fond vert pâle/beige "MA POSTURE IDÉALE" */
.article-visual-builder [style*="background-color:#f2f7f1"] p,
.article-visual-builder [style*="background-color:#f2f7f1"] li,
.article-visual-builder [style*="background-color: #f2f7f1"] p {
color: #333333 !important;
}
/* Art.42 — fond vert moyen "COMMENT Y REMÉDIER" */
.article-visual-builder [style*="background-color:#d8e9e3"] p,
.article-visual-builder [style*="background-color:#d8e9e3"] li {
color: #333333 !important;
}
/* Art.43 — Section fond vert canard/teal "EMPATHIE SAINE" */
.article-visual-builder [style*="background-color:#116854"] p,
.article-visual-builder [style*="background-color:#116854"] li,
.article-visual-builder [style*="background-color:#116854"] span,
.article-visual-builder [style*="background-color: #116854"] p {
color: #ffffff !important;
}
/* Art.44 — Liste de tâches disloquée (flex li) — CSS fix */
.article-visual-builder ul li[style*="justify-content:space-between"],
.article-visual-builder ul li[style*="justify-content: space-between"] {
display: list-item !important;
justify-content: flex-start !important;
}
/* Art.45 — Section bleu gris CNPV */
.article-visual-builder [style*="background-color:#d1dde3"] p,
.article-visual-builder [style*="background-color:#d1dde3"] li,
.article-visual-builder [style*="background-color: #d1dde3"] p {
color: #333333 !important;
}
/* Art.46 — Fond teal foncé #1f727a sur citations (couleur correcte depuis WP) */
.article-visual-builder [style*="background-color:#1f727a"] p,
.article-visual-builder [style*="background-color:#1f727a"] span,
.article-visual-builder [style*="background-color: #1f727a"] p,
.article-visual-builder [style*="background-color:#1f727a"] blockquote {
color: #ffffff !important;
font-style: italic !important;
font-weight: 400 !important;
text-transform: none !important;
}
/* Art.46 — fond bleu foncé #1a4a5a sur grande citation finale */
.article-visual-builder [style*="background-color:#1a4a5a"] p,
.article-visual-builder [style*="background-color:#1a4a5a"] span,
.article-visual-builder [style*="background-color: #1a4a5a"] p {
color: #ffffff !important;
font-style: italic !important;
font-weight: 400 !important;
text-transform: none !important;
}
/* Art.46 — H2 en teal (1f727a sur WP) → garder teal mais forced */
.article-visual-builder [style*="background-color:#1f727a"] h2,
.article-visual-builder [style*="background-color:#1f727a"] h3 {
color: #ffffff !important;
}
/* Art.47 — Blocs vert foncé (fond #2c5a52 ou similaire) = WP style */
.article-visual-builder [style*="background-color:#2c5a52"] p,
.article-visual-builder [style*="background-color:#2c5a52"] span,
.article-visual-builder [style*="background-color: #2c5a52"] p {
color: #ffffff !important;
font-style: italic !important;
text-transform: none !important;
}
/* Art.47 — Section fond crème/beige introduction */
.article-visual-builder [style*="background-color:#faf7f3"] p,
.article-visual-builder [style*="background-color:#faf7f3"] li,
.article-visual-builder [style*="background-color: #faf7f3"] p {
color: #333333 !important;
}
/* ============================================================
RÈGLES FINALES GLOBALES — s'appliquent à TOUS les articles
============================================================ */
/* [Nettoyé 2026-07-31] Police « Open Sans forcée » + Georgia sur citations supprimées :
la police du corps est CenturyGoth (comme WP), définie dans le bloc principal. */
.article-visual-builder span {
font-family: inherit;
}
/* Nettoyage listes flex (global) */
.article-visual-builder ul li,
.article-visual-builder ol li {
display: list-item;
}
.article-visual-builder ul li[style*="display:flex"],
.article-visual-builder ul li[style*="display: flex"],
.article-visual-builder ol li[style*="display:flex"],
.article-visual-builder ol li[style*="display: flex"] {
display: list-item !important;
}
/* Retrait global text-transform:uppercase sur sections H colorées */
.article-visual-builder [style*="background-color"] h2,
.article-visual-builder [style*="background-color"] h3,
.article-visual-builder [style*="background-color"] h4 {
text-transform: none !important;
letter-spacing: normal !important;
}
/* ============================================================
FIN CORRECTIONS BATCH 41-47 + RÈGLES GLOBALES FINALES
============================================================ */
/* ============================================================
CORRECTIONS COMPLÉMENTAIRES — ARTICLES 1-10
Couleurs non couvertes par les batches 11-47
============================================================ */
/* Art.01 — Fond bleu très clair #eaf1f4 (section intro "Qu'est-ce que le yoga...") */
/* Déjà couvert par #eaf1f4 → vérif OK, ajout des variantes espace */
.article-visual-builder [style*="background-color:#eaf1f4"] p,
.article-visual-builder [style*="background-color:#eaf1f4"] li,
.article-visual-builder [style*="background-color:#eaf1f4"] span,
.article-visual-builder [style*="background-color: #eaf1f4"] p {
color: #333333 !important;
}
/* Art.01 — Fond crème #fdfbf9 (intro ou conclusion) */
.article-visual-builder [style*="background-color:#fdfbf9"] p,
.article-visual-builder [style*="background-color:#fdfbf9"] li,
.article-visual-builder [style*="background-color: #fdfbf9"] p {
color: #333333 !important;
}
/* Art.02 — Fond crème #fcfaf5 */
.article-visual-builder [style*="background-color:#fcfaf5"] p,
.article-visual-builder [style*="background-color:#fcfaf5"] li,
.article-visual-builder [style*="background-color: #fcfaf5"] p {
color: #333333 !important;
}
/* Art.03 — Fond crème #fdfaf6 */
.article-visual-builder [style*="background-color:#fdfaf6"] p,
.article-visual-builder [style*="background-color:#fdfaf6"] li,
.article-visual-builder [style*="background-color: #fdfaf6"] p {
color: #333333 !important;
}
/* Art.04 — CITATION BLEUE #8da8b8 → fond bleu acier moyen, texte blanc italic serif */
.article-visual-builder [style*="background-color:#8da8b8"] p,
.article-visual-builder [style*="background-color:#8da8b8"] span,
.article-visual-builder [style*="background-color: #8da8b8"] p {
color: #ffffff !important;
font-style: italic !important;
font-weight: 400 !important;
text-transform: none !important;
font-family: Georgia, 'Times New Roman', serif !important;
}
/* Art.06 — CITATION BLEUE #7b91af → fond bleu acier, texte blanc italic serif */
.article-visual-builder [style*="background-color:#7b91af"] p,
.article-visual-builder [style*="background-color:#7b91af"] span,
.article-visual-builder [style*="background-color: #7b91af"] p {
color: #ffffff !important;
font-style: italic !important;
font-weight: 400 !important;
text-transform: none !important;
font-family: Georgia, 'Times New Roman', serif !important;
}
/* Art.06 — Fond vert d'eau clair #c8e1dd déjà couvert (9 occurrences) ✓ */
/* Art.06 — Crème #fdfaf6 déjà ajouté ✓ */
/* Art.04 — Fond vert canard foncé #1a4a44 (intro ou section titre) */
.article-visual-builder [style*="background-color:#1a4a44"] p,
.article-visual-builder [style*="background-color:#1a4a44"] span,
.article-visual-builder [style*="background-color: #1a4a44"] p {
color: #ffffff !important;
font-style: normal !important;
}
.article-visual-builder [style*="background-color:#1a4a44"] h2,
.article-visual-builder [style*="background-color:#1a4a44"] h3 {
color: #ffffff !important;
}
/* Art.05 — Fonds vert très foncé #003333 et #004d4d (sections sombres) */
.article-visual-builder [style*="background-color:#003333"] p,
.article-visual-builder [style*="background-color:#003333"] span,
.article-visual-builder [style*="background-color:#003333"] li,
.article-visual-builder [style*="background-color: #003333"] p {
color: #ffffff !important;
}
.article-visual-builder [style*="background-color:#004d4d"] p,
.article-visual-builder [style*="background-color:#004d4d"] span,
.article-visual-builder [style*="background-color:#004d4d"] li,
.article-visual-builder [style*="background-color: #004d4d"] p {
color: #ffffff !important;
}
/* Art.09 — Fond vert canard foncé #1a4a38 (section coaching/CTA) */
.article-visual-builder [style*="background-color:#1a4a38"] p,
.article-visual-builder [style*="background-color:#1a4a38"] span,
.article-visual-builder [style*="background-color:#1a4a38"] h2,
.article-visual-builder [style*="background-color:#1a4a38"] h3,
.article-visual-builder [style*="background-color: #1a4a38"] p {
color: #ffffff !important;
}
/* Art.09 — Fond crème/jaune très clair #fdfcf4 (articles liés) */
.article-visual-builder [style*="background-color:#fdfcf4"] p,
.article-visual-builder [style*="background-color:#fdfcf4"] li,
.article-visual-builder [style*="background-color: #fdfcf4"] p {
color: #333333 !important;
}
/* Art.10 — Fond vert très foncé #013328 (section coaching label) */
.article-visual-builder [style*="background-color:#013328"] p,
.article-visual-builder [style*="background-color:#013328"] span,
.article-visual-builder [style*="background-color:#013328"] h2,
.article-visual-builder [style*="background-color:#013328"] h3,
.article-visual-builder [style*="background-color: #013328"] p {
color: #ffffff !important;
}
/* ============================================================
FIN CORRECTIONS COMPLÉMENTAIRES ARTICLES 1-10
============================================================ */
/* ===== PAGE COACHING — styles rapatriés depuis coaching.blade.php =====
Nécessaire depuis que la page est rendue via l'éditeur visuel (GrapesJS) :
les