/* =========================================================================
   FFCP · Design System v1.0
   Direction 03 — Modern Sports Federation
   Fédération Française des Clubs de Poker
   -------------------------------------------------------------------------
   Production CSS for PHP / HTML / CSS projects.
   No framework, no JS, no preprocessor — drop into <head> and use the
   class names below.

   Naming convention
   -----------------
   Block:      .ffcp-btn          .ffcp-card           .ffcp-table
   Element:    .ffcp-card__header .ffcp-table__cell
   Modifier:   .ffcp-btn--primary .ffcp-btn--lg        .ffcp-card--dark
   State:      .is-active         .is-disabled         .has-error
   Token vars: --ffcp-color-navy  --ffcp-space-4       --ffcp-radius-md

   Layer order (cascade) :
   1. Tokens     2. Reset      3. Layout     4. Typography
   5. Components 6. Utilities  7. Responsive

   Accessibility
   -------------
   - Focus rings are visible and consistent across every interactive
     element (3-px ring, brand colour, 2-px offset).
   - All colour pairs meet WCAG AA contrast (verified against #0B1F45
     on #FFFFFF and reverse).
   - prefers-reduced-motion is respected.
   - Form labels are always associated; placeholders never replace labels.
   - Buttons use real <button> elements; links use <a>. Don't swap them.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1 · TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* ---- Brand colours ------------------------------------------------- */
  --ffcp-color-navy:           #0B1F45;
  --ffcp-color-navy-600:       #142A55;
  --ffcp-color-navy-700:       #0A1A3B;
  --ffcp-color-navy-deep:      #070F2A;

  --ffcp-color-red:            #F02E3C;   /* "Rouge signal" — action / accent */
  --ffcp-color-red-600:        #D8232F;
  --ffcp-color-red-700:        #B41C26;
  --ffcp-color-red-50:         #FEEAEC;

  /* ---- Neutral scale ------------------------------------------------- */
  --ffcp-color-white:          #FFFFFF;
  --ffcp-color-bone-50:        #F8F9FB;
  --ffcp-color-bone-100:       #F2F3F7;
  --ffcp-color-bone-200:       #E8EAF0;
  --ffcp-color-bone-300:       #DDE1E8;
  --ffcp-color-bone-400:       #C6CBD7;
  --ffcp-color-bone-500:       #99A0B0;
  --ffcp-color-bone-600:       #6E7587;
  --ffcp-color-bone-700:       #4E556A;
  --ffcp-color-bone-800:       #2D344A;
  --ffcp-color-bone-900:       #161B2E;

  /* ---- Semantic ------------------------------------------------------ */
  --ffcp-color-success:        #1E8A5B;
  --ffcp-color-success-bg:     #E6F4ED;
  --ffcp-color-warning:        #B96E0A;
  --ffcp-color-warning-bg:     #FCF1E2;
  --ffcp-color-danger:         #C8202E;
  --ffcp-color-danger-bg:      #FDECEE;
  --ffcp-color-info:           #2A6FDB;
  --ffcp-color-info-bg:        #EAF2FD;

  /* ---- Surfaces (semantic aliases) ----------------------------------- */
  --ffcp-bg:                   var(--ffcp-color-white);
  --ffcp-bg-muted:             var(--ffcp-color-bone-100);
  --ffcp-bg-alt:               var(--ffcp-color-bone-50);
  --ffcp-bg-inverse:           var(--ffcp-color-navy);
  --ffcp-bg-inverse-deep:      var(--ffcp-color-navy-deep);

  /* ---- Text ---------------------------------------------------------- */
  --ffcp-text:                 var(--ffcp-color-navy);
  --ffcp-text-muted:           var(--ffcp-color-bone-700);
  --ffcp-text-faint:           var(--ffcp-color-bone-600);
  --ffcp-text-inverse:         var(--ffcp-color-white);
  --ffcp-text-accent:          var(--ffcp-color-red);

  /* ---- Borders ------------------------------------------------------- */
  --ffcp-border:               var(--ffcp-color-bone-300);
  --ffcp-border-strong:        var(--ffcp-color-navy);
  --ffcp-border-faint:         var(--ffcp-color-bone-200);
  --ffcp-border-inverse:       rgba(255, 255, 255, 0.18);

  /* ---- Focus --------------------------------------------------------- */
  --ffcp-focus-ring:           0 0 0 3px rgba(240, 46, 60, 0.35);
  --ffcp-focus-ring-inverse:   0 0 0 3px rgba(255, 255, 255, 0.45);

  /* ---- Typography ---------------------------------------------------- */
  --ffcp-font-display:         "Archivo", "Archivo Narrow", Impact, "Helvetica Neue", Arial, sans-serif;
  --ffcp-font-ui:              "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ffcp-font-mono:            "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font sizes — UI scale (Inter, body, small UI bits). */
  --ffcp-text-xs:              0.75rem;   /* 12 */
  --ffcp-text-sm:              0.8125rem; /* 13 */
  --ffcp-text-base:            0.9375rem; /* 15 — default body */
  --ffcp-text-md:              1rem;      /* 16 */
  --ffcp-text-lg:              1.125rem;  /* 18 */
  --ffcp-text-xl:              1.375rem;  /* 22 — lede */

  /* Font sizes — Display scale (Archivo, uppercase, headings). */
  --ffcp-display-xs:           1.25rem;   /* 20 */
  --ffcp-display-sm:           1.625rem;  /* 26 */
  --ffcp-display-md:           2.25rem;   /* 36 */
  --ffcp-display-lg:           3rem;      /* 48 */
  --ffcp-display-xl:           4rem;      /* 64 */
  --ffcp-display-2xl:          5.25rem;   /* 84 */

  /* Line heights */
  --ffcp-leading-tight:        0.95;
  --ffcp-leading-snug:         1.15;
  --ffcp-leading-normal:       1.5;
  --ffcp-leading-loose:        1.75;

  /* Letter spacing */
  --ffcp-tracking-tight:       -0.025em;
  --ffcp-tracking-snug:        -0.01em;
  --ffcp-tracking-normal:      0;
  --ffcp-tracking-wide:        0.08em;
  --ffcp-tracking-wider:       0.16em;
  --ffcp-tracking-widest:      0.22em;

  /* Font weights */
  --ffcp-weight-regular:       400;
  --ffcp-weight-medium:        500;
  --ffcp-weight-semibold:      600;
  --ffcp-weight-bold:          700;
  --ffcp-weight-extrabold:     800;
  --ffcp-weight-black:         900;

  /* ---- Spacing (4-pt base) ------------------------------------------- */
  --ffcp-space-0:              0;
  --ffcp-space-1:              0.25rem;   /* 4 */
  --ffcp-space-2:              0.5rem;    /* 8 */
  --ffcp-space-3:              0.75rem;   /* 12 */
  --ffcp-space-4:              1rem;      /* 16 */
  --ffcp-space-5:              1.25rem;   /* 20 */
  --ffcp-space-6:              1.5rem;    /* 24 */
  --ffcp-space-8:              2rem;      /* 32 */
  --ffcp-space-10:             2.5rem;    /* 40 */
  --ffcp-space-12:             3rem;      /* 48 */
  --ffcp-space-16:             4rem;      /* 64 */
  --ffcp-space-20:             5rem;      /* 80 */
  --ffcp-space-24:             6rem;      /* 96 */
  --ffcp-space-32:             8rem;      /* 128 */

  /* ---- Radius (sport federation = sharp; radii used sparingly) ------- */
  --ffcp-radius-none:          0;
  --ffcp-radius-xs:            2px;
  --ffcp-radius-sm:            4px;
  --ffcp-radius-md:            6px;
  --ffcp-radius-lg:            10px;
  --ffcp-radius-pill:          999px;

  /* ---- Shadows (also restrained — depth comes from colour, not blur) - */
  --ffcp-shadow-xs:            0 1px 2px rgba(11, 31, 69, 0.06);
  --ffcp-shadow-sm:            0 2px 6px rgba(11, 31, 69, 0.08);
  --ffcp-shadow-md:            0 6px 18px -6px rgba(11, 31, 69, 0.18);
  --ffcp-shadow-lg:            0 18px 40px -16px rgba(11, 31, 69, 0.28);
  --ffcp-shadow-press:         inset 0 2px 0 rgba(0, 0, 0, 0.08);

  /* ---- Borders width / dividers -------------------------------------- */
  --ffcp-stroke-thin:          1px;
  --ffcp-stroke-base:          2px;
  --ffcp-stroke-bold:          3px;
  --ffcp-stroke-heavy:         6px;

  /* ---- Layout -------------------------------------------------------- */
  --ffcp-container-sm:         640px;
  --ffcp-container-md:         768px;
  --ffcp-container-lg:         1024px;
  --ffcp-container-xl:         1280px;
  --ffcp-container-2xl:        1440px;

  --ffcp-page-padding:         clamp(1.25rem, 4vw, 3.5rem);
  --ffcp-section-padding-y:    clamp(2.5rem, 6vw, 4.5rem);

  /* ---- Motion -------------------------------------------------------- */
  --ffcp-ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ffcp-ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --ffcp-duration-fast:        120ms;
  --ffcp-duration-base:        180ms;
  --ffcp-duration-slow:        280ms;

  /* ---- Z-index scale ------------------------------------------------- */
  --ffcp-z-base:               1;
  --ffcp-z-raised:             10;
  --ffcp-z-sticky:             100;
  --ffcp-z-dropdown:           200;
  --ffcp-z-overlay:            500;
  --ffcp-z-modal:              700;
  --ffcp-z-toast:              900;
}


