/*
Theme Name: Hurricane
Theme URI: https://www.hurricane-albi.com
Description: Le thème du club Hurricane Albi — autonome, sans constructeur de pages. « Nuit de match » : fond charbon, rouge réservé aux gestes qui comptent, lettrage athlétique.
Author: Refonte 2026
Version: 1.0
Text Domain: hurricane
*/

/* =========================================================================
   JETONS DE LA CHARTE
   ========================================================================= */

:root {
	--nuit:       #100D0E;
	--nuit-2:     #161112;
	--tribune:    #1B1517;
	--tribune-2:  #241C1E;
	--ligne:      #2F2628;
	--ligne-doux: #251E20;

	--craie:      #F4EFEA;
	--craie-2:    #D8CFC9;
	--gris:       #9C8F8A;
	--gris-2:     #6E6260;

	--rouge:      #E52440;
	--rouge-vif:  #FF3D57;
	--rouge-fond: #B30017;
	--vert:       #46B380;

	--display: "Anton", "Arial Narrow", Impact, sans-serif;
	--corps:   "Archivo", "Helvetica Neue", Arial, sans-serif;
	--mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--largeur: 1200px;
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--nuit);
	color: var(--craie-2);
	font-family: var(--corps);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--rouge); color: var(--craie); }

img { max-width: 100%; height: auto; display: inline-block; border-radius: 3px; }

a { color: var(--rouge-vif); text-underline-offset: 3px; }
a:hover { color: var(--rouge); }

h1, h2, h3 {
	font-family: var(--display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.04;
	color: var(--craie);
	text-wrap: balance;
	margin: 1.2em 0 .5em;
}
h1 { font-size: clamp(34px, 5.4vw, 56px); margin-top: 0; }
h2 { font-size: clamp(26px, 3.8vw, 40px); }
h3 { font-size: clamp(20px, 2.6vw, 27px); }
h4, h5, h6 { color: var(--craie); font-weight: 700; margin: 1.4em 0 .5em; }

strong, b { color: var(--craie); font-weight: 600; }

hr { border: none; border-top: 1px solid var(--ligne); margin: 2.2em 0; }

table { border-collapse: collapse; }
td, th { border-bottom: 1px solid var(--ligne-doux); padding: 9px 12px; }

blockquote {
	border-left: 3px solid var(--rouge);
	margin: 1.4em 0;
	padding: 4px 0 4px 18px;
	color: var(--gris);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
	outline: 2px solid var(--rouge-vif);
	outline-offset: 3px;
}

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

/* =========================================================================
   STRUCTURE
   ========================================================================= */

.hm-cadre {
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px);
}

.site-contenu { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 90px); }

/* Une page « pleine largeur » (l'accueil) gère elle-même ses marges */
.page-pleine .site-contenu { padding: 0 0 clamp(56px, 7vw, 90px); }
.page-pleine .hm-cadre { max-width: none; padding: 0; }

/* =========================================================================
   EN-TÊTE
   ========================================================================= */

.tete {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(16, 13, 14, .93);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ligne-doux);
}
.tete-int {
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px);
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 64px;
	flex-wrap: wrap;
}
.marque {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	padding: 8px 0;
}
.marque img { height: 36px; width: auto; border-radius: 0; }
.marque .nom {
	font-family: var(--display);
	font-size: 20px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--craie);
	white-space: nowrap;
}
.marque .nom span { color: var(--rouge); }

/* Navigation */
.nav-bascule { display: none; }
.nav-bouton {
	display: none;
	margin-left: auto;
	width: 44px; height: 44px;
	border: 1px solid var(--ligne);
	border-radius: 3px;
	background: none;
	cursor: pointer;
	position: relative;
}
.nav-bouton span, .nav-bouton span::before, .nav-bouton span::after {
	content: "";
	position: absolute;
	left: 11px; right: 11px;
	height: 2px;
	background: var(--craie);
	transition: transform .2s, opacity .2s;
}
.nav-bouton span { top: 21px; }
.nav-bouton span::before { top: -7px; left: 0; right: 0; }
.nav-bouton span::after { top: 7px; left: 0; right: 0; }

