/* ==========================================================================
   AlpaJob - Design system V3
   Modele : maquette V4 de Stephen (2020), home divisee en deux avec la carte
   en fond. Charte reprise de Pharm'Alpha : noir #0a0a0a, orange #ff914d,
   Space Grotesk. Logo officiel : assets/img/logo-alpajob.png (alpaga dans
   la loupe, mot-symbole en sans-serif grasse), extrait du deck V4.
   ========================================================================== */

@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/space-grotesk-700.woff2") format("woff2"); }

:root {
  /* ---- Charte Pharm'Alpha ---- */
  --ink: #0a0a0a;
  --ink-mark: #2B2B2F;
  --ink-70: #3d3d3d;
  --ink-55: #6e6e6e;
  --ink-30: #a8a8a8;
  --ink-20: #e5e5e5;
  --line: #d4d4d4;
  --ink-08: #f2f2f2;

  --paper: #ffffff;
  --paper-2: #f8f8f8;

  /* Orange Pharm'Alpha : accent unique, remplace le rust */
  --rust: #ff914d;
  --rust-dark: #f08236;
  --rust-mid: #ffa76b;
  /* Eclairci de 3 points par rapport a l'original (#fff3ea) : ecart invisible a l'oeil,
     necessaire pour que --rust-text tienne 4,5:1 dessus (mesure : 4,55:1). */
  --rust-soft: #fff6ef;
  /* Orange texte sur fond clair, jamais --rust ni --rust-dark en couleur de texte :
     regle bible design-ux du 31/07/2026, 4,86:1 sur blanc, 4,55:1 sur --rust-soft. */
  --rust-text: #b8541c;

  /* Rayon geographique : bleu, demande explicite de la V4 */
  --geo: #1E6BB8;
  --geo-soft: rgba(30, 107, 184, .12);

  /* Etats de la legende carte (modele Booking / Hotel.com V4) */
  --ok: #0F7A49;
  --ok-soft: #E4F3EC;
  --warn: #C9971A;
  /* Assombri de #8A6B12 (4,46:1, non conforme) a #856811 (4,70:1) */
  --warn-text: #856811;
  --warn-soft: #FBF1DC;
  --danger: #B23B2E;
  --danger-soft: #FBEAE7;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-1: 0 1px 2px rgba(10,10,10,.06), 0 2px 8px rgba(10,10,10,.05);
  --shadow-2: 0 6px 18px rgba(10,10,10,.10), 0 18px 44px rgba(10,10,10,.12);

  /* Couleur des bandeaux noirs, partagee par la barre du haut, le bandeau
     des 3 points, le pied de page et le caducee. */
  --bandeau: #212121;
  --nav-h: 96px;
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Lien d'evitement : cache hors focus, visible et positionne des qu'on le
   Tab, jamais planque hors-ecran (recommandation NN/g reprise bible avril 2026). */
.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; z-index: 2000;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

em { font-style: normal; }

/* Accent editorial : la touche serif du logo, reutilisee comme signature
   de marque sur les mots-cles des titres (coherence logo <-> produit). */
.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--rust);
}

/* ---------- Logo / lockup (reconstitue : alpaga + loupe + wordmark) ---------- */

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { height: 42px; width: auto; display: block; }
.brand__word { display: inline-flex; align-items: baseline; }
.brand__alpa {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.2px;
  color: var(--ink-mark);
}
.brand__job {
  font-family: var(--font);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.3px;
  color: var(--ink-mark);
  position: relative;
  margin-left: 8px;
}
/* Le manche de la loupe qui vient se glisser entre "Alpa" et "Job" */
.brand__job::before {
  content: "";
  position: absolute;
  left: -9px; top: -1px;
  width: 2px; height: 15px;
  background: var(--rust);
  border-radius: 1px;
  transform: rotate(34deg);
}
.brand--sm .brand__mark { height: 42px; width: auto; display: block; }
.brand--sm .brand__alpa { font-size: 16px; }
.brand--sm .brand__job { font-size: 14px; margin-left: 6px; }
.brand--sm .brand__job::before { left: -6px; height: 10px; }

/* ---------- Barre de navigation ---------- */

.nav {
  height: var(--nav-h);
  border-bottom: 1px solid var(--ink-20);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 900;
}

.nav__spacer { flex: 1; }

.nav__links { display: flex; align-items: center; gap: 4px; }

.nav__link {
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-70);
  transition: background .15s, color .15s;
}
.nav__link:hover { background: var(--ink-08); color: var(--ink); }
.nav__link.is-active { color: var(--rust-text); background: var(--rust-soft); }
.nav__link:focus-visible, .brand:focus-visible, .btn:focus-visible, .chip:focus-visible,
.f__toggle button:focus-visible, .cal__j:focus-visible {
  outline: 2.5px solid var(--geo);
  outline-offset: 2px;
}
/* Filet de securite : tout element interactif natif recoit un focus visible,
   meme les composants ajoutes plus tard (WCAG 2.4.7, critere critique). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--geo);
  outline-offset: 2px;
}

.nav__cta {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  border: 0;
}
.nav__cta:hover { background: #33302C; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  min-height: 44px;
  transition: transform .12s, box-shadow .15s, background .15s;
}
/* L'orange Pharm'Alpha est clair : le texte doit y etre noir (8,9:1),
   le blanc plafonne a 2,2:1 et echoue WCAG AA. */
.btn--primary { background: var(--rust); color: var(--ink); }
.btn--primary:hover { background: var(--rust-dark); color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #33302C; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { padding: 10px 14px; font-size: 13.5px; min-height: 44px; }
.btn--block { width: 100%; }

/* ---------- Accueil ---------- */

.hero {
  padding: clamp(48px, 7vw, 92px) clamp(16px, 5vw, 64px) 56px;
  background:
    radial-gradient(1100px 480px at 82% -10%, var(--rust-soft), transparent 62%),
    var(--paper);
}
.hero__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ok-soft); color: var(--ok);
  font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 100px; margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -1.6px;
  margin: 0 0 20px;
}
.hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--rust); letter-spacing: -1px; }

.hero__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0 0 32px;
  max-width: 33em;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero__proof { display: flex; gap: 32px; flex-wrap: wrap; }
.hero__proof div strong { display: block; font-size: 24px; letter-spacing: -.6px; }
.hero__proof div span { font-size: 13px; color: var(--ink-55); }

.hero__art {
  position: relative;
  border-radius: 20px;
  background: var(--ink);
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  display: grid;
  place-items: center;
}
.hero__art::before {
  content: "";
  position: absolute; inset: 8%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}
.hero__art img { width: 46%; height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.4)); position: relative; z-index: 1; }
.hero__art::after {
  content: "";
  position: absolute; inset: auto -18% -42% -18%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(168,83,31,.55), transparent);
}

/* Bandeau des 3 promesses */
.pillars { max-width: 1180px; margin: 0 auto; padding: 8px clamp(16px, 5vw, 64px) 76px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { border: 1px solid var(--ink-20); border-radius: var(--radius); padding: 26px 24px; background: var(--paper); }
.pillar__ico { width: 40px; height: 40px; border-radius: 11px; background: var(--rust-soft); color: var(--rust-dark); display: grid; place-items: center; margin-bottom: 16px; }
.pillar h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.3px; }
.pillar p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-70); }

/* Les deux espaces (logique "Uber" de la maquette V4) */
.spaces { background: var(--paper-2); border-top: 1px solid var(--ink-20); padding: 76px clamp(16px, 5vw, 64px); }
.spaces__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.space {
  border-radius: 18px; padding: 34px 32px; border: 1px solid var(--ink-20);
  background: var(--paper); display: flex; flex-direction: column;
}
.space--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.space h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.6px; }
.space__lead { margin: 0 0 22px; font-size: 15px; color: var(--ink-70); }
.space--dark .space__lead { color: rgba(255,255,255,.72); }
.space ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.space li { font-size: 14.5px; line-height: 1.45; padding-left: 27px; position: relative; color: var(--ink-70); }
.space--dark li { color: rgba(255,255,255,.86); }
.space li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--rust-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8531F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.space--dark li::before { background-color: rgba(201,123,68,.24); }
.space .btn { margin-top: auto; align-self: flex-start; }

.foot { padding: 34px clamp(16px, 5vw, 64px); border-top: 1px solid var(--ink-20); font-size: 13px; color: var(--ink-55); display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.foot__mentions { font-style: italic; color: var(--ink-55); }

/* ==========================================================================
   Page recherche : filtres + carte + resultats
   ========================================================================== */

.search {
  display: grid;
  grid-template-columns: 316px minmax(380px, 1fr) minmax(420px, 44%);
  height: calc(100vh - var(--nav-h) - 116px);
  min-height: 520px;
  overflow: hidden;
}

/* Barre mobile/tablette : bouton Filtres + bascule Liste/Carte.
   Masquee sur desktop (>1180px), c'est la ou vit le 3-colonnes actuel. */
.search__mobbar { display: none; }

/* --- Colonne filtres --- */
.filters { border-right: 1px solid var(--ink-20); overflow-y: auto; padding: 20px 20px 40px; background: var(--paper); }
.filters h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-55); margin: 0 0 16px; }
.filters__close { display: none; }

.f { margin-bottom: 20px; }
.f > label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
/* Tous les types de champ, pas seulement text et date : sans email, tel et url,
   les champs de la fiche officine et du formulaire de contact restaient a leur
   largeur par defaut du navigateur, deux fois plus etroits que les autres. */
.f input[type="text"], .f input[type="date"], .f input[type="email"],
.f input[type="tel"], .f input[type="url"], .f input[type="number"],
.f input[type="search"], .f input[type="password"], .f select {
  /* 16px minimum et jamais moins : sous ce seuil, iOS Safari zoome sur le champ
     au focus et desorganise toute la mise en page tant qu'on ne dezoome pas.
     min-height garantit aussi les 44px de cible tactile (WCAG 2.5.5). */
  width: 100%; padding: 10px 12px; font-size: 16px; font-family: inherit; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2);
  min-height: 44px;
}
.f input:focus, .f select:focus { outline: 0; border-color: var(--rust); box-shadow: 0 0 0 3px var(--rust-soft); background: var(--paper); }

.f__geo {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 13px; font-weight: 700; color: var(--geo);
  background: var(--geo-soft); border: 0; padding: 7px 12px; border-radius: 100px;
  min-height: 44px;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 13px; padding: 8px 12px; border-radius: 100px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-70);
  transition: all .13s; min-height: 44px;
}
.chip:hover { border-color: var(--ink-70); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Le curseur distance / temps de trajet : c'est le coeur du produit */
.range { display: flex; align-items: center; gap: 12px; }
.range input[type="range"] { flex: 1; accent-color: var(--geo); }
.range output {
  min-width: 74px; text-align: right; font-size: 14px; font-weight: 700; color: var(--geo);
  font-variant-numeric: tabular-nums;
}

.f__toggle { display: flex; background: var(--ink-08); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 10px; }
.f__toggle button {
  flex: 1; border: 0; background: transparent; font-size: 13px; font-weight: 600;
  padding: 9px 4px; border-radius: 7px; color: var(--ink-55); min-height: 44px;
}
.f__toggle button.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }

