/* En-tête des épreuves : la photo de l'épreuve derrière un voile transparent.
   Maquette validée par Karima le 29/09/2026 (v4) : haut sombre « nuit » avec aurore, feuille claire qui remonte de 30 px.
   Toutes les classes commencent par « ep- » pour ne rien casser dans les pages. */
.ep{position:relative;overflow:hidden;background:#0B1430;color:#fff;font-family:Figtree,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.ep *{box-sizing:border-box}
.ep-scene{position:absolute;top:0;left:50%;pointer-events:none}
.ep-scene.pc{width:1280px;height:100%;margin-left:-640px}
.ep-scene.tel{display:none;width:390px;height:100%;margin-left:-195px}
.ep-photo{position:absolute;background-image:var(--img);background-size:100% 100%;background-repeat:no-repeat;filter:saturate(.92)}
.ep-scene.pc .ep-photo{left:var(--pc-l);top:var(--pc-t);width:var(--pc-w);aspect-ratio:var(--ar);-webkit-mask-image:var(--masque);mask-image:var(--masque)}
.ep-scene.tel .ep-photo{left:var(--t-l);top:var(--t-t);height:var(--t-h);aspect-ratio:var(--ar);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.ep-voile{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(11,20,48,.5) 0%,rgba(11,20,48,0) 26%,rgba(11,20,48,0) 58%,rgba(11,20,48,.88) 100%),
  linear-gradient(90deg,rgba(11,20,48,.2) 0%,rgba(11,20,48,.35) 17%,rgba(11,20,48,.75) 30%,rgba(11,20,48,.75) 57%,rgba(11,20,48,.35) 72%,rgba(11,20,48,.2) 100%)}
.ep-aurore{position:absolute;inset:0;pointer-events:none;opacity:.75}
.ep-aurore i{position:absolute;border-radius:999px}
.ep-aurore i:nth-child(1){left:-90px;top:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(47,85,212,.85) 0%,rgba(47,85,212,0) 70%);filter:blur(10px);animation:ep-aurore1 11s ease-in-out infinite}
.ep-aurore i:nth-child(2){left:30%;bottom:-170px;width:320px;height:300px;background:radial-gradient(circle,rgba(200,16,46,.4) 0%,rgba(200,16,46,0) 70%);filter:blur(12px);animation:ep-aurore2 13s ease-in-out infinite}
.ep-aurore i:nth-child(3){left:40%;top:40%;width:200px;height:160px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 70%)}
@keyframes ep-aurore1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.15)}}
@keyframes ep-aurore2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-50px,-20px) scale(.95)}}
.ep-cadre{position:relative;z-index:2;max-width:760px;margin:0 auto;display:flex;flex-direction:column;min-height:330px;padding:20px 22px 64px}
.ep-haut{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:600}
.ep-haut a,.ep-haut b{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;text-decoration:none}
.ep-rond{flex:none;width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ep-rond svg{width:18px;height:18px}
.ep-nb{flex:none;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13.5px;color:#fff;font-weight:600}
.ep-titre{margin-top:auto}
.ep h1{margin:0;font-family:inherit;font-size:40px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(11,20,48,.55)}
.ep p{margin:8px 0 0;max-width:none;font-family:inherit;font-size:17px;font-weight:500;line-height:1.45;color:#C9D0E8;text-shadow:0 1px 12px rgba(11,20,48,.6)}
/* pendant les questions : la photo reste, plus discrète, et le haut est court */
.ep.q .ep-photo{opacity:.6}
.ep.q .ep-voile{background:linear-gradient(180deg,rgba(11,20,48,.5),rgba(11,20,48,.78))}
.ep.q .ep-cadre{min-height:0;padding:12px 16px 44px}
/* la feuille claire qui remonte sur le haut sombre */
.ep-feuille{position:relative;z-index:3;margin-top:-30px!important;border-radius:30px 30px 0 0;box-shadow:0 -18px 40px rgba(0,0,0,.25);padding-top:10px}
@media (max-width:700px){
  .ep-scene.pc{display:none}
  .ep-scene.tel{display:block}
  .ep-voile{background:
    linear-gradient(180deg,rgba(11,20,48,.55) 0%,rgba(11,20,48,.1) 20%,rgba(11,20,48,.2) 42%,rgba(11,20,48,.9) 74%,rgba(11,20,48,.96) 100%),
    linear-gradient(90deg,rgba(11,20,48,.55) 0%,rgba(11,20,48,.15) 60%,rgba(11,20,48,0) 100%)}
  .ep-cadre{min-height:350px;padding:14px 22px 60px}
  .ep h1{font-size:28px}
  .ep p{font-size:16px}
  .ep.q .ep-cadre{min-height:0;padding:12px 14px 42px}
}
@media (prefers-reduced-motion:reduce){.ep-aurore i{animation:none}}
@media print{.ep{display:none}.ep-feuille{margin-top:0!important;box-shadow:none}}