/*
Theme Name: Le Granulé
Description: Thème de l'annuaire des fabricants de granulés de bois. Aucun framework, aucun builder.
Author: Radical Web
Version: 1.0.0
Requires PHP: 8.2
Text Domain: legranule
*/

/* ---------- Jetons ---------- */
:root {
	--papier: #faf8f4;
	--carte: #ffffff;
	--encre: #1c211e;
	--gris: #555b57;
	--trait: #e3ded4;
	--foret: #2c5a37;
	--foret-fonce: #1f4228;
	--bois: #9a5a26;
	--sable: #f1ece2;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--rayon: 6px;
	--large: 72rem;
	--texte: 42rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--papier);
	color: var(--encre);
	font: 1.0625rem/1.65 var(--sans);
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); }
h3 { font-size: 1.15rem; }
p, ul, ol, dl, table { margin: 0 0 1.1em; }
a { color: var(--foret); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--foret-fonce); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--bois); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
code { font-family: var(--mono); font-size: .9em; }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 1rem; top: -3rem; background: var(--foret); color: #fff; padding: .5rem 1rem; border-radius: var(--rayon); z-index: 10; }
.lien-evitement:focus { top: 1rem; color: #fff; }

.conteneur { width: min(100% - 2.5rem, var(--large)); margin-inline: auto; }
.etroit { max-width: var(--texte); }

/* ---------- En-tête ---------- */
.site-entete { border-bottom: 1px solid var(--trait); background: var(--carte); }
.site-entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: 1rem; }
.marque-site { display: flex; align-items: center; gap: .7rem; color: var(--encre); text-decoration: none; }
.marque-site:hover { color: var(--encre); }
.marque-site svg { flex: none; }
.marque-site__nom { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.marque-site__devise { display: block; font-size: .8rem; color: var(--gris); letter-spacing: .01em; }
.nav-principale ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav-principale a { color: var(--encre); text-decoration: none; font-weight: 500; padding-block: .25rem; border-bottom: 2px solid transparent; }
.nav-principale a:hover, .nav-principale a[aria-current] { border-bottom-color: var(--foret); color: var(--foret-fonce); }

/* ---------- Contenu ---------- */
main { padding-block: 2rem 4rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .875rem; color: var(--gris); }
.ariane li + li::before { content: "›"; margin-right: .35rem; color: #8a8f8b; }
.ariane a { color: var(--gris); }

.chapeau { font-size: 1.15rem; color: #3a403c; max-width: var(--texte); }
.surtitre { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bois); margin: 0 0 .5rem; }
.meta-ligne { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: var(--gris); font-size: .925rem; margin: 0 0 2rem; padding: 0; list-style: none; }

.prose { max-width: var(--texte); }
.prose h2 { margin-top: 2em; }
.prose ul, .prose ol { padding-left: 1.3em; }

/* ---------- Fiche ---------- */
.fiche__entete { padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--trait); }
.fiche__grille { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) {
	.fiche__grille { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
	.fiche__sommaire { position: sticky; top: 1.5rem; order: 2; }
}
.fiche__section { margin-bottom: 2.75rem; scroll-margin-top: 1.5rem; }
.fiche__section > h2 { padding-bottom: .4rem; border-bottom: 2px solid var(--sable); }
.fiche__sommaire { font-size: .9rem; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.25rem; }
.fiche__sommaire h2 { font-family: var(--sans); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: .6rem; }
.fiche__sommaire ol { margin: 0; padding-left: 1.2em; }
.fiche__sommaire li { margin-bottom: .25rem; }

.donnees { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 0; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); overflow: hidden; }
.donnees dt, .donnees dd { margin: 0; padding: .7rem 1rem; border-bottom: 1px solid var(--trait); }
.donnees dt { color: var(--gris); font-size: .925rem; background: #fcfbf8; }
.donnees dt:nth-last-of-type(1), .donnees dd:last-of-type { border-bottom: 0; }
@media (max-width: 34rem) {
	.donnees { grid-template-columns: 1fr; }
	.donnees dt { border-bottom: 0; padding-bottom: .1rem; background: none; font-size: .825rem; }
	.donnees dd { padding-top: 0; }
}
.inconnu { color: var(--gris); font-style: italic; }
.source-lien { font-size: .85rem; white-space: nowrap; }

.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.pastilles li { background: var(--sable); border-radius: 999px; padding: .3rem .85rem; font-size: .95rem; }
.pastilles a { text-decoration: none; }

.boutons { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; }
.bouton { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.1rem; border: 1px solid var(--foret); border-radius: var(--rayon); color: var(--foret-fonce); background: var(--carte); text-decoration: none; font-weight: 500; }
.bouton:hover { background: var(--foret); color: #fff; }

.sources { font-size: .925rem; padding-left: 1.4em; }
.sources li { margin-bottom: .6rem; overflow-wrap: anywhere; }
.sources .date { color: var(--gris); }
.note { font-size: .875rem; color: var(--gris); }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); font-size: .95rem; }
.tableau caption { text-align: left; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--trait); }
.tableau thead th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); background: #fcfbf8; font-weight: 600; }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau tbody th { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
@media (max-width: 44rem) {
	.tableau, .tableau tbody, .tableau tr, .tableau th, .tableau td { display: block; }
	.tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tableau tr { padding: .75rem 1rem; border-bottom: 1px solid var(--trait); }
	.tableau tbody tr:last-child { border-bottom: 0; }
	.tableau th, .tableau td { padding: .1rem 0; border: 0; }
	.tableau td[data-libelle]::before { content: attr(data-libelle) " : "; color: var(--gris); font-size: .85rem; }
}

.region { margin-bottom: 2.5rem; }
.region h2 { display: flex; align-items: baseline; gap: .6rem; }
.region h2 small { font-family: var(--sans); font-size: .85rem; font-weight: 400; color: var(--gris); }

.vide { background: var(--carte); border: 1px dashed var(--trait); border-radius: var(--rayon); padding: 1.5rem; color: var(--gris); }

/* ---------- Accueil ---------- */
.accueil__intro { display: grid; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 60rem) { .accueil__intro { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.encart { background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--foret); border-radius: var(--rayon); padding: 1.25rem 1.5rem; font-size: .95rem; }
.encart h2 { font-size: 1.1rem; }
.encart ul { padding-left: 1.2em; margin: 0; }

/* ---------- Pied ---------- */
.site-pied { border-top: 1px solid var(--trait); background: var(--sable); font-size: .9rem; color: #3f4541; }
.site-pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 2rem; }
.site-pied p { margin: 0; max-width: 34rem; }
.site-pied ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-pied a { color: #3f4541; }

@media print {
	.site-entete nav, .fiche__sommaire, .site-pied ul { display: none; }
	body { background: #fff; }
}