/* -------------------------------------------------------------------------
   2 · RESET / BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ffcp-font-ui);
  font-size: var(--ffcp-text-base);
  line-height: var(--ffcp-leading-normal);
  color: var(--ffcp-text);
  background: var(--ffcp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a {
  color: var(--ffcp-color-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--ffcp-duration-fast) var(--ffcp-ease-out);
}
a:hover { color: var(--ffcp-color-red); }

hr {
  border: 0;
  border-top: var(--ffcp-stroke-thin) solid var(--ffcp-border);
  margin: var(--ffcp-space-6) 0;
}

::selection { background: var(--ffcp-color-red); color: #fff; }

:focus-visible {
  outline: none;
  box-shadow: var(--ffcp-focus-ring);
  border-radius: var(--ffcp-radius-sm);
}

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


/* -------------------------------------------------------------------------
   3 · LAYOUT
   ------------------------------------------------------------------------- */
.ffcp-container {
  width: 100%;
  max-width: var(--ffcp-container-xl);
  margin-inline: auto;
  padding-inline: var(--ffcp-page-padding);
}
.ffcp-container--narrow { max-width: 860px; }
.ffcp-container--wide   { max-width: var(--ffcp-container-2xl); }

.ffcp-section {
  padding-block: var(--ffcp-section-padding-y);
}
.ffcp-section--alt    { background: var(--ffcp-bg-alt); }
.ffcp-section--muted  { background: var(--ffcp-bg-muted); }
.ffcp-section--dark   { background: var(--ffcp-bg-inverse); color: var(--ffcp-text-inverse); }

.ffcp-divider {
  height: var(--ffcp-stroke-thin);
  background: var(--ffcp-border);
  border: 0;
}
.ffcp-divider--strong { background: var(--ffcp-border-strong); height: var(--ffcp-stroke-base); }
.ffcp-divider--accent { background: var(--ffcp-color-red); height: var(--ffcp-stroke-bold); }


/* -------------------------------------------------------------------------
   4 · TYPOGRAPHY
   ------------------------------------------------------------------------- */
.ffcp-display,
.ffcp-display-xl,
.ffcp-display-lg,
.ffcp-display-md,
.ffcp-display-sm {
  font-family: var(--ffcp-font-display);
  font-weight: var(--ffcp-weight-black);
  line-height: var(--ffcp-leading-tight);
  letter-spacing: var(--ffcp-tracking-tight);
  text-transform: uppercase;
  margin: 0;
}
.ffcp-display-2xl { font-size: var(--ffcp-display-2xl); font-family: var(--ffcp-font-display); font-weight: 900; line-height: var(--ffcp-leading-tight); letter-spacing: var(--ffcp-tracking-tight); text-transform: uppercase; margin: 0; }
.ffcp-display-xl  { font-size: var(--ffcp-display-xl); }
.ffcp-display-lg  { font-size: var(--ffcp-display-lg); }
.ffcp-display-md  { font-size: var(--ffcp-display-md); }
.ffcp-display-sm  { font-size: var(--ffcp-display-sm); }

.ffcp-heading {
  font-family: var(--ffcp-font-display);
  font-weight: var(--ffcp-weight-bold);
  letter-spacing: var(--ffcp-tracking-snug);
  text-transform: uppercase;
  line-height: var(--ffcp-leading-snug);
  margin: 0;
}

.ffcp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ffcp-space-3);
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-extrabold);
  letter-spacing: var(--ffcp-tracking-widest);
  color: var(--ffcp-color-red);
  text-transform: uppercase;
}
.ffcp-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  background: currentColor;
}
.ffcp-eyebrow--bare::before { display: none; }

.ffcp-lede {
  font-size: var(--ffcp-text-xl);
  line-height: 1.45;
  color: var(--ffcp-text);
  font-weight: var(--ffcp-weight-medium);
  margin: 0;
}

.ffcp-body  { font-size: var(--ffcp-text-base); line-height: var(--ffcp-leading-normal); color: var(--ffcp-text); }
.ffcp-muted { color: var(--ffcp-text-muted); }
.ffcp-mono  { font-family: var(--ffcp-font-mono); letter-spacing: 0.04em; }
.ffcp-meta  {
  font-family: var(--ffcp-font-mono);
  font-size: var(--ffcp-text-xs);
  letter-spacing: var(--ffcp-tracking-wider);
  color: var(--ffcp-text-muted);
  text-transform: uppercase;
}


/* -------------------------------------------------------------------------
   5 · BUTTONS
   ------------------------------------------------------------------------- */
