/* ==========================================================================
   Faevent — couche de marque du site public (layout, accueil, événements, catégories, page de vente, organisateurs, à propos)
   --------------------------------------------------------------------------
   Les composants viennent de MudBlazor et prennent leurs couleurs, leur
   typographie et leurs rayons dans FaeventTheme.cs. Ce fichier ne contient
   que ce que le thème ne sait pas exprimer : tokens complémentaires,
   hauteurs de boutons, indicateur du menu actif, pied de page sombre.
   Rien n'est global : tokens et règles ne s'appliquent que dans .fe-site,
   la classe posée par FaeventLayout. Les pages existantes ne sont pas touchées.
   Sections 1 à 7 : thème et layout. Sections 8 à 18 : composants et page d'accueil.
   Sections 19 à 25 : page Événements et pages Catégories. Sections 26 à 33 : page de vente.
   Sections 34 à 41 : page « Pour les organisateurs ». Sections 42 à 47 : page « À propos ».
   ========================================================================== */

/* ---------- 1. Tokens ----------
   Quand un token existe dans le thème MudBlazor, il le reprend : le thème reste la seule source.
   La valeur de repli sert pendant le pré-rendu, avant l'injection des variables du thème.
   Déclarés sur .fe-site (et non :root) pour ne pas entrer en conflit avec les variables du reste de l'application. */
.fe-site {
  --brand: var(--mud-palette-primary, #83000e);
  --brand-hover: var(--mud-palette-primary-darken, #6a000b);
  --brand-text: #83000e;
  --brand-tint: #fbeaec;
  --brand-on-dark: #ff5a66;
  --on-brand: var(--mud-palette-primary-text, #ffffff);

  --accent: var(--mud-palette-secondary, #f49616);
  --accent-text: #a35c00;
  --accent-tint: #fef3e2;
  --on-accent: var(--mud-palette-secondary-text, #0b0b0d);

  --ink: var(--mud-palette-text-primary, #0b0b0d);
  --ink-muted: var(--mud-palette-text-secondary, #6b7280);
  --ink-subtle: #5b616e;

  --background: var(--mud-palette-background, #ffffff);
  --surface: var(--mud-palette-surface, #ffffff);
  --surface-alt: var(--mud-palette-background-gray, #f5f5f7);

  --night: #0b0b0d;
  --on-night: #ffffff;
  --on-night-muted: #a1a1aa;
  --overlay: rgba(11, 11, 13, .62);

  --line: var(--mud-palette-lines-default, #e5e7eb);
  --line-strong: var(--mud-palette-lines-inputs, #8a909c);
  --focus: #0b0b0d;
  --success: var(--mud-palette-success, #0f7b4f);
  --error: var(--mud-palette-error, #b42318);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(11, 11, 13, .06), 0 1px 3px rgba(11, 11, 13, .08);
  --shadow-card-hover: 0 14px 32px rgba(11, 11, 13, .12), 0 2px 6px rgba(11, 11, 13, .06);
  --shadow-raised: 0 20px 48px rgba(11, 11, 13, .18), 0 4px 12px rgba(11, 11, 13, .08);

  --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 250ms;
  --fe-ease: cubic-bezier(.2, .8, .2, 1);

  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 2. Base ---------- */
html:has(.fe-site) { scroll-padding-top: 88px; } /* les ancres ne passent pas sous l'en-tête fixe */

.fe-site { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }
.fe-app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--background); }
.fe-main { flex: 1 0 auto; outline: none; }

.fe-site :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fe-site .mud-input-slot:focus-visible { outline: none; } /* les champs MudBlazor ont déjà leur contour actif */
/* Cibles de focus posées par programme, non interactives : le titre de page (FocusOnNavigate de Blazor le
   sélectionne après chaque navigation pour l'annoncer aux lecteurs d'écran) et le contenu principal (lien d'évitement). */
.fe-site :is(h1, h2, h3, h4, h5, h6, .fe-main):focus,
.fe-site :is(h1, h2, h3, h4, h5, h6, .fe-main):focus-visible { outline: none; }

/* Lien d'évitement : visible uniquement au clavier */
.fe-skip { position: absolute; left: var(--space-4); top: -64px; z-index: 2000; padding: 10px 16px; border-radius: var(--radius-md); background: var(--night); color: var(--on-night); font-weight: 700; font-size: 14px; text-decoration: none; transition: top var(--duration-fast) var(--fe-ease); }
.fe-skip:focus { top: var(--space-2); }

.fe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fe-site [hidden] { display: none !important; } /* l'attribut hidden l'emporte sur les display déclarés plus bas */

@media (prefers-reduced-motion: reduce) {
  .fe-site *, .fe-site *::before, .fe-site *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 3. Boutons MudBlazor ----------
   Couleurs et rayon : thème. Ici : hauteurs (40 / 44 / 52 px), ombre au survol seulement, léger retrait au clic.
   Les boutons icônes (MudIconButton) gardent leurs dimensions MudBlazor. */
.fe-site .mud-button-root.mud-button:not(.mud-icon-button) { min-height: 44px; padding-inline: 20px; white-space: nowrap; transition: background-color var(--duration-fast) var(--fe-ease), border-color var(--duration-fast) var(--fe-ease), color var(--duration-fast) var(--fe-ease), transform var(--duration-fast) var(--fe-ease), box-shadow var(--duration-base) var(--fe-ease); }
.fe-site .mud-button-root.mud-button:active { transform: scale(.98); }
.fe-site .mud-button-root.mud-button-filled:hover { box-shadow: var(--shadow-card); }
.fe-site .mud-button-root.mud-button-outlined { border-width: 1.5px; }

.fe-site .mud-button-root.mud-button-text-size-small:not(.mud-icon-button),
.fe-site .mud-button-root.mud-button-outlined-size-small:not(.mud-icon-button),
.fe-site .mud-button-root.mud-button-filled-size-small:not(.mud-icon-button) { min-height: 40px; padding-inline: 16px; font-size: 13px; border-radius: var(--radius-sm); }

.fe-site .mud-button-root.mud-button-text-size-large:not(.mud-icon-button),
.fe-site .mud-button-root.mud-button-outlined-size-large:not(.mud-icon-button),
.fe-site .mud-button-root.mud-button-filled-size-large:not(.mud-icon-button) { min-height: 52px; padding-inline: 28px; font-size: 15px; }

.fe-site .mud-button-root:disabled { transform: none; box-shadow: none; }

/* Bouton clair, pour les fonds sombres : <MudButton Variant="Variant.Filled" Class="fe-btn--light"> */
.fe-site .mud-button-root.fe-btn--light { background: var(--on-night); color: var(--night); }
.fe-site .mud-button-root.fe-btn--light:hover { background: var(--accent); color: var(--on-accent); }
/* Bouton à contour clair, pour les fonds sombres : <MudButton Variant="Variant.Outlined" Class="fe-btn--outline-light"> */
.fe-site .mud-button-root.fe-btn--outline-light { border-color: rgba(255, 255, 255, .45); color: var(--on-night); }
.fe-site .mud-button-root.fe-btn--outline-light:hover { border-color: var(--on-night); background: rgba(255, 255, 255, .08); }

/* ---------- 4. En-tête ---------- */
/* Filet sous l'en-tête : une ombre d'1 px plutôt qu'une bordure, pour ne pas décaler le contenu */
.fe-header.mud-appbar { box-shadow: 0 1px 0 var(--line); }
.fe-header__bar { display: flex; align-items: center; gap: var(--space-8); height: 100%; }

.fe-logo { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius-sm); }
.fe-logo img { display: block; height: 36px; width: auto; }

.fe-nav { align-self: stretch; gap: 2px; }
.fe-nav__link { position: relative; display: flex; align-items: center; padding: 0 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; text-decoration: none; transition: color var(--duration-fast) var(--fe-ease); }
.fe-nav__link:hover { color: var(--ink); }
/* Indicateur du menu actif : petite barre rouge sous le libellé */
.fe-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 16px; height: 3px; border-radius: var(--radius-pill); background: var(--brand); transform: scaleX(0); transition: transform var(--duration-base) var(--fe-ease); }
.fe-nav__link:hover::after { transform: scaleX(.35); }
.fe-nav__link.is-active { color: var(--brand-text); }
.fe-nav__link.is-active::after { transform: scaleX(1); }
.fe-nav__link:focus-visible { outline-offset: -8px; border-radius: var(--radius-md); }

.fe-header__actions { align-items: center; gap: var(--space-2); }

@media (max-width: 1179.98px) {
  .fe-header__bar { gap: var(--space-4); }
  .fe-nav__link { padding: 0 9px; }
  .fe-nav__link::after { left: 9px; right: 9px; }
}
@media (max-width: 959.98px) {
  .fe-header__bar.mud-container { padding-right: var(--space-2); }
  .fe-header .fe-logo img { height: 30px; }
  .fe-header__actions { gap: 0; }
}

/* ---------- 5. Menu mobile (MudDrawer) ---------- */
.fe-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; }
.fe-drawer__head.mud-drawer-header { align-items: center; min-height: 64px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.fe-drawer__head .fe-logo img { height: 30px; }
.fe-drawer__nav.mud-navmenu { padding: var(--space-2); }
.fe-drawer__nav .mud-nav-link { min-height: 48px; font-size: 15px; font-weight: 600; }
.fe-drawer__nav .mud-nav-link.active:not(.mud-nav-link-disabled) { font-weight: 700 !important; background-color: var(--brand-tint); color: var(--brand-text); }
.fe-drawer__nav .mud-nav-link.active .mud-nav-link-icon { color: var(--brand-text); }
.fe-drawer__actions { margin-top: auto; padding: var(--space-4); border-top: 1px solid var(--line); }

/* ---------- 6. Pied de page ----------
   Les variables de palette MudBlazor sont redéfinies dans cette zone : les composants qui s'y trouvent
   (liens, champ, boutons icônes, pastilles) passent en version « fond sombre » sans autre réglage. */
.fe-footer {
  --mud-palette-text-primary: #ffffff;
  --mud-palette-text-secondary: #a1a1aa;
  --mud-palette-action-default: #ffffff;
  --mud-palette-action-default-hover: rgba(255, 255, 255, .08);
  --mud-palette-lines-default: rgba(255, 255, 255, .14);
  --mud-palette-lines-inputs: rgba(255, 255, 255, .28);
  --mud-palette-divider: rgba(255, 255, 255, .14);
  --mud-palette-error: #f97066;
  flex: none;
  padding-block: var(--space-16) var(--space-8);
  background: var(--night);
  color: var(--on-night);
}

.fe-footer :focus-visible { outline-color: var(--on-night); }
.fe-footer__logo { margin-bottom: var(--space-4); }
.fe-footer__logo img { height: 40px; }
.fe-footer__text.mud-typography { color: var(--on-night-muted); font-size: 14px; line-height: 22px; }
.fe-footer__title.mud-typography { display: block; margin: 0 0 var(--space-4); font-size: 13px; line-height: 20px; color: var(--on-night); }

.fe-footer__links { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fe-footer__links li { color: var(--on-night-muted); transition: color var(--duration-fast) var(--fe-ease); } /* MudLink Color.Inherit reprend cette couleur */
.fe-footer__links li:hover, .fe-footer__links li:focus-within { color: var(--on-night); }
.fe-footer__links .mud-link { font-size: 14px; line-height: 20px; }

.fe-footer__socials { margin-top: var(--space-6); }
.fe-footer__socials .mud-icon-button { width: 40px; height: 40px; border-radius: 50%; border-color: rgba(255, 255, 255, .2); }
.fe-footer__socials .mud-icon-button:hover { border-color: var(--on-night); }

/* Newsletter */
.fe-news { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); }
.fe-news__field { flex: 1; min-width: 0; --mud-palette-primary: #ffffff; } /* contour et libellé blancs quand le champ est actif */
.fe-news__field.mud-input-control { margin: 0; }
.fe-site .fe-news .fe-news__button.mud-button-root.mud-button { flex: none; min-height: 40px; } /* même hauteur que le champ */

.fe-footer__rule.mud-divider { margin-top: var(--space-12); }
.fe-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4) var(--space-6); padding-top: var(--space-6); }

/* Moyens de paiement */
.fe-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fe-pay__label.mud-typography { margin-right: 4px; color: var(--on-night-muted); }
.fe-pay__chip.mud-chip { height: 32px; margin: 0; padding: 0 12px; border-radius: var(--radius-sm); border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); color: var(--on-night); font-size: 12px; font-weight: 700; }
.fe-pay__logo { margin-right: 6px; border-radius: 3px; }

@media (max-width: 959.98px) {
  .fe-footer { padding-block: var(--space-12) var(--space-6); }
  .fe-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599.98px) {
  .fe-news { flex-direction: column; align-items: stretch; }
}

/* ---------- 7. Message d'erreur Blazor ---------- */
.fe-site #blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; padding: 12px 48px 12px 20px; background: var(--accent-tint); color: #5c3500; font-family: var(--font-body); font-size: 14px; font-weight: 600; box-shadow: 0 -8px 24px rgba(11, 11, 13, .10); }
.fe-site #blazor-error-ui .reload { margin-left: 8px; color: var(--brand-text); font-weight: 700; }
.fe-site #blazor-error-ui .dismiss { position: absolute; right: 16px; top: 10px; cursor: pointer; }

/* ==========================================================================
   Étape 2 — composants d'événements et page d'accueil
   ========================================================================== */

/* ---------- 8. Sections ---------- */
.fe-site { --gutter: 16px; } /* marge latérale de MudContainer : 16 px, puis 24 px à partir de 600 px */
@media (min-width: 600px) { .fe-site { --gutter: 24px; } }

.fe-section { padding-block: var(--space-24); }
.fe-section--alt { background: var(--surface-alt); }
.fe-section--banner { padding-block: 0 var(--space-2); }
.fe-section--tight { padding-block: 88px 0; }
.fe-agenda { padding-block: 72px; }

.fe-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.fe-sechead__title.mud-typography { letter-spacing: -.015em; }
.fe-sechead__sub.mud-typography { margin-top: 6px; color: var(--ink-muted); }
.fe-section--alt .fe-sechead__sub.mud-typography, .fe-section--alt .fe-meta { color: var(--ink-subtle); }
.fe-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.fe-kicker .mud-icon-root { font-size: 18px; }
.fe-link.mud-link { align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.fe-link .mud-icon-root { font-size: 18px; }
.fe-more { display: flex; justify-content: center; margin-top: var(--space-8); }
.fe-empty.mud-typography { padding: var(--space-6); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-subtle); text-align: center; }

/* ---------- 9. Badges, pastille de date, affiches ---------- */
.fe-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.fe-badge--featured { background: var(--brand); color: var(--on-brand); }
.fe-badge--hot { background: var(--accent); color: var(--on-accent); }
.fe-badge--low { background: var(--brand-tint); color: var(--brand-text); }
.fe-badge--soldout { background: var(--night); color: var(--on-night); }
.fe-badge--neutral { background: var(--surface); color: var(--ink); }

.fe-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 56px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raised); line-height: 1; }
.fe-date b { font-family: var(--font-display); font-size: 22px; line-height: 24px; font-weight: 800; }
.fe-date span { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); }

/* Affiche (Event.ImageUrl) ou, à défaut, fond dégradé aux couleurs de la marque */
.fe-eimg.mud-image { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--duration-slow) var(--fe-ease), filter var(--duration-slow) var(--fe-ease); }
.fe-ph { position: absolute; inset: 0; background-color: #0b0b0d; transition: transform var(--duration-slow) var(--fe-ease), filter var(--duration-slow) var(--fe-ease); }
.fe-ph--1 { background-image: radial-gradient(70% 60% at 25% 0%, rgba(244, 150, 22, .9), transparent 70%), radial-gradient(80% 70% at 85% 100%, rgba(200, 16, 46, .95), transparent 70%); }
.fe-ph--2 { background-image: radial-gradient(60% 80% at 80% 10%, rgba(255, 90, 102, .85), transparent 70%), radial-gradient(70% 60% at 10% 100%, rgba(244, 150, 22, .7), transparent 70%); }
.fe-ph--3 { background-image: radial-gradient(90% 70% at 50% 110%, rgba(131, 0, 14, 1), transparent 70%), radial-gradient(40% 40% at 50% 20%, rgba(255, 255, 255, .55), transparent 70%); }
.fe-ph--4 { background-image: radial-gradient(70% 70% at 0% 0%, rgba(244, 150, 22, .95), transparent 65%), radial-gradient(60% 60% at 100% 60%, rgba(131, 0, 14, .9), transparent 70%); }
.fe-ph--crowd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: radial-gradient(14px 18px at 50% 100%, rgba(11, 11, 13, .9) 98%, transparent) 0 100% / 28px 100% repeat-x; opacity: .85; }

/* ---------- 10. Bandeau d'accueil ---------- */
.fe-hero { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.fe-hero :focus-visible { outline-color: var(--on-night); }
.fe-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fe-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, .35) 0%, var(--overlay) 45%, rgba(11, 11, 13, .82) 100%); }
.fe-hero__inner.mud-container { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-8); min-height: 640px; padding-block: 120px var(--space-12); }
.fe-hero__copy { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.fe-hero__title.mud-typography { font-size: 64px; line-height: 66px; letter-spacing: -.025em; }
.fe-hero__title span { color: var(--brand-on-dark); }
.fe-hero__lead.mud-typography { max-width: 560px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .9); }

/* Recherche : champs MudBlazor (variante Text, sans soulignement) dans un bandeau blanc */
.fe-search { display: flex; align-items: stretch; max-width: 1120px; padding: 8px; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raised); }
.fe-search__field { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px var(--space-4); border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--fe-ease), box-shadow var(--duration-fast) var(--fe-ease); }
.fe-search__field--grow { flex: 1.4; }
.fe-search__field + .fe-search__field::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.fe-search__field:hover { background: var(--surface-alt); }
.fe-search__field:focus-within { background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand-text); }
.fe-search__field:focus-within::before, .fe-search__field:focus-within + .fe-search__field::before { opacity: 0; }
.fe-search__icon.mud-icon-root { flex: none; font-size: 22px; color: var(--brand-text); }
.fe-search__field > .mud-input-control, .fe-search__field > .mud-select { flex: 1; min-width: 0; }
.fe-search .mud-input-control { margin: 0; }
.fe-search .mud-input { font-size: 15px; font-weight: 600; }
.fe-search .mud-input-slot::placeholder { font-weight: 500; color: var(--ink-muted); opacity: 1; }
.fe-site .fe-search label.mud-input-label.mud-input-label-inputcontrol { overflow: visible; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } /* overflow visible : les accents des capitales ne sont pas rognés */
.fe-search .mud-input-slot:focus-visible, .fe-search .mud-select-input:focus-visible { outline: none; }
.fe-site .fe-search .fe-search__submit.mud-button-root.mud-button { flex: none; min-height: 56px; margin-left: 4px; padding-inline: 28px; border-radius: var(--radius-lg); }

