/* ── R8 · L'esthétique façon Revolut, direction B « clair et graphique » ──
   Charlotte, 9 novembre 2026. Après les parcours (R0 à R7) et la passe
   écran par écran, l'esthétique : « quand je parle de l'UX Revolut
   j'entends aussi l'aspect esthétique ». Deux directions sur maquettes
   (maquettes/r8-direction-a.png, r8-direction-b.png) ; elle choisit B.

   Ce qui change, partout :
     · le fond : ivoire calme ; les bandeaux de nuit du 12 octobre (Vous,
       Tendances, Réglages…) passent dans la même lumière ;
     · les titres : en gras, écrits normalement, dans la police de l'app —
       fini les capitales étroites (Big Shoulders) ;
     · les étiquettes : plus de petites capitales à chasse fixe ; une
       mention courte, en clair ;
     · les cartes : blanches, très arrondies, posées par une ombre douce ;
     · les icônes de liste : dans des pastilles rondes aux couleurs douces ;
     · les boutons : le principal en encre, le second en creux.
   Ce qui ne change pas : la barre d'onglets sombre (décision maintenue),
   l'accent de la saison, les photos.

   Comme iphone.css, cette feuille ne touche que html.native-app, et elle
   est chargée APRÈS lui : elle en reprend des règles posées en !important,
   elle doit donc parler aussi fort. Toutes les valeurs viennent de
   tokens.css (--r8-*, --t-*). */

/* ── 1. La lumière : un seul fond, plus de bandeau de nuit ─────────────── */
html.native-app body, html.native-app .phone, html.native-app .screen, html.native-app .tabview, html.native-app .ref-ecran,
html.native-app .ref-nappe, html.native-app .ref-volet, html.native-app .voile-encoche,
html.native-app.voile-nuit .voile-encoche{ background:var(--r8-fond) !important }
html.native-app :is(.tabview[data-tab="trending"], .tabview[data-tab="moi"]) > .ref-ecran{ box-shadow:none !important }
html.native-app .tabview[data-tab="trending"] .ref-tete, html.native-app .tabview[data-tab="trending"] .ref-cherche.posee,
html.native-app .tabview[data-tab="trending"] .ref-pilules, html.native-app .tabview[data-tab="moi"] .ref-tete{
  background:var(--r8-fond) !important; color:var(--r8-encre) !important }
html.native-app :is(.tabview[data-tab="trending"], .tabview[data-tab="moi"]) :is(.ref-h1, .ref-sur){ color:var(--r8-encre) !important }
html.native-app .tabview[data-tab="moi"] .ref-tete{ padding-bottom:20px !important }
html.native-app .tabview[data-tab="moi"] .ref-volet{ margin-top:0 !important; border-radius:0 !important }
/* Communauté garde son globe sur la nuit — c'est la carte signature de
   l'écran, comme la carte sombre d'un compte —, mais le volet qui monte
   par-dessus est de la même lumière que le reste de l'app. */
html.native-app .tabview[data-tab="profile"] .ref-volet{ background:var(--r8-fond) !important }
html.native-app .tabview[data-tab="trending"] .ref-pilules{ padding-bottom:4px !important; background:transparent !important }
/* La nappe remontait de 24 px sous le bandeau de nuit (iphone.css) ; sans
   bandeau, elle mordait 6 px sur les filtres et leur volait leur zone de
   44 px (banc-zone-tactile). Elle se pose à plat, le même écart de 14 px. */
html.native-app .tabview[data-tab="trending"] .ref-nappe{ margin-top:0 !important; padding-top:12px !important }
html.native-app .tabview[data-tab="trending"] .ref-cherche.posee{ margin-top:16px !important; background:var(--r8-carte) !important; box-shadow:var(--r8-ombre) !important; border-radius:999px !important }
html.native-app .tabview[data-tab="trending"] .ref-cherche input{ color:var(--r8-encre) !important }
html.native-app .tabview[data-tab="trending"] .ref-pilule{ background:var(--r8-creux) !important; color:var(--r8-encre) !important }
html.native-app .tabview[data-tab="trending"] .ref-pilule.on{ background:var(--r8-encre) !important; color:var(--r8-carte) !important }

