/* ============ tokens — one committed world: the sea at night ============ */
:root{
  --abyss:#060D14;
  --hull:#0C1822;
  --deep:#122C3E;
  --swell:#1B4560;
  --brass:#C9A362;
  --brass-d:#8E7038;
  --foam:#E9EFF3;
  --mist:#8B9CA9;
  --hair:rgba(var(--fg-rgb),.13);
  --scrim:6,13,20;      /* rgb of the page ground, for image gradients */
  --scrim2:12,24,34;    /* rgb of the raised surface */
  --fg-rgb:233,239,243; /* rgb of the text colour */

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --pad:clamp(1.25rem,5vw,5.5rem);
  --max:78rem;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--abyss); color:var(--foam);
  font-family:var(--body); font-size:1rem; line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }

/* ============ type roles ============ */
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin:0;
}
.eyebrow .sep{ color:var(--brass-d); }
h1,h2,h3,.h-alt{
  font-family:var(--display); font-weight:700;
  font-stretch:112%; letter-spacing:-.015em; line-height:1.03;
  text-wrap:balance; margin:0;
}
h1{ font-size:clamp(2.5rem,6.6vw,5.1rem); }
h2{ font-size:clamp(1.9rem,3.9vw,3.15rem); line-height:1.04; }
h3{ font-size:clamp(1.15rem,1.9vw,1.5rem); font-stretch:106%; letter-spacing:.005em; }
.lede{ font-size:clamp(1.125rem,1.5vw,1.375rem); line-height:1.6; color:var(--foam); }
p{ margin:0; }
.muted{ color:var(--mist); }
.data{ font-family:var(--mono); font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:var(--mist); }

.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.17em; text-transform:uppercase;
  text-decoration:none; color:var(--abyss); background:var(--brass);
  padding:.95em 1.6em; border:1px solid var(--brass);
  transition:background .18s ease,color .18s ease;
}
.btn:hover{ background:transparent; color:var(--brass); }
.btn--ghost{ background:transparent; color:var(--brass); }
.btn--ghost:hover{ background:var(--brass); color:var(--abyss); }
.btn .arw{ transition:transform .18s ease; }
.btn:hover .arw{ transform:translateX(.25em); }


/* ============ jeux de caractères ============ */
:root[data-font="archivo"]{
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
}
:root[data-font="archivo"] body{ font-size:1.0625rem; line-height:1.65; }
:root[data-font="archivo"] h1,:root[data-font="archivo"] h2,
:root[data-font="archivo"] h3{ letter-spacing:-.005em; }

:root[data-font="competition"]{
  --display:"Oswald","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
}
:root[data-font="competition"] h1,:root[data-font="competition"] h2,
:root[data-font="competition"] h3,:root[data-font="competition"] .pull,
:root[data-font="competition"] .quote blockquote{ font-stretch:normal; letter-spacing:.005em; }
:root[data-font="competition"] h1{ font-size:clamp(2.7rem,7vw,5.6rem); }
:root[data-font="competition"] body{ font-size:1.0625rem; line-height:1.62; }

