/* Cercle nautique du Moulinet : club de voile (fictif) au fond d'une anse de la Rance. Le langage d'une carte
   marine : l'eau profonde presque blanche, le bleu des petits fonds, le jaune des terres et de l'estran, les
   isobathes en traits fins, le magenta des feux et des zones réglementées. La nuit, les couleurs passent en mode
   « passerelle » des cartes électroniques. Barlow Condensed pour les titres et les instruments, Barlow pour le
   texte. Le moment fort : le plan d'eau à l'heure qu'il est, rose du vent, drapeau et marée à la cale. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --fond: #eef2f0;
  --fond-2: #e2e9e7;
  --papier: #fbfcfb;
  --ligne: #cdd8d6;
  --encre: #0f2531;
  --gris: #4a5b62;
  --eau: #d2e5eb;
  --eau-2: #9cc1ce;
  --eau-texte: #1b5a71;
  --estran: #eadba8;
  --estran-2: #cdb76e;
  --marine: #174a74;
  --marine-2: #0d324f;
  --sur-marine: #f3f7fa;
  --magenta: #a1176b;
  --vert: #1d7a46;
  --vert-texte: #11592f;
  --orange: #c8650e;
  --orange-texte: #94490a;
  --rouge: #bd2e27;
  --ph-fond: #d5e1e0;
  --ombre: 0 28px 54px -36px rgba(8, 36, 52, 0.55);

  --kit-bg: var(--fond);
  --kit-surface: var(--papier);
  --kit-fg: var(--encre);
  --kit-line: var(--ligne);
  --kit-accent: var(--marine);
  --muted: var(--gris);
  --kit-radius: 8px;
  --champ-rayon: 6px;
  --pastille-rayon: 6px;
  --pastille-choisie: var(--marine);
  --pastille-choisie-texte: var(--sur-marine);
  --erreur: var(--rouge);

  --titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texte: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gouttiere: clamp(16px, 4vw, 44px);
}
:root[data-theme="dark"] {
  --fond: #0a1317;
  --fond-2: #0f1c21;
  --papier: #112027;
  --ligne: #22373f;
  --encre: #d9e6e9;
  --gris: #95aab1;
  --eau: #133240;
  --eau-2: #2c5a6b;
  --eau-texte: #8fcbe0;
  --estran: #3a3421;
  --estran-2: #6a5c32;
  --marine: #8ec5ec;
  --marine-2: #b8dcf5;
  --sur-marine: #071b29;
  --magenta: #ec8fcb;
  --vert: #6bd197;
  --vert-texte: #7fdba6;
  --orange: #f0a35a;
  --orange-texte: #f4b678;
  --rouge: #f28d82;
  --ph-fond: #15262d;
  --ombre: 0 28px 60px -30px rgba(0, 0, 0, 0.85);
  --erreur-sombre: var(--rouge);
}

/* ---------- Base ---------- */
html {
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.55;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}
a {
  color: inherit;
  text-underline-offset: 3px;
}
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
}
h1 {
  font-size: clamp(2.9rem, 1.9rem + 4.2vw, 5.4rem);
  line-height: 0.95;
}
h2 {
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3.3rem);
}
h3 {
  font-size: 1.45rem;
  line-height: 1.12;
}
[tabindex="-1"]:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--marine);
  outline-offset: 3px;
}
.conteneur {
  width: min(1240px, 100% - 2 * var(--gouttiere));
  margin-inline: auto;
}
.lien {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--marine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.lien:hover {
  text-decoration-thickness: 2px;
}
.aide {
  color: var(--gris);
  font-size: 0.9rem;
}
.section__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 56px;
  align-items: end;
  margin-bottom: clamp(26px, 4vw, 44px);
}
.section__tete p {
  color: var(--gris);
  max-width: 52ch;
}
@media (max-width: 820px) {
  .section__tete {
    grid-template-columns: 1fr;
  }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.btn--plein {
  background: var(--marine);
  color: var(--sur-marine);
}
.btn--plein:hover {
  background: var(--marine-2);
}
.btn--ligne {
  border-color: color-mix(in srgb, var(--encre) 38%, transparent);
  color: var(--encre);
  background: transparent;
}
.btn--ligne:hover {
  border-color: var(--encre);
}
.btn--large {
  min-height: 54px;
  padding: 0 28px;
  font-size: 1.04rem;
}
.btn--bloc {
  width: 100%;
}
.btn--petit {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.9rem;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn.is-attente {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-attente::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--sur-marine);
  border-right-color: transparent;
  animation: tourne 0.8s linear infinite;
}
@keyframes tourne {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.entete.is-compact {
  border-bottom-color: var(--ligne);
}
.entete__in {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 76px;
  transition: min-height 0.3s var(--kit-ease);
}
.entete.is-compact .entete__in {
  min-height: 62px;
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--encre);
}
.marque__signe {
  width: 40px;
  height: 40px;
  flex: none;
}
.marque__hampe {
  stroke: var(--encre);
  stroke-width: 2;
  stroke-linecap: round;
}
.marque__haut {
  fill: var(--marine);
}
.marque__bas {
  fill: var(--magenta);
}
.marque__nom {
  display: grid;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 0.95;
}
.marque__nom small {
  font-family: var(--texte);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gris);
  margin-top: 3px;
}
.nav {
  margin-left: auto;
}
.nav ul {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: 8px 11px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.nav a:hover {
  background: color-mix(in srgb, var(--encre) 7%, transparent);
}
.nav a[aria-current="page"] {
  background: var(--eau);
}
.entete__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.entete__cta {
  min-height: 42px;
}
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--ligne);
  background: var(--papier);
  color: var(--encre);
  cursor: pointer;
  place-items: center;
  align-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--kit-ease);
}
.menu-ouvert .burger span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.menu-ouvert .burger span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}
.menu-mobile {
  border-top: 1px solid var(--ligne);
  padding: 8px var(--gouttiere) 24px;
}
.menu-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.menu-mobile a {
  display: block;
  padding: 11px 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.7rem;
  text-decoration: none;
  border-bottom: 1px solid var(--ligne);
}
@media (max-width: 1120px) {
  .nav {
    display: none;
  }
  .burger {
    display: grid;
  }
  .entete__actions {
    margin-left: auto;
  }
}
@media (max-width: 560px) {
  .entete__cta {
    display: none;
  }
}

