/* ===========================================================================
   candidature.css — habillage COMMUN aux deux pages de candidature sitter.

   Chargé par `/devenir-cat-sitter` et `/devenir-home-sitter`, et par elles
   seules (il repeint le `body`, cf. plus bas). Les deux pages sont jumelles :
   même hero, même bande photo, même formulaire en 4 étapes, même modale de
   succès. Seul diffère ce qu'elles racontent.

   ⚠️ POURQUOI CE FICHIER EXISTE (2026-08-12). Tout ceci vivait en deux blocs
   `<style>` dans `/candidature-sitter`, et la jumelle home sitting allait en
   recevoir la copie — 380 lignes en double, qu'un seul ajustement aurait fait
   diverger sans que rien ne le signale, les deux pages ne s'affichant jamais
   ensemble. C'est le défaut déjà constaté sur le bouton de `/mon-espace`
   (trois exemplaires recopiés) et corrigé pour la carte de journal, dont le
   CSS est parti dans `shared.css` le 2026-08-09. Même geste, même motif.

   ⚠️ IL EST DÉCLARÉ DANS `scripts/stamp-cache.mjs` (liste `SHARED`). Un asset
   à URL fixe absent de cette liste est servi avec un `?v=` qui ne bouge jamais,
   donc figé un an dans le cache des visiteurs : la modification part en prod et
   personne ne la voit. Ne pas l'en retirer.

   ⚠️ Le `?v=` des `<link>` qui pointent ici se réécrit TOUT SEUL au build. Ne
   jamais le bumper à la main.
   ========================================================================= */

/* ─── Fond de page ────────────────────────────────────────────────────────
   Aligné sur la section « Neko c'est… » de la landing (#fdf9f5), motif à
   points de shared.css désactivé pour un fond uni.
   ⚠️ C'est ce bloc qui interdit de charger ce fichier ailleurs : il repeint le
   `body` de la page hôte. */
