/* ======================================================================
   JeuneInvest — Styles dédiés à la page d’accueil (visuel maquette)
   ====================================================================== */

/* ---------- HÉROS ---------- */
.acc-hero{ position:relative; background:transparent; padding:24px 0 0; }
.acc-hero-bg{ position:absolute; inset:0; background:url('/assets/img/placeholder-hero.jpg') center/cover no-repeat; }
.acc-hero-grid{ position:relative; padding:48px 0 24px; }
.acc-hero-bubble{
  position:relative; background:var(--primaire); color:#fff;
  border-radius:18px; padding:24px 24px 28px; box-shadow:0 8px 28px rgba(35,103,242,.2);
  width:min(560px,100%);
}
.acc-hero-bubble h1{ font-family:"Kanit",sans-serif; font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.1; margin:0 0 .6rem; }
.acc-hero-bubble p{ margin:0 0 1.1rem; color:#e8f0ff; font-size:1.05rem; }
.acc-cta{ background:#fff; color:#101218; border-color:transparent; }
.acc-cta:hover{ transform:translateY(-1px); }
.acc-cta:focus-visible{ outline:3px solid color-mix(in oklab, var(--primaire), white 35%); outline-offset:3px; }
.acc-bubble-dots{
  position:absolute; right:-18px; top:-18px; width:160px; height:120px; border-radius:18px;
  background-image: radial-gradient(#ffffff 2px, transparent 2px);
  background-size:12px 12px; opacity:.45; filter:drop-shadow(0 2px 2px rgba(0,0,0,.05));
}

/* ---------- PRÉSENTATION ---------- */
.acc-presentation{
  position:relative; background:var(--primaire); color:#fff;
  padding:40px 0 90px; margin-top:0; overflow:hidden;
}
.acc-presentation::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-60px; width:130%; height:140px; background:#fff;
  border-top-left-radius:50% 140px; border-top-right-radius:50% 140px; pointer-events:none;
}
@media (max-width:720px){ .acc-presentation::after{ bottom:-50px; height:120px; } }

.acc-h2, .acc-h2-presentation{
  font-family:"Kanit",sans-serif; font-size:clamp(1.8rem,3.8vw,3rem);
  text-align:center; color:#fff; margin:0 0 22px; text-shadow:0 2px 0 rgba(0,0,0,.08);
}

.acc-video-shell{
  width:min(860px, 100%); margin-inline:auto; border-radius:14px; overflow:hidden;
  box-shadow:0 16px 38px rgba(0,0,0,.25); background:#0f1729;
}
.ratio-16x9{ position:relative; width:100%; padding-top:56.25%; }
.ratio-16x9>*{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Décors à points */
.acc-dots{ position:absolute; top:0; bottom:70px; width:min(180px,18%); background-image:radial-gradient(#ffffff 1.6px, transparent 1.6px); background-size:12px 12px; opacity:.35; pointer-events:none; }
.acc-dots-left{ left:0; -webkit-mask-image:linear-gradient(to right,#000 60%,transparent); mask-image:linear-gradient(to right,#000 60%,transparent); }
.acc-dots-right{ right:0; -webkit-mask-image:linear-gradient(to left,#000 60%,transparent); mask-image:linear-gradient(to left,#000 60%,transparent); }

/* Placeholder vidéo */
.ji-video-placeholder{ display:grid; place-items:center; gap:12px; text-align:center; color:#cbd5ff; background:linear-gradient(180deg,#111827 0%,#1f2937 100%); }
.ji-video-placeholder .btn{ background:#ff0000; color:#fff; border-color:transparent; }
.ji-video-placeholder .btn:hover{ filter:brightness(.98); transform:translateY(-1px); }

/* ---------- Sections cartes ---------- */
.acc-section{ padding:36px 0; background:#f6f9ff; }
.acc-label{ display:inline-flex; background:#fff; padding:8px 14px; border-radius:12px; box-shadow:0 6px 18px rgba(16,18,24,.08); border:1px solid var(--ligne); margin:0 0 18px; }
.acc-label span{ font-family:"Kanit",sans-serif; font-size:clamp(1.2rem,2.2vw,1.6rem); color:var(--primaire); }

.acc-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.acc-cards-podcast{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.acc-card{ display:block; background:#fff; border-radius:16px; padding:10px 12px; border:1px solid var(--ligne); box-shadow:0 10px 26px rgba(16,18,24,.06); color:inherit; }
.acc-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; }
.acc-card-title{ font-family:"Kanit",sans-serif; margin:.6rem 0 .2rem; color:var(--primaire); }
.acc-card-text{ margin:0 0 .4rem; color:#3a4256; }

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

/* ---------- Duo (Pour qui / Notre histoire) ---------- */
.acc-duo{ padding:20px 0 48px; background:#ffffff; }
.acc-duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:980px){ .acc-duo-grid{ grid-template-columns:1fr; } }
.acc-box{ position:relative; border-radius:16px; padding:18px; }
.acc-box-inner{ background:#fff; border:2px solid var(--ligne); border-radius:16px; padding:16px; color:#334155; }
.acc-box-yellow .acc-box-inner{ border-color:var(--accent); }
.acc-box-blue   .acc-box-inner{ border-color:#c8d9ff; }
.acc-badge{ position:relative; display:inline-block; font-family:"Kanit",sans-serif; font-weight:800; padding:8px 14px; border-radius:12px; box-shadow:0 6px 18px rgba(16,18,24,.06); }
.acc-badge-yellow{ background:var(--accent); color:#fff; border:1px solid var(--accent); }
.acc-badge-blue{ background:var(--primaire); color:#fff; border:1px solid var(--primaire); }

/* ---------- Podcasts (play overlay) ---------- */
.podcast-card{ position:relative; overflow:hidden; }
.podcast-badge{
  position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  background:#ffffff; color:#0f1729; border:1px solid var(--ligne); border-radius:999px; padding:6px 10px; font-weight:800; font-size:.82rem; box-shadow:var(--ombre);
}
.play-bubble{
  position:absolute; right:12px; bottom:12px; z-index:2; width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; background:var(--primaire); color:#fff; box-shadow:0 10px 26px rgba(16,18,24,.25); transition:transform .15s ease, box-shadow .2s ease;
}
.podcast-card:hover .play-bubble{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(16,18,24,.3) }
.podcast-card .acc-thumb{ filter:saturate(1.02) }

/* ---------- Modal lecteur MP4 ---------- */
.ji-modal{ position:fixed; inset:0; z-index:140; display:none; }
.ji-modal.is-open{ display:block; }
.ji-modal__overlay{ position:absolute; inset:0; background:rgba(16,18,24,.65); backdrop-filter:blur(2px); }
.ji-modal__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(960px,94%); background:#fff; border-radius:16px; border:1px solid var(--ligne); box-shadow:0 24px 60px rgba(16,18,24,.35); overflow:hidden;
}
.ji-modal__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--ligne); }
.ji-modal__title{ font-family:"Kanit",sans-serif; font-size:1.05rem; margin:0; }
.ji-modal__close{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff; border:1px solid var(--ligne); cursor:pointer; }
.ji-modal__content{ padding:12px; }
.ji-modal__content .ratio-16x9{ border-radius:12px; overflow:hidden; background:#0f1729; box-shadow:0 12px 28px rgba(0,0,0,.25) }
.ji-modal .ji-video-placeholder{ min-height:240px; display:grid; place-items:center; gap:12px; text-align:center; color:#cbd5ff; background:linear-gradient(180deg,#111827 0%,#1f2937 100%); }
.ji-modal .ji-video-placeholder .btn{ background:var(--accent); color:#101218; }
@media (max-width:640px){ .ji-modal__panel{ border-radius:12px } .ji-modal__content{ padding:10px } }

/* Boutons réutilisables */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:800; text-decoration:none; border:1px solid transparent; cursor:pointer; line-height:1.1; }
.btn-primary{ background:var(--primaire); color:#fff; box-shadow:0 8px 24px rgba(16,18,24,.12) }
.btn-primary:hover{ filter:brightness(.98); transform:translateY(-1px) }
.btn-primary:focus-visible{ outline:3px solid color-mix(in oklab,var(--primaire),white 35%); outline-offset:3px }

/* Pas de décalage horizontal */
html,body{overflow-x:hidden}