.f--rempla { background: var(--paper-2); border: 1px solid var(--ink-20); border-radius: var(--radius); padding: 16px; }
.f--rempla[hidden] { display: none; }
.f--rempla .f:last-child { margin-bottom: 0; }
/* minmax(0, 1fr) et non 1fr : la valeur par defaut d'une piste de grille est
   min-width: auto, donc un champ date natif refuse de retrecir sous sa largeur
   intrinseque et deborde de la colonne des filtres. */
.f__dates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.f__date { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; }
.f__date > span { font-size: 13px; font-weight: 600; color: var(--ink-55); }
.f__date input[type="date"] { min-width: 0; }

/* Toujours empiles, y compris dans le tiroir mobile : deux champs date cote a
   cote sont serres partout, et la place verticale ne manque nulle part ici. */

.filters__reset { font-size: 13px; color: var(--ink-55); background: 0; border: 0; padding: 6px 0; text-decoration: underline; }

/* --- Colonne resultats --- */
.results { overflow-y: auto; background: var(--paper-2); border-right: 1px solid var(--ink-20); }
.results__head {
  position: sticky; top: 0; z-index: 5; background: var(--paper-2);
  padding: 16px 20px 12px; border-bottom: 1px solid var(--ink-20);
  display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap;
}
/* Le decompte garde sa ligne : c'est lui qui repond a la question posee.
   Le groupe d'actions passe dessous quand la colonne devient etroite. */
#count { flex: 1 1 240px; min-width: 0; }
.results__head strong { font-size: 17px; letter-spacing: -.3px; }
.results__head span { font-size: 13.5px; color: var(--ink-55); }
/* 16px : un <select> declenche le meme zoom iOS au focus qu'un <input>.
   min-height remonte a 44px pour la cible tactile (etait 36px). */
.results__head .sort { margin-left: auto; font-size: 16px; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 9px; background: var(--paper); min-height: 44px; }
.results__list { padding: 14px 20px 40px; display: grid; gap: 12px; }

/* Le "post-it" de la maquette V4 : tout doit se lire sans changer de page */
.card {
  background: var(--paper); border: 1px solid var(--ink-20); border-radius: var(--radius);
  padding: 16px 17px; cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .14s;
  position: relative;
}
.card:hover, .card.is-hot { border-color: var(--rust); box-shadow: var(--shadow-2); transform: translateY(-1px); }

.card__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 3px; }
.card__title { font-size: 16px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; margin: 0; }
.card__age { font-size: 12px; color: var(--ink-55); white-space: nowrap; padding-top: 2px; }
.card__emp { font-size: 13.5px; color: var(--ink-70); margin: 0 0 10px; }

.card__geo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--geo-soft); color: var(--geo);
  font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 8px; margin-bottom: 10px;
}
/* Pas d'opacite ici : elle diluait le bleu jusqu'a 3,55:1 sur le fond --geo-soft
   (non conforme AA), le poids de police suffit a distinguer le sous-texte. */
.card__geo small { font-weight: 500; }

.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--ink-08); color: var(--ink-70); }
.tag--cdi { background: var(--ok-soft); color: var(--ok); }
.tag--rempla { background: var(--rust-soft); color: var(--rust-text); }
.tag--pay { background: var(--warn-soft); color: var(--warn-text); }

.card__desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-70); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__foot { display: flex; gap: 8px; }

.card__src { position: absolute; right: 14px; bottom: 14px; font-size: 11px; color: var(--ink-55); }

/* Les offres hors criteres restent visibles mais en retrait (logique "Booking"),
   avec le detail du critere qui coince (demande V4 : "preciser le(s)quel(s)") */
.card--off { opacity: .68; background: var(--paper); }
.card--off:hover { opacity: 1; }
.card__mismatch {
  margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--warn-text);
  background: var(--warn-soft); border-radius: 7px; padding: 6px 9px; display: inline-block;
}

.list__sep { margin: 20px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--ink-55); text-transform: uppercase; letter-spacing: .05em; }

.empty { padding: 48px 24px; text-align: center; color: var(--ink-55); font-size: 14.5px; }
.empty__img { width: 64px; height: auto; opacity: .38; margin: 0 auto 16px; display: block; }

/* --- Colonne carte --- */
.mapwrap { position: relative; }
#map { position: absolute; inset: 0; }

/* Legende trois etats, modele Booking / Hotel.com (reference explicite V4) */
.map__legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 20;
  background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
  border: 1px solid var(--ink-20); border-radius: 12px; padding: 12px 14px;
  box-shadow: var(--shadow-2); width: 258px;
}
.map__legendTitle { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-55); }
.map__legendRow {
  display: flex; align-items: center; gap: 9px; padding: 7px 2px;
  cursor: pointer; min-height: 44px;
}
.map__legendPin {
  width: 15px; height: 15px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); flex: none;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.65);
}
.map__legendPin--match { background: var(--ok); }
.map__legendPin--filtered { background: var(--warn); }
.map__legendPin--outzone { background: var(--danger); }
.map__legendLabel { font-size: 12.5px; line-height: 1.35; color: var(--ink-70); flex: 1; }
.map__legendLabel b { color: var(--ink); font-variant-numeric: tabular-nums; }
.map__legendRow input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--geo); flex: none; }

/* Fiche flottante au tap d'un pin, mobile/tablette : le "post-it" de la V4,
   version 2026 du pattern carte plein ecran (Google Maps, Uber, Airbnb). */
.floatcard {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 60;
  max-width: 420px;
}
.floatcard[hidden] { display: none; }
.floatcard .card { margin: 0; box-shadow: var(--shadow-2); }
.floatcard__close {
  position: absolute; top: -14px; right: 4px; z-index: 2;
  width: 34px; height: 34px; min-height: 34px; border-radius: 50%;
  border: 2px solid var(--paper); background: var(--ink); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-1);
  font-size: 18px; line-height: 1; padding: 0;
}

.pin {
  border: 2px solid var(--ink); color: var(--ink); background: var(--paper);
  border-radius: 100px; padding: 4px 10px; font-size: 12.5px; font-weight: 800;
  box-shadow: var(--shadow-1); cursor: pointer; white-space: nowrap;
  transition: transform .12s;
}
.pin--match { border-color: var(--ok); color: #0B5C38; background: #fff; }
.pin--filtered { border-color: var(--warn); color: var(--warn-text); background: #fff; }
.pin--outzone { border-color: var(--danger); color: var(--danger); background: #fff; opacity: .82; font-weight: 700; }
.pin:hover, .pin.is-hot { transform: scale(1.13); z-index: 50; }
.pin--home { background: var(--geo); border-color: var(--geo); color: #fff; }

.maplibregl-popup-content { border-radius: 12px; padding: 13px 15px; box-shadow: var(--shadow-2); font-family: var(--font); }
.pop__t { font-weight: 700; font-size: 14.5px; margin-bottom: 2px; }
.pop__e { font-size: 12.5px; color: var(--ink-70); margin-bottom: 7px; }
.pop__d { font-size: 12.5px; font-weight: 700; color: var(--geo); }

/* ==========================================================================
   Page detail d'une offre
   ========================================================================== */

/* Zones nommees plutot qu'un simple ordre de grille : sur mobile, la carte
   "Postuler" (side) doit s'intercaler entre l'en-tete (head) et la longue
   description (body), jamais passer devant le titre du poste. */
.offer {
  max-width: 1000px; margin: 0 auto; padding: 34px clamp(16px, 5vw, 32px) 80px;
  display: grid; grid-template-columns: 1fr 316px;
  grid-template-areas: "head side" "body side";
  gap: 34px; align-items: start;
}
.offer__head { grid-area: head; }
.offer__body { grid-area: body; }
.offer__side { grid-area: side; }
.offer__back { font-size: 13.5px; color: var(--ink-55); margin-bottom: 18px; display: inline-block; }
.offer h1 { font-size: 30px; letter-spacing: -.9px; margin: 0 0 6px; line-height: 1.15; }
.offer__emp { font-size: 15.5px; color: var(--ink-70); margin: 0 0 16px; }
.offer__emp a { color: var(--rust-text); font-weight: 600; }
.offer__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 22px; }
.offer__block { border-top: 1px solid var(--ink-20); padding-top: 20px; margin-top: 20px; }
.offer__block h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-55); margin: 0 0 10px; }
.offer__block p, .offer__block li { font-size: 15px; line-height: 1.65; color: var(--ink-70); }
.offer__side { position: sticky; top: calc(var(--nav-h) + 20px); border: 1px solid var(--ink-20); border-radius: var(--radius); padding: 20px; background: var(--paper-2); }
/* Fond solide (pas la rgba --geo-soft) : sur --paper-2, la version transparente
   retombait a 4,36:1 avec le texte --geo, non conforme AA. */
.offer__dist { background: #eef4fa; color: var(--geo); border-radius: 10px; padding: 13px 14px; margin-bottom: 16px; }
.offer__dist strong { display: block; font-size: 19px; letter-spacing: -.4px; }
/* Pas d'opacite : diluait le bleu a 4,48:1 sur blanc (limite non conforme AA) */
.offer__dist span { font-size: 12.5px; }
.offer__side .btn { margin-bottom: 8px; }
.offer__aside-note { font-size: 12px; color: var(--ink-55); margin: 14px 0 0; line-height: 1.5; }

/* Bloc "Ou se trouve l'officine" : carte, puis trajet. Separe des boutons par
   un filet, pour qu'on lise deux choses distinctes et non un seul pave. */
.offer__lieu { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ink-20); }
.offer__lieu__t { font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
                  color: var(--ink-55); font-weight: 600; margin: 0 0 10px; }
#offerMap { height: 190px; border-radius: 10px; overflow: hidden; }

/* Puce ronde : deux points sur une carte etroite, sans etiquette qui deborde */
.puce { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff;
        box-shadow: 0 1px 4px rgba(10,10,10,.4); display: block; flex: 0 0 auto; }
.puce--offre  { background: var(--ok); }
.puce--depart { background: var(--geo); }

.offer__leg { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-55); }
.offer__leg li { display: flex; align-items: center; gap: 8px; margin-top: 5px; line-height: 1.35; }

.offer__dist { margin-top: 12px; margin-bottom: 0; padding: 12px 14px; }
.offer__dist__l { margin: 0 0 9px; }
.offer__dist__l:last-of-type { margin-bottom: 0; }
.offer__dist__k { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
                  color: var(--geo); opacity: .8; margin-bottom: 1px; }
