/* Les variables :root de cette feuille vivent dans tokens.css (chantier B1). */
.tab-it[data-tabbtn="create"] .tab-ico{
  background:var(--chrome); color:var(--blanc);
  box-shadow:inset 0 1px 0 var(--blanc-a25), 0 8px 18px -8px var(--accent-shadow);
}
.tab-it[data-tabbtn="create"].on .tab-ico{ color:var(--blanc); box-shadow:0 0 0 2px var(--nuit-a70), 0 0 0 4px var(--chrome) }

/* Le bouton du questionnaire : la terre cuite, l'encre sombre dessus
   (comme les boutons du site), jamais le blanc, qui y tombe à 3,5:1. */
#deck .dcard .d-foot .btn{ background:var(--chrome); color:var(--chrome-encre); box-shadow:0 10px 24px -12px var(--accent-shadow) }

/* ── 2. Le questionnaire, sans barre d'onglets ──────────────────────── */
html.deck-concentre .tabbar{ opacity:0; transform:translateY(24px); pointer-events:none; transition:opacity var(--mv-normal) var(--mv-sortie), transform var(--mv-normal) var(--mv-sortie) }
html.deck-concentre .tabbar::before{ opacity:0 }
/* La réserve de 250 px comptait 103 px pour la pilule (screens.css) :
   sans elle, la carte récupère ce bas d'écran. */
html.deck-concentre #deck{ height:calc(var(--app-vh, 1vh) * 100 - 160px) }
/* Le bouton suit la réponse au lieu d'attendre au pied de la carte : sur
   une question à trois choix, il y avait trois cents pixels de vide entre
   la réponse et « Continuer ». Le corps garde son défilement quand la
   réponse est longue. */
#deck .dcard .d-body{ flex:0 1 auto; padding-bottom:24px }
/* Les 24 px du bas : les réponses entrent en montant de 22 px au plus
   (mouvement.css, mv-monte). Sans cette place, elles dépassaient du corps
   pendant leur glissé, et le dégradé « il reste à voir » s'allumait sur
   une liste courte (banc-defilement, question 04). */
#deck .dcard .d-foot{ margin-top:0 }
/* Le fondu du bas, plus long : sur une question qui défile (les dates),
   le champ « Ville de départ » s'arrêtait net contre le bouton et
   semblait glisser dessous. 48 px de fondu disent « la suite est en
   dessous » (screens.css posait 28 px). */
#deck .dcard .d-body[data-defile="bas"]{
  -webkit-mask-image:linear-gradient(180deg,var(--noir) calc(100% - 48px),transparent 100%);
          mask-image:linear-gradient(180deg,var(--noir) calc(100% - 48px),transparent 100%);
}
#deck .dcard .d-body[data-defile="deux"]{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,var(--noir) 28px,var(--noir) calc(100% - 48px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,var(--noir) 28px,var(--noir) calc(100% - 48px),transparent 100%);
}

/* ── 3. Les questions, d'une seule couleur ──────────────────────────── */
.dcard .d-q em{ color:inherit }

/* ── 5. Les gestes ──────────────────────────────────────────────────── */
/* Un appui se SENT : les tuiles et cartes cèdent un peu, puis reviennent
   avec un ressort. Les règles existantes (wow.css) n'en touchaient qu'une
   partie ; on prend toutes les cartes qu'on touche. */
.ref-tuile, .trace-carte, .envie, .dcard .radio-it, .dcard .mode-btn{
  transition:transform var(--mv-normal) var(--mv-ressort), box-shadow var(--mv-normal) var(--mv-sortie);
}
.ref-tuile:active, .trace-carte:active, .envie:active, .dcard .radio-it:active, .dcard .mode-btn:active{ transform:scale(.975); transition-duration:var(--mv-rapide) }
.btn:active{ transform:scale(.97); transition-duration:var(--mv-rapide) }

/* L'écran d'UN jour (overlay « day ») : son programme arrive ligne après
   ligne, une seule fois, à l'ouverture. L'itinéraire a déjà le sien
   (mouvement.css, .itn-day.open) : on ne le touche pas. */
