/* Navette Girolata — thème commun (refonte d'octobre 2026).

   Chargé sur toutes les pages, juste après app.css : il reprend les
   composants partagés (en-tête, cartes, champs, boutons, barres du bas) dans
   le style de la page d'accueil, et ajoute le mode appli.

   Public visé : beaucoup de personnes âgées, d'abord sur téléphone. D'où des
   textes de 16 à 18 px, des contrastes de 7:1 sur le texte courant et des
   cibles tactiles de 48 px au moins.

   Deux affichages :
   - navigateur sans compte : en-tête photo, pied de page, signature ;
   - mode appli (html.is-app) : habitant connecté, espace pilote, ou lancement
     depuis l'écran d'accueil. Barre du haut compacte, barre d'onglets en bas,
     plus de pied de page web (seulement les liens légaux), transitions entre
     pages, écran de démarrage au lancement seulement. */

:root {
  --ink-soft: #3d5064;
  --ink-faint: #5d7084;
  --line: #d4dfe9;
  --field-line: #c3d1de;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 0 0 1px rgba(20, 40, 66, 0.07), 0 18px 40px -26px rgba(20, 40, 66, 0.45);
  --shadow-lg: 0 30px 60px -24px rgba(11, 26, 44, 0.55);
  --lx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lx-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --lx-deep: #0b1a2c;
  --app-tabbar-h: calc(70px + var(--safe-bottom));
  --app-bar-h: calc(62px + env(safe-area-inset-top, 0px));
}

body {
  font-size: 17px;
}

/* --- En-tête des pages publiques (navigateur) ----------------------------- */

.site-hero:not(.site-hero--video):not(.site-hero--pilot)::before {
  background: linear-gradient(
    to bottom,
    rgba(8, 20, 36, 0.62) 0%,
    rgba(8, 20, 36, 0.36) 46%,
    rgba(8, 20, 36, 0.72) 100%
  );
}

.site-hero:not(.site-hero--pilot):not(.site-hero--video) .topbar__title {
  font-size: clamp(30px, 8.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 24px rgba(8, 20, 36, 0.35);
}

.site-hero:not(.site-hero--pilot):not(.site-hero--video) .topbar__subtitle {
  margin-top: 8px;
  max-width: 40ch;
  font-size: clamp(16px, 4.3vw, 18px);
  line-height: 1.4;
  text-shadow: 0 1px 12px rgba(8, 20, 36, 0.4);
}

.site-hero:not(.site-hero--video):not(.site-hero--pilot) .topbar {
  padding-bottom: 86px;
}

.site-hero--custom:not(.site-hero--pilot) .topbar--compact {
  padding-bottom: 96px;
}

.site-hero + .page {
  padding-top: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  body:not(.has-splash) .site-hero:not(.site-hero--pilot):not(.site-hero--video) .topbar__text {
    animation: th-rise 0.9s var(--lx-expo) 0.05s both;
  }
}

@keyframes th-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Trois houles qui défilent à des vitesses différentes ; la dernière a la
   couleur de la page et fait la jonction. Motif de 800 px, raccord parfait. */
.site-hero__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  height: 70px;
  overflow: hidden;
  pointer-events: none;
}

.site-hero__wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 800px);
  height: 100%;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 800px 100%;
}

.site-hero__wave--back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.16' d='M0 40C100 10 300 10 400 40S700 70 800 40V80H0Z'/%3E%3C/svg%3E");
  background-position: -260px 100%;
}

.site-hero__wave--mid {
  height: 82%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M0 40C100 20 300 20 400 40S700 60 800 40V80H0Z'/%3E%3C/svg%3E");
  background-position: -520px 100%;
}

.site-hero__wave--front {
  height: 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath fill='%23f2f6fa' d='M0 40C100 18 300 18 400 40S700 62 800 40V80H0Z'/%3E%3C/svg%3E");
}

