/* Beth Umtha — interface applicative, reprise de la maquette `apercu.html`.

   Ce n'est pas une page web habillée aux couleurs de la maquette : c'est sa structure.
   En-tête compact en lapis, contenu défilant, barre d'onglets fixe en bas. L'écran
   d'invitation garde son fond lapis pleine hauteur, comme dans la maquette.

   Les classes portent les noms de la maquette (hdr, scroll, nav, inv-head, enter…) pour
   qu'on puisse comparer les deux à l'œil sans traduire. */

:root {
  color-scheme: light;
  --lapis: #14315C;
  --lapis-bright: #22588A;
  --gold: #C39A3B;
  --gold-soft: #D8B968;
  --clay: #A8492C;
  --stone: #ECE4D2;
  --stone-deep: #E1D6BE;
  --card: #F8F3E7;
  --ink: #221E16;
  --ink-soft: #5C5344;
  --line: rgba(34, 30, 22, .10);
  --display: "Fraunces", ui-serif, Georgia, serif;
  --ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --syr: "Noto Sans Syriac", "Segoe UI Historic", serif;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

html, body { height: 100%; }
body {
  margin: 0; background: var(--stone); color: var(--ink);
  font: 400 15.5px/1.6 var(--ui); -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* L'application occupe l'écran, comme dans la maquette : en-tête figé, contenu qui
     défile, onglets collés en bas. Pas de défilement de la page entière. */
  display: flex; flex-direction: column; overflow: hidden;
}
/* Sur grand écran, l'application se centre dans une colonne de largeur de téléphone
   plutôt que de s'étirer : elle est conçue pour le pouce, pas pour la souris. */
@media (min-width: 620px) {
  body { max-width: 430px; margin: 0 auto; box-shadow: 0 0 60px -20px rgba(20,49,92,.35); }
}

/* --- Frise ---------------------------------------------------------------- */
.frieze {
  height: 13px; flex: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='13' viewBox='0 0 24 13'><path d='M0,13 L0,9 L4,9 L4,5 L8,5 L8,1 L16,1 L16,5 L20,5 L20,9 L24,9 L24,13 Z' fill='%23C39A3B'/></svg>");
  background-repeat: repeat-x; background-size: 24px 13px;
  background-color: var(--lapis);
}

/* --- En-tête -------------------------------------------------------------- */
.hdr { background: var(--lapis); color: #fff; padding: 16px 20px 14px; flex: none; }
.hdr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark {
  font: 600 22px/1 var(--display); letter-spacing: .02em;
  display: flex; align-items: baseline; gap: 9px; color: #fff;
  text-decoration: none;
}
.wordmark .syr { font: 400 20px var(--syr); color: var(--gold-soft); direction: rtl; }
.hdr-sub { font-size: 12.5px; color: #c3d0e2; margin-top: 3px; }
.hdr-ic {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14);
  display: grid; place-items: center; color: var(--gold-soft);
  font: 600 15px var(--display); text-decoration: none;
}

/* --- Contenu défilant ------------------------------------------------------ */
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { width: 0; }
.block { padding: 18px 20px 4px; }
.block:last-child { padding-bottom: 24px; }
.block h3 {
  font: 600 16px/1.35 var(--display); margin: 0 0 9px; color: var(--ink);
}
.sec-label {
  font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
p { margin: 0 0 12px; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--ink); font-weight: 600; }
a { color: var(--lapis-bright); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* --- Cartes ---------------------------------------------------------------- */
.acard {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 17px; margin-bottom: 12px;
}
.acard .t { font: 600 15px/1.35 var(--display); color: var(--ink); margin-bottom: 3px; }
.acard .s { font-size: 13px; color: var(--ink-soft); }

.mrow {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.mrow:last-child { border-bottom: 0; }
.mrow .k { color: var(--ink-soft); font-size: 13px; }
.mrow .v { color: var(--ink); font-weight: 500; text-align: right; }

.chip {
  display: inline-block; font: 600 11px/1 var(--ui); letter-spacing: .1em;
  text-transform: uppercase; color: var(--lapis); background: var(--stone-deep);
  border-radius: 999px; padding: 6px 11px;
}
.chip.or { background: color-mix(in srgb, var(--gold) 26%, transparent); color: #6b5116; }

/* --- Boutons --------------------------------------------------------------- */
/* Le bouton d'action de la maquette : or sur lapis, texte sombre, pleine largeur. */
.enter {
  width: 100%; background: var(--gold); color: #3d2f0e; border: 0; border-radius: 14px;
  padding: 16px; font: 700 15px var(--ui); cursor: pointer; transition: .15s;
  min-height: 52px; display: block; text-align: center; text-decoration: none;
}
.enter:hover { background: var(--gold-soft); }
.enter:focus-visible { outline: 3px solid var(--lapis); outline-offset: 2px; }
.enter.pale { background: var(--card); color: var(--lapis); border: 1px solid var(--line); }
.enter.pale:hover { background: var(--stone-deep); }

/* --- Formulaires ----------------------------------------------------------- */
label { display: block; font: 500 13px/1 var(--ui); color: var(--ink-soft); margin: 14px 0 6px; }
input[type=text], input[type=tel], input[type=password] {
  width: 100%; padding: 14px; min-height: 50px; border: 1px solid var(--line);
  border-radius: 13px; font: 400 16px var(--ui); background: #fff; color: var(--ink);
}
input:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold); }
.otp { letter-spacing: .34em; font-size: 22px; text-align: center; font-weight: 600; }
.aide { font-size: 12.5px; color: var(--ink-soft); opacity: .8; margin-top: 6px; }

.consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 16px 2px 0;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.consent input { margin-top: 3px; accent-color: var(--gold); width: 18px; height: 18px; flex: none; }
.consent label { margin: 0; font-size: 12.5px; color: inherit; font-weight: 400; }

.ko, .ok {
  border-radius: 13px; padding: 13px 15px; font-size: 14px; margin: 0 0 14px;
}
.ko { background: #fbeae8; border: 1px solid #f0cac6; color: #a8322a; }
.ok { background: #e6f1ea; border: 1px solid #bfdccc; color: #1a6b45; }

.code {
  font-family: ui-monospace, monospace; background: var(--stone-deep);
  padding: 9px 11px; border-radius: 9px; font-size: 12.5px; word-break: break-all;
  display: block; color: var(--ink);
}

/* --- Barre d'onglets ------------------------------------------------------- */
/* La signature de la maquette : quatre onglets fixes en bas, icône au-dessus du
   libellé. `padding-bottom` généreux pour la barre d'accueil des iPhone récents. */
.nav {
  flex: none; display: flex; background: #fff; border-top: 1px solid var(--line);
  padding: 8px 6px calc(22px + env(safe-area-inset-bottom, 0px));
}
.nav a {
  flex: 1; min-width: 0; background: none; border: 0; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #9a8f78; font: 600 10.5px var(--ui); padding: 6px 0;
  white-space: nowrap; overflow: hidden;
}
.nav a.on { color: var(--lapis); }
.nav a.on .ni { background: rgba(20, 49, 92, .10); }
.nav a[aria-disabled="true"] { opacity: .45; }
.nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 10px; }
.ni {
  width: 44px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  transition: .15s; position: relative;
}
.pastille {
  position: absolute; top: -2px; right: 3px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--clay); color: #fff;
  font: 700 10px/17px var(--ui); text-align: center; padding: 0 4px;
}
.ni svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }

/* --- Écran d'accueil sur fond lapis ---------------------------------------- */
/* Reprend l'écran « invitation » de la maquette : fond plein, blason, salutation en
   syriaque, bouton d'action collé en bas. */
.plein {
  flex: 1; background: var(--lapis); color: #fff; display: flex; flex-direction: column;
  overflow-y: auto;
}
.inv-head { text-align: center; padding: 44px 28px 0; }
.inv-crest {
  width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 22px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(216,185,104,.4);
  display: grid; place-items: center;
}
.inv-crest .syr { font: 400 38px var(--syr); color: var(--gold-soft); direction: rtl; }
.inv-shlama {
  font: 400 26px var(--syr); color: var(--gold-soft); direction: rtl; margin-bottom: 8px;
}
.inv-head h1 { font: 600 28px/1.15 var(--display); margin: 0 0 12px; color: #fff; }
.inv-head p { font-size: 14px; color: #cdd7e6; line-height: 1.6; max-width: 290px; margin: 0 auto 12px; }
.inv-card {
  margin: 26px 24px 0; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 18px;
}
.inv-by { display: flex; align-items: center; gap: 12px; }
.inv-by .av {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, #22588A, #14315C);
  display: grid; place-items: center; color: var(--gold-soft);
  font: 600 15px var(--display);
}
.inv-by .t { font-size: 13px; color: #c3d0e2; }
.inv-by .t b { color: #fff; font: 600 15.5px var(--display); display: block; }
.inv-foot { margin-top: auto; padding: 22px 24px 30px; }
.plein .consent { color: #a9b6c9; }
.plein label { color: #c3d0e2; }
.plein input[type=text], .plein input[type=tel], .plein input[type=password] {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: #fff;
}
.plein input::placeholder { color: #8a9bb4; }
.plein .aide { color: #93a3ba; opacity: 1; }
.plein a { color: var(--gold-soft); }

/* --- Annuaire -------------------------------------------------------------- */
/* La recherche reste dans l'en-tête lapis, sous le pouce, pendant que la liste défile. */
.rech { position: relative; margin-top: 13px; }
.rech-ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #8a9bb4; pointer-events: none;
}
.rech-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.rech input {
  width: 100%; padding: 12px 14px 12px 40px; min-height: 46px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px; font: 400 16px var(--ui); color: #fff;
}
.rech input::placeholder { color: #8a9bb4; }
.rech input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.rech input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

/* Les filtres défilent horizontalement plutôt que d'empiler quinze lignes de rubriques. */
.filtres {
  display: flex; gap: 7px; margin: 12px -20px 0; padding: 0 20px 2px;
  overflow-x: auto; scrollbar-width: none;
}
.filtres::-webkit-scrollbar { height: 0; }
.fchip {
  flex: none; font: 600 12px var(--ui); text-decoration: none; white-space: nowrap;
  color: #c3d0e2; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 13px;
}
.fchip.on { background: var(--gold); color: #3d2f0e; border-color: var(--gold); }
.fchip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.ecard {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 14px; margin-bottom: 10px; color: inherit;
}
.ecard:active { background: var(--stone-deep); }
.ecard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.elogo {
  width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid;
  place-items: center; color: var(--gold-soft); font: 600 19px var(--display);
  background: linear-gradient(135deg, var(--lapis-bright), var(--lapis));
}
.elogo.grand { width: 66px; height: 66px; border-radius: 20px; font-size: 27px; margin: 0 auto; }
.ecorps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.enom {
  font: 600 15.5px/1.3 var(--display); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.emetier { font-size: 13px; color: var(--lapis-bright); font-weight: 500; }
.emeta { display: flex; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.emeta .epatron::before { content: "· "; }
/* La rubrique se distingue du reste de la ligne : c'est une catégorie, pas un lieu. */
.erub {
  flex: none; color: var(--gold); font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; font-size: 10.5px; align-self: center;
}
.emeta .eville::before { content: "· "; }
.efleche { flex: none; color: #b8ac93; }
.efleche svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.fiche-tete { text-align: center; padding: 6px 0 20px; }

/* --- Bandeau de la porte ouverte -------------------------------------------- */
/* Volontairement voyant : cet accès sans mot de passe ne doit pas se faire oublier. */
.porte {
  flex: none; background: var(--clay); color: #fff; text-align: center;
  font: 600 11.5px/1.35 var(--ui); letter-spacing: .04em; padding: 7px 14px;
}

/* --- Écran carte ------------------------------------------------------------ */
/* La carte occupe tout l'espace entre la frise et les onglets ; la recherche et le
   bouton de position flottent au-dessus d'elle. */
.plan { flex: 1; position: relative; overflow: hidden; }
.plan #carte { position: absolute; inset: 0; background: var(--stone-deep); }

.plan-rech {
  position: absolute; z-index: 1000; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; background: #fff; border-radius: 14px;
  box-shadow: 0 4px 18px -4px rgba(20, 49, 92, .35);
}
.plan-rech-ic {
  flex: none; width: 20px; height: 20px; margin-left: 14px; color: var(--ink-soft);
}
.plan-rech-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.plan-rech input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 15px 12px;
  font: 400 16px var(--ui); color: var(--ink); min-height: 50px;
}
.plan-rech input:focus { outline: 0; }
.plan-rech-vider {
  flex: none; width: 40px; height: 40px; margin-right: 5px; display: grid;
  place-items: center; color: var(--ink-soft); font-size: 26px; line-height: 1;
  text-decoration: none; border-radius: 12px;
}

/* Bouton de position : au-dessus des onglets, à droite, là où tombe le pouce. */
.plan-geo {
  position: absolute; z-index: 1000; right: 12px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--gold); color: #3d2f0e; border: 0; border-radius: 999px;
  padding: 13px 18px; font: 700 14px var(--ui); min-height: 48px;
  box-shadow: 0 4px 16px -3px rgba(20, 49, 92, .4);
}
.plan-geo svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.plan-geo:active { background: var(--gold-soft); }
.plan-geo:focus-visible { outline: 3px solid var(--lapis); outline-offset: 2px; }
.plan-geo.attente { opacity: .65; }
.plan-geo.attente svg { animation: pulse 1s ease-in-out infinite; }

.plan-liste {
  position: absolute; z-index: 1000; left: 12px; bottom: 14px;
  background: #fff; color: var(--lapis); text-decoration: none; border-radius: 999px;
  padding: 13px 17px; font: 600 13.5px var(--ui); min-height: 48px;
  display: inline-flex; align-items: center;
  box-shadow: 0 4px 16px -3px rgba(20, 49, 92, .3);
}

/* Bouton de recherche par zone : centré sous la barre de recherche, comme dans les
   applications de carte. Il ne paraît qu'après un déplacement. */
.plan-zone {
  position: absolute; z-index: 1000; top: 76px; left: 50%;
  transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; cursor: pointer; background: var(--lapis); color: #fff;
  border: 0; border-radius: 999px; padding: 11px 17px; min-height: 44px;
  font: 600 13.5px var(--ui); box-shadow: 0 4px 16px -3px rgba(20, 49, 92, .45);
}
.plan-zone svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.plan-zone:active { background: var(--lapis-bright); }
.plan-zone:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.plan-zone.attente { opacity: .6; }
.plan-zone[hidden] { display: none; }

.plan-mot {
  position: absolute; z-index: 1000; top: 130px; left: 12px; right: 12px;
  background: #fff; border-radius: 13px; padding: 11px 14px; font-size: 13px;
  color: var(--ink-soft); box-shadow: 0 4px 14px -4px rgba(20, 49, 92, .3);
}
.plan-mot.erreur { background: #fbeae8; color: #a8322a; }

/* Feuille de résultats : elle monte du bas, comme dans les applications de carte, et se
   replie d'un geste pour rendre la carte visible. */
.feuille {
  position: absolute; z-index: 900; left: 0; right: 0; bottom: 0;
  background: var(--stone); border-radius: 20px 20px 0 0; max-height: 52%;
  display: flex; flex-direction: column; transition: transform .2s;
  box-shadow: 0 -6px 24px -8px rgba(20, 49, 92, .4);
}
.feuille.repliee { transform: translateY(calc(100% - 52px)); }
.feuille-poignee {
  flex: none; width: 100%; background: none; border: 0; cursor: pointer;
  padding: 8px 16px 10px; font: 600 12.5px var(--ui); color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.barrette { width: 38px; height: 4px; border-radius: 2px; background: #c8bda6; }
.feuille-liste { overflow-y: auto; padding: 0 14px 14px; -webkit-overflow-scrolling: touch; }
.feuille-tout {
  display: block; text-align: center; padding: 12px; font: 600 13px var(--ui);
  color: var(--lapis); text-decoration: none;
}

/* Carte encastrée dans une fiche : hauteur fixe, dans le flux. */
.fiche-carte {
  height: 220px; border-radius: 16px; border: 1px solid var(--line);
  margin-top: 16px; background: var(--stone-deep);
}

/* Leaflet impose ses gris ; on les ramène dans la palette. */
.leaflet-container { font: 400 13px var(--ui); background: var(--stone-deep); }
.leaflet-popup-content { margin: 11px 13px; font-size: 13px; line-height: 1.5; }
.leaflet-popup-content b { font: 600 14px var(--display); color: var(--ink); }
.leaflet-popup-content-wrapper { border-radius: 13px; }
.leaflet-bar a { color: var(--lapis); }

/* Attribution : obligatoire, mais elle n'a pas à recouvrir les résultats. */
.plan .leaflet-bottom { z-index: 400; }

/* Le Plan IGN est riche et vif — routes orange, toponymie dense. Désaturé d'un quart et
   très légèrement éclairci, il redevient un fond : les marqueurs lapis et le point de
   position en terre cuite reprennent le premier plan.

   Le filtre est posé sur le **plan des tuiles**, pas sur les tuiles elles-mêmes. Leaflet
   déclare `.leaflet-tile { filter: inherit }` et sa feuille est chargée après la nôtre :
   une règle de même spécificité sur `.leaflet-tile` serait écrasée sans rien changer.
   En filtrant le parent, on emprunte le mécanisme que Leaflet a prévu pour cela.
   Les marqueurs et les bulles vivent dans d'autres plans : ils gardent leurs couleurs. */
.leaflet-tile-pane { filter: saturate(.72) brightness(1.04); }
.leaflet-control-attribution {
  font-size: 10px; background: rgba(255, 255, 255, .82);
}

/* --- File de validation ----------------------------------------------------- */
.vcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 0 16px; margin-bottom: 10px;
}
/* Le triangle par défaut de `summary` ne suit pas la charte : on le remplace par un
   chevron qui pivote. `list-style` pour Firefox, `::-webkit-details-marker` pour Safari. */
.vtete {
  display: flex; align-items: center; gap: 12px; padding: 13px 0; cursor: pointer;
  list-style: none;
}
.vtete::-webkit-details-marker { display: none; }
.vtete:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 12px; }
.vtitre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vtitre .enom { white-space: normal; }
.vchevron { flex: none; color: #b8ac93; transition: transform .18s; }
.vchevron svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; display: block; }
.vcard[open] .vchevron { transform: rotate(180deg); }
.vcard[open] .vtete { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .vchevron { transition: none; } }
.vlignes { margin: 4px 0 12px; }
.vactions { display: flex; gap: 9px; padding-bottom: 15px; }
.vactions form { flex: 1; }
.vbouton {
  width: 100%; border: 0; border-radius: 13px; padding: 12px; cursor: pointer;
  font: 700 13.5px var(--ui); min-height: 46px;
}
.vbouton.oui { background: var(--lapis); color: #fff; }
.vbouton.non { background: var(--stone-deep); color: var(--ink-soft); }
.vbouton.reprendre {
  width: auto; background: none; color: var(--lapis-bright); font-weight: 600;
  padding: 8px 10px; min-height: 40px; font-size: 12.5px;
}
.vbouton:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Le gérant, en tête de fiche : dans un annuaire de communauté, on cherche souvent la
   maison par le nom du patron avant de la chercher par son enseigne. */
.gerance {
  display: inline-flex; flex-direction: column; gap: 2px; margin-top: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 9px 15px;
}
.gerance-k {
  font: 600 10.5px var(--ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.gerance-v { font: 600 14.5px var(--display); color: var(--ink); }
.leaflet-popup-content i { color: var(--ink-soft); font-style: normal; font-size: 12.5px; }

/* --- Recherche au répertoire ------------------------------------------------ */
.crit select {
  width: 100%; padding: 13px 14px; min-height: 48px; border: 1px solid var(--line);
  border-radius: 13px; font: 400 15px var(--ui); background: #fff; color: var(--ink);
}
.crit select:focus { outline: 2px solid var(--gold); outline-offset: -1px; }

/* Les métiers en cases à cocher plutôt qu'en liste déroulante : on en combine souvent
   deux — coiffure et esthétique, bar et tabac — et une liste ne le permet pas. */
.crit-metiers {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px;
  max-height: 168px; overflow-y: auto; padding: 2px;
}
.crit-case {
  margin: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 13px; font: 500 12.5px var(--ui); color: var(--ink-soft);
  min-height: 38px;
}
.crit-case input { width: 15px; height: 15px; accent-color: var(--gold); margin: 0; flex: none; }
.crit-case:has(input:checked) {
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  border-color: var(--gold); color: var(--ink);
}

/* Résultats de recherche : la case coche toute la carte, plus large qu'une case seule. */
.rcard {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 15px;
}
.rcard:has(input:checked) { border-color: var(--gold); background: #fdfaf2; }
.rcard input { width: 19px; height: 19px; accent-color: var(--gold); margin: 2px 0 0; flex: none; }
.rcorps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rcorps .enom { white-space: normal; }
.rgerance { font: 600 13px var(--display); color: var(--ink); margin-top: 3px; }
.rsiren { font-size: 11.5px; color: var(--lapis-bright); margin-top: 2px; }