/* =====================================================================
   Deck DSFR maison — Forum Ouvert Emploi/Travail
   « Mieux adresser le marché caché de l'emploi »
   Light mode FORCÉ (aucun JS de scheme DSFR chargé) · 16:9 vidéoproj
   ===================================================================== */

:root {
  /* Palette DSFR officielle */
  --bf:        #000091; /* Bleu France */
  --bf-hover:  #1212ff;
  --red:       #e1000f; /* Rouge Marianne */
  --ink:       #161616; /* Grey 50 — texte principal */
  --ink-soft:  #3a3a3a;
  --grey:      #666666;
  --grey-mid:  #929292;
  --grey-line: #dddddd;
  --bg:        #ffffff;
  --bg-alt:    #f6f6f6; /* Grey 975 */
  --bg-blue:   #f5f5fe; /* Bleu France 975 — fond clair accent */
  --green:     #18753c; /* Success */
  --green-bg:  #e3fbe3;
  --orange:    #b34000; /* Warning text */
  --orange-bg: #fcebd2;
  --info:      #0063cb;
  --info-bg:   #e8edff;

  --maxw: 1180px;
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--ink);
  color: var(--ink);
  font-family: "Marianne", arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---- Deck container ---- */
/* fixed + inset:0 → remplit exactement le viewport réel (robuste vs quirks 100vh, vidéoproj, navigateur fenêtré) */
.deck { position: fixed; inset: 0; background: var(--bg); }

.slide {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 5.2vh 7vw 7vh;
  background: var(--bg);
  animation: slidein .28s ease;
}
.slide.is-active { display: flex; }
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.slide__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* ---- Kicker (label de section) ---- */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: clamp(.85rem, 1.5vmin, 1.1rem);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf);
  margin: 0 0 1.6vh;
}
.kicker__num {
  display: inline-grid; place-items: center;
  min-width: 2.1em; height: 2.1em; padding: 0 .4em;
  background: var(--bf); color: #fff; border-radius: 999px;
  font-size: .82em; letter-spacing: 0;
}
.kicker--red { color: var(--red); }
.kicker--red .kicker__num { background: var(--red); }
.kicker--green { color: var(--green); }
.kicker--green .kicker__num { background: var(--green); }

/* ---- Titres ---- */
.slide h1 {
  font-size: clamp(2rem, 5.6vmin, 4rem);
  line-height: 1.04; font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 2.2vh; color: var(--ink);
}
.slide h2 {
  font-size: clamp(1.7rem, 4.3vmin, 3rem);
  line-height: 1.08; font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 1.8vh; color: var(--ink);
}
.slide .lead {
  font-size: clamp(1.05rem, 2.5vmin, 1.7rem);
  line-height: 1.4; color: var(--ink-soft); font-weight: 400;
  margin: 0 0 2vh; max-width: 30em;
}
.slide .lead strong { color: var(--ink); font-weight: 700; }
.accent-bf  { color: var(--bf); }
.accent-red { color: var(--red); }
.accent-grn { color: var(--green); }
.accent-org { color: var(--orange); }

