/* ============================================================
   May'Kilos — le tunnel de publication

   D'après « P1 - Site publication.dc.html ».

   Un tunnel : la navigation du site, le pied de page et tout le décor
   disparaissent. Il ne reste qu'un bouton retour, la marque et un fil de
   progression. Une question par écran. Dans un tunnel, chaque lien
   visible est une sortie.

   Sur grand écran, une colonne centrée de 640 px sur fond uni — pas une
   mise en page étalée : un formulaire à une question ne gagne rien à
   s'élargir. Seule l'étape du point de remise se scinde, parce qu'elle
   porte une carte.
   ============================================================ */

body.tunnel { background: var(--mk-bg); }

/* ---------- La barre du tunnel ---------- */
.t-barre {
  position: sticky; top: 0; z-index: 20;
  background: var(--mk-bg);
  display: flex; align-items: center; gap: 16px;
  padding: 18px clamp(20px, 4vw, 40px);
}
.t-retour {
  width: 52px; height: 52px; border-radius: var(--mk-r-pill); flex: none;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  box-shadow: var(--mk-shadow-card);
  display: grid; place-items: center; color: var(--mk-primary);
}
/* Dans le tunnel, le décor a disparu : le sceau est la seule marque à
   l'écran, il n'a donc pas le droit d'être décoratif. */
.t-marque { display: inline-flex; align-items: center; gap: 8px; font: 800 17px var(--mk-font); color: var(--mk-primary); letter-spacing: -.4px; flex: none; }
.t-marque .sceau { width: 24px; height: 24px; flex: none; }
.t-fil { display: flex; gap: 8px; flex: 1; max-width: 470px; }
.t-fil i { flex: 1; height: 6px; border-radius: var(--mk-r-pill); background: var(--mk-piste); }
.t-fil i.faite { background: var(--mk-action); }

/* ---------- Une étape ---------- */
.etape-p { display: none; }
.etape-p.on { display: block; }

.t-colonne { max-width: 640px; margin: 0 auto; padding: clamp(24px, 5vh, 56px) clamp(20px, 4vw, 40px) 80px; }
.t-colonne h1 { font: 800 clamp(30px, 4.4vw, 46px)/1.1 var(--mk-font); color: var(--mk-primary); letter-spacing: -1.6px; text-wrap: balance; }
.t-colonne .sous { font: 400 17px/1.55 var(--mk-font); color: var(--mk-text-2); margin-top: 14px; }
/* Le bouton d'étape occupe toute la largeur : c'est la seule action de
   l'écran. Mais `.t-colonne .btn` atteignait AUSSI les boutons pris dans
   une rangée — les « Modifier » du récapitulatif — qui réclamaient alors
   514 px et écrasaient la colonne de texte à zéro. Chaque libellé
   tombait à un mot par ligne, sous un bouton qui le recouvrait. C'est
   l'écran juste avant publication.

   La règle ne vise plus que les boutons enfants directs de la colonne. */
.t-colonne > .btn { width: 100%; margin-top: 32px; }

.t-label { font: 600 13px var(--mk-font); color: var(--mk-text-2); margin-top: 32px; }
.t-champ {
  display: flex; align-items: center; gap: 14px; margin-top: 8px;
  background: var(--mk-card); border-radius: var(--mk-r-card);
  padding: 0 20px; min-height: 72px;
  box-shadow: inset 0 0 0 2px var(--mk-action);
}
.t-champ input {
  flex: 1; border: 0; background: none; outline: none; min-height: 60px;
  font: 800 26px var(--mk-font); color: var(--mk-text); letter-spacing: .5px;
}
.t-pourquoi {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
  font: 600 15px var(--mk-font); color: var(--mk-primary); text-decoration: underline;
  cursor: pointer; list-style: none;
}
.t-pourquoi::-webkit-details-marker { display: none; }
.t-pourquoi-d p {
  max-width: 56ch; margin: 2px 0 0;
  font: 400 15px/1.6 var(--mk-font); color: var(--mk-muted);
}

