*{
	padding:0;margin:0;box-sizing:border-box; outline:none; -webkit-font-variant-ligatures: no-common-ligatures!important; font-variant-ligatures: no-common-ligatures!important;
}

/* ---------------------------------------------------------------------------------------------------- FONTS ---------------------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'alright';
    src: url('fonts/alrightsans-regular-v3-webfont.woff2') format('woff2'),
         url('fonts/alrightsans-regular-v3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'heimat-l';
    src: url('fonts/heimat_didone_10_light-webfont.woff2') format('woff2'),
         url('fonts/heimat_didone_10_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'heimat-i';
    src: url('fonts/heimat_didone_10_semi_bold_italic-webfont.woff2') format('woff2'),
         url('fonts/heimat_didone_10_semi_bold_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'heimat-sb';
    src: url('fonts/heimat_didone_10_semi_bold-webfont.woff2') format('woff2'),
         url('fonts/heimat_didone_10_semi_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'alright-b';
    src: url('fonts/alrightsans-bold-v3-webfont.woff2') format('woff2'),
         url('fonts/alrightsans-bold-v3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'alright-l';
    src: url('fonts/alrightsans-light-v3-webfont.woff2') format('woff2'),
         url('fonts/alrightsans-light-v3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'alright-sb';
    src: url('fonts/alrightsans-medium-v3-webfont.woff2') format('woff2'),
         url('fonts/alrightsans-medium-v3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'alright-i';
    src: url('fonts/alrightsans-regularitalic-v3-webfont.woff2') format('woff2'),
         url('fonts/alrightsans-regularitalic-v3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.alright {font-family:'alright'!important; font-weight:normal; font-style:normal;}
.alright-l {font-family:'alright-l'!important; font-weight:normal; font-style:normal;}
.alright-i {font-family:'alright-i'!important; font-weight:normal; font-style:normal;}
.alright-b {font-family:'alright-b'!important; font-weight:normal; font-style:normal;}
.alright-sb {font-family:'alright-sb'!important; font-weight:normal; font-style:normal;}
.heimat-l {font-family:'heimat-l'!important; font-weight:normal; font-style:normal;}
.heimat-sb {font-family:'heimat-sb'!important; font-weight:normal; font-style:normal;}
.heimat-i {font-family:'heimat-i'!important; font-weight:normal; font-style:normal;}

.font10 {font-size:10px;} 
.font11 {font-size:11px;} 
.font12 {font-size:12px;} 
.font13 {font-size:13px;} 
.font14 {font-size:14px;} 
.font15 {font-size:15px;} 
.font16 {font-size:16px;} 
.font17 {font-size:17px;} 
.font18 {font-size:18px;} 
.font19 {font-size:19px;} 
.font20 {font-size:20px;} 
.font22 {font-size:22px;} 
.font24 {font-size:24px;} 
.font26 {font-size:26px;} 
.font28 {font-size:28px;} 
.font30 {font-size:30px;} 
.font32 {font-size:32px;} 
.font34 {font-size:34px;} 
.font36 {font-size:36px;} 
.font40 {font-size:40px;} 
.font44 {font-size:44px;} 
.font48 {font-size:48px;} 
.font50 {font-size:50px;}
.font55 {font-size:55px;} 
.font60 {font-size:60px;}
.font70 {font-size:70px;}
.font80 {font-size:80px;}
.font85 {font-size:85px;}

/* ---------------------------------------------------------------------------------------------------- PARAMETRES GENERAUX ---------------------------------------------------------------------------------------------------- */
 
section,header,footer,figure,article,aside,nav,main {display:block;} 

