/* ==========================================================
   Mosalab — feuille de style de la charte graphique
   Variables, polices auto-hébergées et styles de base.
   ========================================================== */

/* ---------- Polices (licence SIL Open Font, fichiers dans /fonts) ---------- */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/outfit-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

:root {
  /* ---------- Couleurs de marque ---------- */
  --mosa-anthracite: #3A3F47;
  --mosa-framboise: #C2185B;
  --mosa-blanc: #FFFFFF;

  /* Nuancier framboise */
  --mosa-framboise-50:  #FCE8F0;
  --mosa-framboise-100: #F8C9DC;
  --mosa-framboise-300: #E2669A;
  --mosa-framboise-500: #C2185B;
  --mosa-framboise-700: #8F1043;
  --mosa-framboise-900: #5C0A2B;

  /* Nuancier gris */
  --mosa-gris-50:  #F6F7F8;
  --mosa-gris-100: #ECEEF0;
  --mosa-gris-200: #D9DBDF;
  --mosa-gris-400: #9AA0A8;
  --mosa-gris-600: #555B65;
  --mosa-gris-800: #3A3F47;
  --mosa-gris-900: #23272D;

  /* Couleurs fonctionnelles (états, jamais pour la marque) */
  --mosa-succes:    #1E7A4E;
  --mosa-attention: #A15C00;
  --mosa-erreur:    #B42318;
  --mosa-info:      #2457A6;

  /* ---------- Rôles (thème clair) ---------- */
  --mosa-fond:                #FFFFFF;
  --mosa-surface:             #F6F7F8;
  --mosa-bordure:             #D9DBDF;
  --mosa-bordure-forte:       #858B94;
  --mosa-texte:               #3A3F47;
  --mosa-texte-secondaire:    #555B65;
  --mosa-accent:              #C2185B;
  --mosa-accent-survol:       #8F1043;
  --mosa-accent-doux:         #FCE8F0;
  --mosa-sur-accent:          #FFFFFF;
  --mosa-lien:                #C2185B;

  /* ---------- Typographie ---------- */
  --mosa-police-titre: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mosa-police-texte: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --mosa-taille-h1: 2.5rem;      /* 40 px */
  --mosa-taille-h2: 1.875rem;    /* 30 px */
  --mosa-taille-h3: 1.375rem;    /* 22 px */
  --mosa-taille-texte: 1rem;     /* 16 px */
  --mosa-taille-petit: 0.875rem; /* 14 px */
  --mosa-taille-legende: 0.75rem;/* 12 px */

  --mosa-interligne-titre: 1.2;
  --mosa-interligne-texte: 1.6;

  /* ---------- Espacements (base 4 px) ---------- */
  --mosa-espace-1: 4px;
  --mosa-espace-2: 8px;
  --mosa-espace-3: 12px;
  --mosa-espace-4: 16px;
  --mosa-espace-5: 24px;
  --mosa-espace-6: 32px;
  --mosa-espace-7: 48px;
  --mosa-espace-8: 64px;

  /* ---------- Rayons et ombres ---------- */
  --mosa-rayon-s: 6px;
  --mosa-rayon-m: 10px;
  --mosa-rayon-l: 16px;
  --mosa-rayon-icone: 22%;
  --mosa-ombre: 0 1px 2px rgba(35, 39, 45, .08), 0 4px 12px rgba(35, 39, 45, .06);

  --mosa-largeur-contenu: 72rem;
}

/* ---------- Thème sombre (automatique, ou forcé par data-theme="dark") ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mosa-fond:             #1E2127;
    --mosa-surface:          #2A2E35;
    --mosa-bordure:          #3E434C;
    --mosa-bordure-forte:    #737983;
    --mosa-texte:            #F2F3F5;
    --mosa-texte-secondaire: #B0B6BF;
    --mosa-accent:           #E2669A;
    --mosa-accent-survol:    #F06EA5;
    --mosa-accent-doux:      #3A2430;
    --mosa-sur-accent:       #1E2127;
    --mosa-lien:             #F06EA5;
  }
}
:root[data-theme="dark"] {
  --mosa-fond:             #1E2127;
  --mosa-surface:          #2A2E35;
  --mosa-bordure:          #3E434C;
  --mosa-bordure-forte:    #737983;
  --mosa-texte:            #F2F3F5;
  --mosa-texte-secondaire: #B0B6BF;
  --mosa-accent:           #E2669A;
  --mosa-accent-survol:    #F06EA5;
  --mosa-accent-doux:      #3A2430;
  --mosa-sur-accent:       #1E2127;
  --mosa-lien:             #F06EA5;
}

/* ---------- Styles de base ---------- */
body {
  margin: 0;
  font-family: var(--mosa-police-texte);
  font-size: var(--mosa-taille-texte);
  line-height: var(--mosa-interligne-texte);
  color: var(--mosa-texte);
  background: var(--mosa-fond);
}

h1, h2, h3 {
  font-family: var(--mosa-police-titre);
  font-weight: 600;
  line-height: var(--mosa-interligne-titre);
  margin: 0 0 var(--mosa-espace-4);
}
h1 { font-size: var(--mosa-taille-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--mosa-taille-h2); }
h3 { font-size: var(--mosa-taille-h3); }

a { color: var(--mosa-lien); text-underline-offset: 3px; }
a:hover { color: var(--mosa-accent-survol); }

:focus-visible { outline: 3px solid var(--mosa-accent); outline-offset: 2px; }

/* ---------- Composants ---------- */
.mosa-conteneur { max-width: var(--mosa-largeur-contenu); margin: 0 auto; padding: 0 var(--mosa-espace-4); }

.mosa-entete {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--mosa-espace-4);
  padding: var(--mosa-espace-4) 0;
  border-bottom: 1px solid var(--mosa-bordure);
}
.mosa-entete img { height: 40px; width: auto; display: block; }

.mosa-bouton {
  display: inline-flex; align-items: center; gap: var(--mosa-espace-2);
  min-height: 44px; padding: 0 var(--mosa-espace-5);
  font: 600 var(--mosa-taille-texte)/1 var(--mosa-police-texte);
  color: var(--mosa-sur-accent); background: var(--mosa-accent);
  border: 2px solid var(--mosa-accent); border-radius: var(--mosa-rayon-m);
  text-decoration: none; cursor: pointer;
}
.mosa-bouton:hover { background: var(--mosa-accent-survol); border-color: var(--mosa-accent-survol); color: var(--mosa-sur-accent); }
.mosa-bouton--secondaire { color: var(--mosa-texte); background: transparent; border-color: var(--mosa-bordure-forte); }
.mosa-bouton--secondaire:hover { color: var(--mosa-texte); background: var(--mosa-surface); border-color: var(--mosa-texte-secondaire); }

.mosa-carte {
  background: var(--mosa-fond);
  border: 1px solid var(--mosa-bordure);
  border-radius: var(--mosa-rayon-l);
  padding: var(--mosa-espace-5);
  box-shadow: var(--mosa-ombre);
}

.mosa-etiquette {
  display: inline-block; padding: 2px var(--mosa-espace-2);
  font-size: var(--mosa-taille-petit); font-weight: 600;
  color: var(--mosa-accent-survol); background: var(--mosa-accent-doux);
  border-radius: var(--mosa-rayon-s);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mosa-etiquette { color: var(--mosa-lien); } }
:root[data-theme="dark"] .mosa-etiquette { color: var(--mosa-lien); }

.mosa-pied { padding: var(--mosa-espace-6) 0; color: var(--mosa-texte-secondaire); font-size: var(--mosa-taille-petit); border-top: 1px solid var(--mosa-bordure); }