/* Tabulae Vitae — boutique de planches naturalistes.
   Mise en page : un cabinet de planches façon grande boutique d'affiches (bandeau, méga-menus, grilles de cartes),
   habillé comme une étiquette de spécimen : Bodoni pour les noms, machine à écrire pour les références. */
:root{
  --papier:#FBFAF7;      /* fond de page */
  --tuile:#F2EEE7;       /* fond des cartes produit */
  --tuile-2:#E9E3D8;
  --encre:#221A2C;       /* texte */
  --encre-2:#4A4558;
  --doux:#77708A;        /* texte secondaire */
  --trait:#E3DDD2;
  --nuit:#332244;        /* violet du logo : bandeau, pied de page */
  --nuit-2:#46335C;
  --sur-nuit:#F4EFE3;
  --or:#8F7A3A;          /* or du logo, assombri pour rester lisible sur fond clair */
  --or-clair:#CCBC74;    /* or exact du logo, sur fond violet */
  --promo:#7A3E2E;       /* prix, pastilles */
  --ok:#2F6B45;
  --voile:rgba(20,16,32,.55);
  --ombre:0 18px 40px -24px rgba(29,26,40,.45);
  --f-titre:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --f-texte:"Jost","Futura","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-logo:"Cinzel","Trajan Pro",var(--f-titre);
  --f-mach:"Courier Prime","Courier New",ui-monospace,monospace;
  --large:1440px;
  --marge:clamp(16px,3.2vw,48px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font:16px/1.6 var(--f-texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.enveloppe{max-width:var(--large);margin:0 auto;padding-inline:var(--marge)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mach{font-family:var(--f-mach);letter-spacing:.02em}
.surtitre{font:600 12px/1.3 var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--doux)}
.latin{font-style:italic}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 30px;font:500 13px/1 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--encre);background:var(--encre);color:var(--papier);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:transparent;color:var(--encre)}
.btn.clair{background:var(--papier);color:var(--encre);border-color:var(--papier)}
.btn.clair:hover{background:transparent;color:var(--papier)}
.btn.contour{background:transparent;color:var(--encre)}
.btn.contour:hover{background:var(--encre);color:var(--papier)}
.btn.plein{width:100%}
.lien{font:500 13px var(--f-texte);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}
.lien:hover{color:var(--or)}

/* ---------- bandeau promo ---------- */
.promo{background:var(--nuit);color:var(--or-clair);font:500 12.5px/1 var(--f-texte);letter-spacing:.12em;text-transform:uppercase;overflow:hidden;white-space:nowrap}
.promo-piste{display:flex;width:max-content;animation:defile 38s linear infinite}
.promo:hover .promo-piste{animation-play-state:paused}
.promo span{display:inline-flex;align-items:center;gap:14px;padding:12px 28px}
.promo span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--or);opacity:.7;margin-left:28px}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- en-tête ---------- */
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--papier);border-bottom:1px solid var(--trait)}
.entete-haut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:14px}
.logo{display:flex;justify-content:center;line-height:1}
.logo-texte{display:flex;flex-direction:column;align-items:center;text-align:center}
.embleme{position:relative;width:70px;aspect-ratio:1.75;flex:none;border-radius:50%;background:var(--nuit)}
.embleme::after{content:"";position:absolute;inset:14% 12%;background:var(--or-clair);-webkit-mask:url(images/logo-embleme.png) center/contain no-repeat;mask:url(images/logo-embleme.png) center/contain no-repeat}
.logo b{white-space:nowrap;font:600 clamp(20px,2.4vw,30px)/1 var(--f-logo);letter-spacing:.22em;padding-left:.22em;text-transform:uppercase;color:var(--nuit)}
.logo small{font:400 10.5px/1 var(--f-mach);letter-spacing:.22em;text-transform:uppercase;color:var(--doux);margin-top:7px}
.logo-complet{display:block;width:min(260px,100%);aspect-ratio:720/440;background:var(--or-clair);-webkit-mask:url(images/logo-complet.png?v=3) center/contain no-repeat;mask:url(images/logo-complet.png?v=3) center/contain no-repeat}
.outils{display:flex;justify-content:flex-end;gap:6px}
.outils-g{display:flex;gap:6px}
.icone{position:relative;width:42px;height:42px;display:inline-grid;place-items:center;border-radius:50%;transition:background .2s}
.icone:hover{background:var(--tuile)}
.icone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.pastille{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--promo);color:#fff;font:600 10.5px/17px var(--f-texte);text-align:center}
.pastille:empty{display:none}
.burger{display:none}

.nav{display:flex;justify-content:center;gap:clamp(14px,2.4vw,36px);padding-bottom:12px}
.nav > li{position:static}
.nav-lien{display:inline-flex;align-items:center;gap:6px;padding:6px 2px;font:500 14px var(--f-texte);letter-spacing:.06em;border-bottom:1px solid transparent}
.nav-lien:hover,.nav-lien[aria-expanded="true"],.nav-lien[aria-current="page"]{border-bottom-color:var(--encre)}
.nav-lien svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6}
.nav-lien.accent{color:var(--promo)}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--trait);box-shadow:0 30px 40px -30px rgba(0,0,0,.25);padding-block:32px 36px}
.mega-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px}
.mega-col h3{font:500 12px var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--doux);margin-bottom:14px}
.mega-col li a{display:block;padding:5px 0;font-size:15px}
.mega-col li a:hover{color:var(--or)}
.mega-vignette{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center}
.mega-rond{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--tuile);box-shadow:0 0 0 1px var(--trait);transition:box-shadow .3s}
.mega-vignette:hover .mega-rond{box-shadow:0 0 0 1px var(--or-clair)}
.mega-vignette b{display:block;font:500 16px/1.2 var(--f-titre)}
.mega-vignette small{color:var(--doux);font-size:13px}
.mega-couleurs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.pastilles{display:flex;flex-direction:column;gap:12px}
.pastilles a{display:flex;align-items:center;gap:14px;font-size:15px}
.pastilles a:hover{color:var(--or)}
.rond{width:34px;height:34px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

/* ---------- héros ---------- */
.heros{display:grid;grid-template-columns:1.25fr 1fr;gap:4px}
.heros-pan{position:relative;overflow:hidden;min-height:clamp(420px,46vw,680px);background:var(--tuile)}
.heros-pan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.heros-pan:hover img{transform:scale(1.03)}
.heros-pan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(18,14,30,.35) 55%,rgba(18,14,30,.82) 100%);pointer-events:none}
.heros-pan.second::after{background:linear-gradient(180deg,transparent 70%,rgba(18,14,30,.35))}
.heros-texte{text-shadow:0 1px 18px rgba(10,8,20,.45);position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:clamp(24px,4vw,56px);z-index:2;color:#FBF7EE;display:flex;flex-direction:column;gap:14px;max-width:600px}
.heros-texte .surtitre{color:#F3E6BC;font-weight:600;font-size:13px}
.heros-texte h1{font:500 clamp(36px,5vw,68px)/1.02 var(--f-titre);letter-spacing:-.01em;text-wrap:balance}
.heros-texte h1 em{font-style:italic}
.heros-texte p{font-size:17px;max-width:46ch;color:#EDE6D6}
.heros-texte .btn{align-self:flex-start;margin-top:8px}
.puce{white-space:nowrap;flex-wrap:wrap;max-width:calc(100% - 36px);position:absolute;left:18px;bottom:18px;z-index:2;background:var(--papier);color:var(--encre);padding:10px 16px;font:500 13px var(--f-texte);letter-spacing:.06em;display:flex;gap:10px;align-items:center}
.puce i{font:400 12px var(--f-mach);color:var(--doux);font-style:normal}

/* ---------- réassurance ---------- */
.gages{background:var(--nuit);color:var(--sur-nuit)}
.gages ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:30px}
.gages li{display:flex;align-items:center;gap:16px;min-width:0}
.picto{width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--or-clair) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or-clair) 35%,transparent)}
.picto svg{width:30px;height:30px;fill:none;stroke:var(--or-clair);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.picto .fond{fill:var(--or-clair);fill-opacity:.18;stroke:none}
.picto .plein{fill:var(--or-clair);stroke:none}
.gages b{display:block;font:600 15px/1.3 var(--f-texte);color:var(--sur-nuit)}
.gages small{display:block;margin-top:2px;font:400 13.5px/1.4 var(--f-texte);color:var(--or-clair)}

/* ---------- sections ---------- */
.section{padding-block:clamp(44px,5.5vw,80px)}
.section + .section{padding-top:0}
.section-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,36px)}
.section-tete h2{font:500 clamp(30px,3.6vw,46px)/1.08 var(--f-titre);text-wrap:balance}
.section-tete p{color:var(--encre-2);max-width:56ch;margin-top:10px}

/* collections en ronds */
.ronds{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.ronds a{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ronds figure{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--tuile);box-shadow:0 0 0 1px var(--trait)}
.ronds img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ronds a:hover img{transform:scale(1.08)}
.ronds b{font:500 13px/1.25 var(--f-texte);letter-spacing:.14em;text-transform:uppercase}
.ronds small{display:block;font:400 12px var(--f-mach);color:var(--doux);letter-spacing:.04em;margin-top:3px;text-transform:none}

/* ---------- cartes produit ---------- */
.grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px) clamp(12px,1.4vw,20px)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 20px) / 4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail-bloc{position:relative}
.fleche{position:absolute;top:38%;z-index:3;width:48px;height:48px;border-radius:50%;background:var(--papier);box-shadow:var(--ombre);display:grid;place-items:center;transition:opacity .2s}
.fleche svg{width:18px;height:18px;stroke:var(--encre);fill:none;stroke-width:1.6}
.fleche.g{left:-18px}.fleche.d{right:-18px}
.fleche[disabled]{opacity:0;pointer-events:none}

