/* ── HUKAIA · l'app iPhone, « bandeau de nuit » ────────────────────────
   Charlotte, le 12 octobre. Après trois directions (crème & terre cuite,
   magazine, bandeau de nuit — maquettes/app-iphone-trois-directions.png),
   elle choisit le BANDEAU DE NUIT, puis demande « quelques changements
   d'amélioration visuelle », visibles, sans refonte complète
   (maquettes/app-iphone-ameliorations-visuelles.png).

   Ce qui change, écran par écran :
     · partout : le haut des écrans (titre, recherche, filtres) dans la
       nuit du site, le contenu sur une feuille crème qui remonte ; les
       surtitres en petites capitales terre cuite ; les titres de section
       en capitales étroites ;
     · Explorer : la photo d'accueil aux deux tiers de l'écran, le lieu en
       très grand ; des cartes de destination une fois et demie plus
       grandes, légendées dessous ;
     · Tendances : « Aussi en pleine saison » en mosaïque (une grande, deux
       petites) ; la sélection du mois en pleine photo ;
     · Vous : le titre dans la nuit, la fiche du compte reste claire ;
     · le questionnaire garde son allure (Charlotte, le 12 octobre : la
       fiche du compte en noir et les cartes du questionnaire retirées,
       « je préfère la version actuelle ») ;
     · Communauté : le globe tient lieu de bandeau de nuit.
   La barre d'onglets ne bouge pas (verre fumé, choisi le 4 octobre).

   Tout est sous html.native-app : l'app web garde sa nuit (nuit.css).
   Les !important sont voulus : cette feuille reprend des règles posées à
   des forces très diverses par sept couches (da, direction, wow, extreme,
   screens, core, octobre) ; elle les tranche pour l'iPhone seul, au lieu
   de surenchérir sélecteur par sélecteur. Chargée en dernier.
   ─────────────────────────────────────────────────────────────────────── */