.offer__dist__l strong { font-size: 17px; letter-spacing: -.3px; display: block; }
.offer__dist__from { margin: 10px 0 0; font-size: 12px; font-style: italic; opacity: .75; }
.offer__dist__vide { font-size: 13px; line-height: 1.5; margin: 12px 0 0; }

/* Un bouton qui a l'apparence d'un lien : l'action ouvre une fenetre, ce n'est
   pas une navigation, donc <button> et non <a href>. */
.lien-bouton {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--geo); text-decoration: underline; text-underline-offset: 2px;
}
.lien-bouton:hover { color: var(--ink); }
.f__eff { display: block; margin-top: 9px; font-size: 12.5px; }

/* ---------- L'essentiel : deux colonnes etiquette / valeur ---------- */
.offer__cles {
  display: grid; grid-template-columns: minmax(140px, auto) 1fr;
  gap: 0; margin: 0; font-size: 15px;
}
.offer__cles dt {
  padding: 10px 16px 10px 0; color: var(--ink-55); font-size: 13px;
  border-top: 1px solid var(--ink-20);
}
.offer__cles dd {
  padding: 10px 0; margin: 0; font-weight: 600;
  border-top: 1px solid var(--ink-20);
}
.offer__cles dt:first-of-type, .offer__cles dd:first-of-type { border-top: 0; }
@media (max-width: 560px) {
  .offer__cles { grid-template-columns: 1fr; }
  .offer__cles dt { padding-bottom: 0; border-top: 1px solid var(--ink-20); }
  .offer__cles dd { padding-top: 2px; border-top: 0; }
}

/* ---------- Sections d'une annonce agregee ---------- */
.offer__desc p { margin: 0 0 14px; line-height: 1.7; }
.offer__desc p:last-child { margin-bottom: 0; }
.offer__sec {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); margin: 26px 0 10px; padding-top: 16px;
  border-top: 1px solid var(--ink-20);
}
.offer__sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.offer__puces { margin: 0 0 14px; padding: 0; list-style: none; }
.offer__puces li { position: relative; padding-left: 18px; margin-bottom: 7px; line-height: 1.6; }
.offer__puces li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rust);
}

/* ---------- Fenetre modale ---------- */
/* Sans limite de hauteur ni defilement interne, un contenu plus long que le
   viewport (recap "Sauvegarder ma recherche", confirmation de candidature)
   deborde purement et simplement de l'ecran sur mobile : rien apres le bord
   n'est atteignable. Repli vh d'abord pour les navigateurs sans dvh. */
.modal {
  border: 0; padding: 0; background: none; max-width: 440px; width: calc(100% - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.modal::backdrop { background: rgba(10, 10, 10, .55); }
.modal__box {
  background: var(--paper); border-radius: var(--radius); padding: 26px 24px 22px;
  box-shadow: 0 18px 60px rgba(10, 10, 10, .28); text-align: left;
}
.modal__t { font-size: 22px; letter-spacing: -.5px; margin: 0 0 8px; }
.modal__sub { font-size: 13px; color: var(--ink-55); line-height: 1.5; margin: 0 0 18px; }
.modal__box label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.modal__in {
  /* 16px : sous ce seuil iOS zoome au focus, cf. regle .f input plus haut. */
  width: 100%; padding: 12px 13px; font: inherit; font-size: 16px;
  border: 1px solid var(--ink-20); border-radius: 8px; background: #fff;
  min-height: 44px;
}
.modal__in:focus { outline: 2px solid var(--rust); outline-offset: 1px; }
.modal__note { font-size: 12.5px; color: var(--ink-55); min-height: 17px; margin: 7px 0 10px; }
.modal__note.is-err { color: var(--danger); }
.modal__acts { display: flex; gap: 9px; margin-top: 14px; }
.modal__acts .btn { flex: 1; margin: 0; }
.modal__eff {
  display: block; width: 100%; margin-top: 16px; padding-top: 14px;
  border: 0; border-top: 1px solid var(--ink-20); background: none;
  font: inherit; font-size: 12.5px; color: var(--danger); cursor: pointer;
  text-align: left;
}
.modal__eff:hover { text-decoration: underline; }

/* ---------- Pages de contenu simples (contact, textes legaux) ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 40px 20px 70px; }
.page h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -1px; margin: 0 0 12px; }
.page h2 { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -.5px; margin: 34px 0 10px; }
.page h3 { font-size: 16px; margin: 22px 0 8px; }
.page__intro { color: var(--ink-55); line-height: 1.65; margin: 0 0 32px; }
.page p, .page li { line-height: 1.7; }
.page ul { padding-left: 20px; }
.page li { margin-bottom: 7px; }
.page__maj { font-size: 12.5px; color: var(--ink-55); font-style: italic; margin-top: 40px;
             padding-top: 16px; border-top: 1px solid var(--ink-20); }

.contact textarea {
  /* 16px : sous ce seuil iOS zoome au focus, cf. regle .f input plus haut. */
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper-2); resize: vertical; min-height: 130px;
}
.contact textarea:focus { outline: 2px solid var(--rust); outline-offset: 1px; }
.contact__rgpd { font-size: 12.5px; color: var(--ink-55); line-height: 1.55; margin: 18px 0 0; }
.contact__rgpd a { color: var(--geo); text-decoration: underline; }
.contact__direct {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--ink-20);
}
.contact__direct h2 { margin-top: 0; font-size: 17px; }
.contact__direct a { color: var(--geo); text-decoration: underline; font-size: 16px; }
.contact__delai { font-size: 12.5px; color: var(--ink-55); margin: 6px 0 0; }

/* ---------- Rapatriement d'une annonce France Travail ---------- */
.claim { background: #fdf6ee; border: 1px solid #f0d9bf; border-radius: 10px;
         padding: 16px 17px; margin-bottom: 18px; }
.claim__t { font-size: 15px; margin: 0 0 5px; letter-spacing: -.2px; }
.claim__s { font-size: 12.5px; color: var(--ink-55); line-height: 1.5; margin: 0 0 14px; }
.claim__l { list-style: none; margin: 0; padding: 0; }
.claim__i { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            background: #fff; border: 1px solid var(--ink-20); border-radius: 9px;
            padding: 12px 13px; margin-bottom: 9px; }
.claim__i:last-child { margin-bottom: 0; }
.claim__txt { flex: 1 1 220px; min-width: 0; }
.claim__nom { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; }
.claim__meta { font-size: 12px; color: var(--ink-55); margin: 3px 0 6px; }
.claim__sc { font-size: 11.5px; color: var(--ink-55); }
.claim__sc--fort { color: #0B5C38; font-weight: 600; }
.oclaim { margin: 14px 0 0; font-size: 13px; }
.oclaim__ok { margin: 0; font-size: 13px; color: #0B5C38; }

/* ---------- Le CV du candidat ---------- */
/* Zones nommees : la jauge (side) doit s'intercaler entre l'en-tete (head) et
   le formulaire (body) sur mobile, jamais passer devant le titre "Mon CV"
   (meme raisonnement que .offer et .annonce2). */
.cv {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "head side" "body side";
  gap: 40px;
  max-width: 1060px; margin: 0 auto; padding: 40px 20px 70px; align-items: start;
}
.cv__head { grid-area: head; }
.cv__body { grid-area: body; min-width: 0; }
.cv__side { grid-area: side; }
.cv h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -1px; margin: 0 0 12px; }
.cv__bloc { border-top: 1px solid var(--ink-20); padding-top: 22px; margin-top: 26px; }
.cv__bloc:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.cv__bloc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em;
               color: var(--ink-55); margin: 0 0 16px; }
.cv__imports { display: flex; gap: 10px; flex-wrap: wrap; }
.cv__imports .btn { margin: 0; }
.cv__pdf { cursor: pointer; display: inline-flex; align-items: center; }
.cv__joint { display: flex; align-items: center; gap: 12px; margin-top: 12px;
             background: var(--paper-2); border: 1px solid var(--ink-20);
             border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
/* 16px : sous ce seuil iOS zoome au focus, cf. regle .f input plus haut. */
.cv textarea { width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
               color: var(--ink); border: 1.5px solid var(--line);
               border-radius: var(--radius-sm); background: var(--paper-2); resize: vertical; }

.cv__side { position: sticky; top: calc(var(--nav-h) + 20px); }
.cv__jauge { background: var(--paper-2); border: 1px solid var(--ink-20);
             border-radius: var(--radius); padding: 20px; }
.cv__jaugeHead { display: flex; align-items: baseline; gap: 7px; }
.cv__pct { font-size: 34px; font-weight: 700; letter-spacing: -1.4px; color: var(--rust); }
.cv__lbl { font-size: 13px; color: var(--ink-55); }
.cv__barre { height: 8px; border-radius: 99px; background: var(--ink-20);
             overflow: hidden; margin: 12px 0 14px; }
/* Pas de transition sur la largeur. Une jauge qui se remplit en glissant est
   jolie, mais sa valeur visible depend alors de l'animation : si celle-ci ne
   demarre pas, la barre reste vide alors que le pourcentage affiche 100 %.
   Une jauge doit etre juste avant d'etre agreable. */
.cv__barre i { display: block; height: 100%; background: var(--rust); border-radius: 99px; }
.cv__etat { font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.cv__manque { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--ink-55); }
.cv__manque li { padding-left: 15px; position: relative; margin-bottom: 6px; line-height: 1.4; }
.cv__manque li::before { content: "•"; position: absolute; left: 2px; color: var(--rust); }

@media (max-width: 860px) {
  /* Empile en 3 zones : la jauge s'intercale entre le titre "Mon CV" et le
     formulaire, jamais avant le titre, jamais apres le formulaire. */
  .cv {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "side" "body";
    gap: 26px;
  }
  .cv__side { position: static; }
}

/* ---------- Publication d'une annonce ---------- */
/* Zones nommees : la jauge (side) doit s'intercaler entre l'en-tete (head) et
   le formulaire (body) sur mobile, jamais passer devant le titre "Publier une
   annonce" (meme raisonnement que .offer, cf. section "Page detail d'une offre"). */
.annonce2 {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "head side" "body side";
  gap: 40px;
  max-width: 1120px; margin: 0 auto; padding: 34px 20px 70px; align-items: start;
}
.annonce2__head { grid-area: head; }
.annonce2__body { grid-area: body; min-width: 0; }
.annonce2__side { grid-area: side; }
.annonce2 h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -1px; margin: 14px 0 12px; }
/* 16px : sous ce seuil iOS zoome au focus, cf. regle .f input plus haut. */
.annonce2 textarea { width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
                     color: var(--ink); border: 1.5px solid var(--line);
                     border-radius: var(--radius-sm); background: var(--paper-2); resize: vertical; }
.annonce2__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.annonce2__acts .btn { margin: 0; }
.annonce2__side { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 16px; }

