/* ══ WOW : LA MISE EN SCÈNE ════════════════════════════════════════════
   Charlotte, le 5 octobre : « on avait dit de moderniser au maximum le
   questionnaire, rien n'a changé. Et on ne voit pas encore un méga
   changement sur le reste de l'app — fais-moi quelque chose de wow ».

   Cette feuille est la couche de mouvement et de matière, chargée après
   direction.css. Tout ce qui bouge ici s'arrête sous « moins de
   mouvements » (réglage iOS), en bas de fichier. */

:root{
  --wow-sortie:cubic-bezier(.2,.8,.2,1);
  --wow-ressort:cubic-bezier(.22,1.25,.36,1);
  --wow-a:color-mix(in srgb, var(--accent) 72%, #FFFFFF);
  --wow-b:color-mix(in srgb, var(--accent) 45%, #FFE2CC);
  --wow-c:color-mix(in srgb, var(--accent) 30%, #FFFFFF);
}

/* ══ 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:6px 14px 6px 6px; border-radius:999px; background:var(--d-creux);
}
.tabview[data-tab="create"] .deck-back{ background:#FFFFFF; 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:#FFFFFF;
  -webkit-backdrop-filter:blur(28px) saturate(185%); backdrop-filter:blur(28px) saturate(185%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 34px 80px -40px rgba(26,23,18,.5), 0 2px 6px rgba(26,23,18,.04);
  transition:transform .85s var(--wow-ressort), opacity .55s ease;
  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:32px;
  box-shadow:0 -12px 34px -22px rgba(14,12,10,.45), 0 30px 60px -40px rgba(26,23,18,.35) }
#deck .dcard:not(.actif){ background:#FFFFFF }
#deck .deck-grand{ display:none }
#deck .dcard > *{ transition:opacity .4s ease }
#deck .dcard:not(.actif) > *{ opacity:0 }

/* La question, en grand, arrive mot à mot (deck.js, _deckMotsTitre). */
#deck .dcard .d-q{ font-size:32px; 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 .75s var(--wow-sortie) both; 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:11px; 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:#F3F2EF; border:1px solid transparent; box-shadow:none;
  overflow:hidden; position:relative;
  transition:transform .35s var(--wow-ressort), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#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%, #FFFFFF) 0%, color-mix(in srgb, var(--accent) 7%, #FFFFFF) 100%);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px -20px var(--accent-shadow, rgba(0,0,0,.4));
  animation:choix-pop .5s var(--wow-ressort);
}
@keyframes choix-pop{ 0%{ transform:scale(1) } 35%{ transform:scale(.955) } 70%{ transform:scale(1.025) } 100%{ transform:scale(1) } }
#deck .mode-btn .m-i{ background:rgba(255,255,255,.85); box-shadow:0 6px 14px -8px rgba(26,23,18,.35) }

/* 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 .7s var(--wow-sortie) forwards;
}
@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, rgba(0,0,0,.4)) }
  50%{ box-shadow:0 14px 30px -12px var(--accent-shadow, rgba(0,0,0,.4)), 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:rgba(26,23,18,.07); overflow:hidden }
.deck-bar i{
  position:relative; border-radius:6px;
  background:linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, #FFD7A8) 100%);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:width .9s var(--wow-ressort);
}
.deck-bar i::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.65) 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:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85);
  -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 .6s var(--wow-sortie) backwards }
/* 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. */
html.native-app .tabview{ transition:opacity 0s linear .5s, 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. */
html.native-app .tabview.active{ z-index:1; transition:opacity .22s ease, 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 .9s var(--wow-sortie) .08s backwards }

/* ── La barre : l'icône choisie rebondit, la rose tourne ─────────────── */
.tab-it.on .tab-ico svg{ animation:ico-rebond .55s var(--wow-ressort) }
@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 .9s var(--wow-ressort) }
@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 .45s var(--wow-ressort), box-shadow .3s ease }
.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:28px; will-change:transform }
html.native-app .tabs::after{
  content:''; position:absolute; inset:0; z-index:60; pointer-events:none;
  background:#000; opacity:0; transition:opacity .46s ease;
}
html.native-app .tabs, html.native-app .tabbar{
  transition:transform .46s cubic-bezier(.32,.72,0,1), opacity .25s ease;
}
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:#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:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 .5px 0 rgba(26,23,18,.1);
  font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--ink);
  opacity:0; transform:translate3d(0,-10px,0);
  transition:opacity .28s ease, transform .4s cubic-bezier(.32,.72,0,1);
}
.titre-barre span{ display:inline-block; transform:translate3d(0,8px,0); transition:transform .45s cubic-bezier(.32,.72,0,1) }
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 .25s 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:rgba(255,255,255,.86); 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:11px; font-weight:600;
  letter-spacing:0; text-transform:none; padding:7px 11px;
}

