/* EpiXplain - minimal, classy landing page */
:root{
--bg:#0a0b10; --panel:#0f1020; --text:#e8e9ef; --muted:#a9adc1;
--brand:#6dd6ff; --brand2:#a07bff; --accent:#64fbd9; --accent2:#ffdc7d;
--border:rgba(255,255,255,.08);
--ok:#52e39a; --beta:#ffd166; --todo:#f77;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color:var(--text); background:#0a0b10}
a{color:var(--brand); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 22px}
header{position:sticky; top:0; z-index:40; backdrop-filter: blur(8px); background:rgba(10,11,16,.6); border-bottom:1px solid var(--border)}
.h-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--text)}
.brand .logo{width:28px;height:28px}
nav.nav{display:flex; align-items:center; gap:16px}
.lang button{background:transparent; border:1px solid var(--border); color:var(--muted); padding:6px 8px; border-radius:8px; cursor:pointer; font-size:12px}
.notice{background:#16172f; border-bottom:1px solid var(--border); padding:18px 0}
.notice .big{font-weight:800; font-size:27px; display:block}
.notice .small{color:var(--muted); font-size:13px}
.hero{padding:60px 0 30px; text-align:center}
h1{font-size:36px; margin:0 0 10px}
.lead{color:var(--muted); font-size:18px; margin:0 auto 20px; max-width:900px}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; font-weight:600; border:1px solid var(--border); color:var(--text)}
.btn.primary{background:linear-gradient(90deg, var(--brand), var(--brand2)); border:none; color:#0a0b10}
section{padding:56px 0; border-top:1px solid var(--border)}
h2{margin:0 0 14px; font-size:26px}
p{line-height:1.6}
.muted{color:var(--muted)}
.grid{display:grid; gap:22px}
.g-2{grid-template-columns:1.1fr .9fr}
.g-3{grid-template-columns:repeat(3, 1fr)}
.g-4{grid-template-columns:repeat(4, 1fr)}
@media (max-width:900px){ .g-2{grid-template-columns:1fr} .g-3{grid-template-columns:1fr} .g-4{grid-template-columns:1fr 1fr} }
.card{background:#13142a; border:1px solid var(--border); border-radius:16px; padding:18px}
.feature{background:#13142a; border:1px solid var(--border); border-radius:16px; padding:18px; position:relative}
.feature h3{margin:0 0 6px}
.badge{position:absolute; top:14px; right:14px; padding:4px 8px; border-radius:999px; font-size:11px; border:1px solid var(--border); background:#0f1020; color:var(--muted)}
.status li{display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.08)}
.status .s{width:22px; height:22px; display:inline-grid; place-items:center; border-radius:6px; font-size:13px}
.ok{background:rgba(82,227,154,.12); color:var(--ok); border:1px solid rgba(82,227,154,.3)}
.beta{background:rgba(255,209,102,.12); color:var(--beta); border:1px solid rgba(255,209,102,.35)}
.todo{background:rgba(247,119,119,.12); color:#ff9a9a; border:1px solid rgba(247,119,119,.35)}
.illus{background:#0f1020; border:1px dashed rgba(255,255,255,.15); border-radius:16px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--muted)}
footer{padding:18px 0; border-top:1px solid var(--border); background:rgba(255,255,255,.02)}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.small{font-size:14px}
.sep{opacity:.5}

a.feature{
  --hover-bg1:#1b1d3a; --hover-bg2:#141533;
  display:block;
  position:relative;
  background:#13142a;
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:
	transform .18s ease,
	box-shadow .18s ease,
	border-color .18s ease,
	background .18s ease,
	color .18s ease;
}

a.feature:hover,
a.feature:focus-visible{
  background:linear-gradient(145deg,var(--hover-bg1),var(--hover-bg2));
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 1px var(--brand2);
  border-color:var(--brand2);
  outline:none;
}

a.feature h3{
  color:var(--brand);
  margin:0 0 6px;
  font-size:1.2rem;
  transition:color .18s ease;
}
a.feature:hover h3,
a.feature:focus-visible h3{
  color:var(--accent);
}

a.feature::after{
  content:"?";
  position:absolute;
  right:14px;
  bottom:12px;
  font-size:1.1rem;
  color:var(--brand2);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease;
}
a.feature:hover::after,
a.feature:focus-visible::after{
  opacity:1;
  transform:translateX(2px);
}

/* Le badge ne doit pas bloquer les events souris */
a.feature .badge{
  pointer-events:none;
}

.reveal {
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal[data-reveal-delay="1"]{ transition-delay: .05s; }
.reveal[data-reveal-delay="2"]{ transition-delay: .12s; }
.reveal[data-reveal-delay="3"]{ transition-delay: .18s; }

@media (prefers-reduced-motion: reduce){
  .reveal { transition: none; opacity: 1 !important; transform: none !important; }
}

:focus-visible.reveal { opacity: 1; transform: none; }

.illus {
  position: relative;
  background: #111229;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.illus img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease;
}

.illus:hover img {
  transform: scale(1.03);
}

.illus figcaption {
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
}

.illus:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--brand2);
}

/* Section Illustrations */
#illustrations .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(540px, 1fr));
  gap: 2rem; /* espace entre les images */
  justify-items: center;
}

#illustrations .illus {
  width: 100%;
  max-width: 620px; /* largeur max par carte */
  border-radius: 18px;
  overflow: hidden;
  background: #111229;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
  transition: transform .3s ease, box-shadow .3s ease;
}

#illustrations .illus:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
}

#illustrations .illus img {
  width: 100%;
  height: auto;
  display: block;
}

