/* ══════════════════ 1. TOKENS ══════════════════ */
:root{
  --navy:#080027;
  --navy-2:#0F0836;
  --navy-3:#1A1147;
  --coral:#FF5464;
  --blue:#195BF7;
  --teal:#36827E;
  --orange:#FCA311;
  --sky:#30BCED;
  /* Le vert canard de la charte ne tient que 4,47:1 en texte sur fond sombre.
     On garde #36827E pour les aplats et on éclaircit uniquement l'encre. */
  --teal-ink:#45A8A2;
  --white:#FFFFFF;
  /* Accessibilité : tous les textes en blanc pur (contraste ≥ 17:1 sur les
     fonds sombres). Les deux variables sont conservées pour que la
     hiérarchie reste lisible dans la feuille de style. */
  --ink-soft:#FFFFFF;
  --ink-dim:#FFFFFF;
  --line:rgba(255,255,255,.14);

  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'DM Serif Display',Georgia,serif;

  --wrap:1140px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(72px,10vw,132px);

  --accent:var(--coral);           /* redéfini par section */
  --accent-ink:var(--accent);      /* variante lisible en texte */

  --peek:88px;                     /* aperçu laissé sous le bandeau */
  --title-h:8.8svh;                 /* plafond des titres, calé sur la hauteur d'écran */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--navy);color:var(--white);
  font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ══════════════════ 2. TYPO ══════════════════ */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

.logotype{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:.9}
.logotype sup{letter-spacing:0}

h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em}
h2{text-wrap:balance;font-family:var(--serif);font-size:clamp(30px,4.6vw,52px);line-height:1.06}
h2 em{font-style:italic}
h3{font-family:var(--sans);font-weight:700;font-size:clamp(19px,2vw,23px);line-height:1.3;letter-spacing:-.015em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--ink-soft);max-width:62ch}
.small{font-size:14.5px;line-height:1.55;color:var(--ink-dim)}

/* marqueur de section : un chevron plein, pas un eyebrow tracké */
.mark{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:14px;font-weight:700;color:var(--accent-ink)}
.mark::before{content:"";width:15px;height:13px;background:var(--accent);
  clip-path:polygon(0 0,100% 0,50% 100%)}

