/* ── HIC SUNT · Sillage — screens: tabs & main components ──────────── */

/* ── tab system ── */
.tabs{position:absolute;inset:0}
/* Les cinq onglets sont empilés en permanence, l'actif seul étant opaque.
   opacity:0 + pointer-events:none suffisaient à les rendre invisibles et
   non-cliquables — mais PAS inertes : un champ de saisie posé dans un
   onglet caché reste focalisable, et le clavier d'iOS peut donc surgir
   sans qu'aucun champ ne soit visible à l'écran.

   C'est ce qui arrivait. Le champ « Où voulez-vous aller ? » de l'Accueil
   occupe toujours la même place (x 37, y 538) sur TOUS les onglets, parce
   que l'Accueil reste posé dessous. Sur Tendances, ces coordonnées tombent
   exactement sur la première rangée de destinations — d'où le clavier qui
   s'ouvre et les deux tuiles qui « ne répondent pas » (retour de
   Charlotte, capture à l'appui : Pérou et Kenya).

   visibility:hidden retire l'élément de l'ordre de focus dans tous les
   moteurs : un champ invisible de cette façon NE PEUT PAS être focalisé,
   ni au toucher, ni par les chevrons de la barre du clavier iOS. La
   transition de visibilité est retardée de la durée du fondu pour que
   l'onglet sortant reste visible pendant qu'il s'efface. */
.tabview{
  position:absolute;inset:0;overflow-y:scroll;
  padding-top:var(--encoche);
  /* La barre d'onglets fait 56 px et flotte 10 px au-dessus de la zone
     sûre : 96 px de réserve la laissaient recouvrir la dernière ligne de
     chaque écran. */
  padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 0.22s ease, visibility 0s linear 0.22s;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tabview::-webkit-scrollbar{display:none}
.tabview.active{opacity:1;pointer-events:auto;visibility:visible;
  transition:opacity 0.22s ease, visibility 0s}

/* ── tab bar — pilule de verre unique et connectée, comme la capture
   Wayvi envoyée ("le menu mobile colle comme ça") : les icônes sont
   attachées dans une seule barre translucide, pas des cercles séparés
   avec des espaces entre eux (direction essayée juste avant, abandonnée
   ici). Seul l'onglet actif se détache, en cercle plein menthe. ── */
/* Hauteur et position calées sur la barre d'Instagram (référence envoyée
   par Charlotte le 14/08 : « je veux le tab barre à la même hauteur et de
   la même taille que celui-là ») : la nôtre faisait 74 px de haut et
   flottait 8 px au-dessus de la zone sûre, nettement plus massive et plus
   haute que la sienne. Ramenée à 56 px, posée 3 px au-dessus de la zone
   sûre. Le cercle intérieur reste à 44 px : c'est le minimum Apple pour
   une cible tactile, on ne descend pas en dessous pour gagner quelques
   pixels — un onglet qu'on rate deux fois sur trois coûte plus cher qu'une
   barre un peu plus épaisse. */
.tabbar{
  position:absolute;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  z-index:50;
  pointer-events:none;
  padding-left:16px;
  padding-right:16px;
}
/* Verre SOMBRE translucide (réf. Wayvi "AI Search", validée par
   Charlotte) — plus la pilule quasi blanche d'avant. Même recette que
   .muse-glass, déjà éprouvée sur ce code. */
.tabbar-pill{
  display:flex;align-items:center;
  width:100%;
  /* rgba(13,27,24) est un vert-sarcelle très sombre : le dernier reste
     de « Verre & Menthe » dans le chrome de l'app. Sur une photo claire
     la barre virait au vert-olive. Teinte neutre, celle de --nuit-profond. */
  /* 0,44 ne suffisait plus : en ajoutant les libellés, banc-contraste a
     mesuré 1,13 sur du blanc à 9,5 px — illisible dès que la barre passe
     sur une photo claire. Le verre reste du verre, il devient simplement
     assez sombre pour porter du texte. */
  background:rgba(20,17,14,0.62);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-radius:var(--r-pill);
  padding:5px;
  gap:2px;
  pointer-events:all;
  box-shadow:var(--sh-2);
  border:1px solid rgba(255,255,255,0.16);
}
/* Icône ET mot : cinq pictogrammes muets, dont une boussole et un globe
   côte à côte, ne s'apprennent que par essais. Les libellés existaient
   déjà — ils ne servaient qu'à l'aria-label, donc ils étaient dits aux
   lecteurs d'écran et cachés à tout le monde. */
.tab-it{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  border:none;background:transparent;cursor:pointer;
  border-radius:var(--r-md);
  padding:7px 2px 6px;
  transition:transform 0.15s cubic-bezier(0.34,1.4,0.4,1);
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}
.tab-it:active{transform:scale(0.92)}
.tab-ico{
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.80);
  transition:color 0.2s ease;
}
.tab-mot{
  font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.01em;
  color:rgba(255,255,255,0.80); line-height:1;
  transition:color 0.2s ease;
  white-space:nowrap;
}
/* ── discover header ── */
.disc-head{padding-top:6px;padding-bottom:40px}
.disc-top{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.bell-btn{
  width:var(--b-sm);height:var(--b-sm);border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
  transition:transform 0.12s var(--spring),border-color 0.18s;
}
.bell-btn:active{transform:scale(0.88)}
.bell-btn:hover{border-color:var(--gold-soft)}
.bell-btn .dot{position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--gold);border:1.5px solid var(--surface)}
/* Le compteur des messages. Un point dit « quelque chose » ; un chiffre
   dit « trois personnes attendent ». La pastille avait gagné ce chiffre
   en devenant un onglet — elle le garde en redevenant une icône. */
