/* ==================== ACCUEIL GAYAR 2026 ==================== */

/* HERO */
.ga-hero{ position:relative; overflow:hidden; padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,96px); }
.ga-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(180deg, rgba(11,13,14,.55), rgba(11,13,14,.92)), var(--hero);
  background-size:cover; background-position:center; filter:saturate(1.05);
}
.ga-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:center; }
.ga-hero-copy .g-h1{ display:flex; flex-direction:column; letter-spacing:.01em; text-shadow:0 2px 20px rgba(0,0,0,.5); }
.ga-hero-sub{ color:var(--g-jaune); font-size:clamp(1.2rem,2.6vw,2rem); font-weight:700; margin-top:.15em; }
.ga-hero-rule{ width:120px; margin:1.1rem 0; border-radius:3px; }
.ga-hero-dates{ font-size:clamp(1rem,1.6vw,1.25rem); letter-spacing:.04em; margin:.4rem 0 1rem; }
.ga-hero-dates strong{ color:var(--g-turq-2); }
.ga-hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
.ga-hero-media{ margin:0; position:relative; border-radius:var(--g-radius-lg); overflow:hidden; box-shadow:var(--g-shadow); border:1px solid var(--g-stroke); }
.ga-hero-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ga-hero-media figcaption{
  position:absolute; left:14px; bottom:14px; background:rgba(8,9,10,.72); backdrop-filter:blur(8px);
  padding:.5rem .9rem; border-radius:999px; font-weight:700; font-size:.8rem; letter-spacing:.06em; border:1px solid var(--g-stroke);
}

/* THÈME */
.ga-theme-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(20px,3vw,48px); align-items:start; }
.ga-theme-head .g-h2{ color:var(--g-vert); }

/* LES 3 JOURS */
.ga-days-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--g-gap); margin-top:1.5rem; }
.ga-day{ position:relative; overflow:hidden; }
.ga-day::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--g-vert); }
.ga-day-tag{ display:inline-block; color:var(--c); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; }
.ga-day-date{ display:block; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; margin:.2rem 0 .4rem; }
.ga-day p{ color:var(--g-muted); margin:0; font-size:.92rem; }

/* TEMPS FORTS */
.ga-hl-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--g-gap); margin-top:1.5rem; }
.ga-hl{ display:flex; flex-direction:column; gap:.5rem; }
.ga-hl-dot{ width:22px; height:22px; border-radius:50%; }
.ga-hl strong{ font-size:.95rem; line-height:1.25; }
.ga-hl-sub{ color:var(--g-muted); font-size:.85rem; }

/* ARTISTES */
.ga-artists-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--g-gap); margin-top:1.5rem; }
.ga-artist{ background:var(--g-panel); border:1px solid var(--g-stroke-2); border-radius:var(--g-radius); overflow:hidden; transition:transform .25s ease; }
.ga-artist:hover{ transform:translateY(-4px); }
.ga-artist-img{ aspect-ratio:16/10; overflow:hidden; }
.ga-artist-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ga-artist:hover .ga-artist-img img{ transform:scale(1.05); }
.ga-artist-body{ position:relative; padding:1rem 1.2rem 1.3rem; }
.ga-artist-bar{ position:absolute; left:0; top:0; width:4px; height:100%; }
.ga-artist-body strong{ display:block; font-size:1.15rem; letter-spacing:.02em; }
.ga-artist-body span{ color:var(--g-muted); font-size:.9rem; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 980px){
  .ga-hero-grid{ grid-template-columns:1fr; }
  .ga-hero-media{ order:-1; max-width:520px; }
  .ga-theme-grid{ grid-template-columns:1fr; }
  .ga-hl-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 720px){
  .ga-days-grid{ grid-template-columns:1fr; }
  .ga-hl-grid{ grid-template-columns:repeat(2,1fr); }
  .ga-artists-grid{ grid-template-columns:1fr; }
}
@media (max-width: 460px){
  .ga-hl-grid{ grid-template-columns:1fr; }
}

