/* =========================================================
   CRÈME — Design tokens
   Source : Figma "Design System" (node 67:130), Édition 01
   Référence : BEAUTÉ V3 + DÉCRYPTAGES
   ========================================================= */

:root {
  /* --- Couleurs primaires --- */
  --creme-papier: #F6F1EA;
  --creme-encre: #14100D;
  --creme-cobalt: #173CF5;
  --creme-acide: #E6F554;
  --creme-lavande: #DDD7EF;

  /* --- Couleurs secondaires --- */
  --creme-secondaire: #716D67;
  --creme-filet: #C9C4BC;
  --creme-erreur: #AF2929;
  --creme-succes: #236443;
  --creme-inactif: #E5E0D8;

  /* --- Rôles sémantiques (alias) --- */
  --creme-fond-page: var(--creme-papier);
  --creme-fond-inverse: var(--creme-encre);
  --creme-fond-marque: var(--creme-cobalt);
  --creme-fond-accent: var(--creme-acide);
  --creme-fond-editorial: var(--creme-lavande);
  --creme-fond-inactif: var(--creme-inactif);

  --creme-texte-principal: var(--creme-encre);
  --creme-texte-inverse: var(--creme-papier);
  --creme-texte-marque: var(--creme-cobalt);
  --creme-texte-secondaire: var(--creme-secondaire);

  --creme-bordure-discrete: var(--creme-filet);
  --creme-bordure-focus: var(--creme-cobalt);

  --creme-etat-erreur: var(--creme-erreur);
  --creme-etat-succes: var(--creme-succes);

  --creme-action-survol: #102BCD; /* cobalt survol (bouton principal) */

  /* --- Échelle d'espacements --- */
  --creme-space-4: 4px;
  --creme-space-8: 8px;
  --creme-space-12: 12px;
  --creme-space-16: 16px;
  --creme-space-24: 24px;
  --creme-space-32: 32px;
  --creme-space-48: 48px;
  --creme-space-64: 64px;
  --creme-space-96: 96px;

  /* --- Grille --- */
  --creme-site-largeur: 1300px; /* largeur globale du site (marges extérieures) */
  --creme-grid-max: 1440px;
  --creme-grid-margin: 48px;
  --creme-grid-content: 1344px;
  --creme-grid-gutter: 24px;
  --creme-grid-gutter-lg: 32px;
  --creme-reading-min: 640px;
  --creme-reading-max: 760px;
  --creme-touch-target: 48px;

  /* --- Typographies --- */
  --creme-font-principale: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --creme-font-editoriale: 'Lora', Georgia, serif;
}

/* =========================================================
   Échelle typographique (desktop)
   Chaque style : taille / interligne / graisse / tracking
   ========================================================= */

.t-marque       { font: 800 144px/140px var(--creme-font-principale); letter-spacing: -9px; }
.t-rubrique     { font: 800 88px/96px var(--creme-font-principale);   letter-spacing: -4px; }
.t-une          { font: 800 66px/68px var(--creme-font-principale);   letter-spacing: -3px; }
.t-section      { font: 800 48px/52px var(--creme-font-principale);   letter-spacing: -2px; }
.t-carte-principale { font: 800 38px/42px var(--creme-font-principale); letter-spacing: -1.4px; }
.t-carte-secondaire { font: 800 29px/33px var(--creme-font-principale); letter-spacing: -0.9px; }
.t-chapeau      { font: 400 21px/31px var(--creme-font-principale); }
.t-corps        { font: 400 18px/28px var(--creme-font-principale); }
.t-interface    { font: 400 16px/24px var(--creme-font-principale); }
.t-meta         { font: 700 12px/18px var(--creme-font-principale); letter-spacing: 1.2px; text-transform: uppercase; }
.t-citation     { font: italic 400 53px/62px var(--creme-font-editoriale); letter-spacing: -1px; }
.t-mobile-titre { font: 800 40px/44px var(--creme-font-principale); letter-spacing: -1.5px; }

@media (max-width: 768px) {
  .t-marque   { font-size: 64px; line-height: 1.05; letter-spacing: -3px; }
  .t-rubrique { font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  .t-une      { font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  .t-section  { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .t-citation { font-size: 32px; line-height: 40px; }
	.saut-desktop { display: none; }
}

/* =========================================================
   Reset + fondations
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--creme-fond-page); }
body {
  margin: 0 auto;
  max-width: var(--creme-site-largeur);
  background: var(--creme-fond-page);
  color: var(--creme-texte-principal);
  font: 400 16px/24px var(--creme-font-principale);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.creme-container {
  max-width: var(--creme-grid-content);
  margin: 0 auto;
  padding: 0 var(--creme-grid-margin);
}
@media (max-width: 768px) {
  .creme-container { padding: 0 var(--creme-space-24); }
}

/* Rythme vertical entre sections */
.creme-section { padding: var(--creme-space-64) var(--creme-space-48); }
@media (max-width: 768px) {
  .creme-section { padding: var(--creme-space-48) var(--creme-space-24); }
}

/* Colonne de lecture longue : centrée sur la page (le texte lui-même
   reste aligné à gauche à l'intérieur de la colonne). */
.creme-reading-col {
  max-width: var(--creme-reading-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}