/* =========================
   05-pages.css
   HERO + Programme + Équipe + Vidéo + page sections backgrounds
   (nettoyé, cohérent, rendu identique)
========================= */

/* HERO (plus haut) */
.hero{
  position: relative;
  padding: 106px 0 86px;
  overflow:hidden;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.hero__bg{
  position:absolute;
  inset: 0;
  background: url("assets/img/fond-bandeau.jpg") center/cover no-repeat;
  filter: blur(12px);
  transform: scale(1.10);
}

.hero__overlay{
  position:absolute;
  inset: 0;
}

.hero__grid{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: stretch; /* ✅ pour que la partie droite se cale bas */
}

.hero__left{ min-width: 0; }

.hero__title{
  margin: 16px 0 10px;
  letter-spacing: -1px;
  line-height: var(--lh-tight);
  font-size: clamp(40px, 4.1vw, 70px);
}

.hero__title--accent{
  position: relative;
  font-weight: 600;
}

.hero__title--accent::after{
  content:"";
  display:block;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(255,230,0,.98), rgba(53,200,74,.98));
}

.hero__lead{
  margin:0;
  color: rgba(15,23,42);
  font-size: 18px;
  line-height: 1.85;
  max-width: 78ch;
  padding-top: 25px;
  padding-bottom: 25px;
}

.hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Mobile : bandeau confortable */
@media (max-width: 820px){
  .hero{
    padding: 72px 0 44px;
  }
  .hero__grid{ grid-template-columns: 1fr; }
}

/* Section backgrounds */
#programme{
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(255, 240, 15, 0.25), transparent 60%),
    radial-gradient(820px 520px at 82% 30%, rgba(128, 255, 0, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(233,237,242,.88), rgb(224, 241, 210));
}

#priorites{
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(255, 240, 15, 0), rgba(247,235,198,0) 60%),
    radial-gradient(820px 520px at 82% 30%, rgba(246, 239, 182, 0.1), rgba(255,251,184,0.15) 60%),
    linear-gradient(180deg, rgba(233,237,242,.88), rgba(235, 241, 220, 0.94));
}

#contact{
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(255, 240, 15, 0.25), transparent 60%),
    radial-gradient(820px 520px at 82% 30%, rgba(128, 255, 0, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(233,237,242,.88), rgb(224, 241, 210));
}

/* =========================
   PROGRAMME – PRO + RESPONSIVE
========================= */

.programmeGrid{ align-items: stretch; }

#programme .module--equal{
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

/* bouton en bas */
#programme .btn--more{
  width: fit-content;
  margin-top: auto;
  margin-left: auto;
  display: inline-flex;
  background: linear-gradient(135deg, rgba(53, 200, 74, 0.49), rgba(255, 230, 0, 0.76));
}

/* fond module : filigrane */
#programme .module{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}

/* supprime ancien radial */
#programme .module::before{ display:none !important; }

/* watermark */
#programme .module::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,0.99)),
    var(--wm) center/cover no-repeat;
  opacity: 1;
  filter: saturate(1.0) contrast(1.0);
  pointer-events:none;
  z-index: 0;
}

#programme .module .module__top,
#programme .module .list,
#programme .module .module__more,
#programme .module .btn{
  position: relative;
  z-index: 1;
}

/* list compact */
#programme .list--compact{
  margin: 16px 20px 0px;
  gap: 10px;
}

#programme .list--compact li{
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* more */
#programme .module__more{
  display:none;
  margin: 12px 20px 0;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.82);
  line-height: 1.7;
}

#programme .module[data-more="true"] .module__more{ display:block; }
#programme .module[data-more="true"] .btn--more i{ transform: rotate(45deg); }

/* banner priorité */
.priorityBanner{
  margin: 16px 20px 0;
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(53,200,74,.18), rgba(255,230,0,.20));
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 600;
  color: rgba(15,23,42,.88);
  line-height: 1.7;
}

/* Watermarks */
#programme .module--eco{ --wm: url("assets/img/ludovic-sautron-emploi-economie-jeunesse-mairie-ile-de-la-reunion-election-974-saint-denis.jpg"); }
#programme .module--mob{ --wm: url("assets/img/ludovic-sautron-mobilite-energies-tram-velo-mairie-ile-de-la-reunion-election-974-saint-denis.jpg"); }
#programme .module--senior{ --wm: url("assets/img/ludovic-sautron-mobilite-personnes-agee-mairie-ile-de-la-reunion-election-974-saint-denis.jpg"); }
#programme .module--agri{ --wm: url("assets/img/ludovic-sautron-agriculture-mairie-ile-de-la-reunion-election-974-saint-denis.jpg"); }
#programme .module--edu{ --wm: url("assets/img/ludovic-sautron-education-mairie-ile-de-la-reunion-election-974-saint-denis.jpg"); }
#programme .module--staff{ --wm: url("assets/img/ludovic-sautron-mairie-ile-de-la-reunion-election-974-saint-denis.jpg"); }
#programme .module--animals{ --wm: url("assets/img/ludovic-sautron-mairie-ile-de-la-reunion-election-974-saint-denis-animaux.jpg"); }
#programme .module--priority{ --wm: url("assets/img/ludovic-sautron-reunion.png"); }

/* layout animals/priority */
#programme .module--animals{ grid-column: 1 / span 1; }
#programme .module--prioritySide{ grid-column: 2 / span 2; }

#programme .module--prioritySide .priorityBanner{
  font-size: 16px;
  padding: 20px 18px;
  text-align:center;
}
#programme .module--prioritySide h3{ font-size: 18px; }

/* responsive programme */
@media (max-width: 980px){
  #programme .module--equal{ min-height: 340px; }
  #programme .module--animals{ grid-column: 1 / -1; }
  #programme .module--prioritySide{ grid-column: 1 / -1; }
}

@media (max-width: 820px){
  #programme .module--equal{ min-height: auto; }
  #programme .list--compact li{ white-space: normal; }
  #programme .list--compact{ margin: 16px 14px 0px; }
  #programme .module__more{ margin: 12px 14px 0; }
  .priorityBanner{ margin: 16px 14px 0; }
}

/* =========================
   HERO RIGHT : VIDEO CARD
========================= */

.hero__right{
  justify-self: end;
  align-self: end;
  width: 80%;
  max-width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}

.hero__right .card--portrait{
  margin-left: auto;
  margin-right: 0;
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
}

@media (min-width: 1200px){
  .hero__right .card--portrait{ max-width: 560px; }
}

@media (max-width: 820px){
  .hero__right{
    width: 100% !important;
    justify-self: stretch;
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  .hero__right .card--portrait{
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
  }
}

@media (max-width: 520px){
  .hero__right .card--portrait{ padding: 10px; }
}

/* card portrait */
.card--portrait{
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(15,23,42,.14);
  backdrop-filter: blur(10px);
}

.card--portrait::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(circle at 25% 20%, rgba(53,200,74,.18), transparent 55%),
    radial-gradient(circle at 75% 25%, rgba(255,230,0,.18), transparent 55%),
    radial-gradient(circle at 50% 85%, rgba(15,23,42,.08), transparent 55%);
  pointer-events:none;
  z-index: 0;
}

.card--portrait > *{ position: relative; z-index: 1; }

/* frame */
.portraitFrame{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,0.06);
  aspect-ratio: 1500 / 1874;
}

/* video */
.portraitVideo{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}

/* dock */
.videoDock{
  margin-top: 10px;
  margin-bottom: 6px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border-radius: 16px;
  background: rgba(15,23,42,.10);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
}

.videoDock > *{ min-width: 0 !important; flex-shrink: 1; }

.dockCenter{
  flex: 1 1 auto;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dockBtn{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background:radial-gradient(circle at 30% 20%, rgba(255,230,0,.28), transparent 48%), radial-gradient(circle at 85% 25%, rgba(47,230,92,.22), transparent 50%), radial-gradient(circle at 75% 85%, rgba(57,210,255,.20), transparent 55%) !important;
  color: rgba(15,23,42,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}

.dockBtn:hover{ background: rgba(255,255,255,.92); }
.dockBtn:active{ transform: translateY(1px); }

.dockTime{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
  font-size: 11px;
  color: rgba(15,23,42,.75);
  white-space: nowrap;
  margin-bottom: -10px;
}

.dockSep{ opacity: .55; }

.seekBar{
  width: 100%;
  height: 4px;
  accent-color: var(--green);
  cursor: pointer;
}

.volumeBar{
  flex: 0 1 90px;
  width: 90px;
  min-width: 55px;
  max-width: 90px;
  accent-color: var(--yellow);
  cursor: pointer;
}

/* loader (futuriste) */
.portraitFrame{ position: relative; overflow: hidden; }

.videoLoader{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .25s ease, transform .25s ease;
}

.videoLoader.is-on{
  opacity: 1;
  transform: scale(1);
}

.videoLoader .vl__glass{
  width: min(88%, 320px);
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(15, 23, 42, .52);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 70px rgba(15,23,42,.38);
  position: relative;
  overflow: hidden;
}

.videoLoader .vl__glass::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 30% 20%, rgba(53,200,74,.22), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(255,230,0,.18), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
  filter: blur(2px);
}

.videoLoader .vl__ring{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  margin: 0 auto 10px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  border-right-color: rgba(53,200,74,.75);
  box-shadow: 0 0 0 6px rgba(53,200,74,.08);
  animation: vlSpin 1s linear infinite, vlPulse 1.2s ease-in-out infinite;
}

@keyframes vlSpin{ to { transform: rotate(360deg); } }

@keyframes vlPulse{
  0%,100%{ box-shadow: 0 0 0 6px rgba(53,200,74,.08); }
  50%{ box-shadow: 0 0 0 10px rgba(53,200,74,.14); }
}

.videoLoader .vl__txt{ text-align: center; position: relative; z-index: 1; }
.videoLoader .vl__title{ color: rgba(255,255,255,.92); font-weight: 900; letter-spacing: .2px; font-size: 14px; }
.videoLoader .vl__sub{ margin-top: 4px; color: rgba(255,255,255,.72); font-weight: 700; font-size: 12px; }

.videoLoader .vl__bar{
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
  position: relative;
}

.videoLoader .vl__barFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(53,200,74,.90), rgba(255,230,0,.85));
  transition: width .18s ease;
}

.videoLoader .vl__barGlow{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-80%);
  animation: vlShimmer 1.2s linear infinite;
  pointer-events:none;
}

@keyframes vlShimmer{ to { transform: translateX(80%); } }

.videoLoader .vl__scan{
  position:absolute;
  left:-20%;
  right:-20%;
  height: 2px;
  top: 0;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 18px rgba(255,255,255,.18);
  animation: vlScan 1.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes vlScan{
  0%{ transform: translateY(-10px); opacity:.0; }
  15%{ opacity:.7; }
  50%{ transform: translateY(110px); opacity:.35; }
  100%{ transform: translateY(240px); opacity:0; }
}

/* portrait meta/actions */
.portraitMeta{ margin-top: 8px; padding: 6px 6px 0; }

.portraitName{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.2px;
  color: rgba(15,23,42,.92);
}

.portraitRole{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(15,23,42,.68);
  line-height: 1.45;
}

.portraitActions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.portraitActions .btn{
  flex: 1 1 160px;
  justify-content: center;
}

/* mobile dock */
@media (max-width: 520px){
  .videoDock{ padding: 7px 8px; gap: 6px; }
  #timeTotal, .dockSep{ display:none; }
  .volumeBar{ display:none; }
  .dockCenter{ min-width: 140px; }
  .dockBtn{ flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; }

  .videoLoader .vl__glass{ width: min(92%, 300px); padding: 12px 12px 10px; border-radius: 16px; }
  .videoLoader .vl__ring{ width: 40px; height: 40px; }
}

@media (max-width: 380px){
  #btnBack, #btnForward{ display:none; }
  .dockCenter{ min-width: 160px; }
  .seekBar{ min-width: 120px; }
}

/* =========================
   ÉQUIPE — cartes alignées + photo
========================= */

:root{
  --memberPhotoW: 130px;
  --memberTextH: clamp(132px, 11vw, 160px);
}

.member{
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow2);
  padding: 18px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  background: radial-gradient(circle at 30% 20%, rgba(255,230,0,.28), transparent 48%), radial-gradient(circle at 85% 25%, rgba(47,230,92,.22), transparent 50%), radial-gradient(circle at 75% 85%, rgba(57,210,255,.20), transparent 55%) !important;
  opacity: .95 !important;
}

.member__avatar{
  width: 52px; height: 52px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 600;
  background: rgba(53,200,74,.14);
  border: 1px solid rgba(53,200,74,.20);
}

.member h3{ margin: 0 0 6px;}
.member p{ margin: 0; color: rgba(15,23,42,.76); line-height: 1.7; }
.member p.muted{ color: var(--muted); margin-bottom: 10px; }

.member--withPhoto .member__body{
  display: grid;
  grid-template-columns: 1fr var(--memberPhotoW);
  gap: 14px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.member--withPhoto .member__text{
  height: var(--memberTextH);
  min-height: var(--memberTextH);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.member--withPhoto .member__text p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.member--withPhoto .member__text p:last-child{
  -webkit-line-clamp: 2;
}

.member--withPhoto .member__photo{
  width: var(--memberPhotoW);
  height: var(--memberTextH);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.55);
  box-shadow: 0 14px 40px rgba(15,23,42,.14);
  position: relative;
}

.member--withPhoto .member__photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.member--withPhoto .member__photo::after{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    radial-gradient(circle at 30% 20%, rgba(53,200,74,.18), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(255,230,0,.16), transparent 55%);
  pointer-events:none;
  transform: rotate(12deg);
  opacity: .55;
}

@media (max-width: 820px){
  :root{ --memberTextH: clamp(128px, 16vw, 150px); }
}

@media (max-width: 520px){
  :root{ --memberPhotoW: 110px; }
}

@media (max-width: 380px){
  :root{ --memberPhotoW: 96px; }
}



/* =========================
 PROGRAMME READER (page)
========================= */

.programmeReader .section__head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:14px;
}
.programmeReader__headActions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.programmeReader__layout{
display:grid;
grid-template-columns: 1.35fr .65fr;
gap: 18px;
align-items:start;
}

@media (max-width: 980px){
.programmeReader__layout{ grid-template-columns: 1fr; }
}

/* LEFT panel */
.programmeReader__panel{
border-radius: 22px;
overflow:hidden;
background: rgba(255,255,255,.84);
border: 1px solid rgba(15,23,42,.10);
box-shadow: 0 22px 70px rgba(15,23,42,.12);
backdrop-filter: blur(10px);
}

