/* ==========================================================================
   Konatic x Epitech - theme de soutenance
   Arthur Dumortier - 2026
   ========================================================================== */

:root{
  --ink:        #0f1f3d;
  --ink-2:      #2b3f61;
  --ink-soft:   #64748b;
  --line:       #dbe3ee;
  --bg:         #f5f8fc;
  --bg-2:       #ffffff;

  --navy:       #0b1730;
  --navy-2:     #142544;

  --accent:     #2f66c8;
  --accent-2:   #5b90e8;
  --accent-dim: #a8c2ec;

  --hot:        #ff7a1a;
  --hot-2:      #ffbb3d;
  --hot-3:      #ff3d3d;
  --cold:       #3fbfd8;
  --ok:         #22a06b;

  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --disp: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- base ---------- */
.reveal-viewport{ background: var(--bg); }
.reveal{ font-family: var(--sans); font-size: 38px; font-weight: 400; color: var(--ink); }

.reveal .slides{ text-align: left; }
.reveal .slides section{ height: 100%; overflow: hidden; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4{
  font-family: var(--disp);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 .35em 0;
  text-transform: none;
  text-shadow: none;
}
.reveal h1{ font-size: 2.3em; }
.reveal h2{ font-size: 1.5em; }
.reveal h3{ font-size: 1.0em; }
.reveal h4{ font-size: .78em; font-weight: 600; color: var(--ink-2); }
.reveal p{ line-height: 1.5; margin: 0 0 .6em; }
.reveal strong{ color: var(--ink); font-weight: 700; }
.reveal em{ font-style: normal; color: var(--accent); font-weight: 600; }

/* ---------- layout helpers ---------- */
.rows{ display:flex; flex-direction:column; height:calc(100% - 40px); }
.grow{ flex:1 1 auto; min-height:0; }
.cols{ display:flex; gap:34px; align-items:stretch; }
.cols.grow{ align-items:stretch; }
.cols.center{ align-items:center; }
.c1{flex:1} .c2{flex:2} .c3{flex:3} .c4{flex:4} .c5{flex:5}
.stack{ display:flex; flex-direction:column; gap:14px; min-height:0; }
.stack > .badge{ align-self:flex-start; }
.center-y{ display:flex; flex-direction:column; justify-content:center; height:calc(100% - 40px); }
.mt{ margin-top:22px; }
.mt-l{ margin-top:38px; }

/* ---------- eyebrow / kicker ---------- */
.kicker{
  display:flex; align-items:center; gap:14px;
  font-family: var(--disp);
  font-size: .44em; font-weight:600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9em;
}
.kicker::before{
  content:""; width:44px; height:3px; border-radius:2px;
  background: var(--accent); flex:none;
}
section.dark .kicker{ color: var(--accent-2); }
section.dark .kicker::before{ background: var(--accent-2); }

/* ---------- dark slides ---------- */
section.dark{ color:#e8eefb; }
section.dark h1, section.dark h2, section.dark h3{ color:#fff; }
section.dark h4{ color:#b9c9e6; }
section.dark strong{ color:#fff; }
section.dark em{ color: var(--accent-2); }
section.dark .muted{ color:#94a8c8; }

/* ---------- typography utilities ---------- */
.muted{ color: var(--ink-soft); }
.small{ font-size:.6em; line-height:1.55; }
.xsmall{ font-size:.5em; line-height:1.6; }
.lead{ font-size:.76em; line-height:1.55; color: var(--ink-2); }
section.dark .lead{ color:#c3d2ea; }

/* ---------- title slide ---------- */
.title-slide{
  height:100%;
  display:grid; grid-template-columns: 1.3fr 1fr; gap:44px; align-items:center;
}
.title-slide .rule{ width:80px; height:5px; background:var(--accent); border-radius:3px; margin: 8px 0 28px; }
.title-meta{ font-size:.48em; line-height:1.8; color:var(--ink-soft); }
.title-meta b{ color:var(--ink); font-weight:600; }
.logo-row{ display:flex; align-items:center; gap:34px; margin-top:34px; }
.logo-row img{ height:44px; width:auto; object-fit:contain; border:0; background:none; }
.logo-chip{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); border-radius:10px; padding:8px 16px;
}
.logo-chip img{ height:40px; }

/* ---------- agenda ---------- */
.agenda{ list-style:none; margin:0; padding:0; max-width:74%; }
.agenda li{
  display:grid; grid-template-columns: 88px 1fr; align-items:center;
  gap:22px; padding:18px 6px; border-top:1px solid var(--line);
  transition: opacity .35s ease;
}
.agenda li:last-child{ border-bottom:1px solid var(--line); }
.agenda .num{
  font-family: var(--disp); font-weight:600; font-size:.6em;
  letter-spacing:.16em; color:var(--accent);
}
.agenda .lbl{ font-family: var(--disp); font-weight:700; font-size:.76em; color:var(--ink); }
.agenda .dur{ font-size:.42em; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

/* ---------- section divider ---------- */

.divider-wrap{ height:calc(100% - 40px); display:flex; flex-direction:column; justify-content:center; }
.divider-num{
  font-family:var(--disp); font-size:1em; font-weight:600;
  letter-spacing:.3em; color:var(--accent-2); margin-bottom:.35em;
}
.divider-wrap h2{ font-size:2em; }
.divider-sub{ font-size:.58em; color:#9fb4d6; max-width:72%; margin-top:.5em; line-height:1.5; }

/* ---------- cards ---------- */
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; box-shadow:0 1px 2px rgba(15,31,61,.04);
}
section.dark .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); box-shadow:none; }
.card h3{ font-size:.66em; margin-bottom:.35em; }
.card p{ font-size:.5em; line-height:1.5; color:var(--ink-soft); margin:0; }
section.dark .card p{ color:#a9bcda; }
.card.accent{ border-left:4px solid var(--accent); }
.card.hot{ border-left:4px solid var(--hot); }
.card.ok{ border-left:4px solid var(--ok); }

/* ---------- stats ---------- */
.stats{ display:flex; gap:18px; }
.stat{ flex:1; }
.stat .v{
  font-family:var(--disp); font-weight:700; font-size:1.45em;
  color:var(--accent); line-height:1; letter-spacing:-.03em;
}
section.dark .stat .v{ color:var(--accent-2); }
.stat .v.hot{ color:var(--hot); }
.stat .k{ font-size:.4em; color:var(--ink-soft); margin-top:.6em; line-height:1.4; }
section.dark .stat .k{ color:#93a8c8; }

/* ---------- bullets ---------- */
.reveal ul.clean{ list-style:none; margin:0; padding:0; }
ul.clean li{
  position:relative; padding-left:26px; margin-bottom:.65em;
  font-size:.6em; line-height:1.5; color:var(--ink-2);
}
section.dark ul.clean li{ color:#c8d6ec; }
ul.clean li::before{
  content:""; position:absolute; left:2px; top:.55em;
  width:8px; height:8px; border-radius:2px; background:var(--accent);
}
ul.clean li b{ color:var(--ink); }
section.dark ul.clean li b{ color:#fff; }

/* ---------- figures ---------- */
figure{ margin:0; }
figure img{
  display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid var(--line); background:#0b1730;
}
section.dark figure img{ border-color:rgba(255,255,255,.14); }
figcaption{ font-size:.38em; color:var(--ink-soft); margin-top:.6em; line-height:1.5; }
section.dark figcaption{ color:#8ea3c4; }
.reveal img{ max-width:100%; }
.frame{ border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0b1730; height:100%; }
section.dark .frame{ border-color:rgba(255,255,255,.14); }
.frame img{ width:100%; height:100%; object-fit:cover; display:block; border:0; border-radius:0; }
.frame.contain img{ object-fit:contain; }

/* ---------- badges ---------- */
.badge{
  display:inline-block; font-family:var(--disp); font-size:.34em; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
  background:rgba(47,102,200,.1); color:var(--accent); border:1px solid rgba(47,102,200,.25);
}
.badge.hot{ background:rgba(255,122,26,.12); color:#c2560a; border-color:rgba(255,122,26,.3); }
.badge.ok{ background:rgba(34,160,107,.12); color:#15804f; border-color:rgba(34,160,107,.3); }
section.dark .badge{ background:rgba(91,144,232,.16); color:#a9c6f5; border-color:rgba(91,144,232,.35); }
section.dark .badge.hot{ background:rgba(255,122,26,.16); color:#ffb877; border-color:rgba(255,122,26,.4); }
section.dark .badge.ok{ background:rgba(34,160,107,.18); color:#7fdcb2; border-color:rgba(34,160,107,.4); }

/* ---------- timeline ---------- */
.tl{ position:relative; display:flex; margin-top:26px; }
.tl::before{
  content:""; position:absolute; left:0; right:0; top:17px; height:2px;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
}
.tl-item{ flex:1; position:relative; padding-right:26px; }
.tl-dot{
  width:14px; height:14px; border-radius:50%; background:var(--bg);
  border:3px solid var(--accent); position:relative; z-index:2; margin:11px 0 18px;
}
.tl-date{ font-family:var(--disp); font-size:.4em; font-weight:600; color:var(--accent); letter-spacing:.06em; }
.tl-title{ font-family:var(--disp); font-size:.52em; font-weight:700; color:var(--ink); margin:.45em 0 .35em; line-height:1.25; }
.tl-desc{ font-size:.4em; color:var(--ink-soft); line-height:1.5; }

/* ---------- footer ---------- */
.deck-footer{
  position:fixed; bottom:18px; left:34px; right:34px;
  display:flex; justify-content:flex-start; gap:20px; align-items:center;
  font-size:12px; font-family:var(--disp); letter-spacing:.14em;
  text-transform:uppercase; color:#9aa8bd; z-index:30; pointer-events:none;
  transition:color .3s ease;
}
.deck-footer .part{ color:var(--accent); font-weight:600; }
body.on-dark .deck-footer{ color:#6f83a5; }
body.on-dark .deck-footer .part{ color:var(--accent-2); }

.reveal .progress{ height:4px; color:var(--accent); }

/* ---------- fragments ---------- */
.reveal .slides section .fragment.fade-up{ opacity:0; transform:translateY(16px); transition:all .45s cubic-bezier(.22,.8,.3,1); }
.reveal .slides section .fragment.fade-up.visible{ opacity:1; transform:none; }

/* ---------- print ---------- */
@media print{
  .deck-footer{ display:none; }
}

/* ---------- listes "une ligne" : peu de texte, gros calibre ---------- */
.reveal ul.lean{ list-style:none; margin:0; padding:0; }
ul.lean li{
  position:relative; padding-left:32px; margin-bottom:1.05em;
  font-size:.72em; line-height:1.35; color:var(--ink-2); font-weight:400;
}
ul.lean li:last-child{ margin-bottom:0; }
section.dark ul.lean li{ color:#c8d6ec; }
ul.lean li::before{
  content:""; position:absolute; left:2px; top:.46em;
  width:11px; height:11px; border-radius:3px; background:var(--accent);
}
section.dark ul.lean li::before{ background:var(--accent-2); }
ul.lean li b{ color:var(--ink); font-weight:700; }
section.dark ul.lean li b{ color:#fff; }
.card ul.lean li{ font-size:.6em; margin-bottom:.8em; padding-left:26px; }
.card ul.lean li::before{ width:9px; height:9px; top:.44em; }

/* respiration : moins de texte, donc plus grand */
.card p{ font-size:.56em; }
.dg-caption p{ font-size:.5em; }
figcaption{ font-size:.42em; }
.tl-desc{ font-size:.42em; }

/* ---------- voile sur les slides a fond video ---------- */
.scrim{
  position:absolute; inset:-8% -8%;
  background:linear-gradient(100deg,
    rgba(11,23,48,.96) 0%, rgba(11,23,48,.9) 38%,
    rgba(11,23,48,.45) 68%, rgba(11,23,48,.15) 100%);
  pointer-events:none;
}
.scrim + .divider-wrap{ position:relative; z-index:2; }

/* ---------- systeme de remplissage : les visuels prennent la place ---------- */
.cols.grow > *{ display:flex; flex-direction:column; min-height:0; }
.vc{ justify-content:center; }
figure.fill{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
figure.fill img, figure.fill video{ flex:1 1 auto; min-height:0; height:100%; width:100%; object-fit:contain; }
figure.fill figcaption{ flex:none; }
.duo{ display:flex; gap:16px; flex:1 1 auto; min-height:0; }
.duo > figure{ flex:1; display:flex; flex-direction:column; min-height:0; }
.duo > figure img{ flex:1 1 auto; min-height:0; height:100%; width:100%; object-fit:contain; }
ul.lean.big li{ font-size:.84em; margin-bottom:1.2em; }

/* ---------- organigramme ---------- */
.orgchart{ width:100%; height:auto; }
figure.fill svg{ flex:1 1 auto; min-height:0; height:100%; width:100%; }
.orgchart .n       { fill:var(--bg-2); stroke:var(--line); stroke-width:1.5; }
.orgchart .n-hi    { fill:rgba(47,102,200,.10); stroke:var(--accent); stroke-width:2; }
.orgchart .n-me    { fill:var(--accent); stroke:none; }
.orgchart .n-ghost { fill:none; stroke:var(--line); stroke-width:1.5; stroke-dasharray:5 6; }
.orgchart .ln      { stroke:var(--line);   stroke-width:1.5; fill:none; }
.orgchart .ln-hi   { stroke:var(--accent); stroke-width:1.5; fill:none; }
.orgchart .nt      { font-family:var(--disp); font-size:17px; font-weight:700; fill:var(--ink); }
.orgchart .ns      { font-family:var(--sans); font-size:13px; fill:var(--ink-soft); }
.orgchart .nt-hi   { font-family:var(--disp); font-size:17px; font-weight:700; fill:var(--accent); }
.orgchart .nt-me   { font-family:var(--disp); font-size:17px; font-weight:700; fill:#fff; }
.orgchart .ns-me   { font-family:var(--sans); font-size:13px; fill:rgba(255,255,255,.82); }