.ffcp-btn {
  --_btn-bg:       transparent;
  --_btn-fg:       var(--ffcp-color-navy);
  --_btn-border:   var(--ffcp-color-navy);
  --_btn-hover-bg: var(--ffcp-color-navy);
  --_btn-hover-fg: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ffcp-space-3);
  padding: 14px 22px;
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-sm);
  font-weight: var(--ffcp-weight-extrabold);
  letter-spacing: var(--ffcp-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  border: 2px solid var(--_btn-border);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  border-radius: var(--ffcp-radius-none);
  transition:
    background var(--ffcp-duration-fast) var(--ffcp-ease-out),
    color      var(--ffcp-duration-fast) var(--ffcp-ease-out),
    border     var(--ffcp-duration-fast) var(--ffcp-ease-out),
    transform  var(--ffcp-duration-fast) var(--ffcp-ease-out);
  white-space: nowrap;
}
.ffcp-btn:hover  { background: var(--_btn-hover-bg); color: var(--_btn-hover-fg); border-color: var(--_btn-hover-bg); }
.ffcp-btn:active { transform: translateY(1px); }
.ffcp-btn:focus-visible { outline: none; box-shadow: var(--ffcp-focus-ring); }
.ffcp-btn[disabled],
.ffcp-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.ffcp-btn--primary {
  --_btn-bg:       var(--ffcp-color-red);
  --_btn-fg:       #fff;
  --_btn-border:   var(--ffcp-color-red);
  --_btn-hover-bg: var(--ffcp-color-red-700);
  --_btn-hover-fg: #fff;
}
.ffcp-btn--secondary {
  --_btn-bg:       var(--ffcp-color-navy);
  --_btn-fg:       #fff;
  --_btn-border:   var(--ffcp-color-navy);
  --_btn-hover-bg: var(--ffcp-color-navy-deep);
  --_btn-hover-fg: #fff;
}
.ffcp-btn--ghost {
  --_btn-bg:       transparent;
  --_btn-fg:       var(--ffcp-color-navy);
  --_btn-border:   var(--ffcp-color-navy);
  --_btn-hover-bg: var(--ffcp-color-navy);
  --_btn-hover-fg: #fff;
}
.ffcp-btn--link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ffcp-color-navy);
  text-decoration: underline;
  text-decoration-color: var(--ffcp-color-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.ffcp-btn--link:hover { background: transparent; color: var(--ffcp-color-red); }

/* On dark surfaces */
.ffcp-btn--on-dark           { --_btn-fg: #fff; --_btn-border: #fff; --_btn-hover-bg: #fff; --_btn-hover-fg: var(--ffcp-color-navy); }
.ffcp-btn--on-dark.ffcp-btn--primary { --_btn-bg: var(--ffcp-color-red); --_btn-border: var(--ffcp-color-red); --_btn-hover-bg: #fff; --_btn-hover-fg: var(--ffcp-color-navy); }

/* Sizes */
.ffcp-btn--sm { padding: 9px 14px;  font-size: var(--ffcp-text-xs); }
.ffcp-btn--lg { padding: 18px 28px; font-size: var(--ffcp-text-base); }

/* Icon-only */
.ffcp-btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
}

/* Button group (joined) */
.ffcp-btn-group { display: inline-flex; }
.ffcp-btn-group > .ffcp-btn + .ffcp-btn { margin-left: -2px; }

/* Stat-prefixed button (the "166 CLUBS" hero button) */
.ffcp-btn__stat {
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xl);
  font-weight: var(--ffcp-weight-black);
  line-height: 1;
  letter-spacing: var(--ffcp-tracking-tight);
  margin-right: var(--ffcp-space-2);
}


/* -------------------------------------------------------------------------
   6 · BADGES & TAGS
   ------------------------------------------------------------------------- */
.ffcp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ffcp-space-2);
  padding: 4px 10px;
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-extrabold);
  letter-spacing: var(--ffcp-tracking-wider);
  text-transform: uppercase;
  background: var(--ffcp-bg-muted);
  color: var(--ffcp-color-navy);
  border-radius: var(--ffcp-radius-none);
  line-height: 1.6;
}
.ffcp-badge--signal   { background: var(--ffcp-color-red); color: #fff; }
.ffcp-badge--navy     { background: var(--ffcp-color-navy); color: #fff; }
.ffcp-badge--outline  { background: transparent; border: 1px solid var(--ffcp-border); color: var(--ffcp-color-navy); }
.ffcp-badge--success  { background: var(--ffcp-color-success-bg); color: var(--ffcp-color-success); }
.ffcp-badge--warning  { background: var(--ffcp-color-warning-bg); color: var(--ffcp-color-warning); }
.ffcp-badge--danger   { background: var(--ffcp-color-danger-bg);  color: var(--ffcp-color-danger); }

.ffcp-badge__dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  flex-shrink: 0;
  display: inline-block;
}

/* "Tag" = the small leading-bar uppercase label (see .ffcp-eyebrow as well) */
.ffcp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ffcp-space-3);
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-extrabold);
  letter-spacing: var(--ffcp-tracking-widest);
  color: var(--ffcp-color-red);
  text-transform: uppercase;
}


/* -------------------------------------------------------------------------
   7 · CARDS
   ------------------------------------------------------------------------- */
.ffcp-card {
  background: var(--ffcp-bg);
  border: var(--ffcp-stroke-thin) solid var(--ffcp-border);
  border-radius: var(--ffcp-radius-none);
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--ffcp-duration-fast) var(--ffcp-ease-out),
    box-shadow   var(--ffcp-duration-fast) var(--ffcp-ease-out),
    transform    var(--ffcp-duration-fast) var(--ffcp-ease-out);
}
.ffcp-card--linked:hover,
.ffcp-card--linked:focus-within {
  border-color: var(--ffcp-color-navy);
  box-shadow: var(--ffcp-shadow-md);
  transform: translateY(-2px);
}
.ffcp-card--dark {
  background: var(--ffcp-bg-inverse);
  color: var(--ffcp-text-inverse);
  border-color: transparent;
}
.ffcp-card--accent {
  border-top: var(--ffcp-stroke-bold) solid var(--ffcp-color-red);
}

.ffcp-card__header,
.ffcp-card__body,
.ffcp-card__footer {
  padding: var(--ffcp-space-5) var(--ffcp-space-6);
}
.ffcp-card__header {
  border-bottom: var(--ffcp-stroke-thin) solid var(--ffcp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ffcp-space-4);
}
.ffcp-card__footer {
  border-top: var(--ffcp-stroke-thin) solid var(--ffcp-border);
  background: var(--ffcp-bg-alt);
}
.ffcp-card__title {
  font-family: var(--ffcp-font-display);
  font-weight: var(--ffcp-weight-extrabold);
  font-size: var(--ffcp-text-lg);
  text-transform: uppercase;
  letter-spacing: var(--ffcp-tracking-snug);
  margin: 0;
  overflow-wrap: break-word;
}
.ffcp-card__media {
  background: var(--ffcp-bg-muted);
  aspect-ratio: 16 / 10;
  border-bottom: var(--ffcp-stroke-thin) solid var(--ffcp-border);
}

/* Stat card (numbers + label) */
.ffcp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ffcp-space-2);
  padding: var(--ffcp-space-6);
  border: var(--ffcp-stroke-thin) solid var(--ffcp-border);
  background: var(--ffcp-bg);
}
.ffcp-stat__value {
  font-family: var(--ffcp-font-display);
  font-weight: var(--ffcp-weight-black);
  font-size: var(--ffcp-display-lg);
  line-height: 1;
  letter-spacing: var(--ffcp-tracking-tight);
  color: var(--ffcp-color-navy);
}
.ffcp-stat__label {
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-bold);
  letter-spacing: var(--ffcp-tracking-widest);
  text-transform: uppercase;
  color: var(--ffcp-text-muted);
}
.ffcp-stat--accent .ffcp-stat__value { color: var(--ffcp-color-red); }


/* -------------------------------------------------------------------------
   8 · FORMS
   ------------------------------------------------------------------------- */
.ffcp-field {
  display: flex;
  flex-direction: column;
  gap: var(--ffcp-space-2);
}
.ffcp-label {
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-extrabold);
  letter-spacing: var(--ffcp-tracking-wider);
  text-transform: uppercase;
  color: var(--ffcp-color-navy);
}
.ffcp-label__required { color: var(--ffcp-color-red); margin-left: 2px; }