@media (min-width: 760px) {
  .site-hero__waves {
    height: 104px;
  }

  .site-hero:not(.site-hero--video):not(.site-hero--pilot) .topbar {
    padding-bottom: 118px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-hero__wave--back {
    animation: th-wave 19s linear infinite;
  }

  .site-hero__wave--mid {
    animation: th-wave 13s linear infinite reverse;
  }

  .site-hero__wave--front {
    animation: th-wave 10s linear infinite;
  }
}

@keyframes th-wave {
  to {
    transform: translate3d(-800px, 0, 0);
  }
}

/* Boutons d'en-tête et menu des langues : cibles de 44 px. */
.topbar__action {
  min-height: 44px;
  font-size: 15px;
}

.lang-switch__summary {
  min-height: 44px;
  padding: 4px 10px 4px 12px;
}

.lang-switch__code {
  font-size: 13px;
}

.lang-switch__option {
  min-height: 44px;
  font-size: 16px;
}

.topbar__forum-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* --- Cartes et titres ----------------------------------------------------- */

.card {
  padding: 20px;
  border-radius: var(--radius-lg);
}

/* Hiérarchie des titres, la même sur toutes les pages :
   1. titre de la page (en-tête, h1)        30 à 46 px, ou 19 px dans la barre appli
   2. titre de section (h2 : cartes, listes) 22 px
   3. sous-partie (h3, groupe de choix)      18 px
   4. libellé de champ                       16 px
   Plus de petites capitales grises : trop pâles et plus petites que le
   contenu qu'elles annoncent. */
.card__title,
.section-title {
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--navy-900);
}

.section-title {
  margin-bottom: 0;
  padding: 18px 4px 10px;
  font-size: 20px;
}

.section-title::first-letter,
.card__title::first-letter {
  text-transform: uppercase;
}

.card__subtitle,
.place-field__label,
.auth-card__group-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--navy-900);
}

.card__subtitle {
  margin: 26px 0 12px;
}

.auth-card__group-title {
  margin-bottom: 2px;
}

/* Les autres titres de l'app, alignés sur la même échelle. */
h1.forum-topic__title {
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--navy-900);
}

h3.forum-topic__title,
.settings-heading__title,
.carpool-day {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}

.empty__title {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy-900);
}

.legal__updated {
  margin-top: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.legal h2 {
  margin-top: 26px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy-900);
}

.legal p,
.legal li {
  font-size: 17px;
}

.muted {
  color: var(--ink-soft);
}

/* --- Champs --------------------------------------------------------------- */

.field__label {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-900);
}

/* Seules les marges haute et basse changent : la gauche et la droite
   restent celles d'app.css (place de l'icône, bouton « Voir »). */
.input,
.textarea {
  min-height: 56px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-color: var(--field-line);
  font-size: 17px;
}

.input--with-icon,
.textarea--with-icon,
.input[type="file"].input--with-icon,
.pin-input.input--with-icon {
  padding-left: 48px;
}

.field__icon {
  left: 16px;
}

.field__reveal {
  min-height: 40px;
  font-size: 15px;
}

.input--with-reveal {
  padding-right: 96px;
}

.input::placeholder,
.textarea::placeholder {
  color: #6f8194;
}

.input:focus,
.textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(39, 76, 119, 0.18);
}

.field__hint {
  font-size: 15px;
  line-height: 1.45;
  color: #45586c;
}

.field__error,
.field__match {
  font-size: 15px;
}


/* --- Formulaire de réservation : choix des ports, horaires, progression --- */

.place-pick__option {
  min-height: 64px;
  padding: 14px;
  border-color: var(--field-line);
  border-radius: 18px;
}

.place-pick__name {
  font-size: 18px;
  color: var(--navy-900);
}

.place-note {
  font-size: 14px;
  color: var(--ink-soft);
}

/* Choix fait : plein bleu nuit, impossible à confondre. */
.place-pick input:checked + .place-pick__option {
  border-color: var(--navy-900);
  background: var(--navy-900);
  box-shadow: 0 12px 24px -14px rgba(11, 26, 44, 0.9);
}

