/* Les @font-face vivent en tête de core.css — polices embarquées. */

/* ══════════════════════════════════════════════════════════════════════════
   HIC SUNT — IDENTITÉ VISUELLE (refonte complète)
   Chargée en dernier, après core / screens / overlays / features / atlas.
   Le squelette de l'app (HTML, JS, navigation) reste intact : cette couche
   ne fait que remplacer l'habillage.

   Principes :
     · fond blanc chaud, aéré, hyper moderne
     · AUCUN aplat noir : ni carte noire, ni bouton noir
     · l'or #A6824A = la maison — actions, sélections, chrome
     · Sora (titres + labels) · Hanken Grotesk (texte) — ni serif ni mono
     · filets fins, ombres douces et précises, rayons cohérents
     · plus de parchemin, plus de sable, plus de coordonnées
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ 1. JETONS ═══════════════════════════════════════════════════════════
   L'app appelle ses couleurs et polices par variables : les redéfinir
   ici rhabille tous les écrans d'un seul coup. */
:root{
  /* Surfaces
     L'ivoire était à #FCFBFA — 1,03:1 contre le blanc des cartes, un
     point et demi de clarté. Toute la grammaire de la référence (« des
     cartes blanches POSÉES sur l'ivoire ») reposait donc sur un écart
     que l'œil ne voit pas : les cartes n'existaient que par leur ombre
     portée. L'ivoire est franc maintenant, et le blanc se lève dessus. */
  /* ══ L’ÉCHELLE DES NEUTRES ═════════════════════════════════════════
     Relevé avant d’écrire : douze fonds rendus sur cinq écrans, dont
     DEUX gris distants de deux points — --fog-soft #EDEAE4 et
     --surface2 #EBE7DE. Deux points, c’est en dessous du seuil de l’œil :
     ce n’était pas une nuance, c’était un doublon. Huit valeurs de gris
     tenaient sur vingt-huit points, posées une à une au fil des écrans.

     Cinq marches, d’un pas régulier d’environ neuf points. Les huit
     anciens noms restent — ils sont cités partout — mais ils désignent
     désormais une marche, et deux noms qui désignent la même marche sont
     la même couleur, pour de bon. */
  /* ── LA CHALEUR, ET LE JOUR OÙ ELLE EST DEVENUE DU BEIGE ───────────
     Charlotte : « pourquoi l’app est devenue beige, à quel moment j’ai
     demandé ça ? » Elle ne l’a pas demandé. C’est une décision que j’ai
     prise seul le 31 août (« Audit esthétique — l’ivoire, la barre… »)
     et elle n’était qu’à moitié juste.

     LA MOITIÉ JUSTE : le fond était à #FCFBFA contre le blanc des
     cartes, soit 1,03:1. Un point et demi de clarté — l’œil ne le voit
     pas. Toute la grammaire « des cartes blanches posées sur le fond »
     reposait sur un écart qui n’existait pas : les cartes ne tenaient
     que par leur ombre. Il fallait creuser cet écart, et il le faut
     toujours.

     LA MOITIÉ FAUSSE : j’ai creusé l’écart EN AJOUTANT DE LA CHALEUR.
     Le fond est passé à #F4F1EA — dix points d’écart entre le rouge et
     le bleu — et toute l’échelle a suivi jusqu’à vingt-deux points. Ce
     n’est pas la clarté qui fait le beige, c’est cet écart-là. Et les
     deux directions que Charlotte a fournies sont l’une et l’autre sur
     un fond neutre : la référence que je citais pour justifier le
     changement ne l’autorisait pas.

     LA CORRECTION : on garde la CLARTÉ au point près — l’écart avec le
     blanc, durement gagné, reste intact, à un millième près : chaque
     valeur a été RÉSOLUE pour retomber sur la clarté qu’elle avait —
     et on retire les deux tiers de la chaleur. Un blanc de papier, pas un beige. La chaleur de la
     marque reste où elle a un sens : dans l’encre (--ink, brun-noir) et
     dans la couleur du jour. */
  --n-0:#FFFFFF;   /* la surface posée : carte, feuille, champ */
  --n-1:#F3F1EF;   /* le fond de l’app                        */
  --n-2:#EBE9E6;   /* le creux léger : rangée, pilule au repos */
  --n-3:#E1DEDB;   /* le creux marqué : vignette, filet        */
  --n-4:#D7D4D0;   /* le trait appuyé                          */

  --bg:var(--n-1);
  /* Les surfaces SOMBRES — bannières, cartes en relief, voiles de photo.
     Elles étaient teintées vert menthe (var(--nuit) → var(--nuit-profond)), hérité de la
     direction « Verre & Menthe » : la couleur de marque d'alors se
     retrouvait jusque dans le fond des cartes. Depuis que l'accent suit
     la saison, ce vert ne s'accorde qu'au printemps — onze mois sur douze
     il jure avec la couleur du jour. Ces valeurs sont donc NEUTRES, de la
     même famille que --ink : la couleur du jour redevient la seule
     couleur de l'écran. */
  --nuit:#2B2622;
  --nuit-profond:#16120F;
  --nuit-voile:20,17,14;
  --surface:var(--n-0);
  --surface2:var(--n-2);
  --surface-raised:var(--n-0);

  /* ── Encre : mesurée, pas choisie à l'œil ─────────────────────────
     Une application de voyage se lit dehors, en plein soleil, sur un
     écran qu'on n'a pas le temps de régler. Les valeurs ont donc été
     CALCULÉES : pour chaque encre, la plus claire qui atteigne 4,5:1
     (le seuil de lisibilité du texte courant) sur le PIRE des trois
     fonds où elle sert — --surface2, le creux des champs et des rangées.
     Teinte et saturation inchangées, seule la clarté descend.

     Mesures avant :
       --sub  #79726A   4,21 sur le fond de l'app, 3,91 dans un creux
       --ph   #ABA498   2,19 sur le fond de l'app, 2,04 dans un creux
       --ok   #129A8B   3,10 sur le fond de l'app, 2,88 dans un creux

     --sub porte tout le texte secondaire : sous-titres, descriptions,
     l'essentiel de ce qui se lit. --ph porte les indications de saisie —
     à 2,0:1 elles n'existaient tout simplement pas au soleil, et ce sont
     elles qui disent quoi écrire dans le questionnaire.

     Après : 4,53 à 5,50 partout. L'écart avec --ink reste large (15:1),
     donc la hiérarchie tient : le secondaire reste secondaire, il devient
     seulement lisible. */
  --ink:#1F1A14;
  --ink-soft:#6F6861;
  --sub:#6F6861;

  /* Filets */
  /* Les filets étaient à 1,27:1 sur blanc : présents dans la feuille,
     absents à l'écran. */
  --line:var(--n-3);
  --line2:var(--n-4);

  /* Maison — encre neutre (l'or a été retiré : la seule couleur de
     l'interface est désormais l'ADN de la destination) */
  --gold:#1F1A14;
  --gold-soft:#4A4640;
  --gold-deep:#000000;
  --gold-bright:#6F6861;

  /* Divers */
  --onink:#FFFFFF;
  --ph:#70685B;
  --ok:#0E766B;

  /* ── Échelle typographique ────────────────────────────────────────
     Mesurée, pas inventée. Un relevé sur huit écrans réels a trouvé
     TRENTE-SIX couples taille/graisse distincts, pour vingt et une
     tailles — dont dix couples utilisés une seule fois. Une échelle n'a
     pas dix marches d'exception : ce sont des accidents, pas des choix.

     Le vrai défaut n'est pas le nombre, c'est qu'un même RÔLE se rend à
     des tailles différentes selon l'écran. L'ouverture de section en
     porte trois : .section-h h2 (22/600), .ref-entete h2 (20,5/700) et
     .pf-entete h2 (19/700). Trois tailles et deux graisses pour la même
     chose, à un onglet de distance.

     Les huit marches ci-dessous sont celles que l'application utilise
     déjà le plus — 11,5/400 revient 49 fois, 15/600 vingt-cinq fois.
     C'est donc une échelle constatée, à laquelle le reste se rallie peu
     à peu. Les 603 déclarations de font-size du dossier ne sont PAS
     toutes converties : ce jeu de jetons est le point de départ, et
     banc-typographie tient le compte pour qu'il ne reparte pas à la
     hausse. */
  /* ── LES QUATRE MARCHES D'AFFICHAGE ───────────────────────────────────
     Relevé du 5 septembre : au-dessus de 17 px, l'app employait
     VINGT-CINQ tailles — 17, 18, 19, 20, 20,5, 21, 22, 23, 24, 25, 26,
     27, 28, 29, 30, 31, 32, 34, 36, 38, 40, 42, 44, 48, 56. Ce n'est pas
     une échelle, c'est un continuum : personne ne distingue 26 de 27,
     mais tout le monde sent qu'il n'y a pas de règle. C'est très
     exactement ce qui fait qu'une app « n'a pas l'air dessinée ».

     Quatre marches, rapport constant de 1,29 : 21 · 27 · 34 · 44.
     Soixante-treize déclarations y ont été ramenées, jamais de plus de
     4 px. En cas d'égalité on monte : le but est d'ÉCARTER les marches.

     --t-section descend de 20,5 à 21 pour rejoindre la première marche.
     Sans ça le jeton dirait 20,5 pendant que tout le reste dit 21, et on
     retomberait dans le défaut qu'on vient de corriger.

     --t-hero et --t-ecran ne sont cités par aucune règle — comme
     --t-fort et --t-corps. C'est la découverte de la journée : quatre
     marches sur huit ne servaient à rien, l'échelle était un DOCUMENT et
     pas un système. On les aligne quand même sur les marches réelles :
     un document qui ment est pire qu'un document absent. */
  --t-hero:44px;      --t-hero-g:600;    /* le titre d'accueil          */
  --t-ecran:34px;     --t-ecran-g:600;   /* titre d'écran, grande carte */
  --t-section:21px;   --t-section-g:700; /* ouverture de section        */
  --t-carte:16px;     --t-carte-g:600;   /* titre de carte              */
  --t-fort:15px;      --t-fort-g:600;    /* libellé appuyé              */
  --t-corps:13px;     --t-corps-g:400;   /* texte courant               */
  --t-petit:11.5px;   --t-petit-g:400;   /* mention                     */
  --t-micro:11px;     --t-micro-g:600;   /* étiquette, capitales        */

  /* Typographie */
  --serif:'Sora',-apple-system,'Helvetica Neue',sans-serif;
  --serif-text:'Hanken Grotesk',-apple-system,'Helvetica Neue',sans-serif;
  --sf:'Hanken Grotesk',-apple-system,'Helvetica Neue',sans-serif;
  --sans:'Hanken Grotesk',-apple-system,'Helvetica Neue',sans-serif;
  --mono:'Sora',-apple-system,'Helvetica Neue',sans-serif;

  /* Géométrie */
  /* 22px et non 18 : Charlotte, sur une référence, « j'aime bien aussi la
     DA avec des arrondis ». 18px lisait « carte de tableau de bord » ;
     22px lit « objet posé », et c'est la même valeur que le socle
     (core.css) — cette surcharge à 18 les avait désaccordés. */
  /* ══ LA GÉOMÉTRIE, EN QUATRE VALEURS ═══════════════════════════════
     Relevé à l'écran avant d'écrire ces lignes : quinze arrondis rendus,
     dont DIX pour la seule famille des cartes — 22, 20, 18, 16, 14, 13,
     12, 10, 9, 7 — plus deux écritures de la même pilule (999px et
     100px). Ce n'était pas un système, c'était une accumulation : chaque
     composant ajouté avait choisi son arrondi tout seul.

     Quatre valeurs, dans un rapport constant d'environ 1,4 — l'œil lit
     une progression, pas une liste. Et elles sont GÉNÉREUSES : c'est ce
     que la référence apportée par Charlotte fait de mieux, et c'est ce
     qui sépare une app tendre d'une app administrative. */
  --r-xl:28px;   /* nappes, feuilles, grandes cartes photo   */
  --r-lg:22px;   /* cartes standard                          */
  --r-md:16px;   /* rangées, champs, cartes moyennes         */
  --r-sm:10px;   /* vignettes, étiquettes, petits éléments   */
  --r-pill:999px;/* pilules, badges, boutons                 */

  /* ══ TROIS OMBRES, UNE SEULE ENCRE ═════════════════════════════════
     Dix-sept ombres rendues, avec CINQ encres différentes : l'encre
     chaude (31,26,20), un vert-noir froid (10,15,12), un brun (26,22,16),
     un autre brun (30,22,12), du noir pur (0,0,0) — et deux ombres
     ORANGE, sous le bouton principal et sous l'onglet actif. Une ombre
     colorée sous un bouton, c'est une lueur : ça date, et ça se voit.

     Une ombre est de la lumière absente. Elle prend donc l'encre de
     l'écran, toujours la même, et ne varie que par la hauteur. */
  /* --sh-1 était l'ombre de REPOS : celle des cartes, des pilules
     sélectionnées, des vignettes — trente objets qui ne flottent nulle
     part. Une carte posée sur du papier ne projette pas d'ombre, elle a
     un BORD. C'est le même geste que --shadow-card, étendu aux trente
     règles qui appelaient le jeton directement au lieu de passer par lui.

     --sh-2 et --sh-3 gardent leur ombre : eux servent à ce qui flotte
     VRAIMENT au-dessus du contenu — la barre d'onglets, le bouton
     flottant, les feuilles modales. Là, l'ombre n'est pas un ornement,
     c'est l'information « ceci est par-dessus ». */
  --sh-1:0 0 0 1px var(--n-2);
  --sh-2:0 2px 6px rgba(31,26,20,.05), 0 16px 34px -20px rgba(31,26,20,.30);
  --sh-3:0 8px 18px rgba(31,26,20,.07), 0 32px 64px -26px rgba(31,26,20,.38);

  /* Les anciens noms restent — ils sont cités partout — mais ils ne
     portent plus de valeur : ils pointent sur l’échelle. */
  /* ══ LA STATURE DES BOUTONS ════════════════════════════════════════
     Relevé à l’écran, cartes empilées du questionnaire écartées (elles
     sont rendues à 0,95 : tout ce qu’elles contiennent mesure faux) :
     SEIZE hauteurs de bouton — 32, 34, 35, 36, 38, 39, 40, 42, 44, 46,
     48, 52 — pour six corps de texte et quatre graisses. Et DIX de ces
     seize hauteurs passent sous les 44 px qu’Apple donne comme minimum
     tactile.

     Trois statures, et rien entre les deux. Ce qui n’entre dans aucune
     des trois n’est pas un bouton : c’est une carte cliquable, et elle
     suit la règle des cartes. */
  --b-lg:52px;  --b-lg-x:22px;   /* l’action de l’écran, pleine largeur */
  --b-md:44px;  --b-md-x:18px;   /* action secondaire, pilule d’action  */
  --b-sm:36px;  --b-sm-x:14px;   /* filtre, onglet, pilule discrète     */

  /* ══ LA RESPIRATION DES CARTES ═════════════════════════════════════
     Douze paddings rendus, dont CINQ asymétriques : « 11px 13px 11px
     11px », « 16px 15px », « 20px 18px 16px ». Personne n’a décidé
     qu’une carte respirerait deux pixels de plus à droite qu’à gauche ;
     c’est arrivé. Trois respirations, toujours symétriques. */
  --p-lg:20px;   /* grande carte              */
  --p-md:16px;   /* carte, rangée             */
  --p-sm:12px;   /* rangée compacte           */

  --card-radius:var(--r-lg);
  --btn-radius:var(--r-pill);

  /* Les trois anciens noms sont cités dans plus de cent règles : on les
     garde, mais ils ne portent plus de valeur propre — ils désignent
     désormais une hauteur de l’échelle, et rien d’autre. */
  /* ── DU TABLEAU DE BORD AU CARNET DE CARTOGRAPHE ─────────────────────
     Charlotte : « je veux qu'elle sorte du lot ». Or moderne-propre est
     devenu une marchandise — cartes blanches, coins arrondis, ombre douce.
     Tout le monde l'a. Le faire mieux ne fait pas sortir du lot, ça fait
     ressembler à tout le monde en mieux.

     Le parti pris existait déjà, latent, dans le nom même de la maison :
     « ici sont les dragons », le bord de la carte. Une PLANCHE d'atlas ne
     flotte pas au-dessus du papier, elle est imprimée dessus, et ce qui
     la sépare du reste est un FILET, pas une ombre portée.

     Ce jeton est cité par une soixantaine de règles. Le redéfinir suffit
     donc à changer toute l'app d'un coup, sans toucher un composant : ce
     qui portait une ombre porte un filet, exactement au même endroit et
     avec le même rayon. C'est aussi ce qui rend le geste réversible en
     une ligne s'il ne vous plaît pas. */
  --shadow-card:var(--sh-1);
  --shadow-raised:var(--sh-2);
  --shadow-float:var(--sh-3);

  /* Vignettes — aplat doux, plus de dégradé sable */
  --tile-bg:var(--n-3);

  /* Jetons ajoutés */
  --paper:var(--n-1);
  --fog:var(--n-4);
  --fog-soft:var(--n-2);
  /* Même valeur mesurée que --ph, et c'est un constat plutôt qu'un
     choix : sous 4,5:1 rien n'est lisible, et au-dessus de 4,5:1 sur un
     creux à #EBE9E6 il ne reste plus assez de place pour trois gris
     distinguables. Deux d'entre eux se ressembleraient à 1 % près, ce
     qui n'est pas une hiérarchie, seulement trois jetons pour une seule
     couleur. La hiérarchie se fait donc à la taille et à la graisse. */
  --ink-faint:#70685B;
  --gold-tint:var(--n-2);

  /* ADN de la destination — posé par da-accent.js selon le pays affiché.
     C'est la seule couleur de l'interface, et elle change à chaque voyage. */
  --accent:#2F7DE1;
  --accent-tint:#2F7DE116;
  --accent-soft:#2F7DE12A;
  --accent-shadow:#2F7DE1b0;
}


