/* ============================================================================
   FONTAINE FORMATIONS - LES JETONS DE DESIGN
   ============================================================================

   Cette feuille ne contient AUCUNE regle visuelle. Que des variables.
   Une meme valeur ne s'ecrit qu'ici, et jamais deux fois : deux ecritures
   d'une meme regle donnent une valeur que personne ne connait, puisqu'elle
   depend de l'ordre de chargement.

   ---------------------------------------------------------------------------
   LA PALETTE EST RELEVEE SUR LA MARQUE, PAS CHOISIE
   ---------------------------------------------------------------------------
   Le client a fourni son logo et ses cartes de visite. La palette du site en
   est donc TIREE, pixel par pixel, et non deduite d'une norme ou d'un gout.

   Mesures faites sur la carte, par mediane du groupe dominant de chaque zone,
   et non par echantillonnage de quelques points : un logo est fait d'aplats et
   de degrades, et un point pris au hasard tombe une fois sur deux dans une
   transition.

     #1b3a69   bleu marine du lettrage « Formations » et de la feuille bleue
     #c43839   rouge du lettrage « Fontaine » et de l'adresse web
     #d13b2f   rouge de la flamme
     #0b4c08   vert de la croix de secours
     #fd9f1e   orange et ambre de la flamme

   ---------------------------------------------------------------------------
   CE QUI A ETE RABATTU, ET POURQUOI
   ---------------------------------------------------------------------------
   Une couleur de marque est faite pour du papier et pour de grands aplats.
   Portee en petit texte sur le sol du site, elle doit encore tenir 4,5:1.

   Le rouge exact du lettrage rend 4,79:1 sur le sol. Il PASSE, et de justesse :
   six pour cent de marge. Une valeur qui tient tout juste ne tient plus des
   qu'on change un fond d'un cran. Le rouge fonctionnel est donc rabattu a
   #b8302f, qui rend 5,44:1 pour une teinte que l'oeil ne distingue pas de
   l'originale.

   LE ROUGE EXACT RESTE, LUI, SUR L'ENSEIGNE : c'est le lettrage de la carte,
   il est compose en grand, et son seuil est celui du grand texte. Deux valeurs
   donc, chacune a sa place, et l'ecart est documente ici pour qu'on ne le
   prenne pas un jour pour une erreur.

   Le vert de la croix, mesure a #0b4c08, est presque noir a l'ecran en petit
   corps. Il est eclairci d'un cran, a #0f5c0c, ce qui reste tres exactement sa
   teinte.

   L'orange de la flamme rend 1,87:1 sur le sol : il ne peut PAS porter de
   texte sur fond clair. Il ne sert donc que de signe, sur l'anthracite, ou il
   rend 8,63:1.

   ---------------------------------------------------------------------------
   LE SITE NE PARLE QU'UNE SEULE FORME : L'ANGLE DROIT
   ---------------------------------------------------------------------------
   Pas de coin arrondi, nulle part. Un panneau de securite, une plaque
   d'extincteur, une porte coupe-feu, un plan d'evacuation : tout est
   orthogonal, et c'est la seule geometrie que ce metier connaisse.

   Ce qui distingue une COMMANDE d'un CONTENANT n'est donc pas sa forme, c'est
   sa MATIERE et son MOUVEMENT : un contenant est pose et immobile, une commande
   porte un fond plein, un filet de deux pixels, et la hachure s'y deroule au
   survol comme au focus clavier.

   ============================================================================ */

