/* mise en page propre à l'accueil (index.html) */
/* collections : cartes au format 4:5 (affiche entière), texte posé sur l'image, 4 visibles qui défilent */
.coll-bloc{position:relative}
.mosaique{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * clamp(12px,1.4vw,20px)) / 4);gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.mosaique::-webkit-scrollbar{display:none}
.tuile-coll{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--tuile);color:#fff;scroll-snap-align:start;display:block}
.tuile-coll img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.tuile-coll:hover img{transform:scale(1.03)}
.tuile-coll::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,30,0) 55%,rgba(20,14,30,.62))}
.tuile-coll-txt{display:none}
.tuile-coll i{position:absolute;z-index:1;left:clamp(14px,1.4vw,22px);right:clamp(14px,1.4vw,22px);bottom:clamp(14px,1.4vw,20px);font-style:normal;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.tuile-coll i b{font:500 clamp(22px,2vw,30px)/1.05 var(--f-titre);display:block}
.tuile-coll i small{font:400 11px var(--f-mach);opacity:.9;display:block;margin-top:4px}
.tuile-coll i span.decouvrir{font:500 11px var(--f-texte);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:3px;white-space:nowrap}
.coll-fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--encre);box-shadow:0 6px 18px rgba(30,20,45,.18);display:grid;place-items:center;font-size:18px;cursor:pointer}
.coll-fleche.g{left:-14px}.coll-fleche.d{right:-14px}
.coll-fleche:disabled{opacity:0;pointer-events:none}
@media (max-width:860px){ .mosaique{grid-auto-columns:72%} .coll-fleche{display:none} }