button {border:none; background:none;}
a,a *,button,button *{-webkit-transition:all .25s ease;transition:all .25s ease; color:inherit; text-decoration:none; cursor:pointer; outline:0;} 
a img {border:0;} 
a:hover, button:hover {color:#F4A872; fill:#F4A872;}
img, svg {vertical-align:middle; border:none;}

ul,li {list-style-type:none;} 
b, strong {font-family:'alright-b'!important; font-weight:normal!important;}
em, em * {font-family:'alright-i'!important; font-weight:normal!important; font-style:normal!important;}
em b, em strong {font-weight:bold!important;}

p,div {font:14px 'alright'; color:#4D5878; line-height:24px; text-align:left; letter-spacing:.05em;} 

textarea {overflow:auto; resize:none;}
input,textarea {outline:0;}
input[type=submit] {cursor:pointer;}

h1,h2 {display:inline-block; width:100%; font:normal 70px 'heimat-sb'; color:#2D3561; text-align:center; vertical-align:middle; line-height:55px; margin-bottom:0px; letter-spacing:normal;}
h2 {font-size:50px; margin-bottom:25px; margin-top:15px; text-align:left;}

.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}
.right {text-align:right;}
.center {text-align:center;}
.justify {text-align:justify;}

/* ---------------------------------------------------------------------------------------------------- ELEMENTS GLOBAUX ---------------------------------------------------------------------------------------------------- */

@-webkit-keyframes scroll {from {margin-top:0px;} 25% {margin-top:6px} 75% {margin-top:-6px} to{margin-top:0px;}}

@keyframes scroll {from {margin-top:0px;} 25% {margin-top:6px} 75% {margin-top:-6px} to{margin-top:0px;}}

.bouton {display:inline-block; width:auto; padding:4px; border:solid 1px; position:relative; height:55px; text-decoration:none; vertical-align:top;}
.bouton>span {display:inline-block; width:auto; padding:0px 25px; height:100%; font:18px 'heimat-i'; line-height:45px; border:none; text-align:center; color:#fff; letter-spacing:normal;}
a.bouton:hover, button.bouton:hover {border-color:#2D3561;} a.bouton:hover span, button.bouton:hover span {background:#2D3561;}

.bouton svg {display:inline-block; width:20px; height:auto; vertical-align: middle; margin-left:10px; margin-top:-4px;}
.bouton svg * {fill:#fff}

.width960 {margin:auto; width:960px; position:relative; z-index:5;}
.width940 {margin:auto; width:940px; position:relative; z-index:5;}

.underline {text-decoration:underline;}

.col-big, .col-small {width:620px; padding-bottom:70px; position:relative; display:inline-block; vertical-align:top;}
.col-small {width:320px;}
.column {padding:70px 140px;} .column, .column * {text-align:center;}

.placeholder {color:#4D5878; opacity:1;} 
::-webkit-input-placeholder	{color:#4D5878; opacity:1;} 
::-moz-placeholder {color:#4D5878; opacity:1;}
::-ms-placeholder {color:#4D5878; opacity:1;}
::-ms-input-placeholder	{color:#4D5878; opacity:1;}
:-ms-input-placeholder	{color:#4D5878; opacity:1;}

/* ---------------------------------------------------------------------------------------------------- COULEURS ---------------------------------------------------------------------------------------------------- */

.blanc {color:#fff; fill:#fff;} 
.gris {color:#6B7392; fill:#6B7392;}
.orange {color:#F4A872; fill:#F4A872;}
.rose {color:#FFD4B8; fill:#FFD4B8;}
.kaki {color:#9B7EBD; fill:#9B7EBD;}
.kaki-alt {color:#B89DD6; fill:#9B7EBD;}
.noir {color:#2D3561; fill:#2D3561;}
.noir-alt {color:#4D5878; fill:#4D5878;}

.bgblanc {background:#fff;} 
.bggris {background:#6B7392;}
.bgorange {background:#F4A872;}
.bgrose {background:#FFD4B8;}
.bgkaki {background:#9B7EBD;}
.bgkaki-alt {background:#B89DD6;}
.bgnoir {background:#2D3561;}
.bgnoir-alt {background:#4D5878;}

/* ---------------------------------------------------------------------------------------------------- PAGE D'ACCUEIL ------------------------------------------------------------------------------------------*/

body {min-width:980px; width:100%; background-position:center top; background-repeat:no-repeat; background-attachment:fixed; background-image:url('images/background.jpg');}
.macaron-skype {position:fixed; right:10px; bottom:20px; z-index:1000;}
body.home {background-image:url('images/hero-accueil-aquarelle-montagne-serenite.jpg?v=blanchi2');}
body>header {width:100%; height:650px; z-index:1000; position:relative;}
body>header.index {height:800px;}

body>header>aside.bgrose>div {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
body>header>aside.bgrose>div>* {line-height:40px;}
.social a {display:inline-block; width:40px; height:40px; text-align:center; background:rgba(248,169,154,.7); line-height:40px;}
.social a+a {background:rgba(248,169,154,.4);}
.social a:hover {background:#F4A872;}

#logo {padding:50px 0;}
#logo a:hover svg {opacity:.7;}

#menu {position:relative; padding:4px; height:48px; z-index:100;}
#menu>li {display:inline-block; vertical-align:middle; height:40px; font:15px 'heimat-l'; text-align:center; width:132px; line-height:40px; color:#2D3561; letter-spacing:.05em; z-index:10; position:relative;}
#menu>li>a {display:block; width:100%; height:100%; line-height:40px;}
#menu>li:hover>a {color:inherit;}
#menu>li.active {background:#F4A872; color:#fff;}

#menu>li#barre {width:0px; -webkit-transition:all .6s ease; transition:all .6s ease; background:#fbd4cc; height:40px; position:absolute; top:4px; left:4px; z-index:5; opacity:0;}

#menu>li:hover ~ li#barre {width:132px; opacity:1;}
#menu>li:nth-child(1):hover ~ li#barre {left:4px;}
#menu>li:nth-child(2):hover ~ li#barre {left:136px;}
#menu>li:nth-child(3):hover ~ li#barre {left:268px;}
#menu>li:nth-child(4):hover ~ li#barre {left:400px;}
#menu>li:nth-child(5):hover ~ li#barre {left:532px;}
#menu>li:nth-child(6):hover ~ li#barre {left:664px;}
#menu>li:nth-child(7):hover ~ li#barre {left:796px;}
#menu>li:nth-child(8):hover ~ li#barre {left:816px;}

#menu>li.sous-menu ul {
    position:absolute; top:calc(100% + 4px); background:#FFD4B8; left:0; right:0; text-align:center;
}
#menu>li.sous-menu ul li {
    padding:0px; max-height:0; overflow:hidden; opacity:0; transition:all .5s ease .1s;
}
#menu>li.sous-menu ul li a {
    display:block; line-height:40px;color:#2D3561; 
}
#menu>li.sous-menu ul li a:hover {
    background:#F4A872;
    color:#fff;
}
#menu>li.sous-menu.open ul li {
    max-height:40px; opacity:1;
}

header h1 {margin-top:45px;}
header.index h1 {font-size:55px; line-height:45px; margin-bottom:40px; margin-top:0;}
header.index h1>span {letter-spacing:.2em;}

header.index>div.column {margin-top:60px;}

#main-content {position:relative; z-index:5; padding-bottom:130px; padding-top:70px;}
#main-content.index {background:url('images/background-main-home.png?v=blanc1') no-repeat center top; padding-top:0;}
#main-content:before {content:''; display:block; width:100%; height:132px; position:absolute; left:0; right:0; top:-130px; background:url('images/bg-main-top.png?v=initial') no-repeat top center; z-index:1;}
#scroll-link {display:inline-block; width:70px; position:absolute; left:0; right:0; margin:auto; bottom:-35px; top:auto; text-align:center; z-index:1000;}
#scroll-link>span {display:inline-block; width:70px; height:70px; text-align:center; line-height:70px; border-radius:70px; margin-top:10px;}
#scroll-link:hover>span {background:#F4A872;}
#scroll-link:hover>span svg * {fill:#fff;}

#accelerateurs {padding-bottom:60px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
#accelerateurs>a {width:300px; height:620px; position:relative;}
#accelerateurs>a>.img {width:100%; height:310px; background-position:center bottom; background-repeat:no-repeat;  text-align:center; background-size: contain; position: relative;}
#accelerateurs>a.psy>.img {background-image:url('images/bg-accelerateur-3.png');}
#accelerateurs>a.peri>.img {background-image:url('images/bg-accelerateur-1.png');}
#accelerateurs>a.addict>.img {background-image:url('images/bg-accelerateur-2.png');}

#accelerateurs>a>.img>img {width: 100%; max-height: 100%; position: absolute; object-fit: contain; bottom: 0; left: 50%; transform: translateX(-50%);}

#accelerateurs>a>.txt {margin-top:40px; text-align:center; padding:0 10px;}
#accelerateurs>a>.txt strong {letter-spacing:normal;}

#accelerateurs>a>.bouton {position:absolute; margin:auto; width:180px; left:0; right:0; bottom:-20px; opacity:0;}
#accelerateurs>a>.bouton span {width:170px;}

#accelerateurs>a:hover>.img img {opacity:.25;}
#accelerateurs>a:hover>.txt strong {color:#F4A872!important;}

#accelerateurs>a:hover>.bouton {-webkit-transition-delay:.2s;transition-delay:.2s; bottom:0; opacity:1;}

body>footer {width:100%; background:url('images/background-footer.png') no-repeat center top / cover; padding-top:90px; position:relative; z-index:20; margin-top:-130px;}
.bt-top {display:block; width:70px; height:70px; line-height:65px; text-align:center; border-radius:70px; background:none; position:absolute; top:-35px; margin:auto; left:0; right:0;}
.bt-top:hover svg{-webkit-animation:scroll .6s linear infinite;animation:scroll .6s linear infinite;}

body>footer>nav.width940 {border-bottom:solid 1px rgba(255,255,255,.2); height:70px; z-index:10;}
body>footer>nav>ul {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; height:70px; font:15px 'heimat-l'; color:#fff; letter-spacing:.05em;}
body>footer a:hover, body>footer>nav>ul li.active a, body>footer>div a:hover svg *  {color:#B89DD6; fill:#B89DD6;}
body>footer>nav>.social {display:inline-block; height:40px; position:absolute; top:100%; right:0;}
body>footer>nav>.social>a {display:inline-block; width:40px; height:40px; text-align:center; background:#B89DD6; line-height:40px;}
body>footer>nav>.social>a svg * {fill:#2D3561;}
body>footer>nav>.social>a:last-child {background:#9B7EBD;}
body>footer>nav>.social>a:hover {background:rgba(255,255,255,.5);}
body>footer>div a svg *  {fill:rgba(255,255,255,.5);}

body>footer>div {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:end; -ms-flex-align:end; align-items:flex-end; padding:75px 0; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
body>footer>div>p {color:rgba(255,255,255,.5);}

/* ---------------------------------------------------------------------------------------------------- PAGE PRESENTATION ------------------------------------------------------------------------------------------*/

#main-content.presentation {background:url('images/background-main-presentation.png?v=blanc1') no-repeat center top;}

img.illus {position:absolute; z-index:10;}
img.illus.presentation-1 {top:30px; right:0px;}
img.illus.presentation-2 {top:-20px; left:-10px;}
img.illus.presentation-3 {top:20px; right:-25px;}
img.illus.presentation-4 {top:40px; left:-55px;}

#accelerateurs.alt {margin-top:20px;}
#accelerateurs.alt>a {height:460px;}

/* ---------------------------------------------------------------------------------------------------- PAGE PSYCHOLOGUE ------------------------------------------------------------------------------------------*/

#main-content.psychologue {background:url('images/background-main-psychologue.png') no-repeat center top;}

img.illus.psy-1 {right:-10px; top:25px;}
img.illus.psy-2 {left:-70px; top:50px;}
img.illus.psy-3 {right:-10px; top:0px;}

/* ---------------------------------------------------------------------------------------------------- PAGE ICV EMDR ------------------------------------------------------------------------------------------*/
#main-content.icv {background-color: #fff;}
#main-content.icv:after {display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 2; content:'';background:url('images/background-main-icv.jpg') no-repeat center top; background-size: 120% auto;}

img.illus.icv-2 {left:-100px; top:50px;}
img.illus.icv-3 {right:-80px; top:110px;}

/* ---------------------------------------------------------------------------------------------------- PAGE PÉRINATALITÉ ------------------------------------------------------------------------------------------*/

#main-content.perinatalite {background:url('images/background-main-perinatalite.png') no-repeat center top;}

img.illus.peri-1 {right:0px; top:-30px;}
img.illus.peri-2 {left:-110px; top:60px;}
img.illus.peri-3 {right:-65px; top:100px;}
img.illus.peri-4 {left:0px; top:-25px;}
img.illus.peri-5 {right:-55px; top:35px;}
img.illus.peri-6 {left:-35px; top:-15px;}

.txt-cadre {background:none; border:solid 1px; padding:40px 80px 55px 80px; margin-bottom:80px;}
.txt-cadre .bouton {background:#FBF5EE; width:210px; position:absolute; bottom:-28px; left:0; right:0; margin:auto;}
.txt-cadre .bouton span {width:200px;}

/* ---------------------------------------------------------------------------------------------------- PAGE ADDICTIONS ------------------------------------------------------------------------------------------*/

#main-content.addictions {background:url('images/background-main-addictologie.png') no-repeat center top;}

img.illus.addict-1 {right:-100px; top:110px;}
img.illus.addict-2 {left:-35px; top:-25px;}
img.illus.addict-3 {right:0px; top:0px;}
img.illus.addict-4 {left:-15px; top:0px;}
img.illus.addict-5 {right:-75px; top:60px;}
img.illus.addict-6 {left:0px; top:-30px;}

/* ---------------------------------------------------------------------------------------------------- PAGE HONORAIRES ------------------------------------------------------------------------------------------*/

#main-content.honoraires {background:url('images/background-main-honoraires.png') no-repeat center top; padding-top:0;}
.blocs-honoraires {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -ms-flex-pack:distribute; justify-content:space-around; text-align:center; padding-top:20px; margin:0 -140px;}
.blocs-honoraires>p svg {margin:15px 0 25px 0;} .blocs-honoraires>p svg * {fill:#fff;}
.blocs-honoraires>p span.font24 {letter-spacing:normal;}
.blocs-honoraires>p.cabinet {width:276px; height:422px; background:url('images/bloc-consultations-au-cabinet.png') no-repeat center center; margin:0px 10px; padding-top:115px; line-height:18px; padding-right:5px; margin-top:20px;}
.blocs-honoraires>p.specialisee {width:241px; height:394px; background:url('images/bloc-consultations-domicile.png') no-repeat center center; margin:0px 10px; padding-top:105px; line-height:18px; padding-left:15px;}
.blocs-honoraires>p.domicile {width:276px; height:422px; background:url('images/bloc-consultations-au-cabinet.png') no-repeat center center; margin:0px 10px; padding-top:115px; line-height:18px; padding-right:5px; margin-top:20px;}
.blocs-honoraires>p.bilan {width:241px; height:394px; background:url('images/bloc-consultations-domicile.png') no-repeat center center; margin:0px 10px; padding-top:105px; line-height:18px; padding-left:15px;}
.blocs-honoraires>p.bilan span.font24 {line-height:28px;}

/* ---------------------------------------------------------------------------------------------------- PAGE PARTENAIRES ------------------------------------------------------------------------------------------*/

#main-content.partenaires {background:#fff; padding-top:0;}

/* ---------------------------------------------------------------------------------------------------- PAGE CONTACT ------------------------------------------------------------------------------------------*/

#main-content.contact {background:#fff; padding-top:0;}

#formcontact {padding:0px 80px; padding-bottom:50px;}
#formcontact>div {display:inline-block; width:49%; vertical-align:top; padding:0px 5px;}

#formcontact input[type=text], #formcontact textarea {width:100%; height:50px; padding:0px 20px; border:solid 1px #bbc7cb; background:#fff; font:14px 'alright'; color:#4D5878; margin-bottom:10px; -webkit-transition:all .4s ease; transition:all .4s ease;}
#formcontact textarea {height:170px; padding-top:15px; margin-bottom:2px;}
#formcontact input[type=text]:focus, #formcontact textarea:focus {box-shadow:inset 0px 0px 7px rgba(0,0,0,.1); background:#f7f7f7;}

#formcontact button[type=submit]:hover {border-color:#F4A872;}
#formcontact button[type=submit]:hover span {background:#F4A872;}

#formcontact div.consentement.error p.consentement{color:red}

#map {position:relative; width:75%; margin:auto; z-index:10; overflow:hidden; margin-bottom:70px; border:solid 1px #2D3561; padding:10px;}
#map #carte {display:block; width:100%; margin:auto; position:relative; top:0px; margin-bottom:0px; height:600px; border:0; border:solid 1px #9B7EBD}

.picto-contact {
    display:inline-flex;
    align-items:center;
    justify-content: center;
    background:#F4A872;
    border-radius:50%;
    width:60px;
    height:60px;
    margin:10px;
    vertical-align: middle;
}

.picto-contact svg {
    width:50%;
    height:auto;
}

.picto-contact svg * {
    fill:#fff;
}

/* ==========================================================================
   END OF FOOTER
   ========================================================================== */

   .grecaptcha-badge {
    opacity:0;
    position:absolute;
    z-index:-1;
}

/* BOUTON CONTACT FLOTTANT */

.bouton_contact {
    position:fixed;
    z-index:100000;
    color:#F4A872;
    bottom:60px;
    right:60px;
    display:inline-flex;
    align-items:center;
    justify-content: flex-end;
    font-family: 'alright', sans-serif;
    font-size:16px;
    line-height:1;
}

.bouton_contact_img {
    width:50px;
    height:50px;
    margin-left:10px;
    border-radius:50%;
    background:#F4A872;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bouton_contact_img svg {
    width:26px;
    height:auto;
}
.bouton_contact_img svg * {
    fill:#fff;
}

.bouton_contact:hover {
    color:rgba(255,255,255,0);
}
.bouton_contact:hover .bouton_contact_img {
    background:#2D3561;
    margin-left:-30px;
}

/******************************* RESPONSIVE */

@media (max-width:780px) {
    
    .hidden-xs {
        display:none;
    }
    
    .font10,.font11,.font12,.font13,.font14 {font-size:14px;} 
    .font15,.font16,.font17,.font18 {font-size:16px;} 
    .font19,.font20,.font22 {font-size:18px;} 
    .font24,.font26,.font28 {font-size:20px;} 
    .font30,.font32,.font34,.font36 {font-size:24px;} 
    .font40,.font44,.font48 {font-size:26px;} 
    .font50,.font55,.font60 {font-size:32px;}
    .font70,.font80,.font85 {font-size:36px;}
    
    p,div {line-height:1.5; letter-spacing:.025em;} 
    
    h1,h2 {font:normal 40px 'heimat-sb'; line-height:0.8;}
    h2 {font-size:26px; margin-bottom:25px; margin-top:20px;}
    
    .bouton {height:45px;}
    .bouton>span {padding:0px 17px; font:16px 'heimat-i'; line-height:35px;}
    .bouton svg {width:15px; }

    .width960,.width940 {width:100%;}

    .col-big, .col-small, .column {width:100%; padding:50px 30px;}
    
    .col-big+.col-small {
        padding-top:0;
    }
    
    body {min-width:0px;}
    
    body>header {height:auto; z-index:1000; padding-bottom:100px;}
    
    body>header.index:after {
        content:'';
        display:block;
        position:absolute;
        z-index:-1;
        top:0; bottom:0; left:0; right:0;
        background:#F4A872; 
        opacity:.5;
    }
    
    body>header.index {height:100vh;}
    
    #logo {
        padding:45px 30px 25px;
        position:static;
    }
    
    #logo>a>svg {
        width:200px;
        height:auto;
    }
    
    body>header .social {
        position:fixed;
        z-index:10000;
        top:0;
        left:0;
        right:0;
        height:75px;
        display:flex;
        align-items:flex-start;
        justify-content: flex-end;
        padding:15px 15px 0 0;
    }
    
    
    /**********************************/ 
    /* NAVIGATION MENU */
    /**********************************/ 
    
    .burger {
        width:48px;
        height:48px;
        border-radius:50%;
        background:#fff;
        display:inline-flex;
        align-items:center;
        justify-content: center;
        flex-direction:column;
        margin-left:15px;
        vertical-align: top;
    }
    
    .burger_bar {
        width:20px;
        height:2px;
        display:block;
        background:#F4A872;
        transition:all .25s ease-out .25s, transform .25s ease-out 0s;
    }
    
    .burger_bar+.burger_bar {
        margin-top:4px;
    }
    
    .active .burger_bar {
        transform: rotate(-45deg);
        transition:all .25s ease-out, transform .25s ease-out .25s;
    }
    .active .burger_bar+.burger_bar {
        margin-top:-2px!important;
    }
    .active .burger_bar:last-child {
        transform:rotate(45deg);
    }
    
    #menu {
        position:fixed;
        z-index:9999;
        top:0;
        right:0;
        width:0;
        overflow:hidden;
        height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:28px;
        padding:70px 0px;
        transition:all .35s ease-out .2s;
    }

    #menu>li {
        display:block;
        font:20px 'Cormorant Infant', serif;
        font-style:italic;
        text-align:center;
        width:auto;
        transition:all .2s ease-out 0s;
        color:#2D3561;
        transform:translateX(-20%);
        opacity:0;
    }
    
    #menu>li.active {background:none; color:#4D5878;}
    #menu>li:hover>a {color:#F4A872;}

    #menu>li#barre {display:none;}
    
    #menu>li.social a {
        display:inline-flex;
        width:40px;
        height:40px;
        border-radius:50%;
        align-items: center;
        justify-content: center;
    }
    
    #menu>li.social a+a {
        margin-left:15px;
    }
    
    .active #menu {
        width:100%;
        padding:70px 30px;
        transition-delay: 0s;
    }
    
    .active #menu>li {
        transform: none;
        transition-delay: .3s;
        opacity:1;
    }
    
    /**********************************/ 
    /* HEADER HOME */
    /**********************************/ 
    
    header h1 {margin-top:45px;}
    header.index h1 {font-size:45px; line-height:38px; margin-bottom:30px; margin-top:30px;}
    header.index h1>span {letter-spacing:.2em;}

    header.index>div.column {margin-top:0px;}
    
    
    /**********************************/ 
    /* MAIN CONTENT */
    /**********************************/ 
    
    #main-content {padding-bottom:80px; padding-top:40px;}
    #main-content.index {background:#fff; padding-top:16px;}
    #main-content:before {display: none;}
    
    #accelerateurs {padding-bottom:80px; display:flex; align-items:center; flex-direction:column; padding:0 30px;}
    #accelerateurs>a {width:100%; height:auto; position:relative; padding:30px 0; text-align: center;}
    #accelerateurs>a>.img {width:80%; margin:auto; padding-bottom:80%; height:auto;}

    #accelerateurs>a>.img>img {width: 100%; max-height: 100%; position: absolute; object-fit: contain; bottom: 0; left: 50%; transform: translateX(-50%);}

    #accelerateurs>a>.txt {margin-top:40px; text-align:center; padding:0 0px;}
    #accelerateurs>a>.txt strong {letter-spacing:normal;}

    #accelerateurs>a>.bouton {position:relative; margin:auto; width:180px; left:0; right:0; bottom:0px; opacity:1; margin-top:15px; margin-bottom: 30px;}

    #accelerateurs>a:hover>.img img {opacity:.25;}
    #accelerateurs>a:hover>.txt strong {color:#F4A872!important;}
    
    /**********************************/ 
    /* FOOTER */
    /**********************************/ 
    
    body>footer {padding-top:50px; margin-top:-90px;}

    body > footer > nav.width940 {
        height: auto;
        padding-bottom:10px;
    }

    body > footer > nav > ul {
        display:flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        height:auto;
        gap: 10px;
    }
    body > footer > nav > ul li {
        margin-bottom: 0;
    }

    body > footer > div {
        display:flex;
        align-items:center;
        justify-content: flex-start;
        flex-direction: column;
        padding: 20px 24px 30px;
    }

    body > footer > div > p {
        color: rgba(255, 255, 255, .5);
        width:100%;
    }
    body > footer > div > svg {
        display: none;
    }
    
    /* ---------------------------------------------------------------------------------------------------- PAGE PRESENTATION ------------------------------------------------------------------------------------------*/

    #main-content.presentation {background:url('images/background-main-presentation.png?v=blanc1') no-repeat center top, #fff;}

    img.illus {position:relative; width:70%; display:block; margin:auto; top:0!important; left:0!important; right:0!important; bottom:0!important;}
    

    #accelerateurs.alt {margin-top:20px;}
    #accelerateurs.alt>a {height:auto;}
    
    /* ---------------------------------------------------------------------------------------------------- PAGE PSYCHOLOGUE ------------------------------------------------------------------------------------------*/

    #main-content.psychologue {background:url('images/background-main-psychologue.png') no-repeat center top, #FBF5EE;}
    
    /* ---------------------------------------------------------------------------------------------------- PAGE PÉRINATALITÉ ------------------------------------------------------------------------------------------*/

    #main-content.perinatalite {background:url('images/background-main-perinatalite.png') no-repeat center top, #fff;}

    .txt-cadre {background:none; border:solid 1px; padding:30px 30px 45px; width:calc(100% - 60px); margin:auto; margin-bottom:80px;}
    .txt-cadre .bouton {background:#FBF5EE; width:180px; position:absolute; bottom:-25px; left:0; right:0; margin:auto;}
    .txt-cadre .bouton span {width:170px;}
    
    /* ---------------------------------------------------------------------------------------------------- PAGE ADDICTIONS ------------------------------------------------------------------------------------------*/

    #main-content.addictions {background:url('images/background-main-addictologie.png') no-repeat center top, #fff;}

    /* ---------------------------------------------------------------------------------------------------- PAGE ICV EMDR ------------------------------------------------------------------------------------------*/
    
    #main-content.icv {background:url('images/background-main-icv.jpg') no-repeat center -50px, #fff;}
    #main-content.icv:after {display: none;}
    
    /* ---------------------------------------------------------------------------------------------------- PAGE CONTACT ------------------------------------------------------------------------------------------*/

    #formcontact {padding:0px 30px; padding-bottom:50px;}
    #formcontact>div {display:block; width:100%; padding:0;}

    
    #map {position:relative; z-index:10; margin-bottom: 50px; width:95%;}
    #map #carte {display:block; height:75vw;}
    
    .bouton_contact {
        right:20px;
        bottom:20px;
    }

    .bouton_contact_img {
        margin-left:0px;
    }

    .bouton_contact_img svg {
        width:24px;
        height:auto;
    }
    .bouton_contact:hover .bouton_contact_img {
        margin-left:0px;
    }
}

@media (min-width:781px) {
    .hidden-xl {
        display:none!important;
    }
}
/* ======================================================================
   OVERRIDES ANAÏS : adaptations pixel-perfect Laetitia
   ====================================================================== */

/* Menu centré + bouton CTA */
#menu { text-align: center; }
#menu > li { text-align: center; }
#menu > li.cta-menu > a {
  background: #F4A872;
  color: #fff !important;
  border-radius: 999px;
  padding: 0 18px;
  margin: 0 4px;
  height: 40px;
  line-height: 40px;
  font-family: 'alright-sb' !important;
  letter-spacing: 0.04em;
  display: inline-block;
}
#menu > li.cta-menu > a:hover { background: #2D3561; color: #fff !important; }
#menu > li.cta-menu { width: auto; padding: 0; }

/* Hero H1 : taille adaptée pour "Psychopraticienne & sophrologue" */
header.index h1 {
  font-size: 48px !important;
  line-height: 50px !important;
  margin-bottom: 30px !important;
  letter-spacing: -0.01em;
}
header.index h1 > span.font13 {
  font-size: 13px !important;
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0.22em !important;
}
@media (max-width: 720px) {
  header.index h1 { font-size: 34px !important; line-height: 38px !important; }
}

/* Cards "œuf" : adapter les JPG rectangulaires */
#accelerateurs > a {
  width: 300px;
  height: auto;
  padding-bottom: 60px;
}
#accelerateurs > a > .img {
  background-image: none !important;
  width: 240px;
  height: 290px;
  margin: 0 auto;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 24px rgba(45, 53, 97, 0.12);
}
#accelerateurs > a > .img > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  max-height: none !important;
}
#accelerateurs > a > .img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 60%, rgba(45, 53, 97, 0.18) 100%);
  pointer-events: none;
}
#accelerateurs > a.peri > .img { box-shadow: 0 8px 24px rgba(244, 168, 114, 0.30); }
#accelerateurs > a.addict > .img { box-shadow: 0 8px 24px rgba(155, 126, 189, 0.28); }
#accelerateurs > a.psy > .img { box-shadow: 0 8px 24px rgba(242, 201, 76, 0.30); }

#accelerateurs > a:hover > .img > img { opacity: 1 !important; transform: none !important; }
#accelerateurs > a:hover > .img { transform: translateY(-4px); }
#accelerateurs > a > .img { transition: transform .25s ease, box-shadow .25s ease; }

/* Position du bouton hover sur les cards */
#accelerateurs > a > .bouton { bottom: 0; }

/* ======================================================================
   OVERRIDES v20 : Bouton flottant "Me contacter" repensé
   Fix : carré abricot avec icône invisible (fill abricot sur fond abricot)
   Améliorations : rond pastel propre, icône blanche, hover doux
   ====================================================================== */
.bouton_contact {
  position: fixed !important;
  right: 28px !important;
  bottom: 28px !important;
  left: auto !important;
  background: #2D3561 !important;
  color: #fff !important;
  padding: 12px 14px 12px 24px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  z-index: 9000 !important;
  box-shadow: 0 10px 28px rgba(45, 53, 97, 0.28) !important;
  font-family: 'alright-sb', 'Helvetica Neue', sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease !important;
}
.bouton_contact:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(45, 53, 97, 0.38) !important;
  background: #232a4d !important;
  color: #fff !important;
  margin: 0 !important;
}
.bouton_contact > span:first-child,
.bouton_contact .hidden-xs {
  color: #fff !important;
  white-space: nowrap;
}

/* Le pictogramme à droite : rond abricot pastel propre avec enveloppe blanche */
.bouton_contact .bouton_contact_img {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #F8C8A1 !important;
  transition: background-color .25s ease, transform .25s ease !important;
  flex-shrink: 0 !important;
}
.bouton_contact .bouton_contact_img svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}
/* Surcharge la règle .bouton_contact_img svg * { fill:#fff } et le fill abricot pour avoir une enveloppe blanche bien visible */
.bouton_contact .bouton_contact_img svg path,
.bouton_contact .bouton_contact_img svg * {
  fill: #fff !important;
}

/* Hover : le rond passe en jaune pastel, micro-rotation */
.bouton_contact:hover .bouton_contact_img {
  background: #F7DA85 !important;
  transform: rotate(-6deg) scale(1.05) !important;
  margin-left: 0 !important;
}

/* Responsive : on garde le bouton bien lisible sur mobile (le texte se cache via .hidden-xs déjà géré) */
@media (max-width: 780px) {
  .bouton_contact {
    right: 16px !important;
    bottom: 16px !important;
    padding: 10px !important;
    gap: 0 !important;
  }
  .bouton_contact .bouton_contact_img {
    width: 36px !important;
    height: 36px !important;
  }
  .bouton_contact .bouton_contact_img svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Bandeau coordonnées en haut : centrer + padding correct */
body > header > aside.bgrose { padding: 0; }
body > header > aside.bgrose > div { justify-content: center !important; padding: 0 28px; }

/* ======================================================================
   OVERRIDES v2 : Menu compact + hero recentré + scroll fluide
   ====================================================================== */

/* Retirer définitivement le CTA du menu (déjà retiré du HTML) */
#menu > li.cta-menu { display: none !important; }

/* Menu compact, ajusté à la taille des items, centré sur la page */
/* DESKTOP UNIQUEMENT : sur mobile le menu est un overlay burger géré par les règles @media (max-width:780px) lignes 561-616 */
@media (min-width: 781px) {
  #menu {
    display: block !important;
    width: fit-content !important;
    max-width: 940px !important;
    margin: 0 auto !important;
    padding: 4px 6px !important;
    text-align: center;
    border-radius: 4px;
  }
  #menu > li { width: 132px; }
}

/* Remonter le contenu du hero : moins d'espace top */
header.index > div.column {
  margin-top: 0 !important;
  padding: 30px 80px 20px !important;
}

/* Hero H1 : moins d'écart pour fluidifier la lecture */
header.index h1 {
  margin-bottom: 22px !important;
  margin-top: 8px !important;
}

/* Paragraphe hero : line-height plus aérée + max-width pour éviter texte qui mord */
header.index p {
  line-height: 28px !important;
  font-size: 16px !important;
  max-width: 620px;
  margin: 0 auto !important;
}
header.index p em {
  display: block;
  padding: 0;
}

/* Hero : plus de hauteur pour que tout respire + plus d'espace en bas pour le bouton "Défiler" */
header.index {
  padding-bottom: 140px !important;
  min-height: 720px;
}

/* Bouton "Défiler" : positionné plus bas pour ne pas mordre sur le texte */
#scroll-link {
  bottom: 30px !important;
}

/* Responsive : adapter le hero sur mobile */
/* Pas de règles #menu ici : sur mobile le menu est un overlay burger fixed/100vh (lignes 561-616) */
@media (max-width: 720px) {
  header.index { min-height: auto; padding-bottom: 40px !important; }
  header.index > div.column { padding: 16px 24px !important; }
  header.index p { font-size: 15px !important; line-height: 26px !important; }
}

/* ======================================================================
   OVERRIDES v3 : Images ovoïdes + Hero des sous-pages
   ====================================================================== */

/* === Toutes les images illustratives en forme ovoïde === */
.col-small > img.illus,
.col-small > img {
  width: 100%;
  max-width: 280px;
  height: 340px;
  object-fit: cover;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  display: block;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(45, 53, 97, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.col-small > img.illus:hover,
.col-small > img:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(45, 53, 97, 0.22);
}

/* Alternance de teinte d'ombre par section (variation visuelle) */
.width940:nth-of-type(1) .col-small > img { box-shadow: 0 10px 30px rgba(244, 168, 114, 0.30); }
.width940:nth-of-type(2) .col-small > img { box-shadow: 0 10px 30px rgba(155, 126, 189, 0.28); }
.width940:nth-of-type(3) .col-small > img { box-shadow: 0 10px 30px rgba(242, 201, 76, 0.32); }
.width940:nth-of-type(4) .col-small > img { box-shadow: 0 10px 30px rgba(244, 168, 114, 0.28); }
.width940:nth-of-type(5) .col-small > img { box-shadow: 0 10px 30px rgba(155, 126, 189, 0.28); }

/* === Hero des sous-pages : forme ovoïde abricot derrière le H1 === */
header.index > .width940.column {
  position: relative;
  z-index: 5;
}
header.index > .width940.column::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  max-width: 90vw;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(244, 168, 114, 0.85) 0%, rgba(244, 168, 114, 0.55) 60%, transparent 100%);
  border-radius: 50% / 70%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

/* H1 sur les sous-pages : reste blanc mais ajoute text-shadow pour mieux ressortir */
header.index h1.blanc {
  color: #fff;
  text-shadow: 0 2px 12px rgba(45, 53, 97, 0.45);
  position: relative;
  z-index: 2;
}

/* Variation d'overlay par page pour différencier */
body.presentation header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(244, 168, 114, 0.85) 0%, rgba(244, 168, 114, 0.55) 60%, transparent 100%);
}
body.therapie header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(155, 126, 189, 0.85) 0%, rgba(155, 126, 189, 0.55) 60%, transparent 100%);
}
body.contact header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(242, 201, 76, 0.85) 0%, rgba(242, 201, 76, 0.55) 60%, transparent 100%);
}

/* Responsive */
@media (max-width: 720px) {
  .col-small > img.illus,
  .col-small > img {
    max-width: 220px;
    height: 270px;
  }
  header.index > .width940.column::before {
    width: 360px;
    height: 160px;
  }
}

/* ======================================================================
   OVERRIDES v4 : Fix overlay hero démesuré + neutraliser bg main sur sous-pages
   ====================================================================== */

/* Overlay ovoïde hero : taille raisonnable (autour du H1, pas envahissant) */
header.index > .width940.column::before {
  width: 380px !important;
  max-width: 70vw !important;
  height: 150px !important;
  border-radius: 50% / 65%;
}

@media (max-width: 720px) {
  header.index > .width940.column::before {
    width: 280px !important;
    height: 120px !important;
  }
}

/* Pas de background-image sur #main-content.therapie et #main-content.contact
   (sinon preview.ps1 génère un placeholder SVG abricot envahissant) */
#main-content.therapie,
#main-content.contact {
  background: none !important;
  background-image: none !important;
}

/* Pour la page Présentation, on a maintenant le vrai PNG background-main-presentation
   donc l'image se chargera. Mais on s'assure que si elle n'est pas trouvée, on n'a pas
   un fond cassé */
#main-content.presentation {
  background-color: var(--fond, #FBF5EE);
}

/* ======================================================================
   OVERRIDES v5 : Backgrounds Laetitia spécifiques pour Thérapie et Contact
   (cohérence visuelle avec la page Présentation)
   ====================================================================== */

#main-content.therapie {
  background: url('images/background-main-therapie.png?v=blanc1') no-repeat center top !important;
  background-color: var(--fond, #FBF5EE) !important;
}

#main-content.contact {
  background: url('images/background-main-contact.png?v=blanc1') no-repeat center top !important;
  background-color: var(--fond, #FBF5EE) !important;
  padding-top: 0;
}

/* OVERRIDES v28 : Page Partages, fond blanc pur (différent des autres sous-pages
   qui sont en crème), pour faire ressortir les cards et apporter de la clarté. */
#main-content.partage {
  background-color: #FFFFFF !important;
}

/* ======================================================================
   OVERRIDES v6 : Aplat de couleur sur tout le hero des sous-pages
   (le galet ovoïde disparaît, le hero entier prend la couleur identitaire)
   ====================================================================== */

/* Supprimer définitivement l'overlay ovoïde derrière le H1 */
header.index > .width940.column::before {
  display: none !important;
}

/* Hero entier coloré selon la page */
body.presentation header.index {
  background-color: #F4A872 !important;  /* abricot */
  background-image: none !important;
}
body.therapie header.index {
  background-color: #9B7EBD !important;  /* violet */
  background-image: none !important;
}
body.contact header.index {
  background-color: #F2C94C !important;  /* jaune doré */
  background-image: none !important;
}

/* Aside du haut : prendre la même teinte que le hero (au lieu du rose Laetitia) */
body.presentation header.index > aside.bgrose,
body.therapie header.index > aside.bgrose,
body.contact header.index > aside.bgrose {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

/* H1 du hero : blanc renforcé pour bien ressortir sur les aplats colorés */
header.index h1.blanc {
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(45, 53, 97, 0.45);
  font-size: 64px !important;
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}
/* Mobile : descendre la taille du H1 hero pour éviter débordement (override des 64px ci-dessus) */
@media (max-width: 780px) {
  header.index h1.blanc { font-size: 38px !important; line-height: 1.1 !important; }
}
@media (max-width: 380px) {
  header.index h1.blanc { font-size: 32px !important; }
}

/* Sur fond jaune (Contact), forcer un peu plus de contraste sur le H1 */
body.contact header.index h1.blanc {
  color: #2D3561 !important;  /* bleu nuit, ressort mieux sur jaune */
  text-shadow: 0 2px 8px rgba(255,255,255,0.4);
}

/* Logo et sous-titre dans le header : adapter les couleurs pour la lisibilité */
body.presentation #logo a > span:first-child,
body.therapie #logo a > span:first-child {
  color: #fff !important;
}
body.contact #logo a > span:first-child {
  color: #2D3561 !important;
}
body.presentation #logo a > span:last-child,
body.therapie #logo a > span:last-child {
  color: rgba(255,255,255,0.85) !important;
}
body.contact #logo a > span:last-child {
  color: #2D3561 !important;
}

/* Menu : garder fond blanc pour rester lisible sur l'aplat coloré */
#menu.bgblanc {
  background-color: #fff !important;
}

/* Scroll-link "Défiler" : adapter la couleur */
header.index #scroll-link {
  color: #fff !important;
}
body.contact header.index #scroll-link {
  color: #2D3561 !important;
}

/* ======================================================================
   OVERRIDES v7 : Réintroduire le petit ovoïde derrière le H1 (subtil)
   par-dessus l'aplat de couleur pleine
   ====================================================================== */

/* Forme ovoïde subtile derrière le H1 : halo lumineux/profondeur */
header.index > .width940.column {
  position: relative;
}
header.index > .width940.column::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 420px !important;
  max-width: 75vw !important;
  height: 170px !important;
  border-radius: 50% / 65% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Halo blanc lumineux pour les fonds abricot et violet (H1 blanc dessus) */
body.presentation header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.14) 55%, transparent 100%) !important;
}
body.therapie header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.14) 55%, transparent 100%) !important;
}
/* Halo plus sombre pour le fond jaune (H1 bleu nuit dessus) */
body.contact header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(45,53,97,0.22) 0%, rgba(45,53,97,0.10) 55%, transparent 100%) !important;
}

