/* Les variables :root de cette feuille vivent dans tokens.css (chantier B1). */

/* ══ 1. LE QUESTIONNAIRE ═════════════════════════════════════════════ */

/* ── Sur blanc, sans photo ────────────────────────────────────────────
   Le 5 octobre, la photo du jour était montée en tête de Créer, d'après
   la maquette. Charlotte, le soir même, sur son iPhone : « photo
   derrière, c'est pas beau ». Elle s'en va : la question se pose sur le
   blanc de l'app, la progression dans une pilule creuse.

   La même capture montrait le bouton « Continuer » sous la barre
   d'onglets : la carte avait été descendue de 150 px sous la photo sans
   que sa hauteur rende ces 150 px. Elle reprend sa place et sa hauteur
   d'origine (screens.css, #deck : 250 px de réserve, mesurés pour
   dégager la barre). */
.tabview[data-tab="create"]{ position:relative }
.deck-scene{ display:none }
.tabview[data-tab="create"] .deck-prog{
  padding:8px 16px 8px 8px; border-radius:999px; background:var(--d-creux);
}
.tabview[data-tab="create"] .deck-back{ background:var(--blanc); border:none }

/* ── La carte est du verre ───────────────────────────────────────────
   Blanche à 64 %, floutée et saturée : la couleur du fond passe à
   travers. Ses trajectoires (deck.js, positionDeck) sont en perspective ;
   la transition est longue et finit par un léger dépassement. */
#deck .dcard{
  background:var(--blanc);
  -webkit-backdrop-filter:blur(28px) saturate(185%); backdrop-filter:blur(28px) saturate(185%);
  border:1px solid var(--blanc-a78);
  box-shadow:inset 0 1px 0 var(--blanc-a95), 0 34px 80px -40px var(--suie-a50), 0 2px 6px var(--suie-a4);
  transition:transform var(--mv-lent) var(--wow-ressort) var(--mv-sortie), opacity var(--mv-lent) var(--mv-sortie);
  transform-origin:50% 100%;
}
/* Les cartes de la pile ne montrent que leur verre : leur contenu se
   voyait à travers la carte du dessus (des « Continuer » fantômes). */
#deck .dcard{ -webkit-backdrop-filter:none; backdrop-filter:none; border:none; border-radius:var(--r-xl);
  box-shadow:0 -12px 34px -22px var(--nuit-profonde-a45), 0 30px 60px -40px var(--suie-a35) }
#deck .dcard:not(.actif){ background:var(--blanc) }
#deck .deck-grand{ display:none }
#deck .dcard > *{ transition:opacity var(--mv-lent) var(--mv-sortie) }
#deck .dcard:not(.actif) > *{ opacity:0 }

/* La question, en grand, arrive mot à mot (deck.js, _deckMotsTitre). */
#deck .dcard .d-q{ font-size:var(--t-ecran); letter-spacing:-.045em; line-height:1.04 }
#deck .dcard.entre .d-q{ animation:none }
#deck .dq-mot{ display:inline-block }
#deck .dq-mot.colle{ display:inline }
#deck .dcard.entre .dq-mot{ animation:dq-mot var(--mv-lent) var(--wow-sortie) both var(--mv-sortie); animation-delay:calc(.1s + var(--m, 0) * 55ms) }
#deck .dcard.entre .dq-mot.colle{ animation-name:dq-fondu }
@keyframes dq-fondu{ from{ opacity:0 } to{ opacity:1 } }
/* Sans flou : un filtre animé se repeint à chaque image sur iPhone (voir §4). */
@keyframes dq-mot{ from{ opacity:0; transform:translate3d(0,.55em,0) rotate(5deg) } to{ opacity:1; transform:none } }

/* Le sur-titre : la ligne de la maquette, petite et en couleur. */
#deck .dcard .d-num{
  display:block; padding:0; background:none; border-radius:0;
  font-family:var(--mono); font-size:var(--t-micro); font-weight:600; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--accent-texte, var(--accent));
}
#deck .dcard .d-num::before{ display:none }