/* L'apercu : ce que verra le candidat, pendant que le recruteur ecrit. */
.annonce2__apercu { background: var(--paper-2); border: 1px solid var(--ink-20);
                    border-radius: var(--radius); padding: 18px; }
.anap__t { font-size: 16px; letter-spacing: -.3px; margin: 0 0 3px; }
.anap__emp { font-size: 12.5px; color: var(--rust-dark); margin: 0 0 10px; }
.anap__sec { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
             color: var(--ink-55); margin: 14px 0 6px; font-weight: 600; }
.annonce2__apercu .offer__puces li { font-size: 13px; margin-bottom: 5px; }
.annonce2__apercu p { font-size: 13px; line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
  /* Empile en 3 zones : la jauge s'intercale entre le titre "Publier une
     annonce" et le formulaire, jamais avant le titre, jamais apres le
     formulaire (elle serait alors invisible tant qu'on n'a pas tout rempli
     et tout scrolle). */
  .annonce2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "side" "body";
    gap: 26px;
  }
  .annonce2__side { position: static; }
}

/* ---------- Validation des fiches ---------- */
.page--large { max-width: 940px; }
.admin__tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 24px; }
.admin__tabs button { background: #fff; border: 1px solid var(--ink-20); border-radius: 99px;
                      padding: 7px 16px; font: inherit; font-size: 13.5px; cursor: pointer; }
.admin__tabs button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.admfiche { border: 1px solid var(--ink-20); border-radius: var(--radius);
            padding: 20px; margin-bottom: 16px; background: var(--paper-2); }
.admfiche__h { display: flex; align-items: center; justify-content: space-between;
               gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.admfiche__h h2 { font-size: 19px; margin: 0; letter-spacing: -.4px; }
.statut--ko { background: #fbe9e9; color: #8a1212; }
.admfiche__ct { font-size: 12.5px; font-weight: 600; color: var(--ink-55);
                margin: 18px 0 7px; }
.admfiche__check { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.admfiche__check li { padding-left: 20px; position: relative; margin-bottom: 6px; line-height: 1.45; }
.admfiche__check li::before { content: "☐"; position: absolute; left: 0; color: var(--ink-55); }
.admfiche__acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px;
                  padding-top: 16px; border-top: 1px solid var(--ink-20); }
.admfiche__acts .btn { margin: 0; }

/* ---------- Creation de la fiche officine ---------- */
.fiche { max-width: 720px; margin: 0 auto; padding: 34px 20px 70px; }
.fiche h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.9px; margin: 14px 0 10px; }
.fiche__intro { color: var(--ink-55); line-height: 1.6; margin: 0 0 30px; max-width: 46em; }
.fiche__bloc { border-top: 1px solid var(--ink-20); padding-top: 24px; margin-top: 28px; }
.fiche__bloc:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.fiche__bloc h2 { display: flex; align-items: center; gap: 11px; font-size: 20px;
                  letter-spacing: -.4px; margin: 0 0 8px; }
.fiche__num { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto;
              border-radius: 50%; background: var(--rust); color: var(--ink);
              font-size: 14px; font-weight: 700; }
.fiche__aide { color: var(--ink-55); font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; max-width: 46em; }
.fiche__verif { margin-top: 18px; padding: 18px; border-radius: var(--radius);
                background: var(--paper-2); border: 1px solid var(--ink-20); }
#fVerifMap { height: 180px; border-radius: 10px; overflow: hidden; margin-top: 16px; }
.fiche__vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                    gap: 12px; margin-top: 14px; }
.vignette { margin: 0; }
.vignette img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;
                border: 1px solid var(--ink-20); display: block; }
.vignette figcaption { font-size: 11.5px; color: var(--ink-55); margin-top: 5px; }

/* Recapitulatif des criteres sauvegardes */
.modal__recap { list-style: none; margin: 16px 0 4px; padding: 12px 14px;
                background: var(--paper-2); border-radius: 8px; font-size: 13px; }
.modal__recap li { margin-bottom: 5px; line-height: 1.45; }
.modal__recap li:last-child { margin-bottom: 0; }
.modal__recap b { font-weight: 600; color: var(--ink-55); }

/* Case a cocher du consentement email : jamais pre-cochee.
   min-height 44px sur le label entier (pas juste la case native de 17px) :
   c'est toute la ligne qui doit rester tapable, texte compris. */
.modal__check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0;
                font-weight: 400 !important; font-size: 14px; line-height: 1.45; cursor: pointer;
                min-height: 44px; }
.modal__check input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--rust); flex: 0 0 auto; }

/* ==========================================================================
   ESPACE RECRUTEUR : trois etats, une seule page
   ========================================================================== */

/* Un display: grid ou flex pose plus bas ecrase le display: none de l'attribut
   hidden. Sans cette regle, les trois etats s'empilent a l'ecran. */
[hidden] { display: none !important; }

.rec2 { max-width: 1180px; margin: 0 auto; padding: 34px 22px 70px; }

/* Etat 1 : la porte. Le pitch a gauche, l'apercu floute a droite. */
.rec2__porte { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; }
.rec2__pitch h1 { font-size: clamp(25px, 3.1vw, 38px); letter-spacing: -1px; line-height: 1.2; margin: 16px 0 14px; }
.rec2__sub { color: var(--ink-55); line-height: 1.65; margin: 0 0 24px; max-width: 40em; }
.rec2__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rec2__actions .btn { margin: 0; }
.rec2__gratuit { font-size: 12.5px; color: var(--ink-55); margin: 14px 0 0; }

.rec2__teaser { background: var(--bandeau); border-radius: var(--radius); padding: 28px 26px; color: #fff; }
.rec2__kpiBig { text-align: left; }
.rec2__kpiN { font-size: 54px; font-weight: 700; color: var(--rust); letter-spacing: -2px; line-height: 1; }
.rec2__kpiL { font-size: 20px; font-weight: 600; margin-left: 8px; }
.rec2__kpiS { display: block; font-size: 13.5px; opacity: .72; margin-top: 8px; }
.rec2__flou { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.rec2__flou li { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; font-size: 13.5px; }
.rec2__flou span { flex: 1; opacity: .8; }
.rec2__flou i { width: 62px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); filter: blur(2.5px); }
.rec2__cadenas { font-size: 12px; opacity: .6; margin: 18px 0 0; font-style: italic; }

/* Etat 2 : la fiche manque. */
.rec2__etape { max-width: 620px; margin: 40px auto; text-align: center; }
.rec2__etape h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.8px; margin: 0 0 12px; }
.rec2__etape .rec2__sub { margin-left: auto; margin-right: auto; }

/* Etat 3 : le tableau de bord. */
.rec2__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
              flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--ink-20); }
.rec2__head h1 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.7px; margin: 0 0 4px; }
.rec2__adr { color: var(--ink-55); font-size: 14px; margin: 0; }
.statut { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 99px; white-space: nowrap; }
.statut--ok { background: #e6f4ec; color: #0B5C38; }
.statut--attente { background: #fdf0e3; color: #8a4b12; }

.rec2__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; margin-top: 24px; align-items: start; }
.rec2__col { display: grid; gap: 18px; }
.rec2__panel { background: var(--paper-2); border: 1px solid var(--ink-20);
               border-radius: var(--radius); padding: 20px; }
.rec2__panelHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rec2__panelHead .rec__h2 { margin: 0; }
.btn--sm { padding: 8px 15px; font-size: 13.5px; margin: 0; }
.rec2__anon { font-size: 12.5px; color: var(--ink-55); line-height: 1.5;
              margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--ink-20); }

.rec2__tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.rec2__tabs button { background: #fff; border: 1px solid var(--ink-20); border-radius: 99px;
                     padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.rec2__tabs button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.annonce { background: #fff; border: 1px solid var(--ink-20); border-radius: 10px;
           padding: 15px 16px; margin-bottom: 11px; }
.annonce:last-child { margin-bottom: 0; }
.annonce__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.annonce__h h3 { font-size: 15.5px; margin: 0; letter-spacing: -.2px; }
.annonce__age { font-size: 12px; color: var(--ink-55); margin: 5px 0 12px; }
.annonce__stats { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.annonce__stats li { display: flex; flex-direction: column; }
.annonce__stats b { font-size: 19px; letter-spacing: -.4px; }
.annonce__stats span { font-size: 11.5px; color: var(--ink-55); }
.annonce__taux { font-size: 12px; color: var(--geo); margin: 11px 0 0; }

@media (max-width: 900px) {
  .rec2__porte, .rec2__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Invitation a creer un compte, au centre de la carte ---------- */

/* La fenetre est opaque par defaut. Son apparition passe par une animation et
   non par une transition d'opacite : si l'animation ne joue pas (appareil
   lent, moteur de rendu strict), le contenu reste lisible au lieu de rester
   a moitie transparent. */
.invite {
  position: absolute; top: 50%; left: 50%; z-index: 200;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100% - 40px));
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(10, 10, 10, .3);
  padding: 24px 22px 20px; text-align: center;
}
/* L'animation ne touche QUE la position. L'opacite reste a 1 en permanence :
   une fenetre a moitie transparente par-dessus une carte est illisible, et
   c'est exactement ce qui arrive si l'animation ne va pas a son terme. */
@keyframes inviteEntre {
  from { transform: translate(-50%, -44%) scale(.96); }
  to   { transform: translate(-50%, -50%) scale(1); }
}
.invite.is-on { animation: inviteEntre .24s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .invite.is-on { animation: none; }
}
.invite__x {
  position: absolute; top: 8px; right: 9px; width: 30px; height: 30px;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-55);
}
.invite__x:hover { background: var(--paper-2); color: var(--ink); }
.invite__t { font-size: 18px; font-weight: 700; letter-spacing: -.4px; margin: 4px 0 8px; line-height: 1.3; }
.invite__s { font-size: 13.5px; color: var(--ink-55); line-height: 1.5; margin: 0 0 18px; }
.invite .btn { margin: 0; }
.invite__cx { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--geo); text-decoration: underline; }

/* ---------- Sauvegarder ma recherche, en tete du panneau de filtres ---------- */

.f--save { padding-bottom: 18px; border-bottom: 1px solid var(--ink-20); }

/* Un bouton pleine largeur en corps 15 passe sur deux lignes dans une colonne
   de 250 px, et prend alors autant de place que le titre du panneau. On le
   pose en pastille compacte : il reste la premiere action proposee sans
   ecraser les filtres qui suivent. */
#btnSaveRech {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; margin: 0; padding: 8px 15px;
  border-radius: 999px; font-size: 13.5px; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
}
#btnSaveRech svg { flex: 0 0 auto; }

/* La liste des recherches gardees, repliee par defaut : elle ne doit pas
   pousser les filtres hors de l'ecran quand elle en contient dix. */
