/* bandeau-annexe.css — bandeaux annexes sous header
   Version bordeaux + annonce importante traduisible + mobile corrigé */

:root{
  --b2-violet:#6F1830;
  --b2-violet-deep:#3D0C1E;
  --b2-violet-mid:#9A3A56;
  --b2-light:#FBF7F8;
  --b2-gold-1:#E8DCC8;
  --b2-gold-2:#C8AD7F;
  --b2-orange:#B85C3A;
  --b2-ink:#1D0D12;
}

/* =========================================================
   WRAPPER DES 2 BANDEAUX
   ========================================================= */

.bandeau2-row{
  --b2-card-h:166px;
  --b2-ease:cubic-bezier(.2,.7,.3,1);

  width:min(1500px, calc(100% - 56px));
  margin:clamp(14px, 2vw, 22px) auto -10px;
  padding-top:60px;

  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:stretch;
  gap:clamp(22px, 2.4vw, 36px);

  isolation:isolate;
  position:relative;
  z-index:20;
  overflow:visible;
}

/* Titre traduisible au-dessus des deux bandeaux */
.bandeau2-annonce{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:30;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:36px;
  padding:8px 20px;
  border-radius:999px;

  font-family:"Merriweather","Times New Roman",Georgia,serif;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;

  color:#FFF6F8;

  background:
    linear-gradient(
      135deg,
      var(--b2-violet-deep) 0%,
      var(--b2-violet) 52%,
      var(--b2-violet-mid) 100%
    );

  box-shadow:
    0 0 0 1px rgba(255,240,244,.55),
    0 12px 28px rgba(61,12,30,.26),
    0 0 26px rgba(154,58,86,.20);
}

.bandeau2-row.is-active,
.bandeau2-row.is-active-left,
.bandeau2-row.is-active-right{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(22px, 2.4vw, 36px);
}

.bandeau2-slot,
.bandeau2-row.is-active .bandeau2-slot,
.bandeau2-row.is-active .bandeau2-slot.is-active{
  min-width:0;
  height:auto;
  opacity:1;
  transform:none;
  overflow:visible;
  pointer-events:auto;
  visibility:visible;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* =========================================================
   CARTE
   ========================================================= */

.bandeau2-card,
.bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card{
  --b2-content-left:clamp(24px, 2vw, 32px);

  position:relative;
  height:var(--b2-card-h);
  min-height:var(--b2-card-h);

  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:"main cta";
  align-items:center;
  gap:14px 28px;

  padding:36px clamp(34px, 3vw, 44px) 34px var(--b2-content-left);

  border-radius:34px;
  overflow:hidden;
  text-decoration:none;
  color:var(--b2-ink);

  background-color:#FBF2F4;
  background:
    radial-gradient(
      140% 170% at 50% 10%,
      rgba(111,24,48,.18) 0%,
      rgba(154,58,86,.13) 30%,
      rgba(231,210,216,.72) 62%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.72) 0%,
      rgba(243,231,235,.78) 58%,
      rgba(253,245,247,.72) 100%
    );

  box-shadow:
    0 0 0 1px rgba(111,24,48,.12),
    0 26px 70px rgba(61,12,30,.15);

  background-clip:padding-box;
  backface-visibility:hidden;
  transform:translateZ(0);
  isolation:isolate;

  transition:
    transform .35s ease,
    filter .35s ease,
    box-shadow .35s ease;
}

.bandeau2-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:3;

  box-shadow:
    inset 0 0 0 1px rgba(255,244,247,.68),
    inset 0 0 0 2px rgba(111,24,48,.07);

  opacity:.95;
}

.bandeau2-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(
      120% 120% at 8% 0%,
      rgba(255,255,255,.64) 0%,
      rgba(255,255,255,.20) 34%,
      transparent 62%
    ),
    radial-gradient(
      90% 120% at 92% 10%,
      rgba(233,194,205,.34) 0%,
      rgba(233,194,205,.10) 42%,
      transparent 70%
    );

  opacity:.74;
}

.bandeau2-card:hover,
.bandeau2-card:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.015);
  box-shadow:
    0 0 0 1px rgba(111,24,48,.16),
    0 30px 78px rgba(61,12,30,.18);
}

.bandeau2-card:focus-visible{
  outline:2px solid rgba(111,24,48,.58);
  outline-offset:4px;
}