/* ══════════════════ 3. MOTIF TRIANGLES ══════════════════ */
.pattern{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.pattern rect{width:100%;height:100%}

/* ══════════════════ 4. NAV ══════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(8,0,39,0);backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s,backdrop-filter .25s}
.nav.stuck{background:rgba(8,0,39,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{font-size:25px;text-decoration:none;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
  padding:6px 0;position:relative;transition:color .18s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--coral);transition:right .22s}
.nav-links a:hover,.nav-links a.on{color:var(--white)}
.nav-links a.on::after,.nav-links a:hover::after{right:0}
/* Sélecteur de langue : pastille en bout de barre, tout à droite.
   Le drapeau est un SVG embarqué : les émojis drapeaux ne s'affichent pas
   sous Windows, qui les remplace par deux lettres. */
/* sélecteur renforcé : .nav-links a l'emporterait sinon en spécificité */
/* Page du créathon : le bouton d'inscription est retiré, mais sa place est
   réservée par un fantôme de même gabarit, pour que les onglets et la
   pastille de langue restent exactement où ils sont sur les autres pages. */
.nav-links .nav-cta-ghost{visibility:hidden;pointer-events:none;
  font-size:14.5px;font-weight:800}
.nav-links .nav-lang{display:inline-flex;align-items:center;gap:10px;
  padding:7.5px 26px 7.5px 16px;border:2px solid var(--accent);border-radius:999px;
  font-size:14.5px;font-weight:800;letter-spacing:.04em;color:var(--white)!important;
  text-decoration:none;transition:border-color .16s,background .16s}
.nav-links .nav-lang:hover,.nav-links .nav-lang:focus-visible{background:var(--accent-ink);color:var(--navy)!important;
  border-color:var(--accent-ink)}
.nav-lang::after{display:none!important}
.flag{width:26px;height:18px;flex-shrink:0;border-radius:2.5px;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.flag-gb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
.flag-fr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23ED2939'/%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3C/svg%3E")}
.nav-links .nav-cta{padding:12px 28px;border-radius:999px;background:var(--coral);color:var(--navy)!important;
  font-weight:800;font-size:14.5px;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,84,100,.32)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:.22s}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Seuil relevé à 1160px : avec « Cérémonie de clôture » et la pastille de
   langue, la barre française ne tient plus sur une ligne en dessous. */
@media(max-width:1160px){
  .burger{display:block}
  .nav-links{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);border-bottom:1px solid var(--line);padding:8px var(--gut) 22px;
    transform:translateY(-120%);transition:transform .3s cubic-bezier(.4,0,.2,1);max-height:calc(100vh - 66px);overflow:auto}
  .nav.open .nav-links{transform:translateY(0)}
  .nav-links li{border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links li:last-child{border:0}
  .nav-links a{display:block;padding:15px 0;font-size:17px}
  .nav-links a::after{display:none}
  .nav-links .nav-cta{display:inline-block;margin-top:16px;text-align:center}
  .nav-links .nav-cta-ghost{display:none}
  .nav-links li:has(.nav-lang){border:0}
  /* .nav-links a impose display:block dans le menu replié : on rend
     sa forme à la pastille, sinon le drapeau est écrasé à zéro. */
  .nav-links .nav-lang{display:inline-flex;width:auto;margin-top:18px;
    padding:7.5px 26px 7.5px 16px;font-size:14.5px}
}

/* ══════════════════ 4bis. LOGO DIGITAL WALLONIA ══════════════════
   Logo officiel, détouré depuis les visuels de la charte et embarqué en base64
   pour que le fichier reste autonome. Pour le remplacer par le fichier officiel :
   .dw-logo{background-image:url('assets/digital-wallonia.svg')} */
.dw-logo{background:url("img/digital-wallonia.png") center/contain no-repeat}
.hero-dw{position:absolute;z-index:3;top:clamp(84px,9vh,110px);right:var(--gut);
  width:clamp(104px,10vw,146px);aspect-ratio:400/276;display:block;
  opacity:.96;transition:opacity .18s}
.hero-dw:hover{opacity:1}
@media(max-width:940px){.hero-dw{top:84px;width:92px}}
@media(max-width:520px){.hero-dw{width:78px;top:78px}}

/* ══════════════════ 5. HERO ══════════════════ */
/* Le bandeau partenaires est le dernier enfant du hero. On cale donc la
   hauteur du hero sur l'écran moins un aperçu de la section suivante
   (--peek) : toutes les pages s'arrêtent au même niveau et laissent voir
   ce qui suit. Le contenu est centré par margin-block:auto. */
.hero{position:relative;min-height:calc(100svh - var(--peek));
  display:flex;flex-direction:column;
  padding:clamp(88px,11vh,116px) 0 0;overflow:hidden}
/* Voile sombre derrière le texte du hero. Son rôle est d'abord
   l'accessibilité : le blanc ne tient pas 4,5:1 sur l'orange ni sur le
   bleu clair du motif. La descente vers la droite est prolongée pour
   couvrir toute la largeur des lignes de texte. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(26% 20% at 91% 15%,rgba(8,0,39,.9) 0%,rgba(8,0,39,0) 100%),
    linear-gradient(180deg,rgba(8,0,39,.7) 0%,rgba(8,0,39,.12) 15%,rgba(8,0,39,.12) 76%,rgba(8,0,39,.88) 100%),
    linear-gradient(97deg,rgba(8,0,39,.95) 0%,rgba(8,0,39,.93) 50%,rgba(8,0,39,.84) 66%,
      rgba(8,0,39,.58) 76%,rgba(8,0,39,.2) 88%,rgba(8,0,39,0) 97%)}
/* Sur écran étroit le texte occupe toute la largeur : le dégradé
   horizontal ne suffit plus, on passe à un voile uniforme. */
@media(max-width:720px){
  .hero::after{background:
    linear-gradient(180deg,rgba(8,0,39,.88) 0%,rgba(8,0,39,.72) 20%,
      rgba(8,0,39,.72) 76%,rgba(8,0,39,.92) 100%)}
}
.hero-in{position:relative;z-index:2;width:100%;margin-block:0 auto;padding-bottom:clamp(26px,3.4vw,44px)}
.hero-kicker{font-size:clamp(15px,1.7vw,18px);font-weight:800;letter-spacing:.005em;margin:0 0 clamp(14px,2.2vw,22px)}
.hero-title{font-family:var(--serif);font-weight:400;line-height:.92;letter-spacing:-.025em;
  font-size:min(clamp(54px,10.5vw,150px),var(--title-h));margin:0}
/* marge sous le nom du moment : l'exposant 26 monte haut et viendrait
   sinon toucher les descendantes de la ligne du dessus */
.hero-title .ht-cre{display:block;font-style:italic;margin-bottom:.24em}

.hero-sub{margin:clamp(18px,2.4vw,26px) 0 0;font-size:clamp(17px,2vw,22px);line-height:1.4;
  font-weight:500;max-width:44ch}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(16px,2vw,22px);font-size:clamp(15px,1.8vw,18px);font-weight:700}