.rechs { margin-top: 12px; }
.rechs__t {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--geo);
  list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0;
}
.rechs__t::-webkit-details-marker { display: none; }
.rechs__t::before {
  content: "›"; display: inline-block; font-size: 16px; line-height: 1;
  transition: transform .2s; transform: rotate(90deg);
}
.rechs[open] .rechs__t::before { transform: rotate(-90deg); }
.rechs__n { color: var(--ink-55); font-weight: 400; }
.rechs__l { list-style: none; margin: 8px 0 0; padding: 0; }
.rechs__i { display: flex; align-items: stretch; gap: 4px; margin-bottom: 6px; }
.rechs__b {
  flex: 1; text-align: left; background: var(--paper-2); border: 1px solid var(--ink-20);
  border-radius: 8px; padding: 9px 11px; cursor: pointer; font: inherit;
  transition: border-color .15s, background .15s;
}
.rechs__b:hover { border-color: var(--rust); background: #fff; }
.rechs__nom { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.rechs__res { display: block; font-size: 11.5px; color: var(--ink-55); margin-top: 2px; }
.rechs__mail { display: block; font-size: 11px; color: var(--geo); margin-top: 4px; }
.rechs__x {
  flex: 0 0 auto; width: 30px; background: none; border: 1px solid transparent;
  border-radius: 8px; color: var(--ink-55); font-size: 19px; line-height: 1;
  cursor: pointer;
}
.rechs__x:hover { color: var(--danger); border-color: var(--ink-20); }

/* ==========================================================================
   Bandeau maquette + responsive
   ========================================================================== */

/* Bandeau de maquette : sa hauteur est declaree pour que le premier ecran
   la deduise. Il disparaitra en production, le calcul restera juste. */
:root { --mock-h: 30px; }

.mock {
  background: var(--ink); color: rgba(255,255,255,.75);
  font-size: 12.5px; text-align: center; padding: 7px 16px;
}
.mock b { color: var(--rust-mid); }

/* ==========================================================================
   Recherche en mobile/tablette (< 1180px) : reprise responsive de l'esprit
   V4 "carte plein ecran + post-it flottant", au lieu du simple empilement.
   Le desktop 3-colonnes (>= 1180px) n'est pas touche par ce bloc.
   ========================================================================== */
@media (max-width: 1180px) {
  .hero__inner, .pillars, .spaces__inner { grid-template-columns: 1fr; }
  .hero__art { display: none; }
  /* Empile en 3 zones : la carte "Postuler" s'intercale entre le titre du
     poste et sa longue description (15-20 lignes), au lieu d'atterrir apres,
     hors ecran, ou de passer devant le titre. */
  .offer {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "side" "body";
  }
  .offer__side { position: static; }

  .search {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* Barre "Filtres (n) / Liste / Carte", sticky sous le bandeau noir */
  .search__mobbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: var(--nav-h); z-index: 500;
    background: var(--paper); border-bottom: 1px solid var(--ink-20);
    padding: 10px clamp(16px, 4vw, 32px);
  }
  .search__filtBtn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
    font-size: 13.5px; font-weight: 600; padding: 9px 14px;
    border-radius: 100px; min-height: 44px;
  }
  .search__viewToggle {
    margin-left: auto; display: flex; background: var(--ink-08);
    border-radius: var(--radius-sm); padding: 3px;
  }
  .search__viewToggle button {
    border: 0; background: transparent; font-size: 13.5px; font-weight: 600;
    color: var(--ink-55); padding: 9px 16px; border-radius: 7px; min-height: 38px;
  }
  .search__viewToggle button.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }

  /* Filtres : tiroir plein ecran plutot que bloc en tete de page (finding
     "737px de filtres avant la moindre offre" de l'audit du 31/07). */
  .filters {
    position: fixed; inset: 0; z-index: 950;
    padding: 18px 20px 110px;
    transform: translateY(100%);
    transition: transform .22s ease;
  }
  .filters.is-open { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .filters { transition: none; } }
  .filters__close {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 18px; padding: 10px 4px; border: 0; background: transparent;
    font-size: 14px; font-weight: 700; color: var(--ink); min-height: 44px;
  }

  /* Carte : plein ecran par defaut (c'est le produit), la liste devient
     une vue alternative accessible via la bascule ci-dessus. */
  .mapwrap {
    /* 100vh compte la zone masquee par la barre d'outils escamotable de
       Safari iOS : le bas de la carte peut se retrouver coupe selon son etat.
       100dvh suit la hauteur reellement visible ; repli vh d'abord pour les
       navigateurs qui ne le supportent pas encore. */
    height: calc(100vh - var(--nav-h) - 53px);
    height: calc(100dvh - var(--nav-h) - 53px);
    min-height: 420px;
  }
  .results { border-right: 0; }
  .search[data-view="liste"] .mapwrap { display: none; }
  .search:not([data-view="liste"]) .results { display: none; }

  /* Cibles de touche plus genereuses sur les pins, c'est l'element cle
     du mode carte plein ecran. */
  .pin { padding: 7px 13px; font-size: 13px; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .pillars { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Bloc benefices (accueil)
   ========================================================================== */

.benefits { padding: 8px clamp(16px, 5vw, 64px) 84px; }
.benefits__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }

.benefits__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.benefits__list li {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--ink-20);
}
.benefits__list li:last-child { border-bottom: 0; }
.benefits__n {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rust-soft); color: var(--rust-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 14.5px;
}
.benefits__list b { display: block; font-size: 16.5px; letter-spacing: -.3px; margin-bottom: 4px; }
.benefits__list div { font-size: 14.5px; line-height: 1.55; color: var(--ink-70); }

.benefits__pivot {
  background: var(--ink); color: #fff; border-radius: 20px;
  padding: 38px 34px; text-align: center; box-shadow: var(--shadow-2);
  position: relative; overflow: hidden;
}
.benefits__pivot::after {
  content: ""; position: absolute; inset: auto -30% -55% -30%; height: 70%;
  background: radial-gradient(closest-side, rgba(201,123,68,.5), transparent);
}
.benefits__pivot > * { position: relative; z-index: 1; }
.benefits__mais { display: block; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--rust-mid); font-weight: 700; margin-bottom: 14px; }
.benefits__punch { font-size: clamp(22px, 2.4vw, 29px); line-height: 1.22; letter-spacing: -.8px; margin: 0 0 22px; font-weight: 700; }
.benefits__punch em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--rust-mid); }
.benefits__free { font-size: 18px; margin: 0 0 24px; color: rgba(255,255,255,.82); }
.benefits__free b { color: #fff; font-size: 21px; letter-spacing: -.4px; }
.benefits__sub { font-size: 13.5px; color: rgba(255,255,255,.66); margin: 14px 0 0; }

/* ==========================================================================
   Espace recruteur
   ========================================================================== */

.rec__hero { padding: clamp(34px, 5vw, 60px) clamp(16px, 5vw, 64px) 30px; background: radial-gradient(900px 380px at 15% -20%, var(--rust-soft), transparent 60%); }
.rec__heroInner { max-width: 1180px; margin: 0 auto; }
.rec__hero h1 { font-size: clamp(27px, 3.4vw, 40px); letter-spacing: -1.2px; line-height: 1.1; margin: 0 0 14px; }
.rec__hero .hero__sub { margin: 0; }

.rec { max-width: 1180px; margin: 0 auto; padding: 8px clamp(16px, 5vw, 64px) 80px; display: grid; grid-template-columns: 350px 1fr; gap: 30px; align-items: start; }

.rec__panel { border: 1px solid var(--ink-20); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.rec__h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-55); margin: 0 0 14px; }

/* Le compteur : ecran cle, celui qui doit declencher l inscription du titulaire */
.rec__kpi { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 24px 22px; margin-bottom: 16px; }
.rec__kpi strong { font-size: 46px; letter-spacing: -2px; color: var(--rust-mid); line-height: 1; }
.rec__kpi span { font-size: 19px; font-weight: 600; margin-left: 6px; }
.rec__kpi em { display: block; font-style: normal; font-size: 14px; color: rgba(255,255,255,.72); margin-top: 8px; line-height: 1.45; }
.rec__mix { font-size: 13px; color: rgba(255,255,255,.58); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); }

.repart { display: grid; gap: 9px; }
.repart__row { display: grid; grid-template-columns: 1fr 70px 22px; gap: 10px; align-items: center; font-size: 13px; }
.repart__lbl { color: var(--ink-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repart__bar { height: 7px; background: var(--ink-08); border-radius: 100px; overflow: hidden; }
.repart__fill { height: 100%; background: var(--rust); border-radius: 100px; }
.repart__row b { text-align: right; font-variant-numeric: tabular-nums; }

.rec__cta { border: 1px solid var(--rust); background: var(--rust-soft); border-radius: var(--radius); padding: 20px; }
.rec__cta p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-70); }
.rec__cta .btn { margin-bottom: 8px; }

.rec__note { background: var(--geo-soft); color: var(--geo); border-radius: var(--radius); padding: 15px 17px; font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; }

.profils { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 14px; }
.profil { border: 1px solid var(--ink-20); border-radius: var(--radius); padding: 17px; background: var(--paper); transition: border-color .14s, box-shadow .14s; }
.profil:hover { border-color: var(--ink-30); box-shadow: var(--shadow-1); }
.profil--actif { border-color: var(--ok); background: linear-gradient(var(--ok-soft), var(--paper) 60%); }

.profil__top { display: flex; gap: 12px; align-items: center; margin-bottom: 13px; }
.profil__av { width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: none; }
.profil__av--anon { background: var(--ink-08); color: var(--ink-55); }
.profil__metier { font-size: 15px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2; }
.profil__sub { font-size: 12.5px; color: var(--ink-55); margin-top: 2px; }
.profil__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.profil .card__geo { margin-bottom: 12px; }
.profil__note { display: block; font-size: 11.5px; color: var(--ink-55); line-height: 1.45; margin-top: 9px; }

/* ==========================================================================
   Remplacements
   ========================================================================== */

.rempla { max-width: 1180px; margin: 0 auto; padding: 8px clamp(16px, 5vw, 64px) 80px; display: grid; grid-template-columns: 400px 1fr; gap: 34px; align-items: start; }

.rempla__cal { border: 1px solid var(--ink-20); border-radius: var(--radius); padding: 22px; position: sticky; top: calc(var(--nav-h) + 16px); }
.rempla__calHead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }

