/* style.css — mobile-first, sobre, gros boutons tactiles. */

:root {
  /* Sable chaud plutôt que gris : le fond d'un projet de vacances, pas celui
     d'un outil de gestion. Contraste vérifié — 14,95:1 avec le texte. */
  --couleur-fond: #fdf6ec;
  --couleur-carte: #ffffff;
  --couleur-texte: #2a1f1a;
  --couleur-texte-doux: #6b5b4e;
  /* Turquoise du logo, assombri : la teinte d'origine (#01C0C2) ne donne que
     2,25:1 avec du texte blanc, loin des 4,5:1 attendus. Celle-ci atteint
     5,29:1 tout en restant la même couleur. */
  --couleur-accent: #00787a;
  --couleur-accent-clair: #e0f5f5;
  /* Teinte de marque, réservée aux surfaces sans texte. */
  --couleur-marque: #01c0c2;

  /* Orange d'action : le bouton qui fait avancer doit se distinguer du reste
     de l'interface, turquoise. 5,18:1 avec du texte blanc. */
  --couleur-action: #c2410c;
  --couleur-action-clair: #fdeee7;
  /* Bordure sable : elle sépare sans trancher. */
  --couleur-bordure: #eadbc8;
  --couleur-erreur: #a4262c;
  --couleur-erreur-fond: #fbeaea;
  --couleur-alerte: #8a6100;
  --couleur-alerte-fond: #fdf3e2;

  --rayon: 12px;
  --espace: 16px;
  --hauteur-tactile: 48px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--couleur-fond);
  /* Le halo prolonge le couchant du bandeau dans le fond de la page. */
  background-image: radial-gradient(1200px 400px at 50% -80px, #ffeeda 0%, transparent 70%);
  background-repeat: no-repeat;
  color: var(--couleur-texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* — Photo de fond — */

/* Fixe : la photo ne défile pas avec le contenu, elle reste le décor devant
   lequel le voyage se construit. Elle occupe une large bande centrale plutôt
   que tout l'écran, et s'estompe en haut et en bas pour se fondre dans le
   sable du fond. */
.fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.45s ease;
  /* Le dégradé du masque decide de la « large partie centrée » : pleine
     intensité au milieu, effacée aux extrémités. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 96%);
}

/* Atténuée : à pleine intensité, aucun texte posé dessus ne resterait
   lisible. Le voile sable la ramène au rang de décor. */
.fond--visible {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .fond {
    transition: none;
  }
}

/* — Bandeau illustré — */

.tete {
  position: relative;
}

/* Posé sur le paysage, en haut à droite : il n'a plus de barre à lui, et
   n'occupe donc plus de hauteur. Le fond translucide le détache d'un ciel
   dont la couleur change d'un écran à l'autre. */
.tete__deconnexion {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: 10px;
  z-index: 2;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 12, 4, 0.42);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.tete__deconnexion:hover {
  background: rgba(30, 12, 4, 0.58);
}

.tete__deconnexion:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.banniere {
  position: relative;
  margin: 0 0 -26px;
  border-radius: 0 0 26px 26px;
  overflow: hidden;
  line-height: 0;
}

.banniere__scene,
.banniere svg {
  display: block;
  width: 100%;
}

/* Hauteur libre sur l'accueil : le paysage garde ses proportions et ses bords
   ne sont pas rognés. */
.banniere svg {
  height: auto;
}

/* Avec une photo de fond, le bandeau abandonne son dessin et ne garde que son
   texte : le titre se pose alors directement sur la photo, que plus rien ne
   recouvre. Le voile de .banniere::after suffit à le rendre lisible. */
.a-photo .banniere__scene {
  display: none;
}

.a-photo .banniere {
  margin-bottom: 0;
  border-radius: 0;
  min-height: 132px;
}

.a-photo .banniere--compacte {
  min-height: 74px;
}

.a-photo .banniere::after {
  border-radius: 0;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(45, 18, 4, 0.42) 0%,
    rgba(45, 18, 4, 0.14) 62%,
    transparent 100%
  );
}

.a-photo .banniere__texte {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* Dans un tiroir, le paysage se réduit à une bande : présent, mais il laisse
   la place au contenu. Le rognage se fait au centre, où les scènes placent
   leur ligne d'horizon. Les coins restent arrondis — une bande à angle vif
   coupe l'écran au lieu de le coiffer. */
.banniere--compacte {
  margin-bottom: 0;
  border-radius: 0 0 22px 22px;
}

.banniere--compacte svg {
  height: 84px;
}

/* Voile dégradé sous la légende : du ciel presque blanc du budget au couchant
   du départ, aucune couleur de texte ne conviendrait aux sept paysages. Le
   voile, lui, assombrit ce qu'il faut là où il faut. */
.banniere::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(45, 18, 4, 0.2) 45%,
    rgba(45, 18, 4, 0.62) 100%
  );
}