.bell-n{position:absolute;top:-3px;right:-4px;min-width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
  border-radius:var(--r-pill,999px);background:#B3452C;color:#FFFFFF;
  border:1.5px solid var(--surface);
  font-family:var(--sans);font-size:10.5px;font-weight:700;line-height:1}
.disc-hello{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);margin-top:14px}
/* iOS Large Title — biggest and boldest in the hierarchy */
.disc-hero{font-family:var(--serif);font-weight:600;font-size:44px;line-height:1.06;letter-spacing:-1px;margin-top:10px}
.disc-hero em{font-style:italic;color:var(--gold)}

/* ── muse card ── */
.muse{margin-top:22px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow-raised);padding:20px;position:relative;overflow:hidden;touch-action:pan-y}
.muse::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--gold-soft),transparent);opacity:0.5}
.muse-top{display:flex;justify-content:space-between;align-items:center}
/* --gold-deep plutôt que --gold-soft (~2.24:1 sur le fond blanc de .muse,
   bien sous le minimum WCAG AA) — voir aussi .eyebrow, core.css. */
.muse-nsew{font-family:var(--mono);font-size:8.5px;letter-spacing:2px;color:var(--gold-deep)}
.muse-row{display:flex;align-items:flex-end;gap:12px;margin-top:16px}
.muse-input{flex:1;border:none;background:transparent;outline:none;font-family:var(--serif);font-style:italic;font-size:27px;font-weight:400;color:var(--ink);min-width:0;touch-action:manipulation}
.muse-input::placeholder{color:var(--ph)}
/* iOS: minimum 44×44 tap target */
.muse-go{
  width:44px;height:44px;border-radius:var(--r-md);border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex:none;
  transition:transform 0.12s cubic-bezier(0.34,1.2,0.4,1),opacity 0.12s;
}
.muse-go:active{transform:scale(0.88);opacity:0.8}
.muse-line{height:1px;margin-top:12px;background:var(--line);position:relative;overflow:hidden}
.muse-line::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent,var(--gold-soft),transparent);transform:translateX(-100%);animation:shimmer 2.8s ease-in-out infinite}
@keyframes shimmer{60%,100%{transform:translateX(100%)}}
.muse-sub{font-size:13px;font-weight:300;color:var(--sub);margin-top:11px;line-height:1.5}

/* ── destination grid ── */
.dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:16px}
.tile{height:172px;border-radius:var(--card-radius);border:1px solid var(--line);position:relative;overflow:hidden;cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform 0.18s var(--spring);
  touch-action:manipulation;
}

.tile:active{transform:scale(0.96)}
/* Pas de règle :hover ici — le survol n'existe pas sur iPhone. L'ombre au
   survol était un reste de la maquette web : seize transitions box-shadow
   armées sur la grille, dont pas une ne pouvait se déclencher dans l'app. */
