/* ── 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:var(--blanc) !important }
html.native-app .ref-nappe{ background:var(--blanc) !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:var(--teinte-0c0a08) !important; color:var(--site-nuit-texte) !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:var(--blanc); border-radius:28px 28px 0 0; margin-top:-28px; position:relative; z-index:2; padding-top:20px }
html.native-app .tabview[data-tab="trending"] .ref-cherche.posee{ background:var(--nuit-encre) !important; border:0 !important; margin:0 22px !important; padding-left:16px !important; width:auto !important }
html.native-app .tabview[data-tab="trending"] .ref-cherche input{ color:var(--site-nuit-texte) !important }
html.native-app :is(.tabview[data-tab="trending"], .tabview[data-tab="moi"]) :is(.ref-h1, .ref-sur){ color:var(--site-nuit-texte) !important }
html.native-app .tabview[data-tab="trending"] .ref-pilule{ background:var(--nuit-encre) !important; color:var(--site-nuit-texte) !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:var(--t-titre) !important; font-weight:700 !important }
html.native-app .ref-tuile .ref-tuile-m{ background:var(--blanc) !important }
html.native-app .ref-tuile .ref-n{ font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase; font-size:var(--t-section) !important; font-weight:700 !important }
html.native-app .envie{ background:var(--blanc) !important }
html.native-app .sel-grande .sel-m{ background:var(--teinte-0c0a08) !important }
html.native-app .sel-grande .sel-n{ color:var(--site-nuit-texte) !important; font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase; font-size:var(--t-titre) !important }
html.native-app .sel-grande .sel-s{ color:var(--teinte-a79e92) !important }
html.native-app .sel-grande .sel-m::after{ background-color:var(--accent) !important }
html.native-app .voile-encoche{ background:var(--blanc) !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:var(--t-micro) !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--saison-texte, 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:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--saison-texte, var(--accent-texte)); font-weight:600; margin:12px 0 12px }
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:var(--t-titre) !important; color:var(--teinte-221d16) !important }
/* R6 : le filet sous un titre de section est un repère, pas un signe de
   marque — la couleur du jour est réservée à l'action, à la sélection et
   à la progression. */