.carte{display:flex;flex-direction:column;gap:12px;min-width:0}
.carte-visuel{position:relative}
.carte-img{position:relative;display:block;aspect-ratio:4/5;background:var(--tuile);overflow:hidden}
.carte-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .8s}
.carte-img .alt{opacity:0}
.carte:hover .carte-img .alt{opacity:1}
.carte:hover .carte-img img:first-child{transform:scale(1.03)}
.coeur{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--papier) 88%,transparent);display:grid;place-items:center}
.coeur svg{width:19px;height:19px;fill:none;stroke:var(--encre);stroke-width:1.5}
.coeur[aria-pressed="true"] svg{fill:var(--promo);stroke:var(--promo)}
.etiq{position:absolute;top:12px;left:12px;z-index:2;background:var(--papier);color:var(--encre);font:500 11px/1 var(--f-texte);letter-spacing:.12em;text-transform:uppercase;padding:7px 9px}
.etiq.nuit{background:var(--nuit);color:var(--or-clair)}
.ajout{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;min-height:44px;background:var(--encre);color:var(--papier);font:500 12px var(--f-texte);letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.carte:hover .ajout,.ajout:focus-visible{opacity:1;transform:none}
.carte-txt{display:flex;flex-direction:column;gap:3px}
.carte-serie{font:500 11px/1.3 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.carte-nom{font:500 19px/1.2 var(--f-titre)}
.carte-nom:hover{color:var(--or)}
.carte-prix{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.carte-prix span:last-child{font:400 12px var(--f-mach);color:var(--doux);align-self:center}

/* ---------- tuiles éditoriales ---------- */
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.tuile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--tuile);display:block}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.tuile:hover img{transform:scale(1.04)}
.tuile-leg{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tuile-leg span{background:var(--papier);color:var(--encre);padding:10px 16px;font:500 14px var(--f-texte);letter-spacing:.06em}
.tuile-leg small{background:var(--nuit);color:var(--or-clair);padding:6px 10px;font:400 12px var(--f-mach);letter-spacing:.06em}

/* ---------- recherche par couleur ---------- */
.couleurs{background:none}
.nuancier{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-bottom:28px}
.nuance{display:flex;flex-direction:column;align-items:center;gap:8px;font:500 12px var(--f-texte);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-2)}
.nuance .rond{width:46px;height:46px;transition:transform .2s,box-shadow .2s}
.nuance:hover .rond{transform:scale(1.08)}
.nuance[aria-pressed="true"] .rond{box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--encre)}
.nuance[aria-pressed="true"]{color:var(--encre)}
.fonds{display:flex;gap:8px;margin-left:auto}
.puce-f{border:1px solid var(--encre-2);padding:9px 16px;font:500 12px var(--f-texte);letter-spacing:.1em;text-transform:uppercase;border-radius:40px}
.puce-f[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.compte{font:400 13px var(--f-mach);color:var(--doux);margin-bottom:16px}

/* ---------- murs composés ---------- */
.murs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mur{display:flex;flex-direction:column;gap:14px;min-width:0}
.scene{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mur)}
.scene::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.28),transparent 60%),linear-gradient(100deg,transparent 55%,rgba(0,0,0,.10) 56%,transparent 80%);pointer-events:none}
.scene .sol{position:absolute;left:0;right:0;bottom:0;height:22%;background:var(--sol)}
.scene .meuble{position:absolute;left:12%;right:12%;bottom:22%;height:7%;background:var(--bois);box-shadow:0 14px 18px -10px rgba(0,0,0,.35)}
.scene .meuble::before,.scene .meuble::after{content:"";position:absolute;bottom:-150%;width:5%;height:150%;background:var(--bois);filter:brightness(.8)}
.scene .meuble::before{left:6%}.scene .meuble::after{right:6%}
.scene .vase{position:absolute;right:20%;bottom:29%;width:9%;aspect-ratio:1/1.6;border-radius:45% 45% 30% 30%;background:var(--vase)}
.scene .brin{position:absolute;right:23.5%;bottom:39%;width:9%;height:13%;border-left:2px solid var(--tige);border-radius:0 0 0 100%;transform:rotate(-8deg);transform-origin:bottom left}
.scene .brin::before,.scene .brin::after{content:"";position:absolute;width:62%;height:26%;background:var(--tige);border-radius:0 100% 0 100%}
.scene .brin::before{left:0;top:18%;transform:rotate(-24deg)}
.scene .brin::after{left:-58%;top:44%;transform:scaleX(-1) rotate(-20deg)}
.cadres{position:absolute;left:7%;right:7%;top:11%;display:grid;grid-template-columns:1fr 1.22fr 1fr;align-items:center;gap:5%}
.cadre{background:var(--cadre);padding:5%;box-shadow:0 16px 22px -12px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.15)}
.cadre > div{background:#F7F2E6;padding:10%}
.cadre img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cadre.chene{--cadre:linear-gradient(135deg,#D4B083,#B58A5A 60%,#C79D6C)}
.cadre.noir{--cadre:#1C1A1F}
.cadre.blanc{--cadre:#F4F1EA}
.mur-leg{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mur-leg h3{font:500 22px/1.2 var(--f-titre)}
.mur-leg p{font-size:14px;color:var(--doux)}
.mur-leg .btn{min-height:42px;padding:0 16px;font-size:11.5px;flex:none}

/* ---------- ambiance ---------- */
.ambiance{position:relative;overflow:hidden;background:var(--tuile)}
.ambiance img{width:100%;height:clamp(300px,34vw,560px);object-fit:cover;object-position:57% 50%}
.ambiance-carte{position:absolute;left:var(--marge);top:50%;transform:translateY(-50%);background:var(--papier);padding:clamp(22px,3vw,40px);max-width:430px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--ombre)}
.ambiance-carte h2{font:500 clamp(26px,2.8vw,36px)/1.1 var(--f-titre)}
.ambiance-carte p{color:var(--encre-2)}
.ambiance-carte .btn{align-self:flex-start}

/* ---------- histoire ---------- */
.histoire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.histoire figure{aspect-ratio:1;overflow:hidden;background:var(--tuile)}
.histoire figure img{width:100%;height:100%;object-fit:cover}
.histoire-txt{display:flex;flex-direction:column;gap:18px;max-width:560px}
.histoire-txt h2{font:500 clamp(30px,3.6vw,48px)/1.08 var(--f-titre);text-wrap:balance}
.histoire-txt p{color:var(--encre-2)}
.fiche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);margin-top:8px}
.fiche div{padding:14px 12px 14px 0;display:flex;flex-direction:column;gap:2px}
.fiche div + div{border-left:1px solid var(--trait);padding-left:14px}
.fiche b{font:500 26px/1.1 var(--f-titre)}
.fiche small{font:400 12px/1.3 var(--f-mach);color:var(--doux)}

/* ---------- avis ---------- */
.avis{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:820px;margin:0 auto}
.etoiles{color:var(--or);letter-spacing:.2em;font-size:18px}
.avis blockquote{margin:0;font:500 clamp(22px,2.6vw,32px)/1.35 var(--f-titre);font-style:italic;text-wrap:balance}
.avis cite{font:400 13px var(--f-mach);color:var(--doux);font-style:normal;letter-spacing:.06em}

/* ---------- lettre ---------- */
.lettre{background:var(--nuit);color:var(--sur-nuit)}
.lettre .enveloppe{display:grid;grid-template-columns:1fr 1fr;gap:24px 60px;align-items:center;padding-block:clamp(44px,5vw,70px)}
.lettre h2{font:500 clamp(26px,3vw,38px)/1.1 var(--f-titre)}
.lettre p{color:var(--or-clair);margin-top:8px;font-size:15px}
.lettre form{display:flex;gap:0;min-width:0}
.lettre input{flex:1;min-width:0;height:54px;padding:0 18px;border:1px solid var(--or);background:transparent;color:var(--sur-nuit)}
.lettre input::placeholder{color:color-mix(in srgb,var(--sur-nuit) 60%,transparent)}
.lettre button{height:54px;padding:0 24px;background:var(--or);color:var(--nuit);font:500 12.5px var(--f-texte);letter-spacing:.14em;text-transform:uppercase}
.lettre-ok{grid-column:2;font:400 14px var(--f-mach);color:var(--or-clair)}

/* ---------- pied ---------- */
.pied{background:var(--nuit);color:var(--sur-nuit);border-top:1px solid var(--nuit-2)}
.pied-grille{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px;padding-block:56px 40px}
.pied p{color:color-mix(in srgb,var(--sur-nuit) 72%,transparent);font-size:14.5px;margin-top:18px;max-width:36ch}
.pied h3{font:500 12px var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair);margin-bottom:16px}
.pied li a{display:block;padding:4px 0;font-size:14.5px;color:color-mix(in srgb,var(--sur-nuit) 85%,transparent)}
.pied li a:hover{color:var(--or-clair)}
.pied-bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--nuit-2);padding-block:20px 28px;font:400 12.5px var(--f-mach);color:color-mix(in srgb,var(--sur-nuit) 60%,transparent)}

/* ---------- tiroirs (panier, menu, recherche) ---------- */
.voile{position:fixed;inset:0;z-index:60;background:var(--voile);opacity:0;pointer-events:none;transition:opacity .3s}
.voile.ouvert{opacity:1;pointer-events:auto}
.tiroir{position:fixed;top:0;bottom:0;right:0;z-index:61;width:min(440px,100%);background:var(--papier);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.tiroir.gauche{right:auto;left:0;transform:translateX(-100%)}
.tiroir.ouvert{transform:none}
.tiroir-tete{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--trait)}
.tiroir-tete h2{font:500 24px var(--f-titre)}
.tiroir-corps{flex:1;overflow-y:auto;padding:18px 22px}
.tiroir-pied{border-top:1px solid var(--trait);padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.seuil{display:flex;flex-direction:column;gap:8px;font-size:14px}
.seuil-barre{height:4px;background:var(--tuile-2);overflow:hidden}
.seuil-barre i{display:block;height:100%;background:var(--ok);transition:width .4s}
.ligne{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding-block:14px;border-bottom:1px solid var(--trait);align-items:start}
.ligne img{width:76px;aspect-ratio:4/5;object-fit:cover;background:var(--tuile)}
.ligne b{display:block;font:500 17px/1.2 var(--f-titre)}
.ligne small{display:block;font:400 12px var(--f-mach);color:var(--doux);margin-top:2px}
.qte{display:inline-flex;align-items:center;border:1px solid var(--trait);margin-top:10px}
.qte button{width:32px;height:32px}
.qte span{min-width:26px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px}
.retirer{font-size:12px;color:var(--doux);text-decoration:underline;margin-top:6px}
.total{display:flex;justify-content:space-between;font-size:17px}
.total b{font-weight:500}
.note-maquette{font:400 12.5px/1.45 var(--f-mach);color:var(--doux);background:var(--tuile);padding:10px 12px}
.vide{color:var(--doux);padding:30px 0;text-align:center}
.menu-mobile a{display:block;padding:14px 0;border-bottom:1px solid var(--trait);font:500 20px var(--f-titre)}
.menu-mobile small{display:block;margin:22px 0 6px}

.recherche{position:fixed;left:0;right:0;top:0;z-index:61;background:var(--papier);transform:translateY(-105%);transition:transform .35s;padding-top:env(safe-area-inset-top,0px);box-shadow:var(--ombre)}
.recherche.ouvert{transform:none}
.recherche form{display:flex;gap:12px;align-items:center;padding-block:22px}
.recherche input{flex:1;min-width:0;border:0;border-bottom:1px solid var(--encre);background:transparent;padding:10px 2px;font:500 clamp(22px,3vw,32px) var(--f-titre)}
.recherche input:focus{outline:none;border-bottom-color:var(--or)}
.resultats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding-bottom:26px}
.resultats a{display:flex;flex-direction:column;gap:6px;font:500 14px/1.25 var(--f-titre)}
.resultats img{aspect-ratio:4/5;object-fit:cover;background:var(--tuile)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:70;transform:translate(-50%,20px);background:var(--encre);color:var(--papier);padding:12px 20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.vu{opacity:1;transform:translate(-50%,0)}

/* ---------- boutique ---------- */
.fil{font:400 12.5px var(--f-mach);color:var(--doux);padding-block:22px 6px;display:flex;gap:8px;flex-wrap:wrap}
.fil a:hover{color:var(--encre)}
.cat-tete{padding-block:6px 26px;display:flex;flex-direction:column;gap:10px}
.cat-tete h1{font:500 clamp(34px,4.4vw,56px)/1.05 var(--f-titre)}
.cat-tete p{color:var(--encre-2);max-width:70ch}
.barre{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--h-entete,120px));z-index:20;background:var(--papier);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);display:flex;flex-wrap:wrap;align-items:stretch;margin-bottom:26px}
.filtre{position:relative;display:flex;align-items:center;border-right:1px solid var(--trait)}
.filtre label{position:absolute;left:18px;top:7px;font:500 10px var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--doux);pointer-events:none}
.filtre select{appearance:none;border:0;background:transparent;padding:22px 42px 8px 18px;font-size:15px;cursor:pointer;min-width:150px}
.filtre::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.barre .compte{margin:0 0 0 auto;align-self:center;padding:0 18px}
.puces-actives{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 22px}
.puces-actives button{display:inline-flex;gap:8px;align-items:center;background:var(--tuile);padding:7px 12px;font-size:13px}
.puces-actives button::after{content:"×";font-size:16px;line-height:1}
.puces-actives .tout{background:none;text-decoration:underline}
.puces-actives .tout::after{content:none}
.bandeau-cat{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-bottom:22px}
.bandeau-cat::-webkit-scrollbar{display:none}
.bandeau-cat button{flex:none;display:flex;align-items:center;gap:10px;border:1px solid var(--trait);padding:6px 14px 6px 6px;border-radius:40px;font-size:14px;white-space:nowrap}
.bandeau-cat img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.bandeau-cat button[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* ---------- fiche affiche ---------- */
.produit{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding-block:8px 60px;align-items:start}
.galerie{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px}
.miniatures{display:flex;flex-direction:column;gap:10px}
.miniatures button{aspect-ratio:4/5;overflow:hidden;background:var(--tuile);outline:1px solid transparent;outline-offset:2px}
.miniatures button[aria-current="true"]{outline-color:var(--encre)}
.miniatures img{width:100%;height:100%;object-fit:cover}
.vue{position:relative;aspect-ratio:4/5;background:var(--tuile);overflow:hidden;cursor:zoom-in}
.vue img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vue.zoom img{transform:scale(1.9);cursor:zoom-out}
.achat{position:sticky;top:calc(var(--h-entete,120px) + 24px);display:flex;flex-direction:column;gap:18px}
.achat h1{font:500 clamp(32px,3.6vw,50px)/1.05 var(--f-titre);font-style:italic;text-wrap:balance}
.achat .prix{font-size:22px}
.achat .prix small{font-size:13px;color:var(--doux);margin-left:8px}
.etiquette-spec{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--encre-2);font-family:var(--f-mach)}
.etiquette-spec div{padding:9px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.etiquette-spec div:nth-child(odd){border-right:1px solid var(--encre-2)}
.etiquette-spec div:nth-child(n+3){border-top:1px solid var(--encre-2)}
.etiquette-spec small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.etiquette-spec b{font-weight:700;font-size:14px}
.format{display:flex;flex-direction:column;gap:8px}
.format-choix{display:flex;gap:10px}
.format-choix span{border:1px solid var(--encre);padding:12px 18px;font-size:14px}
.format-choix span small{display:block;font:400 12px var(--f-mach);color:var(--doux)}
.acheter{display:grid;grid-template-columns:auto 1fr auto;gap:10px}
.acheter .qte{margin:0;height:50px}
.acheter .qte button{width:40px;height:48px}
.acheter .icone{width:50px;height:50px;border:1px solid var(--trait);border-radius:0}
.plis{border-top:1px solid var(--trait)}
.plis details{border-bottom:1px solid var(--trait)}
.plis summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:16px 0;font:500 13px var(--f-texte);letter-spacing:.14em;text-transform:uppercase}
.plis summary::-webkit-details-marker{display:none}
.plis summary::after{content:"+";font-size:20px;line-height:1}
.plis details[open] summary::after{content:"−"}
.plis .txt{padding-bottom:18px;color:var(--encre-2);font-size:15px;display:flex;flex-direction:column;gap:10px}
.mini-gages{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13.5px;color:var(--encre-2)}
.mini-gages span{display:flex;gap:8px;align-items:center}
.mini-gages svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--or);stroke-width:1.4}

/* ---------- réactif ---------- */
@media (max-width:1100px){
  .ronds{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
  .rail{grid-auto-columns:calc((100% - 2 * 20px) / 3)}
  .gages ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .resultats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:inline-grid}
  .outils-g .cache-mobile{display:none}
  .heros{grid-template-columns:1fr}
  .heros-pan.second{min-height:300px}
  .tuiles,.murs{grid-template-columns:1fr 1fr}
  .tuiles .tuile:last-child,.murs .mur:last-child{display:none}
  .histoire,.lettre .enveloppe{grid-template-columns:1fr}
  .lettre-ok{grid-column:1}
  .pied-grille{grid-template-columns:1fr 1fr}
  .produit{grid-template-columns:1fr}
  .achat{position:static}
  .galerie{grid-template-columns:1fr}
  .miniatures{flex-direction:row;overflow-x:auto;order:2}
  .miniatures button{flex:0 0 70px}
  .ambiance-carte{position:static;transform:none;max-width:none;box-shadow:none}
  .fleche{display:none}
  .fonds{margin-left:0}
}
@media (max-width:600px){
  .logo b{font-size:17px;letter-spacing:.12em}
  .entete-haut{gap:6px}
  .icone{width:38px;height:38px}
  .outils,.outils-g{gap:0}
  .ronds{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:104px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--marge) * -1);padding-inline:var(--marge);row-gap:0}
  .ronds::-webkit-scrollbar{display:none}
  .ronds b{font-size:11.5px;letter-spacing:.1em}
  .heros-pan{min-height:440px}
  .heros-pan.second{min-height:260px}
  .logo small{display:none}
  .rail{grid-auto-columns:72%}
  .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gages ul{grid-template-columns:1fr;gap:18px;padding-block:26px}
  .embleme{width:52px}
  .logo{gap:10px}
  .tuiles,.murs{grid-template-columns:1fr}
  .tuiles .tuile:last-child,.murs .mur:last-child{display:flex}
  .tuiles .tuile:last-child{display:block}
  .pied-grille{grid-template-columns:1fr}
  .resultats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ajout{opacity:1;transform:none;left:auto;min-height:34px;padding:0 12px;font-size:10.5px;letter-spacing:.1em}
  .carte-nom{font-size:17px}
  .filtre{flex:1 1 50%;border-bottom:1px solid var(--trait)}
  .filtre select{min-width:0;width:100%}
  .barre .compte{padding:10px 18px}
  .fiche b{font-size:21px}
  .nuance .rond{width:40px;height:40px}
  .mur-leg{flex-direction:column}
}
.coeur-fiche[aria-pressed="true"] svg{fill:var(--promo);stroke:var(--promo)}
.mini-paiement{font:400 12px var(--f-mach);color:var(--doux);text-align:center}
.btn[disabled]{opacity:.6;cursor:progress}
.merci{max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;padding-block:clamp(60px,9vw,120px)}
.merci h1{font:500 clamp(34px,4.4vw,54px)/1.08 var(--f-titre);text-wrap:balance}
.merci p{color:var(--encre-2)}
.merci .etiquette-spec{width:100%;text-align:left}

