/* ═══════════════════════════════════════════════════════════════════════════
   LA MARQUE — refaite le 2026-10-02

   Chargée par `is_page( 'la-marque' )` seulement, après `pages.css`.
   Préfixe `ad-mq-` partout : aucune classe générique réemployée, donc rien qui
   s'écrase en silence ailleurs (ERR-20260911-01).
   Le langage est celui de l'accueil : prune nuit et trame, égérie détourée,
   Comfortaa en maigre très grand, un mot d'accent en manuscrite.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Les titres de la page ───────────────────────────────────────────────── */
.ad-mq h2 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-weight: 300;
	font-size: clamp(30px, 3.6vw, 50px);
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--ad-encre);
}
.ad-mq h2 .ad-manuscrit { color: var(--ad-rose); }
.ad-mq-tete {
	max-width: 48ch;
	margin: 0 auto clamp(32px, 5vh, 56px);
	text-align: center;
}
.ad-mq-tete p {
	margin: 1em auto 0;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ad-encre-douce);
}
/* ⚠️ LA MANUSCRITE SE POSE EN FIN DE LIGNE, jamais au milieu d'une phrase
   (« Pour ~toutes~ les textures ») : agrandie de 1,8 et logée dans une fenêtre
   d'animation calée sur le bas, elle flottait au-dessus de ses voisins. Le `|`
   lui donne sa ligne, comme dans l'ouverture. */
/* Un titre qui finit par une manuscrite : ses jambages descendent d'un tiers
   de corps sous la ligne — c'est au titre de leur faire la place (~/regles/02). */
.ad-mq h2:has(.ad-mot--manuscrit) { padding-bottom: .12em; line-height: 1.32; }


/* ── 1. L'ouverture ──────────────────────────────────────────────────────── */
.ad-mq-ouvre {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: calc(var(--ad-entete-h) + var(--ad-annonce-h) + clamp(24px, 5vh, 56px));
	background: var(--ad-prune-nuit);
	color: #fff;
}
/* Le même sol que l'accueil : un halo derrière l'égérie, sinon un sujet
   détouré flotte sur un aplat. */
.ad-mq-ouvre::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(ellipse 60% 80% at 76% 62%, rgba(104, 26, 83, .9), transparent 64%),
		linear-gradient(160deg, #3A0C2C 0%, #4A1039 46%, #2C0721 100%);
}
.ad-mq-ouvre .ad-trame { z-index: 1; }

.ad-mq-ouvre__grille {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: end;
	gap: clamp(20px, 3vw, 48px);
	min-height: min(70svh, 640px);
}
.ad-mq-ouvre__mot {
	align-self: center;
	padding-block: clamp(16px, 3vh, 32px) clamp(40px, 7vh, 88px);
}
.ad-mq-ouvre h1 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-weight: 300;
	font-size: clamp(44px, 5.8vw, 88px);
	line-height: 1.04;
	letter-spacing: -.035em;
	color: #fff;
}
.ad-mq-ouvre h1 .ad-manuscrit { color: var(--ad-rose); letter-spacing: 0; }
/* La manuscrite est le dernier groupe du titre : sa queue tombe sur le chapeau
   sans cette marge (même règle que `.ad-ouvre`). */
.ad-mq-ouvre h1 + p { margin-top: 2em; }
.ad-mq-ouvre__mot p {
	max-width: 44ch;
	margin: 1.4em 0 0;
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.75;
	color: var(--ad-lu-sombre);
}
.ad-mq-ouvre__mot p.ad-mq-ouvre__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: none;
	margin-top: 2.2em;
}

.ad-mq-ouvre__vue {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-self: end;
}
.ad-mq-ouvre__vue img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(64svh, 600px);
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .45));
}

/* Les chiffres : le sol de l'ouverture. Un filet clair les sépare de
   l'égérie, qui vient s'y poser. */
.ad-mq-ouvre__chiffres { position: relative; z-index: 3; }
.ad-mq-ouvre__chiffres .ad-chiffres__liste {
	padding-block: clamp(24px, 4vh, 40px);
	border-top: 1px solid var(--ad-filet-clair);
}
.ad-mq-ouvre__chiffres .ad-chiffres__nombre { font-size: clamp(30px, 3.4vw, 46px); }

@media (max-width: 900px) {
	.ad-mq-ouvre__grille { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
	.ad-mq-ouvre__mot { padding-bottom: clamp(28px, 5vh, 44px); }
	.ad-mq-ouvre__vue img { max-height: 340px; }
}


/* ── 2. Le récit ─────────────────────────────────────────────────────────── */
.ad-mq-recit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 6vw, 96px);
	margin-top: clamp(72px, 11vh, 136px);
}
.ad-mq-recit__grande { aspect-ratio: 4 / 5; }
.ad-mq-recit__grande img { object-position: 50% 30%; }
.ad-mq-recit__mot p {
	max-width: 52ch;
	margin: 1.2em 0 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ad-encre-douce);
}
.ad-mq-recit__mot h2 + p { margin-top: 1.4em; }
.ad-mq-recit__mot p.ad-mq-recit__action { margin-top: 2em; }

