/* ===== Carrousel ED — FINAL (cyan + filigrane + onglets + flèches) ===== */

/* Conteneur */
.ed-page .ed-carousel {
  position: relative;
  padding: 2rem 0;
  background: #CDEFF2;            /* cyan uni */
  overflow: hidden;               /* évite les débordements */
}

/* Filigrane (photo), placé derrière le contenu */
.ed-page .ed-carousel::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('/sites/default/files/inline-images/ED_2.jpg'); /* ← ton URL */
  background-repeat: no-repeat;
  background-position: right 2rem bottom -1rem; /* à droite, légèrement plus bas */
  background-size: 520px auto;                  /* taille de base */
  opacity: .12;                                 /* discret */
  filter: grayscale(100%) contrast(105%) brightness(108%);
  pointer-events: none;
  z-index: 0;
}

/* Voile cyan doux qui fond l’image vers le haut (reste sous le contenu) */
.ed-page .ed-carousel::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top,
              rgba(205,239,242,1) 0%,
              rgba(205,239,242,.85) 30%,
              rgba(205,239,242,0) 60%);
  pointer-events:none;
  z-index: 1;
}

/* Le contenu (slides, flèches, onglets…) reste au-dessus */
.ed-page .ed-carousel__inner,
.ed-page .ed-carousel .tns-outer,
.ed-page .ed-carousel .tns-inner,
.ed-page .ed-carousel .tns-controls,
.ed-page .ed-carousel .tns-nav{
  position: relative;
  z-index: 2;
}

/* Piste (wrapper des slides) */
.ed-page .ed-carousel__track {}

/* Slides */
.ed-page .slide {
  padding: .5rem;
  box-sizing: border-box;
}

/* Carte dans chaque slide */
.ed-page .slide .block {
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  padding: clamp(1rem, 2vw, 1.5rem);
  height: 100%;
  backdrop-filter: saturate(120%) blur(0.5px);
}

/* ===== Onglets (nav) nommés ===== */
.ed-page .ed-carousel__tabs {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin: 0 1rem .75rem; padding-top: .25rem;
}
.ed-page .ed-carousel__tabs button {
  appearance: none; border: 1px solid rgba(0,0,0,.06);
  background: #fff; color: #222; font-weight: 700;
  padding: .45rem .75rem; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.ed-page .ed-carousel__tabs button:hover { transform: translateY(-1px); }
.ed-page .ed-carousel__tabs .tns-nav-active {
  background: #0779bf; color: #fff; border-color: transparent;
}

/* ===== Barre de progression ===== */
.ed-page .ed-carousel__progress {
  position: relative; height: 4px; border-radius: 999px;
  background: rgba(0,0,0,.08); margin: .5rem 1rem 0 1rem; overflow: hidden;
}
.ed-page .ed-carousel__progress span {
  position: absolute; inset: 0 auto 0 0;
  width: 0%; background: #0779bf; transition: width .25s ease; border-radius: 999px;
}

/* Contrôles tiny-slider : position et style */
.ed-page .ed-carousel .tns-controls,
.ed-page .ed-carousel .tns-nav {
  position: absolute;
  z-index: 3;
  pointer-events: auto;
}
.ed-page .ed-carousel .tns-controls [data-controls="prev"],
.ed-page .ed-carousel .tns-controls [data-controls="next"] {
  top: 50%;
  transform: translateY(-50%);
}
.ed-page .ed-carousel .tns-controls [data-controls="prev"] { left: .5rem; }
.ed-page .ed-carousel .tns-controls [data-controls="next"] { right: .5rem; }

/* Boutons flèches ronds */
.ed-page .ed-carousel .tns-controls button{
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.97);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  cursor: pointer;
}
.ed-page .ed-carousel .tns-controls button:hover{
  transform: translateY(-1px);
}

