/* Les variables :root de cette feuille vivent dans tokens.css (chantier B1). */

@keyframes xl-eclat{ from{ transform:translateX(-130%) skewX(-18deg) } to{ transform:translateX(230%) skewX(-18deg) } }
@keyframes xl-fondu{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ── 1. La barre d'onglets ─────────────────────────────────────────────
   Charlotte, le 4 octobre, sur TestFlight : « la tab barre en bas est
   affreuse ». Elle l'était : un verre gris délavé, et DEUX surlignages
   l'un sur l'autre — le curseur qui glisse (screens.css) et un fond posé
   ici sur l'onglet actif —, d'où ce double bord flou.

   Un seul repère désormais, net : le curseur devient une pastille
   BLANCHE pleine, et l'onglet actif passe en encre dessus. Le reste est
   un verre sombre et profond, une arête d'un demi-pixel, des icônes
   claires mais en retrait. Contraste franc, une seule chose qui bouge. */
.tabbar-pill{
  background:var(--teinte-161310-a86);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:.5px solid var(--blanc-a14);
  box-shadow:inset 0 .5px 0 var(--blanc-a22), 0 20px 44px -18px var(--noir-a60), 0 2px 8px var(--noir-a18);
}
.tab-curseur{
  /* Charlotte, le 4 octobre : « la tab barre est passée blanche, j'ai
     jamais demandé ça ». Retour au repère sombre, mais UN seul (le double
     surlignage reste supprimé). La forme définitive se choisit sur la
     planche des directions. */
  background:var(--blanc-a16); border:none;
  box-shadow:inset 0 .5px 0 var(--blanc-a28);
  transition:transform var(--mv-lent) var(--mv-ressort);
}
.tab-it{ background:transparent !important; box-shadow:none !important; transition:transform var(--mv-rapide) var(--mv-ressort) }
.tab-it:active{ transform:scale(.92) }
.tab-it .tab-ico, .tab-it .tab-mot{ color:var(--blanc-a62) }
.tab-it.on .tab-ico, .tab-it.on .tab-mot{ color:var(--blanc) }
.tab-it.on .tab-mot{ font-weight:600 }
/* Sur le web, la barre est l'en-tête du site : elle garde ses mots. */
html:not(.native-app) .tab-curseur{ display:none }
/* (Les couleurs de l'en-tête web sont celles de core.css : un « inherit »
   posé ici les rendait sombres sur sombre, 1,36:1 — banc-site-web.) */

/* ── 2. Les titres montent ──────────────────────────────────────────── */
.ref-h1{ font-size:40px; font-weight:700; letter-spacing:-.045em; line-height:1 }
.ref-tete .ref-h1{ font-size:38px }
.itn-title{ letter-spacing:-.04em; font-weight:700 }
.ref-sous{ font-size:var(--t-corps) }
@media (min-width:1024px){
  html:not(.native-app) .ref-h1{ font-size:56px }
  html:not(.native-app) .ref-tete .ref-h1{ font-size:48px }
}

/* ── 3. La lumière sur les boutons ──────────────────────────────────── */
.btn{
  position:relative; overflow:hidden;
  background-image:var(--xl-degrade);
  box-shadow:inset 0 1px 0 var(--blanc-a28), 0 14px 30px -16px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:transform var(--mv-rapide) var(--mv-ressort), box-shadow var(--mv-normal) var(--mv-sortie), filter var(--mv-rapide) var(--mv-sortie);
}
.btn::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(90deg, transparent, var(--blanc-a32), transparent);
  transform:translateX(-130%) skewX(-18deg); pointer-events:none;
}
.btn:active{ transform:scale(.97) }
@media (hover:hover){
  .btn:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--blanc-a30), 0 20px 40px -16px color-mix(in srgb, var(--accent) 75%, transparent) }
  .btn:hover::after{ animation:xl-eclat var(--mv-lent) var(--mv-sortie) }
}
/* Les boutons blancs et fantômes gardent leur blancheur : pas de dégradé. */
.btn.gold, .btn.blanc, .btn-ghost{ background-image:none }
/* R4 (8 novembre 2026) : le verre BLANC à 58 % se posait aussi sur les
   écrans sombres — un bloc gris clair sous un texte clair, qui se lisait
   comme un bouton désactivé (« Garder le voyage tel quel », « Revenir au
   questionnaire »). Le verre prend la surface de l'écran où il est posé :
   clair sur clair, sombre sur sombre. */