/* ── Les choix : du verre, qui répond au doigt ───────────────────────── */
#deck .radio-it, #deck .occ, #deck .pick-it, #deck .mode-btn{
  background:var(--creux-choix); border:1px solid transparent; box-shadow:none;
  overflow:hidden; position:relative;
  transition:transform var(--mv-normal) var(--wow-ressort) var(--mv-sortie), background var(--mv-normal) var(--mv-sortie), border-color var(--mv-normal) var(--mv-sortie), box-shadow var(--mv-normal) var(--mv-sortie);
}
#deck .radio-it:active, #deck .occ:active, #deck .pick-it:active, #deck .mode-btn:active{ transform:scale(.965) }
#deck .radio-it.on, #deck .occ.on, #deck .pick-it.on, #deck .mode-btn.on{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--blanc)) 0%, color-mix(in srgb, var(--accent) 7%, var(--blanc)) 100%);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:inset 0 1px 0 var(--blanc-a90), 0 16px 34px -20px var(--accent-shadow, var(--noir-a40));
  animation:choix-pop var(--mv-lent) var(--wow-ressort) var(--mv-sortie);
}
@keyframes choix-pop{ 0%{ transform:scale(1) } 35%{ transform:scale(.955) } 70%{ transform:scale(1.025) } 100%{ transform:scale(1) } }

/* L'onde qui part du doigt (deck.js, _deckScene). */
.deck-onde{
  position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 30%, transparent); pointer-events:none; z-index:0;
  animation:deck-onde var(--mv-lent) var(--wow-sortie) forwards var(--mv-sortie);
}
@keyframes deck-onde{ from{ transform:scale(0); opacity:1 } to{ transform:scale(46); opacity:0 } }

/* ── « Continuer » respire ────────────────────────────────────────── */
#deck .dcard.actif .d-foot .btn{ animation:souffle 3.2s ease-in-out 1.2s infinite; position:relative; overflow:hidden }
@keyframes souffle{
  0%, 100%{ box-shadow:0 14px 30px -16px var(--accent-shadow, var(--noir-a40)) }
  50%{ box-shadow:0 14px 30px -12px var(--accent-shadow, var(--noir-a40)), 0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent) }
}

/* ── La progression : un fil de lumière ────────────────────────────── */
.deck-bar{ height:6px; border-radius:6px; background:var(--suie-a7); overflow:hidden }
.deck-bar i{
  position:relative; border-radius:6px;
  background:linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--lueur-barre)) 100%);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:width var(--mv-lent) var(--wow-ressort) var(--mv-sortie);
}
.deck-bar i::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, transparent 0%, var(--blanc-a65) 50%, transparent 100%);
  transform:translateX(-100%); animation:fil-lumiere 2.4s ease-in-out infinite;
}
@keyframes fil-lumiere{ to{ transform:translateX(100%) } }
.deck-back{
  background:var(--blanc-a60); border:1px solid var(--blanc-a85);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}

/* ══ 2. LE RESTE DE L'APP ════════════════════════════════════════════ */

/* ── Un onglet qui s'ouvre se compose ────────────────────────────────
   Il arrivait d'un coup. Il monte maintenant d'un rien, en se précisant. */
.tabview.active{ animation:onglet-entre var(--mv-lent) var(--wow-sortie) backwards var(--mv-sortie) }
/* backwards et non both : un filtre laissé en place, même à blur(0),
   ferait de l'onglet le repère de tout ce qui est en position:fixed. */
@keyframes onglet-entre{ from{ opacity:0; transform:translate3d(0,14px,0) scale(.992) } to{ opacity:1; transform:none } }
/* ── L'ONGLET QUITTÉ RESTE DESSOUS LE TEMPS DU RELAIS ─────────────────
   Vidéo de Charlotte, 7 octobre : en passant à Tendances, l'écran
   restait BLANC quatre dixièmes de seconde, puis tout apparaissait d'un
   coup. L'onglet quitté s'effaçait en 0,22 s ; le nouveau, qui doit
   d'abord peindre ses photos et ses étiquettes de verre, n'était pas
   encore prêt — entre les deux, il n'y avait que le fond.

   L'onglet quitté reste donc affiché, immobile et intouchable (sans
   pointer-events, inert), une demi-seconde SOUS le nouveau, qui passe
   au-dessus (z-index) et s'y fond. Prêt ou pas, il y a toujours une
   image à l'écran : au pire l'ancienne, jamais du blanc. */
/* 1er novembre : l'onglet quitté s'efface en 0,18 s au lieu de rester
   entier une demi-seconde. Le nouvel onglet fait monter ses éléments un
   à un (refMonte, jusqu'à 0,4 s) : tant qu'ils étaient transparents,
   l'ancien se lisait au travers — « ISLANDE » en fantôme sous « OÙ
   PARTIR, ET QUAND » pendant dix images. Le fond du nouvel onglet,
   lui, est là dès la première image : plus de fantôme, et pas de blanc. */