/* Les écrans de réglages : la même lumière, le titre en gras sur l'ivoire. */
html.native-app .ov:is([data-ov="settings"],[data-ov="notifications"],[data-ov="help"],[data-ov="prefs"],[data-ov="amis"],[data-ov="messages"],[data-ov="premium"],[data-ov="privacy-prefs"],[data-ov="blocked-users"]),
html.native-app .ov:is([data-ov="settings"],[data-ov="notifications"],[data-ov="help"],[data-ov="prefs"],[data-ov="amis"],[data-ov="messages"],[data-ov="premium"],[data-ov="privacy-prefs"],[data-ov="blocked-users"]) > :is(.navbar, .ov-scroll){
  background:var(--r8-fond) !important }
html.native-app .ov:is([data-ov="settings"],[data-ov="notifications"],[data-ov="help"],[data-ov="prefs"],[data-ov="amis"],[data-ov="messages"],[data-ov="premium"],[data-ov="privacy-prefs"],[data-ov="blocked-users"]) > .navbar .nav-title{
  color:var(--r8-encre) !important }
html.native-app .ov:is([data-ov="settings"],[data-ov="notifications"],[data-ov="help"],[data-ov="prefs"],[data-ov="amis"],[data-ov="messages"],[data-ov="premium"],[data-ov="privacy-prefs"],[data-ov="blocked-users"]) > .navbar .ihx-btn{
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; box-shadow:var(--r8-ombre) !important }
html.native-app .ov:is([data-ov="settings"],[data-ov="notifications"],[data-ov="help"],[data-ov="prefs"],[data-ov="amis"],[data-ov="messages"],[data-ov="premium"],[data-ov="privacy-prefs"],[data-ov="blocked-users"]) > .navbar .ihx-btn svg{
  stroke:var(--r8-encre) !important }
html.native-app .ov:is([data-ov="settings"],[data-ov="notifications"],[data-ov="help"],[data-ov="prefs"],[data-ov="amis"],[data-ov="messages"],[data-ov="premium"],[data-ov="privacy-prefs"],[data-ov="blocked-users"]) > .ov-scroll{
  border-radius:0 !important; padding-top:8px !important }

/* ── 2. Les titres : en gras, écrits normalement ───────────────────────── */
html.native-app :is(.ref-h1, .dcard .d-q, .ov .itn-title, .jd-titre, .ref-entete h2, .pf-entete h2,
  .ref-tuile .ref-n, .sel-grande .sel-n,
  .ov:is([data-ov="itinerary"],[data-ov="day"]) :is(.itn-jours-h, .section-h h2, h2),
  .ov:is([data-ov="settings"],[data-ov="notifications"],[data-ov="help"],[data-ov="prefs"],[data-ov="amis"],[data-ov="messages"],[data-ov="premium"],[data-ov="privacy-prefs"],[data-ov="blocked-users"]) > .navbar .nav-title){
  font-family:var(--sans) !important; text-transform:none !important; font-weight:700 !important;
  letter-spacing:-.02em !important; line-height:1.08 !important }
html.native-app .ref-h1, html.native-app :is(.tabview[data-tab="trending"], .tabview[data-tab="moi"], .tabview[data-tab="profile"]) .ref-h1,
html.native-app .ov .itn-title, html.native-app .jd-titre,
html.native-app .ov:is([data-ov="settings"],[data-ov="notifications"],[data-ov="help"],[data-ov="prefs"],[data-ov="amis"],[data-ov="messages"],[data-ov="premium"],[data-ov="privacy-prefs"],[data-ov="blocked-users"]) > .navbar .nav-title{
  font-size:var(--t-ecran) !important }
html.native-app .tabview[data-tab="discover"] .ref-heros-m .ref-h1{ font-size:48px !important; line-height:1 !important }
html.native-app #deck .dcard .d-q{ font-size:var(--t-titre) !important; line-height:1.1 !important }
html.native-app :is(.ref-entete h2, .pf-entete h2, .ov:is([data-ov="itinerary"],[data-ov="day"]) :is(.itn-jours-h, .section-h h2, h2)){
  font-size:var(--t-section) !important; color:var(--r8-encre) !important }
html.native-app .ref-tuile .ref-n, html.native-app .tabview[data-tab="discover"] .ref-tuile .ref-n{ font-size:var(--t-section) !important }
html.native-app .sel-grande .sel-n{ font-size:var(--t-ecran) !important; line-height:1.05 !important }
/* Le trait sous les titres de section disparaît : la référence n'en a pas. */
html.native-app .ref-entete::after, html.native-app .pf-entete::after{ display:none !important }

