/* ==========================================================================
   Media Pluriel — Tokens de design v1.0 (novembre 2026)
   À charger avant toute autre feuille de style.
   Polices : <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Saira:wdth,wght@100..125,400..800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap">
   ========================================================================== */

:root {
  /* ---- Couleurs de marque (issues du logo) ---------------------------- */
  --mp-bleu: #145092;          /* CMJN 100/56/0/24 · Pantone 7686 C */
  --mp-bleu-profond: #114781;  /* CMJN 100/56/0/34 · Pantone 7687 C */
  --mp-orange: #E05E15;        /* CMJN 0/65/100/9  · Pantone 1595 C — graphisme et grand texte uniquement */
  --mp-noir: #231F20;          /* CMJN 0/0/0/100 */

  /* ---- Secondaires --------------------------------------------------- */
  --mp-bleu-nuit: #0C2D55;
  --mp-bleu-pale: #E8EEF6;
  --mp-bleu-ciel: #8DB4E2;     /* liens sur Bleu Nuit (6,41:1) */
  --mp-orange-texte: #B84A0D;  /* texte orange et fond de bouton d'action (5,21:1 avec blanc) */
  --mp-orange-fonce: #9A3E0B;  /* survol du bouton d'action */
  --mp-orange-pale: #FBEADF;

  /* ---- Neutres ------------------------------------------------------- */
  --mp-blanc: #FFFFFF;
  --mp-papier: #F5F3EF;
  --mp-beton: #E4E1DC;
  --mp-gris-trait: #8A8586;    /* bordures de champs (3,63:1, WCAG 1.4.11) */
  --mp-ardoise: #5C5758;       /* texte secondaire (7,10:1) */

  /* ---- Fonctionnelles ------------------------------------------------ */
  --mp-succes: #1F7A45;
  --mp-erreur: #B42318;
  --mp-alerte: #F2B705;        /* toujours avec texte --mp-noir */

  /* ---- Rôles (à utiliser dans les composants) ------------------------ */
  --mp-texte: var(--mp-noir);
  --mp-texte-secondaire: var(--mp-ardoise);
  --mp-texte-inverse: var(--mp-blanc);
  --mp-fond: var(--mp-blanc);
  --mp-fond-alterne: var(--mp-papier);
  --mp-fond-sombre: var(--mp-bleu-nuit);
  --mp-lien: var(--mp-bleu);
  --mp-lien-survol: var(--mp-bleu-profond);
  --mp-bordure: var(--mp-beton);
  --mp-bordure-champ: var(--mp-gris-trait);
  --mp-focus: var(--mp-orange);  /* anneau de focus 3 px, décalé de 2 px */
  --mp-action-primaire: var(--mp-bleu);
  --mp-action-primaire-survol: #0F3D70;
  --mp-action-accent: var(--mp-orange-texte);
  --mp-action-accent-survol: var(--mp-orange-fonce);

  /* ---- Typographie --------------------------------------------------- */
  --mp-police-titre: "Saira", "Arial Black", Arial, sans-serif;
  --mp-police-texte: "IBM Plex Sans", Arial, sans-serif;
  --mp-police-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --mp-largeur-display: 125%;  /* font-stretch : H1, sur-titres */
  --mp-largeur-titre: 112%;    /* font-stretch : H2–H4, boutons */

  /* Échelle (px → rem, base 16) : 12 · 14 · 16 · 20 · 24 · 32 · 40 · 60 */
  --mp-taille-12: 0.75rem;
  --mp-taille-14: 0.875rem;
  --mp-taille-16: 1rem;
  --mp-taille-20: 1.25rem;
  --mp-taille-24: 1.5rem;
  --mp-taille-32: 2rem;
  --mp-taille-40: 2.5rem;
  --mp-taille-60: 3.75rem;

  /* Rôles typographiques — bureau */
  --mp-h1-taille: var(--mp-taille-60);  --mp-h1-interligne: 4rem;     --mp-h1-graisse: 800;
  --mp-h2-taille: var(--mp-taille-40);  --mp-h2-interligne: 3rem;     --mp-h2-graisse: 700;
  --mp-h3-taille: var(--mp-taille-24);  --mp-h3-interligne: 2rem;     --mp-h3-graisse: 700;
  --mp-h4-taille: var(--mp-taille-20);  --mp-h4-interligne: 1.75rem;  --mp-h4-graisse: 700;
  --mp-intro-taille: var(--mp-taille-20); --mp-intro-interligne: 2rem;
  --mp-texte-taille: var(--mp-taille-16); --mp-texte-interligne: 1.5rem;
  --mp-legende-taille: var(--mp-taille-14); --mp-legende-interligne: 1.25rem;
  --mp-surtitre-taille: var(--mp-taille-14); --mp-surtitre-approche: 0.14em;
  --mp-bouton-taille: var(--mp-taille-16); --mp-bouton-approche: 0.04em;

  /* ---- Espacements (base 4 px) --------------------------------------- */
  --mp-espace-1: 0.25rem;  /*  4 px */
  --mp-espace-2: 0.5rem;   /*  8 px */
  --mp-espace-3: 0.75rem;  /* 12 px */
  --mp-espace-4: 1rem;     /* 16 px */
  --mp-espace-5: 1.5rem;   /* 24 px */
  --mp-espace-6: 2rem;     /* 32 px */
  --mp-espace-7: 3rem;     /* 48 px */
  --mp-espace-8: 4rem;     /* 64 px */
  --mp-espace-9: 6rem;     /* 96 px */
  --mp-espace-10: 8rem;    /* 128 px */

  /* ---- Rayons : identité carrée ------------------------------------- */
  --mp-rayon-0: 0;
  --mp-rayon-1: 2px;     /* boutons, champs */
  --mp-rayon-2: 4px;     /* vignettes, encarts */
  --mp-rayon-cercle: 50%;/* avatars uniquement */

  /* ---- Traits et ombres --------------------------------------------- */
  --mp-trait: 1px;
  --mp-trait-fort: 2px;
  --mp-trait-focus: 3px;
  --mp-ombre-0: none;                                   /* défaut : cartes sans ombre */
  --mp-ombre-1: 0 8px 24px rgba(35, 31, 32, 0.16);      /* menus déroulants, modales uniquement */

  /* ---- Diagonale de marque ------------------------------------------ */
  --mp-angle: 60deg;
  --mp-tan30: 0.577;     /* décalage horizontal = hauteur × 0,577 */

  /* ---- Grille --------------------------------------------------------- */
  --mp-conteneur: 1280px;
  --mp-colonnes: 4;
  --mp-gouttiere: 16px;
  --mp-marge: 16px;

  /* ---- Mouvement ----------------------------------------------------- */
  --mp-duree: 160ms;
  --mp-courbe: cubic-bezier(0.2, 0, 0, 1);
}

