@import "jost-h0iSc7U.css";

/**
 * FFVélo Design System
 * Basé sur le Guide d'Expression de la Marque FFVélo (avril 2018)
 * CSS moderne : @layer, @property, light-dark(), oklch() relative colors, nesting
 *
 * Palette officielle (page 8 du guide) :
 *   Bleu foncé  — Pantone 286C  — rgb(23, 41, 131)   → couleur dominante
 *   Bleu clair  — Pantone 284C  — rgb(38, 153, 209)  → gradient logo
 *   Rouge vif   — Pantone 184C  — rgb(226, 0, 26)    → accent / CTA
 *   Rouge foncé — Pantone 186C  — rgb(180, 8, 24)    → hover rouge
 *   Blanc       —               — #ffffff
 */

/* ============================================================
   LAYERS — cascade explicite
   ============================================================ */

  @layer base, theme, components, utilities;

  @layer base {
    *, *::before, *::after { box-sizing: border-box; }

    body { margin: 0; font-family: var(--sans-font, system-ui, sans-serif); line-height: 1.5; -webkit-font-smoothing: antialiased; }

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

    input, button, textarea, select { font: inherit; }

    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

    h1 { font-size: 2.25rem; margin: 0.67em 0; }
    h2 { font-size: 1.8rem; margin: 0.75em 0; }
    h3 { font-size: 1.4rem; margin: 0.83em 0; }
    h4 { font-size: 1.15rem; margin: 1em 0; }
    h5, h6 { font-size: 0.95rem; margin: 1.2em 0; }

    a { text-decoration-skip-ink: auto; }

    textarea { resize: vertical; }

    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 0.5rem; border: 1px solid var(--border, #ccc); text-align: start; }
    th { background: var(--accent-bg, #f5f5f5); font-weight: 600; }

    details { padding: 0.5rem 1rem; }
    summary { cursor: pointer; font-weight: 600; }

    code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
    pre code { padding: 0; background: none; }

    mark { background: var(--marked, #fce38a); padding: 0.1em 0.2em; border-radius: 2px; }

    hr { border: none; border-top: 1px solid var(--border, #ccc); }

    :disabled { opacity: 0.6; cursor: not-allowed; }

    @media print {
      header, nav, footer, .theme-toggle { display: none; }
      body { font-size: 12pt; color: #000; background: #fff; }
      a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
    }
  }
   
   /* ============================================================
      @property — couleurs typées et animables
      ============================================================ */
   
   @property --ffvelo-bleu {
     syntax: "<color>";
     inherits: true;
     initial-value: #172983;
   }
   
   @property --ffvelo-rouge {
     syntax: "<color>";
     inherits: true;
     initial-value: #E2001A;
   }
   
   /* ============================================================
      LAYER THEME
      ============================================================ */
   
   @layer theme {
   
     :root {
       color-scheme: light dark;
   
      /* --- Palette officielle — logo (guide page 8) --- */
      --ffvelo-blanc:       oklch(100% 0 0);
      --ffvelo-bleu:        oklch(0.30 0.16 268);   /* Pantone 286C — dominant */
      --ffvelo-bleu-clair:  oklch(0.64 0.13 238);   /* Pantone 284C */
      --ffvelo-rouge:       oklch(0.53 0.22 27);    /* Pantone 184C — accent  */
      --ffvelo-rouge-fonce: oklch(0.45 0.19 25);    /* Pantone 186C — hover   */
      --ffvelo-noir:        oklch(0.18 0.01 300);   /* Pantone Black C        */

      /* --- Univers coloriel — tons nature (guide page 10) --- */
      --ffvelo-vert:        oklch(0.73 0.18 128);   /* Pantone 369C  — nature      */
      --ffvelo-vert-ocean:  oklch(0.60 0.10 180);   /* Pantone 7473C — océan       */
      --ffvelo-vert-doux:   oklch(0.80 0.06 185);   /* Pantone 7464C — eau claire  */
      --ffvelo-orange:      oklch(0.72 0.17 60);    /* Pantone 144C  — chaleur     */
      --ffvelo-jaune:       oklch(0.74 0.14 85);    /* Pantone 110C  — soleil      */
      --ffvelo-ocre:        oklch(0.68 0.07 75);    /* Pantone 465C  — terre       */
      --ffvelo-brun:        oklch(0.53 0.10 55);    /* Pantone 470C  — sous-bois   */
      --ffvelo-bleu-doux:   oklch(0.87 0.03 260);   /* Pantone 657C  — ciel        */
      --ffvelo-bleu-ocean:  oklch(0.40 0.08 230);   /* Pantone 7470C — profondeur  */
      --ffvelo-bleu-perso:  oklch(0.67 0.05 250);   /* Pantone 652C  — brume       */
      --ffvelo-gris-chaud:  oklch(0.66 0.01 60);    /* Pantone 402C  — pierre      */
      --ffvelo-gris-fonce:  oklch(0.50 0.01 60);    /* Pantone 405C  — asphalte    */

       /* --- Variantes dérivées (relative color syntax oklch) --- */
       --ffvelo-bleu-sombre:  oklch(from var(--ffvelo-bleu) calc(l - 0.08) c h);
       --ffvelo-bleu-pale:    light-dark(
         oklch(from var(--ffvelo-bleu) 0.96 calc(c * 0.12) h),
         oklch(from var(--ffvelo-bleu) 0.27 calc(c * 0.35) h)
       );
       --ffvelo-bleu-subtle:  light-dark(
         oklch(from var(--ffvelo-bleu) 0.98 calc(c * 0.06) h),
         oklch(from var(--ffvelo-bleu) 0.20 calc(c * 0.18) h)
       );
       --ffvelo-rouge-pale:   light-dark(
         oklch(from var(--ffvelo-rouge) 0.96 calc(c * 0.12) h),
         oklch(from var(--ffvelo-rouge) 0.22 calc(c * 0.25) h)
       );
       --ffvelo-rouge-subtle: light-dark(
         oklch(from var(--ffvelo-rouge) 0.98 calc(c * 0.06) h),
         oklch(from var(--ffvelo-rouge) 0.18 calc(c * 0.12) h)
       );
   
       /* --- Typographie — Futura est la police officielle.
             Pour le web : Jost (auto-hébergé, voir assets/styles/jost.css) est le meilleur
             équivalent géométrique libre. Fallback system-ui. --- */
       --sans-font: "Jost", "Futura", "Century Gothic", system-ui, Arial, sans-serif;

      /* --- Design tokens — spacing, radius, shadows --- */
      --space-xs: 0.25rem;
      --space-sm: 0.5rem;
      --space-md: 1rem;
      --space-lg: 2rem;
      --space-xl: 4rem;

      --radius-sm: 2px;
      --radius-md: 4px;
      --radius-lg: 8px;

      /* Backward-compatible aliases */
      --standard-border-radius: var(--radius-md);
      --border-width: 1px;

      --shadow-sm: 0 1px 3px oklch(0 0 0 / 25%);
      --shadow-md: 0 4px 12px oklch(0 0 0 / 40%);
      --shadow-lg: 0 15px 35px oklch(0 0 0 / 35%);

      /* --- Layout widths (align main, footer, etc. across projects) --- */
      --layout-max-narrow: 70rem;
      --footer-max-width: 62.5rem; /* 1000px @ 16px root */
   
      /* --- Semantic colours — adapt to light/dark --- */
      --ffvelo-bleu-text:   light-dark(var(--ffvelo-bleu), var(--ffvelo-bleu-doux));
      --ffvelo-bleu-hover:  light-dark(var(--ffvelo-bleu-clair), var(--ffvelo-bleu-perso));
      --ffvelo-surface:     light-dark(oklch(100% 0 0 / 98%), oklch(0.20 0.05 268 / 98%));
      --ffvelo-footer-bg:   light-dark(var(--ffvelo-bleu-sombre), oklch(0.12 0.05 268));

      /* --- Core theme tokens — light-dark() --- */
      --bg:           light-dark(oklch(100% 0 0), oklch(0.15 0.03 268));
      --accent-bg:    light-dark(var(--ffvelo-bleu-subtle), oklch(0.22 0.05 268));
      --text:         light-dark(var(--ffvelo-bleu), oklch(0.95 0.01 268));
      --text-light:   light-dark(oklch(0.50 0.03 268), oklch(0.72 0.04 268));
      --border:       light-dark(oklch(0.85 0.03 268), oklch(0.35 0.06 268));
      --accent:       light-dark(var(--ffvelo-rouge), oklch(0.60 0.24 25));
      --accent-hover: light-dark(var(--ffvelo-rouge-fonce), oklch(0.48 0.20 25));
      --accent-text:  var(--ffvelo-blanc);
      --code:         light-dark(var(--ffvelo-rouge), oklch(0.75 0.12 15));
      --preformatted: light-dark(oklch(0.25 0 0), oklch(0.82 0 0));
      --marked:       light-dark(oklch(0.95 0.10 90), oklch(0.88 0.12 90));
      --disabled:     light-dark(oklch(0.93 0.02 260), oklch(0.22 0.03 260));
     }
   
    /* --- Corps : fond blanc, texte bleu foncé, sticky footer --- */
    html, body {
      background-color: var(--bg);
      color: var(--text);
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      overflow-x: hidden;
    }

    main {
      flex: 1;
      width: min(100% - 2 * var(--space-md), var(--layout-max-narrow));
      margin-inline: auto;
      container-type: inline-size;
      container-name: main-content;
    }

     /* --- Formulaires : base + thème unifié --- */
     input, select, textarea {
       padding: 0.5em;
       border: 1px solid var(--border);
       border-radius: var(--radius-md);
       background: var(--bg);
       color: var(--text);
       transition: border-color 0.15s ease, box-shadow 0.15s ease;

       &:focus {
         border-color: var(--ffvelo-bleu-clair);
         box-shadow: 0 0 0 2px oklch(from var(--ffvelo-bleu-clair) l c h / 20%);
         outline: none;
       }
     }

     fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); }

     /* --- Titres en bleu fédéral --- */
     h1, h2, h3, h4, h5, h6 {
       color: var(--ffvelo-bleu-text);
       text-wrap: balance;
     }

     p {
       text-wrap: pretty;
     }
   
     /* --- Liens --- */
     a {
       color: var(--ffvelo-bleu-text);
       &:hover { color: var(--accent); }
     }
   
     /* --- Boutons — base + thème rouge vif unifié --- */
     button,
     [role="button"],
     input[type="submit"],
     input[type="button"] {
       cursor: pointer;
       padding: 0.5rem 0.9rem;
       border: 1px solid transparent;
       border-radius: var(--radius-md);
       color: var(--accent-text);
       background: var(--ffvelo-rouge);
       border-color: var(--ffvelo-rouge);
       font-weight: 600;
       letter-spacing: 0.03em;
       text-transform: uppercase;
       font-size: 0.85rem;
       transition: background 0.15s ease, border-color 0.15s ease,
                   box-shadow 0.15s ease;

       &:hover, &:focus-visible {
         background: var(--ffvelo-rouge-fonce);
         border-color: var(--ffvelo-rouge-fonce);
         box-shadow: 0 4px 12px oklch(from var(--ffvelo-rouge) l c h / 30%);
       }
     }

     /* --- Code & pre — unified styles --- */
     code { font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 3px; background: var(--accent-bg); color: var(--code); }
     pre { padding: var(--space-md); border-radius: var(--radius-md); overflow-x: auto; background: var(--accent-bg); }

     blockquote { border-left: 4px solid var(--accent); margin-inline: 0; padding: var(--space-sm) var(--space-md); }

     /* --- Filet rouge sur les <hr> (papeterie du guide) --- */
     hr {
       border-color: var(--ffvelo-rouge);
       opacity: 0.4;
     }

    /* --- View Transitions — SPA-like navigation sans JS --- */
    main { view-transition-name: main-content; }

    @media (prefers-reduced-motion: no-preference) {
      @view-transition { navigation: auto; }

      ::view-transition-old(main-content) {
        animation: vt-fade-out 0.15s ease-out;
      }

      ::view-transition-new(main-content) {
        animation: vt-fade-in 0.2s ease-in;
      }

      @keyframes vt-fade-out {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(-0.5rem); }
      }

      @keyframes vt-fade-in {
        from { opacity: 0; transform: translateY(0.5rem); }
        to   { opacity: 1; transform: translateY(0); }
      }
    }

    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      flex-shrink: 0;
    }
  }
   
   /* ============================================================
      LAYER COMPONENTS
      ============================================================ */
   
   @layer components {
   
     /* ----------------------------------------------------------
        BOUTON BASE — shared properties for all .btn-* variants
        ---------------------------------------------------------- */

    .btn,
    .btn-secondary,
    .btn-bleu {
      display: inline-block;
      padding: 0.5rem 0.9rem;
      border-radius: var(--radius-md, 4px);
      text-decoration: none;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      font-size: 0.85rem;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    /* ----------------------------------------------------------
       BOUTON SECONDAIRE (outline bleu)
       ---------------------------------------------------------- */

    .btn-secondary {
      background: transparent;
      border: 2px solid var(--ffvelo-bleu-text);
      color: var(--ffvelo-bleu-text);

      &:hover {
        background: var(--ffvelo-bleu-text);
        color: light-dark(var(--ffvelo-blanc), var(--bg));
      }
    }

    /* ----------------------------------------------------------
       BOUTON BLEU (CTA secondaire)
       ---------------------------------------------------------- */

    .btn-bleu {
      background: light-dark(var(--ffvelo-bleu), var(--ffvelo-bleu-perso));
      border-color: light-dark(var(--ffvelo-bleu), var(--ffvelo-bleu-perso));
      color: var(--ffvelo-blanc);

      &:hover {
        background: var(--ffvelo-bleu-hover);
        color: light-dark(var(--ffvelo-blanc), var(--bg));
      }
    }

    /* ----------------------------------------------------------
       BOUTON ROUGE (CTA principal) — même base que .btn + couleurs rouge
       ---------------------------------------------------------- */

    .btn-rouge {
      display: inline-block;
      padding: 0.5rem 0.9rem;
      border-radius: var(--radius-md, 4px);
      text-decoration: none;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      font-size: 0.85rem;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      background: var(--ffvelo-rouge);
      border: 1px solid var(--ffvelo-rouge);
      color: var(--ffvelo-blanc);

      &:hover {
        background: var(--ffvelo-rouge-fonce);
        border-color: var(--ffvelo-rouge-fonce);
      }
    }
   
     /* ----------------------------------------------------------
        HERO — bloc d'accroche pleine largeur
        Usage simple :  <section class="hero">
        Avec photo :    <section class="hero hero--photo"
                          style="--hero-img: u-r-l(photo.jpg)">
        ---------------------------------------------------------- */
   
    .hero {
      background: light-dark(var(--ffvelo-bleu), oklch(0.19 0.05 260));
      color: var(--ffvelo-blanc);
      padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 6vw, 4rem);
      padding-inline: var(--space-md);
      text-align: center;
      position: relative;
      overflow: hidden;
      width: 100vw;
      margin-inline: calc(50% - 50vw);
  
      /* Cercle décoratif — signe graphique du guide (page 15) */
      &::before {
        content: "";
        position: absolute;
        inset-inline-end: -8rem;
        inset-block-start: -8rem;
        width: 28rem;
        height: 28rem;
        border-radius: 50%;
        border: 3rem solid oklch(from var(--ffvelo-bleu-clair) l c h / 15%);
        pointer-events: none;
      }
  
      & h1, & h2 {
        color: var(--ffvelo-blanc);
         text-transform: uppercase;
         letter-spacing: 0.04em;
         --trait-w: 3.5rem;

         &::after {
           content: "";
           display: block;
           width: var(--trait-w, 3rem);
           height: var(--trait-h, 3px);
           background: var(--ffvelo-rouge);
           margin: 0.75rem auto 0;
         }
       }
   
       & p { color: oklch(100% 0 0 / 85%); font-size: 1.1rem; }
   
       /* Variante avec photo + overlay gradient */
       &.hero--photo {
         background-image:
           linear-gradient(to top, oklch(0 0 0 / 55%) 0%, oklch(0 0 0 / 25%) 60%, oklch(0 0 0 / 10%) 100%),
           var(--hero-img);
         background-size: cover;
         background-position: center;
       }
     }
   
     /* ----------------------------------------------------------
        SECTION TITLE — surtitre rouge + grand titre bleu
        Usage : <div class="section-title">
                  <span>Nos activités</span>
                  <h2>Choisissez votre pratique</h2>
                </div>
        ---------------------------------------------------------- */
   
     .section-title {
       text-align: center;
       margin-block-end: 2.5rem;
   
       & span {
         display: block;
         font-size: 0.8rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.12em;
         color: var(--ffvelo-rouge);
         margin-block-end: 0.5rem;
       }
   
       & h2 {
         font-size: clamp(1.5rem, 4vw, 2.5rem);
         text-transform: uppercase;
         letter-spacing: 0.02em;
         color: var(--ffvelo-bleu-text);
         margin: 0;

         &::after {
           content: "";
           display: block;
           width: var(--trait-w, 3rem);
           height: var(--trait-h, 3px);
           background: var(--ffvelo-rouge);
           margin: 0.75rem auto 0;
         }
       }
     }
   
     /* ----------------------------------------------------------
        STAT BLOCK — chiffres clés
        Usage : <div class="stat-block">
                  <strong>110 000</strong>
                  <span>membres</span>
                </div>
        ---------------------------------------------------------- */
   
     .stat-block {
       text-align: center;
       padding: var(--space-lg);
   
       & strong {
         display: block;
         font-size: clamp(2rem, 5vw, 3.5rem);
         font-weight: 700;
         color: var(--ffvelo-rouge);
         line-height: 1;
         letter-spacing: -0.02em;
       }
   
       & span {
         display: block;
         font-size: 0.85rem;
         text-transform: uppercase;
         letter-spacing: 0.1em;
         color: var(--text-light);
         margin-top: var(--space-xs);
       }
     }
   
     /* ----------------------------------------------------------
        CARD IMAGE — photo plein fond + gradient overlay
        Usage : <article class="card-img">
                  <img src="..." alt="...">
                  <div class="card-img__body">
                    <h3>Route</h3>
                    <p>Description</p>
                  </div>
                  <span class="card-img__tag">Nouveau</span>
                </article>
        ---------------------------------------------------------- */
   
     .card-img {
       position: relative;
       border-radius: var(--radius-md);
       overflow: hidden;
       display: flex;
       flex-direction: column;
       aspect-ratio: 3 / 2;
   
       & img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
       }
   
       @media (hover: hover) {
         &:hover img { transform: scale(1.04); }
       }
   
       & .card-img__body {
         position: relative;
         margin-top: auto;
         padding: var(--space-md);
         background: linear-gradient(
           to top,
           oklch(from var(--ffvelo-bleu-sombre) l c h / 90%) 0%,
           oklch(from var(--ffvelo-bleu) l c h / 0%) 100%
         );
        color: var(--ffvelo-blanc);
  
        & h2, & h3 {
          color: var(--ffvelo-blanc);
          margin: 0 0 0.25rem;
           font-size: 1.1rem;
           text-transform: uppercase;
           letter-spacing: 0.05em;
   
           /* Désactiver le ::after hérité de .section-title */
           &::after { display: none; }
         }
   
         & p {
           color: oklch(100% 0 0 / 85%);
           font-size: 0.875rem;
           margin: 0;
         }
       }
   
       /* Tag bandeau rouge — coin haut gauche */
       & .card-img__tag {
         position: absolute;
         inset-block-start: 1rem;
         inset-inline-start: 0;
        background: var(--ffvelo-rouge);
        color: var(--ffvelo-blanc);
        font-size: 0.75rem;
        font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.06em;
         padding: 0.25em 0.75em 0.25em 0.5em;
         clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
       }
     }
   
     .card {
       background: var(--bg);
       border: var(--border-width) solid var(--border);
       border-radius: var(--standard-border-radius);
       padding: var(--space-md) 1.5rem;
       box-shadow: var(--shadow-sm);
       transition: box-shadow 0.2s ease, transform 0.2s ease;

       @media (hover: hover) {
         &:hover {
           box-shadow: var(--shadow-md);
           transform: translateY(-2px);
         }
       }
   
       & > :not(:first-child) { margin-block-start: var(--space-md); }
       & > :not(:last-child)  { margin-block-end: 0; }

       &.card-bleu  { border-top: 3px solid var(--ffvelo-bleu-text); }
       &.card-rouge { border-top: 3px solid var(--ffvelo-rouge); }
     }
   
     /* ----------------------------------------------------------
        BADGE
        ---------------------------------------------------------- */
   
     .badge {
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
       padding: 0.2em 0.65em;
       border-radius: 2em;
       font-size: 0.75rem;
       font-weight: 700;
       line-height: 1;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       background: var(--accent-bg);
       color: var(--text-light);
       border: var(--border-width) solid var(--border);
   
       &.badge-bleu {
         background: light-dark(var(--ffvelo-bleu-pale), oklch(0.20 0.04 260));
         color: var(--ffvelo-bleu-text);
         border-color: oklch(from var(--ffvelo-bleu-text) l c h / 25%);
       }
   
       &.badge-rouge {
         background: var(--ffvelo-rouge-pale);
         color: light-dark(var(--ffvelo-rouge-fonce), var(--accent));
         border-color: oklch(from var(--accent) l c h / 25%);
       }
   
       &.badge-vert {
         --_c: oklch(0.76 0.19 122);
         background: light-dark(
           oklch(from var(--_c) 0.96 calc(c * 0.2) h),
           oklch(from var(--_c) 0.2 calc(c * 0.25) h)
         );
         color: light-dark(
           oklch(from var(--_c) calc(l - 0.25) c h),
           oklch(from var(--_c) calc(l + 0.2) c h)
         );
         border-color: oklch(from var(--_c) l c h / 25%);
       }
   
       &.badge-orange {
         --_c: var(--ffvelo-orange);
         background: light-dark(
           oklch(from var(--_c) 0.96 calc(c * 0.2) h),
           oklch(from var(--_c) 0.2 calc(c * 0.2) h)
         );
         color: light-dark(
           oklch(from var(--_c) calc(l - 0.3) c h),
           oklch(from var(--_c) calc(l + 0.15) c h)
         );
         border-color: oklch(from var(--_c) l c h / 25%);
       }
     }
   
     /* ----------------------------------------------------------
        NOTICES / ALERTES
        ---------------------------------------------------------- */
   
     .notice-success,
     .notice-warning,
     .notice-danger,
     .notice-info {
       padding: var(--space-sm) var(--space-md);
       border-radius: var(--radius-md);
       border-left-width: 4px;
       border-left-style: solid;
       margin-block: var(--space-md);
     }
   
     .notice-info {
       background: light-dark(var(--ffvelo-bleu-pale), oklch(0.20 0.04 260));
       border-color: var(--ffvelo-bleu-text);
       color: var(--ffvelo-bleu-text);
     }
   
     .notice-success {
       --_c: oklch(0.55 0.17 145);
       background: light-dark(
         oklch(from var(--_c) 0.96 calc(c * 0.15) h),
         oklch(from var(--_c) 0.2 calc(c * 0.25) h)
       );
       border-color: light-dark(var(--_c), oklch(from var(--_c) calc(l + 0.1) c h));
       color: light-dark(
         oklch(from var(--_c) calc(l - 0.25) c h),
         oklch(from var(--_c) calc(l + 0.25) c h)
       );
     }
   
     .notice-warning {
       --_c: var(--ffvelo-orange);
       background: light-dark(
         oklch(from var(--_c) 0.97 calc(c * 0.15) h),
         oklch(from var(--_c) 0.2 calc(c * 0.2) h)
       );
       border-color: light-dark(
         oklch(from var(--_c) calc(l - 0.1) c h),
         oklch(from var(--_c) calc(l + 0.05) c h)
       );
       color: light-dark(
         oklch(from var(--_c) calc(l - 0.35) c h),
         oklch(from var(--_c) calc(l + 0.15) c h)
       );
     }
   
     .notice-danger {
       background: var(--ffvelo-rouge-subtle);
       border-color: var(--accent);
       color: light-dark(var(--ffvelo-rouge-fonce), var(--accent));
     }
   
     /* ----------------------------------------------------------
        GRILLES
        ---------------------------------------------------------- */
   
     .grid-2,
     .grid-3,
     .grid-4 {
       display: grid;
       gap: var(--space-lg);
     }
   
     .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
     .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
     .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
   
     /* ----------------------------------------------------------
        DIVIDER avec label centré
        ---------------------------------------------------------- */
   
     .divider {
       display: flex;
       align-items: center;
       gap: var(--space-md);
       color: var(--text-light);
       font-size: 0.85rem;
       margin-block: var(--space-lg);
   
       &::before,
       &::after {
         content: "";
         flex: 1;
         border-top: var(--border-width) solid var(--border);
       }
     }
   
     /* ----------------------------------------------------------
        SPINNER CSS pur
        ---------------------------------------------------------- */
   
     .loading {
       display: inline-block;
       width: 1em;
       height: 1em;
       border-radius: 50%;
       border: 2px solid var(--border);
       border-top-color: var(--ffvelo-rouge);
     }

     @media (prefers-reduced-motion: no-preference) {
       .loading {
         animation: spin 0.7s linear infinite;
       }
     }
   
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
   
     /* ----------------------------------------------------------
        BLOC MARQUE (guide page 16)
        Usage : <div class="bloc-marque">
                  <img src="logo-ffvelo.svg" alt="FFVélo">
                  <div class="bloc-marque__sep"></div>
                  <span class="bloc-marque__label">Club affilié</span>
                </div>
        ---------------------------------------------------------- */
   
     /* ----------------------------------------------------------
        PROSE — styles pour contenu Trix (pages, articles)
        Applique un rythme vertical cohérent et des styles
        sur tous les éléments HTML que Trix peut produire.
        ---------------------------------------------------------- */

     .prose {
       max-width: 70ch;
       line-height: 1.7;

       & > :not(:first-child) { margin-block-start: var(--space-md); }
       & > :not(:last-child)  { margin-block-end: 0; }

       & p, & ul, & ol {
         margin-block: var(--space-md);
       }

       & h2, & h3, & h4 {
         margin-top: var(--space-lg);
         margin-bottom: var(--space-sm);
       }

       & img {
         max-width: 100%;
         height: auto;
         border-radius: var(--radius-md);
         display: block;
         margin-block: var(--space-md);
       }

       & figure {
         margin: var(--space-lg) 0;

         & img { margin-block: 0; }

         & figcaption {
           font-size: 0.85rem;
           color: var(--text-light);
           margin-top: var(--space-xs);
         }
       }

       & blockquote {
         border-left: 4px solid var(--accent);
         margin-inline: 0;
         padding: var(--space-sm) var(--space-md);
         color: var(--text-light);
         font-style: italic;
       }

       & ul, & ol {
         padding-inline-start: var(--space-lg);
       }

       & li + li {
         margin-top: var(--space-xs);
       }

       & code {
         font-size: 0.9em;
         padding: 0.1em 0.35em;
         border-radius: var(--radius-sm);
         background: var(--accent-bg);
       }

       & pre {
         padding: var(--space-md);
         border-radius: var(--radius-md);
         overflow-x: auto;
         background: var(--accent-bg);

         & code {
           padding: 0;
           background: none;
         }
       }

       & a {
         color: var(--accent);
         text-decoration: underline;
         text-decoration-thickness: 1px;
         text-underline-offset: 0.15em;

         &:hover {
           color: var(--accent-hover);
         }
       }

       & hr {
         margin-block: var(--space-lg);
       }
     }

     .bloc-marque {
       display: inline-flex;
       align-items: center;
       gap: 1rem;
       border: var(--border-width) solid var(--ffvelo-bleu-clair);
       border-radius: 2rem;
       padding: 0.5rem 1rem;
   
       & .bloc-marque__sep {
         width: 1px;
         align-self: stretch;
         background: var(--ffvelo-bleu-clair);
       }
   
       & .bloc-marque__label {
         font-size: 0.8rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.05em;
         color: var(--ffvelo-bleu-text);
       }
     }
   }
   
   /* ============================================================
      LAYER UTILITIES
      ============================================================ */
   
   @layer utilities {

     .trait-rouge::after {
       content: "";
       display: block;
       width: var(--trait-w, 3rem);
       height: var(--trait-h, 3px);
       background: var(--ffvelo-rouge);
       margin: 0.75rem auto 0;
     }

     .theme-toggle {
       background: none;
       border: none;
       cursor: pointer;
       font-size: 1.25rem;
       line-height: 1;
       padding: 0.25rem;
       text-transform: none;
       letter-spacing: 0;
       transition: transform 0.2s ease;

       &:hover {
         background: none;
         transform: scale(1.2);
         box-shadow: none;
       }
     }

     .truncate {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .min-w-0 {
       min-width: 0;
     }
   
     .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip-path: inset(50%);
       white-space: nowrap;
       border-width: 0;
     }
   
     .text-bleu   { color: var(--ffvelo-bleu-text); }
     .text-rouge  { color: var(--ffvelo-rouge); }
     .text-muted  { color: var(--text-light); }
     .text-small  { font-size: 0.875rem; }
     .text-caps   { text-transform: uppercase; letter-spacing: 0.08em; }
     .text-center { text-align: center; }
   
     .mt-0 { margin-top: 0; }
     .mb-0 { margin-bottom: 0; }
     .p-0  { padding: 0; }
   }
   
   /* Jost (équivalent Futura libre) chargé via assets/styles/jost.css */