.hero-meta span{display:flex;align-items:center;gap:9px}
.ico-cal{width:17px;height:17px;flex-shrink:0;color:var(--coral)}
.pin{width:13px;height:13px;flex-shrink:0;background:var(--coral);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,2.8vw,32px)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;
  font-weight:800;font-size:16px;text-decoration:none;border:2px solid transparent;
  transition:transform .16s,background .18s,box-shadow .18s,color .18s;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-1{background:var(--coral);color:var(--navy);border-color:var(--coral)}
.btn-1:hover{box-shadow:0 12px 32px rgba(255,84,100,.36)}
.btn-2{background:transparent;color:var(--white);border-color:rgba(255,255,255,.42)}
.btn-2:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn-w{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn-w:hover{box-shadow:0 12px 32px rgba(255,255,255,.22)}

.cd-cap{margin:clamp(20px,2.6vw,28px) 0 8px;font-size:14px;font-weight:700;color:var(--ink-soft)}
.countdown{display:flex;gap:clamp(18px,3vw,34px);flex-wrap:wrap}
.cd-unit{min-width:56px}
.cd-n{font-family:var(--serif);font-size:clamp(26px,3.2vw,38px);line-height:1;display:block}
.cd-l{font-size:11.5px;font-weight:700;color:var(--ink-dim);margin-top:5px;display:block}

/* bandeau déroulant : un seul espacement entre tous les éléments, jointure comprise */
.marquee{position:relative;z-index:2;background:#fff;overflow:hidden;
  padding:clamp(16px,2vw,22px) 0;border-top:1px solid rgba(8,0,39,.08)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(28px,6vw,90px);z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.marquee::after{right:0;background:linear-gradient(-90deg,#fff,rgba(255,255,255,0))}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-group{--g:clamp(34px,4vw,60px);display:flex;align-items:center;gap:var(--g);padding-right:var(--g);flex-shrink:0}
.mq-group .lg{display:block;width:var(--w);height:var(--h);background-position:center;background-size:contain;background-repeat:no-repeat;flex-shrink:0}
.lg-adn{background-image:url("img/logo-adn.webp")}
.lg-noshaq{background-image:url("img/logo-noshaq.webp")}
.lg-hand{background-image:url("img/logo-hand.webp")}
.lg-wallonie{background-image:url("img/logo-wallonie-2026.webp")}
.lg-miil{background-image:url("img/logo-miil.webp")}
.lg-amplo{background-image:url("img/logo-amplo-2026.webp")}
.lg-wake{background-image:url("img/logo-wake.webp")}
.lg-pod{background-image:url("img/logo-pod.webp")}
.lg-sacd{background-image:url("img/logo-sacd.webp")}
.lg-ihecs{background-image:url("img/logo-ihecs.webp")}
.lg-hubbrussels{background-image:url("img/logo-hubbrussels-2026.webp")}
.lg-creativeeurope{background-image:url("img/logo-creativeeurope-2026.webp")}
.lg-scam{background-image:url("img/logo-scam-2026.webp")}
.mq-lab{font-size:12.5px;font-weight:800;color:var(--navy);white-space:nowrap;opacity:.7}
.mq-sep{width:1px;height:36px;background:rgba(8,0,39,.16);flex-shrink:0}
@keyframes mq{to{transform:translateX(-50%)}}
@media(max-width:700px){
  .mq-group .lg{width:calc(var(--w) * .72);height:calc(var(--h) * .72)}
  .mq-track{animation-duration:30s}
}
/* sans animation : un seul groupe, centré, qui passe à la ligne si besoin */
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none!important;width:auto;justify-content:center}
  .mq-group[aria-hidden="true"]{display:none}
  .mq-group{flex-wrap:wrap;justify-content:center;padding:0 var(--gut);flex-shrink:1;width:100%;row-gap:18px}
  .mq-group > .mq-sep:last-child{display:none}
}

/* ══════════════════ 6. SECTIONS ══════════════════ */
section{position:relative}
.sec{padding-block:var(--sec)}
.sec-alt{background:var(--navy-2)}
.head{max-width:70ch;margin-bottom:clamp(38px,5vw,60px)}
.head h2{margin-bottom:20px}

/* bandeau de triangles entre les sections */
.band{position:relative;height:clamp(46px,7vw,86px);overflow:hidden}
.band svg{position:absolute;inset:0;width:100%;height:100%}

/* ══════════════════ 7. PILIERS ══════════════════ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line)}
.pillar{background:var(--navy);padding:clamp(26px,3.4vw,38px)}
.pillar h3{color:var(--coral);font-family:var(--serif);font-weight:400;font-size:clamp(25px,3vw,34px);font-style:italic;margin-bottom:14px}
.pillar p{font-size:16px;color:var(--ink-soft);margin:0}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}


/* ══════════════════ 8. PARCOURS ══════════════════ */
.parcours{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(12,auto);
  column-gap:clamp(18px,2.2vw,26px);row-gap:0}
@media(max-width:1000px){
  /* une seule colonne : plus rien à aligner, on repasse en flux normal */
  .parcours{grid-template-columns:1fr;max-width:680px;row-gap:clamp(18px,2.2vw,26px)}
  .parcours .pc,.parcours .pc-out{display:block;grid-row:auto;grid-template-rows:none}
}

/* subgrid : les quatre bandes d'une carte (visuel, accroche, specs, détails)
   s'alignent d'une carte à l'autre, quelle que soit la longueur des textes */
.pc{position:relative;border:1px solid var(--line);background:var(--navy);
  display:grid;grid-row:span 12;grid-template-rows:subgrid;
  transition:border-color .22s}
@supports not (grid-template-rows:subgrid){
  .pc{grid-row:auto;grid-template-rows:auto auto auto auto 1fr}
  .pc-out{grid-row:auto;grid-template-rows:none;display:block}
}
.pc:hover{border-color:var(--c)}
.pc-vis{position:relative;height:186px;overflow:hidden;display:flex;align-items:flex-end;padding:22px}
.pc-vis svg{position:absolute;inset:0;width:100%;height:100%}
.pc-vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,0,39,.25),rgba(8,0,39,.86))}
.pc-vis-txt{position:relative;z-index:2}
.pc-vis-txt .lg{font-family:var(--serif);font-size:22px;display:block;line-height:1}