/* Pastilles de catégories (MudChip en lien) */
.fe-catchips { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fe-catchips__label { margin-right: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; color: rgba(255, 255, 255, .75); }
.fe-site .fe-catchip.mud-chip { height: 40px; margin: 0; padding: 0 14px 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); color: var(--on-night); font-size: 14px; font-weight: 700; backdrop-filter: blur(6px); transition: background-color var(--duration-fast) var(--fe-ease), color var(--duration-fast) var(--fe-ease), border-color var(--duration-fast) var(--fe-ease); }
.fe-catchip .mud-chip-content { gap: 8px; }
.fe-catchip .mud-chip-icon { margin: 0 8px 0 0; font-size: 18px; color: var(--accent); }
.fe-catchip em { font-style: normal; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.fe-site .fe-catchip.mud-chip:hover { border-color: var(--on-night); background: var(--on-night); color: var(--night); }
.fe-catchip:hover em { color: var(--ink-muted); }
.fe-catchip:hover .mud-chip-icon { color: var(--brand-text); }
.fe-site .fe-catchip--all.mud-chip { padding: 0 14px; border-color: rgba(244, 150, 22, .7); background: transparent; color: var(--accent); }
.fe-catchip--all .mud-icon-root { font-size: 18px; }
.fe-site .fe-catchip--all.mud-chip:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* Engagements */
.fe-trust-inline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin: 0; padding: 0; list-style: none; }
.fe-trust-inline li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 600; }
.fe-trust-inline .mud-icon-root { font-size: 20px; color: var(--accent); }

/* ---------- 11. Carte d'événement (MudCard) ---------- */
.fe-ecard.mud-card { position: relative; height: 100%; border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--duration-base) var(--fe-ease), box-shadow var(--duration-base) var(--fe-ease), border-color var(--duration-base) var(--fe-ease); }
.fe-ecard.mud-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow-card-hover); }
.fe-ecard:hover .fe-ph, .fe-ecard:hover .fe-eimg { transform: scale(1.04); }
.fe-ecard__media { position: relative; flex: none; aspect-ratio: 4 / 3; overflow: hidden; }
.fe-ecard__tags { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.fe-site .fe-fav.mud-icon-button { position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; padding: 0; background: rgba(255, 255, 255, .94); color: #0b0b0d; transition: transform var(--duration-fast) var(--fe-ease); }
.fe-site .fe-fav.mud-icon-button:hover { background: #ffffff; transform: scale(1.08); }
.fe-site .fe-fav.mud-icon-button[aria-pressed="true"] { color: #c8102e; }
.fe-ecard__body.mud-card-content { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--space-4); }
.fe-ecard__body .fe-date { position: relative; z-index: 2; align-self: flex-start; margin: -28px 0 4px; }
.fe-ecard__title.mud-typography { display: -webkit-box; min-height: 48px; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.fe-ecard__title a, .fe-erow__title a, .fe-sooncard__title a { color: inherit; text-decoration: none; }
/* Toute la carte est cliquable : le lien du titre s'étend sur la carte, les boutons restent au-dessus. */
.fe-ecard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fe-ecard__title a:focus-visible { outline: none; }
.fe-ecard__title a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-lg); }
.fe-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.fe-meta .mud-icon-root { flex: none; font-size: 18px; }
.fe-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-ecard__foot.mud-card-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); margin-top: auto; padding: var(--space-3) var(--space-4) var(--space-4); }
.fe-ecard__foot .mud-button-root { position: relative; z-index: 2; }
.fe-pricerow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; min-height: 24px; }
.fe-price { display: flex; align-items: baseline; gap: 6px; }
.fe-price small { font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; color: var(--ink-muted); }
.fe-price b { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 800; white-space: nowrap; color: var(--ink); }
.fe-price b span { margin-left: 3px; font-size: 13px; font-weight: 700; }
.fe-ecard.is-soldout .fe-ph, .fe-ecard.is-soldout .fe-eimg { filter: grayscale(1) brightness(.6); }
.fe-ecard.is-soldout .fe-price b { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fe-ecard.is-soldout .fe-price b span { display: inline-block; }
.fe-ecard--skeleton.mud-card:hover { transform: none; border-color: var(--line); box-shadow: none; }

/* ---------- 12. Carrousel ----------
   Défilement natif (scroll-snap). --n : nombre de cartes visibles. */
.fe-carousel { --gap: 24px; --n: 4; display: flex; gap: var(--gap); margin: -12px; padding: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
.fe-carousel::-webkit-scrollbar { display: none; }
.fe-carousel__item { flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; scroll-snap-align: start; }
.fe-carousel:focus-visible { outline-offset: -4px; border-radius: var(--radius-lg); }
.fe-arrows { display: flex; gap: var(--space-2); }
.fe-site .fe-arrow.mud-icon-button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); }
.fe-site .fe-arrow.mud-icon-button:hover { border-color: var(--ink); }
.fe-site .fe-arrow.mud-icon-button:disabled { opacity: .35; cursor: not-allowed; }
/* Points de pagination : pastille de 8 px, la position active s'allonge en pilule rouge. Zone cliquable de 24 px. */
.fe-dots { display: flex; justify-content: center; align-items: center; gap: 2px; min-height: 24px; margin-top: var(--space-6); }
.fe-dots[hidden] { display: none; }
.fe-dot { position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; transition: width var(--duration-base) var(--fe-ease); }
.fe-dot::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--line-strong); transition: width var(--duration-base) var(--fe-ease), background-color var(--duration-base) var(--fe-ease); }
.fe-dot:hover::before { background: var(--ink-muted); }
.fe-dot[aria-current="true"] { width: 36px; }
.fe-dot[aria-current="true"]::before { width: 24px; background: var(--brand); }

/* ---------- 13. Agenda « Que faire ce week-end ? » ---------- */
.fe-seg { display: inline-flex; flex: none; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.fe-site .fe-seg .fe-seg__btn.mud-button-root.mud-button { min-height: 36px; padding-inline: 14px; border-radius: var(--radius-pill); font-size: 13px; color: var(--ink-subtle); }
.fe-site .fe-seg .fe-seg__btn.mud-button-root.mud-button:hover { color: var(--ink); }
.fe-site .fe-seg .fe-seg__btn.mud-button-root.mud-button[aria-pressed="true"] { background: var(--night); color: var(--on-night); }
.fe-wk-cities { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.fe-site :is(.fe-wk-cities, .fe-chipset) .fe-chip.mud-button-root.mud-button { min-height: 36px; padding-inline: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; }
.fe-site :is(.fe-wk-cities, .fe-chipset) .fe-chip.mud-button-root.mud-button:hover { border-color: var(--ink); }
.fe-site :is(.fe-wk-cities, .fe-chipset) .fe-chip.mud-button-root.mud-button[aria-pressed="true"] { border-color: var(--brand-text); background: var(--brand-tint); color: var(--brand-text); }
.fe-chip .mud-button-icon-start { margin-inline: 0 6px; }
.fe-chip .mud-button-icon-start .mud-icon-root { font-size: 18px; }
.fe-wk-empty { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); padding: 14px 18px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
.fe-wk-empty > .mud-icon-root { flex: none; font-size: 28px; color: var(--brand-text); }
.fe-wk-empty b { display: block; font-size: 15px; }
.fe-wk-empty span { display: block; font-size: 13px; color: var(--ink-subtle); }
.fe-wk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); transition: opacity var(--duration-base) var(--fe-ease); }
.fe-wk-grid.is-busy { opacity: .55; pointer-events: none; }

