/*
 * Feuilles du site, regroupées en un seul fichier à la compilation (src/AssetMapper/RegroupementCss.php) :
 * chaque @import ci-dessous est remplacé par le contenu de la feuille, le navigateur n'en reçoit aucun.
 * Importée par assets/app.js. layers.css en premier : il déclare l'ordre des couches ; la cascade
 * dépend ensuite des couches, pas de l'ordre des feuilles.
 * Les feuilles de pages/ n'y sont pas : chaque page charge les siennes (bloc stylesheets).
 */
/*
 * Ordre des couches de la cascade. En tête de styles/app.css :
 * la priorité d'une règle dépend de sa couche, pas de l'ordre de chargement.
 */
@layer reset, tokens, base, layout, components, pages, utilities;
/*
 * ALBLSE — design tokens
 * Seule source des valeurs de design du site. Aucune autre feuille ne contient
 * de couleur, de taille ou d'espacement en dur : elles utilisent ces variables.
 *
 * Origine : maquette Claude Design (alblse-maquette/, style « Sport plein écran », palette « Lagon ») :
 * couleurs et police reprises telles quelles, sauf l'accent, le turquoise d'alblse.fr (décision du 2026-10-26) ;
 * tailles, espacements et rayons ramenés à cette échelle (rien sous 12 px : public âgé).
 *
 * Mobile first : les valeurs de base sont celles du mobile, puis deux points
 * de rupture (les variables ne fonctionnent pas dans les media queries, ces
 * deux valeurs sont donc écrites en dur, partout les mêmes) :
 *   - tablette   : min-width: 768px
 *   - ordinateur : min-width: 1025px
 */

@layer tokens {
  :root {
    /* ---------- Couleurs de base : le marine porte la marque, le Lagon signale l'action ---------- */
    --c-navy: #0C243C;          /* texte principal, sections sombres */
    --c-navy-900: #071828;      /* pied de page */
    --c-navy-700: #17344F;      /* cartes posées sur un fond sombre */
    --c-navy-line: #2A4058;     /* filets sur fond sombre */
    --c-accent: #55C2C3;        /* Turquoise d’alblse.fr (décision du 2026-10-26) : boutons d’action, puces, accents. Texte marine dessus, jamais blanc */
    --c-accent-hover: #3EAEAF;  /* survol du bouton accent */
    --c-accent-text: #177A7B;   /* turquoise en texte sur fond clair : liens, sur-titres (5,1:1 sur blanc, 4,7:1 sur --c-bg) */
    --c-bg: #F5F7F6;            /* fond de page */
    --c-white: #FFFFFF;         /* surfaces : cartes, sections blanches */
    --c-soft: #E3EEEC;          /* puces, boîtes d'icône, emplacements vides */
    --c-line: #D9E1DF;          /* filets sur fond clair */
    --c-line-strong: #C5D3D1;   /* bord des champs, trait de la frise */

    /* ---------- Textes ---------- */
    --c-text-2: #33465A;        /* paragraphes */
    --c-text-3: #4A5B6C;        /* méta, légendes */
    --c-on-dark: #C9D3DC;       /* paragraphes sur fond sombre */
    --c-on-dark-2: #AEBBC8;     /* méta sur fond sombre */
    --c-on-dark-strong: #DCE5EC; /* chapô sur photo */
    --c-disabled-bg: #E3EEEC;
    --c-disabled-text: #8193A5;

    /* ---------- Formulaires ---------- */
    --c-erreur: #B42318;        /* erreurs uniquement, toujours avec un message (contraste AA sur blanc et sur --c-bg) */
    --c-erreur-clair: #F2B8B5;  /* le même sur fond sombre (contraste AA sur --c-navy) */

    /* ---------- Transparences (toujours dérivées d'une couleur de base) ---------- */
    --c-line-on-dark: color-mix(in srgb, var(--c-white) 30%, transparent);  /* séparateurs des chiffres clés */
    --c-hover-on-dark: color-mix(in srgb, var(--c-white) 10%, transparent);
    --c-ghost-border: color-mix(in srgb, var(--c-white) 25%, transparent);  /* badge du hero, champs sur sombre */
    --c-ghost-fond: color-mix(in srgb, var(--c-navy) 60%, transparent);     /* badge du hero, sur la photo */
    --c-accent-ring: color-mix(in srgb, var(--c-accent) 45%, transparent);  /* halo d'un champ actif */
    --c-scrollbar: color-mix(in srgb, var(--c-navy) 12%, transparent);      /* poignée des barres de défilement */
    --c-scrollbar-hover: color-mix(in srgb, var(--c-navy) 30%, transparent);
    --c-scrollbar-on-dark: color-mix(in srgb, var(--c-white) 15%, transparent);
    --c-scrollbar-on-dark-hover: color-mix(in srgb, var(--c-white) 35%, transparent);

    /* ---------- Voiles marine sur photo ---------- */
    /* Hero de l'accueil : foncé partout (demande du 2026-10-26), plus dense en haut (menu) et en bas (titre, chiffres) */
    --overlay-hero: linear-gradient(180deg,
      color-mix(in srgb, var(--c-navy-900) 90%, transparent) 0%,
      color-mix(in srgb, var(--c-navy-900) 80%, transparent) 35%,
      color-mix(in srgb, var(--c-navy-900) 96%, transparent) 100%);
    /* En-tête des pages intérieures : bleu marine très foncé, au niveau du hero de l'accueil (demandes du 2026-10-26), le même sur toutes les pages (un seul voile, .c-page-header::after) ; les boules de la photo restent à peine devinables. Une photo très contrastée (Historique, Contact) se devine plus à travers un même voile qu'une photo unie (Présentation) : voile resserré le 2026-10-26 pour les rapprocher */
    --overlay-page: linear-gradient(180deg,
      color-mix(in srgb, var(--c-navy) 95%, transparent) 0%,
      color-mix(in srgb, var(--c-navy) 90%, transparent) 50%,
      color-mix(in srgb, var(--c-navy) 97%, transparent) 100%);
    /* Carte d'activité : photo en fond, voile plus dense en bas (détails, programme) */
    --overlay-activite: linear-gradient(180deg,
      color-mix(in srgb, var(--c-navy-900) 45%, transparent) 0%,
      color-mix(in srgb, var(--c-navy-900) 25%, transparent) 30%,
      color-mix(in srgb, var(--c-navy-900) 92%, transparent) 70%);
    /* Vignette de la page Photos survolée : voile léger, sous la fiche de la légende */
    --overlay-photo-tile: color-mix(in srgb, var(--c-navy-900) 35%, transparent);

    /* ---------- Typographie : une seule famille, Archivo, en largeur normale ou étendue ---------- */
    --font: 'Archivo', system-ui, sans-serif;  /* police auto-hébergée, voir base/fonts.css */
    --fst-expanded: 125%;  /* largeur étendue : titres en capitales, chiffres, dates */

    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* Échelle unique. Rien en dessous de --fs-2xs. */
    --fs-2xs: 12px;     /* étiquettes en capitales espacées */
    --fs-xs: 13px;      /* sur-titres, méta, légendes */
    --fs-sm: 14px;      /* menu, texte secondaire, puces */
    --fs-md: 15px;      /* texte de carte */
    --fs-base: 16px;    /* texte courant */
    --fs-lead: 18px;    /* chapô, texte d'article */
    --fs-lg: 20px;      /* titres d'article, titres de l'accordéon */
    --fs-xl: 26px;      /* H3 en capitales larges (cartes d'information) */
    --fs-2xl: 36px;     /* chiffres clés, années de la frise */
    --fs-3xl: 46px;     /* prix des formules */
    --fs-h2: clamp(28px, 5vw, 64px);      /* H2 des sections : « BOULODROME » tient dans un téléphone de 320 px */
    --fs-h1: clamp(28px, 8.5vw, 112px);   /* H1 des pages intérieures : « PRÉSENTATION », le mot de titre le plus long, tient dans un téléphone de 320 px */
    --fs-hero: clamp(34px, 5.6vw, 88px);  /* H1 de l'accueil : le nom complet du club, sur trois lignes */

    --lh-display: 0.9;  /* H1, H2 en capitales larges */
    --lh-tight: 1;      /* H3 en capitales, chiffres */
    --lh-heading: 1.2;  /* titres en casse normale */
    --lh-body: 1.55;
    --lh-prose: 1.7;    /* paragraphes d'article */

    --ls-display: -0.02em;  /* titres en capitales larges */
    --ls-kicker: 0.14em;    /* sur-titres */
    --ls-label: 0.1em;      /* étiquettes, catégories, intitulés des chiffres */
    --ls-caps: 0.06em;      /* menu, boutons, liens fléchés */

    /* ---------- Espacements (base 4 px) ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-14: 56px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-26: 104px;

    --section-y: var(--sp-16);  /* marge haute et basse des sections (80px tablette, 104px ordinateur) */
    --section-x: clamp(var(--sp-5), 4vw, var(--sp-12));  /* gouttière du conteneur */

    /* ---------- Largeurs ---------- */
    --container: 1360px;  /* largeur max du contenu */
    --prose: 780px;       /* colonne de texte d'un article */
    --lecture: 60ch;      /* longueur de ligne confortable d'un chapô ou d'une introduction */
    --sidebar: 260px;     /* menu gauche */
    --aside: 320px;       /* colonne droite : catégories, prochain rendez-vous, infos */
    --carte-bureau: 320px;  /* largeur mini d'une carte du bureau (trois par ligne au plus) */
    --carte-signature: 360px;  /* largeur maxi de la carte du président : sa photo (400 px) reste nette */
    --scrollbar-size: 6px;  /* épaisseur des barres de défilement (Chrome, Edge, Safari) */
    --tap: 44px;          /* cible tactile minimale */

    /* ---------- Formes ---------- */
    --r-xs: 4px;      /* cases à cocher */
    --r-sm: 6px;      /* boutons, puces, badges, miniatures */
    --r-md: 10px;     /* cartes, photos */
    --r-pill: 999px;  /* badge du hero, pastilles */

    /* ---------- Ombres : menus déroulants, barre blanche de l'en-tête, carte survolée (jamais au repos) ---------- */
    --sh-menu: 0 16px 40px color-mix(in srgb, var(--c-navy-900) 25%, transparent);
    --sh-barre: 0 4px 12px color-mix(in srgb, var(--c-navy-900) 15%, transparent);
    --sh-carte: 0 12px 32px color-mix(in srgb, var(--c-navy-900) 18%, transparent);  /* carte d'article ou d'activité survolée */

    /* ---------- Mouvement ---------- */
    --t: 0.2s;          /* transitions de survol */
    --t-reveal: 0.6s;   /* apparition au défilement */
    --t-page: 0.4s;     /* fondu enchaîné entre deux pages */
    --t-panneau: 0.3s;  /* panneau du menu mobile */
    --t-compteur: 1.6s; /* défilement d'un compteur de 0 à sa valeur (StatCounter) */
    --t-toast: 6s;      /* durée d'affichage d'un toast (message envoyé), avant qu'il se referme seul */
    --t-diapo: 2s;      /* fondu entre deux photos du diaporama */
    --ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);  /* départ vif, arrivée douce */
    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);  /* léger dépassement puis retour (puces de la frise) */
    --ease-barre: cubic-bezier(0.4, 0, 0.2, 1);     /* barre collée : départ et arrivée doux (elle ne démarre pas d'un coup) */
    --t-logo: 4s;       /* bandeau des sponsors : temps de défilement par logo (au moins six logos), soit une quarantaine de pixels par seconde */
    --stagger: 0.1s;    /* décalage entre les cartes d'une même grille */
    --t-hero: 0.9s;         /* apparition d'un élément du hero au chargement */
    --t-hero-fond: 1.8s;    /* apparition de la photo de fond du hero (dézoom en fondu) */
    --stagger-hero: 0.15s;  /* décalage entre deux éléments du hero */
  }

  @media (min-width: 768px) {
    :root {
      --section-y: var(--sp-20);
    }
  }

  @media (min-width: 1025px) {
    :root {
      --section-y: var(--sp-26);
    }
  }
}

/* Remise à zéro minimale des styles du navigateur */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  /* L'attribut hidden l'emporte toujours, même sur un display posé par un composant */
  [hidden] {
    display: none !important;
  }

  /* Pas de rectangle bleu posé par Chrome mobile sur un lien ou un bouton touché : chaque élément a
     déjà son propre survol, et le focus au clavier reste visible (:focus-visible, base/typography.css) */
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    min-height: 100dvh;
  }

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

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

  button {
    cursor: pointer;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
}
/*
 * Archivo, auto-hébergée (aucun appel à Google Fonts : RGPD et performance).
 * Fichier variable : graisse 100 à 900, largeur 62 % à 125 % (titres en largeur étendue, font-stretch: 125 %),
 * sous-ensemble latin (couvre é, ç, œ, ’, €). Licence : assets/fonts/OFL.txt. Préchargée dans templates/base.html.twig.
 */
@layer base {
  @font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin-wdth-wght-Wa7z_Iw.woff2") format('woff2');
  }
}
/*
 * Tons de surface. Les composants lisent ces variables au lieu de prévoir
 * une variante « sur fond sombre » chacun.
 * Toute surface sombre porte l'attribut data-tone="dark" (sections, cartes,
 * en-têtes de page, pied de page…) : les textes, sur-titres et liens qu'elle
 * contient basculent d'eux-mêmes. Lagon en texte : #177A7B sur clair, #55C2C3 sur sombre.
 */
@layer base {
  :root,
  [data-tone="light"] {
    --tone-heading: var(--c-navy);
    --tone-text: var(--c-text-2);
    --tone-strong: var(--c-navy);
    --tone-muted: var(--c-text-3);
    --tone-kicker: var(--c-accent-text);
    --tone-link: var(--c-navy);
    --tone-link-hover: var(--c-accent-text);
    --tone-line: var(--c-line);
    --tone-focus: var(--c-accent-text);
    /* Fond d'une puce ou d'une étiquette posée sur la surface */
    --tone-chip: var(--c-bg);
    /* Bouton à contour : son trait, puis le texte quand il se remplit au survol */
    --tone-inverse: var(--c-white);
    /* Champs de formulaire : fond, bord (contraste 3:1), erreur */
    --tone-champ: var(--c-bg);
    --tone-champ-bord: var(--c-line-strong);
    --tone-erreur: var(--c-erreur);
    --tone-scrollbar: var(--c-scrollbar);
    --tone-scrollbar-hover: var(--c-scrollbar-hover);

    color: var(--tone-text);
  }

  [data-tone="dark"] {
    --tone-heading: var(--c-white);
    --tone-text: var(--c-on-dark);
    --tone-strong: var(--c-white);
    --tone-muted: var(--c-on-dark-2);
    --tone-kicker: var(--c-accent);
    --tone-link: var(--c-white);
    --tone-link-hover: var(--c-accent);
    --tone-line: var(--c-navy-line);
    --tone-focus: var(--c-accent);
    --tone-chip: var(--c-navy-700);
    --tone-inverse: var(--c-navy);
    --tone-champ: var(--c-ghost-fond);
    --tone-champ-bord: var(--c-ghost-border);
    --tone-erreur: var(--c-erreur-clair);
    --tone-scrollbar: var(--c-scrollbar-on-dark);
    --tone-scrollbar-hover: var(--c-scrollbar-on-dark-hover);

    color: var(--tone-text);
  }
}
/*
 * Typographie : le style des éléments HTML, défini une seule fois.
 * Titres de section et de page en capitales larges (Archivo étendue, 900) ; H3 et suivants en casse normale,
 * sauf dans les composants qui les passent en capitales (u-display).
 */