/* coups de cœur : texte à gauche, slider à droite */
.coeur-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:clamp(24px,3vw,48px);align-items:center}
.coeur-intro{display:flex;flex-direction:column;gap:12px}
.coeur-intro h2{font:500 clamp(32px,3.4vw,48px)/1.05 var(--f-titre)}
.coeur-intro p{color:var(--encre-2);max-width:30ch}
.coeur-intro .lien{align-self:flex-start;margin-top:6px}
@media (min-width:861px){ .coeur-split #rail-coeur .rail{grid-auto-columns:calc((100% - 2 * 20px) / 3)} }
@media (max-width:860px){ .coeur-split{grid-template-columns:minmax(0,1fr)} }

/* histoire : grande phrase, chiffres clés, photo panoramique */
.manifeste{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.manifeste h2{font:500 clamp(30px,3.6vw,52px)/1.1 var(--f-titre);text-wrap:balance;margin-top:10px}
.manifeste h2 em{font-style:italic;color:var(--or)}
.manifeste-txt{display:flex;flex-direction:column;gap:14px;color:var(--encre-2)}
.manifeste-txt .lien{align-self:flex-start}
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.chiffres div{padding:clamp(18px,2vw,28px) 0;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.chiffres div + div{border-left:1px solid var(--trait)}
.chiffres b{font:500 clamp(30px,3.2vw,48px)/1 var(--f-titre);color:var(--encre)}
.chiffres b span{font-size:.5em;color:var(--doux)}
.chiffres small{font:400 12px var(--f-mach);color:var(--doux)}
.manifeste-photo{margin:clamp(28px,3vw,44px) 0 0}
.manifeste-photo img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block}
@media (max-width:860px){ .manifeste{grid-template-columns:1fr} .chiffres{grid-template-columns:1fr 1fr} .chiffres div:nth-child(3){border-left:0} .manifeste-photo img{aspect-ratio:4/3} }

/* mise en scène en pleine largeur */
.pleine-page{position:relative;display:block;width:100%;aspect-ratio:3200/859;max-height:70vh;overflow:hidden;margin-bottom:clamp(44px,5.5vw,80px)}
@media (max-width:760px){ .pleine-page{aspect-ratio:3/2} }
.pleine-page img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transition:transform 1.2s}
.pleine-page:hover img{transform:scale(1.02)}
.pleine-page-leg{position:absolute;left:var(--marge);bottom:clamp(18px,2.4vw,32px);background:var(--papier);color:var(--encre);padding:10px 16px;font:500 12px var(--f-texte);letter-spacing:.16em;text-transform:uppercase;display:inline-flex;gap:10px;align-items:center}
.pleine-page-leg i{font-style:normal}


/* photos de l'atelier sous « Notre histoire » : une photo à la fois, en pleine largeur */
.hist-bloc{position:relative}
.hist-defile{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.hist-defile::-webkit-scrollbar{display:none}
.hist-defile img{flex:0 0 100%;width:100%;max-width:none;aspect-ratio:21/9;height:auto;object-fit:cover;object-position:50% 50%;scroll-snap-align:start;display:block}
@media (max-width:860px){ .hist-defile img{aspect-ratio:4/3} }
.hist-bloc .coll-fleche.g{left:16px}.hist-bloc .coll-fleche.d{right:16px}
.hist-points{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:4px}
.hist-points button{width:20px;height:20px;position:relative;background:none;border:0;padding:0;cursor:pointer}
.hist-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}
.hist-points button:hover::before{background:rgba(255,255,255,.45)}
.hist-points button[aria-current="true"]::before{background:#fff;transform:scale(1.15)}

/* bannière « Idées de murs » : même dégradé violet et même bouton que la photo d'ouverture */
.pleine-page::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 44% 110% at 0% 100%,rgba(20,14,30,.88) 0%,rgba(20,14,30,.72) 38%,rgba(20,14,30,.32) 70%,transparent 100%)}
.pleine-page-leg{z-index:2;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,.9);text-shadow:0 1px 6px rgba(20,14,30,.5);transition:background .2s,color .2s,border-color .2s}
.pleine-page-leg i{font-size:14px;transition:transform .2s}
.pleine-page:hover .pleine-page-leg{background:#FBF7EE;color:var(--encre);border-color:#FBF7EE}
.pleine-page:hover .pleine-page-leg i{transform:translateX(4px)}
/* petit texte au-dessus du bouton */
.pleine-page-txt{position:absolute;z-index:2;left:var(--marge);bottom:clamp(18px,2.4vw,32px);max-width:min(440px,85%);display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#FBF7EE;text-shadow:0 1px 8px rgba(20,14,30,.45)}
.pleine-page-txt b{font:500 clamp(24px,2.4vw,34px)/1.1 var(--f-titre)}
.pleine-page-txt > span:not(.pleine-page-leg){font:400 15px/1.5 var(--f-texte);opacity:.95}
.pleine-page-txt .pleine-page-leg{position:static;margin-top:8px}
@media (max-width:760px){ .pleine-page-txt > span:not(.pleine-page-leg){font-size:13.5px} }

/* « Idées de murs » : l'assortiment vedette en grande photo, texte posé sur un dégradé violet (même esprit que la bannière) */
#murs .lot.vedette{position:relative;display:block;background:var(--nuit);overflow:hidden}
#murs .lot.vedette .lot-photo{aspect-ratio:auto;min-height:0;height:clamp(460px,42vw,640px)}
#murs .lot.vedette .lot-photo > img{position:absolute;inset:0;object-position:50% 38%}
#murs .lot.vedette .lot-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,14,30,.86) 0%,rgba(20,14,30,.7) 20%,rgba(20,14,30,.25) 31%,transparent 37%)}
#murs .lot.vedette .lot-badge{left:auto;right:16px;z-index:2;background:#FBF7EE;color:var(--encre)}
#murs .lot.vedette .lot-txt{position:absolute;z-index:2;left:0;top:0;bottom:0;width:min(400px,33%);padding:clamp(28px,3.4vw,52px);justify-content:center;gap:12px;color:#FBF7EE;text-shadow:0 1px 8px rgba(20,14,30,.4)}
#murs .lot.vedette .surtitre{color:rgba(251,247,238,.8)}
#murs .lot.vedette .lot-txt h3{font-size:clamp(28px,2.6vw,38px);color:#FBF7EE}
#murs .lot.vedette .lot-txt p{color:rgba(251,247,238,.9);font-size:15px;line-height:1.55}
#murs .lot.vedette .lot-liste{display:none}
#murs .lot.vedette .lot-liste small{color:rgba(251,247,238,.72)}
#murs .lot.vedette .lot-liste a:hover b{color:#E9D9A6}
#murs .lot.vedette .lot-liste img{box-shadow:0 2px 8px rgba(0,0,0,.25)}
#murs .lot.vedette .lot-achat{justify-content:flex-start;gap:20px;margin-top:10px}
#murs .lot.vedette .lot-prix b{color:#FBF7EE;font-size:32px}
#murs .lot.vedette .lot-prix s{color:rgba(251,247,238,.65)}
#murs .lot.vedette .lot-achat .btn{min-height:40px;padding:0 18px 0 20px;font:500 11.5px/1 var(--f-texte);letter-spacing:.18em;background:transparent;color:#FBF7EE;border:1px solid rgba(251,247,238,.9);text-shadow:none}
#murs .lot.vedette .lot-achat .btn:hover{background:#FBF7EE;color:var(--encre);border-color:#FBF7EE}
@media (max-width:860px){
  #murs .lot.vedette .lot-photo{height:auto;aspect-ratio:4/3}
  #murs .lot.vedette .lot-photo > img{object-position:50% 50%}
  #murs .lot.vedette .lot-photo::after{background:linear-gradient(0deg,rgba(20,14,30,.55),transparent 40%)}
  #murs .lot.vedette .lot-txt{position:static;width:auto}
}

/* idées de murs : la photo du salon (très large) occupe deux colonnes pour qu'on voie les trois cadres */
@media (min-width:861px){
  #murs .mur-large{grid-column:1 / -1;position:relative}
  #murs .mur-large .mur-photo{aspect-ratio:1350/1100;position:relative}
  /* texte posé sur la photo, sur un dégradé violet en bas à gauche (même esprit que la bannière) */
  #murs .mur-large .mur-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 48% 75% at 0% 100%,rgba(20,14,30,.85) 0%,rgba(20,14,30,.62) 40%,rgba(20,14,30,.22) 72%,transparent 100%)}
  #murs .mur-large .mur-leg{position:absolute;z-index:2;left:clamp(24px,3vw,48px);bottom:clamp(24px,3vw,48px);max-width:min(440px,40%);flex-direction:column;align-items:flex-start;gap:16px;color:#FBF7EE;text-shadow:0 1px 8px rgba(20,14,30,.45)}
  #murs .mur-large .mur-leg h3{font-size:clamp(28px,2.6vw,38px);color:#FBF7EE}
  #murs .mur-large .mur-leg p,#murs .mur-large .mur-leg p a{color:rgba(251,247,238,.92);font-size:15px;line-height:1.55}
  #murs .mur-large .mur-leg p a:hover{color:#FBF7EE}
  #murs .mur-large .mur-leg .btn{background:transparent;color:#FBF7EE;border-color:rgba(251,247,238,.9);text-shadow:none}
  #murs .mur-large .mur-leg .btn:hover{background:#FBF7EE;color:var(--encre);border-color:#FBF7EE}
}
/* boutons des mises en scène : même style que les autres boutons du site (contour fin, plein au survol) */
#murs .mur-leg .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)}
#murs .mur-leg .btn:hover{background:var(--encre);color:var(--papier)}

/* grande photo « Choisir ses planches » : photo entière (carrée, sans zoom) à droite, texte sur le violet à gauche */
@media (min-width:861px){
  #murs .lot.vedette{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
  #murs .lot.vedette .lot-photo{order:2;height:clamp(460px,44vw,620px);aspect-ratio:1500/1483;width:auto}
  #murs .lot.vedette .lot-photo > img{object-position:50% 50%!important}
  #murs .lot.vedette .lot-photo::after{background:linear-gradient(90deg,rgba(51,34,68,.35),transparent 18%)}
  #murs .lot.vedette .lot-txt{position:static;order:1;width:auto;max-width:520px;text-shadow:none}
}
@media (max-width:860px){ #murs .lot.vedette .lot-photo{aspect-ratio:1500/1483} }
/* idées de murs : 2 mises en scène côte à côte sous la grande photo */
@media (min-width:861px){ #murs .murs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ #murs .mur-large{grid-column:1 / -1} }


/* idées de murs : 4 carrés bord à bord sur toute la largeur (même style que les grandes vignettes) */
#murs .murs-carres{grid-template-columns:repeat(3,minmax(0,1fr))}
#murs .murs-carres .tuile{aspect-ratio:1}
@media (max-width:860px){ #murs .murs-carres{grid-template-columns:1fr} #murs .murs-carres .tuile{aspect-ratio:4/3} }
/* photo en hauteur dans un carré : affichée en entière, sur un fond flou de la même photo */
.tuile.entier .flou{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(28px) brightness(.97)}
.tuile.entier img{position:relative;object-fit:contain}
.tuile.entier .tuile-leg{z-index:1}
/* vignette « Buffet en rotin » : zoom sur le cadre */
#tuiles .tuile img[src*="coleoptera-novem-buffet"]{transform:scale(1.3);transform-origin:47% 62%}
#tuiles .tuile:hover img[src*="coleoptera-novem-buffet"]{transform:scale(1.34)}
/* grandes vignettes : 3 carrés côte à côte */
#tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}
#tuiles .tuile{aspect-ratio:1}
/* vignette « Bigarrade & Pipiras » : léger zoom vers les deux cadres */
#tuiles .tuile img[src*="duo-bigarrade-pipiras-olivier"]{transform:scale(1.15);transform-origin:30% 78%}
#tuiles .tuile:hover img[src*="duo-bigarrade-pipiras-olivier"]{transform:scale(1.19)}
/* une vignette qui ajoute un lot au panier le dit clairement */
#tuiles .tuile[data-lot] .tuile-leg span::after{content:"  ·  Ajouter au panier +";font-size:.8em;letter-spacing:.08em;color:var(--doux)}
/* grandes vignettes : photos seules, sans étiquettes (le titre reste lu par les lecteurs d'écran via le texte de l'image) */
#tuiles .tuile-leg{display:none}
/* idées de murs : photos seules, sans étiquettes */
#murs .murs-carres .tuile-leg{display:none}