/* La grande carte du mois */
.sel-bloc{ gap:12px }
.sel-rang{ gap:12px }
.sel-grande{
  height:340px; border-radius:32px;
  box-shadow:0 30px 60px -32px rgba(26,23,18,.55);
}
.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:14px 70px 14px 18px; border-radius:22px;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
}
.sel-grande .sel-n{ color:var(--d-encre); font-size:24px; letter-spacing:-.025em }
.sel-grande .sel-s{ color:#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:22px; box-shadow:0 22px 40px -28px rgba(26,23,18,.55) }
.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:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.9); color:var(--d-encre); font-size:14px;
}
.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:9px 12px; border-radius:16px;
  background:rgba(255,255,255,.88); 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:#6B604F; text-shadow:none }

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

/* 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:rgba(255,255,255,.88); border:none;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.55);
}
.ref-cherche:not(.posee) > svg{ stroke:#6B604F }
.ref-cherche:not(.posee) input{ color:var(--d-encre) }
.ref-cherche:not(.posee) input::placeholder{ color:#6B604F }
.ref-heros .ref-rond, .monde-actions .ref-rond{ background:rgba(255,255,255,.86); border:none }
.ref-heros .ref-rond svg, .monde-actions .ref-rond svg{ stroke:var(--d-encre) }
.ref-heros-porte{ background:rgba(255,255,255,.86) }
.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 14px;
  border-radius:28px; overflow:hidden; background:#2A241E;
  box-shadow:0 28px 54px -34px rgba(26,23,18,.6);
  transition:transform .3s var(--wow-ressort);
}
.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:20px;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
}
.pf-rangee.trip .rg-t{ font-size:20px; color:var(--d-encre) }
.pf-rangee.trip .rg-s{ color:#6B604F }
.pf-rangee.trip .rg-p{ font-size:14px; 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:7px 11px; border-radius:999px; font-family:var(--serif); font-size:11px;
  background:rgba(255,255,255,.88); 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:32px }
.prof-stats .ps-v, .pf-chiffres .ps-v{ font-size:26px; font-weight:600; letter-spacing:-.03em }
.fil-inv{ background:var(--d-creux); border:none; box-shadow:none; border-radius:28px }
.fil-inv-ph{ background:#FFFFFF; border-radius:999px }

/* — Communauté : sur le globe, du verre blanc — */
.atlas-apercu-porte{
  left:12px; right:12px; bottom:12px; gap:2px;
  padding:14px 70px 14px 18px; border-radius:22px;
  background:rgba(255,255,255,.9);
  -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:20px; font-weight:600; letter-spacing:-.025em; text-transform:none;
}
.atlas-apercu-porte .ref-marque i{ padding-left:0 }
.atlas-apercu-porte .atlas-counter{ color:#6B604F; text-shadow:none; font-size:13px }
.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:rgba(255,255,255,.86); color:var(--d-encre); border-radius:22px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.5);
}
.atlas-presence-invite .api-txt b{ color:var(--d-encre) }
.atlas-presence-invite .api-txt i{ color:#6B604F }
.atlas-presence-invite svg{ color:#6B604F }
.atlas-apercu-voile{ background:linear-gradient(180deg, transparent 0%, rgba(5,8,16,.35) 70%, rgba(5,8,16,.55) 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:24px }
.notif{ border-radius:22px }
.notif.unread{ background:#FFFFFF; box-shadow:inset 0 0 0 1.5px var(--d-creux-2) }
.cc-invite, .cc-contacts{ border-radius:22px }
.trip-board{ border-radius:28px }
.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:rgba(255,255,255,.86); 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:rgba(255,255,255,.86); 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 10px;padding:8px 14px;border-radius:999px;
  background:var(--d-creux, rgba(0,0,0,.035));color:var(--sub);font-size:12.5px;line-height:1.3;width:fit-content;max-width:100%;
  animation:onglet-entre .45s cubic-bezier(.22,.68,.2,1) 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%);
}