@layer base {
  /* Le site est clair : formulaires, barres de défilement et couleurs par défaut du navigateur en mode clair. La balise
     color-scheme « dark » de base.html.twig ne sert qu'à l'écran d'attente de la première visite, avant cette feuille */
  :root {
    color-scheme: light;
  }

  body {
    background: var(--c-bg);
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--tone-heading);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    /* Lignes remplies, sans mot seul sur la dernière */
    text-wrap: pretty;
  }

  h1,
  h2 {
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
  }

  /* Un mot plus long que la ligne (« confidentialité » sur un téléphone) se coupe en fin de ligne au lieu de dépasser */
  h1 {
    font-size: var(--fs-h1);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  h2 {
    font-size: var(--fs-h2);
  }

  h3 {
    font-size: var(--fs-lg);
  }

  h4,
  h5,
  h6 {
    font-size: var(--fs-base);
  }

  b,
  strong {
    font-weight: var(--fw-bold);
    color: var(--tone-strong);
  }

  a {
    color: var(--tone-link);
    text-underline-offset: 0.2em;
    transition: color var(--t);

    &:hover {
      color: var(--tone-link-hover);
    }
  }

  :focus-visible {
    outline: 2px solid var(--tone-focus);
    outline-offset: 2px;
  }

  ::selection {
    background: var(--c-accent);
    color: var(--c-navy);
  }

  /* Chiffres alignés dans les tableaux, compteurs et dates */
  time,
  data {
    font-variant-numeric: tabular-nums;
  }
}
/*
 * Animations du site, les mêmes partout. Chaque composant déclare son apparition avec
 * data-reveal="up|down|left|right|zoom|fade|rise".
 * - Au chargement, tout élément animé joue son apparition en pur CSS, dès le premier affichage :
 *   rien n'attend JavaScript, même sur un téléphone lent (le haut de la page s'anime aussitôt).
 * - Le contrôleur « reveal », posé sur <body>, met ensuite en attente (data-reveal-attente) les
 *   éléments situés plus bas que l'écran, puis les fait apparaître (data-revealed) quand ils y entrent.
 * Les éléments d'une même grille se suivent (--reveal-index × --stagger). Un élément contenu dans
 * un autre élément animé bouge avec lui. Sans JavaScript, tout reste simplement affiché.
 * Rien ne bouge si l'utilisateur a demandé de réduire les animations.
 */
@layer base {
  @keyframes reveal {
    from {
      opacity: var(--reveal-opacity, 0);
      transform: var(--reveal-from);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  [data-reveal] {
    --reveal-from: translateY(var(--sp-6));
  }

  [data-reveal="down"] {
    --reveal-from: translateY(calc(-1 * var(--sp-6)));
  }

  /* left : arrive depuis la gauche ; right : depuis la droite */
  [data-reveal="left"] {
    --reveal-from: translateX(calc(-1 * var(--sp-10)));
  }

  [data-reveal="right"] {
    --reveal-from: translateX(var(--sp-10));
  }

  [data-reveal="zoom"] {
    --reveal-from: scale(0.96);
  }

  [data-reveal="fade"] {
    --reveal-from: none;
  }

  /* rise : petite montée seule, sans fondu (fiches de clubs et d'ententes) : la fiche reste visible
     et glisse jusqu'à sa place ; en attente, elle est déjà visible, un peu plus bas */
  [data-reveal="rise"] {
    --reveal-from: translateY(var(--sp-2));
    --reveal-opacity: 1;
  }

  /* Apparition au chargement (CSS seul) puis au défilement (après la mise en attente) */
  [data-reveal],
  [data-revealed] {
    animation: reveal var(--t-reveal) var(--ease-reveal) both;
    animation-delay: calc(var(--reveal-index, 0) * var(--stagger));
  }

  /* Au chargement, les cartes d'une grille se suivent */
  .l-grid > [data-reveal]:nth-child(2) { --reveal-index: 1; }
  .l-grid > [data-reveal]:nth-child(3) { --reveal-index: 2; }
  .l-grid > [data-reveal]:nth-child(4) { --reveal-index: 3; }
  .l-grid > [data-reveal]:nth-child(5) { --reveal-index: 4; }
  .l-grid > [data-reveal]:nth-child(n + 6) { --reveal-index: 5; }

  [data-reveal] [data-reveal],
  [data-reveal-attente] {
    animation: none;
  }

  [data-reveal-attente] {
    opacity: 0;
  }

  [data-reveal-attente][data-reveal="rise"] {
    opacity: 1;
    transform: var(--reveal-from);
  }

  /* Changement d'état sans transition (contrôleur « disclosure » : état repris après le remplacement
     d'un cadre Turbo, avant d'animer vers le nouvel état) */
  [data-instant],
  [data-instant] * {
    transition: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal-attente] {
      opacity: 1;
    }

    [data-revealed] {
      animation: none;
    }

    *,
    *::before,
    *::after {
      transition-duration: 0s !important;
      transition-delay: 0s !important;
      animation: none !important;
      scroll-behavior: auto !important;
    }
  }
}
/*
 * Barre de chargement de Turbo, en haut de l'écran pendant le passage d'une page à l'autre :
 * Lagon, avec un léger halo. Elle n'apparaît pas pendant le fondu entre
 * deux pages (base/page-transition.css) : nommée à part dans la transition, elle n'est pas dans les
 * images des deux pages et son propre groupe est masqué ; Turbo la retire à la fin du fondu. Son délai
 * d'apparition inclut la durée du fondu (app.js) : elle ne signale qu'un serveur lent.
 * Turbo injecte sa propre feuille, hors des couches CSS : d'où les !important.
 */
@layer base {
  .turbo-progress-bar {
    height: var(--sp-1) !important;
    background: var(--c-accent) !important;
    box-shadow: 0 0 var(--sp-2) var(--c-accent);
    view-transition-name: barre-chargement;
  }

  ::view-transition-group(barre-chargement) {
    display: none;
  }
}
/*
 * Transition entre deux pages : fondu enchaîné d'opacité, celui que Turbo lance grâce à
 * <meta name="view-transition" content="same-origin"> (base.html.twig) avec les View Transitions du
 * navigateur. Aucun voile : l'ancienne page s'efface pendant que la nouvelle apparaît. Seule la durée
 * est réglée ici. Pas de fondu pour un cadre Turbo (liste de la page Documents) ni pour une ancre de
 * la page affichée. Turbo s'en abstient si l'utilisateur a demandé de réduire les animations ; un
 * navigateur qui ne connaît pas les View Transitions change de page sans fondu.
 * Pas d'aperçu tiré du cache (turbo-cache-control : no-preview) : sinon une page déjà vue
 * s'afficherait deux fois, sa copie puis la page fraîche, avec ses apparitions rejouées.
 */
@layer base {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--t-page);
  }
}
/*
 * Barres de défilement : fines et discrètes, poignée dans le ton de la surface, sans fond.
 * La poignée lit --tone-scrollbar : elle s'éclaircit d'elle-même sur une surface sombre.
 * Une zone qui masque sa barre (onglets qui défilent) le déclare dans son composant : la couche components l'emporte.
 * Page sur le hero de l'accueil (data-defilement-sombre, contrôleur defilement-sombre) : barre de la page foncée ; le
 * passage du foncé au clair glisse (--t-hero), les couleurs de la poignée étant déclarées animables (@property).
 */
@property --tone-scrollbar {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@property --tone-scrollbar-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@layer base {
  html {
    transition: --tone-scrollbar var(--t-hero) ease, --tone-scrollbar-hover var(--t-hero) ease, background-color var(--t-hero) ease;
  }

  html[data-defilement-sombre] {
    --tone-scrollbar: var(--c-scrollbar-on-dark);
    --tone-scrollbar-hover: var(--c-scrollbar-on-dark-hover);

    background-color: var(--c-navy);
  }

  /* Chrome, Edge, Safari : plus fine que la valeur standard « thin », plus marquée au survol */
  ::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: var(--r-pill);
    background: var(--tone-scrollbar);

    &:hover {
      background: var(--tone-scrollbar-hover);
    }
  }

  /* Firefox : propriétés standard. Réservées à lui, car Chrome ignorerait sinon les réglages ci-dessus */
  @supports not selector(::-webkit-scrollbar) {
    * {
      scrollbar-width: thin;
    }

    :root,
    [data-tone] {
      scrollbar-color: var(--tone-scrollbar) transparent;
    }
  }
}

/* Structure de la page : le pied de page reste en bas, même sur une page courte */
@layer layout {
  /* Place de la barre de défilement toujours réservée : rien ne se décale d'une page courte à une page longue */
  html {
    scrollbar-gutter: stable;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;

    &:focus {
      outline: none;
    }
  }
}
/* Conteneur : contenu centré de 1360 px au maximum, gouttière de 20 à 48 px selon l'écran */
@layer layout {
  .l-container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--section-x));
    margin-inline: auto;
    padding-inline: var(--section-x);
  }
}
/*
 * Section de page. Les fonds alternent : fond de page, blanc, fond de page, marine ;
 * jamais deux sections marine à la suite
 * (avec data-tone="dark" sur la section).
 * --filigrane : la section porte un filigrane, le dessin de la boule (composant Filigrane), derrière son contenu.
 */
@layer layout {
  .l-section {
    padding-block: var(--section-y);
  }

  .l-section--white {
    background: var(--c-white);
  }

  .l-section--muted {
    background: var(--c-bg);
  }

  .l-section--dark {
    background: var(--c-navy);
  }

  .l-section--filigrane {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
}
/* Pile verticale : espacement régulier entre l'en-tête d'un bloc et son contenu */
@layer layout {
  .l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
  }

  @media (min-width: 768px) {
    .l-stack {
      gap: var(--sp-10);
    }
  }

  /* Après la règle de la tablette, qui l'écraserait sinon (même poids) */
  .l-stack--tight {
    gap: var(--sp-4);
  }
}
/*
 * Deux colonnes, en douzièmes : 4/8, 5/7, 6/6, 7/5 (la vie au club et ses photos), 8/4 (articles et dernières infos de
 * l'accueil), 9/3.
 * Une seule colonne jusqu'à 1024 px.
 */
@layer layout {
  .l-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .l-split--center {
    align-items: center;
  }

  @media (min-width: 1025px) {
    .l-split {
      gap: var(--sp-14);
      align-items: start;
    }

    .l-split--4-8 {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }

    .l-split--5-7 {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .l-split--6-6 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .l-split--7-5 {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .l-split--8-4 {
      grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    }

    .l-split--9-3 {
      grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
    }

    .l-split--center {
      align-items: center;
    }
  }
}
/*
 * Colonne fixe + contenu : menu à gauche (Résultats, Documents)
 * ou colonne à droite (derniers articles). Une seule colonne jusqu'à 1024 px.
 */
@layer layout {
  .l-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  @media (min-width: 1025px) {
    .l-sidebar {
      grid-template-columns: var(--sidebar) minmax(0, 1fr);
      gap: var(--sp-14);
      align-items: start;
    }

    .l-sidebar--aside {
      grid-template-columns: minmax(0, 1fr) var(--aside);
    }

    /* Élément qui reste visible pendant le défilement, sous la barre fixée ; plus haut que
       l'écran (groupes du menu dépliés), il défile sur lui-même ; la place de sa barre de défilement
       est réservée, pour que rien ne se décale quand elle apparaît. La marge intérieure, compensée,
       laisse la place au contour de focus (rogné sinon par le défilement) */
    .l-sidebar__sticky {
      position: sticky;
      top: calc(var(--sticky-top) - var(--sp-1));
      max-height: calc(100dvh - var(--sticky-top) - var(--sp-4));
      margin: calc(-1 * var(--sp-1));
      padding: var(--sp-1);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
  }
}
/*
 * Grilles de cartes, de 2 à 5 colonnes sur ordinateur.
 * Mobile : 1 colonne. Tablette : 2 colonnes.
 * Vignettes de photos (page Photos) : 2 colonnes dès le téléphone, 3 sur tablette, 4 sur ordinateur.
 * Cartes du bureau (l-grid--equipe) : autant de colonnes que la largeur en permet, trois au plus, chacune d'au moins
 * --carte-bureau ; la colonne se réduit à la largeur de l'écran sur un petit téléphone.
 */
@layer layout {
  .l-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  .l-grid--tight {
    gap: var(--sp-3);
  }

  /* Toutes les cases à la hauteur de la plus haute (fiches de l'annuaire) */
  .l-grid--equal {
    grid-auto-rows: 1fr;
  }

  .l-grid--photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .l-grid--equipe {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--carte-bureau), calc((100% - 2 * var(--sp-5)) / 3))), 1fr));
  }

  @media (min-width: 768px) {
    .l-grid--photos {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .l-grid--2,
    .l-grid--3,
    .l-grid--4,
    .l-grid--5 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1025px) {
    .l-grid--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .l-grid--4,
    .l-grid--photos {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .l-grid--5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}
/*
 * Mosaïque (page Photos), posée sur une grille de photos (l-grid--photos) : chaque case garde la hauteur de sa photo,
 * et les colonnes se remplissent sans trou, dans l'ordre de lecture, pages suivantes comprises (chargement infini). Le contrôleur « mosaique » découpe la grille en
 * rangées de --mosaique-rangee et donne à chaque case le nombre de rangées de sa hauteur, écart compris
 * (--mosaique-lignes), puis pose data-rangee. Sans JavaScript : la grille simple, cases alignées par le haut.
 */
@layer layout {
  .l-mosaique {
    --mosaique-rangee: var(--sp-1);

    /* Cadre Turbo de la page suivante (chargement infini) : sans boîte, ses photos rejoignent la grille */
    & turbo-frame {
      display: contents;
    }
  }

  /* Lien « Photos suivantes » (sans JavaScript, ou le temps du chargement) : sur toute la largeur */
  .l-mosaique__suite {
    grid-column: 1 / -1;
    text-align: center;
  }

  .l-mosaique[data-rangee] {
    grid-auto-rows: var(--mosaique-rangee);
    row-gap: 0;

    & > * {
      grid-row-end: span var(--mosaique-lignes, 1);
    }
  }
}

/* Icône : taille relative au texte, couleur héritée */
@layer components {
  .c-icon {
    flex: none;
    width: 1.25em;
    height: 1.25em;
  }
}
/*
 * Bouton : primary (Lagon, texte marine), dark (marine), outline (contour de la couleur des titres, rempli au
 * survol), link (lien fléché), tile (tuile d'action). Libellé en capitales grasses, hauteur de 44 px au moins.
 * Focus : contour marine sur le Lagon, Lagon ailleurs (couleur du ton).
 */
@layer components {
  .c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-5);
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    background: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-caps);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--t), border-color var(--t), color var(--t);
  }

  .c-button--lg {
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--fs-base);
  }

  .c-button--block {
    display: flex;
    width: 100%;
  }

  .c-button--primary {
    background: var(--c-accent);
    color: var(--c-navy);

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

    &:focus-visible {
      outline-color: var(--c-navy);
    }
  }

  .c-button--dark {
    background: var(--c-navy);
    color: var(--c-white);

    &:hover {
      background: var(--c-navy-700);
      color: var(--c-white);
    }
  }

  /* Contour : marine sur fond clair, blanc sur fond sombre (ton de la surface) */
  .c-button--outline {
    border-color: var(--tone-heading);
    color: var(--tone-heading);

    &:hover {
      background: var(--tone-heading);
      color: var(--tone-inverse);
    }
  }

  .c-button:disabled {
    border-color: transparent;
    background: var(--c-disabled-bg);
    color: var(--c-disabled-text);
    cursor: default;
  }

  /* Lien fléché : sans fond, souligné en Lagon au survol ; la flèche avance d'un cran */
  .c-button--link {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--tone-link);
    text-underline-offset: 0.3em;

    &:hover {
      color: var(--tone-link-hover);
      text-decoration: underline;
    }
  }

  .c-button__icone {
    transition: transform var(--t);
  }

  .c-button:hover .c-button__icone--arrow-right {
    transform: translateX(var(--sp-1));
  }

  /* Tuile d'action (page d'erreur : rubriques du site) : fond doux, icône puis libellé, à gauche */
  .c-button--tile {
    justify-content: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--c-soft);
    color: var(--c-navy);
    text-align: left;

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

  /* Petit et discret (boutons des infos du club) : après les variantes, sa marge l'emporte sur la leur */
  .c-button--sm {
    min-height: 0;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-2xs);
  }

  /* Lien petit et discret : texte secondaire en casse normale, souligné seulement au survol (« Lire la suite ») */
  .c-button.c-button--link.c-button--sm {
    padding: 0;
    color: var(--tone-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: normal;
    text-transform: none;

    &:hover {
      color: var(--tone-text);
    }
  }
}
/*
 * Bouton carré à icône, cible tactile de 44 px : light (fond blanc), muted (fond de la surface), primary (Lagon),
 * ghost (sur fond sombre ou photo : visionneuse).
 */
