/* ============================================================
   BANDEAUX.CSS — Les Cahiers APC
   Images défilantes posées EN FOND de deux zones existantes :
   l'en-tête du site et la section d'accueil de la vitrine.
   Les textes en place ne sont pas touchés : ils passent
   simplement au-dessus, avec un voile qui garantit la lecture.
   ============================================================ */

/* ── Couche de fond commune ──────────────────────────────── */
.bnd{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;          /* le fond ne vole pas les clics */
}
.bnd-piste{
  display:flex;
  height:100%;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.bnd-vue{ flex:0 0 100%; height:100%; }
.bnd-vue img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Voile de lisibilité, posé par-dessus les images */
.bnd::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

/* ── Commandes : elles, restent cliquables ───────────────── */
.bnd-pastilles{
  position:absolute;
  z-index:2;
  display:flex;
  gap:6px;
  pointer-events:auto;
}
.bnd-pastille{
  width:7px; height:7px;
  padding:0; border:0; border-radius:50%;
  background:currentColor;
  opacity:.34;
  cursor:pointer;
  transition:opacity .25s,width .25s,border-radius .25s;
}
.bnd-pastille.actif{ opacity:1; width:17px; border-radius:4px; }
.bnd-pastille:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

.bnd-fleche{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-size:19px; line-height:1; padding:0 0 2px;
  font-family:inherit;
  cursor:pointer;
  pointer-events:auto;
  transition:background .2s,opacity .2s;
}
.bnd-fleche:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

/* ════════════════════════════════════════════════════════════
   ZONE 1 — L'en-tête du site
   Les images passent derrière le logo et le titre, qui ne
   bougent pas. Voile sombre pour garder le blanc lisible.
   ════════════════════════════════════════════════════════════ */
.topbar{ position:sticky; isolation:isolate; }
.topbar > *:not(.bnd){ position:relative; z-index:2; }

.topbar .bnd::after{
  background:linear-gradient(100deg,
    rgba(10,38,32,.90) 0%,
    rgba(10,38,32,.78) 42%,
    rgba(27,83,67,.62) 100%);
}
.topbar .bnd-pastilles{
  right:14px; bottom:7px;
  color:#F2B705;
}
@media (max-width:560px){
  .topbar .bnd-pastilles{ right:10px; bottom:5px; }
  .topbar .bnd-pastille{ width:6px; height:6px; }
  .topbar .bnd-pastille.actif{ width:14px; }
}

/* ════════════════════════════════════════════════════════════
   ZONE 2 — La section d'accueil de la vitrine
   Mêmes textes, même bouton. Voile clair pour garder le
   bleu foncé du titre parfaitement lisible.
   ════════════════════════════════════════════════════════════ */
.v-hero{ isolation:isolate; }
.v-hero > *:not(.bnd){ position:relative; z-index:2; }

.v-hero .bnd::after{
  background:linear-gradient(180deg,
    rgba(240,246,243,.80) 0%,
    rgba(238,244,250,.72) 55%,
    rgba(238,244,250,.86) 100%);
}
.v-hero .bnd-pastilles{
  left:50%; transform:translateX(-50%);
  bottom:14px;
  color:#1B5343;
}
.v-hero .bnd-fleche{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(27,83,67,.24);
  color:#1B5343;
}
.v-hero .bnd-fleche:hover{ background:#fff; }
.v-hero .bnd-prec{ left:12px; }
.v-hero .bnd-suiv{ right:12px; }
@media (max-width:560px){
  .v-hero .bnd-fleche{ width:30px; height:30px; font-size:16px; }
  .v-hero .bnd-prec{ left:6px; }
  .v-hero .bnd-suiv{ right:6px; }
}

/* ════════════════════════════════════════════════════════════
   Entrée du concours dans la barre de navigation
   ════════════════════════════════════════════════════════════ */
.v-nav-item.v-nav-concours{ font-weight:700; }
.v-nav-item.v-nav-concours::after{
  content:"nouveau";
  display:inline-block;
  margin-left:6px;
  padding:2px 7px;
  font-size:9px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:#0A2620; background:#F2B705;
  border-radius:9px; vertical-align:middle;
}

/* ════════════════════════════════════════════════════════════
   Bloc du concours dans la vitrine
   ════════════════════════════════════════════════════════════ */
.v-concours{
  background:linear-gradient(135deg,#0A2620 0%,#1B5343 100%);
  color:#F4F0E2;
  border-radius:18px;
  padding:28px 26px;
  margin:26px 16px;
}
.v-concours h2{ color:#F2B705; margin:0 0 5px; font-size:22px; }
.v-concours .v-concours-sous{ color:rgba(244,240,226,.78); margin:0 0 14px; font-size:14px; }
.v-concours p{ line-height:1.62; margin:0 0 20px; color:rgba(244,240,226,.93); font-size:15px; }
.v-concours strong{ color:#F2B705; font-weight:600; }
.v-concours-boutons{ display:flex; flex-wrap:wrap; gap:10px; }
.v-concours-btn,.v-concours-btn-sec{
  display:inline-block; padding:13px 24px; border-radius:26px;
  font-weight:700; font-size:14.5px; font-family:inherit;
  cursor:pointer; text-decoration:none; text-align:center;
  border:2px solid #F2B705; transition:background .2s,color .2s;
}
.v-concours-btn{ background:#F2B705; color:#0A2620; }
.v-concours-btn:hover{ background:#ffca2b; border-color:#ffca2b; }
.v-concours-btn-sec{ background:transparent; color:#F2B705; }
.v-concours-btn-sec:hover{ background:rgba(242,183,5,.15); }
@media (max-width:560px){
  .v-concours{ padding:22px 18px; margin:20px 12px; }
  .v-concours-boutons{ flex-direction:column; }
  .v-concours-btn,.v-concours-btn-sec{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .bnd-piste{ transition:none; }
}