/* Les variables :root de cette feuille vivent dans tokens.css (chantier B1). */
.screen, .phone{ background:var(--blanc) }
.ref-nappe.plate{ background:transparent }/* Les variables :root de cette feuille vivent dans tokens.css (chantier B1). */
.tabbar-pill{
  background:var(--nuit-a80);
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--blanc-a16); border-radius:999px;
  /* Taille Instagram (Charlotte, 4 octobre) : 58 de haut au lieu de 68. */
  padding:4px; min-height:58px; box-sizing:border-box;
  box-shadow:inset 0 1px 0 var(--blanc-a14), 0 18px 40px -18px var(--nuit-a60), 0 2px 8px var(--nuit-a12);
}
.tab-curseur{ display:none }
.tab-it .tab-ico, .tab-it .tab-mot{ color:var(--blanc-a78) }
.tab-it.on .tab-ico, .tab-it.on .tab-mot{ color:var(--d-actif) }
.tab-it.on .tab-mot{ font-weight:600 }
/* Créer : un rond à la couleur de la saison, qui porte la rose des
   sables du logo Hukaia (idée de Charlotte, le 4 octobre). Sans mot :
   le logo tient lieu de mot. */
.tab-it[data-tabbtn="create"] .tab-mot{ display:none }
.tab-it[data-tabbtn="create"] .tab-ico{
  width:44px; height:44px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink, var(--blanc));
  box-shadow:inset 0 1px 0 var(--blanc-a25), 0 8px 18px -8px var(--accent-shadow, var(--noir-a40));
  transition:transform var(--mv-normal) var(--mv-ressort), box-shadow var(--mv-normal) var(--mv-sortie);
}
.tab-it[data-tabbtn="create"].on .tab-ico{ color:var(--accent-ink, var(--blanc)); box-shadow:0 0 0 2px var(--nuit-a70), 0 0 0 4px var(--accent) }
.tab-it[data-tabbtn="create"] .tab-ico svg{ width:26px; height:26px }

/* Plus compacte encore au défilement vers le bas (classe posée par
   _hsBarreDefile, app.js) : les mots s'effacent, la capsule se resserre
   et descend un peu ; elle revient dès qu'on remonte. */
/* Le resserrement ne touche plus ni hauteur ni marges : il les animait,
   et chaque image du défilement recalculait la mise en page de la barre
   puis refloutait ce qu'il y a derrière (« pas fluide », 5 octobre).
   Une mise à l'échelle et un fondu, que la puce graphique fait seule. */
html.native-app .tabbar-pill{ transition:transform var(--mv-lent) var(--mv-sortie); transform-origin:50% 100% }
html.native-app .tab-mot{ transition:opacity var(--mv-rapide) var(--mv-sortie), transform var(--mv-normal) var(--mv-sortie); max-height:14px }
html.native-app .tab-ico{ transition:transform var(--mv-lent) var(--mv-sortie) }
html.native-app.barre-compacte .tabbar-pill{ transform:translateY(6px) scale(.84) }
html.native-app.barre-compacte .tab-mot{ opacity:0; transform:translateY(4px) }
html.native-app.barre-compacte .tab-it:not([data-tabbtn="create"]) .tab-ico{ transform:translateY(7px) }
@media (prefers-reduced-motion:reduce){
  html.native-app .tabbar, html.native-app .tabbar-pill, html.native-app .tab-mot, html.native-app .tab-ico{ transition:none }
}
/* Sur le web, la barre est l'en-tête du site : elle garde sa grammaire. */
html:not(.native-app) .tab-it[data-tabbtn="create"] .tab-mot{ display:inline }
html:not(.native-app) .tab-it[data-tabbtn="create"] .tab-ico{ display:none }
html:not(.native-app) .tabbar-pill{ background:none; box-shadow:none; min-height:0; padding:0 }