@media (max-width: 860px) {
	.ad-mq-recit { grid-template-columns: minmax(0, 1fr); }
	.ad-mq-recit__grande { aspect-ratio: 4 / 3; }
}


/* ── 3. Pour toutes les textures ─────────────────────────────────────────── */
.ad-mq-textures {
	margin-top: clamp(72px, 11vh, 136px);
	padding-block: clamp(64px, 10vh, 120px);
	background: var(--ad-ivoire);
}
.ad-mq-textures__vues {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 20px);
}
.ad-mq-textures__vue { aspect-ratio: 3 / 4; }
/* Les photos de cheveux sont cadrées sur la chevelure, pas sur le dos. */
.ad-mq-textures__vue img { object-position: 50% 25%; }

.ad-mq-engagements {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px);
	margin: clamp(44px, 7vh, 72px) 0 0;
	padding: 0;
	list-style: none;
}
.ad-mq-engagements li { padding-top: 22px; border-top: 1px solid var(--ad-filet); }
.ad-mq-engagements__no {
	display: block;
	font-family: var(--ad-police-titre);
	font-size: 14px;
	color: var(--ad-prune);
	font-variant-numeric: tabular-nums;
}
.ad-mq-engagements h3 {
	margin: 10px 0 8px;
	font-family: var(--ad-police-titre);
	font-size: clamp(18px, 1.8vw, 21px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ad-encre);
}
.ad-mq-engagements p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ad-encre-douce); }

@media (max-width: 760px) {
	.ad-mq-textures__vues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ad-mq-engagements { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}


/* ── 4. La frise ─────────────────────────────────────────────────────────────
   Des rangées alternées et non une grille : une histoire se lit dans l'ordre,
   et une grille de six cartes se lit comme une liste d'articles. */
.ad-mq-frise { margin-top: clamp(72px, 11vh, 136px); }
.ad-mq-frise__liste {
	display: grid;
	gap: clamp(48px, 8vh, 96px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ad-mq-jalon {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: clamp(28px, 5vw, 80px);
}
.ad-mq-jalon:nth-child(even) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ad-mq-jalon:nth-child(even) .ad-mq-jalon__vue { order: 2; }
.ad-mq-jalon__vue { aspect-ratio: 4 / 3; }
.ad-mq-jalon__corps { max-width: 44ch; }
/* L'année est la donnée du jalon, pas un surtitre : c'est elle qui ordonne la
   lecture, d'où sa taille. */
.ad-mq-jalon__an {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-weight: 300;
	font-size: clamp(44px, 5.4vw, 80px);
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--ad-prune);
	font-variant-numeric: tabular-nums;
}
.ad-mq-jalon h3 {
	margin: 14px 0 10px;
	font-family: var(--ad-police-titre);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ad-encre);
}
.ad-mq-jalon p:not(.ad-mq-jalon__an) { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ad-encre-douce); }

@media (max-width: 760px) {
	.ad-mq-jalon,
	.ad-mq-jalon:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.ad-mq-jalon:nth-child(even) .ad-mq-jalon__vue { order: 0; }
	.ad-mq-jalon__vue { aspect-ratio: 16 / 10; }
}


/* ── 5. L'équipe ─────────────────────────────────────────────────────────── */
.ad-mq-equipe {
	margin-top: clamp(72px, 11vh, 136px);
	padding-block: clamp(64px, 10vh, 120px);
	background: var(--ad-ivoire);
}
.ad-mq-equipe__liste {
	display: grid;
	/* Neuf personnes : trois colonnes, jamais quatre (une tuile seule). */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ad-mq-equipe__liste li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--ad-blanc);
	border: 1px solid var(--ad-filet);
}
.ad-mq-equipe__initiales {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #F1E3EB;
	color: var(--ad-prune);
	font-family: var(--ad-police-titre);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .02em;
}
.ad-mq-equipe__qui { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ad-mq-equipe__nom {
	font-family: var(--ad-police-titre);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ad-encre);
}
.ad-mq-equipe__role { font-size: 13.5px; line-height: 1.45; color: var(--ad-encre-douce); }

@media (max-width: 860px) {
	/* Une colonne de lignes : le nom sur sa ligne, la fonction dessous
	   (~/regles/01). Deux colonnes laisseraient la neuvième seule. */
	.ad-mq-equipe__liste { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.ad-mq-equipe__liste li { gap: 14px; padding: 12px 14px; }
	.ad-mq-equipe__initiales { width: 44px; height: 44px; font-size: 14px; }
}


/* ── 6. La fin de page ───────────────────────────────────────────────────────
   Un appel, puis de l'air avant le pied : la page s'arrêtait net sur un
   tableau de noms. */
.ad-mq-fin {
	margin-top: clamp(72px, 11vh, 136px);
	margin-bottom: clamp(72px, 11vh, 136px);
}
.ad-mq-fin__cadre {
	padding: clamp(44px, 7vh, 80px) clamp(20px, 5vw, 72px);
	background: #F1E3EB;
	text-align: center;
}
.ad-mq-fin__cadre p {
	max-width: 44ch;
	margin: 1.1em auto 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ad-encre-douce);
}
.ad-mq-fin__cadre p.ad-mq-fin__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: none;
	margin-top: 2em;
}