/* S'assurer que le H1 passe au-dessus du halo */
header.index > .width940.column > h1 {
  position: relative;
  z-index: 1;
}

/* ======================================================================
   OVERRIDES v8 : Renforcer la visibilité de l'ovoïde derrière le H1
   ====================================================================== */

/* Halo plus dense et plus serré pour qu'il soit vraiment perceptible */
header.index > .width940.column::before {
  width: 360px !important;
  max-width: 70vw !important;
  height: 150px !important;
}

/* Halo blanc renforcé (50%→25%→0) pour abricot et violet */
body.presentation header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 55%, transparent 100%) !important;
}
body.therapie header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 55%, transparent 100%) !important;
}
/* Halo bleu nuit renforcé pour le fond jaune (Contact) */
body.contact header.index > .width940.column::before {
  background: radial-gradient(ellipse at center, rgba(45,53,97,0.32) 0%, rgba(45,53,97,0.15) 55%, transparent 100%) !important;
}

/* ======================================================================
   OVERRIDES v9 : ANNULATION des aplats colorés + halo + adaptations logo
   Retour au rendu Laetitia natif sur les 3 sous-pages
   ====================================================================== */

/* 1) Annuler les aplats colorés sur les sous-pages (revenir au fond natif) */
body.presentation header.index,
body.therapie header.index,
body.partage header.index,
body.contact header.index {
  background-color: transparent !important;
  background-image: none !important;
}

