/* ── LA GRAMMAIRE DES CINQ ONGLETS ───────────────────────────────────────
   Charlotte, le 30/08 : « fais tout dans l'ordre des onglets ».

   Ce fichier porte la mise en page validée sur les maquettes
   (maquettes/d-reference … i-communaute) et rien d'autre. Il ne
   redéclare AUCUNE couleur ni police : tout passe par les jetons de
   da.css. La couleur de saison, la nuance de texte lisible, les
   rayons, les ombres — c'est le socle qui les donne, ce fichier ne fait
   que les disposer.

   Les cinq pièces de la grammaire :
     .ref-heros    l'ouverture photo, avec son voile
     .ref-cherche  la pilule de recherche qui traverse le bas de la photo
     .ref-nappe    la nappe claire qui remonte par-dessus la photo
     .ref-entete   un titre de section, avec son lien à droite
     .ref-rail     un rail de tuiles photo (ou .ref-grille en deux colonnes)
     .ref-ligne    une ligne : vignette, méta, chiffre à droite
     .ref-pilules  les filtres

   Chaque onglet n'ajoute ensuite que ce qui lui est propre. Une valeur
   changée ici change les cinq écrans — c'est le but.

   Chargé APRÈS da.css : ce qui est défini ici gagne sur les règles
   d'écran de l'ancienne direction. */

/* ── L'ouverture photo ───────────────────────────────────────────────────
   La photo passe SOUS la barre de statut. .tabview réserve l'encoche avec
   un padding-top ; sur l'iPhone ça laissait une bande crème au-dessus de
   la vague, et l'ouverture pleine largeur s'arrêtait net sous l'heure.
   On annule ce padding pour le héros seul — marge négative de la hauteur
   de l'encoche — et on le lui rend en hauteur ET en padding interne, pour
   que le contenu reste à la même place à l'écran. Les écrans SANS photo
   (Créer, Communauté) gardent la réserve : du texte sombre sous l'heure
   n'a rien à y gagner. */
.ref-heros{
  position:relative;
  margin-top:calc(-1 * var(--encoche));
  height:calc(398px + var(--encoche));
  background-position:center 32%;background-size:cover;background-repeat:no-repeat;
}
.ref-heros.court{height:calc(340px + var(--encoche))}
/* Le voile de la photo d'accueil valait 49 % EN MOYENNE sur toute sa
   hauteur : la moitié de la lumière de l'image, partout. Et il commençait
   à 80 % tout en haut — là où il n'y a que le mot « Hic Sunt » et la
   cloche, deux éléments minuscules qui n'ont jamais eu besoin de ça.

   Le haut recule donc franchement, et le bas ne bouge presque pas : c'est
   lui qui porte le nom du lieu et le bonjour, et le relevé au pixel les
   donnait déjà tout juste au plancher (3,94:1 pour le titre, 4,43:1 pour
   le bonjour). On ne prend pas un point de lisibilité pour gagner un
   point de couleur — on prend ce que le haut de l'image donnait pour
   rien. */
.ref-heros::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,14,.28) 0%,rgba(20,17,14,.06) 20%,
                                    rgba(20,17,14,.12) 34%,rgba(20,17,14,.34) 50%,
                                    rgba(20,17,14,.60) 70%,rgba(20,17,14,.92) 100%);
}
.ref-heros > *{position:relative;z-index:1}

.ref-heros-h{display:flex;align-items:center;justify-content:space-between;
  padding:calc(30px + env(safe-area-inset-top,0px)) 22px 0}
/* LE LOGO PORTE LA COULEUR DU JOUR ─────────────────────────────────────
   Charlotte : « le logo va faire la même chose, il changera de couleur
   avec la couleur de l'app — donc là il doit être orange ».

   L'idée est juste, et c'est la meilleure place pour cette couleur :
   jusqu'ici la dérive saisonnière ne touchait que des boutons — des
   choses fonctionnelles. Sur le nom de la maison, elle devient une
   signature.

   MAIS PAS SUR LA PHOTO, ET C'EST MESURÉ. L'accent posé sur la photo de
   l'Accueil donne 1,05:1. Ce n'est pas « peu lisible », c'est INVISIBLE :
   #DF663F a exactement la clarté du ciel voilé. Doubler le voile
   (essayé, .28 → .46) n'a rendu que 1,08:1 — le ciel de l'Islande est
   trop clair, et l'accent est un ton moyen : il plafonne à 4,4:1 contre
   du noir pur et 3,3:1 contre du blanc pur. Aucun fond ne le sauve ici.

   Donc : la couleur du jour partout où le logo se pose sur un fond que
   NOUS maîtrisons — le pied du profil public, la carte de partage, le
   dossier PDF, la tête de l'Atlas sur le globe sombre. Blanc sur la
   photo, où nous ne maîtrisons rien.

   Ce n'est pas une exception de confort : c'est la même règle que pour
   les voiles. Sur une image dont on ne choisit ni le cadrage ni la
   lumière, on ne promet que ce qu'on peut tenir. */
.ref-marque{font-family:var(--serif);font-size:17px;font-weight:600;
  color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(20,17,14,.5), 0 0 16px rgba(20,17,14,.38)}
/* Sur le globe de l'Atlas, le fond est à nous et il est sombre : la
   couleur du jour s'y lit, et le nom de la maison la porte. */
.atlas-globe-head .ref-marque{color:var(--accent)}
.ref-heros-m{padding:30px 22px 0}
.ref-h1{font-family:var(--serif);font-size:34px;font-weight:600;line-height:1.05;
  letter-spacing:-.035em;color:#fff;margin:0}
.ref-sous{margin-top:12px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.82);
  max-width:250px;font-weight:300}
