:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#0ea5e9;     /* cyan-500 */
  --primary-700:#0369a1; /* cyan-800 */
  --accent:#111827;      /* slate-900 */
  --card:#f9fafb;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Top bar with logos */
.topbar{background:var(--accent);color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:14px}
/* 1er logo (FSO) */
.brand:first-child img{ height:70px; }
/* 2e logo (UPHF) */
.brand:last-child  img{ height:55px; }

.brand img{width:auto;object-fit:contain;background:#fff;border-radius:6px;padding:4px}
.brand .title{font-weight:700;letter-spacing:.2px}
.brand .subtitle{font-size:.85rem;color:#d1d5db}

/* Nav */
nav{position:sticky;top:0;z-index:20;background:#0b1220;color:#fff;border-bottom:3px solid var(--primary)}
nav .navwrap{display:flex;gap:16px;align-items:center;justify-content:center}
nav a{color:#fff;padding:14px 10px;display:block;font-weight:600}
nav a:hover, nav a.active{background:#111827}

/* Hero */
/* Rendre le texte des cartes lisible dans le hero */
.hero .card { 
  color: var(--text);
}
.hero .card h3 {
  color: var(--accent);
}
.hero .card a {
  color: var(--primary-700);
  text-decoration: underline;
}
/* Rétablir des puces visibles et un léger retrait */
.hero .card ul {
  list-style: disc;
  padding-left: 18px;
}

.hero{background:linear-gradient(145deg,#0b1220 0%, #0e7490 65%, #0ea5e9 100%);color:#fff}
.hero .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:48px 0}
.hero h1{font-size:2rem;margin:0 0 10px}
.hero p{color:#e5e7eb;margin:0 0 10px}
.hero .cta{margin-top:12px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:#fff;color:#111827;border-radius:10px;padding:10px 14px;font-weight:700;border:2px solid transparent}
.btn.primary{background:var(--primary);color:#fff;border-color:transparent}
.btn.outline{background:transparent;color:#fff;border-color:#fff}

/* Grid & cards */
.section{padding:36px 0}
h2.section-title{font-size:1.6rem;margin:0 0 12px;border-bottom:3px solid var(--primary);padding-bottom:6px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}

/* Speakers grid */
.speakers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.speaker{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px}
.speaker .name{font-weight:700}
.speaker .aff{color:var(--muted);font-size:.95rem}

/* Footer */
footer{background:#0b1220;color:#d1d5db;padding:28px 0;margin-top:20px}
footer .logos{display:flex;gap:12px;align-items:center}
footer img{height:36px;width:auto;object-fit:contain;background:#fff;border-radius:6px;padding:4px}

/* Responsive */
@media (max-width:980px){
  .hero .inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .speakers{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .speakers{grid-template-columns:1fr}
}



/* ===== ICANTA sticky header & fixed footer (auto) ===== */
:root{
  --footer-h: 64px;          /* on garde juste le pied */
}

/* Header collant */
#site-chrome{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0b1220;
}

/* Footer fixe en bas */
#site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: #0b1220;
  color: #d1d5db;
}

/* IMPORTANT : plus de padding-top ici */
body{
  padding-top: 0;                  /* ← supprime l’espace blanc en haut */
  padding-bottom: var(--footer-h); /* on garde l’espace pour le footer fixe */
}

/* (le reste inchangé) */



@media (max-width:640px){ .brand img{ height:44px; } }
footer img{ height:36px; width:auto; object-fit:contain; background:#fff; border-radius:6px; padding:4px; }

nav a.active, nav a:hover{ background:#111827; }

/* Hero side cards readable if hero uses white text */
.hero .card{ color: var(--text); }
.hero .card h3{ color: var(--accent); }
.hero .card a{ color: var(--primary-700); text-decoration: underline; }
.hero .card ul{ list-style: disc; padding-left: 18px; }

/* === Patch GSM complémentaire === */

/* 1) Logos : autoriser le retour à la ligne et centrer sur mobile */
@media (max-width:900px){
  .topbar .wrap{
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}

/* 2) Footer : ne pas recouvrir le contenu sur GSM */
@media (max-width:900px){
  #site-footer{ position: static !important; }
  body{ padding-bottom: 0 !important; }
}

/* 3) (Option) Réduire un peu le padding du hero sur mobile */
@media (max-width:900px){
  .hero .inner{ padding: 28px 0 !important; }
}
/* ===== Mobile nav (only on small screens) ===== */

/* Hide the button on desktop */
.nav-toggle { display:none; }

/* Desktop: nav always visible as before */
@media (min-width:901px){
  #main-nav { max-height:none !important; overflow:visible !important; }
  .navwrap   { display:flex !important; flex-wrap:wrap; gap:16px; justify-content:center; }
}

/* Mobile: show button + collapse nav by default */
@media (max-width:900px){
  .nav-toggle{
    display:inline-block;
    margin:8px 16px;
    padding:10px 12px;
    font-size:16px;
    background:#0b1220; color:#fff;
    border:1px solid #1f2937; border-radius:8px;
  }
  #main-nav{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  #main-nav.open{ max-height:520px; } /* enough space for all links */
  #main-nav .navwrap{
    display:flex; flex-direction:column; align-items:stretch; gap:6px;
    padding:0 16px 12px;
  }
  #main-nav a{ padding:12px 14px; border-radius:6px; }
}
/* === Mobile header: logos only === */
@media (max-width:900px){
  .topbar .wrap{
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
  }
  .brand{
    gap: 8px !important;
  }
  .brand img{
    height: 40px !important;  /* taille logo mobile */
    padding: 2px !important;
    border-radius: 6px !important;
  }
  /* on cache les textes (titres + sous-titres) sur mobile */
  .brand .title,
  .brand .subtitle{
    display: none !important;
  }
}
/* --- Mobile pill header like SSADS --- */
.mbar { display: none; }

@media (max-width: 900px){
  /* On utilise le nouveau header mobile */
  .mbar{ display:block; background:transparent; padding:10px 12px; }
  .mbar-inner{
    background:#fff;
    border-radius:9999px;
    padding:10px 14px;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 2px 15px rgba(0,0,0,0.08);
    gap:12px;
  }
  .m-logo{ height:28px; width:auto; border-radius:8px; }
  .m-title{
    flex:1; text-align:center;
    font-weight:700; letter-spacing:.3px;
    color:#0f2943;  /* proche du style vu */
    font-family: "Questrial", system-ui, sans-serif;
  }
  .nav-toggle.pill{
    background:#fff; border:1px solid #eee;
    border-radius:9999px; padding:8px 12px;
    color:#0a0f14; font-weight:600;
  }

  /* En mobile : on cache l’ancien ruban à deux logos */
  .desktop-brands{ display:none !important; }

  /* Option : réduire le padding du nav quand ouvert */
  #main-nav.open .navwrap{ padding-top:6px; padding-bottom:10px; }
}

/* === Participants table – responsive === */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.icanta {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Last Name en gras (desktop & mobile) */
table.icanta td:nth-child(2),
table.icanta th:nth-child(2) {
  font-weight: 700;
}


/* === Tableau: desktop intact, mobile scrollable horizontal === */

/* Conteneur scroll horizontal doux (mobile) */
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  position: relative; /* pour l'indice */
}

/* Indice "Glisser →" (facultatif) */
.table-scroll .scroller-hint{
  position: sticky;
  right: 8px;
  top: 0;
  margin-left: auto;
  display: inline-block;
  background: rgba(17,24,39,0.85); /* #111827 */
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

/* En-tête collant pour garder les titres visibles pendant le scroll */
table.icanta thead th{
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
  box-shadow: 0 1px 0 var(--border);
}

/* Largeur auto en desktop ; en mobile, on fixe une largeur mini
   pour que toutes les colonnes existent et qu’on puisse scroller. */
table.icanta{
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Last Name en gras partout */
table.icanta th:nth-child(2),
table.icanta td:nth-child(2){
  font-weight: 700;
}

/* Cellules standards */
table.icanta th,
table.icanta td{
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

/* --- Mobile: tableau “entier” à l’intérieur du scroll --- */
@media (max-width: 640px){
  /* Garde un vrai tableau, mais impose une largeur minimale :
     ajuste la valeur si besoin selon tes colonnes (ex: 880–1000px). */
  table.icanta{
    min-width: 920px;
    font-size: 14px;
  }

  /* Par défaut: pas de retour ligne pour éviter les hauteurs énormes */
  table.icanta th,
  table.icanta td{
    white-space: nowrap;
  }

  /* Autoriser le retour ligne là où c’est utile : Affiliation (col 5) et Email (col 6) */
  table.icanta td:nth-child(5),
  table.icanta td:nth-child(6){
    white-space: normal;
    word-break: break-word;       /* coupe proprement */
  }
}

/* Très petits écrans: compacte un peu */
@media (max-width: 360px){
  table.icanta{ font-size: 13px; }
}

/* Masquer l'indice par défaut (desktop) */
.table-scroll .scroller-hint{
  display:none;
}

/* N'afficher l'indice que sur mobile */
@media (max-width:640px){
  .table-scroll .scroller-hint{
    display:inline-block;
    position:sticky; right:8px; top:0;
    background:rgba(17,24,39,.85); color:#fff;
    font-size:12px; padding:3px 8px; border-radius:999px;
    pointer-events:none; z-index:2;
  }
}