/**
 * ClicAccess — base.css
 *
 * Feuille de style fondamentale du thème.
 *
 * Ce fichier contient uniquement :
 * - les règles CSS génériques ;
 * - le socle du moteur de layout ;
 * - les règles structurelles communes à toutes les pages.
 *
 * Il ne doit pas contenir :
 * - les styles de contenu éditorial ;
 * - les styles spécifiques aux archives ;
 * - les styles de navigation ;
 * - les styles de widgets.
 *
 * Ces styles sont répartis dans les autres fichiers CSS du thème.
 */


/* =========================================================
   1. Normalisation minimale
   ========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	min-height: 100vh;
}


/* =========================================================
   2. Liens d’évitement et focus
   ========================================================= */

/*
Les liens d’évitement sont injectés juste après l’ouverture du body.

Ils doivent :
- rester accessibles au clavier ;
- être masqués visuellement hors focus ;
- devenir visibles lorsqu’ils reçoivent le focus.
*/

.skip-links {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}

.skip-link {
	position: absolute;
	left: -9999rem;
	top: auto;
}

/*
Affichage du lien lorsqu’il reçoit le focus clavier.
*/

.skip-link:focus,
.skip-link:active {
	position: static;
	left: auto;
	top: auto;

	display: inline-block;

	margin: 0.5rem;
	padding: 0.75rem 1rem;

	background: #ffffff;
	color: #000000;

	text-decoration: none;

	outline: 0.2rem solid currentColor;
	outline-offset: 0.2rem;
}


/* =========================================================
   3. Structure principale du thème
   ========================================================= */

/*
Le moteur PHP du thème ajoute une structure de type :

<div class="layout-shell layout-right">

Les variantes possibles sont :

layout-none
layout-left
layout-right
layout-both

Cette section définit la grille principale de la page.
*/

.layout-shell {
	display: grid;
	gap: 2rem;
	align-items: start;
}


/* =========================================================
   4. Zone principale de contenu
   ========================================================= */

.site-main {
	min-width: 0;
}


/* =========================================================
   5. Variantes de layout
   ========================================================= */

/*
Aucune sidebar.
Le contenu occupe toute la largeur.
*/

.layout-shell.layout-none {
	grid-template-columns: minmax(0, 1fr);
}


/*
Sidebar gauche uniquement.
*/

.layout-shell.layout-left {
	grid-template-columns:
		minmax(16rem, 20rem)
		minmax(0, 1fr);
}


/*
Sidebar droite uniquement.
*/

.layout-shell.layout-right {
	grid-template-columns:
		minmax(0, 1fr)
		minmax(16rem, 20rem);
}


/*
Deux sidebars.
*/

.layout-shell.layout-both {
	grid-template-columns:
		minmax(14rem, 18rem)
		minmax(0, 1fr)
		minmax(14rem, 18rem);
}


/* =========================================================
   6. Comportement responsive
   ========================================================= */

/*
Lorsque l'écran devient étroit,
la grille repasse sur une seule colonne.

Les sidebars passent naturellement sous le contenu.
*/

@media (max-width: 60em) {

	.layout-shell,
	.layout-shell.layout-none,
	.layout-shell.layout-left,
	.layout-shell.layout-right,
	.layout-shell.layout-both {
		grid-template-columns: minmax(0, 1fr);
	}

}