/* C — Bandeau de nuit : le haut de chaque écran dans la nuit du site, le contenu en crème */
html.native-app body, html.native-app .screen, html.native-app .tabview, html.native-app .ref-ecran{ background:#FFFFFF !important }
html.native-app .ref-nappe{ background:#FFFFFF !important; border-radius:28px 28px 0 0 !important; margin-top:-24px; position:relative; z-index:2 }
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:#0C0A08 !important; color:#F3EEE6 !important; margin:0 !important; padding-left:22px !important; padding-right:22px !important }
html.native-app .tabview[data-tab="trending"] .ref-pilules{ padding-bottom:44px !important }
html.native-app .tabview[data-tab="moi"] .ref-tete{ padding-bottom:56px !important }
html.native-app .tabview[data-tab="moi"] .ref-volet{ background:#FFFFFF; border-radius:28px 28px 0 0; margin-top:-28px; position:relative; z-index:2; padding-top:18px }
html.native-app .tabview[data-tab="trending"] .ref-cherche.posee{ background:#1C1815 !important; border:0 !important; margin:0 22px !important; padding-left:14px !important; width:auto !important }
html.native-app .tabview[data-tab="trending"] .ref-cherche input{ color:#F3EEE6 !important }
html.native-app :is(.tabview[data-tab="trending"], .tabview[data-tab="moi"]) :is(.ref-h1, .ref-sur){ color:#F3EEE6 !important }
html.native-app .tabview[data-tab="trending"] .ref-pilule{ background:#1C1815 !important; color:#F3EEE6 !important; border:0 !important }
html.native-app .tabview[data-tab="trending"] .ref-pilule.on{ background:var(--accent) !important; color:var(--accent-ink) !important }
html.native-app .ref-entete h2, html.native-app .pf-entete h2{ font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase; font-size:26px !important; font-weight:800 !important }
html.native-app .ref-tuile .ref-tuile-m{ background:#FFFFFF !important }
html.native-app .ref-tuile .ref-n{ font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase; font-size:21px !important; font-weight:800 !important }
html.native-app .envie{ background:#FFFFFF !important }
html.native-app .sel-grande .sel-m{ background:#0C0A08 !important }
html.native-app .sel-grande .sel-n{ color:#F3EEE6 !important; font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase; font-size:30px !important }
html.native-app .sel-grande .sel-s{ color:#A79E92 !important }
html.native-app .sel-grande .sel-m::after{ background-color:var(--accent) !important }
html.native-app .voile-encoche{ background:#FFFFFF !important }
/* ── C2 : la même direction, poussée ─────────────────────────────── */
/* Les surtitres du site : petites capitales à chasse fixe, terre cuite */
html.native-app .ref-sur{ font-family:ui-monospace,'Geist Mono',monospace !important; font-size:11px !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--accent-texte) !important; font-weight:600 !important }
html.native-app .tabview[data-tab="trending"] .ref-tete::before{ content:var(--hs-surtitre-tendances, 'Tendances'); display:block; font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-texte); font-weight:600; margin:10px 0 10px }
html.native-app .tabview[data-tab="trending"] .ref-tete{ padding-top:12px !important }
/* Les titres dans la nuit, plus grands */
html.native-app :is(.tabview[data-tab="trending"], .tabview[data-tab="moi"]) .ref-h1{ font-size:54px !important }
/* La feuille crème : un bord net, une ombre qui la décolle de la nuit */

/* Les sections : titre étroit, compte en chasse fixe, filet terre cuite court */
html.native-app .ref-entete h2, html.native-app .pf-entete h2{ font-size:28px !important; color:#221D16 !important }
html.native-app .ref-entete::after, html.native-app .pf-entete::after{ background:var(--accent) !important; height:2px !important; max-width:28px !important; opacity:1 !important }
html.native-app .ref-lien, html.native-app .ref-entete .meta, html.native-app .sel-signe{ font-family:ui-monospace,monospace !important; font-size:11px !important; letter-spacing:.12em !important; text-transform:uppercase; color:var(--accent-texte) !important }
/* Les photos : la légende dessous, sur le crème — plus de vignette blanche */
html.native-app .ref-tuile:not(.monde){ background-color:transparent !important; box-shadow:none !important; border-radius:18px 18px 0 0 !important; padding-bottom:54px !important; background-clip:content-box !important; background-origin:content-box !important }
html.native-app .ref-tuile:not(.monde) .ref-tuile-m{ background:transparent !important; left:2px !important; bottom:0 !important; height:54px !important }
html.native-app .ref-tuile .ref-n{ font-size:24px !important; color:#221D16 !important }
html.native-app .ref-tuile .ref-p{ color:#756B58 !important }
/* La sélection du mois : la photo entière, le nom en grand sur un dégradé de nuit */
html.native-app .sel-grande{ border-radius:22px !important }
html.native-app .sel-grande .sel-m{ left:0 !important; right:0 !important; bottom:0 !important; border-radius:0 !important; padding:90px 20px 20px !important; background:linear-gradient(180deg,rgba(12,10,8,0),rgba(12,10,8,.88)) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important }
html.native-app .sel-grande .sel-n{ font-size:46px !important; line-height:.9 !important }
html.native-app .sel-grande .sel-m::after{ right:20px !important; bottom:22px !important; top:auto !important; margin-top:0 !important }
/* Communauté : le globe EST le bandeau de nuit ; la feuille crème remonte dessus */
html.native-app .tabview[data-tab="profile"]{ background:#0C0A08 !important }
html.native-app .tabview[data-tab="profile"] .ref-volet{ background:#FFFFFF !important; border-radius:28px 28px 0 0 !important; margin-top:0 !important; position:relative; z-index:3; min-height:60vh }
html.native-app .tabview[data-tab="profile"] .ref-h1{ font-size:48px !important }
html.native-app .ref-rail.hautes{ height:auto !important; padding-bottom:10px !important }
html.native-app .ref-rail.hautes .ref-tuile:not(.monde){ height:300px !important }
html.native-app .tabview[data-tab="trending"] .ref-tete, html.native-app .tabview[data-tab="trending"] .ref-pilules{ background:#0C0A08 !important }
html.native-app .tabview[data-tab="profile"] .ref-ecran{ background:#0C0A08 !important }
/* ── C3 : un changement bien visible par écran ─────────────────────── */
/* Explorer : la photo d'accueil prend les deux tiers de l'écran, le lieu en très grand */
html.native-app .tabview[data-tab="discover"] .ref-heros{ height:560px !important; min-height:560px !important }
html.native-app .tabview[data-tab="discover"] .ref-heros-m{ top:auto !important; bottom:110px !important }
html.native-app .tabview[data-tab="discover"] .ref-heros-m .ref-h1{ font-size:clamp(56px, 17vw, 72px) !important; line-height:.86 !important; text-wrap:balance }
html.native-app .tabview[data-tab="discover"] .ref-cherche{ top:auto !important; bottom:40px !important }
/* Explorer : des cartes de destination plus grandes, une et demie à l'écran */
html.native-app .tabview[data-tab="discover"] .ref-rail.hautes .ref-tuile:not(.monde){ flex:0 0 74vw !important; width:74vw !important; height:380px !important; border-radius:22px 22px 0 0 !important }
html.native-app .tabview[data-tab="discover"] .ref-tuile .ref-n{ font-size:32px !important }
/* Tendances : « Aussi en pleine saison » en mosaïque — une grande, deux petites */
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes{ display:grid !important; grid-template-columns:1fr 1fr; gap:14px 12px; overflow:visible !important; padding:4px 22px 10px !important }
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes .ref-tuile{ width:auto !important; flex:none !important; height:230px !important }
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes .ref-tuile:nth-child(3n+1){ grid-column:1 / -1; height:300px !important }
html.native-app .tabview[data-tab="trending"] .ref-tuile.monde.a-photo .ref-tuile-m{ background:rgba(12,10,8,.72) !important; color:#F3EEE6 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-radius:12px !important }
html.native-app .tabview[data-tab="trending"] .ref-tuile.monde.a-photo .ref-n{ color:#F3EEE6 !important; font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase; font-size:24px !important; font-weight:800 !important }
html.native-app .tabview[data-tab="trending"] .ref-tuile.monde.a-photo :is(.ref-p,.ref-src){ color:rgba(243,238,230,.8) !important }
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes .ref-tuile:not(.monde){ padding-bottom:0 !important; background-clip:border-box !important; background-origin:border-box !important; border-radius:22px !important }
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes .ref-tuile:not(.monde) .ref-tuile-m{ left:10px !important; right:10px !important; bottom:10px !important; height:auto !important; padding:10px 12px !important; background:rgba(12,10,8,.72) !important; border-radius:12px !important }
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes .ref-tuile:not(.monde) .ref-n{ color:#F3EEE6 !important }
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes .ref-tuile:not(.monde) .ref-p{ color:rgba(243,238,230,.8) !important }

/* Lisibilité (banc-contraste) : en 11 px sur la feuille crème, ces petits
   textes prennent --accent-texte, la couleur de la saison assombrie par
   da-accent.js jusqu'à 4,5:1 au moins. Ils suivaient une terre cuite
   fixe (#A8401E) : un deuxième orange à côté de la saison (Charlotte,
   23 octobre, « la saison partout »). */
html.native-app :is(.ref-volet .ref-sur, .sel-signe, .ref-entete .meta, .ref-lien){ color:var(--accent-texte) !important }

/* La réserve de l'encoche au-dessus du bandeau : sans elle, une bande
   blanche sous l'heure. Première écriture : un fond « local » sur
   l'onglet, qui défilait avec lui — mais WebKit repeint un fond local à
   chaque image de défilement. La nuit est donc portée par l'écran
   lui-même (il défile déjà) et par une ombre nette vers le haut, qui
   remplit la réserve sans flou ni repeinte. */
html.native-app :is(.tabview[data-tab="trending"], .tabview[data-tab="moi"]) > .ref-ecran{
  background:linear-gradient(#0C0A08, #0C0A08) top / 100% 260px no-repeat !important;
  box-shadow:0 -120px 0 0 #0C0A08 !important;
}

/* ── Les écrans ouverts (13 octobre, « fais tout ça dans l'ordre ») ─────
   Réglages et ses voisins prennent le bandeau de nuit de « Vous » : la
   barre du haut dans la nuit, le titre en capitales étroites aligné à
   gauche, la feuille blanche dessous. La barre ne défile pas (c'est
   .ov-scroll qui défile) : le haut reste sombre, et barre-statut.js le
   sait par la même liste. */
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"]){
  background:#0C0A08 !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{
  height:auto !important; min-height:52px; padding:10px 22px 26px !important;
  justify-content:flex-start !important; gap:14px; flex-wrap:wrap; background:#0C0A08 !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{
  position:static !important; transform:none !important; order:2; flex-basis:100%; margin-top:14px;
  font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase;
  font-size:40px !important; font-weight:800 !important; letter-spacing:.005em !important; line-height:.95 !important;
  color:#F3EEE6 !important; white-space:normal !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:#1C1815 !important; border-color:transparent !important; color:#F3EEE6 !important; box-shadow:none !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:#F3EEE6 !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{
  background:#FFFFFF !important; border-radius:28px 28px 0 0; padding-top:22px !important;
}

/* L'itinéraire et un jour : les titres de section en capitales étroites,
   comme les sections des onglets. */
html.native-app .ov:is([data-ov="itinerary"],[data-ov="day"]) :is(.itn-jours-h, .section-h h2, h2){
  font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase;
  font-size:26px !important; font-weight:800 !important; letter-spacing:.01em !important; line-height:1 !important;
}

/* Le voile de nuit (barre-statut.js) : quand le titre d'un bandeau de nuit
   passe sous l'heure, l'encoche se couvre de la même nuit, sans fondu. */
html.native-app.voile-nuit .voile-encoche{ background:#0C0A08 !important; opacity:1 !important; transition:none !important }

/* La barre d'onglets, mate (Charlotte, 16 octobre : « les onglets
   brillants », un « effet Claude » à éviter). Elle reste sombre (4
   octobre), mais sans verre flouté ni arête de lumière : un fond plein,
   un filet discret, une ombre simple. */
html.native-app .tabbar-pill{
  background:#16130F !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.45) !important;
}
html.native-app .tab-curseur{ box-shadow:none !important }
html.native-app .tab-it[data-tabbtn="create"]:not(.on) .tab-ico{ box-shadow:none !important }