:root {

	/* ---------- Sol et encres ---------- */

	/*
	 * LE SOL A CHANGE DE TEMPERATURE, ET IL EST DERIVE, PAS CHOISI.
	 *
	 * Il valait #f2f4f5, un blanc acier legerement FROID. C'etait juste tant que
	 * la couleur de maison etait l'anthracite ; ca ne l'est plus depuis que le
	 * bleu marine et la flamme du logo tiennent le site. Un fond froid sous une
	 * marque chaude fait paraitre la marque sale.
	 *
	 * Le nouveau sol est l'orange de la flamme (#fd9f1e) verse a tres faible dose
	 * dans un blanc casse. Ce n'est pas un beige de catalogue pris au hasard :
	 * c'est le quatrieme ton du logo, ramene a l'etat de papier.
	 *
	 * MESURE, comme toujours, et non estime :
	 *   encre #14181b   -> 16,25:1     encre douce #4a5359 ->  7,21:1
	 *   encre tenue     ->  5,01:1     ocre #8a5200        ->  5,84:1
	 *   incendie #b8302f->  5,48:1     marine #1b3a69      -> 10,34:1
	 * Toutes les paires du site gagnent un dixieme de point au passage.
	 */
	--ff-sol:          #f8f5ef;   /* papier chaud, teinte par la flamme */
	--ff-sol-releve:   #ffffff;   /* ce qui se pose sur le sol       */
	--ff-sol-creux:    #ede8df;   /* ce qui s'y enfonce              */
	--ff-sol-profond:  #e6dfd3;   /* le creux du creux, pour les separations */
	--ff-encre:        #14181b;   /* anthracite                      */
	--ff-encre-douce:  #4a5359;   /* 7,00:1 sur le sol               */

	/*
	 * L'ENCRE TENUE EST CALCULEE, PAS CHOISIE.
	 *
	 * Elle valait #6e787e, qui a l'air d'un gris moyen parfaitement ordinaire.
	 * Mesure sur le sol du site : 4,09:1, sous le seuil de 4,5 exige pour un
	 * texte courant. Elle porte pourtant les mentions « (facultatif) » des
	 * champs, les dates des cartes, les durees, les legendes de figure et les
	 * libelles des reperes de formation : une dizaine d'endroits par page.
	 *
	 * Le defaut ne se voit pas a l'oeil, et aucun controle sur le document ne le
	 * signale : le HTML est correct et la couleur est declaree. Il faut lire la
	 * couleur CALCULEE et la comparer au fond REEL.
	 *
	 * #616b71 rend 4,94:1 sur le sol et 5,45:1 sur le blanc. La marge est
	 * volontaire : une valeur qui tient tout juste ne tient plus des qu'on
	 * change un fond d'un cran.
	 */
	--ff-encre-tenue:  #616b71;

	--ff-encre-claire: #ffffff;   /* l'encre posee sur un le         */

	/* ---------- Filets ---------- */

	--ff-filet:           #ded6c9;
	--ff-filet-appuye:    #14181b;
	--ff-filet-interface: #97a2a7;

	/* ---------- La marque, telle qu'elle est imprimee ---------- */

	/*
	 * Ces deux valeurs sont celles de la carte de visite, au pixel pres. Elles
	 * ne servent QU'A l'enseigne et a la carte de visite du site, c'est-a-dire
	 * la ou le lettrage est reproduit tel quel et compose en grand.
	 */
	--ff-marque-rouge: #c43839;
	--ff-marque-bleu:  #1b3a69;

	/* ---------- Les quatre les, et le signal ---------- */

	--ff-le-incendie:  #b8302f;   /* le rouge de la marque, rabattu d'un cran */
	--ff-le-secours:   #0f5c0c;   /* le vert de la croix, eclairci d'un cran  */
	--ff-le-obligation:#1b3a69;   /* le bleu marine du lettrage, tel quel     */

	/*
	 * L'OCRE EST L'ORANGE DE LA FLAMME, DESCENDU JUSQU'A CE QU'IL PORTE DU TEXTE.
	 *
	 * La flamme donne #fd9f1e, qui ne tient que 1,87:1 sur le sol : aucun texte
	 * ne peut s'y ecrire. Descendu a #8a5200, il rend 5,88:1 tout en gardant sa
	 * teinte. C'est la quatrieme couleur du logo, et elle manquait.
	 */
	--ff-le-ocre:      #8a5200;

	--ff-le-acier:     #14181b;   /* l'anthracite : l'encre du texte, et rien d'autre */

	/*
	 * L'ORANGE DE LA FLAMME N'EST JAMAIS UN LE, et ce n'est pas un choix : il
	 * rend 1,87:1 sur le sol du site. Aucun texte ne peut s'ecrire dessus, et
	 * il ne peut pas non plus s'ecrire sur le sol.
	 *
	 * Il ne sert donc que de SIGNE, et seulement sur l'anthracite, ou il rend
	 * 8,63:1 : un surtitre, un repere, un accent de lettrage. Ponctuel, jamais
	 * etendu.
	 */
	--ff-signal:       #fd9f1e;   /* l'orange de la flamme, tel quel */
	--ff-signal-sombre:#8a5500;   /* le meme signe sur fond clair, a 4,5:1 */

	/* Le le courant. Recalcule section par section par main.css. */
	--ff-le:      transparent;
	--ff-sur-le:  var(--ff-encre-claire);

	/* ---------- Espacements ---------- */

	--ff-esp-1: 0.25rem;
	--ff-esp-2: 0.5rem;
	--ff-esp-3: 0.75rem;
	--ff-esp-4: 1rem;
	--ff-esp-5: 1.5rem;
	--ff-esp-6: 2rem;
	--ff-esp-7: 3rem;
	--ff-esp-8: 4.5rem;
	--ff-esp-9: 6.5rem;

	/* ---------- Largeurs ---------- */

	--ff-contenu-max:       75rem;
	--ff-contenu-texte-max: 42rem;
	--ff-contenu-large-max: 88rem;
	--ff-gouttiere:         clamp(1.25rem, 0.5rem + 2.4vw, 2.5rem);

	/*
	 * LA LARGEUR DES BANDES QUI COURENT BORD A BORD.
	 *
	 * L'en-tete et le pied ne sont pas des sections : ce sont des bandes qui
	 * courent d'un bord a l'autre, se centrent elles-memes, et portent leur
	 * gouttiere en remplissage. Avec box-sizing: border-box, ce remplissage se
	 * prend SUR la largeur maximale au lieu de s'ajouter a cote : leur contenu
	 * commence donc une gouttiere plus loin que celui des sections, qui portent
	 * la leur dans des pistes de grille.
	 *
	 * Ecrit en jeton et une seule fois, pour que les trois endroits concernes
	 * (interieur d'en-tete, interieur de pied, mention de pied) ne puissent
	 * plus diverger.
	 */
	--ff-bande-max: calc(var(--ff-contenu-max) + var(--ff-gouttiere) * 2);

	/* ---------- Typographie ---------- */

	--ff-police-titre:     'Archivo', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
	--ff-police-corps:     'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ff-police-technique: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

	--ff-txt-mention:  0.75rem;
	--ff-txt-petit:    0.8125rem;
	--ff-txt-appui:    0.9375rem;
	--ff-txt-corps:    1.0625rem;
	--ff-txt-large:    1.1875rem;
	--ff-txt-chapeau:  clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
	--ff-txt-t3:       clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
	--ff-txt-t2:       clamp(1.5rem, 1.1rem + 1.8vw, 2.375rem);
	--ff-txt-t1:       clamp(2rem, 1.3rem + 3.2vw, 3.75rem);
	--ff-txt-enseigne: clamp(2.5rem, 1.2rem + 5.6vw, 5.5rem);

	--ff-lettrage-serre:  -0.02em;
	--ff-lettrage-normal: 0;
	--ff-lettrage-ouvert: 0.06em;
	--ff-lettrage-large:  0.14em;

	--ff-chasse-etroite: 82%;
	--ff-chasse-normale: 100%;

	--ff-interligne-titre: 1.04;
	--ff-interligne-corps: 1.62;

	/* ---------- Cibles ---------- */

	--ff-cible-min:     44px;   /* vise, critere 2.5.5 AAA          */
	--ff-cible-plancher:24px;   /* minimum absolu, critere 2.5.8 AA */

	/* ---------- Formes ---------- */

	/*
	 * LES RAYONS, ET POURQUOI ILS NE VALENT PLUS ZERO.
	 *
	 * Le site etait entierement a angle vif : c'etait la geometrie de la
	 * signaletique de securite, et c'etait coherent. La refonte adopte au
	 * contraire de grands rayons, parce que la structure de page reposait
	 * jusqu'ici sur des BANDES pleine largeur qui se touchent, et repose
	 * maintenant sur des CARTES posees sur un sol visible. Une carte a angle vif
	 * posee sur un fond ne se lit pas comme un objet, elle se lit comme un trou.
	 *
	 * L'angle vif n'a pas disparu pour autant : il reste sur la hachure de
	 * securite, sur les icones et sur les filets. C'est la ou il porte du sens.
	 *
	 * Trois valeurs seulement, largement espacees. Une echelle de rayons a six
	 * crans ne se voit pas et ne s'applique jamais deux fois pareil.
	 */
	--ff-rayon:        0;          /* l'angle vif, la ou il porte du sens */
	--ff-rayon-menu:   0.75rem;    /* les petits objets d'interface       */
	--ff-rayon-carte:  1.5rem;     /* les cartes, les encarts, les champs */
	--ff-rayon-plaque: 2.25rem;    /* l'en-tete flottant, le hero, les bandes */
	--ff-rayon-pilule: 999px;      /* les commandes et les etiquettes     */
	--ff-rayon-barre:  1.25rem;    /* l'en-tete flottant, et lui seul     */

	/* ---------- Ombres ---------- */

	/*
	 * DEUX OMBRES, ET ELLES SONT TRES BASSES.
	 *
	 * Une carte posee sur un papier chaud n'a pas besoin de leviter. L'ombre ne
	 * sert qu'a decoller le bord du fond, pas a simuler une hauteur. Elle est
	 * donc large, tres diffuse, et presque sans opacite : ce qui separe la carte
	 * du sol, c'est le blanc de la carte, pas l'ombre.
	 *
	 * La teinte n'est pas un gris neutre mais le bleu marine de la marque, tres
	 * dilue : une ombre grise sur un fond chaud vire au vert.
	 */
	--ff-ombre-posee:  0 1px 2px rgb(27 58 105 / 0.04), 0 8px 24px rgb(27 58 105 / 0.05);
	--ff-ombre-levee:  0 2px 4px rgb(27 58 105 / 0.05), 0 16px 40px rgb(27 58 105 / 0.09);

	--ff-filet-fin:    1px;
	--ff-filet-epais:  2px;
	--ff-filet-plaque: 3px;

	/* ---------- Formats d'image ---------- */

	--ff-format-banniere: 5 / 2;
	--ff-format-carte:    4 / 3;
	--ff-format-photo:    4 / 3;
	--ff-format-hero:     16 / 9;
	--ff-format-portrait: 4 / 5;
	--ff-format-carton:   85.6 / 54;   /* le format normalise d'une carte de visite */

	/* ---------- Plans ---------- */

	--ff-plan-fond:      0;
	--ff-plan-voile:     1;
	--ff-plan-contenu:   2;
	--ff-plan-rappel:   90;
	--ff-plan-menu:    100;   /* a l'interieur du plan de l'en-tete */
	--ff-plan-entete:  110;
	--ff-plan-evitement: 120;

	/* ---------- LE GESTE SIGNATURE : la hachure de securite ---------- */

	/*
	 * Les bandes obliques a 45 degres qui marquent au sol l'espace a laisser
	 * libre devant un extincteur ou une issue de secours, et qui bordent les
	 * barrieres et les obstacles.
	 *
	 * C'est un motif NORMALISE, present physiquement sur chaque site ou
	 * l'organisme intervient. Il n'est pas emprunte a un catalogue d'ornements :
	 * il appartient au metier.
	 *
	 * DEUX GRANDEURS, ET ELLES SE TIENNENT.
	 *   --ff-hachure-pas    la periode du motif
	 *   --ff-hachure-trait  la largeur de la bande claire
	 * Le rapport trait = pas / 2 donne des bandes egales. Pour reduire la
	 * hachure, on divise les DEUX grandeurs : l'angle reste a 45 degres et le
	 * motif reste exactement le meme, simplement vu de plus loin. Un
	 * transform: scale() aurait deforme l'angle et brouille les aretes.
	 */
	--ff-hachure-pas:     20px;
	--ff-hachure-trait:   10px;
	--ff-hachure-epaisseur: 10px;   /* la hauteur de la bande hachuree */
	--ff-hachure-teinte:  var(--ff-encre);
	--ff-hachure-fond:    var(--ff-signal);

	/* ---------- Mouvement ---------- */

	--ff-duree-courte: 0.16s;
	--ff-duree:        0.28s;
	--ff-duree-longue: 0.5s;
	--ff-courbe:       cubic-bezier(0.2, 0, 0.1, 1);
	--ff-courbe-ferme: cubic-bezier(0.4, 0, 1, 1);
}

