/* ============================================================
   BILAN MEDIA — PREMIUM HOMEPAGE
   Palette : --accent-1 #1470af  --accent-2 #8eb6dc
             --heading #162521   --text #707070
             --bg #F3F7F6        --footer-bg #1e3231
             --overlay-start #08415c  --overlay-end #1c110a
   Fonts   : Roboto (UI) · Playfair Display (display) · Merriweather (editorial)
   ============================================================ */
/* ---------- PLAYFAIR DISPLAY ---------- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;src:url('../fonts/playfair-700.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;src:url('../fonts/playfair-900.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;src:url('../fonts/playfair-700-italic.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:900;src:url('../fonts/playfair-900-italic.woff2') format('woff2');font-display:swap;}

/* ---------- ROBOTO ---------- */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url('../fonts/roboto-400.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:url('../fonts/roboto-500.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url('../fonts/roboto-700.woff2') format('woff2');font-display:swap;}

/* ---------- MERRIWEATHER ---------- */
@font-face{font-family:'Merriweather';font-style:italic;font-weight:400;src:url('../fonts/merriweather-400-italic.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:700;src:url('../fonts/merriweather-700.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Merriweather';font-style:italic;font-weight:700;src:url('../fonts/merriweather-700-italic.woff2') format('woff2');font-display:swap;}

:root{
  --accent-1:#1470af;
  --accent-2:#8eb6dc;
  --accent-1-dark:#0f5a8a;
  --heading:#162521;
  --text:#5a5a5a;
  --text-light:#8a8a8a;
  --bg:#F3F7F6;
  --bg-alt:#ffffff;
  --bg-dark:#08415c;
  --footer-bg:#1e3231;
  --white:#ffffff;
  --border:#e9e9e9;
  --overlay-start:#08415c;
  --overlay-end:#1c110a;

  --ff-sans:"Roboto",system-ui,-apple-system,sans-serif;
  --ff-display:"Playfair Display",Georgia,serif;
  --ff-editorial:"Merriweather",Georgia,serif;

  --container:1320px;
  --header-h:80px;

  --shadow-sm:0 2px 10px rgba(8,65,92,.06);
  --shadow-md:0 12px 40px rgba(8,65,92,.12);
  --shadow-lg:0 24px 80px rgba(8,65,92,.18);

  --radius:6px;
  --transition:.4s cubic-bezier(.2,.7,.2,1);
}

/* -------- RESET -------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--transition)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-display);font-weight:700;color:var(--heading);line-height:1.2}
em{font-style:italic}
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  transition:background .35s ease,box-shadow .35s ease,transform .35s ease;
}
.site-header[data-theme="solid"]{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);
}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:var(--header-h);
}
.site-header__logo img{height:48px;width:auto;transition:filter .3s}
.site-header[data-theme="transparent"] .site-header__logo img{
  filter:brightness(0) invert(1);
}
.site-nav ul{display:flex;gap:2rem;list-style:none}
.site-nav a{
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--white);
  position:relative;
  padding:.5rem 0;
}
.site-header[data-theme="solid"] .site-nav a{color:var(--heading)}
.site-nav a::after{
  content:"";position:absolute;left:0;bottom:.2rem;
  width:0;height:2px;background:var(--accent-1);
  transition:width .3s ease;
}
.site-nav a:hover::after,.site-nav a.is-current::after{width:100%}
.site-nav a:hover,.site-nav a.is-current{color:var(--accent-2)}
.site-header[data-theme="solid"] .site-nav a:hover,
.site-header[data-theme="solid"] .site-nav a.is-current{color:var(--accent-1)}

.site-header__burger{
  display:none;flex-direction:column;justify-content:space-between;
  width:32px;height:24px;padding:0;
}
.site-header__burger span{
  display:block;height:2px;width:100%;background:var(--white);
  border-radius:2px;transition:transform .3s,opacity .3s,background .3s;
}
.site-header[data-theme="solid"] .site-header__burger span{background:var(--heading)}
.site-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.site-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

/* ============================================================
   HERO — full-bleed image + Bravada animated title
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--white);
  overflow:hidden;
  padding:calc(var(--header-h) + 2rem) 1.5rem 4rem;
}
.hero__media{position:absolute;inset:0;z-index:1}
.hero__media img,.hero__media picture{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  animation:heroZoom 18s ease-out forwards;
}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero__overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,var(--overlay-start) 0%,var(--overlay-end) 100%);
  opacity:.72;
}
.hero__content{position:relative;z-index:3;max-width:1100px;width:100%}
.hero__eyebrow{
  font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;
  opacity:.9;margin-bottom:2rem;font-weight:500;
}


/* ============================================================
   SLIDER — full-bleed YouTube videos
   ============================================================ */
.slider-section{
  background:var(--bg-dark);
  padding:0;
}
.slider{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:90vh;
  overflow:hidden;
  background:#000;
}
.slider__track{position:relative;width:100%;height:100%}
.slider__slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .8s ease,visibility .8s ease;
}
.slider__slide.is-active{opacity:1;visibility:visible;z-index:2}
.slider__slide.is-playing{z-index:3}

.slider__media{position:relative;width:100%;height:100%}
.slider__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 8s ease-out;
}
.slider__slide.is-active .slider__media img{transform:scale(1.05)}

.slider__media iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;z-index:4;
}

/* Gradient overlay over the cover image (not over the playing iframe) */
.slider__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,65,92,.2) 0%,rgba(28,17,10,.85) 100%);
  pointer-events:none;
}
.slider__slide.is-playing .slider__media::after{display:none}

.slider__play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:88px;height:88px;
  z-index:5;
  transition:transform .3s ease,filter .3s ease;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.4));
}
.slider__play:hover{transform:translate(-50%,-50%) scale(1.1)}
.slider__play svg{width:100%;height:100%}
.slider__slide.is-playing .slider__play{display:none}

.slider__caption{
  position:absolute;left:0;right:0;bottom:0;
  z-index:5;
  padding:3rem clamp(1.5rem,5vw,5rem) clamp(2.5rem,6vw,5rem);
  color:var(--white);
  max-width:900px;
  pointer-events:none;
}
.slider__slide.is-playing .slider__caption{opacity:0;transition:opacity .4s}
.slider__tag{
  display:inline-block;
  font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;
  background:var(--accent-1);
  padding:.5rem 1rem;
  margin-bottom:1.25rem;
  font-weight:500;
}
.slider__caption h2{
  font-family:var(--ff-display);
  font-size:clamp(1.5rem,3.5vw,3rem);
  color:var(--white);
  margin-bottom:.75rem;
  font-weight:700;
}
.slider__caption p{
  font-family:var(--ff-editorial);font-style:italic;
  font-size:clamp(.95rem,1.3vw,1.15rem);
  opacity:.9;
}

/* Slider navigation */
.slider__nav{
  position:absolute;top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:56px;height:56px;
  display:grid;place-items:center;
  background:rgba(8,65,92,.5);
  backdrop-filter:blur(10px);
  border-radius:50%;
  transition:background .3s ease,transform .3s ease;
}
.slider__nav:hover{background:var(--accent-1);transform:translateY(-50%) scale(1.08)}
.slider__nav svg{width:24px;height:24px}
.slider__nav--prev{left:2rem}
.slider__nav--next{right:2rem}

.slider__bullets{
  position:absolute;bottom:2rem;left:50%;
  transform:translateX(-50%);z-index:10;
  display:flex;gap:.6rem;
}
.slider__bullets button{
  width:36px;height:4px;
  background:rgba(255,255,255,.4);
  border-radius:2px;
  transition:background .3s ease,width .3s ease;
}
.slider__bullets button.is-active{background:var(--accent-2);width:56px}

.slider__autoplay{
  position:absolute;top:2rem;right:2rem;z-index:10;
  width:42px;height:42px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.4);
  border-radius:50%;
  backdrop-filter:blur(10px);
  transition:background .3s ease;
}
.slider__autoplay:hover{background:rgba(20,112,175,.7)}
.slider__autoplay svg{width:14px;height:14px}
.slider__autoplay[data-state="playing"] .icon-play{display:none}
.slider__autoplay[data-state="paused"] .icon-pause{display:none}

/* ============================================================
   PRESS — "As seen in" marquee
   ============================================================ */
.press{
  background:var(--white);
  padding:4rem 0 3rem;
  border-bottom:1px solid var(--border);
}
.press__kicker{
  text-align:center;
  font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--text-light);
  margin-bottom:2.5rem;
}
.press__marquee{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.press__track{
  display:flex;align-items:center;gap:2.5rem;
  width:max-content;
  animation:pressScroll 40s linear infinite;
}
.press__logo{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(1.4rem,2.5vw,2rem);
  color:var(--heading);
  white-space:nowrap;
  font-style:italic;
  opacity:.7;
  transition:opacity .3s,color .3s;
}
.press__logo:hover{opacity:1;color:var(--accent-1)}
.press__sep{color:var(--accent-2);font-size:1.5rem;font-weight:300}
@keyframes pressScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.press__award{
  text-align:center;
  margin-top:2.5rem;
  font-family:var(--ff-editorial);
  font-size:1.05rem;
  color:var(--text);
}
.press__award strong{color:var(--accent-1)}

/* ============================================================
   SECTION HEADER (shared)
   ============================================================ */
.section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 4rem;
  position:relative;
}
.section-head--light .section-kicker,
.section-head--light .section-title,
.section-head--light .section-lede{color:var(--white)}
.section-head--light .section-kicker{color:var(--accent-2)}
.section-kicker{
  font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--accent-1);
  font-weight:500;
  margin-bottom:1rem;
}
.section-title{
  font-family:var(--ff-display);
  font-size:clamp(2rem,4.5vw,3.5rem);
  font-weight:900;
  line-height:1.1;
  margin-bottom:1.25rem;
  color:var(--heading);
}
.section-lede{
  font-family:var(--ff-editorial);font-style:italic;
  font-size:1.1rem;line-height:1.7;
  color:var(--text);
  max-width:620px;margin:0 auto;
}
.section-link{
  display:inline-block;
  margin-top:1.5rem;
  font-weight:500;font-size:.95rem;
  color:var(--accent-1);
  border-bottom:2px solid var(--accent-2);
  padding-bottom:.25rem;
  transition:color .3s,border-color .3s;
}
.section-link:hover{color:var(--accent-2);border-color:var(--accent-1)}

/* ============================================================
   PROGRAMMES — three magazine cards
   ============================================================ */
.programmes{padding:7rem 0;background:var(--bg)}
.programmes__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.programme-card{
  background:var(--white);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .5s ease,box-shadow .5s ease;
  opacity:0;transform:translateY(40px);
}
.programme-card.is-visible{opacity:1;transform:translateY(0)}
.programme-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.programme-card__media{
  aspect-ratio:4/3;overflow:hidden;background:var(--heading);
}
.programme-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.programme-card:hover .programme-card__media img{transform:scale(1.08)}
.programme-card__body{padding:2.5rem 2rem;position:relative}
.programme-card__num{
  position:absolute;top:1rem;right:2rem;
  font-family:var(--ff-display);
  font-size:3rem;font-weight:700;
  color:var(--accent-2);
  opacity:.4;line-height:1;
}
.programme-card__body h3{
  font-family:var(--ff-display);
  font-size:1.6rem;font-weight:900;
  margin-bottom:1rem;color:var(--heading);
  transition:color .3s;
}
.programme-card:hover h3{color:var(--accent-1)}
.programme-card__body p{
  margin-bottom:1.5rem;
  color:var(--text);
  line-height:1.7;
}
.programme-card__more{
  font-weight:500;font-size:.9rem;
  color:var(--accent-1);
  letter-spacing:.05em;
  border-bottom:1px solid var(--accent-2);
  padding-bottom:.2rem;
  transition:color .3s,border-color .3s;
}
.programme-card:hover .programme-card__more{color:var(--accent-2);border-color:var(--accent-1)}

/* ============================================================
   PRAISE — quotes with rectangular screenshots
   ============================================================ */
.praise{padding:7rem 0;background:var(--white)}
.praise__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
}
.praise-card{
  grid-column:span 2;
  background:var(--bg);
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(40px);
  transition:transform .8s ease,opacity .8s ease,box-shadow .4s ease;
  border-left:4px solid var(--accent-1);
}
.praise-card.is-visible{opacity:1;transform:translateY(0)}
.praise-card:hover{box-shadow:var(--shadow-md)}
.praise-card--featured{grid-column:span 4;flex-direction:row}
.praise-card__media{
  background:#f0f0f0;
  overflow:hidden;
  position:relative;
}
.praise-card:not(.praise-card--featured) .praise-card__media{
  aspect-ratio:16/10;
}
.praise-card--featured .praise-card__media{
  flex:0 0 55%;min-height:340px;
}
.praise-card__media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .8s ease;
}
.praise-card:hover .praise-card__media img{transform:scale(1.04)}
.praise-card figcaption{padding:2rem;display:flex;flex-direction:column;justify-content:center;flex:1}
.praise-card blockquote{
  margin-bottom:1.5rem;
  position:relative;
  padding-left:1.5rem;
}
.praise-card blockquote::before{
  content:"\201C";
  position:absolute;left:-.4rem;top:-1.5rem;
  font-family:var(--ff-display);
  font-size:5rem;line-height:1;
  color:var(--accent-2);
  opacity:.5;
}
.praise-card blockquote p{
  font-family:var(--ff-editorial);font-style:italic;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--heading);
}
.praise-card--featured blockquote p{font-size:1.35rem;line-height:1.5}
.praise-card cite{font-style:normal;display:block}
.praise-card cite strong{
  display:block;
  font-family:var(--ff-sans);font-weight:700;
  color:var(--heading);font-size:1rem;
  margin-bottom:.25rem;
}
.praise-card cite span{
  font-size:.85rem;
  color:var(--text-light);
  letter-spacing:.02em;
}
.praise__note{
  text-align:center;
  margin-top:3rem;
  font-size:.8rem;
  font-style:italic;
  color:var(--text-light);
}

/* ============================================================
   ON SCREEN — documentaries about Bilan
   ============================================================ */
.onscreen{
  padding:7rem 0;
  background:linear-gradient(135deg,var(--overlay-start) 0%,var(--overlay-end) 100%);
  color:var(--white);
}
.onscreen__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.onscreen-card{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s ease,background .4s ease,border-color .4s ease;
  opacity:0;transform:translateY(40px);
}
.onscreen-card.is-visible{opacity:1;transform:translateY(0)}
.onscreen-card:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--accent-2);
  transform:translateY(-6px);
}
.onscreen-card__media{
  position:relative;aspect-ratio:16/9;
  background:var(--heading);
  overflow:hidden;
}
.onscreen-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease,filter .6s ease;
}
.onscreen-card:hover .onscreen-card__media img{transform:scale(1.06);filter:brightness(.7)}
.onscreen-card__play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:54px;height:54px;
  display:grid;place-items:center;
  background:rgba(20,112,175,.9);
  color:var(--white);
  border-radius:50%;
  font-size:1.2rem;
  opacity:0;transition:opacity .4s ease;
}
.onscreen-card:hover .onscreen-card__play{opacity:1}
.onscreen-card__media--award,
.onscreen-card__media--press{
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-1-dark));
}
.onscreen-card__trophy{font-size:4rem;filter:drop-shadow(0 4px 20px rgba(255,215,0,.4))}
.onscreen-card__pubname{
  font-family:var(--ff-display);font-style:italic;font-weight:700;
  font-size:2rem;color:var(--white);
}
.onscreen-card__body{padding:1.75rem;flex:1;display:flex;flex-direction:column;gap:.75rem}
.onscreen-card__source{
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--accent-2);font-weight:500;
}
.onscreen-card__body h3{
  font-family:var(--ff-display);
  font-size:1.1rem;font-weight:700;
  color:var(--white);
  line-height:1.35;
}

/* ============================================================
   LATEST NEWS — 1 featured + 3 secondary
   ============================================================ */
.latest{padding:7rem 0;background:var(--bg)}
.latest .section-head{display:flex;flex-direction:column;align-items:center}
.latest__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:2rem;
}
.latest-card{
  background:var(--white);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .4s ease,box-shadow .4s ease;
  opacity:0;transform:translateY(40px);
}
.latest-card.is-visible{opacity:1;transform:translateY(0)}
.latest-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.latest-card__link{display:flex;flex-direction:column;height:100%}
.latest-card__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;background:var(--heading);
}
.latest-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.latest-card:hover .latest-card__media img{transform:scale(1.06)}
.latest-card__cat{
  position:absolute;top:1rem;left:1rem;
  background:var(--white);
  color:var(--accent-1);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;
  padding:.45rem .8rem;
}
.latest-card__body{padding:2rem;flex:1;display:flex;flex-direction:column;gap:1rem}
.latest-card__body h3{
  font-family:var(--ff-display);
  font-size:1.3rem;font-weight:700;line-height:1.3;
  color:var(--heading);
  transition:color .3s;
}
.latest-card:hover h3{color:var(--accent-1)}
.latest-card__body p{font-size:.95rem;color:var(--text);line-height:1.6}
.latest-card__meta{
  margin-top:auto;
  display:flex;gap:.5rem;align-items:center;
  font-size:.82rem;color:var(--text-light);
}

/* Featured card */
.latest-card--featured{
  grid-row:span 3;
}
.latest-card--featured .latest-card__media{aspect-ratio:4/3}
.latest-card--featured .latest-card__body h3{font-size:1.8rem;line-height:1.25}
.latest-card--featured .latest-card__body{padding:2.5rem}
.latest-card:not(.latest-card--featured) .latest-card__link{flex-direction:row}
.latest-card:not(.latest-card--featured) .latest-card__media{
  flex:0 0 40%;aspect-ratio:auto;
}
.latest-card:not(.latest-card--featured) .latest-card__body{padding:1.5rem}
.latest-card:not(.latest-card--featured) .latest-card__body h3{font-size:1.05rem}
.latest-card:not(.latest-card--featured) .latest-card__body p{display:none}

