/* =====================================================================
   SOUTHLITE EVENT — SECTIONS DE PAGES
   Chargé après site.css. Contient uniquement ce qui est propre à une
   page (accueil pour l'instant ; catalogue/produit/prestation viendront
   aux étapes 2 et 3), pour ne pas gonfler le design system global.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO SLIDER (accueil)
   Hauteur fixe réservée dès le premier rendu : aucun CLS possible.
   --------------------------------------------------------------------- */
.hero{position:relative;height:660px;overflow:hidden;background:var(--ink);}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;}
.hero-slide.is-active{opacity:1;pointer-events:auto;}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Dégradé plus dense à gauche : le texte reste lisible sur toute photo. */
.hero-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,8,7,.94) 0%,rgba(9,8,7,.74) 38%,rgba(9,8,7,.28) 72%,rgba(9,8,7,.42) 100%);}
.hero-slide-fallback{position:absolute;inset:0;
  background:radial-gradient(90% 70% at 72% 26%, rgba(201,164,75,.22), transparent 62%),
             linear-gradient(150deg,var(--ink-3),var(--ink) 70%);}
.hero-slide-fallback::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 42px;}

.hero-content{position:relative;z-index:3;height:100%;max-width:var(--max);margin:0 auto;
  padding:0 28px;display:flex;align-items:center;}
.hero-copy{max-width:660px;}
.hero-copy h1{font-size:clamp(34px,5.4vw,64px);text-transform:uppercase;margin-top:18px;}
.hero-copy p{color:#ded4c0;font-size:17px;margin-top:22px;max-width:46ch;}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

/* Contrôles : numérotation, barre de progression, flèches */
.hero-bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;
  max-width:var(--max);margin:0 auto;padding:0 28px 32px;
  display:flex;align-items:center;gap:22px;}
.hero-count{font-size:11px;letter-spacing:.2em;color:var(--muted);flex-shrink:0;}
.hero-count b{color:var(--gold-light);font-weight:700;}
.hero-progress{flex:1;height:1px;background:var(--line);position:relative;max-width:320px;}
.hero-progress span{position:absolute;left:0;top:0;height:100%;width:0;background:var(--gold);transition:width .3s linear;}
.hero-arrows{display:flex;gap:10px;margin-left:auto;}
.hero-arrows button{width:44px;height:44px;border:1px solid var(--line);background:rgba(9,8,7,.4);
  color:var(--ivory);border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;transition:border-color var(--t-fast),color var(--t-fast);}
.hero-arrows button:hover{border-color:var(--gold);color:var(--gold-light);}
/* Mention discrète pour une image d'illustration (jamais intrusive). */
.hero-mention{position:absolute;right:28px;bottom:36px;z-index:4;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.7;}

/* ---------------------------------------------------------------------
   INTRO CATALOGUE
   --------------------------------------------------------------------- */
.intro-catalogue{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end;}
.intro-catalogue h2{font-size:clamp(28px,3.8vw,44px);text-transform:uppercase;margin-top:16px;}
.intro-catalogue .intro-side{color:var(--muted);font-size:15px;line-height:1.75;}
.intro-catalogue .intro-side .link-arrow{margin-top:18px;}

/* ---------------------------------------------------------------------
   MOSAÏQUE CATÉGORIES (asymétrique, pas une grille uniforme)
   --------------------------------------------------------------------- */
.mosaique{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.mos-item{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:2px;
  display:block;min-height:250px;}
.mos-item.is-large{grid-column:span 2;grid-row:span 2;min-height:516px;}
.mos-item.is-wide{grid-column:span 2;}
.mos-item .media{position:absolute;inset:0;}
.mos-item .media img{width:100%;height:100%;}
.mos-item:hover .media img{transform:scale(1.05);}
.mos-item::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,8,7,.12) 30%,rgba(9,8,7,.88) 100%);}
.mos-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 26px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.mos-index{font-size:10.5px;letter-spacing:.2em;color:var(--gold);}
.mos-info h3{font-size:20px;text-transform:uppercase;margin-top:8px;}
.mos-item.is-large .mos-info h3{font-size:27px;}
.mos-count{font-size:11.5px;color:var(--muted);margin-top:7px;}
.mos-info svg{color:var(--gold);flex-shrink:0;transition:transform var(--t-fast);}
.mos-item:hover .mos-info svg{transform:translateX(5px);}

/* ---------------------------------------------------------------------
   ON PART DE VOTRE PROJET (section éditoriale par type d'événement)
   --------------------------------------------------------------------- */