/* Une pilule de verre posée sur la photo — le mois, la saison, un état. */
.ref-verre{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ref-rond{width:var(--b-sm);height:var(--b-sm);border-radius:50%;flex:none;padding:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;position:relative;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ref-rond svg{stroke:#fff;fill:none}

/* ── La recherche, à cheval sur le bas de la photo ─────────────────────
   Elle était une PILULE BLANCHE À OMBRE PORTÉE posée sur la photo, avec
   un rond de couleur au bout. C'est le motif le plus recopié de la
   décennie : on le trouve à l'identique sur toutes les apps de voyage du
   marché, et c'est lui qui datait le plus cet écran — un rectangle blanc
   opaque qui BOUCHE la photo qu'on vient de choisir pour son horizon.

   Elle devient du verre : le fond reste visible au travers, flouté et
   légèrement saturé, tenu par un filet clair. Le texte passe en blanc,
   comme tout ce qui est posé sur cette photo. Le rond d'accent reste —
   c'est la seule action principale de l'écran, et l'accent est fait pour
   ça.

   Le fond de la photo est déjà assombri à cet endroit par le dégradé de
   .ref-heros (rgba(20,17,14,.88) en bas) : le blanc y tient largement
   ses 4,5:1, et banc-contraste le mesure sur le rendu composé. */
.ref-cherche{
  position:absolute;left:22px;right:22px;bottom:32px;z-index:2;
  display:flex;align-items:center;gap:11px;
  border-radius:var(--r-pill);padding:8px 8px 8px 18px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
.ref-cherche > svg{stroke:rgba(255,255,255,.82);fill:none;flex:none}
/* padding:0 — le champ héritait d'un remplissage ASYMÉTRIQUE (2 px en
   haut, 12 en bas) d'une règle globale sur input : le cadre était bien
   centré, mais le TEXTE dedans se posait 10 px trop haut. « Sur l'accueil
   le texte n'est pas centré » — mesuré, corrigé. line-height:1 pour que
   la hauteur du texte soit exactement celle de sa ligne, sans demi-pixel
   hérité. */
.ref-cherche input{flex:1;min-width:0;border:0;outline:0;background:none;
  padding:0;margin:0;line-height:1;
  font-family:var(--sf);font-size:14.5px;color:var(--ink)}
.ref-cherche input::placeholder{color:var(--ph)}
/* Sur la photo, le champ est du verre : l'encre y devient blanche. Ces
   deux règles viennent APRÈS la déclaration de base ci-dessus — c'est
   elle qui pose color:var(--ink), et à spécificité égale c'est la
   dernière écrite qui gagne. */
.ref-cherche input{color:#FFFFFF}
.ref-cherche input::placeholder{color:rgba(255,255,255,.72)}
/* Le champ posé dans le flux (Recherche, Tendances) n'a pas de photo
   derrière lui : le verre y serait invisible. Il garde donc l'encre sur
   le papier — mais en planche, filet et non ombre, comme tout le reste. */
.ref-cherche.posee{
  background:var(--surface);border:1px solid var(--n-2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.ref-cherche.posee > svg{stroke:var(--sub)}
.ref-cherche.posee input{color:var(--ink)}
.ref-cherche.posee input::placeholder{color:var(--ph)}
.ref-go{width:var(--b-md);height:var(--b-md);border-radius:50%;background:var(--accent);flex:none;padding:0;
  border:none;display:flex;align-items:center;justify-content:center}
.ref-go svg{stroke:var(--accent-ink,#fff);fill:none;stroke-width:2}

/* ── La nappe ────────────────────────────────────────────────────────── */
.ref-nappe{
  position:relative;z-index:1;background:var(--bg);
  border-radius:var(--r-xl) var(--r-xl) 0 0;margin:-22px 0 0;padding:22px 0 26px;
}
/* Sans photo au-dessus, la nappe n'a pas à remonter ni à s'arrondir. */
.ref-nappe.plate{border-radius:0;margin-top:0;padding-top:20px}

.ref-tete{padding:8px 22px 0}
/* Le sur-titre : casse normale, 12,5 px. Il était à 11 px en capitales
   espacées — le geste que l'audit a relevé 51 fois, et il était inscrit
   ici, dans la grammaire de référence elle-même. */
.ref-tete .ref-sur{font-size:12.5px;font-weight:500;letter-spacing:normal;
  text-transform:none;color:var(--sub)}
.ref-tete .ref-h1{color:var(--ink);margin-top:10px;font-size:34px}
.ref-tete .ref-sous{color:var(--sub);max-width:300px}

/* Les titres de section étaient à 17 px. Dans les deux directions
   rapportées par Charlotte, ils sont nettement plus hauts que le corps —
   c'est ce qui donne le rythme d'un magazine plutôt que d'un tableau de
   bord : on voit la structure de la page avant de la lire. 20,5 px reste
   bien en dessous du titre d'écran (34 px), donc la hiérarchie tient
   toujours à trois niveaux. */
/* ── LA LÉGENDE DE PLANCHE ────────────────────────────────────────────
   « Titre à gauche, Tout voir à droite, du vide au milieu » est l'en-tête
   de section de toutes les apps de la décennie. Sur une planche d'atlas,
   la légende et sa référence sont TENUES ENSEMBLE par un filet qui court
   de l'une à l'autre : c'est ce filet qui dit qu'elles se rapportent au
   même objet, et c'est la même hairline que celle qui borde désormais
   toutes les cartes.

   Fait entièrement en CSS, sans toucher au HTML de la quinzaine
   d'endroits qui emploient .ref-entete : le trait est un ::after du
   conteneur, remis à sa place entre le titre et le lien par « order »
   (le titre reste à 0, le trait passe à 1, le lien à 2). */
.ref-entete{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:0 22px;margin-bottom:16px}
/* flex:1 1 0 avec min-width:0, et l'écart tenu par le gap du conteneur
   plutôt que par une marge : quand le titre est long (« Le choix de
   septembre » suivi de « Par Hic Sunt »), le filet se réduit jusqu'à
   disparaître au lieu de pousser le renvoi dans le titre. Une largeur
   minimale sur le trait aurait fait chevaucher deux textes — mesuré. */
.ref-entete::after{
  content:'';order:1;flex:1 1 0;min-width:0;
  height:1px;background:var(--n-2);align-self:center;
  transform:translateY(1px);
}
.ref-entete > h2{order:0;flex:0 1 auto}
.ref-entete > .ref-lien,.ref-entete > .meta{order:2;flex:none}
/* Le compteur à droite du titre n'avait AUCUNE règle dans ce contexte :
   .section-h .meta existe, .ref-entete .meta non. Il tombait donc sur la
   valeur par défaut du navigateur — 16 px / 400 — et c'est le couple que
   banc-typographie a signalé comme nouveau dès qu'un compteur est apparu
   ici. Un chiffre à côté d'un titre est une mention : la marche la plus
   discrète de l'échelle, celle que l'app emploie déjà le plus. */
.ref-entete .meta{
  font-size:var(--t-petit);font-weight:var(--t-petit-g);
  color:var(--sub);letter-spacing:normal;flex:none;
}
.ref-entete h2{font-family:var(--serif);font-size:var(--t-section);font-weight:var(--t-section-g);
  letter-spacing:-.03em;color:var(--ink);margin:0;line-height:1.15}
/* « Tout voir », « Ouvrir » : des actions, mais SECONDAIRES — la
   principale est ailleurs sur l'écran. En accent, elles lui disputaient
   le regard. En encre, elles restent lisibles et laissent l'accent à ce
   qui compte vraiment. */
.ref-lien{font-size:12.5px;color:var(--ink);font-weight:600;
  background:none;border:none;padding:0;opacity:.72}
.ref-lien:active{opacity:1}

/* ── Les tuiles photo : en rail, ou en grille ─────────────────────────── */
/* scroll-padding, sinon l'accrochage colle la première tuile au bord du
   cadre de défilement et mange les 22px de gouttière : le rail
   s'auto-défilait de 22px au chargement et la première tuile arrivait
   tronquée. Mesuré, pas supposé — scrollLeft valait 22. */
.ref-rail{display:flex;gap:12px;padding:2px 22px 6px;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-padding-left:22px;
  -webkit-overflow-scrolling:touch}
.ref-rail::-webkit-scrollbar{display:none}
/* --tuile-legende : la hauteur de la bande de papier sous l'image. Deux
   lignes — le nom et son accroche — plus l'air autour. Elle s'AJOUTE à la
   hauteur de la tuile, pour que la photo garde exactement la place
   qu'elle avait. */
/* La légende s'ajoute SOUS la photo : si on ajoutait sa hauteur à celle
   de la tuile, le rail grandirait d'autant et sa dernière ligne passerait
   sous la barre d'onglets. La photo cède donc la place — elle reste
   nettement en portrait, et elle n'est plus obscurcie par un dégradé sur
   son tiers bas, ce qui la rend en pratique plus visible qu'avant. */
.ref-rail .ref-tuile{flex:0 0 130px;height:162px;scroll-snap-align:start}

/* ── Le rail sur DEUX rangées ──────────────────────────────────────────
   Une rangée de huit tuiles n'en montrait que deux et demie, et laissait
   un tiers de l'écran d'accueil vide en dessous — l'écran paraissait
   inachevé alors que le catalogue attendait juste derrière le bord. Deux
   rangées montrent cinq destinations d'un coup, remplissent la hauteur,
   et le geste reste le même : on pousse vers la gauche pour voir la
   suite. (Le nombre de tuiles doit être PAIR, sinon la dernière colonne
   n'a qu'une case et le rail se termine sur un trou.) */
/* Les tuiles de la référence : hautes et étroites (~3:4), le nom et le
   pays posés en bas. Plus présentes que les carrées de 130 px. */
.ref-rail.hautes .ref-tuile{flex:0 0 158px;height:212px}
.ref-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:2px 22px 0}
/* 148 → 176 : la légende prend 46 px sous l'image ; à hauteur inchangée
   la photo serait tombée à 102 px pour 163 de large, soit un bandeau. */
.ref-grille .ref-tuile{height:176px}

/* ── LA PLANCHE D'ATLAS ──────────────────────────────────────────────────
   Chaque tuile était une photo dont le TIERS BAS était mangé par un
   dégradé noir. Ce dégradé n'existait pas pour la photo : il existait
   pour rendre lisible le nom posé dessus. On abîmait donc l'image — la
   seule raison qu'on a de regarder — au service d'une légende de deux
   mots.

   C'est le même raisonnement qui vient de gagner sur la barre de
   l'itinéraire, et que Charlotte a demandé sur sa story : sortir le
   décor de la photo, et la photo redevient entière.

   Une planche d'atlas n'écrit pas sur l'image : elle a une LÉGENDE,
   dessous, sur le papier. Le nom y passe en encre — bien plus lisible
   qu'un blanc sur un ciel clair — et la photo n'est plus obscurcie du
   tout.

   Fait sans toucher au HTML des cinq endroits qui construisent une
   tuile : la photo est un background, et background-clip:content-box la
   confine à la boîte de contenu. Le remplissage du bas devient donc du
   papier, et c'est là que la légende se pose. */
.ref-tuile{--tuile-legende:46px;
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background-size:cover;background-position:center;
  box-shadow:var(--sh-1);
  border:none;padding:0;text-align:left;display:block;width:100%}

/* ── LA PLANCHE : POUR LES TUILES QUI PORTENT UNE PHOTO ─────────────────
   .monde en est exclue, et ce n'est pas un détail : ces tuiles-là n'ont
   AUCUNE photo (232 pays, aucun photographié par nous). Ce sont des
   panneaux de couleur qui portent du texte blanc — un autre objet, qui
   garde sa grammaire. Sans cette exclusion, leur légende passerait en
   encre sur un dégradé sombre : illisible.

   --tuile-legende est déclaré sur .ref-tuile et non sur .ref-rail : les
   tuiles existent aussi en GRILLE (« Par envie »), où la variable aurait
   été indéfinie, le remplissage nul, et la légende en encre serait
   retombée sur la photo. Mesuré avant de livrer. */
.ref-tuile:not(.monde){
  background-origin:content-box;background-clip:content-box;
  background-color:var(--surface);
  padding-bottom:var(--tuile-legende);
}
/* Le filet entre l'image et sa légende : c'est lui qui dit « ceci est le
   bord de la planche », et il évite qu'une photo très claire se fonde
   dans le papier. */
.ref-tuile:not(.monde)::after{content:'';position:absolute;left:0;right:0;
  bottom:var(--tuile-legende);height:1px;background:var(--n-2)}
.ref-tuile:not(.monde) .ref-tuile-m{position:absolute;left:11px;right:11px;
  bottom:0;height:var(--tuile-legende);z-index:1;
  display:flex;flex-direction:column;justify-content:center}
.ref-tuile:not(.monde) .ref-n{display:block;font-family:var(--serif);font-size:15px;font-weight:600;
  color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.ref-tuile:not(.monde) .ref-p{display:block;font-size:11.5px;color:var(--sub);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Les tuiles « monde » gardent le dégradé et le texte posé sur l'image :
   c'est la forme d'avant, conservée telle quelle pour elles seules. */
.ref-tuile.monde::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,14,0) 46%,rgba(20,17,14,.76) 100%)}
.ref-tuile.monde .ref-tuile-m{display:block;position:absolute;left:12px;right:12px;bottom:11px;z-index:1}
.ref-tuile.monde .ref-n{display:block;font-family:var(--serif);font-size:15px;font-weight:600;
  color:#fff;line-height:1.05;letter-spacing:-.02em}
.ref-tuile.monde .ref-p{display:block;font-size:11.5px;color:rgba(255,255,255,.76);margin-top:2px}
/* Le badge d'un coin de tuile : « idéal », « fin de saison ». */
/* Les accroches de saison font jusqu'à trois mots (« Dernier mois
   idéal ») et une tuile fait 130px : sur une seule ligne le badge se
   coupait en « DERNIER MOIS… ». On le laisse tenir sur deux lignes
   plutôt que d'amputer l'information. */
/* 9,5 px en capitales espacées : le même ornement que l'app a perdu
   partout ailleurs. « Dernier mois idéal » y passait sur DEUX lignes et
   couvrait un tiers de la photo pour dire quatre mots. Écrit normalement,
   il tient sur une ligne et se lit d'un coup d'œil. */
.ref-badge{position:absolute;top:10px;left:10px;max-width:calc(100% - 20px);z-index:1;
  padding:5px 10px;border-radius:var(--r-pill);line-height:1.25;
  background:rgba(20,17,14,.72);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:0;text-transform:none}
/* ── L'accent marque ce sur quoi on AGIT, pas ce qui informe ─────────────
   Charlotte : « Globalement l'app fait vieillotte. » Une des causes se
   compte : sur l'accueil, l'orange paraissait dix fois — deux badges de
   saison, « Tout voir », « Ouvrir », la flèche de recherche, la barre
   d'onglets, les pilules d'étapes. Un accent qui paraît dix fois par écran
   ne hiérarchise plus rien : il devient un fond.

   La règle, désormais : l'accent marque ce sur quoi on agit. Un badge de
   saison est une INFORMATION — il n'est cliquable nulle part. Il passe
   donc au verre sombre, comme son voisin « encore 2 mois », et l'urgence
   reste là où elle a toujours été : dans les mots « Fin de la saison ». */
.ref-badge.fort{background:rgba(20,17,14,.72); color:#fff; font-weight:600}
/* « En saison encore 2 mois » : une bonne nouvelle, pas une urgence. Le
   fond sombre translucide de base la dit sans crier — l'accent plein est
   réservé aux fenêtres qui s'ouvrent ou se ferment. Sans ce badge, le
   Kenya était la seule tuile nue d'un rail trié par saison, ce qui se
   lisait comme un oubli plutôt que comme une nuance. */
.ref-badge.tiede{background:rgba(20,17,14,.66);color:#fff;font-weight:500}

/* ── La ligne : vignette, méta, chiffre ──────────────────────────────── */
.ref-ligne{display:flex;align-items:center;gap:13px;margin:0 22px;width:calc(100% - 44px);
  background:var(--surface);border-radius:var(--r-md);padding:var(--p-sm);
  box-shadow:var(--shadow-raised);border:none;text-align:left}
.ref-ligne + .ref-ligne{margin-top:9px}
.ref-ligne .ref-vign{width:62px;height:62px;border-radius:var(--r-sm);flex:none;
  background-size:cover;background-position:center}
.ref-ligne .ref-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ref-ligne .ref-t{display:block;font-family:var(--serif);font-size:15px;font-weight:600;
  letter-spacing:-.025em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-ligne .ref-s{display:block;font-size:11.5px;color:var(--sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-ligne .ref-chiffre{flex:none;text-align:right;font-family:var(--serif);font-size:15px;
  font-weight:700;letter-spacing:-.02em;color:var(--accent-texte,var(--accent))}
.ref-ligne .ref-chiffre span{display:block;font-family:var(--sf);font-size:10px;
  font-weight:500;color:var(--sub);margin-top:1px}

/* ── Les pilules de filtre ───────────────────────────────────────────── */
.ref-pilules{display:flex;gap:9px;padding:0 22px;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.ref-pilules::-webkit-scrollbar{display:none}
.ref-pilule{flex:none;height:var(--b-sm);padding:0 var(--b-sm-x);border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line);font-family:var(--sf);font-size:13px;font-weight:500;
  color:var(--sub);white-space:nowrap}
/* Même règle : la pilule active de Tendances dit une position, pas une
   action. Encre, comme .pf-filtre.on et .exp-etape-b.on. */
.ref-pilule.on{background:var(--ink);border-color:transparent;
  color:var(--paper);font-weight:600}

/* Le héros et la nappe vont d'un bord à l'autre. L'écran qui les porte
   ne pose donc AUCUNE gouttière — ce sont les blocs internes qui ont la
   leur (22px). Poser .px ici décalerait tout l'écran vers la droite et
   ferait dépasser le héros du cadre. */
.ref-ecran{padding-left:0;padding-right:0;padding-top:0}
.tabview[data-tab="discover"] .ref-ecran{padding-bottom:0}
/* La nappe touche le bas de l'écran — c'est voulu, l'ivoire ne doit pas
   s'arrêter au-dessus de la barre. Mais son CONTENU passait dessous :
   six lignes du rail des destinations étaient recouvertes par la barre
   d'onglets, mesurées sur la capture. La réserve se pose donc sur la
   nappe, pas sur l'écran. */
.tabview[data-tab="discover"] .ref-ecran > .ref-nappe{
  padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));
}

/* ── Le tableau de bord sous la nouvelle ouverture ───────────────────────
   _inTripDashboard() porte son PROPRE en-tête photo, avec le nom du
   voyage et le compte à rebours. C'était juste quand il ouvrait l'écran ;
   sous le héros de la référence, il répétait la même photo et le même
   titre à trente pixels d'écart. On masque donc son en-tête ici, et lui
   seul : le corps (programme du jour, hébergement, demain) est
   exactement ce qu'on veut voir sous la photo, et il ne bouge pas. */
.ref-nappe .tb-head{display:none}
/* .trip-board, et non .tb-card : le tableau de bord n'a jamais porté ce
   nom-là. Ses deux voisines (.tb-head, .tb-body) visaient juste, celle-ci
   non — un correctif débranché depuis le jour où il a été écrit. */
.ref-nappe .trip-board{margin-top:0}
.ref-nappe .tb-body{padding-top:2px}

/* ── La mise en avant, en bas de l'ouverture photo ───────────────────────
   Tendances ouvre sur la destination que la saison porte : son nom et
   son accroche se posent sur la photo, avec le rond d'action à droite.
   C'est un bouton entier, pas un libellé plus un rond — la cible tactile
   fait toute la largeur. */
.ref-mise{position:absolute;left:22px;right:22px;bottom:30px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  background:none;border:none;padding:0;text-align:left}
.ref-mise-q{flex:1;min-width:0;font-size:12.5px;color:rgba(255,255,255,.84);font-weight:500}
.ref-mise-q b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;
  color:#fff;letter-spacing:-.025em;margin-bottom:3px}
.ref-mise .ref-go{width:46px;height:46px;box-shadow:var(--sh-2)}

/* La grille de destinations reprend l'animation d'arrivée de l'ancienne
   (tuile par tuile au défilement) : hsRevelerTuiles cherche
   « .dest-grid > .tile », d'où la classe .tile gardée sur les tuiles. */
.ref-grille.dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:2px 22px 0}

/* ── L'écran sans photo ──────────────────────────────────────────────────
   Créer ouvre sur un en-tête clair, pas sur une image : c'est l'écran où
   l'on écrit, et une photo derrière un champ tire l'œil au mauvais
   endroit. Les blocs qui suivent gardent la gouttière de 22px du reste
   de la grammaire. */
.ref-cadre{padding:0 22px;margin-top:22px}
.ref-cadre .deck-prog{margin-top:16px}

/* ── Les cases de verre, posées sur une photo ou un globe ────────────────
   Trois cases translucides : le carnet de voyage se lit d'un coup d'œil
   sans quitter le globe. Le flou d'arrière-plan les décolle de l'image
   sans les transformer en cartes opaques.

   Elles s'appelaient .ref-chiffre — le même nom que le montant à droite
   d'une .ref-ligne. Les deux se sont mélangés : « au total » sous le prix
   du prochain voyage est parti en CAPITALES espacées, et la ligne de méta
   s'est retrouvée tronquée faute de place. Deux objets différents, deux
   noms différents. */
.ref-stats{display:flex;gap:10px;padding:0 22px}
.ref-stat{flex:1;min-width:0;border-radius:var(--r-md);padding:13px 14px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ref-stat b{display:block;font-family:var(--serif);font-size:27px;font-weight:600;
  letter-spacing:-.04em;color:#fff}
.ref-stat span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:3px}

/* ── L'Atlas : l'en-tête se pose sur le globe ────────────────────────────
   .atlas-globe-head porte déjà sa propre marge haute (6px + encoche).
   .ref-heros-h en ajoutait 52 par-dessus : tout l'en-tête descendait d'un
   demi-pouce et « Votre monde » tombait pile sur l'attribution Mapbox,
   qui est positionnée à 120px du haut. Le logo devenait illisible — et
   ce n'est pas qu'un défaut d'allure : les conditions d'utilisation de
   Mapbox imposent qu'il reste visible. */
.atlas-globe-head .ref-heros-h{padding:0}
.atlas-globe-head .ref-heros-m{padding-left:0;padding-right:0}
/* Le halo noir que portaient .atlas-title et .atlas-counter : sans lui,
   du blanc sur un océan clair ou une calotte polaire devient illisible. */
.atlas-globe-head .ref-marque,
.atlas-globe-head .ref-h1{
  text-shadow:0 1px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.7);
}
.atlas-globe-head .ref-rond{pointer-events:all}

/* Sur l'Atlas les chiffres suivent le titre, dans le flux. Un premier
   essai les collait en bas de .atlas-globe-head avec position:absolute —
   mais cet en-tête ne fait que quelques centaines de pixels, pas la
   hauteur de l'écran : les trois cases se posaient EN PLEIN SUR le
   titre. Le globe reste entièrement visible en dessous. */
.atlas-globe-head .ref-stats{margin-top:16px}

/* ── L'en-tête clair avec ses actions ────────────────────────────────────
   Communauté ouvre sans photo : le fil EST fait de photos, en poser une
   de plus au-dessus ferait deux images qui se disputent l'écran. Le
   sur-titre et les deux ronds partagent donc la première ligne. */
.ref-tete-h{display:flex;align-items:center;justify-content:space-between;min-height:34px}
.ref-tete-h .ref-sur{line-height:1}

/* Le sélecteur des trois volets, dans la géométrie de la grammaire. */
.ref-seg{margin:20px 22px 0}

/* Les volets reprennent la gouttière que .px portait sur tout l'écran. */
.ref-volet{padding:0 22px}

/* ── L'ÉCRAN ITINÉRAIRE ──────────────────────────────────────────────────
   Charlotte : « le haut avec la photo de la destination, j'aime pas du
   tout, ça fait cheap et old school ». Ce qui le faisait, corrigé ici.

   Le voile d'abord. La photo était noircie DÈS LE HAUT pour faire tenir
   deux boutons : la plus belle partie de l'image était éteinte avant
   d'avoir servi. Elle ne s'assombrit plus qu'au tiers bas, là où le titre
   se pose ; un halo court en haut suffit à décoller la barre d'actions. */
.itn-hero-photo.dd-hero{min-height:430px}
.itn-hero-photo.dd-hero::after{
  /* Le titre ressortait à 14,7:1 sur ce voile ; le plancher d'un gros
     titre est 3:1. On rend la moitié du voile à la photo et il reste
     plus du double de la marge nécessaire. */
  background:linear-gradient(180deg,rgba(20,17,14,.24) 0%,rgba(20,17,14,0) 20%,
                                    rgba(20,17,14,0) 48%,rgba(20,17,14,.38) 76%,
                                    rgba(20,17,14,.70) 100%);
}
/* Le titre se pose, il ne cogne pas : 30px et non 38, en graisse moyenne. */
.itn-hero-photo .itn-title{font-size:27px;letter-spacing:-.035em;line-height:1.08}

/* Deux lignes de méta, avec de petites icônes — au lieu d'un sur-titre en
   capitales espacées souligné d'un filet, puis des dates encore en
   capitales espacées. Trois registres empilés en quatre lignes, c'était
   ça le « old school ». */
.itn-m1{display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap}
.itn-m1 span{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;
  color:rgba(255,255,255,.88);font-weight:500}
.itn-m1 svg{stroke:rgba(255,255,255,.75);fill:none;flex:none}
.itn-m2{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:13px;
  color:rgba(255,255,255,.8)}
.itn-m2 svg{fill:#fff;stroke:none;flex:none}

/* Les faits : le LIBELLÉ mène, la valeur suit en gris. Un gros chiffre
   fait tableau de bord, un libellé fait fiche de voyage. Aucune colonne
   n'est mise en avant — l'ancienne version posait le budget en aplat de
   couleur, si bien qu'il criait plus fort que le voyage. */
/* La bande était en --surface2 : un pavé gris posé sur la nappe ivoire,
   elle-même posée sur le fond — trois neutres à deux points d'écart, ce
   qui fait de la boue. C'est une carte, comme toutes les autres cartes
   de l'app : blanche, sur l'ivoire. */
/* ── LES FAITS : UNE LIGNE, PLUS UN BANDEAU ───────────────────────────
   Charlotte, sur la version précédente : « c'est encore plus brouillon ».
   Elle avait raison, et voici pourquoi.

   J'avais corrigé l'alignement — l'icône se calait 43 px à gauche de
   l'axe de son propre libellé — mais j'avais gardé le BANDEAU. Résultat :
   six à huit blocs de texte posés dans une boîte blanche, sans rien qui
   les sépare, en deux corps et deux gris. L'œil ne sait pas où un fait
   finit et où le suivant commence ; corriger l'alignement n'a fait que
   les rapprocher. Et l'écriture bégayait : « 7 étapes » surmontant le mot
   « Étapes ».

   Le vrai défaut était en amont : ces quatre à huit informations ne
   valent pas un module. Aucune des deux directions rapportées par
   Charlotte n'a de fiche technique — elles écrivent leurs chiffres dans
   le fil du texte, et c'est pour ça qu'elles respirent.

   Donc : plus de carte, plus de colonnes, plus d'étiquettes. Une ligne,
   où chaque fait se dit lui-même — « env. 13 h de vol » n'a pas besoin
   qu'on écrive « Vol direct » au-dessus. Le chiffre est à l'encre, ce qui
   l'entoure est gris : on lit les valeurs en diagonale et la phrase en
   entier si on veut. Un point médian sépare, à la couleur des filets.

   C'est la seule forme qui ne pose aucun axe à tenir : il n'y en a qu'un,
   la ligne de base. */
.itn-faits{
  display:flex;flex-wrap:wrap;align-items:baseline;
  margin:14px 0 0;padding:0;
  background:none;box-shadow:none;border-radius:0;
  font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--sub);
  text-align:left;
}
.itn-fait{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.itn-fait + .itn-fait::before{
  content:'\00B7';margin:0 9px;color:var(--line2);font-weight:700;
}
.itn-fait b{font-weight:600;color:var(--ink);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.itn-fait span{font-weight:400;color:var(--sub)}

/* Le paragraphe qui manquait : l'écran n'avait que des chiffres et des
   listes. C'est ce texte qui donne envie de lire la suite. */
.itn-apropos{margin-top:28px}
.itn-apropos h2{font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.itn-apropos p{font-size:14px;line-height:1.62;color:var(--sub);margin-top:10px}

/* Le prix du pied prend la couleur du jour : c'est le seul chiffre de
   l'écran qui a le droit de se voir. */
.ov-foot .foot-price .fp-v{color:var(--accent-texte,var(--accent))}

/* ── Budget : sortir des capitales espacées de 9 px ────────────────────
   Trois registres de « petites capitales espacées » se superposaient sur
   le même écran : le libellé de la carte sombre, le libellé de section
   (« ESTIMATION »), et la ligne de détail de CHAQUE dépense. Cette
   dernière est la plus coûteuse — « ACTIVITÉS · 15/06 · PAYÉ PAR MOI ·
   ALGHERO » en 9 px passait à la ligne, et une date en capitales
   espacées ne se lit pas plus vite qu'une date écrite normalement.
   La référence apportée par Charlotte n'écrit en capitales que les
   étiquettes d'onglet — jamais du contenu. */
.bline .bl-s{
  font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--sub);line-height:1.45;margin-top:3px;
}
/* Et le total de section (« 1 367,50 € ») est un CHIFFRE, pas une
   étiquette : il était rendu dans la même graisse de 9 px que le mot
   « ESTIMATION » juste à côté. */
.section-h .meta{
  font-family:inherit;font-size:12.5px;letter-spacing:0;text-transform:none;
  font-weight:500;color:var(--sub);font-variant-numeric:tabular-nums;
}
.bud-card .bud-l{
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;
  text-transform:none;
}

/* Le total ne s'affiche qu'UNE fois ────────────────────────────────────
   L'onglet Budget ouvre sur « 2 400 € » en 46 px dans la carte sombre,
   pendant que le pied de page répète « 2 400 € · tout compris » à trois
   centimètres en dessous. Sur cet onglet, le pied ne garde que le chat.
   (Sur Itinéraire et Carte, le prix reste : c'est là qu'il informe.) */
.ov-foot.sans-prix .foot-price{justify-content:flex-end}
.ov-foot.sans-prix .foot-price > div:first-child{display:none}

/* ── Le volet « Vous » : clair, sobre, dense ───────────────────────────
   « On devait refaire le profil, il n'a pas changé d'un poil. » Ce qui
   suit remplace la bannière sombre photographique, les trois grosses
   tuiles de chiffres, les pilules encadrées et les cartes-photo de
   230 px. Le vocabulaire vient de la maquette validée (maquettes/
   j-profil.html), transposé aux classes de l'app. */
.pf-moi{display:flex;align-items:center;gap:15px;padding:24px 22px 0}
.pf-moi-n{font-family:var(--serif);font-size:21px;font-weight:600;
  letter-spacing:-.03em;line-height:1.1;margin:0;color:var(--ink)}
.pf-moi-s{font-size:12.5px;color:var(--sub);margin:5px 0 0}
/* L'avatar reprend la taille de la maquette et perd le liseré sombre de
   sa pastille « visible à proximité », qui était calé sur le fond de la
   bannière disparue. */
.pf-moi .pf-ava{width:68px !important;height:68px !important}
/* (Le liseré de la pastille « à proximité » est posé en jeton par le JS
   depuis screens-main.js — plus rien à rattraper ici.) */

/* Les chiffres tiennent sur une ligne : valeur et libellé côte à côte,
   séparés par un filet — pas trois tuiles empilées. */
.pf-chiffres{display:flex;align-items:center;gap:0;margin:18px 22px 0;
  padding:14px 4px;background:var(--surface,#fff);border-radius:var(--r-md);
  box-shadow:var(--sh-1)}
.pf-chiffres .prof-stat{flex:1;display:flex;align-items:baseline;
  justify-content:center;gap:6px;position:relative;text-align:left;padding:0}
.pf-chiffres .prof-stat+.prof-stat::before{content:'';position:absolute;left:0;
  top:50%;transform:translateY(-50%);width:1px;height:18px;background:rgba(20,17,14,.09)}
.pf-chiffres .ps-v{font-family:var(--serif);font-size:17px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin:0}
.pf-chiffres .ps-l{font-size:12px;color:var(--sub);text-transform:lowercase;
  letter-spacing:0;font-family:inherit;margin:0}

/* Même légende de planche que .ref-entete : le filet court du titre à
   son renvoi. Deux en-têtes de section qui se ressemblent doivent se
   ressembler tout à fait. */
.pf-entete{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:0 22px;margin:26px 0 10px}
.pf-entete::after{
  content:'';order:1;flex:1 1 0;min-width:0;
  height:1px;background:var(--n-2);align-self:center;
  transform:translateY(1px);
}
.pf-entete > h2{order:0;flex:0 1 auto}
.pf-entete > *:not(h2){order:2;flex:none}
/* Même rôle que .ref-entete h2 : même marche. */
.pf-entete h2{font-family:var(--serif);font-size:var(--t-section);font-weight:var(--t-section-g);
  letter-spacing:-.03em;color:var(--ink)}

/* Les filtres sont du TEXTE, une seule pilule pleine pour l'actif. */
.pf-filtres{display:flex;align-items:center;gap:20px;padding:0 22px;margin-bottom:10px}
.pf-filtre{background:none;border:0;padding:0;font-size:13.5px;font-weight:500;
  color:var(--sub);white-space:nowrap;cursor:pointer;font-family:inherit}
/* La pilule reste — ici on choisit bien une VALEUR, pas une destination
   dans l'app — mais elle passe en encre. Un filtre sélectionné n'est pas
   une action à faire : c'est l'état où l'on se trouve. L'accent, lui,
   reste disponible pour la seule chose sur laquelle on agit vraiment sur
   cet écran. Encre pleine sur papier ivoire : on ne peut pas la rater,
   et elle ne dispute rien à personne. */
.pf-filtre.on{background:var(--ink);color:var(--paper);font-weight:600;
  padding:8px 16px;border-radius:var(--r-pill);margin-left:-4px}

/* Une rangée par voyage. */
.pf-rangee{display:flex;align-items:center;gap:13px;margin:0 22px;padding:11px 0;
  cursor:pointer}
.pf-rangee+.pf-rangee{border-top:1px solid rgba(10,15,12,.07)}
.rg-v{width:76px;height:76px;border-radius:var(--r-md);flex:none;
  background-size:cover;background-position:center}
.rg-m{flex:1;min-width:0}
.rg-t{display:block;font-family:var(--serif);font-size:15.5px;font-weight:600;
  letter-spacing:-.025em;color:var(--ink)}
.rg-s{display:block;font-size:12px;color:var(--sub);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-p{display:block;font-family:var(--serif);font-size:15px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin-top:6px}
.rg-e{flex:none;text-align:right;font-size:11.5px;font-weight:600;color:var(--sub)}
.rg-e.proche{color:var(--accent-texte,var(--accent))}

/* Les portes du bas. */
.pf-porte{display:flex;align-items:center;gap:13px;margin:0 22px;padding:15px 16px;
  background:var(--surface,#fff);border-radius:var(--r-md);border:1px solid rgba(10,15,12,.06);
  box-shadow:var(--sh-1);cursor:pointer}
.pf-porte+.pf-porte{margin-top:9px}
/* Même correction que dans les Réglages : la gommette d'accent pâle
   avec l'icône orange dedans DÉCORAIT deux portes qui ne sont pas des
   actions principales. L'icône reste, dans l'encre, posée dans la marge
   comme un signe de renvoi. */
.pf-porte-ic{width:24px;height:24px;border-radius:0;flex:none;display:flex;
  align-items:center;justify-content:center;background:none}
.pf-porte-ic svg{stroke:var(--ink-faint);fill:none}
.pf-porte-t{flex:1;font-family:var(--serif);font-size:14.5px;font-weight:600;color:var(--ink)}
.pf-porte-c{flex:none;display:flex;color:var(--sub);opacity:.6}

/* Le fil : l'étiquette de la route ─────────────────────────────────────
   « CE QUE VOUS EMPORTEZ » en capitales espacées de 11 px au-dessus des
   étapes. C'est le dernier sur-titre de ce genre sur un fond clair —
   partout ailleurs il a laissé place à un libellé qui se lit. */
.tr-sq-t{
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--sub);
}

/* ── L'Accueil sans photo ──────────────────────────────────────────────
   La marque, la salutation, la question, le champ. Les trois pièces
   existaient déjà (.ref-tete, .ref-rond, .ref-cherche) mais toutes les
   trois étaient calées pour vivre SUR une photo : texte blanc, verre
   dépoli, position absolue au-dessus du bas de l'image. Il leur fallait
   une variante posée sur le fond clair. */
.ref-salut{margin-top:20px;font-size:14px;color:var(--sub)}
.ref-tete .ref-salut + .ref-h1{margin-top:4px}
/* La salutation sur la photo : du texte, pas une pilule de verre en
   capitales espacées — la référence n'écrit jamais son contenu en
   capitales. */
.ref-salut-photo{margin:0;font-size:13.5px;color:rgba(255,255,255,.85);
  text-shadow:0 1px 6px rgba(10,15,12,.5)}

/* Le rond des actions : blanc bordé, encre sombre — la même pastille que
   les autres onglets clairs, au lieu du verre dépoli sur photo. */
.ref-rond.clair{
  background:var(--surface);border:1px solid rgba(10,15,12,.10);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.ref-rond.clair svg{stroke:var(--ink)}

/* Le champ : posé dans le flux au lieu d'être à cheval sur le bas de la
   photo. Il garde sa forme et son ombre — c'est le geste principal de
   l'écran, il a le droit de se détacher du fond. */
.ref-cherche.posee{
  position:static;margin:18px 22px 0;
  box-shadow:none;
}

/* ── La vedette de Tendances ───────────────────────────────────────────
   La grande carte photo du deuxième téléphone de la référence : une
   seule destination mise en avant, le badge qui dit pourquoi (la saison,
   jamais un « Recommandé » sans raison), le nom et l'accroche posés en
   bas. Cliquable en entier. */
.ref-vedette{position:relative;display:block;width:calc(100% - 44px);margin:6px 22px 0;
  height:240px;border-radius:var(--r-lg);overflow:hidden;border:none;padding:0;text-align:left;
  background-size:cover;background-position:center;
  box-shadow:var(--sh-3)}
.ref-vedette::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,14,0) 40%,rgba(20,17,14,.88) 100%)}
.ref-vedette .ref-badge{top:14px;left:14px}
.ref-vedette-m{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:block}
.ref-vedette-n{display:block;font-family:var(--serif);font-size:21px;font-weight:600;
  letter-spacing:-.03em;color:#fff;line-height:1.05}
.ref-vedette-s{display:block;font-size:12px;color:rgba(255,255,255,.8);margin-top:4px}

/* Les rangées du catalogue se suivent : la première n'a pas à porter la
   marge de séparation. */
[data-trend-grid] .ref-ligne + .ref-ligne{margin-top:9px}

/* ── Accueil : la photo absorbe la hauteur, pas le blanc ───────────────
   Sur un grand iPhone, le héros fait ses 398 px, la nappe pose le voyage
   et une rangée de tuiles — et tout ce que l'écran a de plus haut
   devenait un rectangle BLANC sous les destinations (capture de
   Charlotte, build 83). La référence fait l'inverse : c'est la photo qui
   grandit avec l'écran, la nappe reste posée en bas. L'écran devient une
   colonne : le héros prend le mou, la nappe garde sa hauteur naturelle. */
/* + la hauteur de l'encoche : le héros remonte dessous par marge
   négative, sans elle la colonne aurait laissé en bas exactement la
   bande qu'il gagne en haut. */
.tabview[data-tab="discover"] .disc-head.ref-ecran{
  min-height:calc(100% + env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;
}
.disc-head.ref-ecran .ref-heros{
  height:auto;flex:1 0 auto;
  min-height:calc(398px + env(safe-area-inset-top,0px));
  /* Le bloc de texte descend au BAS de la photo ─────────────────────
     « Cette page quand on l'ouvre ne fait pas d'effet wow. » Le titre
     était calé en haut, le champ de recherche tout en bas, et entre les
     deux un tiers d'écran de photo sans rien — d'autant plus grand que
     l'iPhone est grand, puisque c'est le héros qui absorbe la hauteur.
     Ce n'était pas une composition, c'était un étirement.

     La référence ancre son titre en BAS de l'image, juste au-dessus du
     champ : les trois éléments forment un bloc serré, et l'espace libre
     part en haut, dans le ciel de la photo — là où il est une
     respiration et non un trou. */
  display:flex;flex-direction:column;
}
.disc-head.ref-ecran .ref-heros-m{
  margin-top:auto;
  /* Dégagement du champ, qui est posé en absolu à 32px du bas. */
  padding-bottom:104px;
}
/* Un titre d'ouverture doit avoir l'échelle d'une couverture. 34px se
   lisait comme un titre de section sur un écran de 430pt de large. */
.disc-head.ref-ecran .ref-h1{font-size:44px;letter-spacing:-.04em}
.disc-head.ref-ecran .ref-sous{max-width:290px;margin-top:14px}
.disc-head.ref-ecran .ref-heros.court{min-height:calc(340px + env(safe-area-inset-top,0px))}
.disc-head.ref-ecran .ref-nappe{flex:none}

/* ── La carte d'identité du carnet ─────────────────────────────────────
   Une carte BLANCHE qui compose tout : l'avatar porte la couleur, les
   chiffres se lisent en encre sur un filet, les deux portes sont ses
   dernières rangées avec leur pastille teintée. (La version « carte de
   nuit » a vécu un build : un aplat brun profond posé nu sur l'ivoire
   plaquait l'écran — ce fond-là ne tient que sous une photo ou dans le
   PDF. Retour de Charlotte : « un gros pavé noir qui dénote ».) */
.pf-carte{
  margin:20px 22px 0;padding:20px 18px 4px;border-radius:var(--r-lg);
  background:var(--surface,#fff);border:1px solid rgba(10,15,12,.06);
  box-shadow:var(--sh-2);
}
/* Le liseré vient maintenant du JS, en jeton (var(--surface)) : plus
   besoin de l'annuler ici. Le !important rattrapait un #10241F en dur —
   le vert nuit de l'ancienne charte — posé sur une carte BLANCHE. Deux
   implémentations de la même idée, dont une contredisait l'autre. */
.pf-carte .pf-chiffres{
  margin:18px 0 2px;padding:14px 0;background:none;box-shadow:none;
  border-top:1px solid rgba(10,15,12,.08);border-radius:0;
}
.pf-carte-porte{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 2px;
  background:none;border:0;border-top:1px solid rgba(10,15,12,.08);
  color:var(--ink);font-family:var(--serif);font-size:14px;font-weight:600;
  text-align:left;cursor:pointer;
}
.pf-carte-porte .pf-porte-ic{width:24px;height:24px}
.pf-carte-porte > span:not(.pf-porte-ic){flex:1;min-width:0}
.pf-carte-porte > svg:last-child{stroke:var(--sub);opacity:.55;flex:none}
/* La rangée « Vos amis » porte deux choses de plus que les autres : le
   compte, et la pastille des demandes reçues. Sans ces deux lignes, la
   règle ci-dessus leur donnait flex:1 à chacune — trois tiers, et le
   libellé qui rétrécissait à mesure qu'on avait des amis. */
.pf-carte-porte > .pf-porte-m,
.pf-carte-porte > [data-amis-pastille]{flex:none}
.pf-porte-m{font-family:var(--sans);font-size:12.5px;font-weight:500;
  color:var(--sub);letter-spacing:.01em}
.pf-carte .pf-login-b{width:100%}

/* ═══ LA VIE ═══════════════════════════════════════════════════════════
   « Je veux une app vivante, moderne, et surtout un effet WOW quand on
   l'ouvre. » Trois systèmes, et une règle : tout ce qui bouge respecte
   prefers-reduced-motion (le coupe-circuit global de core.css met déjà
   toutes les animations à 0,01 ms quand la personne l'a demandé).

   1 · La photo RESPIRE. Le héros zoome imperceptiblement, 22 secondes
       par aller, comme la fiche destination (.dd-hero). Une photo
       immobile est un décor ; une photo qui respire est un lieu.
   2 · L'écran se COMPOSE À L'OUVERTURE. La marque, la salutation, le
       titre, le champ puis la nappe montent en cascade — 700 ms en
       tout, rejouée à chaque retour sur l'onglet. C'est l'effet
       d'ouverture : l'app se présente au lieu d'apparaître.
   3 · Tout ce qui se touche RÉPOND. Cartes, tuiles, portes, pilules :
       légère pression au doigt (scale .97), et un retour haptique sur
       chaque changement d'onglet ou de volet (voir setTab). */
@media (prefers-reduced-motion: no-preference){

  /* ── 1 · la photo qui respire ── */
  .ref-heros{overflow:hidden}
  .ref-heros::before{
    content:'';position:absolute;inset:0;background:inherit;
    animation:refKen 22s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes refKen{from{transform:scale(1)}to{transform:scale(1.09)}}

  /* ── 2 · la cascade d'ouverture ── */
  @keyframes refMonte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes refNappe{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
  .tabview.active .ref-heros-h,
  .tabview.active .ref-tete-h{animation:refMonte .5s .04s cubic-bezier(.22,.68,.2,1) both}
  .tabview.active .ref-salut-photo,
  .tabview.active .ref-salut{animation:refMonte .5s .11s cubic-bezier(.22,.68,.2,1) both}
  .tabview.active .ref-h1{animation:refMonte .55s .17s cubic-bezier(.22,.68,.2,1) both}
  .tabview.active .ref-sous{animation:refMonte .55s .24s cubic-bezier(.22,.68,.2,1) both}
  .tabview.active .ref-cherche{animation:refMonte .55s .3s cubic-bezier(.22,.68,.2,1) both}
  .tabview.active .ref-pilules{animation:refMonte .5s .18s cubic-bezier(.22,.68,.2,1) both}
  .tabview.active .ref-vedette{animation:refMonte .55s .26s cubic-bezier(.22,.68,.2,1) both}
  .tabview.active .ref-seg{animation:refMonte .5s .14s cubic-bezier(.22,.68,.2,1) both}
  .tabview.active .pf-carte{animation:refMonte .55s .2s cubic-bezier(.22,.68,.2,1) both}
  /* ── LES DEUX ONGLETS QUI ARRIVAIENT SANS RIEN ───────────────────────
     L'accueil et Tendances montent depuis longtemps, élément par élément.
     Créer et Communauté, eux, se remplaçaient d'un coup — et ce sont deux
     des cinq onglets que l'on touche en permanence. Un contenu qui
     apparaît sans venir de nulle part est ce qui distingue une app d'un
     site : c'est le défaut de mouvement le plus fréquent de l'app, parce
     qu'il se produit à chaque changement d'onglet.

     Un seul bloc qui monte, pas une cascade : ces deux écrans n'ont pas
     la structure éditoriale de l'accueil, et les échelonner ferait du
     mouvement pour du mouvement.

     0,42 s sans délai. Court exprès : tous les bancs attendent au moins
     700 ms après un changement d'onglet avant de mesurer, et une
     animation « both » tient l'opacité à zéro pendant qu'elle court —
     une entrée trop longue rendrait l'écran invisible à ses propres
     contrôles.

     La barre d'état est exclue : c'est la chrome du système, elle ne
     bouge jamais. L'Atlas aussi — c'est un globe vivant, l'animer se
     battrait avec sa propre rotation. */
  .tabview.active > .deck-head,
  .tabview.active > .pf{
    animation:refMonte .42s cubic-bezier(.22,.68,.2,1) both;
  }

  .tabview.active .ref-nappe{animation:refNappe .6s .18s cubic-bezier(.22,.68,.2,1) both}
  /* La nappe plate (Tendances) n'a pas de photo à quitter : elle monte
     moins, plus tôt. */
  .tabview.active .ref-nappe.plate{animation:refMonte .55s .22s cubic-bezier(.22,.68,.2,1) both}

  /* ── 3 · la matière qui répond ───────────────────────────────────────
     Ce qui distingue une app qu'on trouve « moderne » d'une app qu'on
     trouve « vieillotte » tient moins au dessin qu'au DÉLAI : sous le
     doigt, une surface qui ne bouge pas donne l'impression d'un site web
     dans un cadre. Ce bloc existait déjà mais ne couvrait que les
     éléments de la référence — les portes des Réglages, les actions
     principales et les liens de section n'avaient AUCUN retour au
     toucher.

     L'assouplissement passe de « ease » à --spring : la surface ne se
     contente pas de revenir, elle dépasse très légèrement. C'est la
     différence entre un bouton qui obéit et une matière qui répond. */
  .ref-ligne,.ref-tuile,.ref-vedette,.ref-pilule,.ref-go,.ref-rond,
  .pf-carte-porte,.pf-porte,.pf-rangee,.pf-filtre,.pf-nuit-porte,
  .pf-row-b,.reg-sortie,.btn,.ref-lien,.ref-entete .ref-lien{
    transition:transform .16s var(--spring);
  }
  .ref-ligne:active,.ref-tuile:active,.ref-vedette:active,.ref-pilule:active,
  .ref-go:active,.ref-rond:active,.pf-carte-porte:active,.pf-porte:active,
  .pf-rangee:active,.pf-filtre:active{
    transform:scale(.97);
  }
  /* Les lignes de réglages sont larges : à .97 elles se déforment de
     10 px sur le côté, ce qui se voit comme un défaut plutôt que comme
     une réponse. Un enfoncement plus court leur suffit. */
  .pf-row-b:active,.reg-sortie:active,.btn:active{transform:scale(.985)}
  .ref-lien:active{transform:scale(.94)}
}

/* ── Le tout premier écran ─────────────────────────────────────────────
   Il partage désormais l'ouverture de l'app : la photo du jour, le voile
   cinématique, le titre ancré en bas, les actions dessous. On installe
   l'app et on découvre l'écran qu'on retrouvera chaque matin — l'ancien
   dégradé orange n'annonçait aucun des écrans qui suivaient. */
.onb.onb-photo{
  position:relative;padding:0 22px calc(34px + env(safe-area-inset-bottom,0px));
  /* Le cadrage laissait un tiers de ciel vide au-dessus du sommet : sur
     l'écran qui ouvre l'app, la moitié haute ne montrait rien.

     « cover » ne pouvait rien y faire : la photo fait 1280 × 678 et
     l'écran 390 × 844 ; à couverture, c'est la HAUTEUR qui est ajustée
     au pixel près et le débord se fait sur les côtés — le point
     d'ancrage vertical n'avait donc aucun effet, quel qu'il soit. On
     agrandit franchement et on ancre en bas : le ciel sort par le haut,
     la crête monte, le volcan gagne l'écran. */
  background-size:auto 132%;background-position:50% 100%;background-repeat:no-repeat;
  justify-content:flex-end;
}
/* Le voile assombrissait le ciel à 55 % sur tout le haut de l'écran. Il
   n'y a pourtant rien à lire là-haut sauf la barre d'état de l'iPhone :
   on éteignait un tiers de la photo — la seule chose qui donne envie sur
   cet écran — pour protéger l'heure et la batterie. 40 % suffit à les
   tenir, y compris sur un ciel clair, et le volcan reprend sa lumière. */
.onb.onb-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,14,.40) 0%,rgba(20,17,14,.14) 30%,
                                    rgba(10,15,12,.42) 62%,rgba(10,15,12,.93) 100%);
}
.onb.onb-photo > *{position:relative;z-index:1}
/* Le bloc de texte n'est plus centré dans le vide : il se pose juste
   au-dessus des boutons, comme le titre de l'Accueil au-dessus du champ. */
.onb.onb-photo .onb-main{flex:0 0 auto;justify-content:flex-end;padding-left:0;margin-bottom:26px}
/* 11 px en blanc à 72 % : sur le SEUL écran où la maison se présente, la
   marque chuchotait — elle se lisait comme une mention légale posée
   au-dessus du vrai titre. 12,5 px et du blanc plein. Elle garde sa lettre
   espacée : c'est un logotype, c'est sa forme, et c'est ici la seule place
   de l'app où cette forme est justifiée. */
.onb.onb-photo .onb-kw{
  font-family:var(--sf);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#FFFFFF;
  text-shadow:0 1px 10px rgba(10,15,12,.5);
}
.onb.onb-photo .onb-h{
  font-family:var(--serif);font-size:44px;font-weight:600;line-height:1.02;
  letter-spacing:-.04em;color:#fff;margin-top:14px;
  text-shadow:0 2px 18px rgba(10,15,12,.45);
}
/* Plus d'italique ni de vert : Sora n'a pas de vrai italique, et le
   #0B6E6E était le dernier reste de l'accent menthe abandonné. */
.onb.onb-photo .onb-h em{font-style:normal;color:inherit}
.onb.onb-photo .onb-s{
  font-size:14.5px;font-weight:400;line-height:1.5;margin-top:14px;max-width:300px;
  color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(10,15,12,.4);
}
.onb.onb-photo .onb-acts{gap:10px}
/* « Regarder d'abord » : un lien, pas un troisième bouton. Créer un compte
   reste ce qu'on propose ; regarder reste possible. Blanc à 78 % avec une
   ombre douce — sur une photo, c'est ce qui tient sur un ciel clair comme
   sur un premier plan sombre. La cible du doigt fait 44 px : c'est le
   dessin qui s'efface, pas la zone touchable. */
.onb.onb-photo .onb-acts .onb-passer{
  align-self:center; margin-top:2px; min-height:44px; padding:0 18px;
  background:none; border:0; box-shadow:none;
  font-family:var(--sans); font-size:14px; font-weight:500;
  color:rgba(255,255,255,.78); text-shadow:0 1px 10px rgba(0,0,0,.5);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.onb.onb-photo .onb-acts .onb-passer:active{ opacity:.6 }
/* Plus d'ombre portée sous l'aplat d'accent. C'est la septième fois
   aujourd'hui que je retire ce halo — il avait survécu ici parce que
   c'est une exception écrite exprès pour cet écran, et qu'aucune règle
   générale ne pouvait l'atteindre. Un gros bouton coloré sur une photo
   sombre n'a besoin d'aucune aide pour se voir ; l'ombre ne fait que le
   dater. */
.onb.onb-photo .onb-acts .btn{
  background:var(--accent);color:var(--accent-ink,#fff);
  box-shadow:none;
}
/* « J'ai déjà un compte » était un gris translucide sale posé sur la
   partie la plus sombre de la photo : il se lisait comme un bouton
   DÉSACTIVÉ. Un contour franc et du blanc plein — c'est une action, pas
   un repoussoir : la moitié des gens qui ouvrent cet écran ont déjà un
   compte. */
.onb.onb-photo .onb-acts .btn-ghost{
  background:rgba(255,255,255,.06);color:#fff;
  border:1.5px solid rgba(255,255,255,.62);font-weight:600;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

@media (prefers-reduced-motion: no-preference){
  /* La photo respire ici aussi, et le bloc monte à l'arrivée : le premier
     mouvement que voit un nouvel utilisateur est celui de l'app entière. */
  .onb.onb-photo{overflow:hidden}
  .onb.onb-photo::before{
    content:'';position:absolute;inset:0;background:inherit;
    background-size:auto 132%;background-position:50% 100%;
    animation:refKen 22s ease-in-out infinite alternate;will-change:transform;
  }
  .onb.onb-photo .onb-main{animation:refMonte .6s .1s cubic-bezier(.22,.68,.2,1) both}
  .onb.onb-photo .onb-acts{animation:refMonte .6s .26s cubic-bezier(.22,.68,.2,1) both}
}

/* Le libellé de section de l'itinéraire (« Jour par jour », « Le tracé du
   voyage ») était resté en 9,5 px capitales espacées — le dernier
   ornement de cette famille, oublié parce qu'il ne porte que deux ou
   trois mots. Même traitement que partout ailleurs : un libellé se lit. */
.itn-lbl{
  font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--sub);margin:22px 0 8px;
}


/* ══ LA CASSE NORMALE ════════════════════════════════════════════════════
   L'audit esthétique a relevé 51 chaînes distinctes en petites capitales
   espacées visibles à l'écran. Une seule était un logotype. Toutes les
   autres étaient du CONTENU : « RÉGIME ALIMENTAIRE OU ALLERGIES »,
   « PROGRAMME DU JOUR », « SARDAIGNE », « QUESTION 01 » — et jusqu'à des
   phrases entières avec leur point final (« MILLE TORII VERMILLON,
   JARDINS DE MOUSSE ET CÉRÉMONIE DU THÉ. »). Sept étaient à 8 px, cinq à
   8,5 px : Apple ne descend jamais sous 11 pt.

   Ce n'était pas une négligence, c'était une RÈGLE : da.css § 3.3
   « Labels : Sora capitales espacées » et .ref-tete .ref-sur dans cette
   feuille même. Tant que ces règles vivaient, la capitale espacée
   repoussait à chaque composant ajouté. Elles sont retirées à la source
   (voir plus bas), et ce bloc rattrape les 109 sélecteurs qui portaient
   le geste ailleurs dans les six feuilles.

   Ce qui reste en capitales : le seul logotype, « HIC SUNT ».
   ════════════════════════════════════════════════════════════════════════ */
.studio-eyebrow,
.nav-title,
.w-fac,
.section-h .meta,
.eyebrow,
.status,
.row .r-s,
.disc-hello,
.tile .t-r,
.dcard .d-num,
.stepper .st-l,
.field label,
.prof-m,
.prof-badge,
.prof-stat .ps-l,
.tb-eyebrow,
.tb-day,
.tb-loc,
.tb-section-label,
.tb-days-left,
.pill,
.info-card .ic-l,
.tool .tl-s,
.ai-banner .ab-k,
.dayrow .dr-l,
.mini-tag,
.foot-price .fp-l,
.book-meta,
.host .h-s,
.bline .bl-s,
.bud-l,
.bud-s,
.pay-sum .ps-s,
.cf label,
.secure,
.gen2-meta,
.gen-progress-label,
.gen-panne-lieu,
.sugg-coords,
.chat-st,
.chat-context,
.ccc-s,
.day-sep,
.hs-map-loading,
.track-scrubber-label,
.track-step-plain .tsp-num,
.map-pop .mp-k,
.map-pop .mp-l,
.act-day,
.act .ac-tag,
.act .ac-s,
.review .rv-d,
.cc-pts,
.cc-next,
.hist .hi-w,
.contrib .c-r,
.contrib .c-you,
.notif-day,
.track-cine .tc-dest,
.track-cine .tc-num,
.mots-s,
.tr-sq-t,
.tpub-k,
.tv-fam h3,
.atlas-info-status,
.atlas-seal-sub,
.atlas-presence-label,
.tile .code,
.gen-kicker,
.pf-eyebrow,
.pf-tier,
.pf-stats .ps-l,
.pf-sec,
.pf-doc-st,
.pf-access-st,
.inv-eyebrow,
.form-titre,
.pile-c .t-r,
.pile-c .t-when,
.hscal-wk span,
.itin-stat .mono,
.itn-lbl,
.itn-dn,
.itn-dl,
.itn-dtags span,
.itn-transfer-badge,
.itn-stay-verif,
.itn-stay-unconf,
.pfd-lb,
.story-eyebrow,
.tb-pied-k,
.stat-chip .k,
.at-d,
.mph-pill,
.cch-eyebrow,
.cc-wait,
.tile .t-season,
.spot-eyebrow,
.rc-stat-l,
.mo-ok,
.tile .t-when,
.pp-ch-l,
.amis-eyebrow,
.ref-verre,
.ref-tete .ref-sur,
.ref-stat span{
  text-transform:none;
  letter-spacing:normal;
  font-family:var(--sans);
}
/* Le logotype, lui, garde sa lettre espacée : c'est sa forme. */
.onb-kw,.onb.onb-photo .onb-kw,.pf-foot{
  text-transform:uppercase;letter-spacing:.16em;font-family:var(--serif);
}


/* ══ LE PLANCHER TYPOGRAPHIQUE ═══════════════════════════════════════════
   Relevé après coup sur les onze écrans : sept éléments sous 9 px, une
   quinzaine entre 9 et 10,5. Apple ne descend jamais sous 11 pt, et à
   8 px une étiquette n'est plus de la typographie, c'est de la texture.
   Aucun texte de l'interface ne passe sous 11 px. */
.ref-tuile .ref-p{font-size:11.5px}
.ref-chiffre span{font-size:11px;letter-spacing:normal}
.deck-count{font-size:11.5px;letter-spacing:normal}
.dcard .d-num{font-size:11.5px}
.field label,.cf label{font-size:11.5px}
.hscal-wk span{font-size:11px}
.hscal-auj{font-size:11px}
.stepper .st-l{font-size:11px}
.dcard .o-d{font-size:11.5px}
.itn-dn{font-size:11.5px}
.itn-transfer-badge{font-size:11px}
.itn-nuit,.itn-stay .itn-prix span{font-size:11px}
.foot-price .fp-l{font-size:11px}
.nav-title{font-size:13px;font-weight:600}
.itn-moments,.itn-jour .itn-moments{font-size:11.5px}
.pf-foot{font-size:11px}
.pf-version{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:4px;letter-spacing:normal}


/* ══ LE PIED DE LA FICHE ET LE BOUTON FLOTTANT ═══════════════════════════
   Deux flottants se disputaient le bas de l'écran Itinéraire.

   Le pied de prix se fondait dans le fond sur 26 px (dégradé transparent
   → ivoire). Sur la capture, il tranche la carte « Jour 1 » en plein
   milieu dans un demi-fondu qui se lit comme un défaut d'affichage. Un
   pied opaque avec un filet dit ce qu'il est : une barre, pas une fuite.

   Le bouton de discussion, lui, vit DANS le pied (.fa-chat) : ce qui
   ressemblait à deux flottants qui se chevauchent était le pied
   transparent qui laissait voir le contenu derrière son propre bouton.

   Enfin la zone de défilement réserve la hauteur du pied : sans ça, la
   dernière carte du jour par jour reste sous la barre, quoi qu'on fasse.
   Cette réserve valait 112 px ici et 108 dans core.css — deux nombres pour
   une seule chose, et ils ont divergé. Elle est maintenant MESURÉE sur le
   pied (--pied, voir _marquerDefilement/app.js) et core.css seul l'applique. */
.ov-foot{
  background:var(--bg);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 26px -22px rgba(31,26,20,.5);
  padding-top:14px;
}

/* Trois réglages qui échappaient au plancher de 11 px : ils sont posés
   par des règles plus spécifiques ailleurs. */
.ref-ligne .ref-chiffre span{font-size:11px}
.itn-stay-p span{font-size:11px}
.itn-day-chev{font-size:11.5px}


/* ══ UNE SEULE GOUTTIÈRE ═════════════════════════════════════════════════
   Trois marges gauche cohabitaient sur l'écran « Vous » : l'en-tête et le
   sélecteur à 22, la carte de profil à 44, et tout ce qui suit — « Vos
   voyages », les filtres, l'astuce, la liste — aligné sur la carte au
   lieu de revenir à 22. C'était le désalignement le plus visible du
   produit, et la cause est mécanique : .ref-volet pose déjà la gouttière,
   et les composants qu'il contient la posent une seconde fois. Le volet
   la porte, ses enfants ne la reportent plus. */
.ref-volet .pf-carte{margin-left:0;margin-right:0}
.ref-volet .pf-entete,
.ref-volet .pf-filtres,
.ref-volet .astuce,
.ref-volet .ref-entete,
.ref-volet .section-h{padding-left:0;padding-right:0}


/* ══ LA CARTE DU DECK ÉPOUSE SA QUESTION ═════════════════════════════════
   Le cadre était fixe : .dcard en inset:0 dans un #deck de hauteur
   calculée. Sur la première question — trois options courtes, l'écran
   qui décide de la conversion — cela laissait 450 px de blanc DANS la
   carte. Le cadre garde son plancher (les questions à treize options ou
   à calendrier en ont besoin, et le corps y défile), mais il s'arrête à
   sa question quand elle est plus courte. La pile derrière reste : elle
   dit qu'il y en a d'autres. */
/* Le cadre du deck ne s'ajuste plus à sa question et n'anime plus sa
   hauteur : voir le commentaire dans positionDeck (deck.js). Une seule
   règle décide de cette hauteur, et elle vit dans screens.css. */


/* ══ LA CARTE DU BUDGET SORT DU NOIR ═════════════════════════════════════
   « La carte noire du profil dénote beaucoup avec le reste, ça fait un
   gros pavé noir. » Le profil a été refait ; la carte du budget, elle,
   était restée sur le même geste — un dégradé nuit → nuit profond posé
   nu au milieu d'un écran clair. C'était le SEUL aplat sombre de toute
   la partie claire de l'app, et depuis que l'ivoire est franc il pèse
   deux fois plus. La piste restante de la barre, un gris à 14 % sur du
   noir, était par-dessus le marché invisible.

   Une carte blanche, comme toutes les autres. Le total garde la couleur
   du jour — c'est le seul chiffre de l'écran qui a le droit de crier —
   et la barre lit franchement sur son ivoire. */
.bud-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
}
.bud-card .bud-l{color:var(--sub);font-size:12.5px;letter-spacing:normal;font-weight:500}
.bud-card .bud-v{color:var(--accent-texte,var(--accent));font-family:var(--serif);font-weight:700}
.bud-card .bud-s{color:var(--sub)}
.bud-card .bud-prog{background:var(--surface2)}
.bud-card .bud-prog i{background:var(--accent)}
.bud-card .bud-legend{color:var(--ink);font-size:12.5px;font-weight:600}


/* ══ UNE SEULE PILULE SÉLECTIONNÉE ═══════════════════════════════════════
   Deux styles cohabitaient pour dire la même chose ; l'aplat plein a
   gagné, et il vaut toujours. Ce qui change, c'est sa MATIÈRE : il était
   en accent, il passe en ENCRE — comme .pf-filtre.on et .ref-pilule.on,
   qui bougent dans le même geste.

   Une pilule sélectionnée dit OÙ L'ON EST. Ce n'est pas une action, et
   sur le Budget il y en avait une par écran en plus des sept pastilles
   de catégorie : l'accent finissait par ne plus rien désigner. Encre
   pleine sur papier ivoire, on ne peut pas la rater — et la couleur de
   la saison redevient disponible pour la seule chose sur laquelle on
   agit vraiment. */
.exp-vue-b.on,.exp-etape-b.on{
  background:var(--ink);border-color:var(--ink);
}
.exp-vue-b.on .exp-vue-n,.exp-vue-b.on .exp-vue-t,.exp-etape-b.on{
  color:var(--paper);
}
.exp-vue-b.on .exp-vue-t{opacity:.82}

/* Les deux listes du Budget s'indentaient différemment : les catégories
   sur une pastille de 36 px, les dépenses réelles sur une icône nue plus
   petite — deux traitements d'icône dans deux listes adjacentes, donc
   deux colonnes de texte à quelques pixels l'une de l'autre. Même
   pastille des deux côtés. */
/* La pastille disparaît des deux côtés en même temps — c'est le même
   défaut que dans les Réglages, le carnet et le questionnaire, et
   l'alignement des deux colonnes tient toujours puisque les deux icônes
   gardent exactement la même largeur (26 px, voir .bline-ic dans
   da.css). */
.bline > svg{
  width:26px;height:26px;flex:none;padding:0;border-radius:0;
  background:none;color:var(--ink-faint);
  box-sizing:border-box;overflow:visible;
}


/* ══ RÉGLAGES : DEUX GROUPES, PAS SEPT PASTILLES ═════════════════════════
   Sept lignes, sept pastilles d'accent identiques : aucune hiérarchie,
   « Déconnexion » du même poids que « Notifications ». Les groupes
   nomment ce qu'ils contiennent, et la sortie du compte se détache. */
.reg-groupe{
  font-family:var(--serif);font-size:13px;font-weight:600;color:var(--sub);
  letter-spacing:normal;margin:26px 2px 10px;
}
.reg-groupe:first-child{margin-top:16px}
/* La sortie n'est pas une porte de plus : pas de pastille pleine, pas de
   chevron, et elle se lit — les libellés de cette page étaient d'un
   brun-gris plus faible que l'encre employée partout ailleurs. */
.reg-sortie{
  display:flex;align-items:center;gap:14px;width:100%;
  margin-top:24px;padding:14px 16px;border-radius:var(--r-md);
  background:none;border:1px solid var(--line);
  font-family:var(--serif);font-size:14.5px;font-weight:600;color:var(--ink);
  text-align:left;cursor:pointer;
}
.reg-sortie:active{transform:scale(.98)}
/* Même boîte d'icône et même écart que les lignes au-dessus. Elle était
   en « auto » du temps où les lignes portaient une gommette de 34 px :
   personne ne pouvait aligner un carré de 15 px sur un rond de 34, donc
   la question ne se posait pas. Depuis que l'icône est nue des deux
   côtés, elle se pose — et le décalage se voyait sur l'appareil de
   Charlotte : 73 px pour les lignes, 64 pour la déconnexion. Mesuré. */
.reg-sortie .pf-row-b-ic{background:none;width:22px;height:22px;color:var(--ink-faint)}
.pf-rows-b .pf-row-b .t{color:var(--ink)}
/* Le compte et la suppression étaient centrés dans une app calée à
   gauche ; et une action irréversible en gris pâle est une action qu'on
   ne voit pas. */
.pf-compte{text-align:left;margin-left:2px}
.pf-del{
  text-align:left;padding:14px 2px;margin-top:8px;
  color:var(--sub);font-size:13.5px;text-decoration:underline;
  text-decoration-color:var(--line2);text-underline-offset:3px;
}
/* Un filet pendait sous la dernière ligne de chaque carte : un séparateur
   qui ne sépare de rien. */
.pf-rows-b .pf-row-b:last-child{border-bottom:none}

/* La deuxième ligne de la rangée destination : la saison, plus discrète
   que l'accroche. */
.ref-ligne .ref-s2{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px}
/* Un chiffre neutre : ni prix ni action, il n'a pas droit à l'accent. */
.ref-ligne .ref-chiffre.neutre{color:var(--ink)}

/* La salutation devient le titre de l'Accueil : même corps que les
   autres écrans, posée sur la photo. */
.ref-h1-salut{color:#fff;text-shadow:0 2px 20px rgba(10,15,12,.5)}

/* ══ LA PORTE VERS LE RESTE DU MONDE ═════════════════════════════════════
   Sous les résultats du catalogue. Elle ne se déguise pas en destination :
   pas de vignette photo, un rond d'accent et un chevron — c'est une
   ACTION, et l'écran doit le dire avant qu'on la touche. */
.monde-porte{
  display:flex;align-items:center;gap:13px;width:100%;
  margin:14px 0 4px;padding:15px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px dashed var(--line2);
  text-align:left;cursor:pointer;color:var(--ink);
  font-family:var(--sans);
}
.monde-porte:active{transform:scale(.985)}
.monde-porte > svg:last-child{stroke:var(--sub);opacity:.6;flex:none}
/* Même correction que partout ailleurs : l'icône dans l'encre, sans
   gommette d'accent derrière. */
.monde-porte-ic{
  width:24px;height:24px;border-radius:0;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:none;color:var(--ink-faint);
}
.monde-porte-m{flex:1;min-width:0}
.monde-porte-t{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.monde-porte-s{display:block;font-size:12.5px;color:var(--sub);margin-top:2px}

/* La règle du graphique et les sources : elles doivent se lire, pas se
   cacher — une fiche qui affiche des chiffres dit d'où ils viennent. */
.monde-regle{
  font-size:12px;line-height:1.5;color:var(--ink-faint);
  margin:8px 0 2px;
}
.monde-sources{
  font-size:11.5px;color:var(--ink-faint);margin:22px 0 4px;
}

/* ══ PARCOURIR LE MONDE ══════════════════════════════════════════════════
   Sept régions, en deux colonnes. Pas de silhouette de continent : nous
   n'en avons pas d'illustration, et une forme approximative sur une app
   de voyage se remarque. Le nom porte, le compte informe. */
/* ── PARCOURIR LE MONDE ───────────────────────────────────────────────
   Ce bloc rendait sept boîtes blanches portant un nom et un compte, sur
   deux colonnes : les rangées n'avaient pas la même hauteur parce que
   « Amérique centrale et Caraïbes » passe à la ligne trois fois, et la
   septième restait orpheline. C'était le module le plus faible de l'app.

   C'est aussi, exactement, celui que la direction rapportée par Charlotte
   réussit le mieux : chez eux chaque continent porte sa forme, en
   couleur, débordant du bord de la rangée. On reconnaît l'Afrique avant
   d'avoir lu le mot — et c'est ça qui rend un écran de navigation
   agréable plutôt qu'administratif.

   TROIS ÉCARTS ASSUMÉS AVEC LA RÉFÉRENCE
   · Une seule colonne, pas deux. Nos noms sont longs — « Amérique
     centrale et Caraïbes » ne tient pas dans 168 px avec une forme à
     côté. En pleine largeur, le nom respire ET la silhouette a la place
     d'être lisible.
   · Une seule couleur, pas sept. Eux donnent une teinte par continent ;
     nous n'avons qu'une couleur, celle du jour, et c'est précisément ce
     qui ne se copie pas. Elle est ici décorative, donc posée bas.
   · Les vrais contours, pas un dessin. Voir
     tools/generate-monde-silhouettes.js : source Natural Earth, la même
     que le globe de l'Atlas.

   La rangée suit la grammaire de la maison : posée à même l'ivoire, donc
   un aplat creux la dessine — ni filet ni ombre. */
.monde-regions{
  display:flex;flex-direction:column;gap:9px;padding:0 22px;
}
.monde-region{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  min-height:92px;padding:var(--p-md) 106px var(--p-md) var(--p-md);
  border-radius:var(--r-lg);
  background:var(--n-2);border:none;box-shadow:none;
  text-align:left;cursor:pointer;
  transition:transform .12s var(--spring);
}
.monde-region:active{transform:scale(.985)}
.monde-region-m{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.monde-region-n{
  font-family:var(--serif);font-size:16px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);line-height:1.18;
}
.monde-region-c{font-size:11.5px;color:var(--sub)}
/* La forme déborde à droite : c'est le débord qui la fait lire comme un
   motif et non comme une icône posée dans une case. */
/* La hauteur de la forme EST celle de la rangée : un carré posé en haut à
   droite et étiré en bas. Premier essai : 112 px dans une rangée de 80,
   centré — l'Afrique sortait décapitée, l'Australie coupée aux pieds. Le
   débord ne doit exister QUE sur le bord droit, jamais en haut ni en bas :
   c'est ce qui distingue un motif d'un dessin mal cadré. */
.monde-region-f{
  position:absolute;right:-8px;top:0;bottom:0;
  height:100%;width:auto;aspect-ratio:1/1;
  fill:var(--accent);stroke:var(--accent);opacity:.46;
  pointer-events:none;
}

/* La liste d'une région : une rangée par territoire, le drapeau mène. */
.monde-pays{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:14px 2px;background:none;border:0;
  border-bottom:1px solid var(--line);
  text-align:left;cursor:pointer;color:var(--ink);font-family:var(--sans);
}
.monde-pays:last-child{border-bottom:0}
.monde-pays:active{opacity:.6}
.monde-pays-d{font-size:21px;line-height:1;flex:none}
.monde-pays-n{flex:1;min-width:0;font-size:15px;font-weight:500;letter-spacing:-.01em}
.monde-pays > svg{stroke:var(--sub);opacity:.5;flex:none}
/* Sept régions en deux colonnes : la dernière serait seule sur sa ligne,
   à moitié vide. Elle prend toute la largeur — c'est une case, pas un
   trou. */
.monde-regions .monde-region:last-child:nth-child(odd){grid-column:1 / -1}

/* ══ « POUR VOUS » — L'ADN DE VOYAGE ═════════════════════════════════════
   Le résumé porte tout : c'est lui qui permet de dire « non, ce n'est pas
   moi ». Il est donc en encre, pas en gris de légende. La provenance
   (« d'après vos 3 voyages ») s'efface d'un ton. */
.adn-resume{
  padding:0 22px;margin:2px 0 12px;font-size:14px;line-height:1.55;color:var(--ink);
}
.adn-resume span{color:var(--sub)}

.adn-liste{
  display:flex;gap:12px;overflow-x:auto;padding:2px 22px 6px;
  /* Mêmes réglages que .ref-rail, et pour la même raison : sans
     scroll-padding-left, l'accrochage colle le bord de la carte au bord
     du CADRE et avale la gouttière de 22 px — la rangée commençait à
     4 px du bord quand le titre juste au-dessus était à 22. Et
     « proximity » plutôt que « mandatory » : on doit pouvoir s'arrêter
     entre deux cartes. */
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding-left:22px;
}
.adn-liste::-webkit-scrollbar{display:none}
.adn-carte{
  position:relative;flex:none;width:224px;height:250px;
  border-radius:var(--r-lg);overflow:hidden;border:0;padding:0;cursor:pointer;
  background-size:cover;background-position:center;scroll-snap-align:start;
  display:flex;align-items:flex-end;text-align:left;
}
.adn-carte:active{transform:scale(.98)}
.adn-voile{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,14,0) 34%,rgba(20,17,14,.82) 100%);
}
.adn-m{position:relative;z-index:1;padding:16px;width:100%}
.adn-n{
  display:block;font-family:var(--serif);font-size:21px;font-weight:600;
  letter-spacing:-.02em;color:#fff;line-height:1.1;
}
.adn-p{display:block;font-size:12.5px;color:rgba(255,255,255,.82);margin-top:3px}
/* La raison : elle doit se lire, c'est le seul endroit où l'app se
   justifie. Filet en tête pour la séparer de l'accroche marketing. */
.adn-r{
  display:block;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.9);
  margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.24);
}

/* ══ LE CHOIX DU MOIS ════════════════════════════════════════════════════
   Une grande carte qui porte l'écran, deux plus petites en dessous. La
   signature « Par Hic Sunt » n'apparaît QUE quand c'est un choix : quand
   l'app retombe sur le calendrier, elle ne signe pas. */
.sel-signe{
  font-size:11.5px;font-weight:500;color:var(--sub);white-space:nowrap;
}
.sel-note{
  padding:0 22px;margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2,var(--sub));
}
.sel-bloc{display:flex;flex-direction:column;gap:10px;padding:0 22px}
.sel-rang{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.sel-grande,.sel-petite{
  position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;text-align:left;
}
.sel-grande{height:250px;border-radius:var(--r-lg)}
.sel-petite{height:148px;border-radius:var(--r-md)}
.sel-grande:active,.sel-petite:active{transform:scale(.985)}
.sel-voile{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,14,0) 40%,rgba(20,17,14,.68) 100%);
}
.sel-grande .ref-badge,.sel-petite .ref-badge{
  position:absolute;top:12px;left:12px;z-index:2;
}
.sel-m{position:relative;z-index:1;padding:16px;width:100%}
.sel-grande .sel-n{
  font-family:var(--serif);font-size:27px;font-weight:600;
  letter-spacing:-.03em;color:#fff;display:block;line-height:1.05;
}
.sel-petite .sel-n{
  font-family:var(--serif);font-size:16px;font-weight:600;
  letter-spacing:-.02em;color:#fff;display:block;line-height:1.1;
}
.sel-grande .sel-s{display:block;font-size:13px;color:rgba(255,255,255,.86);margin-top:4px}
.sel-petite .sel-s{
  display:block;font-size:11.5px;color:rgba(255,255,255,.8);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* L'échéance : discrète, mais elle est le seul ressort de manque qu'on
   s'autorise — et elle est vraie. */
.sel-echeance{
  padding:0 22px;margin:10px 0 0;font-size:12px;color:var(--ink-faint);
}

/* La première question ne remplit pas les grands écrans : trois options
   courtes dans un cadre de 654 px. Sur un iPhone SE elle le remplit
   exactement — c'est un problème de grand écran seulement.

   Essayé et REJETÉ : répartir les options dans la hauteur disponible
   (justify-content:center). Regardé en capture, c'est pire — les options
   se détachent de la question qu'elles répondent, et le trou passe du
   bas au MILIEU de la carte, là où il se lit comme un défaut
   d'affichage. Le blanc qui suit le dernier choix est du silence ; le
   blanc entre la question et le premier choix est une panne.

   Rejeté aussi : faire varier le cadre selon la question. C'est ce qui a
   été livré ce matin, et c'est ce qui a rendu l'écran mouvant à chaque
   réponse (voir positionDeck). Le silence reste. */

/* La carte de faits sur l'Accueil : la même que sur la fiche du voyage,
   mais cliquable — c'est la porte vers l'itinéraire. */
.acc-faits{
  width:calc(100% - 44px);margin:0 22px;cursor:pointer;
  font-family:var(--sans);color:var(--ink);
}
.acc-faits:active{transform:scale(.99)}

/* La photo de la fiche du MONDE est plus basse que celle du catalogue.
   Ce n'est pas une exception de style, c'est une conséquence : la fiche
   maison porte en dessous une radiale, des lieux phares et une accroche
   écrite à la main — assez de matière pour qu'une photo de 430 px reste
   équilibrée. La fiche du monde a deux ou trois faits et un paragraphe.
   La même photo y occupait 51 % de l'écran et écrasait tout le reste :
   « la photo est beaucoup trop grande ». */
.ov[data-ov="monde"] .itn-hero-photo.dd-hero{min-height:352px}

/* ══ LA PHOTO DU JOUR DIT OÙ ELLE EST ════════════════════════════════════
   Elle était le plus grand élément de l'app et le seul qui ne menait
   nulle part. Elle devient une porte : le nom du lieu porte l'écran, son
   accroche suit, un chevron dit que ça s'ouvre. La salutation repasse en
   petit — le plus gros texte de l'écran ne peut pas être un prénom. */
.ref-heros-lieu{
  display:block;width:100%;text-align:left;
  background:none;border:0;padding:0;margin-top:6px;cursor:pointer;
  position:relative;
}
.ref-heros-lieu:active{transform:scale(.99);transform-origin:left bottom}
.ref-heros-lieu .ref-h1{display:block;color:#fff}
.ref-heros-lieu{padding-right:0}
.ref-heros-lieu .ref-sous{
  display:block;margin-top:4px;
  color:rgba(255,255,255,.86);
}
/* Le chevron suit le NOM, collé à lui. Posé à droite de l'écran il
   flottait seul au milieu de la photo, sans rien à quoi se rattacher —
   on ne comprenait pas ce qu'il ouvrait. */
.ref-heros-nom{display:inline-flex;align-items:center;gap:10px}
.ref-heros-porte{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.ref-heros-porte svg{stroke:#fff}

/* Le titre de demi-journée dans le détail d'un jour. Il se pose entre les
   moments, discret : c'est un repère, pas une section. */
.mo-demi{
  font-size:12.5px;font-weight:600;color:var(--sub);
  margin:16px 0 8px;letter-spacing:normal;
}
.mo-demi:first-child{margin-top:4px}

/* ── LA ZONE TACTILE DES PETITS BOUTONS ─────────────────────────────────
   Apple donne 44 px comme plus petite cible qu'un pouce trouve à coup sûr.
   La stature basse de la maison est à 36 : c'est le bon DESSIN — un rond
   de 44 px dans une barre de titre écrase tout ce qui l'entoure — mais
   c'est huit pixels de moins que ce qu'il faut au doigt.

   On sépare donc les deux : le bouton garde son dessin, et un ::after
   invisible étend la ZONE qui reçoit le toucher jusqu'à 44. C'est la
   recette déjà tenue par .ihx-btn ; elle devient la règle de la maison
   plutôt qu'une exception recopiée.

   position:relative est déjà posé sur chacun de ces boutons ; le ::after
   n'a pas de contenu, ne peint rien, et ne déplace donc aucun pixel. */
/* .itn-tab est sorti de cette liste : depuis qu'il est redevenu un
   onglet SOULIGNÉ, son ::after est le trait lui-même. Deux ::after ne
   peuvent pas coexister sur un même élément, et celui-ci, écrit dans la
   feuille chargée en dernier, aurait gagné — l'onglet aurait porté un
   rectangle plein au lieu d'un trait. Il atteint ses 44 px par son
   propre remplissage (voir .itn-tab dans da.css), ce qui revient au même
   pour le doigt. */
.ref-rond, .bell-btn, .ref-pilule, .tr-plus, .tr-reac, .tr-qui,
.deck-back{ position:relative }
.ref-rond::after, .bell-btn::after, .ref-pilule::after, .tr-plus::after,
.tr-reac::after, .tr-qui::after, .deck-back::after{
  content:''; position:absolute;
  inset:calc((var(--b-sm) - 44px) / 2) 0;   /* −4 px en haut et en bas */
}

/* La forme de la région, en tête de son écran. Même dessin que la rangée
   qui y mène — l'un annonce l'autre. */
.region-forme{
  display:flex;justify-content:center;align-items:center;
  height:132px;margin:2px 0 6px;
}
.region-forme-f{
  height:100%;width:auto;aspect-ratio:1/1;
  fill:var(--accent);stroke:var(--accent);opacity:.42;
}

/* Le texte posé sur une photo porte sa propre ombre. C'est le même
   principe que le voile poussé d'un cran : l'ombre agit sur les quelques
   pixels du glyphe, là où la lisibilité se joue, au lieu d'assombrir des
   milliers de pixels d'image qui ne portent rien. Elle ne compte pas au
   calcul WCAG — celui-ci ne mesure que le fond — donc elle ne remplace
   pas le voile : elle vient en plus, pour le petit corps que le voile
   seul laisse tout juste au plancher. */
.ref-heros .ref-salut-photo,
.ref-heros .ref-sous,
.ref-heros .ref-heros-nom{
  text-shadow:0 1px 3px rgba(20,17,14,.42), 0 0 14px rgba(20,17,14,.24);
}

/* Le nom de la maison, partout où il se pose sur NOTRE papier : il prend
   la couleur du jour. --accent-texte et non --accent : c'est la variante
   assombrie que da-accent.js calcule pour que la couleur passe le seuil
   en petit corps sur fond clair. La couleur reste celle de la saison ;
   seule sa clarté est corrigée pour qu'on puisse la lire.

   Une classe à part, et non .pf-foot : ce même style habille aussi le
   numéro de build en bas des Réglages, qui n'est pas le logo. */
.hs-marque{color:var(--accent-texte,var(--accent))}

/* ── LE SÉLECTEUR D'ICÔNE ─────────────────────────────────────────────
   Trois par rangée : à quatre, la vignette tombe sous les 70 px et la
   rose des vents devient une tache. La vignette porte l'arrondi d'iOS
   (22,5 % du côté, la valeur d'Apple) pour qu'on voie ce qu'on aura sur
   l'écran d'accueil, et pas un carré. */
.ic-grille{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0;
}
.ic-choix{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 6px 11px;border-radius:var(--r-lg);
  background:var(--n-2);border:1.5px solid transparent;box-shadow:none;
  cursor:pointer;text-align:center;
  transition:transform .12s var(--spring),border-color .18s;
}
.ic-choix:active{transform:scale(.97)}
/* La sélection prend la couleur du jour, comme toutes les sélections. */
.ic-choix.on{border-color:var(--accent);background:var(--accent-tint)}
.ic-vig{
  width:100%;max-width:78px;height:auto;aspect-ratio:1/1;
  border-radius:22.5%;display:block;margin-bottom:8px;
  box-shadow:var(--sh-1);
}
.ic-n{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);line-height:1.2}
.ic-q{font-family:var(--sans);font-size:10.5px;color:var(--sub);line-height:1.2}

/* ── LA PHOTO DE L'ITINÉRAIRE : UN CADRE À LA MESURE DES PHOTOS ───────
   Charlotte : « la photo en haut, notamment celle de la Sardaigne, je la
   trouve horrible ».

   La photo n'est pas bonne — c'est un cliché de vacances, et ça se règle
   en changeant le fichier. Mais LE CADRAGE est notre faute, et il se
   mesure : le cadre fait 390 × 430, soit un ratio de 0,91, presque carré.
   Les photos, elles, sont en 4/3 ou en 16/9 (1,33 à 1,78). En
   background-size:cover, remplir un cadre de 0,91 avec une image de 1,33
   consomme la hauteur et jette TRENTE-DEUX POUR CENT DE LA LARGEUR,
   moitié à gauche, moitié à droite.

   Sur la Sardaigne, ces 32 % sont exactement la falaise (à gauche) et les
   barques (à droite) : il ne reste que la bande centrale — de la mer nue
   sous un ciel nu. Le sujet est coupé, le vide est gardé.

     430 px → ratio 0,91 → 32 % de largeur perdue
     370 px → ratio 1,05 → 21 %
     320 px → ratio 1,22 →  8 %
     293 px → ratio 1,33 →  0 %

   On descend l'itinéraire à 320 : huit pour cent au lieu de trente-deux,
   et le contenu commence cent dix pixels plus haut — la première journée
   est visible sans faire défiler.

   La fiche de DESTINATION garde ses 430, et c'est voulu : là-bas la photo
   est l'argument, elle a le droit d'occuper l'écran. Ici elle est un
   en-tête, et ce qu'on est venu lire, ce sont les journées. */
.ov[data-ov="itinerary"] .itn-hero-photo.dd-hero,
.ov[data-ov="itn"] .itn-hero-photo.dd-hero{ min-height:320px }

/* La devise du voyage : la phrase courte qui le résume, posée sous les
   faits sans titre au-dessus. C'est le sous-titre du voyage, pas une
   section. */
.itn-devise{
  font-family:var(--sans);font-size:14.5px;line-height:1.5;
  color:var(--sub);margin:10px 0 0;
}
/* « Jour par jour » : un titre de section, au même rang que les autres. */
.itn-jours-h{
  font-family:var(--serif);font-size:21px;font-weight:700;
  letter-spacing:-.03em;color:var(--ink);line-height:1.15;
  margin:26px 0 14px;
}


/* La ligne qui dit ce que le mois écarte — voir _trendHorsSaisonHTML
   (screens-main.js). Discrète : c'est une note, pas une offre. */
.trend-hors{
  margin:14px 22px 0;
  font-size:var(--t-petit);font-weight:var(--t-petit-g);
  line-height:1.5;color:var(--sub);
}


/* ── Les tuiles du monde, dans le rail « Où partir » ───────────────────
   Sans photo — elles sont 232 et aucune n'a été photographiée par nous.
   Ce qu'elles portent à la place vaut mieux qu'une image d'agence : la
   saison réelle, la température du mois, et la ville d'où vient le
   chiffre. Un dégradé par région pour que le rail respire. */
.ref-tuile.monde::after{
  background:linear-gradient(180deg,rgba(20,17,14,0) 38%,rgba(20,17,14,.62) 100%);
}
.ref-tuile.monde .ref-src{
  display:block;font-size:9.5px;color:rgba(255,255,255,.58);margin-top:3px;
  letter-spacing:.01em;
}
/* Le relevé du mois, posé en haut — même place qu'un badge de saison,
   jamais les deux sur la même tuile. */
.ref-badge.doux{
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ── Par envie ─────────────────────────────────────────────────────────
   Des questions, pas des pays. Chacune dit son seuil : on peut ne pas
   être d'accord en connaissance de cause. */
.envies{display:flex;flex-direction:column;gap:10px;padding:0 22px}
.envie{
  display:block;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 16px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.envie:active{transform:scale(.99)}
.envie-t{display:block;font-family:var(--serif);
  font-size:var(--t-carte);font-weight:var(--t-carte-g);color:var(--ink);
  letter-spacing:-.02em}
.envie-d{display:block;font-size:var(--t-petit);font-weight:var(--t-petit-g);
  color:var(--sub);margin-top:2px}
.envie-a{display:block;font-size:var(--t-petit);font-weight:var(--t-petit-g);
  color:var(--ink-faint);margin-top:7px}