body { background: #fdf9f5 !important; }
body::before { display: none !important; }

/* ─── Titres ──────────────────────────────────────────────────────────────
   Tout titre est en Lora (règle transversale du site, ADR 0046). */
h1 { font-family: "Lora", Georgia, serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; }
h1 em { font-weight: 500; }
h3 { font-family: "Lora", Georgia, serif; font-weight: 500; letter-spacing: -0.015em; }
.lede { font-family: "Lora", Georgia, serif; }

/* Ce que le candidat saisit reprend le rendu du texte d'aide (Instrument Sans,
   13px, ink-soft). ⚠️ Les deux formulaires portent le même `id="form-sitter"` :
   c'est ce qui permet à ce fichier et aux deux wizards de rester identiques. */
#form-sitter input, #form-sitter textarea, #form-sitter select { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }

.nav .logo-mark { width: 90px; height: 90px; margin-top: -28px; margin-bottom: -28px; }

.role-section{
  min-height: calc(100dvh - 60px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 0;
  overflow-x: clip; /* contient les sections « full-bleed » (largeur 100vw) */
}
/* La colonne occupe toute la largeur (alignée sur les cartes et le formulaire
   3 colonnes), au lieu des 640px par défaut de shared.css. */
.role-section .wrap-narrow{ max-width: 1180px; }
.role-section .lede{ max-width: 760px; }

/* ─── Hero ────────────────────────────────────────────────────────────────
   Centré, un seul message. Titre en Lora, corail var(--terracotta) — jamais
   --terracotta-deep, réservé aux fonds et aux survols. */
.cs-hero{ max-width:720px; margin:0 auto; text-align:center; }
.cs-pill{
  display:inline-block; padding:7px 16px; border-radius:999px;
  background:color-mix(in oklab, var(--terracotta) 12%, var(--white));
  color:var(--terracotta);
  font-family:var(--serif); font-size:13.5px; line-height:1.3;
}
.cs-hero-title{
  margin:22px 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(30px, 4.4vw, 46px); line-height:1.1; letter-spacing:-0.02em;
  color:var(--ink);
}
/* ⚠️ Sélecteur à 2 niveaux et placé APRÈS `.role-section .lede` : à spécificité
   égale, c'est le dernier qui gagne. Écrit `.cs-hero .lede`, la largeur de
   lecture de la page l'écraserait et le paragraphe ne serait plus centré. */
.cs-hero .lede{ margin:18px auto 0; max-width:560px; }
/* Collé au paragraphe qu'il annote (marge haute courte), pas au bouton. */
.cs-hero-note{ margin:8px 0 0; font-size:11px; line-height:1.4; color:var(--ink-soft); }
.cs-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:24px; }
/* Graissé à 600 : le corail clair sur crème est peu contrasté à 12,5 px. */
.cs-hero-legend{ margin:12px 0 0; font-size:12.5px; line-height:1.45; font-weight:600; color:var(--terracotta); }

/* ─── Bande photo sous le hero ────────────────────────────────────────────
   Grille, ratio, coins et légende repris de /home-sitting (`.hsp-shots`).
   ⚠️ Full-bleed par 100vw + marges négatives et pas par `width:100%` : la
   bande vit DANS `.wrap-narrow` (1180px ici). `.role-section` porte déjà
   `overflow-x:clip`, qui contient le débordement. */
.cs-shots-wrap{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  margin-top:34px;
}
.cs-shots{display:grid; gap:14px; grid-template-columns:repeat(3,1fr); padding:0 14px}
.cs-shot{margin:0; border-radius:16px; overflow:hidden; background:var(--cream-2)}
/* aspect-ratio + object-fit : une photo au format libre ne casse pas la rangée. */
.cs-shot img{display:block; width:100%; height:100%; aspect-ratio:3/4; object-fit:cover}
/* ⚠️ Les deux dernières ne servent QUE le grand écran : la rangée passe à cinq
   à partir de 1100px. En dessous elles sont retirées du flux, pas rétrécies. */
.cs-shot.is-wide{display:none}
@media (min-width:1100px){
  .cs-shots{grid-template-columns:repeat(5,1fr); gap:16px; padding:0 16px}
  .cs-shot.is-wide{display:block}
}
/* La 3e passe sous les deux autres en dessous de 700px plutôt que de rétrécir
   les trois à la largeur d'un timbre. */
@media (max-width:700px){
  .cs-shots{grid-template-columns:repeat(2,1fr); gap:10px; padding:0 10px}
  .cs-shot:nth-child(3){grid-column:1 / -1}
  .cs-shot:nth-child(3) img{aspect-ratio:16/9}
}
.cs-shots-cap{
  font-family:var(--sans); font-size:13.5px; line-height:1.6;
  color:var(--ink-soft); text-align:center; margin:16px auto 0; max-width:56ch;
  padding:0 20px;
}

/* ─── Carte « ce que ça te rapporte » + illustration ──────────────────────
   Côte à côte sur desktop. Le cat-sitter y met des euros, le home sitter des
   nuits : même gabarit, contenus différents. */
.cs-gains{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  align-items:stretch; margin-top:38px; scroll-margin-top:90px;
}
.cs-gains-card{
  background:var(--white); border-radius:18px; padding:26px 28px;
  display:flex; flex-direction:column;
}
.cs-gains-title{
  margin:0 0 6px; font-family:var(--serif); font-weight:600;
  font-size:22px; line-height:1.2; color:var(--ink);
}
.cs-gains-list{ list-style:none; margin:0; padding:0; flex:1 1 auto; }
.cs-gains-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.cs-gains-list li:last-child{ border-bottom:none; padding-bottom:4px; }
.cs-gains-what{ display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left; }
.cs-gains-what b{ font-weight:600; font-size:14.5px; color:var(--ink); }
.cs-gains-what em{ font-style:normal; font-size:12px; line-height:1.35; color:var(--ink-soft); }
.cs-gains-amount{
  flex:0 0 auto; white-space:nowrap;
  font-family:var(--serif); font-weight:600; font-size:20px;
  color:var(--terracotta);
}
.cs-gains-foot{ margin:16px 0 0; font-size:11.5px; line-height:1.5; color:var(--ink-soft); }
.cs-gains-illu{ border-radius:18px; overflow:hidden; background:var(--cream-2); }
.cs-gains-illu img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width: 900px){
  .cs-gains{ grid-template-columns:1fr; }
  .cs-gains-illu{ display:none; }
}

