/* ============================================================================
   plan-du-site.css - page /plan-du-site, version « ile claire »
   ----------------------------------------------------------------------------
   Chargee UNIQUEMENT par pages/plan-du-site/plan-du-site.php.
   L'en-tete de page (.pd-page-head) et le socle viennent de light.css : ne
   restent ici que la grille de colonnes et les listes de liens.

   La page est une LISTE DE LIENS : sa reussite tient a la densite et au
   reperage, pas a la decoration. D'ou des colonnes qui se remplissent seules
   (auto-fill) et un seul niveau de hierarchie visuelle par colonne.
   ============================================================================ */

.pd-fiche .pl-grid{
	display:grid;gap:1.25rem;
	grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr));
	align-items:start;
}
/* La colonne des realisations porte deux listes et une rangee d'etiquettes :
   elle prend deux places des que la largeur le permet. */
@media(min-width:992px){.pd-fiche .pl-col-wide{grid-column:span 2}}

.pd-fiche .pl-col{
	background:var(--surface-card);border:1px solid var(--glass-border);
	border-radius:.85rem;padding:1.25rem;height:100%;
}
.pd-fiche .pl-col-title{
	display:flex;align-items:center;gap:.6rem;
	margin:0 0 .9rem;padding-bottom:.7rem;
	border-bottom:1px solid rgba(var(--primary-lightest-rgb),.9);
	font-size:1rem;font-weight:800;letter-spacing:-.01em;
	color:rgba(var(--primary-darkest-rgb),1);
}
.pd-fiche .pl-col-title i{font-size:.85em;color:rgba(var(--primary-medium-rgb),1)}

/* Sous-titre a l'interieur d'une colonne (« Les projets », « Derniers
   articles ») : une capitale discrete, pas un second titre. */
.pd-fiche .pl-sub{
	margin:1.15rem 0 .5rem;font-size:.68rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.09em;
	color:rgba(var(--primary-dark-rgb),.8);
}

.pd-fiche .pl-list{list-style:none;margin:0;padding:0}
.pd-fiche .pl-list li{padding:.3rem 0}
.pd-fiche .pl-list li + li{border-top:1px solid rgba(var(--primary-lightest-rgb),.55)}
.pd-fiche .pl-list a{
	display:block;font-size:.9rem;font-weight:600;text-decoration:none;
	color:rgba(var(--primary-dark-rgb),.92);
	transition:color .2s ease,padding-left .2s ease;
}
.pd-fiche .pl-list a:hover{color:rgba(var(--primary-medium-rgb),1);padding-left:.3rem}
/* Le libelle secondaire dit A QUOI SERT la page : sur un plan du site, c'est
   ce qui evite d'avoir a cliquer pour le decouvrir. */
.pd-fiche .pl-list span{display:block;font-size:.76rem;line-height:1.45;color:rgba(var(--primary-dark-rgb),.8)}
/* Deux colonnes pour les listes longues (les 18 projets). */
@media(min-width:768px){.pd-fiche .pl-list-2col{columns:2;column-gap:1.5rem}}
.pd-fiche .pl-list-2col li{break-inside:avoid}

/* Etiquettes : les categories de projets, en une rangee compacte. */
.pd-fiche .pl-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pd-fiche .pl-tags a{
	display:inline-block;padding:.3rem .7rem;border-radius:50px;
	font-size:.78rem;font-weight:600;text-decoration:none;
	background:rgba(var(--primary-medium-rgb),.08);
	color:rgba(var(--primary-medium-rgb),1);
	transition:background .2s ease;
}
.pd-fiche .pl-tags a:hover{background:rgba(var(--primary-medium-rgb),.16)}

.pd-fiche .pl-list a:focus-visible,
.pd-fiche .pl-tags a:focus-visible{outline:2px solid var(--primary-fluo);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
	.pd-fiche .pl-list a{transition:none}
	.pd-fiche .pl-list a:hover{padding-left:0}
}