.pc-vis-txt .nm{font-family:var(--serif);font-style:italic;font-size:clamp(29px,3.4vw,38px);line-height:1.05;display:block;margin-top:4px}
.pc>*{--pad:clamp(22px,2.6vw,28px)}
.pc-punch,.pc-lead,.pc-specs,.pc-out{padding-inline:var(--pad)}
.pc-punch{font-size:16.5px;font-weight:600;line-height:1.5;margin:0;padding-top:var(--pad)}
.pc-lead{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft);padding-block:12px 0}
.pc-specs{list-style:none;margin:0;padding-block:18px 0;display:flex;flex-direction:column;gap:8px}
.pc-specs li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft);line-height:1.45}
.pc-specs li::before{content:"";width:9px;height:8px;margin-top:7px;flex-shrink:0;background:var(--c);
  clip-path:polygon(0 0,100% 0,50% 100%)}
.pc-out{border-top:1px solid var(--line);margin-top:20px;padding-top:18px;padding-bottom:var(--pad);
  display:grid;grid-row:span 8;grid-template-rows:subgrid}
.pc-out dt{font-size:12px;font-weight:700;color:var(--ink-dim);margin-bottom:5px}
.pc-out dd{margin:0 0 14px;font-size:15px;line-height:1.45}
.pc-out dd:last-child{margin-bottom:0}
.pc-out .who{font-weight:700}
.pc-out .xp{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);
  text-underline-offset:3px;text-decoration-thickness:1px;transition:color .16s,text-decoration-color .16s}
.pc-out .xp:hover{color:var(--c);text-decoration-color:currentColor}
.pc-out .xp-2{display:inline-block;margin-top:8px}
.pc-out .xp .ext{width:10px;height:10px;margin-left:5px;vertical-align:1px;opacity:.6}
.pc-out .who small{display:block;font-weight:500;color:var(--ink-dim);font-size:13.5px}

/* ══════════════════ BULLES CORAIL ══════════════════ */
.bubble{background:var(--coral);color:var(--navy);border-radius:20px;font-weight:600}
.bubble-inline{display:flex;align-items:center;gap:12px;margin:24px 0 0;padding:14px 22px;
  font-size:clamp(15px,1.6vw,16.5px);line-height:1.45;text-wrap:balance;
  width:max-content;max-width:calc(100vw - 2 * var(--gut))}