.programmeReader__hero{
position: relative;
min-height: 220px;
background:
  radial-gradient(900px 460px at 12% 18%, rgba(255,230,0,.25), transparent 58%),
  radial-gradient(820px 520px at 82% 30%, rgba(53,200,74,.18), transparent 60%),
  linear-gradient(180deg, rgba(233,237,242,.92), rgba(235, 241, 220, 0.96));
}
.programmeReader__hero:not(.programmeReader__hero--noimg)::before{
content:"";
position:absolute;
inset:0;
background: var(--pr-hero) center/cover no-repeat;
filter: blur(14px) saturate(1.1);
transform: scale(1.08);
opacity: .32;
pointer-events:none;
}
.programmeReader__heroInner{
position: relative;
z-index: 1;
padding: 18px 18px 16px;
}
.programmeReader__chip{
display:inline-flex;
align-items:center;
gap:8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,.68);
border: 1px solid rgba(15,23,42,.10);
font-weight: 800;
color: rgba(15,23,42,.78);
}
.programmeReader__dot{ opacity:.55; }

.programmeReader__title{
margin: 14px 0 8px;
font-size: clamp(22px, 2.2vw, 34px);
letter-spacing: -.5px;
font-weight: 900;
color: rgba(15,23,42,.92);
}
.programmeReader__summary{
margin:0;
max-width: 75ch;
font-weight: 700;
color: rgba(15,23,42,.72);
line-height: 1.7;
}

/* progress bar */
.programmeReader__progress{
height: 6px;
background: rgba(15,23,42,.08);
}
.programmeReader__bar{
height: 100%;
width: 0%;
background: linear-gradient(90deg, rgba(53,200,74,.95), rgba(255,230,0,.95));
transition: width .15s ease;
}

/* content */
.programmeReader__content{
padding: 18px 18px 6px;
color: rgba(15,23,42,.88);
line-height: 1.85;
}
.programmeReader__content h2,
.programmeReader__content h3{
margin-top: 18px;
}
.programmeReader__content p{
margin: 10px 0;
}

/* footer actions */
.programmeReader__footer{
padding: 14px 18px 18px;
display:flex;
justify-content:space-between;
gap: 12px;
flex-wrap:wrap;
}

/* RIGHT nav */
.programmeReader__nav{
position: sticky;
top: 92px;
border-radius: 22px;
overflow:hidden;
background: rgba(255,255,255,.70);
border: 1px solid rgba(15,23,42,.10);
box-shadow: 0 22px 70px rgba(15,23,42,.10);
backdrop-filter: blur(10px);
}

.programmeReader__navHead{
padding: 14px 14px 12px;
display:flex;
justify-content:space-between;
align-items:center;
background: rgba(15,23,42,.04);
border-bottom: 1px solid rgba(15,23,42,.08);
}
.programmeReader__navTitle{
font-weight: 900;
letter-spacing: -.2px;
display:flex;
gap: 8px;
align-items:center;
}
.programmeReader__navHint{
font-weight: 800;
font-size: 12px;
color: rgba(15,23,42,.55);
}
.programmeReader__navList{
padding: 12px;
display:flex;
flex-direction:column;
gap: 10px;
}

/* Buttons with background featured image */
.programmeBtn{
display:block;
text-decoration:none;
border-radius: 18px;
overflow:hidden;
border: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.88);
box-shadow: 0 12px 36px rgba(15,23,42,.10);
transform: translateY(0);
transition: transform .12s ease, box-shadow .12s ease;
position: relative;
}
.programmeBtn::before{
content:"";
position:absolute;
inset:0;
background:
  linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.98)),
  var(--pr-btn-bg) center/cover no-repeat;
opacity: 1;
filter: saturate(1.05) contrast(1.02);
}
.programmeBtn__inner{
position: relative;
z-index: 1;
padding: 12px 12px 10px;
}
.programmeBtn__top{
display:flex;
justify-content:space-between;
gap: 10px;
align-items:flex-start;
}
.programmeBtn__title{
font-weight: 900;
color: rgba(15,23,42,.92);
line-height: 1.25;
}
.programmeBtn__time{
flex: 0 0 auto;
font-weight: 900;
font-size: 12px;
color: rgba(15,23,42,.65);
background: rgba(255,255,255,.72);
border: 1px solid rgba(15,23,42,.10);
padding: 6px 8px;
border-radius: 999px;
}
.programmeBtn__excerpt{
  margin-top: 8px;
  font-weight: 400;
  color: rgba(15,23,42,.65);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: .1px;
}
.programmeBtn:hover{
border-color: rgba(3, 5, 3, 0.65);
box-shadow: 0 2px 3px rgba(89, 92, 88, 0.65);
}
.programmeBtn.is-active{
border-color: rgba(3, 5, 3, 0.65);
box-shadow: 0 1px 2px rgba(89, 92, 88, 0.65);
}

/* Focus mode */
body.programme-focus .site-header,
body.programme-focus .footer,
body.programme-focus .programmeReader__nav{
opacity: .22;
filter: blur(1px);
pointer-events:none;
}
body.programme-focus .programmeReader__panel{
transform: translateY(-1px);
box-shadow: 0 28px 90px rgba(15,23,42,.18);
}

/* Loader panel */
.programmeReader__panel{ position: relative; }

.programmeReader__loading{
position:absolute;
inset:0;
display:grid;
place-items:center;
background: rgba(255,255,255,.55);
backdrop-filter: blur(10px);
opacity:0;
pointer-events:none;
transition: opacity .18s ease;
z-index: 50;
}

.programmeReader__loading.is-on{
opacity: 1;
pointer-events: all;
}

.prLoadGlass{
width: min(92%, 360px);
border-radius: 18px;
padding: 14px 14px 12px;
background: rgba(15, 23, 42, .55);
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 24px 70px rgba(15,23,42,.38);
}

.prLoadRing{
width: 44px;
height: 44px;
border-radius: 999px;
margin: 0 auto 10px;
border: 2px solid rgba(255,255,255,.18);
border-top-color: rgba(255,255,255,.85);
border-right-color: rgba(53,200,74,.75);
animation: prSpin 1s linear infinite;
}

@keyframes prSpin{ to { transform: rotate(360deg); } }

.prLoadTxt{ text-align:center; }
.prLoadTitle{ color: rgba(255,255,255,.92); font-weight: 900; font-size: 14px; }
.prLoadSub{ margin-top: 4px; color: rgba(255,255,255,.72); font-weight: 800; font-size: 12px; }

/* Accessibilité */
.sr-only{
position:absolute !important;
width:1px; height:1px;
padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0);
white-space:nowrap; border:0;
}

/* LED Reader */
.ledReader{
margin-top: 14px;
border-radius: 18px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.55);
backdrop-filter: blur(10px);
box-shadow: 0 18px 44px rgba(15,23,42,.10);
overflow: hidden;
position: relative;
}

.ledReader::before{
content:"";
position:absolute;
inset:-60px;
background:
  radial-gradient(circle at 20% 20%, rgba(53,200,74,.18), transparent 55%),
  radial-gradient(circle at 80% 30%, rgba(255,230,0,.18), transparent 55%),
  radial-gradient(circle at 50% 90%, rgba(15,23,42,.10), transparent 55%);
filter: blur(6px);
pointer-events:none;
}

.ledReader > *{ position:relative; z-index:1; }

.ledReader__top{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid rgba(15,23,42,.10);
}

.ledBadge{
display:flex;
align-items:center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(15,23,42,.60);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 14px 40px rgba(15,23,42,.18);
color: rgba(255,255,255,.88);
font-weight: 900;
letter-spacing: .6px;
font-size: 11px;
}

.ledDot{
width: 10px; height: 10px; border-radius: 999px;
background: rgba(53,200,74,.95);
box-shadow: 0 0 0 6px rgba(53,200,74,.12), 0 0 18px rgba(53,200,74,.35);
}

.ledMode{
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255,230,0,.22);
border: 1px solid rgba(255,255,255,.12);
font-weight: 900;
}

.ledSpeed{
display:flex;
align-items:center;
gap: 10px;
padding: 8px 10px;
border-radius: 14px;
background: rgba(255,255,255,.55);
border: 1px solid rgba(15,23,42,.10);
}

#ledRate{
width: 140px;
accent-color: var(--green);
cursor: pointer;
}

.ledRateText{
font-weight: 900;
font-size: 12px;
color: rgba(15,23,42,.75);
min-width: 48px;
text-align: right;
}

.ledReader__screen{
padding: 14px;
background: rgba(15,23,42,.86);
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
}

.ledScreen__title{
color: rgba(255,255,255,.92);
font-weight: 950;
letter-spacing: .2px;
font-size: 14px;
}

.ledScreen__sub{
margin-top: 6px;
color: rgba(255,255,255,.72);
font-weight: 800;
font-size: 12px;
line-height: 1.5;
max-width: 68ch;
}

.ledReader__controls{
display:flex;
gap: 10px;
align-items:center;
padding: 12px 14px;
background: rgba(255,255,255,.55);
}

.ledBtn{
width: 44px; height: 44px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.78);
color: rgba(15,23,42,.92);
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition: transform .12s ease, background .12s ease;
box-shadow: 0 12px 26px rgba(15,23,42,.10);
}

.ledBtn:hover{ background: rgba(255,255,255,.95); }
.ledBtn:active{ transform: translateY(1px); }

.ledBtn--stop{
background: rgba(255,255,255,.65);
border-color: rgba(15,23,42,.16);
}

.ledProgress{ flex: 1; min-width: 0; }

.ledProgress__meta{
display:flex;
align-items:center;
justify-content:center;
gap: 6px;
font-weight: 950;
font-size: 11px;
color: rgba(15,23,42,.70);
margin-bottom: 6px;
}

#ledSeek{
width:100%;
height: 4px;
accent-color: var(--yellow);
cursor:pointer;
margin-bottom: 8px;
}

.ledProgress__bar{
height: 10px;
border-radius: 999px;
background: rgba(15,23,42,.10);
border: 1px solid rgba(15,23,42,.12);
overflow:hidden;
position: relative;
}

.ledProgress__fill{
height:100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(53,200,74,.92), rgba(255,230,0,.90));
transition: width .12s linear;
}

.ledProgress__glow{
position:absolute;
inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
transform: translateX(-80%);
animation: ledShimmer 1.1s linear infinite;
pointer-events:none;
}

@keyframes ledShimmer{ to { transform: translateX(80%); } }

.ledReader__hint{
padding: 10px 14px;
font-weight: 800;
font-size: 12px;
color: rgba(15,23,42,.68);
border-top: 1px solid rgba(15,23,42,.10);
}

/* Surbrillance lecture */
.prWord{
padding: 0 .5px;
border-radius: 6px;
}

.prWord.is-hot{
background: rgba(255,230,0,.28);
box-shadow: 0 0 0 4px rgba(255,230,0,.14);
}

.prWord.is-hot{
background: rgba(255,230,0,.55);
box-shadow: 0 0 14px rgba(53,200,74,.35);
border-radius: 6px;
padding: 2px 3px;
}



/* =========================================================
 PROGRAMME — LED Reader (compact, futuriste, full width)
========================================================= */

.ledReader{
margin-top: 14px;
border-radius: 18px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.55);
backdrop-filter: blur(10px);
box-shadow: 0 18px 44px rgba(15,23,42,.10);
overflow: hidden;
position: relative;
}

.ledReader::before{
content:"";
position:absolute;
inset:-60px;
background:
  radial-gradient(circle at 20% 20%, rgba(53,200,74,.18), transparent 55%),
  radial-gradient(circle at 80% 30%, rgba(255,230,0,.18), transparent 55%),
  radial-gradient(circle at 50% 90%, rgba(15,23,42,.10), transparent 55%);
filter: blur(6px);
pointer-events:none;
}

.ledReader > *{ position:relative; z-index:1; }

/* ✅ ÉCRAN */
.ledScreen{
position: relative;
padding: 12px 14px;
background: rgba(15,23,42,.90);
border-bottom: 1px solid rgba(255,255,255,.10);
}

.ledScreen__glass{
position:absolute;
inset:0;
background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 40%, rgba(255,255,255,.06));
pointer-events:none;
}

.ledScreen__scan{
position:absolute;
inset:-40px;
background: radial-gradient(circle at 20% 20%, rgba(53,200,74,.22), transparent 55%);
filter: blur(14px);
opacity: .55;
pointer-events:none;
}

.ledScreen__content{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
}

.ledScreen__label{
display:flex;
align-items:center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(15,23,42,.55);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 14px 40px rgba(15,23,42,.18);
color: rgba(255,255,255,.88);
font-weight: 900;
letter-spacing: .6px;
font-size: 11px;
flex: 0 0 auto;
}

.ledDot{
width: 10px; height: 10px; border-radius: 999px;
background: rgba(53,200,74,.95);
box-shadow: 0 0 0 6px rgba(53,200,74,.12), 0 0 18px rgba(53,200,74,.35);
}

.ledMode{
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255,230,0,.22);
border: 1px solid rgba(255,255,255,.12);
font-weight: 900;
}

.ledScreen__titleWrap{
flex: 1;
min-width: 0;
display:flex;
justify-content:flex-end;
}

.ledScreen__title{
max-width: 70ch;
text-align: right;
color: rgba(255,255,255,.92);
font-weight: 950;
letter-spacing: .2px;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* ✅ CONTROLES + PROGRESSION full width */
.ledControls{
display:flex;
align-items:center;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,.55);
}

.ledControls__buttons{
display:flex;
align-items:center;
gap: 10px;
flex: 0 0 auto;
}

.ledBtn{
width: 44px; height: 44px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.78);
color: rgba(15,23,42,.92);
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition: transform .12s ease, background .12s ease;
box-shadow: 0 12px 26px rgba(15,23,42,.10);
}

.ledBtn:hover{ background: rgba(255,255,255,.95); }
.ledBtn:active{ transform: translateY(1px); }

.ledBtn--stop{
background: rgba(255,255,255,.65);
border-color: rgba(15,23,42,.16);
}

.ledProgress{
flex: 1;
min-width: 0;
}

.ledProgress__meta{
display:flex;
align-items:center;
justify-content:center;
gap: 6px;
font-weight: 950;
font-size: 11px;
color: rgba(15,23,42,.70);
margin-bottom: 6px;
}

.ledSeek{
width:100%;
height: 4px;
accent-color: var(--yellow);
cursor:pointer;
margin-bottom: 8px;
}

.ledProgress__bar{
height: 10px;
border-radius: 999px;
background: rgba(15,23,42,.10);
border: 1px solid rgba(15,23,42,.12);
overflow:hidden;
position: relative;
}

.ledProgress__fill{
height:100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(53,200,74,.92), rgba(255,230,0,.90));
transition: width .12s linear;
}

.ledProgress__glow{
position:absolute;
inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
transform: translateX(-80%);
animation: ledShimmer 1.1s linear infinite;
pointer-events:none;
}

.ledProgress__scan{
position:absolute;
inset:-40px;
background: radial-gradient(circle at 70% 30%, rgba(255,230,0,.20), transparent 60%);
filter: blur(16px);
opacity: .55;
pointer-events:none;
}

@keyframes ledShimmer{ to { transform: translateX(80%); } }

/* ✅ Surbrillance lecture */
.prWord{
padding: 0 .5px;
border-radius: 6px;
}