:root[data-font="neutre"]{
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
:root[data-font="neutre"] body{ font-size:1rem; line-height:1.62; }

/* ============ header ============ */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--scrim),.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.top-in{ display:flex; align-items:center; gap:2rem; height:5.9rem; }
.mark{ display:block; text-decoration:none; flex:0 0 auto; }
.mark img{ display:block; height:3.5rem; width:auto; }
.foot .mark img{ height:5rem; }
@media (max-width:560px){ .mark img{ height:2.6rem; } }
.nav{ margin-left:auto; display:flex; align-items:center; gap:1.15rem; }
.nav a{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mist); text-decoration:none; padding-block:.4rem; white-space:nowrap;
  border-bottom:1px solid transparent; transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{ color:var(--foam); border-color:var(--brass); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.social{ display:inline-flex; align-items:center; gap:.9rem; margin-left:.5rem;
  padding-left:1.1rem; border-left:1px solid var(--hair); }
.social a{ display:inline-flex; color:var(--mist); transition:color .18s ease; }
.social a:hover{ color:var(--brass); }
.social svg{ display:block; }
.top .btn{ padding:.7em 1.1em; font-size:.66rem; white-space:nowrap; margin-left:.6rem; }
@media (max-width:1240px){ .top .btn{ display:none; } }
@media (max-width:1000px){ .nav a{ display:none; } .social{ display:inline-flex; border-left:0; padding-left:0; margin-left:auto; } }


/* ============ hero ============ */
.hero{ position:relative; isolation:isolate; }
.hero-img{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-img img{ width:100%; height:100%; object-fit:cover; object-position:62% 62%; }
.hero-img::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.80) 34%, rgba(var(--scrim),.18) 66%, rgba(var(--scrim),.42) 100%),
    linear-gradient(to bottom, rgba(var(--scrim),.55) 0%, rgba(var(--scrim),0) 26%, rgba(var(--scrim),0) 52%, rgba(var(--scrim),.95) 100%);
}
.hero-in{ padding-block:clamp(4.5rem,13vh,9rem) clamp(3rem,8vh,5rem); }
.hero h1{ margin-top:1.6rem; }
.hero h1.motto{ max-width:20ch; }
.hero h1.motto em{ font-style:normal; color:var(--brass); }
.hero .lede{ margin-top:1.9rem; max-width:34ch; }
.hero .cta-row{ margin-top:2.6rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.hero .horizon{ margin-top:.9rem; }

.creed{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  background:rgba(var(--scrim2),.72); backdrop-filter:blur(6px);
}
.creed-in{
  padding-block:1.5rem; display:flex; gap:1rem 2.5rem; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between;
}
.creed p{ font-family:var(--display); font-stretch:106%; font-weight:500;
  font-size:clamp(1rem,1.5vw,1.2rem); letter-spacing:.005em; }
.creed .b{ color:var(--brass); }


/* ============ bande partenaires (haut de page) ============ */
.pstrip{ border-bottom:1px solid var(--hair); }
.pstrip-in{ padding-block:2.1rem 2.3rem; display:flex; align-items:center;
  gap:1.5rem clamp(2rem,4.5vw,4rem); flex-wrap:wrap; }
.pstrip .lab{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin:0; flex:0 0 auto; }
.pstrip .logos{ display:flex; align-items:center; gap:clamp(1.75rem,4vw,3.5rem); flex-wrap:wrap; }
.pstrip .logos a{ display:block; opacity:.92; transition:opacity .2s ease; }
.pstrip .logos a:hover{ opacity:1; }
.pstrip img{ width:auto; display:block; }
.pstrip .l-edc img{ height:4.4rem; }
.pstrip .l-hh img{ height:3.8rem; }
.pstrip .l-julbo img{ height:2rem; }
.pstrip .l-sc img{ height:2.6rem; }
.pstrip .aff{ display:flex; align-items:center; gap:1rem; margin-left:auto;
  padding-left:clamp(1.5rem,3vw,2.5rem); border-left:1px solid var(--hair); }
.pstrip .aff span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mist); }
@media (max-width:860px){
  .pstrip .aff{ margin-left:0; padding-left:0; border-left:0; width:100%; }
  .pstrip .l-edc img{ height:3.6rem; } .pstrip .l-hh img{ height:3.1rem; }
  .pstrip .l-julbo img{ height:1.7rem; } .pstrip .l-sc img{ height:2.2rem; }
}
:root[data-pal="regate"] .pstrip .l-julbo img{ filter:invert(1) brightness(.12); }


/* ============ note d'origine ============ */
.origin{ margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--hair); padding-top:2rem;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
@media (max-width:700px){ .origin{ grid-template-columns:1fr; gap:1rem; } }
.origin .yr{ font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin:0; padding-top:.3rem; white-space:nowrap; }
.origin p.txt{ color:var(--mist); max-width:62ch; }

/* ============ generic section ============ */
section{ padding-block:clamp(4.5rem,9vw,7.5rem); }
.sec-head{ display:flex; flex-direction:column; gap:1.1rem; max-width:52rem; }
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:840px){ .two{ grid-template-columns:1fr; } }
.stack{ display:flex; flex-direction:column; gap:1.35rem; }

.subsec{ margin-top:clamp(3.5rem,7vw,6rem); padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--hair); }
.claim{ font-family:var(--display); font-stretch:106%; font-weight:600;
  font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.35; color:var(--foam);
  border-top:1px solid var(--hair); padding-top:1.35rem; margin-top:.35rem; }