/* ============================================================
   PRE-FOOTER MARQUEE BORDERS
   ============================================================ */
.pre-footer{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  padding:1.5rem 0;
}
.pre-footer__band{overflow:hidden;width:100%;padding:.5rem 0}
.pre-footer__track{
  display:flex;
  width:max-content;
  align-items:center;
  will-change:transform;
}
.pre-footer__track img{
  height:auto;max-height:80px;width:auto;
  flex:0 0 auto;
  display:block;
}
.pre-footer__band--ltr .pre-footer__track{animation:bandLTR 50s linear infinite}
.pre-footer__band--rtl .pre-footer__track{animation:bandRTL 70s linear infinite}
@keyframes bandLTR{from{transform:translateX(-33.333%)}to{transform:translateX(0)}}
@keyframes bandRTL{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--footer-bg);
  color:#dbdbdb;
  padding:5rem 0 2rem;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.2fr;
  gap:4rem;
  margin-bottom:3rem;
}
.site-footer__brand img{
  height:60px;width:auto;
  margin-bottom:1.5rem;
  filter:brightness(0) invert(1);opacity:.9;
}
.site-footer__brand p{
  opacity:.7;
  font-family:var(--ff-editorial);font-style:italic;
  font-size:.95rem;line-height:1.6;
  max-width:340px;
}
.site-footer h4{
  font-family:var(--ff-display);
  font-size:1.1rem;font-weight:700;
  color:var(--white);
  margin-bottom:1.5rem;
}
.site-footer__nav ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.site-footer__nav a{
  font-size:.9rem;opacity:.75;
  transition:opacity .3s,color .3s,transform .3s;
  display:inline-block;
}
.site-footer__nav a:hover{opacity:1;color:var(--accent-2);transform:translateX(4px)}
.site-footer__contact p{font-size:.9rem;opacity:.75;margin-bottom:.5rem}
.site-footer__contact a:hover{color:var(--accent-2)}
.site-footer__socials{display:flex;gap:.75rem;margin-top:1.5rem}
.site-footer__socials a{
  width:42px;height:42px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border-radius:50%;
  transition:background .3s,transform .3s,color .3s;
  color:var(--white);
}
.site-footer__socials a:hover{
  background:var(--accent-1);
  transform:translateY(-3px);
}
.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:2rem;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.82rem;opacity:.6;
  flex-wrap:wrap;gap:1rem;
}
.site-footer__bottom strong{color:var(--accent-2);font-weight:500}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top{
  position:fixed;
  bottom:2rem;right:2rem;
  width:48px;height:48px;
  background:var(--accent-1);color:var(--white);
  border-radius:50%;
  display:grid;place-items:center;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;
  transform:translateY(20px);
  transition:opacity .3s,visibility .3s,transform .3s,background .3s;
  z-index:50;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--accent-2);transform:translateY(-4px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .praise-card{grid-column:span 2}
  .praise-card--featured{flex-direction:column}
  .praise-card--featured .praise-card__media{flex:0 0 auto;width:100%;min-height:0;aspect-ratio:16/9}
  .onscreen__grid{grid-template-columns:repeat(2,1fr)}
  .latest__grid{grid-template-columns:1fr}
  .latest-card--featured{grid-row:auto}
  .latest-card:not(.latest-card--featured) .latest-card__link{flex-direction:column}
  .latest-card:not(.latest-card--featured) .latest-card__media{flex:0 0 auto;aspect-ratio:16/10}
  .latest-card:not(.latest-card--featured) .latest-card__body p{display:block}
}
@media(max-width:900px){
  .programmes__grid{grid-template-columns:1fr;gap:1.5rem}
  .praise__grid{grid-template-columns:1fr}
  .praise-card,.praise-card--featured{grid-column:auto}
  .site-footer__grid{grid-template-columns:1fr;gap:3rem;text-align:center}
  .site-footer__brand p{max-width:none;margin:0 auto}
  .site-footer__socials{justify-content:center}
  .slider__nav--prev{left:1rem}
  .slider__nav--next{right:1rem}
}
@media(max-width:768px){
  .site-header__burger{display:flex}
  .site-nav{
    position:fixed;inset:var(--header-h) 0 0;
    background:var(--overlay-start);
    transform:translateX(100%);
    transition:transform .4s ease;
    padding:3rem 2rem;
    overflow-y:auto;
  }
  .site-nav.is-open{transform:translateX(0)}
  .site-nav ul{flex-direction:column;gap:1.5rem}
  .site-nav a{font-size:1.3rem;color:var(--white)!important;font-family:var(--ff-display);font-weight:700}
  .hero{min-height:90vh;padding:calc(var(--header-h) + 1rem) 1rem 3rem}
  .animated-title{font-size:clamp(2.5rem,14vw,5rem)}
  .slider{aspect-ratio:9/16;max-height:none;min-height:560px}
  .slider__caption{padding:2rem 1.5rem;max-width:none}
  .slider__caption h2{font-size:1.5rem}
  .slider__nav{width:44px;height:44px}
  .slider__play{width:72px;height:72px}
  .slider__autoplay,.slider__bullets{display:none}
  .onscreen__grid{grid-template-columns:1fr}
  .programmes,.praise,.onscreen,.latest{padding:5rem 0}
  .site-footer__bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .hero__cta{flex-direction:column;width:100%}
  .hero__cta .btn{width:100%;justify-content:center}
  .latest-card--featured .latest-card__body h3{font-size:1.4rem}
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .press__track,.pre-footer__track{animation:none!important}
  .hero__media img{animation:none!important;transform:none!important}
}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:9999;background:var(--white);padding:.5rem 1rem}


/* ============================================================
   STEP 1.7 — Header & footer logos + refined menu typo
   (animation Bravada déplacée en STEP 1.9)
   ============================================================ */

:root{
  --header-h: 110px;
  /* Palette Bravada (utilisée par STEP 1.9) */
  --grey:    #808080;
  --blue:    #1470af;
  --un-blue: #5B92E5;
  --dark-text:  #162521;
  --muted-text: #707070;
  --bg-color:   #ffffff;
}

/* -------- HEADER : sticky, fixed, big logo, refined menu -------- */
.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  transform: none !important;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 12px rgba(8,65,92,.08);
  border-bottom: 1px solid rgba(20,112,175,.08);
}
.site-header.is-hidden{ transform: none !important; }

/* BIG header logo */
.site-header__logo img{
  height: 88px;
  width: auto;
  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,.18))
    drop-shadow(0 0 16px rgba(20,112,175,.22));
  transition: height .3s ease;
}
@media (max-width: 768px){
  .site-header__logo img{ height: 64px; }
  :root{ --header-h: 88px; }
}

/* Menu : Playfair Display, plus grand, plus élégant */
.site-nav ul{ gap: 2.4rem; }
.site-nav a{
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--heading) !important;
  text-transform: none;
  padding: .5rem 0;
}
.site-nav a::after{
  background: var(--blue);
  height: 2px;
  bottom: -.1rem;
}
.site-nav a:hover,
.site-nav a.is-current{
  color: var(--blue) !important;
}
.site-header__burger span{ background: var(--heading) !important; }

/* -------- FOOTER : logo plus grand et bien visible -------- */
.site-footer__brand img{
  height: 120px;
  width: auto;
  margin-bottom: 1.5rem;
  filter:
    drop-shadow(0 2px 12px rgba(0,0,0,.40))
    drop-shadow(0 0 22px rgba(91,146,229,.45));
  opacity: 1;
}
@media (max-width: 768px){
  .site-footer__brand img{ height: 90px; }
}

/* ============================================================
   VARIABLES BRAVADA — réutilisées par STEP 10, STEP 12, STEP 13
   et par le fix inline de contact.html
   ============================================================ */
:root{
  --grey:       #808080;
  --blue:       #1470af;
  --un-blue:    #5B92E5;
  --dark-text:  #162521;
  --muted-text: #707070;
  --bg-color:   #ffffff;
}

/* ============================================================
   STEP 1.9 — Bravada option A (animation officielle en loop)
   Moteur générique .animated-title, utilisé sur toutes les pages
   ============================================================ */

/* ---------- TITRE GÉNÉRAL (structure Bravada) ---------- */
.animated-title{
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--dark-text);
}

.animated-title .caption-title-word{
  display: inline-block;
  font-style: normal;
  white-space: nowrap;
}

/* Apparition initiale des lettres (showwords) */
.animated-title .caption-title-word > span{
  position: relative;
  display: inline-block;
  line-height: 1.2;
  opacity: 0;
  animation: showwords 2.5s ease forwards;
}
.animated-title .caption-title-word > span:nth-child(n)  { animation-duration: 1.2s; }
.animated-title .caption-title-word > span:nth-child(2n) { animation-duration: 0.4s; }
.animated-title .caption-title-word > span:nth-child(3n) { animation-duration: 2.8s; }
.animated-title .caption-title-word > span:nth-child(4n) { animation-duration: 0.8s; }
.animated-title .caption-title-word > span:nth-child(5n) { animation-duration: 3.6s; }
.animated-title .caption-title-word > span:nth-child(6n) { animation-duration: 1.6s; }
.animated-title .caption-title-word > span:nth-child(7n) { animation-duration: 3.2s; }
.animated-title .caption-title-word > span:nth-child(8n) { animation-duration: 2s;   }
.animated-title .caption-title-word > span:nth-child(9n) { animation-duration: 2.8s; }

@keyframes showwords { to { opacity: 1; } }

/* Lettres simples (visibles) et doubles (cachées, prêtes à entrer) */
.animated-title .caption-title-word span.cry-single{
  position: relative;
  display: inline-block;
  color: var(--dark-text);
}
.animated-title .caption-title-word span.cry-double{
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  display: inline-block;
}
.animated-title span.cry-single,
.animated-title span.cry-double{
  transition: color .5s ease-out;
  will-change: transform, opacity, color;
}

/* Animation aléatoire déclenchée par la classe .animated-letter (JS) */
.animated-title .caption-title-word > span:nth-child(n)  span.cry-single.animated-letter{
  animation: 1.5s 0.25s animation-slideLeftHide ease-in-out forwards;
}
.animated-title .caption-title-word > span:nth-child(2n) span.cry-single.animated-letter{
  animation: 1.5s 0.25s animation-slideRightHide ease-in-out forwards;
}
.animated-title .caption-title-word > span:nth-child(n)  span.cry-double.animated-letter{
  animation: 1s animation-slideRightShow ease-in-out forwards;
}
.animated-title .caption-title-word > span:nth-child(2n) span.cry-double.animated-letter{
  animation: 1s animation-slideLeftShow ease-in-out forwards;
}

/* Cycle des 3 couleurs sur les doubles : gris · bleu · bleu UN */
.animated-title .caption-title-word > span:nth-child(3n + 1) span.cry-double.animated-letter{ color: var(--grey); }
.animated-title .caption-title-word > span:nth-child(3n + 2) span.cry-double.animated-letter{ color: var(--blue); }
.animated-title .caption-title-word > span:nth-child(3n)     span.cry-double.animated-letter{ color: var(--un-blue); }


@keyframes animation-slideRightShow{
  from { opacity: 0; transform: translateX(150%); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes animation-slideRightHide{
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(150%); }
}
@keyframes animation-slideLeftHide{
  from { opacity: 1; transform: translateX(0);     }
  to   { opacity: 0; transform: translateX(-150%); }
}
@keyframes animation-slideLeftShow{
  from { opacity: 0; transform: translateX(-150%); }
  to   { opacity: 1; transform: translateX(0);     }
}


/* ---------- MOBILE ---------- */
@media (max-width: 720px){
  /* Désactiver les superpositions pour la lisibilité mobile */
  .animated-title .caption-title-word span.cry-single{
    color: var(--dark-text) !important;
    opacity: 1 !important;
  }
  .animated-title .caption-title-word span.cry-double{
    display: none;
  }
}


/* ---------- ACCESSIBILITÉ ---------- */
@media (prefers-reduced-motion: reduce){
  .animated-title .caption-title-word > span,
  .animated-title .caption-title-word span.cry-single,
  .animated-title .caption-title-word span.cry-double{
    animation: none !important;
    opacity: 1 !important;
  }
  .animated-title .caption-title-word span.cry-double{ display: none; }
}
/* ============================================================
   STEP 2 — HLS video slide (première slide du slider)
   ============================================================ */
.slider__slide--video .slider__media{
  position: relative;
  background: #0a1426;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.slider__slide--video .slider__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* On masque le bouton play YouTube sur cette slide vidéo */
.slider__slide--video .slider__play{ display: none; }

/* ============================================================
   STEP 3 — Pre-footer marquee bands (continu, plus rapide)
   Deux bandes scrolling en sens inverse, sans pause, vitesse soutenue
   ============================================================ */

.pre-footer{
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.pre-footer__band{
  width: 100%;
  overflow: hidden;
  position: relative;
}

.pre-footer__track{
  display: flex;
  flex-wrap: nowrap;
  width: max-content;          /* la piste prend la largeur réelle des images */
  will-change: transform;
}

.pre-footer__track img{
  display: block;
  height: 72px;                 /* taille des bandes — ajuste si besoin */
  width: auto;
  flex-shrink: 0;
}

/* Sens 1 — gauche → droite */
.pre-footer__band--ltr .pre-footer__track{
  animation: marqueeLTR 18s linear infinite;
}

/* Sens 2 — droite → gauche (inversé) */
.pre-footer__band--rtl .pre-footer__track{
  animation: marqueeRTL 18s linear infinite;
}

@keyframes marqueeLTR{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0);    }
}
@keyframes marqueeRTL{
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

/* Mobile : un peu plus rapide pour compenser la largeur réduite */
@media (max-width: 720px){
  .pre-footer__track img{ height: 56px; }
  .pre-footer__band--ltr .pre-footer__track,
  .pre-footer__band--rtl .pre-footer__track{
    animation-duration: 14s;
  }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .pre-footer__band--ltr .pre-footer__track,
  .pre-footer__band--rtl .pre-footer__track{
    animation: none;
  }
}

/* ============================================================
   STEP 3.2 — Header non-sticky (reste en haut, scrolle avec la page)
   ============================================================ */
.site-header{
  position: absolute !important;   /* au lieu de fixed */
  top: 0 !important;
}
/* ============================================================
   STEP 3.3 — Bouton son sur la slide vidéo HLS
   ============================================================ */
.slider__sound{
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 112, 175, .85);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: background .25s ease, transform .25s ease;
}
.slider__sound:hover{
  background: rgba(20, 112, 175, 1);
  transform: scale(1.08);
}
.slider__sound .icon-sound{ display: none; }
.slider__sound .icon-muted{ display: block; }
.slider__sound[data-muted="false"] .icon-sound{ display: block; }
.slider__sound[data-muted="false"] .icon-muted{ display: none; }

@media (max-width: 720px){
  .slider__sound{ width: 42px; height: 42px; right: .8rem; bottom: .8rem; }
}

/* ============================================================
   BILAN IN THE NEWS — 3D coverflow carousel
   ============================================================ */
.bilan-news{
  background:#fff;
  padding:6rem 1.5rem 6.5rem;
  position:relative;
  overflow:hidden;
}
.bilan-news__inner{max-width:1400px;margin:0 auto;text-align:center;}

.news3d{position:relative;perspective:1800px;perspective-origin:50% 50%;}
.news3d__stage{
  position:relative;
  height:clamp(360px,46vw,520px);
  margin:0 auto;
  transform-style:preserve-3d;
}
.news3d__track{
  list-style:none;margin:0;padding:0;
  position:absolute;inset:0;
  transform-style:preserve-3d;
}

.news3d__card{
  position:absolute;top:50%;left:50%;
  width:clamp(260px,28vw,360px);
  height:clamp(340px,40vw,460px);
  margin:0;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.22,.61,.36,1),
             opacity .7s ease,
             filter .7s ease;
  border-radius:14px;
  overflow:hidden;
  background:#0e1a23;
  box-shadow:0 20px 40px -20px rgba(8,65,92,.35),
             0 8px 16px rgba(0,0,0,.18);
  will-change:transform,opacity,filter;
  cursor:pointer;
}
.news3d__card a{display:block;width:100%;height:100%;color:#fff;text-decoration:none;position:relative;}
.news3d__card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s ease;
}
.news3d__card:hover img{transform:scale(1.06);}
.news3d__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.2rem 1.1rem 1.1rem;
  background:linear-gradient(to top,rgba(8,16,24,.92) 0%,rgba(8,16,24,.55) 60%,rgba(8,16,24,0) 100%);
  text-align:left;
}
.news3d__source{
  display:none !important;
}
.news3d__caption::before{
  content:"\201D";
  display:block;
  font-family:'Playfair Display', serif;
  font-weight:900;
  font-style:normal;
  font-size:8.8rem;
  line-height:.42;
  margin:0 0 -.55rem;
  color:#1470af;
  -webkit-text-stroke:1.4px #0a1720;
  text-stroke:1.4px #0a1720;
  text-shadow:
    -6px 6.5px 0 #ffffff,
    -6.6px 7.1px 0 #0a1720,
    -7.1px 7.6px 0 #1470af,
    0 10px 22px rgba(0,0,0,.35);
}