/* ---------- pages légales ---------- */
.legal{max-width:760px;padding-block:8px 90px;display:flex;flex-direction:column;gap:14px}
.legal h1{font:500 clamp(34px,4.4vw,52px)/1.08 var(--f-titre);margin-bottom:4px}
.legal .maj{font:400 13px var(--f-mach);color:var(--doux)}
.legal h2{font:500 clamp(22px,2.4vw,28px)/1.2 var(--f-titre);margin-top:26px}
.legal h3{font:500 15px var(--f-texte);letter-spacing:.04em;margin-top:10px}
.legal p,.legal li{color:var(--encre-2);max-width:68ch}
.legal ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .encadre{background:var(--tuile);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.legal .sommaire{display:flex;flex-wrap:wrap;gap:8px 18px;font:400 13px var(--f-mach)}
.a-completer{background:#FFE58A;color:#3A2E00;padding:0 4px;border-radius:2px;font-style:normal}
.cgv-accord{font-size:12.5px;color:var(--doux);text-align:center}
.cgv-accord a{text-decoration:underline}
.legal [id]{scroll-margin-top:calc(var(--h-entete,120px) + 24px)}

.pied .logo-complet{margin-bottom:6px}

/* ---------- page « Notre histoire » ---------- */
.h-tete{display:grid;grid-template-columns:1.1fr 1fr;min-height:clamp(420px,44vw,620px);background:var(--nuit);color:var(--sur-nuit)}
.h-tete-txt{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:clamp(36px,6vw,88px) var(--marge)}
.h-tete-txt .surtitre{color:var(--or-clair)}
.h-tete-txt h1{font:500 clamp(38px,5vw,66px)/1.04 var(--f-titre);text-wrap:balance}
.h-tete-txt h1 em{color:var(--or-clair)}
.h-tete-txt p{font-size:18px;line-height:1.65;max-width:48ch;color:color-mix(in srgb,var(--sur-nuit) 86%,transparent)}
.h-tete figure{position:relative;overflow:hidden;min-height:320px}
.h-tete figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-tete figcaption{position:absolute;left:18px;bottom:18px;background:var(--papier);color:var(--encre);padding:9px 14px;font:400 12.5px var(--f-mach)}

.h-recit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:center}
.h-recit figure{aspect-ratio:4/5;overflow:hidden;background:var(--tuile)}
.h-recit figure img{width:100%;height:100%;object-fit:cover}
.h-recit-txt{display:flex;flex-direction:column;gap:18px}
.h-recit-txt h2{font:500 clamp(30px,3.6vw,46px)/1.08 var(--f-titre);text-wrap:balance}
.h-recit-txt p{color:var(--encre-2);font-size:17px;line-height:1.7;max-width:60ch}
.h-recit-txt .lien{align-self:flex-start;margin-top:6px}
.lettrine::first-letter{float:left;font:500 4.2em/.8 var(--f-titre);color:var(--nuit);padding:6px 10px 0 0}

.h-citation{background:var(--tuile);text-align:center}
.h-citation .enveloppe{display:flex;flex-direction:column;align-items:center;gap:16px;padding-block:clamp(56px,7vw,96px)}
.h-citation blockquote{margin:0;font:500 clamp(28px,3.8vw,50px)/1.2 var(--f-titre);font-style:italic;max-width:24ch;text-wrap:balance}
.h-citation cite{font:400 13px var(--f-mach);color:var(--doux);font-style:normal;letter-spacing:.08em}
.h-citation .filet{width:64px;height:1px;background:var(--or)}

.chrono{display:flex;flex-direction:column;gap:clamp(40px,6vw,80px);position:relative}
.etape{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.etape:nth-child(even) .etape-img{order:2}
.etape-img{aspect-ratio:3/2;overflow:hidden;background:var(--tuile);position:relative}
.etape-img img{width:100%;height:100%;object-fit:cover}
.etape-img.marque{background:var(--nuit);display:grid;place-items:center}
.etape-img.marque .logo-complet{width:62%}
.etape-txt{display:flex;flex-direction:column;gap:10px}
.annee{font:500 clamp(46px,6vw,80px)/1 var(--f-titre);color:var(--or)}
.etape-txt h3{font:600 13px var(--f-texte);letter-spacing:.18em;text-transform:uppercase}
.etape-txt p{color:var(--encre-2);font-size:16.5px;line-height:1.7;max-width:52ch}

.engagements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.engagement{background:var(--tuile);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.engagement .picto{background:color-mix(in srgb,var(--nuit) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nuit) 22%,transparent)}
.engagement .picto svg{stroke:var(--nuit)}
.engagement .picto .fond,.engagement .picto .plein{fill:var(--nuit)}
.engagement h3{font:500 23px/1.2 var(--f-titre)}
.engagement p{color:var(--encre-2);font-size:15.5px}

.processus{background:var(--nuit);color:var(--sur-nuit)}
.processus .section-tete h2{color:var(--sur-nuit)}
.processus .surtitre{color:var(--or-clair)}
.etapes4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--nuit-2)}
.etapes4 li{padding:28px 24px 8px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.etapes4 li + li{padding-left:24px;border-left:1px solid var(--nuit-2)}
.etapes4 .num{font:500 46px/1 var(--f-titre);color:var(--or-clair)}
.etapes4 h3{font:600 14px var(--f-texte);letter-spacing:.14em;text-transform:uppercase}
.etapes4 p{font-size:15px;color:color-mix(in srgb,var(--sur-nuit) 78%,transparent)}

.h-fin{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:640px;margin:0 auto}
.h-fin h2{font:500 clamp(30px,3.6vw,46px)/1.1 var(--f-titre)}
.h-fin p{color:var(--encre-2);font-size:17px}
.h-fin .boutons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

@media (max-width:860px){
  .h-tete,.h-recit,.etape{grid-template-columns:1fr}
  .etape:nth-child(even) .etape-img{order:0}
  .engagements{grid-template-columns:1fr}
  .etapes4{grid-template-columns:1fr 1fr}
  .etapes4 li:nth-child(3){padding-left:0;border-left:0}
  .etapes4 li:nth-child(n+3){border-top:1px solid var(--nuit-2)}
}
@media (max-width:600px){
  .etapes4{grid-template-columns:1fr}
  .etapes4 li,.etapes4 li + li{padding:22px 0 6px;border-left:0}
  .etapes4 li + li{border-top:1px solid var(--nuit-2)}
}


/* ---------- diaporama du héros (panneau de droite) ---------- */
.diapo .vue-diapo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1s ease,transform 6s linear}
.diapo .vue-diapo.active{opacity:1;transform:scale(1.05)}
.diapo .puce{z-index:3}
.diapo .puce:hover{color:var(--or)}
.diapo-points{position:absolute;top:18px;left:18px;right:18px;z-index:3;display:flex;gap:6px}
.diapo-points button{flex:1;max-width:40px;height:3px;background:rgba(51,34,68,.22);position:relative;overflow:hidden}
.diapo-points button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:#332244;transform-origin:left;animation:progres var(--duree,5s) linear forwards}
.diapo.pause .diapo-points button::after{animation-play-state:paused}
@keyframes progres{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.diapo-nav{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:8px}
.diapo-nav button{width:42px;height:42px;border-radius:50%;background:var(--papier);display:grid;place-items:center;box-shadow:var(--ombre)}
.diapo-nav svg{width:17px;height:17px;stroke:var(--encre);fill:none;stroke-width:1.6}
@media (prefers-reduced-motion: reduce){.diapo .vue-diapo{transition:opacity .2s}.diapo .vue-diapo.active{transform:none}}
@media (max-width:600px){.diapo .puce{bottom:70px}}

/* ---------- page Professionnels ---------- */
.pro-galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pro-galerie a{aspect-ratio:4/5;overflow:hidden;background:var(--tuile);display:block}
.pro-galerie img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pro-galerie a:hover img{transform:scale(1.04)}
.pro-form-bloc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.pro-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--h-entete,120px) + 24px)}
.pro-aside h2{font:500 clamp(30px,3.4vw,44px)/1.08 var(--f-titre);text-wrap:balance}
.pro-aside p{color:var(--encre-2);font-size:16.5px}
.pro-aside .encadre{background:var(--tuile);padding:18px 20px;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--encre-2)}
.pro-aside .encadre b{color:var(--encre)}
.formulaire{background:var(--tuile);padding:clamp(22px,3.5vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.champ{display:flex;flex-direction:column;gap:7px;min-width:0}
.champ.large{grid-column:1/-1}
.champ label,.champ legend{font:600 12px var(--f-texte);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.champ label i{font-style:normal;color:var(--doux);font-weight:400;text-transform:none;letter-spacing:0}
.champ input,.champ select,.champ textarea{width:100%;border:1px solid var(--trait);background:var(--papier);padding:13px 14px;font-size:15.5px;border-radius:0;color:var(--encre)}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--nuit);outline-offset:0;border-color:var(--nuit)}
fieldset.champ{border:0;padding:0;margin:0}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--trait);background:var(--papier);padding:9px 14px;font:400 14.5px var(--f-texte);letter-spacing:0;text-transform:none;color:var(--encre);cursor:pointer}
.choix input{width:auto;accent-color:var(--nuit);margin:0}
.choix label:has(input:checked){border-color:var(--nuit);background:color-mix(in srgb,var(--nuit) 8%,var(--papier))}
.accord{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--encre-2)}
.accord input{margin-top:4px;accent-color:var(--nuit)}
.accord a{text-decoration:underline}
.formulaire .btn{grid-column:1/-1;justify-self:start}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-retour{grid-column:1/-1;font-size:15px;padding:12px 14px;background:var(--papier);border-left:3px solid var(--or)}
.form-merci{background:var(--tuile);padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.form-merci h3{font:500 32px/1.1 var(--f-titre)}
.form-merci p{color:var(--encre-2)}
@media (max-width:860px){
  .pro-galerie{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pro-form-bloc{grid-template-columns:1fr}
  .pro-aside{position:static}
}
@media (max-width:600px){
  .formulaire{grid-template-columns:1fr}
}

.programmes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.programme{background:var(--tuile);display:grid;grid-template-rows:auto 1fr;min-width:0}
.programme figure{aspect-ratio:16/10;overflow:hidden}
.programme figure img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .8s}
.programme:hover figure img{transform:scale(1.03)}
.programme-txt{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;gap:12px}
.programme-txt h3{font:500 clamp(24px,2.4vw,30px)/1.15 var(--f-titre);text-wrap:balance}
.programme-txt p{color:var(--encre-2)}
.programme-txt ul{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.programme-txt li{display:flex;gap:10px;align-items:baseline;font-size:15px}
.programme-txt li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--or);flex:none;transform:translateY(-2px)}
.programme-txt .lien{align-self:flex-start;margin-top:auto}
.pour-qui{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.pour-qui .enveloppe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-block:26px}
.pour-qui ul{display:flex;flex-wrap:wrap;gap:10px}
.pour-qui li{border:1px solid var(--trait);border-radius:40px;padding:7px 14px;font-size:14px;color:var(--encre-2)}
@media (max-width:860px){.programmes{grid-template-columns:1fr}#atouts{grid-template-columns:1fr 1fr!important}}
@media (max-width:600px){#atouts{grid-template-columns:1fr!important}}

/* le panneau du diaporama prend le format exact des photos (4:5) pour montrer les cadres en entier */
.heros{--h-heros:clamp(420px,46vw,680px);grid-template-columns:minmax(0,1fr) auto}
.heros .heros-pan{min-height:0;height:var(--h-heros)}
.heros .diapo{width:calc(var(--h-heros) * .8)}
.diapo .vue-diapo,.diapo .vue-diapo.active{transform-origin:var(--o,50% 50%);transform:scale(var(--z,1));transition:opacity 1s ease}
.heros-pan.diapo::after{display:none}
@media (max-width:860px){
  .heros{grid-template-columns:1fr}
  .heros .heros-pan{height:auto;min-height:440px}
  .heros .diapo{width:auto;height:auto;min-height:0;aspect-ratio:4/5}
}
.diapo .puce{top:34px;bottom:auto}
@media (max-width:600px){.diapo .puce{top:30px;bottom:auto}}

/* photo du héros : pleine définition, sans agrandissement au survol */
.heros-pan:not(.diapo):hover img{transform:none}
.heros-pan:not(.diapo) img{object-position:50% 38%}

/* ---------- en-tête : logo complet au centre (violet et or par défaut, variante « clair » utilisée) ---------- */
.entete.centre{--fond-logo:#332244;--or-logo:#CCBC74;background:var(--fond-logo);border-bottom:1px solid rgba(204,188,116,.28);color:var(--or-logo)}
.entete.centre .entete-haut{padding-block:12px 6px;transition:padding .3s}
.entete.centre .logo-entete{display:block;height:112px;width:auto;aspect-ratio:720/440;background:var(--or-logo);transition:height .3s ease}
.entete.centre.reduit .logo-entete{height:58px}
.entete.centre.reduit .entete-haut{padding-block:8px 2px}
.entete.centre .icone{color:var(--or-logo)}
.entete.centre .icone:hover{background:rgba(204,188,116,.12)}
.entete.centre .pastille{background:var(--or-logo);color:var(--fond-logo)}
.entete.centre .nav{padding-bottom:12px}
.entete.centre .nav-lien{color:var(--or-logo);font-weight:500;letter-spacing:.08em}
.entete.centre .nav-lien:hover,.entete.centre .nav-lien[aria-expanded="true"],.entete.centre .nav-lien[aria-current="page"]{border-bottom-color:var(--or-logo)}
.entete.centre .nav-lien.accent{color:#F1E3B5}
.entete.centre .mega{color:var(--encre)}
.entete.centre ~ * .promo,.promo{border-bottom:1px solid rgba(204,188,116,.18)}
@media (max-width:860px){
  .entete.centre .logo-entete{height:74px}
  .entete.centre.reduit .logo-entete{height:50px}
}
@media (max-width:600px){
  .entete.centre .logo-entete{height:62px}
  .entete.centre.reduit .logo-entete{height:44px}
}

/* photo du héros : planche des Surucuás vue de face, légèrement recadrée sur la planche (photo nette, sans agrandissement fort) */
.heros-pan.photo-heros img{object-position:50% 34%;transform:scale(1.18);transform-origin:50% 40%}
.heros-pan.photo-heros:hover img{transform:scale(1.18)}
@media (max-width:860px){.heros-pan.photo-heros img{transform:scale(1.05)}.heros-pan.photo-heros:hover img{transform:scale(1.05)}}

/* en-tête sur une seule ligne : catégories | logo | catégories + icônes */
.entete.centre .ligne-entete{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,2vw,36px);padding-block:10px;transition:padding .3s}
.entete.centre .cote{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);min-width:0}
.entete.centre .cote.gauche{justify-content:flex-end}
.entete.centre .cote.droite{justify-content:flex-start}
.entete.centre .nav{padding:0;gap:clamp(14px,1.7vw,30px);flex-wrap:nowrap}
.entete.centre .nav-lien{white-space:nowrap;font-size:14px}
.entete.centre .cote.droite .outils{margin-left:auto;gap:2px}
.entete.centre .logo-entete{height:96px}
.entete.centre.reduit .logo-entete{height:56px}
.entete.centre.reduit .ligne-entete{padding-block:6px}
.entete.centre .burger{display:none}
@media (max-width:1180px){
  .entete.centre .nav{display:none}
  .entete.centre .burger{display:inline-grid}
  .entete.centre .cote.gauche{justify-content:flex-start}
  .entete.centre .logo-entete{height:72px}
  .entete.centre.reduit .logo-entete{height:50px}
}
@media (max-width:600px){
  .entete.centre .logo-entete{height:58px}
  .entete.centre.reduit .logo-entete{height:44px}
  .entete.centre .ligne-entete{gap:8px}
}
/* plus d'air autour du logo de l'en-tête */
.entete.centre .ligne-entete{padding-block:24px}
.entete.centre.reduit .ligne-entete{padding-block:10px}
@media (max-width:1180px){.entete.centre .ligne-entete{padding-block:16px}.entete.centre.reduit .ligne-entete{padding-block:8px}}
@media (max-width:600px){.entete.centre .ligne-entete{padding-block:12px}.entete.centre.reduit .ligne-entete{padding-block:6px}}
/* en-tête réduit au défilement : le nom en lettres dorées remplace le logo complet */
.entete.centre .logo{position:relative}
.entete.centre .logo-mot{display:none;white-space:nowrap;font:600 clamp(18px,1.9vw,24px)/1 var(--f-logo);letter-spacing:.22em;padding-left:.22em;text-transform:uppercase;color:var(--or-logo)}
.entete.centre.reduit .logo-entete{display:none}
.entete.centre.reduit .logo-mot{display:block;animation:apparait .3s ease}
.entete.centre.reduit .ligne-entete{padding-block:16px}
@keyframes apparait{from{opacity:0}to{opacity:1}}
@media (max-width:600px){.entete.centre .logo-mot{font-size:16px;letter-spacing:.14em;padding-left:.14em}.entete.centre.reduit .ligne-entete{padding-block:12px}}
/* nom plus discret dans l'en-tête réduit ; pas de recalage automatique du défilement quand l'en-tête change de hauteur */
.entete.centre .logo-mot{font-size:clamp(14px,1.15vw,17px);letter-spacing:.24em;padding-left:.24em}
html,body{overflow-anchor:none}
@media (max-width:600px){.entete.centre .logo-mot{font-size:14px;letter-spacing:.16em;padding-left:.16em}}
/* variante utilisée : fond clair, logo et menu en violet */
.entete.centre.clair{--or-logo:#332244;background:var(--papier);border-bottom:1px solid var(--trait)}
.entete.centre.clair .icone:hover{background:rgba(51,34,68,.08)}
.entete.centre.clair .pastille{background:var(--promo);color:#fff}

/* ---------- soleil : deuxième logo, utilisé en petit ornement ---------- */
.soleil{display:inline-block;flex:none;width:22px;aspect-ratio:1;background:currentColor;-webkit-mask:url(images/soleil.png) center/contain no-repeat;mask:url(images/soleil.png) center/contain no-repeat}
.ornement{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--or);padding-block:4px}
.ornement::before,.ornement::after{content:"";height:1px;width:min(120px,22vw);background:currentColor;opacity:.55}
.ornement .soleil{width:26px}
.section-orne{padding-top:clamp(28px,3.5vw,48px)}
.section-orne + .section{padding-top:clamp(20px,2.4vw,32px)}
/* en-tête réduit : soleil + nom */
.entete.centre .logo-mot{align-items:center;gap:12px}
.entete.centre.reduit .logo-mot{display:flex}
.entete.centre .logo-mot .soleil{width:20px}
@media (max-width:600px){.entete.centre .logo-mot .soleil{width:16px}.entete.centre .logo-mot{gap:8px}}

/* pictogrammes au trait fin, sans remplissage, dans un cercle doré */
.picto{width:54px;height:54px;background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or-clair) 45%,transparent)}
.picto svg{width:28px;height:28px;stroke-width:1.25}
.picto .fond{display:none}
.picto .plein{fill:none;stroke:currentColor}
.picto svg{color:var(--or-clair)}
.engagement .picto{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nuit) 35%,transparent)}
.engagement .picto svg{color:var(--nuit)}
.engagement .picto .plein{fill:none}