/* Photo "vivante" façon éditorial voyage — zoom lent et continu (Ken
   Burns). Sur UNE image c'est du souffle ; il tournait ici sur les quinze
   tuiles de la grille à la fois, ce qui n'est plus du souffle mais de
   l'agitation : rien ne se pose, et quinze couches GPU restent promues en
   permanence (will-change) même hors écran. Il ne vit plus que sur la
   grande tuile de la semaine — voir da.css §48, qui le rallume avec son
   will-change sur .tile.spot .wash. Le keyframe reste ici : features.css
   (étapes du mode Track) et da.css s'en servent tous les deux. */
.tile .wash{position:absolute;inset:0;background-size:cover;background-position:center}
.tile .wash::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,17,14,0.5),rgba(20,17,14,0.02) 50%)}
@keyframes washKenBurns{from{transform:scale(1)}to{transform:scale(1.08)}}
/* Voile sombre réutilisable par-dessus une photo de destination, pour garder
   le texte (nom, badges…) lisible quelle que soit la photo. */
.hero-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,17,14,0.62),rgba(20,17,14,0.08) 55%,rgba(20,17,14,0.16));pointer-events:none}
.tile .wm{position:absolute;top:12px;right:10px;color:var(--onink);opacity:0.35}
.tile .code{position:absolute;top:13px;left:14px;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:1.2px;color:var(--gold-bright)}
.tile .t-cap{position:absolute;left:14px;right:12px;bottom:13px}
.tile .t-n{font-family:var(--serif-text);font-weight:600;font-size:21px;letter-spacing:-0.3px;color:var(--onink)}
.tile .t-rule{width:26px;height:1.5px;background:var(--gold-bright);margin:7px 0 6px}
.tile .t-r{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--onink);opacity:0.75}