/* 2) Annuler le halo ovoïde derrière le H1 */
header.index > .width940.column::before {
  display: none !important;
}

/* 3) Aside.bgrose : revenir à l'abricot Laetitia (au lieu de transparent) */
body.presentation header.index > aside.bgrose,
body.therapie header.index > aside.bgrose,
body.partage header.index > aside.bgrose,
body.contact header.index > aside.bgrose {
  background-color: #F4A872 !important;
  border-bottom: none !important;
}

/* 4) Logo : revenir aux couleurs natives (bleu nuit + violet) */
body.presentation #logo a > span:first-child,
body.therapie #logo a > span:first-child,
body.partage #logo a > span:first-child,
body.contact #logo a > span:first-child {
  color: #2D3561 !important;
}
body.presentation #logo a > span:last-child,
body.therapie #logo a > span:last-child,
body.partage #logo a > span:last-child,
body.contact #logo a > span:last-child {
  color: #9B7EBD !important;
}

/* 5) H1 : couleur foncée par défaut (lisible sur fond clair Laetitia) */
header.index h1 {
  color: #2D3561 !important;
  text-shadow: none !important;
}

/* 6) Scroll-link défiler : revenir à l'abricot */
header.index #scroll-link {
  color: #F4A872 !important;
}

/* 7) Petite décoration 3 pétales colorées au-dessus du H1 du hero */
.hero-deco {
  display: block !important;
  margin: 31px auto 28px !important;
  width: 76px !important;
  height: auto !important;
  opacity: 0.95;
}

/* ======================================================================
   OVERRIDES v10 : Pages légales (mentions, confidentialité, cookies)
   Étend le rendu Laetitia épuré aux 3 pages légales + style lisibilité
   ====================================================================== */

body.legal header.index {
  background-color: transparent !important;
  background-image: none !important;
}
body.legal header.index > aside.bgrose {
  background-color: #F4A872 !important;
  border-bottom: none !important;
}
body.legal #logo a > span:first-child { color: #2D3561 !important; }
body.legal #logo a > span:last-child  { color: #9B7EBD !important; }
body.legal header.index h1 {
  color: #2D3561 !important;
  text-shadow: none !important;
}
body.legal #scroll-link { display: none !important; }

body.legal section#main-content {
  background: #FBF5EE;
  padding: 50px 0 80px;
}
body.legal section#main-content > section.width940 {
  max-width: 760px;
  margin: 0 auto;
}
body.legal section#main-content h2 {
  font-family: 'heimat-sb', serif;
  font-size: 26px;
  color: #2D3561;
  margin: 36px 0 14px;
  line-height: 1.3;
}
body.legal section#main-content h2:first-of-type { margin-top: 8px; }
body.legal section#main-content h3 {
  font-family: 'alright-sb', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9B7EBD;
  margin: 22px 0 8px;
}
body.legal section#main-content p,
body.legal section#main-content ul {
  font-family: 'alright', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #3A3A3A;
  margin-bottom: 14px;
}
body.legal section#main-content ul {
  padding-left: 22px;
  list-style: disc;
}
body.legal section#main-content ul li { margin-bottom: 6px; }
body.legal section#main-content strong {
  color: #2D3561;
  font-family: 'alright-sb', sans-serif;
  font-weight: normal;
}
body.legal section#main-content a {
  color: #9B7EBD;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.legal section#main-content a:hover { color: #F4A872; }
body.legal section#main-content .legal-meta {
  font-style: italic;
  color: #6B6B6B;
  font-size: 14px;
  margin: 0 0 30px;
  border-left: 3px solid #F4A872;
  padding: 6px 0 6px 14px;
  background: #FFFFFF;
}
body.legal section#main-content em {
  color: #9B7EBD;
  font-style: italic;
}

/* ======================================================================
   OVERRIDES v11 : Pages légales : hero compact + centrage cohérent
   Le hero Laetitia fait 800px (height) + 720px (min-height) + 140px padding.
   Pour les pages légales c'est démesuré : on réduit et on centre tout.
   ====================================================================== */

body.legal header.index,
body>body.legal header.index {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 70px !important;
}

body.legal header.index > .width940.column {
  margin-top: 40px !important;
  padding: 0 24px !important;
  text-align: center !important;
}

body.legal header.index .hero-deco {
  width: 72px !important;
  height: auto !important;
  display: block !important;
  margin: 31px auto 28px !important;
  opacity: 1 !important;
}

body.legal header.index h1 {
  font-size: 48px !important;
  line-height: 1.1 !important;
  color: #2D3561 !important;
  margin: 0 auto 30px !important;
  text-align: center !important;
  max-width: 760px;
  padding: 0;
}

body.legal header.index h1 > span.font13 {
  display: block !important;
  font-size: 12px !important;
  letter-spacing: 0.25em !important;
  color: #9B7EBD !important;
  margin-bottom: 16px !important;
  font-family: 'alright-sb', sans-serif !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  body.legal header.index h1 { font-size: 32px !important; line-height: 1.15 !important; }
  body.legal header.index { padding-bottom: 40px !important; }
  body.legal header.index > .width940.column { margin-top: 20px !important; }
}

/* ======================================================================
   OVERRIDES v12 : Ultra prioritaire : force hero compact pages légales
   Selector "html body.legal" pour bypasser toute spécificité antérieure.
   ====================================================================== */

html body.legal header.index,
html body.legal > header.index,
html body.legal header.index.index {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.legal header.index > aside.bgrose {
  position: relative !important;
}

html body.legal header.index > .width940.column {
  margin: 30px auto 0 !important;
  padding: 0 24px !important;
  text-align: center !important;
  min-height: 0 !important;
}

html body.legal header.index .hero-deco {
  display: block !important;
  width: 72px !important;
  height: auto !important;
  margin: 31px auto 28px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.legal header.index h1 {
  font-size: 48px !important;
  line-height: 1.1 !important;
  color: #2D3561 !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  text-align: center !important;
  max-width: 760px !important;
  display: block !important;
  visibility: visible !important;
  text-shadow: none !important;
}

html body.legal header.index h1 > span.font13 {
  display: block !important;
  font-size: 12px !important;
  letter-spacing: 0.25em !important;
  color: #9B7EBD !important;
  margin-bottom: 14px !important;
  font-family: 'alright-sb', sans-serif !important;
  text-align: center !important;
  visibility: visible !important;
}

/* ======================================================================
   OVERRIDES v13 : Chirurgie : bloc titre déplacé hors header
   La cascade Laetitia rendait le bloc titre invisible dans le header.
   On masque l'ancien bloc et on style le nouveau qui vit dans main-content.
   ====================================================================== */

/* Masquer l'ancien bloc titre (resté dans le header pour compat) */
html body.legal header.index > .width940.column {
  display: none !important;
}

/* Bloc titre légales : sobre, centré, fond cream */
.legal-title-block {
  background: #FBF5EE;
  padding: 30px 24px 40px;
  text-align: center;
  border-bottom: 1px solid rgba(155, 126, 189, 0.12);
}
.legal-title-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.legal-title-block .hero-deco {
  display: block;
  width: 72px;
  height: auto;
  margin: 31px auto 28px;
  opacity: 1;
}
.legal-title-block .legal-eyebrow {
  font-family: 'alright-sb', sans-serif;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: #9B7EBD;
  text-transform: uppercase;
  margin: 0 0 14px;
  text-align: center;
}
.legal-title-block .legal-h1 {
  font-family: 'heimat-i', serif;
  font-size: 56px;
  line-height: 1.1;
  color: #2D3561;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  max-width: 760px;
  display: block;
  font-style: normal;
}

/* Adapter le main-content sur les pages légales : pas de wave divider lourde */
html body.legal section#main-content {
  padding-top: 0 !important;
}
html body.legal section#main-content::before {
  display: none !important;
}

@media (max-width: 720px) {
  .legal-title-block .legal-h1 { font-size: 36px; }
  .legal-title-block { padding: 24px 16px 30px; }
}

/* ======================================================================
   OVERRIDES v19 : Typo titres : Heimat Didone → Cormorant Infant Italic
   Chirurgical : seuls les selecteurs precis sont touches. Aucun selecteur
   global div/span/a. Le corps de texte reste en Alright Sans.
   ====================================================================== */

