/* ── HUKAIA · l'app web dans la nuit du site ─────────────────────────────
   Charlotte, le 11 octobre : l'app web (app.hukaia.com, dans un
   navigateur) prend la charte de hukaia.com — la nuit, les titres étroits
   en capitales, la terre cuite — « écran par écran ». L'app iPhone
   (html.native-app, posée par la coquille Capacitor) reste claire : tout
   ici est sous html:not(.native-app).

   La méthode : retourner l'échelle des neutres (da.css, --n-0 à --n-4) et
   l'encre ; tout ce qui est bâti sur ces jetons suit d'un coup. Ce qui
   porte une couleur claire écrite en dur est repris ensuite, écran par
   écran, à partir du relevé de tools/releve-nuit.js (fonds clairs et
   textes illisibles de l'écran affiché).

   Écrans repris : Explorer, Tendances, le questionnaire. Les autres sont
   à venir — tant qu'ils ne sont pas repris, ils peuvent montrer des
   surfaces claires. Chargée en dernier (index.html).
   ─────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Big Shoulders Display';src:url('fonts/big-shoulders-display.woff2') format('woff2');font-weight:100 900;font-display:swap}

html:not(.native-app){
  color-scheme:dark;
  --n-0:#1C1815;   /* la surface posée : carte, feuille, champ (le verre du site) */
  --n-1:#0C0A08;   /* le fond : la nuit du site                                   */
  --n-2:#171411;   /* le creux léger                                              */
  --n-3:#262019;   /* le creux marqué, le filet                                   */
  --n-4:#332B23;   /* le trait appuyé                                             */
  --bg:var(--n-1); --surface:var(--n-0); --surface2:var(--n-2); --surface-raised:var(--n-0);
  --ink:#F3EEE6; --ink-soft:#A79E92; --sub:#A79E92; --ink-faint:#8E8578;
  --line:var(--n-3); --line2:var(--n-4);
  --titre-site:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  /* Les creux de direction.css (champ, pilule, carte pleine) étaient du
     sable clair écrit en dur : sur la nuit, ce sont les surfaces posées. */
  --d-creux:var(--n-0); --d-creux-2:var(--n-3);
}
html:not(.native-app), html:not(.native-app) body{ background:var(--n-1) }
html:not(.native-app) .ref-h1, html:not(.native-app) .dcard .d-q{
  font-family:var(--titre-site); text-transform:uppercase; letter-spacing:.005em; line-height:.95; font-weight:800;
}

/* ── Explorer, Tendances : ce qui portait du clair en dur ─────────────
   Relevé du 11 octobre (tools/releve-nuit.js discover / trending). */
/* .ref-rond et .ref-heros-porte restent clairs : ils sont posés sur la
   photo du héros, comme les boutons de verre du site. */
html:not(.native-app) :is(.ref-cherche, .ref-pilule, .ref-badge.fort, .sel-m, .ref-tuile-m){
  background-color:var(--n-0); color:var(--ink); border-color:var(--n-3);
}
html:not(.native-app) .ref-cherche.posee{ background-color:var(--n-2) }
html:not(.native-app) .ref-pilule.on, html:not(.native-app) .ref-pilule[aria-pressed="true"]{ background-color:var(--ink); color:var(--n-1) }
html:not(.native-app) :is(.ref-n, .ref-tete h2, .tabview h2, .ref-h1){ color:var(--ink) }
html:not(.native-app) :is(.ref-p, .sel-signe, .sel-note){ color:var(--sub) }

/* ── Le questionnaire ─────────────────────────────────────────────────
   Relevé : create, q2, q3, q9. Les cartes deviennent des verres posés sur
   la nuit, comme les cartes du site ; les choix, des creux plus sombres. */
/* Deux règles et non un :is() : #deck donnerait sa force d'identifiant
   à .deck-prog, et rien ne pourrait plus la reprendre. */
html:not(.native-app) #deck .dcard, html:not(.native-app) .deck-prog{ background-color:var(--n-0); border-color:var(--n-3) }
html:not(.native-app) :is(.deck-back, .radio-it, .pick-it, .occ, .mode-btn, .m-i, .btn-ghost.inc-plus){
  background-color:var(--n-2); color:var(--ink); border-color:var(--n-3);
}
html:not(.native-app) :is(.dq-mot, .ra-t, .pk-t, .o-t, .m-t, .hscal-n, .hscal-t, .st-n, .inc-plus){ color:var(--ink) }
html:not(.native-app) :is(.ra-d, .o-d, .m-d, .d-s, .deck-count, .hscal-suite, .st-l, .inc-vide, .bud-unite){ color:var(--sub) }

