/**
 * theme.css — Compléments minimes au système de design de référence
 * (assets/css/styles.css). Uniquement le dimensionnement d'icônes SVG
 * inline centralisées (inc/icons.php) là où le markup de référence fixait
 * la taille via un attribut width que nous ne dupliquons pas.
 */

/* Interlignage global des titres display (.title, police Anton) : la référence
   fixe line-height .92, trop serré pour les majuscules accentuées (É, È, Ô, Î…)
   dont l'accent chevauche la ligne du dessus. On aère à 1.1 sur tout le site.
   Les blocs qui ont besoin d'un peu plus gardent leur propre valeur ci-dessous. */
.title { line-height: 1.1; }

/* Navigation : police un peu plus petite dans l'en-tête. */
.nav a { font-size: .74rem; }

/* Desktop : menu principal groupé à droite, près du bouton « Rejoindre ».
   margin-left:auto sur la nav pousse le groupe nav + bouton vers la droite.
   Le menu hamburger mobile reste inchangé. */
@media (min-width: 721px) {
	.header__inner { justify-content: flex-start; }
	.header__inner > .nav { margin-left: auto; }
	.header__inner > .btn { margin-left: 0; }
}

/* Barre rouge animée sous les liens du menu : se déploie depuis la gauche au
   survol, et reste affichée sur la page active (.is-active, déjà en rouge). */
.nav a {
	position: relative;
	padding-bottom: 5px;
}
.nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s ease;
}
.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1); }

/* Hero (accueil) : garder les 2 boutons + le lien « Nos combats » sur une seule
   rangée. Les libellés des boutons se replient sur 2 lignes si besoin (min-width:0)
   au lieu de renvoyer le lien à la ligne suivante. Sur mobile, retour naturel. */
@media (min-width: 721px) {
	.hero__actions { flex-wrap: nowrap; }
	.hero__actions .btn { min-width: 0; }
	.hero__actions .link-arrow { flex: none; white-space: nowrap; }
}

/* Revue de presse : carrousel (2 cartes visibles, défilement des autres). */
.press-carousel { position: relative; }
.press-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: .25rem;
}
.press-carousel__track::-webkit-scrollbar { display: none; }
.press-carousel__track > .press-card {
	flex: 0 0 calc((100% - 1.5rem) / 2); /* 2 cartes visibles (gap 1.5rem) */
	scroll-snap-align: start;
}
.press-carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: .6rem;
	margin-top: 1.25rem;
}
.press-carousel__btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ink);
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: 999px;
	cursor: pointer;
	transition: transform .12s ease, background .12s ease, color .12s ease, opacity .12s ease;
}
.press-carousel__btn:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }
.press-carousel__btn:disabled { opacity: .35; cursor: default; transform: none; background: #fff; color: var(--ink); border-color: var(--ink); }
@media (max-width: 720px) {
	.press-carousel__track > .press-card { flex-basis: 100%; } /* 1 carte visible sur mobile */
}

/* Encadré « où envoyer votre chèque » (dans le bloc .checkout sombre). */
.cheque-info {
	margin-top: 1.25rem;
	padding: 1rem 1.15rem;
	border: 1px solid rgba(252, 252, 252, .18);
	border-radius: 12px;
	background: rgba(252, 252, 252, .06);
	font-size: .95rem;
	line-height: 1.6;
}
.cheque-info__title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: var(--red);
	margin-bottom: .4rem;
}
.cheque-info p { margin: 0 0 .35rem; }
.cheque-info p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Espace membre — tableau de bord
   ========================================================================== */
/* Badge de statut d'adhésion (dans le hero sombre). */
.member-status {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	margin-top: 1.25rem;
	padding: .6rem 1.15rem;
	border-radius: 999px;
	background: rgba(56, 214, 107, .12);
	border: 1px solid rgba(56, 214, 107, .4);
	color: var(--ink-fg);
	font-size: .95rem;
}
.member-status__text strong { color: #fff; font-weight: 700; }
.member-status__dot {
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: #38d66b;
	flex: none;
	box-shadow: 0 0 0 0 rgba(56, 214, 107, .55);
	animation: member-pulse 2s ease-out infinite;
}
@keyframes member-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(56, 214, 107, .55); }
	70%  { box-shadow: 0 0 0 8px rgba(56, 214, 107, 0); }
	100% { box-shadow: 0 0 0 0 rgba(56, 214, 107, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.member-status__dot { animation: none; }
}
/* Variante « cotisation réglée » : ton neutre pour se distinguer du statut actif (vert). */
.member-status--montant {
	background: rgba(252, 252, 252, .08);
	border-color: rgba(252, 252, 252, .28);
}
.member-status--montant svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
	opacity: .85;
}