.ffcp-input,
.ffcp-textarea,
.ffcp-select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--ffcp-text-base);
  color: var(--ffcp-text);
  background: var(--ffcp-bg);
  border: 2px solid var(--ffcp-border);
  border-radius: var(--ffcp-radius-none);
  transition:
    border-color var(--ffcp-duration-fast) var(--ffcp-ease-out),
    box-shadow   var(--ffcp-duration-fast) var(--ffcp-ease-out);
}
.ffcp-input::placeholder,
.ffcp-textarea::placeholder { color: var(--ffcp-text-faint); }

.ffcp-input:hover,
.ffcp-textarea:hover,
.ffcp-select:hover { border-color: var(--ffcp-color-navy); }

.ffcp-input:focus-visible,
.ffcp-textarea:focus-visible,
.ffcp-select:focus-visible {
  outline: none;
  border-color: var(--ffcp-color-navy);
  box-shadow: var(--ffcp-focus-ring);
}

.ffcp-textarea { min-height: 120px; resize: vertical; }

.ffcp-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ffcp-color-navy) 50%),
                    linear-gradient(135deg, var(--ffcp-color-navy) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* States */
.ffcp-field.has-error .ffcp-input,
.ffcp-field.has-error .ffcp-textarea,
.ffcp-field.has-error .ffcp-select { border-color: var(--ffcp-color-danger); }
.ffcp-field.has-error .ffcp-label  { color: var(--ffcp-color-danger); }

.ffcp-field__help {
  font-size: var(--ffcp-text-xs);
  color: var(--ffcp-text-muted);
}
.ffcp-field__error {
  font-size: var(--ffcp-text-xs);
  color: var(--ffcp-color-danger);
  font-weight: var(--ffcp-weight-semibold);
}

.ffcp-input[disabled],
.ffcp-textarea[disabled],
.ffcp-select[disabled] {
  background: var(--ffcp-bg-muted);
  color: var(--ffcp-text-faint);
  cursor: not-allowed;
}

/* Checkbox / radio */
.ffcp-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ffcp-space-3);
  cursor: pointer;
  font-size: var(--ffcp-text-base);
}
.ffcp-check input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ffcp-color-navy);
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--ffcp-duration-fast) var(--ffcp-ease-out);
  position: relative;
}
.ffcp-check input[type="radio"] { border-radius: 50%; }
.ffcp-check input:checked { background: var(--ffcp-color-red); border-color: var(--ffcp-color-red); }
.ffcp-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  width: 6px;
  height: 10px;
  margin: auto;
}
.ffcp-check input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
}
.ffcp-check input:focus-visible { box-shadow: var(--ffcp-focus-ring); }


/* -------------------------------------------------------------------------
   9 · TABLES
   ------------------------------------------------------------------------- */
.ffcp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ffcp-text-base);
  background: var(--ffcp-bg);
}
.ffcp-table th,
.ffcp-table td {
  padding: var(--ffcp-space-4) var(--ffcp-space-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--ffcp-stroke-thin) solid var(--ffcp-border);
}
.ffcp-table th {
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-extrabold);
  letter-spacing: var(--ffcp-tracking-wider);
  text-transform: uppercase;
  color: var(--ffcp-color-navy);
  background: var(--ffcp-bg-alt);
  border-bottom: 2px solid var(--ffcp-color-navy);
  white-space: nowrap;
}
.ffcp-table tbody tr {
  transition: background var(--ffcp-duration-fast) var(--ffcp-ease-out);
}
.ffcp-table tbody tr:hover { background: var(--ffcp-bg-alt); }
.ffcp-table tbody tr:last-child td { border-bottom: 0; }

.ffcp-table--striped tbody tr:nth-child(even) { background: var(--ffcp-bg-alt); }
.ffcp-table--striped tbody tr:hover           { background: var(--ffcp-bg-muted); }

.ffcp-table--compact th,
.ffcp-table--compact td { padding: var(--ffcp-space-3) var(--ffcp-space-4); }

.ffcp-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--ffcp-font-display);
  font-weight: var(--ffcp-weight-bold);
}

.ffcp-table-scroll {
  overflow-x: auto;
  border: var(--ffcp-stroke-thin) solid var(--ffcp-border);
}


/* -------------------------------------------------------------------------
   10 · NAVIGATION
   ------------------------------------------------------------------------- */
.ffcp-header {
  background: #fff;
  border-bottom: var(--ffcp-stroke-thin) solid var(--ffcp-border);
  position: relative;
}
.ffcp-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ffcp-space-6);
  padding-block: var(--ffcp-space-4);
}
.ffcp-header__brand {
  display: flex;
  align-items: center;
  gap: var(--ffcp-space-4);
  text-decoration: none;
  color: inherit;
}
.ffcp-header__brand-name {
  font-family: var(--ffcp-font-display);
  font-weight: var(--ffcp-weight-extrabold);
  font-size: var(--ffcp-text-lg);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: var(--ffcp-tracking-snug);
}
.ffcp-header__brand-name small {
  display: block;
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-semibold);
  color: var(--ffcp-text-muted);
  letter-spacing: var(--ffcp-tracking-wide);
  margin-top: 2px;
}

/* Shield mark */
.ffcp-shield {
  width: 56px;
  height: 56px;
  background: var(--ffcp-color-navy);
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.ffcp-shield::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 23%;
  height: 100%;
  background: var(--ffcp-color-red);
}
.ffcp-shield__mark {
  position: relative;
  color: #fff;
  font-family: var(--ffcp-font-display);
  font-weight: var(--ffcp-weight-extrabold);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.ffcp-shield--sm { width: 40px; height: 40px; }
.ffcp-shield--sm .ffcp-shield__mark { font-size: 0.75rem; }

/* Primary nav */
.ffcp-nav {
  display: flex;
  align-items: center;
}
.ffcp-nav__item {
  display: inline-flex;
  align-items: center;
  padding: 14px 18px;
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-sm);
  font-weight: var(--ffcp-weight-bold);
  letter-spacing: var(--ffcp-tracking-wide);
  text-transform: uppercase;
  color: var(--ffcp-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--ffcp-duration-fast) var(--ffcp-ease-out),
              border-color var(--ffcp-duration-fast) var(--ffcp-ease-out);
}
.ffcp-nav__item:hover { color: var(--ffcp-color-navy); }
.ffcp-nav__item.is-active {
  color: var(--ffcp-color-navy);
  border-bottom-color: var(--ffcp-color-red);
}
.ffcp-nav__cta {
  margin-left: var(--ffcp-space-4);
}

/* Defensive wrap on the header bar so brand + nav can stack at any
   width between the hamburger threshold and full desktop instead of
   overflowing horizontally. */
.ffcp-header__bar { flex-wrap: wrap; }

/* Pre-header ribbon */
.ffcp-ribbon {
  background: var(--ffcp-color-navy);
  color: #fff;
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-bold);
  letter-spacing: var(--ffcp-tracking-wider);
  text-transform: uppercase;
  padding-block: var(--ffcp-space-2);
}
.ffcp-ribbon .ffcp-ribbon__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ffcp-space-4);
}

/* Breadcrumb */
.ffcp-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ffcp-space-2);
  font-family: var(--ffcp-font-mono);
  font-size: var(--ffcp-text-xs);
  letter-spacing: var(--ffcp-tracking-wider);
  text-transform: uppercase;
  color: var(--ffcp-text-muted);
}
.ffcp-breadcrumb a       { color: inherit; text-decoration: none; }
.ffcp-breadcrumb a:hover { color: var(--ffcp-color-red); }
.ffcp-breadcrumb__sep    { color: var(--ffcp-text-faint); }
.ffcp-breadcrumb__current { color: var(--ffcp-color-navy); font-weight: var(--ffcp-weight-bold); }

