/**
 * APC Remark.js Theme
 * Astroparticule et Cosmologie — official template
 *
 * ─── Layout ───────────────────────────────────────────────────────────────────
 * Configure your presentation in 16:9 (recommended):
 *
 *   var slideshow = remark.create({
 *     ratio: '16:9',
 *     highlightStyle: 'github',
 *     highlightLines: true,
 *   });
 *
 * ─── Slide types ──────────────────────────────────────────────────────────────
 * Declare the class right after `---` in Markdown:
 *
 *   class: cover      Cover slide (navy bg, centred flex, gold bar, logo) — title & conclusion
 *   class: section    Section interlude (navy bg, large number inside arc, top-right)
 *   class: outline    Outline slide (navy bg, title left / numbered list right)
 *   class: citation   Quote slide (rose-light bg, giant quote mark, Lora italic)
 *   class: twocol     Two-column content slide (inherits default header)
 *   class: blanc      White-background content slide (keeps navy header)
 *   class: fullbleed  Full-bleed image/media slide (no header, no padding)
 *   (default)         Content slide (rose-light bg, navy header bar)
 *
 * ─── Slide components ─────────────────────────────────────────────────────────
 * Inline helpers used inside specific slide types:
 *
 *   .gold-bar[]          Gold horizontal accent bar           (cover, section)
 *   .gold-stripe[]       Thin gold top stripe (0.35rem)       (cover)
 *   .logo[![logo]()]     Logo anchored bottom-right           (cover)
 *   .section-num[]       Large number inside the arc          (section)
 *   .section-label[]     Uppercase label above the title      (section)
 *   .section-bar[]       Short terracotta bar                 (section)
 *   .arc[]               Decorative circle, top-right corner  (section)
 *   .quote-mark["]       Giant italic quotation mark          (citation)
 *   .cite-bar[]          Short terracotta bar below quote     (citation)
 *   .source[] / cite     Quote attribution                    (citation)
 *   .caption[]           Semi-transparent caption overlay     (fullbleed)
 *   .columns[…]          Two-column wrapper                   (twocol)
 *   .left-col[] / .right-col[]  Column content               (twocol)
 *   .apc-footer[]        Auto APC logo + lab name footer      (any)
 *   .apc-logo[]          White SVG logo, bottom-right         (dark slides)
 *   .stamp[TEXT]         Terracotta rubber-stamp overlay      (any)
 *   .gold-sep            Gold full-width horizontal rule      (any)
 *   .highlight-box       Navy-light box with navy left border (any)
 *   .footer[…]           Manual footer (logo + text)          (layout slide)
 *
 * ─── Layout utilities ─────────────────────────────────────────────────────────
 *   .cols                2-column grid (1fr / 1fr)
 *   .cols-3              3-column grid (1fr / 1fr / 1fr)
 *   .img-full            Makes image fill its container width
 *   .center / .right     Text alignment
 *   .bold                font-weight 700
 *
 * ─── Text utilities ───────────────────────────────────────────────────────────
 *   .navy / .gold / .terra / .rose   APC brand colours
 *   .muted               Secondary text colour (--apc-text-mid, 0.88em)
 *   .small               0.82em
 *   .large               1.25em
 *
 * ─── Colour palette ───────────────────────────────────────────────────────────
 *   --apc-navy           #013975   Main dark background
 *   --apc-navy-mid       #012D61   Watermark, arc overlay
 *   --apc-navy-light     #E6EDF6   Text on navy, subtle accents
 *   --apc-terracotta     #B5563D   Strong accents, stamp
 *   --apc-terracotta-mid #C4674F   Common accents, bars
 *   --apc-rose           #B89D98   Left sidebar on content slides
 *   --apc-rose-light     #F5EEEC   Content slide background (default)
 *   --apc-gold           #E8A838   Header bar accent, counters
 *   --apc-white          #FFFFFF   Text on dark backgrounds
 *   --apc-gray-bdr       #E8DFDC   Borders, separators
 *   --apc-text-dark      #2D3848   Main body text
 *   --apc-text-mid       #556070   Secondary text
 *   --apc-text-light     #8B95A8   Captions, page numbers
 *
 * ─── Logo files ───────────────────────────────────────────────────────────────
 * Place logo files in the same directory (or adjust paths):
 *   logo_apc_white.png          → white logo on transparent  (dark slides)
 *   logo_apc_light.png          → navy logo on transparent   (light slide footers)
 *   logo-apc-transparent.svg    → SVG logo used by .apc-logo utility class
 *
 * ─── Automatic footer ─────────────────────────────────────────────────────────
 * To inject a footer on all content slides, use a Remark layout slide:
 *
 *   ---
 *   layout: true
 *   ---
 *   .footer[
 *     ![logo](logo_apc_light.png) Astroparticule et Cosmologie
 *   ]
 *   ---
 *   (your slides here)
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   FONTS
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --apc-navy:          #013975;
  --apc-navy-mid:      #012D61;
  --apc-navy-light:    #E6EDF6;
  --apc-terracotta:    #B5563D;
  --apc-terracotta-mid:#C4674F;
  --apc-rose:          #B89D98;
  --apc-rose-light:    #F5EEEC;
  --apc-gold:          #E8A838;
  --apc-white:         #FFFFFF;
  --apc-gray-bdr:      #E8DFDC;
  --apc-text-dark:     #2D3848;
  --apc-text-mid:      #556070;
  --apc-text-light:    #8B95A8;

  /* Structural dimensions (relative to slide height) */
  --header-h:    5.3rem;    /* header bar height */
  --footer-h:    1.5rem;    /* footer height */
  --gold-accent: 1.6rem;    /* gold accent width (right side of header) */
  --pad-x:       2.5rem;    /* horizontal content padding */
  --pad-y:       1.2rem;    /* vertical content padding (below header) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE — toutes les slides
   ═══════════════════════════════════════════════════════════════════════════ */