#illustrations .illus figcaption {
  text-align: center;
  font-size: 1rem;
  padding: 8px 0;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.4);
}

/* === Section Illustrations === */
#illustrations .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 2rem;
  justify-items: center;
}

#illustrations .illus {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #111229;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
  transition: transform .3s ease, box-shadow .3s ease;
}

#illustrations .illus img {
  display: block;
  width: 95%;
  height: auto;
  object-fit: contain; /* évite de couper */
}

#illustrations .illus:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
}

/* Sous-titres */
#illustrations .illus figcaption {
  text-align: center;
  font-size: 1rem;
  padding: 8px 0;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.4);
}

/* --- Ajustement : la dernière image prend pleine largeur --- */
#illustrations .illus:nth-child(3) {
  grid-column: 1 / -1;  /* occupe toute la rangée */
  max-width: 100%;
}

#illustrations .illus:nth-child(3) {
  border: 1px solid rgba(255,255,255,0.15);
}

/* Mise en page générale de la section (déjà ok) */
#illustrations .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
  gap:2rem;
  justify-items:center;
}

/* Cartes standard */
#illustrations .illus{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:#111229;
  box-shadow:0 4px 20px rgba(0,0,0,.45);
  transition:transform .3s ease, box-shadow .3s ease;
}
#illustrations .illus img{
  display:block;
  width:100%;
  height:auto;           /* => pas de rognage par défaut */
}

/* 3e carte = pleine largeur */
#illustrations .illus:nth-child(3){
  grid-column:1 / -1;
}

/* Variante “fit/contain” : TOUT montrer, jamais rogné */
#illustrations .illus.illus-fit{
  /* cadre avec marge interne, fond sombre */
  padding:12px;
  background:#0f1020;
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
}

/* clé : l'image s'adapte au cadre sans rognage */
#illustrations .illus.illus-fit img{
  width:100%;
  height:100%;
  max-height:clamp(320px, 70vh, 780px); /* limite la hauteur écran */
  object-fit:contain;                   /* montre 100% du visuel */
}


@media (max-width:640px){
  #illustrations .illus.illus-fit img{ max-height:60vh; }
}

/* Bloc explicatif sous chaque illustration */
#illustrations .explain {
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 14px 14px;
  padding: 12px 18px;
  font-size: 0.95rem;
  color: #cfd2e3;
  line-height: 1.45;
  text-align: justify;
  transition: background .3s ease;
}
#illustrations .illus:hover .explain {
  background: rgba(255, 255, 255, 0.08);
}

#illustrations .illus figcaption {
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
  padding: 10px 0 4px;
  text-align: center;
  background: none;
}