/*
 * Pages editoriales - DA2 « L'Ecurie »
 *
 * Toutes les pages sauf l'accueil (home.css) : a-propos, nos engagements,
 * contact, mentions legales, politique de confidentialite, CGV, page
 * generique, 404, recherche. Consomme uniquement tokens.css/base.css/
 * components.css (geles) - aucune regle ici ne redefinit un composant
 * partage, elle l'assemble.
 */

/* ---------------------------------------------------------------------
 * BANDEAU DE PAGE
 * Fil d'ariane + titre + chapeau optionnel. Le bandeau photo (a-propos)
 * est un element separe, hors .l-container, pour aller bord a bord.
 * --------------------------------------------------------------------- */

.page-head {
	padding-block: var(--sec-y);
	border-bottom: 1px solid var(--c-line);
}
.page-head__crumb { margin-bottom: var(--sp-6); }
.page-head h1 { max-width: 22ch; }
.page-head__lede {
	margin-top: var(--sp-4);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	color: var(--c-ink-soft);
	max-width: var(--measure);
}

/* Variante sans filet bas : utilisee quand un bandeau photo suit
 * immediatement (le filet reapparaitrait juste au-dessus de la photo). */
.page-head--flush { border-bottom: 0; padding-bottom: var(--sp-6); }

/* Bandeau photo plein largeur. Reserve aux deux photos autorisees en
 * pleine largeur par le plan d'execution (paturage-crepuscule-*) - toutes
 * les autres photos editoriales restent bornees a 1100px, voir .ph--bound
 * plus bas. */
.page-band { width: 100%; aspect-ratio: 21 / 9; overflow: hidden; }
.page-band img { width: 100%; height: 100%; object-fit: cover; filter: var(--c-photo-filter); }
@media (max-width: 47.99rem) { .page-band { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------------------
 * PROSE - lecture longue (mentions legales, confidentialite, CGV,
 * a-propos, nos engagements, page generique)
 * --------------------------------------------------------------------- */

.prose { padding-block: var(--sec-y); }
.prose > :first-child { margin-top: 0; }

.prose h2 {
	font-size: var(--t-h3);
	margin: var(--sp-8) 0 var(--sp-3);
	max-width: var(--measure);
}
.prose h3 {
	font-size: var(--t-h4);
	margin: var(--sp-6) 0 var(--sp-2);
}
.prose p {
	max-width: var(--measure);
	margin-bottom: var(--sp-4);
}
.prose ul, .prose ol {
	max-width: var(--measure);
	margin: 0 0 var(--sp-5);
	padding-left: 0;
}
.prose ol { counter-reset: prose-ol; }
.prose ul > li, .prose ol > li {
	position: relative;
	list-style: none;
	padding-left: var(--sp-6);
	margin-bottom: var(--sp-2);
	line-height: var(--lh-body);
}
/* Puce en filet dore plutot qu'un disque generique - motif recurrent de
 * la DA2 (voir .rule-gold dans components.css). */
.prose ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .75em;
	width: 10px;
	height: 1px;
	background: var(--c-deco);
}
.prose ol { counter-reset: prose-ol; }
.prose ol > li::before {
	counter-increment: prose-ol;
	content: counter(prose-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--od-serif);
	font-size: var(--t-small);
	color: var(--c-deco-ink);
	width: auto;
	height: auto;
	background: none;
}
.prose a {
	color: inherit;
	border-bottom: 1px solid var(--c-line-strong);
	transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.prose a:hover, .prose a:focus-visible { color: var(--c-accent); border-color: var(--c-accent); }
.prose strong, .prose b { font-weight: 500; }

/* Liste de faits juridiques (identite legale, hebergeur...) - une donnee
 * par ligne, bordee, jamais un paragraphe dense. */
.fact-list {
	max-width: var(--measure);
	margin: var(--sp-2) 0 var(--sp-6);
	padding: 0;
	border-top: 1px solid var(--c-line);
}
/* Specificite : .fact-list est un <ul> a l'interieur de .prose, donc
 * `.prose ul > li` (bordure/puce doree, plus haut) le cible aussi. Les
 * selecteurs ici doivent gagner sur ce cascade partage, pas simplement
 * ajouter par-dessus - `.prose .fact-list > li` bat `.prose ul > li` en
 * specificite (deux classes contre une classe + un type). */
.prose .fact-list > li {
	list-style: none;
	padding: var(--sp-3) 0;
	margin: 0;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--t-small);
	color: var(--c-ink-soft);
}
.prose .fact-list > li::before { content: none; }

/* Encart de mise en garde editoriale (ex. point a confirmer) - filet
 * gauche dore, jamais un simple paragraphe perdu dans le texte. */
.note-block {
	max-width: var(--measure);
	margin: var(--sp-6) 0;
	padding: var(--sp-4) var(--sp-5);
	border-left: 3px solid var(--c-deco);
	background: var(--c-bg-elev);
	border-radius: var(--r-sm);
	font-size: var(--t-small);
	color: var(--c-ink-soft);
}

/* ---------------------------------------------------------------------
 * PHOTO BORNEE - toute photographie editoriale hors bandeau plein
 * largeur reste plafonnee a 1100px, jamais etiree au-dela de sa
 * definition reelle (voir section 2 du plan d'execution).
 * --------------------------------------------------------------------- */
.ph--bound { max-width: 68.75rem; }

/* Photo separateur au format portrait (silhouettes) - une colonne etroite
 * centree plutot qu'un large cadre 16/9 qui ecraserait une composition
 * verticale. */
.ph--divider { max-width: 24rem; margin: 0 auto var(--sec-y); }

/* Rangee image + texte alternee (a-propos, nos engagements) */
.edit-split {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
	max-width: 68.75rem;
	margin-block: var(--sec-y);
}
@media (min-width: 61rem) {
	.edit-split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
	.edit-split--rev .edit-split__ph { order: 2; }
}
.edit-split__ph { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-sm); }
.edit-split__ph img { width: 100%; height: 100%; object-fit: cover; filter: var(--c-photo-filter); }
.edit-split__body h2 { margin-top: 0; }

