/* ═══════════════════════════════════════════════════════════════════
   LES PAGES DE RÉSULTATS — /zone/{ville}/ et le hub /pros-a-domicile/.
   La langue de la page d'accueil (papier, Archivo 300, une voix sérif
   pour la thèse, un brun pour l'accent), appliquée à une page qui liste
   des professionnelles. Chargée APRÈS coquille.css (capsule, menu du
   téléphone, pied) — ce fichier ne redéfinit rien de la coquille.

   Ce que ça remplace : archives.css — carte crème sur fond noir,
   Playfair et Poppins, un rouge cardinal. Le site n'a pas besoin de
   deux grammaires.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --papier:#FAF8F4; --creux:#F1EEE7; --blanc:#FFFFFF;
  --encre:#17150F; --encre2:#4E4A3F; --gris:#8A8578;
  --filet:#E0DCD1; --filet2:#C6C0B1; --brun:#8A6A45; --noir:#15130F;
  --pad: clamp(20px, 5.2vw, 120px);
  --cap-h: clamp(56px, 4.8vw, 68px);
  --cap-t: clamp(10px, 1.5vw, 18px);
  --cap-px: clamp(18px, 2.2vw, 32px);
  --verre-fond: rgba(255,255,255,.15);
  --verre-filet: rgba(255,255,255,.28);
  --verre-ombre: 0 4px 20px rgba(0,0,0,.07), inset 0 -1px 11px rgba(255,255,255,.5);
  --verre-flou: blur(10px) saturate(1.15);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--papier); color:var(--encre);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.72; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
/* ⚠️ Les emoji des noms commerciaux (« Sofia Bien-être 🌸 ») sont remplacés
   par WordPress par un <img class="emoji">. Sa feuille de style, elle, est
   INLINE et part avec la liste blanche de `welcome_resultats_assets()` :
   sans la règle ci-dessous l'emoji s'affiche à sa taille naturelle — une
   fleur de 173 px au milieu de la carte, constaté en prod le 31/08.
   Même trou probable dans `guide.css` et `accueil-v2.css`, qui dégagent
   les styles de la même façon. */
img.emoji, img.wp-smiley { display:inline !important; width:1em; height:1em;
  margin:0 .07em; vertical-align:-.1em; background:none; padding:0;
  border:none; box-shadow:none; }
a { color:var(--brun); text-decoration:none; }
a:hover { color:#6E5336; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:2px solid var(--brun); outline-offset:3px; border-radius:4px; }
.evitement { position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--encre); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; }
.evitement:focus { left:0; color:#fff; }
.hors-vue { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.eyebrow { display:block; font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:11.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--gris); }
.btn-noir { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--noir); color:#fff; border-radius:999px; font-weight:500;
  padding:15px 28px; font-size:16px; white-space:nowrap; border:0; cursor:pointer; }
.btn-noir:hover { color:#fff; background:#211D17; }

/* ── la page ─────────────────────────────────────────────────────── */
.res-page { padding:calc(var(--cap-t) + var(--cap-h) + clamp(28px,4vw,56px)) var(--pad) 0; }
.res-page > * { max-width:1180px; margin-left:auto; margin-right:auto; }

/* ── le fil d'Ariane ─────────────────────────────────────────────── */
.res-ariane { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:"DM Mono",ui-monospace,Menlo,monospace; font-size:12px;
  letter-spacing:.06em; color:var(--gris); }
.res-ariane a { color:var(--encre2); }
.res-ariane a:hover { color:var(--brun); }
.res-ariane [aria-current] { color:var(--encre); }

/* ── l'en-tête ───────────────────────────────────────────────────── */
.res-tete { display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(22px,2.6vw,36px); max-width:52rem; }
.res-tete h1 { margin:0; font-size:clamp(30px,4.2vw,50px); font-weight:200;
  letter-spacing:-0.035em; line-height:1.08; color:var(--encre); text-wrap:balance; }
.res-these { margin:0; font-family:"Instrument Serif",Georgia,serif; font-weight:400;
  font-size:clamp(19px,2vw,24px); line-height:1.44; letter-spacing:-0.005em;
  color:var(--encre); padding-left:clamp(18px,2vw,26px); border-left:2px solid var(--brun); }

/* ── la barre d'adresse, variante papier ─────────────────────────
   Sur l'accueil elle est de verre, posée sur une photo. Ici elle est
   de papier : un champ blanc, un filet, l'encre. Même formulaire, même
   script (assets/adresse.js), même panneau de suggestions. */
.barre { display:flex; align-items:center; gap:14px; width:100%; max-width:680px;
  padding:10px 10px 10px clamp(18px,2vw,26px); border-radius:999px;
  background:var(--blanc); border:1px solid var(--filet2);
  box-shadow:0 6px 24px rgba(52,40,24,.08); margin-top:clamp(6px,1vw,12px); }
.champ { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--filet); padding:7px 2px; cursor:text; transition:border-color .18s; }
.champ:focus-within { border-bottom-color:var(--encre); }
.champ input { flex:1 1 auto; min-width:0; border:0; background:none; padding:0;
  font:inherit; font-size:clamp(16.5px,1.5vw,19px); color:var(--encre); }