/* ---------- boutique : grille avec grandes affiches alternées ---------- */
.grille.dynamique{grid-auto-flow:dense}
.carte.grande{grid-column:1 / span 2;grid-row:span 2;display:flex;flex-direction:column}
.carte.grande.droite{grid-column:3 / span 2}
.carte.grande .carte-visuel{flex:1;min-height:0}
.carte.grande .carte-img{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.carte.grande .carte-nom{font-size:clamp(24px,2.2vw,32px)}
.carte.grande .carte-serie{font-size:12px}
.carte.grande .carte-txt{padding-top:4px;gap:5px}
.carte.grande .resume{color:var(--encre-2);font-size:15px;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1100px){
  .carte.grande.droite{grid-column:2 / span 2}
}
@media (max-width:860px){
    }
@media (max-width:600px){
  .carte.grande,.carte.grande.droite{grid-column:1 / -1;grid-row:span 1}
  .carte.grande .carte-visuel{flex:none}
  .carte.grande .carte-img{position:relative;aspect-ratio:4/5}
}
/* petit écran : en-tête réduit plus compact pour que les 3 icônes tiennent */
@media (max-width:600px){
  .entete.centre .icone{width:34px;height:34px}
  .entete.centre .icone svg{width:20px;height:20px}
  .entete.centre .logo-mot{font-size:12.5px;letter-spacing:.1em;padding-left:.1em;gap:6px}
  .entete.centre .logo-mot .soleil{width:14px}
  .entete.centre .ligne-entete{gap:4px}
}
@media (max-width:400px){.entete.centre .logo-mot .soleil{display:none}.entete.centre .logo-mot{letter-spacing:.08em}}

/* boutique : 3 affiches par ligne, toutes de la même taille */
.grille.trois{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,40px) clamp(16px,2vw,32px)}
.grille.trois .carte-nom{font-size:22px}
@media (max-width:860px){.grille.trois{grid-template-columns:repeat(2,minmax(0,1fr))}.grille.trois .carte-nom{font-size:19px}}
@media (max-width:600px){.grille.trois .carte-nom{font-size:17px}}

