/* ----- SLIDER (carrousel decoratif, images non cliquables) ----- */
.slider-zone{background:#1a2d21;height:420px;position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
.slider-track{display:flex;height:100%;transition:transform 0.6s ease;}
/* Chaque slide remplit 100% du viewport et contient une image en cover. */
.slide{min-width:100%;height:100%;position:relative;overflow:hidden;display:block;}
.slide-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.slider-overlay{position:absolute;bottom:0;left:0;right:0;padding:1rem 3rem;display:flex;align-items:center;justify-content:space-between;pointer-events:none;}
.slider-dots{display:flex;gap:6px;pointer-events:auto;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;border:none;padding:0;}
.dot.active{background:var(--gold);}
.slider-prev,.slider-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.6);border:1px solid var(--border);color:var(--muted);width:36px;height:36px;cursor:pointer;font-size: var(--t-body);display:flex;align-items:center;justify-content:center;}
.slider-prev{left:1.5rem;}.slider-next{right:1.5rem;}
.slider-prev:hover,.slider-next:hover{background:var(--gold);color:#fff;border-color:var(--gold);}

/* ----- HERO ----- */
.hero{display:grid;grid-template-columns:45% 55%;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.hero-l{background:var(--forest);padding:2rem 3rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.hero-h1{font-family:var(--serif);font-size: var(--t-h1);font-weight:700;color:#f5ede0;line-height:1.2;margin-bottom:0.2rem;}
.hero-sub{font-family:var(--serif);font-size: var(--t-body);font-weight:400;font-style:italic;color:var(--gold3);display:block;margin-bottom:0.4rem;}
.hero-since{font-family:var(--sans);font-size: var(--t-micro);letter-spacing:0.2em;text-transform:uppercase;color:#4a6a50;font-weight:300;margin-top:0.2rem;}
.hero-btns{display:flex;gap:0.8rem;flex-shrink:0;}
.hero-r{background:#ddd0b5;border-left:1px solid var(--border);display:flex;flex-direction:row;}
.hcat{flex:1;padding:1.4rem 1.2rem;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;cursor:pointer;position:relative;text-decoration:none;color:inherit;transition:background 0.15s;}
.hcat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;}
.hcat:hover::before{background:var(--gold);}
.hcat:hover{background:var(--beige2);}
.hcat:last-child{border-right:none;}
.hcat-title{font-family:var(--serif);font-size: var(--t-h3);font-weight:700;color:var(--forest);letter-spacing:0.02em;margin-bottom:0.3rem;line-height:1.2;}
.hcat-arrow{font-size: var(--t-h3);color:var(--forest);margin-top:0.4rem;font-weight:700;transition:color 0.15s,transform 0.15s;}
.hcat:hover .hcat-arrow{color:var(--gold);transform:translateX(4px);}

/* 3eme card "CATALOGUE COMPLET" : style distinct (fond legerement plus crème,
   liseré doré gauche permanent) pour signifier "vue d ensemble du catalogue"
   sans rendre la card identique aux deux autres categories. */
.hcat-catalogue{background:#e3d6bc;}
.hcat-catalogue::before{background:var(--gold3);}
.hcat-catalogue:hover{background:var(--beige2);}
.hcat-catalogue:hover::before{background:var(--gold);}


/* ----- ABOUT ----- */
.about{display:grid;grid-template-columns:280px 1fr;border-bottom:1px solid var(--border);}
.about-left{background:var(--forest2);padding:3.5rem 2.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:0;}
.about-depuis{font-family:var(--serif);font-size: var(--t-h3);font-weight:300;font-style:italic;color:#ffffff;letter-spacing:0.06em;margin-bottom:0.3rem;}
.about-num{font-family:var(--serif);font-size:90px;font-weight:700;color:var(--gold2);line-height:1;}
.about-num-lbl{font-family:var(--sans);font-size: var(--t-eyebrow-lg);letter-spacing:0.20em;text-transform:uppercase;color:#ffffff;font-weight:700;margin-top:0.8rem;margin-bottom:0.6rem;}
.about-sep{width:36px;height:1px;background:var(--gold);margin:0.5rem auto;}
.about-cats{display:flex;flex-direction:column;gap:0.5rem;align-items:center;margin-top:1.2rem;}
.about-cat{font-family:var(--sans);font-size: var(--t-eyebrow);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold2);font-weight:700;justify-content:center;}
a.about-cat{text-decoration:none;transition:color 0.15s;}
a.about-cat:hover,.about-cat-dual a:hover{color:var(--gold);text-decoration:underline;}
.about-cat-dual{display:flex;gap:0.4em;align-items:center;}
.about-cat-dual a{color:inherit;text-decoration:none;transition:color 0.15s;}
.about-right{background:#ddd0b5;padding:3.5rem;}
.about-txt p{font-family:var(--serif);font-size: var(--t-body);color:#2e3a20;line-height:1.75;font-weight:400;margin-bottom:1rem;}
.about-txt p:last-child{margin-bottom:0;}
.about-txt strong{font-weight:700;color:var(--forest);}

/* ----- GALLERY ----- */
.gallery{padding:3rem;background:var(--beige2);}
.gal-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.8rem;padding-bottom:1rem;border-bottom:1px solid var(--border);gap:1rem;flex-wrap:wrap;}
.gal-title{font-family:var(--serif);font-size: var(--t-h2);font-weight:700;color:var(--forest);}
.gal-title em{font-style:italic;font-weight:400;}
.gal-link{font-family:var(--sans);font-size: var(--t-eyebrow);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);background:none;border:none;cursor:pointer;font-weight:600;text-decoration:none;}
.gal-link:hover{color:var(--gold2);}
/* Nouveautes : carrousel horizontal scrollable avec scroll-snap natif.
   - Mobile : swipe natif tactile.
   - Desktop : fleches laterales (.newest-arrow) pilotent le scroll.
   - Cartes a largeur fixe pour un alignement vitrine ; le compteur cote JS
     remonte jusqu'a 12 annonces (vs 4 auparavant).
   - Le wrapper .newest-carousel est position:relative pour que les fleches
     se positionnent par rapport a lui. */
.newest-carousel{position:relative;}
.cards{
  display:flex;gap:1.2rem;
  overflow-x:auto;
  /* proximity (vs mandatory) : iOS Safari bug moins le scroll, on garde
     un alignement souple sans bloquer le swipe libre. */
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE */
  padding-bottom:0.4rem;
  /* Permet a iOS de gerer le swipe horizontal sans interpreter le tap
     sur les fleches comme un debut de scroll. */
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
}
.cards::-webkit-scrollbar{display:none;}

/* Cards du carrousel "Nouveautes" : reutilise la classe .item du listing
   (cf. styles.css) pour coherence visuelle totale. La classe additionnelle
   .newest-item ne fait qu adapter au scroll horizontal (largeur fixe + snap). */
.newest-item{
  flex:0 0 300px;
  scroll-snap-align:start;
}
@media (max-width:768px){
  .newest-item{flex-basis:80%;} /* 1 carte ~visible + amorce de la suivante */
}
/* Image plus compacte pour rester proportionnee dans la largeur 300px. */
.newest-item .item-img{height:170px;}
/* Body un peu plus serre que les cards listing (qui ont plus de largeur). */
.newest-item .item-body{padding:1.2rem 1.2rem 1rem;}

/* Fleches laterales du carrousel nouveautes (desktop uniquement).
   Sur mobile/tactile, on masque les fleches : elles se chevauchaient
   avec la zone de swipe et iOS interpretait parfois le tap comme un
   debut de scroll. Le swipe natif + les dots de pagination suffisent. */
.newest-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:2;
  width:42px;height:42px;
  background:#fff;color:var(--forest);
  border:1px solid var(--border);
  font-size: var(--t-h2);line-height:1;font-weight:300;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background 0.15s,border-color 0.15s,color 0.15s,box-shadow 0.15s;
  font-family:var(--sans);
}
.newest-arrow:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.newest-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.newest-arrow[disabled]{opacity:0.3;cursor:not-allowed;}
.newest-prev{left:-14px;}
.newest-next{right:-14px;}
@media (max-width:768px){
  .newest-arrow{display:none !important;}
}

/* Dots de pagination : indicateur visuel "vous etes a la carte X / N".
   Affiches sous le carrousel uniquement quand il y a debordement.
   Particulierement utile en mobile ou les fleches sont cachees. */
.newest-dots{
  display:flex;justify-content:center;align-items:center;
  gap:6px;margin-top:1rem;flex-wrap:wrap;
}
.newest-dots[hidden]{display:none;}
.newest-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--border);border:none;padding:0;
  cursor:pointer;
  transition:background 0.2s,transform 0.2s;
}
.newest-dot.active{background:var(--gold);transform:scale(1.3);}
.newest-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---- RESPONSIVE HOME ---- */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;}
  .hero-l{padding:1.5rem 1.5rem;}
  .hero-r{border-left:none;border-top:1px solid var(--border);}
  .about{grid-template-columns:1fr;}
  /* On conserve la mise en colonne centree du desktop (flex-direction:column,
     align-items:center, text-align:center) : pas d override vers row. */
  .about-left{padding:2rem 1.5rem;}
  .about-right{padding:2rem 1.5rem;}
  .gallery{padding:2rem 1.5rem;}
  /* .cards reste a repeat(2,1fr) par defaut a cette largeur : rien a override. */
}
@media (max-width:768px){
  .slider-zone{height:280px;}
  .slider-prev,.slider-next{width:30px;height:30px;}
  .slider-prev{left:0.5rem;}.slider-next{right:0.5rem;}
  .slider-overlay{padding:0.8rem 1rem;}
  /* Hero mobile : titre + sous-titre + boutons centres en colonne */
  .hero-l{flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1rem;}
  .hero-text{width:100%;}
  .hero-btns{justify-content:center;}
  .hero-h1{font-size: var(--t-h2);}
  /* Mobile <=768px : on stacke les 3 cards verticalement (LETTRES &
     AUTOGRAPHES / OEUVRES D ART / CATALOGUE COMPLET) au lieu de les
     masquer. La 3eme card (catalogue) apporte une vraie valeur sur mobile,
     elle ne doit pas disparaitre dans le burger. Padding compact pour
     limiter le scroll. */
  .hero-r{display:flex;flex-direction:column;}
  .hcat{border-right:none;border-bottom:1px solid var(--border);padding:0.9rem 1.2rem;}
  .hcat:last-child{border-bottom:none;}
  .hcat-title{font-size: var(--t-body);margin-bottom:0.2rem;}
  .hcat-arrow{font-size: var(--t-body);margin-top:0.2rem;}
  .about-left{padding:1.5rem 1rem;}
  .about-right{padding:1.5rem 1rem;}
  .about-num{font-size:60px;}
  .sec-h2{font-size: var(--t-h3);margin-bottom:1rem;}
  .about-txt p{font-size: var(--t-small);line-height:1.7;}
  .gallery{padding:1.5rem 1rem;}
  .gal-title{font-size: var(--t-h3);}
  /* .cards : plus de regle grid-template-columns ici (vestige de l ancienne
     grille). Le carrousel mobile fonctionne via flex + flex-basis 80% defini
     plus haut. */
}