.member-module { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.member-module:last-child { margin-bottom: 0; }
.member-module__title {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	letter-spacing: -.01em;
	margin: 0 0 1.5rem;
}
.member-module__title svg { width: 26px; height: 26px; color: var(--red); flex: none; }

.member-empty {
	margin: 0;
	padding: 1.5rem 1.75rem;
	border: 1px dashed var(--border);
	border-radius: 14px;
	background: rgba(0, 0, 0, .015);
	color: var(--muted-fg);
	font-size: .95rem;
}

/* Prochain live */
.live-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.75rem 2rem;
	border-radius: 16px;
	background: var(--ink);
	color: var(--ink-fg);
	box-shadow: var(--shadow-hard);
}
.live-block__date { color: var(--red); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.live-block__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; margin: .35rem 0 0; }
.live-block__note { color: rgba(252, 252, 252, .7); margin: .5rem 0 0; font-size: .95rem; }

/* Groupes régionaux — répertoire avec abonnement */
.wa-groups__intro { color: var(--muted-fg); font-size: .95rem; margin: 0 0 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* Raccourci « Mes régions » */
.wa-mine {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: color-mix(in srgb, var(--red) 4%, #fff);
}
.wa-mine[hidden] { display: none; }
.wa-mine__label { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-fg); }
.wa-mine__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.wa-mine__chip {
	display: inline-flex;
	align-items: center;
	padding: .35rem .85rem;
	border-radius: 999px;
	background: var(--red);
	color: #fff;
	font-weight: 700;
	font-size: .82rem;
}
a.wa-mine__chip:hover { opacity: .9; }
.wa-groups__count { display: inline-flex; align-items: center; padding: .2rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--red) 10%, #fff); color: var(--red); font-weight: 700; font-size: .78rem; }
.wa-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.wa-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border: 2px solid var(--border);
	border-radius: 14px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wa-card.is-followed { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.wa-card__head { display: flex; flex-direction: column; gap: .3rem; }
.wa-card__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; }
.wa-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wa-card__count { color: var(--muted-fg); font-size: .8rem; font-weight: 600; }
.wa-card__badge { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }

/* Actus de mes régions */
.ractu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.ractu {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--border);
	border-left: 4px solid var(--red);
	border-radius: 12px;
	background: #fff;
}
.ractu--evenement { border-left-color: #1e88e5; }
.ractu--ressource { border-left-color: #43a047; }
.ractu__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ractu__type { font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.ractu--evenement .ractu__type { color: #1565c0; }
.ractu--ressource .ractu__type { color: #2e7d32; }
.ractu__region { font-size: .72rem; font-weight: 600; color: var(--muted-fg); padding: .1rem .55rem; border: 1px solid var(--border); border-radius: 999px; }
.ractu__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; line-height: 1.05; margin: 0; }
.ractu__date { font-weight: 700; font-size: .85rem; color: var(--ink); margin: 0; }
.ractu__text { color: var(--muted-fg); font-size: .92rem; margin: 0; }
.ractu .link-arrow { margin-top: .25rem; }
.wa-card__actions { display: flex; align-items: center; gap: .6rem; }
/* Bouton « Rejoindre le groupe » (rouge) → « ✓ Groupe rejoint » (vert). */
.wa-join {
	flex: 1;
	cursor: pointer;
	padding: .55rem .5rem;
	border: 2px solid var(--red);
	border-radius: 10px;
	background: var(--red);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: .82rem;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.wa-join:hover { background: #c60014; border-color: #c60014; }
.wa-join[disabled] { opacity: .6; cursor: wait; }
.wa-join__on { display: none; }
.wa-card.is-followed .wa-join { background: #2e9e4f; border-color: #2e9e4f; }
.wa-card.is-followed .wa-join:hover { background: #278844; border-color: #278844; }
.wa-card.is-followed .wa-join__on { display: inline; }
.wa-card.is-followed .wa-join__off { display: none; }
/* Lien discret « Quitter » (visible seulement une fois rejoint). */
.wa-leave {
	flex: none;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: .78rem;
	color: var(--muted-fg);
	text-decoration: underline;
	padding: .2rem;
}
.wa-leave:hover { color: var(--red); }
.wa-leave[hidden] { display: none; }
.wa-card__join { font-weight: 700; font-size: .82rem; color: var(--red); white-space: nowrap; }
.wa-card__join.is-soon { color: var(--muted-fg); cursor: default; opacity: .7; }

/* Décryptages vidéo */
.video-card { display: block; color: inherit; }
.video-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border: 2px solid var(--ink);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ink);
}
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
	transition: transform .15s ease;
}
.video-card__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
	transform: translateX(2px);
}
.video-card:hover .video-card__play { transform: scale(1.12); }
.video-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em; /* réserve 2 lignes → cartes de hauteur homogène */
	margin-top: .75rem;
	font-weight: 600;
	line-height: 1.35;
}
.video-grid { align-items: start; }

/* Gazette */
.gazette-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}
.gazette-card__img { aspect-ratio: 16 / 9; overflow: hidden; }
.gazette-card__img img { width: 100%; height: 100%; object-fit: cover; }
.gazette-card__body { padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.gazette-card__date { color: var(--red); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.gazette-card__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; margin: 0; }
.gazette-card__body p { color: var(--muted-fg); font-size: .92rem; margin: 0; }
.gazette-card .link-arrow { margin-top: auto; padding-top: .5rem; }

/* Bandeau de consentement cookies (RGPD). */
.cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--ink-fg);
	border-top: 3px solid var(--red);
	padding: 1.15rem var(--gutter);
	box-shadow: 0 -12px 34px rgba(0, 0, 0, .28);
	animation: cookie-in .35s ease;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-in {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
.cookie-banner__inner {
	max-width: var(--container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 320px; font-size: .9rem; line-height: 1.5; }
.cookie-banner__text p { margin: 0 0 .35rem; }
.cookie-banner__services { color: rgba(252, 252, 252, .7); font-size: .82rem; }
.cookie-banner__link { color: var(--red); font-weight: 600; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: .75rem; flex-shrink: 0; }
.cookie-banner .btn { padding: .6rem 1.15rem; font-size: .85rem; box-shadow: 3px 3px 0 rgba(0, 0, 0, .6); }
.cookie-banner .btn--ghost { color: var(--ink-fg); border-color: rgba(252, 252, 252, .4); box-shadow: none; }
@media (max-width: 720px) {
	.cookie-banner__actions { width: 100%; }
	.cookie-banner__actions .btn { flex: 1; justify-content: center; }
}

/* Cartes « feature » : contour rouge animé + léger soulèvement au survol. */
.feature {
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.feature:hover {
	border-color: var(--red);
	box-shadow: 0 0 0 1px var(--red);
	transform: translateY(-3px);
}
/* Picto : petit « pop » (agrandissement + balancement) au survol de la carte. */
.feature__icon {
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
	transform-origin: left center;
}
.feature:hover .feature__icon { transform: scale(1.18) rotate(-6deg); }

/* Police display (Anton) = graisse unique 400. theme.json applique cette police
   à TOUS les titres h1–h6, mais sans graisse → un titre nu hérite du gras 700 du
   navigateur, ce qui déclenche un faux-gras baveux (contenu riche, etc.).
   On force 400 sur tous les titres : rendu net partout. Les composants qui
   fixent déjà leur propre graisse ne sont pas affectés. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/* Page d'accueil : justifier les pavés de texte (paragraphes de corps).
   hyphens:auto atténue les « rivières » d'espaces dans les colonnes étroites. */
.page-id-24 .lead,
.page-id-24 .flow p {
	text-align: justify;
	hyphens: auto;
}
/* …sauf la citation (police display en grand) : la justification y crée de gros
   trous entre les mots et des césures disgracieuses. On la garde alignée à gauche. */
.page-id-24 .flow .quote__text {
	text-align: left;
	hyphens: manual;
}

/* Sections manifeste / équipe : espacement vertical réduit (moins de blanc). */
.section--tight { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Portraits (manifeste / équipe) : format plus compact, centré dans la colonne,
   avec un léger zoom au survol (rogné par .media { overflow:hidden }). */
.figure--portrait { max-width: 360px; margin-inline: auto; }
.figure--portrait .media { aspect-ratio: 4 / 5; }
.figure--portrait .media img { transition: transform .45s ease; }
.figure--portrait:hover .media img { transform: scale(1.06); }

/* Badge/logo du hero : légèrement de travers. */
.hero__logo-disc { transform: rotate(-6deg); }

/* Lien « Nos combats » du hero : noir par défaut, rouge au survol. */
.hero__actions .link-arrow { color: var(--ink); }
.hero__actions .link-arrow:hover { color: var(--red); }

/* Liens du menu légal dans la barre de pied de page. */
.footer__legal-links a { color: rgba(252,252,252,.7); text-decoration: underline; }
.footer__legal-links a:hover { color: var(--red); }

/* Évite la micro-barre de défilement horizontale des sections full-bleed
   (50vw). « clip » n'établit pas de conteneur de scroll → header/TOC sticky
   préservés (contrairement à overflow-x: hidden). */
body { overflow-x: clip; }

/* Image + Texte variante « wide » : photo en pleine largeur (bord à bord),
   sans bordure ni coins arrondis. La légende reste alignée sur le contenu. */
.wide-figure {
	width: auto;
	margin-inline: calc(50% - 50vw);
}
.wide-figure .media {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.wide-figure figcaption {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ext-icon svg { width: 20px; height: 20px; }
.channel__icon svg { width: 34px; height: 34px; }
.channel-featured__icon svg { width: 40px; height: 40px; }
.promo-card__icon svg { width: 28px; height: 28px; }
.live-card__eyebrow svg,
.region__lock svg,
.pill-muted svg,
.section-head-row .pill-muted svg { width: 16px; height: 16px; }

/* Bouton en cours de traitement (tunnel d'adhésion Stripe). */
.btn.is-loading { opacity: .7; pointer-events: none; cursor: progress; }

/* Accessibilité : lien d'évitement + texte lecteur d'écran (masqués hors focus
   clavier ; styles.css de référence ne fournit pas ces utilitaires). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 700;
	border-radius: 8px;
	box-shadow: var(--shadow-hard);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Accueil — section « Combats » : cartes un peu moins hautes + bloc
   « Notre ambition » dans un pavé sombre (aligne le rendu sur la maquette).
   -------------------------------------------------------------------------- */
.page-id-24 .combat-card { min-height: 210px; padding: 1.75rem; }

.ambition-panel {
	margin-top: 4rem;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--radius);
}
.ambition-panel .eyebrow { margin-bottom: 1.25rem; }
/* Titre du pavé : hauteur de ligne aérée pour que les accents (« OÙ »,
   « RÉELLE ») ne touchent pas la ligne du dessus. Les retours à la ligne sont
   pilotés par le contenu (<br>), donc on annule la règle `.title span{block}`
   pour garder la portion accentuée sur la même ligne. */
.ambition-panel__title { line-height: 1.14; }
.ambition-panel__title span { display: inline; }
.ambition-panel__lead { margin-top: 1.75rem; max-width: 70ch; }

@media (max-width: 640px) {
	.ambition-panel { padding: 1.75rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   Espace membre — Gazette en accordéon lisible (le contenu complet
   `gazette_contenu` s'ouvre au clic ; réutilise le composant .accordion).
   -------------------------------------------------------------------------- */
.gazette-item__head { display: flex; flex-direction: column; gap: .3rem; }
.gazette-item__title {
	font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
	font-size: 1.3rem; line-height: 1.05;
}
.gazette-item__chapo { font-family: var(--font-sans); font-weight: 400; font-size: .92rem; color: var(--muted-fg); }
.gazette-item__body > :first-child { margin-top: 0; }
.gazette-item__img { border-radius: 10px; overflow: hidden; margin-bottom: 1.1rem; }
.gazette-item__img img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Bannière « Nos combats » : photo affichée pleinement, sans voile sombre.
   On garde une ombre portée sur le titre pour conserver un minimum de
   lisibilité du texte blanc/rouge par-dessus l'image.
   -------------------------------------------------------------------------- */
.banner::after { background: none; }
.banner__title { text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.banner__title span { color: #fff; }
.banner__title .title__accent { color: var(--red); }

/* --------------------------------------------------------------------------
   Espace membre — Vidéo de bienvenue (YouTube ou fichier uploadé), 16:9.
   -------------------------------------------------------------------------- */
.welcome-video { max-width: 860px; }
.welcome-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: var(--ink);
	box-shadow: var(--shadow-hard);
}
.welcome-video__frame iframe,
.welcome-video__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
}
.welcome-video__text { margin-top: 1rem; color: var(--muted-fg); font-size: .98rem; }
.welcome-video__text p { margin: 0 0 .5rem; }

/* --------------------------------------------------------------------------
   Espace membre — Médiathèque vidéo (CPT « video »). Cartes cliquables
   (bouton) ouvrant un lecteur YouTube en lightbox + filtres par catégorie.
   -------------------------------------------------------------------------- */
button.video-card {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.video-card__cat {
	display: inline-block;
	margin-top: .4rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red);
}
.video-card.is-hidden { display: none; }

.mediatheque__filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
}
.media-chip {
	padding: .4rem .9rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: #fff;
	font-size: .82rem;
	font-weight: 600;
	color: var(--foreground);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.media-chip:hover { border-color: var(--ink); }
.media-chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }

/* Lightbox de lecture */
.video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.video-lightbox[hidden] { display: none; }
.video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(6, 9, 17, .82); }
.video-lightbox__dialog {
	position: relative;
	width: min(960px, 100%);
	z-index: 1;
}
.video-lightbox__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	box-shadow: var(--shadow-hard);
}
.video-lightbox__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-lightbox__close {
	position: absolute;
	top: -3rem;
	right: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	font-size: 2rem;
	line-height: 1;
	color: #fff;
	background: none;
	border: 0;
	cursor: pointer;
}
@media (max-width: 600px) {
	.video-lightbox__close { top: -2.6rem; }
}

/* Décryptage — barre d'outils (filtres + recherche), voir-plus, légende lightbox */
.mediatheque__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-bottom: 1.5rem;
}
.mediatheque__toolbar .mediatheque__filters { margin-bottom: 0; }
.mediatheque__search {
	flex: 1 1 200px;
	max-width: 320px;
	margin-left: auto;
}
.mediatheque__search input {
	width: 100%;
	padding: .5rem .95rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: .9rem;
}
.mediatheque__search input:focus { outline: none; border-color: var(--red); }
.mediatheque__more { text-align: center; margin-top: 1.5rem; }

.video-lightbox__dialog { max-height: calc(100vh - 5rem); display: flex; flex-direction: column; }
.video-lightbox__meta {
	flex: 1 1 auto;
	overflow-y: auto;
	margin-top: .9rem;
	padding: 1.1rem 1.35rem;
	background: var(--cream);
	border: 2px solid var(--ink);
	border-radius: 12px;
	box-shadow: var(--shadow-hard);
}
.video-lightbox__meta[hidden] { display: none; }
.video-lightbox__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 3.5vw, 1.9rem);
	line-height: 1.1;
	margin: 0 0 .6rem;
	color: var(--ink);
}
.video-lightbox__legend { color: var(--muted-fg); font-size: .98rem; line-height: 1.65; }
.video-lightbox__legend p { margin: 0 0 .8rem; }
.video-lightbox__legend p:last-child { margin-bottom: 0; }

/* Anti-blanchiment — bloc adresse obligatoire (montant élevé) */
.lg-aml-box { border: 2px solid var(--red); }
.lg-aml-box__note { font-size: .9rem; color: var(--muted-fg); margin: 0 0 1rem; }
.lg-aml-box__row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; }
.lg-aml-box__row > div { flex: 1 1 45%; }

/* --------------------------------------------------------------------------
   Header — lien de connexion / espace membre (adhérent déjà inscrit).
   Placé dans .nav → visible sur le menu desktop ET le menu mobile déroulant.
   -------------------------------------------------------------------------- */
.nav__account {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.nav__account svg { width: 16px; height: 16px; flex: none; }

/* Version compacte : icône seule (« Mon espace » / « Déconnexion » une fois
   connecté) pour éviter que le menu passe sur deux lignes. */
.nav__icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
}
.nav__icon-link svg { width: 20px; height: 20px; flex: none; }
/* Pas de barre rouge animée sous une icône seule (réservée aux liens texte). */
.nav__icon-link::after { display: none; }
.nav__logout { opacity: .75; }
.nav__logout:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Espace membre — « Mes informations » : formulaire de profil (état civil,
   coordonnées, adresse postale).
   -------------------------------------------------------------------------- */
.profile-form__legend {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.15rem;
	letter-spacing: .01em;
	color: var(--red);
	margin: 1.75rem 0 1rem;
}
.profile-form__legend:first-of-type { margin-top: .5rem; }
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.25rem;
}
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field > span {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--muted-fg);
}
.form-field input,
.form-field select {
	padding: .7rem .85rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: var(--foreground);
}
.form-field input:focus,
.form-field select:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 15%, transparent);
}
.profile-form__actions { margin-top: 1.5rem; }