.place-pick input:checked + .place-pick__option .place-pick__name,
.place-pick input:checked + .place-pick__option .place-note {
  color: #fff;
}

.place-pick input:focus-visible + .place-pick__option,
.slots input:focus-visible + .slot {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

/* Jour : mêmes choix pleins que les ports et les heures. */
.day-pick__option {
  min-height: 56px;
  border-color: var(--field-line);
  border-radius: 16px;
  color: var(--navy-900);
  font-size: 17px;
}

.day-pick__icon {
  color: var(--navy);
}

.day-pick input:checked + .day-pick__option {
  border-color: var(--navy-900);
  background: var(--navy-900);
  box-shadow: 0 12px 24px -14px rgba(11, 26, 44, 0.9);
}

.day-pick input:focus-visible + .day-pick__option {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.day-pick__tag {
  font-size: 12px;
}

.day-pick__chosen {
  font-size: 16px;
  color: var(--navy-900);
}

.slot {
  min-height: 60px;
  border-color: var(--field-line);
  border-radius: 16px;
}

.slot__time {
  font-size: 18px;
  color: var(--navy-900);
}

.slot__meta {
  font-size: 13px;
  color: #45586c;
}

.slots input:checked + .slot {
  border-color: var(--navy-900);
  background: var(--navy-900);
  box-shadow: 0 12px 24px -14px rgba(11, 26, 44, 0.9);
}

.slots input:checked + .slot .slot__time,
.slots input:checked + .slot .slot__meta {
  color: #fff;
}

.slot--off {
  opacity: 1;
}

.slot--off .slot__time {
  color: #5d7084;
}

/* Progression : un seul repère, avec des mots (Trajet, Horaire, Coordonnées). */
.form-progress {
  padding: 8px;
}

.form-progress__count {
  display: none;
}

.form-progress__bar {
  height: 6px;
  margin: 0 6px;
}

.form-progress__list {
  gap: 6px;
  margin-top: 8px;
}

.form-progress__item {
  flex-direction: column;
  gap: 3px;
  min-height: 58px;
  padding: 6px 4px;
  border-radius: 16px;
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.form-progress__num {
  display: none;
}

.form-progress__icon {
  width: 24px;
  height: 24px;
}

.form-progress__label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  clip: auto;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-progress__item.is-active {
  color: var(--navy-900);
  font-weight: 800;
}

.form-progress__item:disabled {
  opacity: 0.6;
}

/* Étape faite et repliée : son nom, ce qui a été choisi, « Modifier ». */
.form-step__head {
  flex-wrap: wrap;
  row-gap: 2px;
  min-height: 48px;
}

.form-step__title {
  flex: 1 1 100%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.form-step__summary {
  font-size: 17px;
  color: var(--navy-900);
  white-space: normal;
}

.form-step__edit {
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mot d'accueil de l'habitant, au-dessus du formulaire. */
.habitant-greeting {
  margin: 4px 4px 14px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--navy-900);
}

.booking-manage {
  margin: 0;
  font-size: 16px;
}

.is-app .booking-manage {
  display: none;
}

/* --- Choix du trajet : plan, départ, inversion, arrivée -------------------
   Départ en bleu nuit (point), arrivée en orange (drapeau) : sur le plan,
   dans les titres et sur les cases choisies, la même couleur et la même
   forme pour la même chose. */

.trip-map {
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(170deg, #d9eaf6 0%, #bcd6ea 100%);
  box-shadow: inset 0 0 0 1px rgba(39, 76, 119, 0.12);
  color: var(--navy);
}

/* Terre (côte OpenStreetMap) : beige, bord constant à l'écran malgré le zoom. */
.trip-map__land {
  fill: #efe7d3;
  stroke: #a99a76;
  stroke-width: calc(1px * var(--k, 1));
  stroke-linejoin: round;
}

/* Seconde ligne (Col de la Croix · Parking) : seulement pour un port choisi. */
.trip-map__note {
  display: none;
}

.trip-map__port.is-from .trip-map__note,
.trip-map__port.is-to .trip-map__note {
  display: inline;
}

.trip-map__sub {
  font-size: 12px;
  font-weight: 700;
  fill: #26384c;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.trip-map__parking rect {
  fill: #1f5fae;
  stroke: #fff;
  stroke-width: 1.5;
}

.trip-map__parking text {
  font-size: 10px;
  font-weight: 900;
  fill: #fff;
}

.trip-map__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}

.trip-map__route {
  fill: none;
  stroke: var(--navy);
  stroke-width: calc(3.5px * var(--k, 1));
  stroke-linecap: round;
  stroke-dasharray: 0.012 0.018;
}

.trip-map__dot {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 2.2;
  transition: opacity 0.3s ease;
}

.trip-map__label {
  font-size: 15px;
  font-weight: 700;
  fill: var(--navy-900);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
  transition: opacity 0.3s ease;
}

.trip-map__port.is-off .trip-map__dot,
.trip-map__port.is-off .trip-map__label {
  opacity: 0.35;
}

.trip-map__port.is-from .trip-map__label,
.trip-map__port.is-to .trip-map__label {
  font-weight: 900;
}

.trip-map__port.is-to .trip-map__label {
  fill: #9a3a0e;
}

.trip-map__start circle {
  fill: var(--navy-900);
  stroke: #fff;
  stroke-width: 3;
}

.trip-map__start .trip-map__start-core {
  fill: #fff;
  stroke: none;
}

.trip-map__end path {
  fill: none;
  stroke: #9a3a0e;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.trip-map__end .trip-map__flag {
  fill: #c2410c;
  stroke: #9a3a0e;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.trip-map__end circle {
  fill: #9a3a0e;
}

.trip-map__boat-body path {
  fill: var(--navy-900);
}

.trip-map__boat-body .trip-map__cabin {
  fill: #fff;
  stroke: var(--navy-900);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.trip-map.is-live .trip-map__start,
.trip-map.is-live .trip-map__end {
  transition: transform 0.45s var(--lx-expo);
}

@media (prefers-reduced-motion: no-preference) {
  .trip-map__route.is-drawn {
    animation: trip-draw 0.9s var(--lx-ease) both;
  }

  .trip-map__end .trip-map__flag {
    transform-origin: 0 -19px;
    animation: trip-flag 2.4s ease-in-out infinite;
  }

  .trip-swap__btn.is-turning svg {
    animation: trip-turn 0.5s var(--lx-expo);
  }
}

/* Le tracé apparaît en fondu : c'est le bateau qui montre le sens. */
@keyframes trip-draw {
  from {
    opacity: 0;
  }
}

@keyframes trip-flag {
  0%,
  100% {
    transform: skewY(0deg);
  }
  50% {
    transform: skewY(-6deg);
  }
}

@keyframes trip-turn {
  from {
    transform: rotate(-180deg);
  }
}

.place-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.place-field__label {
  display: block;
  margin-bottom: 10px;
  padding: 0;
}

.place-field__mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-inline-end: 10px;
  vertical-align: -4px;
}

.place-field__mark--from {
  border: 4px solid var(--navy-900);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--navy-900);
  transform: scale(0.85);
}

.place-field__mark--to {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 22V3' stroke='%239a3a0e' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M5 3h14l-4 5 4 5H5z' fill='%23c2410c' stroke='%239a3a0e' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Arrivée choisie : orange foncé (texte blanc lisible, 5:1). */
.place-pick--to input:checked + .place-pick__option {
  border-color: #b8410f;
  background: #b8410f;
  box-shadow: 0 12px 24px -14px rgba(120, 40, 10, 0.9);
}

/* Une coche sur la case choisie, en plus de la couleur. */
.place-pick__option {
  position: relative;
}

.place-pick input:checked + .place-pick__option::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142842' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

[dir="rtl"] .place-pick input:checked + .place-pick__option::after {
  right: auto;
  left: 10px;
}

.trip-swap {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.trip-swap__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--navy-900);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.trip-swap__btn svg {
  flex: none;
  width: 22px;
  height: 22px;
}

.trip-swap__btn:hover,
.trip-swap__btn:focus-visible {
  background: #eef3f8;
}

.trip-swap__btn:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.trip-swap__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Jour sans navette sur ce trajet : les prochains départs, en liens. */
.slots-other__title {
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-900);
}

.slots-other__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slots-other__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
  border: 2px solid var(--field-line);
  border-radius: 14px;
  background: #fff;
  color: var(--navy-900);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.slots-other__link strong {
  font-variant-numeric: tabular-nums;
}

.slots-other__link:hover,
.slots-other__link:focus-visible {
  border-color: var(--navy);
}

/* Profil (habitant, saisonnier…) et motifs : mêmes choix pleins que les ports. */
.kind-pick__opt span {
  min-height: 52px;
  padding: 8px 10px;
  border: 1.5px solid var(--field-line);
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 700;
}

.kind-pick__row--pair .kind-pick__opt span {
  min-height: 56px;
}

.kind-pick__opt input:checked + span {
  border-color: var(--navy-900);
  background: var(--navy-900);
}

.kind-pick__opt input:focus-visible + span,
.motif-pick__option:focus-within {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.motif-pick__option {
  min-height: 56px;
  border-color: var(--field-line);
  font-size: 17px;
}

.motif-pick__option:has(input:checked),
.motif-pick.field--invalid .motif-pick__option:has(input:checked) {
  border-color: var(--navy-900);
  background: #e3edf6;
  box-shadow: inset 0 0 0 1.5px var(--navy-900);
}

.motif-pick input {
  width: 22px;
  height: 22px;
}

/* Carte de connexion / inscription. */
.auth-card__group-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
}

.auth-card__footer {
  font-size: 16px;
}

.auth-card .btn--primary {
  min-height: 56px;
  font-size: 17px;
}

/* Trajet d'une réservation (suivi, confirmation, comptes) : le bleu ciel
   d'origine était trop pâle sur fond blanc (3:1). */
.trip__route {
  font-size: 17px;
  color: var(--navy);
}

.trip__date {
  color: var(--ink-soft);
}

.form-step__edit,
.form-progress__item.is-ready {
  color: var(--navy);
}

/* --- Boutons -------------------------------------------------------------- */

.btn {
  min-height: 56px;
  padding: 0 24px;
  font-size: 17px;
  font-weight: 800;
}

.btn--primary {
  background: linear-gradient(135deg, #3d7ab8 0%, var(--navy) 55%, var(--navy-700) 100%);
  box-shadow: 0 12px 24px -14px rgba(11, 26, 44, 0.9);
}

.btn--ghost {
  border-color: var(--field-line);
  color: var(--navy-900);
}

.btn--sm {
  min-height: 46px;
  padding: 0 18px;
  font-size: 15px;
}

/* Rouge plus soutenu : le texte blanc reste lisible (6:1). */
.btn--danger {
  background: #9b3f3f;
}

.btn--quiet.btn--danger {
  color: #9b3f3f;
}

.btn--quiet {
  min-height: 48px;
  font-size: 16px;
  color: var(--ink-soft);
}

/* --- Messages, fenêtres, barres du bas ------------------------------------ */

.alert {
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.45;
}

.modal__card {
  padding: 24px 20px 20px;
  border-radius: 26px;
}

.modal__title {
  font-size: 21px;
  font-weight: 800;
  color: var(--navy-900);
}

.modal__text {
  font-size: 17px;
  color: var(--ink-soft);
}

.pilot-toast {
  font-size: 16px;
}

.dock__summary {
  font-size: 15px;
  color: var(--ink-soft);
}

.dock__summary strong {
  font-size: 17px;
  color: var(--navy-900);
}

/* Barre d'onglets (habitant connecté, ou visiteur dans l'appli installée) :
   l'icône dans une pastille, le libellé dessous, l'onglet actif bien marqué. */
body.has-habitant-dock {
  --habitant-dock-h: var(--app-tabbar-h);
}

.habitant-dock {
  padding: 6px 6px calc(6px + var(--safe-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -22px rgba(20, 40, 66, 0.6);
}

.habitant-dock__inner {
  gap: 2px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.habitant-dock__label {
  max-width: 100%;
  overflow: visible;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.habitant-dock__link {
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 16px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}

.habitant-dock__icon {
  box-sizing: border-box;
  width: 58px;
  height: 32px;
  padding: 5px 17px;
  border-radius: 16px;
  transition: background 0.25s ease;
}

.habitant-dock__link[aria-current="page"] {
  background: none;
  box-shadow: none;
  color: var(--navy-900);
  font-weight: 800;
}

.habitant-dock__link[aria-current="page"] .habitant-dock__icon {
  background: #d8e6f3;
}

.habitant-dock__link:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: -3px;
}

/* La barre visiteur n'existe qu'en mode appli. */
.habitant-dock--guest {
  display: none;
}

.app-links {
  display: none;
}

/* --- Mode appli ------------------------------------------------------------ */

.is-app .sitefoot,
.is-app .sm-sig {
  display: none !important;
}

.is-app body {
  -webkit-tap-highlight-color: transparent;
}

.is-app body.has-guest-dock {
  --habitant-dock-h: var(--app-tabbar-h);
}

.is-app .habitant-dock--guest {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: block;
}

.is-app body.has-guest-dock .dock {
  bottom: var(--habitant-dock-h);
}

.is-app body.has-guest-dock .page--with-dock {
  padding-bottom: 12px;
}

/* Liens légaux, à la place du pied de page. */
.is-app .app-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  padding: 18px var(--gutter) calc(22px + var(--habitant-dock-h, var(--safe-bottom)));
  font-size: 15px;
}

.is-app .page--with-dock ~ .app-links {
  padding-bottom: calc(110px + var(--habitant-dock-h, var(--safe-bottom)));
}

.is-app .app-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  text-underline-offset: 3px;
}

/* Barre du haut : bleu nuit, compacte, accrochée en haut (sauf l'accueil,
   dont l'en-tête défile avec la page). */
.is-app .site-hero:not(.site-hero--pilot):not(.site-hero--video) {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--navy-900);
  background-image: none;
  box-shadow: 0 8px 24px -16px rgba(8, 20, 36, 0.8);
}

.is-app .site-hero:not(.site-hero--pilot):not(.site-hero--video)::before,
.is-app .site-hero:not(.site-hero--pilot) .site-hero__waves {
  display: none;
}

.is-app .site-hero:not(.site-hero--pilot):not(.site-hero--video) .topbar {
  padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter) 10px;
}

.is-app .site-hero:not(.site-hero--pilot) .topbar__inner {
  flex-wrap: nowrap;
  max-width: 780px;
}

.is-app .site-hero:not(.site-hero--pilot) .topbar__mark-link,
.is-app .site-hero:not(.site-hero--pilot) .topbar__logo-link,
.is-app .site-hero:not(.site-hero--pilot) .topbar__actions,
.is-app .site-hero:not(.site-hero--pilot) .topbar__text {
  order: 0;
}

.is-app .site-hero:not(.site-hero--pilot) .topbar__mark-link {
  padding: 4px 7px;
  border-radius: 10px;
  box-shadow: none;
}

.is-app .site-hero:not(.site-hero--pilot) .topbar__mark {
  height: 34px;
  max-width: 28vw;
}

.is-app .site-hero:not(.site-hero--pilot) .topbar__text {
  flex: 1 1 auto;
  min-width: 0;
  animation: none;
}

.is-app .site-hero--video .topbar {
  padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter) 4px;
}

.is-app .site-hero--video .topbar__subtitle {
  display: none;
}

.is-app .site-hero:not(.site-hero--pilot) .topbar__title {
  overflow: hidden;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
}

.is-app .site-hero:not(.site-hero--pilot):not(.site-hero--video) .topbar__subtitle {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* Hauteur stable de la barre : ce qui colle en haut se range dessous. */
.is-app .site-hero:not(.site-hero--pilot):not(.site-hero--video) .topbar__inner {
  min-height: 44px;
}

.is-app .form-progress {
  top: var(--app-bar-h);
}

.is-app .site-hero + .page {
  padding-top: 16px;
}

/* « Nouvelle réservation » en haut : doublon de l'onglet Réserver. */
.is-app .topbar__action[href="reserver.php"] {
  display: none;
}

.is-app .topbar__forum {
  position: relative;
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.is-app .topbar__forum-label {
  display: none;
}

.is-app .topbar__forum .forum-nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  margin: 0;
}

.is-app .site-hero:not(.site-hero--pilot) .lang-switch__code,
.is-app .site-hero:not(.site-hero--pilot) .lang-switch__summary .lang-switch__chevron {
  display: none;
}

.is-app .site-hero:not(.site-hero--pilot) .lang-switch__summary {
  min-width: 44px;
  justify-content: center;
  padding: 4px;
}

/* Espace pilote : les onglets descendent en barre d'onglets, plus rien n'est tronqué. */
.is-app body.is-pilot .tabs-dock {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(242, 246, 250, 0.97);
}

.is-app body.is-pilot .tabs-dock .tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  gap: 2px;
  padding: 6px 6px calc(6px + var(--safe-bottom));
  border-radius: 0;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -10px 30px -22px rgba(20, 40, 66, 0.6);
}

.is-app body.is-pilot .tabs-dock .tabs__link,
.is-app body.is-pilot .tabs-dock .tabs__link--icon {
  flex: 1 1 0;
  flex-direction: column;
  width: auto;
  min-width: 0;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 16px;
  background: none;
  box-shadow: none;
  color: var(--ink-soft);
  font-size: 12px;
}

.is-app body.is-pilot .tabs-dock .tabs__icon {
  box-sizing: border-box;
  width: 58px;
  height: 32px;
  padding: 6px 19px;
  border-radius: 16px;
}

.is-app body.is-pilot .tabs-dock .tabs__link[aria-current="page"] {
  color: var(--navy-900);
  font-weight: 800;
}

.is-app body.is-pilot .tabs-dock .tabs__link[aria-current="page"] .tabs__icon {
  background: #d8e6f3;
}

/* L'onglet réglages n'a qu'une icône : son nom s'affiche dessous, comme les autres. */
.is-app body.is-pilot .tabs-dock .tabs__link--icon[aria-label]::after {
  content: attr(aria-label);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-app body.is-pilot .page {
  padding-bottom: calc(96px + var(--safe-bottom));
}

/* Tableau de bord pilote : « Ajouter un passage » et « Bloquer », puis les compteurs. */
.stats--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .stats--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat--add {
  background: var(--sky-100);
  border-color: var(--sky-200);
  color: var(--navy-900);
}

.stat--add:hover,
.stat--add:focus-visible {
  border-color: var(--navy);
}

.stat--action .stat__label {
  font-size: 14px;
}

.badge--extra {
  background: var(--sky-100);
  color: var(--navy-900);
}

.extra-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.extra-form__ports {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weather-day__route {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.weather-day__pax {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-900);
}

/* Transitions entre pages (navigateurs qui les connaissent). */
@media (display-mode: standalone) {
  @view-transition {
    navigation: auto;
  }
}

.is-app .habitant-dock {
  view-transition-name: app-tabbar;
}

.is-app .site-hero:not(.site-hero--pilot):not(.site-hero--video) {
  view-transition-name: app-bar;
}

.is-app body.is-pilot .site-hero--pilot {
  view-transition-name: pilot-bar;
}

.is-app body.is-pilot .tabs-dock .tabs {
  view-transition-name: pilot-tabs;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: th-vt-out 0.16s ease both;
  }

  ::view-transition-new(root) {
    animation: th-vt-in 0.28s var(--lx-ease) both;
  }
}

@keyframes th-vt-out {
  to {
    opacity: 0;
  }
}

@keyframes th-vt-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}