.prWord.is-hot{
background: rgba(255,230,0,.55);
box-shadow: 0 0 14px rgba(53,200,74,.35);
border-radius: 6px;
padding: 2px 3px;
}

/* ✅ IMPORTANT : garde une typographie propre côté contenu */
.programmeReader__content p{
margin: 0 0 12px;
line-height: 1.75;
}
.programmeReader__content ul,
.programmeReader__content ol{
margin: 0 0 12px 20px;
}
.programmeReader__content li{
margin: 0 0 6px;
}



/* Programme : base typo lisible */
#prContent{
font-size: 16px; /* demandé */
line-height: 1.65;
}

/* Clic grand public : les blocs sont “cliquables” sans casser le style */
#prContent p,
#prContent li,
#prContent h2,
#prContent h3,
#prContent h4,
#prContent blockquote{
cursor: pointer;
}

/* Bloc actif (lecture depuis ce paragraphe) */
#prContent .prBlockActive{
outline: 2px solid rgba(255,230,0,.35);
background: rgba(255,230,0,.10);
border-radius: 12px;
padding: 6px 10px;
}

/* LED Reader floating / déplaçable */
.ledReader--floating{
position: sticky;
top: 12px;
z-index: 20;
}

/* barre drag + outils */
.ledBar{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(15,23,42,.10);
cursor: grab;
user-select: none;
}
.ledReader.is-dragging .ledBar{ cursor: grabbing; }

.ledBar__left{
display:flex;
align-items:center;
gap: 8px;
font-weight: 900;
letter-spacing: .5px;
font-size: 11px;
}

.ledMiniBtn{
width: 36px; height: 36px;
border-radius: 12px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.78);
color: rgba(15,23,42,.92);
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.ledMiniBtn:active{ transform: translateY(1px); }

.ledMiniPlus{
font-weight: 950;
margin-left: 3px;
font-size: 12px;
}

/* pliage */
.ledReader.is-collapsed .ledScreen,
.ledReader.is-collapsed #ledControls{
display:none;
}

/* Mots cliquables */
#prContent .prWord{
cursor: pointer;
border-radius: 6px;
padding: 0 1px;
}

#prContent .prWord:hover{
background: rgba(255,230,0,.16);
}

/* Mot en cours de lecture */
#prContent .prWord.is-hot{
background: rgba(255,230,0,.55);
box-shadow: 0 0 14px rgba(53,200,74,.35);
padding: 2px 3px;
}


/* ===========================
 READER (Equipe / Actus / Events)
 =========================== */

 .readerHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.readerViewToggle{
  display:flex;
  gap:10px;
  padding:8px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}
.rvtBtn{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
  color: rgba(15,23,42,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
.rvtBtn:hover{ background: rgba(255,255,255,.95); }
.rvtBtn:active{ transform: translateY(1px); }
.rvtBtn.is-active{
  background: rgba(15,23,42,.90);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(15,23,42,.18);
}

.readerLayout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .readerLayout{ grid-template-columns: 1fr; }
}

.readerPanel{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}

.readerHero{
  position:relative;
  min-height: 126px;
  background:
    radial-gradient(circle at 20% 20%, rgba(53,200,74,.20), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(255,230,0,.18), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(15,23,42,.12), transparent 55%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.72));
}
.readerHero:not(.readerHero--noimg){
  background:
    linear-gradient(180deg, rgba(15,23,42,.20), rgba(15,23,42,.92)),
    var(--rh) center/cover no-repeat;
}
.readerHero__glass{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
}
.readerHero__inner{
  position:relative;
  padding: 16px 16px 18px;
  color: rgba(255,255,255,.92);
}

.readerChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
}
.readerTitle{
  margin: 10px 0 6px;
  font-weight: 950;
  letter-spacing:.2px;
  font-size: 32px;
}
.readerSub{
  margin: 0 0 8px;
  opacity: .88;
  font-weight: 850;
}
.readerSummary{
  margin:0;
  opacity:.78;
  font-weight:800;
  max-width: 72ch;
  line-height:1.55;
}

  /* =========================================================
   READER (Equipe / Actus / Events) — suite + fin
========================================================= */

.readerContent{
  padding: 14px 16px 6px;
  color: rgba(15,23,42,.88);
  line-height: 1.75;
  font-size: 16px;
}

.readerContent p{ margin: 0 0 12px; }
.readerContent ul, .readerContent ol{ margin: 0 0 12px 20px; }
.readerContent li{ margin: 0 0 6px; }

.readerFooter{
  padding: 12px 16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.45);
}

/* NAV (droite) */
.readerNav{
  position: sticky;
  top: 92px;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}

.readerNav__head{
  padding: 12px 12px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background: rgba(15,23,42,.04);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.readerNav__title{
  font-weight: 950;
  letter-spacing: -.2px;
  display:flex;
  align-items:center;
  gap: 8px;
}

.readerNav__hint{
  font-weight: 850;
  font-size: 12px;
  color: rgba(15,23,42,.55);
}

.readerNav__list{
  padding: 12px;
  display:grid;
  gap: 10px;
}

/* ✅ GRID 2 colonnes (desktop) / 2 (tablet) / 1 (mobile) */
.readerNav__list.is-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px){
  .readerNav__list.is-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .readerNav__list.is-grid{
    grid-template-columns: 1fr;
  }
}

/* ✅ LISTE */
.readerNav__list.is-list{
  grid-template-columns: 1fr;
}

/* items */
.readerItem{
  display:block;
  text-decoration:none;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 36px rgba(15,23,42,.10);
  position: relative;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.readerItem::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.98)),
    var(--ri) center/cover no-repeat;
  opacity: 1;
  filter: saturate(1.05) contrast(1.02);
  pointer-events:none;
}

.readerItem__in{
  position: relative;
  z-index: 1;
  padding: 12px 12px 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 108px;
}

.readerItem__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.readerItem__title{
  font-weight: 950;
  color: rgba(15,23,42,.92);
  line-height: 1.2;
  font-size: 14px;
}

.readerItem__meta{
  flex: 0 0 auto;
  font-weight: 950;
  font-size: 11px;
  color: rgba(15,23,42,.65);
  background: linear-gradient(135deg, rgba(255, 252, 47, 0.74), rgba(94, 207, 70, 0.77));
  border: 1px solid rgba(15,23,42,.10);
  padding: 6px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.readerItem__excerpt{
  font-weight: 850;
  color: rgba(15,23,42,.65);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.readerItem:hover{
  border-color: rgba(3, 5, 3, 0.65);
  box-shadow: 0 14px 44px rgba(15,23,42,.14);
  transform: translateY(-1px);
}

.readerItem.is-active{
  border-color: rgba(3, 5, 3, 0.75);
  box-shadow: 0 18px 56px rgba(15,23,42,.16);
}

/* ✅ Spécial : layout LISTE (image à gauche, ultra designer) */
.readerNav__list.is-list .readerItem__in{
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  min-height: 92px;
}

.readerNav__list.is-list .readerItem__in::before{
  content:"";
  width: 96px;
  flex: 0 0 96px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.95)),
    var(--ri) center/cover no-repeat;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
}

.readerNav__list.is-list .readerItem__body{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 2px 0;
}

.readerNav__list.is-list .readerItem__top{
  margin-top: 2px;
}

/* on cache l’excerpt si super petit */
@media (max-width: 420px){
  .readerNav__list.is-list .readerItem__excerpt{ display:none; }
}

/* ✅ Boutons (toggle grid/list) : micro glow */
.readerViewToggle{
  position: relative;
  overflow: hidden;
}
.readerViewToggle::before{
  content:"";
  position:absolute;
  inset:-50px;
  background:
    radial-gradient(circle at 25% 30%, rgba(53,200,74,.18), transparent 60%),
    radial-gradient(circle at 75% 40%, rgba(255,230,0,.16), transparent 60%);
  filter: blur(10px);
  opacity: .65;
  pointer-events:none;
}
.readerViewToggle > *{ position:relative; z-index:1; }

/* ✅ Variantes d'ambiance par page */
body.page-template-equipe .readerHero{
  background:
    radial-gradient(circle at 20% 20%, rgba(53,200,74,.22), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(255,230,0,.18), transparent 55%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.68));
}

body.page-template-actualites .readerHero{
  background:
    radial-gradient(circle at 25% 25%, rgba(255,230,0,.20), transparent 55%),
    radial-gradient(circle at 80% 35%, rgba(53,200,74,.18), transparent 55%),
    linear-gradient(135deg, rgba(15,23,42,.94), rgba(15,23,42,.72));
}

body.page-template-evenements .readerHero{
  background:
    radial-gradient(circle at 20% 30%, rgba(53,200,74,.22), transparent 55%),
    radial-gradient(circle at 75% 25%, rgba(255,230,0,.20), transparent 55%),
    linear-gradient(135deg, rgba(15,23,42,.94), rgba(15,23,42,.74));
}

/* ✅ Petits ajustements pour mobile */
@media (max-width: 560px){
  .readerHead{
    align-items: flex-start;
    flex-direction: column;
  }
  .readerViewToggle{
    width: 100%;
    justify-content: center;
  }
  .rvtBtn{
    flex: 1 1 0;
  }
  .readerNav{
    position: relative;
    top: auto;
  }
}

/* ✅ Accessibilité focus */
.readerItem:focus-visible,
.rvtBtn:focus-visible{
  outline: 3px solid rgba(255,230,0,.45);
  outline-offset: 2px;
}

/* =========================================================
 ÉQUIPE — NAV ULTRA DESIGN (GRID 3 COL / LIST)
========================================================= */

.readerNav__list{
padding: 14px;
}

/* Default layout container for items */
.readerNav__list[data-view="grid"]{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* ✅ 3 colonnes desktop */
gap: 14px;
}

@media (max-width: 1100px){
.readerNav__list[data-view="grid"]{
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 2 colonnes */
}
}
@media (max-width: 520px){
.readerNav__list[data-view="grid"]{
  grid-template-columns: 1fr; /* ✅ 1 colonne */
}
}

/* LIST view */
.readerNav__list[data-view="list"]{
display: flex;
flex-direction: column;
gap: 12px;
}

/* Card base */
.readerItem{
position: relative;
text-decoration: none;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.74);
backdrop-filter: blur(10px);
box-shadow: 0 18px 50px rgba(15,23,42,.12);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
color: inherit;
}

/* Futuristic glow layer */
.readerItem::before{
content:"";
position:absolute;
inset:-60px;
background:
  radial-gradient(circle at 20% 20%, rgba(53,200,74,.22), transparent 55%),
  radial-gradient(circle at 80% 25%, rgba(255,230,0,.20), transparent 55%),
  radial-gradient(circle at 40% 90%, rgba(15,23,42,.12), transparent 60%);
filter: blur(10px);
opacity: .75;
pointer-events:none;
}

.readerItem:hover{
transform: translateY(-2px);
border-color: rgba(255,230,0,.35);
box-shadow: 0 28px 70px rgba(15,23,42,.16);
}

.readerItem.is-active{
  border-color: rgba(53,200,74,.40);
  box-shadow: 1px 1px rgba(0, 0, 0, 0.52);
  background: radial-gradient(circle at 20% 20%, rgba(53, 200, 74, 0.54), transparent 55%), radial-gradient(circle at 80% 25%, rgba(255, 230, 0, 0.55), transparent 55%), radial-gradient(circle at 40% 90%, rgba(15,23,42,.12), transparent 60%);
}

/* ---------------------------------------------------------
 GRID VIEW: image top, text under
--------------------------------------------------------- */
.readerNav__list[data-view="grid"] .readerItem{
display: flex;
flex-direction: column;
}

.readerNav__list[data-view="grid"] .readerItem__img{
height: 150px;
border-bottom: 1px solid rgba(255,255,255,.10);
position: relative;
overflow: hidden;
background: rgba(15,23,42,.10);
}

.readerNav__list[data-view="grid"] .readerItem__img img{
width: 100%;
height: 100%;
object-fit: cover;
display:block;
transform: scale(1.02);
}

.readerNav__list[data-view="grid"] .readerItem__img::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.45));
pointer-events:none;
}

.readerNav__list[data-view="grid"] .readerItem__txt{
padding: 12px 12px 14px;
position: relative;
z-index: 1;
}

.readerNav__list[data-view="grid"] .readerItem__title{
font-weight: 950;
letter-spacing: -.2px;
color: rgba(15,23,42,.92);
line-height: 1.2;
margin-bottom: 6px;
}

.readerNav__list[data-view="grid"] .readerItem__meta{
font-weight: 850;
font-size: 12px;
color: rgba(15,23,42,.72);
margin-bottom: 8px;
display:flex;
gap: 8px;
align-items:center;
}