.cal { display: grid; gap: 20px; }
.cal__titre { font-size: 14.5px; font-weight: 700; text-transform: capitalize; margin-bottom: 10px; letter-spacing: -.2px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow { font-size: 11px; font-weight: 700; color: var(--ink-55); text-align: center; padding-bottom: 5px; }
.cal__vide { aspect-ratio: 1; }
.cal__j {
  aspect-ratio: 1; border: 0; background: var(--ink-08); color: var(--ink-70);
  border-radius: 7px; font-size: 12.5px; font-weight: 600;
  transition: background .12s, color .12s, transform .1s;
}
.cal__j:hover { background: var(--ink-20); }
.cal__j--we { background: transparent; color: var(--ink-55); }
.cal__j.is-on { background: var(--rust); color: #fff; transform: scale(1.06); }

.rempla__alerte { margin-top: 22px; padding: 17px; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--ink-20); }
.rempla__alerte b { font-size: 14.5px; }
.rempla__alerte p { font-size: 13px; line-height: 1.5; color: var(--ink-70); margin: 6px 0 13px; }

.rempla__res .results__head strong { font-size: 19px; }

@media (max-width: 1180px) {
  .benefits__inner, .rec, .rempla { grid-template-columns: 1fr; }
  .rempla__cal { position: static; }
}

@media (max-width: 480px) {
  /* Calendrier remplacement : cellules >= 44px au doigt (norme interne
     Pharm'Alpha), gabarit resserre pour degager la largeur necessaire. */
  .rempla { padding-left: 12px; padding-right: 12px; }
  .rempla__cal { padding: 16px 10px; }
  .cal__grid { gap: 3px; }
}

/* ==========================================================================
   BANDEAU HAUT ET BAS - identiques sur toutes les pages
   Logo a gauche, cliquable, il ramene a l'accueil (demande de la V4).
   ========================================================================== */

.topbar {
  background: #212121;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 clamp(16px, 3vw, 36px);
  min-height: 96px;
  position: sticky;
  top: 0;
  z-index: 900;
}
.topbar__logo { display: block; flex: none; }
.topbar__logo img { height: 68px; width: auto; display: block; }

.topbar__links { display: flex; align-items: flex-start; gap: clamp(4px, 1.4vw, 20px); }
.topbar__link {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 13px; color: rgba(255,255,255,.88); white-space: nowrap;
  padding: 7px 9px; border-radius: 8px;
  transition: background .15s, color .15s;
}
.topbar__link:hover { background: rgba(255,255,255,.1); color: #fff; }
.topbar__link.is-active { color: var(--rust); }
.topbar__link.is-active svg { stroke: var(--rust); }
.topbar__link svg { display: block; }

.sitefoot {
  background: #212121; color: rgba(255,255,255,.62);
  padding: clamp(34px, 4vw, 52px) clamp(16px, 4vw, 40px) clamp(20px, 2vw, 26px);
}
.sitefoot__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 34px 46px; max-width: 1180px; margin: 0 auto;
}
.sitefoot__logo img { height: 56px; width: auto; display: block; }
.sitefoot__bl { font-size: 13.5px; line-height: 1.55; margin: 14px 0 0; max-width: 24em; }

.sitefoot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.sitefoot__col { display: flex; flex-direction: column; gap: 9px; }
.sitefoot__col h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: #fff; margin: 0 0 3px; font-weight: 600;
}
/* .72 sur #212121 mesure 6,4:1, conforme AA. Ne pas descendre plus bas. */
.sitefoot__col a { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.35; }
.sitefoot__col a:hover { color: var(--rust); }

.sitefoot__bas {
  max-width: 1180px; margin: clamp(28px, 3vw, 40px) auto 0;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
}
.sitefoot__sources { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0 0 8px; }
.sitefoot__sources a { color: rgba(255,255,255,.78); text-decoration: underline; }
.sitefoot__sources a:hover { color: var(--rust); }
/* .42 mesurait 3,96:1 sur #212121 (axe-core, non conforme AA) : remonte a .5 -> 5,04:1 */
.sitefoot__mentions { font-size: 12px; font-style: italic; color: rgba(255,255,255,.5); max-width: 46em; margin: 0; }

@media (max-width: 860px) {
  .sitefoot__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sitefoot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .sitefoot__cols { grid-template-columns: minmax(0, 1fr); }
}

/* Attribution MapLibre/OpenStreetMap : lien injecte par la librairie, obligatoire
   sous licence. axe-core le signale non distinguable du texte voisin : on force
   un soulignement et une couleur plus foncee (WCAG 1.4.1 + contraste 3:1). */
.maplibregl-ctrl-attrib a { text-decoration: underline; color: #1a1a1a; }

/* ==========================================================================
   ACCUEIL
   ========================================================================== */

/* ---------- Hero coupe en deux, carte en filigrane ---------- */

.split {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: clamp(330px, 44vh, 440px);
  /* pas d'overflow cache : le caducee mord volontairement sur la barre du
     haut et sur le bandeau des 3 points */
}
/* Les fonds de carte restent contenus dans leur moitie */
.split__side { overflow: hidden; }

.split__side {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(44px, 5vw, 62px) clamp(20px, 4vw, 54px);
  color: var(--ink);
  isolation: isolate;
}

/* La carte, en couche du dessous. Elle est desaturee : les deux moities
   partent du meme gris, la difference ne vient plus de l'image mais du
   survol. Chaque espace garde son propre secteur de carte. */
.split__side::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.04);
}
.split__side--cand::before { background-image: url("../img/map-cand.jpg?v=19"); }
.split__side--rec::before  { background-image: url("../img/map-rec.jpg?v=17"); }

/* Le voile, en couche du dessus. Gris au repos, orange au survol : c'est lui
   qui porte tout le mouvement. Le texte reste au-dessus, donc lisible dans
   les deux etats. */
.split__side::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(246, 245, 243, .58);
}
/* Orange tres dilue. L'ancienne teinte de l'espace candidat etait a peine
   plus chaude que le gris ; au-dela de .07 la moitie tire vers le saumon. */
.split__side:hover::after { background: rgba(255, 145, 77, .07); }

/* ---------- Separateur = coupe d'Hygie (caducee pharmaceutique) ----------
   Le trait qui coupait le hero en deux devient le symbole du metier : un
   ruban ondule (tuile SVG repetee = le corps du serpent) qui traverse une
   plaque ronde portant la coupe stylisee, posee au centre de la cesure.
   Fond translucide flou : la lisibilite ne depend jamais du point de la
   carte (sepia a gauche, grise a droite) qui se trouve dessous. Purement
   decoratif -> aria-hidden, pointer-events:none (ne doit jamais intercepter
   les clics des deux zones "Espace Candidat / Espace Recruteur"). */

.split__side h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.6px; margin: 0 0 14px; }
.split__side p { font-size: clamp(15px, 1.4vw, 18px); font-style: italic; line-height: 1.45; margin: 0 0 26px; max-width: 17em; }
.split__enter {
  display: inline-block; background: var(--rust); color: var(--ink);
  border: 1px solid var(--rust-dark); padding: 13px 46px; border-radius: 3px;
  font-size: 17px; font-weight: 600; transition: background .15s, transform .12s;
}
.split__side:hover .split__enter { background: var(--rust-dark); transform: translateY(-1px); }

/* ---------- Deux colonnes descriptives (V4) ---------- */

/* Meme grille que le hero : chaque paragraphe tombe pile sous son espace */
/* Meme grille que le hero, sans marge laterale sur le conteneur :
   chaque paragraphe tombe exactement au centre de son espace. */
.duo {
  margin: 0; padding: clamp(34px, 4vw, 50px) 0 clamp(46px, 5vw, 66px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.duo__col { max-width: 34em; margin: 0 auto; padding: 0 clamp(16px, 3vw, 34px); }
.duo__col > p { font-size: clamp(15px, 1.4vw, 17.5px); font-weight: 700; font-style: italic; text-align: center; line-height: 1.4; margin: 0 0 16px; }
.duo__col { text-align: center; }
.duo__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.duo__col li { font-size: 15px; line-height: 1.45; }

/* ---------- Bandeau noir : les 3 points, pastilles a cheval ---------- */

.steps { position: relative; }
.steps__band { background: #212121; padding: 54px clamp(16px, 4vw, 40px) 48px; }
.steps__grid { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 46px); }
.step { text-align: center; color: #fff; }
.step__n {
  width: 72px; height: 72px; border-radius: 50%;
  margin: -90px auto 16px;
  display: grid; place-items: center;
  background: var(--rust); color: var(--ink);
  font-size: 32px; font-weight: 700;
  border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.25);
  position: relative; z-index: 3;
}
.step b { display: block; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.84); margin: 0; }

/* ---------- Les cinq "Que tu..." ---------- */

.quetu {
  max-width: 900px; margin: 0 auto;
  padding: clamp(46px, 5vw, 68px) clamp(16px, 4vw, 40px) 0;
}
.quetu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.quetu li {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.45;
  padding: 15px 0; border-bottom: 1px solid var(--ink-20);
}
.quetu li:last-child { border-bottom: 0; }
.quetu li::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: var(--rust-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08236' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.quetu li b { font-weight: 700; }

/* ---------- Signature de fin ---------- */

.sign {
  text-align: center;
  padding: clamp(44px, 5vw, 66px) clamp(16px, 4vw, 40px) clamp(52px, 6vw, 76px);
}
.sign img { height: clamp(74px, 8vw, 104px); width: auto; margin: 0 auto 18px; display: block; }
.sign p { font-size: clamp(17px, 2vw, 24px); font-weight: 700; letter-spacing: -.4px; margin: 0; line-height: 1.35; }
.sign p span { color: var(--rust-text); }

@media (max-width: 900px) {
  .topbar { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .topbar__links { flex-wrap: wrap; justify-content: center; }
  .split { grid-template-columns: 1fr; }
  /* La cesure devient horizontale : meme motif (coupe + ruban ondule),
     mais tuile orientee en X et badge en position statique dans le flux
     (entre les deux <a>, laisse par l'auto-placement de la grille a 1
     colonne) au lieu d'un positionnement absolu calcule sur une hauteur
     inconnue. */
  
  
  
  .duo, .steps__grid { grid-template-columns: 1fr; }
  .steps__grid { gap: 34px; }
  .step__n { margin: 0 auto 12px; }
  .steps__band { padding: 40px 16px; }
  .sitefoot { flex-direction: column; align-items: flex-start; }
}

/* Offre pourvue ou lien casse */
.offer__gone { grid-column: 1 / -1; text-align: center; padding: clamp(50px, 8vw, 90px) 20px; }
.offer__gone h1 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 10px; }
.offer__gone p { font-size: 16px; color: var(--ink-55); margin: 0 0 26px; }

/* Attribution de la source, obligatoire sur les offres agregees */
.offer__source { font-size: 13px; color: var(--ink-55); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ink-20); }
.offer__source a { color: var(--rust-text); text-decoration: underline; }
.offer__source[hidden] { display: none; }

/* Titre de page pour les moteurs et les lecteurs d'ecran : le hero porte
   deja le message visuellement, mais un H1 reel doit exister. */
.sr-titre {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Retour du champ ville : succes, echec ou recherche en cours */
.f__note { font-size: 12.5px; color: var(--ink-55); margin: 6px 0 0; min-height: 1em; line-height: 1.35; }
.f__note--ko { color: #B23B2E; font-weight: 600; }

/* Toast : retour visuel systematique sur les actions Postuler / Contacter /
   Sauvegarder / Demander le contact / Je suis dispo (etat "succes" manquant
   releve dans l'audit UX du 31/07). aria-live="polite" annonce le message
   aux lecteurs d'ecran sans interrompre la lecture en cours. */
.toaster {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 3000; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; width: min(92vw, 380px);
}
.toast {
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  padding: 13px 20px; border-radius: 100px; box-shadow: var(--shadow-2);
  text-align: center; opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .01ms; }
}

/* Cibles tactiles : la bascule Carte/Liste est une commande principale sur
   mobile, elle doit tenir les 44 px, comme les controles de zoom de la carte. */
@media (max-width: 1180px) {
  .viewToggle button, .search__viewToggle button, [class*="viewToggle"] button { min-height: 44px; padding: 11px 18px; }
  .maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; }
  .filters__reset { min-height: 44px; }
  /* Le selecteur visait ".sitefoot__links", une classe qui n'existe dans aucun
     HTML du site : la regle ne s'appliquait donc jamais et les 12 liens du
     pied de page restaient a ~18px de haut sur mobile. Bon selecteur, 44px. */
  .sitefoot__col a { display: flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   PREMIER ECRAN
   Le hero et le bandeau des 3 points occupent exactement une hauteur d'ecran :
   on ne doit apercevoir aucun blanc sous le bandeau avant de faire defiler.
   Le hero absorbe l'espace restant, le bandeau garde sa hauteur naturelle.
   ========================================================================== */

/* Le premier ecran s'arrete juste avant le titre du bloc suivant : on laisse
   depasser son amorce sous le bandeau, c'est elle qui donne envie de defiler. */
:root { --amorce: 132px; }

.fold {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h) - var(--mock-h, 0px) - var(--amorce));
  min-height: calc(100dvh - var(--nav-h) - var(--mock-h, 0px) - var(--amorce));
}
.fold .split { flex: 1 1 auto; min-height: 264px; }

/* Ecran court : on rogne l'amorce plutot que d'ecraser le hero */
@media (max-height: 800px) { :root { --amorce: 120px; } }
@media (max-height: 640px) { :root { --amorce: 92px; } }
.fold .steps { flex: 0 0 auto; }

/* Le bandeau tombant pile en bas de l'ecran, il n'a plus besoin de sa
   respiration inferieure d'origine. */
.fold .steps__band { padding-bottom: clamp(30px, 3.4vw, 44px); }

/* Sous 900 px le hero passe en une colonne : forcer une hauteur d'ecran
   entasserait tout, on rend la main au flux normal. */
@media (max-width: 900px) {
  .fold { display: block; min-height: 0; }
}

/* ==========================================================================
   ACCUEIL - preuve d'inventaire
   Vote d'equipe du 31/07 : l'accueil reste, mais il montre de vraies offres.
   ========================================================================== */

/* Compteur dans le hero : la preuve qu'il y a de la matiere, avant tout clic */
.split__stock {
  margin-top: 18px; font-size: 14px; color: var(--ink-70);
  background: rgba(255,255,255,.82); border: 1px solid rgba(10,10,10,.10);
  padding: 8px 15px; border-radius: 100px; backdrop-filter: blur(3px);
}
.split__stock strong { font-size: 16px; color: var(--rust-text, var(--rust-dark)); }
.split__stock:empty { display: none; }

/* Extrait d'offres reelles */
.peek {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(30px, 3.2vw, 42px) clamp(16px, 4vw, 40px) clamp(16px, 2vw, 26px);
  text-align: center;
}
.peek__head h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.7px; margin: 0 0 8px; }
.peek__head p { font-size: 15.5px; color: var(--ink-55); margin: 0 0 30px; }

