injectée par JS ---------- */
.hero__mobile-photo { display: none; }
@media (max-width: 768px) {
/* Annule l'::after qui ne marchait pas */
.hero.hero--mosaic::after { display: none !important; }
/* Photo isolée comme vraie div */
.hero__mobile-photo {
display: block !important;
width: calc(100% - 24px);
max-width: 480px;
aspect-ratio: 16 / 11;
border-radius: 24px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 18px 36px -16px rgba(46,41,34, 0.28);
margin: 0 auto;
order: 1;
flex: 0 0 auto;
position: relative;
z-index: 2;
}
/* Carte hero en dessous */
.hero.hero--mosaic .hero__mosaic-card {
order: 2;
flex: 0 0 auto;
}
}
/* ---------- §B · PAGE ORGANIC SHAPES — layer global seamless ---------- */
.page-organic-shapes {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 0 !important;
overflow: hidden !important;
}
main {
position: relative !important;
}
.page-organic-shape {
display: block !important;
}
/* ---------- §C · Sections SANS overflow:hidden (transitions seamless) ---------- */
main > section,
main > section.section,
main > section.section--bg,
main > section.section--alt {
overflow: visible !important;
}
/* Plus aucune ::before/::after décorative au niveau section (les blobs sont au niveau main) */
main > section.section:nth-of-type(odd)::before,
main > section.section:nth-of-type(odd)::after,
main > section.section:nth-of-type(even)::before,
main > section.section:nth-of-type(even)::after {
display: none !important;
content: none !important;
}
/* Aucun bg color par section qui créerait une démarcation */
main > section:not(.hero):not(.fixed-quote):not(.cta-final) {
background-color: transparent !important;
background-image: none !important;
}
/* Body cream uniforme garanti */
body, body.theme-femine {
background-color: var(--color-bg) !important;
}
/* Contenu des sections au-dessus des shapes globales */
main > section > .container,
main > section > * {
position: relative !important;
z-index: 2 !important;
}
/* ---------- §D · DIPLOMAS SWIPER — dernier slide pas à moitié vide ---------- */
@media (max-width: 768px) {
.diplomas-strip.swiper {
overflow: hidden !important;
padding: 0 0 40px !important;
}
.diplomas-strip__wrapper {
display: flex !important;
gap: 0 !important;
/* Pas de width forcée — Swiper calcule */
}
.diplomas-strip__item.swiper-slide {
width: auto !important; /* laisse Swiper calculer */
max-width: none !important;
flex: none !important;
height: auto;
box-sizing: border-box;
}
}
/* =====================================================================
PASS 35 — Eyebrow NO highlight FORCE · Reviews 2nd card visible ·
Carousels mobile swipe activé · Hero photos diversifiées
===================================================================== */
/* ---------- §A · HERO EYEBROW — overrides massifs (cette fois ça marche) ---------- */
.hero__eyebrow,
.hero.hero--mosaic .hero__eyebrow,
.hero.hero--mosaic .hero__mosaic-card .hero__eyebrow,
.hero__mosaic-card .hero__eyebrow {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
padding: 0 !important;
margin: 0 0 14px !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
}
.hero__eyebrow::before,
.hero__eyebrow::after,
.hero.hero--mosaic .hero__mosaic-card .hero__eyebrow::before,
.hero.hero--mosaic .hero__mosaic-card .hero__eyebrow::after {
display: none !important;
content: none !important;
background: none !important;
}
/* ---------- §B · REVIEWS SWIPER — 2 cards entièrement visibles ---------- */
section:has(.reviews-swiper) > .container {
padding-inline: clamp(20px, 3vw, 60px) !important;
}
.reviews-grid.swiper.reviews-swiper {
overflow: hidden !important;
padding: 14px 0 60px !important;
margin: 32px 0 0 !important;
position: relative;
}
.reviews-swiper .swiper-wrapper {
display: flex !important;
align-items: stretch !important;
}
.reviews-swiper .swiper-slide {
flex-shrink: 0 !important;
height: auto !important;
padding: 0 !important;
box-sizing: border-box;
display: flex !important;
}
.review-card {
/* width: 100% retiré — voir bloc équivalent plus haut. La slide étant aussi
la .review-card, on laisse l'inline width de Swiper s'appliquer. */
padding: 28px 30px !important;
border-radius: 16px !important;
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.08) !important;
box-shadow: 0 6px 20px -10px rgba(46,41,34, 0.12) !important;
display: flex !important;
flex-direction: column !important;
font-size: 0.92rem !important;
}
.review-card__text {
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Flèches : POSITIONNÉES en dehors des cards, pas par-dessus */
.reviews-swiper__prev,
.reviews-swiper__next {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.20) !important;
z-index: 20 !important;
display: grid !important;
place-items: center;
cursor: pointer;
}
.reviews-swiper__prev { left: -22px !important; right: auto !important; }
.reviews-swiper__next { right: -22px !important; left: auto !important; }
@media (max-width: 1024px) {
.reviews-swiper__prev { left: -10px !important; }
.reviews-swiper__next { right: -10px !important; }
}
@media (max-width: 768px) {
.reviews-swiper__prev,
.reviews-swiper__next { display: none !important; }
}
/* ---------- §C · CAROUSELS MOBILE — SWIPE manuel obligatoire ---------- */
/* touch-action: pan-y autorise scroll vertical de la page ET swipe horizontal du carousel */
@media (max-width: 768px) {
.swiper,
.reviews-swiper,
.diplomas-swiper,
.why-swiper,
.why-grid.swiper,
.reviews-grid.swiper {
touch-action: pan-y !important;
-ms-touch-action: pan-y !important;
user-select: none;
-webkit-user-select: none;
}
/* Swiper-wrapper : pas de touch-action restrictive */
.swiper-wrapper {
touch-action: pan-y !important;
}
/* Slides cliquables et swipables */
.swiper-slide {
touch-action: pan-y !important;
user-select: none;
-webkit-user-select: none;
cursor: grab;
}
/* Aucun élément qui bloque les events touch */
.page-organic-shapes,
.page-organic-shape {
pointer-events: none !important;
touch-action: none !important;
}
}
/* =====================================================================
PASS 36 — Hero center FORCE + Process bg restauré + Fixed-quote sans card
===================================================================== */
/* ---------- §A · HERO carte CENTRÉE — display:grid place-items:center ---------- */
.hero.hero--mosaic {
display: grid !important;
place-items: center !important;
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
width: 100% !important;
padding: 0 !important;
}
.hero.hero--mosaic > .hero__mosaic-card {
margin: 0 auto !important;
justify-self: center !important;
align-self: center !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
width: min(92%, 720px) !important;
max-width: 720px !important;
grid-column: 1 !important;
grid-row: 1 !important;
}
/* ---------- §B · PROCESS BG photo restaurée — annule PASS 34 forcé position:relative ---------- */
.process .process__bg {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
}
.process .process__inner {
position: relative !important;
z-index: 1 !important;
}
/* ---------- §C · FIXED-QUOTE Mon approche : sans carte, texte gauche, blanc sur photo ---------- */
section.fixed-quote {
background-attachment: scroll !important; /* ex-fixed : fluidité scroll (plus de repaint plein cadre) */
background-size: cover !important;
background-position: var(--quote-pos, center) !important;
background-repeat: no-repeat !important;
}
@media (max-width: 768px) {
section.fixed-quote {
background-attachment: scroll !important;
background-position: var(--quote-pos-mobile, var(--quote-pos, center)) !important;
}
}
section.fixed-quote::after {
display: block !important;
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background: linear-gradient(120deg, rgba(22,30,34, 0.50) 0%, rgba(22,30,34, 0.30) 100%) !important;
pointer-events: none !important;
}
section.fixed-quote > .container { position: relative; z-index: 2; }
section.fixed-quote blockquote {
/* PAS DE CARTE — texte directement sur photo avec scrim */
background: transparent !important;
background-color: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
color: #fff !important;
text-shadow: 0 2px 16px rgba(11,53,59, 0.45) !important;
max-width: 760px !important;
margin: 0 !important; /* aligné à gauche, pas centré */
text-align: left !important;
}
section.fixed-quote blockquote .k {
color: rgba(255,255,255, 0.92) !important;
font-size: 0.78rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
margin-bottom: 18px !important;
display: block !important;
background: transparent !important;
padding: 0 !important;
}
section.fixed-quote blockquote p {
color: #fff !important;
font-family: var(--font-heading) !important;
font-style: italic !important;
font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
line-height: 1.28 !important;
max-width: 24ch !important;
text-shadow: 0 2px 16px rgba(11,53,59, 0.45) !important;
}
section.fixed-quote cite {
color: rgba(251,250,247, 0.78) !important;
display: block !important;
margin-top: 22px !important;
font-style: normal !important;
font-size: 0.92rem !important;
text-shadow: 0 1px 8px rgba(11,53,59, 0.30) !important;
}
/* =====================================================================
PASS 37 — Fix bug critique : photos hero VRAIMENT différentes par page
+ Carte hero centrée vraiment au milieu (pas trop haute)
===================================================================== */
/* ---------- §A · Reset complet du background du hero — laisse l'inline gérer ---------- */
.hero.hero--mosaic,
.hero.hero--home.hero--mosaic,
.hero.hero--secondary.hero--mosaic {
background-color: transparent;
/* background-image vient de l'inline style HTML qui définit --hero-photo */
}
.hero.hero--mosaic::after,
.hero.hero--mosaic::before {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
}
/* ---------- §B · Carte centrée vraiment au MILIEU du hero ---------- */
.hero.hero--mosaic {
display: grid !important;
place-items: center !important;
align-items: center !important;
justify-items: center !important;
align-content: center !important;
justify-content: center !important;
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
min-height: 92vh !important;
padding: 90px 24px 60px !important; /* 90px top + 60px bottom pour pas que la carte colle au haut */
width: 100% !important;
box-sizing: border-box;
}
.hero.hero--mosaic > .hero__mosaic-card {
margin: 0 !important;
justify-self: center !important;
align-self: center !important;
position: relative !important;
inset: auto !important;
transform: none !important;
width: min(92%, 720px) !important;
max-width: 720px !important;
grid-column: 1 / -1 !important;
grid-row: 1 / -1 !important;
}
/* Mobile : la photo isolée + carte stack vertical (PASS 32/34) reste prioritaire */
@media (max-width: 768px) {
.hero.hero--mosaic {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: auto !important;
padding: 96px 16px 40px !important;
gap: 24px !important;
}
}
/* =====================================================================
PASS 38 — Fixed-quote LEFT-aligned (santé mentale) + carousels touch
===================================================================== */
/* ---------- §A · FIXED-QUOTE blockquote ALIGNÉE À GAUCHE ---------- */
section.fixed-quote .container {
text-align: left !important;
}
section.fixed-quote blockquote {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
section.fixed-quote blockquote * {
text-align: left !important;
}
/* ---------- §B · CAROUSELS mobile touch — sécurité totale ---------- */
@media (max-width: 768px) {
/* Les organic shapes ne doivent jamais bloquer les events touch */
.page-organic-shapes,
.page-organic-shapes *,
.page-organic-shape {
pointer-events: none !important;
touch-action: none !important;
user-select: none !important;
}
/* Swipers : touch fonctionnel garanti */
.swiper,
.swiper-wrapper,
.swiper-slide,
.reviews-swiper,
.diplomas-swiper,
.why-swiper,
.why-grid.swiper,
.reviews-grid.swiper {
touch-action: pan-y !important;
pointer-events: auto !important;
}
/* Carte review et card why doivent recevoir les touch events */
.review-card,
.why-card {
pointer-events: auto !important;
touch-action: pan-y !important;
}
}
/* ---------- §C · BACKUP : empêcher var(--hero-bg) de marcher ---------- */
/* Si jamais un autre PASS revisite --hero-bg, on le neutralise */
.hero[style*="--hero-photo"] {
/* L'inline style HTML est prioritaire — pas de CSS qui force background-image */
}
/* =====================================================================
PASS 39 — Fixes audit : fixed-quote container full-width pour alignement
gauche réel (et pas seulement gauche-du-container-centré)
===================================================================== */
section.fixed-quote > .container {
max-width: none !important;
margin-inline: 0 !important;
padding-left: clamp(20px, 5vw, 80px) !important;
padding-right: clamp(20px, 5vw, 80px) !important;
width: 100% !important;
}
/* =====================================================================
PASS 40 — Fixed-quote desktop LEFT vraiment / mobile CENTER
+ Mobile nav glassmorphism (matche la navbar)
+ Diplomas dernier slide bug
===================================================================== */
/* ---------- §A · FIXED-QUOTE alignement DESKTOP=LEFT / MOBILE=CENTER ---------- */
@media (min-width: 769px) {
section.fixed-quote > .container {
max-width: none !important;
margin-inline: 0 !important;
padding-left: clamp(20px, 5vw, 80px) !important;
padding-right: clamp(20px, 5vw, 80px) !important;
width: 100% !important;
text-align: left !important;
}
section.fixed-quote blockquote,
section.fixed-quote blockquote * {
text-align: left !important;
}
section.fixed-quote blockquote {
margin-left: 0 !important;
margin-right: auto !important;
max-width: 760px !important;
}
}
@media (max-width: 768px) {
section.fixed-quote > .container {
max-width: none !important;
margin-inline: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
width: 100% !important;
text-align: center !important;
}
section.fixed-quote blockquote,
section.fixed-quote blockquote * {
text-align: center !important;
}
section.fixed-quote blockquote {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
}
section.fixed-quote blockquote p {
max-width: 28ch !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ---------- §B · MOBILE NAV en glassmorphism ---------- */
.mobile-nav {
background: rgba(252,245,232, 0.78) !important;
-webkit-backdrop-filter: blur(26px) saturate(1.75) !important;
backdrop-filter: blur(26px) saturate(1.75) !important;
border-left: 1px solid rgba(255,255,255, 0.55) !important;
box-shadow:
-22px 0 48px -24px rgba(46,41,34,0.38),
inset 1px 0 0 rgba(255,255,255,0.55) !important;
}
@media (max-width: 640px) {
.mobile-nav {
border-left: 0 !important;
box-shadow: 0 -8px 32px rgba(46,41,34, 0.18) !important;
}
}
/* ---------- §C · DIPLOMAS dernier slide — slidesPerView 1.1 avec peek ---------- */
/* Note : la config JS PASS 40 utilise centeredSlides + slidesPerView 1.1 pour
que la dernière slide reste centrée avec un peek de la précédente */
/* =====================================================================
PASS 41 — Fixed-quote LEFT vraiment forcé (spécificité max) +
Hero mobile card moins bas + Reviews cards plus de padding
===================================================================== */
/* ---------- §A · FIXED-QUOTE — spécificité maximum pour gagner cascade ---------- */
@media (min-width: 769px) {
/* Body + main pour augmenter la spécificité (lutte contre les overrides PASS antérieurs) */
body main section.fixed-quote,
body section.fixed-quote {
/* La section reste block (pas flex) pour que justify-content ne perturbe rien */
display: block !important;
padding: 0 !important;
}
body main section.fixed-quote > .container,
body section.fixed-quote > .container {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
margin-inline: 0 !important;
padding: 80px clamp(20px, 5vw, 80px) !important;
text-align: left !important;
display: block !important;
box-sizing: border-box;
}
body main section.fixed-quote > .container > blockquote,
body section.fixed-quote > .container > blockquote {
text-align: left !important;
margin: 0 !important;
margin-left: 0 !important;
margin-right: auto !important;
max-width: 760px !important;
display: block !important;
}
body main section.fixed-quote > .container > blockquote > *,
body section.fixed-quote > .container > blockquote > * {
text-align: left !important;
}
/* Span .k qui était inline → block pour bien afficher en haut */
body main section.fixed-quote .k {
display: block !important;
text-align: left !important;
}
}
/* ---------- §B · HERO MOBILE : carte moins bas ---------- */
@media (max-width: 768px) {
.hero.hero--mosaic {
padding: 70px 16px 30px !important; /* moins de padding top */
gap: 16px !important; /* gap réduit entre photo et carte */
}
.hero__mobile-photo {
aspect-ratio: 16/9 !important; /* plus court (était 16/11) */
max-width: 420px !important;
}
.hero.hero--mosaic .hero__mosaic-card {
padding: 24px 22px !important; /* padding interne réduit */
}
}
/* ---------- §C · REVIEWS CARD plus de padding ---------- */
.review-card {
padding: 38px 40px !important;
}
.review-card__head { margin-bottom: 18px !important; padding: 0 !important; }
.review-card__text {
margin: 0 0 16px !important;
padding: 0 !important;
}
.review-card__src {
margin-top: auto !important;
padding-top: 16px !important;
border-top: 1px solid rgba(44, 185, 198, 0.06);
}
@media (max-width: 768px) {
.review-card {
padding: 30px 28px !important;
}
}
/* =====================================================================
PASS 42 — Diplomas no empty + Citation mobile visible + Reviews padding
===================================================================== */
/* ---------- §A · DIPLOMAS mobile : slide pleine largeur + loop ---------- */
@media (max-width: 768px) {
.diplomas-strip.swiper {
overflow: hidden !important;
padding: 0 16px 36px !important;
}
.diplomas-strip__wrapper {
display: flex !important;
gap: 0 !important;
}
.diplomas-strip__item.swiper-slide,
.diplomas-strip__item.swiper-slide-duplicate {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
box-sizing: border-box;
height: auto;
}
}
/* ---------- §B · CITATION MOBILE — visible et centrée ---------- */
@media (max-width: 768px) {
body main section.fixed-quote,
body section.fixed-quote {
display: block !important;
min-height: 60vh !important;
padding: 80px 0 60px !important;
}
body main section.fixed-quote > .container,
body section.fixed-quote > .container {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 20px !important;
text-align: center !important;
display: block !important;
}
body main section.fixed-quote > .container > blockquote,
body section.fixed-quote > .container > blockquote {
text-align: center !important;
margin: 0 auto !important;
max-width: 90% !important;
display: block !important;
}
body main section.fixed-quote .k,
body section.fixed-quote .k {
display: block !important;
text-align: center !important;
margin-bottom: 16px !important;
}
body main section.fixed-quote blockquote p,
body section.fixed-quote blockquote p {
text-align: center !important;
margin: 0 auto !important;
max-width: 26ch !important;
font-size: 1.3rem !important;
line-height: 1.4 !important;
color: #fff !important;
}
body main section.fixed-quote cite,
body section.fixed-quote cite {
display: block !important;
text-align: center !important;
margin: 18px auto 0 !important;
}
}
/* ---------- §C · REVIEWS padding interne — selectors max spécificité ---------- */
.reviews-grid .review-card,
.reviews-swiper .review-card,
section .review-card.review-card,
body main .review-card {
padding: 36px 38px !important;
box-sizing: border-box !important;
}
.review-card .review-card__head {
padding: 0 !important;
margin: 0 0 20px !important;
}
.review-card .review-card__text {
padding: 0 !important;
margin: 0 0 14px !important;
}
.review-card .review-card__src {
padding: 14px 0 0 !important;
margin: 0 !important;
border-top: 1px solid rgba(44, 185, 198, 0.06);
}
@media (max-width: 768px) {
.reviews-grid .review-card,
.reviews-swiper .review-card,
section .review-card.review-card,
body main .review-card {
padding: 28px 26px !important;
}
}
/* =====================================================================
PASS 43 — Carousels soin (diplomas + why) = même CSS que reviews qui
fonctionne + Hero card mobile remontée encore
===================================================================== */
/* ---------- §A · CAROUSELS soin mobile = config reviews qui marche ---------- */
@media (max-width: 768px) {
/* Réinitialise les rules conflictuelles des PASS antérieurs sur diplomas + why */
.diplomas-strip.swiper,
.why-grid.swiper {
display: block !important;
overflow: hidden !important;
padding: 12px 0 50px !important;
margin: 32px 0 0 !important;
width: 100% !important;
position: relative !important;
touch-action: pan-y !important;
}
/* Wrapper = flex row, pas de grid, pas de gap (Swiper gère espacement via spaceBetween) */
.diplomas-strip__wrapper,
.diplomas-strip.swiper .swiper-wrapper,
.why-grid.swiper .swiper-wrapper,
.why-grid.swiper .why-grid__wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid-template-columns: unset !important;
grid-template-rows: unset !important;
grid: unset !important;
gap: 0 !important;
width: auto !important;
transition-property: transform !important;
touch-action: pan-y !important;
}
/* Slides : flex-shrink: 0, taille naturelle calculée par Swiper */
.diplomas-strip__item.swiper-slide,
.why-grid.swiper .why-card.swiper-slide {
flex-shrink: 0 !important;
height: auto !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
touch-action: pan-y !important;
}
/* Card visuel à l'intérieur de la slide */
.diplomas-strip__item.swiper-slide {
padding: 8px !important;
}
.diplomas-strip__item.swiper-slide .diplomas-strip__thumb,
.diplomas-strip__item.swiper-slide .diplomas-strip__caption {
/* contenu naturel */
}
.why-grid.swiper .why-card.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 22px !important;
padding: 26px 24px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
}
/* Pagination dots en bas */
.diplomas-swiper__pagination,
.why-swiper__pagination {
position: absolute !important;
bottom: 8px !important;
left: 0 !important; right: 0 !important;
text-align: center !important;
z-index: 5;
display: block !important;
}
}
/* ---------- §B · HERO mobile carte REMONTÉE — sans toucher desktop ---------- */
@media (max-width: 768px) {
.hero.hero--mosaic {
padding: 60px 16px 24px !important; /* padding-top réduit à 60px */
gap: 12px !important; /* gap entre photo et carte minimal */
min-height: auto !important;
}
.hero__mobile-photo {
aspect-ratio: 16/8 !important; /* photo très courte (banner) */
max-width: 360px !important; /* photo plus petite */
width: 92% !important;
}
.hero.hero--mosaic .hero__mosaic-card {
padding: 22px 20px !important; /* card padding réduit */
max-width: 100% !important;
width: 100% !important;
}
.hero.hero--mosaic .hero__title {
font-size: 1.6rem !important; /* titre plus petit pour réduire hauteur */
line-height: 1.15 !important;
margin-bottom: 10px !important;
}
.hero.hero--mosaic .hero__subtitle {
font-size: 0.92rem !important;
line-height: 1.5 !important;
margin-bottom: 16px !important;
}
.hero.hero--mosaic .hero__actions {
margin-bottom: 14px !important;
flex-wrap: wrap;
gap: 8px;
}
.hero.hero--mosaic .hero__insights {
margin-top: 14px !important;
padding-top: 14px !important;
gap: 6px !important;
}
}
/* =====================================================================
PASS 44 — Hero mobile compact (carte au TOP) + Slides 100% width
+ Services-swiper accueil + Titre "Un cadre solide" centré
===================================================================== */
/* ---------- §A · HERO mobile : carte en HAUT (override les 4 min-height clamps) ---------- */
@media (max-width: 768px) {
body main section.hero.hero--mosaic,
body section.hero.hero--mosaic {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 0 !important;
height: auto !important;
padding: 70px 16px 24px !important;
gap: 12px !important;
place-items: unset !important;
grid-template-columns: unset !important;
grid-template-rows: unset !important;
}
body main section.hero.hero--mosaic > .hero__mobile-photo {
order: 1 !important;
align-self: center !important;
margin: 0 auto !important;
}
body main section.hero.hero--mosaic > .hero__mosaic-card {
order: 2 !important;
align-self: stretch !important;
margin: 0 !important;
transform: none !important;
grid-column: unset !important;
grid-row: unset !important;
justify-self: unset !important;
}
}
/* ---------- §B · CAROUSELS mobile : slides 100% width (annule les widths antérieurs) ---------- */
@media (max-width: 768px) {
body main .reviews-swiper .swiper-slide,
body main .diplomas-strip.swiper .swiper-slide,
body main .why-grid.swiper .swiper-slide,
body main .why-grid.swiper .why-card.swiper-slide,
body main .diplomas-strip__item.swiper-slide,
body main .services-swiper .swiper-slide {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin: 0 !important;
box-sizing: border-box;
}
body main .swiper-wrapper,
body main .diplomas-strip__wrapper,
body main .why-grid__wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid: unset !important;
grid-template-columns: unset !important;
grid-template-rows: unset !important;
gap: 0 !important;
width: auto !important;
align-items: stretch !important;
}
}
/* ---------- §C · SERVICES-SWIPER (accueil mobile) ---------- */
.services-swiper {
position: relative;
}
@media (max-width: 768px) {
body main .services-swiper.swiper {
display: block !important;
overflow: hidden !important;
padding: 12px 0 50px !important;
width: 100% !important;
touch-action: pan-y !important;
}
body main .services-swiper .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid-template-columns: unset !important;
gap: 0 !important;
}
body main .services-swiper .service-card.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 22px !important;
padding: 26px 24px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
}
body main .services-swiper__pagination {
position: absolute !important;
bottom: 8px !important;
left: 0 !important; right: 0 !important;
text-align: center !important;
z-index: 5;
display: block !important;
}
body main .services-swiper__pagination .swiper-pagination-bullet {
background: rgba(46,41,34, 0.22);
opacity: 1; width: 8px; height: 8px; margin: 0 5px;
}
body main .services-swiper__pagination .swiper-pagination-bullet-active {
background: var(--color-accent);
transform: scale(1.25);
}
}
@media (min-width: 769px) {
/* Sur desktop, .services-swiper reste un grid normal (Swiper destroyed) */
.services-swiper.swiper .swiper-wrapper {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gap, 24px);
transform: none !important;
}
.services-swiper.swiper .service-card.swiper-slide {
width: 100% !important;
flex: initial !important;
}
}
/* =====================================================================
PASS 45 — Services-swiper desktop : force grid 4 cols (override Swiper CSS)
===================================================================== */
@media (min-width: 769px) {
/* Container : remettre en grid sur desktop (Swiper non initialisé) */
body main .services-swiper.swiper,
body main .services-grid.services-swiper {
display: block !important;
overflow: visible !important;
padding: 0 !important;
width: 100% !important;
touch-action: auto !important;
}
/* Wrapper Swiper : devient un GRID 4 cols, override le display: flex de Swiper */
body main .services-swiper.swiper > .swiper-wrapper,
body main .services-grid.services-swiper .swiper-wrapper {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--grid-gap, 24px) !important;
width: 100% !important;
height: auto !important;
transform: none !important;
transition: none !important;
flex-wrap: unset !important;
flex-direction: unset !important;
}
/* Slides : width auto (taille de la cell grid), pas flex-shrink */
body main .services-swiper .service-card.swiper-slide,
body main .services-grid.services-swiper .swiper-slide {
width: auto !important;
max-width: none !important;
flex: initial !important;
flex-shrink: initial !important;
margin: 0 !important;
transform: none !important;
}
/* Pagination cachée desktop */
body main .services-swiper__pagination,
body main .services-swiper .swiper-pagination {
display: none !important;
}
}
/* =====================================================================
PASS 46 — Carrousels mobile : laisse Swiper calculer naturellement
(annule les overrides circulaires de PASS 44 §B)
===================================================================== */
@media (max-width: 768px) {
/* On RETIRE les forced widths sur swiper-wrapper/slide — Swiper bundle gère.
On laisse juste les container styles. */
body main .reviews-swiper .swiper-wrapper,
body main .diplomas-strip.swiper .swiper-wrapper,
body main .why-grid.swiper .swiper-wrapper,
body main .services-swiper .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid: unset !important;
grid-template-columns: unset !important;
grid-template-rows: unset !important;
gap: 0 !important;
/* PAS de width override → laisse Swiper calculer */
width: auto;
height: auto;
align-items: stretch;
}
/* Swiper-slide : pas de width forcé, laisse Swiper bundle calculer */
body main .reviews-swiper .swiper-slide,
body main .diplomas-strip.swiper .swiper-slide,
body main .why-grid.swiper .swiper-slide,
body main .services-swiper .swiper-slide {
height: auto;
margin: 0;
box-sizing: border-box;
/* PAS de width: 100% !important → casse les calculs Swiper */
}
/* Container swiper : overflow hidden */
body main .reviews-swiper,
body main .diplomas-strip.swiper,
body main .why-grid.swiper,
body main .services-swiper.swiper {
overflow: hidden !important;
width: 100% !important;
touch-action: pan-y !important;
}
/* Le contenu intérieur de chaque card peut s'étirer librement */
body main .why-grid.swiper .why-card,
body main .services-swiper .service-card {
width: 100%;
box-sizing: border-box;
margin: 0;
}
}
/* =====================================================================
PASS 47 — Carrousels mobile : 1 slide = 1 viewport (style Instagram)
===================================================================== */
@media (max-width: 768px) {
/* === SWIPER CONTAINER : largeur viewport, overflow hidden strict === */
body main .reviews-swiper.swiper,
body main .reviews-grid.swiper,
body main .diplomas-strip.swiper,
body main .why-grid.swiper,
body main .services-swiper.swiper {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
touch-action: pan-y !important;
}
/* Le PARENT .container peut avoir du padding, mais le swiper full width interne */
body main section .container:has(> .swiper),
body main section .container:has(> .swiper) {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* === SWIPER WRAPPER : flex row strict === */
body main .swiper > .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
grid: unset !important;
grid-template-columns: unset !important;
gap: 0 !important;
}
/* === SLIDES : EXACTEMENT 100% du container, pas de spillover === */
body main .swiper > .swiper-wrapper > .swiper-slide {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
box-sizing: border-box;
padding: 0 16px !important; /* padding interne pour aérer le contenu de la card */
height: auto !important;
margin: 0 !important;
}
/* === Cards À L'INTÉRIEUR des slides === */
body main .swiper-slide > .review-card,
body main .swiper-slide > .service-card,
body main .swiper-slide > .why-card,
body main .swiper-slide.diplomas-strip__item,
body main .swiper-slide > .diplomas-strip__item {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}
/* === Texte des reviews : force wrap dans la card === */
body main .review-card,
body main .review-card__text,
body main .review-card__head,
body main .review-card__src {
width: 100% !important;
max-width: 100% !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
box-sizing: border-box !important;
}
body main .review-card {
padding: 24px 22px !important; /* padding interne raisonnable mobile */
}
/* === PAGINATION dots : visible sous chaque carousel === */
body main .swiper-pagination,
body main .reviews-swiper .swiper-pagination,
body main .diplomas-swiper__pagination,
body main .why-swiper__pagination,
body main .services-swiper__pagination {
position: relative !important;
bottom: auto !important;
margin-top: 18px !important;
text-align: center !important;
z-index: 5;
display: block !important;
}
}
/* =====================================================================
PASS 48 — Fixed-quote hauteur réduite desktop + Carousels mobile slide
exact viewport width
===================================================================== */
/* ---------- §A · FIXED-QUOTE desktop : hauteur réduite ---------- */
@media (min-width: 769px) {
body main section.fixed-quote,
body section.fixed-quote {
min-height: 50vh !important;
padding: 60px 0 !important;
}
}
@media (max-width: 768px) {
body main section.fixed-quote,
body section.fixed-quote {
min-height: 40vh !important;
padding: 50px 0 40px !important;
}
}
/* ---------- §B · CAROUSELS mobile : slide width = viewport exact ---------- */
@media (max-width: 768px) {
/* La section parente : padding 0 pour que le swiper aille bord à bord */
body main section:has(.reviews-swiper) > .container,
body main section:has(.diplomas-strip.swiper) > .container,
body main section:has(.why-grid.swiper) > .container,
body main section:has(.services-swiper) > .container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100vw !important;
overflow: hidden !important;
}
/* Container swiper PURE : 100vw, overflow hidden strict */
body main .reviews-swiper.swiper,
body main .diplomas-strip.swiper,
body main .why-grid.swiper,
body main .services-swiper.swiper {
width: 100vw !important;
max-width: 100vw !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box;
touch-action: pan-y !important;
position: relative !important;
}
/* Wrapper flex */
body main .swiper > .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 0 !important;
width: auto !important;
transition-property: transform !important;
}
/* Slide = EXACTEMENT 100vw, sans padding (le padding va sur la card) */
body main .swiper > .swiper-wrapper > .swiper-slide {
flex: 0 0 100vw !important;
width: 100vw !important;
max-width: 100vw !important;
min-width: 100vw !important;
box-sizing: border-box !important;
padding: 0 16px !important; /* le padding crée la marge visuelle autour de la card */
margin: 0 !important;
height: auto !important;
}
/* Cards : 100% de la slide (qui est 100vw - 32px de padding) */
body main .swiper-slide > .review-card,
body main .swiper-slide > .service-card,
body main .swiper-slide > .why-card,
body main .swiper-slide.diplomas-strip__item,
body main .swiper-slide > .diplomas-strip__item {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
overflow: hidden;
}
/* Reviews text wrap forced */
body main .review-card__text {
overflow-wrap: anywhere !important;
word-break: break-word !important;
max-width: 100% !important;
width: 100% !important;
white-space: normal !important;
}
}
/* =====================================================================
PASS 49 — Carousels bord-à-bord via NEGATIVE MARGIN (sans casser les boutons)
===================================================================== */
@media (max-width: 768px) {
/* §2 · ANNULATION PASS 48 §B — restaure le padding du .container
pour que les boutons CTA ne touchent plus les bords */
body main section > .container {
padding-left: 20px !important;
padding-right: 20px !important;
max-width: var(--container) !important;
overflow: visible !important;
}
/* §3 · BOUTONS CTA mobile : padding garanti */
body main section .actions,
body main section .section-cta,
body main section .actions--center {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
body main section .actions .btn,
body main section .section-cta .btn,
body main section .actions--center .btn {
max-width: 100%;
width: auto !important;
}
/* §1 · NEGATIVE MARGIN TRICK : le swiper escape son container
vers les bords du viewport, sans toucher au padding du .container */
body main .reviews-swiper.swiper,
body main .reviews-grid.swiper,
body main .diplomas-strip.swiper,
body main .why-grid.swiper,
body main .services-swiper.swiper {
margin-left: -20px !important;
margin-right: -20px !important;
width: calc(100% + 40px) !important;
max-width: calc(100% + 40px) !important;
overflow: hidden !important;
padding: 0 !important;
box-sizing: content-box;
touch-action: pan-y !important;
}
/* Wrapper : flex row strict, Swiper gère le transform */
body main .swiper > .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0 !important;
align-items: stretch !important;
width: auto !important;
transition-property: transform !important;
grid: unset !important;
grid-template-columns: unset !important;
}
/* Slide : 100% du swiper container (qui fait 100vw grâce au calc) */
body main .swiper > .swiper-wrapper > .swiper-slide {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
box-sizing: border-box !important;
padding: 0 20px !important; /* marge visuelle de la card dans la slide */
margin: 0 !important;
height: auto !important;
}
/* §4 · REVIEWS TEXT : force word-wrap */
body main .review-card,
body main .review-card *,
body main .review-card__text {
overflow-wrap: anywhere !important;
word-break: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body main .review-card {
padding: 24px 22px !important;
}
/* Pagination dots visibles sous chaque carousel */
body main .swiper-pagination,
body main .reviews-swiper .swiper-pagination,
body main .diplomas-swiper__pagination,
body main .why-swiper__pagination,
body main .services-swiper__pagination {
position: relative !important;
bottom: auto !important;
margin-top: 18px !important;
text-align: center !important;
display: block !important;
z-index: 5;
}
}
/* =====================================================================
PASS 50 — Polish visuel des cards swiper mobile (bg, border, shadow,
padding propre)
===================================================================== */
@media (max-width: 768px) {
/* ---- SERVICES cards : carte propre blanche + ombre ---- */
body main .services-swiper .service-card.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 20px !important;
padding: 26px 24px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
/* Le padding 0 20px de la slide PASS 49 contient déjà la marge externe */
margin: 0 !important;
height: auto !important;
overflow: hidden;
}
body main .services-swiper .service-card__icon {
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
background: rgba(252,245,232, 0.85) !important;
border: 1px solid rgba(232, 181, 74, 0.25) !important;
display: grid !important;
place-items: center !important;
font-size: 26px !important;
color: var(--color-primary-strong) !important;
margin-bottom: 18px !important;
}
body main .services-swiper .service-card__title {
font-family: var(--font-heading) !important;
font-size: 1.15rem !important;
font-weight: 600 !important;
margin: 0 0 8px !important;
color: var(--color-text) !important;
}
body main .services-swiper .service-card__alt {
font-style: italic !important;
color: var(--color-text-muted) !important;
font-weight: 400 !important;
display: inline !important;
}
body main .services-swiper .service-card__text {
font-size: 0.95rem !important;
line-height: 1.55 !important;
color: var(--color-text-muted) !important;
margin: 0 0 18px !important;
}
body main .services-swiper .service-card__link {
font-weight: 600 !important;
color: var(--color-primary-strong) !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
}
/* ---- WHY cards : carte propre + style éditorial ---- */
body main .why-grid.swiper .why-card.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 20px !important;
padding: 28px 26px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
margin: 0 !important;
height: auto !important;
}
body main .why-grid.swiper .why-card__num {
font-family: var(--font-heading) !important;
font-size: 56px !important;
line-height: 1 !important;
font-weight: 500 !important;
color: var(--color-accent) !important;
margin-bottom: 10px !important;
text-align: left !important;
}
body main .why-grid.swiper .why-card__title {
font-family: var(--font-heading) !important;
font-size: 1.15rem !important;
font-weight: 600 !important;
margin: 0 0 10px !important;
color: var(--color-text) !important;
text-align: left !important;
}
body main .why-grid.swiper .why-card__text {
font-size: 0.95rem !important;
line-height: 1.55 !important;
color: var(--color-text-muted) !important;
margin: 0 !important;
text-align: left !important;
}
/* ---- DIPLOMAS cards : container blanc autour image + caption ---- */
body main .diplomas-strip.swiper .diplomas-strip__item.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 20px !important;
padding: 16px 16px 20px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
margin: 0 !important;
height: auto !important;
cursor: pointer;
}
body main .diplomas-strip__item .diplomas-strip__thumb {
display: block;
width: 100%;
margin-bottom: 12px;
}
body main .diplomas-strip__item .diplomas-strip__thumb img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
body main .diplomas-strip__item .diplomas-strip__caption {
display: block;
text-align: center;
font-family: var(--font-heading);
font-size: 1.05rem;
color: var(--color-text);
line-height: 1.4;
}
body main .diplomas-strip__item .diplomas-strip__year {
display: block;
margin-top: 4px;
font-size: 0.92rem;
color: var(--color-text-muted);
font-weight: 400;
}
/* ---- REVIEW cards : déjà polish PASS 41-49, juste assurer le visuel ---- */
body main .reviews-swiper .review-card.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 18px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
margin: 0 !important;
}
}
/* =====================================================================
PASS 51 — Fixed-quote hauteur réduite + Carousels mobile : swiper
DANS le container (pas de negative margin extension)
===================================================================== */
/* ---------- §A · FIXED-QUOTE hauteur réduite ---------- */
body main section.fixed-quote,
body section.fixed-quote {
min-height: auto !important;
padding: 80px 0 60px !important;
}
body main section.fixed-quote .container,
body section.fixed-quote .container {
min-height: 320px; /* hauteur raisonnable pour le texte sans dominer l'écran */
}
@media (min-width: 769px) {
body main section.fixed-quote,
body section.fixed-quote {
min-height: 380px !important;
padding: 70px 0 !important;
}
}
@media (max-width: 768px) {
body main section.fixed-quote,
body section.fixed-quote {
min-height: 320px !important;
padding: 60px 0 50px !important;
}
}
/* ---------- §B · CAROUSELS mobile : swiper RESTE dans le container ---------- */
/* On annule PASS 49 §1 negative margin qui faisait déborder le swiper */
@media (max-width: 768px) {
body main .reviews-swiper.swiper,
body main .reviews-grid.swiper,
body main .diplomas-strip.swiper,
body main .why-grid.swiper,
body main .services-swiper.swiper {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
padding: 0 !important;
box-sizing: border-box !important;
touch-action: pan-y !important;
position: relative !important;
}
/* Slide = 100% du swiper (= 100% du .container content area) */
body main .swiper > .swiper-wrapper > .swiper-slide {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
padding: 0 !important; /* pas de padding sur la slide — direct sur la card */
margin: 0 !important;
box-sizing: border-box !important;
height: auto !important;
}
/* Card prend toute la slide, padding INTERNE pour l'air entre bord et texte */
body main .swiper-slide > .review-card,
body main .swiper-slide > .service-card,
body main .swiper-slide.diplomas-strip__item,
body main .swiper-slide > .diplomas-strip__item,
body main .why-grid.swiper .swiper-slide.why-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
}
/* =====================================================================
PASS 52 — Carousels mobile : padding visible côté écran + why-grid CSS
===================================================================== */
/* ---------- §A · TOUS les carousels mobile : marge interne propre ---------- */
@media (max-width: 768px) {
/* Container parent : padding latéral garanti */
body main section > .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Swipers : restent dans le container, pas de débordement */
body main .reviews-swiper.swiper,
body main .reviews-grid.swiper,
body main .diplomas-strip.swiper,
body main .why-grid.swiper,
body main .services-swiper.swiper {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box;
}
/* Wrapper Swiper flex */
body main .swiper > .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0 !important;
align-items: stretch !important;
}
/* Slides : laisse Swiper calculer la width via slidesPerView 1 */
body main .swiper > .swiper-wrapper > .swiper-slide {
flex-shrink: 0 !important;
height: auto !important;
box-sizing: border-box !important;
margin: 0;
/* PAS de width force — Swiper bundle calcule */
}
/* === Cards INTERNES avec leur propre styling visible === */
body main .why-grid.swiper .why-card.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 20px !important;
padding: 28px 26px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
}
body main .services-swiper .service-card.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 20px !important;
padding: 28px 26px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
}
body main .diplomas-strip.swiper .diplomas-strip__item.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 20px !important;
padding: 18px 18px 22px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
}
body main .reviews-swiper .review-card.swiper-slide {
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 18px !important;
padding: 26px 24px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
}
}
/* ---------- §B · DESKTOP why-grid : grid 3 cols (annule Swiper inline) ---------- */
@media (min-width: 769px) {
body main .why-grid.swiper {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px !important;
overflow: visible !important;
padding: 0 !important;
}
body main .why-grid.swiper > .swiper-wrapper {
display: contents !important; /* le wrapper s'efface, les cards sont enfants directs du grid */
}
body main .why-grid.swiper .why-card.swiper-slide {
width: 100% !important;
transform: none !important;
margin: 0 !important;
background: transparent;
border: 0;
box-shadow: none;
padding: 24px 0 0;
border-top: 2px solid var(--color-border);
}
}
/* =====================================================================
PASS 53 — Force padding visible carrousels + force touch
===================================================================== */
@media (max-width: 768px) {
/* 1. Container parent : padding 20px GARANTI, overflow visible */
html body main section > .container,
html body section > .container {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* 2. Swiper container : 100% du container (donc 100vw - 40px), overflow hidden */
html body main .swiper.reviews-swiper,
html body main .swiper.reviews-grid,
html body main .swiper.diplomas-strip,
html body main .swiper.why-grid,
html body main .swiper.services-swiper {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
/* Touch events */
touch-action: pan-y !important;
pointer-events: auto !important;
user-select: none !important;
-webkit-user-select: none !important;
-webkit-touch-callout: none !important;
}
/* 3. Wrapper et slides : touch propagés */
html body main .swiper > .swiper-wrapper {
touch-action: pan-y !important;
pointer-events: auto !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
}
html body main .swiper > .swiper-wrapper > .swiper-slide {
touch-action: pan-y !important;
pointer-events: auto !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
height: auto !important;
/* Pas de width forcé → Swiper bundle calcule selon slidesPerView */
}
/* 4. ANNULE tout pointer-events:none / touch-action:none sur les couches au-dessus */
html body main .page-organic-shapes,
html body main .page-organic-shape {
pointer-events: none !important;
touch-action: none !important;
z-index: -1 !important; /* envoyé tout en arrière pour ne plus interférer */
}
/* 5. Pas de transform qui désaligne sur les slides actives */
html body main .swiper-slide-active {
transform: none !important;
}
}
/* =====================================================================
PASS 54 — Nettoyage radical MOBILE UNIQUEMENT
- Supprime le layer organic-shapes qui bloque les touches
- Force le padding container 20px (override toute la cascade)
- Carrousels Instagram-style propre
===================================================================== */
@media (max-width: 768px) {
/* === 1. SUPPRIME complètement le layer organic-shapes sur mobile === */
html body main .page-organic-shapes,
html body main .page-organic-shape,
html body .page-organic-shapes {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: -999 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* === 2. CONTAINER : padding 20px IMPOSSIBLE à override === */
html body main section.section > div.container,
html body main section > div.container,
html body section > div.container,
body main section > .container {
padding-left: 20px !important;
padding-right: 20px !important;
padding-inline: 20px !important;
max-width: 100% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* === 3. SWIPERS bord-à-bord container, overflow hidden === */
html body main div.swiper,
html body main .swiper.reviews-swiper,
html body main .swiper.reviews-grid,
html body main .swiper.diplomas-strip,
html body main .swiper.why-grid,
html body main .swiper.services-swiper {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
position: relative !important;
touch-action: pan-y !important;
-webkit-user-select: none;
user-select: none;
}
/* === 4. WRAPPER flex strict === */
html body main .swiper > .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0 !important;
touch-action: pan-y !important;
}
/* === 5. SLIDE : pas de width forcé (laisse Swiper) + touch === */
html body main .swiper > .swiper-wrapper > .swiper-slide {
flex-shrink: 0 !important;
height: auto !important;
box-sizing: border-box !important;
touch-action: pan-y !important;
transform: none; /* annule GSAP transform potentiel */
opacity: 1 !important; /* annule GSAP opacity 0 */
filter: none !important; /* annule GSAP blur */
}
/* === 6. PAGINATION dots sous chaque carousel === */
html body main .swiper-pagination,
html body main .reviews-swiper .swiper-pagination,
html body main .diplomas-swiper__pagination,
html body main .why-swiper__pagination,
html body main .services-swiper__pagination {
position: relative !important;
margin-top: 20px !important;
text-align: center !important;
display: block !important;
bottom: auto !important;
}
}
/* Sur desktop, organic-shapes restent visibles (décoratives) */
@media (min-width: 769px) {
html body main .page-organic-shapes {
display: block;
visibility: visible;
}
}
/* =====================================================================
PASS 55 — Why-grid mobile : fallback visuel propre même si Swiper rate
===================================================================== */
@media (max-width: 768px) {
/* === WHY-GRID : flex horizontal forcé, scroll-snap pour fallback === */
html body main section .why-grid,
html body main section .why-grid.swiper {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
scrollbar-width: none;
margin: 0 !important;
padding: 0 0 20px !important;
}
html body main section .why-grid::-webkit-scrollbar {
display: none;
}
/* Wrapper interne (que Swiper ou pas) */
html body main section .why-grid > .swiper-wrapper,
html body main section .why-grid > .why-grid__wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: max-content !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
}
/* Why-card : largeur fixe, scroll-snap-align */
html body main section .why-card.swiper-slide,
html body main section .why-card {
flex: 0 0 calc(100vw - 40px) !important;
width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
box-sizing: border-box !important;
scroll-snap-align: center !important;
/* === VISUEL CARTE === */
background: #fff !important;
border: 1px solid rgba(44, 185, 198, 0.10) !important;
border-radius: 20px !important;
padding: 28px 26px !important;
box-shadow: 0 6px 18px -8px rgba(46,41,34, 0.12) !important;
margin: 0 !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
/* Numéro 01/02/03 */
html body main section .why-card .why-card__num {
font-family: var(--font-heading) !important;
font-size: 52px !important;
line-height: 1 !important;
color: var(--color-accent) !important;
margin: 0 0 10px !important;
text-align: left !important;
}
html body main section .why-card .why-card__title {
font-family: var(--font-heading) !important;
font-size: 1.15rem !important;
font-weight: 600 !important;
margin: 0 0 10px !important;
text-align: left !important;
color: var(--color-text) !important;
}
html body main section .why-card .why-card__text {
font-size: 0.95rem !important;
line-height: 1.55 !important;
color: var(--color-text-muted) !important;
margin: 0 !important;
text-align: left !important;
}
/* Container du why-grid : padding 20px latéral garanti */
html body main section .container:has(.why-grid) {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* =====================================================================
PASS 56 — Fixed-quote : section taillée au texte, montagne alignée
horizontalement avec le bloc texte (pas full viewport)
+ Reviews-swiper : flèches masquées sur desktop
===================================================================== */
/* ---------- §A · FIXED-QUOTE : hauteur adaptée au contenu ---------- */
/* La section ne doit plus prendre tout le viewport — sa hauteur suit le texte */
body main section.fixed-quote,
body section.fixed-quote {
min-height: 0 !important;
height: auto !important;
}
@media (min-width: 769px) {
body main section.fixed-quote,
body section.fixed-quote {
padding: 96px 0 !important;
}
}
@media (max-width: 768px) {
body main section.fixed-quote,
body section.fixed-quote {
padding: 64px 0 !important;
}
}
/* ---------- §B · Montagne SVG : position absolute restaurée ---------- */
/* La règle `main > section > *` force position: relative et z-index 2
sur tous les enfants de section, ce qui sort la montagne du flux normal
et l'empile au-dessus du texte. On la repasse en absolute pour qu'elle
redevienne une décoration superposée et n'ajoute plus de hauteur. */
html body main section.fixed-quote > svg.section-mountain,
html body section.fixed-quote > svg.section-mountain {
position: absolute !important;
}
/* ---------- §C · Montagne : alignée horizontalement avec le bloc texte ---------- */
/* Le bloc texte (.container > blockquote, max-width 760px) est gauche-aligné
dans .container (padding-inline: clamp(20px, 5vw, 80px) sur .fixed-quote).
On colle la montagne sur la même bande horizontale : même left que le texte,
même largeur max (760px), pour qu'elle se lise comme un trait sous le texte
plutôt qu'un décor pleine largeur. */
html body main section.fixed-quote .section-mountain,
html body section.fixed-quote .section-mountain {
top: auto !important;
right: auto !important;
bottom: 32px !important;
left: clamp(20px, 5vw, 80px) !important;
transform: none !important;
width: min(760px, calc(100% - 2 * clamp(20px, 5vw, 80px))) !important;
max-width: 760px !important;
height: auto !important;
max-height: 86px !important;
opacity: 0.7 !important;
}
@media (max-width: 768px) {
html body main section.fixed-quote .section-mountain,
html body section.fixed-quote .section-mountain {
bottom: 20px !important;
max-height: 56px !important;
}
}
/* ---------- §D · REVIEWS-SWIPER : flèches masquées sur desktop ---------- */
/* Le carrousel témoignage garde la pagination (dots), mais plus de boutons
prev/next sur desktop — la navigation se fait au swipe + clic sur dots. */
@media (min-width: 769px) {
html body main .reviews-swiper__prev,
html body main .reviews-swiper__next,
html body .reviews-swiper__prev,
html body .reviews-swiper__next {
display: none !important;
}
/* Le padding latéral réservé aux flèches n'est plus nécessaire */
html body main .reviews-swiper {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* =====================================================================
PASS 57 — Carousels mobile : fix largeur slide (override PASS 48/49/51/53)
PASS 48 supprimait le padding du .container des sections à swiper et
forçait .swiper-slide à 100vw → cartes pleine viewport, décalées et
croppées (la wrapper flex gonflait au-delà du container quand width:100%
s'appliquait, ou les slides débordaient à 100vw quand elles étaient
forcées). Ici on remet :
· .container retrouve son padding 20px sur les sections à carousel
· .swiper occupe la largeur du container (= 100vw − 40px)
· .swiper-slide laisse Swiper calculer sa largeur inline (= largeur swiper)
===================================================================== */
@media (max-width: 768px) {
/* §A · Container des sections à carousel : padding 20px restauré */
html body main section:has(.reviews-swiper) > .container,
html body main section:has(.services-swiper) > .container,
html body main section:has(.why-swiper) > .container,
html body main section:has(.diplomas-swiper) > .container,
html body main section:has(.why-grid.swiper) > .container,
html body main section:has(.diplomas-strip.swiper) > .container {
padding-left: 20px !important;
padding-right: 20px !important;
max-width: 100% !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* §B · Swiper container : 100% du parent (donc 100vw − 40px) */
html body main .reviews-swiper.swiper,
html body main .services-swiper.swiper,
html body main .why-grid.swiper,
html body main .why-swiper.swiper,
html body main .diplomas-strip.swiper,
html body main .diplomas-swiper.swiper {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* §C · Slide width = largeur du swiper container (100vw − 40px)
Override les anciens 100vw et 100% qui faisaient gonfler les slides */
html body main .swiper > .swiper-wrapper > .swiper-slide,
html body main .reviews-swiper > .swiper-wrapper > .swiper-slide,
html body main .services-swiper > .swiper-wrapper > .swiper-slide,
html body main .diplomas-swiper > .swiper-wrapper > .swiper-slide,
html body main .diplomas-strip.swiper > .swiper-wrapper > .swiper-slide,
html body main .why-swiper > .swiper-wrapper > .swiper-slide,
html body main .why-grid.swiper > .swiper-wrapper > .swiper-slide {
flex: 0 0 calc(100vw - 40px) !important;
width: calc(100vw - 40px) !important;
min-width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* §D · La carte intérieure prend toute la largeur de la slide */
html body main .swiper > .swiper-wrapper > .swiper-slide > .review-card,
html body main .swiper > .swiper-wrapper > .swiper-slide > .service-card,
html body main .swiper > .swiper-wrapper > .swiper-slide > .why-card,
html body main .swiper > .swiper-wrapper > .swiper-slide.why-card,
html body main .swiper > .swiper-wrapper > .swiper-slide.diplomas-strip__item,
html body main .swiper > .swiper-wrapper > .swiper-slide.review-card,
html body main .swiper > .swiper-wrapper > .swiper-slide.service-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
}
/* =====================================================================
PASS 58 — Reviews-swiper desktop/tablet : laisser Swiper gérer la largeur
Une ancienne règle `display: flex !important` sur .swiper-slide (combinée
à `.review-card { width: 100% !important; display: flex !important }`)
forçait la slide en flex container et son intrinsic width prenait le pas
sur la `width: 685px` inline de Swiper. Résultat : slide rendue ~844px,
désalignement complet sur tablet (~820px) — la carte de droite finissait
tronquée. On force la slide en block et on laisse Swiper inscrire la
largeur inline. La carte interne, elle, garde sa flex column.
===================================================================== */
@media (min-width: 769px) {
html body main .reviews-swiper > .swiper-wrapper > .swiper-slide {
display: block !important;
box-sizing: border-box !important;
/* Pas de width/flex forcés : on laisse l'inline de Swiper (ex. 537px / 685px) */
}
}
/* =====================================================================
PASS 60 — Carrousels premium v3 unifiés (services / reviews / why / diplomas)
Référence visuelle : site/maquettes-carrousel/v3-premium.html
Comportement :
- Mobile : 1 carte + 12 % de peek de la suivante
- Tablette : 2 cartes côte à côte
- Desktop : 3 cartes côte à côte
Pagination : compteur 01 / NN + progress bar fine + boutons prev/next ronds.
Cartes : radius 22 px, padding aéré, halo radial, shadow soft → strong hover.
Aucune largeur en pixel sur la card ; tout est calculé en % du parent.
Cette PASS bat toutes les précédentes (PASS 48 → 59) grâce à la spécificité
"html body main ..." + l'ordre dans la cascade.
===================================================================== */
/* ---------- §A · Container .swiper : custom props + reset bloc ---------- */
html body main .services-swiper.swiper,
html body main .reviews-swiper.swiper,
html body main .why-swiper.swiper,
html body main .why-grid.swiper,
html body main .diplomas-swiper.swiper,
html body main .diplomas-strip.swiper {
--slides: 1.12;
--gap: 16px;
display: block !important;
overflow: visible !important;
padding: 0 !important;
margin: 32px 0 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
position: relative !important;
transform: none !important;
scroll-snap-type: none !important;
touch-action: auto !important;
}
@media (min-width: 640px) {
html body main .services-swiper.swiper,
html body main .reviews-swiper.swiper,
html body main .why-swiper.swiper,
html body main .why-grid.swiper,
html body main .diplomas-swiper.swiper,
html body main .diplomas-strip.swiper {
--slides: 2;
--gap: 22px;
}
}
@media (min-width: 1024px) {
html body main .services-swiper.swiper,
html body main .reviews-swiper.swiper,
html body main .why-swiper.swiper,
html body main .why-grid.swiper,
html body main .diplomas-swiper.swiper,
html body main .diplomas-strip.swiper {
--slides: 3;
--gap: 28px;
}
}
html body main .diplomas-row {
overflow: visible !important;
}
/* ---------- §B · Viewport (le .swiper-wrapper) : flex row + scroll-snap ---------- */
html body main .services-swiper.swiper > .swiper-wrapper,
html body main .reviews-swiper.swiper > .swiper-wrapper,
html body main .why-swiper.swiper > .swiper-wrapper,
html body main .why-grid.swiper > .swiper-wrapper,
html body main .why-grid.swiper > .why-grid__wrapper,
html body main .diplomas-swiper.swiper > .swiper-wrapper,
html body main .diplomas-strip.swiper > .swiper-wrapper,
html body main .diplomas-strip.swiper > .diplomas-strip__wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: var(--gap) !important;
overflow-x: auto !important;
overflow-y: visible !important;
overscroll-behavior-x: contain !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
transform: none !important;
padding: 8px 4px 16px !important;
margin: 0 !important;
grid: unset !important;
grid-template-columns: unset !important;
/* Pas de mask-image : il rognait visuellement la première carte sur mobile.
Le scroll-snap + le peek de la slide suivante suffisent comme signaux UX. */
}
/* Cacher la scrollbar (webkit) */
html body main .services-swiper.swiper > .swiper-wrapper::-webkit-scrollbar,
html body main .reviews-swiper.swiper > .swiper-wrapper::-webkit-scrollbar,
html body main .why-swiper.swiper > .swiper-wrapper::-webkit-scrollbar,
html body main .why-grid.swiper > .swiper-wrapper::-webkit-scrollbar,
html body main .why-grid.swiper > .why-grid__wrapper::-webkit-scrollbar,
html body main .diplomas-swiper.swiper > .swiper-wrapper::-webkit-scrollbar,
html body main .diplomas-strip.swiper > .swiper-wrapper::-webkit-scrollbar,
html body main .diplomas-strip.swiper > .diplomas-strip__wrapper::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* ---------- §C · Slides : flex-basis calculé, AUCUNE largeur en px ----------
La formule est la même partout. Pas de pixel codé en dur.
--slides et --gap pilotent toute la responsivité. */
html body main .services-swiper.swiper > .swiper-wrapper > .swiper-slide,
html body main .reviews-swiper.swiper > .swiper-wrapper > .swiper-slide,
html body main .why-swiper.swiper > .swiper-wrapper > .swiper-slide,
html body main .why-grid.swiper > .swiper-wrapper > .swiper-slide,
html body main .why-grid.swiper > .why-grid__wrapper > .swiper-slide,
html body main .why-grid.swiper > .swiper-wrapper > .why-card,
html body main .why-grid.swiper > .why-grid__wrapper > .why-card,
html body main .diplomas-swiper.swiper > .swiper-wrapper > .swiper-slide,
html body main .diplomas-strip.swiper > .swiper-wrapper > .swiper-slide,
html body main .diplomas-strip.swiper > .diplomas-strip__wrapper > .swiper-slide,
html body main .diplomas-strip.swiper > .swiper-wrapper > .diplomas-strip__item,
html body main .diplomas-strip.swiper > .diplomas-strip__wrapper > .diplomas-strip__item {
flex: 0 0 calc((100% - (var(--slides) - 1) * var(--gap)) / var(--slides)) !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
height: auto !important;
transform: none !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
box-sizing: border-box !important;
}
/* ---------- §D · Chrome card (radius / padding / shadow / halo) ----------
Appliqué aux 4 types de card sans toucher au contenu interne (icon, avatar,
image, num restent en place selon le type).
Spécificité gonflée à 4 classes pour battre les anciens PASS 51-57 qui
ciblaient `.why-grid.swiper > .swiper-wrapper > .swiper-slide` avec
`padding: 0 !important`. */
html body main .services-swiper.swiper > .swiper-wrapper > .service-card,
html body main .reviews-swiper.swiper > .swiper-wrapper > .review-card,
html body main .why-swiper.swiper > .swiper-wrapper > .why-card,
html body main .why-grid.swiper > .swiper-wrapper > .why-card,
html body main .why-grid.swiper > .why-grid__wrapper > .why-card,
html body main .diplomas-swiper.swiper > .swiper-wrapper > .diplomas-strip__item,
html body main .diplomas-strip.swiper > .swiper-wrapper > .diplomas-strip__item,
html body main .diplomas-strip.swiper > .diplomas-strip__wrapper > .diplomas-strip__item {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
background: #FFFFFF !important;
border: 1px solid rgba(44, 185, 198, 0.08) !important;
border-radius: 22px !important;
padding: 40px 36px !important; /* + d'espacement texte / bords */
box-shadow: 0 8px 28px -16px rgba(46,41,34, 0.22) !important;
position: relative !important;
overflow: hidden !important;
transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
/* Diplômes : padding aéré aussi, et un peu moins large parce que la card
contient surtout une vignette image */
html body main .diplomas-swiper.swiper > .swiper-wrapper > .diplomas-strip__item,
html body main .diplomas-strip.swiper > .swiper-wrapper > .diplomas-strip__item,
html body main .diplomas-strip.swiper > .diplomas-strip__wrapper > .diplomas-strip__item {
padding: 32px 28px 34px !important;
gap: 14px !important;
}
/* Halo radial décoratif coin sup. droit */
html body main .services-swiper.swiper .service-card::before,
html body main .reviews-swiper.swiper .review-card::before,
html body main .why-swiper.swiper .why-card::before,
html body main .why-grid.swiper .why-card::before,
html body main .diplomas-swiper.swiper .diplomas-strip__item::before,
html body main .diplomas-strip.swiper .diplomas-strip__item::before {
content: "" !important;
position: absolute !important;
inset: -40% -40% auto auto !important;
width: 220px !important;
height: 220px !important;
background: radial-gradient(circle, rgba(232, 181, 74, 0.14) 0%, transparent 70%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* On garde le contenu au-dessus du halo */
html body main .services-swiper.swiper .service-card > *,
html body main .reviews-swiper.swiper .review-card > *,
html body main .why-swiper.swiper .why-card > *,
html body main .why-grid.swiper .why-card > *,
html body main .diplomas-swiper.swiper .diplomas-strip__item > *,
html body main .diplomas-strip.swiper .diplomas-strip__item > * {
position: relative !important;
z-index: 1 !important;
}
/* Hover : lift + shadow renforcée */
@media (hover: hover) {
html body main .services-swiper.swiper .service-card:hover,
html body main .reviews-swiper.swiper .review-card:hover,
html body main .why-swiper.swiper .why-card:hover,
html body main .why-grid.swiper .why-card:hover,
html body main .diplomas-swiper.swiper .diplomas-strip__item:hover,
html body main .diplomas-strip.swiper .diplomas-strip__item:hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 60px -28px rgba(46,41,34, 0.30) !important;
}
}
/* Reviews : texte intégral (plus de line-clamp) — la card grandit avec son contenu */
html body main .reviews-swiper.swiper .review-card__text {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
display: block !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
}
html body main .reviews-swiper.swiper .review-card__more {
display: none !important;
}
/* ---------- §E · Pagination injectée par JS (compteur + progress + nav) ---------- */
html body main .carousel__progress-wrap {
display: flex !important;
align-items: center !important;
gap: 20px !important;
margin: 28px auto 0 !important;
padding-inline: clamp(0px, 2vw, 24px);
max-width: 600px;
}
html body main .carousel__counter {
font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
font-size: 1.1rem !important;
color: var(--color-dark, #2CB9C6) !important;
font-weight: 600 !important;
flex-shrink: 0 !important;
min-width: 64px !important;
letter-spacing: 0.02em;
}
html body main .carousel__counter em {
font-style: normal !important;
color: var(--color-text-muted, #6B6358) !important;
font-size: 0.85em !important;
}
html body main .carousel__progress {
flex: 1 !important;
height: 2px !important;
background: rgba(46,41,34, 0.12) !important;
border-radius: 999px !important;
overflow: hidden !important;
position: relative !important;
}
html body main .carousel__progress-bar {
position: absolute !important;
inset: 0 auto 0 0 !important;
width: 0 !important;
background: var(--color-accent, #F1C338) !important;
border-radius: 999px !important;
transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
html body main .carousel__nav {
display: flex !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
html body main .carousel__btn {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
border: 1px solid rgba(44, 185, 198, 0.08) !important;
background: #FFFFFF !important;
color: var(--color-text, #2E2922) !important;
cursor: pointer !important;
display: grid !important;
place-items: center !important;
font-size: 18px !important;
line-height: 1 !important;
padding: 0 !important;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
font-family: inherit;
}
html body main .carousel__btn:hover:not(:disabled) {
background: var(--color-dark, #2CB9C6) !important;
color: #FFFFFF !important;
transform: scale(1.06) !important;
border-color: var(--color-dark, #2CB9C6) !important;
}
html body main .carousel__btn:disabled {
opacity: 0.30 !important;
cursor: not-allowed !important;
}
/* Mobile compact : compteur en ligne 1, progress bar pleine largeur, nav en bas */
@media (max-width: 639px) {
html body main .carousel__progress-wrap {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 14px !important;
}
html body main .carousel__counter {
width: 100% !important;
text-align: center !important;
min-width: 0 !important;
}
html body main .carousel__progress {
order: 2 !important;
width: 100% !important;
flex-basis: 100% !important;
}
html body main .carousel__nav {
order: 3 !important;
}
}
/* ---------- §F · Neutralisation Swiper (anciens éléments) ---------- */
/* La pagination Swiper native et les prev/next reviews sont remplacés par
le DOM injecté par premiumCarousels(). */
html body main .services-swiper .swiper-pagination,
html body main .services-swiper__pagination,
html body main .reviews-swiper .swiper-pagination,
html body main .why-swiper .swiper-pagination,
html body main .why-swiper__pagination,
html body main .why-grid.swiper .swiper-pagination,
html body main .diplomas-swiper .swiper-pagination,
html body main .diplomas-swiper__pagination,
html body main .diplomas-strip.swiper .swiper-pagination,
html body main .reviews-swiper__prev,
html body main .reviews-swiper__next {
display: none !important;
}
/* ---------- §G · Pagination masquée UNIQUEMENT quand toutes les cartes tiennent ----------
Ancienne version : masquage en dur sur desktop pour services/why/diplomas.
Problème : services a 4 cartes pour 3 visibles → la 4e tuile (Périnatalité)
était inaccessible sur desktop. Désormais le JS (premiumCarousels) pose
.carousel--fits quand pageCount <= 1 (toutes les cartes visibles) ; on ne
masque la pagination que dans ce cas. why/diplomas (3/3) restent sans
pagination sur desktop, comme avant ; services la garde et la 4e tuile
redevient atteignable. */
@media (min-width: 1024px) {
html body main .reviews-swiper .carousel__progress-wrap {
margin-top: 36px !important;
}
}
html body main .swiper.carousel--fits .carousel__progress-wrap {
display: none !important;
}
/* ---------- §H · Services-swiper en 4 colonnes sur DESKTOP (≥1024px) ----------
Seul ce carrousel (« Une même technique, quatre champs d'action ») compte
exactement 4 cartes. On les affiche toutes les 4 d'un coup. Les autres
carrousels (reviews, why, diplomas) restent en 3 colonnes desktop.
Mobile (<640px) et tablette (640-1023) NE SONT PAS modifiés. */
@media (min-width: 1024px) {
html body main .services-swiper.swiper {
--slides: 4 !important;
--gap: 26px !important; /* gap légèrement réduit pour aérer 4 cartes */
}
}
/* Fin PASS 60 */
/* =====================================================================
PASS 61 — Sections .fixed-quote : hauteur réduite sur DESKTOP (≥1024px)
Sur desktop, ces sections (« Mon approche », « Pour le système nerveux »…)
prenaient ~681px de haut, ce qui dominait l'écran. On compresse le
padding section + container pour ramener à ~480-520px.
Mobile et tablette ne sont PAS modifiés.
===================================================================== */
@media (min-width: 1024px) {
html body main section.fixed-quote,
html body section.fixed-quote {
padding: 48px 0 !important;
min-height: 0 !important;
}
html body main section.fixed-quote > .container,
html body section.fixed-quote > .container {
padding-block: 36px !important;
min-height: 0 !important;
}
}
/* =====================================================================
PASS 62 — Ambient gradient background piloté au scroll
- 1 div #ambient-bg position:fixed, gradient morphing via custom props.
- Toutes les sections opaques deviennent transparentes pour laisser
l'ambient transparaître → fond perçu continu, sans saut entre sections.
- Exceptions : .hero, .fixed-quote, .process gardent leur image.
- JS associé : ambientGradientScroll() dans animations.js (PASS 62 §JS).
===================================================================== */
:root {
/* Phase 1 (top de page) — blanc chaud pâle, halo safran très discret */
--bg-base: #FEFCF6;
--bg-c1: #FCF6E2; /* voile sable */
--bg-c2: #F9F2D6; /* touche safran doux */
--bg-c3: #FDF9EA; /* halo chaud doux */
--bg-x1: 18%; --bg-y1: 22%;
--bg-x2: 78%; --bg-y2: 32%;
--bg-x3: 52%; --bg-y3: 78%;
--bg-r1: 55%;
--bg-r2: 60%;
--bg-r3: 65%;
}
#ambient-bg {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
will-change: background;
background-color: var(--bg-base);
background-image:
radial-gradient(circle at var(--bg-x1) var(--bg-y1), var(--bg-c1) 0%, transparent var(--bg-r1)),
radial-gradient(circle at var(--bg-x2) var(--bg-y2), var(--bg-c2) 0%, transparent var(--bg-r2)),
radial-gradient(circle at var(--bg-x3) var(--bg-y3), var(--bg-c3) 0%, transparent var(--bg-r3));
/* Mix doux entre les blobs */
background-blend-mode: normal;
}
/* Body : on garde une couleur de secours au cas où #ambient-bg n'est pas injecté
(no-JS, premier paint). Une fois la div en place, c'est elle qui domine. */
html body {
background: var(--bg-base) !important;
}
/* ===== Sections « calques » : transparentes pour laisser passer l'ambient ===== */
html body main .section.section--bg,
html body main .section.section--alt,
html body main .section.section--dark,
html body main .section.has-blob,
html body main .section.cta-final,
html body main aside.reassurance,
html body main section.affiliations-band,
html body main aside.reassurance,
html body .reassurance,
html body .affiliations-band {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
}
/* Ancien blocage des halos radials chauds — neutralisé : PASS 71
réintroduit des blobs colorés sur ces mêmes pseudo-éléments. */
/* Exceptions : on NE TOUCHE PAS .hero, .fixed-quote, .process.
Leur background-image / overlay continue de couvrir l'ambient localement.
On évite seulement de leur ajouter un fond solide hérité. */
html body main section.fixed-quote {
/* la couleur de fond solide #2CB9C6 n'a plus de raison d'être quand
une image est servie ; on la neutralise pour éviter un flash entre
deux états de chargement. L'image et le scrim couvrent toute la zone. */
background-color: transparent !important;
}
/* Conserve le rendering reduce-motion : aucun changement, le JS skip
simplement la timeline. Le fond reste statique = phase 1. */
/* =====================================================================
PASS 63 — Section-mountain : plus petites et SOUS le contenu
- Largeur fortement réduite (max 480px desktop, 70vw mobile).
- Opacité du halo + line plus discrète.
- z-index −1 : passe derrière tout le contenu de la section.
- Le contenu (.container, header, cards) repasse explicitement au-dessus.
===================================================================== */
html body main .section-mountain,
html body main section .section-mountain,
html body main .hero .section-mountain,
html body main .process .section-mountain {
width: min(420px, 56vw) !important;
max-width: 420px !important;
z-index: -1 !important;
opacity: 0.6 !important;
pointer-events: none !important;
}
html body main .section-mountain__line {
stroke-width: 1 !important;
opacity: 0.55 !important;
}
html body main .section-mountain__halo {
opacity: 0.35 !important;
}
/* Repositionnement : sous le bord bas de section, peu débordante */
html body main .section-mountain--warm { bottom: 4% !important; right: -4% !important; top: auto !important; left: auto !important; }
html body main .section-mountain--sand { top: 8% !important; left: -4% !important; bottom: auto !important; right: auto !important; }
html body main .section-mountain--sage { bottom: 10% !important; left: -2% !important; top: auto !important; right: auto !important; }
html body main .section-mountain--cream { bottom: 12% !important; right: -3% !important; top: auto !important; left: auto !important; max-width: 360px !important; width: min(360px, 50vw) !important; }
/* Force tout le contenu de section au-dessus de la montagne */
html body main section > .container,
html body main .hero > .container,
html body main .hero > .hero__mosaic,
html body main .process > .container,
html body main section > header,
html body main section > .actions {
position: relative !important;
z-index: 2 !important;
}
/* Mobile : encore plus discrètes */
@media (max-width: 768px) {
html body main .section-mountain,
html body main section .section-mountain {
width: min(280px, 65vw) !important;
max-width: 280px !important;
opacity: 0.45 !important;
}
}
/* PASS 63 §B — extension pour le hero mosaïque (avait une règle plus spécifique
.hero.hero--mosaic .section-mountain qui battait la précédente). */
html body main .hero.hero--mosaic .section-mountain,
html body main .hero .section-mountain {
z-index: -1 !important;
opacity: 0.55 !important;
}
/* =====================================================================
PASS 64 — Hero banner format 16:9 paysage
- Force aspect-ratio 16/9 sur .hero, .hero--mosaic, .hero--home, .hero--secondary
- Override des min-height/clamp existants qui forçaient 96vh / 900px.
- Sur mobile (<640px) où 16:9 donnerait un hero trop bas (< 360px), on
garde une hauteur minimale pour le contenu.
===================================================================== */
html body main .hero,
html body main .hero.hero--home,
html body main .hero.hero--secondary,
html body main .hero.hero--mosaic,
html body main .hero.hero--home.hero--mosaic,
html body main .hero.hero--secondary.hero--mosaic {
aspect-ratio: 16 / 9 !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
}
/* Mobile : on tolère plus de hauteur pour respecter la lisibilité du contenu
(titre, sous-titre, boutons, mosaïque réduite). aspect-ratio 16/9 sur 375px
donne 211px, beaucoup trop court. On force un min-height plancher. */
@media (max-width: 640px) {
html body main .hero,
html body main .hero.hero--home,
html body main .hero.hero--secondary,
html body main .hero.hero--mosaic,
html body main .hero.hero--home.hero--mosaic,
html body main .hero.hero--secondary.hero--mosaic {
aspect-ratio: auto !important;
min-height: 480px !important;
}
}
/* =====================================================================
PASS 65 — Desktop : espaces sections réduits + cap viewport
- Padding-block des sections divisé par ~2 (108 → 56px).
- Marges du header de section + actions resserrées.
- max-height: 100vh sur chaque section pour ne pas dépasser le viewport.
Combiné à overflow:visible le contenu peut visuellement déborder mais
ne contraint pas la hauteur de la section dans le flux.
- Mobile & tablette : aucun changement.
===================================================================== */
@media (min-width: 1024px) {
/* Sections normales */
html body main > section.section,
html body main > section.section--bg,
html body main > section.section--alt,
html body main > section.section--dark {
padding-block: 56px !important;
}
/* Header de section : moins de respiration */
html body main > section .section-header {
margin-bottom: 32px !important;
}
html body main > section .section-header .section-title {
margin-bottom: 8px !important;
}
html body main > section .section-header .section-intro {
margin-top: 4px !important;
}
/* Bandes spéciales */
html body main > section.affiliations-band {
padding-block: 44px !important;
}
html body main > section.cta-final {
padding-block: 56px !important;
}
html body main > .process {
padding-block: 56px !important;
}
html body main > .reassurance {
padding-block: 20px !important;
}
/* CTAs en bas de section : marge réduite */
html body main > section .actions {
margin-top: 28px !important;
}
/* PAS de max-height — la contrainte 100vh coupait le contenu de process,
section--alt, affiliations-band, etc. On laisse la section respirer son
contenu naturel après réduction du padding. */
/* En revanche, on force overflow:visible pour annuler les overflow:hidden
antérieurs qui clippaient encore le contenu débordant. */
html body main > section,
html body main > aside {
max-height: none !important;
overflow: visible !important;
}
}
/* =====================================================================
PASS 66 — Halos colorés transformés en blobs organiques modernes
Couche fixe en surcouche de #ambient-bg, ~6 formes asymétriques rondes,
couleurs chaudes douces, gros filter:blur() pour effet "lumière diffuse"
moderne. Float lente pour la vie. Injection JS dans PASS 66 §JS.
===================================================================== */
#organic-blobs {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
will-change: transform;
}
.organic-blob {
position: absolute;
opacity: 0.5;
pointer-events: none;
filter: blur(70px);
mix-blend-mode: multiply;
will-change: transform, border-radius;
animation: blob-float 28s ease-in-out infinite;
}
@keyframes blob-float {
0%, 100% {
transform: translate(0, 0) rotate(0deg) scale(1);
border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%;
}
25% {
transform: translate(20px, -15px) rotate(20deg) scale(1.05);
border-radius: 40% 60% 60% 40% / 60% 40% 50% 50%;
}
50% {
transform: translate(-15px, 20px) rotate(-15deg) scale(0.95);
border-radius: 55% 45% 40% 60% / 50% 50% 60% 40%;
}
75% {
transform: translate(10px, 10px) rotate(10deg) scale(1.02);
border-radius: 50% 50% 55% 45% / 45% 55% 45% 55%;
}
}
/* Variantes : taille / position / couleur / décalage d'animation */
.organic-blob--1 {
top: 8%; left: 6%;
width: 360px; height: 360px;
background: #F2C9A0; /* pêche caramel */
animation-delay: 0s;
}
.organic-blob--2 {
top: 30%; right: 8%;
width: 420px; height: 420px;
background: #E8B484; /* abricot doré */
animation-delay: -7s;
}
.organic-blob--3 {
bottom: 18%; left: 14%;
width: 320px; height: 320px;
background: #D8C29A; /* sable tendre */
animation-delay: -14s;
}
.organic-blob--4 {
bottom: 8%; right: 4%;
width: 380px; height: 380px;
background: #EFCFA8; /* crème caramel */
animation-delay: -21s;
}
.organic-blob--5 {
top: 50%; left: 38%;
width: 280px; height: 280px;
background: #DEC7A8; /* greige chaud */
animation-delay: -10s;
opacity: 0.4;
}
.organic-blob--6 {
top: 12%; right: 32%;
width: 240px; height: 240px;
background: #C8B89C; /* greige bleuté léger */
animation-delay: -18s;
opacity: 0.4;
}
/* Masque les anciens halos SVG (section-mountain__halo) pour laisser les
nouveaux blobs porter seuls la décoration colorée. La ligne mountain
reste visible mais sans son halo radial. */
html body main .section-mountain__halo {
opacity: 0 !important;
}
/* Reduce-motion : pas d'animation */
@media (prefers-reduced-motion: reduce) {
.organic-blob { animation: none !important; }
}
/* Mobile : moins de blobs, plus petits */
@media (max-width: 768px) {
.organic-blob--5,
.organic-blob--6 { display: none; }
.organic-blob { opacity: 0.35; filter: blur(60px); }
.organic-blob--1 { width: 220px; height: 220px; }
.organic-blob--2 { width: 260px; height: 260px; }
.organic-blob--3 { width: 200px; height: 200px; }
.organic-blob--4 { width: 240px; height: 240px; }
}
/* =====================================================================
PASS 67 — Retirer le dégradé fondu sur l'image montagne (.process__bg)
Les passes 2675/3783 posaient un linear-gradient en haut/bas qui fondait
l'image vers var(--color-bg). On neutralise ce fondu pour laisser l'image
pleinement visible.
===================================================================== */
html body main .process .process__bg::after,
html body .process .process__bg::after {
background: none !important;
content: none !important;
}
/* =====================================================================
PASS 68 — Montagnes oneline plus visibles + bord-à-bord
- Largeur = 100vw : la ligne part du bord gauche de l'écran et finit
au bord droit.
- Position flush left:0 (annule les -4% / -3% / -8% des précédentes
positions par variante).
- Opacité de la ligne remontée (0.55 → 0.85), stroke-width épaissi.
- Le z-index reste -1 (sous le contenu).
===================================================================== */
html body main .section-mountain,
html body main section .section-mountain,
html body main .hero .section-mountain,
html body main .hero.hero--mosaic .section-mountain {
width: 100vw !important;
max-width: 100vw !important;
left: 0 !important;
right: auto !important;
opacity: 1 !important;
}
/* La ligne SVG : plus présente */
html body main .section-mountain__line {
stroke-width: 1.8 !important;
opacity: 0.85 !important;
}
/* Repositionnement vertical par variante — flush bord d'écran */
html body main .section-mountain--warm { bottom: 6% !important; top: auto !important; }
html body main .section-mountain--sand { top: 10% !important; bottom: auto !important; }
html body main .section-mountain--sage { bottom: 12% !important; top: auto !important; }
html body main .section-mountain--cream { bottom: 16% !important; top: auto !important; max-width: 100vw !important; width: 100vw !important; }
@media (max-width: 768px) {
html body main .section-mountain,
html body main section .section-mountain {
width: 100vw !important;
max-width: 100vw !important;
opacity: 0.9 !important;
}
html body main .section-mountain__line {
stroke-width: 1.4 !important;
opacity: 0.75 !important;
}
}
/* =====================================================================
PASS 69 — Montagnes onelines : refonte DESKTOP uniquement
- Line plus fin, sous le contenu.
- Hero : retirer la ligne.
- "À quels maux" : retirer.
- "Chiffres clés" : ajoutée via data-mountain dans le HTML, visible derrière les cards.
- Héloïse Miermon : remplacer par une ligne sur le bas de sa photo (largeur photo).
- Autres sections sans montagne : blobs organiques bleu+brun.
===================================================================== */
@media (min-width: 1024px) {
/* §A · Ligne montagne par défaut : fine + sous le contenu */
html body main .section-mountain__line {
stroke-width: 0.9 !important;
opacity: 0.65 !important;
}
html body main .section-mountain {
z-index: -1 !important;
}
/* §B · HERO : pas de montagne */
html body main .hero .section-mountain,
html body main .hero.hero--mosaic .section-mountain {
display: none !important;
}
/* §C · "À quels maux répondons-nous ?" — section--alt[data-mountain="sand"] */
html body main section.section--alt[data-mountain="sand"] .section-mountain {
display: none !important;
}
/* §D · "Héloïse Miermon — Thérapeute" — hide default, add line at bottom of photo */
html body main section[data-mountain="sage"] > .section-mountain {
display: none !important;
}
html body main section[data-mountain="sage"] .about__media {
position: relative;
}
html body main section[data-mountain="sage"] .about__media::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 56px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
z-index: 1;
}
/* §E · Blobs organiques bleu+brun sur les autres sections (Une pratique reconnue,
reviews, instagram, faq, affiliations). Couleurs douces sage + caramel. */
html body main section.section--alt:not([data-mountain]):not(.affiliations-band),
html body main section.section--bg:not([data-mountain]):not(.fixed-quote),
html body main section.affiliations-band {
position: relative;
}
html body main section.section--alt:not([data-mountain]):not(.affiliations-band)::before,
html body main section.section--bg:not([data-mountain]):not(.fixed-quote)::before,
html body main section.affiliations-band::before {
content: "";
position: absolute;
top: 10%;
right: -6%;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(44, 185, 198, 0.32) 0%, rgba(44, 185, 198, 0) 65%);
border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%;
pointer-events: none;
z-index: -1;
filter: blur(20px);
}
html body main section.section--alt:not([data-mountain]):not(.affiliations-band)::after,
html body main section.section--bg:not([data-mountain]):not(.fixed-quote)::after,
html body main section.affiliations-band::after {
content: "";
position: absolute;
bottom: 8%;
left: -4%;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(184, 134, 42, 0.30) 0%, rgba(184, 134, 42, 0) 65%);
border-radius: 50% 50% 60% 40% / 55% 45% 55% 45%;
pointer-events: none;
z-index: -1;
filter: blur(20px);
}
}
/* =====================================================================
PASS 70 — Retrait global de TOUS les halos colorés
- Couche #organic-blobs (PASS 66) entièrement masquée
- Halos SVG des montagnes (.section-mountain__halo)
- Pseudo-éléments décoratifs ajoutés en PASS 69 §E (blobs sage/caramel)
- Anciens halos radiaux ::before des sections (par sécurité)
Le gradient ambient #ambient-bg reste en place, c'est lui qui porte
l'ambiance chromatique du site.
===================================================================== */
html body #organic-blobs,
html body #organic-blobs .organic-blob,
html body main #organic-blobs,
html body main #organic-blobs .organic-blob {
display: none !important;
}
html body main .section-mountain__halo {
display: none !important;
opacity: 0 !important;
}
/* PASS 70 §B (ancien blocage) — supprimé : PASS 71 réintroduit des blobs
sur ces mêmes pseudo-éléments avec un design inspiré du preview vercel.
Si tu veux à nouveau couper les blobs, supprime PASS 71 plutôt qu'ajouter
un blocage ici. */
/* Garde-fou pour tous les anciens halos radial qui pourraient ressortir */
html body main > section:not(.fixed-quote)::before,
html body main > section:not(.fixed-quote)::after {
background: none !important;
}
/* =====================================================================
PASS 71 — Blobs organiques inspirés du preview vercel
Style : grands cercles asymétriques, couleurs CARAMEL (#F1C338) + SAGE
(#2CB9C6 = la touche bleutée du brand) avec alphas très basses (0.18-0.28)
et blur(40-60px) pour un rendu doux moderne. Posés en coin de section
via ::before/::after, derrière le contenu (z-index -1).
Desktop ≥1024px uniquement.
===================================================================== */
@media (min-width: 1024px) {
/* Active la position relative sur les sections décorées (sauf hero,
fixed-quote, process, cta-final qui ont leur propre identité). */
html body main > section.section--bg:not(.fixed-quote),
html body main > section.section--alt,
html body main > section.affiliations-band,
html body main > section.process,
html body main > section.cta-final {
position: relative;
overflow: visible;
}
/* §A · Force overflow visible sur les sections décorées pour ne pas
clipper les blobs qui débordent de leurs bords. */
html body main > section:nth-of-type(n):not(.fixed-quote):not(.hero):not(.process) {
overflow: visible !important;
}
/* Blob CARAMEL en haut à droite — spécificité alignée sur les anciens
overrides (5 classes via :nth-of-type + 4 :not) pour battre les rules
PASS 18 qui posaient display:none / background:none. */
html body main > section:nth-of-type(n):not(.fixed-quote):not(.cta-final):not(.hero):not(.process)::before,
html body main > section.affiliations-band::before,
html body main > section.process::before,
html body main > section.cta-final::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 8% !important;
right: -4% !important;
width: 520px !important;
height: 520px !important;
background: radial-gradient(circle, rgba(232, 181, 74, 0.75) 0%, rgba(232, 181, 74, 0.30) 35%, rgba(232, 181, 74, 0) 75%) !important;
border-radius: 58% 42% 50% 50% / 42% 58% 50% 50% !important;
pointer-events: none !important;
z-index: 0 !important;
filter: blur(15px) !important;
inset: auto !important;
margin: 0 !important;
opacity: 1 !important;
}
/* Blob SAGE (touche bleutée) en bas à gauche */
html body main > section:nth-of-type(n):not(.fixed-quote):not(.cta-final):not(.hero):not(.process)::after,
html body main > section.affiliations-band::after,
html body main > section.process::after,
html body main > section.cta-final::after {
content: "" !important;
display: block !important;
position: absolute !important;
bottom: 10% !important;
left: -4% !important;
width: 460px !important;
height: 460px !important;
background: radial-gradient(circle, rgba(44, 185, 198, 0.70) 0%, rgba(44, 185, 198, 0.28) 35%, rgba(44, 185, 198, 0) 75%) !important;
border-radius: 50% 50% 60% 40% / 55% 45% 55% 45% !important;
pointer-events: none !important;
z-index: 0 !important;
filter: blur(15px) !important;
inset: auto !important;
margin: 0 !important;
opacity: 1 !important;
}
/* Sections paires : on inverse les positions pour varier le rythme */
html body main > section:nth-of-type(even).section--bg:not(.fixed-quote)::before,
html body main > section:nth-of-type(even).section--alt::before,
html body main > section:nth-of-type(even).affiliations-band::before,
html body main > section:nth-of-type(even).cta-final::before {
right: auto;
left: -7%;
top: 12%;
}
html body main > section:nth-of-type(even).section--bg:not(.fixed-quote)::after,
html body main > section:nth-of-type(even).section--alt::after,
html body main > section:nth-of-type(even).affiliations-band::after,
html body main > section:nth-of-type(even).cta-final::after {
left: auto;
right: -4%;
bottom: 14%;
}
}
/* =====================================================================
PASS 72 — Retrait des blobs PASS 71 (jugés moches)
Désactive les pseudo-éléments décoratifs ::before / ::after sur toutes
les sections. Le gradient ambient #ambient-bg reste seul à porter
l'ambiance chromatique.
===================================================================== */
@media (min-width: 1024px) {
html body main > section:nth-of-type(n):not(.fixed-quote):not(.cta-final):not(.hero):not(.process)::before,
html body main > section:nth-of-type(n):not(.fixed-quote):not(.cta-final):not(.hero):not(.process)::after,
html body main > section.affiliations-band::before,
html body main > section.affiliations-band::after,
html body main > section.process::before,
html body main > section.process::after,
html body main > section.cta-final::before,
html body main > section.cta-final::after {
content: none !important;
display: none !important;
background: none !important;
}
}
/* =====================================================================
PASS 73 — Desktop : onelines strictement en arrière-plan derrière les
cartes + ré-activation de la montagne animée sur la section "Héloïse
Miermon" + ajout de ronds organiques doux sur les sections sans oneline.
---------------------------------------------------------------------
§A · Stacking context propre :
- section[data-mountain] → position:relative + isolation:isolate
- .section-mountain → z-index:0 (inside section, sous tout
ce qui est dans .container)
- .container, grids, .section-header, .about__inner, actions
→ z-index:2 explicite pour passer DEVANT la ligne.
§B · "Une même technique…" (#soins, warm) :
rien à faire de plus — .container z-index:1 existe déjà, mais on
renforce explicitement pour les enfants (services-grid + swiper).
§C · "Chiffres clés" (warm) : idem, on renforce stats-grid.
§D · "Héloïse Miermon — Thérapeute" (sage) :
- réactive le .section-mountain SVG (était display:none en PASS 69)
- supprime le pseudo statique .about__media::after (qui remplaçait
la ligne mais n'était pas animé).
- la ligne SVG bénéficie de la GSAP ScrollTrigger déjà câblée dans
animations.js mountainShapes(), donc elle se dessine au scroll.
§E · Ronds organiques sur sections sans oneline (À quels maux, Une
pratique reconnue, Avis, Instagram, FAQ, Affiliations, CTA finale) :
- 2 ronds par section : sage (haut-droite) + caramel (bas-gauche)
- tailles ~ 260-320px, alphas faibles (0.16-0.22), blur 32-40px
- border-radius légèrement asymétriques pour un côté organique
- z-index:0 (derrière le contenu), pointer-events:none
- alternance des positions selon parité nth-of-type
- surcharge avec une spécificité ≥ PASS 72 (sélecteur identique +
déclarations qui ré-allument content/display).
===================================================================== */
@media (min-width: 1024px) {
/* §A · Mountains derrière les cartes */
html body main > section[data-mountain] {
position: relative !important;
isolation: isolate;
}
html body main > section[data-mountain] > .section-mountain {
z-index: 0 !important;
pointer-events: none !important;
}
html body main > section[data-mountain] > .container,
html body main > section[data-mountain] .section-header,
html body main > section[data-mountain] .services-grid,
html body main > section[data-mountain] .stats-grid,
html body main > section[data-mountain] .maux-list,
html body main > section[data-mountain] .about__inner,
html body main > section[data-mountain] .actions,
html body main > section[data-mountain] .section-cta {
position: relative;
z-index: 2 !important;
}
/* Les cartes elles-mêmes : on s'assure que leur fond couvre la ligne */
html body main > section[data-mountain] .service-card,
html body main > section[data-mountain] .stat {
position: relative;
z-index: 2;
}
/* §D · Réactivation de la ligne SVG animée sur Héloïse Miermon */
html body main section[data-mountain="sage"] > .section-mountain {
display: block !important;
}
html body main section[data-mountain="sage"] .about__media::after {
content: none !important;
display: none !important;
background: none !important;
}
/* §E · Ronds organiques doux — sections sans oneline visible.
Spécificité alignée sur PASS 72 (5 classes + :not chains) pour
surcharger ses content:none / display:none / background:none. */
html body main > section:nth-of-type(n).section--alt:not([data-mountain="warm"]):not([data-mountain="sage"]):not(.fixed-quote):not(.hero):not(.process),
html body main > section:nth-of-type(n).section--bg:not([data-mountain="warm"]):not([data-mountain="sage"]):not(.fixed-quote):not(.hero):not(.process),
html body main > section.affiliations-band,
html body main > section.cta-final {
position: relative;
isolation: isolate;
overflow: visible;
}
/* ::before — rond SAGE en haut à droite */
html body main > section:nth-of-type(n).section--alt:not([data-mountain="warm"]):not([data-mountain="sage"]):not(.fixed-quote):not(.hero):not(.process)::before,
html body main > section:nth-of-type(n).section--bg:not([data-mountain="warm"]):not([data-mountain="sage"]):not(.fixed-quote):not(.hero):not(.process)::before,
html body main > section.affiliations-band::before,
html body main > section.cta-final::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 12% !important;
right: -5% !important;
width: 320px !important;
height: 320px !important;
background: radial-gradient(circle at 45% 45%,
rgba(44, 185, 198, 0.22) 0%,
rgba(44, 185, 198, 0.10) 40%,
rgba(44, 185, 198, 0) 72%) !important;
border-radius: 62% 38% 55% 45% / 48% 60% 40% 52% !important;
filter: blur(34px) !important;
pointer-events: none !important;
z-index: 0 !important;
inset: auto !important;
margin: 0 !important;
opacity: 1 !important;
}
/* ::after — rond CARAMEL en bas à gauche */
html body main > section:nth-of-type(n).section--alt:not([data-mountain="warm"]):not([data-mountain="sage"]):not(.fixed-quote):not(.hero):not(.process)::after,
html body main > section:nth-of-type(n).section--bg:not([data-mountain="warm"]):not([data-mountain="sage"]):not(.fixed-quote):not(.hero):not(.process)::after,
html body main > section.affiliations-band::after,
html body main > section.cta-final::after {
content: "" !important;
display: block !important;
position: absolute !important;
bottom: 10% !important;
left: -4% !important;
width: 130px !important;
height: 130px !important;
background: radial-gradient(circle at 55% 50%,
rgba(232, 181, 74, 0.18) 0%,
rgba(232, 181, 74, 0.08) 42%,
rgba(232, 181, 74, 0) 72%) !important;
border-radius: 50% 50% 60% 40% / 58% 42% 55% 45% !important;
filter: blur(28px) !important;
pointer-events: none !important;
z-index: 0 !important;
inset: auto !important;
margin: 0 !important;
opacity: 1 !important;
}
/* Alternance de placement — sections paires : on swap les côtés pour
éviter une diagonale visuelle trop régulière. */
html body main > section:nth-of-type(even).section--alt:not([data-mountain="warm"]):not([data-mountain="sage"])::before,
html body main > section:nth-of-type(even).section--bg:not([data-mountain="warm"]):not([data-mountain="sage"])::before,
html body main > section:nth-of-type(even).affiliations-band::before,
html body main > section:nth-of-type(even).cta-final::before {
top: 14% !important;
right: auto !important;
left: -5% !important;
}
html body main > section:nth-of-type(even).section--alt:not([data-mountain="warm"]):not([data-mountain="sage"])::after,
html body main > section:nth-of-type(even).section--bg:not([data-mountain="warm"]):not([data-mountain="sage"])::after,
html body main > section:nth-of-type(even).affiliations-band::after,
html body main > section:nth-of-type(even).cta-final::after {
bottom: 12% !important;
left: auto !important;
right: -4% !important;
}
/* Garde-fou : le contenu des sections à ronds reste au-dessus */
html body main > section.section--alt > .container,
html body main > section.section--bg > .container,
html body main > section.affiliations-band > .container,
html body main > section.cta-final > .container {
position: relative;
z-index: 2;
}
}
/* =====================================================================
PASS 74 — Force réelle : oneline EN ARRIÈRE-PLAN derrière les cartes.
---------------------------------------------------------------------
Problème PASS 73 : `position: relative` n'était pas !important, donc
les grids (.services-grid, .stats-grid, .maux-list) ignoraient le
z-index appliqué (les transforms swiper créaient en plus leurs propres
stacking contexts à z-index auto, qui peuvent écraser le z-index 0
de la ligne).
Solution :
• La ligne descend à z-index: -1 dans le stacking context de la
section (isolation:isolate confine, elle ne s'échappe pas vers
l'ambient-bg).
• Tous les enfants directs de .container + les grids + le swiper-
wrapper reçoivent position: relative !important et z-index élevé.
Desktop ≥ 1024px uniquement.
===================================================================== */
@media (min-width: 1024px) {
/* Section avec oneline = stacking context fermé */
html body main > section[data-mountain] {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
}
/* La ligne plonge derrière, mais reste enfermée par isolation */
html body main > section[data-mountain] > svg.section-mountain {
z-index: -1 !important;
pointer-events: none !important;
}
/* Le conteneur du contenu remonte explicitement au-dessus */
html body main > section[data-mountain] > .container {
position: relative !important;
z-index: 5 !important;
}
/* Tous les enfants directs du container : position + z-index forcés */
html body main > section[data-mountain] > .container > * {
position: relative;
z-index: 5;
}
/* Grids et swiper : ils ont parfois transform/inline qui interfèrent */
html body main > section[data-mountain] .services-grid,
html body main > section[data-mountain] .stats-grid,
html body main > section[data-mountain] .maux-list,
html body main > section[data-mountain] .about__inner {
position: relative !important;
z-index: 5 !important;
}
html body main > section[data-mountain] .swiper,
html body main > section[data-mountain] .swiper-wrapper,
html body main > section[data-mountain] .swiper-slide {
z-index: 5 !important;
}
/* Cards : fond opaque (déjà var(--color-surface) blanc) + z-index propre.
Ainsi la ligne passe DERRIÈRE les cartes (couvertes par leur fond)
et reste visible dans les interstices entre les cartes. */
html body main > section[data-mountain] .service-card,
html body main > section[data-mountain] .stat,
html body main > section[data-mountain] .maux-item {
position: relative;
z-index: 6;
background: var(--color-surface);
}
/* Sur la section Héloïse (about) : pas de cartes, le portrait passe
devant la ligne grâce à son media. */
html body main > section[data-mountain="sage"] .about__media,
html body main > section[data-mountain="sage"] .about__text {
position: relative;
z-index: 5;
}
}
/* =====================================================================
PASS 75 — Repositionner la ligne pour qu'elle TRAVERSE les cartes.
---------------------------------------------------------------------
Avant : warm était en bas (bottom: 6%), sage en bas, sand en haut.
Résultat : la ligne ne croisait pas les cards (cards centrées dans
la section). L'utilisateur veut « superposé avec les cartes » =
la ligne doit passer à travers la zone des cartes, derrière elles.
On centre verticalement la ligne dans la section, peu importe la
variante. Desktop ≥ 1024px uniquement.
===================================================================== */
@media (min-width: 1024px) {
html body main > section[data-mountain] > svg.section-mountain,
html body main > section[data-mountain] > .section-mountain {
position: absolute !important;
top: 35% !important;
bottom: auto !important;
left: 0 !important;
right: auto !important;
transform: none !important;
}
/* Override des positions par variante PASS 69 §A — sans transform,
simples valeurs top:X% qui placent le haut de la SVG box.
SVG h=504, sections h~1100-1300, on cible la zone des cards :
warm (services + chiffres clés) → top 35 % (cards milieu-bas)
sand (À quels maux, liste icons) → top 25 %
sage (Héloïse texte+portrait) → top 30 % */
/* "Une même technique" (#soins) — cards centrées dans la section */
html body main #soins .section-mountain--warm {
position: absolute !important;
top: 28% !important;
bottom: auto !important;
transform: none !important;
}
/* "Chiffres clés" (warm, mais stats grid plus haute dans la section) */
html body main section[data-mountain="warm"]:not(#soins) .section-mountain--warm {
position: absolute !important;
top: 12% !important;
bottom: auto !important;
transform: none !important;
}
/* Sand — actuellement caché par PASS 69 §C, on conserve */
html body main .section-mountain--sand {
position: absolute !important;
top: 25% !important;
bottom: auto !important;
transform: none !important;
}
/* Sage — Héloïse, portrait+texte */
html body main .section-mountain--sage {
position: absolute !important;
top: 22% !important;
bottom: auto !important;
transform: none !important;
}
}
/* =====================================================================
PASS 77 — Section « À quels maux répondons-nous ? » :
- retire le fond opaque ajouté par PASS 74 sur .maux-item
(il bloquait la lecture de l'ambient-bg derrière)
- enrichit l'effet de hover : léger lift + tint caramel + icône
qui s'anime (couleur + scale subtil)
===================================================================== */
html body main section[data-mountain="sand"] .maux-item,
html body main .maux-item {
background: transparent !important;
transition:
background-color 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 280ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
cursor: default;
}
/* L'icône phosphor à l'intérieur — animation indépendante */
html body main .maux-item i {
transition:
color 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
transform-origin: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Hover — tint caramel léger + lift + ombre douce + icône qui « réagit » */
html body main .maux-item:hover {
background: linear-gradient(135deg,
rgba(232, 181, 74, 0.10) 0%,
rgba(232, 181, 74, 0.04) 60%,
rgba(44, 185, 198, 0.06) 100%) !important;
transform: translateY(-2px);
box-shadow: 0 14px 30px -22px rgba(46,41,34,0.30),
0 4px 10px -8px rgba(232, 181, 74,0.25);
border-color: rgba(232, 181, 74, 0.35);
}
html body main .maux-item:hover i {
color: #B8862A;
transform: scale(1.18) rotate(-3deg);
}
/* Focus clavier — accessibilité */
html body main .maux-item:focus-within {
background: rgba(232, 181, 74, 0.08) !important;
outline: 2px solid rgba(232, 181, 74, 0.45);
outline-offset: -2px;
}
/* =====================================================================
PASS 78 — Cards témoignage (.review-card) plus compactes + bouton
« En savoir plus » plus visible (pilule caramel discrète, avec icône).
===================================================================== */
html body main .review-card {
padding: 22px 22px 18px !important;
display: flex !important;
flex-direction: column;
gap: 10px;
}
/* Head plus serré, avatar légèrement plus petit */
html body main .review-card__head {
margin-bottom: 6px !important;
gap: 10px !important;
}
html body main .review-card__avatar {
width: 38px !important;
height: 38px !important;
font-size: 0.98rem !important;
}
html body main .review-card__name { font-size: 0.95rem; }
html body main .review-card__stars { font-size: 0.85rem; letter-spacing: 1px; }
/* Texte — clamp à 3 lignes (au lieu de 4), interligne resserré,
marge-bas pour aérer avec le bouton. */
/* IMPORTANT : la spécificité doit battre la règle ligne 9376
`html body main .reviews-swiper.swiper .review-card__text` qui annulait
le line-clamp. On reprend le même chemin de sélecteur.
Le `:not(.is-expanded)` permet au bouton « En savoir plus » d'ouvrir
le texte intégral en retirant le clamp dès que .is-expanded est posé. */
html body main .reviews-swiper.swiper .review-card:not(.is-expanded) .review-card__text,
html body main .review-card:not(.is-expanded) .review-card__text {
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 0.92rem !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Quand .is-expanded est posé sur la card, on retire le clamp avec
la MÊME spécificité (+1 classe pour battre le clamp ci-dessus). */
html body main .reviews-swiper.swiper .review-card.is-expanded .review-card__text,
html body main .review-card.is-expanded .review-card__text {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
display: block !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
font-size: 0.92rem !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Ré-active le bouton « En savoir plus » que la même règle masquait */
html body main .reviews-swiper.swiper .review-card__more {
display: inline-flex !important;
}
/* Bouton « En savoir plus » — pilule caramel subtile, alignée à gauche,
avec icône flèche qui glisse au hover. Le label est piloté par
::before (Voir moins / En savoir plus) injecté en JS. */
html body main .review-card__more {
align-self: flex-start;
margin-top: 4px !important;
padding: 6px 14px !important;
background: rgba(232, 181, 74, 0.08) !important;
border: 1px solid rgba(232, 181, 74, 0.30) !important;
border-radius: 999px !important;
color: #B8862A !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
text-decoration: none !important;
letter-spacing: 0.01em;
display: inline-flex !important;
align-items: center;
gap: 8px;
transition:
background 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
html body main .review-card__more::after {
content: "→";
display: inline-block;
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
transform: translateX(0);
font-size: 0.95rem;
}
html body main .review-card.is-expanded .review-card__more::after {
transform: rotate(90deg);
}
html body main .review-card__more:hover,
html body main .review-card__more:focus-visible {
background: rgba(232, 181, 74, 0.18) !important;
border-color: rgba(232, 181, 74, 0.55) !important;
color: #8E5B27 !important;
transform: translateY(-1px);
outline: none;
}
html body main .review-card__more:hover::after {
transform: translateX(3px);
}
html body main .review-card.is-expanded .review-card__more:hover::after {
transform: rotate(90deg) translateX(3px);
}
/* La source Google passe sous le bouton sans grand espace */
html body main .review-card__src {
margin-top: 8px !important;
font-size: 0.75rem !important;
}
/* =====================================================================
PASS 80 — Mots en italique des hero banners : caramel → bleu teal.
La palette brand contient déjà --color-primary (#2CB9C6) et
--color-primary-strong (#2CB9C6). On les utilise pour remplacer
--color-accent (#F1C338) sur les des titres hero.
---------------------------------------------------------------------
§A · Hero sur fond clair (carte mosaic, glassmorphisme)
→ teal profond #2CB9C6 pour le contraste sur fond crème
§B · Hero sur fond image sombre (overlay scrim noir)
→ bleu clair lumineux #2CB9C6 / fallback secondary
===================================================================== */
/* §A · Hero light card (mosaic, qui-suis-je, etc.) */
html body main .hero .hero__title em,
html body main .hero.hero--mosaic .hero__mosaic-card .hero__title em,
html body main .hero--home .hero__mosaic-card .hero__title em,
html body .hero__mosaic-card .hero__title em {
color: var(--color-primary-strong, #2CB9C6) !important;
font-style: italic !important;
}
/* §B · Hero immersif avec image plein cadre + scrim sombre
(les .hero--home / .hero[style*="--hero-bg"] où le texte est blanc) */
html body main .hero--home .hero__title em,
html body main .hero[style*="--hero-bg"] .hero__title em {
color: var(--color-secondary, #2CB9C6) !important;
}
/* §C · Override autres hero-like (reservation, pages internes) :
on garde le teal profond comme accent unifié. */
html body main .reservation-hero__title em {
color: var(--color-primary-strong, #2CB9C6) !important;
}
/* =====================================================================
PASS 81 — Overlay accessibilité sur .process__bg
La section « Comment se passe une séance » utilise désormais
cabinet-soin-1.png en background. On ajoute un overlay discret
(radial + linear) pour garantir la lisibilité du texte par-dessus
sans assombrir l'image au point de la dénaturer.
- Le overlay est posé en ::before sur .process__bg (pour ne pas casser
l'éventuel ::after déjà neutralisé en PASS 67).
- Contraste cible WCAG AA pour le texte (foncé sur clair / clair sur
foncé selon la zone).
- pointer-events:none, aria invisible.
===================================================================== */
html body main .process .process__bg,
html body .process .process__bg {
position: absolute;
isolation: isolate;
}
html body main .process .process__bg::before,
html body .process .process__bg::before {
content: "" !important;
position: absolute;
inset: 0;
background:
/* Zone centre / haut : très léger assombrissement pour la lisibilité du h2 */
radial-gradient(ellipse 80% 60% at 50% 30%,
rgba(46,41,34, 0.32) 0%,
rgba(46,41,34, 0.18) 45%,
rgba(46,41,34, 0.10) 70%,
rgba(46,41,34, 0.05) 100%),
/* Léger scrim global pour aider le contraste sans étouffer la photo */
linear-gradient(180deg,
rgba(46,41,34, 0.10) 0%,
rgba(46,41,34, 0.04) 50%,
rgba(46,41,34, 0.12) 100%);
pointer-events: none;
z-index: 1;
}
/* Le contenu de la section reste au-dessus de l'overlay */
html body main .process .process__inner,
html body .process .process__inner {
position: relative;
z-index: 2;
}
@media (max-width: 768px) {
/* Sur mobile, l'image est plus serrée et le texte plus dense :
on renforce légèrement l'overlay pour rester confortable. */
html body main .process .process__bg::before,
html body .process .process__bg::before {
background:
radial-gradient(ellipse 100% 70% at 50% 35%,
rgba(46,41,34, 0.42) 0%,
rgba(46,41,34, 0.26) 50%,
rgba(46,41,34, 0.16) 100%),
linear-gradient(180deg,
rgba(46,41,34, 0.16) 0%,
rgba(46,41,34, 0.08) 50%,
rgba(46,41,34, 0.18) 100%);
}
}
/* =====================================================================
PASS 88 — HERO BANNERS + FIXED-QUOTE en CADRE arrondi détaché du
bord de l'écran.
---------------------------------------------------------------------
- margin-inline pour respirer (clamp 12-24px)
- border-radius doux (clamp 18-28px)
- overflow hidden pour que l'image cropée respecte le radius
- L'effet est appliqué desktop + tablet. Sur mobile on garde un
micro-radius / micro-margin pour ne pas étouffer le contenu.
===================================================================== */
/* =====================================================================
PASS 93 — Section « Une pratique reconnue » refonte V2.
Tout est contenu dans un PANNEAU cream rounded avec shadow soft pour
donner l'effet visuel de la maquette (boîte distincte qui se détache
de la section--alt). Affiliations (5 mini-cards icon + titre + sub)
sur une ligne, diplômes (5 cards thumbnail + caption + CTA) sur une
autre. Loupe ronde teal toujours visible sur les diplômes.
===================================================================== */
/* ---------- Panneau cream rounded conteneur (style maquette) ---------- */
.section--alt:has(> .container > .recognition-grid),
.section--alt:has(.recognition-grid) {
position: relative;
}
.recognition-grid,
.recognition-diplomas {
position: relative;
}
/* Wrapper visuel : on transforme les deux grilles + le section-cta en un
bloc unique enveloppé via un padding + bg sur leur parent immédiat. */
.section--alt .container > .recognition-grid {
background: linear-gradient(180deg, var(--color-surface, #FFF7DA) 0%, var(--color-bg, #FCE9AF) 100%);
border: 1px solid var(--color-border, rgba(44, 185, 198, 0.28));
border-radius: 26px 26px 0 0;
padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px) 18px;
margin-top: 32px;
border-bottom: none;
box-shadow: 0 22px 48px -32px rgba(40,33,20, 0.22), 0 4px 14px -8px rgba(40,33,20, 0.08);
}
.section--alt .container > .recognition-diplomas {
background: linear-gradient(180deg, var(--color-bg, #FCE9AF) 0%, var(--color-bg-alt, #F7DA85) 100%);
border-left: 1px solid var(--color-border, rgba(44, 185, 198, 0.28));
border-right: 1px solid var(--color-border, rgba(44, 185, 198, 0.28));
padding: 24px clamp(20px, 3vw, 36px) clamp(28px, 4vw, 44px);
margin-top: 0;
position: relative;
}
.section--alt .container > .recognition-diplomas::before {
content: ""; position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: calc(100% - 32px); height: 1px;
background: linear-gradient(90deg, transparent, var(--color-border, rgba(44, 185, 198, 0.28)) 20%, var(--color-border, rgba(44, 185, 198, 0.28)) 80%, transparent);
}
.section--alt .container > .section-cta:has(+ * .recognition-dipl),
.section--alt .container > .recognition-diplomas + .section-cta {
background: linear-gradient(180deg, var(--color-bg-alt, #F7DA85) 0%, var(--color-surface, #FFF7DA) 100%);
border: 1px solid var(--color-border, rgba(44, 185, 198, 0.28));
border-top: none;
border-radius: 0 0 26px 26px;
padding: 24px clamp(20px, 3vw, 36px) 28px;
margin-top: 0 !important;
box-shadow: 0 22px 48px -32px rgba(40,33,20, 0.18);
}
/* ---------- Affiliations (ligne 1) ---------- */
.recognition-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
/* Adapt grid to number of cards (4 cards = 4 cols, 3 cards = 3 cols) */
.recognition-grid:has(> .recognition-aff:nth-child(4):last-child) {
grid-template-columns: repeat(4, 1fr);
}
.recognition-grid:has(> .recognition-aff:nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
.recognition-grid:has(> .recognition-aff:nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
max-width: 720px;
margin-inline: auto;
}
@media (max-width: 1024px) {
.recognition-grid,
.recognition-grid:has(> .recognition-aff:nth-child(4):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.recognition-grid,
.recognition-grid:has(> .recognition-aff:nth-child(4):last-child),
.recognition-grid:has(> .recognition-aff:nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.recognition-grid,
.recognition-grid:has(> .recognition-aff:nth-child(4):last-child),
.recognition-grid:has(> .recognition-aff:nth-child(3):last-child),
.recognition-grid:has(> .recognition-aff:nth-child(2):last-child) { grid-template-columns: 1fr; }
}
.recognition-aff {
background: var(--color-surface, #FFF7DA);
border: 1px solid var(--color-border, rgba(44, 185, 198, 0.28));
border-radius: 18px;
padding: 22px 14px 20px;
text-align: center;
transition: transform 0.3s var(--ease, cubic-bezier(0.22,0.61,0.36,1)),
border-color 0.3s var(--ease, cubic-bezier(0.22,0.61,0.36,1)),
box-shadow 0.3s var(--ease, cubic-bezier(0.22,0.61,0.36,1));
}
.recognition-aff:hover {
transform: translateY(-3px);
border-color: rgba(116,182,178, 0.55);
box-shadow: 0 14px 28px -18px rgba(46,110,114, 0.22);
}
.recognition-aff__ic {
width: 48px; height: 48px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255, 0.8), transparent 60%),
linear-gradient(135deg, rgba(62,156,162, 0.15), rgba(116,182,178, 0.28));
color: var(--color-primary-strong, #2CB9C6);
display: grid; place-items: center;
font-size: 22px;
margin: 0 auto 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255, 0.6), 0 6px 14px -8px rgba(46,110,114, 0.30);
}
.recognition-aff__ic img {
width: 26px; height: 26px;
object-fit: contain;
}
.recognition-aff__t {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.92rem;
color: var(--color-text, #2E2922);
margin-bottom: 5px;
line-height: 1.2;
}
.recognition-aff__s {
font-size: 0.78rem;
color: var(--color-text-muted, #6E6357);
line-height: 1.4;
}
/* ---------- Diplômes (ligne 2) ---------- */
.recognition-diplomas {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
justify-content: center;
}
/* Desktop : adapte aux nb de diplômes, max 240px par carte, centré */
@media (min-width: 1025px) {
.recognition-diplomas:has(> .recognition-dipl:nth-child(4):last-child),
.recognition-diplomas:has(> .recognition-dipl:nth-child(3):last-child),
.recognition-diplomas:has(> .recognition-dipl:nth-child(2):last-child) {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.recognition-diplomas:has(> .recognition-dipl:nth-child(4):last-child) > .recognition-dipl,
.recognition-diplomas:has(> .recognition-dipl:nth-child(3):last-child) > .recognition-dipl,
.recognition-diplomas:has(> .recognition-dipl:nth-child(2):last-child) > .recognition-dipl {
flex: 0 1 220px;
max-width: 240px;
}
}
@media (max-width: 1024px) {
.recognition-diplomas {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
padding: 24px 16px clamp(28px, 4vw, 44px) 16px !important;
gap: 12px;
scrollbar-width: none;
justify-content: flex-start;
}
.recognition-diplomas::-webkit-scrollbar { display: none; }
.recognition-diplomas > .recognition-dipl {
flex: 0 0 calc(50vw - 32px);
max-width: 280px;
scroll-snap-align: center;
}
}
@media (max-width: 640px) {
.recognition-diplomas > .recognition-dipl {
flex: 0 0 calc(100vw - 80px);
max-width: 320px;
}
}
.recognition-dipl {
display: flex; flex-direction: column;
background: var(--color-surface, #FFF7DA);
border: 1px solid var(--color-border, rgba(44, 185, 198, 0.28));
border-radius: 18px;
overflow: hidden;
cursor: zoom-in;
text-decoration: none;
color: inherit;
padding: 0;
font-family: inherit;
text-align: center;
transition: transform 0.3s var(--ease, cubic-bezier(0.22,0.61,0.36,1)),
box-shadow 0.3s var(--ease, cubic-bezier(0.22,0.61,0.36,1));
}
.recognition-dipl:hover {
transform: translateY(-5px);
box-shadow: 0 24px 48px -22px rgba(40,33,20, 0.32), 0 4px 12px -6px rgba(40,33,20, 0.10);
}
.recognition-dipl__thumb {
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, var(--color-bg-alt, #F7DA85), var(--color-surface, #FFF7DA));
border-bottom: 1px solid var(--color-border, rgba(44, 185, 198, 0.28));
overflow: hidden;
}
.recognition-dipl__thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease, cubic-bezier(0.22,0.61,0.36,1));
}
.recognition-dipl:hover .recognition-dipl__thumb img {
transform: scale(1.05);
}
.recognition-dipl__zoom {
position: absolute; top: 12px; right: 12px;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--color-primary-strong, #2CB9C6);
color: #fff;
display: grid; place-items: center;
font-size: 17px;
box-shadow: 0 10px 22px -8px rgba(46,110,114, 0.55), inset 0 1px 0 rgba(255,255,255, 0.18);
z-index: 2;
transition: transform 0.3s var(--ease, cubic-bezier(0.22,0.61,0.36,1)),
background 0.3s var(--ease, cubic-bezier(0.22,0.61,0.36,1));
}
.recognition-dipl:hover .recognition-dipl__zoom {
background: var(--color-accent, #F1C338);
transform: scale(1.08) rotate(-4deg);
}
.recognition-dipl__caption {
padding: 14px 12px 8px;
}
.recognition-dipl__caption strong {
display: block;
font-weight: 600;
font-size: 0.88rem;
color: var(--color-text, #2E2922);
line-height: 1.2;
}
.recognition-dipl__caption span {
display: block;
font-family: var(--font-heading);
font-style: italic;
color: var(--color-accent, #F1C338);
font-size: 0.95rem;
margin-top: 3px;
}
.recognition-dipl__action {
display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 11px 12px;
background: linear-gradient(180deg, var(--color-bg, #FCE9AF), var(--color-bg-alt, #F7DA85));
color: var(--color-primary-strong, #2CB9C6);
font-size: 0.8rem;
font-weight: 600;
border-top: 1px solid var(--color-border, rgba(44, 185, 198, 0.28));
transition: background 0.25s var(--ease, cubic-bezier(0.22,0.61,0.36,1)),
color 0.25s var(--ease, cubic-bezier(0.22,0.61,0.36,1));
}
.recognition-dipl:hover .recognition-dipl__action {
background: linear-gradient(180deg, var(--color-primary-strong, #2CB9C6), #235A5E);
color: #fff;
}
/* =====================================================================
PASS 92 — .legal-flag déborde du container mobile.
Le span en display:inline avec padding 4 8 + border-left + texte
long créait une boîte plus large que le parent (le wrap inline ne
respecte pas le max-width du parent). On passe en inline-block +
max-width 100% + word-break.
===================================================================== */
.legal-flag {
display: inline-block !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
hyphens: auto !important;
vertical-align: top;
}
/* Sur les paragraphes texte-aligné centre qui contiennent un legal-flag
plus large que voulu, on garde le centrage propre. */
.reviews-band p:has(> .legal-flag),
.reviews-band__body p:has(> .legal-flag) {
text-align: center;
padding-inline: 4px;
}
/* =====================================================================
PASS 91 — Mobile : touch-swipe natif sur TOUS les carrousels.
Sans Swiper actif, on s'appuie sur scroll-snap horizontal + overflow-x
touch pour permettre de glisser les cartes au doigt, en plus des
flèches directionnelles qui restent fonctionnelles.
===================================================================== */
@media (max-width: 768px) {
/* Carrousels : conteneur horizontal scrollable au touch */
html body main .services-swiper.swiper,
html body main .reviews-swiper.swiper,
html body main .reviews-grid.swiper,
html body main .why-swiper.swiper,
html body main .why-grid.swiper,
html body main .diplomas-swiper.swiper,
html body main .diplomas-strip.swiper {
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
scroll-behavior: smooth !important;
/* Padding latéral pour qu'on voie un peu la carte suivante */
padding: 4px 16px 18px !important;
margin-inline: -16px !important;
/* Touch action explicite : autorise pan-x, bloque pan-y vertical */
touch-action: pan-x !important;
}
html body main .services-swiper.swiper::-webkit-scrollbar,
html body main .reviews-swiper.swiper::-webkit-scrollbar,
html body main .why-swiper.swiper::-webkit-scrollbar,
html body main .why-grid.swiper::-webkit-scrollbar,
html body main .diplomas-swiper.swiper::-webkit-scrollbar,
html body main .diplomas-strip.swiper::-webkit-scrollbar {
display: none !important;
height: 0 !important;
width: 0 !important;
}
/* Wrapper : flex row aligné, pas de transform Swiper résiduel */
html body main .services-swiper.swiper > .swiper-wrapper,
html body main .reviews-swiper.swiper > .swiper-wrapper,
html body main .reviews-grid.swiper > .swiper-wrapper,
html body main .why-swiper.swiper > .swiper-wrapper,
html body main .why-grid.swiper > .swiper-wrapper,
html body main .diplomas-swiper.swiper > .swiper-wrapper,
html body main .diplomas-strip.swiper > .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 14px !important;
width: max-content !important;
transform: none !important;
align-items: stretch !important;
}
/* Slides : largeur fixe + snap centré */
html body main .services-swiper.swiper > .swiper-wrapper > .swiper-slide,
html body main .reviews-swiper.swiper > .swiper-wrapper > .swiper-slide,
html body main .reviews-grid.swiper > .swiper-wrapper > .swiper-slide,
html body main .why-swiper.swiper > .swiper-wrapper > .swiper-slide,
html body main .why-grid.swiper > .swiper-wrapper > .swiper-slide,
html body main .diplomas-swiper.swiper > .swiper-wrapper > .swiper-slide,
html body main .diplomas-strip.swiper > .swiper-wrapper > .swiper-slide {
flex: 0 0 calc(100vw - 64px) !important;
width: calc(100vw - 64px) !important;
max-width: 360px !important;
scroll-snap-align: center !important;
scroll-snap-stop: always !important;
transform: none !important;
margin: 0 !important;
height: auto !important;
}
/* Les diplomas-strip__item étant plus petits visuels, on les rétrécit */
html body main .diplomas-strip.swiper > .swiper-wrapper > .diplomas-strip__item.swiper-slide {
flex: 0 0 76% !important;
width: 76% !important;
max-width: 280px !important;
}
}
/* =====================================================================
PASS 90 — Footer en CADRE glassmorphisme assorti au header.
Reprend exactement les tokens visuels du header (PASS 13 ligne 2505) :
- margin 14px du bord (cadre flottant comme le header)
- border-radius 22px
- background crème très translucide
- backdrop-filter blur 26px + saturate
- bordure claire + reflets intérieurs
===================================================================== */
html body .footer,
html body footer.footer {
position: relative;
margin: 14px !important;
border-radius: 22px !important;
background: rgba(252,245,232, 0.38) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(26px) saturate(1.75);
backdrop-filter: blur(26px) saturate(1.75);
border: 1px solid rgba(255,255,255, 0.55) !important;
box-shadow:
0 22px 48px -24px rgba(46,41,34, 0.38),
0 6px 14px -6px rgba(46,41,34, 0.14),
inset 0 1px 0 rgba(255,255,255, 0.65),
inset 0 -1px 0 rgba(255,255,255, 0.18) !important;
overflow: hidden !important;
}
/* Padding intérieur ajusté pour respirer dans le cadre arrondi */
html body .footer {
padding-block: 60px 32px !important;
padding-inline: clamp(20px, 4vw, 48px) !important;
}
/* La barre de copyright bottom reste discrète, plus claire */
html body .footer .footer__bottom {
border-top-color: rgba(44, 185, 198, 0.10) !important;
}
@media (max-width: 768px) {
html body .footer,
html body footer.footer {
margin: 10px !important;
border-radius: 18px !important;
}
html body .footer {
padding-block: 44px 24px !important;
padding-inline: 20px !important;
}
}
/* =====================================================================
PASS 89 — HERO MOBILE = STACKED CARD (variante V3 maquette).
La logique est portée par animations.js → setupHeroMobileStackedCard()
qui injecte + force les inline styles uniquement
sur viewport ≤ 768 px (cleanup au resize si desktop).
Ici on garde uniquement les pseudo-éléments (handle + gradient overlay)
qui ne peuvent pas être posés en inline.
===================================================================== */
@media (max-width: 768px) {
/* Layout simple : flex column avec gap. Pas d'overlap, pas de handle,
pas de pseudos. Image + card empilées proprement avec 12 px d'espace. */
html body main section.hero.hero--mosaic[data-stacked],
html body section.hero.hero--mosaic[data-stacked] {
background-image: none !important;
background-color: transparent !important;
padding: 0 !important;
padding-block: 0 !important;
padding-inline: 0 !important;
margin: 12px !important;
border-radius: 0 !important;
overflow: visible !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
html body main section.hero.hero--mosaic[data-stacked] > .hero__photo,
html body section.hero.hero--mosaic[data-stacked] > .hero__photo {
display: block !important;
width: 100% !important;
height: 42vh !important;
min-height: 280px !important;
max-height: 400px !important;
aspect-ratio: auto !important;
object-fit: cover !important;
/* Cadrage réglable page par page via --hero-focus posé en inline sur la
section .hero (ex. périnatalité : recentrer sur la mère et le bébé, qui
sont à gauche de la photo et se faisaient couper par le recadrage).
Sans variable → `center`, donc aucun changement sur les autres pages. */
object-position: var(--hero-focus, center) !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 20px !important;
position: relative !important;
z-index: 1 !important;
order: 1 !important;
flex: none !important;
}
html body main section.hero.hero--mosaic[data-stacked] .hero__mosaic-card,
html body section.hero.hero--mosaic[data-stacked] .hero__mosaic-card {
display: block !important;
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
inset: auto !important;
transform: none !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
height: auto !important;
background: var(--color-surface, #FFF7DA) !important;
border-radius: 20px !important;
padding: 26px 22px 24px !important;
z-index: 2 !important;
box-shadow: 0 12px 28px -16px rgba(40,33,20, 0.14) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
order: 2 !important;
flex: none !important;
}
/* Aucun pseudo : ni handle, ni gradient overlay. Visuel propre. */
html body main section.hero.hero--mosaic[data-stacked]::before,
html body main section.hero.hero--mosaic[data-stacked]::after,
html body section.hero.hero--mosaic[data-stacked]::before,
html body section.hero.hero--mosaic[data-stacked]::after {
content: none !important;
display: none !important;
}
/* Handle décoratif retiré — visuel propre sans pseudo */
html body main section.hero.hero--mosaic[data-stacked] .hero__mosaic-card::before,
html body section.hero.hero--mosaic[data-stacked] .hero__mosaic-card::before {
content: none !important;
display: none !important;
}
/* Force le texte de la carte en couleurs « light bg » (pas le scrim
blanc du hero immersif). */
html body main section.hero.hero--mosaic .hero__mosaic-card .hero__title,
html body section.hero.hero--mosaic .hero__mosaic-card .hero__title {
color: var(--color-text, #2E2922) !important;
text-shadow: none !important;
font-size: 1.75rem !important;
line-height: 1.1 !important;
margin-bottom: 10px !important;
}
html body main section.hero.hero--mosaic .hero__mosaic-card .hero__title em,
html body section.hero.hero--mosaic .hero__mosaic-card .hero__title em {
color: var(--color-primary-strong, #2CB9C6) !important;
font-style: italic !important;
}
html body main section.hero.hero--mosaic .hero__mosaic-card .hero__subtitle,
html body section.hero.hero--mosaic .hero__mosaic-card .hero__subtitle {
color: var(--color-text-muted, #6E6357) !important;
text-shadow: none !important;
font-size: 0.92rem !important;
line-height: 1.5 !important;
margin-bottom: 16px !important;
}
html body main section.hero.hero--mosaic .hero__mosaic-card .hero__eyebrow,
html body section.hero.hero--mosaic .hero__mosaic-card .hero__eyebrow {
color: var(--color-primary-strong, #2CB9C6) !important;
text-shadow: none !important;
}
/* CTAs en colonne, full-width */
html body main section.hero.hero--mosaic .hero__mosaic-card .hero__actions,
html body section.hero.hero--mosaic .hero__mosaic-card .hero__actions {
flex-direction: column !important;
gap: 10px !important;
margin-top: 8px !important;
}
html body main section.hero.hero--mosaic .hero__mosaic-card .hero__actions .btn,
html body section.hero.hero--mosaic .hero__mosaic-card .hero__actions .btn {
width: 100% !important;
justify-content: center !important;
}
}
/* §A · Hero banners — incluant explicitement .hero--mosaic / .hero--home /
.hero--secondary qui avaient des spécificités plus fortes. */
html body main section.hero,
html body main section.hero.hero--mosaic,
html body main section.hero.hero--home,
html body main section.hero.hero--secondary,
html body section.hero {
margin: clamp(18px, 1.8vw, 28px) clamp(18px, 1.8vw, 28px) 0 !important;
margin-inline: clamp(18px, 1.8vw, 28px) !important;
border-radius: clamp(20px, 2.4vw, 32px) !important;
overflow: hidden !important;
width: auto !important;
box-sizing: border-box !important;
}
/* §B · Fixed-quote (parallax + image) */
html body main section.fixed-quote,
html body section.fixed-quote {
margin: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 28px) !important;
margin-inline: clamp(18px, 1.8vw, 28px) !important;
border-radius: clamp(20px, 2.4vw, 32px) !important;
overflow: hidden !important;
width: auto !important;
box-sizing: border-box !important;
}
/* §C · Section .process (« Comment se passe une séance ») — même
cadre arrondi + espacé des bords. */
html body main section.process,
html body section.process {
margin: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 28px) !important;
margin-inline: clamp(18px, 1.8vw, 28px) !important;
border-radius: clamp(20px, 2.4vw, 32px) !important;
overflow: hidden !important;
width: auto !important;
box-sizing: border-box !important;
}
/* §D · Titre process entièrement BLANC (em inclus) + intro « Cinq étapes,
à votre rythme. » en BLEU teal pour ressortir sur la photo cabinet. */
html body main section.process .section-title,
html body section.process .section-title {
color: #FFFFFF !important;
text-shadow: 0 2px 18px rgba(20,16,10,0.30);
}
html body main section.process .section-title em,
html body section.process .section-title em {
color: #FFFFFF !important;
font-style: italic !important;
text-shadow: 0 2px 18px rgba(20,16,10,0.30);
}
/* Kicker reste blanc, intro passe en bleu teal */
html body main section.process .section-kicker,
html body section.process .section-kicker {
color: rgba(255,255,255, 0.92) !important;
}
html body main section.process .section-intro,
html body section.process .section-intro {
color: var(--color-primary-strong, #2CB9C6) !important;
text-shadow: 0 2px 12px rgba(255,251,242, 0.60);
font-weight: 500 !important;
}
/* Mobile — micro radius/margin pour cohérence sans étouffer */
@media (max-width: 768px) {
html body main section.hero,
html body main section.hero.hero--mosaic,
html body main section.hero.hero--home,
html body main section.hero.hero--secondary,
html body section.hero {
margin: 12px 12px 0 !important;
margin-inline: 12px !important;
border-radius: 22px !important;
overflow: hidden !important;
}
html body main section.fixed-quote,
html body section.fixed-quote {
margin: 14px 12px !important;
margin-inline: 12px !important;
border-radius: 18px !important;
}
html body main section.process,
html body section.process {
margin: 14px 12px !important;
margin-inline: 12px !important;
border-radius: 18px !important;
}
}
/* =====================================================================
PASS 87 — Section .process « Comment se passe une séance » :
simple overlay BEIGE LUMINEUX au-dessus de la photo. Pas de formes,
juste un voile crème caramel pour réchauffer l'image sans déborder.
===================================================================== */
html body main section.process,
html body section.process {
overflow: hidden !important;
position: relative;
isolation: isolate;
}
html body main section.process::before,
html body section.process::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
background:
radial-gradient(ellipse 90% 70% at 70% 30%,
rgba(245, 225, 168, 0.42) 0%,
rgba(245, 225, 168, 0.20) 45%,
rgba(245, 225, 168, 0.06) 75%,
transparent 100%),
linear-gradient(180deg,
rgba(252,245,232, 0.28) 0%,
rgba(252,245,232, 0.12) 50%,
rgba(245, 225, 168, 0.22) 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
mix-blend-mode: screen;
}
/* Le contenu reste au-dessus de l'overlay */
html body main section.process .process__inner,
html body section.process .process__inner {
position: relative;
z-index: 2;
}
/* =====================================================================
PASS 85 — Forme décorative warm (forme.svg) en arrière-plan
---------------------------------------------------------------------
Hiérarchie z-index :
#ambient-bg : z-index -2 (couche la plus en arrière)
.warm-shape : z-index -1 (juste au-dessus de l'ambient)
contenu : auto / 0+ (au-dessus)
Le SVG original utilise une palette rose / corail. Filter pour la caler
sur le caramel brand : hue-rotate(28deg) saturate(0.85) brightness(1.02).
===================================================================== */
/* On enfonce #ambient-bg pour que .warm-shape s'affiche au-dessus */
html body #ambient-bg {
z-index: -2 !important;
}
html body .warm-shape {
position: fixed !important;
pointer-events: none !important;
z-index: -1 !important;
background-image: url('../images/forme.webp') !important; /* etait forme.svg : 1154 ko -> 60 ko, meme rendu (voile a 38-48% d'opacite) */
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
/* Saturation renforcée pour des formes safran vives, non ternes */
filter: saturate(1.35) brightness(1.03) contrast(1.05);
opacity: 1;
will-change: transform;
display: block !important;
}
html body .warm-shape--tr {
top: -6vh !important;
right: -14vw !important;
width: 78vw !important;
height: 70vh !important;
transform: rotate(-8deg);
}
html body .warm-shape--bl {
bottom: -10vh !important;
left: -18vw !important;
width: 62vw !important;
height: 58vh !important;
transform: rotate(168deg);
opacity: 0.72;
}
@media (max-width: 1024px) {
html body .warm-shape--tr { width: 95vw !important; height: 62vh !important; opacity: 0.48; }
html body .warm-shape--bl { width: 85vw !important; height: 52vh !important; opacity: 0.38; }
}
@media (max-width: 768px) {
html body .warm-shape--tr {
top: -3vh !important; right: -25vw !important;
width: 120vw !important; height: 50vh !important;
opacity: 0.42;
}
html body .warm-shape--bl {
bottom: -6vh !important; left: -30vw !important;
width: 110vw !important; height: 42vh !important;
opacity: 0.32;
}
}
@media (prefers-reduced-motion: reduce) {
html body .warm-shape { will-change: auto; }
}
/* =====================================================================
PASS 84 — Hauteur réduite des cards « Une même technique, quatre
champs d'action » (#soins .service-card) sur la page d'accueil.
- Padding vertical resserré (40px → 24px desktop, 28px → 20px tablet)
- Icône légèrement plus petite + marges resserrées
- Titre / texte interlignes réduits
- Lien plus haut, moins de margin-top
Touche uniquement la section homepage #soins pour ne pas impacter
les autres .service-card.
===================================================================== */
html body main #soins .service-card,
html body #soins .service-card {
padding: 24px 22px 22px !important;
gap: 0;
}
html body main #soins .service-card__icon,
html body #soins .service-card__icon {
width: 42px !important;
height: 42px !important;
font-size: 18px !important;
margin-bottom: 12px !important;
}
html body main #soins .service-card__title,
html body #soins .service-card__title {
font-size: 1.15rem !important;
line-height: 1.25 !important;
margin-bottom: 8px !important;
}
html body main #soins .service-card__text,
html body #soins .service-card__text {
font-size: 0.92rem !important;
line-height: 1.45 !important;
margin: 0 !important;
}
html body main #soins .service-card__link,
html body #soins .service-card__link {
margin-top: 14px !important;
font-size: 0.86rem !important;
}
@media (max-width: 768px) {
html body main #soins .service-card,
html body #soins .service-card {
padding: 22px 20px 20px !important;
}
html body main #soins .service-card__icon,
html body #soins .service-card__icon {
width: 38px !important;
height: 38px !important;
margin-bottom: 10px !important;
}
}
/* =====================================================================
PASS 86 — Oneline .fixed-quote : plus grosse, ancrée à droite du
viewport, animée R→L (forcé en JS pour variant cream).
---------------------------------------------------------------------
- Trait SVG nettement plus présent : stroke-width 2.4 (desktop)
- Position : ancrée right: 0 de la SECTION (pas du bloc texte) :
le mountain occupe la moitié droite (jusqu'à 60vw), indépendante
du flow du blockquote qui reste centré dans son container.
- Verticalement centré pour gagner en présence (transform translateY).
- Anim R→L imposée côté JS (cf. animations.js mountainShapes).
===================================================================== */
html body main section.fixed-quote .section-mountain__line,
html body section.fixed-quote .section-mountain__line {
stroke-width: 2.4 !important;
opacity: 0.92 !important;
}
/* §C · Layout 2 colonnes : texte GAUCHE / oneline DROITE.
IMPORTANT : on doit battre PASS 75 (`html body main > section[data-mountain]
> svg.section-mountain`) qui forçait left:0 / right:auto sur toutes les
sections [data-mountain]. On utilise le SAME pattern (> direct + attribut
+ types) en ajoutant `.fixed-quote` pour gagner +1 classe. */
html body main section.fixed-quote .container,
html body section.fixed-quote .container {
display: flex !important;
align-items: center;
justify-content: flex-start;
min-height: inherit;
}
html body main section.fixed-quote blockquote,
html body section.fixed-quote blockquote {
max-width: 48% !important;
margin: 0 !important;
text-align: left;
flex: 0 1 auto;
}
html body main > section.fixed-quote[data-mountain] > svg.section-mountain,
html body main > section.fixed-quote[data-mountain] > .section-mountain,
html body > section.fixed-quote[data-mountain] > svg.section-mountain,
html body > section.fixed-quote[data-mountain] > .section-mountain {
left: auto !important;
right: clamp(20px, 4vw, 60px) !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
width: 46% !important;
max-width: 620px !important;
height: auto !important;
max-height: 220px !important;
opacity: 0.92 !important;
pointer-events: none !important;
}
@media (max-width: 1024px) {
html body main section.fixed-quote blockquote,
html body section.fixed-quote blockquote {
max-width: 52% !important;
}
html body main > section.fixed-quote[data-mountain] > svg.section-mountain,
html body main > section.fixed-quote[data-mountain] > .section-mountain {
width: 42% !important;
max-width: 42% !important;
max-height: 160px !important;
}
html body main section.fixed-quote .section-mountain__line,
html body section.fixed-quote .section-mountain__line {
stroke-width: 2.2 !important;
}
}
@media (max-width: 768px) {
/* Mobile : on revient en mode empilé — container redevient block,
blockquote pleine largeur, oneline en bas. */
html body main section.fixed-quote .container,
html body section.fixed-quote .container {
display: block !important;
}
html body main section.fixed-quote blockquote,
html body section.fixed-quote blockquote {
max-width: 100% !important;
}
html body main > section.fixed-quote[data-mountain] > svg.section-mountain,
html body main > section.fixed-quote[data-mountain] > .section-mountain {
top: auto !important;
bottom: 24px !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
max-height: 90px !important;
transform: none !important;
opacity: 0.85 !important;
}
html body main section.fixed-quote .section-mountain__line,
html body section.fixed-quote .section-mountain__line {
stroke-width: 1.8 !important;
opacity: 0.82 !important;
}
}
/* =====================================================================
PASS 82 — Retirer l'overlay scrim sur la section "Mon approche"
(.fixed-quote) et autres sections du même type avec image en
background. L'overlay rendait l'image moins visible : on le neutralise.
La citation reste lisible car la photo (lac-montagne / soin-crane)
est suffisamment douce et le texte porte sa propre lisibilité via
typo + couleur claire.
Sections concernées : .fixed-quote partout (index.html + pages soin).
===================================================================== */
html body main section.fixed-quote::after,
html body section.fixed-quote::after,
html body main section.fixed-quote::before,
html body section.fixed-quote::before {
background: none !important;
background-image: none !important;
content: none !important;
display: none !important;
}
/* =====================================================================
PASS 94 — Sous-segments perinatalite : composant responsive
« tabs sticky mobile + split vertical desktop ».
Remplace les 3 sections (01 bebes, 02 personnes enceintes, 03 lien)
par un seul composant a onglets.
- Desktop (>=900px) : rail sidebar caramel a gauche + panel droite.
- Mobile (<900px) : tabs pill sticky en haut + panel + CTA.
===================================================================== */
.perinat-tabs{
display:grid;
grid-template-columns:320px 1fr;
gap:0;
background:#FFF7DA;
border-radius:28px;
box-shadow:
0 30px 80px -30px rgba(46,41,34,0.2),
0 0 0 1px rgba(46,41,34,0.08);
overflow:hidden;
min-height:600px;
}
.perinat-tabs__rail{
background:
radial-gradient(circle at 20% 90%, rgba(232, 181, 74,0.18) 0%, transparent 60%),
linear-gradient(180deg, #F7DA85 0%, #EFE0C2 100%);
padding:40px 28px;
display:flex;
flex-direction:column;
border-right:1px solid rgba(44, 185, 198, 0.08);
}
.perinat-tabs__kicker{
font-size:11px;
letter-spacing:1.6px;
text-transform:uppercase;
color:#B8862A;
font-weight:600;
margin-bottom:14px;
}
.perinat-tabs__rail-title{
font-family:var(--font-heading, 'Cormorant Garamond', serif);
font-size:30px;
line-height:1.15;
font-weight:600;
color:#2CB9C6;
letter-spacing:-0.4px;
margin:0 0 10px;
}
.perinat-tabs__rail-title em{
font-style:italic;
color:#B8862A;
}
.perinat-tabs__rail-intro{
font-size:13.5px;
color:#6E6357;
line-height:1.6;
margin:0 0 28px;
}
.perinat-tabs__tablist{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:auto;
}
.perinat-tabs__tab{
display:flex;
align-items:center;
gap:14px;
padding:14px 18px;
border-radius:14px;
background:rgba(255,251,242,0.55);
border:1px solid transparent;
font-family:var(--font-body, 'Manrope', sans-serif);
font-size:14px;
font-weight:600;
color:#6E6357;
cursor:pointer;
text-align:left;
transition:background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s;
width:100%;
}
.perinat-tabs__tab-num{
font-family:var(--font-heading, 'Cormorant Garamond', serif);
font-size:18px;
font-style:italic;
color:#B8862A;
font-weight:600;
width:24px;
flex-shrink:0;
}
.perinat-tabs__tab-label{
flex:1;
line-height:1.25;
}
.perinat-tabs__tab-arrow{
color:#9A8E7E;
opacity:0;
transform:translateX(-4px);
transition:opacity 0.25s, transform 0.25s, color 0.25s;
font-size:18px;
flex-shrink:0;
}
.perinat-tabs__tab:hover{
background:#FFF7DA;
color:#2CB9C6;
border-color:rgba(44, 185, 198, 0.14);
}
.perinat-tabs__tab.is-active{
background:linear-gradient(135deg, #2CB9C6, #2CB9C6);
color:#FFF7DA;
border-color:transparent;
box-shadow:0 8px 22px rgba(31,82,86,0.28);
}
.perinat-tabs__tab.is-active .perinat-tabs__tab-num{
color:rgba(255,251,242,0.8);
}
.perinat-tabs__tab.is-active .perinat-tabs__tab-arrow{
opacity:1;
transform:translateX(0);
color:#FFF7DA;
}
.perinat-tabs__rail-foot{
margin-top:28px;
padding-top:24px;
border-top:1px solid rgba(44, 185, 198, 0.10);
font-size:11.5px;
color:#9A8E7E;
line-height:1.55;
}
.perinat-tabs__panels{position:relative}
.perinat-tabs__panel{
display:none;
padding:48px 56px;
animation:perinatFadeIn 0.32s ease;
}
.perinat-tabs__panel.is-active{display:block}
.perinat-tabs__panel[hidden]{display:none}
.perinat-tabs__panel.is-active[hidden]{display:block}
@keyframes perinatFadeIn{
from{opacity:0; transform:translateY(8px)}
to{opacity:1; transform:translateY(0)}
}
.perinat-tabs__panel-head{margin-bottom:32px}
.perinat-tabs__panel-num{
display:inline-block;
font-family:var(--font-heading, 'Cormorant Garamond', serif);
font-size:14px;
font-style:italic;
color:#B8862A;
letter-spacing:2px;
margin-bottom:8px;
}
.perinat-tabs__panel-title{
font-family:var(--font-heading, 'Cormorant Garamond', serif);
font-size:40px;
line-height:1.1;
font-weight:600;
color:#2CB9C6;
letter-spacing:-0.6px;
margin:0;
}
.perinat-tabs__panel-title em{
font-style:italic;
color:#B8862A;
}
.perinat-tabs__panel-intro{
margin:12px 0 0;
font-size:15px;
color:#6E6357;
line-height:1.6;
max-width:520px;
font-style:italic;
}
.perinat-tabs__grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:16px;
margin:32px 0 28px;
}
.perinat-tabs__card{
padding:22px 20px;
background:linear-gradient(180deg, #FFF7DA 0%, #FCE9AF 100%);
border:1px solid rgba(44, 185, 198, 0.08);
border-radius:16px;
transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
box-shadow:0 1px 2px rgba(46,41,34,0.03);
}
.perinat-tabs__card:hover{
border-color:#2CB9C6;
transform:translateY(-2px);
box-shadow:0 10px 28px -10px rgba(46,41,34,0.12);
}
.perinat-tabs__card--wide{grid-column:span 2}
.perinat-tabs__card-head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:8px;
}
.perinat-tabs__card-icon{
width:36px;
height:36px;
border-radius:10px;
background:linear-gradient(135deg, rgba(62,156,162,0.14), rgba(116,182,178,0.24));
color:#2CB9C6;
display:grid;
place-items:center;
font-size:17px;
flex-shrink:0;
}
.perinat-tabs__card-title{
font-family:var(--font-body, 'Manrope', sans-serif);
font-size:14.5px;
font-weight:600;
color:#2E2922;
line-height:1.25;
margin:0;
}
.perinat-tabs__card-sub{
font-size:12.5px;
color:#6E6357;
line-height:1.55;
margin:0;
}
.perinat-tabs__cta{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 26px;
border-radius:30px;
background:linear-gradient(135deg, #2CB9C6, #2CB9C6);
color:#FFF7DA !important;
font-family:var(--font-body, 'Manrope', sans-serif);
font-size:14px;
font-weight:600;
text-decoration:none;
box-shadow:0 8px 22px rgba(31,82,86,0.28);
transition:transform 0.2s, box-shadow 0.2s;
letter-spacing:0.2px;
}
.perinat-tabs__cta:hover{
transform:translateY(-2px);
box-shadow:0 12px 30px rgba(31,82,86,0.35);
}
.perinat-tabs__cta i{font-size:18px}
.perinat-tabs__cta-hint{
margin:10px 0 0;
font-size:12px;
color:#9A8E7E;
font-style:italic;
}
/* MOBILE <=900px : pile rail + tabs sticky + panel */
@media (max-width:900px){
.perinat-tabs{
display:flex;
flex-direction:column;
border-radius:22px;
min-height:0;
}
.perinat-tabs__rail{
padding:24px 22px 8px;
border-right:none;
border-bottom:1px solid rgba(44, 185, 198, 0.08);
}
.perinat-tabs__rail-title{font-size:24px}
.perinat-tabs__rail-intro{font-size:13px; margin-bottom:0}
.perinat-tabs__tablist{
flex-direction:row;
gap:6px;
overflow-x:auto;
padding:14px 16px;
margin:14px -22px -8px;
background:rgba(255,251,242,0.96);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-top:1px solid rgba(44, 185, 198, 0.08);
border-bottom:1px solid rgba(44, 185, 198, 0.08);
position:sticky;
top:64px;
z-index:5;
scrollbar-width:none;
}
.perinat-tabs__tablist::-webkit-scrollbar{display:none}
.perinat-tabs__tab{
flex-direction:column;
align-items:flex-start;
gap:2px;
padding:10px 14px;
border-radius:14px;
flex-shrink:0;
min-width:auto;
font-size:12px;
text-align:left;
border:1px solid rgba(44, 185, 198, 0.10);
background:#FFF7DA;
}
.perinat-tabs__tab-num{font-size:11px; color:#B8862A; width:auto}
.perinat-tabs__tab-label{
font-size:12px;
line-height:1.2;
white-space:nowrap;
}
.perinat-tabs__tab-arrow{display:none}
.perinat-tabs__tab.is-active{
background:linear-gradient(135deg, #2CB9C6, #2CB9C6);
}
.perinat-tabs__tab.is-active .perinat-tabs__tab-num{
color:rgba(255,251,242,0.8);
}
.perinat-tabs__rail-foot{display:none}
.perinat-tabs__panel{padding:24px 20px 28px}
.perinat-tabs__panel-title{font-size:26px; letter-spacing:-0.3px}
.perinat-tabs__panel-intro{
font-size:13.5px;
padding:12px 14px;
background:rgba(255,251,242,0.7);
border-left:3px solid #F1C338;
border-radius:0 8px 8px 0;
margin-top:14px;
}
.perinat-tabs__grid{
grid-template-columns:1fr;
gap:10px;
margin:22px 0 20px;
}
.perinat-tabs__card{
padding:16px 16px;
border-radius:14px;
}
.perinat-tabs__card--wide{grid-column:span 1}
.perinat-tabs__card-icon{width:34px; height:34px}
.perinat-tabs__card-title{font-size:13.5px}
.perinat-tabs__card-sub{font-size:12px}
.perinat-tabs__cta{
display:flex;
justify-content:center;
width:100%;
padding:14px 18px;
border-radius:14px;
}
}
/* Tablet 901-1100px */
@media (min-width:901px) and (max-width:1100px){
.perinat-tabs{grid-template-columns:280px 1fr}
.perinat-tabs__rail{padding:32px 22px}
.perinat-tabs__panel{padding:36px 36px}
.perinat-tabs__panel-title{font-size:32px}
.perinat-tabs__grid{gap:12px}
}
/* =====================================================================
PASS 96 — Sections .process SANS image de fond : titre en bleu teal
(au lieu de blanc). Cible les pages soin sub-pages ou .process
n'a pas de .process__bg enfant.
===================================================================== */
html body main section.process:not(:has(.process__bg)) .section-title,
html body section.process:not(:has(.process__bg)) .section-title,
html body main section.process:not(:has(.process__bg)) .section-title em,
html body section.process:not(:has(.process__bg)) .section-title em {
color: var(--color-primary-strong, #2CB9C6) !important;
text-shadow: none !important;
}
html body main section.process:not(:has(.process__bg)) .section-kicker,
html body section.process:not(:has(.process__bg)) .section-kicker {
color: rgba(46, 110, 114, 0.7) !important;
}
html body main section.process:not(:has(.process__bg)) .section-intro,
html body section.process:not(:has(.process__bg)) .section-intro {
color: var(--color-text-muted, #6E6357) !important;
text-shadow: none !important;
font-weight: 400 !important;
}
/* =====================================================================
PASS 97 — Bon cadeau : section unique fusionnée avec onglets
switchables (Occasions / Conditions).
===================================================================== */
.bc-tabs{
background:linear-gradient(180deg, var(--color-surface, #FFF7DA) 0%, var(--color-bg, #FCE9AF) 100%);
border:1px solid var(--color-border, rgba(44, 185, 198, 0.08));
border-radius:24px;
padding:clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
box-shadow:0 22px 48px -32px rgba(40,33,20,0.22), 0 4px 14px -8px rgba(40,33,20,0.08);
margin-top:18px;
}
.bc-tabs__nav{
display:flex;
justify-content:center;
gap:8px;
padding:8px;
background:rgba(46,41,34,0.04);
border-radius:30px;
width:fit-content;
margin:0 auto 22px;
}
.bc-tabs__tab{
padding:11px 24px;
border:none;
border-radius:24px;
background:transparent;
cursor:pointer;
font-family:var(--font-body, 'Manrope', sans-serif);
font-size:13.5px;
font-weight:600;
color:var(--color-text-muted, #6E6357);
transition:background 0.25s, color 0.25s, box-shadow 0.25s;
display:inline-flex;
align-items:center;
gap:8px;
letter-spacing:0.2px;
}
.bc-tabs__tab i{font-size:18px}
.bc-tabs__tab:hover:not(.is-active){
background:rgba(255,251,242,0.6);
color:var(--color-primary-strong, #2CB9C6);
}
.bc-tabs__tab.is-active{
background:linear-gradient(135deg, #2CB9C6, #2CB9C6);
color:var(--color-surface, #FFF7DA);
box-shadow:0 6px 16px rgba(31,82,86,0.25);
}
.bc-tabs__label{}
.bc-tabs__count{
background:rgba(46,41,34,0.08);
color:var(--color-text-muted, #9A8E7E);
padding:2px 9px;
border-radius:30px;
font-size:11px;
font-weight:600;
}
.bc-tabs__tab.is-active .bc-tabs__count{
background:rgba(255,251,242,0.18);
color:rgba(255,251,242,0.92);
}
.bc-tabs__panel{display:none}
.bc-tabs__panel.is-active{display:block;animation:bcFade 0.32s ease}
.bc-tabs__panel[hidden]{display:none}
.bc-tabs__panel.is-active[hidden]{display:block}
@keyframes bcFade{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
/* --- Grille Occasions (3 cols desktop) --- */
.bc-occasions{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:14px;
}
.bc-occasion{
padding:22px 18px;
border-radius:16px;
background:linear-gradient(180deg, var(--color-surface, #FFF7DA) 0%, var(--color-bg, #FCE9AF) 100%);
border:1px solid var(--color-border, rgba(44, 185, 198, 0.08));
text-align:center;
transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.bc-occasion:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px -10px rgba(46,41,34,0.12);
border-color:var(--color-accent-soft, rgba(232, 181, 74,0.40));
}
.bc-occasion__icon{
width:46px;
height:46px;
border-radius:50%;
background:linear-gradient(135deg, rgba(232, 181, 74,0.20), rgba(232, 181, 74,0.36));
color:var(--color-accent-strong, #B8862A);
display:grid;
place-items:center;
font-size:22px;
margin:0 auto 12px;
}
.bc-occasion__title{
font-family:var(--font-body, 'Manrope', sans-serif);
font-size:14px;
font-weight:600;
color:var(--color-text, #2E2922);
margin:0 0 4px;
line-height:1.3;
}
.bc-occasion__text{
font-size:12.5px;
color:var(--color-text-muted, #6E6357);
line-height:1.5;
margin:0;
}
/* --- Grille Conditions (2 cols desktop) --- */
.bc-conditions{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:14px;
}
.bc-condition{
padding:20px 22px;
border-radius:16px;
background:linear-gradient(180deg, var(--color-surface, #FFF7DA) 0%, var(--color-bg, #FCE9AF) 100%);
border:1px solid var(--color-border, rgba(44, 185, 198, 0.08));
display:flex;
gap:14px;
align-items:flex-start;
}
.bc-condition__icon{
width:40px;
height:40px;
border-radius:12px;
background:linear-gradient(135deg, rgba(62,156,162,0.14), rgba(116,182,178,0.24));
color:var(--color-primary-strong, #2CB9C6);
display:grid;
place-items:center;
font-size:18px;
flex-shrink:0;
}
.bc-condition__body{flex:1;min-width:0}
.bc-condition__title{
font-family:var(--font-body, 'Manrope', sans-serif);
font-size:14px;
font-weight:600;
color:var(--color-text, #2E2922);
margin:0 0 3px;
line-height:1.3;
}
.bc-condition__text{
font-size:12.5px;
color:var(--color-text-muted, #6E6357);
line-height:1.55;
margin:0;
}
.bc-condition__text a{
color:var(--color-accent-strong, #B8862A);
text-decoration:underline;
}
/* --- Responsive --- */
@media (max-width: 768px){
.bc-tabs{padding:24px 18px;border-radius:20px}
.bc-tabs__nav{
width:100%;
flex-direction:row;
border-radius:18px;
padding:6px;
}
.bc-tabs__tab{
flex:1;
justify-content:center;
padding:10px 12px;
font-size:12.5px;
}
.bc-occasions{grid-template-columns:repeat(2, 1fr);gap:10px}
.bc-conditions{grid-template-columns:1fr;gap:10px}
}
@media (max-width: 480px){
.bc-occasions{grid-template-columns:1fr}
}
/* =====================================================================
PASS 98 — Média : filtre vidéos par catégorie (dropdown select).
Composant .video-filter qui regroupe dropdown + compteur live.
===================================================================== */
.video-filter{
margin:24px auto 28px;
max-width:520px;
display:flex;
flex-direction:column;
gap:10px;
position:relative;
z-index:50;
isolation:isolate;
}
.video-filter__dropdown{
background:var(--color-surface, #FFF7DA);
border:1px solid var(--color-border, rgba(44, 185, 198, 0.14));
border-radius:14px;
padding:12px 14px;
display:flex;
align-items:center;
gap:12px;
cursor:pointer;
box-shadow:0 4px 14px -6px rgba(46,41,34,0.10);
transition:border-color 0.2s, box-shadow 0.2s;
user-select:none;
}
.video-filter__dropdown:hover{
border-color:var(--color-primary-light, #2CB9C6);
box-shadow:0 8px 20px -8px rgba(46,41,34,0.14);
}
.video-filter__icon{
width:38px;
height:38px;
border-radius:11px;
background:linear-gradient(135deg, rgba(232, 181, 74,0.20), rgba(232, 181, 74,0.36));
color:var(--color-accent-strong, #B8862A);
display:grid;
place-items:center;
font-size:18px;
flex-shrink:0;
}
.video-filter__label{flex:1;min-width:0}
.video-filter__hint{
font-size:10px;
text-transform:uppercase;
letter-spacing:1.4px;
color:var(--color-text-muted, #9A8E7E);
font-weight:600;
margin-bottom:2px;
}
.video-filter__value{
font-family:var(--font-heading, 'Cormorant Garamond', serif);
font-size:19px;
font-weight:600;
color:var(--color-primary-strong, #2CB9C6);
line-height:1.1;
}
.video-filter__caret{
color:var(--color-text-muted, #9A8E7E);
font-size:20px;
transition:transform 0.25s;
}
.video-filter__dropdown[aria-expanded="true"] .video-filter__caret{
transform:rotate(180deg);
}
.video-filter__options{
position:absolute;
top:64px;
left:0;
right:0;
z-index:20;
background:var(--color-surface, #FFF7DA);
border:1px solid var(--color-border, rgba(44, 185, 198, 0.14));
border-radius:14px;
box-shadow:0 18px 36px -16px rgba(46,41,34,0.20), 0 4px 14px -6px rgba(46,41,34,0.10);
overflow:hidden;
animation:vfFade 0.2s ease;
}
.video-filter__options[hidden]{display:none}
@keyframes vfFade{
from{opacity:0; transform:translateY(-6px)}
to{opacity:1; transform:translateY(0)}
}
.video-filter__opt{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 16px;
font-size:13.5px;
color:var(--color-text, #2E2922);
cursor:pointer;
border-bottom:1px solid var(--color-border, rgba(44, 185, 198, 0.08));
transition:background 0.18s;
}
.video-filter__opt:last-child{border-bottom:none}
.video-filter__opt:hover{
background:linear-gradient(90deg, rgba(252,245,232,0.7), transparent);
}
.video-filter__opt.is-active{
background:linear-gradient(90deg, rgba(46,110,114,0.10), transparent);
color:var(--color-primary-strong, #2CB9C6);
font-weight:600;
}
.video-filter__opt-count{
font-size:11px;
color:var(--color-text-muted, #9A8E7E);
background:rgba(46,41,34,0.08);
padding:2px 9px;
border-radius:30px;
flex-shrink:0;
font-weight:600;
}
.video-filter__opt.is-active .video-filter__opt-count{
background:rgba(46,110,114,0.16);
color:var(--color-primary-strong, #2CB9C6);
}
.video-filter__count{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 14px;
border-radius:30px;
background:rgba(46,110,114,0.10);
color:var(--color-primary-strong, #2CB9C6);
font-size:12px;
font-weight:600;
width:fit-content;
align-self:flex-start;
}
.video-filter__count i{font-size:14px}
/* Masquage des vidéos filtrées */
.video-grid > [data-vf-cat][hidden]{display:none !important}
/* Animation grille filtrée */
.video-grid > [data-vf-cat]{
animation:vfShow 0.32s ease both;
}
@keyframes vfShow{
from{opacity:0; transform:translateY(6px)}
to{opacity:1; transform:translateY(0)}
}
@media (max-width: 640px){
.video-filter{margin:18px auto 22px}
.video-filter__dropdown{padding:10px 12px}
.video-filter__value{font-size:17px}
}
/* =====================================================================
PASS 99 — Vidéos en carrousel horizontal sur TOUS les viewports avec
flèches directionnelles below grille.
===================================================================== */
.video-carousel{
position:relative;
}
/* Override la grille pour qu'elle soit horizontale sur desktop aussi */
.video-carousel > .video-grid{
display:flex !important;
grid-template-columns:none !important;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:18px !important;
padding:4px 4px 18px !important;
margin-inline:0 !important;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
scroll-behavior:smooth;
}
.video-carousel > .video-grid::-webkit-scrollbar{display:none}
.video-carousel > .video-grid > div{
flex:0 0 calc((100% - 3 * 18px) / 4);
scroll-snap-align:start;
scroll-snap-stop:always;
min-width:0;
}
@media (max-width: 1100px){
.video-carousel > .video-grid > div{
flex:0 0 calc((100% - 2 * 18px) / 3);
}
}
@media (max-width: 768px){
.video-carousel > .video-grid{
gap:14px !important;
padding:4px 4px 14px !important;
}
.video-carousel > .video-grid > div{
flex:0 0 calc((100% - 18px) / 2);
}
}
@media (max-width: 480px){
.video-carousel > .video-grid > div{
flex:0 0 70%;
scroll-snap-align:center;
}
}
/* Boutons prev/next */
.video-carousel__btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;
height:44px;
border-radius:50%;
border:1px solid var(--color-border, rgba(44, 185, 198, 0.10));
background:rgba(255,251,242,0.96);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
color:var(--color-primary-strong, #2CB9C6);
cursor:pointer;
display:grid;
place-items:center;
font-size:20px;
z-index:10;
box-shadow:0 6px 16px -6px rgba(46,41,34,0.18), 0 2px 6px rgba(46,41,34,0.08);
transition:background 0.2s, transform 0.2s, opacity 0.25s;
}
.video-carousel__btn:hover:not(:disabled){
background:var(--color-primary-strong, #2CB9C6);
color:var(--color-surface, #FFF7DA);
transform:translateY(-50%) scale(1.08);
}
.video-carousel__btn:disabled{
opacity:0.30;
cursor:not-allowed;
}
.video-carousel__btn--prev{left:-22px}
.video-carousel__btn--next{right:-22px}
/* Mobile + tablette : flèches en pied au CENTRE, side by side */
@media (max-width: 768px){
.video-carousel{
padding-bottom:64px;
}
.video-carousel__btn{
position:absolute;
top:auto;
bottom:8px;
transform:none;
width:44px;
height:44px;
font-size:18px;
}
.video-carousel__btn:hover:not(:disabled){transform:scale(1.06)}
.video-carousel__btn--prev{
left:50%;
margin-left:-52px;
}
.video-carousel__btn--next{
right:50%;
margin-right:-52px;
}
}
@media (max-width: 480px){
.video-carousel__btn{width:42px;height:42px}
}
/* ---- Blog filter dropdown ---- */
.blog-filter-wrap{
position:relative;
max-width:340px;
margin:0 auto 44px;
display:flex;
justify-content:center;
z-index:60;
}
.blog-filter-wrap.is-open{z-index:200}
.blog-filter__toggle{
width:100%;
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 22px;
border-radius:999px;
background:#FFFFFF;
border:1px solid rgba(44,185,198,0.32);
color:#1E2938;
font-family:'Manrope',sans-serif;
font-size:0.98rem;
font-weight:500;
cursor:pointer;
box-shadow:0 8px 24px -18px rgba(30,41,56,0.35);
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.blog-filter__toggle:hover{
border-color:#2CB9C6;
box-shadow:0 12px 32px -18px rgba(44,185,198,0.5);
}
.blog-filter__label{
display:inline-flex;
align-items:center;
gap:10px;
color:inherit;
}
.blog-filter__label i{color:#F1C338;font-size:1.15rem}
.blog-filter__caret{
color:#2CB9C6;
font-size:1rem;
transition:transform .25s ease;
}
.blog-filter-wrap.is-open .blog-filter__caret{transform:rotate(180deg)}
.blog-filter__menu{
position:absolute;
top:calc(100% + 8px);
left:0;
right:0;
margin:0;
padding:8px;
list-style:none;
background:#FFFFFF;
border:1px solid rgba(44,185,198,0.32);
border-radius:20px;
box-shadow:0 24px 48px -24px rgba(30,41,56,0.28);
opacity:0;
visibility:hidden;
transform:translateY(-6px);
transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
z-index:20;
max-height:360px;
overflow-y:auto;
}
.blog-filter-wrap.is-open .blog-filter__menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.blog-filter__menu li{margin:0}
.blog-filter__option{
width:100%;
display:inline-flex;
align-items:center;
gap:10px;
padding:11px 16px;
border:none;
background:transparent;
border-radius:14px;
color:#1E2938;
font-family:'Manrope',sans-serif;
font-size:0.95rem;
font-weight:500;
text-align:left;
cursor:pointer;
transition:background .18s ease,color .18s ease;
}
.blog-filter__option i{color:#F1C338;font-size:1.1rem;flex-shrink:0}
.blog-filter__option:hover{background:rgba(241,195,56,0.14)}
.blog-filter__option.is-active{
background:#2CB9C6;
color:#FFFFFF;
}
.blog-filter__option.is-active i{color:#FFFFFF}
/* =====================================================================
FIX ESPACEMENTS — SVG montagne HORS FLUX à toutes les largeurs.
PASS 34 (main > section > * { position: relative !important }) mettait
les .section-mountain injectés EN FLUX sur <1024px : un bloc invisible
de ~131px (mobile) à ~315px (tablette) s'insérait en haut de chaque
section [data-mountain] et du hero → les « grands espaces vides ».
PASS 75 ne corrigeait cela qu'en ≥1024px. Ici : toutes les largeurs.
Les offsets par variante (PASS 63 §A) reprennent alors leur effet
normal, comme sur desktop.
===================================================================== */
html body main > section > svg.section-mountain,
html body main > section > .section-mountain,
html body main > .hero > svg.section-mountain,
html body main section .section-mountain {
position: absolute !important;
}
/* =====================================================================
PASS 97 — Retrait de TOUS les halos bleus décoratifs (demande cliente).
---------------------------------------------------------------------
Les seuls halos qui restent sont les lueurs CHAUDES (caramel/sable).
On neutralise uniquement la teinte SAGE #2CB9C6 (rgba(44,185,198)) là
où elle sert de halo/blob radial décoratif. On NE touche PAS aux
boutons, bordures, liens ou textes teal : ils portent l'identité brand.
===================================================================== */
/* 1 · Voile global du : on retire la 3e couche radiale (bleue),
on conserve les deux couches chaudes (caramel + sable). */
html body.theme-femine::before {
background:
radial-gradient(35% 40% at 15% 18%, rgba(232, 181, 74, 0.10) 0%, transparent 60%),
radial-gradient(40% 45% at 88% 75%, rgba(217, 187, 122, 0.12) 0%, transparent 60%) !important;
background-attachment: scroll !important; /* ex-fixed : fluidité scroll (plus de repaint plein cadre) */
}
/* 2 · Blobs de section : le halo ::before portait la teinte SAGE (bleue)
— PASS 73 §E sur desktop, ainsi que les anciens halos §B/§E. On le
neutralise partout ; le halo chaud ::after (caramel) reste intact, donc
chaque section garde sa lueur chaude sans aucune trace de bleu.
Volontairement SANS @media : couvre aussi < 1024px et les autres pages. */
html body main > section:nth-of-type(n).section--alt:not([data-mountain="warm"]):not([data-mountain="sage"]):not(.fixed-quote):not(.hero):not(.process)::before,
html body main > section:nth-of-type(n).section--bg:not([data-mountain="warm"]):not([data-mountain="sage"]):not(.fixed-quote):not(.hero):not(.process)::before,
html body main > section.affiliations-band::before,
html body main > section.cta-final::before,
html body main section.section--alt:not([data-mountain]):not(.affiliations-band)::before,
html body main section.section--bg:not([data-mountain]):not(.fixed-quote)::before,
main > section:nth-of-type(3n+3):not(.fixed-quote):not(.cta-final):not(.hero):not(.process)::before {
background: none !important;
}
/* =====================================================================
PASS 98 — Avertissement contre-indication (hero diapasons / pacemaker).
Pastille d'alerte : croix rouge + fond rougeâtre discret. Le texte étant
plus long que les autres pastilles, on autorise le retour à la ligne.
===================================================================== */
.hero__insight--warning {
background: rgba(214, 69, 63, 0.10) !important;
border-color: rgba(214, 69, 63, 0.45) !important;
color: #8A2B27;
font-weight: 600;
white-space: normal;
max-width: 340px;
align-items: flex-start;
}
.hero__insight--warning i {
color: #D6453F !important;
font-size: 1.2em;
margin-top: 1px;
}
/* =====================================================================
PASS 99 — soin à 4 mains, section « Pour les corps qui ont besoin
d'être portés » : le CTA passe SOUS le titre (dans le header) et on
retire le halo décoratif de cette section (demande cliente).
L'ID bat la spécificité des blobs PASS 73 §E.
===================================================================== */
#indications-4mains::before,
#indications-4mains::after {
content: none !important;
background: none !important;
}
#indications-4mains .section-header {
align-self: start;
}
#indications-4mains .section-header .actions {
margin-top: 22px;
}
/* =====================================================================
PASS 100 — Cellules de fond (.warm-shape) nettement réduites (demande
cliente : « réduis encore la taille des cellules en arrière plan »).
Ce sont ces grandes formes safran (forme.svg) qui dominaient le fond —
surtout en mobile où elles dépassaient la largeur de l'écran (~120vw).
On les ramène à des accents de coin, plus discrets. Placé en fin de
fichier → même spécificité, source postérieure = ces valeurs gagnent.
===================================================================== */
html body .warm-shape--tr { width: 30vw !important; height: 28vh !important; }
html body .warm-shape--bl { width: 26vw !important; height: 26vh !important; }
@media (max-width: 1024px) {
html body .warm-shape--tr { width: 38vw !important; height: 26vh !important; }
html body .warm-shape--bl { width: 32vw !important; height: 24vh !important; }
}
@media (max-width: 768px) {
html body .warm-shape--tr { width: 44vw !important; height: 22vh !important; }
html body .warm-shape--bl { width: 38vw !important; height: 20vh !important; }
}
/* =====================================================================
PASS 104 — Dates de publication sur les cartes du blog (demande cliente).
===================================================================== */
.article-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.article-card__date { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; }
.article-featured__date { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin: 3px 0 8px; }
/* =====================================================================
PASS 105 — Pastilles hero (hero__insight) : autoriser le retour à la
ligne pour ne PAS déborder quand le texte est long (ex. soin 4-mains
« …trauma, burn-out, hypersensibilité, mais aussi bien-être et détente »).
Les pastilles courtes restent sur une ligne (le texte court ne wrappe pas).
===================================================================== */
.hero__insight { white-space: normal; max-width: 100%; }
/* =====================================================================
PASS 106 — Bouton flottant (sticky-cta) avec logo OneDoc :
fond blanc au lieu du teal pour que le pingouin couleur ressorte
proprement (l'orange/violet du logo jurait sur le fond teal).
Le bouton d'appel (soin 4-mains, icône téléphone) reste teal.
===================================================================== */
.sticky-cta:has(img) {
background: #fff;
border: 1px solid rgba(31, 42, 55, 0.08);
}
.sticky-cta:has(img) img { width: 40px; height: 40px; }
/* =====================================================================
PASS 107 — Rétablir l'effet « image fixe au scroll » (parallaxe) sur
les bandeaux photo (.fixed-quote, parallax), à la demande du client.
Desktop uniquement (min-width 1025px) : on garde background-attachment:
scroll sur tablette/mobile où « fixed » provoque du jank et des bugs de
zoom (iOS/Android). Cette règle, placée en dernier, prime sur les
« scroll !important » précédents grâce au contexte @media min-width.
===================================================================== */
@media (min-width: 1025px) {
section.fixed-quote,
.fixed-quote,
.section--parallax,
.process__bg {
background-attachment: fixed !important;
}
}
/* =====================================================================
PASS 108 — Lisibilité des encarts hero sur DESKTOP (retour cliente).
La carte hero était à 0.72 d'opacité : sur grand écran la photo
transparaît derrière et « mange » le texte (surtout les mots en ,
en safran #F1C338 sur crème = contraste très faible).
Le mobile était déjà à 0.94 et la cliente le trouve parfait → on aligne
simplement le desktop sur ce réglage. Mobile volontairement NON touché
(media min-width 769px), couleurs et design inchangés.
===================================================================== */
@media (min-width: 769px) {
/* Sélecteur volontairement fort : un ancien passage « HERO GLASS PLUS
MARQUÉ » (§C) impose `.hero.hero--mosaic .hero__mosaic-card` à 0.55
d'opacité — c'est lui qui rendait le texte illisible sur grand écran.
On le bat en spécificité, sur desktop uniquement. */
html body .hero.hero--mosaic .hero__mosaic-card,
html body .hero__mosaic-card {
background: rgba(252, 245, 232, 0.93) !important;
}
/* « Retrouver », « vitalité »… : le teal de marque #2CB9C6 sur la carte
crème ne donne que 2,2:1 de contraste → mots difficiles à lire (retour
cliente). On garde EXACTEMENT la même teinte de marque, simplement
assombrie (#1A6F77 ≈ 5:1) : lisible sans changer l'identité visuelle.
Mobile volontairement intact (la cliente le trouve parfait). */
html body main section.hero.hero--mosaic .hero__mosaic-card .hero__title em,
html body section.hero.hero--mosaic .hero__mosaic-card .hero__title em,
html body main .hero.hero--mosaic .hero__mosaic-card .hero__title em {
color: #1A6F77 !important;
}
}
/* =====================================================================
PASS 109 — Diplômes au format PAYSAGE dans une carte verticale (4/5).
Les vignettes sont en object-fit: cover → un certificat paysage
(Steve Haines, PVI Polyvagal) se faisait massacrer au recadrage.
Avec --doc on passe en `contain` : le certificat est affiché ENTIER,
centré sur le fond sablé de la vignette (effet document encadré).
L'image d'origine reste intacte pour le zoom. Retour cliente :
« le diplôme de Steve Haines en vertical, je préfère ».
===================================================================== */
.recognition-v4__diplomas .recognition-dipl--doc .recognition-dipl__thumb img {
object-fit: contain;
padding: 6px;
}
/* =====================================================================
PASS 110 — Accueil mobile : le 4e volet des soins (Périnatalité) était
inatteignable. Le carrousel s'appuyait uniquement sur le JS (qui pilote
track.scrollLeft) alors que la piste n'était pas réellement scrollable.
On la rend scrollable NATIVEMENT (swipe du doigt) : les 4 cartes sont
atteignables même si le JS échoue — et les flèches JS continuent de
fonctionner puisqu'elles écrivent dans ce même track.scrollLeft.
Desktop non touché (règle sous max-width 768px).
===================================================================== */
@media (max-width: 768px) {
body main .services-swiper .swiper-wrapper {
overflow-x: auto !important;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
body main .services-swiper .swiper-wrapper::-webkit-scrollbar { display: none; }
body main .services-swiper .service-card.swiper-slide {
scroll-snap-align: center;
}
}
/* =====================================================================
PASS 111 — Section « Mes cabinets » (page Réservation).
Héloïse exerce bientôt sur plusieurs adresses (Pâquis, Eysins dès
novembre, Eaux-Vives cet automne), chacune avec SON agenda Onedoc.
Une carte par cabinet ; les cartes à venir portent un emplacement
prêt à recevoir l'agenda (voir commentaires dans reservation.html).
===================================================================== */
.cabinets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.cabinet-card {
background: #fff;
border: 1px solid rgba(44, 185, 198, 0.18);
border-radius: 20px;
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 8px 22px -14px rgba(46, 41, 34, 0.18);
}
.cabinet-card--open { border-color: rgba(44, 185, 198, 0.45); }
.cabinet-card__head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
}
.cabinet-card__name {
font-family: var(--font-heading, 'Cormorant Garamond', serif);
font-size: 1.3rem; font-weight: 600; margin: 0;
color: var(--color-text);
}
.cabinet-card__badge {
font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
font-weight: 600; padding: 4px 10px; border-radius: 999px;
background: rgba(46, 41, 34, 0.08); color: var(--color-text-muted);
white-space: nowrap;
}
.cabinet-card__badge--open { background: rgba(44, 185, 198, 0.14); color: #1A6F77; }
.cabinet-card__addr {
margin: 0; color: var(--color-text-muted);
line-height: 1.6; font-size: 0.95rem;
}
.cabinet-card__addr i { color: var(--color-primary); margin-right: 4px; }
.cabinet-card__note {
margin: 0; font-size: 0.86rem; font-style: italic;
color: var(--color-text-muted); opacity: 0.85;
}
.cabinet-card__actions { margin-top: auto; padding-top: 6px; display: flex; }
.cabinet-card__actions .btn { width: 100%; justify-content: center; }
@media (max-width: 980px) { .cabinets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .cabinets { grid-template-columns: 1fr; } }
/* =====================================================================
PASS 112 — Flèche de défilement des diplômes (retour cliente).
Le bandeau déborde horizontalement (surtout sur mobile, et plus encore
depuis le 6e diplôme) sans aucun indice visuel. Le bouton est injecté
par global.js et n'est AFFICHÉ que si .is-scrollable est posée, c'est-
à-dire uniquement quand il y a réellement de quoi défiler (donc jamais
sur desktop où la grille tient sur place). Collé à droite en sticky.
===================================================================== */
.recognition-v4__diplomas .dipl-next { display: none; }
.recognition-v4__diplomas.is-scrollable .dipl-next {
display: flex; align-items: center; justify-content: center;
position: -webkit-sticky; position: sticky; right: 2px;
flex: 0 0 34px; width: 34px; height: 34px;
align-self: center;
padding: 0; border: none; border-radius: 50%;
background: rgba(31, 82, 86, 0.92); color: #FFF7DA;
font-size: 15px; line-height: 1; cursor: pointer;
box-shadow: 0 4px 14px -4px rgba(46, 41, 34, 0.45);
scroll-snap-align: none;
transition: background 0.2s ease, transform 0.2s ease;
z-index: 2;
}
.recognition-v4__diplomas.is-scrollable .dipl-next i {
display: block;
transition: transform 0.25s ease;
}
.recognition-v4__diplomas.is-scrollable .dipl-next:hover {
background: #1F5256; transform: scale(1.06);
}
/* Arrivé au bout : la flèche se retourne (elle ramène au début) */
.recognition-v4__diplomas.is-scrollable .dipl-next.is-end i { transform: rotate(180deg); }
/* =====================================================================
PASS 113 — ÉVÉNEMENTS (page liste /evenements + page détail
/evenement-, rendues par api/evenements.js et api/evenement.js).
Même langage visuel que les cartes du site : fond blanc, accents teal,
coins arrondis, ombre douce. Les événements passés sont légèrement
estompés pour que les prochains ressortent.
===================================================================== */
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1024px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .events-grid { grid-template-columns: 1fr; } }
.event-card {
background: #fff;
border: 1px solid rgba(44, 185, 198, 0.16);
border-radius: 20px;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 8px 22px -14px rgba(46, 41, 34, 0.18);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(46, 41, 34, 0.26); }
.event-card--past { opacity: 0.82; }
.event-card__media { aspect-ratio: 16 / 9; background: var(--color-soft, #F3EFE6); }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card__body { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.event-card__meta {
font-size: 0.8rem; color: var(--color-primary); font-weight: 600;
display: flex; align-items: center; gap: 6px;
}
.event-card--past .event-card__meta { color: var(--color-text-muted); }
.event-card__title {
font-family: var(--font-heading, 'Cormorant Garamond', serif);
font-size: 1.35rem; font-weight: 600; margin: 0;
color: var(--color-text); line-height: 1.2;
}
.event-card__excerpt { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--color-text-muted); }
.event-card__foot {
margin-top: auto; padding-top: 8px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.event-card__tarif {
font-size: 0.82rem; font-weight: 600; color: #1A6F77;
background: rgba(44, 185, 198, 0.12); padding: 3px 10px; border-radius: 999px;
}
.events-empty {
grid-column: 1 / -1; text-align: center; font-style: italic;
color: var(--color-text-muted); padding: 24px 0;
}
/* ---- page détail d'un événement ---- */
.event-detail { padding-top: clamp(120px, 16vw, 170px); }
.event-detail__back { margin-bottom: 18px; }
.event-detail__status {
display: inline-block; font-size: 0.72rem; text-transform: uppercase;
letter-spacing: 0.1em; font-weight: 600; padding: 4px 12px; border-radius: 999px;
background: rgba(46, 41, 34, 0.08); color: var(--color-text-muted);
}
.event-detail__status.is-upcoming { background: rgba(44, 185, 198, 0.14); color: #1A6F77; }
.event-detail__title {
font-family: var(--font-heading, 'Cormorant Garamond', serif);
font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08;
margin: 14px 0 10px; color: var(--color-text);
}
.event-detail__lead { font-size: 1.05rem; line-height: 1.65; color: var(--color-text-muted); margin: 0 0 20px; }
.event-detail__meta {
display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 14px 0;
border-top: 1px solid rgba(44, 185, 198, 0.18);
border-bottom: 1px solid rgba(44, 185, 198, 0.18);
margin-bottom: 26px;
}
.event-detail__meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.92rem; color: var(--color-text); }
.event-detail__meta i { color: var(--color-primary); font-size: 17px; }
.event-detail__cover { margin: 0 0 26px; border-radius: 20px; overflow: hidden; }
.event-detail__cover img { width: 100%; height: auto; display: block; }
.event-detail__cta { margin-top: 30px; display: flex; justify-content: center; }
/* =====================================================================
PASS 101 — Marquees affiliations / réseau : glissables à la main.
Quand le JS est actif (voir global.js → setupAffMarquees), il ajoute
.is-draggable : on remplace l'animation transform CSS par un scroll
natif horizontal (drag souris + swipe tactile + dérive auto douce).
Sans JS ou en prefers-reduced-motion, le comportement CSS d'origine
reste inchangé. Fin de fichier → source postérieure = gagne.
===================================================================== */
.aff-marquee.is-draggable .aff-marquee__track {
animation: none !important;
transform: none !important;
width: -webkit-max-content;
width: max-content;
}
.aff-marquee.is-draggable .aff-marquee__viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: auto;
cursor: -webkit-grab;
cursor: grab;
-webkit-overflow-scrolling: touch; /* momentum tactile iOS */
scrollbar-width: none;
-ms-overflow-style: none;
}
.aff-marquee.is-draggable .aff-marquee__viewport::-webkit-scrollbar { display: none; }
.aff-marquee.is-draggable .aff-marquee__viewport.is-grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* Pendant un drag souris : pas de sélection ni de drag-fantôme des liens/images */
.aff-marquee.is-draggable .aff-marquee__viewport.is-grabbing,
.aff-marquee.is-draggable .aff-marquee__viewport.is-grabbing * {
-webkit-user-select: none; -moz-user-select: none; user-select: none;
cursor: grabbing !important;
}
.aff-marquee.is-draggable .aff-chip,
.aff-marquee.is-draggable .aff-chip img {
-webkit-user-drag: none;
}
/* =====================================================================
PASS 102 — Accueil : les 4 infos de réassurance intégrées dans la carte
hero (demande cliente), en plus du drapeau LGBTQIA et du sélecteur de
langue. Les 4 faits texte passent en 2 colonnes (comme l'ancienne barre) ;
le drapeau LGBTQIA et le sélecteur restent des pastilles compactes.
===================================================================== */
.hero__insights--facts { gap: 8px !important; }
.hero__insights--facts .hero__insight:not(.hero__insight--icon):not(.hero__insight--langs) {
flex: 1 1 calc(50% - 4px);
min-width: 0;
white-space: normal;
justify-content: flex-start;
line-height: 1.25;
}
.hero__insights--facts .hero__insight--icon { padding: 8px; }
@media (max-width: 768px) {
.hero__insights--facts .hero__insight:not(.hero__insight--icon):not(.hero__insight--langs) { flex-basis: 100%; }
}
/* =====================================================================
PASS 103 — Diplômes (qui-suis-je & pages soins) : carrousel horizontal
sur mobile (demande cliente) au lieu de la grille 2 colonnes. Swipe
natif + scroll-snap ; ~2 vignettes visibles + aperçu de la suivante.
===================================================================== */
@media (max-width: 768px) {
.recognition-v4__diplomas {
display: flex;
grid-template-columns: none;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
gap: 12px;
padding-bottom: 4px;
scroll-padding-left: 2px;
}
.recognition-v4__diplomas::-webkit-scrollbar { display: none; }
.recognition-v4__diplomas .recognition-dipl {
flex: 0 0 46%;
scroll-snap-align: start;
}
}
/* =====================================================================
PASS 114 — ÉVÉNEMENTS : lisibilité des informations pratiques.
Retour cliente : « les infos ne sont pas assez démarquées ». Tout
était aggloméré sur une seule ligne (date · horaire · lieu), en teal
clair, qui repassait à la ligne n'importe où.
Désormais : la date est une pastille en tête de carte, l'horaire et
le lieu ont chacun leur ligne et leur icône sous un filet, et la page
détail présente chaque info dans un bloc étiqueté (Date, Horaire…).
Les sélecteurs reprennent le parent (.event-detail__meta) car PASS 113
cible « .event-detail__meta span » (0,1,1) — sinon il l'emporterait.
Fin de fichier → source postérieure = gagne.
===================================================================== */
/* ---- carte : la date, mise en avant ---- */
.event-card__date {
margin: 0;
align-self: flex-start;
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 13px; border-radius: 999px;
background: rgba(44, 185, 198, 0.12);
color: #1A6F77;
font-size: 0.8rem; font-weight: 600; line-height: 1.3;
}
.event-card__date i { font-size: 15px; flex: 0 0 auto; }
.event-card--past .event-card__date {
background: rgba(46, 41, 34, 0.07);
color: var(--color-text-muted);
}
/* ---- carte : horaire et lieu, une ligne chacun ---- */
.event-card__facts {
list-style: none; margin: 0; padding: 13px 0 0;
border-top: 1px solid rgba(44, 185, 198, 0.16);
display: grid; gap: 8px;
}
.event-card__facts li {
display: grid; grid-template-columns: 17px 1fr; gap: 9px;
align-items: start;
font-size: 0.86rem; line-height: 1.45;
color: var(--color-text);
}
.event-card__facts i { color: var(--color-primary); font-size: 16px; line-height: 1.35; }
.event-card--past .event-card__facts i { color: var(--color-text-muted); }
.event-card__foot { padding-top: 14px; }
/* ---- page détail : un bloc étiqueté par information ---- */
.event-detail__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 18px 24px;
padding: 20px 0;
}
.event-detail__meta .event-detail__bit {
display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
}
.event-detail__meta .event-detail__bit i {
color: var(--color-primary); font-size: 19px; line-height: 1.25;
}
.event-detail__meta .event-detail__bit-txt { display: block; min-width: 0; }
.event-detail__meta .event-detail__bit-label {
display: block; margin-bottom: 3px;
font-size: 0.68rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--color-text-muted);
}
.event-detail__meta .event-detail__bit-value {
display: block;
font-size: 0.95rem; font-weight: 600; line-height: 1.45;
color: var(--color-text);
}
/* ---- page détail : mise en forme du texte rédigé par la cliente ----
Le contenu écrit dans l'éditeur (paragraphes, titres, listes à puces)
n'avait aucun style : la classe « prose » utilisée au départ n'existe
nulle part, et la remise à zéro globale « ul { list-style: none } »
supprimait les puces et les retraits. On reprend ici la typographie
des articles de blog (.article-prose, définie dans api/article.js). */
.event-detail__content {
font-family: var(--font-body);
font-size: 17px; line-height: 1.75;
color: var(--color-text);
}
.event-detail__content p { margin: 0 0 22px; }
.event-detail__content h2 {
font-family: var(--font-heading);
font-size: clamp(26px, 3.2vw, 34px); font-weight: 600;
color: #1F5256; margin: 44px 0 16px; line-height: 1.2;
letter-spacing: -0.01em;
}
.event-detail__content h3 {
font-family: var(--font-heading);
font-size: clamp(21px, 2.5vw, 25px); font-weight: 600;
color: #1F5256; margin: 34px 0 12px; line-height: 1.3;
}
.event-detail__content h2:first-child,
.event-detail__content h3:first-child { margin-top: 0; }
.event-detail__content ul,
.event-detail__content ol { margin: 0 0 24px; padding-left: 22px; }
.event-detail__content ul { list-style: disc; }
.event-detail__content ol { list-style: decimal; }
.event-detail__content li { margin-bottom: 10px; display: list-item; }
.event-detail__content li::marker { color: #B47A3F; }
.event-detail__content strong { color: #1F5256; font-weight: 600; }
.event-detail__content em { font-style: italic; }
.event-detail__content a {
color: #2C6E72; text-decoration: underline;
text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.event-detail__content a:hover { color: #B47A3F; }
.event-detail__content img { max-width: 100%; border-radius: 16px; margin: 8px 0 22px; }
.event-detail__content blockquote {
margin: 0 0 24px; padding: 2px 0 2px 18px;
border-left: 3px solid rgba(44, 185, 198, 0.4);
color: var(--color-text-muted); font-style: italic;
}
/* =====================================================================
PASS 115 — Pied de page : deux cabinets au lieu d'un (demande cliente
« je serai aussi à Eysins, chez Sana Mente »). Les deux adresses sont
empilées, chacune précédée du nom du lieu — sans étiquette on lirait
une seule adresse de six lignes. Le « dès novembre » disparaîtra
à l'ouverture du cabinet (voir le commentaire dans le HTML).
Fin de fichier → source postérieure = gagne.
===================================================================== */
.footer__contact .footer__cab {
display: block;
font-size: 0.74rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--color-primary-strong);
margin-bottom: 3px;
}
.footer__contact p + p { padding-top: 2px; }
.footer__contact .footer__cab-soon {
display: inline-block; margin-top: 4px;
font-style: normal; font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.04em;
padding: 2px 9px; border-radius: 999px;
background: rgba(44, 185, 198, 0.12); color: #1A6F77;
}
/* =====================================================================
PASS 116 — Diapasons : citation « Le corps écoute » illisible sur mobile
(retour cliente). Le texte blanc italique fin était posé sur les
diapasons et les boules colorées, avec un voile de 6 à 18 % seulement.
Uniquement cette section (modificateur --diapasons) et uniquement en
mobile : le desktop et les autres citations ne changent pas.
===================================================================== */
@media (max-width: 768px) {
html body section.fixed-quote.fixed-quote--diapasons::after {
background: rgba(16, 24, 28, 0.62) !important;
}
/* !important : l'italique et la taille de la citation sont deja
imposes en !important par une passe precedente. */
html body section.fixed-quote.fixed-quote--diapasons blockquote p {
font-style: normal !important;
font-weight: 600 !important;
font-size: 1.4rem !important;
line-height: 1.38 !important;
}
}
/* =====================================================================
PASS 117 — Fiche événement : l'image de couverture prenait toute la
largeur à hauteur libre ; une affiche verticale (1080x1350) occupait
ainsi plus de 1600 px de haut (retour cliente). On plafonne la hauteur
et on centre : une image horizontale garde sa largeur, une affiche
verticale s'affiche entière, en format raisonnable.
===================================================================== */
.event-detail__cover {
display: flex; justify-content: center;
background: transparent;
}
.event-detail__cover img {
width: auto; max-width: 100%;
height: auto; max-height: 520px;
border-radius: 20px;
}
@media (max-width: 680px) {
.event-detail__cover img { max-height: 420px; }
}
/* =====================================================================
PASS 118 — Fiche événement : l'image passe À CÔTÉ du texte au lieu
d'au-dessus (retour cliente). Seulement si l'événement a une image
(.event-detail--avec-image) : la page s'élargit, titre et infos
pratiques restent pleine largeur, puis texte à gauche / image à
droite, qui reste visible pendant la lecture (sticky). Sous 900 px :
une seule colonne, l'image revient au-dessus du texte.
===================================================================== */
.event-detail--avec-image .container--narrow { max-width: 1080px; }
.event-detail--avec-image .event-detail__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
gap: 48px;
align-items: start;
}
.event-detail--avec-image .event-detail__cover {
grid-column: 2; grid-row: 1;
position: sticky; top: 120px;
margin: 0;
}
.event-detail--avec-image .event-detail__main { grid-column: 1; grid-row: 1; min-width: 0; }
.event-detail--avec-image .event-detail__cover img {
width: 100%; height: auto; max-height: 640px; object-fit: contain;
}
.event-detail--avec-image .event-detail__cta { justify-content: flex-start; }
@media (max-width: 900px) {
.event-detail--avec-image .container--narrow { max-width: var(--container-narrow); }
.event-detail--avec-image .event-detail__body { display: flex; flex-direction: column; gap: 0; }
.event-detail--avec-image .event-detail__cover { order: -1; position: static; margin: 0 0 26px; }
/* Jamais de recadrage : une affiche contient du texte (titre, date).
L'image s'affiche entiere, centree, au plus 460 px de haut. */
.event-detail--avec-image .event-detail__cover { width: 100%; display: flex; justify-content: center; }
.event-detail--avec-image .event-detail__cover img {
width: auto; max-width: 100%; height: auto; max-height: 460px;
object-fit: contain;
}
.event-detail--avec-image .event-detail__cta { justify-content: center; }
}
/* =====================================================================
PASS 119 — Carrousels bloqués au DOIGT sur téléphone (retour cliente :
« le 4e soin n'est jamais apparu »). 16 règles touch-action se
contredisaient : le conteneur finissait en pan-x, la zone qui défile
en pan-y. Le navigateur applique l'INTERSECTION des valeurs d'un
élément et de ses ancêtres → aucun geste autorisé, carrousel figé au
toucher (alors qu'il défilait à la souris, d'où les tests trompeurs).
pan-y était un héritage de Swiper JS, retiré depuis : les carrousels
défilent désormais nativement et doivent accepter les deux directions.
`:root` + !important pour passer devant les 16 règles existantes.
===================================================================== */
@media (max-width: 768px) {
html:root body main .swiper,
html:root body main .swiper > .swiper-wrapper,
html:root body main .swiper-wrapper,
html:root body main .swiper-slide,
html:root body main .swiper-slide *,
html:root body main .swiper > .swiper-wrapper > .swiper-slide,
html:root body main .swiper > .swiper-wrapper > .swiper-slide *,
/* grilles defilantes qui ne portent pas la classe .swiper (ex. avis de
en/soin-biomecanique) */
html:root body main .reviews-grid,
html:root body main .reviews-grid *,
html:root body main .why-grid,
html:root body main .why-grid *,
html:root body main .diplomas-strip,
html:root body main .diplomas-strip * {
touch-action: pan-x pan-y !important;
}
}