/* underline highlight */
.hl { background: linear-gradient(transparent 62%, #ffd7d9 62%); padding: 0 .08em; }
.hl-b { background: linear-gradient(transparent 62%, #cdcdfb 62%); padding: 0 .08em; }

/* ---- Slide de section (fond bleu plein) ---- */
.slide--section { background: var(--bf); color: #fff; }
.slide--section h1, .slide--section h2 { color: #fff; }
.slide--section .lead { color: rgba(255,255,255,.86); }
.slide--section .kicker { color: #fff; }
.slide--section .kicker__num { background: #fff; color: var(--bf); }
.slide--section .footer-src { color: rgba(255,255,255,.6); }
.slide--section .pagenum { color: rgba(255,255,255,.7); }

/* ---- Slide titre (cover) ---- */
.cover { justify-content: center; }
.cover .eyebrow {
  font-size: clamp(.9rem, 1.7vmin, 1.2rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.82); margin: 0 0 2.4vh;
}
.cover h1 { font-size: clamp(2.4rem, 7vmin, 5.4rem); margin-bottom: 2.6vh; }
.cover .subtitle {
  font-size: clamp(1.1rem, 2.7vmin, 1.9rem); font-weight: 400;
  color: rgba(255,255,255,.9); line-height: 1.35; max-width: 26em; margin: 0 0 4vh;
}
.cover .byline {
  font-size: clamp(.95rem, 1.9vmin, 1.25rem); color: rgba(255,255,255,.95);
  border-top: 2px solid rgba(255,255,255,.4); padding-top: 2.2vh; display: inline-block;
}
.cover .byline strong { font-weight: 700; }
.cover .flag { display: flex; gap: 0; height: 1.4em; margin-bottom: 3.2vh; width: max-content; }
.cover .flag span { width: 1.1em; }
.cover .flag .b { background: #000091; } .cover .flag .w { background: #fff; } .cover .flag .r { background: #e1000f; }

/* ---- Stats / chiffres-chocs ---- */
.stats { display: flex; flex-wrap: wrap; gap: 2.4vw; margin: 1vh 0 2vh; }
.stat { flex: 1 1 0; min-width: 200px; }
.stat__value {
  font-size: clamp(2.6rem, 8vmin, 6rem); font-weight: 800; line-height: .98;
  letter-spacing: -.02em; color: var(--bf); display: block;
}
.stat__value.is-red { color: var(--red); }
.stat__value.is-green { color: var(--green); }
.stat__value.is-org { color: var(--orange); }
.stat__value small { font-size: .42em; font-weight: 700; letter-spacing: 0; }
.stat__label {
  display: block; margin-top: .6vh;
  font-size: clamp(.95rem, 2vmin, 1.35rem); line-height: 1.25; color: var(--ink-soft); max-width: 18em;
}
.stat__label strong { color: var(--ink); }
.vs-divider {
  align-self: center; font-size: clamp(1.2rem,3vmin,2rem); font-weight: 800;
  color: var(--grey-mid); padding: 0 .4vw;
}

/* ---- Callout réutilisé ---- */
.callout {
  border-left: .35rem solid var(--bf);
  background: var(--bg-blue);
  padding: 2.2vh 2vw; border-radius: 0 .4rem .4rem 0;
  font-size: clamp(1.05rem, 2.4vmin, 1.6rem); line-height: 1.35; color: var(--ink);
  margin: 1.4vh 0;
}
.callout--red { border-color: var(--red); background: #fef2f2; }
.callout--green { border-color: var(--green); background: var(--green-bg); }
.callout--org { border-color: var(--orange); background: var(--orange-bg); }
.callout strong { font-weight: 800; }
.callout .big { font-weight: 800; font-size: 1.15em; }

/* ---- Listes ---- */
.bullets { list-style: none; padding: 0; margin: 1vh 0; }
.bullets li {
  position: relative; padding: .9vh 0 .9vh 1.7em;
  font-size: clamp(1rem, 2.3vmin, 1.5rem); line-height: 1.32; color: var(--ink-soft);
  border-bottom: 1px solid var(--grey-line);
}
.bullets li:last-child { border-bottom: 0; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 1.55em;
  width: .8em; height: .8em; transform: translateY(-50%);
  background: var(--bf); border-radius: 2px;
}
.bullets li strong { color: var(--ink); }
.bullets.q li::before { background: var(--red); border-radius: 999px; }
.bullets.nomark li { padding-left: 0; }
.bullets.nomark li::before { display: none; }

/* ---- Grille de sources / tuiles ---- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6vw; margin: 1.6vh 0; }
.tile {
  background: var(--bg-alt); border: 1px solid var(--grey-line); border-top: .3rem solid var(--bf);
  border-radius: .35rem; padding: 1.8vh 1.4vw; display: flex; flex-direction: column;
}
.tile--use  { border-top-color: var(--green); }
.tile--under{ border-top-color: var(--orange); }
.tile--new  { border-top-color: var(--red); }
.tile__head {
  font-size: clamp(.95rem, 2vmin, 1.35rem); font-weight: 800; margin: 0 0 .8vh; color: var(--ink);
  display: flex; align-items: center; gap: .5em;
}
.tile__tag {
  font-size: .62em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .2em .6em; border-radius: 4px; color: #fff;
}
.tile--use .tile__tag { background: var(--green); }
.tile--under .tile__tag { background: var(--orange); }
.tile--new .tile__tag { background: var(--red); }
.tile ul { list-style: none; padding: 0; margin: 0; }
.tile li {
  font-size: clamp(.82rem, 1.65vmin, 1.12rem); line-height: 1.3; color: var(--ink-soft);
  padding: .45vh 0 .45vh 1em; position: relative;
}
.tile li::before { content: "›"; position: absolute; left: 0; color: var(--grey-mid); font-weight: 700; }

/* ---- Figure ---- */
.figrow { display: flex; gap: 2.4vw; align-items: center; }
.figrow > .col-txt { flex: 1 1 42%; }
.figrow > .col-fig { flex: 1 1 58%; text-align: center; }
.figrow img { max-width: 100%; max-height: 62vh; border: 1px solid var(--grey-line); border-radius: .3rem; background:#fff; }
.fig-caption { font-size: clamp(.75rem,1.4vmin,1rem); color: var(--grey); margin-top: .6vh; }

/* ---- Questions (forum) ---- */
.qcard {
  background: #fff; border: 2px solid var(--red); border-radius: .5rem;
  padding: 2.4vh 2vw; margin: 1.4vh 0;
  font-size: clamp(1.15rem, 2.9vmin, 2rem); font-weight: 700; line-height: 1.28; color: var(--ink);
}
.qcard .qnum { color: var(--red); font-weight: 800; margin-right: .5em; }
.qlabel {
  font-size: clamp(.95rem,1.9vmin,1.25rem); color: var(--grey); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1vh;
}

/* ---- Footer (source + pagination) ---- */
.footer-src {
  position: absolute; left: 7vw; bottom: 2.6vh;
  font-size: clamp(.68rem, 1.25vmin, .92rem); color: var(--grey); max-width: 70vw;
  font-style: italic;
}
.pagenum {
  position: absolute; right: 7vw; bottom: 2.6vh;
  font-size: clamp(.7rem,1.3vmin,.95rem); color: var(--grey-mid); font-variant-numeric: tabular-nums;
}

/* ---- Barre de progression ---- */
.progress { position: fixed; top: 0; left: 0; height: 5px; background: var(--red); width: 0; z-index: 50; transition: width .25s ease; }

/* ---- Aide nav ---- */
.navhint {
  position: fixed; right: 1.4vw; top: 1.4vh; z-index: 40;
  font-size: .8rem; color: var(--grey-mid); background: rgba(255,255,255,.85);
  border: 1px solid var(--grey-line); border-radius: 999px; padding: .3em .9em;
  opacity: .0; transition: opacity .3s; pointer-events: none;
}
.deck:hover .navhint { opacity: .55; }

/* edge click zones */
.navzone { position: fixed; top: 0; bottom: 0; width: 7vw; z-index: 30; cursor: pointer; }
.navzone--prev { left: 0; } .navzone--next { right: 0; }

/* ---- Tableau sobre ---- */
table.flat { width: 100%; border-collapse: collapse; margin: 1.2vh 0; font-size: clamp(.85rem,1.8vmin,1.2rem); }
table.flat th, table.flat td { text-align: left; padding: 1vh 1vw; border-bottom: 1px solid var(--grey-line); }
table.flat th { color: var(--bf); font-weight: 700; border-bottom: 2px solid var(--bf); }
table.flat td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Print → PDF (1 slide = 1 page paysage) ---- */
@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body { overflow: visible; height: auto; background: #fff; }
  .deck { position: static; inset: auto; height: auto; }
  .slide { position: relative; display: flex !important; height: 720px; width: 1280px; page-break-after: always; animation: none; }
  .progress, .navhint, .navzone { display: none !important; }
}

/* petite tolérance écrans étroits */
@media (max-width: 760px) {
  .stats { flex-direction: column; gap: 1.4vh; }
  .grid3 { grid-template-columns: 1fr; }
  .figrow { flex-direction: column; }
}