.readerNav__list[data-view="grid"] .readerItem__excerpt{
font-weight: 800;
color: rgba(15,23,42,.68);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.readerNav__list[data-view="grid"] .readerItem__chev{
display:none; /* ✅ pas de chevron en grid */
}

/* ---------------------------------------------------------
 LIST VIEW: image left, text right
--------------------------------------------------------- */
.readerNav__list[data-view="list"] .readerItem{
display: grid;
grid-template-columns: 120px 1fr 40px;
gap: 12px;
align-items: center;
padding: 10px;
}

@media (max-width: 520px){
.readerNav__list[data-view="list"] .readerItem{
  grid-template-columns: 96px 1fr 34px;
}
}

.readerNav__list[data-view="list"] .readerItem__img{
width: 120px;
height: 86px;
border-radius: 16px;
overflow:hidden;
border: 1px solid rgba(15,23,42,.12);
background: rgb(4, 15, 36);
}

.readerNav__list[data-view="list"] .readerItem__img img{
width: 100%;
height: 100%;
object-fit: contain;
display:block;
}

.readerNav__list[data-view="list"] .readerItem__txt{
padding: 0;
position: relative;
z-index: 1;
min-width: 0;
left: 20px;
}

.readerNav__list[data-view="list"] .readerItem__title{
font-weight: 750;
color: rgba(15,23,42,.92);
line-height: 1.2;
margin-bottom: 4px;
letter-spacing: 0.1px;
}

.readerNav__list[data-view="list"] .readerItem__meta{
font-weight: 850;
font-size: 12px;
color: rgba(15,23,42);
display:flex;
gap: 8px;
align-items:center;
margin-bottom: 6px;
}

.readerNav__list[data-view="list"] .readerItem__excerpt{
font-weight: 500;
color: rgb(15, 23, 42);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: 0.1px;
}

/* Chevron futuristic */
.readerItem__chev{
width: 36px;
height: 36px;
border-radius: 14px;
display:flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(255,255,255,.14);
background: rgba(15,23,42,.88);
color: rgba(255,255,255,.92);
box-shadow: 0 14px 40px rgba(15,23,42,.18);
}

/* Placeholder if no image */
.readerItem__ph{
width: 100%;
height: 100%;
display:grid;
place-items:center;
color: rgba(255,255,255,.92);
background: linear-gradient(135deg, rgba(15,23,42,.75), rgba(15,23,42,.92));
}
.readerItem__ph i{ font-size: 22px; opacity: .9; }


/* =========================================================
 CYBER NEON (mode premium)
 Active via: .is-neon
========================================================= */

:root{
--neonA: rgba(0, 255, 255, .95);
--neonB: rgba(255, 0, 255, .90);
--neonC: rgba(255, 230, 0, .85);
--neonGlowA: rgba(0, 255, 255, .22);
--neonGlowB: rgba(255, 0, 255, .18);
--neonLine: rgba(255,255,255,.10);
}

/* fond cyber discret */
.readerPage.is-neon{
position: relative;
}
.readerPage.is-neon::before{
content:"";
position:absolute;
inset:0;
background:
  radial-gradient(900px 520px at 18% 20%, rgba(0,255,255,.10), transparent 60%),
  radial-gradient(820px 520px at 82% 30%, rgba(255,0,255,.08), transparent 60%),
  radial-gradient(700px 420px at 55% 90%, rgba(255,230,0,.08), transparent 60%);
pointer-events:none;
z-index: 0;
}
.readerPage.is-neon .container{ position:relative; z-index:1; }

/* toggle buttons neon */
.readerPage.is-neon .readerViewToggle{
border-color: rgba(0,255,255,.16);
box-shadow:
  0 18px 44px rgba(15,23,42,.12),
  0 0 0 1px rgba(255,255,255,.12),
  0 0 32px rgba(0,255,255,.08);
}

.readerPage.is-neon .rvtBtn.is-active{
background: rgba(15,23,42,.92);
border-color: rgba(0,255,255,.22);
box-shadow:
  0 18px 44px rgba(15,23,42,.18),
  0 0 26px rgba(0,255,255,.12);
}

/* ---------------------------------------------------------
 Neon Card Treatment (Apple glass + neon)
--------------------------------------------------------- */
.readerPage.is-neon .readerItem{
border-color: rgba(255,255,255,.12);
}

/* neon border (double) */
.readerPage.is-neon .readerItem::after{
content:"";
position:absolute;
inset: 0;
border-radius: 22px;
padding: 1px;
background: linear-gradient(135deg,
  rgba(0,255,255,.55),
  rgba(255,0,255,.45),
  rgba(255,230,0,.35)
);
-webkit-mask:
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
opacity: .55;
pointer-events:none;
}

/* glow hover */
.readerPage.is-neon .readerItem:hover{
box-shadow:
  0 30px 90px rgba(15,23,42,.14),
  0 0 0 1px rgba(255,255,255,.10),
  0 0 34px var(--neonGlowA),
  0 0 28px var(--neonGlowB),
  inset 0 1px 0 rgba(255,255,255,.62);
}

/* active more glow */
.readerPage.is-neon .readerItem.is-active{
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.64), 0 0 0 1px rgba(255,255,255,.12), 0 0 42px rgba(116, 255, 0, 0.33), 0 0 97px rgba(150, 240, 75, 0.03), inset 0 1px 0 rgba(255,255,255,.62);
}

/* ---------------------------------------------------------
 Neon scanline (ultra léger) sur image
--------------------------------------------------------- */
.readerPage.is-neon .readerItem__img{
position: relative;
}
.readerPage.is-neon .readerItem__img::before{
content:"";
position:absolute;
inset:0;
background:
  repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.06) 1px,
    transparent 2px,
    transparent 6px
  );
opacity: .18;
mix-blend-mode: overlay;
pointer-events:none;
}

/* petit “scan” animé sur hover */
@keyframes neonScan {
0%   { transform: translateX(-120%); opacity:.0; }
15%  { opacity:.25; }
50%  { transform: translateX(0%); opacity:.18; }
100% { transform: translateX(120%); opacity:0; }
}
.readerPage.is-neon .readerItem__img::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg, transparent, rgba(0,255,255,.18), transparent);
transform: translateX(-120%);
opacity: 0;
pointer-events:none;
}
.readerPage.is-neon .readerItem:hover .readerItem__img::after{
animation: neonScan 1.2s ease-out;
}

/* ---------------------------------------------------------
 Neon meta pill
--------------------------------------------------------- */
.readerPage.is-neon .readerItem__meta{
border-color: rgba(0,255,255,.14);
box-shadow:
  inset 0 1px 0 rgba(255,255,255,.62),
  0 0 20px rgba(0,255,255,.06);
}
.readerPage.is-neon .readerItem__meta i{
color: rgba(0,255,255,.85);
}

/* Chevron neon pill */
.readerPage.is-neon .readerItem__chev{
border-color: rgba(0,255,255,.16);
box-shadow:
  0 18px 44px rgba(15,23,42,.10),
  0 0 22px rgba(0,255,255,.08),
  inset 0 1px 0 rgba(255,255,255,.62);
}

/* ---------------------------------------------------------
 Accessibilité : réduit les animations si demandé
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
.readerPage.is-neon .readerItem:hover .readerItem__img::after{
  animation:none !important;
}
}



/* =========================================================
 ÉQUIPE — Apple Glass UI (Grid 3 / List)
 - Frosted cards
 - Soft highlight & reflections
 - Minimal premium motion
========================================================= */

.readerPage--equipe .readerViewToggle{
background: rgba(255,255,255,.62);
border: 1px solid rgba(15,23,42,.10);
box-shadow: 0 18px 44px rgba(15,23,42,.10);
backdrop-filter: blur(14px);
}

/* ✅ NAV list container */
.readerPage--equipe .readerNav__list{
padding: 14px;
}

/* ✅ GRID 3 colonnes par défaut */
.readerPage--equipe .readerNav__list[data-view="grid"]{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 1100px){
.readerPage--equipe .readerNav__list[data-view="grid"]{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px){
.readerPage--equipe .readerNav__list[data-view="grid"]{
  grid-template-columns: 1fr;
}
}

/* ✅ LIST */
.readerPage--equipe .readerNav__list[data-view="list"]{
display:flex;
flex-direction:column;
gap: 12px;
}

/* ---------------------------------------------------------
 Apple Glass Card (base)
--------------------------------------------------------- */

.readerPage--equipe .readerItem{
position: relative;
text-decoration: none;
color: inherit;
border-radius: 22px;
overflow: hidden;

/* glass */
background: rgba(255,255,255,.62);
border: 1px solid rgba(15,23,42,.10);
box-shadow:
  0 22px 60px rgba(15,23,42,.12),
  inset 0 1px 0 rgba(255,255,255,.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);

transform: translateY(0);
transition:
  transform .16s ease,
  box-shadow .16s ease,
  border-color .16s ease;
}

/* Soft reflection */
.readerPage--equipe .readerItem::before{
content:"";
position:absolute;
inset:-40%;
background:
  radial-gradient(circle at 18% 18%, rgba(255,255,255,.55), transparent 55%),
  radial-gradient(circle at 78% 28%, rgba(255,255,255,.22), transparent 60%),
  radial-gradient(circle at 40% 92%, rgba(15,23,42,.10), transparent 60%);
filter: blur(10px);
opacity: .65;
pointer-events:none;
}

/* Hairline highlight on top edge */
.readerPage--equipe .readerItem::after{
content:"";
position:absolute;
left: 14px;
right: 14px;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
opacity: .65;
pointer-events:none;
}

.readerPage--equipe .readerItem:hover{
transform: translateY(-2px);
border-color: rgba(15,23,42,.16);
box-shadow:
  0 30px 80px rgba(15,23,42,.14),
  inset 0 1px 0 rgba(255,255,255,.62);
}

.readerPage--equipe .readerItem.is-active{
border-color: rgba(53,200,74,.24);
box-shadow:
  0 30px 90px rgba(53,200,74,.10),
  0 26px 70px rgba(15,23,42,.10),
  inset 0 1px 0 rgba(255,255,255,.62);
}

/* ---------------------------------------------------------
 GRID VIEW: Image top + texte dessous
--------------------------------------------------------- */
.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem{
display:flex;
flex-direction:column;
}

.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem__img{
height: 102px;
position: relative;
overflow:hidden;
background: rgba(15,23,42,.08);
border-bottom: 1px solid rgba(15,23,42,.08);
}

/* Premium image treatment */
.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem__img img{
width:100%;
height:100%;
display:block;
object-fit: cover;
transform: scale(1.02);
filter: saturate(1.02) contrast(1.02);
}

/* subtle vignette */
.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem__img::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.22));
pointer-events:none;
}

.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem__txt{
padding: 12px 12px 14px;
}

.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem__title{
font-weight: 900;
letter-spacing: -.25px;
color: rgba(15,23,42,.92);
line-height: 1.15;
margin-bottom: 6px;
}

.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem__meta{
display:flex;
align-items:center;
gap: 8px;
font-weight: 850;
font-size: 12px;
color: rgba(15,23,42,.70);
margin-bottom: 8px;

/* pill */
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,.55);
border: 1px solid rgba(15,23,42,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
backdrop-filter: blur(10px);
}

.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem__excerpt{
font-weight: 300;
color: rgba(15,23,42,.66);
line-height: 1.45;

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow:hidden;
}

.readerPage--equipe .readerNav__list[data-view="grid"] .readerItem__chev{
display:none;
}

/* ---------------------------------------------------------
 LIST VIEW: Image gauche + texte droite
--------------------------------------------------------- */
.readerPage--equipe .readerNav__list[data-view="list"] .readerItem{
display:grid;
grid-template-columns: 120px 1fr 44px;
gap: 12px;
align-items:center;
padding: 10px;
}

@media (max-width: 520px){
.readerPage--equipe .readerNav__list[data-view="list"] .readerItem{
  grid-template-columns: 96px 1fr 38px;
}
}

.readerPage--equipe .readerNav__list[data-view="list"] .readerItem__img{
width: 120px;
height: 86px;
border-radius: 18px;
overflow:hidden;
border: 1px solid rgba(15,23,42,.10);
background: rgba(15,23,42,.08);
box-shadow: 0 14px 40px rgba(15,23,42,.10);
}

.readerPage--equipe .readerNav__list[data-view="list"] .readerItem__img img{
width:100%;
height:100%;
object-fit: cover;
display:block;
filter: saturate(1.02) contrast(1.02);
}

.readerPage--equipe .readerNav__list[data-view="list"] .readerItem__title{
font-weight: 900;
letter-spacing: -.2px;
color: rgba(15,23,42,.92);
line-height: 1.15;
margin-bottom: 4px;
}

.readerPage--equipe .readerNav__list[data-view="list"] .readerItem__meta{
display:flex;
align-items:center;
gap: 8px;
font-weight: 850;
font-size: 12px;
color: rgba(15,23,42,.70);
margin-bottom: 6px;
}

.readerPage--equipe .readerNav__list[data-view="list"] .readerItem__excerpt{
font-weight: 800;
color: rgba(15,23,42,.66);
line-height: 1.45;

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow:hidden;
}

/* Chevron "Apple": soft pill */
.readerPage--equipe .readerItem__chev{
width: 40px;
height: 40px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;

background: rgba(255,255,255,.55);
border: 1px solid rgba(15,23,42,.10);
color: rgba(15,23,42,.82);
box-shadow:
  0 18px 44px rgba(15,23,42,.10),
  inset 0 1px 0 rgba(255,255,255,.62);
backdrop-filter: blur(12px);
}

.readerPage--equipe .readerItem:hover .readerItem__chev{
transform: translateX(1px);
}

/* Placeholder if no image */
.readerPage--equipe .readerItem__ph{
width:100%;
height:100%;
display:grid;
place-items:center;
color: rgba(15,23,42,.75);
background: rgba(255,255,255,.35);
}

.readerTitle {
color: #fff;
}

/* ↓ Border-radius global de la card */
.readerItem{
border-radius: 14px !important; /* au lieu de 18/22 */
}

/* ↓ Pour que l'image suive le même arrondi */
.readerItem__img{
border-radius: 12px !important;
}

/* ↓ Si ton <a> est overflow hidden (souvent), garde cohérent */
.readerItem{
overflow: hidden;
}

/* ↓ Si tu as un overlay / pseudo-element */
.readerItem::before{
border-radius: 14px !important;
}

/* L’image doit être cadrée en haut et coupée en bas */
.readerItem__img{
overflow: hidden;
}

/* IMPORTANT : image cadrée "top" */
.readerItem__img img{
width: 100%;
height: 100%;
display: block;

object-fit: cover;        /* remplit la zone */

}

/* Si tu utilises aussi un background via --ri-bg (pseudo/overlay) */
.readerItem__img{
background-position: top center !important;
background-size: cover !important;
}

/* ✅ Pas de rognage gauche/droite : image plein cadre */
.readerItem__img{
padding: 0 !important;          /* IMPORTANT : enlève padding qui “mange” les bords */
overflow: hidden;               /* on coupe uniquement ce qui dépasse */
}

/* ✅ Image : plein width, alignée en haut, coupe en bas */
.readerItem__img img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;              /* garde le rendu premium */
}

/* ✅ Sécurité : si tu avais un translate/scale qui décale */
.readerItem__img img{
transform: none !important;
}


/* ===================== ENGAGER page - Cyber neon glass ===================== */

.engagePage{
position: relative;
padding-top: 30px;
}

.engageHead{
max-width: 780px;
margin: 0 auto 26px;
text-align: left;
}

.engageHead__chip{
display: inline-flex;
align-items: center;
gap: .55rem;
padding: 8px 12px;
border-radius: 999px;
background: rgba(10, 12, 18, .55);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 0 0 1px rgba(37,77,235,.18), 0 0 28px rgba(37,77,235,.12);
backdrop-filter: blur(12px);
}

.engageHead__title{
margin: 12px 0 6px;
letter-spacing: -.02em;
}

.engageHead__desc{
margin: 0;
opacity: .85;
}

.engageGrid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

@media (max-width: 860px){
.engageGrid{ grid-template-columns: 1fr; }
}