.pull{
  font-family:var(--display); font-stretch:108%; font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.75rem); line-height:1.25; color:var(--brass);
  border-left:2px solid var(--brass-d); padding-left:1.4rem; text-wrap:balance;
}

/* terrains — a range, so it reads as a spread, not a ranking */
.terrains{ display:flex; flex-wrap:wrap; gap:0; margin-top:2.5rem; border-top:1px solid var(--hair); }
.terrain{
  flex:1 1 12rem; padding:1.4rem 1.25rem 1.5rem; border-bottom:1px solid var(--hair);
  border-right:1px solid var(--hair);
}
.terrain:last-child{ border-right:0; }
.terrain .n{ font-family:var(--mono); font-size:.68rem; color:var(--brass-d); letter-spacing:.16em; }
.terrain .t{ font-family:var(--display); font-stretch:104%; font-weight:600; font-size:1.02rem;
  margin-top:.55rem; line-height:1.2; }

/* ============ split image feature ============ */
.feature{ display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; background:var(--hull); }
.feature-img{ position:relative; min-height:26rem; overflow:hidden; }
.feature-img img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; }
.feature-img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(var(--scrim),.25), rgba(var(--scrim),0) 45%, rgba(var(--scrim2),.85) 100%); }
.feature-body{ padding:clamp(2.25rem,4.5vw,4.5rem); display:flex; flex-direction:column; gap:1.5rem; justify-content:center; }
@media (max-width:840px){ .feature{ grid-template-columns:1fr; } .feature-img{ min-height:18rem; } }

/* ============ programmes ============ */
.progs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:3rem;
  background:var(--hair); border:1px solid var(--hair); }
.prog{ background:var(--abyss); display:flex; flex-direction:column; transition:background .2s ease; }
.prog-fig{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--deep); }
.prog-fig img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.prog:hover .prog-fig img{ transform:scale(1.03); }
.prog-fig::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(var(--scrim),.10), rgba(var(--scrim),.62)); }
.prog-body{ padding:clamp(1.5rem,2.4vw,2.1rem); display:flex; flex-direction:column; gap:.85rem; flex:1; }
.prog:hover{ background:var(--hull); }
.prog .data{ color:var(--brass-d); }
.prog h3{ color:var(--foam); }
.prog p{ color:var(--mist); }
@media (max-width:760px){ .progs{ grid-template-columns:1fr; } }

/* ============ flotte ============ */
.boats{ display:flex; flex-direction:column; gap:1px; margin-top:3rem; background:var(--hair); }
.boat{ background:var(--abyss); display:grid; grid-template-columns:22rem minmax(0,1fr); gap:0; align-items:stretch; }
.boat-fig{ position:relative; min-height:15rem; overflow:hidden; background:var(--deep); }
.boat-fig img{ width:100%; height:100%; object-fit:cover; }
.boat-body{ padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; gap:1rem; justify-content:center; }
.boat-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.boat-meta .k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); }
.boat-meta .k b{ color:var(--brass); font-weight:500; }
.boat h3 .cls{ font-family:var(--mono); font-size:.62em; letter-spacing:.06em;
  color:var(--mist); font-weight:400; white-space:nowrap; }
@media (max-width:760px){ .boat{ grid-template-columns:1fr; } }


/* wide quote band */
.quote{ position:relative; isolation:isolate; min-height:22rem; display:grid; place-items:center;
  padding:clamp(3.5rem,7vw,6rem) var(--pad); text-align:center; overflow:hidden; }
.quote img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 48%; }
.quote::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(var(--scrim),.86), rgba(var(--scrim),.62) 45%, rgba(var(--scrim),.90)); }
.quote blockquote{ margin:0; max-width:30ch; font-family:var(--display); font-stretch:110%; font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.12; text-wrap:balance; }
.quote cite{ display:block; margin-top:1.6rem; font-family:var(--mono); font-style:normal;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); }


/* ============ horizon 2026–2028 ============ */
.horizon-grid{ display:flex; flex-wrap:wrap; margin-top:2.75rem;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.race{ flex:1 1 12rem; padding:1.6rem 1.4rem 1.8rem; display:flex; flex-direction:column; gap:.75rem;
  border-right:1px solid var(--hair); }
.race:last-child{ border-right:0; }
.race .yr{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; color:var(--brass); }
.race .nm{ font-family:var(--display); font-stretch:106%; font-weight:600; font-size:1.05rem; line-height:1.22; }
.race .wh{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--mist); margin-top:auto; }
.race--past .yr{ color:var(--mist); }
.race--past .nm{ color:var(--mist); font-weight:500; }


