/* Source de vérité du design system MSG.
   Toute modification ici doit être répercutée dans wordpress/themes/msg/theme.json,
   ce que le test tokens_sync.py vérifie.

   Couleurs et typographies alignées le 14 septembre 2026 sur la charte simplifiée
   de Marie. */

:root {
  /* --- Couleurs ------------------------------------------------------ */
  --msg-green:     #025150;  /* fonds de section, texte sur clair */
  --msg-sage:      #A2C48A;  /* titres display SUR FOND VERT UNIQUEMENT */
  --msg-sage-dark: #638B46;  /* titres display sur fond clair — dérivé du sauge, absent de la charte */
  --msg-coral:     #D43A58;  /* boutons et tags */
  --msg-grey:      #EDEBEC;  /* sections alternées */
  --msg-white:     #FFFFFF;

  /* --- Typographie fluide -------------------------------------------- */
  --fs-h1:      clamp(2.25rem, 4.7vw, 5.625rem);    /* 36 → 90 px */
  --fs-h2:      clamp(1.75rem, 3.4vw, 3.4375rem);   /* 28 → 55 px */
  --fs-h3:      clamp(1.5rem, 2.7vw, 2.6875rem);    /* 24 → 43 px */
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.5625rem);  /* 18 → 25 px */
  --fs-body:    clamp(1rem, 1.15vw, 1.25rem);       /* 16 → 20 px */
  --fs-caption: 0.9375rem;                          /* 15 px */

  /* Trois rôles, comme la charte : Rammetto One pour le display, Sora en gras
     pour les titres secondaires et les boutons, Manrope pour le texte. */
  --ff-display: "Rammetto One", "Rammetto repli 1", "Rammetto repli 2", sans-serif;
  --ff-heading: "Sora", "Sora repli", system-ui, sans-serif;
  --ff-body:    "Manrope", "Manrope repli", system-ui, sans-serif;

  /* --- Mise en page --------------------------------------------------- */
  --container:     1600px;
  --gutter:        clamp(1.25rem, 4vw, 4rem);
  /* Mesuré sur la maquette à 1920 px : ~190 px entre deux sections, ~110 à 140
     entre un texte et son illustration. À 8rem, l'écart faisait 256 px. */
  --space-section: clamp(2.5rem, 6vw, 6rem);

  /* --- Composants ----------------------------------------------------- */
  --card-radius:  50px 50px 0 0;   /* décision Marie du 7 août 2026 */
  --card-ratio:   3 / 4;
  --pill-radius:  999px;
  --wave-height:  clamp(24px, 4vw, 72px);
}

/* Polices de repli à métriques ajustées — valeurs mesurées par
   prototype/fonts/build.py, à recalculer si les WOFF2 sont regénérés.

   Les largeurs sont moyennées sur le texte réellement composé, pas sur
   OS/2.xAvgCharWidth : c'est la largeur du texte affiché qui provoque le
   décalage au chargement, et elle dépend de la langue et du contenu.

   Les overrides verticaux sont divisés par le size-adjust. C'est contre-intuitif
   mais nécessaire : size-adjust remet toute la police à l'échelle, ascendantes
   et descendantes comprises. Poser directement les métriques de la police web
   les multiplierait une seconde fois — mesuré en navigateur sur Rammetto One,
   une ligne 12,6 % trop haute avant correction.

   Rammetto One est un display très large. Ses candidats de repli sont trop
   dispersés pour un size-adjust unique (Arial Black 113 %, Impact 151 %) :
   chacun reçoit sa propre famille, que la pile de --ff-display essaie dans
   l'ordre. Un seul @font-face à plusieurs local() appliquerait la même valeur
   à tous, donc une valeur fausse pour la plupart. */
@font-face {
  font-family: "Rammetto repli 1";
  src: local("Arial Black");
  size-adjust: 113%;
  ascent-override: 105%;
  descent-override: 44%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Rammetto repli 2";
  src: local("Impact");
  size-adjust: 151%;
  ascent-override: 79%;
  descent-override: 33%;
  line-gap-override: 0%;
}

/* Sora ne sert qu'en gras : le repli pointe directement vers des faces grasses
   et se déclare en 700. Sans cette déclaration, le navigateur appliquerait un
   faux gras par-dessus une face déjà grasse. Tahoma Bold, à 102 %, est trop
   loin de Segoe UI Bold et d'Arial Bold pour partager leur valeur. */
@font-face {
  font-family: "Sora repli";
  src: local("Segoe UI Bold"), local("Helvetica Neue Bold"), local("Arial Bold"), local("Roboto Bold");
  font-weight: 700;
  size-adjust: 109%;
  ascent-override: 89%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* Manrope : Segoe UI, Arial et Tahoma se regroupent entre 104 et 105 %, une
   seule valeur les couvre. Le corps de texte pèse plus lourd que les titres
   dans le CLS, c'est la compensation la plus rentable. */
@font-face {
  font-family: "Manrope repli";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 105%;
  ascent-override: 102%;
  descent-override: 29%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Rammetto One";
  src: url("../fonts/rammetto-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Variable : une plage de graisses, un seul fichier. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}