@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Caveat:wght@500;600;700&display=swap');
/* Menthue webfonts — loaded from Google Fonts CDN.
   SUBSTITUTION NOTE: the original Eagle Elite theme uses licensed condensed
   display + geometric sans faces we don't have the binaries for. These are the
   closest free matches. Swap in the real families when available.
   - Display (ultra-condensed heavy) : Anton      -> matches the mega headlines
   - Heading / eyebrow / nav / button : Oswald     -> letterspaced condensed caps
   - Body / UI                        : Poppins    -> round geometric humanist sans
   - Handwritten (polaroid captions)  : Caveat     -> casual marker script            */

/* ============================================================
   Menthue — Color tokens
   Rose-forward rebrand of the Eagle Elite sports club palette.
   Bright rose replaces the old lime; bordeaux replaces pine green.
   ============================================================ */
:root {
  /* --- Brand: Rose --------------------------------------- */
  --rose-vif: #FF6FA5;      /* primary accent — buttons, badges, icons, arrows */
  --rose-corail: #FF8FA3;   /* warm coral accent — alternating highlights */
  --rose-pale: #FBC7DC;     /* large soft fills — hero panels, value bands   */
  --rose-pale-2: #FDE1EC;   /* even softer wash — subtle section tints        */
  --rose-ink: #C34B7C;      /* rose used as text on pale rose (accessible)    */

  /* --- Brand: Bordeaux ----------------------------------- */
  --bordeaux: #4A1D2E;      /* primary dark — dark sections, dark buttons     */
  --bordeaux-2: #5C1F35;    /* lifted bordeaux — cards on dark, hover         */
  --bordeaux-deep: #38131F; /* deepest — footers, overlays                    */

  /* --- Neutrals ------------------------------------------ */
  --white: #FFFFFF;
  --anthracite: #1A1A1A;    /* strong titles on light                         */
  --ink: #111111;
  --grey-900: #222222;
  --grey-700: #474747;      /* body copy                                      */
  --grey-500: #7C7C7C;      /* muted / captions                               */
  --grey-300: #C9C6C1;
  --grey-200: #E4E2DE;      /* subtle borders / dividers                      */
  --paper: #F4F4F2;         /* page background                                */
  --paper-2: #EEECE8;       /* alt light surface                              */

  /* --- Semantic aliases ---------------------------------- */
  --color-primary: var(--rose-vif);
  --color-primary-soft: var(--rose-pale);
  --color-accent: var(--rose-corail);
  --color-dark: var(--bordeaux);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-dark: var(--bordeaux);
  --surface-dark-2: var(--bordeaux-2);
  --surface-accent: var(--rose-vif);
  --surface-accent-soft: var(--rose-pale);

  --text-strong: var(--anthracite);
  --text-body: var(--grey-700);
  --text-muted: var(--grey-500);
  --text-on-dark: var(--white);
  --text-on-dark-soft: rgba(255, 255, 255, 0.72);
  --text-on-accent: var(--bordeaux);
  --text-accent: var(--rose-ink);

  --border-strong: var(--anthracite);
  --border-subtle: var(--grey-200);
  --border-on-dark: rgba(255, 255, 255, 0.28);

  --focus-ring: var(--rose-vif);
  --overlay-dark: rgba(56, 19, 31, 0.62);
}

/* ============================================================
   Menthue — Typography tokens
   Three voices: an ultra-condensed display shout (Anton), a
   letterspaced condensed caps workhorse for eyebrows/nav/buttons
   (Oswald), a round humanist body (Poppins), plus a handwritten
   accent (Caveat) for photo captions.
   ============================================================ */
:root {
  --font-display: 'Anton', 'Oswald', sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-script: 'Caveat', cursive;

  /* Weights */
  --fw-light: 300;      /* @kind font */
  --fw-regular: 400;    /* @kind font */
  --fw-medium: 500;     /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */

  /* Display scale (Anton — line-height tight, letters near-touching) */
  --text-display-1: 5.5rem;   /* 88px  — hero mega        */
  --text-display-2: 4rem;     /* 64px  — section shout     */
  --text-display-3: 3rem;     /* 48px  — sub display       */

  /* Heading scale (Oswald caps) */
  --text-h1: 2.5rem;          /* 40px */
  --text-h2: 2rem;            /* 32px */
  --text-h3: 1.5rem;          /* 24px */
  --text-h4: 1.25rem;         /* 20px */

  /* Eyebrow / label / nav / button */
  --text-eyebrow: 0.8125rem;  /* 13px */
  --text-label: 0.9375rem;    /* 15px */

  /* Body */
  --text-body-lg: 1.125rem;   /* 18px */
  --text-body-md: 1rem;       /* 16px */
  --text-body-sm: 0.875rem;   /* 14px */

  /* Line-heights */
  --lh-display: 0.94;   /* @kind font */
  --lh-heading: 1.02;   /* @kind font */
  --lh-body: 1.6;       /* @kind font */
  --lh-tight: 1.15;     /* @kind font */

  /* Letter-spacing */
  --tracking-display: -0.01em;   /* @kind font */
  --tracking-tight: -0.02em;     /* @kind font */
  --tracking-normal: 0;          /* @kind font */
  --tracking-caps: 0.14em;       /* @kind font */
  --tracking-caps-wide: 0.22em;  /* @kind font */
}