.remark-slide-content {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--apc-text-dark);
  background-color: var(--apc-rose-light);
  padding: calc(var(--header-h) + var(--pad-y)) var(--pad-x) var(--footer-h) var(--pad-x);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Navy header bar + gold accent on the right */
.remark-slide-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: linear-gradient(
    to right,
    var(--apc-navy) calc(100% - var(--gold-accent)),
    var(--apc-gold) calc(100% - var(--gold-accent))
  );
  z-index: 2;
}

/* ─── Slide title (displayed inside the header bar) ─────────────────────────── */
.remark-slide-content h1:first-child {
  position: absolute;
  top: 0;
  left: var(--pad-x);
  right: calc(var(--gold-accent) + 0.5rem);
  height: var(--header-h);
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--apc-white);
  z-index: 3;
  line-height: 1.2;
}

/* Rose left sidebar accent */
.remark-slide-content::after {
  content: '';
  position: absolute;
  top: var(--header-h);
  left: 0;
  bottom: var(--footer-h);
  width: 0.18rem;
  background: var(--apc-rose);
}

/* ─── Body text ──────────────────────────────────────────────────────────────── */
.remark-slide-content h2 {
  font-size: 1.62rem;
  font-weight: 700;
  color: var(--apc-navy);
  margin: 0.4em 0 0.2em;
}

.remark-slide-content h3 {
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--apc-navy);
  margin: 0.3em 0 0.15em;
}

.remark-slide-content p {
  margin: 0.4em 0;
}

.remark-slide-content ul,
.remark-slide-content ol {
  margin: 0.3em 0 0.3em 1.2em;
  padding: 0;
}

.remark-slide-content li {
  margin-bottom: 0.25em;
}


.remark-slide-content li li {
  font-size: 0.88em;
  color: var(--apc-text-mid);
  margin-bottom: 0.15em;
}

/* Inline code */
.remark-slide-content code {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: var(--apc-gray-bdr);
  color: var(--apc-navy);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

/* Code blocks */
.remark-slide-content pre code {
  background: #1e2533;
  color: #c9d1d9;
  display: block;
  padding: 0.6em 1em;
  border-radius: 5px;
  font-size: 0.8em;
  overflow-x: auto;
}

/* ─── Footer ────────────────────────────────────────────────────────────────── */
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-h);
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  border-top: 1px solid var(--apc-gray-bdr);
  font-size: 0.58rem;
  color: var(--apc-text-light);
  gap: 0.4rem;
  z-index: 2;
}

.footer img {
  height: 1rem;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Page number (injected by Remark into .remark-slide-number) */
.remark-slide-number {
  position: absolute;
  bottom: 0.35rem;
  right: var(--pad-x);
  font-size: 0.58rem;
  color: var(--apc-text-light);
  font-family: 'Inter', sans-serif;
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COVER SLIDE  (class: cover)
   — Title / conclusion slide: navy bg, centred flex, gold bar, optional logo
   ═══════════════════════════════════════════════════════════════════════════ */

.cover.remark-slide-content {
  background-color: var(--apc-navy);
  padding: 0 var(--pad-x);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* No header bar, no lateral accent */
.cover.remark-slide-content::before,
.cover.remark-slide-content::after { display: none; }

/* Thin gold stripe at the top */
.cover.remark-slide-content .gold-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.35rem;
  background: var(--apc-gold);
}

/* Gold horizontal accent bar */
.cover.remark-slide-content .gold-bar {
  display: block;
  width: 35%;
  height: 0.18rem;
  background: var(--apc-gold);
  margin: 0.6rem 0 1rem;
}

.cover.remark-slide-content h1 {
  position: static;
  height: auto;
  font-size: 3.12rem;
  font-weight: 700;
  color: var(--apc-white);
  line-height: 1.15;
  margin: 0 0 0.3rem;
  z-index: auto;
}

.cover.remark-slide-content h2 {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--apc-terracotta-mid);
  margin: 0 0 0.1rem;
}

.cover.remark-slide-content h3 {
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--apc-navy-light);
  margin: 0;
}