.banniere--compacte::after {
  border-radius: 0 0 22px 22px;
}

.banniere__texte {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  padding: 0 var(--espace);
  text-align: center;
  line-height: 1.3;
}

/* L'ombre portée tient lieu de contraste : le texte est blanc sur un ciel
   dont la couleur change d'une scène à l'autre, et aucune teinte fixe ne
   conviendrait aux sept. */
.banniere__titre {
  margin: 0;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 12px rgba(60, 20, 0, 0.55), 0 0 2px rgba(60, 20, 0, 0.4);
}

.banniere__slogan {
  margin: 2px 0 0;
  color: #fff;
  font-size: 0.95rem;
  text-shadow: 0 1px 8px rgba(60, 20, 0, 0.6), 0 0 2px rgba(60, 20, 0, 0.5);
}

.banniere--compacte .banniere__texte {
  bottom: 10px;
}

.banniere--compacte .banniere__titre {
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

.banniere--compacte .banniere__slogan {
  font-size: 0.85rem;
}

/* Visible des lecteurs d'écran, absent de l'affichage. */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* — Fil des étapes — */

.parcours {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 0 8px;
  background: var(--couleur-carte);
  border-bottom: 1px solid var(--couleur-bordure);
}

/* La piste défile horizontalement : sept étapes ne tiennent pas de front
   sur un téléphone, et les réduire les rendrait intouchables. */
.parcours__piste {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.parcours__piste::-webkit-scrollbar {
  display: none;
}

.parcours__liste {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 auto;
  padding: 0 var(--espace);
  list-style: none;
  width: max-content;
  min-width: 100%;
  justify-content: center;
}

.parcours__etape {
  display: flex;
  align-items: center;
}

/* Trait de liaison entre deux pastilles : il donne à lire un chemin plutôt
   qu'une série de boutons isolés. */
.parcours__etape + .parcours__etape::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--couleur-bordure);
  flex: 0 0 auto;
}

.parcours__etape--franchie + .parcours__etape::before,
.parcours__etape--courante::before {
  background: var(--couleur-accent);
}

.parcours__bouton {
  display: block;
  padding: 2px;
  border: 0;
  background: none;
  cursor: pointer;
}

.parcours__bouton[disabled] {
  cursor: default;
}

.parcours__pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--couleur-bordure);
  border-radius: 50%;
  background: var(--couleur-carte);
  color: var(--couleur-texte-doux);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.parcours__etape--franchie .parcours__pastille {
  border-color: var(--couleur-accent);
  background: var(--couleur-accent);
  color: #fff;
}

.parcours__etape--courante .parcours__pastille {
  border-color: var(--couleur-action);
  background: var(--couleur-action-clair);
  color: var(--couleur-action);
  transform: scale(1.12);
}

.parcours__etape--avenir .parcours__pastille {
  opacity: 0.45;
}

.parcours__bouton:not([disabled]):hover .parcours__pastille {
  border-color: var(--couleur-accent);
}

.parcours__courante {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--couleur-texte-doux);
}

/* Le grossissement de la pastille courante n'apporte rien d'essentiel : il
   disparaît pour qui demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  .parcours__pastille {
    transition: none;
  }

  .parcours__etape--courante .parcours__pastille {
    transform: none;
  }
}

/* — Vue principale — */

.vue {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--espace);
  /* Le glissement d'entrée sort brièvement du cadre. */
  overflow-x: hidden;
}

/* Glissement d'entrée d'un tiroir. Le sens indique la direction prise : le
   contenu arrive de la droite en avançant, de la gauche en reculant. La durée
   reste courte — le mouvement doit se sentir, pas se faire attendre. */