/* ---------- 14. Bannière organisateurs ---------- */
.fe-promo { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--space-8); padding: 64px var(--space-12); overflow: hidden; border-radius: var(--radius-xl); background: var(--night); color: var(--on-night); }
.fe-promo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 140% at 100% 50%, var(--brand) 0%, transparent 72%); opacity: .95; }
.fe-promo > * { position: relative; }
.fe-promo :focus-visible { outline-color: var(--on-night); }
.fe-promo__kicker.mud-typography { display: block; margin-bottom: var(--space-3); color: var(--accent); }
.fe-promo__title.mud-typography { margin-bottom: var(--space-3); }
.fe-promo__text.mud-typography { max-width: 440px; margin-bottom: var(--space-6); color: var(--on-night-muted); }
.fe-promo__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fe-promo__art { position: relative; height: 220px; }
.fe-tix { position: absolute; display: grid; grid-template-columns: 1fr 72px; width: 260px; height: 116px; padding: 18px 0 18px 22px; border-radius: var(--radius-lg); -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 14px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; }
.fe-tix--a { right: 40px; top: 10px; background: var(--on-night); color: #0b0b0d; transform: rotate(6deg); }
.fe-tix--b { right: 120px; top: 100px; background: var(--accent); color: var(--on-accent); transform: rotate(-7deg); }
.fe-tix__main { display: flex; flex-direction: column; justify-content: space-between; }
.fe-tix__main small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.fe-tix__main b { font-family: var(--font-display); font-size: 22px; line-height: 24px; font-weight: 800; }
.fe-tix__stub { display: grid; place-items: center; border-left: 2px dashed currentColor; opacity: .5; }
.fe-tix__stub .mud-icon-root { font-size: 30px; }

/* ---------- 15. Bientôt complet ---------- */
.fe-soonrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fe-sooncard.mud-paper { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--space-3) var(--space-4); padding: 14px; border-radius: var(--radius-lg); transition: box-shadow var(--duration-base) var(--fe-ease), border-color var(--duration-base) var(--fe-ease); }
.fe-sooncard.mud-paper:hover { border-color: transparent; box-shadow: var(--shadow-card-hover); }
.fe-sooncard__thumb { position: relative; grid-row: 1 / 3; width: 96px; height: 96px; overflow: hidden; border-radius: var(--radius-md); }
.fe-sooncard__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fe-sooncard__title.mud-typography, .fe-erow__title.mud-typography { overflow: hidden; font-size: 15px; line-height: 22px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fe-sooncard__title a::after, .fe-erow__title a::after { content: ""; position: absolute; inset: 0; }
.fe-stock.mud-progress-linear { height: 6px; margin-top: 6px; }
.fe-stock__txt { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--brand-text); }
.fe-site .fe-sooncard__cta.mud-button-root { position: relative; z-index: 1; justify-self: start; }

/* ---------- 16. Ligne d'événement compacte ---------- */
.fe-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
.fe-rows__skeleton.mud-skeleton { border-radius: var(--radius-lg); }
.fe-erow.mud-paper { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3); border-radius: var(--radius-lg); transition: box-shadow var(--duration-base) var(--fe-ease), border-color var(--duration-base) var(--fe-ease); }
.fe-erow.mud-paper:hover { border-color: transparent; box-shadow: var(--shadow-card-hover); }
.fe-erow__thumb { position: relative; width: 88px; height: 88px; overflow: hidden; border-radius: var(--radius-md); }
.fe-erow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fe-erow__when { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); }
.fe-erow__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.fe-erow__aside .mud-button-root { position: relative; z-index: 1; }
.fe-erow__aside .fe-price b { font-size: 17px; }

/* ---------- 17. Pourquoi choisir Faevent ---------- */
.fe-why.mud-paper { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--space-6); border-radius: var(--radius-lg); }
.fe-why__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--accent-text); }
.fe-why__text.mud-typography { margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- 18. Adaptation aux écrans ---------- */
@media (max-width: 1179.98px) {
  .fe-carousel { --n: 3; }
}
@media (max-width: 959.98px) {
  .fe-section { padding-block: var(--space-16); }
  .fe-section--banner { padding-block: 0 var(--space-2); }
  .fe-section--tight { padding-block: var(--space-16) 0; }
  .fe-agenda { padding-block: var(--space-12); }
  .fe-sechead__title.mud-typography { font-size: 26px; line-height: 32px; }
  .fe-sechead__sub.mud-typography { font-size: 15px; line-height: 22px; }

  .fe-hero__inner.mud-container { min-height: 0; gap: var(--space-6); padding-block: 88px var(--space-8); }
  .fe-hero__title.mud-typography { font-size: 38px; line-height: 42px; }
  .fe-hero__lead.mud-typography { font-size: 16px; line-height: 24px; }
  .fe-search { flex-direction: column; gap: 8px; padding: 12px; }
  .fe-search__field, .fe-search__field--grow { flex: none; min-height: 56px; background: var(--surface-alt); }
  .fe-search__field::before { display: none; }
  .fe-site .fe-search .fe-search__submit.mud-button-root.mud-button { width: 100%; min-height: 52px; margin: 4px 0 0; }
  /* Les pastilles défilent horizontalement, jusqu'aux bords de l'écran */
  .fe-catchips { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .fe-catchips::-webkit-scrollbar { display: none; }
  .fe-catchips__label { display: none; }
  .fe-site .fe-catchip.mud-chip { flex: none; }
  .fe-trust-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .fe-trust-inline li { font-size: 13px; }

  .fe-carousel { --gap: 16px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .fe-carousel__item { flex-basis: 280px; }
  .fe-arrows { display: none; }
  .fe-dots { margin-top: var(--space-4); }

  .fe-wk-head { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .fe-wk-head .fe-seg { display: flex; }
  .fe-site .fe-seg .fe-seg__btn.mud-button-root.mud-button { flex: 1; padding-inline: 8px; }
  .fe-wk-cities { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .fe-wk-cities::-webkit-scrollbar { display: none; }
  .fe-site :is(.fe-wk-cities, .fe-chipset) .fe-chip.mud-button-root.mud-button { flex: none; }
  /* Sur mobile, les cartes de l'agenda défilent horizontalement */
  .fe-wk-grid { display: flex; gap: var(--space-4); margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .fe-wk-grid::-webkit-scrollbar { display: none; }
  .fe-wk-grid > * { flex: 0 0 280px; scroll-snap-align: start; }

  .fe-promo { grid-template-columns: 1fr; padding: var(--space-8) var(--space-6); }
  .fe-promo__title.mud-typography { font-size: 30px; line-height: 34px; }
  .fe-promo__art { display: none; }
  .fe-site .fe-promo__actions .mud-button-root { width: 100%; }

  .fe-soonrow { grid-template-columns: minmax(0, 1fr); }
  .fe-rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
  .fe-sechead { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .fe-wk-head { align-items: stretch; }
  .fe-erow.mud-paper { grid-template-columns: 72px minmax(0, 1fr); }
  .fe-erow__thumb { width: 72px; height: 72px; }
  .fe-erow__aside { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .fe-sooncard.mud-paper { grid-template-columns: 72px minmax(0, 1fr); }
  .fe-sooncard__thumb { width: 72px; height: 72px; }
  .fe-why.mud-paper { flex-direction: row; align-items: flex-start; padding: var(--space-4); }
}

/* ==========================================================================
   Étape 3 — page Événements et pages Catégories
   ========================================================================== */

/* ---------- 19. En-tête des pages intérieures ---------- */
/* Fil d'Ariane (MudBreadcrumbs) */
.fe-crumbs.mud-breadcrumbs { gap: 6px; padding: 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-subtle); }
.fe-crumbs .mud-breadcrumb-separator { padding: 0; }
.fe-crumbs .mud-breadcrumb-separator .mud-icon-root { font-size: 16px; }
.fe-crumbs .mud-breadcrumb-item > a { border-radius: 4px; color: inherit; text-decoration: none; }
.fe-crumbs .mud-breadcrumb-item > a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fe-crumbs [aria-current="page"] { color: var(--ink); }

.fe-pagehero { padding-block: var(--space-8) 40px; border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.fe-pagehero__title.mud-typography { margin-top: var(--space-4); font-size: 44px; line-height: 48px; letter-spacing: -.02em; }
.fe-pagehero__lead.mud-typography { max-width: 640px; margin-top: var(--space-2); font-size: 17px; line-height: 26px; color: var(--ink-subtle); }
.fe-pagehero .fe-search { margin-top: var(--space-6); box-shadow: var(--shadow-card-hover); }

/* ---------- 20. Page Événements : filtres ---------- */
.fe-market { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 40px; padding-block: 40px var(--space-24); }
/* La colonne reste visible pendant le défilement ; si elle dépasse l'écran, elle défile elle-même. */
.fe-filters { position: sticky; top: 96px; flex-direction: column; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); padding-right: var(--space-2); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fe-filters__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.fe-filters__actions { display: flex; align-items: center; gap: var(--space-1); }
.fe-site .fe-textbtn.mud-button-root.mud-button { min-height: 36px; padding-inline: var(--space-2); }

.fe-fgroup { min-width: 0; margin: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); }
.fe-fgroup:last-of-type { border-bottom: 0; }
/* float : le titre du groupe se place dans le fieldset comme un bloc ordinaire, sous sa marge intérieure */
.fe-fgroup legend { float: left; width: 100%; margin: 0 0 var(--space-3); padding: 0; font-size: 15px; line-height: 20px; font-weight: 700; }
.fe-fgroup legend + * { clear: both; }
.fe-chipset { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fe-fgroup__link.mud-link { display: inline-flex; margin-top: 10px; }

/* Cases à cocher et boutons radio (MudCheckBox, MudRadio) : une ligne par choix, le nombre d'événements à droite */
.fe-check.mud-input-control { display: flex; width: 100%; margin: 0; }
.fe-check .mud-checkbox, .fe-check .mud-radio { display: flex; width: 100%; min-height: 36px; margin: 0; }
.fe-check .mud-icon-button { flex: none; margin: 0 6px 0 -4px; }
.fe-check .mud-typography { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.fe-check__n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.fe-radios.mud-input-control { width: 100%; margin: 0; }
.fe-site .fe-radios.mud-input-control .mud-radio-group { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }

/* Panneau des filtres sur mobile (MudDrawer) : contenu défilant, bouton de validation toujours visible */
.fe-filters-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; }
.fe-filters-drawer__body { flex: 1; min-height: 0; padding: 0 var(--space-4) var(--space-4); overflow-y: auto; overscroll-behavior: contain; }
.fe-filters-drawer__body .fe-filters__head { position: sticky; top: 0; z-index: 2; padding-top: var(--space-3); background: var(--mud-palette-drawer-background, #ffffff); }
.fe-filters-drawer__foot { flex: none; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -8px 24px rgba(11, 11, 13, .10); }

/* ---------- 21. Page Événements : résultats ---------- */
.fe-results { min-width: 0; }
.fe-resbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; margin-bottom: var(--space-4); }
.fe-rescount { margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink-muted); }
.fe-rescount b { font-weight: 800; color: var(--ink); }
.fe-resbar__sort { flex: none; width: 240px; }
.fe-site .fe-sortselect.mud-input-control.mud-input-control-margin-dense { margin: 0; }
.fe-sortselect .mud-input { font-size: 14px; font-weight: 600; background: var(--surface); }

.fe-mtools { align-items: stretch; gap: var(--space-2); margin-bottom: var(--space-4); }
.fe-mtools > .mud-select { flex: 1; min-width: 0; }
.fe-site .fe-mtools__filters.mud-button-root.mud-button { flex: none; min-height: 40px; padding-inline: 14px; border: 1px solid var(--line-strong); background: var(--surface); }
.fe-filter-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-size: 11px; line-height: 1; }

/* Filtres actifs : pastilles à retirer d'un clic */
.fe-activebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.fe-site .fe-chip--x.mud-chip { height: 36px; margin: 0; padding: 0 8px 0 14px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-text); font-size: 13px; font-weight: 600; transition: border-color var(--duration-fast) var(--fe-ease); }
.fe-site .fe-chip--x.mud-chip:hover { border-color: var(--brand-text); background: var(--brand-tint); }
.fe-chip--x .mud-chip-content { gap: 6px; }
.fe-chip--x .mud-icon-root { font-size: 18px; }

.fe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); transition: opacity var(--duration-base) var(--fe-ease); }
.fe-grid.is-busy { opacity: .55; pointer-events: none; }

/* Message à la place des résultats : aucun événement, erreur de chargement */
.fe-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 72px var(--space-6); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-xl); text-align: center; }
.fe-state__icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-2); border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); }
.fe-state--error .fe-state__icon { background: #fdecea; color: var(--error); }
.fe-state__text.mud-typography { max-width: 420px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.fe-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.fe-notfound.mud-container { padding-block: var(--space-16) var(--space-24); }

/* ---------- 22. Pagination ---------- */
.fe-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: var(--space-12); }
.fe-site .fe-pager .fe-pager__btn.mud-button-root.mud-button { min-width: 44px; min-height: 44px; padding-inline: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 14px; }
.fe-site .fe-pager .fe-pager__btn.mud-button-root.mud-button:hover { border-color: var(--ink); }
.fe-site .fe-pager .fe-pager__btn.mud-button-root.mud-button.is-current { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.fe-site .fe-pager .fe-pager__btn.mud-button-root.mud-button:disabled { border-color: var(--line); background: transparent; color: var(--ink-muted); opacity: .6; }
.fe-site .fe-pager .fe-pager__nav.mud-button-root.mud-button { padding-inline: var(--space-4); }
.fe-pager__nav .mud-button-icon-start { margin-inline: -6px 4px; }
.fe-pager__nav .mud-button-icon-end { margin-inline: 4px -6px; }
.fe-pager__gap { width: 20px; text-align: center; font-weight: 700; color: var(--ink-muted); }
.fe-pager__info { margin: var(--space-3) 0 0; text-align: center; font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- 23. En-tête de la page d'une catégorie ---------- */
.fe-cathero { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.fe-cathero :focus-visible { outline-color: var(--on-night); }
.fe-cathero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fe-cathero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 13, .92) 0%, rgba(11, 11, 13, .7) 55%, rgba(11, 11, 13, .45) 100%); }
.fe-cathero__inner.mud-container { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); padding-block: 28px 40px; }
.fe-cathero .fe-crumbs.mud-breadcrumbs { color: rgba(255, 255, 255, .75); }
.fe-cathero .fe-crumbs .mud-breadcrumb-item > a:hover, .fe-cathero .fe-crumbs [aria-current="page"] { color: var(--on-night); }
.fe-cathero__title { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.fe-cathero__icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--brand); color: var(--on-brand); }
.fe-cathero__title .mud-typography { font-size: 56px; line-height: 58px; letter-spacing: -.025em; }
.fe-cathero__desc.mud-typography { max-width: 640px; font-size: 17px; line-height: 26px; color: rgba(255, 255, 255, .88); }
.fe-cathero__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.fe-cathero__facts li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 700; }
.fe-cathero__facts .mud-icon-root { font-size: 20px; color: var(--accent); }
.fe-cathero .fe-catchips { margin-top: var(--space-2); }
.fe-cathero--loading { min-height: 280px; }