html.native-app .tabview{ transition:opacity var(--mv-rapide) var(--mv-sortie), visibility 0s linear .5s; background:var(--bg) }
/* Le fond : les onglets étaient transparents, laissant voir .screen. Avec
   un onglet dessous, ses photos se seraient vues à travers les vides du
   nouveau (tuiles pas encore révélées, marges) — deux écrans mêlés. */
/* Le fondu lui-même, raccourci (31 octobre) : à 0,22 s, les deux écrans
   se lisaient l'un à travers l'autre — « ISLANDE » en fantôme sous « OÙ
   PARTIR, ET QUAND ». À 0,12 s et en accélérant d'emblée, le nouvel
   écran couvre l'ancien avant que l'œil ne lise les deux. */
html.native-app .tabview.active{ z-index:1; transition:opacity var(--mv-rapide) var(--mv-sortie), visibility 0s }

/* ── Les grands titres sortent d'un masque ───────────────────────────
   « Où partir, et quand. », « Votre carnet. », « Là où ils sont allés. »
   montent derrière une ligne invisible, comme au générique d'un film —
   en CSS seul : découper les mots changerait le HTML de l'écran, que
   l'Accueil compare pour ne pas se redessiner pour rien. */
@keyframes titre-masque{
  from{ clip-path:inset(0 0 100% 0); transform:translate3d(0,.45em,0); opacity:.2 }
  to{ clip-path:inset(0 0 -20% 0); transform:none; opacity:1 }
}
.tabview.active .ref-h1, .tabview.active .ref-heros-lieu{ animation:titre-masque var(--mv-lent) var(--wow-sortie) .08s backwards var(--mv-sortie) }

/* ── La barre : l'icône choisie rebondit, la rose tourne ─────────────── */
.tab-it.on .tab-ico svg{ animation:ico-rebond var(--mv-lent) var(--wow-ressort) var(--mv-sortie) }
@keyframes ico-rebond{ 0%{ transform:scale(1) } 30%{ transform:scale(.78) } 65%{ transform:scale(1.16) } 100%{ transform:scale(1) } }
.tab-it[data-tabbtn="create"].on .tab-ico svg{ animation:rose-tour var(--mv-lent) var(--wow-ressort) var(--mv-sortie) }
@keyframes rose-tour{ from{ transform:rotate(-180deg) scale(.6) } to{ transform:rotate(0) scale(1) } }

/* ── Le héros de l'Accueil : la photo reste en arrière quand on défile ─
   Le zoom lent existe déjà (refKen, da-reference.css, sur ::before). On
   y ajoute la profondeur : la photo descend à 40 % de la vitesse du
   doigt. « translate » est une propriété à part : elle se compose avec
   le zoom sans le remplacer. --defile est posé par _hsParallaxe (app.js). */
.ref-heros::before{ translate:0 calc(var(--defile, 0) * .4px) }

/* ── Les tuiles photo : la photo glisse dans son cadre ───────────────
   --px est posé par hsParallaxeRails (app.js) quand le rail défile. */
.ref-rail .ref-tuile:not(.monde){ background-position:calc(50% + var(--px, 0) * 1%) center; transition:transform var(--mv-lent) var(--wow-ressort) var(--mv-sortie), box-shadow var(--mv-normal) var(--mv-sortie) }
.ref-tuile:active, .trace-carte .tr-ph:active, .envie:active{ transform:scale(.97) }

/* ══ 3. MOINS DE MOUVEMENTS ══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  #deck .dcard.entre .deck-grand, #deck .dcard.entre .dq-mot.colle, #deck .dcard.entre .dq-mot, #deck .dcard.actif .d-foot .btn,
  .deck-bar i::after, .tabview.active, .tab-it.on .tab-ico svg, .tabview.active .ref-h1, .tabview.active .ref-heros-lieu,
  #deck .radio-it.on, #deck .occ.on, #deck .pick-it.on, #deck .mode-btn.on, .deck-onde{ animation:none }
  .ref-heros::before{ translate:none }
}


/* ══ 4. LE MOUVEMENT QU'ON VOIT À CHAQUE GESTE ═════════════════════════
   Charlotte, le 5 octobre : « j'ai demandé que l'application entière soit
   rendue plus moderne avec tes compétences de motion design, je ne
   comprends pas où ça bloque ». Ce qui précède était juste mais trop
   discret. Ce qui suit se voit à chaque ouverture, à chaque défilement. */