@keyframes vue-entre-avant {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes vue-entre-arriere {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}

.vue--entre-avant {
  animation: vue-entre-avant 0.22s ease-out;
}

.vue--entre-arriere {
  animation: vue-entre-arriere 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .vue--entre-avant,
  .vue--entre-arriere {
    animation: none;
  }
}

/* Presque opaques : on devine la photo derrière sans que le texte en pâtisse.
   Le flou d'arrière-plan calme ce qui passe au travers. */
/* Le logo est sur fond blanc : « multiply » fond ce blanc dans la carte. */
.logo {
  display: block;
  width: min(100%, 220px);
  height: auto;
  margin: 0 auto var(--espace);
  mix-blend-mode: multiply;
}

.carte--logo .logo {
  width: min(100%, 160px);
  margin-bottom: 0;
}

.carte {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: var(--espace);
  margin-bottom: var(--espace);
}

.carte h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

.note {
  color: var(--couleur-texte-doux);
  font-size: 0.85rem;
}

.carte--voyage .carte__titre {
  margin: 0;
  font-size: 1.05rem;
}

.carte--voyage .note {
  margin: 4px 0 12px;
}

/* Les actions d'une carte passent sur une ligne dès que la place le permet. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions .bouton {
  flex: 1 1 100%;
}

.actions .bouton + .bouton {
  margin-top: 0;
}

@media (min-width: 420px) {
  .actions .bouton {
    flex: 1 1 0;
  }
}

.confirmation .avertissement {
  margin: 0 0 8px;
}

.bouton--danger {
  color: var(--couleur-erreur);
  border-color: var(--couleur-erreur);
  background: var(--couleur-erreur-fond);
}

.chargement {
  text-align: center;
  color: var(--couleur-texte-doux);
}

/* — Attente d'une génération par l'IA —
   Ces appels durent de trente secondes à deux minutes : on montre la forme du
   résultat à venir et ce qui est en train d'être cherché, plutôt qu'une ligne
   de texte immobile. */

.attente {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Barre indéterminée : elle dit « ça travaille », sans promettre une durée
   qu'on ne connaît pas. */
.attente__barre {
  overflow: hidden;
  height: 4px;
  border-radius: 2px;
  background: var(--couleur-bordure);
}

.attente__barre span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--couleur-accent);
  animation: attente-barre 1.4s ease-in-out infinite;
}

@keyframes attente-barre {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

/* Les messages sont empilés au même endroit et se relaient. Le conteneur
   réserve deux lignes pour qu'aucun changement de message ne déplace la
   suite de la page. */
.attente__defilement {
  position: relative;
  margin: 0;
  min-height: 3em;
  text-align: center;
  color: var(--couleur-texte-doux);
}

.attente__message {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: attente-message 16s linear infinite;
}

/* Chaque message occupe un quart du cycle (25 %) et déborde de 3 % sur le
   suivant : le fondu de l'un recouvre celui de l'autre. Sans ce recouvrement,
   la zone reste vide une seconde entre deux phrases. */
@keyframes attente-message {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  3%,
  25% {
    opacity: 1;
    transform: none;
  }
  28%,
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}

/* Cartes grisées à la forme du résultat attendu : un titre et deux lignes de
   texte, dessinés au dégradé pour n'ajouter aucun élément au balisage. */
.attente__fantome {
  height: 88px;
  padding: 14px;
  border-radius: var(--rayon);
  background:
    linear-gradient(var(--couleur-bordure) 0 0) 14px 14px / 45% 13px no-repeat,
    linear-gradient(var(--couleur-bordure) 0 0) 14px 40px / 85% 9px no-repeat,
    linear-gradient(var(--couleur-bordure) 0 0) 14px 58px / 65% 9px no-repeat,
    var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  animation: attente-respire 1.8s ease-in-out infinite;
}

.attente__fantome:nth-child(4) {
  animation-delay: 0.2s;
}

.attente__fantome:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes attente-respire {
  50% {
    opacity: 0.55;
  }
}

/* Sans animation, on garde le premier message et des cartes immobiles :
   l'information reste, le mouvement disparaît. */
@media (prefers-reduced-motion: reduce) {
  .attente__barre span,
  .attente__fantome {
    animation: none;
  }

  .attente__message {
    animation: none;
  }

  .attente__message:first-child {
    opacity: 1;
  }
}

/* — Boutons et champs — */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hauteur-tactile);
  width: 100%;
  padding: 0 var(--espace);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  font: inherit;
  cursor: pointer;
}

/* Le bouton qui fait avancer porte l'orange d'action : il se distingue ainsi
   des liens partenaires et des choix, qui restent turquoise. */