/* ============================================================
   Menthue — Spacing & layout tokens (4px base)
   ============================================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section rhythm */
  --section-y: clamp(64px, 9vw, 128px);   /* @kind spacing */
  --container-max: 1240px;                /* @kind spacing */
  --container-pad: clamp(20px, 5vw, 64px);/* @kind spacing */
  --gutter: 24px;                         /* @kind spacing */
}

/* ============================================================
   Menthue — Radius, shadow, border, motion tokens
   Buttons are SHARP (0 radius); cards are generously rounded.
   ============================================================ */
:root {
  /* Radius */
  --radius-none: 0px;      /* buttons, inputs edges in the brand */
  --radius-xs: 4px;        /* form fields */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;       /* program / content cards */
  --radius-xl: 32px;       /* large hero panels */
  --radius-2xl: 40px;
  --radius-pill: 999px;    /* tags, arrow buttons, badges */

  /* Shadow — soft, warm, low-contrast */
  --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-sm: 0 4px 14px rgba(26, 26, 26, 0.07);
  --shadow-md: 0 12px 30px rgba(26, 26, 26, 0.10);
  --shadow-lg: 0 24px 60px rgba(26, 26, 26, 0.14);
  --shadow-polaroid: 0 18px 40px rgba(26, 26, 26, 0.18);
  --shadow-accent: 0 14px 34px rgba(255, 111, 165, 0.34);

  /* Borders */
  --border-width: 1.5px;         /* @kind spacing */
  --border-width-strong: 2px;    /* @kind spacing */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur: 220ms;        /* @kind other */
  --dur-slow: 420ms;   /* @kind other */
}


  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased}
  a{color:var(--rose-ink);text-decoration:none}
  a:hover{color:var(--rose-vif)}
  @keyframes mn-spin{to{transform:rotate(360deg)}}
  @keyframes mn-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .mm-link{color:var(--white);opacity:.78;cursor:pointer;transition:opacity .2s}
  .mm-link:hover{opacity:1}

/* ============================================================
   Menthue - site rules layered on top of the design tokens and
   the canvas' own global styles.
   ============================================================ */

/* --- build-time conditionals -------------------------------------------
   The canvas resolved <sc-if> at runtime in React. The static build keeps
   the two responsive branches in the markup and lets CSS pick one, and
   wraps toggleable branches so their children keep their inline styles. */
[data-only], [data-if] { display: contents; }
[data-only="desktop"] { display: none; }
@media (min-width: 1080px) {
  [data-only="desktop"] { display: contents; }
  [data-only="mobile"] { display: none; }
}
[data-if][hidden] { display: none; }

/* --- navigation --------------------------------------------------------- */
[data-nav] { cursor: pointer; }
a { text-decoration: none; }
header a, header a:hover { color: inherit; }

/* Elements that were <button> in the canvas are <a> here so they are real,
   crawlable links; strip the anchor defaults they did not expect. */
a[style*="background:none"],
a[style*="background: none"] { text-decoration: none; }

/* --- focus -------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* --- media -------------------------------------------------------------- */
img { max-width: 100%; }

/* Le voile du bandeau « Horaires » est un dégradé horizontal : il ne couvre que
   la moitié gauche, ce qui suffit tant que le texte y tient. Sous 1080 px le
   contenu occupe toute la largeur et passait sur la partie claire de la photo,
   donc on repasse sur un voile uniforme. */
@media (max-width: 1079px) {
  section > div[style*="position:absolute"] > div[style*="rgba(43,26,20"] {
    background: rgba(43, 26, 20, .7) !important;
  }
}

/* --- forms -------------------------------------------------------------- */
form :where(input, select, textarea):user-invalid {
  border-color: var(--rose-vif) !important;
}
[data-doc-list] { display: flex; flex-direction: column; gap: 8px; }
[data-doc-row] {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--white);
  border: 1px solid var(--grey-200); border-radius: var(--radius-sm);
  font-size: var(--text-body-sm); color: var(--text-body);
}
[data-doc-row] button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rose-ink);
}

/* --- print -------------------------------------------------------------- */
@media print {
  header, footer, [data-only], [data-nav] { display: none !important; }
  body { background: #fff; }
}