/* =========================================================
   JEA-ECM 2026 — Styles de la landing page
   Prolonge la direction artistique « L'Éveil »
   Couleur signature de la session : le vert
   ========================================================= */

:root{
  --ecm-vert:#2E9B3E;
  --ecm-vert-f:#217A2E;
  --ecm-vert-tf:#17591F;
  --ecm-vert-clair:#EFF7F0;
}

/* ---------- Héros ---------- */
.ecm-heros{
  position:relative;overflow:hidden;color:#EAF5EC;
  background:
    radial-gradient(900px 460px at 76% 6%,rgba(232,179,37,.2),transparent 62%),
    linear-gradient(158deg,var(--ecm-vert-tf) 0%,var(--ecm-vert-f) 55%,#2C8C3C 100%);
  padding:96px 0 0;
}
.ecm-heros::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.03) 25%,transparent 25%),
    linear-gradient(225deg,rgba(255,255,255,.03) 25%,transparent 25%);
  background-size:84px 84px;
}
.ecm-heros .contenu{position:relative;z-index:2}
.ecm-heros .badge{border-color:rgba(232,179,37,.55);background:rgba(232,179,37,.16);color:var(--or)}
.ecm-heros h1{color:#fff;margin-bottom:18px}
.ecm-heros h1 em{display:block;font-style:italic;color:var(--or)}
.ecm-heros .accroche{font-size:1.14rem;color:#D3E8D7;max-width:640px;margin-bottom:32px}

.ecm-faits{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.fait{
  display:inline-flex;flex-direction:column;gap:3px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  padding:13px 20px;
}
.fait b{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.fait span{font-weight:600;font-size:.99rem;color:#fff}

.gratuit{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--or);color:var(--brun-f);
  padding:12px 24px;font-weight:800;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:30px;
}

.ecm-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}

/* Compte à rebours */
.rebours{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:66px}
.reb{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  padding:14px 22px;min-width:92px;text-align:center;
}
.reb .n{font-family:var(--serif);font-size:2.1rem;font-weight:800;line-height:1;color:#fff}
.reb .l{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-top:7px}

/* ---------- Sous-navigation ---------- */
.sous-nav{
  position:sticky;top:86px;z-index:60;
  background:var(--brun-f);border-bottom:3px solid var(--or);
}
.sous-nav .barre{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.sous-nav .barre::-webkit-scrollbar{display:none}
.sous-nav a{
  color:#D8CCBB;font-size:.85rem;font-weight:500;white-space:nowrap;
  padding:15px 15px;border-bottom:3px solid transparent;margin-bottom:-3px;transition:.2s;
}
.sous-nav a:hover{color:#fff;border-bottom-color:var(--or)}

/* ---------- Frise historique ---------- */
.frise{max-width:860px;margin:0 auto;position:relative;padding-left:44px}
.frise::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:var(--ligne)}
.jalon{position:relative;padding-bottom:42px}
.jalon::before{
  content:"";position:absolute;left:-44px;top:4px;width:22px;height:22px;border-radius:50%;
  background:var(--or);border:4px solid var(--creme);box-shadow:0 0 0 2px var(--or);
}
.jalon.fort::before{background:var(--ecm-vert);box-shadow:0 0 0 2px var(--ecm-vert)}
.jalon .an{font-family:var(--serif);font-weight:800;color:var(--ecm-vert-f);font-size:1.32rem;line-height:1}
.jalon h3{font-family:var(--sans);font-size:1.05rem;font-weight:700;margin:6px 0 6px}
.jalon p{color:var(--doux);font-size:.96rem;margin:0}

/* ---------- Modules (accordéon) ---------- */
.modules{max-width:900px;margin:0 auto;display:grid;gap:12px}
.mod{background:var(--papier);border:1px solid var(--ligne);overflow:hidden;transition:.25s}
.mod:hover{box-shadow:var(--ombre-s)}
.mod.ouvert{border-color:var(--ecm-vert)}
.mod-q{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  padding:22px 26px;display:flex;align-items:center;gap:20px;font-family:inherit;
}
.mod-num{
  flex-shrink:0;width:44px;height:44px;background:var(--ecm-vert-f);color:#fff;
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.1rem;
}
.mod.ouvert .mod-num{background:var(--or);color:var(--brun-f)}
.mod-t{flex:1}
.mod-t strong{display:block;font-family:var(--serif);font-size:1.06rem;color:var(--brun);line-height:1.3}
.mod-t span{font-size:.87rem;color:var(--doux)}
.mod-mode{
  flex-shrink:0;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border:1px solid var(--ligne);color:var(--doux);
}
.mod-mode.enligne{border-color:var(--ecm-vert);color:var(--ecm-vert-f);background:var(--ecm-vert-clair)}
.mod-mode.presentiel{border-color:var(--or-f);color:var(--or-f);background:rgba(232,179,37,.1)}
.mod-fleche{flex-shrink:0;color:var(--or-f);font-size:1.2rem;transition:transform .3s}
.mod.ouvert .mod-fleche{transform:rotate(180deg)}
.mod-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.mod.ouvert .mod-a{max-height:340px}
.mod-a .dedans{padding:0 26px 24px 90px}
.mod-a p{color:var(--encre);font-size:.97rem;margin:0}

/* ---------- Programme ---------- */
.prog-jour{margin-bottom:38px}
.prog-jour h3{
  display:inline-block;background:var(--brun);color:#fff;
  font-family:var(--sans);font-size:.86rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 20px;margin-bottom:0;
}
.prog-jour.enligne h3{background:var(--ecm-vert-f)}
.prog-ligne{
  display:grid;grid-template-columns:130px 1fr 190px;gap:22px;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--ligne);background:var(--papier);
}
.prog-ligne:first-of-type{border-top:1px solid var(--ligne)}
.prog-ligne.temps-fort{background:rgba(232,179,37,.09)}
.prog-h{font-family:var(--serif);font-weight:700;color:var(--or-f);font-size:.98rem}
.prog-a strong{display:block;color:var(--brun);font-size:1rem;margin-bottom:2px}
.prog-a span{font-size:.86rem;color:var(--doux)}
.prog-m{font-size:.8rem;color:var(--doux);text-align:right}

/* ---------- Objectifs / résultats (listes) ---------- */
.liste-check{list-style:none;display:grid;gap:12px}
.liste-check li{position:relative;padding-left:38px;color:var(--encre);font-size:1rem}
.liste-check li::before{
  content:"✓";position:absolute;left:0;top:1px;width:24px;height:24px;
  background:var(--ecm-vert);color:#fff;display:grid;place-items:center;
  font-size:.76rem;font-weight:800;border-radius:50%;
}
.deux-col{columns:2;column-gap:46px}
.deux-col li{break-inside:avoid;margin-bottom:12px}

/* ---------- Indicateurs ---------- */
.indics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.indic{background:var(--papier);border:1px solid var(--ligne);padding:28px;text-align:center}
.indic .v{font-family:var(--serif);font-size:2.3rem;font-weight:800;color:var(--ecm-vert-f);line-height:1}
.indic .d{font-size:.9rem;color:var(--doux);margin-top:8px}

/* ---------- Vidéo ---------- */
.video-bloc{
  max-width:860px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  background:var(--brun-f);color:#E3D6C4;overflow:hidden;
}
.video-vignette{
  position:relative;min-height:260px;
  background:linear-gradient(140deg,var(--ecm-vert-f),var(--ecm-vert));
  display:grid;place-items:center;
}
.video-vignette .play{
  width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;transition:.3s;
}
.video-vignette .play::after{
  content:"";border-left:24px solid var(--ecm-vert-f);
  border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px;
}
.video-bloc:hover .play{transform:scale(1.1);background:#fff}
.video-texte{padding:38px}
.video-texte h3{color:#fff;margin-bottom:12px}
.video-texte p{font-size:.96rem;color:#C3B4A0;margin-bottom:18px}
.video-texte .lien{color:var(--or);font-weight:600;font-size:.92rem}

/* ---------- Partenaires / cadre institutionnel ---------- */
.cadre-inst{display:grid;gap:14px;max-width:900px;margin:0 auto}
.acteur{
  display:grid;grid-template-columns:280px 1fr;gap:26px;
  background:var(--papier);border:1px solid var(--ligne);padding:24px 26px;
}
.acteur strong{font-family:var(--serif);color:var(--brun);font-size:1.02rem;line-height:1.3}
.acteur p{color:var(--doux);font-size:.94rem;margin:0}

/* ---------- Inscription ---------- */
.inscription{
  background:linear-gradient(135deg,var(--ecm-vert-f),var(--ecm-vert));
  color:#fff;padding:60px;position:relative;overflow:hidden;
}
.inscription::after{
  content:"";position:absolute;inset:0;opacity:.035;
  background-image:linear-gradient(135deg,#fff 25%,transparent 25%),linear-gradient(225deg,#fff 25%,transparent 25%);
  background-size:92px 92px;
}
.inscription-grille{position:relative;z-index:2;display:grid;grid-template-columns:1fr 260px;gap:52px;align-items:center}
.inscription h2{color:#fff;margin-bottom:14px}
.inscription p{color:#DCEEDF;margin-bottom:26px}
.inscription .rappels{display:grid;gap:9px;margin-bottom:28px}
.inscription .rappels span{font-size:.94rem;color:#EAF5EC;padding-left:26px;position:relative}
.inscription .rappels span::before{content:"●";position:absolute;left:0;color:var(--or);font-size:.7rem;top:4px}
.qr-carte{background:#fff;padding:16px;text-align:center}
.qr-carte img{width:100%;height:auto;display:block}
.qr-carte .cap{color:var(--ecm-vert-f);font-size:.78rem;font-weight:700;margin-top:10px}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto;display:grid;gap:10px}
.q{background:var(--papier);border:1px solid var(--ligne);overflow:hidden}
.q.ouvert{border-color:var(--or)}
.q-t{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
  padding:19px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-size:1rem;font-weight:600;color:var(--brun);
}
.q-t .s{color:var(--or-f);font-size:1.3rem;transition:transform .3s;flex-shrink:0}
.q.ouvert .q-t .s{transform:rotate(45deg)}
.q-r{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q.ouvert .q-r{max-height:300px}
.q-r p{padding:0 24px 20px;color:var(--doux);font-size:.96rem;margin:0}

/* ---------- Contact événement ---------- */
.contact-ev{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ce{background:var(--papier);border:1px solid var(--ligne);padding:30px;text-align:center}
.ce b{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-bottom:10px}
.ce strong{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--brun);margin-bottom:5px}
.ce span{font-size:.93rem;color:var(--doux)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .video-bloc{grid-template-columns:1fr}
  .inscription-grille{grid-template-columns:1fr;gap:34px}
  .qr-carte{max-width:240px;margin:0 auto}
  .indics{grid-template-columns:1fr 1fr}
  .acteur{grid-template-columns:1fr;gap:8px}
  .deux-col{columns:1}
  .contact-ev{grid-template-columns:1fr}
}
@media(max-width:780px){
  .sous-nav{top:86px}
  .prog-ligne{grid-template-columns:96px 1fr;gap:14px}
  .prog-m{display:none}
  .inscription{padding:38px 24px}
  .indics{grid-template-columns:1fr}
  .mod-q{padding:18px;gap:14px}
  .mod-mode{display:none}
  .mod-a .dedans{padding:0 18px 20px 18px}
  .video-texte{padding:28px}
}