.engageCard{
position: relative;
overflow: hidden;
border-radius: 18px;
text-decoration: none;
color: inherit;
min-height: 220px;
padding: 18px;
display: grid;
align-content: space-between;

background: rgba(10, 12, 18, .58);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(16px);
box-shadow:
  0 18px 55px rgba(0,0,0,.45),
  0 0 0 1px rgba(37,77,235,.18),
  0 0 44px rgba(0,255,255,.08);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.engageCard:hover{
transform: translateY(-2px);
border-color: rgba(0,255,255,.22);
box-shadow:
  0 22px 70px rgba(0,0,0,.55),
  0 0 0 1px rgba(0,255,255,.22),
  0 0 60px rgba(37,77,235,.18);
}

.engageCard__glass{
position:absolute; inset:0;
background: radial-gradient(900px 260px at 20% 0%, rgba(37,77,235,.22), transparent 55%),
            radial-gradient(700px 220px at 90% 10%, rgba(0,255,255,.16), transparent 55%);
pointer-events:none;
}

.engageCard__bg{
position:absolute; inset:-1px;
background-image: var(--bg);
background-size: cover;
background-position: center;
opacity: .20;
filter: saturate(1.05) contrast(1.05);
transform: scale(1.03);
pointer-events:none;
}

.engageCard__bg--noimg{
background: radial-gradient(600px 240px at 30% 10%, rgba(255,255,255,.08), transparent 55%),
            radial-gradient(700px 260px at 90% 0%, rgba(37,77,235,.18), transparent 55%);
opacity: 1;
}

.engageCard__top{
display:flex;
align-items:center;
justify-content:space-between;
position: relative;
z-index: 2;
}

.engageCard__icon{
width: 44px; height: 44px;
display:grid; place-items:center;
border-radius: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 0 0 1px rgba(37,77,235,.18), 0 0 26px rgba(0,255,255,.10);
}

.engageCard__arrow{
opacity: .75;
transform: translateX(0);
transition: .18s ease;
}
.engageCard:hover .engageCard__arrow{
opacity: 1;
transform: translateX(2px);
}

.engageCard__body{
position: relative;
z-index: 2;
}

.engageCard__title{
margin: 10px 0 6px;
font-size: 22px;
letter-spacing: -.02em;
}

.engageCard__text{
margin: 0;
opacity: .86;
}


/* =========================================================
 PAGE BÉNÉVOLAT (FUTURISTE / RESPONSIVE)
========================================================= */

.lsBenevolat{
--ls-bg:     radial-gradient(1100px 560px at 12% 15%, rgba(255,230,0,.42), transparent 60%),
radial-gradient(900px 520px at 88% 20%, rgba(47,230,92,.26), transparent 55%),
radial-gradient(720px 500px at 85% 85%, rgba(255,230,0,.18), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)) !important;
}

.lsBenevolat .lsHero{
position: relative;
padding: clamp(28px, 5vw, 64px) 0;
background: var(--ls-bg);
overflow: hidden;
}

.lsBenevolat .lsHero::before{
content:"";
position:absolute; inset:0;
background:
  linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.18) 55%, rgba(0,0,0,.55)),
  var(--ls-hero-bg, none);
background-size: cover;
background-position: center;
filter: saturate(1.08);
opacity: .95;
pointer-events:none;
}

.lsHero__grid{
position: relative;
z-index: 1;
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.25fr .85fr;
gap: clamp(16px, 4vw, 32px);
align-items: start;
}

@media (max-width: 980px){
.lsHero__grid{ grid-template-columns: 1fr; }
}

.lsHero__badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius: 999px;
backdrop-filter: blur(10px);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.92);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
font-size: 13px;
margin-bottom: 14px;
}

.lsHero__title{
color:#fff;
line-height: 1.05;
font-size: clamp(30px, 4.3vw, 56px);
margin: 0 0 12px;
letter-spacing: -.02em;
}

.lsHero__accent{
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.lsHero__lead{
color: rgba(255,255,255,.88);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.6;
margin: 0 0 18px;
max-width: 58ch;
}

.lsHero__cta{
display:flex;
align-items:center;
gap:14px;
flex-wrap: wrap;
margin: 18px 0 16px;
}

.lsBtnGlow{
position: relative;
border-radius: 999px;
padding: 12px 18px;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:10px;
box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.lsBtnGlow::after{
content:"";
position:absolute; inset:-2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(37,77,235,.6), rgba(9,123,170,.6), rgba(140,70,255,.6));
filter: blur(14px);
z-index: -1;
opacity: .75;
}

.lsLinkSoft{
color: rgba(255,255,255,.86);
text-decoration:none;
display:inline-flex;
align-items:center;
gap:10px;
padding: 10px 12px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
}

.lsPulseRow{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
max-width: 620px;
}

@media (max-width: 520px){
.lsPulseRow{ grid-template-columns: 1fr; }
}

.lsPulse{
padding: 14px 14px;
border-radius: 16px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(12px);
}

.lsPulse__k{
font-weight: 800;
color: #fff;
letter-spacing: -.01em;
font-size: 16px;
}
.lsPulse__t{
color: rgba(255,255,255,.80);
font-size: 13px;
margin-top: 4px;
}

/* Carte glass */
.lsGlassCard{
border-radius: 22px;
padding: 18px;
background: rgba(10,12,18,.55);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(16px);
box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.lsGlassCard__top{
display:flex;
gap: 12px;
align-items:center;
margin-bottom: 12px;
}
.lsOrb{
width: 46px; height: 46px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(37,77,235,.55) 30%, rgba(9,123,170,.25) 60%, rgba(140,70,255,.15) 100%);
box-shadow: 0 14px 50px rgba(37,77,235,.22);
}
.lsGlassCard__title{ color:#fff; font-weight: 800; }
.lsGlassCard__sub{ color: rgba(255,255,255,.72); font-size: 13px; margin-top: 2px; }

.lsCheckList{
list-style:none;
margin: 12px 0 0;
padding:0;
display:grid;
gap: 10px;
}
.lsCheckList li{
display:flex; gap:10px; align-items:flex-start;
color: rgba(255,255,255,.86);
}
.lsCheckList i{ margin-top: 3px; color: rgba(140,70,255,.95); }

.lsGlassCard__note{
margin-top: 14px;
padding: 12px 12px;
border-radius: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.82);
display:flex;
gap:10px;
align-items:flex-start;
}

/* Section principale */
.lsBenevolat__main{
padding: clamp(26px, 4vw, 56px) 0;
}

.lsTwoCol{
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: clamp(16px, 4vw, 28px);
align-items:start;
}

@media (max-width: 980px){
.lsTwoCol{ grid-template-columns: 1fr; }
}

.lsBlock{
padding: 0 0 26px;
}

.lsBlock__head{
margin: 0 0 14px;
}
.lsH2{
margin: 0 0 6px;
letter-spacing: -.02em;
}
.lsP, .lsMuted{
color: rgba(255,255,255,.78);
}
.lsMuted{ font-size: 13px; }

/* Grille de cartes missions */
.lsCardGrid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 600px){
.lsCardGrid{ grid-template-columns: 1fr; }
}

.lsMiniCard{
position: relative;
border-radius: 18px;
padding: 16px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
overflow:hidden;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.lsMiniCard::before{
content:"";
position:absolute; inset:-1px;
background: radial-gradient(500px 250px at 20% 20%, rgba(37,77,235,.18), transparent 60%),
            radial-gradient(500px 250px at 80% 60%, rgba(140,70,255,.14), transparent 60%);
opacity: .9;
pointer-events:none;
}
.lsMiniCard > *{ position:relative; z-index:1; }

.lsMiniCard:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.20);
background: rgba(255,255,255,.06);
}
.lsMiniCard__icon{
width: 42px; height: 42px;
border-radius: 14px;
display:grid;
place-items:center;
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,255,255,.12);
color: #fff;
margin-bottom: 10px;
}
.lsMiniCard h3{ margin:0 0 6px; color:#fff; font-size: 16px; }
.lsMiniCard p{ margin:0 0 10px; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.5; }

.lsTag{
display:inline-flex;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
background: rgba(9,123,170,.12);
border: 1px solid rgba(9,123,170,.25);
color: rgba(255,255,255,.88);
}

/* Steps */
.lsSteps{
margin: 0;
padding: 0;
list-style:none;
display:grid;
gap: 10px;
}
.lsSteps li{
display:flex;
gap: 12px;
padding: 14px 14px;
border-radius: 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
}
.lsSteps__n{
width: 30px; height: 30px;
border-radius: 10px;
display:grid;
place-items:center;
background: rgba(37,77,235,.18);
border: 1px solid rgba(37,77,235,.32);
color:#fff;
font-weight: 800;
}

/* FAQ */
.lsFaq{ display:grid; gap: 10px; }
.lsFaq__item{
border-radius: 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
padding: 12px 14px;
}
.lsFaq__item summary{
cursor:pointer;
color:#fff;
font-weight: 700;
}
.lsFaq__item p{
margin: 10px 0 0;
color: rgba(255,255,255,.78);
line-height: 1.6;
}

/* Form sticky */
.lsFormWrap{
position: sticky;
top: 16px;
border-radius: 22px;
background: rgba(10,12,18,.65);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(18px);
box-shadow: 0 30px 90px rgba(0,0,0,.40);
overflow:hidden;
}

@media (max-width: 980px){
.lsFormWrap{ position: relative; top: auto; }
}

.lsFormHead{
padding: 16px 16px 12px;
border-bottom: 1px solid rgba(255,255,255,.10);
background:
  radial-gradient(600px 220px at 20% 10%, rgba(37,77,235,.20), transparent 60%),
  radial-gradient(600px 220px at 80% 50%, rgba(140,70,255,.16), transparent 60%);
}

.lsFormHead__title{
color:#fff;
font-weight: 900;
letter-spacing: -.02em;
font-size: 18px;
}
.lsFormHead__sub{
color: rgba(255,255,255,.74);
font-size: 13px;
margin-top: 4px;
}

.lsFormInner{
padding: 14px 16px 10px;
}

.lsFormFoot{
padding: 12px 16px 14px;
border-top: 1px solid rgba(255,255,255,.10);
display:grid;
gap: 8px;
}
.lsFormFoot__line{
color: rgba(255,255,255,.74);
font-size: 12px;
display:flex;
gap: 10px;
align-items:flex-start;
}
.lsFormFoot__line i{ margin-top: 2px; color: rgba(37,77,235,.95); }

/ confirming: make Forminator blend */
.lsFormWrap .forminator-ui,
.lsFormWrap .forminator-ui *{
font-family: inherit;
}

.lsFormWrap .forminator-ui .forminator-input,
.lsFormWrap .forminator-ui .forminator-textarea,
.lsFormWrap .forminator-ui .forminator-select2-selection{
border-radius: 14px !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.14) !important;
color: rgba(255,255,255,.92) !important;
}

.lsFormWrap .forminator-ui .forminator-label{
color: rgba(255,255,255,.86) !important;
font-weight: 700;
}

.lsFormWrap .forminator-ui .forminator-button{
border-radius: 999px !important;
padding: 12px 16px !important;
font-weight: 800 !important;
box-shadow: 0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
 PAGE BÉNÉVOLAT — FUTURISTE (template)
========================================================= */
.ls-benevolat { position: relative; overflow: hidden; }
.lsb-container { width: min(1180px, 92vw); margin: 0 auto; }

/* HERO */
.lsb-hero { position: relative; padding: clamp(56px, 7vw, 110px) 0 56px; }
.lsb-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(18px, 3vw, 36px); align-items: center; }
@media (max-width: 960px){ .lsb-hero__inner{ grid-template-columns: 1fr; } }

.lsb-hero__bg { position:absolute; inset:-40px; pointer-events:none; }
.lsb-grid{
position:absolute; inset:0;
background-image:
  linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(ellipse at 30% 20%, #000 35%, transparent 70%);
opacity:.6;
}
.lsb-orb{
position:absolute; border-radius:999px; filter: blur(24px);
background: radial-gradient(circle at 30% 30%, rgba(37,77,235,.55), rgba(9,123,170,.15), transparent 65%);
opacity:.9;
}
.lsb-orb--1{ width:420px; height:420px; left: -90px; top: -70px; }
.lsb-orb--2{ width:520px; height:520px; right: -140px; top: 40px; background: radial-gradient(circle at 30% 30%, rgba(9,123,170,.55), rgba(37,77,235,.18), transparent 65%); }
.lsb-orb--3{ width:380px; height:380px; left: 35%; bottom: -180px; opacity:.7; }

.lsb-kicker{
display:inline-flex; align-items:center; gap:10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-weight: 700;
}
.lsb-kicker i{ opacity:.95; }

.lsb-title{
margin: 16px 0 10px;
font-size: clamp(34px, 4.4vw, 58px);
line-height: 1.03;
letter-spacing: -0.02em;
}
.lsb-title__accent{
display:inline-block;
background: linear-gradient(90deg, rgb(13, 102, 14), rgb(255, 218, 20));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.lsb-lead{
font-size: clamp(16px, 1.5vw, 18px);
opacity: .92;
line-height: 1.55;
margin: 12px 0 18px;
}

.lsb-ctaRow{ display:flex; gap:12px; flex-wrap:wrap; margin: 14px 0 18px; }

.lsb-btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding: 12px 16px;
border-radius: 14px;
text-decoration:none;
font-weight: 800;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.lsb-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: linear-gradient(135deg, rgba(53, 200, 74, 0.49), rgba(255, 230, 0, 0.76)); }
.lsb-btn--primary{
background: linear-gradient(135deg, rgba(53, 200, 74, 0.49), rgba(255, 230, 0, 0.76));
border-color: rgba(255,255,255,.10);
}
.lsb-btn--ghost{ background: rgba(255,255,255,.04); }
.lsb-btn--full{ width:100%; }

.lsb-trust{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; opacity:.95; }
.lsb-trust__item{ display:flex; align-items:baseline; gap:8px; }
.lsb-trust__num{ font-weight: 900; }
.lsb-trust__dot{ width:6px; height:6px; border-radius:999px; background: rgba(255,255,255,.35); }

.lsb-card{
border-radius: 18px;
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
font-size: 16px;
background: radial-gradient(circle at 30% 20%, rgba(255,230,0,.28), transparent 48%), radial-gradient(circle at 85% 25%, rgba(47,230,92,.22), transparent 50%), radial-gradient(circle at 75% 85%, rgba(57,210,255,.20), transparent 55%) !important;
opacity: .95 !important;
}
.lsb-card--glass{
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.lsb-card__head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding: 16px 16px 10px; }
.lsb-card__body{ padding: 10px 16px 16px; }
.lsb-card__foot{ padding: 0 16px 16px; }
.lsb-card__title{ margin:0; font-size: 18px; font-weight: 900; }

.lsb-pill{
display:inline-flex; align-items:center; gap:8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.14);
font-weight: 800;
font-size: 12px;
}
.lsb-pill--soft{ background: rgba(255,255,255,.06); }

.lsb-miniSteps{ display:inline-flex; gap:6px; }
.lsb-miniSteps span{
width:26px; height:26px; display:grid; place-items:center;
border-radius: 10px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
font-weight: 900;
font-size: 12px;
opacity:.75;
}
.lsb-miniSteps span.is-on{
opacity:1;
background: rgba(37,77,235,.25);
border-color: rgba(37,77,235,.55);
}

.lsb-bullets {
list-style: none;
padding: 0;
margin: 10px 0 14px;
display: grid;
gap: 10px;
font-size: 15px;
}
.lsb-bullets li{ display:flex; gap:10px; align-items:flex-start; opacity:.94; }
.lsb-bullets i{ margin-top:2px; color: rgba(160,220,255,.95); }

.lsb-signal{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); margin-bottom: 12px; }
.lsb-signal__dot{ width:10px; height:10px; border-radius:999px; background: rgba(90,255,160,.9); box-shadow: 0 0 0 6px rgba(90,255,160,.12); }