/* ── 3. Les étiquettes : une mention courte, en clair ──────────────────── */
html.native-app :is(.ref-sur, .ref-lien, .ref-entete .meta, .sel-signe, .d-num, .eyebrow){
  font-family:var(--sans) !important; text-transform:none !important; letter-spacing:0 !important;
  font-size:var(--t-petit) !important; font-weight:600 !important }
html.native-app :is(.ref-sur, .d-num, .eyebrow){ color:var(--sub) !important }
html.native-app .tabview[data-tab="trending"] .ref-tete::before{
  font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:var(--t-petit); font-weight:600; color:var(--sub) }
html.native-app :is(.ref-badge, .ref-badge.fort, .ref-badge.tiede, .ref-badge.doux){
  font-family:var(--sans) !important; text-transform:none !important; letter-spacing:0 !important;
  font-size:var(--t-micro) !important; font-weight:600 !important; border-radius:999px !important; padding:5px 12px !important }

/* ── 4. Les cartes : blanches, très arrondies, posées par une ombre ────── */
html.native-app :is(.itn-tuile, .itn-day, .pf-carte, .ens-ligne, .acc-tab, .cercle-card, .envie, .ref-seg,
  .gen-esq, .dcard .radio-it, .itn-trace, .itn-affiner, .compris){
  background:var(--r8-carte) !important; border:0 !important; box-shadow:var(--r8-ombre) !important;
  border-radius:var(--r8-rayon) !important }

/* Les listes de réglages et de menus : une carte, des lignes nettes. */
html.native-app .ov .ov-scroll > .row, html.native-app .ov .list > .row{ background:var(--r8-carte) }

/* ── 5. Les icônes de liste : dans une pastille ronde ──────────────────── */
html.native-app .row .r-ico{
  width:40px !important; height:40px !important; border-radius:50% !important; align-items:center;
  background:var(--r8-p1-fond); color:var(--r8-p1) !important }
html.native-app .row:nth-of-type(4n+2) .r-ico{ background:var(--r8-p2-fond); color:var(--r8-p2) !important }
html.native-app .row:nth-of-type(4n+3) .r-ico{ background:var(--r8-p3-fond); color:var(--r8-p3) !important }
html.native-app .row:nth-of-type(4n+4) .r-ico{ background:var(--r8-p4-fond); color:var(--r8-p4) !important }
html.native-app .row .r-ico svg{ stroke:currentColor }

/* ── 6. Les boutons : le principal en encre, le second en creux ────────── */
html.native-app :is(.btn, .btn.gold, .btn.sm):not(:disabled){
  background:var(--r8-encre) !important; color:var(--r8-carte) !important; background-image:none !important;
  box-shadow:none !important; border:0 !important; border-radius:999px !important }
html.native-app .btn-ghost{
  background:var(--r8-creux) !important; color:var(--r8-encre) !important; border:0 !important;
  box-shadow:none !important; border-radius:999px !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important }

/* ── 7. Plus de petites capitales nulle part ──────────────────────────────
   Relevé le 9 novembre : 130 règles mettaient une étiquette en capitales
   espacées (souvent 8 à 10 px, à chasse fixe), plus quelques styles écrits
   dans le code. La référence n'en a pas : une mention courte, en clair, à
   la marche « micro » de l'échelle (11 px, 600). Liste tirée des feuilles,
   une par une ; les titres sont traités en 2. */