.form-notice {
	margin: 0 0 1.25rem;
	padding: .85rem 1.15rem;
	border-radius: 10px;
	font-size: .92rem;
	font-weight: 600;
}
.form-notice--ok { background: rgba(56, 214, 107, .12); border: 1px solid rgba(56, 214, 107, .4); color: #1c7a3e; }
.form-notice--err { background: color-mix(in srgb, var(--red) 8%, #fff); border: 1px solid color-mix(in srgb, var(--red) 35%, #fff); color: var(--red); }

@media (max-width: 600px) {
	.form-grid { grid-template-columns: 1fr; }
}
.profile-form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.profile-form__hint { font-size: .8rem; color: var(--muted-fg); }

/* --------------------------------------------------------------------------
   Espace membre — bouton « Mes informations » (dans le hero, à côté du badge
   d'adhésion) + formulaire de profil en modale (n'alourdit plus la page).
   -------------------------------------------------------------------------- */
.member-hero__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}
.member-hero__meta .member-status { margin-top: 0; }
.member-edit-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	border: 1px solid rgba(252, 252, 252, .4);
	background: rgba(252, 252, 252, .06);
	color: var(--ink-fg);
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.member-edit-btn svg { width: 17px; height: 17px; flex: none; }
.member-edit-btn:hover { background: var(--red); border-color: var(--red); }

.profile-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	overflow-y: auto;
}
.profile-modal[hidden] { display: none; }
.profile-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 9, 17, .78); }
.profile-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(680px, 100%);
	margin: auto;
	background: #fff;
	border-radius: 16px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--shadow-hard);
}
.profile-modal__dialog .member-module__title { margin-top: 0; }
.profile-modal__close {
	position: absolute;
	top: .75rem;
	right: 1rem;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--foreground);
	background: none;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
}
.profile-modal__close:hover { background: rgba(0, 0, 0, .06); }