/* Les choix sont colorés sous #deck (wow.css) : il faut la même portée. */
html:not(.native-app) #deck :is(.radio-it, .occ, .pick-it, .mode-btn){ background:var(--n-2); color:var(--ink); border-color:var(--n-3) }
html:not(.native-app) #deck :is(.radio-it, .occ, .pick-it, .mode-btn).on{
  background:color-mix(in srgb, var(--accent) 22%, var(--n-0)); border-color:color-mix(in srgb, var(--accent) 60%, var(--n-0));
}
html:not(.native-app) #deck label, html:not(.native-app) #deck .d-num{ color:var(--sub) }
/* Les écrans eux-mêmes : certains posent leur blanc sur la vue entière. */
html:not(.native-app) .tabview{ background-color:var(--n-1) }
html:not(.native-app) .sel-grande .sel-n{ color:var(--ink) }
html:not(.native-app) .sel-grande .sel-s{ color:var(--sub) }
html:not(.native-app) #deck .mode-btn .m-i{ background:var(--n-3); color:var(--accent-texte, var(--accent)) }
/* Le cadre de l'app (.screen) gardait son blanc : il apparaissait en
   bande au-dessus du questionnaire, là où l'en-tête se retire. */
html:not(.native-app) .screen{ background-color:var(--n-1) }

/* ── La fiche destination, sur la nuit aussi ──────────────────────────
   direction.css la ramenait au blanc en remettant ses jetons à ceux de
   l'app (inherit) : sur le web, ces jetons sont ceux de la nuit, mais le
   blanc écrit en dur restait — un texte clair sur une feuille blanche. */