html.native-app :is(
  .acc-pro-terme,
  .acc-tete .acc-quoi,
  .act .ac-s,
  .act .ac-tag,
  .act-day,
  .adm-type,
  .ai-banner .ab-k,
  .amis-eyebrow,
  .an-sur,
  .at-d,
  .atlas-info-status,
  .atlas-presence-label,
  .atlas-seal-sub,
  .bline .bl-s,
  .book-meta,
  .bud-l,
  .bud-s,
  .carnet-b,
  .cc-next,
  .cc-pts,
  .cc-wait,
  .ccc-s,
  .cch-eyebrow,
  .cf label,
  .chat-context,
  .chat-st,
  .compris-t,
  .contrib .c-r,
  .contrib .c-you,
  .day-sep,
  .dayrow .dr-l,
  .dcard .d-num,
  .disc-hello,
  .eyebrow,
  .field label,
  .foot-price .fp-l,
  .form-c-ruban,
  .gen-esq-tete span:last-child,
  .gen-panne-lieu,
  .gen-progress-label,
  .gen2-meta,
  .hist .hi-w,
  .host .h-s,
  .hs-map-loading,
  .hscal-wk span,
  .info-card .ic-l,
  .inv-eyebrow,
  .invit-sur,
  .itin-stat .mono,
  .itn-confirme,
  .itn-dates,
  .itn-dl,
  .itn-dn,
  .itn-dtags span,
  .itn-lbl,
  .itn-phase-sejour .itn-phase-q,
  .itn-stay-unconf,
  .itn-stay-verif,
  .itn-suite-phase,
  .itn-transfer-badge,
  .map-pop .mp-k,
  .map-pop .mp-l,
  .mo-ok,
  .mots-s,
  .mph-pill,
  .mq-couv-marque,
  .mq-couv-pied,
  .mq-l,
  .nav-title,
  .notif-day,
  .pay-sum .ps-s,
  .pf-access-st,
  .pf-doc-st,
  .pf-eyebrow,
  .pf-foot,
  .pf-sec,
  .pf-stats .ps-l,
  .pf-tier,
  .pfd-lb,
  .pile-c .t-r,
  .pile-c .t-when,
  .pill,
  .pp-ch-l,
  .prof-badge,
  .prof-m,
  .prof-stat .ps-l,
  .prop-titre,
  .prop-var-n,
  .rc-stat-l,
  .ref-badge.doux,
  .ref-badge.fort,
  .ref-badge.tiede,
  .ref-marque,
  .ref-stat span,
  .ref-verre,
  .resa-jour-tag,
  .resa-ref span,
  .review .rv-d,
  .row .r-s,
  .section-h .meta,
  .secure,
  .sp-titre,
  .spot-eyebrow,
  .stat-chip .k,
  .status,
  .stepper .st-l,
  .story-eyebrow,
  .studio-eyebrow,
  .sugg-coords,
  .tb-day,
  .tb-days-left,
  .tb-eyebrow,
  .tb-loc,
  .tb-pied-k,
  .tb-section-label,
  .tile .t-r,
  .tile .t-season,
  .tile .t-when,
  .tool .tl-s,
  .tpub-k,
  .tr-futur,
  .tr-sq-t,
  .track-cine .tc-dest,
  .track-cine .tc-num,
  .track-scrubber-label,
  .track-step-plain .tsp-num,
  .tv-fam h3,
  .urg-bloc h3,
  .w-fac,
  [style*="text-transform:uppercase"]){
  text-transform:none !important; letter-spacing:0 !important; font-family:var(--sans) !important;
  font-size:var(--t-micro) !important; font-weight:var(--t-micro-g) !important }
/* À part : un identifiant dans le :is() donnait sa force à TOUTE la liste,
   et plus aucune règle ne pouvait reprendre un de ces textes. */
html.native-app #deck .dcard .d-num{
  text-transform:none !important; letter-spacing:0 !important; font-family:var(--sans) !important;
  font-size:var(--t-micro) !important; font-weight:var(--t-micro-g) !important }

/* ── 8. Corrections après les premières captures ─────────────────────── */
/* Tendances et Vous : la nappe de nuit était peinte en dégradé sur l'écran
   lui-même, à une force que le 1. n'atteignait pas. */
html.native-app :is(.tabview[data-tab="trending"], .tabview[data-tab="moi"]) > .ref-ecran{ background:var(--r8-fond) !important }
/* « Se connecter » dans la carte du compte : un vrai bouton principal. */
html.native-app .pf-login-b{ background:var(--r8-encre) !important; color:var(--r8-carte) !important }
/* Les cartes de destination : la légende sous la photo avait 54 px fixes,
   taillés pour les capitales étroites. Le titre en gras y prend plus de
   place, et la ligne du dessous était écrasée (banc-accessibilite-b6). La
   légende suit maintenant son texte, en grand texte compris. */
html.native-app .ref-tuile:not(.monde){ padding-bottom:64px !important }
html.native-app .ref-tuile .ref-tuile-m{ height:auto !important; min-height:64px }
html.native-app .ref-tuile .ref-tuile-m > *{ flex-shrink:0 }

/* ── 9. Communauté : chaque voyage est une carte ─────────────────────────
   La photo et ce qui la suit (étapes, chiffres, « Partir de ce voyage »)
   formaient deux morceaux : une photo arrondie, puis du texte posé à même
   le fond. Ils deviennent UNE carte blanche, la photo en haut. */