/* --------------------------------------------------------------------------
   Paragraphes d'intro (.lead) : réduction d'environ 1 à 2 pt sur tout le site
   (référence : clamp(1.05rem,1.6vw,1.35rem)).
   -------------------------------------------------------------------------- */
.lead { font-size: clamp(0.94rem, 1.5vw, 1.22rem); }
.page-hero .lead { font-size: clamp(0.94rem, 1.5vw, 1.18rem); }

/* Encart « récompense » dans la modale profil (lettre + sticker). */
.profile-reward {
	margin: 0 0 1.25rem;
	padding: .9rem 1.15rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--red) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--red) 30%, #fff);
	font-size: .92rem;
	line-height: 1.5;
	color: var(--foreground);
}
.profile-reward strong { color: var(--red); }
.profile-reward--done {
	background: rgba(56, 214, 107, .12);
	border-color: rgba(56, 214, 107, .4);
}

/* --------------------------------------------------------------------------
   Sticker « Les #Gueux » (visuel HTML/CSS) + carte d'incitation à compléter
   sa fiche (récompense : lettre d'Alexandre Jardin + sticker).
   -------------------------------------------------------------------------- */
.gueux-sticker {
	flex: none;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: var(--ink);
	display: grid;
	place-items: center;
	box-shadow: 0 8px 24px rgba(6, 9, 17, .25);
}
.gueux-sticker__wm {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	line-height: .86;
	text-align: center;
	letter-spacing: -.02em;
}
.gueux-sticker__les { display: block; color: #fff; font-size: 1.85rem; }
.gueux-sticker__les sup { font-size: .62em; top: -.35em; }
.gueux-sticker__gx { display: block; color: var(--red); font-size: 1.85rem; }

.reward-card {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 2.25rem);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	border-radius: 18px;
	background: color-mix(in srgb, var(--red) 5%, #fff);
	border: 1px solid color-mix(in srgb, var(--red) 22%, #fff);
}
.reward-card--done {
	background: rgba(56, 214, 107, .08);
	border-color: rgba(56, 214, 107, .35);
}
.reward-card__body { flex: 1; min-width: 0; }
.reward-card__kicker {
	display: inline-block;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: .5rem;
}
.reward-card--done .reward-card__kicker { color: #1c7a3e; }
.reward-card__title {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.1;
	margin: 0 0 .6rem;
}
.reward-card__body p { color: var(--muted-fg); margin: 0 0 1.1rem; max-width: 60ch; }
.reward-card__link { color: var(--ink); border: 0; background: none; cursor: pointer; font: inherit; }

@media (max-width: 640px) {
	.reward-card { flex-direction: column; text-align: center; }
	.reward-card__body p { margin-inline: auto; }
	.reward-card__kicker { margin-top: .25rem; }
}

/* --------------------------------------------------------------------------
   Bloc RGPD dans la modale profil : effacer ses coordonnées / supprimer compte.
   -------------------------------------------------------------------------- */
.rgpd-block {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.rgpd-block__text { font-size: .86rem; color: var(--muted-fg); line-height: 1.55; margin: 0 0 1.1rem; }
.rgpd-block__text a { color: var(--red); text-decoration: underline; }
.rgpd-block__actions { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-start; }
.rgpd-block__actions form { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.rgpd-btn {
	align-self: flex-start;
	padding: .5rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: #fff;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--foreground);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.rgpd-btn:hover { border-color: var(--ink); }
.rgpd-btn--danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, #fff); }
.rgpd-btn--danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.rgpd-confirm { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; color: var(--muted-fg); max-width: 32ch; }
.rgpd-confirm input { margin-top: .15rem; }
.wa-card__soon { margin: .5rem 0 0; font-size: .74rem; color: var(--muted-fg); font-style: italic; }

/* Section « Notre communauté » : image affichée en entier (moins zoomée) dans
   son cadre portrait. Fond sombre pour fondre d'éventuelles bandes (photo sombre). */
.media--contain { background: var(--ink); }
.media--contain img { object-fit: contain; }

/* ==========================================================================
   Cookies — gestionnaire de consentement à 2 niveaux (CNIL)
   ========================================================================== */
/* Bouton flottant : rouvrir ses préférences depuis n'importe quelle page. */
.cc-reopen {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 900;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid var(--ink);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(6, 9, 17, .18);
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cc-reopen[hidden] { display: none; }
.cc-reopen:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }
.cc-reopen svg { width: 24px; height: 24px; }

/* Troisième bouton « Paramétrer » : s'intègre au bandeau existant. */
.cookie-banner__actions { flex-wrap: wrap; }

/* Fenêtre de préférences (2e niveau). */
.cc-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2.5rem);
	overflow-y: auto;
}
.cc-modal[hidden] { display: none; }
.cc-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 9, 17, .8); }
.cc-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(620px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	margin: auto;
	background: #fff;
	color: var(--foreground);
	border-radius: 16px;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: var(--shadow-hard);
}
.cc-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cc-modal__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.1; margin: 0; }
.cc-modal__close { background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--foreground); padding: .2rem .4rem; }
.cc-modal__close:hover { color: var(--red); }
.cc-modal__intro { color: var(--muted-fg); font-size: .9rem; margin: .5rem 0 1.25rem; }
.cc-modal__intro a { color: var(--red); text-decoration: underline; }