.news3d__headline{
  display:block;
  font-family:'Playfair Display',serif;
  font-style:normal;
  font-weight:800;
  font-size:1.28rem;
  line-height:1.34;
  letter-spacing:.006em;
  background:linear-gradient(100deg,
    #ffffff 0%, #ffffff 40%, #dceaf7 50%, #ffffff 60%, #ffffff 100%);
  background-size:260% 100%;
  background-position:130% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  animation:headlineSheen 8s ease-in-out infinite;
}
@keyframes headlineSheen{
  0%, 22%{ background-position:130% 0; }
  55%{ background-position:-30% 0; }
  85%, 100%{ background-position:130% 0; }
}
@media (prefers-reduced-motion: reduce){
  .news3d__headline{ animation:none !important; }
}


/* States — positions are set in JS via CSS variables */
.news3d__card{
  transform:
    translate(-50%,-50%)
    translateX(var(--x,0px))
    translateZ(var(--z,-400px))
    rotateY(var(--ry,0deg));
  opacity:var(--op,0);
  filter:brightness(var(--br,.5)) saturate(var(--sat,.8));
  z-index:var(--zi,0);
  pointer-events:var(--pe,none);
}
.news3d__card.is-center{
  --x:0px;--z:0px;--ry:0deg;--op:1;--br:1;--sat:1;--zi:50;--pe:auto;
}
.news3d__card.is-side-1{--op:1;--br:.78;--sat:.95;--pe:auto;}
.news3d__card.is-side-2{--op:.7;--br:.55;--sat:.85;--pe:none;}

/* Nav */
.news3d__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(20,112,175,.18);
  color:var(--blue,#1470af);
  font-size:2rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(8,65,92,.18);
  z-index:100;transition:transform .25s ease,background .25s ease;
}
.news3d__nav:hover{transform:translateY(-50%) scale(1.08);background:#fff;}
.news3d__nav--prev{left:1rem;}
.news3d__nav--next{right:1rem;}

/* Dots */
.news3d__dots{
  display:flex;justify-content:center;gap:.5rem;
  margin-top:2rem;flex-wrap:wrap;
}
.news3d__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(20,112,175,.25);border:0;cursor:pointer;padding:0;
  transition:background .25s ease,transform .25s ease;
}
.news3d__dot.is-active{background:var(--blue,#1470af);transform:scale(1.4);}

@media (max-width:720px){
  .bilan-news{padding:4rem 1rem 4.5rem;}
  .news3d__card{width:75vw;height:60vw;min-height:280px;}
  .news3d__nav{width:42px;height:42px;font-size:1.5rem;}
  .news3d__nav--prev{left:.25rem;}
  .news3d__nav--next{right:.25rem;}
}

@media (prefers-reduced-motion:reduce){
  .news3d__card,.news3d__card img{transition:none !important;}
}
/* ============================================================
   STEP 7 — Marquee bands "inline" (hors pré-footer)
   Variante visuelle des bandes du pré-footer, intégrées
   sous le hero et sous le carrousel des news.
   ============================================================ */
.pre-footer--inline{
  padding: .8rem 0;
  background: #fff;
  border-top: 1px solid rgba(20,112,175,.08);
  border-bottom: 1px solid rgba(20,112,175,.08);
}
.pre-footer--inline .pre-footer__track img{
  height: 56px;
}
@media (max-width: 720px){
  .pre-footer--inline .pre-footer__track img{ height: 42px; }
}

/* ============================================================
   STEP 9 — PREMIUM animated icons for programme cards
   ============================================================ */
.programme-card__icon{
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(20,112,175,.18));
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.programme-card:hover .programme-card__icon{
  transform: translateY(-3px) rotate(-3deg);
  filter: drop-shadow(0 14px 28px rgba(20,112,175,.32));
}
.pc-icon{
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Outer dashed ring rotation (all 3) */
.pc-ring-outer{
  transform-origin: 48px 48px;
  animation: pcRingSpin 22s linear infinite;
}
@keyframes pcRingSpin{ to { transform: rotate(360deg); } }

/* ============================================================
   ICON 1 — Women Make Change
   ============================================================ */
.pc-icon--women .pc-glow{
  transform-origin: 48px 48px;
  animation: pcGlowPulse 3.2s ease-in-out infinite;
}
@keyframes pcGlowPulse{
  0%, 100% { transform: scale(.85); opacity: .7; }
  50%      { transform: scale(1.1); opacity: 1; }
}

.pc-icon--women .pc-figure{
  transform-origin: 48px 58px;
  animation: pcFigureBreath 3.6s ease-in-out infinite;
}
@keyframes pcFigureBreath{
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.03); }
}

.pc-icon--women .pc-rays line{
  transform-origin: 48px 48px;
  animation: pcRayGrow 2.4s ease-in-out infinite;
}
.pc-icon--women .pc-rays line:nth-child(1){ animation-delay: 0s; }
.pc-icon--women .pc-rays line:nth-child(2){ animation-delay: .25s; }
.pc-icon--women .pc-rays line:nth-child(3){ animation-delay: .5s; }
.pc-icon--women .pc-rays line:nth-child(4){ animation-delay: .75s; }
.pc-icon--women .pc-rays line:nth-child(5){ animation-delay: 1s; }
@keyframes pcRayGrow{
  0%, 100% { opacity: .35; stroke-width: 1.8; }
  50%      { opacity: 1;   stroke-width: 2.6; }
}

.pc-icon--women .pc-orbit{
  transform-origin: 48px 48px;
  animation: pcOrbit 9s linear infinite;
}
.pc-icon--women .pc-orbit--reverse{
  animation: pcOrbitReverse 11s linear infinite;
}
@keyframes pcOrbit        { to { transform: rotate(360deg); } }
@keyframes pcOrbitReverse { to { transform: rotate(-360deg); } }

.pc-icon--women .pc-star-1{
  transform-origin: 48px 18px;
  animation: pcStarSpin 4s linear infinite;
}
@keyframes pcStarSpin{ to { transform: rotate(360deg); } }

.pc-icon--women .pc-sp{
  transform-origin: center;
  animation: pcSparkle 2.6s ease-in-out infinite;
}
.pc-icon--women .pc-sp-1{ animation-delay: 0s;   }
.pc-icon--women .pc-sp-2{ animation-delay: .6s;  }
.pc-icon--women .pc-sp-3{ animation-delay: 1.2s; }
.pc-icon--women .pc-sp-4{ animation-delay: 1.8s; }
@keyframes pcSparkle{
  0%, 100% { opacity: 0; transform: scale(.4); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* ============================================================
   ICON 2 — Breaking Taboos
   ============================================================ */
.pc-icon--break .pc-blast{
  transform-origin: 48px 48px;
  animation: pcBlast 4.2s ease-out infinite;
  opacity: 0;
}
@keyframes pcBlast{
  0%, 35%  { transform: scale(.2); opacity: 0; }
  45%      { transform: scale(.5); opacity: 1; }
  70%      { transform: scale(1.6); opacity: 0; }
  100%     { transform: scale(1.6); opacity: 0; }
}

.pc-icon--break .pc-link-left{
  transform-origin: 25px 48px;
  animation: pcLinkLeft 4.2s ease-in-out infinite;
}
.pc-icon--break .pc-link-right{
  transform-origin: 71px 48px;
  animation: pcLinkRight 4.2s ease-in-out infinite;
}
@keyframes pcLinkLeft{
  0%, 35%   { transform: translateX(0)   rotate(0); }
  50%, 65%  { transform: translateX(-5px) rotate(-12deg); }
  85%, 100% { transform: translateX(0)   rotate(0); }
}
@keyframes pcLinkRight{
  0%, 35%   { transform: translateX(0)   rotate(0); }
  50%, 65%  { transform: translateX(5px)  rotate(12deg); }
  85%, 100% { transform: translateX(0)   rotate(0); }
}

.pc-icon--break .pc-link-center-top,
.pc-icon--break .pc-link-center-bot{
  stroke-dasharray: 30;
  animation: pcLinkSnap 4.2s ease-in-out infinite;
}
.pc-icon--break .pc-link-center-top{ transform-origin: 48px 42px; }
.pc-icon--break .pc-link-center-bot{ transform-origin: 48px 54px; }
@keyframes pcLinkSnap{
  0%, 35%   { stroke-dashoffset: 0;  opacity: 1; transform: translateY(0); }
  50%, 70%  { stroke-dashoffset: 30; opacity: 0; transform: translateY(-3px); }
  85%, 100% { stroke-dashoffset: 0;  opacity: 1; transform: translateY(0); }
}

.pc-icon--break .pc-impact{
  transform-origin: 48px 48px;
  animation: pcImpact 4.2s ease-out infinite;
  opacity: 0;
}
@keyframes pcImpact{
  0%, 40%  { transform: scale(0) rotate(0); opacity: 0; }
  50%      { transform: scale(1.2) rotate(45deg); opacity: 1; }
  70%      { transform: scale(.8) rotate(90deg); opacity: .4; }
  100%     { transform: scale(0) rotate(120deg); opacity: 0; }
}

.pc-icon--break .pc-frag{
  transform-origin: 48px 48px;
  animation: pcFragFly 4.2s ease-out infinite;
  opacity: 0;
}
.pc-icon--break .pc-frag-1{ --fx: -22px; --fy: -18px; animation-delay: 0s; }
.pc-icon--break .pc-frag-2{ --fx:  22px; --fy: -20px; animation-delay: 0s; }
.pc-icon--break .pc-frag-3{ --fx: -26px; --fy:  16px; animation-delay: 0s; }
.pc-icon--break .pc-frag-4{ --fx:  24px; --fy:  18px; animation-delay: 0s; }
.pc-icon--break .pc-frag-5{ --fx: -14px; --fy: -26px; animation-delay: 0s; }
.pc-icon--break .pc-frag-6{ --fx:  16px; --fy:  26px; animation-delay: 0s; }
@keyframes pcFragFly{
  0%, 40%  { transform: translate(0,0); opacity: 0; }
  50%      { opacity: 1; }
  85%      { transform: translate(var(--fx), var(--fy)); opacity: 0; }
  100%     { transform: translate(var(--fx), var(--fy)); opacity: 0; }
}

/* ============================================================
   ICON 3 — Talk Show
   ============================================================ */
.pc-icon--talk .pc-glow-t{
  transform-origin: 48px 42px;
  animation: pcGlowPulse 3s ease-in-out infinite;
}

.pc-icon--talk .pc-mic{
  transform-origin: 48px 50px;
  animation: pcMicBob 3.2s ease-in-out infinite;
}
@keyframes pcMicBob{
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-2px) rotate(-2deg); }
}

.pc-icon--talk .pc-wave{
  animation: pcWaveOut 2.4s ease-out infinite;
}
.pc-icon--talk .pc-wave-1,  .pc-icon--talk .pc-wave-1b { animation-delay: 0s;   }
.pc-icon--talk .pc-wave-2,  .pc-icon--talk .pc-wave-2b { animation-delay: .35s; }
.pc-icon--talk .pc-wave-3,  .pc-icon--talk .pc-wave-3b { animation-delay: .7s;  }
@keyframes pcWaveOut{
  0%   { opacity: 0; stroke-width: 2.4; }
  35%  { opacity: 1; }
  100% { opacity: 0; stroke-width: 1; }
}

.pc-icon--talk .pc-bar{
  transform-origin: center bottom;
  animation: pcEqBounce 1.1s ease-in-out infinite;
}
.pc-icon--talk .pc-bar-1{ animation-delay: 0s;   animation-duration: .9s; }
.pc-icon--talk .pc-bar-2{ animation-delay: .12s; animation-duration: 1.2s; }
.pc-icon--talk .pc-bar-3{ animation-delay: .24s; animation-duration: .8s; }
.pc-icon--talk .pc-bar-4{ animation-delay: .18s; animation-duration: 1.1s; }
.pc-icon--talk .pc-bar-5{ animation-delay: .3s;  animation-duration: .9s; }
.pc-icon--talk .pc-bar-6{ animation-delay: .06s; animation-duration: 1.3s; }
@keyframes pcEqBounce{
  0%, 100% { transform: scaleY(.4); }
  50%      { transform: scaleY(1.4); }
}

/* ============================================================
   Responsive + reduced motion
   ============================================================ */
@media (max-width: 720px){
  .programme-card__icon{ width: 76px; height: 76px; top: 1rem; right: 1rem; }
}
.programme-card__body{ padding-right: 7rem; }
@media (max-width: 720px){ .programme-card__body{ padding-right: 5.5rem; } }

@media (prefers-reduced-motion: reduce){
  .programme-card__icon *,
  .programme-card__icon{
    animation: none !important;
    transition: none !important;
  }
}
/* ============================================================
   STEP 9.1 — Refined icons : Venus symbol + blooming flower
   ============================================================ */

/* ---- Carte 01 : Venus symbol breathing instead of figure ---- */
.pc-icon--women .pc-venus{
  transform-origin: 48px 56px;
  animation: pcVenusPulse 3.6s ease-in-out infinite;
}
@keyframes pcVenusPulse{
  0%, 100% { transform: scale(1)    rotate(0); }
  50%      { transform: scale(1.05) rotate(-2deg); }
}

/* ---- Carte 02 : flower bloom (replaces the star) ---- */
.pc-icon--break .pc-flower{
  transform-origin: 48px 48px;
  animation: pcFlowerBloom 4.2s ease-out infinite;
  opacity: 0;
}
@keyframes pcFlowerBloom{
  0%, 40%  { transform: scale(0) rotate(-40deg); opacity: 0; }
  50%      { transform: scale(.6) rotate(-10deg); opacity: .9; }
  60%      { transform: scale(1.15) rotate(5deg); opacity: 1; }
  70%      { transform: scale(1) rotate(15deg); opacity: 1; }
  85%      { transform: scale(1) rotate(25deg); opacity: .7; }
  100%     { transform: scale(.9) rotate(40deg); opacity: 0; }
}

/* Inner petals slightly delayed and rotating in opposite direction */
.pc-icon--break .pc-petals-outer{
  transform-origin: 48px 48px;
  animation: pcPetalsSpinOut 4.2s ease-out infinite;
}
.pc-icon--break .pc-petals-inner{
  transform-origin: 48px 48px;
  animation: pcPetalsSpinIn 4.2s ease-out infinite;
}
@keyframes pcPetalsSpinOut{
  0%, 45%  { transform: rotate(0); }
  100%     { transform: rotate(45deg); }
}
@keyframes pcPetalsSpinIn{
  0%, 45%  { transform: rotate(0); }
  100%     { transform: rotate(-60deg); }
}
/* ============================================================
   STEP 9.2 — Venus symbol : solid premium blue
   ============================================================ */
.pc-icon--women .pc-venus circle,
.pc-icon--women .pc-venus line{
  stroke: #1470af !important;
  stroke-width: 5.5 !important;
  fill: none !important;
  filter: drop-shadow(0 2px 6px rgba(20,112,175,.35));
}
.news3d__excerpt{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.45;
  color: #1a1a1a;
  margin: .35rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .005em;
}
@media (max-width: 720px){
  .news3d__excerpt{ font-size: .85rem; -webkit-line-clamp: 2; }
}

p#bravada-below.animated-title .caption-title-word--space{ font-size:.35em !important; letter-spacing:normal !important; }
/* ============================================================
   STEP 13 — "What they say about Bilan"
   Bravada title + 3D coverflow carousel for quotes
   ============================================================ */

/* Hide old kicker if it remained (defensive) */
.praise .section-kicker{ display: none; }

/* --- 3D coverflow carousel for quotes --- */
.praise3d{
  position: relative;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  margin-top: 1rem;
}
.praise3d__stage{
  position: relative;
  height: clamp(440px, 52vw, 600px);
  margin: 0 auto;
  transform-style: preserve-3d;
}
.praise3d__track{
  list-style: none; margin: 0; padding: 0;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}

.praise3d__card{
  position: absolute; top: 50%; left: 50%;
  width: clamp(300px, 32vw, 440px);
  height: clamp(420px, 50vw, 560px);
  margin: 0;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.22,.61,.36,1),
              opacity .7s ease,
              filter .7s ease;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 50px -20px rgba(8,65,92,.35),
              0 10px 20px rgba(0,0,0,.12);
  will-change: transform, opacity, filter;
  cursor: pointer;
  border-left: 4px solid var(--accent-1);
}
.praise3d__card figure{
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
}
.praise3d__media{
  flex: 0 0 65%;
  background: linear-gradient(135deg, #f5f8fb 0%, #e9eff5 100%);
  display: grid; place-items: center;
  padding: 1rem;
  overflow: hidden;
  min-height: 0;
}
.praise3d__media img{
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.praise3d__media img{
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.praise3d__card figcaption{
  flex: 1;
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex; flex-direction: column;
  justify-content: center;
  background: #fff;
}
.praise3d__card blockquote{
  margin: 0 0 1rem;
  position: relative;
  padding-left: 1.4rem;
}
.praise3d__card blockquote::before{
  content: "\201C";
  position: absolute; left: -.4rem; top: -1.6rem;
  font-family: 'Playfair Display', serif;
  font-size: 5rem; line-height: 1;
  font-weight: 900;
  color: var(--accent-1);
  opacity: .85;
  text-shadow: 0 2px 12px rgba(20,112,175,.25);
}
.praise3d__card blockquote p{
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--heading);
  margin: 0;
}
.praise3d__card cite{
  font-style: normal;
  display: block;
}
.praise3d__card cite strong{
  display: block;
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  color: var(--heading);
  font-size: .95rem;
  margin-bottom: .15rem;
}
.praise3d__card cite span{
  font-size: .78rem;
  color: var(--text-light);
  letter-spacing: .015em;
}

/* Positioning states (set via JS variables) */
.praise3d__card{
  transform:
    translate(-50%, -50%)
    translateX(var(--x, 0px))
    translateZ(var(--z, -400px))
    rotateY(var(--ry, 0deg));
  opacity: var(--op, 0);
  filter: brightness(var(--br, .5)) saturate(var(--sat, .85));
  z-index: var(--zi, 0);
  pointer-events: var(--pe, none);
}
.praise3d__card.is-center{
  --x: 0px; --z: 0px; --ry: 0deg; --op: 1; --br: 1; --sat: 1; --zi: 50; --pe: auto;
}
.praise3d__card.is-side-1{ --op: 1; --br: .78; --sat: .95; --pe: auto; }
.praise3d__card.is-side-2{ --op: .65; --br: .55; --sat: .85; --pe: none; }

/* Nav */
.praise3d__nav{
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(20,112,175,.18);
  color: var(--accent-1);
  font-size: 2rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(8,65,92,.18);
  z-index: 100;
  transition: transform .25s ease, background .25s ease;
}
.praise3d__nav:hover{ transform: translateY(-50%) scale(1.08); background: #fff; }
.praise3d__nav--prev{ left: 1rem; }
.praise3d__nav--next{ right: 1rem; }

/* Dots */
.praise3d__dots{
  display: flex; justify-content: center; gap: .5rem;
  margin-top: 2rem; flex-wrap: wrap;
}
.praise3d__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(20,112,175,.25);
  border: 0; cursor: pointer; padding: 0;
  transition: background .25s ease, transform .25s ease;
}
.praise3d__dot.is-active{
  background: var(--accent-1);
  transform: scale(1.4);
}

/* Mobile */
@media (max-width: 720px){
  .praise3d__stage{ height: clamp(440px, 110vw, 580px); }
  .praise3d__card{ width: 78vw; height: 95vw; min-height: 420px; }
  .praise3d__nav{ width: 42px; height: 42px; font-size: 1.5rem; }
  .praise3d__nav--prev{ left: .25rem; }
  .praise3d__nav--next{ right: .25rem; }
  .praise3d__card blockquote p{ font-size: .88rem; }
  h2#bravada-praise-title.section-title.animated-title{
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  }
  h2#bravada-praise-title .caption-title-word span.cry-double{ display: none; }
  h2#bravada-praise-title .caption-title-word span.cry-single{ opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce){
  .praise3d__card{ transition: none !important; }
}
/* Adjust width for the longer praise title */
p#bravada-news-title.animated-title{
  max-width: 32ch !important;
}
@media (max-width: 720px){
  p#bravada-news-title.animated-title{
    max-width: 22ch !important;
  }
}
/* Slow down the inline marquee under the hero */
.pre-footer--inline .pre-footer__band--ltr .pre-footer__track{
  animation-duration: 45s !important;
}
.pre-footer--inline .pre-footer__band--rtl .pre-footer__track{
  animation-duration: 45s !important;
}
@media (max-width: 720px){
  .pre-footer--inline .pre-footer__band--ltr .pre-footer__track,
  .pre-footer--inline .pre-footer__band--rtl .pre-footer__track{
    animation-duration: 35s !important;
  }
}
/* ============================================================
   FIX MOBILE DÉFINITIF — header, menu burger, titre Bravada
   (DOIT rester en toute fin de fichier)
   ============================================================ */
