:root{
    --encre:#101012;
    --papier:#F6F5F2;
    --blanc:#FFFFFF;
    --gris:#5C5C63;
    --trait:#DEDCD6;
    /* Une couleur par discipline, réservée aux marqueurs :
       pastilles, barres de cartes, segments. Le reste reste noir et blanc. */
    --bassin:#1B5FD9;
    --bitume:#E8541E;
    --piste:#1A9E63;
    --max:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--papier); color:var(--encre);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block}
  a{color:inherit}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

  /* ---------- Typo ---------- */
  /* Les titres sont volontairement en bas de casse, comme le wordmark « infinitri ».
     Seuls les eyebrows gardent les capitales : ce sont des étiquettes, pas des titres. */
  h1,h2,h3,.display{font-family:'Archivo',sans-serif; font-weight:800; font-style:italic; letter-spacing:-.02em; line-height:1.02; margin:0; text-transform:lowercase}
  h1{font-size:clamp(44px,7.5vw,86px)}
  /* Acronymes et noms propres : ils échappent à la bas de casse des titres,
     « licence fftri » ou « jérémy bignami » se lisent comme un bug. */
  h1 .caps,h2 .caps,h3 .caps,h3.name{text-transform:none}
  h2{font-size:clamp(30px,4.2vw,46px)}
  h3{font-size:20px; font-style:normal; font-weight:800; letter-spacing:-.01em}
  p{margin:0 0 18px}
  .eyebrow{
    font-family:'Archivo',sans-serif; font-weight:600; font-size:12px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--gris); margin-bottom:14px;
  }
  .lead{font-size:19px; color:#333}
  .muted{color:var(--gris)}

  /* ---------- Élément signature : la barre des 3 segments ---------- */
  .segments{display:flex; gap:3px; height:6px; width:100%}
  .segments i{display:block; height:100%}
  .seg-s{flex:0 0 3%; background:var(--bassin)}
  .seg-b{flex:1 1 78%; background:var(--bitume)}
  .seg-r{flex:0 0 19%; background:var(--piste)}
  .segments.thin{height:4px}
  .rule{margin:0 auto; max-width:var(--max); padding:0 24px}

  /* ---------- Bandeau ---------- */
  .annonce{background:var(--encre); color:#fff; font-size:14px; text-align:center; padding:11px 24px}
  .annonce a{color:#fff; text-underline-offset:4px}

  /* ---------- Header ---------- */
  header{position:sticky; top:0; z-index:50; background:rgba(246,245,242,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--trait)}
  .nav{display:flex; align-items:center; gap:20px; height:74px}
  .logo{display:flex; align-items:center; text-decoration:none}
  .logo .word{height:38px; width:auto}
  nav.links{display:flex; gap:22px; margin-left:auto; font-size:15px; font-weight:500}
  nav.links a{text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap}
  nav.links a:hover{border-color:var(--encre)}
  /* L'onglet courant reste souligné en permanence, sur le site multipage. */
  nav.links a[aria-current="page"]{border-color:var(--encre)}
  .foot-menu a[aria-current="page"]{color:#fff}
  .btn{
    display:inline-block; font-family:'Archivo',sans-serif; font-weight:800; font-size:14px;
    letter-spacing:.02em; text-decoration:none; padding:13px 22px; border:2px solid var(--encre);
    background:var(--encre); color:#fff; transition:.15s ease;
  }
  .btn:hover{background:transparent; color:var(--encre)}
  .btn.ghost{background:transparent; color:var(--encre)}
  .btn.ghost:hover{background:var(--encre); color:#fff}
  /* Sur fond sombre, le bouton plein s'inverse : le noir sur noir ne se voit pas. */
  .btn.light{background:#fff; color:var(--encre); border-color:#fff}
  .btn.light:hover{background:transparent; color:#fff}
  .btn.sm{padding:10px 16px; font-size:13px}
  .burger{display:none; margin-left:auto; background:none; border:0; font-size:26px; cursor:pointer; line-height:1; padding:6px; color:inherit}
  nav.links .btn-mobile{display:none}

  /* ---------- Hero ---------- */
  .hero{position:relative; overflow:hidden; padding:90px 0 70px}
  .hero .mark{
    position:absolute; right:-90px; top:-40px; width:min(560px,55vw); opacity:.07; pointer-events:none;
  }
  .hero-in{position:relative; max-width:820px}
  .hero h1{margin-bottom:20px}
  .hero h1 span{color:var(--bassin)}
  .hero .lead{max-width:640px}
  .baseline{margin:0 0 22px}
  .baseline span{
    display:inline-block; background:var(--encre); color:#fff;
    font-family:'Archivo',sans-serif; font-weight:800; font-style:italic;
    text-transform:uppercase; letter-spacing:.02em; line-height:1;
    font-size:clamp(18px,2.2vw,24px); padding:11px 15px;
  }
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
  .disciplines{display:flex; gap:26px; margin-top:52px; flex-wrap:wrap; font-family:'Archivo',sans-serif; font-weight:800; font-style:italic; font-size:15px; text-transform:uppercase; letter-spacing:.04em}
  .disciplines span{display:flex; align-items:center; gap:9px}
  .dot{width:10px; height:10px; border-radius:50%}
  .dot.bassin{background:var(--bassin)}
  .dot.bitume{background:var(--bitume)}
  .dot.piste{background:var(--piste)}

  /* ---------- Sections ---------- */
  section{padding:76px 0}
  /* Le header sticky mange le haut de la cible d'une ancre : on le compense. */
  section[id],article[id]{scroll-margin-top:92px}
  .white{background:var(--blanc)}
  .grid2{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}

  /* Filtre « graphite » (demande client) : toutes les photos du site passent en noir et
     blanc, avec un contraste très légèrement relevé pour éviter le rendu plat du
     grayscale pur. Les logos n'y sont pas soumis, ils sont déjà monochromes. */
  .shot,.band{filter:grayscale(1) contrast(1.06) brightness(1.02)}

  /* Photos — le cadrage est fait par le CSS, les fichiers gardent le plein format. */
  /* height:auto neutralise l'attribut height du HTML, qui sinon l'emporte
     sur aspect-ratio et rend la photo à sa taille intrinsèque. */
  .shot{width:100%; height:auto; object-fit:cover; background:#E7E5DF}
  .shot.tall{aspect-ratio:3/4}
  .shot.wide{aspect-ratio:16/9}
  /* Photo d'arrivée : recadrée vers le bas pour garder le coureur en entier. */
  .shot.run{object-position:center 70%}
  .shots{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .shots.one{grid-template-columns:1fr}
  .shots.one .shot{aspect-ratio:4/5}
  /* Bande photo : la scène est panoramique, le cadrage vise la ligne des nageurs. */
  .band-wrap{margin:0 auto}
  .band{width:100%; height:auto; aspect-ratio:3/1; object-fit:cover; object-position:center 63%}
  .band.groupe{object-position:center 42%}

  /* Chiffres */
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait)}
  .stat{padding:32px 20px; border-right:1px solid var(--trait)}
  .stat:last-child{border-right:0}
  .stat b{display:block; font-family:'Archivo',sans-serif; font-style:italic; font-weight:800; font-size:44px; line-height:1}
  .stat small{display:block; margin-top:8px; font-size:13.5px; color:var(--gris)}

  /* Cartes */
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:38px}
  .card{background:var(--blanc); border:1px solid var(--trait); display:flex; flex-direction:column}
  .card .body{padding:24px}
  .card h3{margin-bottom:8px}
  .card p{font-size:15px; color:var(--gris); margin-bottom:18px}
  .card .bar{height:5px}
  .bar.bassin{background:var(--bassin)}
  .bar.bitume{background:var(--bitume)}
  .bar.piste{background:var(--piste)}

  /* Pourquoi */
  .why{display:grid; grid-template-columns:repeat(2,1fr); gap:34px 48px; margin-top:40px}
  .why .item{border-top:2px solid var(--encre); padding-top:18px}
  .why .item h3{margin-bottom:8px}
  .why .item p{font-size:15.5px; color:var(--gris); margin:0}

  /* ---------- Pages intérieures ---------- */
  /* En-tête de page : même rôle que le hero de l'accueil, sans le filigrane ni les CTA. */
  .page-hero{padding:64px 0 6px}
  .page-hero h1{font-size:clamp(38px,6vw,68px); margin-bottom:24px}
  .page-hero .lead{max-width:760px}

  /* Bandeau de titre pleine largeur, sur le modèle demandé pour « nos valeurs »,
     « notre bureau » et « soutenir ». */
  .band-title{background:var(--encre); color:#fff; padding:30px 0}
  .band-title h2{font-size:clamp(26px,3.4vw,38px); text-align:center}

  /* Colonne de texte lisible, centrée : pages partenaires et contact. */
  /* .wrap centre son contenu ; sans margin-left:0 la colonne étroite se décalerait
     au milieu de la page, désalignée avec le titre juste au-dessus. */
  .prose{max-width:720px; margin-left:0}
  .prose .lead{margin-bottom:22px}
  .prose-cta{margin-top:32px}
  .center-block{max-width:760px; margin:0 auto 8px; text-align:center}

  /* Trio — valeurs du club et membres du bureau. */
  .trio{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:38px}
  .tri .bar{height:5px; margin-top:14px; width:64px}
  .tri h3{margin:16px 0 4px}
  .tri .role{font-family:'Archivo',sans-serif; font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); margin-bottom:10px}
  .tri p{font-size:15.5px; color:var(--gris)}

  .tri .shot{aspect-ratio:4/5}
  /* Les portraits du bureau sont des verticales 9/16 : le cadrage centré par
     défaut couperait le visage. On remonte le point d'intérêt au cas par cas. */
  .shot.cadre-tiers{object-position:center 28%}
  .shot.cadre-haut{object-position:center 6%}

  /* Liste à puces : la puce reprend le trait des segments. */
  .tlist{list-style:none; padding:0; margin:26px 0 0}
  .tlist li{position:relative; padding-left:28px; margin-bottom:14px; color:var(--gris)}
  .tlist li b{color:var(--encre)}
  .tlist li::before{content:""; position:absolute; left:0; top:.62em; width:14px; height:4px; background:var(--encre)}

  /* Contact : le logo sur fond encre à gauche, les coordonnées à droite. */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch}
  .contact-logo{background:var(--encre); display:flex; align-items:center; justify-content:center; padding:56px 40px}
  .contact-logo img{filter:invert(1); width:min(300px,100%)}
  .contact-card{border:1px solid var(--trait); background:var(--blanc); padding:34px}
  .contact-list{list-style:none; padding:0; margin:24px 0 0}
  .contact-list li{display:flex; align-items:center; gap:14px; margin-bottom:16px}
  .contact-list svg{width:22px; height:22px; flex:0 0 22px; color:var(--gris)}
  .contact-list a{text-underline-offset:4px}
  .contact-card .cta-row{margin-top:26px}

  /* CTA final */
  .final{text-align:center}
  .final h2{margin-bottom:14px}
  .final p{max-width:520px; margin:0 auto 28px}

  /* Footer — trois blocs : action à gauche, logo au centre, menu à droite. */
  footer{background:var(--encre); color:#fff; padding:52px 0 26px}
  .foot{display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center}
  .foot-action{display:flex; flex-direction:column; align-items:flex-start; gap:18px}
  .foot-lockup{display:flex; align-items:center; justify-self:center}
  .foot-lockup img{filter:invert(1)}
  footer img.wordmark{height:52px; width:auto}
  .foot-menu{display:flex; flex-direction:column; align-items:flex-end; gap:11px; font-size:15px}
  footer a{text-decoration:none; color:#C9C9CF}
  footer a:hover{color:#fff}
  .socials{display:flex; gap:10px}
  .socials a{width:40px; height:40px; border:1px solid #35363B; display:flex; align-items:center; justify-content:center; color:#C9C9CF; transition:.15s ease}
  .socials svg{width:20px; height:20px; display:block}
  .socials a:hover{background:#fff; color:var(--encre); border-color:#fff}
  .legal{margin-top:44px; padding-top:20px; border-top:1px solid #2A2B30; font-size:13px; color:#7F8088; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

  a:focus-visible,button:focus-visible{outline:3px solid var(--bassin); outline-offset:3px}

  @media (max-width:900px){
    .grid2{grid-template-columns:1fr; gap:34px}
    .cards{grid-template-columns:1fr}
    /* En 3/1 la bande ne fait plus que 109 px de haut sur un téléphone. */
    .band{aspect-ratio:16/9}
    .why{grid-template-columns:1fr}
    .trio{grid-template-columns:1fr; gap:34px}
    .contact-grid{grid-template-columns:1fr}
    .contact-logo{padding:44px 30px}
    .page-hero{padding:44px 0 4px}
    .stats{grid-template-columns:1fr}
    .stat{border-bottom:1px solid var(--trait)}
    .stat:last-child{border-bottom:0}
    /* Les trois blocs du footer s'empilent, centrés : le logo d'abord. */
    .foot{grid-template-columns:1fr; gap:32px; justify-items:center; text-align:center}
    .foot-lockup{order:-1}
    .foot-action{align-items:center}
    .foot-menu{align-items:center}
    nav.links{display:none}
    .burger{display:block}
    header .btn{display:none}
    section{padding:56px 0}

    /* Menu mobile ouvert */
    header.open nav.links{
      display:flex; flex-direction:column; gap:0;
      position:absolute; top:100%; left:0; right:0;
      background:var(--papier); border-bottom:1px solid var(--trait);
      padding:8px 24px 20px; font-size:17px;
    }
    header.open nav.links a{padding:14px 0; border-bottom:1px solid var(--trait)}
    /* Le filet du menu ouvert écrase le soulignement de l'onglet courant :
       dans ce contexte, la page active se signale par la graisse. */
    header.open nav.links a[aria-current="page"]{font-weight:700}
    header.open nav.links a:hover{border-color:var(--trait)}
    header.open nav.links .btn-mobile{display:block; margin-top:18px; text-align:center; border-bottom:0}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}