/* ---------- 24. Page Catégories ---------- */
.fe-catsearch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.fe-catsearch__box.mud-input-control { flex: 1 1 360px; max-width: 520px; margin: 0; }
.fe-catsearch__box .mud-input { border-radius: var(--radius-lg); background: var(--surface); font-size: 15px; font-weight: 500; }
.fe-site .fe-catsearch__box .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-lg); }
.fe-site .fe-catsearch__box .mud-input-slot.mud-input-root-outlined { padding-block: 12.5px; }
.fe-catsearch__box .mud-input-slot:focus-visible { outline: none; }

.fe-catsection { padding-block: 56px var(--space-24); }
.fe-catsection--top { padding-block: var(--space-12) 0; }

/* Grandes tuiles des catégories les plus actives */
.fe-topcats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.fe-topcat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 20px; overflow: hidden; border-radius: var(--radius-xl); background: var(--night); color: var(--on-night); text-decoration: none; transition: transform var(--duration-base) var(--fe-ease), box-shadow var(--duration-base) var(--fe-ease); }
.fe-topcat:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.fe-topcat:hover .fe-ph, .fe-topcat:hover .fe-topcat__image { transform: scale(1.05); }
.fe-topcat__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--fe-ease); }
.fe-topcat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, .05) 20%, rgba(11, 11, 13, .85) 100%); }
.fe-topcat > :not(.fe-ph):not(.fe-topcat__image) { position: relative; z-index: 1; }
.fe-topcat__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: auto; border-radius: var(--radius-md); background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.fe-topcat b { margin-top: var(--space-8); font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; }
.fe-topcat__n { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 20px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.fe-topcat__n .mud-icon-root { font-size: 16px; color: var(--accent); }

/* Liste de toutes les catégories */
.fe-catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.fe-cattile.mud-paper { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px 12px 12px; border-radius: var(--radius-lg); transition: transform var(--duration-base) var(--fe-ease), box-shadow var(--duration-base) var(--fe-ease), border-color var(--duration-base) var(--fe-ease); }
.fe-cattile.mud-paper:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--shadow-card-hover); }
.fe-cattile__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-text); }
.fe-cattile__main { flex: 1; min-width: 0; }
.fe-cattile__main b { display: block; overflow: hidden; font-size: 15px; line-height: 20px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fe-cattile__main a { color: inherit; text-decoration: none; }
/* Toute la tuile est cliquable : le lien du nom s'étend sur la tuile. */
.fe-cattile__main a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.fe-cattile__main a:focus-visible { outline: none; }
.fe-cattile__main a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.fe-cattile__n { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.fe-cattile__chevron.mud-icon-root { flex: none; color: var(--ink-muted); }
.fe-cattile.is-empty.mud-paper { border-style: dashed; background: var(--surface-alt); }
.fe-cattile.is-empty.mud-paper:hover { transform: none; border-color: var(--line); box-shadow: none; }
.fe-cattile.is-empty .fe-cattile__icon { background: var(--surface); color: var(--ink-muted); }
.fe-cattile.is-empty .fe-cattile__n { color: var(--ink-subtle); }
.fe-cattile--skeleton.mud-skeleton { border-radius: var(--radius-lg); }

.fe-catnone { padding: 40px var(--space-6); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-xl); text-align: center; }
.fe-catnone b { display: block; font-size: 17px; line-height: 24px; }
.fe-catnone p { margin: 6px 0 var(--space-4); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.fe-catfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-12); padding: var(--space-6) 28px; border-radius: var(--radius-xl); background: var(--surface-alt); }
.fe-catfoot b { font-size: 16px; line-height: 24px; }
.fe-catfoot p { margin: 2px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-subtle); }

/* ---------- 25. Adaptation aux écrans (étape 3) ---------- */
@media (max-width: 1179.98px) {
  .fe-market { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-8); }
  .fe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-topcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 959.98px) {
  .fe-pagehero { padding-block: 20px var(--space-6); }
  .fe-pagehero__title.mud-typography { margin-top: var(--space-3); font-size: 32px; line-height: 36px; }
  .fe-pagehero__lead.mud-typography { font-size: 15px; line-height: 22px; }

  /* Les filtres passent dans un panneau, ouvert par le bouton « Filtres » */
  .fe-market { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 20px var(--space-16); }
  .fe-resbar { min-height: 0; }
  .fe-activebar { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .fe-activebar::-webkit-scrollbar { display: none; }
  .fe-site .fe-activebar .fe-chip--x.mud-chip, .fe-site .fe-activebar .fe-textbtn.mud-button-root { flex: none; }

  .fe-cathero__inner.mud-container { padding-block: 20px 28px; }
  .fe-cathero__title .mud-typography { font-size: 36px; line-height: 40px; }
  .fe-cathero__icon { width: 52px; height: 52px; }
  .fe-cathero__desc.mud-typography { font-size: 15px; line-height: 23px; }

  .fe-catsection { padding-block: 40px var(--space-16); }
  .fe-catsection--top { padding-block: var(--space-8) 0; }
  .fe-topcats { gap: var(--space-3); }
  .fe-topcat { min-height: 170px; padding: var(--space-4); }
  .fe-topcat b { font-size: 19px; line-height: 24px; }
  .fe-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .fe-cattile__chevron.mud-icon-root { display: none; }
  .fe-catfoot { padding: 20px; }
  .fe-site .fe-catfoot .mud-button-root { width: 100%; }
}
@media (max-width: 599.98px) {
  .fe-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .fe-state { padding: var(--space-12) var(--space-4); }
  .fe-pager { gap: 4px; }
  .fe-pager__label { display: none; }
  .fe-site .fe-pager .fe-pager__btn.mud-button-root.mud-button { min-width: 36px; min-height: 40px; padding-inline: 6px; }
  .fe-pager__nav .mud-button-icon-start, .fe-pager__nav .mud-button-icon-end { margin-inline: 0; }
  .fe-catgrid { grid-template-columns: minmax(0, 1fr); }
  .fe-site .fe-catsearch .fe-seg { display: flex; flex: 1 1 100%; }
  .fe-site .fe-catsearch .fe-seg .fe-seg__btn.mud-button-root.mud-button { flex: 1; }
}

/* ==========================================================================
   Étape 4 — page de vente d'un événement
   Page autonome (lien partagé par l'organisateur) : ni en-tête ni menu du site.
   ========================================================================== */

/* ---------- 26. Cadre de la page de vente ---------- */
html:has(.fe-sale) { scroll-padding-top: 16px; } /* pas d'en-tête fixe sur cette page */
.fe-site.fe-sale { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--surface-alt); }

.fe-sfoot { display: flex; flex: none; flex-direction: column; align-items: center; gap: 10px; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--line); text-align: center; }
.fe-sfoot__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.fe-sfoot__brand .fe-logo img { height: 22px; }
.fe-sfoot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px var(--space-4); color: var(--ink-subtle); }
.fe-sfoot__links .mud-link { font-weight: 600; }

/* ---------- 27. Bandeau : affiche et informations essentielles ---------- */
.fe-shero { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.fe-shero :focus-visible { outline-color: var(--on-night); }
.fe-shero__bg { position: absolute; inset: -80px; background: radial-gradient(45% 60% at 18% 40%, rgba(255, 90, 102, .55), transparent 70%), radial-gradient(40% 55% at 70% 20%, rgba(131, 0, 14, .7), transparent 70%), radial-gradient(35% 50% at 90% 90%, rgba(244, 150, 22, .35), transparent 70%); filter: blur(30px); }
/* Avec un visuel : le fond reprend ses couleurs. L'image est étirée sur tout le bandeau, floutée jusqu'à ne plus
   garder que ses teintes, puis assombrie. Le voile garantit la lisibilité du texte blanc, même sous une affiche blanche. */
.fe-shero--art { --on-night-muted: rgba(255, 255, 255, .8); }
.fe-shero--art .fe-shero__bg { inset: 0; background: none; filter: none; }
.fe-shero__art { position: absolute; top: -120px; left: -120px; width: calc(100% + 240px); height: calc(100% + 240px); max-width: none; object-fit: fill; filter: blur(64px) saturate(1.5) brightness(.58); }
.fe-shero--art .fe-shero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, .5) 0%, rgba(11, 11, 13, .6) 100%); }
.fe-shero__inner.mud-container { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: center; gap: 56px; padding-block: 56px var(--space-16); }
.fe-shero--loading { min-height: 420px; }
.fe-poster { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-xl); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.fe-shero__info { min-width: 0; }
.fe-hcat { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fe-hcat .mud-icon-root { font-size: 16px; color: var(--accent); }
.fe-shero__title.mud-typography { margin-top: var(--space-4); font-size: 52px; line-height: 54px; letter-spacing: -.025em; overflow-wrap: anywhere; }
.fe-hcause { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255, 90, 102, .16); color: #ffd0d4; font-size: 13px; line-height: 18px; font-weight: 600; }
.fe-hcause .mud-icon-root { font-size: 18px; color: var(--brand-on-dark); }
.fe-hfacts { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.fe-hfacts li { display: flex; align-items: center; gap: var(--space-3); font-size: 16px; line-height: 22px; font-weight: 600; }
.fe-hfacts__sub { display: block; font-size: 13px; font-weight: 500; color: var(--on-night-muted); }
.fe-hicon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .1); }
.fe-hicon .mud-icon-root { font-size: 22px; color: var(--accent); }
.fe-hactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.fe-hprice { display: flex; flex-direction: column; margin-right: var(--space-3); }
.fe-hprice small { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--on-night-muted); }
.fe-hprice b { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 800; white-space: nowrap; }
.fe-hprice b span { margin-left: 3px; font-size: 15px; }

/* ---------- 28. Corps : informations et carte de billetterie ---------- */
.fe-sbody.mud-container { display: grid; grid-template-columns: minmax(0, 1fr) 460px; align-items: start; gap: 40px; padding-block: 40px var(--space-16); }
.fe-scol { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.fe-card.mud-paper { padding: 28px; border-radius: var(--radius-xl); }
.fe-card--skeleton.mud-skeleton { border-radius: var(--radius-xl); }
.fe-card__title.mud-typography { margin-bottom: var(--space-4); font-size: 22px; line-height: 28px; }
.fe-prose p { margin: 0; font-size: 16px; line-height: 27px; color: #2b2f36; white-space: pre-line; overflow-wrap: anywhere; }
.fe-prose p + p { margin-top: var(--space-4); }
.fe-callout { display: flex; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--brand-tint); }
.fe-callout + .fe-callout { margin-top: var(--space-3); }
.fe-callout > .mud-icon-root { flex: none; font-size: 22px; color: var(--brand-text); }
.fe-callout b { display: block; font-size: 15px; line-height: 22px; color: var(--brand-text); }
.fe-callout__text { font-size: 14px; line-height: 22px; color: #3d2a2c; }
.fe-placerow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.fe-placerow b { display: block; font-size: 16px; line-height: 22px; }
.fe-placerow__sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.fe-site .fe-placerow .mud-button-root { flex: none; }
.fe-org { display: flex; align-items: center; gap: var(--space-4); }
.fe-org__avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--night); color: var(--on-night); font-family: var(--font-display); font-size: 19px; font-weight: 800; }
.fe-org__name { font-size: 16px; line-height: 22px; font-weight: 800; }
.fe-org__meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.fe-contacts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.fe-site .fe-contact.mud-chip { height: 40px; max-width: 100%; margin: 0; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); font-size: 13px; font-weight: 600; }
.fe-site .fe-contact.mud-chip:hover { border-color: var(--ink); }
.fe-contact .mud-chip-icon { margin: 0 8px 0 0; font-size: 18px; color: var(--brand-text); }
/* Texte coupé par « … » s'il est trop long : MudBlazor donne au contenu toute la hauteur de la pastille,
   hauteur retirée ici pour que le texte reste centré en face de l'icône */
