/* ============================================================
   K&C DESIGN — Édition Été (Summer Mode)
   ------------------------------------------------------------
   Pack saisonnier autonome. Activation : <body class="season-summer">
   Désactivation : retirer la classe + le <link>/<script>.
   Aucun override de la palette ; uniquement décoration & animations.
   ============================================================ */

/* === Variables locales (limitées à season-summer) === */
.season-summer {
  --sun:        #FFD86B;
  --sun-soft:   rgba(255,216,107,.55);
  --sun-glow:   rgba(255,216,107,.18);
  --foam:       rgba(255,255,255,.85);
  --drop:       rgba(170,220,255,.35);
  --sb-h:       40px;
}

/* Pousse la navbar fixe sous la bannière */
.season-summer .navbar { top: var(--sb-h); }

/* ============================================================
   1. BANNIÈRE ÉTÉ — au-dessus de la nav (fixed)
   ============================================================ */
.season-summer .summer-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  min-height: var(--sb-h);
  background: linear-gradient(90deg,
              rgba(8,8,8,.96) 0%,
              rgba(20,16,16,.96) 50%,
              rgba(8,8,8,.96) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,216,107,.18);
  color: var(--white);
  font-family: var(--fb);
  font-size: .85rem;
  letter-spacing: .03em;
  text-align: center;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.season-summer .summer-banner .sb-icon {
  font-size: 1rem;
  color: var(--sun);
  filter: drop-shadow(0 0 6px var(--sun-glow));
  animation: sb-sun-pulse 3.4s ease-in-out infinite;
}
.season-summer .summer-banner strong {
  color: var(--sun);
  font-weight: 700;
  letter-spacing: .04em;
}
.season-summer .summer-banner a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255,216,107,.5);
  text-underline-offset: 3px;
  font-weight: 600;
}
.season-summer .summer-banner a:hover {
  text-decoration-color: var(--sun);
  color: var(--sun);
}
.season-summer .sb-close {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.55);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  margin-left: 6px;
}
.season-summer .sb-close:hover { color: var(--white); }

@keyframes sb-sun-pulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 4px var(--sun-glow)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 12px rgba(255,216,107,.45)); }
}

@media (max-width: 600px) {
  .season-summer { --sb-h: 36px; }
  .season-summer .summer-banner { font-size: .78rem; padding: 8px 12px; gap: 8px; }
}

/* ============================================================
   2. BADGE "OFFRE ÉTÉ" — flottant en haut à droite du hero
   ============================================================ */
.season-summer .summer-badge {
  position: absolute;
  top: 110px;
  right: 36px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(135deg,
              rgba(224,0,18,.92) 0%,
              rgba(168,0,16,.92) 100%);
  border: 1px solid rgba(255,216,107,.55);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(224,0,18,.35),
              0 0 0 4px rgba(255,216,107,.08);
  font-family: var(--fh);
  color: var(--white);
  text-decoration: none;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  transform: rotate(-6deg);
  animation: badge-wobble 4.2s ease-in-out infinite;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.season-summer .summer-badge:hover {
  transform: rotate(-2deg) scale(1.06);
  box-shadow: 0 12px 40px rgba(224,0,18,.5),
              0 0 0 5px rgba(255,216,107,.18);
  color: var(--white);
}
.season-summer .summer-badge .sb-sun {
  font-size: 1.4rem;
  color: var(--sun);
  filter: drop-shadow(0 0 8px var(--sun-glow));
  animation: badge-sun-spin 14s linear infinite;
}
.season-summer .summer-badge .sb-small {
  display: block;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .12em;
  opacity: .85;
  margin-top: 2px;
}

@keyframes badge-wobble {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-4px); }
}
@keyframes badge-sun-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .season-summer .summer-badge {
    top: 86px; right: 14px;
    padding: 9px 14px 9px 11px;
    font-size: .68rem;
  }
  .season-summer .summer-badge .sb-sun { font-size: 1.1rem; }
  .season-summer .summer-badge .sb-small { font-size: .52rem; }
}

/* ============================================================
   3. DÉCORATIONS HERO — palmier + soleil
   ============================================================ */
