/* Plateforme formation : la charte Sartor posée sur les pages Tailwind.
   Les couleurs et les polices viennent de sartor-brand (references/identity/tokens.css),
   en thème clair seulement : la convention, l'émargement et les attestations s'impriment.
   La palette Tailwind elle-même est repeinte par sartor-tw.js (indigo, gris). */

@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-600-normal.woff2") format("woff2"); }

:root {
  --sartor-paper:   #F3F4F1;
  --sartor-surface: #FCFCFA;
  --sartor-ink:     #17181A;
  --sartor-ink-2:   #3E4046;
  --sartor-ink-3:   #6E7078;
  --sartor-hair:    #DEDFDA;
  --sartor-stitch:  #C3C5BF;
  --sartor-indigo:      #34406B;
  --sartor-indigo-soft: #7A85A8;
  --sartor-thread:      #9A3B34;
  --sartor-serif: "Cormorant Garamond", Georgia, "DejaVu Serif", serif;
  --sartor-sans:  "Hanken Grotesk", "Liberation Sans", Arial, sans-serif;
  --sartor-mono:  "DejaVu Sans Mono", ui-monospace, Menlo, Consolas, monospace;
}

html { color-scheme: light; }
body {
  font-family: var(--sartor-sans) !important;
  background-color: var(--sartor-paper) !important;
  color: var(--sartor-ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sartor-indigo); color: var(--sartor-surface); }

/* Titres : la serif de la maison, en 500, sans gras de synthèse */
h1, h2 { font-family: var(--sartor-serif) !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--sartor-ink); }
h1 { line-height: 1.1; }
h2 { line-height: 1.2; }

/* En-tête de page : papier, couture en pointillé, wordmark */
.sx-hero {
  background: var(--sartor-paper) !important;
  border-bottom: 1px dashed var(--sartor-stitch);
}
.sx-hero h1 { color: var(--sartor-ink) !important; font-size: clamp(30px, 4.4vw, 42px) !important; }
.sx-hero p, .sx-hero span:not(.sx-badge) { color: var(--sartor-ink-3); }
.sx-hero a { color: var(--sartor-indigo) !important; }
.sx-hero a:hover { color: var(--sartor-ink) !important; }

.sx-wm {
  font-family: var(--sartor-serif) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--sartor-ink) !important;
  margin: 0 0 14px 0;
}
.sx-wm::after { content: "."; color: var(--sartor-thread); letter-spacing: 0; }

/* Numéro de module dans l'en-tête : un chiffre en serif dans un cadre fin */
.sx-badge {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sartor-indigo-soft);
  border-radius: 2px;
  font-family: var(--sartor-sans);
  font-size: 20px; font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--sartor-indigo) !important;
  background: var(--sartor-surface);
}

/* Pied de page : le lockup, sans adresse */
.sx-foot { background: var(--sartor-paper) !important; border-top: 1px dashed var(--sartor-stitch) !important; }
.sx-foot p { color: var(--sartor-ink-3) !important; font-size: 12px; letter-spacing: 0.04em; }

/* Cartes et champs : angles calmes, filets fins */
.rounded-xl, .rounded-2xl { border-radius: 6px !important; }
.rounded-lg { border-radius: 4px !important; }
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }

input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--sartor-indigo) !important;
  outline-offset: 2px;
}

@media print {
  body { background: #fff !important; }
  .sx-hero { border-bottom: 0; }
}