@keyframes oct-pose{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.ov[data-ov="day"].in .moment{ animation:oct-pose var(--mv-lent) var(--mv-sortie) both }
.ov[data-ov="day"].in .moment:nth-child(2){ animation-delay:.05s }
.ov[data-ov="day"].in .moment:nth-child(3){ animation-delay:.1s }
.ov[data-ov="day"].in .moment:nth-child(4){ animation-delay:.15s }
.ov[data-ov="day"].in .moment:nth-child(5){ animation-delay:.2s }
.ov[data-ov="day"].in .moment:nth-child(n+6){ animation-delay:.25s }

/* ── 6. L'iPhone, clair et en charte (Charlotte, le 12 octobre) ───────
   « Claire, mais en charte » : l'app iPhone garde son jour, mais porte
   la signature de hukaia.com — les titres dans les capitales étroites
   du site (Big Shoulders Display, fonts/, copiée dans l'app par
   scripts/build-www.sh), les étiquettes en petites capitales posées
   sur les photos. L'app web a la nuit (nuit.css) ; ceci ne touche que
   html.native-app. */
@font-face{font-family:'Big Shoulders Display';src:url('fonts/big-shoulders-display.woff2') format('woff2');font-weight:100 900;font-display:swap}
html.native-app :is(.ref-h1, .dcard .d-q, .ov .itn-title, .jd-titre){
  font-family:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  text-transform:uppercase; font-weight:700; letter-spacing:.005em; line-height:.92;
}
/* Les capitales étroites tiennent moins de place : à taille égale, un
   titre paraissait plus petit qu'avant. On leur rend du corps. */
html.native-app .ref-h1{ font-size:clamp(40px, 12vw, 48px); text-wrap:balance }
html.native-app #deck .dcard .d-q{ font-size:40px; letter-spacing:.005em; line-height:.92; text-wrap:balance }
html.native-app .ov .itn-title{ font-size:44px }
html.native-app .jd-titre{ font-size:40px }
/* Les étiquettes posées sur les photos (« Fin de la saison », « 23 °C ») :
   petites capitales à chasse fixe sur du verre sombre, comme sur le site,
   au lieu de la pastille blanche en romain. */
html.native-app :is(.ref-badge, .ref-badge.fort, .ref-badge.tiede, .ref-badge.doux){
  background:var(--nuit-a72); color:var(--blanc); border-radius:5px; padding:5px 8px;
  font-family:ui-monospace,'Geist Mono',monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}

@media (prefers-reduced-motion:reduce){
  html.deck-concentre .tabbar{ transition:none; transform:none }
  .ov[data-ov="day"].in .moment{ animation:none }
  .ref-tuile:active, .trace-carte:active, .envie:active, .dcard .radio-it:active, .dcard .mode-btn:active, .btn:active{ transform:none }
}

/* ── Les deux mentions Mapbox du globe : une cible de doigt entière ─────
   Le logo (88×23) et le bouton d'attribution (24×24) sont imposés par
   les conditions Mapbox, qui interdisent de les réduire ou de les
   cacher. Leur DESSIN ne change pas : seule leur zone de toucher
   s'agrandit, par un pseudo-élément transparent de 44 px de haut
   (banc-zone-tactile, Communauté et Atlas). */
.mapboxgl-ctrl-attrib-button{ position:relative }
/* Le logo rogne ce qui dépasse de lui (overflow:hidden, feuille Mapbox) :
   un pseudo-élément n'y sert à rien. On l'épaissit par un remplissage
   transparent, son dessin restant dans la boîte de contenu, et une marge
   négative égale le garde exactement à sa place. */
a.mapboxgl-ctrl-logo{
  box-sizing:content-box !important; padding-block:12px !important; margin-block:-10.5px !important;
  background-origin:content-box !important; background-clip:content-box !important;
}
.mapboxgl-ctrl-attrib-button::after{
  content:''; position:absolute; left:50%; top:50%;
  width:max(100%, 44px); height:44px; transform:translate(-50%, -50%);
}