/* IA101 Theme for Slidev - Ported from ia101.css (Marp) */

:root {
  --color-accent: #8B1A1A;
  --color-accent-light: #C0392B;
  --color-bg: #F5F5F5;
  --color-bg-dark: #E8E8E8;
  --color-text: #2C3E50;
  --color-text-light: #7F8C8D;
  --color-header: #34495E;
  --color-coral: #FF6B6B;
  --color-teal: #6b9696;
}

/* Base styles */
.slidev-layout {
  font-family: 'Segoe UI', 'Calibri', Arial, sans-serif;
  font-size: 18px;
  color: var(--color-text);
  background-color: var(--color-bg);
  padding: 28px 40px;
  text-align: left;
  /* Le fond doit couvrir le canvas entier : sans hauteur, la boite est
   * dimensionnee par son contenu, et une slide courte laisse une bande
   * blanche sous le pale (mesure : pale s'arretant a 442px pour 552). */
  min-height: 100%;
  box-sizing: border-box;
}

/* Headers */
h1 {
  color: var(--color-accent);
  font-size: 1.5em;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 4px;
  margin-bottom: 10px;
  text-align: left;
}

h2 {
  color: var(--color-header);
  font-size: 1.2em;
  margin-bottom: 8px;
  text-align: left;
}

h3 {
  color: var(--color-accent-light);
  font-size: 1.05em;
  text-align: left;
}

/* Bullet lists */
ul {
  list-style: none;
  padding-left: 0;
  text-align: left;
}

/* Level 1 bullets: larger, bold-like weight */
ul > li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 3px;
  font-size: 1.05em;
}

ul > li::before {
  content: '\25CF';
  color: var(--color-accent);
  position: absolute;
  left: 0;
  font-size: 0.6em;
  top: 4px;
}

/* Level 2 bullets: smaller, lighter */
ul ul > li {
  font-size: 0.88em;
  margin-bottom: 3px;
}

ul ul > li::before {
  content: '\25CB';
  color: var(--color-accent-light);
}

/* Level 3 bullets: smaller (effective ~15px at base 18px) */
ul ul ul > li {
  font-size: 0.88em;
}

ul ul ul > li::before {
  content: '\2013';
  color: var(--color-text-light);
}

/* Ordered lists */
ol {
  padding-left: 24px;
}

ol > li {
  margin-bottom: 3px;
}

ol > li::marker {
  color: var(--color-accent);
  font-weight: bold;
}

/* Roman numeral list for Plan du cours */
ol.roman-list {
  list-style-type: upper-roman;
  padding-left: 56px;
}

ol.roman-list > li {
  margin-bottom: 6px;
  font-size: 1.1em;
  padding-left: 8px;
}

ol.roman-list > li::marker {
  color: var(--color-accent);
  font-weight: bold;
}

/* Strong text */
strong {
  color: var(--color-accent);
}

/* Code blocks */
pre {
  background: var(--color-bg-dark);
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  background: #FFFFFF;
  color: #E74C3C;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #E0C8C8;
}

pre code {
  background: none;
  padding: 0;
}

/* Links */
a {
  color: var(--color-accent);
}

/* Section layout override - ensure white text on dark background */
.slidev-layout.section h1,
.slidev-layout.section h2,
.slidev-layout.section h3,
.slidev-layout.section strong {
  color: #F5F5F5 !important;
  border-bottom-color: #F5F5F5 !important;
}

/* Header/Footer area (Slidev defaults override) */
.slidev-vflex-root {
  background: var(--color-bg);
}

/* Standalone images in paragraphs (for table slides etc.) */
.slidev-layout p > img {
  display: block;
  margin: 8px auto;
  max-height: 65vh;
  max-width: 100%;
  object-fit: contain;
}

/* Image grid for logos (slide "Qui fait de l'IA ?") */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px 24px;
  margin-top: 20px;
  justify-items: center;
  align-items: center;
}

.image-grid img {
  max-height: 70px;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.9;
}

.image-grid img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Tables with colored headers */
.colored-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.colored-table th {
  background-color: var(--color-accent);
  color: white;
  padding: 10px 14px;
  text-align: center;
  font-weight: bold;
}

.colored-table td {
  padding: 8px 12px;
  border: 1px solid var(--color-bg-dark);
  text-align: center;
}

.colored-table tr:nth-child(even) td {
  background-color: var(--color-bg-dark);
}

/* Two-column layout helper */
.two-column-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.two-column-list ul {
  margin: 0;
}

/* Timeline/chronology style */
.timeline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: start;
}

.timeline .year {
  color: var(--color-accent);
  font-weight: bold;
  text-align: right;
  min-width: 50px;
}

.timeline .event {
  color: var(--color-text);
}

/* Centered image container (for full-width table images) */
.center-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
}

.center-image img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