@layer components {
  .c-icon-button {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    transition: background-color var(--t), color var(--t);

    /* Inactif (première image d'une série, zoom à sa limite) : estompé */
    &:disabled {
      opacity: 0.35;
      cursor: default;
    }
  }

  .c-icon-button--light {
    background: var(--c-white);
    color: var(--c-navy);

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

  .c-icon-button--muted {
    background: var(--tone-chip);
    color: var(--tone-strong);

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

  .c-icon-button--primary {
    background: var(--c-accent);
    color: var(--c-navy);

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

  .c-icon-button--ghost {
    background: var(--c-ghost-fond);
    color: var(--c-on-dark);

    &:hover {
      background: var(--c-hover-on-dark);
      color: var(--c-white);
    }
  }
}
/* En-tête de section : sur-titre + titre, compteur ou action à droite */
@layer components {
  .c-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-10);
  }

  .c-section-heading__group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .c-section-heading__counter {
    color: var(--tone-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    font-variant-numeric: tabular-nums;
  }

  .c-section-heading--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .c-section-heading--divided {
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--tone-line);
  }
}
/*
 * Carte : light (blanc), dark (marine), muted (fond de page), accent (Lagon, texte marine).
 * Ni bordure ni ombre (réservées aux menus déroulants) ; survol : le titre passe en Lagon.
 */
@layer components {
  .c-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
    border-radius: var(--r-md);
  }

  .c-card--flush {
    padding: 0;
    overflow: hidden;
  }

  .c-card--light {
    background: var(--c-white);
  }

  /* Marine sur fond clair ; sur une section sombre, marine clair pour se détacher */
  .c-card--dark {
    background: var(--c-navy);
  }

  [data-tone="dark"] .c-card--dark {
    background: var(--c-navy-700);
  }

  /* Fond de page : carte posée sur une section blanche */
  .c-card--muted {
    background: var(--c-bg);
  }

  /* Lagon : textes en marine (jamais de blanc sur le Lagon) */
  .c-card--accent {
    --tone-heading: var(--c-navy);
    --tone-text: var(--c-navy);
    --tone-kicker: var(--c-navy);
    --tone-muted: var(--c-navy);
    --tone-link: var(--c-navy);
    --tone-link-hover: var(--c-navy);
    --tone-line: var(--c-navy);
    --tone-focus: var(--c-navy);

    background: var(--c-accent);
  }

  .c-card--interactive .c-card__link {
    transition: color var(--t);
  }

  .c-card--interactive:hover .c-card__link {
    color: var(--tone-link-hover);
  }

  /* Lien principal qui rend toute la carte cliquable */
  .c-card__link {
    color: inherit;
    text-decoration: none;

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
    }

    &:focus-visible {
      outline: none;

      &::after {
        outline: 2px solid var(--tone-focus);
        outline-offset: 2px;
      }
    }
  }
}
/*
 * Vignette d'une photo : recadrée en 4/3 (une photo en hauteur garde son haut, les visages d'une photo d'équipe),
 * ou entière dans ses proportions (--entiere, mosaïque de la page Photos). Coins arrondis.
 * Avec une souris, au survol ou au clavier : la photo s'agrandit doucement sous un voile marine, un carré Lagon « + »
 * se pose dans son coin, et le titre et la légende montent dans une fiche marine, en bas de la photo.
 * Écran tactile (pas de survol) : titre et légende toujours visibles, sous la photo, pour ne pas la masquer.
 */
@layer components {
  .c-photo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .c-photo-tile__lien {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    background: var(--c-line);
  }

  .c-photo-tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform var(--t-reveal) var(--ease-reveal);
  }

  .c-photo-tile--entiere {
    & .c-photo-tile__lien {
      aspect-ratio: auto;
    }

    & .c-photo-tile__image {
      height: auto;
    }
  }

  .c-photo-tile__agrandir {
    display: none;
  }

  .c-photo-tile__legende {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    line-height: var(--lh-heading);
  }

  .c-photo-tile__titre {
    color: var(--c-navy);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
  }

  .c-photo-tile__texte {
    color: var(--c-text-3);
    font-size: var(--fs-xs);
  }

  @media (hover: hover) {
    /* Voile marine sur la photo survolée */
    .c-photo-tile__lien::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--overlay-photo-tile);
      opacity: 0;
      transition: opacity var(--t);
    }

    .c-photo-tile__agrandir {
      position: absolute;
      top: var(--sp-3);
      right: var(--sp-3);
      z-index: 1;
      display: grid;
      place-items: center;
      width: var(--sp-10);
      height: var(--sp-10);
      border-radius: var(--r-sm);
      background: var(--c-accent);
      color: var(--c-navy);
      font-size: var(--fs-lg);
      opacity: 0;
      transform: scale(0.6) rotate(-90deg);
      transition: opacity var(--t), transform var(--t-reveal) var(--ease-reveal);
    }

    .c-photo-tile__legende {
      position: absolute;
      inset: auto var(--sp-3) var(--sp-3);
      padding: var(--sp-3) var(--sp-4);
      border-radius: var(--r-sm);
      background: var(--c-navy);
      pointer-events: none;
      opacity: 0;
      transform: translateY(var(--sp-6));
      transition: opacity var(--t), transform var(--t-reveal) var(--ease-reveal);
    }

    .c-photo-tile__titre {
      color: var(--c-white);
      font-size: var(--fs-xs);
      font-stretch: var(--fst-expanded);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-caps);
      text-transform: uppercase;
    }

    .c-photo-tile__texte {
      color: var(--c-on-dark);
    }

    .c-photo-tile:is(:hover, :focus-within) {
      & .c-photo-tile__image {
        transform: scale(1.05);
      }

      & .c-photo-tile__lien::after,
      & .c-photo-tile__agrandir,
      & .c-photo-tile__legende {
        opacity: 1;
        transform: none;
      }
    }
  }

  /* Animations réduites : la fiche et le carré apparaissent sur place */
  @media (prefers-reduced-motion: reduce) {
    .c-photo-tile__image,
    .c-photo-tile__agrandir,
    .c-photo-tile__legende {
      transform: none;
      transition: opacity var(--t);
    }

    .c-photo-tile:is(:hover, :focus-within) .c-photo-tile__image {
      transform: none;
    }
  }
}
/*
 * Filigrane : sur la moitié droite d'une section (l-section--filigrane), derrière son contenu, très atténué et
 * fondu vers la gauche. Dessin au trait turquoise (3 %, plus voilé que sur alblse.fr), cadré sur son bord droit.
 */
@layer components {
  .c-filigrane {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    width: 60%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: 0.03;
    mask-image: linear-gradient(to right, transparent, var(--c-navy) 60%);
    pointer-events: none;
  }
}
/*
 * Carrousel de photos : une photo à la fois dans un cadre arrondi, flèches carrées sur les côtés, pastilles et bouton
 * Pause dessous. La piste défile et s'accroche à chaque photo (scroll-snap), sa barre est masquée. La légende d'une
 * photo (c-carrousel__legende) se pose en bas, sur un voile marine. Les commandes sont masquées (hidden) tant que le
 * contrôleur ne les a pas affichées.
 */
@layer components {
  .c-carrousel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .c-carrousel__cadre {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--c-line);
  }

  .c-carrousel__piste {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .c-carrousel__diapo {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .c-carrousel__lien {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
  }

  .c-carrousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Légende en bas de la photo, sur la partie dense d'un voile marine */
  .c-carrousel__legende {
    position: absolute;
    inset: auto 0 0;
    padding: var(--sp-10) var(--sp-5) var(--sp-4);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-navy-900) 85%, transparent));
    color: var(--c-white);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    pointer-events: none;
  }

  .c-carrousel__fleche {
    position: absolute;
    top: 50%;
    translate: 0 -50%;

    &[hidden] {
      display: none;
    }
  }

  .c-carrousel__fleche--precedent {
    left: var(--sp-3);
  }

  .c-carrousel__fleche--suivant {
    right: var(--sp-3);
  }

  .c-carrousel__commandes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);

    &[hidden] {
      display: none;
    }
  }

  .c-carrousel__pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
  }

  /* Pastille : une zone de 24 px, un point de 8 px qui s'allonge sur la photo affichée */
  .c-carrousel__pastille {
    display: grid;
    place-items: center;
    width: var(--sp-6);
    height: var(--sp-6);
    padding: 0;
    border: 0;
    background: none;

    &::before {
      content: "";
      width: var(--sp-2);
      height: var(--sp-2);
      border-radius: var(--r-pill);
      background: var(--c-line-strong);
      transition: width var(--t-panneau) var(--ease-reveal), background-color var(--t);
    }

    &:hover::before {
      background: var(--c-accent-text);
    }

    &[aria-current="true"]::before {
      width: var(--sp-6);
      background: var(--c-accent-text);
    }
  }

  .c-carrousel__pause[hidden] {
    display: none;
  }

  .c-carrousel__icone-lecture,
  .c-carrousel[data-en-pause] .c-carrousel__icone-pause {
    display: none;
  }

  .c-carrousel[data-en-pause] .c-carrousel__icone-lecture {
    display: block;
  }

  @media (min-width: 768px) {
    .c-carrousel__diapo {
      aspect-ratio: 3 / 2;
    }
  }
}
/*
 * Puce : neutral (fond doux), accent (Lagon), muted (fond de la surface, casse normale), outline (filtre).
 * Capitales en gras sauf muted ; texte marine sur le Lagon.
 */
@layer components {
  .c-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--c-navy);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-caps);
    text-decoration: none;
    text-transform: uppercase;
  }

  .c-chip--neutral {
    background: var(--c-soft);
  }

  .c-chip--accent {
    background: var(--c-accent);
  }

  /* Étiquette d'un programme : fond de la surface (gris sur blanc, marine clair sur marine) */
  .c-chip--muted {
    padding: var(--sp-1) var(--sp-3);
    background: var(--tone-chip);
    color: var(--tone-strong);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    letter-spacing: normal;
    text-transform: none;
  }

  /* Filtre : contour marine ; choisi (aria-current) ou survolé, il se remplit */
  .c-chip--outline {
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-4);
    border: 2px solid var(--tone-heading);
    color: var(--tone-heading);
    font-size: var(--fs-xs);
    transition: background-color var(--t), color var(--t);

    &:is(:hover, [aria-current]) {
      background: var(--tone-heading);
      color: var(--tone-inverse);
    }
  }
}
/* Badge de date : jour et mois en capitales larges ; dark (marine) ou soft (fond doux) */
@layer components {
  .c-date-badge {
    display: inline-flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }

  .c-date-badge--dark {
    background: var(--c-navy);
    color: var(--c-white);
  }

  .c-date-badge--soft {
    background: var(--c-soft);
    color: var(--c-navy);
  }
}
/*
 * Accordéon natif (<details>), en cartes arrondies sur le fond de la surface, l'une sous l'autre : numéro turquoise
 * facultatif, titre en capitales larges, carré +/− à droite. Survol : la carte se teinte. Ouvert : fond turquoise
 * clair, carré turquoise, le texte dessous.
 */