/* SECTIONS */
.lsb-section{ padding: 54px 0; }
.lsb-section__head{ margin-bottom: 18px; }
.lsb-h2{ font-size: clamp(24px, 3vw, 34px); margin: 0 0 6px; letter-spacing: -0.01em; }
.lsb-sub{ opacity:.9; margin: 0; line-height: 1.55; }

/* Cards missions */
.lsb-gridCards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 980px){ .lsb-gridCards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .lsb-gridCards{ grid-template-columns: 1fr; } }

.lsb-card--neo{ padding: 16px; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.lsb-card--neo:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }
.lsb-card__icon{
width:44px; height:44px; border-radius: 14px;
display:grid; place-items:center;
background: linear-gradient(135deg, rgba(53, 200, 74, 0.49), rgba(255, 230, 0, 0.76));
border: 1px solid rgba(90, 170, 9, 0.35);
margin-bottom: 10px;
}
.lsb-h3{ margin: 0 0 6px; font-size: 16px; font-weight: 900; }
.lsb-card--neo p{ margin: 0; opacity: .9; line-height: 1.45; }

/* Form section layout */
.lsb-section--form{ padding-bottom: 80px; }
.lsb-twoCols{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start; }
@media (max-width: 980px){ .lsb-twoCols{ grid-template-columns: 1fr; } }

.lsb-timeline{ display:grid; gap: 12px; margin-top: 14px; }
.lsb-step{ display:flex; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.lsb-step__n{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(53, 200, 74, 0.49), rgba(255, 230, 0, 0.76));
  border: 1px solid rgba(90, 170, 9, 0.35);
  margin-bottom: 10px;
}
.lsb-step__c h3{ margin: 0 0 4px; font-size: 15px; font-weight: 900; }
.lsb-step__c p{ margin:0; opacity:.9; line-height: 1.45; }

.lsb-note{
display:flex; gap: 12px; align-items:flex-start;
padding: 14px; border-radius: 18px;
background: rgba(37,77,235,.10);
border: 1px solid rgba(37,77,235,.22);
margin-top: 14px;
}
.lsb-note i{ margin-top: 2px; opacity:.95; }

/* Sticky form card */
.lsb-sticky{ position: sticky; top: 92px; }
@media (max-width: 980px){ .lsb-sticky{ position: relative; top: auto; } }

.lsb-formWrap{ padding: 0 12px 12px; }

/* Forminator: mini harmonisation */
.ls-benevolat .forminator-ui .forminator-button{
border-radius: 14px !important;
font-weight: 900 !important;
}
.ls-benevolat .forminator-ui .forminator-input,
.ls-benevolat .forminator-ui .forminator-textarea,
.ls-benevolat .forminator-ui .forminator-select-container .select2-selection{
border-radius: 14px !important;
}
.lsb-small{ margin: 10px 0 0; font-size: 12px; opacity: .82; line-height: 1.45; }

/* Force fullwidth sur CE template uniquement */
body.page-template-page-benevolat-futuriste .site-content,
body.page-template-page-benevolat-futuriste .content-area,
body.page-template-page-benevolat-futuriste .site-main {
max-width: none !important;
width: 100% !important;
}

/* si ton thème met des paddings latéraux */
body.page-template-page-benevolat-futuriste .site-main {
padding-left: 0 !important;
padding-right: 0 !important;
}

/* === Shell identique au header/menu (comme Accueil) === */
:root{
--ls-shell: 1560px; /* ajuste si ton header est plus petit : 1440 / 1480 */
--ls-gutter: clamp(16px, 2.6vw, 40px);
}

.lsb-container{
width: 100%;
max-width: var(--ls-shell);
margin-inline: auto;
}

body.page-template-page-benevolat-futuriste .site-content,
body.page-template-page-benevolat-futuriste .content-area,
body.page-template-page-benevolat-futuriste .site-main{
max-width: none;
width: 100%;
}


/* =========================
   Form Bénévolat — grille 2 colonnes
   Exceptions : textarea longues + consent
========================= */

/* Base spacing */
.page-benevolat .forminator-ui .forminator-row,
.page-benevolat .forminator-ui .forminator-field {
  margin-bottom: 14px;
}

/* Desktop: 2 colonnes */
@media (min-width: 992px) {

  /* Le wrapper global du form (Forminator) */
  .page-benevolat .forminator-ui form {
    --ls-gap: 16px;
  }

  /* On transforme la liste des champs en grille */
  .page-benevolat .forminator-ui .forminator-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ls-gap);
    align-items: start;
  }

  /* Chaque champ prend 1 colonne */
  .page-benevolat .forminator-ui .forminator-field {
    margin: 0 !important;
  }

  /* Pleine largeur : Notes complémentaires + Votre idée + Consentement */
  .page-benevolat .forminator-ui [data-field-id="textarea-1"],
  .page-benevolat .forminator-ui [data-field-id="textarea-2"],
  .page-benevolat .forminator-ui [data-field-id="consent-1"] {
    grid-column: 1 / -1;
  }

  /* Si Forminator n’a pas data-field-id chez toi, on met un fallback “safe” */
  .page-benevolat .forminator-ui .forminator-field-textarea,
  .page-benevolat .forminator-ui .forminator-field-consent {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   PAGE BÉNÉVOLAT — ULTRA FUTURISTE (VERT / JAUNE)
   Compact + raffiné + responsive
   Cible: .page-benevolat uniquement
========================================================= */

.page-benevolat{
  --ls-neon-g: #39ff7a;
  --ls-neon-y: #ffe54a;
  --ls-ink: rgba(10,14,12,.88);
  --ls-muted: rgba(10,14,12,.62);

  --ls-card: rgba(255,255,255,.52);
  --ls-card2: rgba(255,255,255,.38);
  --ls-stroke: rgba(0,0,0,.08);

  --ls-radius: 18px;
  --ls-gap: 14px;
  --ls-pad: 16px;

  --ls-shadow: 0 18px 55px rgba(10,20,10,.20);
  --ls-glow: 0 0 0 1px rgba(57,255,122,.18), 0 0 40px rgba(57,255,122,.12), 0 0 60px rgba(255,229,74,.10);
}

/* Fond subtil futuriste */
.page-benevolat main{
  position: relative;
}
.page-benevolat main::before{
  content:"";
  position:absolute; inset:-60px 0 -60px 0;
  background:
    radial-gradient(900px 360px at 20% 10%, rgba(57,255,122,.22), transparent 60%),
    radial-gradient(900px 360px at 75% 20%, rgba(255,229,74,.18), transparent 60%),
    radial-gradient(700px 380px at 55% 80%, rgba(57,255,122,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}
.page-benevolat main > *{ position:relative; z-index:1; }

/* ============ Layout: bloc gauche + form droite ============ */
.page-benevolat .lsb-wrap{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 3vw, 36px);
  align-items:start;
  width: min(1180px, 92vw);
  margin-inline:auto;
  padding: clamp(18px, 3.5vw, 42px) 0;
}
@media (max-width: 980px){
  .page-benevolat .lsb-wrap{ grid-template-columns: 1fr; }
}

/* ============ Cards “glass” ============ */
.page-benevolat .lsb-card{
  background: linear-gradient(180deg, var(--ls-card), var(--ls-card2));
  border: 1px solid var(--ls-stroke);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
}

/* Header néon */
.page-benevolat .lsb-card__head{
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:
    linear-gradient(90deg, rgba(57,255,122,.18), rgba(255,229,74,.14));
  position:relative;
}
.page-benevolat .lsb-card__head::after{
  content:"";
  position:absolute; inset:-1px -1px auto -1px;
  height:2px;
  background: linear-gradient(90deg, var(--ls-neon-g), var(--ls-neon-y));
  opacity:.75;
}
.page-benevolat .lsb-card__title{
  margin:0;
  font-size: 18px;
  letter-spacing:.2px;
  color: var(--ls-ink);
  display:flex; align-items:center; gap:10px;
}
.page-benevolat .lsb-badge{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  color: rgba(10,14,12,.78);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
}
.page-benevolat .lsb-card__body{ padding: var(--ls-pad); }

/* ============ Texte gauche : plus compact + premium ============ */
.page-benevolat .lsb-steps{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.page-benevolat .lsb-step{
  display:grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(0,0,0,.06);
}
.page-benevolat .lsb-step__n{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:grid; place-items:center;
  font-weight: 800;
  color: rgba(10,14,12,.85);
  background: linear-gradient(180deg, rgba(57,255,122,.35), rgba(255,229,74,.25));
  box-shadow: 0 10px 25px rgba(57,255,122,.10);
}
.page-benevolat .lsb-step__t{ margin:0; font-weight: 750; color: var(--ls-ink); font-size: 14px; }
.page-benevolat .lsb-step__d{ margin:2px 0 0; color: var(--ls-muted); font-size: 13px; line-height: 1.25; }

.page-benevolat .lsb-tip{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(57,255,122,.20);
  background: linear-gradient(90deg, rgba(57,255,122,.12), rgba(255,229,74,.10));
  box-shadow: var(--ls-glow);
  font-size: 13px;
  color: rgba(10,14,12,.78);
}

/* =========================================================
   FORMINATOR — COMPACT + GRILLE 2 COLONNES
========================================================= */
.page-benevolat .forminator-ui{
  color: var(--ls-ink);
}

/* On enlève des marges “trop aérées” */
.page-benevolat .forminator-ui .forminator-row,
.page-benevolat .forminator-ui .forminator-field{
  margin: 0 !important;
}

/* Grille desktop */
@media (min-width: 992px){
  .page-benevolat .forminator-ui form .forminator-fields{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    align-items:start;
  }
}

/* Mobile 1 colonne */
@media (max-width: 991px){
  .page-benevolat .forminator-ui form .forminator-fields{
    display:block;
  }
  .page-benevolat .forminator-ui .forminator-field{
    margin-bottom: 12px !important;
  }
}

/* Labels plus petits, plus premium */
.page-benevolat .forminator-ui .forminator-label{
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .2px;
  margin-bottom: 6px !important;
  color: rgba(10,14,12,.78) !important;
}

/* Inputs plus compacts */
.page-benevolat .forminator-ui input,
.page-benevolat .forminator-ui select,
.page-benevolat .forminator-ui textarea{
  border-radius: 14px !important;
  padding: 10px 12px !important;
  min-height: 40px !important;
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  font-size: 14px !important;
}

/* Focus néon vert/jaune */
.page-benevolat .forminator-ui input:focus,
.page-benevolat .forminator-ui select:focus,
.page-benevolat .forminator-ui textarea:focus{
  outline: none !important;
  border-color: rgba(57,255,122,.55) !important;
  box-shadow: 0 0 0 3px rgba(57,255,122,.18), 0 0 0 1px rgba(255,229,74,.14) inset !important;
}

/* =========================================================
   Checkbox: 2 colonnes sur desktop pour compacter
========================================================= */
@media (min-width: 992px){
  .page-benevolat .forminator-ui .forminator-field-checkbox .forminator-checkbox-wrapper{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
  }
}

/* lignes de checkbox plus compactes */
.page-benevolat .forminator-ui .forminator-field-checkbox .forminator-checkbox{
  margin: 0 !important;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(0,0,0,.06);
}

/* =========================================================
   Champs pleine largeur (exceptions)
   - Notes complémentaires / Votre idée
   - Consentement
========================================================= */
@media (min-width: 992px){
  .page-benevolat .forminator-ui .forminator-field-textarea,
  .page-benevolat .forminator-ui .forminator-field-consent{
    grid-column: 1 / -1;
  }
}

/* Textarea un peu plus haute mais pas énorme */
.page-benevolat .forminator-ui textarea{
  min-height: 110px !important;
}

/* Consentement : card compacte */
.page-benevolat .forminator-ui .forminator-field-consent{
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(57,255,122,.10), rgba(255,229,74,.08));
  border: 1px solid rgba(57,255,122,.20);
}

/* =========================================================
   Bouton submit ultra futuriste
========================================================= */
.page-benevolat .forminator-ui .forminator-button-submit{
  width: 100%;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  font-weight: 850 !important;
  letter-spacing: .3px;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: linear-gradient(90deg, rgba(57,255,122,.95), rgba(255,229,74,.92)) !important;
  color: rgba(10,14,12,.92) !important;
  box-shadow: 0 16px 45px rgba(57,255,122,.18), 0 10px 28px rgba(255,229,74,.14);
  transition: transform .15s ease, filter .15s ease;
}
.page-benevolat .forminator-ui .forminator-button-submit:hover{
  transform: translateY(-1px);
  filter: saturate(1.1);
}

/* Petit texte compteur / limite: discret */
.page-benevolat .forminator-ui .forminator-limit{
  font-size: 12px !important;
  color: rgba(10,14,12,.55) !important;
}

/* Séparateurs HTML Forminator: on les rend “fins” */
.page-benevolat .forminator-ui .forminator-field-html{
  opacity: .9;
}
.page-benevolat .forminator-ui .forminator-field-html hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(57,255,122,.0), rgba(57,255,122,.35), rgba(255,229,74,.25), rgba(255,229,74,0));
}


/* ======================================================
   FORM FUTURISTE — GLASS + NEON VERT / JAUNE
   Compatible Forminator
====================================================== */

:root {
  --neon-green: #00ff9c;
  --neon-yellow: #eaff00;
  --glass-bg: rgba(18, 22, 30, 0.55);
  --glass-border: rgba(255,255,255,.15);
  --text-main: #000;
  --text-soft: #9fb3ad;
}

/* ---- CONTAINER GLOBAL ---- */
.forminator-ui {
  font-size: 17px;
  color: var(--text-main);
}

/* ---- GLASS HEAD ---- */
.ls-glassHead,
.ls-glassSub {
  background: linear-gradient(
    135deg,
    rgba(0,255,156,.18),
    rgba(234,255,0,.12)
  );
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 0 35px rgba(0,255,156,.25);
}

.ls-glassHead h2,
.ls-glassSub h3 {
  margin: 0 0 6px;
  font-weight: 800;
}

.ls-glassHead p,
.ls-glassSub p {
  margin: 0;
  color: var(--text-soft);
}

/* ---- INPUTS GLASS ---- */
.forminator-input,
.forminator-textarea,
.forminator-select {
  background: rgba(231, 231, 231, 0.55) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  color: #000 !important;
  padding: 14px 16px !important;
}

.forminator-input:focus,
.forminator-textarea:focus,
.forminator-select:focus {
  border-color: var(--neon-green) !important;
  box-shadow: 0 0 0 2px rgba(0,255,156,.35) !important;
}

/* ---- LABELS ---- */
.forminator-label {
  font-weight: 600;
  color: var(--text-main);
}

/* ======================================================
   CHIPS (CHECKBOX & RADIO)
====================================================== */

.forminator-checkbox,
.forminator-radio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.forminator-checkbox label,
.forminator-radio label {
  position: relative;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all .25s ease;
  text-align: center;
  font-weight: 600;
}

.forminator-checkbox input,
.forminator-radio input {
  display: none !important;
}