/* Le carrousel (bloc) occupe toute la ligne de la grille */
.ed-page .region-content > .ed-carousel {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

/* Le bloc de contenu principal (si présent) reste en pleine largeur */
.ed-page .region-content > .block-system-main-block { grid-column: 1 / -1; }

/* Masquer les blocs vides restants */
.ed-page .region-content > .block:empty,
.ed-page .region-content > .block > .content:empty,
.ed-page .region-content > .block.is-empty { display: none; }

/* ===== Badge Elie (B/B/R + photo) ===== */
.ed-page .ed-carousel .ed-badge{
  position:absolute;
  top:-26px; left:12px;
  display:flex; align-items:center; gap:.5rem;
  z-index:3;            /* au-dessus des slides/voiles */
  pointer-events:none;  /* ne bloque pas les clics du carrousel */
}
.ed-page .ed-carousel .ed-badge__ring{
  padding:3px; border-radius:999px;
  background: conic-gradient(#0055A4 0 120deg, #ffffff 120deg 240deg, #EF4135 240deg 360deg);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.ed-page .ed-carousel .ed-badge__ring img{
  display:block; width:64px; height:64px; object-fit:cover;
  border-radius:999px; border:3px solid #fff;
}
.ed-page .ed-carousel .ed-badge__name{
  font-weight:800; font-size:14px; color:#0b3d5d;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  padding:.2rem .55rem; border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 1024px){
  .ed-page .ed-carousel::before{ background-size: 420px auto; }
}
@media (max-width: 768px){
  .ed-page .ed-carousel .ed-badge{ top:-20px; left:10px; }
  .ed-page .ed-carousel .ed-badge__ring img{ width:52px; height:52px; }
  .ed-page .ed-carousel::before{
    background-position: center bottom -0.5rem;
    background-size: 70% auto;
    opacity: .10;
  }
}


/* ==== Badge Elie : plus grand, sans chevaucher les onglets ==== */
/* Variables de taille (faciles à ajuster) */
.ed-page .ed-carousel{
  --badge-size: 88px;   /* diamètre photo */
  --badge-ring: 5px;    /* épaisseur anneau tricolore */
  --badge-gap: 14px;    /* espace entre badge et premiers onglets */
}

/* Réserve de la place à gauche pour les onglets */
.ed-page .ed-carousel__tabs{
  margin-left: calc(var(--badge-size) + (var(--badge-ring) * 2) + var(--badge-gap) + 12px);
}

/* Placement et style du badge */
.ed-page .ed-carousel .ed-badge{
  position: absolute;
  top: calc(-1 * var(--badge-size) / 3);  /* remonte légèrement au-dessus */
  left: 12px;
  display: flex; align-items: center; gap: .5rem;
  z-index: 3;
  pointer-events: none;                 /* ne bloque pas les clics */
}
.ed-page .ed-carousel .ed-badge__ring{
  padding: var(--badge-ring);
  border-radius: 999px;
  background: conic-gradient(#0055A4 0 120deg, #ffffff 120deg 240deg, #EF4135 240deg 360deg);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.ed-page .ed-carousel .ed-badge__ring img{
  display: block;
  width: var(--badge-size);
  height: var(--badge-size);
  object-fit: cover;
  border-radius: 999px;
  border: 3px solid #fff;
}

/* (option) libellé à côté du badge si tu l’actives dans le JS */
.ed-page .ed-carousel .ed-badge__name{
  font-weight: 800; font-size: 14px; color: #0b3d5d;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  padding: .2rem .55rem; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  pointer-events: none;
}

/* ===== Responsive : badge un peu plus petit, et marge recalculée ===== */
@media (max-width: 1024px){
  .ed-page .ed-carousel{ --badge-size: 72px; --badge-ring: 4px; --badge-gap: 12px; }
  .ed-page .ed-carousel .ed-badge{ top: calc(-1 * var(--badge-size) / 3.5); }
}
@media (max-width: 640px){
  .ed-page .ed-carousel{ --badge-size: 56px; --badge-ring: 3px; --badge-gap: 10px; }
  /* si ça serre trop, on peut annuler la marge et laisser le badge déborder au-dessus */
  .ed-page .ed-carousel__tabs{
    margin-left: calc(var(--badge-size) + (var(--badge-ring) * 2) + var(--badge-gap) + 12px);
  }
}