.fe-site .fe-contact .mud-chip-content { display: block; height: auto; min-width: 0; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 29. Carte de billetterie ---------- */
.fe-co { position: sticky; top: var(--space-6); scroll-margin-top: var(--space-4); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-raised); }
/* Carte plus haute que l'écran (attribut posé par faevent-sale.js) : elle défile avec la page, sinon son bas resterait hors d'atteinte */
.fe-co[data-fe-tall] { position: static; }
.fe-co:focus, .fe-co:focus-visible { outline: none; } /* focus posé par programme à chaque changement d'étape */
.fe-co__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 20px var(--space-6) 0; }
.fe-co__head .mud-typography { font-size: 22px; line-height: 28px; }
.fe-co__head--rec { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.fe-secure { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; color: var(--success); }
.fe-secure .mud-icon-root { font-size: 16px; }

.fe-steps { display: grid; grid-template-columns: repeat(var(--fe-steps, 4), minmax(0, 1fr)); margin: 0; padding: 18px var(--space-6) 20px; border-bottom: 1px solid var(--line); list-style: none; }
.fe-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; line-height: 14px; font-weight: 700; text-align: center; color: var(--ink-muted); }
.fe-steps li:not(:first-child)::before { content: ""; position: absolute; top: 13px; right: 50%; z-index: 0; width: 100%; height: 2px; background: var(--line); }
.fe-steps li.is-done:not(:first-child)::before, .fe-steps li.is-current:not(:first-child)::before { background: var(--brand); }
.fe-steps__n { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); font-size: 12px; font-weight: 800; color: var(--ink-muted); }
.fe-steps__n .mud-icon-root { font-size: 16px; }
.fe-steps li.is-current { color: var(--ink); }
.fe-steps li.is-current .fe-steps__n { border-color: var(--brand); background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.fe-steps li.is-done { color: var(--ink-subtle); }
.fe-steps li.is-done .fe-steps__n { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-text); }

.fe-co__body, .fe-co__form, .fe-jys-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.fe-co__body { padding: var(--space-6); }
.fe-co__form { margin: 0; }
.fe-co__title { font-size: 16px; line-height: 22px; font-weight: 800; }
.fe-co__hint { margin: -10px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.fe-co__center { align-self: center; text-align: center; }
.fe-co__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); }
.fe-co .fe-state { padding: var(--space-8) var(--space-4); border: 0; }
.fe-co__foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px var(--space-6); border-top: 1px solid var(--line); background: var(--surface-alt); text-align: center; }
.fe-co__foot p { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.fe-co__foot p a { font-weight: 700; white-space: nowrap; color: var(--brand-text); }

/* Billets et quantités */
.fe-trow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1.5px solid var(--line); border-radius: var(--radius-lg); transition: border-color var(--duration-fast) var(--fe-ease), background-color var(--duration-fast) var(--fe-ease); }
.fe-trow.is-active { border-color: var(--brand-text); background: var(--brand-tint); }
.fe-trow.is-soldout { background: var(--surface-alt); color: var(--ink-muted); }
.fe-trow__name { font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: .02em; overflow-wrap: anywhere; }
.fe-trow__price { margin-top: 2px; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 800; }
.fe-trow__price span { display: inline-block; margin-left: 4px; font-family: var(--font-body); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink-muted); }
.fe-trow__note { margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--brand-text); }
.fe-trow.is-soldout .fe-trow__note { color: var(--ink-subtle); }
.fe-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); }
.fe-site .fe-stepper .mud-icon-button { width: 40px; height: 40px; padding: 0; color: var(--ink); }
.fe-site .fe-stepper .mud-icon-button:disabled { opacity: .35; }
.fe-stepper output { min-width: 28px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }

.fe-site .fe-promo-toggle.mud-button-root.mud-button { align-self: flex-start; padding-inline: 0; }
.fe-promo-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.fe-promo-row .fe-input { flex: 1; min-width: 0; }
.fe-site .fe-promo-row .mud-button-root.mud-button { flex: none; min-height: 48px; border-color: var(--line-strong); }
.fe-input--upper .mud-input-slot { text-transform: uppercase; }
.fe-input--upper .mud-input-slot::placeholder { text-transform: none; }

.fe-sum { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px dashed var(--line); font-size: 14px; line-height: 20px; color: var(--ink-subtle); }
.fe-sum > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.fe-sum .fe-sum__disc { font-weight: 600; color: var(--success); }
.fe-sum .fe-sum__total { align-items: flex-end; margin-top: 4px; color: var(--ink); }
.fe-sum .fe-sum__total > span { font-size: 15px; font-weight: 700; }
.fe-sum .fe-sum__total b { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 800; white-space: nowrap; }
.fe-sum .fe-sum__total b span { margin-left: 3px; font-size: 15px; }

/* Champs : libellé au-dessus, champ MudBlazor (variante Outlined) de 48 px de haut */
.fe-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fe-field > label, .fe-field__label { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink); }
.fe-field > label i, .fe-field__label i { font-style: normal; color: var(--brand-text); }
.fe-site .fe-input.mud-input-control { margin: 0; }
.fe-site .fe-input .mud-input.mud-input-outlined { border-radius: var(--radius-md); background: var(--surface); font-size: 15px; font-weight: 500; }
.fe-site .fe-input .mud-input-slot.mud-input-root-outlined { padding-block: 14.5px; }
.fe-site .fe-input .mud-input-slot:focus-visible { outline: none; }
.fe-input .mud-input-slot::placeholder { color: var(--ink-muted); opacity: 1; }
.fe-input .mud-input-helper-text { margin-top: 4px; font-size: 12px; line-height: 16px; }
/* Erreur : le message est affiché par le composant FieldError, celui de MudBlazor (vide) est retiré */
.fe-site .fe-input.fe-input--error .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--error); }
.fe-input.mud-input-error .mud-input-control-helper-container { display: none; }
.fe-input--code .mud-input-slot { font-size: 17px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.fe-input--code .mud-input-slot::placeholder { font-weight: 500; letter-spacing: .04em; }
.fe-input--phone .mud-input-slot { letter-spacing: .04em; }
.fe-input--phone .mud-input-adornment-start .mud-typography { font-size: 14px; font-weight: 700; color: var(--ink); }
.fe-err { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--error); }
.fe-err .mud-icon-root { flex: none; font-size: 15px; }
.fe-ok { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--success); }
.fe-help { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.fe-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* Opérateurs Mobile Money */
.fe-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.fe-site .fe-ops .fe-op.mud-button-root.mud-button { min-height: 84px; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); white-space: normal; }
.fe-site .fe-ops .fe-op.mud-button-root.mud-button:hover { border-color: var(--line-strong); }
.fe-site .fe-ops .fe-op.mud-button-root.mud-button[aria-pressed="true"] { border-color: var(--brand-text); background: var(--brand-tint); }
.fe-op .mud-button-label { flex-direction: column; gap: 6px; }
.fe-op__mark { display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-alt); color: var(--ink); }
.fe-op[aria-pressed="true"] .fe-op__mark { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.fe-op__name { font-size: 12px; line-height: 15px; font-weight: 700; }
.fe-op__country { margin-top: -4px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-muted); }

.fe-recap, .fe-found { margin: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-alt); font-size: 14px; line-height: 20px; }
.fe-recap dl, .fe-found { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.fe-recap dl { margin: var(--space-2) 0 0; }
.fe-recap dt, .fe-found dt { font-weight: 500; color: var(--ink-subtle); }
.fe-recap dd, .fe-found dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fe-recap dd span { display: block; }
.fe-recap__head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.fe-recap__total { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.fe-consent.mud-input-control { margin: 0; }
.fe-consent .mud-checkbox { align-items: flex-start; margin: 0; }
.fe-consent .mud-icon-button { flex: none; margin: -2px 6px 0 -4px; }
.fe-consent .mud-typography { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-subtle); }
.fe-consent .mud-link { font-weight: 700; }
.fe-fee { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-3); border-radius: var(--radius-md); background: var(--accent-tint); color: #5c3500; font-size: 13px; line-height: 18px; font-weight: 600; }
.fe-fee .mud-icon-root { flex: none; font-size: 18px; color: var(--accent-text); }
.fe-alert.mud-alert { border-radius: var(--radius-md); font-size: 13px; line-height: 20px; }
.fe-alert b { display: block; font-size: 14px; }
.fe-co__nav { display: flex; gap: var(--space-2); }
.fe-site .fe-co__nav .mud-button-root.mud-button:not(.mud-icon-button) { flex: 1; min-width: 0; padding-inline: var(--space-3); white-space: normal; }
.fe-site .fe-co__back.mud-icon-button { flex: none; width: 52px; height: 52px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); color: var(--ink); }
.fe-btn-spin.mud-progress-circular { width: 18px; height: 18px; margin-right: var(--space-2); }

/* Validation sur le téléphone */
.fe-proc { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; text-align: center; }
.fe-proc__phone { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); }
.fe-proc__phone::after { content: ""; position: absolute; inset: -8px; border: 2px solid var(--brand); border-radius: 50%; opacity: 0; animation: fe-pulse 1.6s var(--fe-ease) infinite; }
@keyframes fe-pulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
.fe-proc p { max-width: 340px; margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-subtle); }
.fe-proc ol, .fe-rec__how { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; text-align: left; }
.fe-proc ol { width: 100%; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-alt); }
.fe-proc ol li, .fe-rec__how li { display: flex; gap: 10px; }
.fe-num { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); font-size: 12px; }
.fe-rec__how .fe-num { border: 0; background: var(--brand-tint); color: var(--brand-text); }
.fe-wait { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 700; color: var(--ink-subtle); }
.fe-wait .mud-progress-circular { width: 16px; height: 16px; }

/* Confirmation et billets */
.fe-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.fe-done__icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-2); border-radius: 50%; background: #e7f5ee; color: var(--success); }
.fe-done p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-subtle); overflow-wrap: anywhere; }
.fe-order { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-alt); font-size: 13px; font-weight: 700; }
.fe-order .mud-icon-root { font-size: 16px; }
.fe-tix-list { display: flex; flex-direction: column; gap: var(--space-2); }
.fe-tix-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.fe-tix-item__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--night); color: var(--on-night); }
.fe-tix-item b { display: block; font-size: 14px; line-height: 20px; }
.fe-tix-item__sub { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fe-done__more { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fe-site .fe-done__more .mud-button-root { flex: 1 1 auto; border-color: var(--line-strong); }
.fe-sent { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 700; text-align: center; color: var(--success); }
.fe-sent.is-error { color: var(--error); }
.fe-sent .mud-icon-root { flex: none; font-size: 18px; }

/* Lien-carte : « Récupérer mes billets », « Générez votre badge » (MudButton) */
.fe-site .fe-reclink.mud-button-root.mud-button { align-self: stretch; min-height: 58px; padding: 10px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); white-space: normal; text-align: left; }
.fe-site .fe-reclink.mud-button-root.mud-button:hover { border-color: var(--brand-text); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-tint); }
.fe-reclink .mud-button-label { justify-content: flex-start; gap: var(--space-3); width: 100%; }
.fe-reclink__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); }
.fe-reclink__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fe-reclink__txt small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-subtle); }
.fe-reclink__txt b { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--brand-text); }
.fe-reclink__go.mud-icon-root { flex: none; color: var(--ink-muted); }
.fe-site .fe-reclink--accent.mud-button-root.mud-button { border-color: var(--accent); background: var(--accent-tint); }
.fe-site .fe-reclink--accent.mud-button-root.mud-button:hover { border-color: var(--accent-text); background: var(--accent-tint); box-shadow: 0 0 0 3px var(--accent-tint); }
.fe-reclink--accent .fe-reclink__ico { background: var(--accent); color: var(--on-accent); }
.fe-reclink--accent .fe-reclink__txt b { color: var(--ink); }
.fe-reclink--accent .fe-reclink__go.mud-icon-root { color: var(--accent-text); }