.ico-bubble{width:21px;height:21px;flex-shrink:0}
.bubble-block{margin-top:clamp(28px,3.5vw,40px);padding:clamp(24px,3.2vw,34px) clamp(24px,3.6vw,40px)}
.bubble-t{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(22px,2.6vw,28px);
  letter-spacing:-.01em;line-height:1.15;margin:0 0 12px;color:var(--navy)}
.bubble-block p{margin:0;font-size:clamp(16px,1.8vw,19px);line-height:1.55;max-width:78ch}

/* ══════════════════ 9. HORAIRE ══════════════════ */
.days{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.day-tab{background:transparent;border:1px solid var(--line);color:var(--ink-soft);
  padding:11px 18px;border-radius:999px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:.18s;white-space:nowrap}
.day-tab:hover{color:var(--white);border-color:rgba(255,255,255,.4)}
.day-tab[aria-selected="true"]{background:var(--white);color:var(--navy);border-color:var(--white)}
.day-tab small{display:block;font-weight:600;font-size:11.5px;opacity:.62;margin-top:1px}

.day-panel[hidden]{display:none}
.day-note{font-size:15px;color:var(--ink-soft);margin-bottom:26px;max-width:66ch}
.tl{border-left:2px solid var(--line);padding-left:clamp(20px,3vw,34px);margin:0}
.tl-row{position:relative;display:grid;grid-template-columns:78px 1fr;gap:clamp(14px,2.5vw,28px);
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.tl-row:last-child{border-bottom:0}
.tl-row::before{content:"";position:absolute;left:calc(-1 * clamp(20px,3vw,34px) - 7px);top:25px;
  width:12px;height:10px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}
.tl-h{font-family:var(--serif);font-size:19px;line-height:1.3;padding-top:1px}
.tl-t{font-weight:700;font-size:16.5px;line-height:1.35;margin:0 0 4px}
.tl-d{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin:0}
@media(max-width:600px){
  .tl-row{grid-template-columns:1fr;gap:4px}
  .tl-h{font-size:17px;color:var(--accent-ink)}
}

/* ══════════════════ 10. DISCORD ══════════════════ */
.dc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,68px);align-items:start}
@media(min-width:941px){.dc-card{margin-top:clamp(40px,5vw,64px)}}
@media(max-width:940px){.dc{grid-template-columns:1fr}}
.dc-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.dc-list li{display:flex;gap:12px;font-size:16px;line-height:1.5}
.dc-list li::before{content:"";width:11px;height:9px;margin-top:9px;flex-shrink:0;background:var(--accent);
  clip-path:polygon(0 0,100% 0,50% 100%)}
.dc-card{position:relative;border:1px solid var(--line);padding:clamp(28px,4vw,44px);overflow:hidden;
  background:var(--navy)}
.dc-card svg.pattern{opacity:.16}
.dc-card-in{position:relative;z-index:2}
.dc-card h3{margin-bottom:12px;font-size:clamp(21px,2.4vw,26px)}
.dc-card p{font-size:15.5px;color:var(--ink-soft)}
.dc-note{margin-top:30px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--coral);
  background:rgba(255,84,100,.07);font-size:15px;line-height:1.6}
.dc-note p{margin:0 0 10px}
.dc-note p:last-child{margin:0}
.dc-note-t{font-size:12.5px;font-weight:800;color:var(--coral)}

/* ══════════════════ 13. FAQ ══════════════════ */
.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 42px 22px 0;position:relative;
  font-weight:700;font-size:17px;line-height:1.4;transition:color .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--coral)}
.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:13px;height:11px;
  background:var(--coral);clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .22s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .a{padding:0 0 24px;color:var(--ink-soft);font-size:16px;max-width:66ch}

/* ══════════════════ 14. PIED DE PAGE ══════════════════ */
footer{background:var(--navy-2);border-top:1px solid var(--line);padding:clamp(46px,6vw,68px) 0 34px}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(28px,5vw,64px);flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid var(--line)}
.ft-people{display:flex;gap:clamp(32px,7vw,100px);flex-wrap:wrap}
.ft-person .role{font-size:12px;font-weight:700;color:var(--ink-dim);margin:0 0 6px}
.ft-person .who{font-family:var(--serif);font-size:20px;font-weight:400;margin:0 0 8px;line-height:1.1}
.ft-person a{display:block;text-decoration:none;font-size:14.5px;color:var(--ink-soft);
  padding:2px 0;transition:color .16s}
