/* Identité visuelle : emlyon business school (valeurs relevées sur em-lyon.com)
   rouge #E2001A · noir #131414 · bleu nuit #001931 · crèmes #F0EEE6 / #F4F2F1 / #FAF9F7
   Poppins (titres légers, interlettrage .05em) · Noto Serif (citations) · angles droits */

@font-face { font-family: "Poppins"; src: url(assets/fonts/Poppins-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(assets/fonts/Poppins-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(assets/fonts/Poppins-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(assets/fonts/Poppins-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(assets/fonts/NotoSerif-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(assets/fonts/NotoSerif-RegularItalic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(assets/fonts/NotoSerif-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --red: #E2001A;
  --red-dark: #AD181C;
  --ink: #131414;
  --navy: #001931;
  --bg: #FAF9F7;
  --cream: #F0EEE6;
  --cream-2: #F4F2F1;
  --grey: #737373;
  --grey-light: #C5C5C5;
  --gold: #FFB210;
  --line: #E4E1DA;
  --bar-h: clamp(48px, 7.6vh, 160px);
  --sans: "Poppins", Arial, sans-serif;
  --serif: "Noto Serif", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, min(1.5vw, 2.4vh), 96px);
  line-height: 1.55;
}
[hidden] { display: none !important; }
.notion { display: none; }

#app { height: 100vh; display: flex; flex-direction: column; position: relative; }

/* ---------- Top bar : logo + plan ---------- */
#topbar {
  height: var(--bar-h);
  background: var(--navy);
  color: #fff;
  flex: none;
  display: flex;
}
#brand {
  flex: none; width: var(--bar-h); height: var(--bar-h); display: block; background: var(--red);
  border: 0; padding: 0; cursor: pointer;
}
#brand:hover, #brand:focus-visible { filter: brightness(1.12); }
#brand img { display: block; width: 100%; height: 100%; }
#plan { display: flex; flex: 1; height: 100%; overflow-x: auto; scrollbar-width: none; }
.plan-item {
  flex: 1 0 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 1rem;
  border: 0; border-bottom: 4px solid transparent; border-radius: 0;
  background: transparent; color: rgba(255, 255, 255, .55);
  font: inherit; font-size: .78em; letter-spacing: .05em; cursor: pointer;
  transition: background .15s, color .15s;
}
.plan-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.plan-name { font-weight: 500; white-space: nowrap; }
.plan-dur { font-size: .75em; font-weight: 300; opacity: .8; }
.plan-item.done { color: rgba(255, 255, 255, .85); border-bottom-color: rgba(255, 255, 255, .25); }
.plan-item.active { color: #fff; background: var(--red); border-bottom-color: #fff; }

#progress { height: 4px; background: var(--grey-light); flex: none; }
#progress-bar { height: 100%; width: 0; background: var(--red); transition: width .2s; }

/* ---------- Scène ---------- */
#stage { flex: 1; overflow-y: auto; padding: 3vh 7vw; display: flex; position: relative; }
.slide { margin: auto; width: 100%; max-width: 72em; animation: in .2s ease-out; }
/* Slides à phases : ancrées en haut pour que le titre ne bouge pas quand le contenu change */
.slide.has-faces { margin-top: 1vh; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1 {
  font-weight: 300; letter-spacing: .05em; line-height: 1.25;
  font-size: 1.85em; margin: 0 0 .75em; color: var(--ink);
}
h1::after { content: ""; display: block; width: 3.2rem; height: 4px; background: var(--red); margin-top: .5em; }
h1 small { font-size: .5em; font-weight: 400; letter-spacing: .05em; color: var(--grey); }
h1 strong, h1 em { font-weight: 600; }
h2 { font-size: 1.15em; font-weight: 600; letter-spacing: .05em; margin: 1em 0 .4em; color: var(--red); }
p { margin: .6em 0; }
strong { font-weight: 600; }
a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-dark); }
ul { padding-left: 1.2em; margin: .4em 0; }
li { margin: .35em 0; }
li::marker { color: var(--red); }
ul.spaced > li { margin: .75em 0; }
.source { color: var(--grey); font-size: .8em; }

/* Sources : regroupées en bas à droite de la slide, grises et discrètes, séparées par " / ".
   L'URL d'origine reste dans data-href (pour générer plus tard une liste de sources). */
.slide footer.sources { display: none; }
#sources-panel {
  flex: none; text-align: right; padding: 0 7vw .5em;
  font-size: .6em; letter-spacing: .02em; color: var(--grey); line-height: 1.5;
}
#sources-panel cite { font-style: normal; }
#sources-panel cite + cite::before { content: " / "; }

/* Citations : l'éditorial passe en Noto Serif */
blockquote {
  margin: 1em 0; padding: .7em 1.3em;
  border-left: 4px solid var(--red);
  background: #fff; font-family: var(--serif); font-size: 1.1em; line-height: 1.6;
}
blockquote.small { font-size: .95em; }
blockquote cite {
  display: block; margin-top: .7em; font-family: var(--sans); font-style: normal;
  font-size: .75em; letter-spacing: .03em; color: var(--grey);
}

/* ---------- Callouts ---------- */
.callout {
  margin: 1em 0; padding: .85em 1.2em; border-radius: 0;
  background: var(--cream); border-left: 4px solid var(--navy);
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout::before { margin-right: .4em; }
.callout.interact::before { content: "👥"; }
.callout.warn { background: #FFF4D6; border-left-color: var(--gold); }
.callout.warn::before { content: "⚠️"; }
.callout.media { background: var(--navy); color: #fff; border-left-color: var(--red); }
.callout.media a { color: #fff; }
.callout.media::before { content: "▶️"; }
.callout.accent { background: #fff; border-left-color: var(--red); }
.callout.accent::before { content: none; }
.callout.big { font-size: 1.35em; font-weight: 300; letter-spacing: .03em; padding: 1.1em 1.4em; }
.callout h1 { margin: 0; }
.callout h1::after { content: none; }

/* Diapositives "titre" : aplat rouge, texte blanc */
.slide-title { text-align: center; }
.slide-title .callout.accent.big {
  background: var(--red); color: #fff; border: 0; padding: 2em 1.5em;
}
.slide-title .callout.accent.big h1 { color: #fff; font-size: 2.3em; }
.slide-title .callout.accent.big a { color: #fff; }
.slide-title .callout.interact { text-align: left; }
.slide-title > .kicker { text-align: left; }
.slide-title > h1 { font-size: 2.4em; }
.slide-title > h1::after { margin-left: auto; margin-right: auto; }

/* ---------- Colonnes / cartes ---------- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; margin: 1em 0; }
.card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: 0; padding: 1em 1.3em; }
.card h2 { margin-top: 0; color: var(--ink); }
.card.good { border-top-color: var(--navy); }
.card.bad { border-top-color: var(--red); }
.card.bad h2 { color: var(--red); }

/* ---------- Tableaux ---------- */
table { width: 100%; border-collapse: collapse; background: #fff; font-size: .85em; margin: 1em 0; }
th, td { padding: .6em .8em; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--navy); color: #fff; font-weight: 500; letter-spacing: .05em; }
td:first-child { font-weight: 600; }
tbody tr:nth-child(even) td { background: var(--cream-2); }

/* ---------- Composants de mise en page ---------- */
.lead { font-size: 1.15em; font-weight: 300; letter-spacing: .02em; margin: .3em 0 .8em; }
.lead .muted, .muted { color: var(--grey); font-size: .8em; }
.kicker { font-size: .7em; letter-spacing: .14em; text-transform: uppercase; color: var(--red); font-weight: 600; margin: 0 0 .5em; }
.small { font-size: .8em; }
mark { background: none; color: var(--red); font-weight: 600; }

.grid { display: grid; gap: 1em; margin: 1em 0; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(6, 1fr); }
.g5 > :nth-child(-n+3) { grid-column: span 2; }
.g5 > :nth-child(n+4) { grid-column: span 3; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.6em; align-items: center; margin: 1em 0; }

/* Présentation de l'intervenant : portrait + titre */
.speaker-head { display: flex; align-items: center; gap: 2em; margin-bottom: .6em; }
.speaker-head .lead { margin-bottom: 0; }
.speaker-name { margin: 0 0 .3em; font-size: 1.6em; font-weight: 600; letter-spacing: .03em; color: var(--red); }
.speaker-head h1 { font-size: 1.5em; margin-bottom: .3em; }
.speaker-head h1::after { content: none; }
.portrait { flex: none; width: 8.2em; height: 8.2em; object-fit: cover; box-shadow: .45em .45em 0 var(--red); }

/* Sélecteur de phase (Définition / Exemple / Statistiques) sous le titre */
.face-tabs { display: flex; margin: -.2em 0 1.1em; width: fit-content; max-width: 100%; }
.face-tabs button {
  font: inherit; font-size: .72em; letter-spacing: .05em; cursor: pointer; border: 0; border-radius: 0;
  padding: .55em 1.7em .55em 1.5em; margin-left: -.9em; background: #fff; color: var(--grey);
  clip-path: polygon(0 0, calc(100% - .9em) 0, 100% 50%, calc(100% - .9em) 100%, 0 100%, .9em 50%);
  transition: background .15s, color .15s;
}
.face-tabs button:first-child { margin-left: 0; padding-left: 1.2em; clip-path: polygon(0 0, calc(100% - .9em) 0, 100% 50%, calc(100% - .9em) 100%, 0 100%); }
.face-tabs button:hover { color: var(--ink); background: var(--cream); }
.face-tabs button.done { background: var(--cream); color: var(--ink); }
.face-tabs button.on { background: var(--red); color: #fff; }

/* Tableau de bord dense : beaucoup de chiffres sur une seule diapositive */
.dense .grid { gap: .7em; margin: .7em 0; }
.dense .stat { padding: .4em .8em .5em; }
.dense .stat .n { font-size: 1.9em; }
.dense .stat .l { font-size: .7em; line-height: 1.4; }
.dense .stat .kicker { margin-bottom: .2em; font-size: .6em; }
.dense .tile { font-size: .68em; padding: .6em .8em .7em; }
.dense .tile h3 { margin: .2em 0 .25em; }
.dense .tile .ico { font-size: 1em; margin-bottom: 0; }
.dense .dots i { width: 1em; height: 1em; }


/* Vidéo intégrée dans la diapositive : cadre 16:9 qui suit la largeur de la colonne */
.stack { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.video-split { align-items: center; }
.video { margin: 0; min-width: 0; }
.video .frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); border-top: 4px solid var(--red); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: .4em; font-size: .62em; color: var(--grey); letter-spacing: .02em; }

/* Enjeu sans cartes : enchaînement en texte, puis contraste séparé par un filet */
.subtitle { font-size: 1.05em; color: var(--red); letter-spacing: .02em; margin: -.4em 0 .8em; font-weight: 500; }
.chain { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .45em; margin: .6em 0 .2em; font-size: 1.25em; font-weight: 300; line-height: 1.35; }
.chain i { font-style: normal; color: var(--red); }
.chain .hot { color: var(--red); font-weight: 500; }
.chain-note { margin: 0 0 1.4em; color: var(--grey); font-size: .9em; }
.contrast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.contrast .side { margin: 0; font-size: 1.2em; font-weight: 500; line-height: 1.25; color: var(--navy); }
.contrast .side.alert { color: var(--red); }
.contrast .mid { margin: 0; color: var(--grey); letter-spacing: .2em; font-size: .75em; font-weight: 600; }

/* Illustrations en bas de la phase Statistiques (impact écologique) */
.ill-row { display: flex; gap: 1em; justify-content: center; margin-top: .8em; }
.ill-row figure { margin: 0; flex: 0 1 auto; }
.ill-row img { display: block; height: 11vh; width: auto; max-width: 100%; border-radius: 4px; }
.dense .grid.g4 + .grid.g4 .tile { font-size: .64em; padding: .5em .7em .6em; }
.dense .grid.g4 + .grid.g4 .tile .ico { margin-bottom: .2em; }

.qs { margin: .5em 0 0; padding-left: 1.2em; }
.qs li { margin: .25em 0; }

/* Mini-jeu : boutons qui affichent un dessin pendant 3 secondes */
.reveal { margin-top: 1.6em; text-align: center; }
.reveal-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; }
.reveal-buttons button { background: var(--navy); color: #fff; border: 0; padding: .8em 1.5em; font: inherit; font-size: .8em; letter-spacing: .02em; cursor: pointer; }
.reveal-buttons button:hover, .reveal-buttons button:focus-visible { background: var(--red); outline: none; }
.reveal-stage { position: absolute; inset: 0; z-index: 30; margin: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 1.5vh 2vw; cursor: pointer; }
.reveal-stage[hidden] { display: none; }
.reveal-stage img { display: block; width: 100%; height: 100%; object-fit: contain; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(19, 20, 20, .08); }

/* Enjeu : bandeau de chaîne causale et deux aplats de couleur pour le contraste */
.stakes-band { background: var(--navy); color: #fff; padding: 1.4em 1.6em 1.3em; margin-top: .4em; }
.stakes-band .chain { color: #fff; margin: 0; }
.stakes-band .chain i { color: var(--red); }
.stakes-band .chain .hot { color: #fff; background: var(--red); padding: .05em .4em; font-weight: 500; }
.stakes-band .chain-note { color: #cfd8e0; margin: .6em 0 0; }
.stakes-band .chain-note strong { color: #fff; }
.stakes-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); margin-top: 1.2em; min-height: 26vh; }
.duo-side { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .5em; padding: 1.4em 1.8em; }
.duo-side.red { background: var(--red); color: #fff; }
.duo-side.cream { background: var(--cream); color: var(--navy); }
.duo-side p { margin: 0; font-size: 1.35em; font-weight: 500; line-height: 1.25; }
.duo-ico { font-size: 2.8em; line-height: 1; }
.duo-mid { align-self: center; z-index: 1; width: 2.6em; height: 2.6em; margin: 0 -1.3em; border-radius: 50%; background: #fff; border: 2px solid var(--red); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: .8em; font-weight: 600; letter-spacing: .08em; }
@media (max-width: 900px) { .stakes-duo { grid-template-columns: 1fr; } .duo-mid { margin: -1.3em auto; } }

/* Question seule, centrée et mise en valeur ; onglets de phase masqués avant la phase indiquée */
.face-tabs[hidden] { display: none; }
.question-stage { min-height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.question-stage .question { margin: 0; max-width: 22em; font-size: 2.3em; font-weight: 500; line-height: 1.25; color: var(--navy); border-top: 4px solid var(--red); padding-top: .5em; }

/* Question d'ouverture et grille des ODD (icônes officielles de l'ONU) */
.question { font-size: 1.9em; font-weight: 300; line-height: 1.3; max-width: 26em; margin: 1.2em 0 0; }
.odd-grid { list-style: none; margin: .8em 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 9.6em); gap: .6em .8em; }
.odd-grid li { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3em; width: 9.6em; height: 9.6em; padding: .35em .3em; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 6px; box-shadow: 0 2px 8px rgba(19, 20, 20, .05); font-size: .66em; line-height: 1.2; color: var(--ink); }
.odd-grid img { width: 2.8em; height: 2.8em; display: block; }
.odd-grid li.on { border-color: var(--red); border-top-color: var(--c); font-weight: 600; box-shadow: 0 4px 14px rgba(226, 0, 26, .18); }
@media (max-width: 900px) { .odd-grid { grid-template-columns: repeat(3, 9.6em); } }

/* ODD 15 : photo, icône officielle et faits en liste */
.odd-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6em; align-items: center; }
.odd-hero .photo { margin: 0; min-width: 0; }
.odd-hero .photo img { display: block; width: 100%; max-height: 36vh; object-fit: cover; }
.odd-hero .photo figcaption { font-size: .6em; color: var(--grey); margin-top: .4em; }
.odd-head { min-width: 0; }
.odd-head .odd-ico { width: 6.5em; height: 6.5em; display: block; margin-bottom: .4em; }
.odd-head h1 { margin: 0; }
.odd-head h1::after { display: none; }
.facts { list-style: none; margin: .8em 0 0; padding: 0; display: grid; gap: .3em; }
.facts li { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: baseline; gap: .8em; border-top: 1px solid var(--line); padding-top: .5em; font-size: .9em; }
.facts li > b { font-size: 1.6em; font-weight: 300; color: var(--red); line-height: 1; }
.facts li span { line-height: 1.35; }
.para { margin: .8em 0 0; font-size: .72em; color: var(--grey); max-width: 60em; }
@media (max-width: 900px) { .odd-hero { grid-template-columns: 1fr; } }

/* Principes (Destination Coop) : logo, puis liste en deux colonnes, sans cartes */
.principles-head { display: flex; align-items: center; gap: 1.2em; }
.principles-head h1 { margin: 0; }
.brand-logo { height: 7.5em; width: auto; flex: none; }
.principles { list-style: none; margin: 1em 0 0; padding: 0; columns: 2; column-gap: 2.5em; }
.principles li { break-inside: avoid; border-top: 1px solid var(--line); padding: .55em 0 .7em; }
.principles h3 { margin: 0 0 .2em; font-size: .95em; color: var(--navy); font-weight: 600; }
.principles p { margin: 0; font-size: .78em; line-height: 1.45; }
@media (max-width: 900px) { .principles { columns: 1; } .brand-logo { height: 5em; } }

/* Graphiques SVG (valeurs saisies depuis les sources citées) */
.chart { margin: 0; min-width: 0; }
.chart figcaption { font-size: .62em; color: var(--grey); margin-bottom: .4em; letter-spacing: .02em; }
.chart svg { width: 100%; max-height: 46vh; height: auto; display: block; }
/* Exemple (Ormuz) : carte à gauche, chronologie et conclusion à droite */
.ex-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2em; align-items: center; }
.ex-layout .chart.map img { max-height: 48vh; }
.ex-text .kicker { margin-top: 0; }
.ex-text .tl { margin-top: .8em; }
.ex-text .conclusion { margin: 1.2em 0 0; font-size: 1.1em; font-weight: 600; color: var(--red); line-height: 1.35; }
.ex-layout .chart.map img { max-height: 36vh; }
.ex-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 1em; align-items: stretch; margin-top: 1em; }
.ex-stats .stat { margin: 0; }
.ex-stats .stat .n { font-size: 1.6em; }
.ex-stats .chart { margin: 0; }
.ex-stats .chart svg { max-height: 22vh; }
.ex-stats .chart figcaption { font-size: .6em; }
@media (max-width: 900px) { .ex-stats { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ex-layout { grid-template-columns: 1fr; } }
.split.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.split.three .tile.xl { font-size: .85em; }
@media (max-width: 900px) { .split.three { grid-template-columns: 1fr; } }
.chart.map img { display: block; width: 100%; max-height: 40vh; object-fit: contain; }
.chart .axis { stroke: var(--grey-light); stroke-width: 1.5; }
.chart .bar.before { fill: var(--grey-light); }
.chart .bar.after { fill: var(--red); }
.chart .val { font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.chart .lab { font-family: "Poppins", sans-serif; font-size: 13px; fill: var(--grey); text-anchor: middle; }
.chart-link { font-size: .62em; color: var(--grey); margin-top: .6em; }
.chart-link a { color: var(--grey); }

/* Grille de 10 cases : 2 cases rouges pour environ 20 % */
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: .25em; margin-top: .8em; }
.waffle i { display: block; aspect-ratio: 1; background: var(--cream); border: 1px solid var(--line); }
.waffle i:nth-child(-n+2) { background: var(--red); border-color: var(--red); }

/* Barre de répartition : la richesse créée est découpée entre ses bénéficiaires ; la largeur de chaque segment est proportionnelle à --w */
.bar-split { display: flex; width: 100%; height: 4.2em; margin: .9em 0 1.4em; border: 1px solid var(--line); }
.bar-split .seg { flex: var(--w) 1 0%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: .3em .5em; background: var(--navy); color: #fff; font-size: .72em; line-height: 1.15; font-weight: 500; text-align: center; overflow: hidden; }
.bar-split .seg + .seg { border-left: 2px solid #fff; }
.bar-split .seg.s2 { background: #2b3f55; }
.bar-split .seg.s3 { background: #5b6b7a; }
.bar-split .seg.s4 { background: var(--red); font-size: 1em; font-weight: 600; }
.bar-split .seg.s5 { background: var(--grey); }

/* Tuiles (cartes) avec icône */
.tile { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); padding: .9em 1.1em 1em; font-size: .82em; line-height: 1.5; }
.tile h3 { margin: .3em 0 .35em; font-size: 1.1em; font-weight: 600; letter-spacing: .03em; }
.tile p { margin: .3em 0; }
.tile .ico { margin-bottom: .2em; }
.tile.navy { background: var(--navy); color: #fff; border-top-color: var(--red); }
.tile.navy h3 { color: #fff; }
.tile.cream { background: var(--cream); }
.tile.alert { border-top-color: var(--navy); }
.ico { display: inline-grid; place-items: center; width: 2.3em; height: 2.3em; background: var(--cream); font-size: 1.35em; line-height: 1; }
.tile.navy .ico { background: rgba(255, 255, 255, .12); }
.num-badge { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .4em; background: var(--red); color: #fff; font-weight: 600; font-size: .9em; }
.tile .row { display: flex; align-items: center; gap: .7em; }
.tile .row h3 { margin: 0; }
.tag { display: inline-block; font-size: .72em; letter-spacing: .05em; padding: .15em .6em; background: var(--cream); color: var(--ink); margin: .15em .25em .15em 0; }
.tag.red { background: var(--red); color: #fff; }
.tag.navy { background: var(--navy); color: #fff; }

/* Chiffres clés */
.stat { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); padding: .55em 1em .65em; }
.stat .n { font-size: 2.4em; font-weight: 300; color: var(--red); line-height: 1.1; letter-spacing: .01em; }
.g5 .stat .n { font-size: 2.1em; }
sup { line-height: 0; }
.stat .n small { font-size: .45em; letter-spacing: .03em; color: var(--ink); font-weight: 400; white-space: nowrap; }
.stat .l { font-size: .78em; line-height: 1.45; }
.stat .l b { font-weight: 600; }
.stat.navy { border-left-color: var(--navy); }
.stat.navy .n { color: var(--navy); }
.stat.dark { background: var(--navy); color: #fff; border-color: var(--navy); border-left-color: var(--red); }
.stat.dark .n { color: #fff; }
.stat.dark .l { color: rgba(255, 255, 255, .85); }
.stat.dark .n small { color: rgba(255, 255, 255, .8); }
.stat.dark .l b { color: #fff; }
.stat.sm .n { font-size: 1.8em; }
.stat.sm { font-size: .9em; }

/* Enchaînements (→) */
.flow { display: flex; align-items: stretch; gap: .5em; margin: 1em 0; }
.flow > .step { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); padding: .7em .9em; font-size: .82em; line-height: 1.45; }
.flow > .step.red { border-top-color: var(--red); }
.flow > .step.navy { background: var(--navy); color: #fff; border-color: var(--navy); border-top-color: var(--red); }
.flow > .step h3 { margin: 0 0 .25em; font-size: 1.05em; font-weight: 600; }
.flow > .step p { margin: .2em 0; }
.flow > .arrow { align-self: center; color: var(--red); font-size: 1.5em; font-weight: 300; flex: none; }
.flow.wrap { flex-wrap: wrap; }
.flow.centered > .step { text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: .5em; margin: .6em 0; }
.chip { background: #fff; border: 1px solid var(--grey-light); padding: .25em .8em; font-size: .78em; letter-spacing: .03em; }
.chip.red { background: var(--red); border-color: var(--red); color: #fff; }
.chip.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.eq { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin: 1em 0; }
.eq .op { font-size: 1.6em; color: var(--red); font-weight: 300; }
.eq .term { background: #fff; border: 1px solid var(--line); border-bottom: 4px solid var(--red); padding: .5em 1em; font-size: .9em; font-weight: 500; }
.eq .term.result { background: var(--navy); color: #fff; border-color: var(--navy); border-bottom-color: var(--red); }
.formula { font-size: 3.2em; font-weight: 300; color: var(--red); line-height: 1; letter-spacing: .04em; }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1em; align-items: stretch; margin: 1em 0; }
.vs > .mid { align-self: center; font-weight: 600; letter-spacing: .1em; color: var(--red); font-size: .9em; }

/* Citation mise en avant */
blockquote.hero { background: transparent; border: 0; padding: 0 0 0 1.6em; position: relative; font-size: 1.5em; line-height: 1.5; margin: .4em 0 1em; }
blockquote.hero::before { content: "“"; position: absolute; left: -.05em; top: -.25em; font-size: 3.4em; color: var(--red); font-family: var(--serif); line-height: 1; }
blockquote.hero cite { font-size: .55em; }

/* Frise horizontale / verticale */
.tl { list-style: none; margin: 1em 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 8.1em; top: .5em; bottom: .5em; width: 2px; background: var(--grey-light); }
.tl > li { position: relative; padding: .35em 0 .6em 9.7em; margin: 0; }
.tl > li::before { content: ""; position: absolute; left: 7.7em; top: .75em; width: .85em; height: .85em; background: var(--red); border: 3px solid var(--bg); box-sizing: content-box; }
.tl > li > .when { position: absolute; left: 0; width: 7.2em; text-align: right; font-weight: 600; color: var(--red); top: .3em; font-size: .95em; line-height: 1.3; }
.tl > li > .what { font-size: .9em; line-height: 1.5; }
.tl > li.end::before { background: var(--navy); }
.tl > li.end > .when { color: var(--navy); }
.tl-h { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1em; margin: 1.6em 0 1em; padding: 1.4em 0 0; position: relative; }
.tl-h::before { content: ""; position: absolute; left: 0; right: 0; top: .35em; height: 3px; background: var(--navy); }
.tl-h > li { position: relative; margin: 0; font-size: .8em; line-height: 1.5; }
.tl-h > li::before { content: ""; position: absolute; left: 0; top: -1.55em; width: 1em; height: 1em; background: var(--red); border-radius: 0; }
.tl-h > li .when { display: block; font-size: 1.25em; font-weight: 600; color: var(--red); margin-bottom: .2em; }
.tl-h > li.now::before { background: var(--navy); }
.tl-h > li.now .when { color: var(--navy); }

/* Plan : une seule frise verticale en forme de flèche ; la hauteur de chaque bloc est proportionnelle à la durée de la partie */
.plan-slide { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); column-gap: 3.5em; align-items: center; }
.plan-slide > h1 { margin: 0; }
.plan-line { display: flex; flex-direction: column; gap: .25em; height: min(66vh, 34em); }
.plan-line::after { content: ""; flex: none; height: 2em; background: var(--navy); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.plan-line .seg { flex: var(--w) 1 0%; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 1.1em; background: var(--navy); color: #fff; overflow: hidden; }
.plan-line .seg.c1, .plan-line .seg.c3, .plan-line .seg.c5, .plan-line .seg.c7 { background: var(--red); }
.plan-line .t { font-size: min(1em, 2.6vh); font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
.plan-line .d { font-size: .62em; letter-spacing: .06em; opacity: .65; white-space: nowrap; }
.plan-line .seg.pause { background: repeating-linear-gradient(45deg, var(--cream), var(--cream) .4em, #fff .4em, #fff .8em); color: var(--grey); border: 1px solid var(--grey-light); }
.plan-line .seg.pause .t { font-style: italic; font-size: min(.85em, 2.2vh); }

/* Barres comparatives */
.bars { display: grid; grid-template-columns: minmax(9em, 16em) 1fr; gap: .45em 1em; align-items: center; margin: 1em 0; font-size: .85em; }
.bars .lab { font-weight: 500; line-height: 1.3; }
.bars .rows { display: grid; gap: .25em; }
.bar-line { display: flex; align-items: center; gap: .6em; }
.bar-line .fill { flex: none; max-width: calc(100% - 4em); height: 1.1em; background: var(--grey-light); }
.bar-line.red .fill { background: var(--red); }
.bar-line.navy .fill { background: var(--navy); }
.bar-line .v { font-size: .85em; font-variant-numeric: tabular-nums; text-align: left; }
.legend { display: flex; gap: 1.4em; font-size: .72em; color: var(--grey); margin: .2em 0 .6em; }
.legend i { display: inline-block; width: .9em; height: .9em; margin-right: .4em; vertical-align: -.1em; }
.dots { display: flex; gap: .3em; margin: .4em 0; }
.dots i { width: 1.4em; height: 1.4em; background: var(--red); }
.dots i.ok { background: var(--navy); }
.progress { height: 1.1em; background: var(--grey-light); margin: .4em 0; }
.progress > i { display: block; height: 100%; background: var(--red); }

/* Diapositives "titre + pictogramme" */
.big-ico { font-size: 4em; line-height: 1; margin-bottom: .2em; }


.tile.xl { font-size: 1.25em; padding: 1.4em 1.8em; }
.tile.xl .ico { font-size: 1.6em; }
.tile.xl h3 { font-size: 1.3em; }

/* Jeu : remettre la définition dans l'ordre */
.dnd { margin: 1em 0; }
.dnd-slots { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 1.2em; }
.dnd-slot { position: relative; min-width: 7em; min-height: 3.2em; display: flex; align-items: stretch; background: #fff; border: 2px dashed var(--grey-light); padding: .25em; transition: border-color .15s, background .15s; }
.dnd-slot .dnd-n { position: absolute; top: .15em; left: .4em; font-size: .6em; color: var(--grey); font-weight: 600; }
.dnd-slot.filled { border-style: solid; border-color: var(--line); }
.dnd-slot.filled .dnd-n { display: none; }
.dnd-slot.over, .dnd-pool.over { border-color: var(--red); background: var(--cream); }
.dnd-pool { display: flex; flex-wrap: wrap; gap: .5em; min-height: 3.6em; padding: .6em; background: var(--cream); border: 2px dashed transparent; }
.dnd-card { background: var(--navy); color: #fff; padding: .55em .9em; font-size: .9em; line-height: 1.35; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; display: flex; align-items: center; border-bottom: .25em solid transparent; }
.dnd-card:hover { background: #0b2c4d; }
.dnd-card.sel { outline: 3px solid var(--red); outline-offset: 2px; }
.dnd-card.ok { border-bottom-color: #2a9d5c; }
.dnd-card.ko { border-bottom-color: var(--red); }
.dnd-card.dragging { position: fixed; z-index: 1000; pointer-events: none; cursor: grabbing; box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .35); transform: rotate(-1.5deg); margin: 0; }
.dnd.solved .dnd-slot { border-color: #2a9d5c; }
.dnd.solved .dnd-card { background: #1f7a4d; }
.dnd.solved .dnd-pool { display: none; }
.dnd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin-top: 1em; }
.dnd-bar button { font: inherit; font-size: .78em; letter-spacing: .04em; padding: .45em 1.1em; background: #fff; border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.dnd-bar button:hover { background: var(--ink); color: #fff; }
.dnd-msg { font-size: .85em; margin-left: .6em; }
.dnd-msg.good { color: #1f7a4d; font-weight: 600; }
.dnd-msg.bad { color: var(--red); }

/* ---------- Plan du cours ---------- */

/* ---------- Notes de l'intervenant ---------- */
.slide aside.notes { display: none; }
#notes-panel {
  flex: none; max-height: 34vh; overflow-y: auto;
  background: #D4D4D4; color: #2b2b2b; border-top: 1px solid #b5b5b5;
  padding: .7em 7vw .9em; font-size: .72em; line-height: 1.5;
}
#notes-panel h2 {
  margin: 0 0 .4em; font-size: .8em; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #5a5a5a;
}
#notes-panel .callout {
  background: transparent; color: inherit; border-left: 3px solid #8a8a8a;
  margin: .4em 0; padding: .1em .8em; font-size: 1em; font-weight: 400; letter-spacing: 0;
}
#notes-panel .callout::before { content: none; }
#notes-panel .callout.media { background: transparent; color: inherit; }
#notes-panel .callout.media a, #notes-panel a { color: var(--red-dark); }
#notes-panel p { margin: .35em 0; }
#notes-panel .source { color: inherit; font-size: 1em; }

/* ---------- Menu (écran de navigation) ---------- */
#ov-head {
  position: sticky; top: -1.5rem; z-index: 2; background: var(--bg);
  margin: -1.5rem -5vw 1.2rem; padding: 1.2rem 5vw .9rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.6em; border-bottom: 1px solid var(--line);
}
.ov-now { display: flex; align-items: baseline; gap: 1em; font-size: .85em; }
#part-label { font-weight: 600; color: var(--ink); }
#counter { color: var(--grey); font-variant-numeric: tabular-nums; }
.ov-tools { display: flex; flex-wrap: wrap; gap: .6em; margin-left: auto; }
#ov-head .hint { flex-basis: 100%; margin: 0; font-size: .62em; color: var(--grey); letter-spacing: .04em; }
#overview #ov-head button {
  padding: .45em 1em; font-size: .7em; letter-spacing: .04em; text-align: center;
  background: #fff; border: 1px solid var(--ink); color: var(--ink); cursor: pointer;
}
#overview #ov-head button:hover { background: var(--ink); color: #fff; }
#overview #ov-head button[aria-pressed="true"] { background: var(--ink); color: #fff; }
#overview #ov-head #lang-switch { display: inline-flex; padding: 2px; }
#lang-switch span { display: inline-block; padding: .1em .75em; line-height: 1.5; font-weight: 500; }
#lang-switch span.on { background: var(--red); color: #fff; }
#overview #ov-head #lang-switch:hover { background: #fff; color: var(--ink); }

/* ---------- Aperçu ---------- */
#overview {
  position: absolute; inset: var(--bar-h) 0 0 0; z-index: 10;
  background: var(--bg); overflow: auto; padding: 1.5rem 5vw 3rem;
}
.ov-part { margin-bottom: 1.6rem; }
.ov-part h2 {
  display: flex; align-items: baseline; gap: .8em; margin: 0 0 .6rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--red); font-size: .95em; color: var(--ink); cursor: pointer;
}
.ov-part h2:hover span { color: var(--red); }
.ov-part h2 small { color: var(--grey); font-weight: 300; font-size: .8em; }
.ov-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
#overview button {
  text-align: left; padding: .7em .9em; border: 1px solid var(--line); border-radius: 0;
  background: #fff; font: inherit; font-size: .75em; cursor: pointer;
}
#overview button:hover { border-color: var(--red); }
#overview button.current { border-color: var(--red); background: var(--red); color: #fff; font-weight: 500; }

@media (max-width: 900px) {
  .plan-slide { grid-template-columns: 1fr; row-gap: 1em; }
  .plan-line { height: 62vh; }
  .speaker-head { gap: 1.2em; }
  .portrait { width: 6.5em; height: 6.5em; }
  .g2, .g3, .g4, .g5, .split, .vs { grid-template-columns: 1fr; }
  .g5 > * { grid-column: auto !important; }
  .flow { flex-direction: column; }
  .flow > .arrow { transform: rotate(90deg); }
  .tl-h { grid-auto-flow: row; }
  .cols { grid-template-columns: 1fr; }
  .bar-split { flex-direction: column; height: 62vh; }
  .bar-split .seg + .seg { border-left: 0; border-top: 2px solid #fff; }
  #ov-head .hint { display: none; }
}