/* ===============================
   RIVE JAZZY — app.css
   =============================== */

/* ---------- Thème (variables) ---------- */
:root{
  --brand:#1e2040;
  --text:#191a22;
  --paper:#fff;
  --muted:#8a8fa3;
  --gold:#edd385;
  --ok:#198754;
  --warn:#e7a100;
  --danger:#c7363e;

  /* Hauteurs / mesures communes */
  --topbar-h:76px;
}
:root { color-scheme: light dark; }

/* ---------- Reset léger ---------- */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:#f7f8fb;color:var(--text);
  font:16px/1.5 'Roboto Condensed',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid #6aa6ff;outline-offset:2px}
a:focus-visible{text-decoration:underline}
.no-scroll{overflow:hidden}

/* ===============================
   TOPBAR (générique)
   =============================== */
.topbar{
  position:sticky; top:0; z-index:2000;
  background:var(--brand);
  color:#fff;
}
.topbar__rail{
  display:grid;
  grid-template-columns:minmax(96px,1fr) auto minmax(96px,1fr);
  align-items:center; gap:.5rem;
  min-height:var(--topbar-h);
  padding:max(10px, env(safe-area-inset-top)) 16px 10px;
}
.topbar__group{display:flex;align-items:center;gap:.75rem}
.topbar__group.left{justify-self:start}
.topbar__group.right{justify-self:end}

/* Hide-on-scroll (géré par JS) */
.topbar--hidden{
  transform:translateY(calc(-100% - env(safe-area-inset-top)));
  transition:transform .25s ease;
}

