/* ============================================================
   May'Kilos — site vitrine · mise en page

   La maquette est dessinée à 1440 px. Un site ne l'est pas : tout ce
   qui suit est fluide de 360 à 1440, et la gouttière se resserre
   plutôt que le contenu ne se comprime.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
/* Les liens de mise en page — cartes, jours, pied — ne se soulignent pas :
   c'est la carte entière qui est cliquable, pas une phrase. Les liens
   dans un paragraphe gardent leur soulignement, il les rend repérables. */
a { color: inherit; text-decoration: none; }
p a { color: var(--mk-primary); text-decoration: underline; }
img { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }

body {
  background: var(--mk-bg);
  color: var(--mk-text);
  font-family: var(--mk-font);
  -webkit-font-smoothing: antialiased;
}

.enveloppe { max-width: var(--mk-largeur); margin: 0 auto; padding: 0 var(--mk-gouttiere); }

/* Sauter au contenu — invisible tant qu'on ne tabule pas. */
.saut {
  position: absolute; left: -9999px;
  background: var(--mk-card); color: var(--mk-text);
  padding: 12px 20px; border-radius: var(--mk-r-pill); z-index: 100;
}
.saut:focus { left: 24px; top: 12px; }

/* Un titre qui reçoit le focus par programme — au changement d'étape d'un
   tunnel, par exemple — ne doit pas peindre de contour : il n'a pas été
   atteint au clavier. Les vrais focus clavier gardent le leur. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 30px; border-radius: var(--mk-r-pill);
  font: 700 17px var(--mk-font); text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, background .12s ease;
}
/* L'encre est sombre sur la menthe : le blanc n'y donne que 2,12 de
   contraste, l'encre sombre 7,80. */
.btn-menthe { background: var(--mk-action); color: var(--mk-on-action); box-shadow: var(--mk-shadow-cta); }
.btn-menthe:hover { background: var(--mk-action-pressed); }
.btn-blanc { background: #fff; color: var(--mk-primary); }
.btn-contour { min-height: 44px; padding: 0 22px; font-size: 15px; box-shadow: inset 0 0 0 2px var(--mk-primary); color: var(--mk-primary); }
/* « Publier un trajet » est la seule action qui s'adresse au voyageur, pas à
   l'expéditeur. Le corail l'isole du reste, qui est indigo ou menthe.
   Le trait garde le corail vif ; l'encre, non — #FF7A59 ne donne que 2,26 sur
   blanc, d'où --mk-accent-text, bien plus sombre. */
.btn-contour.btn-publier { box-shadow: inset 0 0 0 2px var(--mk-accent); color: var(--mk-accent-text); }
/* inline-flex + min-height plutôt que du padding : « Se connecter » porte
   un padding en style en ligne, qui l'emporterait sur la feuille. La
   hauteur, elle, passe. Le texte ne bouge pas, seule la cible grandit. */
/* Une action qui détruit ne porte pas l'accent : c'est « Rester » qui
   doit être le bouton évident, et « Fermer mon compte » celui qu'on
   choisit exprès. Le trait rouge le rend repérable sans l'inviter. */
.btn-danger { min-height: 48px; box-shadow: inset 0 0 0 2px var(--mk-refus-text); color: var(--mk-refus-text); background: none; }
.btn-lien { display: inline-flex; align-items: center; min-height: 44px; font: 700 17px var(--mk-font); color: var(--mk-primary); text-decoration: none; }
.btn:active { transform: scale(.98); }

/* ---------- Pastilles ----------
   Un choix parmi quelques-uns, sur une seule ligne. Sert au rail de
   filtres, aux dates voisines et au tunnel de publication. */
.pastilles { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pastille {
  min-height: 44px; padding: 0 16px; border-radius: var(--mk-r-pill);
  background: var(--mk-bg); border: 1px solid var(--mk-hairline-soft);
  display: inline-flex; align-items: center; font: 600 15px var(--mk-font);
  color: var(--mk-text); cursor: pointer;
}
.pastille.on { background: var(--mk-action); border-color: transparent; color: var(--mk-on-action); font-weight: 700; }

/* ---------- La ligne de vol ----------
   Départ, trait, arrivée : la même dans les résultats, dans le tunnel de
   publication et dans l'espace membre. Elle vivait dans recherche.css, que
   publier.html ne charge pas — les trois colonnes se collaient les unes aux
   autres et la carte affichait « 12:00direct · 19 h 0007:00 ». */
.vol-h { display: flex; align-items: center; gap: 12px; }
.vol-h .hh { font: 800 24px var(--mk-font); color: var(--mk-text); letter-spacing: -.6px; }
.vol-h .ap { font: 400 13px var(--mk-font); color: var(--mk-text-2); }
.vol-h .trait { flex: 1; position: relative; height: 2px; background: var(--mk-hairline-fort); }
.vol-h .trait span {
  position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
  background: var(--mk-card); padding: 0 8px;
  font: 500 12px var(--mk-font); color: var(--mk-text-2); white-space: nowrap;
}
.quand-c { font: 500 14px var(--mk-font); color: var(--mk-text-2); margin-top: 10px; }

/* ============================================================
   Le mouvement

   Deux saccades mesurées : d'une page à l'autre, un rechargement
   complet et son éclair de fond ; et à l'intérieur d'une page, le
   contenu qui tombe d'un coup quand la base répond — 223 px de plus en
   une seule image sur « Mes envois ».

   Rien ici n'anime pour décorer. Chaque règle sert à ce qu'un
   changement se lise comme un changement, et non comme un sursaut.
   ============================================================ */

/* D'une page à l'autre : un fondu croisé, rendu par le navigateur. Une
   seule règle, aucun JavaScript, et les navigateurs qui l'ignorent
   retrouvent exactement le comportement d'avant. */
@view-transition { navigation: auto; }

/* L'en-tête et le pied ne bougent pas d'une page à l'autre : on les
   nomme pour que le navigateur les reconnaisse et les laisse en place
   au lieu de les fondre avec le reste.

   `footer.pied` et non `.pied` : la modale de trajet.html porte la même
   classe pour son propre pied. Deux éléments d'un même nom, et le
   navigateur abandonne la transition de toute la page. */
.entete { view-transition-name: entete; }
footer.pied { view-transition-name: pied; }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.2, 0, .2, 1);
}
::view-transition-old(entete), ::view-transition-new(entete),
::view-transition-old(pied), ::view-transition-new(pied) {
  animation: none;   /* ils sont identiques : les fondre les ferait clignoter */
}

