/* Polices auto-hébergées (sous-ensemble latin uniquement, couvre les
   caractères accentués français) — évite la dépendance à fonts.googleapis.com
   et la feuille de style externe bloquante que ça impliquait. */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/questrial-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/fredoka-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/fredoka-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/raleway-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/raleway-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/raleway-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/raleway-700.woff2') format('woff2');
}

:root {
  /* ---------------------------------------------------------------------
     Couleurs de marque — extraites de "Script site internet.pdf"
     (section "Couleurs du logo"). Ne pas modifier sans repasser par le PDF.
     --------------------------------------------------------------------- */
  --bleu-clair: #6b9cc9;
  --bleu-fonce: #193c80;

  /* Nuances dérivées des couleurs de marque (construites, pour hover/fonds/bordures) */
  --bleu-fonce-700: #142f66;
  --bleu-fonce-900: #0e2249;
  --bleu-clair-100: #eaf1f8;
  --bleu-clair-200: #cfe0ee;
  --bleu-clair-300: #a9c5de;

  /* ---------------------------------------------------------------------
     Neutres — non fournis par le PDF, construits pour un habillage sobre
     et chaleureux (fond légèrement chaud, texte teinté bleu nuit plutôt
     que noir pur, pour rester cohérent avec la palette de marque).
     --------------------------------------------------------------------- */
  --blanc: #ffffff;
  --fond: #faf9f6;
  --fond-alt: #f1efe9;
  --encre: #16212e;
  --encre-douce: #475463;
  --bordure: #dcd8cf;
  --erreur: #a3312a;

  /* Couleurs sémantiques */
  --couleur-primaire: var(--bleu-fonce);
  --couleur-primaire-hover: var(--bleu-fonce-700);
  --couleur-accent: var(--bleu-clair);
  --couleur-lien: var(--bleu-fonce);
  --couleur-texte: var(--encre);
  --couleur-texte-doux: var(--encre-douce);
  --couleur-fond: var(--fond);
  --couleur-fond-alt: var(--fond-alt);

  /* Attention contraste : --bleu-clair (#6b9cc9) sur fond blanc offre un
     contraste ~2,6:1, insuffisant pour du texte (WCAG AA exige 4,5:1).
     Réserver --bleu-clair aux fonds, bordures, illustrations et éléments
     décoratifs — jamais au texte courant. Pour du texte sur fond coloré,
     utiliser --bleu-fonce ou --blanc sur --bleu-fonce. */

  /* Typographie — Questrial pour les titres reprend la police du logo
     (rendu géométrique et chaleureux) ; Raleway reste en texte courant
     pour sa lisibilité sur les paragraphes longs. Questrial n'existe qu'en
     graisse régulière : ne pas lui appliquer de font-weight supérieur à 400. */
  --police-titres: 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Police d'accroche (slogan, mots-clés « Nos objectifs ») : plus ronde et
     impactante que Questrial, réservée aux quelques mots qui doivent
     vraiment sauter aux yeux — jamais pour du texte courant. */
  --police-accroche: 'Fredoka', 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --police-texte: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --taille-texte: 1.125rem;
  --interligne-texte: 1.6;
  --interligne-titres: 1.2;

  /* Échelle d'espacement */
  --espace-1: 0.5rem;
  --espace-2: 1rem;
  --espace-3: 1.5rem;
  --espace-4: 2rem;
  --espace-5: 3rem;
  --espace-6: 4.5rem;
  --espace-7: 6rem;

  /* Forme — arrondis doux et volontaires (identité plus ludique), sans
     tomber dans les coins ultra-ronds répétitifs type "carte SaaS" */
  --rayon-sm: 8px;
  --rayon-md: 16px;

  /* Ombres très subtiles, pas d'effet flottant excessif */
  --ombre-douce: 0 1px 3px rgba(22, 33, 46, 0.08), 0 1px 2px rgba(22, 33, 46, 0.06);

  /* Grille */
  --largeur-contenu: 74rem;
  --largeur-texte-long: 42rem;
}