.surf-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  min-height: 0;
}

.surf-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  min-height: 0;
}

.surf-view[hidden] {
  display: none;
}

/* --------------------------------------------------------------- en-tête */

.surf-mode-group {
  display: flex;
  gap: 0.4vw;
}

.surf-mode-btn {
  width: 3.4vh;
  height: 3.4vh;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  background: var(--color-surface-raised);
  font-size: 1.8vh;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.12s ease, border-color 0.12s ease;
}

.surf-mode-btn.is-active {
  opacity: 1;
  border-color: var(--color-accent);
}

/* ------------------------------------------------------------ vue "jour" */

.surf-daybar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6vw;
}

.surf-day-nav-group {
  display: flex;
  align-items: center;
  gap: 0.4vw;
}

.surf-day-nav {
  width: 3vh;
  height: 3vh;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font-size: 2vh;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bout de la plage de jours : le bouton reste focusable, mais s'efface. */
.surf-day-nav.is-boundary {
  opacity: 0.3;
}

.surf-day-label {
  min-width: 9vw;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: capitalize;
}

.surf-summary {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surf-summary-when {
  margin-right: 0.4vw;
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.surf-summary-tide {
  color: var(--color-accent);
  font-weight: 700;
}

.surf-lanes {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.surf-lanes-svg {
  display: block;
}

.surf-lanes-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.surf-lane-bg {
  fill: var(--color-surface-raised);
}

.surf-lane-wave-area {
  fill: var(--color-wave);
  opacity: 0.22;
}

.surf-lane-wave-line {
  fill: none;
  stroke: var(--color-wave);
  stroke-width: 2;
  stroke-linejoin: round;
}

.surf-lane-wind-bar.is-offshore {
  fill: var(--color-offshore);
}

.surf-lane-wind-bar.is-cross {
  fill: var(--color-cross);
}

.surf-lane-wind-bar.is-onshore {
  fill: var(--color-onshore);
}

.surf-lane-wind-bar {
  opacity: 0.85;
}

.surf-lane-gust-bar.is-offshore {
  fill: var(--color-offshore);
}

.surf-lane-gust-bar.is-cross {
  fill: var(--color-cross);
}

.surf-lane-gust-bar.is-onshore {
  fill: var(--color-onshore);
}

/* Rafale : repère pâle derrière la barre du vent établi, même teinte. */
.surf-lane-gust-bar {
  opacity: 0.28;
}

.surf-lane-arrow.is-offshore {
  fill: var(--color-offshore);
}

.surf-lane-arrow.is-cross {
  fill: var(--color-cross);
}

.surf-lane-arrow.is-onshore {
  fill: var(--color-onshore);
}

.surf-lane-tide-area {
  fill: var(--color-accent);
  opacity: 0.18;
}

.surf-lane-tide-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Verticales de pleine/basse mer : elles traversent les trois bandes, c'est tout
   l'intérêt de partager un axe de temps. */
.surf-lane-tide-mark {
  stroke: var(--color-accent);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.5;
}

.surf-lane-tide-label {
  fill: var(--color-accent);
  font-size: 1.6vh;
  font-weight: 700;
}

.surf-lane-title {
  fill: var(--color-text-secondary);
  font-size: 1.5vh;
  font-weight: 700;
}

.surf-lane-value {
  fill: var(--color-text-primary);
  font-size: 1.6vh;
  font-weight: 700;
}

/* Les deux séries tracées dans une bande, avec leur unité : pas des valeurs,
   juste la légende des axes (les chiffres du graphique lui-même n'en portent
   pas, faute de place — voir .surf-lane-note-sub). */
.surf-lane-legend {
  fill: var(--color-text-secondary);
  font-size: 1.05vh;
  font-weight: 400;
}

.surf-lane-note {
  fill: var(--color-text-secondary);
  font-size: 1.5vh;
}

/* Deuxième valeur d'un couple affiché toutes les N heures (hauteur à côté de la
   période, rafale à côté du vent établi) : en exposant, même teinte, plus petite. */
.surf-lane-note-sub {
  font-size: 0.7em;
}

.surf-lane-axis {
  fill: var(--color-text-secondary);
  font-size: 1.5vh;
}

.surf-lanes-now {
  stroke: var(--color-text-primary);
  stroke-width: 2;
  opacity: 0.6;
}

.surf-lanes-now[hidden] {
  display: none;
}

/* --------------------------------------------------------- vue "semaine" */

.surf-week {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4vw;
  min-height: 0;
}

.surf-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4vh;
  padding: 0.8vh 0.3vw;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--color-surface-raised);
  min-width: 0;
  overflow: hidden;
}

.surf-week-day.is-selected {
  border-color: var(--color-accent);
}

.surf-week-label {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  text-transform: capitalize;
  white-space: nowrap;
}

/* La silhouette occupe la hauteur restante de la carte : en quadrant elle se
   réduit à une vignette, en plein écran elle devient un vrai profil de journée. */
.surf-week-spark {
  width: 100%;
  flex: 1 1 auto;
  min-height: 3.5vh;
}

.surf-week-spark-area {
  fill: var(--color-wave);
  opacity: 0.22;
}

.surf-week-spark-line {
  fill: none;
  stroke: var(--color-wave);
  stroke-width: 2px;
}

.surf-week-wave {
  font-size: var(--font-size-base);
  font-weight: 700;
}

.surf-week-wind {
  display: flex;
  align-items: center;
  gap: 0.2vw;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.surf-week-arrow {
  display: inline-block;
  font-size: 1.6vh;
  line-height: 1;
}

.surf-week-arrow.is-offshore {
  color: var(--color-offshore);
}

.surf-week-arrow.is-cross {
  color: var(--color-cross);
}

.surf-week-arrow.is-onshore {
  color: var(--color-onshore);
}

.surf-week-coef {
  font-size: var(--font-size-small);
  color: var(--color-accent);
  font-weight: 700;
}

/* Les heures de marée détaillées ne tiennent pas dans un quadrant : elles
   n'apparaissent qu'une fois le widget passé en plein écran. */
.surf-week-extremes {
  display: none;
}

.widget.is-fullscreen .surf-week-extremes {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.2vh 0.6vw;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.surf-week-extreme b {
  color: var(--color-text-primary);
}

.surf-source {
  flex: 0 0 auto;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  text-align: right;
}

.surf-source a {
  color: inherit;
}

/* Téléphone (voir base.css, COMPACT_QUERY) : .surf-lanes n'a plus de quadrant
   dont hériter une hauteur (flex:1 1 auto sur un ancêtre devenu auto) — sans
   budget explicite ici, elle s'effondrerait à zéro. Assez de hauteur pour que
   les trois bandes restent lisibles, sans reproduire l'excès du 85vh
   précédent (qui espaçait démesurément les repères du haut de bande et la
   courbe elle-même, l'échelle de houle étant fixe — voir CONFIG.SURF.waveScaleMax
   dans surf.js). */
@media (max-width: 820px) {
  .surf-lanes {
    flex: 0 0 auto;
    height: 46vh;
    height: 46dvh;
  }
}

/* ------------------------------------------------------------------ légende */

.surf-info {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5vw;
  padding: 1.4vh 1vw;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow-y: auto;
}

.surf-info[hidden] {
  display: none;
}

.surf-info-col h4 {
  margin: 0 0 0.8vh;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.surf-info-col dl {
  margin: 0;
}

.surf-info-col dt {
  font-weight: 700;
  color: var(--color-text-primary);
}

.surf-info-col dd {
  margin: 0 0 0.8vh;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.surf-info-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6vh;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.surf-info-swatch {
  display: inline-block;
  width: 1.6vh;
  height: 1.6vh;
  margin-right: 0.5vw;
  border-radius: 4px;
  vertical-align: -0.3vh;
}

.surf-info-swatch.is-offshore {
  background: var(--color-offshore);
}

.surf-info-swatch.is-cross {
  background: var(--color-cross);
}

.surf-info-swatch.is-onshore {
  background: var(--color-onshore);
}

.surf-info-note {
  margin: 1vh 0 0;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  opacity: 0.8;
}