.cc-cat { padding: 1rem 0; border-top: 1px solid var(--border); }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cc-cat__name { font-weight: 700; font-size: 1rem; }
.cc-cat__always { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #2e7d32; }
.cc-cat__desc { color: var(--muted-fg); font-size: .86rem; line-height: 1.5; margin: .5rem 0 0; }

/* Interrupteur (toggle) accessible. */
.cc-switch { position: relative; display: inline-flex; flex: none; width: 46px; height: 26px; cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch__slider { position: absolute; inset: 0; background: #c9ccd1; border-radius: 999px; transition: background .15s ease; }
.cc-switch__slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cc-switch input:checked + .cc-switch__slider { background: var(--red); }
.cc-switch input:checked + .cc-switch__slider::after { transform: translateX(20px); }
.cc-switch input:focus-visible + .cc-switch__slider { outline: 2px solid var(--ink); outline-offset: 2px; }

.cc-modal__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.cc-modal__actions .btn { flex: 1; min-width: 130px; justify-content: center; }

/* Placeholder d'embed vidéo bloqué tant que le consentement n'est pas donné. */
.welcome-video__frame[data-cc-embed] { display: flex; align-items: center; justify-content: center; }
.cc-embed-placeholder { text-align: center; padding: 1.5rem; max-width: 34ch; }
.cc-embed-placeholder p { margin: 0 0 1rem; font-size: .9rem; color: rgba(252, 252, 252, .85); line-height: 1.5; }

/* Tableau des bases légales / durées de conservation (page confidentialité). */
.legal-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 2rem; font-size: .88rem; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: .6rem .75rem; text-align: left; vertical-align: top; }
.legal-table th { background: var(--ink); color: var(--ink-fg); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.legal-table tr:nth-child(even) td { background: rgba(0, 0, 0, .02); }
@media (max-width: 720px) {
	.legal-table, .legal-table thead, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; }
	.legal-table th { border-bottom: 0; }
	.legal-table td { border-top: 0; }
	.legal-table tr { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
}

/* Cases à cocher de consentement (page Rejoindre / adhésion) */
#lg-consent-box { display: grid; gap: .85rem; }
.lg-consent-item {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-size: .9rem;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}
.lg-consent-item input[type="checkbox"] { margin-top: .2rem; flex: none; width: 1.05rem; height: 1.05rem; }
.lg-consent-item a { text-decoration: underline; }

/* Statuts — bloc de signatures (page /statuts/) */
.statuts-signdate { margin-top: 2.5rem; }
.statuts-signatures {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem 2rem;
	margin-top: 1rem;
}
.statuts-sign { margin: 0; text-align: left; }
.statuts-sign img {
	display: block;
	height: 84px;
	width: auto;
	max-width: 100%;
	margin-bottom: .35rem;
}
.statuts-sign figcaption { line-height: 1.35; }
.statuts-sign figcaption strong { display: block; font-family: var(--font-display, inherit); }
.statuts-sign figcaption span { color: var(--muted); font-size: .85em; }
@media (max-width: 560px) {
	.statuts-signatures { grid-template-columns: 1fr; }
}

/* Case newsletter dans la fiche « Mes informations » (espace membre) */
.profile-newsletter {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin: 1.25rem 0 .25rem;
	font-size: .9rem;
	line-height: 1.5;
	cursor: pointer;
}
.profile-newsletter input[type="checkbox"] { margin-top: .2rem; flex: none; width: 1.05rem; height: 1.05rem; }

/* Préférence newsletter — formulaire indépendant (espace membre, sous la fiche) */
.profile-newsletter-form {
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.profile-newsletter-form__btn { margin-top: .9rem; }

/* Groupe Telegram national — carte mise en avant (espace membre) */
.national-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.6rem 2rem;
	border-radius: 16px;
	background: var(--ink);
	color: var(--ink-fg);
	box-shadow: var(--shadow-hard);
	border: 2px solid var(--red);
}
.national-group__badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--red);
}
.national-group__badge svg { width: 16px; height: 16px; }
.national-group__title {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	margin: .35rem 0 0;
	color: #fff;
}
.national-group__desc { color: rgba(252, 252, 252, .72); margin: .5rem 0 0; font-size: .95rem; max-width: 46ch; }
.national-group__cta { flex: none; }
.national-group__cta svg { width: 18px; height: 18px; vertical-align: text-bottom; }
@media (max-width: 640px) {
	.national-group { flex-direction: column; align-items: flex-start; }
	.national-group__cta { width: 100%; text-align: center; }
}

/* Groupe national — boutons rejoindre/quitter sur la carte sombre */
.national-group__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.national-group .wa-leave { color: rgba(252, 252, 252, .75); }
.national-group .wa-leave:hover { color: #fff; }
@media (max-width: 640px) {
	.national-group__actions { width: 100%; }
	.national-group__actions .wa-join { flex: 1; }
}