.nav-principale { margin-left: auto; }
.nav-principale ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	align-items: center;
}
.nav-principale a {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--craie-2);
	padding: 8px 0;
	display: inline-block;
	transition: color .15s;
}
.nav-principale a:hover,
.nav-principale .courant > a { color: var(--rouge-vif); }

/* Sous-menus */
.nav-principale li { position: relative; }
.nav-principale li ul {
	position: absolute;
	top: 100%; left: -14px;
	min-width: 240px;
	align-items: stretch;
	text-align: left;
	background: var(--tribune);
	border: 1px solid var(--ligne);
	border-radius: 3px;
	padding: 8px 0;
	display: none;
	flex-direction: column;
	gap: 0;
	box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.nav-principale li:hover > ul,
.nav-principale li:focus-within > ul { display: flex; }
.nav-principale li ul a { padding: 8px 16px; display: block; }

/* Mobile */
@media (max-width: 920px) {
	.nav-bouton { display: block; }
	.nav-principale {
		display: none;
		width: 100%;
		margin: 0;
		padding: 6px 0 16px;
	}
	.nav-bascule:checked ~ .nav-principale { display: block; }
	.nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-principale a { padding: 11px 4px; font-size: 13px; }
	.nav-principale li ul {
		position: static;
		display: flex;
		border: none;
		box-shadow: none;
		background: none;
		padding: 0 0 0 18px;
	}
	.nav-bascule:checked ~ .nav-bouton span { background: transparent; }
	.nav-bascule:checked ~ .nav-bouton span::before { transform: translateY(7px) rotate(45deg); }
	.nav-bascule:checked ~ .nav-bouton span::after { transform: translateY(-7px) rotate(-45deg); }
}

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */

.pied {
	border-top: 1px solid var(--ligne-doux);
	background: var(--nuit-2);
	padding: 36px 0 44px;
}
.pied-int {
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px 44px;
	align-items: center;
}
.pied .marque img { height: 34px; }
.pied-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-left: auto;
}
.pied-liens a {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris);
	text-decoration: none;
}
.pied-liens a:hover { color: var(--craie); }
.pied-bas {
	max-width: var(--largeur);
	margin: 22px auto 0;
	padding: 0 clamp(16px, 4vw, 40px);
	font-size: 13px;
	color: var(--gris-2);
}

/* =========================================================================
   COMPOSANTS DES CONTENUS
   ========================================================================= */

.hm-btn {
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	padding: 15px 26px;
	border-radius: 2px;
	display: inline-block;
	transition: background .15s, transform .15s;
}
.hm-btn-r { background: var(--rouge); color: var(--craie); }
.hm-btn-r:hover { background: var(--rouge-vif); color: var(--craie); transform: translateY(-2px); }
.hm-btn-l { border: 1px solid rgba(244,239,234,.35); color: var(--craie); }
.hm-btn-l:hover { border-color: var(--craie); color: var(--craie); transform: translateY(-2px); }

/* Anciennes pages : les styles écrits pour fond blanc passent au sombre */
.contenu [style*="background:#fff5f6"],
.contenu [style*="background: #fff5f6"] {
	background: rgba(229,36,64,.09) !important;
	border-color: var(--rouge) !important;
}
.contenu [style*="background:#f4f9f5"],
.contenu [style*="background: #f4f9f5"] {
	background: rgba(70,179,128,.10) !important;
	border-color: var(--vert) !important;
}
.contenu [style*="border: 1px solid #eee"],
.contenu [style*="border:1px solid #eee"],
.contenu [style*="border:2px dashed"] {
	border-color: var(--ligne) !important;
	background: var(--tribune);
}
.contenu [style*="color: #b30017"],
.contenu [style*="color:#b30017"] { color: var(--rouge-vif) !important; }
.contenu [style*="color: #555"], .contenu [style*="color:#555"],
.contenu [style*="color: #666"], .contenu [style*="color:#666"],
.contenu [style*="color: #777"], .contenu [style*="color:#777"] { color: var(--gris) !important; }
.contenu [style*="color: #222"], .contenu [style*="color:#222"],
.contenu [style*="color: #333"], .contenu [style*="color:#333"] { color: var(--craie) !important; }