/* ─── Cartes « type de garde » (sélection visuelle) ───────────────────────
   Utilisées par /devenir-cat-sitter. La page home sitting n'a pas de type à
   choisir (c'est le sujet de la page), mais garde ces règles disponibles. */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px 12px; border: 1.5px solid var(--line); border-radius: 18px;
  background: var(--white); cursor: pointer; overflow: hidden;
  transition: border-color .22s, background .22s, box-shadow .22s, transform .22s;
}
.svc-card::before {
  content: ""; position: absolute; top: -46px; right: -46px; width: 130px; height: 130px;
  border-radius: 50%; background: color-mix(in oklab, var(--terracotta) 12%, transparent);
  opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s; pointer-events: none;
}
.svc-card:hover {
  border-color: color-mix(in oklab, var(--terracotta) 55%, var(--line));
  transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(224,74,57,.45);
}
.svc-card input { position: absolute; opacity: 0; pointer-events: none; }
.svc-card:has(input:checked) {
  border-color: var(--terracotta);
  background: color-mix(in oklab, var(--terracotta) 6%, var(--white));
  box-shadow: 0 14px 34px -20px rgba(224,74,57,.55);
}
.svc-card:has(input:checked)::before { opacity: 1; transform: scale(1); }
.svc-card:has(input:focus-visible) { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.svc-ico {
  position: relative; width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--ink) 6%, var(--white)); color: var(--ink-soft);
  transition: background .22s, color .22s, transform .22s;
}
.svc-ico svg { width: 25px; height: 25px; }
.svc-ico img { width: 46px; height: 46px; object-fit: contain; }
.svc-ico:has(img) { background: none; border-radius: 0; width: 64px; height: 64px; overflow: visible; }
.svc-ico:has(img) img { width: 64px; height: 64px; }
.svc-ico:has(img[src*="cle.png"]) { width: 84px; height: 84px; }
.svc-ico:has(img[src*="cle.png"]) img { width: 84px; height: 84px; }
.svc-ico:has(img[src*="garde.webp"]) { width: 84px; height: 84px; }
.svc-ico:has(img[src*="garde.webp"]) img { width: 84px; height: 84px; transform: scale(1.6); transform-origin: center; }
.svc-card:has(input:checked) .svc-ico:has(img) { background: none; transform: rotate(-4deg); }
.svc-card:has(input:checked) .svc-ico { background: var(--terracotta); color: var(--white); transform: rotate(-4deg); }
.svc-txt { position: relative; }
.svc-txt b { display: block; font-family: "Lora", Georgia, serif; font-size: 15px; font-weight: 600; color: var(--ink); }
.svc-txt span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 5px; }
.svc-badge {
  position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--terracotta); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.4);
  transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.svc-badge svg { width: 14px; height: 14px; }
.svc-card:has(input:checked) .svc-badge { opacity: 1; transform: scale(1); }

/* ─── Formulaire en étapes ────────────────────────────────────────────── */
.wizard-step { display: none; }
.wizard-step.is-active { display: block; animation: wizard-fade .25s ease; }
@keyframes wizard-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wizard-progress { margin-bottom: 24px; }
.wizard-progress-track {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in oklab, var(--terracotta) 16%, var(--white));
}
.wizard-progress-fill {
  height: 100%; width: 20%; border-radius: 999px;
  background: var(--terracotta); transition: width .35s cubic-bezier(.2,.9,.3,1);
}
.wizard-progress-label {
  margin-top: 8px; font-size: 13px; color: var(--ink-soft);
  font-family: 'Lora', Georgia, serif;
}