@layer components {
  .c-accordion {
    border-radius: var(--r-md);
    background: var(--tone-chip);
    transition: background-color var(--t);

    & + .c-accordion {
      margin-top: var(--sp-3);
    }

    /* Pendant que la hauteur glisse (contrôleur « accordeon »), le contenu ne déborde pas */
    &[data-anime] {
      overflow: hidden;
    }

    &:hover,
    &[open]:not([data-fermeture]) {
      background: var(--c-soft);
    }
  }

  .c-accordion__summary {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    color: var(--tone-heading);
    font-size: var(--fs-lg);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .c-accordion__numero {
    flex: none;
    color: var(--c-accent-text);
    font-weight: var(--fw-black);
  }

  .c-accordion__title {
    flex: 1;
  }

  .c-accordion__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--sp-10);
    height: var(--sp-10);
    border-radius: var(--r-sm);
    background: var(--c-white);
    color: var(--c-navy);
    font-size: var(--fs-sm);
    transition: background-color var(--t), transform var(--t);
  }

  .c-accordion__summary:hover .c-accordion__icon {
    transform: scale(1.08);
  }

  /* Icône « moins » dès que la fermeture commence (data-fermeture, pendant que la hauteur glisse) */
  .c-accordion__minus,
  .c-accordion[open]:not([data-fermeture]) .c-accordion__plus {
    display: none;
  }

  .c-accordion[open]:not([data-fermeture]) {
    & .c-accordion__minus {
      display: block;
    }

    & .c-accordion__icon {
      background: var(--c-accent);
    }
  }

  .c-accordion__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: 0 var(--sp-5) var(--sp-5);
    color: var(--tone-text);
    font-size: var(--fs-lead);
  }

  /* Le texte s'arrête avant l'icône */
  @media (min-width: 768px) {
    .c-accordion__body {
      padding-right: calc(var(--sp-5) + var(--sp-14));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-accordion__summary:hover .c-accordion__icon {
      transform: none;
    }
  }
}
/*
 * Visionneuse d'images : plein écran sur fond blanc opaque (demande du 2026-10-26), image la plus grande possible
 * (proportions gardées, un fin trait la cerne : une affiche blanche reste lisible sur le fond), sans texte dessous, compteur et boutons en haut, précédent et suivant sur les côtés.
 * Ouverture et fermeture : fondu du fond, l'image grandit (--t-reveal), comme la fenêtre des documents.
 */
@layer components {
  .c-visionneuse {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--sp-4);
    border: 0;
    background: var(--c-white);
    color: var(--c-text-2);
    opacity: 0;
    transition: opacity var(--t-reveal) ease;

    &[open] {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: var(--sp-4);
    }

    /* Fond plein : rien de la page ne transparaît derrière l'image */
    &::backdrop {
      background: var(--c-white);
    }
  }

  /* Visionneuse ouverte : la barre de défilement de la page (sur le fond de html) se fond dans le fond blanc, tout de
     suite (la page, elle, change de fond en douceur). !important : base.html.twig pose en ligne, hors de toute couche,
     le fond marine de l'écran d'attente de la première visite */
  html:has(.c-visionneuse[open]) {
    background-color: var(--c-white) !important;
    transition: none;
  }

  /* Boutons de la barre et flèches : fond doux et icône marine, comme sur une surface claire */
  .c-visionneuse .c-icon-button--ghost {
    background: var(--c-bg);
    color: var(--c-navy);

    &:hover {
      background: var(--c-line);
      color: var(--c-navy);
    }
  }

  .c-visionneuse__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .c-visionneuse__compteur {
    color: var(--c-text-3);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }

  .c-visionneuse__actions {
    display: flex;
    gap: var(--sp-2);
  }

  .c-visionneuse__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }

  .c-visionneuse__image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-menu);
    object-fit: contain;
    transform: scale(0.94);
    transition: transform var(--t-reveal) ease;
  }

  .c-visionneuse__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .c-visionneuse__nav--precedent {
    left: var(--sp-4);
  }

  .c-visionneuse__nav--suivant {
    right: var(--sp-4);
  }

  /* État visible ; départ de l'ouverture avec @starting-style */
  .c-visionneuse[open]:not([data-fermeture]) {
    opacity: 1;

    & .c-visionneuse__image {
      transform: none;
    }
  }

  @starting-style {
    .c-visionneuse[open]:not([data-fermeture]) {
      opacity: 0;

      & .c-visionneuse__image {
        transform: scale(0.94);
      }
    }
  }

  @media (min-width: 768px) {
    .c-visionneuse {
      padding: var(--sp-6) var(--sp-20);
    }

    .c-visionneuse__nav--precedent {
      left: var(--sp-6);
    }

    .c-visionneuse__nav--suivant {
      right: var(--sp-6);
    }
  }
}
/*
 * Visionneuse, zoom (contrôleur zoom) : loupe au survol de l'image ; agrandie (data-zoom), elle se saisit à la main et
 * reste dans son cadre, sous la barre et les flèches ; pendant le glissement (data-zoom-glisse), elle suit le
 * pointeur sans retard.
 */
@layer components {
  .c-visionneuse__figure {
    overflow: hidden;
  }

  .c-visionneuse__image {
    cursor: zoom-in;
  }

  .c-visionneuse[data-zoom] .c-visionneuse__image {
    cursor: grab;
    touch-action: none;
  }

  .c-visionneuse[data-zoom-glisse] .c-visionneuse__image {
    cursor: grabbing;
    transition: none;
  }

  .c-visionneuse__barre,
  .c-visionneuse__nav {
    z-index: 1;
  }

  .c-visionneuse__barre {
    position: relative;
  }
}
/*
 * Champ de formulaire (thème templates/form/champs.html.twig) : libellé, saisie, puis aide et erreur.
 * Style de la maquette : libellé toujours visible au-dessus, saisie de 50 px à coins arrondis sur fond doux ; au focus,
 * bord marine épais et halo Lagon ; rouge réservé aux erreurs, toujours avec un message. Les couleurs suivent le ton
 * de la surface (--tone-champ, --tone-champ-bord, --tone-erreur : base/tones.css). Texte d'au moins 16 px (pas de
 * zoom forcé sur téléphone). Erreur du formulaire entier : encadré en tête.
 * L'erreur d'un champ (une ligne) a sa place réservée sous la saisie, vide sans erreur : en apparaissant,
 * elle ne fait ni grandir le formulaire, ni descendre les champs suivants (demande du 2026-10-18).
 */
@layer components {
  .c-form-field {
    --form-field-erreur-h: calc(var(--fs-sm) * var(--lh-heading) + var(--sp-1));

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-bottom: var(--form-field-erreur-h);
  }

  .c-form-field__label {
    color: var(--tone-strong);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
  }

  /* Champ obligatoire (classe posée par Symfony) : astérisque Lagon, muet pour les lecteurs d'écran (la saisie porte
     l'attribut required) */
  .c-form-field__label.required::after {
    content: ' *' / '';
    color: var(--tone-kicker);
  }

  .c-form-field__aide {
    color: var(--tone-muted);
    font-size: var(--fs-sm);
  }

  .c-form-field__saisie {
    width: 100%;
    min-height: var(--sp-12);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--tone-champ-bord);
    border-radius: var(--r-sm);
    background: var(--tone-champ);
    color: var(--tone-strong);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    transition: border-color var(--t), box-shadow var(--t), background-color var(--t);

    &::placeholder {
      color: var(--tone-muted);
    }

    /* Bord épais sans décaler le texte : l'épaisseur en plus est prise sur la marge intérieure */
    &:focus-visible {
      padding: calc(var(--sp-3) - 1px) calc(var(--sp-4) - 1px);
      border: 2px solid var(--tone-heading);
      outline: none;
      background: var(--c-white);
      box-shadow: 0 0 0 3px var(--c-accent-ring);
    }
  }

  /* Zone de texte : hauteur donnée par l'attribut rows du champ */
  .c-form-field__saisie--texte {
    resize: vertical;
  }

  .c-form-field--erreur .c-form-field__saisie {
    padding: calc(var(--sp-3) - 1px) calc(var(--sp-4) - 1px);
    border: 2px solid var(--tone-erreur);
  }

  /* Une seule ligne, dans la place réservée (un texte trop long serait coupé plutôt que de décaler) */
  .c-form-field__erreur {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    color: var(--tone-erreur);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Erreur du formulaire entier (envoi impossible, limite d'envois, jeton expiré) */
  .c-form-field__alerte {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding: var(--sp-4);
    border-left: 3px solid var(--tone-erreur);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--tone-erreur) 10%, transparent);
    color: var(--tone-strong);
    font-size: var(--fs-md);

    & > .c-icon {
      color: var(--tone-erreur);
    }
  }
}
/*
 * Toast : court message de confirmation en bas de l'écran, par-dessus la page (sous l'en-tête du site).
 * Vert du site, texte blanc (demandes du 2026-10-18 : bleu foncé, il se perdait sur la carte sombre du
 * formulaire) ; --c-teal-strong plutôt que --c-teal : le texte blanc garde un contraste AA. Toute la largeur sur téléphone, en bas à droite à partir de la tablette. Apparition « up »
 * du site (keyframes reveal de base/animations.css) ; sortie en fondu, jouée par le contrôleur « toast ».
 */
@layer components {
  .c-toast {
    --reveal-from: translateY(var(--sp-6));

    position: fixed;
    right: var(--section-x);
    bottom: var(--sp-6);
    left: var(--section-x);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
    border-radius: var(--r-sm);
    background: var(--c-accent-text);
    box-shadow: var(--sh-menu);
    color: var(--c-white);
    font-size: var(--fs-md);
    animation: reveal var(--t-reveal) var(--ease-reveal) both;
  }

  .c-toast__icone {
    color: var(--c-white);
  }

  .c-toast__message {
    flex: 1;
  }

  .c-toast__fermer {
    display: grid;
    place-items: center;
    padding: var(--sp-2);
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    color: var(--c-on-dark-strong);
    cursor: pointer;
    transition: background-color var(--t), color var(--t);

    &:hover {
      background: var(--c-hover-on-dark);
      color: var(--c-white);
    }
  }

  @media (min-width: 768px) {
    .c-toast {
      left: auto;
      max-width: calc(var(--aside) + var(--sp-16));
    }
  }
}
/* Liste cochée : coche en Lagon (#177A7B sur clair, #55C2C3 sur sombre), sans fond, devant chaque élément */
@layer components {
  .c-check-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-check-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  /* Calée sur la première ligne du texte */
  .c-check-list__mark {
    margin-top: calc((1lh - 1.25em) / 2);
    color: var(--tone-kicker);
    stroke-width: 3;
  }

  .c-check-list__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .c-check-list__label {
    color: var(--tone-strong);
  }

  a.c-check-list__label:hover {
    color: var(--tone-link-hover);
  }

  .c-check-list__text {
    color: var(--tone-text);
  }
}
/*
 * En-tête des pages intérieures : photo sous un voile marine (plus sombre que celui du hero), sur-titre en Lagon et
 * H1 en capitales larges ; à droite, une action ou des chiffres clés (Historique).
 * Le SiteHeader transparent se pose par-dessus : la hauteur du SiteHeader
 * (--site-header-h) est ajoutée en haut.
 */
@layer components {
  .c-page-header {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--site-header-h, var(--sp-26)) + var(--sp-12));
    padding-bottom: var(--sp-10);
    background: var(--c-navy);

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--overlay-page);
    }
  }

  .c-page-header__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*
   * Partie de la photo gardée dans le bandeau (champ « Cadrage de la photo » de l'écran Pages) : le haut, plutôt le
   * haut, le milieu, plutôt le bas, le bas.
   */
  .c-page-header__image--upper { object-position: center 25%; }
  .c-page-header__image--lower { object-position: center 75%; }
  .c-page-header__image--top { object-position: center top; }
  .c-page-header__image--bottom { object-position: center bottom; }
  .c-page-header__image--left { object-position: left center; }
  .c-page-header__image--right { object-position: right center; }
  .c-page-header__image--top-right { object-position: right 11%; }

  .c-page-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-8);
  }

  /* Titre long (article) : à la taille d'un titre de section */
  .c-page-header--long .c-section-heading__title {
    font-size: var(--fs-h2);
  }

  @media (min-width: 1025px) {
    .c-page-header {
      padding-top: calc(var(--site-header-h, var(--sp-26)) + var(--sp-20));
      padding-bottom: var(--sp-16);
    }
  }
}
/*
 * Hero de l'accueil : plein écran (100svh), photos du diaporama en fond sous le voile marine (--overlay-hero) ;
 * contenu calé en bas : pastille, grand titre, accroche et boutons, chiffres. Photos, Pause : hero-diaporama.css ;
 * apparition au chargement : hero-apparition.css.
 */
@layer components {
  .c-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    padding-block: calc(var(--site-header-h) + var(--sp-10)) var(--sp-16);
    overflow: hidden;
    background: var(--c-navy);

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--overlay-hero);
    }
  }

  .c-hero__contenu {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
  }

  /* Sur-titre en pastille, point Lagon devant */
  .c-hero__badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--r-pill);
    background: var(--c-ghost-fond);
    color: var(--c-white);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;

    &::before {
      content: '';
      width: var(--sp-2);
      height: var(--sp-2);
      border-radius: var(--r-pill);
      background: var(--c-accent);
    }
  }

  .c-hero__titre {
    font-size: var(--fs-hero);
    line-height: var(--lh-tight);
  }

  /* Une ligne du titre (apparition ligne par ligne : hero-apparition.css) */
  .c-hero__ligne {
    display: block;
  }

  .c-hero__accent {
    color: var(--c-accent);
  }

  .c-hero__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-8);
  }

  .c-hero__texte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    max-width: var(--lecture);
  }

  .c-hero__accroche {
    color: var(--c-on-dark-strong);
    font-size: var(--fs-lead);
  }

  .c-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-8);
  }

  /* Les chiffres s'alignent sur le bord gauche du contenu sur téléphone (le premier filet est retiré) */
  .c-hero .c-chiffres__item:first-child {
    padding-left: 0;
    border-left: 0;
  }
}
/*
 * Hero de l'accueil, diaporama : les photos empilées en fond se suivent en long fondu enchaîné (data-active,
 * contrôleur diaporama, --t-diapo) ; chaque photo arrive un peu agrandie et recule lentement pendant tout son
 * passage, vers un coin différent d'une photo à l'autre (effet Ken Burns), y compris pendant qu'elle s'efface
 * (data-sortante) ; elle s'arrête avec le diaporama (Pause, au clavier), la phrase de la photo affichée en bas à
 * droite. Animations réduites : ni fondu répété ni mouvement (le contrôleur garde la première photo).
 */