@media (max-width: 768px){

  /* --- MENU fermé : hors écran, fond opaque garanti --- */
  body nav#primary-nav.site-nav,
  body .site-nav{
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    background-color: #ffffff !important;     /* fond opaque garanti */
    background-image: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    z-index: 99999 !important;                /* au-dessus de TOUT, même le hero */
    overflow-y: auto !important;
    transition: transform .35s ease, visibility .35s ease !important;
    -webkit-overflow-scrolling: touch;
  }

  /* --- MENU ouvert --- */
  body nav#primary-nav.site-nav.is-open,
  body .site-nav.is-open{
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Liste : items empilés, alignés à gauche, séparés par des filets */
  .site-nav ul{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5.5rem 0 2rem !important;       /* espace en haut pour le X */
    list-style: none !important;
  }
  .site-nav li{
    border-bottom: 1px solid #ececec !important;
  }
  .site-nav a{
    display: block !important;
    color: #162521 !important;               /* texte foncé sur fond blanc */
    font-family: 'Playfair Display', serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 1.1rem 1.5rem !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  .site-nav a.is-current,
  .site-nav a:hover{
    color: var(--accent-1, #1470af) !important;
    background: #f5f8fb !important;
  }

  /* --- BURGER → devient le X en haut à droite --- */
  .site-header__burger{
    display: flex !important;
    position: relative !important;
    z-index: 1003 !important;
  }
  .site-header__burger[aria-expanded="true"]{
    position: fixed !important;
    top: 1.4rem !important;
    right: 1.4rem !important;
    z-index: 100001 !important;              /* au-dessus du menu (99999) */
    display: flex !important;
  }
  .site-header__burger[aria-expanded="true"] span{
    background: #162521 !important;          /* X foncé, visible sur fond blanc */
  }

  /* --- TITRE BRAVADA : on désactive le dédoublement, lettres simples lisibles --- */
  .animated-title .cry-double, .bravada-title .cry-double{
    display: none !important; opacity: 0 !important; animation: none !important;
  }
  .animated-title .cry-single, .bravada-title .cry-single{
    position: static !important; opacity: 1 !important;
  }
  .animated-title .caption-title-word > span{
    opacity: 1 !important; animation: none !important;
  }
  /* Mobile : cartes carrousel hors-champ totalement masquées (anti-débordement) */
  .news3d__card:not(.is-center):not(.is-side-1),
  .praise3d__card:not(.is-center):not(.is-side-1){
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

   /* --- ANIMATION MOBILE : révélation premium des lettres --- */
  .animated-title .cry-single,
  .bravada-title  .cry-single{
    animation: mobileReveal 1.2s ease-out both !important;
  }
  .animated-title .caption-title-word > span:nth-child(1)  .cry-single{ animation-delay: 0s   !important; }
  .animated-title .caption-title-word > span:nth-child(2)  .cry-single{ animation-delay: .1s  !important; }
  .animated-title .caption-title-word > span:nth-child(3)  .cry-single{ animation-delay: .2s  !important; }
  .animated-title .caption-title-word > span:nth-child(4)  .cry-single{ animation-delay: .3s  !important; }
  .animated-title .caption-title-word > span:nth-child(5)  .cry-single{ animation-delay: .4s  !important; }
  .animated-title .caption-title-word > span:nth-child(6)  .cry-single{ animation-delay: .5s  !important; }
  .animated-title .caption-title-word > span:nth-child(7)  .cry-single{ animation-delay: .6s  !important; }
  .animated-title .caption-title-word > span:nth-child(8)  .cry-single{ animation-delay: .7s  !important; }
  .animated-title .caption-title-word > span:nth-child(9)  .cry-single{ animation-delay: .8s  !important; }

  html, body{ overflow-x: hidden !important; }
}

/* --- Keyframe de l'animation mobile (HORS media query) --- */
@keyframes mobileReveal{
  0%   { opacity: 0; transform: translateY(14px); filter: blur(4px); letter-spacing: .08em; }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: normal; }
}


/* --- Anti-débordement horizontal — verrou global robuste --- */
html{
  overflow-x: hidden !important;
  max-width: 100%;
}
body{
  overflow-x: hidden !important;
  max-width: 100vw;
  position: relative;
}
.bilan-news, .praise, .slider-section, .pre-footer, .pre-footer--inline,
.title-band, .about-award, .programmes, main#main{
  overflow-x: clip !important;
  max-width: 100% !important;
}
/* ============================================================
   FIX — slider sous le menu (header absolute ne pousse pas le flux)
   ============================================================ */
.slider-section{
  margin-top: var(--header-h) !important;
}
@media (max-width: 1024px){
  .slider-section{ margin-top: var(--header-h) !important; }
}
@media (max-width: 720px){
  .slider-section{ margin-top: var(--header-h) !important; }
}
/* ---------- POINT 1 : GROS logo, menu de taille normale ---------- */

:root{ --header-h: 110px; }

.site-header__inner{
  position: relative;
  min-height: var(--header-h);
  overflow: visible;
}

/* Le logo sort du flux : il s'agrandit sans pousser le menu */
.site-header__logo{
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.site-header__logo img{
  height: 220px !important;     /* avant 190px → logo header plus grand */
  width: auto !important;
}
.site-header[data-theme="solid"] .site-header__logo img{
  height: 220px !important;
}

/* RÉSERVE l'espace du logo + DÉCALE le menu plus à droite */
.site-header__inner > .site-nav,
.site-header__inner > .site-header__burger{
  margin-left: 380px;   /* augmenté pour suivre le logo plus grand */
}

/* Footer : logo remonté plus haut + agrandi */
.site-footer__brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.site-footer__brand img{
  height: 310px !important;        /* avant 260px → plus grand */
  width: auto !important;
  filter: none !important;
  margin-top: -6rem !important;    /* avant -4rem → remonté plus haut */
  margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  :root{ --header-h: 96px; }
  .site-header__logo img,
  .site-header[data-theme="solid"] .site-header__logo img{ height: 175px !important; }
  .site-header__inner > .site-nav,
  .site-header__inner > .site-header__burger{ margin-left: 290px; }
  .site-footer__brand img{ height: 250px !important; margin-top: -4.5rem !important; }
}
@media (max-width: 720px){
  :root{ --header-h: 80px; }
  .site-header__logo img,
  .site-header[data-theme="solid"] .site-header__logo img{ height: 125px !important; }
  .site-header__inner > .site-nav,
  .site-header__inner > .site-header__burger{ margin-left: 0; }
  .site-footer__brand img{ height: 185px !important; margin-top: -3rem !important; }
}


/* ---------- POINT 11 : footer en bleu ---------- */
.site-footer{
  background: #1470af !important;
  color: #ffffff !important;
}
.site-footer h4,
.site-footer__brand p,
.site-footer__sub,
.site-footer__contact p,
.site-footer__nav a,
.site-footer__bottom p{
  color: #ffffff !important;
  opacity: 1 !important;
}
.site-footer__nav a:hover,
.site-footer__contact a:hover{ color: #cfe3f5 !important; }
.site-footer__socials a{ background: rgba(255,255,255,.15) !important; color:#fff !important; }
.site-footer__socials a:hover{ background: #ffffff !important; color:#1470af !important; }
.site-footer__bottom{ border-top-color: rgba(255,255,255,.2) !important; }
.site-footer__bottom strong{ color: #cfe3f5 !important; }
.site-footer__award .award-line--1{ color:#cfe3f5 !important; }

/* ---------- POINT 10 : sections en blanc, police bleue Roboto ---------- */
.programmes,
.praise,
.latest,
.bilan-news{
  background: #ffffff !important;
}
.programmes, .programmes p, .programmes .section-lede,
.praise, .latest, .latest-card__body, .latest-card__meta,
.programme-card__body, .programme-card__body p{
  font-family: 'Roboto', system-ui, sans-serif !important;
  color: #1470af !important;
}
.programmes h3, .latest-card__body h3,
.section-title, .section-kicker{
  color: #1470af !important;
}
/* ============================================================
   SLIDER — vidéo HLS : titre s'efface quand la vidéo joue
   ============================================================ */
.slider__slide--video .slider__caption{
  transition: opacity .5s ease, visibility .5s ease;
}
.slider__slide--video.is-active .slider__caption{
  opacity: 0;
  visibility: hidden;
}

/* ============================================================
   MOBILE — bloc unique, header dans le flux, slider décalé,
   commandes transparentes. DOIT ÊTRE LE TOUT DERNIER BLOC.
   ============================================================ */
@media (max-width: 720px){

  /* 1. Header FORCÉ dans le flux (priorité maximale) */
  body header.site-header,
  body #masthead.site-header{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    height: auto !important;
    z-index: 100 !important;
  }
  body .site-header__inner{
    position: relative !important;
    min-height: 0 !important;            /* la barre épouse le logo */
    height: auto !important;
    padding: .4rem 1rem !important;
    overflow: visible !important;
  }

  /* 2. Logo plus grand, dans le flux */
  .site-header__logo{
    position: static !important;
    transform: none !important;
  }
  .site-header__logo img,
  .site-header[data-theme="solid"] .site-header__logo img{
    height: 150px !important;            /* avant 120px → plus grand */
  }


  /* 3. Slider collé au menu, zéro espace */
  body main#main{
    padding-top: 0 !important;
    margin-top: 0 !important;
    background: #fff !important;
  }
  body .slider-section{
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    background: #000 !important;
  }
  /* 4. Commandes du slider semi-transparentes (ne cachent plus le texte) */
  .slider__nav,
  .slider__play{ opacity: .4 !important; }
  .slider__bullets{ display: none !important; }

  /* 5. Slider 16:9, toutes slides contenues */
  body .slider-section .slider{
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .slider__track{ width: 100% !important; height: 100% !important; }
  .slider__slide{
    width: 100% !important;
    height: 100% !important;
    inset: 0 !important;
  }
  .slider__media{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    background: #000;
    overflow: hidden !important;
  }
  .slider__slide:not(.slider__slide--video) .slider__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .slider__slide--video .slider__video{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000;
  }

  /* 6. Caption ancré en bas + tag qui ne déborde plus en haut */
  .slider__caption{
    top: auto !important;
    bottom: 0 !important;
    padding: 1rem 1rem 1.2rem !important;
  }
  .slider__caption h2{
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin-bottom: .3rem !important;
  }
  .slider__caption p{ font-size: .85rem !important; }
  .slider__tag{ margin-bottom: .5rem !important; }
  /* Cartes citations : laisser respirer le texte en bas */
  .praise3d__card{
    height: auto !important;
    min-height: 0 !important;
  }
  .praise3d__media{
    flex: 0 0 auto !important;
    height: 45% !important;             /* image plus petite */
    max-height: 200px !important;
  }
  .praise3d__card figcaption{
    flex: 1 1 auto !important;
    padding: 1rem 1.1rem 1.3rem !important;
  }
  .praise3d__card blockquote p{ font-size: .82rem !important; line-height: 1.4 !important; }
  .praise3d__card cite strong{ font-size: .85rem !important; }
  .praise3d__card cite span{ font-size: .72rem !important; }
  .praise3d__stage{ height: clamp(480px, 120vw, 640px) !important; }
}
/* ============================================================
   ANIMATION MOBILE PREMIUM — révélation "une fois"
   (version sûre : le texte reste visible même si l'anim échoue)
   ============================================================ */
@keyframes premiumLetterIn{
  0%{
    opacity: 0;
    transform: translateY(24px) scale(.92);
    filter: blur(6px);
    color: #5B92E5;
  }
  55%{
    filter: blur(0);
    color: #1470af;
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    color: #162521;
  }
}

@media (max-width: 720px){

  /* Pas de glissement Bravada sur mobile */
  .animated-title .cry-double,
  .bravada-title .cry-double{ display: none !important; }
  .animated-title .cry-single,
  .bravada-title .cry-single{
    position: static !important;
    opacity: 1 !important;
    animation: none !important;
  }

  /* Lettres : VISIBLES par défaut (opacity 1), l'animation les fait juste entrer */
  .animated-title .caption-title-word > span{
    display: inline-block !important;
    opacity: 1 !important;                /* ← sécurité : visibles même sans anim */
    animation: premiumLetterIn 1.1s cubic-bezier(.2,.7,.2,1) both !important;
  }

  .animated-title .caption-title-word > span:nth-child(1)  { animation-delay: .05s !important; }
  .animated-title .caption-title-word > span:nth-child(2)  { animation-delay: .11s !important; }
  .animated-title .caption-title-word > span:nth-child(3)  { animation-delay: .17s !important; }
  .animated-title .caption-title-word > span:nth-child(4)  { animation-delay: .23s !important; }
  .animated-title .caption-title-word > span:nth-child(5)  { animation-delay: .29s !important; }
  .animated-title .caption-title-word > span:nth-child(6)  { animation-delay: .35s !important; }
  .animated-title .caption-title-word > span:nth-child(7)  { animation-delay: .41s !important; }
  .animated-title .caption-title-word > span:nth-child(8)  { animation-delay: .47s !important; }
  .animated-title .caption-title-word > span:nth-child(9)  { animation-delay: .53s !important; }
  .animated-title .caption-title-word > span:nth-child(10) { animation-delay: .59s !important; }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce){
  .animated-title .caption-title-word > span{
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}
/* FIX — le menu ne doit plus jamais passer sur deux lignes */
.site-nav a{
  white-space: nowrap;
}
.site-nav ul{
  flex-wrap: nowrap;
  gap: 1.6rem;
}
@media (max-width: 1200px){
  .site-header__inner > .site-nav,
  .site-header__inner > .site-header__burger{
    margin-left: 220px;
  }
  .site-nav a{ font-size: .92rem; }
}

/* ============================================================
   CORRECTIF MENU MOBILE — version unifiée
   ============================================================ */
@media (max-width: 900px){

  /* Header compact et en flux normal */
  .site-header{
    position: relative !important;
    height: auto !important;
  }
  .site-header__inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    height: auto !important;
    padding: .5rem 1rem !important;
  }

  /* Logo maîtrisé */
  .site-header__logo{
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }
  .site-header__logo img,
  .site-header[data-theme="solid"] .site-header__logo img{
    height: 160px !important;
    width: auto !important;
  }

  /* Burger : 3 barres nettes, cliquable, à droite */
  .site-header__burger{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 34px !important;
    height: 24px !important;
    padding: 0 !important;
    margin-left: auto !important;   /* colle le burger à droite */
    background: none !important;
    position: relative !important;
    z-index: 100002 !important;
  }
  .site-header__burger span{
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: #162521 !important;
    transition: transform .3s ease, opacity .3s ease !important;
  }
  /* Transformation en croix quand ouvert */
  .site-header__burger[aria-expanded="true"] span:nth-child(1){
    transform: translateY(10.5px) rotate(45deg) !important;
  }
  .site-header__burger[aria-expanded="true"] span:nth-child(2){
    opacity: 0 !important;
  }
  .site-header__burger[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-10.5px) rotate(-45deg) !important;
  }
  /* Le burger reste en place (pas de position:fixed qui le déplace) */
  .site-header__burger[aria-expanded="true"]{
    position: fixed !important;
    top: 1.5rem !important;
    right: 1.2rem !important;
  }
  .site-header__burger[aria-expanded="true"] span{
    background: #162521 !important;
  }

  /* Panneau du menu : plein écran, opaque, hors-champ par défaut */
  #primary-nav.site-nav,
  .site-nav{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    transition: transform .35s ease, visibility .35s ease !important;
    z-index: 100000 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #primary-nav.site-nav.is-open,
  .site-nav.is-open{
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Liste empilée */
  .site-nav ul{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6rem 0 2rem !important;
    list-style: none !important;
  }
  .site-nav li{ border-bottom: 1px solid #ececec !important; }
  .site-nav a{
    display: block !important;
    padding: 1.15rem 1.5rem !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #162521 !important;
    text-align: left !important;
  }
  .site-nav a.is-current,
  .site-nav a:hover{
    color: #1470af !important;
    background: #f5f8fb !important;
  }
  .site-nav a::after{ display: none !important; }
}
/* Halo neutre définitif sur le logo (écrase tous les blocs précédents) */
.site-header__logo img{
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)) !important;
}

.videos-intro{ text-align:center; padding: calc(var(--header-h) + 2rem) 1.5rem 0; background:#fff; }
.videos-intro__kicker{
  font-family:'Roboto',sans-serif; font-size:.78rem; letter-spacing:.35em;
  text-transform:uppercase; color:var(--accent-1); font-weight:700; margin:0 0 .8rem;
}
.videos-intro__title{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:900;
  font-size:clamp(2rem,5vw,3.6rem); line-height:1.1; color:var(--heading); margin:0;
}
.videos-cta{ text-align:center; background:#fff; padding: 1rem 1.5rem 2.5rem; }
.videos-cta__btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 2.5rem; background:var(--accent-1); color:#fff;
  font-family:'Roboto',sans-serif; font-weight:600; font-size:.95rem;
  letter-spacing:.08em; text-transform:uppercase; border-radius:3px;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.videos-cta__btn::after{ content:"→"; font-size:1.2em; }
.videos-cta__btn:hover{ background:var(--accent-1-dark); transform:translateY(-3px); box-shadow:0 14px 32px rgba(20,112,175,.35); }
/* ============================================================
   COMPENSATION HERO SUPPRIMÉ — décale le 1er bloc sous le header fixe
   (centralisé ici, valable pour toutes les pages sans hero)
   ============================================================ */
#main > section:first-child,
#main > .pre-footer:first-child{
  padding-top: calc(var(--header-h) + 2rem);
}

/* Latest News : le mur d'images démarre sous le header */
#main > .ln-bands:first-child{ padding-top: var(--header-h) !important; }

/* ============================================================
   SOUS-MENU "Our topics" (nav déroulant)
   ============================================================ */
.site-nav .has-submenu{ position:relative; }

.site-nav .submenu-toggle{
  display:inline-flex; align-items:center; gap:.45rem;
  background:none; border:0; cursor:pointer;
  font:inherit; color:inherit; padding:0;
  letter-spacing:inherit; text-transform:inherit;
}

/* Chevron dessiné en CSS */
/* Chevron raffiné — deux traits fins, repli fluide */
.submenu-caret{
  position:relative;
  display:inline-block;
  width:11px; height:11px;
  margin-left:.15rem;
  flex-shrink:0;
}
.submenu-caret::before,
.submenu-caret::after{
  content:"";
  position:absolute;
  top:50%; 
  width:7px; height:2px;
  background:currentColor;
  border-radius:2px;
  opacity:.7;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.submenu-caret::before{
  left:0;
  transform:translateY(-50%) rotate(45deg);
  transform-origin:right center;
}
.submenu-caret::after{
  right:0;
  transform:translateY(-50%) rotate(-45deg);
  transform-origin:left center;
}
/* Ouverture : le chevron se retourne vers le haut */
.site-nav .has-submenu:hover .submenu-caret::before,
.site-nav .has-submenu:focus-within .submenu-caret::before,
.site-nav .submenu-toggle[aria-expanded="true"] .submenu-caret::before{
  transform:translateY(-50%) rotate(-45deg);
  opacity:1;
}
.site-nav .has-submenu:hover .submenu-caret::after,
.site-nav .has-submenu:focus-within .submenu-caret::after,
.site-nav .submenu-toggle[aria-expanded="true"] .submenu-caret::after{
  transform:translateY(-50%) rotate(45deg);
  opacity:1;
}

/* Panneau collé sous le parent, triangle conservé */
.site-nav .submenu{
  position:absolute; top:100%; left:0;
  transform:translateY(10px);
  min-width:240px; list-style:none; margin:0; padding:.5rem 0;
  background:#fff; border-radius:10px;
  border-top:3px solid var(--accent-1);
  box-shadow:0 18px 50px rgba(8,65,92,.18);
  opacity:0; visibility:hidden; z-index:300;
  display:block !important;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility .3s ease;
}
.site-nav .submenu::before{
  content:""; position:absolute; top:-8px; left:32px;
  transform:rotate(45deg);
  width:14px; height:14px; background:var(--accent-1);
}
.site-nav .has-submenu:hover > .submenu,
.site-nav .has-submenu:focus-within > .submenu,
.site-nav .submenu-toggle[aria-expanded="true"] + .submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}


.site-nav .submenu a{
  display:block; padding:.75rem 1.4rem;
  font-family:var(--ff-display); font-weight:700; font-size:.95rem;
  color:var(--heading)!important; white-space:nowrap;
  transition:background .25s ease, color .25s ease, padding-left .25s ease;
}
.site-nav .submenu a:hover{
  background:#f4f8fb; color:var(--accent-1)!important;
  padding-left:1.7rem;
}

/* Mobile */
@media (max-width:900px){
  .site-nav .submenu{
    position:static!important; transform:none!important;
    opacity:1!important; visibility:visible!important;
    box-shadow:none!important; border-top:0!important; border-radius:0!important;
    min-width:0!important; padding:0!important; background:#f4f8fb!important;
  }
  .site-nav .submenu::before{ display:none!important; }
  .site-nav .submenu a{ padding:.9rem 2.5rem!important; }
  .submenu-caret{ margin-left:auto; }
}
/* Empêche tout chevron parasite hérité d'un ancien style */
.site-nav .submenu-toggle::before,
.site-nav .submenu-toggle::after{ content:none !important; }
.home-services{ background:#fff; padding:5rem 0; }
.home-services__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  margin-top:2.5rem; list-style:none; padding:0;
}
.home-services__card{
  background:#fff; border:1px solid rgba(8,65,92,.1);
  border-top:3px solid var(--accent-1);
  padding:2rem 1.5rem; text-align:center;
  transition:transform .4s ease, box-shadow .4s ease;
}
.home-services__card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,112,175,.15); }
.home-services__card h3{
  font-family:var(--ff-display); font-weight:900; font-style:italic;
  font-size:1.25rem; color:var(--heading); margin:0 0 .6rem;
}
.home-services__card p{
  font-family:var(--ff-editorial); font-size:.95rem; line-height:1.6; color:var(--text); margin:0;
}
.home-services__cta{ text-align:center; margin-top:2.5rem; }
.home-services__btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 2.5rem; background:var(--accent-1); color:#fff !important;
  font-family:var(--ff-sans); font-weight:600; font-size:.95rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-radius:3px;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.home-services__btn::after{ content:"→"; font-size:1.2em; }
.home-services__btn:hover{ background:var(--accent-1-dark); transform:translateY(-3px); box-shadow:0 14px 32px rgba(20,112,175,.35); }
@media (max-width:900px){ .home-services__grid{ grid-template-columns:1fr; } }

/* Le bouton du sous-menu adopte EXACTEMENT le style des liens de nav */
.site-nav a,
.site-nav .submenu-toggle{
  font-family: var(--ff-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--heading) !important;
  line-height: 1 !important;
}
.site-nav .submenu-toggle:hover,
.site-nav .submenu-toggle[aria-expanded="true"]{
  color: var(--blue) !important;
}
/* Sur mobile, le bouton adopte aussi le style des liens mobiles */
@media (max-width:900px){
  .site-nav .submenu-toggle{
    display:block !important;
    width:100% !important;
    padding:1.15rem 1.5rem !important;
    font-size:1.25rem !important;
    text-align:left !important;
    font-family:'Playfair Display', serif !important;
  }
}
.site-nav .submenu{
  display:block !important;   /* force la pile verticale, annule tout flex hérité */
}

/* La compensation centralisée ne doit PAS s'appliquer à la home
   (le premier bloc est .videos-intro qui gère déjà son padding) */
#main > .videos-intro:first-child{
  padding-top: calc(var(--header-h) + 1rem) !important;
}
/* La home n'a pas besoin de compensation : l'intro gère déjà le décalage */
#main > .slider-section:first-child{
  padding-top: 0 !important;
}
/* ============================================================
   OUR SERVICES — cartes premium façon "Our sections"
   ============================================================ */
.home-services{ background:#fff !important; padding:6rem 0 !important; }

.home-services__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem;
}
.home-services__card{
  position:relative; background:#fff;
  border:0 !important; box-shadow:var(--shadow-sm);
  padding:3rem 2rem 2.5rem; text-align:left; overflow:hidden;
  transition:transform .5s ease, box-shadow .5s ease;
}
.home-services__card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }

/* Icône GRANDE, capsule verre premium + halo pulsé */
.home-services__icon{
  position:relative !important;
  width:110px; height:110px;
  margin:0 0 1.6rem !important;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.95) 0%, rgba(207,225,243,.55) 50%, rgba(20,112,175,.18) 100%) !important;
  border:1px solid rgba(20,112,175,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 34px rgba(20,112,175,.22) !important;
  filter:none !important;
  isolation:isolate;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;
}
.home-services__card:hover .home-services__icon{
  transform:translateY(-4px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 26px 46px rgba(20,112,175,.35),
    0 0 0 1px rgba(20,112,175,.35),
    0 0 40px rgba(142,182,220,.5) !important;
}
/* Anneau orbital autour de la capsule */
.home-services__icon::before{
  content:"" !important; display:block !important;
  position:absolute; inset:-8px; border-radius:50%;
  border:1px dashed rgba(20,112,175,.35);
  animation:hsxOrbit 16s linear infinite;
  pointer-events:none;
}
@keyframes hsxOrbit{ to{ transform:rotate(360deg); } }

.home-services__icon svg{
  width:76px; height:76px; overflow:visible;
  filter:drop-shadow(0 3px 8px rgba(8,65,92,.25));
}
.home-services__icon svg *{ transform-box:fill-box; transform-origin:center; }

/* ---- Animations communes ---- */
.hsx-ring{ transform-origin:48px 48px; animation:hsxRingSpin 20s linear infinite; }
@keyframes hsxRingSpin{ to{ transform:rotate(360deg); } }
.hsx-glow{ transform-origin:center; animation:hsxGlow 3.2s ease-in-out infinite; }
@keyframes hsxGlow{ 0%,100%{ transform:scale(.85); opacity:.7; } 50%{ transform:scale(1.15); opacity:1; } }
.hsx-spark{ animation:hsxSpark 2.6s ease-in-out infinite; }
.hsx-spark-2{ animation-delay:1.1s; }
@keyframes hsxSpark{ 0%,100%{ opacity:0; transform:scale(.3); } 50%{ opacity:1; transform:scale(1.5); } }

/* Training : chapeau qui flotte, pompon qui balance */
.hsx-cap{ animation:hsxCapBob 3.4s ease-in-out infinite; }
@keyframes hsxCapBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(-2deg); } }
.hsx-tassel{ animation:hsxTassel 2.2s ease-in-out infinite; }
@keyframes hsxTassel{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* Production : objectif qui zoome, bobine qui tourne, point REC qui clignote */
.hsx-lens{ animation:hsxLens 3s ease-in-out infinite; }
@keyframes hsxLens{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }
.hsx-reel{ transform-origin:34px 49px; animation:hsxReel 4s linear infinite; }
@keyframes hsxReel{ to{ transform:rotate(360deg); } }
.hsx-rec{ animation:hsxRec 1.4s ease-in-out infinite; }
@keyframes hsxRec{ 0%,100%{ opacity:1; } 50%{ opacity:.15; } }

/* Consulting : bulle qui respire, points qui rebondissent */
.hsx-bubble{ animation:hsxBubble 3.6s ease-in-out infinite; transform-origin:48px 50px; }
@keyframes hsxBubble{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
.hsx-dot{ animation:hsxDot 1.5s ease-in-out infinite; }
.hsx-dot-2{ animation-delay:.2s; }
.hsx-dot-3{ animation-delay:.4s; }
@keyframes hsxDot{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(-4px); opacity:1; } }

@media (prefers-reduced-motion:reduce){ .home-services__icon *{ animation:none !important; } }

/* Titres + textes : bleu, cohérent avec "Our sections" */
.home-services__card h3{
  font-family:var(--ff-display) !important; font-weight:900 !important; font-style:normal !important;
  font-size:1.55rem !important; color:var(--accent-1) !important; margin:0 0 1rem !important;
}
.home-services__card p{
  font-family:'Roboto', system-ui, sans-serif !important;
  color:var(--accent-1) !important; line-height:1.7; font-size:.98rem;
}
.home-services__lede{ color:var(--accent-1) !important; }

@media (max-width:900px){
  .home-services__grid{ grid-template-columns:1fr; }
  .home-services__icon{ width:96px; height:96px; }
  .home-services__icon svg{ width:64px; height:64px; }
}

/* Supprime le losange décoratif du sous-menu */
.site-nav .submenu::before{ content:none !important; display:none !important; }
/* ===== Compensation header (TOUTES les pages) ===== */
#main > section:first-child{
  padding-top: calc(var(--header-h) + 2rem);
}

/* ===== HOME uniquement : pas de compensation, le slider gère son décalage ===== */
body.is-home #main{ background:#fff !important; }
body.is-home #main > section:first-child{ padding-top:0 !important; }
body.is-home #main > .videos-intro:first-child{
  padding-top: calc(var(--header-h) + 1rem) !important;
  padding-bottom:0 !important;
  margin:0 !important;
}
body.is-home .videos-intro,
body.is-home .videos-cta,
body.is-home .vslider,
body.is-home .vslider__inner,
body.is-home .slider-section{ background:#fff !important; }
body.is-home #main > .slider-section{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* ============================================================
   OUR SERVICES — animations premium DANS les cercles
   ============================================================ */
.hsx-ring{ transform-origin:48px 48px; animation:hsxRingSpin 24s linear infinite; }
@keyframes hsxRingSpin{ to{ transform:rotate(360deg); } }

/* ---------- 1. TRAINING : réseau vivant ---------- */
.hsx-halo{ transform-origin:48px 48px; animation:hsxHalo 3s ease-in-out infinite; }
@keyframes hsxHalo{ 0%,100%{ transform:scale(.8); opacity:.6; } 50%{ transform:scale(1.15); opacity:1; } }

.hsx-link{
  stroke-dasharray:80; stroke-dashoffset:80;
  animation:hsxLinkDraw 3s ease-in-out infinite;
}
.hsx-link-2{ animation-delay:.2s; } .hsx-link-3{ animation-delay:.4s; }
.hsx-link-4{ animation-delay:.6s; } .hsx-link-5{ animation-delay:.8s; }
.hsx-link-6{ animation-delay:1s; } .hsx-link-7{ animation-delay:1.2s; }
.hsx-link-8{ animation-delay:1.4s; }
@keyframes hsxLinkDraw{
  0%   { stroke-dashoffset:80; opacity:.15; }
  40%  { stroke-dashoffset:0;  opacity:1; }
  75%  { stroke-dashoffset:0;  opacity:1; }
  100% { stroke-dashoffset:-80; opacity:.15; }
}
.hsx-node{ animation:hsxNodePulse 2s ease-in-out infinite; }
.hsx-node-2{ animation-delay:.3s; } .hsx-node-3{ animation-delay:.6s; }
.hsx-node-4{ animation-delay:.9s; } .hsx-node-5{ animation-delay:1.2s; }
.hsx-node-6{ animation-delay:.15s; }
.hsx-node-7{ animation-delay:1.5s; }
.hsx-node-8{ animation-delay:1.8s; }
@keyframes hsxNodePulse{
  0%,100%{ transform:scale(.8); filter:drop-shadow(0 0 0 rgba(255,209,102,0)); }
  50%    { transform:scale(1.5); filter:drop-shadow(0 0 6px rgba(255,209,102,.9)); }
}
.hsx-pulse-a{ animation:hsxPulseA 3.5s linear infinite; }
.hsx-pulse-b{ animation:hsxPulseB 4s linear infinite; }
@keyframes hsxPulseA{
  0%  { transform:translate(12px,30px); opacity:0; }
  10% { opacity:1; }
  33% { transform:translate(34px,14px); }
  66% { transform:translate(62px,14px); opacity:1; }
  90% { transform:translate(84px,32px); opacity:1; }
  100%{ transform:translate(84px,32px); opacity:0; }
}
@keyframes hsxPulseB{
  0%  { transform:translate(84px,64px); opacity:0; }
  10% { opacity:1; }
  40% { transform:translate(60px,82px); }
  75% { transform:translate(34px,82px); opacity:1; }
  100%{ transform:translate(12px,64px); opacity:0; }
}

/* ---------- 2. PRODUCTION : faisceau balayant ---------- */
.hsx-beam{ transform-origin:60px 48px; animation:hsxBeamSweep 3.5s ease-in-out infinite; }
@keyframes hsxBeamSweep{
  0%   { transform:rotate(-18deg); opacity:.6; }
  50%  { transform:rotate(18deg);  opacity:1; }
  100% { transform:rotate(-18deg); opacity:.6; }
}
.hsx-mote{ animation:hsxMote 2.4s ease-in-out infinite; }
.hsx-mote-2{ animation-delay:.5s; } .hsx-mote-3{ animation-delay:1s; }
@keyframes hsxMote{
  0%   { opacity:0; transform:translateX(0) scale(.6); }
  40%  { opacity:1; }
  100% { opacity:0; transform:translateX(14px) scale(1.3); }
}
.hsx-lens{ animation:hsxLens 3s ease-in-out infinite; }
@keyframes hsxLens{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(2px); } }
.hsx-reel{ transform-origin:34px 49px; animation:hsxReel 4s linear infinite; }
@keyframes hsxReel{ to{ transform:rotate(360deg); } }
.hsx-rec{ animation:hsxRec 1.3s ease-in-out infinite; }
@keyframes hsxRec{ 0%,100%{ opacity:1; } 50%{ opacity:.15; } }
.hsx-glow{ transform-origin:center; animation:hsxHalo 3.2s ease-in-out infinite; }

