/* Le guide PVT de Laura : système de design (DA LauraPVT : papier kraft, cartes néo-brutalistes, rose, encre).
   Tokens      : couleurs, typo (--fs-*), espaces (--sp-*), rayons (--r-*), ombres (--sh-*) dans :root.
   Mise en page: .wrap (720 px max sur téléphone et tablette, large sur ordinateur : voir la partie v3 en fin de fichier), .stack (pile verticale espacée), .row (boutons côte à côte).
   En-tête     : .topbar (+ .icon-btn retour / accueil, .topbar-title), .tabs (ancres collantes des fiches, .is-active).
   Titres      : .page-head (eyebrow + h1 + .lead), .sec-head (numéro + h2), .eyebrow (petit titre majuscule).
   Carte       : .card (+ --pink --cream --ink --flat), .card-title. Ligne cliquable : .nav-row (+ .nav-row__media).
   Badges      : .badge (tampon rose, --ink --turq --sm --tilt), .tag (statut : --ok « Officiel », --repere « Prix repère », --warn « À confirmer »).
   Boutons     : .btn (principal rose), .btn--secondary (blanc), .btn--sm, .link (lien texte + flèche).
   Choix       : .choice (quiz, .is-on), .chip (filtre, .is-on), .seg (bascule 2 choix), .tile (ville, drapeau).
   Cases       : .checklist > .check (input natif caché + .box SVG), .check.is-done.
   Progression : .progress > i (barre), .prog-line (compteur + barre), .ring (SVG), .stepper.
   Laura       : .laura (sticker + .bubble avec .who). Jamais plus de 112 px de haut dans le flux.
   Faits       : .stats > .stat (chiffre clé + statut), .kv (libellé / valeur), .lines > .line (budget), .ticks.
   Sources     : details.sources (repliable, liens externes), .verified (bandeau « vérifié le »).
   États       : .state (vide / erreur, avec Laura), .toast. Accessibilité : :focus-visible, prefers-reduced-motion.
   v2 (03/11/2026, « une fiche qui respire ») :
   Rythme      : --gutter (marge latérale), --measure (62ch maxi par ligne), --lh 1.6 ; .sec-head (filet + gros titre) + .sec-lead.
   Repliable   : details.card.fold > summary (.fold__t, .fold__sub, .chev) + .fold__body. Fermé par défaut.
   Lignes      : .line > .line__top (.l + .v) puis .d pleine largeur, .line__tag.
   Carte       : .map-frame[data-carte][data-mode=pays|ville] (emplacement, js/cartes.js y monte .carte puis .is-ready),
                 .map-fallback (attente), .map-cities-box > .map-cities > .chip[data-goville].
   Villes      : .city-picker (.tiles), #ville.city > .city-head-card (.city-head, __img, __name, __sous, __count, .city-intro),
                 .seg.seg--tabs (À faire / Quartiers / Se déplacer, --n = nb de vues), .city-panel, .panel-lead.
   Activités   : .filter-bar > .chips--scroll (.chip[data-interet] + .n) + .sort-row (.result-count, .seg.seg--sm tri),
                 ul.acts > li.act (.act__top, .act__img, .act__name, .act__meta, .price, .act__type--<type>, .act__desc, .act__price), .act-more.
   Quartiers   : ul.quartiers > li.quartier (.quartier__top, __name, __price, __unit, __desc, __pour). Transports : .moves (.lines). */

/* Montserrat hébergée localement (hors ligne, sans appel à Google). Licence : fonts/OFL.txt */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* couleurs */
  --ink: #2E3557;          /* texte principal : 11.9:1 sur blanc */
  --ink-2: #4A5170;        /* texte secondaire : 7.8:1 sur blanc, 5.8:1 sur rose pâle */
  --black: #18181C;        /* bords et ombres */
  --pink: #F2558C;         /* aplats, gros textes (≥ 18 px gras) */
  --pink-600: #CF336C;     /* petit texte rose, petits badges : ≥ 4.5:1 */
  --pink-100: #FBE3EA;
  --pink-200: #FFD6E5;     /* 13/11 : le rose de « En 30 secondes », pour tous les fonds roses */
  --cream: #FFF8EA;
  --paper: #FFFDF8;
  --turq: #40BEC4;
  --turq-100: #DDF3F4;
  --amber-100: #FFF1C9;
  --kraft: #EAD9BC; --yellow: #F5B83D; --yellow-100: #FFF1C9; --pink-50: #FFF3F8;
  --amber-700: #8A5A00;
  --line: #E4DCCB;         /* filets pointillés */
  --focus: #2E3557;

  /* typo */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-body-sm: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;
  --lh: 1.6; --lh-tight: 1.25;

  /* espaces, rayons, bords, ombres */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --gutter: 20px;          /* marge latérale de la colonne */
  --measure: 62ch;         /* longueur de ligne maxi des paragraphes */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --bw: 2.5px; --bw-thin: 2px;
  --sh-sm: 2px 2px 0 var(--black); --sh-md: 3px 3px 0 var(--black); --sh-lg: 5px 5px 0 var(--black);
  /* 13/11 : deux niveaux seulement (blocs de premier niveau / ce qui est posé dedans), deux rayons (cartes / contrôles) */
  --sh-card: var(--sh-lg); --sh-tile: var(--sh-sm); --r-card: 16px; --r-ctrl: 12px;
  --fs-h1: clamp(28px, 7.4vw, 32px); --fs-h2: 26px; --fs-card: 20px;
  --topbar-in-h: 60px;     /* la rangée du haut (menu, titre, recherche) */
  --pvtbar-h: 52px;        /* 12/11 : la barre « Le guide / Mon PVT » */
  --topbar-h: calc(var(--topbar-in-h) + var(--pvtbar-h));   /* tout l'en-tête : sert aux décalages des éléments collants */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; display: flex; flex-direction: column;
  font-family: var(--font); font-weight: 500; font-size: var(--fs-md); line-height: var(--lh);
  color: var(--ink); background: #CB975E;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: #CB975E url("../img/fond_kraft_tuile.webp") left top / 700px 700px repeat;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 800; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 900; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); line-height: 1.1; }
h2 { font-size: var(--fs-xl); line-height: 1.15; }
h3 { font-size: var(--fs-lg); line-height: 1.25; font-weight: 800; }
p { margin: 0; }
p + p { margin-top: var(--sp-3); }
ul, ol { margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .card:focus-visible, .choice:focus-visible { outline-offset: 4px; }

.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- mise en page ---------- */
.wrap { flex: 1 0 auto; width: 100%; max-width: 480px; margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-12); }
.wrap:focus { outline: none; }
.stack > * + * { margin-top: var(--sp-6); }
.stack-sm > * + * { margin-top: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-8); } .mt-8 { margin-top: var(--sp-10); }
.row { display: flex; gap: var(--sp-3); }
.row > * { flex: 1 1 0; min-width: 0; }
.muted { color: var(--ink-2); font-size: var(--fs-body-sm); line-height: 1.55; }
.small { font-size: var(--fs-body-sm); line-height: 1.55; }
.eyebrow { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- en-tête ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--cream); border-bottom: var(--bw) solid var(--black);
}
.topbar-in {
  max-width: 480px; height: var(--topbar-in-h); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: var(--sp-3);
}
.topbar-title {
  flex: 1; min-width: 0; font-weight: 900; font-size: var(--fs-md); line-height: 1.15; text-decoration: none; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-title span { color: var(--pink-600); }
.icon-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: #fff; color: var(--black); text-decoration: none; cursor: pointer;
  border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.icon-btn .ic { width: 20px; height: 20px; stroke-width: 3; }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--black); }
.icon-btn[hidden] { display: none; }

/* ancres collantes des fiches */
.tabs {
  position: sticky; top: var(--topbar-h); z-index: 20;
  margin: var(--sp-6) calc(-1 * var(--gutter)) 0; padding: var(--sp-2) var(--gutter);
  display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  scroll-padding-inline: var(--gutter);
  background: var(--cream); border-top: var(--bw-thin) solid var(--black); border-bottom: var(--bw) solid var(--black);
}
/* fondu sur le bord droit : il reste des onglets à faire défiler */
.tabs-wrap { position: sticky; top: var(--topbar-h); z-index: 20; margin: var(--sp-6) calc(-1 * var(--gutter)) 0; }
.tabs-wrap .tabs { position: static; margin: 0; }
.tabs-wrap::after { content: ""; position: absolute; top: 2px; right: 0; bottom: 3px; width: 40px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 248, 234, 0), var(--cream)); transition: opacity .2s; }
.tabs-wrap.at-end::after { opacity: 0; }
.tabs-wrap::before { content: ""; position: absolute; z-index: 1; top: 2px; left: 0; bottom: 3px; width: 32px; pointer-events: none;
  background: linear-gradient(to left, rgba(255, 248, 234, 0), var(--cream)); transition: opacity .2s; }
.tabs-wrap.at-start::before { opacity: 0; }
.tabs::after { content: ""; flex: none; width: var(--sp-2); }
.tabs::-webkit-scrollbar { display: none; }
.tabs .chip { flex: none; scroll-snap-align: start; min-height: 44px; padding: 8px 14px; font-size: 14px; box-shadow: none; }
.tabs .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- titres de page et de section ---------- */
.page-head { margin-bottom: var(--sp-6); }
.page-head h1 { margin-top: var(--sp-3); }
.page-head .lead { margin-top: var(--sp-3); font-weight: 600; color: var(--ink); max-width: var(--measure); }
.page-head--flag { display: flex; align-items: center; gap: var(--sp-4); }
.page-head--flag h1 { margin-top: var(--sp-2); }

.sec-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-16) 0 var(--sp-5); scroll-margin-top: calc(var(--topbar-h) + 76px); }
.sec-head h2 { font-size: 26px; line-height: 1.12; }
.sec-head .num {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--pink-600); color: #fff; font-weight: 900; font-size: var(--fs-lg);
  border: var(--bw) solid var(--black); border-radius: var(--r-sm); box-shadow: var(--sh-sm); transform: rotate(-3deg);
}
.sub-head { margin: var(--sp-10) 0 var(--sp-4); font-size: 20px; line-height: 1.2; }
.group-label { margin: var(--sp-8) 0 var(--sp-3); color: var(--ink); font-size: 13px; }

/* ---------- badges et statuts ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: var(--pink-600); color: #fff;
  font-weight: 800; font-size: var(--fs-xs); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
  border: var(--bw-thin) solid var(--black); border-radius: var(--r-sm); box-shadow: var(--sh-sm);
}
.badge--tilt { transform: rotate(-2deg); }
.badge--ink { background: var(--ink); }
.badge--turq { background: var(--turq); color: var(--black); }
.badge--cream { background: var(--cream); color: var(--ink); }
.badge--sm { padding: 3px 7px; font-size: var(--fs-xs); box-shadow: none; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 2px 8px 2px 6px; border-radius: var(--r-pill); border: 1.5px solid currentColor;
  font-size: var(--fs-xs); font-weight: 800; line-height: 1.4; letter-spacing: .02em; white-space: nowrap;
}
.tag .ic { width: 12px; height: 12px; stroke-width: 3.2; }
.tag--ok { background: var(--turq-100); color: #155E63; }
.tag--warn { background: var(--amber-100); color: var(--amber-700); }
.tag--repere { background: #F1F2F6; color: var(--ink-2); border-color: #A9AEC0; font-weight: 700; cursor: help; }
/* budget du mois : un calcul du guide (ni officiel, ni « À confirmer ») */
.tag--estim { background: #EAF6F6; color: #0F4F54; border-color: #8CC5C7; font-weight: 700; cursor: help; }

/* ---------- cartes ---------- */
.card {
  position: relative; display: block;
  background: #fff; color: var(--ink);
  border: var(--bw) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: var(--sp-5);
}
.card--pink { background: var(--pink-200); }
.card--cream { background: var(--cream); }
.card--ink { background: var(--ink); color: #fff; }
.card--ink h2, .card--ink h3 { color: #fff; }
.card--flat { box-shadow: none; border-width: var(--bw-thin); }
.card--tight { padding: var(--sp-4); }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.card-title h3 { flex: 1; }
.card--alert { display: flex; gap: var(--sp-3); align-items: flex-start; }
.card--alert > .ic { width: 24px; height: 24px; margin-top: 1px; color: var(--pink-600); }

a.card, .nav-row { text-decoration: none; transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
a.card:active, .nav-row:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--black); }
@media (hover: hover) {
  a.card:hover, .nav-row:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--black); }
}