/* Le contenu qui arrive après une réponse du serveur. Huit pixels de
   montée, pas plus : au-delà on remarque l'animation au lieu du
   contenu. */
@keyframes parait {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.parait { animation: parait .28s cubic-bezier(.2, 0, .2, 1) both; }

/* Un mouvement demandé par le système : on le retire. Les fondus de page
   aussi — c'est un déplacement pour qui les perçoit ainsi.

   On neutralise l'ANIMATION, pas la règle @view-transition : un second
   `@view-transition` déclaré dans une requête de média l'emportait sur
   le premier quelle que soit la préférence, et plus aucune transition ne
   se déclenchait. Vérifié : pageswap ne portait plus de viewTransition. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .parait { animation: none; }
}

/* ---------- Attente, ennui ----------
   Un écran qui charge doit le dire, et un écran qui échoue aussi. Un
   bloc vide se lit comme « il n'y a rien », ce qui est faux dans les
   deux cas. */
.patiente, .ennui {
  display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 18px 22px; border-radius: var(--mk-r-card);
  font: 500 15px var(--mk-font); color: var(--mk-text-2);
}
.ennui { background: var(--mk-refus-bg); color: var(--mk-refus-text); font-weight: 600; }
.patiente .rond {
  width: 18px; height: 18px; flex: none; border-radius: var(--mk-r-pill);
  border: 2px solid var(--mk-hairline-fort); border-top-color: var(--mk-action);
  animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- La barre du membre ----------
   Elle vivait dans espace.css, que les pages publiques ne chargent pas.
   Depuis que le menu connecté est peint partout de la même façon, ses
   entrées y tombaient à 22 px de haut — sous le minimum de 24 × 24 —
   parce qu'aucune règle ne les atteignait. C'est du décor partagé. */
.nav-membre { display: flex; gap: 24px; margin-left: 12px; flex-wrap: wrap; }
.nav-membre a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 15px var(--mk-font); color: var(--mk-text-2); text-decoration: none;
}
.nav-membre a:hover { color: var(--mk-primary); }
.nav-membre a[aria-current] { color: var(--mk-primary); font-weight: 700; }
.pastille-n {
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: var(--mk-r-pill); background: var(--mk-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px var(--mk-font); color: var(--mk-sur-accent);
}


/* En dessous de 820 px, la barre du membre ne disparaît pas : elle
   descend. Sur une page publique on peut masquer la navigation, le
   contenu offre d'autres portes ; connecté, la masquer laisserait
   quelqu'un sans aucun moyen d'atteindre ses envois. */
@media (max-width: 820px) {
  .nav-membre {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    margin: 0; gap: 0; flex-wrap: nowrap;
    background: var(--mk-card); border-top: 1px solid var(--mk-hairline);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .nav-membre a {
    flex: 1; justify-content: center; min-height: 60px; font-size: 12px;
    text-align: center; padding: 0 4px; line-height: 1.2;
  }
  .nav-membre a[aria-current] { box-shadow: inset 0 3px 0 var(--mk-action); }
  .pastille-n { margin-left: 4px; }
}

/* ---------- Le compte, dans l'en-tête ---------- */
.compte-lien {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 0 8px; font: 700 15px var(--mk-font); color: var(--mk-text); text-decoration: none;
}
.compte-lien .avatar { width: 34px; height: 34px; font-size: 14px; overflow: hidden; }
.compte-lien .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* C'est un <button> depuis qu'il ouvre un tiroir plutôt que de mener au
   profil : il faut donc lui retirer l'apparence que le navigateur donne
   aux boutons, et lui rendre le curseur d'un élément qu'on actionne. */
.compte-lien { background: none; border: 0; cursor: pointer; position: relative; }

/* ---------- Le tiroir du compte ----------
   « Profil » figurait dans la barre ET sous l'avatar : deux chemins pour
   une destination. La barre porte désormais ce que le service propose,
   identique pour tout le monde, et ce tiroir tout ce qui appartient au
   membre — groupé par nature, comme le fait BlaBlaCar. */
.entete .fin { position: relative; }
.tiroir {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 232px; padding: 6px;
  background: var(--mk-card);
  border: 1px solid var(--mk-hairline);
  border-radius: 18px;
  box-shadow: var(--mk-shadow-raised);
  display: flex; flex-direction: column;
}
.tiroir[hidden] { display: none; }
.tiroir a, .tiroir button {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font: 600 15px var(--mk-font); color: var(--mk-text);
  text-align: left; text-decoration: none; border-radius: 11px;
}
.tiroir a:hover, .tiroir button:hover { background: var(--mk-piste); }
.tiroir a[aria-current="page"] { color: var(--mk-primary); }
/* Le trait dit que ce qui suit est d'une autre nature : l'activité,
   puis l'identité, puis la sortie. */
.tiroir .groupe { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--mk-hairline-soft); border-radius: 0 0 11px 11px; }
.compte-lien .pastille-n { position: absolute; top: 2px; right: 2px; }

/* ---------- Ce que js/tot.js décide avant la première image ----------
   Les pages sont livrées en état visiteur : c'est le bon choix, c'est
   l'état à afficher si le JavaScript échoue. Mais session.js, qui sait
   qui est là, arrive derrière 260 Ko de scripts — le temps que « Se
   connecter » s'affiche, se lise, et disparaisse.

   tot.js pose `data-membre` dans le <head>, avant que le corps ne soit
   analysé. La règle ci-dessous fait le reste : le lien n'est jamais
   peint, et sa place est gardée pour l'avatar qui va la prendre. Aucun
   saut de mise en page, aucun état faux, pas même une image. */
[data-membre="1"] .entete .btn-lien { display: none; }
[data-membre="1"] .entete .fin::after {
  content: "";
  width: 34px; height: 34px; margin: 0 8px;
  border-radius: 50%;
  background: var(--mk-avatar);
  flex: none;
}
/* Dès que l'avatar existe, le gabarit s'efface. */
[data-membre="1"] .entete .fin:has(.compte-lien)::after { display: none; }

/* ---------- Les boîtes de dialogue ----------
   Elles vivaient dans recherche.css, que la moitié des pages ne charge
   pas : le litige, l'alerte et la clôture s'ouvrent ailleurs. */
.voile {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(18, 22, 46, .55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 24px;
}
.voile[open], .voile.on { display: flex; }
.boite {
  background: var(--mk-card); border-radius: 28px; padding: 32px;
  width: min(100%, 560px); box-shadow: var(--mk-shadow-raised);
  position: relative;
}
.boite .ic { width: 56px; height: 56px; border-radius: var(--mk-r-pill); background: var(--mk-mint); display: grid; place-items: center; }
.boite h2 { font: 800 clamp(24px, 3vw, 30px)/1.2 var(--mk-font); color: var(--mk-primary); letter-spacing: -1px; margin-top: 20px; text-wrap: balance; }
.boite p { font: 400 16px/1.55 var(--mk-font); color: var(--mk-text-2); margin-top: 14px; }
.boite .btns { display: grid; gap: 12px; margin-top: 26px; }
.boite .pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mk-hairline); }
.boite .pied a { font: 700 15px var(--mk-font); color: var(--mk-primary); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.boite .pied span { font: 400 13px var(--mk-font); color: var(--mk-text-2); }
.fermer {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
  border-radius: var(--mk-r-pill); border: 0; background: var(--mk-bg);
  color: var(--mk-text); cursor: pointer; display: grid; place-items: center;
}

/* Les champs d'une boîte de dialogue empruntent ceux de la porte
   (compte.css) quand la page la charge ; sinon ils tombent sur ceci. */
.dlg-corps { margin-top: 4px; }
.dlg-corps .champ-p { display: block; margin-top: 18px; }
.dlg-corps .champ-p .l { display: block; font: 600 13px var(--mk-font); color: var(--mk-text-2); margin-bottom: 6px; }
.dlg-corps input, .dlg-corps textarea, .dlg-corps select {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: var(--mk-bg); border: 1px solid var(--mk-hairline-fort);
  border-radius: var(--mk-r-card); font: 500 16px var(--mk-font); color: var(--mk-text);
}
.dlg-corps textarea { resize: vertical; line-height: 1.5; }
.dlg-corps .aide-p { font: 400 13px/1.55 var(--mk-font); color: var(--mk-text-2); }
/* Une précision qui restreint ce que la commande fera : elle se lit avant
   les champs, donc elle se voit — sans crier comme une erreur. */
.dlg-note {
  margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  background: var(--mk-piste); border: 1px solid var(--mk-hairline);
  font: 500 13px/1.55 var(--mk-font); color: var(--mk-text-2);
}
.boite .erreur-p {
  background: var(--mk-refus-bg); color: var(--mk-refus-text);
  border-radius: var(--mk-r-card); padding: 14px 18px; margin-top: 18px;
  font: 600 15px/1.5 var(--mk-font);
}
.boite .erreur-p.bonne { background: var(--mk-mint); color: var(--mk-mint-text); }
/* La boîte peut dépasser l'écran sur un téléphone : elle défile. */
.boite { max-height: calc(100dvh - 48px); overflow-y: auto; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--mk-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mk-hairline-soft);
}
.entete .enveloppe { display: flex; align-items: center; gap: 32px; min-height: 76px; }
/* Le lien de retour à l'accueil. `min-height` parce qu'en dessous de 560 px
   le mot disparaît et il ne reste que les huit barres : 54 × 15, sous les
   24 px exigés. Les barres gardent leur taille, c'est la zone qui grandit. */
.marque { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 800 22px var(--mk-font); color: var(--mk-primary); text-decoration: none; letter-spacing: -.6px; }
/* Le sceau : un anneau, un colis en haut à gauche, un avion en bas à
   droite, et deux quadrants vides. C'est le vide qui dit les kilos que
   personne n'utilise. Son trait suit `currentColor`, donc la couleur du
   mot à côté — pas de variante sombre à maintenir. */
.marque .sceau { width: 32px; height: 32px; flex: none; }
.nav { display: flex; gap: 28px; margin-left: 8px; }
/* 44 px de cible : ces liens ne font que 21 px de haut sans cela, sous le
   minimum de 24 × 24 de WCAG 2.2. Le défaut était passé inaperçu parce que la
   navigation est masquée en dessous de 820 px, la largeur à laquelle je
   mesurais les cibles. */
.nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px var(--mk-font); color: var(--mk-text-2); text-decoration: none; }
.nav a:hover { color: var(--mk-primary); }
.entete .fin { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.bascule {
  /* `flex: none` : sans lui l'en-tête à l'étroit rétrécit le bouton à
     38 px de large et la cible passe sous les 44. */
  flex: none;
  width: 44px; height: 44px; border-radius: var(--mk-r-pill);
  display: grid; place-items: center; color: var(--mk-text-2);
}
.bascule:hover { background: var(--mk-hairline-soft); color: var(--mk-primary); }

/* ---------- Héros ---------- */
/* Le héros s'est raccourci en perdant ses deux boutons : le formulaire
   est devenu l'action, il n'y a plus rien à mettre au-dessus de lui.
   On resserre pour que la carte de recherche vienne mordre sur la
   photographie plutôt que de flotter en dessous. */
.heros .enveloppe { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 56px; align-items: center; padding-top: 48px; padding-bottom: 76px; }
.pastille-ligne {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--mk-r-pill); background: var(--mk-mint);
  font: 600 14px var(--mk-font); color: var(--mk-mint-text); margin-bottom: 24px;
}
.pastille-ligne i { width: 8px; height: 8px; border-radius: var(--mk-r-pill); background: var(--mk-action); flex: none; }
.titre-heros { font: 800 clamp(40px, 5vw, 68px)/1.05 var(--mk-font); color: var(--mk-primary); letter-spacing: -2px; text-wrap: balance; }
.chapo { font: 400 20px/1.5 var(--mk-font); color: var(--mk-text); margin-top: 24px; max-width: 520px; text-wrap: pretty; }
.actions-heros { display: flex; align-items: center; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.photo-heros { height: 420px; border-radius: var(--mk-r-card); background: var(--mk-avatar); box-shadow: var(--mk-shadow-photo); overflow: hidden; }
/* Le cadre est plus large que haut, la photo plus haute que large : on
   recadre. Le sujet est dans le tiers gauche, on ancre là plutôt qu'au
   centre — sinon la voyageuse sort du cadre en dessous de 1100 px. */
.photo-heros img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 32% center; }