/* ── trip cards — carte postale pleine largeur ── */
.trip-card{border-radius:var(--card-radius);overflow:hidden;background:var(--surface);position:relative;box-shadow:var(--shadow-postcard);margin-bottom:16px;cursor:pointer;transition:transform 0.15s cubic-bezier(0.34,1.2,0.4,1),opacity 0.12s;touch-action:manipulation}
.trip-card:active{transform:scale(0.985);opacity:0.94}
.trip-card-hero{position:relative;height:150px;overflow:hidden;animation:washKenBurns 16s ease-in-out infinite alternate;will-change:transform}
.trip-card-coords{position:absolute;top:16px;left:18px;font-size:11px;color:var(--onink);opacity:0.85;letter-spacing:.08em}
.trip-card-badge{position:absolute;top:14px;right:44px;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-pill);background:var(--ink);color:var(--gold-bright);max-width:calc(100% - 60px)}
.trip-card-badge .mono{font-size:9px;color:var(--onink);letter-spacing:.1em}
.trip-card-cap{position:absolute;left:18px;bottom:14px}
.trip-card-cap .serif{font-size:27px;color:var(--onink);line-height:.95}
.trip-card-rule{width:30px;height:2px;background:var(--accent,var(--gold-bright));margin:7px 0 5px}
.trip-card-cap .mono{font-size:9px;color:var(--onink);opacity:0.75;letter-spacing:.12em}
.trip-card-foot{padding:13px 18px;background:var(--surface);font-size:12.5px;color:var(--sub)}
.trip-card-foot .tcf-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.trip-card-foot .tcf-dates{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.trip-card-foot .accent{font-size:14px;color:var(--gold-deep);font-weight:600;white-space:nowrap;flex:none}
.trip-card-foot .tcf-companions{margin-top:6px;font-size:12px;letter-spacing:.02em;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── trip card — brouillon ── */
.trip-card.draft{background:var(--surface);border:1.5px dashed var(--line2);box-shadow:none}
.trip-card.draft .trip-card-hero{height:118px;display:flex;align-items:center;justify-content:center}
.trip-card-draft-badge{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.trip-card-draft-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
.trip-card-draft-badge span:last-child{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.trip-card-draftfoot{padding:14px 18px;display:flex;justify-content:space-between;align-items:baseline}
.trip-card-draftfoot .serif{font-size:27px;color:var(--ink-soft)}
.trip-card-draftfoot .tcd-sub{font-size:13px;color:var(--sub);margin-top:1px}
.trip-card-draftfoot .accent{font-size:13px;color:var(--gold-deep);font-weight:600}

/* ── deck (questionnaire) ── */
/* ── Deck questionnaire ─────────────────────────────────────────────── */
.deck-head{padding-top:6px}
.deck-prog{display:flex;align-items:center;gap:12px;margin-top:12px}
.deck-back{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:#FFFFFF;color:var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity 0.2s,transform 0.12s var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.deck-back:active{transform:scale(0.88)}
.deck-back[disabled]{opacity:0.28;pointer-events:none}
.deck-bar{flex:1;height:1.5px;background:var(--line);border-radius:2px;overflow:hidden}
.deck-bar i{display:block;height:100%;background:var(--accent,var(--gold));transition:width 0.5s ease}
.deck-count{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1px;color:var(--sub);flex:none}

/* Pile de cards — hauteur fixe, overflow caché. Réduite (retour de
   Charlotte : "les cards sont toujours plus grandes il faut les
   réduire") — 580→545px, compensé par un calendrier plus dense
   (da.css §21) pour que Q3 (calendrier + ville de départ, la plus
   chargée) continue de tenir en entier sans que le pied "Continuer"
   ne masque la fin du champ. */
/* La réserve de 215 px correspondait à l'ancien en-tête : sur-titre,
   titre en 34 px et sous-titre, tout cela au-dessus de la carte. Cet
   en-tête a disparu — il posait une SECONDE question juste avant celle
   de la carte — et il ne reste que la ligne de progression. Sans ce
   recalage, la carte gardait sa hauteur d'avant et laissait deux cents
   pixels de blanc dans son propre cadre. */
#deck{
  position:relative;
  margin-top:18px;
  padding:0 20px;
  /* --app-vh et non 100dvh. C'est la hauteur réelle mesurée en JS
     (index.html), et c'est la solution de la maison depuis qu'on sait que
     dvh ne tient pas sur iOS. Elle est délibérément calculée sur
     window.innerHeight et JAMAIS sur visualViewport : le clavier se pose
     PAR-DESSUS l'app au lieu de la faire remonter. Avec 100dvh, le cadre
     du questionnaire pouvait se réduire pendant qu'on tape la
     destination — sur les deux seules questions à champ texte. */
  height:calc(var(--app-vh, 1vh) * 100 - 190px);
  max-height:660px;
  min-height:400px;
}
.dcard{
  position:absolute;inset:0;
  background:var(--surface);
  border:none;
  border-radius:var(--card-radius);
  box-shadow:var(--sh-2);
  padding:var(--p-lg);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform 0.45s var(--spring),opacity 0.35s ease;
  will-change:transform,opacity;
  color:var(--ink);
}

/* Numéro question */
.dcard .d-num{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);
  margin-bottom:6px;flex:none;
}
/* Titre */
.dcard .d-q{
  font-family:var(--serif);font-weight:600;font-size:27px;
  line-height:1.18;letter-spacing:-0.4px;color:var(--ink);flex:none;
}
.dcard .d-q em{font-style:italic;color:var(--gold)}
/* Sous-titre */
.dcard .d-s{
  font-size:13px;font-weight:300;color:var(--sub);
  line-height:1.5;margin-top:4px;flex:none;
}
/* Corps scrollable */
.dcard .d-body{
  flex:1;margin-top:12px;overflow-y:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  min-height:0;
  /* La dernière option restait collée au bord du cadre, donc toujours
     à moitié sous le dégradé, même arrivée en bas de la liste. */
  padding-bottom:6px;
}
.dcard .d-body::-webkit-scrollbar{display:none}
/* Le dégradé n'apparaît que du côté où il reste quelque chose à voir
   (data-defile posé par _deckMarquerDefilement, deck.js). Masque plutôt
   qu'un calque posé par-dessus : le fond de la carte varie, un voile de
   couleur fixe se verrait. */
.dcard .d-body[data-defile="bas"]{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent 100%);
}
.dcard .d-body[data-defile="haut"]{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px);
          mask-image:linear-gradient(180deg,transparent 0,#000 28px);
}
.dcard .d-body[data-defile="deux"]{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
}
/* Pied fixe */
.dcard .d-foot{margin-top:8px;flex:none}

/* ── Boutons mode ── */
.mode-btn{
  width:100%;text-align:left;background:var(--surface2);
  border:1px solid transparent;border-radius:var(--r-md);
  padding:var(--p-md);margin-bottom:10px;
  cursor:pointer;display:flex;align-items:center;gap:14px;color:var(--ink);
  transition:transform 0.12s var(--spring),border-color 0.18s;
  -webkit-tap-highlight-color:transparent;
}
.mode-btn:active{transform:scale(0.97)}
.mode-btn .m-i{
  width:42px;height:42px;border-radius:var(--r-sm);
  background:rgba(20,17,14,0.08);
  color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none;
}
.mode-btn .m-t{font-family:var(--serif-text);font-weight:600;font-size:16px;color:var(--ink)}
.mode-btn .m-d{font-size:12px;font-weight:300;color:var(--sub);margin-top:2px;line-height:1.4}

/* ── Radio (budget, rythme) ── */
.radio-it{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:var(--n-2);border:1px solid transparent;border-radius:var(--r-md);
  padding:var(--p-md);margin-bottom:8px;
  cursor:pointer;text-align:left;color:var(--ink);
  transition:transform 0.12s var(--spring),background 0.18s,border-color 0.18s;
  -webkit-tap-highlight-color:transparent;
}
.radio-it:active{transform:scale(0.97)}
.radio-it.on{border-color:var(--ink);border-width:1.5px;background:var(--surface);color:var(--ink)}
.radio-it .ra-t{font-family:var(--serif-text);font-weight:600;font-size:16px;color:inherit}
.radio-it .ra-d{font-size:12px;font-weight:300;color:var(--sub);margin-top:2px}
.radio-it.on .ra-d{color:var(--sub)}
.radio-it .ra-dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line2);flex:none;transition:background 0.18s,border-color 0.18s}
.radio-it.on .ra-dot{border-color:var(--gold);background:var(--gold)}