@layer components {
  .c-hero__photos {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .c-hero__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity var(--t-diapo) ease-in-out;

    &[data-active] {
      opacity: 1;
    }
  }

  .c-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
  }

  @keyframes hero-zoom {
    from {
      transform: scale(1.14);
    }

    to {
      transform: scale(1);
    }
  }

  /* Point vers lequel la photo recule : un coin différent d'une photo à l'autre */
  .c-hero__photo:nth-child(4n + 1) .c-hero__image { transform-origin: 25% 30%; }
  .c-hero__photo:nth-child(4n + 2) .c-hero__image { transform-origin: 75% 65%; }
  .c-hero__photo:nth-child(4n + 3) .c-hero__image { transform-origin: 70% 25%; }
  .c-hero__photo:nth-child(4n + 4) .c-hero__image { transform-origin: 30% 70%; }

  @media (prefers-reduced-motion: no-preference) {
    .c-hero__photo:is([data-active], [data-sortante]) .c-hero__image {
      animation: hero-zoom calc(var(--hero-intervalle) + var(--t-diapo)) ease-out both;
    }

    .c-hero[data-en-pause] .c-hero__image {
      animation-play-state: paused;
    }
  }

  /* Phrase de la photo affichée, en bas à droite, à gauche du bouton Pause */
  .c-hero__legende {
    position: absolute;
    right: calc(var(--section-x) + var(--tap) + var(--sp-3));
    bottom: var(--sp-4);
    left: var(--section-x);
    color: var(--c-on-dark);
    font-size: var(--fs-xs);
    text-align: right;
  }

  .c-hero__pause {
    position: absolute;
    right: var(--section-x);
    bottom: var(--sp-2);
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--r-sm);
    background: var(--c-ghost-fond);
    color: var(--c-white);

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

  .c-hero__icone-lecture,
  .c-hero[data-en-pause] .c-hero__icone-pause {
    display: none;
  }

  .c-hero[data-en-pause] .c-hero__icone-lecture {
    display: block;
  }
}
/*
 * Hero de l'accueil, apparition au chargement : la photo de fond se pose (fondu depuis le marine, léger dézoom), puis
 * les éléments arrivent l'un après l'autre (--hero-rang × --stagger-hero) : la pastille glisse depuis la gauche,
 * chaque ligne du titre monte derrière un cache, l'accroche, les boutons et les chiffres montent en se précisant
 * (léger flou). Rien ne bouge si le visiteur a demandé de réduire les animations.
 */
@layer components {
  @keyframes hero-fond {
    from {
      opacity: 0;
      transform: scale(1.12);
    }
  }

  @keyframes hero-pastille {
    from {
      opacity: 0;
      transform: translateX(calc(-1 * var(--sp-6)));
    }
  }

  /* La ligne sort d'un cache : rognée par le haut, elle monte jusqu'à sa place */
  @keyframes hero-ligne {
    from {
      clip-path: inset(100% 0 0 0);
      transform: translateY(var(--sp-10));
    }

    to {
      clip-path: inset(0);
      transform: none;
    }
  }

  @keyframes hero-element {
    from {
      opacity: 0;
      filter: blur(var(--sp-1));
      transform: translateY(var(--sp-6));
    }
  }

  /* L'accroche est le plus grand texte visible de l'accueil : Lighthouse en tire le LCP, le moment où la page « est
     là ». Elle ne part donc pas de l'opacité 0 : visible tout de suite, floue et un peu plus bas, elle se précise et
     monte à son rang (sans cela, son fondu faisait passer l'accueil de 96 à 82 sur mobile) */
  @keyframes hero-accroche {
    from {
      filter: blur(var(--sp-1));
      transform: translateY(var(--sp-6));
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .c-hero__photos {
      animation: hero-fond var(--t-hero-fond) var(--ease-reveal) backwards;
    }

    .c-hero__badge,
    .c-hero__ligne,
    .c-hero__accroche,
    .c-hero__actions,
    .c-hero__chiffres {
      /* backwards : chaque élément reste caché pendant son attente, puis garde son état normal */
      animation: hero-element var(--t-hero) var(--ease-reveal) backwards;
      animation-delay: calc(var(--hero-rang) * var(--stagger-hero));
    }

    .c-hero__badge {
      --hero-rang: 2;

      animation-name: hero-pastille;
    }

    .c-hero__ligne {
      --hero-rang: 3;

      animation-name: hero-ligne;
    }

    .c-hero__ligne + .c-hero__ligne {
      --hero-rang: 4;
    }

    .c-hero__accroche {
      --hero-rang: 6;

      animation-name: hero-accroche;
    }

    .c-hero__actions {
      --hero-rang: 7;
    }

    .c-hero__chiffres {
      --hero-rang: 8;
    }
  }
}
/*
 * Prochains rendez-vous (carte marine) : titre de la carte en étiquette turquoise, puis chaque rendez-vous sous un filet
 * clair, date en capitales turquoise, titre en capitales larges, heure, quelques mots, puis le lieu en petit.
 */
@layer components {
  .c-prochains-rdv {
    gap: var(--sp-4);
  }

  /* Titre de la carte : l'étiquette (Chip) porte tout le style, le titre n'est que sa balise ; un peu d'air sous la
     pastille, avant le premier rendez-vous */
  .c-prochains-rdv__entete {
    align-self: flex-start;
    margin-bottom: var(--sp-3);
    font-size: inherit;
    line-height: 1;
  }

  .c-prochains-rdv__liste {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .c-prochains-rdv__element {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-block: var(--sp-4);
    border-top: 1px solid var(--tone-line);

    &:first-child {
      padding-top: 0;
      border-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  .c-prochains-rdv__date {
    color: var(--tone-kicker);
    font-size: var(--fs-xs);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .c-prochains-rdv__meta {
    color: var(--tone-muted);
    font-size: var(--fs-sm);
  }

  .c-prochains-rdv__texte {
    color: var(--tone-text);
    font-size: var(--fs-md);
  }

  /* Lieu : dernière ligne, plus petite que le reste, en turquoise adouci (70 % du turquoise des dates, le reste du gris du
     texte secondaire : 7,5:1 sur le marine) : on le voit, mais il ne rivalise pas avec la date ; son icône suit sa taille
     et sa couleur */
  .c-prochains-rdv__lieu {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: color-mix(in srgb, var(--tone-kicker) 70%, var(--tone-muted));
    font-size: var(--fs-xs);
  }
}
/*
 * Plan Google Maps (PlanGoogle) : le plan intégré à coins arrondis, le lien « Itinéraire » et la note de confidentialité
 * dessous.
 */
@layer components {
  .c-plan {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .c-plan__carte {
    display: block;
    width: 100%;
    height: calc(var(--sp-26) * 3);
    border: 0;
    border-radius: var(--r-md);
    background: var(--c-line);
  }

  .c-plan__pied {
    margin: 0;
  }

  .c-plan__note {
    color: var(--c-text-3);
    font-size: var(--fs-xs);
  }
}
/*
 * En-tête du site : deux éléments distincts, qui ne se transforment jamais l'un en l'autre.
 * - Le haut de page (--haut) : dans la page, posé sur la photo du hero ou de l'en-tête de page (transparent) ou à fond
 *   marine (dark). Il défile avec elle ; rien ne l'anime ni ne le retire.
 * - La barre collée (--collant, site-header-collant.css) : barre blanche réduite fixée en haut de l'écran, qui descend dès
 *   que le haut de page l'a quitté et remonte quand il revient.
 * Menu mobile (bouton et panneau plein écran) : site-header-mobile.css ; menu en ligne sur ordinateur :
 * site-header-desktop.css ; sous-menu : site-header-sousmenu.css.
 */
@layer components {
  :root {
    /* Logo et marges de la barre, avant et après défilement */
    --site-header-logo: var(--sp-14);
    --site-header-logo-reduit: var(--sp-10);
    --site-header-pad: var(--sp-4);
    --site-header-pad-reduit: var(--sp-2);
    /* Hauteur de la barre en haut de page (PageHeader la réserve sous la barre transparente) */
    --site-header-h: calc(var(--site-header-logo) + 2 * var(--site-header-pad) + 1px);
    --site-header-h-reduit: calc(var(--site-header-logo-reduit) + 2 * var(--site-header-pad-reduit) + 1px);
    /* Haut de l'espace visible sous la barre réduite : ancres et éléments collants */
    --sticky-top: calc(var(--site-header-h-reduit) + var(--sp-4));
  }

  /* Les ancres ne passent pas sous la barre fixée */
  html {
    scroll-padding-top: var(--sticky-top);
  }

  .c-site-header {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid transparent;
    color: var(--c-white);
  }

  /* Le haut de page (pas l'exemple du styleguide) : en haut du document, il défile avec la page */
  body > .c-site-header--haut {
    position: absolute;
    inset: 0 0 auto;
  }

  body > .c-site-header--dark ~ main {
    padding-top: var(--site-header-h);
  }

  /* Fond marine dès le départ */
  .c-site-header--dark {
    border-bottom-color: var(--c-navy-line);
    background: var(--c-navy);
  }

  .c-site-header__skip {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 20;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--c-white);
    color: var(--c-navy);
  }

  .c-site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-block: var(--site-header-pad);
  }

  .c-site-header__logo {
    position: relative;
    flex: none;
    /* Pousse le reste de la barre (bouton du menu en mobile) à droite */
    margin-right: auto;
    height: var(--site-header-logo);

    & img {
      width: auto;
      height: 100%;
    }
  }

  /* Le logo bleu n'existe que dans la barre collée (site-header-collant.css) */
  .c-site-header__logo-bleu {
    display: none;
  }

  .c-site-header__contact {
    order: 1;
  }

  .c-site-header__nav {
    order: 2;
  }

  .c-site-header__menu,
  .c-site-header__submenu {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-site-header__menu {
    display: flex;
    flex-direction: column;
  }

  /* Lien du menu (et bouton « Le club ») : capitales ; page en cours en Lagon */
  .c-site-header__link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 0;
    background: none;
    color: var(--c-white);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--t);

    &:is(:hover, [aria-current="page"], [data-active]) {
      color: var(--c-accent);
    }

    & .c-icon {
      color: var(--c-accent);
      transition: transform var(--t);
    }
  }

  .c-site-header__group[data-open] .c-site-header__link .c-icon {
    transform: rotate(180deg);
  }

  .c-site-header__sublink {
    display: block;
    text-decoration: none;
  }
}
/*
 * En-tête du site, menu mobile (jusqu'à 1024 px) : bouton carré, puis panneau marine plein écran qui glisse depuis
 * la droite à l'ouverture et y repart à la fermeture (--t-panneau, --ease-reveal ; état data-open, contrôleur
 * « disclosure »), liens en capitales larges, bouton Contact sous les liens. Sans JavaScript, le menu reste affiché
 * sous la barre. Sur ordinateur : site-header-desktop.css.
 */
@layer components {
  .c-site-header__toggle {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-white);
    font-size: var(--fs-lg);
  }

  /* Contact : dans le panneau, sous les liens, et non dans la barre */
  .c-site-header__contact {
    display: none;
  }

  .c-site-header__item--contact {
    margin-top: var(--sp-8);
  }

  .c-site-header__menu .c-site-header__link {
    width: 100%;
    padding-block: var(--sp-3);
    font-size: var(--fs-xl);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
  }

  .c-site-header__submenu {
    padding: 0 0 var(--sp-3) var(--sp-4);
    border-left: 2px solid var(--c-navy-line);
  }

  .c-site-header__sublink {
    padding-block: var(--sp-2);
    color: var(--c-on-dark);
    font-size: var(--fs-lead);

    &:is(:hover, [aria-current="page"]) {
      color: var(--c-accent);
    }
  }

  .c-site-header__icon-close,
  .c-site-header__nav[data-open] .c-site-header__icon-open {
    display: none;
  }

  .c-site-header__nav[data-open] .c-site-header__icon-close {
    display: block;
  }

  :root:not([data-js]) .c-site-header__toggle {
    display: none;
  }

  /* Panneau plein écran, uniquement quand JavaScript peut l'ouvrir et le fermer */
  :root[data-js] .c-site-header__menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: calc(var(--site-header-h) + var(--sp-6)) var(--section-x) var(--sp-10);
    overflow-y: auto;
    background: var(--c-navy);
    transition: transform var(--t-panneau) var(--ease-reveal), visibility 0s;
  }

  /* Fermé : le panneau repart vers la droite, puis il est masqué (visibility) pour le clavier et les
     lecteurs d'écran, une fois le glissement fini */
  :root[data-js] .c-site-header__nav:not([data-open]) .c-site-header__menu {
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--t-panneau) var(--ease-reveal), visibility 0s var(--t-panneau);
  }
}
/*
 * En-tête du site, à partir de 1025 px : menu en ligne, en capitales, page en cours en Lagon ; bouton Contact au bout.
 * Sous-menu « Le club » : site-header-sousmenu.css.
 */
@layer components {
  @media (min-width: 1025px) {
    :root {
      /* Logo de la hauteur de celui d'alblse.fr */
      --site-header-logo: var(--sp-16);
      --site-header-logo-reduit: var(--sp-12);
      --site-header-pad: var(--sp-6);
      --site-header-pad-reduit: var(--sp-2);
    }

    .c-site-header__bar {
      gap: var(--sp-8);
    }

    .c-site-header__nav {
      order: 0;
      margin-left: auto;
    }

    /* Contact dans la barre, après le menu ; celui du panneau mobile est masqué */
    .c-site-header__contact {
      display: inline-flex;
      order: 0;
    }

    .c-site-header__item--contact,
    .c-site-header__toggle {
      display: none;
    }

    :root[data-js] .c-site-header__menu,
    :root[data-js] .c-site-header__nav:not([data-open]) .c-site-header__menu,
    .c-site-header__menu {
      position: static;
      flex-direction: row;
      align-items: center;
      gap: var(--sp-8);
      width: auto;
      padding: 0;
      overflow: visible;
      visibility: visible;
      background: none;
      transform: none;
      transition: none;
    }

    .c-site-header__item {
      position: relative;
    }

    /* Annule les grands liens du panneau mobile (site-header-mobile.css) */
    .c-site-header__menu .c-site-header__link {
      width: auto;
      min-height: var(--tap);
      padding-block: 0;
      font-size: var(--fs-sm);
      font-stretch: 100%;
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-caps);
    }
  }
}
/*
 * Sous-menu « Le club » de l'en-tête, à partir de 1025 px (en mobile, il est dans le panneau plein écran :
 * site-header-mobile.css). Un panneau marine clair, quel que soit l'état de la barre (transparente ou blanche), à
 * liseré Lagon qui se trace à l'ouverture ; chaque entrée est en capitales larges et, au survol (ou clavier), elle
 * s'éclaire, se décale et montre une flèche. Les entrées arrivent l'une après l'autre. Ouvert au survol du groupe
 * ou par le bouton (data-open) ; fermé, le panneau reste dans la page, invisible, pour s'effacer en douceur.
 */
