/*
 * Connexion, compte et paiement — maquette V2.1 lot 2 (§21 à §23). Valeurs prises dans le fichier
 * « Site Havvaa - V2.1 lot 2 (autonome).html » (desktop 1280, mobile 390). En-tête, fil d'Ariane,
 * bannière et pied de page : ceux du lot 1 (chrome.css).
 */

/* ---------- la carte centrée (connexion, accès verrouillé, retour de paiement) ---------- */
.hv-carte-centree { padding: 72px var(--hv-marge) 128px; }
.hv-carte-centree--paiement { padding-top: 96px; }
.hv-cc-carte {
	max-width: 480px; margin: 0 auto; background: var(--hv-blanc); border: 1px solid var(--hv-filet); border-radius: 28px;
	padding: 48px 48px 40px; display: flex; flex-direction: column; gap: 24px;
}
.hv-carte-centree--large .hv-cc-carte { max-width: 520px; }
.hv-cc-tete { display: flex; flex-direction: column; gap: 12px; }
.hv-cc-titre { margin: 0; font-family: var(--hv-prata); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; color: var(--hv-encre); }
.hv-cc-texte { margin: 0; font-size: 16px; line-height: 1.55; color: var(--hv-secondaire); text-wrap: pretty; }
.hv-cc-texte strong { font-weight: 600; color: var(--hv-encre); }
.hv-cc-eyebrow { margin: 0; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--hv-bordeaux); }
.hv-cc-petit { margin: 0; font-size: 13.5px; color: var(--hv-meta); }
.hv-cc-note { margin: 0; padding-top: 20px; text-align: center; font-size: 13.5px; color: var(--hv-meta); }
.hv-cc-encart { margin: 0; background: var(--hv-creme); border-radius: 16px; padding: 14px 18px; font-size: 14px; line-height: 1.5; color: var(--hv-secondaire); }
.hv-cc-encart a { color: inherit; text-decoration: underline; text-decoration-color: rgba(74, 55, 57, 0.35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.hv-cc-actions { display: flex; flex-direction: column; gap: 12px; }
.hv-cc-actions--serre { gap: 8px; }
.hv-cc-liens { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 28px; }
.hv-cc-lien {
	min-height: 44px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
	font-family: var(--hv-jakarta); font-size: 14.5px; font-weight: 600; color: var(--hv-bordeaux);
	text-decoration: underline; text-decoration-color: rgba(124, 31, 42, 0.35); text-underline-offset: 4px;
}
.hv-cc-attente { min-height: 44px; display: flex; align-items: center; font-size: 14.5px; color: var(--hv-meta); }
.hv-cc-confirmation {
	align-self: flex-start; display: flex; align-items: center; gap: 8px; margin: 0;
	background: var(--hv-rose); color: var(--hv-bordeaux-profond); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 600;
}
.hv-cc-adresse { margin: 0; background: var(--hv-rose); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.hv-cc-adresse-libelle { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--hv-bordeaux-profond); }
.hv-cc-adresse b { font-size: 17px; font-weight: 600; color: var(--hv-encre); overflow-wrap: anywhere; }
.hv-cc-picto { width: 56px; height: 56px; border-radius: 50%; background: var(--hv-rose); color: var(--hv-bordeaux); display: flex; align-items: center; justify-content: center; }
.hv-cc-attente-rond { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--hv-rose); border-top-color: var(--hv-bordeaux); box-sizing: border-box; animation: hv-tourne 0.9s linear infinite; }
.hv-cc-vivant { display: flex; flex-direction: column; gap: 24px; }

/* Les boutons de la carte : 56 px, pleine largeur. */
.hv-bouton--carte { min-height: 56px; }
.hv-bouton[aria-disabled="true"], .hv-bouton[aria-disabled="true"]:hover { background: #E3D3C9; color: #8A7476; cursor: default; }
.hv-bouton[aria-busy="true"] { pointer-events: none; }
.hv-bouton[aria-busy="true"]::before {
	content: ""; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
	border: 2px solid rgba(252, 247, 240, 0.35); border-top-color: var(--hv-creme); animation: hv-tourne 0.9s linear infinite;
}
@keyframes hv-tourne { to { transform: rotate(360deg); } }
/* Pendant l'envoi : le champ se fige, le lien d'aide se retire (maquette « envoi en cours »). */
.hv-cx-form:has([aria-busy="true"]) .hv-champ-saisie { background: var(--hv-creme); color: var(--hv-meta); }
.hv-cc-carte:has(.hv-cx-form [aria-busy="true"]) .hv-cc-liens { display: none; }
@media (prefers-reduced-motion: reduce) {
	.hv-bouton[aria-busy="true"]::before, .hv-cc-attente-rond { animation: none; }
}

/* Champ et alerte. */
.hv-cx-form { display: flex; flex-direction: column; gap: 24px; }
.hv-champ { display: flex; flex-direction: column; gap: 8px; }
.hv-champ-libelle { font-size: 13.5px; font-weight: 600; color: var(--hv-encre); }
.hv-champ-saisie {
	height: 56px; width: 100%; box-sizing: border-box; border-radius: 16px; background: var(--hv-blanc);
	border: 1.5px solid #D9C7BD; padding: 0 18px; font-family: var(--hv-jakarta); font-size: 16px; color: var(--hv-encre);
}
.hv-champ-saisie::placeholder { color: #9A8587; }
.hv-champ-saisie:focus { outline: none; border: 2px solid var(--hv-bordeaux); padding: 0 17.5px; box-shadow: 0 0 0 4px rgba(124, 31, 42, 0.12); }
.hv-champ-saisie[aria-invalid="true"] { border: 2px solid var(--hv-bordeaux); padding: 0 17.5px; }
.hv-champ + .hv-alerte { margin-top: -14px; }
.hv-alerte { margin: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--hv-bordeaux); font-weight: 500; }
.hv-alerte-picto {
	width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--hv-bordeaux); box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}

/* Le code à 6 chiffres. */
.hv-cx-saisie { display: flex; flex-direction: column; gap: 10px; }
.hv-cx-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.hv-cx-code input {
	height: 62px; width: 100%; min-width: 0; box-sizing: border-box; border-radius: 14px; background: var(--hv-blanc);
	border: 1.5px solid #D9C7BD; text-align: center; padding: 0; font-family: var(--hv-jakarta); font-size: 24px; font-weight: 600;
	font-variant-numeric: tabular-nums; color: var(--hv-encre);
}
.hv-cx-code input:focus { outline: none; border: 2px solid var(--hv-bordeaux); box-shadow: 0 0 0 4px rgba(124, 31, 42, 0.12); }
.hv-cx-code--invalide input { border: 2px solid var(--hv-bordeaux); }
.hv-cx-code[data-hv-code-selection] input { background: var(--hv-rose); }
.hv-cx-code--inerte input { background: var(--hv-creme); }

/* ---------- en-tête connectée : « Mon espace ▾ » ---------- */
.hv-compte { position: relative; }
.hv-compte-bouton {
	height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
	font-family: var(--hv-jakarta); font-size: 14px; font-weight: 600; color: var(--hv-bordeaux);
}
.hv-compte-bouton[aria-expanded="true"] .hv-chevron { transform: rotate(180deg); }
.hv-compte-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 300px; box-sizing: border-box;
	background: var(--hv-blanc); border: 1px solid var(--hv-filet); border-radius: 24px;
	box-shadow: 0 30px 60px -40px rgba(42, 26, 28, 0.45); padding: 10px 0;
}
.hv-compte-menu ul { list-style: none; margin: 0; padding: 0; }
.hv-compte-identite { margin: 0; padding: 10px 20px; font-size: 13px; color: var(--hv-meta); overflow-wrap: anywhere; }
.hv-compte-lien { min-height: 48px; padding: 0 20px; display: flex; align-items: center; text-decoration: none; color: var(--hv-encre); font-size: 15px; font-weight: 600; }
.hv-compte-menu .hv-compte-sortie { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hv-filet); margin-inline: 20px; }
.hv-compte-menu .hv-compte-sortie .hv-compte-lien { padding-inline: 0; color: var(--hv-secondaire); font-weight: 500; }