/* ---------- Barre de recherche ---------- */
.recherche { position: relative; z-index: 2; margin-top: -72px; }
.recherche form {
  background: var(--mk-card); border-radius: var(--mk-r-pill);
  padding: 10px 10px 10px 12px; display: flex; align-items: center;
  box-shadow: var(--mk-shadow-raised); border: 1px solid var(--mk-hairline-soft);
}
.champ { flex: 1.2; padding: 8px 20px; min-width: 0; }
.champ.court { flex: .8; }
.champ label { display: block; font: 600 12px var(--mk-font); color: var(--mk-text-2); }
.champ input {
  width: 100%; border: 0; background: none; outline: none;
  font: 700 17px var(--mk-font); color: var(--mk-text);
}
.champ input::placeholder { color: var(--mk-text-2); font-weight: 500; }
.filet { width: 1px; height: 38px; background: var(--mk-hairline); flex: none; }
.note-recherche { display: flex; align-items: center; gap: 8px; padding: 12px 24px 0; font: 400 13px var(--mk-font); color: var(--mk-text-2); }

/* La barre se recolle en haut dès qu'elle sort de l'écran. */
.recherche.collee form {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  width: min(var(--mk-largeur) - var(--mk-gouttiere) * 2, 100vw - 32px);
  z-index: 39;
}
/* Un fond pleine largeur derrière elle : sans lui, le contenu qui défile
   dessous ressort entre l'en-tête et la barre, et les cartes de dates
   apparaissent coupées en deux. */