html.native-app .ref-entete::after, html.native-app .pf-entete::after{ background:var(--line2) !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:var(--t-micro) !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:56px !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:var(--t-section) !important; color:var(--teinte-221d16) !important }
html.native-app .ref-tuile .ref-p{ color:var(--teinte-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:var(--r-lg) !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,var(--teinte-0c0a08-a0),var(--teinte-0c0a08-a88)) !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:var(--teinte-0c0a08) !important }
html.native-app .tabview[data-tab="profile"] .ref-volet{ background:var(--blanc) !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:12px !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:var(--teinte-0c0a08) !important }
html.native-app .tabview[data-tab="profile"] .ref-ecran{ background:var(--teinte-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:var(--t-ecran) !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:16px 12px; overflow:visible !important; padding:4px 22px 12px !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:var(--teinte-0c0a08-a72) !important; color:var(--site-nuit-texte) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-radius:var(--r-sm) !important }
html.native-app .tabview[data-tab="trending"] .ref-tuile.monde.a-photo .ref-n{ color:var(--site-nuit-texte) !important; font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase; font-size:var(--t-section) !important; font-weight:700 !important }
html.native-app .tabview[data-tab="trending"] .ref-tuile.monde.a-photo :is(.ref-p,.ref-src){ color:var(--teinte-f3eee6-a80) !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:var(--r-lg) !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:12px 12px !important; background:var(--teinte-0c0a08-a72) !important; border-radius:var(--r-sm) !important }
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes .ref-tuile:not(.monde) .ref-n{ color:var(--site-nuit-texte) !important }
html.native-app .tabview[data-tab="trending"] .ref-rail.hautes .ref-tuile:not(.monde) .ref-p{ color:var(--teinte-f3eee6-a80) !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-entete .meta, .ref-lien){ color:var(--accent-texte) !important }
/* La saison, là où elle raconte le moment (décision du 1er novembre). */
html.native-app :is(.ref-volet .ref-sur, .sel-signe){ color:var(--saison-texte, 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(var(--teinte-0c0a08), var(--teinte-0c0a08)) top / 100% 260px no-repeat !important;
  box-shadow:0 -120px 0 0 var(--teinte-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:var(--teinte-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:12px 22px 28px !important;
  justify-content:flex-start !important; gap:16px; flex-wrap:wrap; background:var(--teinte-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:16px;
  font-family:'Big Shoulders Display',Impact,sans-serif !important; text-transform:uppercase;
  font-size:40px !important; font-weight:700 !important; letter-spacing:.005em !important; line-height:.95 !important;
  color:var(--site-nuit-texte) !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:var(--nuit-encre) !important; border-color:transparent !important; color:var(--site-nuit-texte) !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:var(--site-nuit-texte) !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:var(--blanc) !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:var(--t-titre) !important; font-weight:700 !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:var(--teinte-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:var(--teinte-16130f) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid var(--blanc-a8) !important;
  box-shadow:0 8px 24px -12px var(--noir-a45) !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 }

/* ── CHANGER D'ONGLET : UN FONDU NET, RIEN D'AUTRE ─────────────────────
   Charlotte, 1er novembre : « il y a encore beaucoup de bugs de transition
   d'ouverture de page ». Filmé image par image, chaque changement
   d'onglet empilait trois mouvements : l'onglet quitté s'effaçait vers le
   blanc en 0,18 s, le nouveau montait de 14 px en 0,6 s, puis ses
   éléments arrivaient un à un jusqu'à 0,7 s (refMonte, titre-masque).
   Entre les deux, de 0,3 à 0,5 s : un écran blanc presque vide. Sur
   iPhone, une barre d'onglets ne joue pas de chorégraphie : l'écran
   d'arrivée est là.

   L'onglet quitté reste donc entier dessous pendant 0,2 s, le nouveau se
   pose par-dessus en 0,15 s, déjà complet. Jamais de blanc, jamais deux
   écrans lus l'un à travers l'autre. Les fiches et feuilles (.ov) gardent
   leurs propres mouvements. */
html.native-app .tabview:not(.active){ transition:opacity 0s linear .2s, visibility 0s linear .2s !important }
html.native-app .tabview.active{ z-index:1; animation:none !important; transition:opacity var(--mv-rapide) var(--mv-sortie), visibility 0s !important }
html.native-app .tabview.active :is(.ref-heros-h, .ref-tete-h, .ref-salut-photo, .ref-salut, .ref-h1, .ref-sous, .ref-cherche,
  .ref-pilules, .ref-vedette, .ref-seg, .pf-carte, .ref-nappe, .ref-entete, .ref-heros-lieu, .ref-tuile),
html.native-app .tabview.active > :is(.deck-head, .pf){ animation:none !important }

/* ── LES ÉCRANS PLEIN CADRE APPARAISSENT ET PARTENT EN FONDU ───────────
   Premier lancement, invitation, parrainage, l'année : ils couvrent tout.
   Ils glissaient du bas comme une feuille, pendant que l'écran dessous
   reculait en carte : à la sortie (« Regarder d'abord »), la photo
   descendait pendant qu'Explorer grandissait, et l'on voyait deux images
   découpées l'une dans l'autre. Rien ne recule plus dessous (_hsSyncPile,
   « pile-plein ») ; la barre d'onglets s'efface simplement. */
.ov.modal.ov-plein, .ov.modal.ov-plein.in, .ov.modal.ov-plein.closing{ transform:none }
.ov.modal.ov-plein{ opacity:0; transition:opacity var(--mv-normal) var(--mv-sortie) !important }
.ov.modal.ov-plein.in{ opacity:1 }
.ov.modal.ov-plein.closing{ opacity:0 }
html.pile-plein .tabbar{ opacity:0; pointer-events:none; transition:opacity var(--mv-normal) var(--mv-sortie) }