.bandeau2-card--preinscription{
  background-color:#FBF2F4;
  background:
    radial-gradient(
      140% 170% at 50% 10%,
      rgba(111,24,48,.20) 0%,
      rgba(154,58,86,.14) 32%,
      rgba(235,216,221,.72) 62%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.72) 0%,
      rgba(243,231,235,.78) 58%,
      rgba(253,245,247,.72) 100%
    );
}

.bandeau2-card--ete{
  background-color:#FBF2F4;
  background:
    radial-gradient(
      140% 170% at 50% 10%,
      rgba(111,24,48,.18) 0%,
      rgba(154,58,86,.12) 32%,
      rgba(235,216,221,.66) 62%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.72) 0%,
      rgba(244,234,237,.76) 58%,
      rgba(253,245,247,.72) 100%
    );
}

/* =========================================================
   EFFETS
   ========================================================= */

.bandeau2-card__shine{
  position:absolute;
  top:-45%;
  bottom:-45%;
  left:-35%;
  width:22%;
  z-index:2;
  pointer-events:none;
  transform:skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.12) 35%,
      rgba(255,255,255,.30) 50%,
      rgba(255,255,255,.12) 65%,
      rgba(255,255,255,0) 100%
    );

  animation:b2CardShine 6.2s ease-in-out infinite;
}

.bandeau2-card--ete .bandeau2-card__shine{
  animation-delay:2.15s;
}

.bandeau2-card__glow{
  position:absolute;
  width:260px;
  height:260px;
  right:-84px;
  top:-128px;
  border-radius:999px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.34) 0%,
      rgba(233,194,205,.18) 45%,
      rgba(255,255,255,0) 72%
    );

  pointer-events:none;
  z-index:0;
}

.bandeau2-card__orb{
  position:absolute;
  pointer-events:none;
  border-radius:999px;
  z-index:0;
  opacity:.34;

  background:
    radial-gradient(
      circle,
      rgba(233,194,205,.34),
      rgba(111,24,48,.05) 58%,
      transparent 72%
    );

  filter:blur(.2px);
}

.b2-o1{
  width:210px;
  height:210px;
  left:-70px;
  top:-60px;
}

.b2-o2{
  width:180px;
  height:180px;
  right:18%;
  bottom:-110px;

  background:
    radial-gradient(
      circle,
      rgba(232,220,200,.34),
      rgba(232,220,200,.06) 58%,
      transparent 72%
    );
}

.bandeau2-corner,
.bandeau2-card__panel{
  display:none !important;
}

/* =========================================================
   TEXTES
   ========================================================= */

.bandeau2-card__eyebrow,
.bandeau2-card__main,
.bandeau2-card__cta{
  position:relative;
  z-index:5;
}

.bandeau2-card__eyebrow,
.bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__eyebrow{
  position:absolute;
  top:24px;
  left:var(--b2-content-left);

  display:block;

  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-size:.86rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:rgba(111,24,48,.68);
}

.bandeau2-card__main,
.bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__main{
  grid-area:main;

  display:grid;
  gap:6px;
  align-self:center;

  padding-top:22px;
  min-width:0;
  max-width:none;
  transform:none;
  overflow:visible;
}

.bandeau2-card__title,
.bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__title{
  position:relative;
  display:inline-block;

  max-width:100%;
  padding-left:42px;

  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-size:clamp(1.34rem, 1.75vw, 1.82rem);
  line-height:1.08;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;

  color:var(--b2-violet);
  text-shadow:0 6px 16px rgba(61,12,30,.08);
}

.bandeau2-card__title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;

  width:32px;
  height:32px;
  border-radius:13px;

  display:inline-grid;
  place-items:center;

  transform:translateY(-50%);

  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-size:1rem;
  line-height:1;
  letter-spacing:.02em;

  color:#4B1E11;

  background:
    linear-gradient(
      135deg,
      var(--b2-gold-1),
      var(--b2-gold-2)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.58),
    0 8px 18px rgba(61,12,30,.14),
    0 0 18px rgba(200,173,127,.20);
}

.bandeau2-card--preinscription .bandeau2-card__title::before{
  content:"✎";
}

.bandeau2-card--ete .bandeau2-card__title::before{
  content:"☀";
  font-size:1.04rem;
}