/* ---------- 3. CONSULTING : ondes radar + orbites ---------- */
.hsx-wave{ transform-origin:48px 48px; animation:hsxRadar 3s ease-out infinite; opacity:0; }
.hsx-wave-2{ animation-delay:1s; } .hsx-wave-3{ animation-delay:2s; }
@keyframes hsxRadar{
  0%  { transform:scale(.2); opacity:1; }
  100%{ transform:scale(5);  opacity:0; }
}

.hsx-orbit{ transform-origin:48px 48px; animation:hsxOrbitSpin 8s linear infinite; }
.hsx-orbit--rev{ animation:hsxOrbitSpinRev 5s linear infinite; }
@keyframes hsxOrbitSpin{ to{ transform:rotate(360deg); } }
@keyframes hsxOrbitSpinRev{ to{ transform:rotate(-360deg); } }
.hsx-core{ transform-origin:48px 48px; animation:hsxCore 2s ease-in-out infinite; }
@keyframes hsxCore{
  0%,100%{ transform:scale(.8); filter:drop-shadow(0 0 2px rgba(255,209,102,.6)); }
  50%    { transform:scale(1.3); filter:drop-shadow(0 0 8px rgba(255,209,102,1)); }
}

@media (prefers-reduced-motion:reduce){
  .hsx-halo,.hsx-link,.hsx-node,.hsx-pulse-a,.hsx-pulse-b,
  .hsx-beam,.hsx-mote,.hsx-wave,.hsx-orbit,.hsx-core{ animation:none !important; }
}
/* Symboles principaux : légère vie */
.hsx-cap{ animation:hsxCapBob 3.4s ease-in-out infinite; transform-origin:48px 38px; }
@keyframes hsxCapBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-2px) rotate(-2deg); } }
.hsx-tassel{ animation:hsxTassel 2.2s ease-in-out infinite; transform-origin:78px 40px; }
@keyframes hsxTassel{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
.hsx-bubble{ animation:hsxBubble 3.6s ease-in-out infinite; transform-origin:48px 48px; }
@keyframes hsxBubble{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } }
.hsx-dot{ animation:hsxDot 1.5s ease-in-out infinite; }
.hsx-dot-2{ animation-delay:.2s; } .hsx-dot-3{ animation-delay:.4s; }
@keyframes hsxDot{ 0%,100%{ transform:translateY(0); opacity:.7; } 50%{ transform:translateY(-3px); opacity:1; } }
/* Réseaux sociaux du menu mobile — STRICTEMENT cachés sur desktop */
.site-nav .nav-socials{ display:none !important; }