/* Classes utilities heimat-* + tous les titres concernes */
.heimat-l, .heimat-sb, .heimat-i,
h1, h2,
header.index h1,
.legal-title-block .legal-h1,
body.legal section#main-content h2,
#logo a > span:first-child,
#accelerateurs strong,
nav#accelerateurs strong,
.bouton span,
.bouton.orange span,
.bouton.noir span {
  font-family: 'Cormorant Infant', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Preserver les caps eyebrow en sans-serif (pas en Cormorant) */
header.index h1 > span.font13,
header.index h1 > span.alright-sb,
.legal-title-block .legal-eyebrow,
.font13 {
  font-family: 'alright-sb', 'Alright Sans', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* ======================================================================
   OVERRIDES v15 : Index hero : texte cream lisible + scroll-link décollé
   Le bleu nuit ne tenait pas la photo de fond. Retour à un blanc cassé
   cream (palette) avec halo foncé marqué pour lisibilité maximale.
   Padding-bottom doublé et scroll-link poussé sur le wave divider.
   ====================================================================== */

body.home header.index h1.blanc,
body.home header.index h1.blanc > span,
body.home header.index p.blanc,
body.home header.index p.blanc em {
  color: #FBF5EE !important;
  text-shadow:
    0 2px 14px rgba(45, 53, 97, 0.85),
    0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* Air sous le paragraphe : 190px pour garantir aucun chevauchement */
body.home header.index > .width940.column {
  padding-bottom: 190px !important;
}

/* Scroll-link "Défiler" poussé clairement sur le wave divider */
body.home header.index #scroll-link {
  bottom: -65px !important;
}

@media (max-width: 720px) {
  body.home header.index > .width940.column { padding-bottom: 40px !important; }
  body.home header.index #scroll-link { bottom: -45px !important; }
}

/* ======================================================================
   OVERRIDES v17 : Hero index : léger assombrissement de l'image bg
   Overlay subtil via pseudo-element pour faire ressortir le texte cream
   du hero (H1 + manifesto) sans altérer l'image elle-même.
   ====================================================================== */

body.home header.index {
  position: relative;
}
body.home header.index::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: none;
  pointer-events: none;
  z-index: 1;
}
body.home header.index > aside.bgrose,
body.home header.index > #logo,
body.home header.index > .width940.column,
body.home header.index > #scroll-link {
  position: relative;
  z-index: 2;
}
/* ul#menu retiré : sur mobile il doit rester position:fixed (overlay burger).
   Sur desktop, position:relative est appliqué via les overrides v2 desktop. */

/* ======================================================================
   OVERRIDES v21 : Harmonisation courbure blanche accueil
   Sur les sous-pages, bg-main-top.png (#main-content::before) tombe sur
   un body.background.jpg cream : ses zones transparentes revelent du cream
   et le PNG dessine sa courbe blanche convexe par-dessus.
   Sur l'accueil, body.home porte l'aquarelle mountain (sombre) en
   background-attachment:fixed : les zones transparentes du PNG revelent du
   sombre, d'ou une courbure sale et peu visible.
   Fix : ajouter un background-color cream directement sur le pseudo
   #main-content::before uniquement sur body.home : la couleur fait office
   de fond solide derriere le PNG, ses zones transparentes revelent du cream
   comme sur les sous-pages. Aucun changement sur le PNG, le hero aquarelle,
   ni les sous-pages.
   ====================================================================== */

body.home #main-content.index::before {
  background: url('images/bg-main-top.png?v=initial') no-repeat top center;
}

/* ======================================================================
   OVERRIDES v22 : Picto trio (3 œufs colorés) en signature entre
   l'image œuf et le texte de chaque rubrique, MOBILE UNIQUEMENT.
   Le picto est cache en desktop via .hidden-xl (existant).
   ====================================================================== */
.picto-trio-inline {
  display: block;
  text-align: center;
  /* Margin asymétrique pour compenser le padding du viewBox (4u haut / 7.25u bas).
     Visuel cible : 35px haut / 35px bas autour du contenu visible. */
  margin: 32px auto 29px;
  line-height: 0;
}
.picto-trio-inline svg {
  display: inline-block;
  vertical-align: middle;
}
/* En desktop le picto inline disparait (la signature reste celle du col-big au-dessus du H2) */
@media (min-width: 781px) {
  .picto-trio-inline { display: none !important; }
}

/* ======================================================================
   OVERRIDES v23 : Mobile only : image œuf TOUJOURS avant le texte.
   Centrage VERTICAL parfait du picto trio entre image et H2 :
   - col-small.padding-bottom = 0  (pas de blanc sous l'image)
   - col-big.padding-top = 0       (pas de blanc avant le picto)
   - svg margin = 45px haut/bas    (espacement symétrique image→picto→texte)
   - <br/> après svg masqué        (pas de saut de ligne parasite)
   - h2 margin-top = 0             (le H2 colle au picto à 45px)
   ====================================================================== */
@media (max-width: 780px) {
  #main-content > section.width940:not(.column) {
    display: flex;
    flex-direction: column;
  }
  #main-content > section.width940:not(.column) > .col-small {
    order: 1;
    padding-bottom: 0 !important;
  }
  #main-content > section.width940:not(.column) > .col-big {
    order: 2;
    padding-top: 0 !important;
  }
  #main-content > section.width940:not(.column) > .col-big > svg:first-child {
    display: block;
    /* Compense le padding asymétrique du viewBox : visuel cible 35/35 */
    margin: 31px auto 28px !important;
  }
  #main-content > section.width940:not(.column) > .col-big > svg:first-child + br {
    display: none;
  }
  #main-content > section.width940:not(.column) > .col-big > h2 {
    margin-top: 0 !important;
  }
}

/* ======================================================================
   OVERRIDES v24 : Mobile only : compactage des gaps entre sections
   But : limiter le scroll inutile, tout en gardant un visuel aéré.
   Note : sur Thérapie/Présentation, col-small padding-top/col-big padding-bottom
   ne sont PAS touchés car les sections se touchent déjà (gap visible = padding
   uniquement et il faut un peu d'air pour distinguer chaque rubrique).
   On compacte uniquement accueil (présentation→cards et entre cards).
   ====================================================================== */
@media (max-width: 780px) {
  /* Accueil : section présentation (.column) avant la nav #accelerateurs */
  #main-content.index > section.width940.column {
    padding-bottom: 30px !important;
  }
  /* Accueil : cards #accelerateurs (Périnatalité, Émotions, Thérapies) */
  #accelerateurs > a {
    padding: 20px 0 30px !important;
  }

  /* Hero plein écran (100vh) RÉSERVÉ à l'accueil (aquarelle montagne immersive).
     Sur les sous-pages (presentation, therapie, contact), le hero n'est qu'un
     aplat de couleur + H1 : height: auto pour éviter ~460px de vide orange. */
  body:not(.home):not(.legal) > header.index {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 30px !important;
  }

  /* Mobile : supprimer le background.jpg du body (image avec bande marron foncé
     qui transparaît à travers les héros semi-transparents). Remplacé par cream
     uniforme. L'accueil garde son aquarelle dans le header lui-même. */
  body:not(.home) {
    background-image: none !important;
    background-color: #FBF5EE !important;
  }

  /* Accueil : raccourcir le hero plein écran (812→660px) pour limiter le scroll
     tout en gardant l'effet aquarelle de montagne visible. */
  body.home > header.index {
    min-height: 660px !important;
    height: auto !important;
    padding-bottom: 60px !important;
  }

  /* CRITIQUE : background-attachment:fixed casse le scroll natif sur iOS Safari
     et certains Chrome Android. On passe en scroll sur TOUTES les pages mobile. */
  body, body.home, body.legal, body.presentation, body.therapie, body.partage, body.contact {
    background-attachment: scroll !important;
  }
  /* Bloc réponse directe (AI Overviews / LLM citations 40-60 mots) : mobile compact */
  .ai-answer {
    padding: 14px 18px !important;
    font-size: 15px !important;
    margin: 0 24px 24px !important;
  }
}

/* Bloc réponse directe DESKTOP */
.ai-answer {
  font-family: 'alright-sb', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #2D3561;
  padding: 22px 28px;
  background: #FBF5EE;
  border-left: 4px solid #F4A872;
  margin: 0 0 28px 0;
  border-radius: 0 6px 6px 0;
}
.ai-answer strong { color: #2D3561; font-weight: 700; }

/* ======================================================================
   FOCUS VISIBLE : accessibilité WCAG 2.4.7
   Annule les outline:none/0 généraux pour la navigation clavier
   ====================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2D3561 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* ======================================================================
   AUTHOR-BIO : signature auteur visible bas de page (E-E-A-T 2026)
   ====================================================================== */
.author-bio {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 940px;
  margin: 60px auto 30px;
  padding: 32px 40px;
  background: #FBF5EE;
  border-radius: 8px;
  border-left: 4px solid #9B7EBD;
}
.author-bio .bio-portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(155, 126, 189, 0.22);
}
.author-bio h2 {
  font-family: 'Cormorant Infant', serif;
  font-style: italic;
  font-size: 28px;
  color: #2D3561;
  margin: 0 0 10px;
  padding: 0;
}
.author-bio p {
  font-family: 'alright-sb', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #2D3561;
  margin: 0 0 8px;
}
.author-bio .bio-links {
  margin-top: 14px;
  font-size: 13px;
}
.author-bio .bio-links a {
  color: #9B7EBD;
  margin-right: 18px;
  border-bottom: 1px solid rgba(155, 126, 189, 0.3);
  padding-bottom: 1px;
}
.author-bio .bio-links a:hover { color: #2D3561; border-bottom-color: #2D3561; }

@media (max-width: 780px) {
  .author-bio { flex-direction: column; text-align: center; gap: 18px; padding: 28px 24px; margin: 40px 16px 20px; }
  .author-bio .bio-portrait { width: 100px; height: 100px; }
  .author-bio .bio-links a { display: inline-block; margin: 4px 8px; }
}

/* Page mise à jour le... */
.page-updated {
  text-align: center;
  font-size: 12px;
  color: rgba(45, 53, 97, 0.5);
  font-family: 'alright-sb', sans-serif;
  padding: 16px 20px 24px;
  letter-spacing: 0.02em;
}

/* sr-only : labels accessibles cachés visuellement mais lus par lecteurs d'écran */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 780px) {
  /* DEFENSE iOS Safari : forcer le scroll natif partout, virer tout obstacle */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: auto !important;
    position: static !important;
    touch-action: auto !important;
  }

  /* Sous-titre logo MOBILE : version courte "Psychopraticienne CEP" + br + Sophrologue RNCP */
  .logo-sep { display: none !important; }
  .logo-break { display: inline !important; }
  .logo-mobile-short { display: inline !important; }
  .logo-desktop-full { display: none !important; }
}

/* DESKTOP : sous-titre logo = 1 ligne complète "Psychopraticienne titulaire du CEP · Sophrologue RNCP" */
@media (min-width: 781px) {
  .logo-sep { display: inline !important; }
  .logo-break { display: none !important; }
  .logo-mobile-short { display: none !important; }
  .logo-desktop-full { display: inline !important; }
}

/* ======================================================================
   OVERRIDES v25 : Hero accueil, fond aquarelle cohérent + texte lisible
   Problème : fond crème au top (ciel de l'aquarelle visible), text-shadow
   trop large (14px blur) crée des "boîtes grises" par ligne sur fond clair.
   Fix : gradient overlay assombrissant la zone texte + ombre nette et fine.
   ====================================================================== */

/* Gradient overlay : assombrit la zone du texte (sans text-shadow, contraste seul). */
body.home header.index::before {
  background: linear-gradient(
    to bottom,
    rgba(28, 16, 44, 0.00)   0%,
    rgba(28, 16, 44, 0.12)  22%,
    rgba(28, 16, 44, 0.42)  50%,
    rgba(28, 16, 44, 0.58)  78%,
    rgba(28, 16, 44, 0.62) 100%
  ) !important;
}

/* Texte hero : aucun ombre portée (demande Charles 26/05).
   Contraste assuré par le gradient overlay du ::before plus dense ci-dessus. */
body.home header.index h1.blanc,
body.home header.index h1.blanc > span,
body.home header.index p.blanc,
body.home header.index p.blanc em {
  color: #FBF5EE !important;
  text-shadow: none !important;
}

/* "ANAÏS LENEAU" : juste un peu d'air, pas de filet/liseret */
body.home header.index h1.blanc .font13.alright-sb {
  display: block;
  padding-bottom: 0 !important;
  margin-bottom: 14px;
  border-bottom: none !important;
  opacity: 0.95;
}

/* Mobile : image recadrée sur le header, centrée sur la montagne (pas le ciel).
   background-size: auto 150% = image plus haute que le header → on peut cropper.
   background-position: center 40% = on saute ~40% du ciel haut, montagne visible. */
@media (max-width: 780px) {
  body.home {
    background-image: none !important;
    background-color: #FBF5EE !important;
  }
  body.home > header.index {
    background-image: url('images/hero-accueil-aquarelle-montagne-serenite.jpg') !important;
    background-size: auto 150% !important;
    background-position: center 40% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }
}

/* ======================================================================
   OVERRIDES v26 : Section témoignages patientes (6 cards, 2 rangées × 3)
   Format Option A : grille statique, texte 100% indexable, zéro JS,
   accessible, INP excellent. Reviews JSON-LD côté <head>.
   ====================================================================== */

