/* ===========================================================
   Panneaux plein écran — un écran par guinguette (scroll story)
   Scroll-snap (uniquement sur les pages contenant .panel = accueil)
   Chaque variante porte la DA de sa guinguette.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Caveat:wght@700&family=Cormorant+Garamond:wght@600;700&display=swap');

/* ---------- Scroll-snap (scopé à l'accueil via :has) ---------- */
html:has(.panel) { scroll-snap-type: y proximity; scroll-padding-top: 72px; }
html:has(.panel) .hero,
.panel { scroll-snap-align: start; scroll-snap-stop: always; }
html:has(.panel) .hero { min-height: 100svh; }

/* ---------- Panneau ---------- */
.panel {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; align-items: center;
  color: #fff;
}
.panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transform: scale(1.08); transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
.panel.is-in .panel__bg { transform: scale(1); }
.panel__veil { position: absolute; inset: 0; z-index: 1; }
.panel__inner { position: relative; z-index: 2; max-width: 680px; padding: 6rem 0; }
.panel__index { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(3rem, 9vw, 6rem); line-height: 1; opacity: .35; margin: 0 0 .5rem; }
.panel__eyebrow { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; font-size: .82rem;
  margin: 0 0 1rem; }
.panel__name { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02; margin: 0 0 1.1rem; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.panel__tagline { font-size: clamp(1.05rem, 2.2vw, 1.35rem); max-width: 42ch; margin: 0 0 1rem; color: rgba(255,255,255,.94); }
.panel__tags { font-weight: 700; letter-spacing: .02em; margin: 0 0 1.8rem; color: rgba(255,255,255,.85); }
.panel__cta { box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.panel__scroll { position: absolute; left: 50%; bottom: 26px; width: 24px; height: 38px; z-index: 2;
  transform: translateX(-50%); border: 2px solid rgba(255,255,255,.7); border-radius: 14px; }
.panel__scroll::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  margin-left: -2px; background: #fff; border-radius: 2px; animation: panelScroll 1.6s ease-in-out infinite; }
@keyframes panelScroll { 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 100%{opacity:0;transform:translateY(12px)} }

/* ---------- Variante Les 2 Rives (affiche : marine + orange) ---------- */
.panel--les2rives .panel__veil { background: linear-gradient(180deg, rgba(33,34,107,.55), rgba(33,34,107,.82)); }
.panel--les2rives .panel__eyebrow { color: #f6c9b9; }
.panel--les2rives .panel__index { color: #d6532c; opacity: .85; }
.panel--les2rives .panel__cta { background: #d6532c; border-color: #d6532c; color: #fff; font-family: 'Fredoka', sans-serif; text-transform: none; }
.panel--les2rives .panel__cta:hover { background: #b8401d; border-color: #b8401d; }
/* guirlande de fanions en haut */
.panel--les2rives::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='46'%20viewBox='0%200%2080%2046'%3E%3Cpath%20d='M0,6H80'%20stroke='%23ffffff'%20stroke-width='3'%20fill='none'/%3E%3Cpath%20d='M6,6L34,6L20,40Z'%20fill='%23ffffff'/%3E%3Cpath%20d='M46,6L74,6L60,40Z'%20fill='%23d6532c'/%3E%3C/svg%3E") repeat-x top center / auto 46px; }
/* palmier */
.panel--les2rives::after { content: ""; position: absolute; right: -40px; bottom: -20px; width: 300px; height: 380px; z-index: 1; pointer-events: none; opacity: .16;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20280'%3E%3Cg%20fill='%23ffffff'%3E%3Cpath%20d='M104,278c-6-70-2-150,8-196l9,2c-9,46-13,124-9,194z'/%3E%3Cg%20transform='translate(113,82)'%3E%3Cpath%20transform='rotate(-180)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(-144)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(-108)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(-72)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(-36)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(0)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- Variante La Petite Cantine (caliente Brasil) ---------- */
.panel--cantine .panel__veil { background: linear-gradient(150deg, rgba(240,53,110,.42), rgba(255,107,53,.38) 48%, rgba(9,77,48,.82)); }
.panel--cantine .panel__eyebrow { font-family: 'Caveat', cursive; text-transform: none; letter-spacing: 0; font-size: 1.9rem; color: #ffd24a; }
.panel--cantine .panel__name { font-family: 'Fraunces', Georgia, serif; }
.panel--cantine .panel__index { color: #ffd24a; }
.panel--cantine .panel__cta { background: #ff6b35; border-color: #ff6b35; color: #fff; text-transform: none; }
.panel--cantine .panel__cta:hover { background: #e14e1d; border-color: #e14e1d; }
.panel--cantine::after { content: ""; position: absolute; left: -50px; bottom: -40px; width: 280px; height: 330px; z-index: 1; pointer-events: none; opacity: .16; transform: rotate(-12deg);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20140'%3E%3Cpath%20d='M60%20138%20C58%2096%2040%2070%208%2054%20C40%2056%2052%2044%2056%206%20C60%2030%2062%2030%2064%206%20C68%2044%2080%2056%20112%2054%20C80%2070%2062%2096%2060%20138%20Z'%20fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- Variante 3e guinguette (teaser, vert Loire) ---------- */
.panel--troisieme .panel__veil { background: linear-gradient(180deg, rgba(16,61,51,.5), rgba(10,44,37,.85)); }
.panel--troisieme .panel__eyebrow { color: #cfe6df; }
.panel--troisieme .panel__index { color: #e89b3c; }
.panel--troisieme .panel__cta { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; text-transform: none; }
.panel--troisieme .panel__cta:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------- Variante La Petite Luciole (féérie nuit + ambre) ---------- */
.panel--luciole .panel__veil { background:
  radial-gradient(120% 80% at 50% 100%, rgba(238,178,76,.30), transparent 60%),
  linear-gradient(180deg, rgba(13,42,61,.5), rgba(13,42,61,.86)); }
.panel--luciole .panel__name { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; }
.panel--luciole .panel__eyebrow { color: #ffd27a; }
.panel--luciole .panel__index { color: #eeb24c; }
.panel--luciole .panel__cta { background: #eeb24c; border-color: #eeb24c; color: #0d2a3d; text-transform: none; }
.panel--luciole .panel__cta:hover { background: #d99f38; border-color: #d99f38; }
/* guirlande lumineuse en haut */
.panel--luciole::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 2;
  filter: drop-shadow(0 0 6px rgba(255,210,122,.6));
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='46'%20viewBox='0%200%20120%2046'%3E%3Cpath%20d='M0,8%20Q60,34%20120,8'%20stroke='%23ffffff'%20stroke-opacity='0.5'%20stroke-width='2'%20fill='none'/%3E%3Cg%20fill='%23ffd27a'%3E%3Ccircle%20cx='24'%20cy='25'%20r='4.5'/%3E%3Ccircle%20cx='60'%20cy='32'%20r='4.5'/%3E%3Ccircle%20cx='96'%20cy='25'%20r='4.5'/%3E%3C/g%3E%3C/svg%3E") repeat-x top center / auto 46px; }

/* lucioles scintillantes sur le panneau Luciole */
.panel--luciole .panel__veil::before, .panel--luciole .panel__veil::after {
  content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: transparent; pointer-events: none;
}
.panel--luciole .panel__veil::before {
  box-shadow: 80px 200px 4px 1px #ffe6a8, 260px 420px 3px 1px #ffd27a, 420px 160px 4px 1px #ffe6a8,
    640px 360px 3px 1px #ffd27a, 880px 220px 4px 1px #ffe6a8, 1080px 440px 3px 1px #ffd27a;
  animation: lucioleP 4.4s ease-in-out infinite;
}
.panel--luciole .panel__veil::after {
  box-shadow: 160px 340px 3px 1px #ffd27a, 380px 120px 4px 1px #ffe6a8, 560px 480px 3px 1px #ffd27a,
    760px 200px 4px 1px #ffe6a8, 1000px 360px 3px 1px #ffd27a;
  animation: lucioleP 6.2s ease-in-out 1s infinite;
}
@keyframes lucioleP {
  0%, 100% { opacity: .12; transform: translateY(0); }
  50%      { opacity: .95; transform: translateY(-7px); }
}

/* ---------- Reveals à l'entrée du panneau ---------- */
@media (prefers-reduced-motion: no-preference) {
  .anim-ready .panel__index,
  .anim-ready .panel__eyebrow,
  .anim-ready .panel__name,
  .anim-ready .panel__tagline,
  .anim-ready .panel__tags,
  .anim-ready .panel__cta {
    opacity: 0; transform: translateY(26px);
    transition: opacity .7s ease-out, transform .8s cubic-bezier(.22,1,.36,1);
  }
  .anim-ready .panel.is-in .panel__index   { opacity: .85; transform: none; transition-delay: .05s; }
  .anim-ready .panel--les2rives.is-in .panel__index { opacity: .85; }
  .anim-ready .panel.is-in .panel__eyebrow { opacity: 1; transform: none; transition-delay: .12s; }
  .anim-ready .panel.is-in .panel__name    { opacity: 1; transform: none; transition-delay: .20s; }
  .anim-ready .panel.is-in .panel__tagline { opacity: 1; transform: none; transition-delay: .30s; }
  .anim-ready .panel.is-in .panel__tags    { opacity: 1; transform: none; transition-delay: .38s; }
  .anim-ready .panel.is-in .panel__cta     { opacity: 1; transform: none; transition-delay: .46s; }
}

/* Sur tablette/mobile, le scroll-snap plein écran « bloque » le défilement
   (snap-stop: always) et devient piégeant au doigt → on le neutralise. */
@media (max-width: 900px), (pointer: coarse) {
  html:has(.panel) { scroll-snap-type: none; scroll-padding-top: 66px; }
  html:has(.panel) .hero, .panel { scroll-snap-stop: normal; scroll-snap-align: none; }
}
@media (max-width: 680px) {
  .panel { min-height: 86svh; }
  .panel__inner { padding: 4.5rem 0 5rem; }
  .panel__index { font-size: clamp(2.2rem, 12vw, 3.4rem); margin-bottom: .25rem; }
  .panel__name { font-size: clamp(2.3rem, 9vw, 3.2rem); }
  .panel__scroll { display: none; }
  .panel--les2rives::after, .panel--cantine::after { width: 200px; height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.panel) { scroll-snap-type: none; }
  .panel__bg { transform: none !important; }
  .panel__scroll::after { animation: none; }
}