/* ---------- 30. Récupération de billets ---------- */
.fe-rec__lead { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-subtle); }
.fe-sms { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 12px 14px 14px; border-radius: var(--radius-lg); background: var(--surface-alt); }
.fe-sms__time { font-size: 11px; line-height: 14px; font-weight: 700; text-align: center; color: var(--ink-muted); }
.fe-sms__bubble { align-self: flex-start; max-width: 100%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--line); color: var(--ink); font-size: 14px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.fe-sms__bubble span { display: block; }
.fe-sms__bubble mark { margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: var(--surface); color: var(--brand-text); font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--brand); }
.fe-sms__tip { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--brand-text); }
.fe-sms__tip .mud-icon-root { font-size: 16px; }
.fe-sms figcaption { font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* ---------- 31. Badge « J'y serai » ----------
   La photo du participant est placée derrière le visuel de l'organisateur (un PNG avec une zone transparente).
   Positions et tailles sont posées par js/faevent-badge.js, en pourcentages du visuel. */
.fe-jys { position: relative; align-self: center; width: 100%; max-width: 340px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--line); box-shadow: var(--shadow-raised); }
.fe-jys > * { pointer-events: none; }
.fe-jys.is-adjustable { cursor: grab; touch-action: none; }
.fe-jys.is-adjustable:active { cursor: grabbing; }
.fe-jys__img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.fe-jys__visual { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.fe-jys__empty { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; color: var(--ink-subtle); }
.fe-jys__empty .mud-icon-root { font-size: 32px; }
.fe-jys__name { position: absolute; transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; line-height: 1; white-space: nowrap; color: #ffffff; text-shadow: 0 1px 6px rgba(11, 11, 13, .6); }
.fe-jys-adjust { display: flex; flex-direction: column; gap: var(--space-2); padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-alt); }
.fe-jys-adjust__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.fe-jys-adjust__hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-subtle); }
.fe-jys-adjust__hint .mud-icon-root { flex: none; font-size: 18px; color: var(--brand-text); }
.fe-jys-zoom { display: flex; align-items: center; gap: var(--space-2); }
.fe-jys-zoom input[type="range"] { flex: 1; min-width: 0; height: 40px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.fe-site .fe-jys-zoom .mud-icon-button { flex: none; width: 40px; height: 40px; border-color: var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.fe-jys-zoom output { flex: none; min-width: 48px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.fe-site .fe-filebtn.mud-button-root.mud-button { position: relative; border-color: var(--line-strong); color: var(--ink); cursor: pointer; }
.fe-filebtn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.fe-jys-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.fe-site .fe-jys-actions .mud-button-root.mud-button { padding-inline: var(--space-3); }
.fe-jys-cap { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-alt); }
.fe-jys-cap__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.fe-jys-cap p { margin: 4px 0 0; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }

/* ---------- 32. Barre de réservation mobile ---------- */
.fe-sbar { display: none; }

/* ---------- 33. Adaptation aux écrans (étape 4) ---------- */
@media (max-width: 1179.98px) {
  .fe-shero__inner.mud-container { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
  .fe-shero__title.mud-typography { font-size: 42px; line-height: 46px; }
  .fe-sbody.mud-container { grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; }
}
@media (max-width: 959.98px) {
  .fe-shero__inner.mud-container { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-4) var(--space-8); }
  .fe-poster { width: 100%; max-width: 440px; margin-inline: auto; }
  .fe-shero__title.mud-typography { margin-top: var(--space-3); font-size: 30px; line-height: 34px; }
  .fe-hfacts { margin-top: var(--space-4); }
  .fe-hfacts li { font-size: 15px; }
  /* Le prix et le bouton d'achat passent dans la barre du bas ; seul « Partager » reste ici. */
  .fe-hactions { margin-top: var(--space-6); }
  .fe-hprice, .fe-site .fe-hactions__buy.mud-button-root { display: none; }

  /* La billetterie passe avant la présentation */
  .fe-sbody.mud-container { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4) 112px; }
  .fe-sbody .fe-co { position: static; order: -1; box-shadow: var(--shadow-card); }
  .fe-card.mud-paper { padding: 20px; }
  .fe-co__head { padding: 18px var(--space-4) 0; }
  .fe-co__head--rec { padding-bottom: 18px; }
  .fe-steps { padding: var(--space-4) var(--space-2); }
  .fe-co__body { padding: 20px var(--space-4); }
  .fe-co__foot { padding: 14px var(--space-4); }
  .fe-placerow { flex-direction: column; align-items: flex-start; }

  .fe-sbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -8px 24px rgba(11, 11, 13, .10); }
  /* Inutile tant que la carte de billetterie est à l'écran (attribut posé par js/faevent-sale.js) */
  .fe-site[data-fe-checkout-visible] .fe-sbar { display: none; }
  .fe-sbar small { display: block; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; color: var(--ink-muted); }
  .fe-sbar b { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 800; white-space: nowrap; }
  .fe-site .fe-sbar .mud-button-root { flex: 1; min-width: 0; padding-inline: var(--space-3); }
}
@media (max-width: 479.98px) {
  .fe-2col { grid-template-columns: minmax(0, 1fr); }
  .fe-op__name { font-size: 11px; }
  /* Récapitulatif : chaque valeur passe sous son libellé */
  .fe-recap dl { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: var(--space-4); }
  .fe-recap dd { margin-bottom: var(--space-2); text-align: left; }
  .fe-tix-item { grid-template-columns: auto minmax(0, 1fr); }
  .fe-site .fe-tix-item .mud-button-root { grid-column: 1 / -1; }
}

/* ==========================================================================
   Étape 5 — page « Pour les organisateurs »
   ========================================================================== */

/* ---------- 34. Zones sombres ----------
   Comme dans le pied de page, les variables de palette MudBlazor sont redéfinies dans une zone .fe-dark :
   les composants qui s'y trouvent (champ, libellés, liens) passent en version « fond sombre » sans autre réglage. */
.fe-dark {
  --mud-palette-text-primary: #ffffff;
  --mud-palette-text-secondary: #a1a1aa;
  --mud-palette-action-default: #ffffff;
  --mud-palette-action-default-hover: rgba(255, 255, 255, .08);
  --mud-palette-lines-default: rgba(255, 255, 255, .14);
  --mud-palette-lines-inputs: rgba(255, 255, 255, .28);
  --mud-palette-action-disabled: rgba(255, 255, 255, .4);
  --mud-palette-action-disabled-background: rgba(255, 255, 255, .14);
  --mud-palette-text-disabled: rgba(255, 255, 255, .5);
  --mud-palette-error: #f97066;
  color: var(--on-night);
}
.fe-dark :focus-visible { outline-color: var(--on-night); }
.fe-kicker--accent { color: var(--accent); }

/* ---------- 35. Bandeau des organisateurs ---------- */
.fe-ohero { position: relative; overflow: hidden; background: var(--night); }
.fe-ohero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 90% at 92% 30%, rgba(131, 0, 14, .95), transparent 70%), radial-gradient(30% 40% at 70% 100%, rgba(244, 150, 22, .28), transparent 70%); }
.fe-ohero__inner.mud-container { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 56px; padding-block: 88px 96px; }
.fe-ohero__title.mud-typography { margin-top: var(--space-2); font-size: 72px; line-height: 72px; letter-spacing: -.03em; }
.fe-ohero__title span { color: var(--brand-on-dark); }
.fe-ohero__lead.mud-typography { max-width: 520px; margin-top: var(--space-6); font-size: 19px; line-height: 30px; color: rgba(255, 255, 255, .86); }
.fe-ohero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.fe-ohero__pts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.fe-ohero__pts li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.fe-ohero__pts .mud-icon-root { color: var(--accent); }

/* Aperçu du tableau de bord (illustration, données fictives) */
.fe-dash { position: relative; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.fe-dash__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.fe-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--success); white-space: nowrap; }
.fe-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px #e7f5ee; }
.fe-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.fe-kpi { padding: 12px; border-radius: var(--radius-md); background: var(--surface-alt); }
.fe-kpi small { display: block; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-subtle); }
.fe-kpi b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 800; }
.fe-kpi span { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--success); }
.fe-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: var(--space-4); padding: 12px 12px 0; border-radius: var(--radius-md); background: var(--surface-alt); }
.fe-bars i { flex: 1; border-radius: 6px 6px 0 0; background: var(--brand-tint); }
.fe-bars i.is-hi { background: var(--brand); }
.fe-dash__rows { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-4); }
.fe-dash__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 20px; }
.fe-dash__row span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fe-dash__row .mud-icon-root { font-size: 18px; color: var(--brand-text); }
.fe-dash__row b { font-variant-numeric: tabular-nums; }
.fe-dash__note { position: absolute; left: 16px; bottom: -14px; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(11, 11, 13, .7); color: rgba(255, 255, 255, .8); font-size: 11px; line-height: 16px; font-weight: 600; }
.fe-dash__float { position: absolute; right: -18px; top: -36px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-raised); }
.fe-dash__floatico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #e7f5ee; color: var(--success); }
.fe-dash__float b { display: block; font-size: 13px; line-height: 18px; }
.fe-dash__float span:not(.fe-dash__floatico) { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* ---------- 36. Étapes et fonctionnalités ---------- */
/* Autant de colonnes que d'étapes */
.fe-how { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-6); margin: 0; padding: 0; list-style: none; counter-reset: how; }
.fe-how li { position: relative; padding-top: 56px; }
.fe-how li::before { counter-increment: how; content: counter(how); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.fe-how li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 52px; right: -12px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.fe-how__text.mud-typography { margin-top: 6px; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-muted); }

.fe-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fe-feat { display: flex; flex-direction: column; gap: var(--space-3); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); transition: transform var(--duration-base) var(--fe-ease), box-shadow var(--duration-base) var(--fe-ease), border-color var(--duration-base) var(--fe-ease); }
.fe-feat:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow-card-hover); }
.fe-feat__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-text); }
.fe-feat__icon .mud-icon-root { font-size: 26px; }
.fe-feat__text.mud-typography { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-muted); }
.fe-feat ul { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.fe-feat li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-subtle); }
.fe-feat li .mud-icon-root { flex: none; font-size: 18px; color: var(--success); }

/* ---------- 37. Tarifs : canaux de vente et taux par pays ---------- */
.fe-pricehead { max-width: 720px; margin: 0 auto var(--space-12); text-align: center; }
.fe-pricehead .fe-kicker { margin-bottom: var(--space-3); }
.fe-pricehead__lead.mud-typography { margin-top: var(--space-3); font-weight: 400; color: var(--ink-subtle); }

.fe-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fe-rate { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.fe-rate--wa { border-color: var(--night); background: var(--night); color: var(--on-night); }
.fe-rate--wa::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(131, 0, 14, .9), transparent 70%); }
.fe-rate > * { position: relative; }
.fe-rate--skeleton.mud-skeleton { border-radius: var(--radius-xl); }
.fe-rate__chan { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 800; }
.fe-rate__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-text); }
.fe-rate--wa .fe-rate__ico { background: rgba(255, 255, 255, .12); color: var(--accent); }
.fe-rate__big { display: flex; align-items: baseline; gap: 10px; }
.fe-rate__big small { font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.fe-rate__big b { font-family: var(--font-display); font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -.03em; }
.fe-rate p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.fe-rate--wa .fe-rate__big small, .fe-rate--wa p { color: var(--on-night-muted); }
.fe-rate__list { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.fe-rate__list li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-alt); font-size: 13px; font-weight: 700; white-space: nowrap; }
.fe-rate--wa .fe-rate__list li { background: rgba(255, 255, 255, .1); }
.fe-rate__list b { color: var(--brand-text); }
.fe-rate--wa .fe-rate__list b { color: #ffb2b9; }

/* Explorateur des taux : pays à gauche, opérateurs du pays choisi à droite */
.fe-ratex { display: grid; grid-template-columns: 340px minmax(0, 1fr); margin-top: var(--space-6); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.fe-ratex__side { display: flex; flex-direction: column; min-width: 0; padding: 24px; border-right: 1px solid var(--line); background: var(--surface-alt); }
.fe-ratex__hint { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-subtle); }
.fe-ratex__search.mud-input-control { flex: none; margin: var(--space-4) 0 0; }
.fe-ratex__search .mud-input { border-radius: var(--radius-lg); background: var(--surface); font-size: 15px; font-weight: 500; }
.fe-site .fe-ratex__search .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-lg); }
.fe-ratex__side .fe-help { margin: var(--space-3) 0 0; }
.fe-countrylist { display: flex; flex-direction: column; gap: 4px; max-height: 368px; margin: var(--space-2) -4px 0; padding: 4px; overflow-y: auto; } /* la marge intérieure laisse la place au contour de focus */
.fe-site .fe-countrylist .fe-country.mud-button-root.mud-button { flex: none; min-height: 62px; padding: 10px 12px 10px 10px; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--ink); font-weight: 400; letter-spacing: 0; text-align: left; white-space: normal; }
.fe-site .fe-countrylist .fe-country.mud-button-root.mud-button:hover { background: var(--surface); }
.fe-site .fe-countrylist .fe-country.mud-button-root.mud-button[aria-pressed="true"] { border-color: var(--brand-text); background: var(--surface); box-shadow: var(--shadow-card); }
.fe-country .mud-button-label { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; justify-content: stretch; gap: 12px; width: 100%; }
.fe-country__code { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night); color: var(--on-night); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.fe-country[aria-pressed="true"] .fe-country__code { background: var(--brand); }
.fe-country__main { min-width: 0; }
.fe-country__main b { display: block; font-size: 15px; line-height: 20px; font-weight: 700; }
.fe-country__main span { display: block; font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.fe-country__rate { font-size: 12px; font-weight: 800; color: var(--brand-text); white-space: nowrap; }

.fe-ratex__main { min-width: 0; padding: 28px; }
.fe-ratex__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.fe-ratex__label { display: block; margin-bottom: 4px; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.fe-ratex__head .mud-typography { font-size: 30px; line-height: 34px; font-weight: 800; }
.fe-ratex__sum { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fe-ratex__sum > span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--surface-alt); font-size: 13px; font-weight: 600; color: var(--ink-subtle); white-space: nowrap; }
.fe-ratex__sum .mud-icon-root { font-size: 18px; color: var(--brand-text); }
.fe-ratex__sum b { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink); }
.fe-ratex__main .fe-help { margin: var(--space-4) 0 0; }
.fe-opgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.fe-opcard { display: flex; flex-direction: column; gap: var(--space-3); padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: box-shadow var(--duration-base) var(--fe-ease), border-color var(--duration-base) var(--fe-ease); }
.fe-opcard:hover { border-color: transparent; box-shadow: var(--shadow-card-hover); }
/* Logo de l'opérateur (OperatorRate.LogoUrl), carré ; sans logo, ses initiales */
.fe-oplogo { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-alt); }
.fe-oplogo b { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink-subtle); }
.fe-opcard__name b { display: block; font-size: 15px; line-height: 20px; }
.fe-opcard__name span { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.fe-opcard__rates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.fe-opcard__rates div { padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-alt); }
.fe-opcard__rates dt { font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-subtle); }
.fe-opcard__rates dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 800; }