.projet{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.projet-head{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:end;margin-bottom:52px;}
.projet-head h2{font-size:clamp(28px,3.8vw,44px);text-transform:uppercase;margin-top:16px;}
.projet-head p{color:var(--muted);font-size:15px;line-height:1.75;}
.projet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.projet-item{padding:34px 30px 30px;border-right:1px solid var(--line);background:var(--ink);
  display:flex;flex-direction:column;transition:background var(--t-fast);}
.projet-item:last-child{border-right:0;}
.projet-item:hover{background:var(--ink-3);}
.projet-num{font-size:10.5px;letter-spacing:.2em;color:var(--gold-dark);}
.projet-item h3{font-size:19px;text-transform:uppercase;margin-top:16px;}
.projet-item p{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.65;flex:1;}
.projet-item .link-arrow{margin-top:20px;font-size:11px;}

/* ---------------------------------------------------------------------
   PRODUIT / PACK À LA UNE
   --------------------------------------------------------------------- */
.une{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.une-photo{position:relative;min-height:460px;overflow:hidden;}
.une-photo .media{position:absolute;inset:0;}
.une:hover .une-photo .media img{transform:scale(1.03);}
.une-text{padding:56px 52px;background:var(--ink-2);display:flex;flex-direction:column;justify-content:center;}
.une-text h2{font-size:clamp(26px,3.2vw,38px);text-transform:uppercase;margin-top:16px;}
.une-text p{color:var(--muted);margin-top:18px;font-size:15px;line-height:1.7;}
.une-prix{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);}
.une-prix .c-prix{font-size:28px;}
.une-text .hero-actions{margin-top:28px;}

/* ---------------------------------------------------------------------
   PACKS
   --------------------------------------------------------------------- */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.packs-groupe + .packs-groupe{margin-top:52px;}

/* ---------------------------------------------------------------------
   CTA FINAL
   --------------------------------------------------------------------- */
.final{text-align:center;padding:110px 0;position:relative;overflow:hidden;}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 50% 100%, rgba(201,164,75,.12), transparent 70%);}
.final > .wrap{position:relative;z-index:2;}
.final h2{font-size:clamp(30px,4.4vw,52px);text-transform:uppercase;max-width:16ch;margin:18px auto 0;}
.final p{color:var(--muted);margin-top:20px;max-width:54ch;margin-left:auto;margin-right:auto;}
.final .hero-actions{justify-content:center;margin-top:34px;}

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media(max-width:1024px){
  .mosaique{grid-template-columns:repeat(2,1fr);}
  .mos-item.is-large{grid-column:span 2;grid-row:auto;min-height:330px;}
  .mos-item.is-wide{grid-column:span 2;}
  .projet-grid{grid-template-columns:repeat(2,1fr);}
  .projet-item:nth-child(2){border-right:0;}
  .projet-item:nth-child(1),.projet-item:nth-child(2){border-bottom:1px solid var(--line);}
  .packs-grid{grid-template-columns:repeat(2,1fr);}
  .une{grid-template-columns:1fr;}
  .une-photo{min-height:340px;}
  .une-text{padding:40px 34px;}
}
@media(max-width:900px){
  .hero{height:560px;}
  .hero-content{padding:0 20px;}
  .hero-bottom{padding:0 20px 26px;}
  .hero-mention{right:20px;}
  .intro-catalogue,.projet-head{grid-template-columns:1fr;gap:28px;}
}
@media(max-width:560px){
  .hero{height:500px;}
  .hero-copy h1{font-size:clamp(28px,8vw,38px);}
  .hero-copy p{font-size:15px;margin-top:16px;}
  .hero-actions{margin-top:26px;}
  .hero-actions .btn{width:100%;}
  .hero-progress{display:none;}
  .mosaique{grid-template-columns:1fr;}
  .mos-item,.mos-item.is-large,.mos-item.is-wide{grid-column:span 1;min-height:260px;}
  .projet-grid{grid-template-columns:1fr;}
  .projet-item{border-right:0;border-bottom:1px solid var(--line);}
  .projet-item:last-child{border-bottom:0;}
  .packs-grid{grid-template-columns:1fr;}
  .une-text{padding:32px 22px;}
  .final{padding:76px 0;}
  .final .hero-actions .btn{width:100%;}
}

/* =====================================================================
   ÉTAPE 2 — CATALOGUE, CATÉGORIES, FICHE PRODUIT, MA SÉLECTION
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO COMPACT CATALOGUE / CATÉGORIE
   --------------------------------------------------------------------- */