/* ---------- Ouverture ---------- */
.ouverture {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 72px) 0 clamp(48px, 7vw, 96px);
  isolation: isolate;
}
.isobathes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.isobathes path {
  fill: none;
  stroke: var(--eau-2);
  stroke-width: 1.2;
  opacity: 0.55;
}
.isobathes .isobathes__forte {
  stroke-width: 1.6;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  opacity: 0.8;
}
.ouverture__in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.ouverture__lieu {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--magenta);
}
.ouverture h1 {
  margin: 0.25em 0 0.4em;
  max-width: 12ch;
}
.ouverture__chapo {
  max-width: 47ch;
  font-size: 1.12rem;
  color: var(--gris);
}
.ouverture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.motion .ouverture__texte > * {
  animation: kit-rise 0.9s var(--kit-ease) backwards;
}
.motion .ouverture__texte > :nth-child(2) {
  animation-delay: 0.08s;
}
.motion .ouverture__texte > :nth-child(3) {
  animation-delay: 0.16s;
}
.motion .ouverture__texte > :nth-child(4) {
  animation-delay: 0.24s;
}
@media (max-width: 960px) {
  .ouverture__in {
    grid-template-columns: 1fr;
  }
}

/* ---------- Le plan d'eau ---------- */
.plan-eau {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 18px;
  box-shadow: var(--ombre);
  scroll-margin-top: 90px;
}
.plan-eau > * {
  transition: opacity 0.7s ease;
}
.motion .plan-eau:not(.is-pret) > :not(.plan-eau__tete) {
  opacity: 0;
}
.motion .plan-eau {
  animation: kit-rise 1s 0.2s var(--kit-ease) backwards;
}
.plan-eau__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.plan-eau__tete h2 {
  font-size: 2rem;
}
.plan-eau__releve {
  color: var(--gris);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.drapeau {
  --c: var(--vert);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 11%, var(--papier));
  transition: background-color 0.6s ease;
}
.drapeau--orange {
  --c: var(--orange);
}
.drapeau--rouge {
  --c: var(--rouge);
}
.drapeau--repos {
  --c: var(--gris);
}
.drapeau__svg {
  width: 34px;
  height: 42px;
  overflow: visible;
}
.drapeau__hampe {
  stroke: var(--encre);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.drapeau__tissu {
  fill: var(--c);
  transition:
    fill 0.6s ease,
    transform 1.2s var(--kit-ease);
}
.drapeau--repos .drapeau__tissu {
  transform: translateY(20px);
}
.drapeau__nom {
  font-family: var(--titre);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--c);
}
.drapeau--orange .drapeau__nom {
  color: var(--orange-texte);
}
.drapeau--repos .drapeau__nom {
  color: var(--encre);
}
.drapeau__phrase {
  font-size: 0.95rem;
}
.plan-eau__vent {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.rose__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.rose__fond {
  fill: var(--eau);
}
.rose__coeur {
  fill: var(--papier);
  stroke: var(--ligne);
}
.rose__ticks {
  stroke: var(--encre);
  stroke-width: 1.2;
  opacity: 0.5;
}
.rose__cardinal {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 600;
  fill: var(--gris);
  text-anchor: middle;
  dominant-baseline: central;
}
.rose__pointe {
  fill: var(--magenta);
}
.rose__queue {
  stroke: var(--magenta);
  stroke-width: 3;
  stroke-linecap: round;
}
.rose__oscille {
  transform-box: view-box;
  transform-origin: 100px 100px;
}
.motion .rose__oscille {
  animation: oscille 4.6s ease-in-out infinite alternate;
}
@keyframes oscille {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(5deg);
  }
}
.rose__vitesse {
  font-family: var(--titre);
  font-size: 46px;
  font-weight: 700;
  fill: var(--encre);
  text-anchor: middle;
  dominant-baseline: central;
}
.rose__unite {
  font-family: var(--texte);
  font-size: 12px;
  fill: var(--gris);
  text-anchor: middle;
}
.mesures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin: 0;
}
.mesures dt {
  font-size: 0.82rem;
  color: var(--gris);
}
.mesures dd {
  margin: 0;
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.25;
}
.mesures dd span {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 700;
}
.maree {
  border-top: 1px solid var(--ligne);
  padding-top: 16px;
}
.maree__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.maree__tete h3 {
  font-size: 1.25rem;
}
.maree__tete p {
  color: var(--eau-texte);
  font-weight: 600;
}
.maree__graphe {
  position: relative;
  margin-top: 10px;
}
.maree__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--estran);
  overflow: hidden;
}
.maree__eau {
  fill: var(--eau-2);
}
.maree__ligne {
  fill: none;
  stroke: var(--eau-texte);
  stroke-width: 2;
}
.maree__seuil {
  stroke: var(--encre);
  stroke-width: 1.4;
  stroke-dasharray: 5 5;
  opacity: 0.7;
}
.maree__grad {
  stroke: var(--encre);
  stroke-width: 1;
  opacity: 0.12;
}
.maree__maintenant path {
  stroke: var(--magenta);
  stroke-width: 2;
}
.maree__maintenant circle {
  fill: var(--magenta);
  stroke: var(--papier);
  stroke-width: 2.5;
}
.maree__heures {
  position: relative;
  height: 20px;
  font-size: 0.78rem;
  color: var(--gris);
  margin-top: 3px;
}
.maree__heures span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.maree__heures span:first-child {
  transform: none;
}
.maree__heures span:last-child {
  transform: translateX(-100%);
}
.maree__cale {
  font-size: 0.92rem;
  color: var(--gris);
  margin-top: 6px;
}
.plan-eau__base {
  font-size: 0.9rem;
  color: var(--gris);
  margin-top: -6px;
}
.plan-eau__base:empty {
  display: none;
}
@media (max-width: 520px) {
  .plan-eau__vent {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .rose {
    width: min(220px, 100%);
  }
  .mesures {
    width: 100%;
  }
}

/* ---------- Heure par heure ---------- */
.heures {
  padding: clamp(56px, 8vw, 110px) 0;
  background: var(--papier);
  border-top: 1px solid var(--ligne);
  scroll-margin-top: 60px;
}
.jours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.jour {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.jour:hover {
  border-color: var(--encre);
}
.jour[aria-selected="true"] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--fond);
}
.heures__cadre {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.heures__grille {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(88px, 1fr);
  gap: 6px;
  min-width: min-content;
}
.heure {
  --c: var(--vert);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  padding: 14px 6px 12px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  text-align: center;
  scroll-snap-align: start;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}
a.heure:hover {
  border-color: var(--eau-2);
  background: color-mix(in srgb, var(--eau) 55%, var(--fond));
}
.heure--orange {
  --c: var(--orange);
}
.heure--rouge {
  --c: var(--rouge);
}
.heure.is-passee {
  opacity: 0.45;
}
.heure__h {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 600;
}
.fleche {
  width: 30px;
  height: 30px;
}
.fleche path {
  fill: none;
  stroke: var(--encre);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heure__vent {
  font-size: 0.8rem;
  color: var(--gris);
  line-height: 1.1;
}
.heure__vent strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--encre);
}
.heure__raf {
  font-size: 0.78rem;
  color: var(--gris);
  margin-top: -4px;
}
.heure__drapeau {
  width: 100%;
  max-width: 64px;
  height: 6px;
  border-radius: 3px;
  background: var(--c);
}
.heure__eau {
  position: relative;
  width: 22px;
  height: 58px;
  border-radius: 4px;
  background: var(--estran);
  overflow: hidden;
}
.heure__niveau {
  position: absolute;
  inset: 0;
  background: var(--eau-2);
  transform-origin: bottom;
  transform: scaleY(0);
}
.heure__seuil {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed var(--encre);
  opacity: 0.75;
}
.heure__m {
  font-size: 0.8rem;
  font-weight: 600;
}
.heure__acces {
  display: grid;
  gap: 2px;
  font-size: 0.76rem;
  justify-items: start;
}
.heure__acces span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
}
.heure__acces .is-oui::before {
  background: var(--vert);
}
.heure__acces .is-non {
  color: var(--gris);
  text-decoration: line-through;
}
.heure__acces .is-non::before {
  border: 1.5px solid var(--gris);
}
.legende {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0;
  margin: 18px 0 0;
  font-size: 0.86rem;
  color: var(--gris);
}
.legende li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legende__drapeau {
  width: 18px;
  height: 6px;
  border-radius: 3px;
}
.legende__drapeau--vert {
  background: var(--vert);
}
.legende__drapeau--orange {
  background: var(--orange);
}
.legende__drapeau--rouge {
  background: var(--rouge);
}
.legende__eau {
  width: 12px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(to top, var(--eau-2) 60%, var(--estran) 60%);
  border-top: 0;
  position: relative;
}
.legende__eau::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 45%;
  border-top: 2px dashed var(--encre);
}

