/* Direction artistique Medeos 2026 — habillage des documents gratuits
   (guide méthodologique + Panoramas P1), chargée APRÈS leur feuille de style.
   Palette et typographie : docs/DESIGN-MEDEOS.md (proposition du 30/09/2026).
   Ne touche à AUCUN texte : seulement les polices, le fond et les titres.
   Les couleurs en dur des documents ont été converties à la même palette. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --medeos-purple: #51307F;
  --medeos-purple-light: #8062B3;
  --medeos-ink: #201B29;
  --medeos-ivory: #FAF7F2;
  --medeos-orange: #E89B55;
  --medeos-wash: #F1EBF5;
}

body {
  font-family: "Inter", Arial, sans-serif !important;
  background: var(--medeos-ivory) !important;
  color: var(--medeos-ink);
  -webkit-font-smoothing: antialiased;
}

/* Titres éditoriaux en sérif (règle de la DA : « titres en sérif, texte courant sobre »). */
h1, h2, h3,
.hook-header .course-title,
.hook-header .punch,
.hero .punch,
.stat .num,
.stat-shock .num,
.quick-stat .quick-stat-figure,
.cta h2 {
  font-family: "Source Serif 4", Georgia, serif !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em !important;
}

/* Le surtitre : petit trait orange devant, comme sur l'accueil. */
.hook-header .brand-tag,
.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
}
.hook-header .brand-tag::before,
.hero .kicker::before {
  content: "";
  width: 20px;
  height: 2px;
  flex: 0 0 20px;
  background: var(--medeos-orange);
}
.hero .kicker .dot { display: none; }

/* Cartes d'en-tête : fond blanc sur ivoire, bord lavande fin, angles doux. */
.hook-header,
.hero {
  background: #fff !important;
  border: 1px solid #E8E0EC !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 50px rgba(48, 30, 67, 0.08) !important;
}

::selection { background: #E7DDF0; color: var(--medeos-ink); }

/* Décor des marges (Lucas, 01/10 : « retravailler le fond gauche et droite sur ordi […]
   pas derrière le texte, un truc sympa mais discret »). Formes de la DA, figées dans les
   bandes latérales : la largeur du décor est bornée par la marge, il ne passe jamais sous
   la colonne de texte (900 px au plus, Panorama compris). Masqué sous 1240 px. */
@media (min-width: 1240px) {
  body::before,
  body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: min(340px, calc((100vw - 900px) / 2 - 40px));
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  body::before {
    left: 0;
    background-image: url("/ressources/da-decor-gauche-haut.svg"), url("/ressources/da-decor-gauche-bas.svg");
    background-position: left top, left bottom;
  }
  body::after {
    right: 0;
    background-image: url("/ressources/da-decor-droite-haut.svg"), url("/ressources/da-decor-droite-bas.svg");
    background-position: right top, right bottom;
  }
}