/*
 * Havvaa V2.1 — socle (tokens, typographie, primitives).
 * Référence : design-sources/v2.1/HANDOFF_DEV.md et le prototype (sections 4, 18, 19).
 * Les valeurs viennent des tokens de theme.json (variables --wp--preset--*) ; les alias ci-dessous
 * ne servent qu'à la lisibilité. Chargé sur le site ET dans l'éditeur.
 */

:root {
	--hv-bordeaux: var(--wp--preset--color--bordeaux, #7C1F2A);
	--hv-bordeaux-profond: var(--wp--preset--color--bordeaux-profond, #52121C);
	--hv-creme: var(--wp--preset--color--creme, #FCF7F0);
	--hv-blanc: #FFFFFF;
	--hv-rose: var(--wp--preset--color--rose-argile, #F1DAD3);
	--hv-encre: var(--wp--preset--color--encre, #2A1A1C);
	--hv-encre-2: var(--wp--preset--color--encre-2, #3B2B2D);
	--hv-secondaire: var(--wp--preset--color--secondaire, #4A3739);
	--hv-meta: var(--wp--preset--color--meta, #6B5557);
	--hv-filet: var(--wp--preset--color--filet, #EFE2D6);
	--hv-filet-fort: var(--wp--preset--color--filet-fort, #D9C7BD);
	--hv-rose-sur-bordeaux: #F2D8D2;
	--hv-texte-sur-bordeaux: #F7E6E1;
	--hv-voile-bordeaux: rgba(124, 31, 42, 0.92);
	--hv-voile-encre: rgba(42, 26, 28, 0.9);
	--hv-image-vide: #E9D2CA;

	--hv-prata: var(--wp--preset--font-family--prata, "Prata", Georgia, serif);
	--hv-newsreader: var(--wp--preset--font-family--newsreader, "Newsreader", Georgia, serif);
	--hv-jakarta: var(--wp--preset--font-family--jakarta, "Plus Jakarta Sans", system-ui, sans-serif);

	--hv-display: 44px; /* paliers de la maquette : 72 dès 1024, 44 en dessous */
	--hv-h1: 40px; /* prototype : 60 dès 1024, 48 de 600 à 1023, 40 en dessous */
	--hv-h2: 32px; /* prototype : 44 dès 1024, 38 de 600 à 1023, 32 en dessous */
	--hv-h2-lecture: 26px; /* prototype : 32 / 28 / 26 */
	--hv-h3-lecture: 21px; /* 24 / 22 / 21 */
	--hv-titre-carte: clamp(18px, 0.8vw + 10px, 28px);
	--hv-lead: clamp(17px, 0.5vw + 14px, 23px);
	--hv-lecture: 17.5px; /* 19 / 18 / 17,5 */
	--hv-prix: clamp(36px, 1vw + 24px, 48px);

	--hv-ombre-ecran: 0 40px 70px -40px rgba(42, 26, 28, 0.55);
	--hv-ombre-carte: 0 30px 60px -40px rgba(42, 26, 28, 0.45);

	--hv-marge: 112px; /* ordinateur : l'élément le plus large (CTA final, hero) est à 64 px du bord ; le reste garde son retrait de la maquette (+48) */
	--hv-section: 128px;
	/* Décision du 13/10 : marges fixes, le contenu prend toute la largeur restante ; garde-fou : écran de 1920 px au plus. */
	--hv-conteneur: 1696px; /* 1920 − 2 × 112 */
	--hv-rayon-carte: 24px;
	--hv-rayon-surface: 32px;
}
@media (min-width: 600px) { :root { --hv-h2: 38px; --hv-h1: 48px; --hv-h2-lecture: 28px; --hv-h3-lecture: 22px; --hv-lecture: 18px; } }
@media (min-width: 1024px) { :root { --hv-h2: 44px; --hv-h1: 60px; --hv-h2-lecture: 32px; --hv-h3-lecture: 24px; --hv-lecture: 19px; } }
@media (min-width: 1024px) { :root { --hv-display: 72px; } }

/* Page sans élément plus large (ni CTA final, ni hero, ni image pleine largeur) : le contenu est lui-même le plus large, à 64 px. */
@media (min-width: 1024px) {
	body:not(:has(.hv-b-cta-final, .hv-seuil, .hv-b-hero, .hv-b-image-large)) { --hv-marge: 64px; --hv-conteneur: 1792px; }
}
@media (max-width: 1023px) {
	:root { --hv-marge: 32px; --hv-section: 88px; --hv-rayon-surface: 28px; }
}
@media (max-width: 599px) {
	:root { --hv-marge: 20px; --hv-section: 64px; --hv-rayon-carte: 20px; --hv-rayon-surface: 26px; }
}
@media (max-width: 360px) {
	:root { --hv-marge: 16px; }
}

/* ---------- socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
	margin: 0;
	background: var(--hv-creme);
	color: var(--hv-encre);
	font-family: var(--hv-jakarta);
	font-size: 15px;
	line-height: normal; /* maquette : interligne normal pour l'interface ; les textes de lecture fixent le leur */
	overflow-x: hidden;
}
/* Lissage du texte : celui du navigateur, comme la maquette (Tutor LMS impose « antialiased » sur body, qui affine tout). */
html body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
img, video, svg { max-width: 100%; height: auto; }
main { display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--hv-prata); font-weight: 400; margin: 0; } /* pas d'équilibrage par défaut : le prototype ne l'applique qu'à certains titres */
p { margin: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks { padding: 0; }

/* Liens : bordeaux, soulignement discret. */
a { color: var(--hv-bordeaux); text-decoration-color: rgba(124, 31, 42, 0.35); text-underline-offset: 3px; }

/* Focus visible : anneau 2 px bordeaux, décalé de 3 px ; crème sur fond sombre (§19). */
:focus-visible { outline: 2px solid var(--hv-bordeaux); outline-offset: 3px; }
.hv-sombre :focus-visible, .hv-sur-bordeaux :focus-visible { outline-color: var(--hv-creme); }
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text, .hv-lecteur-seul {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hv-lien-evitement:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; margin: 0;
	padding: 12px 18px; background: var(--hv-blanc); border-radius: 999px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- mise en page ---------- */
.hv-conteneur { width: 100%; max-width: calc(var(--hv-conteneur) + 2 * var(--hv-marge)); margin-inline: auto; padding-inline: var(--hv-marge); }
.hv-colonne { width: 100%; max-width: calc(var(--hv-conteneur) + 2 * var(--hv-marge)); margin-inline: auto; padding-inline: var(--hv-marge); }
.hv-section { padding-top: var(--hv-section); }
.hv-section--serree { padding-top: calc(var(--hv-section) * 0.6); }
.hv-pile { display: flex; flex-direction: column; }

/* ---------- typographie ---------- */
.hv-eyebrow {
	font-family: var(--hv-jakarta); font-size: 11px; line-height: normal; letter-spacing: 0.24em; text-transform: uppercase;
	font-weight: 700; color: var(--hv-bordeaux); margin: 0;
}
.hv-eyebrow--petit { font-size: 10.5px; } /* prototype : eyebrow(…, 10.5), même espacement 0.24em */
.hv-eyebrow--meta { color: var(--hv-meta); }
.hv-eyebrow--profond { color: var(--hv-bordeaux-profond); }
.hv-display { font-family: var(--hv-prata); font-size: var(--hv-display); line-height: 1.02; letter-spacing: -0.015em; }
.hv-h1 { font-family: var(--hv-prata); font-size: var(--hv-h1); line-height: 1.04; letter-spacing: -0.015em; }
.hv-h2 { font-family: var(--hv-prata); font-size: var(--hv-h2); line-height: 1.1; letter-spacing: -0.01em; }
.hv-h2-lecture { font-family: var(--hv-prata); font-size: var(--hv-h2-lecture); line-height: 1.2; }
:where(.hv-prose) h3, h3.wp-block-heading { color: var(--hv-bordeaux-profond); } /* h3 de lecture ; les titres de cartes restent en encre */
.hv-h3-lecture { font-family: var(--hv-prata); font-size: var(--hv-h3-lecture); line-height: 1.25; color: var(--hv-bordeaux-profond); }
.hv-titre-carte { font-family: var(--hv-prata); font-size: var(--hv-titre-carte); line-height: 1.15; }
.hv-lead { font-family: var(--hv-newsreader); font-size: var(--hv-lead); line-height: 1.45; color: var(--hv-encre-2); text-wrap: pretty; }
.hv-lecture { font-family: var(--hv-newsreader); font-size: var(--hv-lecture); line-height: 1.65; color: var(--hv-encre-2); text-wrap: pretty; }
.hv-ui { font-size: 15px; line-height: 1.55; color: var(--hv-secondaire); }
.hv-meta { display: flex; flex-wrap: nowrap; gap: 4px 10px; font-size: 12.5px; line-height: normal; color: var(--hv-meta); margin: 0; }
.hv-meta > :first-child.hv-meta-territoire, .hv-meta-territoire { font-weight: 600; color: var(--hv-bordeaux); }
.hv-meta-sep { color: var(--hv-meta); }
.hv-tabulaire { font-variant-numeric: tabular-nums; }

/* ---------- boutons (pilules ; cibles ≥ 44 px, actions principales 52–58) ---------- */
.hv-bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0;
	font-family: var(--hv-jakarta); font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap; cursor: pointer; text-align: center;
	background: var(--hv-bordeaux); color: var(--hv-creme);
}
.hv-bouton:hover { background: var(--hv-bordeaux-profond); color: var(--hv-creme); }
.hv-bouton--grand { min-height: 58px; padding: 0 34px; font-size: 14px; }
.hv-bouton--creme { background: var(--hv-creme); color: var(--hv-bordeaux); box-shadow: 0 10px 30px -12px rgba(20, 6, 8, 0.6); }
.hv-bouton--creme:hover { background: var(--hv-blanc); color: var(--hv-bordeaux-profond); }
.hv-bouton--contour { background: transparent; color: var(--hv-bordeaux); border: 1.5px solid var(--hv-bordeaux); }
.hv-bouton--contour:hover { background: var(--hv-bordeaux); color: var(--hv-creme); }
.hv-bouton--doux { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; }
.hv-bouton--large { width: 100%; }
@media (max-width: 599px) { .hv-bouton { white-space: normal; } }

/* Lien de sortie « Tous les … → » : souligné, 44 px de haut. */
.hv-lien-sortie { /* prototype mmAll() : menus, playlist, fin d'article */
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap;
	font-size: 15px; font-weight: 600; color: var(--hv-bordeaux);
	text-decoration: underline; text-decoration-color: rgba(124, 31, 42, 0.35); text-underline-offset: 4px;
}
/* prototype link() : têtes de section (territoires, épisodes) — 14 px, sans soulignement */
.hv-tete-section .hv-lien-sortie, .hv-b-episodes-suite .hv-lien-sortie { gap: 4px; min-height: 0; font-size: 14px; text-decoration: none; }
.hv-fin-article-section .hv-tete-section .hv-lien-sortie { gap: 8px; min-height: 44px; font-size: 15px; text-decoration: underline; }
.hv-lien-fleche { font-size: 14px; font-weight: 600; color: var(--hv-bordeaux); text-decoration: none; display: inline-flex; align-items: center; } /* prototype link() */

/* Cercle fléché (tuiles) : décoratif. */
.hv-rond-fleche {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor;
	display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1;
}
.hv-rond-fleche--petit { width: 36px; height: 36px; font-size: 14px; }

/* Bouton lecture (podcast). */
.hv-play {
	flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
	display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1;
	background: var(--hv-rose); color: var(--hv-bordeaux); text-decoration: none; cursor: pointer;
}
.hv-play--creme { background: var(--hv-creme); color: var(--hv-bordeaux); }
.hv-play--grand { width: 52px; height: 52px; }
.hv-play--petit { width: 40px; height: 40px; font-size: 11px; }

/* ---------- pilules (filtres, onglets légaux) ---------- */
.hv-pilules { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hv-pilule {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
	background: var(--hv-blanc); border: 1px solid var(--hv-filet); color: var(--hv-encre);
	font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.hv-pilule[aria-current], .hv-pilule.est-actif { background: var(--hv-rose); border-color: var(--hv-rose); color: var(--hv-bordeaux-profond); }
.hv-pilule { font-size: 13.5px; font-weight: 600; min-height: 40px; padding: 0 16px; } /* prototype pills() : 40 px, 13,5, à toutes les largeurs */

/* ---------- pagination ---------- */
.hv-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 8px; margin: 0; }
.hv-pagination > a, .hv-pagination > span {
	min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 600; background: var(--hv-blanc); border: 1px solid var(--hv-filet); color: var(--hv-encre); text-decoration: none;
}
.hv-pagination [aria-current] { background: var(--hv-rose); border-color: var(--hv-rose); color: var(--hv-bordeaux-profond); }
.hv-pagination .hv-pagination-ellipse { background: none; border: 0; color: var(--hv-meta); }
.hv-pagination-suite { display: none; }
.hv-pagination-etat { text-align: center; font-size: 12.5px; color: var(--hv-meta); padding-top: 10px; }

/* ---------- images ---------- */
.hv-media { position: relative; overflow: hidden; background: var(--hv-image-vide); }
.hv-media > img, .hv-media > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-media--sombre { background: var(--hv-encre-2); }
.hv-noir-et-blanc .hv-media > img { filter: grayscale(1); }

/* ---------- cartes ---------- */
.hv-carte { background: var(--hv-blanc); border: 1px solid var(--hv-filet); border-radius: var(--hv-rayon-carte); overflow: hidden; }
.hv-carte-lien { color: inherit; text-decoration: none; }
.hv-carte-lien:focus-visible .hv-titre-carte { text-decoration: underline; text-decoration-color: var(--hv-filet-fort); text-underline-offset: 4px; }

/* Tête de section : eyebrow + H2 44 (+ lien ou texte à droite). */
.hv-tete-section { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; flex-wrap: nowrap; margin-bottom: 36px; }
.hv-tete-section-titres { min-width: 0; }
@media (max-width: 1023px) { .hv-tete-section { gap: 16px; } }
@media (min-width: 1024px) { .hv-tete-section { flex-wrap: nowrap; } .hv-tete-section-titres { flex: 1 1 auto; } .hv-tete-section-cote, .hv-tete-section .hv-lien-sortie { flex: 0 0 auto; } }
.hv-tete-section-titres { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hv-tete-section-cote { font-family: var(--hv-newsreader); font-size: 18px; line-height: 1.5; color: var(--hv-secondaire); max-width: 34ch; }
@media (max-width: 1023px) { .hv-tete-section { margin-bottom: 22px; } .hv-tete-section-titres { gap: 10px; } .hv-tete-section-cote { display: none; } }
@media (max-width: 599px) { .hv-tete-section-cote { display: none; } .hv-tete-section { margin-bottom: 16px; } }

/* Contenu vide dans l'éditeur. */
.hv-editeur-vide { padding: 24px; border: 1px dashed var(--hv-filet-fort); border-radius: 16px; color: var(--hv-meta); font-size: 14px; text-align: center; }

/* Champ piège d'Entre Nous : hors de l'écran (le JS et aria-hidden font le reste). */
.hv-en-piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Le texte courant des contenus (paragraphes, listes) : la voix de lecture Newsreader. */
.wp-block-post-content > p, .wp-block-post-content > ul, .wp-block-post-content > ol,
.editor-styles-wrapper .is-root-container > p, .editor-styles-wrapper .is-root-container > ul, .editor-styles-wrapper .is-root-container > ol {
	font-family: var(--hv-newsreader); font-size: var(--hv-lecture); line-height: 1.65; color: var(--hv-encre-2);
}