/* ---------- Bande photo ---------- */
.bande .ph {
  aspect-ratio: 21 / 9;
  max-height: 72vh;
  width: 100%;
}
@media (max-width: 700px) {
  .bande .ph {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- La flotte ---------- */
.flotte {
  padding: clamp(60px, 8vw, 110px) 0;
  scroll-margin-top: 60px;
}
.flotte__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ligne);
}
.bateau {
  display: grid;
  grid-template-columns: 220px minmax(0, 1.3fr) minmax(0, 1fr) 210px;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ligne);
  align-items: start;
}
.bateau .ph {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
}
.bateau__texte h3 {
  margin-bottom: 8px;
}
.bateau__texte p {
  color: var(--gris);
}
.bateau__texte .bateau__equipage {
  color: var(--encre);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 10px;
}
.bateau__conditions {
  margin: 0;
  display: grid;
  gap: 8px;
}
.bateau__conditions div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--ligne);
}
.bateau__conditions dt {
  color: var(--gris);
  font-size: 0.9rem;
}
.bateau__conditions dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: right;
}
.bateau__prix {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.bateau__prix strong {
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 600;
}
.bateau__prix .btn {
  margin-top: 8px;
}
.bateau__prochain {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--eau-texte);
  margin-top: 6px;
}
@media (max-width: 1060px) {
  .bateau {
    grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
  }
  .bateau__prix {
    grid-column: 2 / -1;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 4px 18px;
  }
  .bateau__prix .btn,
  .bateau__prix .bateau__prochain {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .bateau {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bateau__prix {
    grid-column: auto;
  }
}

/* ---------- L'école de voile ---------- */
.ecole {
  padding: clamp(60px, 8vw, 110px) 0;
  background: var(--papier);
  border-top: 1px solid var(--ligne);
}
.ecole__groupes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.groupe {
  display: grid;
  gap: 8px;
  align-content: start;
}
.groupe__photo {
  display: block;
  margin-bottom: 8px;
}
.groupe__photo .ph {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}
.groupe__ages {
  color: var(--magenta);
  font-weight: 600;
  font-size: 0.92rem;
}
.groupe h3 a {
  text-decoration: none;
}
.groupe h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.groupe > p:not(.groupe__ages):not(.groupe__prochain) {
  color: var(--gris);
}
.groupe__prochain {
  font-weight: 600;
  font-size: 0.92rem;
  border-top: 1px solid var(--ligne);
  padding-top: 10px;
  margin-top: 6px;
}
.ecole__plus {
  margin-top: 36px;
}
@media (max-width: 860px) {
  .ecole__groupes {
    grid-template-columns: 1fr;
  }
}

/* ---------- Adhérer (accueil) ---------- */
.adherer-court {
  padding: clamp(60px, 8vw, 110px) 0;
  background: var(--eau);
  scroll-margin-top: 60px;
}
.adherer-court__in {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.adherer-court__photo .ph {
  aspect-ratio: 4 / 5;
  max-height: 580px;
  border-radius: 14px;
}
.adherer-court__texte {
  display: grid;
  gap: 16px;
  justify-items: start;
}
.adherer-court__texte > p:first-of-type {
  max-width: 52ch;
}
.formules-court {
  list-style: none;
  width: 100%;
  max-width: 560px;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--encre) 22%, transparent);
}
.formules-court li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 22%, transparent);
}
.formules-court strong {
  font-family: var(--titre);
  font-size: 1.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.adherer-court .aide {
  color: color-mix(in srgb, var(--encre) 78%, var(--eau));
}
@media (max-width: 860px) {
  .adherer-court__in {
    grid-template-columns: 1fr;
  }
  .adherer-court__photo .ph {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- La base ---------- */
.base {
  padding: clamp(60px, 8vw, 110px) 0;
  scroll-margin-top: 60px;
}
.base__in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.carte {
  margin: 0;
  padding: 14px;
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 14px;
}
.carte__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.carte figcaption {
  font-size: 0.82rem;
  color: var(--gris);
  margin-top: 8px;
}
.carte__profond {
  fill: var(--papier);
}
.carte__petitsfonds {
  fill: var(--eau);
}
.carte__terre {
  fill: var(--estran);
  stroke: var(--estran-2);
  stroke-width: 1.5;
}
.carte__vasiere {
  fill: color-mix(in srgb, var(--estran) 55%, var(--eau));
  stroke: var(--estran-2);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.carte__sonde {
  fill: none;
  stroke: var(--eau-2);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}
.carte__zone {
  fill: color-mix(in srgb, var(--magenta) 8%, transparent);
  stroke: var(--magenta);
  stroke-width: 1.6;
  stroke-dasharray: 7 5;
}
.carte__bouee--rouge rect {
  fill: var(--rouge);
}
.carte__bouee--verte path {
  fill: var(--vert);
}
.carte__cale {
  stroke: var(--encre);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.7;
}
.carte__club {
  fill: var(--marine);
}
.carte__hampe {
  stroke: var(--encre);
  stroke-width: 1.5;
}
.carte__guidon {
  fill: var(--magenta);
}
.carte__moulin,
.carte__moulin-ailes {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.6;
}
.carte__nord path {
  stroke: var(--encre);
  stroke-width: 1.6;
}
.carte__nord .carte__nord-pointe {
  fill: var(--encre);
  stroke: none;
}
.carte__nord text {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 600;
  fill: var(--encre);
  text-anchor: middle;
}
.carte__eau {
  font-family: var(--titre);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.24em;
  fill: var(--eau-texte);
  text-anchor: middle;
}
.carte__libelle {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 600;
  fill: var(--encre);
}
.carte__libelle--zone {
  fill: var(--magenta);
}
.carte__libelle--cap {
  fill: var(--gris);
  font-weight: 500;
  text-anchor: middle;
}
.base__infos {
  display: grid;
  gap: 22px;
}
.base__infos .ph {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
}
.base__bloc h3 {
  margin-bottom: 6px;
}
.base__bloc p {
  color: var(--gris);
}
@media (max-width: 900px) {
  .base__in {
    grid-template-columns: 1fr;
  }
}

/* ---------- En-tête des pages ---------- */
.page-tete {
  padding: clamp(36px, 6vw, 76px) 0 clamp(20px, 3vw, 36px);
}
.page-tete h1 {
  font-size: clamp(2.6rem, 1.9rem + 3vw, 4.4rem);
}
.page-tete p {
  max-width: 62ch;
  margin-top: 14px;
  color: var(--gris);
  font-size: 1.06rem;
}

/* ---------- Formulaires en blocs (réserver, adhérer) ---------- */
.reserver,
.adhesion {
  padding-bottom: clamp(60px, 8vw, 110px);
}
.reserver__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.bloc {
  border: 0;
  margin: 0;
  padding: 26px 0 30px;
  border-top: 1px solid var(--ligne);
  min-width: 0;
}
.bloc__titre {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
}
.bloc__titre + * {
  clear: both;
}
.bloc__titre--petit {
  font-size: 1.3rem;
}
.bloc--fenetre {
  padding: 0;
  border: 0;
}
.bloc__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.bloc__label {
  font-weight: 600;
}
.champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.champ--large {
  grid-column: 1 / -1;
}
.champs .champ {
  align-content: start;
}
.champs + .pastilles {
  margin-top: 18px;
}
@media (max-width: 560px) {
  .champs {
    grid-template-columns: 1fr;
  }
}
.case {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  cursor: pointer;
}
.case input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--marine);
  cursor: pointer;
}
.erreur-bloc {
  color: var(--rouge);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 10px;
}
.adherent-note {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--eau);
  font-size: 0.92rem;
}
.choix-bateaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.choix {
  position: relative;
  display: grid;
  align-content: start;
  border: 1.5px solid var(--ligne);
  border-radius: 10px;
  overflow: hidden;
  background: var(--papier);
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}
.choix:hover {
  border-color: var(--eau-2);
}
.choix > input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.choix:has(input:checked) {
  border-color: var(--marine);
  box-shadow: 0 0 0 1.5px var(--marine);
}
.choix:has(input:focus-visible) {
  outline: 2px solid var(--marine);
  outline-offset: 3px;
}
.choix .ph {
  aspect-ratio: 16 / 10;
}
.choix__texte {
  display: grid;
  gap: 2px;
  padding: 10px 12px 12px;
}
.choix__texte strong {
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
}
.choix__texte small {
  color: var(--gris);
  font-size: 0.84rem;
}
.creneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.creneau {
  --c: var(--vert);
  position: relative;
}
.creneau--orange {
  --c: var(--orange);
}
.creneau--rouge {
  --c: var(--rouge);
}
.creneau input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.creneau > span:not(.creneau__drapeau) {
  display: grid;
  gap: 1px;
  padding: 9px 12px 10px;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--papier);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.creneau strong {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
}
.creneau small {
  font-size: 0.78rem;
  color: var(--gris);
}
.creneau__drapeau {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
}
.creneau:hover input:not(:disabled) + span {
  border-color: var(--eau-2);
}
.creneau input:checked + span {
  background: var(--marine);
  border-color: var(--marine);
  color: var(--sur-marine);
}
.creneau input:checked + span small {
  color: inherit;
}
.creneau input:focus-visible + span {
  outline: 2px solid var(--marine);
  outline-offset: 3px;
}
.creneau input:disabled {
  cursor: not-allowed;
}
.creneau input:disabled + span {
  background: var(--fond-2);
  border-style: dashed;
  color: var(--gris);
  cursor: not-allowed;
}
.creneau input:disabled + span small {
  font-weight: 600;
}
.creneau input:disabled ~ .creneau__drapeau {
  opacity: 0.35;
}
.creneaux__vide {
  grid-column: 1 / -1;
  padding: 16px;
  border-radius: 10px;
  background: var(--fond-2);
  color: var(--gris);
}
.erreur-bloc:not([hidden]),
.creneaux__vide {
  animation: kit-fade 0.35s ease-out;
}

/* ---------- Récapitulatif ---------- */
.recap {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  box-shadow: var(--ombre);
}
.recap h2 {
  font-size: 1.9rem;
}
.recap dl {
  margin: 0;
}
.recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ligne);
}
.recap__ligne dt {
  color: var(--gris);
}
.recap__ligne dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.recap__prevu {
  --c: var(--vert);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 10%, var(--papier));
  font-size: 0.9rem;
}
.recap__prevu--orange {
  --c: var(--orange);
}
.recap__prevu--rouge {
  --c: var(--rouge);
}
.recap__prevu .fleche {
  width: 34px;
  height: 34px;
  grid-row: span 2;
}
.recap__prevu strong {
  font-weight: 600;
}
.recap__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.recap__total strong {
  font-family: var(--titre);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
}
.recap__vide {
  color: var(--gris);
}
@media (max-width: 960px) {
  .reserver__in {
    grid-template-columns: 1fr;
  }
  .recap {
    position: static;
  }
}