/* ---------- Les vols trouvés ---------- */
.t-vols { display: grid; gap: 12px; margin-top: 10px; }
.t-vol {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 20px 22px; box-shadow: var(--mk-shadow-card);
  display: flex; align-items: center; gap: 18px; cursor: pointer; text-align: left; width: 100%;
}
.t-vol input { position: absolute; opacity: 0; width: 0; height: 0; }
.t-vol .corps { flex: 1; min-width: 0; }
.t-vol .marque-r {
  width: 26px; height: 26px; border-radius: var(--mk-r-pill); flex: none;
  box-shadow: inset 0 0 0 2px var(--mk-hairline-fort); display: grid; place-items: center;
}
.t-vol .marque-r svg { opacity: 0; }
.t-vol input:checked ~ .marque-r { background: var(--mk-action); box-shadow: none; }
.t-vol input:checked ~ .marque-r svg { opacity: 1; }
.t-vol input:focus-visible ~ .marque-r { outline: 3px solid var(--mk-primary); outline-offset: 2px; }
.t-ou { display: flex; align-items: center; gap: 16px; margin-top: 34px; font: 400 14px var(--mk-font); color: var(--mk-text-2); }
.t-ou::before, .t-ou::after { content: ''; flex: 1; height: 1px; background: var(--mk-hairline); }
.t-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.t-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 520px) { .t-deux, .t-trois { grid-template-columns: 1fr; } }

/* ---------- Les suggestions d'aéroport ----------
   Le champ est libre, mais ce qui part en base est un code IATA : sans
   choix dans la liste, « Paris » ne dit pas si c'est Roissy ou Orly. */
.t-petit { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-fort);
  border-radius: var(--mk-r-card); box-shadow: var(--mk-shadow-card);
  max-height: 280px; overflow-y: auto; padding: 6px;
}
.suggest button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  border-radius: 12px; padding: 10px 12px; min-height: 44px; cursor: pointer;
  font: 500 15px var(--mk-font); color: var(--mk-text);
}
.suggest button:hover, .suggest button[aria-selected="true"] { background: var(--mk-bg); }
.suggest button .c { font-weight: 800; color: var(--mk-primary); margin-right: 8px; }
.suggest button .p { display: block; font: 400 13px var(--mk-font); color: var(--mk-text-2); }
.suggest .rien { padding: 12px; font: 400 14px var(--mk-font); color: var(--mk-text-2); }
.t-petit {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 14px 18px; min-height: 64px;
}
.t-petit .l { font: 600 13px var(--mk-font); color: var(--mk-text-2); }
.t-petit input { width: 100%; border: 0; background: none; outline: none; min-height: 26px; font: 700 16px var(--mk-font); color: var(--mk-text); }
.t-petit input::placeholder { color: var(--mk-text-2); font-weight: 500; }

/* ---------- Le compteur géant ---------- */
.t-compteur { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 8vw, 72px); margin-top: 46px; }
.t-compteur button {
  width: 68px; height: 68px; border-radius: var(--mk-r-pill); flex: none;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  box-shadow: var(--mk-shadow-card); color: var(--mk-text);
  font: 400 30px var(--mk-font); display: grid; place-items: center;
}
.t-compteur button.plus { background: var(--mk-action); border-color: transparent; color: var(--mk-on-action); box-shadow: var(--mk-shadow-cta); }
.t-compteur button:disabled { opacity: .4; cursor: not-allowed; }
.t-compteur .val { text-align: center; min-width: 140px; }
.t-compteur .val .n { font: 800 clamp(48px, 9vw, 76px)/1 var(--mk-font); color: var(--mk-primary); letter-spacing: -3px; }
.t-compteur .val .n.vert { color: var(--mk-mint-text); }
.t-compteur .val .n.rouge { color: var(--mk-refus-text); }
.t-compteur .val .u { font: 400 15px var(--mk-font); color: var(--mk-text-2); margin-top: 8px; }

/* ---------- La franchise ---------- */
.franchise {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 22px; margin-top: 40px; box-shadow: var(--mk-shadow-card);
}
.franchise .tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.franchise .tete .l { font: 500 15px var(--mk-font); color: var(--mk-text); }
.franchise .tete .v { font: 800 17px var(--mk-font); color: var(--mk-primary); }
.franchise .barre { display: flex; gap: 3px; height: 12px; margin: 14px 0 8px; }
.franchise .barre i { border-radius: 3px; background: var(--mk-primary-surface); }
.franchise .barre i.vendre { background: var(--mk-action); }
.franchise .pieds { display: flex; justify-content: space-between; gap: 16px; font: 400 14px var(--mk-font); color: var(--mk-text-2); }
.franchise .pieds .d { color: var(--mk-mint-text); font-weight: 600; }
.franchise .avert { font: 400 13px/1.55 var(--mk-font); color: var(--mk-text-2); margin-top: 14px; }