/* ══ 2. FONDS ════════════════════════════════════════════════════════════ */
html,body{background:#D5D3D0}
body{font-family:var(--sans);color:var(--ink)}
.screen{background:var(--bg)}
::selection{background:var(--accent-tint)}

/* ── LE GRAIN DU PAPIER ──────────────────────────────────────────────────
   Ce qui fait qu'une app « ressemble à toutes les autres » n'est presque
   jamais une couleur ou un arrondi : c'est que l'écran est PLAT. Un aplat
   numérique parfaitement lisse est le rendu par défaut de tous les cadres
   du marché, et l'œil le reconnaît sans savoir le nommer.

   Une planche d'atlas, elle, est imprimée sur un papier qui a un grain.
   On ne le voit pas — on le sent. C'est exactement l'effet recherché :
   personne ne doit remarquer une texture, tout le monde doit trouver que
   « ça n'a pas l'air d'un site web ».

   Un seul calque, posé sur .screen (qui porte déjà isolation:isolate et
   overflow:hidden, donc le grain s'arrête au bord de l'écran et suit les
   coins arrondis). pointer-events:none : il ne peut RIEN intercepter, ni
   un appui ni un défilement. Le motif est un bruit fractal SVG de 140 px
   qui se répète — aucune image à télécharger, aucune requête, ~400 octets.

   L'opacité (.055 sur le papier, .04 par-dessus) est sous le seuil de
   détection consciente : mesuré à ce niveau, l'écart de contraste sur un
   texte encre est inférieur à 1 %, soit moins que la variation entre deux
   dalles d'iPhone. banc-contraste reste donc valable.

   Réversible en supprimant ce bloc — rien d'autre n'en dépend. */
.screen::after{
  content:''; position:absolute; inset:0; z-index:400;
  pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}


/* ══ 3. TYPOGRAPHIE ══════════════════════════════════════════════════════ */

/* 3.1 — Aucun italique : Sora n'a pas de vrai italique, l'oblique
   synthétique casse le rendu premium. L'accent se fait par l'or. */
em,
.studio-title em,
.btn em,
.input.italic,
.carte-daytitle .serif em,
.act .ac-tag,
.onb-h em,
.itin-hero-tag,
.gen-title em,
.sugg-tag,
.muse-input,
.dcard .d-q em,
.voy-title em,
.chat-hl,
.disc-hero em{font-style:normal}
.btn em{font-family:var(--serif);font-weight:600}
.gen-title em,
.disc-hero em{color:var(--gold)}

/* 3.2 — Titres display : Sora, chasse serrée */
.disc-hero,.voy-title,.gen-title,.onb-h,.studio-title,
.stepper .st-n,.cc-tier,.pcc-t,
h1,h2,h3{letter-spacing:-0.025em;font-weight:600}

/* 3.3 — Labels : casse normale.
   Cette règle imposait « Sora capitales espacées » à toute la famille des
   étiquettes. C'était la source du geste : chaque composant ajouté héritait
   de la capitale espacée sans que personne ne le décide. La grammaire de
   la casse normale vit maintenant en fin de da-reference.css. */
.eyebrow,.section-h .meta,.tile .code,.gen-kicker{
  font-family:var(--sans);font-weight:600;letter-spacing:normal;text-transform:none;
}

/* 3.4 — Chiffres alignés */
.deck-count,.prof-m,.stepper .st-l,.bud-v,.cc-pts{font-feature-settings:"tnum" 1}


/* ══ 4. LES FILETS ═══════════════════════════════════════════════════════
   Ils s'appelaient « le filet d'or de la maison » et portaient chacun un
   tiret décoratif de 30 px à gauche — l'ornement de l'ancienne direction,
   posé sur CHAQUE filet de l'app. L'or est parti depuis longtemps ; le
   tiret était resté. Un filet sépare, il ne se signe pas. */
.hs-rule,.rule{position:relative;height:1px;background:var(--line)}
.hairline.gold{background:var(--line)}


/* ══ 5. BOUTONS — plus aucun noir ════════════════════════════════════════
   L'action principale passe en or : c'est la couleur de la maison. */
.btn{background:var(--gold);color:#FFFFFF;box-shadow:var(--sh-2)}
.btn:active{background:var(--gold-deep)}
.btn.gold{background:var(--gold)}
.btn.gold:active{background:var(--gold-deep)}

.btn-ghost{border:1px solid var(--line);background:transparent;color:var(--ink)}
.btn-ghost:active{border-color:var(--gold);color:var(--gold)}

/* Connexion Apple : variante claire (autorisée par Apple) au lieu du noir. */
.apple-btn{background:#FFFFFF;color:var(--ink);border:1px solid var(--line)}

/* Boutons ronds / d'envoi */
.muse-go,.send-btn,.fab{background:var(--gold);color:#FFFFFF}
.fab{box-shadow:var(--sh-3)}


/* ══ 6. SÉLECTIONS — teinte d'or, jamais de pastille noire ═══════════════ */
.chip.on,
.map-chip.on,
.radio-it.on,
.occ.on,
.act-add.on{
  background:var(--gold-tint);
  border-color:var(--gold);
  color:var(--gold);
}
.act-add.on{color:var(--gold)}


/* ══ 7. CARTES — blanches, filet fin, plus aucune carte noire ═══════════ */
.card,.tile,.act,.tool{border-radius:var(--card-radius)}

/* Contrôles segmentés en pilule, comme --btn-radius ci-dessus — reprise
   de la référence "Verre & Menthe" (d5960cfa) où boutons et segmented
   controls sont tous des capsules, jamais des rectangles arrondis. */
.seg{border-radius:var(--r-pill)}
.seg button{border-radius:var(--r-pill)}

/* 7.1 — Le Cercle (fidélité) : ex-carte noire → blanche, accents or */
.cercle-card,
.prof-cercle-card,
.prof-circle-card{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.cercle-card .contour{stroke:var(--gold);opacity:0.10}
.cc-tier,.pcc-t{color:var(--ink)}
.cc-pts,.cc-s,.pcc-s{color:var(--ink-faint)}
.cc-prog{background:var(--fog-soft)}
.cc-prog i{background:var(--gold)}

/* 7.2 — Tuiles d'outils : plus de variante sombre */
.tool.dark{background:var(--surface);border-color:var(--gold)}
.tool.dark .ico{color:var(--gold)}
.tool.dark .tl-t{color:var(--ink)}
.tool.dark .tl-s{color:var(--ink-faint)}

/* 7.3 — Statistiques d'itinéraire */
.itin-stat.dark{background:var(--gold-tint);border-color:var(--gold);color:var(--ink)}

/* 7.4 — Superposition « ajustement » : fond blanc, plus de plein écran noir */
.ov.carto{background:var(--bg);color:var(--ink)}


/* ══ 8. BADGES ET PASTILLES ══════════════════════════════════════════════ */
.itin-hero-badge,
.trip-card-badge,
.prof-badge,
.minimap-cta{
  background:var(--gold-tint);
  color:var(--gold);
  border:1px solid var(--gold);
}
.dayrow .dr-pin,
.dr-pin,
.conf .c-badge,
.ccc-ico{background:var(--gold);color:#FFFFFF}
.gen-progress-fill{background:var(--gold)}


/* ══ 9. CONVERSATION D'AJUSTEMENT ════════════════════════════════════════
   Bulles du voyageur en brume douce (plus de bulle noire). */
.bub.me,.bub.us{background:var(--fog-soft);color:var(--ink)}


/* ══ 10. NOTIFICATION ════════════════════════════════════════════════════ */
.toast{
  background:#FFFFFF;color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 16px 40px -18px rgba(31,26,20,0.42);
}


/* ══ 11. BARRE D'ONGLETS ═════════════════════════════════════════════════ */
/* La vraie règle vit désormais uniquement dans screens.css — celle qui
   était ici (fond #FFFFFF plein) écrasait silencieusement, depuis le
   début, absolument tous les réglages de transparence/flou tentés dans
   screens.css : ce fichier se charge après lui dans index.html, donc à
   spécificité égale (.tabbar-pill des deux côtés) c'est toujours lui qui
   gagnait la cascade. Aucun des changements précédents n'avait jamais
   réellement atteint l'écran. */


/* ══ 12. CHAMPS ══════════════════════════════════════════════════════════ */
.muse{background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.input:focus,.muse-input:focus,textarea:focus,input:focus,select:focus{
  outline:none;border-color:var(--gold);
}
input::placeholder,textarea::placeholder{color:var(--ph)}
progress::-webkit-progress-value{background:var(--gold)}
progress::-moz-progress-bar{background:var(--gold)}


/* ══ 13. TUILES DESTINATION ══════════════════════════════════════════════
   Le petit label en haut à gauche porte désormais la saison idéale
   (l'ancien code de coordonnées a été retiré du contenu). */
.tile .code{
  font-family:var(--serif);font-size:8.5px;font-weight:600;letter-spacing:0.14em;
}
/* Coordonnées résiduelles sur les cartes de voyage : masquées. */
.trip-card-coords{display:none}


/* ══ 14. CARTOGRAPHIE ════════════════════════════════════════════════════ */
.leaflet-container{background:var(--fog-soft);font-family:var(--sans)}

/* Anneaux de l'écran de composition : brume, plus de sable */
.gen-compass .gc-r1,.gen-compass .gc-r2{stroke:var(--fog)}
.gen-compass .gc-r3{stroke:var(--fog-soft)}
.gen-compass .gc-needle-b{fill:var(--fog)}


/* ══ 15. DÉTAILS ═════════════════════════════════════════════════════════ */
.on-dot{background:var(--ok);border-color:var(--bg)}

/* Voiles sur photos — repris à l'intensité de la maquette v7 (§30) : la
   version "adoucie et neutralisée" d'origine (pré-v7) diluait le voile au
   point que la direction photo ne se voyait quasiment plus (retour de
   Charlotte : "je veux que les inspirations se voient"). Le voile ne fait
   qu'assurer la lisibilité du texte — la photo elle-même n'est pas
   assombrie par un filtre, seul ce dégradé bas gagne en présence. */
.hero-veil{background:linear-gradient(to top,rgba(20,17,14,0.85),rgba(20,17,14,0.06) 55%,rgba(20,17,14,0.1))}
.tile .wash::after{background:linear-gradient(to top,rgba(20,17,14,0.78),rgba(20,17,14,0.02) 55%)}

/* Studio (présentation desktop) */
.studio-eyebrow{font-family:var(--serif);font-weight:600;letter-spacing:0.2em;color:var(--gold)}
.studio-title{font-family:var(--serif)}
.studio-sub{font-family:var(--sans);color:var(--sub)}


/* ══ 16. PRÉFÉRENCES D'ANIMATION ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ══ 17. ÉCRAN PROFIL (refonte : moins de cartes, plus de contenu) ═══════ */
.pf{padding-top:6px}
.pf-eyebrow{font-family:var(--serif);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}
.pf .rule{margin-top:14px}

.pf-id{display:flex;align-items:center;gap:15px;margin-top:20px}
.pf-av{width:56px;height:56px;flex:none;border-radius:50%;background:var(--gold-tint);
  color:var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:21px}
.pf-name{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:-.025em;line-height:1.05;margin:0}
.pf-mail{font-size:13px;color:var(--ink-soft);margin-top:4px}
.pf-tier{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:5px 12px;
  border-radius:var(--r-pill);background:var(--gold-tint);color:var(--gold);border:1px solid var(--gold);
  font-family:var(--serif);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* Chiffres en ligne, séparés par des filets — plus de carte */
.pf-stats{display:flex;margin-top:24px;padding:16px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:none;box-shadow:none;border-radius:0}
.pf-stats .prof-stat{flex:1;text-align:center;position:relative;background:none;border:none;padding:0}
.pf-stats .prof-stat + .prof-stat::before{content:"";position:absolute;left:0;top:12%;height:76%;
  width:1px;background:var(--line)}
.pf-stats .ps-v{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.pf-stats .ps-l{font-family:var(--serif);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:5px}

/* Intertitres */
.pf-sec{font-family:var(--serif);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);margin:26px 0 12px}
.pf-sec-row{display:flex;align-items:baseline;justify-content:space-between;cursor:pointer}
.pf-sec-meta{color:var(--gold);letter-spacing:.06em}

/* Documents — lignes fines */
.pf-docs{border-top:1px solid var(--line)}
.pf-doc{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.pf-doc-ico{color:var(--gold);display:inline-flex;flex:none}
.pf-doc-m{flex:1;min-width:0}
.pf-doc-t{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:-.01em}
.pf-doc-s{font-size:12px;color:var(--ink-soft);margin-top:2px}
.pf-doc-st{font-family:var(--serif);font-size:9px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;color:var(--ink-faint)}
.pf-doc-st.ok{color:var(--ok)}
.pf-doc-st.soon{color:var(--gold)}

/* « Votre monde » : la vignette de dépassement (+N) */
.cv-badge-more{background:var(--fog-soft);color:var(--ink-soft);
  font-family:var(--serif);font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center}

/* Accès — une ligne, honnête */
.pf-access{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf-access-m{flex:1;min-width:0}
.pf-access-t{font-family:var(--serif);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.pf-access-s{font-size:12px;color:var(--ink-soft);margin-top:2px}
.pf-access-st{font-family:var(--serif);font-size:9px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}

/* Cercle — une ligne, plus une carte noire */
.pf-circle{padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf-circle .cc-t{font-family:var(--serif);font-weight:600;font-size:14.5px;color:var(--ink)}
.pf-circle .cc-s{font-size:12px;color:var(--ink-soft);margin-top:2px}

/* Réglages — lignes fines */
.pf-rows{border-top:1px solid var(--line)}
.pf-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer}
.pf-row-ico{color:var(--gold);display:inline-flex;flex:none}
.pf-row-m{flex:1;min-width:0}
.pf-row-t{font-family:var(--serif);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.pf-row-s{font-size:12px;color:var(--ink-soft);margin-top:2px}
.pf-row-ch{color:var(--ink-faint);display:inline-flex;flex:none}

.pf-del{display:block;width:100%;background:none;border:none;margin-top:18px;padding:12px;
  font-family:var(--sans);font-size:13px;color:var(--ink-faint);cursor:pointer}
.pf-foot{text-align:center;font-family:var(--serif);font-size:9px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:22px 0 8px}


/* ══ 18. RETRAIT DU VOCABULAIRE « VIEILLE CARTE » ════════════════════════
   Ce n'était pas une question de couleur mais d'ornements : vagues de carte
   marine, emblèmes en filigrane, filets dégradés. La DA les proscrit. */

/* Vagues façon carte marine + grand emblème filigrane sur le héros */
.itin-hero-waves{display:none}
.itin-hero-wm{display:none}

/* Emblèmes en filigrane sur les tuiles et les héros de destination */
.tile .wm,
.dest-hero .wm{display:none}

/* Courbes de niveau et quadrillage cartographique (héritage) */
.contour,
.grat{display:none}

/* Filet dégradé doré → filet plat de 30 px, comme partout ailleurs */
.hairline.gold{background:var(--line);position:relative;overflow:visible}
.hairline.gold::before{content:"";position:absolute;left:0;top:0;height:1px;width:30px;background:var(--gold)}

/* Petit trait sous les noms de tuile : or plein, plus discret */
.tile .t-rule{width:24px;height:1px;background:var(--gold)}

/* Titre d'accueil : chasse serrée, jamais d'italique */
.disc-hero{font-family:var(--serif);letter-spacing:-.03em;line-height:1.04}
.disc-hero em{font-style:normal;color:var(--gold)}


/* ══ 19. RETRAIT DE L'OR — l'ADN destination devient le seul accent ══════
   Validé : plus de couleur maison. Les filets, labels et petits accents
   passent en encre ; les boutons ronds passent en blanc à filet fin.
   Seule la couleur du pays reste colorée à l'écran. */

/* 19.1 — Filets et traits */
.hs-rule::before,
.rule::before{background:var(--ink)}
.hairline.gold::before{background:var(--ink)}
.tile .t-rule{background:var(--ink)}

/* 19.2 — Boutons ronds : blanc, filet fin, symbole en encre
   (jamais d'aplat noir, jamais d'or) */
.muse-go,
.send-btn,
.fab{
  background:#FFFFFF;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 6px 18px -10px rgba(31,26,20,.45);
}
.fab{border-radius:50%}
.muse-go svg,
.send-btn svg,
.fab svg{stroke:var(--ink)}

/* 19.3 — Sélections : contour en encre, fond très doux */
.chip.on,
.map-chip.on,
.radio-it.on,
.occ.on,
.act-add.on{
  background:var(--fog-soft);
  border-color:var(--ink);
  color:var(--ink);
}

/* 19.4 — Badges et pastilles */
.itin-hero-badge,
.trip-card-badge,
.prof-badge,
.minimap-cta{
  background:var(--fog-soft);
  color:var(--ink);
  border:1px solid var(--line);
}
.dayrow .dr-pin,
.dr-pin,
.conf .c-badge,
.ccc-ico{background:var(--ink);color:#FFFFFF}
.gen-progress-fill{background:var(--ink)}

/* 19.5 — Petits accents jadis dorés */
.eyebrow,
.pf-sec-meta,
.pf-row-ico,
.pf-doc-ico,
.login-link b{color:var(--ink-soft)}
.pf-av{background:var(--fog-soft);color:var(--ink)}
.pf-doc-st.soon{color:var(--ink-soft)}
.tool.dark{border-color:var(--line)}
.tool.dark .ico{color:var(--ink)}

/* 19.6 — Champs : le focus passe en encre */
.input:focus,
.muse-input:focus,
textarea:focus,
input:focus,
select:focus{border-color:var(--ink)}
progress::-webkit-progress-value{background:var(--ink)}
progress::-moz-progress-bar{background:var(--ink)}

/* 19.7 — Le seul accent coloré restant est celui de la destination :
   badge « vérifié », progression du budget, tracé de la route. */

/* 19.8 — Derniers accents dorés relevés à l'écran : mots mis en valeur,
   pastilles de notification, onglet actif, puces de progression. */
em,
.disc-hero em,
.gen-title em,
.onb-h em,
.onb-kw,
.disc-hello,
.dcard .d-q em,
.voy-title em,
.chat-hl,
.studio-title em{color:var(--ink)}

/* 19.9 — Étiquettes dorées oubliées lors du retrait de l'or (19.) : même
   traitement que les autres petits accents devenus ink-soft (19.5). */
.itin-hero-tag,
.sugg-tag,
.act .ac-tag{color:var(--ink-soft)}

.dot{color:var(--ink)}
.bell-btn .dot,
.trip-card-draft-badge .dot{background:var(--ink)}

.onb-dots i.on,
.dots i.on{background:var(--ink)}


/* ══ 19. RETRAIT DE L'OR — la maison passe en encre ══════════════════════
   Les jetons ci-dessus rendent automatiquement en encre tout ce qui était
   doré en texte ou en filet. Restent les APLATS : sans correction ils
   deviendraient noirs, ce qui est proscrit. On les repasse en blanc ou en
   brume, avec le contenu en encre. */

/* Bouton principal : blanc, texte encre, filet fin */
.btn{background:#FFFFFF;color:var(--ink);border:1px solid var(--line);
  box-shadow:0 4px 14px -9px rgba(31,26,20,.4)}
.btn:active{background:var(--fog-soft)}
.btn.gold{background:#FFFFFF;color:var(--ink)}
.btn.gold:active{background:var(--fog-soft)}

/* Boutons ronds (envoi, composition, action flottante) : blancs, icône encre */
.muse-go,.send-btn,.fab{background:#FFFFFF;color:var(--ink);
  border:1px solid var(--line);box-shadow:0 4px 14px -9px rgba(31,26,20,.42)}
.fab{box-shadow:0 10px 26px -14px rgba(31,26,20,.5)}

/* Sélections : contour encre sur fond très clair (plus de teinte dorée) */
.chip.on,.map-chip.on,.radio-it.on,.occ.on,.act-add.on{
  background:var(--fog-soft);border-color:var(--ink);color:var(--ink)}

/* Badges et pastilles : contour fin, jamais d'aplat sombre */
.itin-hero-badge,.trip-card-badge,.prof-badge,.minimap-cta{
  background:#FFFFFF;color:var(--ink);border:1px solid var(--line)}
.dayrow .dr-pin,.dr-pin,.conf .c-badge,.ccc-ico{
  background:var(--fog-soft);color:var(--ink)}
.gen-progress-fill{background:var(--ink)}

/* Profil */
.pf-av{background:var(--fog-soft);color:var(--ink)}
.pf-row-ico,.pf-doc-ico{color:var(--ink-soft)}
.pf-doc-st.soon,.pf-sec-meta{color:var(--ink-soft)}

/* Fidélité */
.cercle-card .contour{stroke:var(--ink);opacity:0.07}
.cc-prog i,.tier .bar>i{background:var(--ink)}

/* Filets : le trait de 30 px passe en encre */
.rule::before,.hs-rule::before,.hairline.gold::before{background:var(--ink)}
.hairline.gold{background:var(--line)}
.tile .t-rule{background:var(--ink)}

/* Tuiles d'outils : contour encre au lieu du doré */
.tool.dark{border-color:var(--ink)}
.tool.dark .ico{color:var(--ink)}


/* ══ 20. VIVACITÉ — l'ADN de la destination occupe de vraies surfaces ═════
   L'interface était juste : elle était fade. La couleur du pays passe des
   filets de 3 px aux aplats — boutons, onglet actif, étiquettes, chiffres.
   Aucune couleur nouvelle : ce sont les ADN déjà définis. */

/* Actions principales : aplat de la destination */
/* Plus d'ombre sous l'action principale : un aplat de couleur pleine sur
   du papier ivoire se voit déjà de l'autre bout de la pièce. L'ombre
   portée sous un gros bouton coloré est la signature visuelle de 2018 —
   c'est elle, autant que la couleur, qui faisait « vieillotte ». */
.btn{background:var(--accent);color:var(--accent-ink,#FFFFFF);border:none;
  box-shadow:none}
.btn:active{background:var(--accent);opacity:.88}
.btn.gold{background:var(--accent);color:var(--accent-ink,#FFFFFF)}

/* Boutons ronds : pleins, icône blanche. Sans ombre non plus — .muse-go
   et .send-btn sont posés DANS une barre, ils ne flottent pas ; seul
   .fab flotte réellement au-dessus du contenu et garde la sienne
   (règle suivante). */
.muse-go,.send-btn,.fab{background:var(--accent);color:var(--accent-ink,#FFFFFF);border:none;
  box-shadow:none}
.muse-go svg,.send-btn svg,.fab svg{stroke:#FFFFFF}
.fab{box-shadow:var(--sh-3)}

/* États actifs : aplat plutôt que teinte pâle. .voy-pill.on exclu depuis
   le passage du sélecteur À venir/Passés/Brouillons en segmented control
   groupé (langage .track-toggle) — un filtre de liste n'a pas de raison
   de porter la couleur d'une destination précise. */
.chip.on,.map-chip.on,.radio-it.on,.occ.on,.act-add.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#FFFFFF)}

/* Cartes d'option du questionnaire (mode, radio, occasion) — blanches et
   ombrées même au repos, reprise de .mode-opt/.opt/.occ dans la
   référence "Verre & Menthe" : elles n'y sont jamais des aplats gris
   plats, l'ombre porte la carte qu'elle soit sélectionnée ou non. */
/* LA RÈGLE DU FILET ET DE L’OMBRE — relevée à l’écran, pas décrétée.
   Sur seize cartes rendues, TROIS n’avaient que leur ombre (.itn-faits,
   .ref-cherche, .ref-ligne) et ce sont les trois qui se tiennent le
   mieux. Les treize autres portaient un filet ET une ombre : une
   ceinture avec des bretelles, ça se voit, et ça se lit comme de
   l’hésitation. Charlotte l’avait dit autrement sur la fiche de Madère :
   « ça fait plus brouillon que les autres ».

   Une ombre a besoin de quelque chose sous elle pour se lire ; un filet
   n’a de raison d’être que là où l’ombre ne peut rien dire. D’où trois
   lignes, et rien d’autre :

     1. Carte blanche posée sur l’ivoire → son OMBRE la dessine. Pas de filet.
     2. Rangée posée DANS une carte blanche → un APLAT CREUX la dessine.
        Ni filet ni ombre : sur du blanc, une ombre n’a rien sous quoi
        se lire, et un filet clair sur blanc est un trait qu’on devine.
     3. Rangée choisie → elle prend la couleur du jour, pleine.

   La 2 remplace l’ancien « blanches et ombrées même au repos », qui
   venait de la référence « Verre & Menthe » : là-bas le fond des écrans
   était sombre, une carte blanche s’y détachait. Ici elles sont posées
   sur une carte blanche, et l’ombre ne portait plus rien. */
.mode-btn,.radio-it,.occ,.pick-it{
  background:var(--n-2); border-color:transparent; box-shadow:none}
.radio-it.on .ra-dot{border-color:var(--accent); background:var(--accent)}

/* Notifications — la structure (cartes, groupes par jour, rail d'accent)
   vit dans features.css ; il ne reste ici que ce qui relève de la charte
   « Verre & Menthe » et qui doit gagner sur le thème de base. */
/* ── L'accent en petit texte : --accent-texte ────────────────────────────
   Les règles ci-dessus posaient var(--accent) comme COULEUR DE TEXTE sur
   une surface claire. Mesuré : 3,06:1 avec le terracotta de saison,
   2,62:1 avec la menthe fixe d'avant — sous le seuil de 4,5:1, tous les
   jours et quelle que soit la palette. Le défaut est donc antérieur à la
   dérive saisonnière, pas causé par elle.
   --accent-texte (posé par da-accent.js) est la MÊME teinte, assombrie
   juste assez pour passer. Les aplats — boutons, pastilles, barres —
   gardent var(--accent) intact : c'est là que la couleur du jour se voit.
   Le repli var(--accent) garantit qu'un écran chargé avant da-accent.js
   reste coloré plutôt que noir. */
/* Le rond PAR DÉFAUT redevient neutre : à côté des visages, qui sont des
   ronds en teintes pâles, un rond d'accent pour tout et n'importe quoi
   faisait deux grammaires dans la même liste. L'accent reste sur la
   seule famille qu'il distingue vraiment — .n-voyage, ce que l'app dit
   d'elle-même, plus bas. */
.notif .n-i{background:var(--n-2); color:var(--ink)}
/* Trois familles, trois pastilles — au lieu de la même cloche menthe pour
   tout. Posées ICI et pas dans features.css : la ligne juste au-dessus a
   la même spécificité (0,2,0) et da.css est chargé en dernier, donc elle
   gagnait et repeignait les trois familles en menthe. Le piège s'est déjà
   refermé deux fois cette session ; on demande au navigateur qui gagne
   plutôt que de le supposer.
   « qui » ne sert que lorsque le nom de la personne n'a pas pu être lu ;
   sinon c'est son visage (teinte + initiales) qui prend la place, comme
   partout ailleurs depuis la refonte sociale — et la teinte arrive en
   style inline, qui bat de toute façon la feuille. */
.notif .n-qui{
  color:#FFFFFF; font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:.3px;
}
/* Le menthe redevient disponible pour « votre voyage » : depuis que les
   notifications venant de quelqu'un portent son visage, la couleur de la
   maison ne sert plus qu'à ce que l'app vous dit d'elle-même. Un premier
   essai à 14 % de --gold-deep se confondait avec le gris de « info ». */
.notif .n-voyage{background:var(--accent-tint); color:var(--accent-texte,var(--accent))}
.notif .n-info{background:var(--fog-soft); color:var(--sub)}

/* ── L'invitation au compte, après le premier voyage enregistré ─────────
   Plein écran parce qu'un « modal » l'est dans cette app, mais rempli par
   la photo du voyage qu'on vient de composer plutôt que par du vide. Le
   texte est en bas : on regarde d'abord le lieu, on lit ensuite. */
.ov[data-ov="invite-compte"]{background:var(--ink)}
.inv-fond{position:absolute; inset:0; background-size:cover; background-position:center}
.inv-voile{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,17,14,.15) 0%,rgba(20,17,14,.72) 52%,rgba(20,17,14,.95) 100%)}
.inv-corps{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 24px calc(30px + env(safe-area-inset-bottom,0px));
}
.inv-eyebrow{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; color:color-mix(in srgb, var(--accent) 70%, white);
  margin-bottom:12px;
}
.inv-t{
  font-family:var(--serif); font-weight:600; font-size:27px; line-height:1.15;
  letter-spacing:-.5px; color:#FFFFFF; margin:0 0 12px;
}
.inv-s{
  font-family:var(--sans); font-size:14.5px; font-weight:300; line-height:1.6;
  color:rgba(255,255,255,.8); margin:0 0 24px; max-width:34ch;
}
/* « Plus tard » doit être lisible et facile à toucher sans concurrencer
   le bouton principal : du texte clair, pleine largeur, hauteur de cible
   confortable — pas un lien minuscule qu'on cherche. */
.inv-plus-tard{
  display:block; width:100%; min-height:46px;
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:14.5px; font-weight:500;
  color:rgba(255,255,255,.72);
}
.inv-plus-tard:active{color:rgba(255,255,255,.45)}

/* ── L'écran des formules ───────────────────────────────────────────────
   Sobre volontairement : c'est l'écran où l'on demande de l'argent, et
   toute décoration y ressemble à de la persuasion. Le palier qui
   correspond au voyage en cours est mis en avant ; les autres attendent
   sans se pousser. */
.form-h1{font-family:var(--serif); font-weight:600; font-size:27px; margin:0 0 8px; color:var(--ink)}
.form-sous{font-family:var(--sans); font-size:13.5px; font-weight:300; line-height:1.55;
  color:var(--sub); margin:0 0 22px}
/* ── L'écran des formules ────────────────────────────────────────────────
   « Je trouve que la demande de choix du paiement fait vieillotte. »
   C'était trois rangées identiques, plates, dont aucune ne dominait, et où
   toucher achetait immédiatement. On CHOISIT une carte, puis on confirme
   avec un bouton qui dit ce qui va se passer. */
.form-bloc{display:flex; flex-direction:column; gap:10px; margin-bottom:6px}
.form-c{
  position:relative; width:100%; text-align:left; display:block;
  padding:15px 16px 14px; border-radius:var(--card-radius);
  background:var(--surface); border:1.5px solid var(--fog-soft);
  box-shadow:var(--shadow-card); transition:border-color .18s ease, transform .12s ease;
}
.form-c:active{transform:scale(.985)}
/* La carte choisie se voit à son cerclage, pas à un fond coloré : le prix
   et les atouts doivent rester lisibles, et un aplat les écraserait. */
.form-c.on{border-color:var(--accent)}
.form-c.vedette{margin-top:12px}
.form-c-ruban{
  position:absolute; top:-9px; left:14px; padding:3px 9px;
  border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink,#fff);
  font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase;
}
.form-c-tete{display:flex; align-items:baseline; gap:10px}
.form-c-n{flex:1; min-width:0; font-family:var(--sans); font-size:16px;
  font-weight:600; color:var(--ink); letter-spacing:-.01em}
.form-c-p{font-family:var(--serif); font-size:21px; font-weight:700; color:var(--ink);
  white-space:nowrap}
.form-c-p i{font-style:normal; font-family:var(--sans); font-size:11.5px;
  font-weight:400; color:var(--sub)}
.form-c-s{display:block; margin-top:3px; font-family:var(--sans); font-size:12.5px;
  font-weight:300; color:var(--sub); line-height:1.45}
/* Les atouts : ce qu'on obtient, pas ce qu'on paie. Deux ou trois lignes,
   jamais une liste à défiler — un écran de paiement qui se lit en entier
   en un regard se décide, un autre se referme. */
.form-c-l{display:flex; flex-direction:column; gap:5px; margin-top:11px;
  padding-top:11px; border-top:1px solid var(--fog-soft)}
.form-c-l span{display:flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:12.5px; font-weight:400; color:var(--ink)}
.form-c-l svg{stroke:var(--accent); flex:0 0 auto}
.form-ou{font-family:var(--sans); font-size:12px; font-weight:400; color:var(--sub);
  text-align:center; margin:18px 0 10px}
.form-pied{margin-top:22px; padding-bottom:8px}
.form-go{width:100%}
.form-go[disabled]{opacity:.45}
.form-menu{font-family:var(--sans); font-size:11.5px; font-weight:300; color:var(--sub);
  text-align:center; line-height:1.5; margin:10px 0 0}
.form-vide{font-family:var(--sans); font-size:13.5px; font-weight:300; line-height:1.6;
  color:var(--sub); text-align:center; padding:24px 8px}
.form-restaurer{
  display:block; width:100%; margin:14px auto 0; background:none; border:none;
  font-family:var(--sans); font-size:12.5px; font-weight:400; color:var(--sub);
  text-align:center; padding:8px;
}
.form-restaurer:active{color:var(--ink)}
.form-legal{margin-top:14px; font-size:11.5px; line-height:1.5; color:var(--sub); text-align:center}
.form-legal a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}

/* ── La pile de la saison (Tendances) ───────────────────────────────────
   Des cartes-photo qui se chevauchent : la suivante dépasse sous le bord
   de la première, et c'est ce débord qui dit « il y en a d'autres ».
   Référence apportée par Charlotte ; même grammaire que les tuiles
   (.wash, .t-cap, .t-n) pour que ce soit la MÊME app, pas une greffe. */
.pile{
  display:flex; gap:12px;
  margin:18px -20px 0;            /* bord à bord : le débord doit sortir de la marge */
  padding:4px 20px 14px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pile::-webkit-scrollbar{display:none}
.pile-c{
  position:relative; flex:0 0 78%;   /* 22 % laissés à la suivante */
  height:268px; border-radius:var(--card-radius);
  overflow:hidden; cursor:pointer;
  scroll-snap-align:center;
  border:1px solid var(--line);
  box-shadow:0 6px 18px -10px rgba(31,26,20,.45);
  /* Au repos, une carte est LÉGÈREMENT en retrait : c'est ce décalage qui
     fait la pile. Celle qu'on regarde revient au premier plan. */
  transform:scale(.94);
  transition:transform .32s var(--spring), box-shadow .32s ease;
  touch-action:pan-x;
}
.pile-c.pile-actif{
  transform:scale(1);
  box-shadow:0 18px 42px -16px rgba(31,26,20,.55);
}
.pile-c:active{transform:scale(.98)}
.pile-c .wash{position:absolute; inset:0; background-size:cover; background-position:center}
.pile-c .wash::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(20,17,14,.88),rgba(20,17,14,.55) 26%,rgba(20,17,14,.04) 62%);
}
.pile-c .t-cap{position:absolute; left:18px; right:16px; bottom:16px}
.pile-c .t-n{
  font-family:var(--serif-text); font-weight:600; font-size:27px;
  letter-spacing:-.4px; color:var(--onink);
}
.pile-c .t-rule{width:26px; height:1.5px; background:var(--accent); margin:8px 0 7px}
.pile-c .t-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* Les couleurs du bandeau sont attachées à .tile dans screens.css et plus
   haut dans ce fichier ; une carte de pile n'en est pas une, elle
   héritait donc de l'encre sombre et se retrouvait illisible sur sa
   propre photo. On les redit ici plutôt que d'élargir les sélecteurs de
   .tile — deux composants voisins, deux jeux de règles, pas un couplage
   qui se paierait au prochain changement de l'un des deux. */
.pile-c .t-r{
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:rgba(255,255,255,.82);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pile-c .t-when{
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:rgba(255,255,255,.7);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pile-c .t-when.fort{color:color-mix(in srgb, var(--accent) 62%, white)}
.pile-c .t-code{
  flex:none; font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.8px; color:rgba(255,255,255,.6);
}

/* Le relief est un agrément, pas un moyen de lire : qui demande moins de
   mouvement voit la pile à plat, entière et sans rien perdre. */
@media (prefers-reduced-motion: reduce){
  .pile-c, .pile-c.pile-actif{transform:none; transition:none}
}

/* Sur un iPhone SE ou mini, l'écran fait 667 à 812 px de haut : le titre,
   son chapeau et une carte de 268 px suffisaient à repousser « Envie de
   quoi ? » sous la ligne de flottaison. Vérifié à 375×667 — rien ne
   débordait, rien n'était tronqué, c'est le budget VERTICAL qui ne tenait
   pas, et ça ne se voit pas sur l'écran de référence. */
@media (max-height: 730px){
  .pile-c{height:216px}
  .pile-c .t-n{font-size:27px}
}

/* ── L'onglet actif ──────────────────────────────────────────────────────
   C'était un rond d'accent saturé sous l'icône : le vocabulaire de 2019,
   et surtout la dixième apparition de l'orange sur l'écran. L'actif se dit
   maintenant par la CLARTÉ — icône et mot pleinement blancs, les autres en
   retrait. Sur du verre sombre, le contraste suffit largement, et il ne
   dépense pas l'accent pour une information que la position donne déjà. */
.tab-it.on .tab-ico{color:#fff}
.tab-it.on .tab-mot{color:#fff; font-weight:600}

/* Étiquettes et badges : pleins */
.itin-hero-badge,.trip-card-badge,.prof-badge{
  background:var(--accent);color:var(--accent-ink,#FFFFFF);border:1px solid var(--accent)}
.minimap-cta{background:var(--accent);color:var(--accent-ink,#FFFFFF);border:1px solid var(--accent)}
.mini-tag{color:var(--accent-ink,#FFFFFF) !important;background:var(--accent) !important;border-color:var(--accent) !important}

/* Repères de jour et pastilles */
.dayrow .dr-pin,.dr-pin,.conf .c-badge,.ccc-ico{background:var(--accent);color:var(--accent-ink,#FFFFFF)}
.dayrow .dr-pin{box-shadow:0 0 0 4px var(--accent-tint)}
.gen-progress-fill{background:var(--accent)}

/* Filets et colonnes : la destination reprend la main */
.rule::before,.hs-rule::before,.hairline.gold::before{background:var(--accent);width:34px}
.tile .t-rule{background:var(--accent);width:26px}
.cc-prog i,.tier .bar>i{background:var(--accent)}
.pf-stats .ps-v{color:var(--accent-texte,var(--accent))}

/* Liens et repères secondaires */
.pf-sec-meta,.pf-row-ico,.pf-doc-ico{color:var(--accent-texte,var(--accent))}
.login-link b{color:var(--accent-texte,var(--accent))}
.verif,.pf-doc-st.ok{color:var(--accent-texte,var(--accent))}

/* Profil : la pastille d'initiales prend la couleur du voyage */
.pf-av{background:var(--accent);color:var(--accent-ink,#FFFFFF)}

/* Champs : focus à la couleur de la destination */
.input:focus,.muse-input:focus,textarea:focus,input:focus,select:focus{border-color:var(--accent)}


/* ══ 21. CALENDRIER DU QUESTIONNAIRE ═════════════════════════════════════
   Un mois à la fois, sélection d'une plage. Remplace les champs date
   natifs, qui ouvraient le sélecteur du système hors de la charte. */
/* Resserré (retour de Charlotte, 3 août : cards trop grandes, champ
   "Ville de départ" masqué par le pied "Continuer" sur Q3) — cellules
   38→34px et récap 12/11→8/8px pour que le calendrier + le champ ville
   de départ tiennent en entier dans la carte réduite (screens.css
   #deck), sans que rien ne passe sous le bouton du pied. */
.hscal{margin-top:2px}
.hscal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.hscal-t{font-family:var(--serif);font-weight:600;font-size:15.5px;letter-spacing:-.02em;text-transform:capitalize}
.hscal-b{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.hscal-b svg{width:12px;height:12px;stroke:var(--ink);fill:none;stroke-width:2}
.hscal-b.off{opacity:.3;pointer-events:none}
.hscal-wk{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px}
.hscal-wk span{text-align:center;font-family:var(--serif);font-size:9px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.hscal-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:1px}
.hscal-c{position:relative;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hscal-c.vide{cursor:default}
.hscal-n{position:relative;z-index:2;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:500;font-size:12.5px;font-feature-settings:"tnum" 1;
  transition:background .16s ease,color .16s ease}
.hscal-c.passe{pointer-events:none}
.hscal-c.passe .hscal-n{color:var(--ink-faint);opacity:.45}
.hscal-band{position:absolute;top:3px;bottom:3px;left:0;right:0;display:none;
  background:var(--accent-tint)}
.hscal-c.dans .hscal-band{display:block}
.hscal-c.deb .hscal-band{display:block;left:50%}
.hscal-c.fin .hscal-band{display:block;right:50%}
.hscal-c.deb.fin .hscal-band{display:none}
.hscal-c.deb .hscal-n,.hscal-c.fin .hscal-n{background:var(--accent);color:var(--accent-ink,#FFFFFF);font-weight:600}
.hscal-auj{position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;
  font-family:var(--serif);font-size:8px;font-weight:600;letter-spacing:.05em;color:var(--ink-soft)}
.hscal-c.deb .hscal-auj,.hscal-c.fin .hscal-auj{color:var(--accent-texte,var(--accent))}
.hscal-r{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-soft)}
.hscal-r b{font-family:var(--serif);font-weight:600;color:var(--ink)}


/* ══ 22. PIED DE L'ITINÉRAIRE ════════════════════════════════════════════
   Une seule action principale : le bouton rond « Modifier », qui ouvre la
   conversation. « Garder » reste accessible, en texte discret. */
.foot-actions{display:flex;align-items:center;gap:12px}
.fa-txt{background:none;border:none;cursor:pointer;padding:8px 4px;
  font-family:var(--serif);font-weight:600;font-size:13px;color:var(--ink-soft)}
.fa-txt:active{color:var(--ink)}
.fa-chat{width:var(--b-md);height:var(--b-md);flex:none;border:none;border-radius:50%;
  background:var(--accent);color:var(--accent-ink,#FFFFFF);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:var(--sh-2);transition:transform .15s ease}
.fa-chat:active{transform:scale(.94)}
.fa-chat svg{width:21px;height:21px}


/* ══ 23. CARTE EN POINTILLÉ ══════════════════════════════════════════════
   La vraie géographie, rendue en points, avec le tracé à la couleur de la
   destination. Remplace Leaflet sur l'aperçu de l'itinéraire. */
.hsdm{width:100%;height:100%;display:block;background:var(--surface)}
.hsdm-d{fill:var(--fog)}
.hsdm-seg{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hsdm-halo{fill:var(--accent-tint);transition:opacity .45s ease}
.hsdm-n{fill:var(--accent);stroke:var(--surface);stroke-width:2.2;transition:opacity .4s ease}
.hsdm-num{font-family:var(--serif);font-weight:600;font-size:9px;fill:#fff;transition:opacity .4s ease}


/* ══ 24. ITINÉRAIRE — structure à onglets ═════════════════════════════════
   Remplace la page-hub (mini-carte + grille de raccourcis) par Itinéraire /
   Carte / Budget. */

/* Panes */
.itn-pane{display:none}
.itn-pane.on{display:block}

/* Entrée de l'onglet Carte : la carte apparaissait d'un coup sec
   (display:none → block, aucune transition possible sur display). Anime le
   cadre lui-même plutôt que le SVG intérieur (.hsdm) — celui-ci est
   remonté plusieurs fois pendant le géocodage progressif des étapes
   (rendreDot/rendreDotDynamique, da-map.js), animer le cadre évite de
   refaire clignoter tout le graphique à chaque étape résolue. Le tracé du
   circuit garde sa propre animation progressive (hsDotMapAnimer). */
@keyframes itnMapIn{
  from{ opacity:0; transform:translateY(10px) scale(.97) }
  to{ opacity:1; transform:translateY(0) scale(1) }
}
.itn-pane.on[data-itn-pane="carte"] .itn-map-box{
  animation:itnMapIn .5s cubic-bezier(.22,.9,.32,1) both;
}
@media (prefers-reduced-motion: reduce){
  .itn-pane.on[data-itn-pane="carte"] .itn-map-box{ animation:none }
}

/* Carte plein cadre (remplace la mini-carte) */
.itn-map-box{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:#FFFFFF;padding:8px 4px;min-height:320px}
.itn-map-mount{width:100%;min-height:300px}
.itn-map-mount .hsdm{width:100%;height:auto}
.itn-map-mount .leaflet-container{height:340px;border-radius:var(--r-sm)}

/* Budget inline (pane) */
.itn-pane .bud-card{margin-top:16px}


/* ══ 25. ITINÉRAIRE — en-tête épuré, sans photo ═══════════════════════════
   Le cadre photo/dégradé est retiré : la même grammaire que Consultation
   (label, filet, grand titre) porte désormais l'identité de l'écran.
   Beaucoup plus de silence, l'ultra-luxe par la retenue plutôt que
   par la démonstration. */
/* padding-top:12px — .ov (parent) porte déjà l'encoche via
   padding-top:env(safe-area-inset-top) ; 56px ici comptait un vide
   entièrement séparé de ~50px avant même la rangée d'icônes, largement
   plus que les 6px des onglets (.disc-head/.deck-head/.pf/.atlas-globe-head).
   12px plutôt que 6px : un peu plus d'air pour les boutons ronds de
   40px de la rangée d'icônes, mais du même ordre de grandeur. */
.itn-hd{padding:12px 24px 0}
.itn-hd .itn-hero-top{display:flex;align-items:center;justify-content:space-between}
/* Même marge que .pf .rule (14px) — sans elle le filet collait à
   l'eyebrow ici alors qu'il en était nettement détaché sur le Profil. */
.itn-hd .rule{margin-top:14px}
/* Ligne titre + vignette : la photo (quand elle existe) s'aligne à droite du
   titre, jamais au-dessus — elle accompagne le texte, ne le remplace pas. */
.itn-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:18px}
.itn-title{font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-.028em;
  line-height:1.03;display:flex;align-items:baseline;gap:11px;min-width:0}
.itn-dna{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-4px)}
/* Vignette destination — 56px, discrète : présente sans devenir l'identité
   principale de l'écran (voir commentaire dans itineraryView, screens-detail.js).
   Toujours affichée ; .itn-thumb-ic n'apparaît que sans photo réelle, sur le
   dégradé de secours (destBg), toujours assez sombre pour un glyphe blanc. */
.itn-thumb{width:56px;height:56px;flex:none;border-radius:var(--card-radius-sm);
  background-color:var(--surface2);background-size:cover;background-position:center;
  box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center}
.itn-thumb-ic{color:#FFFFFF;opacity:.85;display:flex}
/* Pas de max-width : 34ch forçait un retour à la ligne prématuré (3
   lignes) bien avant le bord réel de l'écran, gaspillant de la hauteur
   pour rien — la tagline peut utiliser toute la largeur disponible. */
.itn-tagline{font-size:14px;color:var(--ink-soft);margin-top:10px;line-height:1.55}
.itn-dates{font-family:var(--serif);font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--accent-texte,var(--accent));margin-top:14px}

/* .ihx-btn (overlays.css) est déjà la référence universelle — plus besoin
   de surcharge ici, gardée uniquement pour l'état "visité" ci-dessous. */
/* État "pays confirmé visité" (voir _atlasVisitedCtaHTML, atlas.js) —
   teinté en --accent plutôt qu'un filet neutre, seule façon de rester
   repérable sans libellé texte à côté des autres icônes. */
.itn-hd .ihx-btn.on{background:var(--accent);border-color:var(--accent)}
.itn-hd .ihx-btn.on svg{stroke:#FFFFFF}


/* ══ 26. ITINÉRAIRE — l'écrin plutôt que la liste ═════════════════════════
   Retire les tuiles/cadres/pastilles numérotées ; une colonne fine porte
   le jour par jour, avec accordéon (détail complet au clic). */

/* Chiffres en pastilles arrondies — Durée/Étapes en léger fond teinté
   --accent-tint, Budget (.dark) en aplat --accent pour rester le chiffre
   qui ressort, cohérent avec le dégradé de mise en avant déjà utilisé
   ailleurs (raccourcis Explorer, badge visité) plutôt qu'un simple cadre. */
.itin-stat{flex:1;text-align:center;background:var(--accent-tint);border:none;
  border-radius:var(--r-md);padding:10px 6px}
.itin-stat .mono{font-family:var(--serif);font-size:8.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.itin-stat .serif{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.02em;
  color:var(--accent-texte,var(--accent));margin-top:4px}
/* Durée/Étapes allégées (fond plat, chiffre plus petit) pour laisser
   Budget seul porter le poids visuel de "chiffre héros" du trio. */
.itin-stat:not(.dark){background:transparent;border:1px solid var(--line)}
.itin-stat:not(.dark) .serif{font-size:15px;color:var(--ink)}
/* Le blanc était épinglé ici. Il convenait à la menthe (fond sombre),
   pas à la palette de saison : sur le terracotta d'août il ne donne que
   3,39:1, alors que l'encre sombre atteint 4,93:1. --accent-ink choisit
   la meilleure des deux à chaque changement de couleur — c'est ce pour
   quoi il existe, il suffisait de le consulter. */
.itin-stat.dark{background:var(--accent)}
.itin-stat.dark .mono{color:color-mix(in srgb, var(--accent-ink,#FFFFFF) 72%, transparent)}
.itin-stat.dark .serif{color:var(--accent-ink,#FFFFFF)}

/* Onglets — soulignement discret plutôt qu'un fond plein */
.itn-tabs{display:flex;gap:22px;background:none;padding:0;border-bottom:1px solid var(--line);margin-top:16px}
.itn-tab{padding:0 0 11px;border:none;background:none;color:var(--ink-faint);
  font-family:var(--serif);font-weight:600;font-size:13px;position:relative;border-radius:0}
.itn-tab.on{background:none;color:var(--ink);box-shadow:none}
/* Le trait était en accent. Une POSITION n'est pas une action : c'est
   la même correction que sur .soc-seg, et la règle vaut ici aussi. */
.itn-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}

/* Activités/Pépites ont rejoint la section Explorer (gabarit .itn-stay,
   voir §27 plus bas) et "J'y suis allé(e)" la rangée d'icônes de
   l'en-tête (.ihx-btn.on ci-dessus) — l'ancienne rangée de raccourcis
   compacts sous les onglets n'existe plus. */

/* Étiquette de section, sobre */
.itn-lbl{font-family:var(--serif);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);margin:18px 0 4px}

/* Jour par jour — colonne fine */
.itn-days{position:relative;padding-left:22px;margin-top:20px}
.itn-days::before{content:"";position:absolute;left:3px;top:5px;bottom:8px;width:1px;background:var(--line)}
.itn-day{position:relative;padding-bottom:30px}
.itn-day:last-child{padding-bottom:6px}
.itn-node{position:absolute;left:-22px;top:3px;width:8px;height:8px;border-radius:50%;
  background:var(--paper);border:1.6px solid var(--accent)}
.itn-day-main{cursor:pointer}
.itn-dn{font-family:var(--serif);font-size:9px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint)}
.itn-dt{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.025em;margin-top:5px}
.itn-dl{font-family:var(--serif);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
/* Aperçu clampé à 2 lignes : le jour reste consultable en un coup d'œil,
   le texte complet reste disponible via l'accordéon (moments) ou le
   détail du jour (openDay) — rien n'est perdu, juste pas tout affiché
   d'emblée pour 8 jours d'affilée. */
.itn-dd{font-size:13px;line-height:1.58;color:var(--ink-soft);margin-top:8px;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.itn-dtags{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.itn-dtags span{font-family:var(--serif);font-size:8.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid;padding-bottom:1px}

/* Accordéon — même comportement, habillage aligné à la colonne fine */
.itn-day-chev{display:flex;align-items:center;gap:6px;margin-top:11px;
  font-family:var(--serif);font-size:10.5px;font-weight:600}
.itn-day-chev svg{width:12px;height:12px;transition:transform .25s ease}
.itn-day.open .itn-day-chev svg{transform:rotate(90deg)}
.itn-day-prog{display:none;margin-top:8px;padding-top:4px;border-top:1px solid var(--line)}
.itn-day.open .itn-day-prog{display:block}
.itn-daymore{margin-top:10px;background:none;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 12px;font-family:var(--serif);font-size:11px;font-weight:600;color:var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px}

/* Journée transfert (dernier jour) — badge discret + éditeur d'heure de
   vol retour, directement dans l'accordéon (voir _itnSetReturnFlightTime,
   screens-detail.js) plutôt qu'un écran séparé. */
.itn-transfer-badge{font-family:var(--serif);font-size:8.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-texte,var(--accent));border:1px solid var(--accent);border-radius:var(--r-lg);
  padding:2px 8px;margin-left:6px;vertical-align:middle}
.itn-transfer-edit{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--fog-soft);border-radius:var(--r-sm);padding:10px 12px;margin-top:12px}
.itn-transfer-edit label{font-family:var(--serif);font-size:12.5px;font-weight:600;color:var(--ink)}
.itn-transfer-edit input[type="time"]{font-family:var(--serif);font-size:14px;font-weight:600;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:5px 8px}

/* Reveal au scroll — reciblé sur .itn-day (remplace .dayrow.reveal) */
.itn-day.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.22,.68,.2,1),transform .5s cubic-bezier(.22,.68,.2,1)}
.itn-day.reveal.in{opacity:1;transform:translateY(0)}


/* ══ 27. ITINÉRAIRE — Compagnons en icône, hébergements allégés ══════════
   Compagnons n'a plus de ligne pleine largeur — c'est une icône dans
   l'en-tête, au même niveau que Partager et PDF. Les hébergements perdent
   leur photo, leurs étoiles et leur bouton plein : juste une ligne fine,
   la fiche complète reste à un clic (openBooking). */

/* Le gabarit de rangée est PARTAGÉ par trois choses qui portent
   maintenant chacune son nom (voir screens-detail.js) : les portes
   d'Explorer, les hébergements, les étapes du tracé. Elles se dessinent
   pareil aujourd'hui — et chacune peut s'en détacher demain sans
   entraîner les deux autres. */
.itn-stays,.itn-portes,.itn-etapes{border-top:1px solid var(--line)}
.itn-stay,.itn-porte,.itn-etape{display:flex;align-items:flex-start;gap:13px;padding:14px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.itn-stay-k,.itn-porte-k,.itn-etape-k{width:34px;height:34px;flex:none;border-radius:var(--r-sm);background:var(--fog-soft);
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center}
.itn-stay-m,.itn-porte-m,.itn-etape-m{flex:1;min-width:0}
.itn-stay-n,.itn-porte-n,.itn-etape-n{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.itn-stay-verif{display:inline-flex;align-items:center;gap:3px;font-family:var(--serif);
  font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-texte,var(--accent))}
.itn-stay-unconf{font-family:var(--serif);font-size:8px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#C9822B}
.itn-stay-s,.itn-porte-s,.itn-etape-s{font-size:11.5px;color:var(--ink-soft);margin-top:3px;line-height:1.45}
.itn-stay-p{font-family:var(--serif);font-weight:600;font-size:13px;white-space:nowrap;
  text-align:right;flex:none}
.itn-stay-p span{display:block;font-family:var(--sans);font-weight:400;font-size:9.5px;color:var(--ink-faint)}


/* ══ 28. PROFIL — Concept B « Le Registre » ═══════════════════════════════
   Identité sobre sans avatar, deux portes visuelles vers l'Atlas et le
   Cercle, réglages en lignes plates. */

.pf-name-b{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:-.026em;margin-top:16px}
.pf-sub-b{font-size:13px;color:var(--ink-soft);margin-top:6px}

/* Portes — bannière sombre en verre (même famille que .bud-card/
   .muse-glass) plutôt qu'une carte blanche au filet fin, reprise de
   .member dans la référence "Verre & Menthe" (utilisée là-bas pour
   Cercle/Communauté). */
.pf-doors{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.pf-door{
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:20px 22px;cursor:pointer;
  position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 85% -10%, var(--accent-soft), transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  box-shadow:0 16px 40px -14px rgba(31,26,20,.6);
}
.pfd-lb{font-family:var(--serif);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 55%, white);position:relative}
.pfd-tt{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.02em;margin-top:6px;color:#FFFFFF;position:relative}
.pfd-ss{font-size:12px;color:rgba(255,255,255,.65);margin-top:5px;position:relative}
.pfd-chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.5)}

/* Réglages — lignes plates, sans icône ni carte */
.pf-rows-b{border-top:1px solid var(--line)}
.pf-row-b{display:flex;align-items:center;justify-content:space-between;padding:13px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.pf-row-b .t{font-family:var(--serif);font-weight:600;font-size:13.5px;color:var(--ink-soft)}
.pf-row-b .c{color:var(--ink-faint);display:inline-flex}
.pf-row-b .m{display:flex;flex-direction:column;gap:2px}
.pf-row-b .s{font-size:11.5px;color:var(--ink-faint)}
.pf-row-b .s:empty{display:none}


/* ══ 29. PROFIL — fusion identité + voyages (inspiré Stippl) ═════════════
   Le Profil montre désormais les vrais voyages, pas seulement des portes
   vers d'autres écrans ; les réglages passent derrière une icône. */
.pf-topbar{display:flex;align-items:center;justify-content:space-between;min-height:40px}

/* ── En-tête des 4 onglets — même gabarit partout ──────────────────────
   Rangée eyebrow (+ bouton rond 40px optionnel) à hauteur fixe, puis le
   même filet .rule (14px de marge) — sans min-height, un onglet sans
   bouton (Composer, Atlas) avait une rangée plus basse que ceux avec
   bouton (Découvrir, Profil, tous deux avec un bouton rond 40px), donc
   un eyebrow/filet décalés d'un onglet à l'autre malgré un padding-top
   identique. .disc-top/.pf-topbar (avec bouton) et .tab-topbar (sans,
   Composer/Atlas) partagent maintenant la même hauteur minimale. */
.tab-topbar{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.pf-newtrip{display:flex;align-items:center;gap:12px;width:100%;margin-top:22px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:#FFFFFF;
  cursor:pointer;color:var(--ink)}
.pf-newtrip-ico{width:30px;height:30px;flex:none;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-texte,var(--accent));display:flex;align-items:center;justify-content:center}
.pf-newtrip-t{flex:1;text-align:left;font-family:var(--serif);font-weight:600;font-size:14.5px;color:var(--ink)}
.pf-newtrip svg:last-child{color:var(--ink-faint);flex:none}

/* ── Carnet de route · Stories ──────────────────────────────────────────
   Alternative de consultation façon Stories Instagram : un moment par
   écran, tap pour avancer/reculer, balayer vers le bas pour fermer, barre
   de progression segmentée. Fond en dégradé de la couleur de catégorie
   déjà utilisée partout dans l'app — le modèle de données (destinations
   générées à la volée) n'a pas de photo par moment intégrée, une vraie
   photo (voir .story-photo-bg ci-dessous) vient s'ajouter par-dessus
   quand une est trouvée, jamais de photo générique trompeuse inventée. */
.ov.story-ov{background:#141008}
.story-bars{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:12px;right:12px;
  display:flex;gap:4px;z-index:3}
.story-bar{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,0.28);overflow:hidden}
.story-bar-fill{height:100%;width:0;background:#fff;border-radius:2px}
/* ── LE MENU D'UNE STORY ─────────────────────────────────────────────────
   Il empruntait .ihx-btn : un disque BLANC PLEIN, à filet et ombre portée,
   dessiné pour se poser sur du papier ivoire. Sur une photo plein écran il
   devenait la chose la plus lumineuse de l'image — Charlotte, sur sa story
   du Colisée de nuit : « les trois points en haut, les rendre plus
   discrets, sans le rond blanc autour ».

   Le glyphe seul, en blanc à 82 %, avec une ombre portée douce pour tenir
   sur une photo claire comme sur une photo sombre. Aucun fond, aucun
   filet. La zone tactile reste à 44 px — c'est le DESSIN qui s'efface, pas
   la cible du doigt.

   Aligné sur .story-bars (10 px sous la zone sûre) plutôt que sur
   .story-close : les barres de progression sont la seule autre chose en
   haut de cet écran, et deux éléments voisins qui ne s'alignent pas se
   voient plus que l'un ou l'autre. */
.story-menu{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 22px); right:8px; z-index:4;
  width:44px; height:44px; padding:0;
  background:none; border:none; box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.82);
  -webkit-tap-highlight-color:transparent;
}
.story-menu svg{ stroke:currentColor; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)) }
.story-menu:active{ color:#fff }

.story-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);right:14px;z-index:3;
  width:34px;height:34px;border-radius:50%;background:rgba(20,17,14,0.28);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center}
/* Calque photo, sous le dégradé (posé sur .story-slide, semi-transparent) —
   fondu en opacité (background-image ne s'anime pas) déclenché en JS une
   fois l'image préchargée (voir _storyFetchPhoto, screens-detail.js). */
.story-photo-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 0.5s ease}
.story-photo-bg.in{opacity:1}
.story-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 26px calc(env(safe-area-inset-bottom,0px) + 52px);color:#fff;
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
.story-icon{opacity:.9;margin-bottom:14px;display:inline-flex}
.story-eyebrow{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:2.5px;
  text-transform:uppercase;opacity:.75;margin-bottom:10px}
.story-time{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:1.5px;opacity:.85;margin-bottom:8px}
.story-title{font-family:var(--serif);font-weight:700;font-size:27px;line-height:1.18;letter-spacing:-.3px}
.story-title.big{font-size:34px}
.story-desc{font-family:var(--sans);font-size:15px;line-height:1.5;margin-top:10px;opacity:.94}

/* Photo d'un voyage en plein écran, même traitement plein cadre que les
   Stories jour par jour (.story-photo-bg : cover, pas de bande noire en
   letterbox) — "ça s'ouvre comme une story" visait ce format-là. Aucun
   bouton ici : se ferme uniquement en balayant vers le bas. Léger
   dégradé haut/bas pour que la légende reste lisible quelle que soit la
   photo (utile même sans bouton à protéger). */
.trip-photo-view{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:#000;touch-action:none}
.trip-photo-view::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,14,.4),rgba(20,17,14,0) 20%,rgba(20,17,14,0) 68%,rgba(20,17,14,.55))}
.trip-photo-caption{position:absolute;left:26px;right:26px;z-index:2;
  bottom:calc(env(safe-area-inset-bottom,0px) + 30px);margin-top:0}
/* Pastille de localisation (voir window._openTripPhoto/_tripPhotoEditLocation,
   screens-detail.js) — .trip-photo-view coupe le tap sur tout enfant
   (touch-action:none, nécessaire au balayage vers le bas qui ferme la vue) ;
   sans ce touch-action:manipulation explicite ici, ce bouton resterait
   injoignable au doigt, même bug que partout ailleurs dans l'app où un
   conteneur en touch-action:none avale les taps de ses boutons. */
.trip-photo-loc-pill{
  position:absolute; left:20px; top:calc(env(safe-area-inset-top,0px) + 16px); z-index:2;
  display:flex; align-items:center; gap:6px; border:none; cursor:pointer;
  background:rgba(20,17,14,.42); color:#FFFFFF;
  font-family:var(--sans); font-size:12px; font-weight:600;
  border-radius:var(--r-pill); padding:8px 13px 8px 11px;
  touch-action:manipulation;
}
.trip-photo-loc-pill:active{ opacity:.7 }

/* Suppression d'une photo du rail par appui long (voir window._tripBubblePress,
   screens-detail.js) — la croix reste cachée tant qu'on n'a pas maintenu
   appuyé, jamais un bouton visible en permanence à côté d'un médaillon
   déjà petit. */
.trip-story-circle{touch-action:manipulation}
.trip-story-bubble.show-del .trip-story-circle{opacity:.5}
.trip-story-del{display:none;position:absolute;top:-2px;right:6px;z-index:2;
  width:22px;height:22px;border-radius:50%;background:var(--ink);color:#FFF;
  border:2px solid #FFFFFF;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(31,26,20,.25)}
.trip-story-bubble.show-del .trip-story-del{display:flex}
/* Anneau façon Instagram — un écart (fond de page) entre la photo et
   l'anneau coloré, pas un simple filet collé au bord. Retour de Charlotte :
   le rail de photos du voyage ET les stories de lieu (place-stories.js)
   méritaient le même traitement, plutôt que deux styles de médaillon
   différents pour le même concept de "story". Centralisé ici, appliqué via
   opts.ring de _tripStoryBubbleHTML (screens-detail.js). */
.story-ring{box-shadow:0 0 0 2.5px var(--bg),0 0 0 5px var(--accent,var(--gold-deep)),0 4px 10px rgba(31,26,20,.18)}
/* Badge moyen de transport — donnée déjà saisie à l'ajout de la photo
   (voir TRIP_STEP_MODES, screens-detail.js) mais jusqu'ici jamais réaffichée
   nulle part : contenu "gratuit", juste à faire apparaître. */
.trip-story-badge{position:absolute;right:-2px;width:20px;height:20px;border-radius:50%;
  background:var(--accent,var(--ink));color:#FFFFFF;display:flex;align-items:center;
  justify-content:center;border:2px solid var(--bg);z-index:2;pointer-events:none}

/* ── Grille complète des photos, groupée par jour (voir
   window._openTripPhotosGrid, screens-detail.js) — le rail horizontal
   n'a pas de fin naturelle passé une poignée de photos (retour de
   Charlotte : 50 photos y seraient illisibles), la grille se parcourt
   d'un coup d'oeil par jour. Même geste d'appui long que le rail pour
   supprimer (touch-action:manipulation nécessaire : .ov-scroll parent a
   touch-action:pan-y, sinon le tap serait avalé). */
.trip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.trip-grid-item{position:relative;touch-action:manipulation}
.trip-grid-tile{aspect-ratio:1;border-radius:var(--r-sm);background-size:cover;background-position:center;
  background-color:var(--fog-soft);cursor:pointer;transition:opacity .15s}
.trip-grid-item.show-del .trip-grid-tile{opacity:.5}
.trip-grid-del{display:none;position:absolute;top:6px;right:6px;z-index:2;
  width:24px;height:24px;border-radius:50%;background:var(--ink);color:#FFF;
  border:2px solid #FFFFFF;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(31,26,20,.25)}
.trip-grid-item.show-del .trip-grid-del{display:flex}

/* ── Ajouter une dépense · catégories en tuiles, personnes en avatars ────
   Remplace les rangées de chips-bulles empilées (catégorie/payé par/
   concerne se ressemblaient toutes, effet "mur de bulles") par deux
   langages visuels distincts : des tuiles icône+libellé pour la catégorie,
   des avatars ronds (même code couleur que le reste de l'app — Mon Cercle,
   "Entre voyageurs") pour les personnes. */
.exp-cat-grid{display:flex;flex-wrap:wrap;gap:10px}
.exp-cat-tile{display:flex;flex-direction:column;align-items:center;gap:7px;width:72px;padding:12px 4px 10px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.exp-cat-tile:active{transform:scale(0.96)}
.exp-cat-ico{width:36px;height:36px;border-radius:50%;background:var(--fog-soft);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:all .15s ease}
.exp-cat-lbl{font-family:var(--sans);font-size:11px;color:var(--ink-soft);text-align:center;line-height:1.2}
.exp-cat-tile.on{border-color:var(--accent);background:var(--accent-tint)}
.exp-cat-tile.on .exp-cat-ico{background:var(--accent);color:var(--accent-ink,#FFFFFF)}
.exp-cat-tile.on .exp-cat-lbl{color:var(--ink);font-weight:600}

/* Choix de la devise, au-dessus du montant : deux boutons, la monnaie du
   pays et la nôtre. Même grammaire que .exp-cat-tile — bordure accent et
   fond teinté pour l'actif — pour que ça se lise comme la même famille. */
.exp-dev{display:flex;gap:8px;margin-bottom:10px}
.exp-dev-b{display:flex;align-items:baseline;gap:6px;padding:9px 14px;min-height:44px;
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);cursor:pointer;
  font-family:var(--sans);transition:border-color .15s ease,background .15s ease}
.exp-dev-b:active{transform:scale(0.96)}
.exp-dev-s{font-size:15px;font-weight:700;color:var(--ink-soft)}
.exp-dev-c{font-size:11.5px;letter-spacing:.04em;color:var(--sub)}
.exp-dev-b.on{border-color:var(--accent);background:var(--accent-tint)}
.exp-dev-b.on .exp-dev-s{color:var(--ink)}
.exp-dev-b.on .exp-dev-c{color:var(--ink-soft)}

/* L'équivalent en euros, discret : on a payé en monnaie locale, l'euro
   n'est qu'un repère. Chiffres à chasse fixe pour que les colonnes de
   montants s'alignent. */
.exp-eq{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--sub);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Le reçu : soit un bouton d'ajout, soit la vignette du ticket avec de
   quoi le retirer. Une seule rangée dans les deux cas — le formulaire ne
   doit pas changer de hauteur selon qu'on a photographié ou non. */
.exp-recu-add{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap-comfortable,48px);
  padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px dashed var(--line);
  color:var(--ink-soft);font-family:var(--sans);font-size:14px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.exp-recu-add:active{transform:scale(0.99)}
.exp-recu-add:hover{border-color:var(--accent);background:var(--accent-tint)}
.exp-recu{display:flex;align-items:center;gap:12px;margin-top:10px}
.exp-recu-img{width:56px;height:56px;flex:none;border-radius:var(--r-sm);object-fit:cover;
  background:var(--fog-soft);border:1px solid var(--line);cursor:pointer}
.exp-recu-m{display:flex;flex-direction:column;gap:2px}
.exp-recu-n{font-family:var(--sans);font-size:14px;color:var(--ink)}
.exp-recu-x{align-self:flex-start;padding:4px 0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;color:var(--sub);text-decoration:underline}

/* Le ticket en grand : fond sombre, image entière, aucune décoration —
   on veut lire un montant griffonné, pas admirer une mise en page. */
.recu-plein{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:24px;background:rgba(20,17,14,.94);cursor:pointer}
.recu-plein img{max-width:100%;max-height:82vh;border-radius:var(--r-sm);object-fit:contain}
.recu-plein-h{font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.62)}

/* Le filtre par étape, au-dessus de la liste : chaque case porte le nom
   et ce qu'il a coûté. On défile horizontalement — un voyage de dix
   étapes ne doit pas repousser les dépenses hors de l'écran. */
.exp-vue{display:flex;gap:8px;overflow-x:auto;margin:14px 0 4px;padding-bottom:4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.exp-vue::-webkit-scrollbar{display:none}
.exp-vue-b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:none;
  padding:9px 14px;min-height:var(--tap-comfortable,48px);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);cursor:pointer;
  font-family:var(--sans);transition:border-color .15s ease,background .15s ease}
.exp-vue-b:active{transform:scale(0.97)}
.exp-vue-n{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.exp-vue-t{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.exp-vue-b.on{border-color:var(--accent);background:var(--accent-tint)}
.exp-vue-b.on .exp-vue-n{color:var(--ink);font-weight:600}
.exp-vue-b.on .exp-vue-t{color:var(--ink-soft)}

/* Les étapes dans le formulaire : mêmes pastilles, sur une seule rangée
   qui défile, pour ne pas pousser le bouton « Ajouter » hors de vue. */
.exp-etapes{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.exp-etapes::-webkit-scrollbar{display:none}
.exp-etape-b{flex:none;padding:10px 15px;min-height:var(--tap-comfortable,44px);
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
  cursor:pointer;font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);
  white-space:nowrap;transition:border-color .15s ease,background .15s ease}
.exp-etape-b:active{transform:scale(0.96)}
.exp-etape-b.on{border-color:var(--accent);background:var(--accent-tint);color:var(--ink);font-weight:600}

/* « Rembourser » : discret sur la ligne de solde — c'est une action,
   pas la lecture. Le montant, lui, reste ce qu'on regarde. */
.remb-b{flex:none;margin-left:12px;padding:8px 14px;min-height:var(--tap-min,40px);
  border-radius:var(--r-pill);background:var(--accent-tint);border:1px solid var(--accent);
  color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .15s ease}
.remb-b:active{transform:scale(0.96)}

/* Le montant à rembourser, en grand : c'est le chiffre qu'on va coller. */
.remb-montant{font-family:var(--sans);font-size:34px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;margin:14px 0 20px;letter-spacing:-.02em}

/* Un service de remboursement : le bouton, l'identifiant retenu affiché
   dessus, et le champ qui ne se montre qu'à la première fois. */
.remb-s{margin-top:10px}
.remb-ligne{display:flex;align-items:center;gap:8px}
.remb-go{flex:1;min-width:0;padding:0 18px}
.remb-go.avec-id{justify-content:space-between;gap:10px}
.remb-h{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%}
.remb-mod{flex:none;padding:8px 6px;min-height:var(--tap-min,40px);background:none;border:0;
  font-family:var(--sans);font-size:12px;color:var(--sub);text-decoration:underline;cursor:pointer}
.remb-champ{margin-top:10px}
.remb-lab{display:block;font-family:var(--sans);font-size:12px;color:var(--sub);margin-bottom:6px}

.exp-people{display:flex;flex-wrap:wrap;gap:16px 14px}
.exp-person{display:flex;flex-direction:column;align-items:center;gap:6px;width:56px;cursor:pointer}
.exp-person:active{transform:scale(0.96)}
.exp-person-av{position:relative;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#FFFFFF;font-family:var(--sans);font-weight:700;font-size:13.5px;
  opacity:.4;transition:opacity .15s ease,box-shadow .15s ease}
.exp-person.on .exp-person-av{opacity:1;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.exp-person-check{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink,#FFFFFF);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center}
.exp-person-n{font-family:var(--sans);font-size:10.5px;color:var(--sub);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56px}
.exp-person.on .exp-person-n{color:var(--ink);font-weight:600}

/* ── Suivi GPS du voyage · point vivant sur la barre de contrôle ────────── */
@keyframes hsTrackPulse{
  0%,100%{box-shadow:0 0 0 0 var(--accent-tint)}
  50%{box-shadow:0 0 0 5px var(--accent-tint)}
}

/* ── Audit esthétique · sélecteurs jamais rattrapés par les sections 19/20 ─
   Ces classes lisaient encore directement var(--gold-deep)/var(--gold) —
   des jetons redéfinis en §1 comme de l'encre neutre voire du noir pur
   (--gold-deep:#000000), alors que l'app interdit tout aplat noir (voir
   l'en-tête de ce fichier). Deux traitements, selon le rôle : une valeur
   à mettre en avant reprend la couleur de la destination (--accent),
   un simple libellé neutre passe en --ink-soft/--ink-faint comme ses
   voisins déjà migrés (.eyebrow, .cc-s, .pcc-s…). */
.eyebrow-now{color:var(--ink-soft)}
.status.prep{color:var(--accent,var(--ink-soft))}
.muse-nsew{color:var(--ink-soft)}
.trip-card-foot .accent,
.trip-card-draftfoot .accent{color:var(--accent,var(--ink))}
.season .m.best span{color:var(--accent,var(--ink))}
.ihx-btn.ai{color:var(--accent,var(--ink))}
.ccc-s{color:var(--ink-faint)}
.map-pop .mp-k{color:var(--ink-soft)}
.hist .hi-p{color:var(--accent,var(--ink))}
.contrib .c-you{color:var(--accent,var(--ink-soft))}

/* Icônes de rangées devenues aussi ternes que leur texte (--gold vaut
   maintenant ~--ink) : elles doivent porter la couleur de la destination
   comme le reste des accents de la section 20, pas se fondre dans la
   liste. */
/* .bline .ico et .moment .mo-i sortent de cette liste : ce sont les
   icônes de CATÉGORIE du Budget et des moments d'une journée, et elles
   se répètent six à dix fois par écran. Une couleur qui revient dix fois
   n'accentue plus rien — elle teinte. Elles passent dans l'encre pâle,
   comme les icônes des Réglages, du carnet et du questionnaire. La barre
   de proportion du Budget, elle, garde l'accent : elle porte une mesure. */
.row .r-ico,
.stay-row .ico,
.hl .ico,
.act .a-th,
.act .ac-s .ico,
.perk .ico,
.map-pop .mp-wx .ico{color:var(--accent,var(--ink-soft))}
.bline .ico,
.moment .mo-i{color:var(--ink-faint)}

/* Exception, et elle compte : la règle ci-dessus met TOUS les icônes d'une
   ligne à l'accent — elle est écrite pour l'icône de CATÉGORIE. Elle
   attrapait aussi la croix de suppression, qui se retrouvait être
   l'élément le plus coloré de chaque dépense : une action DESTRUCTRICE
   plus visible que le montant, répétée à chaque ligne. Vu dans la
   vitrine, sur une liste de huit dépenses — invisible sur une seule.

   .exp-del demande déjà color:var(--sub) ; il n'était jamais suivi,
   l'icône ayant sa propre couleur plus spécifique. On lui rend
   l'héritage. Mesuré dans le navigateur, en demandant la règle gagnante :
   svg calculé à rgb(31,168,168) alors que son parent était gris. */
.bline .exp-del .ico{color:currentColor}

/* Mêmes fuites d'or repérées sur Carte et Budget : libellés/repères qui
   devraient porter l'accent menthe fixe (da-accent.js) et non plus
   --gold (qui vaut ~encre depuis le retrait de l'or, section 19). */
.carte-daytitle .serif em,
.carte-daytitle .mono,
.map-pop .mp-l,
.bud-l{color:var(--accent-texte,var(--accent))}
.carte-mo-dot{background:var(--accent)}
.map-svg .route{stroke:var(--accent)}
.map-svg .mpin.on circle{fill:var(--accent)}


/* ══ 30. FUSION V7 — retour de la photo, claire cette fois ═══════════════
   La direction "Musemind" validée en maquette (héros photo + pin + gros
   titre, pastille CTA circulaire, nav à cercle plein) revient dans l'app
   réelle. Contrairement à la maquette, les photos restent claires et
   fidèles : aucun filtre de gradation sombre, juste un voile bas dégradé
   pour la lisibilité du texte — même logique que .hero-veil (§15),
   simplement appliquée là où la photo avait été retirée. */

/* 30.1 — Tableau de bord "en voyage" (accueil) : port fidèle du bloc
   "Accueil — voyage en cours" de la maquette v7 (hero-top-head + hero-bar
   + cta-circle qui déborde du bord), avec la photo réelle de la
   destination, claire. Valeurs reprises telles quelles de la maquette. */
.tb-head-photo{
  position:relative;padding:0;border-bottom:none;
  min-height:216px;
}
/* La photo était assombrie de 22 % sur toute sa surface alors que le
   commentaire d'à côté promettait une « photo claire, non retouchée, seul
   un voile bas assure la lisibilité ». On tient la promesse : l'image
   reprend sa lumière, et c'est le voile du bas qui porte seul le texte. */
.tb-head-photo::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:inherit;
}
.tb-head-photo>*{position:relative;z-index:1}
.tb-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,14,0.72),rgba(20,17,14,0.34) 34%,rgba(20,17,14,0.02) 66%,rgba(20,17,14,0.18));
}
/* Le titre était calé en HAUT de la photo, c'est-à-dire là où le voile est
   le plus faible : « Sardaigne » se posait sur le ciel clair et perdait
   son contraste. Il descend au pied de l'image, dans la partie que le
   voile assombrit — même traitement que les cartes du fil des traces, un
   seul langage pour toutes les cartes à photo de l'app. */
.tb-top-head{position:absolute; bottom:18px; left:20px; right:60px; z-index:2;}
/* Le petit repère de carte au-dessus du nom est retiré : une épingle
   générique posée sur la photo d'un lieu ne dit rien que le nom ne dise
   déjà, et elle flottait seule en haut d'une image dont le texte est
   maintenant en bas. */
.tb-top-head h3{
  font-family:var(--serif); font-weight:800; font-size:34px;
  color:#fff; letter-spacing:-0.02em; line-height:1; margin:0;
  text-shadow:0 2px 18px rgba(3,20,26,.5);
}
.tb-top-head p{
  margin:6px 0 0; font-size:12.5px; color:rgba(255,255,255,.86); font-weight:600;
  text-shadow:0 1px 12px rgba(3,20,26,.6);
}
.tb-head-photo .tb-wx{position:absolute; top:22px; right:18px; z-index:2; color:#FFFFFF;}
.tb-head-photo .tb-wx span{color:rgba(255,255,255,.78)}

/* ── Le programme du jour, en fil ────────────────────────────────────────
   La carte blanche qui flottait sur le bas de la photo (.tb-float) est
   retirée : elle recopiait le premier moment affiché juste en dessous,
   titre coupé en plein mot, vignette recadrant la photo déjà derrière
   elle, et une pastille qui accolait l'heure d'une activité à la durée du
   voyage. Ce qu'elle cherchait à dire — où en est-on de la journée — est
   maintenant dit dans le programme lui-même.

   Un rail vertical relie les moments, une pastille par heure. Le moment en
   cours porte l'accent et une pastille pleine cerclée ; ceux qui sont
   passés s'estompent. C'est la seule information de cet écran qu'on ne
   trouve nulle part ailleurs dans l'app. */
.tb-body{padding-top:16px !important;}
.tb-fil{position:relative; padding-left:2px}
/* Le rail s'arrête au centre de la dernière pastille plutôt que de
   continuer dans le vide sous le dernier moment. */
.tb-fil::before{
  content:''; position:absolute; left:4px; top:14px; bottom:22px; width:1.5px;
  background:var(--line2); border-radius:1px;
}
.tb-moment{
  position:relative; display:flex; align-items:flex-start; gap:11px;
  padding:7px 0 11px 20px; border-bottom:none;
}
.tb-moment:last-child{padding-bottom:2px}
.tb-puce{
  position:absolute; left:0; top:12px; width:9px; height:9px; flex:none;
  border-radius:50%; background:var(--surface);
  box-shadow:0 0 0 1.5px var(--line2); z-index:1;
}
.tb-m-main{flex:1; min-width:0}
.tb-time{
  font-family:var(--sans); font-size:11px; font-weight:700;
  color:var(--sub); min-width:38px; padding-top:1px;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.tb-mti{font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.32}
/* Deux lignes suffisent : le détail complet vit dans l'itinéraire, à une
   touche. Trois descriptions entières faisaient un mur de gris qui
   écrasait la carte et repoussait « Ce soir » hors de l'écran. */
.tb-mdesc{
  font-size:11.5px; font-weight:400; color:var(--sub);
  margin-top:3px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* En cours : la pastille se remplit et gagne un halo, l'heure passe en
   accent. Rien d'autre ne bouge — ni la taille du texte ni le fond — pour
   que la mise en avant se lise sans déformer la liste. */
.tb-moment.en-cours .tb-puce{
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-tint), 0 0 0 1.5px var(--accent);
}
.tb-moment.en-cours .tb-time{color:var(--accent-texte,var(--accent))}
.tb-moment.en-cours .tb-mti{font-weight:700}
.tb-moment.passe{opacity:.48}

/* Pied de carte — « Ce soir » et « Demain », même gabarit. */
.tb-pied{margin-top:12px; border-top:1px solid var(--line2)}
.tb-pied-l{display:flex; align-items:center; gap:11px; padding:11px 0}
.tb-pied-l + .tb-pied-l{border-top:1px solid var(--line2)}
.tb-pied-ic{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-tint); color:var(--accent-texte,var(--accent));
}
.tb-pied-k{
  font-family:var(--sans); font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sub);
}
.tb-pied-v{
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink);
  margin-top:2px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tb-pied-v i{font-style:normal; font-weight:400; color:var(--sub)}
.tb-pied-l svg{stroke:var(--sub); flex:none}

/* 30.2 — En-tête de l'itinéraire : la photo revient, en clair — remplace
   la vignette .itn-thumb (56px) par un vrai héros pleine largeur, sans
   toucher au reste de la structure (.itn-hero-top, .rule, tabs, jours
   restent identiques). Coins modérément arrondis (--card-radius), pastille
   CTA circulaire déjà en place ailleurs (.fa-chat) — cohérence. */
/* Ne touche PAS au padding de base de .itn-hd — bookingView() et
   destinationView() (app.js/screens-detail.js) réutilisent la même classe
   sans le variant photo, et perdraient leur respiration sous l'encoche si
   on la mettait à 0 globalement. .itn-hero-photo reste contenue dans le
   padding du parent (12px haut, 24px côtés) — carte encadrée, coins
   arrondis partout, comme les autres écrans de la DA validée, plutôt que
   pleine largeur bord à bord. */
.itn-hero-photo{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:220px;margin:0;padding:14px 16px 16px;
  display:flex;flex-direction:column;justify-content:space-between;
  background-color:var(--surface2);background-size:cover;background-position:center;
}
/* ── LA PHOTO REPREND SA COULEUR ──────────────────────────────────────
   Charlotte : « je voudrais que les photos partout sur l'app soient plus
   jolies, je les trouve fades ». Mesuré avant de toucher :

     · cette photo passait sous saturate(.82) contrast(1.1)
       brightness(.8) — DIX-HUIT pour cent de sa couleur et VINGT pour
       cent de sa lumière retirés sur toute sa surface ;
     · puis sous un voile de 32 % en moyenne.

   Et le résultat mesuré au pixel : le titre blanc ressortait à 16,4:1
   contre le fond. Le plancher WCAG pour un gros titre est de 3:1. Nous
   avions huit fois le voile nécessaire — la photo payait pour une
   lisibilité qui était acquise depuis longtemps.

   LA RÈGLE : on ne dé-sature jamais une photo globalement. Un filtre agit
   partout, y compris là où il n'y a pas un mot à lire ; un voile agit là
   où le texte se pose, et nulle part ailleurs. Le filtre disparaît, le
   voile reste mais recule.

   Le ::before est conservé, vide de filtre : il porte encore l'image
   héritée sous le voile, et le retirer changerait l'empilement. */
.itn-hero-photo::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:inherit;
}
.itn-hero-photo::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgba(20,17,14,0.62),rgba(20,17,14,0) 46%,rgba(20,17,14,0.06));
}
.itn-hero-photo>*{position:relative;z-index:1}
.itn-hero-photo .ihx-btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
.itn-hero-photo .ihx-btn svg{stroke:#FFFFFF}
.itn-hero-photo .eyebrow{color:rgba(255,255,255,.78)}
.itn-hero-photo .rule{background:rgba(255,255,255,.22)}
.itn-hero-photo .rule::before{background:#FFFFFF}
.itn-hero-photo .itn-title{color:#FFFFFF}
.itn-hero-photo .itn-dna{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.itn-hero-photo .itn-tagline{color:rgba(255,255,255,.82)}
.itn-hero-photo .itn-dates{color:#FFFFFF}
.itn-hero-photo .itn-thumb{display:none}

/* 30.2b — Hébergement : le bandeau photo qui avait été retiré au profit
   d'un en-tête plat revient, fidèle au bloc .stay-hero de la maquette v7
   (aucune raison que cet écran soit le seul sans identité photo). */
.stay-hero{
  height:150px; border-radius:var(--r-lg); position:relative; overflow:hidden;
  box-shadow:0 14px 26px -16px rgba(31,26,20,.4);
  background-color:var(--surface2); background-size:cover; background-position:center;
}
.stay-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,14,0) 42%, rgba(20,17,14,.85) 100%);}
.stay-hero .info{position:absolute; left:14px; right:14px; bottom:12px; z-index:2;}
.stay-hero .info .n{font-family:var(--serif); font-weight:700; font-size:16px; color:#fff; margin:0; line-height:1.25;}
.stay-hero .info .r{font-size:11px; color:rgba(255,255,255,.75); margin-top:2px;}

/* 30.3 — Réglages : l'icône, sans la gommette ────────────────────────────
   Chaque ligne portait une pastille ronde en accent pâle avec une icône
   orange dedans. Six sur le même écran, toutes identiques : l'accent n'y
   désignait rien — ni une action principale, ni un état — il DÉCORAIT.
   C'est exactement le défaut corrigé partout ailleurs le même jour
   (« l'app fait vieillotte »), et il avait survécu ici parce que cet
   écran n'avait pas été rouvert.

   La règle de la maison : l'accent marque ce sur quoi on agit. Six portes
   de réglages ne sont pas six actions principales. L'icône reste — elle
   sert à repérer la ligne d'un coup d'œil — mais dans l'encre du texte,
   posée dans la marge comme un signe de renvoi, pas comme un bouton.
   banc-da-2026 compte les aplats d'accent par écran ; cette page en avait
   six qu'il ne regardait pas. */
.pf-row-b{gap:14px}
.pf-row-b-ic{
  width:22px;height:22px;flex:none;
  background:none;color:var(--ink-faint);
  display:flex;align-items:center;justify-content:center;
}
.pf-row-b:active .pf-row-b-ic{color:var(--ink)}

/* 30.4 — Budget : chaque catégorie gagne un filet de progression fin,
   calculé sur les mêmes montants déjà affichés (aucune nouvelle donnée).

   La règle visait .bline tout court, et touchait donc TOUTES les lignes du
   budget : les dépenses et les soldes entre voyageurs, qui n'ont pas de
   filet, s'empilaient eux aussi sur quatre lignes — icône, libellé,
   montant, corbeille — au lieu d'une seule. Restreinte aux lignes qui
   portent réellement une barre. */
.bline-cat{flex-direction:column;align-items:stretch;gap:8px}
.bline-top{display:flex;align-items:center;gap:12px}
.bline-bar{height:5px;border-radius:3px;background:var(--fog-soft);overflow:hidden}
.bline-bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
/* Chaque catégorie du Budget portait la même gommette d'accent pâle —
   six ou sept sur l'écran. La BARRE de proportion, elle, est en accent à
   juste titre : elle porte une mesure, elle ne décore pas. L'icône passe
   dans l'encre, comme celles des Réglages, du carnet et du
   questionnaire : une seule et même règle sur toute l'app. */
.bline-ic{
  width:26px;height:26px;border-radius:0;flex:none;
  background:none;color:var(--ink-faint);
  display:flex;align-items:center;justify-content:center;
}

/* 30.4b — Carte total du Budget : bannière sombre en verre plutôt qu'une
   carte blanche avec un simple filet doré en haut — reprise fidèle de
   .bud-head dans la référence "Verre & Menthe". Barre de progression
   réglé/restant ajoutée : b.spent existait déjà dans les données
   (BUDGET.spent) mais n'était affiché nulle part. */
.bud-card{
  background:radial-gradient(120% 90% at 85% -10%, var(--accent-soft), transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  border:none; box-shadow:0 16px 40px -14px rgba(31,26,20,.55);
}
.bud-card::before{content:none}
.bud-l{color:color-mix(in srgb, var(--accent) 55%, white); font-size:10px; letter-spacing:2px}
.bud-v{color:#FFFFFF; font-family:var(--serif); font-weight:800}
.bud-s{color:rgba(255,255,255,.65); font-family:var(--sans); font-size:12px; text-transform:none; letter-spacing:normal}
.bud-prog{height:8px; border-radius:var(--r-sm); background:rgba(255,255,255,.14); overflow:hidden; margin-top:18px; position:relative}
.bud-prog i{display:block; height:100%; border-radius:var(--r-sm); background:linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 70%, white))}
.bud-legend{display:flex; justify-content:space-between; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.75); margin-top:9px; position:relative}

/* 30.5 — Pane Carte : fiche voyage flottante sur la carte, reprise de
   Wayvi (pin + carte photo en bas avec durée/prix). Mêmes données que le
   pane Itinéraire (nDays, budgetTotal, accommodations). */
.itn-map-card{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-md);padding:8px;
  box-shadow:0 14px 28px -14px rgba(31,26,20,.35);
  cursor:pointer;
}
.itn-map-card-th{
  width:52px;height:52px;flex:none;border-radius:var(--r-sm);
  background-size:cover;background-position:center;background-color:var(--surface2);
}
.itn-map-card-m{flex:1;min-width:0}
.itn-map-card-t{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itn-map-card-s{font-size:11px;color:var(--ink-soft);margin-top:2px}
.itn-map-card-p{
  flex:none;font-family:var(--serif);font-weight:700;font-size:12.5px;color:var(--accent-ink,#FFFFFF);
  background:var(--accent);border-radius:var(--r-lg);padding:6px 11px;
}

/* 30.6 — Accueil sans voyage : carte en verre (pas de photo), reprise
   fidèle de la référence "Verre & Menthe" (d5960cfa) — fond sombre
   translucide + flou, même composant que .tb-hero-bar/.glass-ic ailleurs
   dans l'app. L'animation vient du champ lui-même (placeholder en
   machine à écrire piloté par museControl(), + ligne qui scintille tant
   qu'on n'a pas commencé à écrire) plutôt que d'une image plein cadre. */
.muse-glass{
  position:relative; overflow:hidden;
  background:rgba(20,17,14,.42);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg); padding:18px 18px 16px;
  box-shadow:0 20px 40px -18px rgba(31,26,20,.4);
}
.muse-top{display:flex; align-items:center; justify-content:space-between}
.muse-glass .eyebrow{color:rgba(255,255,255,.82)}
.muse-nsew{font-size:9.5px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.5)}
.muse-field{position:relative; margin-top:14px}
.muse-input{
  width:100%; border:none; background:transparent; outline:none;
  font-family:var(--serif); font-weight:700; color:#fff;
  font-size:21px; line-height:1.2; padding:2px 0 12px; letter-spacing:-0.01em;
}
.muse-input::placeholder{color:rgba(255,255,255,.55); opacity:1}
.muse-line{
  display:block; height:2px; border-radius:2px;
  background:rgba(255,255,255,.2); position:relative; overflow:hidden;
}
.muse-line::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:40%;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.9), transparent);
  transform:translateX(-130%); animation:museShimmer 3.5s cubic-bezier(.5,0,.5,1) infinite;
}
@media (prefers-reduced-motion: reduce){.muse-line::after{animation:none; opacity:0}}
@keyframes museShimmer{0%{transform:translateX(-130%)} 60%,100%{transform:translateX(330%)}}
.muse-input:focus ~ .muse-line::after{animation:none; opacity:0}
.muse-sub{position:relative; font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.55; margin-top:12px; font-weight:500}
.muse-go-wide{
  width:100%; margin-top:14px; height:48px; border-radius:var(--r-lg); border:none;
  background:var(--accent); color:var(--accent-ink,#fff);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--serif); font-weight:700; font-size:13.5px;
}
.muse-go-wide svg{stroke:currentColor}

/* 30.7 — Prix/countdown des voyages sauvegardés : pastille pleine plutôt
   que texte, reprise des cartes de suggestion Wayvi (mêmes données —
   budget et compte à rebours déjà calculés dans savedTripCard). */
.trip-card-foot .accent{
  background:var(--accent);color:var(--accent-ink,#FFFFFF);
  border-radius:var(--r-lg);padding:5px 11px;font-weight:600;font-size:12px;
  white-space:nowrap;flex:none;
}

/* 30.8 — Icônes de moment (programme du jour) : pastille teintée accent
   plutôt qu'un simple aplat neutre — repris de la maquette "Programme
   complet" (icône ronde + heure + titre), même structure .moment déjà en
   place (mo-t/mo-i/mo-ti/mo-d), aucune nouvelle donnée. */
/* Les moments d'une journée : même correction. Un jour bien rempli
   affichait sept gommettes d'accent d'affilée — au bout de trois, la
   couleur ne désigne plus rien. L'icône garde sa teinte (règle §20
   plus haut) ; c'est le rond coloré derrière elle qui disparaît. */
.moment .mo-i{background:none}

/* 30.9 — Deux motifs de la maquette qui n'existaient encore nulle part
   dans l'app réelle (retour de Charlotte sur les références Musemind) :
   le trajet du jour (ligne dessinée sur une photo + pastilles Distance/
   Durée) et la carte radiale des lieux du jour. dayRouteView() (voir
   screens-detail.js) construit ces deux blocs à partir des données déjà
   générées (moments du jour) — pas de nouvelle source de données, donc
   pas de distance/durée réelle : les pastilles affichent "N étapes" et
   l'amplitude horaire du jour, seules données réellement disponibles. */
.route-card{
  border-radius:var(--r-xl); position:relative; overflow:hidden; height:220px;
  background-color:var(--surface2); background-size:cover; background-position:center;
  box-shadow:0 16px 32px -18px rgba(31,26,20,.4);
}
.route-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,14,.18) 0%, rgba(20,17,14,.7) 100%);}
.route-svg{position:absolute; inset:0; z-index:2; width:100%; height:100%;}
.route-dot{position:absolute; width:9px; height:9px; border-radius:50%; background:#fff; z-index:3; box-shadow:0 0 0 4px rgba(255,255,255,.22);}
.route-tag{position:absolute; z-index:3; font-size:10.5px; font-weight:700; color:#111; background:#fff; padding:4px 9px; border-radius:var(--r-lg); white-space:nowrap;}
.route-stats{position:absolute; left:14px; right:14px; bottom:14px; z-index:3; display:flex; gap:8px;}
.stat-chip{
  flex:1; background:rgba(20,17,14,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--r-md); padding:9px 12px;
  display:flex; align-items:center; gap:7px;
}
.stat-chip svg{width:14px;height:14px; flex-shrink:0; opacity:.85; stroke:#fff;}
.stat-chip .v{font-size:13px; font-weight:700; color:#fff; line-height:1.1;}
.stat-chip .k{font-size:9.5px; color:rgba(255,255,255,.6); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}

.radial{position:relative; width:100%; height:280px; margin-top:18px; flex-shrink:0;}
.radial-rings{position:absolute; inset:0; width:100%; height:100%;}
.center-ava{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -6px rgba(31,26,20,.35);
}
.center-ava svg{width:19px;height:19px; stroke:var(--accent-ink,#fff);}
.rad-node{position:absolute; transform:translate(-50%,-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:5px; width:64px; cursor:pointer;}
.rad-node .th{
  width:44px; height:44px; border-radius:var(--r-md); background-size:cover; background-position:center;
  background-color:var(--accent-tint); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 16px -8px rgba(31,26,20,.4);
}
.rad-node .th svg{stroke:var(--accent);}
.rad-node .lb{font-size:9.5px; font-weight:700; color:var(--ink); white-space:nowrap; text-align:center; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.rad-node .ds{font-size:8.5px; color:var(--sub); white-space:nowrap;}

/* ══ 31. DA VALIDÉE (11/08) — "Voilà ce que j'attendais" ═══════════════
   Détails de la maquette approuvée, portés dans le vrai code : carte
   "billet" (encoches + ligne pointillée à la jonction photo/info) sur les
   voyages sauvegardés, pastille prix. Les cercles d'encoche restent
   insérés (pas à cheval sur le bord) car .trip-card a overflow:hidden —
   contrairement à la maquette qui pouvait laisser déborder sur fond uni. */
.trip-card-hero{position:relative}
.trip-card-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:inherit;
}
.trip-card-hero>*{position:relative; z-index:1}
/* Le sélecteur >* ci-dessus (même spécificité, chargé après screens.css)
   écrasait le position:absolute des enfants positionnés du hero : le
   titre remontait de 14px AU-DESSUS de la photo (rogné par l'overflow de
   la carte), le voile de lisibilité s'aplatissait à zéro, coordonnées et
   badge retombaient dans le flux (audit esthétique release). On ré-ancre
   explicitement ces quatre-là, en gardant le z-index:1 posé au-dessus. */
.trip-card-hero>.trip-card-cap,
.trip-card-hero>.hero-veil,
.trip-card-hero>.trip-card-coords,
.trip-card-hero>.trip-card-badge{position:absolute}
.trip-card-foot{position:relative; padding-top:19px; border-top:2px dashed var(--sub-2);}
/* Les deux pastilles rondes qui encadraient la ligne pointillée sont
   retirées. Intention d'origine : une perforation de billet, la carte se
   lisant comme un ticket détachable. Mais posées à 10px des bords au lieu
   d'être à cheval dessus, elles ne perforaient rien — deux ronds blancs
   flottant sur la photo, dont Charlotte a fini par demander « les deux
   petits ronds servent à quoi ? ». Un ornement qu'il faut expliquer a
   manqué sa cible. La ligne pointillée seule porte très bien la même idée. */
.trip-card-foot .accent{
  background:var(--accent-tint); color:var(--accent-texte,var(--accent));
  border-radius:var(--r-sm); padding:4px 10px; font-weight:700;
}

/* Pépites — fiche "People like" */
.gem-card2{margin-top:18px; border-radius:var(--card-radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-postcard);}
/* Décor par défaut, AUCUNE photo : les quatre cartes affichaient la même
   image de la destination sous quatre noms de criques différentes
   (Charlotte, 14/08 : « des photos des endroits, pas la même photo
   partout »). Quand Wikimedia a une photo avérée du lieu, gem-photos.js
   la pose en fond et ajoute .has-photo ; sinon la carte assume le décor
   dessiné, décliné en quatre teintes pour qu'on distingue les cartes au
   défilement. */
/* Décor sans photo : des courbes de niveau, comme sur une carte d'état-
   major. C'est ce qu'on montre quand on n'a AUCUNE photo avérée du lieu —
   un motif de cartographe dit « nous n'avons pas d'image de cet endroit »
   sans faire semblant, là où une jolie photo d'ailleurs mentirait. Les
   quatre teintes se relaient pour qu'on distingue les cartes au
   défilement. */
.gem-card2-photo{
  height:170px; position:relative; background-size:cover; background-position:center;
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-30 132 Q 35 96 75 116 T 190 92'/%3E%3Cpath d='M-30 110 Q 35 74 75 94 T 190 70'/%3E%3Cpath d='M-30 88 Q 35 52 75 72 T 190 48'/%3E%3Cpath d='M-30 66 Q 35 30 75 50 T 190 26'/%3E%3Cpath d='M-30 44 Q 35 8 75 28 T 190 4'/%3E%3Cpath d='M-30 22 Q 35 -14 75 6 T 190 -18'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(155deg, color-mix(in srgb, var(--accent) 96%, black) 0%, var(--accent) 62%, color-mix(in srgb, var(--accent) 70%, white) 100%);
  background-size:150px 150px, cover;
  transition:background-image .4s ease;
}
.gem-card2-photo.t1{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-30 132 Q 35 96 75 116 T 190 92'/%3E%3Cpath d='M-30 110 Q 35 74 75 94 T 190 70'/%3E%3Cpath d='M-30 88 Q 35 52 75 72 T 190 48'/%3E%3Cpath d='M-30 66 Q 35 30 75 50 T 190 26'/%3E%3Cpath d='M-30 44 Q 35 8 75 28 T 190 4'/%3E%3Cpath d='M-30 22 Q 35 -14 75 6 T 190 -18'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(155deg, color-mix(in srgb, var(--accent) 62%, white) 0%, var(--accent) 48%, color-mix(in srgb, var(--accent) 78%, black) 100%);
  background-position:-40px -25px, center;
}
.gem-card2-photo.t2{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-30 132 Q 35 96 75 116 T 190 92'/%3E%3Cpath d='M-30 110 Q 35 74 75 94 T 190 70'/%3E%3Cpath d='M-30 88 Q 35 52 75 72 T 190 48'/%3E%3Cpath d='M-30 66 Q 35 30 75 50 T 190 26'/%3E%3Cpath d='M-30 44 Q 35 8 75 28 T 190 4'/%3E%3Cpath d='M-30 22 Q 35 -14 75 6 T 190 -18'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(200deg, color-mix(in srgb, var(--accent) 78%, black) 0%, color-mix(in srgb, var(--accent) 100%, black) 45%, color-mix(in srgb, var(--accent) 58%, white) 100%);
  background-position:-90px -60px, center;
}
.gem-card2-photo.t3{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-30 132 Q 35 96 75 116 T 190 92'/%3E%3Cpath d='M-30 110 Q 35 74 75 94 T 190 70'/%3E%3Cpath d='M-30 88 Q 35 52 75 72 T 190 48'/%3E%3Cpath d='M-30 66 Q 35 30 75 50 T 190 26'/%3E%3Cpath d='M-30 44 Q 35 8 75 28 T 190 4'/%3E%3Cpath d='M-30 22 Q 35 -14 75 6 T 190 -18'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(120deg, color-mix(in srgb, var(--accent) 55%, white) 0%, var(--accent) 52%, color-mix(in srgb, var(--accent) 88%, black) 100%);
  background-position:-20px -80px, center;
}
/* La vraie photo (posée en style inline par gem-photos.js) remplace tout :
   plus de motif, plus de dégradé. */
.gem-card2-photo.has-photo{background-size:cover; background-position:center;}
/* Voile de lecture : très léger sur le décor dessiné (déjà sombre en bas),
   franc sur une vraie photo dont on ne maîtrise ni le cadrage ni la
   luminosité — c'est lui qui garantit que le nom reste lisible. */
.gem-card2-photo::before{content:''; position:absolute; inset:0; z-index:0; background:inherit; opacity:0;}
.gem-card2-photo.has-photo::before{opacity:1;}
.gem-card2-photo::after{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,17,14,0) 55%, rgba(20,17,14,.68) 100%);}
/* Sur une VRAIE photo, on ne maîtrise ni le cadrage ni la luminosité : le
   nom peut tomber sur un ciel clair ou une mer en plein soleil. Le voile
   monte donc plus haut et descend plus bas que sur le décor dessiné, dont
   le bas est déjà sombre par construction. */
.gem-card2-photo.has-photo::after{background:linear-gradient(180deg, rgba(20,17,14,0) 32%, rgba(20,17,14,.42) 62%, rgba(20,17,14,.82) 100%);}
.gem-card2-photo .in{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:14px;}
.gem-card2-photo .n{font-family:var(--serif); font-weight:700; font-size:18px; color:#fff;}
.gem-card2-photo .loc{display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,.78); margin-top:3px;}
.gem-card2-photo .loc svg{stroke:rgba(255,255,255,.78);}
.gem-card2-body{padding:14px 16px 16px;}
.gem-card2-body p{font-size:13px; color:var(--sub); line-height:1.6; margin:0;}
/* Le conseil pratique était une pastille inline-flex : une phrase entière
   ne pouvait pas y passer à la ligne et sortait de la carte, coupée en
   plein mot (« éviter juillet… », capture de Charlotte). C'est un
   paragraphe, pas une étiquette : il occupe toute la largeur et se plie
   sur autant de lignes qu'il faut. */
.gem-card2-tip{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:12px; padding:10px 12px;
  background:var(--surface2); border-radius:var(--r-sm);
  font-size:12px; font-weight:600; line-height:1.5; color:var(--ink);
}
.gem-card2-tip svg{flex:none; margin-top:1px; stroke:var(--accent);}
.gem-card2-tip span{min-width:0;}
/* Attribution Wikimedia — obligation des licences CC BY / CC BY-SA.
   Discrète mais présente, juste sous la photo qu'elle crédite. */
.gem-card2-credit{
  font-size:10px; line-height:1.4; color:var(--ink-faint,var(--sub));
  margin-bottom:10px; word-break:break-word;
}
.gem-card2-cta{
  margin-top:14px; height:44px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--serif); font-weight:700; font-size:13px; color:var(--accent-ink,#fff); text-decoration:none;
  background:var(--accent);
}
.gem-card2-cta svg{stroke:var(--accent-ink,#fff);}

/* ══ 32. ASSISTANT IA — fond blanc gardé, bulle "moi" en menthe ═════════
   Un fond turquoise plein cadre avait été essayé ici (même famille que
   .bud-card/.pf-door) mais Charlotte veut garder le chat blanc — revenu
   en arrière. Seule la bulle "moi" reste en menthe au lieu de l'encre
   plate d'origine, cohérent avec le reste de la DA (menthe fixe partout,
   décidé plus tôt) et indépendant de la couleur de fond. */
.bub.me,.bub.us{background:var(--accent); color:var(--accent-ink,#FFFFFF)}

/* ══ 33. ONBOARDING — océan plein cadre ══════════════════════════════
   Le premier écran vu à l'installation restait un écran texte plat sur
   fond neutre — reprise fidèle du fond océan plein cadre de la
   référence "Verre & Menthe" ([data-ov="onboarding"]). Les deux vrais
   boutons (Commencer / J'ai déjà un compte) remplacent le "go-pill" de
   défilement du mockup, qui ne correspond à aucune interaction réelle
   ici — pas de pattern emprunté à l'extérieur des références. */
.ov[data-ov="onboarding"]{
  background:
    radial-gradient(90% 40% at 78% -6%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(120% 55% at 12% 30%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(160% 80% at 50% 118%, color-mix(in srgb, var(--accent) 70%, black) 0%, transparent 62%),
    linear-gradient(175deg, color-mix(in srgb, var(--accent) 35%, white) 0%,
      color-mix(in srgb, var(--accent) 10%, white) 26%, var(--accent) 55%,
      color-mix(in srgb, var(--accent) 75%, black) 100%);
}
/* Texte en VERT PROFOND, pas en blanc (audit) : le dégradé est presque
   blanc entre 0 et 30 % — exactement là où le label et le titre sont
   posés. Du blanc sur du blanc, que trois ombres portées tentaient de
   rattraper. L'encre sombre tient sur toute la hauteur du dégradé
   (jusqu'à 4,6:1 sur la menthe pleine) et rend le premier écran net. */
.onb-rule{background:rgba(20,17,14,.28)}
.onb-kw{color:rgba(16,36,31,.72)}
.onb-h{color:var(--ink)}
.onb-h em{color:#0B6E6E}
.onb-s{color:rgba(16,36,31,.82); font-weight:500}
.onb-acts .btn{background:#FFFFFF; color:var(--ink); box-shadow:0 14px 34px -10px rgba(31,26,20,.45)}
.onb-acts .btn-ghost{
  background:rgba(255,255,255,.18); color:#FFFFFF; border-color:rgba(255,255,255,.4);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.onb-acts .dots i{background:rgba(255,255,255,.35)}
.onb-acts .dots i.on{background:#FFFFFF}

/* ══ 34. COMMUNAUTÉ — actions en menthe plutôt qu'en encre ═══════════════
   .cc-btn (Accepter une demande d'ami, Ajouter, Accepter un voyage
   partagé) était un simple bouton contour noir — aligné sur .btn (plein,
   menthe) pour l'action principale, .cc-btn.ghost reste un contour
   neutre pour l'action secondaire (Refuser). Ne touche pas
   .track-toggle (filtre "Voyageurs à proximité") : ce composant reste
   volontairement neutre, décision déjà actée (voir section 20, .voy-
   pill.on exclu pour la même raison — un filtre n'a pas de couleur de
   destination). */
.cc-btn:not(.ghost){
  background:var(--accent); color:var(--accent-ink,#FFFFFF); border:none;
}

/* ══ 34b. PROFIL & COMMUNAUTÉ — même standard que le reste de la DA ═════
   Profil : l'identité (avatar/nom) et les chiffres fusionnent dans une
   bannière sombre de la même famille que Budget/.pf-door, au lieu de
   blocs plats posés sur le fond. Communauté : recherche élevée (carte
   blanche ombrée, icône menthe) et chaque section dans sa propre carte
   blanche, comme les notifications. */
.pf-hero{
  position:relative; overflow:hidden;
  margin-top:18px; border-radius:var(--r-lg); padding:20px 20px 0;
  background:radial-gradient(120% 90% at 85% -10%, var(--accent-soft), transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px -14px rgba(31,26,20,.6);
}
/* Bannière habillée par la photo du dernier voyage (loadProfileTab) :
   même grammaire que le profil public, .pp-fond/.pp-voile. Le voile est un
   peu plus dense ici parce que la bannière porte plus de texte (nom, mail,
   trois chiffres, deux liens). */
.pf-hero.avec-photo{background:var(--ink)}
.pf-hero > *{position:relative; z-index:1}
.pf-fond{position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; opacity:.5}
.pf-voile{position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,rgba(var(--nuit-voile),.5),rgba(var(--nuit-voile),.9))}
.pf-hero .pf-name-b{color:#FFFFFF}
.pf-hero .pf-sub-b{color:rgba(255,255,255,.65)}
.pf-hero .pf-stats{
  border-top:1px solid rgba(255,255,255,.12); border-bottom:none;
  margin-top:18px; padding:14px 0 16px;
}
.pf-hero .pf-stats .ps-v{color:#FFFFFF}
.pf-hero .pf-stats .ps-l{color:color-mix(in srgb, var(--accent) 55%, white)}
.pf-hero .pf-stats .prof-stat + .prof-stat::before{background:rgba(255,255,255,.12)}

.cc-search{
  position:relative; border-radius:var(--r-pill); background:var(--surface);
  box-shadow:var(--shadow-card);
}
/* La loupe était en accent. Une loupe n'est pas une action : elle nomme
   le champ. L'accent reste à ce sur quoi on agit — c'est la règle tenue
   partout ailleurs, et elle avait manqué ici. */
.cc-search-ico{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--sub); display:flex; pointer-events:none;
}
.cc-search input{
  width:100%; padding:14px 16px 14px 44px; border-radius:var(--r-pill); border:none;
  background:transparent; font-size:14px; font-family:var(--sans); color:var(--ink);
}
.cc-search input:focus{outline:none}
.cc-search:focus-within{box-shadow:var(--shadow-card), 0 0 0 1.5px var(--accent)}

.cc-card{
  background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line);
  box-shadow:var(--shadow-card); padding:16px 16px 10px; margin-bottom:14px;
}
.cc-card:last-child{margin-bottom:0}
/* La porte de l'itinéraire complet — aperçu gratuit, reste payant. Une
   seule carte, deux emplacements (dans un jour verrouillé, et à la place
   d'Explorer / Hébergements) : le style vit ici, pas en ligne. */
.itn-verrou{margin-top:18px;text-align:center;padding:22px 18px 18px}
.itn-day-prog .itn-verrou{margin-top:10px}
.itn-verrou-flou{filter:blur(4px);opacity:.55;pointer-events:none;user-select:none;-webkit-user-select:none;text-align:left;margin-bottom:12px}
.itn-verrou-l{font-size:13px;color:var(--ink);line-height:1.6;white-space:nowrap;overflow:hidden}
.itn-verrou-l span{font-family:var(--mono);font-size:10px;color:var(--sub);margin-right:8px}
.itn-suite{text-align:left;padding:18px}
.itn-suite-barre{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:12px}
.itn-suite-barre i{display:block;height:100%;background:var(--accent);transition:width .5s ease}
.itn-suite-phase{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--sub);margin-top:8px}
.itn-confirme{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-texte,var(--accent));border:1px solid var(--accent-tint);background:var(--accent-tint);border-radius:6px;padding:2px 6px;margin-left:4px}
.cc-card-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px}
.cc-card-h h2{font-family:var(--serif); font-weight:700; font-size:15px; margin:0; color:var(--ink)}
.cc-card-meta{
  font-size:10.5px; font-weight:700; color:var(--accent-texte,var(--accent));
  background:var(--accent-tint); border-radius:var(--r-sm); padding:3px 9px;
}
.cc-card .row:last-child{border-bottom:none}

/* ── Vos amis en tuiles-photo ──────────────────────────────────────────
   Même grammaire que la grille de Tendances : photo plein cadre, voile,
   texte posé dessus. La photo est la couverture du dernier voyage publié
   par la personne (_socAmisCouvertures) ; en son absence la tuile garde
   la teinte propre à cette personne (hsTeinte), jamais un aplat gris.
   La grille sort des marges de la carte pour aller au bord du texte. */
.ami-grille{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.ami-tuile{
  position:relative; overflow:hidden; aspect-ratio:1/1;
  border-radius:var(--card-radius); cursor:pointer;
  transition:transform .18s var(--spring);
  touch-action:manipulation;
}
.ami-tuile:active{transform:scale(.96)}
.at-ph{position:absolute; inset:0; background-size:cover; background-position:center}
/* Voile seulement là où le texte se pose : le haut de la photo reste nu,
   comme sur les tuiles de destination. */
.at-voile{position:absolute; inset:0;
  background:linear-gradient(to top,rgba(20,17,14,.82),rgba(20,17,14,.06) 62%)}
.at-bas{position:absolute; left:11px; right:11px; bottom:11px;
  display:flex; align-items:center; gap:9px}
.at-av{
  flex:none; width:30px; height:30px; border-radius:50%;
  background-size:cover; background-position:center;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55);
}
.at-av.vide{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:11px; font-weight:700; color:#FFFFFF;
  letter-spacing:.3px;
}
.at-txt{min-width:0}
.at-n{
  font-family:var(--serif-text); font-weight:600; font-size:15px;
  color:#FFFFFF; letter-spacing:-.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.at-d{
  font-family:var(--mono); font-size:8.5px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.at-d:empty{display:none}

/* ══ 34c. FINITIONS D'ENSEMBLE — passe d'agence ═══════════════════════ */

/* Réglages : justify-content:space-between + 3 enfants centrait le
   libellé entre l'icône et le chevron — la colonne texte prend l'espace
   restant pour rester alignée à gauche comme toute liste iOS. */
.pf-row-b .m{flex:1}

/* Questionnaire — les trois façons de composer ─────────────────────────
   Trois carrés d'accent pâle avec une icône orange dedans, sur l'écran
   qui ouvre la composition : c'est le troisième endroit où le même
   défaut se répétait (Réglages, portes du carnet, ici). Et il était
   pire ici, parce que l'accent était posé sur les TROIS options : une
   couleur qui marque tout le monde ne désigne personne.

   L'icône passe dans l'encre du texte, sans carré coloré. La hiérarchie
   entre les trois options est déjà écrite — la voie complète est en
   premier, c'est la décision prise avec Charlotte — et elle se lit dans
   l'ordre et dans les mots, pas dans un aplat répété trois fois. */
.mode-btn .m-i{
  width:26px;height:26px;border-radius:0;
  background:none;color:var(--ink-faint);
}

/* Boutons ronds posés sur les photos (Itinéraire, Hébergement, Trajet) :
   vrai verre dépoli plutôt qu'un voile sombre terne. */
.itn-hero-photo .ihx-btn{
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);
}

/* CTA principaux : APLAT, pas dégradé.
   Le dégradé à 135° venait de la direction « Verre & Menthe » et s'était
   étendu à tous les boutons pleins. Il pose deux problèmes.

   Le premier est de goût : un dégradé sur un bouton est le jumeau de la
   lueur colorée qu'on vient de retirer — même époque, même aveu. La
   référence apportée par Charlotte n'en a aucun.

   Le second se mesure : le dégradé PART à 62 % d'accent mêlé de blanc.
   Le coin haut-gauche du bouton est donc nettement plus pâle que le
   coin bas-droit, et le libellé y perd du contraste sur la moitié de sa
   longueur. Un aplat n'a pas ce défaut : la couleur qu'on a choisie est
   celle qu'on voit, partout sur le bouton. */
.btn,.muse-go-wide,.cc-btn:not(.ghost),.gc-cta{
  background:var(--accent);
}

/* Tuiles Destinations : la coordonnée en mono nu flottait sur la photo —
   pastille de verre comme le reste de la DA, et le filet sous le nom
   passe en menthe (il était resté sur l'ancien doré). */
.tile .code{
  background:rgba(20,17,14,.35);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm); padding:4px 8px; color:#FFFFFF;
  top:10px; left:10px; letter-spacing:.8px;
}
.tile .t-rule{background:color-mix(in srgb, var(--accent) 60%, white)}

/* Trajet du jour : frise verticale (remplace l'ancienne radiale) — rail
   menthe pâle continu, icône dans un cercle blanc ombré, heure en
   pastille. */
.day-tl{margin-top:14px}
.day-tl-row{display:flex; align-items:center; gap:13px; padding:9px 0; position:relative}
.day-tl-row::before{
  content:''; position:absolute; left:21px; top:-9px; bottom:-9px; width:2px;
  background:var(--accent-soft);
}
.day-tl-row:first-child::before{top:50%}
.day-tl-row:last-child::before{bottom:50%}
.day-tl-row:first-child:last-child::before{content:none}
.day-tl-ic{
  position:relative; z-index:1; width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--accent-soft);
  box-shadow:var(--shadow-card); color:var(--accent-texte,var(--accent));
  display:flex; align-items:center; justify-content:center;
}
.day-tl-n{flex:1; min-width:0; font-family:var(--serif); font-weight:600; font-size:13.5px; color:var(--ink); line-height:1.35}
.day-tl-t{
  flex:none; font-size:11px; font-weight:700; color:var(--accent-texte,var(--accent));
  background:var(--accent-tint); border-radius:var(--r-sm); padding:5px 10px;
  font-variant-numeric:tabular-nums;
}

/* Tendances — vue radiale des lieux tendance par destination, reprise
   de la maquette "Japan Checkpoint" : anneaux concentriques, photo de
   la destination au centre, points forts curatés autour. Réutilise
   .radial/.rad-node/.center-ava (libérés par le passage du Trajet du
   jour en frise). */
.trend-rings{position:absolute; inset:0; width:100%; height:100%}
.trend-rings circle{fill:none; stroke:var(--accent-soft); stroke-width:1}
.trend-radial{height:300px; margin-top:8px}
.trend-radial .rad-node{width:104px}
.trend-radial .rad-node .lb{white-space:normal; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.center-ava.trend-center{
  width:58px; height:58px; background-size:cover; background-position:center;
  border:3px solid #FFFFFF; box-shadow:0 10px 24px -8px rgba(31,26,20,.35);
}

/* ══ 35. ACCUEIL — vague vue du ciel + carte de verre par-dessus ═══════
   Reprise fidèle de la référence Wayvi "AI Search" (photo plein cadre +
   carte de verre posée dessus) avec la photo fournie par Charlotte
   (Unsplash, images/hero/CREDITS.md). Image fixe — pas liée à une
   destination ni au jour du mois comme l'ancien fond tournant, c'est
   l'identité visuelle de l'Accueil, pas un contenu piloté par la donnée. */
/* Occupe tout l'écran visible (comme la maquette, où rien d'autre n'est
   visible sans défiler) — pas juste un bandeau en haut de page avec
   "Destinations" qui dépasse déjà en dessous. --app-vh = vraie hauteur
   d'écran mesurée en JS (index.html), plus fiable que 100vh sur iOS. Les
   178px retirés correspondent à l'en-tête (eyebrow/cloche/filet) et à
   la pilule de navigation flottante en bas. */
.muse-photo-hero{
  position:relative; overflow:hidden;
  /* La photo couvre l'écran ENTIER : la marge négative annule le padding
     du parent (.disc-head 6px en haut, .px 20px sur les côtés) ET la
     zone de sécurité de l'encoche, le padding interne la restitue pour
     le contenu. La pilule de nav est un calque flottant indépendant
     (tabbarHTML() est un frère de .tabs, pas dans le panneau qui
     défile), la photo passe dessous jusqu'au dernier pixel. */
  min-height:calc(var(--app-vh, 1vh) * 100);
  display:flex; flex-direction:column;
  margin:calc(-6px - env(safe-area-inset-top,0px)) -20px 0;
  padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(122px + env(safe-area-inset-bottom,0px));
  background-size:cover; background-position:center 30%; background-color:var(--surface2);
}
/* Voyage en cours déjà affiché juste au-dessus (son propre tableau de
   bord, sous l'en-tête blanc classique) : le héros repasse à une hauteur
   normale, sans remonter sous l'encoche. */
.muse-photo-hero.compact{
  min-height:440px; margin-top:0;
  padding-top:0; padding-bottom:22px;
}

/* En-tête posé sur la photo (sans voyage en cours) — pilule de verre
   "Atlas personnel" + cloche circulaire en verre, comme la maquette. */
.mph-top{display:flex; align-items:center; justify-content:space-between}
.mph-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-pill);
  padding:8px 14px;
  font-family:var(--serif); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#FFFFFF;
}
.mph-pill svg{stroke:#FFFFFF}
.mph-bell{
  position:relative; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#FFFFFF;
}
.mph-bell svg{stroke:#FFFFFF}
.mph-bell .dot{
  position:absolute; top:8px; right:9px; width:7px; height:7px;
  border-radius:50%; background:var(--accent); border:1.5px solid rgba(0,0,0,.3);
}
.muse-photo-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:inherit; filter:saturate(1.04) contrast(1.02) brightness(.97);
}
.muse-photo-hero::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(20,17,14,.3) 0%, rgba(20,17,14,.04) 22%, rgba(20,17,14,.2) 55%, rgba(20,17,14,.8) 100%);
}
.muse-photo-hero>*{position:relative; z-index:1}
.mph-headline{padding-top:30px}
.muse-photo-hero .disc-hello{color:rgba(255,255,255,.85)}
.muse-photo-hero .disc-hero{color:#FFFFFF; text-shadow:0 2px 16px rgba(3,20,26,.4)}
.muse-photo-hero .disc-hero em{color:color-mix(in srgb, var(--accent) 55%, white)}
.muse-photo-hero .muse{margin-top:auto}

/* Reflet animé sur le CTA — garde le bloc captivant même sans saisie,
   même idiome que .muse-line (défilement en boucle, désactivé si
   prefers-reduced-motion). */
.muse-go-wide{position:relative; overflow:hidden}
.muse-go-sheen{
  position:absolute; top:0; bottom:0; left:0; width:36%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:translateX(-160%); animation:museGoSheen 4s ease-in-out infinite;
}
@keyframes museGoSheen{0%,40%{transform:translateX(-160%)}70%,100%{transform:translateX(260%)}}
@media (prefers-reduced-motion: reduce){.muse-go-sheen{animation:none; display:none}}

/* ══ 36. PROFIL — reprise design + fonctionnalités ═════════════════════
   Retour de Charlotte : « Le profil est à améliorer esthétiquement dans
   le design et dans la fonctionnalité ». Avatar avec vraies initiales et
   badge photo en verre, cloche de notifications dans l'en-tête, CTA de
   connexion visible hors session, lien Atlas sous les chiffres, porte
   Communauté avec les avatars réels des amis et badge de demandes. */

/* Avatar : anneau clair pour le détacher de la bannière sombre ; badge
   "changer la photo" en pastille blanche (l'ancien disque encre bordé de
   beige jurait sur le fond sombre). */
.pf-hero .pf-ava{border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.pf-ava-badge{
  position:absolute; bottom:-2px; right:-2px; width:22px; height:22px;
  border-radius:50%; background:#FFFFFF; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -2px rgba(31,26,20,.4);
}

/* CTA de connexion dans la bannière — pilule blanche sur fond sombre,
   même langage que les boutons posés sur photo. */
.pf-login-b{
  display:block; width:100%; margin-top:18px; padding:13px 18px;
  border:none; border-radius:var(--r-pill); background:#FFFFFF; color:var(--ink);
  font-family:var(--serif); font-weight:700; font-size:14px; cursor:pointer;
  transition:transform .12s var(--spring);
}
.pf-login-b:active{transform:scale(.97)}

/* Rangée-lien vers l'Atlas, pleine largeur sous les chiffres. */
.pf-hero-link{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 -20px; padding:13px 20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--serif); font-weight:600; font-size:12.5px;
  color:color-mix(in srgb, var(--accent) 55%, white); cursor:pointer;
}
.pf-hero-link svg{color:rgba(255,255,255,.45)}
.pf-hero .pf-stats{padding-bottom:14px}

/* Porte Communauté : pile d'avatars réels (photos ou initiales) à droite,
   badge accent de demandes en attente sur le titre. */
.pfd-avs{
  position:absolute; right:44px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center;
}
/* réserve la place de la pile pour que le sous-titre ne passe pas dessous */
.pf-door .pfd-ss{padding-right:112px}
.pfd-av{
  width:30px; height:30px; border-radius:50%; flex:none;
  margin-left:-9px; border:2px solid var(--nuit);
  background-color:var(--accent); background-size:cover; background-position:center;
  color:#FFFFFF; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.pfd-av:first-child{margin-left:0}
.pfd-av-more{background-color:rgba(255,255,255,.18); font-size:10px}
.pfd-badge{
  margin-left:8px; min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--r-sm); background:var(--accent); color:var(--accent-ink,#FFFFFF);
  font-family:var(--sans); font-size:11px; font-weight:700;
  align-items:center; justify-content:center; vertical-align:3px;
}

/* Réglages : les lignes flottaient nues sur le fond — même carte blanche
   que les notifications et les sections Communauté (.cc-card). */
.pf-rows-b{
  background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line);
  box-shadow:var(--shadow-card); padding:3px 16px;
}

/* "Composer un itinéraire" : la pastille + prend le dégradé des CTA —
   c'est la seule vraie action de la page, elle doit se voir comme telle. */
.pf-newtrip-ico{
  background:var(--accent);
  color:var(--accent-ink,#FFFFFF);
}

/* ══ 37. COMMUNAUTÉ — refonte Cercle ═══════════════════════════════════
   Retour de Charlotte : « la communauté, il y a encore un gros boulot ».
   Bannière sombre d'ouverture avec la recherche dedans, vignettes de
   destination sur les voyages partagés, actions en boutons ronds icône
   (écrire / accepter / refuser / retirer), invitation d'un proche, carte
   unique pour "Voyageurs à proximité". */
.cc-hero{
  position:relative; overflow:hidden;
  margin-top:16px; border-radius:var(--r-lg); padding:22px 20px;
  background:radial-gradient(120% 90% at 85% -10%, var(--accent-soft), transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px -14px rgba(31,26,20,.6);
}
.cch-eyebrow{
  font-family:var(--serif); font-size:9px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 55%, white);
}
.cch-t{
  font-family:var(--serif); font-weight:600; font-size:27px;
  letter-spacing:-.02em; color:#FFFFFF; margin:8px 0 0;
}
.cch-s{font-size:13px; color:rgba(255,255,255,.65); line-height:1.55; margin:6px 0 0}
/* Un champ de recherche ne flotte pas : il est posé dans l'écran. Cette
   ombre-là était la dernière ombre portée au repos de la Communauté. */
.cc-hero .cc-search{margin-top:16px; box-shadow:var(--shadow-card)}
.cc-hero .pf-login-b{margin-top:16px}

/* Boutons ronds icône des lignes (accepter/refuser/écrire/retirer). */
.cc-ib{
  width:36px; height:36px; flex:none; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--accent); color:var(--accent-ink,#FFFFFF);
  transition:transform .12s var(--spring);
}
.cc-ib:active{transform:scale(.9)}
.cc-ib.ghost{background:var(--fog-soft); color:var(--ink-soft)}
.cc-ib.tint{background:var(--accent-tint); color:var(--accent-texte,var(--accent))}

/* Vignette de destination des voyages partagés. */
.cc-thumb{
  width:44px; height:44px; flex:none; border-radius:var(--r-md);
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(31,26,20,.06);
}

/* Pastille "En attente" des demandes envoyées (ancien style inline). */
.cc-wait{
  font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--fog-soft);
  padding:5px 10px; border-radius:var(--r-pill); flex:none;
}

/* Inviter un proche — pied de la carte « Vos amis ».

   Il fallait qu'elle reste DISCRÈTE : dès qu'on a des amis, ce sont eux
   qu'on vient voir, pas une invitation. Ce point-là était juste.

   Mais elle était en TIRETÉS, et le tireté ne dit pas « discret » : dans
   le vocabulaire d'une interface il dit « zone de dépôt », « à
   compléter », « pas encore fait ». On l'emploie d'ailleurs exactement
   pour ça ailleurs dans l'app — le brouillon de voyage (.trip-card.draft)
   et la case d'ajout de badge. L'action la plus généreuse de
   l'application — une composition offerte des deux côtés — était donc
   habillée en emplacement vide.

   Même poids visuel, même retenue : un filet plein d'un cheveu, sur un
   fond teinté à peine. Elle ne crie pas plus fort qu'avant ; elle a
   seulement cessé d'annoncer qu'elle n'était pas finie. */
/* ── L'INVITATION : UNE ACTION, PAS UNE RÉCLAME ─────────────────────────
   C'était un panneau pleine largeur en accent pâle, bordé d'accent, avec
   du texte d'accent dessus, sur deux lignes — l'élément le plus bruyant
   de l'écran Amis. Une couleur sur une couleur sur une couleur : c'est la
   grammaire d'une bannière publicitaire, et ça se lit comme telle.

   Inviter quelqu'un EST une vraie action, et elle porte une vraie
   contrepartie : il ne s'agit pas de la faire taire. Elle prend donc la
   forme des actions secondaires de la maison — surface claire, filet
   d'encre, texte d'encre. C'est le seul bouton bordé de l'écran : on ne
   peut pas le rater, et il ne crie pas.

   Ne se trouvait PAS par balayage : le bandeau ne s'affiche que si l'on a
   déjà des amis, et banc-vieilleries part d'une base vide. Vu à l'œil sur
   la vitrine, qui elle a des données. */
.cc-invite{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin:12px 0 8px; padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  cursor:pointer;
  font-family:var(--serif); font-weight:600; font-size:14px; color:var(--ink);
  transition:transform .12s var(--spring), background .16s ease;
}
.cc-invite .ico{ color:var(--ink-faint) }
.cc-invite:hover{ background:var(--n-2) }
.cc-invite:active{transform:scale(.98)}

/* Le sélecteur Désactivé/Amis/Tout le monde posé dans la carte blanche :
   fond brume au lieu de blanc ombré sur blanc. */
.cc-card .track-toggle{background:var(--fog-soft); box-shadow:none}
.cc-card .track-toggle button.on{box-shadow:0 4px 12px -4px rgba(31,26,20,.3)}

/* Radiale Tendances : nœuds touchables — le lieu sélectionné s'allume et
   alimente la carte de détail unique en dessous (fin de la liste qui
   recopiait les cercles ; « tout se répète trois fois »). */
.trend-radial .rad-node{cursor:pointer}
.trend-radial .rad-node .th{transition:background .18s, box-shadow .18s}
.trend-radial .rad-node.on .th{background:var(--accent); box-shadow:var(--sh-2)}
.trend-radial .rad-node.on .th svg{stroke:var(--accent-ink,#FFFFFF)}

/* "Quand partir" : les barres des meilleurs mois passaient encore par
   --gold (devenu ~encre) — rendues à l'accent, comme l'annonce la
   légende « mis en couleur ». */
.season .m.best i{background:var(--accent)}

/* ══ 38. FICHE DESTINATION — refonte esthétique ════════════════════════
   Retour de Charlotte : « l'esthétique de la page et le design sont à
   revoir ». Photo réelle en tête (grammaire .itn-hero-photo existante),
   cercles des lieux tendance sur bannière sombre (maquette "Japan
   Checkpoint"), "Quand partir" en carte blanche. */
.dd-radial-card{
  position:relative; overflow:hidden;
  margin-top:14px; border-radius:var(--r-lg); padding:18px 16px 14px;
  background:radial-gradient(120% 90% at 85% -10%, var(--accent-soft), transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px -14px rgba(31,26,20,.6);
}
/* Anneaux et nœuds relus pour le fond sombre. */
.dd-radial-card .trend-rings circle{stroke:rgba(255,255,255,.14)}
.dd-radial-card .trend-radial{height:280px; margin-top:0}
.dd-radial-card .rad-node .lb{color:#FFFFFF}
.dd-radial-card .rad-node .th{box-shadow:0 10px 24px -10px rgba(31,26,20,.6)}
.dd-radial-card .center-ava.trend-center{border-color:rgba(255,255,255,.9)}
/* Carte de détail : rangée de verre au pied de la bannière. */
.dd-detail{
  margin-top:6px; padding:4px 12px; border-radius:var(--r-md);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.dd-detail .row{border-bottom:none}
.dd-detail .r-t{color:#FFFFFF}
.dd-detail .r-s{color:rgba(255,255,255,.62)}
.dd-detail .r-ico{background:rgba(255,255,255,.12); color:color-mix(in srgb, var(--accent) 55%, white)}
.dd-detail .r-ico svg{stroke:color-mix(in srgb, var(--accent) 55%, white)}

/* 38b — « on peut faire encore mieux » : photo bord à bord + mouvement. */
/* Le hero s'étend d'un bord à l'autre et commence au tout premier pixel
   de l'écran (même principe que l'Accueil vague) — coins arrondis
   seulement en bas, contenu abrité du notch par le padding. */
/* La fiche du MONDE (monde.js) est bâtie sur exactement la même
   structure ; elle s'ouvre simplement sous un autre nom de surcouche.
   Sans elle dans le sélecteur, sa photo héritait du padding par défaut
   de .itn-hd — 12 px en haut, 24 px sur les côtés — et se retrouvait
   encadrée, flottant au milieu de l'ivoire, pendant que celle du
   catalogue est bord à bord. Deux fiches jumelles, deux traitements :
   « la photo est beaucoup trop grande et ça fait plus brouillon que les
   autres ». C'était ça. */
.ov[data-ov="destination"],
.ov[data-ov="monde"]{padding-top:0}
.ov[data-ov="destination"] .itn-hd,
.ov[data-ov="monde"] .itn-hd{padding:0}
.dd-hero{
  margin:0; min-height:320px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 34px;
  /* Plus d'arrondi en bas : c'est le VOLET qui porte la courbe désormais,
     et deux courbes superposées laissaient des échancrures de fond sur
     les côtés. */
  border-radius:0;
}

/* ── Le volet, posé sur la photo ────────────────────────────────────────
   Référence apportée par Charlotte : la photo occupe le haut, et le
   contenu remonte PAR-DESSUS elle, arrondi, avec une poignée. Ce
   chevauchement de quelques pixels est tout ce qui sépare « une image
   puis du texte » de « une page posée sur un lieu ».
   Le fond est celui de la page : le volet n'est pas une carte de plus,
   c'est la page elle-même qui commence plus haut. */
/* Le volet vaut pour les DEUX écrans bâtis sur ce schéma — fiche
   destination et itinéraire. Le sélecteur ne cite donc plus un seul
   écran : c'est un composant, pas une exception. */
.dd-volet{
  position:relative; z-index:1;
  margin-top:-30px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--bg);
  padding-top:8px;
}
/* Lent zoom cinématique de la photo (le calque ::before porte l'image) —
   26s aller-retour, imperceptible mais vivant. */
@keyframes ddKen{from{transform:scale(1)}to{transform:scale(1.09)}}
.dd-hero::before{animation:ddKen 26s ease-in-out infinite alternate}

/* Entrée en cascade de la radiale : centre puis nœuds, l'un après
   l'autre, avec le ressort de la DA. */
@keyframes ddPop{from{opacity:0; transform:translate(-50%,-50%) scale(.45)}}
.dd-radial-card .center-ava{animation:ddPop .5s var(--spring) .15s backwards}
.dd-radial-card .rad-node{animation:ddPop .5s var(--spring) backwards}
.dd-radial-card .rad-node:nth-of-type(2){animation-delay:.3s}
.dd-radial-card .rad-node:nth-of-type(3){animation-delay:.42s}
.dd-radial-card .rad-node:nth-of-type(4){animation-delay:.54s}
@keyframes ddRingsIn{from{opacity:0}}
.dd-radial-card .trend-rings{animation:ddRingsIn .9s ease .1s backwards}

/* Chaque changement de lieu (toucher ou défilement auto) glisse la
   nouvelle rangée de détail — innerHTML recréé, l'animation rejoue. */
@keyframes ddRow{from{opacity:0; transform:translateY(7px)}}
.dd-detail .row{animation:ddRow .4s ease}

/* Reflet lumineux du CTA (span .muse-go-sheen réutilisé). */
.dd-cta{position:relative; overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .dd-hero::before, .dd-radial-card .center-ava, .dd-radial-card .rad-node,
  .dd-radial-card .trend-rings, .dd-detail .row{animation:none}
}

/* Tendances : badge « Pleine saison » des tuiles (score 3 du mois en
   cours — voir _trendingOrder, screens-main.js). Pilule accent posée à
   l'opposé du code pays, même langage verre que lui. */
.tile .t-season{
  position:absolute; top:10px; right:10px; z-index:2;
  background:color-mix(in srgb, var(--accent) 82%, #0E2B26);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-sm); padding:4px 8px;
  font-family:var(--serif); font-size:8.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#FFFFFF;
}

/* ══ 39. FINITIONS DE MODERNITÉ ════════════════════════════════════════
   Demande : « fais tous les changements nécessaires pour qu'elle soit
   parfaite visuellement […] sur la modernité ». Trois touches sobres. */

/* Chat assistant : chaque message entre en glissant (fondu + 6px de
   translation, ressort de la DA) — le fil vivait d'un bloc, les bulles
   apparaissaient sèchement. Rejoue naturellement à chaque innerHTML +=
   (nouveaux nœuds). */
@keyframes bubIn{from{opacity:0; transform:translateY(6px)}}
.bub, .typing{animation:bubIn .32s var(--ease-out, ease) backwards}

/* Toast : pilule de verre dépoli plutôt qu'un aplat blanc — cohérent
   avec la barre d'onglets et les boutons posés sur photo. */
.toast{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}

@media (prefers-reduced-motion: reduce){
  .bub, .typing{animation:none}
}

/* Itinéraire (pièce maîtresse) : le hero photo adopte l'écrin bord à
   bord de la fiche destination (classe dd-hero posée dans itineraryView,
   screens-detail.js) — ces deux overlays perdent donc leur padding haut,
   comme .ov[data-ov="destination"] plus haut. La page publique web
   (publicItineraryView) n'est pas concernée : pas de .itn-hero-photo ni
   de data-ov chez elle. */
.ov[data-ov="itinerary"], .ov[data-ov="itn"]{padding-top:0}
.ov[data-ov="itinerary"] .itn-hd, .ov[data-ov="itn"] .itn-hd{padding:0}

/* ══ 40. ITINÉRAIRE — le corps à la hauteur de l'écrin ═════════════════
   Retour de Charlotte : « c'est pour l'instant très médiocre compte tenu
   du reste de l'application ». Restyle pur CSS (aucune mécanique JS
   touchée) : chaque jour devient une carte blanche ombrée (le langage
   des notifications et du Cercle), les listes Explorer/Hébergements
   passent en carte groupée (langage Réglages), et les onglets adoptent
   la pilule segmentée de la DA (langage du filtre Mes voyages). La
   cascade d'entrée (revealOnScroll) anime désormais des cartes. */

/* Onglets Itinéraire · Carte · Budget ────────────────────────────────
   Ce bloc les avait fait passer de l'onglet souligné à la PILULE
   SEGMENTÉE — « la pilule segmentée de la DA ». C'était le contrôle
   segmenté d'iOS 13, et c'est exactement la forme retirée de Communauté
   le jour où Charlotte a dit « globalement l'app fait vieillotte ».

   Ce n'est d'ailleurs pas un choix d'option : ce sont TROIS VUES du même
   voyage — une navigation. Le soulignement dit « vous êtes ici », la
   pilule disait « choisissez une valeur ». Le trait est en encre, et il
   se déplie (scaleX) au lieu d'apparaître : la même mécanique que
   .soc-seg, pour que les deux sélecteurs de navigation de l'app se
   comportent enfin pareil. */
.itn-tabs{
  gap:24px; background:none; padding:0; margin-top:10px;
  border-bottom:1px solid var(--fog-soft); border-radius:0;
}
/* 14 px en haut, 13 en bas : l'onglet mesure 44 px de haut pour le
   doigt sans qu'il faille un pseudo-élément pour l'agrandir — c'est ce
   pseudo-élément qui servait de trait. */
.itn-tab{
  flex:0 1 auto; height:auto; padding:14px 2px 13px; border-radius:0;
  background:none; box-shadow:none; text-align:left; color:var(--sub);
  display:block; position:relative;
  font-size:14px; line-height:1.2;
}
.itn-tab.on{ background:none; color:var(--ink); box-shadow:none; font-weight:600 }
.itn-tab::after{
  content:''; display:block; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; border-radius:2px 2px 0 0; background:var(--ink);
  transform:scaleX(0); transform-origin:center;
  transition:transform .22s cubic-bezier(.22,.68,.2,1);
}
.itn-tab.on::after{ display:block; transform:scaleX(1) }

/* Jour par jour : cartes — rail et nœuds retirés, le « Jour N » devient
   une pastille menthe. */
.itn-days{padding-left:0; margin-top:14px}
.itn-days::before{display:none}
.itn-node{display:none}
.itn-day{
  padding:var(--p-md); margin-bottom:12px;
  background:var(--surface); border:none;
  border-radius:var(--card-radius); box-shadow:var(--shadow-card);
}
.itn-day:last-child{padding-bottom:var(--p-md)}
/* « Jour N » — l'étiquette de chaque carte de journée ───────────────────
   Elle était en accent pâle sur les SEPT jours du voyage. Or l'accent
   plein est déjà réservé, plus bas, au jour qu'on est en train de vivre
   (.itn-day.auj .itn-dn) : six étiquettes roses autour de lui rendaient
   ce signal invisible, alors que c'est le seul de l'écran qui dise
   quelque chose. L'étiquette ordinaire devient neutre ; le jour vécu
   garde sa couleur, et la retrouve enfin tout seul. */
.itn-dn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--n-2); color:var(--ink-faint);
  border-radius:var(--r-sm); padding:4px 9px; letter-spacing:.12em;
}
.itn-dt{margin-top:10px; font-size:21px}
.itn-dd{max-width:none}
.itn-day-chev{
  margin-top:13px; padding-top:12px; border-top:1px solid var(--fog-soft);
}
.itn-day-prog{border-top:1px solid var(--fog-soft)}

/* Explorer / Hébergements : carte groupée, séparateurs internes doux. */
.itn-stays{
  border-top:none; margin-top:10px; padding:2px var(--p-md);
  background:var(--surface); border:none;
  border-radius:var(--card-radius); box-shadow:var(--shadow-card);
}
.itn-stay{border-bottom:1px solid var(--fog-soft)}
.itn-stay:last-child{border-bottom:none}
/* Les portes « Activités » et « Pépites » portaient la gommette d'accent —
   la septième occurrence du même défaut, trouvée non pas à l'œil mais par
   banc-vieilleries, qui balaie les treize écrans. L'icône passe dans
   l'encre, comme dans les Réglages, le carnet, le questionnaire et le
   Budget. Une règle qui ne vaut que là où on a pensé à l'appliquer n'est
   pas une règle. */
.itn-stay-k,.itn-porte-k,.itn-etape-k{background:none; color:var(--ink-faint)}
.itn-lbl{margin-top:24px}
/* Pas de numéro de jour (donnée absente) : pas de pastille vide. */
.itn-dn:empty{display:none}
.itn-dn:empty + .itn-dt{margin-top:0}

/* ══ §41 · Tendances enrichies — « Où partir ? » ═══════════════════════
   Retour de Charlotte : la page doit servir « aux gens qui ne savent pas
   où partir et cherchent des idées ». Une destination de la semaine en
   grand, un filtre par envie, la grille complète en dessous. */

/* Destination de la semaine : la tuile passe pleine largeur et plus haute,
   même anatomie (wash photo, code, badge saison) pour rester de la même
   famille que la grille. */
.tile.spot{height:236px;margin-top:18px}
.tile.spot .t-n{font-size:27px}
.spot-eyebrow{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:1.6px;
  text-transform:uppercase; color:rgba(255,255,255,.86); margin-bottom:7px;
}

/* Filtre « Envie de quoi ? » : rangée de pilules défilante, bord à bord. */
.trend-chips{
  display:flex; gap:8px; overflow-x:auto;
  margin:2px -20px 0; padding:2px 20px 8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.trend-chips::-webkit-scrollbar{display:none}
.tch{
  flex:none; padding:10px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-soft);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
  cursor:pointer;
}
.tch.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink,#FFFFFF)}

/* ══ §42 · Récap de voyage & carte postale ════════════════════════════
   Donner une SORTIE à l'app : un écran qui raconte le voyage au retour,
   et une image finie qu'on poste telle quelle (voir recap.js). */

/* Porte du récap sur l'Accueil — même famille que les bannières sombres
   (Budget, Communauté) mais posée sur la photo du voyage. */
.rc-door{
  position:relative; margin-top:16px; padding:20px 18px;
  min-height:132px; border-radius:var(--card-radius);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; gap:12px;
  overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-card);
}
.rc-door-veil{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(20,17,14,.35) 0%, rgba(20,17,14,.88) 72%);
}
.rc-door-cap{position:relative; flex:1; min-width:0}
.rc-door-t{
  font-family:var(--serif); font-weight:600; font-size:21px;
  letter-spacing:-.3px; color:#fff; margin-top:7px;
}
.rc-door-s{font-family:var(--sans); font-size:12.5px; color:rgba(255,255,255,.76); margin-top:4px}
.rc-door-chev{position:relative; color:rgba(255,255,255,.8); flex:none; padding-bottom:2px}

/* Corps du récap */
.rc-body{padding-top:2px}
.rc-stats{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;
}
.rc-stat{
  flex:1 1 calc(50% - 5px); min-width:0;
  padding:15px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.rc-stat-v{
  font-family:var(--serif); font-weight:600; font-size:27px;
  letter-spacing:-.4px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.rc-stat-l{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--sub); margin-top:5px;
}
.rc-stat-wait .rc-stat-v{color:var(--sub)}

.rc-cta{margin-top:18px}
.rc-cta-s{
  font-family:var(--sans); font-size:12.5px; color:var(--sub);
  text-align:center; margin-top:9px; line-height:1.5;
}

/* La trace — noms d'étapes seulement, jamais le programme. */
.rc-stages{padding:4px 14px}
.rc-stage{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--fog-soft);
}
.rc-stage:last-child{border-bottom:none}
.rc-stage-n{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-tint); color:var(--accent-texte,var(--accent));
  font-family:var(--mono); font-size:11px; font-weight:700;
}
.rc-stage-t{font-family:var(--sans); font-size:14.5px; color:var(--ink); min-width:0}

.rc-rail{
  display:flex; gap:9px; overflow-x:auto;
  margin:0 -20px; padding:2px 20px 6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rc-rail::-webkit-scrollbar{display:none}
.rc-shot{
  flex:none; width:96px; height:120px; border-radius:var(--r-md);
  background-size:cover; background-position:center;
  border:1px solid var(--line);
}

/* Aperçu de la carte postale — plein écran sombre, l'image au centre :
   on ne poste pas une image qu'on n'a pas vue. */
.pc-ov{
  position:absolute; inset:0;
  background:linear-gradient(160deg,var(--nuit) 0%,var(--nuit-profond) 100%);
  display:flex; flex-direction:column; align-items:center;
  padding:calc(18px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));
}
.pc-close{
  align-self:flex-end; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; cursor:pointer; flex:none;
}
.pc-frame{
  flex:1; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center; padding:14px 0;
}
.pc-img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  border-radius:var(--r-md); box-shadow:0 26px 60px -20px rgba(31,26,20,.7);
}
.pc-acts{width:100%; flex:none}
.pc-share{width:100%}
.pc-hint{
  font-family:var(--sans); font-size:12px; color:rgba(255,255,255,.6);
  text-align:center; margin-top:10px;
}

/* ══ §43 · Itinéraire — la pièce maîtresse ════════════════════════════
   Audit demandé par Charlotte. Mesuré avant correction : l'en-tête photo,
   posé hors du conteneur défilant, confisquait 36 % de l'écran en
   permanence (532 px utiles sur 852) — jamais plus de deux jours visibles
   sur neuf. Et quatre couleurs de catégorie se disputaient l'écran pendant
   que l'onglet Budget voisin était en menthe. */

/* La photo défile maintenant avec le contenu ; c'est cette barre qui reste.
   Transparente sur la photo (les .ihx-btn sont déjà en verre, donc
   lisibles), opaque et titrée une fois la photo passée. */
.itn-topbar{
  position:absolute; top:0; left:0; right:0; z-index:12;
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .26s ease, border-color .26s ease, backdrop-filter .26s ease;
  pointer-events:none;
}
.itn-topbar > *{pointer-events:auto}
.itn-topbar-acts{margin-left:auto; display:flex; gap:10px; align-items:center}
/* Le titre n'existe que barre opaque : sur la photo, il ferait doublon
   avec le grand titre juste en dessous. */
.itn-topbar-t{
  font-family:var(--serif); font-weight:600; font-size:16px;
  letter-spacing:-.2px; color:var(--ink);
  opacity:0; transform:translateY(4px);
  transition:opacity .26s ease, transform .26s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:52vw;
}
/* Fond PLEIN, pas de verre dépoli ici : un fond translucide laissait lire
   les onglets qui défilent dessous (fantôme constaté en capture — la
   déclaration backdrop-filter est reconnue mais le flou n'est pas toujours
   composité, et iOS le désactive purement et simplement dès que « Réduire
   la transparence » est activé). Sur une barre qui porte le titre du
   voyage, la lisibilité passe avant l'effet. */
/* ── LES BOUTONS DE LA BARRE, SUR LA PHOTO ──────────────────────────────
   Quatre disques BLANCS PLEINS posés sur la photo du voyage : la chose la
   plus lumineuse de l'image, exactement le défaut que Charlotte a nommé
   sur sa story du Colisée — « les rendre plus discrets, sans le rond
   blanc autour ».

   Une règle existait pourtant pour les rendre en verre : .itn-hero-photo
   .ihx-btn. Elle n'a jamais rien fait. Les boutons vivent dans
   .itn-topbar, qui n'est PAS un descendant de .itn-hero-photo — la barre
   est fixée au-dessus du document, la photo est dedans. Une règle écrite
   pour un endroit précis, qui vise à côté depuis toujours, et que rien ne
   signalait : c'est la même famille de faute que le bouton « Ouvrir » qui
   n'ouvrait rien.

   Même traitement que .story-menu : le glyphe seul, blanc, avec une ombre
   portée douce pour tenir aussi bien sur un ciel clair que sur une mer
   sombre. Aucun fond, aucun filet. La zone tactile ne bouge pas.

   Et seulement TANT QUE LA BARRE EST SUR LA PHOTO : dès qu'elle a défilé
   (.on), elle est posée sur le papier ivoire, où un glyphe blanc serait
   invisible — elle reprend alors son disque clair et son encre, règle
   déjà écrite plus bas et qui, elle, s'applique. */
.itn-topbar:not(.on) .ihx-btn{
  background:none; border-color:transparent; box-shadow:none;
  color:#FFFFFF;
}
.itn-topbar:not(.on) .ihx-btn svg{
  stroke:#FFFFFF;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

.itn-topbar.on{
  background:var(--bg);
  border-bottom-color:var(--line);
}
.itn-topbar.on .itn-topbar-t{opacity:1; transform:none}
/* Barre opaque : les boutons quittent le verre blanc de la photo pour le
   verre clair de l'app, sinon ils deviennent illisibles sur fond ivoire. */
.itn-topbar.on .ihx-btn{
  background:var(--surface); border-color:var(--line);
}
.itn-topbar.on .ihx-btn svg{stroke:var(--ink)}

/* La photo vit dans le flux : plus de coins arrondis en bas (elle n'est
   plus une carte posée sur l'écran mais le sommet du document), et le
   corps reprend le padding latéral que .ov-scroll portait avant. */
[data-itn-scroll] > .itn-hero-photo{
  border-radius:0; margin:0;
  padding-top:calc(64px + env(safe-area-inset-top,0px));
}
.itn-body{padding-left:20px; padding-right:20px}

/* Un peu plus d'air rendu à la lecture : 3 lignes au lieu de 2. */
.itn-dd{-webkit-line-clamp:3}

/* Accent unique : les pilules de tags n'ont plus de couleur inline. */
.itn-dtags span{color:var(--accent-texte,var(--accent)); border-bottom-color:color-mix(in srgb, var(--accent) 38%, transparent)}
.itn-dl{color:var(--accent-texte,var(--accent))}
/* « Voir la journée » se répétait en orange au bas de chaque carte —
   sept fois par écran. C'est un renvoi, pas l'action principale du
   voyage : même traitement que .ref-lien, l'encre à peine retenue. */
.itn-day-chev{color:var(--ink); opacity:.72}

/* Stories / Trajet — descendus au pied du jour ouvert. */
.itn-day-acts{
  display:none; gap:8px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--fog-soft);
}
.itn-day.open .itn-day-acts{display:flex}
.itn-day-act{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent-tint); border:none; border-radius:var(--r-pill);
  padding:8px 14px;
  font-family:var(--sans); font-size:11.5px; font-weight:700;
  color:var(--accent-texte,var(--accent)); cursor:pointer;
}

/* ═══ §44 · Reprise du questionnaire ══════════════════════════════════
   Le questionnaire est sauvegardé en brouillon (48h). Jusqu'ici la
   reprise était totalement silencieuse : on rouvrait « Composer » et on
   atterrissait au milieu du questionnaire sans explication — au point de
   croire que la première carte avait disparu. Ce bandeau dit ce qui se
   passe et offre la sortie en un geste. Il disparaît de lui-même dès
   qu'on est revenu sur la Question 01. */
.deck-resume{
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding:8px 14px;
  background:var(--accent-tint); border-radius:var(--r-sm);
}
.deck-resume .dr-t{
  flex:1 1 auto; min-width:0;
  font-family:var(--sans); font-size:12px; font-weight:600;
  color:var(--ink); line-height:1.35;
}
.deck-resume .dr-b{
  flex:0 0 auto; background:none; border:none; padding:6px 2px;
  font-family:var(--sans); font-size:12px; font-weight:700;
  color:var(--accent-texte,var(--accent)); cursor:pointer;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ══ §45 · Pastille « Vérifié » ═══════════════════════════════════════
   Le badge dit désormais ce qui est SÛR, plus ce qui ne l'est pas (voir
   _itnDayProgHTML, screens-detail.js). Elle doit rester une note de bas de
   page à côté du titre du moment : c'est une confirmation, pas une
   décoration ni un appel à l'action. */
.mo-ok{
  display:inline-flex; align-items:center; gap:3px; margin-left:6px;
  vertical-align:1px;
  font-family:var(--sans); font-size:8.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-texte,var(--accent));
}
.mo-ok svg{flex:none}

/* ══ §46 · Bandeau hors ligne ═════════════════════════════════════════
   Au-dessus d'une liste de voyages servie depuis la copie gardée sur
   l'appareil (voir _mirroirLire, app.js). Volontairement plat et discret :
   ce n'est pas une alerte — les voyages affichés sont bons, ils datent
   simplement du dernier passage en ligne. Une carte pleine ou une couleur
   d'erreur ferait croire à une panne. */
.offline-note{
  display:flex; align-items:center; gap:8px;
  margin:0 0 14px; padding:9px 13px;
  background:var(--surface2); border-radius:var(--r-sm);
  font-family:var(--sans); font-size:12px; font-weight:500;
  color:var(--sub); line-height:1.35;
}
.offline-note svg{flex:none; color:var(--ink-faint)}

/* ══ §47 · Tuiles Tendances — la photo d'abord ════════════════════════
   Retour de Charlotte, écran « Où partir ? » : « on peut la rendre encore
   plus jolie ». Trois défauts de direction artistique, dont deux réglés
   ici.

   1. « PLEINE SAISON » criait plus fort que les destinations. Pastille
      menthe pleine, en capitales, présente sur six tuiles sur huit — un
      signal affiché partout n'est plus un signal. Et il empruntait le
      mint des boutons d'action, donc l'œil le lisait comme « touchez-moi »
      alors que ce n'est qu'une étiquette. Il cède la place à une mention
      calculée (_destAccroche) qui dit ce qui presse, quand ça presse.

   2. Le haut de chaque photo portait deux pastilles qui coupaient le
      sujet. Il reste nu ; coordonnées et région descendent en une ligne
      de registre au-dessus du bord bas, là où le voile assombrit déjà
      l'image et où rien n'est perdu. */
.tile .t-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin-top:3px;
}
/* La région et les coordonnées partagent 144 px : « AMÉRIQUE DU SUD »
   se faisait couper. L'interlettrage tombe de 1 px à 0,4 px et la casse
   reste haute — on gagne les quelques pixels nécessaires sans toucher au
   corps du texte, et la ligne garde son allure de registre. */
.tile .t-meta .t-r{ min-width:0; letter-spacing:.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* La raison d'y aller, à droite de la région. « Dernier mois idéal » et
   « la saison s'ouvre » passent en menthe : ce sont les deux seuls cas
   où le temps presse, et ils ne concernent qu'une destination sur seize
   en août. Le reste — « encore 2 mois », « belle arrière-saison » — reste
   blanc discret : une information, pas une injonction. Une urgence
   affichée partout n'est plus une urgence, c'est exactement l'erreur que
   faisait la pastille « Pleine saison ». */
.tile .t-when{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:rgba(255,255,255,.66);
}
.tile .t-when.fort{
  color:color-mix(in srgb, var(--accent) 55%, white);
}
.tile .t-code{
  flex:none;
  font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.8px;
  color:rgba(255,255,255,.58);
}
/* Les deux pastilles du haut n'existent plus dans le balisage ; ces
   règles restent neutralisées au cas où un écran les rappellerait. */
.tile .code,.tile .t-season{ display:none; }


/* ══ §48 · Le mouvement, déplacé plutôt qu'ajouté ═════════════════════
   Charlotte : « avec un peu d'animation ça pourrait être pas mal ». Il y
   en avait déjà — et c'était le problème.

   1. LE ZOOM PERPÉTUEL S'ARRÊTE SUR LA GRILLE. Un effet Ken Burns
      tournait en boucle infinie sur les quinze photos à la fois
      (16 s, aller-retour, sans fin). Sur une image seule c'est du
      souffle ; sur quinze simultanées c'est de l'agitation — rien ne se
      pose, et quinze transformations permanentes coûtent de la batterie
      pour un effet que personne ne remarque. Il ne reste que sur la
      grande tuile de la semaine, celle qui a la place de respirer.

      Le zoom part de screens.css (.tile .wash n'anime plus rien) et se
      rallume ici sur la seule tuile concernée. will-change:transform la
      pose sur sa propre couche GPU : c'était le correctif qui empêchait
      les taps de se faire absorber par une frame d'animation, et il n'a
      de sens que là où il reste une animation — une couche promue par
      tuile sur toute la grille, c'était de la mémoire vidéo retenue pour
      rien. */
.tile.spot .wash{ animation:washKenBurns 16s ease-in-out infinite alternate; will-change:transform; }

/* 2. L'ENTRÉE SE JOUE AU DÉFILEMENT. Les quinze tuiles montaient en
      cascade au dessin de l'écran, alors que onze étaient sous la ligne
      de flottaison : elles finissaient leur animation avant qu'on
      n'arrive, et personne ne les voyait jamais bouger. Chaque tuile
      attend maintenant d'entrer dans l'écran. */
.tile.tile-scroll{
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .5s cubic-bezier(.22,.68,.2,1), transform .5s cubic-bezier(.22,.68,.2,1);
}
.tile.tile-scroll.vue{ opacity:1; transform:none; }

/* 3. LA RAISON ARRIVE APRÈS LA PHOTO. La tuile se pose, le nom
      s'installe, puis la mention saisonnière paraît. L'œil y va parce
      que c'est la dernière chose qui bouge — c'est le seul endroit de
      l'écran où l'animation travaille au lieu de décorer, et elle mène
      à la seule destination qui presse ce mois-ci. */
.tile.tile-scroll .t-when{
  opacity:0; transition:opacity .45s ease .38s;
}
.tile.tile-scroll.vue .t-when{ opacity:1; }

/* core.css coupe déjà toutes les animations si « Réduire les animations »
   est activé dans iOS ; on le redit ici pour que la tuile reste VISIBLE.
   Sans ça, une transition ramenée à 0,01 ms laisserait .tile-scroll à
   opacity:0 tant que l'observateur n'a pas posé la classe « vue ». */
@media (prefers-reduced-motion: reduce){
  .tile.spot .wash{ animation:none; }
  .tile.tile-scroll,.tile.tile-scroll .t-when{
    opacity:1; transform:none; transition:none;
  }
}

/* ── 52. Grille « Où partir ? » — format portrait ─────────────────────
   Quinze paires de tuiles de 172 px de haut à la file : rien n'accrochait
   l'œil, et le défilement devenait un tapis roulant. Les tuiles de la
   grille passent en 4:5 — le format tient la photo comme une page de
   magazine et suit la largeur de l'écran au lieu de l'ignorer.

   Une variante posait une tuile pleine largeur toutes les cinq. Écartée
   après essai (Charlotte : « elle dénote un peu ») : deux formats et deux
   tailles de titre dans une même grille se lisent comme deux composants
   différents. Le format seul suffit à faire respirer la page.

   `.tile` garde sa hauteur fixe partout ailleurs : la règle ne vaut que
   dans `.dest-grid`, la destination de la semaine (`.tile.spot`) n'est
   pas touchée. */
.dest-grid .tile{height:auto; aspect-ratio:4/5}

/* ── 53. Accueil — plus de blanc mort sous le héros ───────────────────
   « Mes voyages » retiré, le héros est devenu le dernier élément de la
   page : restaient dessous 40 px de `.disc-head` et 96 px réservés à la
   pilule de navigation flottante, soit un rectangle blanc de 136 px sous
   la photo, qu'aucun contenu ne venait plus remplir.

   Le héros porte déjà lui-même la place de la pilule (122 px de padding
   bas) : l'onglet n'a plus besoin de la réserver une seconde fois. En
   version compacte (voyage en cours, le héros est plus court) on lui
   donne la même clairance, sinon la pilule viendrait couvrir le bouton
   « Composer mon voyage ». Dans les deux cas la page s'arrête pile au
   bas de la photo, et la pilule flotte sur l'image au lieu du vide. */
.tabview[data-tab="discover"]{padding-bottom:0}   /* réserve reportée sur .ref-nappe */
.tabview[data-tab="discover"] .disc-head{padding-bottom:0}

/* ── Pendant un voyage, pas de composeur du tout ────────────────────────
   Sous le tableau de bord du voyage en cours, le héros pleine page
   recommençait une page : photo à fond perdu, hauteur d'écran, « Bonsoir,
   Charlotte. Quelle direction ? » en 44 px sur trois lignes, et le champ
   de saisie coupé par la barre d'onglets.

   Le ramener à une carte dans les marges réglait la couture, pas le fond :
   « cet écran n'est pas censé apparaître, jamais ». Redemander à quelqu'un
   où il rêve d'aller sous le programme de sa journée en Sardaigne n'est pas
   un défaut de mise en page, c'est la mauvaise question — et composer un
   voyage a son propre onglet dans la barre du bas. La page s'arrête donc
   après le voyage.

   Sans le héros pour la porter (il réservait lui-même 122 px), la
   clairance de la barre d'onglets flottante revient à la page, sinon la
   dernière ligne du programme passe dessous. */
.tabview[data-tab="discover"] .disc-head.sans-heros{
  padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));
}
/* Salutation d'accueil pendant un voyage — une ligne, au-dessus du
   tableau de bord. Pas de « Quelle direction ? » : la question n'a pas de
   sens quand la réponse est déjà en cours, et posée en 44 px elle volait
   la vedette à la journée. */
.disc-hello-court{
  font-family:var(--serif); font-weight:600; font-size:27px;
  line-height:1.1; letter-spacing:-.02em; color:var(--ink);
  margin:16px 0 2px;
}

/* La sortie de secours du tableau de bord — « ma journée ne s'est pas
   passée comme ça ». Volontairement en bas et en retrait : c'est un
   recours, pas une invitation. Mais lisible, parce que c'est le seul
   chemin qui existe pour dire à l'app qu'elle se trompe sur vous. */
.tb-ajuster{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:2px; padding:13px 14px 15px;
  border:none; border-top:1px solid var(--line2); cursor:pointer;
  background:transparent; color:var(--sub);
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  -webkit-tap-highlight-color:transparent;
}
.tb-ajuster svg{ color:var(--accent-texte,var(--accent)); flex:none }
.tb-ajuster:active{ background:var(--surface2) }

/* ── Le profil public ───────────────────────────────────────────────────
   La page de quelqu'un — la primitive qui manquait au réseau social. Même
   famille visuelle que Budget / Communauté : une bannière sombre porte
   l'identité, le contenu vit en clair dessous. */
/* Le dégradé vert de la famille (Budget, Profil, Votre Cercle), pas un
   noir plat. Je l'avais écrit en var(--ink) : ça donnait DEUX bannières
   d'identité de deux noirs différents dans la même app — visible d'un
   coup d'œil en passant de l'onglet au profil public. */
.pp-hero{color:#FFFFFF;border-radius:var(--r-lg);overflow:hidden;position:relative;
  padding:26px 20px 20px;margin-top:14px;text-align:center;
  background:radial-gradient(120% 90% at 85% -10%, var(--accent-soft), transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px -14px rgba(31,26,20,.6);}
.pp-av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background-size:cover;background-position:center;background-color:var(--accent);
  color:#FFFFFF;font-family:var(--sans);font-weight:700;
  box-shadow:0 0 0 3px var(--ink),0 0 0 5px rgba(255,255,255,.22)}
.pp-nom{font-family:var(--serif);font-size:21px;font-weight:600;color:#FFFFFF;margin:14px 0 0}

/* Trois chiffres, dont un seul parle des autres : « fois emporté ». */
.pp-chiffres{display:flex;justify-content:center;gap:0;margin-top:18px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
.pp-ch{flex:1;min-width:0}
.pp-ch+.pp-ch{border-left:1px solid rgba(255,255,255,.16)}
.pp-ch-v{font-family:var(--sans);font-size:21px;font-weight:700;color:#FFFFFF;
  font-variant-numeric:tabular-nums;line-height:1.1}
.pp-ch-l{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-texte,var(--accent));margin-top:5px}

.pp-actions{display:flex;gap:10px;margin-top:18px}
.pp-b{flex:1;min-height:var(--tap-comfortable,46px);border-radius:var(--r-pill);border:0;
  background:#FFFFFF;color:var(--ink);font-family:var(--sans);font-size:14.5px;font-weight:600;
  cursor:pointer;transition:transform .12s var(--spring)}
.pp-b:active{transform:scale(0.97)}
.pp-b.ghost{background:transparent;border:1px solid rgba(255,255,255,.38);color:#FFFFFF}
.pp-b[disabled]{opacity:.55;cursor:default}

/* Les voyages publiés : des couvertures, jamais un programme. */
.pp-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.pp-tuile{position:relative;aspect-ratio:1/1;border-radius:var(--card-radius);overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--fog-soft);
  cursor:pointer;transition:transform .12s var(--spring)}
.pp-tuile:active{transform:scale(0.97)}
.pp-tuile::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,14,.58),rgba(20,17,14,0) 58%)}
.pp-tuile-m{position:absolute;left:12px;right:12px;bottom:11px;z-index:1}
.pp-tuile-t{font-family:var(--serif);font-size:15px;font-weight:600;color:#FFFFFF;
  text-shadow:0 1px 6px rgba(0,0,0,.4);line-height:1.25}
.pp-tuile-s{font-family:var(--sans);font-size:11.5px;color:rgba(255,255,255,.82);margin-top:2px}

.pp-pays{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pp-drapeau{font-size:27px;line-height:1.1}
.pp-vide{color:var(--sub);font-size:13.5px;line-height:1.6;margin:2px 0 0}

/* Le sélecteur de la maison sociale : trois volets, pas deux — les
   pilules doivent tenir sans que « Vos amis » passe à la ligne. */
/* .soc-seg : le sélecteur à quatre volets de Communauté. Soigné deux fois
   — pilule iOS 13, puis soulignement en encre — avant qu'on admette que
   le défaut n'était pas son dessin : un contrôle segmenté sert à choisir
   une VALEUR, celui-là servait à changer d'ÉCRAN. Retiré le 5 septembre
   avec la refonte sociale, et ses règles avec lui. Le soulignement, lui,
   survit sur .itn-tabs — qui est bien une navigation dans un document. */

/* Demandes reçues : la seule chose de la Communauté qui réclame un geste. */
.soc-pastille{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  margin-left:6px;padding:0 5px;border-radius:var(--r-pill);background:#B3452C;color:#FFFFFF;
  font-family:var(--sans);font-size:10.5px;font-weight:700;line-height:1;vertical-align:middle}
/* La phrase du profil : sous le nom, avant les chiffres. */
.pp-bio{font-family:var(--sans);font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);
  margin:8px auto 0;max-width:290px}
.bio-reste{font-family:var(--sans);font-size:11.5px;color:var(--sub);margin-top:6px;text-align:right}

/* ── Le volet « Vos amis » ──────────────────────────────────────────────
   La recherche est la seule ACTION de ce volet : elle entre dans une
   bannière sombre (famille Budget / profil public) pour ne plus se
   confondre avec la pile de cartes qu'elle produit. */
.amis-hero{border-radius:var(--r-lg);overflow:hidden;position:relative;padding:22px 20px;margin-top:16px;
  background:radial-gradient(120% 90% at 85% -10%, var(--accent-soft), transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px -14px rgba(31,26,20,.6);}
.amis-eyebrow{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.amis-t{font-family:var(--serif);font-size:21px;font-weight:600;color:#FFFFFF;margin:6px 0 8px}
.amis-s{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 18px}
/* Le CTA de l'invitation : blanc plein sur le sombre. C'était un pointillé
   fade en bas d'une carte — la seule action utile de l'écran, traitée
   comme une note de bas de page. */
.amis-cta{width:100%;min-height:var(--tap-comfortable,46px);border:0;border-radius:var(--r-pill);
  background:#FFFFFF;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:600;
  transition:transform .12s var(--spring)}
.amis-cta:active{transform:scale(0.97)}
.amis-cta .ico{color:currentColor}

/* ── « Sur place » : un réglage, donc une ligne ────────────────────────
   Trois lignes d'explication et un sélecteur à trois états occupaient la
   moitié de l'écran pour une fonction désactivée par défaut. */
.prox-ligne{display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--card-radius);
  background:var(--surface);cursor:pointer;text-align:left;
  transition:transform .12s var(--spring)}
.prox-ligne:active{transform:scale(0.985)}
.prox-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-texte,var(--accent));display:flex;align-items:center;justify-content:center}
.prox-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prox-t{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prox-s{font-family:var(--sans);font-size:12px;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prox-etat{flex:none;font-family:var(--sans);font-size:11.5px;font-weight:700;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--surface2);color:var(--sub)}
.prox-etat.on{background:var(--accent-tint);color:var(--accent-texte,var(--accent))}
.prox-chev{flex:none;color:var(--sub);display:flex}
.prox-liste{margin-top:8px}
.prox-vide{color:var(--sub);font-size:13px;margin:10px 4px 0}
.amis-search{margin:0;box-shadow:0 14px 30px -12px rgba(31,26,20,.55)}
.amis-search input{background:transparent}

/* Les états vides sont vus plus souvent que les états pleins au début :
   ce sont eux qui donnent le ton. Ils disent ce qu'on gagne, jamais
   seulement qu'il n'y a rien. */
.amis-vide{padding:6px 0 4px}
.amis-vide-t{font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 5px}
.amis-vide-s{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--sub);margin:0}

.pp-vide-b{padding:2px 0 4px}
.pp-vide-t{font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 5px}
.pp-vide-s{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--sub);margin:0}

/* .soc-point : le point « le fil n'est plus vide » qui se posait sur
   l'onglet du sélecteur. Parti avec le sélecteur, et avec la sonde qui le
   nourrissait (voir traces.js). Communauté EST le fil : on n'a plus à
   signaler de loin qu'il s'y passe quelque chose. */

/* ── La bannière du profil, sur photo ───────────────────────────────────
   Le voyage le plus récent de la personne en fond. Tout le contenu de la
   bannière passe en z-index 1 : sans ça, la photo se pose PAR-DESSUS le
   nom et les chiffres — un fond absolu recouvre ses frères en flux. */
.pp-hero.avec-photo{background:var(--ink)}
.pp-hero > *{position:relative;z-index:1}
.pp-fond{position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;opacity:.62}
/* Voile plus léger en haut : à .55/.88 la photo devenait une texture
   sombre plutôt qu'un lieu. Le bas reste dense — c'est là que se posent
   les chiffres et le bouton. */
.pp-voile{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(var(--nuit-voile),.38),rgba(var(--nuit-voile),.86))}

/* ══ L'accueil : le silence, et rien d'autre ═════════════════════════════
   J'ai voulu remplir les cinq cents pixels de vague entre le bonjour et
   la carte de verre. J'y ai posé trois vignettes de destinations. Verdict
   de Charlotte, sans détour : « il est encore plus moche qu'avant ».

   Elle a raison, et pour trois raisons que j'aurais dû voir seul :

   — trois rectangles de 132 pixels qui grouillent sur une photo pleine
     page, ce n'est pas remplir un vide, c'est salir un silence ;
   — le haut portait déjà un titre de trois lignes ; la bande juste
     dessous a densifié le haut sans toucher au bas. Le déséquilibre que
     je voulais corriger a EMPIRÉ ;
   — et surtout : deux façons de choisir une destination sur le même
     écran se disputaient le regard. La carte de verre a cessé d'être le
     point d'arrivée.

   Le vide n'était pas un défaut à réparer. C'était la respiration d'un
   héros pleine page — un choix documenté, repris d'une référence que
   Charlotte avait validée. Je l'ai défait sur mon seul jugement.

   Il ne reste de cette passe que la dérive de la photo : elle n'ajoute
   aucun élément, elle empêche seulement l'image d'être tout à fait
   morte. */

/* La dérive. Elle porte sur le calque ::before (la copie de la photo),
   jamais sur .muse-photo-hero lui-même : animer le conteneur emporterait
   le titre et la carte de verre avec lui. */
@keyframes mph-derive{
  from{ transform:scale(1) translate3d(0,0,0) }
  to  { transform:scale(1.06) translate3d(0,-1.2%,0) }
}
.muse-photo-hero::before{
  animation:mph-derive 40s ease-in-out infinite alternate;
  will-change:transform;
}
/* Réglage système « réduire les animations » : la photo se fige. Une
   dérive lente est exactement ce qui déclenche un malaise chez les
   personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce){
  .muse-photo-hero::before{ animation:none }
}

/* ══ Le profil : une carte qu'on a envie de montrer ══════════════════════
   Trois défauts, tous du même ordre — l'écran ne célébrait rien.

   1. Le nom partageait la ligne avec une adresse e-mail. Elle est partie
      dans les Réglages ; le nom respire, et se permet d'être plus grand.
   2. Les chiffres — 1 pays, 1 voyage, 7 jours — étaient posés en 21px
      dans une rangée grise, du même poids qu'une ligne de tableau. Ce
      sont les seuls trophées de l'écran : ils prennent la taille qui
      leur revient, avec des chiffres à chasse fixe pour que la rangée ne
      danse pas quand ils passent de 9 à 10.
   3. Rien ne distinguait la carte d'identité du reste. Une ombre portée
      douce la décolle du fond, comme une carte qu'on tiendrait. */

.pf-name-solo{ font-size:27px; line-height:1.06 }

.pf-hero{ box-shadow:0 14px 34px rgba(31,26,20,.20) }

.pf-hero .pf-stats{ padding-top:20px; padding-bottom:4px }
.pf-hero .pf-stats .ps-v{
  font-size:34px; font-weight:700; line-height:1;
  /* Chasse fixe : sans elle, la rangée se décale sous le doigt au moment
     précis où un chiffre change — le seul moment où on la regarde. */
  font-variant-numeric:tabular-nums;
}
.pf-hero .pf-stats .ps-l{
  margin-top:5px; font-size:9.5px; letter-spacing:.18em;
}
/* Le trait entre deux chiffres montait sur toute la hauteur, chiffre ET
   libellé confondus. Ramené à la hauteur du nombre seul, il sépare sans
   enfermer. */
.pf-hero .pf-stats .prof-stat + .prof-stat::before{ top:4px; height:34px }

/* La ligne de compte, dans les Réglages, là où l'adresse a été déplacée. */
.pf-compte{
  margin:16px 2px 0; font-size:12.5px; color:var(--ink-soft); text-align:center;
}
.pf-compte b{ font-weight:600; color:var(--ink) }

/* L'astuce d'appui long : elle reste (elle s'efface d'elle-même dès que le
   geste a été fait une fois — c'est un choix assumé, voir
   _astuceAppuiLongHTML), mais elle cesse de parler aussi fort que le
   contenu. Elle était en corps de texte, entre le sélecteur et les
   cartes, à la place d'honneur. Elle passe en note de bas de marge :
   plus petite, plus pâle, alignée à gauche comme un chuchotement. */
.astuce{
  font-size:11.5px;
  color:var(--sub);
  opacity:.72;
  justify-content:flex-start;
  margin-top:2px; margin-bottom:14px;
}
.astuce svg{ opacity:.7 }

/* ── Chercher dans ses contacts (Vos amis) ─────────────────────────────
   Même grammaire que les lignes de réglages : une icône dans un rond, un
   titre, une explication. L'explication n'est pas décorative — elle
   répond à la question qu'on se pose avant d'accorder l'accès à son
   carnet d'adresses, au moment exact où on se la pose. */
.cc-contacts{
  display:flex; align-items:center; gap:13px; width:100%;
  margin:16px 0 4px; padding:14px 15px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius);
  cursor:pointer; text-align:left; box-shadow:var(--shadow-raised);
  transition:transform .12s var(--spring);
}
.cc-contacts:active{ transform:scale(.99) }
.cc-contacts:disabled{ opacity:.55 }
.cc-contacts-ic{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  display:flex; align-items:center; justify-content:center; color:var(--accent-texte,var(--accent));
}
.cc-contacts-m{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0 }
.cc-contacts-m .t{ font-family:var(--serif); font-size:14px; font-weight:600; color:var(--ink) }
.cc-contacts-m .s{ font-size:11.5px; color:var(--sub) }
.cc-contacts .c{ color:var(--sub); flex:none; display:flex }
.cc-contacts-etat{ font-size:12.5px; color:var(--sub); margin:12px 2px }
.cc-thumb-vide{
  display:flex; align-items:center; justify-content:center;
  background:var(--surface2); color:var(--sub);
}

/* ── Le rail des stories, en haut du fil ────────────────────────────────
   Charlotte : « qu'on ouvre sur un onglet réseau social avec les stories
   à cet endroit ». Même médaillon cerclé que partout ailleurs
   (_tripStoryBubbleHTML + .story-ring) : le rail n'invente aucune forme,
   il en pose une rangée. */
.stories-rail{
  display:flex; gap:14px; overflow-x:auto;
  /* « overflow-y:visible » était un vœu, pas une règle : dès qu'un axe
     passe en auto, l'autre passe en auto aussi — la spécification ne
     laisse pas le choix (CSS Overflow 3, § overflow). Le rail rognait
     donc sur les QUATRE côtés.

     Ce qui dépasse du médaillon n'est pas décoratif : .story-ring est un
     empilement d'ombres — 2,5 px de fond, puis 5 px d'accent, puis une
     ombre portée de 10 px décalée de 4 vers le bas. L'anneau vit
     entièrement HORS de la boîte du bouton. Sans place, il est coupé, et
     ça se voit d'abord à gauche, là où le premier médaillon touche le
     bord du rail (« le rond de la story est coupé sur le côté »,
     Charlotte, 6 septembre, capture à l'appui).

     On lui donne la place, et on la reprend en marge négative pour que le
     premier rond reste aligné sur le titre « Les lieux vécus » — sinon
     corriger le rognage décalerait toute la rangée. */
  margin:0 -10px; padding:8px 10px 14px; scrollbar-width:none;
}
.stories-rail::-webkit-scrollbar{ display:none }
/* La porte d'ajout, à la taille des médaillons pour que la rangée ne
   boite pas — 72 de rond, plus l'étiquette dessous comme les autres. */
/* gap:5px et l'étiquette en 10/12 : les valeurs du médaillon d'à côté
   (_tripStoryBubbleHTML, screens-detail.js), relevées à l'écran plutôt
   que devinées. À 11,5px la ligne « Partager » tombait 1,5px plus bas
   que « Grotte de Neptune » — assez pour que la rangée boite. */
.story-plus{
  flex:none; width:76px; background:none; border:0; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer; font-family:var(--sans);
}
.story-plus-r{
  width:72px; height:72px; border-radius:50%;
  border:1.5px dashed var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--sub);
}
.story-plus:active .story-plus-r{ background:var(--fog-soft) }
.story-plus-l{
  font-size:10px; line-height:12px; color:var(--sub);
  max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stories-vide{
  font-size:13px; color:var(--sub); line-height:1.55; margin:8px 2px 0;
}
/* La feuille « Raconter un lieu » */
/* Casse normale : c'était la dernière étiquette en capitales espacées de
   l'app, et elle vit sur l'écran qu'on refait. */
.stories-lab{
  font-family:var(--serif); font-size:13px; font-weight:600;
  letter-spacing:normal; text-transform:none; color:var(--sub);
  margin:0 0 10px;
}

/* ── LA FEUILLE D'UNE NOUVELLE STORY ─────────────────────────────────────
   « L'ajout de story est trop compliqué et pas fluide, il faut rendre ça
   hyper facile comme Instagram. » Le parcours entier est refait ; voici
   ce qu'il porte.

   La photo d'abord, et grande : c'est elle qu'on publie, et l'ancien
   parcours la faisait valider sans jamais la remontrer. */
.story-neuf-photo{
  width:100%; aspect-ratio:4/5; max-height:44vh;
  border-radius:var(--r-md); background-size:cover; background-position:center;
  background-color:var(--n-2); margin:6px 0 18px;
  box-shadow:var(--sh-1);
  position:relative; overflow:hidden;
}
/* Le texte de la story, posé sur l'aperçu pendant qu'on l'écrit. Le voile
   n'est pas décoratif : du blanc sur une photo est illisible une fois sur
   deux, et c'est une chose qu'on ne découvre qu'après publication si
   l'aperçu ment. Il ne s'allume que s'il y a du texte (:empty). */
.story-neuf-texte{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:38px 16px 16px;
  font-family:var(--sans); font-size:15px; line-height:1.45; color:#FFFFFF;
  white-space:pre-wrap; word-break:break-word;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
  background:linear-gradient(180deg, rgba(10,15,12,0) 0%, rgba(10,15,12,.72) 100%);
}
.story-neuf-texte:empty{ display:none }
/* Le lieu quand il est connu : on vient de sa fiche, il n'y a rien à
   demander. Il se dit, il ne se saisit pas. */
.story-neuf-lieu{
  font-family:var(--serif); font-size:21px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink); margin:0 0 2px;
}
.story-neuf-lieux{ display:flex; flex-wrap:wrap; gap:8px }
/* « Un autre lieu… » ouvre le champ. Il est en retrait des propositions :
   c'est la sortie de secours, pas le chemin principal. */
.story-neuf-autre{ opacity:.72 }
.story-neuf-champ{
  width:100%; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface);
  font-size:15px; font-family:var(--sans); color:var(--ink);
}
.story-neuf-champ[hidden]{ display:none }
.story-neuf-note{
  font-size:12px; color:var(--ink-faint); text-align:center;
  margin:12px 0 4px; line-height:1.5;
}
.stories-dests{ display:flex; flex-wrap:wrap; gap:8px }
.stories-dests .trip-step-mode-btn{ flex:0 0 auto; padding:9px 14px }

/* ── Le tableau d'accès ─────────────────────────────────────────────────
   Deux colonnes étroites à droite, le libellé prend tout le reste : c'est
   la grammaire d'un comparatif, et elle survit à un libellé sur deux
   lignes sans pousser les colonnes. Une seule règle de largeur, portée
   par la grille, plutôt qu'un tableau HTML qui se recalcule tout seul. */
.acc-tab{
  /* overflow:hidden pour que le bandeau de colonne soit rogné par le
     rayon de la carte : sans lui, ses angles droits dépassaient au-dessus
     et au-dessous de la courbe, et la colonne avait l'air posée SUR la
     carte au lieu d'être dedans. */
  position:relative; overflow:hidden;
  background:var(--surface); border-radius:var(--r-lg);
  padding:4px 16px; margin-top:2px; box-shadow:var(--sh-1);
}
/* La colonne de droite en UN bandeau continu, posé derrière les lignes —
   et non un fond par cellule, qui se lisait comme une pile de boutons
   empilés plutôt que comme une colonne. Sa largeur est celle de la
   grille (68px) et son bord droit celui du rembourrage (16px) : les deux
   valeurs sont ici et dans .acc-l, nulle part ailleurs. */
.acc-tab::before{
  content:''; position:absolute; top:0; bottom:0; right:16px; width:68px;
  background:var(--fog-soft); border-radius:14px; pointer-events:none;
}
.acc-l{
  display:grid; grid-template-columns:1fr 68px 68px; align-items:center;
  gap:8px; padding:13px 0; border-bottom:1px solid var(--line);
}
.acc-l:last-child{ border-bottom:0 }
.acc-quoi{ font-size:14px; line-height:1.35; color:var(--ink) }
.acc-c{ display:flex; justify-content:center }
/* La colonne de droite est celle qu'on veut : un fond très léger la
   distingue sans la crier, comme la colonne PRO des comparatifs. */
.acc-l .acc-c{ position:relative }   /* au-dessus du bandeau */
.acc-tete .acc-quoi{
  font-size:var(--t-micro); font-weight:var(--t-micro-g); letter-spacing:.07em;
  text-transform:uppercase; color:var(--sub);
}
.acc-tete .acc-c{
  font-size:11.5px; font-weight:700; color:var(--sub); text-align:center;
  line-height:1.25; padding:8px 4px;
}
.acc-tete .acc-fort{ color:var(--ink) }
.acc-oui{ display:flex; color:var(--ok) }
/* Le tiret d'absence : un trait, pas une croix. Une croix rouge dit
   « refusé » là où il ne s'agit que d'une chose pas encore ouverte. */
.acc-non{ display:block; width:14px; height:1.5px; background:var(--line); border-radius:1px }
.acc-note{ font-size:13px; line-height:1.55; color:var(--sub); margin:16px 2px 0 }
/* L'en-tête de l'écran d'accès, tant qu'Apple n'a pas répondu : la place
   est tenue pour que le tableau ne saute pas quand la réponse arrive. */
.acc-tete-place{ min-height:96px; display:flex; align-items:center; justify-content:center }

/* ── Les réservations d'un voyage ───────────────────────────────────────
   Une carte par réservation, dans la grammaire des cartes de l'app :
   surface, rayon, ombre 1. Rien de neuf inventé pour l'occasion. */
.resa-c{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:16px; margin-bottom:10px;
}
.resa-h{ display:flex; align-items:flex-start; gap:12px }
.resa-ic{
  width:38px; height:38px; border-radius:12px; flex:none;
  /* --accent-texte, pas --accent nu : sur une surface claire, l'accent
     du jour descend sous 4,5:1 une partie de l'année (banc-saison). */
  background:var(--fog-soft); color:var(--accent-texte,var(--accent));
  display:flex; align-items:center; justify-content:center;
}
.resa-m{ flex:1; min-width:0 }
.resa-t{ font-size:var(--t-carte); font-weight:var(--t-carte-g); color:var(--ink); line-height:1.3 }
.resa-meta{ font-size:12.5px; color:var(--sub); margin-top:3px }
.resa-quand{ font-size:12.5px; color:var(--ink); margin-top:5px; font-weight:500 }
.resa-x{
  flex:none; width:28px; height:28px; border-radius:50%; border:0;
  background:transparent; color:var(--sub); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.resa-x:active{ background:var(--fog-soft) }
.resa-p{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
}
.resa-ref{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.resa-ref span{
  font-size:var(--t-micro); font-weight:var(--t-micro-g); letter-spacing:.07em;
  text-transform:uppercase; color:var(--sub);
}
.resa-ref b{ font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.02em }
.resa-prix{ font-size:16px; font-weight:600; color:var(--ink); flex:none }
.resa-noms{ font-size:12.5px; color:var(--sub); margin-top:10px; line-height:1.45 }
/* Ce que la confirmation ne disait pas se VOIT. Un dossier absent qui se
   tait, c'est un dossier qu'on croit avoir jusqu'au comptoir. */
.resa-manque{
  font-size:12px; color:var(--sub); line-height:1.5;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
}
.resa-brut{
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--sans);
  font-size:12px; color:var(--accent-texte,var(--accent));
  text-decoration:underline; text-underline-offset:2px;
}
.resa-brut.seul{ margin-top:12px }
.resa-vide{
  width:100%; text-align:left; background:var(--surface); border:1px dashed var(--line);
  border-radius:var(--r-lg); padding:16px; display:flex; gap:12px; align-items:flex-start;
  cursor:pointer; font-family:var(--sans);
}
.resa-vide-ic{
  width:38px; height:38px; border-radius:12px; flex:none; background:var(--fog-soft);
  color:var(--sub); display:flex; align-items:center; justify-content:center;
}
.resa-vide-m{ display:flex; flex-direction:column; gap:4px }
.resa-vide-t{ font-size:var(--t-carte); font-weight:var(--t-carte-g); color:var(--ink) }
.resa-vide-s{ font-size:12.5px; color:var(--sub); line-height:1.5 }
.resa-plus{
  width:100%; background:none; border:0; padding:6px 0 0; cursor:pointer;
  font-family:var(--sans); font-size:13.5px;
  color:var(--accent-texte,var(--accent)); font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.resa-etat{
  display:flex; align-items:center; gap:10px; min-height:22px;
  margin-top:12px; font-size:13px; color:var(--sub);
}
.resa-err{ color:var(--ink); line-height:1.5 }
.resa-brut-txt{
  white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,Menlo,monospace;
  font-size:12px; line-height:1.6; color:var(--ink); margin:0;
}

/* ── Réorganiser une journée ────────────────────────────────────────────
   Une ligne par moment : l'heure du créneau à gauche (elle ne bouge
   pas), le titre au milieu, les deux flèches à droite. */
.ord-l{
  display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:10px;
  padding:12px 14px; background:var(--surface); border-radius:var(--r-md);
  box-shadow:var(--sh-1); margin-bottom:8px;
}
.ord-h{
  font-family:var(--mono,ui-monospace,Menlo,monospace); font-size:12px;
  color:var(--sub); letter-spacing:.02em;
}
.ord-t{
  font-size:14px; color:var(--ink); line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ord-b{ display:flex; gap:6px; flex:none }
.ord-f{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ord-f.bas svg{ transform:rotate(180deg) }
.ord-f:disabled{ opacity:.3; cursor:default }
.ord-f:not(:disabled):active{ background:var(--fog-soft) }
/* Deux actions dans l'en-tête d'une section : elles se serrent à droite
   et passent à la ligne plutôt que d'écraser le titre. */
.jour-actes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }

/* ── Les documents joints à une réservation ─────────────────────────── */
.pj{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.pj-l{ display:flex; align-items:center; gap:6px; margin-bottom:6px }
.pj-o{
  flex:1; min-width:0; display:flex; align-items:center; gap:9px;
  background:var(--fog-soft); border:0; border-radius:10px; padding:9px 11px;
  cursor:pointer; font-family:var(--sans); text-align:left;
}
.pj-o:active{ background:var(--n-2) }
.pj-ic{ color:var(--sub); display:flex; flex:none }
.pj-n{
  flex:1; min-width:0; font-size:13px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pj-t{ font-size:11.5px; color:var(--sub); flex:none }
.pj-x{
  flex:none; width:26px; height:26px; border-radius:50%; border:0;
  background:transparent; color:var(--sub); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pj-x:active{ background:var(--fog-soft) }
.pj-plus{
  background:none; border:0; padding:4px 0 0; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  color:var(--accent-texte,var(--accent));
  display:flex; align-items:center; gap:5px;
}

/* ── La recherche dans ses voyages ──────────────────────────────────── */
.rech-invite,.rech-vide{
  font-size:13.5px; color:var(--sub); line-height:1.6; margin:22px 2px 0;
}

/* ── Trier ses voyages ──────────────────────────────────────────────── */
.voy-tri{
  display:flex; align-items:center; gap:5px; background:none; border:0;
  padding:0; cursor:pointer; font-family:var(--sans); font-size:12.5px;
  color:var(--sub); max-width:52vw;
}
.voy-tri span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.voy-tri svg{ flex:none }
.voy-tri-l{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:15px 16px; margin-bottom:8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--sans); font-size:14.5px; color:var(--ink); text-align:left;
}
.voy-tri-l.on{ border-color:var(--ink) }
.voy-tri-v{ color:var(--ok); display:flex; flex:none }
.voy-tri-n{ font-size:12.5px; color:var(--sub); line-height:1.55; margin:14px 2px 0 }

/* Les lieux d'une journée, sur sa carte repliée. Mêmes pastilles que les
   étapes d'une trace dans le fil (.tr-etapes, features.css) : une seule
   grammaire pour « voici de quoi c'est fait ». */
.itn-dlieux{ margin-top:12px }

/* Un hébergement dit d'abord QUELLES NUITS : c'est la seule question
   qu'on pose à cette liste depuis l'intérieur d'un voyage. Le lieu et la
   description passent après, en gris. */
.itn-stay-q{
  font-size:13px; font-weight:600; color:var(--ink);
  margin-top:3px; letter-spacing:.01em;
}
.itn-stay-q + .itn-stay-s,.itn-porte-s,.itn-etape-s{ margin-top:2px }

/* ── La vignette d'une journée ────────────────────────────────────────────
   « on ne s'est pas assez attaqué à la DA » : sous le hero, l'écran d'un
   voyage n'avait plus une seule image sur toute sa hauteur. Chaque journée
   reçoit la photo RÉELLE de son premier lieu, quand Wikimedia Commons peut
   la prouver (gem-photos.js n'accepte une image que si son titre nomme le
   lieu). Rien de prouvé, rien d'affiché.

   La vignette naît à zéro et s'ouvre en largeur : une journée sans photo a
   exactement la mise en page d'avant, et l'arrivée d'une photo n'a jamais
   fait sauter la page sous le doigt. */
.itn-dtop{ min-width:0 }
.itn-dtxt{ min-width:0 }
/* Traitement « magazine » : la vignette flotte à droite et le texte
   reprend TOUTE la largeur dès qu'il passe sous elle. En colonnes fixes,
   les soixante-dix-huit pixels de la photo étaient perdus sur chacune des
   lignes de la carte, y compris celles qui descendent bien plus bas. */
.itn-dph{
  float:right; margin:0 0 10px 12px;
  width:0; height:0; opacity:0; overflow:hidden;
  border-radius:var(--r-sm); background:var(--fog-soft);
  background-size:cover; background-position:center;
  transition:width .32s cubic-bezier(.2,.8,.3,1),
             height .32s cubic-bezier(.2,.8,.3,1), opacity .32s ease;
}
.itn-dph.has-photo{ width:78px; height:78px; opacity:1 }
/* Le crédit n'est pas une mention légale qu'on cache : il est lisible,
   discret, et il ne prend aucune place tant qu'il n'y a pas de photo.
   Il est UNIQUE pour toute la section — un crédit par carte faisait
   grandir chaque carte à l'arrivée de sa photo, et la page sautait sous
   le doigt neuf fois de suite. */
.itn-dph-c{
  font-size:10px; color:var(--sub); opacity:.72; line-height:1.5;
  margin:14px 2px 0;
}

/* ── Aujourd'hui, pendant le voyage ───────────────────────────────────────
   Pendant un séjour, les neuf journées avaient exactement la même allure
   que celles d'un voyage qui part dans trois mois : neuf rectangles blancs
   parmi lesquels il fallait CHERCHER le jour qu'on vit. Or pendant le
   voyage, la question n'est plus « que fait-on ce séjour » mais « que
   fait-on maintenant ».

   La carte du jour est cerclée d'accent, posée sur un fond très légèrement
   teinté, et dépliée d'office. Les journées passées ne sont pas éteintes :
   on ne sait pas ce qui a été fait, et griser cinq cartes sur sept donne
   un écran qui a l'air en panne. */
.itn-day.auj{
  box-shadow:0 0 0 1.5px var(--accent), var(--shadow-card);
  background:linear-gradient(180deg, var(--accent-tint) 0%, var(--surface) 78px);
}
/* --accent-ink et pas #fff : sous la menthe le blanc passe, sous le
   terracotta il tombe à 3,39:1. C'est exactement le défaut que banc-saison
   surveille, et il me l'a repris ici. */
.itn-day.auj .itn-dn{
  background:var(--accent); color:var(--accent-ink);
}
/* La pastille « Transfert » vit à l'intérieur du libellé de jour : sur
   fond d'accent plein, elle emprunte la même encre que lui. */
.itn-day.auj .itn-transfer-badge{
  border-color:color-mix(in srgb, var(--accent-ink) 60%, transparent);
  color:var(--accent-ink);
}

/* ── Les phases du voyage ────────────────────────────────────────────────
   « On ne s'est pas assez attaqué à la DA. » Sous le hero, l'écran alignait
   sept cartes du même blanc, de la même hauteur, à douze pixels d'écart :
   un métronome. Le voyage, lui, bouge — deux nuits à Cagliari, trois à
   Oliena. La respiration qui manquait n'était pas de l'espace vide, c'est
   que le voyage ait une forme visible.

   Le titre de phase ne crie pas : il ouvre un intervalle plus grand
   au-dessus de lui qu'en dessous, pour que l'œil comprenne qu'il APPARTIENT
   aux cartes qui le suivent. */
.itn-phase{
  margin:26px 0 10px; padding-left:2px;
}
.itn-phase:first-child{ margin-top:6px }
.itn-phase-n{
  font-family:var(--serif); font-weight:700; font-size:15px;
  color:var(--ink); letter-spacing:-.01em;
}
.itn-phase-q{
  margin-top:2px; font-size:11.5px; letter-spacing:.04em;
  color:var(--sub);
}
/* « 7 jours offerts » est l'argument, pas une note de bas de page : il se
   lit en accent, sur la même ligne que l'équivalent mensuel. */
.form-c-s.offert{color:var(--accent-texte,var(--accent)); font-weight:500}

.fil-plus{display:block;width:auto;margin:18px auto 8px;padding:0 22px}