@layer components {
  @media (min-width: 1025px) {
    .c-site-header__submenu {
      position: absolute;
      top: calc(100% + var(--sp-2));
      left: calc(-1 * var(--sp-6));
      display: block;
      min-width: 300px;
      padding: var(--sp-3) 0;
      overflow: hidden;
      border-radius: var(--r-sm);
      background: var(--c-navy-700);
      box-shadow: var(--sh-menu);
      opacity: 0;
      translate: 0 calc(-1 * var(--sp-2));
      visibility: hidden;
      transition: opacity var(--t-panneau) var(--ease-reveal), translate var(--t-panneau) var(--ease-reveal), visibility 0s linear var(--t-panneau);

      /* Liseré Lagon, tracé de gauche à droite à l'ouverture */
      &::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: var(--sp-1);
        background: var(--c-accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--t-panneau) var(--ease-reveal);
      }

      & li + li {
        border-top: 1px solid var(--c-navy-line);
      }
    }

    /* Le panneau est baissé de quelques pixels sous le bouton : un pont invisible couvre l'écart, pour que le survol
       ne se perde pas en y passant */
    .c-site-header__group:is(:hover, [data-open])::after {
      content: "";
      position: absolute;
      inset: 100% calc(-1 * var(--sp-6)) auto;
      height: var(--sp-2);
    }

    .c-site-header__group:is(:hover, [data-open]) .c-site-header__submenu,
    :root:not([data-js]) .c-site-header__group:focus-within .c-site-header__submenu {
      opacity: 1;
      translate: 0 0;
      visibility: visible;
      transition-delay: 0s;

      &::before {
        transform: none;
        transition-delay: var(--stagger);
      }

      & li {
        animation: sous-menu-entree var(--t-panneau) var(--ease-reveal) both;
        animation-delay: calc(var(--stagger) * var(--rang, 1) * 0.6);
      }
    }

    .c-site-header__submenu li:nth-child(2) { --rang: 2; }
    .c-site-header__submenu li:nth-child(3) { --rang: 3; }
    .c-site-header__submenu li:nth-child(n + 4) { --rang: 4; }

    .c-site-header__submenu .c-site-header__sublink {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      padding: var(--sp-4) var(--sp-6);
      color: var(--c-white);
      font-size: var(--fs-sm);
      font-stretch: var(--fst-expanded);
      font-weight: var(--fw-extrabold);
      letter-spacing: var(--ls-caps);
      text-transform: uppercase;
      white-space: nowrap;
      transition: background-color var(--t), color var(--t), padding var(--t);

      /* Flèche, qui apparaît en glissant au survol */
      &::after {
        content: "→" / "";
        margin-left: auto;
        color: var(--c-accent);
        opacity: 0;
        translate: calc(-1 * var(--sp-3)) 0;
        transition: opacity var(--t), translate var(--t);
      }

      &:is(:hover, :focus-visible, [aria-current="page"]) {
        color: var(--c-accent);
      }

      &:is(:hover, :focus-visible) {
        padding-left: var(--sp-8);
        background: color-mix(in srgb, var(--c-white) 8%, transparent);

        &::after {
          opacity: 1;
          translate: 0 0;
        }
      }
    }

    @keyframes sous-menu-entree {
      from {
        opacity: 0;
        translate: calc(-1 * var(--sp-4)) 0;
      }

      to {
        opacity: 1;
        translate: 0 0;
      }
    }
  }
}
/*
 * Barre collée de l'en-tête, comme sur alblse.fr : barre blanche à l'ombre légère, logo bleu, liens marine, page en
 * cours et survol en turquoise foncé (contraste AA sur blanc), bouton Contact plus petit à contour marine, rempli au
 * survol. Elle est fixée en haut de l'écran, cachée au-dessus de lui ; le contrôleur site-header lui pose data-visible
 * dès que le haut de page (un autre élément, qu'elle ne remplace pas) a quitté l'écran : elle descend en fondu, puis
 * remonte en fondu quand le haut de page revient, la même douceur dans les deux sens. À l'arrivée sur une page, elle se
 * place sans s'animer. Page rechargée déjà défilée (data-instant) : elle est là d'emblée. Menu mobile ouvert :
 * la barre perd son fond blanc et reprend le logo turquoise, pour rester lisible sur le panneau marine.
 */
@layer components {
  .c-site-header--collant {
    /* Focus du ton clair (base/tones.css) : la barre garde data-tone="dark" pour le panneau mobile */
    --tone-focus: var(--c-accent-text);

    background: var(--c-white);
    box-shadow: var(--sh-barre);
    opacity: 0;
    translate: 0 -100%;
    visibility: hidden;
    transition: translate var(--t-panneau) var(--ease-barre), opacity var(--t-panneau) var(--ease-barre), visibility 0s linear var(--t-panneau);
  }

  body > .c-site-header--collant {
    position: fixed;
    inset: 0 0 auto;
    z-index: 11;
  }

  /* « none » et non « 0 » : une barre transformée deviendrait le repère du panneau plein écran qu'elle contient */
  .c-site-header--collant[data-visible] {
    opacity: 1;
    translate: none;
    visibility: visible;
    transition: translate var(--t-panneau) var(--ease-barre), opacity var(--t-panneau) var(--ease-barre), visibility 0s;
  }

  .c-site-header--collant[data-instant] {
    transition: none;
  }

  .c-site-header--collant .c-site-header__bar {
    padding-block: var(--site-header-pad-reduit);
  }

  .c-site-header--collant .c-site-header__logo {
    height: var(--site-header-logo-reduit);
  }

  /* Plus petit dans la barre réduite */
  .c-site-header--collant .c-site-header__contact {
    min-height: var(--sp-8);
    padding: var(--sp-1) var(--sp-3);
    border-color: var(--c-navy);
    background: transparent;
    color: var(--c-navy);
    font-size: var(--fs-2xs);

    &:hover {
      background: var(--c-navy);
      color: var(--c-white);
    }
  }

  .c-site-header--collant:not(:has(.c-site-header__nav[data-open])) {
    & .c-site-header__logo-clair {
      display: none;
    }

    & .c-site-header__logo-bleu {
      display: block;
    }

    & .c-site-header__link {
      color: var(--c-navy);

      &:is(:hover, [aria-current="page"], [data-active]),
      & .c-icon {
        color: var(--c-accent-text);
      }
    }

    & .c-site-header__toggle {
      border-color: var(--c-line-strong);
      color: var(--c-navy);
    }
  }

  /* Panneau mobile ouvert : la barre n'a plus de fond, le panneau marine passe dessous */
  .c-site-header--collant:has(.c-site-header__nav[data-open]) {
    background: none;
    box-shadow: none;
  }

  /* Le panneau du menu mobile démarre sous la barre réduite */
  @media not all and (min-width: 1025px) {
    :root[data-js] .c-site-header--collant .c-site-header__menu {
      padding-top: calc(var(--site-header-h-reduit) + var(--sp-6));
    }
  }
}
/*
 * Pied de page, marine nuit : logo et coordonnées à gauche (icônes Lagon), colonnes de liens à droite (titres en
 * petites capitales Lagon), le sigle en très grand en marine clair, puis la ligne du bas (copyright, liens
 * d'information, connexion).
 */
@layer components {
  .c-site-footer {
    padding: var(--sp-20) 0 var(--sp-8);
    background: var(--c-navy-900);
    font-size: var(--fs-md);
  }

  .c-site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-14);
  }

  .c-site-footer__haut {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-10);
  }

  .c-site-footer__brand {
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 380px;
  }

  .c-site-footer__logo {
    width: calc(var(--sp-26) + var(--sp-4));
    height: auto;
    margin-bottom: var(--sp-1);
  }

  .c-site-footer__address {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    font-style: normal;
  }

  .c-site-footer__coordonnee {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    color: var(--tone-strong);
    text-decoration: none;
    overflow-wrap: anywhere;

    & .c-icon {
      margin-top: calc((1lh - 1.25em) / 2);
      color: var(--c-accent);
    }

    &:is(p) {
      color: var(--tone-text);
    }
  }

  .c-site-footer__colonnes {
    display: grid;
    flex: 2 1 640px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-8);
    min-width: 0;
  }

  .c-site-footer__title {
    margin-bottom: var(--sp-3);
    color: var(--c-accent);
    font-size: var(--fs-2xs);
    font-stretch: 100%;
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-label);
  }

  .c-site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);

    & a {
      color: var(--tone-strong);
      text-decoration: none;
      overflow-wrap: anywhere;

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

  .c-site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .c-site-footer__fonction {
    margin-bottom: var(--sp-1);
    color: var(--tone-muted);
  }

  /* Le sigle en très grand, à peine plus clair que le fond : décoratif, donc dessiné par le CSS (contenu du pseudo-élément,
     hors du texte de la page : l'audit de contraste de Lighthouse n'y voit pas un texte illisible) */
  .c-site-footer__sigle::before {
    content: attr(data-sigle);
  }

  .c-site-footer__sigle {
    color: var(--c-navy-700);
    font-size: clamp(56px, 14vw, 220px);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: 0.8;
    letter-spacing: var(--ls-display);
  }

  .c-site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-navy-line);
    color: var(--tone-muted);
    font-size: var(--fs-xs);

    & a {
      color: inherit;

      &:hover {
        color: var(--c-white);
      }
    }
  }

  .c-site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
  }
}
/* Pagination d'une liste : Précédent et Suivant de part et d'autre de la page en cours */
@layer components {
  .c-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3) var(--sp-8);
    padding-top: var(--sp-4);
  }

  .c-pagination__status {
    color: var(--c-text-3);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;

    & strong {
      color: var(--c-navy);
    }
  }
}
/*
 * Texte mis en forme saisi dans le back-office : paragraphes, listes, sous-titres, liens, citation.
 * Variante article : texte de lecture plus grand et plus aéré, sous-titres h2 et h3 de l'article.
 */
@layer components {
  .c-texte-riche {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    line-height: var(--lh-prose);

    & h2,
    & h3 {
      margin-top: var(--sp-3);
      font-size: var(--fs-lg);
    }

    & ul,
    & ol {
      padding-left: var(--sp-6);
    }

    & blockquote {
      color: var(--c-accent-text);
      font-style: italic;
    }
  }

  .c-texte-riche--article {
    gap: var(--sp-4);
    color: var(--c-text-2);

    & h2 {
      margin-top: var(--sp-4);
      font-size: var(--fs-xl);
    }

    & h3 {
      font-size: var(--fs-lg);
    }
  }
}
/*
 * Carte d'article : full (photo 16:10, badge de date et petite étiquette des catégories posés dessus, titre,
 * extrait de trois lignes au plus, « Lire l'article ») ; survol : article-card-survol.css ; une :
 * article-card-une.css ; compact : article-card-compact.css.
 */
@layer components {
  .c-article-card {
    height: 100%;
    transition: translate var(--t-reveal) var(--ease-reveal), box-shadow var(--t-reveal) var(--ease-reveal);
  }

  /* overflow : la photo, portrait ou paysage, est recadrée au format de la carte */
  .c-article-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--c-soft);
  }

  .c-article-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Catégories en petite étiquette discrète, marine translucide, en bas à gauche de la photo */
  .c-article-card__etiquette {
    position: absolute;
    bottom: var(--sp-3);
    left: var(--sp-3);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-xs);
    background: var(--c-ghost-fond);
    color: var(--c-white);
    line-height: var(--lh-tight);

    & .c-article-card__categories {
      color: inherit;
      font-weight: var(--fw-semibold);
    }
  }

  .c-article-card__badge {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
  }

  .c-article-card__corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
  }

  .c-article-card__meta {
    color: var(--c-text-3);
    font-size: var(--fs-xs);
  }

  .c-article-card__categories {
    color: var(--c-accent-text);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .c-article-card__titre {
    font-size: var(--fs-lg);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    text-wrap: pretty;
  }

  .c-article-card__extrait {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    color: var(--c-text-3);
    font-size: var(--fs-md);
  }

  /* Toujours en bas de la carte : les cartes d'une rangée s'alignent */
  .c-article-card__plus {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: auto;
    padding-top: var(--sp-2);
    color: var(--c-accent-text);
    font-size: var(--fs-xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;

    & .c-icon {
      transition: transform var(--t);
    }
  }


  .c-article-card__date {
    font-size: var(--fs-xs);
  }
}
/*
 * Carte d'article survolée (ou focus dans la carte) : elle monte avec une ombre douce, un carré turquoise fléché se
 * pose dans le coin de la photo, la flèche de « Lire l'article » avance.
 */
@layer components {
  .c-article-card:is(:hover, :focus-within) {
    box-shadow: var(--sh-carte);
    translate: 0 calc(-1 * var(--sp-1));

    & .c-article-card__survol {
      opacity: 1;
      transform: none;
    }

    & .c-article-card__plus .c-icon {
      transform: translateX(var(--sp-1));
    }
  }

  /* Carré turquoise fléché, dans le coin haut droit de la photo survolée */
  .c-article-card__survol {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--sp-10);
    height: var(--sp-10);
    border-radius: var(--r-sm);
    background: var(--c-accent);
    color: var(--c-navy);
    font-size: var(--fs-lg);
    opacity: 0;
    transform: translateX(calc(-1 * var(--sp-2)));
    transition: opacity var(--t), transform var(--t-reveal) var(--ease-reveal);
  }

  @media (prefers-reduced-motion: reduce) {
    .c-article-card:is(:hover, :focus-within) {
      translate: none;

      & .c-article-card__survol {
        transform: none;
      }
    }
  }
}
/*
 * Carte d'article « une » (dernier article, en tête de la page Actualités) : photo à gauche, catégories et date, titre
 * en capitales larges, extrait plus long, bouton turquoise.
 */
@layer components {
  /* Bouton turquoise, sans lien propre : toute la carte est le lien */
  .c-article-card__bouton {
    align-self: flex-start;
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--c-accent);
    color: var(--c-navy);
    font-size: var(--fs-xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    transition: background-color var(--t);
  }

  .c-article-card--une {
    flex-flow: row wrap;
    gap: 0;

    & .c-article-card__media {
      flex: 1 1 380px;
    }

    & .c-article-card__corps {
      flex: 1 1 280px;
      justify-content: center;
      gap: var(--sp-3);
      padding: var(--sp-8);
    }

    & .c-article-card__titre {
      font-size: var(--fs-xl);
      font-stretch: var(--fst-expanded);
      font-weight: var(--fw-black);
      line-height: var(--lh-tight);
      text-transform: uppercase;
    }

    & .c-article-card__extrait {
      color: var(--c-text-2);
      font-size: var(--fs-base);
    }

    &:hover .c-article-card__bouton {
      background: var(--c-accent-hover);
    }
  }
}
/*
 * Carte d'article compacte (colonne des derniers articles, sous un article) : vignette, date, titre ; le titre passe
 * en Lagon au survol.
 */