/* Tarifs (raccourci hm_tarifs) */
.hm-tarifs h3 { color: var(--rouge) !important; }
.hm-ligne {
	background: var(--tribune);
	border: 1px solid var(--ligne-doux) !important;
	border-radius: 3px !important;
	padding: 14px 18px !important;
	display: flex; justify-content: space-between; align-items: center; gap: 14px;
	margin-bottom: 10px;
}
.hm-ligne .lib { color: var(--craie); display: flex; flex-direction: column; }
.hm-ligne .annees { color: var(--gris) !important; font-size: 13px; }
.hm-ligne .prix { color: var(--craie); font-weight: 700; white-space: nowrap; }
.hm-ligne.avantage { background: rgba(229,36,64,.07); border: 2px solid var(--rouge) !important; }

/* Tableau d'affichage (hm_matchs) */
.hm-matchs { background: var(--tribune); border: 1px solid var(--ligne-doux); border-radius: 3px; }
.hm-match { border-bottom: 1px solid var(--ligne-doux) !important; }
.hm-match .quand { color: var(--gris-2) !important; }
.hm-match .quand b { color: var(--gris) !important; }
.hm-match .nous { color: var(--craie) !important; }
.hm-match .eux { color: var(--craie-2) !important; }
.hm-match .score { color: var(--craie) !important; }
.hm-match .score .t { color: var(--gris-2) !important; }
.hm-verdict.v { background: rgba(70,179,128,.14) !important; color: var(--vert) !important; }
.hm-verdict.d { background: rgba(156,143,138,.12) !important; color: var(--gris) !important; }
.hm-verdict.a { background: rgba(229,36,64,.14) !important; color: var(--rouge-vif) !important; }

/* Photothèque */
.hm-alb { background: var(--tribune) !important; border: 1px solid var(--ligne-doux) !important; }
.hm-alb h3 { color: var(--craie) !important; font-size: 21px; margin: 0 0 4px; }
.hm-alb .meta { color: var(--gris) !important; }
.hm-alb-sur { color: var(--rouge-vif) !important; }
.hm-alb-vide { background: var(--tribune-2) !important; color: var(--gris-2) !important; }
.hm-grille-photos a { border-color: var(--ligne-doux) !important; }
.hm-credit { color: var(--gris) !important; }
.hm-rien { color: var(--gris) !important; }


/* =========================================================================
   COMPOSANTS DE PAGE — partagés par toutes les pages intérieures.
   Une page = un bandeau, de la prose, des blocs d'info, une rangée d'actions.
   ========================================================================= */

/* Bandeau d'ouverture avec photo */
.hm-ph {
	position: relative;
	/* 100vw inclut la barre de défilement : on retire sa largeur pour ne pas
	   provoquer de débordement horizontal sur mobile. */
	--barre: calc(100vw - 100%);
	margin: calc(-1 * clamp(28px, 4vw, 48px)) calc(50% - 50vw + var(--barre) / 2) clamp(30px, 4vw, 44px);
	width: calc(100vw - var(--barre));
	max-width: 100vw;
	min-height: clamp(240px, 38vh, 380px);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	overflow: hidden;
}
.hm-ph img.fond {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	filter: saturate(.85);
	border-radius: 0;
}
.hm-ph::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(16,13,14,.35), rgba(16,13,14,.45) 55%, var(--nuit) 100%);
}
.hm-ph-int {
	max-width: var(--largeur);
	margin: 0 auto;
	width: 100%;
	padding: 46px clamp(16px, 4vw, 40px) 26px;
}
.hm-ph .sur {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--craie-2);
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
}
.hm-ph .sur::before { content: ""; width: 36px; height: 2px; background: var(--rouge); flex: none; }
.hm-ph h1 { margin: 0; font-size: clamp(36px, 6.5vw, 72px); }