html.native-app .trace-carte{
  background:var(--r8-carte) !important; border-radius:var(--r8-rayon) !important;
  box-shadow:var(--r8-ombre) !important; overflow:hidden !important; margin-bottom:20px !important }
html.native-app .trace-carte .tr-ph{ border-radius:0 !important; box-shadow:none !important }
html.native-app .trace-carte .tr-sq{ padding:16px 20px 20px !important }
/* Les actions posées sur la photo : des ronds pleins, plus de verre dépoli. */
html.native-app .tr-ph > .tr-coin :is(.tr-reac, .tr-com, .tr-part, .tr-plus){
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; border:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important }
html.native-app .tr-ph > .tr-coin .tr-reac.on{ background:var(--accent) !important; color:var(--accent-ink) !important }
/* Le titre replié (wow.css §4) : la même lumière que la page, sans verre. */
html.native-app .titre-barre{
  background:var(--r8-fond) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  font-family:var(--sans) !important }

/* ── 10. Paiement : deux cartes, un vrai écart ───────────────────────────
   Le tableau « Ce qui est ouvert » collait à la carte du prix (2 px) : on
   lisait une seule carte cassée. Et le texte d'introduction était en gras,
   comme un titre ; c'est du texte courant. */
html.native-app .acc-tab{ margin-top:12px !important }
/* :not(#_) : la liste du 7 porte des sélecteurs à quatre classes ; il faut
   le poids d'un identifiant pour reprendre ce seul texte. */
