/**
 * LES TRAITS DE CONSTRUCTION — surcouche temporaire, jamais servie au public.
 *
 * « J'aimerais vraiment voir les gabarits, donc j'aimerais que tu mettes les
 * traits de construction. »
 *
 * Elle ne s'enfile que si l'adresse porte `?grille` : sans ce paramètre, ni
 * cette feuille ni son script ne sont demandés, et le visiteur ne télécharge
 * pas un octet de plus. Ce n'est donc pas une option du site, c'est un
 * instrument qu'on allume pour regarder.
 *
 * ⚠️ ELLE NE CHANGE AUCUNE MISE EN PAGE. Tout est en `position: absolute`,
 * `outline` ou `::after` — jamais une marge, jamais un `display`. Un
 * instrument qui déplace ce qu'il mesure ne mesure rien.
 *
 * @package linahadid
 */

/* ── la colonnade ───────────────────────────────────────────────────────── *
 * Elle reproduit EXACTEMENT la grille de `.gab` : même gouttière de page,
 * même nombre de colonnes, même gouttière de colonne. Si les deux cessaient
 * de coïncider, la surcouche mentirait — c'est pour ça qu'elle lit les mêmes
 * variables au lieu de recopier des valeurs. */
.g-colonnade {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--e4);
	padding-inline: var(--gouttiere);
	max-width: var(--large);
	margin-inline: auto;
}
.g-colonnade > span {
	background: rgba(142, 47, 58, .07);
	border-left: 1px solid rgba(142, 47, 58, .30);
	border-right: 1px solid rgba(142, 47, 58, .30);
	position: relative;
}
.g-colonnade > span::after {
	content: attr(data-n);
	position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
	font: 10px/1 ui-monospace, monospace;
	color: rgba(142, 47, 58, .75);
}

/* ── le bord de page ────────────────────────────────────────────────────── */
.g-bord {
	position: fixed; inset: 0; z-index: 2147482999; pointer-events: none;
	max-width: var(--large); margin-inline: auto;
	border-left: 1px dashed rgba(31, 43, 69, .35);
	border-right: 1px dashed rgba(31, 43, 69, .35);
}

/* ── chaque section, nommée et cernée ───────────────────────────────────── *
 * `outline` et non `border` : un contour ne prend aucune place dans la boîte,
 * donc il ne décale rien. C'est la seule façon de cerner un élément sans
 * changer ce qu'on regarde. */
html[data-grille] .gab {
	outline: 1px solid rgba(31, 43, 69, .55);
	outline-offset: -1px;
	position: relative;
}
html[data-grille] .gab::after {
	content: attr(data-g);
	position: absolute; top: 0; left: 0; z-index: 2147482998;
	padding: 3px 7px;
	background: var(--navy, #1f2b45); color: #fff;
	font: 11px/1.4 ui-monospace, monospace;
	white-space: pre;
	pointer-events: none;
}
/* Les colonnes de la section : contour pointillé et portée écrite. */
html[data-grille] .gab > div {
	outline: 1px dashed rgba(142, 47, 58, .75);
	outline-offset: -1px;
	position: relative;
}
html[data-grille] .gab > div::after {
	content: attr(data-g);
	position: absolute; right: 0; bottom: 0; z-index: 2147482998;
	padding: 2px 6px;
	background: rgba(142, 47, 58, .92); color: #fff;
	font: 10px/1.4 ui-monospace, monospace;
	pointer-events: none;
}

/* ── le bouton, toujours là ─────────────────────────────────────────────── *
 * Petit, à droite, sous le panneau. Il reste visible grille éteinte : c'est
 * par lui qu'on la rallume, sans avoir à connaître `?grille=1`. */
.g-bouton {
	position: fixed; left: 10px; bottom: 10px; z-index: 2147483002;
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	padding: 0; cursor: pointer;
	background: rgba(31, 43, 69, .92); color: #8d8679;
	border: 1px solid rgba(236, 230, 218, .28);
	font: 700 15px/1 ui-monospace, monospace;
	transition: color .15s ease, border-color .15s ease;
}
.g-bouton:hover { border-color: rgba(236, 230, 218, .6); }
.g-bouton[aria-pressed="true"] { color: #d9a3a9; border-color: rgba(217, 163, 169, .55); }
/* 🔴 IL NE BOUGE PLUS. Il montait en haut quand la grille s'allumait, pour
   fuir le panneau : un bouton qui change de coin au moment où on clique
   dessus se perd à chaque fois. Posé à GAUCHE (demande de Yan, 01.11.2026),
   il ne croise plus le panneau, qui occupe la droite. */

/* ── le panneau ─────────────────────────────────────────────────────────── */
/* ⚠️ EN BAS, PAS EN HAUT. Un panneau posé sur le menu et le sélecteur de
   thème empêche d'essayer ce qu'on est précisément venu voir. Il reste donc
   en bas à droite — et le bouton, lui, est en bas à gauche. */
.g-panneau {
	position: fixed; bottom: 10px; right: 10px; z-index: 2147483001;
	max-width: 320px; max-height: 70dvh; overflow: auto;
	padding: 12px 14px;
	background: rgba(31, 43, 69, .96); color: #ece6da;
	font: 11px/1.6 ui-monospace, monospace;
	border: 1px solid rgba(236, 230, 218, .3);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}
.g-panneau summary {
	cursor: pointer; list-style: none;
	font: 700 11px/1.4 ui-monospace, monospace; letter-spacing: .1em;
	text-transform: uppercase; color: #d9a3a9;
}
.g-panneau summary::-webkit-details-marker { display: none; }
.g-panneau summary::after { content: ' ▾'; }
.g-panneau details[open] summary::after { content: ' ▴'; }
.g-panneau details[open] summary { margin-bottom: 8px; }
.g-panneau ol { margin: 0; padding-left: 1.4em; }
.g-panneau li { margin: 0 0 4px; }
.g-panneau code { color: #f3e7da; }
.g-panneau .g-note { margin: 8px 0 0; color: #b8b0a4; }
.g-panneau .g-sortir {
	display: inline-block; margin-top: 10px; padding: 4px 10px;
	border: 1px solid rgba(236, 230, 218, .4); color: #ece6da;
	text-decoration: none;
}
@media print { .g-colonnade, .g-bord, .g-panneau, .g-bouton { display: none; } }