/* ── Stepper ── */
.stepper{display:flex;align-items:center;justify-content:center;gap:24px;padding:20px 0}
.stepper button{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform 0.12s var(--spring);-webkit-tap-highlight-color:transparent;
}
.stepper button:active{transform:scale(0.86)}
.stepper .st-v{text-align:center;min-width:90px}
.stepper .st-n{font-family:var(--serif);font-weight:600;font-size:56px;line-height:1;color:var(--ink)}
.stepper .st-l{font-family:var(--mono);font-size:8px;letter-spacing:1.8px;text-transform:uppercase;color:var(--sub);margin-top:6px}

/* ── Occasion ── */
.occ-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.occ{
  background:var(--n-2);border:1px solid transparent;border-radius:var(--r-md);
  padding:var(--p-md);cursor:pointer;text-align:left;color:var(--ink);
  transition:transform 0.12s var(--spring),background 0.18s,border-color 0.18s;
  -webkit-tap-highlight-color:transparent;
}
.occ:active{transform:scale(0.95)}
.occ.on{border-color:var(--ink);border-width:1.5px;background:var(--surface);color:var(--ink)}
.occ .o-t{font-family:var(--serif-text);font-weight:600;font-size:14px;color:inherit;line-height:1.2}
.occ .o-d{font-size:10px;font-weight:300;color:var(--sub);margin-top:3px;line-height:1.4}
.occ.on .o-d{color:var(--sub)}

/* ── Chips ── */
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;background:var(--surface2);
  border:1px solid var(--line);border-radius:var(--r-pill);
  font-family:var(--sf);font-size:13px;font-weight:400;color:var(--ink);
  cursor:pointer;white-space:nowrap;
  transition:transform 0.1s var(--spring),background 0.15s,border-color 0.15s;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  min-height:var(--tap-min);
}
.chip:active{transform:scale(0.93)}
.chip.on{background:var(--surface);border-color:var(--ink);border-width:1.5px;color:var(--ink);font-weight:600}

/* ── Liste à cocher (phrases longues — voir _pickListHTML, deck.js) ── */
.pick-list{display:flex;flex-direction:column;gap:8px;padding:2px 0}
.pick-it{
  width:100%;display:flex;align-items:center;gap:12px;
  background:var(--n-2);border:1px solid transparent;border-radius:var(--r-md);
  padding:var(--p-sm) var(--p-md);text-align:left;cursor:pointer;
  transition:transform 0.1s var(--spring),background 0.15s,border-color 0.15s;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
}
.pick-it:active{transform:scale(0.98)}
.pick-it.on{background:var(--surface);border-color:var(--ink);border-width:1.5px}
.pick-it .pk-box{
  width:21px;height:21px;flex:none;border-radius:var(--r-sm);
  border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;
  color:#FFF;transition:background 0.15s,border-color 0.15s;
}
.pick-it .pk-box svg{opacity:0;transition:opacity 0.15s}
.pick-it.on .pk-box{border-color:var(--ink);background:var(--ink)}
.pick-it.on .pk-box svg{opacity:1}
.pick-it .pk-t{flex:1;min-width:0;font-size:14px;line-height:1.4;color:var(--ink);font-weight:400}
.pick-it.on .pk-t{font-weight:500}

