@charset "utf-8";
/* Ravir v2. Thème clair unique, assumé.
   Mise en page : colonnes alignées à gauche sur une grille de 1240 px, beaucoup d'air,
   visuels produits réels ; le moment fort est la 3D de l'accueil, le reste reste calme. */
/* Polices hébergées sur le site (SIL Open Font License) : Albert Sans (variable 400 à 700) et Gloock */
@font-face{font-family:"Albert Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../assets/fonts/albert-sans-latin.woff2?v=c2fb6fda41") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Gloock"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/gloock-latin.woff2?v=9389ada8d3") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  color-scheme: light;
  --fond:#FBF7F4; --surface:#FFFFFF; --sauge:#E9EEE4; --sauge-fonce:#DCE4D5; --pin:#183D30; --encre:#1C2A23; --gris:#5D6A63;
  --salin:#EC9A8A; --mimosa:#F2C230; --etang:#2F6E6A; --bois:#D8B78C; --trait:#E5DFD4;
  --pin-fonce:#0F2C22; --salin-fonce:#A9503F; --erreur:#A23B32;
  --f-titre:"Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-texte:"Albert Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --maxw:1240px; --gutter:clamp(16px, 4vw, 48px); --hh:72px;
}
@media (max-width: 899px){ :root{ --hh:62px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hh) + 16px)}
body{margin:0; background:var(--fond); color:var(--encre); font:400 1.0625rem/1.6 var(--f-texte); -webkit-font-smoothing:antialiased; overflow-x:clip}
img,svg{display:block; max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
:where(ul[role=list], ol[role=list]){list-style:none; padding:0}
a{color:var(--etang); text-decoration-thickness:1px; text-underline-offset:.2em}
a:hover{color:var(--pin)}
:focus-visible{outline:2px solid var(--etang); outline-offset:3px; border-radius:4px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
[hidden]{display:none!important}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.selectable{-webkit-user-select:all; user-select:all}

/* Typographie */
.titre-heros{font:400 clamp(3.1rem, 1.8rem + 5.4vw, 7rem)/.95 var(--f-titre); letter-spacing:-.015em; color:var(--pin); text-wrap:balance}
.titre-page{font:400 clamp(2.6rem, 1.8rem + 3.2vw, 4.6rem)/1 var(--f-titre); letter-spacing:-.01em; color:var(--pin); text-wrap:balance}
.titre-section{font:400 clamp(2rem, 1.5rem + 2vw, 3.2rem)/1.05 var(--f-titre); color:var(--pin); text-wrap:balance}
.titre-bloc{font:600 1.3rem/1.25 var(--f-texte); color:var(--pin); margin-bottom:1rem}
h3{font:600 1.15rem/1.3 var(--f-texte); color:var(--encre)}

/* Grille */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(72px, 9vw, 128px)}
.section--tete{padding-block:clamp(36px, 5vw, 72px) clamp(64px, 8vw, 112px)}
.section--serre{padding-block:clamp(48px, 6vw, 88px)}
.section--rose{background:var(--sauge)}
.tete-section{max-width:42rem; margin-bottom:clamp(36px, 4.5vw, 64px)}
.tete-section p,.tete-page p{margin-top:1rem; color:var(--gris); font-size:1.15rem; max-width:36rem}
.tete-section--ligne{max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem}
.tete-page{max-width:46rem; margin-bottom:clamp(40px, 5vw, 72px)}
.note-prix{margin-top:clamp(28px, 3vw, 40px); color:var(--gris); font-size:.95rem}

/* Boutons et liens */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.4rem; border-radius:999px; border:1.5px solid var(--pin); font:600 1rem/1.15 var(--f-texte); text-decoration:none; text-align:center; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s}
.btn--plein{background:var(--pin); color:#fff}
.btn--plein:hover{background:var(--pin-fonce); border-color:var(--pin-fonce); color:#fff}
.btn--ligne{background:transparent; color:var(--pin)}
.btn--ligne:hover{background:var(--pin); color:#fff}
.btn--grand{min-height:54px; padding-inline:1.7rem; font-size:1.05rem}
.btn--texte{border-color:transparent; background:none; color:var(--etang); text-decoration:underline; text-underline-offset:.2em; padding-inline:.6rem}
.actions{display:flex; flex-wrap:wrap; gap:.75rem}
.lien-fort{font-weight:600; color:var(--pin); text-decoration:underline; text-decoration-color:var(--mimosa); text-decoration-thickness:2px; text-underline-offset:.3em}
.lien-fort:hover{text-decoration-color:var(--pin)}

/* En-tête */
.evitement{position:absolute; left:12px; top:-80px; z-index:100; background:var(--pin); color:#fff; padding:.6rem 1rem; border-radius:8px}
.evitement:focus{top:12px; color:#fff}
.entete{position:sticky; top:env(safe-area-inset-top, 0px); z-index:60; background:rgba(251,247,244,.94); border-bottom:1px solid transparent; transition:border-color .2s}
@supports (backdrop-filter: blur(4px)){ @media (min-width: 900px){ .entete{background:rgba(251,247,244,.86); backdrop-filter:blur(10px)} } }
.entete.est-defile{border-bottom-color:var(--trait)}
.entete-in{height:var(--hh); display:flex; align-items:center; gap:2rem}
.marque{display:block; color:var(--pin); flex:none; text-decoration:none}
.marque .logo{height:40px; width:auto}
.nav{margin-left:auto; display:flex; align-items:center; gap:clamp(1.2rem, 2.4vw, 2.2rem)}
.nav a:not(.btn){color:var(--encre); text-decoration:none; font-weight:500; padding-block:.35rem; border-bottom:2px solid transparent}
.nav a:not(.btn):hover{color:var(--pin); border-bottom-color:var(--trait)}
.nav a[aria-current=page]:not(.btn),.nav a.est-section:not(.btn){color:var(--pin); border-bottom-color:var(--mimosa)}
.nav-plus{display:none}
@media (min-width: 900px) and (max-width: 1099px){ .nav .nav-tel span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap} }
.nav-devis{margin-left:.4rem}
.nav-tel,.tel-mobile{display:inline-flex; align-items:center; gap:.45rem; color:var(--pin); font-weight:600; text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums}
.nav .nav-tel{border-bottom:0; padding-block:.35rem}
.nav-tel:hover,.tel-mobile:hover{color:var(--encre)}
.tel-icone{width:18px; height:18px; flex:none}
.tel-mobile{display:none}
.menu-btn{display:none}
@media (max-width: 899px){
  .entete{background:var(--fond)}
  .marque .logo{height:34px}
  .entete .marque{padding-block:6px; margin-block:-6px}
  .menu-btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; margin-left:auto; min-height:44px; min-width:44px; background:none; border:0; padding:.5rem .1rem; font:600 1rem var(--f-texte); color:var(--pin); cursor:pointer}
  .menu-icone{position:relative; width:22px; height:12px}
  .menu-icone i{position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px; transition:transform .25s}
  .menu-icone i:first-child{top:0}
  .menu-icone i:last-child{bottom:0}
  .menu-ouvert .menu-icone i:first-child{transform:translateY(5px) rotate(45deg)}
  .menu-ouvert .menu-icone i:last-child{transform:translateY(-5px) rotate(-45deg)}
  .nav{position:fixed; left:0; right:0; top:calc(var(--hh) + env(safe-area-inset-top, 0px)); bottom:0; margin:0; background:var(--fond); flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y:auto; visibility:hidden; opacity:0; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility 0s .2s}
  .menu-ouvert .nav{visibility:visible; opacity:1; transform:none; transition:opacity .2s, transform .2s}
  .nav a:not(.btn){font:400 2rem/1.2 var(--f-titre); color:var(--pin); padding:.85rem 0; border-bottom:1px solid var(--trait)}
  .nav a[aria-current=page]:not(.btn),.nav a.est-section:not(.btn){border-bottom-color:var(--trait); text-decoration:underline; text-decoration-color:var(--mimosa); text-decoration-thickness:2px; text-underline-offset:8px}
  .nav-plus{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 1.2rem; margin-top:1rem}
  .nav .nav-plus a:not(.btn){font:500 1.02rem/1.3 var(--f-texte); color:var(--encre); padding:.85rem 0; text-underline-offset:5px}
  .nav-devis{margin:1.6rem 0 0}
  .nav .nav-tel{display:none}
  .tel-mobile{display:inline-flex; margin-left:auto; min-height:44px; font-size:.95rem}
  .tel-mobile + .menu-btn{margin-left:1.1rem}
  .entete-in{gap:1rem}
  html.menu-ouvert, html.menu-ouvert body{overflow:hidden}
}
@media (max-width: 379px){
  .menu-txt{display:none}
  .tel-mobile{font-size:.86rem; gap:.3rem}
  .tel-mobile + .menu-btn{margin-left:.8rem}
  .marque .logo{height:30px}
}

/* Accueil : scène 3D */
.scene3d{position:relative; overflow:hidden; background:linear-gradient(180deg, #FBF7F1 0%, #F1E8DA 100%)}
/* Décor : fond crème uni et lumière douce derrière le coffret (js/coffret3d.js déplace ce halo avec la composition).
   En mise en page fixe (mouvement réduit, sans WebGL), la lumière est sous le cadre du coffret. */
.decor{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.decor-halo{position:absolute; left:var(--hx, 71.5%); top:var(--hy, 54%); width:min(130vh, 120vw); aspect-ratio:1; transform:translate(-50%, -50%);
  background:radial-gradient(closest-side, rgba(255,252,244,.9), rgba(255,252,244,.45) 50%, rgba(255,252,244,0) 100%)}
@media (max-width: 899px){ .decor-halo{left:var(--hx, 50%); top:var(--hy, 68%); width:150vw} }
html:not(.js-anim) .decor-halo{display:none}
html:not(.js-anim) .scene3d-canvas::before{content:""; position:absolute; inset:-6% -4%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,252,244,.9), rgba(255,252,244,.4) 55%, rgba(255,252,244,0))}
.scene3d-canvas{z-index:1}
.heros,.recit{position:relative; z-index:3}
.scene3d-canvas{position:relative; min-height:420px}
.scene3d-canvas canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .9s ease}
.scene3d-canvas canvas.pret{opacity:1}
.scene3d-repli{display:none}
.no-webgl .scene3d-repli{display:flex; align-items:center; justify-content:center; height:100%; padding:16px 0}
.no-webgl .scene3d-canvas canvas{display:none!important}     /* three.js pose display:block en style en ligne */
.scene3d-repli .compo{max-width:640px}
.heros-intro{margin-top:1.4rem; font-size:clamp(1.12rem, 1rem + .45vw, 1.32rem); line-height:1.5; max-width:31rem}
.heros .actions{margin-top:2rem}
.heros-note{margin-top:1.2rem; color:var(--gris); font-size:.95rem}
.legendes{margin:0}
.recit-phrase{font:400 clamp(1.7rem, 1.15rem + 1.3vw, 2.55rem)/1.16 var(--f-titre); color:var(--pin); text-wrap:pretty}
/* résumé du coffret montré : nom, prix, une ligne, bouton */
.recit-nom{display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .85rem; font:400 clamp(2.3rem, 1.7rem + 1.5vw, 3.2rem)/1.02 var(--f-titre); color:var(--pin)}
.recit-prix{font:600 clamp(1.08rem, .98rem + .3vw, 1.28rem)/1 var(--f-texte); color:var(--etang); white-space:nowrap}
.recit-detail{margin-top:.95rem; color:var(--gris); font-size:1.02rem; line-height:1.55}
.recit-btn{margin-top:1.6rem}
/* étiquettes des produits de l'animation : js/coffret3d.js les pose à côté de chaque produit (côté data-cote), un trait
   fin et un point mimosa les relient au produit ; --ax, --ay : position du point dans l'étiquette */
.etiquettes{display:none}
html.js-anim .etiquettes{display:block; position:absolute; inset:0; z-index:2; margin:0; padding:0; list-style:none; pointer-events:none; overflow:hidden; --trait:16px}
html.js-anim .etiquette{position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:.08rem; padding:.45rem .8rem .5rem;
  border-radius:12px; background:rgba(255,253,249,.92); box-shadow:0 10px 24px -12px rgba(70,45,20,.38), 0 0 0 1px rgba(24,61,48,.07);
  white-space:nowrap; opacity:0; visibility:hidden; will-change:transform, opacity}
.etiquette strong{font:600 .92rem/1.2 var(--f-texte); color:var(--pin)}
.etiquette span{font:400 .78rem/1.25 var(--f-texte); color:var(--gris)}
html.js-anim .etiquette::before{content:""; position:absolute; background:rgba(24,61,48,.32)}
html.js-anim .etiquette::after{content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--mimosa); box-shadow:0 0 0 2px rgba(255,253,249,.95)}
html.js-anim .etiquette[data-cote=haut]::before{left:var(--ax, 50%); top:100%; width:1px; height:var(--trait)}
html.js-anim .etiquette[data-cote=haut]::after{left:calc(var(--ax, 50%) - 4px); top:calc(100% + var(--trait) - 4px)}
html.js-anim .etiquette[data-cote=bas]::before{left:var(--ax, 50%); bottom:100%; width:1px; height:var(--trait)}
html.js-anim .etiquette[data-cote=bas]::after{left:calc(var(--ax, 50%) - 4px); bottom:calc(100% + var(--trait) - 4px)}
html.js-anim .etiquette[data-cote=droite]::before{top:var(--ay, 50%); right:100%; height:1px; width:var(--trait)}
html.js-anim .etiquette[data-cote=droite]::after{top:calc(var(--ay, 50%) - 4px); right:calc(100% + var(--trait) - 4px)}
html.js-anim .etiquette[data-cote=gauche]::before{top:var(--ay, 50%); left:100%; height:1px; width:var(--trait)}
html.js-anim .etiquette[data-cote=gauche]::after{top:calc(var(--ay, 50%) - 4px); left:calc(100% + var(--trait) - 4px)}
.recit-titre{display:flex; align-items:center; gap:.75rem; font:600 .92rem/1.3 var(--f-texte); letter-spacing:.14em; text-transform:uppercase; color:var(--etang)}
.recit-titre::before{content:""; flex:none; width:30px; height:2px; border-radius:2px; background:var(--mimosa)}

html.js-anim .scene3d{height:calc(100svh - var(--hh)); min-height:560px}
html.js-anim .scene3d-canvas{position:absolute; inset:0; min-height:0}
html.js-anim .heros{position:absolute; inset:0; display:flex; align-items:center; pointer-events:none}
html.js-anim .heros > .wrap{width:100%}
html.js-anim .heros-texte{max-width:min(36rem, 44%); pointer-events:auto}
html.js-anim .recit{position:absolute; inset:0; pointer-events:none}
html.js-anim .recit-col{height:100%; display:flex; flex-direction:column; justify-content:center; gap:clamp(28px, 6vh, 64px)}
html.js-anim .recit-col > *{max-width:min(27rem, 36%)}
html.js-anim .recit-titre,html.js-anim .legendes{opacity:0; visibility:hidden}
html.js-anim .recit-phrase{display:none}
html.js-anim .legendes a{pointer-events:auto}
@media (max-width: 899px){
  html.js-anim .heros{align-items:flex-start; padding-top:clamp(18px, 3.4svh, 40px)}
  html.js-anim .heros-texte{max-width:none}
  html.js-anim .titre-heros{font-size:clamp(2.7rem, 12.4vw, 4.2rem)}
  html.js-anim .heros-intro{margin-top:.8rem; font-size:1.02rem}
  html.js-anim .heros .actions{margin-top:1.1rem; gap:.5rem}
  html.js-anim .heros .btn{min-height:44px; padding:.55rem 1.05rem; font-size:.95rem}
  html.js-anim .heros-note{margin-top:.75rem; font-size:.88rem}
  html.js-anim .recit-col{justify-content:flex-start; padding-top:clamp(18px, 3.4svh, 36px)}
  html.js-anim .recit-col > *{max-width:none}
  html.js-anim .recit-titre{font-size:.8rem}
  /* mobile : le résumé devient une barre basse, le nom et le prix à gauche, le bouton à droite */
  html.js-anim .legendes{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:12px var(--gutter) max(14px, env(safe-area-inset-bottom)); background:rgba(251,247,244,.94); border-top:1px solid rgba(24,61,48,.08)}
  html.js-anim .recit-nom{flex-direction:column; align-items:flex-start; gap:.3rem; font-size:clamp(1.35rem, 5.6vw, 1.7rem)}
  html.js-anim .recit-prix{font-size:.95rem}
  html.js-anim .recit-detail{display:none}
  html.js-anim .recit-btn{flex:none; margin-top:0; min-height:44px; padding:.55rem 1.05rem; font-size:.95rem}
  html.js-anim .etiquettes{--trait:11px}
  html.js-anim .etiquette{padding:.36rem .62rem .4rem; border-radius:10px}
  .etiquette strong{font-size:.8rem}
  .etiquette span{font-size:.69rem}
}
html:not(.js-anim) .scene3d{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); padding-block:clamp(32px, 5vw, 72px)}
html:not(.js-anim) .scene3d .wrap{padding-inline:0; max-width:none}
html:not(.js-anim) .heros{grid-column:1; grid-row:1}
html:not(.js-anim) .scene3d-canvas{grid-column:2; grid-row:1; height:clamp(380px, 44vw, 620px)}
html:not(.js-anim) .recit{grid-column:1 / -1; grid-row:2; padding-top:clamp(40px, 5vw, 72px)}
html:not(.js-anim) .legendes{margin-top:1rem; max-width:46rem}
@media (max-width: 899px){
  html:not(.js-anim) .scene3d{grid-template-columns:minmax(0,1fr)}
  html:not(.js-anim) .scene3d-canvas{grid-column:1; grid-row:2; height:clamp(320px, 92vw, 520px); margin-top:24px}
  html:not(.js-anim) .recit{grid-row:3}
}

/* Compositions à plat : 1 cm = 100cqw / 46 */
.compo{position:relative; width:100%; aspect-ratio:46 / 34.5; container-type:inline-size; isolation:isolate}
.compo > *{position:absolute}
.compo-ombre{border-radius:.8cqw; box-shadow:1.4cqw 2.6cqw 3.4cqw -.8cqw rgba(84,58,30,.34), .3cqw .6cqw 1cqw rgba(84,58,30,.16)}
.caisse{border-radius:.35cqw; overflow:hidden}
.caisse--cagette{--tex-h:url(../assets/textures/peuplier.webp?v=0c9a17715f); --tex-v:url(../assets/textures/peuplier-v.webp?v=9d8860156c); --bois-fond:#EBDDC2}
.caisse--pin,.compo-couvercle{--tex-h:url(../assets/textures/pin.webp?v=24ce6c8b45); --tex-v:url(../assets/textures/pin-v.webp?v=e63d035ceb); --bois-fond:#E3C69A}
.caisse-int{position:absolute; left:var(--rb); right:var(--rb); top:var(--rb); bottom:var(--rb); overflow:hidden; background:#F5EAC4 url(../assets/textures/soie.webp?v=b1f9f90430) center / 100cqw auto;
  box-shadow:inset 1.6cqw 2cqw 2.4cqw -1.2cqw rgba(92,64,28,.42), inset -.6cqw -.8cqw 1.4cqw -1cqw rgba(92,64,28,.22)}
.paroi{position:absolute; background-color:var(--bois-fond)}
.paroi--n{left:0; right:0; top:0; height:var(--pv); clip-path:polygon(0 0, 100% 0, calc(100% - var(--pv)) 100%, var(--pv) 100%);
  background-image:linear-gradient(180deg, rgba(74,48,22,.18), rgba(74,48,22,.42)), var(--tex-h); background-size:auto, 160cqw auto}
.paroi--s{left:0; right:0; bottom:0; height:var(--pv); clip-path:polygon(var(--pv) 0, calc(100% - var(--pv)) 0, 100% 100%, 0 100%);
  background-image:linear-gradient(0deg, rgba(255,250,238,.16), rgba(74,48,22,.16)), var(--tex-h); background-size:auto, 160cqw auto; background-position:0 0, 30% 0}
.paroi--o{top:0; bottom:0; left:0; width:var(--pv); clip-path:polygon(0 0, 100% var(--pv), 100% calc(100% - var(--pv)), 0 100%);
  background-image:linear-gradient(90deg, rgba(74,48,22,.2), rgba(74,48,22,.38)), var(--tex-v); background-size:auto, auto 160cqw}
.paroi--e{top:0; bottom:0; right:0; width:var(--pv); clip-path:polygon(0 var(--pv), 100% 0, 100% 100%, 0 calc(100% - var(--pv)));
  background-image:linear-gradient(270deg, rgba(255,250,238,.12), rgba(74,48,22,.14)), var(--tex-v); background-size:auto, auto 160cqw; background-position:0 0, 0 40%}
.caisse--cagette .paroi--n,.caisse--cagette .paroi--s{background-image:linear-gradient(180deg, transparent 47%, rgba(60,38,16,.5) 47% 55%, transparent 55%), linear-gradient(180deg, rgba(74,48,22,.16), rgba(74,48,22,.36)), var(--tex-h); background-size:auto, auto, 160cqw auto}
.caisse--cagette .paroi--o,.caisse--cagette .paroi--e{background-image:linear-gradient(90deg, transparent 47%, rgba(60,38,16,.5) 47% 55%, transparent 55%), linear-gradient(90deg, rgba(74,48,22,.18), rgba(74,48,22,.32)), var(--tex-v); background-size:auto, auto, auto 160cqw}
td a,th a{display:inline-block; padding-block:.6rem; margin-block:-.6rem}
.planche{position:absolute; background-color:var(--bois-fond); background-image:var(--tex-h); background-size:160cqw auto; box-shadow:inset 0 .14cqw 0 rgba(255,255,255,.38), inset 0 -.14cqw 0 rgba(90,60,30,.28)}
.planche--n{left:0; right:0; top:0; height:var(--rb); background-position:12% 20%}
.planche--s{left:0; right:0; bottom:0; height:var(--rb); background-position:58% 70%}
.planche--o,.planche--e{top:var(--rb); bottom:var(--rb); width:var(--rb); background-image:var(--tex-v); background-size:auto 160cqw; box-shadow:inset .14cqw 0 0 rgba(255,255,255,.34), inset -.14cqw 0 0 rgba(90,60,30,.26), inset 0 .12cqw 0 rgba(90,60,30,.3), inset 0 -.12cqw 0 rgba(90,60,30,.3)}
.planche--o{left:0; background-position:30% 40%}
.planche--e{right:0; background-position:70% 10%}
.caisse--pin .planche--n,.caisse--pin .planche--s{box-shadow:inset 0 .14cqw 0 rgba(255,255,255,.38), inset 0 -.14cqw 0 rgba(90,60,30,.28), inset 0 calc(var(--rb) * -.3) 0 -.05cqw rgba(0,0,0,0)}
.caisse--pin .planche--e{filter:brightness(.93)}
.poteau{position:absolute; width:calc(var(--rb) * 1.5); height:calc(var(--rb) * 1.5); background:radial-gradient(circle at 34% 66%, #C9A979 0 7%, transparent 8%), repeating-radial-gradient(circle at 34% 66%, #E6D3AE 0 .32cqw, #D5BC93 .32cqw .46cqw); box-shadow:inset 0 0 0 .1cqw rgba(90,60,30,.28), .25cqw .35cqw .5cqw rgba(70,45,20,.22)}
.poteau--no{left:var(--rb); top:var(--rb)}
.poteau--ne{right:var(--rb); top:var(--rb)}
.poteau--so{left:var(--rb); bottom:var(--rb)}
.poteau--se{right:var(--rb); bottom:var(--rb)}
.compo-couvercle{background-color:var(--bois-fond); background-image:linear-gradient(135deg, rgba(255,255,255,.12), rgba(90,60,30,.1)), var(--tex-h); background-size:auto, 150cqw auto; background-position:0 0, 40% 30%; border-radius:.4cqw;
  box-shadow:1cqw 1.8cqw 2.6cqw -.6cqw rgba(84,58,30,.3), inset 0 0 0 .12cqw rgba(110,75,35,.22)}
.compo-tampon{position:absolute; color:var(--pin); --logo-point:currentColor; filter:url(#encre); opacity:.84; mix-blend-mode:multiply; transform:rotate(-2deg)}
.compo-objets{inset:0; z-index:2; filter:drop-shadow(.22cqw .32cqw .25cqw rgba(74,48,20,.36)) drop-shadow(.8cqw 1.2cqw 1.1cqw rgba(74,48,20,.18))}
.objet{position:absolute; max-width:none; height:auto}
svg.objet{overflow:visible}

/* Grille des coffrets */
.coffrets{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px)}
.coffret-lien{display:block; color:inherit; text-decoration:none}
.coffret-lien .compo{max-width:600px}
.packshot{display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain}
.coffret-lien .packshot{max-width:600px}
.scene3d-repli .packshot{max-width:640px}
.entreprises-visuel .packshot,.bois-visuel .packshot{max-width:620px}
.coffret-texte{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:.25rem 1.5rem; margin-top:clamp(10px, 1.4vw, 18px); max-width:600px}
.coffret-nom{font:400 clamp(1.8rem, 1.4rem + 1vw, 2.4rem)/1.1 var(--f-titre); color:var(--pin)}
.coffret-accroche{grid-column:1; color:var(--gris)}
.coffret-contenant{grid-column:1; margin-top:.2rem; font-size:.86rem; font-weight:600; letter-spacing:.02em; color:var(--etang)}
.coffret-prix{grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--gris); font-size:.92rem; white-space:nowrap; text-align:right}
.coffret-prix strong{display:block; font:600 1.45rem/1.1 var(--f-texte); color:var(--pin); font-variant-numeric:tabular-nums}
.coffret-lien:hover .coffret-nom,.coffret-lien:focus-visible .coffret-nom{text-decoration:underline; text-decoration-color:var(--mimosa); text-decoration-thickness:2px; text-underline-offset:.14em}
.coffrets--petits{grid-template-columns:repeat(3, minmax(0,1fr))}
.coffrets--petits .coffret-nom{font-size:1.6rem}
@media (max-width: 719px){ .coffrets,.coffrets--petits{grid-template-columns:minmax(0,1fr)} }

/* Raisons d'offrir */
/* Vitrines 3D : coffret que l'on tourne au doigt (mobile d'abord) */
.vitrine{display:grid; grid-template-columns:minmax(0, 1fr); gap:1.5rem}
.vitrine > *{min-width:0}
.vitrine-scene{position:relative; width:100%; aspect-ratio:1 / 1; max-height:min(80svh, 680px); border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 95% at 50% 30%, #FFFEFA 0%, #F5F4EC 55%, var(--sauge) 100%)}
.section--rose .vitrine-scene{background:radial-gradient(120% 95% at 50% 30%, #FFFFFF 0%, #F7F8F2 60%, #EEF2EA 100%)}
.vitrine-canvas{position:absolute; inset:0}
.vitrine-canvas canvas{display:block; width:100%; height:100%; touch-action:pan-y; cursor:grab; opacity:0; transition:opacity .6s}
.vitrine-canvas canvas:active{cursor:grabbing}
.vitrine.pret .vitrine-canvas canvas{opacity:1}
.vitrine-repli{position:absolute; inset:6% 6% 12%; display:flex; align-items:center; justify-content:center; transition:opacity .5s, visibility .5s}
.vitrine-repli .compo,.vitrine-repli .packshot{width:100%}
.vitrine.pret .vitrine-repli{opacity:0; visibility:hidden}
.vitrine-commandes{position:absolute; left:0; right:0; bottom:12px; display:flex; align-items:center; justify-content:center; gap:10px; pointer-events:none}
.vitrine-commandes > *{pointer-events:auto}
.vitrine:not(.pret) .vitrine-commandes{display:none}
.vitrine-tour{width:44px; height:44px; border-radius:50%; border:1px solid var(--trait); background:rgba(255,255,255,.88); color:var(--pin); display:grid; place-items:center; cursor:pointer}
.vitrine-tour:hover{border-color:var(--pin)}
.vitrine-aide{font-size:.85rem; font-weight:500; color:var(--gris); background:rgba(255,255,255,.88); padding:.35rem .8rem; border-radius:99px; transition:opacity .4s}
.vitrine-touche .vitrine-aide{opacity:0}
.vitrine-onglets{display:flex; gap:.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin-inline:calc(-1 * var(--gutter)); padding:0 var(--gutter) .2rem}
.vitrine-onglets::-webkit-scrollbar{display:none}
.vitrine-onglets button{flex:none; scroll-snap-align:start; min-height:44px; padding:.55rem 1.1rem; border-radius:99px; border:1px solid var(--trait);
  background:var(--surface); font:600 .95rem/1 var(--f-texte); color:var(--pin); cursor:pointer}
.vitrine-onglets button[aria-pressed=true]{background:var(--pin); border-color:var(--pin); color:#fff}
.vitrine-nom{font:400 clamp(1.9rem, 1.6rem + 1vw, 2.4rem)/1.05 var(--f-titre); color:var(--pin); margin-top:1.2rem}
.vitrine-accroche{color:var(--gris); margin-top:.35rem}
.vitrine-prix{margin-top:.8rem; color:var(--gris)}
.vitrine-prix strong{font-size:1.35rem; color:var(--encre); font-variant-numeric:tabular-nums}
.vitrine-liste{margin-top:1rem; display:grid; gap:.45rem}
.vitrine-liste li{padding-left:1.1rem; position:relative; line-height:1.4}
.vitrine-liste li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--mimosa)}
.vitrine-option{display:flex; align-items:center; gap:.6rem; margin-top:1.1rem; font-weight:500; cursor:pointer; min-height:44px}
.vitrine-option[hidden]{display:none}
.vitrine-option input{width:20px; height:20px; accent-color:var(--pin)}
.vitrine-panneau .btn{margin-top:1.2rem}
.vitrine--seule{gap:.6rem}
.vitrine--seule .vitrine-option{margin-top:0}
@media (min-width: 900px){
  .vitrine{grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); align-items:center; gap:clamp(32px, 4vw, 64px)}
  .vitrine-scene{aspect-ratio:5 / 4}
  .vitrine-onglets{margin:0; padding:0; flex-wrap:wrap; overflow:visible}
  .vitrine-nom{margin-top:1.6rem}
  .vitrine--seule{grid-template-columns:minmax(0, 1fr)}
  .vitrine--seule .vitrine-scene{aspect-ratio:1 / 1}
}
@media (prefers-reduced-motion: reduce){ .vitrine-canvas canvas,.vitrine-repli{transition:none} }

/* Pourquoi choisir Ravir : comparatif */
.pourquoi{border-top:1px solid var(--trait)}
/* Comparatif : la colonne Maison Ravir en vert pin, le vrai coffret qui en sort par le haut ; les deux autres options en retrait */
.duel{position:relative; margin-top:clamp(48px, 6vw, 88px)}
.duel-choix{display:none}
.duel-table{width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed}
.duel-table th,.duel-table td{text-align:left; vertical-align:top; font-weight:400}
.duel-table thead th,.duel-table thead td{vertical-align:bottom}
.duel-table .d-vide{width:21%}
.duel-table .d-ravir{width:33%}
.duel-table .d-enseigne,.duel-table .d-cheque{width:23%}
.d-tete{display:flex; flex-direction:column; gap:.7rem}
.d-nom{font:600 .98rem/1.3 var(--f-texte); color:var(--gris); text-wrap:balance}
.d-vignette{display:grid; place-items:center; width:min(150px, 100%); aspect-ratio:4 / 3; border-radius:14px; background:var(--sauge)}
.d-dessin{width:86%; height:auto}
.duel-table thead .d-enseigne,.duel-table thead .d-cheque{padding:0 1.2rem 1.2rem}
/* la colonne Maison Ravir */
.duel-table .d-ravir{background:var(--pin); color:rgba(251,247,244,.72); padding:1.05rem 1.6rem}
.duel-table thead .d-ravir{border-radius:22px 22px 0 0; padding-top:0; padding-bottom:1.3rem; box-shadow:inset 0 4px 0 var(--mimosa)}
.duel-table thead .d-ravir .d-tete{align-items:center; text-align:center}
.d-coffret{width:112%; max-width:none; height:auto; margin:-28% -6% -8%; filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.duel-table thead .d-ravir .d-nom{font:400 clamp(1.6rem, 1.2rem + 1vw, 2.1rem)/1 var(--f-titre); color:var(--fond)}
.duel-table tbody tr:last-child .d-ravir{border-radius:0 0 22px 22px; padding-bottom:1.6rem}
.duel-table tbody .d-ravir{position:relative; padding-left:3.4rem; border-top:1px solid rgba(251,247,244,.1)}
.duel-table tbody .d-ravir .icone{position:absolute; left:1.3rem; top:1.15rem; width:24px; height:24px; padding:4px; border-radius:50%; background:var(--mimosa); color:var(--pin)}
.duel-table tbody .d-ravir strong{display:block; font:600 1.05rem/1.35 var(--f-texte); color:var(--fond)}
.duel-table tbody .d-ravir span{display:block; margin-top:.2rem; font-size:.93rem; line-height:1.45}
/* critères et autres options */
.duel-table tbody th{padding:1.15rem 1.2rem 1.15rem 0; border-top:1px solid var(--trait)}
.d-critere{display:flex; align-items:center; gap:.7rem; font:600 1rem/1.3 var(--f-texte); color:var(--pin)}
.d-critere .icone{flex:none; width:30px; height:30px; color:var(--etang)}
.duel-table tbody .d-enseigne,.duel-table tbody .d-cheque{padding:1.15rem 1.2rem; border-top:1px solid var(--trait)}
.duel-table tbody .d-enseigne strong,.duel-table tbody .d-cheque strong{display:block; font:500 1rem/1.35 var(--f-texte); color:var(--encre)}
.duel-table tbody .d-enseigne span,.duel-table tbody .d-cheque span{display:block; margin-top:.2rem; font-size:.93rem; line-height:1.45; color:var(--gris)}
.duel-table tbody tr:first-child th,.duel-table tbody tr:first-child .d-enseigne,.duel-table tbody tr:first-child .d-cheque{border-top-color:transparent}
.duel-table tbody tr:first-child .d-ravir{border-top:0}
/* apparition : la colonne monte, les coches suivent */
.anim-ok .duel:not(.vu) .d-ravir{transform:translateY(18px); opacity:.0}
.anim-ok .duel .d-ravir{transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease}
.anim-ok .duel:not(.vu) tbody .d-ravir .icone{transform:scale(0)}
.anim-ok .duel tbody .d-ravir .icone{transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(.45s + var(--i, 0) * .09s)}
.duel-note{display:flex; gap:1rem; align-items:flex-start; margin-top:clamp(28px, 3vw, 40px); max-width:46rem; padding:1.1rem 1.3rem; border-radius:14px; background:var(--sauge)}
.duel-note .icone{flex:none; width:30px; height:30px; color:var(--etang)}
.duel-note p{color:var(--encre)}
@media (max-width: 1023px){
  .duel-table .d-vide{width:20%}
  .duel-table tbody .d-ravir{padding-left:3rem}
  .duel-table tbody .d-ravir .icone{left:1rem}
  .duel-table thead .d-enseigne,.duel-table thead .d-cheque{padding-inline:.9rem}
  .duel-table tbody .d-enseigne,.duel-table tbody .d-cheque{padding-inline:.9rem}
}
/* mobile : Maison Ravir face à une seule option à la fois, choisie avec les deux boutons */
@media (max-width: 719px){
  .duel-choix{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.4rem}
  .duel-choix span{width:100%; font-weight:600; color:var(--pin); font-size:.95rem}
  .duel-choix button{flex:1 1 0; min-height:44px; padding:.5rem .8rem; border-radius:99px; border:1.5px solid var(--pin); background:transparent;
    font:600 .92rem/1.2 var(--f-texte); color:var(--pin); cursor:pointer}
  .duel-choix button[aria-pressed=true]{background:var(--pin); color:var(--fond)}
  .duel[data-face=enseigne] .d-cheque,.duel[data-face=cheque] .d-enseigne{display:none}
  .duel-table,.duel-table thead,.duel-table tbody{display:block}
  .duel-table tr{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .duel-table .d-vide{display:none}
  .duel-table th,.duel-table td{width:auto!important}
  .duel-table thead .d-ravir{border-radius:18px 0 0 18px; padding:0 .9rem 1rem}
  .d-coffret{width:118%; margin:-14% -9% -6%}
  .duel-table thead .d-ravir .d-nom{font-size:1.35rem}
  .duel-table thead .d-enseigne,.duel-table thead .d-cheque{padding:0 0 1rem .9rem; align-self:end}
  .d-vignette{width:100%}
  .d-nom{font-size:.88rem}
  .duel-table tbody th{grid-column:1 / -1; padding:1rem 0 .55rem; border-top:0}
  .duel-table tbody .d-ravir{padding:.85rem .9rem .9rem 2.6rem; border-top:0; border-radius:14px 0 0 14px}
  .duel-table tbody .d-ravir .icone{left:.75rem; top:.95rem; width:22px; height:22px}
  .duel-table tbody tr:last-child .d-ravir{border-radius:14px 0 0 14px; padding-bottom:.9rem}
  .duel-table tbody .d-enseigne,.duel-table tbody .d-cheque{padding:.85rem 0 .9rem .9rem; border-top:0; background:var(--surface); border-radius:0 14px 14px 0}
  .duel-table tbody tr:last-child .d-enseigne,.duel-table tbody tr:last-child .d-cheque{border-radius:0 14px 14px 0}
  .duel-table thead .d-enseigne,.duel-table thead .d-cheque{background:var(--surface); border-radius:0 18px 18px 0; padding:.9rem .9rem 1rem}
  .duel-table tbody .d-enseigne,.duel-table tbody .d-cheque{padding-right:.9rem}
  .duel-table tbody .d-ravir strong,.duel-table tbody .d-enseigne strong,.duel-table tbody .d-cheque strong{font-size:.95rem}
  .duel-table tbody .d-ravir span,.duel-table tbody .d-enseigne span,.duel-table tbody .d-cheque span{font-size:.85rem}
  .d-critere{font-size:.92rem}
  .d-critere .icone{width:24px; height:24px}
  .anim-ok .duel .d-enseigne,.anim-ok .duel .d-cheque{animation:duel-entre .35s ease}
}
@keyframes duel-entre{from{opacity:0; transform:translateX(8px)} to{opacity:1; transform:none}}

.raisons{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(32px, 4vw, 56px); margin-top:clamp(40px, 5vw, 64px)}
.raison .icone{width:42px; height:42px; color:var(--pin); margin-bottom:1.1rem}
.raison h3{font:600 1.2rem/1.3 var(--f-texte); color:var(--pin)}
.raison p{margin-top:.5rem; color:var(--gris)}
.raison a{display:inline-block; margin-top:.4rem}
@media (max-width: 1023px){ .raisons{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 559px){ .raisons{grid-template-columns:minmax(0,1fr)} }

/* Engagements */
/* Réassurance : bandeau court (sous le héros et en tête des pages) */
.rassurance{background:var(--surface); border-block:1px solid var(--trait); padding-block:clamp(16px, 2.2vw, 24px)}
.rassurance--accueil{border-top:0; box-shadow:0 -1px 0 rgba(24,61,48,.06)}
.page-tete + .rassurance,.section--tete + .rassurance{border-top:0}
.rassurance-liste{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px clamp(16px, 2.4vw, 32px)}
.rassurance-liste li{display:flex; align-items:center; gap:.8rem; min-width:0}
.rassurance-liste .icone{flex:none; width:44px; height:44px; padding:9px; border-radius:50%; background:var(--sauge); color:var(--pin)}
.rassurance-liste span{display:grid; gap:.1rem; font-size:.92rem; line-height:1.3; color:var(--gris); min-width:0}
.rassurance-liste strong{font-weight:600; font-size:1rem; color:var(--pin)}
@media (max-width: 899px){ .rassurance-liste{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 599px){
  .rassurance-liste{gap:14px 12px}
  .rassurance-liste li{gap:.6rem; align-items:flex-start}
  .rassurance-liste .icone{width:36px; height:36px; padding:7px}
  .rassurance-liste span{font-size:.84rem}
  .rassurance-liste strong{font-size:.93rem}
}

/* Nos engagements : trois temps, du devis à la livraison */
.eng-grille{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px, 2vw, 24px)}
.eng-temps{background:var(--surface); border:1px solid var(--trait); border-radius:16px; padding:clamp(20px, 2.4vw, 30px)}
.section--rose .eng-temps{border-color:transparent}
.eng-temps-titre{display:flex; align-items:center; gap:.7rem; font:400 clamp(1.45rem, 1.2rem + .8vw, 1.8rem)/1.15 var(--f-titre); color:var(--pin);
  padding-bottom:1rem; margin-bottom:.4rem; border-bottom:1px solid var(--trait)}
.eng-num{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--mimosa);
  font:600 .82rem/1 var(--f-texte); letter-spacing:.04em; color:var(--pin); font-variant-numeric:tabular-nums}
.eng-liste li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:.9rem; padding-block:.95rem; border-bottom:1px solid rgba(24,61,48,.08)}
.eng-liste li:last-child{border-bottom:0; padding-bottom:0}
.eng-liste .icone{width:30px; height:30px; color:var(--etang); margin-top:.1rem}
.eng-liste strong{display:block; font-weight:600; color:var(--pin); line-height:1.3}
.eng-liste p{margin-top:.2rem; color:var(--gris); font-size:.95rem; line-height:1.45}
@media (max-width: 1023px) and (min-width: 720px){ .eng-grille{grid-template-columns:repeat(2, minmax(0,1fr))} .eng-temps:last-child{grid-column:1 / -1} }
@media (max-width: 719px){
  .eng-grille{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 10px; scroll-padding-inline:var(--gutter)}
  .eng-grille::-webkit-scrollbar{display:none}
  .eng-temps{flex:0 0 86%; scroll-snap-align:start}
}

/* Petites listes cochées : page devis, fiches coffrets */
.rassure{display:grid; gap:.55rem; margin-top:1.1rem}
.rassure li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:.6rem; align-items:start; line-height:1.4}
.rassure .icone{width:22px; height:22px; padding:3px; border-radius:50%; background:var(--pin); color:var(--fond); margin-top:.05rem}
.rassure--devis{margin-top:1.3rem; padding:1.1rem 1.2rem; background:var(--surface); border:1px solid var(--trait); border-radius:12px}
.rassure--produit{margin-top:1.2rem; font-size:.97rem}

/* Carte des producteurs (js/carte.js) */
.carte-producteurs{position:relative}
.carte-producteurs:empty{min-height:420px; background:#F1EAE4; border-radius:4px}
.carte-producteurs[data-mode=full]:empty{min-height:520px}

/* Éphéméride */
.noel{padding-block:clamp(72px, 9vw, 128px); overflow:hidden}
.noel-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px, 6vw, 96px); align-items:center}
.noel-texte p{margin-top:1rem; color:var(--gris); font-size:1.15rem; max-width:28rem}
.noel-texte .noel-compte{color:var(--pin); font-weight:600}
.ephem{--pw:clamp(230px, 25vw, 350px); --ph:calc(var(--pw) * 1.1); display:grid; justify-items:center; gap:clamp(28px, 4vw, 44px)}
.ephem-scene{position:relative; width:var(--pw); height:calc(var(--ph) + var(--pw) * .16); perspective:1400px; perspective-origin:50% 20%}
.ephem-bloc{position:absolute; left:0; right:0; top:calc(var(--pw) * .12); height:var(--ph); transform-style:preserve-3d; transform:rotateX(12deg) rotateY(-17deg) rotateZ(.6deg)}
.ephem-dos{position:absolute; inset:0; transform:translateZ(-16px); background:#E4D8CC; border-radius:6px}
.ephem-page{position:absolute; inset:0; transform-origin:50% 0; transform-style:preserve-3d}
.ephem-face{position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; border-radius:4px 4px 7px 7px; background:#FFFDF8; -webkit-backface-visibility:hidden; backface-visibility:hidden; box-shadow:inset 0 0 0 1px rgba(60,40,20,.07)}
.ephem-face.verso{transform:rotateX(180deg); background:#F8F3EC}
.ep-haut{position:relative; height:22%; flex:none; display:flex; align-items:flex-end; justify-content:space-between; padding:0 9% 5%; background:var(--pin); color:#fff; font-weight:600; font-size:calc(var(--pw) * .062); line-height:1}
.ep-annee{opacity:.9; font-weight:500}
.ep-trou{position:absolute; top:calc(var(--pw) * .035); width:calc(var(--pw) * .052); height:calc(var(--pw) * .052); border-radius:50%; background:#3B3F3D; box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.ep-trou:nth-of-type(1){left:calc(28% - var(--pw) * .026)}
.ep-trou:nth-of-type(2){left:calc(72% - var(--pw) * .026)}
.ep-corps{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ep-etiquette{font-weight:600; font-size:calc(var(--pw) * .052); color:var(--etang); margin-bottom:.15em}
.ep-jour{position:relative; font:400 calc(var(--pw) * .4)/.9 var(--f-titre); color:var(--pin)}
.ep-semaine{position:relative; margin-top:.25em; font-size:calc(var(--pw) * .056); color:var(--gris)}
.ep-evt{flex:none; padding:0 8% 9%; text-align:center; font-weight:600; font-size:calc(var(--pw) * .058); line-height:1.25; color:var(--encre); text-wrap:balance}
.ephem-page.ep-noel .ep-haut{background:var(--mimosa); color:var(--pin)}
.ep-eclat{position:absolute; left:50%; top:46%; width:calc(var(--pw) * .62); transform:translate(-50%, -50%); opacity:.85}
.ep-ombre{position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,42,35,.08), rgba(28,42,35,.55)); opacity:0; pointer-events:none}
.ephem-anneaux{position:absolute; left:0; right:0; top:calc(var(--pw) * -.085); height:calc(var(--pw) * .18); transform:translateZ(5px); pointer-events:none}
.ephem-anneaux i{position:absolute; top:0; width:calc(var(--pw) * .07); height:calc(var(--pw) * .16); border:calc(var(--pw) * .014) solid #9EA6A2; border-color:#D2D8D5 #7B8480 #6A736F #B7BEBB; border-radius:999px}
.ephem-anneaux i:nth-child(1){left:calc(28% - var(--pw) * .035)}
.ephem-anneaux i:nth-child(2){left:calc(72% - var(--pw) * .035)}
.ephem-sol{position:absolute; left:4%; right:10%; bottom:calc(var(--pw) * -.02); height:calc(var(--pw) * .12); background:radial-gradient(closest-side, rgba(70,48,25,.26), rgba(70,48,25,0)); pointer-events:none}
.ephem-frise{width:min(100%, 460px)}
.ephem-barre{display:block; position:relative; height:2px; margin:0 10%; background:var(--trait)}
.ephem-barre i{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--pin)}
.ephem-frise ol{list-style:none; padding:0; margin:-7px 0 0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr))}
.ephem-frise li{display:grid; justify-items:center; gap:.5rem; font-size:.84rem; line-height:1.2; color:var(--gris); text-align:center}
.ephem-frise li i{width:12px; height:12px; border-radius:50%; background:var(--fond); border:2px solid #D8CCC3; transition:background-color .2s, border-color .2s}
.ephem-frise li.actif{color:var(--pin); font-weight:600}
.ephem-frise li.actif i{background:var(--pin); border-color:var(--pin)}
html.js-anim .noel{height:calc(100svh - var(--hh)); min-height:520px; padding-block:clamp(24px, 4vh, 56px); display:flex; align-items:center}
html.js-anim .noel > .wrap{width:100%}
.ephem--plat{--pw:clamp(118px, 15vw, 168px)}
.ephem--plat .ephem-scene{width:100%; height:auto; perspective:none}
.ephem--plat .ephem-bloc{position:static; transform:none; height:auto; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px}
.ephem--plat .ephem-page{position:relative; inset:auto; aspect-ratio:1 / 1.1; transform:none!important}
.ephem--plat .ephem-page[data-page="0"]{order:0}
.ephem--plat .ephem-page[data-page="1"]{order:1}
.ephem--plat .ephem-page[data-page="2"]{order:2}
.ephem--plat .ephem-page[data-page="3"]{order:3}
.ephem--plat .ephem-page[data-page="4"]{order:4}
.ephem--plat .verso,.ephem--plat .ephem-anneaux,.ephem--plat .ephem-dos,.ephem--plat .ephem-sol,.ephem--plat .ep-ombre{display:none}
.ephem--plat .ephem-face{position:relative; height:100%; box-shadow:0 8px 18px -10px rgba(70,48,25,.35), inset 0 0 0 1px rgba(60,40,20,.07)}
.ephem--plat .ep-trou{display:none}
@media (max-width: 899px){
  .noel-in{grid-template-columns:minmax(0,1fr); gap:20px}
  .ephem{--pw:clamp(200px, 58vw, 250px)}
  html.js-anim .noel .titre-section{font-size:clamp(1.9rem, 8.4vw, 2.5rem)}
  html.js-anim .noel-texte p{font-size:1rem; margin-top:.5rem}
  .ephem--plat{--pw:clamp(96px, 28vw, 150px)}
  .ephem--plat .ephem-bloc{grid-template-columns:repeat(3, minmax(0,1fr))}
  .ephem--plat .ep-haut{font-size:max(9px, calc(var(--pw) * .062))}
  .ephem--plat .ep-etiquette,.ephem--plat .ep-semaine{font-size:max(8.5px, calc(var(--pw) * .056))}
  .ephem--plat .ep-evt{font-size:max(9.5px, calc(var(--pw) * .058)); padding:0 5% 7%; line-height:1.15}
  .ephem--plat .ep-jour{font-size:calc(var(--pw) * .34)}
  .ephem-frise li{font-size:.76rem}
}

/* Questions fréquentes */
.faq{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(28px, 5vw, 80px); align-items:start}
.faq-item{border-top:1px solid var(--trait)}
.faq-item:last-child{border-bottom:1px solid var(--trait)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem 0; font:600 1.15rem/1.35 var(--f-texte); color:var(--pin)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:""; flex:none; width:14px; height:14px; background:linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 0 1.4rem; color:var(--gris); max-width:40rem}
@media (max-width: 899px){ .faq{grid-template-columns:minmax(0,1fr)} }

/* Appel final */
.appel{padding-block:clamp(80px, 10vw, 140px); border-top:1px solid var(--trait)}
.appel-in{display:grid; justify-items:start; gap:1.3rem}
.appel p{color:var(--gris); max-width:34rem; font-size:1.15rem}
.appel .btn{margin-top:.6rem}

/* Pied de page */
.pied{background:var(--pin); color:rgba(251,247,244,.86); padding-block:clamp(48px, 6vw, 80px) calc(28px + env(safe-area-inset-bottom, 0px)); font-size:.95rem}
.pied-grille{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.8fr); gap:2rem clamp(24px, 3vw, 48px)}
.pied-titre{font-weight:600; color:var(--mimosa); margin-bottom:.9rem}
.pied-legal{list-style:none; padding:0; margin:clamp(36px, 4.5vw, 56px) 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; font-size:.92rem}
.pied-legal a{color:rgba(251,247,244,.7); text-decoration:none}
.pied-legal a:hover{color:#fff; text-decoration:underline}
.pied .marque .logo{height:46px}
.pied .marque{color:var(--fond)}
.pied-marque p{margin-top:1rem; color:rgba(251,247,244,.72); max-width:19rem}
.pied-contact{display:grid; gap:.4rem; align-content:start; margin-top:1.3rem}
.pied-contact p{color:var(--fond); font-weight:600}
.pied-nav ul{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.pied-nav a{color:var(--fond); text-decoration:none}
.pied-nav a:hover{text-decoration:underline; color:var(--mimosa)}
.pied :focus-visible{outline-color:var(--mimosa)}
.pied-mentions{margin-top:clamp(20px, 2.5vw, 28px); padding-top:20px; border-top:1px solid rgba(251,247,244,.16); display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 2rem; color:rgba(251,247,244,.62); font-size:.86rem}
.pied-sceau{width:88px; height:88px; flex:none; margin-left:auto; color:var(--mimosa); transform:rotate(-8deg)}
@media (max-width: 899px){ .pied-grille{grid-template-columns:repeat(2, minmax(0,1fr))} .pied-marque{grid-column:1 / -1} }

/* Page produit */
.ariane{padding-top:clamp(18px, 3vw, 32px)}
.ariane-zone + .section,.ariane-zone + .section--tete{padding-top:clamp(22px, 3.2vw, 44px)}
.ariane ol{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; font-size:.92rem; color:var(--gris)}
.ariane li + li::before{content:"/"; margin-right:.45rem; color:#B9AEA6}
.ariane a{color:var(--gris)}
.produit-tete{padding-block:clamp(20px, 3vw, 40px) clamp(48px, 6vw, 88px)}
.produit-grille{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px, 5vw, 80px); align-items:center}
.produit-visuel .compo{max-width:620px}
.produit-accroche{margin-top:.8rem; font-size:clamp(1.2rem, 1.05rem + .5vw, 1.45rem); color:var(--gris)}
.produit-prix{margin-block:1.6rem 1.5rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .7rem}
.produit-prix strong{font:400 3rem/1 var(--f-titre); color:var(--pin)}
.produit-prix span{color:var(--gris)}
.produit-mention{margin-top:1.1rem; color:var(--gris); font-size:.95rem}
.produit-details{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(44px, 5vw, 72px) clamp(32px, 5vw, 80px)}
.bloc--large{grid-column:1 / -1}
.bloc > p{color:var(--gris); max-width:36rem}
.contenu{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap:0 2.5rem}
.contenu-item{display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:1rem; padding-block:.85rem; border-bottom:1px solid var(--trait)}
.contenu-photo{height:84px; display:flex; align-items:center; justify-content:center}
.contenu-photo img{max-height:84px; max-width:64px; width:auto; height:auto; object-fit:contain}
.contenu-texte{min-width:0}
.contenu-texte strong{display:block; font-weight:600; line-height:1.3}
.contenu-texte span{display:block; color:var(--gris); font-size:.95rem; line-height:1.4; margin-top:.15rem}
.contenu-format{font-weight:600; color:var(--pin); white-space:nowrap; font-variant-numeric:tabular-nums}
.contenu--petit{margin-top:1rem}
.tarifs{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.tarifs th,.tarifs td{text-align:left; padding:.7rem 1rem .7rem 0; border-bottom:1px solid var(--trait); font-weight:400}
.tarifs thead th{font-size:.9rem; color:var(--gris); font-weight:500}
.tarifs tbody td:nth-child(2){font-weight:600; color:var(--pin)}
.puces{list-style:none; padding:0}
.puces li{position:relative; padding-left:1.3rem; margin-block:.5rem}
.puces li::before{content:""; position:absolute; left:0; top:.66em; width:7px; height:7px; border-radius:50%; background:var(--mimosa)}
.puces--grandes li{font-size:1.1rem; margin-block:.75rem}
@media (max-width: 899px){
  .produit-grille,.produit-details{grid-template-columns:minmax(0,1fr)}
  .produit-prix strong{font-size:2.6rem}
}

/* Coffrets : comparatif et options */
.table-defile{overflow-x:auto; margin-top:2rem; -webkit-overflow-scrolling:touch}
.comparatif{width:100%; min-width:780px; border-collapse:collapse; font-variant-numeric:tabular-nums}
.comparatif th,.comparatif td{padding:1.1rem 1.2rem 1.1rem 0; text-align:left; vertical-align:top; border-bottom:1px solid rgba(24,61,48,.14); font-weight:400}
.comparatif thead th{font-size:.9rem; font-weight:500; color:var(--gris); vertical-align:bottom}
.comparatif tbody th a{font:400 1.5rem/1.1 var(--f-titre); color:var(--pin); text-decoration:none; white-space:nowrap}
.comparatif tbody th a:hover{text-decoration:underline}
.comparatif td:nth-child(n+4){white-space:nowrap; font-weight:600; color:var(--pin)}
.td-contenu{max-width:26rem; color:var(--gris)}
.options{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2rem 2.5rem; margin-top:2.2rem}
.options dt{font-weight:600; color:var(--pin); font-size:1.12rem}
.options dd{margin:.45rem 0 0; color:var(--gris)}
.options--colonne{grid-template-columns:minmax(0,1fr); gap:1.4rem}
@media (max-width: 1023px){ .options{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 559px){ .options{grid-template-columns:minmax(0,1fr)} }

/* Étapes numérotées */
.etapes{list-style:none; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2rem clamp(24px, 3vw, 48px); margin-top:clamp(36px, 4vw, 56px)}
.etape-num{display:block; font:400 3.2rem/1 var(--f-titre); color:var(--pin); margin-bottom:.9rem}
.etapes p{margin-top:.45rem; color:var(--gris)}
@media (max-width: 1023px){ .etapes{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 559px){ .etapes{grid-template-columns:minmax(0,1fr)} }

/* Entreprises */
.entreprises-tete{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 80px); align-items:center}
.entreprises-tete .tete-page{margin-bottom:0}
.deux-colonnes{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(40px, 6vw, 96px)}
.colonne .titre-section{margin-bottom:1rem}
@media (max-width: 899px){ .entreprises-tete,.deux-colonnes{grid-template-columns:minmax(0,1fr)} }

/* Découverte */
.producteurs-grille{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:2.6rem 2rem; margin-top:2.6rem}
.producteur-photo{height:150px; display:flex; align-items:flex-end; justify-content:flex-start; gap:.5rem; margin-bottom:1rem; padding-bottom:12px; border-bottom:1px solid var(--trait)}
.producteur-photo img{max-height:130px; max-width:58%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(2px 6px 6px rgba(74,48,20,.16))}
.producteur h3{font:600 1.08rem/1.3 var(--f-texte); color:var(--pin)}
.producteur p{color:var(--gris); font-size:.98rem}
.producteur .producteur-km{color:var(--etang); font-weight:600; font-variant-numeric:tabular-nums}
@media (max-width: 559px){ .producteurs-grille{grid-template-columns:repeat(2, minmax(0,1fr)); gap:2rem 1.2rem} .producteur-photo{height:120px} .producteur-photo img{max-height:104px} }
.bois{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 80px); align-items:center}
.bois .titre-section{margin-bottom:1.6rem}
@media (max-width: 899px){ .bois{grid-template-columns:minmax(0,1fr)} }

/* Devis */
.devis{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 6vw, 96px); align-items:start}
.devis-intro > p{margin-top:1rem; color:var(--gris); font-size:1.15rem}
.contact{margin-top:2.2rem; display:grid; gap:1.3rem}
.contact dt{font-size:.92rem; color:var(--gris)}
.contact dd{margin:.2rem 0 0; font-weight:600; color:var(--pin); font-size:1.12rem}
.formulaire{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem 1.4rem}
.champ{display:grid; gap:.4rem; align-content:start; min-width:0}
.champ--large{grid-column:1 / -1}
.champ label{font-weight:600; font-size:.95rem}
.facultatif{font-weight:400; color:var(--gris)}
input,select,textarea{font:inherit; color:var(--encre); background:var(--surface); border:1.5px solid #D8CCC3; border-radius:10px; padding:.72rem .85rem; min-height:50px; width:100%; max-width:100%}
select{-webkit-appearance:none; appearance:none; padding-right:2.4rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23183D30' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center}
textarea{resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--etang); box-shadow:0 0 0 3px rgba(47,110,106,.2)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--etang); outline-offset:3px; box-shadow:none}
[aria-invalid=true]{border-color:var(--erreur)}
.erreur{color:var(--erreur); font-size:.9rem}
.aide{color:var(--gris); font-size:.88rem}
.estimation{grid-column:1 / -1; margin-top:-.3rem; color:var(--pin); font-weight:500}
.resultat{background:var(--surface); border:1px solid var(--trait); border-radius:16px; padding:clamp(20px, 3vw, 32px)}
.resultat > p{margin-top:.6rem; color:var(--gris)}
.resultat .fort{color:var(--pin); font-weight:600}
.resultat-texte{margin-top:1rem; font-size:1rem; min-height:260px; background:var(--fond)}
.resultat .actions{margin-top:1rem}
.resultat-etat{margin-top:.8rem; color:var(--pin); font-weight:600; min-height:1.5em}
@media (max-width: 899px){ .devis{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 559px){ .formulaire{grid-template-columns:minmax(0,1fr)} }

/* Pages légales */
.legal{max-width:70ch}
.legal h1{font:400 clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem)/1.05 var(--f-titre); color:var(--pin); margin-bottom:1rem; text-wrap:balance}
.legal h2{font:600 1.3rem/1.3 var(--f-texte); color:var(--pin); margin:2.6rem 0 .8rem}
.legal h3{margin:1.8rem 0 .6rem}
.legal p,.legal li{line-height:1.7}
.legal p + p{margin-top:.9rem}
.legal ul,.legal ol{padding-left:1.25rem; margin:.8rem 0}
.legal li + li{margin-top:.3rem}
.legal table{border-collapse:collapse; width:100%; margin:1rem 0; display:block; overflow-x:auto}
.legal th,.legal td{border-bottom:1px solid var(--trait); padding:.6rem .8rem .6rem 0; text-align:left; vertical-align:top}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
  .scene3d-canvas canvas{transition:none}
}

/* Pages du rapport SEO (octobre 2026) : composants partagés */
.heros-h1{font:600 clamp(.95rem, .9rem + .2vw, 1.05rem)/1.4 var(--f-texte); color:var(--etang); max-width:30rem; margin-bottom:.9rem; text-wrap:balance}
@media (max-width: 899px){ html.js-anim .heros-h1{font-size:.84rem; line-height:1.35; margin-bottom:.4rem} }
.titre-page .titre-suite{display:block; margin-top:.55rem; font:500 clamp(1.1rem, .95rem + .6vw, 1.45rem)/1.35 var(--f-texte); color:var(--gris); letter-spacing:0; text-wrap:balance}
.page-tete{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 80px); align-items:center}
.page-tete .tete-page{margin-bottom:0}
.page-visuel .packshot{max-width:620px}
/* Montages de vraies photos (outils/montage_photos.py), carrés */
.montage{display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border-radius:18px; background:var(--sauge)}
.page-visuel .montage{max-width:560px; margin-left:auto}
.dedans-grille{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px, 4vw, 64px); align-items:start}
.dedans-grille .contenu{grid-template-columns:minmax(0,1fr)}
.dedans-photo figcaption{margin-top:.75rem; color:var(--gris); font-size:.92rem}
@media (max-width: 899px){
  .page-visuel .montage{margin-inline:auto}
  .dedans-grille{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 899px){ .page-tete{grid-template-columns:minmax(0,1fr)} }
.prose p{color:var(--gris); max-width:40rem}
.prose p + p{margin-top:.9rem}
.colonne .prose p{font-size:1.08rem}
.suite-lien{margin-top:1.3rem}
.espace-haut{margin-top:clamp(32px, 4vw, 56px)}
.tete-section + .table-defile{margin-top:0}

/* Grille de 4 coffrets (pages d'atterrissage) */
.coffrets.coffrets--quatre{grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(32px, 4vw, 48px) clamp(16px, 2.4vw, 32px)}
.coffrets--quatre .coffret-texte{grid-template-columns:minmax(0,1fr); gap:.2rem; margin-top:.6rem}
.coffrets--quatre .coffret-nom{font-size:clamp(1.4rem, 1.15rem + .7vw, 1.75rem)}
.coffrets--quatre .coffret-prix{grid-column:1; grid-row:auto; text-align:left; align-self:start; white-space:normal}
.coffrets--quatre .coffret-prix strong{display:inline; font-size:1.15rem; margin-right:.25rem}
.coffrets--quatre .coffret-accroche{grid-column:1; margin-top:.15rem; font-size:.98rem; line-height:1.45}
@media (max-width: 1023px){ .coffrets.coffrets--quatre{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 359px){ .coffrets.coffrets--quatre{grid-template-columns:minmax(0,1fr)} }

/* Pour qui : cartes */
.cibles{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:clamp(16px, 2vw, 24px)}
.cible{display:flex; flex-direction:column; gap:.7rem; background:var(--surface); border:1px solid var(--trait); border-radius:16px; padding:clamp(22px, 2.4vw, 30px)}
.cible h3{font:400 clamp(1.55rem, 1.35rem + .6vw, 1.85rem)/1.1 var(--f-titre); color:var(--pin)}
.cible p{color:var(--gris)}
.cible .lien-fort{margin-top:auto; padding-top:.4rem; align-self:flex-start}

/* Encadré (règles Urssaf, fiscalité) */
.encadre{background:var(--surface); border:1px solid var(--trait); border-left:4px solid var(--mimosa); border-radius:10px; padding:clamp(20px, 2.6vw, 32px); max-width:52rem}
.encadre .titre-bloc{margin-bottom:.6rem}
.encadre p{color:var(--gris)}

/* Communes de la métropole */
.communes{columns:4 10rem; column-gap:2rem; margin-top:.4rem}
.communes li{break-inside:avoid; padding:.42rem 0; border-bottom:1px solid rgba(24,61,48,.12); line-height:1.35}
/* « Votre ville n'y est pas ? » sous la liste des communes */
.hors-zone{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:clamp(24px, 3vw, 36px);
  padding:clamp(18px, 2.4vw, 28px); background:var(--surface); border:1px solid var(--trait); border-left:4px solid var(--mimosa); border-radius:12px}
.hors-zone-texte{flex:1 1 20rem; max-width:40rem}
.hors-zone-titre{font:400 clamp(1.5rem, 1.25rem + .9vw, 1.9rem)/1.15 var(--f-titre); color:var(--pin); margin-bottom:.35rem}
.hors-zone-texte p:not(.hors-zone-titre){color:var(--gris)}
.hors-zone .btn{flex:none}
@media (max-width: 519px){ .hors-zone .btn{width:100%} }
#ville{scroll-margin-top:calc(var(--hh, 72px) + 24px)}

/* Tableaux de prix et de budget */
.budget{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.budget th,.budget td{padding:.95rem 1rem .95rem 0; text-align:left; vertical-align:baseline; border-bottom:1px solid rgba(24,61,48,.14); font-weight:400}
.budget thead th{font-size:.9rem; font-weight:500; color:var(--gris); vertical-align:bottom}
.budget tbody th{font-weight:600; color:var(--encre)}
.budget tbody th a{color:var(--pin)}
.budget td{font-weight:600; color:var(--pin); white-space:nowrap}
@media (max-width: 559px){ .budget th,.budget td{padding-right:.55rem; font-size:.88rem} .budget thead th{font-size:.8rem} }

/* Liste de choix (coffrets sans alcool) */
.choix{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(32px, 5vw, 72px); margin-top:clamp(28px, 3vw, 44px)}
.choix li{padding-block:1.3rem; border-top:1px solid rgba(24,61,48,.14)}
.choix-lien{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; text-decoration:none; color:var(--pin)}
.choix-lien:hover{color:var(--pin)}
.choix-nom{font:400 clamp(1.6rem, 1.4rem + .6vw, 1.95rem)/1.1 var(--f-titre)}
.choix-prix{font-weight:600; font-size:1.15rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.choix-lien:hover .choix-nom{text-decoration:underline; text-decoration-color:var(--mimosa); text-decoration-thickness:2px; text-underline-offset:.14em}
.choix p{margin-top:.5rem; color:var(--gris)}
.choix p strong{color:var(--encre); font-weight:600}
@media (max-width: 719px){ .choix{grid-template-columns:minmax(0,1fr)} }

/* Liens vers les pages voisines */
.liens-lies{display:grid; gap:.7rem}
.liens-lies--ligne{display:flex; flex-wrap:wrap; gap:.8rem 2rem}
.wrap > .liens-lies--ligne:not(:first-child){margin-top:clamp(28px, 3vw, 40px)}

/* Producteurs : liste courte (page Montpellier) et produits un par un (page producteurs) */
.producteurs-liste{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:0 clamp(24px, 3vw, 48px)}
.producteurs-liste li{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; padding-block:.8rem; border-bottom:1px solid rgba(24,61,48,.14)}
.producteurs-liste strong{font-weight:600}
.producteurs-liste span{grid-column:1; color:var(--gris); font-size:.95rem}
.producteurs-liste .km{grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--etang); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.tete-page + .carte-producteurs{margin-top:0}
.fiches-produits{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap:0 clamp(32px, 5vw, 72px)}
.fiche-produit{display:grid; grid-template-columns:72px minmax(0,1fr); gap:1.1rem; align-items:start; padding-block:1.5rem; border-top:1px solid rgba(24,61,48,.14)}
.fp-photo{height:112px; display:flex; align-items:center; justify-content:center}
.fp-photo img{max-height:112px; max-width:72px; width:auto; height:auto; object-fit:contain; filter:drop-shadow(2px 6px 6px rgba(74,48,20,.16))}
.fiche-produit h3{font:600 1.12rem/1.3 var(--f-texte); color:var(--pin)}
.fp-origine{margin-top:.2rem; color:var(--etang); font-weight:600; font-size:.95rem}
.fiche-produit p:not(.fp-origine){margin-top:.45rem; color:var(--gris)}
.fp-dans{font-size:.95rem}

/* Devis : rappel au-dessus du formulaire */
.devis-rappel{margin-top:1.4rem}
.titre-section + .cibles{margin-top:clamp(28px, 3.4vw, 48px)}
.wrap > .options:first-child{margin-top:0}

/* Section vert pin */
.section--pin{background:var(--pin); color:rgba(251,247,244,.86)}
.section--pin .titre-section{color:var(--fond)}
.section--pin .tete-section p{color:rgba(251,247,244,.72)}
.section--pin a{color:var(--mimosa)}
.section--pin :focus-visible{outline-color:var(--mimosa)}

/* Visuels animés des blocs « Pour qui » et « Pourquoi offrir » : panneau 4:3, plans en relief */
.cible-visuel,.raison-visuel{position:relative; aspect-ratio:4 / 3; border-radius:12px; overflow:hidden; container-type:inline-size; perspective:900px;
  background:radial-gradient(120% 95% at 50% 16%, #FFFFFF 0%, #F6F7F1 52%, #E3EADD 100%)}
.v-scene{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .35s ease-out}
.v-scene > *{position:absolute}
.v-badge{left:4cqw; top:4cqw; z-index:3; transform:translateZ(60px); padding:1.4cqw 2.8cqw; border-radius:99px; background:var(--mimosa); color:var(--pin);
  font:700 3.6cqw/1 var(--f-texte); letter-spacing:.02em; box-shadow:0 4px 10px rgba(24,61,48,.16)}
.v-badge--bas{top:auto; left:auto; right:4cqw; bottom:4cqw; background:var(--pin); color:var(--fond)}
.cibles--visuel{grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr))}
.cibles--visuel .cible{padding:12px 12px clamp(18px, 2vw, 24px); gap:.6rem}
.cibles--visuel .cible > :not(.cible-visuel){margin-inline:8px}
.cibles--visuel .cible h3{margin-top:.5rem}

/* CSE : colis de Noël (scène rendue, ampoules qui scintillent, neige qui tombe) */
.v-noel{inset:0; overflow:hidden; background:#12382B}
.vn-scene{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .8s ease}
.vn-amp{position:absolute; width:5.2cqw; height:5.2cqw; margin:-2.6cqw 0 0 -2.6cqw; border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,246,220,.95) 0, rgba(255,206,120,.6) 30%, rgba(255,190,100,0) 68%);
  animation:scintille 2.2s ease-in-out var(--d) infinite alternate}
@keyframes scintille{from{opacity:.15; transform:scale(.7)} to{opacity:1; transform:scale(1.25)}}
.vn-neige{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.vn-flocon{position:absolute; top:0; width:var(--s); height:var(--s); border-radius:50%; background:#fff; opacity:.75;
  animation:neige var(--t) linear var(--d) infinite both}
@keyframes neige{from{transform:translate3d(0,-6cqw,0)} 50%{transform:translate3d(2.6cqw,34cqw,0)} to{transform:translate3d(-.6cqw,80cqw,0)}}
.vn-etiquette{position:absolute; left:54%; top:38%; z-index:2; padding:1.2cqw 2.6cqw 1.3cqw 4.6cqw; color:var(--pin); font:400 3.8cqw/1 var(--f-titre); white-space:nowrap;
  transform:translateZ(30px) rotate(-8deg); transform-origin:0 50%; filter:drop-shadow(0 .8cqw 1cqw rgba(0,0,0,.4)); transition:transform .9s cubic-bezier(.3,1.4,.5,1), opacity .5s ease}
.vn-etiquette::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 2.3cqw 50%, #3A2C1E .7cqw, transparent .8cqw),
  linear-gradient(160deg, #E2C08E, #C79E62); clip-path:polygon(2.4cqw 0, 100% 0, 100% 100%, 2.4cqw 100%, 0 50%)}
.anim-ok .cible--cse:not(.vu) .vn-scene{opacity:0; transform:scale(1.08)}
.anim-ok .cible--cse:not(.vu) .vn-etiquette{opacity:0; transform:translateZ(30px) rotate(-38deg)}
.cible--cse .vn-etiquette{transition-delay:.5s}

/* Clients et salariés : la remise du coffret, deux silhouettes sans visage */
.v-remise{inset:0; overflow:hidden}
.vr-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.vp{transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .7s ease}
.vr-coffret{transform-box:fill-box; transform-origin:50% 50%; transition:transform 1s cubic-bezier(.2,.8,.2,1) .25s, opacity .6s ease .25s}
.vu .vr-coffret{animation:porte 3.4s ease-in-out 1.3s infinite alternate}
@keyframes porte{from{transform:translateY(0)} to{transform:translateY(-1.8px)}}
.vr-bulle{position:absolute; z-index:2; max-width:54%; padding:1.9cqw 2.9cqw 2.1cqw; background:#fff; border-radius:3cqw; color:var(--pin);
  font:400 4.6cqw/1.18 var(--f-titre); box-shadow:0 1.4cqw 3.4cqw -1cqw rgba(24,61,48,.3); transform:translateZ(40px); transform-origin:12% 100%;
  transition:transform .6s cubic-bezier(.3,1.5,.5,1) .9s, opacity .4s ease .9s}
.vr-bulle::after{content:""; position:absolute; left:3.4cqw; bottom:-1.5cqw; width:3.2cqw; height:3.2cqw; background:#fff; transform:rotate(45deg); border-radius:0 0 .7cqw 0}
.vr-bulle [data-messages]{display:inline-block; text-wrap:balance; transition:opacity .26s ease, transform .26s ease}
.vr-bulle [data-messages].sort{opacity:0; transform:translateY(4px)}
.vr-bulle--clients{left:20%; top:2%; max-width:50%}
.vr-bulle--salaries{left:21%; top:5%; max-width:60%; white-space:nowrap}
.anim-ok .cible:not(.vu) .vp-donne{opacity:0; transform:translateX(-9%)}
.anim-ok .cible:not(.vu) .vp-recoit{opacity:0; transform:translateX(9%)}
.anim-ok .cible:not(.vu) .vr-coffret{opacity:0; transform:translateX(-26%)}
.anim-ok .cible:not(.vu) .vr-bulle{opacity:0; transform:translateZ(40px) scale(.6)}

/* Montpellier : les 31 communes, routes de livraison qui partent du centre */
.v-metropole{left:0; top:0; width:100%; height:100%}
.vm-mer{fill:#D7E8E3}
.vm-cote{fill:none; stroke:#A9CFC5; stroke-width:1.5}
.vm-terr circle{fill:#DCE5D3}
.vm-route{fill:none; stroke:var(--etang); stroke-width:1.6; stroke-dasharray:4 5; stroke-linecap:round; opacity:.75; animation:flux 1.4s linear infinite}
.vm-pt{fill:var(--pin); transform-box:fill-box; transform-origin:center}
.vm-centre{fill:var(--mimosa); stroke:var(--pin); stroke-width:2}
.vm-pouls{fill:none; stroke:var(--mimosa); stroke-width:2.5; transform-box:fill-box; transform-origin:center; animation:pouls 2.2s ease-out infinite}
.vm-nom{font:700 13px var(--f-texte); fill:var(--pin)}
.vm-mer-nom{font:italic 500 11px var(--f-texte); fill:#6F9B91; letter-spacing:.06em}
.anim-ok .cible--mtp:not(.vu) .vm-pt,.anim-ok .cible--mtp:not(.vu) .vm-route{opacity:0}
.anim-ok .cible--mtp.vu .vm-pt{animation:pop .5s cubic-bezier(.3,1.6,.5,1) var(--d) both}
@keyframes pouls{from{transform:scale(1); opacity:.95} to{transform:scale(2.7); opacity:0}}
@keyframes pop{from{opacity:0; transform:scale(0)} to{opacity:1; transform:scale(1)}}
@keyframes flux{to{stroke-dashoffset:-18}}

/* Pourquoi offrir : cartes sur fond vert pin */
.raisons--visuel{grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 2vw, 24px); margin-top:0}
.raisons--visuel .raison{background:rgba(251,247,244,.05); border:1px solid rgba(251,247,244,.13); border-radius:16px; padding:12px 12px clamp(18px, 2vw, 24px)}
.raisons--visuel .raison > h3{margin:1rem 8px 0; color:var(--fond); font:600 1.18rem/1.3 var(--f-texte)}
.raisons--visuel .raison > p{margin:.5rem 8px 0; color:rgba(251,247,244,.74)}
.raisons--visuel .raison a{display:inline; margin:0}
@media (max-width: 1023px){ .raisons--visuel{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* le coffret qui s'ouvre */
.v-cadeau{position:absolute; inset:6% 5%}
.v-cadeau img{position:absolute; left:0; top:50%; width:100%; height:auto; transform:translateY(-50%); transition:opacity .55s ease, transform .75s cubic-bezier(.2,.8,.2,1)}
.c-ouvert{opacity:0; transform:translateY(-50%) scale(.94)!important}
.v-cadeau.ouvert .c-ferme{opacity:0; transform:translateY(-56%) scale(1.05)}
.v-cadeau.ouvert .c-ouvert{opacity:1; transform:translateY(-50%) scale(1)!important}

/* la jauge du plafond Urssaf */
.v-jauge{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:5cqw; padding:0 8cqw}
.vj-total{font:400 13cqw/1 var(--f-titre); color:var(--pin)}
.vj-total span{font:500 4.4cqw/1 var(--f-texte); color:var(--gris)}
.vj-piste{position:relative; display:flex; height:6cqw; border-radius:99px; background:#DFE5D9}
.vj-seg{height:100%; width:var(--w); transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.vj-seg--coffret{background:var(--mimosa); border-radius:99px 0 0 99px}
.vj-seg--cheque{background:var(--etang); border-radius:0 99px 99px 0; transition-delay:.45s}
.anim-ok .raison:not(.vu) .vj-seg{width:0}
.vj-plafond{position:absolute; right:0; top:-2.6cqw; bottom:-2.6cqw; width:2px; border-radius:2px; background:var(--pin)}
.vj-legende{display:grid; gap:1.8cqw; font:500 4.1cqw/1.2 var(--f-texte); color:var(--encre)}
.vj-pt{display:inline-block; width:3cqw; height:3cqw; margin-right:2cqw; border-radius:50%; vertical-align:-.15em}
.vj-pt--coffret{background:var(--mimosa)}
.vj-pt--cheque{background:var(--etang)}
.vj-max{color:var(--gris)}

/* les producteurs autour de Montpellier, à leur distance réelle */
.v-radar{position:absolute; inset:0}
.v-radar svg{position:absolute; inset:0; width:100%; height:100%}
.vr-cercles circle{fill:none; stroke:#C3CEBF; stroke-width:1.2; stroke-dasharray:3 4}
.vr-cercles text{font:600 11px var(--f-texte); fill:#7A897F}
.vr-centre{fill:var(--mimosa); stroke:var(--pin); stroke-width:2}
.vr-pastille{position:absolute; width:9.5cqw; aspect-ratio:1; margin:-4.75cqw 0 0 -4.75cqw; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:#fff;
  box-shadow:0 3px 8px rgba(24,61,48,.18); transition:transform .5s cubic-bezier(.3,1.5,.5,1) var(--d), opacity .4s ease var(--d)}
.vr-pastille img{width:auto; height:auto; max-width:70%; max-height:80%; object-fit:contain}
.anim-ok .raison:not(.vu) .vr-pastille{opacity:0; transform:scale(.2)}
.vr-nom{position:absolute; left:50%; top:50%; transform:translate(-50%, 4cqw); font:700 3.5cqw/1 var(--f-texte); color:var(--pin)}

/* avec ou sans alcool */
.v-bascule{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 4cqw 4cqw}
.vb-scene{position:absolute; left:0; right:0; top:6%; bottom:37%}
.vb-scene img{position:absolute; left:50%; top:0; width:auto; height:100%; filter:drop-shadow(0 8px 10px rgba(40,30,20,.22)); transition:opacity .5s ease, transform .75s cubic-bezier(.2,.8,.2,1)}
.vb-avec{transform:translateX(-50%)}
.vb-sans{opacity:0; transform:translateX(-20%) rotate(9deg)}
.v-bascule.sans .vb-avec{opacity:0; transform:translateX(-80%) rotate(-9deg)}
.v-bascule.sans .vb-sans{opacity:1; transform:translateX(-50%)}
.vb-choix{position:relative; display:inline-flex; gap:2px; padding:3px; border-radius:99px; background:#E1E7DB}
.vb-choix button{min-height:34px; padding:.4rem .85rem; border:0; border-radius:99px; background:none; font:600 max(12px, 3.7cqw)/1 var(--f-texte); color:#4A5650; cursor:pointer}
.vb-choix button[aria-pressed=true]{background:var(--pin); color:#fff}
.vb-choix button:focus-visible{outline:2px solid var(--etang); outline-offset:2px}
.vb-legende{margin-top:2.4cqw; font:500 max(12px, 3.5cqw)/1.2 var(--f-texte); color:var(--gris)}

/* Mobile : les cartes défilent à l'horizontale (on voit la suivante) */
@media (max-width: 719px){
  .cibles--visuel,.raisons--visuel{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 10px; scroll-padding-inline:var(--gutter)}
  .cibles--visuel::-webkit-scrollbar,.raisons--visuel::-webkit-scrollbar{display:none}
  .cibles--visuel > li,.raisons--visuel > li{flex:0 0 84%; scroll-snap-align:start}
}

@media (prefers-reduced-motion: reduce){
  .anim-ok [data-apparait] .vn-scene,.anim-ok [data-apparait] .vn-etiquette,.anim-ok [data-apparait] .vp,.anim-ok [data-apparait] .vr-coffret,.anim-ok [data-apparait] .vr-bulle,.anim-ok [data-apparait] .vm-pt,
  .anim-ok [data-apparait] .vm-route,.anim-ok [data-apparait] .vj-seg,.anim-ok [data-apparait] .vr-pastille{opacity:1!important; animation:none!important}
  .anim-ok .raison:not(.vu) .vj-seg{width:var(--w)}
  .vm-pouls{animation:none}
  .vn-amp{animation:none; opacity:.8}
  .vn-neige{display:none}
  .vu .vr-coffret{animation:none}
  .vp,.vr-coffret,.vr-bulle,.vn-scene,.vn-etiquette{transition:none!important}
}
.v-cadeau img{max-height:100%; object-fit:contain}

/* Panier : lien d'en-tête (visible dès qu'il y a un coffret dans le panier) */
.panier-lien{display:none; position:relative; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:50%; color:var(--pin); text-decoration:none}
.panier-plein .panier-lien{display:inline-flex}
.panier-lien:hover{background:var(--sauge); color:var(--pin)}
.panier-icone{width:24px; height:24px}
.panier-compte{position:absolute; top:3px; right:0; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--mimosa); color:var(--pin-fonce); font:700 .72rem/19px var(--f-texte); text-align:center; font-variant-numeric:tabular-nums}
.entete-in > .panier-lien{margin-left:-1rem}
@media (max-width: 899px){
  .panier-plein .tel-mobile + .menu-btn{margin-left:.5rem}
  .entete-in > .panier-lien{order:3; margin-left:0}
  .tel-mobile{order:2}
  .menu-btn{order:4}
  .panier-plein .entete-in > .panier-lien{margin-left:.2rem}
}
@media (max-width: 479px){ .panier-plein .tel-mobile span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)} .panier-plein .tel-mobile{width:44px; justify-content:center} .panier-plein .tel-mobile .tel-icone{width:22px; height:22px} }

/* Fiche coffret : ajout au panier */
.ajout{display:grid; gap:1rem; padding:1.2rem; border:1px solid var(--trait); border-radius:16px; background:var(--surface)}
.ajout-version{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.ajout-version legend{font-weight:600; font-size:.95rem; margin-bottom:.5rem; padding:0}
.ajout-version label{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.4rem 1rem; border:1.5px solid #D8CCC3; border-radius:999px; cursor:pointer; font-weight:500}
.ajout-version label:has(input:checked){border-color:var(--pin); background:var(--sauge)}
.ajout-version input{width:auto; min-height:0; accent-color:var(--pin)}
.ajout-ligne{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem}
.ajout-ligne label{font-weight:600; font-size:.95rem}
.quantite{display:inline-grid; grid-template-columns:44px 76px 44px; align-items:center; border:1.5px solid #D8CCC3; border-radius:999px; background:var(--surface); overflow:hidden}
.quantite input,.lp-quantite input{border:0; border-radius:0; min-height:44px; padding:.4rem 0; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield}
.quantite input::-webkit-inner-spin-button,.lp-quantite input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.quantite input:focus,.lp-quantite input:focus{box-shadow:inset 0 0 0 2px var(--etang)}
.pas{width:44px; height:44px; border:0; background:none; color:var(--pin); font:500 1.35rem/1 var(--f-texte); cursor:pointer}
.pas:hover{background:var(--sauge)}
.ajout-estimation{color:var(--pin); font-weight:500; min-height:1.6em; font-variant-numeric:tabular-nums}
.ajout-actions{display:flex; flex-wrap:wrap; gap:.7rem}
.ajout-actions .btn{flex:1 1 200px}
.ajout-message{padding:.8rem 1rem; border-radius:12px; background:var(--sauge); color:var(--pin); line-height:1.45}
.ajout-message a{font-weight:600; white-space:nowrap}
.ajout-aide{color:var(--gris); font-size:.9rem}

/* Page panier */
.panier-annule{margin-bottom:1.5rem; padding:.9rem 1.1rem; border-radius:12px; background:var(--sauge); color:var(--pin); font-weight:500}
.panier-vide{display:grid; gap:.8rem; justify-items:start; max-width:36rem; color:var(--gris)}
.panier-vide p:first-child{font:400 1.8rem/1.2 var(--f-titre); color:var(--pin)}
.panier-vide .btn{margin-top:.6rem}
.panier-grille{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:clamp(28px, 5vw, 72px); align-items:start}
.panier-grille[hidden],.panier-repli[hidden]{display:none}
.lignes-panier{display:grid; gap:0; border-top:1px solid var(--trait)}
.ligne-panier{display:grid; grid-template-columns:112px minmax(0,1fr) auto auto; grid-template-areas:"img texte quantite montant" "img texte retirer retirer"; gap:.3rem 1.2rem; align-items:center; padding:1.1rem 0; border-bottom:1px solid var(--trait)}
.ligne-panier img{grid-area:img; width:112px; height:84px; object-fit:cover; border-radius:10px; background:var(--sauge)}
.lp-texte{grid-area:texte; display:grid; gap:.15rem; min-width:0}
.lp-nom{font:400 1.35rem/1.15 var(--f-titre); color:var(--pin); text-decoration:none}
.lp-nom:hover{text-decoration:underline}
.lp-version,.lp-prix{color:var(--gris); font-size:.92rem}
.lp-prix s{margin-left:.3rem; opacity:.7}
.lp-quantite{grid-area:quantite; display:inline-grid; grid-template-columns:40px 58px 40px; border:1.5px solid #D8CCC3; border-radius:999px; overflow:hidden; background:var(--surface)}
.lp-quantite .pas{width:40px}
.lp-montant{grid-area:montant; min-width:5.5rem; text-align:right; font-weight:600; color:var(--pin); font-variant-numeric:tabular-nums}
.lp-retirer{grid-area:retirer; justify-self:end; min-height:36px; padding:.2rem 0; font:500 .9rem var(--f-texte); border:0; cursor:pointer}
.panier-palier{margin-top:1rem; color:var(--etang); font-weight:500; min-height:1.5em}
.panier-palier.alerte{color:var(--salin-fonce)}
.case{display:flex; gap:.7rem; align-items:flex-start; font-weight:400!important; line-height:1.45; cursor:pointer}
.case input{width:22px; height:22px; min-height:0; flex:none; margin-top:.1rem; accent-color:var(--pin); padding:0}
.case--option{margin-top:1.2rem; padding:1rem 1.1rem; border:1px solid var(--trait); border-radius:12px; background:var(--surface)}
.commande{margin-top:2.4rem}
.commande .titre-bloc{margin:1rem 0 -.2rem}
.panier-cote{position:sticky; top:calc(var(--hh) + 20px)}
.panier-resume{padding:clamp(20px, 2.4vw, 28px); border-radius:18px; background:var(--surface); border:1px solid var(--trait)}
.resume{display:grid; gap:.55rem; margin:0}
.resume div{display:flex; justify-content:space-between; gap:1rem; font-variant-numeric:tabular-nums}
.resume dt{color:var(--gris)}
.resume dd{margin:0; font-weight:600; color:var(--encre); text-align:right}
.resume .resume-total{margin-top:.4rem; padding-top:.8rem; border-top:1px solid var(--trait)}
.resume .resume-total dt,.resume .resume-total dd{font:400 1.5rem/1.2 var(--f-titre); color:var(--pin)}
.resume .resume-payer{margin-top:.3rem; padding:.7rem .8rem; border-radius:10px; background:var(--sauge)}
.resume .resume-payer dt{color:var(--pin); font-weight:600}
.resume .resume-payer dd{color:var(--pin); font-size:1.1rem}
.panier-payer{width:100%; margin-top:1.2rem}
.panier-payer:disabled{opacity:.6; cursor:progress}
.panier-etat{margin-top:.7rem; color:var(--erreur); font-weight:500}
.panier-etat:empty{display:none}
.rassure--panier{margin-top:1.2rem; font-size:.9rem; color:var(--gris)}
.panier-repli{margin-top:2rem; max-width:44rem}
@media (max-width: 999px){
  .panier-grille{grid-template-columns:minmax(0,1fr)}
  .panier-cote{position:static}
}
@media (max-width: 599px){
  .ligne-panier{grid-template-columns:84px minmax(0,1fr) auto; grid-template-areas:"img texte texte" "img quantite montant" ". retirer retirer"; gap:.5rem .9rem}
  .ligne-panier img{width:84px; height:63px}
  .lp-nom{font-size:1.2rem}
}

/* Commande confirmée */
.conf-detail{padding:1.2rem 1.4rem; border-radius:16px; background:var(--surface); border:1px solid var(--trait); max-width:34rem}
.conf-detail .puces{margin:.6rem 0 1rem}
.conf-num{font-size:1.05rem}
.conf-contact{margin-top:clamp(36px, 4vw, 56px); color:var(--gris)}
.confirmation .btn{margin-top:1.2rem}
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Blog */
.blog-liste{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px)}
.blog-liste--deux{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:60rem}
.blog-carte a{display:grid; gap:1rem; height:100%; align-content:start; color:inherit; text-decoration:none}
.blog-carte-img{width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; border-radius:16px; background:var(--sauge); transition:transform .4s}
.blog-carte a:hover .blog-carte-img{transform:scale(1.02)}
.blog-carte-texte{display:grid; gap:.5rem; align-content:start}
.blog-carte time{color:var(--gris); font-size:.9rem}
.blog-carte-titre{font:400 1.55rem/1.15 var(--f-titre); color:var(--pin); text-wrap:balance}
.blog-carte-extrait{color:var(--gris)}
.blog-carte .lien-fort{margin-top:.3rem; justify-self:start}
.blog-flux{margin-top:2.4rem; font-size:.95rem}
@media (max-width: 999px){ .blog-liste{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 639px){ .blog-liste,.blog-liste--deux{grid-template-columns:minmax(0,1fr)} }
.article-in{max-width:46rem}
.article-meta{color:var(--gris); font-size:.95rem; margin-bottom:1rem}
.article-titre{font-size:clamp(2.3rem, 1.6rem + 3vw, 3.9rem)}
.article-chapo{margin-top:1.2rem; font-size:1.22rem; line-height:1.5; color:var(--encre)}
.article-visuel{margin:clamp(28px, 4vw, 48px) 0}
.article-img{width:100%; height:auto; border-radius:18px; background:var(--sauge)}
.article-corps{font-size:1.1rem; line-height:1.75}
.article-corps > * + *{margin-top:1.1rem}
.article-corps h2{font:400 clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem)/1.15 var(--f-titre); color:var(--pin); margin-top:2.6rem}
.article-corps h3{margin-top:1.8rem}
.article-corps ul,.article-corps ol{padding-left:1.3rem}
.article-corps li + li{margin-top:.4rem}
.article-corps li::marker{color:var(--etang)}
.article-corps strong{color:var(--pin)}
.article-corps .table-defile{margin-top:1.4rem}
.article-corps table{font-size:.98rem; line-height:1.45}
.article-appel{margin-top:clamp(40px, 5vw, 64px); padding:clamp(22px, 3vw, 32px); border-radius:18px; background:var(--sauge)}
.article-appel-titre{font:400 1.6rem/1.2 var(--f-titre); color:var(--pin)}
.article-appel p + p{margin-top:.6rem; color:var(--gris)}
.article-appel .actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.2rem}