.bouton--principal {
  background: var(--couleur-action);
  border-color: var(--couleur-action);
  color: #fff;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}

.bouton--principal:not([disabled]):hover {
  background: #a83509;
}

.bouton--principal:not([disabled]):active {
  transform: scale(0.98);
}

/* Le focus doit rester visible : c'est le seul repère de navigation au
   clavier. */
.bouton:focus-visible,
.parcours__bouton:focus-visible .parcours__pastille,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--couleur-action);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bouton--principal {
    transition: none;
  }

  .bouton--principal:not([disabled]):active {
    transform: none;
  }
}

.bouton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bouton + .bouton {
  margin-top: 8px;
}

label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 0.95rem;
}

input,
select {
  width: 100%;
  min-height: var(--hauteur-tactile);
  padding: 0 12px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-carte);
  color: inherit;
  font: inherit;
}

.champ {
  margin-bottom: var(--espace);
}

.champ__aide {
  margin: 4px 0 0;
  color: var(--couleur-texte-doux);
  font-size: 0.85rem;
}

.champ__erreur {
  margin: 4px 0 0;
  color: var(--couleur-erreur);
  font-size: 0.85rem;
}

/* Deux champs courts partagent une ligne dès que la largeur le permet. */
.champs-cote-a-cote {
  display: flex;
  gap: 12px;
}

.champs-cote-a-cote .champ {
  flex: 1 1 0;
}

/* — Choix (modes de transport, types d'hébergement…) — */

.choix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bouton--choix {
  flex: 1 1 calc(50% - 4px);
  width: auto;
  font-size: 0.95rem;
}

.bouton--choix.bouton--choisi {
  border-color: var(--couleur-accent);
  background: var(--couleur-accent-clair);
  font-weight: 600;
}

.bouton--choix + .bouton--choix {
  margin-top: 0;
}

/* Choix présentés en cartes : une icône donne à lire l'option d'un coup
   d'oeil, là où sept libellés alignés se ressemblent tous. */
.choix--cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.carte-choix {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 12px 8px;
  border: 1.5px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    transform 0.12s ease;
}

.carte-choix__icone {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--couleur-texte-doux);
  transition: color 0.15s ease;
}

/* Les modes combinés montrent leurs deux pictogrammes reliés par un signe. */
.carte-choix__plus {
  font-size: 0.8rem;
  line-height: 1;
}

.carte-choix:not([disabled]):hover {
  border-color: var(--couleur-accent);
}

.carte-choix:not([disabled]):active {
  transform: scale(0.97);
}

.carte-choix--choisie {
  border-color: var(--couleur-accent);
  border-width: 2px;
  padding: 11.5px 7.5px;
  background: var(--couleur-accent-clair);
  font-weight: 600;
}

.carte-choix--choisie .carte-choix__icone {
  color: var(--couleur-accent);
}

/* Carte illustrée : le paysage occupe toute la largeur, le libellé se pose
   dessous. Le contenu part du bas pour que les libellés s'alignent d'une
   carte à l'autre, même sur deux lignes. */
.carte-choix--illustree {
  justify-content: flex-end;
  min-height: 112px;
  padding: 10px 8px;
  overflow: hidden;
}

.carte-choix--illustree.carte-choix--choisie {
  padding: 9px 7px;
}

.carte-choix__scene {
  width: 100%;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}

.carte-choix__scene svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* La coche double l'information portée par la couleur : la sélection reste
   lisible sans distinguer les teintes. */
.carte-choix__coche {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--couleur-accent);
  color: #fff;
}

.carte-choix:focus-visible {
  outline: 3px solid var(--couleur-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .carte-choix {
    transition: none;
  }

  .carte-choix:not([disabled]):active {
    transform: none;
  }
}

/* — Écran de fin de parcours — */

.fin {
  margin-bottom: var(--espace);
  text-align: center;
}

/* Le sceau récompense l'arrivée : c'est le seul endroit où le turquoise de
   marque sert de fond plein, aucun texte n'étant posé dessus. */
.fin__sceau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--couleur-accent);
  color: #fff;
  animation: fin-sceau 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes fin-sceau {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

.fin__titre {
  margin: 10px 0 2px;
  font-size: 1.4rem;
}

.fin__destination {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--couleur-accent);
}

.fin__resume {
  margin: 2px 0 0;
  color: var(--couleur-texte-doux);
  font-size: 0.95rem;
}

