/* Bare Face Clinic — charte de l’identité visuelle, appliquée aux composants repris d’Atelier des Toits.
   Forest Green #387055, Ivory #F5F2EA, Pale Sage #DCE6DF, Ink #20382E, Sand #C9B99A. Helvetica / Arial (principale et secondaire). */
:root{--bg:#F5F2EA;--card:#fff;--text:#20382E;--muted:#5d6b64;--line:#DCE6DF;--accent:#387055;--accent-dark:#2c5a44;--lilac:#DCE6DF;--pink:#C9B99A;--pink-line:#e4ddcf;
  --cream:#F5F2EA;--night:#387055;--night-2:#20382E;--deep:#20382E;--sage:#DCE6DF;--sand:#C9B99A;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif}
body,button,input,select,textarea{font-family:var(--font)}
h1,h2,h3,.qf-title,.pts-n,.float strong,.loc-facts strong,.loc-grid strong{font-family:var(--font)!important;font-weight:700;letter-spacing:-.025em}
h3{letter-spacing:-.01em}
em{font-family:var(--font);font-style:normal;font-weight:400;color:var(--accent)}
.hx-hero h1 em,.hx-final em{color:#DCE6DF;font-weight:400}
.hx-dark em,.tp-night em{color:#C9B99A}
.kicker{color:var(--accent);letter-spacing:.22em;font-weight:500}
.hx-dark .kicker,.tp-night .kicker{color:#C9B99A}
::selection{background:var(--accent);color:#fff}
.btn{background:var(--accent);border-color:var(--accent)}
.btn:hover{background:var(--deep);border-color:var(--deep)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--text)}
.btn-ghost:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn,.qf-tile span,.car-btn,.m-bar,.m-bar a,.header-cta,dialog .btn{border-radius:999px!important}
.pill{background:#38705514;color:var(--accent)}
header{background:#F5F2EAee}
.brand img{height:40px}
.header-tel{color:var(--muted);font-weight:500;font-size:14px;letter-spacing:.04em}
footer{background:var(--accent);color:#F5F2EA;position:relative;overflow:hidden}
footer .brand img{filter:brightness(0) invert(1)}
footer p,footer li,footer a{color:#F5F2EA}
footer h2,footer h2 a{color:#fff}
.hx-dark,.tp-night{background:var(--accent)}
.m-bar{background:#20382Ef2}
.hx-hero-overlay{background:linear-gradient(180deg,#20382Eb8,#20382E80 45%,#20382Ed9)}
.qf-tile input:checked+span{border-color:var(--accent);background:#38705514}
.float strong{color:var(--accent)}
.tp-box,.hx-price-main{background:var(--sage)}
/* Vagues fines de la charte (logo, papeterie) */
.waves{position:absolute;right:-40px;bottom:-10px;width:min(560px,70vw);height:auto;pointer-events:none;opacity:.55}
.hx-hero .waves,footer .waves{opacity:.35}
.sh,.tp-hero,.hx-final{position:relative;overflow:hidden}
.sh .waves,.tp-hero .waves{opacity:.6}
.waves path{fill:none;stroke:currentColor;stroke-width:1.2}
footer .waves,.hx-hero .waves,.hx-final .waves{color:#DCE6DF}
.sh .waves,.tp-hero .waves{color:#387055}
/* Bandeau « basée à Dubaï » */
.dubai-band{background:var(--deep);color:#F5F2EA;text-align:center;font-size:13px;letter-spacing:.14em;padding:9px 16px;text-transform:uppercase}
.dubai-band strong{color:#C9B99A;font-weight:600}
/* Cartes de citations (identité) */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.quotes li{list-style:none;border-radius:14px;padding:34px 28px;min-height:170px;display:flex;align-items:flex-end;font-size:clamp(22px,2.4vw,30px);font-weight:500;line-height:1.15;letter-spacing:-.02em;position:relative;overflow:hidden}
.quotes li:nth-child(1){background:var(--accent);color:#fff}.quotes li:nth-child(2){background:#ebe5d8;color:var(--text)}.quotes li:nth-child(3){background:var(--sage);color:var(--text)}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.post-note{font-size:13px;color:var(--muted)}
.credits td,.credits th{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.is-home header:not(.scrolled) .brand img{filter:brightness(0) invert(1)}
.is-home header:not(.scrolled){background:transparent}
.is-home header.scrolled{background:#F5F2EAee}
@media(min-width:861px){.hx-fig-grid{grid-template-columns:repeat(3,1fr)}}
/* Mise en page : aucune grille avec des colonnes vides */
.hub-grid,.pts{display:flex;flex-wrap:wrap;justify-content:center}
.hub-grid>li{flex:0 1 calc((100% - 66px)/4);min-width:240px}
.pts>li{flex:0 1 calc((100% - 54px)/4);min-width:220px}
@media(min-width:861px){.hx-prices{grid-template-columns:1.2fr 1fr}}
.qf-tiles>.qf-tile:last-child:nth-child(odd),.choix>li:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:600px){.hub-grid>li,.pts>li{flex-basis:100%}}
/* Mosaïque : grille régulière (3 × 2), légende sur la photo */
.hx-mosaic{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;columns:auto!important;margin-top:36px}
.hx-mosaic .hx-m{position:relative;margin:0!important;aspect-ratio:4/5;height:auto!important;border-radius:14px;overflow:hidden;background:none;padding:0;grid-row:auto!important;grid-column:auto!important}
.hx-mosaic .hx-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-mosaic .hx-m figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(transparent,#20382Ed9);color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em}
@media(max-width:760px){.hx-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* WhatsApp : bouton flottant + barre mobile à 3 boutons */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:30;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #0004;transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}.wa-float svg{width:32px;height:32px}
@media(max-width:760px){.wa-float{bottom:84px;right:16px;width:52px;height:52px}}
.m-bar{grid-template-columns:1.6fr 1fr 1fr!important}
/* Tout centré : titres, textes, boutons (le formulaire, les listes à puces et les pages légales restent alignés à gauche) */
main h1,main h2,main h3,main p,main summary,.kicker,.pill,.crumbs,.lead,.note,.section-head,.tp-hero-text,.hx-hero-content>div,.tp-card-text,.tp-list-head,.tp-steps-head,.tp-box,.tp-final .wrap,.hx-about>div,.hx-final,.hx-panel-text,.hx-fig,.hx-price,.tp-tile,.tp-fcard,.hx-proc-step,.tp-steps-list li,.tp-list-items li,.pts li,.contact-in>div:first-child{text-align:center}
.section-head,.tp-statement .wrap{margin-inline:auto}
main p,.lead{margin-inline:auto}
.btn-row,.tp-hero-text,.hx-panel-text,.tp-box{justify-content:center;align-items:center}
.tp-hero-text .crumbs,.sh .crumbs{justify-content:center;display:flex;gap:6px}
.hx-panel-text .btn,.tp-box-go,.hx-price .btn{margin-inline:auto}
.checks,.tp-keys{display:inline-flex;flex-direction:column;align-items:flex-start;text-align:left}
.tp-statement .wrap,.hx-price{display:flex;flex-direction:column;align-items:center}
.qf,.qf *{text-align:left}.qf .qf-title,.qf .qf-sub{text-align:left}
.post-body.legal,.post-body.legal p,.post-body.legal h2{text-align:left}
.faq details p{text-align:center}
.contact-direct{display:flex;flex-direction:column;align-items:center;padding:0;list-style:none}
/* Menu Prestations : deux familles en colonnes */
.nav-menu.mega{grid-template-columns:1fr 1fr;gap:18px;min-width:600px}
.mega-col{display:flex;flex-direction:column}
.mega-h{margin:2px 10px 8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-align:left!important}
#mobile-menu .mega-h{margin:14px 0 4px}
/* ===== Présentation ordinateur (refonte du 3 novembre 2026) ===== */
/* Largeur de lecture plus généreuse sur grand écran */
@media(min-width:1100px){.wrap{max-width:1240px}}
/* Pas d’étiquette flottante par-dessus les titres centrés */
.tp-pill{display:none!important}
/* Carrousels : toutes les cartes visibles, centrées, aucune ne déborde */
.car-track{flex-wrap:wrap;justify-content:center;overflow:visible!important;scroll-snap-type:none}
.car-track>li{flex:0 1 calc((100% - 60px)/4);min-width:230px;max-width:340px}
.tp-show .car-track>li{flex-basis:calc((100% - 40px)/3);max-width:380px}
.tp-rail-foot{display:none!important}
/* Cartes « En détail » : l’une sous l’autre, sans empilement collant qui laisse des blocs vides */
.tp-card{position:relative!important;top:auto!important}
.tp-cards{gap:28px}
.tp-card-media img,.tp-frame-img img,.hx-about-photo img,.hx-proc-visual img,.hx-panel-media img,.sh-img img,.fam-img img,.tp-tile-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* Titres de héros : taille maîtrisée pour ne pas couper le titre en cinq lignes */
.hx-hero h1{font-size:clamp(38px,3.6vw,60px);line-height:1.08}
.tp-hero h1,.sh h1{font-size:clamp(34px,3.2vw,54px);line-height:1.1}
main h2{font-size:clamp(28px,2.4vw,42px)}
main p,main li{font-size:clamp(15px,1.05vw,17px)}
/* Blocs en deux colonnes : texte centré verticalement à côté de l’image */
.hx-about,.sh-in,.contact-in{align-items:center}
.sh-img{border-radius:18px;overflow:hidden;aspect-ratio:4/3}
#blanchiment .sh-in{display:grid;grid-template-columns:1.1fr 1fr;gap:48px}
@media(max-width:860px){#blanchiment .sh-in{grid-template-columns:1fr}}
/* Liste « Le bilan au rendez-vous » / « À savoir » : titre au-dessus, liste centrée en dessous */
.tp-list-grid{display:block!important}
.tp-list-head{max-width:760px;margin:0 auto 28px}
.tp-list-items{max-width:760px;margin:0 auto}
/* Parcours : une seule colonne centrée (la photo accompagne l’étape au lieu d’une colonne à part) */
@media(min-width:861px){
  .hx-proc{display:block}
  .hx-proc-visual{display:none}
  .hx-proc-list{max-width:820px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding:0}
  .hx-proc-bar{display:none}
  .hx-proc-step{opacity:1!important;padding:0!important;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;padding-bottom:22px!important}
  .hx-proc-step .hx-proc-inline{display:block!important;width:100%;aspect-ratio:16/10;object-fit:cover;margin:0 0 18px;border-radius:0}
  .hx-proc-step h3,.hx-proc-step p,.hx-proc-step .num{padding:0 22px}
}
/* Parcours des pages de soins (ligne verticale) : centré sans ligne */
.tp-steps-grid{display:block!important}
.tp-steps-head{max-width:760px;margin:0 auto 32px}
.tp-steps-line{display:none!important}
.tp-steps-list{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0}
.tp-steps-list li{display:block!important;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.tp-night .tp-steps-list li{background:#ffffff12;border-color:#ffffff22}
@media(max-width:860px){.tp-steps-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tp-steps-list{grid-template-columns:1fr}}
@media(min-width:861px){.hx-proc-step{display:flex;flex-direction:column}.hx-proc-step .hx-proc-inline{order:-1}}