.recherche.collee::before {
  content: ''; position: fixed; z-index: 38;
  left: 0; right: 0; top: 76px; height: 92px;
  background: var(--mk-bg);
  border-bottom: 1px solid var(--mk-hairline-soft);
}
/* La compensation vaut exactement la hauteur du formulaire sorti du flux :
   quelques pixels de trop et la page sursaute au moment où elle se colle. */
.recherche.collee { margin-bottom: 76px; }

/* ---------- Bande de dates ---------- */
.dates { padding-top: 52px; }
.tete-section { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tete-section h2 { font: 800 clamp(24px, 2.4vw, 32px) var(--mk-font); color: var(--mk-primary); letter-spacing: -1px; }
.tete-section .lien { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px var(--mk-font); color: var(--mk-mint-text); text-decoration: none; }
.jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 20px; }
.jour {
  padding: 14px 8px; border-radius: 16px; text-align: center;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  box-shadow: var(--mk-shadow-card); min-height: 44px;
}
.jour .j { font: 600 13px var(--mk-font); color: var(--mk-text-2); }
.jour .p { font: 800 19px var(--mk-font); color: var(--mk-text); margin-top: 4px; }
.jour .u { font: 500 12px var(--mk-font); color: var(--mk-text-2); }
.jour.bas { background: var(--mk-primary-surface); border-color: transparent; }
.jour.bas .j, .jour.bas .u { color: rgba(255,255,255,.7); }
.jour.bas .p { color: #fff; }

/* ---------- Cartes de trajet ---------- */
.trajets { padding-top: 52px; }
.grille-trajets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.trajet { position: relative; padding-top: 14px; }
.badge {
  position: absolute; top: 0; left: 20px; z-index: 2;
  padding: 6px 14px; border-radius: var(--mk-r-pill);
  background: var(--mk-text); color: var(--mk-bg); font: 700 12px var(--mk-font);
}
/* La carte est un lien : trois trajets affichés sur l'accueil, et aucun
   moyen de les ouvrir tant qu'elle restait un <div>. `display: block` parce
   qu'un <a> est en ligne par défaut. */
.carte {
  display: block;
  background: var(--mk-card); border-radius: var(--mk-r-card); padding: 22px;
  box-shadow: var(--mk-shadow-card); border: 1px solid var(--mk-hairline-soft);
  height: 100%;
}
.voyageur { display: flex; align-items: center; gap: 12px; }
/* L'initiale est en indigo, pas en blanc : le sable de l'avatar est
   clair, et du blanc dessus ne donne que 1,46 de contraste. */
/* L'initiale suit --mk-avatar-text : le fond d'avatar change de clarté d'un
   thème à l'autre — sable en clair, indigo foncé en sombre — donc l'encre
   aussi. Un jeton dit les deux valeurs ; il remplace la règle
   [data-theme="dark"] .avatar qui faisait le même travail à côté. */
.avatar { width: 48px; height: 48px; border-radius: var(--mk-r-pill); background: var(--mk-avatar); flex: none; display: grid; place-items: center; font: 800 18px var(--mk-font); color: var(--mk-avatar-text); }
.voyageur .nom { font: 700 18px var(--mk-font); color: var(--mk-text); }
.marques { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.verifie { padding: 3px 9px; border-radius: var(--mk-r-pill); background: var(--mk-mint); font: 600 11px var(--mk-font); color: var(--mk-mint-text); }
.note { font: 600 13px var(--mk-font); color: var(--mk-text-2); }
.vol { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.vol .h { font: 800 22px var(--mk-font); color: var(--mk-text); }
.vol .a { font: 400 13px var(--mk-font); color: var(--mk-text-2); }
.vol .trait { flex: 1; position: relative; height: 2px; background: var(--mk-hairline); }
.vol .trait span {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  background: var(--mk-card); padding: 0 8px;
  font: 500 12px var(--mk-font); color: var(--mk-text-2); white-space: nowrap;
}
.quand { font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 14px; }
.separateur { height: 1px; background: var(--mk-hairline-soft); margin: 16px 0; }
.bas-carte { display: flex; align-items: flex-end; gap: 16px; }
.kilos { font: 800 22px var(--mk-font); color: var(--mk-mint-text); letter-spacing: -.5px; }
.kilos small { font: 600 15px var(--mk-font); color: var(--mk-text-2); }
.jauge { display: flex; gap: 3px; margin-top: 10px; }
.jauge i { flex: 1; height: 12px; border-radius: 3px; background: var(--mk-primary); }
.jauge i.libre { background: var(--mk-action); }
.prix { text-align: right; flex: none; }
.prix .v { font: 800 28px var(--mk-font); color: var(--mk-text); letter-spacing: -1px; }
.prix .u { font: 500 13px var(--mk-font); color: var(--mk-text-2); }
.rappel-sequestre {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 10px 12px; border-radius: 12px; background: var(--mk-mint);
  font: 600 12px var(--mk-font); color: var(--mk-mint-text);
}

/* ---------- Comment ça marche ---------- */
.etapes { padding-top: 72px; }
.grille-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 28px; }
.etape {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); box-shadow: var(--mk-shadow-card); overflow: hidden;
}
/* Les trois illustrations n'ont pas le même format — 3:2 pour l'avion,
   5:4 pour la valise et le bouclier. On les pose donc dans un cadre
   commun sans les recadrer : `contain` les laisse entières, et le crème
   du cadre est celui de leur propre fond (#FBF6F0 mesuré aux quatre
   coins), si bien que la marge ajoutée ne se voit pas.

   Ce crème est fixe dans les deux thèmes. En sombre, la vignette reste
   claire : c'est une image, elle s'assume comme telle plutôt que de
   flotter sur un halo qui trahirait ses bords. */
.vignette { aspect-ratio: 3 / 2; background: #FBF6F0; }
.vignette img { display: block; width: 100%; height: 100%; object-fit: contain; }
.texte-etape { padding: 24px; }
.etape .num {
  width: 44px; height: 44px; border-radius: var(--mk-r-pill);
  background: var(--mk-mint); color: var(--mk-mint-text);
  display: grid; place-items: center; font: 800 18px var(--mk-font); margin-bottom: 16px;
}
.etape h3 { font: 700 20px var(--mk-font); color: var(--mk-text); }
.etape p { font: 400 16px/1.55 var(--mk-font); color: var(--mk-text-2); margin-top: 8px; }

/* ---------- La remise ---------- */
.remise {
  padding-top: 80px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px; align-items: center;
}
.photo-remise { border-radius: var(--mk-r-card); overflow: hidden; box-shadow: var(--mk-shadow-photo); background: var(--mk-avatar); }
.photo-remise img { display: block; width: 100%; height: auto; }
.dire-remise h2 { font: 800 clamp(24px, 2.4vw, 32px)/1.15 var(--mk-font); color: var(--mk-primary); letter-spacing: -1px; text-wrap: balance; }
.dire-remise p { font: 400 17px/1.55 var(--mk-font); color: var(--mk-text-2); margin-top: 14px; }
.points { list-style: none; margin: 20px 0 28px; display: grid; gap: 12px; }
.points li { position: relative; padding-left: 32px; font: 400 16px/1.5 var(--mk-font); color: var(--mk-text); }
/* La coche est décorative : des pseudo-éléments ne se lisent pas au
   lecteur d'écran, c'est exactement ce qu'on veut ici.

   Le tracé passe par un masque plutôt que par une image de fond : le
   SVG d'une URL de données ne peut pas lire une variable CSS, alors
   qu'un masque laisse la couleur au CSS — et donc au thème. */
.points li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: var(--mk-r-pill); background: var(--mk-mint);
}
.points li::after {
  content: ''; position: absolute; left: 5px; top: 8px; width: 12px; height: 10px;
  background: var(--mk-mint-text);
  -webkit-mask: var(--mk-coche) center / 12px 10px no-repeat;
          mask: var(--mk-coche) center / 12px 10px no-repeat;
}

/* ---------- Bande des destinations ---------- */
.lagon { position: relative; margin-top: 96px; min-height: 380px; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.fond-lagon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Le lagon est clair : sans voile, aucun texte ne tiendrait dessus. Le
   dégradé est opaque à gauche, là où le texte se pose, et s'efface vers
   la droite pour laisser voir l'eau. Les valeurs sont mesurées, pas
   estimées — voir la note dans README. */
.lagon::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg,
    rgba(12, 16, 36, .93) 0%,
    rgba(12, 16, 36, .90) 34%,
    rgba(12, 16, 36, .62) 58%,
    rgba(12, 16, 36, .18) 100%);
}
/* `width: 100%` n'est pas décoratif : .enveloppe porte `margin: 0 auto`,
   et dans une grille des marges automatiques désactivent l'étirement.
   Sans cette largeur, le bloc se réduisait à son contenu puis se
   centrait — le texte glissait vers la droite, là où le voile s'efface
   et où plus rien n'est lisible. */