/* ── 2. Les surfaces pleines (C) ───────────────────────────────────── */
.ref-cherche.posee{
  background:var(--d-creux); border:none; border-radius:var(--r-md); box-shadow:none;
}
.ref-pilule{ background:var(--d-creux); border-color:transparent; color:var(--ink) }
.ref-pilule.on{ background:var(--d-encre); color:var(--blanc) }
.pf-filtre.on{ background:var(--d-encre); color:var(--blanc) }
.envie{ background:var(--d-creux); border:none; border-radius:var(--r-lg); box-shadow:none }
.bell-btn{ background:var(--d-creux); border:none; border-radius:999px }
.pf-carte{ background:var(--d-creux); border:none; box-shadow:none; border-radius:var(--r-xl) }

/* ── 3. Les tuiles photo : la légende devient une étiquette posée ──── */
.ref-tuile{ border-radius:var(--r-lg); box-shadow:0 22px 40px -28px var(--suie-a55) }
.ref-tuile:not(.monde){
  padding-bottom:0; background-clip:border-box; background-origin:border-box;
}
.ref-tuile:not(.monde)::after{ display:none }
.ref-tuile:not(.monde) .ref-tuile-m{
  left:8px; right:8px; bottom:8px; height:auto;
  padding:8px 12px; border-radius:var(--r-md);
  background:var(--blanc-a88);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
}

/* ── 4. Les boutons : plein, sans dégradé ──────────────────────────── */
.btn{ background-image:none; border-radius:999px }
.btn::after{ display:none }

/* ── 5. Le questionnaire ───────────────────────────────────────────── */
.dcard{ box-shadow:0 0 0 1px var(--creux-carte), 0 26px 50px -36px var(--suie-a35) }
.mode-btn{ background:var(--d-creux); border:none; border-radius:var(--r-lg); box-shadow:none }
.deck-bar{ background:var(--d-creux-2) }

/* ── 6. La fiche destination revient au jour ─────────────────────────
   extreme.css (§10) l'avait passée en nuit. « Fond blanc », a tranché
   Charlotte le 4 octobre : la photo en tête, puis une feuille blanche,
   comme partout. Les jetons de nuit sont rendus à ceux de l'app par
   inherit — rien à recopier, rien qui diverge. */
.ov[data-ov="destination"]{
  --bg:inherit; --surface:inherit; --surface2:inherit; --surface-raised:inherit;
  --n-0:inherit; --n-1:inherit; --n-2:inherit; --n-3:inherit; --n-4:inherit;
  --ink:inherit; --ink-soft:inherit; --ink-faint:inherit; --sub:inherit;
  --line:inherit; --line2:inherit; --fog-soft:inherit; --gold:inherit; --gold-tint:inherit;
  --onink:inherit;
  background:var(--blanc);
}
.ov[data-ov="destination"] .dd-volet{ background:var(--blanc) }
.ov[data-ov="destination"] .cc-card{
  background:var(--d-creux); border:none; box-shadow:none; border-radius:var(--r-xl);
}
/* Les incontournables restent une bannière de nuit : leur roue et leurs
   libellés sont dessinés en clair. La nuit se pose sur la carte seule. */
.ov[data-ov="destination"] .dd-radial-card{
  --surface:var(--teinte-161311); --surface2:var(--teinte-1e1a17); --n-0:var(--teinte-161311); --n-1:var(--teinte-1a1613); --n-2:var(--teinte-211d19); --n-3:var(--teinte-2a2521);
  --ink:var(--teinte-f4efe7); --ink-soft:var(--teinte-d8d0c6); --ink-faint:var(--teinte-9a9187); --sub:var(--teinte-a79e92); --line:var(--teinte-2a2521); --line2:var(--teinte-352f2a);
  background:var(--teinte-14110e); color:var(--ink); border:none; border-radius:var(--r-xl);
  box-shadow:0 30px 60px -36px var(--nuit-a60);
}
.ov[data-ov="destination"] .carte-handle{ background:var(--suie-a16) }

/* Les pieds de feuille (prix de l'itinéraire, « Composer un voyage ici ») :
   du verre blanc, plus le beige d'avant. */
