/* Bande photo et flotte à l'échelle, l'arrière contre le ponton. */
.bande { position: relative; overflow: hidden; background: var(--encre); }
.bande picture { display: block; transform-origin: 50% 50%; }
.bande img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 55%; }
.bande-legende {
  position: absolute; left: var(--marge); bottom: clamp(16px, 2.5vw, 40px);
  padding: 12px 16px; background: var(--encre); color: var(--blanc); font-weight: 560; font-size: 16px;
}
@media (max-width: 700px) { .bande img { aspect-ratio: 4 / 5; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bande picture { animation: bande-ouvre linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes bande-ouvre { from { transform: scale(0.84); } to { transform: scale(1); } }
  }
}

.flotte { --m: clamp(30px, 2.7vw, 52px); background: var(--blanc); }
.flotte-tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 96px); }
.flotte-tete p { font-size: clamp(18px, 1.4vw, 24px); font-weight: 520; max-width: 26ch; }
.quai { display: grid; grid-template-columns: auto minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 3vw, 60px); align-items: start; }
.echelle { padding-top: calc(clamp(30px, 2.6vw, 48px) + 18px); }
.echelle-boite { height: calc(9 * var(--m)); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 4px; border-bottom: 10px solid var(--encre); }
.echelle span { font-size: 14px; font-weight: 640; white-space: nowrap; }
.echelle i { display: block; width: 12px; height: calc(5 * var(--m)); border-left: 2px solid var(--encre);
  background: repeating-linear-gradient(to top, var(--encre) 0 2px, transparent 2px var(--m)) no-repeat 0 0 / 8px 100%; }
.groupe-titre { font-family: var(--titre); font-size: clamp(30px, 2.6vw, 48px); line-height: 1; margin-bottom: 18px; }
.groupe-coques { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 40px); }
.coque-dessin { height: calc(9 * var(--m)); display: flex; align-items: flex-end; justify-content: center; border-bottom: 10px solid var(--encre); }
.coque-svg { overflow: visible; }
.coque-svg.v { height: calc((var(--l) + 1.8) * var(--m)); width: auto; }
.coque-svg.h { display: none; }
.coque-svg path, .coque-svg rect { vector-effect: non-scaling-stroke; }
.coque-svg .coque { fill: var(--blanc); stroke: var(--encre); stroke-width: 1.8; }
.coque-svg .boudin { fill: #cdd6db; stroke: var(--encre); stroke-width: 1.8; }
.coque-svg .pont { fill: #f3f6f7; stroke: #8d9ba3; stroke-width: 1; }
.coque-svg .pont-avant, .coque-svg .plateforme { fill: #dfe6e9; stroke: #8d9ba3; stroke-width: 1; }
.coque-svg .banc { fill: #c9d3d8; stroke: var(--encre); stroke-width: 1; }
.coque-svg .coffre { fill: #b9c5cb; stroke: var(--encre); stroke-width: 1; }
.coque-svg .console, .coque-svg .moteur, .coque-svg .hublot { fill: var(--encre); }
.coque-svg .pare, .coque-svg .barre { fill: none; stroke: var(--encre); stroke-width: 1.6; }
.coque-svg .coussin { fill: var(--ceruleen); stroke: var(--encre); stroke-width: 1; }
.coque-svg .toit { fill: none; stroke: var(--encre); stroke-width: 1; stroke-dasharray: 3 2; }
.coque-svg .cabine { fill: #e3e9ec; stroke: var(--encre); stroke-width: 1.4; }
.coque-texte h3 { font-family: var(--titre); font-size: clamp(38px, 3vw, 58px); margin-top: 22px; }
.c-specs { margin-top: 6px; font-weight: 600; }
.c-prix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; margin: 16px 0 0; }
.c-prix dt { font-size: 13px; color: var(--gris); font-weight: 520; }
.c-prix dd { margin: 0; font-size: clamp(17px, 1.15vw, 21px); font-weight: 620; white-space: nowrap; }
.c-caution { margin-top: 8px; font-size: 14px; color: var(--gris); }
.c-ajout { width: 100%; margin-top: 16px; }
.c-etat { min-height: 1.4em; margin-top: 6px; font-size: 14px; font-weight: 600; }
.flotte-note { margin-top: clamp(28px, 3vw, 48px); font-size: 15px; color: var(--gris); max-width: 54ch; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .coque-svg.v { animation: accoste linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes accoste { from { transform: translateY(calc(-1 * (1.2 + var(--i, 0) * 0.35) * var(--m))) rotate(calc((var(--i, 0) - 2) * 1.2deg)); } to { transform: none; } }
  }
}

@media (min-width: 900px) and (max-width: 1279px) {
  .c-prix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .flotte { --mh: calc((100vw - 2 * var(--marge) - 8px) / 9); }
  .flotte-tete { grid-template-columns: 1fr; }
  .quai { grid-template-columns: 1fr; row-gap: 40px; }
  .echelle { padding-top: 0; }
  .echelle-boite { height: auto; flex-direction: row-reverse; justify-content: flex-end; padding: 8px 0 8px 2px; border-bottom: 0; border-left: 8px solid var(--encre); gap: 10px; }
  .echelle i { width: calc(5 * var(--mh)); height: 12px; border-left: 0; border-bottom: 2px solid var(--encre);
    background: repeating-linear-gradient(to right, var(--encre) 0 2px, transparent 2px var(--mh)) no-repeat 0 100% / 100% 8px; }
  .groupe-coques { grid-auto-flow: row; gap: 36px; }
  .coque-dessin { height: auto; justify-content: flex-start; border-bottom: 0; border-left: 8px solid var(--encre); }
  .coque-svg.v { display: none; }
  .coque-svg.h { display: block; width: calc((var(--l) + 1.8) * var(--mh)); height: auto; }
  .coque-fiche { display: grid; grid-template-columns: 1fr; }
  .coque-texte { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; align-items: baseline; }
  .coque-texte h3 { margin-top: 14px; }
  .c-specs { grid-column: 1; }
  .c-prix, .c-ajout, .c-etat { grid-column: 1 / -1; }
  .c-caution { grid-column: 2; grid-row: 1; margin: 0; }
}