.champ input::placeholder { color:var(--gris); opacity:1; }
.champ input:focus { outline:none; }
.geo { flex:none; width:34px; height:34px; border-radius:999px; border:0; padding:0;
  background:none; color:var(--gris); cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background .18s, color .18s; }
.geo:hover { background:rgba(23,21,15,.06); color:var(--encre); }
.geo .mot { display:none; }
.geo[aria-busy="true"] { opacity:.45; }
.chercher { gap:9px; height:48px; padding:0 24px; font-size:16px; flex:none; }

.sugg { position:fixed; z-index:120; display:none; padding:6px;
  background:rgba(250,248,244,.97); border-radius:22px;
  box-shadow:0 18px 48px rgba(52,40,24,.24), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
  overflow-y:auto; overscroll-behavior:contain; }
.sugg.ouvert { display:block; }
.sugg ul { list-style:none; margin:0; padding:0; }
.sugg .choix { width:100%; display:block; text-align:left; border:0; background:none;
  font:inherit; color:var(--encre); cursor:pointer; padding:10px 15px; border-radius:16px;
  transition:background .14s; }
.sugg .choix:hover, .sugg .choix[aria-selected="true"] { background:rgba(23,21,15,.06); }
.sugg .choix b { display:block; font-weight:500; font-size:16px; line-height:1.32; }
.sugg .choix span { display:block; margin-top:1px; font-size:13.5px; color:rgba(23,21,15,.55); }
.sugg .mot { margin:0; padding:13px 15px; font-size:14px; color:rgba(23,21,15,.55); }

/* Les titres de groupes du panneau de suggestions (Métiers /
   Professionnelles / Villes et adresses) — ajoutés le 31/08 avec la
   recherche étendue. Même règle dans resultats.css ET accueil-v2.css :
   le panneau est le même objet sur les deux peaux. */
.sugg .groupe { margin:0; padding:11px 15px 3px; font:500 10.5px/1 "DM Mono", ui-monospace, monospace;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(138,106,69,.9); }
.sugg li:not(:first-child) .groupe { border-top:1px solid rgba(23,21,15,.07); margin-top:6px; padding-top:12px; }


/* ── les sections ────────────────────────────────────────────────── */
.res-sect { margin-top:clamp(40px,4.8vw,68px); padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--filet); }
.res-sect h2 { margin:0; font-size:clamp(23px,2.8vw,32px); font-weight:300;
  letter-spacing:-0.028em; line-height:1.14; color:var(--encre); text-wrap:balance; }
.res-sect__tete { display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:10px 26px; margin-bottom:clamp(18px,2vw,26px); }
.res-sect__sous { margin:0; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline;
  font-size:15px; color:var(--encre2); }
.res-sect__sous b { color:var(--encre); font-weight:500; }
.res-sect__sous a { font-size:14.5px; }
.res-sect__note { margin:8px 0 16px; font-size:15.5px; color:var(--encre2); max-width:62ch; }

/* ── la grille et la carte ───────────────────────────────────────
   Reprise de la carte de l'app : couverture en haut, avatar rond posé à
   cheval sur son bord, nom, métier, puis une ligne basse ville/pastilles.
   Le repli quand il n'y a pas de photo (116 fiches sur 583) est le logo
   Welcome sur noir — comme dans l'app. */