/* Mobile menu toggle (no JS — pair with <details>/<summary> or your own JS) */
.ffcp-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ffcp-color-navy);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.ffcp-menu-toggle span,
.ffcp-menu-toggle span::before,
.ffcp-menu-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--ffcp-color-navy);
}
.ffcp-menu-toggle span         { top: 50%; transform: translateY(-50%); }
.ffcp-menu-toggle span::before { top: -8px; }
.ffcp-menu-toggle span::after  { top: 8px; }


/* -------------------------------------------------------------------------
   11 · FOOTER
   ------------------------------------------------------------------------- */
.ffcp-footer {
  background: var(--ffcp-bg-inverse-deep);
  color: var(--ffcp-text-inverse);
  position: relative;
  padding-top: var(--ffcp-section-padding-y);
  padding-bottom: var(--ffcp-space-8);
}
.ffcp-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--ffcp-stroke-heavy);
  background: var(--ffcp-color-red);
}
.ffcp-footer a { color: #fff; text-decoration: none; }
.ffcp-footer a:hover { color: var(--ffcp-color-red); }
.ffcp-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--ffcp-space-12);
  padding-bottom: var(--ffcp-space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ffcp-footer__heading {
  font-family: var(--ffcp-font-display);
  font-size: var(--ffcp-text-xs);
  font-weight: var(--ffcp-weight-extrabold);
  letter-spacing: var(--ffcp-tracking-widest);
  text-transform: uppercase;
  color: var(--ffcp-color-red);
  margin-bottom: var(--ffcp-space-3);
}


/* -------------------------------------------------------------------------
   12 · UTILITIES
   ------------------------------------------------------------------------- */
.ffcp-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.ffcp-cluster { display: flex; flex-wrap: wrap; gap: var(--ffcp-space-3); align-items: center; }
.ffcp-stack   { display: flex; flex-direction: column; gap: var(--ffcp-space-4); }
.ffcp-stack--lg { gap: var(--ffcp-space-8); }
.ffcp-stack--sm { gap: var(--ffcp-space-2); }

.ffcp-flow > * + * { margin-top: var(--ffcp-space-4); }

.ffcp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ffcp-space-6); }
.ffcp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ffcp-space-6); }
.ffcp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ffcp-space-6); }

.ffcp-text-right  { text-align: right; }
.ffcp-text-center { text-align: center; }


/* -------------------------------------------------------------------------
   13 · RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --ffcp-display-2xl: 3.5rem;
    --ffcp-display-xl:  2.75rem;
    --ffcp-display-lg:  2.25rem;
  }
  .ffcp-footer__grid { grid-template-columns: 1fr 1fr; }
  .ffcp-grid-4       { grid-template-columns: repeat(2, 1fr); }
  .ffcp-grid-3       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root {
    --ffcp-display-2xl: 2.75rem;
    --ffcp-display-xl:  2.25rem;
    --ffcp-display-lg:  1.875rem;
    --ffcp-display-md:  1.5rem;
    --ffcp-section-padding-y: 2.5rem;
  }
  .ffcp-menu-toggle  { display: inline-block; }
  .ffcp-nav          { display: none; }
  .ffcp-nav.is-open  {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 2px solid var(--ffcp-color-navy);
    z-index: var(--ffcp-z-dropdown);
    padding: var(--ffcp-space-2);
  }
  .ffcp-nav.is-open .ffcp-nav__item {
    width: 100%;
    border-bottom: 1px solid var(--ffcp-border);
    padding: 16px 12px;
  }
  .ffcp-nav.is-open .ffcp-nav__item.is-active { border-left: 3px solid var(--ffcp-color-red); }
  .ffcp-footer__grid { grid-template-columns: 1fr; gap: var(--ffcp-space-8); }
  .ffcp-grid-2, .ffcp-grid-3 { grid-template-columns: 1fr; }
  .ffcp-table th, .ffcp-table td { padding: var(--ffcp-space-3); font-size: var(--ffcp-text-sm); }
  .ffcp-btn { padding: 12px 18px; }
  .ffcp-btn--lg { padding: 14px 22px; }
}

@media (max-width: 480px) {
  .ffcp-table-scroll { border: 0; }
  .ffcp-ribbon .ffcp-ribbon__inner > *:not(:first-child) { display: none; }
}


/* -------------------------------------------------------------------------
   14 · DARK SURFACE HELPERS
   Apply .on-dark to a container to remap text/border tokens for nested
   components — used inside .ffcp-section--dark or .ffcp-footer.
   ------------------------------------------------------------------------- */
.on-dark {
  --ffcp-text:           #fff;
  --ffcp-text-muted:     rgba(255,255,255,0.78);
  --ffcp-text-faint:     rgba(255,255,255,0.55);
  --ffcp-border:         rgba(255,255,255,0.18);
  --ffcp-border-faint:   rgba(255,255,255,0.10);
  --ffcp-bg:             transparent;
}


/* -------------------------------------------------------------------------
   15 · PRINT
   ------------------------------------------------------------------------- */
@media print {
  .ffcp-header, .ffcp-footer, .ffcp-ribbon, .ffcp-menu-toggle { display: none; }
  body { color: #000; background: #fff; }
  .ffcp-card { border-color: #000; box-shadow: none; }
}
/* =========================================================================
   HERO ACCUEIL — FFCP
   ========================================================================= */

.ffcp-hero-wrapper {
    width: 100%;
    background: transparent;
}

/* ---- Desktop 768px+ ---- */
.ffcp-hero {
    display: grid;
    grid-template-columns: 62% 38%;
    aspect-ratio: 16 / 5.5;
    position: relative;
    overflow: hidden;
    border-radius: var(--ffcp-radius-lg);
    container-type: inline-size;
}

/* Fond rouge sur toute la surface */
.ffcp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ffcp-color-red);
    z-index: 0;
}

/* Zone navy avec diagonale : 80% en haut, 60% en bas */
.ffcp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ffcp-color-navy);
    clip-path: polygon(0 0, 80% 0, 60% 100%, 0 100%);
    z-index: 1;
    pointer-events: none;
}

/* ---- Filigrane FFCP — à cheval sur les deux fonds, bas droite ---- */
.ffcp-hero__watermark {
    position: absolute;
    bottom: -0.05em;
    right: 0.5cqi;
    font-family: var(--ffcp-font-display);
    font-weight: 900;
    font-size: 17cqi;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.04em;
    z-index: 5;
}

/* ---- Colonne gauche ---- */
.ffcp-hero__gauche {
    padding: 1.8cqi 2.5cqi;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}

.ffcp-hero__contenu-haut {
    display: flex;
    flex-direction: column;
}

/* ---- Badge ---- */
.ffcp-hero__badge {
    display: inline-block;
    width: fit-content;
    background: var(--ffcp-color-red);
    color: var(--ffcp-color-white);
    font-family: var(--ffcp-font-ui);
    font-weight: 700;
    font-size: 0.7cqi;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.28cqi 0.8cqi;
    margin-bottom: 1cqi;
    border-radius: 2px;
    white-space: nowrap;
}

.ffcp-hero__badge::before {
    content: '● ';
    font-size: 0.6em;
    vertical-align: middle;
    margin-right: 2px;
}

/* ---- Titre ---- */
.ffcp-hero__titre {
    font-family: var(--ffcp-font-display);
    font-weight: 800;
    font-size: 5.3cqi;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--ffcp-color-white);
    margin: 0;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

.ffcp-hero__titre span[style] {
    color: var(--ffcp-color-red);
}

/* ---- Sous-titre + CTA gauche ---- */
.ffcp-hero__sous-titre-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.5cqi;
}

