/* ══ LA DIRECTION RETENUE : « A + C sur blanc » ═══════════════════════════
   Charlotte, le 4 octobre, devant la planche des trois directions (Nuit,
   Carnet, Galerie) : « Je veux un mélange de A et C fond blanc ».

   Ce qui vient de A (Nuit) : la barre d'onglets en capsule d'encre avec
   ses mots, l'onglet actif dit par la couleur et non par une pastille ; les
   grandes photos qui portent l'écran.
   Ce qui vient de C (Galerie) : les cartes très arrondies dont la légende
   est une étiquette posée SUR la photo ; les surfaces pleines plutôt que
   bordées ; le bouton « Créer » rond au centre de la barre.
   Et le fond : blanc franc, partout.

   Chargée en dernier : elle tranche sur extreme.css et les couches
   d'avant sans les réécrire. La couleur de la saison est la seule
   couleur de l'app, barre comprise (pas d'or : voir la barre). */

:root{
  --n-1:#FFFFFF;
  --bg:#FFFFFF;
  --d-creux:#F4F3F0;      /* la surface pleine : champ, pilule, carte */
  --d-creux-2:#ECEAE6;    /* la même, appuyée                         */
  --d-encre:#1A1712;      /* la barre, la pilule active               */
}
.screen, .phone{ background:#FFFFFF }
.ref-nappe.plate{ background:transparent }

/* ── 1. La barre d'onglets (application) ─────────────────────────────
   Charlotte, le 4 octobre, en voyant l'encre et l'or : « Le doré on
   oublie, on a dit couleur qui change en fonction de la saison », et
   « je veux que la barre d'onglets soit en verre poli comme avant, comme
   Instagram » — le verre FUMÉ validé avant le 4 octobre (sa réponse à la
   question posée). Donc : verre sombre translucide, flou et saturé ;
   l'onglet actif et le bouton Créer prennent la couleur de la saison.

   --d-actif éclaircit l'accent pour le texte de 10 px posé sur le verre
   sombre : l'accent nu (le rouge d'octobre, le bleu d'hiver) y tombe
   sous 4,5:1. La teinte reste celle de la saison. Le verre est à 0,80 :
   plus clair, sur fond blanc, le mot actif tombait à 3,4:1
   (banc-contraste). À 0,80 il passe 5:1, et le flou reste visible. */
:root{ --d-actif:color-mix(in srgb, var(--accent) 50%, #FFFFFF) }
.tabbar-pill{
  background:rgba(20,17,14,.80);
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.16); 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 rgba(255,255,255,.14), 0 18px 40px -18px rgba(20,17,14,.6), 0 2px 8px rgba(20,17,14,.12);
}
.tab-curseur{ display:none }
.tab-it .tab-ico, .tab-it .tab-mot{ color:rgba(255,255,255,.78) }
.tab-it.on .tab-ico, .tab-it.on .tab-mot{ color:var(--d-actif) }
.tab-it.on .tab-mot{ font-weight:650 }
/* 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, #FFFFFF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -8px var(--accent-shadow, rgba(0,0,0,.4));
  transition:transform .3s var(--spring, ease), box-shadow .3s ease;
}
.tab-it[data-tabbtn="create"].on .tab-ico{ color:var(--accent-ink, #FFFFFF); box-shadow:0 0 0 2px rgba(20,17,14,.7), 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 .42s cubic-bezier(.2,.8,.2,1); transform-origin:50% 100% }
html.native-app .tab-mot{ transition:opacity .2s ease, transform .35s cubic-bezier(.2,.8,.2,1); max-height:14px }
html.native-app .tab-ico{ transition:transform .42s cubic-bezier(.2,.8,.2,1) }
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:16px; box-shadow:none;
}
.ref-pilule{ background:var(--d-creux); border-color:transparent; color:var(--ink) }
.ref-pilule.on{ background:var(--d-encre); color:#FFFFFF }
.pf-filtre.on{ background:var(--d-encre); color:#FFFFFF }
.envie{ background:var(--d-creux); border:none; border-radius:22px; 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:28px }

/* ── 3. Les tuiles photo : la légende devient une étiquette posée ──── */
.ref-tuile{ border-radius:24px; box-shadow:0 22px 40px -28px rgba(26,23,18,.55) }
.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:9px 12px; border-radius:16px;
  background:rgba(255,255,255,.88);
  -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 #EEECE8, 0 26px 50px -36px rgba(26,23,18,.35) }
.mode-btn{ background:var(--d-creux); border:none; border-radius:22px; box-shadow:none }
.mode-btn .m-i{ background:#FFFFFF }
.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:#FFFFFF;
}
.ov[data-ov="destination"] .dd-volet{ background:#FFFFFF }
.ov[data-ov="destination"] .cc-card{
  background:var(--d-creux); border:none; box-shadow:none; border-radius:28px;
}
/* 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:#161311; --surface2:#1E1A17; --n-0:#161311; --n-1:#1A1613; --n-2:#211D19; --n-3:#2A2521;
  --ink:#F4EFE7; --ink-soft:#D8D0C6; --ink-faint:#9A9187; --sub:#A79E92; --line:#2A2521; --line2:#352F2A;
  background:#14110E; color:var(--ink); border:none; border-radius:28px;
  box-shadow:0 30px 60px -36px rgba(20,17,14,.6);
}
.ov[data-ov="destination"] .carte-handle{ background:rgba(26,23,18,.16) }

/* 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:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
  border-top:1px solid rgba(26,23,18,.06); box-shadow:0 -14px 30px -26px rgba(26,23,18,.35);
}

/* ── 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:#FFFFFF }
.itn-day{ background:var(--d-creux); box-shadow:none; border:none; border-radius:28px }
.itn-dhead{ background:transparent; background-image:none }
.itn-dmo-h{ background:#FFFFFF }
.itn-dmini, .itn-day-chev{ border-color:rgba(26,23,18,.07) }
.itn-day-chev .ico{ background:#FFFFFF }
.itn-stays.itn-phase-carte{ background:var(--d-creux); box-shadow:none; border:none; border-radius:28px }
.itn-stay{ background:#FFFFFF; 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:11.5px }

/* ── 10. Le premier écran est une photo plein cadre ──────────────────
   Pendant son glissement, le fond de la surcouche se voit une fraction
   de seconde : sombre, il se confond avec la photo ; blanc, c'est un
   éclair (banc-premier-lancement). */
.ov[data-ov="onboarding"]{ background:#0E0C0A }

/* 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:24px;
  align-self:stretch; min-width:176px; padding:16px 18px;
}
.track-step-plain .tsp-mode{ background:#FFFFFF }
.track-step-plain .tsp-lieu{ font-size:22px; letter-spacing:-.03em }
.track-step-plain .tsp-leg{ border-top-color:rgba(26,23,18,.08); 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:34px;
}
.trace-carte .tr-ph{
  height:400px; border-radius:32px; overflow:hidden; padding:16px 18px 20px;
  box-shadow:0 30px 60px -34px rgba(26,23,18,.55);
}
.trace-carte .tr-d{ font-size:34px; 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:rgba(255,255,255,.2); color:#FFFFFF; border:1px solid rgba(255,255,255,.28);
  -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:#FFFFFF; border:none; box-shadow:0 14px 30px -18px rgba(26,23,18,.6);
}

/* 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, rgba(10,8,6,.45) 0%, rgba(10,8,6,0) 20%,
             rgba(10,8,6,0) 46%, rgba(10,8,6,.55) 66%, rgba(10,8,6,.9) 100%);
}
.fp-n{ font-size:20px; font-weight:700 }
.ov.fil-plein-ov .tr-etapes .tr-et{
  background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.3);
  -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:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); color:#FFFFFF;
  -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, #FFFFFF) !important; border:none !important;
  height:52px; width:100%; justify-content:center; font-weight:650;
  box-shadow:0 16px 34px -16px var(--accent-shadow, rgba(0,0,0,.5));
}

/* ── 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 .75s cubic-bezier(.2,.75,.2,1) 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 }