/**
 * 20-layout.css — La page réglée : contenants, colonnes, grilles.
 *
 * @package Tresor_Sublime
 */

.ts-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.ts-principal {
	flex: 1 0 auto;
	padding-block: var(--ts-5) var(--ts-6);
}

/* Un gabarit qui s'ouvre sur un bandeau pleine largeur porte lui-même sa
   respiration : le <main> ne doit pas ajouter la sienne, sinon une bande de
   fond apparaît entre l'en-tête et le bandeau.
   Déclaré ici, dans une feuille toujours chargée, parce que trois gabarits
   s'en servent : l'accueil, « À propos » et « La réalité mohammadienne ». */
.ts-principal--bandeau,
.ts-principal--accueil {
	padding-block: 0;
}

/* Sur un téléphone, 4 rem de blanc en tête de page coûtent un demi-écran. */
@media (max-width: 700px) {
	.ts-principal {
		padding-block: var(--ts-4) var(--ts-5);
	}

	.ts-principal--bandeau,
	.ts-principal--accueil {
		padding-block: 0;
	}

	.ts-entete-page {
		margin-bottom: var(--ts-3);
	}

	.ts-bandeau {
		padding-block: var(--ts-4);
	}
}

/* Le contenant : la largeur de page, une seule fois définie. */
.ts-contenant {
	width: 100%;
	max-width: var(--ts-page);
	margin-inline: auto;
	padding-inline: var(--ts-gouttiere);
}

.ts-contenant--large {
	max-width: 1320px;
}

/* La colonne de lecture : la mesure d'un texte qu'on lit jusqu'au bout. */
.ts-lecture {
	max-width: var(--ts-mesure);
	margin-inline: auto;
}

/* --------------------------------------------------------------
 * Grille contenu + colonne latérale
 * ----------------------------------------------------------- */

.ts-grille-barre {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 19rem;
	gap: var(--ts-5) var(--ts-5);
	align-items: start;
}

@media (max-width: 1000px) {
	.ts-grille-barre {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ts-5);
	}
}

/* --------------------------------------------------------------
 * La page réglée : une marge habitée + la colonne de texte
 * ----------------------------------------------------------- */

.ts-regle {
	display: grid;
	grid-template-columns: 9rem minmax(0, var(--ts-mesure)) minmax(0, 1fr);
	column-gap: var(--ts-4);
}

.ts-regle > * {
	grid-column: 2;
}

.ts-regle > .ts-marge {
	grid-column: 1;
}

.ts-regle > .ts-deborde {
	grid-column: 2 / -1;
}

.ts-regle > .ts-pleine {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.ts-regle {
		grid-template-columns: minmax(0, 1fr);
	}

	.ts-regle > *,
	.ts-regle > .ts-marge,
	.ts-regle > .ts-deborde,
	.ts-regle > .ts-pleine {
		grid-column: 1;
	}
}

/* --------------------------------------------------------------
 * En-tête de page (archives, recherche, 404)
 * ----------------------------------------------------------- */

.ts-entete-page {
	margin-bottom: var(--ts-4);
	padding-bottom: var(--ts-3);
	border-bottom: 1px solid var(--ts-filet);
}

.ts-entete-page__rubrique {
	display: block;
	margin-bottom: var(--ts-1);
	font-family: var(--ts-rubr);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ts-laiton);
}

.ts-entete-page__titre {
	margin: 0;
	font-size: var(--ts-t-5);
}

.ts-entete-page__intro {
	max-width: var(--ts-mesure);
	margin: var(--ts-2) 0 0;
	font-size: var(--ts-t-1);
	color: var(--ts-encre-douce);
}

.ts-entete-page__compte {
	margin-top: var(--ts-2);
	font-family: var(--ts-rubr);
	font-size: var(--ts-t--1);
	letter-spacing: 0.06em;
	color: var(--ts-encre-pale);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------
 * Bandeau enluminé — vert profond, texte crème
 * ----------------------------------------------------------- */

.ts-bandeau {
	background: linear-gradient(168deg, var(--ts-panneau) 0%, var(--ts-panneau-2) 100%);
	color: var(--ts-panneau-encre);
	border-block: 1px solid var(--ts-panneau-filet);
	padding-block: var(--ts-5);
}

.ts-bandeau h1,
.ts-bandeau h2,
.ts-bandeau h3,
.ts-bandeau h4 {
	color: var(--ts-panneau-encre);
}

.ts-bandeau p {
	color: var(--ts-panneau-douce);
}

.ts-bandeau a {
	color: var(--ts-panneau-encre);
}

.ts-bandeau a:hover,
.ts-bandeau a:focus {
	color: var(--ts-laiton-clair);
}

/* Sur fond vert, le laiton doit s'éclaircir pour rester lisible. */
.ts-bandeau .ts-rubrique,
.ts-bandeau .ts-rubrique a,
.ts-bandeau .ts-ornement {
	color: var(--ts-laiton-clair);
}

/* --------------------------------------------------------------
 * Révélation au défilement (désactivée si mouvement réduit)
 * ----------------------------------------------------------- */

.ts-revele {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ts-revele.est-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ts-revele {
		opacity: 1;
		transform: none;
		transition: none;
	}
}