.ft-person a:hover{color:var(--coral)}
.ft-nav{display:flex;gap:28px;flex-wrap:wrap}
.ft-nav a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:color .16s}
.ft-nav a:hover{color:var(--white)}
.ft-bot{padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-dim)}

/* ══════════════════ 15. PLACEHOLDERS ÉDITORIAUX ══════════════════ */
[data-mode="edit"] .todo{
  background:rgba(255,214,0,.12);box-shadow:inset 0 0 0 1px rgba(255,214,0,.4);
  border-radius:3px;padding:2px 7px;color:#FFE79A}
[data-mode="edit"] .todo::before{content:"\270E\00A0";color:#FFD600;font-weight:800}
[data-mode="edit"] .todo-block{
  border:1px dashed rgba(255,214,0,.5);background:rgba(255,214,0,.07);padding:18px 20px;border-radius:5px}
[data-mode="live"] .todo::before{content:none}
[data-mode="edit"] .faq .a.todo{padding:16px 18px;margin-bottom:22px;display:block}
[data-mode="edit"] .tl-d.todo,[data-mode="edit"] .day-note.todo{display:block}

/* accent par section */
#creathon{--accent:var(--coral)}
#discord{--accent:var(--coral)}
#horaire{--accent:var(--coral)}

/* ══════════════════ 16. RÉVÉLATION AU SCROLL (unique, discrète) ══════════════════ */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.3,1)}

/* ══════════════════ OPTION IMAGES ══════════════════
   Pour utiliser les vrais visuels au lieu du motif SVG :
   1. déposez ia-days-generique.jpg dans /assets
   2. décommentez le bloc ci-dessous
.hero{background:url('assets/ia-days-generique.jpg') center/cover no-repeat}
.hero .pattern{display:none}
   ══════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   AJOUTS POUR LE SITE MULTI-PAGES (hub + pages par type d'événement)
   La couleur d'accent de chaque page est fixée par la classe posée sur
   <body> : .t-coral .t-teal .t-blue .t-orange
   ═══════════════════════════════════════════════════════════════════ */
body.t-coral  {--accent:var(--coral); --accent-ink:var(--coral)}
body.t-teal   {--accent:var(--teal);  --accent-ink:var(--teal-ink)}
body.t-blue   {--accent:var(--blue);  --accent-ink:var(--blue)}
body.t-orange {--accent:var(--orange);--accent-ink:var(--orange)}
body.t-sky    {--accent:var(--sky);   --accent-ink:var(--sky)}
body.t-coral  .btn-1{background:var(--coral);border-color:var(--coral);color:var(--navy)}
body.t-teal   .btn-1{background:var(--teal);border-color:var(--teal);color:var(--navy)}
body.t-blue   .btn-1{background:var(--blue);border-color:var(--blue);color:var(--white)}
body.t-orange .btn-1{background:var(--orange);border-color:var(--orange);color:var(--navy)}
body.t-sky    .btn-1{background:var(--sky);border-color:var(--sky);color:var(--navy)}
body.t-teal   .nav-links .nav-cta{background:var(--teal)}
body.t-blue   .nav-links .nav-cta{background:var(--blue);color:var(--white)!important}
body.t-orange .nav-links .nav-cta{background:var(--orange)}
body.t-sky    .nav-links .nav-cta{background:var(--sky)}
body.t-teal .nav-links a::after,body.t-blue .nav-links a::after,
body.t-orange .nav-links a::after,body.t-sky .nav-links a::after{background:var(--accent)}
body:not(.t-coral) :focus-visible{outline-color:var(--accent)}
.pin{background:var(--accent)}
.ico-cal{color:var(--accent-ink)}

/* Les pages intérieures partagent désormais exactement la géométrie du
   hero d'accueil : même hauteur, même rythme. Rien à surcharger ici. */
.hero-eyebrow{font-size:14px;font-weight:800;color:var(--accent-ink);margin:0 0 18px}

/* ── cartes des quatre temps (accueil) ── */
.temps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
@media(max-width:860px){.temps{grid-template-columns:1fr}}
.temps a{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);background:var(--navy);text-decoration:none;
  transition:border-color .2s,transform .2s}