html.native-app .acc-tete-place .cc-pts:not(#_){ font-size:var(--t-corps) !important; font-weight:var(--t-corps-g) !important; line-height:1.45 !important }

/* ── 11. Réglages : les groupes en cartes blanches, les icônes en pastilles
   La carte existait (da.css §… « .pf-rows-b »), mais la lumière du 1 la
   repeignait en ivoire : les lignes flottaient de nouveau sur le fond. */
html.native-app .ov .pf-rows-b{
  background:var(--r8-carte) !important; border:0 !important; box-shadow:var(--r8-ombre) !important;
  border-radius:var(--r8-rayon) !important; padding:2px 16px !important }
html.native-app .pf-rows-b .pf-row-b-ic{
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:var(--r8-p1-fond) !important; color:var(--r8-p1) !important }
html.native-app .pf-rows-b .pf-row-b:nth-child(4n+2) .pf-row-b-ic{ background:var(--r8-p2-fond) !important; color:var(--r8-p2) !important }
html.native-app .pf-rows-b .pf-row-b:nth-child(4n+3) .pf-row-b-ic{ background:var(--r8-p3-fond) !important; color:var(--r8-p3) !important }
html.native-app .pf-rows-b .pf-row-b:nth-child(4n+4) .pf-row-b-ic{ background:var(--r8-p4-fond) !important; color:var(--r8-p4) !important }
html.native-app .pf-rows-b .pf-row-b-ic svg{ width:18px; height:18px; stroke:currentColor }

/* ── 12. Connexion : le retour posé sur la photo, un rond plein ─────────── */
html.native-app .auth-back{
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; border:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important }
html.native-app .auth-back svg{ stroke:var(--r8-encre) !important }

/* ── 13. Itinéraire et journée : la feuille ivoire, les cartes blanches ───
   La feuille sous la photo était blanche : les tuiles (budget, route,
   climat, étapes) et la carte du tracé, blanches elles aussi, ne s'en
   détachaient plus que par une ombre à peine visible. */
html.native-app .ov:is([data-ov="itinerary"], [data-ov="itn"], [data-ov="day"]),
html.native-app .ov:is([data-ov="itinerary"], [data-ov="itn"]) .dd-volet{ background:var(--r8-fond) !important }
/* Journée : la description touchait le titre « Comment vous sentez-vous ? ». */
html.native-app .ov[data-ov="day"] .section-h{ margin-top:20px !important }
/* Les ronds de la barre (retour, partager, jour précédent/suivant) : pleins,
   blancs, sans verre ; sur l'ivoire de la journée ils disparaissaient. */
html.native-app .ov:is([data-ov="itinerary"], [data-ov="itn"], [data-ov="day"], [data-ov="livre"]) .navbar .ihx-btn{
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; border:0 !important;
  box-shadow:var(--r8-ombre) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important }

/* ── 14. Ensemble : chaque voyageur dans sa pastille ─────────────────────
   Les initiales étaient trois ronds gris identiques ; les pastilles douces
   du 5 les distinguent d'un coup d'œil, comme des contacts. */
html.native-app [data-ensemble] .ens-pers .ens-av:not(.plus){ border:0 !important; background:var(--r8-p1-fond) !important; color:var(--r8-p1) !important }
html.native-app [data-ensemble] .ens-pers:nth-child(4n+2) .ens-av:not(.plus){ background:var(--r8-p2-fond) !important; color:var(--r8-p2) !important }
html.native-app [data-ensemble] .ens-pers:nth-child(4n+3) .ens-av:not(.plus){ background:var(--r8-p3-fond) !important; color:var(--r8-p3) !important }
html.native-app [data-ensemble] .ens-pers:nth-child(4n+4) .ens-av:not(.plus){ background:var(--r8-p4-fond) !important; color:var(--r8-p4) !important }
html.native-app [data-ensemble] .ens-av.moi{ box-shadow:0 0 0 2px var(--r8-fond), 0 0 0 4px var(--r8-p1) !important }

/* ── 15. Plus de verre dépoli, nulle part ─────────────────────────────────
   Charlotte, 9 novembre : « R8 doit couvrir toute l'app entière sans
   exception ». Le tour complet (tools/audit-r8.js, 98 écrans et 5
   onglets) a trouvé 69 règles de flou d'arrière-plan réparties dans dix
   feuilles. La direction B n'en a aucun : tout ce qui flottait en verre
   devient plein. Seule la barre d'onglets garde le sien (décision du
   12 octobre, maintenue en R8). */
html.native-app body *:not(.tabbar):not(.tabbar *){
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important }

/* Ce qui flottait en verre clair sur une photo : des ronds et des étiquettes
   blancs, pleins, à l'encre. */
html.native-app :is(.ref-rond, .ref-heros-porte, .deck-back, .itn-topbar .ihx-btn, .itn-m1 > span,
  .tr-plus, .tr-reac:not(.on), .tr-part, .tr-com, .tr-qui, .fp-fermer, .pc-lien, .pc-close, .itn-dn){
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; border-color:transparent !important }
html.native-app :is(.ref-rond, .deck-back, .itn-topbar .ihx-btn, .tr-plus, .tr-reac, .tr-part, .fp-fermer, .pc-close) svg{ stroke:currentColor }
html.native-app .ref-cherche:not(.posee){ background:var(--r8-carte) !important; color:var(--r8-encre) !important; border:0 !important; box-shadow:var(--r8-ombre) !important }
/* La loupe seule : la flèche du rond « Composer mon voyage » (.ref-go) garde
   son blanc sur l'accent (banc-icones-lisibles). */
html.native-app .ref-cherche:not(.posee) :is(input, input::placeholder, > svg){ color:var(--sub) !important; stroke:var(--sub) }
/* Les pastilles posées sur une photo (« La saison s'ouvre », « 27 °C ») :
   pleines, encre sur blanc pour les fortes, blanc pour les douces. */
html.native-app .ref-badge.fort{ background:var(--r8-encre) !important; color:var(--r8-carte) !important; border:0 !important }
html.native-app .ref-badge.doux, html.native-app .ref-badge.tiede{ background:var(--r8-carte) !important; color:var(--r8-encre) !important; border:0 !important }
/* Les cartes de l'aperçu du globe (Communauté, Atlas) : blanches, pleines. */
html.native-app :is(.atlas-apercu-porte, .atlas-presence-invite, .ref-stat){
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; border:0 !important; box-shadow:var(--r8-ombre) !important }
html.native-app :is(.atlas-apercu-porte, .atlas-presence-invite, .ref-stat) *:not(.ref-go):not(.ref-go *){ color:inherit }
/* Les pieds (prix, « Jour 3 », « Enregistrer ») : blancs, un filet au-dessus. */
html.native-app .ov-foot{ background:var(--r8-carte) !important; box-shadow:0 -1px 0 var(--r8-trait) !important }
/* L'assistant : barre et zone de saisie dans la même lumière. */
html.native-app .ov .chat-nav{ background:var(--r8-fond) !important; box-shadow:0 1px 0 var(--r8-trait) !important }
html.native-app .ov .composer{ background:var(--r8-carte) !important; box-shadow:0 -1px 0 var(--r8-trait) !important }
/* Les messages éphémères : un aplat d'encre. */
html.native-app .toast{ background:var(--r8-encre) !important; color:var(--r8-carte) !important }
/* Explorer : l'offre (« Votre premier voyage est offert ») était un creux
   gris ; c'est une carte, comme les autres. */
html.native-app .ref-offre{ background:var(--r8-carte) !important; border:0 !important; box-shadow:var(--r8-ombre) !important; border-radius:var(--r8-rayon) !important }

/* ── 16. Destination : « Les incontournables » passent au jour ────────────
   La roue était une bannière de nuit posée dans une feuille claire
   (direction.css). En B, c'est une carte blanche : les mêmes variables
   que la carte, rendues à la lumière, et le dessin suit. */
html.native-app .ov[data-ov="destination"] .dd-radial-card{
  --surface:var(--r8-carte); --surface2:var(--r8-creux); --n-0:var(--r8-carte); --n-1:var(--r8-fond); --n-2:var(--r8-creux); --n-3:var(--r8-trait);
  --ink:var(--r8-encre); --line:var(--r8-trait); --line2:var(--r8-trait);
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; box-shadow:var(--r8-ombre) !important; border:0 !important }
html.native-app .dd-radial-card .trend-rings circle{ stroke:var(--r8-trait) !important }
html.native-app .dd-radial-card .rad-node .lb{ color:var(--r8-encre) !important; text-shadow:none !important }
html.native-app .dd-radial-card .rad-node:not(.on) .th{ background:var(--r8-p1-fond) !important; color:var(--r8-p1) !important; box-shadow:none !important }
html.native-app .dd-radial-card .rad-node:not(.on) .th svg{ stroke:var(--r8-p1) !important }
html.native-app .dd-radial-card .center-ava.trend-center{ border-color:var(--r8-carte) !important; box-shadow:var(--r8-ombre) !important }
html.native-app .dd-detail{ background:var(--r8-fond) !important; border:0 !important }
html.native-app .dd-detail .r-t{ color:var(--r8-encre) !important }
html.native-app .dd-detail .r-s{ color:var(--sub) !important }
html.native-app .dd-detail .r-ico{ background:var(--r8-p1-fond) !important; color:var(--r8-p1) !important }
html.native-app .dd-detail .r-ico svg{ stroke:var(--r8-p1) !important }
/* Toutes les feuilles sous une photo (destination, monde…) : ivoire. */
html.native-app .dd-volet{ background:var(--r8-fond) !important }
/* Tous les ronds de barre, sur photo comme sur ivoire : blancs, pleins. */
html.native-app .ov .ihx-btn{ background:var(--r8-carte) !important; color:var(--r8-encre) !important; border:0 !important; box-shadow:var(--r8-ombre) !important }
html.native-app .ov .ihx-btn svg{ stroke:var(--r8-encre) !important }
html.native-app .dd-radial-card .cch-eyebrow{ color:var(--accent-texte, var(--accent)) !important }

/* ── 17. Plus de reflets ni de lueurs ────────────────────────────────────
   Le reflet qui traverse les boutons (extreme.css) revenait sur
   « Composer un voyage ici » par une règle plus précise ; la barre du
   questionnaire avait un dégradé, une lueur et un reflet qui la
   parcourait. B : des aplats. Les squelettes de chargement gardent leur
   balayage — c'est l'état « en cours », pas un ornement. */
html.native-app :is(.btn, .dd-cta, .btn-ghost)::after{ display:none !important }
html.native-app .deck-bar i{ background:var(--r8-encre) !important; box-shadow:none !important }
html.native-app .deck-bar i::after{ display:none !important }

/* ── 18. Tendances : les tuiles prennent l'étiquette blanche d'« Envie » ──
   Plus bas dans Tendances, les tuiles gardaient la légende du bandeau de
   nuit (iphone.css : boîte sombre, police étroite en capitales). Les
   mêmes tuiles, ouvertes depuis une envie, portent déjà l'étiquette
   blanche (wow.css) : une seule façon de dire un lieu sur une photo. */
html.native-app .tabview[data-tab="trending"] .ref-tuile .ref-tuile-m:not(#_){
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; border-radius:var(--r-md) !important; text-shadow:none !important }
html.native-app .tabview[data-tab="trending"] .ref-tuile .ref-n:not(#_){
  color:var(--r8-encre) !important; font-family:var(--sans) !important; text-transform:none !important;
  font-size:var(--t-section) !important; font-weight:700 !important; letter-spacing:-.02em !important; text-shadow:none !important }
html.native-app .tabview[data-tab="trending"] .ref-tuile :is(.ref-p, .ref-src):not(#_){ color:var(--sub) !important; text-shadow:none !important }
/* Le voile sombre sous la légende n'a plus d'objet : l'étiquette blanche
   porte son propre contraste. (:not(#_) : les règles d'iphone.css visent
   ces tuiles avec cinq sélecteurs.) */
html.native-app .ref-tuile.monde.a-photo::before{ display:none !important }

/* ── 19. Les dernières bannières de nuit deviennent des cartes ────────────
   « Invitez un proche » (Amis) et l'en-tête d'un profil public étaient des
   cartes noires dégradées. En B : blanches, encre, bouton plein. Le profil
   AVEC photo de couverture garde son voile sombre : c'est une photo. */
html.native-app .amis-hero, html.native-app .pp-hero:not(.avec-photo){
  background:var(--r8-carte) !important; border:0 !important; box-shadow:var(--r8-ombre) !important;
  border-radius:var(--r8-rayon) !important; color:var(--r8-encre) !important }
html.native-app .amis-hero :is(.amis-t){ color:var(--r8-encre) !important }
html.native-app .amis-hero :is(.amis-s){ color:var(--sub) !important }
html.native-app .amis-hero .amis-cta{ background:var(--r8-encre) !important; color:var(--r8-carte) !important }
html.native-app .pp-hero:not(.avec-photo) :is(.pp-nom, .pp-ch-v){ color:var(--r8-encre) !important }
html.native-app .pp-hero:not(.avec-photo) :is(.pp-ch-l, .pp-bio){ color:var(--sub) !important }
html.native-app .pp-hero:not(.avec-photo) .pp-chiffres{ border-top-color:var(--r8-trait) !important }
html.native-app .pp-hero:not(.avec-photo) .pp-ch + .pp-ch{ border-left-color:var(--r8-trait) !important }
html.native-app .pp-hero:not(.avec-photo) .pp-av{ box-shadow:0 0 0 3px var(--r8-carte), 0 0 0 5px var(--r8-trait) !important }
html.native-app .pp-hero:not(.avec-photo) .pp-b{ background:var(--r8-encre) !important; color:var(--r8-carte) !important }
html.native-app .pp-hero:not(.avec-photo) .pp-b.ghost{ background:var(--r8-creux) !important; color:var(--r8-encre) !important; border:0 !important }

/* ── 20. Toutes les pages pleines sont ivoire ─────────────────────────────
   Une trentaine d'écrans plein écran (activités, réservations, assistant,
   recherche, profils…) restaient sur le blanc d'avant R8 : leurs cartes
   blanches ne s'en détachaient pas. Les feuilles qui montent du bas
   (.modal) gardent leur blanc, comme les feuilles d'iOS ; le livre aussi,
   pour que ses pages ivoire restent lisibles. */
html.native-app .ov:not(.modal):not([data-ov="livre"]){ background:var(--r8-fond) !important }

/* ── 21. Ce que le verre cachait (9 novembre, après le tour complet) ──────
   Le flou d'arrière-plan retiré au §15, certaines surfaces gardaient leur
   fond translucide — fait pour être flouté. Relevé règle par règle (les 55
   qui associaient flou et transparence) : une seule surface flotte sur du
   TEXTE qui défile, la barre de l'itinéraire repliée (« Portugal » et ses
   ronds) — à 72 %, on lisait « Voir la journée » au travers. Les autres
   flottent sur des photos : elles prennent l'étiquette blanche pleine,
   comme partout en B. Le voile du menu contextuel (.ctx-back) reste
   translucide : il est fait pour assombrir. */
html.native-app .itn-topbar.on{ background:var(--r8-fond) !important; box-shadow:0 1px 0 var(--r8-trait) !important }
html.native-app :is(.ref-verre, .stat-chip, .pf-rangee.trip .rg-m, .pf-rangee.trip .rg-e,
  .atlas-presence-chip, .ov.fil-plein-ov .tr-etapes .tr-et, .itn-groupe){
  background:var(--r8-carte) !important; color:var(--r8-encre) !important; border-color:transparent !important; text-shadow:none !important }
html.native-app :is(.ref-verre, .stat-chip, .pf-rangee.trip .rg-m, .pf-rangee.trip .rg-e,
  .atlas-presence-chip, .ov.fil-plein-ov .tr-etapes .tr-et, .itn-groupe) :is(*:not(.ens-av):not(svg):not(svg *)){ color:inherit }