/* boutique : en-tête compact, les affiches visibles tout de suite */
body[data-page="boutique"] .fil{padding-block:16px 4px}
.cat-tete{padding-block:2px 16px;gap:6px}
.cat-tete h1{font-size:clamp(28px,3vw,40px)}
.cat-tete p{font-size:15px;line-height:1.55;max-width:80ch;color:var(--doux);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bandeau-cat{gap:8px;margin-bottom:14px;flex-wrap:nowrap}
.bandeau-cat button{padding:4px 13px 4px 4px;font-size:13.5px;gap:8px}
.bandeau-cat img{width:26px;height:26px}
.barre{margin-bottom:22px}
.filtre select{padding:18px 38px 6px 16px;font-size:14px;min-width:130px}
.filtre label{left:16px;top:6px;font-size:9.5px}
.barre .compte{font-size:12.5px}
@media (max-width:600px){
  .cat-tete p{display:none}
  .filtre{flex:1 1 33%}
  .filtre select{padding:18px 26px 6px 12px;font-size:13px}
  .filtre label{left:12px}
  .filtre::after{right:12px}
}
.puces-actives:empty{display:none}

/* pastilles de collections : texte seul, plus lisible */
.bandeau-cat button{padding:8px 16px;font-size:14px;gap:6px;border-radius:40px}
.bandeau-cat button small{font:400 11.5px var(--f-mach);color:var(--doux)}
.bandeau-cat button[aria-pressed="true"] small{color:color-mix(in srgb,var(--papier) 75%,transparent)}
.bandeau-cat button:hover{border-color:var(--encre-2)}

/* diaporama sans étiquette : toute la photo est cliquable */
.diapo .diapo-lien{position:absolute;inset:0;z-index:2}



/* héros : version épurée — dégradé depuis la gauche, titre plus resserré, bouton fléché */
.heros-pan.photo-heros::after{background:linear-gradient(90deg,rgba(20,15,32,.72) 0%,rgba(20,15,32,.5) 32%,rgba(20,15,32,.12) 58%,transparent 72%),linear-gradient(0deg,rgba(20,15,32,.35),transparent 40%)}
.heros-pan.photo-heros .heros-texte{left:clamp(24px,4.2vw,72px);bottom:auto;top:50%;transform:translateY(-50%);max-width:480px;gap:16px;text-shadow:0 1px 14px rgba(10,8,20,.35)}
.heros-pan.photo-heros .heros-texte .surtitre{font-size:12px;letter-spacing:.24em;color:#E9D9A8}
.heros-pan.photo-heros .heros-texte h1{font-size:clamp(34px,3.7vw,56px);line-height:1.04;letter-spacing:-.015em}
.heros-pan.photo-heros .heros-texte p{font-size:16.5px;line-height:1.5;max-width:42ch;color:rgba(251,247,238,.92)}
.heros-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.heros-actions .btn{margin:0;gap:12px;min-height:48px;padding:0 24px}
.heros-actions .btn span{font-size:16px;transition:transform .2s}
.heros-pan:hover .heros-actions .btn span{transform:translateX(4px)}
.lien-clair{color:#FBF7EE;font:500 13px var(--f-texte);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(251,247,238,.6);padding-bottom:3px}
@media (max-width:860px){
  .heros-pan.photo-heros .heros-texte{top:auto;bottom:24px;transform:none}
  .heros-pan.photo-heros::after{background:linear-gradient(180deg,transparent 30%,rgba(20,15,32,.75) 100%)}
}

/* écrans moyens : menu resserré pour que tout tienne sur une ligne */
@media (max-width:1440px){
  .entete.centre .nav{gap:clamp(12px,1.3vw,22px)}
  .entete.centre .nav-lien{font-size:13.5px;letter-spacing:.05em}
  .entete.centre .cote{gap:clamp(10px,1.2vw,20px)}
  .entete.centre .ligne-entete{gap:clamp(12px,1.5vw,28px)}
}
@media (max-width:1320px){
  .entete.centre .nav{display:none}
  .entete.centre .burger{display:inline-grid}
  .entete.centre .cote.gauche{justify-content:flex-start}
}
/* bouton du héros : fin, contour seul, plus discret */
.heros-actions .btn{min-height:40px;padding:0 18px 0 20px;gap:10px;font:500 11.5px/1 var(--f-texte);letter-spacing:.18em;background:transparent;color:#FBF7EE;border:1px solid rgba(251,247,238,.8)}
.heros-actions .btn:hover{background:#FBF7EE;color:var(--encre);border-color:#FBF7EE}
.heros-actions .btn span{font-size:14px}
.heros-actions .lien-clair{font-size:11.5px;letter-spacing:.18em}

/* héros : bloc de texte un peu plus bas */
.heros-pan.photo-heros .heros-texte{top:auto;bottom:clamp(36px,4.5vw,72px);transform:none}
.heros-pan.photo-heros::after{background:linear-gradient(90deg,rgba(20,15,32,.7) 0%,rgba(20,15,32,.45) 32%,rgba(20,15,32,.1) 58%,transparent 72%),linear-gradient(0deg,rgba(20,15,32,.45),transparent 55%)}

/* ronds des collections : image recadrée sur le sujet */
.ronds .rond-img{display:block;width:100%;height:100%;background-repeat:no-repeat;transition:transform .6s}
.ronds a:hover .rond-img{transform:scale(1.07)}

/* idées de murs : photos de mises en scène */
.mur-photo{aspect-ratio:1;overflow:hidden;background:var(--tuile);margin:0}
.mur-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.mur:hover .mur-photo img{transform:scale(1.03)}
.mur-leg p a{text-decoration:underline;text-underline-offset:2px}
.mur-leg p a:hover{color:var(--encre)}

/* ---------- page Idées de murs ---------- */
.idees{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,48px) clamp(20px,2.4vw,36px);padding-bottom:clamp(40px,5vw,72px)}
.idee{display:flex;flex-direction:column;gap:16px;min-width:0}
.idee.large{grid-column:1 / -1}
.idee-photo{margin:0;aspect-ratio:1;overflow:hidden;background:var(--tuile)}
.idee.large .idee-photo{aspect-ratio:16/8}
.idee-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.idee:hover .idee-photo img{transform:scale(1.02)}
.idee-txt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:start}
.idee-txt h2{font:500 clamp(24px,2.3vw,30px)/1.15 var(--f-titre);grid-column:1}
.idee-txt p{color:var(--encre-2);font-size:15.5px;grid-column:1}
.idee-txt .btn{grid-column:2;grid-row:1 / span 2;min-height:44px;padding:0 20px;font-size:12px;align-self:center}
.idee-affiches{display:flex;flex-wrap:wrap;gap:10px 22px}
.idee-affiches a{display:flex;align-items:center;gap:12px;min-width:0}
.idee-affiches img{width:52px;aspect-ratio:4/5;object-fit:cover;background:var(--tuile)}
.idee-affiches b{display:block;font:500 16px/1.2 var(--f-titre)}
.idee-affiches small{font:400 12px var(--f-mach);color:var(--doux)}
.idee-affiches a:hover b{color:var(--or)}
.conseils{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:1px solid var(--trait);padding-top:clamp(28px,3vw,44px)}
.conseil{display:flex;flex-direction:column;gap:10px}
.conseil .picto{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nuit) 35%,transparent)}
.conseil .picto svg{color:var(--nuit);stroke:var(--nuit)}
.conseil h3{font:500 21px/1.2 var(--f-titre)}
.conseil p{color:var(--encre-2);font-size:15px}
@media (max-width:860px){
  .idees{grid-template-columns:1fr}
  .idee.large .idee-photo{aspect-ratio:1}
  .conseils{grid-template-columns:1fr}
}
@media (max-width:600px){
  .idee-txt{grid-template-columns:1fr}
  .idee-txt .btn{grid-column:1;grid-row:auto;justify-self:start}
}

/* diaporama dans l'ouverture des pages Histoire, Professionnels, Idées de murs */
.h-tete .diapo{position:relative;overflow:hidden;min-height:clamp(340px,40vw,620px);background:var(--tuile);margin:0}
.h-tete .diapo .diapo-points{left:18px;right:auto}
@media (max-width:860px){.h-tete .diapo{min-height:0;aspect-ratio:1}}

/* diaporamas : une seule commande, fine barre segmentée en bas (cliquable), sans flèches */
.diapo .diapo-nav{display:none}
.diapo .diapo-points{top:auto;bottom:14px;left:22px;right:22px;gap:6px;max-width:none}
.diapo .diapo-points button{flex:1;max-width:none;height:16px;background:none;position:relative;overflow:visible}
.diapo .diapo-points button::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;border-radius:2px;background:rgba(51,34,68,.2);box-shadow:0 0 0 .5px rgba(255,255,255,.35)}
.diapo .diapo-points button[aria-current="true"]::after{top:7px;bottom:auto;height:2px;border-radius:2px;inset:auto 0 auto 0;background:#332244}
.diapo .diapo-points button:hover::before{background:rgba(51,34,68,.38)}
.h-tete .diapo .diapo-points{left:22px;right:22px}

/* diaporamas : petits soleils (2e logo) à la place des traits pour suivre l'avancement */
.diapo .diapo-points,.h-tete .diapo .diapo-points{left:0;right:0;bottom:14px;justify-content:center;gap:8px}
.diapo .diapo-points button{flex:none;width:24px;height:24px;filter:drop-shadow(0 0 3px rgba(255,255,255,.75))}
.diapo .diapo-points button::before{inset:4px;top:4px;height:auto;border-radius:0;box-shadow:none;background:#332244;opacity:.32;-webkit-mask:url(images/soleil.png) center/contain no-repeat;mask:url(images/soleil.png) center/contain no-repeat;transition:opacity .3s,transform .3s}
.diapo .diapo-points button:hover::before{background:#332244;opacity:.6}
.diapo .diapo-points button[aria-current="true"]::before{opacity:1;transform:scale(1.3);animation:soleil-tourne var(--duree,5s) linear forwards}
.diapo .diapo-points button[aria-current="true"]::after{display:none}
.diapo.pause .diapo-points button::before{animation-play-state:paused}
@keyframes soleil-tourne{from{transform:scale(1.3) rotate(0deg)}to{transform:scale(1.3) rotate(90deg)}}
@media (prefers-reduced-motion: reduce){.diapo .diapo-points button[aria-current="true"]::before{animation:none}}
.diapo .diapo-points button{width:30px;height:30px}
.diapo .diapo-points button::before{inset:5px}
.diapo .diapo-points{gap:6px;bottom:12px}

/* ouverture « pleine image » (Histoire, Professionnels, Idées de murs) : diaporama sur toute la largeur, texte par-dessus comme l'accueil */
.h-tete.plein{position:relative;display:block;background:var(--tuile);min-height:0}
.h-tete.plein #diapo-page{position:relative;width:100%;height:clamp(460px,46vw,700px);min-height:0}
.h-tete.plein #diapo-page::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(20,15,32,.72) 0%,rgba(20,15,32,.45) 30%,rgba(20,15,32,.08) 55%,transparent 68%),linear-gradient(0deg,rgba(20,15,32,.45),transparent 50%)}
.h-tete.plein .h-tete-txt{position:absolute;z-index:4;left:clamp(24px,4.2vw,72px);bottom:clamp(36px,4.5vw,72px);max-width:520px;padding:0;gap:14px;color:#FBF7EE;text-shadow:0 1px 14px rgba(10,8,20,.35);pointer-events:none}
.h-tete.plein .h-tete-txt a{pointer-events:auto}
.h-tete.plein .h-tete-txt .surtitre{color:#E9D9A8;font-size:12px;letter-spacing:.24em}
.h-tete.plein .h-tete-txt h1{font-size:clamp(34px,3.7vw,56px);line-height:1.04;color:#FBF7EE}
.h-tete.plein .h-tete-txt h1 em{color:#F1E3B5}
.h-tete.plein .h-tete-txt p{font-size:16.5px;line-height:1.55;max-width:44ch;color:rgba(251,247,238,.92)}
.h-tete.plein .diapo .diapo-points{z-index:5}
@media (max-width:860px){
  .h-tete.plein #diapo-page{height:auto;aspect-ratio:4/5}
  .h-tete.plein #diapo-page::after{background:linear-gradient(180deg,transparent 35%,rgba(20,15,32,.78) 100%)}
  .h-tete.plein .h-tete-txt{left:20px;right:20px;bottom:52px}
  .h-tete.plein .h-tete-txt p{font-size:15px}
}

/* diaporama des pages : chaque image dans un calque (fond flou possible) */
.diapo div.vue-diapo{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;overflow:hidden}
.diapo div.vue-diapo.active{opacity:1}
.diapo div.vue-diapo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ouverture pleine largeur : l'affiche entière à droite, la même photo floutée en fond derrière le texte */
.h-tete.plein div.vue-diapo::before{content:"";position:absolute;inset:-40px;background:var(--fond) center/cover no-repeat;filter:blur(30px) saturate(1.05) brightness(.95);transform:scale(1.08)}
.h-tete.plein div.vue-diapo img{object-fit:contain;object-position:100% 50%!important;left:auto;right:0;width:min(100%,calc(var(--h-page,700px) * 1));}
.h-tete.plein #diapo-page{--h-page:clamp(460px,46vw,700px)}
.h-tete.plein div.vue-diapo img{width:var(--h-page);height:100%}
@media (max-width:860px){
  .h-tete.plein div.vue-diapo img{width:100%;object-position:50% 30%!important}
}
.h-tete.plein div.vue-diapo img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
@media (max-width:860px){.h-tete.plein div.vue-diapo img{-webkit-mask-image:none;mask-image:none}}

/* fondu progressif entre la photo nette et le fond flou (plus de bord marqué) */
.h-tete.plein div.vue-diapo img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 8%,rgba(0,0,0,.25) 16%,rgba(0,0,0,.5) 26%,rgba(0,0,0,.78) 36%,#000 48%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 8%,rgba(0,0,0,.25) 16%,rgba(0,0,0,.5) 26%,rgba(0,0,0,.78) 36%,#000 48%)}
.h-tete.plein div.vue-diapo::before{filter:blur(40px) saturate(1.05) brightness(.95)}
/* photos panoramiques : pleine largeur, sans fond flou */
.h-tete.plein div.vue-diapo.couvre::before{display:none}
.h-tete.plein div.vue-diapo.couvre img{left:0;right:0;width:100%;object-fit:cover;object-position:50% 50%!important;-webkit-mask-image:none;mask-image:none}
@media (max-width:860px){.h-tete.plein div.vue-diapo img{-webkit-mask-image:none;mask-image:none}}

/* diaporama des pages : la photo prend ~70 % de la largeur, le flou reste sur le bord gauche derrière le texte */
.h-tete.plein div.vue-diapo:not(.couvre) img{left:auto;right:0;width:70%;height:100%;object-fit:cover;object-position:var(--p,50% 50%)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 7%,rgba(0,0,0,.55) 15%,rgba(0,0,0,.85) 23%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 7%,rgba(0,0,0,.55) 15%,rgba(0,0,0,.85) 23%,#000 30%)}
@media (max-width:860px){.h-tete.plein div.vue-diapo:not(.couvre) img{width:100%;-webkit-mask-image:none;mask-image:none}}

/* diaporamas : cercles blancs à contour fin (remplacent les soleils) */
.diapo .diapo-points,.h-tete .diapo .diapo-points{gap:4px;bottom:14px}
.diapo .diapo-points button{width:20px;height:20px;filter:none}
.diapo .diapo-points button::before{inset:5px;top:5px;-webkit-mask:none;mask:none;background:transparent;border:1px solid rgba(255,255,255,.95);border-radius:50%;opacity:1;box-shadow:0 0 4px rgba(0,0,0,.25);transform:none;animation:none;transition:background .3s,transform .3s}
.diapo .diapo-points button:hover::before{background:rgba(255,255,255,.45);opacity:1}
.diapo .diapo-points button[aria-current="true"]::before{background:#fff;transform:scale(1.15);animation:none}

/* assortiments (lots à prix doux) : carte commune, version « vedette » sur l'accueil */
.lots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.lot{display:flex;flex-direction:column;background:var(--tuile);min-width:0;scroll-margin-top:calc(var(--h-entete,90px) + 20px)}
.lot-photo{position:relative;margin:0;aspect-ratio:3/2;max-width:100%;overflow:hidden;background:var(--tuile-2)}
.lot-photo > img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transition:transform 1s}
.lot:hover .lot-photo > img{transform:scale(1.03)}
.lot-mur{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5%;padding:8% 9%}
.lot-mur img{width:26%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 10px 24px rgba(30,24,44,.18)}
.lot-badge{position:absolute;top:14px;left:14px;background:var(--nuit);color:#fff;font:500 12px/1 var(--f-texte);letter-spacing:.08em;padding:8px 11px}
.lot-txt{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.4vw,32px);flex:1;min-width:0}
.lot-txt h3{font:500 clamp(22px,2vw,27px)/1.15 var(--f-titre);text-wrap:balance}
.lot-txt p{font-size:14.5px;color:var(--encre-2)}
.lot-liste{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-direction:column;gap:9px}
.lot-liste a{display:flex;align-items:center;gap:12px;min-width:0}
.lot-liste img{width:38px;aspect-ratio:4/5;object-fit:cover;background:var(--papier);flex:none}
.lot-liste b{display:block;font:500 15px/1.2 var(--f-titre)}
.lot-liste small{font:400 11.5px var(--f-mach);color:var(--doux)}
.lot-liste a:hover b{color:var(--or)}
.lot-achat{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lot-prix{display:flex;align-items:baseline;gap:10px}
.lot-prix b{font:500 26px/1 var(--f-titre)}
.lot-prix s{font-size:15px;color:var(--doux)}
.lot-achat .btn{min-height:44px;padding:0 20px;font-size:12px}
.lot.vedette{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);margin-bottom:clamp(28px,3.4vw,48px)}
.lot.vedette .lot-photo{aspect-ratio:auto;min-height:clamp(340px,36vw,620px)}
.lot.vedette .lot-photo > img{position:absolute;inset:0}
.lot.vedette .lot-txt{justify-content:center;padding:clamp(24px,3.2vw,52px)}
.lot.vedette .lot-achat{margin-top:6px}
.ligne-lot-img{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:start}
.ligne-lot-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ligne-lot span s{display:block;font-size:12px;color:var(--doux);text-align:right}
@media (max-width:980px){
  .lots{grid-template-columns:1fr 1fr}
  .lot.vedette{grid-template-columns:1fr}
  .lot.vedette .lot-photo{aspect-ratio:3/2}
}
@media (max-width:640px){
  .lots{grid-template-columns:1fr}
}

/* ---------- blog ---------- */
.art-meta{font:400 12.5px var(--f-mach);color:var(--doux);letter-spacing:.02em}
.art-meta a{text-decoration:underline;text-underline-offset:2px}
.art-img{display:block;overflow:hidden;background:var(--tuile)}
.art-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s}
.art-une:hover .art-img img,.art-carte:hover .art-img img{transform:scale(1.03)}
.art-une{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,72px)}
.art-une .art-img{aspect-ratio:16/10}
.art-une-txt{display:flex;flex-direction:column;gap:14px;min-width:0}
.art-une-txt h2{font:500 clamp(28px,3.2vw,44px)/1.08 var(--f-titre);text-wrap:balance}
.art-une-txt p{color:var(--encre-2);font-size:16px;max-width:52ch}
.art-une-txt .lien{align-self:flex-start;margin-top:6px}
.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,3.6vw,52px) clamp(20px,2.4vw,36px);padding-bottom:clamp(56px,7vw,96px)}
.art-carte{display:flex;flex-direction:column;gap:10px;min-width:0}
.art-carte .art-img{aspect-ratio:4/3;margin-bottom:6px}
.art-carte h2{font:500 clamp(21px,1.8vw,25px)/1.18 var(--f-titre);text-wrap:balance}
.art-carte p{color:var(--encre-2);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-carte h2 a:hover,.art-une-txt h2 a:hover{color:var(--or)}
.art-suite .articles{padding-bottom:0}
/* page article */
.art-tete{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-bottom:clamp(28px,3.4vw,44px)}
.art-tete .fil{align-self:stretch;justify-content:flex-start;text-align:left;margin-bottom:clamp(10px,2vw,28px)}
.art-tete h1{font:500 clamp(34px,4.6vw,60px)/1.06 var(--f-titre);max-width:20ch;text-wrap:balance}
.art-chapo{font-size:clamp(16px,1.4vw,19px);color:var(--encre-2);max-width:58ch}
.art-photo{margin:0 auto}
.art-photo img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block;background:var(--tuile)}
.art-corps{max-width:68ch;margin:0 auto;padding:clamp(36px,4.6vw,64px) var(--marge) 0;box-sizing:content-box;font-size:17px;line-height:1.75;color:var(--encre-2)}
.art-corps > * + *{margin-top:1.1em}
.art-corps h2{font:500 clamp(24px,2.4vw,30px)/1.2 var(--f-titre);color:var(--encre);margin-top:1.8em}
.art-corps p:first-child{font-size:1.08em;color:var(--encre)}
.art-corps ul{padding-left:1.2em;display:flex;flex-direction:column;gap:.5em}
.art-corps strong{color:var(--encre);font-weight:500}
.art-corps a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--or-clair);text-underline-offset:3px;text-decoration-thickness:1.5px}
.art-corps a:hover{color:var(--or)}
@media (max-width:980px){
  .art-une{grid-template-columns:1fr}
  .articles{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .articles{grid-template-columns:1fr}
  .art-photo img{aspect-ratio:4/3}
  .art-corps{font-size:16px}
}

/* photo dans le texte d'un article (Unsplash) : plus large que la colonne de texte */
.art-fig{margin:2.2em 0;width:min(900px, calc(100vw - 2 * var(--marge)));position:relative;left:50%;transform:translateX(-50%)}
.art-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--tuile)}
.art-fig figcaption{margin-top:8px;font:400 12px var(--f-mach);color:var(--doux);text-align:right}
.art-fig figcaption a{color:inherit;text-decoration:underline;text-decoration-color:var(--trait)}

/* nuancier de l'accueil : un rond par gamme, dégradé fluide et animé (tonalités réelles des affiches) + grain */
.nuancier{display:flex;flex-direction:column;align-items:stretch;gap:22px;margin-bottom:30px}
.cartes-teintes{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:20px clamp(22px,2.6vw,38px)}
.teinte{display:flex;flex-direction:column;align-items:center;gap:16px;background:none;border:0;padding:0;text-align:center;min-width:0}
.teinte-rond{position:relative;width:32px;height:32px;max-width:100%;flex:none;border-radius:50%;overflow:hidden;isolation:isolate;
  background:var(--t2);box-shadow:0 10px 24px -14px rgba(40,30,55,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.teinte-flux{position:absolute;inset:-40%;filter:blur(7px) saturate(1.08);
  /* grands champs de couleur très fondus : principale, deux voisines, une lumière, et un peu de profondeur */
  background:
    radial-gradient(ellipse 55% 45% at 72% 26%,var(--v3) 0,transparent 70%),
    radial-gradient(ellipse 50% 55% at 26% 34%,var(--v1) 0,transparent 72%),
    radial-gradient(ellipse 60% 50% at 66% 72%,var(--v0) 0,transparent 70%),
    radial-gradient(ellipse 45% 50% at 24% 78%,var(--v2) 0,transparent 72%),
    radial-gradient(ellipse 35% 30% at 88% 92%,var(--t4) 0,transparent 70%),
    linear-gradient(150deg,var(--v1),var(--v0) 55%,var(--v2));
  animation:flux 16s ease-in-out infinite alternate;animation-delay:var(--decalage,0s)}
/* multicolore : une roue avec les teintes principales des 7 autres ronds, chaque couleur ne se fond qu'avec sa voisine */
.teinte.multi .teinte-flux{inset:-25%;filter:blur(5px) saturate(1.1);
  background:conic-gradient(from 0deg at 46% 54%,#A62B28,#D37C32,#D4B533,#809F6D,#436D40,#1F7196,#3D2A46,#D58871,#A62B28);
  animation:roue 24s linear infinite;animation-delay:var(--decalage,0s)}
@keyframes roue{to{transform:rotate(360deg)}}
@keyframes flux{
  0%{transform:rotate(0deg) scale(1) translate(0,0)}
  25%{transform:rotate(90deg) scale(1.18) translate(9%,-7%)}
  50%{transform:rotate(170deg) scale(.94) translate(-9%,6%)}
  75%{transform:rotate(250deg) scale(1.12) translate(6%,9%)}
  100%{transform:rotate(330deg) scale(1.04) translate(-4%,-5%)}}
.teinte:hover .teinte-rond{transform:scale(1.3)}
/* sélection : la goutte grossit simplement un peu */
.teinte[aria-pressed="true"] .teinte-rond{transform:scale(1.45)}
.teinte[aria-pressed="true"] .teinte-nom b{color:var(--encre)}
.teinte-nom{display:flex;flex-direction:column;gap:2px}
.teinte-nom b{font:400 15px/1.2 var(--f-texte);color:var(--encre-2)}
.teinte[aria-pressed="true"] .teinte-nom b{color:var(--encre)}
.teinte-nom small{font:400 11px var(--f-mach);color:var(--doux)}
.nuancier .fonds{display:inline-flex;align-self:flex-start;margin:6px 0 0;gap:0;border:1px solid var(--trait);border-radius:30px;padding:3px;background:#fff}
.nuancier .puce-f{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:24px;padding:8px 16px;background:none;font:500 12px var(--f-texte);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.nuancier .puce-f i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.nuancier .puce-f[aria-pressed="true"]{background:var(--nuit);color:#fff}
@media (prefers-reduced-motion:reduce){ .teinte-flux{animation:none} }

@media (max-width:600px){
  .cartes-teintes{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--marge) * -1);padding:8px var(--marge) 10px;gap:22px}
  .cartes-teintes::-webkit-scrollbar{display:none}
  .teinte{flex:none}
  .teinte-rond{width:30px;height:30px}
}

/* forme des teintes : gouttes de peinture qui se déforment lentement */
.teinte-rond{border-radius:58% 42% 55% 45% / 46% 58% 42% 54%;animation:goutte 9s ease-in-out infinite alternate}
.teinte:nth-child(2n) .teinte-rond{animation-delay:-3s}
.teinte:nth-child(3n) .teinte-rond{animation-delay:-6s}
@keyframes goutte{
  0%{border-radius:58% 42% 55% 45% / 46% 58% 42% 54%}
  50%{border-radius:42% 58% 45% 55% / 58% 44% 56% 42%}
  100%{border-radius:52% 48% 38% 62% / 40% 52% 48% 60%}}
@media (prefers-reduced-motion:reduce){ .teinte-rond{animation:none} }


/* « Chercher par couleur » : slider à 3 affiches visibles (plus grandes) */
@media (min-width:861px){
  #grille-coul .rail{grid-auto-columns:calc((100% - 2 * clamp(16px,2vw,32px)) / 3);gap:clamp(16px,2vw,32px)}
  #grille-coul .carte-nom{font-size:22px}
}

/* en-tête (grand écran) : logo à gauche, menu centré sur toute la largeur de la page, icônes à droite */
@media (min-width:1321px){
  .entete.centre .ligne-entete{grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);column-gap:clamp(14px,1.7vw,30px)}
  .entete.centre .cote{display:contents}
  .entete.centre .logo{grid-column:1;grid-row:1;justify-self:start}
  .entete.centre .nav-g{grid-column:2;grid-row:1}
  .entete.centre .nav-d{grid-column:3;grid-row:1}
  .entete.centre .outils{grid-column:4;grid-row:1;justify-self:end;margin-left:0}
}

.teinte:focus:not(:focus-visible){outline:none}

/* « Chercher par couleur », version allégée : seulement les gouttes et les fonds, qui mènent à la boutique */
.couleurs.legere #compte-coul,.couleurs.legere #grille-coul,.couleurs.legere #voir-coul{display:none}
.couleurs.legere .nuancier{margin-bottom:0}
.couleurs.legere .teinte-rond{transform:none}
.couleurs.legere .teinte:hover .teinte-rond{transform:scale(1.3)}

/* « Chercher par couleur » (grand écran) : titre | gouttes, puis nombre d'affiches | fond crème/nuit */
@media (min-width:1101px){
  .couleurs > .enveloppe{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tete teintes" "compte fonds" "rail rail" "voir voir";column-gap:clamp(24px,4vw,64px)}
  .couleurs > .enveloppe > *{grid-column:1 / -1}
  .couleurs .section-tete{grid-area:tete;margin-bottom:0}
  .couleurs .section-tete p{max-width:46ch}
  .couleurs .nuancier{display:contents}
  .couleurs .cartes-teintes{grid-area:teintes;align-self:end;flex-wrap:nowrap;gap:18px clamp(16px,1.6vw,26px);padding-bottom:4px}
  .couleurs .nuancier .fonds{grid-area:fonds;justify-self:end;align-self:center;margin:0}
  .couleurs #compte-coul{grid-area:compte;align-self:center;margin:0}
  .couleurs .nuancier .fonds,.couleurs #compte-coul{margin-top:clamp(26px,2.8vw,40px);margin-bottom:clamp(18px,2vw,26px)}
  .couleurs #grille-coul{grid-area:rail}
  .couleurs > .enveloppe > div:last-child{grid-area:voir}
}
/* Professionnels : la photo des planches étalées (carrée) s'affiche en entier, sans zoom */
@media (min-width:861px){ .h-tete.plein div.vue-diapo:not(.couvre) img[src*="planches-etalees-tricot"]{width:min(70%,var(--h-page))} }
/* Professionnels : photo du salon (très large) — un peu moins haute et calée à gauche pour que les trois cadres restent à droite du texte */
@media (min-width:861px){
  body:is([data-page="pro"],[data-page="histoire"],[data-page="murs"]) .h-tete.plein #diapo-page{height:clamp(460px,38.5vw,600px);--h-page:clamp(460px,38.5vw,600px)}
  /* même fondu que Notre histoire et Idées de murs : photo à droite, fond flou derrière le texte */
  .h-tete.plein div.vue-diapo:not(.couvre) img[src*="salon-large"]{width:76%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 10%,rgba(0,0,0,.85) 20%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 10%,rgba(0,0,0,.85) 20%,#000 28%)}
}
/* Idées de murs : sur grand écran la photo ne s'élargit plus au-delà de son cadrage (sinon elle se recadre trop) */
@media (min-width:861px){ .h-tete.plein div.vue-diapo:not(.couvre) img:is([src*="coleoptera-novem-buffet"],[src*="duo-bigarrade-pipiras"]){width:min(70%,calc(var(--h-page) * 1.55))} }
@media (min-width:861px){ .h-tete.plein div.vue-diapo:not(.couvre) img[src*="abricot-mains-lin"]{width:min(72%,calc(var(--h-page) * 1.57))} }
/* en-tête : logo calé à gauche et icônes calées à droite, sur la même marge que le texte de la photo d'ouverture */
.entete .ligne-entete.enveloppe{max-width:none;padding-inline:clamp(24px,4.2vw,72px)}
/* menu Couleurs : gouttes de peinture comme sur l'accueil */
.teinte-menu .teinte-rond{width:30px;height:30px}
.teinte-menu .teinte-rond.uni{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 10px 24px -14px rgba(40,30,55,.55)}
.teinte-menu .teinte-rond.roue .teinte-flux{inset:-25%;filter:blur(5px) saturate(1.1);background:conic-gradient(from 0deg at 46% 54%,#A62B28,#D37C32,#D4B533,#809F6D,#436D40,#1F7196,#3D2A46,#D58871,#A62B28);animation:roue 24s linear infinite}
.teinte-menu:hover .teinte-rond{transform:scale(1.25)}
.pastilles .teinte-menu:nth-child(2n) .teinte-rond{animation-delay:-3s}
.pastilles .teinte-menu:nth-child(3n) .teinte-rond{animation-delay:-6s}
/* boutons des mises en scène (page Idées de murs) : même style que les autres boutons du site */
.idee-txt .btn{min-height:40px;padding:0 18px;font:500 11.5px/1 var(--f-texte);letter-spacing:.18em;background:transparent;color:var(--encre);border:1px solid var(--encre)}
.idee-txt .btn:hover{background:var(--encre);color:var(--papier)}

/* ===== Idées de murs : galerie des mises en scène ===== */
.galerie-murs{scroll-margin-top:calc(var(--h-entete,120px) + 12px)}
/* mosaïque sur 6 colonnes : la 1re photo en grand (4 colonnes × 2 rangées), les cinq autres carrées */
.galerie-murs .galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.g-case{position:relative;display:block;overflow:hidden;background:var(--tuile);grid-column:span 2;aspect-ratio:1}
.g-case.g1{grid-column:1 / span 4;grid-row:span 2;aspect-ratio:auto}
.g-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.g-case:hover img{transform:scale(1.04)}
.g-case::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,14,30,.5));opacity:0;transition:opacity .4s}
.g-leg{position:absolute;z-index:1;left:clamp(14px,1.6vw,22px);bottom:clamp(12px,1.4vw,20px);display:flex;align-items:baseline;gap:10px;color:#FBF7EE;font:500 clamp(18px,1.6vw,24px)/1.1 var(--f-titre);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.g-leg small{font:400 11.5px var(--f-mach);letter-spacing:.1em;color:#E9D9A8}
.g-case:hover::after,.g-case:focus-visible::after,.g-case:hover .g-leg,.g-case:focus-visible .g-leg{opacity:1;transform:none}
.g-case:focus-visible{outline:2px solid var(--nuit);outline-offset:3px}
@media (max-width:860px){
  .galerie-murs .galerie{grid-template-columns:1fr 1fr}
  .g-case{grid-column:span 1}
  .g-case.g1{grid-column:1 / -1;grid-row:auto;aspect-ratio:1}
  .g-case::after,.g-leg{opacity:1;transform:none}
  .g-leg{font-size:16px}
}
/* fenêtre d'agrandissement */
.vue-scene{width:min(1180px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);padding:0;border:0;background:var(--papier);color:var(--encre);overflow:auto;box-shadow:0 30px 80px -20px rgba(20,14,30,.5)}
.vue-scene::backdrop{background:rgba(26,18,36,.72)}
.vue-corps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.vue-photo{margin:0;aspect-ratio:1;background:var(--tuile)}
.vue-photo img{width:100%;height:100%;object-fit:cover;display:block}
.vue-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:clamp(28px,4vw,60px)}
.vue-txt .car-num{font:400 13px var(--f-mach);color:var(--or);letter-spacing:.1em}
.vue-txt h3{font:500 clamp(28px,2.8vw,40px)/1.08 var(--f-titre);text-wrap:balance}
.vue-txt p{color:var(--encre-2);font-size:15.5px;line-height:1.6;max-width:40ch}
.vue-txt .idee-affiches{flex-direction:column;gap:10px;margin-top:4px}
.vue-txt .btn{margin-top:8px;min-height:42px;padding:0 20px;font:500 11.5px/1 var(--f-texte);letter-spacing:.18em;background:transparent;color:var(--encre);border:1px solid var(--encre);gap:10px}
.vue-txt .btn:hover{background:var(--encre);color:var(--papier)}
.vue-txt .btn s{color:var(--doux);font-size:.95em;letter-spacing:.06em}
.vue-fermer{position:absolute;z-index:2;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--papier);color:var(--encre);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(20,14,30,.15)}
.vue-fleche{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(251,247,238,.92);color:var(--encre);font-size:17px;cursor:pointer;box-shadow:0 6px 18px rgba(20,14,30,.18)}
.vue-fleche.g{left:12px}
.vue-fleche.d{left:calc(55.5% - 56px)}
@media (max-width:860px){
  .vue-corps{grid-template-columns:1fr}
  .vue-txt{padding:22px 20px 28px}
  .vue-fleche{top:calc(min(100vw - 32px, 1180px) / 2)}
  .vue-fleche.d{left:auto;right:12px}
}
@media (prefers-reduced-motion:reduce){ .g-case img,.g-leg,.g-case::after{transition:none} }
/* panier : ligne de l'offre 3 affiches au choix */
.offre-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;color:var(--encre)}
.offre-ligne b{font-weight:500;color:var(--nuit)}
.offre-reste{display:block;font-size:13px;color:var(--encre-2);margin-top:-2px}
.offre-reste b{font-weight:600;color:var(--encre)}
/* Idées de murs : bloc offre « 3 affiches au choix », photo seule et texte sur le violet du logo */
.offre-trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--nuit);color:#FBF7EE}
.offre-photo{margin:0;aspect-ratio:1;overflow:hidden}
.offre-photo img{width:100%;height:100%;object-fit:cover;display:block}
.offre-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:clamp(28px,5vw,80px)}
.offre-txt .surtitre{color:#E9D9A8}
.offre-txt h2{font:500 clamp(32px,3.4vw,50px)/1.05 var(--f-titre);color:#FBF7EE;text-wrap:balance}
.offre-prix{display:flex;align-items:baseline;gap:14px}
.offre-prix b{font:500 clamp(40px,4vw,58px)/1 var(--f-titre);color:#F1E3B5}
.offre-prix s{font:400 20px var(--f-titre);color:rgba(251,247,238,.6)}
.offre-txt p:not(.offre-prix){color:rgba(251,247,238,.88);font-size:16px;line-height:1.6;max-width:38ch}
.offre-txt .btn{margin-top:6px;min-height:44px;padding:0 20px;gap:10px;font:500 11.5px/1 var(--f-texte);letter-spacing:.18em;background:transparent;color:#FBF7EE;border:1px solid rgba(251,247,238,.85)}
.offre-txt .btn:hover{background:#FBF7EE;color:var(--encre);border-color:#FBF7EE}
@media (max-width:860px){ .offre-trio{grid-template-columns:1fr} .offre-txt{padding:28px 22px 32px} }
/* galerie Idées de murs : le trio du séjour sur toute la largeur, puis les autres photos en grands carrés, deux par ligne */
.galerie-murs .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
.galerie-murs .galerie .g-case{grid-column:span 1;grid-row:auto;aspect-ratio:1}
.galerie-murs .galerie .g-case.g1{grid-column:1 / -1;aspect-ratio:2000/1677}
/* galerie Idées de murs : séjour en grand, puis buffet et entrée côte à côte, puis l'Argemone et le duo côte à côte (carrés) */

/* bannière Idées de murs (abricot) sur grand écran : la photo prend presque toute la largeur, fondu plus court derrière le texte */
@media (min-width:1300px){
  .h-tete.plein div.vue-diapo:not(.couvre) img[src*="abricot-mains-lin"]{width:min(76%,calc(var(--h-page) * 2.2));-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 10%,rgba(0,0,0,.85) 20%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 10%,rgba(0,0,0,.85) 20%,#000 28%)}
}
/* page Contact */
.contact-titre{font:500 clamp(34px,4.2vw,52px)/1.06 var(--f-titre);text-wrap:balance}
.pro-aside .contact-lieu{font:400 12.5px var(--f-mach);color:var(--doux);letter-spacing:.06em}
/* boutique et pages de collection (boutique.html, boutique.html?collection=…) : toute la largeur, avec la marge du logo, et 4 affiches par ligne sur grand écran */
body[data-page="boutique"] main.enveloppe{max-width:none;padding-inline:clamp(16px,4.2vw,72px)}
@media (min-width:1600px){ body[data-page="boutique"] .grille.trois{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Professionnels : les deux formules en grandes rangées, photo et texte côte à côte, en alternance */
.programmes.alterne{grid-template-columns:1fr;gap:clamp(20px,2.4vw,32px)}
.programmes.alterne .programme{grid-template-rows:none;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.programmes.alterne .programme figure{margin:0;aspect-ratio:auto;min-height:clamp(380px,36vw,560px)}
.programmes.alterne .programme:nth-child(even) figure{order:2}
.programmes.alterne .programme-txt{justify-content:center;padding:clamp(28px,4vw,64px)}
.programmes.alterne .programme-txt .lien{margin-top:10px}
@media (max-width:860px){
  .programmes.alterne .programme{grid-template-columns:1fr}
  .programmes.alterne .programme:nth-child(even) figure{order:0}
  .programmes.alterne .programme figure{min-height:0;aspect-ratio:4/3}
}
/* Professionnels : grande photo du bar à vin entre les formules et la liste des métiers */
.pro-bandeau{padding-bottom:clamp(44px,5.5vw,80px)}
.pro-bandeau-photo{position:relative;display:block;overflow:hidden;aspect-ratio:21/10;background:var(--tuile)}
.pro-bandeau-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;transition:transform 1.2s}
.pro-bandeau-photo:hover img{transform:scale(1.02)}
.pro-bandeau-photo .pleine-page-leg{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);background:var(--papier);color:var(--encre);padding:10px 16px;font:500 12px var(--f-texte);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:10px;align-items:center}
@media (max-width:860px){ .pro-bandeau-photo{aspect-ratio:4/3} .pro-bandeau-photo img{object-position:72% 45%} }
/* Professionnels : grand slider des mises en scène, sur toute la largeur, puis les deux formules en deux colonnes */
.pro-slider{position:relative;aspect-ratio:21/9;max-height:78vh;width:100%;overflow:hidden;background:var(--tuile);margin-bottom:clamp(28px,3.4vw,48px)}
.pro-piste img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1.2s ease,transform 6s ease}
.pro-piste img.vue{opacity:1;transform:scale(1)}
.pro-fleche{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(251,247,238,.92);color:var(--encre);font-size:17px;cursor:pointer;box-shadow:0 6px 18px rgba(30,20,45,.18)}
.pro-fleche.g{left:clamp(14px,2vw,28px)}.pro-fleche.d{right:clamp(14px,2vw,28px)}
.pro-points{position:absolute;z-index:2;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:4px}
.pro-points button{width:20px;height:20px;position:relative;background:none;border:0;padding:0;cursor:pointer}
.pro-points button::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.25);transition:background .3s,transform .3s}
.pro-points button[aria-current="true"]::before{background:#fff;transform:scale(1.15)}
@media (max-width:860px){ .pro-slider{aspect-ratio:4/3} .pro-fleche{display:none} }
@media (prefers-reduced-motion:reduce){ .pro-piste img{transition:none;transform:none} }
/* logo en vraie image (au lieu d'un masque CSS qui ne s'affichait pas toujours) */
img.logo-entete{background:none!important;object-fit:contain}
.logo-complet-img{display:block;width:min(260px,100%);height:auto}
.pied .logo-complet-img{margin-bottom:6px}
.etape-img.marque .logo-complet-img{width:62%;height:auto;object-fit:contain}
/* menu : même typo que le texte courant (Jost normale, sans espacement de lettres) */
.entete.centre .nav-lien{font-weight:400;font-size:15px;letter-spacing:.01em}
@media (max-width:1440px){ .entete.centre .nav-lien{font-size:15px;letter-spacing:.01em} }
/* Idées de murs : texte pour les professionnels (boutiques et lieux) avec demande de devis */
.pros-bloc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,5vw,80px);background:var(--tuile);padding:clamp(28px,4.5vw,72px)}
.pros-tete h2{font:500 clamp(30px,3.2vw,44px)/1.08 var(--f-titre);text-wrap:balance;margin-top:8px}
.pros-txt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pros-txt p{color:var(--encre-2);max-width:62ch;line-height:1.65}
.pros-txt p b{color:var(--encre);font-weight:500}
.pros-txt .btn{margin-top:8px;min-height:44px;padding:0 20px;gap:10px;font:500 11.5px/1 var(--f-texte);letter-spacing:.18em;background:transparent;color:var(--encre);border:1px solid var(--encre)}
.pros-txt .btn:hover{background:var(--encre);color:var(--papier)}
@media (max-width:860px){ .pros-bloc{grid-template-columns:1fr} }
/* Notre histoire : photo du récit en format paysage (bureau de bibliothèque) */
.h-recit figure.paysage{aspect-ratio:4/3}
/* Notre histoire : grande photo pleine largeur sous la citation */
.hist-grande{margin:0;width:100%;aspect-ratio:2000/1116;max-height:92vh;overflow:hidden;background:var(--tuile)}
.hist-grande img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
@media (max-width:860px){ .hist-grande{aspect-ratio:4/3} }
/* Notre histoire : la citation tient sur deux lignes sur ordinateur */
@media (min-width:861px){ .h-citation blockquote{max-width:none;font-size:clamp(26px,2.5vw,40px);text-wrap:balance} }
/* Notre histoire : « Découvrez des fragments d'Histoire Naturelle » — texte à gauche, collage d'images à droite, conclusion centrée */
.fragments{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,110px);align-items:center}
.fragments-txt{display:flex;flex-direction:column;gap:20px}
.fragments-txt h2{font:500 clamp(32px,3.8vw,52px)/1.08 var(--f-titre);text-wrap:balance}
.fragments-txt h2 em{font-style:italic;color:var(--nuit)}
.fragments-txt p{color:var(--encre-2);font-size:17px;line-height:1.75;max-width:56ch}
.fragments-engagement{border-left:2px solid var(--or);padding-left:20px;color:var(--encre)!important}
.fragments-engagement span{display:block;font:500 12px var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:6px}
.fragments-collage{position:relative;padding:0 0 clamp(60px,8vw,120px) 0}
.fragments-collage figure{margin:0;overflow:hidden;background:var(--tuile)}
.fragments-collage img{width:100%;height:100%;object-fit:cover;display:block}
.f-grande{width:78%;margin-left:auto!important;aspect-ratio:4/5}
.f-petite{position:absolute;left:0;bottom:0;width:48%;aspect-ratio:1;box-shadow:0 24px 50px -24px rgba(30,20,45,.45);border:8px solid var(--papier)}
.fragments-fin{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-top:clamp(48px,6vw,90px)}
.fragments-fin p{font:500 italic clamp(22px,2.2vw,32px)/1.35 var(--f-titre);color:var(--encre);max-width:34ch;text-wrap:balance}
@media (max-width:860px){
  .fragments{grid-template-columns:1fr}
  .fragments-collage{padding-bottom:56px}
  .f-grande{width:84%}
  .f-petite{width:52%;border-width:6px}
}
/* « fragments d'Histoire Naturelle » : une seule grande photo (le recueil ancien ouvert) */
.fragments-photo{margin:0;aspect-ratio:1;overflow:hidden;background:var(--tuile)}
.fragments-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Notre histoire : texte « À l'origine » posé sur la grande photo de la bibliothèque */
.hist-grande-bloc{position:relative;background:var(--nuit)}
.hist-grande-bloc .hist-grande{position:relative}
.hist-grande-bloc .hist-grande::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,14,30,.9) 0%,rgba(20,14,30,.78) 24%,rgba(20,14,30,.35) 33%,transparent 40%)}
.hist-grande-txt{position:absolute;z-index:1;left:clamp(24px,4.2vw,72px);top:50%;transform:translateY(-50%);width:min(500px,30%);display:flex;flex-direction:column;gap:16px;color:#FBF7EE}
.hist-grande-txt .surtitre{color:#E9D9A8}
.hist-grande-txt h2{font:500 clamp(28px,2.9vw,46px)/1.08 var(--f-titre);color:#FBF7EE;text-wrap:balance}
.hist-grande-txt h2 em{font-style:italic;color:#F1E3B5}
.hist-grande-txt p{color:rgba(251,247,238,.9);font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.7}
.hist-grande-txt .lettrine::first-letter{color:#F1E3B5}
.hist-grande-txt .fragments-engagement{border-left-color:#CCBC74;color:#FBF7EE!important}
.hist-grande-txt .fragments-engagement span{color:#E9D9A8}
/* écran moyen et téléphone : le texte passe sous la photo, sur le violet */
@media (max-width:1180px){
  .hist-grande-bloc .hist-grande::after{display:none}
  .hist-grande-txt{position:static;transform:none;width:auto;max-width:760px;padding:clamp(32px,5vw,56px) var(--marge)}
}
/* texte sur la photo de la bibliothèque : même composition que l'en-tête (paragraphe simple) */
.hist-grande-txt{width:min(520px,32%)}
.hist-grande-txt p{font-size:clamp(15px,1.1vw,16.5px);line-height:1.6;color:rgba(251,247,238,.92)}
/* texte sur la photo de la bibliothèque : encart crème à droite qui déborde sous la photo (différent de l'en-tête) */
@media (min-width:1181px){
  .hist-grande-bloc{background:none;padding-bottom:clamp(120px,10vw,180px)}
  .hist-grande-bloc .hist-grande::after{display:none}
  .hist-grande-txt{top:auto;transform:none;left:auto;right:clamp(24px,4.2vw,72px);bottom:0;width:min(560px,36%);background:var(--papier);color:var(--encre);padding:clamp(28px,3vw,48px);box-shadow:0 30px 60px -30px rgba(30,20,45,.35);gap:14px}
  .hist-grande-txt .surtitre{color:var(--doux)}
  .hist-grande-txt h2{color:var(--encre);font-size:clamp(26px,2.4vw,40px)}
  .hist-grande-txt h2 em{color:var(--nuit)}
  .hist-grande-txt p{color:var(--encre-2)}
}
/* texte « À l'origine » : sous la photo de la bibliothèque, centré (toutes tailles d'écran) */
.hist-grande-bloc{background:none!important;padding-bottom:0!important}
.hist-grande-bloc .hist-grande::after{display:none!important}
.hist-grande-txt{position:static!important;transform:none!important;width:auto!important;max-width:760px;margin:0 auto;padding:clamp(48px,6vw,88px) var(--marge) 0!important;background:none!important;box-shadow:none!important;align-items:center;text-align:center;color:var(--encre)}
.hist-grande-txt .surtitre{color:var(--doux)}
.hist-grande-txt h2{color:var(--encre);font-size:clamp(30px,3.4vw,48px)}
.hist-grande-txt h2 em{color:var(--nuit)}
.hist-grande-txt p{color:var(--encre-2);font-size:17px;line-height:1.75;max-width:62ch}
/* « Nos engagements » (Notre histoire) : bande pleine largeur sur le violet du site (comme le bandeau du haut) */
.eng-bleu{--bleu:var(--nuit);--bleu-2:var(--nuit-2);background:var(--bleu);color:var(--sur-nuit)}
.eng-bleu .surtitre{color:var(--or-clair)}
.eng-bleu .section-tete h2{color:var(--sur-nuit)}
.eng-bleu .section-tete p{color:color-mix(in srgb,var(--sur-nuit) 80%,transparent)}
.eng-bleu .engagement{background:var(--bleu-2)}
.eng-bleu .engagement h3{color:var(--sur-nuit)}
.eng-bleu .engagement p{color:color-mix(in srgb,var(--sur-nuit) 80%,transparent)}
.eng-bleu .engagement .picto{background:color-mix(in srgb,var(--or-clair) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or-clair) 45%,transparent)}
.eng-bleu .engagement .picto svg{stroke:var(--or-clair)}
.eng-bleu .engagement .picto .fond,.eng-bleu .engagement .picto .plein{fill:var(--or-clair)}
/* « Nos engagements » : même design que « Le processus » (colonnes à filets, sans cartes) */
.eng-bleu .engagements{gap:0;border-top:1px solid var(--nuit-2)}
.eng-bleu .engagement{background:none;padding:28px 24px 8px 0;gap:12px;min-width:0}
.eng-bleu .engagement + .engagement{padding-left:24px;border-left:1px solid var(--nuit-2)}
.eng-bleu .engagement .picto{width:auto;height:46px;border-radius:0;background:none;box-shadow:none;place-items:center start}
.eng-bleu .engagement .picto svg{width:40px;height:40px;stroke-width:1.3}
.eng-bleu .engagement h3{font:600 14px var(--f-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--sur-nuit)}
.eng-bleu .engagement p{font-size:15px;color:color-mix(in srgb,var(--sur-nuit) 78%,transparent)}
@media (max-width:860px){
  .eng-bleu .engagement,.eng-bleu .engagement + .engagement{padding:22px 0 6px;border-left:0}
  .eng-bleu .engagement + .engagement{border-top:1px solid var(--nuit-2)}
}
/* « À l'origine » placé entre la citation et la photo : même respiration au-dessus et en dessous */
.hist-origine .hist-grande-txt{padding:clamp(48px,6vw,88px) var(--marge)!important}
/* conclusion « Choisir une affiche… » : même fond gris que la citation, pleine largeur */
.fin-gris{background:var(--tuile)}
.fin-gris .enveloppe{padding-block:clamp(56px,7vw,96px)}
.fin-gris .fragments-fin{margin-top:0}
/* « Rejoignez l'aventure » (Notre histoire) : la phrase « Choisir une affiche… » en titre */
.fin-gris .h-fin{max-width:900px}
.fin-gris .h-fin h2{font-size:clamp(26px,2.8vw,40px);line-height:1.2;text-wrap:balance}
/* fin de Notre histoire : photo à gauche, « Rejoignez l'aventure » à droite, sur le fond gris */
.fin-duo .enveloppe{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center}
.fin-duo-img{margin:0;aspect-ratio:2000/1116;overflow:hidden;background:var(--tuile-2)}
.fin-duo-img img{width:100%;height:100%;object-fit:cover;display:block}
.fin-duo .h-fin{align-items:flex-start;text-align:left;margin:0;max-width:none}
.fin-duo .h-fin h2{font-size:clamp(24px,2.2vw,36px);line-height:1.22}
.fin-duo .h-fin .boutons{justify-content:flex-start}
@media (max-width:860px){ .fin-duo .enveloppe{grid-template-columns:minmax(0,1fr)} }
/* fin de Notre histoire : bloc violet, photo bord à bord à gauche, texte et boutons crème à droite */
.fin-violet-bloc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;background:var(--nuit);color:var(--sur-nuit)}
.fin-violet-img{position:relative;margin:0;width:100%;aspect-ratio:1;align-self:stretch;overflow:hidden;background:var(--nuit-2)}
.fin-violet-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.fin-violet-txt{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(32px,5.5vw,96px)}
.fin-violet-txt .surtitre{color:var(--or-clair)}
.fin-violet-txt h2{font:500 clamp(26px,2.5vw,40px)/1.18 var(--f-titre);color:var(--sur-nuit);text-wrap:balance}
.fin-violet-txt .boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.fin-violet .btn{background:var(--sur-nuit);color:var(--nuit);border-color:var(--sur-nuit)}
.fin-violet .btn:hover{background:transparent;color:var(--sur-nuit)}
.fin-violet .btn.contour{background:transparent;color:var(--sur-nuit);border-color:color-mix(in srgb,var(--sur-nuit) 55%,transparent)}
.fin-violet .btn.contour:hover{background:var(--sur-nuit);color:var(--nuit);border-color:var(--sur-nuit)}
@media (max-width:860px){
  .fin-violet-bloc{grid-template-columns:minmax(0,1fr)}
  .fin-violet-txt{padding:clamp(28px,6vw,48px) clamp(20px,5vw,40px) clamp(32px,7vw,52px)}
  .fin-violet-txt .boutons{width:100%}
  .fin-violet .btn{flex:1 1 100%;padding:0 18px}
}
.fin-violet-txt p{font-size:17px;line-height:1.7;color:color-mix(in srgb,var(--sur-nuit) 82%,transparent);max-width:46ch}
/* fin violette : phrase dans le style de la citation (ornement soleil, Bodoni italique), contenu centré */
.fin-violet-txt{align-items:center;text-align:center}
.fin-violet-txt .ornement{color:var(--or-clair)}
.fin-violet-txt .fin-violet-phrase{font:500 italic clamp(22px,2.1vw,34px)/1.3 var(--f-titre);color:var(--sur-nuit);max-width:26ch;text-wrap:balance}
.fin-violet-txt .boutons{justify-content:center}
/* photo de fin de Notre histoire : planches étalées en pleine largeur (2880 px, nette jusqu'aux grands écrans) */
.hist-fin-large{aspect-ratio:2880/1451}
.hist-fin-large img{object-position:55% 50%}
@media (max-width:860px){ .hist-fin-large{aspect-ratio:4/3} }
.fin-photo-env{padding-bottom:clamp(44px,5.5vw,80px)}
/* Idées de murs, bloc Professionnels : titre centré, deux paragraphes côte à côte, puis la demande de devis centrée */
.pros-bloc.pros-centre{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(24px,3vw,44px)}
.pros-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px);max-width:1080px}
.pros-deux p{color:var(--encre-2);line-height:1.7}
.pros-deux p b{display:block;margin-bottom:6px;color:var(--encre);font-weight:500}
.pros-centre .pros-txt{align-items:center}
.pros-centre .pros-txt p{max-width:58ch}
@media (max-width:860px){ .pros-deux{grid-template-columns:minmax(0,1fr)} }
/* Idées de murs, bloc Professionnels : fond gris, photo du bar à vin bord à bord à gauche, texte à droite avec deux rubriques à filets */
.pros-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--tuile)}
.pros-photo-img{position:relative;margin:0;min-height:clamp(360px,34vw,560px);overflow:hidden;background:var(--tuile-2)}
.pros-photo-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.pros-photo-txt{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(32px,4.5vw,80px)}
.pros-photo-txt h2{font:500 clamp(30px,3vw,44px)/1.08 var(--f-titre);text-wrap:balance}
.pros-lignes{display:flex;flex-direction:column;width:100%;margin-top:10px;border-bottom:1px solid color-mix(in srgb,var(--encre) 14%,transparent)}
.pros-ligne{padding-block:18px;border-top:1px solid color-mix(in srgb,var(--encre) 14%,transparent)}
.pros-ligne h3{font:600 12.5px/1.4 var(--f-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--encre);margin-bottom:8px}
.pros-ligne p{color:var(--encre-2);line-height:1.65;max-width:58ch}
.pros-photo-fin{color:var(--encre-2);line-height:1.65;max-width:58ch;margin-top:6px}
.pros-photo-txt .btn{margin-top:6px;min-height:44px;padding:0 20px;gap:10px;font:500 11.5px/1 var(--f-texte);letter-spacing:.18em;background:transparent;color:var(--encre);border:1px solid var(--encre)}
.pros-photo-txt .btn:hover{background:var(--encre);color:var(--papier)}
@media (max-width:860px){
  .pros-photo{grid-template-columns:minmax(0,1fr)}
  .pros-photo-img{min-height:0;aspect-ratio:16/10}
  .pros-photo-txt{padding:clamp(24px,6vw,40px) clamp(20px,5vw,36px) clamp(28px,7vw,44px)}
}
/* bloc Professionnels : photo du comptoir de café (partie gauche, sans les cadres), texte un peu plus resserré pour garder la photo nette */
.pros-photo-img img{object-position:50% 60%}
.pros-photo-txt{padding:clamp(28px,3.8vw,64px)}
.pros-ligne{padding-block:14px}
.pros-ligne p,.pros-photo-fin{font-size:15.5px}
/* menu Couleurs simplifié : une ligne de gouttes avec le nom dessous, puis « Toutes les affiches » */
.mega-couleurs-ligne{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(18px,2.6vw,44px)}
.mega-couleurs-ligne .teinte-menu{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14.5px;min-width:64px}
.mega-couleurs-ligne .teinte-menu .teinte-rond{width:40px;height:40px}
.mega-couleurs-ligne .teinte-menu:hover{color:var(--or)}
.mega-couleurs-ligne .mega-toutes{align-self:center;margin-left:clamp(8px,1.6vw,24px);padding-left:clamp(18px,2.6vw,44px);border-left:1px solid var(--trait);font:500 12px var(--f-texte);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.mega-couleurs-ligne .mega-toutes:hover{color:var(--or)}
/* menu Couleurs : le choix fond crème / fond nuit, même pastille que sur l'accueil */
.mega-fonds{display:inline-flex;align-self:center;gap:0;border:1px solid var(--trait);border-radius:30px;padding:3px;background:#fff}
.mega-fonds .puce-f{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:24px;padding:8px 16px;font:500 12px var(--f-texte);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);white-space:nowrap;transition:background .2s,color .2s}
.mega-fonds .puce-f i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.mega-fonds .puce-f:hover{background:var(--nuit);color:#fff}
/* boutique : quatre filtres (couleur, fond, format, tri) — deux par ligne sur téléphone */
@media (max-width:600px){ .barre .filtre{flex:1 1 50%} }
/* délai de livraison estimé : fiche produit et panier */
.delai-livraison,.panier-delai{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--encre-2)}
.delai-livraison b{color:var(--encre);font-weight:500}
.delai-livraison svg,.panier-delai svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--or);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.panier-delai{font-size:13px}