/* Points de rupture : 480 · 768 · 1024 · 1280 */
@media (min-width: 768px) {
  :root { --mp-colonnes: 8;  --mp-gouttiere: 24px; --mp-marge: 32px; }
}
@media (min-width: 1024px) {
  :root { --mp-colonnes: 12; --mp-gouttiere: 24px; --mp-marge: 48px; }
}
@media (min-width: 1280px) {
  :root { --mp-marge: 80px; }
}
@media (max-width: 767px) {
  :root {
    --mp-h1-taille: var(--mp-taille-40); --mp-h1-interligne: 2.75rem;
    --mp-h2-taille: var(--mp-taille-32); --mp-h2-interligne: 2.5rem;
    --mp-h3-taille: var(--mp-taille-20); --mp-h3-interligne: 1.75rem;
    --mp-h4-taille: var(--mp-taille-16); --mp-h4-interligne: 1.5rem;
    --mp-intro-taille: 1.125rem;         --mp-intro-interligne: 1.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --mp-duree: 0ms; }
}

/* ---- Base minimale ---------------------------------------------------- */
body {
  margin: 0;
  font-family: var(--mp-police-texte);
  font-size: var(--mp-texte-taille);
  line-height: var(--mp-texte-interligne);
  color: var(--mp-texte);
  background: var(--mp-fond);
}
h1, .mp-h1 { font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-display); font-weight: var(--mp-h1-graisse); font-size: var(--mp-h1-taille); line-height: var(--mp-h1-interligne); text-transform: uppercase; color: var(--mp-bleu); }
h2, .mp-h2 { font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: var(--mp-h2-graisse); font-size: var(--mp-h2-taille); line-height: var(--mp-h2-interligne); }
h3, .mp-h3 { font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: var(--mp-h3-graisse); font-size: var(--mp-h3-taille); line-height: var(--mp-h3-interligne); color: var(--mp-bleu); }
h4, .mp-h4 { font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: var(--mp-h4-graisse); font-size: var(--mp-h4-taille); line-height: var(--mp-h4-interligne); }
a { color: var(--mp-lien); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--mp-lien-survol); }
:focus-visible { outline: var(--mp-trait-focus) solid var(--mp-focus); outline-offset: 2px; }

.mp-surtitre { font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-display); font-weight: 700; font-size: var(--mp-surtitre-taille); line-height: 1.25rem; letter-spacing: var(--mp-surtitre-approche); text-transform: uppercase; color: var(--mp-orange-texte); }

.mp-bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--mp-espace-2); min-height: 48px; padding: 0 var(--mp-espace-5); border: var(--mp-trait-fort) solid transparent; border-radius: var(--mp-rayon-1); font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: 700; font-size: var(--mp-bouton-taille); letter-spacing: var(--mp-bouton-approche); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--mp-duree) var(--mp-courbe); }
.mp-bouton--primaire { background: var(--mp-action-primaire); color: var(--mp-blanc); }
.mp-bouton--primaire:hover { background: var(--mp-action-primaire-survol); color: var(--mp-blanc); }
.mp-bouton--accent { background: var(--mp-action-accent); color: var(--mp-blanc); }
.mp-bouton--accent:hover { background: var(--mp-action-accent-survol); color: var(--mp-blanc); }
.mp-bouton--secondaire { background: transparent; color: var(--mp-bleu); border-color: var(--mp-bleu); }
.mp-bouton--secondaire:hover { background: var(--mp-bleu-pale); }
.mp-bouton:disabled { background: var(--mp-beton); color: var(--mp-ardoise); border-color: transparent; cursor: not-allowed; }

.mp-champ { display: block; width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 var(--mp-espace-4); border: var(--mp-trait) solid var(--mp-bordure-champ); border-radius: var(--mp-rayon-1); font: inherit; color: var(--mp-texte); background: var(--mp-blanc); }
.mp-champ:focus-visible { border-color: var(--mp-bleu); }
.mp-champ[aria-invalid="true"] { border: var(--mp-trait-fort) solid var(--mp-erreur); }

/* Bande à 60° : définir --h (hauteur) sur l'élément */
.mp-bande { --h: 100%; clip-path: polygon(calc(var(--h) * var(--mp-tan30)) 0, 100% 0, calc(100% - var(--h) * var(--mp-tan30)) 100%, 0 100%); }
/* Découpe : coin supérieur droit coupé à 60° — --b = profondeur */
.mp-decoupe { --b: 48px; clip-path: polygon(0 0, calc(100% - var(--b)) 0, 100% calc(var(--b) * 1.732), 100% 100%, 0 100%); }