.btn-ghost{
  background:color-mix(in srgb, var(--surface) 62%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line2); box-shadow:0 10px 24px -18px var(--encre-a40);
  transition:transform var(--mv-rapide) var(--mv-ressort), background var(--mv-rapide) var(--mv-sortie);
}
.btn-ghost:active{ transform:scale(.97) }

/* ── 4. Les champs ──────────────────────────────────────────────────── */
.input{
  border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--blanc-a90);
  transition:border-color var(--mv-rapide) var(--mv-sortie), box-shadow var(--mv-rapide) var(--mv-sortie);
}
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint), inset 0 1px 0 var(--blanc-a90) }
.ref-cherche{
  background:var(--blanc-a16); border:1px solid var(--blanc-a34);
  box-shadow:inset 0 1px 0 var(--blanc-a35), 0 20px 50px -24px var(--noir-a55);
  -webkit-backdrop-filter:blur(24px) saturate(170%); backdrop-filter:blur(24px) saturate(170%);
}

/* ── 5. Les cartes ont une arête de lumière et une ombre qui respire ── */
.ref-tuile{ border-radius:var(--r-lg); box-shadow:var(--xl-ombre); transition:transform var(--mv-normal) var(--mv-sortie), box-shadow var(--mv-normal) var(--mv-sortie) }
.pf-carte, .cc-card, .itn-stay, .ref-carte, .trace-carte, .dd-radial-card, .fil-carte{
  border-radius:var(--card-radius);
  box-shadow:inset 0 1px 0 var(--xl-filet-clair), var(--xl-ombre);
}
.dd-radial-card{ box-shadow:inset 0 1px 0 var(--blanc-a8), var(--xl-ombre-forte) }
@media (hover:hover){
  .ref-tuile:hover{ transform:translateY(-3px); box-shadow:var(--xl-ombre-forte) }
  .pf-carte:hover, .cc-card:hover, .itn-stay:hover{ box-shadow:inset 0 1px 0 var(--xl-filet-clair), var(--xl-ombre-forte) }
}
/* Seulement les pilules POSÉES SUR UNE PHOTO : la même classe sert de
   filtre sur fond clair (Tendances), où le verre sombre l'éteignait. */
.ref-tuile .ref-chip, .ref-heros .ref-pilule, .ref-tuile .ref-pilule, .tile .t-season{
  background:var(--nuit-a42); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--blanc-a22); box-shadow:inset 0 1px 0 var(--blanc-a20);
}

/* ── 6. Les pilules ─────────────────────────────────────────────────── */
.chip, .pf-filtre, .itn-saut, .hscal-vite, .soc-seg button{
  transition:transform var(--mv-rapide) var(--mv-ressort), background var(--mv-rapide) var(--mv-sortie), color var(--mv-rapide) var(--mv-sortie), border-color var(--mv-rapide) var(--mv-sortie), box-shadow var(--mv-rapide) var(--mv-sortie);
}
.chip.on, .itn-saut.on{ box-shadow:0 10px 24px -14px var(--encre-a60) }
@media (hover:hover){ .chip:hover, .itn-saut:hover{ transform:translateY(-1px) } }

/* ── 7. Les pieds et barres : du verre sur ce qui défile dessous ────── */
.ov-foot{
  background:var(--papier-a74);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid var(--blanc-a70);
  box-shadow:0 -1px 0 var(--encre-a5), 0 -18px 40px -30px var(--encre-a35);
}
.itn-topbar.on{
  background:var(--papier-a72);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--blanc-a60);
}
.ihx-btn{ transition:transform var(--mv-rapide) var(--mv-ressort), background var(--mv-rapide) var(--mv-sortie) }
.ihx-btn:active{ transform:scale(.92) }