/* Services à l'unité */
.fe-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.fe-extra { display: flex; align-items: flex-start; gap: var(--space-4); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.fe-extra__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--accent-text); }
.fe-extra__icon .mud-icon-root { font-size: 26px; }
.fe-extra p { margin: 4px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.fe-extra__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: var(--space-3); }
.fe-extra__price b { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 800; }
.fe-extra__price span { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

/* ---------- 38. Simulateur de recettes ---------- */
.fe-sim { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); margin-top: var(--space-12); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card-hover); }
.fe-sim__in { display: flex; flex-direction: column; gap: var(--space-4); padding: 32px; }
.fe-sim__in > .mud-typography { font-size: 26px; line-height: 32px; font-weight: 800; }
.fe-sim__hint { margin: -8px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.fe-sim .fe-2col { gap: var(--space-4) var(--space-3); }
.fe-site .fe-simfield.mud-input-control { margin: 0; }
.fe-simfield .mud-input { background: var(--surface); font-size: 15px; font-weight: 600; }
.fe-sim__seg { align-self: flex-start; }
.fe-sim__out { display: flex; flex-direction: column; gap: var(--space-3); padding: 32px; background: var(--night); }
.fe-sim__title.mud-typography { margin: 0; font-size: 12px; line-height: 16px; color: var(--on-night-muted); }
.fe-simlines { display: flex; flex-direction: column; margin: 0; }
.fe-simlines > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14px; line-height: 20px; }
.fe-simlines dt { color: var(--on-night-muted); }
.fe-simlines dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fe-simlines dd.is-neg { color: #ffb2b9; }
.fe-simnet { margin-top: var(--space-3); }
.fe-simnet small { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--on-night-muted); }
.fe-simnet b { display: block; font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fe-simnet b span { margin-left: 6px; font-size: 18px; letter-spacing: 0; }
.fe-simnet em { display: inline-flex; margin-top: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); color: var(--accent); font-size: 12px; line-height: 16px; font-style: normal; font-weight: 700; }
.fe-sim__out .fe-help { margin: auto 0 0; padding-top: var(--space-3); color: var(--on-night-muted); }

/* ---------- 39. Faevent AI Growth ---------- */
.fe-ai { position: relative; padding-block: 104px; overflow: hidden; background: var(--night); }
.fe-ai::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 10% 10%, rgba(244, 150, 22, .22), transparent 70%), radial-gradient(50% 70% at 95% 85%, rgba(131, 0, 14, .85), transparent 70%); }
.fe-ai::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.fe-ai__grid.mud-container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.fe-soon { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid rgba(244, 150, 22, .5); border-radius: var(--radius-pill); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fe-soon .mud-icon-root { font-size: 16px; }
.fe-ai__title.mud-typography { margin-top: var(--space-4); font-size: 48px; line-height: 52px; }
.fe-ai__title span { color: var(--accent); }
.fe-ai__lead.mud-typography { max-width: 520px; margin-top: var(--space-4); font-size: 18px; line-height: 28px; font-weight: 400; color: rgba(255, 255, 255, .82); }
.fe-ai__feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.fe-ai__feats li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-md); background: rgba(255, 255, 255, .06); font-size: 14px; line-height: 20px; font-weight: 600; }
.fe-ai__feats .mud-icon-root { flex: none; color: var(--accent); }

/* Liste d'attente */
.fe-waitlist { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 560px; margin-top: var(--space-8); }
.fe-waitlist__field { flex: 1; min-width: 0; --mud-palette-primary: #ffffff; } /* contour et libellé blancs quand le champ est actif */
.fe-waitlist__field.mud-input-control { margin: 0; }
.fe-waitlist__field .mud-input { background: rgba(255, 255, 255, .06); }
.fe-site .fe-waitlist .fe-waitlist__button.mud-button-root.mud-button { flex: none; min-height: 56px; } /* même hauteur que le champ */
.fe-waitlist-ok { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-8); padding: 12px 16px; border-radius: var(--radius-md); background: rgba(15, 123, 79, .25); color: #b7f0d4; font-size: 14px; line-height: 20px; font-weight: 700; }
.fe-waitlist-err { margin: var(--space-2) 0 0; font-size: 13px; line-height: 20px; font-weight: 600; color: #f97066; }

/* Illustration (données fictives) */
.fe-ai__panel { position: relative; padding: 24px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-xl); background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fe-ai__paneltitle { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 800; }
.fe-ai__paneltitle .mud-icon-root { color: var(--accent); }
.fe-forecast { margin-top: var(--space-4); padding: 16px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06); }
.fe-forecast small { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--on-night-muted); }
.fe-forecast b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 800; }
.fe-meter { height: 8px; margin-top: 10px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); }
.fe-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--brand-on-dark)); }
.fe-prospects { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-4); }
.fe-prospect { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .05); }
.fe-prospect__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 800; }
.fe-prospect b { display: block; font-size: 13px; line-height: 18px; }
.fe-prospect div span { display: block; font-size: 12px; line-height: 16px; color: var(--on-night-muted); }
.fe-score { padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(244, 150, 22, .18); color: var(--accent); font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.fe-reco { display: flex; gap: 10px; margin-top: var(--space-4); padding: 12px 14px; border: 1px dashed rgba(255, 255, 255, .25); border-radius: var(--radius-md); font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .86); }
.fe-reco .mud-icon-root { flex: none; color: var(--accent); }
.fe-ai__note { margin: var(--space-3) 0 0; font-size: 11px; line-height: 16px; color: var(--on-night-muted); text-align: right; }

/* ---------- 40. Appel à l'action de fin de page ---------- */
.fe-final { position: relative; padding: 72px var(--space-6); overflow: hidden; border-radius: var(--radius-xl); background: var(--brand); text-align: center; }
.fe-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 0% 0%, rgba(244, 150, 22, .35), transparent 70%), radial-gradient(40% 100% at 100% 100%, rgba(11, 11, 13, .45), transparent 70%); }
.fe-final > * { position: relative; }
.fe-final__title.mud-typography { font-size: 44px; line-height: 48px; }
.fe-final__text.mud-typography { margin-top: var(--space-3); color: rgba(255, 255, 255, .88); }
.fe-final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }

/* ---------- 41. Adaptation aux écrans (étape 5) ---------- */
@media (max-width: 1179.98px) {
  .fe-ohero__inner.mud-container { gap: 40px; }
  .fe-ohero__title.mud-typography { font-size: 60px; line-height: 62px; }
  .fe-dash__float { right: 8px; }
  .fe-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-ratex { grid-template-columns: 300px minmax(0, 1fr); }
  .fe-ai__grid.mud-container { gap: 40px; }
  .fe-ai__title.mud-typography { font-size: 40px; line-height: 44px; }
}
@media (max-width: 959.98px) {
  .fe-ohero__inner.mud-container { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12) var(--space-16); }
  .fe-ohero__title.mud-typography { font-size: 46px; line-height: 48px; }
  .fe-ohero__lead.mud-typography { font-size: 16px; line-height: 25px; }
  .fe-site .fe-ohero__ctas .mud-button-root { flex: 1 1 100%; }
  .fe-dash { padding: var(--space-4); }
  .fe-dash__float { top: -40px; }
  .fe-kpi b { font-size: 18px; line-height: 24px; }

  .fe-how { grid-auto-flow: row; }
  .fe-how li { min-height: 40px; padding: 0 0 0 56px; }
  .fe-how li:not(:last-child)::after { top: 48px; right: auto; bottom: -20px; left: 19px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px); }
  .fe-feats { grid-template-columns: minmax(0, 1fr); }
  .fe-feat { padding: 20px; }

  .fe-pricehead { margin-bottom: var(--space-8); }
  .fe-pricehead .mud-typography-h2 { font-size: 30px; line-height: 34px; }
  .fe-rates, .fe-extras { grid-template-columns: minmax(0, 1fr); }
  .fe-rate { padding: 24px; }
  .fe-rate__big b { font-size: 52px; line-height: 52px; }
  .fe-ratex { grid-template-columns: minmax(0, 1fr); }
  .fe-ratex__side { padding: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fe-countrylist { max-height: 264px; }
  .fe-ratex__main { padding: 20px; }
  .fe-ratex__head .mud-typography { font-size: 26px; line-height: 30px; }

  .fe-sim { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-8); }
  .fe-sim__in, .fe-sim__out { padding: 20px; }
  .fe-simnet b { font-size: 36px; line-height: 40px; }

  .fe-ai { padding-block: var(--space-16); }
  .fe-ai__grid.mud-container { grid-template-columns: minmax(0, 1fr); }
  .fe-ai__title.mud-typography { font-size: 32px; line-height: 36px; }
  .fe-ai__lead.mud-typography { font-size: 16px; line-height: 25px; }

  .fe-final { padding: var(--space-12) var(--space-4); }
  .fe-final__title.mud-typography { font-size: 30px; line-height: 34px; }
  .fe-site .fe-final__ctas .mud-button-root { flex: 1 1 100%; }
}
@media (max-width: 599.98px) {
  .fe-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-kpis > :last-child { display: none; }
  .fe-dash__float { right: 0; max-width: calc(100% - 16px); }
  .fe-extra { flex-direction: column; }
  .fe-opgrid { grid-template-columns: minmax(0, 1fr); }
  .fe-opcard { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
  .fe-opcard__rates { grid-column: 1 / -1; }
  .fe-ai__feats { grid-template-columns: minmax(0, 1fr); }
  .fe-waitlist { flex-direction: column; align-items: stretch; }
  .fe-simlines > div { flex-wrap: wrap; }
}

/* ==========================================================================
   Étape 6 — page « À propos »
   ========================================================================== */

/* ---------- 42. Bandeau « À propos » ---------- */
.fe-ahero { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.fe-ahero__inner.mud-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; padding-block: var(--space-8) 80px; }
.fe-ahero__title.mud-typography { margin-top: var(--space-6); font-size: 64px; line-height: 66px; letter-spacing: -.03em; }
.fe-ahero__title span { color: var(--brand-text); }
.fe-ahero__lead { max-width: 520px; margin: var(--space-6) 0 0; font-family: var(--font-display); font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -.01em; }
.fe-ahero__lead b { font-weight: 700; color: var(--brand-text); }
.fe-ahero__text { max-width: 520px; margin: var(--space-4) 0 0; font-size: 16px; line-height: 26px; color: var(--ink-subtle); }

/* Collage de trois photos (AboutPageContent) ; sans photo, un fond aux couleurs de la marque */
.fe-collage { position: relative; height: 440px; }
.fe-collage__img { position: absolute; overflow: hidden; border-radius: var(--radius-xl); background: var(--night); box-shadow: var(--shadow-raised); }
.fe-collage__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fe-collage__img--a { left: 0; top: 0; width: 58%; height: 72%; }
.fe-collage__img--b { right: 0; top: 12%; width: 38%; height: 46%; }
.fe-collage__img--c { right: 6%; bottom: 0; width: 50%; height: 38%; }
.fe-collage__badge { position: absolute; left: 6%; bottom: 4%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-raised); }
.fe-collage__badgeico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.fe-collage__badge b { display: block; font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.fe-collage__badge span:not(.fe-collage__badgeico) { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* ---------- 43. Chiffres clés ---------- */
.fe-section--stats { padding-block: var(--space-16); }
.fe-stats { display: grid; grid-template-columns: repeat(var(--fe-stat-count, 4), minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
/* Même hauteur que le bandeau des chiffres et sa mention, pour que la page ne bouge pas à leur arrivée */
.fe-stats--skeleton.mud-skeleton { height: 222px; border-radius: var(--radius-xl); }
.fe-stat { display: flex; flex-direction: column; gap: 6px; padding: 32px 28px; }
.fe-stat + .fe-stat { border-left: 1px solid var(--line); }
.fe-stat__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-text); }
.fe-stat__icon .mud-icon-root { font-size: 22px; }
.fe-stat b { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fe-stat b small { margin-left: 6px; font-size: 22px; line-height: 1; letter-spacing: 0; } /* line-height : la petite unité ne doit pas agrandir la ligne du nombre */
.fe-stat b small:empty { display: none; }
.fe-stat__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-subtle); }
.fe-stats__note { margin: var(--space-3) 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); text-align: right; }