/* Logo anchored bottom-right */
.cover.remark-slide-content .logo {
  position: absolute;
  right: 2.5rem;
  bottom: 2rem;
  height: 5.5rem;
  width: auto;
}

/* Page number hidden on cover slide */
.cover .remark-slide-number { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDE SECTION  (class: section)
   ═══════════════════════════════════════════════════════════════════════════ */

.section.remark-slide-content {
  background-color: var(--apc-navy);
  padding: 0 var(--pad-x);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.section.remark-slide-content::before,
.section.remark-slide-content::after { display: none; }

/* Section number centered inside the arc (top-right corner) */
.section.remark-slide-content .section-num {
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 18rem;
  height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
  font-weight: 700;
  color: var(--apc-navy-mid);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Section label */
.section.remark-slide-content .section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  color: var(--apc-terracotta-mid);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}

/* Terracotta bar below the label */
.section.remark-slide-content .section-bar {
  display: block;
  width: 5.5rem;
  height: 0.18rem;
  background: var(--apc-terracotta-mid);
  margin-bottom: 0.9rem;
  position: relative;
  z-index: 1;
}

.section.remark-slide-content h1 {
  position: static;
  height: auto;
  font-size: 2.88rem;
  font-weight: 700;
  color: var(--apc-white);
  line-height: 1.2;
  margin: 0 0 0.4rem;
  z-index: 1;
}

.section.remark-slide-content h2 {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--apc-navy-light);
  margin: 0;
  z-index: 1;
  position: relative;
}

/* Decorative arc */
.section.remark-slide-content .arc {
  position: absolute;
  right: -10rem;
  top: -10rem;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  border: 0.5rem solid var(--apc-terracotta-mid);
  opacity: 0.5;
  pointer-events: none;
}

.section .remark-slide-number { color: var(--apc-navy-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDE OUTLINE  (class: outline)
   — Presentation outline: title on the left, numbered list on the right
   ═══════════════════════════════════════════════════════════════════════════ */

.outline.remark-slide-content {
  background-color: var(--apc-navy);
  padding: 3rem var(--pad-x);
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
  column-gap: 3rem;
  box-sizing: border-box;
}

.outline.remark-slide-content::before,
.outline.remark-slide-content::after { display: none; }

.outline.remark-slide-content h1 {
  position: static;
  height: auto;
  grid-column: 1;
  align-self: center;
  font-size: 2.88rem;
  font-weight: 700;
  color: var(--apc-white);
  line-height: 1.2;
  margin: 0;
  padding-left: 1.2rem;
  border-left: 0.25rem solid var(--apc-terracotta-mid);
  z-index: auto;
}

.outline.remark-slide-content h2 {
  grid-column: 1;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--apc-navy-light);
  margin: 0.4rem 0 0 1.45rem;
}

.outline.remark-slide-content ol {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: outline-item;
}

.outline.remark-slide-content ol li {
  counter-increment: outline-item;
  position: relative;
  padding: 0.6rem 0 0.6rem 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--apc-navy-light);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 0;
}

.outline.remark-slide-content ol li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.outline.remark-slide-content ol li::before {
  content: counter(outline-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--apc-gold);
  line-height: 1.4;
}

.outline .remark-slide-number { color: var(--apc-navy-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDE CITATION  (class: citation)
   ═══════════════════════════════════════════════════════════════════════════ */

.citation.remark-slide-content {
  background-color: var(--apc-rose-light);
  padding: var(--pad-y) var(--pad-x);
  padding-bottom: var(--footer-h);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.citation.remark-slide-content::before,
.citation.remark-slide-content::after { display: none; }

/* Giant quotation mark */
.citation.remark-slide-content .quote-mark {
  position: absolute;
  top: -1.5rem;
  left: 0.5rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 14rem;
  color: var(--apc-navy);
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Quote text */
.citation.remark-slide-content blockquote,
.citation.remark-slide-content p.quote {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.45rem;
  font-style: italic;
  color: var(--apc-navy);
  line-height: 1.6;
  margin: 0 0 1rem;
  border-left: none;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* Terracotta bar below the quote */
.citation.remark-slide-content .cite-bar {
  display: block;
  width: 5rem;
  height: 0.18rem;
  background: var(--apc-terracotta);
  margin-bottom: 0.5rem;
}

/* Source / author */
.citation.remark-slide-content cite,
.citation.remark-slide-content p.source {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--apc-terracotta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TWO-COLUMN SLIDE  (class: twocol)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two-column grid — use .left-col and .right-col in Markdown */
.twocol .columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  height: 100%;
}

.twocol .left-col,
.twocol .right-col {
  overflow: hidden;
}

.twocol .left-col h2 {
  color: var(--apc-navy);
  border-bottom: 0.18rem solid var(--apc-navy);
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}

.twocol .right-col h2 {
  color: var(--apc-terracotta);
  border-bottom: 0.18rem solid var(--apc-terracotta);
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHITE BACKGROUND SLIDE  (class: blanc)
   For text+image, timeline, table, and team slides
   ═══════════════════════════════════════════════════════════════════════════ */

.blanc.remark-slide-content {
  background-color: var(--apc-white);
}

.blanc.remark-slide-content::after {
  /* No rose accent on white background */
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-BLEED SLIDE  (class: fullbleed)
   — No header, no padding: image or content fills the entire slide
   ═══════════════════════════════════════════════════════════════════════════ */

.fullbleed.remark-slide-content {
  padding: 0;
  background-color: #000;
}

.fullbleed.remark-slide-content::before,
.fullbleed.remark-slide-content::after { display: none; }

/* Image filling the entire slide */
.fullbleed.remark-slide-content img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional caption at the bottom (use .caption[] in Markdown) */
.fullbleed .caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.4rem var(--pad-x);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  text-align: right;
}

.fullbleed .remark-slide-number { color: rgba(255, 255, 255, 0.5); }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Automatic APC footer — usage: .apc-footer[] */
.apc-footer {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-h);
  align-items: center;
  padding: 0 var(--pad-x);
  border-top: 1px solid var(--apc-gray-bdr);
  font-size: 0.58rem;
  color: var(--apc-text-light);
  gap: 0.4rem;
  z-index: 2;
}

.apc-footer::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url('../img/logo_apc_light.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.apc-footer::after {
  content: 'Astroparticule et Cosmologie';
}

/* APC logo (white, for dark backgrounds) — usage: .apc-logo[] */
.apc-logo {
  display: block;
  position: absolute;
  right: 2.5rem;
  bottom: 2rem;
  width: 7.5rem;
  height: 7.5rem;
  background-image: url('../img/logo-apc-transparent.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Text colors */
.navy    { color: var(--apc-navy); }
.gold    { color: var(--apc-gold); }
.terra   { color: var(--apc-terracotta); }
.rose    { color: var(--apc-rose); }
.muted   { color: var(--apc-text-mid); font-size: 0.88em; }
.small   { font-size: 0.82em; }
.large   { font-size: 1.25em; }

/* Layout */
.center  { text-align: center; }
.right   { text-align: right; }
.bold    { font-weight: 700; }

/* Decorative stamp — usage: .stamp[PRELIMINARY] */
.stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  padding: 1rem 2rem;
  border: 0.5rem solid var(--apc-terracotta);
  outline: 0.1rem solid var(--apc-terracotta);
  outline-offset: 0.45rem;
  color: var(--apc-terracotta);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.35;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}

/* Decorative horizontal bar */
.gold-sep {
  width: 100%;
  height: 0.12rem;
  background: var(--apc-gold);
  margin: 0.8rem 0;
  border: none;
}

/* Highlighted box */
.highlight-box {
  background: var(--apc-navy-light);
  border-left: 0.25rem solid var(--apc-navy);
  padding: 0.5rem 0.8rem;
  border-radius: 0 4px 4px 0;
  margin: 0.5rem 0;
}

/* Image full-width */
.img-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* Generic 2-column grid */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

/* Table */
.remark-slide-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.remark-slide-content th {
  background: var(--apc-navy);
  color: var(--apc-white);
  padding: 0.35rem 0.6rem;
  font-weight: 600;
  text-align: left;
}

.remark-slide-content tr:nth-child(odd) td {
  background: var(--apc-rose-light);
}

.remark-slide-content tr:nth-child(even) td {
  background: var(--apc-white);
}

.remark-slide-content td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--apc-gray-bdr);
  color: var(--apc-text-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REMARK-SPECIFIC
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hides the slide being edited in clone mode */
.remark-slide-content .remark-slide-number { z-index: 10; }

/* Transitions (optional) */
.remark-fading .remark-slide-content { opacity: 0.5; }