/* Formula container */
.formula {
  text-align: center;
  font-size: 1.1em;
  margin: 16px 0;
  padding: 12px;
  background: var(--color-bg-dark);
  border-radius: 8px;
}

/* Nested sections (Intelligences slide) */
.intelligence-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intelligence-block {
  padding: 8px 12px;
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-dark);
  border-radius: 0 6px 6px 0;
}

.intelligence-block h4 {
  margin: 0 0 4px 0;
  color: var(--color-accent);
  font-size: 0.9em;
}

.intelligence-block ul {
  margin: 0;
  padding-left: 12px;
}

.intelligence-block li {
  margin-bottom: 2px;
}

/* Pagination / Page Number */
.slidev-page-number {
  color: var(--color-text-light);
  font-size: 0.6em;
  position: fixed;
  bottom: 10px;
  right: 20px;
}

/* Footer global "Intelligence(s)" — bas-gauche, comme le PPTX original */
.slidev-layout::after {
  content: 'Intelligence(s)';
  position: fixed;
  bottom: 8px;
  left: 24px;
  font-size: 0.65em;
  color: var(--color-text-light);
  letter-spacing: 0.05em;
  z-index: 10;
}

/* ------------------------------------------------------------------ */
/* Grilles d'images heritees du port Marp                              */
/*                                                                     */
/* `img-grid` / `img-grid-2x2` etaient utilisees dans le markdown sans  */
/* jamais avoir ete definies : les images tombaient en flux vertical,   */
/* chacune jusqu'a `max-h-[300px]`, dans un canvas qui fait 552px de    */
/* haut. Deux images empilees suffisaient donc a sortir de la slide,    */
/* et au-dela de trois les suivantes etaient purement invisibles.       */
/*                                                                     */
/* La grille donne aux images un budget de hauteur PARTAGE, au lieu     */
/* d'un plafond individuel qui ne borne rien collectivement.            */
/* ------------------------------------------------------------------ */

.img-grid,
.img-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 8px;
}

/* Conteneur positionne : `top` est declare inline dans la slide, `bottom`
   ferme la boite — la hauteur se deduit et s'adapte a chaque slide. */
.img-grid.absolute,
.img-grid-2x2.absolute {
  bottom: 40px;
}

/* Conteneur en flux : budget fixe, sous le bloc de texte. */
.img-grid:not(.absolute),
.img-grid-2x2:not(.absolute) {
  height: 300px;
}

/* Specificite (0,1,1) : l'emporte sur les utilitaires `max-h-[300px]` et
   `w-[150px]` poses inline, qui datent du port et ne bornent que l'image
   prise isolement. */
.img-grid > img,
.img-grid-2x2 > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Pile d'images pleine largeur                                        */
/*                                                                     */
/* Meme cause, autre symptome : le port avait recopie les coordonnees   */
/* absolues du PPTX (repere de 720px de haut) dans un canvas Slidev de  */
/* 552px. Un `top-[530px]` posait une image a 22px du bas, et un        */
/* `top-[669px]` la placait entierement hors champ.                     */
/* ------------------------------------------------------------------ */

.img-stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 8px;
}

.img-stack.absolute {
  bottom: 40px;
}

.img-stack > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* -------------------------------------------------------------------- */
/* Tables markdown nues (hors .colored-table)                           */
/* Sans regle explicite, aucun padding de cellule n'est applique : les   */
/* colonnes se collent ("sinistralite" / "sinistr" sur la slide Tokens). */
/* Les 10 decks qui portent des tables markdown sont concernes ; aucun   */
/* n'utilise .colored-table, dont les reglages restent intacts.          */
/*                                                                       */
/* Padding HORIZONTAL uniquement. Mesure firsthand sur S8-semantic-web   */
/* (28 slides, le deck le plus dense en tables) : un padding vertical de */
/* 5px par cellule fait passer les slides en debordement bas de 7 a 12.  */
/* En horizontal seul : 7 -> 8 (l'en-tete en gras se re-enroule).        */
/* Les filets de 1px, eux, ne coutent rien (8 avec comme sans).          */
/* Ces slides debordent deja sur main : defaut pre-existant, suivi a     */
/* part dans l'Epic slides.                                              */
/* -------------------------------------------------------------------- */

.slidev-layout table:not(.colored-table) {
  border-collapse: collapse;
}

.slidev-layout table:not(.colored-table) th,
.slidev-layout table:not(.colored-table) td {
  padding: 0 18px 0 0;
  text-align: left;
  vertical-align: top;
}

.slidev-layout table:not(.colored-table) th {
  color: var(--color-header);
  font-weight: bold;
}

.slidev-layout table:not(.colored-table) thead th {
  border-bottom: 1px solid var(--color-accent);
}

.slidev-layout table:not(.colored-table) tbody tr + tr td {
  border-top: 1px solid var(--color-bg-dark);
}