.dire-lagon { width: 100%; padding-top: 56px; padding-bottom: 56px; }
.dire-lagon h2 { max-width: 620px; font: 800 clamp(26px, 3vw, 40px)/1.1 var(--mk-font); color: #fff; letter-spacing: -1.4px; }
.dire-lagon p { font: 400 17px/1.55 var(--mk-font); color: #E6E9F5; margin-top: 16px; max-width: 480px; text-wrap: pretty; }
.lignes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 620px; }
/* Pastilles blanches pleines : sur une photo, un fond translucide donne
   un contraste qui change d'un pixel à l'autre. */
.lignes a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--mk-r-pill); background: #fff; color: #2E3A8C;
  font: 600 15px var(--mk-font); text-decoration: none;
}
.lignes a:hover { background: #E4F7F3; }

/* ---------- Bande marine · simulateur ---------- */
.bande { margin-top: 80px; }
.bande .interieur {
  background: var(--mk-primary-surface); border-radius: 28px;
  padding: 56px; display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 48px; align-items: center;
}
.bande h2 { font: 800 clamp(26px, 3vw, 38px)/1.15 var(--mk-font); color: #fff; letter-spacing: -1px; }
.bande p { font: 400 17px/1.55 var(--mk-font); color: rgba(255,255,255,.78); margin-top: 14px; max-width: 460px; }
.simulateur { background: var(--mk-card); border-radius: var(--mk-r-card); padding: 24px; }
.sim-ligne { padding: 12px 0; border-bottom: 1px solid var(--mk-hairline-soft); }
.sim-ligne:last-of-type { border-bottom: 0; }
.sim-ligne label { display: block; font: 600 12px var(--mk-font); color: var(--mk-text-2); }
.sim-ligne input, .sim-ligne select { width: 100%; border: 0; background: none; outline: none; font: 700 17px var(--mk-font); color: var(--mk-text); }
.estimation { margin-top: 8px; padding: 16px; border-radius: 16px; background: var(--mk-mint); }
.estimation .l { font: 600 12px var(--mk-font); color: var(--mk-mint-text); }
.estimation .v { font: 800 30px var(--mk-font); color: var(--mk-mint-text); letter-spacing: -1px; }
.mention { font: 400 12px/1.5 var(--mk-font); color: rgba(255,255,255,.6); margin-top: 16px; }

/* ---------- Confiance ---------- */
.confiance { padding-top: 80px; }
.grille-confiance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
.bloc-confiance { background: var(--mk-card); border-radius: var(--mk-r-card); padding: 24px; border: 1px solid var(--mk-hairline-soft); box-shadow: var(--mk-shadow-card); }
.bloc-confiance .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--mk-mint); color: var(--mk-mint-text); display: grid; place-items: center; margin-bottom: 14px; }
.bloc-confiance h3 { font: 700 17px var(--mk-font); color: var(--mk-text); }
.bloc-confiance p { font: 400 14px/1.55 var(--mk-font); color: var(--mk-text-2); margin-top: 6px; }