.ov-foot, .ov[data-ov="destination"] .ov-foot{
  background:var(--blanc-a82);
  -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
  border-top:1px solid var(--suie-a6); box-shadow:0 -14px 30px -26px var(--suie-a35);
}

/* ── 7. L'itinéraire : des feuilles pleines, plus des cadres ─────────
   Les jours étaient des cartes blanches bordées sur fond blanc, coiffées
   d'un lavis d'accent ; l'hôtel, une carte dans une carte. Même grammaire
   que le reste : le jour est une surface pleine, l'hôtel une feuille
   blanche posée dessus, les sauts de jour des pilules pleines. */
.itn-saut{ background:var(--d-creux); border-color:transparent }
.itn-sauts{ background:var(--blanc) }
.itn-day{ background:var(--d-creux); box-shadow:none; border:none; border-radius:var(--r-xl) }
.itn-dhead{ background:transparent; background-image:none }
.itn-dmo-h{ background:var(--blanc) }
.itn-dmini, .itn-day-chev{ border-color:var(--suie-a7) }
.itn-day-chev .ico{ background:var(--blanc) }
.itn-stays.itn-phase-carte{ background:var(--d-creux); box-shadow:none; border:none; border-radius:var(--r-xl) }
.itn-stay{ background:var(--blanc); box-shadow:none; border:none }

/* ── 8. Les boutons secondaires sur fond blanc ───────────────────────
   Le verre blanc d'extreme.css (§3) posé sur du blanc ne se voit plus :
   « Réessayer » flottait sans bord. Sur la feuille, il devient une
   surface pleine ; sur une photo (fiche, héros), il garde son verre. */