.wizard-nav { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.wizard-nav #wiz-next, .wizard-nav #wiz-submit { margin-left: auto; }
.wizard-nav .btn-lg { min-width: 0; padding: 12px 16px; font-size: 14px; font-weight: 400; white-space: nowrap; }
.wizard-nav #wiz-prev { flex: 0 0 auto; }
.wizard-nav #wiz-submit { flex: 0 0 auto; padding: 12px 14px; font-size: 12.5px; }

/* Boutons principaux : reprise exacte du CTA du hero (pilule corail + liseré
   encre décalé -3px + ombre corail foncé). */
.wizard-nav #wiz-next,
.wizard-nav #wiz-submit{
  position:relative;
  border:1px solid transparent;
  border-radius:26px;
  box-shadow:0 1px 0 0 #C44C3D;
  font-weight:500;
  transition:transform .1s ease, box-shadow .1s ease;
}
.wizard-nav #wiz-next::before,
.wizard-nav #wiz-submit::before{
  content:""; position:absolute; inset:0;
  border:1px solid #1F1A1A; border-radius:26px;
  transform:translateY(-3px); pointer-events:none;
}
.wizard-nav #wiz-next:hover,
.wizard-nav #wiz-submit:hover{
  transform:translateY(-1px); box-shadow:0 2px 0 0 #C44C3D;
}
.wizard-nav #wiz-next:active,
.wizard-nav #wiz-submit:active{
  transform:translateY(1px); box-shadow:0 0 0 0 #C44C3D;
}
@media (max-width: 560px){
  .wizard-nav { gap: 10px; }
  .wizard-nav .btn-lg { padding: 13px 18px; font-size: 14px; }
  .wizard-nav #wiz-prev { flex: 0 0 auto; }
  .wizard-nav #wiz-next, .wizard-nav #wiz-submit { flex: 1 1 auto; margin-left: 0; }
}

