/*
 * Havvaa V2.1 — chrome : bannière, en-tête (≥ 1024 : 72 px ; carte blanche quand un menu est
 * ouvert), menus Territoires et Ressources, en-tête mobile (60 px), menu mobile plein écran à deux
 * niveaux, pied de page à cinq colonnes. Valeurs : design-sources/v2.1/source/_gen/v21-app.js et v21-lib.js.
 */

/* ---------- bannière ---------- */
.hv-banniere { position: relative; min-height: 40px; padding: 8px 64px 8px 48px; background: var(--hv-rose); display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1.4; color: var(--hv-bordeaux-profond); text-align: center; }
.hv-banniere-texte { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; }
.hv-banniere-texte strong { font-weight: 600; }
.hv-banniere-lien { font-weight: 600; color: var(--hv-bordeaux); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.hv-banniere-texte--court { display: none; }
.hv-banniere-fermer { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: var(--hv-bordeaux-profond); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 999px; }
@media (max-width: 767px) {
	.hv-banniere { padding: 8px 48px 8px 16px; justify-content: flex-start; text-align: left; font-size: 12.5px; line-height: 1.35; }
	.hv-banniere-texte--long { display: none; }
	.hv-banniere-texte--court { display: flex; justify-content: flex-start; gap: 8px; }
	.hv-banniere-fermer { right: 0; font-size: 12px; }
}

/* ---------- en-tête ---------- */
.hv-entete { position: relative; z-index: 50; height: 72px; }
.hv-entete-carte { position: relative; background: transparent; }
.hv-entete-barre { height: 72px; padding: 0 48px; display: flex; align-items: center; gap: 24px; max-width: 1920px; margin: 0 auto; }
.hv-logo { text-transform: lowercase; font-family: var(--hv-prata); font-size: 24px; line-height: 1; color: var(--hv-bordeaux); text-decoration: none; flex: 0 0 auto; }
.hv-nav { margin-left: 20px; }
.hv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; align-items: center; }
.hv-nav-lien, .hv-nav-bouton { font-family: var(--hv-jakarta); font-size: 14.5px; font-weight: 500; color: var(--hv-encre); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.hv-nav-lien[aria-current], .hv-nav-bouton.est-actif, .hv-nav-bouton[aria-expanded="true"] { color: var(--hv-bordeaux); font-weight: 600; }
.hv-nav-bouton[aria-expanded="true"] .hv-chevron { transform: rotate(180deg); }
.hv-entete-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.hv-entete-lien { font-size: 14px; font-weight: 500; color: var(--hv-encre); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.hv-bouton--entete { min-height: 40px; padding: 0 22px; font-size: 14px; }
.hv-entete-mobile { display: none; }

/* La carte blanche du menu ouvert : posée sur la page, sans la déplacer. */
.hv-entete-carte.est-ouverte { position: absolute; left: 24px; right: 24px; top: 16px; background: var(--hv-blanc); border-radius: 28px; box-shadow: var(--hv-ombre-carte); }
.hv-entete-carte.est-ouverte .hv-entete-barre { height: 76px; padding: 0 32px; } /* prototype hdrCardOpen : la barre descend dans la carte (16 px) */
@media (min-width: 1425px) { .hv-entete-carte.est-ouverte { left: calc(50% - 688px); right: calc(50% - 688px); } }
.hv-mega { margin: 0 32px; border-top: 1px solid var(--hv-filet); padding: 32px 0 34px; }
.hv-mega-eyebrow { margin: 0 0 14px; }
.hv-mega-grille--territoires { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hv-mega-grille--ressources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.hv-mm-col { display: flex; flex-direction: column; gap: 10px; }
.hv-mm-tete { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.hv-mm-entrees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-mm-entree { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; margin: 0 -14px; border-radius: 14px; color: var(--hv-encre); text-decoration: none; }
.hv-mm-entree-titre { font-size: 16px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.hv-mm-entree-sous { font-size: 13.5px; line-height: 1.45; color: var(--hv-meta); }
.hv-mm-col .hv-lien-sortie { padding-top: 6px; }
.hv-mm-unes { display: flex; flex-direction: column; gap: 12px; }

/* Cartes « À la une » : 144 px, texte ancré en bas sur voile. */
.hv-une { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 144px; border-radius: 18px; overflow: hidden; text-decoration: none; background: var(--hv-encre); }
.hv-une--bordeaux { background: var(--hv-bordeaux); }
.hv-une-media { position: absolute; inset: 0; }
.hv-une-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 26, 28, 0) 15%, var(--hv-voile-encre) 100%); }
.hv-une--bordeaux .hv-une-media::after { background: linear-gradient(180deg, rgba(42, 26, 28, 0) 15%, var(--hv-voile-bordeaux) 100%); }
.hv-une-texte { position: relative; padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.hv-une-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--hv-rose-sur-bordeaux); }
.hv-une-titre { font-family: var(--hv-prata); font-size: 18px; line-height: 1.2; color: var(--hv-creme); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Cartes du menu Territoires : 300 px, cinq traitements. */
.hv-mt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 300px; border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--hv-creme); }
.hv-mt-media { position: absolute; inset: 0; }
.hv-mt-texte { position: relative; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.hv-mt-nom { font-family: var(--hv-prata); font-size: 22px; line-height: 1.15; }
.hv-mt-ligne { font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
.hv-mt--image-bordeaux .hv-mt-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(124, 31, 42, 0) 35%, var(--hv-voile-bordeaux) 100%); }
.hv-mt--image-encre .hv-mt-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 26, 28, 0) 30%, var(--hv-voile-encre) 100%); }
.hv-mt--image-bordeaux .hv-mt-ligne, .hv-mt--image-encre .hv-mt-ligne, .hv-mt--bordeaux .hv-mt-ligne { color: var(--hv-texte-sur-bordeaux); }
.hv-mt--rose { background: var(--hv-rose); color: var(--hv-encre); }
.hv-mt--rose .hv-mt-ligne, .hv-mt--blanc .hv-mt-ligne, .hv-mt--image-blanc .hv-mt-ligne { color: var(--hv-secondaire); }
.hv-mt--bordeaux-profond { background: var(--hv-bordeaux-profond); }
.hv-mt--bordeaux-profond .hv-mt-ligne, .hv-mt--encre .hv-mt-ligne { color: var(--hv-rose-sur-bordeaux); }
.hv-mt--bordeaux { background: var(--hv-bordeaux); }
.hv-mt--encre { background: var(--hv-encre); }
.hv-mt--blanc { background: var(--hv-blanc); border: 1px solid var(--hv-filet); color: var(--hv-encre); }
.hv-mt--image-blanc { background: var(--hv-blanc); border: 1px solid var(--hv-filet); color: var(--hv-encre); justify-content: flex-start; }
.hv-mt--image-blanc .hv-mt-media { position: relative; inset: auto; flex: 0 0 50%; }
.hv-mt--image-blanc .hv-mt-texte { flex: 1 1 auto; justify-content: flex-end; }