/* ---------- Les phrases à cocher ---------- */
.phrases { display: grid; gap: 10px; margin-top: 28px; }
.phrase {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 20px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); cursor: pointer;
}
.phrase input { position: absolute; opacity: 0; width: 0; height: 0; }
.phrase .case { width: 26px; height: 26px; border-radius: 9px; flex: none; box-shadow: inset 0 0 0 2px var(--mk-hairline-fort); display: grid; place-items: center; }
.phrase .case svg { opacity: 0; }
.phrase input:checked + .case { background: var(--mk-action); box-shadow: none; }
.phrase input:checked + .case svg { opacity: 1; }
.phrase input:focus-visible + .case { outline: 3px solid var(--mk-primary); outline-offset: 2px; }
.phrase .lib { font: 700 16px var(--mk-font); color: var(--mk-text); }
/* La première phrase est celle qui protège tout le monde : le voyageur
   emballe lui-même, donc il sait ce qu'il transporte. Elle se distingue. */
.phrase.cle { background: var(--mk-mint); border-color: transparent; }
.phrase.cle .lib { color: var(--mk-mint-text); }
.t-zone {
  width: 100%; margin-top: 8px; min-height: 120px; resize: vertical;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 16px 20px;
  font: 400 16px/1.5 var(--mk-font); color: var(--mk-text); outline: none;
}
.t-zone:focus { box-shadow: inset 0 0 0 2px var(--mk-action); }
.t-compte { display: flex; justify-content: space-between; gap: 16px; font: 400 13px var(--mk-font); color: var(--mk-text-2); margin-top: 8px; }

/* ---------- Le prix ---------- */
.conseil {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 18px;
  border-radius: var(--mk-r-pill); font: 600 15px var(--mk-font);
  background: var(--mk-mint); color: var(--mk-mint-text); margin-top: 22px;
}
.conseil.haut { background: var(--mk-refus-bg); color: var(--mk-refus-text); }
.consequence { font: 500 17px/1.5 var(--mk-font); color: var(--mk-text); margin-top: 16px; }
.marche { margin-top: 42px; }
.marche h2 { font: 800 21px var(--mk-font); color: var(--mk-primary); letter-spacing: -.5px; }
.marche .sous { font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 6px; }
.marche ul { display: grid; gap: 10px; margin-top: 16px; }
.marche li {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); box-shadow: var(--mk-shadow-card);
}
.marche .quand { flex: 1; min-width: 0; }
/* `display: block` explicite : ce sont des <span>, qui resteraient sur la
   même ligne — la date et la ligne se collaient l'une à l'autre. */
.marche .quand .d { display: block; font: 700 16px var(--mk-font); color: var(--mk-text); }
.marche .quand .s { display: block; font: 400 13px var(--mk-font); color: var(--mk-text-2); margin-top: 2px; }
.marche .pk { text-align: right; flex: none; }
.marche .pk .v { display: block; font: 800 22px var(--mk-font); color: var(--mk-primary); }
.marche .pk .u { display: block; font: 400 12px var(--mk-font); color: var(--mk-text-2); }
.etat {
  min-height: 32px; padding: 4px 14px; border-radius: var(--mk-r-pill); flex: none;
  display: inline-flex; align-items: center; font: 600 13px var(--mk-font);
  background: var(--mk-mint); color: var(--mk-mint-text);
}
/* « Complet » n'est pas une bonne nouvelle pour celui qui lit, c'est une
   preuve que le prix tient. Il se distingue des kilos encore libres. */
.etat.complet { background: var(--mk-avatar); color: var(--mk-avatar-text); }

.gain {
  background: var(--mk-mint); border-radius: var(--mk-r-card);
  padding: 24px; margin-top: 34px;
}
.gain .t { font: 800 clamp(22px, 2.6vw, 28px) var(--mk-font); color: var(--mk-mint-text); letter-spacing: -.8px; }
.gain .s { font: 400 15px/1.55 var(--mk-font); color: var(--mk-mint-text); margin-top: 8px; }

