/* ==========================================================================
   Philosophie Magazine — Design tokens
   Valeurs extraites du fichier Figma « Philomag », branche 3eyZTTodX4u6sRzspqsyRb.
   Frames de référence : « Menu desktop » (2013:3978), « Menu mobile »
   (2013:5338), « Hp » desktop (172:590) et mobile (206:1780), et la planche
   « Typography » (2447:8127).

   Ce fichier est la seule source de vérité des valeurs. Les composants ne
   doivent jamais écrire un hex, une taille de police ou un espacement en dur.
   ========================================================================== */

:root {
  /* ---------- Couleurs ----------------------------------------------------
     #08001E est l'encre du site : texte ET totalité des filets/bordures.
     C'est de loin la valeur la plus fréquente de la maquette (247 usages). */
  --pm-color-ink: #08001e;
  --pm-color-blue: #1510de;        /* bleu de marque : logo, surtitres */
  --pm-color-yellow: #edc65a;      /* fond du bouton « S'abonner » */
  --pm-color-navy: #170154;        /* boutons pleins secondaires */
  --pm-color-surface: #ffffff;       /* bandeau, panneau, cartes latérales */
  --pm-color-surface-muted: #f7f5f3; /* fond de page, et fond de la carte magazine */

  /* Le fond de PAGE est #F7F5F3, pas blanc : c'est le fill de la frame racine,
     identique sur les quatre maquettes (menu et home, desktop et mobile). Le
     blanc est au contraire posé explicitement sur le bandeau, le panneau de
     navigation et, en mobile, les deux blocs latéraux. */
  --pm-color-page: var(--pm-color-surface-muted);
  --pm-color-cream: #efefd9;
  --pm-color-on-dark: #ffffff;

  /* Survol. Le système est homogène dans toute la maquette : le bleu de marque
     devient la couleur du texte, de l'icône et du contour. Seul le fond change
     selon le type de bouton — d'où ce jaune pâle, propre au bouton « Abo ».
     Source : jeux de variantes Figma 2068:4223 et 2068:4242. */
  /* Sable — le jaune clair. Deux rôles distincts dans la maquette : le fond
     d'une vignette de newsletter, et le fond du bouton jaune au survol. Une
     seule teinte, donc, mais nommée par ce qu'elle est plutôt que par l'un de
     ses deux emplois. */
  --pm-color-sand: #f4e9cd;
  --pm-color-yellow-hover: var(--pm-color-sand);
  --pm-color-hover: var(--pm-color-blue);

  /* Voile de l'overlay desktop : #000000 à 30 % (Rectangle 1 dans Figma) */
  --pm-color-scrim: rgb(0 0 0 / 0.3);

  /* ---------- Typographie ------------------------------------------------
     Quatre familles, toutes auto-hébergées dans /fonts (voir les @font-face de
     base.css). Les piles de repli servent si un woff2 vient à manquer. */
  --pm-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pm-font-serif: "Libertinus Serif", "Linux Libertine", Georgia, "Times New Roman", serif;
  --pm-font-display: "Bitter", Georgia, "Times New Roman", serif;
  --pm-font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Échelle typographique --------------------------------------
     Reprise à l'identique des 23 styles de texte nommés du fichier Figma
     (frame « Typography » 2447:8127). Les noms des tokens suivent ceux du
     système, et non un usage supposé : c'est ce qui permet à la designer et
     au template Twig de désigner la même chose.

     Les interlignes sont en ratio sans unité plutôt qu'en px : les valeurs
     Figma sont des pourcentages ronds (110, 120, 130, 135, 145 %) et le ratio
     les reproduit exactement, tout en restant juste si la taille change.
     Les lettrages sont convertis en em pour la même raison — le système n'en
     compte que quatre : -0.02em, -0.01em, +0.02em et +0.2em.

     Six styles ont une variante mobile (préfixée 📱 dans Figma) ; elle est
     définie ici comme valeur de base, et surchargée en desktop plus bas.
     ---------------------------------------------------------------------- */

  /* Menu — rubriques du bandeau */
  --pm-text-menu-family: var(--pm-font-serif);
  --pm-text-menu-size: 1.15rem; /* 18.4px */
  --pm-text-menu-height: 1.1;
  --pm-text-menu-spacing: 0;
  --pm-text-menu-weight: 400;

  /* Interface (Boutons) — libellés de boutons, de liens, d'entrées de menu.
     C'est le style le plus utilisé du projet. */
  --pm-text-interface-family: var(--pm-font-sans);
  --pm-text-interface-size: 1.0625rem; /* 17px */
  --pm-text-interface-height: 1.1;
  --pm-text-interface-spacing: -0.02em;
  --pm-text-interface-weight: 500;

  /* Titre marketing — 📱38px / desktop 60px, en capitales */
  --pm-text-marketing-family: var(--pm-font-display);
  --pm-text-marketing-size: 2.375rem; /* 38px */
  --pm-text-marketing-height: 1.1;
  --pm-text-marketing-spacing: 0;
  --pm-text-marketing-weight: 700;

  /* Surtitre — 📱22px / desktop 28px, en capitales */
  --pm-text-surtitre-family: var(--pm-font-sans);
  --pm-text-surtitre-size: 1.375rem; /* 22px */
  --pm-text-surtitre-height: 1.1;
  --pm-text-surtitre-spacing: 0.02em;
  --pm-text-surtitre-weight: 400;

  /* H1 — 📱26px / desktop 40px */
  --pm-text-h1-family: var(--pm-font-display);
  --pm-text-h1-size: 1.625rem; /* 26px */
  --pm-text-h1-height: 1.2;
  --pm-text-h1-spacing: -0.01em;
  --pm-text-h1-weight: 700;

  /* « Gros titre article » — le titre de la variante majeure de l'article, et
     le seul endroit du projet à l'employer. La maquette ne lui donne pas de
     variante 📱 : en mobile ce titre retombe sur « 📱Titre », soit exactement
     le H1 mobile. Seul le desktop diffère, d'où un token qui ne surcharge que
     la taille au-delà de 1024px. */
  --pm-text-h1-xl-family: var(--pm-font-display);
  --pm-text-h1-xl-size: 1.625rem; /* 26px, comme 📱Titre */
  --pm-text-h1-xl-height: 1.2;
  --pm-text-h1-xl-spacing: -0.01em;
  --pm-text-h1-xl-weight: 700;

  /* H2 */
  --pm-text-h2-family: var(--pm-font-display);
  --pm-text-h2-size: 1.25rem; /* 20px */
  --pm-text-h2-height: 1.2;
  --pm-text-h2-spacing: -0.01em;
  --pm-text-h2-weight: 700;
  
  --pm-text-h2-xl-family: var(--pm-font-display);
  --pm-text-h2-xl-size: 1.25rem; /* 20px */
  --pm-text-h2-xl-height: 1.2;
  --pm-text-h2-xl-spacing: -0.01em;
  --pm-text-h2-xl-weight: 700;

  /* Intertitre (H3) */
  --pm-text-h3-family: var(--pm-font-sans);
  --pm-text-h3-size: 2rem; /* 32px */
  --pm-text-h3-height: 1.1;
  --pm-text-h3-spacing: -0.01em;
  --pm-text-h3-weight: 700;

  /* Sous-intertitre (H4) — titre de section du panneau (« Suivez-nous ») */
  --pm-text-h4-family: var(--pm-font-sans);
  --pm-text-h4-size: 1.5rem; /* 24px */
  --pm-text-h4-height: 1.1;
  --pm-text-h4-spacing: -0.01em;
  --pm-text-h4-weight: 700;

  /* Titre encadré (H5) */
  --pm-text-h5-family: var(--pm-font-sans);
  --pm-text-h5-size: 1.25rem; /* 20px */
  --pm-text-h5-height: 1.1;
  --pm-text-h5-spacing: -0.01em;
  --pm-text-h5-weight: 700;

  /* Tag-Surtitre (H6) — capitales très espacées */
  --pm-text-h6-family: var(--pm-font-sans);
  --pm-text-h6-size: 0.625rem; /* 10px */
  --pm-text-h6-height: 1.1;
  --pm-text-h6-spacing: 0.2em;
  --pm-text-h6-weight: 700;

  /* Chapo — 📱19px / desktop 22.4px */
  --pm-text-chapo-family: var(--pm-font-sans);
  --pm-text-chapo-size: 1.1875rem; /* 19px */
  --pm-text-chapo-height: 1.3;
  --pm-text-chapo-spacing: 0;
  --pm-text-chapo-weight: 500;

  /* Citation exergue — 📱24px / desktop 32px */
  --pm-text-exergue-family: var(--pm-font-sans);
  --pm-text-exergue-size: 1.5rem; /* 24px */
  --pm-text-exergue-height: 1.2;
  --pm-text-exergue-spacing: 0;
  --pm-text-exergue-weight: 400;

  /* Texte_Large (citation) */
  --pm-text-large-family: var(--pm-font-serif);
  --pm-text-large-size: 1.5rem; /* 24px */
  --pm-text-large-height: 1.35;
  --pm-text-large-spacing: 0;
  --pm-text-large-weight: 400;

  /* Texte édito — corps de texte serif. 22px À TOUTES LES LARGEURS.

     Ce token descendait à 20px en mobile, sur l'idée que « 📱Texte serif »
     était sa variante mobile. C'est faux : le fichier ne définit aucun
     📱Texte édito, et « Texte édito » apparaît en 22px dans les cadres 390
     comme dans les 1728 — 14 fois et 30 fois. « 📱Texte serif » est un style
     distinct, déclaré ci-dessous, qui coexiste avec lui sur les mêmes écrans.
     Fusionner les deux rendait les citations de bac-philo à 20px en mobile. */
  --pm-text-edito-family: var(--pm-font-serif);
  --pm-text-edito-size: 1.375rem; /* 22px */
  --pm-text-edito-height: 1.45;
  --pm-text-edito-spacing: 0;
  --pm-text-edito-weight: 400;

  /* 📱Texte serif — 20px, mobile uniquement. Ni une variante de « Texte édito »
     (qui reste à 22), ni une de « Texte_Large » (qui reste à 24) : un style à
     part entière, que la maquette emploie pour le corps de l'article mobile et
     pour le chapô de bac-philo mobile. Aucun équivalent desktop : les éléments
     qui l'utilisent basculent vers un autre style au-delà de 1024px, ce qui se
     décide au cas par cas dans le composant, pas ici. */
  --pm-text-serif-s-family: var(--pm-font-serif);
  --pm-text-serif-s-size: 1.25rem; /* 20px */
  --pm-text-serif-s-height: 1.45;
  --pm-text-serif-s-spacing: 0;
  --pm-text-serif-s-weight: 400;

  /* Texte hors édito — corps de texte sans-serif */
  --pm-text-courant-family: var(--pm-font-sans);
  --pm-text-courant-size: 1.0625rem; /* 17px */
  --pm-text-courant-height: 1.3;
  --pm-text-courant-spacing: 0;
  --pm-text-courant-weight: 400;

  /* Note-large */
  --pm-text-note-large-family: var(--pm-font-mono);
  --pm-text-note-large-size: 0.875rem; /* 14px */
  --pm-text-note-large-height: 1.2;
  --pm-text-note-large-spacing: 0;
  --pm-text-note-large-weight: 400;

  /* Note — date de parution de la carte magazine */
  --pm-text-note-family: var(--pm-font-mono);
  --pm-text-note-size: 0.75rem; /* 12px */
  --pm-text-note-height: 1.1;
  --pm-text-note-spacing: 0;
  --pm-text-note-weight: 400;

  /* ---------- Espacements ------------------------------------------------
     Toutes les valeurs d'auto-layout de la maquette sont des multiples de 2,
     et l'immense majorité des multiples de 6 : 6 / 10 / 12 / 20 / 24 / 48. */
  --pm-space-3xs: 0.375rem;  /*  6px — icône ↔ libellé (rubriques, réseaux) */
  --pm-space-2xs: 0.625rem;  /* 10px — icône ↔ libellé (boutons) */
  --pm-space-xs: 0.75rem;    /* 12px — icône ↔ libellé (entrées de menu), gap boutons */
  --pm-space-s: 1.125rem;    /* 18px — padding vertical des rubriques desktop */
  --pm-space-m: 1.25rem;     /* 20px — padding du panneau menu et de la carte */
  --pm-space-l: 1.5rem;      /* 24px — gap entre blocs du menu, entre items du header */
  --pm-space-xl: 3rem;       /* 48px — gouttière horizontale du header desktop */
  --pm-space-xxl: 4rem;      /* 64px — marge supplémentaire pour grands écrans */
  --pm-space-3xl: 6rem;      /* 96px — marge supplémentaire pour très grands écrans */

  /* ---------- Rayons ----------------------------------------------------- */
  --pm-radius-s: 2px;
  --pm-radius-m: 4px;        /* boutons rectangulaires */
  --pm-radius-pill: 60px;    /* zone cliquable « Menu » du header desktop */

  /* ---------- Bordures ---------------------------------------------------
     Tous les contours de la maquette sont en strokeAlign: INSIDE — Figma les
     dessine À L'INTÉRIEUR de la boîte, sans agrandir l'élément. Une `border`
     CSS, elle, s'ajoute à la hauteur : sur les 9 liens de 48px du menu, cela
     produisait 9px de dérive, et 4px sur chaque paire de boutons.

     D'où ces deux ombres internes, à utiliser partout où la maquette montre
     un contour. Elles ne participent pas au flux, donc la hauteur reste
     exactement celle de Figma. `border` reste réservé aux cas où le contour
     doit réellement occuper de la place. */
  --pm-border-width: 1px;
  --pm-border: var(--pm-border-width) solid var(--pm-color-ink);
  --pm-stroke: inset 0 0 0 var(--pm-border-width) var(--pm-color-ink);
  --pm-stroke-bottom: inset 0 calc(var(--pm-border-width) * -1) 0 var(--pm-color-ink);

  /* Contour bleu du survol, commun aux trois types de boutons. */
  --pm-stroke-hover: inset 0 0 0 var(--pm-border-width) var(--pm-color-hover);

  /* Ombre dure du survol des boutons : un DROP_SHADOW Figma décalé de 3px en x
     et en y, sans flou (radius 0) ni transparence. Ce n'est pas une bordure
     asymétrique : c'est cette ombre qui épaissit visuellement les côtés droit
     et bas. Elle ne compte pas dans le débordement défilable, donc elle ne peut
     pas provoquer de barre de défilement. */
  --pm-shadow-offset: 3px;
  --pm-shadow-hover: var(--pm-shadow-offset) var(--pm-shadow-offset) 0
    var(--pm-color-hover);

  /* Filet bas de 4px qui souligne une rubrique du bandeau au survol
     (variante « Entrée menu / survol », côtés 0/0/4/0). */
  --pm-indicator-width: 4px;
  --pm-indicator-hover: inset 0 calc(var(--pm-indicator-width) * -1) 0 var(--pm-color-hover);

  /* ---------- Gabarits --------------------------------------------------- */
  --pm-icon-size: 24px;              /* toutes les icônes de la maquette */
  --pm-control-height: 48px;         /* boutons du panneau menu */
  --pm-row-height: 48px;             /* entrées de liste du panneau menu */
  /* Gouttière horizontale de la page : 18px en mobile, 48px en desktop
     (surchargée plus bas). Les deux valeurs viennent de la maquette. */
  --pm-gutter: 1.125rem;

  --pm-header-height-mobile: 60px;
  --pm-header-height-desktop: 160px;
  --pm-menu-width-desktop: 396px;    /* largeur du panneau en desktop */
  --pm-content-max: 1632px;          /* 1728 - 2 × 48 de gouttière */

  /* ---------- Couches --------------------------------------------------- */
  --pm-z-scrim: 800;
  --pm-z-menu: 900;
  --pm-z-header: 1000;               /* le header reste au-dessus du voile */

  /* ---------- Mouvement -------------------------------------------------- */
  --pm-duration: 200ms;
  --pm-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Point de rupture -----------------------------------------------
   Le projet n'en a qu'un : 1024px. Aucune frame tablette n'existant dans la
   maquette, la mise en page mobile s'étire jusque-là.

   Il ne peut pas vivre dans une custom property : les media queries
   n'acceptent pas var(). Il est donc écrit en dur dans chaque composant,
   toujours sous la forme `@media (min-width: 1024px)`. Un seul motif à
   rechercher/remplacer si la valeur doit changer.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   Surcharges desktop de l'échelle typographique

   Six styles seulement changent de taille au-delà de 1024px : ce sont ceux
   que Figma décline en variante mobile (préfixe 📱). Les onze autres sont
   identiques aux deux breakpoints et n'apparaissent donc pas ici.

   Attention : Figma ne dit pas à quelle largeur la variante 📱 doit céder la
   place. Le projet n'ayant qu'un seul point de rupture, elle bascule à 1024px
   comme tout le reste. À arbitrer avec la designer si une frame tablette
   apparaît.
   ========================================================================== */

@media (min-width: 1024px) {
  :root {
    --pm-gutter: 3rem; /* 48px */

    /* Titre marketing — seul style dont l'interligne change aussi (110 → 106 %) */
    --pm-text-marketing-size: 3.75rem; /* 60px */
    --pm-text-marketing-height: 1.06;

    /* Surtitre */
    --pm-text-surtitre-size: 1.75rem; /* 28px */

    /* H1 */
    --pm-text-h1-size: 2.5rem; /* 40px */

    /* Gros titre article */
    --pm-text-h1-xl-size: 4rem; /* 64px */

    /* H2 XL */
    --pm-text-h2-xl-size: 1.8rem;

    /* Chapo */
    --pm-text-chapo-size: 1.4rem; /* 22.4px */

    /* Citation exergue */
    --pm-text-exergue-size: 2rem; /* 32px */
  }
}