/* ============================================================================
   LES QUATRE DOMAINES REPEIGNENT LE SITE
   ============================================================================

   L'equivalent des « saisons » d'un site d'artiste, mais il n'est pas
   decoratif : l'organisme enseigne quatre domaines, et chacun a DEJA sa couleur
   dans la norme que les stagiaires apprennent.

     incendie    rouge      le materiel de lutte
     secourisme  vert       le secours et l'evacuation
     surete      bleu       l'obligation
     prevention  anthracite l'acier, faute de couleur normalisee

   Une page de formation, une archive de domaine et la section d'accueil
   correspondante prennent la teinte de leur domaine. Un composant ecrit
   correctement n'a rien a savoir de la couleur sur laquelle il est pose : il
   lit --ff-accent et --ff-accent-sur.
   ========================================================================= */

/*
 * ============================================================================
 * LA COULEUR DE MAISON EST LE BLEU MARINE, ET PLUS L'ANTHRACITE
 * ============================================================================
 * Elle etait l'anthracite, heritee de l'epoque ou le site n'avait ni logo ni
 * carte. Resultat : le hero, deux sections de l'accueil, le pied de page, tous
 * les boutons, les bannieres et l'encart de reference etaient NOIRS. Le site
 * avait une couleur de marque, et il n'en montrait aucune.
 *
 * Le bleu marine est le meilleur candidat, et ce n'est pas un gout : c'est la
 * couleur du mot « Formations » sur la carte de visite, et celle de la feuille
 * du logo. C'est deja, pour qui a vu la carte, la couleur de l'organisme.
 *
 * L'anthracite reste l'encre du texte. Il ne fait plus surface.
 */