/* ---------- Confirmation ---------- */
.confirmation {
  padding: 10px 0 clamp(60px, 8vw, 110px);
}
.confirmation__in {
  max-width: 780px;
}
.bon {
  border: 1px solid var(--ligne);
  border-radius: 16px;
  overflow: hidden;
  background: var(--papier);
  box-shadow: var(--ombre);
}
.bon__tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: var(--marine);
  color: var(--sur-marine);
}
.bon__tete h2 {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
}
.bon__ref {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.bon__corps {
  display: grid;
  gap: 16px;
  padding: 22px 26px 26px;
}
.bon__corps > p {
  color: var(--gris);
}
.bon__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.confirmation .carte-membre {
  margin-bottom: 4px;
}

/* ---------- Stages ---------- */
.stages-tete__photo .ph {
  aspect-ratio: 21 / 8;
  min-height: 240px;
  max-height: 520px;
  width: 100%;
}
.stages-tete__texte {
  padding: clamp(28px, 4vw, 48px) 0 8px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px 56px;
  align-items: end;
}
.stages-tete__texte p {
  color: var(--gris);
  font-size: 1.06rem;
  max-width: 58ch;
}
@media (max-width: 860px) {
  .stages-tete__texte {
    grid-template-columns: 1fr;
  }
}
.stage {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--ligne);
  scroll-margin-top: 80px;
}
.stage:last-child {
  border-bottom: 0;
}
.stage__intro {
  display: grid;
  gap: 12px;
  align-content: start;
}
.stage__intro .ph {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  margin-bottom: 6px;
}
.stage__ages {
  color: var(--magenta);
  font-weight: 600;
}
.stage__intro > p:not(.stage__ages) {
  color: var(--gris);
}
.stage__infos {
  margin: 6px 0 0;
  display: grid;
  gap: 6px;
}
.stage__infos div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--ligne);
}
.stage__infos dt {
  color: var(--gris);
}
.stage__infos dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.stage__dates h3 {
  margin-bottom: 8px;
}
.sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ligne);
}
.session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 120px;
  gap: 8px 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ligne);
}
.session__quand strong {
  display: block;
  font-weight: 600;
}
.session__quand small {
  color: var(--gris);
  font-size: 0.86rem;
}
.session__places {
  display: grid;
  gap: 5px;
  font-size: 0.86rem;
}
.places {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.places i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--marine);
}
.places i.is-pris {
  background: var(--ligne);
}
.session .btn {
  justify-self: end;
}
.session.is-complet .session__places,
.session.is-encours .session__places {
  color: var(--gris);
}
.session__etat {
  justify-self: end;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gris);
}
.session.is-inscrit .session__etat {
  color: var(--vert-texte);
}
@media (max-width: 560px) {
  .session {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .session__places {
    grid-column: 1;
    grid-row: 2;
  }
  .session .btn,
  .session__etat {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}
@media (max-width: 860px) {
  .stage {
    grid-template-columns: 1fr;
  }
}
.savoir {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--papier);
  border-top: 1px solid var(--ligne);
}
.savoir__in {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 28px 56px;
}
.savoir__liste {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 36px;
}
.savoir__liste dt {
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 600;
}
.savoir__liste dd {
  margin: 4px 0 0;
  color: var(--gris);
}
@media (max-width: 860px) {
  .savoir__in,
  .savoir__liste {
    grid-template-columns: 1fr;
  }
}

/* ---------- Adhérer ---------- */
.choix-formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.choix-formules .choix__texte {
  padding: 16px;
  gap: 4px;
}
.choix__prix {
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 6px;
}
@media (max-width: 640px) {
  .choix-formules {
    grid-template-columns: 1fr;
  }
}
.membres {
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.membre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
  gap: 10px 14px;
  align-items: end;
  padding: 14px 16px 16px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--papier);
}
.membre__tete {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 600;
}
@media (max-width: 640px) {
  .membre {
    grid-template-columns: 1fr 1fr;
  }
  .membre .champ:last-of-type {
    grid-column: 1 / -1;
  }
}
.choix-options {
  display: grid;
  gap: 10px;
}
.option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--ligne);
  border-radius: 10px;
  background: var(--papier);
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.option:has(input:checked) {
  border-color: var(--marine);
}
.option input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--marine);
}
.option__texte {
  display: grid;
  gap: 2px;
}
.option__texte span {
  color: var(--gris);
  font-size: 0.9rem;
}
.option__prix {
  margin-left: auto;
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Carte de membre ---------- */
.carte-membre {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  aspect-ratio: 1.586;
  max-width: 470px;
  padding: 20px 22px;
  border-radius: 16px;
  color: #f3f7fa;
  background:
    repeating-radial-gradient(circle at 88% 128%, transparent 0 24px, rgba(255, 255, 255, 0.07) 24px 25px),
    radial-gradient(circle at 104% -14%, rgba(236, 143, 203, 0.38), transparent 52%),
    #123d5f;
  box-shadow: 0 30px 60px -34px rgba(4, 22, 36, 0.8);
}
.carte-membre__haut {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carte-membre__signe {
  width: 34px;
  height: 34px;
  flex: none;
}
.carte-membre__signe .marque__hampe {
  stroke: #f3f7fa;
}
.carte-membre__signe .marque__haut {
  fill: #8ec5ec;
}
.carte-membre__signe .marque__bas {
  fill: #ec8fcb;
}
.carte-membre__club {
  display: grid;
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}
.carte-membre__club small {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.8;
}
.carte-membre__saison {
  margin-left: auto;
  max-width: 17ch;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: right;
  opacity: 0.85;
}
.carte-membre__corps {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.carte-membre__nom {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
}
.carte-membre__formule {
  font-size: 0.86rem;
  opacity: 0.9;
  margin-top: 4px;
}
.carte-membre__numero {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  margin-top: 8px;
}
.carte-membre__option {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
}
.carte-membre__code {
  flex: none;
  width: 92px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
button.carte-membre__code {
  cursor: zoom-in;
}
.code {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 420px) {
  .carte-membre {
    aspect-ratio: auto;
    min-height: 210px;
  }
  .carte-membre__code {
    width: 76px;
  }
}
.code-grand {
  width: min(300px, 100%);
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
}

/* ---------- Mon espace ---------- */
.espace {
  padding: 8px 0 clamp(60px, 8vw, 110px);
}
.espace__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.espace__colonne {
  display: grid;
  gap: 40px;
  align-content: start;
}
.espace__bloc {
  display: grid;
  gap: 14px;
}
.espace__bloc h2 {
  font-size: 2rem;
}
.espace__bloc > .aide {
  margin-top: -6px;
}
.sortie {
  --c: var(--vert);
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--ligne);
  border-radius: 12px;
  background: var(--papier);
}
.sortie--orange {
  --c: var(--orange);
}
.sortie--rouge {
  --c: var(--rouge);
}
.sortie.is-passee,
.sortie.is-annulee {
  background: transparent;
}
.sortie__tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.sortie__tete h3 {
  font-size: 1.4rem;
}
.sortie__tete p {
  color: var(--gris);
  margin-top: 4px;
}
.statut {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--fond-2);
  white-space: nowrap;
}
.statut--ok {
  background: color-mix(in srgb, var(--vert) 16%, var(--papier));
  color: var(--vert-texte);
}
.statut--alerte {
  background: color-mix(in srgb, var(--rouge) 14%, var(--papier));
  color: var(--rouge);
}
.statut--attention {
  background: color-mix(in srgb, var(--orange) 16%, var(--papier));
  color: var(--orange-texte);
}
.sortie__prevu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 0.9rem;
}
.sortie__prevu .fleche {
  width: 24px;
  height: 24px;
}
.sortie__prevu span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pastille-drapeau {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}
.sortie__alerte {
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c) 12%, var(--papier));
  font-size: 0.92rem;
  font-weight: 600;
}
.sortie__alerte--attention {
  --c: var(--orange);
}
.sortie__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.sortie .depot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sortie .depot input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.sortie .depot:has(input:focus-visible) .btn {
  outline: 2px solid var(--marine);
  outline-offset: 3px;
}
.carnet {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--ligne);
  border-radius: 14px;
  background: var(--papier);
}
.carnet__total {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.carnet__total strong {
  font-family: var(--titre);
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.9;
}
.carnet__lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.carnet__ligne {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 56px;
  gap: 12px;
  align-items: center;
  font-size: 0.92rem;
}
.carnet__barre {
  height: 8px;
  border-radius: 4px;
  background: var(--fond-2);
  overflow: hidden;
}
.carnet__barre span {
  display: block;
  height: 100%;
  background: var(--marine);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--kit-ease);
}
.carnet__ligne > span:last-child {
  text-align: right;
  font-weight: 600;
}
.vide {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 28px;
  border: 1.5px dashed var(--ligne);
  border-radius: 14px;
}
.vide h2,
.vide h3 {
  font-size: 1.6rem;
}
.vide p {
  color: var(--gris);
  max-width: 52ch;
}
.vide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .espace__grille {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fenêtres ---------- */
dialog.kit-dialog.fenetre {
  background: var(--papier);
  border-radius: 16px;
  max-width: min(520px, calc(100vw - 32px));
  overflow: auto;
}
dialog.kit-dialog.fenetre--large {
  max-width: min(700px, calc(100vw - 32px));
}
.fenetre__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 6px;
}
.fenetre__tete h2 {
  font-size: 1.8rem;
}
.fenetre__tete .aide {
  margin-top: 4px;
}
.fenetre__fermer {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: none;
}
.fenetre__corps {
  padding: 12px 24px 24px;
  display: grid;
  gap: 18px;
}
.fenetre__corps > p {
  color: var(--gris);
}
.fenetre__corps .pastilles {
  margin-top: 14px;
}
.fenetre__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
}
.fenetre__total strong {
  font-family: var(--titre);
  font-size: 1.9rem;
  font-weight: 600;
}
.fenetre__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 480px) {
  .fenetre__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* ---------- Page introuvable ---------- */
.egare {
  padding: clamp(40px, 7vw, 100px) 0 clamp(70px, 9vw, 120px);
}
.egare__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.egare__texte {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.egare__texte p {
  color: var(--gris);
  max-width: 42ch;
}
.egare__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}
.egare__photo .ph {
  aspect-ratio: 3 / 2;
  border-radius: 14px;
}
@media (max-width: 860px) {
  .egare__in {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pied ---------- */
.pied {
  padding: clamp(52px, 7vw, 84px) 0 26px;
  border-top: 1px solid var(--ligne);
  background: var(--fond);
}
.pied__in {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 32px;
}
.pied__marque {
  display: grid;
  gap: 14px;
  align-content: start;
}
.pied p {
  color: var(--gris);
  margin-bottom: 8px;
}
.pied__titre {
  font-family: var(--texte);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.pied__liens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pied__liens a {
  color: var(--gris);
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--ligne);
  font-size: 0.9rem;
}
.pied__bas p {
  margin: 0;
}
.pied .signe-binuxlabs {
  opacity: 1;
  color: var(--gris);
}
@media (max-width: 900px) {
  .pied__in {
    grid-template-columns: 1fr 1fr;
  }
  .pied__marque {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .pied__in {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .entete .marque__nom {
    font-size: 1.3rem;
    white-space: nowrap;
  }
}
.espace__sous-titre {
  font-family: var(--texte);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gris);
  margin-top: 10px;
}
.jours-pastilles .pastille span {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.25;
  padding: 8px 14px;
}
.pastille__nb {
  font-size: 0.76rem;
  color: var(--gris);
  font-weight: 500;
}
.pastille input:checked + span .pastille__nb {
  color: inherit;
  opacity: 0.85;
}