/* ── Les précisions qui se déroulent ──────────────────────────────────
   Charlotte : « Je veux quelques propositions qui se déroulent ensuite
   pour affiner. » Elles apparaissent sous la case qu'on vient de cocher,
   décalées vers la droite et rattachées par un filet vertical : on doit
   voir d'un coup d'œil qu'elles DÉPENDENT d'elle, et non qu'une nouvelle
   série de questions commence. */
/* ── Ce qui vient du texte libre ──────────────────────────────────────
   Une case pré-cochée à tort et non remarquée enverrait à la génération
   une consigne que personne n'a demandée. Elle doit donc se VOIR : le
   liseré teinté dit d'où elle vient, et il disparaît dès qu'on y touche —
   la case devient alors un choix comme un autre. */
.pick-lu{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 14px;padding:11px 13px;border-radius:var(--r-md);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink-soft);
}
.pick-lu svg{flex:none;margin-top:1px;color:var(--accent-texte,var(--accent))}
.pick-it.pick-deduit{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
  background:color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.pick-it.pick-deduit .pk-box{background:var(--accent);border-color:var(--accent)}

.pick-row{display:flex;flex-direction:column;gap:8px}
.pick-sub{
  display:flex;flex-direction:column;gap:8px;
  margin:0 0 2px 15px;padding-left:13px;
  border-left:2px solid var(--line);
}
.pick-sub[hidden]{display:none}
.pick-sub-it{background:transparent}
.pick-sub-it .pk-t{font-size:13.5px;color:var(--ink-soft)}
.pick-sub-it.on{background:var(--surface)}
.pick-sub-it.on .pk-t{color:var(--ink)}

/* ── Inputs ── */
.field{margin-bottom:14px}
.field label{
  display:block;font-family:var(--mono);font-size:8px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin-bottom:7px;
}
.input{
  width:100%;box-sizing:border-box;height:var(--tap-comfortable);
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;font-family:var(--sf);font-size:15px;color:var(--ink);
  outline:none;-webkit-appearance:none;transition:border-color 0.18s;
}
.input:focus{border-color:var(--gold)}
.input.italic{font-family:var(--serif);font-style:italic;font-size:18px}
.input::placeholder{color:var(--ph)}
textarea.input{height:auto;min-height:100px;padding:14px 16px;resize:none;line-height:1.55;font-size:17px}


/* ── voyages ── */
.voy-title{font-family:var(--serif);font-weight:600;font-size:44px;letter-spacing:-0.5px;margin-top:8px}
.voy-title em{font-style:italic;color:var(--gold)}
/* Segmented control groupé (même langage que .track-toggle, réglage
   "à proximité" de Communauté) plutôt que 3 pilules détachées qui
   pouvaient passer à la ligne et flottaient sans cadre commun — retour
   de Charlotte : l'esthétique du sélecteur À venir/Passés/Brouillons. */
.voy-pills{display:flex;background:var(--surface2);border-radius:var(--r-pill);padding:3px;gap:2px;
  margin-top:14px;margin-bottom:20px;box-shadow:inset 0 0 0 1px var(--line)}
.voy-pill{flex:1;padding:9px 8px;border-radius:var(--r-pill);background:none;color:var(--sub);
  font-size:13px;font-weight:600;border:none;cursor:pointer;white-space:nowrap;
  text-align:center;transition:all 0.15s var(--spring)}
.voy-pill:active{transform:scale(0.96)}
.voy-pill.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--sh-1)}