.ecran-vide .btn-ghost, .fil-vide .btn-ghost, .pf .btn-ghost, .dcard .btn-ghost, .itn-body .btn-ghost{
  background:var(--d-creux); border:none; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Centré sous son texte centré (il partait à gauche : un bouton en
   ligne dans un bloc centré, mais .btn-ghost est en display:flex). */
.fil-vide .btn-ghost{ margin-left:auto; margin-right:auto }

/* ── 9. Une marche de l'échelle, pas une taille à part ───────────────
   « Aucun paiement requis » était en 9,5 px : la seule fois de l'app, et
   le couple de trop pour banc-typographie. Il prend --t-petit. */
.cc-pts{ font-size:var(--t-micro) }

/* La signature du choix du mois (« Par Hukaia ») : 11,5 px en 500 était
   un couple à elle seule. Elle prend la marche --t-petit (400). */
.sel-signe{ font-weight:400 }
/* La rose des sables du bouton Créer : tracée en plein, sans trait. */
.hs-rose{ display:block; flex:none }

/* ── 11. Le tracé : un repère par lieu ───────────────────────────────
   « 1 · 9 » quand le voyage revient à son point de départ : la pastille
   s'allonge en gélule au lieu de masquer l'étape 1. */
.track-pin-step.multiple{ width:auto; min-width:26px; padding:0 8px; border-radius:999px; white-space:nowrap }
/* Les cartes d'étape du tracé : surfaces pleines, toutes à la même
   hauteur (l'étape 1, sans trajet, était plus courte que les autres). */
.track-step-plain{
  background:var(--d-creux); border:none; box-shadow:none; border-radius:var(--r-lg);
  align-self:stretch; min-width:176px; padding:16px 20px;
}
.track-step-plain .tsp-mode{ background:var(--blanc) }
.track-step-plain .tsp-lieu{ font-size:var(--t-section); letter-spacing:-.03em }
.track-step-plain .tsp-leg{ border-top-color:var(--suie-a8); margin-top:auto }
html.native-app .tab-it{ padding:4px 2px 3px; gap:3px }
html.native-app.barre-compacte .tab-it{ padding:2px; gap:0 }

/* ── 12. Communauté : le récit est une photo, pas une fiche ──────────
   Charlotte, le 4 octobre, captures du fil et du plein écran : « ces deux
   pages n'ont pas été modernisées ». La carte quitte sa boîte blanche à
   ombre : une grande photo arrondie qui porte le récit (auteur, lieu,
   dates, actions en verre), puis les étapes et l'appel posés à même la
   page — la grammaire de Tendances. */
.trace-carte{
  background:transparent; box-shadow:none; border:none;
  overflow:visible; margin-bottom:36px;
}
.trace-carte .tr-ph{
  height:400px; border-radius:var(--r-xl); overflow:hidden; padding:16px 20px 20px;
  box-shadow:0 30px 60px -34px var(--suie-a55);
}
.trace-carte .tr-d{ font-size:var(--t-ecran); letter-spacing:-.04em }
.trace-carte .tr-pd, .trace-carte .tr-etapes, .trace-carte .tr-sq{ padding-left:4px; padding-right:4px }
/* Les actions sur la photo : du verre clair, plus des pastilles sombres. */
.tr-ph > .tr-coin .tr-reac, .tr-ph > .tr-coin .tr-com, .tr-ph > .tr-coin .tr-part, .tr-ph > .tr-coin .tr-plus{
  background:var(--blanc-a20); color:var(--blanc); border:1px solid var(--blanc-a28);
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
}
.tr-ph > .tr-coin .tr-reac.on{ background:var(--accent); border-color:transparent }
/* « Partir de ce voyage » : l'appel du récit, plein et sombre. */
.trace-carte .btn-ghost{
  background:var(--d-encre); color:var(--blanc); border:none; box-shadow:0 14px 30px -18px var(--suie-a60);
}

/* Le plein écran : le voile s'épaissit en bas, tout ce qui se pose sur la
   photo devient du verre clair, et « Partir de ce voyage » prend la
   couleur de la saison. */
.fp-voile{
  background:linear-gradient(180deg, var(--teinte-0a0806-a45) 0%, var(--teinte-0a0806-a0) 20%,
             var(--teinte-0a0806-a0) 46%, var(--teinte-0a0806-a55) 66%, var(--teinte-0a0806-a90) 100%);
}
.fp-n{ font-size:var(--t-section); font-weight:700 }
.ov.fil-plein-ov .tr-etapes .tr-et{
  background:var(--blanc-a16) !important; border-color:var(--blanc-a30);
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
}
.fp-actions .tr-reac, .fp-actions .tr-com, .fp-actions .tr-part, .fp-fermer, .fp-haut .tr-plus{
  background:var(--blanc-a18); border:1px solid var(--blanc-a30); color:var(--blanc);
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
}
.fp-actions .tr-reac.on{ background:var(--accent); border-color:transparent }
.fp-partir{
  background:var(--accent) !important; color:var(--accent-ink, var(--blanc)) !important; border:none !important;
  height:52px; width:100%; justify-content:center; font-weight:600;
  box-shadow:0 16px 34px -16px var(--accent-shadow, var(--noir-a50));
}

/* ── 13. Plus grand, plus vivant ─────────────────────────────────────
   Les tuiles du rail passent de 158×212 à 196×258 : c'est la photo qui
   vend un voyage. Et chaque carte entre en montant (hsReveler, app.js). */
.ref-rail.hautes .ref-tuile{ flex:0 0 196px; height:258px }
@keyframes hs-entre{ from{ opacity:0; transform:translateY(26px) scale(.975) } to{ opacity:1; transform:none } }
.hs-entre{ animation:hs-entre var(--mv-lent) var(--mv-sortie) both }
.ref-rail .hs-entre:nth-child(2){ animation-delay:.06s }
.ref-rail .hs-entre:nth-child(3){ animation-delay:.12s }
@media (prefers-reduced-motion:reduce){ .hs-entre{ animation:none } }
/* Les titres de section, un cran plus francs. */
.ref-entete h2, .section-h h2, .pf-entete h2{ letter-spacing:-.035em }