.season-summer .hero { position: relative; overflow: hidden; }

.season-summer .summer-deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* Soleil avec rayons en bas à gauche du hero */
.season-summer .summer-sun {
  bottom: -120px;
  left: -120px;
  width: 360px;
  height: 360px;
  opacity: .14;
  animation: sun-rotate 60s linear infinite;
}
.season-summer .summer-sun svg { width: 100%; height: 100%; display: block; }
@keyframes sun-rotate { to { transform: rotate(360deg); } }

/* Palmier silhouette à droite du hero */
.season-summer .summer-palm {
  top: 20%;
  right: -40px;
  width: 200px;
  height: 380px;
  opacity: .07;
  filter: brightness(1.2);
  transform-origin: bottom center;
  animation: palm-sway 5.5s ease-in-out infinite;
}
.season-summer .summer-palm svg { width: 100%; height: 100%; display: block; }
@keyframes palm-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2.5deg); }
}

@media (max-width: 900px) {
  .season-summer .summer-palm { width: 140px; height: 260px; right: -30px; opacity: .05; }
  .season-summer .summer-sun  { width: 240px; height: 240px; bottom: -90px; left: -90px; opacity: .1; }
}

/* ============================================================
   4. VAGUES SVG — bas de sections clés
   ============================================================ */
.season-summer .summer-waves {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 3;
  opacity: .35;
}
.season-summer .summer-waves svg { width: 100%; height: 100%; display: block; }
.season-summer .summer-waves path { fill: var(--red); }

@media (max-width: 600px) {
  .season-summer .summer-waves { height: 40px; }
}

/* ============================================================
   5. PARTICULES DORÉES FLOTTANTES — couche globale
   ============================================================ */
.season-summer .summer-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.season-summer .sp-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 8px var(--sun-soft);
  opacity: 0;
  will-change: transform, opacity;
}

/* ============================================================
   6. SHIMMER — reflet "carrosserie polie" sur les CTA primaires
   ============================================================ */
.season-summer .btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.season-summer .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg,
              transparent 0%,
              rgba(255,216,107,.0) 20%,
              rgba(255,255,255,.45) 50%,
              rgba(255,216,107,.0) 80%,
              transparent 100%);
  transform: skewX(-22deg);
  animation: btn-shimmer 5.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes btn-shimmer {
  0%, 60% { left: -100%; }
  78%     { left: 130%; }
  100%    { left: 130%; }
}

/* ============================================================
   7. GOUTTES D'EAU — défilent sur les visuels "avant/après"
   ============================================================ */
.season-summer .summer-drops {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.season-summer .sd-drop {
  position: absolute;
  top: -20px;
  width: 6px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, var(--drop) 0%, rgba(170,220,255,.6) 100%);
  box-shadow: inset -1px -2px 3px rgba(255,255,255,.4),
              0 0 4px rgba(170,220,255,.3);
  opacity: 0;
  will-change: transform, opacity;
}

/* ============================================================
   8. ÉTOILES AVIS — halo doré subtil au survol
   ============================================================ */
.season-summer .testimonial .fa-star {
  transition: color .25s var(--ease), text-shadow .25s var(--ease), transform .25s var(--ease);
}
.season-summer .testimonial:hover .fa-star {
  color: var(--sun);
  text-shadow: 0 0 10px var(--sun-glow);
  transform: scale(1.05);
}

/* ============================================================
   9. PARASOL CURSEUR — petit clin d'œil sur les hover labels
   (optionnel — désactivable)
   ============================================================ */
.season-summer .label::before { transition: background .3s var(--ease); }
.season-summer .label:hover::before { background: var(--sun); box-shadow: 0 0 8px var(--sun-glow); }

/* ============================================================
   ACCESSIBILITÉ — désactive si prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .season-summer .summer-badge,
  .season-summer .summer-banner .sb-icon,
  .season-summer .summer-palm,
  .season-summer .summer-sun,
  .season-summer .btn-primary::after { animation: none !important; }
  .season-summer .summer-particles,
  .season-summer .summer-drops { display: none !important; }
}
