:root{
--bg:#FFFFFF;--surface:#FFFFFF;--paper:#F8F7F4;--paper2:#F1EFEA;
--fg:#1A171B;--navy:#1A171B;--navy-d:#0F0D10;--muted:#6F6A63;--line:#EAE6DC;
--accent:#AC9861;--gold:#AC9861;--gold-ink:#7C6A3F;
--blue:#0497D3;--blue-d:#0378A8;--blue-h:#02648C;--blue-a:#024F70;--blue-tint:#E7F4FA;
--leafmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='30.929 16 32.282 13.875'%3E%3Cpath d='m51.43 16.47c-0.89 0.58-2.1 1.89-2.43 2.61-0.12 0.28-0.29 0.56-0.36 0.61-0.08 0.03-0.24 0.26-0.35 0.47-0.26 0.51-0.53 3.09-0.39 3.83 0.08 0.45 0.06 0.6-0.11 0.78-0.16 0.18-0.31 0.23-0.59 0.18-0.47-0.1-0.74-0.34-1.32-1.2-0.62-0.89-3.18-3.4-3.82-3.73-0.27-0.13-0.71-0.41-0.96-0.62-0.26-0.2-0.7-0.4-0.99-0.45-0.28-0.05-0.76-0.25-1.05-0.46-0.5-0.36-0.65-0.4-2.08-0.52-1.15-0.08-1.64-0.17-1.94-0.36-0.21-0.14-0.55-0.25-0.75-0.26-0.19 0-0.96 0.05-1.71 0.11-1.1 0.1-1.4 0.18-1.54 0.37-0.2 0.27-0.11 0.8 0.17 1.01 0.12 0.08 0.39 0.16 0.59 0.16 0.21 0 0.56 0.11 0.76 0.25 0.5 0.33 1.34 0.99 1.7 1.35 0.72 0.69 1.37 1.16 1.89 1.39 0.9 0.39 1.69 0.97 4.56 3.45 0.29 0.25 0.74 0.51 1 0.58 0.27 0.08 0.72 0.31 1.02 0.52 0.51 0.37 0.6 0.39 2.13 0.46 1.52 0.06 1.63 0.09 2.13 0.44 0.77 0.52 1.01 0.89 1.01 1.51 0 0.5 0.23 0.93 0.5 0.93 0.06 0 0.2-0.13 0.3-0.28q0.2-0.27 0.2-1.16v-0.89l0.8-0.71c0.68-0.59 0.93-0.73 1.64-0.9 0.46-0.1 1.07-0.35 1.35-0.55 0.29-0.2 0.77-0.4 1.07-0.45q0.55-0.09 1.02-0.51c0.26-0.24 0.66-0.47 0.88-0.5 0.24-0.04 0.54-0.09 0.68-0.12 0.14-0.02 0.45-0.22 0.67-0.42 0.23-0.22 0.59-0.42 0.79-0.45 0.2-0.05 0.55-0.24 0.76-0.44 0.23-0.19 0.65-0.48 0.97-0.62 0.31-0.17 0.81-0.49 1.12-0.74 0.91-0.73 2.34-2.19 2.44-2.49 0.11-0.38-0.18-0.81-0.84-1.25-0.51-0.34-0.54-0.34-2.59-0.34-1.13 0-2.22 0.04-2.41 0.09-0.17 0.06-0.49 0.24-0.69 0.4-0.2 0.16-0.68 0.39-1.07 0.49-0.4 0.11-0.85 0.29-1 0.4-0.15 0.1-0.45 0.32-0.68 0.48-0.45 0.33-1.67 1.58-2.23 2.28-0.49 0.61-0.74 1.09-0.93 1.8-0.07 0.31-0.29 0.75-0.45 0.97-0.17 0.22-0.37 0.59-0.45 0.82q-0.27 0.81-0.74 0.57c-0.28-0.15-0.3-0.55-0.03-2.03 0.11-0.68 0.37-1.53 0.68-2.2 0.27-0.6 0.49-1.17 0.49-1.25 0-0.24 0.65-1.25 1.08-1.68 0.21-0.21 0.55-0.64 0.75-0.94 0.2-0.3 0.41-0.61 0.47-0.7 0.15-0.2 0.01-0.56-0.21-0.56-0.1 0-0.51 0.21-0.91 0.47zm-12.18 3.72c0.29 0.1 0.68 0.19 0.85 0.19 0.45 0 1.48 0.72 2.76 1.97 0.89 0.85 1.14 1.16 1.14 1.44 0 0.5-0.4 0.43-1.05-0.16-0.3-0.28-0.6-0.5-0.66-0.5-0.06 0-0.25-0.14-0.41-0.32-0.3-0.31-2.57-1.62-3.34-1.93-0.29-0.12-0.41-0.24-0.41-0.44 0-0.15 0.03-0.31 0.08-0.35q0.18-0.21 1.04 0.1zm17.41 0.21c0.12 0.06 0.22 0.15 0.22 0.2 0 0.06-0.44 0.4-0.97 0.78-0.52 0.37-1.33 1.06-1.8 1.51-0.93 0.92-1.5 1.24-1.8 0.99-0.37-0.32-0.22-0.75 0.48-1.42 1.2-1.13 1.4-1.3 1.79-1.5 0.21-0.11 0.46-0.29 0.55-0.4 0.35-0.42 0.92-0.47 1.53-0.16z'/%3E%3C/svg%3E");
--font:"Outfit","Inter",sans-serif;
--font-text:"Inter",-apple-system,"Segoe UI",sans-serif;
--maxw:1240px;--radius:2px;--pill:999px;--ease:cubic-bezier(.22,1,.36,1);--gut:1.4rem;
--toile:url("../img/pattern-rosaces.svg") top center/260px 260px repeat;
--couronne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 15'%3E%3Cg fill='none' stroke='%23AC9861' stroke-width='.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 13.5h16.8'/%3E%3Cpath d='M4.2 11.2 3 5.6l5.2 3L13 3l4.8 5.6 5.2-3-1.2 5.6'/%3E%3Ccircle cx='3' cy='3.9' r='1'/%3E%3Ccircle cx='13' cy='1.4' r='1.05'/%3E%3Ccircle cx='23' cy='3.9' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font-text);font-weight:400;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{font-family:var(--font-text);font-weight:500;line-height:1.2;color:var(--fg)}
em{font-style:italic}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:900px}
.section{padding-block:clamp(3.6rem,9vw,7.2rem);position:relative}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:.6rem;top:-4rem;z-index:300;background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius);transition:top .2s}
.skip:focus{top:.6rem}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.85rem 1.7rem;font-family:var(--font-text);font-size:.92rem;font-weight:600;letter-spacing:.02em;border-radius:0;transition:background .3s var(--ease),color .3s,border-color .3s,transform .25s;border:1px solid var(--navy);background:var(--navy);color:#fff}
/* « la feuille qui se pose » (choix client 2026-07-07) : la feuille maison descend au survol, s'incline au clic ; l'espace est réservé, le libellé ne bouge pas */
.btn::after{content:"";width:26px;height:12px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat;opacity:0;transform:translateY(-13px) rotate(-22deg);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{opacity:1;transform:none}
.btn:active::after{opacity:1;transform:translateY(2px) rotate(6deg)}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn:active{background:var(--blue-a);border-color:var(--blue-a)}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn--ghost{background:transparent;color:var(--navy)}
.btn--ghost:hover{background:var(--blue-tint);color:var(--blue-a);border-color:var(--blue-d)}
.btn--ghost:active{background:#D3EBF6;color:var(--blue-a);border-color:var(--blue-h)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn--gold:hover{background:var(--blue-h);border-color:var(--blue-h)}
.btn--blue{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.btn--blue:hover{background:var(--blue-h);border-color:var(--blue-h)}
.btn--blue:active{background:var(--blue-a);border-color:var(--blue-a)}
.btn--lghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--lghost:hover{background:rgba(255,255,255,.08);color:#fff;border-color:var(--blue)}
.btn--lghost:active{background:rgba(255,255,255,.15)}
.btn--sm{min-height:42px;padding:.55rem 1.05rem;font-size:.85rem}
.btn--sm::after{width:20px;height:9px;transform:translateY(-10px) rotate(-22deg)}
.btn--sm:hover::after,.btn--sm:focus-visible::after{transform:none}
.btn--block{width:100%}
.link{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-text);font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:.18rem;transition:color .3s}
.link::after{content:"→";transition:transform .3s}
.link:hover::after{transform:translateX(4px)}
.link:hover{color:var(--blue-d)}
/* editorial rubric (giant section numbers + gold hairline + filigrane) */
.rubric{display:flex;align-items:center;gap:1rem;font-family:var(--font-text);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-d)}
.rubric__n{font-family:var(--font);font-size:clamp(2.6rem,7vw,4.2rem);font-weight:500;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--gold);text-stroke:1px var(--gold);letter-spacing:0}
.rubric__l{position:relative;padding-left:0}
.rubric__l::before{content:"";display:inline-block;width:34px;height:1px;background:var(--gold);vertical-align:middle;margin-right:.7rem}
.hgroup{position:relative;margin-bottom:2.4rem}
.hgroup .ghost{position:absolute;left:-.04em;bottom:55%;font-family:var(--font);font-weight:600;font-size:clamp(3.4rem,12vw,8rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(172,152,97,.22);text-stroke:1px rgba(172,152,97,.22);white-space:nowrap;pointer-events:none;z-index:0;user-select:none}
.hgroup>*{position:relative;z-index:1}
.hgroup.center::before,.heroc__in::before{content:"";display:block;width:2.3rem;height:1.35rem;margin:0 auto .9rem;background:var(--couronne) center/contain no-repeat}
.h2{font-size:clamp(1.85rem,4.4vw,3rem);font-weight:600;line-height:1.04}
.h2 em{color:var(--blue-h)}
.lead{color:var(--muted);max-width:58ch;font-size:1.06rem;line-height:1.7;margin-top:1rem}
.lead em{color:var(--blue-h);font-weight:500}
.center .lead{margin-inline:auto}
.lettrine::first-letter{font-family:var(--font);font-size:3.4em;font-weight:600;float:left;line-height:.72;padding:.06em .12em 0 0;color:var(--blue-h)}
.cap{font-family:var(--font);font-style:italic;font-size:.9rem;color:var(--muted);margin-top:.7rem}
.cap::before{content:"";display:inline-block;width:1.35em;height:.8em;margin-right:.45em;background:var(--couronne) center/contain no-repeat;vertical-align:-.06em}
.hr-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border:0;opacity:.5}
/* frise de feuilles d'or (élément graphique maison) */
.nl__in::before{content:"";display:block;width:min(230px,64%);height:34px;margin:0 auto 1.4rem;background:none}
.quote cite::before{content:"";display:block;width:132px;height:20px;margin-bottom:.85rem;background:none}
/* frame (liseré or) */
.frame{position:relative;border-radius:var(--radius);overflow:hidden}
.frame::after{content:"";position:absolute;inset:9px;border:1px solid rgba(172,152,97,.55);border-radius:2px;pointer-events:none;z-index:2}
.frame img{width:100%;height:100%;object-fit:cover}
/* icons */
.ic{width:1.5rem;height:1.5rem;display:block;fill:none;stroke:currentColor;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}
/* header suspendu, barre flottante à repères d'angle */
.head{position:fixed;top:0;left:0;right:0;z-index:90;padding:.6rem .9rem 0;transition:transform .45s var(--ease);pointer-events:none}
.head>*{pointer-events:auto}
html.hdr-hide .head{transform:translateY(-120%)}
.head__in{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;max-width:calc(var(--maxw) - 1.8rem);margin-inline:auto;padding:.5rem 1.2rem;background:rgba(255,255,255,.92);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 18px 40px -30px rgba(26,23,27,.45);transition:background .4s,box-shadow .4s}
.head__in::before{content:"";position:absolute;top:-4px;left:-4px;width:11px;height:11px;border-top:1px solid var(--line);border-left:1px solid var(--line);pointer-events:none;z-index:2}
.head__in::after{content:"";position:absolute;bottom:-4px;right:-4px;width:11px;height:11px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);pointer-events:none;z-index:2}
.brand{display:grid}
.brand img{grid-area:1/1;height:var(--logo-h,2.1rem);width:auto;max-width:15rem;object-fit:contain;display:block;transition:opacity .35s}
.brand .brand--light{opacity:0}
.head__icons{display:flex;align-items:center;gap:1.35rem;justify-self:end}
.hicon{display:flex;flex-direction:column;align-items:center;gap:.16rem;font-size:.62rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--fg);position:relative;cursor:pointer;background:none;border:0;font-family:var(--font-text)}
.hicon .ic{width:1.3rem;height:1.3rem}
.hicon:hover{color:var(--blue-d)}
.hicon .count{position:absolute;top:-7px;right:1px;background:var(--blue);color:#fff;font-size:.58rem;font-weight:700;width:15px;height:15px;border-radius:50%;display:grid;place-items:center}
.hicon--menu .i-close{display:none}
#nav-toggle:checked~.head .hicon--menu .i-open{display:none}
#nav-toggle:checked~.head .hicon--menu .i-close{display:block}
/* menu déroulant pleine largeur du bandeau (toutes tailles) */
.head .navwrap{position:absolute;left:.9rem;right:.9rem;top:100%;margin:.5rem auto 0;max-width:calc(var(--maxw) - 1.8rem);background:rgba(255,255,255,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 50px -30px rgba(26,23,27,.55);max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .5s var(--ease),opacity .35s}
.head .navwrap::before{content:"";position:absolute;top:-4px;left:-4px;width:11px;height:11px;border-top:1px solid var(--line);border-left:1px solid var(--line);pointer-events:none;z-index:2}
.head .navwrap::after{content:"";position:absolute;bottom:-4px;right:-4px;width:11px;height:11px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);pointer-events:none;z-index:2}
#nav-toggle:checked~.head .navwrap{max-height:min(80vh,600px);opacity:1;pointer-events:auto;overflow-y:auto}
.nav{list-style:none;display:grid;padding:.9rem 0}
.nav>li+li::before{content:"";display:block;width:min(210px,56%);height:15px;margin:.1rem auto;background:none}
.nav a:not(.btn){display:block;text-align:center;padding:.95rem clamp(1.2rem,4vw,2.4rem);font-family:var(--font-text);font-size:.95rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);transition:color .35s,letter-spacing .4s var(--ease)}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{color:var(--blue-d);letter-spacing:.14em}
.mega{display:none}
/* transparent posé sur le héro, en haut de page */
html.hdr-top .head__in{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html.hdr-top .head__in::before,html.hdr-top .head__in::after{opacity:0}
html.hdr-top .brand .brand--dark{opacity:0}
html.hdr-top .brand .brand--light{opacity:1}
html.hdr-top .hicon,html.hdr-top .hicon:hover{color:#fff}
#nav-toggle:checked~.head .head__in{background:rgba(255,255,255,.98);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#nav-toggle:checked~.head .head__in::before,#nav-toggle:checked~.head .head__in::after{opacity:1}
#nav-toggle:checked~.head .brand .brand--dark{opacity:1}
#nav-toggle:checked~.head .brand .brand--light{opacity:0}
#nav-toggle:checked~.head .hicon{color:var(--fg)}
.nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.burger{display:none}
/* recherche déroulante */
.search{position:absolute;left:.9rem;right:.9rem;top:100%;margin:.5rem auto 0;max-width:calc(var(--maxw) - 1.8rem);background:rgba(255,255,255,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 50px -30px rgba(26,23,27,.55);max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .45s var(--ease),opacity .3s}
.search::before{content:"";position:absolute;top:-4px;left:-4px;width:11px;height:11px;border-top:1px solid var(--line);border-left:1px solid var(--line);z-index:2}
.search::after{content:"";position:absolute;bottom:-4px;right:-4px;width:11px;height:11px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);z-index:2}
html.search-on .search{max-height:min(70vh,520px);opacity:1;pointer-events:auto;overflow-y:auto}
html.search-on .head__in{background:rgba(255,255,255,.98);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
html.search-on .head__in::before,html.search-on .head__in::after{opacity:1}
html.search-on .brand .brand--dark{opacity:1}
html.search-on .brand .brand--light{opacity:0}
html.search-on .hicon{color:var(--fg)}
.search__in{display:flex;align-items:center;gap:.9rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.search__in svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.search__in input{flex:1;min-width:0;border:0;background:none;font:inherit;font-weight:400;font-size:1.02rem;color:var(--fg)}
.search__in input:focus{outline:none}
.search__in input::-webkit-search-cancel-button{-webkit-appearance:none}
.search [data-search-close]{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.5rem;line-height:1;padding:0 .2rem;transition:color .3s}
.search [data-search-close]:hover{color:var(--blue-d)}
.search__res{list-style:none}
.search__res li{border-top:1px solid var(--line)}
.search__res li:first-child{border-top:0}
.search__res a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.8rem 1.4rem;transition:background .25s,padding-left .3s var(--ease)}
.search__res a:hover{background:var(--paper);padding-left:1.7rem}
.search__res .n{font-family:var(--font);font-weight:600;font-size:1.12rem;line-height:1.15}
.search__res .t{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d);white-space:nowrap;flex:0 0 auto}
.search__empty{padding:1.1rem 1.4rem;color:var(--muted);font-size:.88rem;font-style:italic}
@media (max-width:600px){
.head__icons{gap:1rem}
.hicon span:not(.count){display:none}
.brand img{height:1.8rem}
}
/* sommaire (sticky scrollspy) */
.sommaire{position:sticky;top:var(--headh,64px);z-index:60;background:var(--navy);border-block:1px solid rgba(255,255,255,.08);transition:top .45s var(--ease)}
html.hdr-hide .sommaire{top:0}
.sommaire ol{list-style:none;max-width:var(--maxw);margin-inline:auto;display:flex;gap:.4rem;padding:0 var(--gut);overflow-x:auto;scrollbar-width:none}
.sommaire ol::-webkit-scrollbar{display:none}
.sommaire li:first-child{margin-left:auto}
.sommaire li:last-child{margin-right:auto}
.sommaire a{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;padding:.7rem .9rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.72);border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.sommaire a.active{font-weight:400}
.sommaire a i{font-family:var(--font);font-style:normal;color:var(--gold);font-size:.92rem}
.sommaire a:hover{color:#fff}
.sommaire a.active{color:#fff;border-color:var(--blue)}
/* HERO (kinetic wow) */
.hero{background:linear-gradient(180deg,var(--paper),var(--bg));overflow:hidden;position:relative}
.hero__grid{display:grid;gap:2.4rem;align-items:center;padding-block:clamp(2.8rem,7vw,5.6rem)}
.hero__date{font-family:var(--font-text);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-h);display:flex;align-items:center;gap:.7rem}
.hero__date::after{content:"";flex:1;height:1px;background:var(--line)}
.hero h1{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:600;line-height:1;margin-top:1.2rem;letter-spacing:-.01em}
.hero h1 .l1,.hero h1 .l2{display:block;will-change:transform}
.hero h1 .l2{color:var(--fg)}
.hero h1 em{font-style:italic;color:var(--blue-h)}
.hero__sub{margin-top:1.5rem;color:var(--muted);font-size:1.16rem;line-height:1.7;max-width:40ch}
.hero__sub em{color:var(--blue-h);font-style:italic}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.hero__media{position:relative}
.hero__pic{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 70px -45px rgba(26,23,27,.6)}
.hero__pic::after{content:"";position:absolute;inset:11px;border:1px solid rgba(255,255,255,.6);border-radius:2px;z-index:3;pointer-events:none}
.hero__pic img{width:100%;height:100%;object-fit:cover;animation:zoom 11s var(--ease) both}
@keyframes zoom{from{opacity:0;transform:scale(1.08)}18%{opacity:1}to{opacity:1;transform:scale(1)}}
.steam{position:absolute;left:0;right:0;top:2%;height:44%;z-index:2;pointer-events:none;display:flex;justify-content:center;gap:34px}
.steam i{display:block;width:8px;height:100%;border-radius:50%;filter:blur(9px);opacity:0;transform-origin:bottom;background:linear-gradient(to top,rgba(255,255,255,0),rgba(255,255,255,.4))}
.steam i:nth-child(1){animation:steam 6s ease-in-out infinite}
.steam i:nth-child(2){height:86%;animation:steam 6s ease-in-out 1.8s infinite}
.steam i:nth-child(3){animation:steam 6s ease-in-out 3.4s infinite}
@keyframes steam{0%{opacity:0;transform:translateY(16px) scaleX(1)}28%{opacity:.6}55%{transform:translateY(-22px) scaleX(1.5)}100%{opacity:0;transform:translateY(-56px) scaleX(.7)}}
/* badge overlay on hero */
/* badge avis Google, repères d'angle, cliquable */
.badge-rate{position:relative;display:inline-flex;align-items:center;gap:.65rem;margin-top:1.9rem;padding:.6rem 1rem;color:#fff;background:rgba(15,13,16,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .35s,transform .35s var(--ease)}
.badge-rate::before,.badge-rate::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none;transition:width .35s var(--ease),height .35s var(--ease)}
.badge-rate::before{top:0;left:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.badge-rate::after{bottom:0;right:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.badge-rate:hover,.badge-rate:focus-visible{background:rgba(15,13,16,.45);transform:translateY(-2px)}
.badge-rate:hover::before,.badge-rate:hover::after,.badge-rate:focus-visible::before,.badge-rate:focus-visible::after{width:17px;height:17px}
.badge-rate .gi{width:19px;height:19px;flex:0 0 auto}
.badge-rate .stars{color:var(--gold);font-size:.98rem;letter-spacing:.14em;line-height:1}
@media (min-width:900px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem)}.hero__pic{aspect-ratio:4/5}}
/* bandeau confiance, ruban défilant + slidable */
.trust{background:var(--surface);border-block:1px solid var(--line);padding-block:1.05rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.trust::-webkit-scrollbar{display:none}
.trust.grabbing{cursor:grabbing}
.ruban__track{display:flex;width:max-content}
.ruban__seq{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem}
.ruban__it{display:inline-flex;align-items:center;gap:.8rem;white-space:nowrap;user-select:none}
.ruban__it .ic{color:var(--blue);width:1.6rem;height:1.6rem;stroke-width:.7;flex:0 0 auto}
.ruban__it b{font-family:var(--font);font-size:1.15rem;font-weight:600;color:var(--fg)}
.ruban__it span{font-size:.78rem;color:var(--muted)}
.ruban__dia{width:5px;height:5px;border:1px solid var(--line);transform:rotate(45deg);flex:0 0 auto}
/* product carousel */
.bs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.carou{position:relative;margin-top:2.4rem}
.carou__track{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.8rem .3rem 1.2rem;scrollbar-width:none}
.carou__track::-webkit-scrollbar{display:none}
.pcard{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .35s,box-shadow .35s,transform .35s}
.pcard:hover{border-color:var(--gold);box-shadow:0 24px 46px -32px rgba(26,23,27,.45);transform:translateY(-4px)}
.pcard__media{position:relative;aspect-ratio:1/1;background:var(--paper);display:grid;place-items:center;padding:1rem;overflow:hidden}
.pcard__media img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__tags{position:absolute;top:.6rem;left:.6rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.tag{font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .6rem;border-radius:var(--pill)}
.tag--bs{background:var(--gold);color:#fff}
.tag--disc{background:var(--blue);color:#fff}
.pcard__b{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.22rem;flex:1}
.pcard__n{font-family:var(--font);font-size:1.4rem;font-weight:600;line-height:1.05}
.pcard__brand{font-size:.74rem;color:var(--muted)}
.pcard .stars{color:var(--gold);font-size:.82rem;letter-spacing:.05em}
.pcard .stars small{color:var(--muted);font-size:.68rem;margin-left:.2rem}
.pcard__price{font-size:.9rem;font-weight:700;color:var(--fg);margin-top:.1rem}
.pcard__price span{font-weight:500;color:var(--muted);font-size:.74rem}
.fmt{display:flex;gap:.4rem;margin-top:.4rem;flex-wrap:wrap}
.fmt span{font-size:.68rem;border:1px solid var(--line);border-radius:var(--radius);padding:.22rem .55rem;color:var(--muted)}
.fmt span:first-child{border-color:var(--gold);color:var(--blue-h);font-weight:600}
.pcard .btn{margin-top:.7rem}
.carou__nav{display:none;gap:.5rem}
.carou__nav button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--navy);background:var(--surface);transition:background .3s,color .3s,border-color .3s}
.carou__nav button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.carou__foot{font-size:.74rem;color:var(--muted);margin-top:.4rem;font-style:italic}
@media (min-width:680px){.carou__track{grid-auto-columns:38%}}
@media (min-width:1000px){.carou__track{grid-auto-columns:23.2%}.carou__nav{display:flex}}
/* split (offre / box / conseil / manifesto) */
.split{display:grid;gap:2.2rem;align-items:center}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:5/4}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media.frame::after{inset:10px}
@media (min-width:880px){.split{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}.split--rev .split__media{order:-1}}
.band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:var(--toile);opacity:.6;pointer-events:none}
.band .wrap{position:relative;z-index:1}
.band h2,.band h3{color:#fff}
.band .lead,.band p{color:rgba(255,255,255,.84)}
.band .rubric{color:var(--gold)}
.band .rubric__n{-webkit-text-stroke-color:var(--gold)}
.price-xl{font-family:var(--font);font-size:2.6rem;font-weight:600;color:#fff;margin-top:1rem}
.price-xl s{font-size:1.05rem;color:rgba(255,255,255,.55);margin-left:.5rem;font-weight:400}
.price-note{font-size:.78rem;color:var(--gold);display:block;margin-top:.2rem}
.feats{display:grid;gap:.7rem;margin:1.3rem 0;list-style:none}
.feats li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem}
.feats .ic{color:var(--gold);flex:0 0 auto;width:1.25rem;height:1.25rem;margin-top:.15rem}
/* estimator / configurator */
.estim{background:var(--paper);position:relative}
.estim::before{content:"";position:absolute;inset:0;background:var(--toile);opacity:.5;pointer-events:none}
.estim__card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 30px 60px -44px rgba(26,23,27,.4);overflow:hidden;display:grid;gap:0}
.estim__body{padding:clamp(1.4rem,4vw,2.6rem)}
.estim__step{margin-bottom:1.6rem}
.estim__step h3{font-size:1.15rem;display:flex;gap:.6rem;align-items:center}
.estim__step h3 i{font-family:var(--font);font-style:normal;width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}
.chip{position:relative;display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:.5rem 1rem;font-size:.84rem;font-weight:500;color:var(--fg);transition:border-color .25s,background .25s,color .25s}
.chip:hover{border-color:var(--blue)}
.chip[aria-pressed="true"],.chip.sel{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .ic{width:1.05rem;height:1.05rem}
.chip__n{min-width:1.2rem;height:1.2rem;padding:0 .3rem;margin-left:.1rem;border-radius:var(--pill);background:var(--blue);color:#fff;font-size:.62rem;font-weight:700;line-height:1;display:none;align-items:center;justify-content:center}
.chip.has .chip__n{display:inline-flex}
.chip.sel .chip__n{background:#fff;color:var(--navy)}
.estim__recap{list-style:none;display:grid;gap:0;margin:.9rem 0 .2rem;max-height:15rem;overflow-y:auto;padding-right:.55rem;scrollbar-width:thin;scrollbar-color:var(--gold) rgba(255,255,255,.14)}
.estim__recap::-webkit-scrollbar{width:5px}
.estim__recap::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}
.estim__recap::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.estim__recap li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.7rem;font-size:.9rem;color:#fff;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.13)}
.estim__recap li i{font-family:var(--font);font-style:normal;font-size:1rem;color:var(--blue-l)}
.estim__recap li em{font-style:normal;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.estim__opts{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:.9rem}
.opt{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .8rem;cursor:pointer;transition:border-color .25s,background .25s}
.opt:hover{border-color:var(--blue)}
.opt input{accent-color:var(--blue);width:1.1rem;height:1.1rem;flex:0 0 auto}
.opt span{font-size:.9rem}
.opt b{margin-left:auto;font-size:.78rem;color:var(--muted);font-weight:500}
@media (min-width:560px){.estim__opts{grid-template-columns:1fr 1fr}}
.estim__aside{background:var(--navy);color:#fff;padding:clamp(1.4rem,4vw,2.4rem);position:relative;overflow:hidden}
.estim__aside::after{content:"";position:absolute;inset:0;background:var(--toile);opacity:.6}
.estim__aside>*{position:relative;z-index:1}
.estim__count{font-family:var(--font);font-size:3.4rem;font-weight:600;line-height:1;color:var(--blue-l)}
.estim__total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.22)}
.estim__total span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.estim__total b{font-family:var(--font-text);font-size:1.7rem;font-weight:400;letter-spacing:.01em;color:var(--blue-l);line-height:1;font-variant-numeric:tabular-nums}
.estim__opts .opt b{font-variant-numeric:tabular-nums}
.estim__sum{color:rgba(255,255,255,.85);font-size:.92rem;margin-top:.7rem;min-height:2.6em}
.estim__aside .btn{margin-top:1.3rem}
@media (min-width:860px){
.estim__card{grid-template-columns:1.5fr 1fr;align-items:start}
.estim__aside{position:sticky;top:calc(var(--headh,70px) + .8rem);max-height:calc(100dvh - var(--headh,70px) - 1.6rem);display:flex;flex-direction:column}
.estim__aside .estim__recap{flex:1 1 auto;min-height:2.5rem;max-height:none}
.estim__aside .btn{flex:0 0 auto;margin-top:1rem}
}
/* quote / founder */
.quote__grid{display:grid;gap:2.2rem;align-items:center}
.quote__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;position:relative}
.quote__media img{width:100%;height:100%;object-fit:cover}
.quote blockquote{font-family:var(--font);font-size:clamp(1.45rem,3vw,2rem);line-height:1.32;color:var(--fg);font-weight:500}
.quote blockquote::first-letter{font-size:2.6em;font-weight:600;float:left;line-height:.7;padding:.04em .1em 0 0;color:var(--blue-h)}
.quote cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-h)}
@media (min-width:880px){.quote__grid{grid-template-columns:.82fr 1.18fr;gap:3rem}}
/* audience quiz profiles */
.profiles{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.2rem}
.profile{display:flex;gap:1rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;transition:border-color .3s,transform .3s,box-shadow .3s;text-align:left}
.profiles .profile:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 22px 44px -34px rgba(26,23,27,.4)}
.profile .ic{color:var(--blue);width:1.9rem;height:1.9rem;flex:0 0 auto}
.profile h3{font-size:1.3rem}
.profile p{font-size:.84rem;color:var(--muted);margin-top:.2rem}
.profile .seemore{font-size:.74rem;color:var(--blue-d);font-weight:600;margin-top:.5rem;display:inline-block}
@media (min-width:680px){.profiles{grid-template-columns:repeat(2,1fr)}}
/* services feature cards (coffrets / cadeaux) */
.fcards{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2.4rem}
.fcard{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.fcards .fcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(26,23,27,.45)}
.fcard__media{aspect-ratio:16/10;overflow:hidden;position:relative}
.fcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.fcard:hover .fcard__media img{transform:scale(1.05)}
.fcard__b{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.fcard__b h3{font-size:1.3rem}
.fcard__b p{font-size:.86rem;color:var(--muted)}
.fcard__b .link{margin-top:auto;align-self:flex-start}
@media (min-width:680px){.fcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.fcards{grid-template-columns:repeat(4,1fr)}}
/* section cadeaux, panneaux qui respirent */
.gift-acc,.gift-panels{margin-top:2.4rem}
.gift-acc{border:1px solid var(--line);background:var(--surface)}
.gift-acc details{border-top:1px solid var(--line)}
.gift-acc details:first-child{border-top:0}
.gift-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.15rem}
.gift-acc summary::-webkit-details-marker{display:none}
.gift-acc .ic,.gpanel .ic{color:var(--gold)}
.gift-acc summary .ic{width:1.5rem;height:1.5rem;flex:0 0 auto}
.gift-acc summary h3{font-size:1.25rem;flex:1}
.gift-acc .chev{width:8px;height:8px;border:1px solid var(--line);transform:rotate(45deg);transition:transform .4s var(--ease),background .3s;flex:0 0 auto}
.gift-acc details[open] .chev{transform:rotate(225deg);background:var(--gold)}
.gift-acc .gbody{padding:0 1.15rem 1.25rem 3.55rem}
.gift-acc .gbody p{font-size:.88rem;color:var(--muted);margin-bottom:.65rem}
.gift-panels{display:none;height:400px;border:1px solid var(--line);background:var(--surface)}
.gpanel{position:relative;z-index:0;flex:1;overflow:hidden;padding:1.6rem 1.3rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;border-left:1px solid var(--line);transition:flex .65s var(--ease),background-color .5s}
.gpanel:first-child{border-left:0}
.gpanel::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--toile);opacity:.32;transition:opacity .5s}
.gpanel::before{content:"";position:absolute;left:50%;top:2.4rem;width:56px;height:56px;border:1px solid rgba(172,152,97,.55);transform:translateX(-50%) rotate(45deg);transition:transform .65s var(--ease),border-color .4s}
.gpanel .ic{position:absolute;left:50%;top:2.4rem;transform:translate(-50%,14px);width:1.7rem;height:1.7rem}
.gpanel .gn{position:absolute;top:.85rem;right:.95rem;font-family:var(--font);font-size:1.5rem;font-weight:500;color:transparent;-webkit-text-stroke:1px rgba(172,152,97,.55);text-stroke:1px rgba(172,152,97,.55);line-height:1}
.gpanel h3{font-size:1.35rem}
.gpanel p{font-size:.85rem;color:var(--muted);max-height:0;opacity:0;transform:translateY(12px);overflow:hidden;transition:max-height .75s var(--ease),opacity .65s var(--ease) .1s,transform .75s var(--ease) .1s}
.gpanel .link{opacity:0;transform:translateY(12px);transition:opacity .65s var(--ease) .24s,transform .75s var(--ease) .24s,color .3s}
.gpanel:hover,.gpanel:focus-within{flex:2.4;background-color:var(--paper)}
.gpanel:hover::after,.gpanel:focus-within::after{opacity:.5}
.gpanel:hover::before,.gpanel:focus-within::before{transform:translateX(-50%) rotate(225deg);border-color:var(--gold)}
.gpanel:hover p,.gpanel:focus-within p{max-height:7em;opacity:1;transform:none}
.gpanel:hover .link,.gpanel:focus-within .link{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine) and (min-width:820px){.gift-acc{display:none}.gift-panels{display:flex}}
/* reviews wall (google placeholder) */
.reviews{background:var(--paper)}
.rev__grid{display:grid;gap:1.8rem;align-items:center}
.rev__summary{text-align:center}
.rev__big{font-family:var(--font);font-size:4rem;font-weight:600;line-height:1;color:var(--fg)}
.rev__big sup{font-size:1.4rem;color:var(--muted)}
.rev__stars{color:var(--gold);font-size:1.2rem;letter-spacing:.1em;margin-top:.3rem}
.rev__note{font-size:.82rem;color:var(--muted);margin-top:.5rem}
.rev__connect{margin-top:1.2rem;border:1px dashed var(--gold);border-radius:var(--radius);padding:1rem;background:var(--surface);font-size:.82rem;color:var(--blue-h);display:flex;gap:.6rem;align-items:flex-start;text-align:left}
.rev__connect .ic{flex:0 0 auto;color:var(--gold);width:1.3rem;height:1.3rem;margin-top:.1rem}
@media (min-width:880px){.rev__grid{grid-template-columns:.8fr 1.2fr}}
/* manifesto full bleed */
.mani{background:var(--navy);color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;min-height:100vh;min-height:100svh;clip-path:inset(0)}
.mani .wrap{width:100%}
.mani__grid{display:grid;align-items:center}
.mani__grid>div{position:relative;z-index:2;max-width:780px;margin-inline:auto;text-align:center}
.mani p.statement{font-family:var(--font);font-size:clamp(1.7rem,3.8vw,2.8rem);line-height:1.32;color:#fff;font-weight:500}
.mani p.statement::before{content:"";display:block;width:2.7rem;height:1.6rem;margin:0 auto 1.4rem;background:var(--couronne) center/contain no-repeat}
.mani cite{display:block;margin-top:1.4rem;font-style:normal;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.mani__media{position:fixed;inset:0;margin:0;z-index:0}
.mani__media video,.mani__media img{width:100%;height:100%;object-fit:cover}
.mani__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(15,13,16,.82),rgba(15,13,16,.52) 55%,rgba(15,13,16,.66))}
.mani__media.frame::after{content:none}
.mani::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.35);z-index:1;pointer-events:none}
.mani__media .cap{z-index:2}
/* carnet / blog */
.arts{display:grid;grid-template-columns:1fr;gap:1.8rem;margin-top:2.4rem}
.art{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.arts .art:hover{transform:translateY(-4px);box-shadow:0 24px 46px -32px rgba(26,23,27,.4)}
.art__media{aspect-ratio:16/10;overflow:hidden}
.art__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.art:hover .art__media img{transform:scale(1.05)}
.art__b{padding:1.1rem 1.2rem 1.3rem}
.art__k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-h);font-weight:600}
.art h3{font-size:1.3rem;margin:.4rem 0 .6rem}
@media (min-width:760px){.arts{grid-template-columns:repeat(3,1fr)}}
/* newsletter */
.nl{background:var(--paper2);position:relative;overflow:hidden}
.nl::before{content:"";position:absolute;inset:0;background:var(--toile);opacity:.35;pointer-events:none}
.nl__in{position:relative;z-index:1;text-align:center;max-width:640px;margin-inline:auto}
.nl form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;justify-content:center}
.nl input{flex:1 1 240px;min-height:48px;padding:.7rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);font:inherit;color:var(--fg);background:var(--surface)}
.nl input:focus-visible{outline:2px solid var(--gold)}
.nl small{display:block;margin-top:.9rem;font-size:.74rem;color:var(--muted)}
/* footer, minimal centré + produits suggérés, fond rosaces (élément graphique) */
.foot{background:var(--navy-d);color:rgba(255,255,255,.72);position:relative;overflow:hidden;text-align:center}
.foot::before{content:"";position:absolute;inset:0;background:var(--toile);background-size:300px 300px;opacity:.5;pointer-events:none}
.foot .wrap{position:relative;z-index:1;padding-block:clamp(3rem,7vw,4.6rem)}
.foot__reco{margin-bottom:2.8rem}
.foot__recot{font-family:var(--font-text);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;gap:.8rem}
.foot__recot::before,.foot__recot::after{content:"";width:30px;height:1px;background:var(--gold);opacity:.55}
.foot__recos{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem 1.4rem}
.freco{display:flex;flex-direction:column;align-items:center;gap:.55rem;width:112px;transition:transform .3s var(--ease)}
.freco:hover{transform:translateY(-4px)}
.freco__img{width:82px;height:82px;border-radius:50%;corner-shape:bevel;overflow:hidden;border:1px solid rgba(172,152,97,.5);background:rgba(255,255,255,.05)}
.freco__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.freco:hover .freco__img{border-color:var(--blue)}
.freco:hover .freco__img img{transform:scale(1.08)}
.freco b{font-family:var(--font);font-size:1.02rem;font-weight:600;color:#fff;line-height:1.12}
.freco small{font-size:.66rem;color:rgba(255,255,255,.55);letter-spacing:.03em}
.foot__crown{height:6.2rem;width:auto;margin:0 auto}
.foot__frise{display:block;width:min(210px,60%);height:22px;margin:1.2rem auto;background:none}
.foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.7rem;margin-bottom:1.4rem}
.foot__nav a{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:rgba(255,255,255,.85);transition:color .3s}
.foot__nav a:hover{color:var(--blue)}
.social{display:flex;gap:.7rem;margin-top:1.1rem}
.foot .social{justify-content:center;margin:0 0 1.5rem}
.social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}
.social a:hover{background:var(--blue);border-color:var(--blue)}
.social .ic{width:1.05rem;height:1.05rem;color:#fff}
.foot__fine{font-size:.74rem;color:rgba(255,255,255,.5);line-height:1.9}
.foot__fine a{color:rgba(255,255,255,.6)}
.foot__fine a:hover{color:#fff}
/* centered hero + full-bleed image band (boutique / carnet / accessoires) */
.heroc{background:linear-gradient(180deg,var(--paper),var(--bg));text-align:center}
.heroc__in{max-width:780px;margin-inline:auto;padding-block:clamp(2.6rem,6vw,4.6rem)}
.heroc h1{font-size:clamp(2.2rem,5.6vw,4rem);margin-top:1rem;line-height:1.02}
.heroc h1 em{font-style:italic;color:var(--blue-h)}
.heroc .lead{margin-inline:auto}
.heroc__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.8rem}
.hband{position:relative;aspect-ratio:3/2;max-height:520px;overflow:hidden}
.hband img{width:100%;height:100%;object-fit:cover}
.hband::after{content:"";position:absolute;inset:13px;border:1px solid rgba(255,255,255,.5);z-index:2;pointer-events:none}
@media (min-width:760px){.hband{aspect-ratio:21/9}}
/* immersive full-bleed hero (image background + overlay) */
.heroim{position:relative;min-height:clamp(520px,82vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.heroim__bg{position:absolute;inset:0;z-index:0}
.heroim__bg img,.heroim__bg video{width:100%;height:100%;object-fit:cover}
.heroim:not(.heroim--home) .heroim__bg img,.heroim:not(.heroim--home) .heroim__bg video{animation:zoom 12s var(--ease) both}
/* fonds multi-couches (un par slide) + zoom lent premium */
.heroim__bgs{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--ease);will-change:opacity}
.heroim__bgs.is-active{opacity:1}
.heroim__bgs.is-active img,.heroim__bgs.is-active video{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1.09)}to{transform:scale(1)}}
.heroim::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(102deg,rgba(26,23,27,.9) 0%,rgba(26,23,27,.6) 44%,rgba(26,23,27,.3) 100%),linear-gradient(0deg,rgba(26,23,27,.72),transparent 42%)}
.heroim__frame{position:absolute;inset:14px;z-index:2;border:1px solid rgba(172,152,97,.55);pointer-events:none}
.heroim--home .heroim__frame{display:none}
.heroim__in{position:relative;z-index:3;color:#fff;max-width:640px;padding-block:clamp(2.6rem,6vw,4.6rem)}
.heroim h1{color:#fff;font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.01;letter-spacing:-.01em}
.heroim h1 em{color:var(--gold);font-style:italic}
.heroim .lead{color:rgba(255,255,255,.9);max-width:46ch}
.heroim .lead em{color:var(--gold);font-style:italic}
.heroim__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
/* héro immersif, accueil */
.heroim--home{flex-direction:column;align-items:center;text-align:center;min-height:clamp(640px,94vh,960px)}
.heroim--home .heroim__bg{top:-70px;bottom:-70px;will-change:transform}
.heroim--home::after{background:linear-gradient(180deg,rgba(15,13,16,.6),rgba(15,13,16,.26) 40%,rgba(15,13,16,.32) 62%,rgba(15,13,16,.78))}
.heroim__in--home{flex:1;max-width:880px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:1rem 1.8rem}
.heroim--home h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.05}
.heroim--home h1 .l1,.heroim--home h1 .l2{display:block}
.heroim--home .hero__sub{color:rgba(255,255,255,.9);font-size:1.02rem;max-width:50ch;margin-top:1.3rem;margin-inline:auto;line-height:1.6}
.heroim--home .hero__sub em{color:var(--gold)}
.heroim--home .heroim__cta{justify-content:center;margin-top:1.6rem;gap:.9rem}
.heroim--home .badge-rate{margin-top:1.7rem}
.heroim__cap{position:absolute;right:1.15rem;bottom:.8rem;z-index:3;margin:0;font-family:var(--font);font-style:italic;font-size:.85rem;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(15,13,16,.7)}
.heroim__scroll{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3;width:1px;height:76px;background:rgba(172,152,97,.35);overflow:hidden}
.heroim__scroll::after{content:"";position:absolute;left:0;top:-46%;width:100%;height:46%;background:var(--gold);animation:cue 2.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{top:-46%}75%,100%{top:104%}}
/* séquence d'ouverture du héro : logo → titre mot à mot → 2 s → sous-titre & CTA */
.heroim__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:min(300px,54vw);height:auto;opacity:0;pointer-events:none;animation:heroLogo 1.15s var(--ease) .05s forwards}
@keyframes heroLogo{0%{opacity:0;transform:translate(-50%,-50%) scale(.97)}24%{opacity:1;transform:translate(-50%,-50%) scale(1)}60%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02);visibility:hidden}}
.heroim--home .heroslides{opacity:0;translate:0 16px;filter:blur(6px);animation:heroRise .65s var(--ease) 1.4s forwards}
.heroim--home .hero-dots{opacity:0;animation:heroFade .6s var(--ease) 1.95s forwards}
.heroim--home .badge-rate{opacity:0;translate:0 16px;filter:blur(6px);animation:heroRise .65s var(--ease) 1.78s forwards}
.heroim--home .heroim__cap,.heroim--home .heroim__scroll{opacity:0;translate:0 12px;filter:blur(5px);animation:heroRise .7s var(--ease) 1.9s forwards}
/* bouton plein écran discret sur la vidéo du manifeste */
.mani__fs{position:absolute;right:1.2rem;bottom:1.2rem;z-index:3;width:36px;height:36px;display:grid;place-items:center;background:rgba(15,13,16,.32);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(172,152,97,.5);color:#fff;cursor:pointer;opacity:.6;transition:opacity .3s,background .3s,border-color .3s}
.mani__fs:hover,.mani__fs:focus-visible{opacity:1;background:rgba(15,13,16,.55);border-color:var(--gold)}
.mani__fs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
/* mobile : cadrer la vidéo sur la théière */
@media (max-width:700px){.heroim--home .heroim__bg img{object-position:60% 50%}}
@keyframes heroWord{to{opacity:1;transform:none;filter:none}}
@keyframes heroRise{to{opacity:1;translate:0 0;filter:none}}
@keyframes heroFade{to{opacity:1}}
/* carrousel du héro */
.heroslides{display:grid;width:100%}
.heroslide{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s}
.heroslide.is-active{opacity:1;visibility:visible}
.heroslide>*{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.heroslide.is-active>*{opacity:1;transform:none;filter:none;transition-delay:.1s}
.heroslide.is-active>*:nth-child(2){transition-delay:.24s}
.heroslide.is-active>*:nth-child(3){transition-delay:.38s}
.heroslide.is-active>*:nth-child(4){transition-delay:.5s}
.hs-title{font-family:var(--font);font-weight:600;font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;color:#fff;letter-spacing:-.01em}
.hs-title em{font-style:italic;color:var(--gold)}
.hero-promo{display:inline-block;font-family:var(--font-text);font-weight:400;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:#fff;background:var(--blue);padding:.4rem .85rem;margin-bottom:1.1rem}
.hero-dots{display:flex;gap:.7rem;justify-content:center;margin-top:1.6rem}
.hero-dots button{width:38px;height:2px;background:rgba(255,255,255,.28);border:0;padding:0;cursor:pointer;position:relative;overflow:hidden;transition:background .3s}
.hero-dots button:hover{background:rgba(255,255,255,.5)}
.hero-dots button::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
.hero-dots button.is-active::after{animation:dotfill 6s linear forwards}
.heroim__in--home:hover .hero-dots button.is-active::after{animation-play-state:paused}
@keyframes dotfill{from{width:0}to{width:100%}}
/* flèches de navigation, discrètes, apparaissent au survol */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;display:grid;place-items:center;background:none;border:0;color:rgba(255,255,255,.65);cursor:pointer;opacity:0;transition:opacity .35s,color .3s,transform .35s var(--ease)}
.heroim--home:hover .hero-arrow{opacity:1}
.hero-arrow:hover{color:var(--blue)}
.hero-arrow--prev{left:clamp(.4rem,3vw,2rem)}
.hero-arrow--next{right:clamp(.4rem,3vw,2rem)}
.hero-arrow--prev:hover{transform:translateY(-50%) translateX(-3px)}
.hero-arrow--next:hover{transform:translateY(-50%) translateX(3px)}
.hero-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.hero-arrow{display:none}}
/* pastilles losange, accès rapides en haut du héro */
.heroim__cats{position:relative;z-index:4;width:100%;margin-top:calc(var(--headh,118px) + .7rem);opacity:0;translate:0 16px;filter:blur(6px);animation:heroRise .65s var(--ease) 1.98s forwards}
.heroim__cats ul{list-style:none;display:flex;gap:clamp(1.8rem,4vw,3.2rem);align-items:flex-start;max-width:var(--maxw);margin-inline:auto;padding:.3rem var(--gut) .5rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.heroim__cats ul::-webkit-scrollbar{display:none}
.heroim__cats li:first-child{margin-left:auto}
.heroim__cats li:last-child{margin-right:auto}
.heroim__cats a{display:grid;gap:.55rem;justify-items:center;text-align:center;scroll-snap-align:center}
.heroim__cats .pill{position:relative;display:block;width:clamp(44px,4.6vw,60px);aspect-ratio:1;border-radius:50%;corner-shape:bevel;overflow:hidden;border:1px solid rgba(255,255,255,.55);transition:border-color .35s}
.heroim__cats .pill img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.heroim__cats .pill::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(15,13,16,0);transition:background .4s;pointer-events:none}
.heroim__cats .pill::after{content:"";position:absolute;inset:16%;z-index:2;border-radius:50%;corner-shape:bevel;border:1px solid var(--line);opacity:0;transform:scale(1.28);pointer-events:none;transition:opacity .4s var(--ease),transform .55s var(--ease)}
.heroim__cats .lb{font-family:var(--font-text);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap;transition:color .3s}
.heroim__cats a:hover .pill,.heroim__cats a:focus-visible .pill{border-color:rgba(255,255,255,.85)}
.heroim__cats a:hover .pill img,.heroim__cats a:focus-visible .pill img{transform:scale(1.09)}
.heroim__cats a:hover .pill::before,.heroim__cats a:focus-visible .pill::before{background:rgba(15,13,16,.32)}
.heroim__cats a:hover .pill::after,.heroim__cats a:focus-visible .pill::after{opacity:1;transform:scale(1)}
.heroim__cats a:hover .lb,.heroim__cats a:focus-visible .lb{color:var(--gold)}
/* filter chips + catalog grids */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.8rem}
.filters .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.famgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 1.1rem;margin-top:2.6rem}
.fam{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center}
.fam__img{width:clamp(78px,21vw,128px);aspect-ratio:1;border-radius:50%;corner-shape:bevel;overflow:hidden;border:1px solid var(--line);outline:0 solid var(--gold);outline-offset:0;transition:transform .4s var(--ease),outline-offset .4s,outline-width .3s}
.fam__img img{width:100%;height:100%;object-fit:cover}
.fam:hover .fam__img{transform:translateY(-5px);outline:1.5px solid var(--blue);outline-offset:5px}
.fam[aria-pressed="true"] .fam__img{outline:1.5px solid var(--blue);outline-offset:5px;transform:translateY(-4px)}
.fam span{font-family:var(--font);font-size:1.12rem;color:var(--fg);transition:color .3s}
.fam[aria-pressed="true"] span{color:var(--blue-d)}
.catlabel{text-align:center;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-h);margin-top:.4rem}
.shopbar{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;justify-content:space-between;margin-bottom:.2rem}
.shopbar .filters{margin-top:0}
.shopbar__count{font-size:.82rem;color:var(--muted);white-space:nowrap}
.shopbar__count b{color:var(--fg);font-weight:600}
.linklike{color:var(--blue-h);border-bottom:1px solid var(--line);cursor:pointer;font:inherit}
.linklike:hover{color:var(--blue-d)}
.filter-empty{margin-top:2rem;text-align:center;color:var(--muted);font-style:italic}
@media (min-width:640px){.famgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1040px){.famgrid{grid-template-columns:repeat(7,1fr);gap:1.2rem}}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.4rem}
@media (min-width:760px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pcard.hide{display:none}
/* ----- boutique filtres v2 : barre déroulante (desktop) / tiroir plein écran (mobile) ----- */
.shopfilters{position:relative}
.mfilter{display:none}
.filterpanel__head,.filterpanel__foot{display:none}
.filterpanel__body{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.ffacet{position:relative}
.ffacet>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);padding:.5rem 1.05rem;font-size:.84rem;white-space:nowrap;transition:border-color .2s,background .2s}
.ffacet>summary::-webkit-details-marker{display:none}
.ffacet>summary:hover,.ffacet[open]>summary{border-color:var(--blue);background:var(--paper)}
.ffacet .chev{width:7px;height:7px;border:1px solid var(--line);border-top:0;border-left:0;transform:rotate(45deg);transition:transform .3s var(--ease)}
.ffacet[open] .chev{transform:rotate(-135deg)}
.ffacet__b{position:absolute;top:calc(100% + .5rem);left:0;z-index:30;width:min(300px,86vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 30px 60px -28px rgba(26,23,27,.5);padding:1.1rem}
.ffacet__b--wide{width:min(340px,90vw)}
.ffacet__b::after{content:"";position:absolute;top:-6px;left:24px;width:11px;height:11px;background:var(--surface);border-top:1px solid var(--line);border-left:1px solid var(--line);transform:rotate(45deg)}
.ffacet__sub{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-h);margin:.9rem 0 .5rem}
.ffacet__sub:first-child{margin-top:0}
.ffacet__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.ffacet__cols{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .8rem}
.filterpanel__sort{margin-left:auto}
.sortsel{position:relative;display:inline-flex;align-items:center}
.sortsel select{appearance:none;-webkit-appearance:none;min-height:42px;padding:.5rem 2.3rem .5rem 1rem;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23AC9861' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right .9rem center;font-size:.82rem;cursor:pointer}
/* sélecteur compact (cartes produit) */
.qsel{position:relative;display:inline-flex;align-items:center}
.qsel select{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23AC9861' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right .7rem center;font:inherit;font-size:.82rem;color:var(--fg);cursor:pointer;padding:.5rem 1.9rem .5rem .8rem}
.qsel select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* stepper quantité (partagé) */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius)}
.qty button{width:34px;height:40px;display:grid;place-items:center;color:var(--navy);font-size:1.1rem;transition:background .2s}
.qty button:hover{background:var(--paper)}
.qty input{width:34px;height:40px;border:0;border-inline:1px solid var(--line);text-align:center;font:inherit;font-weight:500;color:var(--fg);background:none;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* toast partagé */
.toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,20px);z-index:220;background:var(--navy);color:#fff;padding:.75rem 1.3rem;border-radius:var(--pill);font-size:.82rem;box-shadow:0 20px 44px -20px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s,transform .35s var(--ease);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* carte produit : favori + ajout rapide */
.pcard__fav{position:absolute;top:.55rem;right:.55rem;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.pcard__fav svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.4}
.pcard__fav:hover{border-color:var(--blue);color:var(--blue-d)}
.pcard__fav.on{color:var(--blue-d);border-color:var(--blue);background:#fff}
.pcard__fav.on svg{fill:var(--blue);stroke:var(--blue)}
.pcard__n a{color:inherit}
.pcard__n a:hover{color:var(--blue-h)}
.pcard__buy{margin-top:.7rem;display:grid;gap:.45rem}
.pcard__buyrow{display:flex;gap:.4rem}
.pcard__buyrow .qty{flex:0 0 auto}
.pcard__buyrow .qty button{width:30px;height:38px;font-size:1rem}
.pcard__buyrow .qty input{width:28px;height:38px}
.pcard__buyrow .btn{flex:1 1 auto;margin:0;min-height:38px;padding-inline:.5rem;font-size:.68rem;letter-spacing:.06em;white-space:nowrap}
.pcard__buy .qsel select{min-height:38px;padding-block:.35rem}
.chk{display:flex;align-items:center;gap:.7rem;padding:.34rem 0;cursor:pointer;font-size:.9rem}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk .box{width:18px;height:18px;flex:0 0 auto;border:1px solid var(--line);border-radius:2px;display:grid;place-items:center;transition:border-color .2s,background .2s}
.chk .box svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none;opacity:0;transition:opacity .15s}
.chk input:checked+.box{background:var(--gold);border-color:var(--gold)}
.chk input:checked+.box svg{opacity:1}
.chk .n{flex:1}
.chk:hover .box{border-color:var(--gold)}
.chk input:focus-visible+.box{outline:2px solid var(--gold);outline-offset:2px}
.range{margin:.2rem 0}
.range__vals{display:flex;justify-content:space-between;font-size:.82rem;font-variant-numeric:tabular-nums;margin-bottom:.5rem}
.range__wrap{position:relative;height:26px}
.range__track{position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);background:var(--paper2);border-radius:var(--pill)}
.range__fill{position:absolute;top:50%;height:3px;transform:translateY(-50%);background:var(--gold);border-radius:var(--pill)}
.range input[type=range]{position:absolute;top:0;left:0;width:100%;height:26px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer}
.range input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid var(--line);cursor:pointer}
.ratef{display:flex;gap:.3rem;align-items:center}
.ratef button{font-size:1.2rem;color:var(--line);transition:color .2s}
.ratef button.on{color:var(--gold)}
.ratef .lbl{font-size:.78rem;color:var(--muted);margin-left:.4rem}
.activebar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.1rem}
.activebar:empty{display:none}
.achip{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line);color:var(--blue-h);border-radius:var(--pill);padding:.28rem .35rem .28rem .8rem;font-size:.78rem}
.achip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--blue-h);font-size:1rem;line-height:1;transition:background .2s}
.achip button:hover{background:var(--paper2)}
.shopcount{font-size:.84rem;color:var(--muted);margin-top:.9rem}
.shopcount b{color:var(--fg);font-weight:600}
.shop .pgrid{margin-top:1.2rem}
@media(max-width:899px){
.mfilter{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:var(--radius);padding:.85rem 1.2rem;font-size:.92rem;font-weight:600;letter-spacing:.02em}
.mfilter .ic{width:1.2rem;height:1.2rem}
.mfilter__n{min-width:19px;height:19px;padding:0 .3rem;border-radius:var(--pill);background:var(--gold);color:#fff;font-size:.62rem;font-weight:700;display:grid;place-items:center}
.filterpanel{position:fixed;inset:0;z-index:200;background:var(--surface);transform:translateY(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;visibility:hidden}
.filterpanel.open{transform:none;visibility:visible}
.filterpanel__head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--line);flex:0 0 auto}
.filterpanel__head b{font-family:var(--font);font-size:1.35rem;font-weight:600}
.filterpanel__head button{color:var(--navy)}
.filterpanel__body{flex:1 1 auto;overflow-y:auto;flex-direction:column;align-items:stretch;gap:0}
.ffacet{position:static;border-top:1px solid var(--line)}
.ffacet:first-child{border-top:0}
.ffacet>summary{border:0;border-radius:0;background:none;justify-content:space-between;width:100%;padding:1.05rem 1.2rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}
.ffacet>summary:hover,.ffacet[open]>summary{background:none}
.ffacet__b,.ffacet__b--wide{position:static;width:auto;box-shadow:none;border:0;border-radius:0;padding:0 1.2rem 1.1rem}
.ffacet__b::after{display:none}
.filterpanel__sort{margin:0;order:-1;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.filterpanel__sort select{width:100%}
.filterpanel__foot{display:flex;flex:0 0 auto;gap:.7rem;padding:.9rem 1.2rem;border-top:1px solid var(--line)}
.filterpanel__foot .btn{flex:1;margin:0}
}
/* guarantees banner */
.guar__grid{display:grid;gap:1.3rem;margin-top:2.2rem}
.guar__i{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem}
.guar__i .ic{color:var(--blue);width:1.8rem;height:1.8rem;flex:0 0 auto;stroke-width:.7}
.guar__i b{font-family:var(--font);font-size:1.22rem;display:block;line-height:1.1}
.guar__i p{font-size:.86rem;color:var(--muted);margin-top:.25rem}
@media (min-width:760px){.guar__grid{grid-template-columns:repeat(3,1fr)}}
/* cta banner */
.ctab{background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden}
.ctab::after{content:"";position:absolute;inset:0;background:var(--toile);opacity:.6;pointer-events:none}
.ctab .wrap{position:relative;z-index:1;max-width:740px}
.ctab h2{color:#fff}
.ctab h2 em{color:var(--gold)}
.ctab p{color:rgba(255,255,255,.84);margin-top:.7rem}
.ctab__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.7rem}
/* exclusivités small list inside split */
.xlist{list-style:none;display:grid;gap:.9rem;margin-top:1.3rem}
.xlist li{display:flex;gap:.7rem;align-items:flex-start;font-size:.96rem}
.xlist .ic{color:var(--gold);flex:0 0 auto;width:1.3rem;height:1.3rem;margin-top:.15rem}
/* reveal + motion */
.reveal{opacity:0;transform:translateY(34px) scale(.985);filter:blur(4px);transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal .h2{clip-path:inset(-10% -4% 108% -4%);transition:clip-path .95s var(--ease) .1s}
.reveal.in .h2{clip-path:inset(-10% -4% -16% -4%)}
.stagger>*{opacity:0;transform:translateY(30px) scale(.99);filter:blur(3px);transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
.stagger.in>*{opacity:1;transform:none;filter:none}
.stagger.in>*:nth-child(2){transition-delay:.1s}
.stagger.in>*:nth-child(3){transition-delay:.2s}
.stagger.in>*:nth-child(4){transition-delay:.3s}
.stagger.in>*:nth-child(5){transition-delay:.4s}
.stagger.in>*:nth-child(6){transition-delay:.5s}
.stagger.in>*:nth-child(7){transition-delay:.6s}
.stagger.in>*:nth-child(8){transition-delay:.7s}
/* image settle inside reveals */
.reveal .split__media img,.reveal .mani__media img,.reveal .quote__media img,.reveal .fcard__media img,.reveal .art__media img{transform:scale(1.1);transition:transform 1.2s var(--ease)}
.reveal.in .split__media img,.reveal.in .mani__media img,.reveal.in .quote__media img,.reveal.in .fcard__media img,.reveal.in .art__media img{transform:scale(1)}
/* parallaxe interne des images éditoriales (translate piloté au scroll) */
.split__media img,.mani__media img,.quote__media img,.hband img{scale:1.12;will-change:translate}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.reveal,.stagger>*{opacity:1!important;transform:none!important;filter:none!important}
.hero__pic img,.heroim__bg img,.heroim__bg video{animation:none;opacity:1;transform:none}
.hero h1 .l1,.hero h1 .l2{transform:none!important}
.steam{display:none}
.ruban__track{animation:none}
.trust{overflow-x:auto}
.heroim__logo{display:none}
.heroim__cats{animation:none;opacity:1;translate:none;filter:none}
.heroim--home .heroslides,.heroim--home .hero-dots,.heroim--home .badge-rate,.heroim--home .heroim__cap,.heroim--home .heroim__scroll{animation:none;opacity:1;transform:none;translate:none;filter:none}
.heroslide{transition:none}
.heroslide>*{opacity:1;transform:none;filter:none;transition:none}
.heroim__bgs{transition:none}
.heroim__bgs.is-active img,.heroim__bgs.is-active video{animation:none}
.hero-dots button.is-active{background:var(--gold)}
.hero-dots button.is-active::after{animation:none;width:0}
.btn::after{opacity:1;transform:none;transition:none}
}
/* ----- TYPOGRAPHIE : serif réservé aux titres de héro, titres de section & dénominations d'articles ; tout le reste en sans-serif fin ----- */
.heroim h1,.hero h1,.heroc h1,.h2,.hgroup .ghost,.art h3,.fcard__b h3,.gpanel h3,.gift-acc summary h3,.profile h3{font-family:var(--font);font-weight:600}
.rubric__n,.lettrine::first-letter,.cap,.sommaire a i,.badge-rate small,.ruban__it b,.price-xl,.price-xl s,.estim__step h3 i,.estim__recap li i,.estim__count,.quote blockquote,.quote blockquote::first-letter,.gpanel .gn,.rev__big,.rev__big sup,.mani p.statement,.foot__big a,.heroim__cap,.guar__i b{font-family:var(--font-text)}
.quote blockquote,.mani p.statement{font-weight:400;letter-spacing:.005em}
.price-xl,.rev__big,.estim__count,.foot__big a{font-weight:400}
.quote blockquote::first-letter,.lettrine::first-letter{font-weight:400}
.ruban__it b,.guar__i b{font-weight:400}
/* ----- portrait d'Eliane en deux calques : le trait d'abord, la couleur apparaît (dossier images/conseils d'eliane) ----- */
.elifx{position:relative;display:block;width:100%;aspect-ratio:924/989;overflow:hidden;background:var(--paper)}
.elifx .elifx__inf,.elifx .elifx__supp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.elifx .elifx__supp{opacity:0;transform:scale(1.035);transition:opacity 1.2s var(--ease) .2s,transform 1.2s var(--ease) .2s}
.elifx.on .elifx__supp{opacity:1;transform:none}
.elifx--pastille{width:132px;height:132px;aspect-ratio:1;border-radius:50%;border:2px solid var(--gold)}
@media (prefers-reduced-motion:reduce){.elifx .elifx__supp{opacity:1;transform:none;transition:none}}
/* ----- footer v2 : convivial et orienté conversion, fond pattern losange-feuille (nouvelle DA) ----- */
.foot2{background:#FBFAF7;border-top:1px solid var(--line);color:var(--fg);text-align:left}
.foot2__nl{background:var(--paper);border-bottom:1px solid var(--line)}
.foot2__nlin{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:1.5rem}
.foot2__nlt{font-family:var(--font);font-size:1.45rem;font-weight:600;line-height:1.15}
.foot2__nls{color:var(--muted);font-size:.9rem;max-width:52ch;margin-top:.25rem}
.foot2__nls b{color:var(--fg)}
.foot2__form{display:flex;gap:.5rem;flex:1 1 340px;max-width:460px}
.foot2__form input{flex:1;min-width:0;min-height:48px;border:1px solid var(--line);background:#fff;padding:0 1rem;font:inherit;font-size:.9rem}
.foot2__form input:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.foot2__mid{display:grid;gap:2rem;padding-block:2.4rem 2rem}
@media(min-width:860px){.foot2__mid{grid-template-columns:1.25fr .8fr .8fr 1.1fr}}
.foot2__logo{width:84px;height:84px;margin-bottom:.8rem}
.foot2__shop p{font-size:.88rem;line-height:1.7;color:var(--muted);margin-bottom:.6rem}
.foot2__shop b{color:var(--fg)}
.foot2__shop a{color:var(--blue-h);font-weight:600}
.foot2__hi{font-family:var(--font);font-style:italic;color:var(--blue-h)!important;font-size:.95rem!important}
.foot2 h3{font-family:var(--font-text);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-h);margin-bottom:.7rem}
.foot2 h3::after{content:"";display:block;width:28px;height:2px;border-radius:2px;margin-top:.35rem;background:var(--blue)}
.foot2 nav a{display:block;padding:.22rem 0;font-size:.9rem;color:var(--fg)}
.foot2 nav a:hover{color:var(--blue-h)}
.foot2__trust ul{list-style:none;display:grid;gap:.45rem;font-size:.86rem}
.foot2__trust li{display:flex;gap:.5rem;align-items:flex-start}
.foot2__trust svg{width:1.15rem;height:1.15rem;flex:0 0 auto;fill:none;stroke:var(--blue-d);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem}
.foot2 .social{display:flex;gap:.6rem;margin-top:1rem}
.foot2 .social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--fg);background:#fff;transition:border-color .2s,color .2s}
.foot2 .social a:hover{border-color:var(--blue);color:var(--blue-h)}
.foot2 .social .ic{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.foot2__fine{border-top:1px solid var(--line);background:rgba(255,255,255,.72)}
.foot2__fine .wrap{padding-block:.9rem;font-size:.76rem;color:var(--muted);display:flex;gap:.4rem 1.4rem;flex-wrap:wrap;justify-content:space-between}
.foot2__fine a{color:var(--muted)}
.foot2__fine a:hover{color:var(--blue-h)}
/* ================= V2 APPLIQUÉE (maquettes validées 2026-07-09) ================= */
/* ---- header v2 : logo + recherche + icônes, barre catégories permanente + mega-menu ---- */
.head3{position:relative;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.head3 .hd__top{display:flex;align-items:center;gap:1.4rem;padding:.8rem clamp(1rem,3vw,2rem);max-width:1240px;margin-inline:auto}
.head3 .hd__logo{height:44px;width:auto;flex:0 0 auto}
.head3 .hd__search{flex:1;display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:var(--pill);padding:.55rem 1.1rem;color:var(--muted);font-size:.88rem;max-width:460px;background:#fff;cursor:pointer;transition:border-color .2s}
.head3 .hd__search:hover{border-color:var(--blue-d)}
.head3 .hd__search svg{width:1.1rem;height:1.1rem;fill:none;stroke:var(--blue-d);stroke-width:1.4;stroke-linecap:round;flex:0 0 auto}
.head3 .hd__ics{display:flex;gap:1.2rem;margin-left:auto}
.head3 .hd__ic{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.58rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--fg);background:none;border:0;cursor:pointer;position:relative}
.head3 .hd__ic svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.head3 .hd__ic:hover{color:var(--blue-h)}
.head3 .catnav{display:flex;justify-content:center;gap:.2rem;border-top:1px solid var(--line);padding:0 1rem;flex-wrap:wrap;list-style:none;margin:0}
.head3 .catnav>li{position:relative}
.head3 .catnav>li>a{display:block;padding:.85rem 1.05rem;font-size:.88rem;font-weight:500;color:var(--fg);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.head3 .catnav>li>a:hover,.head3 .catnav>li:hover>a,.head3 .catnav>li>a[aria-current="page"]{color:var(--blue-h);border-color:var(--blue-d)}
.head3 .catnav .new{font-size:.55rem;font-weight:700;color:#fff;background:var(--blue);border-radius:var(--pill);padding:.1rem .4rem;vertical-align:middle;margin-left:.3rem}
.mega2{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:min(880px,92vw);background:#fff;border:1px solid var(--line);box-shadow:0 40px 70px -35px rgba(26,23,27,.5);display:none;grid-template-columns:1fr 1fr 1fr 240px;z-index:90}
.head3 .catnav>li:hover .mega2,.head3 .catnav>li:focus-within .mega2{display:grid}
.mega2 section{padding:1.3rem 1.4rem;border-right:1px solid var(--line)}
.mega2 h3{font-family:var(--font-text);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-h);margin-bottom:.7rem}
.mega2 h3::after{content:"";display:block;width:28px;height:2px;border-radius:2px;margin-top:.4rem;background:var(--blue)}
.mega2 a{display:block;padding:.32rem 0;font-size:.88rem;color:var(--fg)}
.mega2 a:hover{color:var(--blue-h)}
.mega2 a small{color:var(--muted);font-size:.75rem}
.mega2 .vis{padding:0;border-right:0;position:relative;overflow:hidden;display:block}
.mega2 .vis img{width:100%;height:100%;object-fit:cover}
.mega2 .vis span{position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .9rem;background:linear-gradient(transparent,rgba(15,13,16,.82));color:#fff;font-family:var(--font);font-size:1.05rem}
@media(max-width:700px){.head3 .hd__search{display:none}.head3 .catnav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.head3 .catnav::-webkit-scrollbar{display:none}.mega2{display:none!important}}
/* ---- sections v2 partagées ---- */
.sech{display:flex;align-items:end;gap:1rem;margin-bottom:1.2rem}
.sech h2{font-family:var(--font);font-weight:600;font-size:clamp(1.45rem,3vw,2rem);line-height:1.12;flex:1}
.sech h2 em{font-style:normal;color:var(--blue-d)}
.sech h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;margin-top:.5rem;background:var(--blue)}
.sech .lk{font-size:.85rem;font-weight:600;color:var(--blue-h);border-bottom:1px solid currentColor;white-space:nowrap}
.bhero{padding:.6rem 0 1.2rem}
.bhero h1{font-family:var(--font);font-weight:600;font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.06}
.bhero h1 em{font-style:normal;color:var(--blue-d)}
.bhero p{color:var(--muted);max-width:62ch;margin-top:.45rem}
.bhero p b{color:var(--fg)}
.hero2{position:relative;display:grid;overflow:hidden;color:#fff;min-height:440px}
.hero2>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero2::before{content:"";position:absolute;inset:0;background:linear-gradient(75deg,rgba(15,13,16,.82) 20%,rgba(15,13,16,.25) 65%)}
.hero2__in{position:relative;align-self:center;padding:2.6rem clamp(1.2rem,4vw,3rem);max-width:640px}
.hero2__cap{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.hero2 h1{font-family:var(--font);font-weight:600;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.08;margin:.5rem 0 .7rem;color:#fff}
.hero2 h1 em{font-style:normal;color:#7fcdec}
.hero2 p{color:rgba(255,255,255,.88);max-width:46ch}
.hero2__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.hero2__gg{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;font-size:.8rem;color:rgba(255,255,255,.85)}
.hero2__gg b{color:var(--gold);letter-spacing:.1em}
.bens{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;border-block:1px solid var(--line);padding-block:1.3rem;list-style:none}
@media(min-width:860px){.bens{grid-template-columns:repeat(4,1fr)}}
.ben{display:flex;gap:.8rem;align-items:center}
.ben .d{width:40px;height:40px;transform:rotate(45deg);border:1px solid var(--blue-d);display:grid;place-items:center;flex:0 0 auto;margin:6px 10px 6px 6px;background:#fff}
.ben svg{transform:rotate(-45deg);width:1.2rem;height:1.2rem;fill:none;stroke:var(--blue-d);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ben b{display:block;font-size:.85rem;line-height:1.25}
.ben small{color:var(--muted);font-size:.75rem}
.cats2{display:flex;gap:1.5rem;list-style:none;padding:.4rem;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;margin:0}
.cats2::-webkit-scrollbar{display:none}
.cats2 li{flex:0 0 auto;scroll-snap-align:start}
.cats2 a{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:92px}
.cats2 .lz{width:60px;height:60px;transform:rotate(45deg);overflow:hidden;border:1px solid var(--line);display:grid;place-items:center;margin:13px;transition:transform .25s}
.cats2 a:hover .lz{transform:rotate(45deg) translate(-2px,-2px);outline:1px solid var(--blue);outline-offset:4px}
.cats2 .lz img{width:150%;height:150%;max-width:none;object-fit:cover;transform:rotate(-45deg)}
.cats2 b{font-size:.75rem;font-weight:600;text-align:center;line-height:1.25}
.cats2 .on .lz{outline:1px solid var(--blue-d);outline-offset:4px}
.cats2 .on b{color:var(--blue-h)}
.rays{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.4rem 0 .4rem}
@media(min-width:900px){.rays{grid-template-columns:repeat(4,1fr)}}
.ray{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;color:#fff;border:1px solid var(--line)}
.ray img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ray:hover img{transform:scale(1.05)}
.ray::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,16,.02) 35%,rgba(15,13,16,.78))}
.ray>span{position:relative;padding:1rem 1rem 1.1rem}
.ray h3{font-family:var(--font);font-size:1.3rem;font-weight:600;line-height:1.15;color:#fff}
.ray small{display:block;font-size:.76rem;color:rgba(255,255,255,.85);margin:.15rem 0 .7rem}
.pill2{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:var(--fg);border-radius:var(--pill);padding:.55rem 1.15rem;font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;transition:background .2s,color .2s}
.pill2 svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ray:hover .pill2,.tile2:hover .pill2,.off:hover .pill2{background:var(--blue-d);color:#fff}
.offres{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.2rem 0 .4rem}
@media(min-width:860px){.offres{grid-template-columns:repeat(3,1fr)}}
.off{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:300px;color:#fff;border:1px solid var(--line)}
.off img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.off::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,16,.62) 0%,rgba(15,13,16,.1) 45%,rgba(15,13,16,.55))}
.off>span{position:relative;padding:1.1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.off h3{font-family:var(--font);font-size:1.4rem;font-weight:600;line-height:1.15;color:#fff}
.off .pct{display:inline-block;align-self:flex-start;font-size:.76rem;font-weight:800;background:#fff;color:var(--blue-h);border-radius:4px;padding:.14rem .45rem;margin:.45rem 0 .2rem}
.off p{font-size:.85rem;color:rgba(255,255,255,.92);max-width:34ch}
.off .pill2{margin-top:auto;align-self:flex-start}
.fbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-block:1px solid var(--line);padding:.6rem 0;margin-bottom:1.2rem}
.fchip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:var(--pill);background:#fff;padding:.45rem .95rem;font-size:.82rem;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s}
.fchip:hover{border-color:var(--blue-d)}
.fchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.fchip .cv,.fsort .cv{width:7px;height:7px;border:1.4px solid var(--blue-d);border-top:0;border-left:0;transform:rotate(45deg);margin-top:-3px}
.fchip.on .cv{border-color:#fff}
.fcount{font-size:.78rem;color:var(--muted);margin-left:.3rem}
.fsort{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted)}
.fsort b{color:var(--fg);font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.pc{position:relative;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s;cursor:pointer;font-size:.82rem}
.pc:hover,.pc:focus-within{border-color:var(--blue);box-shadow:0 22px 44px -28px rgba(26,23,27,.5)}
.pc .im{position:relative;display:block;overflow:hidden}
.pc img{aspect-ratio:1/1;width:100%;object-fit:cover;object-position:top;background:var(--paper)}
.pc .im>img{transition:opacity .55s var(--ease),transform .9s var(--ease)}
.pc:hover .im>img:not(.im2),.pc:focus-within .im>img:not(.im2){transform:scale(1.06)}
.pc .im2{position:absolute;inset:0;height:100%;opacity:0;transform:scale(1.05);z-index:1}
.pc:hover .im2,.pc:focus-within .im2{opacity:1;transform:none}
.pc:hover .im:has(.im2)>img:not(.im2),.pc:focus-within .im:has(.im2)>img:not(.im2){opacity:0}
.pc .disc2{position:absolute;left:50%;bottom:.7rem;z-index:2;transform:translate(-50%,14px);opacity:0;display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.95);color:var(--ink);border-radius:var(--pill);padding:.5rem 1rem;font-weight:600;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 14px 30px -14px rgba(15,13,16,.5);transition:opacity .3s,transform .35s var(--ease);white-space:nowrap;pointer-events:none}
.pc .disc2 svg{width:.75rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pc:hover .disc2,.pc:focus-within .disc2{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.pc:hover .im>img,.pc:focus-within .im>img{transform:none}.pc .im2{transform:none}}
.pc .bdg{position:absolute;top:.55rem;left:.55rem;z-index:2;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.tag2{font-size:.62rem;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--blue);padding:.2rem .55rem;border-radius:var(--pill)}
.tag2--b{background:var(--blue-d)}
.pfav{position:absolute;top:.5rem;right:.5rem;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
.pfav svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.4}
.pfav:hover{border-color:var(--blue);color:var(--blue-h)}
.pfav.on{color:var(--blue-d);border-color:var(--blue)}
.pfav.on svg{fill:var(--blue);stroke:var(--blue)}
.pc .loupe2{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,13,16,0);opacity:0;transition:opacity .25s,background .25s;z-index:1}
.pc .loupe2 svg{width:42px;height:42px;padding:10px;border-radius:50%;background:var(--blue-d);fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;box-shadow:0 10px 24px -10px rgba(2,79,112,.7)}
.pc:hover .loupe2{opacity:1;background:rgba(15,13,16,.14)}
.pc .bd{padding:.7rem .8rem .8rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.pc .fam2{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-h)}
.pc h3{font-family:var(--font);font-size:1.08rem;font-weight:600;line-height:1.15}
.pc .no{font-size:.78rem;color:var(--muted)}
.pc .rt{font-size:.72rem;color:var(--gold)}
.pc .rt small{color:var(--muted);font-size:.72rem;margin-left:.25rem}
.pc .px{margin-top:.25rem;font-weight:600}
.pc .px small{color:var(--muted);font-weight:400;font-size:.74rem;margin-left:.3rem}
.pc .qk{margin-top:auto;padding-top:.5rem}
.pc .qk button{width:100%;min-height:40px;border:1px solid var(--blue-d);color:var(--blue-h);font-weight:600;font-size:.8rem;background:#fff;cursor:pointer;transition:background .2s}
.pc .qk button:hover{background:var(--blue-tint)}
.tile2{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;min-height:100%;border:1px solid var(--line)}
.tile2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile2::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,16,.05) 30%,rgba(15,13,16,.86))}
.tile2>span{position:relative;padding:1.1rem 1rem 1.2rem;display:block}
.tile2 .cap2{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.tile2 h3{font-family:var(--font);font-size:1.35rem;font-weight:600;line-height:1.15;margin:.3rem 0 .55rem;color:#fff}
.hesit{display:flex;align-items:center;gap:1.1rem;border:1px solid var(--line);background:var(--paper);padding:1rem 1.2rem;margin:1.6rem 0;flex-wrap:wrap}
.hesit svg{width:2.1rem;height:2.1rem;flex:0 0 auto;fill:none;stroke:var(--blue-d);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.hesit p{flex:1;min-width:240px;font-size:.92rem;color:var(--muted)}
.hesit p b{color:var(--fg)}
.more{text-align:center;margin:1.8rem 0 2.4rem}
.more .mbtn{min-height:48px;padding:.8rem 2.2rem;border:1px solid var(--fg);font-weight:600;font-size:.92rem;background:none;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.more .mbtn:hover{border-color:var(--blue-d);color:var(--blue-h);background:var(--blue-tint)}
.more p{font-size:.78rem;color:var(--muted);margin-top:.6rem}
.more .prog{display:block;width:180px;height:2px;background:var(--line);margin:.5rem auto 0;position:relative}
.more .prog::after{content:"";position:absolute;inset:0 auto 0 0;width:38%;background:var(--blue-d)}
.seo2{border-top:1px solid var(--line);margin-top:1rem;padding:2.6rem 0 1rem}
.rub2{display:flex;align-items:center;gap:.9rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-h)}
.rub2 i{font-family:var(--font);font-style:normal;font-size:2rem;font-weight:500;color:transparent;-webkit-text-stroke:1px var(--gold);line-height:1}
.seo2 h2{font-family:var(--font);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.12;margin:.5rem 0 .3rem;max-width:24ch}
.seo2 h2 em{font-style:italic;color:var(--blue-h)}
.frise2{display:block;width:44px;height:3px;border-radius:2px;background:var(--blue);margin:.4rem 0 1.1rem}
.seo2 p{color:var(--muted);max-width:70ch}
.seo2 p b{color:var(--fg)}
.seo3{display:grid;gap:1.6rem;margin:1.4rem 0 .6rem}
@media(min-width:760px){.seo3{grid-template-columns:repeat(3,1fr)}}
.seocard{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.seocard .lz{width:58px;height:58px;transform:rotate(45deg);overflow:hidden;border:1px solid var(--line);display:grid;place-items:center;margin:12px 12px 16px}
.seocard .lz img{width:150%;height:150%;max-width:none;object-fit:cover;transform:rotate(-45deg)}
.seocard h3{font-family:var(--font);font-size:1.15rem;font-weight:600}
.seocard p{font-size:.9rem}
.seocard a{font-size:.8rem;font-weight:600;color:var(--blue-h);border-bottom:1px solid currentColor}
.seoduo{display:grid;gap:1.8rem;align-items:center;background:#FBFAF7;border-block:1px solid var(--line);margin:2.2rem calc(-1*var(--gut)) 0;padding:2.2rem var(--gut)}
@media(min-width:860px){.seoduo{grid-template-columns:1.05fr .95fr}}
.smeds{display:flex;gap:.6rem;list-style:none;margin-top:1.1rem;max-width:430px}
.smed{display:flex;flex-direction:column;align-items:center;gap:.55rem;flex:1}
.smed .d{width:42px;height:42px;transform:rotate(45deg);border:1px solid var(--blue-d);display:grid;place-items:center;background:#fff;margin:7px}
.smed svg{transform:rotate(-45deg);width:1.25rem;height:1.25rem;fill:none;stroke:var(--blue-d);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.smed b{font-size:.78rem;font-weight:600;white-space:nowrap}
.seoduo .ph{position:relative}
.seoduo .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.seoduo .ph::after{content:"";position:absolute;inset:9px;border:1px solid rgba(172,152,97,.55);pointer-events:none}
.faq2{margin-top:2.2rem;border-top:1px solid var(--line)}
.faq2 details{border-bottom:1px solid var(--line)}
.faq2 summary{list-style:none;display:flex;align-items:center;gap:.8rem;padding:.85rem .1rem;cursor:pointer;font-weight:600;font-size:.95rem}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary .cv{margin-left:auto;width:8px;height:8px;border:1.5px solid var(--blue-d);border-top:0;border-left:0;transform:rotate(45deg);transition:transform .3s;flex:0 0 auto}
.faq2 details[open] summary .cv{transform:rotate(-135deg)}
.faq2 .a{padding:0 .1rem 1rem;color:var(--muted);font-size:.9rem;max-width:75ch}
.rowp{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:860px){.rowp{grid-template-columns:repeat(4,1fr)}}
.pack{display:grid;border:1px solid var(--line);overflow:hidden}
@media(min-width:860px){.pack{grid-template-columns:1.05fr .95fr}}
.pack__ph{position:relative;min-height:280px}
.pack__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pack__ph .tag2{position:absolute;top:.9rem;left:.9rem;background:var(--blue)}
.pack__bd{padding:1.6rem clamp(1.2rem,3vw,2rem);background:#FBFAF7}
.pack__bd h3{font-family:var(--font);font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:600;line-height:1.15}
.pack__bd h3 em{font-style:italic;color:var(--blue-h)}
.pack__list{list-style:none;display:grid;gap:.4rem;margin:1rem 0;font-size:.9rem}
.pack__list li{display:flex;gap:.55rem;align-items:baseline}
.pack__list i{font-style:normal;color:var(--blue-d);font-weight:700;font-size:.75rem}
.pack__px{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem}
.pack__px .now{font-size:1.7rem;font-weight:600}
.pack__px s{color:var(--muted)}
.pack__px .eco{font-size:.7rem;font-weight:700;color:#fff;background:var(--blue);border-radius:var(--pill);padding:.2rem .6rem}
.maison2{display:grid;gap:1.8rem;align-items:center;background:var(--paper);border-block:1px solid var(--line);margin-inline:calc(-1*var(--gut));padding:2.4rem var(--gut)}
@media(min-width:880px){.maison2{grid-template-columns:.9fr 1.1fr}}
.maison2 .elifx{max-width:400px;border:1px solid var(--line);margin-inline:auto}
.maison2 .cap2m{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-h)}
.maison2 h2{font-family:var(--font);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.1;margin:.4rem 0 .2rem}
.maison2 h2 em{font-style:italic;color:var(--blue-h)}
.maison2 p{color:var(--muted);max-width:56ch;margin-bottom:.8rem}
.maison2 p b{color:var(--fg)}
.maison2 blockquote{font-family:var(--font);font-style:italic;font-size:1.15rem;color:var(--fg);border-left:2px solid var(--gold);padding-left:1rem;margin:1.1rem 0}
.quiz2{border:1px solid var(--line);padding:1.5rem clamp(1.2rem,3vw,2rem);display:grid;gap:1.2rem}
@media(min-width:860px){.quiz2{grid-template-columns:1fr auto;align-items:center}}
.quiz2 h3{font-family:var(--font);font-size:1.5rem;font-weight:600}
.quiz2>div>p{color:var(--muted);font-size:.92rem;margin-top:.25rem}
.quiz2__chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.qchip{border:1px solid var(--line);border-radius:var(--pill);padding:.45rem 1rem;font-size:.84rem;font-weight:500;background:#fff;cursor:pointer}
.qchip:hover{border-color:var(--blue-d);color:var(--blue-h);background:var(--blue-tint)}
.carnet2{display:grid;gap:1rem}
@media(min-width:860px){.carnet2{grid-template-columns:repeat(3,1fr)}}
.art2{border:1px solid var(--line);display:flex;flex-direction:column;background:#fff;transition:border-color .25s,transform .25s}
.art2:hover{border-color:var(--blue);transform:translateY(-3px)}
.art2>img{aspect-ratio:16/10;object-fit:cover}
.art2 .bd{padding:.9rem 1rem 1.1rem;display:block}
.art2 .k{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-h)}
.art2 h3{font-family:var(--font);font-size:1.12rem;font-weight:600;margin:.3rem 0 .35rem;line-height:1.2}
.art2 .bd>p{font-size:.98rem;color:var(--muted)}
.art2 .pp{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;font-size:.78rem;color:var(--fg);border-top:1px dashed var(--line);padding-top:.6rem}
.art2 .pp img{width:34px;height:34px;aspect-ratio:1;border:1px solid var(--line)}
.art2 .pp b{flex:1}
.art2 .pp span{color:var(--blue-h);font-weight:600}
.avis2{display:grid;gap:1rem}
@media(min-width:860px){.avis2{grid-template-columns:repeat(3,1fr)}}
.avi{border:1px solid var(--line);background:#fff;padding:1rem 1.1rem}
.avi .st2{color:var(--gold);font-size:.85rem}
.avi p{font-size:.9rem;margin:.4rem 0 .5rem}
.avi footer{font-size:.75rem;color:var(--muted)}
.gband{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:1.1rem;font-size:.85rem;color:var(--muted)}
.gband b{color:var(--fg)}
.presse{text-align:center;font-family:var(--font);font-style:italic;color:var(--blue-h);font-size:1.05rem;margin-top:1.6rem}
.secv{padding-block:2rem}
/* ----- composez votre coffret (accueil, retour de la section, v2) ----- */
.compo{display:grid;gap:1.6rem;border:1px solid var(--line);background:#FBFAF7;padding:1.8rem clamp(1.2rem,3vw,2rem)}
@media(min-width:900px){.compo{grid-template-columns:.9fr 1.1fr;align-items:start}}
.compo h3{font-family:var(--font);font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:600;line-height:1.15}
.compo h3 em{font-style:italic;color:var(--blue-h)}
.compo .steps2{list-style:none;display:grid;gap:.45rem;margin:1rem 0;font-size:.92rem;color:var(--muted)}
.compo .steps2 li{display:flex;gap:.55rem}
.compo .steps2 i{font-style:normal;font-weight:700;color:var(--blue-d);font-size:.78rem}
.compo__tot{display:flex;align-items:baseline;gap:.7rem;margin:.6rem 0 1rem;font-size:.95rem}
.compo__tot b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.cpicks{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:640px){.cpicks{grid-template-columns:repeat(4,1fr)}}
.cpick{position:relative;border:1px solid var(--line);background:#fff;padding:.6rem .5rem .7rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.78rem;cursor:pointer;text-align:center;transition:border-color .2s,box-shadow .2s}
.cpick img{width:74px;height:74px;object-fit:cover;border-radius:50%;border:1px solid var(--line)}
.cpick b{font-weight:600;line-height:1.2}
.cpick small{color:var(--muted)}
.cpick::after{content:"";position:absolute;top:.45rem;right:.45rem;width:20px;height:20px;border:1px solid var(--line);border-radius:50%;background:#fff}
.cpick.on{border-color:var(--blue-d);box-shadow:inset 0 0 0 1px var(--blue-d)}
.cpick.on::after{background:var(--blue-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--blue-d)}
/* ---- V2.1 : rythme visuel, feuille partout, header scroll montant, mega recentré ---- */
.secv--creme,.secv--bleu{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);padding-block:2.6rem}
.secv--creme{background:var(--paper);border-block:1px solid var(--line)}
.secv--bleu{background:var(--blue-tint);border-block:1px solid #CFE8F5}
.secv--creme+.secv--creme,.secv--bleu+.secv--bleu{border-top:0}
main{overflow-x:clip}
.pc .qk button,.more .mbtn,.go{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.pc .qk button::after,.more .mbtn::after,.go::after,.pill2::after{content:"";width:22px;height:10px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat;opacity:0;transform:translateY(-11px) rotate(-22deg);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.pc .qk button:hover::after,.pc .qk button:focus-visible::after,.more .mbtn:hover::after,.more .mbtn:focus-visible::after,.go:hover::after,.go:focus-visible::after,.pill2:hover::after,.ray:hover .pill2::after,.ray:focus-within .pill2::after,.tile2:hover .pill2::after,.tile2:focus-within .pill2::after,.off:hover .pill2::after,.off:focus-within .pill2::after{opacity:1;transform:none}
.pc .qk button:active::after,.go:active::after,.more .mbtn:active::after{opacity:1;transform:translateY(2px) rotate(6deg)}
.pc .px::after{content:"";display:inline-block;width:20px;height:9px;margin-left:.45rem;vertical-align:middle;background:var(--gold);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat;opacity:0;transform:translateY(-9px) rotate(-22deg);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.pc:hover .px::after,.pc:focus-within .px::after{opacity:1;transform:none}
.head3 .catnav>li{position:static}
.mega2{width:min(1100px,96vw)}
html.h3fix .head3{position:fixed;top:0;left:0;right:0;z-index:120;transform:translateY(-112%);transition:transform .38s var(--ease)}
html.h3fix body{padding-top:var(--h3h,118px)}
html.h3fix.h3show .head3{transform:none;box-shadow:0 18px 40px -32px rgba(26,23,27,.45)}
.fnav,.fbar{transition:top .3s var(--ease)}
html.h3fix.h3show .fnav{top:var(--h3h,118px)}
html.h3fix.h3show .fbar{top:var(--h3h,118px)}
@media (prefers-reduced-motion:reduce){.pc .px::after{transform:none}}
/* ---- V2.2 : prix en majesté, feuille joueuse, fond gris des grilles, ajout rapide voile/tiroir ---- */
.secv--gris{background:#F2F2F0;border-block:1px solid var(--line);margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);padding-block:2.6rem}
.pc .px{margin-top:.3rem;font-family:var(--font);font-size:1.24rem;font-weight:600;line-height:1.1}
.pc .px small{font-family:var(--font-text);font-size:.72rem}
@keyframes leafpose{0%{opacity:0;transform:translate(8px,-16px) rotate(-40deg)}55%{opacity:1;transform:translate(-2px,2px) rotate(9deg)}100%{opacity:1;transform:none}}
.pc .px::after{width:24px;height:11px}
.pc:hover .px::after,.pc:focus-within .px::after{animation:leafpose .65s var(--ease) both}
.pc .disc2::before{content:"";width:18px;height:8px;flex:0 0 auto;background:var(--gold);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
.pc .im::after{content:"";position:absolute;right:10px;bottom:12px;width:58px;height:26px;background:var(--gold);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat;opacity:0;transform:translate(14px,12px) rotate(-20deg);transition:opacity .5s,transform .7s var(--ease);z-index:1;pointer-events:none}
.pc:hover .im::after,.pc:focus-within .im::after{opacity:.55;transform:none}
.qkb{position:fixed;inset:0;z-index:290;background:rgba(15,13,16,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.qkp{background:#fff;font-size:.8rem;text-align:left;cursor:default}
.qkp__in{padding:.85rem .85rem .95rem;display:flex;flex-direction:column;gap:.6rem}
.qkp__h{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.qkp__h b{font-family:var(--font);font-size:1rem}
.qkp__x{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:#fff;display:grid;place-items:center;cursor:pointer;font-size:.8rem;line-height:1}
.qkp__x:hover{border-color:var(--blue-d);color:var(--blue-h)}
.qkf{display:flex;flex-direction:column;gap:.35rem}
.fchp{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;padding:.5rem .65rem;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;font-size:.78rem;font-weight:500;transition:border-color .15s,background .15s}
.fchp span{font-weight:600;white-space:nowrap}
.fchp s{color:var(--muted);font-weight:400;margin-right:.3rem}
.fchp:hover{border-color:var(--blue-d)}
.fchp.on{border-color:var(--blue-d);background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--blue-d)}
.fchp .pm{font-size:.6rem;font-weight:700;color:#fff;background:var(--blue);border-radius:var(--pill);padding:.08rem .4rem;margin-left:.3rem}
.qkfix{display:flex;align-items:center;justify-content:space-between;padding:.5rem .65rem;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:.78rem}
.qkeco{font-size:.72rem;font-weight:600;color:var(--blue-h);display:none}
.qkeco.on{display:block}
.qkrow{display:flex;gap:.5rem;align-items:stretch}
.qkq{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;flex:0 0 auto}
.qkq button{width:34px;min-height:40px;background:#fff;border:0;font-size:1rem;cursor:pointer;color:var(--blue-h);border-radius:9px}
.qkq button:hover{background:var(--blue-tint)}
.qkq b{min-width:26px;text-align:center;font-size:.85rem}
.qkadd{flex:1;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--blue-d);border:1px solid var(--blue-d);color:#fff;font-weight:600;font-size:.8rem;cursor:pointer;border-radius:9px;white-space:nowrap}
.qkadd:hover{background:var(--blue-h)}
.qkadd::after{content:"";width:22px;height:10px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat;opacity:0;transform:translateY(-11px) rotate(-22deg);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.qkadd:hover::after{opacity:1;transform:none}
@media(min-width:861px){
.pc .qkp{position:absolute;inset:0;z-index:6;background:rgba(255,255,255,.97);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .35s var(--ease);display:flex;flex-direction:column;justify-content:flex-end}
.pc.open .qkp{opacity:1;pointer-events:auto;transform:none}
.qkp__p{display:none}
.qkb{display:none}
}
@media(max-width:860px){
.pc .qkp{position:fixed;left:50%;bottom:0;z-index:300;width:min(480px,100vw);transform:translate(-50%,105%);border-radius:16px 16px 0 0;box-shadow:0 -24px 60px rgba(15,13,16,.35);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
.pc .qkp::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--line);margin:.6rem auto 0}
.pc.open .qkb{opacity:1;pointer-events:auto}
.pc.open .qkp{transform:translate(-50%,0);visibility:visible;transition:transform .4s var(--ease)}
.qkp__in{padding:1rem 1.1rem 1.2rem;gap:.7rem}
.qkp__h span{display:none}
.qkp__p{display:flex;gap:.7rem;align-items:center}
.qkp__p img{width:52px;height:52px;object-fit:cover;border:1px solid var(--line);flex:0 0 auto}
.qkp__p .t b{font-family:var(--font);font-size:1.05rem;display:block}
.qkp__p .t small{color:var(--muted)}
.fchp{min-height:44px}
.qkq button{min-height:44px;width:40px}
.qkadd{min-height:44px}
}
.toastm{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,140%);z-index:400;background:var(--fg);color:#fff;font-size:.85rem;padding:.7rem 1.2rem;border-radius:var(--pill);transition:transform .35s var(--ease);max-width:92vw;text-align:center}
.toastm.on{transform:translate(-50%,0)}
/* ---- V2.3 : composeur v1 restauré, bleu clair retiré des fonds ---- */
.estim .sech{position:relative;z-index:1}
.estim__aside h3{font-family:var(--font);font-size:1.5rem;font-weight:600;margin-bottom:.8rem}
.estim__nb{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.6rem}
.estim__aside .btn{background:var(--blue);border-color:var(--blue);color:#fff;width:100%}
.estim__aside .btn:hover,.estim__aside .btn:focus-visible{background:var(--blue-h);border-color:var(--blue-h)}
/* ---- V3 CHARTE VALIDÉE : épure + frises dorées, parallaxe, apparitions, feuille filigrane, CTA rectangles, bleu logo ---- */
.wrap3{max-width:1240px;margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.rub3{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-h);display:block}
.st3{font-family:var(--font);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.14;margin-top:.35rem}
.st3 em{font-style:normal;color:var(--blue-d)}
.st3 em.hl{color:var(--blue);position:relative;display:inline-block;padding:.08em .42em;margin-inline:.04em;z-index:0}
.st3 em.hl::before{content:"";position:absolute;inset:0;background:#fff;border-radius:999px;z-index:-1}
.sec3:not([class*="secv--"]) .st3 em.hl{color:#fff}
.sec3:not([class*="secv--"]) .st3 em.hl::before{background:var(--blue)}
.secv--bleu .st3 em.hl{color:var(--fg)}
.sud3{color:var(--muted);font-size:.98rem;margin-top:.5rem;max-width:60ch}
.sud3 b,.sud3 strong{color:var(--fg);font-weight:600}
.filet3{display:block;width:44px;height:3px;border-radius:2px;background:var(--blue);margin-top:.8rem}
.ent3{margin-bottom:1.4rem}
.ent3--c{text-align:center}
.ent3--c .sud3{margin-inline:auto}
.ent3--c .filet3{margin-inline:auto;background-position:center}
.ent3--row{display:flex;align-items:end;justify-content:space-between;gap:1rem}
.ent3 .lk3{font-size:.85rem;font-weight:600;color:var(--blue-h);border-bottom:1px solid currentColor;white-space:nowrap}
.sec3{padding-block:3rem}
.sep3{height:2px;border:0;background:var(--blue-tint);max-width:160px;margin:0 auto;border-radius:2px}
.sep3 i{display:none}
/* fond de section image immersive, parallaxe */
.parax{position:relative;color:#fff;background-position:center;background-size:cover;background-attachment:fixed}
.parax::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,16,.78) 25%,rgba(15,13,16,.38))}
.parax>*{position:relative}
@supports (-webkit-touch-callout:none){.parax{background-attachment:scroll}}
.parax .rub3{color:var(--blue-l)}
.parax .st3{color:#fff}
.parax .st3 em{color:var(--blue-l)}
.parax .sud3{color:rgba(255,255,255,.86)}
/* apparitions au scroll */
html.rvon .rv,html.rvon .rvg>*{opacity:0;translate:0 26px;transition:opacity .7s var(--ease),translate .8s var(--ease)}
html.rvon .rv.on,html.rvon .rvg>*.on{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){html.rvon .rv,html.rvon .rvg>*{opacity:1!important;translate:none!important;transition:none!important}}
/* feuille en filigrane : plus d'espace réservé, le texte reste centré */
.btn,.pc .qk button,.more .mbtn,.go,.pill2,.qkadd{position:relative;overflow:hidden;isolation:isolate}
.btn::after,.pc .qk button::after,.more .mbtn::after,.go::after,.pill2::after,.qkadd::after{position:absolute;left:50%;top:50%;margin:-16px 0 0 -34px;width:68px;height:32px;flex:none;z-index:-1;opacity:0;transform:translateY(-12px) rotate(-24deg)}
.btn:hover::after,.btn:focus-visible::after,.pc .qk button:hover::after,.pc .qk button:focus-visible::after,.more .mbtn:hover::after,.more .mbtn:focus-visible::after,.go:hover::after,.go:focus-visible::after,.pill2:hover::after,.ray:hover .pill2::after,.ray:focus-within .pill2::after,.tile2:hover .pill2::after,.tile2:focus-within .pill2::after,.off:hover .pill2::after,.off:focus-within .pill2::after,.qkadd:hover::after,.qkadd:focus-visible::after{opacity:.32;transform:none}
.btn:active::after,.pc .qk button:active::after,.go:active::after,.qkadd:active::after{opacity:.32;transform:translateY(2px) rotate(6deg)}
/* CTA rectangles, sans arrondis */
.qkadd,.qkq,.qkq button,.pc .disc2,.pill2{border-radius:0}
/* le bleu visible = le bleu du logo, pas d'autre nuance en aplat */
.btn:hover,.btn:focus-visible{background:var(--blue);border-color:var(--blue)}
.btn--blue,.qkadd,.go{background:var(--blue);border-color:var(--blue)}
.btn--blue:hover,.btn--blue:focus-visible,.qkadd:hover,.go:hover{background:var(--blue-d);border-color:var(--blue-d)}
.pc .qk button{border-color:var(--blue)}
.fchp.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.fchp:hover{border-color:var(--blue)}
.tag2--b{background:var(--blue)}
.head3 .hd__search svg{stroke:var(--blue)}
.head3 .catnav>li>a:hover,.head3 .catnav>li:hover>a,.head3 .catnav>li>a[aria-current="page"]{border-color:var(--blue)}
/* section conseils d'Eliane */
.eline3{display:grid;gap:1.8rem;align-items:center}
@media(min-width:880px){.eline3{grid-template-columns:.75fr 1.25fr}}
.eline3 .elifx{max-width:360px;margin-inline:auto;width:100%}
.eline3 ul{list-style:none;margin:1rem 0 1.3rem;display:grid;gap:.5rem;color:var(--muted);font-size:.92rem;padding:0}
.eline3 li{display:flex;gap:.6rem;align-items:baseline}
.eline3 li::before{content:"";width:16px;height:8px;flex:0 0 auto;background:var(--gold);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
/* ---- V3.1 : carrousel mobile pour les sections a cartes sur une ligne ---- */
@media(max-width:760px){
.mcar{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;scrollbar-width:none;padding-bottom:.5rem;margin-inline:-1rem;padding-inline:1rem}
.mcar::-webkit-scrollbar{display:none}
.mcar>*{flex:0 0 74%;max-width:330px;scroll-snap-align:start}
.mcar .band3{flex:0 0 88%;max-width:none}
}
/* ---- V3.3 : composeur sous la DA v3 + padding bords ---- */
.estim.secv--creme{padding-inline:clamp(1rem,4vw,2.5rem)}
.estim__wrap{position:relative;max-width:1240px;margin-inline:auto}
.estim{background:#FBFAF7}
.estim::before{background:none;opacity:1}
.estim__aside::after{background:none;opacity:.12}
.chip:hover{border-color:var(--blue)}
.chip[aria-pressed="true"],.chip.sel{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.sel .chip__n{background:#fff;color:var(--blue-h)}
.opt:hover{border-color:var(--blue)}
.estim__card{border-color:var(--gold)}
/* ---- V4 : Outfit partout en titres et boutons, bleu en majesté (or = frise, étoiles, feuille) ---- */
:root{--blue-l:#8ED3F2}
h1,h2,h3,.st3,.sech h2,.pc .px{letter-spacing:-.01em}
.btn,.qkadd,.go,.pc .qk button,.more .mbtn,.pill2,.pc .disc2,.qkp__h b,.fchp{font-family:var(--font)}
/* ---- V5 : formes arrondies façon Kusmi (moins vieillot), mêmes couleurs + bleu logo ---- */
:root{--r:16px;--r-s:12px}
.pc{border-radius:var(--r);overflow:hidden}
.new3 a,.coll3 a,.ray,.off,.tile2,.band3,.hs,.art2,.quiz3,.nl3,.avi3,.avi,.how3 .c,.vu3,.q3it,.hesit,.side3,.estim__card,.eline3 .elifx,.compo,.cpick,.pack,.band2,.xcard,.pcarte,.acc2,.elifx--pastille{border-radius:var(--r)}
.art2,.eline3 .elifx,.acc2,.band2{overflow:hidden}
.fchp,.qkfix,.opt,.f3g label input,.bar3 select,.fsort b,.qmini select{border-radius:var(--r-s)}
.btn,.qkadd,.go,.pc .qk button,.more .mbtn,.mfil3 button,.qkq,.qkq button,.qchip,.q3c,.mbtn{border-radius:999px}
.pc .disc2,.pill2{border-radius:var(--pill)}
.nl3 input,.foot2__form input,.foot2__form button{border-radius:999px}
.hero3__in .btn,.storyv .btn,.parax .btn{border-radius:999px}
.qkp{border-radius:var(--r)}
@media(max-width:860px){.pc .qkp{border-radius:16px 16px 0 0}}
/* préparation standardisée (façon Palais des Thés) : 4 repères + version glacée */
.prep3{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 1rem;max-width:640px}
@media(min-width:700px){.prep3{grid-template-columns:repeat(4,1fr)}}
.prep3 .m{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center}
.prep3 .d{width:72px;height:72px;transform:rotate(45deg);border:1px solid var(--blue);display:grid;place-items:center;margin:13px;background:#fff;border-radius:14px}
.prep3 .d b{transform:rotate(-45deg);font-family:var(--font);font-size:.95rem;color:var(--blue-h);white-space:nowrap}
.prep3 .l{font-size:.82rem;font-weight:600}
.prep3 small{color:var(--muted);font-size:.72rem;margin-top:-.4rem}
.prep3__ice{margin-top:1.1rem;padding:.7rem .9rem;background:var(--blue-tint);border-radius:var(--r-s);font-size:.85rem;color:var(--fg)}
.prep3__ice b{color:var(--blue-h)}
/* section abonnement box */
.boxab__in{position:relative;padding:clamp(3rem,7vw,4.6rem) clamp(1.2rem,4vw,3rem);max-width:1080px;margin-inline:auto}
.boxab__pts{list-style:none;margin:1rem 0 0;display:grid;gap:.5rem;color:rgba(255,255,255,.92);font-size:.92rem;padding:0}
.boxab__pts li{display:flex;gap:.6rem;align-items:baseline}
.boxab__pts li::before{content:"";width:16px;height:8px;flex:0 0 auto;background:var(--gold);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
/* ---- V6 : zéro doré (accents = famille du bleu logo), sur-titres retirés, rangée familles ---- */
:root{--gold:#0497D3;--gold-ink:#0378A8}
.rub3{display:none!important}
.famx{display:flex;gap:.6rem;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:.2rem .2rem .6rem;margin-bottom:1.4rem}
.famx::-webkit-scrollbar{display:none}
@media(min-width:1100px){.famx{justify-content:center}}
.famx__c{display:inline-flex;align-items:center;gap:.6rem;flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:#fff;padding:.35rem 1.15rem .35rem .4rem;font-weight:600;font-size:.88rem;font-family:var(--font);cursor:pointer;transition:border-color .25s,background .25s,color .25s,transform .25s var(--ease)}
.famx__c img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.famx__c:hover{border-color:var(--blue);transform:translateY(-2px)}
.famx__c.on{background:var(--blue);border-color:var(--blue);color:#fff}
.famx__c:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* ---- V6.1 : carrousel bouclable une ligne + collections texte hors photo ---- */
.carx{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;scrollbar-width:none;padding-bottom:.4rem}
.carx::-webkit-scrollbar{display:none}
.carx>*{flex:0 0 min(300px,74vw);scroll-snap-align:start}
.carnav{display:flex;gap:.5rem;justify-content:flex-end;margin:-.4rem 0 .9rem}
.cbt{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:1.25rem;line-height:1;color:var(--blue-h);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.cbt:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.collx{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:900px){.collx{grid-template-columns:repeat(5,1fr)}}
.colx{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.colx:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(26,23,27,.45)}
.colx .ph{overflow:hidden}
.colx .ph img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:transform .5s var(--ease)}
.colx:hover .ph img{transform:scale(1.04)}
.colx .bd{padding:.8rem .9rem 1rem;display:grid;gap:.15rem}
.colx b{font-family:var(--font);font-size:1.05rem;line-height:1.2}
.colx small{color:var(--muted);font-size:.8rem}
.colx .lnk{margin-top:.4rem;font-size:.82rem;font-weight:600;color:var(--blue-h)}
/* ---- V6.2 : description sensorielle sous le CTA + bouton La lueur (choix client) ---- */
.pdesc2{margin-top:.9rem;color:var(--muted);font-size:.93rem;line-height:1.6;max-width:54ch}
.btn,.qkadd,.go{transition:transform .3s var(--ease),box-shadow .35s,background .3s,border-color .3s,color .3s}
.btn--blue,.qkadd,.go{background:linear-gradient(135deg,var(--blue),var(--blue-d));border-color:transparent}
.btn--blue:hover,.btn--blue:focus-visible,.qkadd:hover,.qkadd:focus-visible,.go:hover,.go:focus-visible{background:linear-gradient(135deg,var(--blue),var(--blue-d));border-color:transparent;transform:translateY(-2px) scale(1.02);box-shadow:0 14px 30px -10px rgba(4,151,211,.55)}
.btn--blue:active,.qkadd:active,.go:active{transform:translateY(0) scale(.98);box-shadow:0 6px 14px -8px rgba(4,151,211,.5)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 30px -12px rgba(4,151,211,.45)}
.btn:active{transform:translateY(0) scale(.98)}
.pc .qk button:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn--blue:hover,.qkadd:hover,.go:hover{transform:none}}
/* ---- V7 : correctif panneaux familles, centrage vidéo, arrondis restants, accordéons texte, composeur cadeau ---- */
.carx[hidden]{display:none!important}
:root{--blue-l:var(--blue)}
.storyv__in{margin-inline:auto;text-align:center}
.storyv p{margin-inline:auto}
.mega2{border-radius:0 0 18px 18px;overflow:hidden}
.estim__count{font-family:var(--font)}
.estim__total b{font-family:var(--font);font-weight:600}
.txa p{color:var(--muted);max-width:62ch}
.txa ul{list-style:none;display:grid;gap:.5rem;margin-top:.7rem;padding:0}
.txa li{display:flex;gap:.6rem;align-items:baseline;font-size:.92rem;color:var(--fg)}
.txa li::before{content:"";width:15px;height:7px;flex:0 0 auto;background:var(--blue);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
.ecrins{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.9rem}
.ecr{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1 1 130px;max-width:180px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:.8rem .6rem .7rem;cursor:pointer;font-size:.78rem;text-align:center;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.ecr img{width:74px;height:74px;object-fit:contain}
.ecr b{font-family:var(--font);font-size:.92rem;line-height:1.2}
.ecr small{color:var(--muted)}
.ecr:hover{border-color:var(--blue);transform:translateY(-2px)}
.ecr.on{border-color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue);background:var(--blue-tint)}
.estim__gift{margin-top:.9rem;font-size:.8rem;color:rgba(255,255,255,.85);display:flex;gap:.5rem;align-items:baseline}
.estim__gift::before{content:"";width:15px;height:7px;background:var(--blue);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat;flex:0 0 auto}
.opt input:disabled{opacity:.4}
/* ---- V7.1 : familles boutique en pastilles, récemment vus en cartes, avis en carrousel auto ---- */
.vusx{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:900px){.vusx{grid-template-columns:repeat(4,1fr)}}
.avisx{display:flex;overflow-x:auto;gap:1rem;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem}
.avisx::-webkit-scrollbar{display:none}
.avisx>*{flex:0 0 min(380px,80vw);scroll-snap-align:start}
.carnav--c{justify-content:center;margin-top:.8rem}
/* ---- V7.2 : bannières arrondies et insérées, hero centré, montée de texte ---- */
.hero3,.parax,.storyv,.gift3,.boxab,.ch3{margin-inline:clamp(.6rem,1.5vw,1.4rem);border-radius:24px;overflow:hidden}
.storyv{clip-path:inset(0 round 24px)}
.hero3{text-align:center}
.hero3__in{margin-inline:auto}
.hero3 p{margin-inline:auto}
.hero3__cta{justify-content:center}
.hero3::before{background:linear-gradient(180deg,rgba(248,246,240,.28),rgba(248,246,240,.05))}
/* images des cartes de carrousels : suivent l'arrondi */
.xcard img,.pcarte img{border-radius:var(--r) var(--r) 0 0}
/* fnav fiche : une ligne défilable en mobile */
.fnav{overflow-x:auto;scrollbar-width:none}
.fnav::-webkit-scrollbar{display:none}
.fnav a{white-space:nowrap;flex:0 0 auto}
/* montée de texte des titres */
html.rvon .st3,html.rvon .hero3 h1{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .85s var(--ease)}
html.rvon .st3.on,html.rvon .hero3 h1.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.rvon .st3,html.rvon .hero3 h1{opacity:1!important;transform:none!important;transition:none!important}}
/* ---- V7.3 : anti-blowout des grilles (les scrollers internes ne dictent plus la largeur) ---- */
.pdpgrid>*,.shop3>*,.quiz3>*,.eline3>*,.estim__card>*{min-width:0}
/* ---- V7.4 : vidéo/parallaxe sans arrondi, padding minimum des sections pleines, filtres partagés, bords de cartes gris ---- */
.hero3,.parax,.storyv,.gift3,.boxab{margin-inline:0;border-radius:0}
.storyv{clip-path:inset(0)}
.secv--creme,.secv--gris,.secv--bleu{padding-inline:max(calc(50vw - 50%),clamp(1rem,3vw,2rem))}
@media(max-width:760px){.famx{margin-inline:-1rem;padding-inline:1rem}}
.pc,.xcard,.pcarte{border-color:#E4E4E3}
/* filtres et disposition partagés boutique/catégorie */
.shop3{display:grid;gap:1.6rem;align-items:start}
@media(min-width:961px){.shop3{grid-template-columns:250px 1fr}}
.shop3>*{min-width:0}
.side3{border:1px solid var(--line);background:#fff;border-radius:16px;padding:1.1rem 1.2rem;position:sticky;top:1rem;display:grid;gap:1.1rem}
@media(max-width:960px){.side3{display:none}}
.side3 h3{font-family:var(--font);font-size:1.05rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.side3 h3 small{font-size:.72rem;color:var(--blue-h);font-weight:600;cursor:pointer}
.f3g{border-top:1px solid var(--line);padding-top:.9rem}
.f3g>b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-h);margin-bottom:.55rem}
.f3g label{display:flex;align-items:center;gap:.55rem;font-size:.85rem;padding:.22rem 0;cursor:pointer;color:var(--fg)}
.f3g input[type=checkbox]{width:1.05rem;height:1.05rem;accent-color:var(--blue)}
.f3g label small{margin-left:auto;color:var(--muted);font-size:.72rem}
.f3rng{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted)}
.f3rng input{width:100%;accent-color:var(--blue)}
.mfil3{display:none;margin-bottom:1rem}
@media(max-width:960px){.mfil3{display:flex;gap:.6rem}}
.mfil3 button{flex:1;min-height:46px;border:1px solid var(--fg);border-radius:999px;background:#fff;font-weight:600;font-size:.88rem;font-family:var(--font);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
/* hero vidéo */
.hero3>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ---- prix en Outfit bold partout ---- */
.pc .px,.price,.price b,.price .p,.qkfix b,.estim__total b,.gift3__prod b span,.cmp3 b,.colx b{font-family:var(--font);font-weight:700}
.qkadd{font-weight:700}
.price .now{font-weight:700}
/* ---- cartes très arrondies (50px) : insets ajustés pour la courbe ---- */
:root{--r:50px}
.pc .bdg{top:1.05rem;left:1.15rem}
.pfav{top:.95rem;right:.95rem}
.pc .bd{padding:.85rem 1.35rem 1.15rem}
.colx .bd{padding:.85rem 1.25rem 1.1rem}
.qkp__in{padding:.85rem 1.25rem 1.1rem}
.pc .no{display:none}
/* ---- carnet : insight à la place du produit ; cœur voyant ; feuilles noires sur cartes ---- */
.art2 .ins{margin-top:auto;padding-top:.75rem;border-top:1px dashed var(--line);display:flex;gap:.6rem;align-items:baseline;font-size:.85rem;color:var(--fg);font-weight:500}
.art2 .ins::before{content:"";width:16px;height:8px;flex:0 0 auto;background:var(--blue);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
.pfav{transition:border-color .2s,color .2s,background .2s,transform .2s var(--ease)}
.pfav:hover,.pfav:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.12)}
.pfav:hover svg,.pfav:focus-visible svg{stroke:#fff}
.pc .px::after,.pc .disc2::before,.pc .im::after{background:var(--fg)}
/* ---- surlignage mots-clefs : pastille parallélogramme arrondie aussi sur le titre du composeur ---- */
.sech h2{font-family:var(--font);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.14}
.sech h2 em{font-style:normal;color:var(--blue-d)}
.estim__nb{font-family:var(--font);font-weight:600}
/* ---- conseils d'Eliane v2 : miroir de la Box (texte gauche / sticker Eliane droite) + pattern gris perle ---- */
.consel,.estim#composer{background-image:url("../img/pattern-perle.svg");background-size:420px 360px}
.consel__in{display:grid;gap:1.2rem;align-items:end}
@media(min-width:860px){.consel__in{grid-template-columns:minmax(0,600px) auto;justify-content:center;gap:clamp(2rem,4.5vw,4.5rem)}}
.consel__ph{align-self:end;text-align:center}
.consel__ph img{display:block;margin-inline:auto;width:clamp(260px,32vw,430px);height:auto;filter:drop-shadow(0 24px 40px rgba(26,23,27,.16))}
.consel__ct{align-self:center;padding-bottom:2.4rem}
.consel__card{background:#fff;border-radius:26px;padding:1.4rem clamp(1.2rem,2.5vw,2rem);margin-top:.9rem;box-shadow:0 14px 34px rgba(26,23,27,.07);max-width:560px}
.consel__card ul{list-style:none;display:grid;gap:.65rem;margin:0;padding:0}
.consel__card li{position:relative;padding-left:1.9rem;font-size:.98rem;color:var(--muted)}
.consel__card li b{color:var(--fg);font-weight:600}
.consel__card li::before{content:"";position:absolute;left:0;top:.42em;width:20px;height:10px;background:var(--blue);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
.consel__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
@media(max-width:859px){.consel__ph{order:2;margin-top:.4rem}.consel__ph img{width:min(72%,340px)}.consel__ct{order:1;padding-bottom:0}}
/* ---- collections v2 : cartes photo verticales (logo ou titre feuille), CTA pilule blanche ---- */
.colvx{display:grid;gap:1rem;grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.colvx{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-1rem;padding-inline:1rem}.colvx::-webkit-scrollbar{display:none}.colvx .colv{flex:0 0 62%;max-width:250px;scroll-snap-align:start}}
.colv{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:5/8;border-radius:var(--r);overflow:hidden;color:#fff;text-align:center;padding:1rem 1rem 6rem}
.colv>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.colv::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:1}
.colv>*{position:relative;z-index:2}
.colv:hover>img.bg,.colv:focus-visible>img.bg{transform:scale(1.06)}
.colv .lg{width:74%;max-height:120px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.colv .lg--rond{width:58%;max-height:160px}
.colv .tt{font-family:var(--font);font-weight:700;font-size:1.3rem;line-height:1.15;display:grid;justify-items:center;gap:.5rem;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.colv .tt::before{content:"";width:26px;height:13px;background:#fff;-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
.colv .sub{position:absolute;left:1rem;right:1rem;bottom:4.6rem;z-index:2;font-size:.95rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.colv .go{position:absolute;left:1.15rem;right:1.15rem;bottom:1.15rem;z-index:2;background:#fff;color:var(--fg);font-family:var(--font);font-weight:700;font-size:.95rem;padding:.68rem 1rem;border-radius:999px;transition:background .2s,color .2s}
.colv:hover .go,.colv:focus-visible .go{background:var(--blue);color:#fff}
/* ---- harmonisation typo : mêmes tailles pour paragraphes et puces sur tout le site ---- */
main p{font-size:.98rem;line-height:1.65}
main li{font-size:.98rem}
.hero3 p,.hsl3__s p{font-size:1.02rem;line-height:1.55}
.art2 p,.art2 .ins{font-size:.98rem}
/* ---- composeur : sélection d'écrin gris très clair (plus de bleu) + pattern sur le récapitulatif ---- */
.ecr:hover{border-color:#D5D5D3}
.ecr.on{border-color:#DCDCDA;box-shadow:inset 0 0 0 1.5px #DCDCDA;background:#F6F6F5}
.estim__aside::after{background:url("../img/pattern-nuit.svg") 0 0/420px 360px repeat;opacity:1}
.estim__card{border-color:#E4E4E3}
/* ---- écrins mobile : sélecteur déroulant, même esprit que le tiroir d'ajout rapide ---- */
.ecrsel{display:none}
@media(max-width:859px){
.ecrsel{display:flex;align-items:center;gap:.7rem;width:100%;margin-top:.9rem;border:1px solid var(--line);border-radius:16px;background:#fff;padding:.55rem .9rem;cursor:pointer;text-align:left;font:inherit}
.ecrsel img{width:44px;height:44px;object-fit:contain}
.ecrsel span{flex:1;display:grid;gap:.1rem;min-width:0}
.ecrsel b{font-family:var(--font);font-weight:700;font-size:.95rem;line-height:1.2}
.ecrsel small{color:var(--muted);font-size:.78rem}
.ecrsel i{font-style:normal;color:var(--muted);transition:transform .2s var(--ease)}
.ecrsel[aria-expanded="true"] i{transform:rotate(180deg)}
.ecrins{display:none}
.ecrins.open{display:grid;gap:.5rem;margin-top:.5rem}
.ecrins.open .ecr{flex-direction:row;align-items:center;text-align:left;max-width:none;gap:.7rem;padding:.55rem .8rem}
.ecrins.open .ecr img{width:44px;height:44px}
.ecrins.open .ecr b{font-size:.92rem}
}
/* ---- avis : note Google empilée (4,9/5 au-dessus, sur une ligne) ---- */
.gband3{flex-direction:column;gap:.3rem}
.gband3 .g1{display:flex;align-items:center;gap:.5rem;white-space:nowrap;font-family:var(--font);font-weight:700;font-size:1.05rem;color:var(--fg)}
.gband3 .g2{color:var(--muted)}
/* ---- newsletter : bloc encadré arrondi ---- */
.nl3{border:1px solid #E4E4E3;border-radius:26px}
/* ---- mobile : sections Eliane/Box/newsletter centrées ---- */
@media(max-width:859px){
.consel__ct,.boxel__ct{text-align:center}
.consel__ct .sud3,.boxel__ct .sud3{margin-inline:auto}
.consel__cta,.boxel__cta{justify-content:center}
.consel__card,.boxel__card{text-align:left;margin-inline:auto}
.nl3{text-align:center}
.nl3 ul{justify-content:center}
.nl3 form{justify-content:center}
}
/* ---- mobile : les carrousels débordent en pleine largeur avec 1rem de marge interne (fini les cartes collées au bord) ---- */
@media(max-width:859px){
.mcar,.famx,.colvx,.carx{margin-inline:calc(50% - 50vw);padding-inline:1rem;scroll-padding-inline:1rem}
}
/* ---- famx v2 : pastille de thé en vrac au-dessus, intitulé en dessous, zoom au survol ---- */
.famx{gap:clamp(.9rem,2vw,1.6rem);align-items:start}
.famx__c{flex-direction:column;gap:.55rem;border:0;background:none;padding:.25rem .4rem;border-radius:16px;font-size:.9rem}
.famx__c img{width:clamp(72px,8vw,96px);height:auto;aspect-ratio:1/1;border-radius:50%;box-shadow:0 6px 16px rgba(26,23,27,.12);transition:transform .35s var(--ease),box-shadow .25s}
.famx__c:hover{border:0;background:none;transform:none}
.famx__c:hover img,.famx__c:focus-visible img{transform:scale(1.1)}
.famx__c.on{background:none;color:var(--blue-h)}
.famx__c.on img{box-shadow:0 0 0 3px var(--blue),0 8px 18px rgba(2,100,140,.2)}
/* ---- Découvrez nos thés : carrousel de cartes catégories (9 + Voir tout), bouclable ---- */
.catcar{display:flex;gap:clamp(1rem,2.4vw,2rem);overflow-x:auto;scrollbar-width:none;padding:.4rem .2rem .8rem;scroll-snap-type:x proximity}
.catcar::-webkit-scrollbar{display:none}
@media(min-width:1200px){.catcar{justify-content:center}}
.catcar .catl{scroll-snap-align:start;text-decoration:none;color:var(--fg)}
.catl--all .allc{width:clamp(72px,8vw,96px);aspect-ratio:1/1;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(2,100,140,.22);transition:transform .35s var(--ease)}
.catl--all .allc svg{width:34%;height:34%}
.catl--all:hover .allc,.catl--all:focus-visible .allc{transform:scale(1.1)}
@media(max-width:859px){.catcar{margin-inline:calc(50% - 50vw);padding-inline:1rem;scroll-padding-inline:1rem}}
/* ---- fiche : Acheter maintenant + favori ---- */
.buyrow2{display:flex;gap:.7rem;align-items:center;margin-top:.7rem}
.btn--buy2{flex:1;background:#fff;border:1.5px solid var(--fg);color:var(--fg)}
.btn--buy2:hover,.btn--buy2:focus-visible{background:var(--fg);border-color:var(--fg);color:#fff}
.psave2{width:48px;height:48px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--fg);background:#fff;color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.psave2 svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.psave2:hover,.psave2:focus-visible,.psave2.on{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.08)}
/* ---- avis : avatar picto ---- */
.avi3 footer .avat{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:#EAF3F8;color:var(--blue-h);display:grid;place-items:center}
.avi3 footer .avat svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ---- header : recherche en double retirée en desktop (la barre suffit) ---- */
@media(min-width:701px){.head3 .hd__ic[data-search-open]{display:none}}
/* ---- boutique : en-tête et pastilles centrés ---- */
.bh3{text-align:center}
@media(min-width:860px){.famx{justify-content:center}}
/* ---- fiche : image principale réduite, miniatures visibles dans le viewport ---- */
@media(min-width:900px){.galcol .gal{aspect-ratio:auto;height:min(56vh,500px)}}
/* ---- famx v3 : pastilles-onglets réduites, sans encadré ; sélection = intitulé bleu + trait ---- */
.famx--mini{gap:clamp(.8rem,1.8vw,1.4rem)}
.famx--mini .famx__c img{width:clamp(52px,5.5vw,68px);box-shadow:none}
.famx--mini .famx__c{position:relative;padding-bottom:.55rem}
.famx--mini .famx__c.on{color:var(--blue-h)}
.famx--mini .famx__c.on img{box-shadow:none;transform:scale(1.06)}
.famx--mini .famx__c.on::after{content:"";position:absolute;left:50%;translate:-50% 0;bottom:.1rem;width:26px;height:3px;border-radius:2px;background:var(--blue)}
/* ---- carte « Voir tous » en fin de carrousel produits ---- */
.pcta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border:1px solid #E4E4E3;border-radius:var(--r);background:#fff;text-align:center;padding:1.5rem;transition:border-color .25s,transform .25s var(--ease)}
.pcta:hover,.pcta:focus-visible{border-color:var(--blue);transform:translateY(-3px)}
.pcta__c{width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;transition:transform .3s var(--ease)}
.pcta__c svg{width:26px;height:26px}
.pcta:hover .pcta__c{transform:scale(1.1)}
.pcta b{font-family:var(--font);font-weight:700;font-size:1.02rem;color:var(--fg)}
/* ===== CSS critique inline du prototype ===== */
/* bandeau maquette */
main{overflow-x:clip}
.wrap3{max-width:1240px;margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
/* épure : en-têtes sobres */
.rub3{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-h);display:block}
.st3{font-family:var(--font);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.14;margin-top:.35rem}
.st3 em{font-style:normal;color:var(--blue-d)}
.st3 em.hl{color:var(--blue);position:relative;display:inline-block;padding:.08em .42em;margin-inline:.04em;z-index:0}
.st3 em.hl::before{content:"";position:absolute;inset:0;background:#fff;border-radius:999px;z-index:-1}
.sec3:not([class*="secv--"]) .st3 em.hl{color:#fff}
.sec3:not([class*="secv--"]) .st3 em.hl::before{background:var(--blue)}
.secv--bleu .st3 em.hl{color:var(--fg)}
.sud3{color:var(--muted);font-size:.98rem;margin-top:.5rem;max-width:60ch}
.sud3 b,.sud3 strong{color:var(--fg);font-weight:600}
.filet3{display:block;width:44px;height:3px;border-radius:2px;background:var(--blue);margin-top:.8rem}
.ent3{margin-bottom:1.4rem}
.ent3--c{text-align:center}
.ent3--c .sud3{margin-inline:auto}
.ent3--c .filet3{margin-inline:auto;background-position:center}
.ent3 .lk3{font-size:.85rem;font-weight:600;color:var(--blue-h);border-bottom:1px solid currentColor;white-space:nowrap}
.ent3--row{display:flex;align-items:end;justify-content:space-between;gap:1rem}
.sec3{padding-block:3.2rem}
.sep3{height:2px;background:var(--blue-tint);max-width:160px;margin:0 auto;border-radius:2px}
.sep3 i{display:none}
/* 1 hero immersif */
.hero3{position:relative;min-height:min(74vh,600px);display:grid;align-items:center;color:#fff;overflow:hidden}
.hero3>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% center}
.hero3::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,18,.3),rgba(10,14,18,.55))}
.hero3__in{position:relative;padding:2.8rem clamp(1.2rem,4vw,3rem) 3.2rem;max-width:760px}
.hero3 h1{font-family:var(--font);font-weight:700;font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.06;color:#fff}
.hero3 p{color:rgba(255,255,255,.92);max-width:52ch;margin-top:.8rem;font-size:1.02rem}
.hero3__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}
/* 1b hero slider : slide vidéo + slide thés glacés */
.hsl3.hero3::before{content:none}
.hsl3{display:block}
.hsl3__s{position:absolute;inset:0;display:grid;align-items:center;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s .8s;pointer-events:none}
.hsl3__s.on{opacity:1;visibility:visible;transition:opacity .8s var(--ease);pointer-events:auto;z-index:1}
.hsl3__s>video,.hsl3__s>img.hslbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hsl3__s--dark::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,18,.3),rgba(10,14,18,.55))}
.hsl3__s--glace{color:var(--fg);text-align:center}
.hsl3__s--glace .hero3__in{margin-inline:auto;max-width:680px;display:grid;justify-items:center}
.hsl3__badge{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:var(--blue-h);border:1px solid rgba(4,151,211,.25);border-radius:999px;padding:.42rem 1rem;font-family:var(--font);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;box-shadow:0 6px 18px rgba(2,100,140,.12)}
.hsl3__badge::before{content:"";width:16px;height:8px;background:var(--blue);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
.hsl3__title{font-family:var(--font);font-weight:700;font-size:clamp(2rem,4.8vw,3.2rem);line-height:1.06;color:var(--fg);margin-top:1rem;text-shadow:0 1px 0 rgba(255,255,255,.55),0 8px 32px rgba(255,255,255,.5)}
.hsl3__title em{font-style:normal;color:var(--blue)}
.hsl3__s--glace p{color:#3d4650;max-width:46ch;margin-top:.7rem;font-size:1.02rem;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.hsl3__s--glace{cursor:pointer}
.hsl3__promo{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.55rem;margin-top:1.2rem;background:#fff;color:var(--blue-h);border:2px dashed var(--blue);border-radius:26px;padding:.65rem 1.4rem;font-family:var(--font);font-weight:700;font-size:clamp(1rem,1.9vw,1.2rem);box-shadow:0 12px 28px rgba(2,100,140,.15);text-decoration:none;transition:background .2s,border-style .2s,transform .2s var(--ease)}
.hsl3__promo:hover,.hsl3__promo:focus-visible{background:#EAF6FC;border-style:solid;transform:translateY(-2px)}
.hsl3__promo b{font-weight:700;white-space:nowrap}
.hsl3__promo small{font-family:"Inter",sans-serif;font-weight:500;font-size:.72em;color:#3d4650}
.hsl3__s--glace .hero3__cta{justify-content:center;margin-top:1.7rem}
.hsl3__arr{position:absolute;top:50%;translate:0 -50%;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);color:var(--fg);font-size:1.5rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hsl3__arr:hover,.hsl3__arr:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff}
.hsl3__arr--p{left:clamp(.6rem,2vw,1.4rem)}
.hsl3__arr--n{right:clamp(.6rem,2vw,1.4rem)}
.hsl3__dots{position:absolute;left:0;right:0;bottom:1.1rem;z-index:2;display:flex;justify-content:center;gap:.45rem}
.hsl3__dots button{width:26px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hsl3__dots button::before{content:"";width:100%;height:4px;border-radius:99px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:background .25s}
.hsl3__dots button[aria-current]::before{background:var(--blue)}
@media(max-width:760px){
.hero3__in{padding-inline:1.4rem;padding-bottom:4.6rem}
.hsl3__arr{width:38px;height:38px;font-size:1.3rem;top:auto;bottom:.75rem;translate:0 0}
.hsl3__arr--p{left:calc(50% - 84px)}
.hsl3__arr--n{right:calc(50% - 84px)}
.hsl3__dots{bottom:1.25rem}
}
@media (prefers-reduced-motion:reduce){.hsl3__s{transition:none}}
/* 9b la box : sticker Eliane + carte bénéfices (jambes collées au bord bas, section < viewport) */
.boxel__in{display:grid;gap:1.2rem;align-items:end}
@media(min-width:860px){.boxel__in{grid-template-columns:.38fr .62fr;gap:clamp(1.2rem,3vw,2.5rem)}}
.boxel__ph{align-self:end;text-align:center}
.boxel__ph img{display:block;margin-inline:auto;width:clamp(180px,22vw,300px);height:auto;filter:drop-shadow(0 24px 40px rgba(26,23,27,.16))}
.boxel__ct{align-self:center;padding-bottom:2.4rem}
@media(max-width:859px){.boxel__ph{order:2;margin-top:.4rem}.boxel__ph img{width:min(52%,240px)}.boxel__ct{order:1;padding-bottom:0}}
.boxel__t{font-family:var(--font);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.14}
.boxel__card{background:#fff;border-radius:26px;padding:1.4rem clamp(1.2rem,2.5vw,2rem);margin-top:.9rem;box-shadow:0 14px 34px rgba(26,23,27,.07);max-width:560px}
.boxel__card ul{list-style:none;display:grid;gap:.65rem;margin:0;padding:0}
.boxel__card li{position:relative;padding-left:1.9rem;font-size:.98rem;color:var(--muted)}
.boxel__card li b{color:var(--fg);font-weight:600}
.boxel__card li::before{content:"";position:absolute;left:0;top:.42em;width:20px;height:10px;background:var(--blue);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
.boxel__seul{display:block;margin-top:1.2rem;color:var(--muted);font-size:.95rem}
.boxel__px{font-family:var(--font);font-weight:700;font-size:clamp(1.7rem,3vw,2.1rem);line-height:1.15;color:var(--fg)}
.boxel__px em{font-style:normal;color:var(--blue)}
.boxel__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.1rem}
.btn--w{background:#fff;border:1px solid var(--fg);color:var(--fg)}
.btn--w:hover{background:var(--fg);border-color:var(--fg);color:#fff}
/* 2.1 nouveautés */
.new3{display:grid;gap:1rem}
@media(min-width:820px){.new3{grid-template-columns:repeat(3,1fr)}}
.new3 a{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;color:#fff;border:1px solid var(--line)}
.new3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.new3 a:hover img{transform:scale(1.05)}
.new3 a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,16,.05) 40%,rgba(15,13,16,.72))}
.new3 span{position:relative;padding:1.1rem}
.new3 .bt3{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#fff;color:var(--fg);padding:.2rem .55rem;margin-bottom:.5rem}
.new3 h3{font-family:var(--font);font-size:1.35rem;font-weight:600;color:#fff;line-height:1.15}
.new3 small{color:rgba(255,255,255,.85)}
/* 2 grandes familles */
.fam3{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;list-style:none}
@media(min-width:640px){.fam3{grid-template-columns:repeat(5,1fr)}}
.fam3 a{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.1rem .6rem 1rem;background:#fff;border:1px solid var(--line);transition:border-color .25s,box-shadow .25s}
.fam3 a:hover{border-color:var(--blue);box-shadow:0 14px 30px -22px rgba(26,23,27,.5)}
.fam3 .lz3{width:72px;height:72px;transform:rotate(45deg);overflow:hidden;display:grid;place-items:center;border:1px solid var(--line);margin:14px;transition:transform .3s var(--ease)}
.fam3 a:hover .lz3{transform:rotate(45deg) translate(-2px,-2px)}
.fam3 .lz3 img{width:150%;height:150%;max-width:none;object-fit:cover;transform:rotate(-45deg)}
.fam3 b{font-size:.85rem;font-weight:600;text-align:center;line-height:1.2}
/* 3 trouver son thé */
.quiz3{border:1px solid var(--line);background:#fff;padding:clamp(1.4rem,3.5vw,2.4rem);display:grid;gap:1.6rem}
@media(min-width:900px){.quiz3{grid-template-columns:1.1fr .9fr;align-items:start}}
.q3grp{margin-top:1rem}
.q3grp>b{display:block;font-family:var(--font);font-size:1.05rem;margin-bottom:.6rem}
.q3opts{display:flex;flex-wrap:wrap;gap:.5rem}
.q3c{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);border-radius:var(--pill);background:#fff;padding:.55rem 1.05rem;font-size:.86rem;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.q3c:hover{border-color:var(--blue-d)}
.q3c.on{background:var(--blue);border-color:var(--blue);color:#fff}
.quiz3 .btn{margin-top:1.4rem}
.q3res{border-left:1px solid var(--line);padding-left:clamp(1rem,2.5vw,2rem);min-height:100%}
@media(max-width:899px){.q3res{border-left:0;border-top:1px solid var(--line);padding:1.4rem 0 0}}
.q3res>b{display:block;font-family:var(--font);font-size:1.05rem;margin-bottom:.8rem}
.q3res .hint{color:var(--muted);font-size:.88rem;font-style:italic}
.q3list{display:grid;gap:.7rem}
.q3it{display:flex;gap:.8rem;align-items:center;border:1px solid var(--line);padding:.5rem .7rem .5rem .5rem;background:#fff;transition:border-color .2s}
.q3it:hover{border-color:var(--blue)}
.q3it img{width:56px;height:56px;object-fit:cover;flex:0 0 auto}
.q3it b{font-family:var(--font);font-size:.98rem;display:block;line-height:1.15}
.q3it small{color:var(--muted)}
.q3it .px3{margin-left:auto;font-family:var(--font);font-weight:600;white-space:nowrap}
/* 4 meilleures ventes : cartes .pc de tsarine.css */
.rowp3{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:900px){.rowp3{grid-template-columns:repeat(4,1fr)}}
/* 5 collections */
.coll3{display:grid;gap:1rem}
@media(min-width:860px){.coll3{grid-template-columns:repeat(6,1fr)}.coll3 a:nth-child(-n+3){grid-column:span 2}.coll3 a:nth-child(n+4){grid-column:span 3}}
.coll3 a{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:230px;color:#fff;border:1px solid var(--line)}
.coll3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.coll3 a:hover img{transform:scale(1.04)}
.coll3 a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,16,.04) 45%,rgba(15,13,16,.7))}
.coll3 span{position:relative;padding:1rem 1.1rem}
.coll3 h3{font-family:var(--font);font-size:1.3rem;font-weight:600;color:#fff}
.coll3 small{color:rgba(255,255,255,.85);font-size:.78rem}
/* 6 pourquoi nous */
.why3{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;list-style:none}
@media(min-width:860px){.why3{grid-template-columns:repeat(4,1fr)}}
.why3 li{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.why3 .d3{width:46px;height:46px;transform:rotate(45deg);border:1px solid var(--blue);display:grid;place-items:center;margin:8px;background:#fff}
.why3 svg{transform:rotate(-45deg);width:1.3rem;height:1.3rem;fill:none;stroke:var(--blue);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.why3 b{font-size:.85rem;line-height:1.25}
.why3 small{color:var(--muted);font-size:.74rem}
/* 7 histoire vidéo */
.story3{display:grid;gap:1.8rem;align-items:center}
@media(min-width:880px){.story3{grid-template-columns:1.15fr .85fr}}
.story3 .vid{position:relative;overflow:hidden;border:1px solid var(--line);cursor:pointer}
.story3 .vid img{width:100%;aspect-ratio:16/10;object-fit:cover}
.story3 .vid i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 18px 44px -18px rgba(15,13,16,.6);transition:transform .25s var(--ease)}
.story3 .vid:hover i{transform:translate(-50%,-50%) scale(1.08)}
.story3 .vid i::after{content:"";margin-left:5px;border-left:18px solid var(--blue);border-top:11px solid transparent;border-bottom:11px solid transparent}
.story3 p{color:var(--muted);margin-top:.7rem;max-width:52ch}
.story3 p b{color:var(--fg)}
/* 8 offrir : bande encre */
.gift3{position:relative;color:#fff;overflow:hidden}
.gift3>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gift3::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,16,.86) 30%,rgba(15,13,16,.35))}
.gift3__in{position:relative;padding:clamp(3rem,7vw,4.6rem) clamp(1.2rem,4vw,3rem);max-width:600px}
.gift3 .rub3{color:var(--blue-l)}
.gift3 .st3,.gift3 .st3 em{color:#fff}
.gift3 .st3 em{color:var(--blue-l)}
.gift3 p{color:rgba(255,255,255,.85);margin-top:.6rem;max-width:46ch}
.btn--gold3{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--gold3:hover{background:var(--blue-h);border-color:var(--blue-h)}
/* 10 avis */
.avis3{display:grid;gap:1rem}
@media(min-width:860px){.avis3{grid-template-columns:repeat(3,1fr)}}
.avi3{border:1px solid var(--line);background:#fff;padding:1.1rem 1.2rem;font-size:.88rem}
.avi3 .st{color:var(--gold);letter-spacing:.12em}
.avi3 p{margin-top:.5rem;color:var(--fg)}
.avi3 footer{margin-top:.7rem;color:var(--muted);font-size:.78rem;display:flex;gap:.6rem;align-items:center}
.avi3 footer img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.gband3{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:1.2rem;font-size:.88rem;color:var(--muted)}
.gband3 b{color:var(--fg)}
/* 11 newsletter */
.nl3{border:1px solid var(--line);background:#fff;padding:clamp(1.6rem,4vw,2.4rem);display:grid;gap:1.4rem;align-items:center}
@media(min-width:860px){.nl3{grid-template-columns:1.1fr .9fr}}
.nl3 ul{list-style:none;display:flex;gap:.4rem 1.2rem;flex-wrap:wrap;margin-top:.7rem;color:var(--muted);font-size:.85rem}
.nl3 ul li::before{content:"";display:inline-block;width:14px;height:7px;background:var(--gold);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat;margin-right:.4rem}
.nl3 form{display:flex;gap:.6rem;flex-wrap:wrap}
.nl3 input{flex:1;min-width:220px;min-height:48px;border:1px solid var(--line);padding:.7rem 1rem;font:inherit;background:#fff}
.nl3 input:focus{outline:2px solid var(--blue);outline-offset:1px}
/* 12 instagram */
.insta3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(min-width:760px){.insta3{grid-template-columns:repeat(6,1fr)}}
.insta3 a{position:relative;overflow:hidden;display:block}
.insta3 img{aspect-ratio:1/1;width:100%;object-fit:cover;transition:transform .5s var(--ease)}
.insta3 a:hover img{transform:scale(1.06)}
.insta3 a::after{content:"";position:absolute;inset:0;background:rgba(15,13,16,0);transition:background .25s}
.insta3 a:hover::after{background:rgba(15,13,16,.18)}
.gift3__in{max-width:none;display:grid;gap:2rem;align-items:center}
@media(min-width:860px){.gift3__in{grid-template-columns:.5fr 1fr;max-width:1080px}}
.gift3__prod{text-align:center}
.gift3__prod img{max-width:min(320px,78%);margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.gift3__prod b{display:block;margin-top:.9rem;font-weight:500;color:rgba(255,255,255,.85);font-size:.85rem}
.gift3__prod b span{display:block;font-family:var(--font);font-size:1.9rem;font-weight:600;color:var(--blue-l);line-height:1.1}
.storyv{position:relative;overflow:hidden;clip-path:inset(0);min-height:min(72vh,560px);display:grid;align-items:center;color:#fff}
.storyv__bg{position:fixed;inset:0;width:100%;height:100vh;object-fit:cover;z-index:-1}
.storyv::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,16,.72) 22%,rgba(15,13,16,.28));pointer-events:none}
.storyv__in{position:relative;padding:3rem clamp(1.2rem,4vw,3rem);max-width:640px}
.storyv .rub3{color:var(--blue-l)}
.storyv .st3{color:#fff}
.storyv .st3 em{color:var(--blue-l)}
.storyv p{color:rgba(255,255,255,.9);margin-top:.6rem;max-width:52ch}
@media (prefers-reduced-motion:reduce){.storyv__bg{display:none}.storyv{background:url("../img/opt/img-boutique-vieilleville-1200.webp") center/cover}}
.bstabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:-.2rem 0 1.3rem;position:relative}
@media(max-width:760px){.bstabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-1rem;padding-inline:1rem}.bstabs::-webkit-scrollbar{display:none}.bstabs .q3c{flex:0 0 auto}}
/* ============================================================
Intégration PrestaShop (thème enfant La Tsarine)
============================================================ */
#wrapper{padding:0;margin:0;background:var(--bg)}
#index #wrapper .breadcrumb, #index #main-content + .notifications-container:empty{display:none}
.page--latsarine-home{width:100%}
.page-content--home{margin:0}
#header{background:transparent;box-shadow:none}
#footer{padding:0;margin:0;background:transparent}
#footer .foot2{margin-top:0}
.back-to-top-link,.skip-link{z-index:200}
/* ============================================================
LA TSARINE — V2 : conformité à la vraie maquette Figma
(surcouche sur le design system de base ; garde les animations)
============================================================ */
:root{
--v2-blue:#0497D3;
--v2-blue-dark:#0378A8;
--v2-blue-band:#049AD7;
--v2-blue-pale:#EAF6FC;
--v2-blue-tint:#F2F9FD;
--v2-gold:#C9A962;
--v2-gold-ink:#A98B3F;
--v2-ink:#1A171B;
--v2-muted:#6B7280;
--v2-r:18px;
/* gouttière standard : aligne header, hero, sections, storyx et footer sur le même
container 1256px utiles (1320 - 2×32). Le JS pose la valeur exacte en px
(garder 628 = 1256/2 et le 1256 de custom.js synchronisés). */
--v2-wrap:1320px;
--v2-gutter:max(calc(50vw - 628px),clamp(1rem,3vw,2rem));
}
/* ---------- HEADER V2 : bandeau bleu + nav blanche ---------- */
.head4{position:relative;z-index:60;font-family:var(--font-text)}
.hd4__top{background:var(--v2-blue-band);display:flex;align-items:center;gap:2rem;padding:1.75rem var(--v2-gutter)}
.hd4__logo{height:78px;width:auto;display:block}
.hd4__search{flex:1;max-width:530px;margin-inline:auto;display:flex;align-items:center;gap:.6rem;background:#fff;border:0;border-radius:999px;padding:.35rem .4rem .35rem 1.1rem;font:inherit;font-size:.95rem;color:#7A8894;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.hd4__search svg{width:20px;height:20px;stroke:var(--v2-blue);fill:none;stroke-width:1.8;flex:0 0 auto}
.hd4__search img.cup{width:22px;height:22px;flex:0 0 auto}
.hd4__search .loupe{margin-left:auto;background:var(--v2-blue);border-radius:999px;width:38px;height:38px;display:grid;place-items:center}
.hd4__search .loupe svg{stroke:#fff}
.hd4__ics{display:flex;gap:1.6rem}
.hd4__ic{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:#fff;font-size:.72rem;font-weight:500;background:none;border:0;cursor:pointer;text-decoration:none}
.hd4__ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7}
.hd4__ic img{width:22px;height:22px}
.hd4__ic:hover{color:#fff;opacity:.85}
.hd4__nav{background:#fff;display:flex;align-items:center;gap:.4rem;padding:1.9rem var(--v2-gutter);border-bottom:1px solid #EFF2F5;position:relative}
.hd4__nav>ul{display:flex;align-items:center;gap:.4rem;list-style:none;margin:0;padding:0}
.hd4__nav a{font-family:var(--font);font-weight:500;font-size:1.02rem;color:var(--v2-ink);text-decoration:none;padding:.55rem .8rem;border-radius:10px;display:inline-flex;align-items:center;gap:.3rem}
.hd4__nav a:hover{color:var(--v2-blue)}
.hd4__nav li.nav-thes>a{color:var(--v2-blue)} /* bleu maquette : l'entrée « Thés », plus « le 1er item » depuis l'ajout d'Accueil */
.hd4__nav .caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid currentColor;margin-left:.15rem}
.hd4__nav .promo-lnk{color:#F59E0B}
.hd4__nav .promo-lnk .dotp{width:14px;height:14px;border-radius:50%;background:#F59E0B;display:inline-block;position:relative}
.hd4__nav .promo-lnk .dotp::after{content:"%";position:absolute;inset:0;color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center}
/* pill « La box » — sélecteurs alignés sur .hd4__nav a pour ne pas être écrasés (couleur, radius, padding) */
.hd4__nav a.hd4__box{margin-left:auto;display:inline-flex;align-items:center;gap:.55rem;background:linear-gradient(90deg,#22ABE2,#0497D3);color:#fff;font-family:var(--font);font-weight:600;font-size:1rem;padding:.5rem .55rem .5rem 1.15rem;border-radius:999px;text-decoration:none;box-shadow:0 0 0 5px #B9E1F1,0 10px 22px -10px rgba(4,151,211,.55)}
.hd4__nav a.hd4__box:hover{color:#fff;filter:brightness(1.05)}
.hd4__box svg{width:20px;height:20px;flex:0 0 auto}
.hd4__box .abo{background:#fff;color:var(--v2-blue);font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:.32rem .75rem;border-radius:999px;text-transform:uppercase}
/* mega menu réutilise .mega2 de la base */
.hd4__nav li{position:relative}
.hd4__nav li:hover .mega2{opacity:1;visibility:visible;transform:none}
/* ---------- entêtes de section centrées ---------- */
.entx{text-align:center;margin-bottom:2.2rem}
.entx h2{font-family:var(--font);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.75rem);color:var(--v2-ink);line-height:1.05;letter-spacing:-.4px}
.entx h2 em{font-style:normal;color:var(--v2-blue)}
.entx p{color:var(--v2-muted);margin-top:.55rem;font-size:1rem;max-width:660px;margin-inline:auto}
.entx .filetx{display:block;width:46px;height:4px;border-radius:3px;background:var(--v2-blue);margin:1rem auto 0}
.entl{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.8rem}
.entl h2{font-family:var(--font);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--v2-ink)}
.entl h2 em{font-style:normal;color:var(--v2-blue)}
.entl .filetx{display:block;width:46px;height:4px;border-radius:3px;background:var(--v2-blue);margin-top:.6rem}
.entl .lnk{font-weight:600;font-size:.95rem;color:var(--v2-blue);border-bottom:1.5px solid currentColor;text-decoration:none;white-space:nowrap}
/* ---------- HERO V2 : slider plein écran sur images bannières ---------- */
.hero4{position:relative;min-height:clamp(540px,38vw,660px);overflow:hidden}
.hero4 .hero4__s{min-height:clamp(540px,38vw,660px)}
.hero4__s{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s .8s;pointer-events:none;display:grid;align-items:center}
.hero4__s.on{opacity:1;visibility:visible;transition:opacity .8s var(--ease);pointer-events:auto;position:relative}
.hero4__s>img.bg4{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0}
.hero4__in{position:relative;z-index:1;max-width:var(--v2-wrap);margin-inline:auto;padding:4.2rem clamp(1rem,3vw,2rem);width:100%}
.hero4__badge{display:inline-block;background:#fff;color:var(--v2-blue);font-weight:600;font-size:.85rem;padding:.5rem 1.1rem;border-radius:999px;box-shadow:0 2px 10px rgba(26,23,27,.06)}
.hero4 h1,.hero4 .h1x{font-family:var(--font);font-weight:700;font-size:clamp(2.2rem,4.6vw,3.55rem);line-height:1.12;color:var(--v2-ink);margin-top:1.4rem;max-width:10.8em;letter-spacing:-.01em}
.hero4 .h1x em{font-style:normal;color:var(--v2-blue)}
.hero4 p.sub4{margin-top:1.3rem;max-width:64ch;color:#3F4854;font-size:1.02rem;line-height:1.6}
.hero4__cta{display:flex;gap:.9rem;margin-top:1.8rem;flex-wrap:wrap}
.hero4__cta .btn4{padding-block:.7rem}
.btn4{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font);font-weight:600;font-size:.98rem;padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
.btn4--blue{background:var(--v2-blue);color:#fff;box-shadow:0 10px 24px -10px rgba(4,151,211,.6)}
.btn4--blue:hover{background:var(--v2-blue-dark);color:#fff}
.btn4--gold{background:var(--v2-gold);color:#fff}
.btn4--gold:hover{filter:brightness(1.06);color:#fff}
.btn4--line{background:transparent;color:var(--v2-blue);border:1.5px solid var(--v2-blue)}
.btn4--line:hover{background:var(--v2-blue-tint)}
.btn4--white{background:#fff;color:var(--v2-blue)}
.btn4 svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.hero4__dots{position:absolute;right:var(--v2-gutter);bottom:1.6rem;display:flex;gap:.45rem;z-index:2}
.hero4__dots button{width:38px;height:5px;border-radius:99px;background:#fff;opacity:.55;border:0;cursor:pointer;transition:.3s}
.hero4__dots button[aria-current]{opacity:1;width:56px}
/* bandeau réassurance sous le hero — fond bleu pâle comme la maquette */
.reass4{background:#F2FAFC}
.reass4__in{max-width:var(--v2-wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem clamp(1rem,3vw,2rem);flex-wrap:wrap}
.reass4__it{display:flex;align-items:center;gap:.6rem;font-family:var(--font);font-weight:600;font-size:.98rem;color:var(--v2-ink)}
.reass4__it img{width:26px;height:26px}
.reass4__leaf{width:22px;height:22px;opacity:.8}
/* ---------- sections génériques v2 ---------- */
.secx{padding-block:5rem;position:relative}
.secx--pale{background:var(--v2-blue-tint)}
.secx--creme{background:#FBF9F4}
.secx .wrapx{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.leafbg{position:absolute;pointer-events:none;opacity:.85}
/* dots de pagination des carrousels */
/* dots maquette : points ronds, actif = point bleu cerclé (◉) ; variante --bar = barre allongée */
.dotsx{display:flex;justify-content:center;align-items:center;gap:.55rem;margin-top:1.6rem}
.dotsx button{width:7px;height:7px;border-radius:99px;background:#C6D2DB;border:0;cursor:pointer;transition:.3s;padding:0}
.dotsx button[aria-current]{width:14px;height:14px;background:var(--v2-blue);border:2px solid var(--v2-blue);box-shadow:inset 0 0 0 2.5px #fff}
.dotsx--bar button[aria-current]{width:44px;height:8px;border:0;box-shadow:none;background:var(--v2-blue)}
/* cartes produit : ajustements v2 sur .pc */
.pc{border-radius:16px;border:1px solid #EEF1F3;box-shadow:0 10px 30px -22px rgba(26,23,27,.25)}
.pc .fam2{color:var(--v2-blue);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.64rem}
.pc .rt{color:var(--v2-blue)}
.pc .rt small{color:#8A93A0}
.pc .px{font-family:var(--font);font-weight:700;font-size:1.15rem}
.pc .qk button{border:1.5px solid var(--v2-blue);color:var(--v2-blue);border-radius:999px;font-weight:600}
.pc .qk button:hover{background:var(--v2-blue);color:#fff}
.pc .tag2{background:var(--v2-blue);color:#fff;border:0;font-weight:600}
/* ---------- Découvrez nos thés : pastilles rondes + CTA ---------- */
.famv2{display:flex;justify-content:center;align-items:start;gap:clamp(.8rem,2vw,1.6rem);flex-wrap:wrap;margin-top:1.6rem}
.famv2 .famx__c{display:flex;flex-direction:column;align-items:center;gap:.55rem;background:none;border:0;cursor:pointer;font-family:var(--font);font-weight:600;font-size:.92rem;color:var(--v2-ink);padding:.55rem .7rem;border-radius:14px;border:1.5px solid transparent}
.famv2 .famx__c img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 4px 14px -6px rgba(26,23,27,.25)}
.famv2 .famx__c.on{border-color:var(--v2-blue);background:#fff;color:var(--v2-blue);box-shadow:0 8px 20px -12px rgba(4,151,211,.4)}
.famv2 .famx__c.on::after{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--v2-blue);margin-top:.1rem}
.famcta{display:flex;justify-content:center;margin-top:1.6rem}
.famcta .btn4{padding:.55rem 1.35rem;font-size:.92rem}
/* ---------- Nos collections : cercles ---------- */
.collv2{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.4rem);margin-top:1rem}
.collv2 a{position:relative;display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;text-decoration:none}
.collv2 a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.collv2 a:hover img{transform:scale(1.06)}
.collv2 a::after{content:"";position:absolute;inset:0;background:rgba(10,14,18,.2)}
.collv2 .t{position:absolute;left:0;right:0;bottom:calc(8% + 62px);z-index:1;text-align:center;color:#fff;font-family:var(--font);font-weight:600;font-size:clamp(1rem,1.5vw,1.18rem);padding-inline:.4rem;white-space:nowrap;text-shadow:0 1px 10px rgba(10,14,18,.45)}
.collv2 .b{position:absolute;left:50%;transform:translateX(-50%);bottom:8%;z-index:1;display:inline-flex;align-items:center;gap:.45rem;color:#fff;font-weight:600;font-size:.85rem;background:rgba(10,14,18,.32);border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:.55rem 1.2rem;white-space:nowrap;transition:background .25s}
.collv2 a:hover .b{background:rgba(10,14,18,.55)}
.collv2 .b svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2}
@media(max-width:860px){.collv2{grid-template-columns:repeat(2,1fr)}}
/* ---------- Nos coffrets cadeaux : mosaïque ---------- */
.cofx{display:grid;grid-template-columns:repeat(12,1fr);gap:1.4rem;margin-top:1rem}
.cofx__c:nth-child(1){grid-column:span 7}
.cofx__c:nth-child(2){grid-column:span 5}
.cofx__c:nth-child(3){grid-column:span 5}
.cofx__c:nth-child(4){grid-column:span 7}
.cofx__c{position:relative;border-radius:22px;overflow:hidden;padding:2.2rem 2.2rem 2rem;display:flex;flex-direction:column;justify-content:center;min-height:320px;background:#FAF6EE center/cover no-repeat}
.cofx__c--bleu{background-image:url("../img/v2/card-bg-bleu.png");border:1px solid #E5F5FA}
.cofx__c--creme{background-image:url("../img/v2/card-bg-creme.png");border:1px solid #F4EEE2}
.cofx__c .kick{font-family:var(--font);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;color:var(--v2-gold-ink)}
.cofx__c h3{font-family:var(--font);font-weight:700;font-size:clamp(1.35rem,2.2vw,1.8rem);margin-top:.5rem;max-width:14ch}
.cofx__c .d{color:var(--v2-muted);margin-top:.6rem;max-width:34ch;font-size:.96rem;line-height:1.55}
.cofx__c .prix{display:flex;align-items:center;gap:.7rem;margin-top:.9rem;font-family:var(--font);font-weight:700;font-size:1.5rem;color:var(--v2-blue-dark);white-space:nowrap;flex-wrap:nowrap}
.cofx__c .prix .st{color:var(--v2-blue);font-size:.9rem;font-weight:600}
.cofx__c .prix .st small{color:#8A93A0;font-weight:500}
.cofx__c .btn4{margin-top:auto;align-self:start}
.cofx__c--compose .btn4{margin-top:1.2rem}
.cofx__c .ph{position:absolute;right:0;top:0;bottom:0;width:46%;display:grid;place-items:center;pointer-events:none}
.cofx__c .ph img{max-width:100%;max-height:88%;object-fit:contain}
.cofx__c--txt{padding-right:48%}
.cofx__c .nouv{position:absolute;z-index:2;top:24px;right:auto;left:52%;background:#E23B3B;color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.12em;padding:.4rem 1.6rem;transform:rotate(-35deg);text-transform:uppercase}
.cofx__c--compose{background:var(--v2-blue);color:#fff;overflow:visible;z-index:0;justify-content:flex-end}
.cofx__c--compose .kick{color:rgba(255,255,255,.85)}
.cofx__c--compose h3{color:#fff;max-width:none;white-space:nowrap;font-size:clamp(1.3rem,2vw,1.62rem)}
.cofx__c--compose .d{color:rgba(255,255,255,.92)}
.cofx__c--compose .btn4{background:#fff;border:0;color:var(--v2-blue)}
.cofx__c--compose .btn4:hover{background:#EAF7FC;color:var(--v2-blue-dark)}
.cofx__c--compose .ph{z-index:1}
.cofx__c--compose .ph{right:6%;top:15%;bottom:16%;width:31%}
.cofx__c--compose .ph img{max-height:100%}
.cofx__c--compose .deco{position:absolute;pointer-events:none;z-index:2}
.cofx__c--compose .deco--bg{left:-1.29%;top:-2.29%;width:103.6%;height:104.9%;max-width:none;z-index:-1}
.cofx__c--compose .deco--noeud{left:-55px;top:-30px;width:250px}
.cofx__c--compose .deco--ruban{right:-69px;bottom:-47px;width:260px}
.cofx__c--compose .deco--feuilles{right:5%;top:4%;width:24%;z-index:2}
@media(max-width:900px){.cofx{grid-template-columns:1fr}.cofx__c{grid-column:auto !important}.cofx__c--txt{padding-right:2.2rem}.cofx__c .ph{position:static;width:auto;margin-top:1rem}.cofx__c--compose{overflow:hidden}.cofx__c--compose .deco{display:none}.cofx__c--compose h3{white-space:normal}}
/* ---------- Les accessoires essentiels ---------- */
.accx{display:grid;grid-template-columns:1.05fr 3fr;gap:1.2rem;margin-top:1rem;align-items:center}
.accx__rail{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.accx__rail::-webkit-scrollbar{display:none}
.accx__rail .pc{flex:0 0 calc((100% - 2.4rem)/3);scroll-snap-align:start}
.accx__rail .pc img{aspect-ratio:1.16/1}
.accx__hero{position:relative;border-radius:18px;overflow:hidden;min-height:490px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:1.6rem;color:#fff;text-decoration:none}
.accx__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .8s var(--ease)}
.accx__hero:hover img{transform:scale(1.05)}
.accx__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,18,0) 35%,rgba(10,14,18,.62));z-index:0}
.accx__hero>*{position:relative;z-index:1}
.accx__hero b{font-family:var(--font);font-weight:700;font-size:1.35rem}
.accx__hero p{font-size:.9rem;opacity:.92;margin-top:.4rem;max-width:30ch}
.accx__hero .b4{display:inline-flex;align-items:center;gap:.45rem;color:#fff;font-weight:600;font-size:.9rem;border:1.5px solid rgba(255,255,255,.85);border-radius:999px;padding:.55rem 1.3rem;margin-top:1rem}
.accx--rev{grid-template-columns:3fr 1.05fr;margin-top:4.2rem}
@media(min-width:901px){.dotsx--accr1{padding-left:26.3%}.dotsx--accr2{padding-right:26.3%}.dotsx--accr1,.dotsx--accr2{margin-top:.2rem}}
@media(max-width:900px){.accx,.accx--rev{grid-template-columns:1fr}.accx__hero{grid-column:1/-1;min-height:380px}.accx--rev .accx__hero{order:-1}.accx__rail{grid-column:1/-1}.accx__rail .pc{flex-basis:72%}}
/* ---------- Boutique vieille ville : split bleu/photo ---------- */
.storyx{display:grid;grid-template-columns:1.7fr 1fr;min-height:560px}
.storyx__txt{background:linear-gradient(225deg,#22ABE2,#0497D3);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,4.6rem);padding-left:var(--v2-gutter);position:relative;overflow:hidden}
.storyx__txt .kick{font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;opacity:.92}
.storyx__txt h2{font-family:var(--font);font-weight:700;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.2;margin-top:1rem;max-width:26ch;color:#fff}
.storyx__txt .filetw{display:block;width:44px;height:3px;background:#fff;border-radius:2px;margin-top:1.3rem}
.storyx__txt p{margin-top:1.3rem;max-width:630px;line-height:1.65;opacity:.95}
.storyx__cta{display:flex;align-items:center;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.storyx__cta .btn4,.storyx__cta .gbadge{height:48px;padding-block:0}
.storyx__cta .gbadge{display:inline-flex;align-items:center;gap:.6rem;background:transparent;border:1.5px solid rgba(255,255,255,.75);border-radius:999px;padding:.45rem 1.1rem .45rem .5rem;color:#fff;font-weight:600;font-size:.92rem}
.storyx__cta .gbadge svg{background:#fff;border-radius:50%;padding:5px;width:28px;height:28px;box-sizing:border-box}
.storyx__cta .gbadge .stars{display:inline-flex;gap:2.5px}
.storyx__cta .gbadge .stars img{width:13px;height:13px;display:block}
.storyx__img{position:relative;min-height:380px}
.storyx__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.storyx .leafw{position:absolute;opacity:1;pointer-events:none;z-index:0}
.storyx__txt>*:not(.leafw){position:relative;z-index:1}
@media(max-width:860px){.storyx{grid-template-columns:1fr}}
/* ---------- La Box : 3 formules ---------- */
.boxkick{display:flex;justify-content:center;margin-bottom:1rem}
.boxkick span{display:inline-flex;align-items:center;gap:.5rem;background:#E2BF5E;color:#fff;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:.5rem 1.2rem;border-radius:999px}
.boxpr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;align-items:stretch;margin-top:1.4rem;padding-top:33px}
section[aria-labelledby="boxpr-t"]{background:linear-gradient(180deg,#fff,#E7F4FA)}
.boxpr__c{background:#fff;border-radius:50px;padding:32px;border:.75px solid #EEF8FB;box-shadow:0 2px 19px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:.4rem;position:relative}
.boxpr__ic{width:60px;height:60px;border-radius:22px;background:var(--v2-blue);color:#fff;display:grid;place-items:center;margin-bottom:1.4rem}
.boxpr__c .kick{font-weight:600;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--v2-blue)}
.boxpr__c h3{font-family:var(--font);font-weight:700;font-size:30px;color:#01202D;margin-top:.2rem}
.boxpr__c .d{color:#01354A;font-size:14px;font-weight:500;line-height:1.6;margin-top:.4rem}
.boxpr__c .remise{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem}
.boxpr__c .remise b{font-family:var(--font);font-weight:800;font-size:46px;line-height:1;letter-spacing:.92px;color:var(--v2-blue)}
.boxpr__c .remise span{background:rgba(4,157,220,.04);border:0;color:#026791;font-size:11px;line-height:1.6;font-weight:600;padding:4px 12px;border-radius:100px;box-shadow:0 2px 14px rgba(0,0,0,.02);white-space:nowrap}
.boxpr__c .btn4{margin-top:1.2rem;justify-content:center;height:46px;padding-block:0;font-size:14px;font-weight:500;border:.75px solid var(--v2-blue);color:#049DDC}
.boxpr__c ul{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:16px}
.boxpr__c ul li{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.2;color:#012D40}
.boxpr__c ul li svg{width:17.5px;height:17.5px;stroke:var(--v2-blue);fill:none;stroke-width:2;flex:0 0 auto}
.boxpr__c--hl{background:linear-gradient(155deg,#0396D2,#13B7FA);border:0;color:#fff;transform:translateY(-32px)}
.boxpr__c--hl::before{content:"";position:absolute;inset:-9px;border:9px solid #D5EBED;border-radius:57px;pointer-events:none}
.boxpr__c--hl .btn4{border:0;color:#049DDC}
.boxpr__c--hl ul li{color:#fff}
.boxpr__c--hl .boxpr__ic{background:#fff;color:var(--v2-blue)}
.boxpr__c--hl .kick,.boxpr__c--hl h3{color:#fff}
.boxpr__c--hl .d{color:rgba(255,255,255,.92)}
.boxpr__c--hl .remise b{color:#fff}
.boxpr__c--hl .remise span{background:rgba(255,255,255,.2);color:#fff}
.boxpr__c--hl .btn4{background:#fff;color:var(--v2-blue)}
.boxpr__c--hl ul li svg{stroke:#fff}
@media(max-width:900px){.boxpr{grid-template-columns:1fr}.boxpr__c--hl{transform:none}}
/* ---------- Les avis v2 ---------- */
.avisx .gpill{display:flex;justify-content:center;margin-bottom:2rem}
.avisx .gpill__c{display:flex;align-items:center;gap:.9rem;background:#fff;border-radius:999px;box-shadow:0 12px 30px -18px rgba(26,23,27,.3);padding:.8rem 1.7rem}
.avisx .gpill__g{flex:0 0 auto}
.avisx .gpill__col{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}
.avisx .gpill__top{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.25rem;line-height:1;color:#1A171B}
.avisx .gpill .stars{display:inline-flex;gap:3px}
.avisx .gpill .stars img{width:17px;height:17px;display:block}
.avisx .gpill small{display:block;font-weight:500;color:var(--v2-muted);font-size:.85rem}
.avi3 .st{color:#F5A623}
.avisx__nav{display:flex;justify-content:center;gap:.8rem;margin-top:1.8rem}
.avisx__nav button{width:44px;height:44px;border-radius:50%;background:var(--v2-blue-pale);border:0;color:var(--v2-blue);font-size:1.1rem;cursor:pointer}
.avisx__nav button:hover{background:var(--v2-blue);color:#fff}
/* ---------- Pourquoi choisir : 4 cartes ---------- */
.whyx{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:1rem}
.whyx__c{background:var(--v2-blue-tint);border:1px solid #E9F3F9;border-radius:18px;padding:2rem 1.1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.whyx__c .los{width:64px;height:64px;display:grid;place-items:center;margin-bottom:.6rem;position:relative}
.whyx__c .los::before{content:"";position:absolute;inset:6px;border:1.6px solid var(--v2-blue);transform:rotate(45deg);border-radius:8px}
.whyx__c .los svg{width:24px;height:24px;color:var(--v2-blue);fill:none;position:relative}
.whyx__c b{font-family:var(--font);font-weight:700;font-size:1.05rem}
.whyx__c p{color:var(--v2-muted);font-size:.88rem;line-height:1.5}
.whyx__c .pays{display:flex;gap:.45rem;align-items:center;justify-content:center;flex-wrap:nowrap;margin-top:.4rem;background:#fff;border-radius:999px;padding:.6rem 1rem;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.whyx__c .pays img{height:20px;width:auto;border-radius:4px}
@media(max-width:900px){.whyx{grid-template-columns:1fr 1fr}}
/* ---------- Carnet v2 ---------- */
.carnetx .pc-art{background:#fff;border:1px solid #EEF1F3;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px -22px rgba(26,23,27,.25);position:relative}
.carnetx .pc-art img{width:100%;aspect-ratio:16/10.5;object-fit:cover}
.carnetx .pc-art .bd{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.carnetx .pc-art .cat{color:var(--v2-blue);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.66rem}
.carnetx .pc-art h3{font-family:var(--font);font-weight:700;font-size:1.12rem;line-height:1.25;min-height:2.5em}
.carnetx .pc-art p{color:var(--v2-muted);font-size:.92rem;line-height:1.55;border-bottom:1.5px dashed #E5E9EC;padding-bottom:1.1rem;flex:1}
.carnetx .pc-art .btn4{margin-top:.8rem;justify-content:center;width:100%;height:44px;padding-block:0}
.carnetx .pc-art .btn4::after{content:"";position:absolute;inset:0}
.carnetx__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.carnetx__grid{grid-template-columns:1fr}}
/* ---------- FOOTER V2 : bleu ---------- */
.foot4{font-family:var(--font-text)}
.foot4__nl{background:#F8F7F4}
.foot4__nlin{max-width:var(--v2-wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem clamp(1rem,3vw,2rem);flex-wrap:wrap}
.foot4__nlt{font-family:var(--font);font-weight:700;font-size:1.25rem;color:#1A171B}
.foot4__nls{color:#6F6A63;margin-top:.3rem;max-width:52ch}
.foot4__nls b{color:#3E3A34}
.foot4__form{display:flex;gap:.7rem;flex:1;max-width:520px}
.foot4__form input{flex:1;border:1px solid #E5E1D8;border-radius:999px;padding:.85rem 1.5rem;font:inherit;background:#fff}
.foot4__form .btn4--blue{background:#0489BE;box-shadow:none}
.foot4__form .btn4--blue:hover{background:#04769F}
.foot4__main{background:var(--v2-blue-band);color:#fff;padding:3.4rem 0 3rem}
.foot4__grid{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem);display:grid;grid-template-columns:1.85fr 1fr 1fr 1.55fr;gap:2.4rem}
.foot4__logo{height:88px;width:auto;margin-bottom:1.2rem}
.foot4__grid p{font-size:.95rem;line-height:1.7;opacity:.96}
.foot4__grid a{color:#fff;text-decoration:none}
.foot4__grid a:hover{text-decoration:underline}
.foot4__grid h3{font-family:var(--font);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.4rem;color:#fff}
.foot4__grid h3::after{content:"";display:block;width:28px;height:2.5px;background:rgba(255,255,255,.85);border-radius:2px;margin-top:.55rem}
.foot4__grid nav{display:grid;gap:.65rem;align-content:start;font-size:.96rem}
.foot4__trust ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.92rem}
.foot4__trust li{display:flex;gap:.6rem;align-items:center}
.foot4__trust li svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.7;flex:0 0 auto}
.foot4__soc{display:flex;gap:.7rem;margin-top:1.4rem}
.foot4__soc a{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--v2-blue)}
.foot4__soc svg{width:19px;height:19px;stroke:var(--v2-blue);fill:none;stroke-width:1.8}
.foot4__fine{background:#BEE4F5;color:#23566E;font-size:.88rem}
.foot4__fine .in{max-width:var(--v2-wrap);margin-inline:auto;padding:1rem clamp(1rem,3vw,2rem);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot4__fine a{color:inherit}
/* mention d'agence du bandeau fin : les mots liés doivent se voir comme des liens */
.foot4__by a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.foot4__by a:hover{color:#0F3F55}
@media(max-width:760px){.foot4__fine .in{justify-content:center;text-align:center}}
@media(max-width:900px){.foot4__grid{grid-template-columns:1fr}}
/* rails produits : dots visibles, flèches conservées */
.railx{position:relative}
/* correctifs v2.1 */
.collv2 a:hover,.collv2 a:focus,.collv2 a .t,.collv2 a .b{text-decoration:none}
.collv2 .t{bottom:30%}
.collv2 .t::after{content:"";display:block;width:26px;height:2px;background:#fff;border-radius:2px;margin:.4rem auto 0}
.collv2 .b{bottom:8%}
.avisx__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:1080px;margin-inline:auto}
.avix{background:#fff;border:1px solid #EEF1F3;border-radius:18px;box-shadow:0 14px 36px -26px rgba(26,23,27,.3);padding:1.8rem;display:flex;flex-direction:column;gap:.9rem}
.avix .st{display:flex;gap:4px}
.avix .st img{width:13px;height:13px;display:block}
.avix p{margin:0;line-height:1.6;color:#333A44;font-size:.96rem}
.avix footer{display:flex;align-items:center;gap:.6rem;color:var(--v2-muted);font-size:.88rem;margin-top:auto}
.avix .avat{width:34px;height:34px;border-radius:50%;background:var(--v2-blue-pale);display:grid;place-items:center;flex:0 0 auto}
.avix .avat svg{width:16px;height:16px;stroke:var(--v2-blue);fill:none;stroke-width:1.8}
@media(max-width:900px){.avisx__grid{grid-template-columns:1fr}}
/* fix : la classe .avisx existe aussi dans le CSS du prototype (flex) */
section.secx.avisx{display:block}
/* ---- conformité maquette : sections bord à bord (le thème posait un gap de 40px) ---- */
#content.page-content--home{gap:0}
/* ---- container standard aussi sur les pages intérieures (catégorie, produit, CMS) ---- */
#wrapper .container{max-width:var(--v2-wrap);margin-inline:auto}
/* ---- avis + carnet : rails défilables (3 cartes visibles, flèches fonctionnelles) ---- */
.avisx__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:1.4rem;max-width:1150px;margin-inline:auto}
.avisx__grid::-webkit-scrollbar{display:none}
.avisx__grid .avix{flex:0 0 calc((100% - 2.8rem)/3);scroll-snap-align:start}
.carnetx__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:1.4rem}
.carnetx__grid::-webkit-scrollbar{display:none}
.carnetx__grid .pc-art{flex:0 0 calc((100% - 2.8rem)/3);scroll-snap-align:start}
@media(max-width:900px){.avisx__grid .avix,.carnetx__grid .pc-art{flex-basis:86%}}
/* ==== ANIMATIONS V2 — reprises du prototype Vercel (tsarine.js/css) ==== */
/* hero : cascade du contenu de la slide active (fondu + montée + défloutage) */
html.rvon .hero4__s .hero4__in>*{opacity:0;translate:0 16px;filter:blur(4px);transition:opacity .7s var(--ease),translate .7s var(--ease),filter .7s var(--ease)}
html.rvon .hero4__s.on .hero4__in>*{opacity:1;translate:0 0;filter:none;transition-delay:.12s}
html.rvon .hero4__s.on .hero4__in>*:nth-child(2){transition-delay:.26s}
html.rvon .hero4__s.on .hero4__in>*:nth-child(3){transition-delay:.4s}
html.rvon .hero4__s.on .hero4__in>*:nth-child(4){transition-delay:.54s}
/* dots du hero : barre de progression sur la slide active (6.5s = DELAY du slider js) */
.hero4__dots button{position:relative;overflow:hidden}
html.rvon .hero4__dots button[aria-current]::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--v2-gold);border-radius:99px;animation:dotfill4 6.5s linear forwards}
@keyframes dotfill4{to{width:100%}}
/* hovers façon prototype : cartes qui se soulèvent, images qui zooment */
.carnetx .pc-art{transition:transform .25s var(--ease),box-shadow .25s}
.carnetx .pc-art:hover{transform:translateY(-4px);box-shadow:0 18px 44px -24px rgba(26,23,27,.4)}
.carnetx .pc-art img{transition:transform .6s var(--ease)}
.carnetx .pc-art:hover img{transform:scale(1.04)}
.avix,.whyx__c,.boxpr__c{transition:transform .25s var(--ease),box-shadow .25s}
.avix:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(26,23,27,.35)}
.whyx__c:hover{transform:translateY(-3px)}
.boxpr__c:hover{transform:translateY(-4px)}
.boxpr__c--hl:hover{transform:translateY(-36px)}
/* accessibilité : tout est neutralisé si l'utilisateur réduit les animations */
@media (prefers-reduced-motion:reduce){
html.rvon .hero4__s .hero4__in>*{opacity:1!important;translate:none!important;filter:none!important;transition:none!important}
html.rvon .hero4__dots button[aria-current]::after{animation:none}
.carnetx .pc-art:hover,.avix:hover,.whyx__c:hover,.boxpr__c:hover{transform:none}
.boxpr__c--hl:hover{transform:translateY(-32px)}
}
/* ==== RESPONSIVE V2 — header, hero, sections ==== */
/* tablette : nav resserrée pour tenir sur une ligne */
@media(max-width:1240px){
.hd4__nav{padding-block:1.1rem;gap:.3rem}
.hd4__nav a{font-size:.92rem;padding:.45rem .5rem}
.hd4__nav a.hd4__box{font-size:.9rem;padding:.4rem .45rem .4rem .9rem}
.hd4__search{max-width:400px}
.hd4__top{gap:1.2rem;padding-block:1.2rem}
.hd4__logo{height:60px}
}
/* mobile / petite tablette */
@media(max-width:900px){
/* header : bandeau compact — la recherche devient une simple icône */
.hd4__top{gap:.8rem;padding-block:.8rem}
.hd4__logo{height:46px}
.hd4__search{display:none}
.hd4__ic--search{display:flex}
.hd4__ics{gap:.95rem;margin-left:auto}
.hd4__ic span{display:none}
/* nav : tiroir latéral ouvert par le burger */
.hd4__burger{display:flex}
.hd4__nav{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:4.6rem 1.3rem 1.6rem;border-bottom:0;box-shadow:0 0 44px rgba(2,32,44,.22);transform:translateX(-106%);transition:transform .35s var(--ease);z-index:75;overflow-y:auto}
html.navopen .hd4__nav{transform:none}
.hd4__nav>ul{flex-direction:column;align-items:stretch;gap:.15rem;width:100%}
.hd4__nav li{width:100%}
.hd4__nav a{width:100%;font-size:1.05rem;padding:.75rem .5rem;border-radius:10px}
.hd4__nav a:hover{background:var(--v2-blue-tint)}
.hd4__nav .caret{margin-left:auto}
.hd4__nav a.hd4__box{margin:1.3rem 0 0;justify-content:center;box-shadow:0 0 0 3px #B9E1F1}
.hd4__nav .mega2{display:none}
.hd4__close{display:grid}
html.navopen .hd4__veil{opacity:1;visibility:visible}
html.navopen body{overflow:hidden}
/* hero : bannière adoucie sous le texte, hauteurs naturelles */
.hero4,.hero4 .hero4__s{min-height:0}
.hero4__s{background:#EAF4FA}
.hero4__s>img.bg4{opacity:.2}
.hero4__in{padding:2.4rem 1rem 3.6rem}
.hero4 h1,.hero4 .h1x{font-size:clamp(1.8rem,7.2vw,2.3rem);margin-top:1rem;max-width:none}
.hero4 p.sub4{font-size:.96rem;margin-top:1rem}
.hero4__cta{gap:.7rem;margin-top:1.4rem}
.hero4__dots{bottom:1.1rem}
/* réassurance : grille 2×2 sans feuilles */
.reass4__leaf{display:none}
.reass4__in{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1rem}
.reass4__it{font-size:.85rem}
.reass4__it img{width:22px;height:22px}
/* sections : respiration réduite, entêtes compactes */
.secx{padding-block:3.2rem}
.entx{margin-bottom:1.6rem}
.entl{align-items:center;margin-bottom:1.3rem}
.entl h2{font-size:1.55rem}
.entl .lnk{font-size:.88rem}
/* conseils d'Eliane : colonne unique, photo pleine largeur en bas */
section.consel .wrapx{display:block!important}
section.consel>img[aria-hidden]{display:none}
section.consel{padding-bottom:0}
section.consel .wrapx>div:last-child{margin-bottom:0!important;margin-top:2rem}
section.consel .wrapx>div:last-child img{max-width:78%}
/* box : pas de hover décalé quand la carte HL n'est plus surélevée */
.boxpr__c--hl:hover{transform:none}
/* box : la ligne remise peut passer à la ligne (le nowrap déborde sinon) */
.boxpr__c .remise{flex-wrap:wrap;gap:.5rem .9rem}
.boxpr__c .remise b{font-size:40px}
.boxpr__c .remise span{white-space:normal}
/* newsletter footer : le formulaire s'empile proprement */
.foot4__form{width:100%;max-width:none;flex-wrap:wrap}
.foot4__form input{flex:1 1 200px;min-width:0}
/* pourquoi : cartes en pile simple sur très petit écran */
.whyx{gap:1rem}
/* storyx : le panneau bleu garde ses marges internes */
.storyx__txt{padding:2.4rem clamp(1rem,4vw,2rem)}
.storyx__img{min-height:300px}
}
@media(max-width:520px){
.whyx{grid-template-columns:1fr}
.hd4__search{font-size:.8rem}
.foot4__nlin{padding-inline:1rem}
.foot4__form{max-width:none;width:100%}
.gpill .gpill__c{padding:.7rem 1.2rem}
}
/* ==== burger mobile : éléments de base (masqués sur desktop) ==== */
.hd4__burger{flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:.6rem .5rem;flex:0 0 auto}
@media(min-width:901px){.hd4__burger,.hd4__veil{display:none}}
.hd4__burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .25s}
html.navopen .hd4__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.navopen .hd4__burger span:nth-child(2){opacity:0}
html.navopen .hd4__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hd4__veil{position:fixed;inset:0;background:rgba(2,32,44,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:70}
.hd4__close{position:absolute;top:.9rem;right:.9rem;width:40px;height:40px;place-items:center;background:var(--v2-blue-tint);color:var(--v2-blue);border:0;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer}
@media(min-width:901px){.hd4__close{display:none}}
@media (prefers-reduced-motion:reduce){.hd4__nav{transition:none}.hd4__veil{transition:none}}
/* icône recherche mobile : masquée sur desktop (la barre complète y reste) */
@media(min-width:901px){.hd4__ic--search{display:none}}
.hd4__ic--search svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
/* familles : onglets sur une seule ligne défilante en mobile */
@media(max-width:900px){
.famv2{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1*clamp(1rem,3vw,2rem));padding-inline:clamp(1rem,3vw,2rem);padding-bottom:.4rem}
.famv2::-webkit-scrollbar{display:none}
.famv2 .famx__c{flex:0 0 auto;scroll-snap-align:center}
}
/* mobile : un swipe = un produit maximum (le fling ne saute plus plusieurs cartes) */
@media(max-width:900px){
.mcar>*,.avisx__grid>*,.carnetx__grid>*,.accx__rail>*,[data-famxp]>*{scroll-snap-stop:always}
}
/* points générés sous les rails best-sellers / avis / carnet : mobile uniquement */
.dotsx--auto{margin-top:1.1rem}
@media(min-width:901px){.dotsx--auto{display:none}}
/* collections : grille → rail défilant en mobile, un point par collection */
@media(max-width:900px){
.collv2{display:flex;overflow-x:auto;gap:1rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1*clamp(1rem,3vw,2rem));padding-inline:clamp(1rem,3vw,2rem)}
.collv2::-webkit-scrollbar{display:none}
.collv2>a{flex:0 0 64%;scroll-snap-align:center;scroll-snap-stop:always}
section[aria-labelledby="colv2-t"] .dotsx:not(.dotsx--auto){display:none}
}
/* collections mobile : titre DANS le cercle (comme Figma), bouton SOUS le cercle */
@media(max-width:900px){
.collv2>a{aspect-ratio:auto;border-radius:0;overflow:visible;display:flex;flex-direction:column;align-items:center;flex-basis:68%}
.collv2>a::after{inset:0 0 auto 0;aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,rgba(10,14,18,.08) 35%,rgba(10,14,18,.72))}
.collv2 a img{position:static;width:100%;height:auto;aspect-ratio:1;border-radius:50%}
.collv2 .t{position:absolute;top:0;left:0;right:0;bottom:auto;aspect-ratio:1;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:13%;pointer-events:none;white-space:normal;font-size:1.05rem;line-height:1.2}
.collv2 .b{position:static;transform:none;margin-top:.85rem;background:transparent;border:1.5px solid var(--v2-blue);color:var(--v2-blue)}
.collv2 .b svg{stroke:var(--v2-blue)}
}
/* ============================================================
PAGE CATÉGORIE V2 — maquette Figma « Categs »
(hero collage / bannière famille, bande Boutique, sidebar
filtres à facettes, grille .pc, bannière rue de la Cité)
============================================================ */
/* ---- fil d'ariane (maquette Figma : maison + « Accueil › Thés », courant en bleu) ---- */
.breadcrumb__wrapper{background:#FBFBFB;border-bottom:0;box-shadow:inset 0 14px 12px -12px rgba(26,23,27,.07)}
.breadcrumb__wrapper .container{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.breadcrumb__wrapper .breadcrumb{display:flex;align-items:center;gap:.35rem;margin:0;padding:1.15rem 0;font-family:var(--font-text);font-size:.98rem}
.breadcrumb__wrapper .breadcrumb-item{display:inline-flex;align-items:center;color:#5C6470;padding-left:0}
.breadcrumb__wrapper .breadcrumb-link{display:inline-flex;align-items:center;gap:.55rem;color:#5C6470;text-decoration:none}
.breadcrumb__wrapper .breadcrumb-link:hover{color:var(--v2-blue)}
/* icône maison devant « Accueil » */
.breadcrumb__wrapper .breadcrumb-item:first-child .breadcrumb-link::before{content:"";width:19px;height:19px;flex:0 0 auto;background:#5F6672;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
/* séparateurs : chevron › */
.breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item::before{content:"";width:8px;height:13px;margin:0 .8rem;flex:0 0 auto;background:#9AA1AB;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;float:none;padding:0}
/* page courante en bleu */
.breadcrumb__wrapper .breadcrumb-item:last-child > span{color:var(--v2-blue);font-weight:600}
/* pages listing : sections full-bleed comme l'accueil — le container Hummingbird
est neutralisé, chaque section s'aligne via .wrapx / var(--v2-gutter) */
#category .columns-container.container,#best-sales .columns-container.container,
#new-products .columns-container.container,#prices-drop .columns-container.container,
#manufacturer .columns-container.container,#search .columns-container.container{max-width:none;width:100%;padding-inline:0}
/* les sections catégorie ne sont pas des .secx : même container interne */
.catx .wrapx,.catshop .wrapx,.catvisit .wrapx{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
/* ---- hero ---- */
.cathero{position:relative;overflow:hidden;background:#141014;color:#fff;min-height:clamp(280px,22vw,360px);display:flex;align-items:center}
/* image = partie photo de la maquette (recadrée sans le texte), ancrée à droite,
fondue vers la couleur de fond échantillonnée sur la bannière Figma */
.cathero__bg{position:absolute;top:0;right:0;bottom:0;height:100%;width:60%;object-fit:cover;object-position:right center;-webkit-mask:linear-gradient(90deg,transparent,#000 22%);mask:linear-gradient(90deg,transparent,#000 22%)}
.cathero--main::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.55) 0%,rgba(10,8,6,.28) 38%,rgba(10,8,6,0) 62%)}
.cathero__in{position:relative;z-index:1;padding:2.6rem var(--v2-gutter);max-width:calc(780px + var(--v2-gutter))}
.cathero__pill{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:var(--v2-blue);border-radius:999px;padding:.5rem 1.35rem;font-family:var(--font);font-weight:700;font-size:1.02rem;margin-bottom:1.1rem;box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
/* feuille de la maquette (masque du prototype) */
.cathero__pill::before{content:"";width:31px;height:14px;flex:0 0 auto;background:var(--v2-blue);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
.cathero h1{font-family:var(--font);font-weight:700;font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1.18;letter-spacing:-.3px;color:#fff;max-width:26ch;margin:0}
.cathero p{margin:.85rem 0 0;color:rgba(255,255,255,.82);font-size:.98rem;line-height:1.6;max-width:62ch}
/* variante famille : dégradé = couleurs échantillonnées sur les bannières Figma
(gauche → bord de la photo), sert aussi de secours sans image */
.cathero--fam{min-height:clamp(230px,17vw,280px)}
.cathero--fam.is-noir{background:linear-gradient(90deg,#111113,#252425 72%)}
.cathero--fam.is-vert{background:linear-gradient(90deg,#475402,#9EAA39 72%)}
.cathero--fam.is-blanc{background:linear-gradient(90deg,#949089,#D1CBC2 72%)}
.cathero--fam.is-oolong{background:linear-gradient(90deg,#B3802B,#B18431 72%)}
.cathero--fam.is-sombre{background:linear-gradient(90deg,#281006,#361609 72%)}
.cathero--fam.is-fume{background:linear-gradient(90deg,#1A1A1B,#1E1F20 72%)}
.cathero--fam.is-bleu{background:linear-gradient(90deg,#378A97,#4899A6 72%)}
.cathero--fam.is-glace{background:linear-gradient(90deg,#B59801,#DDB602 72%)}
.cathero--fam.is-puerh{background:linear-gradient(90deg,#0E0500,#110600 72%)}
/* lisibilité du texte sur la partie claire des bannières blanc/glacé */
.cathero--fam.is-blanc .cathero__in h1,.cathero--fam.is-blanc .cathero__in p{text-shadow:0 1px 10px rgba(0,0,0,.25)}
/* ---- bande Boutique (pastilles familles) ---- */
.catshop{background:#fff;padding:3rem 0 2.4rem}
.catshop .entx{margin-bottom:.4rem}
.catshop__fams a.famx__c{text-decoration:none}
.catshop__fams a.famx__c:hover{color:var(--v2-blue)}
/* ---- listing : titre, deux colonnes ---- */
.catx{background:#fff;padding:1.2rem 0 4rem}
.catx__head{margin-bottom:1.6rem}
.catx__head h1{font-family:var(--font);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--v2-ink);margin:0}
.catx__head h1 em{font-style:normal;color:var(--v2-blue)}
.catx__head .filetx{display:block;width:46px;height:4px;border-radius:3px;background:var(--v2-blue);margin-top:.6rem}
.catx__grid{display:grid;grid-template-columns:264px minmax(0,1fr);gap:1.6rem;align-items:start}
.catx__side{position:sticky;top:1rem}
/* ---- sidebar filtres ---- */
.fltx{border:1px solid #EEF1F3;border-radius:16px;background:#fff;padding:1.15rem 1.2rem 1.35rem;box-shadow:0 10px 30px -24px rgba(26,23,27,.25);font-family:var(--font-text)}
.fltx__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-bottom:.85rem;border-bottom:1px solid #EEF1F3}
.fltx__title{font-family:var(--font);font-weight:700;font-size:1.02rem;color:var(--v2-ink)}
.fltx__clear{border:0;background:none;padding:0;font:inherit;font-size:.82rem;font-weight:600;color:var(--v2-blue);cursor:pointer;border-bottom:1px solid currentColor}
.fltx__sec{padding:1rem 0 .2rem}
.fltx__sec + .fltx__sec{border-top:1px solid #F3F5F7}
.fltx__t{font-family:var(--font);font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--v2-blue-dark);margin:0 0 .7rem}
.fltx__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.fltx__opt{display:flex;align-items:center;gap:.6rem;cursor:pointer;margin:0}
.fltx__opt input{position:absolute;opacity:0;pointer-events:none}
.fltx__box{width:18px;height:18px;flex:0 0 auto;border:1.5px solid #D4DAE0;border-radius:5px;background:#fff;display:grid;place-items:center;transition:background .18s,border-color .18s}
.fltx__box svg{width:12px;height:12px;opacity:0;color:#fff}
.fltx__opt input:checked ~ .fltx__box{background:var(--v2-blue);border-color:var(--v2-blue)}
.fltx__opt input:checked ~ .fltx__box svg{opacity:1}
.fltx__opt input:focus-visible ~ .fltx__box{outline:3px solid var(--v2-blue-pale);outline-offset:1px}
.fltx__lbl{flex:1;font-size:.9rem;color:var(--v2-ink);text-decoration:none}
.fltx__opt.on .fltx__lbl{font-weight:600;color:var(--v2-blue-dark)}
.fltx__n{font-size:.8rem;color:var(--v2-muted)}
/* slider prix (noUiSlider du thème) */
.fltx .search-filters__slider-container{padding:.4rem .3rem 0}
.fltx .noUi-target{border:0;box-shadow:none;background:#E7ECF0;height:4px;border-radius:2px}
.fltx .noUi-connect{background:var(--v2-blue)}
.fltx .noUi-handle{width:16px;height:16px;top:-6px;right:-8px;border-radius:50%;border:2px solid var(--v2-blue);background:#fff;box-shadow:none;cursor:grab}
.fltx .noUi-handle::before,.fltx .noUi-handle::after{display:none}
.fltx .search-filters__slider-values{margin-top:.7rem;font-size:.85rem;color:var(--v2-muted)}
/* ---- barre compteur + tri ---- */
.catx__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid #EEF1F3;border-radius:14px;background:#fff;padding:.55rem 1.1rem;margin-bottom:1.1rem}
.catx__count{margin:0;font-size:.92rem;color:var(--v2-muted)}
.catx__tools{display:flex;align-items:center;gap:1rem}
.catx__filtbtn{display:none;align-items:center;gap:.45rem;border:1px solid #E2E8ED;border-radius:999px;background:#fff;padding:.4rem 1rem;font:inherit;font-size:.88rem;font-weight:600;color:var(--v2-ink);cursor:pointer}
.catx__sort{display:flex;align-items:center;gap:.5rem}
.catx__sortlbl{font-size:.9rem;color:var(--v2-muted)}
.catx__sortbtn{border:0;background:none;padding:0;font-family:var(--font);font-weight:600;font-size:.92rem;color:var(--v2-ink);cursor:pointer}
.catx__sortbtn::after{content:"";display:inline-block;margin-left:.4rem;vertical-align:.15em;width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg)}
.catx__sort .dropdown-menu{border:1px solid #EEF1F3;border-radius:12px;box-shadow:0 18px 40px -24px rgba(26,23,27,.35);padding:.4rem;min-width:210px}
.catx__sort .dropdown-item{border-radius:8px;padding:.45rem .7rem;font-size:.9rem;color:var(--v2-ink)}
.catx__sort .dropdown-item:hover{background:var(--v2-blue-tint)}
.catx__sort .dropdown-item.current{color:var(--v2-blue);font-weight:600}
/* ---- filtres actifs ---- */
.aflx__list{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem;padding:0}
.aflx__pill{display:inline-flex;align-items:center;gap:.45rem;background:var(--v2-blue-pale);color:var(--v2-blue-dark);border-radius:999px;padding:.3rem .85rem;font-size:.84rem;font-weight:600;text-decoration:none}
.aflx__pill:hover{background:var(--v2-blue);color:#fff}
/* ---- grille produits ---- */
.catx .products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.catx .products .pc{scroll-snap-align:none}
/* ---- pagination ---- */
.catx .products__pagination{margin-top:2rem}
.catx .pagination__container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.catx .pagination__number{font-size:.88rem;color:var(--v2-muted)}
.catx .pagination{display:flex;gap:.35rem;list-style:none;margin:0;padding:0}
.catx .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 .6rem;border:1px solid #E2E8ED;border-radius:999px;background:#fff;font:inherit;font-size:.9rem;font-weight:600;color:var(--v2-ink);cursor:pointer}
.catx .page-item.active .page-link{background:var(--v2-blue);border-color:var(--v2-blue);color:#fff}
.catx .page-link.disabled{opacity:.4;cursor:default}
.catx .page-link:hover:not(.disabled):not([aria-current]){border-color:var(--v2-blue);color:var(--v2-blue)}
/* ---- bannière « La boutique, rue de la Cité » ---- */
.catvisit{background:#fff;padding:0 0 3.4rem}
.catvisit__card{position:relative;border-radius:18px;overflow:hidden;min-height:clamp(260px,24vw,340px);display:flex;align-items:center;box-shadow:0 24px 60px -38px rgba(26,23,27,.5)}
.catvisit__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.catvisit__card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,14,.78) 0%,rgba(10,10,14,.45) 45%,rgba(10,10,14,.1) 75%)}
.catvisit__txt{position:relative;z-index:1;padding:2.2rem clamp(1.4rem,4vw,3rem);color:#fff;max-width:560px}
.catvisit__txt h2{font-family:var(--font);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.1rem);color:#fff;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0}
.catvisit__txt .pillw{display:inline-block;background:var(--v2-blue);color:#fff;border-radius:999px;padding:.22rem 1rem;font-size:.72em}
.catvisit__txt p{margin:.8rem 0 1.2rem;color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.6;max-width:48ch}
/* ---- responsive ---- */
@media(max-width:1000px){
.catx__grid{grid-template-columns:1fr}
.catx__side{position:static;display:none}
.catx__side.open{display:block}
.catx__filtbtn{display:inline-flex}
.catx .products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.cathero__in{padding-block:2rem}
.cathero p{font-size:.92rem}
.catshop{padding:2.2rem 0 1.8rem}
.catx__bar{flex-wrap:wrap;row-gap:.4rem}
.catvisit__card{min-height:300px}
.catvisit__txt{padding:1.6rem 1.2rem}
}
@media(max-width:480px){
.catx .products{grid-template-columns:1fr;gap:.9rem}
}
/* hero catégorie mobile : photo en filigrane pleine largeur, texte lisible */
@media(max-width:700px){
.cathero__bg{width:100%;opacity:.22;-webkit-mask:none;mask:none}
.cathero--main::after{background:linear-gradient(180deg,rgba(10,8,6,.2),rgba(10,8,6,.45))}
}
/* fix : le panneau d'ajout rapide héritait de --r (50px) alors que la carte V2 est à 16px —
coins blancs débordant de la carte. Desktop : pas de radius (clippé par .pc overflow:hidden) ;
mobile : le bottom-sheet garde son 16px 16px 0 0. */
@media(min-width:861px){.pc .qkp{border-radius:0}}
/* ============================================================
FICHE PRODUIT V2 — maquette Figma « Fiche produit »
============================================================ */
#product .columns-container.container{max-width:none;width:100%;padding-inline:0}
.fpx{background:#fff;padding:1.6rem 0 5rem}
.fpx .wrapx{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.fpx__grid{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:clamp(1.6rem,3.5vw,3.2rem);align-items:start}
/* ---- galerie (restyle du carousel Hummingbird) ---- */
.fpx__gal .product__images{position:sticky;top:1rem}
.fpx__gal .product__carousel{border-radius:18px;overflow:hidden;background:#F8F6F2;border:1px solid #EFEBE4}
.fpx__gal .carousel-item img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.fpx__gal .product__thumbnails{display:flex;gap:.7rem;margin-top:.8rem;overflow-x:auto;scrollbar-width:none}
.fpx__gal .product__thumbnails::-webkit-scrollbar{display:none}
.fpx__gal .product__thumbnail{width:84px;height:84px;flex:0 0 auto;border-radius:14px;overflow:hidden;border:1.5px solid #EFEBE4;background:#F8F6F2;padding:0;cursor:pointer}
.fpx__gal .product__thumbnail img{width:100%;height:100%;object-fit:cover}
.fpx__gal .product__thumbnail.active,.fpx__gal .product__thumbnail:hover{border-color:var(--v2-blue)}
.fpx__gal .carousel-control-prev,.fpx__gal .carousel-control-next{width:44px;height:44px;top:50%;transform:translateY(-50%);background:#fff;border-radius:50%;opacity:.9;color:var(--v2-ink);box-shadow:0 8px 22px -12px rgba(26,23,27,.4);margin-inline:.7rem}
.fpx__gal .product__zoom-button,.fpx__gal .layer{display:none}
/* ---- colonne infos ---- */
.fpx__info{font-family:var(--font-text)}
.fpx__pill{display:inline-flex;align-items:center;background:#fff;border:1.5px solid var(--v2-blue);color:var(--v2-blue);border-radius:999px;padding:.28rem .95rem;font-family:var(--font);font-weight:600;font-size:.8rem;margin-bottom:.85rem}
.fpx__title{font-family:var(--font);font-weight:800;font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:var(--v2-ink);margin:0 0 .55rem}
.fpx__rating{display:flex;align-items:center;gap:.45rem;margin-bottom:.75rem;font-size:.92rem}
.fpx__rating .stars{display:inline-flex;gap:2px}
.fpx__rating .stars img{width:15px;height:15px}
.fpx__rating b{font-weight:700}
.fpx__rating .n{color:var(--v2-muted)}
/* prix (restyle partial Hummingbird) */
.fpx__priceline{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.9rem}
.fpx__priceline .product__prices-block{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.fpx__priceline .product__price{font-family:var(--font);font-weight:800;font-size:1.75rem;color:var(--v2-blue)}
.fpx__priceline .product__discount-price{order:2}
.fpx__priceline .product__regular-price{color:#9AA1AB;text-decoration:line-through;font-size:1.05rem;font-weight:600}
.fpx__priceline .product__discount-percentage,.fpx__priceline .product__discount-amount{background:var(--v2-blue-pale);color:var(--v2-blue-dark);border-radius:999px;padding:.18rem .6rem;font-size:.78rem;font-weight:700}
.fpx__priceline .product__tax-infos{display:none}
.fpx__sublabel{display:block;font-family:var(--font);font-weight:700;font-size:.95rem;color:var(--v2-ink);margin-bottom:.5rem}
.fpx__desc{margin:0 0 1.1rem}
.fpx__desc p{color:var(--v2-muted);font-size:.95rem;line-height:1.65;margin:0;max-width:58ch}
/* chips Format */
.fpx__variants{margin-bottom:1rem}
.fpx__variants .product-variant{border:0;padding:0;margin:0}
.fpx__chips{display:flex;flex-wrap:wrap;gap:.55rem}
.fchp2{display:flex;flex-direction:column;align-items:center;gap:.1rem;border:1.5px solid #E2E8ED;border-radius:12px;background:#fff;padding:.5rem 1rem;cursor:pointer;transition:border-color .18s,background .18s,color .18s;min-width:104px;text-align:center}
a.fchp2{text-decoration:none} /* chips-liens des formats « linked » (produits frères) */
.fchp2 .t{font-family:var(--font);font-weight:600;font-size:.82rem;color:var(--v2-ink)}
.fchp2 .p{font-size:.78rem;color:var(--v2-muted)}
.fchp2:hover{border-color:var(--v2-blue)}
.fchp2.on,.fchp2:has(input:checked){background:var(--v2-blue);border-color:var(--v2-blue)}
.fchp2.on .t,.fchp2.on .p,.fchp2:has(input:checked) .t,.fchp2:has(input:checked) .p{color:#fff}
/* quantité + ajouter + cœur + acheter maintenant */
.fpx .product__add-to-cart-container{margin:0}
.fpx .product__availability{margin:.2rem 0 .8rem;font-size:.9rem}
.fpx .product__availability-status.text-success{color:#1B9E4B!important;font-weight:600}
.fpx .product__availability-icon{font-size:1rem}
.fpx .product-quantity{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.fpx .quantity-button{display:inline-flex;align-items:center;border:1.5px solid #E2E8ED;border-radius:999px;overflow:hidden}
.fpx .quantity-button .btn{border:0;background:#fff;width:40px;height:44px;color:var(--v2-blue-dark);font-size:1.1rem}
.fpx .quantity-button input{border:0;width:44px;text-align:center;font-weight:700;font-size:.95rem;-moz-appearance:textfield}
.fpx .quantity-button input::-webkit-inner-spin-button{display:none}
.fpx .product__add-to-cart{flex:1;min-width:220px}
.fpx .product__add-to-cart-button{width:100%;border-radius:999px;background:var(--v2-blue);border:0;font-family:var(--font);font-weight:700;font-size:.98rem;padding:.8rem 1.4rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.fpx .product__add-to-cart-button:hover{background:var(--v2-blue-dark)}
.fpx__fav{width:46px;height:46px;flex:0 0 auto;border:1.5px solid #E2E8ED;border-radius:50%;background:#fff;display:grid;place-items:center;cursor:pointer;position:static;opacity:1}
.fpx__fav svg{width:20px;height:20px;fill:none;stroke:var(--v2-ink);stroke-width:1.8}
.fpx__fav.on svg{fill:#E5484D;stroke:#E5484D}
.fpx__buynow{flex-basis:100%;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:999px;background:var(--v2-gold);color:#fff;font-family:var(--font);font-weight:700;font-size:.95rem;padding:.75rem 1.4rem;cursor:pointer;margin-top:.2rem}
.fpx__buynow:hover{background:var(--v2-gold-ink)}
/* guide d'infusion */
.fpx__guide{margin-top:1.3rem;border:1px solid #EEF1F3;border-radius:16px;background:#FBFBFB;padding:1rem 1.2rem}
.fpx__guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.fpx__guide-grid .g{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem}
.fpx__guide-grid .g i{width:34px;height:34px;display:grid;place-items:center;color:var(--v2-blue);border:1.5px solid var(--v2-blue-pale);border-radius:8px;transform:rotate(45deg);font-style:normal;margin-bottom:.35rem}
.fpx__guide-grid .g i > *{transform:rotate(-45deg)}
.fpx__guide-grid .g small{color:var(--v2-muted);font-size:.74rem}
.fpx__guide-grid .g b{font-size:.85rem;font-weight:700}
/* ---- réassurance 2×2 ---- */
.fpx__reass{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin:2.2rem 0 0}
.fpx__reass .r{display:flex;align-items:center;gap:.9rem;border:1px solid #EEF1F3;border-radius:14px;background:#fff;padding:.9rem 1.1rem}
.fpx__reass .ic{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;background:var(--v2-blue-pale);border-radius:12px}
.fpx__reass .ic img{width:22px;height:22px}
.fpx__reass b{display:block;font-family:var(--font);font-size:.92rem}
.fpx__reass small{color:var(--v2-muted);font-size:.8rem}
.fpx__reass .pays{display:flex;gap:.4rem;align-items:center;margin-top:.25rem}
.fpx__reass .pays img{height:16px;width:auto}
/* ---- sections basses ---- */
.fpx__sec{margin-top:5rem}
.fpx__h2{font-family:var(--font);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--v2-ink);margin:0 0 1.2rem}
.fpx__h2 em{font-style:normal;color:var(--v2-blue)}
.fpx__accord{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.fpx__rituel{scroll-snap-type:x mandatory}
.fpx__rituel .pc{flex:0 0 calc((100% - 3rem)/4);scroll-snap-align:start}
/* accordéons */
.fpx__acc{margin-top:5rem;border-top:1px solid #EEF1F3}
.fpx__acc-it{border-bottom:1px solid #EEF1F3}
.fpx__acc-it summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;cursor:pointer;padding:1.05rem .2rem;font-family:var(--font);font-weight:700;font-size:1.02rem;color:var(--v2-ink)}
.fpx__acc-it summary::-webkit-details-marker{display:none}
.fpx__acc-it summary svg{width:18px;height:18px;flex:0 0 auto;color:var(--v2-muted);transition:transform .25s}
.fpx__acc-it[open] summary svg{transform:rotate(180deg)}
.fpx__acc-body{padding:0 .2rem 1.1rem;color:var(--v2-muted);font-size:.95rem;line-height:1.65;max-width:72ch}
.fpx__acc-body b{color:var(--v2-ink)}
/* ---- sections modules sous la fiche (même catégorie, avis) ---- */
#product .ps-categoryproducts,#product .product-accessories,#product .ps-viewedproduct .module-products{max-width:var(--v2-wrap);margin:5rem auto 0;padding-inline:clamp(1rem,3vw,2rem)}
#product .ps-viewedproduct{margin-bottom:5rem}
#product #product-comments-list-header,#product .product-comments{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
/* ---- responsive ---- */
@media(max-width:900px){
.fpx__grid{grid-template-columns:1fr}
.fpx__gal .product__images{position:static}
.fpx__accord{grid-template-columns:1fr;gap:.9rem}
.fpx__rituel .pc{flex:0 0 78%}
.fpx__reass{grid-template-columns:1fr}
.fpx__guide-grid{grid-template-columns:repeat(2,1fr);row-gap:1.1rem}
}
/* fiche produit — finitions : éléments Hummingbird hors maquette + sections modules */
#product .product-flags{display:none}
#product .fpx__gal .product__zoom{display:none}
#product .ps-sharebuttons{display:none}
#product .section-title{font-family:var(--font);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--v2-ink);text-align:left}
#product .product-comments-wrapper,#product .product-comment-modal-wrapper{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
#product .product-comment-list-item{border:1px solid #EEF1F3;border-radius:14px;padding:1rem 1.2rem;margin-bottom:.9rem}
#product .ps-categoryproducts .products,#product .ps-viewedproduct .products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
#product .ps-viewedproduct .section-title{margin-bottom:1.1rem}
@media(max-width:900px){#product .ps-categoryproducts .products,#product .ps-viewedproduct .products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){#product .ps-categoryproducts .products,#product .ps-viewedproduct .products{grid-template-columns:1fr}}
/* fix flèches galerie : l'icône Hummingbird est un carré blanc 36px arrondi 4px
qui dépassait du cercle 44px → chevrons propres en mask */
.fpx__gal .carousel-control-prev,.fpx__gal .carousel-control-next{color:var(--v2-ink)}
.fpx__gal .carousel-control-prev-icon,.fpx__gal .carousel-control-next-icon{width:16px;height:16px;border-radius:0;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
.fpx__gal .carousel-control-next-icon{-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
/* la modal zoom n'est pas dans la maquette : on neutralise aussi son ouverture clavier */
#product .js-product-images-modal{display:none!important}
/* fix animation galerie : un reset écrasait le margin-right:-100% de Bootstrap
→ les 2 slides s'empilaient (hauteur double) pendant la transition */
.fpx__gal .carousel-item{margin-right:-100%}
/* ============================================================
FICHE PRODUIT V2 — corrections audit maquette (28/07)
============================================================ */
/* 1-2. prix maquette + stock */
.fpx__prices .l1{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.fpx__prices .cur{font-family:var(--font);font-weight:800;font-size:1.7rem;color:#1B5E80}
.fpx__prices s{color:#9AA1AB;font-size:1.05rem;font-weight:600}
.fpx__prices .pm2{background:var(--v2-blue-pale);color:var(--v2-blue-dark);border-radius:999px;padding:.2rem .65rem;font-size:.8rem;font-weight:700}
.fpx__prices .stock{display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;color:#12A150;font-size:.88rem;font-weight:600}
.fpx__prices .stock i{width:8px;height:8px;border-radius:50%;background:#12A150}
/* 9. kicker : fond bleu clair sans bordure */
.fpx__pill{background:var(--v2-blue-pale);border:0;color:var(--v2-blue-dark)}
/* 8. galerie : pas de flèches sur la cover (navigation par vignettes) */
.fpx__gal .carousel-control-prev,.fpx__gal .carousel-control-next{display:none}
/* 12. guide : titre hors bandeau, libellés une ligne */
.fpx__guidewrap{margin-top:1.3rem}
.fpx__guide{border:0;border-radius:14px;background:var(--v2-blue-tint);padding:.9rem 1.1rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.fpx__guide .g{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--v2-muted)}
.fpx__guide .g b{color:var(--v2-ink);font-weight:700}
.fpx__guide .g i{width:26px;height:26px;display:grid;place-items:center;color:var(--v2-blue);border:1.5px solid #BFE3F5;border-radius:6px;transform:rotate(45deg);font-style:normal;font-size:.8rem}
.fpx__guide .g i > *{transform:rotate(-45deg)}
/* 3. réassurance compacte dans la colonne */
.fpx__reass{grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1.4rem 0 0}
.fpx__reass .r{padding:.7rem .9rem;gap:.7rem;align-items:flex-start}
.fpx__reass .ic{width:22px;height:22px;background:none;border-radius:0;margin-top:.15rem}
.fpx__reass b{font-size:.88rem}
.fpx__reass small{font-size:.78rem}
/* 4. accord parfait : mini-cartes colonne droite */
.fpx__accordwrap{margin-top:1.6rem}
.fpx__accord{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.accmini{border:1px solid #EEF1F3;border-radius:14px;background:#fff;padding:.7rem;display:flex;flex-direction:column;gap:.25rem;cursor:pointer;font-family:var(--font-text)}
.accmini img{width:100%;aspect-ratio:1;object-fit:contain;background:#F8F6F2;border-radius:10px;margin-bottom:.35rem}
.accmini .n{font-family:var(--font);font-size:.82rem;font-weight:700;line-height:1.25}
.accmini small{color:var(--v2-muted);font-size:.72rem}
.accmini .px{font-family:var(--font);font-weight:700;font-size:.88rem;margin-top:.15rem}
.accmini .row{display:flex;align-items:center;gap:.4rem;margin-top:.45rem}
.accmini .q{display:inline-flex;align-items:center;border:1px solid #E2E8ED;border-radius:8px;flex:0 0 auto}
.accmini .q button{width:24px;height:30px;border:0;background:#fff;color:var(--v2-blue-dark);cursor:pointer;font-size:.9rem;border-radius:8px}
.accmini .q b{min-width:18px;text-align:center;font-size:.8rem}
.accmini .qkadd{flex:1;min-height:30px;border-radius:8px;font-size:.72rem;padding:0 .4rem}
.accmini .qkadd::after{display:none}
/* 5. accordéons : tag résumé à droite */
.fpx__acc-it summary .tagr{display:inline-flex;align-items:center;gap:.8rem;margin-left:auto;font-family:var(--font-text);font-weight:500;font-size:.85rem;color:#7B93A6}
/* 6-7. titres de sections sobres + nav rail */
.fpx__sechead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.fpx__h3{font-family:var(--font);font-weight:700;font-size:1.35rem;color:var(--v2-ink);margin:0}
.fpx__h3--sec{margin-bottom:1.1rem}
.fpx__nav{display:inline-flex;gap:.5rem}
.fpx__nav button{width:38px;height:38px;border:1px solid #E2E8ED;border-radius:50%;background:#fff;color:var(--v2-ink);font-size:1.1rem;cursor:pointer;display:grid;place-items:center}
.fpx__nav button:hover{border-color:var(--v2-blue);color:var(--v2-blue)}
#product .section-title{font-size:1.35rem}
/* 13. notification panier contenue
(l'habillage complet de #notifications est en fin de fichier, bloc
« BANDEAU DE NOTIFICATION » — il vaut pour toutes les pages) */
#product #notifications .container{max-width:var(--v2-wrap);padding-inline:clamp(1rem,3vw,2rem)}
/* bannière Coffret Évasion */
.fpx__coffret{background:#fff;padding:5rem 0 0}
.fpx__coffret .wrapx{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.fpx__coffret-card{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;background:#0B2740;border-radius:18px;overflow:hidden}
.fpx__coffret-card .t{padding:2.2rem clamp(1.4rem,3.5vw,3rem);color:#fff;position:relative;z-index:1}
.fpx__coffret-card .k{display:block;color:var(--v2-gold);font-family:var(--font);font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.fpx__coffret-card h2{font-family:var(--font);font-weight:700;font-size:clamp(1.4rem,2.3vw,1.95rem);color:#fff;margin:0 0 .6rem;max-width:22ch}
.fpx__coffret-card h2 em{font-style:normal;color:var(--v2-gold)}
.fpx__coffret-card p{color:rgba(255,255,255,.8);font-size:.92rem;line-height:1.6;max-width:48ch;margin:0 0 1.2rem}
.fpx__coffret-card > img{width:100%;height:100%;object-fit:cover;min-height:260px}
@media(max-width:900px){
.fpx__accord{grid-template-columns:repeat(3,minmax(0,1fr))}
.fpx__coffret-card{grid-template-columns:1fr}
.fpx__coffret-card > img{min-height:200px}
.fpx__prices .stock{margin-left:0;flex-basis:100%}
}
@media(max-width:560px){.fpx__accord{grid-template-columns:1fr 1fr}}
/* guide d'infusion & réassurance : icônes officielles du zip « Fiche produit » */
.fpx__guide{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:1.1rem .9rem}
.fpx__guide .g{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;font-size:.8rem}
.fpx__guide .g img{width:54px;height:54px;display:block}
.fpx__guide .g i{display:none}
.fpx__reass .r{align-items:center}
.fpx__reass .ic{width:26px;height:26px;margin-top:0;flex:0 0 auto}
.fpx__reass .pays{margin-top:.3rem}
.fpx__reass .pays img{height:14px}
@media(max-width:560px){.fpx__guide{grid-template-columns:repeat(2,1fr);row-gap:1rem}}
.fpx__guide .g b{white-space:nowrap}
/* accord parfait : ligne prix + stepper puis bouton pleine largeur (maquette) */
.accmini .row1{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.5rem}
.accmini .px{color:#1B5E80;font-size:.95rem;margin-top:0}
.accmini .q{border:0;background:none;gap:.25rem}
.accmini .q button{width:27px;height:27px;border-radius:7px;background:#EFF5F9;color:var(--v2-ink);font-size:.85rem}
.accmini .q button:hover{background:var(--v2-blue-pale);color:var(--v2-blue-dark)}
.accmini .q b{min-width:22px;font-size:.85rem}
.accmini > .qkadd{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;width:100%;min-height:36px;border-radius:10px;font-size:.78rem;margin-top:.55rem}
/* accord parfait : séparateur + stepper pill + bouton pill (détail maquette) */
.accmini .row1{border-top:1px solid #EEF1F3;padding-top:.65rem;margin-top:.55rem}
.accmini .q{background:#EAF3F8;border-radius:999px;padding:2px;gap:0}
.accmini .q button{width:30px;height:26px;border-radius:999px;background:transparent;color:var(--v2-ink)}
.accmini .q button:hover{background:transparent;color:var(--v2-blue-dark)}
.accmini .q b{min-width:26px;height:26px;line-height:26px;background:#fff;border-radius:999px;text-align:center}
.accmini > .qkadd{border-radius:999px}
/* accordéons fiche : icônes officielles zip + chevron bleu + tag droite affiné */
.fpx__acc-it summary{gap:.7rem}
.fpx__acc-it summary .ico{width:22px;height:22px;flex:0 0 auto;object-fit:contain}
.fpx__acc-it summary .tagr{color:#8CA3B5;font-size:.84rem}
.fpx__acc-it summary svg{color:var(--v2-blue);width:16px;height:16px}
.fpx__acc-body{padding-left:calc(22px + .9rem)}
/* accordéons fiche produit — portés du prototype Vercel /fiche-produit
(animation grid-template-rows, icônes tracées, hint, chevron carré) */
/* comme le prototype : pas de ligne au-dessus du 1er titre, filet 1px sous chaque section */
.fpx__acc{border-top:0}
.acc2{border-bottom:1px solid var(--line);border-radius:50px;overflow:visible}
.acc2>button{width:100%;display:flex;align-items:center;gap:1rem;padding:.9rem .2rem;text-align:left;cursor:pointer;background:none;border:0;font:inherit}
.acc2 .bic{width:2.1rem;height:2.1rem;flex:0 0 auto;fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.acc2.open .bic,.acc2>button:hover .bic{stroke:var(--blue-d)}
.acc2 h2{font-family:var(--font);font-weight:600;font-size:1.28rem;flex:1;line-height:1.2;margin:0;color:var(--v2-ink)}
.acc2 .hint{display:block;font-size:.76rem;color:var(--muted);font-weight:400}
.acc2 .chev2{width:10px;height:10px;border:1.6px solid var(--blue-d);border-top:0;border-left:0;transform:rotate(45deg);transition:transform .3s var(--ease);flex:0 0 auto;margin-right:.3rem}
.acc2.open .chev2{transform:rotate(-135deg)}
.acc2__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc2.open .acc2__b{grid-template-rows:1fr}
.acc2__in{overflow:hidden}
.acc2__pad{padding:.2rem .2rem 1.4rem;color:var(--muted)}
.acc2__pad b{color:var(--fg);font-weight:600}
.acc2 .txa p{color:var(--muted);max-width:62ch;margin:0}
.acc2 .txa ul{list-style:none;display:grid;gap:.5rem;margin:.7rem 0 0;padding:0}
.acc2 .txa li{display:flex;gap:.6rem;align-items:baseline;font-size:.92rem;color:var(--fg)}
.acc2 .txa li::before{content:"";width:15px;height:7px;flex:0 0 auto;background:var(--blue);-webkit-mask:var(--leafmask) center/contain no-repeat;mask:var(--leafmask) center/contain no-repeat}
@media(prefers-reduced-motion:reduce){.acc2__b,.acc2 .chev2{transition:none}}
/* =========================================================
AVIS FICHE PRODUIT (maquette Figma) — module productcomments
templates surchargés dans themes/latsarine/modules/productcomments
========================================================= */
.avz__title{font-family:var(--font);font-weight:600;font-size:1.6rem;color:var(--v2-ink);margin:0 0 1.3rem}
.avz__card{background:#fff;border:1px solid #ECEFF2;border-radius:14px;padding:1.15rem 1.4rem 1.25rem;margin-bottom:.9rem}
.avz__cardhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.35rem}
.avz__cardhead .n{font-family:var(--font);font-weight:700;font-size:1.02rem;color:var(--v2-ink)}
.avz__cardhead .d{color:var(--v2-muted);font-size:.85rem}
.avz__card .txt{margin:.55rem 0 0;color:var(--v2-muted);line-height:1.65;max-width:90ch}
.avz__empty{background:#fff;border:1px solid #ECEFF2;border-radius:14px;padding:1.3rem 1.4rem;color:var(--v2-muted)}
/* étoiles du module (sprites PNG) recolorées : masque star-gold */
.product-comments-wrapper .star-content{margin:0}
.product-comments-wrapper .star-content div.star,
.product-comments-wrapper .star-content div.star-on,
.product-comments-wrapper .star-content div.star-hover{width:17px;height:17px;margin:0 3px 0 0;flex:0 0 auto;background:#DCE3E9;-webkit-mask:url(../img/v2/icons/star-gold.svg) center/contain no-repeat;mask:url(../img/v2/icons/star-gold.svg) center/contain no-repeat}
.product-comments-wrapper .star-content div.star-on,
.product-comments-wrapper .star-content div.star-hover{background:#F9BC13}
.product-comments-wrapper .grade-stars{height:17px;min-width:105px}
.product-comments-wrapper .grade-stars .star-content{top:0}
/* pagination (markup Hummingbird .pagination/.page-link) */
#product-comments-list-pagination ul{list-style:none;display:flex;justify-content:center;gap:.4rem;margin:1.4rem 0 0;padding:0}
#product-comments-list-pagination .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 .5rem;border-radius:999px;border:1px solid #E3E8EC;background:#fff;color:var(--v2-ink);font-size:.9rem;cursor:pointer;transition:background .2s,color .2s}
#product-comments-list-pagination .page-item.active .page-link{background:var(--v2-blue);border-color:var(--v2-blue);color:#fff}
#product-comments-list-pagination .page-item.disabled .page-link{opacity:.4;cursor:default}
/* grille moyenne + formulaire */
.avz__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);margin-top:2.6rem;align-items:start}
.avz__avg h3,.avz__form h3{font-family:var(--font);font-weight:700;font-size:1.35rem;color:#14335C;margin:0 0 1.4rem}
.avz__score{display:flex;flex-direction:column;gap:.45rem;float:left;margin-right:2.2rem}
.avz__score .big{font-family:var(--font);font-weight:800;font-size:3.4rem;line-height:1;color:var(--v2-ink)}
.avz__score .stx{position:relative;display:inline-block;height:20px;width:110px}
.avz__score .stx .stoff,.avz__score .stx .ston{position:absolute;inset:0;display:flex;gap:2px;overflow:hidden;white-space:nowrap}
.avz__score .stx img{width:20px;height:20px;flex:0 0 auto}
.avz__score .stx .stoff img{filter:grayscale(1) brightness(1.2)}
/* variante compacte : note sous le titre de la fiche */
.fpx__rating .stx{position:relative;display:inline-block;height:16px;width:88px;flex:0 0 auto}
.fpx__rating .stx .stoff,.fpx__rating .stx .ston{position:absolute;inset:0;display:flex;gap:2px;overflow:hidden;white-space:nowrap}
.fpx__rating .stx img{width:16px;height:16px;flex:0 0 auto}
.fpx__rating .stx .stoff img{filter:grayscale(1) brightness(1.2)}
/* étoiles du module dans la colonne d'achat : doublon de la note du titre */
#product .product-comments-additional-info{display:none}
/* galerie collante au scroll (prototype .galcol{position:sticky}) — desktop seulement */
@media(min-width:901px){
.fpx__grid{align-items:start}
.fpx__gal{position:sticky;top:1.5rem}
}
.avz__score .nb{color:var(--v2-muted);font-size:.95rem}
.avz__bars{list-style:none;display:grid;gap:.85rem;margin:0;padding:0;overflow:hidden}
.avz__bars li{display:flex;align-items:center;gap:1.1rem}
.avz__bars .g{width:1ch;text-align:center;color:var(--v2-ink);font-size:.95rem}
.avz__bars .track{flex:1;height:9px;background:#E9EDF0;border-radius:999px;overflow:hidden}
.avz__bars .fill{display:block;height:100%;background:var(--v2-blue);border-radius:999px}
.avz__nonote{color:var(--v2-muted)}
/* formulaire */
.avz__form .lb{display:block;font-family:var(--font);font-weight:600;font-size:.98rem;color:var(--v2-ink);margin:0 0 .55rem}
.avz__form #criterions_list{list-style:none;margin:0 0 1.4rem;padding:0}
.avz__form .star-rating-group{border:0;margin:0;padding:0}
.avz__form .stars-selector{gap:.35rem}
.avz__form .stars-selector .stars-selector__input-label{width:26px;height:26px;background:#F9BC13;-webkit-mask:url(../img/v2/icons/star-gold.svg) center/contain no-repeat;mask:url(../img/v2/icons/star-gold.svg) center/contain no-repeat}
.avz__form .stars-selector:not(:has(.stars-selector__input:checked)) .stars-selector__input-label{background:#EBE1C4}
.avz__form .stars-selector .stars-selector__input:checked+.stars-selector__input-label~.stars-selector__input-label{background:#EBE1C4}
.avz__row2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-bottom:1.2rem}
.avz__form input[type=text],.avz__form input[type=email],.avz__form textarea{width:100%;border:1px solid #E3E8EC;border-radius:10px;padding:.78rem .95rem;font:inherit;color:var(--v2-ink);background:#fff;margin-bottom:1.2rem}
.avz__form textarea{resize:vertical;min-height:130px}
.avz__form ::placeholder{color:#A6AFB8}
.avz__form input.error,.avz__form textarea.error{border-color:#C0392B}
.avz__form input:focus,.avz__form textarea:focus{outline:none;border-color:var(--v2-blue)}
.avz__send{display:inline-flex;align-items:center;justify-content:center;background:var(--v2-blue);color:#fff;border:0;border-radius:999px;padding:.85rem 3.4rem;font-family:var(--font);font-weight:600;font-size:1rem;cursor:pointer;transition:background .2s}
.avz__send:hover{background:#0489BE}
@media(max-width:900px){
.avz__grid{grid-template-columns:1fr;gap:2.6rem}
.avz__score{float:none;margin-right:0;margin-bottom:1.4rem}
.avz__row2{grid-template-columns:1fr}
}
/* ===== RESPONSIVE FICHE — compléments mobile (29/07) ===== */
@media(max-width:760px){
.acc2 .hint{display:none} /* comme le prototype : sous-titre des accordéons masqué en mobile */
}
@media(max-width:900px){
.fpx__reass .pays{flex-wrap:wrap;row-gap:.25rem}
.accmini .row1{flex-wrap:wrap;row-gap:.4rem}
.accmini .px{white-space:nowrap}
}
/* Garde-fou global : la page ne peut jamais défiler horizontalement (tiroir nav, rails)
— clip et non hidden, pour ne pas casser la galerie sticky de la fiche */
html,body{overflow-x:clip}
/* iOS Safari : un champ < 16px déclenche un zoom auto au focus → page « qui dépasse » ;
16px sur les champs du formulaire d avis en mobile */
@media(max-width:900px){
.avz__form input[type=text],.avz__form input[type=email],.avz__form textarea{font-size:16px}
}
/* Très petits écrans : la colonne de la fiche refusait de rétrécir sous ~334px
(piste min-content de la grille) + fil d ariane sans retour à la ligne */
@media(max-width:900px){
.fpx__grid{grid-template-columns:minmax(0,1fr)}
.fpx__grid>*{min-width:0}
.breadcrumb{flex-wrap:wrap;row-gap:.2rem}
}
@media(max-width:560px){.fpx__accord{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){
.fpx__accord{grid-template-columns:1fr}
.fpx__reass{grid-template-columns:1fr}
}
@media(max-width:900px){
/* vignettes galerie : pistes de grille (77px) plus étroites que les vignettes (84px) → chevauchement */
.fpx__gal .product__thumbnails-list{display:flex;flex-wrap:wrap;gap:.65rem}
/* stepper quantité compact au lieu de 100% de large (la pilule est sur .product-actions__quantity) */
#product .quantity-button__group{width:auto;display:inline-flex}
#product .product-actions__quantity{width:fit-content;flex:0 0 auto}
}
/* fil d ariane compact en mobile (police, chevrons, icône maison, hauteur) */
@media(max-width:900px){
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.breadcrumb__wrapper .breadcrumb,.breadcrumb__wrapper .breadcrumb-link,.breadcrumb__wrapper .breadcrumb-item{font-size:12px!important}
.breadcrumb__wrapper .breadcrumb{gap:.2rem;padding:.55rem 0;row-gap:.1rem}
.breadcrumb__wrapper .breadcrumb-item:first-child .breadcrumb-link::before{width:15px;height:15px}
.breadcrumb__wrapper .breadcrumb-link{gap:.4rem}
.breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item::before{width:6px;height:10px;margin:0 .45rem}
}
/* formulaire avis mobile : espacements resserrés entre les champs */
@media(max-width:900px){
.avz__form .lb{margin-bottom:.35rem}
.avz__form input[type=text],.avz__form input[type=email],.avz__form textarea{margin-bottom:.8rem;padding:.65rem .85rem}
.avz__row2{gap:0;margin-bottom:0}
.avz__form #criterions_list{margin-bottom:.9rem}
.avz__form textarea{min-height:110px}
}
/* =========================================================
PAGE LA BOX (/la-box) — conforme frame Figma « La box abo »
hero bleu degrade + feuilles blanches, formules en debord,
« Comment ca fonctionne ? » 4 cartes, avis (section accueil), FAQ
========================================================= */
#module-latsarinehome-box .columns-container.container{max-width:none;width:100%;padding-inline:0}
#module-latsarinehome-box #content{padding:0;margin:0}
/* maquette : le hero bleu vient directement sous la nav, sans fil d'ariane */
#module-latsarinehome-box .breadcrumb__wrapper,#module-latsarinehome-box #wrapper .breadcrumb{display:none}
.lbx{background:#fff}
.lbx .wrapx{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
/* hero + formules : le fond bleu du hero se prolonge derriere le haut des cartes */
.lbx__top{position:relative}
/* hauteur et arrondi bas repris de la maquette (bloc bleu 520px, coins bas ~40px) */
.lbx__hero{position:relative;overflow:hidden;text-align:center;background:linear-gradient(180deg,#A5DBF3 0%,#BFE6F7 55%,#D8F0FB 100%);border-radius:0 0 40px 40px;padding:3.4rem 0 0;min-height:520px}
.lbx__leaf{position:absolute;background:#fff;opacity:.9;pointer-events:none;-webkit-mask:url(../img/v2/leaf-fan.png) center/contain no-repeat;mask:url(../img/v2/leaf-fan.png) center/contain no-repeat}
.lbx__leaf--r{right:-10px;bottom:6%;width:clamp(150px,17vw,270px);aspect-ratio:1}
.lbx__leaf--l{left:-24px;bottom:22%;width:clamp(110px,12vw,190px);aspect-ratio:1;transform:scaleX(-1) rotate(8deg);opacity:.75}
.lbx__hero .boxkick{display:flex;justify-content:center;margin-bottom:1.3rem;position:relative;z-index:1}
.lbx__hero .boxkick span{background:var(--v2-blue)}
.lbx__hero h1{position:relative;z-index:1;font-family:var(--font);font-weight:700;font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.12;letter-spacing:-.015em;color:var(--v2-ink);margin:0 auto 1.1rem;max-width:19ch}
.lbx__hero h1 em{font-style:normal;color:#0B85C6}
.lbx__hero p{position:relative;z-index:1;max-width:66ch;margin:0 auto;color:#22303B;font-size:1.02rem;line-height:1.62}
.lbx__hero .filetx{display:block;width:52px;height:3px;background:var(--v2-blue);border-radius:999px;margin:1.5rem auto 0;position:relative;z-index:1}
.lbx__formules{position:relative;z-index:2;margin-top:-150px}
.lbx__formules .boxpr{margin:0}
/* comment ca fonctionne */
.lbx__hiw{padding:5.5rem 0 5rem;scroll-margin-top:60px}
.lbx__hiwhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.lbx__hiwhead h2{font-family:var(--font);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);color:var(--v2-ink);margin:0}
.lbx__hiwhead h2 em{font-style:normal;color:var(--v2-blue)}
.lbx__hiwhead .filetx{display:block;width:52px;height:3px;background:var(--v2-blue);border-radius:999px;margin-top:1rem}
.lbx__hiwhead p{color:var(--v2-muted);line-height:1.65;margin:.35rem 0 0}
.lbx__choice{display:inline-block;margin:1.6rem 0 0;background:#EAF6FB;color:var(--v2-ink);border-radius:999px;padding:.45rem 1.15rem;font-size:.95rem}
.lbx__choice b{color:var(--v2-blue)}
.lbx__hiwgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;margin-top:2.4rem}
.hiw{background:#fff;border:1px solid #E6ECF0;border-radius:16px;padding:1.35rem 1.3rem 1.5rem}
.hiw__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.hiw__ic{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#E8F6FD;color:var(--v2-blue)}
.hiw__ic svg{width:19px;height:19px}
.hiw__n{font-family:var(--font);font-weight:700;font-size:.92rem;color:var(--v2-blue)}
.hiw h3{font-family:var(--font);font-weight:600;font-size:1.05rem;color:var(--v2-ink);margin:0 0 .5rem}
.hiw p{color:var(--v2-muted);font-size:.9rem;line-height:1.6;margin:0}
/* FAQ maquette : carte blanche a filet bleu, ouverte = fond bleu pale */
.lbx__faq{padding:4.6rem 0 5.5rem}
.lbx__faq .entx h2{font-family:var(--font);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--v2-ink);margin:0}
.lbx__faqlist{max-width:900px;margin:2rem auto 0;display:grid;gap:.85rem}
.lbx__faq .acc2.fq{border:0;border-radius:12px;background:#fff;box-shadow:0 2px 14px -6px rgba(20,45,70,.16);overflow:hidden;position:relative}
.lbx__faq .acc2.fq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--v2-blue);border-radius:12px 0 0 12px}
.lbx__faq .acc2.fq>button{gap:.85rem;padding:1.05rem 1.4rem;align-items:center}
.lbx__faq .acc2.fq h3{font-family:var(--font);font-weight:600;font-size:1.02rem;color:var(--v2-ink);margin:0;flex:1;text-align:left;line-height:1.3}
.lbx__faq .acc2.fq .chev2{order:-1;margin:0;border-color:var(--v2-blue)}
.lbx__faq .acc2.fq.open{background:#F1FAFE}
.lbx__faq .acc2.fq.open h3{color:var(--v2-blue)}
.lbx__faq .acc2.fq .acc2__pad{padding:0 1.4rem 1.2rem 3.1rem}
@media(max-width:1100px){
.lbx__hiwgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
.lbx__hero{padding:2.6rem 0 0;min-height:0;border-radius:0 0 26px 26px}
.lbx__hero .wrapx{padding-bottom:7rem}
.lbx__formules{margin-top:-6rem}
.lbx__hiw{padding:3.4rem 0 3rem}
.lbx__hiwhead{grid-template-columns:1fr;gap:1rem}
.lbx__faq{padding:3rem 0 3.6rem}
.lbx__leaf--l{display:none}
.lbx__leaf--r{width:130px;opacity:.75}
}
@media(max-width:560px){
.lbx__hiwgrid{grid-template-columns:1fr}
}
/* ---- animations de la page La Box ---- */
/* hero : cascade d apparition (badge, titre, texte, filet) */
@keyframes lbxIn{from{opacity:0;translate:0 22px;filter:blur(6px)}to{opacity:1;translate:none;filter:none}}
.lbx__hero .boxkick,.lbx__hero h1,.lbx__hero p,.lbx__hero .filetx{animation:lbxIn .85s var(--ease) both}
.lbx__hero h1{animation-delay:.1s}
.lbx__hero p{animation-delay:.22s}
.lbx__hero .filetx{animation-delay:.34s}
/* feuilles : flottement lent */
@keyframes lbxLeaf{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-14px,0) rotate(-3deg)}}
.lbx__leaf--r{animation:lbxLeaf 11s ease-in-out infinite}
.lbx__leaf--l{animation:lbxLeaf 13s ease-in-out infinite reverse}
/* formules : survol qui souleve — seule `transform` est animee (GPU), l ombre est
un pseudo-element dont on anime l opacite : pas de repaint, donc fluide.
ATTENTION : .boxpr__c--hl porte deja translateY(-32px) (carte en avant) — son hover
doit cumuler ce decalage, sinon la carte saute vers le bas. */
/* ⚠️ les cartes sont enfants d un .rvg : la regle reveal (html.rvon .rvg>*) impose
`transition:opacity,translate` et ecrasait la notre → transform sautait sans animation.
On re-declare la transition avec une specificite superieure, reveal inclus. */
html.rvon .lbx__formules .boxpr__c,
.lbx__formules .boxpr__c{transition:transform .34s var(--ease),opacity .7s var(--ease),translate .8s var(--ease);will-change:transform;backface-visibility:hidden}
.lbx__formules .boxpr__c::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 26px 46px -26px rgba(11,90,140,.45);opacity:0;transition:opacity .34s var(--ease);pointer-events:none}
.lbx__formules .boxpr__c:hover::after{opacity:1}
.lbx__formules .boxpr__c:hover{transform:translateY(-8px)}
.lbx__formules .boxpr__c--hl:hover{transform:translateY(-40px)}
/* cartes « comment ca fonctionne » : meme principe (transform + opacite d ombre) */
html.rvon .lbx__hiwgrid>.hiw,
.hiw{position:relative;transition:transform .34s var(--ease),opacity .7s var(--ease),translate .8s var(--ease);will-change:transform;backface-visibility:hidden}
.hiw::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 20px 34px -22px rgba(11,90,140,.4);opacity:0;transition:opacity .34s var(--ease);pointer-events:none}
.hiw:hover::after{opacity:1}
.hiw:hover{transform:translateY(-6px)}
.hiw__ic{transition:background-color .3s var(--ease),color .3s var(--ease),transform .34s var(--ease)}
.hiw:hover .hiw__ic{background-color:var(--v2-blue);color:#fff;transform:rotate(-6deg) scale(1.06)}
/* FAQ : survol et ouverture */
html.rvon .lbx__faqlist>.acc2.fq,
.lbx__faq .acc2.fq{transition:box-shadow .28s var(--ease),background .28s var(--ease),opacity .7s var(--ease),translate .8s var(--ease)}
.lbx__faq .acc2.fq:hover{box-shadow:0 8px 22px -8px rgba(20,45,70,.24)}
.lbx__faq .acc2.fq::before{transition:width .28s var(--ease)}
.lbx__faq .acc2.fq.open::before{width:6px}
@media(prefers-reduced-motion:reduce){
.lbx__hero .boxkick,.lbx__hero h1,.lbx__hero p,.lbx__hero .filetx,.lbx__leaf--r,.lbx__leaf--l{animation:none}
.lbx__formules .boxpr__c:hover,.hiw:hover{transform:none}
}
/* formules entre 900 et 1200px (tablette paysage / petit portable) : les cartes
debordaient — la pill de remise etait en nowrap et 1fr ne descend pas sous min-content */
@media(min-width:901px) and (max-width:1200px){
.boxpr{gap:1.1rem;padding-top:28px}
.boxpr__c{padding:24px;border-radius:38px}
.boxpr__c .remise{flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.boxpr__c .remise b{font-size:38px}
.boxpr__c .remise span{white-space:normal;line-height:1.45}
.boxpr__c--hl::before{inset:-6px;border-width:6px;border-radius:44px}
.boxpr__c h3{font-size:1.28rem}
.boxpr__c .d{font-size:.9rem}
.boxpr__c ul li{font-size:.88rem}
}
/* page La Box en mobile : la feuille du hero reste dans le cadre, FAQ et titres compacts */
@media(max-width:560px){
.lbx__leaf--r{right:-30px;bottom:10%;width:120px;opacity:.65}
.lbx__faq .acc2.fq>button{padding:.9rem 1.1rem}
.lbx__faq .acc2.fq h3{font-size:.96rem}
.lbx__faq .acc2.fq .acc2__pad{padding:0 1.1rem 1.1rem 2.6rem}
.lbx__hiwhead h2{font-size:1.6rem}
}
/* =========================================================
PARCOURS D'ABONNEMENT LA BOX (/la-box-abonnement)
frames Figma « La box abo » étapes 2, 3 et confirmation
========================================================= */
#module-latsarinehome-abonnement .columns-container.container{max-width:none;width:100%;padding-inline:0}
#module-latsarinehome-abonnement #content{padding:0;margin:0}
#module-latsarinehome-abonnement .breadcrumb__wrapper{display:none}
.abx{background:#fff;padding:2.2rem 0 4.5rem}
.abx .wrapx{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.abx__screen[hidden]{display:none}
.abx__card{background:#F4FBFE;border-radius:28px;padding:clamp(1.4rem,3vw,2.6rem)}
/* en-tête + stepper */
.abx__head{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.abx__kick{display:block;color:var(--v2-blue);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.35rem}
.abx__head h1{font-family:var(--font);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.1rem);color:var(--v2-ink);margin:0}
/* « (facultatif) » accolé au titre d'une étape que l'on peut passer (accessoires du coffret) */
.abx__opt{font-family:var(--font-txt,inherit);font-style:normal;font-weight:500;font-size:.62em;color:var(--v2-muted);white-space:nowrap}
.abx__steps{display:flex;align-items:center;list-style:none;margin:.6rem 0 0;padding:0;gap:0}
.abx__steps li{display:flex;align-items:center;color:#9BB0BE;font-size:.8rem;font-weight:700}
.abx__steps li span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#E4EFF5;color:#9BB0BE}
.abx__steps li.done span{background:#BEE4F6;color:#fff}
.abx__steps li.on span{background:var(--v2-blue);color:#fff}
.abx__steps li+li::before{content:"";width:clamp(38px,6vw,86px);height:2px;background:#DCEAF2;margin:0 .35rem}
.abx__steps li.on+li::before,.abx__steps li.done+li::before{background:var(--v2-blue)}
/* recherche */
.abx__search{position:relative;max-width:420px;margin:0 auto 1.5rem}
.abx__search input{width:100%;border:1px solid #E1EDF4;border-radius:999px;background:#fff;padding:.72rem 2.8rem .72rem 1.1rem;font:inherit;font-size:.95rem;color:var(--v2-ink)}
.abx__search input:focus{outline:none;border-color:var(--v2-blue)}
.abx__search .ic{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--v2-blue);color:#fff;display:grid;place-items:center;pointer-events:none}
.abx__search .ic svg{width:17px;height:17px}
/* pastilles familles */
.abx__fams{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.abx__fams button{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.35rem .5rem;border-radius:14px;font:inherit;font-size:.78rem;color:var(--v2-muted);transition:color .2s,background .2s}
.abx__fams button img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid transparent;transition:border-color .2s}
.abx__fams button:first-child{padding-top:1.4rem}
.abx__fams button.on{color:var(--v2-blue);font-weight:600}
.abx__fams button.on img{border-color:var(--v2-blue)}
.abx__fams button:hover{background:#EAF6FB}
/* barre quantité */
.abx__qty{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;background:#fff;border:1px solid #E6F1F7;border-radius:18px;padding:1rem 1.3rem;margin-bottom:1.4rem}
.abx__qty .l{font-family:var(--font);font-weight:600;color:var(--v2-ink)}
.abx__qty .ch{display:inline-flex;background:#EFF7FB;border-radius:999px;padding:4px}
.abx__qty .ch button{border:0;background:none;cursor:pointer;font:inherit;font-size:.9rem;padding:.42rem 1.05rem;border-radius:999px;color:var(--v2-muted);transition:background .2s,color .2s}
.abx__qty .ch button.on{background:var(--v2-blue);color:#fff;font-weight:600}
.abx__qty .pr{margin-left:auto;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.abx__qty .pr b{font-weight:500;font-size:.85rem;color:var(--v2-muted)}
.bar{--p:0%;display:block;width:190px;height:7px;border-radius:999px;background:#E5EFF5;overflow:hidden;position:relative}
.bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--v2-blue);border-radius:999px;transition:width .35s var(--ease)}
/* corps : liste + récap */
.abx__body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.4rem;align-items:start}
.abx__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.abx__empty{grid-column:1/-1;color:var(--v2-muted);text-align:center;padding:2rem 0}
/* carte thé */
.abt{background:#fff;border:1px solid #E9F2F7;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.abt:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(11,90,140,.4)}
.abt[hidden]{display:none}
.abt__img{position:relative;background:#F7F4EF;aspect-ratio:1;display:grid;place-items:center;padding:1rem}
.abt__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.abt__badges{position:absolute;top:10px;left:10px;display:grid;gap:5px;z-index:2}
.abt__badges i{font-style:normal;background:var(--v2-blue);color:#fff;font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px}
.abt__fav{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:#fff;border:0;cursor:pointer;display:grid;place-items:center;color:#9AA8B4;box-shadow:0 2px 8px rgba(0,0,0,.07);z-index:2}
.abt__fav svg{width:15px;height:15px;fill:currentColor}
.abt__fav:hover{color:#E4646E}
.abt__b{padding:.9rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.28rem;flex:1}
.abt__b .k{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-blue);font-weight:600}
.abt__b .n{font-family:var(--font);font-size:1rem;color:var(--v2-ink)}
.abt__b .st{display:flex;align-items:center;gap:2px}
.abt__b .st img{width:12px;height:12px}
.abt__b .st small{margin-left:.35rem;color:var(--v2-muted);font-size:.76rem}
.abt__b .p{font-family:var(--font);font-weight:700;color:var(--v2-ink);margin-top:.15rem}
.abt__add{margin-top:.7rem;border:1px solid var(--v2-blue);background:#fff;color:var(--v2-blue);border-radius:999px;padding:.55rem 1rem;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.abt__add:hover{background:var(--v2-blue);color:#fff}
.abt.is-added{box-shadow:0 0 0 2px var(--v2-blue)}
/* panneau formats */
.abt__panel{position:absolute;inset:0;background:#fff;border-radius:18px;padding:.9rem 1rem 1rem;display:flex;flex-direction:column;z-index:3;animation:abxPan .22s var(--ease)}
@keyframes abxPan{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.abt__panel[hidden]{display:none}
.abt__panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.abt__panel header b{font-family:var(--font);font-size:1rem;color:var(--v2-ink)}
.abt__panel header button{border:0;background:none;cursor:pointer;color:var(--v2-muted);font-size:1rem;line-height:1;padding:.2rem}
.abt__fmts{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;overflow:auto;flex:1}
.abt__fmts button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;border:1px solid #E7F0F6;background:#fff;border-radius:10px;padding:.5rem .7rem;font:inherit;font-size:.85rem;color:var(--v2-ink);cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.abt__fmts button:hover{border-color:#BEE0F1}
.abt__fmts button.on{border-color:var(--v2-blue);background:#F2FAFE}
.abt__fmts .pz{font-weight:600;white-space:nowrap}
.abt__fmts .pz s{color:var(--v2-muted);font-weight:400;margin-right:.35rem}
.abt__act{display:flex;align-items:center;gap:.6rem;margin-top:.7rem}
.abt__act .q{display:inline-flex;align-items:center;gap:.15rem;border:1px solid #E3EDF3;border-radius:999px;padding:2px}
.abt__act .q button{width:26px;height:26px;border:0;background:none;cursor:pointer;color:var(--v2-blue);font-size:1rem;line-height:1;border-radius:50%}
.abt__act .q button:hover{background:#EAF6FB}
.abt__act .q b{min-width:20px;text-align:center;font-size:.9rem}
.abt__ok{flex:1;border:0;background:var(--v2-blue);color:#fff;border-radius:999px;padding:.6rem 1rem;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:background .2s}
.abt__ok:hover{background:#0489BE}
/* récapitulatif */
.abx__recap{position:sticky;top:1.2rem}
.abx__recapin{background:#fff;border:1px solid #E6F1F7;border-radius:18px;padding:1.2rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.9rem}
.abx__recapin>header{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.abx__recapin>header b{font-family:var(--font);font-size:1.02rem;color:var(--v2-ink)}
.abx__recapin .rem{background:#EAF6FB;color:var(--v2-blue);font-weight:700;font-size:.78rem;padding:.22rem .6rem;border-radius:999px}
.abx__sel{display:grid;gap:.45rem}
.abx__sel .t{display:flex;justify-content:space-between;font-size:.88rem;color:var(--v2-muted)}
.abx__sel .t b{color:var(--v2-blue)}
.abx__sel .bar{width:100%}
.abx__sel small{color:var(--v2-muted);font-size:.78rem}
.abx__items{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;max-height:230px;overflow:auto}
.abx__items li{display:flex;align-items:center;gap:.6rem}
.abx__items img{width:38px;height:38px;border-radius:9px;object-fit:contain;background:#F7F4EF;flex:0 0 auto}
.abx__items .n{flex:1;display:flex;flex-direction:column;min-width:0}
.abx__items .n b{font-size:.86rem;color:var(--v2-ink);font-family:var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abx__items .n small{color:var(--v2-muted);font-size:.74rem}
.abx__items .q{display:inline-flex;align-items:center;gap:.1rem;border:1px solid #E3EDF3;border-radius:999px;padding:1px}
.abx__items .q button{width:22px;height:22px;border:0;background:none;cursor:pointer;color:var(--v2-blue);border-radius:50%;line-height:1}
.abx__items .q button:hover{background:#EAF6FB}
.abx__items .q b{min-width:16px;text-align:center;font-size:.82rem}
.abx__items .x{color:var(--v2-muted);font-size:.84rem}
.abx__none{color:var(--v2-muted);font-size:.86rem;margin:0}
.abx__tot,.abx__meta{margin:0;display:grid;gap:.35rem;font-size:.86rem}
.abx__tot div,.abx__meta div{display:flex;justify-content:space-between;gap:1rem}
.abx__tot dt,.abx__meta dt{color:var(--v2-muted);margin:0}
.abx__tot dd,.abx__meta dd{margin:0;color:var(--v2-ink);text-align:right}
.abx__tot .disc dd{color:var(--v2-blue)}
.abx__meta{border-top:1px solid #EDF4F8;padding-top:.8rem;font-size:.8rem}
.abx__total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid #EDF4F8;padding-top:.8rem}
.abx__total span{color:var(--v2-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.abx__total b{font-family:var(--font);font-weight:800;font-size:1.5rem;color:var(--v2-blue)}
.abx__go{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--v2-blue);color:#fff;border:0;border-radius:999px;padding:.8rem 1.4rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s var(--ease)}
.abx__go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.abx__go:hover{background:#0489BE;color:#fff}
.abx__go:disabled{background:#C3DEEB;cursor:not-allowed}
.abx__go.is-loading{opacity:.7;pointer-events:none}
.abx__fine{color:var(--v2-muted);font-size:.72rem;text-align:center}
/* écran 3 : formulaire */
.abx__form{background:#fff;border:1px solid #E6F1F7;border-radius:18px;padding:1.5rem 1.6rem 1.7rem}
.abx__form h2{font-family:var(--font);font-weight:700;font-size:1.2rem;color:var(--v2-ink);margin:0 0 1.1rem}
.abx__form .r2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.abx__form label{display:flex;flex-direction:column;gap:.4rem;font-size:.88rem;color:var(--v2-ink);font-weight:600;font-family:var(--font)}
.abx__form label i{font-style:normal;color:var(--v2-muted);font-weight:400}
.abx__form label.full{margin-bottom:1rem}
/* les libelles n ont pas tous le meme nombre de lignes : on colle le champ en bas
pour que les inputs d une meme rangee restent alignes */
.abx__form label{justify-content:flex-end}
.abx__form label .lb{display:block;margin-bottom:.4rem}
/* input et select n ont pas la meme hauteur intrinseque : on la fige */
.abx__form input,.abx__form select{height:44px;box-sizing:border-box}
.abx__form input,.abx__form select,.abx__form textarea{border:1px solid #E1EDF4;border-radius:10px;padding:.65rem .85rem;font:inherit;font-size:.92rem;font-weight:400;color:var(--v2-ink);background:#fff;width:100%;margin-top:auto}
.abx__form input:focus,.abx__form select:focus,.abx__form textarea:focus{outline:none;border-color:var(--v2-blue)}
.abx__form textarea{resize:vertical}
.abx__note{display:flex;gap:.6rem;align-items:flex-start;background:#F1FAFE;border-radius:12px;padding:.85rem 1rem;color:var(--v2-muted);font-size:.86rem;line-height:1.55;margin:0 0 1.1rem}
.abx__note svg{width:19px;height:19px;flex:0 0 auto;color:var(--v2-blue);margin-top:.1rem}
.abx__err{background:#FDEDEC;color:#B03A2E;border-radius:10px;padding:.7rem .9rem;font-size:.88rem;margin:0 0 1rem}
.abx__actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.abx__back{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #D8E7F0;color:var(--v2-ink);border-radius:999px;padding:.75rem 1.2rem;font:inherit;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.abx__back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.abx__back:hover{border-color:var(--v2-blue);color:var(--v2-blue)}
.abx__actions .abx__go{margin-left:auto}
/* confirmation */
.abx__done .abx__donein{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;background:#EFF9FD;border-radius:28px;padding:clamp(1.4rem,3vw,2.6rem)}
.abx__doneimg{position:relative;text-align:center}
.abx__doneimg img{max-width:100%;height:auto;display:block;margin:auto}
/* la feuille et les eclats bleus sont deja dans l image detouree de la maquette */
.abx__donecard{background:#fff;border-radius:22px;padding:clamp(1.4rem,2.6vw,2.2rem);text-align:center}
.abx__check{width:52px;height:52px;border-radius:50%;background:var(--v2-blue);color:#fff;display:inline-grid;place-items:center;margin-bottom:1rem}
.abx__check svg{width:26px;height:26px}
.abx__donecard h2{font-family:var(--font);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--v2-ink);margin:0 0 .7rem;line-height:1.2}
.abx__donecard h2 em{font-style:normal;color:var(--v2-blue)}
.abx__donecard>p{color:var(--v2-muted);line-height:1.6;margin:0 0 1.4rem;font-size:.94rem}
.abx__donebox{background:#F7FBFD;border-radius:16px;padding:1.1rem 1.2rem;text-align:left;margin-bottom:1.4rem}
.abx__donebox .lb{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--v2-muted);margin-bottom:.6rem}
.abx__donebox ul{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.5rem}
.abx__donebox li{display:flex;align-items:center;gap:.6rem}
.abx__donebox img{width:34px;height:34px;border-radius:8px;object-fit:contain;background:#F1EDE6}
.abx__donebox .n{flex:1;display:flex;flex-direction:column}
.abx__donebox .n b{font-family:var(--font);font-size:.86rem;color:var(--v2-ink)}
.abx__donebox .n small{color:var(--v2-muted);font-size:.74rem}
.abx__donebox .x{color:var(--v2-muted);font-size:.84rem}
.abx__donebox dl{margin:0;display:grid;gap:.4rem;border-top:1px solid #E7F0F5;padding-top:.85rem;font-size:.86rem}
.abx__donebox dl div{display:flex;justify-content:space-between;gap:1rem}
.abx__donebox dt{color:var(--v2-muted);margin:0}
.abx__donebox dd{margin:0;color:var(--v2-ink);font-weight:600;text-align:right}
@media(max-width:1100px){
.abx__body{grid-template-columns:1fr}
.abx__recap{position:static;order:-1}
.abx__items{max-height:none}
}
@media(max-width:760px){
.abx__card{padding:1.1rem;border-radius:20px}
.abx__list{grid-template-columns:1fr}
.abx__qty{gap:.8rem}
.abx__qty .pr{margin-left:0;width:100%}
.bar{width:100%}
.abx__form .r2{grid-template-columns:1fr;gap:.9rem}
.abx__form input,.abx__form select,.abx__form textarea{font-size:16px}
.abx__done .abx__donein{grid-template-columns:1fr}
.abx__doneimg{max-width:280px;margin:auto}
.abx__actions .abx__go{margin-left:0;width:100%}
.abx__back{width:100%;justify-content:center}
.abx__fams button img{width:44px;height:44px}
.abx__head{margin-bottom:1.2rem}
}
/* pastille « Tous » : pas d image, on lui donne la meme empreinte que les autres */
.abx__fams button:first-child{padding-top:.35rem}
.abx__fams button:first-child::before{content:"";width:52px;height:52px;border-radius:50%;background:#EAF6FB;border:2px solid transparent;display:block;-webkit-mask:none;mask:none;background-image:url(../img/v2/leaf-fan.png);background-size:26px;background-position:center;background-repeat:no-repeat;transition:border-color .2s}
.abx__fams button:first-child.on::before{border-color:var(--v2-blue)}
/* ============================================================
PARCOURS D'ABONNEMENT — ÉCRAN 3 : compte, livraison, paiement
(blocs ajoutés à la structure « Coordonnées / Moyen de paiement »
de la frame Figma « Étape 3 » — voir les captures maquette/abo-etape3-*.png)
============================================================ */
/* les sections du formulaire respirent comme dans la maquette */
.abx__form h2{margin:2rem 0 .55rem}
.abx__form>*:first-child{margin-top:0}
.abx__form>h2:first-of-type{margin-top:0}
.abx__q{color:var(--v2-muted);font-size:.88rem;margin:0 0 .85rem}
/* --- bandeau « déjà cliente ? » et connexion inline --- */
.abx__login{background:#F7FBFD;border:1px solid #E6F1F7;border-radius:14px;padding:.85rem 1.05rem;margin-bottom:1.5rem}
.abx__loginq{margin:0;font-size:.9rem;color:var(--v2-ink)}
.abx__login .lk,.abx__me .lk{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--v2-blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.abx__login .lk:hover,.abx__me .lk:hover{color:#0489BE}
.abx__loginf{margin-top:1rem}
.abx__loginf[hidden]{display:none}
.abx__loginf .r2{margin-bottom:.8rem}
.abx__loginact{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.abx__sm{border:0;background:var(--v2-blue);color:#fff;border-radius:999px;padding:.6rem 1.25rem;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:background .2s}
.abx__sm:hover{background:#0489BE}
.abx__sm:disabled{background:#C3DEEB;cursor:not-allowed}
.abx__loginf .abx__err{margin:.9rem 0 0}
/* --- bandeau « vous êtes connectée » --- */
.abx__me{display:flex;align-items:center;gap:.75rem;background:#F1FAFE;border:1px solid #D8EDF8;border-radius:14px;padding:.85rem 1.05rem;margin-bottom:1.5rem;font-size:.9rem;color:var(--v2-ink)}
.abx__me .ic{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--v2-blue);color:#fff;display:grid;place-items:center}
.abx__me .ic svg{width:15px;height:15px}
.abx__me .t{flex:1;display:flex;flex-direction:column;gap:.15rem}
.abx__me .t small{color:var(--v2-muted);font-size:.8rem}
/* --- choix en capsules : compte, livraison, paiement --- */
.abx__ch{display:grid;gap:.6rem;margin-bottom:1.4rem}
.abx__ch button{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;background:#fff;border:1px solid #E1EDF4;border-radius:999px;padding:.85rem 1.15rem;font:inherit;color:var(--v2-ink);cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.abx__ch button:hover{border-color:#BEE0F1}
.abx__ch button.on{border-color:var(--v2-blue);box-shadow:0 0 0 1px var(--v2-blue) inset}
.abx__ch .rd{width:19px;height:19px;flex:0 0 auto;border-radius:50%;border:1.5px solid #CBDCE7;display:grid;place-items:center;transition:border-color .2s}
.abx__ch button.on .rd{border-color:var(--v2-blue)}
.abx__ch button.on .rd::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--v2-blue)}
.abx__ch .tx{flex:1;display:flex;flex-direction:column;gap:.12rem;min-width:0}
.abx__ch .tx b{font-family:var(--font);font-weight:600;font-size:.95rem}
.abx__ch .tx small{color:var(--v2-muted);font-size:.8rem;line-height:1.4}
.abx__ch .pz{font-family:var(--font);font-weight:700;font-size:.95rem;color:var(--v2-blue);white-space:nowrap}
.abx__ch .lg{flex:0 0 auto;display:grid;place-items:center;min-width:56px;height:32px;color:var(--v2-blue)}
.abx__ch .lg img{max-width:56px;max-height:26px;object-fit:contain}
.abx__ch .lg svg{width:24px;height:24px}
/* --- création de compte --- */
.abx__acctf{margin:-.5rem 0 1.4rem}
.abx__acctf[hidden]{display:none}
.abx__acctf .r2{margin-bottom:.8rem}
.abx__cbx{flex-direction:row!important;align-items:center;gap:.6rem;font-weight:400!important;font-size:.86rem!important;color:var(--v2-muted)!important}
.abx__cbx input{width:17px!important;height:17px!important;margin:0!important;accent-color:var(--v2-blue);flex:0 0 auto}
/* champ « Pays » figé : présent pour l'alignement, volontairement inactif */
.abx__hidefield{opacity:.55;pointer-events:none}
/* --- confirmation : deux boutons --- */
.abx__doneact{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap}
.abx__doneact .abx__back{text-decoration:none}
@media(max-width:760px){
.abx__ch button{border-radius:20px;align-items:flex-start;padding:.9rem 1rem}
.abx__ch .rd{margin-top:.15rem}
.abx__ch .lg{align-self:center}
.abx__doneact{flex-direction:column}
.abx__doneact>*{width:100%;justify-content:center}
}
/* ⚠️ colonne unique en mobile : « 1fr » vaut minmax(auto,1fr) — un enfant large
(capsules de livraison/paiement) gonflait la colonne à 467px dans un viewport de 390.
minmax(0,1fr) autorise le retrecissement ; main a overflow-x:clip, le debordement
ne se voyait donc pas dans scrollWidth. */
@media(max-width:1100px){
.abx__body{grid-template-columns:minmax(0,1fr)}
.abx__form,.abx__recap{min-width:0}
}
/* ============================================================
PARCOURS D'ABONNEMENT — RESPONSIVE DES 3 ÉCRANS (30/07/2026)
Audit mobile : le bouton « Continuer » se trouvait AVANT une liste
de 17 000 px, le récapitulatif vide séparait les filtres du premier
thé, et le panneau de formats laissait un grand vide blanc.
============================================================ */
/* barre d'action fixe : masquée en desktop, elle porte l'action sur mobile */
.abx__bar{display:none}
@media(max-width:900px){
.abx__screen.is-on .abx__bar{
display:flex;align-items:center;gap:.7rem;
position:fixed;left:0;right:0;bottom:0;z-index:60;
padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));
background:#fff;border-top:1px solid #E6F1F7;
box-shadow:0 -6px 24px rgba(16,60,80,.10)
}
.abx__bar__i{
flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem;
background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;color:inherit
}
.abx__bar__i b{font-family:var(--font);font-weight:700;font-size:1.05rem;color:var(--v2-blue)}
.abx__bar__i small,.abx__bar__i span{color:var(--v2-muted);font-size:.78rem}
.abx__bar__i span{font-weight:600;color:var(--v2-ink)}
.abx__bar .abx__go{flex:0 0 auto;padding:.75rem 1.25rem}
/* la barre ne doit jamais recouvrir la fin du contenu */
.abx{padding-bottom:6.5rem}
/* le récapitulatif complet passe APRÈS la liste : on ne met plus un bloc
vide de 550 px entre les filtres et le premier thé */
.abx__recap{order:0}
.abx__screen[data-screen="3"] .abx__recap{order:-1} /* écran 3 : utile en tête */
}
@media(max-width:760px){
/* deux colonnes : 31 thés en une colonne demandaient 17 000 px de défilement */
.abx__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.abt{border-radius:14px}
.abt__img{padding:.5rem}
.abt__b{padding:.6rem .65rem .75rem;gap:.2rem}
.abt__b .k{font-size:.6rem;letter-spacing:.04em}
.abt__b .n{font-size:.85rem;line-height:1.25}
.abt__b .st img{width:10px;height:10px}
.abt__b .st small{font-size:.68rem;margin-left:.2rem}
.abt__b .p{font-size:.88rem}
.abt__add{margin-top:.5rem;padding:.45rem .5rem;font-size:.8rem}
.abt__badges i{font-size:9px;padding:2px 7px}
.abt__fav{width:26px;height:26px}
.abt__fav svg{width:13px;height:13px}
/* panneau de formats en feuille basse : dans une carte de 156 px il serait
illisible, et il laissait un grand vide quand la carte était haute */
.abt__panel{
position:fixed;left:0;right:0;bottom:0;top:auto;
border-radius:20px 20px 0 0;padding:1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom,0px));
z-index:80;box-shadow:0 -10px 40px rgba(16,60,80,.22);max-height:70vh
}
.abt__panel header b{font-size:1.05rem}
.abt__panel header button{font-size:1.3rem;padding:.3rem .5rem}
.abt__fmts{max-height:38vh}
.abt__fmts button{padding:.7rem .85rem;font-size:.9rem}
.abt__act{margin-top:.9rem}
.abt__ok{padding:.75rem 1rem}
/* écran 4 : le message de confirmation doit être lisible sans défiler */
.abx__doneimg{max-width:210px}
.abx__done .abx__donein{gap:1rem;padding:1.1rem}
.abx__donecard{padding:1.2rem 1.1rem}
}
/* ⚠️ pas de voile derrière la feuille basse : `.abt` porte overflow:hidden et un voile
plein écran se retrouvait au-dessus du panneau, interceptant les clics « Ajouter ».
La feuille se distingue par son ombre portée ; on ferme par la croix, Échap ou un clic à côté. */
@media(max-width:900px){
/* l'action est portée par la barre fixe : on évite deux boutons « Confirmer »
identiques à quelques pixels l'un de l'autre en bas de page */
.abx__actions button[type=submit]{display:none}
.abx__actions .abx__back{width:100%;justify-content:center}
}
/* tablette : 2 colonnes donnaient des cartes de 330 px et 8 800 px de liste */
@media(min-width:761px) and (max-width:1100px){
.abx__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* le bouton d'ajout se cale en bas : les noms sur deux lignes décalaient les cartes voisines */
.abt__add{margin-top:auto}
.abt__b .p{margin-bottom:.15rem}
/* Pastilles de familles en mobile : un rail d'une seule ligne au lieu de 3 rangées
(même principe que le rail « famv2 » de l'accueil). Il va bord à bord et se cale
sur les pastilles au défilement. */
@media(max-width:900px){
.abx__fams{
flex-wrap:nowrap;justify-content:flex-start;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
gap:.35rem;margin-bottom:1.2rem;
/* plein bord : on annule le padding de la carte (--abx-pad, posé sur .abx__card)
puis on le rend en marge interne pour que la 1re pastille reste alignée */
margin-inline:calc(var(--abx-pad) * -1);
padding-inline:var(--abx-pad);
scrollbar-width:none
}
.abx__fams::-webkit-scrollbar{display:none}
.abx__fams button{flex:0 0 auto;scroll-snap-align:center;padding:.3rem .35rem;font-size:.72rem;max-width:76px}
.abx__fams button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.abx__fams button img,
.abx__fams button:first-child::before{width:54px;height:54px}
.abx__fams button:first-child{padding-top:.3rem}
}
/* padding réel de la carte, réutilisé par le rail des familles pour aller bord à bord */
.abx__card{--abx-pad:clamp(1.4rem,3vw,2.6rem)}
@media(max-width:760px){.abx__card{--abx-pad:1.1rem}}
/* ============================================================
CONFIRMATION D'AJOUT AU PANIER (.toastm) — refonte 30/07/2026
Avant : pastille sombre de 195×94 px, texte compressé sur 3 lignes,
sans visuel ni accès au panier. Désormais une carte lisible :
pleine largeur en mobile, flottante en bas à droite en desktop.
============================================================ */
.toastm{
position:fixed;z-index:400;
left:12px;right:12px;bottom:12px;
transform:translateY(140%);
background:#fff;color:var(--v2-ink,#1A171B);
border:1px solid #E6F1F7;border-radius:18px;
box-shadow:0 14px 44px rgba(16,60,80,.18);
padding:.85rem .95rem;
display:flex;flex-direction:column;gap:.7rem;
max-width:none;text-align:left;font-size:.9rem;
transition:transform .35s var(--ease,cubic-bezier(.22,.61,.36,1))
}
.toastm.on{transform:translateY(0)}
.toastm__h{display:flex;align-items:center;gap:.55rem}
.toastm__ok{
width:24px;height:24px;flex:0 0 auto;border-radius:50%;
background:var(--v2-blue,#049AD7);color:#fff;display:grid;place-items:center
}
.toastm__ok svg{width:14px;height:14px}
.toastm__h b{flex:1;font-family:var(--font);font-size:.95rem}
.toastm__x{
background:none;border:0;padding:.2rem .35rem;cursor:pointer;
color:var(--v2-muted,#6F6A63);font-size:.95rem;line-height:1
}
.toastm__x:hover{color:var(--v2-ink,#1A171B)}
.toastm__p{display:flex;align-items:center;gap:.7rem;min-width:0}
.toastm__p img{
width:46px;height:46px;flex:0 0 auto;border-radius:10px;
object-fit:contain;background:#F7F4EF
}
.toastm__t{flex:1;display:flex;flex-direction:column;min-width:0}
.toastm__t b{
font-family:var(--font);font-size:.9rem;font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.toastm__t small{color:var(--v2-muted,#6F6A63);font-size:.78rem}
.toastm__q{
flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
color:var(--v2-muted,#6F6A63);font-size:.78rem
}
.toastm__q b{font-family:var(--font);font-size:.95rem;color:var(--v2-blue,#049AD7)}
.toastm__a{display:flex;gap:.5rem}
.toastm__go,.toastm__cart{
flex:1;border-radius:999px;padding:.6rem .8rem;font:inherit;font-size:.85rem;
font-weight:600;text-align:center;cursor:pointer;text-decoration:none;
transition:background .2s,border-color .2s,color .2s
}
.toastm__go,.toastm__cart{white-space:nowrap}
.toastm__go{background:#fff;border:1px solid #D8E7F0;color:var(--v2-ink,#1A171B);flex:0 1 auto;padding-inline:1.1rem}
.toastm__go:hover{border-color:var(--v2-blue,#049AD7);color:var(--v2-blue,#049AD7)}
.toastm__cart{background:var(--v2-blue,#049AD7);border:1px solid var(--v2-blue,#049AD7);color:#fff}
.toastm__cart:hover{background:#0489BE;border-color:#0489BE;color:#fff}
/* desktop : carte flottante en bas à droite, largeur fixe */
@media(min-width:761px){
.toastm{left:auto;right:1.4rem;bottom:1.4rem;width:360px;padding:1rem 1.1rem}
}
/* iPhone à encoche : la carte ne colle pas au bord bas */
@supports(padding:max(0px)){
.toastm{bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
.toastm{transition:none}
}
/* ============================================================
PARCOURS D'ABONNEMENT — panneau de formats (.abt__panel) en desktop
Il était étiré sur toute la carte (inset:0) : avec un seul format,
477 px de vide séparaient le format des boutons. Il devient un tiroir
ajusté à son contenu, ancré en bas, qui laisse voir le produit au-dessus.
============================================================ */
@media(min-width:761px){
.abt__panel{
inset:auto 0 0 0; /* ancré en bas, hauteur automatique */
height:auto;max-height:calc(100% - 10px);
border-radius:16px;
padding:.85rem .9rem 1rem;
box-shadow:0 -10px 30px rgba(16,60,80,.16);
justify-content:flex-start
}
/* sans flex:1, la liste ne s'étire plus pour remplir la carte */
/* 5 formats (le maximum du catalogue) tiennent sans défilement */
.abt__panel .abt__fmts{flex:0 1 auto;max-height:245px}
.abt__panel .abt__act{margin-top:.75rem}
}
/* ⚠️ `.abt:hover{transform:translateY(-3px)}` crée un CONTAINING BLOCK : le panneau de
formats en position:fixed s'y retrouvait piégé (feuille basse écrasée à 154 px dans la
carte au lieu d'occuper le bas de l'écran). Sur mobile le survol reste « collé » après
un tap, donc le bug touchait les visiteurs. On neutralise le soulèvement dès qu'un
panneau est ouvert, et complètement sur les appareils tactiles. */
.abt.is-open,
.abt.is-open:hover{transform:none}
@media(hover:none){
.abt:hover{transform:none}
}
/* ============================================================
ÉCRAN 3 SUR PETITS ÉCRANS — largeur utile et bandeau de compte
Le formulaire cumulait 3 paddings (wrapx 16 + carte 17,6 + form 25,6) :
il ne restait que 272 px utiles sur 390. Le bandeau « Vous êtes
connectée » s'en trouvait comprimé, l'e-mail cassé sur 3 lignes et
le lien « Mon compte » tronqué.
============================================================ */
@media(max-width:760px){
.abx__card{padding:.9rem}
.abx__form{padding:1.15rem 1rem 1.35rem}
.abx__recapin{padding:1rem 1.05rem 1.15rem}
/* bandeau de compte : icône en haut, lien sur sa propre ligne */
.abx__me{
align-items:flex-start;flex-wrap:wrap;
gap:.5rem .6rem;padding:.75rem .85rem;font-size:.86rem
}
.abx__me .ic{width:22px;height:22px;margin-top:.1rem}
.abx__me .ic svg{width:13px;height:13px}
.abx__me .t{flex:1 1 0;min-width:0;gap:.2rem}
/* une adresse longue ne doit ni déborder ni forcer la largeur du bloc */
.abx__me .t b{overflow-wrap:anywhere}
/* la précision fait 2 lignes de plus pour redire ce qu'annonce le titre
« Adresse de livraison » juste en dessous : on la retire sur petit écran */
.abx__me .t small{display:none}
.abx__me .lk{flex:1 0 100%;margin-left:calc(22px + .6rem)}
/* bandeau « Déjà cliente ? » : même resserrement */
.abx__login{padding:.75rem .85rem;margin-bottom:1.2rem}
.abx__loginq{font-size:.86rem}
}
/* ============================================================
PAGE « COMPOSEZ VOTRE COFFRET » (30/07/2026)
Section Figma « Composez votre coffret » — captures :
captures maquette/coffret-*.png. Le composeur lui-même réutilise
le composant .abx du parcours d'abonnement.
============================================================ */
/* ---- hero : texte aligné container à gauche, panneau bleu à ras du bord droit ----
Cotes relevées sur la frame Figma (1440) : hauteur ~500 px, colonne texte ~55 %,
le bleu touche le bord droit de la page. ---- */
.cfx__hero{background:#F7FCFE;overflow:hidden}
.cfx__heroin{
max-width:none;width:100%;
display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
gap:clamp(1.5rem,4vw,3rem);align-items:stretch;
padding:0 0 0 var(--v2-gutter)
}
.cfx__txt{
align-self:center;max-width:640px;
padding-block:clamp(2rem,4vw,3.4rem)
}
.cfx__txt h1{
font-family:var(--font);font-weight:700;line-height:1.12;
font-size:clamp(1.85rem,3.4vw,2.95rem);color:var(--v2-ink);margin:0 0 1rem
}
.cfx__txt h1 em{font-style:normal;color:var(--v2-blue)}
.cfx__txt>p{color:var(--v2-muted);line-height:1.65;max-width:50ch;margin:0 0 1.4rem}
.cfx__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.4rem}
.cfx__cta .btn4{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.35rem;font-size:.94rem}
.cfx__cta .btn4 svg{width:17px;height:17px;flex:0 0 auto}
.cfx__reass{
list-style:none;margin:0;padding:.95rem 1.15rem;
background:#fff;border:1px solid #E6F1F7;border-radius:14px;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.1rem;max-width:470px
}
.cfx__reass li{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--v2-ink)}
.cfx__reass img{width:20px;height:20px;flex:0 0 auto}
.cfx__img{
position:relative;align-self:stretch;
min-height:clamp(320px,33vw,486px);
background:var(--v2-blue);overflow:hidden
}
/* l'image porte sa propre composition (fond clair à gauche avec la tasse et les
framboises, aplat bleu à droite) : elle est calée à droite pour que le raccord
avec le panneau bleu soit invisible */
.cfx__img img{
width:100%;height:100%;object-fit:cover;object-position:center;display:block
}
/* ---- en-têtes de section ---- */
.cfx__h{text-align:center;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.cfx__h h2,.cfx__h2 h2{
font-family:var(--font);font-weight:700;color:var(--v2-ink);
font-size:clamp(1.5rem,2.9vw,2.3rem);margin:0 0 .55rem;line-height:1.2
}
.cfx__h h2 em,.cfx__h2 h2 em{font-style:normal;color:var(--v2-blue)}
.cfx__h .filetx{margin-inline:auto}
.cfx__h2{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(1rem,3vw,2.5rem);align-items:end;margin-bottom:clamp(1.6rem,3vw,2.4rem)
}
.cfx__h2 p{color:var(--v2-muted);line-height:1.6;margin:0;font-size:.94rem}
/* ---- cartes des coffrets prêts ---- */
.cfc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.cfc{
background:#fff;border:1px solid #E9F2F7;border-radius:18px;overflow:hidden;
display:flex;flex-direction:column;
transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.cfc:hover{transform:translateY(-4px);box-shadow:0 20px 34px -24px rgba(11,90,140,.5)}
.cfc__im{display:block;background:#F7F4EF;aspect-ratio:4/3;overflow:hidden}
.cfc__im img{width:100%;height:100%;object-fit:contain;padding:1rem;transition:transform .5s var(--ease)}
.cfc:hover .cfc__im img{transform:scale(1.04)}
.cfc__b{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.cfc__b .k{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:#B99A5B;font-weight:700}
.cfc__b h3{font-family:var(--font);font-size:1.15rem;font-weight:700;color:var(--v2-ink);margin:0}
.cfc__b h3 a{color:inherit;text-decoration:none}
.cfc__b>p{color:var(--v2-muted);font-size:.88rem;line-height:1.55;margin:0;flex:1}
.cfc__p{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.3rem}
.cfc__p b{font-family:var(--font);font-weight:700;font-size:1.35rem;color:var(--v2-ink)}
.cfc__p .st{display:inline-flex;align-items:center;gap:2px}
.cfc__p .st img{width:12px;height:12px}
.cfc__p .st small{color:var(--v2-muted);font-size:.78rem;margin-left:.3rem}
.cfc__add{
margin-top:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
background:var(--v2-blue);color:#fff;border-radius:999px;padding:.7rem 1rem;
font-weight:600;font-size:.9rem;text-decoration:none;transition:background .2s
}
.cfc__add:hover{background:#0489BE;color:#fff}
.cfc__add svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---- le composeur dans la page ---- */
.cfx__build .abx{padding-top:0}
.abx--cof .abx__lead{color:var(--v2-muted);line-height:1.6;margin:0 0 1.4rem;max-width:62ch}
.abx--cof .abx__head h2{
font-family:var(--font);font-weight:700;color:var(--v2-ink);
font-size:clamp(1.35rem,2.4vw,1.9rem);margin:0;line-height:1.2
}
.abx__back--wide{width:100%;justify-content:center;margin-top:.6rem}
@media(max-width:1000px){
.cfx__heroin{grid-template-columns:1fr;padding-bottom:0}
.cfx__img{border-radius:22px;min-height:230px;margin-bottom:0}
.cfx__h2{grid-template-columns:1fr;align-items:start}
.cfc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
.cfx__reass{grid-template-columns:1fr;max-width:none}
.cfx__cta .btn4{flex:1 1 100%;justify-content:center}
.cfc__grid{grid-template-columns:1fr}
}
/* badge du hero coffret (pill bleu pâle au-dessus du titre) */
.cfx__badge{
display:inline-block;background:#EAF6FB;color:var(--v2-blue);
font-weight:600;font-size:.8rem;padding:.4rem .95rem;border-radius:999px;margin-bottom:.9rem
}
/* barre d'action du composeur de coffret : masquée tant qu'on est dans la vitrine */
@media(max-width:900px){
.abx--cof:not(.cfx-bar-on) .abx__screen.is-on .abx__bar{display:none}
}
/* La page coffret est full-bleed comme les listings : le container Hummingbird est
neutralisé, chaque section se réaligne via .wrapx / var(--v2-gutter). Sans cela le
panneau bleu du hero s'arrêtait 60 px avant le bord droit. */
#module-latsarinehome-composer .columns-container.container{max-width:none;width:100%;padding-inline:0}
#module-latsarinehome-composer .cfx__hero{border-radius:0}
/* message du composeur : quota de sachets atteint, quantité plafonnée… */
.abx__warn{
display:flex;align-items:center;gap:.5rem;
background:#FFF6E5;border:1px solid #F2DFB8;color:#8A6412;
border-radius:12px;padding:.7rem .95rem;font-size:.88rem;margin:0 0 1.1rem
}
.abx__warn[hidden]{display:none}
/* cartes verrouillées quand la sélection est complète */
.abt__add:disabled{opacity:.5;cursor:not-allowed;border-color:#D6E3EC;color:var(--v2-muted)}
.abt__add:disabled:hover{background:#fff;color:var(--v2-muted)}
.abt__ok:disabled{background:#C3DEEB;cursor:not-allowed}
/* ============================================================
PAGE COFFRET — RESPONSIVE
============================================================ */
@media(max-width:900px){
/* hero : la photo occupait 462 px de haut avant même le premier contenu */
/* l'image est panoramique (ratio 1,18) : sur un cadre large et bas elle se retrouvait
très rapprochée — on lui laisse de la hauteur et on remonte le cadrage sur le coffret */
/* l'image est presque carrée (574×486) : étirée sur toute la largeur d'une tablette
elle se retrouvait agrandie 1,5× et le coffret coupé. On garde son ratio en
limitant la largeur du cadre, centré sous le texte. */
.cfx__img{
min-height:0;height:auto;aspect-ratio:574/486;
max-width:min(100%,470px);margin-inline:auto;border-radius:20px
}
.cfx__img img{object-fit:cover;object-position:center}
.cfx__heroin{padding:0 0 0 var(--v2-gutter);padding-right:var(--v2-gutter);gap:1.25rem}
.cfx__txt{padding-block:1.6rem 0;max-width:none}
.cfx__txt>p{margin-bottom:1.15rem}
.cfx__cta{margin-bottom:1.15rem;gap:.55rem}
.cfx__reass{padding:.8rem .95rem;gap:.5rem .9rem}
.cfx__reass li{font-size:.84rem}
.cfx__hero{padding-bottom:1.6rem}
}
@media(max-width:760px){
/* les 3 coffrets empilés demandaient 1 500 px : rail d'une carte,
comme les autres carrousels du site (points ajoutés par le module RAILS) */
.cfc__grid{
display:flex;gap:.8rem;overflow-x:auto;
scroll-snap-type:x mandatory;scroll-snap-stop:always;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
margin-inline:calc(var(--v2-gutter) * -1);
padding-inline:var(--v2-gutter);padding-bottom:.4rem
}
.cfc__grid::-webkit-scrollbar{display:none}
.cfc{flex:0 0 82%;scroll-snap-align:center}
.cfc__im{aspect-ratio:5/4}
}
/* ============================================================
PAGES BOUTIQUE PRESTASHOP — CHARTE LA TSARINE (30/07/2026)
Panier, tunnel de commande, connexion, compte : ces pages n'existent
pas dans la maquette Figma, on leur applique le langage visuel établi
(bleu #049AD7, cartes blanches arrondies, champs pill, boutons 999px).
Cible : les id de page PrestaShop (#cart, #checkout, #authentication…).
============================================================ */
/* tokens génériques : passés à :root le 01/08/2026 — ils étaient limités aux pages
boutique, si bien que les cartes des pages ajoutées depuis (suivi invité, newsletter,
RGPD, alertes, favoris) recevaient `border:1px solid var(--lat-line)` avec une variable
VIDE : la déclaration devenait invalide et la bordure disparaissait sans bruit. */
:root,
#cart,#checkout,#authentication,#identity,#address,#addresses,#history,
#order-detail,#order-confirmation,#password,#my-account,#order-slip,#discount{
--lat-card:#fff;
--lat-line:#E6F1F7
}
/* ---- container : le contenu partait au ras du bord ---- */
#cart #content-wrapper,#checkout #content-wrapper,#authentication #content-wrapper,
#identity #content-wrapper,#address #content-wrapper,#addresses #content-wrapper,
#history #content-wrapper,#order-detail #content-wrapper,#order-confirmation #content-wrapper,
#password #content-wrapper,#my-account #content-wrapper,#order-slip #content-wrapper,
#discount #content-wrapper{max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
/* ---- titres ---- */
#cart h1,#checkout h1,#authentication h1,#identity h1,#address h1,#addresses h1,
#history h1,#order-detail h1,#order-confirmation h1,#password h1,#my-account h1,
#order-slip h1,#discount h1{
font-family:var(--font);font-weight:700;color:var(--v2-ink);
font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 1.4rem;line-height:1.2
}
/* ---- boutons : le thème les rendait noirs ---- */
#cart .btn-primary,#checkout .btn-primary,#authentication .btn-primary,#identity .btn-primary,
#address .btn-primary,#addresses .btn-primary,#history .btn-primary,#order-detail .btn-primary,
#order-confirmation .btn-primary,#password .btn-primary,#my-account .btn-primary,
#discount .btn-primary{
background:var(--v2-blue);border-color:var(--v2-blue);color:#fff;
border-radius:999px;font-family:var(--font);font-weight:600;
padding:.8rem 1.5rem;box-shadow:none;transition:background .2s,border-color .2s
}
#cart .btn-primary:hover,#checkout .btn-primary:hover,#authentication .btn-primary:hover,
#identity .btn-primary:hover,#address .btn-primary:hover,#addresses .btn-primary:hover,
#history .btn-primary:hover,#order-detail .btn-primary:hover,#order-confirmation .btn-primary:hover,
#password .btn-primary:hover,#my-account .btn-primary:hover,#discount .btn-primary:hover{
background:#0489BE;border-color:#0489BE;color:#fff
}
#cart .btn-secondary,#checkout .btn-secondary,#authentication .btn-secondary,
#identity .btn-secondary,#address .btn-secondary,#addresses .btn-secondary,
#history .btn-secondary,#order-detail .btn-secondary,#password .btn-secondary,
#my-account .btn-secondary{
background:#fff;border:1px solid #D8E7F0;color:var(--v2-ink);
border-radius:999px;font-family:var(--font);font-weight:600;padding:.75rem 1.35rem
}
#cart .btn-secondary:hover,#checkout .btn-secondary:hover,#authentication .btn-secondary:hover,
#identity .btn-secondary:hover,#address .btn-secondary:hover,#addresses .btn-secondary:hover,
#history .btn-secondary:hover,#order-detail .btn-secondary:hover,#password .btn-secondary:hover,
#my-account .btn-secondary:hover{border-color:var(--v2-blue);color:var(--v2-blue);background:#fff}
/* ---- champs de formulaire ---- */
#cart .form-control,#checkout .form-control,#authentication .form-control,#identity .form-control,
#address .form-control,#addresses .form-control,#password .form-control,#my-account .form-control,
#checkout input[type=text],#checkout input[type=email],#checkout input[type=tel],
#authentication input[type=text],#authentication input[type=email],#authentication input[type=password],
#identity input[type=text],#identity input[type=email],#identity input[type=password],
#address input[type=text],#password input[type=email]{
border:1px solid #E1EDF4;border-radius:10px;padding:.65rem .85rem;height:44px;
font:inherit;font-size:.94rem;color:var(--v2-ink);background:#fff;box-shadow:none
}
#cart .form-control:focus,#checkout .form-control:focus,#authentication .form-control:focus,
#identity .form-control:focus,#address .form-control:focus,#password .form-control:focus{
border-color:var(--v2-blue);box-shadow:none;outline:none
}
#checkout select.form-control,#address select.form-control,#identity select.form-control{height:44px}
#checkout label,#authentication label,#identity label,#address label,#password label{
font-family:var(--font);font-weight:600;font-size:.88rem;color:var(--v2-ink);margin-bottom:.35rem
}
#checkout .form-control-comment,#authentication .form-control-comment,
#identity .form-control-comment,#address .form-control-comment{
color:var(--v2-muted);font-size:.8rem
}
/* ---- PANIER (markup Hummingbird : .cart-grid.row > .cart-grid__content / __aside) ----
⚠️ .cart-grid est une `row` Bootstrap : lui appliquer display:grid casse les
colonnes col-lg-8 / col-lg-4 (elles tombaient à 616 px et 123 px). On garde
donc le flex Bootstrap et on ne restyle que le contenu. */
#cart .cart-grid__content,#cart .cart-grid__aside{padding-inline:.6rem}
#cart .card,#cart .cart-summary,#cart .cart-overview{
background:#fff;border:1px solid var(--lat-line);border-radius:18px;box-shadow:none
}
#cart .card-block,#cart .cart-overview{padding:1.15rem 1.3rem}
#cart .cart-grid__aside-wrapper{position:sticky;top:1.2rem}
/* lignes produit */
#cart .product-line{
display:flex;align-items:center;gap:1rem;
padding:1rem 0;border-bottom:1px solid #EEF5F9
}
#cart .product-line:last-of-type{border-bottom:0}
#cart .product-line__image{flex:0 0 auto;width:88px}
#cart .product-line__image img{
width:88px;height:88px;object-fit:contain;background:#F7F4EF;border-radius:12px
}
#cart .product-line__content{
flex:1 1 auto;min-width:0;display:flex;align-items:center;
gap:1rem;flex-wrap:wrap;justify-content:space-between
}
#cart .product-line__title,#cart .product-line__title a{
font-family:var(--font);font-weight:600;font-size:1rem;color:var(--v2-ink);text-decoration:none
}
#cart .product-line__price,#cart .product-line__total{
font-family:var(--font);font-weight:700;color:var(--v2-ink)
}
/* quantité : deux gros boutons ronds noirs empilés dans le thème */
#cart .quantity-button__group{
display:inline-flex;flex-direction:row;align-items:center;gap:.15rem;width:auto;
border:1px solid #E3EDF3;border-radius:999px;padding:2px;background:#fff
}
#cart .quantity-button__group .btn,
#cart .quantity-button__group .btn-square-icon{
width:32px;height:32px;min-width:0;padding:0;border:0;border-radius:50%;
background:none;color:var(--v2-blue);box-shadow:none;
display:inline-flex;align-items:center;justify-content:center
}
#cart .quantity-button__group .btn:hover{background:#EAF6FB;color:var(--v2-blue)}
#cart .quantity-button__group input{
width:46px;height:32px;border:0;text-align:center;padding:0;background:none;
font-family:var(--font);font-weight:600;color:var(--v2-ink)
}
#cart .product-line__delete a,#cart .remove-from-cart{color:var(--v2-muted)}
#cart .product-line__delete a:hover,#cart .remove-from-cart:hover{color:#B03A2E}
/* récapitulatif */
#cart .checkout a.btn-primary,#cart .checkout .btn-primary,
#cart .cart-detailed-actions .btn-primary{width:100%;justify-content:center;display:inline-flex}
@media(max-width:900px){
#cart .cart-grid__aside-wrapper{position:static}
#cart .product-line{flex-wrap:wrap}
#cart .product-line__content{width:100%}
}
/* récapitulatif du panier en carte + bouton contour (le thème les laissait nus/noirs) */
#cart .cart-summary{
background:#fff;border:1px solid var(--lat-line);border-radius:18px;padding:1.15rem 1.3rem
}
#cart .cart-grid__aside-wrapper>h2{
font-family:var(--font);font-weight:700;font-size:1.15rem;color:var(--v2-ink);margin:0 0 .9rem
}
#cart .cart-grid__aside-wrapper>hr{display:none}
#cart .blockreassurance--cart{
background:#F7FBFD;border:1px solid var(--lat-line);border-radius:16px;
padding:1rem 1.15rem;margin-top:1rem
}
#cart .blockreassurance--cart .block-title{
font-family:var(--font);font-weight:600;font-size:.92rem;color:var(--v2-ink)
}
#cart .blockreassurance--cart p{color:var(--v2-muted);font-size:.84rem;margin:0}
#cart .blockreassurance--cart svg,#cart .blockreassurance--cart img{max-width:22px;max-height:22px}
#cart .btn-outline-primary,#checkout .btn-outline-primary,
#authentication .btn-outline-primary,#identity .btn-outline-primary{
background:#fff;border:1px solid #D8E7F0;color:var(--v2-ink);
border-radius:999px;font-family:var(--font);font-weight:600;padding:.75rem 1.35rem
}
#cart .btn-outline-primary:hover,#checkout .btn-outline-primary:hover,
#authentication .btn-outline-primary:hover,#identity .btn-outline-primary:hover{
background:#fff;border-color:var(--v2-blue);color:var(--v2-blue)
}
/* ---- TUNNEL DE COMMANDE (markup Hummingbird : .checkout-steps__* / .step) ----
Le fil des étapes se chevauchait (pills en position absolue du thème) et le corps
des étapes n'était pas en carte. On repart d'une ligne simple, alignée au container. */
#checkout .checkout-steps{margin:0 0 1.4rem}
#checkout .checkout-steps__desktop{overflow:visible}
#checkout .checkout-steps__list{
display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
list-style:none;margin:0;padding:0
}
#checkout .checkout-steps__step{
display:inline-flex;align-items:center;gap:.5rem;position:static;
margin:0;padding:0;flex:0 0 auto;background:none;border:0;width:auto;height:auto
}
#checkout .checkout-steps__step::before,#checkout .checkout-steps__step::after{display:none}
#checkout .checkout-steps__number{
position:static;width:26px;height:26px;flex:0 0 auto;border-radius:50%;
background:#EAF6FB;color:var(--v2-blue);font-family:var(--font);font-weight:700;
font-size:.8rem;display:inline-grid;place-items:center;margin:0;border:0
}
#checkout .checkout-steps__step--current .checkout-steps__number{background:var(--v2-blue);color:#fff}
#checkout .checkout-steps__btn{
position:static;background:#fff;border:1px solid #E1EDF4;color:var(--v2-muted);
border-radius:999px;padding:.5rem 1.05rem;margin:0;width:auto;height:auto;
font-family:var(--font);font-weight:600;font-size:.88rem;text-decoration:none;
box-shadow:none;white-space:nowrap
}
#checkout .checkout-steps__btn.active,#checkout .checkout-steps__btn[aria-selected=true]{
background:var(--v2-blue);border-color:var(--v2-blue);color:#fff
}
#checkout .checkout-steps__btn:hover{border-color:var(--v2-blue);color:var(--v2-blue)}
#checkout .checkout-steps__btn.active:hover{color:#fff}
/* corps des étapes en carte */
#checkout .tab-content>.step,#checkout .checkout-step,
#checkout .card,#checkout .order-confirmation-card{
background:#fff;border:1px solid var(--lat-line);border-radius:18px;
box-shadow:none;padding:1.4rem 1.5rem;margin-bottom:1rem
}
#checkout .step-title,#checkout .page-title-section,#checkout .tab-content h1{
font-family:var(--font);font-weight:700;font-size:1.3rem;color:var(--v2-ink);
margin:0 0 1.1rem;background:none;padding:0;border:0
}
/* onglets « Commander en tant qu'invité / Connexion » */
#checkout .nav-underline{
gap:.4rem;border-bottom:1px solid #EEF5F9;margin-bottom:1.3rem;padding-bottom:.2rem
}
#checkout .nav-underline .nav-link{
border:0;border-bottom:2px solid transparent;border-radius:0;
font-family:var(--font);font-weight:600;font-size:.94rem;color:var(--v2-muted);
padding:.55rem .2rem;margin-right:1.2rem
}
#checkout .nav-underline .nav-link.active{color:var(--v2-blue);border-bottom-color:var(--v2-blue);background:none}
#checkout .nav-underline .nav-link:hover{color:var(--v2-blue)}
/* options de livraison et de paiement */
#checkout .delivery-option,#checkout .payment-option{
border:1px solid #E1EDF4;border-radius:14px;padding:.95rem 1.1rem;margin-bottom:.65rem;
transition:border-color .2s,background .2s
}
#checkout .delivery-option:hover,#checkout .payment-option:hover{border-color:#BEE0F1}
#checkout .delivery-option:has(input:checked),#checkout .payment-option:has(input:checked){
border-color:var(--v2-blue);background:#F7FBFD
}
#checkout .carrier-name,#checkout .payment-option label,#checkout .delivery-option label{
font-family:var(--font);font-weight:600;color:var(--v2-ink);margin:0
}
#checkout .carrier-delay,#checkout .delivery-option .carrier-delay{color:var(--v2-muted);font-size:.86rem}
#checkout .carrier-price{font-family:var(--font);font-weight:700;color:var(--v2-blue)}
#checkout .form-check-input:checked{background-color:var(--v2-blue);border-color:var(--v2-blue)}
/* récapitulatif latéral */
#checkout .checkout__summary-accordion-wrapper,#checkout .cart-summary{
background:#fff;border:1px solid var(--lat-line);border-radius:18px;padding:1.15rem 1.3rem
}
#checkout .checkout__summary-accordion,#checkout .checkout__summary-accordion-item{border:0;background:none}
#checkout .latreass{margin-top:1rem}
/* boutons de navigation entre étapes
⚠️ `:not(.cart-voucher__form *)` : sans cette exclusion, le petit bouton « Enregistrer »
du code promo héritait des 180 px et écrasait son champ de saisie (154 px, placeholder
tronqué) dans la colonne de droite. */
#checkout .continue,
#checkout .btn-primary[type=submit]:not(.cart-voucher__form *){min-width:180px}
@media(max-width:900px){
#checkout .checkout-steps__list{gap:.35rem}
#checkout .checkout-steps__btn{font-size:.82rem;padding:.45rem .8rem}
#checkout .tab-content>.step,#checkout .checkout-step{padding:1.1rem 1rem}
}
/* ---- CONNEXION / CRÉATION DE COMPTE : formulaire en carte centrée ---- */
#authentication .page-header{text-align:center}
#authentication .page-content,#password .page-content,
#authentication #content,#password #content{
background:#fff;border:1px solid var(--lat-line);border-radius:18px;
padding:clamp(1.3rem,3vw,2.2rem);max-width:560px;margin-inline:auto
}
#authentication .page-content{margin-bottom:clamp(2.5rem,6vw,5rem)}
#authentication .form-footer,#password .form-footer{
display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:1.2rem
}
#authentication .no-account,#authentication .register-form-link{
margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid #EEF5F9;text-align:center
}
#authentication .no-account a,#authentication .register-form-link a{
display:inline-flex;align-items:center;justify-content:center;
background:var(--v2-blue);color:#fff;border-radius:999px;padding:.75rem 1.4rem;
font-family:var(--font);font-weight:600;text-decoration:none;width:auto
}
#authentication .no-account a:hover{background:#0489BE;color:#fff}
#authentication .login__register-prompt{
margin-top:0;padding:1rem 1.15rem;border:1px solid #E1EDF4;border-radius:12px;
background:#F7FBFD;text-align:center
}
#authentication .login>hr{border:0;border-top:1px solid #E6F1F7;margin:1.5rem 0 1.15rem}
#authentication .login__register-prompt .h4{
margin:0 0 .7rem;color:var(--v2-muted);font-family:var(--font);font-size:.88rem;font-weight:500
}
#authentication .login__register-prompt .d-grid{display:block}
#authentication .login__register-prompt .btn-outline-primary{
display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:.4rem .95rem;
border:1px solid var(--v2-blue);border-radius:999px;background:#fff;color:var(--v2-blue);
font-family:var(--font);font-size:.84rem;font-weight:600;text-decoration:none;transition:background .2s,color .2s
}
#authentication .login__register-prompt .btn-outline-primary:hover{background:var(--v2-blue);color:#fff}
#authentication .forgot-password{margin:0}
#authentication .forgot-password a{color:var(--v2-blue)}
/* « Mot de passe oublié ? » reste un bouton noir du thème */
#authentication .forgot-password a,#authentication a.btn-tertiary,
#authentication .btn-link,#password .btn-link{
background:none;border:0;color:var(--v2-blue);padding:0;
font-family:var(--font);font-weight:600;text-decoration:underline;text-underline-offset:3px
}
#authentication .forgot-password a:hover,#password .btn-link:hover{color:#0489BE}
/* le lien « Mot de passe oublié ? » porte .btn.btn-primary dans Hummingbird :
il faut une spécificité supérieure pour le rendre à son rôle de simple lien */
#authentication .forgot-password a.btn,#authentication a.btn.forgot-password,
#authentication .forgot-password .btn-primary{
background:none!important;border:0!important;color:var(--v2-blue)!important;
padding:0!important;box-shadow:none!important;
font-weight:600;text-decoration:underline;text-underline-offset:3px
}
/* .btn-basic : la classe réellement posée sur « Mot de passe oublié ? » */
#authentication .btn-basic,#password .btn-basic,#identity .btn-basic{
background:none;border:0;color:var(--v2-blue);padding:0;box-shadow:none;
font-family:var(--font);font-weight:600;text-decoration:underline;text-underline-offset:3px
}
#authentication .btn-basic:hover,#password .btn-basic:hover{background:none;color:#0489BE}
/* ---- Récapitulatif du panier / commande (markup .cart-summary__*) ----
Les lignes étaient collées, tout en gris de la même graisse : on hiérarchise
(libellé discret / valeur en Outfit), on aère, et le total ressort en bleu. */
#cart .cart-summary__line,#checkout .cart-summary__line{
display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
padding:.45rem 0;font-size:.92rem
}
#cart .cart-summary__label,#checkout .cart-summary__label{color:var(--v2-muted);font-weight:400}
#cart .cart-summary__value,#checkout .cart-summary__value{
font-family:var(--font);font-weight:600;color:var(--v2-ink);text-align:right;white-space:nowrap
}
/* livraison offerte : on la valorise au lieu de la noyer dans le gris.
⚠️ Le vert ne doit s'appliquer QUE si le port est offert : la classe .is-free est
posée par custom.js d'après le libellé (aucune classe n'est fournie par le thème),
sinon un port de CHF 7.– s'affichait lui aussi en vert. */
#cart #cart-subtotal-shipping.is-free .cart-summary__value,
#checkout #cart-subtotal-shipping.is-free .cart-summary__value{color:#2E9E5B}
#cart .cart-summary__subtotals,#checkout .cart-summary__subtotals{
padding-bottom:.55rem;border-bottom:1px solid #EEF5F9
}
#cart .cart-summary__total,#checkout .cart-summary__total{padding-top:.65rem}
#cart .cart-summary__line--bold,#checkout .cart-summary__line--bold{padding:.2rem 0 .1rem}
#cart .cart-summary__line--bold .cart-summary__label,
#checkout .cart-summary__line--bold .cart-summary__label{
font-family:var(--font);font-weight:600;color:var(--v2-ink);font-size:.95rem
}
#cart .cart-summary__line--bold .cart-summary__value,
#checkout .cart-summary__line--bold .cart-summary__value{
font-family:var(--font);font-weight:800;color:var(--v2-blue);font-size:1.35rem
}
#cart .cart-summary__value-inner{display:block;color:var(--v2-muted);font-size:.76rem;font-weight:400}
/* code promo : un lien discret, pas un bloc de formulaire brut */
#cart .block-promo,#checkout .block-promo{margin-top:.9rem;padding-top:.9rem;border-top:1px solid #EEF5F9}
#cart .promo-code-button,#cart .block-promo a,#checkout .promo-code-button{
color:var(--v2-blue);font-weight:600;font-size:.88rem;text-decoration:none
}
#cart .promo-code-button:hover,#cart .block-promo a:hover{text-decoration:underline}
#cart .promo-input,#checkout .promo-input{border-radius:10px;border:1px solid #E1EDF4;height:44px}
#cart .checkout,#cart .cart-detailed-actions{margin-top:1rem}
/* ---- bloc de réassurance maison sur le panier / le checkout ---- */
#cart .latreass,#checkout .latreass{
background:#F7FBFD;border:1px solid var(--lat-line);border-radius:16px;
padding:1rem 1.1rem;margin-top:1rem;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1rem
}
#cart .latreass .r,#checkout .latreass .r{display:flex;align-items:flex-start;gap:.6rem}
#cart .latreass .ic,#checkout .latreass .ic{width:24px;height:24px;flex:0 0 auto;margin-top:.1rem}
#cart .latreass span,#checkout .latreass span{display:flex;flex-direction:column;gap:.1rem;min-width:0}
#cart .latreass b,#checkout .latreass b{
font-family:var(--font);font-weight:600;font-size:.86rem;color:var(--v2-ink);line-height:1.3
}
#cart .latreass small,#checkout .latreass small{color:var(--v2-muted);font-size:.76rem;line-height:1.4}
#cart .latreass .pays,#checkout .latreass .pays{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-top:.15rem}
#cart .latreass .pays img,#checkout .latreass .pays img{width:auto;height:14px;object-fit:contain}
@media(max-width:1100px){
#cart .latreass,#checkout .latreass{grid-template-columns:1fr}
}
/* ---- Respiration des pages boutique ----
Le titre collait au fil d'Ariane et « Continuer mes achats » au bloc produits. */
#cart .page-content,#cart #content,#checkout .page-content,#checkout #content,
#authentication .page-content,#identity .page-content,#address .page-content,
#addresses .page-content,#history .page-content,#order-detail .page-content,
#order-confirmation .page-content,#password .page-content,#my-account .page-content{
padding-block:clamp(1.6rem,3vw,2.6rem)
}
#cart h1,#checkout h1,#authentication h1,#identity h1,#address h1,#addresses h1,
#history h1,#order-detail h1,#order-confirmation h1,#password h1,#my-account h1{
margin-top:clamp(1.4rem,3vw,2.2rem)
}
#cart .cart-grid{margin-top:.4rem}
#cart .cart__continue-shopping{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.45rem}
#cart .cart-grid__footer{margin-top:clamp(2rem,4vw,3.2rem)}
#cart .cart-grid__footer .section-title,#cart .cart-grid__footer h2{
font-family:var(--font);font-weight:700;color:var(--v2-ink)
}
/* réassurance : cartes internes lisibles, logos de paiement sur une ligne */
#cart .latreass .r,#checkout .latreass .r{
background:#fff;border:1px solid var(--lat-line);border-radius:12px;padding:.75rem .85rem
}
#cart .latreass .pays img,#checkout .latreass .pays img{height:12px}
#cart .latreass .pays,#checkout .latreass .pays{gap:.25rem;flex-wrap:nowrap}
/* ---- Code promo (markup .cart-voucher__*) ----
Le bouton « Enregistrer » était pleine largeur et collé au champ. */
#cart .cart-summary__voucher,#checkout .cart-summary__voucher{
margin-top:.9rem;padding-top:.9rem;border-top:1px solid #EEF5F9
}
#cart .cart-voucher__accordion-button,#checkout .cart-voucher__accordion-button{
background:none;border:0;box-shadow:none;padding:.35rem 0;
font-family:var(--font);font-weight:600;font-size:.9rem;color:var(--v2-blue)
}
#cart .cart-voucher__accordion-button:hover{color:#0489BE}
#cart .cart-voucher__accordion-button:not(.collapsed){color:var(--v2-blue);background:none}
#cart .cart-voucher__accordion-button::after{filter:grayscale(1) opacity(.6)}
#cart .cart-voucher__accordion-item,#checkout .cart-voucher__accordion-item{border:0;background:none}
/* le champ et son bouton arrivaient au ras du bord bas de la carte (24 px, moins que la
respiration du haut) : on ouvre l'espace sous le formulaire, ligne de séparation comprise */
#cart .cart-voucher .accordion-body,#checkout .cart-voucher .accordion-body{padding:.6rem 0 .5rem}
#cart .cart-voucher__form,#checkout .cart-voucher__form{
display:flex;gap:.5rem;align-items:center;flex-wrap:wrap
}
#cart .cart-voucher__form .form-control,#cart .js-voucher-input,
#checkout .cart-voucher__form .form-control{
flex:1 1 150px;min-width:0;height:44px;border-radius:999px;padding:.6rem 1.05rem;
border:1px solid #E1EDF4;font-size:.9rem
}
#cart .cart-voucher__form .btn,#cart .cart-voucher__form button,
#checkout .cart-voucher__form .btn{
flex:0 0 auto;width:auto;height:44px;padding:0 1.3rem;
border-radius:999px;font-size:.88rem;font-weight:600;white-space:nowrap
}
#cart .cart-voucher__error,#checkout .cart-voucher__error{
border-radius:12px;font-size:.85rem;margin-top:.6rem;padding:.6rem .85rem
}
/* ---- alignement des deux colonnes : « Récapitulatif de commande » collait au fil d'Ariane
(6 px) alors que le titre « Panier » était à 42 px ---- */
#cart .cart-grid__aside-wrapper>h2{
margin-top:clamp(1.4rem,3vw,2.2rem);margin-bottom:.75rem;
font-family:var(--font);font-weight:700;font-size:1.15rem;color:var(--v2-ink)
}
/* ---- « Produits phares » sous le panier : titre au style des sections du site ---- */
/* le bloc allait bord à bord (x=60) alors que le contenu du panier démarre à x=70 :
on l'aligne sur la même gouttière que les colonnes */
#cart .cart-grid__footer{
margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(1.6rem,3vw,2.4rem);
padding-inline:.6rem;border-top:1px solid #EEF5F9
}
#cart .cart-grid__footer .products-section-title,
#cart .cart-grid__footer h2,#cart .cart-grid__footer .section-title{
font-family:var(--font);font-weight:700;color:var(--v2-ink);
font-size:clamp(1.4rem,2.6vw,2rem);text-align:center;margin:0 auto 1.6rem;
position:relative;padding-bottom:.7rem;line-height:1.2
}
#cart .cart-grid__footer .products-section-title::after,
#cart .cart-grid__footer h2::after,#cart .cart-grid__footer .section-title::after{
content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:52px;height:3px;background:var(--v2-blue);border-radius:999px
}
#cart .cart-grid__footer .ps-featuredproducts{padding-bottom:clamp(2rem,4vw,3rem)}
/* « Voir toute la boutique » collait à la grille de produits (écart 0) */
#cart .cart-grid__footer .module-products__buttons,
#checkout .module-products__buttons,
.module-products__buttons{margin-top:clamp(1.4rem,2.6vw,2rem);display:flex;justify-content:center}
/* Tableau des produits : le thème encadre la liste de deux (avant et après).
On ne garde qu'un filet ENTRE les produits. */
#cart .cart-grid__content hr,#cart .cart__overview hr{display:none}
/* ⚠️ chaque .product-line est SEULE dans un .cart__item : un `:last-of-type` sur
.product-line s'applique à toutes. Le filet se porte donc sur .cart__item. */
#cart .product-line{border:0}
#cart .cart__item{border-bottom:1px solid #EEF5F9}
#cart .cart__item:last-child{border-bottom:0}
/* on garde le cadre de la carte : seuls les internes et les filets
de début/fin de liste ont été retirés */
#cart .cart__overview,#cart .cart-overview{
background:#fff;border:1px solid var(--lat-line);border-radius:18px;
padding:.35rem 1.3rem
}
/* ---- Ligne produit du panier : tout sur un axe, quantité / total / suppression alignés ---- */
#cart .product-line__content{
flex:1 1 auto; /* sans cela le bloc restait à 327 px au lieu d'occuper la ligne */
display:flex;align-items:center;gap:1rem;flex-wrap:wrap;width:auto
}
#cart .product-line__content-left{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:.15rem}
#cart .product-line__content-left .product-line__title{
font-family:var(--font);font-weight:600;font-size:1rem;color:var(--v2-ink);text-decoration:none
}
#cart .product-line__item-price{color:var(--v2-muted);font-size:.88rem;font-weight:400}
/* quantité + total sur la même ligne, alignés à droite */
#cart .product-line__content-right{
/* le thème impose flex-direction:column : le total passait sous le stepper */
flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:1.4rem;margin-left:auto
}
#cart .product-line__quantity-button{margin:0}
#cart .product-line__price{
font-family:var(--font);font-weight:700;font-size:1.02rem;color:var(--v2-ink);
min-width:96px;text-align:right;margin:0
}
#cart .product-line__actions{flex:0 0 auto;display:flex;align-items:center;margin-left:.4rem}
/* « Retirer » devient une icône corbeille (le libellé reste lu par les lecteurs d'écran) */
/* ⚠️ le lien contient encore le nœud texte « Retirer » : en display:grid il forme
une 2e cellule et l'icône se retrouvait décalée hors du cercle. On centre donc
le ::before en absolu. */
#cart .js-remove-from-cart{
position:relative;width:38px;height:38px;border-radius:50%;display:inline-block;
font-size:0;line-height:0;color:var(--v2-muted);text-decoration:none;
transition:background .2s,color .2s
}
#cart .js-remove-from-cart::before{
content:"";position:absolute;inset:0;margin:auto;
width:18px;height:18px;background:currentColor;
-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 12.5a1.5 1.5 0 0 0 1.5 1.4h7a1.5 1.5 0 0 0 1.5-1.4L18 7'/%3E%3Cpath d='M9.5 7V5.2A1.2 1.2 0 0 1 10.7 4h2.6a1.2 1.2 0 0 1 1.2 1.2V7'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 12.5a1.5 1.5 0 0 0 1.5 1.4h7a1.5 1.5 0 0 0 1.5-1.4L18 7'/%3E%3Cpath d='M9.5 7V5.2A1.2 1.2 0 0 1 10.7 4h2.6a1.2 1.2 0 0 1 1.2 1.2V7'/%3E%3C/svg%3E") center/contain no-repeat
}
#cart .js-remove-from-cart:hover{background:#FDEDEC;color:#B03A2E}
#cart .js-remove-from-cart .material-icons{display:none}
@media(max-width:640px){
/* le nom passe sur sa ligne, puis quantité + total + corbeille restent groupés
sur une seule ligne (la corbeille se retrouvait seule en dessous) */
#cart .product-line{gap:.75rem}
#cart .product-line__image,#cart .product-line__image img{width:66px;height:66px}
#cart .product-line__content{gap:.55rem}
#cart .product-line__content-left{flex:1 1 140px}
#cart .product-line__content-right{flex:1 1 auto;margin-left:0;gap:.9rem;justify-content:flex-start}
#cart .product-line__price{min-width:0;margin-left:auto}
/* la corbeille remonte en haut de la box, en face de la vignette, au lieu de suivre
le total en bas de ligne */
#cart .product-line{position:relative}
#cart .product-line__actions{
position:absolute;top:0;right:0;margin:0
}
#cart .product-line__content-left{padding-right:44px}
}
/* le formulaire de code promo collait au bouton « Commander », puis (12/08) au bord bas de la
carte du récapitulatif — c'est CETTE règle qui fait foi, elle est postérieure à celle du bloc
« code promo » plus haut dans le fichier. */
#cart .cart-voucher .accordion-body,#checkout .cart-voucher .accordion-body{padding-bottom:1.6rem}
#cart .cart-summary__voucher{margin-bottom:.2rem}
#cart .checkout,#cart .cart-detailed-actions{margin-top:1.15rem}
/* ---- Message de mise à jour du panier (« … a été retiré du panier ») ----
Bandeau vert du thème, coins presque droits et collé à la carte produit. */
#cart .js-cart-update-alert{margin-bottom:1.1rem}
#cart .js-cart-update-alert .alert{
background:#F1FAF5;border:1px solid #CDE9DB;color:#1F6E47;
border-radius:14px;padding:.85rem 1.1rem;margin:0;
display:flex;align-items:center;gap:.75rem;font-size:.92rem;box-shadow:none
}
#cart .js-cart-update-alert .alert-body{font-family:var(--font);font-weight:500}
#cart .js-cart-update-alert .alert-link{
color:#1F6E47;font-weight:700;text-decoration:underline;text-underline-offset:3px
}
#cart .js-cart-update-alert .alert-link:hover{color:#145234}
/* pastille ronde autour de la coche du thème */
#cart .js-cart-update-alert .alert .material-icons,
#cart .js-cart-update-alert .alert>svg,
#cart .js-cart-update-alert .alert>i{
flex:0 0 auto;width:26px;height:26px;border-radius:50%;
background:#2E9E5B;color:#fff;display:grid;place-items:center;font-size:16px
}
#cart .js-cart-update-alert .btn-close{opacity:.4;padding:.5rem}
#cart .js-cart-update-alert .btn-close:hover{opacity:.8}
/* variantes d'erreur / d'information, mêmes formes */
#cart .js-cart-update-alert .alert-danger,#checkout .alert-danger{
background:#FDEDEC;border-color:#F3CFC9;color:#B03A2E
}
#cart .js-cart-update-alert .alert-danger .material-icons{background:#B03A2E}
/* ---- Déclinaison et prix barré d'une ligne de panier ----
« Contenance: Pochette 250 g » puis prix / prix barré / remise s'empilaient
sans hiérarchie. On reprend le langage de la fiche produit. */
#cart .product-line__item--info{
display:flex;align-items:baseline;gap:.3rem;font-size:.82rem;color:var(--v2-muted);margin:.1rem 0 .25rem
}
#cart .product-line__item-label{font-weight:400}
#cart .product-line__item-value{font-family:var(--font);font-weight:600;color:var(--v2-ink)}
/* le conteneur est en colonne dans le thème et .bg-primary de Bootstrap est en
!important : il faut forcer les deux pour aligner prix / prix barré / remise */
#cart .product-line__content-left .product-line__item--prices{
display:flex!important;flex-direction:row!important;align-items:baseline;
gap:.5rem;flex-wrap:wrap;margin:0;width:auto
}
/* les enfants ne doivent ni s'étirer ni forcer un retour à la ligne */
#cart .product-line__item--prices>*{margin:0;flex:0 0 auto;width:auto;max-width:none}
#cart .product-line__item-price{
font-family:var(--font);font-weight:700;font-size:.98rem;color:var(--v2-ink)
}
/* prix d'origine : barré, discret, jamais au même poids que le prix payé */
#cart .product-line__item-regular-price{
font-size:.85rem;color:var(--v2-muted);text-decoration:line-through;font-weight:400
}
/* pastille de remise : arrondie, aux couleurs du site (le thème la met en bleu Bootstrap carré) */
/* ⚠️ Bootstrap calcule « background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity))
!important » : la surcharge par background-color ne suffit pas. On redéfinit la VARIABLE
sur l'élément, ce qui change la valeur calculée par la déclaration de Bootstrap elle-même. */
#cart .product-line__item-discount,
#cart .product-line__item-discount.badge.bg-primary{
--bs-primary-rgb:253,237,236;
--bs-bg-opacity:1;
color:#B03A2E!important;border-radius:999px;
padding:.2rem .55rem;font-family:var(--font);font-weight:700;font-size:.72rem;line-height:1.4
}
/* le fil des étapes est hors du #content-wrapper : on l'aligne sur le même container */
#checkout .checkout-steps__desktop,#checkout .checkout-steps__mobile{
max-width:var(--v2-wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)
}
#checkout .checkout-steps{padding-block:.9rem}
/* ============================================================
TUNNEL DE COMMANDE — FINITIONS DES 4 ÉTAPES (30/07/2026)
Le bloc « PAGES BOUTIQUE PRESTASHOP » plus haut visait des classes qui
n'existent pas dans Hummingbird (.delivery-option au lieu de
.delivery-option__item…) : l'étape Livraison restait en tableau brut et
les cases à cocher se superposaient à leur libellé. On reprend ici le
markup réel, avec le langage des capsules du parcours La Box (.abx__ch).
============================================================ */
/* ---- cases à cocher et boutons radio ----
Bootstrap pose « float:left; margin-left:-1.5em » sur .form-check-input et
compte sur le padding-left de .form-check, que le thème ne rend pas : la case
se retrouvait au-dessus du texte. On repart d'un flex, partout où le client
remplit un formulaire. */
#checkout .form-check,#cart .form-check,#authentication .form-check,
#identity .form-check,#address .form-check,#order-confirmation .form-check{
display:flex;align-items:flex-start;gap:.6rem;padding-left:0;min-height:0
}
#checkout .form-check-input,#cart .form-check-input,#authentication .form-check-input,
#identity .form-check-input,#address .form-check-input{
float:none;margin:.15rem 0 0;flex:0 0 auto;width:18px;height:18px;
border:1px solid #CBDCE6;box-shadow:none
}
#checkout .form-check-input:checked,#authentication .form-check-input:checked,
#identity .form-check-input:checked,#address .form-check-input:checked{
background-color:var(--v2-blue);border-color:var(--v2-blue)
}
#checkout .form-check-input:focus,#authentication .form-check-input:focus{
border-color:var(--v2-blue);box-shadow:0 0 0 3px rgba(4,154,215,.14)
}
#checkout .form-check-label,#cart .form-check-label,#authentication .form-check-label{
font-size:.92rem;color:var(--v2-ink);margin:0;line-height:1.45
}
#checkout .form-check-inline{display:inline-flex;margin-right:1.4rem}
/* le texte d'aide (message de confidentialité, newsletter…) sous une case */
#checkout .form-check em,#checkout .form-check .form-text{
display:block;color:var(--v2-muted);font-size:.84rem;font-style:normal;margin-top:.15rem
}
/* ---- étape 1 : onglets « Commander en tant qu'invité » / « Connexion » ----
La liste n'héritait pas du display:flex de Bootstrap : le second onglet
passait sous le premier avec un filet pleine largeur.
⚠️ Les
restaient ensuite désalignés (46 px contre 64 px de haut, bouton
décalé de 9 px vers le bas) : les boutons sont inline-block et le retour à la
ligne du template compte comme un nœud de texte, dont la ligne de base ajoute
un talon sous le bouton. Passer les
en flex fait ignorer ces blancs, et
l'alignement en bas met les deux soulignements sur la même ligne. */
#checkout .nav-underline{
display:flex;flex-wrap:wrap;align-items:flex-end;gap:0;list-style:none
}
#checkout .nav-underline .nav-item{
display:flex;align-items:stretch;margin:0;padding:0;list-style:none
}
#checkout .nav-underline .nav-link{
display:flex;align-items:center;background:none
}
/* radios « Titre » (M. / Mme) en capsules */
#checkout .form-check-inline:has(input[type=radio]){
border:1px solid #E1EDF4;border-radius:999px;padding:.42rem .95rem;
margin:0 .5rem .35rem 0;transition:border-color .2s,background .2s
}
#checkout .form-check-inline:has(input[type=radio]:checked){
border-color:var(--v2-blue);background:#F7FBFD
}
/* ---- étape 2 : adresse sur deux colonnes ----
Une quinzaine de champs empilés faisaient une page de 2 300 px. Les paires
naturelles passent côte à côte (le markup n'a aucune classe de grille : on cible
par le nom du champ). Les champs vivent dans un « section.form-fields », pas en
enfants directs du