@media (max-width:900px){
  .site-nav .nav-socials{
    display:flex !important;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:auto;
    padding:2rem 1.5rem 2.5rem;
    border-top:1px solid #ececec;
  }
  .site-nav .nav-socials a{
    width:46px; height:46px;
    display:grid; place-items:center;
    border-radius:50%;
    background:#f4f8fb;
    color:var(--accent-1);
    transition:background .3s ease, color .3s ease, transform .3s ease;
  }
  .site-nav .nav-socials a:hover{
    background:var(--accent-1);
    color:#fff;
    transform:translateY(-3px);
  }
  #primary-nav.site-nav, .site-nav{
    display:flex !important;
    flex-direction:column !important;
  }
}
/* ============================================================
   MENU MOBILE — bloc social + CTA + légal
   ============================================================ */
@media (max-width: 900px){

  /* Le menu suit son contenu, plus de height:100vh qui étire */
#primary-nav.site-nav, .site-nav{
  height: auto !important;
  min-height: 0 !important;      /* le menu suit son contenu, plus d'étirement */
  justify-content: flex-start !important;
  padding-bottom: 1rem !important;
}

.nav-social-block{
  margin-top: .75rem;                  /* remonte le bloc */
  padding: 1.25rem 1.5rem 1.25rem;     /* moins d'espace haut/bas */
  border-top: none;
  text-align: center;
}

  /* CTA engageant */
  .nav-social-cta{
    margin: 0 0 1.1rem;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: var(--accent-1, #1470af);
    letter-spacing: .2px;
  }

  /* Rangée d'icônes */
  .nav-socials{
    display: flex !important;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin: 0 0 1.4rem;
  }

  .nav-socials a{
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef4fa;
    color: var(--accent-1, #1470af) !important;  /* couleur du SVG */
    transition: background .25s ease, color .25s ease, transform .25s ease;
  }

  .nav-socials a svg{
    width: 22px;
    height: 22px;
  }

  .nav-socials a:hover{
    background: var(--accent-1, #1470af);
    color: #fff !important;
    transform: translateY(-3px);
  }

  /* Bloc légal */
  .nav-legal{
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: .78rem;
    line-height: 1.5;
    color: #7a8a99;
  }
  .nav-legal p{ margin: .25rem 0; }
  .nav-legal strong{ color: var(--accent-1, #1470af); font-weight: 600; }
}

/* Cacher tout le bloc sur desktop */
.nav-social-block{ display: none; }
@media (max-width: 900px){ .nav-social-block{ display: block; } }
@media (max-width: 900px){
  .nav-socials a svg path{
    fill: #1470af !important;
  }
  .nav-socials a:hover svg path{
    fill: #fff !important;
  }
} 
@media (max-width: 900px){
  .nav-socials a svg{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    overflow: visible !important;
  }
}
@media (max-width: 900px){
  .nav-socials a svg{
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-shrink: 0 !important;
    display: block !important;
  }
  /* Sécurité : neutralise un éventuel place-items qui écrase la largeur */
  .nav-socials a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@media (max-width: 900px){
  html body #primary-nav.site-nav,
  html body .site-nav{
    bottom: auto !important;          /* libère le bas : le menu s'arrête au contenu */
    height: auto !important;
    max-height: 100vh !important;     /* si le menu est plus grand que l'écran, il défile */
    overflow-y: auto !important;
  }
}
@media (max-width: 900px){
  /* Sous-menu replié par défaut */
  .site-nav .submenu{
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
  }
  /* Déplié uniquement quand le bouton est ouvert */
  .site-nav .submenu-toggle[aria-expanded="true"] + .submenu{
    max-height: 400px;   /* assez grand pour les 3 liens */
  }
  /* Petite rotation du chevron */
  .site-nav .submenu-caret{
    transition: transform .3s ease;
  }
  .site-nav .submenu-toggle[aria-expanded="true"] .submenu-caret{
    transform: rotate(180deg);
  }
}
@media (max-width: 900px){
  #primary-nav.site-nav, .site-nav{
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}
@media (max-width: 900px){
  /* Sous-menu "Our sections" replié par défaut */
  .site-nav .has-submenu .submenu{
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height .3s ease;
  }
  /* Déplié seulement quand le bouton est ouvert */
  .site-nav .submenu-toggle[aria-expanded="true"] + .submenu{
    max-height: 400px !important;
  }
  /* Chevron qui pivote */
  .site-nav .submenu-caret{
    transition: transform .3s ease;
    display: inline-block;
  }
  .site-nav .submenu-toggle[aria-expanded="true"] .submenu-caret{
    transform: rotate(180deg);
  }
}
/* ============================================================
   BIO — icônes sociales en bas du hero (LinkedIn · X · Mail)
   Injectées par app.js dans .bio-hero__text
   ============================================================ */
.bio-socials{
  display: flex;
  gap: .7rem;
  margin-top: 1.8rem;      /* espace sous la citation */
}
.bio-socials__link{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bio-blue, #1470af);
  background: rgba(20,112,175,.08);
  border: 1px solid rgba(20,112,175,.15);
  position: relative;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              background .3s ease, color .3s ease, box-shadow .35s ease;
}
/* halo doré au survol (esprit timeline) */
.bio-socials__link::before{
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 140deg,
              rgba(255,209,102,0), rgba(255,209,102,.6),
              rgba(20,112,175,.4), rgba(255,209,102,0));
  opacity: 0; z-index: -1;
  transition: opacity .35s ease;
}
.bio-socials__link:hover{
  transform: translateY(-4px) scale(1.06);
  background: var(--bio-blue, #1470af);
  color: #fff;
  box-shadow: 0 12px 24px rgba(8,65,92,.28);
}
.bio-socials__link:hover::before{ opacity: 1; }
.bio-socials__link svg{
  width: 20px; height: 20px;
  display: block;
  flex-shrink: 0;   /* évite le bug largeur 0 rencontré sur le menu mobile */
}

/* Mobile : hero en une colonne centrée → icônes centrées */
@media (max-width: 860px){
  .bio-socials{ justify-content: center; }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce){
  .bio-socials__link{ transition: background .3s ease, color .3s ease; }
  .bio-socials__link:hover{ transform: none; }
  .bio-socials__link::before{ display: none; }
}
/* ============================================================
   BIO — icônes sociales (correctif haute spécificité)
   ============================================================ */
.bio-hero .bio-hero__text .bio-socials{
  display: flex !important;
  flex-direction: row !important;   /* horizontal, une à côté de l'autre */
  gap: .7rem !important;
  margin-top: 2.4rem !important;    /* un peu plus bas, comme demandé */
  align-items: center;
}
.bio-hero .bio-hero__text .bio-socials__link{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;       /* empêche l'écrasement à 0 */
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bio-blue, #1470af) !important;
  background: rgba(20,112,175,.08) !important;
  border: 1px solid rgba(20,112,175,.15) !important;
  position: relative;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              background .3s ease, color .3s ease, box-shadow .35s ease;
}
.bio-hero .bio-hero__text .bio-socials__link::before{
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 140deg,
              rgba(255,209,102,0), rgba(255,209,102,.6),
              rgba(20,112,175,.4), rgba(255,209,102,0));
  opacity: 0; z-index: -1;
  transition: opacity .35s ease;
}
.bio-hero .bio-hero__text .bio-socials__link:hover{
  transform: translateY(-4px) scale(1.06);
  background: var(--bio-blue, #1470af) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(8,65,92,.28);
}
.bio-hero .bio-hero__text .bio-socials__link:hover::before{ opacity: 1; }
.bio-hero .bio-hero__text .bio-socials__link svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
@media (max-width: 860px){
  .bio-hero .bio-hero__text .bio-socials{ justify-content: center; }
}
/* ============================================================
   FOOTER — mention Index on Censorship (injectée par app.js)
   ============================================================ */
.site-footer__nom{
  margin: .35rem 0 1rem;
  font-family: var(--ff-display);
  line-height: 1.3;
}
.site-footer__nom-line{
  display: block;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #cfe3f5 !important;
  font-weight: 500;
  margin-bottom: .15rem;
}
.site-footer__nom a{
  display: inline-block;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: .1rem;
  transition: border-color .25s ease, opacity .25s ease;
}
.site-footer__nom a:hover{
  border-bottom-color: #fff;
  opacity: .9;
}
@media (max-width: 900px){
  .site-footer__nom{ text-align: center; }
}

.animated-title .caption-title-word > span span.cry-double.animated-letter{
  color: #1470af;   /* bleu foncé unique */
}
.bilan-news__hint{
  font-family:'Roboto Mono', monospace;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-1);
  margin:-2rem auto 3rem;
  opacity:.75;
  text-align:center;
}
.bilan-news__hint::before{ content:"↳ "; }
/* ============================================================
   CARET SOUS-MENU — triangle bleu moderne
   ============================================================ */
.site-nav .submenu-caret{
  position: relative;
  display: inline-block;
  width: 10px;
  height: 7px;
  margin-left: .35rem;
  background: var(--accent-1);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform-origin: 50% 55%;
  opacity: .8;
  transition:
    transform .42s cubic-bezier(.34,1.56,.64,1),
    opacity   .25s ease,
    background .25s ease;
}
/* on tue les anciens traits */
.site-nav .submenu-caret::before,
.site-nav .submenu-caret::after{ content: none !important; }

/* état ouvert / survol */
.site-nav .has-submenu:hover .submenu-caret,
.site-nav .has-submenu:focus-within .submenu-caret,
.site-nav .submenu-toggle[aria-expanded="true"] .submenu-caret{
  transform: rotate(180deg);
  opacity: 1;
  background: var(--accent-1-dark);
}

@media (prefers-reduced-motion: reduce){
  .site-nav .submenu-caret{ transition: none; }
}
/* ============================================================
   MENU MOBILE v2 — burger droite + révélation circulaire
   (remplace le bloc précédent, à garder en fin de style.css)
   ============================================================ */
@media (max-width: 900px){

  /* ---------- 0. ON LIBÈRE LE BLOC CONTENEUR (indispensable) ---------- */
  html body header.site-header,
  html body #masthead.site-header{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    perspective: none !important;
    will-change: auto !important;
    background: #fff !important;
    overflow: visible !important;
  }

  /* ---------- 1. HEADER COMPACT + LOGO XL ---------- */
  html body .site-header__inner{
    position: relative !important;
    height: 110px !important;
    min-height: 110px !important;
    padding: 0 1rem !important;
    overflow: visible !important;   /* surtout PAS hidden ici */
    display: flex !important;
    align-items: center !important;
  }

  /* le rognage se fait sur le logo lui-même */
  html body .site-header__logo{
    position: absolute !important;
    left: .5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 110px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: 0 !important;
  }
  html body .site-header__logo img,
  html body .site-header[data-theme="solid"] .site-header__logo img{
    height: 200px !important;       /* ← seul curseur à régler */
    width: auto !important;
    max-width: none !important;
    filter: none !important;
  }

  /* ---------- 2. BURGER : pastille fixe en haut à droite ---------- */
  html body .site-header__burger{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 4px 16px rgba(8,65,92,.20) !important;
    z-index: 100002 !important;
  }
  html body .site-header__burger span{
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    border-radius: 3px !important;
    background: var(--accent-1) !important;
    transition: transform .5s cubic-bezier(.68,-.55,.265,1.55),
                opacity .25s ease !important;
  }
  html body .site-header__burger[aria-expanded="true"] span:nth-child(1){
    transform: translateY(8.5px) rotate(45deg) !important;
  }
  html body .site-header__burger[aria-expanded="true"] span:nth-child(2){
    opacity: 0 !important;
    transform: scaleX(.2) !important;
  }
  html body .site-header__burger[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-8.5px) rotate(-45deg) !important;
  }

  /* ---------- 3. PANNEAU CIRCULAIRE ---------- */
  html body nav#primary-nav.site-nav,
  html body .site-nav{
    position: fixed !important;
    top: 0 !important; right: 0 !important;
    bottom: 0 !important; left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: auto !important;
    z-index: 100000 !important;
    pointer-events: none !important;
    clip-path: circle(0px at calc(100% - 37px) 37px) !important;
    -webkit-clip-path: circle(0px at calc(100% - 37px) 37px) !important;
    transition: clip-path .62s cubic-bezier(.65,0,.35,1) !important;
  }
  html body nav#primary-nav.site-nav.is-open,
  html body .site-nav.is-open{
    pointer-events: auto !important;
    clip-path: circle(165% at calc(100% - 37px) 37px) !important;
    -webkit-clip-path: circle(165% at calc(100% - 37px) 37px) !important;
  }

  /* ---------- 4. ITEMS EN CASCADE ---------- */
  html body .site-nav > ul{ padding: 6.5rem 0 1rem !important; }
  html body .site-nav > ul > li{
    opacity: 0 !important;
    transform: translateX(48px) !important;
    transition: opacity .4s ease, transform .55s cubic-bezier(.34,1.56,.64,1) !important;
  }
  html body .site-nav.is-open > ul > li{
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
  html body .site-nav.is-open > ul > li:nth-child(1){ transition-delay: .20s !important; }
  html body .site-nav.is-open > ul > li:nth-child(2){ transition-delay: .26s !important; }
  html body .site-nav.is-open > ul > li:nth-child(3){ transition-delay: .32s !important; }
  html body .site-nav.is-open > ul > li:nth-child(4){ transition-delay: .38s !important; }
  html body .site-nav.is-open > ul > li:nth-child(5){ transition-delay: .44s !important; }
  html body .site-nav.is-open > ul > li:nth-child(6){ transition-delay: .50s !important; }
  html body .site-nav.is-open > ul > li:nth-child(7){ transition-delay: .56s !important; }
  html body .site-nav.is-open > ul > li:nth-child(8){ transition-delay: .62s !important; }

  html body .site-nav .nav-social-block{
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity .45s ease .60s, transform .45s ease .60s !important;
  }
  html body .site-nav.is-open .nav-social-block{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}
/* ============================================================
   MENU MOBILE v3 — disque bleu + découpe visible
   (à coller APRÈS le bloc v2)
   ============================================================ */
@media (max-width: 900px){

  html body nav#primary-nav.site-nav{
    /* ← LE curseur : plus la valeur est basse, plus la découpe est marquée
       115vh = plein écran · 94vh = découpe élégante · 78vh = quart de disque */
    --nav-r: 94vh;

    background: linear-gradient(150deg,
                  var(--overlay-start) 0%,
                  var(--accent-1) 58%,
                  var(--accent-1-dark) 100%) !important;

    clip-path: circle(0px at calc(100% - 37px) 37px) !important;
    -webkit-clip-path: circle(0px at calc(100% - 37px) 37px) !important;
  }

  html body nav#primary-nav.site-nav.is-open{
    clip-path: circle(var(--nav-r) at calc(100% - 37px) 37px) !important;
    -webkit-clip-path: circle(var(--nav-r) at calc(100% - 37px) 37px) !important;
  }

  /* ---------- contenu aligné à droite, il épouse la courbe ---------- */
  html body .site-nav > ul{
    padding: 6.5rem 0 2rem !important;
    text-align: right !important;
  }
  html body .site-nav > ul > li{
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
  }
  html body .site-nav a,
  html body .site-nav .submenu-toggle{
    color: #fff !important;
    text-align: right !important;
    padding: .95rem 1.6rem !important;
    font-size: 1.2rem !important;
  }
  html body .site-nav .submenu-toggle{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
  }
  html body .site-nav a:hover,
  html body .site-nav a.is-current{
    color: var(--accent-2) !important;
    background: rgba(255,255,255,.08) !important;
  }

  /* ---------- sous-menu ---------- */
  html body .site-nav .submenu{
    background: rgba(255,255,255,.07) !important;
  }
  html body .site-nav .submenu a{
    padding: .8rem 2.6rem .8rem 1.6rem !important;
    font-size: 1.02rem !important;
    opacity: .9;
  }
  html body .site-nav .submenu-caret{
    background: var(--accent-2) !important;   /* triangle clair sur fond bleu */
  }
  html body .site-nav .submenu-toggle[aria-expanded="true"] .submenu-caret{
    background: #FFD166 !important;
  }

  /* ---------- burger : transparent une fois ouvert ---------- */
  html body .site-header__burger[aria-expanded="true"]{
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .site-header__burger[aria-expanded="true"] span{
    background: #fff !important;
  }

  /* ---------- bloc social + légal ---------- */
  html body .site-nav .nav-social-block{
    text-align: right !important;
    padding: 1.5rem 1.6rem 2rem !important;
    border-top: none !important;
  }
  html body .site-nav .nav-social-cta{
    color: #fff !important;
    opacity: .9;
  }
  html body .site-nav .nav-socials{
    justify-content: flex-end !important;
    gap: .6rem !important;
  }
  html body .site-nav .nav-socials a{
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
  }
  html body .site-nav .nav-socials a svg,
  html body .site-nav .nav-socials a svg path{
    fill: #fff !important;
  }
  html body .site-nav .nav-socials a:hover{
    background: #fff !important;
  }
  html body .site-nav .nav-socials a:hover svg path{
    fill: var(--accent-1) !important;
  }
  html body .site-nav .nav-legal{
    color: rgba(255,255,255,.65) !important;
  }
  html body .site-nav .nav-legal strong{
    color: #FFD166 !important;
  }
}
@media (max-width: 900px){
  html body header.site-header:has(.site-header__burger[aria-expanded="true"])::after{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(8,65,92,.35);
    z-index: 99999;          /* sous le menu (100000), au-dessus de la page */
    animation: navScrimIn .4s ease both;
  }
}
@keyframes navScrimIn{ from{ opacity: 0 } to{ opacity: 1 } }
/* ============================================================
   MENU MOBILE v4 — panneau ajusté au contenu + courbe stable
   (à coller APRÈS le bloc v3)
   ============================================================ */
@media (max-width: 900px){

  /* ---------- 1. le panneau épouse son contenu ---------- */
  html body nav#primary-nav.site-nav{
    height: auto !important;
    max-height: 100dvh !important;
    bottom: auto !important;
    padding-bottom: 3rem !important;

    /* ← les deux curseurs de la courbe :
       1er = ampleur horizontale · 2e = profondeur verticale */
    border-bottom-left-radius: 65% 140px !important;
    border-bottom-right-radius: 28px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: 0 26px 60px rgba(8,65,92,.38) !important;
  }

  /* le cercle ne sert plus qu'à la révélation : il couvre tout */
  html body nav#primary-nav.site-nav.is-open{
    clip-path: circle(165% at calc(100% - 37px) 37px) !important;
    -webkit-clip-path: circle(165% at calc(100% - 37px) 37px) !important;
  }

  /* ---------- 2. sous-menu : tout en blanc ---------- */
  html body .site-nav .submenu-toggle,
  html body .site-nav .submenu-toggle:hover,
  html body .site-nav .submenu-toggle[aria-expanded="true"],
  html body .site-nav .submenu a,
  html body .site-nav .submenu a:visited{
    color: #fff !important;
  }
  html body .site-nav .submenu a:hover,
  html body .site-nav .submenu a.is-current{
    color: var(--accent-2) !important;
    background: rgba(255,255,255,.10) !important;
    padding-left: 1.6rem !important;   /* neutralise le décalage au survol */
  }

  /* ---------- 3. mentions légales en blanc ---------- */
  html body .site-nav .nav-legal strong{
    color: #fff !important;
    font-weight: 700 !important;
  }
}
/* ============================================================
   MENU MOBILE v5 — force couleur blanche sur toutes les pages
   Fix : sur les articles/ et pages inline, l'héritage color rendait
   les liens noirs. On force explicitement, spécificité max.
   ============================================================ */
@media (max-width: 900px){
  html body nav#primary-nav.site-nav a,
  html body nav#primary-nav.site-nav a:link,
  html body nav#primary-nav.site-nav a:visited,
  html body nav#primary-nav.site-nav a:hover,
  html body nav#primary-nav.site-nav a:active,
  html body nav#primary-nav.site-nav .submenu-toggle,
  html body nav#primary-nav.site-nav button,
  html body nav#primary-nav.site-nav li{
    color: #fff !important;
  }
  html body nav#primary-nav.site-nav a.is-current{
    color: var(--accent-2) !important;
  }
}
/* Burger : croix blanche même sur les articles */
@media (max-width: 900px){
  html body header.site-header .site-header__burger[aria-expanded="true"] span,
  html body #masthead.site-header .site-header__burger[aria-expanded="true"] span{
    background: #fff !important;
  }
}
/* ============================================================
   TITRES MOBILE v2 — normalisation + révélation premium
   (remplace le bloc « TITRES MOBILE » précédent)
   ============================================================ */