.ffcp-hero__sous-titre {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5cqi;
    line-height: 1.5;
    margin: 0;
    font-family: var(--ffcp-font-ui);
    font-weight: 500;
}

/* ---- CTA gauche — Adhérer ---- */
.ffcp-hero__cta-adherer {
    display: inline-block;
    white-space: nowrap;
    padding: 0.8cqi 1.6cqi;
    font-family: var(--ffcp-font-ui);
    font-weight: 700;
    font-size: 1.3cqi;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--ffcp-color-white);
    color: var(--ffcp-color-navy);
    border: 2px solid var(--ffcp-color-red);
    transition: background 0.2s, color 0.2s;
}

.ffcp-hero__cta-adherer:hover {
    background: var(--ffcp-color-red);
    color: var(--ffcp-color-white);
}

/* ---- Colonne droite ---- */
/* padding-top calculé pour aligner "49 DÉPT." avec la 1ère ligne du titre */
.ffcp-hero__droite {
    padding: 4.2cqi 2.5cqi 1.8cqi 5cqi;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}

/* Supprime l'ancien pseudo-element droite */
.ffcp-hero__droite::before {
    display: none;
}

/* ---- Compteurs ---- */
.ffcp-hero__compteurs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2cqi;
    width: 100%;
}

.ffcp-hero__compteur {
    display: flex;
    align-items: baseline;
    gap: 0.4cqi;
    text-align: right;
}

.ffcp-hero__chiffre {
    font-family: var(--ffcp-font-display);
    font-weight: 900;
    font-size: 3.8cqi;
    color: var(--ffcp-color-white);
    line-height: 1;
    letter-spacing: -0.02em;
}