.peek__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; text-align: left; margin-bottom: 30px;
}
.peek__card {
  display: block; border: 1px solid var(--ink-20); border-radius: var(--radius);
  padding: 16px 17px; background: var(--paper); position: relative;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.peek__card:hover { border-color: var(--rust); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.peek__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.peek__titre { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; margin: 0; }
.peek__age { font-size: 12px; color: var(--ink-55); white-space: nowrap; padding-top: 2px; }
.peek__emp { font-size: 13.5px; color: var(--ink-70); margin: 4px 0 10px; }
.peek__geo {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--geo-soft); color: var(--geo);
  font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 8px; margin-bottom: 10px;
}
.peek__geo small { font-weight: 500; }
.peek__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.peek__src { display: block; font-size: 11px; color: var(--ink-55); margin-top: 9px; }
.peek__cta { min-height: 44px; }

@media (max-width: 900px) {
  .peek__list { grid-template-columns: 1fr; }
}

/* Ecran court : on compacte le hero pour que l amorce du bloc suivant reste
   visible, plutot que de la sacrifier. */
@media (max-height: 820px) {
  .fold .split__side { padding-top: clamp(20px, 3vh, 34px); padding-bottom: clamp(20px, 3vh, 34px); }
  .fold .split__side h2 { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 9px; }
  .fold .split__side p { margin-bottom: 16px; font-size: clamp(14px, 1.2vw, 16px); }
  .fold .split__enter { padding: 11px 38px; font-size: 16px; }
  .fold .split__stock { margin-top: 11px; font-size: 13px; padding: 6px 13px; }
  .fold .steps__band { padding-bottom: 26px; }
  .fold .step b { font-size: clamp(15px, 1.5vw, 18px); margin-bottom: 5px; }
  .fold .step p { font-size: 13px; }
  .fold .step__n { width: 60px; height: 60px; font-size: 26px; margin-top: -78px; }
}

/* ==========================================================================
   CONNEXION ET INSCRIPTION
   Le compte n'est demande que pour repondre a une offre, jamais pour chercher.
   ========================================================================== */

.auth { max-width: 1000px; margin: 0 auto; padding: clamp(38px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(50px, 6vw, 80px); }
.auth__h1 { font-size: clamp(24px, 3vw, 36px); letter-spacing: -1px; margin: 0 0 12px; text-align: center; }
.auth__lead { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--ink-70); text-align: center; max-width: 42em; margin: 0 auto clamp(34px, 4vw, 48px); }

.auth__cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; align-items: start; }

.auth__card { border: 1px solid var(--ink-20); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); background: var(--paper); }
.auth__card--neuf { border-color: var(--rust); background: var(--rust-soft); }
.auth__card h2 { font-size: 20px; letter-spacing: -.4px; margin: 0 0 6px; }
.auth__sub { font-size: 14.5px; color: var(--ink-70); margin: 0 0 20px; }

.auth__form { display: block; margin-top: 18px; }
.auth__form .f { margin-bottom: 16px; }
.auth__form .btn { min-height: 46px; }
.auth__oubli { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--ink-55); text-decoration: underline; }
.auth__oubli:hover { color: var(--ink); }
.auth__cgu { font-size: 12.5px; color: var(--ink-55); line-height: 1.5; margin: 14px 0 0; }

.auth__apres { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(10,10,10,.10); }
.auth__apres[hidden] { display: none; }
.auth__apres h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); margin: 0 0 12px; }
.auth__apres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.auth__apres li { font-size: 14.5px; line-height: 1.45; padding-left: 24px; position: relative; color: var(--ink-70); }
.auth__apres li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8541c' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.auth__verif { font-size: 12.5px; line-height: 1.5; color: var(--ink-55); margin: 14px 0 0; font-style: italic; }

.auth__ok { text-align: center; padding: 14px 0; }
.auth__okIco { width: 52px; height: 52px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 26px; display: grid; place-items: center; margin: 0 auto 16px; }
.auth__ok h2 { margin-bottom: 10px; }
.auth__ok p { font-size: 15px; line-height: 1.55; color: var(--ink-70); margin: 0 0 8px; }
.auth__okSub { font-size: 14px; }
.auth__okMock { font-size: 12px; font-style: italic; color: var(--ink-55); margin-top: 16px; }

.auth__pied { text-align: center; font-size: 14.5px; color: var(--ink-70); margin: clamp(28px, 4vw, 40px) 0 0; }
.auth__pied a { color: var(--rust-text, var(--rust-dark)); font-weight: 600; text-decoration: underline; }

@media (max-width: 820px) {
  .auth__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PARCOURS D'INSCRIPTION (slides 6, 7 et 8 de la V4)
   ========================================================================== */

.ins { max-width: 940px; margin: 0 auto; padding: clamp(30px, 4vw, 50px) clamp(16px, 4vw, 40px) clamp(50px, 6vw, 80px); }

/* Le fil des trois temps */
.ins__fil { list-style: none; display: flex; gap: clamp(8px, 2vw, 22px); margin: 0 0 clamp(28px, 4vw, 42px); padding: 0; justify-content: center; flex-wrap: wrap; }
.ins__fil li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-55); }
.ins__fil li span { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-08); color: var(--ink-55); font-weight: 700; font-size: 13px; }
.ins__fil li.is-on { color: var(--ink); font-weight: 600; }
.ins__fil li.is-on span { background: var(--rust); color: var(--ink); }
.ins__fil li.is-fait span { background: var(--ok); color: #fff; }

.ins h1 { font-size: clamp(23px, 2.8vw, 32px); letter-spacing: -.9px; margin: 0 0 10px; }
.ins__lead { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--ink-70); margin: 0 0 26px; max-width: 44em; }

.ins__carte { border: 1px solid var(--ink-20); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); background: var(--paper); }
.ins__h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); margin: 0 0 8px; }
.ins__sub { font-size: 13.5px; color: var(--ink-55); margin: 0 0 14px; line-height: 1.5; }

/* Les champs apparaissent un par un, ceux qui sont faits restent visibles mais calmes */
.ins__champ { animation: insApparait .22s ease-out; }
@keyframes insApparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ins__champ.is-fait input { background: var(--paper-2); color: var(--ink-55); border-color: var(--ink-08); }
.ins__aide { font-size: 12.5px; color: var(--ink-55); margin: 6px 0 0; line-height: 1.45; }

.ins__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ins__actions .btn { min-height: 46px; }
.ins__compte { font-size: 13px; color: var(--ink-55); }

.ins__rgpd { font-size: 12.5px; line-height: 1.55; color: var(--ink-55); font-style: italic; margin: 18px 0 0; max-width: 46em; }

/* Etape 2 : la jauge de completion, evolutive comme le demandait la V4 */
.ins__tete { display: flex; align-items: center; gap: clamp(18px, 3vw, 30px); margin-bottom: 30px; flex-wrap: wrap; }
.jauge {
  --p: 20;
  width: 104px; height: 104px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--rust) calc(var(--p) * 1%), var(--ink-08) 0);
  display: grid; place-items: center; position: relative;
  transition: background .4s ease;
}
.jauge::before { content: ""; position: absolute; inset: 11px; background: var(--paper); border-radius: 50%; }
.jauge span { position: relative; font-size: 21px; font-weight: 700; letter-spacing: -.5px; }

