/*
* CSS de la maquette (docs/maquette-v8.html, lignes 38-488), même ordre, chaque
* sélecteur préfixé par .fs (collision avec WooCommerce/Blocksy sur .price,
* .products, .card, .tag, .btn, section, footer...). Les tokens (:root, lignes
* 11-36) viennent de tokens.css, pas d'ici. body et html restent gérés par
* theme.json et base.css, non repris ici.
*
* Écarts avec la maquette :
* - Retrait de .mockbar (78-92, sélecteur de vues de la maquette de démo),
* .view/.view.on (460-462, mécanique d'onglets de la maquette : sur le vrai site
* chaque vue est une URL séparée), .lead/.hero-cta/.hero-note (192-196, section
* "hero" absente de l'arborescence validée), .hero-in/.hero-art (466-467, ne
* servent qu'à .lead).
* - Retrait des classes utilitaires .i-* (background-image:url(img/xxx.webp)) et de
* .ph-img : les fonds de la maquette deviennent un avec un autour de l'image et un autre autour du titre (le bouton
* "Ajout rapide" est un troisième frère dans .shot) : la maquette imbriquait un
* dans le de toute la carte, invalide.
* - Ajout de .fs-newsletter-notice (message "bientôt disponible" après envoi du
* formulaire newsletter, absent de la maquette statique).
*/
.fs *{box-sizing:border-box}
.fs img{max-width:100%;display:block}
.fs a{color:inherit}
.fs button{font:inherit;color:inherit;cursor:pointer}
.fs :focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion: reduce){.fs *{animation:none!important;transition:none!important}}
.fs .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.fs .serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.fs .h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.025em;margin:0}
.fs .h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.02em;margin:0}
.fs .h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.25;margin:0}
.fs .lede{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--ink-soft);max-width:60ch;margin:14px 0 0}
.fs .muted{color:var(--ink-soft)}
.fs .price{font-family:var(--display);font-weight:500;font-variant-numeric:tabular-nums}
/* ---------- petite fleur du logo, utilisée comme marqueur de structure ---------- */
.fs .flower{display:inline-block;width:.62em;height:.62em;vertical-align:.02em;color:var(--rose)}
.fs .flower svg{width:100%;height:100%;display:block}
/* ---------- boutons ---------- */
.fs .btn{
display:inline-flex;align-items:center;gap:.5em;
font-family:var(--display);font-weight:500;font-size:.95rem;
padding:.85em 1.6em;border-radius:999px;border:1px solid transparent;
text-decoration:none;transition:background .18s,color .18s,border-color .18s;
}
.fs .btn-rose{background:var(--rose);color:#fff}
.fs .btn-rose:hover{background:var(--rose-deep)}
.fs .btn-ink{background:var(--ink);color:var(--cream)}
.fs .btn-ink:hover{background:#241a1d}
.fs .btn-ghost{border-color:currentColor;background:transparent}
.fs .btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.fs .btn-cream{background:var(--cream);color:var(--ink)}
.fs .btn-cream:hover{background:#fff}
.fs .btn-sm{padding:.6em 1.1em;font-size:.85rem}
/* ---------- entête site ---------- */
.fs .announce{
background:var(--ink);color:var(--cream);text-align:center;
font-family:var(--display);font-size:.8rem;padding:10px 16px;letter-spacing:.01em;
}
.fs .masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.fs .masthead-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px 0 16px}
.fs .icons{display:flex;gap:18px;align-items:center}
.fs .icons.right{justify-content:flex-end}
.fs .iconbtn{background:none;border:0;padding:4px;color:var(--ink);display:inline-flex;position:relative}
.fs .iconbtn svg{width:20px;height:20px}
.fs .fs-cart-count{
position:absolute;top:-2px;right:-4px;min-width:15px;height:15px;padding:0 3px;
border-radius:999px;background:var(--rose);color:#fff;font-family:var(--display);
font-size:.6rem;line-height:15px;text-align:center;
}
.fs .fs-cart-count[data-count="0"]{display:none}
.fs .logo{text-align:center;text-decoration:none;display:block;line-height:.86}
.fs .logo b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.15rem);color:var(--rose);letter-spacing:-.02em}
.fs .logo i{display:block;font-family:var(--display);font-style:normal;font-size:.56rem;letter-spacing:.42em;color:var(--rose);padding-left:.42em;margin-top:8px}
.fs nav.main{display:flex;justify-content:center;gap:clamp(10px,1.7vw,24px);flex-wrap:nowrap;padding-bottom:14px;overflow-x:auto;scrollbar-width:none}
.fs nav.main::-webkit-scrollbar{display:none}
.fs nav.main a{
font-family:var(--display);font-size:.85rem;text-decoration:none;color:var(--ink);
padding:6px 0;border-bottom:1.5px solid transparent;white-space:nowrap;
}
.fs .burger{display:none;background:none;border:0;padding:4px;color:var(--ink)}
.fs .burger svg{width:22px;height:22px}
.fs nav.main a:hover{border-color:var(--rose)}
.fs nav.main a[aria-current]{border-color:var(--rose)}
/* ---------- recherche en tête ---------- */
.fs .searchbox{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding:7px 2px;max-width:264px;width:100%}
.fs .searchbox svg{width:16px;height:16px;flex:0 0 auto;color:var(--ink-soft)}
.fs .searchbox input{border:0;background:transparent;font-family:var(--sans);font-size:.85rem;width:100%;min-width:0;padding:1px 0;color:var(--ink)}
.fs .searchbox input::placeholder{color:var(--ink-soft)}
.fs .searchbox input:focus{outline:none}
.fs .searchbox:focus-within{border-color:var(--rose)}
/* ---------- bannières d'ouverture (carrousel) ---------- */
.fs .banners{position:relative}
.fs .btrack{
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.fs .btrack::-webkit-scrollbar{display:none}
.fs .bpanel{
position:relative;flex:0 0 50%;scroll-snap-align:start;
min-height:clamp(340px,42vw,560px);
display:flex;flex-direction:column;justify-content:flex-end;
padding:clamp(22px,3vw,48px);overflow:hidden;
background-size:cover;background-position:center;
}
.fs .bpanel>*{position:relative;z-index:1}
.fs .bpanel .eyebrow{font-family:var(--display);font-size:.7rem;letter-spacing:.22em;margin:0 0 10px;color:var(--rose-deep)}
.fs .bpanel h2{
font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.2vw,2.7rem);
line-height:1;letter-spacing:.01em;margin:0 0 10px;
}
.fs .bpanel p{margin:0 0 22px;font-size:.94rem;max-width:34ch;color:var(--ink-soft)}
.fs .bpanel .btn{align-self:flex-start}
.fs .bdots{
position:absolute;left:0;right:0;bottom:clamp(12px,1.8vw,22px);
display:flex;gap:9px;justify-content:center;z-index:3;
}
.fs .bdots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);background:transparent;padding:0}
.fs .bdots button[aria-current="true"]{background:var(--ink)}
@media (max-width:760px){
.fs .bpanel{flex:0 0 100%;min-height:clamp(300px,74vw,420px)}
.fs .searchbox{max-width:132px}
.fs .burger{display:inline-flex}
.fs nav.main{display:none;flex-direction:column;align-items:flex-start;gap:0;padding:4px 0 12px;overflow:visible}
.fs nav.main.open{display:flex}
}
/* ---------- section nouveautés ---------- */
.fs .newsec{padding:clamp(40px,5.5vw,72px) 0 clamp(34px,4.5vw,58px);background:var(--paper)}
.fs .nstitle{text-align:center;margin:0 0 6px}
.fs .nssub{text-align:center;color:var(--ink-soft);font-size:.95rem;margin:0 0 30px}
.fs .striprail{position:relative}
.fs .strip{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 var(--gut)}
.fs .strip::-webkit-scrollbar{display:none}
.fs .track{display:flex;gap:clamp(10px,1.6vw,20px);width:max-content}
.fs .tile{width:clamp(166px,20vw,264px);flex:0 0 auto;text-decoration:none;scroll-snap-align:start;text-align:center}
.fs .tile .ph{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background-size:cover;background-position:center}
.fs .tile .ph span{font-family:var(--display);font-size:.66rem;letter-spacing:.16em;color:var(--ink-soft);opacity:.42}
.fs .tile .ph img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fs .tile b{display:block;font-family:var(--display);font-weight:400;font-size:.72rem;letter-spacing:.14em;color:var(--rose-deep);margin:14px 0 6px}
.fs .tile u{display:block;text-decoration:none;font-family:var(--serif);font-size:.98rem;line-height:1.25;min-height:2.4em}
.fs .tile em{font-style:normal;font-family:var(--display);font-size:.88rem;display:block;margin-top:6px}
.fs .tile .flag{
display:inline-block;font-family:var(--display);font-size:.64rem;letter-spacing:.12em;
background:var(--rose-wash);color:var(--rose-deep);padding:.3em .7em;border-radius:4px;margin-bottom:10px;
}
.fs .tile .flag.out{background:var(--cream);color:var(--ink-soft)}
.fs .sarrow{
position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:4;
width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
display:grid;place-items:center;font-size:1.1rem;line-height:1;color:var(--ink);
}
.fs .sarrow:hover{border-color:var(--rose);color:var(--rose-deep)}
.fs .sarrow.prev{left:8px}.fs .sarrow.next{right:8px}
.fs .nsfoot{text-align:center;margin-top:clamp(26px,3.4vw,40px)}
@media (max-width:620px){.fs .sarrow{display:none}}
/* ---------- réservation de l'analyse ---------- */
.fs .bookband{position:relative;padding:0;background-size:cover;background-position:center}
.fs .bookband::before{content:"";position:absolute;inset:0;background:rgba(58,42,46,.58);z-index:1}
.fs .bookin{position:relative;z-index:2;text-align:center;padding:clamp(52px,7vw,96px) var(--gut);color:#fff;max-width:760px}
.fs .bookin .eyebrow{font-family:var(--display);font-size:.72rem;letter-spacing:.3em;margin:0 0 18px;color:rgba(255,255,255,.82)}
.fs .bookti{
font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,3.1vw,2.2rem);
letter-spacing:.06em;line-height:1.25;margin:0 0 20px;color:#fff;
}
.fs .bookin p{color:rgba(255,255,255,.9);font-size:clamp(.95rem,1.4vw,1.05rem);margin:0 auto 22px;max-width:52ch}
.fs .bookprice{font-family:var(--display);letter-spacing:.06em;margin-bottom:28px!important}
.fs .booknote{font-size:.83rem!important;color:rgba(255,255,255,.72)!important;margin:20px auto 0!important}
/* ---------- visuels des routines ---------- */
.fs .routine .rimg{aspect-ratio:16/10;border-radius:14px;margin:-4px 0 16px;background-size:cover;background-position:center;display:grid;place-items:center}
.fs .routine .rimg img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fs .rimg.ph-flat span{font-family:var(--display);font-size:.66rem;letter-spacing:.16em;color:var(--ink-soft);opacity:.5}
.fs .rimg.s2{background:var(--blush)}.fs .rimg.s3{background:var(--sage)}.fs .rimg.s4{background:var(--rose-wash)}
.fs .gal-thumbs div{cursor:pointer;border:1px solid transparent}
.fs .gal-thumbs div:hover{border-color:var(--rose)}
/* ---------- sections ---------- */
.fs section{padding:clamp(52px,7vw,92px) 0}
.fs .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.fs .sec-head a{font-family:var(--display);font-size:.88rem;color:var(--rose-deep);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
/* préoccupations */
.fs .concerns{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.fs .concern{
border:1px solid var(--line);background:var(--paper);
text-align:left;padding:16px 15px 14px;border-radius:13px;text-decoration:none;
display:flex;flex-direction:column;justify-content:space-between;min-height:0;
transition:border-color .2s,background .2s;
}
.fs .concern:hover{border-color:var(--rose);background:var(--cream)}
.fs .concern b{font-family:var(--serif);font-weight:400;font-size:.99rem;line-height:1.18}
.fs .concern small{font-family:var(--display);font-size:.71rem;color:var(--ink-soft);margin-top:7px;display:block}
.fs .concern.c1{background:var(--rose-wash);border-color:transparent}
.fs .concern.c2{background:var(--sage);border-color:transparent}
.fs .concern.c3{background:var(--blush);border-color:transparent}
.fs .concern.c4{background:var(--cream);border-color:transparent}
.fs .concern.c5{background:var(--rose);border-color:transparent;color:#fff}
.fs .concern.c5 small{color:rgba(255,255,255,.8)}
.fs .concern.c6{background:var(--rose-wash);border-color:transparent}
.fs .concern:hover{filter:brightness(.97);border-color:transparent}
/* valeurs, dans Notre histoire */
.fs .valeurs{margin-top:28px;display:flex;flex-direction:column;gap:20px}
.fs .valeurs h4{font-family:var(--serif);font-weight:400;font-size:1.12rem;margin:0 0 5px;display:flex;align-items:baseline;gap:.5em}
.fs .valeurs p{margin:0;color:var(--ink-soft);font-size:.93rem;max-width:62ch}
/* produits */
.fs .products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px)}
.fs .card{text-decoration:none;display:flex;flex-direction:column}
.fs .card>a{color:inherit;text-decoration:none;display:block}
.fs .shot{
position:relative;aspect-ratio:1;border-radius:16px;display:grid;place-items:center;
padding:22px;text-align:center;overflow:hidden;
}
.fs .shot span{font-family:var(--display);font-size:.72rem;letter-spacing:.14em;color:var(--ink-soft);opacity:.55}
/* Le lien de la photo remplit la vignette ; « Ajout rapide » est aussi un lien enfant de .shot : exclu (sinon il prenait
toute la hauteur, un grand cercle sur mobile où il est toujours visible, corrigé au lot 9B). */
.fs .shot>a:not(.quick){display:grid;place-items:center;width:100%;height:100%}
.fs .shot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Fond unique des vignettes (décision du 28/09/2026) : le blanc des packshots prend la couleur de la carte. */
.fs .shot img,.fs .gal-main img,.fs .gal-thumbs .fadel-gal-thumb img{mix-blend-mode:multiply}
.fs .s1{background:var(--cream)}.fs .s2{background:var(--blush)}.fs .s3{background:var(--sage)}.fs .s4{background:var(--rose-wash)}
.fs .tag{
position:absolute;top:12px;left:12px;background:var(--ink);color:var(--cream);
font-family:var(--display);font-size:.68rem;padding:.35em .8em;border-radius:999px;letter-spacing:.02em;
}
.fs .tag.out{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line)}
.fs .quick{
position:absolute;left:12px;right:12px;bottom:12px;background:rgba(251,250,246,.95);
border:0;border-radius:999px;padding:.7em;font-family:var(--display);font-size:.82rem;
color:var(--ink);text-decoration:none;text-align:center;
opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;
}
.fs .card:hover .quick,.fs .card:focus-within .quick{opacity:1;transform:none}
.fs .brandline{font-family:var(--display);font-size:.72rem;letter-spacing:.14em;color:var(--rose-deep);margin:14px 0 5px}
.fs .card h3{font-family:var(--serif);font-weight:400;font-size:1.02rem;line-height:1.25;margin:0 0 6px;min-height:2.5em}
.fs .card .price{font-size:.95rem}
/* bandeau diagnostic */
.fs .diagband{background:var(--blush)}
.fs .diagband .in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.fs .diagband p{color:var(--ink-soft);max-width:48ch}
.fs .qpreview{display:flex;flex-direction:column;gap:10px}
.fs .qpreview div{
border:1px solid rgba(58,42,46,.16);border-radius:14px;padding:14px 18px;
font-family:var(--display);font-size:.9rem;display:flex;gap:14px;align-items:center;
}
.fs .qpreview div b{color:var(--rose-deep);font-weight:500;font-variant-numeric:tabular-nums}
/* routines */
.fs .routines,.fs .posts{
display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:2px var(--gut) 6px;
}
.fs .routines::-webkit-scrollbar,.fs .posts::-webkit-scrollbar{display:none}
.fs .routine{
flex:0 0 clamp(266px,29vw,346px);scroll-snap-align:start;
border:1px solid var(--line);border-radius:22px;padding:22px 22px 24px;background:var(--paper);display:flex;flex-direction:column;
}
.fs .routine .h3{margin-bottom:6px}
.fs .routine ol{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:9px}
.fs .routine li{display:flex;gap:12px;font-size:.92rem;align-items:baseline}
.fs .routine li i{font-style:normal;font-family:var(--display);font-size:.7rem;letter-spacing:.1em;color:var(--rose-deep);min-width:74px}
.fs .routine .foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.fs .strike{color:var(--ink-soft);text-decoration:line-through;font-size:.85rem;margin-right:.5em}
/* marques */
.fs .brands{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fs .brandrow{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,54px);justify-content:center;align-items:center}
.fs .brandrow a{font-family:var(--serif);font-size:clamp(1.05rem,2.2vw,1.6rem);color:var(--ink);text-decoration:none;opacity:.72}
.fs .brandrow a:hover{opacity:1;color:var(--rose-deep)}
/* Logo texte en masque : peint dans l'encre du site, rose au survol ; hauteur commune, largeur plafonnée (logos très longs). */
.fs .brandrow a.brandlogo{display:inline-flex;align-items:center}
.fs .brandrow a.brandlogo span{display:block;height:min(var(--h),7vw);aspect-ratio:var(--ratio);max-width:clamp(96px,18vw,180px);background-color:var(--ink);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.fs .brandrow a.brandlogo:hover span,.fs .brandrow a.brandlogo:focus-visible span{background-color:var(--rose-deep)}
/* histoire */
.fs .story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,68px);align-items:center}
.fs .portrait{aspect-ratio:3/4;background:linear-gradient(200deg,var(--blush),var(--rose-wash));border-radius:var(--blob);display:grid;place-items:center}
.fs .portrait span{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;color:var(--rose-deep)}
.fs .portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fs .story blockquote{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.32;margin:0 0 22px;letter-spacing:-.015em}
.fs .sign{font-family:var(--display);font-size:.82rem;letter-spacing:.14em;color:var(--rose-deep)}
/* boutique */
.fs .shopblock{background:var(--cream)}
.fs .shopblock .in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.fs .hours{display:flex;gap:36px;flex-wrap:wrap;margin:24px 0 28px;font-size:.95rem}
.fs .hours b{display:block;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;color:var(--rose-deep);margin-bottom:4px;font-weight:500}
.fs .mapbox{aspect-ratio:16/11;background:var(--cream);border-radius:20px;display:grid;place-items:center;font-family:var(--display);font-size:.78rem;letter-spacing:.16em;color:var(--ink-soft)}
.fs .mapbox img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* conseils skincare */
.fs .post{flex:0 0 clamp(266px,31vw,378px);scroll-snap-align:start;text-decoration:none}
.fs .post .thumb{aspect-ratio:16/10;border-radius:16px;margin-bottom:16px;background:var(--cream)}
.fs .post .thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fs .post h3,.fs .post h2{font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.28;margin:0 0 8px}
.fs .post small{font-family:var(--display);font-size:.72rem;letter-spacing:.12em;color:var(--rose-deep)}
/* newsletter + footer */
.fs .news{background:var(--rose);color:#fff;text-align:center}
.fs-newsletter-notice{background:rgba(255,255,255,.16);border-radius:999px;padding:.6em 1.2em;margin:0 auto 20px;max-width:460px;font-size:.9rem}
.fs .news .h2{color:var(--cream)}
.fs .news p{color:rgba(255,255,255,.85);margin:12px auto 26px;max-width:46ch}
.fs .newsform{display:flex;gap:10px;max-width:460px;margin-inline:auto;flex-wrap:wrap;justify-content:center}
.fs .newsform input{
flex:1 1 240px;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;
padding:.85em 1.2em;border-radius:999px;font-family:var(--sans);font-size:.95rem;
}
.fs .newsform input::placeholder{color:rgba(255,255,255,.7)}
.fs footer{background:var(--ink);color:rgba(243,241,233,.8);padding:clamp(44px,6vw,72px) 0 28px}
.fs .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(22px,4vw,48px)}
.fs footer h5{font-family:var(--display);font-size:.74rem;letter-spacing:.16em;color:var(--cream);margin:0 0 14px;font-weight:500}
.fs footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:.92rem}
.fs footer a{text-decoration:none}
.fs footer a:hover{color:var(--rose)}
.fs .fbottom{margin-top:44px;padding-top:20px;border-top:1px solid rgba(243,241,233,.15);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;font-family:var(--display)}
.fs .fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Logos de paiement sur une pastille blanche : lisibles sur le pied sombre comme au tunnel de commande clair. */
.fs .fs-pay-logo{height:20px;width:auto;box-sizing:content-box;padding:6px 10px;background:#fff;border-radius:7px;box-shadow:0 0 0 1px var(--line)}
.fs .fs-pay-logo--airtel-money,.fs .fs-pay-logo--moov-money{height:28px;padding:2px 8px}
.fs .fs-pay-label{opacity:.85}
/* ---------- fiche produit ---------- */
.fs .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,66px);padding-top:38px}
.fs .gallery{display:flex;flex-direction:column;gap:12px}
.fs .gal-main{aspect-ratio:1;background:var(--cream);border-radius:20px;display:grid;place-items:center}
.fs .gal-main span{font-family:var(--display);font-size:.74rem;letter-spacing:.16em;color:var(--ink-soft);opacity:.6}
.fs .gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fs .gal-thumbs .fadel-gal-thumb{
aspect-ratio:1;border-radius:12px;border:1px solid transparent;padding:0;overflow:hidden;
cursor:pointer;background:var(--cream);
}
.fs .gal-thumbs .fadel-gal-thumb:hover,.fs .gal-thumbs .fadel-gal-thumb:focus-visible{border-color:var(--rose)}
.fs .gal-thumbs .fadel-gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fs .gal-main img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fs .crumbs{font-family:var(--display);font-size:.76rem;color:var(--ink-soft);margin-bottom:18px}
.fs .crumbs a{text-decoration:none}
.fs .pdp .brandline{margin-top:0}
.fs .pdp h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.2vw,2.45rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
.fs .pdp .price-lg{font-family:var(--display);font-size:1.5rem;font-weight:500}
.fs .chips{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.fs .chip{font-family:var(--display);font-size:.76rem;padding:.45em 1em;border-radius:999px;background:var(--cream);color:var(--ink)}
.fs .chip.active{background:var(--rose-wash);color:var(--rose-deep)}
.fs .buyrow{display:flex;gap:12px;align-items:center;margin:26px 0 8px;flex-wrap:wrap}
.fs .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.fs .qty button{background:none;border:0;padding:.7em 1em;font-size:1rem}
.fs .qty span{min-width:2ch;text-align:center;font-family:var(--display)}
.fs .stock{font-family:var(--display);font-size:.8rem;color:var(--rose-deep);display:flex;align-items:center;gap:.5em}
.fs .stock.out{color:var(--ink-soft);font-size:.82rem;letter-spacing:.02em;margin:26px 0 10px}
.fs .stockalert{margin:26px 0 8px}
.fs .stockalert-form{display:flex;gap:10px;flex-wrap:wrap;max-width:420px}
.fs .stockalert-form input{
flex:1 1 220px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
padding:.7em 1.1em;border-radius:999px;font-family:var(--sans);font-size:.92rem;
}
.fs .stockalert-notice{font-size:.9rem;color:var(--rose-deep)}
.fs .stockalert-note{font-size:.8rem;color:var(--ink-soft);margin:8px 0 0}
.fs .acc{border-top:1px solid var(--line);margin-top:30px}
.fs .acc details{border-bottom:1px solid var(--line)}
.fs .acc summary{padding:18px 0;font-family:var(--serif);font-size:1.08rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.fs .acc summary::-webkit-details-marker{display:none}
.fs .acc summary::after{content:"+";font-family:var(--display);color:var(--rose-deep);font-size:1.2rem}
.fs .acc details[open] summary::after{content:"–"}
.fs .acc .body{padding:0 0 20px;color:var(--ink-soft);font-size:.96rem;max-width:62ch}
.fs .acc .body ul{padding-left:1.1em;margin:.6em 0}
.fs .withit{background:var(--cream)}
.fs .stickybuy{display:none}
/* Blocksy ajoute un bandeau titre + fil d'ariane (.hero-section) au-dessus du
contenu sur ses propres gabarits WooCommerce. Sur la fiche produit, .pdp a déjà
son propre et son propre .crumbs (woocommerce/content-single-product.php) :
sans ce masquage, la page aurait deux h1. Laissé tel quel sur les archives
(boutique, catégorie, univers) : pas de titre ni de fil d'ariane maison là,
supprimer le bandeau de Blocksy y retirerait le seul h1 de la page. */
body.single-product .hero-section{display:none}
/* formulaires natifs WooCommerce (pas de template surchargé) : le stepper −/+
(inc/woocommerce.php) apparaît partout où WooCommerce affiche une quantité
(fiche produit, panier), donc ce style n'est pas limité à .pdp. */
.fs .pdp form.cart{display:flex;gap:12px;align-items:center;margin:26px 0 8px;flex-wrap:wrap}
.fs .pdp form.cart .single_add_to_cart_button{flex:1;justify-content:center;text-align:center}
.fs .quantity{
display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;
overflow:hidden;width:auto!important;max-width:none!important;
}
.fs .quantity .qty-btn{background:none;border:0;padding:.7em 1em;font-size:1rem;cursor:pointer;color:var(--ink);flex:0 0 auto}
.fs .quantity input.qty{
width:2.4em!important;flex:0 0 auto;text-align:center;border:0;background:none;font-family:var(--display);
padding:0;-moz-appearance:textfield;
}
.fs .quantity input.qty::-webkit-inner-spin-button,.fs .quantity input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* tunnel de commande */
.fs .checkout-help{margin-bottom:18px;display:flex;flex-direction:column;gap:12px}
/* ---------- diagnostic ---------- */
.fs .diag{min-height:72vh;display:grid;place-items:center;padding:clamp(34px,6vw,70px) 0;background:var(--cream)}
.fs .diagcard{width:min(760px,100%);background:var(--paper);border-radius:26px;padding:clamp(26px,4.4vw,54px);border:1px solid var(--line)}
.fs .progress{height:3px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:30px}
.fs .progress i{display:block;height:100%;background:var(--rose);transition:width .3s}
.fs .step{font-family:var(--display);font-size:.76rem;letter-spacing:.16em;color:var(--rose-deep);margin-bottom:12px}
.fs .qtext{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.18;letter-spacing:-.02em;margin:0 0 28px}
.fs .options{display:grid;gap:10px}
.fs .opt{
text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:16px;
padding:16px 20px;font-size:1rem;transition:border-color .16s,background .16s;
}
.fs .opt:hover{border-color:var(--rose);background:var(--rose-wash)}
.fs .opt b{display:block;font-family:var(--display);font-weight:500;font-size:.98rem}
.fs .opt small{color:var(--ink-soft);font-size:.86rem}
.fs .diagfoot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;font-family:var(--display);font-size:.84rem}
.fs .linkback{background:none;border:0;color:var(--ink-soft);text-decoration:underline;padding:0}
.fs .profile{background:var(--rose);color:#fff;border-radius:20px;padding:26px 28px;margin-bottom:28px}
.fs .profile .h3{color:var(--cream);font-size:1.5rem}
.fs .profile p{color:rgba(255,255,255,.85);margin:8px 0 0;font-size:.95rem}
.fs .routinegrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:26px}
.fs .rcol h4{font-family:var(--display);font-size:.76rem;letter-spacing:.16em;color:var(--rose-deep);margin:0 0 14px;font-weight:500}
.fs .rstep{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line);align-items:flex-start}
.fs .rstep .mini{width:48px;height:48px;border-radius:10px;background:var(--cream);flex:0 0 auto}
.fs .rstep b{display:block;font-size:.92rem;font-weight:500;font-family:var(--sans)}
.fs .rstep small{color:var(--ink-soft);font-size:.82rem;display:block;margin-top:2px}
.fs .totalbar{background:var(--cream);border-radius:18px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fs .safety{margin-top:24px;font-size:.88rem;color:var(--ink-soft);border-left:2px solid var(--rose);padding-left:16px}
/* ---------- logo image ---------- */
.fs .logo img{height:clamp(66px,8.4vw,104px);width:auto;margin-inline:auto}
@media (max-width:620px){.fs .logo img{height:56px}}
.fs footer .logo img{margin-inline:0}
/* ---------- WhatsApp ---------- */
.fs .btn-wa{background:#25D366;color:#fff}
.fs .btn-wa:hover{background:#1DA851;color:#fff}
.fs .btn-wa svg{width:17px;height:17px;fill:currentColor}
.fs .wafloat{
position:fixed;right:18px;bottom:18px;z-index:70;width:54px;height:54px;border-radius:50%;
background:#25D366;color:#fff;display:grid;place-items:center;text-decoration:none;
box-shadow:0 6px 20px rgba(37,211,102,.34);
}
.fs .wafloat svg{width:27px;height:27px;fill:currentColor}
/* ---------- réassurance ---------- */
.fs .reassure{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.fs .reassure div{font-size:.83rem;line-height:1.35;color:var(--ink-soft);display:flex;gap:.55em;align-items:flex-start}
.fs .reassure b{display:block;color:var(--ink);font-family:var(--display);font-weight:500;font-size:.85rem;margin-bottom:2px}
.fs .reassure .flower{flex:0 0 auto;margin-top:.25em}
/* ---------- tarifs de livraison ---------- */
.fs .zones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,26px);margin-top:8px}
.fs .zone{border:1px solid var(--line);border-radius:18px;padding:22px 22px 8px;background:var(--paper)}
.fs .zone h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:0 0 4px}
.fs .zone .cty{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;color:var(--rose-deep);margin:0 0 14px}
.fs .zone ul{list-style:none;padding:0;margin:0}
.fs .zone li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:.92rem}
.fs .zone li span:last-child{font-family:var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.fs .zone li.hi{background:var(--rose-wash);margin-inline:-22px;padding-inline:22px;border-radius:10px;border-top-color:transparent}
.fs .delivnote{background:var(--cream);border-radius:18px;padding:22px 24px;margin-top:26px;font-size:.93rem;color:var(--ink-soft)}
.fs .delivnote b{color:var(--ink)}
@media (max-width:900px){.fs .zones{grid-template-columns:1fr}.fs .reassure{grid-template-columns:1fr 1fr}}
/* ---------- fonds réels (remplacent les background-image de la maquette) ---------- */
.fs .fs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* ---------- responsive ---------- */
@media (max-width:1000px){
.fs .diagband .in,.fs .story,.fs .shopblock .in,.fs .pdp{grid-template-columns:1fr}
.fs .portrait{aspect-ratio:16/11}
.fs .products{grid-template-columns:repeat(2,1fr)}
.fs .concerns{grid-template-columns:repeat(3,1fr)}
.fs .fgrid{grid-template-columns:1fr 1fr}
.fs .routinegrid{grid-template-columns:1fr}
}
@media (max-width:620px){
.fs .masthead-top{grid-template-columns:auto 1fr auto;padding:14px 0 10px}
.fs nav.main a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);font-size:.95rem}
.fs .concerns{grid-template-columns:1fr 1fr;gap:10px}
.fs .concern{min-height:118px;padding:18px 16px}
.fs .fgrid{grid-template-columns:1fr}
.fs .quick{opacity:1;transform:none}
.fs .stickybuy{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:12px;align-items:center;
background:var(--paper);border-top:1px solid var(--line);padding:12px 16px;
}
.fs .stickybuy .btn{flex:1;justify-content:center}
}
/* ---------------------------------------------------------------------------------------------
Lot 8B — livraison par quartier (tunnel de commande, panier)
--------------------------------------------------------------------------------------------- */
.fs .ship-delay{display:block;margin-top:2px;font-size:.8rem;font-weight:400;color:var(--ink-soft);line-height:1.4}
.fs .fs-ship-hint th,.fs .fs-ship-hint td{color:var(--ink-soft);font-size:.9rem;font-weight:400}
/* Un seul pays vendu (le Gabon) : WooCommerce affiche « Gabon » en clair, inutile ici. */
.fs #billing_country_field{display:none!important}
/* ---------------------------------------------------------------------------------------------
Lot 9A — pages de texte (page-templates/fadel-texte.php), articles (single-post.php), page des
articles (home.php). Tokens du CLAUDE.md §3 uniquement.
--------------------------------------------------------------------------------------------- */
/* Extrait de la carte d'article : était un style="" en ligne dans home/conseils.php. */
.fs .post p{font-size:.92rem;margin:0}
/* Colonne de lecture (environ 68 caractères par ligne) et composants du texte courant. */
.fs .fs-col{max-width:34rem;margin-inline:auto}
.fs .fs-prose{font-size:1.0625rem;line-height:1.75;margin-top:clamp(26px,4vw,40px)}
.fs .fs-prose > :first-child{margin-top:0}
.fs .fs-prose p{margin:0 0 1.15em}
.fs .fs-prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.25;letter-spacing:-.01em;margin:2.3em 0 .65em}
.fs .fs-prose h3{font-family:var(--serif);font-weight:400;font-size:1.18rem;line-height:1.3;margin:1.9em 0 .5em}
.fs .fs-prose strong{font-weight:600}
.fs .fs-prose a{color:var(--rose-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.fs .fs-prose a:hover{color:var(--ink)}
.fs .fs-prose ul{list-style:none;margin:0 0 1.3em;padding:0}
.fs .fs-prose li{position:relative;padding-left:1.55em;margin:.5em 0}
/* Puce : la petite fleur du logo (contour du symbole #fl, centre évidé), teintée par --rose. */
.fs .fs-prose li::before{
content:"";position:absolute;left:0;top:.53em;width:.7em;height:.7em;background:var(--rose);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.6c1.6 0 2.9 1 3.3 2.4 1.4-.5 3 0 3.8 1.3.8 1.4.5 3-.5 4 1.1 1 1.5 2.6.8 4-.7 1.4-2.2 2.1-3.7 1.8-.2 1.5-1.4 2.7-2.9 2.9-1.6.2-3-.7-3.6-2.1-1.4.6-3 .2-4-1-.9-1.2-.9-2.9 0-4.1C4.1 9.6 3.9 8 4.7 6.8c.8-1.3 2.4-1.8 3.8-1.3C8.9 4 10.4 2.9 12 1.6zM15.1 11a3.1 3.1 0 1 0-6.2 0 3.1 3.1 0 1 0 6.2 0z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.6c1.6 0 2.9 1 3.3 2.4 1.4-.5 3 0 3.8 1.3.8 1.4.5 3-.5 4 1.1 1 1.5 2.6.8 4-.7 1.4-2.2 2.1-3.7 1.8-.2 1.5-1.4 2.7-2.9 2.9-1.6.2-3-.7-3.6-2.1-1.4.6-3 .2-4-1-.9-1.2-.9-2.9 0-4.1C4.1 9.6 3.9 8 4.7 6.8c.8-1.3 2.4-1.8 3.8-1.3C8.9 4 10.4 2.9 12 1.6zM15.1 11a3.1 3.1 0 1 0-6.2 0 3.1 3.1 0 1 0 6.2 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Titres de page : mêmes valeurs que le h1 de la fiche produit (.pdp h1). */
.fs .fs-text h1,.fs .fs-article h1,.fs .fs-blog h1{font-size:clamp(1.8rem,3.2vw,2.45rem);line-height:1.12;letter-spacing:-.02em}
/* Page de texte */
/* Article */
.fs .fs-article{padding-bottom:clamp(36px,5vw,60px)}
.fs .fs-kicker{font-family:var(--display);font-size:.72rem;letter-spacing:.12em;color:var(--rose-deep);margin:0 0 12px}
.fs .fs-date{font-family:var(--display);font-size:.82rem;color:var(--ink-soft);margin:14px 0 0}
.fs .fs-article-img{max-width:42rem;margin:clamp(24px,4vw,36px) auto 0;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--cream)}
.fs .fs-article-img img{width:100%;height:100%;object-fit:cover}
.fs .fs-article-cta{margin:2.6rem 0 0;padding-top:1.8rem;border-top:1px solid var(--line)}
.fs .fs-more{border-top:1px solid var(--line)}
/* Page des articles : les cartes de l'accueil en grille */
.fs .posts-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,44px) clamp(18px,2.4vw,32px);
overflow:visible;scroll-snap-type:none;margin:clamp(26px,4vw,40px) 0 0;padding:0;
}
.fs .posts-grid .post{flex:initial}
.fs .pagination{margin-top:clamp(34px,5vw,54px)}
.fs .pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-family:var(--display);font-size:.9rem}
.fs .pagination a,.fs .pagination span.current{padding:.55em 1em;border:1px solid var(--line);border-radius:999px;text-decoration:none}
.fs .pagination a:hover{border-color:var(--rose)}
.fs .pagination span.current{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media (max-width:1000px){.fs .posts-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.fs .posts-grid{grid-template-columns:1fr}}
/* ---------------------------------------------------------------------------------------------
Lot 3A — contenance à côté du prix sur la fiche produit (maquette : « 16 500 FCFA · 30 ml »).
--------------------------------------------------------------------------------------------- */
.fs .pdp .price-lg .size{font-family:var(--sans);font-size:.86rem;font-weight:400}
/* Barre d'achat collante (mobile) : un titre long ne doit pas écraser le bouton en cercle, défaut révélé
par les vrais titres du catalogue. Le titre passe sur une ligne coupée par « … », le bouton garde sa taille. */
@media (max-width:620px){
.fs .stickybuy > div{flex:1 1 auto;min-width:0}
.fs .stickybuy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs .stickybuy .btn{flex:0 0 auto;white-space:nowrap}
}
/* ---------------------------------------------------------------------------------------------
Lot 6 — diagnostic de peau (plugin fadel-diagnostic) et section « Trouvez les bons produits » de l'accueil.
Le HTML et le CSS de la vue #v-diagnostic de la maquette (lignes 412-440 ci-dessus) partent tels quels.
Écarts, tous ajoutés ici : les styles en ligne de la maquette deviennent des classes (.diag-actions,
.diag-buy, .diag-mention) ; l'état « réponse choisie » (.opt.on, au retour sur une question) ; le prix de
chaque produit sous son « pourquoi » (.rprice) et le nom du produit en lien (.rlink) ; le message d'une
étape sans produit (.rmanque) ; une gouttière latérale sur .diag (la carte touchait les bords en mobile) ; le formulaire e-mail (.diag-email...) ; l'attribut hidden respecté
(.result n'a plus de classe .on) ; .fs-sr, texte réservé aux lecteurs d'écran. « environ 3 mois
d'utilisation » (totalbar) est supprimé : aucune donnée ne permet de le dire.
Section de l'accueil : la question 1 remplace les 4 lignes .qpreview (règles conservées plus haut).
--------------------------------------------------------------------------------------------- */
.fs .fs-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fs [hidden]{display:none!important}
/* Questions. La carte touchait les bords de l'écran en mobile (pas de gouttière dans la maquette). */
.fs .diag{padding-inline:var(--gut)}
.fs a.opt{display:block;color:inherit;text-decoration:none}
.fs .opt.on{border-color:var(--rose);background:var(--rose-wash)}
.fs .diag-boot .btn{margin-top:6px}
.fs .diag-small{font-size:.88rem}
/* Résultat */
.fs .rstep .mini{overflow:hidden}
.fs .rstep .mini img{width:100%;height:100%;object-fit:cover}
.fs .rstep .rprice{font-family:var(--display);color:var(--ink);margin-top:4px}
.fs .rlink{text-decoration:none}
.fs .rlink:hover{text-decoration:underline}
.fs .rmanque{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-soft)}
.fs .rmanque .rlink{color:var(--rose-deep);text-decoration:underline}
.fs .diag-buy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fs .diag-total{font-size:1.2rem}
.fs .diag-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.fs .diag-mention{margin-top:24px}
.fs .diag-unavailable .qtext{margin-bottom:16px}
.fs .diag-msg{margin:14px 0 0;padding:.7em 1em;border-radius:12px;background:var(--cream);font-size:.92rem}
.fs .diag-msg.is-error{background:#f7e3e6;color:#7a2438}
/* E-mail : après la prudence, jamais avant le résultat. */
.fs .diag-email{margin-top:30px;padding:clamp(18px,3vw,26px);border:1px solid var(--line);border-radius:18px}
.fs .diag-email .h3{margin-bottom:8px}
.fs .diag-email .muted{margin:0;font-size:.9rem}
.fs .diag-field{display:grid;gap:6px;margin-top:16px}
.fs .diag-field label{font-family:var(--display);font-size:.84rem;color:var(--ink-soft)}
.fs .diag-field input{
border:1px solid var(--line);background:var(--paper);color:var(--ink);
padding:.7em 1.1em;border-radius:999px;font-family:var(--sans);font-size:1rem;width:100%;
}
.fs .diag-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.9rem}
.fs .diag-check input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--rose-deep)}
.fs .diag-email .btn{margin-top:18px}
.fs .fs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Accueil : la question 1, dans l'esprit des lignes .qpreview de la maquette. */
.fs .diagband .in--solo{grid-template-columns:1fr}
.fs .qhome{display:flex;flex-direction:column;gap:10px}
.fs .diagband .qhome .step{margin:0 0 2px;color:var(--rose-deep)}
.fs .diagband .qhome-q{margin:0 0 6px;max-width:none;font-family:var(--serif);font-size:1.3rem;line-height:1.25;color:var(--ink)}
.fs .qhome .opt{background:transparent;border-color:rgba(58,42,46,.16)}
.fs .qhome .opt:hover,.fs .qhome .opt:focus-visible{background:var(--paper);border-color:var(--rose)}
/* ---------------------------------------------------------------------------------------------
Lot 9B — landings des préoccupations (page-templates/fadel-preoccupation.php) et page
Préoccupations (fadel-preoccupations.php) : composants existants (colonne de lecture du lot 9A,
grille .products des archives, tuiles et bande diagnostic de l'accueil). Seuls les espacements
entre sections sont resserrés : l'introduction, les produits et la suite du texte se lisent d'un
trait, sans le grand blanc de deux sections qui se suivent.
--------------------------------------------------------------------------------------------- */
.fs .fs-landing{padding-bottom:clamp(18px,3vw,30px)}
.fs .fs-landing + section{padding-top:clamp(18px,3vw,30px)}
.fs .fs-landing-products + .fs-landing-more{padding-top:0}
/* ---------------------------------------------------------------------------------------------
Retours de Fadel du 28/09/2026 (WhatsApp).
--------------------------------------------------------------------------------------------- */
/* Titres de section un cran plus petits (Best-sellers, routines, newsletter, « Ensemble avec ce produit »). */
.fs .h2.h2-sm{font-size:clamp(1.55rem,2.8vw,2.15rem)}
/* « Les nouveautés » en majuscules, à l'essai : même taille réduite, lettres un peu espacées. */
.fs .nstitle{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.45rem,2.6vw,2rem)}
/* Défilement horizontal continu : deux copies du contenu côte à côte, on glisse d'une copie. */
@keyframes fs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Entête mobile : logo recadré (logo-header.webp), bien plus grand et centré sur la page ; recherche resserrée. */
.fs .logo img{height:clamp(40px,4.4vw,60px)}
@media (max-width:760px){
/* Menu burger en majuscules. */
.fs nav.main a{text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}
}
@media (max-width:620px){
.fs .masthead-top{grid-template-columns:1fr auto 1fr;gap:8px}
.fs .logo img{height:50px}
.fs .burger{padding:0}
.fs .icons{gap:8px;min-width:0}
.fs .icons.right{gap:4px}
.fs .searchbox{flex:1 1 auto;min-width:0;max-width:120px;gap:5px}
.fs .searchbox svg{width:14px;height:14px}
.fs .searchbox input{font-size:.76rem}
}
/* « Trouvez les bons produits » : de l'air entre le titre et le texte. */
.fs .diagband .h2 + p{margin:18px 0 0}
/* Marques : bandeau défilant sur une ligne au lieu de la grille complète. Pause au survol et au focus. */
.fs section.brands{padding:clamp(34px,4.6vw,60px) 0}
.fs .brandmarquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.fs .brands .brandrow{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;animation:fs-marquee 90s linear infinite}
.fs .brandmarquee:hover .brandrow,.fs .brandmarquee:focus-within .brandrow{animation-play-state:paused}
.fs .brandset{display:flex;align-items:center;flex:0 0 auto;gap:clamp(34px,4.4vw,64px);padding-right:clamp(34px,4.4vw,64px)}
.fs .brandset a{white-space:nowrap;flex:0 0 auto}
.fs .brandrow a.brandlogo span{height:var(--h);max-width:180px}
@media (max-width:620px){.fs .brandrow a.brandlogo span{height:calc(var(--h) * .8)}}
@media (prefers-reduced-motion:reduce){
.fs .brandmarquee{overflow-x:auto;scrollbar-width:none}
.fs .brandset[aria-hidden]{display:none}
}
/* Fiche produit : accordéon un rien plus petit. */
.fs .acc summary{font-size:1rem;padding:16px 0}
.fs .acc .body{font-size:.92rem}
/* Diagnostic : « Revenir » et la mention sur les données ne se chevauchent plus en mobile. */
.fs .diagfoot{gap:16px;align-items:flex-start}
.fs .diagfoot .linkback{flex:0 0 auto}
.fs .diagfoot .muted{text-align:right;font-size:.8rem;line-height:1.4}
/* Focus posé par le script sur la question à chaque écran (lecteurs d'écran) : pas de cadre à l'écran. */
.fs .qtext:focus:not(:focus-visible){outline:none}
/* Newsletter : fond clair, titre à gauche, champ et bouton côte à côte, mention sous le formulaire. */
.fs .news{background:var(--cream);color:var(--ink);text-align:left}
.fs .news .h2{color:var(--ink)}
.fs .news-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,5vw,72px);align-items:center}
.fs .news p{color:var(--ink-soft);margin:12px 0 0;max-width:46ch}
.fs .news .fs-newsletter-notice{background:var(--paper);margin:0 0 14px;max-width:none}
.fs .newsform{flex-wrap:nowrap;max-width:none;margin:0;justify-content:flex-start}
.fs .newsform input{flex:1 1 auto;min-width:0;border:1px solid var(--line);background:#fff;color:var(--ink)}
.fs .newsform input::placeholder{color:var(--ink-soft)}
.fs .newsform .btn{flex:0 0 auto;background:var(--rose-deep);color:#fff}
.fs .newsform .btn:hover{background:var(--ink)}
.fs .news p.news-legal{font-size:.8rem;font-style:italic;margin:14px 0 0;max-width:none}
.fs .news-legal a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:.15em}
@media (max-width:760px){.fs .news-in{grid-template-columns:1fr}}
/* Pied : réseaux sociaux sous l'adresse. */
.fs .fsocial{display:flex;gap:12px;margin-top:18px}
.fs .fsocial a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(243,241,233,.3);display:grid;place-items:center}
.fs .fsocial a:hover{border-color:var(--rose)}
.fs .fsocial svg{width:18px;height:18px}
/* ---------------------------------------------------------------------------------------------
Lot 9C — pages du site en gabarit texte suivies de sections (méta _fadel_sections) : moyens de
contact (template-parts/pages/contact.php) et index des marques (marques-index.php). Tokens du
CLAUDE.md §3 uniquement. Colonnes en minmax(0,1fr) : en 1fr, la largeur d'un logo élargissait
sa colonne et la grille débordait de l'écran sur mobile.
--------------------------------------------------------------------------------------------- */
.fs .fs-text + .fs-contact,.fs .fs-text + .fs-brandindex{padding-top:clamp(8px,2vw,20px)}
.fs .fs-contact .h2{margin:0 0 clamp(18px,3vw,28px)}
.fs .contactgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}
.fs .contactcard{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fs .contactcard b{font-family:var(--display);font-size:.72rem;letter-spacing:.14em;color:var(--rose-deep);font-weight:500}
.fs .contactcard p{margin:0;font-size:.93rem;color:var(--ink-soft)}
.fs .contactcard > a:not(.btn),.fs .contactlinks a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:anywhere}
.fs .contactcard > a:not(.btn):hover,.fs .contactlinks a:hover{color:var(--rose-deep)}
.fs .contactcard .btn{margin-top:auto}
.fs .contactlinks{display:flex;flex-wrap:wrap;gap:6px 16px}
.fs .brandindex{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.fs .brandindex a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:128px;
padding:22px 16px;border:1px solid var(--line);border-radius:18px;background:var(--paper);
color:var(--ink);text-decoration:none;text-align:center;transition:border-color .18s;
}
.fs .brandindex a:hover,.fs .brandindex a:focus-visible{border-color:var(--rose)}
.fs .brandindex .bi-logo{
display:block;height:var(--h);aspect-ratio:var(--ratio);max-width:min(170px,100%);background-color:var(--ink);
-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
}
.fs .brandindex a:hover .bi-logo,.fs .brandindex a:focus-visible .bi-logo{background-color:var(--rose-deep)}
.fs .brandindex .bi-name{font-family:var(--serif);font-size:1.2rem;line-height:1.2}
.fs .brandindex small{font-family:var(--display);font-size:.75rem;color:var(--ink-soft)}
@media (max-width:900px){
.fs .contactgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fs .brandindex{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
.fs .contactgrid{grid-template-columns:1fr}
.fs .brandindex{grid-template-columns:repeat(2,minmax(0,1fr))}
.fs .brandindex .bi-logo{height:calc(var(--h) * .8)}
}
/* ---------------------------------------------------------------------------------------------
Retours du 28/09/2026 (deuxième série).
--------------------------------------------------------------------------------------------- */
/* Bannières : textes surlignés d'un aplat, comme une sélection, lisibles sur toutes les photos. */
.fs .bpanel .eyebrow span,.fs .bpanel h2 span,.fs .bpanel .btext span{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fs .bpanel .eyebrow span{background:var(--paper);color:var(--rose-deep);padding:.35em .6em .3em .8em}
.fs .bpanel h2{line-height:1.25}
.fs .bpanel h2 span{background:var(--rose-deep);color:#fff;padding:0 .22em}
.fs .bpanel .btext{color:#fff;line-height:1.75}
.fs .bpanel .btext span{background:var(--rose-deep);padding:.15em .4em}
/* Visuel d'ambiance de l'accueil, pleine largeur. */
/* Photo en portrait (mousse et bulle, 01/10/2026) : bandeau 2:1 cadré des yeux à la bulle. */
.fs .fs-visuel{aspect-ratio:2/1;overflow:hidden;background:var(--cream)}
.fs .fs-visuel img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
@media (max-width:760px){.fs .fs-visuel{aspect-ratio:4/3}.fs .fs-visuel img{object-position:50% 45%}}
/* Paiement : logos des opérateurs dans l'option eBilling, à la place de l'image « Payer avec eBilling ». */
.fs .fs-gateway-logos{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:10px;vertical-align:middle}
.fs .fs-gateway-logos .fs-pay-logo{height:18px;padding:4px 7px;border-radius:6px}
.fs .fs-gateway-logos .fs-pay-logo--airtel-money,.fs .fs-gateway-logos .fs-pay-logo--moov-money{height:24px;padding:1px 6px}
.fs .wc_payment_method label img.fs-pay-logo{max-height:none;margin:0}
/* Barre d'achat mobile : état d'attente pendant l'ajout. */
.fs .stickybuy .btn.is-loading{opacity:.6;pointer-events:none}
/* Réservation : le surtitre hérite du max-width des paragraphes de .bookin, mais sa marge (0 0 18px) retirait le
centrage auto ; il était calé à gauche. Espacement des lettres compensé à gauche (le dernier espace est invisible). */
.fs .bookin .eyebrow{margin:0 auto 18px;padding-left:.3em}
/* Précautions d'utilisation de la fiche produit (produits à hydroquinone, trétinoïne) : encadré toujours visible. */
.fs .precautions{margin-top:22px;padding:16px 18px;border:1px solid var(--rose);border-radius:14px;background:var(--paper);font-size:.9rem;line-height:1.55}
.fs .precautions-title{font-family:var(--display);font-weight:600;margin:0 0 8px;color:var(--ink)}
.fs .precautions p{margin:0 0 8px}
.fs .precautions ul{margin:0 0 10px;padding-left:1.2em}
.fs .precautions li{margin:3px 0}
/* ---------- Lot 5 : routines vendues en lot (inc/routines.php, template-parts/routine-*.php) ---------- */
/* Cartes (accueil : rail ; page Routines : grille qui passe à la ligne). Le titre et le visuel sont des liens vers la fiche. */
.fs .routine .h3 a{color:inherit;text-decoration:none}
.fs .routine .rimg-link{display:block;text-decoration:none}
.fs .routine.is-out .rimg{opacity:.72}
.fs .routine .strike{margin-right:8px}
.fs .routines-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.fs .routines-grid .routine{min-width:0;flex:none;width:auto;scroll-snap-align:none}
@media (max-width:1000px){.fs .routines-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fs .routines-grid{grid-template-columns:minmax(0,1fr)}}
/* Fiche d'une routine : économie et composition dans l'ordre d'utilisation. */
.fs .rsave{margin:6px 0 0;font-family:var(--display);font-size:.88rem;color:var(--rose-deep)}
.fs .rcomp{margin:26px 0 8px}
.fs .rcomp-title{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:0 0 14px}
.fs .rsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.fs .rstep{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.fs .rstep-img{display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:var(--cream);overflow:hidden;text-decoration:none}
.fs .rstep-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fs .rstep-img span{font-family:var(--display);font-size:.55rem;letter-spacing:.12em;color:var(--ink-soft);opacity:.55}
.fs .rstep-body{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:flex-start}
.fs .rstep-label{font-family:var(--display);font-size:.7rem;letter-spacing:.1em;color:var(--rose-deep)}
.fs .rstep-moment{margin-left:8px;color:var(--ink-soft);letter-spacing:.04em;text-transform:none}
.fs .rstep-name{color:var(--ink);text-decoration:none;font-size:.97rem;line-height:1.35}
.fs .rstep-name b{font-weight:600}
.fs .rstep-name:hover{text-decoration:underline}
.fs .rstep-price{font-family:var(--display);font-size:.85rem;color:var(--ink-soft)}
.fs .rstep-price del{opacity:.6;margin-right:6px}
.fs .rstep-price ins{text-decoration:none}
.fs .rstep.is-out .rstep-img{opacity:.6}
.fs .rstep .tag.out{position:static;display:inline-block}
.fs .rnotice{margin:22px 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--cream);font-size:.93rem;color:var(--ink-soft)}
/* Panier et commande : les lignes des produits du lot sont à 0 FCFA, le prix est sur la ligne du lot. */
/* Fiche d'une routine : le visuel est un montage 16:10 (comme les cartes), pas un packshot carré : la galerie passe en 16:10, sans
fondu multiply (le fond du montage est déjà celui de la charte). Carré, elle coupait les produits des deux extrémités. */
.fs .gal-main.is-wide{aspect-ratio:16/10}
.fs .gal-main.is-wide img{mix-blend-mode:normal}
/* ---------------------------------------------------------------------------------------------
Retours du 01/10/2026.
--------------------------------------------------------------------------------------------- */
/* Gros titres en majuscules, tous à la taille de « Les nouveautés » (titres de section, titres de page, archives de la
boutique). Les noms de produit et les titres d'article gardent leur casse : ce sont des noms et des phrases. */
.fs .h2,.fs .h2.h2-sm,.fs .nstitle{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.18}
.fs .fs-text h1,.fs .fs-blog h1{font-size:clamp(1.45rem,2.6vw,2rem)}
.fs .fs-article h1.h2{text-transform:none;letter-spacing:-.02em;font-size:clamp(1.8rem,3.2vw,2.45rem)}
.fs .hero-section .page-title{text-transform:uppercase;letter-spacing:.04em;font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.6vw,2rem)}
/* Archives (boutique, catégories, univers, marques) : bandeau du titre et marge au-dessus des produits resserrés. */
/* Blocksy pose une hauteur minimale de 250 px et 50 px de marge au bandeau (réglages par préfixe, plus prioritaires). */
.fs .hero-section[data-type="type-2"] .entry-header{min-height:0!important;padding:clamp(20px,3vw,32px) 0!important}
body.woocommerce.archive .ct-container[data-vertical-spacing]{--theme-content-vertical-spacing:clamp(16px,2.6vw,30px)}
body.woocommerce.archive .woo-listing-top{margin-bottom:16px}
/* Le de la liste WooCommerce prenait la marge des sections de l'accueil (.fs section). */
body.woocommerce.archive .fs .ct-container > section{padding-top:0}
/* Bandeau d'annonce : rose de la marque plutôt que l'encre (il doit se voir en premier), défilement continu à toutes
les tailles d'écran, pause au survol. Messages reliés par la fleur du logo (template-parts/site/header.php). */
.fs .announce{background:var(--rose-deep);color:#fff;white-space:nowrap;overflow:hidden;padding:9px 0;font-size:.8rem;letter-spacing:.01em}
.fs .announce b{font-weight:600}
.fs .announce-track{display:flex;width:max-content;animation:fs-marquee 45s linear infinite}
.fs .announce:hover .announce-track{animation-play-state:paused}
.fs .announce-set{display:flex;align-items:center;flex:0 0 auto;min-width:100vw;justify-content:space-around}
.fs .announce-item{padding-inline:1.4em}
.fs .announce-sep{width:.8em;height:.8em;flex:0 0 auto;color:#fff;opacity:.85}
@media (max-width:640px){.fs .announce-track{animation-duration:32s}}
@media (prefers-reduced-motion:reduce){
.fs .announce{overflow-x:auto;scrollbar-width:none}
.fs .announce-set[aria-hidden]{display:none}
}
/* Cartes produit : bouton toujours visible sous le prix (fadel_card_button()). */
.fs .card .price{margin-bottom:12px}
.fs .card .cardbtn{display:flex;margin-top:auto;justify-content:center;text-align:center;width:100%;padding:.75em 1em;font-size:.88rem}
/* « .fs .card>a » (couleur héritée, bloc) l'emportait sur les couleurs du bouton. */
.fs .card > a.cardbtn.btn-rose{color:#fff}
.fs .card > a.cardbtn.btn-ghost{color:var(--ink)}
.fs .card > a.cardbtn.btn-ghost:hover{color:var(--cream)}
.fs .card .cardbtn.loading{opacity:.6;pointer-events:none}
@media (max-width:620px){.fs .card .cardbtn{font-size:.8rem;padding:.7em .5em}}
/* Rails de l'accueil : centrés quand ils ont peu d'éléments (vide à droite sur grand écran), défilants sinon. */
.fs .strip .track{margin-inline:auto}
.fs .routines > :first-child{margin-left:auto}
.fs .routines > :last-child{margin-right:auto}
/* Fenêtre du panier (template-parts/site/minicart.php) : panneau à droite, en bas de l'écran sur mobile. */
html.fs-noscroll{overflow:hidden}
.fs .fs-minicart{position:fixed;inset:0;z-index:9995}
.fs .fs-minicart-backdrop{position:absolute;inset:0;background:rgba(58,42,46,.38);opacity:0;transition:opacity .2s}
.fs .fs-minicart-panel{
position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);background:var(--paper);display:flex;flex-direction:column;
padding:22px 22px 24px;box-shadow:-10px 0 30px rgba(58,42,46,.12);transform:translateX(100%);transition:transform .22s ease-out;outline:0;
}
.fs .fs-minicart.is-open .fs-minicart-backdrop{opacity:1}
.fs .fs-minicart.is-open .fs-minicart-panel{transform:none}
.fs .fs-minicart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.fs .fs-minicart-title{margin:0;font-family:var(--serif);font-size:1.25rem}
.fs .fs-minicart-title span{color:var(--rose-deep)}
.fs .fs-minicart-close{background:none;border:0;font-size:1.8rem;line-height:1;padding:0 4px;color:var(--ink)}
.fs .fs-minicart-body{flex:1 1 auto;overflow-y:auto;padding:6px 0}
.fs .fs-mc-list{list-style:none;margin:0;padding:0}
.fs .fs-mc-list li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.fs .fs-mc-img{flex:0 0 56px;height:56px;border-radius:10px;background:var(--cream);overflow:hidden}
.fs .fs-mc-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.fs .fs-mc-txt b{display:block;font-family:var(--serif);font-weight:400;font-size:.98rem;line-height:1.25}
.fs .fs-mc-txt small{display:block;margin-top:3px;color:var(--ink-soft);font-family:var(--display);font-size:.84rem}
.fs .fs-mc-more{margin:10px 0 0;font-size:.86rem;color:var(--ink-soft)}
.fs .fs-mc-sub{display:flex;justify-content:space-between;margin:14px 0 0;font-family:var(--display);font-size:1rem}
.fs .fs-mc-empty{color:var(--ink-soft);margin:18px 0}
.fs .fs-minicart-actions{display:flex;flex-direction:column;gap:10px;padding-top:16px}
.fs .fs-minicart-actions .btn{justify-content:center}
.fs .fs-minicart-actions .linkback{align-self:center;margin-top:4px;font-family:var(--display);font-size:.88rem}
@media (max-width:620px){
.fs .fs-minicart-panel{top:auto;left:0;width:100%;max-height:82vh;border-radius:20px 20px 0 0;transform:translateY(100%);padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}
/* Barre d'onglets mobile (template-parts/site/tabbar.php) : Accueil, Catégories, Analyse de peau, Panier et son
montant. Ce qui était posé en bas de l'écran (WhatsApp, barre d'achat de la fiche, carte des cookies) remonte
au-dessus d'elle. */
.fs .fs-tabbar{display:none}
@media (max-width:760px){
body.fs-has-tabbar{--fs-tabbar:62px;padding-bottom:calc(var(--fs-tabbar) + env(safe-area-inset-bottom))}
.fs .fs-tabbar{
display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:85;
background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
box-shadow:0 -4px 16px rgba(58,42,46,.06);
}
.fs .fs-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--fs-tabbar);
text-decoration:none;color:var(--ink);font-family:var(--display);font-size:.68rem;line-height:1.15;text-align:center;padding:0 4px}
.fs .fs-tab svg{width:22px;height:22px;color:var(--rose-deep)}
.fs .fs-tab[aria-current]{color:var(--rose-deep);font-weight:600}
.fs .fs-tab-icon{position:relative;display:inline-flex}
.fs .fs-tab-icon .fs-cart-count{top:-4px;right:-8px}
.fs .fs-tab-total{font-weight:600;white-space:nowrap}
.fs .fs-tab-total .woocommerce-Price-amount{font-weight:600}
body.fs-has-tabbar .fs .wafloat{bottom:calc(var(--fs-tabbar) + 14px + env(safe-area-inset-bottom))}
body.fs-has-tabbar .fs .stickybuy{bottom:calc(var(--fs-tabbar) + env(safe-area-inset-bottom))}
body.single-product.fs-has-tabbar .fs .wafloat{bottom:calc(var(--fs-tabbar) + 88px + env(safe-area-inset-bottom))}
html body.fs-has-tabbar .fadel-cookies{bottom:calc(var(--fs-tabbar) + 8px + env(safe-area-inset-bottom))}
html body.single-product.fs-has-tabbar .fadel-cookies{bottom:calc(var(--fs-tabbar) + 84px + env(safe-area-inset-bottom))}
}
/* ---------------------------------------------------------------------------------------------
Panier (02/10/2026).
--------------------------------------------------------------------------------------------- */
/* Liens « Voir le panier » que WooCommerce ajoute à côté d'un bouton après un ajout (cartes, routines, fiche produit) :
la fenêtre du panier les remplace, et un bouton déjà au panier devient « ✓ Ajouter encore » ou « Voir le panier ». */
.fs a.added_to_cart.wc-forward{display:none!important}
/* Mise à jour automatique du panier (fadel.js) : le bouton n'a plus d'utilité quand le script tourne. */
html.fs-autocart .woocommerce-cart-form button[name="update_cart"]{display:none}
/* Fenêtre du panier : un peu plus d'air en haut, et sous la barre d'administration de WordPress (personne connectée). */
.fs .fs-minicart-panel{padding-top:28px}
@media (min-width:621px){
body.admin-bar .fs .fs-minicart-panel{top:32px}
}
@media (min-width:621px) and (max-width:782px){
body.admin-bar .fs .fs-minicart-panel{top:46px}
}
/* Pagination des archives (03/10/2026) : Blocksy masquait les numéros de page sur mobile (seul « Suivant » restait). Numéros
visibles partout, en pastilles ; sur mobile, « Précédent » et « Suivant » réduits à leur flèche (le texte reste lu par les
lecteurs d'écran). */
.fs .ct-pagination[data-pagination="simple"]{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:clamp(28px,4vw,48px)}
.fs .ct-pagination[data-pagination="simple"] > div{display:flex!important;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.fs .ct-pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;height:38px;padding:0 12px;
border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);
font-family:var(--display);font-size:.9rem;text-decoration:none;
}
.fs .ct-pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.fs .ct-pagination a.page-numbers:hover{border-color:var(--rose);color:var(--rose-deep)}
.fs .ct-pagination .page-numbers.dots{border-color:transparent;background:none;min-width:20px;padding:0}
@media (max-width:689px){
/* Mobile : « ‹ Page 3 sur 16 › » (indicateur ajouté par fadel.js) à la place de la liste des numéros, trop longue au milieu
de la pagination. Sans JavaScript, les numéros restent et passent à la ligne. */
html.fs-pagejs .fs .ct-pagination[data-pagination="simple"] > div{display:none!important}
.fs .ct-pagination .fs-page-of{font-family:var(--display);font-size:.92rem;padding:0 10px;color:var(--ink)}
.fs .ct-pagination .prev.page-numbers,.fs .ct-pagination .next.page-numbers{font-size:0;padding:0!important;width:40px!important;min-width:40px;height:40px;gap:0}
.fs .ct-pagination .prev.page-numbers svg,.fs .ct-pagination .next.page-numbers svg{width:11px;height:11px}
}
.fs .ct-pagination .fs-page-of{display:none}
@media (max-width:689px){html.fs-pagejs .fs .ct-pagination .fs-page-of{display:inline}}
/* Flèches des rails de routines (fadel.js) : même composant que les nouveautés, centrées sur la hauteur de la carte. */
.fs .fs-railwrap{position:relative}
.fs .fs-railwrap .sarrow{top:50%}
.fs .fs-railwrap .sarrow.prev{left:-8px}.fs .fs-railwrap .sarrow.next{right:-8px}
/* ---------------------------------------------------------------------------------------------
Retours du 06/10/2026.
--------------------------------------------------------------------------------------------- */
/* Titre d'une carte de routine sur une seule ligne (« Routine peau déshydratée » passait sur deux). */
.fs .routine .h3{font-size:clamp(1.02rem,1.5vw,1.15rem);letter-spacing:-.01em}
/* Page Routines : la liste suit le texte de la page sans le grand blanc d'une section de l'accueil. */
.fs .fs-routines-page{padding-top:clamp(6px,1.6vw,18px)}
/* ---------------------------------------------------------------------------------------------
Lot 10A (12/10/2026) : « Et maintenant ? » de la page de confirmation de commande (inc/confirmation.php).
Réutilise la carte crème .delivnote et la liste à fleurs .fs-prose.
--------------------------------------------------------------------------------------------- */
.fs .fs-next{margin:clamp(22px,3vw,34px) 0}
.fs .fs-next h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.25;color:var(--ink);margin:0 0 .5em}
.fs .fs-next .fs-prose{margin-top:0;font-size:1rem;line-height:1.65}
.fs .fs-next .fs-prose ul{margin:0}
.fs .fs-next .fs-prose li{margin:.45em 0;color:var(--ink)}
.fs .fs-next-help{margin:1.1em 0 0;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:.95rem}
/* Suggestions de la recherche de l'entête (inc/suggestions.php, fadel.js), 14/10/2026. */
.fs .searchbox{position:relative}
.fs .fs-suggest{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;width:380px;max-width:calc(100vw - 24px);max-height:70vh;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(58,42,46,.14);padding:8px 0;text-align:left}
.fs .fs-suggest[hidden]{display:none}
.fs .fs-suggest.is-fixed{position:fixed;left:12px;right:12px;width:auto;max-width:none}
.fs .fs-suggest-h{margin:6px 14px 4px;font-family:var(--sans);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.fs .fs-suggest a{display:flex;align-items:center;gap:12px;padding:8px 14px;color:var(--ink);text-decoration:none;font-family:var(--sans);font-size:.88rem;line-height:1.3}
.fs .fs-suggest a:hover,.fs .fs-suggest a.is-active{background:var(--cream)}
.fs .fs-suggest-img{flex:0 0 44px;width:44px;height:44px;border-radius:8px;background:var(--cream);overflow:hidden;display:block}
.fs .fs-suggest-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fs .fs-suggest-txt{display:flex;flex-direction:column;min-width:0}
.fs .fs-suggest-brandline{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.fs .fs-suggest-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fs .fs-suggest-price{font-size:.8rem;color:var(--rose-deep);margin-top:2px}
.fs .fs-suggest a.fs-suggest-all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;color:var(--rose-deep);font-weight:600}
.fs .fs-suggest-empty{margin:6px 14px;font-family:var(--sans);font-size:.85rem;color:var(--ink-soft)}
/* ---------------------------------------------------------------------------------------------
Recherche plus visible (retours de Fadel du 15/10/2026, modèle : fabellashop.com).
Ordinateur : même trait souligné, plus haut et plus lisible ; la loupe reste à gauche et devient un vrai bouton.
Mobile (≤ 760 px, quand le menu passe en burger) : barre arrondie pleine largeur sous le logo, loupe à droite.
Le texte du champ fait 16 px sur mobile : en dessous, Safari sur iPhone zoome la page au toucher.
--------------------------------------------------------------------------------------------- */
.fs .searchbox{max-width:330px;gap:10px;padding:11px 2px;border-bottom:1.5px solid rgba(58,42,46,.28)}
/* Blocksy impose 40 px de hauteur minimale aux boutons et aux champs : sans cette remise à zéro, la barre fait 64 px. */
.fs .searchbox input{font-size:.95rem;min-height:0;height:auto}
.fs .fs-search-go{flex:0 0 auto;min-height:0;height:auto;width:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;margin:0;color:var(--ink-soft);cursor:pointer}
.fs .fs-search-go svg{width:19px;height:19px}
.fs .fs-search-go:hover,.fs .fs-search-go:focus-visible{color:var(--rose-deep)}
.fs .searchbox input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
@media (max-width:760px){
.fs .masthead-top{grid-template-columns:1fr auto 1fr;row-gap:12px}
.fs .masthead-top>.icons:not(.right){display:contents}
.fs .masthead-top .burger{grid-column:1;grid-row:1;justify-self:start}
.fs .masthead-top .logo{grid-column:2;grid-row:1}
.fs .masthead-top .icons.right{grid-column:3;grid-row:1}
.fs .searchbox{grid-column:1/-1;grid-row:2;max-width:none;width:100%;gap:8px;padding:0 6px 0 18px;height:48px;
background:#fff;border:1px solid rgba(58,42,46,.22);border-radius:999px}
.fs .searchbox:focus-within{border-color:var(--rose)}
.fs .searchbox input{font-size:16px;order:1;padding:0}
.fs .fs-search-go{order:2;width:38px;height:38px;border-radius:50%;color:var(--ink)}
.fs .fs-search-go svg{width:21px;height:21px}
}