/* ---- HOVER ---- */
.forminator-checkbox label:hover,
.forminator-radio label:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,255,156,.35);
}

/* ---- CHECKED ---- */
.forminator-checkbox input:checked + span,
.forminator-radio input:checked + span {
  background: linear-gradient(
    135deg,
    var(--neon-green),
    var(--neon-yellow)
  );
  color: #08150f;
  box-shadow: 0 0 28px rgba(0,255,156,.75);
  border-color: transparent;
}

/* ======================================================
   PAGE BREAK / NAVIGATION
====================================================== */

.forminator-page-break {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

/* ---- BOUTONS ---- */
.forminator-button,
.forminator-page-break button {
  background: linear-gradient(
    135deg,
    var(--neon-green),
    var(--neon-yellow)
  ) !important;
  color: #08150f !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  transition: all .25s ease;
  box-shadow: 0 0 25px rgba(0,255,156,.55);
}

.forminator-button:hover,
.forminator-page-break button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 45px rgba(234,255,0,.85);
}

/* ---- BOUTON RETOUR ---- */
.forminator-page-break .forminator-back {
  background: rgba(255,255,255,.08) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

/* ======================================================
   TEXTAREA / MESSAGE
====================================================== */

.forminator-textarea {
  min-height: 140px;
  resize: vertical;
}

/* ======================================================
   RGPD
====================================================== */

.forminator-consent {
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--glass-border);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-soft);
}

/* ======================================================
   SUCCESS MESSAGE
====================================================== */

.forminator-response-message {
  background: linear-gradient(
    135deg,
    rgba(0,255,156,.25),
    rgba(234,255,0,.15)
  );
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 0 45px rgba(0,255,156,.45);
}

/* ======================================================
   MOBILE OPTIMISATION
====================================================== */

@media (max-width: 768px) {
  .forminator-checkbox,
  .forminator-radio {
    grid-template-columns: 1fr;
  }

  .ls-glassHead,
  .ls-glassSub {
    padding: 18px;
  }
}


/* =========================
   CONTACT FUTURISTE (LSC)
   Fond clair + jaune/vert + glass + chips
   Responsive: mobile/tablette/desktop
========================= */

.lsc-contact{
  --lsc-ink: #0b0f12;
  --lsc-muted: rgba(11,15,18,.62);
  --lsc-line: rgba(11,15,18,.10);
  --lsc-glass: rgba(255,255,255,.64);
  --lsc-glass2: rgba(255,255,255,.52);
  --lsc-shadow: 0 18px 60px rgba(0,0,0,.10);
  --lsc-shadow2: 0 8px 24px rgba(0,0,0,.08);
  --lsc-radius: 20px;
  --lsc-radius2: 16px;
  --lsc-yellow: #ffe600;
  --lsc-lime: #2fe65c;
  --lsc-lime2: #9dff3c;
  color: var(--lsc-ink);
}

/* largeur alignée sur le thème */
.lsc-container{
  width: 100%;
}

/* HERO */
.lsc-hero{
  overflow: hidden;
  border-bottom: 1px solid var(--lsc-line);
  background:
    radial-gradient(1100px 560px at 12% 15%, rgba(255,230,0,.40), transparent 60%),
    radial-gradient(900px 520px at 88% 20%, rgba(47,230,92,.26), transparent 55%),
    radial-gradient(720px 500px at 85% 85%, rgba(255,230,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.82));
}

.lsc-hero__bg{
  position:absolute; inset:0; pointer-events:none;
}

.lsc-grid{
  position:absolute; inset:-2px;
  opacity:.18;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 35% 30%, #000 0%, transparent 70%);
}

.lsc-orb{
  position:absolute;
  width: 420px; height: 420px;
  filter: blur(30px);
  opacity: .65;
  border-radius: 50%;
}
.lsc-orb--1{ left:-140px; top:-120px; background: rgba(255,230,0,.55); }
.lsc-orb--2{ right:-160px; top:-140px; background: rgba(47,230,92,.35); }
.lsc-orb--3{ right:-120px; bottom:-160px; background: rgba(255,230,0,.28); }

.lsc-hero__inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

.lsc-kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--lsc-line);
  background: rgba(255,255,255,.72);
  box-shadow: var(--lsc-shadow2);
  font-weight: 700;
}
.lsc-kicker i{ color: rgba(11,15,18,.75); }

.lsc-title{
  margin: 14px 0 8px;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lsc-title__accent{
  position: relative;
  display:inline-block;
}
.lsc-title__accent::after{
  content:"";
  display:block;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lsc-yellow), var(--lsc-lime));
  box-shadow: 0 10px 26px rgba(47,230,92,.22);
}

.lsc-lead{
  margin: 10px 0 18px;
  color: var(--lsc-muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  max-width: 68ch;
}

.lsc-ctaRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 16px;
}

.lsc-btn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--lsc-line);
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  will-change: transform;
}
.lsc-btn:hover{ transform: translateY(-1px); box-shadow: var(--lsc-shadow2); }
.lsc-btn--primary{
  background: linear-gradient(90deg, rgba(255,230,0,.96), rgba(47,230,92,.86));
  border-color: rgba(0,0,0,.10);
}
.lsc-btn--ghost{
  background: rgba(255,255,255,.70);
}
.lsc-btn--full{ width:100%; }

.lsc-trust{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.lsc-trust__item{
  display:flex;
  gap: 8px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--lsc-line);
  background: rgba(255,255,255,.72);
}
.lsc-trust__num{ font-weight: 900; }
.lsc-trust__txt{ color: var(--lsc-muted); font-weight: 600; font-size: 14px; }
.lsc-trust__dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--lsc-yellow), var(--lsc-lime));
  box-shadow: 0 0 0 6px rgba(47,230,92,.10);
}

/* CARDS */
.lsc-card{
  border-radius: var(--lsc-radius);
  border: 1px solid var(--lsc-line);
  box-shadow: var(--lsc-shadow);
  overflow: hidden;
}
.lsc-card--glass{
  background: linear-gradient(180deg, var(--lsc-glass), var(--lsc-glass2));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lsc-card--neo{
  background: rgba(255,255,255,.78);
  transition: transform .15s ease, box-shadow .15s ease;
  padding: clamp(18px, 3vw, 34px);
}
.lsc-card--neo:hover{ transform: translateY(-2px); box-shadow: var(--lsc-shadow); }

.lsc-card__head{
  display:flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lsc-line);
}
.lsc-card__body{ padding: 16px; }
.lsc-card__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
}

.lsc-pill{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--lsc-line);
  background: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
}

.lsc-pill--soft{
  background: rgba(255,255,255,.60);
}

.lsc-miniChips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lsc-miniChips span{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--lsc-line);
  background: rgba(255,255,255,.65);
  font-weight: 800;
  font-size: 12px;
}

.lsc-bullets{
  margin: 10px 0 12px;
  padding: 0;
  list-style: none;
  color: var(--lsc-muted);
}
.lsc-bullets li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 6px 0;
}
.lsc-bullets i{
  margin-top: 2px;
  color: rgba(47,230,92,.95);
  text-shadow: 0 0 18px rgba(47,230,92,.25);
}

.lsc-signal{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--lsc-line);
  background: rgba(255,255,255,.70);
  margin: 10px 0 12px;
}
.lsc-signal__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lsc-lime);
  box-shadow: 0 0 0 6px rgba(47,230,92,.14);
}

.lsc-small{
  margin: 10px 0 0;
  color: rgba(11,15,18,.55);
  font-size: 13px;
}

/* SECTIONS */
.lsc-section{
  padding: clamp(28px, 4vw, 56px) 0;
}
.lsc-section__head{
  margin-bottom: 16px;
}
.lsc-h2{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.01em;
}
.lsc-sub{
  margin: 0;
  color: var(--lsc-muted);
  max-width: 72ch;
}

.lsc-gridCards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 1.8vw, 18px);
}
.lsc-card__icon{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid var(--lsc-line);
  background: linear-gradient(180deg, rgba(255,230,0,.35), rgba(47,230,92,.20));
  box-shadow: 0 10px 28px rgba(47,230,92,.10);
  margin-bottom: 10px;
}
.lsc-h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.lsc-chipRow{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.lsc-chip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--lsc-line);
  background: rgba(255,255,255,.66);
  font-weight: 800;
  font-size: 12px;
}

/* FORM LAYOUT */
.lsc-twoCols{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

.lsc-note{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--lsc-line);
  background: rgba(255,255,255,.70);
  box-shadow: var(--lsc-shadow2);
  margin-top: 14px;
}
.lsc-note i{
  margin-top: 2px;
  color: rgba(11,15,18,.75);
}