/* ---------- en-tête et menu mobile (< 1024) ---------- */
.hv-menu-mobile { display: none; }
@media (max-width: 1023px) {
	.hv-entete { height: 60px; }
	.hv-entete-barre { height: 60px; padding: 0 calc(var(--hv-marge) - 8px) 0 var(--hv-marge); gap: 4px; justify-content: space-between; }
	.hv-logo { font-size: 22px; }
	.hv-nav, .hv-entete-actions, .hv-mega { display: none !important; }
	.hv-entete-mobile { display: flex; align-items: center; gap: 4px; }
	.hv-bilan--mobile { min-height: 40px; padding: 0 16px; font-size: 13px; }
	.hv-burger { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
	.hv-burger span { width: 20px; height: 1.5px; background: var(--hv-encre); display: block; }
	.hv-menu-mobile:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 200; height: 100vh; height: 100dvh; background: var(--hv-creme); flex-direction: column; }
	.hv-banniere--menu { flex: 0 0 auto; }
	.hv-mob-barre { flex: 0 0 auto; height: 60px; padding: 0 8px 0 var(--hv-marge); display: flex; align-items: center; justify-content: space-between; }
	.hv-mob-fermer { width: 44px; height: 44px; border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--hv-encre); }
	.hv-mob-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; padding: 12px var(--hv-marge) 24px; }
	.hv-mob-corps::after { content: ""; position: sticky; display: block; bottom: -24px; height: 24px; margin-top: -24px; background: linear-gradient(0deg, var(--hv-creme), rgba(252, 247, 240, 0)); pointer-events: none; }
	.hv-mm-hauts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
	.hv-mm-haut { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 60px; padding: 0; border: 0; background: none; text-align: left; font-family: var(--hv-prata); font-size: 28px; line-height: 1.1; color: var(--hv-encre); text-decoration: none; cursor: pointer; }
	.hv-mm-haut svg { color: var(--hv-bordeaux); }
	.hv-mm-haut[aria-current] { color: var(--hv-bordeaux); }
	.hv-mob-retour { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--hv-bordeaux); cursor: pointer; }
	.hv-mob-ecran:not([data-hv-niveau1]) { display: flex; flex-direction: column; gap: 4px; }
	.hv-mob-ecran[hidden] { display: none !important; }
	.hv-mob-titre { font-family: var(--hv-prata); font-size: 30px; line-height: 1.1; padding-bottom: 8px; margin: 0; }
	.hv-mob-titre:focus { outline: none; }
	.hv-mob-ecran.est-entre { animation: hv-glisse 200ms ease-out; }
	.hv-mm-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
	.hv-mm-ligne { display: flex; align-items: center; gap: 16px; min-height: 76px; color: var(--hv-encre); text-decoration: none; }
	.hv-mm-ligne-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
	.hv-mm-ligne-titre { font-family: var(--hv-prata); font-size: 21px; line-height: 1.15; }
	.hv-mm-ligne-sous { font-size: 13px; line-height: 1.4; color: var(--hv-meta); }
	.hv-mm-vignette { position: relative; flex: 0 0 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--hv-rose); }
	.hv-mm-vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.hv-mt--bordeaux-profond.hv-mm-vignette { background: var(--hv-bordeaux-profond); }
	.hv-mt--bordeaux.hv-mm-vignette, .hv-mt--image-bordeaux.hv-mm-vignette { background: var(--hv-bordeaux); }
	.hv-mt--encre.hv-mm-vignette, .hv-mt--image-encre.hv-mm-vignette { background: var(--hv-encre); }
	.hv-mt--blanc.hv-mm-vignette, .hv-mt--image-blanc.hv-mm-vignette { background: var(--hv-blanc); border: 1px solid var(--hv-filet); }
	.hv-mt--image-bordeaux.hv-mm-vignette::after { content: ""; position: absolute; inset: 0; background: rgba(124, 31, 42, 0.35); }
	.hv-mt--image-encre.hv-mm-vignette::after { content: ""; position: absolute; inset: 0; background: rgba(42, 26, 28, 0.35); }
	.hv-mm-unes-mobile { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
	/* Ressources (lot 5, 13/10) : les mêmes liens que le desktop, en groupes empilés — Blog · Podcast · À la une · Guides. */
	.hv-mob-groupes { display: flex; flex-direction: column; gap: 28px; margin-top: -4px; } /* 8 px sous le titre (lot 5) : l'écran ajoute déjà 4 px entre ses éléments */
	.hv-mob-groupe { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
	.hv-mob-groupe > * { align-self: stretch; }
	.hv-mob-groupe > .hv-lien-sortie { align-self: flex-start; }
	.hv-mob-groupe-tete { min-height: 44px; display: flex; align-items: center; margin: 0; font-family: var(--hv-prata); font-size: 24px; font-weight: 400; line-height: 1.15; color: var(--hv-encre); text-decoration: none; }
	.hv-mob-entrees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
	.hv-mob-entree { min-height: 60px; padding: 8px 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; color: var(--hv-encre); text-decoration: none; }
	.hv-mob-entree-titre { font-size: 16px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
	.hv-mob-entree-sous { font-size: 13.5px; line-height: 1.4; color: var(--hv-meta); }
	.hv-mob-groupe--une { gap: 12px; }
	.hv-mob-groupe--une .hv-mm-unes { gap: 12px; }
	.hv-mob-bas { flex: 0 0 auto; padding: 14px var(--hv-marge) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hv-filet); display: flex; flex-direction: column; gap: 10px; background: var(--hv-creme); }
	.hv-mob-bas .hv-bilan-large { min-height: 52px; }
	.hv-mob-connexion { align-self: flex-start; min-height: 44px; padding: 0 22px; }
	html.hv-menu-ouvert { overflow: hidden; }
}
@keyframes hv-glisse { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hv-mob-ecran.est-entre { animation: hv-fondu 200ms; } }
@media (max-width: 360px) { .hv-mm-haut { font-size: 26px; min-height: 52px; } .hv-mm-ligne { min-height: 64px; } }

/* ---------- focus sur fond sombre (bordeaux, encre) ---------- */
.hv-sur-bordeaux :focus-visible, .hv-sombre :focus-visible, .hv-mt:focus-visible, .hv-une:focus-visible, .hv-tuile--image-bordeaux:focus-visible, .hv-tuile--image-encre:focus-visible, .hv-tuile--bordeaux-profond:focus-visible { outline-color: var(--hv-bordeaux); outline-offset: 3px; }
.hv-sur-bordeaux .hv-bouton--creme:focus-visible, .hv-sombre a:focus-visible, .hv-sombre button:focus-visible { outline-color: var(--hv-creme); }

/* ---------- pied de page ---------- */
.hv-pied { padding: 40px 64px 32px; display: flex; flex-direction: column; gap: 36px; max-width: 1920px; margin: 0 auto; }
.hv-pied-grille { display: grid; grid-template-columns: 1fr repeat(5, minmax(0, 1fr)); gap: 32px; }
.hv-pied-logo { font-size: 26px; align-self: start; }
.hv-pied-col { display: flex; flex-direction: column; gap: 10px; }
.hv-pied-titre { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--hv-meta); padding-bottom: 4px; margin: 0; }
.hv-pied-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hv-pied-col li { display: flex; }
.hv-pied-lien { font-size: 13.5px; color: var(--hv-encre); text-decoration: none; }
.hv-pied-lien[aria-current] { color: var(--hv-bordeaux); text-decoration: underline; }
.hv-pied-bas { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--hv-meta); border-top: 1px solid var(--hv-filet); padding-top: 20px; }
.hv-pied-bas p { margin: 0; }
@media (max-width: 1023px) { .hv-pied { padding: 32px 20px 24px; gap: 32px; } .hv-pied-grille { grid-template-columns: 1fr 1fr; gap: 28px 16px; } .hv-pied-logo { grid-column: 1 / -1; } .hv-pied-lien { font-size: 14px; } }
.hv-mm-col--une > .hv-eyebrow { min-height: 32px; display: flex; align-items: center; }