:root {
	--ff-accent:       var(--ff-le-obligation);
	--ff-accent-sur:   #ffffff;
	--ff-accent-voile: rgba(27, 58, 105, 0.08);
}

/*
 * La prevention prend l'ocre de la flamme : c'est la quatrieme couleur du logo,
 * et le seul domaine qui n'en avait pas.
 */
[data-domaine='prevention'] {
	--ff-accent:       var(--ff-le-ocre);
	--ff-accent-sur:   #ffffff;
	--ff-accent-voile: rgba(138, 82, 0, 0.09);
}

[data-domaine='incendie'] {
	--ff-accent:       var(--ff-le-incendie);
	--ff-accent-sur:   #ffffff;
	--ff-accent-voile: rgba(179, 20, 30, 0.09);
}

[data-domaine='secourisme'] {
	--ff-accent:       var(--ff-le-secours);
	--ff-accent-sur:   #ffffff;
	--ff-accent-voile: rgba(11, 110, 69, 0.09);
}

[data-domaine='surete'] {
	--ff-accent:       var(--ff-le-obligation);
	--ff-accent-sur:   #ffffff;
	--ff-accent-voile: rgba(19, 76, 122, 0.09);
}

/* ============================================================================
   CONTRASTE RENFORCE
   ============================================================================
   Les filets s'appuient. Les ornements, eux, sont eteints dans main.css :
   ils ne portent aucune information, donc rien ne se perd.
   ========================================================================= */

@media (prefers-contrast: more) {
	:root {
		--ff-filet:           #6e787e;
		--ff-filet-interface: #4a5359;
		--ff-encre-douce:     #2b3236;
		--ff-encre-tenue:     #3d4549;
	}
}