/* ---------- 44. Notre histoire ---------- */
.fe-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 64px; }
.fe-story .fe-kicker { margin-bottom: var(--space-3); }
.fe-story__text { margin-top: var(--space-6); }
.fe-tl { position: relative; display: flex; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0 0 0 32px; list-style: none; }
.fe-tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.fe-tl li { position: relative; }
.fe-tl li::before { content: ""; position: absolute; left: -32px; top: 4px; width: 16px; height: 16px; border: 3px solid var(--brand); border-radius: 50%; background: var(--surface); }
.fe-tl li.is-now::before { background: var(--brand); box-shadow: 0 0 0 5px var(--brand-tint); }
.fe-tl__when { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 800; color: var(--brand-text); }
.fe-tl p { margin: 2px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- 45. Mission et vision ---------- */
.fe-mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fe-mvcard { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: 40px; overflow: hidden; border-radius: var(--radius-xl); }
.fe-mvcard--mission { background: var(--brand); }
.fe-mvcard--vision { background: var(--night); }
.fe-mvcard::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border: 40px solid rgba(255, 255, 255, .06); border-radius: 50%; }
.fe-mvcard > * { position: relative; z-index: 1; }
.fe-mvcard .fe-kicker { margin-bottom: 0; color: rgba(255, 255, 255, .8); }
.fe-mvcard--vision .fe-kicker { color: var(--accent); }
.fe-mvcard__big.mud-typography { font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -.01em; }
.fe-mvcard p { max-width: 480px; margin: 0; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .8); }

/* ---------- 46. Nos valeurs ---------- */
.fe-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.fe-value { display: flex; flex-direction: column; gap: var(--space-3); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); transition: transform var(--duration-base) var(--fe-ease), box-shadow var(--duration-base) var(--fe-ease), border-color var(--duration-base) var(--fe-ease); }
.fe-value:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow-card-hover); }
.fe-value__n { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ink-muted); }
.fe-value__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--accent-text); }
.fe-value__icon .mud-icon-root { font-size: 26px; }
.fe-value .mud-typography { font-size: 22px; line-height: 28px; }
.fe-value p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- 47. Contact, et adaptation aux écrans (étape 6) ---------- */
.fe-contactgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fe-ccard { display: flex; flex-direction: column; gap: var(--space-3); padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.fe-ccard--dark { border-color: var(--night); background: var(--night); }
.fe-ccard .fe-kicker { margin-bottom: 0; }
.fe-ccard .mud-typography { font-size: 28px; line-height: 34px; font-weight: 800; }
.fe-ccard p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); overflow-wrap: anywhere; }
.fe-ccard p a { color: var(--brand-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fe-ccard--dark p { color: var(--on-night-muted); }
.fe-ccard__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
.fe-hq { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-alt); font-size: 14px; line-height: 20px; color: var(--ink-subtle); }
.fe-hq .mud-icon-root { flex: none; font-size: 22px; color: var(--brand-text); }
.fe-hq b { display: block; font-size: 15px; color: var(--ink); }
.fe-hq span { display: block; }

@media (max-width: 1179.98px) {
  .fe-ahero__title.mud-typography { font-size: 52px; line-height: 54px; }
  .fe-stat b { font-size: 36px; line-height: 40px; }
  .fe-stat b small { font-size: 18px; }
  .fe-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959.98px) {
  .fe-ahero__inner.mud-container { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: var(--space-6) var(--space-12); }
  .fe-ahero__title.mud-typography { font-size: 40px; line-height: 44px; }
  .fe-ahero__lead { font-size: 21px; line-height: 28px; }
  .fe-collage { height: 320px; }

  .fe-section--stats { padding-block: var(--space-12); }
  .fe-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-stats--skeleton.mud-skeleton { height: 340px; }
  .fe-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } /* nombre impair de chiffres : le dernier prend toute la largeur */
  .fe-stat { padding: 20px; }
  .fe-stat + .fe-stat { border-left: 0; }
  .fe-stat:nth-child(even) { border-left: 1px solid var(--line); }
  .fe-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fe-stat b { font-size: 30px; line-height: 34px; }
  .fe-stat b small { font-size: 16px; }
  .fe-stats__note { text-align: left; }

  .fe-story { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fe-story .mud-typography-h2 { font-size: 30px; line-height: 34px; }
  .fe-mv { grid-template-columns: minmax(0, 1fr); }
  .fe-mvcard { padding: 28px; }
  .fe-mvcard__big.mud-typography { font-size: 23px; line-height: 30px; }
  .fe-contactgrid { grid-template-columns: minmax(0, 1fr); }
  .fe-ccard { padding: 24px; }
  .fe-ccard .mud-typography { font-size: 24px; line-height: 30px; }
  .fe-site .fe-ccard__actions .mud-button-root { flex: 1 1 100%; }
}
@media (max-width: 599.98px) {
  .fe-stats--skeleton.mud-skeleton { height: 376px; }
  .fe-collage__badge { left: 0; bottom: 0; }
  .fe-values { grid-template-columns: minmax(0, 1fr); }
  .fe-value { padding: 20px; }
}
@media (max-width: 379.98px) {
  .fe-stat b { font-size: 26px; line-height: 30px; }
}

/* ---------- 48. Pages de texte : sommaire et document ---------- */
.fe-docmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-subtle); }
.fe-docmeta__date { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-weight: 600; color: var(--ink); }
.fe-docmeta__date .mud-icon-root { font-size: 18px; color: var(--brand-text); }

.fe-doc.mud-container { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; gap: 72px; padding-block: var(--space-12) var(--space-24); }
.fe-doc__body { min-width: 0; max-width: 760px; }

.fe-toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; overscroll-behavior: contain; }
.fe-toc__title { display: block; margin-bottom: var(--space-3); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.fe-toc ol, .fe-tocm ol { margin: 0; padding: 0; list-style: none; }
.fe-toc ol { border-left: 1px solid var(--line); }
.fe-toc a, .fe-tocm a { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-subtle); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.fe-toc a { margin-left: -1px; padding: 7px 0 7px var(--space-4); border-left: 2px solid transparent; transition: color var(--duration-fast) var(--fe-ease), border-color var(--duration-fast) var(--fe-ease); }
.fe-toc a:hover { border-left-color: var(--brand); color: var(--ink); }
.fe-toc a:focus-visible { outline-offset: -2px; } /* la colonne défile : un contour extérieur serait rogné */
.fe-toc a .mud-icon-root { flex: none; font-size: 18px; margin-top: 1px; }
.fe-toc__n { flex: none; min-width: 18px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }

/* Sommaire repliable : il remplace la colonne sur les écrans étroits. */
.fe-tocm { display: none; margin-bottom: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-alt); }
.fe-tocm summary, .fe-qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; list-style: none; }
.fe-tocm summary::-webkit-details-marker, .fe-qa summary::-webkit-details-marker { display: none; }
.fe-tocm summary { padding: 14px var(--space-4); font-size: 15px; line-height: 22px; font-weight: 700; }
.fe-tocm ol { padding: 0 var(--space-4) var(--space-3); }
.fe-tocm a { padding: 8px 0; }
.fe-tocm a .mud-icon-root { flex: none; font-size: 18px; margin-top: 1px; }
.fe-chev.mud-icon-root { flex: none; color: var(--ink-subtle); transition: transform var(--duration-base) var(--fe-ease); }
details[open] > summary .fe-chev { transform: rotate(180deg); }

.fe-doc__draft { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); padding: var(--space-4) 20px; border: 1px solid #f6d79b; border-radius: var(--radius-lg); background: var(--accent-tint); font-size: 14px; line-height: 21px; color: #5f3a00; }
.fe-doc__draft .mud-icon-root { flex: none; color: var(--accent-text); }
.fe-doc__draft b { display: block; font-size: 15px; color: #4a2d00; }

.fe-doc__section + .fe-doc__section { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.fe-doc__section h2, .fe-faq h2 { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.015em; }
.fe-doc__section h2 { align-items: baseline; }
.fe-doc__num { flex: none; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.fe-doc__section h3 { margin: 28px 0 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.fe-doc__section p, .fe-qa__a p { margin: var(--space-3) 0 0; font-size: 16px; line-height: 27px; color: #2b2f36; overflow-wrap: anywhere; }
.fe-doc__section h2 + p, .fe-doc__section h2 + ul { margin-top: var(--space-4); }
.fe-doc__section ul { margin: var(--space-3) 0 0; padding-left: 22px; }
.fe-doc__section li { padding-left: 4px; font-size: 16px; line-height: 27px; color: #2b2f36; }
.fe-doc__section li + li { margin-top: 6px; }
.fe-doc__section li::marker { color: var(--brand-text); }
.fe-doc__section strong, .fe-qa__a strong { font-weight: 700; color: var(--ink); }
.fe-doc__section a, .fe-qa__a a { border-radius: 4px; color: var(--brand-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fe-doc__section a:hover, .fe-qa__a a:hover { text-decoration-thickness: 2px; }

.fe-doc__card { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-4); padding: 20px var(--space-6); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius-md); background: var(--surface-alt); font-size: 15px; line-height: 24px; color: #2b2f36; }
.fe-doc__card b { margin-bottom: 2px; font-family: var(--font-display); font-size: 17px; line-height: 24px; color: var(--ink); }

.fe-doc__table { margin-top: var(--space-4); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.fe-doc__table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.fe-doc__table th { padding: var(--space-3) var(--space-4); background: var(--surface-alt); text-align: left; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.fe-doc__table td { padding: 14px var(--space-4); border-top: 1px solid var(--line); vertical-align: top; color: #2b2f36; }
.fe-doc__table td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- 49. Questions fréquentes ---------- */
.fe-faq + .fe-faq { margin-top: var(--space-12); }
.fe-faq h2 { margin-bottom: 20px; font-size: 26px; line-height: 32px; }
.fe-faq__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-text); }
.fe-faq__ico .mud-icon-root { font-size: 24px; }
.fe-qa { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--duration-fast) var(--fe-ease), box-shadow var(--duration-fast) var(--fe-ease); }
.fe-qa + .fe-qa { margin-top: var(--space-3); }
.fe-qa:hover { border-color: var(--line-strong); }
.fe-qa[open] { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.fe-qa summary { padding: 18px 20px; border-radius: var(--radius-lg); font-size: 16px; line-height: 24px; font-weight: 700; }
.fe-qa__a { padding: 0 20px 20px; }
.fe-qa__a p:first-child { margin-top: 0; }
.fe-doc.mud-container:has(.fe-faq) { padding-bottom: var(--space-16); }
.fe-faqend { padding-bottom: var(--space-24); }

/* ---------- 50. Adaptation aux écrans (pages de texte et aide) ---------- */
@media (max-width: 1179.98px) {
  .fe-doc.mud-container { grid-template-columns: 232px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 959.98px) {
  .fe-doc.mud-container { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--space-8) var(--space-16); }
  .fe-doc__body { max-width: none; }
  .fe-toc { display: none; }
  .fe-tocm { display: block; }
  .fe-faqend { padding-bottom: var(--space-16); }
}
@media (max-width: 599.98px) {
  .fe-doc__section + .fe-doc__section { margin-top: var(--space-8); padding-top: var(--space-8); }
  .fe-doc__section h2 { font-size: 23px; line-height: 29px; }
  .fe-faq h2 { font-size: 22px; line-height: 28px; }
  .fe-faq__ico { width: 40px; height: 40px; }
  .fe-doc__section p, .fe-doc__section li, .fe-qa__a p { font-size: 15px; line-height: 25px; }
  .fe-doc__card { padding: var(--space-4) 20px; }
  .fe-qa summary { padding: var(--space-4); font-size: 15px; line-height: 22px; }
  .fe-qa__a { padding: 0 var(--space-4) var(--space-4); }
}

/* Carte d'événement : les éléments posés sur le visuel se détachent aussi d'une affiche claire. */
.fe-ecard__tags .fe-badge,
.fe-site .fe-fav.mud-icon-button {
    box-shadow: 0 0 0 1px rgba(11, 11, 13, .10), 0 2px 8px rgba(11, 11, 13, .24);
}

.fe-ecard__body .fe-date {
    box-shadow: 0 0 0 1px rgba(11, 11, 13, .10), 0 6px 16px rgba(11, 11, 13, .22);
}