/* ============================================================================
   FONTAINE FORMATIONS - LA COUCHE VISUELLE
   ============================================================================
   PROFONDEUR, MATIERE, MOUVEMENT.

   CETTE FEUILLE EST FACULTATIVE, et ce n'est pas une precaution de style :
   c'est un critere de construction. Le site doit etre complet, lisible et
   navigable sans une seule ligne de ce fichier. Un site dont la signature
   graphique serait indispensable a la lecture serait mal construit.

   On peut la retirer entierement : rien ne disparait, rien ne devient
   illisible, aucune commande ne cesse de fonctionner. La page devient
   simplement plate.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. LA MATIERE DES PLAQUES
   ----------------------------------------------------------------------------
   Tout ce qui contient est une plaque posee sur le sol : une ombre courte et
   franche, jamais un halo diffus. Une ombre douce appartient au registre du
   papier ; celui-ci est celui de l'acier visse.
   ------------------------------------------------------------------------- */

.carte,
.domaine,
.terrain,
.apport,
.encart,
.voisin,
.vide,
.fiche__bloc--cadre {
	box-shadow: 0 1px 0 0 rgba(20, 24, 27, 0.04), 0 2px 10px -6px rgba(20, 24, 27, 0.28);
	transition:
		transform var(--ff-duree) var(--ff-courbe),
		box-shadow var(--ff-duree) var(--ff-courbe),
		border-color var(--ff-duree-courte) var(--ff-courbe);
}

.carte:hover,
.domaine:hover,
.voisin:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 0 rgba(20, 24, 27, 0.06), 0 14px 28px -14px rgba(20, 24, 27, 0.42);
}

.carte:focus-within,
.domaine:focus-within { transform: translateY(-3px); }

/* La vignette respire au survol, sans jamais deborder de son cadre. */
.carte__vignette img { transition: transform var(--ff-duree-longue) var(--ff-courbe); }
.carte:hover .carte__vignette img,
.carte:focus-within .carte__vignette img { transform: scale(1.04); }

/* ----------------------------------------------------------------------------
   2. LA PROFONDEUR DU HERO ET DES BANNIERES
   ------------------------------------------------------------------------- */

.hero__image { transform: scale(1.02); }

.banniere__image {
	filter: saturate(0.92) contrast(1.04);
}

/*
 * Un grain tres leger sur les aplats sombres.
 *
 * Un aplat parfaitement uni sur une grande surface fait apparaitre des bandes
 * de degrade sur les ecrans 8 bits. Le grain les casse. Il est pose en
 * pseudo-element, donc absent de l'arbre d'accessibilite, et il disparait en
 * couleurs forcees.
 */
.hero::after,
.banniere::before,
.reference::after,
.pied::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--ff-plan-voile);
	pointer-events: none;
	opacity: 0.4;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
	background-size: 3px 3px;
}

.hero::after, .banniere::before { z-index: 1; }
.reference::after, .pied::after { z-index: 0; }
.reference > *, .pied > * { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------------
   3. L'APPARITION AU DEFILEMENT
   ----------------------------------------------------------------------------
   L'etat masque est pose PAR LE SCRIPT, jamais dans le HTML. Sans JavaScript,
   ces regles ne s'appliquent a rien et tout est visible des le chargement.

   Le decalage est infime et la duree courte : la profondeur doit se sentir,
   pas se voir.
   ------------------------------------------------------------------------- */

.a-apparaitre {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--ff-duree-longue) var(--ff-courbe),
		transform var(--ff-duree-longue) var(--ff-courbe);
}

.est-apparu { opacity: 1; transform: none; }

/* Un leger decalage d'une carte a l'autre dans une meme rangee. */
.grille__item:nth-child(2) .a-apparaitre,
.grille__item:nth-child(2) { transition-delay: 60ms; }
.grille__item:nth-child(3) { transition-delay: 120ms; }
.grille__item:nth-child(4) { transition-delay: 180ms; }

/* ----------------------------------------------------------------------------
   4. LE MOUVEMENT DES COMMANDES
   ------------------------------------------------------------------------- */

.commande { transition: background-color var(--ff-duree-courte) var(--ff-courbe), color var(--ff-duree-courte) var(--ff-courbe), transform var(--ff-duree-courte) var(--ff-courbe); }
.commande:active { transform: translateY(1px); }

.filtres__lien { transition: background-color var(--ff-duree-courte) var(--ff-courbe), border-color var(--ff-duree-courte) var(--ff-courbe), color var(--ff-duree-courte) var(--ff-courbe); }

/* ----------------------------------------------------------------------------
   5. LA CARTE DE VISITE
   ----------------------------------------------------------------------------
   Le carton est un objet : il a une epaisseur et il prend la lumiere. Le
   degrade tres leger sur la face suffit a le detacher du fond sans jamais
   toucher au contraste du texte, qui reste blanc pur sur anthracite.
   ------------------------------------------------------------------------- */

/*
 * Le carton est BLANC depuis qu'on a la vraie carte : la lueur claire qui le
 * detachait quand il etait anthracite n'a plus rien a eclaircir. Reste l'ombre,
 * qui est ce qui lui donne son epaisseur de carton pose sur la page.
 */
.carton__face {
	box-shadow: 0 16px 34px -22px rgba(20, 24, 27, 0.55), 0 1px 0 0 rgba(20, 24, 27, 0.12);
}

.carton--pliable .carton__scene { transition: transform var(--ff-duree) var(--ff-courbe); }
.carton--pliable:hover .carton__scene { transform: translateY(-2px); }

/* ----------------------------------------------------------------------------
   6. LA CHRONOLOGIE
   ------------------------------------------------------------------------- */

.chrono__etape::after {
	content: '';
	position: absolute;
	inset-inline-start: -3px;
	inset-block-start: 0.35em;
	inline-size: 9px;
	block-size: 9px;
	background-color: var(--ff-accent);
}

/* ----------------------------------------------------------------------------
   7. CE QUI S'ETEINT
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.a-apparaitre { opacity: 1; transform: none; }
	.carte:hover, .domaine:hover, .voisin:hover { transform: none; }
	.carte:hover .carte__vignette img, .carte:focus-within .carte__vignette img { transform: none; }
	.carton--pliable:hover .carton__scene { transform: none; }
	.hero__image { transform: none; }
}

@media (prefers-contrast: more) {
	.carte, .domaine, .terrain, .apport, .encart, .voisin, .vide { box-shadow: none; }
	.carton__face { background-image: none; }
	.hero::after, .banniere::before, .reference::after, .pied::after { display: none; }
}

@media (forced-colors: active) {
	.carte, .domaine, .terrain, .apport, .encart, .voisin, .vide, .carton__face { box-shadow: none; }
	.carton__face { background-image: none; }
	.hero::after, .banniere::before, .reference::after, .pied::after { display: none; }
	.chrono__etape::after { background-color: CanvasText; }
	.banniere__image { filter: none; }
}

@media print {
	.carte, .domaine, .terrain, .apport, .encart, .voisin, .vide, .carton__face { box-shadow: none; }
	.a-apparaitre { opacity: 1; transform: none; }
	.hero::after, .banniere::before, .reference::after, .pied::after { display: none; }
}