.ffcp-hero__label {
    font-family: var(--ffcp-font-ui);
    font-weight: 700;
    font-size: 1.1cqi;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ffcp-hero__compteur--depuis {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.ffcp-hero__depuis-petit {
    font-family: var(--ffcp-font-ui);
    font-style: italic;
    font-size: 1.1cqi;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

/* ---- CTA droit — Voir les clubs ---- */
.ffcp-hero__cta-clubs {
    display: inline-block;
    white-space: nowrap;
    padding: 0.8cqi 2cqi;
    font-family: var(--ffcp-font-ui);
    font-weight: 700;
    font-size: 1.3cqi;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--ffcp-color-navy);
    color: var(--ffcp-color-white);
    border: 2px solid var(--ffcp-color-white);
    position: relative;
    z-index: 2;
    transition: background 0.2s, color 0.2s;
}

.ffcp-hero__cta-clubs:hover {
    background: var(--ffcp-color-white);
    color: var(--ffcp-color-navy);
}

/* ---- Traits décoratifs — désactivés ---- */
.ffcp-hero__trait {
    display: none;
}

/* =========================================================================
   BANDEAU MISSION — accueil
   ========================================================================= */

.ffcp-mission-bandeau__wrapper {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    box-shadow: 0 4px 24px rgba(11, 31, 69, 0.10);
    padding: 2.5rem 2rem;
}

.ffcp-mission-bandeau__titre {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ffcp-text-faint);
    margin: 0 0 1.5rem;
    text-align: center;
}

.ffcp-mission-bandeau {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.ffcp-mission-bandeau__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
}

.ffcp-mission-bandeau__icone {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ffcp-mission-bandeau__icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ffcp-mission-bandeau__label {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ffcp-color-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

@media (max-width: 600px) {
    .ffcp-mission-bandeau {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================================
   CARDS À LA UNE — accueil
   ========================================================================= */

.ffcp-card-une {
    border-radius: var(--ffcp-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s, transform 0.2s;
    background: var(--ffcp-color-white);
}

.ffcp-card-une:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.ffcp-card-une__lien {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ffcp-card-une__lien img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.ffcp-card-une:hover .ffcp-card-une__lien img {
    transform: scale(1.03);
}

.ffcp-card-une__placeholder {
    width: 100%;
    height: 200px;
    background: var(--ffcp-color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.ffcp-card-une__titre {
    padding: 0.9rem 1.1rem;
    background: var(--ffcp-color-white);
}

.ffcp-card-une__titre h3 {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ffcp-color-navy);
    margin: 0;
}

/* =========================================================================
   HERO PAGES INTERNES (Actus, À propos, etc.)
   ========================================================================= */

.ffcp-hero-actus {
    background: transparent;
    padding: 2rem 0;
    margin-bottom: 0;
}

.ffcp-hero-actus__inner {
    background: var(--ffcp-color-navy);
    border-radius: var(--ffcp-radius-lg);
    padding: 2.5rem 3rem;
}

.ffcp-hero-actus__badge {
    display: inline-block;
    background: var(--ffcp-color-red);
    color: var(--ffcp-color-white);
    font-family: var(--ffcp-font-ui);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 1rem;
}

.ffcp-hero-actus__badge::before {
    content: '● ';
    font-size: 0.6em;
    vertical-align: middle;
    margin-right: 2px;
}

.ffcp-hero-actus__titre {
    font-family: var(--ffcp-font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: var(--ffcp-color-white);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

.ffcp-hero-actus__sous-titre {
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
}

/* =========================================================================
   CARDS ACTUS
   ========================================================================= */

.ffcp-card--actu {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ffcp-card--actu:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.ffcp-card__link-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.ffcp-card__media {
    width: 100%;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}

.ffcp-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.ffcp-card--actu:hover .ffcp-card__media img {
    transform: scale(1.03);
}

.ffcp-card__media-placeholder {
    width: 100%;
    height: 100%;
    background: var(--ffcp-color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.ffcp-card__body {
    padding: 1.25rem 1.25rem 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ffcp-card__date {
    font-size: 0.8rem;
    color: var(--ffcp-text-muted);
    font-family: var(--ffcp-font-ui);
    margin: 0;
}

.ffcp-card__titre {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--ffcp-color-navy);
    margin: 0;
}

.ffcp-card__extrait {
    font-size: 0.875rem;
    color: var(--ffcp-text-muted);
    line-height: 1.55;
    margin: 0;
}

.ffcp-card__footer {
    padding: 0.75rem 1.25rem 1.25rem;
}

/* =========================================================================
   DETAIL ARTICLE
   ========================================================================= */

.ffcp-detail__retour {
    display: inline-block;
    margin-bottom: 2rem;
}

.ffcp-detail {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.ffcp-detail__media {
    width: 100%;
    max-height: 480px;
    overflow: hidden;
}

.ffcp-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ffcp-detail__header {
    padding: 2rem 2.5rem 0;
}

.ffcp-detail__date {
    font-size: 0.85rem;
    color: var(--ffcp-text-muted);
    margin: 0 0 0.75rem;
}

.ffcp-detail__titre {
    font-family: var(--ffcp-font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.15;
    color: var(--ffcp-color-navy);
    margin: 0;
    letter-spacing: -0.01em;
}

.ffcp-detail__contenu {
    padding: 2rem 2.5rem 2.5rem;
}

.ffcp-detail__contenu p { margin-bottom: 1.25rem; }
.ffcp-detail__contenu h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; color: var(--ffcp-color-navy); }
.ffcp-detail__contenu h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; color: var(--ffcp-color-navy); }
.ffcp-detail__contenu img { max-width: 100%; border-radius: var(--ffcp-radius); margin: 1rem 0; }
.ffcp-detail__contenu a { color: var(--ffcp-color-red); }

/* =========================================================================
   PAGE CLUBS
   ========================================================================= */

/* ---- Filtre ---- */
.ffcp-clubs__filtre {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.ffcp-clubs__filtre-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ffcp-clubs__filtre-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ffcp-clubs__filtre-row .ffcp-select {
    width: auto;
    min-width: 260px;
}

.ffcp-clubs__compteur {
    font-size: 0.9rem;
    color: var(--ffcp-text-muted);
    margin: 0;
    white-space: nowrap;
}

/* ---- Grille ---- */
.ffcp-clubs__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* ---- Card ---- */
.ffcp-clubs__card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--ffcp-color-white);
    border: 1px solid var(--ffcp-border-faint);
    border-radius: var(--ffcp-radius-lg);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.ffcp-clubs__card:hover {
    box-shadow: var(--ffcp-shadow-md);
    transform: translateY(-2px);
    border-color: var(--ffcp-color-navy);
}

.ffcp-clubs__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ffcp-clubs__dept {
    font-family: var(--ffcp-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ffcp-color-red);
}

.ffcp-clubs__badge-affilie {
    font-family: var(--ffcp-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ffcp-color-white);
    background: var(--ffcp-color-navy);
    padding: 2px 8px;
    border-radius: var(--ffcp-radius-pill);
    white-space: nowrap;
}

.ffcp-clubs__logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.ffcp-clubs__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--ffcp-radius-sm);
}

.ffcp-clubs__nom {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ffcp-color-navy);
    margin: 0;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.ffcp-clubs__ville {
    font-size: 0.875rem;
    color: var(--ffcp-text-muted);
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .ffcp-clubs__grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ffcp-clubs__grille {
        grid-template-columns: 1fr;
    }
    .ffcp-clubs__filtre {
        flex-direction: column;
        align-items: flex-start;
    }
    .ffcp-clubs__filtre-row .ffcp-select {
        min-width: 100%;
    }
}

/* =========================================================================
   PAGE DÉTAIL CLUB
   ========================================================================= */

/* ---- Header : logo + identité ---- */
.ffcp-club-detail__header {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2rem;
    align-items: start;
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    padding: 2rem;
    box-shadow: var(--ffcp-shadow-sm);
    margin-bottom: 1.5rem;
}

.ffcp-club-detail__logo {
    width: 160px;
    height: 160px;
    border-radius: var(--ffcp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ffcp-border-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ffcp-bg-muted);
    flex-shrink: 0;
}

.ffcp-club-detail__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ffcp-club-detail__logo--vide {
    font-size: 3rem;
}

.ffcp-club-detail__badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ffcp-club-detail__badge-affilie {
    display: inline-block;
    background: var(--ffcp-color-navy);
    color: var(--ffcp-color-white);
    font-family: var(--ffcp-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--ffcp-radius-pill);
}

.ffcp-club-detail__badge-non-affilie {
    display: inline-block;
    background: var(--ffcp-bg-muted);
    color: var(--ffcp-text-muted);
    font-family: var(--ffcp-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--ffcp-radius-pill);
    margin-bottom: 0.75rem;
    display: block;
    width: fit-content;
}

.ffcp-club-detail__dept {
    font-family: var(--ffcp-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ffcp-color-red);
    background: var(--ffcp-color-red-50);
    padding: 3px 10px;
    border-radius: var(--ffcp-radius-pill);
}

.ffcp-club-detail__nom {
    font-family: var(--ffcp-font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--ffcp-color-navy);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.ffcp-club-detail__ville {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ffcp-text-muted);
    margin: 0 0 0.25rem;
}

.ffcp-club-detail__adresse {
    font-size: 0.9rem;
    color: var(--ffcp-text-faint);
    margin: 0;
}

/* ---- Blocs infos ---- */
.ffcp-club-detail__infos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.ffcp-club-detail__bloc {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--ffcp-shadow-sm);
    border: 1px solid var(--ffcp-border-faint);
}

.ffcp-club-detail__bloc-titre {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ffcp-color-navy);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ffcp-border-faint);
}

.ffcp-club-detail__bloc-ligne {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}
.ffcp-club-detail__bloc-ligne:last-child { margin-bottom: 0; }

.ffcp-club-detail__bloc-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ffcp-text-faint);
}

.ffcp-club-detail__bloc-ligne a {
    color: var(--ffcp-color-navy);
    word-break: break-all;
}
.ffcp-club-detail__bloc-ligne a:hover { color: var(--ffcp-color-red); }

/* ---- Carte ---- */
.ffcp-club-detail__carte {
    margin-bottom: 1.5rem;
}

/* ---- Non affilié ---- */
.ffcp-club-detail__non-affilie {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    padding: 2rem;
    box-shadow: var(--ffcp-shadow-sm);
    margin-bottom: 1.5rem;
}

.ffcp-club-detail__cta-affiliation {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ffcp-border-faint);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ffcp-club-detail__cta-affiliation p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ffcp-text-muted);
    flex: 1;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .ffcp-club-detail__header {
        grid-template-columns: 1fr;
    }
    .ffcp-club-detail__logo {
        width: 100px;
        height: 100px;
    }
    .ffcp-club-detail__infos {
        grid-template-columns: 1fr;
    }
    .ffcp-club-detail__cta-affiliation {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================================
   PAGE RÈGLES
   ========================================================================= */

.ffcp-regles__grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.ffcp-regles__card {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    padding: 2rem;
    box-shadow: var(--ffcp-shadow-sm);
    border: 1px solid var(--ffcp-border-faint);
    transition: box-shadow 0.2s, transform 0.2s;
}

.ffcp-regles__card:hover {
    box-shadow: var(--ffcp-shadow-md);
    transform: translateY(-2px);
}

.ffcp-regles__card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ffcp-regles__icone {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.ffcp-regles__cat-titre {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ffcp-color-navy);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ffcp-regles__cat-desc {
    font-size: 0.875rem;
    color: var(--ffcp-text-muted);
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

.ffcp-regles__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ffcp-regles__item {
    border-top: 1px solid var(--ffcp-border-faint);
}

.ffcp-regles__item:last-child {
    border-bottom: 1px solid var(--ffcp-border-faint);
}

.ffcp-regles__lien {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.25rem;
    font-size: 0.9rem;
    color: var(--ffcp-color-navy);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s, padding-left 0.15s;
}

.ffcp-regles__lien::before {
    content: '♦';
    font-size: 0.6rem;
    color: var(--ffcp-color-red);
    flex-shrink: 0;
}

.ffcp-regles__lien:hover {
    color: var(--ffcp-color-red);
    padding-left: 0.5rem;
}

.ffcp-regles__source {
    text-align: center;
    font-size: 0.8rem;
    color: var(--ffcp-text-faint);
    margin-top: 2.5rem;
    font-style: italic;
}

@media (max-width: 768px) {
    .ffcp-regles__grille {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   PAGE À PROPOS — Missions + Équipe
   ========================================================================= */

.ffcp-apropos__section-titre {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---- Missions ---- */
.ffcp-apropos__missions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.ffcp-apropos__mission-card {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--ffcp-shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
}

.ffcp-apropos__mission-card:hover {
    box-shadow: var(--ffcp-shadow-md);
    transform: translateY(-3px);
}

.ffcp-apropos__mission-icone {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ffcp-apropos__mission-icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ffcp-apropos__mission-titre {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ffcp-color-navy);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ffcp-apropos__mission-texte {
    font-size: 0.875rem;
    color: var(--ffcp-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ---- Équipe ---- */
.ffcp-apropos__equipe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.ffcp-apropos__membre-card {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    overflow: hidden;
    box-shadow: var(--ffcp-shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}

.ffcp-apropos__membre-card:hover {
    box-shadow: var(--ffcp-shadow-md);
    transform: translateY(-3px);
}

.ffcp-apropos__membre-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ffcp-bg-muted);
}

.ffcp-apropos__membre-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.3s;
}

.ffcp-apropos__membre-card:hover .ffcp-apropos__membre-photo img {
    transform: scale(1.04);
}

.ffcp-apropos__membre-photo--vide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--ffcp-color-bone-100);
}

.ffcp-apropos__membre-info {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ffcp-apropos__membre-nom {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ffcp-color-navy);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ffcp-apropos__membre-poste {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--ffcp-color-red);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
}

.ffcp-apropos__membre-texte {
    font-size: 0.85rem;
    color: var(--ffcp-text-muted);
    line-height: 1.6;
    margin: 0.5rem 0 0;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .ffcp-apropos__missions,
    .ffcp-apropos__equipe {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ffcp-apropos__missions,
    .ffcp-apropos__equipe {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   PAGE ADHÉRER — Formulaire
   ========================================================================= */

.ffcp-adherer__info {
    background: var(--ffcp-color-info-bg);
    border-left: 4px solid var(--ffcp-color-info);
    padding: 1rem 1.25rem;
    border-radius: var(--ffcp-radius-md);
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: var(--ffcp-color-navy);
}

.ffcp-adherer__erreurs {
    background: var(--ffcp-color-danger-bg);
    border-left: 4px solid var(--ffcp-color-danger);
    padding: 1rem 1.25rem;
    border-radius: var(--ffcp-radius-md);
    margin-bottom: 2rem;
}
.ffcp-adherer__erreurs ul {
    margin: 0;
    padding-left: 1.25rem;
}
.ffcp-adherer__erreurs li {
    color: var(--ffcp-color-danger);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.ffcp-adherer__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---- Sections ---- */
.ffcp-adherer__section {
    border-bottom: 1px solid var(--ffcp-border-faint);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ffcp-adherer__section:last-of-type {
    border-bottom: none;
}

.ffcp-adherer__section-titre {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ffcp-color-navy);
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ffcp-color-red);
    display: inline-block;
}

/* ---- Ligne 2 colonnes ---- */
.ffcp-adherer__row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ---- Jours d'ouverture ---- */
.ffcp-adherer__jours {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ffcp-adherer__jour {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--ffcp-border);
    border-radius: var(--ffcp-radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ffcp-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
}
.ffcp-adherer__jour input[type="checkbox"] {
    display: none;
}
.ffcp-adherer__jour:hover {
    border-color: var(--ffcp-color-navy);
    color: var(--ffcp-color-navy);
}
.ffcp-adherer__jour.is-checked {
    border-color: var(--ffcp-color-navy);
    background: var(--ffcp-color-navy);
    color: var(--ffcp-color-white);
}

/* ---- File input ---- */
.ffcp-adherer__file-input {
    display: block;
    font-size: 0.9rem;
    color: var(--ffcp-text);
    padding: 0.5rem 0;
}

/* ---- Submit ---- */
.ffcp-adherer__submit {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ffcp-adherer__mention {
    font-size: 0.8rem;
    color: var(--ffcp-text-faint);
    text-align: center;
    margin: 0;
    line-height: 1.6;
}

/* ---- Succès ---- */
.ffcp-adherer__succes {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--ffcp-color-success-bg);
    border-radius: var(--ffcp-radius-lg);
    border: 2px solid var(--ffcp-color-success);
}
.ffcp-adherer__succes-icone {
    width: 64px;
    height: 64px;
    background: var(--ffcp-color-success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}
.ffcp-adherer__succes h2 {
    font-family: var(--ffcp-font-display);
    font-weight: 900;
    font-size: 1.75rem;
    color: var(--ffcp-color-success);
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.ffcp-adherer__succes p {
    color: var(--ffcp-text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ---- Paiement ---- */
.ffcp-adherer__paiement {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    padding: 2rem;
    box-shadow: var(--ffcp-shadow-sm);
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .ffcp-adherer__row-2 {
        grid-template-columns: 1fr;
    }
    .ffcp-adherer__jours {
        gap: 0.4rem;
    }
    .ffcp-adherer__jour {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }
}

/* =========================================================================
   PAGE MENTIONS LÉGALES
   ========================================================================= */

.ffcp-mentions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ffcp-mentions__bloc {
    background: var(--ffcp-color-white);
    border-radius: var(--ffcp-radius-lg);
    padding: 2rem;
    box-shadow: var(--ffcp-shadow-sm);
    border: 1px solid var(--ffcp-border-faint);
}

.ffcp-mentions__titre {
    font-family: var(--ffcp-font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ffcp-color-navy);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ffcp-color-red);
    display: inline-block;
}

.ffcp-mentions__bloc p {
    font-size: 0.9rem;
    color: var(--ffcp-text);
    line-height: 1.7;
    margin: 0 0 0.5rem;
}

.ffcp-mentions__bloc p:last-child {
    margin-bottom: 0;
}

.ffcp-mentions__bloc ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.ffcp-mentions__bloc ul li {
    font-size: 0.9rem;
    color: var(--ffcp-text);
    line-height: 1.7;
    margin-bottom: 0.25rem;
}

.ffcp-mentions__bloc a {
    color: var(--ffcp-color-red);
}

/* =========================================================================
   RESPONSIVE HERO — 767px et moins
   ========================================================================= */

@media (max-width: 767px) {

    .ffcp-hero {
        grid-template-columns: 1fr;
        aspect-ratio: unset;
        height: auto;
        border-radius: 8px;
    }

    /* Annule les pseudo-elements desktop */
    .ffcp-hero::before,
    .ffcp-hero::after {
        display: none;
    }

    /* HAUT — navy */
    .ffcp-hero__gauche {
        background: #0B1F45;
        padding: 4vw 4.5vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 3vw;
    }

    .ffcp-hero__badge {
        font-size: 1.5vw;
        padding: 0.8vw 1.8vw;
        margin-bottom: 0.5;
    }

    .ffcp-hero__titre {
        font-size: 7.6vw;
        line-height: 1.08;
        margin: 0;
    }

    .ffcp-hero__sous-titre-cta {
        display: flex;
        flex-direction: column;
        gap: 3vw;
    }

    .ffcp-hero__sous-titre {
        font-size: 3.2vw;
        line-height: 1.55;
    }

    .ffcp-hero__cta-adherer {
        display: block;
        width: 100%;
        text-align: center;
        padding: 3.2vw 4vw;
        font-size: 2.8vw;
        border-width: 0.5vw;
        white-space: normal;
    }

    /* BAS — rouge */
    .ffcp-hero__droite {
        background: #F02E3C;
        padding: 4vw 4.5vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 3vw;
    }

    .ffcp-hero__droite::before {
        display: none;
    }

    .ffcp-hero__compteurs {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: flex-end;
        gap: 0;
        width: 100%;
    }

    .ffcp-hero__compteur {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5vw;
    }

    .ffcp-hero__compteur--depuis {
        display: none;
    }

    .ffcp-hero__chiffre {
        font-size: 8vw;
        line-height: 1;
    }

    .ffcp-hero__label {
        font-size: 2.2vw;
        letter-spacing: 0.1em;
    }

    .ffcp-hero__cta-clubs {
        display: block;
        width: 100%;
        text-align: center;
        padding: 3.2vw 4vw;
        font-size: 2.8vw;
        border-width: 0.5vw;
        white-space: normal;
    }

    .ffcp-hero__watermark {
        display: none;
    }

    .ffcp-hero__trait {
        display: none;
    }

    .ffcp-header__brand-name {
        font-size: 0.7rem;
        letter-spacing: 0;
        line-height: 1.3;
}
}