.bandeau2-card__text,
.bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__text{
  display:block;
  max-width:58ch;
  margin-left:0;
  margin-top:6px;
  padding-left:0;
  padding-top:0;

  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-size:clamp(1rem, 1.05vw, 1.10rem);
  line-height:1.32;

  color:rgba(29,13,18,.88);
}

/* =========================================================
   CTA
   ========================================================= */

.bandeau2-card__cta,
.bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__cta{
  grid-area:cta;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  align-self:center;
  justify-self:end;

  white-space:nowrap;

  min-height:52px;
  min-width:0;
  padding:12px 22px;

  border-radius:999px;
  overflow:hidden;
  isolation:isolate;

  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.13em;
  text-transform:uppercase;

  color:#FFF4F7;

  background:
    radial-gradient(
      160% 220% at 20% 10%,
      rgba(255,244,247,.16) 0%,
      transparent 48%
    ),
    linear-gradient(135deg,#3D0C1E,#6F1830);

  box-shadow:
    0 0 0 1px rgba(255,236,241,.26),
    0 16px 38px rgba(61,12,30,.24);

  transition:
    transform .35s ease,
    filter .35s ease,
    box-shadow .35s ease;
}

.bandeau2-card__cta::before{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-28%;
  width:22%;
  transform:skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.18) 52%,
      rgba(255,255,255,0) 100%
    );

  animation:b2ButtonShine 4.2s ease-in-out infinite;
  pointer-events:none;
}

.bandeau2-card__cta svg{
  width:21px;
  height:21px;
  transition:transform .25s ease;
}

.bandeau2-card:hover .bandeau2-card__cta,
.bandeau2-card:focus-visible .bandeau2-card__cta{
  transform:translateY(-2px);
  filter:brightness(1.03);

  box-shadow:
    0 0 0 1px rgba(255,236,241,.30),
    0 18px 42px rgba(61,12,30,.28);
}

.bandeau2-card:hover .bandeau2-card__cta svg,
.bandeau2-card:focus-visible .bandeau2-card__cta svg{
  transform:translateX(3px);
}

/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width:1180px){
  .bandeau2-row,
  .bandeau2-row.is-active,
  .bandeau2-row.is-active-left,
  .bandeau2-row.is-active-right{
    width:min(1180px, calc(100% - 36px));
  }

  .bandeau2-annonce{
    font-size:.76rem;
    letter-spacing:.21em;
    padding:8px 18px;
  }

  .bandeau2-card,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card{
    --b2-content-left:22px;
    padding-left:var(--b2-content-left);
    padding-right:28px;
  }

  .bandeau2-card__title,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__title{
    font-size:clamp(1.22rem, 1.55vw, 1.66rem);
  }

  .bandeau2-card__cta,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__cta{
    min-height:50px;
    padding:12px 18px;
    font-size:.96rem;
    letter-spacing:.12em;
  }
}

/* =========================================================
   MOBILE / LARGEUR RÉDUITE
   ========================================================= */

@media (max-width:860px){
  .bandeau2-row,
  .bandeau2-row.is-active,
  .bandeau2-row.is-active-left,
  .bandeau2-row.is-active-right{
    width:min(720px, calc(100% - 24px));
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
    margin-bottom:-6px;
    padding-top:54px;
  }

  .bandeau2-annonce{
    min-height:32px;
    padding:7px 14px;
    font-size:.68rem;
    letter-spacing:.18em;
  }

  .bandeau2-card,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card{
    --b2-content-left:20px;

    height:auto;
    min-height:130px;

    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"main cta";
    align-items:center;
    gap:12px;

    padding:32px 20px 16px var(--b2-content-left);
    border-radius:24px;
  }

  .bandeau2-card__eyebrow,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__eyebrow{
    display:block;
    top:15px;
    left:var(--b2-content-left);
    font-size:.78rem;
    line-height:1;
    letter-spacing:.13em;
  }

  .bandeau2-card__text,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__text{
    display:none;
  }

  .bandeau2-card__main,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__main{
    grid-area:main;
    align-self:center;
    min-width:0;
    max-width:none;
    padding-top:8px;
    overflow:visible;
  }

  .bandeau2-card__title,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__title{
    padding-left:36px;
    font-size:clamp(1.12rem, 4.35vw, 1.44rem);
    line-height:1.06;
    letter-spacing:.015em;
    white-space:nowrap;
  }

  .bandeau2-card__title::before{
    width:30px;
    height:30px;
    border-radius:12px;
    font-size:.94rem;
  }

  .bandeau2-card--ete .bandeau2-card__title::before{
    font-size:.98rem;
  }

  .bandeau2-card__cta,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__cta{
    grid-area:cta;
    justify-self:end;
    align-self:center;
    min-height:46px;
    padding:10px 16px;
    font-size:.86rem;
    letter-spacing:.10em;
  }

  .bandeau2-card__cta svg{
    width:20px;
    height:20px;
  }
}

