/* Mano — prototype Soleil (laboratoire)
   Couche de design posée sur styles.css : la direction Soleil v4 appliquée à
   toute l'application. Les écrans qui ne sont pas encore redessinés héritent
   des jetons (couleurs, polices) et restent utilisables. */

:root {
  --ink: #17120E;
  --paper: #FFF8F1;
  --card: #FFFFFF;
  --cardrow: #FFFFFF;
  --terra: #F2742F;
  --terra-dark: #B8440E;
  --terra-deep: #A63C0A;
  --terra-text: #B8440E;   /* l'orange quand il est écrit : 4,5:1 au moins sur tous les fonds clairs */
  --peach: #FFE6D3;
  --apricot: #FFD9B8;
  --green: #1B7F50;
  --green-tint: #DDF3E6;
  --amber: #EFA21F;
  --amber-text: #9A6414;
  --amber-tint: #FDEBC7;
  --muted: #7A6A5C;
  --gray: #A3968A;
  --chipbg: #FFF2E6;
  --border: rgba(23, 18, 14, .13);
  --hair: rgba(23, 18, 14, .07);
  --c-manger: #F2742F; --c-laver: #2FA46F; --c-dormir: #3A2E26; --c-soins: #EFA21F;
  --c-poser: #A77B4F; --c-essentiel: #1F8A6B; --c-autres: #9C7A5A; --c-etudiants: #C9552C;
  --grad: radial-gradient(120% 90% at 12% -6%, #FFD9B8 0%, rgba(255, 217, 184, 0) 48%), linear-gradient(158deg, #FFB37A 0%, #F2742F 56%, #D4602D 100%);
  --font-d: 'Clash Display', 'General Sans', system-ui, sans-serif;
  --shadow-soft: 0 10px 24px -16px rgba(150, 62, 18, .45);
  --shadow-card: 0 0 0 1px var(--hair);
  --shadow-terra: 0 14px 30px -12px rgba(242, 116, 47, .55);
  --shadow-sheet: 0 -24px 50px -30px rgba(150, 62, 18, .45);
  --shadow-marker: 0 8px 18px -8px rgba(120, 50, 10, .55);
  --elev: 0 22px 44px -22px rgba(150, 62, 18, .5);
  --fab-bg: #17120E;
  --sb-ink: #17120E;
  --map-bg: #F2EADF;
  --map-road: #FFFFFF;
  --map-block: #E6DBCB;
  --map-park: #DDE4D0;
}
body { background: #17120E; color: var(--ink); }
.phone { background: var(--paper); box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 0 10px #17120E, 0 0 0 12px #3A2E26; }
.screen { background: var(--paper); }
/* La carte réelle prend la lumière de Soleil (le filtre ne touche que le fond, pas les repères) */
#map-canvas canvas { filter: sepia(.08) saturate(1.05) brightness(1.02); }
.phone[data-amb="night"] #map-canvas canvas, .phone.mode-night #map-canvas canvas { filter: sepia(.55) saturate(.6) brightness(.9) hue-rotate(-12deg); }
.c-manger { --mc: var(--c-manger); } .c-mangersoir { --mc: var(--c-manger); } .c-laver { --mc: var(--c-laver); } .c-frais { --mc: var(--c-laver); }
.c-dormir { --mc: var(--c-dormir); } .c-chaud { --mc: var(--c-dormir); } .c-soins { --mc: var(--c-soins); } .c-poser { --mc: var(--c-poser); }
.c-essentiel { --mc: var(--c-essentiel); } .c-eau { --mc: var(--c-essentiel); } .c-autres { --mc: var(--c-autres); } .c-etudiants { --mc: var(--c-etudiants); }

/* ---------- Nuit explicite (« Mode cette nuit ») : l'interface passe en encre ---------- */

/* ---------- Boutons ---------- */
.btn { height: 56px; font-size: 17px; font-weight: 700; }
.btn.primary { background: var(--terra); color: #17120E; box-shadow: var(--shadow-terra); }
.btn.primary svg { color: #17120E; fill: #17120E; }
.btn.outline { background: var(--card); border: 0; box-shadow: 0 0 0 1.5px var(--border); color: var(--ink); }
.btn.neutral { background: var(--card); border: 0; box-shadow: 0 0 0 1.5px var(--border); color: var(--ink); }
.btn.ghost { color: var(--muted); font-weight: 600; }

/* ---------- Haut de la carte : champ de recherche + chips ---------- */
.m-search {
  display: flex; align-items: center; gap: 12px; height: 54px; margin: 10px 16px 0; padding: 0 8px 0 18px;
  border-radius: 100px; background: var(--card); color: var(--muted); font-size: 16.5px; font-weight: 500;
  box-shadow: 0 0 0 1px var(--hair), 0 14px 30px -16px rgba(150, 62, 18, .45); text-align: left; width: calc(100% - 32px);
}
.m-search > svg { color: var(--ink); flex: none; }
.m-search .ms-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-search .ms-filter {
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.m-search .ms-filter .fbadge { position: absolute; top: -4px; right: -4px; }
.chips-row { padding: 10px 16px 8px; }
.chip { height: 42px; padding: 0 16px; font-size: 14.5px; font-weight: 700; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); }
.chip.on { background: #17120E; color: #FFF6EC; box-shadow: 0 10px 24px -14px rgba(23, 18, 14, .6); }
.weather-pill { background: var(--card); box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); }
.weather-pill.dark { background: #17120E; color: #FFF6EC; }
.alert-band, .night-band { background: var(--card); box-shadow: 0 0 0 1px var(--hair), var(--elev); border-radius: 24px; }
.alert-band.dark { background: #17120E; }
.night-band .nb-ico { border-radius: 50%; background: var(--grad); color: #fff; }
.night-band .nb-cta, .night-band .nb-quit, .alert-band .ab-cta { color: var(--terra-dark); }
.call115-band { background: var(--grad); box-shadow: var(--elev); border-radius: 24px; padding: 14px 18px; }
.call115-band .cb-t { font-family: var(--font-d); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Boutons flottants ---------- */
.locate-btn { width: 48px; height: 48px; background: var(--card); box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); }
.fab115 { background: var(--fab-bg); box-shadow: 0 16px 34px -14px rgba(23, 18, 14, .6); }
.fab115 .n { font-family: var(--font-d); font-size: 20px; }

/* ---------- Bottom sheet ---------- */
.sheet { background: var(--card); border-radius: 34px 34px 0 0; box-shadow: var(--shadow-sheet); }
.sheet-grab > div { background: var(--border); }
.sheet-title { padding: 2px 20px 12px; font-size: 20px; font-weight: 600; line-height: 1.2; display: flex; flex-direction: column; }
.sheet-title .sh-num {
  font-family: var(--font-d); font-weight: 600; font-size: 56px; line-height: .86; letter-spacing: -.04em; margin-bottom: 8px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; width: max-content; max-width: 100%;
}
.sheet-title .sh-sub { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--amber-text); }

/* Carte lieu */
.place-card, .screen-list .place-card { background: var(--card); box-shadow: var(--shadow-card); border-radius: 24px; padding: 14px; }
.place-card .pc-ico, .place-card.poser .pc-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--mc, var(--terra)); color: #fff; }
.place-card .pc-ico svg { color: #fff; }
.place-card .pc-name { font-size: 17px; font-weight: 700; }
.pc-call { width: 44px; height: 44px; margin-top: 2px; background: #17120E; color: #FFF6EC; }
.pc-call:active { background: #3A2E26; }
/* Le contour des étiquettes est tracé À L'INTÉRIEUR (inset) : leur rangée coupe ce qui dépasse
   (.pc-tags, overflow: hidden, pour le « +N »), et un contour extérieur y était rogné en haut,
   en bas et à gauche de la première étiquette. */
.tag { font-size: 14px; font-weight: 600; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); border-radius: 10px; padding: 4px 10px; color: var(--ink); }
.tag.tag-more { box-shadow: none; background: var(--chipbg); }
.phone.hc .tag { box-shadow: none; }
/* Un peu d'air entre le statut (« Ouvert · ferme à 18h ») et les étiquettes */
.place-card .pc-tags { margin-top: 4px; }
.pc-dist { font-weight: 600; }

/* ---------- Repères sur la carte : couleur de la catégorie ---------- */
.marker { border: 3px solid #fff; box-shadow: var(--shadow-marker); background: var(--mc, var(--terra)); }
.marker.open { background: var(--mc, var(--terra)); }
.marker.soon { background: var(--amber); }
.marker.closed { background: var(--gray); }
.marker.poser { background: var(--c-poser); }
.user-dot::before { background: rgba(23, 18, 14, .14); }
.user-dot::after { background: #17120E; }

/* ---------- Barre d'onglets : pilule encre, libellés, actif mandarine ---------- */
:root { --tabbar-h: 68px; }
.tabbar {
  height: var(--tabbar-h); padding: 8px; gap: 4px; width: calc(100% - 28px); border: 0;
  background: #17120E; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 16px 34px -14px rgba(23, 18, 14, .55);
}
.tabbar .tab { flex-direction: column; gap: 3px; color: rgba(255, 246, 236, .6); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.tabbar .tab svg { width: 20px; height: 20px; }
.tabbar .tab.on { background: var(--terra); color: #17120E; }
.tabbar .tab.on svg { transform: none; }
.phone.hc .tabbar { background: #17120E; border: 0; }
.phone.hc .tabbar .tab.on { color: #17120E; }

/* ---------- Accueil ---------- */
.acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: calc(var(--top-inset) + 18px) 20px 0; }
.acc-date { display: block; font-size: 15px; font-weight: 500; color: var(--muted); }
.acc-greet { margin: 2px 0 0; font-family: var(--font-d); font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.acc-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #FDF6EF; box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); }
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.acc-body { margin: 0; border-radius: 0; background: none; box-shadow: none; padding: 0 20px var(--tabbar-clear); display: flex; flex-direction: column; }
.acc-body .search-entry, .acc-body .chip, .acc-body .sortbtn { border: 0; }
.acc-body .search-entry { box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); }
.acc-body .chip { box-shadow: 0 0 0 1px var(--hair); } .acc-body .chip.on { box-shadow: none; }
.acc-body .sortbtn { box-shadow: 0 0 0 1px var(--border); }
.actus-row { scroll-snap-type: none; }
.acc-hero {
  display: flex; align-items: stretch; gap: 14px; width: 100%; margin-top: 18px; padding: 20px; border-radius: 28px;
  background: var(--grad); color: #fff; box-shadow: var(--elev); text-align: left;
}
.ah-num { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ah-num b { font-family: var(--font-d); font-weight: 600; font-size: 48px; line-height: .9; letter-spacing: -.04em; color: #fff; }
.ah-num span { display: block; font-size: 15.5px; line-height: 1.3; margin-top: 8px; font-weight: 600; color: #fff; }
.ah-num small { display: block; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.ah-map { flex: none; width: 118px; height: 150px; border-radius: 18px; overflow: hidden; position: relative; border: 3px solid rgba(255, 255, 255, .7); background: var(--map-bg); }
.ah-map svg { width: 100%; height: 100%; display: block; }
.ah-map .ob-mk { position: absolute; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; background: var(--mc, var(--terra)); }
.ah-map .ob-mk svg { width: 13px; height: 13px; }
.ah-map .ob-mk.p1 { left: 18%; top: 30%; } .ah-map .ob-mk.p2 { left: 58%; top: 58%; } .ah-map .ob-mk.p3 { left: 30%; top: 72%; }
.ah-map i { position: absolute; left: 50%; top: 48%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #17120E; border: 3px solid #fff; box-shadow: 0 0 0 7px rgba(23, 18, 14, .14); }
.acc-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.qa-it { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 0; text-align: center; }
.qa-it .tile { width: 58px; height: 58px; border-radius: 50%; background: var(--mc, var(--terra)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -12px rgba(120, 50, 10, .5); }
.qa-it .tile svg { width: 24px; height: 24px; }
.qa-it b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.qa-it small { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: -4px; }
.acc-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 26px 0 10px; }
.acc-sec h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.acc-sec span { font-size: 14px; font-weight: 600; color: var(--muted); }
.wx-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px 14px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-card); text-align: left; }
.wx-card .wx-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wx-card .wx-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wx-card .wx-tx b { font-size: 16px; font-weight: 700; color: var(--ink); }
.wx-card .wx-tx span { font-size: 14px; color: var(--muted); }
.soon-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; margin: 0 -20px; padding: 2px 20px 8px; scrollbar-width: none; }
.soon-row::-webkit-scrollbar { display: none; }
.soon-card { flex: none; display: flex; align-items: center; gap: 12px; width: 262px; padding: 12px 14px 12px 12px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-card); text-align: left; }
.soon-card .sc-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--chipbg); color: var(--mc, var(--terra-dark)); display: flex; align-items: center; justify-content: center; }
.soon-card .sc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.soon-card .sc-tx b { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soon-card .sc-tx .when { font-size: 13.5px; font-weight: 600; color: var(--amber-text); }
.actus-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; margin: 0 -20px; padding: 2px 20px 10px; scrollbar-width: none; }
.actus-row::-webkit-scrollbar { display: none; }
.actu-card {
  flex: none; width: 300px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; padding: 18px 56px 18px 18px; border-radius: 26px;
  background: #17120E !important; color: #FFF6EC; text-align: left; position: relative; overflow: hidden; box-shadow: none;
}
.actu-card .actu-tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #FFB37A; }
.actu-card .actu-title { font-size: 18px; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; }
.actu-card .actu-txt { font-size: 14px; color: rgba(255, 246, 236, .78); line-height: 1.35; }
.actu-card .actu-lieu { font-size: 13px; color: rgba(255, 246, 236, .78); display: inline-flex; align-items: center; gap: 4px; }
.actu-card .actu-ic { position: absolute; right: -22px; bottom: -22px; opacity: .9; }
.actu-card .actu-ic svg { width: 96px; height: 96px; color: rgba(242, 116, 47, .22); fill: rgba(242, 116, 47, .22); }
.obs-band { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 22px; background: var(--chipbg); text-align: left; }
.obs-band .ob-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--terra-dark); display: flex; align-items: center; justify-content: center; }
.obs-band .ob-tx { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--muted); }
.obs-band .ob-tx b { font-size: 16px; font-weight: 700; color: var(--ink); }
.search-entry { display: flex; align-items: center; gap: 12px; width: 100%; height: 54px; padding: 0 18px; border-radius: 100px; background: var(--card); box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); color: var(--muted); font-size: 16.5px; font-weight: 500; text-align: left; }
.search-entry svg { color: var(--ink); }
.screen-list .chips-row { margin: 0 -20px; padding: 12px 20px 4px; }
.list-toggle-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 12px; }
.sortbtn { background: var(--card); box-shadow: 0 0 0 1px var(--border); font-weight: 600; color: var(--ink); }
.list-cards { display: flex; flex-direction: column; gap: 10px; }
.d-sec-label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }

/* ---------- Fiche lieu ---------- */
.detail-sheet { background: var(--card); border-radius: 34px 34px 0 0; top: 56px; }
.detail-sheet .sheet-grab { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: 12px 0 6px; }
.detail-sheet .sheet-grab > div { background: rgba(255, 255, 255, .7); }
.detail-body { padding: 0 0 calc(24px + var(--bot-inset)); gap: 0; }
.d-band { flex: none; position: relative; height: 164px; background: var(--grad); overflow: hidden; }
.d-band .d-band-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; }
.d-band .d-band-map path { stroke: #5A2A0A; fill: none; stroke-linecap: round; }
.d-band .d-band-map rect { fill: #5A2A0A; }
.d-band .d-pin {
  position: absolute; left: 50%; top: 58px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: #fff; color: var(--mc, var(--terra)); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(120, 50, 10, .6);
}
.d-band .d-pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; margin-left: -7px; background: #fff; border-radius: 2px; transform: rotate(45deg); z-index: -1; }
.d-band .d-pin::before { content: ''; position: absolute; left: 50%; bottom: -16px; width: 22px; height: 7px; margin-left: -11px; border-radius: 50%; background: rgba(120, 50, 10, .22); filter: blur(2px); }
.d-band .d-pin svg { width: 22px; height: 22px; }
.d-band .d-close { position: absolute; right: 16px; top: 22px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #17120E; display: flex; align-items: center; justify-content: center; }
.d-main { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 0; }
.d-cat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--terra-dark); }
.d-cat svg { color: var(--terra-text); }
.d-name { font-family: var(--font-d); font-size: 34px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.d-strip { gap: 8px 12px; }
.d-pill { padding: 0; background: none !important; font-size: 16px; }
.d-pill.open { color: var(--green); } .d-pill.soon { color: var(--amber-text); } .d-pill.closed { color: var(--muted); }
.d-dist { font-size: 15.5px; }
.d-banner { border-radius: 18px; background: var(--chipbg); }
.d-banner.soon { background: var(--amber-tint); }
.qacts { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0 2px; }
.qact { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); text-align: center; }
.qact i { width: 60px; height: 60px; border-radius: 50%; background: var(--chipbg); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--hair); transition: transform .15s var(--ease); }
.qact:active i { transform: scale(.9); }
.qact.primary i { background: var(--terra); color: #17120E; box-shadow: none; }
.qact.on i { background: #17120E; color: #FFF6EC; }
.qact i svg { width: 22px; height: 22px; }
.d-sec { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.d-access { flex-direction: column; gap: 10px; }
.d-access-chip { background: none; padding: 0; font-size: 16.5px; font-weight: 600; color: var(--ink); gap: 12px; }
.d-access-chip svg { flex: none; width: 40px; height: 40px; padding: 11px; border-radius: 50%; background: var(--green-tint); color: var(--green); box-sizing: border-box; }
.d-services { gap: 8px; }
.d-services .tag { background: var(--chipbg); box-shadow: none; border-radius: 12px; font-size: 15px; padding: 9px 14px; }
.amen-grid { gap: 8px; }
.amen { border-radius: 18px; background: var(--chipbg); }
.amen.hi { background: var(--peach); } .amen.hi svg { color: var(--terra-dark); }
.d-note { border-radius: 20px; background: var(--chipbg); }
.detail-body .d-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px; font-size: 15.5px; }
.detail-body .d-note::before { content: ''; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #FDF6EF url('assets/castor-face.webp') center 30%/cover no-repeat; box-shadow: 0 0 0 1px var(--hair); }
.hours { gap: 4px; }
.hrow { border-radius: 12px; font-size: 15.5px; }
.hrow.today, .hrow.next { background: var(--peach); } .hrow.today .t, .hrow.next .t { color: var(--terra-deep); }
.hrow.today.closedday { background: var(--chipbg); }
.d-addr { padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-card); }
.d-addr .addr-link { color: var(--terra-dark); }
.helped-btn { border-radius: 100px; }
.d-foot button, .d-foot a { color: var(--muted); min-height: 40px; padding: 8px 0; }
.detail-body > .btn.ghost { margin: 0 20px; }

/* ---------- Mes droits ---------- */
.dr-page { padding: calc(var(--top-inset) + 14px) 20px 0 !important; gap: 0 !important; }
.dr-page > *, .screen-quiz .page-scroll > *, .menu-page > * { flex: none; }
/* Écran d'attente du tout premier chargement (remplacé par le premier rendu de app.js) */
.boot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--paper); font-family: var(--font-d); font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.boot img { width: 64px; height: 64px; }
/* Un écran qui défile ne doit jamais écraser ses blocs (boutons réduits à la hauteur du texte quand le contenu dépasse) */
.page-scroll > * { flex-shrink: 0; }
.d-title { margin: 0; font-family: var(--font-d); font-size: 42px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.d-sub { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: var(--muted); }
.page-head .pt { font-family: var(--font-d); font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.dr-hero {
  position: relative; flex-direction: row; align-items: center; gap: 12px; margin-top: 20px; padding: 20px 0 20px 20px; min-height: 176px;
  border-radius: 28px; background: var(--grad); box-shadow: var(--elev); overflow: hidden;
}
.dr-hero-txt { gap: 6px; z-index: 1; }
.dr-hero-k { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.dr-hero-t { font-family: var(--font-d); font-size: 27px; font-weight: 600; letter-spacing: -.03em; line-height: 1.02; color: #fff; }
.dr-hero-cta { margin-top: 10px; height: 46px; padding: 0 20px; gap: 6px; background: #fff; color: #17120E; font-size: 15.5px; font-weight: 700; box-shadow: 0 10px 24px -12px rgba(120, 50, 10, .6); }
.dr-hero-img { flex: none; width: 116px; height: 128px; border-radius: 34px; overflow: hidden; background: #FDF6EF; transform: rotate(-4deg); margin-right: 18px; box-shadow: 0 16px 34px -14px rgba(90, 30, 5, .55); }
.dr-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.dr-path { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 6px 0; gap: 4px; }
.dr-path span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; }
.dr-path span b { width: 30px; height: 30px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--border); color: var(--ink); font-size: 13px; display: flex; align-items: center; justify-content: center; }
.dr-path i { flex: none; width: 22px; height: 1px; background: var(--border); margin-top: 15px; }
.dr-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.dr-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: 22px; text-align: left; min-height: 150px; }
.dr-tool.peach { background: var(--peach); } .dr-tool.mint { background: var(--green-tint); }
.dr-tool > span { width: 44px; height: 44px; border-radius: 14px; background: var(--card); color: var(--terra-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.dr-tool.mint > span { color: var(--green); }
.dr-tool b { font-size: 16.5px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.dr-tool small { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.dr-sec { margin: 26px 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.dr-list { background: var(--card); border-radius: 22px; box-shadow: var(--shadow-card); overflow: hidden; }
.fiche-row, .fiche-row.urgent { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 13px 16px; border: 0; border-radius: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; }
/* Dans la liste groupée, c'est le groupe qui porte le contour : celui de chaque ligne, hérité des
   cartes, était coupé sur les côtés et doublait les filets de séparation. */
.dr-list .fiche-row { box-shadow: none; }
.fiche-row + .fiche-row { border-top: 1px solid var(--hair); }
.fiche-row .fr-ic { flex: none; width: 24px; color: var(--terra-text); display: flex; }
.fiche-row .fr-t { flex: 1; }
.fiche-row > svg { color: var(--gray); }
.fiche-row.urgent .fr-ic { color: var(--terra-deep); }
.dr-note { margin: 14px 0 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Le test des aides ---------- */
.screen-quiz .page-head { gap: 14px; }
.screen-quiz .page-head .back { box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); }
.q-prog { flex: 1; display: flex; gap: 4px; }
.q-prog i { flex: 1; height: 5px; border-radius: 100px; background: var(--border); }
.q-prog i.on { background: var(--terra); }
.q-n { font-size: 14px; font-weight: 700; color: var(--muted); flex: none; }
.q-ask { display: flex; align-items: flex-start; gap: 12px; }
.q-ask .q-face { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #FDF6EF; box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); }
.q-ask .q-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.q-ask .q-bub { flex: 1; padding: 16px 18px; border-radius: 24px 24px 24px 8px; background: var(--card); box-shadow: var(--shadow-card); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.quiz-opt { min-height: 64px; padding: 14px 18px; border-radius: 22px; background: var(--card); border: 0; box-shadow: var(--shadow-card); font-size: 17px; }
.quiz-opt:active { box-shadow: 0 0 0 2px var(--terra); }
.screen-quiz .btn.ghost { align-self: center; height: 48px; padding: 0 20px; border-radius: 100px; box-shadow: 0 0 0 1.5px var(--border); color: var(--ink); font-size: 15px; }
.quiz-progress { background: var(--border); }
.q-priv { margin-top: auto; padding: 20px 10px calc(var(--bot-inset) + 28px); text-align: center; font-size: 14px; line-height: 1.4; color: var(--muted); }
.idees-tag { color: var(--terra-dark); }

/* ---------- Bienvenue (onboarding) ---------- */
.screen-ob { background: var(--paper) !important; }
.screen-ob::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: var(--grad); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }
.screen-ob .ob-top { position: relative; z-index: 2; color: #fff; }
.screen-ob .ob-top .brand-symbol-sm { filter: brightness(0) invert(1); }
.screen-ob .ob-skip { color: rgba(255, 255, 255, .9); font-weight: 600; }
.ob-slide { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; z-index: 1; }
.ob-slide .ob-hero { order: -1; flex: none; height: 38%; align-items: center; overflow: visible; }
.ob-hero-img { max-height: 100%; width: auto; max-width: 70%; border-radius: 48px; background: #FDF6EF; object-fit: cover; object-position: 50% 15%; transform: rotate(-3deg); box-shadow: 0 24px 44px -20px rgba(90, 30, 5, .6), 0 0 0 5px rgba(255, 255, 255, .28); }
.ob-face { width: min(200px, 26vh); border-radius: 50%; background: #FDF6EF; box-shadow: 0 24px 44px -20px rgba(90, 30, 5, .6), 0 0 0 5px rgba(255, 255, 255, .28); }
/* La mini-carte de la présentation tient dans sa zone, quelle que soit la hauteur de l'écran :
   sa hauteur vient de la zone, sa largeur suit (rapport 4:3). */
.ob-map { height: 100%; width: auto; aspect-ratio: 4 / 3; max-width: 86%; margin: 0 auto; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 44px -20px rgba(90, 30, 5, .6), 0 0 0 5px rgba(255, 255, 255, .28); position: relative; }
.ob-map svg { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.ob-slide .ob-hero { padding: 6px 0 10px; box-sizing: border-box; }
.ob-face { max-height: 100%; width: auto; aspect-ratio: 1; }
.ob-copy2 { text-align: left; padding: 22px 26px 0; gap: 10px; }
.ob-title { font-family: var(--font-d); font-size: clamp(32px, 5.4vh, 40px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.ob-title em { color: var(--terra-dark); }
.ob-sub { font-size: clamp(15px, 2.2vh, 17px); }
.ob-panel { background: transparent; gap: 12px; }
.ob-dots span { background: var(--border); } .ob-dots span.on { background: var(--terra); }
.ob-trust { font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .screen-ob.anim-in .ob-hero-img { animation: ns-hero-pop .6s var(--ease) both; animation-delay: .1s; } }
@keyframes ns-hero-pop { from { transform: translateY(24px) rotate(-3deg); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }

/* ---------- Bienvenue : la langue se choisit sous le bandeau ---------- */
.screen-lang { background: var(--paper); }
.lang-band { flex: none; position: relative; height: 38%; min-height: 250px; background: var(--grad); display: flex; align-items: center; justify-content: center; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent); }
.lang-brand { position: absolute; left: 22px; top: calc(var(--top-inset) + 10px); display: flex; align-items: center; gap: 8px; color: #fff; font-size: 17px; font-weight: 700; }
.lang-brand img { width: 26px; height: 26px; filter: brightness(0) invert(1); }
.lang-sticker { display: block; width: 46%; max-width: 190px; aspect-ratio: 1; margin-top: 18px; border-radius: 26%; overflow: hidden; background: #FDF6EF; transform: rotate(-3deg); box-shadow: 0 24px 44px -20px rgba(90, 30, 5, .6), 0 0 0 5px rgba(255, 255, 255, .28); }
.lang-sticker img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.lang-copy { flex: none; padding: 0 24px; display: flex; flex-direction: column; gap: 8px; }
.lang-copy .ob-title { font-size: clamp(26px, 4.4vh, 32px); }
.lang-copy .ob-sub { font-size: 15px; line-height: 1.4; }
.lang-ask { flex: none; padding: 16px 24px 0; }
.lang-ask .q-face { width: 46px; height: 46px; }
.lang-ask .q-bub.sm { font-size: 16px; padding: 12px 16px; border-radius: 20px 20px 20px 6px; }
.lang-head { display: none; }
.lang-list { flex: 1; min-height: 0; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 12px 24px 0; overflow-y: auto; }
.lang-item { min-height: 46px; padding: 0 18px; border-radius: 100px; background: var(--card); border: 0; box-shadow: 0 0 0 1.5px var(--border); font-size: 15.5px; font-weight: 700; color: var(--ink); gap: 10px; }
.lang-item.on { background: #17120E; color: #FFF6EC; box-shadow: none; }
.lang-item .lk { display: none !important; }
.lang-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 20px calc(22px + var(--bot-inset)); }
.lang-foot .ob-trust { text-align: center; font-size: 12.5px; line-height: 1.4; }

/* ---------- Menu ---------- */
.screen-menu .page-head { padding: calc(var(--top-inset) + 14px) 20px 6px; }
.menu-page { padding: 8px 20px 0 !important; gap: 12px !important; }
.menu-group { flex: none; background: var(--card); border-radius: 22px; box-shadow: var(--shadow-card); overflow: hidden; }
.menu-group .menu-item { min-height: 58px; padding: 10px 16px; border-radius: 0; gap: 14px; }
.menu-group .menu-item + .menu-item { border-top: 1px solid var(--hair); }
.menu-item .mi-ico { width: 28px; height: 28px; border-radius: 0; background: none; color: var(--terra-text); }
.menu-item .mi-t { font-size: 16.5px; }
.menu-item .mi-s { font-size: 14px; }
.menu-item:active { background: var(--chipbg); }
.switch.on { background: var(--terra); }
/* Zone tactile élargie de l'interrupteur (52×32 → 64×48) sans changer son dessin */
.switch::before { content: ''; position: absolute; inset: -8px -6px; }
/* Le champ de recherche se touche sur toute la hauteur de la barre */
.search-bar input { height: 100%; }
/* Les liens « voir sur la carte » passent à la ligne au lieu de déborder (noms longs, ukrainien, roumain) */
.aid-link { max-width: 100%; text-align: start; white-space: normal; }
/* « Annuler » est long en ukrainien et roumain : pas de marge latérale, la barre se resserre */
.search-cancel { padding: 10px 0; }
.search-bar { min-width: 0; }
/* Verdict « Bien vu » : vert plus profond, lisible sur le fond vert pâle (5,5:1) */
.vf-verdict.good, .vf-verdict.good svg { color: #156A44; }
.menu-page .d-sec-label { padding: 8px 4px 0 !important; }

/* ---------- Modales ---------- */
.modal-sheet { background: var(--card); border-radius: 34px 34px 0 0; }
.fchip { background: var(--card); box-shadow: 0 0 0 1px var(--border); font-weight: 600; }
.fchip.on { background: #17120E; color: #FFF6EC; box-shadow: none; }
.checkbox.on { background: var(--terra); border-color: var(--terra); color: #17120E; }
.seg { background: var(--chipbg); }
.seg > button.on { background: var(--card); box-shadow: 0 0 0 1px var(--hair); }
.block-card { border: 0; box-shadow: 0 0 0 1px var(--border); background: var(--card); border-radius: 20px; }
.block-card.on { background: #17120E; color: #FFF6EC; box-shadow: none; }
.block-card.on svg { color: var(--terra-text); }
.block-banner { background: #17120E; color: #FFF6EC; border-radius: 100px; }
.fbadge { background: var(--terra); color: #17120E; }

/* ---------- Urgence ---------- */
.screen-urgence { background: #17120E; }
.u-close { background: rgba(255, 246, 236, .12); color: #FFF6EC; }
.u-intro .t { font-family: var(--font-d); font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1.02; color: #FFF6EC; }
.u-intro .s { color: #B3A296; }
.u-cards { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
.u-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 18px 20px; border-radius: 24px; background: #231B15; color: #FFF6EC; }
.u-card:first-child { background: var(--grad); color: #fff; box-shadow: var(--elev); }
.u-card .num { grid-row: 1 / 3; font-family: var(--font-d); font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.u-card .lb { font-size: 17px; font-weight: 700; }
.u-card .sb { font-size: 14px; opacity: .8; }

/* ---------- Mode nuit explicite : surfaces ---------- */

/* ---------- Pop-ups, guide, divers ---------- */
.toast { background: #17120E; color: #FFF6EC; }
.skl { background: var(--chipbg); }


/* =====================================================================
   Corrections après l'audit du 1er octobre
   ===================================================================== */

/* ---------- Colonnes : plus rien ne dépasse à droite ---------- */
.wx-card, .obs-band, .search-entry { width: 100%; margin-left: 0; margin-right: 0; }
.wx-card { margin-bottom: 0; }
.obs-band { margin-bottom: 0; }

/* ---------- Texte sur le dégradé : blanc, partout ----------
   (un essai en encre, pour le contraste, n'a pas été retenu : « c'était beaucoup
   plus beau en blanc ». Le mode gros contraste reste la voie d'accès lisible.)
   La marque et « Passer », tout en haut de la bienvenue, sont posés sur la partie
   la plus claire du dégradé : une ombre de la teinte du fond les en détache. */
.screen-ob .ob-top, .lang-brand { text-shadow: 0 1px 10px rgba(166, 60, 10, .38); }
.screen-ob .ob-top .brand-symbol-sm, .lang-brand img { filter: brightness(0) invert(1) drop-shadow(0 1px 5px rgba(166, 60, 10, .34)); }
.screen-ob .ob-skip { color: #fff; }
.phone.hc .screen-ob .ob-top, .phone.hc .screen-ob .ob-skip, .phone.hc .lang-brand { color: #17120E; text-shadow: none; }
.phone.hc .screen-ob .ob-top .brand-symbol-sm, .phone.hc .lang-brand img { filter: brightness(0); }

/* ---------- Panneau de la carte : le grand chiffre en dégradé, au repos comme tiré ----------
   (choix de Bryan le 1er octobre, sur planche A/B/C : « grand chiffre, comme avant ».)
   Seule la position repliée, où il ne reste que la poignée et une ligne, passe en compact. */
.sheet-title .sh-num { transition: font-size .25s var(--ease); }
.sheet[data-pos="mini"] .sheet-title { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding: 0 20px 10px; }
.sheet[data-pos="mini"] .sheet-title .sh-num { font-size: 30px; letter-spacing: -.03em; margin-bottom: 0; }
.sheet[data-pos="mini"] .sheet-title .sh-lab { font-size: 19px; }
.sheet[data-pos="mini"] .sheet-title .sh-sub { width: 100%; margin-top: 2px; }

/* ---------- Listes : les noms entiers, plus de pictos muets ---------- */
.place-card .pc-name { -webkit-line-clamp: 3; }
.soon-card { align-items: flex-start; }
.soon-card .sc-ic { margin-top: 1px; }
.soon-card .sc-tx b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }

/* ---------- « Autres » : une pastille neutre, la couleur reste aux vraies catégories ---------- */
:root { --c-autres: #7D6F63; }
.place-card.c-autres .pc-ico { background: var(--chipbg); color: var(--ink); box-shadow: 0 0 0 1px var(--hair); }
.place-card.c-autres .pc-ico svg { color: var(--ink); }
.soon-card.c-autres .sc-ic { color: var(--ink); }

/* ---------- Mes droits : la ligne urgente se voit ---------- */
.fiche-row.urgent { background: var(--peach); font-weight: 700; }
.fiche-row.urgent .fr-ic { color: var(--terra-deep); }
.fiche-row .fr-urgent { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 4px 9px; border-radius: 100px; background: #17120E; color: #FFF6EC; }
.fiche-row.urgent > svg { color: var(--terra-deep); }

/* ---------- Barre d'onglets : toujours détachée de ce qui défile dessous ---------- */
.tabbar { box-shadow: 0 0 0 1px rgba(255, 246, 236, .18), 0 16px 34px -14px rgba(23, 18, 14, .55); }
.screen-list::after, .screen-droits::after, .screen-menu::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-clear) + 30px);
  background: linear-gradient(to top, var(--paper) 44%, transparent); pointer-events: none; z-index: 40;
}
.with-tabbar .sheet::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-clear) + 16px);
  background: linear-gradient(to top, var(--card) 44%, transparent); pointer-events: none; z-index: 2;
}

/* ---------- Actualités : des cartes de même hauteur ---------- */
.actu-card { width: 290px; height: 196px; min-height: 0; padding: 18px 54px 18px 18px; }
.actu-card .actu-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.actu-card .actu-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.actu-card .actu-lieu { margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Fiche : les horaires du jour, tout de suite ---------- */
.d-today { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15.5px; color: var(--ink); }
.d-today b { font-weight: 700; }
.d-today span { color: var(--muted); }

/* ---------- Cibles tactiles : 44 px au moins ---------- */
.m-search { height: 56px; padding-right: 6px; }
.m-search .ms-filter { width: 44px; height: 44px; }
.d-band .d-close { width: 44px; height: 44px; top: 20px; right: 14px; }
.acc-avatar { padding: 0; border: 0; cursor: pointer; }

/* ---------- Petits écrans ---------- */
.weather-pill { height: auto; min-height: 36px; padding: 7px 16px; border-radius: 18px; line-height: 1.25; text-align: left; max-width: 100%; }
.weather-pill svg { flex: none; }

/* ---------- Écrans secondaires ---------- */
.crr-perimetre { border: 0; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-card); padding: 16px 18px; }
.crr-hero-ico { background: var(--peach); color: var(--terra-text); border-radius: 50%; }
.crr-hero-t { font-family: var(--font-d); font-weight: 600; letter-spacing: -.02em; }
.consent-box { border-radius: 22px; }
.search-bar, .search-input-wrap { border-radius: 100px; }
.screen-search .page-head, .screen-search { background: var(--paper); }
.aid-card, .res-card { border-radius: 22px; box-shadow: var(--shadow-card); }

/* ---------- Mode gros contraste : il vaut aussi pour les nouveaux écrans ---------- */
.phone.hc { --terra: #A63C0A; --terra-text: #7A2B06; --terra-dark: #7A2B06; --terra-deep: #7A2B06; --muted: #3B362F; --hair: #17120E; --border: #17120E; --chipbg: #FFFFFF; --peach: #FFFFFF; }
.phone.hc .btn.primary { color: #fff; }
.phone.hc .btn.primary svg { color: #fff; fill: #fff; }
.phone.hc .acc-hero, .phone.hc .dr-hero, .phone.hc .call115-band, .phone.hc .d-band, .phone.hc .u-card:first-child { background: #17120E; box-shadow: none; }
.phone.hc .acc-hero, .phone.hc .ah-num b, .phone.hc .ah-num span, .phone.hc .ah-num small, .phone.hc .dr-hero-t, .phone.hc .dr-hero-k,
.phone.hc .call115-band, .phone.hc .call115-band .cb-t, .phone.hc .call115-band .cb-s, .phone.hc .u-card:first-child { color: #fff; }
.phone.hc .call115-band svg { fill: #fff; color: #fff; }
.phone.hc .ah-map { border-color: #fff; }
.phone.hc .qa-it .tile { background: #17120E; box-shadow: none; }
.phone.hc .qa-it small, .phone.hc .acc-date, .phone.hc .d-sub { color: #17120E; }
.phone.hc .soon-card, .phone.hc .wx-card, .phone.hc .dr-tool, .phone.hc .dr-list, .phone.hc .menu-group, .phone.hc .quiz-opt, .phone.hc .q-bub,
.phone.hc .m-search, .phone.hc .obs-band, .phone.hc .search-entry, .phone.hc .qact i, .phone.hc .d-addr, .phone.hc .lang-item, .phone.hc .acc-avatar,
.phone.hc .dr-path span b, .phone.hc .sortbtn { box-shadow: 0 0 0 2px #17120E; }
.phone.hc .dr-tool.peach, .phone.hc .dr-tool.mint { background: #fff; }
.phone.hc .sheet-title .sh-num { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #17120E; }
.phone.hc .tabbar .tab { color: #fff; }
.phone.hc .tabbar .tab.on { background: #fff; color: #17120E; }
.phone.hc .qact.primary i { background: #17120E; color: #fff; }
.phone.hc .place-card .pc-ico, .phone.hc .place-card.c-autres .pc-ico { background: #17120E; color: #fff; box-shadow: none; }
.phone.hc .place-card .pc-ico svg, .phone.hc .place-card.c-autres .pc-ico svg { color: #fff; }
.phone.hc .marker, .phone.hc .marker.open { background: #17120E; }
.phone.hc .marker.soon { background: #7A2B06; }
.phone.hc .fiche-row.urgent { background: #17120E; color: #fff; }
.phone.hc .fiche-row.urgent .fr-ic, .phone.hc .fiche-row.urgent > svg { color: #fff; }
.phone.hc .fiche-row.urgent .fr-urgent { background: #fff; color: #17120E; }
.phone.hc .actu-card .actu-tag { color: #fff; }
.phone.hc .sheet-title .sh-sub { color: #17120E; }

/* ---------- Arabe : les nouveaux composants dans le bon sens ---------- */
[dir="rtl"] .ah-map, [dir="rtl"] .d-band-map { direction: ltr; }
[dir="rtl"] .dr-hero { padding: 20px 20px 20px 0; }
[dir="rtl"] .dr-hero-img { margin-right: 0; margin-left: 18px; transform: rotate(4deg); }
[dir="rtl"] .q-ask .q-bub { border-radius: 24px 24px 8px 24px; }
[dir="rtl"] .lang-ask .q-bub.sm { border-radius: 20px 20px 6px 20px; }
[dir="rtl"] .lang-brand { left: auto; right: 22px; }
[dir="rtl"] .d-band .d-close { right: auto; left: 14px; }
[dir="rtl"] .actu-card { padding: 18px 18px 18px 54px; text-align: right; }
[dir="rtl"] .actu-card .actu-ic { right: auto; left: -22px; }
[dir="rtl"] .fiche-row > svg, [dir="rtl"] .dr-hero-cta svg, [dir="rtl"] .mi-chev svg, [dir="rtl"] .addr-link svg, [dir="rtl"] .wx-card > svg, [dir="rtl"] .lang-foot .btn svg { transform: scaleX(-1); }
[dir="rtl"] .sh-num, [dir="rtl"] .ah-num b, [dir="rtl"] .acc-date, [dir="rtl"] .q-n, [dir="rtl"] .d-today span, [dir="rtl"] .fab115 .n { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .dr-path span { direction: rtl; }
[dir="rtl"] .acc-greet, [dir="rtl"] .d-title, [dir="rtl"] .d-name, [dir="rtl"] .ob-title, [dir="rtl"] .dr-hero-t, [dir="rtl"] .page-head .pt { letter-spacing: 0; line-height: 1.25; }
[dir="rtl"] .ob-copy2, [dir="rtl"] .lang-copy { text-align: right; }

/* ---------- Onglets : la largeur suit le libellé (« Drepturile mele » en roumain) ---------- */
.tabbar .tab { flex: 1 1 auto; min-width: 62px; padding: 0 9px; }
.tabbar .tab .tab-lb { white-space: nowrap; }

/* ---------- iPhone réel : vu dans Safari (simulateur) ---------- */
/* Le bouton du guide : encre sur mandarine, comme tous les boutons */
.tour-primary { color: #17120E; }
.tour-primary svg { color: #17120E; fill: #17120E; }
/* Le haut des bandeaux se raccorde à la couleur de la barre d'état (theme-color #FFC08E) */
.lang-band::before, .screen-ob::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 54px; pointer-events: none;
  background: linear-gradient(to bottom, #FFC08E, rgba(255, 192, 142, 0)); z-index: 1;
}
.lang-brand, .lang-sticker { z-index: 2; }
.lang-sticker { position: relative; }
/* Écrans courts (Safari garde ses barres : ~660 px utiles sur un iPhone de 844) */
@media (max-height: 740px) {
  .lang-band { height: 30%; min-height: 176px; }
  .lang-sticker { width: 40%; max-width: 150px; margin-top: 14px; }
  .lang-copy .ob-title { font-size: 27px; }
  .lang-copy .ob-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .lang-ask { padding-top: 12px; }
  .lang-item { min-height: 42px; padding: 0 16px; font-size: 15px; }
  .lang-foot { padding-bottom: calc(14px + var(--bot-inset)); gap: 8px; }
  .screen-ob::before { height: 40%; }
  .ob-slide .ob-hero { height: 32%; }
}
@media (max-height: 600px) {
  .lang-band { height: 24%; min-height: 128px; }
  .lang-sticker { max-width: 104px; margin-top: 10px; }
  .lang-copy .ob-sub { display: none; }
  .lang-copy .ob-title { font-size: 24px; }
  .lang-foot .ob-trust { display: none; }
}
/* Plus aucun texte blanc sur mandarine, y compris dans les écrans secondaires */
.speak-btn.on, .cal-day.sel, .dem-seg-opt.on, .camp-chip.on, .crr-bandeau.terra, .pop-step .n { color: #17120E; }
.speak-btn.on svg, .crr-bandeau.terra svg { color: #17120E; fill: #17120E; }


/* =====================================================================
   Retours de Bryan sur iPhone (1er octobre) : moins de noir, moins de gras,
   cartes en pleine largeur, chiffre non rogné, urgences lisibles, compteurs
   ===================================================================== */

/* Sur téléphone, le fond de page est crème : Safari teinte la zone de la barre d'état d'après lui */
@media (max-width: 500px), (max-height: 920px) and (max-width: 700px) {
  html, body, .phone { background-color: var(--bandeau, var(--paper)); }
}

/* ---------- Cartes de lieux : toute la largeur, comme dans l'application actuelle ---------- */
.acc-body { padding-left: 16px; padding-right: 16px; }
.acc-sec { padding-left: 4px; padding-right: 4px; }
.list-cards { padding: 4px 0 0; }
.soon-row, .actus-row { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.screen-list .chips-row { margin: 0 -16px; padding: 12px 16px 4px; }
.list-toggle-row { padding: 6px 0 12px; }

/* ---------- Le chiffre du panneau n'est plus rogné ----------
   Un texte peint en dégradé est coupé à sa boîte : il lui faut de l'air autour. */
.sheet-title .sh-num { line-height: 1.08; padding: .04em .08em 0; margin-left: -.08em; margin-bottom: 2px; }
.sheet[data-pos="mini"] .sheet-title .sh-num { line-height: 1.15; padding-top: 0; margin-bottom: 0; }

/* ---------- Moins de noir ---------- */
/* Barre d'onglets claire ; seul l'onglet actif porte la couleur */
.tabbar {
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 0 0 1px var(--hair), 0 14px 30px -14px rgba(150, 62, 18, .42);
}
.tabbar .tab { color: var(--muted); }
.tabbar .tab.on { background: var(--terra); color: #17120E; }
.chip.on { background: var(--terra); color: #17120E; box-shadow: 0 10px 22px -12px rgba(242, 116, 47, .7); }
.acc-body .chip.on { box-shadow: 0 10px 22px -12px rgba(242, 116, 47, .7); }
.pc-call { background: var(--peach); color: var(--terra-text); }
.pc-call:active { background: var(--apricot); }
.m-search .ms-filter { background: var(--peach); color: var(--terra-deep); }
.lang-item.on, .fchip.on { background: var(--terra); color: #17120E; }
.block-card.on { background: var(--terra); color: #17120E; }
.block-card.on svg { color: #17120E; }
.block-banner { background: var(--peach); color: var(--ink); }
.block-banner svg { color: var(--terra-text); }
.fr-urgent, .fiche-row .fr-urgent { background: var(--terra-text); color: #fff; }
.qact.on i { background: var(--terra); color: #17120E; }
.share-op .so-ico[style*="141210"] { background: var(--peach) !important; color: var(--terra-deep) !important; }
.weather-pill.dark { background: var(--card); color: var(--ink); }
.weather-pill.dark svg { color: var(--terra-text) !important; }
.alert-band.dark { background: var(--card); }
.alert-band.dark .ab-t { color: var(--ink); }
.alert-band.dark .ab-s { color: var(--muted); }
.alert-band.dark .ab-cta { color: var(--terra-text); }
.alert-band.dark .ab-x { color: var(--gray); }
/* « Quitter » du mode nuit : au moins 40 px de large */
.night-band .nb-quit { min-width: 40px; }
/* Bandeau de nuit fin : une ligne et demie, la carte reste visible */
.night-band.slim { padding: 8px 10px 8px 10px; gap: 10px; border-radius: 18px; }
.night-band.slim .nb-ico { width: 32px; height: 32px; border-radius: 10px; }
.night-band.slim .nb-t { font-size: 15px; line-height: 1.2; }
.night-band.slim .nb-sub { font-size: 13px; line-height: 1.3; }
.night-band.slim .nb-quit { padding: 8px 6px; font-size: 14px; }
/* Bandeau météo : zones tactiles d'au moins 36 px sans changer l'aspect */
.alert-band .ab-x { padding: 11px; margin: -7px -7px -7px -3px; }
.alert-band .ab-cta { min-height: 36px; padding: 0 4px; }
.alert-band.dark .ab-ico { background: var(--chipbg) !important; color: var(--ink) !important; }
/* Actualités : pêche, plus d'encre */
.actu-card { background: var(--peach) !important; color: var(--ink); }
.actu-card .actu-tag { color: var(--terra-text); }
.actu-card .actu-txt, .actu-card .actu-lieu { color: #6B5B4E; }
.actu-card .actu-lieu svg { color: #6B5B4E; fill: #6B5B4E; }
.actu-card .actu-ic svg { color: rgba(242, 116, 47, .2); fill: rgba(242, 116, 47, .2); }
/* La nuit, le 115 reste le bouton le plus visible de la carte */
.phone[data-amb="night"] .fab115, .phone.mode-night .fab115 { background: var(--terra); box-shadow: var(--shadow-terra); }
.phone[data-amb="night"] .fab115 .n, .phone.mode-night .fab115 .n { color: #17120E; }
.phone[data-amb="night"] .fab115 svg, .phone.mode-night .fab115 svg { color: #17120E; fill: #17120E; }

/* ---------- Urgences : un écran clair, lisible d'un coup d'œil ---------- */
.screen-urgence { background: var(--paper); }
.u-close { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), var(--shadow-soft); }
.u-intro .t { color: var(--ink); }
.u-intro .s { color: var(--muted); }
.u-card { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }
.u-card .num, .u-card .lb { color: var(--ink); }
.u-card .sb { color: var(--muted); opacity: 1; }
.u-card:first-child { background: var(--grad); box-shadow: var(--elev); }
.u-card:first-child .num, .u-card:first-child .lb { color: #fff; }
.u-card:first-child .sb { color: rgba(255, 255, 255, .9); }

/* ---------- Moins de gras : 600 au plus hors des grands titres ---------- */
.btn, .dr-hero-cta, .call115-band .cb-t { font-weight: 600; }
.place-card .pc-name, .qa-it b, .soon-card .sc-tx b, .wx-card .wx-tx b, .obs-band .ob-tx b, .dr-tool b, .d-today b,
.acc-sec h2, .dr-sec, .d-sec, .actu-card .actu-title, .q-ask .q-bub, .lang-item, .qact, .d-cat, .fiche-row.urgent,
.sheet-title .sh-lab, .quiz-opt, .menu-item .mi-t, .m-title, .dr-card-t { font-weight: 600; }
.tag, .chip, .pc-dist, .fiche-row, .d-access-chip, .acc-sec span, .soon-card .sc-tx .when, .sortbtn { font-weight: 500; }
.chip.on, .tabbar .tab { font-weight: 600; }
.actu-card .actu-tag { font-weight: 600; }
.pc-dist { color: var(--muted); }

.phone.hc .tabbar { background: #17120E; }

/* Dans le panneau blanc de la carte, les cartes de lieux sont pleines (crème), sans filet :
   le même principe que l'application actuelle — la carte contraste avec ce qui la porte. */
.sheet .place-card { background: var(--paper); box-shadow: none; }
.sheet .place-card .tag { background: #fff; }
.sheet .place-card.c-autres .pc-ico { background: #fff; }

/* Contraste des petits textes gris (audit complet du 1er octobre) */
:root { --gray-text: #7A6A5C; }
.aid-row .aid-lb { color: var(--gray-text); }
#app span[style*="color:var(--gray)"], #app p[style*="color:var(--gray)"] { color: var(--gray-text) !important; }
.dr-tool small { color: #6B5B4E; }

/* ---------- Gros contraste : remis d'aplomb après le passage au clair ---------- */
.phone.hc .u-card { box-shadow: 0 0 0 2px #17120E; }
.phone.hc .u-card:first-child .num, .phone.hc .u-card:first-child .lb, .phone.hc .u-card:first-child .sb { color: #fff; opacity: 1; }
.phone.hc .chip.on, .phone.hc .lang-item.on, .phone.hc .fchip.on, .phone.hc .block-card.on, .phone.hc .acc-body .chip.on { background: #17120E; color: #fff; box-shadow: none; border-color: #17120E; }
.phone.hc .block-card.on svg { color: #fff; }
.phone.hc .qact.on i { background: #17120E; color: #fff; }
.phone.hc .actu-card { box-shadow: 0 0 0 2px #17120E; }
.phone.hc .actu-card .actu-tag { color: #17120E; }
.phone.hc .actu-card .actu-txt, .phone.hc .actu-card .actu-lieu { color: #3B362F; }
.phone.hc .pc-call, .phone.hc .m-search .ms-filter { background: #fff; color: #17120E; box-shadow: 0 0 0 2px #17120E; }
.phone.hc .fr-urgent, .phone.hc .fiche-row .fr-urgent { background: #fff; color: #17120E; }
.phone.hc .tour-primary, .phone.hc .speak-btn.on, .phone.hc .cal-day.sel, .phone.hc .dem-seg-opt.on, .phone.hc .camp-chip.on, .phone.hc .crr-bandeau.terra, .phone.hc .pop-step .n, .phone.hc .fbadge { color: #fff; }
.phone.hc .tour-primary svg, .phone.hc .speak-btn.on svg, .phone.hc .crr-bandeau.terra svg { color: #fff; fill: #fff; }
.phone.hc .tabbar .tab.on { background: #fff; color: #17120E; }
.phone.hc .sheet .place-card { background: #fff; }
.phone.hc[data-amb="night"] .fab115 .n, .phone.hc.mode-night .fab115 .n { color: #fff; }
.phone.hc[data-amb="night"] .fab115 svg, .phone.hc.mode-night .fab115 svg { color: #fff; fill: #fff; }
.phone.hc .d-pill.open { color: var(--green); }
.phone.hc .d-pill.open .dot { display: inline-block; }


/* =====================================================================
   Pop-ups : un voile léger, une carte en verre, le castor en autocollant
   (retours de Bryan, 1er octobre : le flou coupait trop l'application)
   ===================================================================== */
:root {
  --verre: rgba(255, 252, 248, .76);
  --verre-flou: blur(26px) saturate(1.8);
  --verre-bord: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .42), 0 0 0 1px rgba(23, 18, 14, .07);
}
/* Le voile est un calque à part (::before) : il garde l'app lisible derrière, et
   la carte en verre peut ainsi flouter ce qu'elle recouvre vraiment. */
.pop-ov {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; transition: none;
  align-items: flex-end; padding: 16px 14px calc(18px + var(--bot-inset)); pointer-events: none;
}
.pop-ov::before {
  content: ''; position: absolute; inset: 0; background: rgba(40, 24, 12, .26);
  opacity: 0; transition: opacity .28s var(--ease);
}
.pop-ov.show { pointer-events: auto; }
.pop-ov.show::before { opacity: 1; }
.pop-card {
  position: relative; max-width: 380px; margin: 0 auto; overflow: visible; max-height: none;
  background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border-radius: 36px; box-shadow: var(--verre-bord), 0 26px 60px -20px rgba(90, 40, 10, .5);
  opacity: 0; transform: translateY(46px) scale(.97);
  transition: transform .46s cubic-bezier(.2, .9, .25, 1.06), opacity .22s var(--ease);
}
.pop-ov.show .pop-card { opacity: 1; transform: none; }
.pop-hero { height: 76px; background: none !important; overflow: visible; border-radius: 0; align-items: flex-end; justify-content: center; position: relative; }
.pop-hero::before {
  content: ''; position: absolute; left: 50%; bottom: -34px; width: 230px; height: 150px; margin-left: -115px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 116, 47, .34), rgba(242, 116, 47, 0)); pointer-events: none;
}
.pop-sticker {
  position: relative; display: block; width: 132px; height: 132px; border-radius: 36px; overflow: hidden; background: #FDF6EF;
  transform: rotate(-4deg); box-shadow: 0 0 0 5px rgba(255, 255, 255, .78), 0 20px 36px -16px rgba(90, 30, 5, .6);
}
.pop-sticker img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.pop-sticker.k-tilt img, .pop-sticker.k-face img, .pop-sticker.k-joy img, .pop-sticker.k-expressions img { object-position: 50% 50%; }
.pop-sticker.k-hero img { object-position: 50% 12%; }
.pop-sticker.k-telephone img { object-position: 50% 34%; }
.pop-sticker.app { transform: rotate(-5deg); background: none; }
.pop-sticker.app img { object-fit: contain; object-position: 50% 50%; }
.pop-badge {
  position: absolute; left: 50%; bottom: -8px; margin-left: 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--terra); color: #17120E; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(255, 252, 248, .9), 0 8px 16px -6px rgba(90, 30, 5, .5);
}
.pop-ico { margin-bottom: 0; width: 84px; height: 84px; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 16px 30px -14px rgba(90, 30, 5, .5); }
.pop-body { gap: 8px; padding: 26px 22px calc(16px); }
.pop-t { font-family: var(--font-d); font-size: 25px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.pop-s { font-size: 15.5px; line-height: 1.45; color: #5E5046; }
.pop-cta { margin-top: 12px; height: 54px; }
.pop-later { height: 44px; color: #5E5046; font-weight: 600; }
.pop-steps { gap: 8px; margin-top: 8px; }
.pop-step { background: rgba(255, 255, 255, .7); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
/* Quand la transparence est déconseillée (réglage du téléphone) ou non gérée : une carte pleine */
@media (prefers-reduced-transparency: reduce) {
  .pop-card { background: #FFFCF8; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pop-ov::before { background: rgba(40, 24, 12, .36); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pop-card { background: #FFFCF8; }
  .pop-ov::before { background: rgba(40, 24, 12, .34); }
}
.phone.hc .pop-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 3px #17120E; }
.phone.hc .pop-ov::before { background: rgba(23, 18, 14, .5); }
.phone.hc .pop-s, .phone.hc .pop-later { color: #17120E; }
@media (prefers-reduced-motion: reduce) { .pop-ov::before, .pop-card { transition: none; } }

/* Le guide : écran d'ouverture et de fin, même langage que les pop-ups */
.tour-card { background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); border-radius: 28px; box-shadow: var(--verre-bord), 0 22px 56px -18px rgba(40, 20, 6, .55); }
.tour-card::before { background: rgba(255, 252, 248, .92); }
.tour-card .pop-hero { height: 70px; }
.tour-card .pop-sticker { width: 120px; height: 120px; border-radius: 32px; }
.tour-ov.no-target .tour-card { overflow: visible; border-radius: 34px; }
.tour-ov.no-target .tour-body { padding-top: 24px; }
.tour-ov.no-target .tour-t { font-family: var(--font-d); font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.tour-t { font-weight: 600; }
.tour-s { color: #5E5046; }
.tour-step { color: var(--terra-text); font-weight: 600; }
.tour-ring { border-color: var(--terra); }
.tour-ring::after { box-shadow: 0 0 0 6px rgba(242, 116, 47, .26); }
.tour-back { background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--hair); }
.phone.hc .tour-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { .tour-card { background: #FFFCF8; -webkit-backdrop-filter: none; backdrop-filter: none; } }


/* =====================================================================
   Le verre, façon Apple : uniquement sur ce qui flotte au-dessus du contenu
   (barre d'onglets, champ de recherche de la carte, pop-ups). Jamais sur le
   contenu lui-même — c'est la règle des « matériaux » des recommandations
   d'interface d'Apple. Trois éléments au plus par écran : le flou coûte cher
   aux petits téléphones.
   ===================================================================== */
.tabbar {
  background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-bord), 0 14px 30px -14px rgba(150, 62, 18, .42);
}
.m-search {
  background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-bord), 0 14px 30px -16px rgba(150, 62, 18, .45);
}
/* Sur la carte de nuit, le verre s'épaissit : le texte doit rester net sur fond sombre */
.phone[data-amb="night"] .tabbar, .phone.mode-night .tabbar,
.phone[data-amb="night"] .m-search, .phone.mode-night .m-search { background: rgba(255, 252, 248, .9); }
@media (prefers-reduced-transparency: reduce) {
  .tabbar, .m-search { background: #FFFCF8; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar, .m-search { background: rgba(255, 252, 248, .97); }
}
/* Téléphones modestes — classe « eco » posée par app.js quand le navigateur annonce moins de
   4 Go de mémoire. Le filtre de couleur sur toute la carte et le flou du verre sont recalculés
   à chaque image : sur ces appareils, on les retire. Mêmes formes, mêmes couleurs, en aplats. */
html.eco #map-canvas canvas, html.eco .phone[data-amb="night"] #map-canvas canvas, html.eco .phone.mode-night #map-canvas canvas { filter: none; }
html.eco .phone:not(.hc) .tabbar, html.eco .phone:not(.hc) .m-search { background: #FFFCF8; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.eco .pop-card, html.eco .tour-card { background: #FFFCF8; -webkit-backdrop-filter: none; backdrop-filter: none; }
.phone.hc .tabbar { background: #17120E; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.phone.hc .m-search { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 2px #17120E; }
/* Sur le verre, le texte secondaire est un cran plus foncé : il doit rester net quel que soit ce qui passe dessous */
.tabbar .tab, .m-search, .m-search .ms-txt, .tour-ghost, .pop-later { color: #6B5B4E; }
.tabbar .tab.on { color: #17120E; }
.aid-badge.probable { color: #166B43; }
.aid-badge.possible { color: #875810; }
/* Le guide : sur ses écrans d'ouverture et de fin (sans cible à éclairer), le voile s'allège comme celui des pop-ups */
.tour-ov.no-target .tour-mask { opacity: .5; }


/* =====================================================================
   La « bande » sous les filtres de la carte
   Ce n'était pas un dégradé voulu : les ombres des boutons étaient coupées
   net par leur rangée (une rangée qui défile en largeur coupe aussi en
   hauteur). Les ombres sont resserrées pour tenir entièrement dans la
   rangée : plus rien n'est coupé, les boutons flottent sur la carte.
   (La rangée garde ses gestes : on n'y touche pas.)
   ===================================================================== */
.chips-row { padding-bottom: 12px; margin-bottom: -4px; }
.screen-list .chips-row { padding-bottom: 12px; margin-bottom: -8px; }
.chip { box-shadow: 0 0 0 1px var(--hair), 0 3px 7px -3px rgba(120, 50, 10, .32); }
.chip.on, .acc-body .chip.on { box-shadow: 0 4px 9px -4px rgba(242, 116, 47, .7); }
.acc-body .chip { box-shadow: 0 0 0 1px var(--hair); }
.phone[data-amb="night"] .chip, .phone.mode-night .chip { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 3px 7px -3px rgba(0, 0, 0, .5); }
.phone[data-amb="night"] .chip.on, .phone.mode-night .chip.on { box-shadow: 0 4px 9px -4px rgba(0, 0, 0, .55); }
.phone.hc .chip, .phone.hc .chip.on { box-shadow: none; }

/* ---------- Espace association : barre de recherche des structures ----------
   Même tenue que la barre de la carte (pilule, ombre chaude, loupe dans une
   pastille abricot) ; la pastille passe en orange et un halo pêche entoure la
   barre quand on écrit ; croix d'effacement dès qu'il y a du texte. */
.pro-search {
  display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 8px 0 9px;
  border-radius: 100px; background: var(--card);
  box-shadow: 0 0 0 1px var(--hair), 0 14px 30px -16px rgba(150, 62, 18, .45);
  transition: box-shadow .18s ease;
}
.pro-search:focus-within { box-shadow: 0 0 0 2px var(--terra), 0 0 0 7px var(--peach), 0 14px 30px -16px rgba(150, 62, 18, .45); }
.pro-search .ps-ico {
  flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--apricot); color: var(--terra-text);
  display: flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease;
}
.pro-search:focus-within .ps-ico { background: var(--terra); color: #fff; }
.pro-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font: inherit; font-size: 17px; font-weight: 500; color: var(--ink); -webkit-appearance: none; appearance: none;
}
.pro-search input::placeholder { color: var(--muted); font-weight: 500; opacity: 1; }
.pro-search input::-webkit-search-cancel-button, .pro-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.pro-search .ps-clear {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--peach); color: var(--terra-deep);
  display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer;
}
.pro-search .ps-clear[hidden] { display: none; }
.pro-search .ps-clear:active { transform: scale(.94); }
.ps-count { font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 0 6px; margin: -4px 0 -2px; letter-spacing: .01em; }
.ps-count b { color: var(--terra-text); font-weight: 700; }
.phone.hc .pro-search { background: #fff; box-shadow: 0 0 0 2px #17120E; }
.phone.hc .pro-search:focus-within { box-shadow: 0 0 0 3px #17120E; }
.phone.hc .pro-search .ps-ico { background: #17120E; color: #fff; }
@media (prefers-reduced-motion: reduce) { .pro-search, .pro-search .ps-ico { transition: none; } }

/* ---------- Bureau : codes d'invitation ---------- */
.ins-invitation { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-variant-numeric: tabular-nums; }
.ins-invitation::placeholder { text-transform: none; letter-spacing: .04em; font-weight: 500; }
.inv-nouveau { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--peach); }
.inv-nouveau[hidden] { display: none; }
.inv-code { font-size: 26px; font-weight: 700; letter-spacing: .12em; color: var(--terra-deep); font-variant-numeric: tabular-nums; text-align: center; padding: 6px 0 2px; user-select: all; -webkit-user-select: all; }
.inv-etat.dispo { color: var(--green); font-weight: 600; }
.inv-etat.ok { color: var(--muted); }
.inv-etat.exp { color: var(--terra-text); }