/* ── 8. Les écrans d'accueil et de prix baignent dans une lueur ─────── */
.ov[data-ov="welcome"], .ov[data-ov="premium"], .ov[data-ov="login"], .ov[data-ov="signup"]{
  background:
    radial-gradient(760px 420px at 100% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(560px 360px at -10% 100%, var(--teinte-4fb7b4-a12), transparent 62%),
    var(--bg);
}

/* ── 9. Sur le web : la page respire, les onglets fondent ───────────── */
html:not(.native-app) body{
  background:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(800px 480px at 100% 20%, var(--teinte-4fb7b4-a7), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
html:not(.native-app) .tabview.active{ animation:xl-fondu var(--mv-lent) var(--mv-sortie) }
html:not(.native-app) .tabbar{
  box-shadow:inset 0 -1px 0 var(--blanc-a6), 0 10px 40px -20px var(--noir-a50);
}
html:not(.native-app) .tab-cta{
  background-image:var(--xl-degrade); border:none;
  box-shadow:inset 0 1px 0 var(--blanc-a28), 0 12px 28px -14px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* ── 10. La fiche destination passe la nuit ────────────────────────────
   Une fiche de lieu est une image avant d'être un texte : sur fond
   sombre, la photo gagne, les incontournables (déjà sur bannière de nuit)
   ne font plus tache, et les cartes deviennent du verre. Les jetons sont
   redéfinis à l'échelle de cet écran seulement : tout ce qui lit --bg,
   --surface, --ink… suit sans qu'on touche à un composant. */
.ov[data-ov="destination"]{
  --bg:var(--teinte-0e0c0a); --surface:var(--teinte-161311); --surface2:var(--teinte-1e1a17); --surface-raised:var(--teinte-1a1613);
  --n-0:var(--teinte-161311); --n-1:var(--teinte-1a1613); --n-2:var(--teinte-211d19); --n-3:var(--teinte-2a2521); --n-4:var(--teinte-352f2a);
  --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); --fog-soft:var(--teinte-1e1a17); --gold:var(--teinte-f4efe7); --gold-tint:var(--teinte-211d19);
  --onink:var(--teinte-0e0c0a);
  background:
    radial-gradient(720px 420px at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
  color:var(--ink);
}
/* Le volet garde son FOND : transparent, le contenu qui remonte passait
   par-dessus la photo et s'y lisait en surimpression (capture du 4 octobre,
   « La table italienne » écrit sur la côte amalfitaine). */
.ov[data-ov="destination"] .dd-volet{ background:var(--bg) }
/* Les ronds posés sur la photo : blancs, sans le liseré bleu qu'iOS
   ajoute à un bouton qui vient de recevoir le focus. */
.ov[data-ov="destination"] .ihx-btn, .ov[data-ov="destination"] .itn-hero-top button{
  color:var(--blanc); border-color:var(--blanc-a34); background:var(--nuit-profonde-a32);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); outline:none;
}
.ov[data-ov="destination"] .ihx-btn svg, .ov[data-ov="destination"] .itn-hero-top button svg{ stroke:var(--blanc) }
.ov[data-ov="destination"] .cc-card, .ov[data-ov="destination"] .dd-radial-card{
  background:var(--blanc-a5); border:1px solid var(--blanc-a10);
  box-shadow:inset 0 1px 0 var(--blanc-a8), 0 30px 70px -40px var(--noir-a90);
}
.ov[data-ov="destination"] .ov-foot{
  background:var(--nuit-profonde-a72); border-top:1px solid var(--blanc-a8);
  box-shadow:0 -18px 40px -30px var(--noir-a80);
}
.ov[data-ov="destination"] .carte-handle{ background:var(--blanc-a22) }

/* ── 11. La transition partagée : la tuile glisse vers le héros ─────── */
::view-transition-old(fiche-photo), ::view-transition-new(fiche-photo){
  animation-duration:var(--mv-lent); animation-timing-function:var(--mv-sortie);
  border-radius:var(--r-lg); overflow:hidden; mix-blend-mode:normal;
}
::view-transition-old(root), ::view-transition-new(root){ animation-duration:var(--mv-lent) }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important }
}

/* ── 12. Le focus : jamais le bleu du système au doigt ───────────────── */
button:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline:none }
button:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ── 13. Le fil en plein écran : les étapes sont du verre ──────────────
   Capture du 4 octobre : texte blanc sur pastille claire, illisible. Sur
   une photo, une pastille est du verre sombre, comme les réactions. */
.ov.fil-plein-ov .tr-etapes .tr-et{
  background:var(--nuit-profonde-a42) !important; color:var(--blanc) !important;
  border:1px solid var(--blanc-a22);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.ov.fil-plein-ov .tr-etapes i{ background:var(--blanc-a50) }
.ov.fil-plein-ov .tr-sq-t{ color:var(--blanc-a82) }

/* ── 14. Une action qui détruit ne porte pas l'accent ───────────────── */
.ov[data-ov="block-report"] .btn{ background:var(--teinte-b3261e); background-image:none; color:var(--blanc); box-shadow:0 12px 28px -16px var(--teinte-b3261e-a70) }