/**
 * Feuille de style FRONT de l'extension PANA-LOISIRS.
 *
 * Couvre : tunnel d'adhésion (/adherer/), espace adhérent / responsable / bureau,
 * tableau de bord front (KPI + graphiques + listes) et application PWA.
 *
 * Contraintes (charte « blanc dominant » + RGAA AA) :
 *  - Mobile d'abord, 100 % responsive, AUCUN débordement horizontal (overflow-x).
 *  - box-sizing:border-box partout, champs en pleine largeur.
 *  - Contrastes >= 4,5:1 (texte) ; focus clavier visible (orange).
 *  - Variables alignées sur theme.json (--wp--preset--color--*) avec repli en dur.
 *  - Aucun em-dash dans le contenu visible (point médian · ailleurs).
 *
 * Palette de référence : bleu #1C56E5, orange #F2701F, vert #33C13A, encre #15233B.
 * Polices : Montserrat (titres) / Manrope (corps) / JetBrains Mono (chiffres).
 */

:root {
	/* Couleurs (repli sur la charte si theme.json absent). */
	--pana-primaire: var( --wp--preset--color--bleu, #1C56E5 );
	--pana-primaire-fonce: var( --wp--preset--color--bleu-deep, #1442B8 );
	--pana-primaire-contraste: #ffffff;
	--pana-secondaire: var( --wp--preset--color--orange, #F2701F );
	--pana-secondaire-fonce: var( --wp--preset--color--orange-deep, #C7530B );
	--pana-texte: var( --wp--preset--color--encre, #15233B );
	--pana-texte-doux: var( --wp--preset--color--muted, #4b5563 );
	--pana-bordure: var( --wp--preset--color--bordure, #e3e9f2 );
	--pana-fond: var( --wp--preset--color--blanc, #ffffff );
	--pana-fond-doux: var( --wp--preset--color--surface, #f3f6fb );
	--pana-fond-doux-2: var( --wp--preset--color--surface-2, #eaeff7 );
	--pana-succes: var( --wp--preset--color--vert-deep, #1F9E3C );
	--pana-succes-fond: #e7f8ec;
	--pana-attention: #8a5a00;
	--pana-attention-fond: #fff4e0;
	--pana-erreur: #b91c1c;
	--pana-erreur-fond: #fee2e2;
	--pana-focus: var( --wp--preset--color--orange, #F2701F );

	/* Mesures. */
	--pana-rayon: 10px;
	--pana-rayon-lg: 16px;
	--pana-espace: 1rem;

	/* Polices. */
	--pana-font-titre: var( --wp--preset--font-family--titres, "Montserrat", "Segoe UI", Roboto, Arial, sans-serif );
	--pana-font-corps: var( --wp--preset--font-family--corps, "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif );
	--pana-font-mono: var( --wp--preset--font-family--monospace, "JetBrains Mono", ui-monospace, Consolas, monospace );
}

/* ============================================================ Garde-fous globaux */
/*
 * Filet de sécurité anti-débordement : tout conteneur du plugin reste dans la
 * largeur de l'écran et casse les chaînes longues (e-mails, n° de licence, URL).
 */
.pana-tunnel,
.pana-espace,
.pana-dashboard,
.pana-pwa {
	box-sizing: border-box;
	max-width: 100%;
	color: var( --pana-texte );
	font-family: var( --pana-font-corps );
	font-size: 1rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.pana-tunnel *,
.pana-espace *,
.pana-dashboard *,
.pana-pwa * {
	box-sizing: border-box;
}

/* Focus clavier visible (RGAA 10.7). */
.pana-tunnel *:focus-visible,
.pana-espace *:focus-visible,
.pana-dashboard *:focus-visible,
.pana-pwa *:focus-visible {
	outline: 3px solid var( --pana-focus );
	outline-offset: 2px;
}

/* Texte réservé aux lecteurs d'écran.
 * On épingle la position en haut à gauche (top/left:0) : sans cela, une boîte
 * « position:absolute » sans offset reste à sa position statique en flux. À l'intérieur
 * du stepper (ol scrollable de ~650px), les libellés « Étape N sur 5 » des dernières
 * étapes se retrouvaient à x≈567px et étiraient documentElement.scrollWidth jusqu'à 568px,
 * créant un débordement horizontal de ~178px sur mobile (390px) que overflow-x:hidden
 * ne clippait pas (boîte absolue échappant au conteneur de défilement). top/left:0 +
 * clip + clip-path neutralisent toute contribution à la largeur de défilement. */
.pana-sr-only,
.screen-reader-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ====================================================== TUNNEL · conteneur */

.pana-tunnel {
	max-width: 880px;
	margin: 0 auto;
	padding: var( --pana-espace );
}

.pana-tunnel__titre {
	margin: 0 0 1rem;
	font-family: var( --pana-font-titre );
	font-size: clamp( 1.4rem, 5vw, 2rem );
	line-height: 1.2;
	color: var( --pana-texte );
}

/* ====================================================== TUNNEL · stepper (fil d'étapes) */
/*
 * Le markup réel : <nav.pana-tunnel__progression> > <ol.pana-tunnel__etapes> >
 * <li.pana-tunnel__pas> avec un numéro en pastille (.pana-tunnel__pas-num) et un
 * libellé (.pana-tunnel__pas-libelle). Auparavant ces classes n'étaient pas
 * stylées, d'où des libellés collés du type « 1Compte2Membres ».
 *
 * Mobile : la liste défile horizontalement (scroll tactile) sans casser la page ;
 * chaque pas garde un espacement confortable (gap + padding) et ne se compresse pas.
 */
.pana-tunnel__progression {
	margin: 0 0 1.5rem;
}

.pana-tunnel__etapes {
	display: flex;
	flex-wrap: wrap; /* 6 étapes : on passe à la ligne plutôt que de tronquer/scroller */
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pana-pas;
}

.pana-tunnel__etapes::-webkit-scrollbar {
	height: 6px;
}

.pana-tunnel__etapes::-webkit-scrollbar-thumb {
	background: var( --pana-bordure );
	border-radius: 3px;
}

.pana-tunnel__pas {
	flex: 0 1 auto; /* chips compacts ; le wrap gère le débordement, jamais de troncature */
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	padding: 0.4rem 0.7rem;
	border: 1px solid var( --pana-bordure );
	border-radius: 999px;
	background: var( --pana-fond-doux );
	color: var( --pana-texte-doux );
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap; /* libellé d'une étape jamais coupé en deux */
}

/* Numéro en pastille. */
.pana-tunnel__pas-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var( --pana-bordure );
	color: var( --pana-texte );
	font-family: var( --pana-font-mono );
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
}

.pana-tunnel__pas-libelle {
	font-family: var( --pana-font-titre );
}

/* Étape courante : accent bleu. */
.pana-tunnel__pas.is-courant {
	border-color: var( --pana-primaire );
	background: var( --pana-fond );
	color: var( --pana-texte );
}

.pana-tunnel__pas.is-courant .pana-tunnel__pas-num {
	background: var( --pana-primaire );
	color: var( --pana-primaire-contraste );
}

/* Étape déjà faite : pastille verte avec coche. */
.pana-tunnel__pas.is-fait .pana-tunnel__pas-num {
	background: var( --pana-succes );
	color: #ffffff;
}

.pana-tunnel__pas.is-fait .pana-tunnel__pas-num::after {
	content: "\2713"; /* coche */
}

/* Étapes cliquables (retour/avance vers une étape déjà atteinte). */
.pana-tunnel__pas[data-pana-aller] {
	cursor: pointer;
}

.pana-tunnel__pas[data-pana-aller]:hover {
	border-color: var( --pana-primaire );
	color: var( --pana-texte );
}

.pana-tunnel__pas[data-pana-aller]:focus-visible {
	outline: 3px solid var( --pana-focus );
	outline-offset: 2px;
}

/* Étape non encore débloquée : grisée, non cliquable. */
.pana-tunnel__pas.is-verrou {
	opacity: 0.5;
	cursor: default;
}

/*
 * Mobile (<= 600px) : stepper compact en rangée de pastilles numérotées qui tiennent
 * toutes dans le viewport (aucun défilement horizontal). Le libellé de chaque étape
 * est déjà rappelé par le titre de la carte « Étape N · ... » juste en dessous, donc
 * on masque les libellés du stepper pour un indicateur de progression net facon app.
 */
@media ( max-width: 600px ) {
	.pana-tunnel__etapes {
		gap: 0.35rem;
		justify-content: space-between;
		overflow-x: visible; /* tout tient : plus besoin de scroller le stepper */
		padding-bottom: 0;
	}
	.pana-tunnel__pas {
		flex: 1 1 0;
		flex-direction: column;
		gap: 0.3rem;
		padding: 0;
		border: 0;
		background: transparent;
	}
	.pana-tunnel__pas-num {
		width: 2rem;
		height: 2rem;
		font-size: 0.9rem;
	}
	.pana-tunnel__pas-libelle {
		display: none; /* le titre de la carte d'étape porte le libellé complet */
	}
	/* Trait de liaison discret entre les pastilles pour matérialiser la progression. */
	.pana-tunnel__pas {
		position: relative;
	}
	.pana-tunnel__pas::before {
		content: "";
		position: absolute;
		top: 1rem; /* centre vertical de la pastille (2rem / 2) */
		left: -50%;
		width: 100%;
		height: 2px;
		background: var( --pana-bordure );
		z-index: 0;
	}
	.pana-tunnel__pas:first-child::before {
		display: none;
	}
	.pana-tunnel__pas.is-fait::before,
	.pana-tunnel__pas.is-courant::before {
		background: var( --pana-primaire );
	}
	.pana-tunnel__pas-num {
		position: relative;
		z-index: 1; /* la pastille passe au-dessus du trait */
	}
}

/* ====================================================== TUNNEL · panneau d'étape */
/*
 * Dans Tunnel::render(), le contenu de l'étape courante est enveloppé dans
 * <div.pana-tunnel__etape> (conteneur ciblé par tunnel.js). On le présente comme
 * une carte ; chaque étape interne est un <fieldset.pana-step>.
 */
.pana-tunnel__etape {
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon-lg );
	padding: clamp( 1rem, 4vw, 1.5rem );
	background: var( --pana-fond );
}

.pana-step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pana-step__legende {
	padding: 0;
	margin: 0 0 0.35rem;
	font-family: var( --pana-font-titre );
	font-size: clamp( 1.15rem, 4vw, 1.5rem );
	font-weight: 700;
	color: var( --pana-texte );
}

.pana-step__intro {
	margin: 0 0 1.25rem;
	color: var( --pana-texte-doux );
}

.pana-step__vide {
	padding: 1rem;
	border-radius: var( --pana-rayon );
	background: var( --pana-attention-fond );
	color: var( --pana-attention );
}

/* ====================================================== TUNNEL · champs de formulaire */

.pana-field {
	margin-bottom: 1rem;
	min-width: 0;
}

.pana-field > label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.pana-required {
	color: var( --pana-erreur );
}

/* Tous les contrôles : pleine largeur, box-sizing pour ne jamais déborder. */
.pana-field input[type="text"],
.pana-field input[type="email"],
.pana-field input[type="tel"],
.pana-field input[type="date"],
.pana-field input[type="number"],
.pana-field input[type="password"],
.pana-field input[type="search"],
.pana-field input[type="file"],
.pana-field select,
.pana-field textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
	color: var( --pana-texte );
	font-family: inherit;
	font-size: 1rem; /* >= 16px : évite le zoom auto iOS */
	box-sizing: border-box;
}

.pana-field textarea {
	min-height: 3.5rem;
	resize: vertical;
}

.pana-field input[aria-invalid="true"],
.pana-field select[aria-invalid="true"],
.pana-field textarea[aria-invalid="true"] {
	border-color: var( --pana-erreur );
}

.pana-field__aide {
	display: block;
	margin-top: 0.3rem;
	color: var( --pana-texte-doux );
	font-size: 0.9rem;
}

.pana-field__erreur {
	display: block;
	margin-top: 0.3rem;
	color: var( --pana-erreur );
	font-size: 0.9rem;
	font-weight: 600;
}

/* Cases à cocher / boutons radio : libellé aligné, contrôle non étiré. */
.pana-field--checkbox,
.pana-field--radio {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.pana-field--checkbox input,
.pana-field--radio input {
	width: auto;
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.pana-field--checkbox > label,
.pana-field--radio > label {
	margin: 0;
	font-weight: 500;
}

/*
 * Champ « en ligne » (ex. ville/code postal côte à côte) : grille fluide
 * minmax(0,1fr) + min-width:0 sur les enfants pour éviter tout débordement.
 */
.pana-field--inline {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1rem;
}

.pana-field--inline > .pana-field__col {
	min-width: 0;
}

.pana-field--inline .pana-field__col > label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

@media ( min-width: 560px ) {
	.pana-field--inline {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* ====================================================== TUNNEL · membres (étape 2) */

.pana-membres {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
}

.pana-membre {
	min-width: 0;
}

.pana-membre__bloc {
	margin: 0;
	padding: clamp( 0.85rem, 3vw, 1.25rem );
	border: 1px solid var( --pana-bordure );
	border-left: 4px solid var( --pana-primaire );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
}

.pana-membre__titre {
	padding: 0;
	font-family: var( --pana-font-titre );
	font-weight: 700;
}

.pana-membre__badge {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var( --pana-fond-doux-2 );
	color: var( --pana-primaire-fonce );
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.pana-membre__suppr {
	margin-top: 0.25rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
	color: var( --pana-secondaire-fonce );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pana-membre__suppr:hover {
	background: var( --pana-erreur-fond );
	border-color: var( --pana-erreur );
	color: var( --pana-erreur );
}

/* Personne(s) à contacter en cas d'urgence (étape 2). */
.pana-contacts {
	margin: 1rem 0 0;
	padding: clamp( 0.75rem, 2.5vw, 1rem );
	border: 1px dashed var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
}

.pana-contacts > .pana-field__legende {
	font-family: var( --pana-font-titre );
	font-weight: 700;
}

.pana-contact {
	min-width: 0;
	margin: 0.75rem 0 0;
	padding: clamp( 0.65rem, 2vw, 0.9rem );
	border: 1px solid var( --pana-bordure );
	border-left: 3px solid var( --pana-secondaire );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
}

.pana-contact:first-of-type {
	margin-top: 0.5rem;
}

.pana-contact__titre {
	padding: 0;
	margin: 0 0 0.5rem;
	color: var( --pana-texte-doux );
	font-weight: 600;
	font-size: 0.9rem;
}

.pana-contact__suppr {
	color: var( --pana-secondaire-fonce );
}

.pana-contacts__ajout {
	margin-top: 0.75rem;
}

/* ============================================ TUNNEL · groupe répétable (Précisions) */

.pana-repeter__ligne {
	min-width: 0;
	margin: 0.5rem 0 0;
	padding: clamp( 0.6rem, 2vw, 0.85rem );
	border: 1px solid var( --pana-bordure );
	border-left: 3px solid var( --pana-secondaire );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
}

.pana-repeter__ligne:first-of-type {
	margin-top: 0.35rem;
}

.pana-repeter__champ {
	margin: 0 0 0.5rem;
}

.pana-repeter__champ:last-of-type {
	margin-bottom: 0.35rem;
}

.pana-repeter__suppr {
	color: var( --pana-secondaire-fonce );
}

.pana-repeter__ajouter {
	margin-top: 0.6rem;
}

/* ====================================================== TUNNEL · sections (étape 3) */

.pana-sections__membre {
	margin: 0 0 1.25rem;
	padding: clamp( 0.85rem, 3vw, 1.25rem );
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
}

.pana-sections__membre-titre {
	padding: 0;
	font-family: var( --pana-font-titre );
	font-weight: 700;
}

.pana-sections__liste {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0.5rem;
}

@media ( min-width: 560px ) {
	.pana-sections__liste {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.pana-sections__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
}

.pana-sections__item input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

.pana-sections__item label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

.pana-sections__pastille {
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
}

/* ====================================================== TUNNEL · devis temps réel */

.pana-devis,
.pana-recap {
	margin-top: 1.5rem;
	padding: 1rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
}

.pana-devis__titre,
.pana-recap__titre {
	margin: 0 0 0.75rem;
	font-family: var( --pana-font-titre );
	font-size: 1.1rem;
}

.pana-devis__lignes {
	margin: 0;
}

.pana-devis__ligne,
.pana-recap__total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var( --pana-bordure );
}

.pana-devis__ligne dt,
.pana-devis__ligne dd,
.pana-recap__total dt,
.pana-recap__total dd {
	margin: 0;
}

.pana-devis__ligne dd,
.pana-recap__total dd {
	font-family: var( --pana-font-mono );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin-left: auto;   /* montant aligné à droite, même si le libellé est long */
	text-align: right;
}

.pana-devis__ligne--net,
.pana-recap__total--net {
	border-bottom: none;
	border-top: 2px solid var( --pana-texte );
	margin-top: 0.25rem;
	padding-top: 0.6rem;
	font-size: 1.1rem;
	font-weight: 700;
}

/* Récapitulatif paiement : lignes détaillées (qui / quoi / prix). */
.pana-recap__lignes {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.pana-recap__ligne {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var( --pana-bordure );
}

.pana-recap__qui {
	font-weight: 600;
}

.pana-recap__quoi {
	flex: 1 1 100%;
	color: var( --pana-texte-doux );
	font-size: 0.92rem;
}

@media ( min-width: 480px ) {
	.pana-recap__quoi {
		flex: 0 1 auto;
		order: 2;
		text-align: left;
	}
}

.pana-recap__prix {
	font-family: var( --pana-font-mono );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	order: 3;            /* toujours en dernier */
	margin-left: auto;   /* montant aligné à droite */
	text-align: right;
}

/* Détail des choix spécifiques de section sous une ligne de récapitulatif. */
.pana-recap__options {
	flex: 1 1 100%;
	order: 3;
	margin: 0.3rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var( --pana-texte-doux );
}

.pana-recap__options li {
	margin: 0.1rem 0;
}

.pana-recap__option-libelle {
	font-weight: 600;
}

/* Récapitulatif par adhérent × pratique (16/07) : le prix affiché en tête de bloc est
   le tarif de BASE ; en dessous, chaque ajustement réellement appliqué (remise, règle
   multi-section, don) sur sa propre ligne, puis le SOUS-TOTAL du bloc. */
.pana-recap__ajusts {
	flex: 1 1 100%;
	order: 4;
	margin: 0.45rem 0 0;
	padding: 0.35rem 0 0;
	list-style: none;
	border-top: 1px dashed var( --pana-bordure );
}

.pana-recap__ajust {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.15rem 0;
	font-size: 0.9rem;
	color: var( --pana-texte-doux );
}

.pana-recap__ajust-montant {
	font-family: var( --pana-font-mono );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin-left: auto;
	text-align: right;
}

.pana-recap__ajust--attente .pana-recap__ajust-montant {
	font-family: inherit;
	font-style: italic;
}

.pana-recap__soustotal {
	flex: 1 1 100%;
	order: 5;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	border-top: 1px solid var( --pana-bordure );
	font-weight: 700;
}

.pana-recap__soustotal-montant {
	font-family: var( --pana-font-mono );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin-left: auto;
	text-align: right;
}

/* ====================================================== TUNNEL · paiement (étape 5) */

.pana-paiement__titre {
	margin: 1.25rem 0 0.5rem;
	font-family: var( --pana-font-titre );
	font-size: 1.1rem;
}

.pana-paiement__choix {
	display: grid;
	gap: 0.5rem;
}

.pana-paiement__choix .pana-field--radio,
.pana-paiement__echeances .pana-field--radio {
	padding: 0.65rem 0.85rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
	margin: 0;
}

.pana-paiement__choix .pana-field--radio:has( input:checked ),
.pana-paiement__echeances .pana-field--radio:has( input:checked ) {
	border-color: var( --pana-primaire );
	background: var( --pana-fond-doux-2 );
}

.pana-paiement__echeances {
	margin: 1.25rem 0 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 0.5rem;
}

.pana-paiement__echeances legend {
	padding: 0;
	margin-bottom: 0.35rem;
	font-family: var( --pana-font-titre );
	font-weight: 700;
}

.pana-paiement__stripe,
#pana-stripe-element {
	margin-top: 1rem;
	padding: 0.75rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
	min-height: 2.5rem;
}

/* Répartition du paiement par moyen (étape 6). */
.pana-paiement__moyens {
	margin-top: 0.5rem;
}

.pana-paiement__sections {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.pana-paiement__section-titre {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-size: 1.02rem;
}

.pana-paiement__section-montant {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}


.pana-moyen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0.85rem;
	margin: 0 0 0.5rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
}

.pana-moyen > label {
	margin: 0;
	font-weight: 600;
}

.pana-moyen__saisie {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.pana-moyen__saisie input[data-pana-vent-montant],
.pana-moyen__saisie input[type="number"] {
	width: 7.5rem;
	max-width: 40vw;
	padding: 0.5rem 0.6rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	font-size: 1rem;
	text-align: right;
}

.pana-moyen__unite {
	color: var( --pana-texte-doux );
	font-weight: 600;
}

.pana-paiement__solde {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
	display: grid;
	gap: 0.35rem;
}

.pana-paiement__solde > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
}

.pana-paiement__solde dt {
	color: var( --pana-texte-doux );
}

.pana-paiement__solde dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.pana-paiement__reste dd {
	color: var( --pana-secondaire-fonce );
}

/* Répartition complète : le « reste » passe au vert (foncé pour le contraste AA >= 4,5:1). */
.pana-paiement__moyens.is-complet .pana-paiement__reste dd {
	color: #157a2c;
}

/* Répartition excédentaire : le « reste » (négatif) passe au rouge. */
.pana-paiement__moyens.is-trop .pana-paiement__reste dd {
	color: var( --pana-erreur );
}

/* ====================================================== Boutons (tunnel + espaces) */

.pana-tunnel__btn,
.pana-btn,
.pana-pwa__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px; /* cible tactile confortable au pouce */
	padding: 0.7rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var( --pana-rayon );
	background: var( --pana-primaire );
	color: var( --pana-primaire-contraste );
	font-family: var( --pana-font-titre );
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pana-tunnel__btn:hover,
.pana-btn:hover,
.pana-pwa__bouton:hover {
	background: var( --pana-primaire-fonce );
}

/* Bouton « Précédent » + ajout membre + secondaires : style fantôme. */
.pana-tunnel__btn--prec,
.pana-tunnel__btn--ajout,
.pana-btn--secondaire,
.pana-pwa__bouton--secondaire {
	background: transparent;
	color: var( --pana-primaire );
	border-color: var( --pana-primaire );
}

.pana-tunnel__btn--prec:hover,
.pana-tunnel__btn--ajout:hover,
.pana-btn--secondaire:hover,
.pana-pwa__bouton--secondaire:hover {
	background: var( --pana-fond-doux );
}

.pana-tunnel__btn[disabled],
.pana-tunnel__btn[aria-disabled="true"],
.pana-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Bouton « + Ajouter une personne » : pleine largeur sur mobile. */
.pana-tunnel__btn--ajout {
	width: 100%;
}

/*
 * Barre de navigation Précédent / Suivant : sur mobile les deux boutons
 * passent en pleine largeur et restent accessibles au pouce ; sur écran large
 * ils s'écartent (Précédent à gauche, Suivant à droite).
 */
.pana-tunnel__nav {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.pana-tunnel__nav .pana-tunnel__btn {
	width: 100%;
}

@media ( min-width: 560px ) {
	.pana-tunnel__btn--ajout {
		width: auto;
	}
	.pana-tunnel__nav {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pana-tunnel__nav .pana-tunnel__btn {
		width: auto;
	}
	/* Le bouton « Suivant » seul (sans Précédent) reste poussé à droite. */
	.pana-tunnel__nav .pana-tunnel__btn--suiv:only-child {
		margin-left: auto;
	}
}

/* ====================================================== Messages / notices */

.pana-message,
.pana-notice {
	margin: 1rem 0;
	padding: 0.85rem 1rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
	color: var( --pana-texte );
}

.pana-message--succes,
.pana-message--success {
	background: var( --pana-succes-fond );
	border-color: var( --pana-succes );
	color: var( --pana-succes );
}

.pana-message--erreur,
.pana-message--error {
	background: var( --pana-erreur-fond );
	border-color: var( --pana-erreur );
	color: var( --pana-erreur );
}

.pana-message--info {
	background: var( --pana-attention-fond );
	border-color: var( --pana-secondaire );
	color: var( --pana-attention );
}

/* ====================================================== ÉTAPE « Précisions par section » */

/*
 * Robustesse de l'affichage conditionnel : un fieldset masqué via [hidden] doit
 * réellement disparaître (certains navigateurs ne masquent pas <fieldset hidden>).
 */
.pana-tunnel [hidden] {
	display: none !important;
}

.pana-options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
}

/* Une carte par inscription (membre × section), dans l'esprit des cartes du tunnel. */
.pana-options__bloc {
	margin: 0;
	padding: 1.1rem 1.2rem 1.3rem;
	border: 1px solid var( --pana-bordure );
	border-left: 4px solid var( --pana-primaire );
	border-radius: var( --pana-rayon-lg );
	background: var( --pana-fond );
}

.pana-options__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.pana-options__titre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
	padding: 0;
	font-family: var( --pana-font-titre );
	font-size: clamp( 1.05rem, 3.5vw, 1.25rem );
	font-weight: 700;
	color: var( --pana-texte );
}

.pana-options__qui {
	color: var( --pana-texte );
}

.pana-options__sep {
	color: var( --pana-texte-doux );
}

.pana-options__section {
	color: var( --pana-primaire );
}

.pana-options__intro {
	margin: 0 0 1rem;
	color: var( --pana-texte-doux );
	font-size: 0.95rem;
}

/* Espacement vertical régulier entre les champs d'un bloc. */
.pana-options__bloc > .pana-options__fieldset > .pana-field,
.pana-options__bloc > .pana-options__fieldset > .pana-field--radio-groupe,
.pana-options__bloc > .pana-options__fieldset > .pana-field--checkbox-groupe {
	margin-top: 1rem;
}

/* Groupes de boutons radio / cases à cocher (fieldset porteur d'une légende). */
.pana-field--radio-groupe,
.pana-field--checkbox-groupe {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: block;
}

.pana-field__legende {
	display: block;
	margin-bottom: 0.4rem;
	padding: 0;
	font-family: var( --pana-font-titre );
	font-weight: 600;
	color: var( --pana-texte );
}

/* Les lignes radio/checkbox internes : léger espacement + cible cliquable confortable. */
.pana-field--radio-groupe .pana-field--radio,
.pana-field--checkbox-groupe .pana-field--checkbox {
	margin-top: 0.4rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
	transition: border-color 0.15s ease, background 0.15s ease;
}

.pana-field--radio-groupe .pana-field--radio:has( input:checked ),
.pana-field--checkbox-groupe .pana-field--checkbox:has( input:checked ) {
	border-color: var( --pana-primaire );
	background: var( --pana-fond );
}

.pana-field__aide--inline {
	display: block;
	margin-top: 0.15rem;
	color: var( --pana-texte-doux );
	font-size: 0.85rem;
	font-weight: 400;
}

.pana-options__validation {
	margin-top: 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
}

.pana-options__info {
	margin-top: 1rem;
}

/* Sous-titre d'un bloc « info » (ex. « Divers » du flux Judo). */
.pana-options__sous-titre {
	margin: 1.25rem 0 0.5rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var( --pana-bordure );
	font-family: var( --pana-font-titre );
	font-weight: 700;
	color: var( --pana-texte );
}

/* ====================================================== ÉTAPE 3 · choix des sections (cartes) */
/*
 * Classes DÉDIÉES au tunnel (pana-choixsec*) pour ne PAS entrer en collision avec la
 * grille publique .pana-sections du thème (qui style de grosses pastilles/cartes WOW).
 * Chaque carte : nom de section en gras en haut, puis case à cocher + logo en dessous.
 */
.pana-choixsec__membre {
	border: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	min-width: 0;
}

.pana-choixsec__membre-titre {
	margin: 0 0 0.75rem;
	padding: 0;
	font-family: var( --pana-font-titre );
	font-weight: 700;
	font-size: 1.05rem;
	color: var( --pana-texte );
}

.pana-choixsec {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.75rem;
}

@media ( min-width: 720px ) {
	.pana-choixsec {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 480px ) {
	.pana-choixsec {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.pana-choixsec__item {
	/* Colonne flex : l'avertissement de doublon et sa case de confirmation, posés APRÈS le
	   label, restent DANS la carte. Sans cela ils débordaient sous la carte suivante, qui les
	   recouvrait : la case était invisible et inclicable (constaté le 01/09/2026). */
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
}

/* La carte entière est un label cliquable : titre en gras + (case + logo). */
.pana-choixsec__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	/* `flex: 1` et non `height: 100%` : le label occupe l'espace QUI RESTE dans la carte, au
	   lieu d'en réclamer toute la hauteur et de rejeter ses voisins au-dehors. Les cartes
	   gardent la même hauteur, alignées par la grille. */
	flex: 1 1 auto;
	margin: 0;
	padding: 0.15rem 0.6rem 0.3rem; /* titre quasi collé en haut, blanc minimal */
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon-lg );
	background: var( --pana-fond );
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pana-choixsec__label:hover {
	border-color: var( --pana-primaire );
}

/* La case DE LA SECTION, et non n'importe quelle case de la carte : `input:checked` matchait
   aussi la confirmation de seconde inscription, si bien que la cocher seule faisait paraître la
   section sélectionnée alors qu'elle ne l'était pas (01/09/2026). */
.pana-choixsec__item:has( .pana-choixsec__case:checked ) .pana-choixsec__label {
	border-color: var( --pana-primaire );
	background: var( --pana-fond-doux );
	box-shadow: inset 0 0 0 1px var( --pana-primaire );
}

.pana-choixsec__titre {
	font-family: var( --pana-font-titre );
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.1;
	color: var( --pana-texte );
	min-width: 0;
	overflow-wrap: anywhere;
}

.pana-choixsec__corps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
}

/* Case à cocher : taille fixe et identique pour toutes (forcée pour ignorer tout style hérité). */
.pana-choixsec__case {
	flex: 0 0 auto;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	min-height: 22px;
	margin: 0;
	accent-color: var( --pana-primaire );
	cursor: pointer;
}

/* Logo de la section : encadré blanc de taille fixe, logo contenu (jamais déformé/rogné). */
.pana-choixsec__logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px; /* logo agrandi x1.5 (56 -> 84) */
	height: 84px;
	border-radius: 14px;
	background: #ffffff;
	border: 1px solid var( --pana-bordure );
	overflow: hidden;
}

.pana-choixsec__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Repli sans logo : initiale sur pastille couleur de la section. */
.pana-choixsec__initiale {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	background: var( --pana-sec-couleur, var( --pana-primaire ) );
	color: #ffffff;
	font-family: var( --pana-font-titre );
	font-weight: 800;
	font-size: 2rem;
}

/* ====================================================== ESPACE adhérent / responsable */

.pana-espace {
	max-width: 1080px;
	margin: 0 auto;
	padding: var( --pana-espace );
}

.pana-espace h2,
.pana-espace h3,
.pana-espace h4 {
	font-family: var( --pana-font-titre );
}

.pana-espace h2 {
	font-size: clamp( 1.4rem, 5vw, 1.9rem );
	margin: 0 0 0.25rem;
}

.pana-espace__sous-titre {
	margin: 0 0 1.5rem;
	color: var( --pana-texte-doux );
}

.pana-espace__section {
	margin: 0 0 2rem;
}

/* Cartes d'adhérent : empilées sur mobile, en grille fluide ensuite. */
.pana-cartes {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1rem;
}

@media ( min-width: 560px ) {
	.pana-cartes {
		grid-template-columns: repeat( auto-fit, minmax( min( 100%, 260px ), 1fr ) );
	}
}

.pana-carte {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px solid var( --pana-bordure );
	border-top: 4px solid var( --pana-primaire );
	border-radius: var( --pana-rayon-lg );
	background: var( --pana-fond );
}

.pana-carte__media {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.pana-carte__photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.pana-carte__nom {
	font-family: var( --pana-font-titre );
	font-weight: 700;
}

.pana-carte__licence {
	margin: 0;
}

.pana-carte__label {
	color: var( --pana-texte-doux );
	font-size: 0.85rem;
}

.pana-carte__valeur {
	font-family: var( --pana-font-mono );
	font-weight: 700;
}

.pana-carte__qr {
	width: 120px;
	height: 120px;
	max-width: 100%;
	height: auto;
	align-self: center;
}

/* Événements à venir. */
.pana-evenements {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.pana-evenement {
	padding: 0.85rem 1rem;
	border: 1px solid var( --pana-bordure );
	border-left: 4px solid var( --pana-secondaire );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
}

.pana-evenement__titre {
	font-family: var( --pana-font-titre );
	font-weight: 700;
}

.pana-evenement__type {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var( --pana-fond-doux-2 );
	font-size: 0.78rem;
	font-weight: 600;
}

.pana-evenement__date {
	color: var( --pana-texte-doux );
	font-size: 0.92rem;
}

/* Formulaire de dépôt de document. */
.pana-form--upload {
	margin-top: 1.5rem;
	padding: clamp( 1rem, 4vw, 1.5rem );
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
}

.pana-form__champ {
	margin: 0 0 1rem;
}

.pana-form__champ label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.pana-form__champ select,
.pana-form__champ input[type="file"] {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
	font: inherit;
	font-size: 1rem;
	box-sizing: border-box;
}

/* ====================================================== Tableaux front (licences, paiements, documents) */
/*
 * Les tables .pana-table sont enveloppées d'un scroll horizontal interne pour
 * ne jamais déborder la page sur mobile. On enveloppe par CSS : la table devient
 * scrollable via un conteneur de débordement appliqué au tableau lui-même.
 */
.pana-table {
	width: 100%;
	margin: 0.5rem 0 1.25rem;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.pana-table caption {
	text-align: left;
}

.pana-table th,
.pana-table td {
	padding: 0.6rem 0.65rem;
	text-align: left;
	border-bottom: 1px solid var( --pana-bordure );
	vertical-align: top;
}

.pana-table thead th {
	font-family: var( --pana-font-titre );
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var( --pana-texte-doux );
	background: var( --pana-fond-doux );
}

/*
 * Sur petit écran : le tableau défile horizontalement sans casser la mise en
 * page (display:block + overflow-x:auto sur l'élément table). On garde un
 * minimum de largeur pour éviter l'écrasement illisible des colonnes.
 */
@media ( max-width: 600px ) {
	.pana-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
}

/* Pastilles d'état (badges). */
.pana-badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
	background: var( --pana-fond-doux-2 );
	color: var( --pana-texte );
}

.pana-badge--valide,
.pana-badge--ok {
	background: var( --pana-succes-fond );
	color: var( --pana-succes );
}

.pana-badge--en_attente,
.pana-badge--attente {
	background: var( --pana-attention-fond );
	color: var( --pana-attention );
}

.pana-badge--refuse,
.pana-badge--expire {
	background: var( --pana-erreur-fond );
	color: var( --pana-erreur );
}

.pana-validite--expire {
	color: var( --pana-erreur );
	font-weight: 600;
}

.pana-validite--proche {
	color: var( --pana-attention );
	font-weight: 600;
}

/* ====================================================== DASHBOARD front (KPI + graphiques + listes) */

.pana-dashboard {
	max-width: 1180px;
	margin: 0 auto;
	padding: var( --pana-espace );
}

.pana-dashboard__title {
	font-family: var( --pana-font-titre );
	font-size: clamp( 1.5rem, 5vw, 2rem );
	margin: 0 0 0.25rem;
}

.pana-dashboard__saison {
	margin: 0 0 1.5rem;
	color: var( --pana-texte-doux );
}

/* Grille KPI fluide : se replie tout seul, jamais de débordement. */
.pana-kpi-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 220px ), 1fr ) );
	gap: 1rem;
	margin: 0 0 2rem;
}

.pana-kpi-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon-lg );
	background: var( --pana-fond );
}

.pana-kpi-value,
.pana-kpi-card__value {
	font-family: var( --pana-font-titre );
	font-size: clamp( 1.5rem, 5vw, 2rem );
	font-weight: 800;
	line-height: 1.1;
	color: var( --pana-primaire-fonce );
}

.pana-kpi-label,
.pana-kpi-card__label {
	color: var( --pana-texte-doux );
	font-size: 0.92rem;
}

.pana-kpi-card__detail {
	color: var( --pana-texte-doux );
	font-size: 0.82rem;
}

/* Graphique : jamais plus large que son conteneur. */
.pana-chart {
	margin: 0 0 2rem;
	padding: 1rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon-lg );
	background: var( --pana-fond );
	max-width: 100%;
	overflow: hidden;
}

.pana-chart h2 {
	font-family: var( --pana-font-titre );
	font-size: 1.15rem;
	margin: 0 0 0.75rem;
}

.pana-chart__canvas {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto;
}

/* Colonnes de listes : empilées sur mobile, multi-colonnes ensuite. */
.pana-dashboard__cols {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1.5rem;
}

@media ( min-width: 760px ) {
	.pana-dashboard__cols {
		grid-template-columns: repeat( auto-fit, minmax( min( 100%, 320px ), 1fr ) );
	}
}

.pana-list {
	min-width: 0;
}

.pana-list h2 {
	font-family: var( --pana-font-titre );
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
}

/* Tables de listes du dashboard (.widefat) : scroll horizontal sur mobile. */
.pana-list .widefat,
.pana-list table {
	width: 100%;
	border-collapse: collapse;
}

@media ( max-width: 600px ) {
	.pana-list .widefat,
	.pana-list table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
}

/* Recherche unifiée. */
.pana-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.pana-search__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	font-size: 1rem;
}

.pana-search__results {
	flex: 1 1 100%;
}

/* Alertes proactives. */
.pana-alertes {
	margin: 0 0 1.5rem;
	display: grid;
	gap: 0.5rem;
}

.pana-alerte {
	padding: 0.75rem 1rem;
	border: 1px solid var( --pana-bordure );
	border-left: 4px solid var( --pana-texte-doux );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
}

.pana-alerte--warning {
	border-left-color: var( --pana-secondaire );
	background: var( --pana-attention-fond );
	color: var( --pana-attention );
}

.pana-alerte--error {
	border-left-color: var( --pana-erreur );
	background: var( --pana-erreur-fond );
	color: var( --pana-erreur );
}

/* ====================================================== PWA (licence numérique + pointage) */

.pana-pwa {
	max-width: 480px;
	margin: 0 auto;
	padding: var( --pana-espace );
	display: grid;
	gap: 1rem;
}

.pana-pwa__entete {
	text-align: center;
}

.pana-pwa__titre {
	font-family: var( --pana-font-titre );
	font-size: clamp( 1.3rem, 5vw, 1.7rem );
	margin: 0;
}

.pana-pwa__saison {
	margin: 0.25rem 0 0;
	color: var( --pana-texte-doux );
}

/* Carte licence numérique. */
.pana-pwa__carte {
	display: grid;
	gap: 0.75rem;
	padding: 1.25rem;
	border-radius: var( --pana-rayon-lg );
	background: var( --pana-primaire );
	color: #ffffff;
	text-align: center;
}

.pana-pwa__carte-entete {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-family: var( --pana-font-titre );
	font-weight: 700;
}

.pana-pwa__carte-nom {
	margin: 0;
	font-family: var( --pana-font-titre );
	font-size: 1.25rem;
	font-weight: 800;
}

.pana-pwa__qr {
	width: 200px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	background: #ffffff;
	border-radius: var( --pana-rayon );
	padding: 0.5rem;
}

.pana-pwa__qr svg,
.pana-pwa__qr img,
.pana-pwa__qr canvas {
	width: 100%;
	height: auto;
	display: block;
}

.pana-pwa__carte-numero {
	margin: 0;
	font-family: var( --pana-font-mono );
}

/* Champs et scanner de pointage. */
.pana-pwa__champ {
	display: grid;
	gap: 0.35rem;
}

.pana-pwa__select,
.pana-pwa__input {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	font-size: 1rem;
	box-sizing: border-box;
}

.pana-pwa__scanner {
	display: grid;
	gap: 0.75rem;
}

.pana-pwa__video,
.pana-pwa__canvas {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var( --pana-rayon );
	background: #000;
}

.pana-pwa__bouton {
	width: 100%;
}

.pana-pwa__manuel-ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pana-pwa__manuel-ligne .pana-pwa__input {
	flex: 1 1 160px;
}

.pana-pwa__manuel-ligne .pana-pwa__bouton {
	width: auto;
	flex: 0 0 auto;
}

.pana-pwa__journal {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.pana-pwa__journal li {
	padding: 0.6rem 0.85rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond );
}

.pana-pwa__statut {
	padding: 0.75rem 1rem;
	border-radius: var( --pana-rayon );
	background: var( --pana-attention-fond );
	color: var( --pana-attention );
	text-align: center;
}

/* ====================================================== Composants front partagés (sections, agenda, accueil) */

.pana-cta {
	margin: 1.5rem 0;
}

.pana-cta__titre {
	margin: 0 0 0.5rem;
	font-family: var( --pana-font-titre );
	font-weight: 700;
}

.pana-cta__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border-radius: var( --pana-rayon );
	background: var( --pana-primaire );
	color: var( --pana-primaire-contraste );
	font-family: var( --pana-font-titre );
	font-weight: 700;
	text-decoration: none;
}

.pana-cta__bouton:hover {
	background: var( --pana-primaire-fonce );
}

.pana-sections__grille {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: minmax( 0, 1fr );
}

.pana-sections__grille > * {
	min-width: 0;
}

.pana-sections__visuel img {
	display: block;
	width: 100%;
	height: auto;
}

.pana-sections__corps {
	display: block;
	padding: 0.85rem;
}

.pana-sections__nom {
	display: block;
	font-family: var( --pana-font-titre );
	font-weight: 700;
	color: var( --pana-section-couleur, var( --pana-primaire-fonce ) );
}

.pana-sections__extrait {
	display: block;
	margin-top: 0.35rem;
	color: var( --pana-texte-doux );
	font-size: 0.95rem;
}

.pana-calendrier__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pana-calendrier__evenement {
	padding: 0.85rem 0;
	border-bottom: 1px solid var( --pana-bordure );
}

.pana-calendrier__date {
	display: block;
	color: var( --pana-primaire-fonce );
	font-weight: 600;
}

.pana-calendrier__nom {
	margin: 0.2rem 0;
	font-size: 1.1rem;
}

.pana-calendrier__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	color: var( --pana-texte-doux );
	font-size: 0.92rem;
}

.pana-calendrier__filtre {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.pana-calendrier__filtre select {
	padding: 0.5rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
}

.pana-mot-president {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0;
	padding: 1.25rem;
	border-left: 4px solid var( --pana-primaire );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
}

.pana-mot-president__signature {
	font-style: italic;
	color: var( --pana-texte-doux );
}

@media ( min-width: 600px ) {
	.pana-mot-president {
		grid-template-columns: 160px 1fr;
		align-items: start;
	}
	.pana-sections__grille--2,
	.pana-sections__grille--3,
	.pana-sections__grille--4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 900px ) {
	.pana-sections__grille--3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
	.pana-sections__grille--4 {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/* ====================================================== Filet de sécurité mobile (980px) */
/*
 * Couvre Samsung Z Fold déplié (~750px) et tablettes en portrait : on force
 * tous les conteneurs du plugin à rester dans la largeur du viewport.
 */
@media ( max-width: 980px ) {
	.pana-tunnel,
	.pana-tunnel *,
	.pana-espace,
	.pana-espace *,
	.pana-dashboard,
	.pana-dashboard *,
	.pana-pwa,
	.pana-pwa * {
		max-width: 100%;
		min-width: 0;
		overflow-wrap: anywhere;
	}
	.pana-tunnel img,
	.pana-espace img,
	.pana-dashboard img,
	.pana-dashboard svg,
	.pana-dashboard canvas,
	.pana-pwa img,
	.pana-pwa canvas {
		max-width: 100%;
		height: auto;
	}
	/* Le stepper passe à la ligne (flex-wrap) plutôt que de défiler/tronquer. */
	.pana-tunnel__etapes {
		overflow-x: visible;
	}
}

/* Respect de « mouvement réduit ». */
@media ( prefers-reduced-motion: reduce ) {
	.pana-tunnel__btn,
	.pana-btn,
	.pana-cta__bouton,
	.pana-pwa__bouton {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Documents modèles à télécharger (étape Documents du tunnel).
 * Liens de téléchargement des pièces mises en ligne par le responsable
 * de section (charte, règlement, formulaires...).
 * ------------------------------------------------------------------ */
/* Étape 5 : sous-bloc par section, en-tête « Membre · Section » (réutilise .pana-options__titre). */
.pana-docs__section {
	margin: 1rem 0 0;
	padding: clamp( 0.9rem, 2.5vw, 1.25rem );
	border: 1px solid var( --pana-bordure );
	border-left: 3px solid var( --pana-primaire );
	border-radius: var( --pana-rayon-lg );
	background: var( --pana-fond );
}

.pana-docs__section .pana-docs-modeles {
	margin-bottom: 1rem;
}

/* Statut du dépôt asynchrone d'une pièce (étape 5). */
.pana-upload__statut {
	margin: 0.35rem 0 0;
	min-height: 1em;
	font-size: clamp( 0.82rem, 0.78rem + 0.3vw, 0.92rem );
}

.pana-upload__statut.is-encours {
	color: var( --pana-texte-doux );
}

.pana-upload__statut.is-ok {
	color: #157a2c;
	font-weight: 600;
}

.pana-upload__statut.is-erreur {
	color: var( --pana-erreur );
	font-weight: 600;
}

.pana-docs-modeles {
	margin: 0 0 1.5rem;
	padding: clamp( 0.9rem, 2.5vw, 1.25rem );
	background: var( --pana-fond-doux );
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon-lg );
}

.pana-docs-modeles__titre {
	margin: 0 0 0.35rem;
	font-family: var( --pana-font-titre );
	font-size: clamp( 1.05rem, 1rem + 0.6vw, 1.3rem );
	color: var( --pana-texte );
}

.pana-docs-modeles__aide {
	margin: 0 0 0.9rem;
	font-size: clamp( 0.85rem, 0.8rem + 0.3vw, 0.95rem );
	color: var( --pana-texte-doux );
}

.pana-docs-modeles__bloc + .pana-docs-modeles__bloc {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px dashed var( --pana-bordure );
}

.pana-docs-modeles__section {
	margin: 0 0 0.5rem;
	font-family: var( --pana-font-titre );
	font-size: clamp( 0.95rem, 0.9rem + 0.3vw, 1.05rem );
	color: var( --pana-primaire );
}

.pana-docs-modeles__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pana-docs-modeles__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.pana-docs-modeles__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	color: var( --pana-primaire );
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pana-docs-modeles__lien::before {
	content: "";
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10m0 0 4-4m-4 4-4-4M5 21h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	mask: no-repeat center / contain url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10m0 0 4-4m-4 4-4-4M5 21h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.pana-docs-modeles__lien:hover,
.pana-docs-modeles__lien:focus {
	text-decoration: underline;
	color: var( --pana-primaire-fonce );
}

.pana-docs-modeles__type {
	font-size: clamp( 0.72rem, 0.68rem + 0.2vw, 0.8rem );
	color: var( --pana-texte-doux );
}

.pana-docs-modeles__requis {
	font-size: clamp( 0.68rem, 0.64rem + 0.2vw, 0.74rem );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --pana-secondaire-fonce );
	background: var( --pana-attention-fond );
	border-radius: 999px;
	padding: 0.1rem 0.5rem;
}

/* Options / modulations de tarif (cases à cocher à impact prix dans le tunnel). */
.pana-modulations__prix {
	margin-left: 0.4rem;
	font-weight: 700;
	font-size: clamp( 0.78rem, 0.74rem + 0.2vw, 0.88rem );
	color: var( --pana-secondaire-fonce );
}
.pana-recap__options--modul .pana-recap__option-valeur {
	font-weight: 700;
	color: var( --pana-secondaire-fonce );
}

/* Options soumises à validation (tunnel + récap). */
.pana-modulations__valid {
	margin-left: 0.35rem;
	font-size: clamp( 0.72rem, 0.68rem + 0.2vw, 0.8rem );
	font-style: italic;
	color: var( --pana-texte-doux );
}
.pana-recap__option-valeur--attente {
	font-weight: 600;
	font-style: italic;
	color: var( --pana-attention );
}

/* Modulation « en attente de validation » affichée dans les totaux du récapitulatif. */
.pana-recap__total--attente {
	font-weight: 600;
	font-style: italic;
	color: var( --pana-attention );
}

/* Lien de téléchargement d'un document à côté de sa case d'acceptation (étape Précisions). */
.pana-doc-inline-wrap {
	display: block;
	margin-top: 0.4rem;
}
.pana-doc-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	font-size: clamp( 0.82rem, 0.78rem + 0.2vw, 0.92rem );
	color: var( --pana-primaire );
	text-decoration: none;
	overflow-wrap: anywhere;
}
.pana-doc-inline::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10m0 0 4-4m-4 4-4-4M5 21h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	mask: no-repeat center / contain url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10m0 0 4-4m-4 4-4-4M5 21h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}
.pana-doc-inline:hover,
.pana-doc-inline:focus {
	text-decoration: underline;
	color: var( --pana-primaire-fonce );
}

/* Choix préalable du justificatif de santé (questionnaire vs certificat). */
.pana-sante-mode {
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	padding: 0.8rem 0.9rem;
	margin: 0 0 1rem;
	background: var( --pana-fond );
}
.pana-sante-mode__legende {
	font-family: var( --pana-font-titre );
	font-weight: 700;
	color: var( --pana-texte );
	padding: 0;
}
.pana-sante-mode__aide {
	margin: 0.3rem 0 0.7rem;
	font-size: clamp( 0.82rem, 0.78rem + 0.25vw, 0.9rem );
	color: var( --pana-texte-doux, #555 );
}
.pana-sante-mode__option {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.6rem 0.7rem;
	margin-bottom: 0.5rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.pana-sante-mode__option:last-child { margin-bottom: 0; }
.pana-sante-mode__option:hover { border-color: var( --pana-primaire ); }
.pana-sante-mode__option:focus-within {
	border-color: var( --pana-primaire );
	box-shadow: 0 0 0 2px var( --pana-primaire-clair, rgba( 0, 0, 0, 0.08 ) );
}
.pana-sante-mode__option input { margin-top: 0.2rem; flex: 0 0 auto; }
.pana-sante-mode__option span { font-weight: 600; color: var( --pana-texte ); }

/* Questionnaire de santé repliable (details/summary) + sections. */
.pana-sante-details {
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	margin: 0 0 1rem;
	background: var( --pana-fond );
}
.pana-sante-details__resume {
	cursor: pointer;
	padding: 0.7rem 0.9rem;
	font-family: var( --pana-font-titre );
	font-weight: 700;
	color: var( --pana-texte );
	list-style: none;
}
.pana-sante-details__resume::-webkit-details-marker { display: none; }
.pana-sante-details__resume::before {
	content: "\25B8";
	display: inline-block;
	margin-right: 0.5rem;
	color: var( --pana-primaire );
	transition: transform 0.15s ease;
}
.pana-sante-details[open] .pana-sante-details__resume::before { transform: rotate( 90deg ); }
.pana-sante-details .pana-sante { border: 0; padding: 0 0.9rem 0.9rem; margin: 0; }
.pana-sante__section { margin-top: 0.8rem; }
.pana-sante__section-titre {
	margin: 0 0 0.4rem;
	font-weight: 700;
	font-size: clamp( 0.85rem, 0.8rem + 0.3vw, 0.95rem );
	color: var( --pana-primaire );
	border-bottom: 1px solid var( --pana-bordure );
	padding-bottom: 0.2rem;
}


/* ============================ Accordéon « Précisions » (étape 4, multi-sections) */
.pana-options__details { margin: 0; }
.pana-options__resume {
	cursor: pointer;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	padding: 0.1rem 0;
}
.pana-options__resume::-webkit-details-marker { display: none; }
.pana-options__resume::after {
	content: "\25B8"; /* ▸ */
	margin-left: auto;
	align-self: center;
	color: var( --pana-primaire );
	font-size: 1.1em;
	transition: transform 0.15s ease;
}
.pana-options__details[open] > .pana-options__resume::after { transform: rotate( 90deg ); }
.pana-options__resume:focus-visible { outline: 2px solid var( --pana-primaire ); outline-offset: 2px; border-radius: 6px; }
.pana-options__corps { margin-top: 0.9rem; }

/* --- Pointage : recherche par nom + boutons Présent / Absence excusée --- */
.pana-pwa__recherche { margin: 1rem 0; display: grid; gap: 0.5rem; }
.pana-pwa__resultats { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.pana-pwa__res-vide { padding: 0.6rem 0.85rem; color: var( --pana-muted, #5A6B7E ); font-size: 0.9rem; }
.pana-pwa__res {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
	padding: 0.55rem 0.75rem; border: 1px solid var( --pana-bordure ); border-radius: var( --pana-rayon ); background: #fff;
}
.pana-pwa__res[data-statut="present"] { border-color: #12B76A; background: rgba( 18,183,106,0.06 ); }
.pana-pwa__res[data-statut="excuse"] { border-color: #F59E0B; background: rgba( 245,158,11,0.07 ); }
.pana-pwa__res-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.pana-pwa__res-nom { font-weight: 700; }
.pana-pwa__res-cat { font-size: 0.8rem; color: var( --pana-muted, #5A6B7E ); background: rgba( 0,0,0,0.05 ); padding: 2px 8px; border-radius: 999px; }
.pana-pwa__res-etat { font-size: 0.8rem; font-weight: 700; color: #067647; }
.pana-pwa__res[data-statut="excuse"] .pana-pwa__res-etat { color: #B54708; }
.pana-pwa__res-actions { display: flex; gap: 0.4rem; }
.pana-pwa__res-btn {
	border: 1px solid var( --pana-bordure ); background: #fff; border-radius: 999px; padding: 7px 14px;
	font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.pana-pwa__res-btn--present:hover { background: #12B76A; color: #fff; border-color: #12B76A; }
.pana-pwa__res-btn--excuse:hover { background: #F59E0B; color: #fff; border-color: #F59E0B; }
.pana-pwa__impression { margin: 1.4rem 0; display: grid; gap: 0.5rem; }
.pana-pwa__impression-aide { margin: 0; font-size: 0.85rem; color: var( --pana-muted, #5A6B7E ); }
.pana-pwa__impression .pana-pwa__bouton--secondaire { width: auto; }

/* --- Bloc « Faire un don » (étape Précisions) --- */
.pana-don { margin-top: 1rem; }
.pana-don__question { margin: 0 0 0.5rem; font-weight: 600; }
.pana-don__oui-non { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pana-don__oui-non .pana-field--radio { margin: 0; }
.pana-don__choix[hidden], .pana-don__montant[hidden] { display: none; }
.pana-don__choix { margin-top: 0.85rem; padding-left: 0.9rem; border-left: 3px solid var( --pana-bordure ); display: grid; gap: 0.75rem; }
.pana-don__types { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pana-don__types .pana-field--radio { margin: 0; }
.pana-don__montant-label { display: block; font-weight: 600; }
.pana-don__montant input[type="number"] { display: block; margin-top: 0.35rem; max-width: 200px; padding: 0.6rem 0.7rem; border: 1px solid var( --pana-bordure ); border-radius: var( --pana-rayon ); font-size: 1rem; box-sizing: border-box; }

/* ====================================================== ÉTAPE 1 · mot de passe choisi */
/*
 * Le responsable légal choisit lui-même son mot de passe : aucun e-mail ne le lui
 * rappellera. Il doit donc pouvoir relire ce qu'il tape (bouton « Afficher »).
 */
.pana-mdp {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	min-width: 0;
}

.pana-mdp > input {
	flex: 1 1 auto;
	min-width: 0;
}

.pana-mdp__voir {
	flex: 0 0 auto;
	padding: 0 0.9rem;
	border: 1px solid var( --pana-bordure );
	border-radius: var( --pana-rayon );
	background: var( --pana-fond-doux );
	color: var( --pana-texte );
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.pana-mdp__voir:hover,
.pana-mdp__voir:focus-visible {
	background: var( --pana-fond-doux-2 );
	border-color: var( --pana-primaire );
	color: var( --pana-primaire );
}

/* Zone d'erreur vide : ne réserve aucun espace sous le champ. */
.pana-field__erreur:empty {
	display: none;
}

/* Rappel de l'adresse de l'espace personnel (étapes 1 et 2). */
.pana-message--espace {
	margin-top: 1.25rem;
}

.pana-message--espace a {
	color: inherit;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* ================================================= ÉTAPE 5 · signature du dossier */
/*
 * Le bloc « charte de l'association » a été retiré : seule la signature reste demandée.
 * Un filet la détache des cartes de membres qui la précèdent (elle n'appartient à aucune).
 */
.pana-signature {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --pana-bordure );
}

.pana-signature__titre {
	margin: 0 0 0.85rem;
	font-family: var( --pana-font-titre );
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --pana-texte );
}