/* ---------- Le point de remise, la seule page qui se scinde ---------- */
.remise-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 70vh; }
.remise-form { padding: clamp(24px, 5vh, 48px) clamp(20px, 4vw, 48px) 80px; max-width: 720px; margin-left: auto; width: 100%; }
/* Cette étape n'est pas dans .t-colonne : sans cette règle, le bouton reste
   en ligne et vient chevaucher « + Ajouter un autre point ». */
.remise-form .btn { width: 100%; margin-top: 32px; }
.remise-form .t-ajouter { display: flex; }
.remise-carte { position: relative; overflow: hidden; min-height: 340px;
  background:
    linear-gradient(var(--mk-hairline) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, var(--mk-hairline) 1px, transparent 1px) 0 0 / 120px 100%,
    var(--mk-bg);
}
.remise-carte .eau { position: absolute; left: 0; right: 0; top: 56%; height: 40px; background: var(--mk-mint); }
.remise-carte .pt { position: absolute; width: 22px; height: 22px; border-radius: var(--mk-r-pill); border: 4px solid var(--mk-card); }
.remise-carte .pt.a { background: var(--mk-action); left: 24%; top: 38%; }
.remise-carte .pt.b { background: var(--mk-primary-surface); left: 64%; top: 74%; }
.remise-carte .lien { position: absolute; left: 26%; top: 42%; width: 40%; height: 34%; border-bottom: 2px dashed var(--mk-hairline-fort); border-right: 2px dashed var(--mk-hairline-fort); }
.bulle {
  position: absolute; top: 24px; left: 24px; right: 24px; max-width: 360px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 16px 18px; box-shadow: var(--mk-shadow-card);
}
.bulle .t { font: 700 15px var(--mk-font); color: var(--mk-text); }
.bulle .s { font: 400 14px/1.5 var(--mk-font); color: var(--mk-text-2); margin-top: 4px; }
.legende { position: absolute; left: 24px; bottom: 24px; display: grid; gap: 8px; }
.legende span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px;
  border-radius: var(--mk-r-pill); background: var(--mk-card);
  border: 1px solid var(--mk-hairline-soft); box-shadow: var(--mk-shadow-card);
  font: 500 14px var(--mk-font); color: var(--mk-text);
}
.legende span::before { content: ''; width: 12px; height: 12px; border-radius: var(--mk-r-pill); background: var(--mk-action); flex: none; }
.legende span.b::before { background: var(--mk-primary-surface); }

.pt-choix {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 20px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); margin-top: 10px; font: 700 16px var(--mk-font); color: var(--mk-text);
}
.pt-choix.actif { box-shadow: inset 0 0 0 2px var(--mk-action); }
.pt-choix::before { content: ''; width: 12px; height: 12px; border-radius: var(--mk-r-pill); background: var(--mk-action); flex: none; }
.pt-choix.b::before { background: var(--mk-primary-surface); }
.pt-choix .quand-p { margin-left: auto; font: 400 14px var(--mk-font); color: var(--mk-text-2); }
.t-ajouter {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px;
  font: 700 15px var(--mk-font); color: var(--mk-primary);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.pt-neuf { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pt-neuf input {
  flex: 1; min-width: 200px; min-height: 56px; padding: 0 18px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-fort);
  border-radius: var(--mk-r-card); font: 500 16px var(--mk-font); color: var(--mk-text);
}
/* .remise-form .btn passe tout en pleine largeur ; ici le bouton doit
   tenir à côté du champ, sinon la ligne se casse en deux. */
.pt-neuf .btn { min-height: 56px; width: auto; flex: none; margin-top: 0; }

/* ---------- Le récapitulatif ---------- */
.recap { background: var(--mk-card); border: 1px solid var(--mk-hairline-soft); border-radius: var(--mk-r-card); overflow: hidden; margin-top: 30px; box-shadow: var(--mk-shadow-card); }
.recap-l { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--mk-hairline); }
.recap-l:last-child { border-bottom: 0; }
.recap-l .corps { flex: 1; min-width: 0; }
.recap-l .l { font: 500 13px var(--mk-font); color: var(--mk-text-2); }
.recap-l .v { font: 700 17px/1.4 var(--mk-font); color: var(--mk-text); margin-top: 2px; }
.recap-l .s { font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 2px; }
.recap-l .btn-contour { flex: none; width: auto; margin-top: 0; }
.recap-note { font: 400 13px var(--mk-font); color: var(--mk-text-2); margin-top: 12px; }