html:not(.native-app) .ov[data-ov="destination"],
html:not(.native-app) .ov[data-ov="destination"] .dd-volet{ background:var(--n-1) }
html:not(.native-app) .ov[data-ov="destination"] .cc-card{ background:var(--n-0); border:1px solid var(--n-3) }
html:not(.native-app) .ov[data-ov="destination"] .carte-handle{ background:var(--n-4) }
/* « Europe du Sud » : une ligne posée sur la photo, pas une pastille. */
html:not(.native-app) .ov[data-ov="destination"] .itn-m1 > span{
  background:transparent; border:0; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none;
  color:#F3EEE6; font-family:var(--mono, ui-monospace, monospace); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
html:not(.native-app) .ov[data-ov="destination"] .itn-m1 svg{ stroke:#F3EEE6 }
html:not(.native-app) .phone{ background:var(--n-1) }

/* ── Ce qui se pose sur les photos : du verre sombre ─────────────────
   Relevé à 1 440 px (tools/releve-nuit.js, LARGEUR=1440 TOUT=1) :
   étiquettes « en saison », pastille « à venir » du fil, boutons ronds
   des écrans ouverts. Tous blancs, et leur encre devenue claire. */
html:not(.native-app) :is(.ref-badge, .ref-badge.doux, .ref-badge.tiede){ background:rgba(12,10,8,.74); color:#F3EEE6 }
html:not(.native-app) .tr-futur{ background:rgba(12,10,8,.74); color:#F3EEE6; box-shadow:none }
html:not(.native-app) .ref-tuile.monde.a-photo .ref-tuile-m{ background:rgba(12,10,8,.74); -webkit-backdrop-filter:none; backdrop-filter:none }
html:not(.native-app) .ref-tuile.monde.a-photo .ref-n{ color:#F3EEE6 }
html:not(.native-app) .ref-tuile.monde.a-photo :is(.ref-p, .ref-src){ color:rgba(243,238,230,.78) }
html:not(.native-app) .ihx-btn{ background:var(--n-0); border-color:var(--n-3); color:var(--ink); box-shadow:none }
html:not(.native-app) .ov label{ color:var(--sub) }
html:not(.native-app) .fil-rejoindre .btn-ghost{ background:var(--chrome); color:var(--chrome-encre); border:0 }
/* Vous : la fiche du compte, à toutes les largeurs. */
html:not(.native-app) .pf-carte{ background:var(--n-0); border:1px solid var(--n-3); box-shadow:none; border-radius:18px }
html:not(.native-app) .pf-carte :is(.pf-chiffres, .pf-carte-porte){ border-top-color:var(--n-3) }
html:not(.native-app) .pf-login-b{ background:var(--chrome); color:var(--chrome-encre); border:0 }
/* Le pied d'une fiche (« Composer un voyage ici ») : du verre sombre. */
html:not(.native-app) :is(.ov-foot, .ov[data-ov="destination"] .ov-foot){ background:rgba(12,10,8,.88); border-top:1px solid var(--n-3); box-shadow:none }
/* L'itinéraire (relevé avec le voyage de la vitrine) : le bandeau des
   jours, les hôtels et les en-têtes de moments étaient blancs en dur
   (direction.css, §7). */
html:not(.native-app) .itn-sauts{ background:var(--n-1) }
html:not(.native-app) .itn-saut{ background:var(--n-0); border:1px solid var(--n-3); color:var(--ink) }
html:not(.native-app) .itn-saut.on{ background:var(--chrome); border-color:transparent; color:var(--chrome-encre) }
html:not(.native-app) .itn-stay{ background:var(--n-0); border:1px solid var(--n-3); box-shadow:none }
html:not(.native-app) :is(.itn-stay-n, .itn-stay-q, .itn-stay-p){ color:var(--ink) }
html:not(.native-app) .itn-stay-s{ color:var(--sub) }
html:not(.native-app) .itn-dmo-h{ background:var(--n-0); color:var(--ink) }
html:not(.native-app) .itn-day-chev .ico{ background:var(--n-3); color:var(--ink) }
html:not(.native-app) :is(.itn-dmini, .itn-day-chev){ border-color:var(--n-3) }
/* Un jour : « Suggérer une balade » et ses pareils, en creux de nuit. */
html:not(.native-app) .ov[data-ov="day"] .ov-scroll .btn-ghost.sm{ background:var(--n-0); border:1px solid var(--n-3); color:var(--ink); box-shadow:none }
/* Le héros d'Explorer peint le haut de l'écran d'une ombre de 600 px
   couleur d'encre (da-reference.css) : sur la nuit, l'encre est claire,
   et à 1 920 px deux bandes beiges encadraient la photo. */
html:not(.native-app) .ref-heros{ box-shadow:0 -600px 0 600px var(--n-1) }
/* « Aller au contenu » (app.js, _enTeteDAbord) : hors de l'écran tant
   que le clavier n'y est pas. */
html:not(.native-app) .hs-evitement{
  position:fixed; z-index:400; top:10px; left:10px; padding:10px 16px; border-radius:10px;
  background:var(--chrome); color:var(--chrome-encre); font-weight:600; text-decoration:none;
  transform:translateY(-200%);
}
html:not(.native-app) .hs-evitement:focus{ transform:none }
/* Le questionnaire « sans distraction » (octobre.css) retire la barre
   d'onglets de l'iPhone. Sur le web, cette barre est l'en-tête du site :
   un site ne perd pas son menu au milieu d'un formulaire. */
html.deck-concentre:not(.native-app) .tabbar{ opacity:1; transform:none; pointer-events:auto }
html.deck-concentre:not(.native-app) .tabbar::before{ opacity:1 }
/* Le titre d'une fiche : les capitales étroites du site. */
html:not(.native-app) .ov .itn-title{ font-family:var(--titre-site); text-transform:uppercase; font-weight:800; letter-spacing:.005em; line-height:.92 }

/* ═══════════════════════════════════════════════════════════════════════
   SUR ORDINATEUR : UN SITE, PAS UN TÉLÉPHONE
   ─────────────────────────────────────────────────────────────────────
   Charlotte, le 11 octobre : « il faut vraiment qu'elle soit website
   friendly, là j'ai l'impression qu'elle est encore trop iOS friendly ».
   La grammaire de bureau (core.css, 19 septembre) avait réglé la mesure
   et les grilles. Ce qui restait du téléphone, relevé à 1 440 px :
     · le questionnaire, une pile de cartes de 760 px au milieu du vide,
       avec deux cartes fantômes dessous — un geste de pouce ;
     · les boutons ronds flottants sur la photo (recherche, cloche,
       réglages) : sur un site, ces portes sont dans l'en-tête ou nulle
       part ;
     · les légendes en verre et les badges en pilule sur les photos ;
     · les filtres en pilules, les onglets en segment ;
     · la fiche du compte et la porte du globe, restées claires.
   Tout est sous html:not(.native-app) et au-delà de 900 px : la fenêtre
   étroite d'un navigateur garde la forme du téléphone, qui y est juste.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  /* ── Le questionnaire, une page de formulaire ─────────────────────
     La question à gauche, en grand ; les réponses à droite ; le bouton
     sous les réponses. Plus de carte, plus de pile : la carte suivante
     n'existe pas tant qu'on n'y est pas. */
  html:not(.native-app) .tabview[data-tab="create"]{ padding-inline:max(32px, calc((100% - 1160px) / 2)) }
  html:not(.native-app) .tabview[data-tab="create"] .ref-cadre{ padding-inline:0; margin-inline:0; max-width:none }
  html:not(.native-app) .tabview[data-tab="create"] .deck-prog{ background:none; padding:0; border-radius:0 }
  html:not(.native-app) .tabview[data-tab="create"] .deck-back{ background:none; border:1px solid var(--n-3) }
  html:not(.native-app) #deck{ padding:0; margin-top:28px; height:calc(var(--app-vh, 1vh) * 100 - 190px); max-height:620px }
  html:not(.native-app) #deck .dcard:not(.actif){ visibility:hidden }
  /* La carte active est dans le flux : le questionnaire a la hauteur de
     sa question, comme un formulaire, et la page continue dessous (le
     pied du site) au lieu d'un cadre de 620 px à moitié vide. Les autres
     cartes restent posées dessus, invisibles, pour leurs trajets. */
  html:not(.native-app) #deck{ height:auto; min-height:0; max-height:none; padding-bottom:56px }
  html:not(.native-app) #deck .dcard.actif{ position:relative; inset:auto }
  html:not(.native-app) #deck .dcard.actif .d-body{ max-height:none; overflow:visible }
  html:not(.native-app) #deck .dcard{
    background:transparent; box-shadow:none; border:0; border-radius:0; padding:28px 0 0;
    display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); column-gap:72px;
    grid-template-rows:auto auto auto minmax(0,1fr) auto; align-content:start;
  }
  html:not(.native-app) #deck .dcard > :is(.d-num, .d-q, .d-s){ grid-column:1 }
  html:not(.native-app) #deck .dcard .d-body{ grid-column:2; grid-row:1 / 5; min-height:0; max-height:100%; align-self:start; padding-top:4px }
  html:not(.native-app) #deck .dcard .d-foot{ grid-column:2; grid-row:5; justify-content:flex-start; padding-top:8px }
  /* balance : sans lui, le « ? » restait seul sur sa ligne. */
  html:not(.native-app) #deck .dcard .d-q{ font-size:clamp(46px, 4.4vw, 64px); line-height:.92; margin-top:10px; text-wrap:balance }
  html:not(.native-app) #deck .dcard .d-s{ font-size:17px; line-height:1.5; margin-top:14px; max-width:28em }
  html:not(.native-app) #deck .dcard .d-num{ font-size:11px }
  html:not(.native-app) #deck .dcard .d-foot .btn{ width:auto; min-width:220px; padding-inline:34px }
  /* Un choix réagit au survol, comme un lien : on n'a plus de pouce. */
  html:not(.native-app) #deck :is(.radio-it, .occ, .pick-it, .mode-btn){ cursor:pointer; transition:border-color .2s ease, background-color .2s ease }
  html:not(.native-app) #deck :is(.radio-it, .occ, .pick-it, .mode-btn):hover{ border-color:color-mix(in srgb, var(--chrome) 70%, var(--n-0)) }

  /* ── Les boutons ronds flottants s'en vont ────────────────────────
     La recherche a son champ sous le titre, les notifications et les
     réglages ont leur place dans Vous. Ils restent dans l'app iPhone. */
  html:not(.native-app) .ref-heros-h .ref-rond{ display:none }
  html:not(.native-app) :is(.tabview[data-tab="profile"], .tabview[data-tab="moi"]) :is(.ref-rond, .bell-btn){
    background:transparent; border:1px solid var(--n-3); border-radius:10px; color:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
  }
  html:not(.native-app) :is(.tabview[data-tab="profile"], .tabview[data-tab="moi"]) :is(.ref-rond, .bell-btn) svg{ stroke:var(--ink) }

  /* ── Les photos : la légende dessous, pas de verre ────────────────
     Une carte de site : l'image, puis le nom et la ligne, sur la nuit.
     Le badge devient une étiquette en capitales, sans pilule. */
  html:not(.native-app) .ref-tuile:not(.monde){
    --tuile-legende:58px; padding-bottom:var(--tuile-legende); background-clip:content-box; background-origin:content-box;
    background-color:transparent; box-shadow:none; border-radius:14px 14px 0 0; cursor:pointer;
  }
  html:not(.native-app) .ref-tuile:not(.monde)::after{ display:none }
  html:not(.native-app) .ref-tuile:not(.monde) .ref-tuile-m{ background:transparent; border:0; left:2px; right:2px; -webkit-backdrop-filter:none; backdrop-filter:none }
  html:not(.native-app) .ref-tuile:not(.monde) .ref-n{ font-size:17px }
  html:not(.native-app) .ref-tuile:not(.monde) .ref-p{ font-size:13px }
  html:not(.native-app) .ref-tuile{ transition:opacity .2s ease, transform .35s cubic-bezier(.2,.8,.2,1) }
  html:not(.native-app) .ref-tuile:hover{ transform:translateY(-3px) }
  html:not(.native-app) .ref-tuile:not(.monde):hover .ref-n{ color:var(--chrome-clair) }
  html:not(.native-app) .ref-badge{
    border-radius:4px; padding:4px 7px; font-family:var(--mono, ui-monospace, monospace); font-size:10px;
    letter-spacing:.08em; text-transform:uppercase; background:rgba(12,10,8,.78);
  }

  /* ── Les filtres : des onglets soulignés, comme l'en-tête ───────────
     .ref-pilules devant : la règle du haut passe par un :is() qui porte
     la force de .ref-badge.fort, il faut la dépasser. */
  html:not(.native-app) .ref-pilules{ gap:26px; width:auto; max-width:none; margin-inline:var(--gout); padding-inline:0; border-bottom:1px solid var(--n-3); padding-bottom:0 }
  html:not(.native-app) .ref-pilules .ref-pilule{
    background:transparent; border:0; border-radius:0; padding:0 0 12px; height:auto;
    color:var(--sub); box-shadow:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;
  }
  html:not(.native-app) .ref-pilules .ref-pilule:hover{ color:var(--ink) }
  html:not(.native-app) .ref-pilules :is(.ref-pilule.on, .ref-pilule[aria-pressed="true"]){ background:transparent; color:var(--ink); border-bottom-color:var(--chrome) }

  /* ── Le choix du mois : le texte sur la photo, pas dans une bulle ── */
  html:not(.native-app) .sel-grande .sel-m{
    left:0; right:0; bottom:0; border-radius:0; border:0; padding:90px 32px 26px;
    background:linear-gradient(180deg, rgba(12,10,8,0) 0%, rgba(12,10,8,.82) 100%);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  html:not(.native-app) .sel-grande .sel-n{ color:#F3EEE6; font-family:var(--titre-site); text-transform:uppercase; font-size:44px; line-height:.95; letter-spacing:0 }
  html:not(.native-app) .sel-grande .sel-s{ color:rgba(243,238,230,.8) }
  html:not(.native-app) .sel-grande .sel-m::after{ display:none }
  html:not(.native-app) .sel-grande, html:not(.native-app) .sel-petite{ border-radius:14px }


  /* ── Communauté : la porte du globe, sur la nuit ─────────────────── */
  html:not(.native-app) .atlas-apercu-porte{ background:transparent; padding-inline:var(--gout) }
  html:not(.native-app) .atlas-apercu-porte .ref-marque{ color:#F3EEE6 }

  /* Les tuiles « monde » (Aussi en pleine saison) : la légende dessous,
     comme les autres. Trois lignes : le nom, les mois, la ville. */
  html:not(.native-app) .ref-tuile.monde.a-photo{
    --tuile-legende:76px; padding-bottom:var(--tuile-legende); background-clip:content-box; background-origin:content-box;
    background-color:transparent; box-shadow:none; border-radius:14px 14px 0 0; cursor:pointer;
  }
  html:not(.native-app) .ref-tuile.monde.a-photo .ref-tuile-m{ background:transparent; left:2px; right:2px; bottom:0; height:var(--tuile-legende); padding:10px 0 0; border-radius:0 }
  html:not(.native-app) .ref-tuile.monde.a-photo .ref-n{ font-size:17px }
  html:not(.native-app) .ref-tuile.monde.a-photo:hover .ref-n{ color:var(--chrome-clair) }
  /* Les petites sélections : le nom sur la photo, en capitales. */
  html:not(.native-app) .sel-petite .sel-m{ position:absolute; left:0; right:0; bottom:0; width:auto; padding:60px 24px 18px; background:linear-gradient(180deg, rgba(12,10,8,0), rgba(12,10,8,.8)); border-radius:0 }
  html:not(.native-app) .sel-petite .sel-n{ background:transparent; box-shadow:none; padding:0; color:#F3EEE6; font-family:var(--titre-site); text-transform:uppercase; font-size:30px; font-weight:800; letter-spacing:0; line-height:.95 }
  /* « Par envie » : des cartes de site, qui réagissent au survol. */
  html:not(.native-app) .envie{ border:1px solid var(--n-3); border-radius:14px; cursor:pointer; transition:border-color .2s ease }
  html:not(.native-app) .envie:hover{ border-color:color-mix(in srgb, var(--chrome) 70%, var(--n-0)) }

  /* ── Le fil de Communauté : deux récits par rangée ──────────────── */
  html:not(.native-app) [data-fil-cartes]{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; align-items:start }
  html:not(.native-app) [data-fil-cartes] > .trace-carte{ margin:0; width:auto }
  /* Les étapes reviennent à la ligne : un rail qui défile au doigt
     coupait « Tissamaharama » au bord de la carte. */
  html:not(.native-app) .trace-carte .tr-etapes{ flex-wrap:wrap; overflow:visible; row-gap:8px }
  /* La tuile « monde » n'a plus de voile : sa légende est dessous. */
  html:not(.native-app) .ref-tuile.monde.a-photo::before{ display:none }

  /* ── Un jour : sur la colonne de son texte ───────────────────────
     Le titre partait à 20 px du bord, les flèches collaient aux bords de
     l'écran, le texte vivait 250 px plus loin. Tout se cale sur la
     colonne de 900 px ; « Jour 2 » devient un bouton, pas une bande. */
  html:not(.native-app) .ov[data-ov="day"] :is(.navbar, .itn-dhead-t){ padding-inline:max(20px, calc((100% - 900px) / 2)) }
  html:not(.native-app) .ov[data-ov="day"] .jd-titre{ font-family:var(--titre-site); text-transform:uppercase; font-weight:800; font-size:56px; line-height:.92; letter-spacing:.005em }
  html:not(.native-app) .ov[data-ov="day"] .ov-scroll .btn-ghost.sm{ width:auto; padding-inline:22px; margin-left:0 }
  html:not(.native-app) .ov[data-ov="day"] .ov-foot{ justify-content:flex-end }
  html:not(.native-app) .ov[data-ov="day"] .ov-foot .btn{ width:auto; flex:none; padding-inline:34px }
  html:not(.native-app) .ov[data-ov="day"] .day-nav{ max-width:none; width:auto; margin:0; display:flex; justify-content:flex-end; gap:12px }

  /* ── Les écrans ouverts : un titre de page, pas une barre d'app ────
     Réglages, préférences, messages, amis, aide, notifications : une
     barre de 52 px avec un petit titre centré et une flèche ronde collée
     au bord de l'écran — la barre de navigation d'iOS. Sur un site, le
     titre est en tête de la colonne, en grand, et le retour est à côté.
     Le jour (son propre titre) et l'itinéraire (sa barre) s'en excluent. */
  html:not(.native-app) .ov:not(.modal):not([data-ov="day"]):not([data-ov="itinerary"]) > .navbar{
    height:auto; padding:34px max(20px, calc((100% - 900px) / 2)) 12px; justify-content:flex-start; gap:18px;
  }
  html:not(.native-app) .ov:not(.modal):not([data-ov="day"]):not([data-ov="itinerary"]) > .navbar .nav-title{
    position:static; transform:none; order:2; flex:1;
    font-family:var(--titre-site); text-transform:uppercase; font-weight:800; font-size:44px; line-height:.95;
    letter-spacing:.005em; color:var(--ink);
  }
  html:not(.native-app) .ov:not(.modal) > .navbar .ihx-btn{ border-radius:10px; order:1 }
  html:not(.native-app) .ov:not(.modal) > .navbar > :last-child:not(.nav-title):not(:first-child){ order:3 }

  /* Un bouton n'est pas une bande : il prend la largeur de son texte. */
  html:not(.native-app) .ov:not(.modal) .ov-scroll > .btn,
  html:not(.native-app) .ov:not(.modal) .ov-scroll .ecran-vide .btn,
  html:not(.native-app) .ov[data-ov="settings"] .btn,
  html:not(.native-app) .ov[data-ov="notifications"] .btn,
  html:not(.native-app) .ov[data-ov="amis"] .pf-login-b{ width:fit-content; min-width:220px; padding-inline:34px; margin-inline:0 }
  /* fit-content et non auto : .btn est un bloc flex, auto le rend à toute la largeur. */
  /* Ces deux-là portent width:100% en style écrit dans le code
     (screens-main.js) : seule une règle forcée le reprend. */
  html:not(.native-app) :is(.ov[data-ov="settings"], .ov[data-ov="notifications"]) .ov-scroll .btn{ width:fit-content !important; min-width:220px; padding-inline:34px }
  html:not(.native-app) .ov[data-ov="notifications"] .ov-scroll .btn{ margin-inline:auto }
  html:not(.native-app) .ov[data-ov="prefs"] .ov-foot{ display:flex; justify-content:flex-end }
  html:not(.native-app) .ov[data-ov="prefs"] .ov-foot .btn{ width:auto; flex:none; padding-inline:34px }

  /* Les sélecteurs en segment (Éco, Confort, Luxe ; En forme, Fatigué·e)
     deviennent des choix posés côte à côte, comme les réponses du
     questionnaire : un cadre chacun, le choisi en terre cuite. */
  html:not(.native-app) .seg{ background:transparent; padding:0; gap:10px; border-radius:0 }
  html:not(.native-app) .seg button{
    flex:0 1 auto; min-width:120px; height:42px; padding-inline:20px; border:1px solid var(--n-3); border-radius:10px;
    background:var(--n-0); color:var(--sub); box-shadow:none;
  }
  html:not(.native-app) .seg button:hover{ color:var(--ink); border-color:var(--n-4) }
  html:not(.native-app) .seg button.on{ background:color-mix(in srgb, var(--chrome) 18%, var(--n-0)); border-color:var(--chrome); color:var(--ink); box-shadow:none }

  /* ── Les boutons d'icône : la forme des boutons du site ───────────
     Des pastilles rondes posées sur les photos (retour, partager,
     réactions du fil) : le geste du pouce. Sur un site, un bouton
     d'icône est un petit carré aux angles adoucis, comme ceux du menu. */
  html:not(.native-app) :is(.ihx-btn, .ref-rond, .bell-btn, .tr-reac, .tr-plus, .tr-qui, .deck-back, .tr-coin > *){ border-radius:10px }

  /* ── Très grand écran : la photo d'accueil à fond perdu ────────────
     core.css bornait tous les onglets à 1 440 px : au-delà, la photo
     d'Explorer devenait un tableau accroché au milieu du mur. Les
     contenus gardent leur mesure (--mesure, colonnes calculées) ; seul
     ce qui est fait pour le fond perdu en profite. */
  html:not(.native-app) .tabs{ max-width:none }

  /* ── Vous : « À venir, Passés, Brouillons », soulignés aussi ──────── */
  html:not(.native-app) .pf-filtres{ border-bottom:1px solid var(--n-3); gap:26px }
  html:not(.native-app) .pf-filtres .pf-filtre{ background:transparent; border-radius:0; padding:0 0 12px; margin-bottom:-1px; color:var(--sub); border-bottom:2px solid transparent; cursor:pointer }
  html:not(.native-app) .pf-filtres .pf-filtre:hover{ color:var(--ink) }
  html:not(.native-app) .pf-filtres .pf-filtre.on{ background:transparent; color:var(--ink); border-bottom-color:var(--chrome) }
}