#testimonials {
  padding: 80px 24px 100px;
  background: #FBF5EE;
  position: relative;
  z-index: 5;
}
#testimonials .testimonials-inner {
  max-width: 1140px;
  margin: 0 auto;
}
#testimonials .testimonials-eyebrow {
  display: block;
  font-family: 'alright-sb', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9B7EBD;
  text-align: center;
  margin-bottom: 14px;
}
#testimonials h2.testimonials-title {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: #2D3561;
  text-align: center;
  line-height: 1.18;
  margin: 0 0 14px;
}
#testimonials .testimonials-intro {
  text-align: center;
  color: #6B7392;
  font-family: 'alright-i', 'alright-sb', sans-serif;
  font-style: italic;
  font-size: 15px;
  max-width: 680px;
  margin: 0 auto 56px;
  line-height: 1.6;
}
#testimonials .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
#testimonials .testimonial-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 6px 24px rgba(45, 53, 97, 0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
}
#testimonials .testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(45, 53, 97, 0.10);
}
#testimonials .testimonial-quote-mark {
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 0.5;
  color: #F4A872;
  opacity: 0.65;
  height: 18px;
}
#testimonials .testimonial-card:nth-child(3n+2) .testimonial-quote-mark { color: #9B7EBD; }
#testimonials .testimonial-card:nth-child(3n) .testimonial-quote-mark { color: #F2C94C; }
#testimonials blockquote.testimonial-body {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: #2D3561;
  margin: 0;
  padding: 0;
  flex-grow: 1;
}
#testimonials .testimonial-author {
  border-top: 1px dashed rgba(155, 126, 189, 0.30);
  padding-top: 16px;
  margin-top: 4px;
  font-family: 'alright-sb', sans-serif;
  line-height: 1.5;
  font-style: normal;
}
#testimonials .testimonial-author cite {
  display: block;
  color: #2D3561;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
#testimonials .testimonial-author .context {
  display: block;
  font-style: italic;
  font-size: 12px;
  color: #9B7EBD;
  letter-spacing: 0.02em;
  font-family: 'Cormorant Infant', Georgia, serif;
}

/* Tablet : 2 colonnes */
@media (max-width: 1024px) {
  #testimonials .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile : 1 colonne */
@media (max-width: 680px) {
  #testimonials { padding: 56px 16px 70px; }
  #testimonials h2.testimonials-title { font-size: 30px; }
  #testimonials .testimonials-intro { margin-bottom: 36px; font-size: 14px; }
  #testimonials .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }
  #testimonials .testimonial-card { padding: 26px 22px; }
  #testimonials blockquote.testimonial-body { font-size: 16px; }
}

/* CTA "Lire les partages en intégralité" sous la grille accueil */
.testimonials-cta {
  text-align: center;
  margin-top: 56px;
  padding-top: 8px;
}
.testimonials-cta .bouton-partages {
  display: inline-block;
  font-family: 'alright-sb', sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2D3561;
  background: transparent;
  border: 1.5px solid #9B7EBD;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.testimonials-cta .bouton-partages:hover {
  background: #9B7EBD;
  color: #fff;
  transform: translateY(-2px);
}
.testimonials-cta .bouton-partages::after {
  content: ' \2192';
  display: inline-block;
  margin-left: 4px;
  transition: transform .2s ease;
}
.testimonials-cta .bouton-partages:hover::after {
  transform: translateX(4px);
}

/* ======================================================================
   OVERRIDES v27 : Page Partage (stack éditorial vertical, joyeux et aéré)
   ====================================================================== */

/* Liste à puces dans l'intro : non-italique, font alright sans (cohérent avec le reste des paragraphes) */
.partage-intro-list {
  max-width: 760px;
  margin: 18px 0 22px;
  padding-left: 28px;
  list-style: none;
}
.partage-intro-list li {
  position: relative;
  padding: 10px 0 10px 32px;
  font-family: 'alright', 'Helvetica Neue', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 1.6;
  color: #4D5878;
  letter-spacing: 0.05em;
}
.partage-intro-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 18px;
  height: 1px;
  background: #9B7EBD;
}
.partage-intro-list li:nth-child(3n+1)::before { background: #F4A872; }
.partage-intro-list li:nth-child(3n+2)::before { background: #9B7EBD; }
.partage-intro-list li:nth-child(3n)::before   { background: #F2C94C; }

/* Garantir non-italique sur les paragraphes intro de la page Partages */
body.partage section.width940 > .col-big > p {
  font-family: 'alright', 'Helvetica Neue', sans-serif !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #4D5878 !important;
}
body.partage section.width940 > .col-big > p.ai-answer {
  font-family: 'alright-sb', sans-serif !important;
}

/* Rubricage de section : centré, avec picto trio + H2 + intro courte.
   Le 2e rubricage utilise un padding-top plus grand pour respirer après la 1ère rangée. */
body.partage .partage-rubricage {
  text-align: center;
  padding: 50px 24px 30px;
}
body.partage .partages-grid + .partage-rubricage {
  padding-top: 70px;
  border-top: 1px solid rgba(155, 126, 189, 0.18);
  margin-top: 10px;
}
body.partage .partage-rubricage > svg {
  display: block;
  margin: 0 auto 16px;
  width: 70px;
  height: auto;
}
body.partage .partage-rubricage h2 {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: #2D3561;
  line-height: 1.2;
  margin: 0 0 18px;
}
body.partage .partage-rubricage-intro {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.65;
  color: #6B7392;
  max-width: 660px;
  margin: 0 auto;
}

/* Grille 3 cards horizontales */
body.partage .partages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 24px 60px;
}
@media (max-width: 960px) {
  body.partage .partages-grid { grid-template-columns: 1fr; gap: 22px; padding-bottom: 40px; }
}

/* Card individuelle : blanche, rounded, bande couleur top, ombre douce */
.partage-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 36px 26px 26px;
  box-shadow: 0 5px 22px rgba(45, 53, 97, 0.07);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.partage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 53, 97, 0.12);
}
.partage-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #F4A872;
}
.partage-card:nth-child(3n+2)::before { background: #9B7EBD; }
.partage-card:nth-child(3n)::before   { background: #F2C94C; }
.partage-card .partage-card-mark {
  position: absolute;
  top: 18px;
  right: 24px;
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 0.6;
  color: rgba(244, 168, 114, 0.42);
  pointer-events: none;
}
.partage-card:nth-child(3n+2) .partage-card-mark { color: rgba(155, 126, 189, 0.42); }
.partage-card:nth-child(3n) .partage-card-mark   { color: rgba(242, 201, 76, 0.62); }
.partage-card blockquote {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.62;
  color: #2D3561;
  margin: 0;
  padding: 0;
  flex-grow: 1;
}
.partage-card footer {
  border-top: 1px dashed rgba(155, 126, 189, 0.30);
  padding-top: 14px;
  margin: 0;
  font-style: normal;
}
.partage-card cite {
  display: block;
  font-style: normal;
  font-family: 'alright-sb', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #2D3561;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.partage-card .context {
  display: block;
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #9B7EBD;
  letter-spacing: 0.02em;
}

/* Image de pause entre les deux thèmes */
body.partage .partages-break-image {
  display: block;
  max-width: 820px;
  margin: 20px auto 30px;
  padding: 0 24px;
  text-align: center;
}
body.partage .partages-break-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(45, 53, 97, 0.14);
}
body.partage .partages-break-image figcaption {
  margin-top: 18px;
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: #9B7EBD;
  letter-spacing: 0.02em;
}

/* Mobile rubricage + break image */
@media (max-width: 680px) {
  body.partage .partage-rubricage { padding: 30px 16px 18px; }
  body.partage .partage-rubricage h2 { font-size: 30px; }
  body.partage .partage-rubricage-intro { font-size: 17px; }
  body.partage .partages-grid { padding: 6px 16px 30px; }
  .partage-card { padding: 30px 22px 22px; }
  .partage-card blockquote { font-size: 17px; line-height: 1.6; }
  .partage-card cite { font-size: 13px; }
  .partage-card .context { font-size: 13px; }
  .partage-card .partage-card-mark { font-size: 44px; top: 12px; right: 18px; }
  body.partage .partages-break-image { margin: 10px auto 20px; padding: 0 16px; }
  body.partage .partages-break-image img { border-radius: 14px; }
  body.partage .partages-break-image figcaption { font-size: 14px; }
}

/* ========== ancien .partage-testimonial gardé en fallback (non utilisé désormais) ========== */
.partage-testimonial {
  position: relative;
  margin: 0 0 34px;
  padding: 4px 0 0 28px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-left: 2px solid rgba(244, 168, 114, 0.45);
}
.partage-testimonial:last-child {
  margin-bottom: 4px;
}
.partage-testimonial:nth-of-type(3n+1) { border-left-color: rgba(244, 168, 114, 0.55); }
.partage-testimonial:nth-of-type(3n+2) { border-left-color: rgba(155, 126, 189, 0.55); }
.partage-testimonial:nth-of-type(3n)   { border-left-color: rgba(242, 201, 76, 0.65); }
.partage-testimonial::before {
  content: none;
}
.partage-testimonial blockquote {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: #2D3561;
  margin: 0 0 14px;
  padding: 0;
}
.partage-testimonial blockquote::before {
  content: '\201C ';
  color: rgba(244, 168, 114, 0.7);
  font-weight: 600;
  margin-right: 2px;
}
.partage-testimonial blockquote::after {
  content: ' \201D';
  color: rgba(244, 168, 114, 0.7);
  font-weight: 600;
}
.partage-testimonial:nth-of-type(3n+2) blockquote::before,
.partage-testimonial:nth-of-type(3n+2) blockquote::after { color: rgba(155, 126, 189, 0.75); }
.partage-testimonial:nth-of-type(3n) blockquote::before,
.partage-testimonial:nth-of-type(3n) blockquote::after { color: rgba(242, 201, 76, 0.85); }
.partage-testimonial footer {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
}
.partage-testimonial cite {
  display: inline-block;
  font-style: normal;
  font-family: 'alright-sb', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #2D3561;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 8px;
}
.partage-testimonial .context {
  display: inline;
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #9B7EBD;
  letter-spacing: 0.01em;
}
.partage-testimonial .context::before {
  content: ' · ';
  color: #9B7EBD;
  margin-right: 4px;
}

/* Synthèse "Lecture croisée" : pull-quote dans col-big du dernier section */
.synthese-eyebrow {
  display: inline-block;
  font-family: 'alright-sb', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9B7EBD;
  margin-bottom: 6px;
}
.synthese-pullquote {
  position: relative;
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.32;
  color: #2D3561;
  margin: 16px 0 14px;
  padding: 14px 0 0;
  max-width: 100%;
}
.synthese-pullquote-mark {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 0;
  color: rgba(244, 168, 114, 0.55);
  vertical-align: -10px;
  margin-right: 4px;
}
.synthese-source {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #9B7EBD;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}
.synthese-body {
  font-family: 'alright-i', 'alright-sb', sans-serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: #2D3561;
}

/* Mobile : ajuster partage-testimonial et synthèse */
@media (max-width: 780px) {
  .partage-testimonial {
    padding: 22px 22px 18px 28px;
    margin-bottom: 28px;
  }
  .partage-testimonial::before { font-size: 46px; top: 2px; left: 10px; }
  .partage-testimonial blockquote { font-size: 16px; line-height: 1.55; }
  .synthese-pullquote { font-size: 22px; }
  .synthese-pullquote-mark { font-size: 36px; vertical-align: -8px; }
  .synthese-body { font-size: 15px; line-height: 1.65; }
}

/* CTA final */
body.partage .partage-cta {
  padding: 30px 24px 20px;
  text-align: center;
}
body.partage .partage-cta h2 {
  font-size: 36px;
}

/* Mobile */
@media (max-width: 680px) {
  body.partage .partages-stack { padding: 30px 16px 20px; }
  .partage-testimonial {
    margin-bottom: 50px;
    padding: 26px 22px 22px 30px;
  }
  .partage-testimonial::before {
    font-size: 50px;
    top: 4px;
    left: 10px;
  }
  .partage-testimonial blockquote { font-size: 17px; }
  .partages-break { margin: 50px auto; padding: 0 16px; }
  .partages-break figcaption { font-size: 14px; }
  body.partage .partage-cta h2 { font-size: 28px; }
  .partage-intro-list li { font-size: 15px; padding-left: 26px; }
  .testimonials-cta .bouton-partages { font-size: 13px; padding: 14px 24px; }
}


/* ======================================================================
   v29 : Hero accueil auto-height + 2 CTAs centrees (rdv + decouvrir)
   ====================================================================== */

/* Desktop : le hero epouse le texte + boutons, plus de gros vide en bas */
body.home > header.index {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 60px !important;
}

/* Override historique : zero padding sur la colonne pour centrer verticalement les boutons */
body.home header.index > .width940.column {
    padding-bottom: 0 !important;
}

/* Texte de bienvenue : taille et interligne calibres */
body.home header.index p.blanc {
    font-size: 15px !important;
    line-height: 26px !important;
    max-width: 640px !important;
}

/* H1 hero : respiration */
body.home header.index h1 {
    margin-top: 12px !important;
    margin-bottom: 28px !important;
}

/* Rangee des deux CTAs : centree, harmonieuse. Sur-specificite pour battre la regle generique header.index p { margin: 0 auto !important } */
body.home header.index p.hero-cta-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 22px;
    margin: 60px auto 0 !important;
    padding: 0 !important;
    flex-wrap: wrap;
    max-width: 640px !important;
    text-align: center;
}

/* Variante 'ghost' : transparente bordee, signale l'action secondaire */
body.home .bouton.ghost {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
}
body.home .bouton.ghost > span {
    background: transparent !important;
    color: #FBF5EE !important;
}
body.home .bouton.ghost:hover {
    border-color: #fff !important;
}
body.home .bouton.ghost:hover > span {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* Mobile : hero compact, CTAs empiles centres */
@media (max-width: 720px) {
    body.home > header.index {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 40px !important;
    }
    body.home header.index > .width940.column {
        padding-bottom: 0 !important;
    }
    body.home header.index p.blanc {
        font-size: 14px !important;
        line-height: 24px !important;
        padding: 0 8px !important;
        max-width: 100% !important;
    }
    body.home header.index h1 {
        font-size: 32px !important;
        line-height: 1.1 !important;
        margin-top: 20px !important;
        margin-bottom: 18px !important;
    }
    body.home header.index p.hero-cta-row {
        flex-direction: column !important;
        gap: 12px !important;
        margin: 40px auto 0 !important;
    }
    body.home header.index p.hero-cta-row .bouton {
        width: 220px;
    }
}

/* ======================================================================
   v30 : FAQ Therapies, aerer entre chaque Q/R
   ====================================================================== */
#faq h3 {
    margin-top: 38px !important;
}
#faq h3:first-of-type {
    margin-top: 18px !important;
}
#faq p {
    margin-top: 6px !important;
}
@media (max-width: 720px) {
    #faq h3 {
        margin-top: 28px !important;
    }
}