/* ===== AJUSTEMENTS PIXEL — conformité maquette ===== */
/* Titre hero : LA FAMY très grand blanc */
.ga-hero-copy .g-h1{ font-size:clamp(3rem,7vw,5rem); line-height:.98; }
.ga-hero-copy .g-h1{ color:#fff; }
.ga-hero-sub{ color:var(--g-jaune); font-size:clamp(1.1rem,2.2vw,1.6rem); margin-top:.35em; letter-spacing:.02em; }
.ga-hero-dates strong{ color:#fff; font-size:1.35rem; }
.ga-hero-dates{ color:var(--g-turq-2); }

/* Cartes 3 jours : photo en haut */
.ga-day{ padding:0; overflow:hidden; }
.ga-day::before{ display:none; }
.ga-day-photo{ aspect-ratio:16/10; overflow:hidden; }
.ga-day-photo img{ width:100%; height:100%; object-fit:cover; }
.ga-day-body{ padding:1.1rem 1.3rem 1.4rem; position:relative; }
.ga-day-body::before{ content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:var(--c); }


/* ===== TITRE HERO — LA FAMY visible et grand ===== */
.ga-hero-title{ display:flex !important; flex-direction:column; gap:.1em; }
.ga-famy{ display:block !important; color:#fff !important; font-size:clamp(3rem,7vw,5rem); font-weight:800; line-height:.95; letter-spacing:.01em; }
.ga-hero-sub{ display:block !important; color:var(--g-jaune) !important; font-size:clamp(1.1rem,2.3vw,1.7rem); font-weight:700; }

/* Hero : proportions maquette */
.ga-famy{ font-size:clamp(3.4rem,8vw,6rem) !important; }
.ga-hero-sub{ font-size:clamp(1.3rem,2.6vw,2rem) !important; }
.ga-hero-dates{ font-size:clamp(1.05rem,1.6vw,1.3rem); }
.ga-hero-dates strong{ font-size:clamp(1.4rem,2.2vw,1.9rem); }
.ga-hero .g-lead{ font-size:clamp(1.1rem,1.5vw,1.3rem) !important; }
.ga-hero{ padding:clamp(60px,9vw,120px) 0; min-height:min(88vh,900px); display:flex; align-items:center; }
.ga-hero-grid{ width:100%; }

/* Section thème : titre plus grand, texte aligné */
.ga-theme-head .g-h2{ font-size:clamp(2.4rem,4.5vw,3.6rem); }
.ga-theme .g-lead{ font-size:clamp(1.1rem,1.5vw,1.3rem); }

/* Titres de section (LES 3 JOURS, TEMPS FORTS, ARTISTES) plus imposants */
.ga-days .g-h2, .ga-highlights .g-h2, .ga-artists .g-h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:.6em; }

/* Cartes jours : texte plus lisible */
.ga-day-date{ font-size:clamp(2rem,3.2vw,2.6rem) !important; }
.ga-day-tag{ font-size:.9rem !important; }
.ga-day-body p{ font-size:.98rem; }

/* Hero recalé sur base 1.5rem / largeur 1800 */
.ga-famy{ font-size:clamp(4rem,7vw,7rem) !important; }
.ga-hero-sub{ font-size:clamp(1.6rem,2.6vw,2.4rem) !important; }
.ga-hero-dates{ font-size:1.5rem !important; }
.ga-hero-dates strong{ font-size:clamp(1.7rem,2.4vw,2.2rem) !important; }
.ga-hero .g-lead{ font-size:1.5rem !important; }
.ga-day-body p, .ga-hl-sub, .ga-artist-body span{ font-size:1.3rem !important; }
.ga-day-date{ font-size:clamp(2.2rem,3.4vw,2.8rem) !important; }
.ga-day-tag, .ga-hl strong, .ga-artist-body strong{ font-size:1.4rem !important; }

/* ===== ESPACEMENTS RESSERRÉS ===== */
.gayar2026 .g-section{ padding:clamp(36px,4vw,60px) 0 !important; }
.ga-days-grid, .ga-hl-grid, .ga-artists-grid{ margin-top:1rem !important; gap:24px !important; }
.ga-days .g-h2, .ga-highlights .g-h2, .ga-artists .g-h2, .ga-theme-head .g-h2{ margin-bottom:.4em !important; }
.ga-theme{ padding-top:clamp(30px,3vw,48px) !important; padding-bottom:clamp(30px,3vw,48px) !important; }
/* hero un peu moins haut */
.ga-hero{ min-height:min(80vh,820px) !important; padding:clamp(48px,6vw,90px) 0 !important; }

/* ===== ESPACEMENTS ENCORE PLUS RESSERRÉS ===== */
.gayar2026 .g-section{ padding:clamp(20px,2.5vw,36px) 0 !important; }
.ga-days-grid, .ga-hl-grid, .ga-artists-grid{ margin-top:.6rem !important; gap:20px !important; }
.ga-theme{ padding-top:clamp(16px,2vw,28px) !important; padding-bottom:clamp(16px,2vw,28px) !important; }
.ga-hero{ min-height:auto !important; padding:clamp(36px,4vw,64px) 0 !important; }
.ga-days .g-h2, .ga-highlights .g-h2, .ga-artists .g-h2, .ga-theme-head .g-h2{ margin-bottom:.3em !important; }

/* ===== SÉPARATEUR RAINBOW (thème → 3 jours) ===== */
.ga-sep-wrap{ padding-top:0; padding-bottom:0; }
.ga-sep{ height:4px !important; border-radius:2px; margin:0 !important; opacity:.95; }

/* ===== TITRES DE SECTION (pixel) ===== */
.ga-days .g-h2, .ga-highlights .g-h2, .ga-artists .g-h2{
  font-size:clamp(1.8rem,2.6vw,2.3rem) !important; font-weight:800 !important;
  letter-spacing:.01em; margin:2.2rem 0 1.4rem !important; text-transform:uppercase;
}

/* ===== CARTES TEMPS FORTS — touche futuriste ===== */
.ga-hl{
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border:1px solid var(--g-stroke-2) !important; position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.ga-hl::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(200px 80px at 20% 0%, rgba(255,255,255,.05), transparent 60%); opacity:.8; }
.ga-hl:hover{ transform:translateY(-3px); border-color:var(--g-stroke) !important; }
.ga-hl-dot{ width:26px !important; height:26px !important; box-shadow:0 0 18px currentColor; }

/* ===== ARTISTES — barre colorée verticale + nom blanc + date colorée ===== */
.ga-artist-body{ padding:1.1rem 1.3rem 1.4rem 1.5rem !important; }
.ga-artist-bar{ width:5px !important; }
.ga-artist-body strong{ color:#fff !important; }
.ga-artist:nth-child(1) .ga-artist-body span{ color:var(--g-vert) !important; font-weight:600; }
.ga-artist:nth-child(2) .ga-artist-body span{ color:var(--g-jaune) !important; font-weight:600; }
.ga-artist:nth-child(3) .ga-artist-body span{ color:var(--g-rouge) !important; font-weight:600; }

/* ===== CARTES 3 JOURS — tag coloré selon le jour (maquette) ===== */
.ga-day:nth-child(1) .ga-day-tag{ color:var(--g-vert) !important; }
.ga-day:nth-child(2) .ga-day-tag{ color:var(--g-jaune) !important; }
.ga-day:nth-child(3) .ga-day-tag{ color:var(--g-rouge) !important; }
.ga-day-tag{ text-transform:uppercase; font-weight:700 !important; }

/* SÉPARATEUR RAINBOW */
.ga-sep-wrap{ padding:0 !important; }
.ga-sep{ height:4px !important; border-radius:2px; margin:0 !important; opacity:.95; }
/* TITRES DE SECTION */
.ga-days .g-h2, .ga-highlights .g-h2, .ga-artists .g-h2{ font-size:clamp(1.8rem,2.6vw,2.3rem) !important; font-weight:800 !important; margin:2rem 0 1.3rem !important; text-transform:uppercase; }
/* TEMPS FORTS futuristes */
.ga-hl{ background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important; border:1px solid var(--g-stroke-2) !important; position:relative; overflow:hidden; transition:transform .25s ease, border-color .25s ease; }
.ga-hl:hover{ transform:translateY(-3px); border-color:var(--g-stroke) !important; }
.ga-hl-dot{ width:26px !important; height:26px !important; box-shadow:0 0 18px currentColor; }
/* ARTISTES date colorée */
.ga-artist-bar{ width:5px !important; }
.ga-artist-body strong{ color:#fff !important; }
.ga-artist:nth-child(1) .ga-artist-body span{ color:var(--g-vert) !important; font-weight:600; }
.ga-artist:nth-child(2) .ga-artist-body span{ color:var(--g-jaune) !important; font-weight:600; }
.ga-artist:nth-child(3) .ga-artist-body span{ color:var(--g-rouge) !important; font-weight:600; }
/* 3 JOURS tag coloré */
.ga-day:nth-child(1) .ga-day-tag{ color:var(--g-vert) !important; }
.ga-day:nth-child(2) .ga-day-tag{ color:var(--g-jaune) !important; }
.ga-day:nth-child(3) .ga-day-tag{ color:var(--g-rouge) !important; }
.ga-day-tag{ text-transform:uppercase; font-weight:700 !important; }

/* ===== SÉPARATEUR RAINBOW — contenu dans le conteneur (pas pleine largeur) ===== */
.ga-sep-wrap{ max-width:1800px; margin:clamp(20px,3vw,40px) auto; padding:0 40px !important; }
.ga-sep{
  height:4px !important; width:100% !important; border:0 !important; margin:0 !important;
  border-radius:2px; opacity:.95;
  background:linear-gradient(90deg,var(--g-turq) 0 20%,var(--g-vert) 20% 40%,var(--g-jaune) 40% 60%,var(--g-orange) 60% 80%,var(--g-rouge) 80% 100%) !important;
}
@media (max-width:1860px){ .ga-sep-wrap{ max-width:100%; } }

/* ===== SÉPARATEUR RAINBOW — 3/4 de largeur, centré ===== */
.ga-sep-wrap{ display:flex; justify-content:center; }
.ga-sep{ width:75% !important; max-width:1200px; }
@media (max-width:720px){ .ga-sep{ width:90% !important; } }

/* ===== SÉPARATEUR RAINBOW — aligné à GAUCHE (sur le L de La famy), 3/4 ===== */
.ga-sep-wrap{ display:block !important; justify-content:flex-start !important; }
.ga-sep{ width:75% !important; max-width:1200px; margin:0 !important; margin-right:auto !important; }
@media (max-width:720px){ .ga-sep{ width:90% !important; } }

/* ===== CARTES TEMPS FORTS — INTERACTIF FUTURISTE ===== */
.ga-hl{ position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s;
  transform-style:preserve-3d; }
/* halo lumineux qui suit la souris */
.ga-hl::before{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; pointer-events:none;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, color-mix(in oklab,var(--dot,#2B9D67) 30%,transparent), transparent 70%);
  opacity:0; transition:opacity .3s; z-index:0; }
.ga-hl:hover::before{ opacity:1; }
.ga-hl:hover{ border-color:color-mix(in oklab,var(--dot,#2B9D67) 45%,transparent) !important;
  box-shadow:0 18px 44px color-mix(in oklab,var(--dot,#2B9D67) 22%,transparent) !important; }
/* contenu au-dessus du halo */
.ga-hl > *{ position:relative; z-index:1; }
/* le point coloré s'illumine et grossit au survol */
.ga-hl:hover .ga-hl-dot{ transform:scale(1.25); box-shadow:0 0 26px currentColor; }
.ga-hl-dot{ transition:transform .3s, box-shadow .3s; }
/* liseré bas qui se remplit au survol */
.ga-hl::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:0; z-index:2;
  background:var(--dot,#2B9D67); box-shadow:0 0 12px var(--dot,#2B9D67); transition:width .4s ease; }
.ga-hl:hover::after{ width:100%; }

/* ===== BANNIÈRE DÉFILANTE HERO (smooth futuriste) ===== */
.ga-carousel{ position:relative; overflow:hidden; border-radius:var(--g-radius-lg); border:1px solid var(--g-stroke);
  box-shadow:var(--g-shadow); background:#0f1112; aspect-ratio:4/3; }
/* piste qui défile en continu */
.ga-carousel-track{ display:flex; gap:14px; height:100%; width:max-content; padding:14px;
  animation:gaScroll 60s linear infinite; will-change:transform; }
.ga-carousel:hover .ga-carousel-track{ animation-play-state:paused; }  /* pause au survol */
@keyframes gaScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* chaque photo */
.ga-carousel-track img{ height:100%; width:auto; object-fit:cover; border-radius:14px;
  filter:saturate(1.05); transition:transform .4s ease, filter .4s ease; flex:none; }
.ga-carousel-track img:hover{ transform:scale(1.03); filter:saturate(1.15) brightness(1.05); }
/* fondu doux sur les bords gauche/droite (masque dégradé) */
.ga-carousel::before, .ga-carousel::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.ga-carousel::before{ left:0; background:linear-gradient(90deg, #0f1112, transparent); }
.ga-carousel::after{ right:0; background:linear-gradient(270deg, #0f1112, transparent); }
/* légende */
.ga-carousel figcaption{ position:absolute; left:16px; bottom:16px; z-index:3; background:rgba(8,9,10,.72);
  backdrop-filter:blur(8px); padding:.5rem 1rem; border-radius:999px; font-weight:700; font-size:.85rem;
  letter-spacing:.06em; border:1px solid var(--g-stroke); }
/* liseré lumineux animé en bas (touche futuriste discrète) */
.ga-carousel{ isolation:isolate; }
.ga-carousel > .ga-carousel-track{ z-index:1; }

@media (prefers-reduced-motion:reduce){ .ga-carousel-track{ animation:none !important; } }
@media (max-width:980px){ .ga-carousel{ aspect-ratio:16/10; } }

/* ===== CARROUSEL AVANCÉ — contrôles + vitesse ===== */
.ga-carousel-track{ animation-duration:30s !important; cursor:grab; }
.ga-carousel-track.is-dragging{ cursor:grabbing; animation-play-state:paused !important; }
.ga-carousel.is-paused .ga-carousel-track{ animation-play-state:paused !important; }
/* Contrôles */
.ga-carousel-ctrl{ position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:1px solid var(--g-stroke); background:rgba(10,12,14,.7); backdrop-filter:blur(10px); color:#fff; font-size:1.4rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; opacity:0; }
.ga-carousel:hover .ga-carousel-ctrl{ opacity:1; }
.ga-carousel-ctrl:hover{ background:var(--g-vert); border-color:var(--g-vert); transform:translateY(-50%) scale(1.1); }
.ga-carousel-prev{ left:14px; } .ga-carousel-next{ right:14px; }
.ga-carousel-pause{ position:absolute; z-index:4; top:14px; right:14px; width:40px; height:40px; border-radius:12px;
  border:1px solid var(--g-stroke); background:rgba(10,12,14,.7); backdrop-filter:blur(10px); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.2s; opacity:0; }
.ga-carousel:hover .ga-carousel-pause{ opacity:1; }
.ga-carousel-pause:hover{ background:var(--g-vert); border-color:var(--g-vert); }

/* ===== DIAPORAMA FADE (reposant, sans défilement) ===== */
.ga-fade{ position:relative; overflow:hidden; border-radius:var(--g-radius-lg); border:1px solid var(--g-stroke);
  box-shadow:var(--g-shadow); background:#0f1112; aspect-ratio:4/3; }
.ga-fade-stack{ position:absolute; inset:0; }
.ga-fade-stack img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  animation:gaFade var(--dur,48s) infinite; filter:saturate(1.05); }
@keyframes gaFade{ 0%{opacity:0;} 4%{opacity:1;} 20%{opacity:1;} 24%{opacity:0;} 100%{opacity:0;} }
.ga-fade figcaption{ position:absolute; left:16px; bottom:16px; z-index:3; background:rgba(8,9,10,.72);
  backdrop-filter:blur(8px); padding:.5rem 1rem; border-radius:999px; font-weight:700; font-size:.85rem;
  letter-spacing:.06em; border:1px solid var(--g-stroke); }
@media (prefers-reduced-motion:reduce){ .ga-fade-stack img{ animation:none; opacity:1; } .ga-fade-stack img:not(:first-child){ display:none; } }

/* ===== FADE 100% JS (synchro parfaite) ===== */
.ga-fade-stack img{ animation:none !important; transition:opacity .6s ease !important; opacity:0 !important; }
.ga-fade-stack img.is-current{ opacity:1 !important; }
.ga-fade-counter{ background:rgba(10,12,14,.7); backdrop-filter:blur(8px); padding:.35rem .8rem; border-radius:999px; border:1px solid var(--g-stroke); }
.ga-fade-count{ font-size:.85rem; font-weight:700; color:#fff; letter-spacing:.04em; }