.cat-hero{padding:44px 0 56px;}
.cat-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;}
.cat-hero-copy h1{font-size:clamp(30px,4.2vw,50px);text-transform:uppercase;margin:16px 0 20px;}
.cat-hero-count{display:inline-block;margin-top:24px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:2px;padding:9px 16px;}
.cat-hero-photo{position:relative;}
.cat-hero-photo .media{aspect-ratio:3/2;border:1px solid var(--line);border-radius:2px;}

.cat-outils{padding:0 0 48px;}
.dispo-bar{background:var(--ink-2);border:1px solid var(--line);border-radius:2px;padding:26px 28px;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-bottom:26px;}
.dispo-bar-intro p{color:var(--muted);font-size:14px;margin-top:8px;}
.dispo-bar-champs{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.dispo-bar-champs label{margin-bottom:8px;}
.dispo-bar-champs .btn{border:none;cursor:pointer;}

/* Produits indisponibles : lisibles, jamais invisibles, jamais une erreur. */
.c-produit-wrap{display:flex;flex-direction:column;gap:10px;}
.c-produit-wrap.est-complet .c-produit{border-color:rgba(234,212,134,.13);}
.c-produit-wrap.est-complet .media img{filter:saturate(.55) brightness(.62);}
.c-produit-wrap.est-complet .c-produit h3,
.c-produit-wrap.est-complet .c-prix{color:var(--muted);}
.c-produit-wrap.est-complet .c-fleche{opacity:.5;}
.c-stock-neutre{background:rgba(170,159,140,.18);color:var(--ivory);}
.c-produit-alt{font-size:10.5px;padding-left:2px;min-height:auto;}
.bloc-complets{margin-top:64px;padding-top:48px;border-top:1px solid var(--line);}

/* ---------------------------------------------------------------------
   FICHE PRODUIT
   --------------------------------------------------------------------- */
.pdt{padding:34px 0 76px;}
.pdt-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:60px;align-items:start;}
.pdt-galerie .gallery-main{aspect-ratio:4/3;}
.stock-flag-ok{background:rgba(201,164,75,.18);color:var(--gold-light);}

.pdt-infos h1{font-size:clamp(28px,3.8vw,44px);text-transform:uppercase;margin:14px 0 0;}
.pdt-chapo{color:var(--muted);font-size:16px;margin-top:18px;line-height:1.7;}
.pdt-ref{display:block;margin-top:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);}

.pdt-prix-bloc{margin-top:30px;padding:28px;background:var(--ink-2);border:1px solid var(--line);border-radius:2px;}
.pdt-prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.pdt-prix .amount{font-size:34px;font-weight:700;color:var(--gold-light);line-height:1;}
.pdt-prix .unit{font-size:13px;color:var(--muted);}
.pdt-prix .c-prix-prefix{width:100%;margin-bottom:0;}
.pdt-prix-note{width:100%;font-size:12.5px;color:var(--muted);margin-top:8px;}
.pdt-prix-bloc .price-note{margin-top:12px;}
.qty-row{display:flex;align-items:center;gap:16px;margin-top:24px;}
.qty-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.pdt-aide{font-size:12px;color:var(--muted);margin-top:14px;}

.pdt-dispo{margin-top:28px;padding:26px;border:1px solid var(--line);border-radius:2px;background:var(--ink-2);}
.pdt-dispo-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:16px;}
.pdt-dispo-form label{margin-bottom:8px;}
.pdt-dispo-form .btn{cursor:pointer;}
#dispoResultat{margin-top:16px;font-size:14px;color:var(--muted);min-height:22px;}
#dispoResultat.ok{color:var(--gold-light);}
#dispoResultat.ko{color:#e08585;}

/* Spécifications en paires clé/valeur (jamais un tableau) */
.pdt-specs{margin-top:32px;border-top:1px solid var(--line);}
.pdt-spec{display:flex;justify-content:space-between;gap:22px;padding:14px 0;border-bottom:1px solid var(--line);}
.pdt-spec dt{font-size:13px;color:var(--muted);}
.pdt-spec dd{font-size:14px;font-weight:500;text-align:right;}

.pdt-detail{padding:76px 0;border-top:1px solid var(--line);}
.pdt-detail-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:58px;align-items:start;}
.pdt-texte{color:var(--muted);font-size:15.5px;line-height:1.8;margin-top:20px;}

/* ---------------------------------------------------------------------
   MA SÉLECTION
   --------------------------------------------------------------------- */
