/* ============================================================
   PAF STUDIO — Rapports clients · Base
   Mise en page d'une slide, polices, primitives partagées
   (panneau, en-tête, surligneur, bandeau jaune, duotone, notes).
   ============================================================ */

/* ---- Polices embarquées (chemins relatifs à /system) ---- */
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Inter Display'; src: url('../assets/fonts/InterDisplay-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Inter Display'; src: url('../assets/fonts/InterDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Inter Display'; src: url('../assets/fonts/InterDisplay-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; }

/* ---- Reset & page ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #E9E9EF; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@page { size: 1280px 720px; margin: 0; }

/* ---- La slide ---- */
.slide {
  position: relative;
  width: var(--slide-w);
  height: var(--slide-h);
  background: var(--paper);
  overflow: hidden;
  page-break-after: always;
  break-after: page;
}
/* En prévisualisation navigateur, on empile les slides avec un espace */
@media screen { .slide { margin: 24px auto; box-shadow: 0 2px 24px rgba(31,21,81,.12); } }

/* Panneau de fond des slides de contenu */
.slide--panel::before {
  content: '';
  position: absolute;
  inset: 20px var(--panel-inset);
  background: var(--panel);
  border-radius: var(--panel-radius);
}
.slide__inner {
  position: relative;
  height: 100%;
  padding: var(--pad-slide-top) calc(var(--panel-inset) + var(--pad-slide)) 72px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- En-tête de slide : kicker + titre + logo ---- */
.slide-head { position: relative; flex: 0 0 auto; margin-bottom: 28px; }
.kicker {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.kicker--caps { text-transform: uppercase; letter-spacing: var(--track-kicker); font-size: var(--fs-note); }
h1.title {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  max-width: 78%;
}
.slide-logo {
  position: absolute;
  top: 44px;
  right: calc(var(--panel-inset) + 44px);
  height: 64px;
  z-index: 3;
}
.slide-logo img { height: 100%; width: auto; object-fit: contain; }

/* ---- Surligneur jaune dans les titres et le texte ---- */
mark {
  background: none;
  color: inherit;
  position: relative;
  z-index: 0;
  white-space: nowrap;
  margin: 0 0.28em;
}
mark::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2% -0.28em -6% -0.28em;
  background: var(--yellow);
  transform: rotate(-1.1deg);
}
/* variante chip (date sous un titre, ex. « Avril 2026 ») */
.chip-date {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  background: var(--yellow);
  padding: 3px 12px 4px;
  transform: rotate(-1.2deg);
  margin-top: 10px;
}

/* ---- Bandeau « scotch » jaune des couvertures/intercalaires ---- */
.tape {
  position: relative;
  display: inline-block;
  padding: 10px 56px 14px;
  background: var(--yellow);
  transform: rotate(-1.6deg);
}
.tape::before { /* seconde épaisseur décalée, comme dans Pitch */
  content: '';
  position: absolute;
  inset: -8px 18px -10px -14px;
  background: var(--yellow);
  transform: rotate(1.8deg);
  z-index: -1;
}
.tape > * { position: relative; }
/* éclats jaunes dessinés à main levée, en haut à droite du bandeau
   (géométrie d'origine : carré de 202 pt chevauchant le bandeau) */
.tape .sparkle {
  position: absolute;
  top: -118px;
  right: -148px;
  width: 250px;
  transform: none;
}

/* ---- Photos duotone (traitement violet de la charte) ----
   Vrai duotone : filtre SVG #duotone injecté par render.js, calibré
   sur les PDF Pitch (ombres #1A1344 → lumières #AAA3D1). */
.duotone { position: relative; overflow: hidden; }
.duotone img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: url(#duotone);
}

/* ---- Filigrane géant (slides Synthèse) ---- */
.watermark {
  position: absolute;
  top: 90px;
  left: 0; right: 0;
  text-align: center;
  font-size: var(--fs-watermark);
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: .02em;
  color: var(--watermark);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  z-index: 0;
}

/* ---- Note de bas de slide (astérisque) ----
   Centrée DANS le panneau, juste au-dessus de son bord bas
   (comme dans les rapports Pitch d'origine). */
/* La note est en absolu, donc invisible pour le moteur d'ajustement.
   On réserve sa hauteur dans le contenu, sinon une conclusion longue
   lui passe dessus sans que la réduction automatique s'en aperçoive. */
.slide__inner:has(~ .footnote) { padding-bottom: 112px; }

.footnote {
  position: absolute;
  left: calc(var(--panel-inset) + 40px);
  right: calc(var(--panel-inset) + 40px);
  bottom: 42px;
  text-align: center;
  font-size: var(--fs-note);
  font-style: italic;
  color: var(--ink);
  z-index: 2;
}

/* ---- Corps de slide générique ---- */
.slide-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; z-index: 1; }
.slide-body > * + * { margin-top: 24px; }
strong, b { font-weight: 700; }

/* Texte d'intro centré au-dessus d'une grille */
.lead { text-align: center; font-size: var(--fs-body-lg); max-width: 900px; margin-left: auto; margin-right: auto; }

/* ---- Ajustement automatique anti-débordement ----
   Le moteur de rendu réduit progressivement la taille de police
   des éléments [data-fit] jusqu'à disparition du débordement. */
[data-fit] { min-height: 0; }