@media (max-width: 900px){

  /* ---------- 1. démontage de l'usine Bravada ---------- */
  html body .animated-title .cry-double,
  html body .bravada-title  .cry-double{ display: none !important; }

  html body .animated-title .cry-single,
  html body .bravada-title  .cry-single{
    position: static !important;
    opacity: 1 !important;
    color: inherit !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  html body .animated-title .caption-title-word > span,
  html body .bravada-title  .caption-title-word > span{
    display: inline !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  /* ---------- 2. typographie mobile assainie ---------- */
  html body .animated-title,
  html body .bravada-title{
    --rv-dur:  .8s;
    --rv-step: .075s;
    --rv-ease: cubic-bezier(.16, 1, .3, 1);   /* expo out : très posé */

    perspective: 900px;
    word-spacing: normal !important;   /* annule les -0.5em du desktop */
    letter-spacing: normal !important;
    hyphens: none;
    text-wrap: balance;                /* lignes équilibrées, zéro orphelin */
  }

  html body .animated-title .caption-title-word,
  html body .bravada-title  .caption-title-word{
    display: inline-block !important;
    transform-origin: 50% 100%;
    transition:
      opacity   calc(var(--rv-dur) * .65) var(--rv-ease),
      transform var(--rv-dur) var(--rv-ease),
      clip-path var(--rv-dur) var(--rv-ease);
  }

  /* l'espace inter-mots redevient du texte sécable */
  html body .animated-title .caption-title-word--space,
  html body .bravada-title  .caption-title-word--space{
    display: inline !important;
    font-size: inherit !important;
    letter-spacing: normal !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  /* ---------- 3. l'état caché ---------- */
  html.t-anim body .animated-title:not(.is-revealed) .caption-title-word:not(.caption-title-word--space),
  html.t-anim body .bravada-title:not(.is-revealed)  .caption-title-word:not(.caption-title-word--space){
    opacity: 0;
    transform: translate3d(0, .42em, 0) rotateX(26deg);
    clip-path: inset(-40% -14% 105% -14%);
  }

  /* ---------- 4. l'état révélé ---------- */
  html.t-anim body .animated-title.is-revealed .caption-title-word,
  html.t-anim body .bravada-title.is-revealed  .caption-title-word{
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0);
    clip-path: inset(-40% -14% -40% -14%);
  }

  /* ---------- 5. cascade ---------- */
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(1),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(1){ transition-delay: 0s; }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(2),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(2){ transition-delay: calc(var(--rv-step) * 1); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(3),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(3){ transition-delay: calc(var(--rv-step) * 2); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(4),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(4){ transition-delay: calc(var(--rv-step) * 3); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(5),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(5){ transition-delay: calc(var(--rv-step) * 4); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(6),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(6){ transition-delay: calc(var(--rv-step) * 5); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(7),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(7){ transition-delay: calc(var(--rv-step) * 6); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(8),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(8){ transition-delay: calc(var(--rv-step) * 7); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(n+9),
  html.t-anim body .bravada-title.is-revealed  .caption-title-word:nth-child(n+9){ transition-delay: calc(var(--rv-step) * 8); }

  @media (prefers-reduced-motion: reduce){
    html.t-anim body .animated-title .caption-title-word,
    html.t-anim body .bravada-title  .caption-title-word{
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
      transition: none !important;
    }
  }
}
/* ============================================================
   TITRES MOBILE v3 — taille uniforme + reveal + scramble bleu/noir
   (remplace TOUS les blocs « TITRES MOBILE » précédents)
   ============================================================ */
@media (max-width: 900px){

  :root{
    --t-size:  clamp(1.55rem, 6.2vw, 2rem);
    --t-lh:    1.16;
    --rv-dur:  .62s;
    --rv-step: .06s;
    --rv-ease: cubic-bezier(.16, 1, .3, 1);
  }

  /* ---------- 1. taille identique pour TOUS les titres Bravada ---------- */
  html body #bravada-story-title,
  html body #bravada-timeline-title,
  html body #bravada-video-title,
  html body #bravada-saybilan-title,
  html body #bravada-stats-title,
  html body #bravada-services-hero,
  html body #bravada-ov-title,
  html body #bravada-intro-title,
  html body #bravada-subjects-title,
  html body #bravada-manifesto-title,
  html body #bravada-investigations-title,
  html body #bravada-voices-title,
  html body #bravada-pitch-title,
  html body #bravada-videos-intro,
  html body #latest-title,
  html body #bravada-programmes-title,
  html body #bravada-news-title,
  html body #bravada-services-title,
  html body #bravada-portraits-title,
  html body .animated-title{
    font-size: var(--t-size) !important;
    line-height: var(--t-lh) !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    hyphens: none;
    text-wrap: balance;
  }
  html body .animated-title .caption-title-word,
  html body .animated-title .caption-title-word > span,
  html body .animated-title .cry-single,
  html body .animated-title .cry-double{
    font-size: inherit !important;
  }

  /* ---------- 2. démontage de l'usine Bravada ---------- */
  html body .animated-title .cry-double{ display: none !important; }

  html body .animated-title .cry-single{
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    /* pas de color ici : c'est le scramble (point 4) qui la pilote */
  }

  /* ---------- 3. révélation mot par mot ---------- */
  html body .animated-title .caption-title-word{
    display: inline-block !important;
    transition:
      opacity   calc(var(--rv-dur) * .8) var(--rv-ease),
      transform var(--rv-dur) var(--rv-ease);
  }
  html.t-anim body .animated-title:not(.is-revealed) .caption-title-word{
    opacity: 0;
    transform: translate3d(0, .4em, 0);
  }
  html.t-anim body .animated-title.is-revealed .caption-title-word{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(1){ transition-delay: 0s; }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(2){ transition-delay: calc(var(--rv-step) * 1); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(3){ transition-delay: calc(var(--rv-step) * 2); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(4){ transition-delay: calc(var(--rv-step) * 3); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(5){ transition-delay: calc(var(--rv-step) * 4); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(6){ transition-delay: calc(var(--rv-step) * 5); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(7){ transition-delay: calc(var(--rv-step) * 6); }
  html.t-anim body .animated-title.is-revealed .caption-title-word:nth-child(n+8){ transition-delay: calc(var(--rv-step) * 7); }

  html body .animated-title .caption-title-word--space{ display: inline !important; }

  /* ---------- 4. scramble bleu ↔ noir, lettre par lettre ---------- */
  html.t-anim body .animated-title .cry-single{
    color: var(--heading);
  }
  html.t-anim body .animated-title.is-revealed .caption-title-word .cry-single{
    animation: ttScramble .58s steps(1, end) both;
    animation-delay: var(--scr-delay, 0s);
  }
  @keyframes ttScramble{
    0%   { color: var(--accent-1); }
    14%  { color: var(--heading); }
    28%  { color: var(--accent-1); }
    42%  { color: var(--heading); }
    56%  { color: var(--accent-1); }
    70%  { color: var(--heading); }
    84%  { color: var(--accent-1); }
    100% { color: var(--heading); }
  }

  @media (prefers-reduced-motion: reduce){
    html.t-anim body .animated-title .caption-title-word{
      opacity: 1 !important; transform: none !important; transition: none !important;
    }
    html.t-anim body .animated-title .cry-single{
      animation: none !important; color: var(--heading) !important;
    }
  }
}
/* ============================================================
   FIX SCRAMBLE — lève le blocage laissé par le bloc
   « TITRES MOBILE v2 » (animation:none !important sur .cry-single)
   ============================================================ */
@media (max-width: 900px){
  html.t-anim body .animated-title .cry-single,
  html.t-anim body .bravada-title  .cry-single{
    animation: none !important;
    color: var(--heading) !important;
  }
  html.t-anim body .animated-title.is-revealed .caption-title-word .cry-single,
  html.t-anim body .bravada-title.is-revealed  .caption-title-word .cry-single{
    animation: ttScramble .58s steps(1, end) both !important;
    animation-delay: var(--scr-delay, 0s) !important;
  }
}
/* ============================================================
   STEP 3.2 — FADE-IN MOBILE (remplace le scramble color)
   Décision : animation color mobile abandonnée (conflits historiques
   avec les kill-switches STEP 3.1 / FIX MOBILE DÉFINITIF).
   Effet retenu : fade-in doux lettre par lettre, reste en noir.
   ============================================================ */
@media (max-width: 720px){
  html body .animated-title{
    perspective: none !important;
    transform-style: flat !important;
  }
  html.t-anim body .animated-title:not(.is-revealed) .caption-title-word span.cry-single{
    opacity: 0 !important;
  }
  html.t-anim body .animated-title.is-revealed .caption-title-word span.cry-single{
    opacity: 1 !important;
    transition: opacity .6s ease var(--scr-delay, 0s) !important;
  }
}
/* ============================================================
   PERF — content-visibility sur sections hors flottaison mobile
   Skip le rendu des sections non visibles → gain scroll + CPU
   ============================================================ */
@media (max-width: 900px){
  .programmes,
  .praise,
  .bilan-news,
  .latest,
  .home-services,
  .article-related,
  .press-strip,
  .pre-footer,
  .site-footer{
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}
/* ============================================================
   FIX latest-news — bande bleue parasite en haut mobile
   Le padding-top: 72px codé en dur laisse voir le fond bleu de
   .ln-bands entre le header (110px) et le contenu. On utilise
   la vraie hauteur du header via --header-h.
   ============================================================ */
@media (max-width: 900px){
  html body main#main > section.ln-bands:first-of-type{
    padding-top: 0 !important;
  }
}
/* ============================================================
   FIX about.html mobile — voile blanchâtre + vidéo trop petite
   ============================================================ */
@media (max-width: 720px){

  /* 1. Suppression du backdrop-filter qui crée le voile blanc au scroll
     + fond opaque pour compenser la transparence perdue */
  html body .about-mv__card{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.10) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;

  }

  /* 2. Vidéo "where it leads" — pleine largeur mobile */
  html body .about-video__frame{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
  }
  html body section.about-video{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .about-video__head{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  html body .about-video video{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    display: block;
  }
}
/* ============================================================
   P6 — praise3d mobile : sacrifie le 3D pour la lisibilité
   - Retire les transforms 3D, opacity 0 et positionnement absolu
   - Layout vertical simple : 1 carte visible, scroll natif
   - Image entière visible (object-fit: contain au lieu de cover)
   ============================================================ */
@media (max-width: 720px){

  /* 1. Le stage retrouve un flux normal */
  html body .praise3d{
    perspective: none !important;
    transform-style: flat !important;
  }
  html body .praise3d__stage{
    height: auto !important;
    min-height: 0 !important;
    perspective: none !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* 2. Track = liste verticale scrollable horizontalement */
  html body .praise3d__track{
    position: static !important;
    transform: none !important;
    transform-style: flat !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 1rem !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: none;
  }
  html body .praise3d__track::-webkit-scrollbar{ display: none; }

  /* 3. Chaque carte : pleine largeur, opaque, sans rotation */
  html body .praise3d__card{
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    flex: 0 0 88% !important;
    width: 88% !important;
    max-width: 88% !important;
    height: auto !important;
    min-height: 0 !important;
    scroll-snap-align: center !important;
    animation: none !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(8,65,92,.10) !important;
    overflow: hidden !important;
  }

  /* 4. Layout interne : image en haut, texte en dessous */
  html body .praise3d__card > figure,
  html body .praise3d__card > *{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    margin: 0 !important;
  }
  html body .praise3d__media{
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    background: #f4f6f8 !important;
  }
  html body .praise3d__media img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    object-fit: contain !important;   /* image entière visible, pas de coupure */
    object-position: center !important;
  }
  html body .praise3d__card blockquote{
    padding: 1rem 1.1rem 1.2rem !important;
    margin: 0 !important;
  }
  html body .praise3d__card blockquote p{
    font-size: .95rem !important;
    line-height: 1.5 !important;
  }

  /* 5. Cache les flèches de navigation 3D (inutiles en scroll natif) */
  html body .praise3d__nav{ display: none !important; }

  /* 6. Cache aussi les points, non synchronisés avec le scroll natif */
  html body .praise3d__dots{ display: none !important; }
}
/* FIX — padding vertical excessif sur mobile (Vague 2) */
@media (max-width: 720px){
  .wmc-portraits,
  .bt-investigations{
    padding: 3rem 0 !important;
  }
}
/* ============================================================
   TÂCHE B+ — .page-intro : animation + typographie unifiée
   Calquée sur le lede d'Our Videos (.ov-intro__lede), légèrement
   agrandie. S'applique uniquement au paragraphe/bloc portant la
   classe .page-intro sur chaque page, jamais aux paragraphes
   suivants qui restent en typographie propre à la page.
   ============================================================ */
.page-intro{
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;

  font-family: var(--ff-editorial) !important;
  font-style: italic !important;
  color: var(--accent-1) !important;
  font-size: clamp(1.32rem, 1.7vw, 1.48rem) !important;
  line-height: 1.85 !important;
}
.page-intro.is-visible{ opacity: 1; transform: translateY(0); }

/* Neutralise toute lettrine (::first-letter) héritée du style
   propre à la page — Our Videos n'en a pas, on s'y aligne */
.page-intro::first-letter{
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
  float: none !important;
  padding: 0 !important;
  line-height: inherit !important;
  text-shadow: none !important;
}

@media (prefers-reduced-motion: reduce){
  .page-intro{ opacity: 1 !important; transform: none !important; }
}
/* ============================================================
   BRAVADA MOBILE SCRAMBLE — "document déclassifié" (alternance)
   Les mots en position impaire (1, 3, 5…) démarrent caviardés
   par une barre noire pulsée en bleu ; les mots en position
   paire restent visibles dès le départ. Sur un titre à 2 mots,
   le mot caviardé alterne à chaque déclenchement.
   Puis les mots caviardés se dissolvent et rejoignent un
   scramble bleu/[couleur finale] (anime.js) qui se stabilise.

   La couleur finale est pilotée par --bravada-ink (défaut :
   var(--heading)) pour permettre aux pages à fond sombre —
   les articles — de la surcharger en blanc.
   ============================================================ */
@media (max-width: 900px){

  /* --- Mots visibles depuis le départ (jamais cachés) --- */
  html body .animated-title .bravada-plain-word{
    color: var(--bravada-ink, var(--heading, #162521)) !important;
  }

  /* --- Mots censurés (phase 1) --- */
  html body .animated-title .bravada-redact-bar{
    background: #0c0c0c !important;
    color: transparent !important;
    border-radius: 3px;
    padding: 0 .12em;
    box-shadow: 0 0 0 1px rgba(20,112,175,.25);
    animation: bravadaRedactPulse 850ms ease-in-out both;
    transition: opacity 220ms ease;
  }

  /* --- Transition : dissolution de la barre avant le scramble --- */
  html body .animated-title.is-releasing .bravada-redact-bar{
    opacity: 0 !important;
  }

  /* --- Phase 2 : scramble bleu/[couleur finale] sur les mots libérés --- */
  html body .animated-title .bravada-scramble-word.is-scrambling{
    animation: bravadaScrambleFlicker 1900ms steps(1, end) both !important;
  }
  html body .animated-title .bravada-scramble-word.is-scrambled{
    color: var(--bravada-ink, var(--heading, #162521)) !important;
    animation: none !important;
  }
}

@keyframes bravadaRedactPulse{
  0%   { box-shadow: 0 0 0 1px rgba(20,112,175,.15); }
  50%  { box-shadow: 0 0 16px 3px rgba(20,112,175,.55); }
  100% { box-shadow: 0 0 0 1px rgba(20,112,175,.15); }
}

@keyframes bravadaScrambleFlicker{
  0%   { color: var(--bravada-ink, var(--heading, #162521)); }
  8%   { color: var(--bravada-accent, var(--accent-1, #1470af)); }
  16%  { color: var(--bravada-ink, var(--heading, #162521)); }
  24%  { color: var(--bravada-accent, var(--accent-1, #1470af)); }
  32%  { color: var(--bravada-ink, var(--heading, #162521)); }
  40%  { color: var(--bravada-accent, var(--accent-1, #1470af)); }
  48%  { color: var(--bravada-ink, var(--heading, #162521)); }
  56%  { color: var(--bravada-accent, var(--accent-1, #1470af)); }
  64%  { color: var(--bravada-ink, var(--heading, #162521)); }
  72%  { color: var(--bravada-accent, var(--accent-1, #1470af)); }
  80%  { color: var(--bravada-ink, var(--heading, #162521)); }
  88%  { color: var(--bravada-accent, var(--accent-1, #1470af)); }
  100% { color: var(--bravada-ink, var(--heading, #162521)); }
}

@media (prefers-reduced-motion: reduce){
  html body .animated-title .bravada-redact-bar{
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--bravada-ink, var(--heading, #162521)) !important;
  }
  html body .animated-title .bravada-scramble-word.is-scrambling{
    animation: none !important;
    color: var(--bravada-ink, var(--heading, #162521)) !important;
  }
}

/* ============================================================
   FIX ARTICLES — titre Bravada mobile blanc sur les pages
   d'articles, où le fond est une image sombre avec voile.
   Cette règle ne touche que .article-hero__title, donc aucune
   autre page (fond clair) n'est affectée.
   ============================================================ */
@media (max-width: 900px){
  html body .article-hero__title.animated-title{
    --bravada-ink: #ffffff;
    --bravada-accent: var(--accent-2, #8eb6dc);
  }
}

/* Supprime le trait bleu courbé (accolade) en haut du sous-menu "Our sections" */
html body .site-nav .submenu{
  border-top: 0 !important;
}
/* ============================================================
   FIX contact.html mobile — voile blanchâtre sur les cartes
   "Editorial" / "Newsroom" (.ct-coord), même cause que le P7
   sur about.html (.about-mv__card)
   ============================================================ */
@media (max-width: 720px){
  html body .ct-coord{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }
}
/* ============================================================
   LANG SWITCH — capsule premium EN / SO
   Injectée par app.js, indépendante du markup du header
   ============================================================ */
.lang-switch{
  position: fixed;
  top: 16px;
  right: 78px;
  z-index: 100050;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 10px 28px rgba(8,65,92,.20),
    inset 0 0 0 1px rgba(20,112,175,.16);
  font-family: 'Roboto', system-ui, sans-serif;
  opacity: 0;
  animation: langSwitchIn .6s cubic-bezier(.2,.7,.2,1) .3s forwards;
}
@keyframes langSwitchIn{
  from{ opacity: 0; transform: translateY(-8px) scale(.92); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}

.lang-switch__thumb{
  position: absolute;
  top: 4px; left: 4px;
  width: 38px;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-1,#1470af), var(--accent-1-dark,#0f5a8a));
  box-shadow: 0 4px 14px rgba(20,112,175,.45);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  z-index: 0;
}
.lang-switch__thumb[data-pos="so"]{ transform: translateX(38px); }

.lang-switch__opt{
  position: relative;
  z-index: 1;
  width: 38px;
  text-align: center;
  padding: .5rem 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--heading,#162521);
  text-decoration: none;
  border-radius: 999px;
  transition: color .3s ease;
}
.lang-switch__opt.is-active{ color: #fff; }
.lang-switch__opt:not(.is-active):hover{ color: var(--accent-1,#1470af); }

/* Masqué pendant que le menu mobile plein écran est ouvert */
body:has(#primary-nav.is-open) .lang-switch{
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity .2s ease;
}

@media (max-width: 720px){
  .lang-switch{ top: 14px; right: 68px; padding: 3px; }
  .lang-switch__thumb{ width: 32px; }
  .lang-switch__thumb[data-pos="so"]{ transform: translateX(32px); }
  .lang-switch__opt{ width: 32px; font-size: .66rem; padding: .42rem 0; }
}

@media (prefers-reduced-motion: reduce){
  .lang-switch{ animation: none !important; opacity: 1; }
  .lang-switch__thumb{ transition: none !important; }
}
/* ============================================================
   AJUSTEMENT — décale le bloc logo + menu légèrement à gauche
   (desktop uniquement ; le bouton EN/SO reste fixe, il n'est
   pas concerné par ce bloc)
   ============================================================ */
@media (min-width: 901px){
  :root{ --header-shift: 56px; }  /* ← seule valeur à changer pour ajuster */

  .site-header__logo{
    left: calc(1.5rem - var(--header-shift));
  }
  .site-header__inner > .site-nav,
  .site-header__inner > .site-header__burger{
    margin-left: calc(380px - var(--header-shift));
  }
}
@media (min-width: 901px) and (max-width: 1200px){
  .site-header__inner > .site-nav,
  .site-header__inner > .site-header__burger{
    margin-left: calc(220px - var(--header-shift, 24px));
  }
}
/* ============================================================
   FIX — le gap flex hérité de l'ancien hero (.animated-title)
   imposait un espacement minimum entre chaque mot, quelle que
   soit la taille du mot-espace factice. On le neutralise :
   c'est désormais .caption-title-word--space qui pilote
   entièrement l'écart entre les mots.
   ============================================================ */
.animated-title{
  gap: 0 !important;
}
/* ============================================================
   BRAVADA — SYSTÈME UNIQUE (remplace STEP 6, 6.1, 10, 12, 13
   et les systèmes morts .letter / .bravada-title / .letter-wrapper)
   ============================================================ */
:root{
  --bravada-space-size: .35em;   /* largeur du "mot-espace" entre deux mots */
}

.animated-title{
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  line-height: 1.1;
  color: var(--dark-text);
}

.animated-title .caption-title-word{
  display: inline-block;
  font-style: normal;
  white-space: nowrap;
}
.animated-title .caption-title-word--space{
  font-size: inherit !important;
  letter-spacing: normal !important;
  display: inline-block;
  width: var(--bravada-space-size) !important;
  overflow: hidden;
}
.animated-title .caption-title-word--space{
  font-size: inherit !important;
  letter-spacing: normal !important;
  display: inline-block;
  width: var(--bravada-space-size) !important;
  overflow: hidden;
}
h2#bravada-programmes-title.animated-title .caption-title-word--space,
h2#bravada-praise-title.animated-title .caption-title-word--space{
  font-size: inherit !important;
  letter-spacing: normal !important;
}
.animated-title .caption-title-word > span{
  position: relative;
  display: inline-block;
  line-height: 1.2;
  opacity: 0;
  animation: showwords 2.5s ease forwards;
}
.animated-title .caption-title-word > span:nth-child(2n){ animation-duration: .4s; }
.animated-title .caption-title-word > span:nth-child(3n){ animation-duration: 2.8s; }
.animated-title .caption-title-word > span:nth-child(4n){ animation-duration: .8s; }
.animated-title .caption-title-word > span:nth-child(5n){ animation-duration: 3.6s; }
.animated-title .caption-title-word > span:nth-child(6n){ animation-duration: 1.6s; }
.animated-title .caption-title-word > span:nth-child(7n){ animation-duration: 3.2s; }
.animated-title .caption-title-word > span:nth-child(8n){ animation-duration: 2s; }
.animated-title .caption-title-word > span:nth-child(9n){ animation-duration: 2.8s; }

@keyframes showwords { to { opacity: 1; } }

.animated-title .caption-title-word span.cry-single{
  position: relative; display: inline-block; color: var(--dark-text);
  transition: color .5s ease-out; will-change: transform, opacity, color;
}
.animated-title .caption-title-word span.cry-double{
  position: absolute; top: 0; left: 0; opacity: 0; display: inline-block;
  transition: color .5s ease-out; will-change: transform, opacity, color;
}

.animated-title .caption-title-word > span:nth-child(n)  span.cry-single.animated-letter{
  animation: 1.5s .25s animation-slideLeftHide ease-in-out forwards;
}
.animated-title .caption-title-word > span:nth-child(2n) span.cry-single.animated-letter{
  animation: 1.5s .25s animation-slideRightHide ease-in-out forwards;
}
.animated-title .caption-title-word > span:nth-child(n)  span.cry-double.animated-letter{
  animation: 1s animation-slideRightShow ease-in-out forwards;
}
.animated-title .caption-title-word > span:nth-child(2n) span.cry-double.animated-letter{
  animation: 1s animation-slideLeftShow ease-in-out forwards;
}
/* couleur unique bleu foncé pour toutes les doubles animées, sans exception par ID */
.animated-title .caption-title-word span.cry-double.animated-letter{ color: var(--blue); }

@keyframes animation-slideRightShow{ from{opacity:0;transform:translateX(150%);} to{opacity:1;transform:translateX(0);} }
@keyframes animation-slideRightHide{ from{opacity:1;transform:translateX(0);} to{opacity:0;transform:translateX(150%);} }
@keyframes animation-slideLeftHide { from{opacity:1;transform:translateX(0);} to{opacity:0;transform:translateX(-150%);} }
@keyframes animation-slideLeftShow { from{opacity:0;transform:translateX(-150%);} to{opacity:1;transform:translateX(0);} }

@media (max-width: 720px){
  .animated-title .caption-title-word span.cry-single{ color: var(--dark-text) !important; opacity: 1 !important; }
  .animated-title .caption-title-word span.cry-double{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .animated-title .caption-title-word > span,
  .animated-title .caption-title-word span.cry-single,
  .animated-title .caption-title-word span.cry-double{ animation: none !important; opacity: 1 !important; }
  .animated-title .caption-title-word span.cry-double{ display: none; }
}
#bravada-news-title.animated-title{
  font-style: normal; font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  max-width: 32ch; margin: 0 auto 1.25rem; text-align: center;
}

#bravada-sub-title.animated-title,
#bravada-below.animated-title{
  font-style: italic; font-weight: 700; font-size: 1.3rem;
  max-width: 60ch; margin: 0 auto; text-align: center;
}
#bravada-programmes-title.animated-title,
#bravada-praise-title.animated-title{
  font-style: normal; font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  margin: 0 auto 1.25rem; text-align: center;
}
.bilan-news__hint{
  margin-top: 1.5rem; /* ajustez selon l'espace souhaité */
}
/* ============================================================
   SCROLL — le switcher de langue et le burger restent en haut
   de la PAGE et défilent avec elle (au lieu de suivre l'écran)
   DOIT RESTER EN TOUT DERNIER DANS LE FICHIER
   ============================================================ */

/* 1. Capsule EN / SO
   Elle est injectée dans <body>, qui est déjà en position:relative
   (verrou anti-débordement) : l'absolu se cale donc sur le haut de page. */
.lang-switch{
  position: absolute !important;
  top: 16px !important;
  right: 78px !important;
}
@media (max-width: 720px){
  .lang-switch{
    top: 14px !important;
    right: 68px !important;
  }
}

/* 2. Burger mobile — absolu dans le header (qui est déjà en absolute) */
@media (max-width: 900px){
  html body .site-header__burger{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* Exception : menu OUVERT → le X redevient fixe pour rester
     visible par-dessus le panneau plein écran */
  html body .site-header__burger[aria-expanded="true"]{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
  }
}
html[lang="so"] .animated-title{ font-size: clamp(1.6rem, 3.6vw, 2.9rem); }
html[lang="so"] .animated-title .caption-title-word{ white-space: normal; }


/* Correctif espace entre mots — titres animés cassés */
.title-space-fix .caption-title-word:not(:last-child)::after{
  content: "\00a0";
  display: inline;
}
/* ============================================================
   FIX DÉFINITIF — supprime l'espace fantôme entre les lettres
   du titre Bravada, causé par les retours à la ligne / l'indentation
   entre chaque <span> lettre à l'intérieur de .caption-title-word
   ============================================================ */
.animated-title .caption-title-word{
  display: inline-flex !important;   /* au lieu de inline-block */
  align-items: baseline !important;  /* conserve l'alignement typographique */
  white-space: nowrap;
}
.animated-title .caption-title-word > span{
  display: inline-block;  /* inchangé : devient simplement un flex item */
}
/* ============================================================
   PRAISE3D — visibilité des cartes (remplace l'ancien fix :has)
   ============================================================ */

/* Desktop : le JS masque les cartes hors du rayon d'affichage */
.praise3d__card.is-p3d-hidden{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Clones résiduels d'une ancienne version du script */
.praise3d__track > [data-p3d-clone],
.praise3d__track > .praise3d__card[aria-hidden="true"]{
  display: none !important;
}

/* Mobile : la piste devient un scroller natif -> tout est visible */
@media (max-width: 720px){
  html body .praise3d__card,
  html body .praise3d__card.is-p3d-hidden{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
/* ============================================================
   PRAISE3D FORMER — 2 cartes côte à côte en statique (desktop)
   ============================================================ */
@media (min-width: 721px){
  #praise3d-former .praise3d__track{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(16px, 3vw, 40px);
    height: auto;
    min-height: 0;
    perspective: none;
    transform-style: flat;
  }

  #praise3d-former .praise3d__card{
    /* neutralise les variables posées en inline par le JS */
    --x: 0px !important;
    --z: 0px !important;
    --ry: 0deg !important;
    --op: 1 !important;
    --pe: auto !important;
    --zi: auto !important;
    --br: 0px !important;
    --sat: 1 !important;

    position: relative;
    left: auto; top: auto; right: auto; bottom: auto;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: none !important;
    z-index: auto !important;
    margin: 0;
    flex: 0 1 clamp(280px, 32vw, 420px);
  }

  /* navigation inutile quand tout est visible */
  #praise3d-former .praise3d__nav,
  #praise3d-former .praise3d__nav--prev,
  #praise3d-former .praise3d__nav--next,
  #praise3d-former .praise3d__dots{ display: none !important; }
}
/* ============================================================
   LOGO v4 — SVG recadre (viewBox 850 548 862 344, ratio 2.5:1)
   Desktop : 72px de haut = 180px de large
   Mobile  : 52px de haut = 130px de large
   Annule TOUS les blocs logo anterieurs.
   DOIT RESTER LE DERNIER BLOC DU FICHIER.
   ============================================================ */
html body .site-header__logo img,
html body .site-header[data-theme="solid"] .site-header__logo img{
  height: 72px !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.12)) !important;
}

@media (min-width: 901px){
  :root{ --header-h: 100px; }

  html body .site-header__inner{
    min-height: 100px !important;
    overflow: visible !important;
  }
  html body .site-header__logo{
    position: absolute !important;
    left: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
  }
  html body .site-header__inner > .site-nav,
  html body .site-header__inner > .site-header__burger{
    margin-left: 215px !important;
  }
}

@media (max-width: 900px){
  :root{ --header-h: 76px; }

  html body .site-header__inner{
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 1rem !important;
    overflow: visible !important;
  }
  html body .site-header__logo{
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    overflow: visible !important;
    max-width: calc(100vw - 150px) !important;
  }
  html body .site-header__logo img,
  html body .site-header[data-theme="solid"] .site-header__logo img{
    height: 52px !important;
  }
}