/* ═══════════════════════════════════════════════════════════════════════
   VERRE ET LUMIÈRE — la couche qui pousse le moderne à l'extrême
   ─────────────────────────────────────────────────────────────────────
   Charlotte, le 3 octobre : « je veux pousser à l'extrême l'aspect
   moderne, que ça soit sur l'app comme sur le site, partout ».

   Ce que « moderne » veut dire en 2026, et qu'on tient ici :
     · LE VERRE. Ce qui flotte est translucide et flouté : la barre
       d'onglets, le pied de prix, la barre d'un écran ouvert, les
       pilules posées sur une photo. Un filet de lumière en haut, une
       ombre très diffuse en bas : la surface a une épaisseur.
     · LA LUMIÈRE. Les boutons principaux portent un dégradé et un
       reflet ; au survol, un éclat les traverse. Les cartes ont une
       arête claire. Rien n'est plat.
     · LA TYPOGRAPHIE. Les titres montent et se resserrent
       (-0,045 em) ; le gras est franc ; le reste s'efface.
     · LE RAYON. 24 à 28 px partout où une surface se tient seule ;
       pilule pour tout ce qui s'appuie.
     · LE CALME. prefers-reduced-motion coupe tout ; aucune boucle.

   Les jetons restent ceux de da.css. Rien ici ne change un comportement.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --xl-verre:rgba(255,255,255,.58);
  --xl-verre-sombre:rgba(20,17,14,.56);
  --xl-filet-clair:rgba(255,255,255,.72);
  --xl-ombre:0 1px 2px rgba(31,26,20,.04), 0 26px 60px -34px rgba(31,26,20,.36);
  --xl-ombre-forte:0 2px 6px rgba(31,26,20,.05), 0 40px 90px -44px rgba(31,26,20,.5);
  --xl-degrade:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 62%, #FFC79E) 100%);
  --xl-sortie:cubic-bezier(.2,.7,.2,1);
}

@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:rgba(22,19,16,.86);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:.5px solid rgba(255,255,255,.14);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.22), 0 20px 44px -18px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.18);
}
.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:rgba(255,255,255,.16); border:none;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.28);
  transition:transform .48s cubic-bezier(.3,1.25,.4,1);
}
.tab-it{ background:transparent !important; box-shadow:none !important; transition:transform .2s var(--spring, ease) }
.tab-it:active{ transform:scale(.92) }
.tab-it .tab-ico, .tab-it .tab-mot{ color:rgba(255,255,255,.62) }
.tab-it.on .tab-ico, .tab-it.on .tab-mot{ color:#FFFFFF }
.tab-it.on .tab-mot{ font-weight:650 }
/* 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:15px }
@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 rgba(255,255,255,.28), 0 14px 30px -16px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:transform .18s var(--spring, ease), box-shadow .25s ease, filter .2s ease;
}
.btn::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), 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 rgba(255,255,255,.3), 0 20px 40px -16px color-mix(in srgb, var(--accent) 75%, transparent) }
  .btn:hover::after{ animation:xl-eclat .7s var(--xl-sortie) }
}
/* Les boutons blancs et fantômes gardent leur blancheur : pas de dégradé. */
.btn.gold, .btn.blanc, .btn-ghost{ background-image:none }
.btn-ghost{
  background:var(--xl-verre); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px -18px rgba(31,26,20,.4);
  transition:transform .18s var(--spring, ease), background .2s ease;
}
.btn-ghost:active{ transform:scale(.97) }

/* ── 4. Les champs ──────────────────────────────────────────────────── */
.input{
  border-radius:16px; background:var(--surface); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint), inset 0 1px 0 rgba(255,255,255,.9) }
.ref-cherche{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 20px 50px -24px rgba(0,0,0,.55);
  -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:22px; box-shadow:var(--xl-ombre); transition:transform .3s var(--xl-sortie), box-shadow .3s ease }
.pf-carte, .cc-card, .itn-stay, .ref-carte, .trace-carte, .dd-radial-card, .onb-carte, .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 rgba(255,255,255,.08), 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:rgba(20,17,14,.42); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

/* ── 6. Les pilules ─────────────────────────────────────────────────── */
.chip, .pf-filtre, .itn-saut, .hscal-vite, .soc-seg button{
  transition:transform .18s var(--spring, ease), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.chip.on, .itn-saut.on{ box-shadow:0 10px 24px -14px rgba(31,26,20,.6) }
@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:rgba(246,244,241,.74);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.7);
  box-shadow:0 -1px 0 rgba(31,26,20,.05), 0 -18px 40px -30px rgba(31,26,20,.35);
}
.itn-topbar.on{
  background:rgba(246,244,241,.72);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.6);
}
.ihx-btn{ transition:transform .18s var(--spring, ease), background .2s ease }
.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="onboarding"], .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%, rgba(79,183,180,.12), 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%, rgba(79,183,180,.07), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
html:not(.native-app) .tabview.active{ animation:xl-fondu .4s var(--xl-sortie) }
html:not(.native-app) .tabbar{
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06), 0 10px 40px -20px rgba(0,0,0,.5);
}
html:not(.native-app) .tab-cta{
  background-image:var(--xl-degrade); border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 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:#0E0C0A; --surface:#161311; --surface2:#1E1A17; --surface-raised:#1A1613;
  --n-0:#161311; --n-1:#1A1613; --n-2:#211D19; --n-3:#2A2521; --n-4:#352F2A;
  --ink:#F4EFE7; --ink-soft:#D8D0C6; --ink-faint:#9A9187; --sub:#A79E92;
  --line:#2A2521; --line2:#352F2A; --fog-soft:#1E1A17; --gold:#F4EFE7; --gold-tint:#211D19;
  --onink:#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:#fff; border-color:rgba(255,255,255,.34); background:rgba(14,12,10,.32);
  -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:#fff }
.ov[data-ov="destination"] .cc-card, .ov[data-ov="destination"] .dd-radial-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px -40px rgba(0,0,0,.9);
}
.ov[data-ov="destination"] .ov-foot{
  background:rgba(14,12,10,.72); border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -18px 40px -30px rgba(0,0,0,.8);
}
.ov[data-ov="destination"] .carte-handle{ background:rgba(255,255,255,.22) }

/* ── 11. La transition partagée : la tuile glisse vers le héros ─────── */
::view-transition-old(fiche-photo), ::view-transition-new(fiche-photo){
  animation-duration:.55s; animation-timing-function:cubic-bezier(.2,.7,.2,1);
  border-radius:24px; overflow:hidden; mix-blend-mode:normal;
}
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.4s }
@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:rgba(14,12,10,.42) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.ov.fil-plein-ov .tr-etapes i{ background:rgba(255,255,255,.5) }
.ov.fil-plein-ov .tr-sq-t{ color:rgba(255,255,255,.82) }

/* ── 14. Une action qui détruit ne porte pas l'accent ───────────────── */
.ov[data-ov="block-report"] .btn{ background:#B3261E; background-image:none; color:#fff; box-shadow:0 12px 28px -16px rgba(179,38,30,.7) }