/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media (max-width:520px){
  .bandeau2-row,
  .bandeau2-row.is-active,
  .bandeau2-row.is-active-left,
  .bandeau2-row.is-active-right{
    width:min(100% - 22px, 520px);
    gap:12px;
    padding-top:50px;
  }

  .bandeau2-annonce{
    min-height:30px;
    padding:6px 12px;
    font-size:.60rem;
    letter-spacing:.14em;
  }

  .bandeau2-card,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card{
    --b2-content-left:18px;

    min-height:116px;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;

    padding:30px 16px 14px var(--b2-content-left);
  }

  .bandeau2-card__eyebrow,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__eyebrow{
    display:block;
    top:13px;
    left:var(--b2-content-left);
    font-size:.70rem;
    letter-spacing:.12em;
  }

  .bandeau2-card__main,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__main{
    min-width:0;
    overflow:visible;
    padding-top:6px;
  }

  .bandeau2-card__title,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__title{
    padding-left:31px;
    font-size:clamp(1.02rem, 4.55vw, 1.28rem);
    line-height:1.05;
    letter-spacing:0;
    white-space:nowrap;
  }

  .bandeau2-card__title::before{
    width:26px;
    height:26px;
    border-radius:10px;
    font-size:.82rem;
  }

  .bandeau2-card--ete .bandeau2-card__title::before{
    font-size:.84rem;
  }

  .bandeau2-card__cta,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__cta{
    min-height:40px;
    padding:8px 12px;
    gap:8px;
    font-size:.70rem;
    letter-spacing:.06em;
  }

  .bandeau2-card__cta svg{
    width:17px;
    height:17px;
  }
}

/* =========================================================
   AUTOUR DE 450PX
   ========================================================= */

@media (max-width:460px){
  .bandeau2-card,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card{
    min-height:112px;
    padding-left:14px;
    padding-right:12px;
    gap:8px;
  }

  .bandeau2-card__eyebrow,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__eyebrow{
    left:14px;
    font-size:.66rem;
    letter-spacing:.10em;
  }

  .bandeau2-card__title,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__title{
    padding-left:29px;
    font-size:clamp(.96rem, 4.25vw, 1.16rem);
    line-height:1.05;
    letter-spacing:0;
  }

  .bandeau2-card__title::before{
    width:24px;
    height:24px;
    border-radius:9px;
    font-size:.74rem;
  }

  .bandeau2-card--ete .bandeau2-card__title::before{
    font-size:.76rem;
  }

  .bandeau2-card__cta,
  .bandeau2-row.is-active .bandeau2-slot.is-active .bandeau2-card__cta{
    min-height:38px;
    padding:8px 10px;
    font-size:.62rem;
    letter-spacing:.045em;
  }

  .bandeau2-card__cta svg{
    width:15px;
    height:15px;
  }
}

/* =========================================================
   RAPPROCHEMENT DU CONTENU SUIVANT
   ========================================================= */

.bandeau2-row + .page-main{
  padding-top:24px;
}

@media (max-width:860px){
  .bandeau2-row + .page-main{
    padding-top:18px;
  }
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  .bandeau2-row,
  .bandeau2-slot,
  .bandeau2-card,
  .bandeau2-card *,
  .bandeau2-card *::before,
  .bandeau2-card *::after{
    transition:none !important;
    animation:none !important;
  }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes b2CardShine{
  0%{
    left:-35%;
    opacity:0;
  }

  12%{
    opacity:1;
  }

  44%{
    left:128%;
    opacity:1;
  }

  55%{
    opacity:0;
  }

  100%{
    left:128%;
    opacity:0;
  }
}

@keyframes b2ButtonShine{
  0%{
    left:-28%;
  }

  42%{
    left:125%;
  }

  100%{
    left:125%;
  }
}