/* ---------- FAQ ---------- */
.faq { padding-top: 80px; }
.grille-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; margin-top: 24px; }
.question { background: var(--mk-card); border-radius: 16px; border: 1px solid var(--mk-hairline-soft); overflow: hidden; }
.question summary {
  list-style: none; cursor: pointer; padding: 20px 22px; min-height: 44px;
  font: 700 17px var(--mk-font); color: var(--mk-text);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: '+'; font: 400 22px var(--mk-font); color: var(--mk-primary); flex: none; }
.question[open] summary::after { content: '−'; }
.question p { padding: 0 22px 20px; font: 400 15px/1.6 var(--mk-font); color: var(--mk-text-2); }

/* ---------- Pied de page ---------- */
.pied { margin-top: 96px; padding: 56px 0 32px; border-top: 1px solid var(--mk-hairline); }
/* La bande du lagon touche déjà le pied : ni marge ni filet entre les deux. */
.lagon + .pied { margin-top: 0; border-top: 0; }
.grille-pied { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.pied h3 { font: 700 14px var(--mk-font); color: var(--mk-text); margin-bottom: 14px; }
.pied a { display: block; font: 400 15px/2 var(--mk-font); color: var(--mk-text-2); text-decoration: none; }
.pied a:hover { color: var(--mk-primary); }
.pied .baseline { font: 400 15px/1.6 var(--mk-font); color: var(--mk-text-2); margin-top: 12px; max-width: 320px; }
.bas-pied { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--mk-hairline-soft); font: 400 13px var(--mk-font); color: var(--mk-text-2); }