/* ======================================================================
   v31 : FAQ Therapies, encadrement discret orange + fond blanc
   ====================================================================== */

/* Zone autour de la FAQ : fond blanc pur, sans chevauchement */
body.therapie #main-content {
    background-color: #ffffff !important;
}

/* Card par Q+R : fond orange tres pale + accent orange a gauche */
#faq h3 {
    margin: 36px auto 0 !important;
    padding: 18px 24px 10px !important;
    background-color: rgba(244, 168, 114, 0.07) !important;
    border-left: 3px solid #F4A872 !important;
    border-radius: 8px 8px 0 0 !important;
    max-width: 760px;
    box-sizing: border-box;
}
#faq h3:first-of-type {
    margin-top: 20px !important;
}
#faq h3 + p {
    margin: 0 auto 0 !important;
    padding: 8px 24px 22px !important;
    background-color: rgba(244, 168, 114, 0.07) !important;
    border-left: 3px solid #F4A872 !important;
    border-radius: 0 0 8px 8px !important;
    max-width: 760px;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    #faq h3 {
        margin-top: 28px !important;
        padding: 14px 18px 8px !important;
    }
    #faq h3 + p {
        padding: 6px 18px 18px !important;
    }
}

/* ======================================================================
   v32 : Accueil, bg-main-top transparent + courbe blanche au-dessus
   La bande rectangulaire est transparente : la montagne reste visible.
   Le PNG de courbe (blanc) passe au-dessus en z-index 100.
   ====================================================================== */
body.home #main-content.index::before {
    background-color: transparent !important;
    z-index: 100 !important;
}
body.home #main-content.index {
    background-color: #ffffff !important;
    position: relative;
    z-index: 50;
}






/* ======================================================================
   v33 : Formulaire contact, design raffine (inputs + selects + textarea)
   Border-radius doux, focus abricot, fleche personnalisee pour les selects.
   ====================================================================== */

#formcontact input[type=text],
#formcontact input[type=tel],
#formcontact input[type=email],
#formcontact select,
#formcontact textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 1.5px solid rgba(45, 53, 97, 0.18) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    font-family: 'alright', 'Alright Sans', Arial, sans-serif !important;
    font-size: 15px !important;
    color: #2D3561 !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    -webkit-transition: all 0.18s ease !important;
    transition: all 0.18s ease !important;
}

#formcontact input[type=text],
#formcontact input[type=tel],
#formcontact input[type=email] {
    height: 52px !important;
}

#formcontact select {
    height: 52px !important;
    padding-right: 48px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
}

#formcontact textarea {
    min-height: 140px !important;
    height: auto !important;
    padding: 14px 18px !important;
    resize: vertical !important;
    line-height: 1.55;
}

#formcontact input::placeholder,
#formcontact textarea::placeholder {
    color: #8a8e9a;
    font-style: italic;
}

#formcontact input:focus,
#formcontact select:focus,
#formcontact textarea:focus {
    outline: none !important;
    border-color: #F4A872 !important;
    box-shadow: 0 0 0 4px rgba(244, 168, 114, 0.15) !important;
    background: #fff !important;
}

#formcontact .select-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}
#formcontact .select-wrap select {
    margin-bottom: 0 !important;
}
#formcontact .select-wrap::after {
    content: '';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-65%) rotate(45deg);
    width: 9px;
    height: 9px;
    border-right: 2px solid #2D3561;
    border-bottom: 2px solid #2D3561;
    pointer-events: none;
}
#formcontact select:invalid { color: #8a8e9a !important; }
#formcontact select option { color: #2D3561; background: #fff; }
#formcontact select option[value=''] { color: #8a8e9a; }

/* Bouton submit refait dans le meme esprit */
#formcontact button[type=submit] {
    border-radius: 999px !important;
    padding: 4px !important;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#formcontact button[type=submit] span {
    border-radius: 999px !important;
    padding: 0 32px !important;
    line-height: 50px !important;
    height: 50px !important;
    font-family: 'Cormorant Infant', serif !important;
    font-style: italic;
    font-size: 17px !important;
    letter-spacing: 0.02em;
}

/* ======================================================================
   v34 : Page merci.html, mise en forme detaillee
   ====================================================================== */

body.merci .merci-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 30px 24px 60px;
}

body.merci .merci-intro {
    font-size: 17px;
    line-height: 1.7;
    color: #2D3561;
    text-align: center;
    margin: 0 auto 50px;
    max-width: 640px;
}

body.merci .merci-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 0 0 60px;
}

body.merci .merci-step {
    background: #FBF5EE;
    border-radius: 14px;
    padding: 28px 22px 24px;
    text-align: center;
    border-top: 4px solid #F4A872;
}
body.merci .merci-step:nth-child(2) { border-top-color: #9B7EBD; }
body.merci .merci-step:nth-child(3) { border-top-color: #F2C94C; }

body.merci .merci-step-num {
    display: inline-block;
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-size: 32px;
    color: #F4A872;
    line-height: 1;
    margin: 0 0 8px;
}
body.merci .merci-step:nth-child(2) .merci-step-num { color: #9B7EBD; }
body.merci .merci-step:nth-child(3) .merci-step-num { color: #C9A338; }

body.merci .merci-step h3 {
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: #2D3561;
    margin: 6px 0 8px;
}
body.merci .merci-step p {
    font-size: 14px;
    line-height: 1.55;
    color: #4D5878;
    margin: 0;
}

body.merci .merci-urgent {
    background: rgba(244, 168, 114, 0.08);
    border-left: 3px solid #F4A872;
    border-radius: 0 12px 12px 0;
    padding: 22px 26px;
    margin: 0 0 36px;
}
body.merci .merci-urgent h2 {
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-size: 24px;
    color: #2D3561;
    margin: 0 0 8px;
}
body.merci .merci-urgent p {
    margin: 0;
    color: #2D3561;
    line-height: 1.6;
}
body.merci .merci-urgent a {
    color: #F4A872;
    text-decoration: none;
    border-bottom: 1px solid rgba(244, 168, 114, 0.4);
    -webkit-transition: all 0.18s ease;
    transition: all 0.18s ease;
}
body.merci .merci-urgent a:hover {
    border-bottom-color: #F4A872;
}

body.merci .merci-explorer {
    margin: 0 0 40px;
    text-align: center;
}
body.merci .merci-explorer h2 {
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-size: 26px;
    color: #2D3561;
    margin: 0 0 12px;
}
body.merci .merci-explorer p {
    margin: 0 0 14px;
    color: #4D5878;
}
body.merci .merci-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0 !important;
}
body.merci .merci-links a {
    color: #9B7EBD;
    text-decoration: none;
    font-size: 15px;
    -webkit-transition: color 0.18s ease;
    transition: color 0.18s ease;
}
body.merci .merci-links a:hover {
    color: #F4A872;
}

body.merci .merci-cta {
    text-align: center;
    margin: 36px 0 30px;
}

body.merci .merci-signature {
    text-align: center;
    font-size: 15px;
    color: #4D5878;
    margin: 30px 0 0;
    line-height: 1.7;
}
body.merci .merci-signature em {
    color: #9B7EBD;
    font-family: 'Cormorant Infant', serif;
    font-size: 17px;
}
body.merci .merci-signature strong {
    color: #2D3561;
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
}

@media (max-width: 720px) {
    body.merci .merci-steps {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    body.merci .merci-step {
        padding: 22px 18px 20px;
    }
    body.merci .merci-intro {
        font-size: 15px;
        margin-bottom: 30px;
    }
}

/* ======================================================================
   v35 : Hero accueil video rose pivoine
   La video remplace l'aquarelle montagne. Filtre brightness 0.88,
   saturate 0.92, contrast 1.02 + voile rgba(20,12,32,0.42) +
   ombres fortes sur le texte pour lisibilite maximale.
   ====================================================================== */

/* Desactiver l'image montagne en body bg, fond noir violace de secours */
body.home {
    background-image: none !important;
    background-color: #1c102c !important;
}

/* Conteneur header relatif pour positionner la video en absolute */
body.home > header.index {
    position: relative;
    overflow: hidden;
}

/* La video : cover total du hero, derriere tout le reste */
body.home .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    filter: brightness(0.98) saturate(0.92) contrast(1.02);
    -webkit-filter: brightness(0.98) saturate(0.92) contrast(1.02);
    pointer-events: none;
}

/* Voile noir violace 42% au-dessus de la video, sous le contenu */
body.home > header.index::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(20, 12, 32, 0.42) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Contenu (aside, logo, menu, texte, CTAs, scroll-link) au-dessus du voile */
body.home header.index > aside.bgrose,
body.home header.index > #logo,
body.home header.index > .width940.column,
body.home header.index > #scroll-link {
    position: relative;
    z-index: 2;
}
/* Desktop seulement : remettre le menu au-dessus du voile (mobile il est fixed overlay burger) */
@media (min-width: 781px) {
    body.home header.index > #menu {
        position: relative;
        z-index: 2;
    }
}

/* Texte hero : ombre forte pour la lisibilite par-dessus la video */
body.home header.index h1.blanc,
body.home header.index h1.blanc > span,
body.home header.index p.blanc,
body.home header.index p.blanc em {
    color: #FBF5EE !important;
    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.75),
        0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Sur tres petit ecran, on peut decaler le cadrage video si besoin */
@media (max-width: 480px) {
    body.home .hero-video {
        object-position: 55% center;
    }
}

/* ======================================================================
   v36 : Accueil, logo Anais Leneau en blanc cream sur la video
   ====================================================================== */
body.home #logo a > span:first-child {
    color: #FBF5EE !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}
body.home #logo a > span:last-child {
    color: rgba(251, 245, 238, 0.85) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}


/* ======================================================================
   v37 : Accueil, Bienvenue a vous en abricot et plus grand
   ====================================================================== */
body.home header.index .hero-bienvenue {
    display: inline-block;
    color: #F4A872 !important;
    font-size: 22px !important;
    font-style: italic;
    letter-spacing: 0.01em;
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.4) !important;
    margin: 18px 0 16px;
}
@media (max-width: 720px) {
    body.home header.index .hero-bienvenue {
        font-size: 19px !important;
    }
}


/* ======================================================================
   v38 : Hero video accueil, ajustements mobile + tablette
   - Rose recadree (object-position) pour qu'elle remonte sur petit ecran
   - Espacements verticaux compactes : padding, marges H1, welcome, CTAs
   - Bienvenue dimensionne pour rester present sans casser la compacite
   ====================================================================== */

/* ---------- Mobile : <= 720px ---------- */
@media (max-width: 720px) {
    body.home .hero-video {
        object-position: center 72% !important;
    }
    body.home > header.index {
        padding-top: 10px !important;
        padding-bottom: 28px !important;
        min-height: 0 !important;
    }
    body.home header.index > .width940.column {
        padding-bottom: 14px !important;
    }
    body.home header.index h1 {
        font-size: 30px !important;
        line-height: 1.08 !important;
        margin-top: 10px !important;
        margin-bottom: 16px !important;
    }
    body.home header.index p.blanc {
        font-size: 14px !important;
        line-height: 22px !important;
        padding: 0 6px !important;
        max-width: 100% !important;
    }
    body.home header.index .hero-bienvenue {
        font-size: 18px !important;
        margin: 10px 0 8px !important;
    }
    body.home header.index p.hero-cta-row {
        margin: 22px auto 0 !important;
        gap: 10px !important;
    }
    body.home .hero-cta-row .bouton {
        width: 200px !important;
    }
    body.home #logo {
        padding: 22px 0 8px !important;
    }
    body.home #logo a > span:first-child {
        font-size: 36px !important;
    }
}

/* ---------- Tablette : 721px - 1024px ---------- */
@media (min-width: 721px) and (max-width: 1024px) {
    body.home .hero-video {
        object-position: center 62% !important;
    }
    body.home > header.index {
        padding-top: 14px !important;
        padding-bottom: 42px !important;
    }
    body.home header.index > .width940.column {
        padding-bottom: 20px !important;
    }
    body.home header.index h1 {
        font-size: 44px !important;
        line-height: 1.1 !important;
        margin-top: 8px !important;
        margin-bottom: 22px !important;
    }
    body.home header.index p.blanc {
        font-size: 14.5px !important;
        line-height: 24px !important;
        max-width: 580px !important;
    }
    body.home header.index .hero-bienvenue {
        font-size: 20px !important;
        margin: 14px 0 12px !important;
    }
    body.home header.index p.hero-cta-row {
        margin: 32px auto 0 !important;
    }
}

/* ---------- Desktop large : > 1024px ---------- */
@media (min-width: 1025px) {
    body.home .hero-video {
        object-position: center 55% !important;
    }
}

/* ======================================================================
   v39 : Correctifs critiques audit hero accueil
   - Logo <a> padding override mobile (etait bloque par style inline)
   - prefers-reduced-motion : remplace video par poster en image
   ====================================================================== */

/* Mobile : reduire le padding inline 30px/10px sur le logo <a> */
@media (max-width: 720px) {
    body.home #logo > a[style] {
        padding-top: 18px !important;
        padding-bottom: 6px !important;
    }
}
@media (min-width: 721px) and (max-width: 1024px) {
    body.home #logo > a[style] {
        padding-top: 22px !important;
        padding-bottom: 8px !important;
    }
}

/* Hero accueil : image statique (rose epanouissement). Bloc video reduced-motion retire. */