/* Compact (pages non-overlay) : blur léger et fond translucide */
.topbar--compact{
  background:rgba(255,255,255,.75);
  color:var(--brand);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(30,32,64,.08);
}
.topbar--compact .topbar__rail{
  min-height:56px;
  padding:max(6px, env(safe-area-inset-top)) 12px 6px;
  transition:min-height .2s ease, padding .2s ease;
}
.topbar--compact .brand .logo-svg{width:150px;max-width:46vw;transform:scale(.94);opacity:.96}
.topbar--compact .icon-btn--white{background:#fff;border-color:#e8e8ef}
.topbar--compact .icon-btn--white .icon{stroke:#1e2040;fill:#1e2040}
.topbar--compact .hamburger i{color:var(--brand)!important}

/* ===== Overlay (Home) — anti-glitch =====
   - barre FIXE et 100% transparente au sommet
   - aucun blur ni transform (évite le clignotement)
   - quand .topbar--compact est ajouté (sous le hero, en remontant),
     on affiche un voile via ::after (pas de blur)                */
.topbar--overlay{
  position:fixed; top:0; left:0; right:0; z-index:2000;
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  transform:none !important;
  transition:none !important;
  isolation:isolate;
}
.topbar--overlay::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:rgba(255,255,255,.78); /* rendu clair sous le hero */
  opacity:0; transition:opacity .22s ease; will-change:opacity;
}
.topbar--overlay.topbar--compact::after{ opacity:1; }
[data-bs-theme="dark"] .topbar--overlay::after{
  background:rgba(16,18,36,.82);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

/* ===============================
   HERO
   =============================== */
.hero{
  padding:64px 16px;
  color:#fff;
  text-align:center;
}
.hero h1{margin:0 0 .5rem;font-family:'Comfortaa',system-ui,sans-serif}

/* Hero image qui passe sous la topbar */
.hero--image{
  position:relative;
  margin-top:calc(-1 * var(--topbar-h));
  padding-top:calc(64px + var(--topbar-h));
  padding-bottom:48px;
  min-height:64vh;
  background:
    linear-gradient(to bottom, rgba(17,20,51,.65), rgba(17,20,51,.28)),
    var(--hero-img, none) center/cover no-repeat;
  color:#fff; text-align:center;
  contain:paint;       /* limite les recompositions */
}
.hero--image h1{ margin:0 0 .5rem }

/* Variante home (image définie en CSS) */
.hero--home{
  --hero-img: url('img/home2025_bg.webp');
}

/* Fond bleu pour les pages SANS image */
.hero:not(.hero--image){ background:#111433; }

/* En overlay, on neutralise le margin -top et on ajoute un voile
   dans le hero (pas sur la barre) pour une lecture stable */
.topbar--overlay + .hero--image{
  margin-top:0;
  padding-top:calc(64px + var(--topbar-h));
  z-index:0;
}
.topbar--overlay + .hero--image::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:calc(var(--topbar-h) + 24px);
  background:linear-gradient(to bottom,
    rgba(17,20,51,.85) 0%,
    rgba(17,20,51,.45) 60%,
    rgba(17,20,51,0) 100%);
  pointer-events:none;
  z-index:1;
}
[data-bs-theme="dark"] .topbar--overlay + .hero--image::before{
  background:linear-gradient(to bottom,
    rgba(16,18,36,.88) 0%,
    rgba(16,18,36,.50) 60%,
    rgba(16,18,36,0) 100%);
}
/* contenu du hero au-dessus du voile */
.topbar--overlay + .hero--image > *{ position:relative; z-index:2; }

/* ===============================
   BOUTONS / CONTAINER
   =============================== */
.btn-primary{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#2b2f63;color:#fff;
  padding:.6rem 1rem;border-radius:12px
}
.btn-primary:hover{background:#353a7a}
.container{max-width:1100px;margin:32px auto;padding:0 16px}

/* ===============================
   LOGO / ICONES
   =============================== */
.brand{justify-self:center;display:inline-block;line-height:0}
.brand .logo-svg{
  display:block;height:auto;width:200px;max-width:58vw;
  transition:width .2s ease, opacity .25s ease, transform .25s ease;
}
.brand .logo-svg *{fill:currentColor}
@media (prefers-reduced-motion: reduce){ .brand .logo-svg{transition:none} }

/* Boutons ronds blancs */
.icon-btn--white{
  width:44px;height:44px;border-radius:999px;
  background:#fff;border:2px solid #fff;
  display:inline-grid;place-items:center;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.icon-btn--white:active{transform:scale(.95)}
.icon-btn--white:hover{box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.icon-btn--white .icon{stroke:#1e2040;fill:#1e2040}

/* Hamburger */
.hamburger{
  width:44px;height:44px;border-radius:999px;
  background:#fff;border:2px solid #fff;
  display:inline-grid;place-items:center;cursor:pointer;
}
.hamburger i{font-size:18px;color:#1e2040}

/* ===============================
   LANG POPOVER
   =============================== */
.lang-popover{
  position:fixed; inset-inline-start:0; top:0; z-index:2100;
  padding:.5rem 0; background:transparent;
  visibility:hidden; opacity:0; transform:translateY(-4px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.lang-popover.is-open{ visibility:visible; opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.lang-list{
  list-style:none; margin:0; padding:.25rem 0;
  display:flex; flex-direction:column; gap:1.25rem; align-items:center;
}
.lang-chip{
  --rj-blue:#1e2040;
  display:inline-grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  background:#fff;color:var(--rj-blue);
  border:2px solid var(--rj-blue);
  font-weight:700;letter-spacing:.02em;font-size:1rem;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
}
.lang-chip:hover,.lang-chip:focus-visible{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.2); outline:none; }
.lang-chip.is-active{background:#8a8fa3;color:#fff}
@media (max-width:420px){ .lang-chip{width:84px;height:84px;font-size:1.75rem} }

/* ===============================
   DRAWER (générique) + underbar
   =============================== */
.drawer{
  background:#0f1130; color:#fff;
  border-top:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  max-height:0; opacity:0; transform:translateY(-8px);
  transition:max-height .35s ease, opacity .25s ease, transform .35s ease;
  will-change:max-height,opacity,transform;
  z-index:2100;
}
@media (prefers-reduced-motion: reduce){ .drawer{transition:none} }
.drawer.is-open{opacity:1;transform:translateY(0)}
.drawer__list{list-style:none;margin:0;padding:10px 16px;display:grid;gap:10px}
.drawer__list a{display:block;padding:12px 10px;border-radius:12px;background:#17193e}
.drawer__list a:hover{background:#20235a}
.drawer__langs{display:flex;gap:.5rem;align-items:center;padding:6px 10px}
.drawer__langs a{padding:6px 10px;border-radius:999px;background:#20235a}
.drawer__langs a.active{background:#2c307c}

/* Sous-topbar (sections) */
.drawer--underbar{
  background:#5b5e73; color:#fff; border-top:none;
  padding:0 24px;
  transition:max-height .45s ease, opacity .30s ease, transform .35s ease, padding-top .35s ease, padding-bottom .35s ease;
}
.drawer--underbar.is-open{padding-top:40px;padding-bottom:64px}

.menu-sections{ max-width:920px;margin:0 auto; display:flex;flex-direction:column;gap:48px; }
.menu-title{
  font-weight:800; font-size:clamp(14px,3.4vw,20px);
  text-transform:uppercase; margin:0 0 12px 0; letter-spacing:.5px;
}
.menu-links{list-style:none;margin:0;padding:0}
.menu-links li{margin:0}
.menu-links a{
  display:inline-block;color:#fff;text-decoration:none;text-transform:uppercase;
  font-weight:700; font-size:clamp(9px,2.5vw,14px); line-height:1.15; padding:4px 0;
}
.menu-links a:hover,.menu-links a:focus{text-decoration:underline}

/* ===============================
   ALERTES
   =============================== */
.alert{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem 1rem;
  border-top:1px solid rgba(0,0,0,.05);
  border-bottom:1px solid rgba(0,0,0,.05);
  background:var(--gold); color:#241f0e;
  font-weight:600; letter-spacing:.02em; text-transform:uppercase;
}
.alert--info{background:#e9f3ff;color:#0b3a6e}
.alert--warning{background:#fff4da;color:#6a4c00}
.alert--danger{background:#ffe9ea;color:#6a0b12}

/* ===============================
   FOOTER + WAVES
   =============================== */
#site-footer{background:#1e2040;color:#fff;border:0}
.footer-surface{background:#0f1130;color:#fff;padding:32px 0 48px}

.flex{display:flex;justify-content:center;align-items:center;text-align:center}
.waves{
  position:relative;width:100%;
  height:15vh;margin-bottom:-7px; /* fix Safari gap */
  min-height:100px;max-height:150px;
}
.parallax > use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}
.parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s}
.parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s}
.parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s}
.parallax > use:nth-child(4){animation-delay:-5s;animation-duration:20s}
@keyframes move-forever{ 0%{transform:translate3d(-90px,0,0)} 100%{transform:translate3d(85px,0,0)} }
@media (max-width:768px){ .waves{height:40px;min-height:40px} }

/* Grille logos partenaires */
.partner-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px 32px;align-items:stretch;justify-items:center;
}
@media (min-width:992px){.partner-grid{grid-template-columns:repeat(4,1fr)}}
.partner{
  display:flex;align-items:center;justify-content:center;
  height:110px;padding:10px 12px;text-decoration:none;
}
.partner img{
  max-height:58px;max-width:190px;width:auto;height:auto;object-fit:contain;opacity:.96;
  transition:transform .15s ease, opacity .15s ease;
}
.partner:hover img{transform:scale(1.03);opacity:1}
@media (min-width:1200px){.partner-grid{column-gap:48px;row-gap:32px}}

/* ===== Footer polish / toolbar / sociaux / légaux ===== */
.rj-minilogo{height:28px;width:auto;display:block}
.footer-toolbar{padding-block:.5rem;border-top:1px solid rgba(255,255,255,.06)}
@media (min-width:992px){.footer-toolbar{padding-block:.75rem}}

.rj-theme-switch .btn{
  --bs-btn-border-color: rgba(255,255,255,.45);
  --bs-btn-color:#fff;
  --bs-btn-hover-border-color: rgba(255,255,255,.7);
}
.rj-theme-switch .btn.active,
.rj-theme-switch .btn[aria-pressed="true"]{
  --bs-btn-bg: rgba(255,255,255,.12);
  --bs-btn-border-color: rgba(255,255,255,.9);
}

.rj-social__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(255,255,255,.8);
  color:#fff;text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.rj-social__btn:hover{transform:translateY(-2px);border-color:#fff;color:#fff}
.rj-legal .list-inline-item a{text-decoration:none}
.rj-legal .list-inline-item a:hover{text-decoration:underline}

/* ===============================
   Bouton back-to-top (CSP OK)
   =============================== */
.rj-backtotop{
  position:fixed; right:1rem; bottom:1.5rem;
  width:48px; height:48px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; transform:translateY(6px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  z-index:2300;
}
.rj-backtotop.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.rj-backtotop:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ===============================
   DARK MODE
   =============================== */
[data-bs-theme="dark"]{
  --brand:#14162a;
  --text:#e5e7ef;
  --paper:#0f1130;
  --muted:#9aa0b8;
  --gold:#e7cf85;
}
[data-bs-theme="dark"] body{background:#0b0d20;color:var(--text)}
[data-bs-theme="dark"] a{color:#e5e7ef}
[data-bs-theme="dark"] .topbar{background:var(--brand);color:#fff}
[data-bs-theme="dark"] .drawer{background:#0f1130}
[data-bs-theme="dark"] .drawer--underbar{background:#5b5e73;color:#fff}
[data-bs-theme="dark"] .topbar--compact{
  background:rgba(16,18,36,.72);color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
}
[data-bs-theme="dark"] .topbar--compact .icon-btn--white{
  background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.25);
}
[data-bs-theme="dark"] .topbar--compact .hamburger i{color:#1e2040!important}

/* ===============================
   Responsive finetuning
   =============================== */
@media (max-width:640px){
  .icon-btn--white{width:40px;height:40px}
  .brand .logo-svg{width:160px;max-width:52vw}
  .topbar__rail{
    min-height:64px;
    padding:max(8px, env(safe-area-inset-top)) 12px 8px;
    grid-template-columns:minmax(88px,1fr) auto minmax(88px,1fr);
    gap:.5rem;
  }
}
@media (max-width:380px){
  .icon-btn--white{width:36px;height:36px}
  .brand .logo-svg{width:145px;max-width:50vw}
  .topbar__rail{ grid-template-columns:minmax(80px,1fr) auto minmax(80px,1fr); }
}

/* ===============================
   Safari focus – micro-fix anti-glitch
   =============================== */
@supports (-webkit-backdrop-filter: none) {
  .topbar--overlay{ backface-visibility:hidden; }
}
/* --- Fix overlay: autoriser la disparition quand .topbar--hidden est présent --- */
.topbar--overlay.topbar--hidden{
  transform: translateY(calc(-100% - env(safe-area-inset-top))) !important;
  transition: transform .25s ease !important; /* réactive la transition pour ce cas */
}

/* Couper aussi le voile quand on la cache */
.topbar--overlay.topbar--hidden::after{
  opacity: 0 !important;
}

/* ===== Overlay-at-top (home) ink/contrast fixes ===== */
.topbar--overlay:not(.topbar--compact){
  color:#fff;                     /* default ink for text/SVG (logo uses currentColor) */
}

/* Make sure the brand logo is bright on top of the hero */
.topbar--overlay:not(.topbar--compact) .brand{
  color:#fff;
}

/* Keep the round action buttons crisp (solid white) */
.topbar--overlay:not(.topbar--compact) .icon-btn--white{
  background:#fff;
  border-color:#fff;
  box-shadow:none;
}

/* Dark glyphs inside the white pills remain legible */
.topbar--overlay:not(.topbar--compact) .icon-btn--white .icon{
  stroke:#1e2040;
  fill:#1e2040;
}

/* Optional: make the menu (hamburger) glyph dark, too */
.topbar--overlay:not(.topbar--compact) .hamburger i{
  color:#1e2040 !important;
}