.ins__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 4px; }
/* 16px : sous ce seuil iOS zoome au focus, cf. regle .f input plus haut. */
.ins__carte textarea { width: 100%; padding: 10px 12px; font-size: 16px; font-family: inherit; color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); resize: vertical; }
.ins__carte textarea:focus { outline: 0; border-color: var(--rust); box-shadow: 0 0 0 3px var(--rust-soft); }

.ins__joindre { width: 100%; padding: 12px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink-70); font-size: 14px; font-weight: 600; min-height: 46px; }
.ins__joindre:hover { border-color: var(--rust); color: var(--rust-text, var(--rust-dark)); }

.ins__liste { display: grid; gap: 8px; }
.ins__ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border: 1px solid var(--ink-20); border-radius: var(--radius-sm); background: var(--paper-2); }
.ins__ligne.is-plein { background: var(--ok-soft); border-color: var(--ok); }
.ins__ligneNom { font-size: 14px; color: var(--ink-70); }
.ins__ligne .btn { min-height: 40px; }
.ins__retirer { background: 0; border: 0; font-size: 12.5px; color: var(--ink-55); text-decoration: underline; padding: 6px; min-height: 40px; }
.ins__retirer:hover { color: var(--danger); }

/* Etape 3 : le profil tel qu'une officine le verra */
.profilCard { border: 1px solid var(--ink-20); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); background: var(--paper); margin-bottom: 8px; }
.profilCard__tete { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.profilCard__av { width: 58px; height: 58px; border-radius: 50%; background: var(--rust); color: var(--ink); display: grid; place-items: center; font-size: 24px; font-weight: 700; flex: none; }
.profilCard__tete h2 { font-size: 21px; letter-spacing: -.5px; margin: 0 0 3px; }
.profilCard__poste { font-size: 15px; color: var(--ink-70); margin: 0; }
.profilCard__lieu { font-size: 13.5px; color: var(--ink-55); margin: 2px 0 0; }

.profilCard__bloc { border-top: 1px solid var(--ink-08); padding-top: 18px; margin-top: 18px; }
.profilCard__bloc h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); margin: 0 0 10px; }
.profilCard__bloc p { font-size: 15px; line-height: 1.6; color: var(--ink-70); margin: 0; }
.profilCard__bloc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.profilCard__bloc li { font-size: 14.5px; line-height: 1.5; color: var(--ink-70); }

.profilCard__vis { background: var(--geo-soft); border-radius: var(--radius); padding: 18px 20px; border-top: 0; }
.profilCard__vis h3 { color: var(--geo); }
.profilCard__note { font-size: 13px; font-style: italic; color: var(--ink-70); margin-top: 12px; }
.profilCard__mock { font-size: 12px; font-style: italic; color: var(--ink-55); margin: 16px 0 0; text-align: center; }

@media (max-width: 780px) {
  .ins__grille { grid-template-columns: 1fr; }
  .ins__fil li { font-size: 13px; }
}

/* ==========================================================================
   Accroche de marque dans la barre, a droite du logo.
   Elle s'efface quand la place manque : les liens de navigation priment.
   ========================================================================== */

.topbar__claim {
  font-size: clamp(12.5px, 1.05vw, 15px);
  font-style: italic;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  letter-spacing: -.1px;
  line-height: 1.3;
  padding-left: clamp(14px, 1.6vw, 24px);
  margin-right: auto;
  border-left: 1px solid rgba(255,255,255,.22);
  max-width: 24em;
}

@media (max-width: 1280px) { .topbar__claim { display: none; } }

@media (max-width: 900px) {
  .topbar__claim {
    display: block; max-width: none; text-align: center;
    padding-left: 0; border-left: 0; margin: 0;
    font-size: 12.5px; color: rgba(255,255,255,.72);
  }
}

/* ==========================================================================
   CADUCEE PHARMACEUTIQUE - separateur central de l'accueil
   Vectorise depuis le caducee de la banque d'images de Stephen, serpent
   recolorise a l'orange de la charte. Il occupe la cesure entre les deux
   espaces : c'est le seul element de la page qui dit "pharmacie" au premier
   coup d'oeil.
   ========================================================================== */

/* Les textes des deux espaces passent devant : le symbole ne doit jamais
   genre la lecture, meme quand il deborde sur les colonnes. */
.split__side h2, .split__side p, .split__enter { position: relative; z-index: 4; }

/* Accueil : barre non collante, pour que la tete du serpent puisse se poser
   dedans sans passer par-dessus au defilement. */
body:has(.split) .topbar { position: relative; }

/* ==========================================================================
   CADUCEE : position, superposition et animation
   ========================================================================== */

.split__caduceus {
  position: absolute;
  /* La tete du caducee mord de 10 px dans la barre du haut. Le trace est de la
     meme couleur que la barre, donc le chevauchement ne se voit pas : il
     supprime seulement le filet de carte qui apparaissait entre les deux. */
  top: -10px;
  bottom: -32px;
  left: 50%;
  /* L'axe du pied se trouve a 48,9 % de la largeur du trace : ce dessin est
     quasiment symetrique, contrairement au precedent. */
  transform: translateX(-48.9%);
  z-index: 901;                  /* devant la barre : la tete doit s'y voir */
  pointer-events: none;
  filter: drop-shadow(0 6px 20px rgba(10, 10, 10, .22));
}
.split__caduceusImg { height: 100%; width: auto; display: block; }

/* Hero empile (max-width:900px, cf. regle .split plus haut qui repasse
   .split en une seule colonne) : le caducee n'a plus une cesure verticale
   a occuper, il occuperait sinon toute la hauteur cumulee des deux cartes
   empilees et viendrait recouvrir "Espace Candidat" ET "Espace Recruteur".
   On le couche a plat sur la couture entre les deux cartes a la place.
   Cette regle doit rester APRES la regle .split__caduceus de base ci-dessus :
   meme specificite, elle ne gagnerait pas si elle passait avant dans le fichier. */
@media (max-width: 900px) {
  .split__caduceus {
    top: 50%;
    bottom: auto;
    left: 50%;
    height: clamp(84px, 20vw, 130px);
    width: auto;
    transform: translate(-50%, -50%) rotate(90deg);
    /* Sous les textes des deux cartes (z-index 4) : si la couture tombe pres
       d'une ligne de texte sur un tres petit ecran, le texte reste lisible. */
    z-index: 2;
  }
}

/* Le bandeau des 3 points passe DEVANT le caducee : le pied s'y enfonce et
   disparait derriere, au lieu de recouvrir les pastilles numerotees. */
.steps { position: relative; z-index: 902; }

/* --- L'animation : le serpent s'enroule du pied vers la tete, boit, redescend --- */
/* ==========================================================================
   SURVOL DES DEUX ESPACES : la carte respire
   ========================================================================== */

/* Au survol : c'est le contenu qui avance vers le visiteur, pas le fond.
   Zoomer la carte donnait une impression de flottement sans rien dire. */
.split__side__inner {
  display: flex; flex-direction: column; align-items: center;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}
.split__side:hover .split__side__inner { transform: scale(1.06); }
.split__side .split__enter { transition: background .15s, transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .3s; }
.split__side:hover .split__enter { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,10,10,.25); }

/* Le voile bascule du gris a l'orange. Assez lent pour qu'on voie la couleur
   arriver, assez court pour que le survol reste franc. */
.split__side::after { transition: background .4s ease; }


@media (prefers-reduced-motion: reduce) {
  .split__side__inner, .split__side .split__enter, .split__side::after { transition: none; }
  .split__side:hover .split__side__inner, .split__side:hover .split__enter { transform: none; }
}

/* ==========================================================================
   APPARITION AU DEFILEMENT
   Les blocs montent legerement en entrant dans l'ecran. Discret : le but est
   que la page respire, pas qu'elle se donne en spectacle.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Les cartes d'annonces arrivent l'une apres l'autre */
.peek__list .reveal:nth-child(2) { transition-delay: .06s; }
.peek__list .reveal:nth-child(3) { transition-delay: .12s; }
.peek__list .reveal:nth-child(4) { transition-delay: .18s; }
.peek__list .reveal:nth-child(5) { transition-delay: .24s; }
.peek__list .reveal:nth-child(6) { transition-delay: .30s; }

/* Les pastilles numerotees se posent avec un petit rebond */

/* Les cartes d'annonces se soulevent au survol */
.peek__card { transition: border-color .18s, box-shadow .25s, transform .25s cubic-bezier(.2,.7,.3,1); }
.peek__card:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .peek__card { transition: none; }
  .peek__card:hover { transform: none; }
}

/* --- Les 3 points reagissent aussi au survol ---
   Meme grammaire que les deux espaces : le contenu avance vers le visiteur.
   Selecteurs assez specifiques pour passer devant la regle d'apparition,
   qui pose deja un transform sur la pastille. */
.steps__grid .step {
  transition: transform .32s cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}
.steps__grid .step:hover { transform: translateY(-4px) scale(1.04); }

.steps__grid .step:hover .step__n {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.steps__grid .step:hover b { color: var(--rust); }
.steps .step b { transition: color .25s ease; }
.steps .step__n { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .steps__grid .step, .steps .step__n, .steps .step b { transition: none; }
  .steps__grid .step:hover, .steps__grid .step:hover .step__n { transform: none; }
}

/* Invitation a saisir un point de depart, en bas de la liste nationale */
.list__plus {
  border: 1px dashed var(--rust); border-radius: var(--radius);
  background: var(--rust-soft); padding: 20px 18px; text-align: center;
}
.list__plusTitre { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; }
.list__plusTexte { font-size: 14px; line-height: 1.5; color: var(--ink-70); margin: 0; }

/* Carte sans point de depart : l'emplacement de la distance reste, en creux */
.card__geo--vide {
  background: var(--ink-08); color: var(--ink-55);
  font-weight: 500; font-style: italic;
}

/* Marqueur des elements que Stephen doit completer avant mise en ligne :
   visible sans etre criard, il doit sauter aux yeux a la relecture. */
.acompleter { background: #fdf0e3; color: #8a4b12; padding: 1px 6px; border-radius: 4px;
              font-weight: 600; font-size: .93em; }

/* Les tableaux des textes legaux (durees de conservation, sous-traitants) :
   ils defilent dans leur propre boite, la page ne part jamais en travers. */
.tablewrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--ink-20); border-radius: 10px; }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 460px; }
.tablewrap th, .tablewrap td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--ink-20); }
.tablewrap th { background: var(--paper-2); font-size: 12.5px; text-transform: uppercase;
                letter-spacing: .05em; color: var(--ink-55); }
.tablewrap tr:last-child td { border-bottom: 0; }