/* Citation manuscrite accompagnee d'un portrait - registre manifeste */
.manifesto {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
	max-width: 68.75rem;
	margin-block: var(--sec-y);
}
@media (min-width: 61rem) { .manifesto { grid-template-columns: .8fr 1.2fr; gap: var(--sp-8); } }
.manifesto__ph { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-sm); }
.manifesto__ph img { width: 100%; height: 100%; object-fit: cover; filter: var(--c-photo-filter); }
.manifesto__quote { font-family: var(--od-serif); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -.01em; }

/* ---------------------------------------------------------------------
 * PILIERS - Nos engagements, 3 colonnes
 * --------------------------------------------------------------------- */
.pillars {
	display: grid;
	gap: 1px;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	overflow: hidden;
	margin-block: var(--sec-y);
}
@media (min-width: 48rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--c-bg); padding: clamp(1.25rem, 3vw, 2.25rem); }
.pillar__no {
	font-family: var(--od-serif);
	font-weight: 300;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1;
	color: var(--c-deco-ink);
}
.pillar h3 { margin: var(--sp-4) 0 var(--sp-2); }
.pillar p { font-size: var(--t-small); color: var(--c-ink-soft); }

/* ---------------------------------------------------------------------
 * CONTACT
 * --------------------------------------------------------------------- */
.contact-layout {
	display: grid;
	gap: var(--sp-8);
	margin-block: var(--sec-y);
}
@media (min-width: 61rem) { .contact-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

.contact-info__item { margin-bottom: var(--sp-6); }
.contact-info__item .u-caps { display: block; margin-bottom: var(--sp-2); }
.contact-info__item p, .contact-info__item a { font-size: var(--t-body); }
.contact-info__item a:not(.btn) { border-bottom: 1px solid var(--c-line-strong); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.contact-info__item a:not(.btn):hover { color: var(--c-accent); border-color: var(--c-accent); }

.contact-socials { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

.contact-form { display: grid; gap: var(--sp-5); }
.contact-form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { .contact-form__row { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------
 * RESULTATS DE RECHERCHE
 * --------------------------------------------------------------------- */
.search-form { display: flex; gap: var(--sp-3); max-width: 34rem; margin-block: var(--sp-6); }
.search-form .input { flex: 1; }

.results-count { font-size: var(--t-small); color: var(--c-ink-soft); margin-bottom: var(--sp-5); }

.results-list { border-top: 1px solid var(--c-line); margin-bottom: var(--sec-y); }
.result-item {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	padding-block: var(--sp-5);
	border-bottom: 1px solid var(--c-line);
}
.result-item__ph {
	flex: 0 0 auto;
	width: 5.5rem;
	aspect-ratio: 4 / 5;
	background: var(--c-plate);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	overflow: hidden;
	display: grid;
	place-items: center;
}
.result-item__ph img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.result-item__body { min-width: 0; }
.result-item__type { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--c-deco-ink); }
.result-item__title { margin: var(--sp-1) 0; }
.result-item__title a { color: inherit; }
.result-item__title a:hover { color: var(--c-accent); }
.result-item__excerpt { font-size: var(--t-small); color: var(--c-ink-soft); max-width: var(--measure); }
.result-item__price { font-weight: 500; margin-top: var(--sp-2); }

/* ---------------------------------------------------------------------
 * ETAT VIDE (404, recherche sans resultat) - habille .empty (components.css)
 * --------------------------------------------------------------------- */
.empty-wrap { padding-block: var(--sec-y); display: flex; justify-content: center; }
.empty-wrap .empty { max-width: 40rem; width: 100%; }