/* Variables de thème */
:root{
  --bg:#0f172a; /* slate-900 */
  --card:#111827; /* gray-900 */
  --muted:#9ca3af; /* gray-400 */
  --text:#e5e7eb; /* gray-200 */
  --accent:#06b6d4; /* cyan-500 */
  --accent-2:#22d3ee; /* cyan-400 */
  --chip:#1f2937; /* gray-800 */
  --ok:#10b981;
  --warn:#f59e0b;
  /* Tailles des logos */
  --logo-size: 44px;        /* header */
  --title-logo-size: 72px;  /* h1 */
}

/* Reset de base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, rgba(6,182,212,.15), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Liens */
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}

/* Header & navigation */
header{position:sticky;top:0;backdrop-filter:blur(6px);background:linear-gradient(to bottom, rgba(15,23,42,.85), rgba(15,23,42,.35));border-bottom:1px solid rgba(255,255,255,.06);z-index:20}
.container{width:min(1100px, 92%);margin-inline:auto}
.nav{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:0.8rem 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:700}
.brand .logo{width:var(--logo-size);height:var(--logo-size);border-radius:10px;background:conic-gradient(from 210deg, var(--accent), var(--accent-2), #60a5fa, var(--accent));display:grid;place-items:center;color:#0b132b;font-size:20px;}
.brand img.logo{width:var(--logo-size);height:var(--logo-size);border-radius:10px;display:block;object-fit:contain;background:none}
.brand span{letter-spacing:.2px}
.nav a.btn{padding:.55rem .9rem;border:1px solid rgba(255,255,255,.14);border-radius:12px}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:4rem 0 2rem}
.badge{display:inline-flex;gap:.5rem;align-items:center;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.25);color:#cffafe;padding:.35rem .65rem;border-radius:999px;font-size:.9rem}
h1{font-size:clamp(1.8rem, 3vw + .8rem, 3rem);line-height:1.12;margin:.7rem 0 1rem}
.hero h1 .mono{font-size:1.5rem;line-height:1}
.title-row{display:inline-flex;align-items:center;gap:.6rem}
.title-logo{width:var(--title-logo-size);height:var(--title-logo-size);display:block;object-fit:contain;border-radius:10px}

/* Keynote highlight */
.keynote{margin-top:.8rem;padding:1rem;border-radius:14px;background:rgba(6,182,212,.10);border:1px solid rgba(34,211,238,.35)}
.keynote .badge{background:rgba(6,182,212,.18);border-color:rgba(34,211,238,.45)}
.keynote .k-head{display:flex;align-items:center;gap:.8rem;margin:.6rem 0 .6rem}
.keynote .k-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.keynote .k-meta{display:flex;flex-direction:column}
.keynote .k-row{display:flex;align-items:baseline;gap:.6rem;margin:.6rem 0 .2rem}
.keynote .k-name a{font-weight:600}
.keynote .k-affil{color:var(--muted);font-size:.95rem}
.keynote .k-title{color:#e2e8f0;line-height:1.45;font-style:italic}

/* Responsive: réduire légèrement les logos sur petits écrans */
@media(max-width:480px){
  :root{ --logo-size: 40px; --title-logo-size: 42px }
}
.lead{color:#cbd5e1;font-size:1.05rem;line-height:1.6}
.hero .card{background:rgba(17,24,39,.65);border:1px solid rgba(255,255,255,.08);padding:1rem;border-radius:16px}
.kv{display:grid;gap:.6rem}
.kv div{display:flex;gap:.7rem;align-items:center;background:var(--chip);border:1px solid rgba(255,255,255,.06);padding:.6rem .8rem;border-radius:12px}
.kv .k{color:var(--muted);width:100px}
.kv div span:last-child{flex:1;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.chip{background:var(--chip);border:1px solid rgba(255,255,255,.06);padding:.35rem .6rem;border-radius:999px;font-size:.9rem;color:#d1d5db}

/* Sections */
section{padding:2rem 0}
h2{font-size:1.4rem;margin:0 0 1rem}
.grid{display:grid;gap:1rem}
@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{background:rgba(17,24,39,.6);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.1rem}
.list{padding-left:1.1rem;line-height:1.75}
.list li{margin:.2rem 0}

.timeline{position:relative;padding-left:1.75rem}
.timeline::before{content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:2px;background:linear-gradient(#22d3ee, transparent)}
.tl-item{position:relative;margin:0 0 .9rem 0;padding-left:1.2rem}
.tl-item::before{content:"";position:absolute;left:.15rem;top:.2rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--accent)}
.tl-title{font-weight:600}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem; margin-top:.6rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.6rem .8rem}

footer{padding:2rem 0 3rem;color:#9da3af}
.small{font-size:.92rem;color:#9ca3af}
.speaker{color:var(--accent-2)}
.program-list{padding-left:1.6rem}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Utilitaires */
.fw-400{font-weight:400}

/* #infos : la carte s'étale sur les 2 colonnes en desktop */
@media (min-width: 860px) {
  #infos.grid-2 .card {
    grid-column: 1 / -1; /* occupe les 2 colonnes */
  }
}

/* En mobile/tablette, pleine largeur naturellement */
@media (max-width: 859px) {
  #infos .card {
    grid-column: 1 / -1;
  }
}