/* ── Un écran qui s'ouvre fait reculer celui d'en dessous ────────────
   Comme sur iPhone : poussé par la droite, l'écran d'avant glisse d'un
   quart vers la gauche et s'assombrit ; une feuille qui monte du bas le
   fait reculer en carte arrondie. Classes posées par _hsSyncPile (app.js). */
/* ── SANS FILTRE ET SANS RAYON ANIMÉS ────────────────────────────────
   Charlotte, le 5 octobre : « les transitions d'ouverture et de fermeture
   ne sont pas fluides ». Première version de ce recul : filter:brightness
   et border-radius en transition sur .tabs, c'est-à-dire sur tout
   l'onglet, photos comprises. Sur iPhone, WebKit ne confie à la puce
   graphique que transform et opacity ; un filtre ou un rayon qui bougent
   se repeignent à chaque image sur le processeur principal — pendant que
   l'écran qui arrive glisse par-dessus.

   L'assombrissement est donc un voile noir posé sur l'onglet, dont seule
   l'opacité varie ; le rayon et la coupe sont posés une fois pour toutes,
   sans transition — à l'échelle 1 ils se cachent dans les coins de
   l'iPhone. */
html.native-app .tabs{ overflow:hidden; border-radius:var(--r-xl); will-change:transform }
html.native-app .tabs::after{
  content:''; position:absolute; inset:0; z-index:60; pointer-events:none;
  background:var(--noir); opacity:0; transition:opacity var(--mv-lent) var(--mv-sortie);
}
html.native-app .tabs, html.native-app .tabbar{
  transition:transform var(--mv-lent) var(--mv-sortie), opacity var(--mv-normal) var(--mv-sortie);
}
html.native-app.pile-pousse .tabs{ transform:translate3d(-24%,0,0) }
html.native-app.pile-pousse .tabs::after{ opacity:.22 }
html.native-app.pile-pousse .tabbar{ transform:translate3d(-24%,0,0); opacity:0 }
html.native-app.pile-zoom .tabs{ transform:scale(.955) }
html.native-app.pile-zoom .tabs::after{ opacity:.28 }
html.native-app.pile-zoom .tabbar{ opacity:0 }
html.native-app.pile-feuille .screen{ background:var(--teinte-0e0c0a) }
html.native-app.pile-feuille .tabs{ transform:translate3d(0,12px,0) scale(.925) }
html.native-app.pile-feuille .tabs::after{ opacity:.38 }
html.native-app.pile-feuille .tabbar{ transform:translate3d(0,40px,0); opacity:0 }

/* ── Le grand titre se replie en barre de verre ───────────────────────
   « Où partir, et quand. » défile hors de l'écran : son nom revient, en
   petit, dans une barre de verre posée sous l'heure (_hsTitreReplie). */
.titre-barre{
  position:absolute; left:0; right:0; top:0; z-index:70; pointer-events:none;
  height:calc(var(--encoche) + 46px); padding-top:var(--encoche); box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  background:var(--blanc-a80);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 .5px 0 var(--suie-a10);
  font-family:var(--serif); font-weight:700; font-size:var(--t-carte); letter-spacing:-.02em; color:var(--ink);
  opacity:0; transform:translate3d(0,-10px,0);
  transition:opacity var(--mv-normal) var(--mv-sortie), transform var(--mv-lent) var(--mv-sortie);
}
.titre-barre span{ display:inline-block; transform:translate3d(0,8px,0); transition:transform var(--mv-lent) var(--mv-sortie) }
html.titre-replie .titre-barre{ opacity:1; transform:none }
html.titre-replie .titre-barre span{ transform:none }
html.pile-pousse .titre-barre, html.pile-feuille .titre-barre, html.pile-zoom .titre-barre{ opacity:0 }
/* Le grand titre, lui, s'efface et se resserre en partant. */
.tabview .ref-tete .ref-h1{ transition:opacity var(--mv-normal) linear }
html.titre-replie .tabview.active .ref-tete .ref-h1{ opacity:0 }

/* ── Les chiffres comptent (hsCompter, app.js) ─────────────────────── */
.compte{ font-variant-numeric:tabular-nums }

@media (prefers-reduced-motion:reduce){
  .titre-barre, .titre-barre span{ transition:none }
}