/* ─── Section « pourquoi nous rejoindre ? » (pleine largeur) ───────────── */
.why-neko{
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  margin-top: 44px; margin-bottom: 8px;
  padding: 8px 28px 0; text-align: center;
}
.why-neko-box{
  max-width:1180px; margin:0 auto;
  background:var(--white); border-radius:24px;
  padding:40px 34px;
  box-shadow:0 18px 50px -34px rgba(58,30,37,.3);
}
.why-neko-eyebrow{
  display:block;
  font-size:21px; font-weight:600; color:var(--ink);
  font-family:'Lora',Georgia,serif;
}
.why-neko-title{
  font-family:var(--serif); font-weight:400; letter-spacing:-0.015em;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin:10px auto 0; max-width:900px;
}
.why-neko-grid{
  max-width:1120px; margin:32px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.why-card{
  background: color-mix(in oklab, var(--terracotta) 6%, var(--white));
  border:none; border-radius:18px;
  padding:28px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.why-card-icon{
  width:66px; height:66px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; margin-bottom:14px;
  background: color-mix(in oklab, var(--terracotta) 14%, var(--white));
}
.why-card.why-card .why-card-icon-img{ width:auto; height:132px; margin-bottom:14px; background:none; border-radius:0; }
.why-card-icon-img img{ width:auto; height:100%; object-fit:contain; }
/* Illustration d'une carte « pourquoi ». ⚠️ Une CLASSE et non quatre styles en
   ligne recopiés : c'est en les recopiant qu'on finit par en régler trois et en
   oublier une. ⚠️ L'écart 72/96 px d'`is-lg` n'est plus justifié depuis que les
   quatre dessins sont détourés (2026-08-11) : gardé pour ne pas changer la
   composition dans le même geste. À revoir, les quatre veulent probablement la
   même hauteur. */
.why-card-ill{ display:block; width:auto; height:54px; max-width:100%;
  object-fit:contain; margin:0 auto 8px; border-radius:12px; }
.why-card-ill.is-lg{ height:72px; }
.why-card-title{ font-family:"Lora", Georgia, serif; font-weight:700; font-size:1.12rem; margin:0 0 8px; }
.why-card-text{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0; }
.why-pill{
  display:inline-block; margin-top:14px;
  background:var(--terracotta); color:#fff;
  font-weight:700; font-size:10px; padding:5px 11px; border-radius:6px;
  white-space:nowrap;
}
.why-neko-banner{
  max-width:760px; margin:26px auto 0;
  background:var(--ink); color:#fff; border-radius:16px;
  padding:18px 26px; font-weight:600; font-size:1.05rem;
}
.why-neko-banner span{ color:#F4A78E; }
@media (max-width: 880px){ .why-neko-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width: 767px){
  /* Mobile : on retire l'encadré blanc + les fonds rose pour donner plus de
     place aux vignettes. */
  .why-neko-box{ background:none; box-shadow:none; border-radius:0; padding:0; }
  .why-neko-grid{ margin-top:22px; gap:10px; }
  .why-card{ background:none; padding:20px 6px; }
}
@media (max-width: 420px){
  .why-neko-box{ padding:24px 16px; border-radius:18px; }
  .why-neko-grid{ gap:10px; }
  .why-card{ padding:18px 6px; }
  .why-card-icon{ width:56px; height:56px; font-size:26px; margin-bottom:10px; }
  .why-card-title{ font-size:1rem; }
  .why-card-text{ font-size:13px; }
}

/* ─── Sélecteur de réseau social ──────────────────────────────────────── */
.social-picker{ display:flex; gap:6px; flex-wrap:nowrap; }
.social-btn{
  flex:1 1 0; min-width:0; padding:8px 6px; border-radius:8px; text-align:center; white-space:nowrap;
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:12px; font-weight:400; cursor:pointer;
  transition:border-color .18s, background .18s, color .18s;
}
.social-btn:hover{ border-color:color-mix(in oklab, var(--terracotta) 45%, var(--line)); }
.social-btn.active{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.social-input-row{ display:flex; align-items:stretch; margin-top:10px; }
.social-input-row #s-social-input{ flex:1 1 auto; min-width:0; border-radius:10px; margin:0; }
.social-input-row.has-prefix #s-social-input{ border-radius:0 10px 10px 0; }
.social-prefix{
  display:grid; place-items:center; padding:0 12px;
  border:1px solid var(--line); border-right:none; border-radius:10px 0 0 10px;
  background:color-mix(in oklab, var(--terracotta) 6%, var(--white));
  color:var(--ink-soft); font-weight:600;
}

/* ─── Formulaire 3 colonnes (sidebar étapes · carte · panneau infos) ───── */
.apply-wrap{
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; margin-top: 8px;
}
.apply-grid{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:230px minmax(0,1fr) 280px;
  gap:28px; align-items:start;
}
.apply-aside{ position:sticky; top:84px; }
.apply-aside-title{ font-family:var(--serif); font-weight:500; font-size:1.35rem; margin:0 0 8px; }
.apply-aside-intro{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0; }
.apply-steplist{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:14px; }
.apply-steplist li{
  display:flex; align-items:center; gap:11px;
  font-family:'Lora',Georgia,serif;
  color:var(--ink-soft); font-weight:500; cursor:pointer;
  transition:color .15s;
}
.apply-steplist li .dot{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  border:2px solid color-mix(in oklab,var(--terracotta) 35%, var(--white));
  transition:all .15s;
}
.apply-steplist li.is-active{ color:var(--terracotta); font-weight:700; }
.apply-steplist li.is-active .dot,
.apply-steplist li.is-done .dot{ background:var(--terracotta); border-color:var(--terracotta); }

.apply-card{
  background:var(--white); border:none; border-radius:22px;
  padding:34px 34px 28px; box-shadow:none;
}
.apply-card-title{ text-align:center; font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0 0 24px; }
/* Les cartes internes du formulaire deviennent de simples blocs dans la carte. */
.apply-card .card{ background:transparent; border:none; box-shadow:none; padding:0; }
.apply-card .card.mb-4{ margin-bottom:22px; }
.apply-card .wizard-step .mono{ display:none; } /* le stepper remplace les libellés « 0X · … » */

.apply-stepper{ display:flex; align-items:flex-start; margin:0 0 28px; }
.apply-stepper-item{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  flex:0 0 auto; cursor:pointer; text-align:center;
}
.apply-stepper-item .num{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; background:var(--white);
  border:2px solid color-mix(in oklab,var(--terracotta) 30%, var(--white));
  color:var(--ink-soft); transition:all .2s;
}
.apply-stepper-item .lbl{ font-size:12px; color:var(--ink-soft); transition:color .2s; }
.apply-stepper-item.is-active .num{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.apply-stepper-item.is-active .lbl{ color:var(--terracotta); font-weight:700; }
.apply-stepper-item.is-done .num{ background:color-mix(in oklab,var(--terracotta) 18%, var(--white)); border-color:var(--terracotta); color:var(--terracotta); }
.apply-stepper-line{
  flex:1 1 auto; height:2px; margin:17px 6px 0;
  background:color-mix(in oklab,var(--terracotta) 22%, var(--white));
}

.apply-docs{
  position:sticky; top:84px;
  background:var(--white); border:1px solid var(--line); border-radius:18px; padding:24px;
}
.apply-docs-title{ font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0 0 18px; }
.apply-docs-item{ display:flex; gap:11px; margin-bottom:16px; font-size:13.5px; line-height:1.5; }
.apply-docs-item:last-child{ margin-bottom:0; }
.apply-docs-item .ic{ flex:0 0 auto; color:var(--terracotta); font-weight:700; }
.apply-docs-item b{ color:var(--ink); }
.apply-docs-item .muted{ color:var(--ink-soft); }

@media (max-width: 1080px){
  .apply-grid{ grid-template-columns:minmax(0,1fr); max-width:680px; }
  .apply-aside, .apply-docs{ display:none; }
  .apply-card{ padding:26px 20px 22px; }
}
@media (max-width: 560px){
  .apply-stepper-item .lbl{ display:none; }
  .apply-card-title{ font-size:1.3rem; }
}

/* ─── « Et ensuite ? » ────────────────────────────────────────────────────
   Visible seulement dans la modale de confirmation sur mobile : l'aside
   latéral qui porte la même chose est masqué sous 1080px. */
.success-next{ display:none; }
@media (max-width: 1080px){ .success-next{ display:block; } }
.success-next{
  margin:4px 0 22px; padding:18px 18px 16px; text-align:left;
  background:color-mix(in oklab,var(--terracotta) 6%,var(--white));
  border:1px solid var(--line); border-radius:14px;
}
.success-next-title{ font-family:var(--serif); font-weight:500; font-size:1.05rem; margin:0 0 14px; text-align:center; }
.success-next-item{ display:flex; gap:10px; margin-bottom:12px; font-size:13px; line-height:1.5; }
.success-next-item:last-child{ margin-bottom:0; }
.success-next-item .ic{ flex:0 0 auto; color:var(--terracotta); font-weight:700; }
.success-next-item b{ color:var(--ink); }
.success-next-item .muted{ color:var(--ink-soft); }

/* ─── Modale de confirmation : tout doit TENIR SANS SCROLLER (2026-08-13) ───
   Elle empile quatre blocs (illustration, écho d'adresse, « Et ensuite ? »,
   sortie) et débordait de 90vh sur un téléphone : le candidat ne voyait pas
   la moitié de ce qui l'attend, et surtout pas le « Retour à l'accueil » qui
   efface le brouillon. Les réseaux sociaux sont partis, le reste est resserré.
   ⚠️ Ce sont des marges et des paddings, JAMAIS la taille de l'adresse : elle
   est grande exprès (ADR 0034, cf. le commentaire de `.neko-email-echo` dans
   shared.css), c'est le seul écran où une faute de frappe se rattrape.
   ⚠️ Portée `.cand-success` : `.neko-email-echo` sert aussi /connexion, où
   rien de tout ça ne s'applique. */
.cand-success .neko-email-echo{ margin:0 0 10px; padding:11px 14px; }
.cand-success .neko-email-echo-note{ margin-top:7px; }
.cand-success .success-next{ margin:0 0 12px; padding:14px 14px 12px; }
.cand-success .success-next-title{ margin:0 0 10px; }
.cand-success .success-next-item{ margin-bottom:8px; }

/* ⚠️ Le bloc `.hs-place*` qui vivait ici (liste des villes du home sitter) a
   été retiré le 2026-08-12 avec l'étape « Où » : Neko n'ouvre le home sitting
   qu'à Paris, la zone est désormais posée d'office à l'envoi et le candidat n'a
   plus rien à choisir. Le jour où d'autres villes ouvrent, c'est ce widget qu'il
   faut ressortir, et sans rayon : un home sitter emménage, il ne fait pas
   l'aller-retour. */