/* ==================================================================
   Bande promotionnelle + panneau déroulant
   ------------------------------------------------------------------
   Ce fichier anime l’ouverture via clip-path *et* max-height.
   - clip-path fournit une découpe nette sur les navigateurs modernes.
   - max-height assure un déroulé visible même si clip-path n’est pas
     interpolé (mode reduce motion, GPU désactivé, vieux moteurs…).
   ================================================================== */

:root {
  --band-bg: #f3f5f9;                 /* fond bande */
  --band-fg: #0b2742;                 /* texte bande */
  --panel-bg: #cccbcbdb;                /* fond panneau */
  --panel-fg: #1f2937;                /* texte panneau */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,.08);
  --maxw: 1100px;

  /* Animations */
  --open-ms: 900ms;                   /* durée ouverture/fermeture */
  --content-ms: 500ms;                /* fade/slide du contenu interne */
  --panel-max-h: 1600px;              /* hauteur plafond pour max-height */

  /* Permet de décaler l’apparition sous le “fold” si besoin */
  --fold-extra: 0px;
}

/* wrapper pour gérer l’espacement global */
.band-and-panel {
  position: relative;
  width: 100%;
  margin-top: 1.25rem;
  padding-bottom: 1rem;
}

/* Variante : commencer sous la zone visible (fold) */
.reveal-after-fold {
  margin-top: calc(100vh + var(--fold-extra));
}

/* ------------------------------------------------------------------
   B A N D E
   ------------------------------------------------------------------ */
.blue-band {
  width: 100%;
  background: var(--band-bg);
  color: var(--band-fg);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 0;
  cursor: default;
  z-index: 99;

  /* UX : reste en haut une fois atteinte */
  position: sticky;
  top: 0;

  /* Révélation douce au scroll (si utilisée avec IO) */
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease, transform 400ms ease;
}

.reveal-after-fold .blue-band.is-inview {
  opacity: 1;
  transform: none;
}

.band-inner {
  width: min(var(--maxw), 92vw);
  margin: 0 auto;
  text-align: center;
}

.band-inner h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.15;
}

.band-inner .subtitle {
  margin: .25rem 0 0;
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  opacity: .75;
}

/* ------------------------------------------------------------------
   P A N N E A U   (slide-down)
   ------------------------------------------------------------------ */
.slide-down {
  background: var(--panel-bg);
  color: var(--panel-fg);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: 0;                                                    /* fermé = sans padding */

  /* Double stratégie : clip-path + max-height */
  clip-path: inset(0 0 100% 0);
  max-height: 0;

  will-change: clip-path, padding, max-height;
  transition:
    clip-path var(--open-ms) cubic-bezier(.2,.8,.2,1),
    max-height var(--open-ms) cubic-bezier(.2,.8,.2,1),
    padding calc(var(--open-ms) * .7) ease;
}

/* Ouverture au survol, focus clavier, etc. */
.blue-band:hover + .slide-down,
.slide-down:hover,
.band-and-panel:focus-within .slide-down {
  clip-path: inset(0 0 0 0);
  max-height: var(--panel-max-h);
  padding: 1rem 0 1.25rem;
}

.panel-inner {
  width: min(var(--maxw), 92vw);
  margin: 0 auto;
  overflow: hidden;                                              /* évite tout débordement pendant l’anim */
}

/* Effet “fade/slide-in” des éléments internes */
.panel-inner > * {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--content-ms) ease,
              transform var(--content-ms) ease;
}

.blue-band:hover + .slide-down .panel-inner > *,
.slide-down:hover .panel-inner > *,
.band-and-panel:focus-within .panel-inner > * {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;                                       /* léger décalage après l’ouverture */
}

/* ------------------------------------------------------------------
   Fallback : clip-path indisponible => on garde max-height seulement
   ------------------------------------------------------------------ */
@supports not (clip-path: inset(0 0 0 0)) {
  .slide-down {
    clip-path: none;
  }
}

/* ------------------------------------------------------------------
   Mode “prefers-reduced-motion” : on passe en ouverture max-height
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .slide-down {
    clip-path: none;
    transition:
      max-height var(--open-ms) ease,
      padding calc(var(--open-ms) * .7) ease;
  }

  .blue-band:hover + .slide-down,
  .slide-down:hover,
  .band-and-panel:focus-within .slide-down {
    max-height: var(--panel-max-h);
  }
}

/* Mobile : timings un peu plus courts */
@media (max-width: 640px) {
  :root {
    --open-ms: 700ms;
    --content-ms: 400ms;
  }
}