/* ============================================================
   Adaptation — la gouttière se resserre avant que le contenu ne se
   comprime, et les grilles retombent par paliers plutôt que d'un coup.
   ============================================================ */
@media (max-width: 1100px) {
  :root { --mk-gouttiere: 40px; }
  .heros .enveloppe { grid-template-columns: 1fr; gap: 40px; padding-bottom: 80px; }
  .photo-heros { height: 320px; }
  .grille-trajets { grid-template-columns: repeat(2, 1fr); }
  .grille-confiance { grid-template-columns: repeat(2, 1fr); }
  .bande .interieur { grid-template-columns: 1fr; padding: 40px; }
  .remise { gap: 40px; }
  .grille-pied { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  :root { --mk-gouttiere: 20px; }
  .nav { display: none; }
  /* L'en-tête débordait : marque, bascule, « Publier un trajet » et
     « Se connecter » réclamaient 544 px pour 350 disponibles, et toute la
     page défilait latéralement. On resserre les écarts et on réduit les
     boutons plutôt que d'en supprimer un — « Publier un trajet » est la
     seule porte d'entrée du voyageur sur les pages de recherche. */
  .entete .enveloppe { gap: 10px; }
  .btn-contour { padding: 0 14px; font-size: 14px; }
  .btn-lien { font-size: 15px; }
  .titre-heros { letter-spacing: -1px; }
  /* La barre passe en colonne : quatre champs côte à côte sur 360 px
     donneraient quatre colonnes illisibles. */
  .recherche { margin-top: -32px; }
  .recherche form { flex-direction: column; align-items: stretch; border-radius: var(--mk-r-card); padding: 8px; }
  .filet { width: auto; height: 1px; }
  .champ { padding: 12px 16px; }
  .recherche .btn { width: 100%; margin-top: 8px; }
  /* Sur téléphone, une barre en quatre lignes collée en haut mangerait
     la moitié de l'écran : elle reste dans le flux. */
  .recherche.collee form { position: static; transform: none; width: auto; }
  .recherche.collee::before { display: none; }
  .recherche.collee { margin-bottom: 0; }
  .jours { grid-template-columns: repeat(4, 1fr); }
  .grille-trajets, .grille-etapes, .grille-faq { grid-template-columns: 1fr; }
  .grille-confiance { grid-template-columns: 1fr; }
  .grille-pied { grid-template-columns: 1fr; gap: 28px; }
  .bande .interieur { padding: 28px; }
  /* La photo passe au-dessus du texte : sur téléphone on lit de haut en
     bas, et une photo qui suit son propre paragraphe arrive trop tard. */
  .remise { grid-template-columns: 1fr; gap: 28px; }
  /* Le texte occupe toute la largeur : le dégradé latéral ne protège
     plus rien, il devient un voile uniforme. */
  .lagon::before { background: linear-gradient(180deg, rgba(12, 16, 36, .84), rgba(12, 16, 36, .93)); }
  .dire-lagon h2 { letter-spacing: -.8px; }
}

/* En dessous de 560 px, même resserré, l'en-tête ne tient plus : le mot
   « May'Kilos » cède la place, les huit barres de la marque suffisent à
   l'identifier et restent cliquables. */
/* En dessous de 560 px, même resserré, l'en-tête ne tient plus : le mot
   « May'Kilos » cède la place. Le sceau seul identifie le site — c'est
   exactement ce pour quoi il a été dessiné. */
@media (max-width: 560px) {
  .marque { font-size: 0; gap: 0; }
}

/* ============================================================
   Mouvement réduit — réglage système, iOS comme Android.
   On retire les déplacements ; les fondus restent, ils ne déclenchent
   rien. Même règle que dans l'application.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Le choix d'une ville ----------
   Le <datalist> natif ne sait ni grouper trois aéroports sous leur ville,
   ni porter deux niveaux de texte, ni se dessiner pareil d'un navigateur
   à l'autre. Ce panneau reprend la structure de Google Flights : la ville
   d'abord, ses aéroports en dessous et décalés, une seconde ligne qui
   situe. */
.vc-hote { position: relative; }
.vc-panneau {
  position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 8px);
  /* Plus large que le champ : les lignes portent maintenant la ville, le
     code et le nom de l'aéroport, et 268 px les cassaient en deux. */
  min-width: 340px; max-width: calc(100vw - 32px);
  max-height: 336px; overflow-y: auto; padding: 6px;
  background: var(--mk-card);
  border: 1px solid var(--mk-hairline);
  border-radius: 18px;
  box-shadow: var(--mk-shadow-raised);
}
.vc-panneau[hidden] { display: none; }
.vc-ligne {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 0; background: none; cursor: pointer; text-align: left;
  border-radius: 11px; font: inherit; color: var(--mk-text);
}
.vc-ligne:hover, .vc-ligne.on { background: var(--mk-piste); }
.vc-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vc-n { font: 700 15px var(--mk-font); }
/* Le code colle à la ville — « Mamoudzou (DZA) » — au lieu de partir se
   ranger à droite. C'est la forme d'un billet d'avion, et elle garde
   ensemble les deux choses qui désignent le même endroit. */
