/* G · H, les bateaux : aplat d'encre. Ordinateur : la planche collante et sa drisse ; téléphone : fiches empilées. */
.bateaux {
  position: relative;
  background: var(--encre);
  color: #fff;
  --lisere: #fff;
  padding: 40px max(var(--marge), env(safe-area-inset-left)) 56px;
}
.planche { display: none; }
.bateaux__titre { font-size: min(11vw, 56px); color: #fff; }
.bateaux__titre span { display: block; }

.durees-rail {
  position: sticky;
  z-index: 6;
  top: calc(var(--demobar-offset, 0px) + var(--entete-h));
  margin: 24px calc(-1 * var(--marge)) 0;
  padding-inline: var(--marge);
  background: var(--encre);
  overflow-x: auto;
  scrollbar-width: none;
}
.durees-rail::-webkit-scrollbar { display: none; }
.durees { position: relative; display: flex; gap: 4px; width: max-content; }
.durees button {
  min-height: 52px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--sur-encre);
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
}
.durees button[aria-pressed="true"] { color: #fff; }
.durees__trait {
  position: absolute;
  left: 0;
  bottom: 6px;
  height: 3px;
  width: 10px;
  background: var(--vert);
  transition: transform .25s var(--courbe), width .25s var(--courbe);
}
.bateaux__jour { margin-top: 10px; font-size: 15px; color: var(--sur-encre); }

.groupe { margin-top: 40px; }
.groupe__tete { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.groupe__pav { width: 28px; height: auto; margin-top: 8px; overflow: visible; }
.groupe__pav .lisere { stroke-width: 1px; }
.groupe__tete p { font-size: 16px; color: var(--sur-encre); max-width: 46ch; }
.groupe__lettre { display: block; font: 900 40px/1 var(--titre); color: #fff; margin-bottom: 6px; }

.rangee__choix { display: none; }
.fiche { display: grid; margin-top: 32px; }
.fiche__photo { margin-inline: calc(-1 * var(--marge)); aspect-ratio: 1; }
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; }
.rangee[data-bateau="sr6"] .fiche__photo img { object-position: 0 50%; }
.fiche__prix {
  justify-self: start;
  margin-top: -44px;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px 10px;
  background: #fff;
  color: var(--encre);
}
.fiche__prix b { font: 900 44px/1 var(--titre); letter-spacing: -.01em; }
.fiche__prix small { font-size: 15px; font-weight: 600; }
.fiche__nom { margin-top: 18px; display: grid; }
.fiche__nom span { font-weight: 600; font-size: 17px; color: var(--sur-encre); }
.fiche__nom b { font: 900 40px/1 var(--titre); }
.fiche__faits { margin-top: 8px; font-size: 16px; }
.fiche .lien { justify-self: start; }

@media (min-width: 700px) and (max-width: 1099px) {
  .fiche__photo { margin-inline: 0; aspect-ratio: 16 / 10; }
}

@media (min-width: 1100px) {
  .bateaux {
    display: grid;
    grid-template-columns: calc(var(--marge) - var(--gout)) repeat(12, minmax(0, 1fr)) calc(var(--marge) - var(--gout));
    column-gap: var(--gout);
    align-items: start;
    min-height: calc(100svh - var(--entete-h));
    padding: 0;
  }
  .planche {
    display: block;
    grid-column: 1 / 8;
    grid-row: 1;
    position: sticky;
    top: calc(var(--demobar-offset, 0px) + var(--entete-h));
    height: calc(100svh - var(--entete-h) - var(--demobar-offset, 0px));
    min-height: 560px;
  }
  .planche__photos { position: absolute; inset: 0; overflow: hidden; }
  .planche__photos img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
  }
  .planche__photos img[data-photo="sr6"] { object-position: 0 50%; }
  .planche__photos img.est-vue { opacity: 1; visibility: visible; z-index: 1; }
  .planche__photos img.monte { z-index: 2; opacity: 1; visibility: visible; animation: monte .45s var(--courbe) both; }
  @keyframes monte {
    from { transform: translateY(6%); clip-path: inset(100% 0 0 0); }
    to { transform: none; clip-path: inset(0 0 0 0); }
  }
  .planche__drisse {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 2px;
    background: #fff;
    --pav-w: 72px;
  }
  .planche__drisse .pav { position: absolute; top: 24px; left: 2px; }
  .planche__plaque {
    position: absolute;
    z-index: 3;
    left: max(var(--marge), env(safe-area-inset-left));
    bottom: 32px;
    max-width: min(46%, 460px);
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 22px 24px 24px;
  }
  .plaque__type { font-weight: 600; font-size: 17px; }
  .plaque__nom { font: 900 clamp(40px, 3.3vw, 64px)/.95 var(--titre); letter-spacing: -.01em; }
  .plaque__faits { font-size: 15px; color: var(--sur-blanc); margin-bottom: 10px; }
  .planche__plaque .guidon { --fond: var(--encre); color: #fff; }
  .planche__plaque .guidon:focus-visible { outline-color: var(--encre); }

  .bateaux__texte {
    grid-column: 8 / 14;
    grid-row: 1;
    position: relative;
    z-index: 4;
    padding: 112px 0 72px var(--gout);
  }
  .bateaux__titre { font-size: clamp(40px, 3.2vw, 64px); }
  .bateaux__titre span { display: inline; }
  .bateaux__titre span:nth-child(2)::after { content: "\a"; white-space: pre; }
  .durees-rail { position: static; margin: 28px 0 0; padding: 0; overflow: visible; }
  .durees { gap: 2px; }
  .durees button { min-height: 44px; }
  .groupe { margin-top: 32px; }
  .fiche { display: none; }
  .rangees { margin-top: 12px; }
  .rangee__choix {
    display: grid;
    --pz: clamp(40px, 2.7vw, 52px);
    grid-template-columns: minmax(0, 1fr) calc(var(--pz) * 5.25) 86px;
    align-items: center;
    column-gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 0 12px;
    margin-inline: -12px;
    width: calc(100% + 24px);
    border: 0;
    background: none;
    color: #fff;
    text-align: left;
  }
  .rangee__nom { font-weight: 600; font-size: 20px; text-decoration: underline 2px transparent; text-underline-offset: 6px; }
  .rangee__prix { display: contents; }
  .rangee__prix b { font: 900 var(--pz)/1 var(--titre); letter-spacing: -.01em; text-align: right; }
  .rangee__prix small { font-size: 14px; font-weight: 600; color: var(--sur-encre); }
  .rangee__choix[aria-pressed="true"] { background: var(--vert); color: var(--encre); }
  .rangee__choix[aria-pressed="true"] small { color: var(--sur-vert); }
  .rangee__choix:focus-visible { outline-color: #fff; outline-offset: -3px; }
  .rangee__choix[aria-pressed="true"]:focus-visible { outline-color: var(--encre); }
  @media (hover: hover) { .rangee__choix:hover .rangee__nom { text-decoration-color: var(--vert); } }
}
@media (min-width: 1440px) {
  .planche { grid-column: 1 / 9; }
  .bateaux__texte { grid-column: 9 / 14; }
}