.res-grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
  gap:clamp(16px,1.8vw,24px); }
.res-carte { margin:0; }
.res-carte__lien { display:flex; flex-direction:column; height:100%; color:var(--encre);
  background:var(--blanc); border:1px solid var(--filet); border-radius:14px; overflow:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s; }
.res-carte__lien:hover { color:var(--encre); transform:translateY(-3px);
  border-color:var(--filet2); box-shadow:0 14px 34px rgba(52,40,24,.13); }

/* la couverture
   ⚠️ `aspect-ratio` ne suffit PAS à tenir la hauteur : une boîte à ratio
   garde une hauteur minimale automatique égale à son contenu, et une image
   en `height:100%` y contribue avec sa hauteur NATURELLE. Une photo portrait
   (So'liss, 461×1000) faisait donc 597 px de haut au lieu de 172, et la
   grille étirait toute la rangée — constaté le 05/09 sur /zone/paris/.
   Deux verrous : `min-height:0` coupe le minimum automatique, et l'image en
   absolu ne compte plus dans le contenu. PAS d'`overflow:hidden` ici :
   l'avatar chevauche le bord bas de la couverture, il serait rogné. */
.res-carte__cover { position:relative; aspect-ratio:16 / 10; min-height:0; background:var(--creux); }
.res-carte__cover > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.res-carte__cover--logo { background:var(--noir); display:flex; align-items:center; justify-content:center; }
.res-carte__marque { width:56%; max-width:180px; height:auto; fill:#fff; opacity:.92; }

/* l'avatar, à cheval sur le bord bas de la couverture */
.res-carte__avatar { position:absolute; right:14px; bottom:-26px; width:62px; height:62px;
  border-radius:999px; overflow:hidden; background:var(--creux);
  border:3px solid var(--blanc); box-shadow:0 3px 10px rgba(52,40,24,.16);
  display:flex; align-items:center; justify-content:center; }
.res-carte__avatar img { width:100%; height:100%; object-fit:cover; }
.res-carte__avatar--vide { background:var(--papier); }
.res-carte__avatar--vide span { font-family:"Instrument Serif",Georgia,serif;
  font-size:26px; line-height:1; color:var(--filet2); }

/* le corps : la marge à droite laisse la place à l'avatar */
.res-carte__corps { display:flex; flex-direction:column; flex:1 1 auto;
  padding:14px 16px 14px; }
.res-carte__nom { margin:0; padding-right:70px; font-size:17.5px; font-weight:500;
  letter-spacing:-0.015em; line-height:1.28; }
.res-carte__metier { margin:3px 0 0; padding-right:70px; font-size:14px; line-height:1.4;
  color:var(--encre2); }
.res-carte__bas { margin:auto 0 0; padding-top:12px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:8px 10px; }
.res-carte__ville { font-size:13.5px; color:var(--gris); }
.res-carte__puces { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.res-puce { display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:999px; background:var(--creux); font-size:12.5px; line-height:1.25;
  color:var(--encre2); white-space:nowrap; }
.res-puce b { color:var(--encre); font-weight:600; }
.res-puce--resa { background:rgba(138,106,69,.10); color:var(--brun); font-weight:500; }
.res-puce--resa svg { flex:none; }

/* 06/09 — la prochaine ouverture d'agenda. Vert : c'est la seule bonne
   nouvelle de la carte, et le seul signal qui dise « bientôt ». */
.res-puce--dispo { background:#EFF8F2; color:#1E7A4B; font-weight:600; }

/* ── les listes de liens : communes, villes ──────────────────────── */
.res-liens { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.res-liens a { display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px;
  border:1px solid var(--filet2); color:var(--encre); font-size:15px; line-height:1.3;
  background:transparent; transition:background .14s, border-color .14s; }
.res-liens a:hover { background:rgba(23,21,15,.04); border-color:var(--gris); color:var(--encre); }
.res-sect--liens h2 { margin-bottom:6px; }
.res-sect--liens .res-liens { margin-top:14px; }
.res-repli { background:var(--creux); border:1px solid var(--filet); border-radius:12px;
  padding:clamp(20px,2.4vw,30px); border-top:1px solid var(--filet); }

/* ── les métiers : le rail de l'accueil, en grille ───────────────
   Mêmes fichiers (`assets/accueil/*.avif|webp|jpg`, déjà dans le ZIP),
   même grammaire : titre au-dessus, photo en 4/5, un bouton de verre posé
   dessus. Sur l'accueil c'est un rail qui défile ; ici on montre les dix
   d'un coup — c'est une page de choix, pas une vitrine. */
.res-metiers { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  gap:clamp(16px,1.8vw,24px); }
.res-metier { display:flex; flex-direction:column; color:var(--encre); }
.res-metier:hover { color:var(--encre); }
.res-metier__texte { display:flex; flex-direction:column; gap:3px;
  padding:0 2px 10px; min-height:66px; justify-content:flex-end; }
.res-metier__nom { font-size:clamp(17px,1.45vw,19.5px); font-weight:400;
  letter-spacing:-0.02em; line-height:1.22; }
.res-metier__ligne { font-size:14px; line-height:1.45; color:var(--encre2); }
.vignette { position:relative; aspect-ratio:4/5; overflow:hidden;
  border-radius:12px; background:var(--creux); display:block; }
.vignette picture { display:contents; }
.vignette img { width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.res-metier:hover .vignette img { transform:scale(1.05); }
.vignette::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(10,9,7,.44) 0%, rgba(10,9,7,.07) 30%, rgba(10,9,7,0) 48%); }
.sur-image { position:absolute; left:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; border-radius:999px;
  padding:9px 18px; font-size:14.5px; font-weight:500; color:#fff;
  border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.14);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  transition:background .2s, color .2s, border-color .2s; }
.res-metier:hover .sur-image { background:#fff; color:var(--encre); border-color:#fff; }

/* ── le contenu éditorial du hub ─────────────────────────────────── */
.res-editorial { max-width:44rem; }
.res-editorial p { color:var(--encre2); }
.res-editorial h2, .res-editorial h3 { font-weight:300; letter-spacing:-0.02em; }

/* ── la fin : l'appel aux pros ───────────────────────────────────── */
.res-fin { margin-top:clamp(44px,5vw,70px); padding:clamp(26px,3vw,38px);
  background:var(--creux); border:1px solid var(--filet); border-radius:12px;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; }
.res-fin p { flex:1 1 20rem; margin:0; color:var(--encre2); font-size:16px; }
.res-fin b { color:var(--encre); font-weight:500; }

.res-bas { padding:clamp(46px,5.6vw,84px) 0 0; max-width:none; }

/* ── le premier écran, quand la page en a un ─────────────────────
   POURQUOI CETTE SECTION EXISTE. La capsule de navigation est en
   `backdrop-filter` : elle floute ce qui passe DERRIÈRE elle. Sur un
   aplat crème, flouter un aplat donne… le même aplat — l'effet de verre
   est physiquement invisible, et l'en-tête paraît éteint. Il ne manquait
   pas une règle CSS à la capsule, il lui manquait une image. Le hub en a
   une désormais, et le script de `coquille-bas` reprend son travail :
   verre clair sur la photo, verre inversé (`.pose`) au-delà.
   Hauteur volontairement plus courte que sur l'accueil (68 vh contre
   100) : c'est une page de résultats, pas une page de marque — la
   première rangée de métiers doit rester visible au premier défilement. */
.res-page.res-page--hero { padding-top:0; }
/* Sur une page de résultats, le premier écran annonce et laisse la place :
   il ne prend pas la moitié de l'écran comme sur le hub. Les visuels
   métier sont des portraits 4/5 recadrés en bandeau — on vise le haut du
   cadre, où se trouve le geste. */
.res-page--hero > .hero--court { min-height:clamp(300px, 46vh, 420px);
  margin-bottom:clamp(24px,3vw,40px); }
.hero--court .hero-photo img { object-position:center 34%; }
.hero--court h1 { font-size:clamp(28px,3.6vw,44px); }
.hero--court .hero-sous { font-size:clamp(15px,1.2vw,17.5px); }

.res-page--hero > .hero { position:relative; overflow:hidden; background:var(--encre);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(420px, 68vh, 660px);
  padding-top:calc(var(--cap-t) + var(--cap-h) + clamp(18px,3vw,44px));
  padding-bottom:clamp(26px,4.5vh,56px);
  margin:0 calc(var(--pad) * -1) clamp(30px,4vw,54px);
  max-width:none; }
.hero-photo { display:contents; }
.hero-photo img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:58% center; }
/* ⚠️ 05/09 — VOILE REFAIT, ET MESURÉ SUR TROIS PHOTOS, PAS SUR UNE.
   L'ancien voile ne couvrait que les BORDS (haut jusqu'à 40 %, bas jusqu'à
   38 %) : le milieu du héro restait nu. Or le bloc de texte est collé en
   BAS et il est haut — sur téléphone il occupe de 18 % à 93 % de la
   hauteur. Le sous-titre, le champ et la note tombaient donc en plein
   dans la bande sans voile. Mesuré au percentile 92 (le pire pixel, pas
   la moyenne), texte blanc, OMBRES NON COMPTÉES :
     · téléphone, avant : ariane 1,29 · h1 1,33-1,72 · sous-titre 1,08-2,58
       · champ 1,44-1,95 · note 1,97 — soit du blanc sur du blanc ;
     · ordinateur, avant : h1 1,52-2,94 · sous-titre 1,91-2,26.
   ⭐ ET SURTOUT : contrairement à l'accueil, ces héros n'ont PAS une seule
   photo. Les zones servent « l'arrivée », mais chaque métier sert LA
   SIENNE (coiffure.avif, massage.avif…). Un voile calibré sur une seule
   image ne vaut donc rien ici : celui-ci a été validé sur trois photos très
   différentes à la fois — /pros-a-domicile/, /zone/paris/, /metier/coiffure/.
   D'où un PLANCHER sur toute la hauteur plutôt qu'un dégradé de bords.
   Après, au même percentile : h1 4,96-8,0 · sous-titre 5,6-11,7 ·
   champ 4,6-6,6 · note 8,5-9,7 (ordinateur) ; h1 6,6-7,5 ·
   sous-titre 5,3-6,0 · champ 4,9-5,9 (téléphone). Seuil visé : 4,5.
   Ne pas alléger sans remesurer SUR PLUSIEURS PHOTOS. */
.hero-voile { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,7,.46) 0%, rgba(10,9,7,.36) 18%,
      rgba(10,9,7,.30) 34%, rgba(10,9,7,.30) 100%),
    linear-gradient(0deg, rgba(10,9,7,.50) 0%, rgba(10,9,7,.40) 24%,
      rgba(10,9,7,.30) 50%, rgba(10,9,7,.30) 100%); }