/* Menu mobile, connectée : identité et entrées du compte sous la navigation. */
.hv-mob-compte { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hv-filet); display: flex; flex-direction: column; gap: 2px; }
.hv-mob-compte ul { list-style: none; margin: 0; padding: 0; }
.hv-mob-compte-identite { display: flex; align-items: center; gap: 12px; margin: 0; padding-bottom: 8px; font-size: 13.5px; color: var(--hv-meta); overflow-wrap: anywhere; }
.hv-initiale {
	flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--hv-rose); color: var(--hv-bordeaux);
	font-family: var(--hv-prata); font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.hv-mob-compte-lien { min-height: 48px; display: flex; align-items: center; text-decoration: none; color: var(--hv-encre); font-size: 16px; font-weight: 600; }
.hv-mob-compte .hv-compte-sortie .hv-mob-compte-lien { color: var(--hv-secondaire); font-weight: 500; }

/* ---------- Mon espace (§22) : navigation du compte à gauche, contenu à droite ---------- */
.hv-espace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 48px; padding-bottom: 128px; }
.hv-espace-nav { display: flex; flex-direction: column; gap: 24px; }
.hv-espace-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hv-espace-identite { display: flex; align-items: center; gap: 14px; }
.hv-initiale--grande { width: 56px; height: 56px; font-size: 24px; }
.hv-espace-identite-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-espace-identite-texte b { font-size: 16px; font-weight: 600; color: var(--hv-encre); }
.hv-espace-identite-texte span { font-size: 13px; color: var(--hv-meta); overflow-wrap: anywhere; }
.hv-espace-nav-titre { display: none; margin: 0; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--hv-meta); }
.hv-espace-lien {
	min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 14px; border: 1px solid transparent;
	display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--hv-encre);
}
.hv-espace-lien[aria-current="page"] { font-weight: 600; color: var(--hv-bordeaux); border-color: var(--hv-filet); background: var(--hv-blanc); }
.hv-espace-chevron { display: none; flex: 0 0 auto; color: var(--hv-meta); }
.hv-espace-nav .hv-compte-sortie { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hv-filet); margin-inline: 16px; }
.hv-espace-lien--sortie { padding-inline: 0; color: var(--hv-secondaire); }
.hv-espace-corps { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hv-espace-titre { margin: 0; font-family: var(--hv-prata); font-weight: 400; font-size: 44px; line-height: 1.1; color: var(--hv-encre); }
.hv-espace-contenu > * + * { margin-top: 28px; }

.hv-espace-accueil { display: flex; flex-direction: column; gap: 28px; }
.hv-espace-accueil-tete { display: flex; flex-direction: column; gap: 8px; }
.hv-espace-bonjour { margin: 0; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--hv-meta); }
.hv-espace-accueil-titre { margin: 0; font-family: var(--hv-prata); font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--hv-encre); }
.hv-espace-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hv-espace-carte { background: var(--hv-blanc); border: 1px solid var(--hv-filet); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.hv-espace-carte-etat { margin: 0; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--hv-bordeaux); }
.hv-espace-carte-titre { margin: 0; font-family: var(--hv-prata); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--hv-encre); }
.hv-espace-carte-texte { margin: 0; font-size: 15px; line-height: 1.5; color: var(--hv-secondaire); }
.hv-espace-carte-action { margin: auto 0 0; padding-top: 12px; display: flex; }
.hv-bouton--carte-espace { min-height: 48px; padding: 0 28px; font-size: 12.5px; }