/* ══ 5. LE STYLE RETENU, PARTOUT ═════════════════════════════════════════
   Charlotte, le 5 octobre : « applique tout le nouveau style aux autres
   écrans », d'après la maquette D (A + C sur blanc), l'accent suivant les
   saisons. Ce qui la signe, et qu'on reporte ici :
     · des titres Sora 600, serrés — plus fins que le 700 d'extreme.css ;
     · sur les photos, des étiquettes BLANCHES, plus de pastilles sombres
       (écrites normalement : banc-vieilleries plafonne les capitales
       espacées, et « La saison s'ouvre » se lit mieux ainsi) ;
     · la grande carte : photo à 32 px d'arrondi, une barre blanche posée
       en bas avec le nom et un rond d'encre fléché ;
     · les petites cartes : 22 px, le nom dans une pastille blanche. */
.ref-h1{ font-weight:600; letter-spacing:-.04em }
.ref-entete h2, .section-h h2, .pf-entete h2{ font-weight:600 }

/* Les étiquettes sur photo */
.ref-badge, .ref-badge.fort, .ref-badge.tiede, .ref-badge.doux{
  background:var(--blanc-a86); color:var(--d-encre); border:none;
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  font-family:var(--serif); font-size:var(--t-micro); font-weight:600;
  letter-spacing:0; text-transform:none; padding:8px 12px;
}

/* La grande carte du mois */
.sel-bloc{ gap:12px }
.sel-rang{ gap:12px }
.sel-grande{
  height:340px; border-radius:var(--r-xl);
  box-shadow:0 30px 60px -32px var(--suie-a55);
}
.sel-grande .sel-voile{ display:none }
.sel-grande .ref-badge{ top:14px; left:14px }
.sel-grande .sel-m{
  position:absolute; left:12px; right:12px; bottom:12px; width:auto;
  padding:16px 70px 16px 20px; border-radius:var(--r-lg);
  background:var(--blanc-a90);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
}
.sel-grande .sel-n{ color:var(--d-encre); font-size:var(--t-section); letter-spacing:-.025em }
.sel-grande .sel-s{ color:var(--teinte-6b604f); margin-top:3px }
.sel-grande .sel-m::after{
  content:''; position:absolute; right:14px; top:50%; width:46px; height:46px; margin-top:-23px;
  border-radius:999px; background:var(--d-encre) no-repeat center / 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E");
}

/* Les deux petites */
.sel-petite{ height:170px; border-radius:var(--r-lg); box-shadow:0 22px 40px -28px var(--suie-a55) }
.sel-petite .sel-voile{ display:none }
.sel-petite .ref-badge{ top:10px; left:10px }
.sel-petite .sel-m{ padding:8px; width:auto }
.sel-petite .sel-n{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:var(--blanc-a90); color:var(--d-encre); font-size:var(--t-corps);
}
.sel-petite .sel-s{ display:none }

/* Les tuiles « monde » ont la même étiquette blanche que les autres */
.ref-tuile.monde.a-photo::after{ display:none }
.ref-tuile.monde.a-photo .ref-tuile-m{
  left:8px; right:8px; bottom:8px; height:auto; width:auto;
  padding:8px 12px; border-radius:var(--r-md);
  background:var(--blanc-a88); color:var(--d-encre); text-shadow:none;
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
}
.ref-tuile.monde.a-photo .ref-n{ color:var(--d-encre); text-shadow:none }
.ref-tuile.monde.a-photo .ref-p, .ref-tuile.monde.a-photo .ref-src{ color:var(--teinte-6b604f); text-shadow:none }

/* La recherche : un creux à 16 px, comme sur la maquette */
.ref-cherche.posee{ border-radius:var(--r-md) }

/* Sur la photo d'Explorer : la recherche et les ronds en verre BLANC,
   comme la pilule de progression et le bouton retour de la maquette. */
.ref-cherche:not(.posee){
  background:var(--blanc-a88); border:none;
  box-shadow:0 20px 50px -24px var(--noir-a55);
}
.ref-cherche:not(.posee) > svg{ stroke:var(--teinte-6b604f) }
.ref-cherche:not(.posee) input{ color:var(--d-encre) }
.ref-cherche:not(.posee) input::placeholder{ color:var(--teinte-6b604f) }
.ref-heros .ref-rond, .monde-actions .ref-rond{ background:var(--blanc-a86); border:none }
.ref-heros .ref-rond svg, .monde-actions .ref-rond svg{ stroke:var(--d-encre) }
.ref-heros-porte{ background:var(--blanc-a86) }
.ref-heros-porte svg{ stroke:var(--d-encre) }