/* Prose : le texte courant d'une page */
.hm-prose { max-width: 70ch; }
.hm-prose p { margin: 0 0 18px; font-size: 17.5px; line-height: 1.7; }
.hm-prose .accroche { font-size: clamp(18px, 2.2vw, 21px); color: var(--craie); }

/* Fiche d'identité : les infos clés en tête de page équipe */
.hm-fiche {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 30px;
}
.hm-fiche span {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--craie-2);
	background: var(--tribune);
	border: 1px solid var(--ligne-doux);
	border-radius: 2px;
	padding: 8px 14px;
}
.hm-fiche span b { color: var(--rouge-vif); font-weight: 600; }

/* Rangée d'actions en bas de page */
.hm-cta2 {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 34px 0 8px;
}

/* Témoignage */
.hm-temoin {
	border-left: 3px solid var(--rouge);
	background: var(--tribune);
	border-radius: 0 3px 3px 0;
	padding: 22px 26px;
	margin: 30px 0;
	max-width: 70ch;
}
.hm-temoin p { margin: 0 0 8px; font-size: 17px; font-style: italic; color: var(--craie); line-height: 1.65; }
.hm-temoin cite {
	font-family: var(--mono);
	font-size: 11.5px;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris);
}

/* Horaires d'entraînement */
.hm-jours {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	margin: 26px 0;
}
.hm-jour {
	background: var(--tribune);
	border: 1px solid var(--ligne-doux);
	border-top: 3px solid var(--rouge);
	border-radius: 3px;
	padding: 20px 22px;
}
.hm-jour h3 { margin: 0 0 4px; font-size: 22px; }
.hm-jour .disc {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rouge-vif);
	display: block;
	margin-bottom: 14px;
}
.hm-jour ul { list-style: none; margin: 0; padding: 0; }
.hm-jour li { padding: 9px 0; border-top: 1px dashed var(--ligne); font-size: 15.5px; }
.hm-jour li:first-child { border-top: none; }
.hm-jour .h {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--craie);
	display: block;
}
.hm-jour .q { color: var(--gris); font-size: 14px; }

/* Vidéo 16:9 */
.hm-video {
	aspect-ratio: 16 / 9;
	max-width: 860px;
	margin: 30px 0;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--ligne-doux);
	background: var(--tribune);
}
.hm-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Hub d'équipes : réutilise les cartes de l'accueil */
.hm-hub {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin: 30px 0;
}
.hm-hub .hm-carte { min-height: 300px; }

/* Cartes (partagées avec l'accueil, définies ici pour toutes les pages) */
.hm-carte {
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	text-decoration: none;
	border: 1px solid var(--ligne-doux);
	min-height: 300px;
}
.hm-carte .fond {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center 22%;
	filter: saturate(.85);
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.hm-carte:hover .fond { transform: scale(1.045); }
.hm-carte::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(16,13,14,.93) 0%, rgba(16,13,14,.25) 58%, rgba(16,13,14,.12) 100%);
}
.hm-carte .corps { padding: 22px; width: 100%; }
.hm-carte .sur {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--rouge-vif);
	margin: 0 0 6px;
	display: block;
}
.hm-carte h3 {
	font-size: clamp(21px, 2.6vw, 28px);
	color: var(--craie);
	margin: 0 0 6px;
	line-height: 1;
}
.hm-carte p { font-size: 14.5px; color: var(--craie-2); margin: 0; max-width: 42ch; }