.temps a:hover{border-color:var(--c);transform:translateY(-2px)}
.tp-vis{position:relative;height:150px;overflow:hidden;display:flex;align-items:flex-end;padding:20px}
.tp-vis svg{position:absolute;inset:0;width:100%;height:100%}
.tp-vis::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,0,39,.2),rgba(8,0,39,.9))}
.tp-vis span{position:relative;z-index:2;font-family:var(--serif);font-style:italic;
  font-size:clamp(25px,3vw,34px);line-height:1.05}
.tp-body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:12px;flex:1}
.tp-when{font-size:13px;font-weight:800;color:var(--c-ink,var(--c))}
.tp-body p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.tp-go{margin-top:auto;padding-top:14px;font-size:15px;font-weight:700;color:var(--white)}
.tp-go i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .2s}
.temps a:hover .tp-go i{transform:translateX(4px)}

/* ── calendrier de la semaine ── */
.week{border:1px solid var(--line);border-bottom:0}
.wk-row{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--line)}
@media(max-width:760px){.wk-row{grid-template-columns:1fr}}
.wk-day{padding:20px clamp(18px,2.4vw,26px);border-right:1px solid var(--line);background:rgba(255,255,255,.02)}
@media(max-width:760px){.wk-day{border-right:0;border-bottom:1px solid var(--line);padding-bottom:12px}}
.wk-day b{display:block;font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.1}
.wk-day span{font-size:13px;color:var(--ink-dim)}
.wk-items{display:flex;flex-direction:column}
.wk-i{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:16px clamp(18px,2.4vw,26px);
  border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;transition:background .16s}
.wk-i:last-child{border-bottom:0}
.wk-i:hover{background:rgba(255,255,255,.035)}
@media(max-width:560px){.wk-i{grid-template-columns:1fr;gap:3px}}
.wk-h{font-family:var(--serif);font-size:17px;color:var(--ink-soft)}
.wk-t{display:block;font-weight:700;font-size:16px;line-height:1.35;margin:0 0 3px}
.wk-d{display:block;font-size:14px;color:var(--ink-dim);line-height:1.45;margin:0}
.dot{display:inline-block;width:9px;height:8px;margin-right:8px;vertical-align:1px;
  clip-path:polygon(0 0,100% 0,50% 100%)}
.dot-coral{background:var(--coral)}.dot-teal{background:var(--teal)}
.dot-blue{background:var(--blue)}.dot-orange{background:var(--orange)}
.dot-sky{background:var(--sky)}

/* ── fiches événement (moments d'inspiration) ── */
.evts{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px)}
.evt{border:1px solid var(--line);background:var(--navy);
  display:grid;grid-template-columns:210px 1fr;transition:border-color .2s}
.evt:hover{border-color:var(--accent)}
@media(max-width:820px){.evt{grid-template-columns:1fr}}
.evt-when{padding:clamp(22px,2.6vw,30px);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.02)}
@media(max-width:820px){.evt-when{border-right:0;border-bottom:1px solid var(--line);
  flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap}}
