/* =====================================================================
   LES POLICES DU CERCLE — HÉBERGÉES SUR NOTRE PROPRE SITE
   ---------------------------------------------------------------------
   Pourquoi ce fichier existe.

   Jusqu'ici, chaque page demandait ses polices aux serveurs de Google.
   Concrètement : le navigateur de chaque visiteur se connectait à
   fonts.googleapis.com, puis à fonts.gstatic.com, et leur communiquait
   au passage son adresse IP — sans que le visiteur l'ait voulu ni même
   su. Plusieurs sites français ont été condamnés pour exactement cela.

   Désormais, les fichiers sont chez nous, dans le dossier « polices/ ».
   Le navigateur ne contacte plus personne d'autre que notre propre site.
   C'est le dernier point de conformité RGPD qui manquait.

   ---------------------------------------------------------------------
   Comment ça marche, pour qui n'a jamais vu de CSS.

   Chaque bloc « @font-face » ci-dessous dit au navigateur :
     « Si tu as besoin de Montserrat en graisse 500, va chercher
       ce fichier-là, à cet endroit-là. »

   Trois lignes reviennent dans chaque bloc :

   - font-family : le nom sous lequel la police sera appelée ailleurs
     dans la feuille de style. Il doit être écrit exactement pareil
     partout, sinon le navigateur ne fait pas le lien.

   - font-weight : la graisse, c'est-à-dire l'épaisseur du trait.
     400 est le texte normal, 700 le gras. Les valeurs intermédiaires
     (300, 500, 600) sont des nuances. Si l'on demande une graisse qui
     n'est pas déclarée ici, le navigateur l'invente en épaississant
     artificiellement la plus proche — et le résultat est laid. C'est
     pourquoi on déclare exactement les cinq graisses que le site
     utilise, ni plus (fichiers inutiles à charger) ni moins.

   - font-display: swap : pendant la demi-seconde où la police se
     télécharge, le texte s'affiche dans une police de secours plutôt
     que de rester invisible. Le visiteur peut lire tout de suite, et
     le texte change d'apparence une fois la police arrivée. C'est
     préférable à une page blanche.

   ---------------------------------------------------------------------
   Le jour où vous voudrez une graisse supplémentaire : récupérez le
   fichier .woff2 correspondant sur gwfh.mranftl.com, déposez-le dans
   le dossier « polices/ », et recopiez un bloc ci-dessous en changeant
   le nom du fichier et le chiffre de font-weight. Rien d'autre.
   ===================================================================== */


/* ---------------------------------------------------------------------
   PLAYFAIR DISPLAY — la police des titres.
   Un caractère à empattements, très contrasté entre pleins et déliés.
   C'est elle qui donne au Cercle son air de papier imprimé.
   --------------------------------------------------------------------- */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/playfair-display-400.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("polices/playfair-display-500.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("polices/playfair-display-600.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("polices/playfair-display-700.woff2") format("woff2");
}

/* L'italique est un dessin à part entière, pas une simple inclinaison.
   Sans ce fichier, le navigateur pencherait les lettres droites de
   force — ce qu'un œil exercé repère immédiatement. */
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("polices/playfair-display-400-italique.woff2") format("woff2");
}


/* ---------------------------------------------------------------------
   MONTSERRAT — la police du texte courant.
   Un caractère sans empattements, ouvert et régulier, lisible en petit
   corps. C'est elle qui porte l'essentiel de la lecture.
   --------------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("polices/montserrat-300.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/montserrat-400.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("polices/montserrat-500.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("polices/montserrat-600.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("polices/montserrat-400-italique.woff2") format("woff2");
}