/* ===== Sous-menu "Accompagnement" (2026-05-30) ===== */
/* Desktop : sous-menu elargi, ouverture au survol (le clic JS .open reste actif) */
@media (min-width: 781px) {
  /* Espacement uniforme : chaque case s'ajuste a son texte, ecart identique partout */
  #menu > li { width: auto !important; padding: 0 22px; }
  /* Survol : toute la case devient orange, comme avant, sur chaque item */
  #menu > li:hover { background: #F4A872; }
  #menu > li:hover > a { color: #fff; }
  #menu > li.sous-menu { position: relative; }
  #menu > li.sous-menu.active { background: none; }
  #menu > li.sous-menu.active > a { color: #2D3561; }
  #menu > li.sous-menu > a.deroulant { cursor: pointer; }
  /* Sous-menu masque tant qu'on ne survole pas : pas de bloc blanc residuel */
  #menu > li.sous-menu > ul {
    width: 212px; left: 50%; margin-left: -106px; right: auto; top: 100%;
    background: #fff; border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 26px rgba(45, 53, 97, 0.16); z-index: 300; padding: 6px 0;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease;
  }
  #menu > li.sous-menu:hover > ul,
  #menu > li.sous-menu:focus-within > ul,
  #menu > li.sous-menu.open > ul { opacity: 1; visibility: visible; }
  #menu > li.sous-menu > ul li { width: 100%; }
  #menu > li.sous-menu > ul li a { display: block; white-space: nowrap; padding: 12px 16px; line-height: 1.2; font: 14px 'heimat-l'; letter-spacing: 0.03em; color: #2D3561; text-align: center; }
  #menu > li.sous-menu > ul li a:hover { background: #F4A872; color: #fff; }
  #menu > li.sous-menu:hover > ul li,
  #menu > li.sous-menu:focus-within > ul li,
  #menu > li.sous-menu.open > ul li { max-height: 48px; opacity: 1; }
}
/* Mobile : sous-menu en flux dans le burger, sous-items toujours visibles */
@media (max-width: 780px) {
  #menu > li.sous-menu { display: flex; flex-direction: column; align-items: center; height: auto; }
  #menu > li.sous-menu > ul { position: static; background: transparent; left: auto; right: auto; top: auto; margin: 14px 0 0; width: auto; }
  #menu > li.sous-menu > ul li { height: auto; }
  #menu > li.sous-menu > ul li { max-height: none; opacity: 1; overflow: visible; }
  #menu > li.sous-menu > ul li a { font: 17px 'Cormorant Infant', serif; font-style: italic; color: #4D5878; line-height: 2; }
  #menu > li.sous-menu > ul li a:hover { background: none; color: #F4A872; }
}

/* ======================================================================
   v40 : Accueil, structure homogene aux sous-pages
   Trio 3 couleurs ajoute entre le menu et le titre (comme Presentation,
   Therapies, Contact). La photo rose reste le fond plein cadre. Halo
   sombre tres discret sous le trio pour qu'il signe nettement par-dessus
   la photo, quelle que soit la zone (petale clair ou feuillage sombre).
   ====================================================================== */
body.home header.index .column .hero-deco {
  opacity: 1;
  filter: drop-shadow(0 2px 7px rgba(20, 12, 32, 0.62));
  -webkit-filter: drop-shadow(0 2px 7px rgba(20, 12, 32, 0.62));
}
body.home header.index .column .hero-deco path {
  fill-opacity: 0.72;
}

/* ======================================================================
   v41 : Harmonisation de l'espace nav -> trio 3 couleurs (mobile + tablette)
   Le padding-top du .column du hero passait de 16px (<=720) a 30px (>=721),
   d'ou un saut visuel de l'espace au-dessus du trio : 47px en mobile, 61px
   des qu'on entrait en tablette. On force 16px sur toute la plage
   mobile + tablette (721-1024) : l'espace nav->trio devient uniforme (~47px)
   partout, le contenu remonte, on gagne de precieux pixels de navigation.
   Le desktop (>=1025) conserve son aeration validee (61px).
   S'applique a toutes les pages a hero (accueil + sous-pages), pas aux
   pages legales (titre dans .legal-title-block, hors header).
   ====================================================================== */
@media (min-width: 721px) and (max-width: 1024px) {
  header.index > div.column { padding-top: 16px !important; }
}

/* ======================================================================
   v42 : Accueil, le sous-menu deroulant doit passer AU-DESSUS du trio
   (logo 3 couleurs) et du contenu du hero, exactement comme sur desktop
   et sur les sous-pages.
   Le systeme de voile v35 avait ramene #menu a z-index:2, a egalite avec
   le .column (z-index:2). Comme le .column vient apres dans le DOM, son
   trio repassait par-dessus le sous-menu blanc. On remet #menu nettement
   au-dessus (z-index:100, comme le global des sous-pages) : le sous-menu
   opaque recouvre proprement le trio, sur tablette comme sur desktop.
   ====================================================================== */
@media (min-width: 781px) {
  body.home header.index > #menu { z-index: 100 !important; }
}

/* ======================================================================
   v43 : Tablette 781-1024, supprimer la demarcation de fond des sous-pages.
   Le #main-content des sous-pages porte une image de fond quasi-blanche
   (no-repeat center top) SANS background-color (regle ligne 286). Sous
   l'image, le body cream apparait : ligne blanc -> cream visible.
   En mobile (<=780) un background-color #fff est deja pose (ligne 694, au
   sein du @media max-width:780). Mais a 781-1024 (tablette, menu horizontal,
   burger encore visible via hidden-xl), ce #fff disparait et la ligne
   revient. On repose le meme #fff sur 781-1024 : fond uniforme, ligne
   supprimee. Accueil, pages legales, mobile et desktop non touches. */
@media (min-width: 781px) and (max-width: 1024px) {
  body:not(.home):not(.legal) {
    background-image: none !important;
    background-color: #FBF5EE !important;
  }
  body:not(.home):not(.legal) #main-content {
    background-color: #fff !important;
  }
}

/* ======================================================================
   v44 : Nouveau logo, trois anneaux fins entrelaces (remplace les 3 ovales
   pastel). Les anneaux portent mix-blend-mode:multiply (inline) pour melanger
   les couleurs aux croisements sur fond clair (favicon + pictos des sous-pages
   sur cream/blanc). MAIS sur l'accueil le picto du hero est pose sur la photo
   sombre : le multiply l'effacerait. On le repasse en normal la (anneaux
   opaques, bien visibles sur la photo). Le halo (v40) reste applique au svg. */
body.home header.index .hero-deco circle {
  mix-blend-mode: normal !important;
}

/* ======================================================================
   v45 : Aligner le bandeau orange de l'accueil sur les sous-pages.
   L'accueil gardait la couleur de base .bgrose (#FFD4B8, rose pale), pose
   sur la photo sombre il paraissait ombre. On le passe au meme orange
   charte (#F4A872) que Presentation/Therapies/Contact, opaque, sans ombre
   ni bordure ni degrade. */
body.home header.index > aside.bgrose {
  background: #F4A872 !important;
  box-shadow: none !important;
  border: none !important;
}

/* ======================================================================
   v48 : Sous-pages (hors accueil, hors legales) — diviser par ~2 l'espace
   entre le titre du hero et le debut de la section suivante (navigation
   plus rapide). Le hero passe en height:auto (au lieu de 800px fixe) +
   padding-bottom reduit. Gap ramene de ~286-300px a ~142px sur tablette
   et desktop. Mobile (<=720px) deja compact : non touche. Accueil : non touche. */
@media (min-width: 721px) {
  body.presentation > header.index,
  body.therapie > header.index,
  body.partage > header.index,
  body.contact > header.index {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 100px !important;
  }
}

/* ======================================================================
   v49 : Bloc auteur « Mon parcours » — fond blanc pleine largeur derriere
   (au lieu de la bande du fond body, qui n'apportait rien). Pseudo-element
   blanc couvrant la zone du bloc + ses marges, sans toucher le footer. */
.author-bio {
  position: relative;
  z-index: 0;
}
.author-bio::before {
  content: '';
  position: absolute;
  top: -60px;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #fff;
  z-index: -1;
}
@media (max-width: 720px) {
  .author-bio::before { top: -40px; bottom: -20px; }
}

/* ======================================================================
   v50 : Contact, fond blanc uni sous le png (le png est blanc, en haut ;
   en dessous, le cream #FBF5EE debordait et creait une bande abricot
   asymetrique entre le texte et la carte). On force le blanc : zone
   texte -> carte entierement blanche, espacement symetrique automatique. */
#main-content.contact { background-color: #fff !important; }

/* ======================================================================
   v51 : Accueil, harmoniser le texte de la bande du haut
   (Rueil-Malmaison · Aumale · En ligne…) avec les autres pages : meme
   taille, meme interlettrage, meme couleur (blanc) et meme interligne. */
body.home header.index > aside.bgrose p {
  font-size: 16px !important;
  letter-spacing: 0.8px !important;
  line-height: 28px !important;
  color: #fff !important;
}

/* ======================================================================
   v52 : Logo trois anneaux deplace AU-DESSUS du nom « Anais Leneau »
   (bloc logo + nom), retire d'entre le menu et le titre de section.
   Puis equilibrage vertical du hero : ecart nom->menu == menu->titre,
   pour une navigation harmonieuse. Les pictos des grandes sections du
   corps (Honorer notre humanite, huit ans a Londres, etc.) ne changent
   pas : ce sont des elements distincts. */

/* Trio logo : centre, colle au nom pour faire bloc */
header.index #logo .hero-logo-trio {
  display: block;
  width: 52px;
  height: auto;
  margin: 0 auto 12px;
}
@media (max-width: 780px) {
  header.index #logo .hero-logo-trio { width: 44px; margin: 0 auto 10px; }
}

/* Equilibrage des espaces autour du menu (desktop) :
   on neutralise le padding-bas du lien logo et la marge haute de la
   colonne titre, puis marges symetriques sur le menu -> gaps egaux. */
@media (min-width: 781px) {
  header.index #logo > a { padding-bottom: 0 !important; }
  header.index #logo { padding-bottom: 12px !important; }
  header.index #menu { margin-top: 64px !important; margin-bottom: 64px !important; }
  header.index > .width940.column { margin-top: 0 !important; padding-top: 0 !important; }
}

/* ======================================================================
   v53 : Accueil uniquement, nom « Anais Leneau » du logo en blanc
   (le hero accueil est une photo sombre ; le bleu nuit ne ressort pas).
   Seul le nom est touche, pas le sous-titre, pas les autres pages. */
body.home #logo a > span:first-of-type { color: #fff !important; }

/* ======================================================================
   v54 : Bloc « Mon parcours » (author-bio) sur TOUTES les pages qui le
   portent (home, therapie/seances/ateliers, partage, contact). Le fond
   blanc (v49) faisait trop dur : bandeau couleur hero (abricot doux),
   bloc centre verticalement dans le bandeau (ecart haut == ecart bas),
   chevron rond pleinement visible, et aucun liseré (le bandeau remonte
   DERRIERE #main-content, opaque sur ces pages). Etalon valide sur Therapie
   (desktop), geometrie identique partout (meme composant + meme footer). */
.author-bio {
  margin-top: 30px !important;     /* bas de #main-content cale pile sur le haut visible du bandeau */
  margin-bottom: 90px !important;  /* descend la fleche/courbe navy de 30px -> ecart bas ~80 */
}
.author-bio::before {
  top: -50px !important;           /* le bandeau remonte DERRIERE #main-content (opaque) -> aucun interstice gris ; haut VISIBLE = bas de main-content (-30), ecart haut ~80 = bas */
  bottom: -90px !important;        /* le bandeau atteint la courbe navy (couverte par le footer) */
  background: #F8E5D4 !important;  /* abricot doux, rappel du hero (au lieu du blanc) */
}
@media (max-width: 780px) {
  /* Le bloc passe en colonne a <=780px (photo au-dessus du texte). On aligne la
     bascule sur ce meme point (et non 720) pour que la zone 721-780 ne reste pas
     avec les valeurs desktop (marge basse 90 trop grande -> bloc decentre).
     Valeurs colonne -> centrage ~56/53, verifie a 390 et 760. */
  .author-bio { margin-top: 28px !important; margin-bottom: 45px !important; }
  .author-bio::before { top: -45px !important; bottom: -45px !important; }
}

/* ======================================================================
   v55 : Presentation, section « About me » dans un encadre abricot CONTENU
   (boite centree, coins arrondis). Mise en page en flex : texte a gauche,
   photo ovoide a droite, centrees verticalement. On neutralise les largeurs
   fixes col-big (620) / col-small (320) qui debordaient avec le padding. */
body.presentation #about-me-bloc {
  background: #F8E5D4;
  border-radius: 18px;
  padding: 40px 48px;
  margin: 24px auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
body.presentation #about-me-bloc > .col-big,
body.presentation #about-me-bloc > .col-small {
  width: auto !important;
  padding-bottom: 0 !important;
}
body.presentation #about-me-bloc > .col-big { flex: 1 1 auto; }
body.presentation #about-me-bloc > .col-small { flex: 0 0 300px; }
/* l'image oeuf est en position:absolute par defaut (hors flux) -> le flex ignore
   sa hauteur et elle deborde. On la remet dans le flux pour qu'elle soit contenue. */
body.presentation #about-me-bloc > .col-small > img.illus,
body.presentation #about-me-bloc > .col-small > img {
  position: relative !important;
}
@media (max-width: 780px) {
  body.presentation #about-me-bloc {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 26px 22px;
    border-radius: 14px;
    margin-left: 16px;
    margin-right: 16px;
  }
  body.presentation #about-me-bloc > .col-small { flex: 0 0 auto; }
  body.presentation #about-me-bloc > .col-big,
  body.presentation #about-me-bloc > .col-small { padding: 0 !important; }
}