.selection{padding:40px 0 90px;}
.selection-liste{display:flex;flex-direction:column;}
.sel-ligne{display:grid;grid-template-columns:120px 1fr auto auto;gap:24px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);}
.sel-visuel .media{aspect-ratio:4/3;border:1px solid var(--line);border-radius:2px;}
.sel-visuel .media-fallback{padding:12px;}
.sel-visuel .mf-nom{font-size:11px;}
.sel-visuel .mf-marque{font-size:8px;margin-top:5px;}
.sel-nom{font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;display:block;}
a.sel-nom:hover{color:var(--gold-light);}
.sel-tag{display:inline-block;margin-top:8px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);border-radius:2px;padding:3px 8px;}
.sel-unite{display:block;font-size:12px;color:var(--muted);margin-top:8px;}
.sel-retirer{width:44px;height:44px;border:1px solid var(--line);background:none;color:var(--muted);
  border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--t-fast),border-color var(--t-fast);}
.sel-retirer:hover{color:#e08585;border-color:rgba(200,80,80,.5);}
.selection-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;align-items:center;}
.selection-actions[hidden]{display:none;}
.selection-cta{margin-left:auto;}
.selection-vide{border:1px solid var(--line);border-radius:2px;padding:64px 44px;text-align:center;
  background:radial-gradient(80% 120% at 50% 0%, rgba(201,164,75,.09), transparent 62%),var(--ink-2);}
.selection-vide h2{font-size:clamp(24px,3.2vw,34px);text-transform:uppercase;margin:16px 0 14px;}
.selection-vide p{color:var(--muted);max-width:48ch;margin:0 auto;}
.selection-vide .hero-actions{justify-content:center;margin-top:30px;}

/* ---------------------------------------------------------------------
   RESPONSIVE ÉTAPE 2
   --------------------------------------------------------------------- */
@media(max-width:1024px){
  .pdt-grid{grid-template-columns:1fr;gap:38px;}
  .pdt-detail-grid{grid-template-columns:1fr;gap:32px;}
  .cat-hero-grid{grid-template-columns:1fr;gap:32px;}
  .cat-hero-photo{order:-1;}
}
@media(max-width:900px){
  .dispo-bar{grid-template-columns:1fr;gap:20px;}
  .dispo-bar-champs{width:100%;}
  .dispo-bar-champs > div{flex:1;min-width:140px;}
  .dispo-bar-champs .btn{width:100%;}
  .pdt-dispo-form > div{flex:1;min-width:140px;}
  .pdt-dispo-form .btn{width:100%;}
}
@media(max-width:560px){
  .cat-hero{padding:28px 0 40px;}
  .sel-ligne{grid-template-columns:88px 1fr;grid-template-areas:"visuel infos" "qte retirer";gap:16px;}
  .sel-visuel{grid-area:visuel;}
  .sel-infos{grid-area:infos;}
  .sel-qte{grid-area:qte;}
  .sel-retirer{grid-area:retirer;justify-self:end;}
  .selection-cta{margin-left:0;width:100%;}
  .selection-actions .btn{width:100%;}
  .selection-vide{padding:44px 22px;}
  .pdt-spec{flex-direction:column;gap:5px;}
  .pdt-spec dd{text-align:left;}
  .cta-row .btn{width:100%;flex:none;}
}

/* Période entièrement complète : le bloc devient le contenu principal,
   sans séparateur orphelin en haut de page. */
.bloc-complets.est-seul{margin-top:0;padding-top:0;border-top:0;}

/* ---------------------------------------------------------------------
   ZOOM À LA LOUPE SUR LA PHOTO PRINCIPALE (fiche produit)
   Le grossissement suit le curseur via transform-origin, piloté en JS.
   Désactivé au tactile et si l'utilisateur a demandé moins d'animations.
   --------------------------------------------------------------------- */
.gallery-main.est-zoomable{cursor:zoom-in;}
.gallery-main.est-zoomable img{
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.gallery-main.est-zoomable.is-zoom img{
  transform:scale(2.1);
  transition:transform .12s ease-out;   /* réactif pendant le déplacement */
}
.zoom-indice{
  position:absolute;right:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory);background:rgba(9,8,7,.62);backdrop-filter:blur(4px);
  border:1px solid var(--line);border-radius:2px;padding:7px 11px;
  transition:opacity .2s ease;pointer-events:none;
}
.gallery-main.is-zoom .zoom-indice{opacity:0;}

/* Pas de loupe sur écran tactile : le doigt masquerait la zone observée. */
@media (hover:none),(pointer:coarse){
  .gallery-main.est-zoomable{cursor:default;}
  .gallery-main.est-zoomable.is-zoom img{transform:none;}
  .zoom-indice{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .gallery-main.est-zoomable.is-zoom img{transform:none;}
}