.lsc-timeline{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.lsc-step{
  display:grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--lsc-line);
  background: rgba(255,255,255,.70);
}
.lsc-step__n{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 14px;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255,230,0,.9), rgba(47,230,92,.55));
  border: 1px solid rgba(0,0,0,.10);
}
.lsc-step__c h3{
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 900;
}
.lsc-step__c p{
  margin: 0;
  color: var(--lsc-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Sticky: desktop only (sinon ça casse sur mobile) */
@media (min-width: 992px){
  .lsc-sticky{
    position: sticky;
    top: 96px; /* laisse passer header/nav */
  }
}

/* =========================
   Forminator styling (soft override)
========================= */
.lsc-contact .forminator-ui{
  font-family: inherit;
}

.lsc-contact .forminator-ui .forminator-row{
  margin-bottom: 12px !important;
}

.lsc-contact .forminator-ui .forminator-label{
  font-weight: 800 !important;
  color: rgba(11,15,18,.86) !important;
}

.lsc-contact .forminator-ui input,
.lsc-contact .forminator-ui select,
.lsc-contact .forminator-ui textarea{
  border-radius: 14px !important;
  border: 1px solid rgba(11,15,18,.14) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
  padding: 12px 12px !important;
  outline: none !important;
}

.lsc-contact .forminator-ui textarea{ min-height: 140px; }

.lsc-contact .forminator-ui input:focus,
.lsc-contact .forminator-ui select:focus,
.lsc-contact .forminator-ui textarea:focus{
  border-color: rgba(47,230,92,.55) !important;
  box-shadow: 0 0 0 6px rgba(47,230,92,.16) !important;
}

.lsc-contact .forminator-ui .forminator-button,
.lsc-contact .forminator-ui button[type="submit"]{
  width: 100% !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
  background: linear-gradient(90deg, rgba(255,230,0,.96), rgba(47,230,92,.86)) !important;
  color: #0b0f12 !important;
  box-shadow: 0 18px 40px rgba(47,230,92,.14) !important;
}

.lsc-contact .forminator-ui .forminator-button:hover,
.lsc-contact .forminator-ui button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 50px rgba(47,230,92,.18) !important;
}

/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

/* <= 1024px: cartes 2 colonnes */
@media (max-width: 1024px){
  .lsc-hero__inner{ grid-template-columns: 1fr; }
  .lsc-hero__right{ max-width: 560px; }
  .lsc-gridCards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lsc-twoCols{ grid-template-columns: 1fr; }
}

/* <= 640px: 1 colonne + boutons full */
@media (max-width: 640px){
  .lsc-ctaRow .lsc-btn{ width: 100%; }
  .lsc-gridCards{ grid-template-columns: 1fr; }
  .lsc-trust__item{ width: 100%; }
  .lsc-miniChips{ justify-content: flex-start; }
  .lsc-step{ grid-template-columns: 36px 1fr; }
  .lsc-step__n{ width: 36px; height: 36px; border-radius: 12px; }
}


/* HERO = largeur du menu (container), pas full width */
.lsc-hero{
  position: relative;
  padding: clamp(56px, 7vw, 110px) 0 56px;
  border-bottom: 0;              
}

.lsc-heroBox{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(11,15,18,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  padding: clamp(18px, 3vw, 34px);

  /* ✅ gradient uniquement dans la box (comme tu veux) */
  background:
    radial-gradient(1100px 560px at 12% 15%, rgba(255,230,0,.40), transparent 60%),
    radial-gradient(900px 520px at 88% 20%, rgba(47,230,92,.26), transparent 55%),
    radial-gradient(720px 500px at 85% 85%, rgba(255,230,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.82));
}

/* ton background interne reste OK */
.lsc-hero__bg{ position:absolute; inset:0; pointer-events:none; }

/* grid intérieure */
.lsc-hero__inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

/* responsive */
@media (max-width:1024px){
  .lsc-hero__inner{ grid-template-columns: 1fr; }
}


/* Sections = TRANSPARENTES */
.lsc-hero,
.lsc-heroBox,
.lsc-section,
.section,
.hero,
.hero__overlay{
  background: transparent !important;
}
/* =========================================================
   FIX LARGEUR + FORCE DESIGN (Contact Futuriste)
   À COLLER TOUT EN BAS DU CSS
   ========================================================= */

/* 1) Débloque les wrappers thème/WPBakery (max-width) */
body.page-template-page-tpl-composer #content,
body.page-template-page-tpl-composer #primary,
body.page-template-page-tpl-composer .site-content,
body.page-template-page-tpl-composer .content-area,
body.page-template-page-tpl-composer .site-main{
  max-width: none !important;
  width: 100% !important;
}

/* 2) Ton layout doit rester centré comme Accueil (container) */
.lsc-contact .container.lsc-container{
  width: 100% !important;
  /* Option : si ta page Accueil est plus large, augmente ici.
     Mets 1200 / 1280 / 1320 / 1400 selon ton thème */
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 768px){
  .lsc-contact .container.lsc-container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 3) Empêche le scroll horizontal à cause des orbs/blur */
.lsc-contact{
  overflow-x: hidden !important;
}

/* =========================================================
   FORCE DESIGN ATTRACTIF (dégradés + glass + glow)
   ========================================================= */

.lsc-contact{
  --lsc-grad-primary: linear-gradient(135deg, #ffe600, #2fe65c);
  --lsc-grad-candy: linear-gradient(90deg, var(--lsc-yellow), var(--lsc-lime));
  --lsc-grad-border: linear-gradient(135deg, rgba(255,230,0,.90), rgba(47,230,92,.70), rgba(57,210,255,.70), rgba(139,92,246,.65));
  --lsc-shadow: 0 22px 60px rgba(0,0,0,.14);
}

/* Cards : force glass + bordure dégradée */
.lsc-contact .lsc-card{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 22px !important;
  box-shadow: var(--lsc-shadow) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Bordure dégradée premium */
.lsc-contact .lsc-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  padding:1px !important;
  border-radius:inherit !important;
  background: var(--lsc-grad-border) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity:.70 !important;
  pointer-events:none !important;
}

/* Glow interne */
.lsc-contact .lsc-card::after{
  content:"" !important;
  position:absolute !important;
  inset:-35% !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,230,0,.28), transparent 48%),
    radial-gradient(circle at 85% 25%, rgba(47,230,92,.22), transparent 50%),
    radial-gradient(circle at 75% 85%, rgba(57,210,255,.20), transparent 55%) !important;
  opacity:.95 !important;
  pointer-events:none !important;
}

/* Boutons : force dégradé moderne */
.lsc-contact .lsc-btn--primary{
  background: var(--lsc-grad-primary) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  color:#0b0f12 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.14) !important;
}
.lsc-contact .lsc-btn--ghost{
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}

/* Hero titre accent en dégradé */
.lsc-contact .lsc-title__accent{
  background: var(--lsc-grad-candy) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Forminator : force style inputs + submit */
.lsc-contact .lsc-formWrap input,
.lsc-contact .lsc-formWrap select,
.lsc-contact .lsc-formWrap textarea{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  font-size: 1.6rem !important;
}
.lsc-contact .lsc-formWrap .forminator-button,
.lsc-contact .lsc-formWrap button[type="submit"],
.lsc-contact .lsc-formWrap input[type="submit"]{
  background: var(--lsc-grad-primary) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  color: #0b0f12 !important;
  box-shadow: 0 20px 52px rgba(0,0,0,.16) !important;
}


/* =========================================================
   FIX FORMULAIRE CONTACT — Forminator + Glass Card
   ========================================================= */

/* 1️⃣ Désactiver la grille Forminator (2 colonnes) */
.lsc-contact .forminator-row{
  display: block !important;
}

.lsc-contact .forminator-col{

  flex: none !important;
}

/* 2️⃣ Espacement propre entre les champs */
.lsc-contact .forminator-field{
  margin-bottom: 14px !important;
}

/* 3️⃣ Champs INPUT / TEXTAREA propres */
.lsc-contact .forminator-input,
.lsc-contact textarea.forminator-textarea,
.lsc-contact select.forminator-select{
  width: 100% !important;
  min-height: 48px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  font-size: 1.6rem !important;
}

/* Textarea */
.lsc-contact textarea.forminator-textarea{
  min-height: 120px;
  resize: vertical;
}

/* 4️⃣ Labels lisibles */
.lsc-contact .forminator-label{
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.75) !important;
}

/* 5️⃣ Messages d’erreur FORMATOR propres */
.lsc-contact .forminator-error-message{
  display: block !important;
  margin-top: 6px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(255,0,0,.08) !important;
  color: #a40000 !important;
  font-size: 1.25rem !important;
  line-height: 1.4;
}

/* Champ en erreur */
.lsc-contact .forminator-has_error .forminator-input,
.lsc-contact .forminator-has_error textarea{
  border-color: #ff4d4d !important;
  box-shadow: 0 0 0 3px rgba(255,77,77,.18);
}

/* 6️⃣ Bouton submit pleine largeur */
.lsc-contact .forminator-button,
.lsc-contact button[type="submit"]{
  width: 100% !important;
  margin-top: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  background: linear-gradient(135deg, #ffe600, #2fe65c) !important;
  border: none !important;
  color: #0b0f12 !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

/* Hover */
.lsc-contact .forminator-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 54px rgba(0,0,0,.22);
}

/* 7️⃣ Consentement RGPD aligné */
.lsc-contact .forminator-checkbox{
  display: flex !important;
  gap: 8px;
  align-items: flex-start;
}
.lsc-contact .forminator-checkbox label{
  font-size: 1.3rem;
  color: rgba(0,0,0,.70);
}


/* =========================================================
   Forminator — garder le layout 2 colonnes, mais joli + clean
   Scope : page contact futuriste
   ========================================================= */

/* 1) On garde la grille Forminator mais on ajoute un vrai gap */
.lsc-contact .forminator-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) Les colonnes Forminator restent en 2 colonnes (col-6) */
.lsc-contact .forminator-col{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Champs : base premium et cohérente */
.lsc-contact .forminator-label{
  display:block !important;
  margin-bottom: 6px !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.78) !important;
}

/* Inputs / selects / textarea */
.lsc-contact .forminator-input,
.lsc-contact textarea.forminator-textarea,
.lsc-contact select.forminator-select{
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  font-size: 1.6rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.lsc-contact textarea.forminator-textarea{
  min-height: 120px !important;
  resize: vertical;
}

/* Focus */
.lsc-contact .forminator-input:focus,
.lsc-contact textarea.forminator-textarea:focus,
.lsc-contact select.forminator-select:focus{
  outline: none !important;
  border-color: rgba(0,0,0,.22) !important;
  box-shadow: 0 0 0 4px rgba(255,230,0,.28) !important;
}

/* 4) Messages d’erreur (propre, pas énorme, pas en colonne bizarre) */
.lsc-contact .forminator-error-message{
  display:block !important;
  margin-top: 6px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(255,0,0,.08) !important;
  color: #a40000 !important;
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
}

/* 5) En erreur : bordure visible */
.lsc-contact .forminator-has_error .forminator-input,
.lsc-contact .forminator-has_error textarea.forminator-textarea,
.lsc-contact .forminator-has_error select.forminator-select{
  border-color: #ff4d4d !important;
  box-shadow: 0 0 0 3px rgba(255,77,77,.18) !important;
}

/* 6) Bouton submit full largeur, style dégradé */
.lsc-contact .forminator-button,
.lsc-contact button[type="submit"],
.lsc-contact input[type="submit"]{
  width: 100% !important;
  margin-top: 12px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  background: linear-gradient(135deg, #ffe600, #2fe65c) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  color: #0b0f12 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.16) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.lsc-contact .forminator-button:hover,
.lsc-contact button[type="submit"]:hover,
.lsc-contact input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 56px rgba(0,0,0,.20) !important;
}

/* 7) RGPD checkbox alignée */
.lsc-contact .forminator-checkbox{
  display:flex !important;
  align-items:flex-start !important;
  gap: 10px !important;
}
.lsc-contact .forminator-checkbox label{
  font-size: 1.3rem !important;
  color: rgba(0,0,0,.70) !important;
  line-height: 1.35 !important;
}

/* 8) Responsive : en dessous de 860px, on passe en 1 colonne naturellement */
@media (max-width: 860px){
  .lsc-contact .forminator-col-6{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}


/* =========================================================
   CONTACT — Forminator : alignement PRO (grid stable)
   Objectif :
   - 2 colonnes propres (Prénom/Nom, Téléphone/Email)
   - Message, RGPD, Submit = pleine largeur
   - Alignement vertical/horizontal parfait
   ========================================================= */

/* 0) Neutraliser les paddings de colonnes Forminator */
.lsc-contact .forminator-row,
.lsc-contact .forminator-col{
  margin: 0 !important;
  padding: 0 !important;
}

/* 1) On transforme la grille Forminator en CSS Grid stable */
.lsc-contact .lsc-formWrap form.forminator-custom-form{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 2 colonnes */
  gap: 14px 14px !important;
  align-items: start !important;
}

/* 2) Chaque field prend toute la largeur de sa cellule */
.lsc-contact .lsc-formWrap .forminator-field{
  width: 100% !important;
  margin: 0 !important;
}

/* 3) Les champs FULL WIDTH : HTML, Message, RGPD, Submit, messages */
.lsc-contact .lsc-formWrap .forminator-field-html,
.lsc-contact .lsc-formWrap .forminator-field-textarea,
.lsc-contact .lsc-formWrap .forminator-field-consent,
.lsc-contact .lsc-formWrap .forminator-response-message,
.lsc-contact .lsc-formWrap .forminator-button,
.lsc-contact .lsc-formWrap .forminator-pagination-footer{
  grid-column: 1 / -1 !important; /* pleine largeur */
}

/* 4) Si Forminator met un wrapper row à l’intérieur, on le neutralise */
.lsc-contact .lsc-formWrap .forminator-row{
  display: contents !important;
}

/* 5) Labels */
.lsc-contact .lsc-formWrap .forminator-label{
  display: block !important;
  margin: 0 0 6px !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.78) !important;
}

/* 6) Inputs / Select / Textarea uniformes */
.lsc-contact .lsc-formWrap .forminator-input,
.lsc-contact .lsc-formWrap select.forminator-select,
.lsc-contact .lsc-formWrap textarea.forminator-textarea{
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  font-size: 1.6rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

/* Textarea message : bien large et lisible */
.lsc-contact .lsc-formWrap textarea.forminator-textarea{
  min-height: 130px !important;
  resize: vertical;
}

/* 7) Focus propre */
.lsc-contact .lsc-formWrap .forminator-input:focus,
.lsc-contact .lsc-formWrap select.forminator-select:focus,
.lsc-contact .lsc-formWrap textarea.forminator-textarea:focus{
  outline: none !important;
  border-color: rgba(0,0,0,.22) !important;
  box-shadow: 0 0 0 4px rgba(255,230,0,.28) !important;
}

/* 8) RGPD : alignement propre + pas écrasé */
.lsc-contact .lsc-formWrap .forminator-field-consent{
  padding-top: 4px !important;
}

.lsc-contact .lsc-formWrap .forminator-checkbox{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.lsc-contact .lsc-formWrap .forminator-checkbox input{
  margin-top: 4px !important;
}

.lsc-contact .lsc-formWrap .forminator-checkbox label{
  font-size: 1.3rem !important;
  line-height: 1.35 !important;
  color: rgba(0,0,0,.72) !important;
}

/* 9) Erreurs : propres, pas de décalage */
.lsc-contact .lsc-formWrap .forminator-error-message{
  display: block !important;
  margin-top: 6px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(255,0,0,.08) !important;
  color: #a40000 !important;
  font-size: 1.25rem !important;
}

/* 10) Submit : full width + aligné */
.lsc-contact .lsc-formWrap .forminator-button,
.lsc-contact .lsc-formWrap button[type="submit"],
.lsc-contact .lsc-formWrap input[type="submit"]{
  width: 100% !important;
  justify-content: center !important;
  margin: 6px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  background: linear-gradient(135deg, #ffe600, #2fe65c) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  color: #0b0f12 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.16) !important;
}

/* 11) Responsive : en mobile on passe en 1 colonne */
@media (max-width: 860px){
  .lsc-contact .lsc-formWrap form.forminator-custom-form{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   CONTACT — Padding propre pour le formulaire
   ========================================================= */

/* 1️⃣ Padding global de la card (espace autour du formulaire) */
.lsc-contact .lsc-card--glass{
  padding: 20px 22px 22px !important;
}

/* 2️⃣ Petit padding interne au formulaire (respiration) */
.lsc-contact .lsc-formWrap{
  padding: 6px 4px !important;
}


.lsc-contact .lsc-card__foot{
  margin-top: 18px !important;
}

.lsc-contact #form-contact{
  padding-bottom: clamp(170px, 7vw, 110px) !important; /* espace avant footer */
}


.hero__overlay,
.videoLoader {
  pointer-events: none !important;
}

.videoDock {
  position: relative;
  z-index: 50;
  pointer-events: auto;
}

.portraitFrame { position: relative; z-index: 1; }
.portraitVideo { position: relative; z-index: 1; display:block; width:100%; height:auto; }

.videoLoader { position:absolute; inset:0; z-index: 5; pointer-events: none; }

.videoDock { position: relative; z-index: 10; pointer-events: auto; }


/* La dock doit être cliquable */
.videoDock { position: relative; z-index: 50; pointer-events: auto; }

/* Les overlays ne doivent JAMAIS capter les clics */
.videoLoader,
.hero__overlay { pointer-events: none; }

.ls-benevolat .lsb-hero,
.ls-benevolat .lsb-section {
  padding: 60px;
}
@media (max-width: 980px) {
  .ls-benevolat .lsb-hero,
  .ls-benevolat .lsb-section {
    padding: 24px;
  }
}

/* OFFCANVAS overlay : quand il est caché, il ne doit JAMAIS capter les clics */
#offcanvas-overlay {
  pointer-events: none;
}

/* seulement quand le menu est ouvert */
body.offcanvas-open #offcanvas-overlay,
.offcanvas-open #offcanvas-overlay,
#offcanvas-overlay.is-active {
  pointer-events: auto;
}



/* CONTACT : RGPD + bouton submit en noir */
.lsc-contact .forminator-ui .forminator-consent .forminator-label,
.lsc-contact .forminator-ui .forminator-consent .forminator-description,
.lsc-contact .forminator-ui .forminator-consent .forminator-consent__description,
.lsc-contact .forminator-ui .forminator-consent label,
.lsc-contact .forminator-ui .forminator-consent p,
.lsc-contact .forminator-ui .forminator-field-consent label,
.lsc-contact .forminator-ui .forminator-field-consent .forminator-description,
.lsc-contact .forminator-ui .forminator-field-consent .forminator-text {
  color: #000 !important;
}

.lsc-contact .forminator-ui .forminator-button-submit,
.lsc-contact .forminator-ui button.forminator-button-submit,
.lsc-contact .forminator-ui input[type="submit"].forminator-button-submit {
  color: #000 !important;
}

.lsc-contact .forminator-ui .forminator-button-submit i,
.lsc-contact .forminator-ui .forminator-button-submit svg {
  color: #000 !important;
  fill: #000 !important;
}

/* ✅ ACTUALITES : empêcher le fond de .readerItem__meta de passer sous la flèche */
.readerItem {
  position: relative;
}

.readerItem__meta {
  position: relative;
  z-index: 1;
  padding-right: 12px !important;
  clip-path: inset(0 12px 0 0 round 999px);
}

/* flèche toujours au-dessus */
.readerItem__chev {
  position: relative;
  z-index: 5;
}


.teamGrid {
  gap: 18px;
}

.teamCard {
  margin: 0;
}

.teamCard__media {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--ls-shadow, 0 10px 26px rgba(0,0,0,.08));
  background: rgba(255,255,255,.6);
}

.teamCard__media img{
  display:block;
  width:100%;
  height:360px;      /* ou ta hauteur */
  object-fit:cover;
  object-position: center top;  /* 👈 ancré en haut */
}

@media (max-width: 980px) {
  .teamCard__media img { height: 220px; }
}


.teamCard__media img{
  object-position: 70% 0%;
}

input[type="submit"] {
  cursor: pointer;
  display: block;
  font-size: .8em;
  line-height: 40px;
  font-family: inherit;

}

/* NOPTIN — checkbox + texte sur la même ligne */
.noptin-optin-form .noptin-gdpr-checkbox-wrapper label,
.noptin-optin-form .noptin-optin-field-wrapper.noptin-gdpr-checkbox-wrapper label{
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
}

/* Checkbox : taille + pas de marge qui décale */
.noptin-optin-form .noptin-gdpr-checkbox-wrapper input[type="checkbox"]{
  margin: 0 !important;
  flex: 0 0 auto;
  transform: translateY(1px);
}

/* Texte : reste sur la ligne, et passe à la ligne si besoin (mobile) */
.noptin-optin-form .noptin-gdpr-checkbox-wrapper label span{
  display: inline;
  flex: 1 1 auto;
  line-height: 1.25;
  white-space: normal; /* important: évite de forcer en colonne */
}

/* Optionnel : si Noptin met un alignement chelou */
.noptin-optin-form .noptin-gdpr-checkbox-wrapper{
  text-align: left !important;
}