/* Bureau et encadrement */
.hm-gens {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin: 26px 0;
}
.hm-groupe {
	background: var(--tribune);
	border: 1px solid var(--ligne-doux);
	border-radius: 3px;
	padding: 22px 24px;
}
.hm-groupe h3 { margin: 0 0 14px; font-size: 21px; color: var(--rouge-vif); }
.hm-groupe dl { margin: 0; }
.hm-groupe dt {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin-top: 12px;
}
.hm-groupe dt:first-child { margin-top: 0; }
.hm-groupe dd { margin: 2px 0 0; color: var(--craie); font-weight: 500; }

/* Pages légales et longues : prose sobre */
.hm-legal { max-width: 74ch; }
.hm-legal h2 {
	font-size: clamp(21px, 2.6vw, 27px);
	color: var(--rouge-vif);
	border-bottom: 1px solid var(--ligne);
	padding-bottom: 8px;
	margin: 40px 0 14px;
}
.hm-legal h2:first-child { margin-top: 0; }
.hm-legal p, .hm-legal li { font-size: 16.5px; line-height: 1.7; }
.hm-legal .resume {
	background: var(--tribune);
	border-left: 3px solid var(--rouge);
	border-radius: 0 3px 3px 0;
	padding: 18px 22px;
	margin-bottom: 34px;
}


/* =========================================================================
   VISIONNEUSE PHOTO — plein écran, flèches, clavier
   ========================================================================= */

.hm-vis {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(10, 8, 8, .96);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hm-vis[hidden] { display: none; }
.hm-vis-img {
	max-width: min(92vw, 1400px);
	max-height: 88vh;
	object-fit: contain;
	border-radius: 3px;
	box-shadow: 0 20px 80px rgba(0, 0, 0, .7);
}
.hm-vis-fermer,
.hm-vis-nav {
	position: fixed;
	background: rgba(244, 239, 234, .08);
	border: 1px solid rgba(244, 239, 234, .22);
	color: var(--craie);
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .15s, border-color .15s;
	z-index: 201;
}
.hm-vis-fermer:hover,
.hm-vis-nav:hover { background: var(--rouge); border-color: var(--rouge); }
.hm-vis-fermer {
	top: 18px; right: 18px;
	width: 46px; height: 46px;
	font-size: 26px;
	line-height: 1;
}
.hm-vis-nav {
	top: 50%;
	transform: translateY(-50%);
	width: 54px; height: 54px;
	font-size: 34px;
	line-height: 1;
	padding-bottom: 4px;
}
.hm-vis-prec { left: 16px; }
.hm-vis-suiv { right: 16px; }
.hm-vis-compteur {
	position: fixed;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: .12em;
	color: var(--craie-2);
	background: rgba(10, 8, 8, .6);
	padding: 5px 14px;
	border-radius: 20px;
	margin: 0;
}
@media (max-width: 640px) {
	.hm-vis-nav { width: 44px; height: 44px; font-size: 26px; }
	.hm-vis-prec { left: 8px; }
	.hm-vis-suiv { right: 8px; }
	.hm-vis-img { max-width: 96vw; }
}


/* =========================================================================
   ENCARTS ET AIDES (page Adhésion)
   ========================================================================= */

.hm-encart {
	background: var(--tribune);
	border-left: 3px solid var(--rouge);
	border-radius: 0 3px 3px 0;
	padding: 22px 26px;
	margin: 30px 0;
	max-width: 74ch;
}
.hm-encart h3 { margin: 0 0 10px; font-size: 21px; color: var(--craie); }
.hm-encart p, .hm-encart li { color: var(--craie-2); }
.hm-encart p:last-child { margin-bottom: 0; }
.hm-encart ul { margin: 10px 0; padding-left: 20px; }
.hm-encart .gros { color: var(--rouge-vif); font-size: 1.25em; }
.hm-encart-vert { border-left-color: var(--vert); }
.hm-encart-vert h3 { color: var(--vert); }

.hm-aides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px;
	margin: 26px 0;
}
.hm-aide {
	background: var(--tribune);
	border: 1px solid var(--ligne-doux);
	border-top: 3px solid var(--rouge);
	border-radius: 3px;
	padding: 22px 24px;
	position: relative;
}
.hm-aide .montant {
	position: absolute;
	top: 18px; right: 22px;
	font-family: var(--display);
	font-size: 30px;
	color: var(--rouge-vif);
	line-height: 1;
}
.hm-aide h3 { margin: 0 0 10px; font-size: 22px; padding-right: 80px; }
.hm-aide p { font-size: 15px; margin: 0 0 10px; }
.hm-aide p:last-child { margin-bottom: 0; }
.hm-aide .qui { color: var(--gris); font-size: 14px; }