/* ligne cliquable : menu, pays, étapes */
.nav-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); min-height: 84px; }
.nav-row__media {
  flex: none; width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden;
  background: var(--pink-100); border: var(--bw-thin) solid var(--black);
  display: grid; place-items: end center;
}
.nav-row__media img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding-top: 4px; }
.nav-row__body { flex: 1; min-width: 0; }
.nav-row__title { display: block; font-weight: 900; font-size: var(--fs-lg); line-height: 1.2; }
.nav-row__desc { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.nav-row__desc b { color: var(--pink-600); }
.nav-row > .ic { color: var(--ink); width: 22px; height: 22px; stroke-width: 3; }
.card--pink .nav-row__media { background: #fff; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: 54px; padding: 12px 18px;
  background: var(--pink-600); color: #fff; font-weight: 900; font-size: var(--fs-lg); line-height: 1.15; text-align: center; text-decoration: none; white-space: nowrap;
  border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-md);
  cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .12s;
}
.btn .ic { width: 20px; height: 20px; stroke-width: 3; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--black); }
@media (hover: hover) { .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--black); } }
.btn--secondary { background: #fff; color: var(--ink); }
.btn--sm { min-height: 46px; padding: 9px 14px; font-size: var(--fs-md); font-weight: 800; }
.btn--auto { width: auto; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.actions { display: grid; gap: var(--sp-4); margin-top: var(--sp-10); }
.link {
  display: inline-flex; align-items: center; gap: 4px;
  padding-block: 12px; margin-block: -4px -12px;
  color: var(--pink-600); font-weight: 800; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.link .ic { width: 16px; height: 16px; }

/* ---------- Laura ---------- */
.laura { display: flex; align-items: flex-end; gap: var(--sp-1); margin: var(--sp-8) 0; }
.laura__img {
  flex: none; width: 84px; height: 112px; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 2px 2px rgba(24, 24, 28, .18));
}
.bubble {
  position: relative; flex: 1; min-width: 0; margin-bottom: var(--sp-3);
  background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-md);
  padding: var(--sp-4); font-size: 15px; line-height: 1.6;
}
.bubble::before, .bubble::after { content: ""; position: absolute; border-style: solid; }
.bubble::before { left: -13px; bottom: 14px; border-width: 8px 13px 8px 0; border-color: transparent var(--black) transparent transparent; }
.bubble::after { left: -8.5px; bottom: 17px; border-width: 5px 9px 5px 0; border-color: transparent #fff transparent transparent; }
.bubble .who { display: block; margin-bottom: 4px; color: var(--pink-600); font-weight: 900; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.bubble b { color: var(--ink); }

/* ---------- accueil ---------- */
.hero { overflow: hidden; padding: var(--sp-5) var(--sp-4) var(--sp-5); min-height: 260px; }
.hero__text { position: relative; z-index: 1; max-width: 68%; }
.hero h1 { margin-top: var(--sp-3); font-size: 29px; line-height: 1.08; }
.hero h1 .nw { white-space: nowrap; }
.hero h1 em { font-style: normal; color: var(--pink); display: block; }
.hero p { margin-top: var(--sp-3); font-weight: 600; font-size: 15px; line-height: 1.55; }
.hero__laura { position: absolute; right: -8px; bottom: -4px; width: 37%; max-width: 160px; height: auto; pointer-events: none; }
.hero__cta { position: relative; z-index: 1; margin-top: var(--sp-4); }

/* ---------- quiz ---------- */
.quiz-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-2); }
.quiz-top .eyebrow { color: var(--ink); }
.quiz-q { font-size: 26px; line-height: 1.15; }
.quiz-help { margin-top: var(--sp-2); color: var(--ink-2); font-size: 15px; }
.field { position: relative; margin-top: var(--sp-5); }
.field input {
  width: 100%; height: 72px; padding: 0 76px 0 20px;
  font: 800 34px/1 var(--font); color: var(--ink); background: var(--paper);
  border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: inset 0 3px 0 rgba(24, 24, 28, .06);
  -moz-appearance: textfield; appearance: textfield;
}
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input::placeholder { color: #CFCAC0; font-weight: 500; }
.field input[aria-invalid="true"] { border-color: var(--pink-600); box-shadow: 0 0 0 3px var(--pink-100); }
.field input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-200); }
.field .unit { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: var(--fs-xl); color: var(--ink-2); pointer-events: none; }
.choices { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.choices--two { grid-template-columns: 1fr 1fr; }
.choices--two .choice--full { grid-column: 1 / -1; }
.choice {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 58px; padding: 10px 14px;
  background: #fff; color: var(--ink); text-align: left; font-weight: 800; font-size: var(--fs-md); line-height: 1.25;
  border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-md);
  cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .12s;
}
.choice:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--black); }
.choice small { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.choice .mark {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: var(--bw-thin) solid var(--black); border-radius: 50%; background: #fff; color: transparent;
}
.choice .mark .ic { width: 14px; height: 14px; stroke-width: 3.6; }
.choice--multi .mark { border-radius: 6px; }
.choice.is-on { background: var(--pink-200); }
.choice.is-on .mark { background: var(--pink-600); color: #fff; }
.form-error { min-height: 22px; margin-top: var(--sp-3); color: #B4235A; font-weight: 800; font-size: var(--fs-sm); }
.form-error:empty { min-height: 0; margin: 0; }
.quiz-nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.quiz-nav .btn--secondary { flex: 0 0 38%; }

/* ---------- progression ---------- */
.progress { position: relative; height: 12px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--pink); border-right: var(--bw-thin) solid var(--black); transition: width .35s var(--ease); }
.progress > i[style*="width:0%"], .progress > i[style*="width: 0%"] { border-right: 0; }
.progress--sm { height: 8px; border-width: 1.5px; }
.prog-line { display: flex; align-items: center; gap: var(--sp-3); font-weight: 800; font-size: var(--fs-sm); }
.prog-line .progress { flex: 1; }
.prog-line .count { min-width: 38px; font-variant-numeric: tabular-nums; }
.prog-line .lbl { color: var(--ink-2); font-weight: 700; }

.ring { position: relative; flex: none; width: 104px; height: 104px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { fill: #fff; stroke: var(--pink-100); stroke-width: 12; }
.ring .val { fill: none; stroke: var(--pink); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease); }
.ring .edge { fill: none; stroke: var(--black); stroke-width: 2.5; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xl); font-weight: 900; font-variant-numeric: tabular-nums; }

.stepper { display: flex; gap: 6px; }
.stepper span { flex: 1; height: 10px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill); }
.stepper span.is-done { background: var(--pink); }
.stepper span.is-current { background: var(--ink); }

/* ---------- cases à cocher ---------- */
.checklist { padding: 0; overflow: hidden; }
.check {
  position: relative; display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4); cursor: pointer; transition: background-color .15s;
}
.check + .check { border-top: var(--bw-thin) dashed var(--line); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box {
  flex: none; width: 28px; height: 28px; margin-top: 1px; display: grid; place-items: center;
  background: #fff; color: transparent; border: var(--bw) solid var(--black); border-radius: var(--r-sm);
  transition: background-color .15s, transform .15s var(--ease);
}
.check .box .ic { width: 18px; height: 18px; stroke-width: 3.6; }
.check input:checked + .box { background: var(--pink); color: #fff; animation: pop .22s var(--ease); }
.check input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 3px; }
.check .txt { flex: 1; min-width: 0; }
.check .t { display: block; font-weight: 800; font-size: var(--fs-md); line-height: 1.35; }
.check .d { display: block; margin-top: 6px; font-size: var(--fs-body-sm); color: var(--ink-2); line-height: 1.6; }
.check .thumb { flex: none; width: 48px; height: 48px; object-fit: contain; }
.check .jour { margin-bottom: 6px; }
.check.is-done { background: #FFF6F9; }
.check.is-done .t { color: var(--ink-2); }
.check.is-done .d { color: #6B7089; }
.check.is-done .thumb { opacity: .55; }
@media (hover: hover) { .check:hover { background: var(--paper); } }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- faits ---------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4);
  background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.stat .k { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.stat .v { margin-top: 2px; font-size: 30px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.stat .n { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.stat .tag { align-self: flex-start; margin-top: auto; }
.stat .n + .tag, .stat .v + .tag { margin-top: 10px; }
.stats--flat .stat { box-shadow: none; border-width: var(--bw-thin); background: var(--paper); padding: 12px 14px; }
.stats--flat .stat .v { font-size: var(--fs-lg); font-weight: 900; letter-spacing: 0; line-height: 1.2; }
.stat--wide { grid-column: 1 / -1; }

.kv { display: grid; }
.kv > div { padding: var(--sp-5) 0; border-bottom: var(--bw-thin) dashed var(--line); }
.kv > div:first-child { padding-top: 0; }
.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt, .kv .k { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pink-600); margin-bottom: 6px; }
.kv dd { margin: 0; font-weight: 600; line-height: 1.6; max-width: var(--measure); }
.kv dt .tag { text-transform: none; letter-spacing: .02em; }
.kv .muted { display: block; margin-top: 2px; }

.lines { display: grid; }
.line { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: var(--bw-thin) dashed var(--line); }
.line:first-child { padding-top: 0; }
.line:last-child { border-bottom: 0; padding-bottom: 0; }
.line .l { font-weight: 800; font-size: var(--fs-md); line-height: 1.35; }
.line .d { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.line .v { flex: none; max-width: 44%; text-align: right; font-weight: 900; font-size: var(--fs-lg); line-height: 1.25; color: var(--ink); }
.line .v .tag { margin-top: 4px; }

ul.ticks { list-style: none; display: grid; gap: var(--sp-4); }
ul.ticks li { position: relative; padding-left: 32px; line-height: 1.6; max-width: var(--measure); }
ul.ticks li > .ic {
  position: absolute; left: 0; top: 2px; width: 22px; height: 22px; padding: 3px;
  background: var(--pink); color: #fff; border: var(--bw-thin) solid var(--black); border-radius: 6px; stroke-width: 3.6;
}
ul.ticks li .tag { margin-left: 4px; }

/* ---------- sources et vérification ---------- */
.verified {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); background: var(--turq-100); color: var(--ink);
  border: var(--bw-thin) solid var(--black); border-radius: var(--r-md);
  font-size: 14px; line-height: 1.55;
}
.verified > .ic { width: 22px; height: 22px; color: #155E63; margin-top: 1px; }
.verified b { display: block; margin-bottom: 2px; font-size: var(--fs-body-sm); }

details.sources { margin-top: var(--sp-5); background: var(--paper); border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); }
details.sources > summary {
  display: flex; align-items: center; gap: var(--sp-2); padding: 12px 16px; min-height: 48px;
  list-style: none; cursor: pointer; font-weight: 800; font-size: var(--fs-sm);
}
details.sources > summary::-webkit-details-marker { display: none; }
details.sources > summary .count { color: var(--ink-2); font-weight: 700; }
details.sources > summary .chev { margin-left: auto; transition: transform .2s var(--ease); }
details.sources[open] > summary .chev { transform: rotate(180deg); }
details.sources ul { list-style: none; padding: 0 16px 14px; display: grid; gap: 2px; }
details.sources li a {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: 12px 0; min-height: 44px; text-decoration: none; font-size: var(--fs-sm); line-height: 1.45;
  border-top: 1.5px dashed var(--line);
}
details.sources li:first-child a { border-top: 0; }
details.sources li a .ic { margin-top: 1px; color: var(--pink-600); width: 16px; height: 16px; }
details.sources li a span { flex: 1; min-width: 0; font-weight: 700; }
details.sources li a small { display: block; color: var(--ink-2); font-weight: 600; font-size: 12px; overflow-wrap: anywhere; }
details.sources li a:hover span { text-decoration: underline; }
details.sources li > span { display: block; padding: 12px 0; line-height: 1.5; font-size: var(--fs-sm); border-top: 1.5px dashed var(--line); }
details.sources li:first-child > span { border-top: 0; }

/* repliable générique */
details.disclosure > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin: -10px 0; padding: 10px 0; list-style: none; cursor: pointer; font-weight: 800; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary .chev { margin-left: auto; transition: transform .2s var(--ease); }
details.disclosure[open] > summary .chev { transform: rotate(180deg); }

/* ---------- résultats ---------- */
.summary-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.summary-chips span { padding: 4px 10px; background: var(--cream); border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; }
.summary-chips span.plain { padding: 4px 2px; background: none; border: 0; font-weight: 600; }
.res-head { display: flex; align-items: center; gap: var(--sp-3); }
.res-head h3 { flex: 1; min-width: 0; font-size: var(--fs-xl); font-weight: 900; }
.rank { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 900; font-size: var(--fs-sm); border-radius: 50%; }
.res-card--top { border-width: 3px; }
.res-card--top .ribbon { margin-bottom: var(--sp-3); }
.match { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: 13px; font-weight: 800; color: var(--ink-2); }
.match .progress { flex: 1; }
.why { margin-top: var(--sp-3); font-size: 15px; }
.why b { color: var(--ink); }
.res-card .stats { margin-top: var(--sp-3); }
.res-card .row { margin-top: var(--sp-4); }
.excluded { list-style: none; display: grid; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.excluded li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.excluded li .flag { width: 28px; height: 19px; border-width: 1.5px; margin-top: 2px; }

/* ---------- pays ---------- */
.flag { flex: none; width: 48px; height: 32px; object-fit: cover; border: var(--bw-thin) solid var(--black); border-radius: 5px; background: #fff; }
.flag--lg { width: 72px; height: 48px; border-width: var(--bw); border-radius: 7px; box-shadow: var(--sh-sm); }
.flag--sm { width: 32px; height: 22px; border-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  background: #fff; color: var(--ink); font-weight: 800; font-size: var(--fs-sm); line-height: 1.2;
  border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill); box-shadow: var(--sh-sm);
  cursor: pointer; transition: background-color .12s, transform .12s var(--ease);
}
.chip:active { transform: translate(1px, 1px); }
.chip.is-on { background: var(--pink-600); color: #fff; }
.chip .ic { width: 14px; height: 14px; stroke-width: 3.4; }
.list { display: grid; gap: var(--sp-4); }
.country { min-height: 72px; }
.country .nav-row__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 17px; }

.soon { text-align: left; }
.soon p { margin-top: var(--sp-3); }

/* ---------- fiche complète ---------- */
.timeline { position: relative; display: grid; gap: var(--sp-4); padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 3px; background: var(--black); }
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: -26px; top: 16px; width: 18px; height: 18px;
  background: var(--turq-100); border: var(--bw) solid var(--black); border-radius: 50%; box-shadow: var(--sh-tile);
}
.tl-item.is-key::before { background: var(--pink); }
.tl-item .card { padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-md); }
.tl-item .q { margin-top: var(--sp-3); font-weight: 900; font-size: var(--fs-lg); line-height: 1.25; }
.tl-item .muted { margin-top: 6px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); }
.seg button { min-height: 42px; border: 0; border-radius: 8px; background: transparent; font-weight: 800; font-size: 15px; cursor: pointer; color: var(--ink); }
.seg button.is-on { background: var(--ink); color: #fff; }
.total-box { margin-top: var(--sp-4); text-align: center; }
.total-box .big { margin: 2px 0; font-size: 40px; font-weight: 900; line-height: 1.05; color: var(--ink); letter-spacing: -.02em; }
.total-box .sub { font-weight: 800; color: var(--pink-600); }
.total-box p { margin-top: var(--sp-2); }

table.frais { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.frais td { padding: 9px 0; border-bottom: var(--bw-thin) dashed var(--line); vertical-align: top; }
table.frais td:last-child { padding-left: var(--sp-3); text-align: right; white-space: nowrap; font-weight: 800; }
table.frais tr.tot td { padding-top: var(--sp-3); border-bottom: 0; border-top: var(--bw) solid var(--black); font-weight: 900; font-size: var(--fs-md); }

.logements { display: grid; gap: var(--sp-4); }
.logement { padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-md); }
.logement .p { margin-top: 2px; font-weight: 800; color: var(--pink-600); font-size: 15px; }
.logement.card--pink .p { color: var(--ink); }
.pm { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: 1.4; }
.pm .ic { width: 18px; height: 18px; padding: 2px; margin-top: 1px; border-radius: 50%; stroke-width: 3.4; border: 1.5px solid var(--black); }
.pm--plus .ic { background: var(--turq); color: var(--black); }
.pm--minus .ic { background: #fff; color: var(--black); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 10px;
  background: #fff; color: var(--ink); text-align: center; font-weight: 800; font-size: 13px; line-height: 1.15;
  border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm);
  cursor: pointer; transition: background-color .12s, transform .12s var(--ease);
}
.tile:active { transform: translate(2px, 2px); box-shadow: none; }
.tile img { width: 100%; height: 56px; object-fit: contain; }
.tile.is-on { background: var(--ink); color: #fff; border-color: var(--black); box-shadow: none; transform: translate(2px, 2px); }
.tile .flag { width: 44px; height: 30px; }

.activite { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); }
.activite + .activite { border-top: var(--bw-thin) dashed var(--line); }
.activite img { flex: none; width: 56px; height: 56px; object-fit: contain; }
.activite .n { font-weight: 800; font-size: var(--fs-md); line-height: 1.25; }
.activite .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.price { display: inline-block; padding: 1px 8px; background: var(--ink); color: #fff; border-radius: 6px; font-weight: 800; font-size: 12.5px; }
.price--free { background: var(--turq); color: var(--black); }
.activite .eur { font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
.activite .d { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-2); }

.pieges { list-style: none; counter-reset: p; padding: 0; }
.pieges li { counter-increment: p; position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-5) 64px; }
.pieges li + li { border-top: var(--bw-thin) dashed var(--line); }
.pieges li::before {
  content: counter(p); position: absolute; left: var(--sp-4); top: 19px; width: 32px; height: 32px;
  display: grid; place-items: center; background: var(--cream); color: var(--ink);
  border: var(--bw-thin) solid var(--black); border-radius: var(--r-sm); font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums;
}
.pieges .t { font-weight: 800; line-height: 1.4; }
.pieges .d { margin-top: 6px; font-size: var(--fs-body-sm); color: var(--ink-2); line-height: 1.6; }

/* ---------- accompagnement ---------- */
.progress-card { display: flex; align-items: center; gap: var(--sp-4); }
.progress-card .who { min-width: 0; }
.progress-card .country-name { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; font-weight: 900; font-size: var(--fs-xl); line-height: 1.15; }
.step-num {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--cream); color: var(--ink); border: var(--bw) solid var(--black); border-radius: var(--r-md);
  font-weight: 900; font-size: var(--fs-lg);
}
.step-num .ic { width: 22px; height: 22px; stroke-width: 3.6; }
.is-done .step-num { background: var(--pink); color: #fff; }
.step .progress { margin-top: 8px; }
.step .c { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.flag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }

/* ---------- états vides / erreur ---------- */
.state { text-align: center; padding: var(--sp-8) var(--sp-5); }
.state img { width: 96px; height: 128px; object-fit: contain; margin: 0 auto var(--sp-3); }
.state h2 { font-size: var(--fs-xl); }
.state p { margin: var(--sp-2) auto 0; max-width: 32ch; color: var(--ink-2); }
.state .btn { margin-top: var(--sp-5); }
.state--inline { padding: var(--sp-5) var(--sp-4); }
.state--inline p { margin-top: 0; color: var(--ink); font-weight: 700; }

/* ---------- pied de page, toast ---------- */
.footer { background: var(--ink); color: #E9E6F2; border-top: var(--bw) solid var(--black); }
.footer-in { max-width: 480px; margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-10); font-size: 13.5px; line-height: 1.6; }
.footer b { color: #fff; }
.footer p + p { margin-top: var(--sp-2); }

.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: center; gap: var(--sp-2); max-width: calc(100vw - 32px);
  padding: 10px 16px; background: var(--ink); color: #fff; font-weight: 800; font-size: 15px;
  border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-md);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .28s var(--ease), opacity .28s;
}
.toast .ic { color: var(--pink); stroke-width: 3.4; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* entrée de page discrète */
/* « backwards » et pas « both » : une fois l'entrée finie, plus de transform (sinon la fiche de ville fixée en bas d'écran se décroche) */
.wrap.is-entering > * { animation: rise .28s var(--ease) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (min-width: 520px) {
  .wrap { padding-top: var(--sp-8); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.card--pink .why b, .card--pink .nav-row__desc b, .card--pink .bubble .who { color: var(--ink); }

/* ---------- intégration des données sourcées ---------- */
/* note d'un fait (divergence entre sources, source unique) */
.fnote { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.kv dd .fnote, ul.ticks li .fnote { font-weight: 500; }
.pieges li .fnote { margin-top: 2px; }
/* raisons du classement (quiz) */
.why-list { margin-top: var(--sp-2); gap: var(--sp-2); font-size: 14.5px; }
.why-list li.is-warn { color: var(--amber-700); font-weight: 700; }
.res-head .badge { margin-left: auto; }
/* « pas encore confirmé » */
.disclosure > summary .ic:first-child { width: 18px; height: 18px; vertical-align: -3px; }
ul.pending { font-size: var(--fs-sm); color: var(--ink-2); }
ul.pending li > .ic, .why-list li.is-warn > .ic { background: var(--amber-100); color: var(--amber-700); }
/* prix d'une activité */
.activite .prix { color: var(--ink); font-weight: 600; }
.card-title .muted { font-size: var(--fs-sm); font-weight: 600; }
/* puces des listes : une coche simple, pour ne pas ressembler aux vraies cases à cocher */
ul.ticks li > .ic { background: none; border: 0; padding: 1px; color: var(--pink-600); stroke-width: 3; }
ul.pending li > .ic, .why-list li.is-warn > .ic { background: none; color: var(--amber-700); }
.pieges li .d--solo { margin-top: 0; color: var(--ink); font-weight: 600; font-size: var(--fs-md); }
.rank--sm { flex: none; width: 26px; height: 26px; font-size: 13px; }
.res-head { flex-wrap: wrap; }
.res-head h3 { min-width: 0; }


/* ---------- relecture du 03/11/2026 ---------- */
/* nombres : chiffres alignés */
.stat .v, .line .v, .price, .activite .prix, .nav-row__desc, .summary-chips span { font-variant-numeric: tabular-nums; }
/* accueil : pas de barre de titre (le titre est déjà dans le bandeau) */
body.is-home .topbar { display: none; }
.stats--flat .stat { justify-content: space-between; }
/* résultats */
.res-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.res-tags .ribbon { margin: 0; }
.res-card .row .btn { padding-inline: 10px; }
.lead-note { margin-top: var(--sp-3); font-weight: 600; font-size: 15px; }
details.others { margin-top: var(--sp-6); }
details.others .list { margin-top: var(--sp-3); }
details.others .muted { margin-top: var(--sp-2); }
/* liste des pays : badge sous le nom ; filtres sur une rangée qui défile */
.country .nav-row__title { display: block; }
.country .nav-row__title .badge { display: table; margin-top: 4px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll .chip { flex: none; }
.chips .sep { flex: none; align-self: stretch; width: 2px; margin: 8px 4px; background: var(--black); border-radius: 2px; opacity: .3; }
/* calendrier sans dates : puces neutres */
ul.ticks li > .dot { position: absolute; left: 7px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); }
/* sélecteur de département (Japon) */
.dept { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-3); }
.dept label { font-weight: 700; font-size: var(--fs-sm); }
.dept input { width: 96px; height: 48px; padding: 0 12px; font: 800 20px/1 var(--font); color: var(--ink); background: var(--paper);
  border: var(--bw) solid var(--black); border-radius: var(--r-md); }
.dept input::placeholder { color: #CFCAC0; font-weight: 500; }
.dept input:focus { outline: none; border-color: var(--pink-600); box-shadow: 0 0 0 3px var(--pink-200); }
.dept-out { min-height: 24px; margin-top: var(--sp-3); font-weight: 600; }
.dept-out b { color: var(--pink-600); }
.zones { margin-top: var(--sp-3); }
/* parcours : étapes verrouillées, fin */
.step.is-locked { background: #F6F2EA; box-shadow: none; border-style: dashed; cursor: default; }
.step.is-locked .nav-row__title, .step.is-locked .ic { color: var(--ink-2); }
.step.is-locked .step-num { background: #fff; color: var(--ink-2); }
.done-card { text-align: center; }
.done-card img { width: 110px; height: 140px; object-fit: contain; margin: 0 auto var(--sp-3); }
.done-card h2 { font-size: var(--fs-xl); }
.done-card p { margin: var(--sp-2) auto 0; max-width: 34ch; color: var(--ink-2); }
.done-card .btn { margin-top: var(--sp-5); }
.topbar-title { line-height: 44px; }
@media (max-width: 370px) { .hero h1 { font-size: 25px; } .hero__text { max-width: 70%; } }


/* ====================================================================== v2 : une fiche qui respire (03/11/2026) */

/* ---------- intro de section ---------- */
.sec-lead { margin: calc(-1 * var(--sp-1)) 0 var(--sp-6); max-width: var(--measure); color: var(--ink); font-weight: 600; font-size: var(--fs-body-sm); line-height: 1.6; }

/* ---------- repliable en carte : « Le détail », « Points non tranchés »… ---------- */
details.fold { padding: 0; overflow: hidden; }
details.fold > summary {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-4) var(--sp-5);
  list-style: none; cursor: pointer; font-weight: 900; font-size: var(--fs-md); line-height: 1.3;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary > .ic:first-child { width: 22px; height: 22px; color: var(--pink-600); }
details.fold > summary .fold__t { flex: 1; min-width: 0; }
details.fold > summary .fold__sub { display: block; margin-top: 2px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
details.fold > summary .chev {
  flex: none; width: 32px; height: 32px; padding: 6px; border: var(--bw-thin) solid var(--black); border-radius: 50%;
  background: #fff; stroke-width: 3; transition: transform .2s var(--ease);
}
details.fold[open] > summary .chev { transform: rotate(180deg); }
details.fold[open] > summary { border-bottom: var(--bw-thin) dashed var(--line); }
@media (hover: hover) { details.fold > summary:hover .fold__t { text-decoration: underline; text-underline-offset: 3px; } }
.fold__body { padding: var(--sp-5); }
.fold__body > .kv > div:first-child { padding-top: 0; }
.card--cream.fold .chev { background: var(--paper); }

/* ---------- carte ----------
   .map-frame = emplacement ; js/cartes.js y monte sa carte (.carte, déjà en carte néo-brutale) puis on ajoute .is-ready.
   Avant montage (ou sans fond pour ce pays) : un cadre d'attente quadrillé. */
.map-frame {
  position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 72vh; overflow: hidden;
  background: var(--turq-100); border: var(--bw) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.map-frame[hidden] { display: none; }
.map-frame.is-ready { aspect-ratio: auto; max-height: none; overflow: visible; }
.map-frame--ville { margin-top: var(--sp-5); aspect-ratio: 4 / 3; }
.map-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--sp-3);
  padding: var(--sp-6); text-align: center; color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(46, 53, 87, .08) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(46, 53, 87, .08) 31px 32px);
}
.map-fallback .ic { width: 36px; height: 36px; color: var(--ink); }
.map-cities-box { margin-top: var(--sp-5); }
.map-cities-box > p { max-width: var(--measure); font-weight: 600; font-size: var(--fs-body-sm); line-height: 1.6; }
.map-cities { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ---------- lignes libellé / valeur (budget, santé, logement, règles, transports) ---------- */
.line { display: block; }
.line__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.line__top .l { flex: 1; min-width: 0; }
.line .v { max-width: 52%; font-size: 17px; }
.line .d { max-width: var(--measure); }
.line__tag { margin-top: var(--sp-2); }

/* ---------- villes : choix de la ville ---------- */
.city-picker .tile { min-height: 104px; padding: 10px 6px 12px; gap: 6px; font-size: 13.5px; }
.city-picker .tile img { height: 60px; }

/* ---------- villes : en-tête de la ville ---------- */
.city { margin-top: var(--sp-8); }
.city-head { display: flex; gap: var(--sp-4); align-items: center; }
.city-head__img { flex: none; width: 76px; height: 76px; object-fit: contain; }
.city-head__body { flex: 1; min-width: 0; }
.city-head__name { font-size: 26px; line-height: 1.1; font-weight: 900; }
.city-head__sous { margin-top: 4px; color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm); }
.city-head__count { margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.city-head__count b { color: var(--ink); }
.city-intro { margin-top: var(--sp-4); max-width: var(--measure); font-size: var(--fs-body-sm); line-height: 1.6; }
.city-head-card .lines { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--bw-thin) dashed var(--line); }
.city-head-card .lines .line:first-child { padding-top: 0; }

/* bascule À faire / Quartiers / Se déplacer */
.seg--tabs { margin-top: var(--sp-5); grid-template-columns: repeat(var(--n, 3), 1fr); box-shadow: var(--sh-md); }
.seg--tabs button { min-height: 52px; padding: 6px 4px; font-size: 14px; line-height: 1.2; }
.seg--tabs button .n { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums; }
.city-panel { margin-top: var(--sp-6); }
.panel-lead { margin-bottom: var(--sp-5); max-width: var(--measure); color: var(--ink-2); font-size: var(--fs-body-sm); line-height: 1.6; }

/* ---------- villes : filtres et tri ---------- */
.filter-bar { display: grid; gap: var(--sp-4); }
.filter-bar .chip .n { font-weight: 700; opacity: .75; font-variant-numeric: tabular-nums; }
.filter-bar .chip.is-on .n { opacity: 1; }
.result-reset { margin: -12px 0 -12px var(--sp-3); padding-inline: 4px; font-size: 13.5px; background: none; border: 0; cursor: pointer; }
.sort-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.result-count { font-weight: 800; font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
.seg--sm { flex: none; grid-template-columns: auto auto; padding: 3px; gap: 3px; border-width: var(--bw-thin); border-radius: var(--r-pill); }
.seg--sm button { min-height: 44px; padding: 0 14px; font-size: 13.5px; border-radius: var(--r-pill); }

/* ---------- villes : cartes d'activité ---------- */
.acts { list-style: none; display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.act {
  background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-md);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.act__top { display: flex; gap: var(--sp-3); align-items: flex-start; }
.act__img { flex: none; width: 56px; height: 56px; object-fit: contain; }
.act__head { flex: 1; min-width: 0; }
.act__name { font-size: 17px; line-height: 1.3; font-weight: 900; }
.act__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: var(--sp-2); }
.act__type { font-size: 12.5px; font-weight: 800; color: var(--ink-2); letter-spacing: .02em; }
.act__type::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--black); vertical-align: -1px; }
.act__type--nature::before { background: #7BC67E; }
.act__type--gastronomie::before { background: #F6B04B; }
.act__type--panorama::before { background: var(--turq); }
.act__type--famille::before { background: #B79CE8; }
.act__type--insolite::before { background: var(--ink); }
.act__desc { margin-top: var(--sp-3); max-width: var(--measure); font-size: var(--fs-body-sm); line-height: 1.6; }
.act__price {
  display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: var(--bw-thin) dashed var(--line); font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.act__price .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--ink); }
.act .fnote { margin-top: var(--sp-2); }
.act .price { padding: 2px 9px; font-size: 13px; line-height: 1.5; border: 1.5px solid var(--black); }
.act-more { margin-top: var(--sp-5); }

/* ---------- villes : prix par quartier ---------- */
.quartiers { list-style: none; display: grid; gap: var(--sp-4); }
.quartier { padding: var(--sp-4) var(--sp-5) var(--sp-5); background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.quartier__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.quartier__name { flex: 1; min-width: 0; font-size: 17px; font-weight: 900; line-height: 1.3; }
.quartier__price { flex: none; max-width: 50%; font-size: 20px; font-weight: 900; line-height: 1.15; color: var(--pink-600); text-align: right; font-variant-numeric: tabular-nums; }
.quartier__unit { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.quartier__desc { margin-top: var(--sp-3); max-width: var(--measure); font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-2); }
.quartier__pour { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.quartier__pour span { padding: 2px 10px; background: var(--cream); border: 1.5px solid var(--black); border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; }
.quartier .tag { margin-top: var(--sp-3); }

/* écran plus large : un peu plus d'air autour de la colonne */
@media (min-width: 520px) {
  :root { --gutter: 24px; }
  .act__name { font-size: 18px; }
}

/* ---------- fiche Japon v2 : activités détaillées, loyers, trajets ---------- */
.act__type--soir::before { background: #6C63C7; }
.act__type--shopping::before { background: #F59BB8; }
.act__type--insolite::before { background: var(--yellow); }
.act--insolite { border-color: var(--black); box-shadow: 3px 3px 0 var(--yellow), 3px 3px 0 1.5px var(--black); }
.act__img--vide { display: grid; place-items: center; border-radius: var(--r-md); background: var(--cream); border: var(--bw-thin) dashed var(--line); color: var(--ink-2); }
.act__img--vide .ic { width: 24px; height: 24px; }
.act--insolite .act__img--vide { background: #FFF4D6; color: var(--amber-700); }
.act__where { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.act__where .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.act__facts { display: grid; gap: 0; margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: var(--bw-thin) dashed var(--line); }
.act__facts > div { display: grid; grid-template-columns: 92px 1fr; gap: var(--sp-3); padding: 7px 0; }
.act__facts dt { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink-2); line-height: 1.5; padding-top: 1px; }
.act__facts dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.act__facts dd .tag { vertical-align: 1px; }
.tag--must { background: var(--pink-100); color: #A81F55; }
.act__laura { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: var(--r-pill); background: var(--cream); border: 1.5px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.act__map { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 14px; }
.act__map .ic { width: 18px; height: 18px; }
.act.is-flash, .quartier.is-flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 40% { background: #FFF4D6; } 100% { background: #fff; } }
.chip--insolite .ic { width: 14px; height: 14px; color: #B57F00; fill: var(--yellow); stroke: var(--black); stroke-width: 1.6; }
.chip--insolite.is-on .ic { fill: var(--yellow); }

.sub-head--sm { margin: var(--sp-8) 0 var(--sp-3); font-size: 17px; }
.cheap-card { margin-bottom: var(--sp-5); }
.cheap-card .card-title { justify-content: flex-start; margin-bottom: var(--sp-2); font-size: 16px; }
.cheap-card .card-title .ic { width: 20px; height: 20px; color: var(--pink-600); }
.cheap-card p { font-size: var(--fs-body-sm); line-height: 1.6; max-width: var(--measure); }
.quartier__head { flex: 1; min-width: 0; }
.niveau { display: inline-block; margin-top: 6px; padding: 1px 9px; border-radius: var(--r-pill); border: 1.5px solid var(--black); font-size: 12px; font-weight: 800; }
.niveau--abordable { background: #CFEFD1; color: #1F5A24; }
.niveau--moyen { background: var(--amber-100); color: var(--amber-700); }
.niveau--cher { background: var(--pink-100); color: #A81F55; }
.quartier--abordable { box-shadow: 3px 3px 0 #7BC67E, 3px 3px 0 1.5px var(--black); }
.quartier__yen { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

.trip .card-title { justify-content: flex-start; font-size: 16px; }
.trip .card-title .ic, .cheap-card .card-title .ic { flex: none; }
.trip__sel { display: grid; grid-template-columns: 1fr 44px 1fr; gap: var(--sp-2); align-items: end; }
.trip__f { display: grid; gap: 4px; min-width: 0; }
.trip__f span { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.trip__f select {
  width: 100%; min-height: 48px; padding: 0 30px 0 12px; border: var(--bw-thin) solid var(--black); border-radius: var(--r-md);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E3557' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  font: inherit; font-weight: 800; font-size: 15px; color: var(--ink); -webkit-appearance: none; appearance: none; box-shadow: var(--sh-sm);
}
.trip__swap { display: grid; place-items: center; width: 44px; height: 48px; border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); background: var(--cream); cursor: pointer; color: var(--ink); }
.trip__swap:disabled { opacity: .4; cursor: default; }
.trip__swap .ic { width: 20px; height: 20px; transform: rotate(90deg); }
.trip__km { margin-top: var(--sp-4); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.trip__opts { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.trip__opt { padding: var(--sp-3) var(--sp-4) var(--sp-2); border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); background: var(--paper); }
.trip__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.trip__mode { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 16px; }
.trip__mode .ic { width: 22px; height: 22px; color: var(--pink-600); }
.trip__opt .act__facts { margin-top: var(--sp-3); }
.trip__opt .price { flex: none; padding: 2px 9px; font-size: 13px; border: 1.5px solid var(--black); }

.pass { padding: var(--sp-4) 0; border-bottom: var(--bw-thin) dashed var(--line); }
.pass:first-child { padding-top: 0; }
.pass:last-child { border-bottom: 0; padding-bottom: 0; }
.pass__n { font-size: 16px; font-weight: 900; line-height: 1.3; }
.pass__v { flex: none; font-weight: 900; font-size: 14px; }
.pass__v--non { padding: 1px 9px; border-radius: var(--r-pill); background: var(--pink-100); color: #A81F55; border: 1.5px solid var(--black); font-size: 12.5px; }
.pass .act__facts { border-top: 0; margin-top: var(--sp-2); padding-top: 0; }
.nav-row--map .nav-row__title { display: flex; align-items: center; gap: 8px; }
.nav-row--map .nav-row__title .ic { width: 20px; height: 20px; color: var(--pink-600); }
@media (max-width: 370px) {
  .act__facts > div { grid-template-columns: 80px 1fr; gap: var(--sp-2); }
}
.trip__opt .act__facts > div, .pass .act__facts > div { grid-template-columns: 1fr; gap: 2px; padding: 6px 0; }
.pass__n { margin: 0; }
.pass .line__top { align-items: flex-start; }
.map-frame, .act, .quartier, .trip { scroll-margin-top: 136px; }
/* petits écrans (360 px) : les chiffres clés ne débordent pas */
.stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stat { min-width: 0; }
@media (max-width: 374px) { .stat .v { font-size: 25px; } .stat .n { overflow-wrap: anywhere; } }

/* ---------- v2 (relecture du 03/11/2026) ---------- */
.nw { white-space: nowrap; }

/* fiche complète : deux vues, Préparer / Imaginer ton voyage */
.fiche-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); }
.fiche-mode {
  display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3) var(--sp-3) var(--sp-4); min-height: 112px;
  background: #fff; color: var(--ink); text-decoration: none; border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.fiche-mode > .ic { width: 24px; height: 24px; color: var(--pink-600); stroke-width: 2.6; }
.fiche-mode__t { display: block; font-weight: 900; font-size: 15.5px; line-height: 1.2; }
.fiche-mode__sub { display: block; margin-top: 4px; font-weight: 600; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.fiche-mode.is-on { background: var(--ink); color: #fff; box-shadow: none; transform: translate(2px, 2px); }
.fiche-mode.is-on > .ic { color: var(--yellow); }
.fiche-mode.is-on .fiche-mode__sub { color: rgba(255, 255, 255, .82); }
.fiche-mode:active { transform: translate(2px, 2px); box-shadow: none; }

/* « Imagine ton voyage » (accueil, fin de fiche, parcours) */
.voyage-card { display: block; padding: 0; overflow: hidden; color: var(--ink); text-decoration: none; }
.voyage-card__img {
  position: relative; display: block; height: 128px; background-size: cover; background-position: center 40%;
  border-bottom: var(--bw) solid var(--black);
}
.voyage-card__pin {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill); box-shadow: var(--sh-sm);
  font-size: 13px; font-weight: 900;
}
.voyage-card__pin .ic { width: 16px; height: 16px; color: var(--pink-600); stroke-width: 2.8; }
.voyage-card__body { display: block; padding: var(--sp-4); }
.voyage-card__t { display: block; margin-top: 4px; font-size: 19px; font-weight: 900; line-height: 1.2; }
.voyage-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0; }
.voyage-card__chips span { padding: 2px 10px; background: var(--cream); border: 1.5px solid var(--black); border-radius: var(--r-pill); font-size: 12.5px; font-weight: 800; }
.voyage-card .link { font-weight: 900; }
.back-parcours { min-height: 0; margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--cream); }
.back-parcours > .ic { width: 20px; height: 20px; color: var(--pink-600); stroke-width: 3; }
.back-parcours .nav-row__title { font-size: 16px; }
.next-part + .back-parcours { margin: var(--sp-4) 0 0; }
.next-part .nav-row__media { display: grid; place-items: center; background: var(--cream); }
.next-part .nav-row__media .ic { width: 28px; height: 28px; color: var(--pink-600); }
.soon-note { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.soon-note .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--pink-600); }

/* chiffres clés : la taille suit la largeur de la carte (« 1 800 / an » ne déborde plus) */
.stat { container-type: inline-size; min-width: 0; }
.stats:not(.stats--flat) .stat .v { font-size: clamp(20px, 17cqi, 30px); overflow-wrap: anywhere; }

/* une seule mention par bloc (trajets, pass, transports en ville) */
.block-note { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--sp-3); font-size: 13px; line-height: 1.5; color: var(--ink-2); font-weight: 600; }
.block-note .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--amber-700); }
.moves .block-note { padding-top: var(--sp-3); border-top: var(--bw-thin) dashed var(--line); }
.line__go { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 40px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 14px; }

/* activités : numéro (le même que sur la carte), pastille pleine sans illustration, hors carte */
.act__num {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; margin-right: 8px; padding: 0 5px; vertical-align: 2px;
  background: #fff; color: var(--ink); border: 2px solid var(--black); border-radius: 6px; font-size: 12.5px; font-weight: 900; line-height: 1;
}
.act__num--ins { background: var(--yellow); }
.act__img--vide { border: var(--bw-thin) solid var(--black); background: var(--pink-100); color: var(--pink-600); border-radius: var(--r-md); }
.act__img--vide .ic { width: 26px; height: 26px; stroke-width: 2.4; }
.act__img--nature { background: #E1F2E1; color: #2F7A33; }
.act__img--gastronomie { background: #FDEBD0; color: #9A5A00; }
.act__img--panorama { background: var(--turq-100); color: #155E63; }
.act__img--soir { background: #E6E3F7; color: #4B43A8; }
.act__img--shopping { background: #FCE4EE; color: var(--pink-600); }
.act__img--famille { background: #EFE7FB; color: #6A4CB0; }
.act__img--insolite, .act--insolite .act__img--vide { background: #FFF1C9; color: #8A5A00; }
.act__hors { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-3); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.act__hors .ic { width: 16px; height: 16px; flex: none; }

/* ville : note quand il n'y a pas de loyers ; sous-onglets collants */
.city-note { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--sp-3); padding: var(--sp-3); background: var(--cream); border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.city-note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pink-600); }
.city .seg--tabs { position: sticky; top: calc(var(--topbar-h) + 68px); z-index: 15; }

/* quartiers : le montant en ¥ sous le montant en € */
.quartier__price .quartier__yen { display: block; margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--ink); text-align: right; }

/* trajets : tableau de comparaison, détail dépliable */
.trip__cmp { width: 100%; margin-top: var(--sp-3); border-collapse: separate; border-spacing: 0; font-size: 14px; border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.trip__cmp th, .trip__cmp td { padding: 9px 8px; text-align: left; vertical-align: top; border-bottom: 1.5px solid var(--line); font-variant-numeric: tabular-nums; }
.trip__cmp tbody tr:last-child th, .trip__cmp tbody tr:last-child td { border-bottom: 0; }
.trip__cmp thead th { padding: 6px 8px; background: var(--cream); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-bottom: var(--bw-thin) solid var(--black); }
.trip__cmp tbody th { font-weight: 900; }
.trip__cmp tbody th > .ic { float: left; width: 18px; height: 18px; margin: 1px 6px 0 0; color: var(--pink-600); }
.trip__cmp tbody th > span { display: block; overflow: hidden; }
.trip__cmp td { font-weight: 700; white-space: normal; }   /* une durée « 2 h 20 à 2 h 30 » peut passer à la ligne après « à » (espaces insécables ailleurs) */
.trip__best { display: block; width: max-content; margin-top: 4px; padding: 0 7px; border-radius: var(--r-pill); background: var(--pink-100); color: #A81F55; font-size: 11.5px; font-weight: 800; }
.trip__best--eco { background: var(--turq-100); color: #155E63; }
.trip__opts { gap: var(--sp-2); }
details.trip__opt { padding: 0; }
details.trip__opt summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px var(--sp-3); cursor: pointer; list-style: none; font-weight: 800; font-size: 14.5px; }
details.trip__opt summary::-webkit-details-marker { display: none; }
details.trip__opt summary > span { flex: 1; }
details.trip__opt summary .ic { width: 20px; height: 20px; color: var(--pink-600); }
details.trip__opt summary .chev { color: var(--ink); transition: transform .2s; }
details.trip__opt[open] summary .chev { transform: rotate(180deg); }
details.trip__opt .act__facts { margin: 0 var(--sp-3) var(--sp-2); }
@media (max-width: 370px) { .trip__cmp { font-size: 13px; } .trip__cmp th, .trip__cmp td { padding: 8px 6px; } }
.voyage-card__img { background: #DCEBF1; }
.voyage-card__img .apercu, .voyage-card__fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background-size: cover; }
.apercu-mer { fill: #DCEBF1; }
.apercu-voisin { fill: #ECE3D2; stroke: #2E3557; stroke-opacity: .25; stroke-width: 1; vector-effect: non-scaling-stroke; }
.apercu-terre { fill: #F6E9CF; stroke: #2E3557; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.apercu-ville { fill: #F2558C; stroke: #18181C; stroke-width: 2; vector-effect: non-scaling-stroke; }
.city .seg--tabs { top: calc(var(--topbar-h) + 72px); }
.city .seg--tabs::before { content: ""; position: absolute; z-index: -1; inset: -10px calc(var(--bw) - var(--gutter)); background: var(--cream); border-bottom: var(--bw-thin) solid var(--black); }
.trip__cmp tbody th { width: 44%; }
.trip__cmp tbody th > span { overflow: visible; }
.trip__best { display: inline-block; width: auto; white-space: nowrap; }
.line__go { text-align: left; justify-content: flex-start; }


/* ====================================================================== v3 : navigation, recherche, favoris, ordinateur (04/11/2026)
   Coquille   : .topbar (.menu-btn, .topbar-title, .topbar-brand et .topsearch sur ordinateur, .search-btn, .fav-btn + .fav-count),
                .shell > .sidenav (ordinateur ≥ 1024 px) + .main-col > main.wrap + .footer ; .drawer (panneau du menu, téléphone).
   Menu       : nav.tree > .tree-main (liens), .tree-label, .tree-pays > .tree-p (.tree-p__btn, .is-open, .is-here)
                > .tree-c > .tree-ci (.tree-row > .tree-a--c + .tree-tog) > .tree-s > .tree-a--s ; .tree-a.is-current / .is-in.
   Pages pays : .crumbs (fil d'Ariane), .page-head--cat, .toc (sommaire « Sur cette page »), section.sous (#s-<id>) > .sous-head,
                .laura--aside (bulle de Laura sur le côté dès 1280 px), .moments > .moment (sommaire par moments), .pager.
   Composants : .star (favori, aria-pressed), .liens > .lien-btn--officiel | --reserver | --horaires | --formulaire | --affilie (+ .aff-note),
                article.bloc (.bloc__head, .bloc__court, details.bloc__more, .bloc__det), .logcards > .bloc--logement (.logcard__facts, .pros),
                .table-wrap > table.budget-tab, figure.photo (+ figcaption .photo__leg / .photo__credit), details.faq (.faq__q, .faq__r, .faq__foot).
   Recherche  : .search-fake (accueil), .search-field (page), .sres-g > .sres-c + .sres-list > .sres-item, mark.
   Divers     : .vpart (partie qui suit la ville choisie) + .vpart__bar + .city-sel, .city-jump, .fav-list, .credits, .to-top, .narrow, .wide. */

:root { --side-w: 288px; --wrap-max: 720px; --text-max: 760px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--ink); color: #fff; font-weight: 800; border-radius: var(--r-md); }
.skip:focus { left: 8px; }
body.no-scroll { overflow: hidden; }
mark { background: #FFE07A; color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- coquille ---------- */
body.is-home .topbar { display: block; }
.topbar-in { max-width: none; padding: 0 12px; gap: 10px; }
.topbar-brand, .topsearch { display: none; }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title span { color: var(--pink-600); }
.fav-btn { position: relative; }
.fav-count {
  position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px;
  background: var(--pink-600); color: #fff; font-size: 11px; font-weight: 900; line-height: 17px; text-align: center;
  border: 2px solid var(--black); border-radius: var(--r-pill);
}
.fav-count[hidden] { display: none; }
.shell { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
.main-col { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
.wrap { max-width: var(--wrap-max); }
.footer-in { max-width: var(--wrap-max); }
.footer a { color: #fff; font-weight: 800; }
.sidenav { display: none; }
.narrow { max-width: 720px; margin: 0 auto; }
.toast { bottom: max(84px, env(safe-area-inset-bottom)); }

/* ---------- panneau du menu (téléphone) ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(24, 24, 28, .45); opacity: 0; transition: opacity .25s; }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 390px); display: flex; flex-direction: column;
  background: var(--cream); border-right: var(--bw) solid var(--black); box-shadow: 6px 0 0 rgba(24, 24, 28, .2);
  transform: translateX(-104%); transition: transform .26s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  height: var(--topbar-in-h); padding: 0 12px 0 18px; border-bottom: var(--bw) solid var(--black);
}
.drawer__t { font-weight: 900; font-size: var(--fs-md); }
.drawer__t span { color: var(--pink-600); }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px calc(28px + env(safe-area-inset-bottom)); }

/* ---------- arbre du menu ---------- */
.tree { font-size: 15px; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree-a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px;
  color: var(--ink); font-weight: 700; line-height: 1.3; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-md);
}
.tree-a .ic { width: 20px; height: 20px; color: var(--ink-2); stroke-width: 2.4; }
.tree-a.is-current { background: var(--pink-200); border-color: var(--black); font-weight: 900; box-shadow: var(--sh-sm); }
.tree-a.is-current .ic { color: var(--pink-600); }
.tree-a.is-in { background: #fff; border-color: var(--black); font-weight: 900; }
.tree-a.is-in .ic { color: var(--pink-600); }
.tree-n { margin-left: auto; min-width: 24px; padding: 0 7px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 900; line-height: 22px; text-align: center; border-radius: var(--r-pill); }
.tree-label { margin: 20px 10px 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tree-main--foot { margin-top: 16px; padding-top: 10px; border-top: 2px dashed var(--line); }
.tree-p__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 10px;
  background: none; border: 2px solid transparent; border-radius: var(--r-md); color: var(--ink); font-weight: 800; text-align: left; cursor: pointer;
}
.tree-p__btn .chev { margin-left: auto; width: 18px; height: 18px; transition: transform .2s var(--ease); }
.tree-p.is-open > .tree-p__btn .chev { transform: rotate(180deg); }
.tree-p.is-here > .tree-p__btn { font-weight: 900; }
.flag--xs { width: 26px; height: 18px; border-width: 1.5px; border-radius: 3px; }
.flag--md { width: 54px; height: 36px; border-width: var(--bw); border-radius: 6px; box-shadow: var(--sh-sm); }
.tree .tree-c { margin: 2px 0 10px 18px; padding-left: 8px; border-left: 2px dashed rgba(46, 53, 87, .28); }
.tree-row { display: flex; align-items: center; gap: 2px; }
.tree-row .tree-a { flex: 1; min-width: 0; }
.tree-tog { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-sm); color: var(--ink); cursor: pointer; }
.tree-tog .chev { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.tree-ci.is-open > .tree-row .tree-tog .chev { transform: rotate(180deg); }
.tree .tree-s { margin: 2px 0 6px 28px; }
.tree-a--s { min-height: 40px; padding: 6px 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.tree-a--s.is-current { background: var(--pink-200); border-color: var(--black); color: var(--ink); font-weight: 800; box-shadow: none; }
@media (hover: hover) {
  .tree-a:hover, .tree-p__btn:hover, .tree-tog:hover { background: #fff; }
  .tree-a.is-current:hover { background: var(--pink-200); }
}

/* ---------- fil d'Ariane, titres de page ---------- */
.crumbs { margin: -4px 0 var(--sp-4); font-size: 13.5px; font-weight: 700; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li + li::before { content: "›"; font-weight: 900; color: var(--ink); opacity: .7; }
.crumbs a { display: inline-block; padding: 10px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.crumbs [aria-current] { padding: 10px 0; color: var(--ink); font-weight: 600; }
.page-head__txt { flex: 1; min-width: 0; }
.page-head--flag .star { align-self: flex-start; }
.page-head--cat { display: flex; align-items: flex-start; gap: var(--sp-4); }
.page-head--cat .flag { margin-top: 4px; }
.page-head--cat h1 { margin-top: 4px; font-size: 32px; line-height: 1.08; }
.page-head--cat .lead { margin-top: var(--sp-2); }

/* ---------- étoile « favori » ---------- */
.star {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: #fff; color: var(--ink-2); border: var(--bw-thin) solid var(--black); border-radius: 50%; cursor: pointer;
  transition: transform .12s var(--ease), background-color .12s;
}
.star .ic { width: 21px; height: 21px; stroke-width: 2.3; }
.star[aria-pressed="true"] { background: var(--yellow); color: var(--black); }
.star[aria-pressed="true"] .ic { fill: currentColor; }
.star:active { transform: scale(.9); }
@media (hover: hover) { .star:hover { color: var(--ink); background: #FFF4D6; } .star[aria-pressed="true"]:hover { background: var(--yellow); } }

/* ---------- sommaire de page et sections ---------- */
.toc { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.toc .eyebrow { padding-left: 6px; }
.toc ol { list-style: none; display: grid; gap: 2px; margin: var(--sp-2) 0 0; padding: 0; }
.toc a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; color: var(--ink); font-weight: 800; line-height: 1.25; text-decoration: none; border-radius: var(--r-sm); }
.toc a.is-current { background: #fff; box-shadow: inset 0 0 0 2px var(--black); }
.toc__n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 13px; font-weight: 900; border-radius: 7px; }
@media (hover: hover) { .toc a:hover { background: #fff; } }
.sous { display: flow-root; margin-top: var(--sp-16); scroll-margin-top: calc(var(--topbar-h) + 12px); }
.toc + .sous, .page-head + .sous { margin-top: var(--sp-10); }
.sous-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.sous-head h2 { flex: 1; min-width: 0; font-size: 26px; line-height: 1.12; }
.sous-head h2:first-child { padding-left: 2px; }
.sous-head .num {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--pink-600); color: #fff; font-weight: 900; font-size: var(--fs-lg);
  border: var(--bw) solid var(--black); border-radius: var(--r-sm); box-shadow: var(--sh-sm); transform: rotate(-3deg);
}
.sub-head--first { margin-top: 0; }
.laura--aside { margin: 0 0 var(--sp-6); }
[id^="c-"], [id^="b-"], [id^="faq-"], [id^="ville-"], #trajet, .quartier, .act { scroll-margin-top: calc(var(--topbar-h) + 24px); }
.check.is-flash, .bloc.is-flash, details.faq.is-flash, .city-head-card.is-flash, .trip.is-flash { animation: flash 1.6s var(--ease); }

/* moment précédent / suivant */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-12); }
.pager__link { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: var(--sp-3) var(--sp-4); }
.pager__link--next { grid-column: 2; justify-content: flex-end; text-align: right; }
.pager__body { min-width: 0; }
.pager__t { display: block; margin-top: 2px; font-weight: 900; font-size: 16px; line-height: 1.25; }
.pager__link > .ic { width: 22px; height: 22px; stroke-width: 3; }

/* ---------- sommaire par moments (vue d'ensemble d'un pays, accueil) ---------- */
.moments { display: grid; gap: var(--sp-4); }
.moment { padding: 0; overflow: hidden; }
.moment__head { display: flex; align-items: center; gap: 14px; padding: var(--sp-4); color: var(--ink); text-decoration: none; border-bottom: var(--bw-thin) dashed var(--line); }
.moment__ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--pink-100); border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); }
.moment__ic .ic { width: 24px; height: 24px; color: var(--pink-600); }
.moment__txt { flex: 1; min-width: 0; }
.moment__t { display: block; font-weight: 900; font-size: var(--fs-lg); line-height: 1.2; }
.moment__d { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.moment__head > .ic { width: 22px; height: 22px; stroke-width: 3; }
.moment__sous { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 12px 14px; }
.moment__sous a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px;
  background: var(--cream); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.25; text-decoration: none;
  border: 1.5px solid var(--black); border-radius: var(--r-pill);
}
@media (hover: hover) { .moment__head:hover .moment__t { text-decoration: underline; text-underline-offset: 3px; } .moment__sous a:hover { background: var(--pink-100); } }
.home-pays { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.home-pays .sub-head { display: flex; align-items: center; gap: 10px; }
.flag-grid--links .tile { position: relative; text-decoration: none; color: var(--ink); }
.tile__tag { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pink-600); }

/* ---------- questions fréquentes ---------- */
.faqs { display: grid; gap: var(--sp-3); }
details.faq { background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-md); }
details.faq > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 14px 16px 14px 18px; font-weight: 800; line-height: 1.35; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
.faq__q { flex: 1; min-width: 0; }
details.faq > summary .chev { flex: none; width: 20px; height: 20px; transition: transform .2s var(--ease); }
details.faq[open] > summary .chev { transform: rotate(180deg); }
details.faq[open] > summary { border-bottom: var(--bw-thin) dashed var(--line); }
.faq__r { padding: var(--sp-3) 18px var(--sp-4); font-size: 15px; line-height: 1.6; }
.faq__r > p { max-width: var(--measure); }
.faq__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); }
.faq__foot .star { width: 40px; height: 40px; }

/* ---------- blocs des intégrateurs ---------- */
.bloc { margin-top: var(--sp-5); }
.sous-head + .bloc, .laura--aside + .bloc { margin-top: 0; }
.bloc__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.bloc__head > .ic { flex: none; width: 24px; height: 24px; margin-top: 9px; color: var(--amber-700); }
.bloc__t { flex: 1; min-width: 0; padding-top: 8px; font-size: 19px; line-height: 1.25; }
.bloc__head .star { width: 40px; height: 40px; }
.bloc__tag { margin-top: 6px; }
.bloc__court { margin-top: 10px; max-width: var(--measure); font-weight: 700; font-size: 16px; line-height: 1.55; }
.bloc__det { margin-top: 10px; max-width: var(--measure); font-size: 15px; line-height: 1.65; }
.bloc__det p + p { margin-top: 10px; }
.bloc__det .dlist { margin: 8px 0 0; padding-left: 1.2em; list-style: disc; }
.bloc__det .dlist li + li { margin-top: 6px; }
.bloc__det .dlist + p { margin-top: 10px; }
.bloc__det .dlist li::marker { color: var(--pink, #e8508a); }
details.bloc__more { margin-top: 6px; }
details.bloc__more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--pink-600); font-weight: 800; font-size: 14.5px; cursor: pointer; }
details.bloc__more > summary::-webkit-details-marker { display: none; }
details.bloc__more > summary .chev { width: 18px; height: 18px; transition: transform .2s var(--ease); }
details.bloc__more[open] > summary .chev { transform: rotate(180deg); }
details.bloc__more .bloc__det { margin-top: 0; }
.bloc--alerte { background: var(--amber-100); }
.bloc .details.sources, .bloc details.sources { margin-top: var(--sp-4); }
.bloc__photo { margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4); }
.bloc__photo .photo img { border: 0; border-bottom: var(--bw-thin) solid var(--black); border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0; }
.bloc__photo .photo figcaption { padding: 0 var(--sp-5); }

/* type de logement */
.logcards { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); align-items: start; }
.logcards .bloc { margin-top: 0; }
.logcard__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: var(--sp-3) 0 0; }
.logcard__facts > div { padding: 10px 12px; background: var(--cream); border-radius: var(--r-sm); }
.logcard__facts dt { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.logcard__facts dd { margin: 2px 0 0; font-weight: 800; font-size: 15px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.pros { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.pros__t { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 14px; }
.pros__t .ic { width: 18px; height: 18px; padding: 2px; border: 1.5px solid var(--black); border-radius: 50%; stroke-width: 3.4; }
.pros__col--plus .pros__t .ic { background: var(--turq); color: var(--black); }
.pros__col--moins .pros__t .ic { background: #fff; color: var(--black); }
.pros ul { margin: 6px 0 0; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
.pros li + li { margin-top: 4px; }

/* budget mensuel par profil */
.table-wrap { overflow-x: auto; margin-top: var(--sp-3); background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); }
.table-wrap:focus-visible { outline-offset: 2px; }
.budget-tab { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.budget-tab th, .budget-tab td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1.5px dashed var(--line); }
.budget-tab thead th { background: var(--cream); font-weight: 900; border-bottom: var(--bw-thin) solid var(--black); }
.budget-tab thead th small { display: block; font-weight: 600; font-size: 12px; color: var(--ink-2); }
.budget-tab tbody th { font-weight: 700; }
.budget-tab td { font-weight: 800; white-space: nowrap; }
.budget-tab tfoot th, .budget-tab tfoot td { background: var(--pink-100); font-weight: 900; border-top: var(--bw-thin) solid var(--black); border-bottom: 0; }

/* photo d'un lieu : légende et crédit discret */
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--cream); border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); }
.photo--grand img { aspect-ratio: 16 / 9; }
.photo figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 6px; font-size: 13px; line-height: 1.4; }
.photo__leg { font-weight: 700; color: var(--ink); }
.photo__credit { margin-left: auto; font-size: 11.5px; color: var(--ink-2); }
.photo__credit a { color: inherit; }
.act--photo > .photo { margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-3); }
.act--photo > .photo img { border: 0; border-bottom: var(--bw-thin) solid var(--black); border-radius: calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0; }
.act--photo > .photo figcaption { padding: 0 var(--sp-4); }
.city-head__photo { margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4); }
.city-head__photo .photo img { aspect-ratio: 16 / 9; border: 0; border-bottom: var(--bw-thin) solid var(--black); border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0; }
.city-head__photo .photo figcaption { padding: 0 var(--sp-5); }
.tile--photo img { height: 64px; object-fit: cover; border-radius: 8px; }

/* boutons de liens officiels (et emplacement « lien affilié ») */
.liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); }
.lien-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  background: #fff; color: var(--ink); font-weight: 800; font-size: 14.5px; line-height: 1.2; text-decoration: none;
  border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.lien-btn .ic { width: 18px; height: 18px; color: var(--pink-600); }
.lien-btn--officiel { background: var(--ink); color: #fff; }
.lien-btn--officiel .ic { color: #fff; }
.lien-btn--reserver { background: var(--pink-600); color: #fff; }
.lien-btn--reserver .ic { color: #fff; }
.lien-btn--plateforme { background: #fff; color: var(--ink); }
.lien-btn--plateforme .ic { color: var(--ink-2); }
.lien-btn--affilie { background: var(--paper); border-style: dashed; box-shadow: none; font-weight: 700; }
.lien-btn--affilie .ic { color: var(--ink-2); }
.lien-btn__aff { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.lien-btn:active { transform: translate(2px, 2px); box-shadow: none; }
@media (hover: hover) { .lien-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--black); } .lien-btn--affilie:hover { box-shadow: none; transform: none; text-decoration: underline; } }
.aff-note { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--sp-2); max-width: var(--measure); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.aff-note .ic { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.liens--act { margin-top: var(--sp-3); }

/* ---------- parties qui suivent la ville choisie ---------- */
.vpart__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: var(--sp-4); }
.city-sel {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px;
  background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.city-sel > .ic:first-child { width: 20px; height: 20px; color: var(--pink-600); }
.city-sel select { appearance: none; -webkit-appearance: none; padding: 10px 30px 10px 0; background: none; border: 0; outline: none; font: 900 17px/1.2 var(--font); color: var(--ink); cursor: pointer; }
.city-sel .chev { position: absolute; right: 12px; width: 18px; height: 18px; pointer-events: none; }
.city-sel:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.city-sel--one { margin: 0; box-shadow: none; font-size: 17px; }
.vpart__count { font-size: 14px; font-weight: 600; color: var(--ink); }
.vpart--acts .map-frame--ville, .vpart--quartiers .map-frame--ville { margin-top: 0; margin-bottom: var(--sp-5); }
.city-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--bw-thin) dashed var(--line); }
.city-jump .chip { text-decoration: none; }
.city-head .star { margin-left: auto; align-self: flex-start; }
.act__top .star { width: 38px; height: 38px; margin-left: auto; }
.act__top .star .ic { width: 19px; height: 19px; }
.quartier__head .star { width: 36px; height: 36px; margin-left: auto; }
.quartier__head .star .ic { width: 18px; height: 18px; }

/* ---------- recherche ---------- */
.search-fake {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px;
  background: #fff; color: var(--ink-2); font-weight: 600; text-decoration: none;
  border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.search-fake > .ic { width: 22px; height: 22px; color: var(--ink); }
.search-fake span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-fake kbd, .topsearch kbd {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--cream); color: var(--ink); font: 800 13px/1 var(--font); border: 1.5px solid var(--black); border-radius: 6px;
}
@media (hover: none) { .search-fake kbd { display: none; } }
.search-field {
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.search-field:focus-within { border-color: var(--pink-600); box-shadow: var(--sh-md), 0 0 0 3px var(--pink-200); }
.search-field > .ic { width: 22px; height: 22px; }
.search-field input { flex: 1; min-width: 0; height: 56px; background: none; border: 0; outline: 0; font: 700 18px/1 var(--font); color: var(--ink); }
.search-field input::placeholder, .topsearch input::placeholder { color: #6A6F8C; font-weight: 600; }
.result-count { font-weight: 800; color: var(--ink); }
.sres-g { margin-top: var(--sp-8); }
.sres-g__t { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.sres-g__t .n { padding: 2px 9px; background: var(--ink); color: #fff; font-size: 13px; border-radius: var(--r-pill); }
.sres-c { display: flex; align-items: center; gap: 8px; margin: var(--sp-5) 0 var(--sp-2); font-size: 13px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.sres-c .ic { width: 18px; height: 18px; color: var(--pink-600); }
.sres-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.sres-item {
  display: block; height: 100%; padding: 14px 16px; background: #fff; color: var(--ink); text-decoration: none;
  border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
@media (hover: hover) { .sres-item:hover { transform: translate(-1px, -1px); box-shadow: var(--sh-md); } }
.sres-item__t { display: block; font-weight: 900; font-size: 16px; line-height: 1.3; }
.sres-item__x { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sres-item__w { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pink-600); }
.chips--wrap { flex-wrap: wrap; }
a.chip { text-decoration: none; }

/* ---------- favoris, crédits ---------- */
.fav-list { list-style: none; display: grid; gap: var(--sp-3); margin: 0; padding: 0; }
.fav { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px 10px 16px; }
.fav__link { flex: 1; min-width: 0; padding: 6px 0; color: var(--ink); text-decoration: none; }
.fav__t { display: block; font-weight: 900; line-height: 1.3; }
.fav__s { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
@media (hover: hover) { .fav__link:hover .fav__t { text-decoration: underline; text-underline-offset: 3px; } }
.credits { list-style: none; display: grid; gap: var(--sp-3); margin: 0; padding: 0; }
.credit { display: flex; gap: var(--sp-4); padding: var(--sp-3); }
.credit img { flex: none; width: 112px; height: 84px; object-fit: cover; border: 1.5px solid var(--black); border-radius: var(--r-sm); }
.credit__txt { min-width: 0; }
.credit__t { font-weight: 900; line-height: 1.3; }
.credit__dl { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.credit__dl div { display: flex; gap: 6px; }
.credit__dl dt { font-weight: 800; }
.credit__dl dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- remonter en haut ---------- */
.to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 52px; height: 52px; display: grid; place-items: center; padding: 0;
  background: var(--ink); color: #fff; border: var(--bw) solid var(--black); border-radius: 50%; box-shadow: var(--sh-md); cursor: pointer;
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .2s, transform .2s var(--ease);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top .ic { width: 24px; height: 24px; stroke-width: 3; }

/* ---------- tablette ---------- */
@media (min-width: 640px) {
  .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .logcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flag-grid--links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-picker { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* ---------- ordinateur ---------- */
@media (min-width: 1024px) {
  :root { --topbar-in-h: 68px; --gutter: 40px; }
  .menu-btn, .search-btn { display: none; }
  .topbar-in { padding: 0 24px; gap: 20px; }
  .topbar-brand { display: block; flex: none; width: calc(var(--side-w) - 24px); font-weight: 900; font-size: 18px; color: var(--ink); text-decoration: none; white-space: nowrap; }
  .topbar-brand span { color: var(--pink-600); }
  .topbar-title { display: none; }
  .topsearch {
    display: flex; align-items: center; gap: 10px; flex: 1; max-width: 580px; height: 46px; padding: 0 10px 0 14px;
    background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm);
  }
  .topsearch:focus-within { border-color: var(--pink-600); box-shadow: var(--sh-sm), 0 0 0 3px var(--pink-200); }
  .topsearch > .ic { width: 20px; height: 20px; color: var(--ink); }
  .topsearch input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font: 600 15px/1 var(--font); color: var(--ink); }
  .topsearch input::-webkit-search-cancel-button { cursor: pointer; }
  .fav-btn { margin-left: auto; }

  .shell { flex-direction: row; max-width: 1480px; margin: 0 auto; }
  .sidenav {
    display: block; flex: none; width: var(--side-w); position: sticky; top: var(--topbar-h); align-self: flex-start;
    height: calc(100vh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain; padding: 18px 10px 48px 14px;
    background: rgba(255, 248, 234, .94); border-right: var(--bw-thin) solid rgba(24, 24, 28, .2);
    scrollbar-width: thin; scrollbar-color: rgba(46, 53, 87, .35) transparent;
  }
  .main-col { flex: 1; }
  .wrap { max-width: 1180px; margin: 0; padding: var(--sp-8) var(--gutter) var(--sp-16); }
  .footer-in { max-width: 1180px; margin: 0; padding-inline: var(--gutter); }
  .narrow { padding-top: var(--sp-4); }
  .chips--scroll { margin: 0; padding: 2px 0 6px; flex-wrap: wrap; overflow: visible; }

  /* texte : lignes pas trop longues ; les grilles (.wide) prennent toute la largeur */
  .page-head .lead, .sec-lead { max-width: var(--text-max); }
  .page-head--flag h1, .page-head--cat h1 { font-size: 40px; }
  .crumbs { margin-top: -8px; }

  .list--grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .moments { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .acts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
  .faqs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .flag-grid--links { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sres-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fav-list, .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-recherche .search-field { display: none; }
  .quartiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); align-items: start; }
  .quartiers .quartier { margin: 0; }

  /* accueil */
  .hero { min-height: 300px; padding: var(--sp-10); }
  .hero h1 { font-size: 46px; }
  .hero p { max-width: 36ch; font-size: 18px; }
  .hero__text { max-width: 62%; }
  .hero__laura { width: auto; height: calc(100% - 12px); max-width: 34%; object-fit: contain; object-position: right bottom; right: 24px; }
  .home-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; margin-top: var(--sp-10); }
  .home-foot .laura { margin: 0; }
  .voyage-card { max-width: none; }

  /* carte du pays : grande, avec la liste des lieux à côté */
  .map-frame--pays.carte { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--sp-5); align-items: start; }
  .map-frame--pays.carte > * { grid-column: 2; }
  .map-frame--pays.carte > .carte-tete, .map-frame--pays.carte > .carte-zones { grid-column: 1 / -1; }
  .map-frame--pays.carte > .carte-cadre { grid-column: 1; grid-row: span 8; margin: 0; }
  .map-frame--pays.carte > .carte-panneau:empty { display: none; }
  .map-frame--pays .carte-liste-in { max-height: 460px; overflow-y: auto; }

  /* quiz et parcours : centrés et aérés */
  .narrow .page-head, .narrow .quiz-top { text-align: left; }
  .narrow .stats--flat { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .to-top { right: 28px; bottom: 28px; }
  .toast { bottom: 28px; }
}

/* ---------- grand écran : Laura sur le côté, collée en haut pendant la lecture de sa partie ---------- */
@media (min-width: 1280px) {
  :root { --side-w: 300px; --gutter: 56px; }
  .sous--laura { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: var(--sp-8); align-items: start; }
  .sous--laura > * { grid-column: 1; min-width: 0; }
  .sous--laura > .sous-head { grid-column: 1 / -1; }
  .sous--laura > .laura--aside {
    grid-column: 2; grid-row: 2 / span 40; position: sticky; top: calc(var(--topbar-h) + 24px);
    margin: 0; flex-direction: column-reverse; align-items: flex-start; gap: 0;
  }
  .sous--laura > .laura--aside .bubble { margin: 0 0 16px; font-size: 14.5px; }
  .sous--laura > .laura--aside .bubble::before { left: 34px; bottom: -13px; border-width: 13px 8px 0 8px; border-color: var(--black) transparent transparent transparent; }
  .sous--laura > .laura--aside .bubble::after { left: 37px; bottom: -8.5px; border-width: 9px 5px 0 5px; border-color: #fff transparent transparent transparent; }
  .sous--laura > .laura--aside .laura__img { margin-left: 14px; }
  .toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* v3 Japon : boutons de liens officiels sous une étape, une ligne, un pass ou un trajet */
.liens--item { margin-top: var(--sp-3); }
.check .liens--item { position: relative; z-index: 1; }





/* ====================================================================== v4 : relecture du 04/11/2026 (supervision, tour 1)
   Fond        : kraft partout ; le pays est marqué par un filet de couleur sous la barre du haut (body.pays-<id>).
   Pages       : .cat-layout > .cat-main + .cat-side (sommaire collant à droite dès 1280 px, .toc--side) ; sur téléphone,
                 .toc--top = puces qui défilent. Une seule bulle de Laura par page (.laura--page).
   Mesure      : les conteneurs prennent toute la largeur ; seuls les paragraphes sont limités (--measure).
   Sources     : details.sources = une ligne discrète (« 3 sources, dont 2 officielles ») qui se déplie.
   Liens       : .lien-btn = 4 libellés fixes, le site en petit (.lien-btn__s) ; une couleur par type ; grille de 2 sur téléphone.
   Logement    : table.log-tab (comparatif) + .logcards (2 colonnes au plus) ; détail replié.
   Budgets     : details.calcul > .calcul__p > table.calcul__tab (« Comment on a calculé »).
   Divers      : .hub-photo, .faq-tools / .faq-g, .sres-top / .sres-best, .credits-g, .fav__ap / .fav__del, table.pays-tab. */

body.pays-jp .topbar { box-shadow: inset 0 -5px 0 #BC002D; }
body.pays-kr .topbar { box-shadow: inset 0 -5px 0 #0047A0; }
body.pays-ca .topbar { box-shadow: inset 0 -5px 0 #D52B1E; }
body.pays-au .topbar { box-shadow: inset 0 -5px 0 #012169; }
body[class*="pays-"]:not(.pays-jp):not(.pays-kr):not(.pays-ca):not(.pays-au) .topbar { box-shadow: inset 0 -5px 0 var(--turq); }

/* paragraphes à longueur de ligne confortable, conteneurs pleine largeur */
.bloc__court, .bloc__det p, .bloc__det .dlist, .act__desc, .city-intro, .quartier__desc, .faq__r > p, .line .d, .panel-lead, .sec-lead, .kv dd { max-width: var(--measure); }

/* sources : une ligne discrète */
details.sources { margin-top: var(--sp-3); background: none; border: 0; border-radius: 0; }
details.sources > summary { display: inline-flex; min-height: 36px; padding: 4px 0; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; flex-wrap: nowrap; }
details.sources > summary .ic:first-child { width: 15px; height: 15px; }
details.sources > summary .chev { margin-left: 2px; width: 15px; height: 15px; }
details.sources > summary .tag { font-size: 11px; }
@media (hover: hover) { details.sources > summary:hover .sources__lab { text-decoration: underline; text-underline-offset: 3px; } }
details.sources[open] { padding: 0 14px 6px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); }
details.sources ul { padding: 0 0 8px; }
.sources__lab { white-space: nowrap; }

/* boutons de liens : libellé fixe + site en petit ; couleur par type */
.lien-btn { align-items: center; min-height: 48px; }
.lien-btn__t { display: flex; flex-direction: column; min-width: 0; }
.lien-btn__s { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.lien-btn--horaires { background: var(--turq-100); color: var(--ink); }
.lien-btn--horaires .ic { color: #155E63; }
.lien-btn--formulaire { background: var(--amber-100); color: var(--ink); }
.lien-btn--formulaire .ic { color: var(--amber-700); }
@media (max-width: 639px) {
  .liens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .liens .lien-btn { padding: 8px 10px; font-size: 14px; }
  .lien-btn__s { max-width: 100%; }
}
.liens--legende .lien-btn { box-shadow: none; cursor: default; }

/* une seule bulle de Laura par page */
.laura--page { margin: var(--sp-2) 0 var(--sp-6); max-width: 720px; }
.cat-main > .toc + .laura--page { margin-top: var(--sp-5); }

/* sommaire : puces qui défilent (téléphone), colonne collante (grand écran) */
.cat-layout { display: block; }
.toc--top { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: none; border: 0; box-shadow: none; }
.toc--top .eyebrow { padding-left: 0; }
.toc--top ol { display: flex; gap: 8px; overflow-x: auto; margin-top: 6px; padding: 2px 0 8px; scrollbar-width: none; grid-template-columns: none; }
.toc--top ol::-webkit-scrollbar { display: none; }
.toc--top li { flex: none; }
.toc--top a { min-height: 40px; padding: 5px 12px 5px 6px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill); font-size: 14px; white-space: nowrap; box-shadow: var(--sh-sm); }
.toc--top a.is-current { background: var(--ink); color: #fff; box-shadow: none; }
.toc--top .toc__n { width: 24px; height: 24px; font-size: 12px; border-radius: 50%; }
.toc--top a.is-current .toc__n { background: #fff; color: var(--ink); }
.toc__nb { font-weight: 700; letter-spacing: 0; }
.cat-side { display: none; }
.toc + .sous, .laura--page + .sous { margin-top: var(--sp-8); }
.page-head--cat { margin-bottom: var(--sp-4); }
@media (max-width: 1023px) { .page-head--cat .lead { font-size: 15px; } .page-head--cat h1 { font-size: 28px; } }

/* vue d'ensemble : grande photo d'ouverture */
.hub-photo { margin-bottom: var(--sp-5); }
.photo--hub img { aspect-ratio: 21 / 9; border-width: var(--bw); box-shadow: var(--sh-md); }
.moments { align-items: stretch; }
.moment { display: flex; flex-direction: column; }
.moment__sous { flex: 1; align-content: flex-start; }

/* type de logement : tableau comparatif, cartes plus sobres */
.log-tab { min-width: 520px; }
.log-tab td { white-space: normal; font-weight: 600; }
.log-tab th a { color: var(--ink); }
.logcard__facts dd { font-weight: 600; }
.logcards .bloc__court { font-size: 15.5px; }
.block-note { max-width: var(--measure); }

/* budgets : le calcul replié */
details.calcul { margin-top: var(--sp-3); }
.calcul__in { display: grid; gap: var(--sp-5); margin-top: var(--sp-2); }
.calcul__t { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 900; }
.calcul__tot { font-variant-numeric: tabular-nums; color: var(--pink-600); white-space: nowrap; }
.calcul__tab { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.calcul__tab th, .calcul__tab td { padding: 7px 8px 7px 0; text-align: left; vertical-align: top; border-bottom: 1.5px dashed var(--line); }
.calcul__tab thead th { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.calcul__tab tbody th { font-weight: 700; width: 32%; }
.calcul__tab td:nth-child(2) { white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; width: 16%; }
.calcul__tab td:last-child { color: var(--ink-2); }
@media (max-width: 639px) {
  .calcul__tab thead { display: none; }
  .calcul__tab tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1.5px dashed var(--line); }
  .calcul__tab th, .calcul__tab td { padding: 0; border: 0; width: auto !important; }
  .calcul__tab td:last-child { grid-column: 1 / -1; font-size: 13px; }
}

/* questions fréquentes : outils et groupes */
.faq-tools { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.search-field--sm input { height: 48px; font-size: 16px; }
.faq-g { margin-top: var(--sp-5); }
.faq-g[hidden], details.faq[hidden] { display: none; }

/* recherche */
.sres-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sres-top .chip .flag { width: 22px; height: 15px; }
.sres-best { margin-top: var(--sp-4); }
.sres-list--best .sres-item { border-width: var(--bw); box-shadow: var(--sh-md); }
.sres-item__w { margin: 0 0 4px; }

/* crédits photos */
.credits-g { margin-top: var(--sp-4); }
.credits-g .credits { gap: var(--sp-3); }
.credit { display: flex; gap: var(--sp-3); padding: 0 0 var(--sp-3); border-bottom: 1.5px dashed var(--line); }
.credit img { width: 96px; height: 72px; }
.credit__dl { font-size: 13px; }

/* favoris */
.fav { align-items: flex-start; }
.fav__ap { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.fav__s { margin: 0 0 2px; }
.fav__del { flex: none; width: auto; min-height: 40px; padding: 6px 12px; font-size: 13.5px; }
.fav__del .ic { width: 16px; height: 16px; }
.fav-g .sub-head { display: flex; align-items: center; gap: 10px; }

/* comparer les pays */
.pays-tab-t, .pays-tab-wrap { display: none; }
.pays-tab { min-width: 760px; }
.pays-tab th a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.th-sort { padding: 0; background: none; border: 0; font: inherit; font-weight: 900; color: var(--ink); cursor: pointer; text-align: left; }
.pays-tab td { white-space: normal; font-weight: 600; }

/* menu */
.tree-label { white-space: nowrap; }

@media (min-width: 640px) {
  .logcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits-g .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .search-fake { display: none; }
  .page-head--search { margin-bottom: var(--sp-3); }
  .page-head--search .lead { display: none; }
  .home-foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .home-foot .laura { align-self: start; margin-top: var(--sp-6); }
  .list--grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .nav-row__title { text-wrap: balance; }
  .credits-g .credits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pays-tab-t, .pays-tab-wrap { display: block; }
  .faq-tools { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); align-items: center; }
  .sres-list--best { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r-resultat .narrow { max-width: 1060px; }
  .r-resultat .list.mt-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .r-resultat .laura { max-width: 760px; }
  /* blocs de texte nombreux : 2 colonnes en maçonnerie */
  .blocgrid { columns: 2; column-gap: var(--sp-5); margin-top: var(--sp-5); }
  .blocgrid > .bloc { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 var(--sp-5); }
}
@media (min-width: 1280px) {
  .cat-layout--toc { display: grid; grid-template-columns: minmax(0, 1fr) 232px; column-gap: var(--sp-8); align-items: start; }
  .cat-side { display: block; position: sticky; top: calc(var(--topbar-h) + 20px); max-height: calc(100vh - var(--topbar-h) - 40px); overflow-y: auto; }
  .cat-layout--toc .toc--top { display: none; }
  .toc--side { padding: var(--sp-3); background: var(--cream); border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); box-shadow: none; }
  .toc--side ol { grid-template-columns: 1fr !important; }
  .toc--side a { min-height: 38px; font-size: 14px; }
  .toc--side .toc__n { width: 24px; height: 24px; font-size: 12px; }
}

/* logement : faits en lignes (libellé à gauche, valeur à droite), lisibles même dans une carte étroite */
.logcard__facts { grid-template-columns: 1fr; gap: 0; padding: 4px 12px; background: var(--cream); border-radius: var(--r-sm); }
.logcard__facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 8px 0; background: none; border-radius: 0; }
.logcard__facts > div + div { border-top: 1.5px dashed var(--line); }
.logcard__facts dt { padding-top: 2px; }
.logcard__facts dd { margin: 0; font-size: 14.5px; }
.logcards .pros { grid-template-columns: 1fr; }
details.sources > summary { white-space: normal; flex-wrap: wrap; max-width: 100%; }
.photo--hub img { max-height: 340px; width: 100%; }
@media (max-width: 639px) { .photo--hub img { aspect-ratio: 16 / 9; } }


/* ====================================================================== v5 : supervision, tour 2 (04/11/2026)
   Résultat du quiz : n° 1 en grande carte, n° 2 et 3 dessous, tuiles en 2 × 2 ; valeurs qui passent à la ligne au lieu de déborder.
   Liens       : sous-libellé court écrit au build (« s »), jusqu'à 2 lignes, plus de points de suspension au milieu d'un mot.
   Logement    : tableau = résumé (ordinateur), liste compacte (téléphone < 600 px), panneaux .logdet fermés par défaut.
   Ordinateur  : colonne de lecture plus large dès 1280 px, activités en 3 colonnes, carte seule en fin de grille = toute la ligne. */

/* --- résultat du quiz --- */
.res-card { min-width: 0; }
.res-card .stat { min-width: 0; }
.res-card .stat .v { overflow-wrap: anywhere; hyphens: auto; }
.res-head h3 { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .r-resultat .list.mt-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .r-resultat .list.mt-6 > .res-card--top { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--sp-8); align-items: start; }
  .r-resultat .res-card--top > * { grid-column: 1; }
  .r-resultat .res-card--top > .stats { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; }
  .r-resultat .res-card .stats--flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-resultat .res-card--top .stats--flat .stat .v { font-size: 22px; }
  .r-resultat .res-card:not(.res-card--top) { display: flex; flex-direction: column; }
  .r-resultat .res-card:not(.res-card--top) .row { margin-top: auto; padding-top: var(--sp-4); }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .r-resultat .res-head h3 { font-size: 22px; }
}

/* --- boutons de liens : sous-libellé sur 2 lignes au plus --- */
.lien-btn__s { white-space: normal; overflow: hidden; text-overflow: clip; max-width: 24ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
@media (max-width: 639px) { .lien-btn__s { max-width: 100%; } }

/* --- logement : résumé, liste compacte, panneaux --- */
.log-list { display: none; list-style: none; margin: 0; padding: 0; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.log-list li + li { border-top: 1.5px dashed var(--line); }
.log-list__a { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.log-list__t { font-weight: 900; font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.log-list__t .tag { font-size: 11px; }
.log-list__p { font-weight: 800; font-size: 14.5px; line-height: 1.4; }
.log-list__d { font-size: 13px; color: var(--ink-2); font-weight: 600; }
@media (max-width: 599px) {
  .log-tab-wrap { display: none; }
  .log-list { display: block; }
}
.logdets { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
details.logdet { padding: 0; }
details.logdet > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
details.logdet > summary::-webkit-details-marker { display: none; }
.logdet__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.logdet__t { font-weight: 900; font-size: 17px; color: var(--ink); }
.logdet__c { font-size: 14.5px; font-weight: 600; color: var(--ink-2); line-height: 1.45; max-width: var(--measure); }
details.logdet > summary .chev { flex: none; transition: transform .15s var(--ease); }
details.logdet[open] > summary .chev { transform: rotate(180deg); }
.logdet__body { padding: 0 16px 16px; border-top: 1.5px dashed var(--line); }
.logdet__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
.logdet__qui { margin: var(--sp-3) 0 0; max-width: var(--measure); line-height: 1.6; }
.logdet .pros { margin-top: var(--sp-4); }
.logdet .bloc__det { margin-top: var(--sp-4); }
@media (min-width: 1024px) { .logdets { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.block-note a { color: var(--ink); font-weight: 800; }

/* --- conditions : la réponse courte --- */
.bref { font-size: 17px; }

/* --- quartiers : l'étoile en haut à droite, à côté du nom --- */
.quartier__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.quartier__head .quartier__name { grid-column: 1; grid-row: 1; }
.quartier__head .star { grid-column: 2; grid-row: 1; margin: 0; }
.quartier__head .niveau { grid-column: 1; grid-row: 2; justify-self: start; }

/* --- cartes : état inactif des filtres en trait plein --- */
.carte-filtre[aria-pressed="false"] { background: #FFFBF3; border-style: solid; color: var(--ink); }

/* --- vue d'ensemble : les cartes « moments » ne s'étirent plus --- */
.moments { align-items: start; }

/* --- accueil --- */
.home-foot .card .laura { margin: var(--sp-3) 0 var(--sp-5); }
.tile__tag { letter-spacing: .02em; }
@media (max-width: 639px) {
  .flag-grid--links .tile { min-height: 78px; justify-content: center; overflow-wrap: anywhere; hyphens: auto; }
}

/* --- favoris --- */
.fav-list { align-items: start; }
.fav-cat { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: var(--sp-3) 0 0; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.fav-cat .ic { width: 16px; height: 16px; }
.fav-cat:first-child { margin-top: 0; }

/* --- comparer les pays --- */
.pays-tab td.nw { white-space: nowrap; }
.pays-tab th .badge { margin-left: 6px; vertical-align: middle; }

/* --- sources : chevron collé au libellé ; recherche : de l'air sous l'intertitre --- */
details.sources > summary { flex-wrap: nowrap; }
details.sources > summary .sources__lab { white-space: normal; }
.sres-best .sres-g__t { margin-bottom: var(--sp-4); }

/* --- sommaire qui défile : un dégradé au bord pour montrer la suite --- */
.toc--top ol { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 36px; }

/* --- ordinateur --- */
@media (min-width: 1024px) {
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acts > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
  .acts > :last-child:nth-child(odd):not(:first-child) .act__photo img, .acts > :last-child:nth-child(odd):not(:first-child) .photo img { max-height: 260px; }
}
@media (min-width: 640px) {
  .logcards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .logdets > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .flag-grid--links { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .r-home .list--grid .nav-row { flex-direction: column; align-items: flex-start; position: relative; padding-right: 44px; }
  .r-home .list--grid .nav-row > .ic:last-child { position: absolute; right: 16px; top: 22px; }
  .r-home .list--grid .nav-row__title { text-wrap: wrap; }
  .home-foot { display: block; }
  .home-foot .card .laura { max-width: 820px; }
  .home-foot .stats--flat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .map-frame--pays.carte { display: block; }
  .map-frame--pays.carte > .carte-liste { display: none; }
  .map-frame--pays.carte > .carte-cadre { margin: var(--sp-3) 0 0; }
}
@media (min-width: 1280px) {
  :root { --side-w: 268px; --gutter: 40px; }
  .wrap { max-width: none; }
  .footer-in { max-width: none; }
  .cat-layout--toc { grid-template-columns: minmax(0, 1fr) 208px; column-gap: var(--sp-6); }
  .quartiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quartiers > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* photos de lieu dans les blocs : format bandeau, jamais plus haut que 320 px */
.bloc__photo .photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; max-height: 320px; }
.bloc__t.sr-only + .star { margin-left: auto; }

/* ===== supervision tour 3 ===== */
/* boutons de liens sur téléphone : un par ligne, toute la largeur, libellé et lieu sur une ligne chacun */
@media (max-width: 639px) {
  .liens { grid-template-columns: minmax(0, 1fr); }
  .liens .lien-btn { width: 100%; padding: 9px 14px; min-height: 48px; }
  .lien-btn__t { white-space: nowrap; min-width: 0; flex: 1; }
  .lien-btn__s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; max-width: 100%; }
}
/* tableau de budget : sur téléphone, une carte par poste avec toutes les colonnes */
.budget-cartes { display: none; list-style: none; margin: var(--sp-3) 0 0; padding: 0; border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.budget-cartes li { padding: 10px 12px; }
.budget-cartes li + li { border-top: 1.5px dashed var(--line); }
.budget-cartes__l { margin: 0 0 4px; font-weight: 800; font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.budget-cartes dl { margin: 0; display: grid; gap: 2px; }
.budget-cartes dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.budget-cartes dt { color: var(--ink-2); font-weight: 600; }
.budget-cartes dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.budget-cartes__tot { background: var(--pink-100); }
.budget-cartes__tot dd { font-weight: 900; }
@media (max-width: 599px) {
  .bloc--budgetMensuel .table-wrap { display: none; }
  .bloc--budgetMensuel .budget-cartes { display: block; }
}
/* « Imagine ton voyage » : la carte entière, en vignette carrée à gauche sur grand écran */
.voyage-card__img { height: 220px; }
.voyage-card__img .apercu { position: absolute; inset: 0; }
@media (min-width: 640px) {
  .voyage-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .voyage-card__img { height: auto; min-height: 240px; border-bottom: 0; border-right: var(--bw) solid var(--black); }
  .voyage-card__body { align-self: center; padding: var(--sp-5) var(--sp-6); }
}
@media (min-width: 1024px) { .voyage-card { grid-template-columns: 280px minmax(0, 1fr); } .voyage-card__img { min-height: 280px; } }
/* grilles de cartes de hauteurs différentes : colonnes indépendantes (pas de trous) */
@media (min-width: 1024px) {
  .logdets { display: block; columns: 2; column-gap: var(--sp-4); }
  .logdets > * { break-inside: avoid; display: block; width: 100%; margin: 0 0 var(--sp-3); }
  .logdets > :last-child:nth-child(odd) { grid-column: auto; }
  .acts { display: block; columns: 2; column-gap: var(--sp-4); }
  .acts > li { break-inside: avoid; display: block; width: 100%; margin: 0 0 var(--sp-4); }
  .acts > :last-child:nth-child(odd):not(:first-child) { grid-column: auto; }
  .acts > :last-child:nth-child(odd):not(:first-child) .act__photo img, .acts > :last-child:nth-child(odd):not(:first-child) .photo img { max-height: none; }
  .logcards { display: block; columns: 2; column-gap: var(--sp-4); }
  .logcards > * { break-inside: avoid; display: block; width: 100%; margin: 0 0 var(--sp-4) !important; }
  .logcards > :last-child:nth-child(odd) { grid-column: auto; }
}
/* « Le détail » fermé : pas de vide avant la ligne des sources */
.bloc > details.bloc__more:not([open]) { margin-bottom: 0; }
.bloc > details.bloc__more:not([open]) + * { margin-top: 2px; }
/* quartiers : l'étoile en haut à droite de la carte */
.quartier { position: relative; }
.quartier__top { padding-right: 40px; }
.quartier__head .star { position: absolute; top: 10px; right: 10px; }
/* pastille « Sans réservation » à côté du prix */
.price--resa { background: var(--paper); border: 1.5px solid var(--black); color: var(--ink); font-weight: 800; }
/* crédits : vignettes au-dessus du bouton */
details.credits-g > summary.credits-g__sum { display: block; }
.credits-g__vign { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.credits-g__vign img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--black); }
.credits-g__row { display: flex; align-items: center; gap: 12px; }
.credits-g__row > .ic:first-child { width: 22px; height: 22px; color: var(--pink-600); flex: none; }
.credits-g__row .fold__t { flex: 1; min-width: 0; }
@media (min-width: 1024px) { .credits-g__vign { gap: 8px; } }
/* résultat du quiz entre 640 et 1199 px : tuiles en lignes compactes, valeurs alignées */
@media (min-width: 640px) and (max-width: 1199px) {
  .r-resultat .res-card .stats--flat { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
  .r-resultat .res-card .stats--flat .stat { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; }
  .r-resultat .res-card .stats--flat .stat .v { font-size: 17px !important; text-align: right; white-space: nowrap; }
}
/* villes : 9 vignettes sur une ligne en grand écran */
@media (min-width: 1280px) { .city-picker { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
/* accueil : les 4 entrées sur une ligne en grand écran */
@media (min-width: 1280px) { .r-home .list--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1279px) { .r-home .list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- mots clés des textes (**gras** dans les données) : gras + surligneur rose ---------- */
strong.kw { font-weight: 800; color: var(--ink); background: linear-gradient(transparent 52%, #F6BFD0 52%, #F6BFD0 94%, transparent 94%); padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bloc__court strong.kw, .faq__r strong.kw { font-size: 1.06em; font-weight: 900; }

/* ---------- Mon dossier ---------- */
.dossier-btn { position: relative; }
.dossier-btn[hidden] { display: none; }
.dossier-btn .fav-count { background: var(--ink); color: #fff; min-width: 30px; }
.md-pays { margin-top: var(--sp-6); }
.md-head { display: flex; align-items: center; gap: var(--sp-4); }
.md-head .ring { width: 84px; height: 84px; flex: none; }
.md-head .ring b { font-size: var(--fs-lg, 20px); }
.md-head h2 { display: flex; align-items: center; gap: 10px; }
.md-next { margin-top: var(--sp-4); }
.md-next .eyebrow { display: block; margin-bottom: 4px; }
@media (min-width: 1024px) {
  .dossier-btn:not([hidden]) { margin-left: auto; }
  .dossier-btn:not([hidden]) + .fav-btn { margin-left: 0; }
}

/* ---------- respiration après un lien « … → » (son grand padding tactile est compensé par une marge négative) ---------- */
:is(.link, .home-pays) + :where(div, section, details, ul, ol, p, h2, h3, figure, article, nav):not([class*="mt-"]) { margin-top: var(--sp-5); }
.home-pays { row-gap: 0; margin-bottom: var(--sp-2); }

/* sélecteurs : jamais plus larges que l'écran (option longue « Galápagos (Puerto Ayora, île Santa Cruz) ») */
.vpart__bar { min-width: 0; max-width: 100%; }
.city-sel { max-width: 100%; min-width: 0; }
.city-sel select { min-width: 0; max-width: 100%; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip__f select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
@media (max-width: 420px) {
  .trip__f select { padding: 0 24px 0 8px; font-size: 14px; background-position: right 7px center; }
}

/* drapeaux de l'en-tête : tous encadrés de blanc, comme celui de la Corée (Taïwan et Pérou ne font plus un gros bloc rouge) */
.flag--lg, .flag--md { padding: 4px; object-fit: contain; background: #fff; }
/* note sous le sélecteur de ville, posée sur le kraft : texte principal (le gris secondaire tombait sous 4,5:1) */
.panel-lead { color: var(--ink); }

/* chiffres de l'accueil : 6 cases (officielles, « Prix repère », « À confirmer »…) : 2 colonnes sur téléphone, 3 au-delà */
.stats--flat.stats--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .stats--flat.stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================================================
   Navigation et trouvabilité (retours des testeurs, 05/11/2026)
   ===================================================================================================== */
/* message bref : caché, il ne prend plus aucun toucher (il bloquait le milieu de l'écran, là où tombe le pouce) */
.toast { visibility: hidden; pointer-events: none; transition: transform .28s var(--ease), opacity .28s, visibility 0s linear .28s; }
.toast.show { visibility: visible; pointer-events: auto; transition: transform .28s var(--ease), opacity .28s, visibility 0s; }
.toast__a { margin-left: 4px; padding: 6px 10px; color: var(--ink); background: #fff; border-radius: var(--r-pill); font-weight: 900; font-size: 14px; text-decoration: none; white-space: nowrap; }
body.has-toast .carte-astuce { visibility: hidden; }

/* « Remonter en haut » à gauche sur téléphone : il ne cache plus les chevrons des volets, à droite */
@media (max-width: 1023px) { .to-top { right: auto; left: 16px; } }

/* en-tête : « Mon dossier » toujours là, avec son nom (le % est celui du pays de la page) */
.dossier-btn { width: auto; min-width: 52px; padding: 0 6px; grid-auto-flow: row; gap: 0; align-content: center; }
.dossier-btn .ic { width: 18px; height: 18px; }
.dossier-btn__lab { font-size: 10px; font-weight: 900; line-height: 1; color: var(--ink); white-space: nowrap; }
.dossier-btn__lab .m { display: none; }
.dossier-btn .fav-count[hidden] { display: none; }
@media (min-width: 1024px) {
  .dossier-btn { grid-auto-flow: column; gap: 8px; padding: 0 12px 0 10px; }
  .dossier-btn .ic { width: 20px; height: 20px; }
  .dossier-btn__lab { font-size: 14px; }
  .dossier-btn__lab .m { display: inline; }
  .dossier-btn { margin-left: auto; }
  .dossier-btn + .fav-btn { margin-left: 0; }
}
.btn__sub { display: block; width: 100%; font-size: 12px; font-weight: 700; opacity: .85; }
.btn:has(.btn__sub) { flex-wrap: wrap; row-gap: 0; }

/* recherche : le champ et les résultats tout de suite (le clavier ouvert cachait tout) */
.page-head--search { margin-bottom: var(--sp-2); }
.page-head--search h1 { font-size: 24px; margin: 0; }
@media (max-width: 1023px) {
  .r-recherche .crumbs { display: none; }
  .page-head--search .lead { display: none; }
}
.sres-filtre { font-size: 14px; font-weight: 800; color: var(--ink-2); }
.sres-cmp { border-color: var(--pink-600); }
.retour-res { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 var(--sp-3); padding: 6px 14px 6px 10px;
  background: #fff; color: var(--ink); font-weight: 900; font-size: 14px; text-decoration: none; border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill); box-shadow: var(--sh-sm); }
.retour-res .ic { width: 18px; height: 18px; }

/* « Sur cette page » : collant sous l'en-tête sur téléphone, la pastille en cours reste visible */
@media (max-width: 1279px) {
  .toc--top { position: sticky; top: var(--topbar-h); z-index: 15; margin-top: 0; padding-top: 6px; padding-bottom: 2px;
    background: rgba(255, 248, 234, .97); border-bottom: var(--bw-thin) solid rgba(24, 24, 28, .25); }
  .toc--top .eyebrow { margin: 0; font-size: 11px; }
  .toc--top ol { margin-top: 4px; }
  .cat-main .sous, .cat-main [id^="b-"], .cat-main [id^="c-"], .cat-main [id^="f-"], .cat-main [id^="faq-"], .cat-main [id^="q-"], .cat-main #pieces, .cat-main #total-partir {
    scroll-margin-top: calc(var(--topbar-h) + 84px); }
}

/* fiche pays : 5 chiffres clés (l'âge d'abord) ; photo moins haute sur ordinateur */
.stats--5 .stat:last-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stats--5 .stat:last-child { grid-column: auto; } }
@media (min-width: 1024px) { .photo--hub img { max-height: 220px; aspect-ratio: auto; object-fit: cover; } }

/* barre latérale : le pays ouvert garde son nom en haut quand on descend dans ses parties */
@media (min-width: 1024px) {
  .sidenav .tree-p.is-here > .tree-p__btn { position: sticky; top: -18px; z-index: 2; background: rgba(255, 248, 234, .98); border-bottom-color: rgba(24, 24, 28, .15); }
}

/* questions fréquentes : la pastille « À confirmer » sur sa propre ligne */
.faq__statut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-2); font-size: 13.5px; color: var(--ink-2); }

/* total pour partir */
.total-partir .card-title { display: flex; align-items: center; gap: 8px; }
.total-partir__v { margin: var(--sp-2) 0 0; font-size: 20px; line-height: 1.3; }
.total-partir__v b:first-child { font-size: 28px; font-weight: 900; }
.total-partir .lines { margin-top: var(--sp-3); }
.total-partir .row { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* comparer les pays */
.cmp-teaser { margin: var(--sp-3) 0 var(--sp-4); }
.cmp-sel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; }
.cmp-sel label { display: grid; gap: 4px; min-width: 0; font-weight: 800; font-size: 13px; }
.cmp-sel select { width: 100%; min-width: 0; height: 48px; padding: 0 10px; font: 700 15px/1 var(--font); color: var(--ink); background: #fff;
  border: var(--bw) solid var(--black); border-radius: var(--r-md); text-overflow: ellipsis; }
.cmp-swap { margin-bottom: 2px; }
.cmp2 { min-width: 0; table-layout: fixed; }
.cmp2 th small, .cmp2 td small, .cmp-tab small, .cmp-row small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.cmp2 thead th { font-weight: 900; }
.cmp2 tbody th { width: 34%; font-weight: 800; }
.cmp-tri { align-items: center; margin-top: var(--sp-3); }
.cmp-tri__l { font-weight: 800; font-size: 14px; }
.cmp-tab-wrap { display: none; }
.cmp-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.cmp-row { padding: 12px 14px; }
.cmp-row__h { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 17px; }
.cmp-row__h .ic { margin-left: auto; }
.cmp-row__n { display: grid; place-items: center; width: 26px; height: 26px; font-size: 13px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 50%; flex: none; }
.cmp-row__d { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 10px 0 0; }
.cmp-row__d div:first-child { grid-column: 1 / -1; }
.cmp-row__d dt { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.cmp-row__d dd { margin: 0; font-weight: 700; }
@media (min-width: 1024px) {
  .cmp-tab-wrap { display: block; }
  .cmp-list { display: none; }
  .cmp-tri { display: none; }
}

/* carte : loyer et salaire en clair, effet du rayon visible, note du pays */
.vrepere { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.vrepere li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
.vrepere span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.vrepere small { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); }
.vjauge__nat { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.vconf-aide { margin-top: 8px; color: var(--ink-2); }
.vmethode__bref { margin: 4px 0 6px; font-weight: 700; }
.vmethode__det > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 800; font-size: 13.5px; list-style: none; padding: 4px 0; }
.vmethode__det > summary::-webkit-details-marker { display: none; }
.vmethode__det[open] > summary .chev { transform: rotate(180deg); }

/* quiz */
.presque .card-title { display: flex; align-items: center; gap: 8px; }
.why-bas { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.dossier-btn__lab { text-transform: capitalize; }
@media (min-width: 1024px) { .dossier-btn__lab { text-transform: none; } }
.res-card .row .btn { white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 44px; }
.cmp2 { font-size: 14px; }
.cmp2 th, .cmp2 td { overflow-wrap: anywhere; padding: 9px 8px; }
.cmp2 .nw, .cmp-tab .nw, .cmp-row .nw { white-space: normal; }
.cmp2 tbody th { width: 30%; }
.total-partir .row { flex-direction: column; align-items: flex-start; }
@media (min-width: 640px) { .total-partir .row { flex-direction: row; } }
.sres-cmp .nav-row__media, .cmp-teaser .nav-row__media { display: grid; place-items: center; }
.sres-cmp .nav-row__media .ic, .cmp-teaser .nav-row__media .ic { width: 28px; height: 28px; }
.cmp2 { min-width: 0 !important; width: 100%; }
.cmp2-wrap + .row { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp2-wrap + .row .btn { white-space: normal; max-width: 100%; }
.cmp2 small, .cmp2 b { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* ======================================================================================================
   05/11 : retours des testeurs (Chloé, Karim, Manon, Julien)
   ====================================================================================================== */
/* parties longues : résumé de 2 à 4 lignes, détail replié (.sous.is-long, .is-replie ; [hidden=until-found] : la recherche
   du navigateur ouvre la partie) */
.sous-corps > .bloc:first-child, .sous-corps > .logcards:first-child { margin-top: 0; }
.sous-resume { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); padding: 12px 14px 10px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.sous-resume[hidden] { display: none; }
.sous-resume ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sous-resume li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.4; }
.sous-resume li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-600); }
.sous-tog { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; padding: 0 14px; background: var(--ink); color: #fff;
  font: 800 14.5px/1 var(--font); border: 0; border-radius: var(--r-pill); cursor: pointer; }
.sous-tog .chev { width: 18px; height: 18px; transition: transform .2s var(--ease); transform: rotate(180deg); }
.sous.is-replie .sous-tog .chev { transform: none; }
.sous.is-long:not(.is-replie) .sous-tog { background: #fff; color: var(--ink); border: var(--bw-thin) solid var(--black); }
.sous.is-replie { margin-top: var(--sp-8); }
.sous.is-replie .sous-head { margin-bottom: var(--sp-4); }
.toc + .sous.is-replie, .laura--page + .sous.is-replie { margin-top: var(--sp-6); }
.bm-tot { margin: var(--sp-2) 0 0; font-size: 15px; }

/* « Gardé sur cet appareil » : toujours visible, discret */
.garde { display: flex; align-items: flex-start; gap: 8px; margin: var(--sp-3) 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.garde .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.garde b { color: var(--ink); }
.md-def { margin: var(--sp-2) 0 var(--sp-3); }
.md-next { display: grid; gap: 6px; }
.md-next__c { margin: 0; border: 0; box-shadow: none; background: transparent; padding: 0; }
.md-next__c .check { padding-left: 0; padding-right: 0; border: 0; background: transparent; }
.md-next .link { justify-self: start; }
.md-choix { cursor: default; }
.md-hors > summary .fold__sub { color: var(--ink-2); }
.sauve .card-title { display: flex; align-items: center; gap: 8px; }
.sauve .row { display: flex; flex-wrap: wrap; gap: 8px; }
.sauve__in { position: relative; cursor: pointer; }
.sauve__in:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.ring--100 b { font-size: 19px; letter-spacing: -.02em; }
.md-head .ring--100 b { font-size: 16px; }

/* accueil : reprendre là où tu en étais (dans le 1er écran) */
.reprendre { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.reprendre > .flag, .reprendre > .ic { flex: none; margin-top: 4px; }
.reprendre__txt { min-width: 0; }
.reprendre p { margin: 2px 0 0; font-size: 15px; line-height: 1.4; }
.reprendre__n { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); }
.reprendre .row, .quiz-conseil .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.quiz-conseil { display: flex; align-items: flex-start; gap: 12px; }
.quiz-conseil > .flag { flex: none; margin-top: 4px; }
.quiz-conseil p { margin: 2px 0 0; }
.quiz-revoir { margin-bottom: var(--sp-4); border-color: var(--pink-600); }
.quiz-revoir .nav-row__media { display: grid; place-items: center; }
.choice--pays { justify-content: flex-start; }
.choice--pays .flag { flex: none; }
.deja .card-title { display: flex; align-items: center; gap: 8px; }
.tree-a--res { padding-left: 46px; font-size: 14px; }

/* glossaire : « C'est quoi ? » sous une liste à cocher */
.gloss { display: grid; gap: 6px; margin-top: var(--sp-2); }
.gloss__i > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; list-style: none; font-weight: 800; font-size: 14px; color: var(--pink-600); }
.gloss__i > summary::-webkit-details-marker { display: none; }
.gloss__i > summary .ic { width: 16px; height: 16px; }
.gloss__i p { margin: 2px 0 6px; padding: 8px 12px; background: #fff; border-left: 3px solid var(--pink-600); font-size: 14px; }
.depot { display: flex; align-items: flex-start; gap: 8px; margin: var(--sp-3) 0; padding: 10px 12px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); font-size: 15px; }
.depot .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--pink-600); }

/* message bref : sous la barre du haut, il ne cache plus « Le détail » ni les boutons du bas ; sans lien, il laisse passer les touchers */
.toast { top: calc(var(--topbar-h) + 8px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -160%); padding: 8px 14px; font-size: 14.5px; }
.toast.show { transform: translate(-50%, 0); }
.toast.show:not(.toast--actif) { pointer-events: none; }
@media (min-width: 1024px) { .toast { bottom: auto; } }
/* étoile : touche franche (un peu plus d'espace autour, pas collée au texte voisin) */
.star { margin-left: 6px; }
.bloc__head .star, .faq__foot .star { margin-left: 10px; }

/* barre du haut : titre court sous 420 px (rien n'est coupé) */
.tt-c { display: none; }
.topbar-title .tt-l, .topbar-title .tt-c { color: inherit; }
.topbar-title .tt-l span { color: var(--pink-600); }
.tt-c .flag { width: 20px; height: auto; margin-right: 6px; vertical-align: -3px; border-radius: 3px; }
@media (max-width: 419px) {
  .tt-l { display: none; }
  .tt-c { display: inline; }
  .topbar-in { gap: 6px; padding: 0 8px; }
  .dossier-btn { min-width: 44px; }
  .dossier-btn__lab { display: none; }
}

/* comparer : menus lisibles sur 360 px, ton pays en tête */
.cmp-sel__p { display: inline; margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.cmp-sel select { padding-right: 28px; font-size: 15px; }
.cmp-row.is-mine .cmp-row__h .badge, .cmp-tab tr.is-mine .badge { margin-left: 4px; }
.cmp-tab tr.is-mine th, .cmp-tab tr.is-mine td { background: var(--pink-100); }
@media (max-width: 399px) {
  .cmp-sel { grid-template-columns: minmax(0, 1fr) auto; }
  .cmp-sel label:first-child { grid-column: 1; grid-row: 1; }
  .cmp-sel .cmp-swap { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cmp-sel label:last-child { grid-column: 1; grid-row: 2; }
}
.is-flash { scroll-margin-top: calc(var(--topbar-h) + 90px); }
.tt-c { white-space: nowrap; }
.tt-c .flag { display: inline-block; }
.toast { width: max-content; max-width: calc(100vw - 24px); }
/* quiz : 2 colonnes qui tiennent toujours dans la carte (pays avec drapeau) */
.choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { min-width: 0; }
.choice > span:last-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.choice--pays { gap: 8px; min-height: 52px; padding: 8px 10px; font-size: 15px; }
.choice--pays .flag { width: 24px; height: 17px; }
@media (max-width: 400px) { .choice--pays .mark { width: 20px; height: 20px; } }
.quiz-nav .btn { flex: 1 1 auto; min-width: 0; padding-left: 14px; padding-right: 14px; white-space: nowrap; }
.quiz-nav .btn--secondary { flex: 0 1 auto; }
/* case de la fiche : la suite du détail, dépliable */
.check__plus { margin: -10px 0 0; padding: 0 var(--sp-5) var(--sp-4) calc(var(--sp-4) + 28px + var(--sp-3)); }
.check__plus > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none; font-weight: 800; font-size: 14.5px; color: var(--pink-600); }
.check__plus > summary::-webkit-details-marker { display: none; }
.check__plus > summary .chev { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.check__plus[open] > summary .chev { transform: rotate(180deg); }
.check__plus .bloc__det { font-size: var(--fs-body-sm); color: var(--ink-2); }
.check__plus + .check { border-top: var(--bw-thin) dashed var(--line); }
.reprendre .row > *, .quiz-conseil .row > *, .sauve .row > * { flex: 1 1 auto; white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 44px; padding-inline: 12px; }

/* contenus en plus (retours des testeurs du 05/11/2026) ------------------------------------------------------------ */
/* accueil : « C'est quoi un PVT ? », repliable */
.cestquoi { padding: 0; }
.cestquoi > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 900; font-size: 17px; }
.cestquoi > summary::-webkit-details-marker { display: none; }
.cestquoi > summary .ic:first-child { flex: none; width: 22px; height: 22px; color: var(--pink-600); }
.cestquoi__t { flex: 1 1 auto; }
.cestquoi > summary .chev { flex: none; width: 18px; height: 18px; transition: transform .2s var(--ease); }
.cestquoi[open] > summary .chev { transform: rotate(180deg); }
.cestquoi__b { padding: 0 14px 12px; }
.cestquoi__b p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.cestquoi__b .row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
/* vue d'ensemble : sécurité, lien vers « Où déposer » des 15 pays */
.secu .ic { color: var(--turq); }
.depot__l { font-weight: 800; color: var(--ink); white-space: nowrap; }
.depot small { font-size: 12.5px; }
/* résultats du quiz : la note sécurité */
.res-secu { display: flex; align-items: flex-start; gap: 6px; margin: var(--sp-3) 0 0; font-size: 14px; line-height: 1.4; }
.res-secu .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--turq); }
/* liens vers d'autres parties du guide, sous un bloc */
.voir { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: var(--sp-3); }
.voir .link { min-height: 40px; display: inline-flex; align-items: center; }
/* calendrier des saisons (bloc type « mois ») */
.mois__leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: var(--sp-3) 0 0; color: var(--ink-2); }
.mois__sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--pink); border: 1px solid var(--black); }
.mois__sw--now { margin-left: 8px; background: #fff; border: 2px solid var(--ink); }
.mois { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.mois__l { padding-top: var(--sp-3); border-top: var(--bw-thin) dashed var(--line); }
.mois__l:first-child { border-top: 0; padding-top: 0; }
.mois__t { margin: 0 0 6px; font-weight: 800; font-size: 15.5px; }
.mois__bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.mois__bar li { display: grid; place-items: center; height: 26px; border-radius: 4px; background: #fff; border: 1px solid var(--line); font-size: 11.5px; font-weight: 800; color: var(--ink-2); }
.mois__bar li.is-on { background: var(--pink-600); border-color: var(--black); color: #fff; }
.mois__bar li.is-now { outline: 2px solid var(--ink); outline-offset: -2px; }
.mois__flou { display: flex; align-items: center; gap: 6px; margin: 0; }
.mois__flou .ic { width: 15px; height: 15px; flex: none; }
.mois__d { margin: 6px 0 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-2); }
/* Solo / En couple */
.total-partir__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.total-partir__h .card-title { margin: 0; }
.couple-seg { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); }
.total-partir .couple-seg { margin: 0; }
.couple-seg__l { font-weight: 800; font-size: 14px; }
.couple-seg .seg { background: #fff; }
.cestquoi__b .row { flex-direction: column; align-items: flex-start; gap: 0; }
.cestquoi__b .row .link { min-height: 40px; display: inline-flex; align-items: center; }
@media (min-width: 640px) { .cestquoi__b .row { flex-direction: row; gap: 4px 22px; } }
.bases-nav { margin: var(--sp-3) 0 var(--sp-5); }
.bases-nav ol { list-style: none; margin: 0; padding: 0; gap: 6px; }
.bases-nav .chip { text-decoration: none; }
/* Comparer : 7 colonnes tiennent sur ordinateur (les précisions passent à la ligne) */
.cmp-tab td { white-space: normal; }
.cmp-tab td small { min-width: 11ch; max-width: 20ch; }
.cmp-tab th, .cmp-tab td { padding-left: 10px; padding-right: 10px; }
.cmp-tab th[scope="row"] a { word-break: normal; }
/* un bloc : la réponse courte, puis les lignes, avec de l'air */
.bloc__court + .lines, .bloc__court + .mois__leg { margin-top: var(--sp-3); }

/* ===== finition 05/11 : « C'est quoi ? » sous la case qui emploie le mot ===== */
.checklist > .gloss--case { margin: -8px 0 0; padding: 0 var(--sp-5) var(--sp-3) calc(var(--sp-4) + 28px + var(--sp-3)); gap: 2px; }
.checklist > .gloss--case + .check { border-top: var(--bw-thin) dashed var(--line); }
.quiz-repris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; margin-bottom: var(--sp-4); }
.quiz-repris p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; }
.quiz-repris p .ic { width: 18px; height: 18px; flex: none; color: var(--pink-600); }
.quiz-repris .link { min-height: 40px; font-size: 14.5px; }
/* message en bas quand on a touché un élément du haut de l'écran (il ne recouvre plus le titre qu'on vient d'étoiler) */
.toast.toast--bas { top: auto; bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)); transform: translate(-50%, 160%); }
.toast.toast--bas.show { transform: translate(-50%, 0); }
/* boutons longs (« Mon dossier Corée du Sud ») : le texte passe à la ligne, jamais plus large que l'écran */
.btn { max-width: 100%; }
.actions .btn, .hub-pick .btn, .actions--row .btn { white-space: normal; text-align: center; }
.hub-pick { display: flex; flex-wrap: wrap; gap: 8px; }
/* résultat du quiz : total à mettre de côté et lieu de dépôt sur chaque carte */
.res-total, .res-depot { display: flex; gap: 8px; align-items: flex-start; margin: var(--sp-3) 0 0; font-size: 14.5px; line-height: 1.4; }
.res-total .ic, .res-depot .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--pink-600); }
.res-depot.is-warn .ic { color: #B54708; }
.res-total a { font-weight: 800; color: var(--pink-600); }
.res-depot-note { display: flex; gap: 10px; align-items: flex-start; }
.res-depot-note > .ic { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.res-depot-note p { margin: 0 0 6px; }

/* ===== finition 05/11 (re-test) ===== */
/* quiz, question 6 sur petit téléphone : une colonne sous 400 px, jamais de mot coupé au milieu (« Japo / n ») */
.choice > span:last-child { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 400px) {
  .choices--two:has(.choice--pays) { grid-template-columns: 1fr; }
  .choice--pays { min-height: 48px; }
}
/* « Sur cette page » : fond opaque (le texte du dessous ne se voit plus à travers sa bordure haute) */
@media (max-width: 1279px) {
  .toc--top { background: var(--cream); box-shadow: 0 -8px 0 var(--cream); }
}
/* paysage peu haut (844 x 390, 740 x 360) : le sommaire n'est plus collant, la page garde de la place pour lire */
@media (max-height: 500px) and (orientation: landscape) {
  .toc--top { position: static; box-shadow: none; }
  .cat-main .sous, .cat-main [id^="b-"], .cat-main [id^="c-"], .cat-main [id^="f-"], .cat-main [id^="faq-"], .cat-main [id^="q-"], .cat-main #pieces, .cat-main #total-partir {
    scroll-margin-top: calc(var(--topbar-h) + 12px); }
  .to-top { width: 44px; height: 44px; left: auto; right: 12px; bottom: 10px; }
}
/* le bouton « remonter » ne cache plus le bas des cartes ni le début des titres : place réservée en bas de page, et à droite */
@media (max-width: 1023px) {
  .to-top { left: auto; right: 12px; }
  .main-col { padding-bottom: 76px; }
}
/* fil d'Ariane : le dernier élément ne part plus seul à la ligne avec un grand vide */
.crumbs li { min-width: 0; }
.crumbs li:last-child { flex: 1 1 0; min-width: 7em; }
.crumbs [aria-current] { overflow-wrap: anywhere; }
/* badge du pourcentage sur « Mon dossier » : ne déborde plus sur l'icône */
.dossier-btn .fav-count { top: -9px; right: -10px; min-width: 0; padding: 0 4px; font-size: 10.5px; }
@media (max-height: 500px) and (orientation: landscape) { .dossier-btn .fav-count { top: -6px; right: -12px; } }
/* panneau de la carte : le lien vers une ville d'un autre pays */
.carte-autre { margin: 10px 0 0; font-size: 14.5px; }
.carte-autre .link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.carte-autre svg { width: 16px; height: 16px; }
/* boutons côte à côte (« Melbourne sur la carte ») : passent à la ligne au lieu de dépasser de l'écran */
.row > .btn { white-space: normal; min-width: 0; }
@media (max-width: 400px) {
  .choices--two:has(.choice--pays) { gap: 8px; }
  .choice--pays { min-height: 44px; padding: 6px 10px; box-shadow: var(--sh-sm); }
}
.hub-pick .btn { margin-top: 2px; }
.page-head--flag + .hub-pick { margin: -4px 0 var(--sp-4); }
/* « Les villes » : les vignettes sont assez larges pour « Christchurch » ou « Queenstown » (9 colonnes étaient trop étroites) */
@media (min-width: 1280px) { .city-picker { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } }
.city-picker .tile { min-width: 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; }

/* ---------- 05/11 : retours des 5 testeurs (interface) ---------- */
/* menu : le nom du pays est un lien (vue d'ensemble), la flèche à côté déplie ; plus d'en-tête collant qui cachait « Avant de partir » */
.tree-p__row { display: flex; align-items: center; gap: 2px; }
.tree-p__row .tree-p__btn { flex: 1; min-width: 0; text-decoration: none; }
.tree-p__btn.is-current { background: var(--pink-200); border-color: var(--black); box-shadow: var(--sh-sm); }
.tree-p.is-open > .tree-p__row .tree-p__tog .chev { transform: rotate(180deg); }
@media (min-width: 1024px) {
  .sidenav .tree-p.is-here > .tree-p__btn, .sidenav .tree-p.is-here > .tree-p__row { position: static; background: none; }
}
/* focus : le contour ne s'affiche qu'au clavier (plus de gros cadre bleu autour du titre du résultat du quiz) */
[tabindex="-1"]:focus { outline: none; }
html:not(.kbd) [tabindex="-1"]:focus-visible { outline: none; }
html.kbd [tabindex="-1"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tree-p.is-here .tree-p__btn { font-weight: 900; }
.tree-p__btn { color: var(--ink); }

/* Comparer : 2 ou 3 villes ; chaque ligne a son titre sur toute la largeur, puis une valeur par ville.
   Les montants ne se coupent plus au milieu (« 1 60 / 0 € ») et rien ne se chevauche, à 360 px comme à 150 %. */
.cmp-sel__3 { grid-column: 1 / -1; }
@media (max-width: 399px) {
  .cmp-sel label:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .cmp-sel .cmp-sel__3 { grid-column: 1 / -1; grid-row: 3; }
}
.cmp2 thead th { vertical-align: bottom; }
.cmp2 tbody th, .cmp2 tbody td { width: auto; }
.cmp2 tr.cmp2-lab th { padding: 10px 8px 2px; border-bottom: 0; background: none; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.cmp2 tr.cmp2-lab th small { display: inline; text-transform: none; letter-spacing: 0; font-weight: 600; }
.cmp2 tr.cmp2-lab + tr td { padding-top: 2px; }
.cmp2 th, .cmp2 td, .cmp2 small, .cmp2 b { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.cmp2 .nw { white-space: nowrap; }
/* côte à côte : les cellules passent à la ligne (« 5 000 $ AU (≈ 3 100 €) » débordait sur la 3e colonne à 390 px) */
.cmp2 td { white-space: normal; }
.cmp2--3 { font-size: 13.5px; }
.cmp2--3 th, .cmp2--3 td { padding-left: 5px; padding-right: 5px; }
@media (max-width: 400px) { .cmp2--3 { font-size: 12.5px; } .cmp2--3 small { font-size: 11.5px; } }
/* tableau des 15 pays et ses cartes : les montants restent d'un bloc */
.cmp-tab .nw, .cmp-row .nw { white-space: nowrap; }
.cmp-row__d dd, .cmp-tab td { overflow-wrap: break-word; word-break: normal; }
/* favoris : drapeau et pays dans le surtitre de chaque favori */
.fav__s .flag { display: inline-block; vertical-align: -3px; margin-right: 6px; width: 20px; height: 14px; }
/* Mon dossier, « Prochaine étape » : plus de grand vide entre la case et « Le détail » */
.md-next { align-content: start; }
.md-next__c .check { padding-top: 6px; padding-bottom: 2px; min-height: 0; }
.md-next .check__plus { margin: 0; }
/* « C'est quoi un PVT ? » : plus de grand vide au-dessus de la carte blanche ni en haut de la carte */
.bases-nav + .sous { margin-top: var(--sp-4) !important; }
.bloc--sanst { position: relative; }
.bloc--sanst > .bloc__head { position: absolute; top: 12px; right: 12px; margin: 0; padding: 0; min-height: 0; }
.bloc--sanst > .bloc__head + * { margin-top: 0; }
.bloc--sanst .bloc__court { padding-right: 52px; }
/* fiche pays : les chiffres clés sous le titre ; sur ordinateur, photo plus basse et boutons sur une ligne */
.hub-stats { margin: 0 0 var(--sp-4); }
@media (min-width: 1024px) {
  .photo--hub img { max-height: 150px; }
  .hub-pick { flex-wrap: nowrap; }
  .hub-pick .btn { width: auto; flex: 0 1 auto; }
}
@media (min-width: 1024px) and (max-height: 820px) { .photo--hub img { max-height: 120px; } .hub-photo { margin-bottom: 4px; } }
/* sommaire « Sur cette page » plus compact sur téléphone et tablette (il prenait ≈ 80 px en haut de l'écran) */
@media (max-width: 1279px) {
  .toc--top { padding-top: 4px; padding-bottom: 0; }
  .toc--top .eyebrow { display: none; }
  .toc--top ol { margin-top: 0; padding: 2px 36px 6px 0; gap: 6px; }
  .toc--top a { min-height: 36px; padding: 3px 10px 3px 4px; font-size: 13.5px; }
  .toc--top .toc__n { width: 22px; height: 22px; font-size: 11.5px; }
  .cat-main .sous, .cat-main [id^="b-"], .cat-main [id^="c-"], .cat-main [id^="f-"], .cat-main [id^="faq-"], .cat-main [id^="q-"], .cat-main #pieces, .cat-main #total-partir {
    scroll-margin-top: calc(var(--topbar-h) + 60px); }
}
/* accueil : l'exemple de la recherche n'est plus coupé sur un petit téléphone (« âge, loyer,… ») */
.search-fake .sf-ex2 { display: none; }
@media (max-width: 400px) { .search-fake .sf-ex { display: none; } .search-fake .sf-ex2 { display: inline; } }

/* ---------- intégration finale (05/11/2026) : guide complet, aperçu, parents, lexique, 30 à 35 ans, démarches ---------- */
/* l'offre « Débloque le guide complet » : chiffres réels, prix, un seul bouton (jamais d'avis ni de compteur) */
.offre { margin-top: var(--sp-6); }
.offre .card-title .ic { color: var(--pink-600); }
.offre__l { margin: var(--sp-3) 0 0; }
.offre__l li { line-height: 1.5; }
.offre__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: var(--sp-4) 0 var(--sp-3); }
.offre__prix b { font-size: var(--fs-2xl); font-weight: 900; line-height: 1; }
.offre__prix span { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.offre--compact p { margin: var(--sp-2) 0 0; }
.offre .row { gap: var(--sp-3); flex-wrap: wrap; }
/* aperçu d'un pays : extraits, parties verrouillées */
.extrait { margin-top: var(--sp-3); }
.extrait p { margin: 6px 0 0; }
.extrait__l { margin: var(--sp-2) 0 0; padding-left: 1.1em; }
.extrait__l li { margin: 4px 0; line-height: 1.5; }
.moments--lock { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.moment--lock { text-decoration: none; color: var(--ink); }
.moment--lock .moment__head { border-bottom: 0; }
.moment--lock .moment__head > .ic { color: var(--ink-2); stroke-width: 2.4; }
.moment--lock .moment__ic { background: var(--cream); }
.moment--lock .moment__ic .ic { color: var(--ink-2); }
/* menu et recherche : cadenas */
.tree-lock { width: 15px !important; height: 15px !important; margin-left: auto; flex: none; color: var(--ink-2); opacity: .8; }
.tree-a.is-lock > span { opacity: .82; }
.tree-a--offre { font-weight: 800; color: var(--pink-600); }
.sres-item.is-lock .sres-item__w { color: var(--ink-2); }
.sres-lock { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
/* 30 à 35 ans : la dernière fenêtre */
.age35 .card-title .ic { color: var(--pink-600); }
.age35 p { margin: 6px 0 0; }
.age35 .link { display: inline-flex; margin-top: var(--sp-2); }
.age35--der { background: var(--amber-100); }
.age35__der { font-weight: 800; color: var(--amber-700); }
.age35--der .age35__der { padding: 8px 10px; background: #fff; border: var(--bw-thin) solid var(--amber-700); border-radius: var(--r-md); }
/* pièces « seulement si on te le demande » : grisées tant qu'on ne te les a pas demandées */
.check--si:not(.is-done) .t, .check--si:not(.is-done) .d { opacity: .72; }
.badge.si { background: var(--cream); color: var(--ink-2); margin: 0 6px 4px 0; }
/* Comparer : le groupe « Les démarches », texte court et détail au toucher */
.cmp2-grp th { padding-top: var(--sp-4); font-size: var(--fs-lg); font-weight: 900; text-align: left; background: transparent; }
.cmp2-det summary { cursor: pointer; list-style: none; display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.cmp2-det summary::-webkit-details-marker { display: none; }
.cmp2-det summary .chev { display: inline-block; width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; transition: transform .2s var(--ease); }
.cmp2-det[open] summary .chev { transform: rotate(180deg); }
.cmp2-det small { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.cmp2 td small { overflow-wrap: anywhere; }
/* « Vous êtes parent ? » */
.parents-lien { margin-bottom: var(--sp-4); }
.parents-tab td small { display: block; color: var(--ink-2); font-size: 13px; }
.parents-tab th a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 800; }
/* lexique : mot souligné en pointillé, bulle au toucher, page « Les mots du guide » */
.lex { text-decoration: underline dotted var(--pink-600); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: help; border-radius: 3px; }
.lex:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-lex].tag { cursor: help; }
.lex-bulle {
  position: absolute; z-index: 90; max-width: min(340px, calc(100vw - 16px)); padding: 12px 14px;
  background: var(--paper); color: var(--ink); font-size: var(--fs-sm); line-height: 1.5;
  border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.lex-bulle p { margin: 0 0 6px; }
.lexique { margin: 0; display: grid; gap: var(--sp-3); }
.lexique > div { padding: var(--sp-3) var(--sp-4); background: var(--paper); border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); }
.lexique dt { font-weight: 900; }
.lexique dd { margin: 4px 0 0; color: var(--ink-2); line-height: 1.55; }
.cmp2 td .cmp2-det, .cmp2 td .cmp2-det summary { white-space: normal; overflow-wrap: break-word; }
.offre .card-title, .age35 .card-title, .parents-c .card-title { justify-content: flex-start; gap: 10px; }
.parents-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.parents-p { padding: var(--sp-3) var(--sp-4); }
.parents-p__h { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: var(--fs-lg); }
.parents-p__h .ic { margin-left: auto; width: 20px; height: 20px; }
.parents-p__d { margin: var(--sp-2) 0 0; display: grid; gap: 4px; }
.parents-p__d div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.parents-p__d dt { color: var(--ink-2); font-weight: 600; }
.parents-p__d dd { margin: 0; font-weight: 800; text-align: right; }

/* fluidité (06/11) : avant que le guide s'affiche, la page réserve sa hauteur ; le pied de page ne s'affiche plus
   un instant en haut avant de sauter en bas (décalage mesuré : 0,12 sur ordinateur) */
#app:empty { min-height: 100vh; min-height: 100dvh; }

/* ---------- optimisation finale (06/11, 10 testeurs) ---------- */
/* Comparer à 390 px : la 3e ville sur sa propre ligne (avant : par-dessus la 2e, même hauteur) */
@media (max-width: 399px) {
  .cmp-sel label.cmp-sel__3 { grid-column: 1 / -1; grid-row: 3; }
}
/* Comparer : le nom des villes reste en haut quand on descend dans le tableau */
.cmp2-wrap { overflow: visible; }
.cmp2 thead th { position: sticky; top: var(--topbar-h, 60px); z-index: 3; background: #fff; box-shadow: 0 2px 0 var(--black); }
/* Comparer : une cellule qui se déplie n'a pas l'air plus importante que les autres */
.cmp2-det > summary { font-weight: 600; }
.cmp2 td > .tag { display: inline-flex; max-width: 100%; white-space: normal; }
/* textes trop petits pour être lus sans zoom (Nadia) */
.dossier-btn__lab { font-size: 11.5px; }
.photo__credit { font-size: 12.5px; }
.tile__tag { font-size: 11.5px; }
details.sources > summary .tag, .log-list__t .tag, .cmp-row__d dt { font-size: 12px; }
.res-secu small, .secu small { font-size: 13px; }
/* plan d'épargne du quiz */
.plan-epargne .card-title { font-size: 17px; }
.plan-epargne ul.ticks li { margin-bottom: 6px; }
/* l'étoile des favoris : une zone de toucher plus grande que le dessin */
.star { position: relative; }
.star::after { content: ""; position: absolute; inset: -6px; }
/* recherche : la croix pour effacer ne colle plus au texte tapé (Lucas) */
input[type="search"]::-webkit-search-cancel-button { margin-left: 10px; }

/* ------------------------------------------------------------ « Ta situation » (06/11/2026) */
.sit-bloc { margin-top: var(--sp-4); }
.sit-bloc .bloc__det p:first-child { margin-top: var(--sp-2); }
.sit-p { margin-top: var(--sp-3); }
.sit-p > summary > .flag { flex: none; }
.sit-p .fold__body > .link { display: inline-flex; margin-top: var(--sp-4); }
.sit-p .sit-bloc { box-shadow: none; }
.sit-pays { margin: var(--sp-3) 0 var(--sp-2); gap: 6px; }
.sit-pays .chip { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.sit-lock { display: flex; gap: var(--sp-3); align-items: flex-start; }
.sit-lock > .ic { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--pink-600); }
.sit-lock p { margin: 0; }
.sit-interdit .card-title { display: flex; align-items: center; gap: 8px; }
.sit-interdit .ticks .ic { color: var(--pink-600); }
.sit-hub .card-title { display: flex; align-items: center; gap: 8px; }
.sit-hub ul { list-style: none; margin: 0; padding: 0; gap: 6px; }
.sit-hub .chip { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.chip-lock { width: 13px !important; height: 13px !important; opacity: .75; }
.sres-sit { border-color: var(--pink-600); }
.sres-sit .nav-row__media { display: grid; place-items: center; }
.sres-sit .nav-row__media .ic { width: 28px; height: 28px; }
/* Partager mon dossier : le code à copier, l'import (fichier ou code), « ajouter à mes cases » */
.code-dossier { display: block; width: 100%; max-width: 100%; box-sizing: border-box; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
  padding: 10px; border: var(--bw-thin, 2px) solid var(--black); border-radius: 10px; background: #fff; resize: vertical; word-break: break-all; }
.fusion { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.35; cursor: pointer; }
.fusion input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--pink-600); }
.sit-hub .card-title, .sit-interdit .card-title, .sauve .card-title { justify-content: flex-start; }
.sres-sit .sres-lock { margin-left: 6px; vertical-align: -1px; }

/* 07/11 (6 testeurs) : « Ta situation », pays par pays : le nom du pays reste visible sous la barre fixe du haut */
.sit-p { scroll-margin-top: calc(var(--topbar-h) + 16px + env(safe-area-inset-top)); }
/* bloc « À confirmer » sans source : la mention remplace le bouton Sources */
.sources--aucune { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-3); }
.sources--aucune .ic { width: 16px; height: 16px; flex: none; }
/* import d'un dossier : confirmation et message dans la carte, à leur place (ils ne cachent aucune carte) */
.import-ok { padding: 12px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-md); }
.import-msg { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.import-msg .ic { color: var(--pink-600); width: 18px; height: 18px; flex: none; }
/* appli sur l'écran d'accueil : invitation (accueil après déblocage, page de confirmation, petite carte dans Mon dossier) */
.installer { margin-top: var(--sp-4); }
.installer .card-title { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.installer .card-title .ic { color: var(--pink-600); }
.installer > p { margin: var(--sp-2) 0 0; }
.installer__l { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); counter-reset: inst; }
.installer__l li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body-sm); line-height: 1.45; counter-increment: inst; }
.installer__l li::before { content: counter(inst); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 900; }
.installer__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: var(--r-sm); color: #1A7CF5; }
.installer__ic .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.installer__n { margin-top: var(--sp-3) !important; }
.installer__b { margin-top: var(--sp-4); flex-wrap: wrap; }
.installer--dossier { margin-top: var(--sp-3); padding-block: var(--sp-3); }
.installer--dossier .card-title { font-size: var(--fs-md); }
/* rappel discret : faire une copie du dossier (jamais exporté, ou il y a plus de 14 jours) */
.rappel-export { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--sp-3); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rappel-export .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.rappel-export .link { padding: 0; margin: 0; font-size: inherit; background: none; border: 0; cursor: pointer; font-family: inherit; display: inline; }
@media (min-width: 700px) { .installer__b > .btn { flex: 0 0 auto; width: auto; min-width: 170px; } }

/* ==================== 08/11 : retours sur ordinateur ==================== */
/* fond plus clair (le texte foncé posé sur le kraft se lisait mal) : même papier, voilé de crème */
body { background: var(--kraft); }
body::before { background: linear-gradient(rgba(255, 248, 234, .62), rgba(255, 248, 234, .62)), #CB975E url("../img/fond_kraft_tuile.webp") left top / 700px 700px repeat; }
/* drapeaux : plus de liseré blanc dans les coins arrondis (le fond du cadre se voyait entre l'image et le bord) */
.flag { background: var(--black); }
/* titres de carte avec une icône devant : le texte reste collé à l'icône (« Presque : … » partait à droite) */
.card-title:has(> svg:first-child) { justify-content: flex-start; }
/* chiffres clés : le chiffre suit son libellé, il ne tombe plus en bas de la carte */
.stats--flat .stat { justify-content: flex-start; }
.hub-stats .stats:not(.stats--flat) .stat .v { font-size: clamp(20px, 13cqi, 30px); overflow-wrap: normal; word-break: normal; }
/* « C'est mon pays » : de l'air avant le bloc suivant */
.hub-pick { margin-bottom: var(--sp-6); }

/* onglets du pays (Vue d'ensemble + les moments) */
.pays-tabs { margin: 0 0 var(--sp-5); }
.pays-tabs__in { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 8px; scrollbar-width: thin; }
.pays-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill);
  background: #fff; color: var(--ink); font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: var(--sh-sm); }
.pays-tabs a .ic { width: 18px; height: 18px; color: var(--pink-600); }
.pays-tabs a:hover { background: var(--pink-100); }
.pays-tabs a.is-on { background: var(--ink); color: #fff; box-shadow: none; transform: translate(2px, 2px); }
.pays-tabs a.is-on .ic { color: #fff; }

/* galerie de photos du pays */
.galerie { position: relative; margin-bottom: var(--sp-5); min-width: 0; max-width: 100%; grid-column: 1 / -1; }
.pays-tabs { min-width: 0; max-width: 100%; grid-column: 1 / -1; }
.galerie__track { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: thin; }
.galerie__track:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.galerie__item { flex: 0 0 86%; scroll-snap-align: start; }
.galerie__item img { aspect-ratio: 16 / 10; }
.galerie__item .photo__leg { font-weight: 700; }
.galerie__nav { position: absolute; top: calc(50% - 34px); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: var(--bw-thin) solid var(--black); background: #fff; box-shadow: var(--sh-sm); cursor: pointer; color: var(--ink); }
.galerie__nav--prev { left: 8px; } .galerie__nav--next { right: 8px; }
.galerie__nav .ic { width: 22px; height: 22px; }
.galerie__n { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
@media (min-width: 1024px) {
  .galerie__item { flex-basis: calc(50% - 6px); }
  .galerie__item img { aspect-ratio: auto; height: clamp(220px, 22vw, 320px); }
}
@media (min-width: 1600px) {
  .galerie__item { flex-basis: calc(33.333% - 8px); }
}

/* Mon dossier : « Mes pays » (liste à cocher + Ajouter un pays) */
.md-bar .card-title { margin-bottom: 4px; }
.md-bar__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--sp-3); }
.md-chip { display: inline-flex; align-items: stretch; border: var(--bw-thin) solid var(--black); border-radius: var(--r-pill); background: #fff; box-shadow: var(--sh-sm); overflow: hidden; }
.md-chip.is-on { background: var(--pink-100); }
.md-chip__main { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border: 0; background: none; cursor: pointer; font-weight: 800; font-size: 15px; color: var(--ink); }
.md-chip__box { width: 20px; height: 20px; display: grid; place-items: center; border: var(--bw-thin) solid var(--black); border-radius: 5px; background: #fff; }
.md-chip__box .ic { width: 14px; height: 14px; opacity: 0; }
.md-chip.is-on .md-chip__box { background: var(--pink); color: #fff; }
.md-chip.is-on .md-chip__box .ic { opacity: 1; }
.md-chip__pct { font-size: 12.5px; font-weight: 800; color: var(--ink-2); background: var(--cream); border-radius: var(--r-pill); padding: 2px 8px; }
.md-chip__x { border: 0; border-left: var(--bw-thin) solid var(--black); background: none; padding: 0 12px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-2); }
.md-chip__x:hover { background: var(--pink-200); color: var(--ink); }
.md-add { padding: 9px 16px; border: var(--bw-thin) dashed var(--black); border-radius: var(--r-pill); background: var(--cream); font-weight: 800; font-size: 15px; color: var(--ink); cursor: pointer; }
.md-add:hover { background: #fff; }
.md-add__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: var(--sp-4); }
.md-add__grid[hidden] { display: none; }

/* visite guidée (après l'achat, ou « Visite guidée » en bas de page) */
.visite { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.visite[hidden] { display: none; }
.visite__scrim { position: absolute; inset: 0; background: rgba(24, 24, 28, .55); }
.visite__box { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 24px 20px; text-align: center;
  background: var(--paper); border: var(--bw) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-lg); animation: rise .25s var(--ease); }
.visite__x { position: absolute; top: 10px; right: 10px; font-size: 22px; }
.visite__img { width: 110px; height: 140px; object-fit: contain; margin: 0 auto 6px; }
.visite__box h2 { margin: 6px 0 8px; font-size: 22px; }
.visite__box p { color: var(--ink); line-height: 1.55; text-align: left; }
.visite__dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0 14px; }
.visite__dots i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--black); background: #fff; }
.visite__dots i.is-on { background: var(--pink); width: 22px; border-radius: 6px; }
.visite__row { display: flex; justify-content: space-between; gap: 10px; }

/* petite fête à l'achat */
.fete { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; pointer-events: none; transition: opacity .35s; overflow: hidden; }
.fete.is-out { opacity: 0; }
.fete__conf i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: tombe 2s linear forwards; }
@keyframes tombe { to { top: 105%; transform: translateX(40px) rotate(540deg); } }
.fete__box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 30px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); animation: popin .45s var(--ease); text-align: center; }
.fete__box img { width: 110px; height: 140px; object-fit: contain; }
.fete__box b { font-size: 28px; color: var(--pink-600); }
.fete__box span { font-weight: 700; color: var(--ink); }
@keyframes popin { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }

@media (min-width: 1024px) {
  /* toute la largeur de l'écran : menu collé à gauche, contenu centré dans le reste, pied de page d'un bord à l'autre */
  .shell { max-width: none; margin: 0; }
  .wrap { margin: 0 auto; width: 100%; }
  .footer-in { max-width: 1180px; margin: 0 auto; }
  .sidenav { position: sticky; top: var(--topbar-h); }
  /* « Par où commencer ? » : cartes rangées en colonnes, sans trous */
  .pays-tabs__in { flex-wrap: wrap; overflow: visible; }
  .moments.wide { display: block; columns: 3 300px; column-gap: var(--sp-4); }
  .moments.wide > .moment { display: block; break-inside: avoid; margin: 0 0 var(--sp-4); width: 100%; }
}

/* indice emploi (08/11) : ligne dépliable sur la fiche pays */
details.emploi { display: block; }
details.emploi > summary { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; list-style: none; }
details.emploi > summary::-webkit-details-marker { display: none; }
details.emploi > summary > span { flex: 1; }
details.emploi > summary > .ic:last-child { color: var(--ink); transition: transform .15s; }
details.emploi[open] > summary > .ic:last-child { transform: rotate(180deg); }
.emploi__r { font-size: 14px; color: var(--ink-2); }
.emploi__d { margin-top: 10px; padding-top: 10px; border-top: 1.5px dashed var(--line); font-size: 14px; }
.emploi__d ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.emploi--facile > summary > .ic:first-child { color: #1F8A70; }
.emploi--difficile > summary > .ic:first-child { color: var(--amber-700); }

/* ==================== 09/11 : retours des 4 testeurs ==================== */
:root { --side-w: 300px; }
/* fête : un voile sur la page (avant : deux Laura l'une sur l'autre, un bouton caché) */
.fete { background: rgba(255, 248, 234, .94); }
/* visite guidée : même hauteur à chaque étape (les boutons ne bougent plus sous la souris) */
.visite__box:not(.visite__box--conf) { min-height: min(560px, calc(100dvh - 32px)); display: flex; flex-direction: column; }
.visite__box:not(.visite__box--conf) .visite__dots { margin-top: auto; padding-top: 16px; }
.visite__box--conf { text-align: left; }
.visite__box--conf h2 { margin-top: 0; }
.visite__box--conf .visite__row { margin-top: 18px; }
/* fin de visite : le bouton Mon dossier se signale */
@keyframes repere { 0%, 100% { box-shadow: var(--sh-sm); } 50% { box-shadow: 0 0 0 6px var(--pink); } }
#dossierBtn.is-repere { animation: repere .8s ease-in-out 4; }
/* Mes pays : la pastille affichée est foncée, avec « Affiché » (plus de case à cocher) */
.md-chip.is-on { background: var(--ink); }
.md-chip.is-on .md-chip__main { color: #fff; }
.md-chip.is-on .md-chip__x { color: #fff; border-left-color: rgba(255, 255, 255, .5); }
.md-chip.is-on .md-chip__x:hover { background: rgba(255, 255, 255, .15); }
.md-chip__on { font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); background: var(--pink-200); border-radius: var(--r-pill); padding: 2px 8px; }
.md-chip.is-on .md-chip__pct { background: rgba(255, 255, 255, .16); color: #fff; }
/* galerie : plus basse (sur petit écran d'ordinateur on voyait seulement les photos), pas de flèche « précédente » au début, crédits alignés */
.galerie[data-debut] .galerie__nav--prev { display: none; }
.galerie__item figcaption { flex-direction: column; align-items: flex-start; gap: 0; }
.galerie__item .photo__credit { margin-left: 0; }
@media (min-width: 1024px) { .galerie__item img { height: clamp(170px, 17vw, 260px); } }
/* petites mentions plus lisibles (retour de Sarah) */
.photo__credit { font-size: 12.5px; }
.depot small, .res-secu small, .secu small, .muted small, small.muted { font-size: 13.5px; }
.tag { font-size: 12.5px; }
/* bulles : en bas de l'écran sur ordinateur (elles cachaient les titres) */
@media (min-width: 1024px) {
  .toast { top: auto; bottom: 28px; transform: translate(-50%, 160%); }
  .toast.show { transform: translate(-50%, 0); }
}
/* pastille du pourcentage de Mon dossier : hors du bouton */
.dossier-btn .fav-count { top: -11px; right: -12px; font-size: 10.5px; height: 20px; line-height: 16px; }
/* quiz : boutons toujours visibles en bas (question 6 et ses 15 pays), texte qui ne déborde plus */
.quiz-nav { position: sticky; bottom: 0; z-index: 4; flex-wrap: wrap; padding: 10px 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); }
.quiz-nav .btn { white-space: normal; }
/* indice emploi : sources repliées, méthode courte */
.emploi__src { margin-top: 4px; }
.emploi__src > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--pink-600); }
.emploi__src ul { margin: 4px 0 0; padding-left: 16px; font-size: 13px; display: grid; gap: 4px; }
.emploi__m { margin: 12px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 4px; }
.emploi__plus { margin-top: 8px; font-size: 13.5px; }
.emploi__plus > summary { cursor: pointer; font-weight: 800; color: var(--pink-600); }
.emploi__plus ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.res-emploi .ic { color: var(--pink-600); }
.hub-pick + .emploi { margin-top: 0; }
.quiz-nav .btn { flex: 1 1 180px; }
.md-chip__pct, .md-chip__on { white-space: nowrap; }

/* 09/11 (2e passage des testeurs) */
html { scrollbar-gutter: stable; }
.visite__box:not(.visite__box--conf) { min-height: 0; }
.visite__box:not(.visite__box--conf) p { min-height: 8.5em; }
.visite__box:not(.visite__box--conf) .visite__dots { margin-top: 16px; padding-top: 0; }
.pays-tabs a { padding: 7px 13px; font-size: 13.5px; }
@media (max-width: 1023px) {
  .pays-tabs__in { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
}
.md-chip { max-width: 100%; }
.md-chip__main { min-width: 0; flex-wrap: wrap; }
.md-chip__x { flex: none; min-width: 42px; }
.quiz-nav .btn { width: auto; }
.emploi__h { margin: 12px 0 0; font-size: 13.5px; font-weight: 900; color: var(--ink); }
.tile--ferme { opacity: .6; }
.tile--ferme .tile__tag { color: var(--amber-700); text-transform: none; letter-spacing: 0; }
@media (min-width: 1500px) { .tab-glisse { display: none; } }
.pays-tab small { font-size: 13px; }
.galerie__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galerie__n { font-size: 13px; }
.zoom { position: relative; width: min(1100px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--paper); border: var(--bw) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; }
.zoom img { width: 100%; max-height: calc(100dvh - 140px); object-fit: contain; background: #111; }
.zoom__bas { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; font-size: 14px; }
.zoom__n { font-weight: 900; flex: none; }
.zoom__cap { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.zoom__x { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 22px; background: #fff; }
.zoom .galerie__nav { top: calc(50% - 40px); }
html { background: #EAD9BC; } body { background: transparent; }

/* 09/11 : drapeaux remplis jusqu'au bord (Canada, Australie, Nouvelle-Zélande avaient de grosses bandes noires) */
.flag, .flag--lg, .flag--md { padding: 0; object-fit: cover; }
/* 09/11 (iPhone) : le sommaire du téléphone ne mord plus sur le cadre « Infos vérifiées » au-dessus (son liseré crème de 8 px le recouvrait) */
@media (max-width: 1279px) { .toc--top { margin-top: 16px; } }
/* visite guidée : « Ouvrir la fiche Nouvelle-Zélande » passe à la ligne au lieu de sortir du cadre */
.visite__row .btn { white-space: normal; min-width: 0; text-align: center; line-height: 1.2; }
.visite__row .btn:first-child:not(:last-child) { flex: none; width: auto; }
.visite__row .btn:last-child:not(:first-child) { flex: 1 1 0; width: auto; justify-content: center; }

/* 09/11 : page « Un bug ? Une idée ? » */
.contact-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-mail { font-size: 18px; overflow-wrap: anywhere; margin: 8px 0 12px; }
.contact-c .actions { flex-wrap: wrap; }
/* 09/11 : boutons de l'offre et pastilles « Ta situation » décollés du texte au-dessus */
.offre > .row { margin-top: var(--sp-4); }
.offre--compact .offre__prix { margin-top: var(--sp-3); }
.offre > p.small { margin-top: var(--sp-2); }
.sit-hub ul.chips { margin-top: var(--sp-4); }
/* 09/11 : la règle « .tile img { object-fit: contain } » gagnait sur celle des drapeaux : bandes noires autour du Canada et de la Nouvelle-Zélande dans la grille des pays */
.tile img.flag, img.flag.flag { padding: 0; object-fit: cover; }

/* 09/11 : pied de page plus fin, posé à côté du menu (dans .main-col), plus par-dessus */
.main-col > .footer { margin-top: auto; }
.footer-in { padding-top: 14px; padding-bottom: 16px; font-size: 12.5px; line-height: 1.5; }
.footer p + p { margin-top: 4px; }
@media (max-width: 1023px) {
  .main-col { padding-bottom: 0; }
  .footer-in { padding-bottom: 64px; }
}

/* 09/11 : « Payé en euros ? » (Comparer) */
.rev .card-title { justify-content: flex-start; gap: 10px; }
.rev-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--sp-3) 0; font-weight: 800; }
.rev-in input { width: 140px; min-height: 44px; padding: 6px 12px; font: inherit; font-size: 18px; border: var(--bw-thin) solid var(--black); border-radius: 10px; background: #fff; }
.rev-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .rev-l { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); } }
.rev-i { display: grid; grid-template-columns: 150px 1fr; gap: 2px 10px; align-items: center; font-size: 14px; }
.rev-i a { font-weight: 800; display: flex; align-items: center; gap: 6px; }
.rev-t small { color: var(--ink-2); }
.rev-b { grid-column: 2; height: 8px; background: rgba(24, 24, 28, .08); border-radius: 99px; overflow: hidden; }
.rev-b i { display: block; height: 100%; background: var(--pink-600); border-radius: 99px; }
.rev-i.is-court .rev-b i { background: #B8B2A6; }
@media (max-width: 480px) { .rev-i { grid-template-columns: 1fr; } .rev-b { grid-column: 1; } }
.pan { border-top: var(--bw-thin) dashed rgba(24, 24, 28, .25); padding-top: var(--sp-4); }
.pan__t { font-size: 18px; font-weight: 900; margin: 0 0 var(--sp-2); }

/* 09/11 : « J'ai déjà acheté » (#/cle) */
.cle-form { display: grid; gap: 10px; max-width: 560px; }
.cle-form input { min-height: 48px; padding: 8px 12px; font: inherit; font-size: 16px; letter-spacing: .02em; border: var(--bw-thin) solid var(--black); border-radius: 10px; background: #fff; }
.cle-form .btn { justify-self: start; }
.cle-msg { min-height: 1.5em; margin-top: 10px; font-weight: 700; }
.cle-msg.is-err { color: #A3122E; }
.cle-aide { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.cle-qr__in { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.cle-qr__img { width: 180px; flex: none; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: 12px; padding: 6px; }
.cle-qr__img svg { display: block; width: 100%; height: auto; }
.cle-qr__in p { flex: 1 1 240px; margin: 0; }
.cle-txt code { font-size: 15px; word-break: break-all; background: #fff; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(24, 24, 28, .2); }

/* 09/11 : pastilles des blocs cliquables (elles montrent les sources) */
.bloc .tag { cursor: pointer; }
.bloc .tag:hover { filter: brightness(.95); text-decoration: underline; }
.bloc__src { margin-top: var(--sp-3); }
@media (min-width: 1024px) { .footer-in { padding-right: 96px; } }   /* le bouton « remonter » ne cache plus « Conditions de vente » */
.bloc__src .sources { margin-top: 0; }
.bloc__src .sources > summary { font-size: 13px; }

/* 10/11 (audit) : le titre d'une page d'état est son h1, avec le style du h2 d'avant */
.state .state__h1 { font-size: var(--fs-xl, 22px); line-height: 1.2; margin: 0 0 var(--sp-2); }
/* impression (fiche, Mon dossier) : sans menu ni fond, parties repliées ouvertes par js/app.js (beforeprint) */
@media print {
  .topbar, .sidenav, .drawer, .to-top, .toast, .footer, .carte-outils, .visite { display: none !important; }
  html, body, body::before { background: #fff !important; }
}

/* ============================================================ 12/11 : « Mon PVT », le planner (js/planner.js) */
/* la barre « Le guide / Mon PVT », sous la rangée du haut (fait partie de l'en-tête : --topbar-h compte les deux) */
.pvtbar { height: var(--pvtbar-h); border-top: var(--bw-thin) solid var(--black); background: var(--cream); }
.pvtbar__in { max-width: 480px; height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--sp-2); }
.pvtbar__seg { flex: 1; min-width: 0; display: flex; gap: 4px; padding: 3px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-pill); }
.pvtbar__seg a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: var(--r-pill); font-weight: 800; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pvtbar__seg a.is-on { background: var(--ink); color: #fff; }
.pvtbar__seg a:not(.is-on):hover { background: var(--pink-100); }
.pvtbar__pays { flex: none; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm); cursor: pointer; color: var(--ink); font: inherit; }
.pvtbar__pays .ic { width: 16px; height: 16px; stroke-width: 3.2; }
.pvtbar__pays:active { transform: translate(2px, 2px); box-shadow: none; }

.mp-head .eyebrow { display: flex; align-items: center; gap: 8px; }
.mp-tabs { margin-bottom: var(--sp-6); }
.mp-tabs a .ic { width: 17px; height: 17px; }
.mp-tab-c { display: none; }
/* « Ma liste » et programme des étapes sur téléphone : le texte prend toute la largeur, les boutons passent dessous */
@media (max-width: 560px) {
  .mp-liste li { flex-wrap: wrap; row-gap: 8px; }
  .mp-liste__t { flex: 1 1 calc(100% - 44px); }
  .mp-liste li > .mp-maps { margin-left: 40px; }
  .mp-liste li > .mp-modif { margin-left: auto; }
  .mp-liste li > .mp-maps:last-child { margin-left: 40px; }
}
@media (max-width: 700px) {
  .mp-tabs .pays-tabs__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 2px 2px 6px; }
  .mp-tabs .pays-tabs__in a { flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 4px; border-radius: 14px; font-size: 13px; text-align: center; line-height: 1.15; white-space: normal; }
  .mp-tab-l { display: none; }
  .mp-tab-c { display: inline; }
}
.mp-grille { display: grid; gap: var(--sp-5); }
.mp-grille .card { margin: 0; }
.mp-depart { display: flex; align-items: center; gap: var(--sp-4); }
.mp-depart h2 { color: #fff; font-size: 19px; }
.mp-depart p { margin: 4px 0 0; color: var(--pink-200); font-weight: 600; font-size: 14px; }
.mp-depart a { color: #fff; }
.mp-compte { flex: none; display: grid; place-items: center; min-width: 76px; padding: 8px 10px; background: var(--pink); color: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); transform: rotate(-3deg); text-align: center; }
.mp-compte b { font-size: 30px; font-weight: 900; line-height: 1; }
.mp-compte b .ic { width: 30px; height: 30px; }
.mp-compte span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mp-frise { display: flex; margin: var(--sp-3) 0; min-height: 44px; border: var(--bw) solid var(--black); border-radius: 10px; overflow: hidden; }
.mp-frise span { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 4px 8px; color: var(--black); font-size: 12px; font-weight: 700; line-height: 1.2; overflow: hidden; }
.mp-frise span + span { border-left: var(--bw) solid var(--black); }
.mp-frise span b { font-size: 13.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-frise span.mp-fonce { color: #fff; }
.mp-frise--petit { min-height: 34px; }
.mp-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.mp-chiffres a { display: block; padding: 8px 10px; background: var(--cream); border: var(--bw-thin) solid var(--black); border-radius: 10px; color: var(--ink); text-decoration: none; }
.mp-chiffres small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.mp-chiffres b { font-size: 17px; font-weight: 900; }
.mp-todo, .mp-arrivee, .mp-lignes, .mp-cat, .mp-liste, .mp-prog ul, .mp-etapes { list-style: none; margin: 0; padding: 0; }
.mp-todo li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 2px dashed var(--line); }
.mp-todo li:last-child { border-bottom: 0; }
.mp-todo a { color: var(--ink); text-decoration: none; }
.mp-todo b { display: block; font-weight: 800; }
.mp-todo small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.mp-case { flex: none; width: 24px; height: 24px; margin-top: 1px; display: grid; place-items: center; border: var(--bw) solid var(--black); border-radius: 6px; background: #fff; }
.mp-todo li.is-ok .mp-case { background: var(--turq); }
.mp-case .ic { width: 15px; height: 15px; stroke-width: 3.6; }
.mp-arrivee li { position: relative; padding: 4px 0 4px 18px; font-weight: 600; }
.mp-arrivee li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink-600); }
.mp-vide { text-align: center; }
.mp-vide p { margin: 0 0 var(--sp-3); font-weight: 700; }

.mp-pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.mp-pays__b { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); box-shadow: var(--sh-sm); font: inherit; font-weight: 800; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.mp-pays__b small { display: block; font-size: 11.5px; font-weight: 700; color: var(--pink-600); }
.mp-pays__b:hover { background: var(--pink-100); }
.mp-pays__b:active { transform: translate(2px, 2px); box-shadow: none; }

.mp-reglages { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; }
.mp-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; font-weight: 800; color: var(--ink); }
.mp-champ input, .mp-champ select { min-height: 46px; width: 100%; padding: 0 10px; border: var(--bw-thin) solid var(--black); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); }
.mp-champ--n { max-width: 220px; }
.mp-champ--ville { flex: 1; }
.mp-champ--ville select { font-weight: 900; font-size: 17px; }
.mp-etapes { margin-top: var(--sp-5); display: grid; gap: 0; }
.mp-etape > .card { margin: 0; border-left: 8px solid var(--c, var(--pink)); display: grid; gap: var(--sp-3); }
.mp-etape__haut { display: flex; align-items: center; gap: var(--sp-2); }
/* étape fermée : on lit d'abord, on ouvre pour modifier */
.mp-etape__tete { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 4px 30px 4px 0; position: relative; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.mp-etape__tete b { font-size: 18px; font-weight: 900; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-etape__tete small { font-size: 13.5px; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
.mp-etape__resume { font-weight: 600 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-etape__chev { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); transition: transform .2s; }
.mp-etape__chev .ic { width: 20px; height: 20px; }
.mp-etape.is-ouverte .mp-etape__chev { transform: translateY(-50%) rotate(180deg); }
.mp-etape__corps { display: grid; gap: var(--sp-3); padding-top: var(--sp-2); border-top: 2px dashed rgba(24,24,28,.18); }
.mp-etape__corps[hidden] { display: none; }
.mp-etape__corps .mp-coche input { flex: none; }
.mp-etape__corps textarea { font: inherit; font-size: 15px; }
.mp-etape__haut .mp-ordre .icon-btn { width: 36px; height: 36px; }
.mp-barre-av--etape { height: 6px; }
.mp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 2px solid var(--black); border-radius: 999px; font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.mp-badge .ic { width: 13px; height: 13px; }
.mp-badge--install { background: #FFD6E5; }
.mp-etape.is-install > .card { background: #FFF3F8; }
.mp-exc { display: grid; gap: 6px; font-size: 14px; }
.mp-exc small { color: var(--ink-2); }
.mp-exc__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mp-exc__l li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; }
.mp-exc__l li span { display: inline-flex; align-items: center; gap: 6px; }
.mp-exc__l .ic { width: 16px; height: 16px; }
/* trajet choisi : une ligne, « Changer » pour revoir les options */
.mp-trajet-choix summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 40px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
.mp-trajet-choix summary::-webkit-details-marker { display: none; }
.mp-trajet-changer { color: var(--pink-700, #C2185B); font-weight: 900; text-decoration: underline; }
.mp-trajet-choix[open] .mp-opts { margin-top: 8px; }
.mp-num { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: var(--bw) solid var(--black); border-radius: 50%; background: var(--c, var(--pink)); color: #fff; font-weight: 900; font-size: 14px; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.mp-ordre { display: flex; gap: 6px; }
.icon-btn--sm { width: 40px; height: 40px; }
.icon-btn--sm .ic { width: 17px; height: 17px; }
.icon-btn[disabled] { opacity: .35; box-shadow: none; cursor: default; }
.mp-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); }
.mp-ligne .mp-champ:not(.mp-champ--n) { width: 130px; }
.mp-dates { margin: 0 0 10px; font-weight: 800; font-size: 14px; }
.mp-aide { margin: 0; color: var(--ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.mp-coche { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.mp-coche input { width: 22px; height: 22px; accent-color: var(--pink-600); }
.mp-etape__liens { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 800; font-size: 14px; }
.mp-etape__liens a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.mp-etape__liens .ic { width: 16px; height: 16px; }
.mp-rappel { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; background: var(--amber-100); border: var(--bw-thin) solid var(--black); border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.mp-rappel .ic { flex: none; width: 19px; height: 19px; margin-top: 1px; }
.mp-rappel--warn { background: #fff; border-style: dashed; }
.mp-trajet { display: flex; gap: 10px; margin: 0 0 0 14px; padding: 10px 0 10px 20px; border-left: 3px dashed var(--black); font-size: 14px; }
.mp-trajet > .ic { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.mp-trajet > div { flex: 1; min-width: 0; display: grid; gap: 8px; }
.mp-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 7px 11px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.mp-opt b { font-size: 14px; font-weight: 900; }
.mp-opt.is-on { background: var(--turq-100); box-shadow: inset 0 0 0 2px var(--black); }
.mp-ajout { margin-top: var(--sp-5); width: 100%; border-style: dashed; }
.mp-etape + .mp-etape > .card { margin-top: var(--sp-4); }
.mp-etape:has(.mp-trajet) + .mp-etape > .card { margin-top: 0; }

.mp-etapes-chips { margin-bottom: var(--sp-5); }
.mp-prog h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: 15px; color: var(--pink-600); }
.mp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 2px dashed var(--line); }
.mp-act:last-child { border-bottom: 0; }
.mp-act__t { flex: 1 1 200px; min-width: 0; }
.mp-act__t b { display: block; font-weight: 800; }
.mp-act__t small, .mp-cat small, .mp-liste small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.mp-act__quand { display: flex; align-items: center; gap: 6px; }
.mp-act__quand input, .mp-act__quand select { min-height: 42px; padding: 0 8px; border: var(--bw-thin) solid var(--black); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); max-width: 150px; }
.mp-filtres { margin-bottom: var(--sp-3); }
.mp-cat { padding: 4px 16px; }
.mp-cat li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--line); }
.mp-cat li:last-child { border-bottom: 0; }
.mp-cat li > div { flex: 1; min-width: 0; }
.mp-cat li b { font-weight: 800; }
.mp-cat li[hidden] { display: none; }
.mp-cat .btn { flex: none; width: auto; min-height: 42px; padding: 6px 12px; font-size: 14px; }   /* .btn est en pleine largeur par défaut : le bouton écrasait le texte sur ordinateur */
.btn--ok { background: var(--turq); color: var(--black); }
.mp-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.mp-form .btn { justify-self: start; }
.mp-form--ligne { grid-template-columns: 1fr auto; align-items: end; margin-top: var(--sp-4); }
.mp-form--ligne .mp-champ:first-child { grid-column: 1 / -1; }

.mp-carte-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: var(--sp-3); }
.mp-carte { min-height: 120px; }
.mp-solo .ic { width: 15px; height: 15px; }
/* outils posés sur la carte détaillée (aussi en plein écran) */
.mp-carte-ctrl { position: absolute; z-index: 3; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
body.mp-plein .mp-carte-ctrl { top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); }
.mp-ctrl { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 9px; background: rgba(255,255,255,.94); color: var(--ink); border: var(--bw-thin) solid var(--black);
  border-radius: 10px; box-shadow: var(--sh-sm); font: inherit; font-weight: 800; font-size: 12px; cursor: pointer; }
.mp-ctrl .ic { width: 15px; height: 15px; flex: none; }
.mp-ctrl.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.mp-ctrl:active { transform: translate(2px, 2px); box-shadow: none; }
/* plein écran : bouton Filtres, et les tuiles de filtres posées en bas de la carte */
.mp-ctrl--filtres { display: none; }
body.mp-plein .mp-ctrl--filtres { display: inline-flex; }
body.mp-plein.mp-filtres-on .mp-filtres-detail { position: fixed; z-index: 72; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom)); margin: 0; padding: 8px; background: var(--paper, #FFF8EC); border: var(--bw-thin) solid var(--black); border-radius: 14px; box-shadow: var(--sh-sm); }
body.mp-plein.mp-feuille-ouverte.mp-filtres-on .mp-filtres-detail { display: none; }
/* espace entre la grille des drapeaux et la carte qui suit (accueil) */
.flag-grid--links + * { margin-top: var(--sp-6); }
.mp-vide-carte { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; background: var(--paper); border: var(--bw-thin) dashed var(--black); border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.mp-vide-carte .ic { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.mp-vide-carte small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 12.5px; }
.mp-filtres-detail.is-solo .chip { opacity: .45; }
/* carte détaillée (essai) */
.mp-carte-mode { max-width: 460px; margin-bottom: var(--sp-3); }
.mp-carte-mode button { flex: 1; min-height: 40px; border: 0; border-radius: var(--r-pill); background: transparent; font: inherit; font-weight: 800; font-size: 14px; color: var(--ink); cursor: pointer; }
.mp-carte-mode button.is-on { background: var(--ink); color: #fff; }
.mp-filtres-detail { margin-bottom: var(--sp-3); }
.mp-puce { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--black); border-radius: 50%; font-style: normal; flex: none; }
.mp-puce svg { width: 14px; height: 14px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mp-puce--etoile { background: var(--yellow); color: #18181C; font-size: 13px; line-height: 1; }
/* filtres de la carte détaillée : tuiles égales (icône + nom court), 5 par ligne sur téléphone, une seule ligne sur ordinateur */
.mp-filtres-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }   /* 14/11 : 9 filtres (laveries retirées), 3 x 3 */
.mp-filtres-detail .chip { flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 2px; border-radius: 12px; font-size: 11.5px; line-height: 1.1; text-align: center; white-space: normal; box-shadow: none; }
.mp-filtres-detail .chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.mp-filtres-detail .chip:not(.is-on) .mp-puce { opacity: .55; }
@media (min-width: 900px) { .mp-filtres-detail { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (max-width: 430px) { .mp-filtres-detail .chip { font-size: 10px; letter-spacing: -.01em; } }
.mp-lettre--idee { background: var(--yellow); }
.mp-idee-d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.mp-carte--detail { position: relative; height: clamp(380px, 62vh, 640px); border: var(--bw) solid var(--black); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; background: #F7EFDD; }
.mp-carte-attente { margin: 0; padding: 40px 16px; text-align: center; font-weight: 700; }
.mp-carte--detail .maplibregl-ctrl-attrib { font-size: 11px; }
.mp-fiche-lieu { display: grid; gap: var(--sp-3); margin: 0; border: 0; box-shadow: none; padding: 0; background: transparent; }
/* panneau qui monte du bas (fiche du lieu, formulaire) : la carte reste visible au-dessus, rien ne se recharge */
.mp-feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--sp-4); padding: 8px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: var(--bw) solid var(--black); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(24, 24, 28, .18);
  animation: mp-monte .22s var(--ease); }
/* rien dans le panneau ne doit l'élargir au-delà de l'écran (un bouton au long texte élargissait toute la page) */
.mp-feuille { grid-template-columns: minmax(0, 1fr); }
.mp-feuille > *, .mp-fiche-lieu > * { min-width: 0; }
.mp-feuille .btn { white-space: normal; text-align: center; overflow-wrap: anywhere; }
.mp-feuille__poignee { justify-self: center; width: 44px; height: 5px; margin: 2px 0 2px; border-radius: 3px; background: #C8BBA2; }
.mp-feuille .mp-form { margin: 0; border: 0; box-shadow: none; padding: 0; background: transparent; }
.mp-feuille .mp-form + .mp-fiche-lieu, .mp-feuille .mp-fiche-lieu + .mp-form { border-top: 2px dashed var(--line); padding-top: var(--sp-4); }
@keyframes mp-monte { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mp-feuille { animation: none; } }
body.mp-feuille-ouverte .footer { padding-bottom: 60vh; }
@media (min-width: 1024px) {
  .mp-feuille { left: auto; right: 24px; bottom: 24px; width: 400px; max-height: calc(100vh - var(--topbar-h) - 48px); border: var(--bw) solid var(--black); border-radius: 18px; box-shadow: var(--sh-lg); }
  .mp-feuille__poignee { display: none; }
}
/* plein écran de la carte détaillée */
.mp-plein-b { position: absolute; z-index: 3; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  background: #fff; border: var(--bw-thin) solid var(--black); border-radius: 10px; box-shadow: var(--sh-sm); font: inherit; font-weight: 800; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.mp-plein-b .ic { width: 16px; height: 16px; }
body.mp-plein { overflow: hidden; }
body.mp-plein .mp-carte--detail { position: fixed; inset: 0; z-index: 70; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.mp-carte--detail.is-pose canvas { cursor: crosshair; }
.mp-carte--detail.is-pose::after { content: "Touche l'endroit de ta pastille"; position: absolute; z-index: 3; left: 50%; bottom: 40px; transform: translateX(-50%);
  padding: 6px 12px; background: var(--ink); color: #fff; border-radius: var(--r-pill); font-weight: 800; font-size: 13.5px; white-space: nowrap; pointer-events: none; }
.mp-fiche-lieu__h { display: flex; align-items: flex-start; gap: 10px; }
.mp-fiche-lieu__h > div { flex: 1; min-width: 0; }
.mp-fiche-lieu h2 { font-size: 19px; }
.mp-fiche-lieu .small { margin: 2px 0 0; color: var(--ink-2); }
.mp-fiche-lieu__t { margin: 6px 0 0; font-weight: 800; color: var(--pink-600); }
.mp-fiche-lieu h2 { display: flex; align-items: center; gap: 4px; }
.mp-infos { margin: 0; display: grid; gap: 6px; }
.mp-infos div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding-bottom: 6px; border-bottom: 2px dashed var(--line); }
.mp-infos dt { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.mp-infos dd { margin: 0; font-weight: 700; }
.mp-fait-b { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: var(--bw-thin) solid var(--black); border-radius: 12px; background: #fff; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; text-align: left; }
.mp-fait-b.is-on { background: var(--turq-100); }
.mp-fait-b .mp-case-b { pointer-events: none; }
.mp-fait-b.is-on .mp-case-b { background: var(--turq); }
.mp-fiche-lieu .btn { width: 100%; white-space: normal; }
.mp-form--pose { border-color: var(--pink-600); box-shadow: var(--sh-md); }
.mp-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mp-type { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: var(--bw-thin) solid var(--black); border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; text-align: center; }
.mp-type input { position: absolute; opacity: 0; pointer-events: none; }
.mp-type:has(input:checked) { background: var(--pink-100); box-shadow: inset 0 0 0 2px var(--pink-600); }
.mp-type:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.mp-lettre { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border: 2px solid var(--black); border-radius: 50%; font-size: 12.5px; font-weight: 900; font-style: normal; vertical-align: middle; background: #fff; color: var(--black); }
.mp-type .mp-lettre { margin: 0; }
.mp-lettre--logement { background: var(--ink); color: #fff; }
.mp-lettre--travail { background: var(--turq); }
.mp-lettre--voir { background: var(--pink); color: #fff; }
.mp-lettre--courses { background: var(--amber-100); }
.mp-lettre--rdv { background: var(--pink-200); }
.mp-lettre--manger { background: #E8833A; color: #fff; }
/* formulaire d'un lieu : nuits et prix pour un logement, prix par personne sinon */
.mp-form-lieu:has(input[value="logement"]:checked) .mp-si-autre { display: none; }
.mp-form-lieu:not(:has(input[value="logement"]:checked)) .mp-si-logement { display: none; }
.mp-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 420px) { .mp-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mp-garde { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; color: var(--ink); }
.mp-garde .ic { width: 20px; height: 20px; padding: 2px; border: 2px solid var(--black); border-radius: 6px; background: var(--turq); }
.mp-modif { flex: none; width: auto; min-height: 40px; padding: 4px 10px; font-size: 13px; box-shadow: var(--sh-sm); }
/* le programme de chaque étape (itinéraire) */
.mp-prog-etape { display: grid; gap: 8px; padding: 12px; background: var(--paper); border: var(--bw-thin) solid var(--black); border-radius: 12px; }
.mp-prog-etape__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mp-prog-etape__h b { font-weight: 900; }
.mp-prog-etape__h span { font-size: 13px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.mp-prog-etape--vide b { display: block; font-weight: 900; }
.mp-prog-etape--vide small { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.mp-barre-av { display: block; height: 10px; border: 2px solid var(--black); border-radius: 999px; background: #fff; overflow: hidden; }
.mp-barre-av span { display: block; height: 100%; background: var(--turq); transition: width .3s var(--ease); }
.mp-liste--etape { padding: 0; border: 0; box-shadow: none; background: transparent; }
.mp-lettre--act { background: var(--cream); }
.mp-liste__t b .mp-lettre { flex: none; }   /* la pastille L, M… ne s'écrase plus quand le titre va à la ligne */
.mp-liste--etape .mp-maps { padding: 0 8px; font-size: 12px; }
.mp-avance { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--line); color: var(--ink); text-decoration: none; }
.mp-avance:last-child { border-bottom: 0; }
.mp-avance > span:first-child { flex: 1; min-width: 0; }
.mp-avance b { display: block; font-weight: 800; }
.mp-avance small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.mp-avance .mp-barre-av { flex: 0 0 40%; }
.mp-logements { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mp-logements li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: var(--cream); border: var(--bw-thin) solid var(--black); border-radius: 10px; }
.mp-logements .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.mp-logements b { display: block; font-weight: 800; }
.mp-logements small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.mp-compte-l { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-left: 8px; }
.mp-liste-t { margin: var(--sp-5) 0 var(--sp-2); font-size: 16px; }
.mp-liste { padding: 4px 14px; }
.mp-liste li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px dashed var(--line); }
.mp-liste li:last-child { border-bottom: 0; }
.mp-liste li.is-fait .mp-liste__t b { text-decoration: line-through; text-decoration-thickness: 2px; }
.mp-liste__t { flex: 1; min-width: 0; }
.mp-liste__t b { display: flex; align-items: center; font-weight: 800; }
.mp-case-b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: var(--bw) solid var(--black); border-radius: 7px; background: #fff; cursor: pointer; padding: 0; color: var(--black); }
.mp-case-b[aria-checked="true"] { background: var(--turq); }
.mp-case-b .ic { width: 17px; height: 17px; stroke-width: 3.6; }
.mp-origine { display: inline-block; margin-top: 4px; padding: 1px 8px; border: 2px solid var(--black); border-radius: var(--r-pill); background: var(--cream); font-size: 11px; font-weight: 800; }
.mp-origine.is-guide { background: var(--ink); color: #fff; }
.mp-maps { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 9px; border: var(--bw-thin) solid var(--black); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.mp-maps .ic { width: 14px; height: 14px; }

.mp-totaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mp-totaux .card { margin: 0; padding: 10px 12px; }
.mp-totaux small { display: block; font-size: 12px; font-weight: 700; }
.mp-totaux b { font-size: 19px; font-weight: 900; }
.mp-tot-rev { background: var(--turq-100); }
.mp-totaux + .mp-rappel, .mp-rappel + .mp-rappel { margin-bottom: var(--sp-3); }
.mp-barres { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 8px; border-bottom: var(--bw) solid var(--black); }
.mp-mois { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
.mp-mois__b { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.mp-mois__b span { width: 42%; max-width: 16px; border: 2px solid var(--black); border-bottom: 0; border-radius: 4px 4px 0 0; }
.mp-mois small { font-size: 10.5px; font-weight: 800; color: var(--ink-2); margin-bottom: -20px; transform: translateY(22px); white-space: nowrap; }
.mp-rev { background: var(--ink); }
.mp-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 38px 0 0; font-size: 12.5px; font-weight: 700; }
.mp-legende span { display: inline-flex; align-items: center; gap: 5px; }
.mp-legende i { width: 12px; height: 12px; border: 2px solid var(--black); }
.mp-lignes li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 2px dashed var(--line); font-weight: 700; }
.mp-lignes li:last-child { border-bottom: 0; }
.mp-lignes li span { flex: 1; min-width: 0; }
.mp-lignes li small { display: block; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.mp-lignes li b { white-space: nowrap; font-weight: 900; }
.mp-lignes .icon-btn { align-self: center; }
.mp-saisies { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }

.mp-apercu h2 { margin: 6px 0 2px; font-size: 20px; }
.mp-apercu p { margin: 6px 0; font-weight: 700; }
.mp-apercu .small { color: var(--pink-600); }
.mp-interrupteurs { display: grid; gap: 4px; }
.mp-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; cursor: pointer; }
.mp-switch input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border: var(--bw) solid var(--black); border-radius: var(--r-pill); background: #fff; cursor: pointer; }
.mp-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--black); transition: left .15s var(--ease); }
.mp-switch input:checked { background: var(--turq); }
.mp-switch input:checked::after { left: 21px; }
.mp-switch input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mp-actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.mp-actions .btn { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }
.mp-import { position: relative; cursor: pointer; }
.mp-import:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.mp-imprimable { display: none; }
/* « L'essentiel » : 8 tuiles à pictos, même ordre pour chaque pays */
.ess { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .ess { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ess__t { display: flex; flex-direction: column; gap: 3px; padding: 12px; background: #fff; border: var(--bw) solid var(--black); border-radius: 16px; box-shadow: var(--sh-sm); min-width: 0; }
.ess__ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; border: 2px solid var(--black); border-radius: 50%; }
.ess__ic svg { width: 19px; height: 19px; fill: none; stroke: var(--black); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ess__k { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ess__v { font-size: 21px; font-weight: 900; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.ess__n { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.ess__t .tag { align-self: flex-start; margin-top: auto; padding-top: 0; }
.ess__n + .tag, .ess__v + .tag { margin-top: 8px; }
/* le piège d'une pièce, sous la pièce */
.check .piege { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; background: #FFF0F5; border: 2px solid var(--pink); border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.check .piege .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--pink-600, #C2185B); }
.check.is-done .piege { opacity: .6; }
/* bureaux de dépôt (Japon) */
.bureaux { display: flex; flex-direction: column; gap: 12px; margin-top: var(--sp-3); }
.bureau { display: grid; gap: 8px; padding: 12px 14px; background: #fff; border: var(--bw) solid var(--black); border-left-width: 10px; border-radius: 14px; box-shadow: var(--sh-sm); }
.bureau[data-bureau="paris"] { border-left-color: #5FB36B; } .bureau[data-bureau="strasbourg"] { border-left-color: #5B8FC9; }
.bureau[data-bureau="lyon"] { border-left-color: #F5B83D; } .bureau[data-bureau="marseille"] { border-left-color: #A866B0; }
.bureau.is-mien { order: -1; box-shadow: 5px 5px 0 var(--pink); }
.bureau__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bureau__h h4 { margin: 0; font-size: 18px; font-weight: 900; }
.bureau__s { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.bureau__mien { display: none; flex: none; padding: 3px 9px; border: 2px solid var(--black); border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.bureau.is-mien .bureau__mien { display: inline-block; }
.bureau__etat { margin: 0; padding: 8px 10px; background: #FFF1C9; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.bureau__dl { margin: 0; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; }
.bureau__dl div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
.bureau__dl dt { font-weight: 800; color: var(--ink-2); }
.bureau__dl dd { margin: 0; }
.bureau__b { display: flex; flex-wrap: wrap; gap: 8px; }
.bureau__b .btn { width: auto; }
.bureau__note { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.bureaux:has(.is-mien) .bureau:not(.is-mien) :is(.bureau__etat, .bureau__dl, .bureau__b, .bureau__note) { display: none; }
.bureaux:has(.is-mien) .bureau:not(.is-mien) { padding-block: 8px; box-shadow: none; }
/* Mon PVT : ma checklist */
.mp-ck-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.mp-ck-tete > div:first-child { display: grid; gap: 2px; }
.mp-ck-j { font-size: 40px; font-weight: 900; line-height: 1; }
.mp-ck-tete a { color: #fff; }
.mp-ck-pct { flex: 1 1 180px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.mp-ck-pct b { font-size: 22px; font-weight: 900; }
.mp-ck-pct small { grid-column: 1 / -1; opacity: .8; font-weight: 700; }
.mp-ck-g { display: grid; gap: var(--sp-3); }
.mp-ck-g .card-title { display: flex; align-items: center; gap: 8px; }
.mp-ck-n { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.mp-ck-l li { align-items: flex-start; }
.mp-ck-l .mp-case-b { margin-top: 2px; }
.mp-ck-l .mp-liste__t { display: grid; gap: 3px; }
.mp-ck-l .mp-liste__t b { display: block; }
.mp-ck-quand { display: inline-block; align-self: flex-start; justify-self: start; margin-top: 3px; padding: 2px 8px; border: 2px solid var(--black); border-radius: 999px; background: #FFF1C9; font-size: 12px; font-weight: 800; }
/* Mon PVT, budget : 1 ou 2 personnes, totaux en monnaie locale, détail en 3 parts */
.mp-pers { margin-bottom: var(--sp-3); }
.mp-totaux .card span { display: block; font-size: 12.5px; font-weight: 700; opacity: .85; }
.mp-lignes__h { display: flex; justify-content: space-between; gap: 10px; margin: var(--sp-4) 0 4px; padding-bottom: 4px; border-bottom: var(--bw-thin) solid var(--black); font-size: 15px; font-weight: 900; }
.mp-lignes__h:first-of-type { margin-top: 0; }
/* Mon PVT, tableau de bord : à faire maintenant, aperçu du carnet */
.mp-grille > * { min-width: 0; }
.mp-afaire p { overflow-wrap: anywhere; }
.mp-afaire { display: grid; gap: 6px; border-left: 10px solid var(--pink); }
.mp-afaire h2 { margin: 0; font-size: var(--fs-card); }
.mp-afaire p { margin: 0; color: var(--ink-2); font-weight: 600; }
.mp-afaire .btn { justify-self: start; width: auto; margin-top: 4px; }
.mp-carnet-apercu { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 14px; align-items: center; color: var(--ink); text-decoration: none; }
.mp-carnet-apercu__c { display: block; border: var(--bw-thin) solid var(--black); border-radius: 12px; overflow: hidden; }
.mp-carnet-apercu__c .mp-parcours { aspect-ratio: 5 / 4; }
.mp-carnet-apercu__t { display: grid; gap: 3px; min-width: 0; }
.mp-carnet-apercu__t b { font-size: 18px; font-weight: 900; }
.mp-carnet-apercu__t > span:not(.eyebrow):not(.link) { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
/* 14/11 (testeuse) : tuile du budget sur toute la largeur sur petit téléphone ; cases à cocher plus faciles à toucher */
@media (max-width: 420px) { .mp-chiffres a:first-child { grid-column: 1 / -1; } }
.mp-case-b { position: relative; }
.mp-case-b::after { content: ""; position: absolute; inset: -8px; }
.mp-hors { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: #8A3B00; font-size: 13px; font-weight: 700; }
.mp-hors .ic { width: 16px; height: 16px; }
.mp-alerte-duree { margin: 0 0 var(--sp-4); }
/* 14/11 : rappels empilés espacés, texte d'aide sous les boutons du carnet, actions de l'itinéraire, outils sur la carte du guide */
.mp-rappel + .mp-rappel { margin-top: 10px; }
.mp-actions + .mp-aide { margin-top: var(--sp-4); }
.mp-itin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); }
.mp-itin-actions .btn { width: auto; flex: 1 1 220px; }
.mp-carte { position: relative; }
.carte-cadre { position: relative; }
.mp-carte-ctrl--guide { top: 10px; left: auto; right: 10px; z-index: 4; }
/* Comparer : duel visuel ; en-tête collé arrondi comme son cadre */
.duel { display: grid; gap: 14px; }
.duel__l { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 2px dashed var(--line); }
.duel__l:last-of-type { border-bottom: 0; }
.duel__k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.duel__v { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) 88px 96px; align-items: center; gap: 10px; font-size: 14px; }
.duel__n { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel__b { height: 14px; border: 2px solid var(--black); border-radius: 99px; background: #fff; overflow: hidden; }
.duel__b i { display: block; height: 100%; background: var(--turq-100); }
.duel__v.is-top .duel__b i { background: var(--pink); }
.duel__v b { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.duel__badge { padding: 2px 8px; border: 2px solid var(--black); border-radius: 99px; background: var(--pink-200); font-size: 11px; font-weight: 900; white-space: nowrap; }
.duel__v:not(.is-top) .duel__badge { visibility: hidden; }
.duel__v b { text-align: right; }
.duel__badge { justify-self: start; }
@media (max-width: 520px) { .duel__v { grid-template-columns: minmax(60px, 90px) minmax(0, 1fr) 78px; } .duel__badge { display: none; } }
.cmp2 thead th:first-child { border-top-left-radius: 14px; }
.cmp2 thead th:last-child { border-top-right-radius: 14px; }
.cmp2-wrap { background: transparent; }
.cmp2 { background: #fff; border-radius: 14px; }
/* Mon PVT : chercher un lieu sur la carte détaillée */
.mp-cherche { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); padding: 0 12px; min-height: 46px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-ctrl); box-shadow: var(--sh-tile); }
.mp-cherche > .ic { width: 18px; height: 18px; flex: none; }
.mp-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); box-shadow: none; }
.mp-cherche__r { position: absolute; z-index: 20; left: -2px; right: -2px; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-ctrl); box-shadow: var(--sh-card); max-height: 320px; overflow: auto; }
.mp-cherche__r button { display: grid; gap: 1px; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: 8px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.mp-cherche__r button:hover, .mp-cherche__r button:focus-visible { background: var(--turq-100); }
.mp-cherche__r small { color: var(--ink-2); font-size: 12.5px; }
.mp-cherche__vide { padding: 8px 10px; font-size: 13.5px; color: var(--ink-2); }
.mp-cherche--ville { margin: 0; }
.mp-aide .ic { width: 14px; height: 14px; vertical-align: -2px; }
/* 14/11 relecture visuelle : guide */
/* encadrés : le liseré de couleur devient une barre droite posée dans le cadre, loin des coins arrondis (plus de biseau qui s'effile dans le bord) */
:root :is(.depot, details.depot, .verified, .mp-rappel, .carte-aide, .mp-afaire, .depot.emploi, details.emploi, .mp-rappel--warn) {
  background-image: linear-gradient(var(--lisere, var(--pink)), var(--lisere, var(--pink))); background-repeat: no-repeat; background-position: 10px 12px; background-size: 5px calc(100% - 24px);
  box-shadow: var(--sh-tile); padding-left: 26px;
}
:root :is(.verified, .carte-aide) { --lisere: var(--turq); }
:root :is(details.emploi, .depot.emploi, .mp-rappel, .mp-rappel--warn) { --lisere: var(--yellow); }
:root .mp-afaire { --lisere: var(--pink); box-shadow: var(--sh-card); }
:root .bureau { background-image: linear-gradient(var(--bc, var(--turq)), var(--bc, var(--turq))); background-repeat: no-repeat; background-position: 10px 12px; background-size: 6px calc(100% - 24px); box-shadow: var(--sh-tile); padding-left: 26px; }
:root .bureau.is-mien { box-shadow: 5px 5px 0 var(--pink); }
/* bouton « remonter en haut » : fond clair (il se voit sur le pied de page bleu nuit) ; le pied de page lui laisse la place */
.to-top { background: var(--pink); color: #fff; }
.footer .footer-in { padding-bottom: 84px; padding-right: 72px; }
@media (min-width: 1024px) { .footer .footer-in { padding-right: 96px; } }
/* parcours avec Laura : plus de rectangle blanc derrière Retour / Suivant */
.quiz-nav { background: none; }
/* Comparer : de l'air sous les menus ; sur ordinateur les 3 villes sur une ligne ; trait sous l'en-tête collé ; cellules moins serrées ; une seule taille de texte */
.duel { margin-top: var(--sp-5); }
@media (min-width: 1024px) {
  .cmp-sel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-sel label.cmp-sel__3 { grid-column: 4; grid-row: 1; }
}
.cmp2 thead th { background: linear-gradient(var(--black), var(--black)) left bottom / 100% 3px no-repeat, #fff; box-shadow: none; padding-bottom: 12px; }
.cmp2 th, .cmp2 td { padding: 10px 14px; }
.cmp2 td, .cmp2 td .cmp2-det summary { font-size: 15px; }
.cmp2 td .cmp2-det summary { font-weight: 600; }
/* Les 15 pays : la phrase « le tableau glisse » seulement quand le tableau est affiché et plus large que l'écran ; colonnes Budget et Langues lisibles */
.tab-glisse { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .tab-glisse { display: block; } }
.pays-tab td:nth-child(4), .pays-tab th:nth-child(4) { min-width: 160px; }
.pays-tab td:nth-child(8), .pays-tab th:nth-child(8) { min-width: 120px; }
/* de l'air entre les blocs d'une page (cartes, boutons, notes qui suivent une carte) : Crédits, Mon dossier, Parents… */
:where(#app > .card, #app > section, #app > .state, #app > .actions, #app > .installer-slot, #app > details) + :is(.card, section, .actions, .installer-slot, details, p.small, p.muted, .note):not([class*="mt-"]) { margin-top: var(--sp-4); }
.card p + .btn, .card p + .actions, .card ul + .btn, .card p + a.btn { margin-top: var(--sp-3); }
/* ordinateur : les boutons d'appel ne s'étirent plus sur toute la largeur (« téléphone agrandi ») */
@media (min-width: 1024px) {
  #app .actions { display: flex; flex-wrap: wrap; align-items: center; }
  #app .sauve .partage, #app .sauve .row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  #app .sauve .btn { width: auto; flex: 0 1 auto; min-width: 240px; }
  #app .actions > .btn, #app .actions > a.btn { width: auto; min-width: 240px; }
  #app .card > .btn, #app .card > a.btn, #app .state > .btn, #app .state > a.btn, #app .card > p > a.btn:only-child, #app .page-head .btn { width: auto; min-width: 240px; }
}
/* résultat du quiz (téléphone) : les deux boutons d'un pays l'un sous l'autre, en pleine largeur */
@media (max-width: 599px) {
  .row.res-actions { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
  .row.res-actions .btn { width: 100%; white-space: normal; }
}
/* « Ton PVT … » / « Par où commencer ? » : grille à rangées égales (les colonnes laissaient des trous de fond kraft en bas) */
@media (min-width: 1024px) {
  .moments.wide { display: grid; columns: auto; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; gap: var(--sp-4); }
  .moments.wide > .moment { margin: 0; height: 100%; }
}
/* grilles de tuiles chiffrées : une tuile seule en fin de rangée prend toute la largeur (fiche Argentine : 7 tuiles) */
@media (max-width: 699px) { .stats:not(.stats--5):not(.stats--6) > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  :is(.stats--4, .narrow .stats--flat) > .stat:last-child:nth-child(4n+3) { grid-column: span 2; }
  :is(.stats--4, .narrow .stats--flat) > .stat:last-child:nth-child(4n+2) { grid-column: span 3; }
  :is(.stats--4, .narrow .stats--flat) > .stat:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
}
/* filtres qui défilent (Les 15 pays…) : un fondu à droite montre qu'il y en a d'autres, comme les onglets des fiches */
@media (max-width: 1023px) { .chips--scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 40px; } }
/* tuiles « L'essentiel » : une rangée incomplète se termine par une tuile élargie (fiche Argentine : 7 tuiles) */
@media (max-width: 899px) { .ess > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .ess > :last-child:nth-child(4n+3) { grid-column: span 2; }
  .ess > :last-child:nth-child(4n+2) { grid-column: span 3; }
  .ess > :last-child:nth-child(4n+1) { grid-column: 1 / -1; }
}
/* fin relecture visuelle : guide */
/* « En 30 secondes » */
.en30 { background: var(--pink-200); }
.en30 ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.5; }
/* étapes de la demande en frise : numéro dans le rond (coche une fois faite), trait qui relie les étapes */
.etapes-frise .checklist { counter-reset: etape; }
.etapes-frise .check { counter-increment: etape; }
.etapes-frise .check + .check { border-top: 0; }
.etapes-frise .check .box { width: 36px; height: 36px; margin-top: -4px; border-radius: 50%; background: var(--turq-100, var(--turq-100)); box-shadow: 2px 2px 0 var(--black); position: relative; z-index: 1; }
.etapes-frise .check .box::before { content: counter(etape); grid-area: 1 / 1; font-weight: 900; font-size: 16px; color: var(--ink); }
.etapes-frise .check .box .ic { grid-area: 1 / 1; }
.etapes-frise .check input:checked + .box::before { content: none; }
.etapes-frise .check::after { content: ""; position: absolute; left: calc(var(--sp-4) + 16.5px); top: calc(var(--sp-5) + 34px); bottom: 0; width: 3px; background: var(--black); opacity: .8; }
.etapes-frise .check:last-of-type::after { display: none; }
/* « Étape N sur M » : collée sous l'en-tête tant qu'on lit les étapes */
.etape-collee { position: sticky; top: calc(var(--topbar-h) + var(--souspage-h, 0px)); z-index: 12; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  margin: 0 0 var(--sp-3); padding: 8px 12px; background: var(--cream); border: var(--bw) solid var(--black); border-radius: 14px; box-shadow: var(--sh-sm); }
.cat-main:has(.toc--top) .etape-collee { --souspage-h: 52px; }
.etape-collee__n { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--black); border-radius: 50%; background: var(--pink); color: #fff; font-weight: 900; font-size: 13px; }
.etape-collee__n .ic { width: 16px; height: 16px; stroke-width: 3.4; }
.etape-collee__t { font-weight: 900; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etape-collee__c { font-weight: 800; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.etape-collee__barre { grid-column: 1 / -1; height: 5px; background: #fff; border: 1.5px solid var(--black); border-radius: 99px; overflow: hidden; }
.etape-collee__barre span { display: block; height: 100%; background: var(--pink); }
/* carte officielle des juridictions (Japon) */
.zones-carte { margin: var(--sp-3) 0 0; }
.zones-carte img { display: block; width: 100%; height: auto; border: var(--bw-thin) solid var(--black); border-radius: 12px; }
.zones-carte figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
/* carnet de voyage */
.mp-carnet { display: grid; gap: var(--sp-4); }
.mp-carnet__tete h2 { margin: 4px 0 0; font-size: clamp(26px, 6vw, 38px); line-height: 1.1; }
.mp-carnet__dates { margin: 6px 0 0; font-weight: 800; font-size: 16px; }
.mp-carnet__carte { margin: 0; border: var(--bw) solid var(--black); border-radius: 16px; overflow: hidden; background: #D7E9F1; box-shadow: var(--sh-sm); }
.mp-parcours { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; }
.mp-carnet__carte figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px; background: #fff; border-top: 2px solid var(--black); font-size: 13px; font-weight: 700; }
.mp-carnet__carte figcaption span { display: inline-flex; align-items: center; gap: 6px; }
.mp-rond { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--black); border-radius: 50%; background: #40BEC4; }
.mp-rond--vide { background: #fff; width: 10px; height: 10px; }
.mp-rond--install { background: #F2558C; width: 16px; height: 16px; }
.mp-carnet__chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .mp-carnet__chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mp-carnet__chiffres > div { display: grid; gap: 2px; padding: 12px; background: #fff; border: var(--bw-thin) solid var(--black); border-radius: 14px; box-shadow: var(--sh-sm); }
.mp-carnet__chiffres small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.mp-carnet__chiffres b { font-size: 24px; font-weight: 900; line-height: 1.1; }
.mp-carnet__chiffres > div > span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mp-carnet__bloc { margin: 0; display: grid; gap: var(--sp-3); }
.mp-carnet__resa, .mp-carnet__acts, .mp-carnet__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-carnet__resa li, .mp-carnet__acts li { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 15px; }
.mp-carnet__resa li > span:last-child, .mp-carnet__acts li > span:last-child { min-width: 0; display: grid; gap: 1px; padding-top: 6px; overflow-wrap: anywhere; }
.mp-carnet__resa small, .mp-carnet__acts small { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.mp-carnet__acts li > span:last-child { display: block; }
.mp-carnet__resa li.is-fait b, .mp-carnet__acts li.is-fait > span:last-child { text-decoration: line-through; opacity: .65; }
.mp-carnet__notes p { margin: 0; line-height: 1.55; }
.mp-carnet__etapes { gap: var(--sp-4); }
.mp-carnet__e { display: grid; gap: 10px; padding: 14px 14px 14px 16px; background: #fff; border: var(--bw) solid var(--black); border-left: 10px solid var(--c); border-radius: 16px; box-shadow: var(--sh-sm); }
.mp-carnet__e.is-install { background: #FFF3F8; border-width: 3px; border-left-width: 12px; }
.mp-carnet__e-h { display: flex; align-items: center; gap: 12px; }
.mp-carnet__e-h h3 { margin: 0; font-size: 21px; font-weight: 900; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-carnet__e-h small { font-weight: 700; color: var(--ink-2); font-size: 14px; }
.mp-carnet__n { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: var(--bw) solid var(--black); border-radius: 50%; background: var(--c); color: #fff; font-weight: 900; font-size: 20px; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.mp-carnet__l, .mp-carnet__exc, .mp-carnet__suite { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14.5px; }
.mp-carnet__l > div { display: grid; gap: 2px; min-width: 0; }
.mp-carnet__l small { color: var(--ink-2); font-weight: 600; }
.mp-carnet__l .ic, .mp-carnet__exc .ic, .mp-carnet__suite .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.mp-carnet__couts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 8px 10px; background: var(--paper-2, #F7EEDC); border-radius: 10px; font-size: 14px; }
.mp-carnet__couts div { display: flex; gap: 6px; }
.mp-carnet__couts dt { font-weight: 600; color: var(--ink-2); }
.mp-carnet__couts dd { margin: 0; font-weight: 900; }
.mp-carnet__note { margin: 0; padding-left: 10px; border-left: 3px solid var(--c); font-style: italic; font-size: 14.5px; }
.mp-carnet__suite { padding-top: 8px; border-top: 2px dashed rgba(24,24,28,.2); }
.mp-carnet__pied { margin: 0; text-align: center; font-weight: 800; font-size: 13px; color: var(--ink-2); }
.mp-partage .mp-interrupteurs { display: grid; gap: 4px; }
.mp-resume h2 { display: flex; align-items: center; gap: 10px; }
.mp-resume__e { margin-top: var(--sp-5); }
.mp-resume__e h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; }
.mp-resume__e h3 small { font-weight: 600; color: var(--ink-2); }
.mp-resume__e ul { margin: 6px 0 0; padding-left: 20px; }
.mp-resume__e li { margin: 4px 0; font-weight: 600; }
.mp-resume__e li small { color: var(--ink-2); }
.mp-resume__b { margin-top: var(--sp-5); font-size: 16px; }

.mp-mes { position: fixed; inset: 0; z-index: 90; }
.mp-mes__fond { position: absolute; inset: 0; background: rgba(24, 24, 28, .45); }
.mp-mes__p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; display: grid; gap: 10px; padding: 18px var(--gutter) calc(22px + env(safe-area-inset-bottom)); background: var(--cream); border-top: var(--bw) solid var(--black); border-radius: 22px 22px 0 0; }
.mp-mes__h { display: flex; align-items: center; justify-content: space-between; }
.mp-mes__h h2 { font-size: 20px; }
.mp-mien { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-md); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.mp-mien span { flex: 1; min-width: 0; }
.mp-mien b { display: block; font-weight: 900; }
.mp-mien small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mp-mien em { font-style: normal; font-size: 12px; font-weight: 900; color: var(--pink-600); }
.mp-mien.is-on { background: var(--pink-100); box-shadow: inset 0 0 0 2px var(--pink-600); }
.mp-mes__ajout { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: var(--bw) dashed var(--black); border-radius: var(--r-md); background: #fff; color: var(--ink); font-weight: 900; text-decoration: none; }
.mp-mes__suppr { justify-self: center; color: var(--ink-2); font-size: 13.5px; }
@media (min-width: 720px) {
  .mp-mes__p { left: 50%; right: auto; bottom: auto; top: 50%; width: 440px; transform: translate(-50%, -50%); border: var(--bw) solid var(--black); border-radius: 20px; box-shadow: var(--sh-lg); }
  .mp-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-grille .mp-depart { grid-column: 1 / -1; }
  .mp-pays { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pvtbar__in { max-width: none; padding: 0 24px; }
  .pvtbar__seg { flex: 0 1 360px; }
}
@media (max-width: 560px) {
  .mp-totaux { grid-template-columns: 1fr; }
  .mp-totaux .card { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .mp-chiffres b { font-size: 15px; }
}
@media print {
  .pvtbar { display: none !important; }
  body.mp-imprime #app > *:not(.mp-imprimable):not(.mp-carnet) { display: none !important; }
  body.mp-imprime .mp-carnet .mp-non-imprime { display: none !important; }
  body.mp-imprime .mp-carnet { display: block !important; }
  body.mp-imprime .mp-carnet__e, body.mp-imprime .mp-carnet__bloc, body.mp-imprime .mp-carnet__carte { break-inside: avoid; }
  body.mp-imprime .mp-carnet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.mp-imprime .mp-imprimable { display: block !important; }
  body.mp-imprime .mp-frise span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 12/11 (retours sur téléphone) */
/* onglets de Mon PVT sur 2 lignes : pas de fondu à droite (il était fait pour les onglets qui défilent) */
.mp-tabs .pays-tabs__in { -webkit-mask-image: none !important; mask-image: none !important; padding-right: 2px !important; }
/* de l'air entre les cartes de Mon PVT, et entre une carte et le petit texte qui la suit */
body.r-mon-pvt .wrap > .card + .card, body.r-mon-pvt .wrap > section + section, body.r-mon-pvt .wrap > div + section, body.r-mon-pvt .wrap > section + div.card,
body.r-mon-pvt .mp-grille + section { margin-top: var(--sp-5); }
body.r-mon-pvt .wrap > .card + .mp-aide, body.r-mon-pvt .mp-liste + .mp-aide, body.r-mon-pvt .mp-ajout + .mp-aide, body.r-mon-pvt #mpListe > .mp-aide { margin-top: var(--sp-5) !important; }
.mp-ajout { margin-bottom: 2px; }
/* pied de page plus compact ; sous lui, la couleur du pied de page (plus de bande claire en bas) */
.footer-in { padding-top: var(--sp-4); padding-bottom: var(--sp-6); font-size: 12.5px; line-height: 1.55; }
.footer p + p { margin-top: 6px; }
/* sous le pied de page (tirer la page vers le haut sur téléphone) : sa couleur, sans toucher au fond des pages longues */
.footer { box-shadow: 0 70vh 0 70vh var(--ink); }
body { overflow-x: clip; }

/* listes de Mon PVT sur téléphone (règle placée en fin de fichier : la règle de base venait après et l'annulait) */
@media (max-width: 560px) {
  .mp-liste li { flex-wrap: wrap; row-gap: 8px; }
  .mp-liste__t { flex: 1 1 calc(100% - 44px); }
  .mp-liste li > .mp-maps { margin-left: 40px; }
  .mp-liste li > .mp-modif { margin-left: auto; }
}

/* ================================================================ 13/11 : DA unifiée, lot 1 (audit) */
/* ombres : premier niveau = --sh-card (.card), posé dedans ou en grille = --sh-tile */
.bubble, details.faq, .tl-item .card, .act, .quartier, .map-frame, .mp-carte, .log-list, .sous-card { box-shadow: var(--sh-tile); }
/* rayons : cartes et tuiles 16 px, contrôles 12 px */
.bureau, .etape-collee, .mp-carnet__chiffres > div, .carte-aide, .mp-rappel, .mp-chiffres a, .ess__t, .en30 { border-radius: var(--r-card); }
.mp-opt, .mp-ctrl, .mp-case-b, select, input[type="text"], input[type="number"], input[type="date"], input[type="email"], textarea { border-radius: var(--r-ctrl); }
.flag { border-radius: 4px; }
/* titres : une seule échelle */
h1 { font-size: var(--fs-h1); }
.sec-head h2 { font-size: var(--fs-h2); }
.card-title, .mp-carnet__bloc h2 { font-size: var(--fs-card); }
/* espacements : la pile de l'accueil ne se touche plus */
.home-foot { margin-top: var(--sp-10); }
/* frise des étapes : le trait ne se coupe plus entre deux étapes */
.etapes-frise .check::after { bottom: calc(-1 * var(--sp-5)); }
.etapes-frise .check__plus { position: relative; }
.etapes-frise .check:not(:last-of-type) + .check__plus::before { content: ""; position: absolute; left: calc(var(--sp-4) + 16.5px); top: 0; bottom: 0; width: 3px; background: var(--black); opacity: .8; }

/* ================================================================ 13/11 : DA unifiée, lot 2 (composants communs) */
/* encadrés : même modèle que les bureaux (fond blanc, bord noir, liseré de couleur à gauche, ombre fine) */
.depot, details.depot, .verified, .mp-rappel, .carte-aide {
  background: #fff; border: var(--bw) solid var(--black); border-left-width: 8px; border-radius: var(--r-card); box-shadow: var(--sh-tile);
}
.verified { border-left-color: var(--turq); }
.depot { border-left-color: var(--pink); }
details.emploi, .depot.emploi { border-left-color: var(--yellow); }
.mp-rappel { border-left-color: var(--yellow); background: #fff; }
.mp-rappel--warn { border-style: solid; border-left-color: var(--yellow); background: var(--yellow-100); }
.carte-aide { border-left-color: var(--turq); }
/* chiffres clés : tous sur le modèle des tuiles « L'essentiel » */
.stat, .stats--flat .stat { background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-card); box-shadow: var(--sh-tile); padding: 12px; }
.stat .k { font-size: 11.5px; letter-spacing: .06em; }
.stat .v { font-size: 24px; }
.stat .n { font-size: 13px; font-weight: 600; }
.mp-chiffres a { background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-card); box-shadow: var(--sh-tile); padding: 10px 12px; }
.mp-chiffres small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mp-chiffres b { font-size: 20px; }
.mp-totaux .card { border-radius: var(--r-card); box-shadow: var(--sh-tile); }
.mp-carnet__chiffres small { font-size: 11.5px; letter-spacing: .06em; }
/* boutons : « Voir le détail » en bouton clair, liens officiels clairs avec picto turquoise */
.sous-tog { background: #fff; color: var(--ink); border: var(--bw-thin) solid var(--black); border-radius: var(--r-ctrl); box-shadow: var(--sh-tile); }
.lien-btn--officiel { background: #fff; color: var(--ink); }
.lien-btn--officiel .ic { color: #155E63; }
/* Comparer : tableaux en cartes, chiffres lisibles */
.cmp2-wrap, .cmp-tab-wrap { border-radius: var(--r-card); box-shadow: var(--sh-card); }
.cmp2-wrap { overflow: visible; }   /* 14/11 : l'en-tête des villes reste collé (overflow caché le cassait) */
/* blocs pliables empilés (Mon dossier…) : un espace entre eux */
details.fold + details.fold { margin-top: var(--sp-3); }
select { box-shadow: var(--sh-tile); }
/* 14/11 : champs côte à côte alignés sur la même ligne, même si un libellé passe sur 2 lignes */
.mp-saisies .mp-champ, .mp-ligne .mp-champ { justify-content: flex-end; }
/* 14/11 : le trait de la frise continue sous « C'est quoi ? » ; colonne de Comparer à la largeur des autres pages */
.etapes-frise .gloss--case { position: relative; margin-top: 0; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.etapes-frise .gloss--case:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--sp-4) + 16.5px); top: 0; bottom: 0; width: 3px; background: var(--black); opacity: .8; }
@media (min-width: 1024px) { body.r-comparer .main > .wrap, .r-comparer #app { max-width: 860px; } }
/* 14/11 : petits badges d'état (Jour 1, Sous 14 jours, Lyon 2026…) en pilule à bord noir, comme les autres pastilles */
.badge--sm { border-radius: var(--r-pill); border: 2px solid var(--black); padding: 2px 9px; }
/* 14/11 (testeurs) : bouton « Supprimer le PVT » en lien discret ; carte du carnet à taille raisonnable sur ordinateur et à l'impression */
.mp-mes__suppr { background: none; border: 0; padding: 6px; color: #A12E2E; font-weight: 800; text-decoration: underline; cursor: pointer; box-shadow: none; }
@media (min-width: 700px) { .mp-carnet__carte { max-width: 560px; } }
@media print { .mp-carnet__carte { max-width: 120mm; } .mp-carnet__pied { break-after: avoid; } .mp-carnet > :last-child { margin-bottom: 0; } }
/* 14/11 : le liseré de couleur des encadrés dessiné dans le cadre (il ne déborde plus de l'arrondi) ; espace sous « Infos vérifiées » */
.depot, details.depot, .verified, .mp-rappel, .carte-aide, .bureau, .mp-afaire, .depot.emploi, details.emploi, .mp-rappel--warn { border-left-width: var(--bw); border-left-color: var(--black); }
.verified { box-shadow: inset 8px 0 0 var(--turq), var(--sh-tile); padding-left: calc(var(--sp-4) + 8px); }
.depot { box-shadow: inset 8px 0 0 var(--pink), var(--sh-tile); padding-left: 20px; }
details.emploi, .depot.emploi { box-shadow: inset 8px 0 0 var(--yellow), var(--sh-tile); }
.mp-rappel { box-shadow: inset 8px 0 0 var(--yellow), var(--sh-tile); padding-left: 20px; }
.carte-aide { box-shadow: inset 8px 0 0 var(--turq), var(--sh-tile); }
.mp-afaire { box-shadow: inset 10px 0 0 var(--pink), var(--sh-card); padding-left: 26px; }
.bureau { box-shadow: inset 10px 0 0 var(--bc, var(--turq)), var(--sh-tile); padding-left: 24px; }
.bureau[data-bureau="paris"] { --bc: #5FB36B; } .bureau[data-bureau="strasbourg"] { --bc: #5B8FC9; } .bureau[data-bureau="lyon"] { --bc: #F5B83D; } .bureau[data-bureau="marseille"] { --bc: #A866B0; }
.bureau.is-mien { box-shadow: inset 10px 0 0 var(--bc, var(--turq)), 5px 5px 0 var(--pink); }
.verified { margin-bottom: var(--sp-6); }
.bureau[data-bureau] { border-left-color: var(--black); }

/* 14/11 relecture visuelle : Mon PVT */
/* bande de couleur des étapes : dans le cadre noir, pas en languette dehors */
.mp-etape > .card { border-left: var(--bw) solid var(--black); box-shadow: inset 8px 0 0 var(--c, var(--pink)), var(--sh-card); padding-left: calc(var(--sp-4) + 6px); }
.mp-carnet__e, .mp-carnet__e.is-install { border-left: var(--bw) solid var(--black); box-shadow: inset 10px 0 0 var(--c), var(--sh-sm); padding-left: 24px; }
.mp-afaire { border-left: var(--bw) solid var(--black); box-shadow: inset 10px 0 0 var(--pink), var(--sh-card); padding-left: calc(var(--sp-4) + 8px); }
/* frise : un numéro par segment, les noms dessous */
.mp-frise-bloc { margin: var(--sp-3) 0; }
.mp-frise-bloc .mp-frise { margin: 0; }
.mp-frise span { align-items: center; padding: 4px 2px; }
.mp-frise span b { font-size: 14px; }
.mp-frise__leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.3; }
.mp-frise__leg li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mp-frise__leg i { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--black); border-radius: 50%; font-style: normal; font-weight: 900; font-size: 12px; color: var(--black); }
.mp-frise__leg i.mp-fonce { color: #fff; }
.mp-frise__leg b { font-weight: 900; }
/* carte du carnet : légende fidèle, carte et chiffres côte à côte sur ordinateur */
.mp-rond--etapes { background: conic-gradient(#40BEC4 0 25%, #F5B83D 0 50%, #9B7BD4 0 75%, #5FB36B 0); }
.mp-carnet__haut { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) {
  .mp-carnet__haut { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .mp-carnet__haut .mp-carnet__carte { max-width: none; }
  .mp-carnet__haut .mp-carnet__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* mois par mois : axe sous les barres, une étiquette par mois, montant au-dessus */
.mp-barres { height: auto; align-items: stretch; gap: 4px; padding-top: 4px; border-bottom: 0; }
.mp-mois { display: flex; flex-direction: column; align-items: stretch; height: auto; }
.mp-mois__b { flex: none; height: 140px; border-bottom: var(--bw) solid var(--black); align-items: flex-end; }
.mp-mois__b > span { align-self: flex-end; }
.mp-mois__pile { display: flex; flex-direction: column-reverse; width: 60%; max-width: 22px; border: 2px solid var(--black); border-bottom: 0; border-radius: 4px 4px 0 0; overflow: hidden; }
.mp-mois__pile i { display: block; min-height: 2px; }
.mp-mois__b .mp-rev { width: 30%; max-width: 12px; border: 2px solid var(--black); border-bottom: 0; border-radius: 4px 4px 0 0; }
.mp-mois small { margin: 0; transform: none; text-align: center; }
.mp-mois__t { padding-top: 4px; font-size: 11px; }
.mp-mois__v { font-size: 10px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; align-self: end; padding-bottom: 2px; }
@media (max-width: 699px) { .mp-mois__v:not(.is-max) { visibility: hidden; } .mp-mois__t { font-size: 10px; } }
.mp-legende { margin-top: 12px; }
.mp-legende__n { color: var(--ink-2); font-weight: 600; }
/* budget : « comment c'est calculé » replié, autres dépenses sur une ligne */
.mp-calcul { margin: 0 0 var(--sp-3); }
.mp-calcul summary { cursor: pointer; font-size: 14px; font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mp-calcul[open] summary { margin-bottom: 6px; }
.mp-lignes--autres { margin: var(--sp-3) 0 0; }
.mp-lignes--autres li { align-items: center; }
.mp-form--ligne { grid-template-columns: minmax(0, 1fr) 120px auto; }
.mp-form--ligne .mp-champ:first-child { grid-column: auto; }
@media (max-width: 479px) { .mp-form--ligne { grid-template-columns: minmax(0, 1fr) 96px; } .mp-form--ligne .btn { grid-column: 1 / -1; } }
/* champs de notes : même police et même bord que les autres champs */
.mp-champ textarea { width: 100%; min-height: 70px; padding: 10px; border: var(--bw-thin) solid var(--black); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); resize: vertical; }
.mp-champ textarea:focus-visible { outline: 3px solid var(--turq, #40BEC4); outline-offset: 1px; }
.mp-carnet .mp-carnet__notes { display: none; }
body.mp-imprime .mp-carnet .mp-carnet__notes { display: block; }
/* espacements */
.mp-itin-note { margin-top: var(--sp-3); }
.mp-itin-actions .btn { min-height: 52px; }
.mp-sous-carte { margin-top: var(--sp-3); }
/* barre d'avancement vide : cachée */
.mp-barre-av--etape.is-vide { display: none; }
/* cases à cocher de l'étape : celles du guide */
.mp-coche input { appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0; border: var(--bw) solid var(--black); border-radius: 7px; background: #fff; cursor: pointer; }
.mp-coche input::after { content: ""; width: 11px; height: 6px; border: solid var(--black); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); opacity: 0; }
.mp-coche input:checked { background: var(--turq-100); }
.mp-coche input:checked::after { opacity: 1; }
.mp-coche input:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
/* trajet : « Changer » à côté du texte */
.mp-trajet-choix summary { justify-content: flex-start; }
/* ordinateur : pas de listes ni de boutons étirés sur toute la largeur */
@media (min-width: 1024px) {
  .mp-champ--ville, .mp-exc .mp-champ { max-width: 420px; }
  .mp-afaire .btn, .mp-trajet .mp-champ--n { width: auto; max-width: 420px; }
  .mp-trajet .mp-champ--n span { white-space: nowrap; }
}
/* aperçu du carnet au tableau de bord : carte assez grande pour lire les noms */
.mp-carnet-apercu { grid-template-columns: 1fr; }
@media (min-width: 700px) { .mp-carnet-apercu { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
@media (max-width: 420px) { .mp-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* Activités et Lieux gardés : 2 colonnes égales sous le budget */

/* 14/11 relecture de la vente : le bouton d'achat tient sur une ligne, pleine largeur sur téléphone */
@media (max-width: 560px) { .row--achat { flex-direction: column; align-items: stretch; } .row--achat .btn { width: 100%; justify-content: center; } }
.row--achat .btn { white-space: nowrap; }

/* 14/11 vente : aperçus du guide, offre avec image, « Avant d'acheter », encadré du résultat du quiz */
.apercu { margin: 0; display: grid; gap: 8px; }
.apercu img { display: block; width: 100%; height: auto; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-card, 16px); box-shadow: var(--sh-tile); }
.apercu figcaption { display: grid; gap: 1px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.apercu figcaption b { color: var(--ink); font-size: 14px; }
.apercus { display: grid; gap: var(--sp-5, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); margin-bottom: var(--sp-6, 24px); align-items: start; }
.offre--ap { display: grid; gap: var(--sp-5, 20px); }
.offre--ap .apercu { order: -1; }
@media (min-width: 900px) {
  .offre--ap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .offre--ap .apercu { order: 0; position: sticky; top: 140px; }
  .offre--ap.offre--compact { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
}
.offre__chiffres { margin-top: 4px; }
.avant-achat { margin-top: var(--sp-6, 24px); }
.avant-achat .ticks li { margin-bottom: 10px; }
.res-offre { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: start; margin: var(--sp-4, 16px) 0 var(--sp-3, 12px); padding: 12px 14px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-ctrl, 12px); box-shadow: var(--sh-tile); }
.res-offre > .ic { width: 20px; height: 20px; margin-top: 2px; }
.res-offre p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.res-offre .btn { grid-column: 2; justify-self: start; }
@media (max-width: 560px) { .res-offre .btn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; } }
@media (min-width: 561px) { .row--achat .btn, .offre .row .btn { flex: 0 1 auto; width: auto; min-width: 240px; } }
.offre__txt > .row { margin-top: var(--sp-4); }
.offre__txt > p.small { margin-top: var(--sp-2); }
@media (min-width: 1100px) { .apercus { grid-template-columns: 1fr 1fr; } .apercus .apercu:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; } }

/* 14/11 (utilisateur : « footer encore super grand ») : pied de page compact, 2 lignes courtes, sans grande marge sous le texte */
.footer .footer-in { padding: 10px 76px 12px var(--gutter); font-size: 12px; line-height: 1.45; }
.footer p + p { margin-top: 3px; }
.footer .footer-liens { font-size: 11.5px; }
.footer .footer-liens a { font-weight: 700; }
@media (min-width: 1024px) { .footer .footer-in { padding: 10px 100px 12px var(--gutter); } }
body.mp-feuille-ouverte .footer { padding-bottom: 60vh; }

/* 14/11 (testeurs) : Australie, compteur des jours de travail spécifié (2e et 3e visa) */
.mp-sw { display: grid; gap: var(--sp-3); }
.mp-sw .card-title { margin-bottom: 0; }
.mp-sw__tot { display: grid; gap: 6px; padding: 12px 14px; border: var(--bw-thin) solid var(--black); border-radius: 12px; background: var(--yellow-100); }
.mp-sw__tot p { margin: 0; font-weight: 800; font-size: 15px; }
.mp-sw__tot p b { font-size: 26px; font-weight: 900; }
.mp-sw__tot small { color: var(--ink-2); font-weight: 700; font-size: 13px; }
.mp-sw__l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.mp-sw__p { display: grid; gap: 8px; padding: 10px 12px 12px; border: 2px dashed var(--line); border-radius: 12px; }
.mp-sw__h { display: flex; align-items: center; gap: 10px; }
.mp-sw__h b { font-weight: 900; }
.mp-sw__h span { margin-left: auto; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.mp-sw__g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 10px; }
@media (min-width: 440px) { .mp-sw__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-sw__g .mp-champ:nth-child(n+3) { grid-column: 1 / -1; } }
.mp-sw__ajout { justify-self: start; }
.mp-sw__regles > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; cursor: pointer; list-style: none; }
.mp-sw__regles > summary::-webkit-details-marker { display: none; }
.mp-sw__regles > summary .ic { width: 18px; height: 18px; flex: none; }
.mp-sw__regles > summary .chev { margin-left: auto; transition: transform .2s var(--ease); }
.mp-sw__regles[open] > summary .chev { transform: rotate(180deg); }
.mp-sw__regles ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.mp-sw .sources { margin-top: 0; }
.mp-sw--resume .small { font-weight: 800; }
.mp-sw-aide[hidden] { display: none; }
.mp-sw-aide { margin-top: -4px; }

/* 15/11 : « Budget prévu » ne coupe plus son montant dans une colonne étroite (le 1er chiffre prend la ligne entière) */
.mp-chiffres b { white-space: nowrap; font-size: clamp(16px, 2.2vw, 20px); }
@media (min-width: 1024px) and (max-width: 1240px) { .mp-chiffres a:first-child { grid-column: 1 / -1; } }