.evt-day{font-family:var(--serif);font-size:clamp(24px,2.7vw,30px);line-height:1.05}
.evt-hour{font-size:15px;font-weight:700;color:var(--accent-ink)}
.evt-place{font-size:13.5px;color:var(--ink-dim);line-height:1.45}
.evt-main{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:14px}
.evt-main h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,27px);line-height:1.2}
.evt-main p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.evt-who{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.evt-p{font-size:15px;line-height:1.45}
.evt-p b{font-weight:700}
.evt-p span{display:block;color:var(--ink-dim);font-size:13.5px}
.evt-prog{border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.evt-prog summary{list-style:none;cursor:pointer;font-size:14.5px;font-weight:700;color:var(--accent-ink);
  display:flex;align-items:center;gap:9px;transition:opacity .16s}
.evt-prog summary::-webkit-details-marker{display:none}
.evt-prog summary::before{content:"";width:11px;height:9px;background:var(--accent);
  clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .2s}
.evt-prog[open] summary::before{transform:rotate(180deg)}
.evt-prog summary:hover{opacity:.78}
.evt-prog .pg-people{margin-top:12px}
.evt-when{min-width:0}
.evt-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.evt-link{font-size:15px;font-weight:700;text-decoration:none;color:var(--accent-ink);
  border-bottom:1px solid transparent;transition:border-color .16s}
.evt-link:hover{border-bottom-color:currentColor}
.evt-meta{font-size:13.5px;color:var(--ink-dim)}
.tag{display:inline-block;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);color:var(--ink-soft)}
/* Soirée de Bruxelles (4/11, hub.brussels) : seul rendez-vous hors de Liège, signalé par une pastille et une bordure bleu clair (19/10) */
.tag-bxl{background:var(--sky);color:var(--navy)}
.evt-bxl{border-color:rgba(48,188,237,.55)}
.evt-main .evt-note{font-size:13.5px;color:var(--ink-dim);line-height:1.5}

/* ── programme détaillé (journée scientifique, clôture) ── */
.prog{border-left:2px solid var(--line);padding-left:clamp(20px,3vw,34px);margin:0}
.pg{position:relative;display:grid;grid-template-columns:120px 1fr;gap:clamp(14px,2.5vw,28px);
  padding:20px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.pg:last-child{border-bottom:0}
.pg::before{content:"";position:absolute;left:calc(-1 * clamp(20px,3vw,34px) - 7px);top:27px;
  width:12px;height:10px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}
@media(max-width:620px){.pg{grid-template-columns:1fr;gap:4px}.pg::before{top:24px}}
.pg-h{font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--ink-soft);padding-top:1px}
@media(max-width:620px){.pg-h{color:var(--accent-ink);font-size:16px}}
.pg-eb{font-size:12.5px;font-weight:800;color:var(--accent-ink);margin:0 0 5px}
.pg-t{font-weight:700;font-size:17px;line-height:1.35;margin:0 0 6px}
.pg-d{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0}
.pg-people{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.pg-people li{font-size:14.5px;line-height:1.45;color:var(--ink-soft);display:flex;gap:10px}
.pg-people li::before{content:"";width:9px;height:8px;margin-top:7px;flex-shrink:0;
  background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}
.pg-people b{color:var(--white);font-weight:700}
/* Noms d'intervenants cliquables, sur le modèle des experts du créathon */
.pg-people .xp{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.38);
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .16s,text-decoration-color .16s}
.pg-people .xp:hover,.pg-people .xp:focus-visible{color:var(--accent-ink);
  text-decoration-color:currentColor}
.pg-people .xp:hover b,.pg-people .xp:focus-visible b{color:inherit}
.pg-people .xp .ext{width:10px;height:10px;margin-left:5px;vertical-align:1px;opacity:.65}
.pause .pg-t{font-weight:600;color:var(--ink-dim);font-size:15.5px}
.prog .pg:first-child .pg-t{font-weight:800;color:var(--white)}
.pause::before{opacity:.35}

/* ── encart d'information pratique ── */
.infos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:820px){.infos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.infos{grid-template-columns:1fr}}
.info{background:var(--navy);padding:24px}
.info dt{font-size:12.5px;font-weight:700;color:var(--ink-dim);margin-bottom:7px}
.info dd{margin:0;font-size:16.5px;font-weight:700;line-height:1.35}
.info dd small{display:block;font-weight:500;font-size:14px;color:var(--ink-soft);margin-top:3px}

/* ── bandeau d'appel final ── */
.cta{border:1px solid var(--line);padding:clamp(28px,4vw,48px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px}
.cta h2{margin:0}
.cta p{margin:0;max-width:56ch;color:var(--ink-soft)}

/* ── Lettrage « IAdays²⁶ » ─────────────────────────────────────────
   Proportions relevées sur le visuel officiel ia-days-générique :
   le 26 fait 0,60 du corps et sa ligne de pied est remontée de 0,72
   de son propre corps. Une seule règle pour tous les emplacements,
   afin que le lettrage soit identique partout. */
sup{font-size:.6em;vertical-align:baseline;position:relative;top:-.72em}

/* ── Écrans peu hauts (portables 768–880 px) ───────────────────────
   Le créathon porte en plus un compte à rebours. On le compacte et on
   réduit l'aperçu pour que les cinq pages s'arrêtent au même niveau. */
@media (max-height:880px){
  :root{--peek:56px;--title-h:8.4svh}
  .hero{padding-top:clamp(72px,9vh,92px)}
  .hero-in{padding-bottom:clamp(22px,2.4vw,28px)}
  .cd-cap{margin:clamp(12px,1.6vw,16px) 0 4px;font-size:12.5px}
  .cd-n{font-size:clamp(24px,2.6vw,28px)}
  .cd-l{font-size:10.5px;margin-top:3px}
}

/* Écrans très peu hauts : on resserre encore et on réduit l'aperçu. */
@media (max-height:745px){
  :root{--peek:36px;--title-h:7.4svh}
  .hero{padding-top:clamp(60px,8vh,76px)}
  .cd-cap{margin:8px 0 3px}
  .cd-n{font-size:22px}
}