/* ============================================================
   Thème maison — "Coffee & Learn : Typographie"
   Esthétique suisse / architecturale : grille, blanc, vermillon.
   Surcharge le thème white.css de reveal.js.
   ============================================================ */

:root{
  --ink:   #111111;
  --paper: #ffffff;
  --accent:#E63327;   /* vermillon — rouge typographique suisse */
  --muted: #6b6b6b;
  --sans:  'Inter', -apple-system, system-ui, sans-serif;
  --serif: 'EB Garamond', Georgia, serif;
  --grotesk:'Space Grotesk', var(--sans);
  --voltaire:'Voltaire', var(--sans);   /* police du logo de l'agence */
}

/* ---------- Base ---------- */
.reveal{
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.reveal .slides{ text-align: left; }
.reveal .slides section{ text-align: left; }

.reveal h1, .reveal h2, .reveal h3{
  font-family: var(--grotesk);
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 0.5em 0;
  font-weight: 700;
}
.reveal h2{ font-size: 1.9em; }
.reveal h3{ font-size: 1.0em; font-weight: 600; }

.reveal p{ line-height: 1.45; }
.reveal strong, .reveal b{ font-weight: 700; }
.reveal em{ font-style: italic; }

.accent{ color: var(--accent); }
.light{ color: var(--paper) !important; }
.light em{ color: #f0d9d6; }

/* ---------- Bandeau d'accent en haut de chaque slide ---------- */
.reveal .slides section::before{
  content:"";
  position:absolute;
  top:-3.2%; left:0;
  width:64px; height:5px;
  background: var(--accent);
}
.reveal .slides section.section-divider::before,
.reveal .slides section.title-slide::before{ display:none; }

/* ---------- Kicker / sur-titre (en Voltaire, la police de l'agence) ---------- */
.kicker{
  font-family: var(--voltaire);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.52em;
  font-weight: 400;
  margin-bottom: 0.4em;
}

/* ---------- Slide de titre ---------- */
.title-slide{ text-align:left; }
.mega{
  font-family: var(--grotesk);
  font-size: 4.3em;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0.1em 0 0.15em;
}
.title-slide .subtitle{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5em;
  color: #d8d8d8;
  margin: 0 0 1.2em;
}
.meta-line{
  font-family: var(--grotesk);
  font-size: 0.7em;
  letter-spacing: 0.04em;
  color: #9a9a9a;
}

/* ---------- Sous-titres génériques ---------- */
.subtitle{
  font-family: var(--serif);
  font-size: 1.25em;
  line-height: 1.4;
  max-width: 22em;
  color: var(--muted);
}
.subtitle.light{ color:#cfcfcf; }

.note-aside{
  margin-top: 0.7em;
  padding-left: 0.8em;
  border-left: 3px solid var(--accent);
  font-family: var(--grotesk);
  font-size: 0.72em;
  color: var(--muted);
  max-width: 30em;
}
.note-aside.light{ color:#c9c9c9; }

/* ---------- Listes ---------- */
.reveal .slides ul, .reveal .slides ol{ list-style: none; margin-left: 0; }
.big-list{ list-style:none; margin:0; }
.big-list li{
  font-family: var(--grotesk);
  font-size: 0.96em;
  line-height: 1.28;
  margin: 0.36em 0;
  padding-left: 1.1em;
  position: relative;
  font-weight: 300;
}
.big-list li::before{
  content:"—"; color: var(--accent);
  position:absolute; left:0; font-weight:700;
}
.tight{ margin:0; }
.tight li{ margin:0.4em 0; line-height:1.3; font-size:0.8em; padding-left:1em; position:relative; }
.tight li::before{ content:"›"; color:var(--accent); position:absolute; left:0; font-weight:700; }

/* ---------- Slide Lyon (dense) ---------- */
.lyon-slide h2{ font-size:1.55em; }
.lyon-slide .two-col p{ font-size:0.78em; }

/* ---------- Programme ---------- */
.agenda-list{ list-style:none; margin:0; }
.agenda-list li{
  font-family: var(--grotesk);
  font-size: 1.25em;
  font-weight: 500;
  margin: 0.5em 0;
  display:flex; align-items:baseline; gap:0.7em;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 0.45em;
}
.agenda-list .num{
  color: var(--accent);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ---------- Section divider ---------- */
.section-divider{ text-align:left; }
.section-num{
  font-family: var(--grotesk);
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.2em;
}
.section-title{
  font-size: 3.3em !important;
  color: #fff !important;
  line-height: 0.95;
}
.section-sub{
  font-family: var(--grotesk);
  font-size: 1.1em;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em;
  margin-top: 0.3em;
}

/* ---------- Two col ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.6em; margin-top:0.4em; }
.two-col p{ font-size:0.82em; line-height:1.4; }

/* ---------- Timeline ---------- */
.timeline{ display:flex; flex-direction:column; gap:0; margin-top:0.3em; }
.tl-item{
  display:flex; align-items:baseline; gap:1.2em;
  padding:0.32em 0;
  border-bottom:1px solid #ececec;
}
.tl-date{
  font-family: var(--grotesk);
  font-weight:700; font-size:1.1em;
  color: var(--accent);
  min-width: 3.4em;
}
.tl-lbl{ font-family: var(--grotesk); font-size:0.9em; font-weight:300; }

/* ---------- Anatomie ---------- */
.anatomy{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:2em; align-items:center; }
.glyph-stage{
  position:relative;
  height: 7em;
  display:flex; align-items:flex-end; justify-content:center;
}
.big-glyph{
  font-family: var(--serif);
  font-size: 9em;
  line-height: 0.8;
  position: relative;
  z-index: 2;
}
.guide{ position:absolute; left:-10%; width:120%; border-top:1px dashed var(--accent); z-index:1; }
.cap-line{ top: 0.2em; }
.x-line{ top: 3.0em; }
.base-line{ bottom: 0.6em; border-top:2px solid var(--accent); }
.anatomy-legend{ list-style:none; margin:0; }
.anatomy-legend li{ margin:0.45em 0; font-size:0.86em; line-height:1.3; }
.anatomy-legend b{ color: var(--accent); }

/* ---------- Vocabulaire ---------- */
.vocab-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.5em 2em; }
.vocab{ border-top:2px solid var(--ink); padding-top:0.28em; }
.vw{ display:block; font-family:var(--grotesk); font-weight:700; font-size:1.0em; }
.vd{ display:block; font-size:0.72em; color:var(--muted); line-height:1.28; }

/* ---------- Specimen (familles) ---------- */
.spec-layout{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:2em; align-items:center; }
.spec-tag{
  position:absolute; top:0; left:0;
  font-family:var(--grotesk); font-weight:500;
  text-transform:uppercase; letter-spacing:0.12em; font-size:0.6em;
}
.specimen{
  font-size: 11em;
  line-height: 0.85;
  color: var(--ink);
}
.spec-info p{ font-size:0.9em; margin:0.5em 0; line-height:1.4; }
.spec-info b{ color: var(--accent); }
.spec-ex{
  font-family:var(--grotesk); font-weight:500;
  letter-spacing:0.03em; color:var(--muted);
  border-top:1px solid #ddd; padding-top:0.5em; font-size:0.8em !important;
}

/* ---------- Trio sans-serif ---------- */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5em; }
.trio-card{ border-top:3px solid var(--accent); padding-top:0.5em; }
.trio-spec{ font-size:3.4em; line-height:1; margin-bottom:0.1em; }
.trio-card h3{ margin:0.2em 0; font-size:0.92em; }
.trio-card p{ font-size:0.72em; color:var(--muted); line-height:1.32; }

/* ---------- Misc grid (slab/script/display/gothic) ---------- */
.misc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4em; }
.misc{ display:flex; flex-direction:column; gap:0.25em; }
.misc-spec{ font-size:3.4em; line-height:1; color:var(--ink); }
.misc b{ font-family:var(--grotesk); font-size:0.92em; }
.misc span:last-child{ font-size:0.72em; color:var(--muted); line-height:1.3; }

/* ---------- Pairing ---------- */
.pairing{ display:grid; grid-template-columns:1fr 1fr; gap:2em; align-items:center; }
.pair-demo{ background:#1c1c1c; padding:1em 1.2em; border-left:4px solid var(--accent); }
.pair-title{ display:block; color:#fff; font-size:2.4em; line-height:1; margin-bottom:0.2em; }
.pair-body{ display:block; color:#bdbdbd; font-size:0.85em; line-height:1.4; }

/* ---------- Use case ---------- */
.usecase h2{ font-size:1.7em; margin-bottom:0.2em; }
.usecase .uc-label{
  font-family:var(--grotesk); text-transform:uppercase;
  letter-spacing:0.16em; font-size:0.5em; font-weight:600; color:var(--muted);
  margin-bottom:0.1em;
}
.usecase .uc-label.accent{ color:var(--accent); }
.uc-lead{ font-family:var(--serif); font-style:italic; font-size:1.05em; max-width:34em; margin:0 0 0.7em; line-height:1.3; }
.uc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.6em; }
.uc-cols ul{ list-style:none; margin:0; }
.uc-cols li{ font-size:0.72em; line-height:1.32; margin:0.4em 0; padding-left:1em; position:relative; }
.uc-cols li::before{ content:"›"; color:var(--accent); position:absolute; left:0; font-weight:700; }

/* ---------- Principes ---------- */
.principles{ counter-reset:p; list-style:none; margin:0; }
.principles li{
  font-family:var(--grotesk); font-size:0.92em; font-weight:300;
  margin:0.4em 0; padding-left:2em; position:relative; line-height:1.3;
}
.principles li::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  position:absolute; left:0; color:var(--accent); font-weight:700; font-size:0.8em;
}

/* ---------- Ressources ---------- */
.resources{ display:grid; grid-template-columns:1fr 1fr; gap:1.2em 2em; }
.res{ border-top:2px solid var(--accent); padding-top:0.4em; }
.res b{ display:block; font-family:var(--grotesk); color:#fff; font-size:1em; }
.res span{ display:block; color:#bdbdbd; font-size:0.78em; line-height:1.35; margin-top:0.2em; }

/* ---------- Slide number & progress ---------- */
.reveal .progress{ color: var(--accent); height:4px; }
.reveal .slide-number{ background:transparent; color:#bbb; font-family:var(--grotesk); }
.reveal .controls{ color: var(--accent); }

/* ============================================================
   AJOUTS v2 — photos, surbrillance anatomie, démos, quiz
   ============================================================ */

/* ---------- Texte + photos côte à côte ---------- */
.photo-split{ display:block; }
.photo-split .ps-text{ width:54%; }
.photo-split .ps-imgs{
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:42%; display:flex; flex-direction:column; gap:0.7em;
}
.photo-split .ps-imgs figure{ margin:0; }
.photo-split .ps-imgs img{
  width:100%; height:auto; max-height:2.9em; object-fit:cover;
  display:block; border-radius:2px; box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.photo-split .ps-imgs.single img{ max-height:6.6em; }
.photo-split figcaption{
  font-family:var(--voltaire); font-size:0.52em; letter-spacing:.04em;
  color:#9a9a9a; margin-top:0.25em;
}
.photo-split h2{ font-size:1.7em; }
.photo-split .subtitle{ max-width:none; font-size:0.98em; line-height:1.4; }

/* ---------- Anatomie : SVG + surbrillances (une à la fois) ---------- */
.anatomy{ display:grid; grid-template-columns: 1fr 1.05fr; gap:2em; align-items:center; }
.glyph-stage{ position:static; height:auto; display:flex; align-items:center; justify-content:center; }
.rg-svg{ width:100%; max-width:8.2em; height:auto; display:block; overflow:visible; }
.rg-text{ font-family:var(--serif); font-size:250px; fill:var(--ink); }
.anatomy-slide .hl{ opacity:0; transition:opacity .3s ease; }
.anatomy-slide .hl.on{ opacity:1; }
rect.hl-xheight{ fill:rgba(230,51,39,.16); stroke:none; }
line.hl-baseline{ stroke:var(--accent); stroke-width:4; }
rect.hl-serif{ fill:rgba(230,51,39,.32); stroke:var(--accent); stroke-width:2.5; }
.hl-counter{ fill:rgba(230,51,39,.55); stroke:none; }
rect.hl-desc{ fill:rgba(230,51,39,.16); stroke:none; }
.anatomy-legend{ list-style:none; margin:0; }
.anatomy-legend li{ margin:0.4em 0; font-size:0.84em; line-height:1.28; }
.anatomy-legend b{ color: var(--accent); }
/* traduction anglaise des termes */
.en{ font-style:italic; color:var(--muted); font-size:0.82em; font-weight:400; }
.ven{ font-family:var(--sans); font-weight:400; font-style:italic; color:var(--muted); font-size:0.68em; letter-spacing:0; }

/* ---------- Vocabulaire en images ---------- */
.vocab-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.7em 1.6em; }
.vocab{ border-top:2px solid var(--ink); padding-top:0.3em; }
.vw{ display:block; font-family:var(--grotesk); font-weight:700; font-size:0.95em; }
.vdemo{ display:flex; align-items:center; gap:0.5em; height:1.75em; font-family:var(--grotesk); font-size:1.35em; line-height:1; margin:0.1em 0 0.04em; white-space:nowrap; }
.vdemo > span{ display:inline-block; }
.vdemo .lh-demo{ font-size:0.42em; text-align:center; }
.vdemo .tight-lh{ line-height:0.92; }
.vdemo .airy-lh{ line-height:1.7; }
.vd{ display:block; font-size:0.66em; color:var(--muted); line-height:1.25; white-space:nowrap; }

/* ---------- Specimen : sous-note ---------- */
.spec-sub{ font-size:0.72em !important; color:var(--muted); margin-top:0.5em !important; }
.spec-sub b{ color:var(--ink); }

/* ---------- Identité de marque ---------- */
.brand-row{ display:flex; gap:1em; align-items:baseline; flex-wrap:wrap; margin:0.3em 0 0.6em; }
.brand-chip{ font-size:1.7em; line-height:1; }
.brand-slide h2{ font-size:1.7em; }
.brand-slide .subtitle{ font-size:1.0em; line-height:1.4; }

/* ---------- Print : démos visuelles ---------- */
.usecase h2{ font-size:1.7em; margin-bottom:0.2em; }
.print-demos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4em; margin-top:0.3em; }
.pd{ margin:0; }
.pd-vis{ background:#fff; border:1px solid #e2ddd0; border-radius:3px; padding:0.6em 0.7em; height:4.6em; overflow:hidden; }
.pd figcaption{ font-family:var(--grotesk); font-size:0.66em; line-height:1.3; margin-top:0.4em; color:#3a352c; }
.pd figcaption b{ color:var(--accent); }
.measure{ display:flex; gap:0.6em; }
.measure .bad{ font-family:var(--serif); font-size:0.5em; line-height:1.35; color:#b9b2a3; margin:0; flex:1.6; }
.measure .good{ font-family:var(--serif); font-size:0.62em; line-height:1.35; color:var(--ink); margin:0; flex:1; border-left:2px solid var(--accent); padding-left:0.4em; }
.hierarchy{ display:flex; flex-direction:column; justify-content:center; }
.h-title{ font-family:var(--serif); font-weight:700; font-size:1.05em; line-height:1; }
.h-body{ font-family:var(--serif); font-size:0.52em; line-height:1.3; color:#444; margin:0.25em 0; }
.h-cap{ font-family:var(--grotesk); font-size:0.42em; letter-spacing:.08em; text-transform:uppercase; color:#999; }
.widows{ display:flex; align-items:center; }
.widows p{ font-family:var(--serif); font-size:0.62em; line-height:1.4; margin:0; }
.widows b{ color:var(--accent); }

/* ---------- Bâtiments : grille photo ---------- */
.buildings .bldg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1em; margin-top:0.3em; }
.bldg-grid figure{ margin:0; }
.bldg-grid img{ width:100%; height:4.6em; object-fit:cover; display:block; border-radius:2px; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.bldg-grid figcaption{ font-family:var(--grotesk); font-size:0.62em; line-height:1.3; color:#c9c9c9; margin-top:0.35em; }
.bldg-grid figcaption b{ color:#fff; }

/* ---------- Quiz ---------- */
.quiz{ text-align:center !important; }
.quiz::before{ display:none; }
.quiz-specimen{
  color:#fff; font-size:2.9em; line-height:1.1; font-weight:400;
  margin:0 auto 0.3em; max-width:14em;
}
.quiz-q{
  font-family:var(--voltaire); text-transform:uppercase; letter-spacing:.18em;
  font-size:0.7em; color:var(--accent); margin-bottom:0.6em;
}
.quiz-q .quiz-hint{ color:#7a7a7a; text-transform:none; letter-spacing:0; font-style:italic; }
.quiz-answer{ max-width:24em; margin:0 auto; }
.quiz-name{
  display:block; font-family:var(--grotesk); font-weight:700;
  font-size:1.6em; color:#fff; line-height:1.05; margin-bottom:0.25em;
}
.quiz-fact{ display:block; font-family:var(--sans); font-size:0.8em; line-height:1.4; color:#bdbdbd; }
.quiz-fact em{ color:#fff; }

/* ---------- Lisibilité & accessibilité ---------- */
.a11y-slide h2{ font-size:1.5em; margin-bottom:0.12em; }
.a11y-slide .uc-lead{ font-family:var(--serif); font-style:italic; font-size:1.0em; max-width:34em; margin:0 0 0.55em; line-height:1.3; }
.a11y-slide .note-aside{ margin-top:0.5em; font-size:0.68em; }
.a11y-cols{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:2.2em; align-items:center; }
.ct{ display:flex; justify-content:space-between; align-items:center; gap:1em;
  padding:0.45em 0.7em; margin-bottom:0.45em; border-radius:3px;
  font-family:var(--grotesk); font-weight:600; font-size:0.95em; }
.ct.ok{ background:#111; color:#fff; }
.ct.ok b{ color:#48d178; }
.ct.ko{ background:#fff; color:#d6d6d6; border:1px solid #ececec; }
.ct.ko b{ color:#ecc9c6; }
.a11y-cap{ font-family:var(--grotesk); font-size:0.68em; color:var(--muted); margin:0.2em 0 0; }
.a11y-cap b{ color:var(--accent); }
.a11y-list{ list-style:none; margin:0; }
.a11y-list li{ font-size:0.75em; line-height:1.26; margin:0.3em 0; padding-left:1em; position:relative; }
.a11y-list li::before{ content:"›"; color:var(--accent); position:absolute; left:0; font-weight:700; }

/* Polices auto-hébergées : voir css/fonts.css */

/* ---------- Finale Voltaire : révélation du logo en capitales ---------- */
.logo-specimen{ transition: letter-spacing .4s ease; }
.logo-specimen.upper{ text-transform:uppercase; letter-spacing:0.03em; }

/* ---------- Bâtiments : texte + héros Bauhaus ---------- */
.bldg-layout{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:2.2em; align-items:center; }
.bldg-points{ list-style:none; margin:0; }
.bldg-points li{ font-size:0.74em; line-height:1.3; margin:0.55em 0; padding-left:1em; position:relative; color:#dcdcdc; }
.bldg-points li::before{ content:"›"; color:var(--accent); position:absolute; left:0; font-weight:700; }
.bldg-points b{ color:#fff; }
.bldg-hero{ margin:0; }
.bldg-hero img{ width:100%; height:auto; max-height:11em; object-fit:cover; display:block; border-radius:2px; box-shadow:0 10px 30px rgba(0,0,0,.55); }
.bldg-hero figcaption{ font-family:var(--voltaire); font-size:0.55em; letter-spacing:.04em; color:#9a9a9a; margin-top:0.4em; }