@layer components {
  .c-article-card--compact {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: auto;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--c-bg);

    & .c-article-card__corps {
      gap: var(--sp-1);
      padding: 0;
    }

    & .c-article-card__titre {
      font-size: var(--fs-sm);
      transition: color var(--t);
    }

    &:hover .c-article-card__titre {
      color: var(--c-accent-text);
    }
  }

  /* Une carte se détache de sa section : grise sur fond blanc (colonne d'un article), blanche sur fond gris */
  .l-section:not(.l-section--white) .c-article-card--compact {
    background: var(--c-white);
  }

  /* Côte à côte dans une grille : toutes à la hauteur de la plus haute, contenu calé en haut */
  .l-grid > * > .c-article-card--compact {
    align-items: flex-start;
    height: 100%;
  }

  .c-article-card__vignette {
    flex: none;
    width: var(--sp-14);
    height: var(--sp-14);
    border-radius: var(--r-sm);
    object-fit: cover;
  }

  .c-article-card--compact .c-article-card__date {
    color: var(--c-text-3);
  }
}
/*
 * Auteur et date d'un article : logo rond, nom, point de séparation, date.
 */
@layer components {
  .c-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-text-3);
    font-size: var(--fs-xs);
  }

  /* Logo du club, plus large que haut : sa hauteur seule est fixée */
  .c-article-meta__logo {
    width: auto;
    height: var(--sp-6);
  }

  .c-article-meta__point {
    width: var(--sp-1);
    height: var(--sp-1);
    border-radius: var(--r-pill);
    background: var(--c-text-3);
  }
}
/*
 * Bloc « qualifié » d'un article : carte grise, photo et légende, puis catégorie du joueur, score
 * décisif, nom et sous-titre, texte. Photo à gauche dès que la carte est assez large.
 */
@layer components {
  .c-qualifie {
    container-type: inline-size;
    padding: var(--sp-5);
    border-radius: var(--r-md);
    background: var(--c-bg);
  }

  .c-qualifie__grille {
    display: grid;
    gap: var(--sp-5);
  }

  .c-qualifie__photo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;

    & a {
      display: block;
      overflow: hidden;
      border-radius: var(--r-sm);
    }

    & img {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      transition: transform var(--t);
    }

    & a:hover img {
      transform: scale(1.03);
    }

    & figcaption {
      color: var(--c-text-3);
      font-size: var(--fs-xs);
    }
  }

  .c-qualifie__corps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .c-qualifie__resultat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }

  .c-qualifie__score-libelle {
    color: var(--c-text-3);
    font-size: var(--fs-xs);
  }

  .c-qualifie__score {
    color: var(--c-navy);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }

  .c-qualifie__nom {
    font-size: var(--fs-lg);
  }

  .c-qualifie__sous-titre {
    color: var(--c-accent-text);
    font-weight: var(--fw-regular);
  }

  .c-qualifie__texte {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
  }

  @container (min-width: 560px) {
    .c-qualifie--photo .c-qualifie__grille {
      grid-template-columns: calc(var(--aside) - var(--sp-20)) minmax(0, 1fr);
      gap: var(--sp-6);
    }
  }
}
/*
 * Citation : encadré sombre, sur-titre bleu ciel, texte clair en grand.
 */
@layer components {
  .c-quote {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-8);
    border-radius: var(--r-md);
    background: var(--c-navy);
  }

  .c-quote__texte {
    margin: 0;
    color: var(--c-white);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);

    /* Gras et liens suivent le ton sombre de l'encadré (base/tones.css) */
    & .c-texte-riche {
      line-height: inherit;
    }
  }
}
/*
 * Partage sur les réseaux : libellé, puis boutons ronds (un par réseau, et l'email).
 */
@layer components {
  .c-share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
  }

  .c-share-bar__label {
    color: var(--c-text-3);
    font-size: var(--fs-xs);
  }

  .c-share-bar__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
}
/*
 * Info du club (encart blanc de l'accueil) : titre à gauche, dans le style de ceux des rendez-vous (u-titre-carte), image entière (un tableau de résultats se lit
 * jusqu'au bord), texte, lien fléché en bas.
 * Texte long replié (contrôleur replie) : quatre lignes, puis un fondu, et « Lire la suite ».
 */
@layer components {
  .c-info-card {
    gap: var(--sp-3);
  }

  /* Titre en haut à gauche, même quand le reste de la carte est centré (accueil) */
  .c-info-card__title {
    align-self: flex-start;
    text-align: start;
  }

  /* Image entière, sans dépasser la hauteur d'un logo raisonnable (elle s'ouvre en grand au clic) ; une image haute
     (tableau, affiche : --haute) prend la largeur de la carte, recadrée sur son haut */
  .c-info-card__image {
    display: block;
    align-self: flex-start;
    overflow: hidden;
    border-radius: var(--r-sm);

    & img {
      width: auto;
      max-width: 100%;
      max-height: calc(2 * var(--sp-20));
    }
  }

  .c-info-card__image--haute {
    align-self: stretch;

    & img {
      width: 100%;
      max-height: none;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      object-position: top;
    }
  }

  .c-info-card__text {
    color: var(--tone-strong);

    & strong {
      color: var(--tone-strong);
    }
  }

  .c-info-card__action {
    margin-top: auto;
  }

  .c-info-card[data-replie]:not([data-deplie]) .c-info-card__text:not([data-anime]) {
    max-block-size: 4lh;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, var(--c-white) calc(100% - 1lh), transparent);
  }

  /* Pendant le mouvement : la hauteur animée, sans limite ni fondu */
  .c-info-card__text[data-anime] {
    overflow: hidden;
  }

  .c-info-card__suite {
    align-self: flex-start;

    & .c-button__icone {
      transition: rotate var(--t) var(--ease-reveal);
    }

    .c-info-card[data-deplie] & .c-button__icone {
      rotate: 180deg;
    }
  }
}
/*
 * Membre du bureau, carte « équipe » : portrait à gauche (3/4, sans disque) sur un fond doux, ses initiales en grand
 * sans photo ; à droite, fonction en pastille, nom, téléphone et e-mail en clair. Compacte : les portraits d'origine
 * font 400 px de large au plus, ils ne sont jamais agrandis. Cartes de même hauteur dans une grille.
 * Survol (ou focus dans la carte) : la carte monte avec une ombre douce, le portrait s'approche, un filet turquoise
 * se trace au pied de la carte.
 * signature : carte marine du mot du président, portrait en haut (4/5, le format de sa photo), sans coordonnées.
 */
@layer components {
  .c-personne-card {
    height: 100%;
    gap: 0;
    transition: translate var(--t-reveal) var(--ease-reveal), box-shadow var(--t-reveal) var(--ease-reveal);

    /* Filet turquoise au pied de la carte, tracé au survol */
    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: var(--sp-1);
      background: var(--c-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--t-reveal) var(--ease-reveal);
    }
  }

  .c-personne-card--equipe {
    flex-direction: row;
  }

  .c-personne-card__cadre {
    position: relative;
    overflow: hidden;
    background: var(--c-soft);
  }

  .c-personne-card--equipe .c-personne-card__cadre {
    flex: 0 0 40%;
    aspect-ratio: 3 / 4;
  }

  .c-personne-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform-origin: center bottom;
    transition: transform var(--t-reveal) var(--ease-reveal);
  }

  .c-personne-card__initiales {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--c-navy);
    font-size: var(--fs-2xl);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
  }

  .c-personne-card__texte {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sp-2);
    min-width: 0;
    padding: var(--sp-4) var(--sp-5);
  }

  .c-personne-card__role {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--tone-chip);
    color: var(--tone-kicker);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  /* Les mêmes réglages qu'un titre : la carte du président écrit son nom dans un simple paragraphe */
  .c-personne-card__nom {
    color: var(--tone-heading);
    font-size: var(--fs-lead);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    text-wrap: pretty;
  }

  .c-personne-card__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
  }

  /* Icône turquoise, texte lisible ; une adresse longue passe à la ligne plutôt que de déborder */
  .c-personne-card__contact {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sp-2);
    color: var(--tone-strong);
    font-size: var(--fs-md);
    text-decoration: none;
    overflow-wrap: anywhere;

    & .c-icon {
      margin-top: calc((1lh - 1.25em) / 2);
      color: var(--tone-kicker);
    }

    &:hover {
      color: var(--tone-link-hover);
      text-decoration: underline;
    }
  }

  /* Carte du président : portrait en haut, sur le fond de la carte marine, pas plus large que sa photo */
  .c-personne-card--signature {
    max-width: var(--carte-signature);

    & .c-personne-card__cadre {
      aspect-ratio: 4 / 5;
      background: var(--c-navy-700);
    }

    & .c-personne-card__texte {
      align-items: flex-start;
      justify-content: flex-start;
      padding: var(--sp-6);
    }

    & .c-personne-card__nom {
      font-size: var(--fs-xl);
    }
  }

  .c-personne-card:is(:hover, :focus-within) {
    box-shadow: var(--sh-carte);
    translate: 0 calc(-1 * var(--sp-1));

    &::after {
      transform: none;
    }

    & .c-personne-card__photo {
      transform: scale(1.04);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-personne-card:is(:hover, :focus-within) {
      translate: none;
    }

    .c-personne-card:is(:hover, :focus-within) .c-personne-card__photo {
      transform: none;
    }
  }
}
/*
 * Logos des sponsors et partenaires : un bandeau qui défile sans fin vers la gauche, les bords fondus. La liste est
 * écrite deux fois (la copie est cachée aux lecteurs d'écran) et chaque exemplaire fait au moins la largeur du
 * bandeau : en glissant de leur propre largeur, la boucle est continue. Une case du fond de la surface par logo, de
 * même taille, le logo entier au centre. Durée : --t-logo par logo (au moins six). Logos ternes (en niveaux de gris),
 * en couleur au survol, comme sur alblse.fr ; le défilement ne s'arrête pas à la souris, seulement quand le clavier
 * arrive sur un lien (le logo ne fuit pas sous le focus).
 * Survol (ou focus) d'un logo : la case monte avec une ombre douce et passe au blanc, le logo grossit et reprend ses
 * couleurs, un filet turquoise se trace au pied de la case. Le bandeau a de la marge en haut et en bas (reprise par une
 * marge négative, la mise en page ne change pas) pour que l'ombre ne soit pas coupée.
 * Animations réduites : plus de copie, plus de mouvement, les logos restent en grille centrée.
 */
@layer components {
  .c-partenaire-logos {
    display: flex;
    overflow: clip;
    padding-block: var(--sp-10);
    margin-block: calc(-1 * var(--sp-10));
    mask-image: linear-gradient(to right, transparent, var(--c-navy) 6%, var(--c-navy) 94%, transparent);
  }

  .c-partenaire-logos__liste {
    display: flex;
    flex: none;
    gap: var(--sp-3);
    min-width: 100%;
    margin: 0;
    padding: 0 var(--sp-3) 0 0;
    list-style: none;
    animation: defilement-logos calc(max(var(--logos), 6) * var(--t-logo)) linear infinite;
  }

  .c-partenaire-logos:has(:focus-visible) .c-partenaire-logos__liste {
    animation-play-state: paused;
  }

  .c-partenaire-logos__case {
    position: relative;
    display: grid;
    flex: 1 0 calc(var(--sp-26) * 2);
    height: var(--sp-26);
    padding: var(--sp-4);
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--tone-chip);
    transition: translate var(--t-panneau) var(--ease-reveal), box-shadow var(--t-panneau) var(--ease-reveal),
      background-color var(--t-panneau) var(--ease-reveal);

    /* Filet turquoise au pied de la case, tracé au survol */
    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: var(--sp-1);
      background: var(--c-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--t-panneau) var(--ease-reveal);
    }
  }

  .c-partenaire-logos__case:is(:hover, :focus-within) {
    background: var(--c-white);
    box-shadow: var(--sh-carte);
    translate: 0 calc(-1 * var(--sp-1));

    &::after {
      transform: none;
    }
  }

  .c-partenaire-logos__lien {
    display: grid;
    min-height: 0;
    border-radius: var(--r-sm);
  }

  .c-partenaire-logos__logo {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    filter: grayscale(1);
    transition: filter var(--t-panneau) var(--ease-reveal), transform var(--t-panneau) var(--ease-reveal);
  }

  .c-partenaire-logos__case:is(:hover, :focus-within) .c-partenaire-logos__logo {
    transform: scale(1.08);
    filter: none;
  }

  @keyframes defilement-logos {
    to {
      transform: translateX(-100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-partenaire-logos {
      mask-image: none;
    }

    .c-partenaire-logos__liste {
      flex-wrap: wrap;
      justify-content: center;
      animation: none;
    }

    .c-partenaire-logos__liste[aria-hidden="true"] {
      display: none;
    }

    .c-partenaire-logos__case,
    .c-partenaire-logos__logo {
      transition: none;
    }

    .c-partenaire-logos__case:is(:hover, :focus-within) {
      translate: none;
    }

    .c-partenaire-logos__case:is(:hover, :focus-within) .c-partenaire-logos__logo {
      transform: none;
    }
  }
}
/*
 * Blocs « Titre : texte » d'une section : titre de groupe en capitales larges Lagon ; cartes de même hauteur (titre
 * en capitales larges), ou lignes séparées par un filet (titre à gauche, texte à droite).
 */
@layer components {
  .c-blocs__groupe {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .c-blocs__titre-groupe {
    color: var(--tone-kicker);
    font-size: var(--fs-xl);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    text-transform: uppercase;
  }

  .c-blocs__carte {
    gap: var(--sp-3);
    height: 100%;
  }

  .c-blocs__titre {
    font-size: var(--fs-lead);
  }

  /* Nous rejoindre : blocs seuls, sans groupe, titres en capitales larges */
  .c-blocs__groupe:not(:has(.c-blocs__titre-groupe)) .c-blocs__titre {
    font-size: var(--fs-xl);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    text-transform: uppercase;
  }

  .c-blocs__lignes {
    margin: 0;
    border-bottom: 1px solid var(--tone-line);
  }

  /* Titre au-dessus du texte sur téléphone, à gauche à partir de la tablette */
  .c-blocs__ligne {
    display: grid;
    gap: var(--sp-2) var(--sp-6);
    padding-block: var(--sp-4);
    border-top: 1px solid var(--tone-line);
  }

  .c-blocs__libelle {
    color: var(--tone-heading);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-extrabold);
    text-transform: uppercase;
  }

  .c-blocs__texte {
    margin: 0;
    color: var(--tone-text);
  }

  @media (min-width: 768px) {
    .c-blocs__ligne {
      grid-template-columns: var(--sidebar) minmax(0, 1fr);
    }

    .c-blocs__texte {
      grid-column: 2;
    }
  }
}
/*
 * Frise de l'historique : un trait vertical à gauche, une puce par étape (Lagon pour un titre). L'année et le type à
 * gauche de la carte sur ordinateur, au-dessus sur téléphone. Dans la carte, la photo à gauche du texte dès la
 * tablette et sur toute la hauteur de la carte (jamais de blanc dessous), cadrée sur le haut par défaut pour garder les têtes ;
 * sur téléphone, au-dessus du texte, en 3/2. Animations : frise-animation.css.
 */
@layer components {
  .c-frise {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 0 0 var(--sp-2);
    padding: 0;
    border-left: 2px solid var(--c-line-strong);
    list-style: none;
  }

  .c-frise__etape {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-12);
    padding: 0 0 var(--sp-14) clamp(var(--sp-6), 4vw, var(--sp-14));

    &:last-child {
      padding-bottom: 0;
    }
  }

  /* Centrée sur le trait de 2 px ; son bord a la couleur du fond de la section */
  .c-frise__puce {
    position: absolute;
    top: var(--sp-3);
    left: calc(-1 * (var(--sp-5) / 2 + 1px));
    width: var(--sp-5);
    height: var(--sp-5);
    border: var(--sp-1) solid var(--c-bg);
    border-radius: var(--r-pill);
    background: var(--c-navy);

    .c-frise__etape--titre & {
      background: var(--c-accent);
    }
  }

  .c-frise__reperes {
    display: flex;
    flex: 0 0 260px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    max-width: 100%;
  }

  .c-frise__annee {
    color: var(--tone-heading);
    font-size: var(--fs-h2);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
  }

  .c-frise__article {
    position: relative;
    display: grid;
    flex: 1 1 520px;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--c-white);
  }

  /* La photo est posée dans son cadre : elle n'en fixe jamais la taille, le cadre suit la hauteur du texte */
  .c-frise__cadre {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--c-soft);
  }

  .c-frise__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* Cadrage choisi dans le back-office (le haut est celui d'origine) */
  .c-frise__photo--upper { object-position: center 25%; }
  .c-frise__photo--center { object-position: center; }
  .c-frise__photo--lower { object-position: center 75%; }
  .c-frise__photo--bottom { object-position: center bottom; }

  /* Le côté gauche ou le côté droit : la photo est rognée de l'autre côté sur près d'un quart de sa largeur (la bande
     blanche des photos de 1989 et 1993 en fait 21 à 22 %), en gardant son haut */
  .c-frise__photo--left,
  .c-frise__photo--right {
    width: 130%;
    max-width: none;
  }

  .c-frise__photo--left {
    object-position: left top;
  }

  .c-frise__photo--right {
    inset: 0 0 0 auto;
    object-position: right top;
  }

  .c-frise__texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-6);
  }

  .c-frise__titre {
    font-size: var(--fs-xl);
  }

  @media (min-width: 768px) {
    .c-frise__article--photo {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .c-frise__cadre {
      aspect-ratio: auto;
      min-height: calc(var(--sp-26) * 2);
    }
  }
}
/*
 * Trait et puces de la frise (composant Frise, contrôleur frise) : le trait se colore à mesure qu'on descend
 * (--frise-progression, posée par le contrôleur, jusqu'à son repère) et chaque puce se remplit, avec une onde, quand le
 * trait l'atteint (data-atteinte). Sans JavaScript : trait gris, puces pleines. Animations réduites : tout est atteint,
 * rien ne bouge (le contrôleur et base/animations.css). La construction des étapes est dans frise-animation.css.
 */