.fin__budget {
  text-align: center;
}

.fin__budget-libelle {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fin__budget-montant {
  margin: 2px 0 4px;
  font-size: 2rem;
  font-weight: 700;
}

/* — Récapitulatif des étapes — */

.recap {
  margin: 0 0 var(--espace);
  padding: 0;
  list-style: none;
}

.recap li + li {
  margin-top: 8px;
}

.recap__ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--hauteur-tactile);
  padding: 10px 12px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.recap__ligne:hover {
  border-color: var(--couleur-accent);
}

.recap__ligne:focus-visible {
  outline: 3px solid var(--couleur-accent);
  outline-offset: 2px;
}

.recap__icone {
  display: flex;
  color: var(--couleur-accent);
}

.recap__texte {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.recap__etape {
  color: var(--couleur-texte-doux);
  font-size: 0.8rem;
}

.recap__valeur {
  font-weight: 600;
}

/* Une étape laissée de côté garde sa ligne, en retrait : le retour en arrière
   reste proposé au lieu d'être caché. */
.recap__ligne--vide .recap__icone,
.recap__ligne--vide .recap__valeur {
  color: var(--couleur-texte-doux);
  font-weight: 400;
  font-style: italic;
}

.recap__modifier {
  flex: 0 0 auto;
  color: var(--couleur-action);
  font-size: 0.85rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .fin__sceau {
    animation: none;
  }
}

/* — Groupes de cases à cocher — */

.groupe-filtres {
  margin: 0 0 var(--espace);
  padding: 0;
  border: 0;
}

.groupe-filtres legend {
  padding: 0;
  margin-bottom: 6px;
  color: var(--couleur-texte-doux);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.case {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-weight: 400;
  cursor: pointer;
}

.case input {
  width: 20px;
  min-height: 20px;
  flex: 0 0 auto;
  margin: 0;
}

/* — Totaux du budget — */

.totaux {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.total {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  text-align: center;
}

.total--moyen {
  border-color: var(--couleur-accent);
  background: var(--couleur-accent-clair);
}

.total__libelle {
  color: var(--couleur-texte-doux);
  font-size: 0.8rem;
}

.total__montant {
  font-size: 1.15rem;
  font-weight: 700;
}

/* — Cartes de lieux — */

.case--lieu {
  min-height: var(--hauteur-tactile);
  margin-bottom: 4px;
}

.lieu__nom {
  font-size: 1.05rem;
  font-weight: 600;
}

.carte--lieu .note {
  margin-top: 0;
}

.lieu__conseils {
  padding: 10px 12px;
  border-radius: var(--rayon);
  background: var(--couleur-fond);
  font-size: 0.9rem;
}

/* — Listes de liens partenaires — */

.liens {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liens li + li {
  margin-top: 12px;
}

.bouton--lien {
  text-decoration: none;
}

.lien__mention {
  display: block;
  margin-top: 4px;
  color: var(--couleur-texte-doux);
  font-size: 0.8rem;
  text-align: center;
}

.avertissement--saison {
  margin-bottom: var(--espace);
}

/* — Cartes dépliables de la fiche — */

.carte--point,
.carte--sources {
  padding: 0;
}

.point__entete,
.carte--sources > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--hauteur-tactile);
  padding: 10px var(--espace);
  cursor: pointer;
  list-style: none;
}

/* Masque le chevron natif pour garder la même flèche partout. */
.point__entete::-webkit-details-marker,
.carte--sources > summary::-webkit-details-marker {
  display: none;
}

.point__titre {
  font-weight: 600;
}

.point__apercu {
  color: var(--couleur-texte-doux);
  font-size: 0.9rem;
  text-align: right;
}

.point__entete::after,
.carte--sources > summary::after {
  content: '▾';
  flex: 0 0 auto;
  color: var(--couleur-texte-doux);
  transition: transform 0.15s ease;
}

details[open] > .point__entete::after,
.carte--sources[open] > summary::after {
  transform: rotate(180deg);
}

.point__contenu {
  padding: 0 var(--espace) var(--espace);
  border-top: 1px solid var(--couleur-bordure);
}

.point__contenu p:first-child {
  margin-top: 12px;
}

.point__contenu h4 {
  margin: 12px 0 4px;
  font-size: 0.9rem;
}

.point__contenu ul {
  margin: 0;
  padding-left: 20px;
}

.a-verifier {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--couleur-alerte-fond);
  color: var(--couleur-alerte);
  font-size: 0.75rem;
  white-space: nowrap;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tableau th,
.tableau td {
  padding: 6px 4px;
  text-align: right;
  border-bottom: 1px solid var(--couleur-bordure);
}

.tableau th[scope='row'] {
  text-align: left;
  font-weight: 600;
}

/* Températures de la mer : douze cases qui passent à la ligne sur mobile. */
.mer {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 12px;
}

.mer__mois {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: 8px;
  background: var(--couleur-fond);
  font-size: 0.8rem;
}

.mer__mois--choisi {
  background: var(--couleur-accent-clair);
  font-weight: 700;
}

.mer__libelle {
  color: var(--couleur-texte-doux);
}

.carte--sources ul {
  margin: 0;
  padding: 0 var(--espace) var(--espace) 36px;
  word-break: break-all;
  font-size: 0.85rem;
}

/* — Navigation entre tiroirs — */


.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.navigation .bouton {
  flex: 1 1 0;
  margin-top: 0;
}

/* — Messages — */

.message {
  max-width: 640px;
  margin: 0 auto var(--espace);
  padding: 12px var(--espace);
  border-radius: var(--rayon);
  font-size: 0.95rem;
}

.message--info {
  background: var(--couleur-accent-clair);
  color: var(--couleur-texte);
}

.message--erreur {
  background: var(--couleur-erreur-fond);
  color: var(--couleur-erreur);
}

.avertissement {
  padding: 10px 12px;
  border-radius: var(--rayon);
  background: var(--couleur-alerte-fond);
  color: var(--couleur-alerte);
  font-size: 0.9rem;
}

/* — Pied de page — */

.pied {
  padding: var(--espace);
  text-align: center;
  color: var(--couleur-texte-doux);
  font-size: 0.8rem;
}

.pied__env {
  display: block;
  margin-top: 4px;
  opacity: 0.6;
}

/* — Fiche de synthèse (écran de fin) — */

.synthese__actions {
  margin: var(--espace) 0;
}

.synthese {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: var(--espace);
  margin-bottom: var(--espace);
  color: var(--couleur-texte);
}

.synthese__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--couleur-marque);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.synthese__logo {
  width: 72px;
  height: auto;
  mix-blend-mode: multiply;
}

.synthese__surtitre {
  margin: 0;
  font-size: 0.85rem;
  color: var(--couleur-texte-doux);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.synthese__destination {
  margin: 2px 0 0;
}

.synthese__section {
  padding: 8px 0;
  border-bottom: 1px solid var(--couleur-bordure);
}

.synthese__section:last-child {
  border-bottom: 0;
}

.synthese__section h3 {
  margin: 4px 0 6px;
  color: var(--couleur-accent);
}

.synthese__section p,
.synthese__section ul {
  margin: 4px 0;
}

.synthese__point h4 {
  margin: 10px 0 2px;
  font-size: 0.95rem;
}

.synthese__total {
  font-size: 1.6rem;
  font-weight: 700;
}

/*
 * À l'impression, seule la fiche de synthèse sort : le reste de l'écran
 * (bandeau, photo de fond, boutons) est masqué. « visibility » plutôt que
 * « display » : la fiche est imbriquée dans des blocs qu'il faut garder.
 */
@media print {
  @page {
    margin: 14mm;
  }

  body {
    background: #fff !important;
  }

  body * {
    visibility: hidden;
  }

  .synthese,
  .synthese * {
    visibility: visible;
  }

  .synthese {
    position: absolute;
    inset: 0 0 auto 0;
    border: 0;
    padding: 0;
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .synthese__section,
  .synthese__point {
    break-inside: avoid;
  }

  .synthese a {
    color: inherit;
    text-decoration: none;
  }
}

/* — Choix de la langue — */

.drapeau {
  display: block;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.choix-langues {
  display: grid;
  gap: 12px;
  margin-top: var(--espace);
}

.choix-langue {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 10px 16px;
  border: 2px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.choix-langue:hover,
.choix-langue:focus-visible {
  border-color: var(--couleur-accent);
}

.choix-langue--courante {
  border-color: var(--couleur-accent);
  background: var(--couleur-accent-clair);
}

/* Discret, sous le logo de l'accueil : on ne change pas de langue souvent. */
.bouton-langue {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  min-height: 40px;
  padding: 4px 14px;
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}