.vc-c {
  font: 600 12.5px ui-monospace, Menlo, monospace;
  color: var(--mk-text-2); letter-spacing: .4px;
}
/* Le nom de l'aéroport, après le code : présent mais second. */
.vc-a { font: 500 13.5px var(--mk-font); color: var(--mk-text-2); }
.vc-s { font: 500 13px var(--mk-font); color: var(--mk-text-2); }
/* La ville qui regroupe : un peu plus affirmée, puisqu'elle est le choix
   attendu dans la plupart des cas. */
.vc-ville .vc-n { color: var(--mk-primary); }
/* Le territoire : un cran au-dessus de la ville. Il ouvre la liste, et un
   filet le sépare des villes qui suivent — sans quoi « Madagascar » et
   « Mahajanga » se lisent comme deux entrées de même rang. */
.vc-terr .vc-n { font-size: 16px; color: var(--mk-primary); }
.vc-terr + .vc-ligne:not(.vc-terr) {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--mk-hairline);
}
/* Les aéroports d'une ville, décalés sous elle — c'est le décalage qui
   dit « ceux-ci appartiennent à celle-là », pas une ligne de séparation. */
.vc-fils { padding-left: 26px; }
.vc-fils .vc-n { font-weight: 600; font-size: 14px; }
.vc-rien { padding: 14px 12px; font: 500 14px var(--mk-font); color: var(--mk-text-2); line-height: 1.5; }