@font-face{font-family:'Fraunces';src:url('../Fraunces.ttf');font-weight:100 900;}
@font-face{font-family:'Archivo';src:url('../Archivo.ttf');font-weight:100 900;}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;}
body{font-family:'Archivo',sans-serif;font-size:16px;line-height:1.62;color:#12161C;background:#FAFAFB;
-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.w{max-width:1360px;margin:0 auto;padding:0 40px;}
.wn{max-width:1080px;margin:0 auto;padding:0 40px;}
h1,h2,h3,.dsp{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-weight:800;text-transform:uppercase;
letter-spacing:-0.005em;line-height:1.03;}
h1{font-size:clamp(40px,5.6vw,82px);}
h2{font-size:clamp(30px,3.4vw,50px);line-height:1.06;}
h3{font-size:24px;line-height:1.18;}
p{color:#3A4048;}
.lab{font-family:'Archivo';font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:#C31F4A;font-variation-settings:'wdth' 100;}
.lab.q{color:#6E7883;}
/* ---------- header ---------- */
.top{background:#141C26;color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
text-align:center;padding:9px 20px;font-weight:500;}
header{border-bottom:1px solid #DCE2E8;background:#FAFAFB;position:sticky;top:0;z-index:50;}
.hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:20px 40px;
max-width:1360px;margin:0 auto;}
.hnav{display:flex;gap:26px;font-size:13px;font-weight:500;letter-spacing:.04em;}
.hnav a.on{color:#C31F4A;}
.hnav.r{justify-content:flex-end;}
.brand{text-align:center;}
.brand .nm{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:30px;letter-spacing:-0.005em;text-transform:uppercase;
line-height:1;color:#12161C;}
.brand .tg{font-size:9px;letter-spacing:.34em;color:#6E7883;margin-top:5px;font-weight:600;}
.icons{display:flex;gap:16px;justify-content:flex-end;}
.burger{display:none;}
/* ---------- hero ---------- */
.hero{position:relative;}
.hero .img{width:100%;height:78vh;min-height:520px;object-fit:cover;}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,30,19,.88) 0%,rgba(12,30,19,.72) 38%,rgba(12,30,19,.30) 66%,rgba(12,30,19,.10) 100%);}
.hero .cnt{position:absolute;inset:0;display:flex;align-items:center;}
.hero .cnt .w{width:100%;}
.hero h1{color:#fff;max-width:15ch;margin:16px 0 20px;}
.hero p{color:rgba(255,255,255,.9);max-width:44ch;font-size:18px;margin-bottom:30px;}
.hero .lab{color:#E8C79A;}
.split{display:grid;grid-template-columns:1.02fr .98fr;min-height:640px;}
.split .pane{background:#141C26;color:#fff;display:flex;align-items:center;padding:70px 60px;}
.split .pane .in{max-width:520px;}
.split h1{color:#fff;margin:18px 0 20px;}
.split p{color:rgba(255,255,255,.86);font-size:18px;margin-bottom:30px;}
.split .ph{position:relative;overflow:hidden;}
.split .ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.split .lab{color:#F0A8BC;}
.btn{display:inline-block;background:#C31F4A;color:#fff;padding:16px 34px;font-size:13px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;}
.btn.o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);margin-left:10px;}
.btn.d{background:#141C26;}
.btn.line{background:transparent;color:#12161C;border:1px solid #12161C;}
/* ---------- ticker ---------- */
.tick{background:#C31F4A;color:#fff;}
.tick .in{display:flex;justify-content:center;gap:0;flex-wrap:wrap;padding:15px 20px;
font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;}
.tick span{padding:0 26px;position:relative;}
.tick span+span::before{content:'';position:absolute;left:0;top:50%;width:4px;height:4px;
background:rgba(255,255,255,.7);transform:translateY(-50%) rotate(45deg);}
/* ---------- sections ---------- */
section{padding:96px 0;}
section.tight{padding:64px 0;}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px;}
.sh .num{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:15px;color:#C31F4A;margin-bottom:12px;letter-spacing:.1em;}
.sh .more{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#C31F4A;
border-bottom:1px solid #C31F4A;padding:12px 0 3px;display:inline-block;}
.sh p.sub{color:#6E7883;max-width:52ch;margin-top:12px;}
/* ---------- sizes rail ---------- */
/* Le nombre de tuiles varie (une hauteur sans arbre n'est pas proposee). Avec cinq
colonnes figees, quatre tuiles laissaient une case vide et une bordure pendante a
droite. En flux colonne, la grille compte exactement autant de colonnes que de
tuiles. (Constat Vision Humain du 30/08/2026.) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid #DCE2E8;}
.rail a{border-bottom:1px solid #DCE2E8;border-right:1px solid #DCE2E8;padding:30px 22px 26px;
display:flex;flex-direction:column;gap:6px;background:#FAFAFB;}
.rail a:first-child{border-left:1px solid #DCE2E8;}
.rail .n{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:32px;color:#12161C;}
.rail .t{font-size:12.5px;color:#6E7883;letter-spacing:.04em;}
.rail a.on{background:#E9EDF1;}
.rail a.on .n{color:#C31F4A;}
/* ---------- mosaic ---------- */
.mos{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:212px;gap:14px;}
.cell{position:relative;overflow:hidden;display:block;}
.cell img{width:100%;height:100%;object-fit:cover;}
body.alvenna .cell img{object-position:center 12%;}
body.alvenna .feat .fr img{object-position:center 10%;}
.cell .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.30) 58%,rgba(0,0,0,.80) 100%);}
.cell .cap{position:absolute;left:24px;bottom:20px;right:20px;color:#fff;}
.cell .cap .k{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.85;margin-bottom:6px;}
.cell .cap .t{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:25px;text-transform:uppercase;letter-spacing:-0.005em;}
.c-a{grid-column:span 2;grid-row:span 2;}
.c-b{grid-column:span 2;grid-row:span 1;}
.c-c{grid-column:span 1;grid-row:span 1;}
/* Tuile pleine largeur : sert quand le compte de collections laisserait une
case vide en bout de mosaique. Les classes sont posees par le PHP selon le
nombre reellement affiche, jamais en dur. */
.c-w{grid-column:span 4;grid-row:span 1;}
/* ---------- products ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
/* La carte est une colonne : le bloc prix est pousse en bas (margin-top:auto).
Sans cela, un titre sur 3 lignes decale son prix vers le bas et la rangee perd
son alignement — le defaut saute aux yeux des que 2 titres n'ont pas la meme
longueur, ce qui est le cas partout. */
.pc{display:flex;flex-direction:column;height:100%;}
.pc .ph{position:relative;background:#E9EDF1;overflow:hidden;aspect-ratio:4/5;}
.pc .ph img{width:100%;height:100%;object-fit:cover;}
.pc .tagpc{position:absolute;top:0;left:0;background:#FAFAFB;color:#12161C;font-size:10px;
letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;font-weight:600;}
.pc h3{font-size:16.5px;line-height:1.35;margin:16px 0 5px;font-family:'Archivo';font-weight:600;
text-transform:none;letter-spacing:0;font-variation-settings:'wdth' 100;}
.pc .f{font-size:12.5px;color:#6E7883;}
.pc .pr{margin-top:auto;padding-top:10px;border-top:1px solid #DCE2E8;display:flex;
justify-content:space-between;align-items:center;}
.pc .f{margin-bottom:10px;}
.pc .pr b{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:20px;font-weight:800;color:#12161C;}
.pc .pr .ar{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C31F4A;font-weight:600;}
/* ---------- manifesto ---------- */
.manif{background:#141C26;color:#fff;padding:104px 0;}
.manif h2{color:#fff;max-width:19ch;margin:18px 0 0;}
.manif .lab{color:#E8C79A;}
.manif .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px;
border-top:1px solid rgba(255,255,255,.2);padding-top:34px;}
.manif .pt .n{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:14px;color:#E8C79A;margin-bottom:10px;}
.manif .pt h4{font-size:18px;margin-bottom:8px;font-weight:600;}
.manif .pt p{color:rgba(255,255,255,.76);font-size:14.5px;}
/* ---------- offset feature ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-bottom:96px;}
.feat:last-child{margin-bottom:0;}
.feat .fr{position:relative;padding:22px 0 0 22px;}
.feat .fr::before{content:'';position:absolute;left:0;top:0;width:72%;height:78%;background:#E9EDF1;}
.feat .fr img{position:relative;width:100%;height:440px;object-fit:cover;}
.feat.rev .fr{padding:22px 22px 0 0;}
.feat.rev .fr::before{left:auto;right:0;}
.feat.rev .tx{order:-1;}
.feat h3{font-size:32px;margin:14px 0 14px;}
.feat p{max-width:46ch;}
.feat .n{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:14px;color:#C31F4A;}
/* ---------- cta band ---------- */
.cta{position:relative;}
.cta img{width:100%;height:420px;object-fit:cover;}
/* Bande CTA en deux colonnes, posee par le PHP quand la photo est trop etroite pour
le plein cadre (voir front-page.php). L'image est reduite, donc nette ; le texte
passe sur le fond de marque, aligne a gauche. En mobile la bande reste identique :
sur 390 px la photo est deja reduite. */
@media(min-width:821px){
.cta.cta-court{display:grid;grid-template-columns:44% 56%;background:#141C26;align-items:stretch;}
/* Hauteur bornee : laissee libre, la colonne image imposait 845 px et le texte
flottait dans un grand vide. 520 px garde une reduction de l'image (0,70x). */
.cta.cta-court img{height:520px;object-position:50% 22%;}
.cta.cta-court .ov{position:static;background:transparent !important;
align-items:center;padding:56px 5vw;}
.cta.cta-court .ov .w{padding:0;max-width:56ch;}
.cta.cta-court h2,.cta.cta-court p{margin-left:0;margin-right:0;text-align:left;}
.cta.cta-court .ov{text-align:left;}
}
.cta .ov{position:absolute;inset:0;background:rgba(14,36,23,.72);display:flex;align-items:center;
justify-content:center;text-align:center;}
.cta h2{color:#fff;max-width:18ch;margin:0 auto 16px;}
.cta p{color:rgba(255,255,255,.85);max-width:46ch;margin:0 auto 26px;}
/* ---------- footer ---------- */
footer{background:#0C131B;color:rgba(255,255,255,.72);padding:78px 0 30px;font-size:13.5px;}
footer .nm{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:34px;color:#fff;text-transform:uppercase;
letter-spacing:-0.005em;}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:34px;
padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.16);}
footer h4{color:#fff;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px;
font-weight:600;}
footer li{list-style:none;margin-bottom:9px;}
footer .bot{display:flex;justify-content:space-between;padding-top:22px;font-size:12px;
color:rgba(255,255,255,.5);flex-wrap:wrap;gap:12px;}
.pay span{border:1px solid rgba(255,255,255,.25);padding:4px 10px;margin-left:7px;font-size:11px;}
/* ---------- page hero (secondaires) ---------- */
.ph2{background:#141C26;color:#fff;padding:74px 0 66px;}
/* L'allemand fabrique des mots que rien ne coupe : « SENDUNGSVERFOLGUNG »,
« DATENSCHUTZERKLÄRUNG », « WIDERRUFSBELEHRUNG ». En capitales Archivo a 34 px,
ils sortaient du cadre de 59 px sur un ecran de 390. La borne basse du clamp
devient relative a la largeur, et on autorise la cesure en dernier recours. */
.ph2 h1{color:#fff;max-width:17ch;margin-top:14px;
font-size:clamp(26px,min(4.4vw,7.6vw),60px);
overflow-wrap:anywhere;hyphens:auto;}
.ph2 p{color:rgba(255,255,255,.8);max-width:52ch;margin-top:18px;font-size:17px;}
.ph2 .lab{color:#E8C79A;}
/* ---------- article ---------- */
.art{max-width:720px;}
.art .intro{font-size:20px;line-height:1.6;color:#12161C;margin-bottom:34px;}
/* Rythme des pages editoriales, releve sur Luventa le 30/08/2026 : un titre de
section souligne d'un filet, puis des questions bien detachees. Il n'existait
AUCUNE regle pour .art h3 : les questions tombaient sur le style par defaut,
ecrase par le reset, et la page se lisait comme un mur de texte. */
.art h2{font-size:29px;margin:56px 0 0;padding-bottom:13px;border-bottom:1px solid #DCE2E8;}
.art > h2:first-child{margin-top:0;}
.art h2 + h3{margin-top:26px;}
.art h3{font-size:21px;line-height:1.3;margin:34px 0 8px;}
.art p{margin-bottom:18px;}
.art .pull{border-left:3px solid #C31F4A;padding:6px 0 6px 24px;margin:32px 0;
font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:23px;line-height:1.3;color:#12161C;text-transform:uppercase;}
.side{border:1px solid #DCE2E8;padding:26px;background:#FAFAFB;}
.side h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#C31F4A;margin-bottom:14px;}
.side li{list-style:none;padding:0;border-bottom:1px solid #DCE2E8;font-size:14px;} .side li a{display:block;padding:12px 0;}
/* La derniere ligne n'a pas besoin d'un trait : il pendait sous la liste. */
.side li:last-child{border-bottom:0;padding-bottom:0;}
/* Ces encadres listent de vraies pages : les entrees sont des liens, avec une zone
tactile pleine largeur. La page en cours reste en texte. (Vision Humain 30/08.) */
.side li a{display:block;color:#12161C;text-decoration:none;padding:3px 0;}
.side li a:hover{color:#C31F4A;}
.side li.on{color:#6E7883;}
.artgrid{display:grid;grid-template-columns:1fr 300px;gap:56px;}
/* ---------- PDP ---------- */
.crumb{font-size:13px;color:#6E7883;padding:14px 0;letter-spacing:.04em;} .crumb a{display:inline-block;padding:8px 0;}
.pdp{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:start;}
.gal{display:grid;grid-template-columns:78px 1fr;gap:14px;}
.rail2{display:flex;flex-direction:column;gap:10px;}
.rail2 .t{aspect-ratio:1;background:#E9EDF1;border:1px solid #DCE2E8;font-size:8.5px;color:#6E7883;
display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;}
.rail2 .t.on{border:1.5px solid #C31F4A;padding:0;overflow:hidden;}
.rail2 .t.on img{width:100%;height:100%;object-fit:cover;}
.main{background:#E9EDF1;aspect-ratio:1;overflow:hidden;}
.main img{width:100%;height:100%;object-fit:cover;}
.buy .lab{margin-bottom:12px;display:block;}
.buy h1{font-size:clamp(28px,3vw,42px);}
.prow{display:flex;align-items:baseline;gap:14px;margin:20px 0 4px;}
.prow .p{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:34px;color:#12161C;font-weight:800;}
.vat{font-size:12.5px;color:#6E7883;}
.facts{margin:26px 0;border-top:1px solid #DCE2E8;}
.facts .r{display:grid;grid-template-columns:16px 1fr 1.15fr;gap:14px;padding:13px 0;
border-bottom:1px solid #DCE2E8;font-size:14.5px;align-items:start;}
.facts .r .i{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:11px;color:#C31F4A;padding-top:3px;}
.facts .r .k{color:#6E7883;}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 22px;}
.chip{border:1px solid #DCE2E8;padding:12px 20px;font-size:14px;font-weight:500;min-width:64px;text-align:center;}
.chip.on{border-color:#12161C;background:#12161C;color:#fff;}
.chips.filt .chip.on{border-color:#C31F4A;background:#C31F4A;color:#fff;}
.cta2{display:block;width:100%;text-align:center;background:#C31F4A;color:#fff;padding:19px;
font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;}
.dlv{background:#E9EDF1;padding:15px 18px;margin:18px 0;font-size:14px;border-left:3px solid #C31F4A;}
.dlv b{color:#C31F4A;}
.tr li{list-style:none;font-size:13.5px;color:#3A4048;padding:7px 0 7px 22px;position:relative;}
/* Chevron d'une liste « d'ici vous pouvez aller la » : il doit pointer a DROITE.
Les bords gauche+bas tournes de -45 deg dessinaient un chevron vers le BAS,
qui se lit « deplier ». (Constat Vision Humain du 30/08.) */
.tr li::before{content:'';position:absolute;left:2px;top:13px;width:7px;height:7px;
border-top:1.6px solid #C31F4A;border-right:1.6px solid #C31F4A;transform:rotate(45deg);}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.stab{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;}
.stab th{text-align:left;padding:13px 16px;background:#141C26;color:#fff;font-size:10.5px;
letter-spacing:.18em;text-transform:uppercase;font-weight:600;}
.stab td{padding:13px 16px;border-bottom:1px solid #DCE2E8;}
.stab tr:nth-child(even) td{background:#FAFAFB;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.duo .b{padding:44px 44px;}
.duo .b.dark{background:#141C26;color:#fff;}
.duo .b.dark p,.duo .b.dark li{color:rgba(255,255,255,.8);}
.duo .b.lite{background:#E9EDF1;}
.duo h3{font-size:26px;margin-bottom:20px;}
.duo li{list-style:none;padding:10px 0 10px 24px;position:relative;font-size:14.5px;
border-bottom:1px solid rgba(125,125,125,.18);}
.duo li::before{content:'';position:absolute;left:0;top:18px;width:8px;height:8px;
border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.6;}
.faq .q{border-bottom:1px solid #DCE2E8;padding:24px 0;display:grid;grid-template-columns:34px 1fr 24px;gap:14px;}
.faq .q .n{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:13px;color:#C31F4A;padding-top:5px;}
.faq .q h4{font-size:18px;font-weight:600;margin-bottom:9px;}
.faq .q p{font-size:14.5px;max-width:70ch;}
.faq .q .pl{color:#6E7883;text-align:right;font-size:18px;}
/* ---------- form / steps ---------- */
.fm label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:#6E7883;margin:20px 0 8px;font-weight:600;}
.fm input,.fm textarea{width:100%;border:1px solid #DCE2E8;padding:15px;font-size:15px;
font-family:'Archivo';background:#fff;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:34px 0;}
.steps .s{border-top:2px solid #DCE2E8;padding-top:18px;}
.steps .s.on{border-top-color:#C31F4A;}
.steps .s .d{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6E7883;}
.steps .s .t{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:19px;margin-top:6px;color:#12161C;}
.steps .s.on .t{color:#C31F4A;}
.panel{background:#141C26;color:#fff;padding:36px;}
.panel h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#E8C79A;margin-bottom:18px;}
.panel .r{display:flex;justify-content:space-between;padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.15);font-size:14px;}
.panel .r span:first-child{color:rgba(255,255,255,.6);}
/* ---------- PDP modèle Luventa ---------- */
.lvgal .big{border-radius:10px;overflow:hidden;background:#E9EDF1;aspect-ratio:1;}
.lvgal .big img{width:100%;height:100%;object-fit:cover;}
.lvthumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
/* Les vignettes doivent TOUTES etre carrees et recadrees, pas seulement l'active :
sans cela l'image gardait sa taille naturelle et debordait de son bouton, ce qui
donnait des vignettes de formats differents. (Constat Vision Humain du 30/08.) */
.lvthumbs .t{aspect-ratio:1;border-radius:8px;background:#E9EDF1;border:1px solid #DCE2E8;
font-size:8.5px;color:#6E7883;display:flex;align-items:center;justify-content:center;
text-align:center;padding:0;overflow:hidden;cursor:pointer;}
.lvthumbs .t img{width:100%;height:100%;object-fit:cover;display:block;}
.lvthumbs .t.on{border:1.5px solid #C31F4A;}
.stock{font-size:12.5px;color:#C31F4A;margin-top:8px;}
.key{background:#E9EDF1;border-radius:10px;padding:18px 22px;margin:20px 0;}
.key .kl{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.2em;
text-transform:uppercase;color:#C31F4A;font-weight:600;margin-bottom:9px;}
.key .kl::before{content:'';width:18px;height:1px;background:#C31F4A;}
.key p{font-size:14.5px;}
.addrow{display:flex;gap:12px;margin:18px 0 14px;}
.qty{width:78px;border:1px solid #DCE2E8;border-radius:8px;background:#fff;display:flex;
align-items:center;justify-content:center;font-size:15px;}
.addcart{flex:1;background:#C31F4A;color:#fff;border-radius:8px;text-align:center;padding:19px;
font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;}
.spec{border:1px solid #DCE2E8;border-radius:8px;background:#fff;padding:15px 18px;
display:flex;justify-content:space-between;align-items:center;font-size:14.5px;margin-bottom:14px;}
.spec .rt{display:flex;align-items:center;gap:10px;color:#6E7883;}
.spec .badge{background:#E9EDF1;border-radius:50%;width:22px;height:22px;font-size:11px;
display:flex;align-items:center;justify-content:center;color:#12161C;}
.icons3{background:#E9EDF1;border-radius:10px;display:grid;grid-template-columns:repeat(3,1fr);
gap:10px;padding:22px 14px;text-align:center;}
.icons3 .ic{width:40px;height:40px;border-radius:50%;background:#fff;margin:0 auto 11px;
display:flex;align-items:center;justify-content:center;color:#C31F4A;}
.icons3 b{font-size:12.5px;display:block;margin-bottom:4px;}
.icons3 p{font-size:11px;color:#6E7883;line-height:1.45;}
.psize{display:flex;align-items:center;gap:18px;border:1px solid #DCE2E8;border-radius:10px;
background:#fff;padding:16px 18px;margin:18px 0;}
.psize svg{flex-shrink:0;}
.psize .sv{font-weight:600;font-size:14.5px;color:#12161C;}
.psize .sc{font-size:12px;color:#6E7883;margin-top:3px;}
.benef{background:#E9EDF1;border-radius:10px;display:grid;gap:14px;padding:22px 14px;text-align:center;
grid-template-columns:repeat(auto-fit,minmax(94px,1fr));}
.benef .ic{width:50px;height:50px;border-radius:50%;background:#fff;margin:0 auto 9px;
display:flex;align-items:center;justify-content:center;color:#C31F4A;}
.benef b{font-size:13.5px;display:block;line-height:1.3;}
.benef em{font-size:11.5px;color:#6E7883;font-style:normal;display:block;margin-top:3px;}
.meta{font-size:12.5px;color:#6E7883;margin-top:18px;line-height:2;}
.meta b{color:#C31F4A;font-weight:500;}
.lvblk{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:74px;}
.lvblk:last-child{margin-bottom:0;}
.lvblk img{width:100%;border-radius:10px;max-height:470px;object-fit:cover;}
.lvblk .pan{background:#E9EDF1;border-radius:10px;padding:34px;text-align:center;}
.lvblk .pan img{max-width:74%;max-height:400px;object-fit:contain;margin:0 auto;border-radius:6px;}
.lvblk .pan .cap{font-size:13px;font-weight:600;margin-top:16px;color:#12161C;}
.lvblk h3{font-size:30px;margin-bottom:16px;}
.lvblk p{margin-bottom:13px;max-width:48ch;}
.lvblk.rev .tx{order:-1;}
.good{max-width:840px;margin:0 auto;}
.good .hd2{text-align:center;margin-bottom:26px;}
.good .hd2 h2{font-size:34px;}
.good .row{display:flex;justify-content:space-between;align-items:center;padding:21px 4px;
border-bottom:1px solid #DCE2E8;font-size:16px;}
.good .row:first-of-type{border-top:1px solid #DCE2E8;}
.good .row .l{display:flex;align-items:center;gap:13px;}
.good .row .pl{color:#C31F4A;font-size:19px;}
.good .open{padding:2px 4px 22px;border-bottom:1px solid #DCE2E8;}
/* ---------- Kasse : en-tête et pied réduits (leçon Nekoo 25/08) ---------- */
.hdck{display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:22px 40px;max-width:1360px;margin:0 auto;}
.hdck .brand{text-align:left;}
.hdck .secure{display:flex;align-items:center;gap:9px;font-size:12px;color:#6E7883;
letter-spacing:.06em;}
.stepper{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:#6E7883;font-weight:600;}
.stepper .s2{display:flex;align-items:center;gap:7px;}
.stepper .n2{width:20px;height:20px;border-radius:50%;border:1px solid #DCE2E8;
display:flex;align-items:center;justify-content:center;font-size:10px;}
.stepper .on .n2{background:#C31F4A;border-color:#C31F4A;color:#fff;}
.stepper .done .n2{background:#141C26;border-color:#141C26;color:#fff;} .stepper .done{color:#12161C;}
.stepper .on{color:#12161C;}
.stepper .sep{width:26px;height:1px;background:#DCE2E8;}
.fck{background:#FAFAFB;border-top:1px solid #DCE2E8;padding:26px 0 30px;font-size:12.5px;color:#6E7883;}
.fck .in2{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.fck a{color:#6E7883;margin-right:18px;display:inline-block;padding:10px 0;}
.fck .pay span{border:1px solid #DCE2E8;color:#6E7883;background:#fff;}
/* ---------- Kasse (modèle Luventa) ---------- */
.ck{display:grid;grid-template-columns:1.52fr 1fr;gap:56px;align-items:start;}
.ck h2{font-size:23px;margin:32px 0 14px;}
.ck h2:first-child{margin-top:0;}
.fld{width:100%;border:1px solid #DCE2E8;border-radius:8px;padding:15px;background:#fff;
font-size:14.5px;color:#6E7883;margin-bottom:12px;}
.fld .sm{font-size:10.5px;display:block;color:#6E7883;margin-bottom:3px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.radio{border:1px solid #DCE2E8;border-radius:8px;padding:17px;display:flex;
justify-content:space-between;align-items:center;margin-bottom:12px;background:#fff;font-size:14.5px;}
.radio .l{display:flex;align-items:center;gap:12px;}
.radio.sel{border-color:#12161C;}
.dot{width:18px;height:18px;border-radius:50%;border:1.5px solid #DCE2E8;position:relative;flex:none;}
.dot.on{border-color:#12161C;}
.dot.on::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#12161C;}
.box{border:1px solid #12161C;border-radius:8px;padding:17px;margin-bottom:12px;background:#fff;}
.cbx{width:17px;height:17px;border:1.5px solid #DCE2E8;border-radius:3px;display:inline-block;
vertical-align:-3px;margin-right:10px;position:relative;}
.cbx.on{background:#12161C;border-color:#12161C;}
.cbx.on::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg);}
.place{display:block;width:100%;text-align:center;background:#C31F4A;color:#fff;border-radius:999px;
padding:23px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-top:24px;}
.legal{font-size:14px;color:#6E7883;margin-top:22px;padding-top:20px;border-top:1px solid #DCE2E8;}
.legal a{display:inline-block;padding:6px 0;margin:-6px 0;}
.legal b{color:#C31F4A;font-weight:500;}
.sum{border:1px solid #DCE2E8;border-radius:10px;background:#fff;}
.sum h3{font-size:21px;padding:22px 22px 4px;}
.sum .item{display:grid;grid-template-columns:64px 1fr auto;gap:15px;padding:18px 22px;align-items:start;}
.sum .th{position:relative;}
.sum .th img{width:64px;height:64px;object-fit:cover;border-radius:8px;}
.sum .qb{position:absolute;top:-7px;right:-7px;background:#12161C;color:#fff;width:21px;height:21px;
border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;}
.sum .nm{font-size:14px;font-weight:600;line-height:1.35;}
.sum .ex{font-size:12px;color:#6E7883;margin-top:5px;}
.sum .lines{border-top:1px solid #DCE2E8;padding:14px 22px;}
.sum .l2{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:#3A4048;}
.sum .tot{border-top:1px solid #DCE2E8;padding:18px 22px;display:flex;
justify-content:space-between;align-items:center;}
.sum .tot .t{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:27px;color:#12161C;}
.sum .note{padding:0 22px 20px;font-size:12px;color:#6E7883;}
@media(max-width:820px){
.lvblk{grid-template-columns:1fr;gap:24px;margin-bottom:48px;}
.lvblk.rev .tx{order:0;} .lvblk h3{font-size:25px;}
.lvthumbs{grid-template-columns:repeat(5,1fr);gap:7px;} .lvthumbs .t{font-size:6.5px;padding:3px;}
.icons3{grid-template-columns:1fr;gap:18px;text-align:left;}
.icons3 .ic{margin:0 0 8px;}
.ck{grid-template-columns:1fr;gap:26px;} .ck .sumcol{order:-1;}
.hdck{padding:14px 20px;flex-wrap:wrap;gap:12px;} .stepper{font-size:9.5px;letter-spacing:.1em;}
.stepper .sep{width:14px;} .hdck .secure{display:none;}
.fck .in2{flex-direction:column;align-items:flex-start;gap:12px;}
.good .hd2 h2{font-size:26px;}
.w,.wn{padding:0 20px;}
/* Centrage mobile facon Luventa (03/09) : `1fr auto 1fr` ne centre pas quand un
cote est plus lourd (1 burger a gauche, 2 icones a droite) — une colonne 1fr ne
descend pas sous son contenu minimal, le logo derivait a gauche. Luventa sort le
logo du flux : header relatif + logo absolu a 50 %, centre VRAI quel que soit le
poids des cotes. */
.hd{display:flex;justify-content:space-between;align-items:center;position:relative;padding:14px 20px;}
.hd .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:64vw;}
.hnav{display:none;} .burger{display:block;}
/* Zones tactiles de l'en-tete. Les icones sont dessinees en 19x19 (21 pour le
burger) : c'est la bonne taille VISUELLE, mais une cible de 19 px se rate au
pouce. On agrandit la ZONE CLIQUABLE a 44 px sans toucher au dessin, en
compensant l'ecart par des marges negatives pour ne pas deformer l'en-tete. */
.icons{gap:4px;align-items:center;}
.icons > a,.icons > button,.burger{
display:flex;align-items:center;justify-content:center;
min-width:44px;min-height:44px;margin:-12px -6px;}
.brand .nm{font-size:23px;} .brand .tg{font-size:8px;letter-spacing:.28em;}
.hero .img{height:74vh;min-height:440px;object-position:50% 50%;}
/* Les deux boutons du heros etaient en ligne : au retour a la ligne, le second
heritait de son margin-left et demarrait 10 px plus a droite, largeur differente,
colles l'un a l'autre. En mobile ils s'empilent, meme largeur, meme bord gauche. */
.hero .btn,.split .pane .btn{display:block;width:100%;text-align:center;}
.hero .btn.o,.split .pane .btn.o{margin-left:0;margin-top:12px;}
/* Voile renforce : sur une photo claire (sapin enneige, mur blanc) le sur-titre
cuivre et le chapeau blanc passaient sous le seuil de lisibilite. Le haut reste
peu voile pour qu'on voie la photo. (Constat Vision Humain du 30/08.) */
.hero .scrim{background:linear-gradient(180deg,rgba(20,48,31,.18) 10%,rgba(20,48,31,.78) 46%,rgba(20,48,31,.94) 100%);}
.hero .cnt{align-items:flex-end;padding-bottom:40px;}
.hero p{font-size:15.5px;}
.split{grid-template-columns:1fr;min-height:0;}
.split .pane{padding:32px 20px 36px;order:2;} .split .ph{height:300px;}
.split h1{font-size:clamp(32px,9vw,40px);} .split p{font-size:15px;}
section{padding:56px 0;} .manif{padding:64px 0;}
.sh{flex-direction:column;align-items:flex-start;gap:12px;}
/* Rail sur 2 colonnes. Les tuiles sont filtrees a l'affichage (une hauteur sans
arbre n'est pas proposee) : le nombre varie. Les bordures doivent donc tenir
pour 3, 4 ou 5 tuiles, et la derniere ne s'etale QUE si elle resterait seule.
Avant : span systematique -> 4 tuiles laissaient un trou et un cadre ouvert. */
.rail{grid-auto-flow:row;grid-template-columns:1fr 1fr;}
.rail a{border-left:1px solid #DCE2E8;border-right:0;}
.rail a:nth-child(2n){border-right:1px solid #DCE2E8;}
.rail a:last-child:nth-child(2n+1){grid-column:span 2;border-right:1px solid #DCE2E8;}
/* Meme regle pour la mosaique : la tuile finale ne s'etale que si le compte
la laisserait seule sur sa ligne (la vignette de tete occupe 2 lignes). */
.mos .cell:last-child:nth-child(2n){grid-column:span 2;}
.mos{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px;}
.cell .cap{left:14px;right:12px;bottom:12px;}
.cell .cap .t{font-size:15px;} .cell .cap .k{font-size:8.5px;margin-bottom:3px;}
.c-a{grid-column:span 2;grid-row:span 2;} .c-b,.c-c{grid-column:span 1;grid-row:span 1;}
.c-w{grid-column:span 2;}
.grid4,.grid3{grid-template-columns:1fr 1fr;gap:16px;}
.manif .pts{grid-template-columns:1fr;gap:22px;}
.feat{grid-template-columns:1fr;gap:24px;margin-bottom:52px;}
/* Le cadre beige decale (22 px) fonctionne sur une colonne large. Sur 350 px il
ne se lit plus comme une intention : la photo parait poussee a droite, collee
au bord, avec une bande beige qui depasse en haut a gauche. En mobile la photo
occupe toute la largeur, sans cadre. (Constat Vision Humain du 30/08.) */
.feat .fr{padding:0;} .feat.rev .fr{padding:0;} .feat .fr::before{display:none;}
.feat .fr img{height:300px;} .feat.rev .tx{order:0;}
.feat h3{font-size:25px;}
.cta img{height:340px;}
footer .cols{grid-template-columns:1fr 1fr;gap:26px;}
.pdp{grid-template-columns:1fr;gap:30px;}
.gal{grid-template-columns:1fr;} .rail2{flex-direction:row;order:2;overflow-x:auto;} .rail2 .t{flex:0 0 21%;font-size:7.5px;}
.artgrid{grid-template-columns:1fr;gap:30px;}
.duo{grid-template-columns:1fr;} .duo .b{padding:30px 20px;}
.steps{grid-template-columns:1fr 1fr;gap:14px;}
.artgrid{grid-template-columns:1fr !important;}
.charte-pal{grid-template-columns:1fr 1fr !important;}
.charte-ton{grid-template-columns:1fr !important;}
.ph2{padding:46px 0 44px;}
/* Le bandeau se repliait en 3 lignes avec les puces de separation retombees en
debut de ligne. En mobile on assume une promesse par ligne, centree, sans puce. */
/* Une promesse par ligne, centree. La taille suit la largeur d'ecran pour que la
plus longue (« Ehrliche Angaben zu Warme und Wetterschutz », 42 signes en
capitales espacees) tienne sur UNE ligne : sinon le bandeau faisait 4 lignes
pour 3 promesses. (Constat Vision Humain du 30/08.) */
.tick .in{flex-direction:column;align-items:center;text-align:center;gap:5px;
font-size:clamp(8px,2.55vw,10px);padding:13px 12px;}
.tick span{padding:0;} .tick span+span::before{display:none;}
}
/* ---------- ajouts WordPress / WooCommerce ---------- */
button,input,select,textarea{font-family:inherit;color:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #C31F4A;outline-offset:3px;}
.hdck{padding:20px 40px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;background:#12161C;color:#fff;padding:10px 16px;z-index:99;}
/* Colonnes de l'en-tete : le burger et les icones vivent ici, PAS dans .hnav,
qui disparait en mobile. Sinon le client perd le menu et le panier. */
.hcol{display:flex;align-items:center;gap:26px;}
.hcol.r{justify-content:flex-end;}
.burger{background:none;border:0;padding:0;color:inherit;cursor:pointer;line-height:0;}
.hnav a{cursor:pointer;}
.hnav a:hover{color:#C31F4A;}
.icons a{display:inline-flex;position:relative;}
.cartcount{position:absolute;top:-6px;right:-8px;background:#C31F4A;color:#fff;font-size:10px;
min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;
padding:0 4px;font-weight:600;}
.mnav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;background:#141C26;color:#fff;
padding:22px 24px 40px;overflow-y:auto;}
.mnav.open{display:block;}
.mnav .mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.mnav .mbrand{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:22px;text-transform:uppercase;letter-spacing:-0.005em;color:#fff;}
.mnav .mclose{background:none;border:0;color:#fff;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
padding:12px 0 12px 12px;cursor:pointer;font-weight:600;}
.mnav .mlbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);
margin:22px 0 4px;font-weight:600;}
.mnav a{display:block;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:19px;font-weight:500;color:#fff;}
.mnav a.sec{font-size:15px;padding:12px 0;color:rgba(255,255,255,.85);}
.mnav .macc{color:#C31F4A;}
body.mnav-open{overflow:hidden;}
.woocommerce-message,.woocommerce-error,.woocommerce-info{background:#E9EDF1;border-left:3px solid #C31F4A;
padding:15px 18px;margin:0 0 22px;font-size:14.5px;list-style:none;}
.woocommerce-error li{list-style:none;}
.woocommerce-message .button,.woocommerce-info .button{float:right;color:#C31F4A;font-weight:600;
font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.emptyg{border:1px dashed #DCE2E8;padding:56px 24px;text-align:center;color:#6E7883;font-size:14.5px;}
.pagi{display:flex;gap:8px;justify-content:center;margin-top:44px;list-style:none;}
.pagi a,.pagi span{border:1px solid #DCE2E8;padding:11px 16px;font-size:14px;}
.pagi .current{background:#12161C;color:#fff;border-color:#12161C;}
.qtyfld{width:78px;border:1px solid #DCE2E8;border-radius:8px;background:#fff;text-align:center;
padding:17px 6px;font-size:15px;font-family:'Archivo';}
.chip{cursor:pointer;background:#fff;}
/* Pastille de couleur dans le bouton de variante. La teinte vient du terme
(relevee sur la photo fournisseur) : une option sans teinte reste un bouton
texte, on ne colorie pas au hasard. Le contour clair garde les teintes tres
sombres ou tres claires visibles sur les deux fonds. */
.chip.col{display:inline-flex;align-items:center;gap:9px;}
.chip .pt{width:15px;height:15px;border-radius:50%;flex:0 0 15px;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);}
.chip.on .pt{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);}
/* Le prix de la variante est reporte dans le bloc de la maquette (.prow .p) par
front.js. Le bloc natif de WooCommerce afficherait donc le meme prix une seconde
fois, juste sous les pastilles. On le masque, sans toucher au reste du wrapper
(dont depend l'ajout au panier). (Constat Vision Humain du 30/08/2026.) */
.woocommerce-variation-price,.woocommerce-variation-availability{display:none;}
.chip.dis{opacity:.32;cursor:not-allowed;text-decoration:line-through;}
.varsel{display:none;}
button.cta2,button.addcart{border:0;cursor:pointer;font-family:'Archivo';}
button.cta2[disabled],button.addcart[disabled]{opacity:.45;cursor:not-allowed;}
/* Le prix d'un produit variable est une fourchette : il ne doit pas se couper
en deux lignes sur mobile, ni ecraser la mention fiscale a cote. */
.prow{flex-wrap:wrap;}
.prow .p{white-space:nowrap;}
.prow .vat{flex:1 1 100%;}
@media(min-width:821px){.prow .vat{flex:0 1 auto;}}
.crumb{line-height:1.5;}
/* Livraison a la Kasse : rendu WooCommerce, habille comme la maquette. */
.shipwrap ul{list-style:none;margin:0;padding:0;}
.shipwrap li{border:1px solid #DCE2E8;border-radius:8px;padding:16px;margin-bottom:10px;
background:#fff;font-size:14.5px;display:flex;align-items:center;gap:11px;}
.shipwrap li label{display:inline;font-size:14.5px;letter-spacing:0;text-transform:none;
color:#12161C;margin:0;font-weight:400;}
.shipwrap input[type=radio]{accent-color:#C31F4A;width:17px;height:17px;}
.shipwrap .woocommerce-shipping-destination,.shipwrap p{font-size:12.5px;color:#6E7883;margin-top:6px;}
.woocommerce-shipping-fields,.woocommerce-additional-fields{margin-top:8px;}
.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:9px;margin:14px 0 6px;
font-size:13.5px;letter-spacing:0;text-transform:none;color:#12161C;font-weight:400;}
.woocommerce-form__label-for-checkbox input{width:20px;height:20px;accent-color:#C31F4A;}
.art ul,.art ol{margin:0 0 18px 20px;}
.art li{margin-bottom:8px;}
.art table{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:20px;}
.art th{text-align:left;padding:12px 15px;background:#141C26;color:#fff;font-size:10.5px;
letter-spacing:.18em;text-transform:uppercase;}
.art td{padding:12px 15px;border-bottom:1px solid #DCE2E8;}
.ctable{width:100%;border-collapse:collapse;font-size:14.5px;}
.ctable th{text-align:left;padding:13px 10px;border-bottom:1px solid #DCE2E8;font-size:10.5px;
letter-spacing:.18em;text-transform:uppercase;color:#6E7883;font-family:'Archivo';font-weight:600;}
.ctable td{padding:18px 10px;border-bottom:1px solid #DCE2E8;vertical-align:middle;}
.ctable .thumb img{width:76px;height:76px;object-fit:cover;background:#E9EDF1;}
.ctable .nm{font-size:15px;font-weight:600;}
.ctable .ex{font-size:12.5px;color:#6E7883;margin-top:4px;}
.ctable .rm{color:#6E7883;font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:inline-block;padding:10px 0;}
.carttot{border:1px solid #DCE2E8;background:#fff;padding:26px;}
.carttot .l2{display:flex;justify-content:space-between;font-size:14.5px;padding:9px 0;}
.carttot .tt{display:flex;justify-content:space-between;align-items:center;
border-top:1px solid #DCE2E8;margin-top:12px;padding-top:16px;}
.carttot .tt .t{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:27px;color:#12161C;}
.cartgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start;}
#kq-checkout .fld,.woocommerce-checkout input[type=text],.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],.woocommerce-checkout select,.woocommerce-checkout textarea{
width:100%;border:1px solid #DCE2E8;border-radius:8px;padding:15px;background:#fff;
font-size:14.5px;font-family:'Archivo';margin-bottom:12px;color:#12161C;}
.woocommerce-checkout label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:#6E7883;margin-bottom:5px;font-weight:600;}
.woocommerce-checkout .form-row{margin-bottom:4px;}
#place_order,.checkout-button{display:block;width:100%;text-align:center;background:#C31F4A;color:#fff;
border:0;border-radius:999px;padding:23px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
font-weight:600;margin-top:24px;cursor:pointer;font-family:'Archivo';}
.wc_payment_methods{list-style:none;}
.wc_payment_method label{display:inline;font-size:14.5px;letter-spacing:0;text-transform:none;color:#12161C;}
.wc_payment_method{border:1px solid #DCE2E8;border-radius:8px;padding:17px;margin-bottom:12px;background:#fff;}
@media(max-width:820px){
/* Carte produit : un produit variable affiche une FOURCHETTE (« 79,90 € - 159,90 € »),
qui ne tient pas sur une demi-largeur mobile. En ligne, elle passait sur deux lignes
et poussait « Ansehen » a une hauteur differente de la carte voisine : deux cartes
cote a cote n'etaient plus alignees. On empile prix puis lien : « Ansehen » etant
le dernier element d'une .pr collee en bas, il s'aligne d'une carte a l'autre.
(Constat Vision Humain du 30/08/2026.) */
.pc .pr{flex-direction:column;align-items:flex-start;gap:7px;}
.pc .pr b{font-size:18px;line-height:1.3;}
.pc .pr .woocommerce-Price-amount{white-space:nowrap;}
.cartgrid{grid-template-columns:1fr;gap:26px;}
.ctable .thumb img{width:58px;height:58px;}
/* En mobile on masque le prix unitaire, la Summe suffit. Attention : l'en-tete
« Artikel » porte colspan=2, donc les nth-child de et de ne
designent PAS la meme colonne. En masquant th:nth-child(3) on masquait « Menge »
et « Preis » se retrouvait au-dessus du champ QUANTITE. (Vision Humain 30/08.) */
.ctable td:nth-child(3){display:none;}
.ctable th:nth-child(2){display:none;}
/* La case « livrer a une autre adresse » collait au libelle suivant : les deux
etant en petites capitales, elles se lisaient comme un seul bloc. */
.woocommerce-form__label-for-checkbox{margin:20px 0 18px;}
/* Mobile : le burger a gauche, la marque au centre, les icones a droite.
.hnav (les liens texte) reste masque, comme dans la maquette. */
.hcol{gap:0;}
.icons{display:flex;gap:15px;}
.icons a{color:#12161C;}
}
/* ---------- panier en tiroir (mu-plugin kraken-q4de-panier-tiroir) ----------
Les jetons de marque s'appliquent : vert/creme chez Tannova, nuit/rouge chez
Alvenna. Aucune reassurance dans ce tiroir, c'est la regle. */
.kqd-ov{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;
transition:opacity .25s ease;z-index:9998;}
.kqd-ov.on{opacity:1;}
.kqd{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#FAFAFB;
color:#12161C;z-index:9999;display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .26s ease;box-shadow:-14px 0 40px rgba(0,0,0,.16);}
.kqd.on{transform:none;}
.kqd-head{display:flex;align-items:center;justify-content:space-between;
padding:20px 22px;border-bottom:1px solid #DCE2E8;}
.kqd-title{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:20px;}
.kqd-title em{font-style:normal;color:#6E7883;}
.kqd-close{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;
color:#12161C;min-width:44px;min-height:44px;}
.kqd-body{flex:1;overflow-y:auto;padding:18px 22px;}
.kqd-line{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:14px 0;
border-bottom:1px solid #DCE2E8;}
.kqd-img img{width:72px;height:90px;object-fit:cover;}
.kqd-info a{font-size:14.5px;line-height:1.35;font-weight:600;color:#12161C;text-decoration:none;}
.kqd-var{font-size:12.5px;color:#6E7883;margin-top:3px;}
.kqd-var p{margin:0;}
.kqd-qte{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13.5px;}
.kqd-prix{font-weight:600;}
.kqd-del{margin-left:auto;color:#6E7883;font-size:12px;text-decoration:underline;}
.kqd-vide{color:#6E7883;margin:26px 0 18px;}
.kqd-sugg{margin-top:22px;}
.kqd-sugg-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:#6E7883;margin-bottom:12px;}
.kqd-sugg-i{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
padding:9px 0;color:#12161C;text-decoration:none;}
.kqd-sugg-i img{width:52px;height:65px;object-fit:cover;}
.kqd-sugg-n{font-size:13px;line-height:1.3;}
.kqd-sugg-p{font-size:13px;font-weight:600;white-space:nowrap;}
.kqd-foot{border-top:1px solid #DCE2E8;padding:18px 22px;background:#E9EDF1;}
.kqd-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.kqd-tot b{font-family:'Archivo',serif;font-variation-settings:'wdth' 79,'wght' 800;font-size:21px;}
.kqd-cta{display:block;text-align:center;background:#C31F4A;color:#fff;
padding:15px 18px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
font-weight:600;text-decoration:none;}
.kqd-lien{display:block;text-align:center;margin-top:11px;font-size:13px;
color:#6E7883;text-decoration:underline;}
@media (max-width:520px){ .kqd{width:100%;} }
/* ---------- pied de page : identité légale (modèle Luventa) ----------
Le pied de page doit nommer le vendeur, son adresse et son immatriculation
sur toutes les pages : c'est ce que Merchant Center contrôle. La bande du bas
porte donc une phrase longue — elle passe à la ligne au lieu de se comprimer. */
footer .ftg{color:rgba(255,255,255,.6);margin-top:14px;max-width:30ch;}
/* Colonne Kontakt : c'est le bloc que Merchant Center lit pour savoir qui vend.
Le nom du vendeur était rendu plus pâle que son adresse — la hiérarchie était
à l'envers. On la remet à l'endroit et on garde tout au-dessus du seuil lisible. */
footer .fkontakt p{margin:0 0 9px;line-height:1.55;color:rgba(255,255,255,.75);}
footer .fkontakt .nmv{color:#fff;}
footer .fkontakt a{color:rgba(255,255,255,.88);}
footer .fkontakt a:hover{color:#fff;}
/* Pas de bordure ici : footer .cols porte déjà un border-bottom, les deux
traits se suivaient à quelques pixels. */
footer .fpay{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
margin-top:26px;padding-top:0;}
footer .fpay .lb{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
color:rgba(255,255,255,.55);}
footer .fpay a{text-decoration:underline;font-size:12px;}
footer .fpay .pay span:first-child{margin-left:0;}
footer .bot{flex-wrap:wrap;gap:10px 26px;align-items:baseline;
border-top:1px solid rgba(255,255,255,.14);margin-top:22px;}
footer .bot .lks{white-space:normal;}
footer .bot a{text-decoration:underline;}
/* ---------- pages légales : tenir dans l'écran ----------
Constat Vision Humain du 31/08 : 7 des 16 pages légales débordaient à droite en
mobile, texte coupé. Un enfant de grille vaut par défaut min-width:auto, donc la
colonne s'élargit jusqu'au plus large contenu insécable qu'elle porte — un
tableau, un mot allemand long, une ligne de soulignés. La grille faisait 350 px
et la colonne 497. min-width:0 rend la colonne réductible ; le reste casse ou
défile à l'intérieur, sans jamais pousser la page. */
.artgrid > .art{min-width:0;}
.art{overflow-wrap:break-word;}
.art table{display:block;width:100%;overflow-x:auto;}
/* Comprimé sur 350 px, un tableau de trois colonnes casse chaque cellule en un mot
par ligne. On lui laisse sa largeur de lecture et on le fait défiler dans sa
boîte : la page, elle, ne bouge pas. */
@media(max-width:820px){ .art table{min-width:470px;font-size:13px;} }
/* Formulaire de rétractation : encadré neutre, à recopier. Il empruntait la classe
.pull, réservée aux accroches — sur Alvenna cela le rendait entièrement en
capitales grasses, illisible pour un texte que la cliente doit remplir. */
.art .formbox{border:1px solid #DCE2E8;background:#FAFAFB;padding:26px 24px;margin:28px 0;
font-family:'Archivo',sans-serif;text-transform:none;font-weight:400;
font-size:14.5px;line-height:1.7;color:#12161C;}
.art .formbox p{margin:0 0 14px;}
.art .formbox p:last-child{margin-bottom:0;}
/* Zone à remplir : un trait, pas une suite de caractères « _ » — celle-ci
formait un mot insécable de 497 px. */
.art .fill{display:inline-block;min-width:120px;max-width:100%;
border-bottom:1px solid #6E7883;vertical-align:baseline;}
/* Kasse : le vendeur se nomme, sans ajouter un seul lien cliquable. */
.fck .ident{margin-top:14px;padding-top:14px;border-top:1px solid #DCE2E8;
font-size:11.5px;color:#6E7883;line-height:1.6;}
@media (max-width:900px){
footer .bot{flex-direction:column;align-items:flex-start;}
footer .fpay{margin-top:32px;}
}