/* ============ galerie par bateau ============ */
.boat-fig{ position:relative; }
.boat-fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s ease; }
.boat-fig img.is-on{ opacity:1; }
.discover{ margin-top:.4rem; }
.discover .lab{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin:0 0 .8rem; }
.thumbs{ display:flex; gap:.55rem; flex-wrap:wrap; }
.thumbs button{ width:5.4rem; height:4rem; padding:0; border:1px solid var(--hair); cursor:pointer;
  background:none; overflow:hidden; opacity:.55; transition:opacity .2s ease, border-color .2s ease; }
.thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumbs button:hover{ opacity:.85; }
.thumbs button[aria-current="true"]{ opacity:1; border-color:var(--brass); }
@media (max-width:760px){ .boat-fig{ min-height:17rem; } .thumbs button{ width:4.6rem; height:3.4rem; } }

/* ============ fonctionnement ============ */
.band{ background:var(--hull); border-block:1px solid var(--hair); }
.contribs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem; }
.contribs li{ list-style:none; font-family:var(--mono); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--foam); border:1px solid var(--hair); padding:.6em .95em; }
.contribs{ padding:0; margin-block:.4rem 0; }
.pillars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem); margin-top:3.25rem; }
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; } }
.palmares{ display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; margin-top:.35rem; }
.palmares span{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--brass); }


/* ============ partenaires ============ */
.partners{ background:var(--hull); border-block:1px solid var(--hair); }
.tierlab{ font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1.1rem; }
.tier{ display:grid; gap:0; background:transparent; border:1px solid var(--hair); }
.tier--two .slot:first-child{ border-right:1px solid var(--hair); }
.slot--julbo img{ max-height:4.8rem; }
.tier--bare{ border:0; }
.tier--one{ grid-template-columns:1fr; }
.tier--two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tier--three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:640px){ .tier--two,.tier--three{ grid-template-columns:1fr; } }
.slot{ background:transparent; display:flex; align-items:center; justify-content:center;
  padding:2.25rem 1.5rem; }
.slot--lg{ min-height:15rem; }
.slot--md{ min-height:12rem; }
.slot--xs{ min-height:8.5rem; }
.slot img{ width:auto; }
.slot--lg img{ max-height:10rem; }
.slot--md img{ max-height:7.5rem; }
.slot--xs img{ max-height:6rem; }
.since{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist); margin:.9rem 0 0; }
.tiers{ display:flex; flex-direction:column; gap:2.75rem; margin-top:2.75rem; }

/* ============ contact ============ */
.talk{ border:1px solid var(--hair); background:var(--abyss); padding:clamp(1.75rem,3vw,2.5rem);
  display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
.talk .btn{ margin-top:.2rem; }
.asks{ margin:2rem 0 0; padding:0; display:flex; flex-direction:column; gap:0; max-width:44rem; }
.asks li{ list-style:none; border-top:1px solid var(--hair); padding:1.05rem 0;
  font-family:var(--display); font-stretch:104%; font-weight:500; font-size:clamp(1.05rem,1.7vw,1.3rem); }
.asks li:last-child{ border-bottom:1px solid var(--hair); }

.foot{ border-top:1px solid var(--hair); background:var(--hull); }
.foot-in{ padding-block:3.25rem 2.5rem; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; }
@media (max-width:760px){ .foot-in{ grid-template-columns:1fr; gap:2rem; } }
.foot .mark{ font-size:1.05rem; }
.foot p{ color:var(--mist); font-size:.95rem; }
.foot h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:0 0 .85rem; font-weight:500; }
.foot ul{ margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.foot li{ list-style:none; }
.foot a{ color:var(--mist); text-decoration:none; font-size:.95rem; }
.foot a:hover{ color:var(--foam); }
.legal{ border-top:1px solid var(--hair); }
.legal-in{ padding-block:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.legal p{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); }
.langsw a{ color:var(--mist); text-decoration:none; padding:.25rem .1rem;
  border-bottom:1px solid transparent; transition:color .18s ease; }
.langsw a:hover{ color:var(--foam); }
.langsw a[aria-current="page"]{ color:var(--brass); }