/* =========================================================================
   PARCOURS D'INSCRIPTION
   Principe : montrer moins, pas décorer plus. Le filtre masque ce qui ne
   concerne pas la personne, mais tout reste dans le document (sans JS,
   à l'impression et au lecteur d'écran : tout s'affiche).
   ========================================================================= */

.hm-promesse {
	font-family: var(--display);
	font-size: clamp(22px, 3.6vw, 34px);
	text-transform: uppercase;
	color: var(--craie);
	margin: 0 0 14px;
	line-height: 1.1;
}
.hm-promesse .sep { color: var(--rouge); margin: 0 .3em; }

.hm-imprimante {
	border-left: 3px solid rgba(244,239,234,.30);
	padding: 12px 0 12px 18px;
	margin: 0 0 30px;
	max-width: 62ch;
	color: var(--craie-2);
}
.hm-imprimante strong { color: var(--craie); }

/* Les deux façons de s'inscrire */
.hm-voies {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin: 0 0 32px;
}
.hm-voie {
	background: var(--tribune);
	border: 1px solid var(--ligne-doux);
	border-radius: 4px;
	padding: 22px 24px;
}
.hm-voie h3 { margin: 0 0 8px; font-size: 21px; }
.hm-voie p { margin: 0 0 8px; font-size: 15.5px; }
.hm-voie p:last-child { margin-bottom: 0; }
.hm-voie .quand {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--craie);
	display: block;
	margin-top: 10px;
}