/* Communauté : le titre se posait à 44 px, la gouttière du volet et celle
   de l'en-tête s'additionnant. Il revient à l'alignement des autres. */
.ref-volet .monde-tete{ padding-left:0; padding-right:0 }

/* ══ 6. COMMUNAUTÉ ET VOUS, À LEUR TOUR ══════════════════════════════════
   Charlotte, sur la 1.13 (165) : « l'écran communauté et profil n'ont pas
   été modifiés ». Elle a raison : la passe précédente n'avait touché que
   des titres et des teintes. Ici, la grammaire de la maquette entre pour
   de bon : les voyages deviennent des cartes photo à barre blanche, et
   tout ce qui est posé sur le globe passe au verre blanc. */

/* — Vous : chaque voyage est une carte photo — */
.pf-rangee.trip{
  position:relative; display:block; height:220px; padding:0; margin:0 0 16px;
  border-radius:var(--r-xl); overflow:hidden; background:var(--teinte-2a241e);
  box-shadow:0 28px 54px -34px var(--suie-a60);
  transition:transform var(--mv-normal) var(--wow-ressort) var(--mv-sortie);
}
.ref-volet .pf-rangee.trip{ margin-left:0; margin-right:0 }
.pf-rangee.trip + .pf-rangee.trip{ border-top:none }
.pf-rangee.trip:active{ transform:scale(.98) }
.pf-rangee.trip .rg-v{ position:absolute; inset:0; width:auto; height:auto; border-radius:0 }
.pf-rangee.trip .rg-m{
  position:absolute; left:10px; right:10px; bottom:10px;
  padding:12px 64px 12px 16px; border-radius:var(--r-lg);
  background:var(--blanc-a90);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
}
.pf-rangee.trip .rg-t{ font-size:var(--t-section); color:var(--d-encre) }
.pf-rangee.trip .rg-s{ color:var(--teinte-6b604f) }
.pf-rangee.trip .rg-p{ font-size:var(--t-corps); margin-top:4px; color:var(--d-encre) }
.pf-rangee.trip .rg-m::after{
  content:''; position:absolute; right:12px; top:50%; width:42px; height:42px; margin-top:-21px;
  border-radius:999px; background:var(--d-encre) no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E");
}
.pf-rangee.trip .rg-e{
  position:absolute; top:12px; left:12px; z-index:1;
  padding:8px 12px; border-radius:999px; font-family:var(--serif); font-size:var(--t-micro);
  background:var(--blanc-a88); color:var(--d-encre);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pf-rangee.trip .rg-e:empty{ display:none }
.pf-rangee.trip .rg-e.proche{ color:var(--accent-texte, var(--accent)) }

/* — Vous : la carte d'identité et le rappel photo, surfaces pleines — */
.pf-carte{ border-radius:var(--r-xl) }
.prof-stats .ps-v, .pf-chiffres .ps-v{ font-size:var(--t-titre); font-weight:600; letter-spacing:-.03em }
.fil-inv{ background:var(--d-creux); border:none; box-shadow:none; border-radius:var(--r-xl) }
.fil-inv-ph{ background:var(--blanc); border-radius:999px }

/* — Communauté : sur le globe, du verre blanc — */
.atlas-apercu-porte{
  left:12px; right:12px; bottom:12px; gap:2px;
  padding:16px 70px 16px 20px; border-radius:var(--r-lg);
  background:var(--blanc-a90);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
}
.atlas-apercu-porte .ref-marque{
  color:var(--d-encre); text-shadow:none; font-family:var(--serif);
  font-size:var(--t-section); font-weight:600; letter-spacing:-.025em; text-transform:none;
}
.atlas-apercu-porte .ref-marque i{ padding-left:0 }
.atlas-apercu-porte .atlas-counter{ color:var(--teinte-6b604f); text-shadow:none; font-size:var(--t-petit) }
.atlas-apercu-porte::after{
  content:''; position:absolute; right:14px; top:50%; width:44px; height:44px; margin-top:-22px;
  border-radius:999px; background:var(--d-encre) no-repeat center / 17px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E");
}
.atlas-presence-bar.apercu{ padding-bottom:96px }
.atlas-presence-invite{
  background:var(--blanc-a86); color:var(--d-encre); border-radius:var(--r-lg);
  box-shadow:0 14px 34px -18px var(--noir-a50);
}
.atlas-presence-invite .api-txt b{ color:var(--d-encre) }
.atlas-presence-invite .api-txt i{ color:var(--teinte-6b604f) }
.atlas-presence-invite svg{ color:var(--teinte-6b604f) }
.atlas-apercu-voile{ background:linear-gradient(180deg, transparent 0%, var(--teinte-050810-a35) 70%, var(--teinte-050810-a55) 100%) }

/* ══ 7. LES ÉCRANS SECONDAIRES REJOIGNENT LE STYLE RETENU ════════════════
   Audit visuel du 5 octobre : les onglets avaient changé, les écrans
   qu'on ouvre depuis eux non. Réglages, notifications, amis et la carte
   « Votre premier jour » gardaient la carte blanche à filet et ombre — la
   grammaire d'avant. Ils passent en surfaces pleines, comme la maquette. */
.pf-rows-b, .notif, .cc-invite, .cc-contacts, .trip-board{
  background:var(--d-creux); border:none; box-shadow:none;
}
.pf-rows-b{ border-radius:var(--r-lg) }
.notif{ border-radius:var(--r-lg) }
.notif.unread{ background:var(--blanc); box-shadow:inset 0 0 0 1.5px var(--d-creux-2) }
.cc-invite, .cc-contacts{ border-radius:var(--r-lg) }
.trip-board{ border-radius:var(--r-xl) }
.reg-sortie{ background:var(--d-creux); border:none }
.ihx-btn{ background:var(--d-creux); border:none; box-shadow:none }

/* L'itinéraire : sur la photo, des étiquettes blanches, comme partout. */
.itn-m1 > span{
  background:var(--blanc-a86); color:var(--d-encre); border:none; text-shadow:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.itn-m1 > span svg{ stroke:var(--d-encre) }
/* Et les cartes de l'itinéraire, pleines elles aussi. */
.itn-stays, .itn-map-box, .resa-vide, .bud-card{ background:var(--d-creux); border:none; box-shadow:none }
/* Les boutons posés sur la photo de l'itinéraire : des ronds blancs,
   comme la fiche destination — nus, ils disparaissaient sur un ciel clair. */
.ov[data-ov="itinerary"] .itn-hero-top button, .ov[data-ov="itinerary"] .ihx-btn{
  width:40px; height:40px; border-radius:999px; background:var(--blanc-a86); border:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.ov[data-ov="itinerary"] .itn-hero-top button svg, .ov[data-ov="itinerary"] .ihx-btn svg{ stroke:var(--d-encre) }
.cc-proche, .sp-porte{ border:none }
.ov[data-ov="itinerary"] .itn-hero-top button, .ov[data-ov="itinerary"] .ihx-btn{ color:var(--d-encre) }
.ov[data-ov="itinerary"] .itn-hero-top button svg [fill]:not([fill="none"]), .ov[data-ov="itinerary"] .ihx-btn svg [fill]:not([fill="none"]){ fill:var(--d-encre) }

/* ── Temps de trajet entre deux étapes (maps.js, hsTrajetsMonter) ───── */
.itn-trajet{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:8px 16px;border-radius:999px;
  background:var(--d-creux, var(--noir-a4));color:var(--sub);font-size:var(--t-petit);line-height:1.3;width:fit-content;max-width:100%;
  animation:onglet-entre var(--mv-lent) var(--mv-sortie) both}
.itn-trajet svg{flex:none;color:var(--accent-texte,var(--accent))}

/* ── Le contenu s'efface sous la barre, il n'y est pas tranché ─────────
   Charlotte, 6 octobre, capture de l'Accueil : « est-ce qu'on laisse le
   texte sous la barre d'onglets ? » — « Entre tradition et néons »
   coupé net par la capsule sombre. Une barre flottante laisse passer le
   contenu dessous (c'est ce qui la fait flotter), mais il doit s'y
   FONDRE : un voile de la couleur de la page monte derrière la capsule,
   et ce qui défile dessous s'efface au lieu d'être coupé. */
html.native-app .tabbar::before{
  content:""; position:absolute; left:0; right:0; z-index:-1; pointer-events:none;
  bottom:calc(-10px - env(safe-area-inset-bottom,0px));
  height:calc(100% + 64px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom, transparent 0%, var(--bg) 58%, var(--bg) 100%);
}