/* Mes formations. */
.hv-formations { display: flex; flex-direction: column; gap: 16px; }
.hv-formation { background: var(--hv-blanc); border: 1px solid var(--hv-filet); border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.hv-formation-media { position: relative; min-height: 180px; background: var(--hv-rose); border-radius: 0; }
.hv-formation-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-formation-texte { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.hv-formation-eyebrow { margin: 0; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--hv-bordeaux); }
.hv-formation-titre { margin: 0; font-family: var(--hv-prata); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--hv-encre); }
.hv-formation-progres { display: flex; flex-direction: column; gap: 8px; }
.hv-formation-barre { height: 6px; border-radius: 999px; background: var(--hv-filet); overflow: hidden; }
.hv-formation-barre span { display: block; height: 100%; background: var(--hv-bordeaux); border-radius: 999px; }
.hv-formation-etat { margin: 0; font-size: 13.5px; color: var(--hv-meta); }
.hv-formation-action { margin: auto 0 0; padding-top: 6px; display: flex; }
.hv-formation-action .hv-bouton { min-height: 44px; }
.hv-formation-action .hv-bouton--contour { padding: 0 24px; }

/* Mes téléchargements. */
.hv-telechargements { list-style: none; margin: 0; padding: 0; background: var(--hv-blanc); border: 1px solid var(--hv-filet); border-radius: 24px; overflow: hidden; }
.hv-telechargement { padding: 20px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.hv-telechargement + .hv-telechargement { border-top: 1px solid var(--hv-filet); }
.hv-telechargement-texte { display: flex; flex-direction: column; gap: 4px; }
.hv-telechargement-titre { margin: 0; font-family: var(--hv-prata); font-size: 21px; line-height: 1.25; color: var(--hv-encre); }
.hv-telechargement-meta { margin: 0; font-size: 13.5px; color: var(--hv-meta); }
.hv-telechargement-bouton { min-height: 44px; padding: 0 24px; }
.hv-telechargement-bouton-court { display: none; }

@media (max-width: 1023px) {
	.hv-espace { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 20px; padding-bottom: 72px; }
	.hv-espace-corps { order: 1; gap: 22px; }
	.hv-espace-nav { order: 2; display: none; gap: 12px; padding-top: 12px; }
	.hv-espace-nav--accueil { display: flex; }
	.hv-espace-identite { display: none; }
	.hv-espace-nav-titre { display: block; }
	.hv-espace-nav ul { gap: 0; background: var(--hv-blanc); border: 1px solid var(--hv-filet); border-radius: 22px; overflow: hidden; }
	.hv-espace-nav li + li { border-top: 1px solid var(--hv-filet); }
	.hv-espace-nav li:has(> [aria-current="page"]) { display: none; }
	.hv-espace-nav li:has(> [aria-current="page"]) + li { border-top: 0; }
	.hv-espace-lien, .hv-espace-lien[aria-current="page"] { min-height: 56px; padding: 0 20px; border: 0; border-radius: 0; font-size: 16px; font-weight: 600; background: none; color: var(--hv-encre); }
	.hv-espace-chevron { display: block; }
	.hv-espace-nav .hv-compte-sortie { margin: 0; padding: 0; }
	.hv-espace-lien--sortie { padding: 0 20px; font-weight: 500; color: var(--hv-secondaire); }
	.hv-espace-titre { font-size: 36px; }
	.hv-espace-accueil { gap: 22px; }
	.hv-espace-accueil-titre { font-size: 26px; }
	.hv-espace-cartes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.hv-espace-carte { padding: 24px 22px; }
	.hv-espace-carte-titre { font-size: 24px; }
	.hv-formations { gap: 12px; }
	.hv-formation { grid-template-columns: 96px minmax(0, 1fr); border-radius: 22px; }
	.hv-formation-media { min-height: 168px; }
	.hv-formation-texte { padding: 18px; }
	.hv-formation-titre { font-size: 20px; }
	.hv-telechargements { border-radius: 22px; }
	.hv-telechargement { padding: 18px 20px; }
	.hv-telechargement-titre { font-size: 19px; }
}
@media (max-width: 599px) {
	.hv-telechargement-bouton-long { display: none; }
	.hv-telechargement-bouton-court { display: inline; }
}

/* ---------- mobile ---------- */
@media (max-width: 599px) {
	.hv-carte-centree { padding: 28px 16px 72px; }
	.hv-cc-carte { border-radius: 24px; padding: 32px 22px 26px; }
	.hv-cc-titre { font-size: 32px; }
	.hv-cx-saisie { gap: 12px; }
	.hv-cx-code { gap: 8px; }
	.hv-cx-code input { height: 56px; }
}