/* ── profile — header à plat, façon Instagram : avatar + stats en ligne ── */
.prof-head{margin-top:14px;display:flex;align-items:center;gap:22px}
.prof-n{font-family:var(--serif-text);font-weight:600;font-size:21px;letter-spacing:-0.3px;margin-top:16px}
.prof-m{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--sub);margin-top:4px}
.prof-cercle-card{margin-top:14px;padding:16px 18px;border-radius:var(--r-md);background:var(--ink);display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform 0.12s var(--spring)}
.prof-cercle-card:active{transform:scale(0.98)}
.prof-cercle-card .pcc-ico{color:var(--gold-bright);display:flex}
.prof-cercle-card .pcc-t{font-family:var(--serif);font-size:18px;color:var(--onink)}
.prof-cercle-card .pcc-s{font-family:var(--mono);font-size:10px;color:#B8AE98;letter-spacing:.06em;margin-top:2px}
.prof-cercle-card .pcc-cta{padding:8px 14px;border-radius:var(--r-pill);border:1px solid #4A443A;color:var(--gold-bright);font-size:12px;font-weight:600;flex:none}
.prof-list{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:4px 18px}
.prof-badge{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:2px 0;color:var(--gold-deep);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ── Profil : stats réelles — ligne à plat, sans cards ── */
.prof-stats{display:flex;flex:1}
.prof-stat{flex:1;text-align:center}
.prof-stat .ps-v{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ink);line-height:1}
.prof-stat .ps-l{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-top:6px}

/* ── Profil : Mon Cercle (compagnons de route réels) — carte claire,
   plus de fond noir plein. ── */
.prof-circle-card{margin-top:14px;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.cc-row{display:flex;align-items:center;gap:14px}
.circle-avatars{display:flex;flex:none}
.circle-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:13px;border:2px solid var(--surface);margin-left:-10px}
.circle-av:first-child{margin-left:0}
.circle-av.more{background:var(--surface2);color:var(--ink-soft);font-family:var(--mono);font-size:10px}
.circle-empty-ico{width:38px;height:38px;border-radius:50%;background:var(--surface2);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;flex:none}
.circle-empty-ico.light{background:var(--surface2);color:var(--ink-soft)}
.cc-t{font-family:var(--serif);font-size:18px;color:var(--ink)}
.cc-s{font-family:var(--mono);font-size:10px;color:var(--sub);letter-spacing:.04em;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-actions{display:flex;gap:8px;margin-top:14px}
.cc-btn{flex:1;padding:10px;border-radius:var(--r-pill);border:1px solid var(--line2);background:transparent;color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer}
.cc-btn:not(.ghost){background:transparent;color:var(--ink);border:1.5px solid var(--ink);font-weight:700}
.cc-btn:active{transform:scale(0.96)}

/* ── Profil : carnet de voyage (pays réellement visités) ── */
.prof-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}
.cv-badge{aspect-ratio:1;border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff}
.cv-badge .cv-code{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em}
.cv-badge-add{aspect-ratio:1;border-radius:var(--r-md);border:1.5px dashed var(--line2);display:flex;align-items:center;justify-content:center;color:var(--sub);background:none;cursor:pointer;transition:transform 0.12s var(--spring),opacity 0.12s}
.cv-badge-add:active{transform:scale(0.92);opacity:0.7}
.cv-empty{grid-column:1/-1;color:var(--sub);font-size:13px;font-style:italic;padding:8px 0}

/* ── Tableau de bord voyage en cours ─────────────────────────────── */
.trip-board{
  margin:16px 0 22px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--sh-1);
}
.tb-head{padding:16px 18px 14px}
.tb-eyebrow{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.tb-day{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;color:var(--sub)}
.tb-wx{font-size:21px;display:flex;align-items:center;gap:5px}
.tb-wx span{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--sub)}
.tb-title{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-0.2px;color:var(--ink);margin-top:10px;line-height:1.2}
.tb-loc{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub);margin-top:4px}
.tb-body{padding:14px 18px 0}
.tb-section-label{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--sub);margin-bottom:8px}
/* Le programme du jour est passé en fil (rail + pastilles, .tb-fil dans
   da.css) et « Ce soir »/« Demain » en rangées de pied (.tb-pied) : les
   règles plates d'ici — bordure sous chaque moment, heure en --gold,
   .tb-acc et .tb-tomorrow — n'ont plus rien à habiller et entraient en
   concurrence avec les nouvelles. Retirées plutôt que laissées à dormir. */
.tb-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--surface2);margin-top:12px}
.tb-days-left{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sub)}
.tb-cta{font-family:var(--sf);font-size:12px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:4px}