/* Bandeau médical : le seul vert de la page */
.hm-medical {
	background: #132A20;
	border-left: 4px solid #3FBF7F;
	border-radius: 0 4px 4px 0;
	padding: 24px 28px;
	margin: 0 0 34px;
}
.hm-medical h2 {
	font-size: clamp(22px, 3.4vw, 30px);
	color: #8FE9B6;
	margin: 0 0 10px;
}
.hm-medical p { color: #CFEFDC; margin: 0 0 8px; max-width: 66ch; }
.hm-medical p:last-child { margin-bottom: 0; }
.hm-medical strong { color: #EAFBF1; }

/* Étapes numérotées, discrètes */
.hm-etape { margin: 0 0 38px; }
.hm-etape-tete {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
}
.hm-etape-num {
	flex: none;
	width: 28px; height: 28px;
	border: 1.5px solid rgba(229,36,64,.55);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-size: 15px;
	color: var(--rouge);
}
.hm-etape-tete h2 { margin: 0; font-size: clamp(22px, 4vw, 30px); }
.hm-etape > p { max-width: 62ch; }

/* Le filtre par profil */
.hm-filtre { margin: 14px 0 0; }
.hm-filtre fieldset { border: none; margin: 0 0 16px; padding: 0; }
.hm-filtre legend {
	padding: 0;
	font-size: 15.5px;
	color: var(--craie-2);
	margin-bottom: 10px;
}
.hm-choix { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-choix input { position: absolute; opacity: 0; pointer-events: none; }
.hm-choix label {
	display: inline-block;
	padding: 11px 20px;
	min-height: 44px;
	border: 1px solid rgba(244,239,234,.10);
	background: rgba(244,239,234,.04);
	border-radius: 3px;
	color: var(--craie-2);
	font-size: 15px;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.hm-choix label:hover { border-color: rgba(244,239,234,.30); color: var(--craie); }
.hm-choix input:checked + label {
	background: var(--rouge);
	border-color: var(--rouge);
	color: #fff;
	font-weight: 600;
}
.hm-choix input:focus-visible + label { outline: 2px solid var(--rouge-vif); outline-offset: 3px; }
.hm-filtre .note-filtre { font-size: 14px; color: var(--gris); margin: 6px 0 0; }

/* Les documents : des lignes, pas des cartes */
.hm-docs { margin: 18px 0 0; }
.hm-doc {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 0;
	border-top: 1px solid rgba(244,239,234,.06);
}
.hm-doc:first-child { border-top: none; }
.hm-doc input[type="checkbox"] {
	flex: none;
	width: 22px; height: 22px;
	margin-top: 2px;
	accent-color: var(--rouge);
	cursor: pointer;
}
.hm-doc-corps { flex: 1 1 auto; min-width: 0; }
.hm-doc-titre {
	display: block;
	font-weight: 600;
	color: var(--craie);
	font-size: 17px;
	cursor: pointer;
	margin-bottom: 4px;
}
.hm-doc-qui {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin-left: 8px;
}
.hm-doc p { margin: 0 0 10px; font-size: 15px; color: var(--craie-2); max-width: 60ch; }
.hm-doc-lien {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid rgba(244,239,234,.25);
	border-radius: 3px;
	color: var(--craie);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	transition: border-color .15s, background .15s;
}
.hm-doc-lien:hover { border-color: var(--craie); background: rgba(244,239,234,.06); color: var(--craie); }
.hm-doc-lien .poids { font-weight: 400; color: var(--gris); margin-left: 6px; }

/* Verdict médical : une réponse, pas une règle */
.hm-verdict-med {
	font-size: clamp(17px, 2.4vw, 20px);
	font-weight: 600;
	color: var(--craie);
	margin: 0 0 8px;
}
.hm-verdict-med .oui { color: #E5A24B; }
.hm-verdict-med .non { color: #6FD3A0; }

/* Le questionnaire reste chez vous */
.hm-chez-vous {
	background: rgba(244,239,234,.03);
	border-left: 3px solid #C9922E;
	border-radius: 0 3px 3px 0;
	padding: 20px 24px;
	margin: 26px 0;
	max-width: 74ch;
}
.hm-chez-vous h3 { margin: 0 0 10px; font-size: 19px; color: #E5A24B; }
.hm-chez-vous p { font-size: 15.5px; margin: 0 0 8px; }
.hm-chez-vous p:last-child { margin-bottom: 0; }
.hm-chez-vous a { text-decoration: underline; }

/* Replis : cas particuliers, documents informatifs */
.hm-repli {
	border-top: 1px solid rgba(244,239,234,.07);
	margin: 24px 0;
	padding-top: 16px;
	max-width: 74ch;
}
.hm-repli > summary {
	cursor: pointer;
	font-size: 15px;
	color: var(--gris);
	list-style: none;
	padding: 6px 0;
	display: flex;
	align-items: center;
	gap: 9px;
}
.hm-repli > summary::-webkit-details-marker { display: none; }
.hm-repli > summary::before {
	content: "\25B8";
	color: var(--rouge);
	transition: transform .15s;
	display: inline-block;
}
.hm-repli[open] > summary::before { transform: rotate(90deg); }
.hm-repli > summary:hover { color: var(--craie-2); }
.hm-repli-corps { padding: 10px 0 0 18px; }
.hm-repli-corps p, .hm-repli-corps li { font-size: 15px; color: var(--craie-2); }
.hm-repli-corps h4 { margin: 16px 0 4px; font-size: 16px; color: var(--craie); }

/* Récapitulatif avant envoi */
.hm-recap {
	background: var(--tribune);
	border: 1px solid var(--ligne-doux);
	border-radius: 4px;
	padding: 22px 26px;
	margin: 0 0 22px;
	max-width: 66ch;
}
.hm-recap h3 { margin: 0 0 12px; font-size: 19px; }
.hm-recap ul { list-style: none; margin: 0; padding: 0; }
.hm-recap li {
	padding: 7px 0 7px 26px;
	position: relative;
	font-size: 15.5px;
	color: var(--craie-2);
}
.hm-recap li::before {
	content: "\2610";
	position: absolute;
	left: 0;
	color: var(--gris);
}

/* Bloc d'envoi */
.hm-envoi { margin: 0 0 26px; }
.hm-copie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 10px 0 18px;
}
.hm-copie code {
	font-family: var(--mono);
	font-size: 15px;
	background: var(--tribune);
	border: 1px solid var(--ligne-doux);
	border-radius: 3px;
	padding: 11px 14px;
	color: var(--craie);
	word-break: break-all;
}
.hm-btn-copier {
	background: var(--rouge);
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: 12px 20px;
	font-family: var(--corps);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	transition: background .15s;
}
.hm-btn-copier:hover { background: var(--rouge-vif); }
.hm-btn-copier.fait { background: #2C6A50; }

/* Suite du parcours */
.hm-suite { counter-reset: s; margin: 18px 0 0; max-width: 68ch; padding: 0; }
.hm-suite li {
	counter-increment: s;
	list-style: none;
	position: relative;
	padding-left: 34px;
	margin-bottom: 14px;
	color: var(--craie-2);
	font-size: 15.5px;
}
.hm-suite li::before {
	content: counter(s);
	position: absolute;
	left: 0; top: 1px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: rgba(244,239,234,.08);
	color: var(--craie);
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 700;
}

/* --- Le filtre masque, il ne conditionne jamais l'affichage ---
   Sans JS (pas de classe filtre-actif), tout reste visible. */
.hm-inscription.filtre-actif [data-profil]:not(.visible) { display: none; }

@media print {
	.hm-inscription [data-profil] { display: block !important; }
	.hm-repli { display: block !important; }
	.hm-repli > summary { display: none; }
	.hm-repli-corps { display: block !important; }
}

/* =========================================================================
   RÈGLEMENT INTÉRIEUR — page de lecture
   ========================================================================= */

.ri { max-width: 74ch; }

.ri-section { margin: 0 0 34px; }
.ri-section h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: clamp(20px, 3vw, 27px);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ligne);
}
.ri-chiffre {
	flex: none;
	width: 30px; height: 30px;
	border: 1.5px solid var(--rouge);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-size: 15px;
	color: var(--rouge);
}

.ri-article { margin: 0 0 20px; }
.ri-num {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris-2);
	margin-bottom: 4px;
}
.ri-article p { margin: 0 0 9px; font-size: 16px; line-height: 1.62; }
.ri-article p:last-child { margin-bottom: 0; }
.ri-article ul { margin: 8px 0 10px; padding-left: 20px; }
.ri-article li { margin-bottom: 5px; font-size: 15.5px; color: var(--craie-2); }
.ri-article li::marker { color: var(--rouge); }

.ri-encart {
	background: var(--tribune);
	border-left: 3px solid var(--rouge);
	border-radius: 0 3px 3px 0;
	padding: 20px 24px;
	margin: 18px 0;
}
.ri-encart h3 { margin: 0 0 8px; font-size: 20px; color: var(--rouge-vif); }
.ri-encart p { font-size: 15.5px; margin: 0 0 8px; }
.ri-encart p:last-child { margin-bottom: 0; }