.t-titre2 { font: 800 clamp(21px, 2.4vw, 26px) var(--mk-font); color: var(--mk-primary); letter-spacing: -.7px; margin-top: 40px; }
.choix { display: grid; gap: 12px; margin-top: 16px; }
.choix-i {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); cursor: pointer;
}
.choix-i input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix-i .rond { width: 24px; height: 24px; border-radius: var(--mk-r-pill); flex: none; margin-top: 2px; box-shadow: inset 0 0 0 2px var(--mk-hairline-fort); }
.choix-i input:checked + .rond { box-shadow: inset 0 0 0 7px var(--mk-action); }
.choix-i input:focus-visible + .rond { outline: 3px solid var(--mk-primary); outline-offset: 2px; }
.choix-i .t { font: 700 17px var(--mk-font); color: var(--mk-text); }
.choix-i .s { font: 400 14px/1.5 var(--mk-font); color: var(--mk-text-2); margin-top: 3px; }
.choix-i:has(input:checked) { background: var(--mk-mint); border-color: transparent; }
.choix-i:has(input:checked) .t { color: var(--mk-mint-text); }
.choix-i:has(input:checked) .s { color: var(--mk-mint-text); }

.retour-champs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; }

.declare { background: var(--mk-card); border: 1px solid var(--mk-hairline-soft); border-radius: var(--mk-r-card); padding: 24px; margin-top: 34px; }
.declare h2 { font: 700 17px var(--mk-font); color: var(--mk-text); }
.declare ul { display: grid; gap: 14px; margin-top: 16px; }
.declare li { position: relative; padding-left: 22px; font: 400 15px/1.55 var(--mk-font); color: var(--mk-text-2); }
.declare li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: var(--mk-r-pill); background: var(--mk-primary); }
.declare a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font: 600 15px var(--mk-font); color: var(--mk-primary); text-decoration: underline; }
.sous-bouton { font: 400 14px/1.5 var(--mk-font); color: var(--mk-text-2); text-align: center; margin-top: 14px; }

/* ---------- Le succès ---------- */
.succes {
  position: fixed; inset: 0; z-index: 60; background: var(--mk-action);
  display: none; align-items: center; justify-content: center; padding: 32px; overflow-y: auto;
}
.succes.on { display: flex; }
.succes .dedans { max-width: 640px; width: 100%; text-align: center; }
.succes .rond {
  width: 96px; height: 96px; border-radius: var(--mk-r-pill); margin: 0 auto;
  background: rgba(6, 35, 31, .12); display: grid; place-items: center;
}
.succes h1 { font: 800 clamp(32px, 5vw, 52px)/1.1 var(--mk-font); color: var(--mk-on-action); letter-spacing: -1.8px; margin-top: 30px; text-wrap: balance; }
.succes p { font: 400 18px/1.55 var(--mk-font); color: var(--mk-on-action); margin-top: 18px; }
.succes .resume { background: rgba(6, 35, 31, .10); border-radius: var(--mk-r-card); padding: 22px; margin-top: 30px; text-align: left; }
.succes .resume .t { font: 700 17px var(--mk-font); color: var(--mk-on-action); }
.succes .resume .s { font: 400 15px/1.6 var(--mk-font); color: var(--mk-on-action); margin-top: 6px; }
.succes .btns { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.succes .btn-sombre { background: var(--mk-on-action); color: var(--mk-action); }
.succes .btn-clair { box-shadow: inset 0 0 0 2px var(--mk-on-action); color: var(--mk-on-action); }

/* ============================================================
   Adaptation
   ============================================================ */
@media (max-width: 900px) {
  /* La carte passe sous le formulaire : côte à côte, sous 900 px, ni l'un
     ni l'autre n'a la place de dire ce qu'il a à dire. */
  .remise-grille { grid-template-columns: 1fr; min-height: 0; }
  .remise-form { margin: 0 auto; }
  .remise-carte { min-height: 300px; order: -1; }
}

@media (max-width: 820px) {
  .t-trois { grid-template-columns: 1fr; }
  .retour-champs { grid-template-columns: 1fr; }
  .recap-l { flex-wrap: wrap; }
  .t-fil { max-width: none; }
  .t-marque { display: none; }
}