@layer components {
  /* Trait coloré, de haut en bas jusqu'au repère du contrôleur */
  .c-frise::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 2px;
    height: var(--frise-progression, 0px);
    background: var(--c-accent);
  }

  /* Puces : grises et petites tant que le trait ne les a pas atteintes (sans JavaScript, toutes pleines) */
  .c-frise__puce::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--sp-1));
    border: 2px solid var(--c-accent);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
  }

  :root[data-js] .c-frise__puce {
    background: var(--c-line-strong);
    scale: 0.7;
    transition: background-color var(--t-panneau) var(--ease-reveal), scale var(--t-reveal) var(--ease-pop);
  }

  :root[data-js] .c-frise__etape[data-atteinte] .c-frise__puce {
    background: var(--c-navy);
    scale: 1;

    &::after {
      animation: frise-onde calc(var(--t-reveal) * 2) var(--ease-reveal) both;
    }
  }

  :root[data-js] .c-frise__etape--titre[data-atteinte] .c-frise__puce {
    background: var(--c-accent);
    scale: 1.25;
  }

  @keyframes frise-onde {
    from {
      opacity: 0.8;
      scale: 1;
    }

    to {
      opacity: 0;
      scale: 3;
    }
  }
}
/*
 * Construction des étapes de la frise (composant Frise), propre à une timeline : l'étape ne glisse pas d'un bloc comme
 * le reste du site, elle se construit élément par élément. Le contrôleur frise les libère une à une (data-revelee),
 * quand le haut de l'étape passe au-dessus des sept dixièmes de l'écran et que la précédente a fini : l'année se
 * dévoile de gauche à droite, la carte arrive du côté, sa photo se découvre derrière un rideau puis se pose, le texte
 * monte ligne à ligne. Une étape dure environ 1,2 s (INTERVALLE du
 * contrôleur). Une fois posée, la photo ne bouge plus et n'est pas agrandie : son cadrage est exactement celui choisi
 * dans le back-office.
 * Trait et puces : frise-trait.css ; images clés : frise-keyframes.css. Animations réduites : rien ne bouge
 * (base/animations.css).
 */
@layer components {
  .c-frise {
    --frise-decalage: 0px;
  }

  /* Avec JavaScript, une étape attend son tour : le contrôleur les libère une à une (data-revelee). En attente, ses
     éléments sont en place mais invisibles. Sans JavaScript, tout est visible. */
  :root[data-js] .c-frise__etape:not([data-revelee]) :is(.c-frise__reperes, .c-frise__article) {
    opacity: 0;
  }

  .c-frise__texte > :nth-child(2) {
    --rang: 1;
  }

  .c-frise__etape[data-revelee] {
    & .c-frise__annee {
      animation: frise-annee var(--t-reveal) var(--ease-reveal) both;
    }

    & .c-chip {
      animation: frise-monte var(--t-reveal) var(--ease-reveal) calc(var(--stagger) * 2) both;
    }

    & .c-frise__article {
      animation: frise-carte calc(var(--t-reveal) * 1.3) var(--ease-reveal) var(--stagger) both;
    }

    & .c-frise__cadre {
      animation: frise-rideau calc(var(--t-reveal) * 1.3) var(--ease-reveal) calc(var(--stagger) * 2) both;
    }

    & .c-frise__photo {
      animation: frise-pose calc(var(--t-reveal) * 1.6) var(--ease-reveal) calc(var(--stagger) * 2) both;
    }

    & .c-frise__texte > * {
      animation: frise-monte calc(var(--t-reveal) * 0.8) var(--ease-reveal) calc(var(--stagger) * (3 + var(--rang, 0))) both;
    }
  }

  @media (min-width: 768px) {
    .c-frise {
      --frise-decalage: var(--section-x);
    }
  }

  /* Étape déjà sortie de l'écran avant d'avoir joué (défilement rapide) : affichée d'un coup */
  .c-frise__etape[data-immediat] :is(.c-frise__annee, .c-chip, .c-frise__article, .c-frise__cadre, .c-frise__photo, .c-frise__texte > *) {
    animation: none;
  }
}
/*
 * Images clés des animations de la frise (utilisées par frise-animation.css) : année dévoilée, éléments qui montent,
 * carte qui arrive du côté (la largeur de la gouttière sur ordinateur, pour ne jamais élargir la page), rideau de la
 * photo, pose de la photo (qui finit à sa taille exacte).
 */
@layer components {
  @keyframes frise-annee {
    from {
      clip-path: inset(0 100% 0 0);
      translate: calc(-1 * var(--sp-6)) 0;
    }

    to {
      clip-path: inset(-0.2em);
      translate: 0 0;
    }
  }

  @keyframes frise-monte {
    from {
      opacity: 0;
      translate: 0 var(--sp-4);
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  /* La carte arrive du côté (la largeur de la gouttière, pour ne jamais élargir la page) sur ordinateur */
  @keyframes frise-carte {
    from {
      opacity: 0;
      translate: var(--frise-decalage) var(--sp-8);
      scale: 0.96;
    }

    to {
      opacity: 1;
      translate: 0 0;
      scale: 1;
    }
  }

  /* Se termine en débordant du cadre (qui coupe déjà ce qui dépasse) : une découpe pile sur le bord laisse, sur écran haute
     définition, un filet clair autour de la photo */
  @keyframes frise-rideau {
    from {
      clip-path: inset(0 100% 0 0);
    }

    to {
      clip-path: inset(-0.25em);
    }
  }

  /* La photo se pose : elle arrive agrandie et revient à sa taille exacte (aucun rognage une fois posée) */
  @keyframes frise-pose {
    from {
      scale: 1.3;
    }

    to {
      scale: 1;
    }
  }

}
/*
 * Activité du club, carte marine : photo en fond sous un voile marine (léger au milieu, dense en bas où sont le titre
 * et les détails),
 * pictogramme dans un carré turquoise, période en capitales turquoise à droite, titre en capitales larges, détails sur
 * deux colonnes sous un filet, programme en étiquettes. Survol (ou focus dans la carte) : la carte monte avec une
 * ombre douce, la photo s'éclaire et s'approche un peu sous le même voile, le pictogramme pivote. Dans une grille,
 * toutes les cartes ont la même hauteur.
 */
@layer components {
  .c-activite-card {
    isolation: isolate;
    overflow: hidden;
    gap: var(--sp-5);
    height: 100%;
    padding: var(--sp-8) var(--sp-6);
    transition: translate var(--t-reveal) var(--ease-reveal), box-shadow var(--t-reveal) var(--ease-reveal);
  }

  /* Avec photo : le titre et les détails en bas, sur la partie dense du voile ; pictogramme et période en haut */
  .c-activite-card--photo {
    justify-content: flex-end;
    min-height: calc(var(--sp-26) * 4);

    & .c-activite-card__haut {
      margin-bottom: auto;
    }

    /* Période lisible sur une photo claire : dans une pastille marine */
    & .c-activite-card__periode {
      padding: var(--sp-1) var(--sp-3);
      border-radius: var(--r-pill);
      background: var(--c-ghost-fond);
    }

    /* Voile marine sur la photo ; sa teinte turquoise apparaît au survol */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--overlay-activite);
    }
  }

  .c-activite-card__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-reveal) var(--ease-reveal), filter var(--t-reveal) var(--ease-reveal);
  }

  .c-activite-card__haut {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .c-activite-card__pictogramme {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--sp-12);
    height: var(--sp-12);
    border-radius: var(--r-sm);
    background: var(--c-accent);
    color: var(--c-navy);
    font-size: var(--fs-lg);
    transition: transform var(--t-reveal) var(--ease-reveal);
  }

  .c-activite-card__periode {
    margin-left: auto;
    text-align: right;
    color: var(--tone-kicker);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .c-activite-card__titre {
    font-size: var(--fs-xl);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    text-transform: uppercase;
  }

  .c-activite-card__details {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-4);
    margin: 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--tone-line);
    font-size: var(--fs-md);
  }

  .c-activite-card__libelle {
    color: var(--tone-muted);
  }

  .c-activite-card__valeur {
    margin: 0;
    color: var(--tone-strong);
    font-weight: var(--fw-bold);
  }

  .c-activite-card__programme {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .c-activite-card:is(:hover, :focus-within) {
    box-shadow: var(--sh-carte);
    translate: 0 calc(-1 * var(--sp-1));

    & .c-activite-card__photo {
      filter: brightness(1.25) saturate(1.1);
      transform: scale(1.04);
    }

    & .c-activite-card__pictogramme {
      transform: rotate(-8deg) scale(1.1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-activite-card:is(:hover, :focus-within) {
      translate: none;
    }

    .c-activite-card:is(:hover, :focus-within) :is(.c-activite-card__photo, .c-activite-card__pictogramme) {
      transform: none;
    }
  }
}
/*
 * Chiffres clés : intitulé en petites capitales, valeur en capitales larges dessous.
 * separe : chiffres côte à côte, un filet clair à gauche de chacun (sur photo ou marine) ;
 * regle : un trait de la couleur des titres au-dessus, chiffres en colonnes (boulodrome).
 */
@layer components {
  .c-chiffres {
    margin: 0;
  }

  .c-chiffres__libelle {
    color: var(--tone-text);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .c-chiffres__valeur {
    margin: var(--sp-1) 0 0;
    color: var(--tone-heading);
    font-size: var(--fs-2xl);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
  }

  /* Valeur en toutes lettres : en capitales larges, mais à la taille d'un titre de carte */
  .c-chiffres__valeur--texte {
    font-size: var(--fs-lg);
    line-height: var(--lh-heading);
    text-transform: uppercase;
  }

  .c-chiffres--separe {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--sp-4);

    & .c-chiffres__item {
      padding-inline: var(--sp-6);
      border-left: 1px solid var(--c-line-on-dark);
    }
  }

  .c-chiffres--regle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    border-top: 2px solid var(--tone-heading);

    & .c-chiffres__item {
      padding: var(--sp-5) var(--sp-5) 0 0;
    }

    & .c-chiffres__libelle {
      color: var(--tone-muted);
      font-weight: var(--fw-extrabold);
    }
  }
}
/*
 * Carte de formule : nom en petites capitales et étiquette sur une ligne, prix en capitales larges, avantages
 * cochés, bouton en bas (les cartes d'une rangée alignent leurs boutons).
 */
@layer components {
  .c-pricing-card {
    gap: var(--sp-5);
    height: 100%;
    padding: var(--sp-8);
  }

  .c-pricing-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
  }

  .c-pricing-card__title {
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .c-pricing-card__prix {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .c-pricing-card__price {
    color: var(--tone-heading);
    font-size: var(--fs-3xl);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
  }

  .c-pricing-card__subtitle {
    color: var(--tone-muted);
    font-size: var(--fs-sm);
  }

  .c-pricing-card__action {
    margin-top: auto;
  }
}

/*
 * Sur-titre : capitales grasses espacées, en Lagon (#177A7B sur clair, #55C2C3 sur sombre).
 * Utilisé par SectionHeading, les cartes et les colonnes du pied de page.
 */
@layer utilities {
  .u-kicker {
    color: var(--tone-kicker);
    font-size: var(--fs-xs);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
  }
}
/*
 * Titre d'un élément de carte : capitales larges et grasses, serrées. Celui de chaque rendez-vous de la carte des
 * prochains rendez-vous et celui de chaque info de l'accueil, qui doivent se ressembler. La couleur vient du ton de
 * la carte (base/typography.css).
 */
@layer utilities {
  .u-titre-carte {
    font-size: var(--fs-lg);
    font-stretch: var(--fst-expanded);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    text-transform: uppercase;
  }
}
/* Masqué à l'écran mais lu par les lecteurs d'écran */
@layer utilities {
  .u-visually-hidden,
  .u-visually-hidden-focusable:not(:focus, :focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}
/* Mot composé jamais coupé à son trait d'union (filtre Twig sans_coupure) */
@layer utilities {
  .u-insecable {
    white-space: nowrap;
  }
}