.hero-bloc { position:relative; z-index:2; width:100%;
  padding:0 var(--pad) 0 calc(var(--pad) + var(--cap-px));
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(13px,1.7vw,20px); color:#fff;
  max-width:calc(760px + var(--pad) * 2 + var(--cap-px)); }
.hero h1 { margin:0; font-size:clamp(33px,4.8vw,58px); font-weight:200;
  letter-spacing:-0.038em; line-height:1.04; color:#fff;
  text-shadow:0 1px 2px rgba(10,9,7,.58), 0 2px 11px rgba(10,9,7,.58), 0 4px 30px rgba(10,9,7,.46); }
.hero h1 b { font-weight:500; }
.hero-sous { margin:0; font-size:clamp(15.5px,1.35vw,19px); font-weight:300;
  line-height:1.5; color:rgba(255,255,255,.94); max-width:34em;
  text-shadow:0 1px 2px rgba(10,9,7,.58), 0 2px 11px rgba(10,9,7,.58), 0 4px 26px rgba(10,9,7,.46); }
.hero-note { margin:0; font-size:13.5px; color:rgba(255,255,255,.78);
  text-shadow:0 1px 2px rgba(10,9,7,.6), 0 2px 10px rgba(10,9,7,.5); }
.res-ariane.res-ariane--hero { color:rgba(255,255,255,.72); }
.res-ariane.res-ariane--hero a { color:rgba(255,255,255,.88); }
.res-ariane.res-ariane--hero a:hover { color:#fff; }
.res-ariane.res-ariane--hero [aria-current] { color:#fff; }

/* Sur la photo, la barre redevient du verre — comme sur l'accueil.
   Deux objets de verre au maximum à l'écran : la capsule et elle. */
.hero .barre { background:var(--verre-fond); border-color:var(--verre-filet);
  box-shadow:0 6px 26px rgba(0,0,0,.18), inset 0 -1px 11px rgba(255,255,255,.42);
  backdrop-filter:blur(11px) saturate(1.15); -webkit-backdrop-filter:blur(11px) saturate(1.15); }
.hero .champ { border-bottom-color:rgba(255,255,255,.55); }
.hero .champ:focus-within { border-bottom-color:#fff; }
.hero .champ input { color:#fff; }
.hero .champ input::placeholder { color:rgba(255,255,255,.74); }
.hero .geo { color:rgba(255,255,255,.78); }
.hero .geo:hover { background:rgba(255,255,255,.2); color:#fff; }

/* ── le téléphone ────────────────────────────────────────────────── */
@media (max-width:720px) {
  .barre { flex-direction:column; align-items:stretch; gap:14px; border-radius:24px; padding:16px 18px; }
  .chercher { width:100%; height:auto; padding:15px 22px; }
  .res-grille { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
  .res-metiers { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 10px; }
  .res-metier__texte { min-height:60px; padding-bottom:8px; }
  .res-metier__nom { font-size:16px; }
  .res-metier__ligne { font-size:13px; }
  .sur-image { left:10px; bottom:10px; padding:8px 14px; font-size:13.5px; }
  .res-page--hero > .hero { min-height:clamp(380px, 62vh, 520px); }
  .res-page--hero > .hero--court { min-height:clamp(280px, 42vh, 380px); }
  /* Le héro rétrécit mais le texte, lui, ne rétrécit pas : il remplit
     l'écran du haut en bas. Le plancher monte donc d'un cran. */
  .hero-voile { background:linear-gradient(180deg, rgba(10,9,7,.54) 0%, rgba(10,9,7,.44) 18%,
        rgba(10,9,7,.38) 34%, rgba(10,9,7,.38) 100%),
      linear-gradient(0deg, rgba(10,9,7,.56) 0%, rgba(10,9,7,.47) 24%,
        rgba(10,9,7,.38) 50%, rgba(10,9,7,.38) 100%); }
  .res-carte__corps { padding:12px 13px 13px; }
  .res-carte__nom { font-size:16px; padding-right:60px; }
  .res-carte__metier { font-size:13.5px; padding-right:60px; }
  .res-carte__avatar { width:54px; height:54px; bottom:-23px; right:12px; }
  .res-carte__bas { padding-top:10px; }
  .res-sect__tete { flex-direction:column; align-items:flex-start; gap:6px; }
}
@media (max-width:520px) {
  .res-grille { grid-template-columns:minmax(0, 1fr); }
  .res-carte__cover { aspect-ratio:16 / 9; }
}

/* ── la pagination des archives métier ───────────────────────────
   Une archive métier compte jusqu'à 252 fiches : elle pagine (24 par
   page, bloc 07), contrairement aux archives commune qui tiennent sur
   une seule page. */
.res-pagination { margin-top:clamp(28px,3.2vw,40px); }
.res-pagination .screen-reader-text { position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.res-pagination .nav-links { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.res-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 14px; border-radius:999px;
  border:1px solid var(--filet2); color:var(--encre); font-size:15px; line-height:1;
  background:transparent; transition:background .14s, border-color .14s; }
.res-pagination a.page-numbers:hover { background:rgba(23,21,15,.04); border-color:var(--gris); color:var(--encre); }
.res-pagination .page-numbers.current { background:var(--noir); border-color:var(--noir); color:#fff; font-weight:500; }
.res-pagination .page-numbers.dots { border-color:transparent; color:var(--gris); }
@media (max-width:720px) {
  .res-pagination .page-numbers { min-width:38px; height:38px; padding:0 11px; font-size:14px; }
}

/* ── ancien rattrapage du trou de `coquille.css` — RETIRÉ le 05/09 ──
   `.btn-fantome` (règle de base + `display:none` sous 720 px) avait été
   recopié ici parce que l'extraction qui produit `coquille.css` l'avait
   laissé derrière. La règle est désormais DANS `coquille.css`, à sa place,
   avec l'avertissement de ne plus la reperdre : ce doublon n'avait donc
   plus de raison d'être et il imposait en prime un survol différent
   (encre sur blanc) de celui de la coquille. Une seule source. */