/* =========================================================
   UrgePro — prototype cliquable
   Design system commun aux 3 interfaces
   ========================================================= */

:root{
  --ink:#0B1220;
  --ink-2:#3A4657;
  --ink-3:#6B7789;
  --line:#E4E8EF;
  --bg:#F4F6FA;
  --card:#FFFFFF;

  --urg:#FB4A02;         /* orange de la marque, prélevé sur le logo */
  --urg-d:#C93B02;
  --urg-soft:#FFF0EB;

  --blue:#1B5CFF;        /* confiance / devis */
  --blue-d:#1246CC;
  --blue-soft:#EDF2FF;

  --green:#0FA958;
  --green-soft:#E9F8F0;
  --amber:#F5A524;
  --amber-soft:#FFF6E5;
  --red:#E5484D;
  --red-soft:#FDECEC;
  --grey-soft:#EEF1F6;

  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --sh-1:0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.05);
  --sh-2:0 4px 14px rgba(11,18,32,.08);
  --sh-3:0 18px 48px rgba(11,18,32,.18);
  --ff:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Hauteur réellement occupée par la barre de démonstration, mesurée en
     JS. Tout ce qui est ancré en bas s'appuie dessus : sans ça, la barre
     recouvre le dernier bouton de chaque écran. */
  --bas-demo:0px;
  --bas-onglets:58px;

  /* Hauteur visible. 100vh compte la zone masquée par la barre d'adresse :
     le cadre dépasse. 100dvh la suit — mais elle CHANGE pendant qu'on
     défile, quand la barre se rétracte : toute la mise en page se
     recalcule à chaque geste, et l'app semble sauter.
     100svh est la hauteur la plus petite, donc STABLE : rien ne bouge
     pendant le défilement. C'est ce qu'il faut pour une app. */
  --haut-vue:100vh;
}
@supports(height:100svh){ :root{ --haut-vue:100svh } }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Barre de démo (commune) ---------- */
.demobar{
  display:none;                 /* cachée par défaut ; la démo la réaffiche en flex */
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  align-items:center;gap:8px;
  padding:8px 12px;
  background:rgba(11,18,32,.94);
  backdrop-filter:blur(8px);
  color:#fff;
}
.demobar b{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--urg);padding:3px 7px;border-radius:5px;font-weight:800;
}
.demobar nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.demobar nav a{
  font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:99px;
  background:rgba(255,255,255,.1);color:#fff;white-space:nowrap;
}
.demobar nav a.on{background:#fff;color:var(--ink)}
.demobar .reset{
  font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:99px;
  background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;
}
.demobar .hint{font-size:12px;opacity:.6;display:none}
@media(min-width:900px){ .demobar .hint{display:block} }

/* ---------- Cadre téléphone (client + pro sur desktop) ---------- */
.stage{
  min-height:var(--haut-vue);
  display:flex;justify-content:center;
  padding:0;
}
.phone{
  width:100%;max-width:100%;
  background:var(--card);
  min-height:calc(var(--haut-vue) - var(--bas-demo));
  height:calc(var(--haut-vue) - var(--bas-demo));
  position:relative;
  display:flex;flex-direction:column;
  overflow:hidden;
}
@media(min-width:760px){
  .stage{padding:28px 16px 84px;align-items:flex-start;
    background:
      radial-gradient(1000px 500px at 50% -10%, #E7EDFB 0%, transparent 60%), var(--bg);}
  .phone{
    max-width:412px;
    height:min(840px, calc(100vh - 120px));
    min-height:560px;
    border-radius:38px;box-shadow:var(--sh-3);
    border:9px solid #10161F;
  }
}

/* ---------- Écrans ---------- */
.screen{display:none;flex-direction:column;flex:1;min-height:0}
.screen.on{display:flex;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:18px}
.pad-b{padding-bottom:26px}

/* ---------- En-tête ---------- */
.appbar{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:var(--card);position:sticky;top:0;z-index:20;
}
.appbar .back{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;cursor:pointer;flex:none;font-size:16px;
}
.appbar .ttl{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.appbar .sub{font-size:12px;color:var(--ink-3);margin-top:-2px}

.logo{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.02em}
.logo .symbole{height:27px;width:auto;flex:none}
.logo .mot{height:17px;width:auto;flex:none}
.logo .pro{
  font-size:10px;font-weight:800;letter-spacing:.12em;color:#fff;
  background:var(--urg);padding:2px 5px;border-radius:4px;align-self:center;
}
/* variante sur fond sombre : le noir du logo devient blanc */
.side .logo{margin:0 6px 20px;padding:0 2px}
.side .logo .symbole{height:30px}
.side .logo .mot{height:19px}
/* le back-office utilise la version blanche du logo (assets/logo-*-blanc.png) */

/* ---------- Titres ---------- */
h1.big{font-size:25px;line-height:1.18;letter-spacing:-.025em;margin:4px 0 6px;font-weight:800}
h2.mid{font-size:19px;line-height:1.25;letter-spacing:-.02em;margin:0 0 4px;font-weight:800}
.lede{color:var(--ink-3);font-size:14.5px;margin:0 0 18px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}

/* ---------- Bandeau promesse de rapidité ---------- */
.livepill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--green-soft);color:#0A7C41;
  font-size:12.5px;font-weight:750;padding:6px 12px;border-radius:99px;
  border:1px solid #C6EED9;max-width:100%;
}
/* le texte est un seul bloc : sinon le gap du flex s’insère entre chaque mot */
.livepill > span:not(.bip){min-width:0}
@media(max-width:380px){ .livepill{font-size:11.5px;padding:6px 10px} }
.livepill .bip{
  width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 0 rgba(15,169,88,.6);animation:bip 1.9s infinite;
}
@keyframes bip{
  0%{box-shadow:0 0 0 0 rgba(15,169,88,.55)}
  70%{box-shadow:0 0 0 8px rgba(15,169,88,0)}
  100%{box-shadow:0 0 0 0 rgba(15,169,88,0)}
}

.speedstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0 18px}
.speed{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:11px 7px;text-align:center;
}
.speed .v{font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.speed .l{font-size:10.5px;color:var(--ink-3);font-weight:600;line-height:1.25;margin-top:3px}
.speed .v.coche{color:var(--green);font-size:19px;line-height:1.15}

.ticker{
  display:flex;align-items:center;gap:9px;
  background:var(--ink);color:#fff;border-radius:13px;padding:10px 13px;
  font-size:12.5px;overflow:hidden;
}
.ticker .bolt{font-size:14px;flex:none}
.ticker .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:tick .5s}
.ticker .txt b{font-weight:700}
.ticker .txt .ago{opacity:.55}
@keyframes tick{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Icônes métier ---------- */
.pastille{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:13px;flex:none;
}
.trade .pastille{border-radius:14px}
.choice .ci .pastille{border-radius:11px}

/* ---------- Grille métiers ---------- */
.trades{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.trade{
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-m);
  padding:12px 6px 10px;text-align:center;cursor:pointer;
  transition:.15s;display:flex;flex-direction:column;align-items:center;gap:5px;
}
.trade:active{transform:scale(.96)}
.trade:hover{border-color:#C9D3E4;box-shadow:var(--sh-1)}
.trade .ico{font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center}
.trade .nm{font-size:12px;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.trade .dispo{
  font-size:10px;font-weight:750;color:#0A7C41;line-height:1.2;
  display:flex;align-items:center;gap:4px;margin-top:-2px;
}
.trade .dispo::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
.trade .dispo.att{color:var(--amber);}
.trade .dispo.att::before{background:var(--amber)}
.trade .dispo.off{color:var(--ink-3);font-weight:600}
.trade.bientot{background:#FAFBFD;border-style:dashed;opacity:.72}
.trade.bientot:hover{opacity:1;border-color:#C9D3E4}
.trade.bientot .pastille{background:var(--grey-soft) !important;color:var(--ink-3) !important}
.trade.bientot .nm{color:var(--ink-3)}
.trade .dispo.off::before{display:none}

/* ---------- Bouton « pourquoi UrgePro » ---------- */
.advcta{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid #D6E0FF;background:var(--blue-soft);border-radius:var(--r-m);
  padding:14px;transition:.14s;
}
.advcta:active{transform:scale(.99)}
.advcta .ic{font-size:22px;flex:none}
.advcta .t{display:block;font-weight:750;font-size:14.5px;letter-spacing:-.01em}
.advcta .s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.advcta .chev{margin-left:auto;color:var(--blue);font-size:20px;flex:none}

/* ---------- Lignes d'avantages ---------- */
.adv{display:flex;gap:12px;padding:13px 0;align-items:flex-start}
.adv + .adv{border-top:1px solid var(--line)}
.adv .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex:none}
.adv .t{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.3}
.adv .d{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px}

.advhero{
  background:linear-gradient(140deg,#101A2E 0%,#1E3157 100%);
  color:#fff;border-radius:var(--r-l);padding:20px;text-align:center;
}
.advhero .sh{font-size:34px;line-height:1}
.advhero .t{font-weight:800;font-size:19px;letter-spacing:-.02em;margin-top:8px}
.advhero .d{font-size:13.5px;opacity:.8;margin-top:5px;line-height:1.5}

/* ---------- Gros choix urgence / devis ---------- */
.bigchoice{
  display:block;width:100%;text-align:left;cursor:pointer;
  border-radius:var(--r-l);padding:22px 20px;border:none;color:#fff;margin-bottom:12px;
  box-shadow:var(--sh-2);transition:.15s;
}
.bigchoice:active{transform:scale(.985)}
.bigchoice .k{font-size:19px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.bigchoice .d{font-size:13.5px;opacity:.9;margin-top:5px}
.bigchoice.urg{background:linear-gradient(135deg,var(--urg) 0%,#FF7622 100%)}
.bigchoice.dev{background:linear-gradient(135deg,var(--blue) 0%,#4B85FF 100%)}

/* ---------- Listes de choix ---------- */
.choice{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r-m);margin-bottom:9px;cursor:pointer;transition:.14s;
}
.choice:hover{border-color:#C9D3E4}
.choice:active{transform:scale(.99)}
.choice.sel{border-color:var(--ink);box-shadow:0 0 0 2px rgba(11,18,32,.08)}
.choice .ci{width:38px;height:38px;border-radius:11px;background:var(--grey-soft);display:grid;place-items:center;font-size:18px;flex:none}
.choice .ct{font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.choice .cs{font-size:12.5px;color:var(--ink-3)}
.choice .chev{margin-left:auto;color:#C2CBD9;font-size:18px}

/* ---------- Formulaires ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:650;margin-bottom:6px}
.field .help{font-size:12px;color:var(--ink-3);margin-top:5px}
.inp{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);font-size:16px;outline:none;transition:.14s;
}
.inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
textarea.inp{min-height:92px;resize:vertical;line-height:1.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.photos{display:flex;gap:8px;flex-wrap:wrap}
.photo-add{
  width:74px;height:74px;border-radius:13px;border:1.5px dashed #C7D0DE;background:#FAFBFD;
  display:grid;place-items:center;cursor:pointer;font-size:20px;color:var(--ink-3);flex:none;
}
.photo-thumb{
  width:74px;height:74px;border-radius:13px;flex:none;position:relative;overflow:hidden;
  display:grid;place-items:center;font-size:26px;color:#fff;
  background:linear-gradient(135deg,#8FA3BF,#5F7391);
}
.photo-thumb b{position:absolute;top:3px;right:5px;font-size:11px;opacity:.8}

/* ---------- Boutons ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 18px;border:none;border-radius:14px;font-weight:750;font-size:15.5px;
  cursor:pointer;transition:.14s;letter-spacing:-.01em;
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.62;cursor:not-allowed}
.btn.pri{background:var(--ink);color:#fff}
.btn.urg{background:var(--urg);color:#fff;box-shadow:0 6px 18px rgba(251,74,2,.28)}
.btn.blue{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(27,92,255,.28)}
.btn.green{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(15,169,88,.28)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:11px 14px;font-size:14px;border-radius:11px}
.btn.link{background:none;color:var(--ink-3);font-weight:600;font-size:13.5px;padding:10px}

.sticky-cta{
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);position:sticky;bottom:0;z-index:20;
}

/* ---------- Chips / badges ---------- */
.chips{display:flex;gap:7px;flex-wrap:wrap}
/* Les besoins d'un métier sont des phrases entières : en colonne, ils se
   lisent d'un coup d'œil au lieu de se couper n'importe où. */
.chips.col{flex-direction:column;gap:8px}
.chips.col .chip{width:100%;text-align:left;padding:13px 14px;font-size:14.5px}
.chip{
  padding:8px 13px;border-radius:99px;border:1px solid var(--line);background:var(--card);
  font-size:13.5px;font-weight:600;cursor:pointer;transition:.14s;
}
.chip.sel{background:var(--ink);color:#fff;border-color:var(--ink)}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px}
.badge.g{background:var(--green-soft);color:#0A7C41}
.badge.b{background:var(--blue-soft);color:var(--blue-d)}
.badge.a{background:var(--amber-soft);color:#9A6400}
.badge.r{background:var(--red-soft);color:#B4272B}
.badge.n{background:var(--grey-soft);color:var(--ink-2)}
.badge.o{background:var(--urg-soft);color:var(--urg-d)}

/* ---------- Cartes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;box-shadow:var(--sh-1)}
.card + .card{margin-top:12px}
.card.flat{box-shadow:none}
.card.tint-urg{background:var(--urg-soft);border-color:#FFD8CB}
.card.tint-blue{background:var(--blue-soft);border-color:#D6E0FF}
.card.tint-green{background:var(--green-soft);border-color:#C6EED9}
.card.tint-amber{background:var(--amber-soft);border-color:#F5D9A4}

.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px}
.kv + .kv{border-top:1px solid var(--line)}
.kv .k{color:var(--ink-3)}
.kv .v{font-weight:650;text-align:right}
.kv.total{font-size:17px;font-weight:800;padding-top:12px;margin-top:3px;border-top:2px solid var(--ink)}

/* ---------- Fiche pro ---------- */
.prohead{display:flex;align-items:center;gap:13px}
.avatar{
  width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:19px;color:#fff;background:linear-gradient(140deg,#33507F,#1E3157);
}
.avatar.sm{width:40px;height:40px;font-size:14px}
.avatar.xs{width:30px;height:30px;font-size:11px}
.stars{color:var(--amber);font-size:13px;letter-spacing:1px}

/* ---------- Carte (fond simulé) ---------- */
.map{position:relative;width:100%;background:#E8EDF3;overflow:hidden}
.map.h240{height:240px}
.map.h300{height:300px}
.map.h180{height:180px}
.map.full{flex:1;min-height:260px}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .pin{
  position:absolute;transform:translate(-50%,-100%);z-index:3;
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
}
.map .pin .dot{
  width:30px;height:30px;border-radius:50% 50% 50% 4px;transform:rotate(45deg);
  display:grid;place-items:center;box-shadow:0 3px 8px rgba(11,18,32,.3);
}
.map .pin .dot i{transform:rotate(-45deg);font-style:normal;font-size:14px}
.map .pin.me .dot{background:var(--blue)}
.map .pin.pro .dot{background:var(--green)}
.map .pin.busy .dot{background:var(--red)}
.map .pin.off .dot{background:#8C97A8}
.map .pin .lbl{
  margin-top:4px;font-size:10.5px;font-weight:700;background:var(--card);padding:2px 6px;
  border-radius:5px;box-shadow:var(--sh-1);white-space:nowrap;
}
.map .me-dot{
  position:absolute;width:18px;height:18px;border-radius:50%;background:var(--blue);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(27,92,255,.5);transform:translate(-50%,-50%);z-index:4;
}
.radar{
  position:absolute;border-radius:50%;transform:translate(-50%,-50%);
  border:2px solid rgba(27,92,255,.45);background:rgba(27,92,255,.09);
  animation:ping 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes ping{
  0%{width:20px;height:20px;opacity:.9}
  100%{width:var(--rmax,260px);height:var(--rmax,260px);opacity:0}
}
.ringlbl{
  position:absolute;left:50%;transform:translateX(-50%);bottom:12px;
  background:rgba(11,18,32,.86);color:#fff;font-size:12px;font-weight:650;
  padding:6px 12px;border-radius:99px;z-index:5;
}
.map .veh{
  position:absolute;transform:translate(-50%,-50%);z-index:4;font-size:20px;
  transition:left 1s linear, top 1s linear;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* ---------- Recherche en cours ---------- */
.searching{text-align:center;padding:20px 18px}
.searching .t{font-weight:800;font-size:18px;letter-spacing:-.02em}
.searching .s{color:var(--ink-3);font-size:14px;margin-top:4px}
.pulse-dots{display:inline-flex;gap:4px;margin-left:2px}
.pulse-dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:bl 1.2s infinite}
.pulse-dots i:nth-child(2){animation-delay:.2s}
.pulse-dots i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}

.log{margin-top:14px;text-align:left;font-size:13px}
.log .li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;color:var(--ink-3);animation:fade .3s}
.log .li b{color:var(--ink);font-weight:650}
.log .li .t{width:16px;flex:none;text-align:center}

/* ---------- Timeline statuts ---------- */
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl .st{position:relative;padding:7px 0;font-size:13.5px;color:var(--ink-3)}
.tl .st::before{
  content:'';position:absolute;left:-22px;top:13px;width:11px;height:11px;border-radius:50%;
  background:var(--card);border:2px solid var(--line);
}
.tl .st.done{color:var(--ink)}
.tl .st.done::before{background:var(--green);border-color:var(--green)}
.tl .st.now{color:var(--ink);font-weight:700}
.tl .st.now::before{background:var(--urg);border-color:var(--urg);box-shadow:0 0 0 4px var(--urg-soft)}
.tl .st .tm{font-size:11.5px;color:var(--ink-3);font-weight:500}

/* ---------- Toggle disponibilité (PRO) ---------- */
.availwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:26px 20px;text-align:center}
.availbtn{
  width:210px;height:210px;border-radius:50%;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#fff;font-weight:800;font-size:18px;letter-spacing:-.02em;transition:.2s;
  position:relative;
}
.availbtn .sm{font-size:12.5px;font-weight:600;opacity:.85;letter-spacing:0}
.availbtn.off{background:linear-gradient(140deg,#48546A,#2C3648);box-shadow:0 12px 34px rgba(44,54,72,.35)}
.availbtn.on{background:linear-gradient(140deg,#12B863,#0A8F4B);box-shadow:0 12px 40px rgba(15,169,88,.45)}
.availbtn:active{transform:scale(.97)}
.availbtn.on::after{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(15,169,88,.4);animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:.15}}

/* ---------- Notification push simulée ---------- */
.pushwrap{position:absolute;left:0;right:0;top:0;z-index:400;padding:10px;pointer-events:none}
.push{
  pointer-events:auto;background:rgba(28,34,45,.97);color:#fff;border-radius:18px;padding:13px 14px;
  box-shadow:0 16px 40px rgba(0,0,0,.4);backdrop-filter:blur(10px);
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  animation:drop .38s cubic-bezier(.16,1,.3,1);
}
@keyframes drop{from{transform:translateY(-130%);opacity:0}to{transform:none;opacity:1}}
.push .ic{width:34px;height:34px;border-radius:9px;background:var(--urg);display:grid;place-items:center;font-size:17px;flex:none}
.push .tt{font-weight:750;font-size:14px}
.push .bb{font-size:12.5px;opacity:.75;line-height:1.35;margin-top:1px}
.push .cd{margin-left:auto;font-size:12px;font-weight:800;background:rgba(255,255,255,.14);padding:4px 8px;border-radius:8px;flex:none}

/* ---------- Feuille modale ---------- */
.sheetwrap{position:absolute;inset:0;z-index:500;display:none}
.sheetwrap.on{display:block}
.sheetwrap .veil{position:absolute;inset:0;background:rgba(11,18,32,.5);animation:fade .2s}
.sheet{
  position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:24px 24px 0 0;
  max-height:92%;overflow-y:auto;animation:up .3s cubic-bezier(.16,1,.3,1);
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .grab{width:38px;height:4px;border-radius:99px;background:#D8DEE8;margin:9px auto 2px}

/* ---------- Compte à rebours ---------- */
.countdown{
  height:5px;background:var(--line);border-radius:99px;overflow:hidden;margin:12px 0 4px;
}
.countdown i{display:block;height:100%;background:var(--urg);width:100%;transition:width 1s linear}

/* ---------- Onglets bas (PRO) ---------- */
.tabbar{
  display:flex;border-top:1px solid var(--line);background:var(--card);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1;background:none;border:none;padding:9px 4px 11px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-3);
}
.tabbar button .i{font-size:19px;line-height:1}
.tabbar button .l{font-size:10.5px;font-weight:650}
.tabbar button.on{color:var(--ink)}
.tabbar button .dotmark{position:absolute;margin:-4px 0 0 16px;width:7px;height:7px;border-radius:50%;background:var(--urg)}

/* ---------- Gestion : devis / factures / compta ---------- */
.seg{
  display:flex;background:var(--grey-soft);border-radius:12px;padding:3px;gap:2px;margin-bottom:16px;
}
.seg button{
  flex:1;border:none;background:none;padding:9px 6px;border-radius:9px;cursor:pointer;
  font-size:13px;font-weight:650;color:var(--ink-3);transition:.14s;white-space:nowrap;
}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}

.docrow{
  display:flex;align-items:center;gap:11px;padding:12px 0;cursor:pointer;
}
.docrow + .docrow{border-top:1px solid var(--line)}
.docrow .num{font-size:11.5px;font-weight:750;color:var(--ink-3);letter-spacing:.02em}
.docrow .cli{font-weight:700;font-size:14px;letter-spacing:-.01em}
.docrow .obj{font-size:12.5px;color:var(--ink-3)}
.docrow .amt{margin-left:auto;text-align:right;flex:none}
.docrow .amt .v{font-weight:800;font-size:15px;letter-spacing:-.02em}
.docrow .amt .u{font-size:11px;color:var(--ink-3)}

.lignedoc{
  display:grid;grid-template-columns:1fr 52px 76px 62px;gap:6px;align-items:center;margin-bottom:7px;
}
.lignedoc input,.lignedoc select{
  width:100%;padding:9px 8px;border:1px solid var(--line);border-radius:9px;
  font-size:13px;background:var(--card);outline:none;min-width:0;
}
.lignedoc input:focus,.lignedoc select:focus{border-color:var(--blue)}
.lignedoc .del{
  border:none;background:none;color:#C2CBD9;cursor:pointer;font-size:17px;padding:0;
}
.lignehead{
  display:grid;grid-template-columns:1fr 52px 76px 62px;gap:6px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;padding:0 2px;
}

.bars{display:flex;align-items:flex-end;gap:5px;height:110px;margin:12px 0 4px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px}
.bars .b i{
  display:block;width:100%;background:linear-gradient(180deg,#3D6BFF,#1B5CFF);
  border-radius:5px 5px 2px 2px;min-height:3px;transition:height .4s;
}
.bars .b.now i{background:linear-gradient(180deg,#FF8A3D,var(--urg))}
.bars .b span{font-size:9.5px;color:var(--ink-3);text-align:center;font-weight:650}

/* ---------- Paiement Stripe ---------- */
.stripe-card{
  border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;
}
.stripe-row{display:flex;align-items:center;gap:10px;padding:13px 14px}
.stripe-row + .stripe-row{border-top:1px solid var(--line)}
.stripe-row.duo{padding:0;display:flex}
.stripe-row.duo > div{flex:1;display:flex;align-items:center;gap:8px;padding:13px 14px;min-width:0}
.stripe-row.duo > div + div{border-left:1px solid var(--line)}
.stripe-card input{
  border:none;outline:none;width:100%;font-size:15.5px;background:transparent;
  letter-spacing:.02em;
}
.stripe-card input::placeholder{color:#B6BFCC}
.stripe-card .brand{font-size:17px;flex:none;opacity:.85}
.stripe-card.focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

.stripe-badge{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:12px;
}
.stripe-badge b{color:#635BFF;font-weight:800;letter-spacing:-.02em}

.secure3d{
  text-align:center;padding:34px 20px;
}
.secure3d .spin{
  width:44px;height:44px;border-radius:50%;margin:0 auto 16px;
  border:3px solid var(--line);border-top-color:var(--blue);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Bouton assistant ---------- */
.assistcta{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:none;border-radius:var(--r-m);padding:14px;transition:.14s;color:#fff;
  background:linear-gradient(135deg,#2B1D63 0%,#5B3FBF 55%,#8B5CF6 100%);
  box-shadow:0 6px 18px rgba(91,63,191,.28);
}
.assistcta:active{transform:scale(.99)}
.assistcta .ic{font-size:21px;flex:none}
.assistcta .t{display:block;font-weight:750;font-size:14.5px;letter-spacing:-.01em}
.assistcta .s{display:block;font-size:12px;opacity:.8;margin-top:1px;line-height:1.35}
.assistcta .chev{margin-left:auto;font-size:20px;opacity:.7;flex:none}

/* ---------- Tickets / justificatifs ---------- */
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ticket{
  position:relative;border-radius:13px;overflow:hidden;border:1px solid var(--line);
  background:var(--card);cursor:pointer;aspect-ratio:3/4;transition:.14s;
}
.ticket:active{transform:scale(.97)}
.ticket img{width:100%;height:100%;object-fit:cover;display:block}
.ticket .ov{
  position:absolute;left:0;right:0;bottom:0;padding:18px 7px 6px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(11,18,32,.88));
  font-size:11.5px;font-weight:800;letter-spacing:-.01em;
}
.ticket .ov small{display:block;font-weight:600;opacity:.75;font-size:9.5px;letter-spacing:0}
.ticket .cat{
  position:absolute;top:6px;left:6px;background:rgba(255,255,255,.93);
  border-radius:7px;padding:2px 5px;font-size:13px;line-height:1.2;
}
.ticket.vide{
  display:grid;place-items:center;border:1.5px dashed #C7D0DE;background:#FAFBFD;
  color:var(--ink-3);text-align:center;padding:8px;gap:4px;
}
.ticket.vide .ic{font-size:24px}
.ticket.vide .l{font-size:10.5px;font-weight:650;line-height:1.25}

.capture{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:16px;border:none;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,#1B5CFF,#4B85FF);color:#fff;
  font-weight:750;font-size:15.5px;box-shadow:0 6px 18px rgba(27,92,255,.3);
}
.capture:active{transform:scale(.985)}

.apercu{
  width:100%;border-radius:14px;border:1px solid var(--line);
  max-height:340px;object-fit:contain;background:#F4F6FA;display:block;
}

.echeance{
  display:flex;align-items:center;gap:10px;padding:11px;border-radius:12px;
  background:var(--amber-soft);border:1px solid #F5D9A4;margin-bottom:8px;font-size:13px;
}
.echeance.ok{background:var(--green-soft);border-color:#C6EED9}
.echeance .d{margin-left:auto;font-weight:750;font-size:12.5px;white-space:nowrap}

/* ---------- Stats ---------- */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:13px}
.stat .l{font-size:11.5px;color:var(--ink-3);font-weight:600}
.stat .v{font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:2px}
.stat .d{font-size:11.5px;font-weight:650;margin-top:1px}
.stat .d.up{color:var(--green)}
.stat .d.dn{color:var(--red)}

/* ---------- ADMIN ---------- */
.admin{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:#0E1524;color:#fff;padding:18px 12px 70px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{color:#fff;margin:0 6px 20px}
.side .sec{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5C6980;margin:16px 8px 6px;font-weight:800}
.side a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:#B4BECD;cursor:pointer;
}
.side a:hover{background:rgba(255,255,255,.06);color:#fff}
.side a.on{background:var(--urg);color:#fff}
.side a .i{width:18px;text-align:center}
.side a .n{margin-left:auto;background:rgba(255,255,255,.14);font-size:11px;font-weight:800;padding:1px 6px;border-radius:99px}

.main{padding:22px 24px 80px;min-width:0}
.main h1{font-size:23px;letter-spacing:-.03em;margin:0 0 3px;font-weight:800}
.main .sub{color:var(--ink-3);font-size:14px;margin:0 0 20px}

.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px;margin-bottom:20px}

table.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-1)}
table.tbl th{
  text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 13px;background:#FAFBFD;border-bottom:1px solid var(--line);font-weight:800;white-space:nowrap;
}
table.tbl td{padding:12px 13px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr.clickable{cursor:pointer}
table.tbl tr.clickable:hover td{background:#FAFBFD}
.tblwrap{overflow-x:auto;border-radius:var(--r-m)}

.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.toolbar select,.toolbar input{
  padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);font-size:13.5px;outline:none;
}

.panel{display:none}
.panel.on{display:block;animation:fade .2s}

.split{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
@media(max-width:1100px){.split{grid-template-columns:1fr}}
/* Par défaut un enfant de grille ne descend pas sous la largeur de son
   contenu (min-width:auto). Sur mobile, une seule ligne un peu longue
   suffit alors à élargir toute la page — et l’utilisateur doit dézoomer. */
.split > *{min-width:0}
@media(max-width:820px){
  .admin{grid-template-columns:1fr}
  /* Une cellule de grille ne descend jamais sous la largeur de son contenu
     sans min-width:0 — sans ça la colonne fait la taille des 8 onglets mis
     bout à bout, overflow-x ne s’active pas, et toute la page déborde :
     l’utilisateur doit dézoomer pour la voir en entier. */
  .admin > *{min-width:0}
  .side{
    position:relative;height:auto;display:flex;gap:6px;padding:12px;
    min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .side::-webkit-scrollbar{display:none}
  .side .logo,.side .sec{display:none}
  .side a{white-space:nowrap;padding:8px 12px;flex:none}
  .main{padding:16px 14px 80px;min-width:0}
}

.doc{
  display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:8px;font-size:13.5px;background:var(--card);
}
.doc .ic{width:32px;height:38px;border-radius:5px;background:var(--grey-soft);display:grid;place-items:center;font-size:15px;flex:none}

/* ---------- Divers ---------- */
.hr{height:1px;background:var(--line);margin:16px 0;border:0}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.center{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.flex{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grow{flex:1;min-width:0}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.notice{
  background:var(--amber-soft);border:1px solid #F5D9A4;border-radius:12px;padding:11px 13px;
  font-size:12.5px;color:#7A5200;line-height:1.45;
}
.notice b{color:#5E3F00}

.empty{text-align:center;padding:44px 20px;color:var(--ink-3)}
.empty .e{font-size:38px;margin-bottom:8px;opacity:.5}

.toast{
  position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:999;
  background:var(--ink);color:#fff;padding:11px 17px;border-radius:12px;font-size:13.5px;font-weight:600;
  box-shadow:var(--sh-2);animation:fade .2s;max-width:90vw;text-align:center;
}


/* =========================================================
   PAGE DE RECRUTEMENT ARTISAN — rejoindre.html
   Direction artistique « chantier au crépuscule » :
   alternance de blocs nuit et de blocs clairs, aplats d’orange
   marque, typographie d’affiche. Tout est préfixé « rj- » ou
   scopé sous « .rj » — aucun style ne peut atteindre
   index.html, pro.html ou admin.html.
   ========================================================= */

.rj{
  /* fonds */
  --rj-nuit:#0A0E16;
  --rj-ardoise:#111A29;
  --rj-ardoise-h:#161F30;
  --rj-beton:#EDF0F5;
  /* marque */
  --rj-urg:#FB4A02;
  --rj-urg-clair:#FF7A2F;      /* petits textes orange sur fond sombre */
  --rj-urg-sombre:#C93B02;     /* petits textes orange sur fond clair  */
  --rj-lueur:rgba(251,74,2,.34);
  --rj-voile:rgba(251,74,2,.12);
  /* sémantique */
  --rj-vert:#25D07A;
  --rj-vert-sombre:#0A7C41;
  --rj-vert-voile:rgba(37,208,122,.12);
  --rj-ambre:#FFC24D;
  /* textes sur fond sombre */
  --rj-blanc:#FFFFFF;
  --rj-corps:#C6CFDD;
  --rj-faible:#8B98AC;
  --rj-filet:rgba(255,255,255,.09);
  --rj-filet-fort:rgba(255,255,255,.16);
  /* divers */
  --rj-titre:'Archivo','Inter',-apple-system,sans-serif;
  --rj-max:1060px;
  --rj-bas:44px;               /* hauteur de la barre de démo ; 0 en production */

  background:var(--rj-nuit);
  color:var(--rj-blanc);
  overflow-x:hidden;
}
body.rj-page{background:var(--rj-nuit)}

.rj-in{max-width:var(--rj-max);margin:0 auto;padding:0 20px}
@media(min-width:960px){ .rj-in{padding:0 32px} }

/* ---------- Barre de navigation ---------- */
.rj-nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;height:56px;
  background:rgba(10,14,22,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rj-filet);
}
.rj-nav .logo{gap:9px}
.rj-nav .logo .symbole{height:26px}
.rj-nav .logo .mot{height:16px}
.rj-nav .rj-role{
  margin-left:auto;text-decoration:none;
  font-size:13px;font-weight:700;color:var(--rj-faible);
  padding:8px 14px;border-radius:99px;border:1px solid var(--rj-filet);
  transition:color .16s,border-color .16s,background-color .16s;
}
.rj-nav .rj-role:hover{
  color:var(--rj-blanc);border-color:var(--rj-filet-fort);background:rgba(255,255,255,.05);
}

/* ---------- Sections ---------- */
.rj-sec{padding:52px 0;scroll-margin-top:66px;position:relative}
.rj-sec--nuit{
  background:var(--rj-nuit);color:var(--rj-blanc);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
}
.rj-sec--blanc{background:#FFFFFF;color:#0B1220}
.rj-sec--beton{background:var(--rj-beton);color:#0B1220}
@media(min-width:760px){ .rj-sec{padding:74px 0} }

/* ---------- Ruban de chantier ---------- */
.rj-ruban{
  height:10px;background-color:var(--rj-nuit);
  background-image:repeating-linear-gradient(135deg,
    var(--rj-urg) 0 12px, transparent 12px 24px);
  animation:rj-ruban 2.4s linear infinite;
}
@keyframes rj-ruban{ from{background-position:0 0} to{background-position:33.94px 0} }

/* ---------- Titres ---------- */
.rj-sur{
  display:inline-block;margin:0 0 12px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rj-urg-clair);
}
.rj-sec--blanc .rj-sur,.rj-sec--beton .rj-sur{color:var(--rj-urg-sombre)}

.rj-h1{
  font-family:var(--rj-titre);font-variation-settings:'wdth' 116;
  font-size:clamp(34px,8.8vw,64px);font-weight:800;
  line-height:.98;letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance;
}
.rj-h1 .rj-marque{
  background-image:linear-gradient(var(--rj-urg),var(--rj-urg));
  background-size:100% 6px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:3px;
}
.rj-h2{
  font-family:var(--rj-titre);font-variation-settings:'wdth' 112;
  font-size:clamp(26px,5.4vw,40px);font-weight:800;
  line-height:1.06;letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance;
}
.rj-sub{
  font-size:clamp(15px,2vw,16.5px);line-height:1.55;
  color:var(--rj-corps);max-width:56ch;margin:0 0 28px;
}
.rj-sec--blanc .rj-sub,.rj-sec--beton .rj-sub{color:#3A4657}

/* ---------- Héros ---------- */
.rj-hero{
  position:relative;
  padding:clamp(28px,6vw,60px) 0 clamp(32px,6vw,64px);
  background:
    radial-gradient(120% 78% at 50% -8%, rgba(251,74,2,.30) 0%, transparent 62%),
    var(--rj-nuit);
}
.rj-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(#000,transparent 78%);
          mask-image:linear-gradient(#000,transparent 78%);
}
.rj-hero > .rj-in{position:relative;z-index:1}

.rj-badge{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;
  background:var(--rj-voile);border:1px solid rgba(251,74,2,.38);
  color:var(--rj-urg-clair);
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 15px;border-radius:99px;line-height:1.35;
}
.rj-badge .rj-bip{
  width:7px;height:7px;border-radius:50%;background:var(--rj-urg);flex:none;
  animation:rj-bip 2s infinite;
}
@keyframes rj-bip{
  0%{box-shadow:0 0 0 0 rgba(251,74,2,.6)}
  70%{box-shadow:0 0 0 9px rgba(251,74,2,0)}
  100%{box-shadow:0 0 0 0 rgba(251,74,2,0)}
}
.rj-accroche{
  font-size:clamp(16px,3.4vw,19px);line-height:1.55;
  color:var(--rj-corps);max-width:40ch;margin:0 0 26px;
}
.rj-accroche b{color:var(--rj-blanc);font-weight:650}

/* ---------- Compte à rebours ---------- */
.rj-compte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:330px;margin:0 0 24px}
.rj-compte > div{
  background:linear-gradient(180deg,var(--rj-ardoise-h) 0%,#0E1523 100%);
  border:1px solid var(--rj-filet);border-radius:14px;
  padding:12px 4px 10px;text-align:center;min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.rj-compte .n{
  font-family:var(--rj-titre);font-variation-settings:'wdth' 108;
  font-size:clamp(26px,7vw,42px);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}
.rj-compte .u{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rj-faible);margin-top:7px;
}

/* ---------- Boutons ---------- */
.rj .rj-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:380px;min-height:58px;padding:0 26px;
  border:none;border-radius:15px;cursor:pointer;text-decoration:none;
  font-family:inherit;font-size:19px;font-weight:800;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(180deg,#FF6B23 0%,#FB4A02 55%,#E03F01 100%);
  box-shadow:0 10px 30px var(--rj-lueur),0 2px 6px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .14s ease,box-shadow .18s ease,filter .18s ease;
}
.rj .rj-cta .rj-fl{display:inline-block;transition:transform .18s ease;font-weight:700}
.rj .rj-cta:hover{
  filter:brightness(1.05);
  box-shadow:0 14px 38px rgba(251,74,2,.42),0 2px 6px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.28);
}
.rj .rj-cta:hover .rj-fl{transform:translateX(4px)}
.rj .rj-cta:active{transform:translateY(1px) scale(.99)}

.rj-lien{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15.5px;font-weight:750;color:var(--rj-urg-sombre);
  text-decoration:none;border-bottom:2px solid rgba(251,74,2,.3);
  padding-bottom:2px;transition:border-color .16s;
}
.rj-lien:hover{border-color:var(--rj-urg)}
.rj-sec--nuit .rj-lien{color:var(--rj-urg-clair)}

.rj-rassure{font-size:13px;color:var(--rj-faible);margin:14px 0 0;line-height:1.5;text-wrap:balance}

/* ---------- Cartes ---------- */
.rj-grille{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:620px){ .rj-grille{grid-template-columns:repeat(2,1fr);gap:16px} }

.rj-carte{
  position:relative;border-radius:18px;padding:22px;
  border:1px solid #E4E8EF;background:#fff;
  box-shadow:0 1px 2px rgba(11,18,32,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.rj-carte:hover{
  transform:translateY(-3px);border-color:rgba(251,74,2,.42);
  box-shadow:0 14px 34px rgba(11,18,32,.10),0 0 0 1px rgba(251,74,2,.12);
}
.rj-carte:active{transform:scale(.99)}
.rj-sec--nuit .rj-carte{
  background:var(--rj-ardoise);border-color:var(--rj-filet);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.rj-sec--nuit .rj-carte:hover{
  border-color:rgba(251,74,2,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
}
.rj-carte .rj-ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:14px;background:var(--rj-voile);color:var(--rj-urg);
  border:1px solid rgba(251,74,2,.22);
}
.rj-sec--nuit .rj-carte .rj-ic{color:var(--rj-urg-clair)}
.rj-carte h3{
  font-size:clamp(16.5px,1.6vw,18.5px);font-weight:700;letter-spacing:-.015em;
  line-height:1.3;margin:0 0 7px;
}
.rj-carte p{font-size:14.5px;line-height:1.6;color:#3A4657;margin:0}
.rj-carte p b{font-weight:650;color:#0B1220}
.rj-sec--nuit .rj-carte p{color:var(--rj-corps)}
.rj-sec--nuit .rj-carte p b{color:var(--rj-blanc)}

/* ---------- Étiquettes ---------- */
.rj-etiq{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border-radius:7px;
}
.rj-etiq--vert{background:#E9F8F0;color:var(--rj-vert-sombre);border:1px solid #C6EED9}
.rj-etiq--orange{background:#FFF0EB;color:var(--rj-urg-sombre);border:1px solid #FFD3C2}
.rj-sec--nuit .rj-etiq--vert{
  background:var(--rj-vert-voile);color:var(--rj-vert);border-color:rgba(37,208,122,.3);
}
.rj-sec--nuit .rj-etiq--orange{
  background:var(--rj-voile);color:var(--rj-urg-clair);border-color:rgba(251,74,2,.32);
}

/* ---------- Blocs d’honnêteté ---------- */
.rj-note{
  margin-top:20px;padding:16px 18px;border-radius:14px;
  border:1px solid #F5D9A4;border-left:4px solid var(--rj-urg);
  background:#FFF6E5;color:#7A5200;font-size:13.5px;line-height:1.6;
}
.rj-note b{color:#5E3F00}
.rj-sec--nuit .rj-note{
  background:rgba(255,194,77,.09);border-color:rgba(255,194,77,.22);
  border-left-color:var(--rj-urg);color:#E4D2AE;
}
.rj-sec--nuit .rj-note b{color:var(--rj-ambre)}

.rj-franc{
  border-radius:18px;padding:22px;
  background:#fff;border:1px solid #E4E8EF;border-left:5px solid var(--rj-urg);
  box-shadow:0 4px 14px rgba(11,18,32,.06);
}
.rj-franc h3{
  font-family:var(--rj-titre);font-variation-settings:'wdth' 110;
  font-size:clamp(19px,3vw,24px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;
}
.rj-franc p{font-size:14.5px;line-height:1.65;color:#3A4657;margin:0 0 10px}
.rj-franc p:last-child{margin-bottom:0}
.rj-franc p b{color:#0B1220;font-weight:700}

/* ---------- Tableau des tarifs ---------- */
.rj-tarif{
  width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid #E4E8EF;border-radius:18px;overflow:hidden;
  box-shadow:0 4px 14px rgba(11,18,32,.06);
}
.rj-tarif th{
  text-align:left;padding:14px 18px;background:#F7F9FC;border-bottom:1px solid #E4E8EF;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6B7789;
}
.rj-tarif td{padding:16px 18px;border-bottom:1px solid #E4E8EF;font-size:14.5px;line-height:1.4}
.rj-tarif tr:last-child td{border-bottom:none}
.rj-tarif .rj-zero{
  color:var(--rj-vert-sombre);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;
}
.rj-tarif tr.rj-souligne td{background:#FFF7F3;font-weight:600}
.rj-tarif tr.rj-souligne td:first-child{box-shadow:inset 3px 0 0 var(--rj-urg)}
.rj-tarif tr.rj-souligne .rj-pct{
  color:var(--rj-urg-sombre);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;
}
@media(max-width:600px){
  .rj-tarif,.rj-tarif tbody,.rj-tarif tr,.rj-tarif td{display:block;width:100%}
  .rj-tarif thead{display:none}
  .rj-tarif tr{border-bottom:1px solid #E4E8EF;padding:14px 16px;
    display:flex;align-items:center;justify-content:space-between;gap:14px}
  .rj-tarif tr:last-child{border-bottom:none}
  .rj-tarif td{border:none;padding:0;width:auto}
  .rj-tarif td:first-child{font-size:14px;color:#3A4657;box-shadow:none!important}
  .rj-tarif td:last-child{text-align:right;flex:none}
  .rj-tarif tr.rj-souligne{box-shadow:inset 3px 0 0 var(--rj-urg);background:#FFF7F3}
}

/* ---------- Places par métier ---------- */
.rj-places{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){ .rj-places{grid-template-columns:repeat(5,1fr);gap:12px} }
.rj-place{
  background:var(--rj-ardoise);border:1px solid var(--rj-filet);
  border-radius:16px;padding:16px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .2s;
}
.rj-place .rj-haut{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rj-past{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:var(--rj-urg-clair);
  border:1px solid var(--rj-filet);
}
.rj-place .rj-nom{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.2}
.rj-place .rj-jauge{height:8px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden}
.rj-place .rj-jauge i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#1FB86D,var(--rj-vert));
  transition:width .6s cubic-bezier(.22,.8,.3,1);
}
.rj-place .rj-jauge.rj-tendu i{
  background:linear-gradient(90deg,var(--rj-urg),#FF8B3C);box-shadow:0 0 12px rgba(251,74,2,.55);
}
.rj-place.rj-tendu{border-color:rgba(251,74,2,.4)}
.rj-place .rj-txt{
  font-size:12px;font-weight:650;color:var(--rj-faible);margin-top:9px;
  font-variant-numeric:tabular-nums;
}
.rj-place .rj-txt b{color:var(--rj-blanc);font-weight:800}
.rj-place.rj-tendu .rj-txt b{color:var(--rj-urg-clair)}

/* ---------- Formulaire ---------- */
.rj-form{
  background:#fff;border:1px solid #E4E8EF;border-radius:22px;padding:22px;
  box-shadow:0 18px 48px rgba(11,18,32,.12);max-width:620px;margin:0 auto;color:#0B1220;
}
@media(min-width:620px){ .rj-form{padding:30px} }
.rj .rj-form .rj-champ{margin-bottom:16px}
.rj .rj-form label{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  margin-bottom:8px;color:#3A4657;
}
.rj .rj-form .rj-inp{
  width:100%;min-height:52px;padding:14px 15px;
  border:1.5px solid #DDE3EC;border-radius:13px;background:#fff;
  font-family:inherit;font-size:16px;color:#0B1220;outline:none;
  transition:border-color .14s,box-shadow .14s;
}
.rj .rj-form .rj-inp::placeholder{color:#9AA6B8}
.rj .rj-form .rj-inp:focus{border-color:var(--rj-urg);box-shadow:0 0 0 4px rgba(251,74,2,.14)}
.rj .rj-form .rj-inp.rj-faux{border-color:#D93A0E;background:#FFF6F3}
.rj-erreur{font-size:12.5px;font-weight:650;color:#D93A0E;margin-top:6px}
.rj .rj-form .rj-duo{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:520px){ .rj .rj-form .rj-duo{grid-template-columns:1fr 1fr} }

.rj-chips{display:flex;gap:8px;flex-wrap:wrap}
.rj .rj-chip{
  min-height:44px;padding:11px 16px;border-radius:99px;
  border:1.5px solid #DDE3EC;background:#fff;color:#0B1220;
  font-family:inherit;font-size:14.5px;font-weight:650;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s,border-color .14s,background-color .14s,color .14s;
}
.rj .rj-chip:hover{border-color:#B9C4D4}
.rj .rj-chip:active{transform:scale(.96)}
.rj .rj-chip.rj-sel{
  background:var(--rj-urg);border-color:var(--rj-urg);color:#fff;
  box-shadow:0 4px 12px rgba(251,74,2,.28);
}
.rj .rj-chip svg{width:17px;height:17px;flex:none}

.rj-contexte{
  margin-top:12px;padding:12px 14px;border-radius:12px;
  background:#FFF7F3;border:1px solid #FFD3C2;
  font-size:13.5px;line-height:1.5;color:#8A3A12;
}
.rj-contexte b{color:var(--rj-urg-sombre)}

/* ---------- Confirmation ---------- */
.rj-ok{text-align:center;padding:6px 0}
.rj-ok .rj-rond{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,#2FDD87,#12A85E);
  box-shadow:0 10px 26px rgba(18,168,94,.34);
}
.rj-ok .rj-rond svg{width:30px;height:30px}
.rj-recap{
  text-align:left;background:#F7F9FC;border:1px solid #E4E8EF;border-radius:14px;
  padding:6px 16px;margin:18px 0;
}
.rj-recap .rj-l{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid #E9EDF3;font-size:14px;
}
.rj-recap .rj-l:last-child{border-bottom:none}
.rj-recap .rj-k{color:#6B7789;font-weight:600;flex:none}
.rj-recap .rj-v{font-weight:700;text-align:right}

/* ---------- Questions ---------- */
.rj-faq{max-width:780px;margin:0 auto}
.rj-faq details{
  border:1px solid #E4E8EF;border-radius:14px;background:#fff;margin-bottom:10px;
  overflow:hidden;transition:border-color .16s,box-shadow .16s;
}
.rj-faq details[open]{border-color:rgba(251,74,2,.35);box-shadow:0 6px 20px rgba(11,18,32,.07)}
.rj-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:17px 18px;
  font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35;
}
.rj-faq summary::-webkit-details-marker{display:none}
.rj-faq summary::after{
  content:'+';margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:#F2F4F8;color:var(--rj-urg-sombre);
  font-size:18px;font-weight:700;line-height:1;transition:background-color .16s;
}
.rj-faq details[open] summary::after{content:'−';background:var(--rj-voile)}
.rj-faq .rj-rep{padding:0 18px 18px;font-size:14.5px;line-height:1.65;color:#3A4657}

/* ---------- Barre d’action collante (mobile) ---------- */
.rj-collant{
  position:fixed;left:0;right:0;bottom:var(--rj-bas);z-index:35;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,14,22,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--rj-filet);
  transform:translateY(160%);transition:transform .28s cubic-bezier(.22,.8,.3,1);
}
.rj-collant.rj-on{transform:none}
.rj-collant .rj-cta{max-width:none;min-height:52px;font-size:17px}
@media(min-width:760px){ .rj-collant{display:none} }

/* ---------- Pied de page ---------- */
.rj-pied{
  background:var(--rj-nuit);border-top:1px solid var(--rj-filet);
  padding:32px 0 calc(96px + var(--rj-bas));text-align:center;
}
.rj-pied p{font-size:12.5px;line-height:1.65;color:var(--rj-faible);max-width:64ch;margin:0 auto}
@media(min-width:760px){ .rj-pied{padding-bottom:calc(40px + var(--rj-bas))} }

/* ---------- Accessibilité ---------- */
.rj a:focus-visible,.rj button:focus-visible,
.rj summary:focus-visible,.rj input:focus-visible{
  outline:2px solid var(--rj-urg-clair);outline-offset:3px;border-radius:6px;
}

/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .rj *,.rj *::before,.rj *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .rj-ruban{animation:none}
}

/* Couverture par métier dans le back-office (Admin → Pré-inscriptions).
   Version claire des jauges de la page de recrutement. */
.adm-places{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.adm-place{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:14px}
.adm-place .haut{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.adm-place .nom{font-weight:750;font-size:14px}
.adm-place .jauge{height:8px;border-radius:99px;background:var(--grey-soft);overflow:hidden}
.adm-place .jauge i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .5s}
.adm-place .jauge.manque i{background:var(--urg)}
.adm-place .txt{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:8px}

/* ---------- Le parcours d’une demande (page de recrutement) ---------- */
.rj-etapes{display:grid;grid-template-columns:1fr;gap:10px;counter-reset:rj}
@media(min-width:820px){ .rj-etapes{grid-template-columns:repeat(4,1fr);gap:14px} }
.rj-etape{
  position:relative;counter-increment:rj;
  background:var(--rj-ardoise);border:1px solid var(--rj-filet);
  border-radius:16px;padding:18px 18px 18px 62px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
@media(min-width:820px){ .rj-etape{padding:20px 18px 18px} }
.rj-etape::before{
  content:counter(rj);
  position:absolute;left:18px;top:17px;
  width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  font-family:var(--rj-titre);font-variation-settings:'wdth' 110;
  font-size:16px;font-weight:800;line-height:1;
  background:var(--rj-voile);color:var(--rj-urg-clair);
  border:1px solid rgba(251,74,2,.3);
}
@media(min-width:820px){ .rj-etape::before{position:static;margin-bottom:14px} }
.rj-etape h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:0 0 6px}
.rj-etape p{font-size:14px;line-height:1.55;color:var(--rj-corps);margin:0}

/* ---------- Comparaison honnête avec la vente de contacts ---------- */
.rj-vs{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){ .rj-vs{grid-template-columns:1fr 1fr;gap:18px} }
.rj-vs-col{border-radius:18px;padding:22px;border:1px solid #E4E8EF;background:#fff}
.rj-vs-col .rj-vs-t{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:14px;color:#6B7789;
}
.rj-vs-col ul{list-style:none;margin:0;padding:0}
.rj-vs-col li{
  position:relative;padding:0 0 0 28px;margin-bottom:12px;
  font-size:14.5px;line-height:1.55;color:#3A4657;
}
.rj-vs-col li:last-child{margin-bottom:0}
.rj-vs-col li::before{
  position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;line-height:1;
}
.rj-vs-eux{background:#F7F9FC}
.rj-vs-eux .rj-vs-t{color:#8B98AC}
.rj-vs-eux li::before{content:'×';background:#FFE4DB;color:#C93B02;font-size:14px}
.rj-vs-nous{border-color:rgba(251,74,2,.4);box-shadow:0 10px 30px rgba(11,18,32,.09)}
.rj-vs-nous .rj-vs-t{color:var(--rj-urg-sombre)}
.rj-vs-nous li::before{content:'✓';background:#E9F8F0;color:var(--rj-vert-sombre)}
.rj-vs-nous li{color:#0B1220;font-weight:550}

/* ---------- Chiffres de la zone ---------- */
.rj-chiffres{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rj-filet);border:1px solid var(--rj-filet);
  border-radius:18px;overflow:hidden;
}
@media(min-width:700px){ .rj-chiffres{grid-template-columns:repeat(4,1fr)} }
.rj-chiffres > div{background:var(--rj-ardoise);padding:20px 12px;text-align:center}
.rj-chiffres .v{
  font-family:var(--rj-titre);font-variation-settings:'wdth' 112;
  font-size:clamp(26px,6vw,40px);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--rj-urg-clair);
}
.rj-chiffres .l{
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--rj-faible);margin-top:9px;line-height:1.35;
}

/* ---------- Liste compacte (l’outil de gestion, argument secondaire) ---------- */
.rj-liste{border:1px solid #E4E8EF;border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:0 4px 14px rgba(11,18,32,.05)}
.rj-liste .rj-ligne{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border-bottom:1px solid #EEF1F6;
}
.rj-liste .rj-ligne:last-child{border-bottom:none}
.rj-liste .rj-ic{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--rj-voile);color:var(--rj-urg);border:1px solid rgba(251,74,2,.22);
}
.rj-liste .rj-ic svg{width:20px;height:20px}
.rj-liste .rj-t{
  font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px;
}
.rj-liste .rj-d{font-size:13.5px;line-height:1.5;color:#3A4657}
.rj-liste .rj-d b{color:#0B1220;font-weight:650}
.rj-pastel{
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;white-space:nowrap;
}
.rj-pastel--vert{background:#E9F8F0;color:var(--rj-vert-sombre);border:1px solid #C6EED9}
.rj-pastel--orange{background:#FFF0EB;color:var(--rj-urg-sombre);border:1px solid #FFD3C2}

/* ---------- Formulaire de création de compte ---------- */
.rj .rj-form .rj-bloc{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rj-urg-sombre);
  margin:24px 0 14px;padding-top:18px;border-top:1px solid #EEF1F6;
}
.rj .rj-form .rj-bloc:first-child{margin-top:0;padding-top:0;border-top:none}
.rj .rj-form .help{font-size:12.5px;color:#6B7789;margin-top:6px;line-height:1.45}
.rj .rj-form .muted{color:#9AA6B8;font-weight:500}
.rj-case{
  display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;line-height:1.5;color:#3A4657;margin-top:20px;cursor:pointer;
}
.rj-case input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--rj-urg)}

/* =========================================================
   LANDING ARTISAN — blocs de la refonte
   ========================================================= */

/* ---------- Héros en deux colonnes : le discours, et le produit ---------- */
.rj-hero-duo{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:900px){
  .rj-hero-duo{grid-template-columns:1.06fr .94fr;gap:44px}
  /* la colonne est plus étroite qu’une pleine largeur : on redescend le titre */
  .rj-hero-duo .rj-h1{font-size:clamp(34px,4.2vw,52px)}
}

/* ---------- Maquette du téléphone : le produit est la vedette ---------- */
.rj-tel{
  width:100%;max-width:326px;margin:0 auto;
  background:#0E1523;border:1px solid rgba(255,255,255,.14);
  border-radius:30px;padding:10px;
  box-shadow:0 34px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.rj-tel-ecran{background:#F4F6FA;border-radius:22px;overflow:hidden}
.rj-tel-bar{
  display:flex;align-items:center;gap:8px;padding:13px 15px;
  background:#fff;border-bottom:1px solid #E4E8EF;
}
.rj-tel-bar img{height:15px;width:auto}
.rj-tel-bar .rj-tel-dispo{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0A7C41;background:#E9F8F0;border:1px solid #C6EED9;
  padding:4px 9px;border-radius:99px;
}
.rj-tel-dispo i{width:6px;height:6px;border-radius:50%;background:#12A85E;display:block}
.rj-tel-corps{padding:14px}

.rj-nd{
  background:#fff;border:1px solid #E4E8EF;border-radius:16px;padding:16px;
  box-shadow:0 10px 26px rgba(11,18,32,.10);
  border-left:4px solid var(--rj-urg);
}
.rj-nd-h{
  display:flex;align-items:center;gap:7px;margin-bottom:11px;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rj-urg-sombre);
}
.rj-nd-h i{
  width:7px;height:7px;border-radius:50%;background:var(--rj-urg);display:block;
  animation:rj-bip 2s infinite;
}
.rj-nd-t{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#0B1220;line-height:1.2}
.rj-nd-m{font-size:13px;color:#6B7789;margin-top:5px;font-weight:600}
.rj-nd-b{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:#FFF0EB;color:var(--rj-urg-sombre);border:1px solid #FFD3C2;
  padding:6px 11px;border-radius:7px;
}
.rj-nd-c{
  display:block;width:100%;margin-top:14px;min-height:44px;border:none;border-radius:12px;
  background:linear-gradient(180deg,#FF6B23,#FB4A02);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:800;cursor:default;
  box-shadow:0 6px 16px rgba(251,74,2,.3);
}
.rj-tel-ombre{
  height:10px;margin:12px 16px 0;border-radius:14px;
  background:#fff;opacity:.45;
}
.rj-tel-ombre + .rj-tel-ombre{margin-top:7px;opacity:.22}

/* ---------- Trois bénéfices ---------- */
.rj-benefs{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){ .rj-benefs{grid-template-columns:repeat(3,1fr);gap:18px} }
.rj-benef{
  background:#fff;border:1px solid #E4E8EF;border-radius:18px;padding:24px;
  box-shadow:0 1px 2px rgba(11,18,32,.05);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.rj-benef:hover{
  transform:translateY(-3px);border-color:rgba(251,74,2,.4);
  box-shadow:0 14px 34px rgba(11,18,32,.10);
}
.rj-benef .rj-ic{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--rj-voile);color:var(--rj-urg);border:1px solid rgba(251,74,2,.22);
}
.rj-benef h3{font-size:17.5px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px;line-height:1.3}
.rj-benef p{font-size:14.5px;line-height:1.6;color:#3A4657;margin:0}

/* ---------- « Pas de… » : ce qu’on ne fait pas ---------- */
.rj-nots{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
@media(min-width:700px){ .rj-nots{grid-template-columns:repeat(3,1fr)} }
.rj-not{
  display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.05);border:1px solid var(--rj-filet);
  border-radius:14px;padding:16px 18px;
  font-size:15px;font-weight:700;letter-spacing:-.01em;
}
.rj-not .rj-x{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(251,74,2,.14);color:var(--rj-urg-clair);border:1px solid rgba(251,74,2,.3);
}
.rj-not .rj-x svg{width:15px;height:15px}

/* ---------- Trois demandes types ---------- */
.rj-demandes{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:880px){ .rj-demandes{grid-template-columns:repeat(3,1fr);gap:18px} }
.rj-dem{
  background:#fff;border:1px solid #E4E8EF;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 20px rgba(11,18,32,.07);display:flex;flex-direction:column;
}
.rj-dem-h{
  display:flex;align-items:center;gap:8px;padding:13px 18px;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid #EEF1F6;
}
.rj-dem-h i{width:8px;height:8px;border-radius:50%;flex:none;display:block}
.rj-dem.rj-now  .rj-dem-h{background:#FFF3EE;color:var(--rj-urg-sombre)}
.rj-dem.rj-now  .rj-dem-h i{background:var(--rj-urg);animation:rj-bip 2s infinite}
.rj-dem.rj-week .rj-dem-h{background:#FFF7E8;color:#8A5A00}
.rj-dem.rj-week .rj-dem-h i{background:#F0A020}
.rj-dem.rj-month .rj-dem-h{background:#EFF3FF;color:#1B45B0}
.rj-dem.rj-month .rj-dem-h i{background:#3B6BE8}
.rj-dem-c{padding:18px;flex:1}
.rj-dem-t{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#0B1220;line-height:1.2}
.rj-dem-l{
  display:flex;align-items:center;gap:7px;font-size:13px;color:#6B7789;
  font-weight:600;margin-top:7px;
}
.rj-dem-d{list-style:none;margin:14px 0 0;padding:0}
.rj-dem-d li{
  position:relative;padding-left:20px;font-size:13.5px;line-height:1.5;
  color:#3A4657;margin-bottom:7px;
}
.rj-dem-d li::before{
  content:'';position:absolute;left:3px;top:8px;width:6px;height:6px;border-radius:50%;
  background:#C3CCDA;
}
.rj-dem-b{
  margin:0 18px 18px;min-height:46px;border-radius:12px;border:none;width:calc(100% - 36px);
  font-family:inherit;font-size:14px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;cursor:default;color:#fff;
}
.rj-dem.rj-now  .rj-dem-b{background:linear-gradient(180deg,#FF6B23,#FB4A02)}
.rj-dem.rj-week .rj-dem-b{background:linear-gradient(180deg,#F5A623,#E08A00)}
.rj-dem.rj-month .rj-dem-b{background:linear-gradient(180deg,#4B7BF0,#2B54C8)}

/* ---------- Les outils de gestion ---------- */
.rj-outils{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:820px){ .rj-outils{grid-template-columns:repeat(5,1fr);gap:14px} }
.rj-outil{
  background:#fff;border:1px solid #E4E8EF;border-radius:16px;padding:20px 16px;text-align:center;
  transition:transform .18s,border-color .18s;
}
.rj-outil:hover{transform:translateY(-3px);border-color:rgba(251,74,2,.4)}
.rj-outil .rj-ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin:0 auto 13px;
  background:var(--rj-voile);color:var(--rj-urg);border:1px solid rgba(251,74,2,.22);
}
.rj-outil h3{font-size:15px;font-weight:750;letter-spacing:-.01em;margin:0 0 6px;line-height:1.25}
.rj-outil p{font-size:12.5px;line-height:1.5;color:#6B7789;margin:0}

/* ---------- Le prix, en quatre chiffres ---------- */
.rj-prix{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:#E4E8EF;border:1px solid #E4E8EF;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 20px rgba(11,18,32,.06);
}
@media(min-width:820px){ .rj-prix{grid-template-columns:repeat(4,1fr)} }
.rj-prix > div{background:#fff;padding:26px 16px;text-align:center}
.rj-prix .v{
  font-family:var(--rj-titre);font-variation-settings:'wdth' 112;
  font-size:clamp(34px,7vw,48px);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--rj-vert-sombre);
}
.rj-prix .l{font-size:13px;color:#3A4657;margin-top:10px;line-height:1.4;font-weight:600}
.rj-prix > div.rj-cle{background:#FFF7F3}
.rj-prix > div.rj-cle .v{color:var(--rj-urg-sombre)}
.rj-prix > div.rj-cle .l{color:#0B1220;font-weight:700}

/* ---------- Les métiers du lancement ---------- */
.rj-metiers{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:26px}
.rj-metier{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--rj-filet);
  border-radius:99px;padding:10px 16px;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
}
.rj-metier svg{color:var(--rj-urg-clair)}

/* ---------- Sélecteur du formulaire ---------- */
.rj .rj-form .rj-sel{
  width:100%;min-height:52px;padding:14px 15px;
  border:1.5px solid #DDE3EC;border-radius:13px;background:#fff;color:#0B1220;
  font-family:inherit;font-size:16px;outline:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7789' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:19px;
  padding-right:44px;transition:border-color .14s,box-shadow .14s;
}
.rj .rj-form .rj-sel:focus{border-color:var(--rj-urg);box-shadow:0 0 0 4px rgba(251,74,2,.14)}
.rj .rj-form .rj-sel.rj-faux{border-color:#D93A0E;background-color:#FFF6F3}

/* =========================================================
   PASSE MOBILE DE LA LANDING ARTISAN
   Neuf professionnels sur dix la lisent sur un téléphone.
   Tout est recalibré pour un écran de 320 à 430 px.
   ========================================================= */
@media(max-width:640px){

  /* --- Respiration : 20 sections × 52 px de marge, c’était 1 000 px de vide --- */
  .rj-sec{padding:40px 0}
  .rj-hero{padding:22px 0 30px}
  .rj-hero-duo{gap:26px}

  /* --- Typographie calibrée pour la largeur réelle --- */
  .rj-h1{font-size:clamp(27px,8.4vw,38px);line-height:1.03;letter-spacing:-.028em}
  .rj-h1 .rj-marque{background-size:100% 4px}
  .rj-h2{font-size:clamp(21px,6.2vw,29px);line-height:1.1}
  .rj-accroche{font-size:15.5px;line-height:1.5;margin-bottom:18px}
  .rj-sub{font-size:14.5px;margin-bottom:22px}
  .rj-sur{margin-bottom:9px}
  .rj-badge{font-size:10.5px;letter-spacing:.1em;padding:7px 13px;margin-bottom:16px}
  .rj-rassure{font-size:12.5px}

  /* --- Les libellés longs doivent tenir sur UNE ligne --- */
  /* `text-wrap:balance` cassait « Créer mon compte gratuitement » en deux
     lignes alors qu’elle tenait tout juste : on laisse le navigateur remplir
     la ligne, et on desserre le rembourrage pour lui donner la place. */
  .rj .rj-cta{
    font-size:16px;min-height:56px;padding:0 14px;gap:7px;
    letter-spacing:-.016em;line-height:1.15;text-wrap:nowrap;
  }
  .rj-collant{padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
  .rj-collant .rj-cta{font-size:16px;min-height:50px}

  /* --- La maquette produit : lisible, sans manger le premier écran --- */
  .rj-tel{max-width:262px;border-radius:26px;padding:8px}
  .rj-tel-ecran{border-radius:19px}
  .rj-tel-bar{padding:11px 13px}
  .rj-tel-corps{padding:11px}
  .rj-nd{padding:14px}
  .rj-nd-t{font-size:17.5px}
  .rj-nd-m{font-size:12.5px}
  .rj-nd-c{min-height:42px;font-size:13.5px;margin-top:12px}

  /* --- Cartes resserrées --- */
  .rj-benef{padding:20px}
  .rj-benef .rj-ic{width:42px;height:42px;border-radius:12px;margin-bottom:12px}
  .rj-benef h3{font-size:16.5px}
  .rj-benef p{font-size:14px}

  .rj-not{padding:14px 16px;font-size:14.5px;gap:11px}
  .rj-nots{gap:10px;margin-top:20px}

  .rj-dem-h{padding:11px 16px}
  .rj-dem-c{padding:16px}
  .rj-dem-t{font-size:17.5px}
  .rj-dem-d{margin-top:11px}
  .rj-dem-d li{font-size:13px;margin-bottom:5px}
  .rj-dem-b{margin:0 16px 16px;width:calc(100% - 32px);min-height:44px;font-size:13px}

  .rj-etape{padding:16px 16px 16px 58px}
  .rj-etape h3{font-size:15px}
  .rj-etape p{font-size:13.5px}

  /* 5 outils sur 2 colonnes : le dernier prend toute la largeur */
  .rj-outils{gap:10px}
  .rj-outil{padding:16px 12px}
  .rj-outil .rj-ic{width:40px;height:40px;border-radius:11px;margin-bottom:10px}
  .rj-outil h3{font-size:14px}
  .rj-outil p{font-size:12px}
  .rj-outils > :last-child{grid-column:1 / -1}

  .rj-prix > div{padding:20px 12px}
  .rj-prix .v{font-size:clamp(30px,9vw,40px)}
  .rj-prix .l{font-size:12.5px;margin-top:8px}

  .rj-franc{padding:19px}
  .rj-franc h3{font-size:18px}
  .rj-franc p{font-size:14px}
  .rj-note{padding:15px 16px;font-size:13px}

  .rj-metier{padding:9px 14px;font-size:13.5px;gap:8px}
  .rj-metiers{gap:8px;margin-top:20px}

  .rj-faq summary{font-size:15px;padding:15px 16px;gap:11px}
  .rj-faq .rj-rep{padding:0 16px 16px;font-size:14px}

  .rj-form{padding:18px;border-radius:18px}
  .rj .rj-form label{font-size:12px;margin-bottom:6px}
  .rj-recap{padding:4px 14px}
  .rj-ok .rj-rond{width:56px;height:56px;margin-bottom:13px}

  .rj-pied{padding:26px 0 calc(90px + var(--rj-bas))}
}

/* --- Très petits écrans : on récupère 8 px de chaque côté --- */
@media(max-width:360px){
  .rj-in{padding:0 16px}
  .rj .rj-cta{font-size:15.5px}
  .rj-tel{max-width:246px}
}

/* --- Tablette : entre la passe mobile (≤640) et le héros deux colonnes (≥900) --- */
@media(min-width:641px) and (max-width:899px){
  .rj-h1{font-size:clamp(38px,6vw,50px)}
  .rj-h2{font-size:clamp(27px,4.3vw,36px)}
  .rj-benefs{grid-template-columns:repeat(3,1fr);gap:14px}
  .rj-benef{padding:20px}
  .rj-benef h3{font-size:16.5px}
  .rj-demandes{grid-template-columns:repeat(3,1fr);gap:14px}
  .rj-tel{max-width:300px}
}
/* 5 outils sur 2 colonnes : le dernier occupe toute la largeur */
@media(max-width:819px){
  .rj-outils > :last-child{grid-column:1 / -1}
}

/* ---------- Le paiement en plusieurs fois : un argument de vente ---------- */
.rj-fois{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
  margin-top:24px;padding:26px;
  background:linear-gradient(160deg,#0E1523 0%,#141D2E 100%);
  border:1px solid rgba(255,255,255,.10);border-radius:20px;color:#fff;
  box-shadow:0 18px 44px rgba(11,18,32,.20);
}
@media(min-width:860px){ .rj-fois{grid-template-columns:1.02fr .98fr;gap:34px;padding:32px} }
.rj-fois h3{
  font-family:var(--rj-titre);font-variation-settings:'wdth' 110;
  font-size:clamp(21px,3.2vw,28px);font-weight:800;letter-spacing:-.025em;
  line-height:1.15;margin:0 0 10px;
}
.rj-fois p{font-size:14.5px;line-height:1.6;color:var(--rj-corps);margin:0}
.rj-fois p b{color:#fff;font-weight:650}
.rj-fois .rj-sur{color:var(--rj-urg-clair)}

.rj-fois-vis{background:#fff;border-radius:16px;padding:18px;color:#0B1220}
.rj-fois-tot{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid #E9EDF3;
  font-size:13.5px;color:#6B7789;font-weight:600;
}
.rj-fois-tot b{
  font-family:var(--rj-titre);font-variation-settings:'wdth' 108;
  font-size:22px;font-weight:800;color:#0B1220;letter-spacing:-.02em;
}
.rj-fois-l{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.rj-fois-l > div{
  background:#F7F9FC;border:1px solid #E4E8EF;border-radius:11px;
  padding:11px 8px;text-align:center;
}
.rj-fois-l span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#8B98AC;line-height:1.3}
.rj-fois-l b{display:block;font-size:16px;font-weight:800;margin-top:5px;letter-spacing:-.02em}
.rj-fois-vous{
  display:flex;align-items:center;gap:9px;
  background:#E9F8F0;border:1px solid #C6EED9;border-radius:12px;padding:12px 14px;
  font-size:13.5px;font-weight:650;color:var(--rj-vert-sombre);line-height:1.35;
}
.rj-fois-vous b{font-weight:800}
.rj-fois-vous svg{flex:none;width:18px;height:18px}
@media(max-width:640px){
  .rj-fois{padding:20px;gap:20px;margin-top:20px}
  .rj-fois-vis{padding:15px}
  .rj-fois-l{gap:6px;margin:12px 0}
  .rj-fois-l > div{padding:10px 5px}
  .rj-fois-l b{font-size:14.5px}
  .rj-fois-l span{font-size:9.5px}
}

/* ---------- Les trois délais annoncés dès l’accueil client ---------- */
.delais-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px}
.delais-strip .d{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:11px 8px;text-align:center;
}
.delais-strip .d .i{
  width:30px;height:30px;border-radius:9px;margin:0 auto 7px;
  display:grid;place-items:center;
}
.delais-strip .d .l{font-size:11.5px;font-weight:750;letter-spacing:-.01em;line-height:1.25}
.delais-strip .d.now  .i{background:var(--urg-soft);color:var(--urg-d)}
.delais-strip .d.week .i{background:#FFF6E5;color:#8A5A00}
.delais-strip .d.month .i{background:var(--blue-soft);color:var(--blue-d)}
.delais-aide{
  font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.45;margin:-6px 0 18px;
}
.delais-aide b{color:var(--ink-2);font-weight:700}

/* Étiquette de délai, réutilisée dans le suivi et l’espace client */
.tag-delai{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;white-space:nowrap;
}
.tag-delai.now  {background:var(--urg-soft);color:var(--urg-d)}
.tag-delai.week {background:#FFF6E5;color:#8A5A00}
.tag-delai.month{background:var(--blue-soft);color:var(--blue-d)}

/* =========================================================
   CHOIX DU DÉLAI — CÔTÉ CLIENT
   Même langage visuel que les cartes de demande de la page
   professionnelle : un bandeau coloré par délai, une carte
   blanche, l’orange pour l’immédiat, l’ambre et le bleu
   pour le planifié.
   ========================================================= */
.dchoix{display:grid;gap:12px}

.dcard{
  display:block;width:100%;padding:0;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .14s, box-shadow .18s, border-color .18s;
}
.dcard:hover{box-shadow:var(--sh-2)}
.dcard:active{transform:scale(.99)}

.dcard .h{
  display:flex;align-items:center;gap:9px;padding:11px 16px;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.dcard .h i{width:8px;height:8px;border-radius:50%;flex:none;display:block}
.dcard .h .ic{margin-left:auto;display:flex;opacity:.55}

.dcard .b{display:flex;align-items:center;gap:14px;padding:16px}
.dcard .t{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.dcard .s{font-size:13.5px;color:var(--ink-3);line-height:1.45;margin-top:5px}
.dcard .fl{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;font-weight:700;
  transition:transform .16s;
}
.dcard:hover .fl{transform:translateX(3px)}

.dcard.now   .h{background:#FFF3EE;color:var(--urg-d)}
.dcard.now   .h i{background:var(--urg);animation:bip-urg 2s infinite}
.dcard.now   .fl{background:var(--urg-soft);color:var(--urg-d)}
.dcard.now:hover{border-color:rgba(251,74,2,.42)}

.dcard.week  .h{background:#FFF7E8;color:#8A5A00}
.dcard.week  .h i{background:#F0A020}
.dcard.week  .fl{background:var(--amber-soft);color:#8A5A00}
.dcard.week:hover{border-color:rgba(240,160,32,.45)}

.dcard.month .h{background:var(--blue-soft);color:#1B45B0}
.dcard.month .h i{background:#3B6BE8}
.dcard.month .fl{background:var(--blue-soft);color:var(--blue-d)}
.dcard.month:hover{border-color:rgba(59,107,232,.42)}

@keyframes bip-urg{
  0%{box-shadow:0 0 0 0 rgba(251,74,2,.55)}
  70%{box-shadow:0 0 0 8px rgba(251,74,2,0)}
  100%{box-shadow:0 0 0 0 rgba(251,74,2,0)}
}

/* Une précision chiffrée sous le libellé : « 4 plombiers disponibles » */
.dcard .chiffre{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;
  padding:4px 9px;border-radius:7px;
}
.dcard.now   .chiffre{background:var(--green-soft);color:#0A7C41}
.dcard.week  .chiffre,
.dcard.month .chiffre{background:var(--grey-soft);color:var(--ink-3)}

/* ---------- En-tête d’une page d’entrée par métier ---------- */
.metier-hero{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:16px;margin:0 0 18px;box-shadow:var(--sh-1);
}
.metier-hero .nm{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.metier-hero .sb{font-size:13px;color:var(--ink-3);margin-top:3px}

/* Appel direct « comme un vrai artisan dispo » (page métier). */
.appel-direct{
  display:block;text-decoration:none;color:#fff;margin:0 0 14px;
  background:linear-gradient(160deg,#12325A,#0B1220);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-l);
  padding:16px 18px;box-shadow:0 14px 34px rgba(11,18,32,.28)
}
.appel-direct .ad-dispo{
  display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:#DCE4F1;margin-bottom:10px;line-height:1.35
}
.appel-direct .ad-dispo b{color:#fff;font-weight:800}
.appel-direct .ad-bip{
  flex:none;width:10px;height:10px;border-radius:50%;background:#2FD16A;
  box-shadow:0 0 0 0 rgba(47,209,106,.6);animation:adbip 1.6s infinite
}
@keyframes adbip{0%{box-shadow:0 0 0 0 rgba(47,209,106,.55)}70%{box-shadow:0 0 0 9px rgba(47,209,106,0)}100%{box-shadow:0 0 0 0 rgba(47,209,106,0)}}
.appel-direct .ad-num{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--urg);color:#fff;border-radius:12px;padding:14px;
  font-size:23px;font-weight:800;letter-spacing:.01em
}
.appel-direct .ad-ic{font-size:20px}
.appel-direct .ad-sub{text-align:center;font-size:12.5px;color:#8FA0BC;margin-top:8px}
.appel-direct:active{transform:translateY(1px)}

/* Bouton unique « Obtenir mon tarif » (2ᵉ action sur la page métier). */
.tarif-cta{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:#141C2C;border:1px solid rgba(255,255,255,.10);border-radius:var(--r-l);
  padding:16px 18px;color:#fff;font-family:inherit
}
.tarif-cta:active{transform:translateY(1px)}
.tarif-cta .tc-ic{font-size:26px;flex:none;line-height:1}
.tarif-cta .tc-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.tarif-cta .tc-txt b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.tarif-cta .tc-txt span{font-size:13px;color:#8FA0BC;margin-top:2px}
.tarif-cta .tc-fl{font-size:20px;color:var(--urg);font-weight:800;flex:none}

/* ---------- Logo partenaire Gamaterra (entreprise sœur) ----------
   Reprend l'identité du site vitrine Gamaterra : mot-logo GAMA (blanc) +
   TERRA (vert marque), typo condensée, avec une pastille terrassement.
   Petit et sobre : il signe la présence de Gamaterra sans écraser UrgePro. */
.gama-lock{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
/* Pastille carrée retirée (choix de Loïc) : on ne garde que le mot-logo. */
.gama-mark{display:none}
.gama-word{font-family:'Barlow Condensed','Archivo',sans-serif;font-weight:800;
  font-size:18px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.gama-word i{color:#3BE86A;font-style:normal}
.gama-lock.sm .gama-mark{width:19px;height:19px}
.gama-lock.sm .gama-word{font-size:16px}
.gama-lock.lg .gama-mark{width:26px;height:26px}
.gama-lock.lg .gama-word{font-size:22px}

/* =========================================================
   APPLICATION CLIENT — PASSE DE DESIGN
   L’app reprend l’identité de la page professionnelle :
   barre sombre, titres en Archivo, orange en aplat.
   Le corps reste clair — c’est une app de formulaires,
   pas une page de vente.
   ========================================================= */

/* ---------- La barre : sombre, comme la page pro ---------- */
.appbar{
  background:#0A0E16;
  border-bottom:none;
  padding:15px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.appbar .ttl{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 108;
  color:#fff;font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
}
.appbar .sub{color:#8B98AC;font-size:12px;margin-top:2px}
.appbar .back{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;
}
.appbar .back:active{background:rgba(255,255,255,.16)}
.appbar .small.muted,
.appbar .nowrap{color:#8B98AC !important}

/* ---------- Le héros de l’accueil, prolongement de la barre ---------- */
.accueil-hero{
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(251,74,2,.26) 0%, transparent 62%),
    #0A0E16;
  /* le conteneur a 18 px de marge : on les annule pour aller bord à bord,
     et on remonte sous la barre pour qu’il n’y ait aucune coupure */
  color:#fff;margin:-18px -18px 0;padding:24px 18px 26px;
}
.accueil-hero h1{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 112;
  font-size:clamp(27px,7.6vw,34px);font-weight:800;line-height:1.04;
  letter-spacing:-.03em;color:#fff;margin:0 0 14px;
}
.accueil-hero h1 .sur{
  background-image:linear-gradient(var(--urg),var(--urg));
  background-size:100% 4px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:2px;
}
.accueil-hero .livepill{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#C6CFDD;
}
.accueil-hero .livepill b{color:#fff}
.accueil-hero .bip{background:#25D07A}
.accueil-hero .metier-hero{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
  box-shadow:none;color:#fff;
}
.accueil-hero .metier-hero .sb{color:#8B98AC}
.accueil-hero .pastille{background:rgba(255,255,255,.08) !important;color:#FF7A2F !important}

/* ---------- Ruban de chantier, la signature de la marque ---------- */
.ruban-mini{
  height:6px;margin:0 -18px 20px;
  background-color:#0A0E16;
  background-image:repeating-linear-gradient(135deg,
    var(--urg) 0 10px, transparent 10px 20px);
}

/* ---------- Cartes de délai : deux lignes, plus quatre ---------- */
.dcard .b{padding:15px 16px}
.dcard .t{font-size:16.5px;line-height:1.25}
.dcard .s{font-size:13px;margin-top:3px}
.dcard .chiffre{margin-top:0;font-size:11px;padding:3px 8px;vertical-align:middle}

/* ---------- Titres de section, dans le corps clair ---------- */
.big{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 110;
  letter-spacing:-.03em;
}
.mid{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 106;
  letter-spacing:-.025em;
}

/* ---------- Métiers secondaires : une ligne de puces, pas une grille ---------- */
.autres-metiers{margin-top:26px}
.autres-metiers .chips{gap:7px}
.am-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:#fff;
  font-size:13.5px;font-weight:650;color:var(--ink-2);
  transition:border-color .14s, transform .12s;
}
.am-chip:active{transform:scale(.96)}
.am-chip svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.am-chip.devis{border-style:dashed}
.am-chip.devis:hover{border-color:var(--blue)}
.am-chip.bientot{opacity:.62}
.am-chip.bientot:hover{opacity:1;border-color:var(--ink-3)}

/* Liste de choix sans icône : plus dense, plus lisible */
.choice.serre{padding:15px 16px;margin-bottom:8px}
.choice.serre .ct{font-size:15.5px;line-height:1.3}

/* =========================================================
   L’APP SUR LA CARTE — UNE SEULE COUCHE
   La carte n’est pas un fond posé sous la page avec une feuille
   flottante par-dessus : c’est le premier bloc de la page. Tout
   défile ensemble, il n’y a rien à empiler ni à synchroniser.
   Le contenu remonte simplement de quelques pixels sur la carte
   pour garder l’aspect « feuille ».
   ========================================================= */

.carte-tete{
  position:relative;overflow:hidden;
  height:46vh;min-height:210px;max-height:420px;
  margin:0 -18px;background:#0F1621;
}
.carte-tete > svg,
.carte-tete > #cfTuiles{position:absolute;inset:0;width:100%;height:100%}
.carte-tete #cfSvg{z-index:0}
.carte-tete #cfTuiles{z-index:1;overflow:hidden}
.carte-tete #cfCalque{z-index:3;pointer-events:none}

/* La barre flotte au-dessus de la carte, à l’intérieur de son cadre :
   elle défile donc avec elle et ne passera jamais sur du texte. */
.carte-tete .appbar{
  position:absolute;top:14px;left:14px;right:14px;z-index:5;
  width:auto;min-height:44px;padding:0 15px;
  border:1px solid rgba(255,255,255,.10);border-radius:22px;
  background:rgba(10,14,22,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

/* Le contenu : même flux, il chevauche juste un peu la carte. */
.feuille-corps{
  position:relative;z-index:2;
  margin:-24px -18px 0;padding:20px 18px 0;
  background:var(--card);border-radius:26px 26px 0 0;
  box-shadow:0 -12px 28px rgba(0,0,0,.42);
}
.feuille-corps::before{
  content:'';display:block;width:38px;height:4px;border-radius:2px;
  background:#2A3547;margin:-8px auto 14px;
}

.feuille-ttl{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 108;
  font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.15;
  color:#fff;margin:0 0 15px;
}
.feuille-ttl .sur{
  background-image:linear-gradient(var(--urg),var(--urg));
  background-size:100% 4px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:2px;
}
.feuille-eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#8B98AC;margin-bottom:8px;
}

.surcarte .livepill{
  background:none;border:none;padding:0;margin:0 0 9px;
  color:#25D07A;font-size:12px;font-weight:700;
}
.surcarte .livepill b{color:#25D07A}
.surcarte .livepill .bip{background:#25D07A}
.surcarte .metier-hero{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
  box-shadow:none;color:#fff;
}
.surcarte .metier-hero .sb{color:#8B98AC}

/* ---------- Les lignes de délai, version maquette ----------
   Une icône dans un carré, un titre, une précision, un chevron.
   L’urgence est le seul aplat orange de l’écran. */
.surcarte .dchoix{gap:9px}
.ligne-delai{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:13px 14px;border:1px solid rgba(255,255,255,.09);
  border-radius:17px;background:#131C2A;color:#fff;
  font-family:inherit;text-align:left;cursor:pointer;
  transition:transform .12s ease;
}
.ligne-delai:active{transform:scale(.982)}
.ligne-delai .ico{
  width:38px;height:38px;flex:none;border-radius:12px;
  display:grid;place-items:center;background:rgba(255,255,255,.07);
}
.ligne-delai .txt{min-width:0}
.ligne-delai .t{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.ligne-delai .d{display:block;font-size:12.5px;color:#8B98AC;margin-top:2px}
.ligne-delai .fl{margin-left:auto;font-size:17px;color:#4A5768;flex:none}

.ligne-delai.pri,
.ligne-delai.now{
  background:linear-gradient(180deg,#FF6B23,#F04202);
  border-color:transparent;box-shadow:0 10px 26px rgba(251,74,2,.30);
}
.ligne-delai.pri .ico,
.ligne-delai.now .ico{background:rgba(255,255,255,.20)}
.ligne-delai.pri .d, .ligne-delai.pri .fl,
.ligne-delai.now .d,
.ligne-delai.now .fl{color:rgba(255,255,255,.86)}

/* ══════════ LES OPTIONS À CHOISIR ══════════
   Même langage que les lignes de délai de l'accueil : on ne fait pas
   deux grammaires visuelles dans la même application. La pastille de
   gauche est ce qui rend le choix lisible — vide, elle appelle le
   doigt ; pleine, elle confirme. */
.opt{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px;margin-bottom:8px;
  border:2px solid var(--urg);border-radius:15px;
  background:rgba(251,74,2,.14);color:#fff;font-family:inherit;
  font-size:15px;font-weight:700;letter-spacing:-.01em;
  text-align:left;cursor:pointer;
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.opt:last-child{margin-bottom:0}
.opt:active{transform:scale(.985)}
.opt .coche{
  width:22px;height:22px;flex:none;border-radius:50%;
  border:2.5px solid var(--urg);
  display:grid;place-items:center;
  transition:background .15s ease, border-color .15s ease;
}
.opt .coche::after{
  content:'';width:11px;height:11px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.6);
  transition:opacity .15s ease, transform .15s ease;
}
/* Choisi : le bouton devient orange plein. Aucune ambiguïté possible,
   même en plein soleil sur un téléphone. */
.opt.sel{
  background:linear-gradient(180deg,#FF6B23,#F04202);
  border-color:transparent;box-shadow:0 8px 22px rgba(251,74,2,.30);
}
.opt.sel .coche{background:#fff;border-color:#fff}
.opt.sel .coche::after{
  opacity:1;transform:scale(1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F04202' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

/* Le logement : trois cases côte à côte, l'icône fait le travail. */
.opts3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt3{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:14px 6px;border:2px solid var(--urg);border-radius:15px;
  background:rgba(251,74,2,.14);color:#fff;font-family:inherit;
  font-size:13px;font-weight:700;cursor:pointer;min-width:0;
  transition:transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.opt3:active{transform:scale(.97)}
.opt3 svg{stroke:var(--urg)}
.opt3 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.opt3.sel{
  background:linear-gradient(180deg,#FF6B23,#F04202);
  border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(251,74,2,.30);
}
.opt3.sel svg{stroke:#fff}

/* Deux colonnes, libellés longs : ici le texte a le droit de passer à
   la ligne — « Disjoncteurs, mais datée » ne doit pas finir en « … ». */
.opts2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.opts2 > *{min-width:0}
.opts2 .opt3{padding:13px 10px}
.opts2 .opt3 span{white-space:normal;overflow:visible;text-align:center;line-height:1.3}

/* ══════════ L'ESTIMATION ══════════
   Le prix est la seule chose que le client cherchait : il occupe
   l'écran, et la mise en garde vient juste après, lisible. */
.card.estim{text-align:center;border-color:rgba(251,74,2,.55);background:rgba(251,74,2,.09)}
.estim-prix{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 108;
  font-size:clamp(28px,7.5vw,38px);font-weight:800;letter-spacing:-.03em;
  color:var(--urg);margin:6px 0 4px;line-height:1.1
}
.estim-prix span{font-size:.6em;font-weight:700;color:var(--ink-2);margin:0 4px}
.estim-moy{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px}
.estim-obj{font-size:13.5px;color:var(--ink-2);font-weight:600}
/* D'où sort le montant, en une ligne. Le détail de l'ajustement est
   juste en dessous, dans « ce qui fait votre prix ». */
.estim-ref{font-size:12px;color:var(--ink-3);margin-top:8px;line-height:1.45}
.estim-txt{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:14px 0 0;text-align:left}

/* ══════════ LE PARCOURS GUIDÉ ══════════
   Une question par écran : la question occupe le haut, les réponses
   remplissent le pouce. Rien d'autre à l'écran. */
.jauge{height:3px;background:rgba(255,255,255,.08);flex:none}
.jauge > span{
  display:block;height:100%;width:0;background:var(--urg);
  border-radius:0 2px 2px 0;transition:width .3s ease
}
.q-titre{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 106;
  font-size:clamp(20px,5.2vw,25px);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;color:var(--ink);margin:6px 0 0
}
.q-aide{font-size:13.5px;color:var(--ink-3);line-height:1.55;margin:10px 0 0}
/* Saisie du volume en m³ (question évacuation). */
.q-m3{display:flex;align-items:center;gap:12px;margin-top:24px}
.q-m3-inp{
  flex:1;min-width:0;border:1.5px solid var(--line);border-radius:14px;
  padding:16px 18px;font-family:'Archivo','Inter',sans-serif;font-size:30px;font-weight:800;
  color:var(--ink);background:#fff;text-align:center;letter-spacing:-.02em
}
.q-m3-inp:focus{outline:none;border-color:var(--urg);box-shadow:0 0 0 3px rgba(251,74,2,.12)}
.q-m3-inp.err{border-color:#B42318}
.q-m3-u{font-size:22px;font-weight:800;color:var(--ink-2)}
.q-choix{margin-top:22px}
/* Chaque question entre par la droite : on sent qu'on avance. */
.q-vue{animation:qEntre .26s cubic-bezier(.22,.9,.3,1) both}
@keyframes qEntre{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
/* Les réponses arrivent en cascade, jamais toutes d'un bloc. */
.q-choix .opt{animation:qOpt .3s cubic-bezier(.22,.9,.3,1) both}
@keyframes qOpt{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Le temps de calcul : on montre ce qui est pesé plutôt qu'un sablier. */
.q-calcul{padding:26px 4px}
.q-calcul-t{
  font-size:16px;font-weight:700;color:var(--ink-2);
  line-height:1.45;text-align:center;margin-bottom:22px
}
.q-pesee{list-style:none;margin:0;padding:0;max-width:340px;margin-inline:auto}
.q-pesee li{
  display:flex;align-items:flex-start;gap:10px;padding:9px 0;
  font-size:14.5px;color:var(--ink);line-height:1.4;
  animation:qOpt .34s cubic-bezier(.22,.9,.3,1) both
}
.q-pesee .ok{color:var(--green);font-weight:800;flex:none}

/* Ce qui fait le prix : une flèche, un fait. */
.fact{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;line-height:1.4}
.fact + .fact{border-top:1px solid var(--line)}
.fact .fl{flex:none;font-size:11px;font-weight:800}
.fact.hausse .fl{color:var(--urg)}
.fact.baisse .fl{color:var(--green)}

/* Le récapitulatif : chaque ligne se retouche d'un tap. */
.rep-l{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 0;background:none;border:0;border-top:1px solid var(--line);
  font-family:inherit;text-align:left;cursor:pointer;color:inherit
}
.rep-l:first-child{border-top:0}
.rep-l .k{display:block;font-size:12.5px;color:var(--ink-3)}
.rep-l .v{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-top:2px}
.rep-l .mod{flex:none;font-size:12.5px;font-weight:700;color:var(--urg)}
.rep-l:active{opacity:.6}

/* Le repère national : deux barres sur la même échelle, on voit d'un
   coup d'œil si son chantier sort de l'ordinaire. */
.rep-nat{font-size:13.5px;color:var(--ink-2);font-weight:600;margin-bottom:14px}
.jbar{position:relative;height:9px;border-radius:5px;overflow:hidden}
.jb-fond{position:absolute;inset:0;background:var(--grey-soft);border-radius:5px}
.app-sombre .jb-fond{background:rgba(255,255,255,.07)}
.jb{position:absolute;top:0;bottom:0;border-radius:5px;min-width:4px}
.jb.nat{background:var(--ink-3);opacity:.65}
.jb.moi{background:linear-gradient(90deg,#FF6B23,#F04202)}
.jb-l{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:7px;font-size:12.5px;color:var(--ink-3)
}
.jb-l b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.jb-l b.urg{color:var(--urg)}

/* ══════════ BACK-OFFICE — LES DEMANDES ══════════
   Un poste de travail : on filtre, on cherche, on appelle. Le numéro
   est un bouton, pas une ligne de texte à recopier. */
.dem-filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.dem-f{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);font-family:inherit;
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease
}
.dem-f:hover{border-color:var(--ink-3)}
.dem-f .n{
  font-size:11.5px;font-weight:800;padding:1px 6px;border-radius:99px;
  background:var(--grey-soft);color:var(--ink-2);font-variant-numeric:tabular-nums
}
.dem-f.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dem-f.on .n{background:rgba(255,255,255,.2);color:#fff}
.dem-rech{
  flex:1;min-width:190px;padding:9px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:13.5px
}
.dem-rech:focus{outline:0;border-color:var(--ink-3)}

.dem-l{
  display:flex;align-items:center;gap:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh-1);
  transition:border-color .15s ease
}
.dem-l:hover{border-color:var(--ink-3)}
.dem-l.neuve{border-left:3px solid var(--urg)}
.dem-c{flex:1;min-width:0;cursor:pointer}
.dem-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dem-h b{font-size:15px;letter-spacing:-.01em}
.dem-p{font-size:14px;color:var(--ink-2);min-width:0}
.dem-s{font-size:13px;color:var(--ink-2);margin-top:6px}
.dem-a{margin-top:8px}

/* Le bouton d'appel : large cible, numéro lisible de loin. */
.dem-tel{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:12px 16px;border-radius:12px;
  border:2px solid var(--urg);background:var(--urg-soft);
  color:var(--urg-d);text-decoration:none;
  font-size:16px;font-weight:800;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:background .15s ease,color .15s ease
}
.dem-tel:hover{background:var(--urg);color:#fff}
.dem-tel .ic{font-size:15px}

@media(max-width:760px){
  .dem-l{flex-direction:column;align-items:stretch;gap:12px}
  .dem-tel{justify-content:center}
}

/* =========================================================
   PETITS ÉCRANS — la carte doit rester la moitié de l’écran
   Sur un iPhone SE, la feuille prenait les deux tiers. On la
   plafonne et on laisse le secondaire défiler dessous.
   ========================================================= */
@media(max-height:740px){
  .feuille-ttl{font-size:21px;margin-bottom:12px}
  .ligne-delai{padding:11px 13px;border-radius:15px}
  .ligne-delai .ico{width:34px;height:34px;border-radius:11px}
  .ligne-delai .t{font-size:15px}
}
@media(max-height:640px){
  .feuille-ttl{font-size:19.5px}
}

/* Un dégradé en pied de feuille : on voit qu’il y a autre chose dessous */

/* =========================================================
   GRAND ÉCRAN — l’app devient une vraie application de bureau
   La carte remplit la fenêtre, le contenu se pose dessus dans
   une colonne à gauche. C’est le plan de travail des apps de
   mobilité sur le web : la carte est le décor, la colonne agit.
   ========================================================= */
@media(min-width:1000px){
  .app-client .stage{padding:0;background:var(--bg);min-height:var(--haut-vue)}
  .app-client .phone{
    max-width:none;width:100vw;height:calc(var(--haut-vue) - var(--bas-demo));min-height:0;
    border:none;border-radius:0;box-shadow:none;background:var(--card);
  }

  /* ---- L’ACCUEIL : la carte remplit la fenêtre ----
     Elle est là pour poser le contexte — voilà les artisans, voilà votre
     quartier — et pour rien d’autre. */

  /* Sur grand écran, la carte prend de la hauteur et le contenu se
     recentre : toujours un seul flux, simplement plus aéré. */
  .app-client .carte-tete{height:54vh;max-height:none}
  .app-client .carte-tete .appbar{top:26px;left:26px;right:auto}
  .app-client .feuille-corps{
    margin-left:auto;margin-right:auto;max-width:660px;
    border-radius:26px 26px 0 0;
  }
  .app-client .feuille-ttl{font-size:26px}

  /* ---- LA SUITE : de vraies pages ----
     Plus de carte, plus de cadre de téléphone. La barre traverse toute la
     largeur comme l’en-tête d’un site, et le contenu se cale sur une
     colonne lisible au milieu. */
  .app-client .screen:not(.surcarte) .appbar,
  .app-client .screen:not(.surcarte) .scroll.pad,
  .app-client .screen:not(.surcarte) .sticky-cta{
    padding-left:max(26px, calc((100vw - 660px) / 2));
    padding-right:max(26px, calc((100vw - 660px) / 2));
  }
  .app-client .screen:not(.surcarte) .scroll.pad{padding-top:26px}
  .app-client .screen:not(.surcarte) .appbar .ttl{font-size:19px}

  .app-client .demobar{left:auto;right:26px;bottom:26px;transform:none}
}


/* Sur grand écran, un voile assombrit le bord gauche : la colonne se
   détache de la carte sans avoir besoin d’une ombre plus lourde. */
@media(min-width:1000px){
}

/* ---------- Les trois couches de la carte ----------
   1. le plan dessiné, filet de sécurité si le réseau ne suit pas
   2. les vraies tuiles, qui le recouvrent dès qu’elles arrivent
   3. le calque UrgePro : la lueur, les camionnettes, la position   */
.carte-tete > svg,
.carte-tete > #cfTuiles,
.carte-tete > #cfTeinte,
.carte-tete > #cfPoints{position:absolute;inset:0;width:100%;height:100%}
#cfSvg{z-index:0}
#cfTuiles{z-index:1;overflow:hidden}
#cfTuiles img{
  position:absolute;width:256px;height:256px;display:block;
  opacity:0;transition:opacity .45s ease;
}
#cfTuiles img[data-vu]{opacity:1}
#cfCalque{z-index:2;pointer-events:none}
.cf-credit{
  position:absolute;right:8px;bottom:6px;z-index:3;
  font-size:9.5px;color:rgba(255,255,255,.34);letter-spacing:.02em;
  pointer-events:none;
}
@media(min-width:1000px){ .cf-credit{right:14px;bottom:10px;font-size:10.5px} }

/* Le gris d’Esri est volontairement neutre : on le pousse vers l’encre
   d’UrgePro et on lui rend du contraste, sinon la carte reste brumeuse. */
/* Le flou n’est pas cosmétique : les tuiles portent les noms de rues et de
   communes, impossibles à retirer d’une image. Un visiteur d’Aix qui lit
   « La Penne-sur-Huveaune » pense que ce n’est pas sa zone et s’en va.
   Flouté, le texte disparaît et la géométrie des rues — ce qui fait qu’on
   reconnaît une carte — reste entière. */
#cfTuiles{filter:blur(1.25px) brightness(1.08) contrast(1.55) saturate(.6)}
#cfTuiles img{width:auto;height:auto}
#cfTuiles .cf-noms{opacity:0;transition:opacity .45s ease}
#cfTuiles .cf-noms[data-vu]{opacity:.88}
/* un voile encre : la carte appartient à la marque, pas à Esri */
#cfTeinte{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#0C1522;mix-blend-mode:color;opacity:.42;
}

/* =========================================================
   LES DEUX APPLICATIONS SONT SOMBRES, DU PREMIER ÉCRAN AU DERNIER
   Client et professionnel partagent la même direction artistique :
   même encre, même orange, mêmes titres. Tout passe par les variables
   du design system — on retourne la palette ici, et les composants
   suivent sans être réécrits.
   L’administration garde sa palette claire : c’est un outil de bureau,
   pas une application de terrain.
   ========================================================= */
.app-sombre{
  --ink:#FFFFFF;
  --ink-2:#C6CFDD;
  --ink-3:#8B98AC;
  --line:rgba(255,255,255,.10);
  --bg:#070A11;
  --card:#0F1723;

  --urg-soft:rgba(251,74,2,.16);
  --blue-soft:rgba(59,107,232,.18);
  --green-soft:rgba(37,208,122,.14);
  --amber-soft:rgba(245,165,36,.16);
  --red-soft:rgba(229,72,77,.16);
  --grey-soft:rgba(255,255,255,.06);

  --green:#25D07A;
  --blue:#5B8DEF;
  --blue-d:#8FB4FF;
  --amber:#FFC53D;
  --red:#FF6B6E;

  /* sur fond sombre, une ombre portée ne se voit pas : c’est le trait
     lumineux du haut qui donne le relief */
  --sh-1:inset 0 1px 0 rgba(255,255,255,.04);
  --sh-2:0 8px 22px rgba(0,0,0,.45);
  --sh-3:0 22px 54px rgba(0,0,0,.55);
}

/* ---- Les rares endroits où le blanc était écrit en dur ---- */
.app-sombre .btn.pri{background:#FFFFFF;color:#0B1220}
.app-sombre .btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.app-sombre .seg button.on{background:rgba(255,255,255,.12);color:#fff}
.app-sombre .appbar .back{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.app-sombre .inp::placeholder{color:#5C6B80}
.app-sombre .inp:focus{border-color:var(--urg);box-shadow:0 0 0 3px rgba(251,74,2,.18)}

/* Les surfaces empilées ont besoin de se distinguer du fond */
.app-sombre .card,
.app-sombre .choice,
.app-sombre .trade,
.app-sombre .advcta,
.app-sombre .stat{background:var(--card)}
.app-sombre .sticky-cta{background:var(--bg);border-top:1px solid var(--line)}
.app-sombre .appbar{background:#0A0E16}

/* Les derniers fonds clairs écrits en dur dans le système partagé.
   On ne les change pas à la source : le pro et l’admin les utilisent
   encore en clair. */
.app-sombre .demobar nav a.on{color:#0B1220}
.app-sombre .trade.bientot{background:rgba(255,255,255,.03)}
.app-sombre .am-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--ink-2)}
.app-sombre .am-chip svg{color:var(--ink-3)}
.app-sombre .photo-add,
.app-sombre .photo{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.20)}
.app-sombre .sheet .grab{background:#2A3547}
.app-sombre .map{background:#0F1723}
.app-sombre table.tbl th{background:rgba(255,255,255,.04)}
.app-sombre table.tbl tr.clickable:hover td{background:rgba(255,255,255,.04)}
.app-sombre .photo img{background:#0F1723}

/* ---- Le plan des écrans de recherche et de suivi ----
   Clair par défaut (app artisan), sombre dans l’app client. */
.mp-sol {fill:#EEF1F5}
.mp-mer {fill:#A6CBE6}
.mp-rue {stroke:#DDE3EB}
.mp-axe {stroke:#F0C674}
.mp-parc{fill:#D8E8CF}

.app-sombre .mp-sol {fill:#0F1723}
.app-sombre .mp-mer {fill:#0A2033}
.app-sombre .mp-rue {stroke:#1E2836}
.app-sombre .mp-axe {stroke:#6A5324}
.app-sombre .mp-parc{fill:#16291D}

/* ---- Le plan de l’adresse confirmée ----
   Pas de flou ici, contrairement au fond d’accueil : le client vient de
   saisir sa propre adresse, lire son nom de rue le rassure au lieu de
   l’inquiéter. */
.tuiles-nettes{position:absolute;inset:0;overflow:hidden;
  filter:brightness(.98) contrast(1.36) saturate(.6)}
/* même voile d’encre que le fond d’accueil : les cartes du parcours
   appartiennent à la marque, pas au fournisseur de tuiles */
.tuiles-nettes::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:#0C1522;mix-blend-mode:color;opacity:.42;
}
.tuiles-nettes img{position:absolute;display:block;opacity:0;transition:opacity .4s ease}
.tuiles-nettes img[data-vu]{opacity:1}

/* L’épingle : une goutte orange plantée au centre du cadre */
.epingle{
  position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-30px 0 0 -13px;
  z-index:3;pointer-events:none;
  background:var(--urg);
  border:3px solid #fff;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 5px 14px rgba(0,0,0,.5);
}
.epingle::after{
  content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;
}
/* l’ombre au sol, pour que l’épingle ne flotte pas */
.epingle::before{
  content:'';position:absolute;left:50%;top:100%;width:16px;height:5px;
  margin:6px 0 0 -8px;border-radius:50%;
  background:rgba(0,0,0,.45);filter:blur(2px);
  transform:rotate(45deg);
}

/* ---------- Messagerie ---------- */
.msg-fil{
  background:var(--grey-soft);border-radius:14px;padding:12px;
  max-height:44vh;overflow-y:auto;min-height:120px;
}
.msg{display:flex;margin-bottom:8px}
.msg .b{max-width:78%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45}
.msg .h{font-size:10.5px;opacity:.6;margin-top:5px}
.msg.moi{justify-content:flex-end}
.msg.moi .b{background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.msg.lui{justify-content:flex-start}
.msg.lui .b{background:var(--card);color:var(--ink);border-bottom-left-radius:4px;box-shadow:var(--sh-1)}
/* dans l’app sombre, la bulle reçue doit se détacher du fil */
.app-sombre .msg.lui .b{background:#1D2836}
.app-sombre .msg.moi .b{background:#2C63D8;color:#fff}

/* La possibilité de payer en plusieurs fois, annoncée au moment de décider */
.fois-avant{
  font-size:12.5px;line-height:1.4;text-align:center;
  color:var(--blue-d);background:var(--blue-soft);
  border-radius:10px;padding:8px 10px;margin-bottom:9px;
}
.fois-avant b{font-weight:750}

/* ---- Carte de suivi : le trajet et les marqueurs ---- */
.trajet{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.trajet path{animation:trajet-file 1s linear infinite}
@keyframes trajet-file{to{stroke-dashoffset:-14}}
@media(prefers-reduced-motion:reduce){ .trajet path{animation:none} }
/* posée par le JS en pixels : l’épingle doit s’ancrer par sa pointe */
#mapSuivi .epingle{margin-top:-32px}
#mapSuivi .veh{z-index:3}

/* ---- Pastilles d’état sur fond sombre ----
   Les teintes d’origine sont faites pour du blanc : un vert #0A7C41 sur
   une pastille sombre tombe à 2,6:1, sous le seuil de lisibilité. On
   éclaircit le texte et on garde le fond juste teinté. */
.app-sombre .badge.g{color:#38DD8C}
.app-sombre .badge.b{color:#7FA9FF}
.app-sombre .badge.a{color:#FFCB57}
.app-sombre .badge.r{color:#FF8A8D}
.app-sombre .badge.o{color:#FF8A4C}
.app-sombre .badge.n{color:var(--ink-2)}

/* Les cartes teintées suivent la même logique */
.app-sombre .card.tint-urg{background:rgba(251,74,2,.10);border-color:rgba(251,74,2,.28)}
.app-sombre .card.tint-green{background:rgba(37,208,122,.10);border-color:rgba(37,208,122,.26)}
.app-sombre .card.tint-amber{background:rgba(245,165,36,.11);border-color:rgba(245,165,36,.28)}
.app-sombre .card.tint-blue{background:rgba(91,141,239,.12);border-color:rgba(91,141,239,.28)}

/* L’encart d’information : ses bruns sont faits pour du blanc */
.app-sombre .notice{
  background:rgba(245,165,36,.11);border-color:rgba(245,165,36,.28);color:#E8C98A;
}
.app-sombre .notice b{color:#FFD98A}

/* Le bleu de confiance manquait de présence sur fond sombre */
.app-sombre .btn.blue{background:#2C63D8;color:#fff;border-color:transparent}
.app-sombre .btn.blue:active{background:#2454BE}
/* Le vert clair de la palette sombre sert aux textes ; en aplat de bouton
   il ne tient pas le blanc. On garde un vert plein sous le texte. */
.app-sombre .btn.green{background:#12A85E;color:#fff;box-shadow:0 6px 18px rgba(18,168,94,.30)}
.app-sombre .btn.green:active{background:#0F8F4F}

/* Secteur d’une offre pas encore acceptée : un halo, pas une adresse */
.halo{
  position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:50%;z-index:3;pointer-events:none;
  background:radial-gradient(circle, rgba(251,74,2,.34) 0%, rgba(251,74,2,.10) 62%, transparent 72%);
  border:2px dashed rgba(251,74,2,.55);
}

/* ---- APP PROFESSIONNELLE — barre du haut ----
   Le logo flotte comme côté client, et l’état de disponibilité remplace
   le badge « Vérifié » : c’est l’information dont l’artisan a besoin en
   un coup d’œil quand il conduit. */
.app-pro .appbar.pro-bar{
  background:#0A0E16;box-shadow:0 1px 0 rgba(255,255,255,.07);padding:12px 14px;
}
.app-pro .logo .pro{
  background:var(--urg);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:3px 7px;border-radius:6px;margin-left:2px;
}
.etat-dispo{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:99px;font-size:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--ink-3);
}
.etat-dispo b{font-weight:700}
.etat-dispo i{width:7px;height:7px;border-radius:50%;background:#5C6B80;flex:none}
.etat-dispo.on{
  background:rgba(37,208,122,.13);border-color:rgba(37,208,122,.30);color:#38DD8C;
}
.etat-dispo.on i{
  background:#25D07A;box-shadow:0 0 0 0 rgba(37,208,122,.6);animation:bat 2s infinite;
}

/* =========================================================
   APP PROFESSIONNELLE — GRAND ÉCRAN
   Même grammaire que l’app client : la carte occupe la fenêtre,
   le travail se fait dans une colonne posée dessus. Sans ça,
   l’app est un téléphone étiré au milieu du vide.
   ========================================================= */
#cfPoints{position:absolute;inset:0;z-index:3;pointer-events:none}

/* ---- APP PROFESSIONNELLE — barre du haut ----
   Le logo flotte comme côté client, et l’état de disponibilité remplace
   le badge « Vérifié » : c’est l’information dont l’artisan a besoin en
   un coup d’œil quand il conduit. */
.app-pro .appbar.pro-bar{
  background:#0A0E16;box-shadow:0 1px 0 rgba(255,255,255,.07);padding:12px 14px;
}
.app-pro .logo .pro{
  background:var(--urg);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:3px 7px;border-radius:6px;margin-left:2px;
}
.etat-dispo{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:99px;font-size:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--ink-3);
}
.etat-dispo b{font-weight:700}
.etat-dispo i{width:7px;height:7px;border-radius:50%;background:#5C6B80;flex:none}
.etat-dispo.on{
  background:rgba(37,208,122,.13);border-color:rgba(37,208,122,.30);color:#38DD8C;
}
.etat-dispo.on i{
  background:#25D07A;box-shadow:0 0 0 0 rgba(37,208,122,.6);animation:bat 2s infinite;
}

/* =========================================================
   APP PROFESSIONNELLE — GRAND ÉCRAN
   Même grammaire que l’app client : la carte occupe la fenêtre,
   le travail se fait dans une colonne posée dessus. Sans ça,
   l’app est un téléphone étiré au milieu du vide.
   ========================================================= */
/* La carte de fond ne s’allume que sur l’écran de disponibilité */
/* ---- APP PROFESSIONNELLE — barre du haut ----
   Le logo flotte comme côté client, et l’état de disponibilité remplace
   le badge « Vérifié » : c’est l’information dont l’artisan a besoin en
   un coup d’œil quand il conduit. */
.app-pro .appbar.pro-bar{
  background:#0A0E16;box-shadow:0 1px 0 rgba(255,255,255,.07);padding:12px 14px;
}
.app-pro .logo .pro{
  background:var(--urg);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:3px 7px;border-radius:6px;margin-left:2px;
}
.etat-dispo{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:99px;font-size:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--ink-3);
}
.etat-dispo b{font-weight:700}
.etat-dispo i{width:7px;height:7px;border-radius:50%;background:#5C6B80;flex:none}
.etat-dispo.on{
  background:rgba(37,208,122,.13);border-color:rgba(37,208,122,.30);color:#38DD8C;
}
.etat-dispo.on i{
  background:#25D07A;box-shadow:0 0 0 0 rgba(37,208,122,.6);animation:bat 2s infinite;
}

/* =========================================================
   APP PROFESSIONNELLE — GRAND ÉCRAN
   Même grammaire que l’app client : la carte occupe la fenêtre,
   le travail se fait dans une colonne posée dessus. Sans ça,
   l’app est un téléphone étiré au milieu du vide.
   ========================================================= */
#cfPoints{position:absolute;inset:0;z-index:3;pointer-events:none}

/* ---- APP PROFESSIONNELLE — barre du haut ----
   Le logo flotte comme côté client, et l’état de disponibilité remplace
   le badge « Vérifié » : c’est l’information dont l’artisan a besoin en
   un coup d’œil quand il conduit. */
.app-pro .appbar.pro-bar{
  background:#0A0E16;box-shadow:0 1px 0 rgba(255,255,255,.07);padding:12px 14px;
}
.app-pro .logo .pro{
  background:var(--urg);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:3px 7px;border-radius:6px;margin-left:2px;
}
.etat-dispo{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:99px;font-size:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--ink-3);
}
.etat-dispo b{font-weight:700}
.etat-dispo i{width:7px;height:7px;border-radius:50%;background:#5C6B80;flex:none}
.etat-dispo.on{
  background:rgba(37,208,122,.13);border-color:rgba(37,208,122,.30);color:#38DD8C;
}
.etat-dispo.on i{
  background:#25D07A;box-shadow:0 0 0 0 rgba(37,208,122,.6);animation:bat 2s infinite;
}

/* =========================================================
   APP PROFESSIONNELLE — GRAND ÉCRAN
   Même grammaire que l’app client : la carte occupe la fenêtre,
   le travail se fait dans une colonne posée dessus. Sans ça,
   l’app est un téléphone étiré au milieu du vide.
   ========================================================= */
/* La carte de fond ne s’allume que sur l’écran de disponibilité */
/* L’app pro suit la même grammaire que l’app client : la carte est le
   premier bloc de la vue disponibilité, le reste vient à la suite. */
/* Enfant d’un conteneur en colonne flexible : sans flex:none sa hauteur
   serait écrasée. C’est le même piège que la poignée, deux fois de suite. */
.app-pro .carte-tete{flex:none;height:34vh;min-height:190px;margin:0}
.app-pro #vueDispo .availwrap{padding-top:14px}


@media(min-width:1000px){
  /* Sur grand écran, la colonne de travail se centre et la carte gagne
     en hauteur. Toujours un seul flux : rien ne flotte, rien ne se
     superpose. */
  .app-pro .stage{padding:0;background:var(--bg)}
  .app-pro .phone{max-width:520px;border-radius:0;border:none;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .app-pro .carte-tete{height:38vh}
}

@media(min-width:1000px){
  /* Les feuilles remontantes appartiennent à la colonne de travail,
     pas à la fenêtre : sans ça elles traversent tout l’écran. */
  .app-pro .sheet{
    left:26px;right:auto;width:452px;bottom:26px;
    border-radius:24px;max-height:calc(100vh - 120px);
  }
  .app-pro .sheet-bg{border-radius:0}

  /* Côté client, la colonne est centrée : la feuille suit. */
  .app-client .sheet{
    left:50%;right:auto;width:min(560px, 92vw);transform:translateX(-50%);
    bottom:26px;border-radius:24px;max-height:calc(100vh - 120px);
  }
}

/* Activité récente du secteur, montrée à l’artisan hors ligne */
.secteur-tete{display:flex;justify-content:space-between;gap:14px;margin:4px 0 12px}
.secteur-tete > div{display:flex;flex-direction:column;gap:2px}
.secteur-n{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 108;
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink);
}
.secteur-l{padding:8px 0;font-size:13px}
.secteur-l .v{font-weight:700}

/* Les clients qui attendent, montrés à l’artisan hors ligne */
.appat{text-align:left}
.appat-tete{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:14.5px;color:var(--ink-2);line-height:1.4;
}
.appat-tete b{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 108;
  font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
}
.appat-tete i{
  width:9px;height:9px;border-radius:50%;background:#25D07A;flex:none;
  align-self:center;box-shadow:0 0 0 0 rgba(37,208,122,.6);animation:bat 2s infinite;
}
.appat-liste{margin-top:12px}
.appat-l{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.appat-l:last-child{border-bottom:none}
.appat-pb{grid-column:1;grid-row:1;font-size:13.5px;font-weight:650;color:var(--ink);min-width:0}
.appat-ou{grid-column:1;grid-row:2;font-size:12px;color:var(--ink-3)}
.appat-eur{
  grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;
  font-size:15.5px;font-weight:800;color:#25D07A;white-space:nowrap;
}
.appat-pied{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);line-height:1.5;
}
.appat-pied b{color:var(--ink);font-weight:750}

/* ---- Carte de la demande, écran de disponibilité ---- */

.pt-client{
  position:absolute;width:11px;height:11px;border-radius:50%;z-index:3;
  margin:-5.5px 0 0 -5.5px;border:2px solid rgba(10,14,22,.85);
}
/* Ceux qui cherchent : orange, et ça bat — c’est en train de se passer */
.pt-client.cherche{
  background:var(--urg);
  box-shadow:0 0 0 0 rgba(251,74,2,.55);
  animation:pt-bat 2.1s infinite;
}
@keyframes pt-bat{
  70%{box-shadow:0 0 0 11px rgba(251,74,2,0)}
  100%{box-shadow:0 0 0 0 rgba(251,74,2,0)}
}
/* Ceux qui ont trouvé : éteints. Ils ne sont plus à prendre. */
.pt-client.pris{background:#5C6B80;width:8px;height:8px;margin:-4px 0 0 -4px;opacity:.75}
@media(prefers-reduced-motion:reduce){ .pt-client.cherche{animation:none} }

.pt-legende{
  position:absolute;left:14px;top:74px;z-index:4;display:flex;gap:12px;
  padding:6px 11px;border-radius:99px;font-size:11.5px;color:#C6CFDD;
  background:rgba(10,14,22,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
}
.pt-legende span{display:inline-flex;align-items:center;gap:6px}
.pt-legende i{width:8px;height:8px;border-radius:50%;flex:none}
.pt-legende i.cherche{background:var(--urg)}
.pt-legende i.pris{background:#5C6B80}

@media(min-width:1000px){
  /* Sur bureau, la colonne occupe la gauche : la légende passe à droite */
  .app-pro .pt-legende{left:auto;right:26px;top:26px}
}

/* =========================================================
   PETITS ÉCRANS — RIEN NE DOIT DÉPASSER
   Un seul élément trop large élargit toute la page, et
   l’utilisateur se retrouve à dézoomer pour la lire.
   ========================================================= */
@media(max-width:900px){
  /* Un tableau ne se compresse pas : il défile dans sa propre boîte
     plutôt que d’élargir la page entière. */
  table.tbl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl thead,
  table.tbl tbody{display:table;width:100%;min-width:520px}

  /* Un montant ne se coupe JAMAIS au milieu — « 4 820 € » deviendrait
     « 4 8 20 € ». C’est le libellé, à gauche, qui doit céder la place. */
  .kv{gap:10px}
  .kv .k{min-width:0;overflow-wrap:break-word}
  .kv .v{white-space:nowrap}

}

/* Sous 380 px (iPhone SE et assimilés), deux colonnes de chiffres ne
   tiennent plus : un « 4 820 € » y passerait sur trois lignes. */
@media(max-width:380px){
  .statgrid,.adm-places{grid-template-columns:1fr}
}

/* =========================================================
   PIÈGE DE LA PALETTE INVERSÉE
   Quatre composants utilisaient var(--ink) comme FOND avec du
   texte blanc. En clair : encre foncée, texte blanc, parfait.
   En sombre, --ink devient blanc → blanc sur blanc, invisible.
   ========================================================= */
/* La puce sélectionnée passe à l’orange de la marque : sans ambiguïté */
.app-sombre .chip.sel{background:var(--urg);color:#fff;border-color:transparent}

/* Le toast était illisible depuis le passage en sombre — donc toutes les
   confirmations de l’app l’étaient aussi. */
.app-sombre .toast{
  background:#1D2836;color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.app-sombre .ticker{
  background:rgba(255,255,255,.06);color:var(--ink);
  border:1px solid var(--line);
}

/* ---- Dicter son projet ----
   Le bouton vit sous le champ, pleine largeur : au doigt, dans la rue,
   on ne vise pas une icône de 30 px. */
.zone-dictee{position:relative}
.micro{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:8px;padding:12px 14px;
  border:1px solid var(--line);border-radius:13px;background:var(--card);
  color:var(--ink-2);font-family:inherit;font-size:14px;font-weight:650;
  cursor:pointer;transition:.14s;
}
.micro .ic{font-size:17px;line-height:1}
.micro:active{transform:scale(.985)}

/* En écoute : l’orange de la marque, et une pulsation qui dit que ça tourne */
.micro.ecoute{
  background:var(--urg);border-color:transparent;color:#fff;
  box-shadow:0 0 0 0 rgba(251,74,2,.55);
  animation:micro-bat 1.6s infinite;
}
@keyframes micro-bat{
  70%{box-shadow:0 0 0 12px rgba(251,74,2,0)}
  100%{box-shadow:0 0 0 0 rgba(251,74,2,0)}
}
/* le champ est en lecture seule pendant la dictée : on le montre */
.zone-dictee textarea[readonly]{border-color:rgba(251,74,2,.45)}
@media(prefers-reduced-motion:reduce){ .micro.ecoute{animation:none} }

/* ---- Ce que raconte la carte d’accueil ----
   L’onde ne sert que pendant une recherche : au repos elle est éteinte.
   (Ces règles vivaient dans l’ancien bloc « feuille flottante ».) */
#cfOnde{opacity:0;transform-origin:center;transform-box:fill-box}
.cf-pro{transition:opacity .45s ease}
.carte-tete.cherche .cf-pro{animation:cf-clign 1.6s ease-in-out infinite}
.carte-tete.cherche #cfOnde{animation:cf-onde 2.4s ease-out infinite}
@keyframes cf-clign{50%{opacity:.28}}
@keyframes cf-onde{
  0%{opacity:.55;transform:scale(.2)}
  100%{opacity:0;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .carte-tete.cherche .cf-pro,.carte-tete.cherche #cfOnde{animation:none}
}

/* Le crédit du fournisseur, discret, en pied de carte */
/* Le contenu remonte de 24 px sur la carte : le crédit se place au-dessus
   de ce recouvrement, sinon il tombe sur le bord arrondi de la feuille. */
.carte-tete .cf-credit{position:absolute;right:12px;bottom:34px;z-index:4}

/* Le plan dessiné disparaît dès que les vraies tuiles sont chargées */
.carte-tete.tuiles-ok #cfSvg{display:none}


/* =========================================================
   UN SEUL DÉFILEMENT À LA FOIS
   Sur iOS, quand un conteneur arrive au bout, le défilement
   « déborde » sur la page derrière : deux choses bougent en
   même temps et l’app paraît sauter. On l’en empêche, et on
   interdit à la page elle-même de défiler — seul le contenu
   de l’écran courant défile.
   ========================================================= */
.app-client, .app-pro{overflow:hidden;height:100%}
.app-client .scroll,
.app-pro .scroll,
.app-client .sheet,
.app-pro .sheet{overscroll-behavior:contain}

/* ---- Photos : de vraies images ---- */
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photo-thumb{
  position:relative;width:74px;height:74px;border-radius:13px;overflow:hidden;
  border:1px solid var(--line);background:var(--grey-soft);padding:0;cursor:pointer;
  display:block;flex:none;
}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-x{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(10,14,22,.82);color:#fff;font-size:14px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;
}
.photo-add{
  width:74px;height:74px;border-radius:13px;flex:none;
  display:grid;place-items:center;font-size:24px;color:var(--ink-3);
  border:1.5px dashed var(--line);background:var(--grey-soft);cursor:pointer;
}
/* le champ de fichier est masqué, mais il occupait quand même une case
   de la grille et décalait le « + » dans un coin */
.photo-add input{display:none}
.photos.charge .photo-add{opacity:.5;pointer-events:none}
.photos.charge::after{
  content:'Traitement…';align-self:center;font-size:12.5px;color:var(--ink-3);
}


/* ---- La promesse de rappel, après l'envoi de la demande ----
   C'est l'écran que le client regarde une seconde avant de ranger son
   téléphone : l'heure et le numéro doivent sauter aux yeux. */
.rappel{
  text-align:center;padding:26px 20px;border-radius:var(--r-l);
  background:var(--urg-soft);border:1px solid rgba(251,74,2,.28);
}
.rappel-ico{font-size:38px;line-height:1;margin-bottom:12px}
.rappel-t{
  font-family:'Archivo','Inter',sans-serif;font-variation-settings:'wdth' 108;
  font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.25;color:var(--ink);
}
.rappel-t b{color:var(--urg)}
.rappel-num{
  display:inline-block;margin:14px 0 4px;padding:8px 16px;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  font-size:17px;font-weight:800;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.rappel-s{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:12px}
.suivi-code{text-align:center}

/* ══════════ SUIVI CLIENT ══════════ */
.code-inp{
  text-align:center;font-size:24px;font-weight:800;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;text-transform:uppercase
}
.field .help.err{color:var(--red)}

/* Le fil des étapes : la barre verticale relie les pastilles, et
   c'est la couleur qui dit ce qui est fait, en cours, ou à venir. */
.fil{list-style:none;margin:4px 0 0;padding:0}
.fil-l{position:relative;display:flex;gap:12px;padding:0 0 18px}
.fil-l:last-child{padding-bottom:0}
.fil-l::before{
  content:'';position:absolute;left:12px;top:26px;bottom:0;width:2px;
  background:var(--line)
}
.fil-l:last-child::before{display:none}
.fil-l.fait::before{background:var(--green)}
.fil-pt{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:var(--grey-soft);color:var(--ink-3);
  border:2px solid transparent
}
.fil-l.fait .fil-pt{background:var(--green);color:#fff}
.fil-l.ici  .fil-pt{background:var(--urg);color:#fff;box-shadow:0 0 0 4px var(--urg-soft)}
.fil-c{padding-top:3px;min-width:0}
.fil-c b{font-size:14.5px;color:var(--ink-3);font-weight:600}
.fil-l.fait .fil-c b{color:var(--ink-2)}
.fil-l.ici  .fil-c b{color:var(--ink);font-weight:800}
.fil-s{font-size:13px;color:var(--ink-2);line-height:1.55;margin-top:4px}
.fil-d{font-size:11.5px;color:var(--ink-3);margin-top:3px}

.kv.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.kv.tot .k,.kv.tot .v{font-weight:800;color:var(--ink);font-size:16px}

/* ══════════ ADMIN — DEMANDES CLIENTS ══════════ */
.card.clickable{cursor:pointer;transition:border-color .15s ease}
.card.clickable:hover{border-color:var(--ink-3)}
/* Une demande jamais ouverte se repère sans lire : c'est un client
   qui attend un appel. */
.card.neuve{border-left:3px solid var(--urg)}
.pt-neuf{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--urg);margin-right:8px;vertical-align:middle
}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.split2 > *{min-width:0}
@media(max-width:900px){.split2{grid-template-columns:1fr}}
.lien{color:var(--urg);text-decoration:none;font-weight:700}
.lien:hover{text-decoration:underline}

/* ══════════ PRO — LIGNES DE DEVIS ══════════ */
.ldevis{display:grid;grid-template-columns:1fr 96px 30px;gap:8px;align-items:center;margin-bottom:8px}
.ldevis > *{min-width:0}
.ldevis .inp{margin:0}
.ldevis .mnt{text-align:right;font-variant-numeric:tabular-nums}
.erreur-envoi{
  background:var(--red-soft);border:1px solid var(--red);border-radius:12px;
  padding:12px 14px;margin-bottom:10px;font-size:13.5px;line-height:1.5;color:#B4272B
}
.erreur-envoi a{color:inherit;font-weight:800}
.app-sombre .erreur-envoi{background:rgba(229,72,77,.12);color:#FF9A9D}
.ldevis .retirer{
  padding:0;width:30px;height:30px;font-size:20px;line-height:1;
  color:var(--ink-3);background:none
}
.code-gros{
  display:block;width:100%;margin:10px 0 0;padding:16px 12px;
  background:var(--bg);border:1px dashed var(--line);border-radius:14px;
  color:var(--ink);font-family:inherit;font-size:30px;font-weight:800;
  letter-spacing:.14em;font-variant-numeric:tabular-nums;cursor:pointer
}
.code-gros:active{transform:scale(.985)}
.code-copie{
  display:block;margin-top:6px;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)
}
.code-txt{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:12px 0 14px}
.rappel-ref{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);letter-spacing:.02em
}
.rappel-ref b{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.rappel-src{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rappel-src-t{font-size:13.5px;color:var(--ink-2);margin-bottom:10px}
.rappel-src-t b{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.rappel-src-s{font-size:12px;color:var(--ink-3);margin-top:8px}
.rappel-h{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);font-weight:600;
}

/* Pastille de comptage sur l'onglet Demandes de l'espace pro. */
.tabbar .tb-n{display:inline-flex;min-width:16px;height:16px;padding:0 4px;margin-left:5px;
  border-radius:99px;background:var(--urg);color:#fff;font-size:10px;font-weight:800;
  align-items:center;justify-content:center;vertical-align:middle}

/* ══════════ BACK-OFFICE SUR TÉLÉPHONE ══════════
   Sur mobile, on masque toute la navigation de démo : Loïc n'a besoin que
   de « Demandes clients », plein écran, comme une appli. */
.amobile{display:none}
@media(max-width:760px){
  .admin{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:0 0 90px}
  .main .panel{padding:0 14px}
  .main h1{font-size:21px;padding-top:6px;margin-top:0}
  .amobile{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:sticky;top:0;z-index:60;background:#0E1524;
    padding:12px 14px;margin:0 -0 12px
  }
  .amobile .logo .symbole{height:26px}
  .amobile .logo .mot{height:16px}
  .amb-inst{
    flex:none;border:0;border-radius:10px;padding:9px 14px;
    background:var(--urg);color:#fff;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer
  }
  .amb-actions{display:flex;align-items:center;gap:8px}
  /* la barre "En ligne / notifications" passe en colonne, plus lisible */
  #corpsDemandes .between{flex-wrap:wrap;gap:8px}
}
/* Bouton "Actualiser" (icône ↻) — visible desktop ET mobile dans la barre. */
.amb-refresh{
  flex:none;width:40px;height:40px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#fff;font-size:20px;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center
}
.amb-refresh:active{background:rgba(255,255,255,.14)}
.amb-refresh.spin{animation:ambspin .6s linear infinite}
@keyframes ambspin{to{transform:rotate(360deg)}}

/* Bandeau "tirer pour actualiser" — caché au-dessus de l'écran, révélé au doigt. */
.ptr{
  position:fixed;left:0;right:0;top:-64px;height:56px;z-index:80;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:#0E1524;color:#8B98AC;font-size:13px;font-weight:700;
  pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.25)
}
.ptr .ptr-spin{font-size:20px;display:inline-block;transition:transform .2s}
.ptr.pret{color:#fff}
.ptr.pret .ptr-spin{transform:rotate(180deg);color:var(--urg)}
.ptr.charge{color:#fff}
.ptr.charge .ptr-spin{animation:ambspin .6s linear infinite;color:var(--urg)}
/* Encart d'aide à l'installation (affiché seulement quand on le demande). */
.install-aide{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;
  background:var(--ink);color:#fff;border-radius:16px;padding:16px 18px;
  box-shadow:0 18px 48px rgba(0,0,0,.4);font-size:14px;line-height:1.5
}
.install-aide b{color:#fff}
.install-aide button{margin-top:12px;border:0;border-radius:10px;padding:9px 14px;
  background:var(--urg);color:#fff;font-family:inherit;font-weight:800;cursor:pointer}

/* Barre de sélection de période du panneau Trafic. */
.trafic-barre{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.trafic-jour{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  border:1px solid var(--line);border-radius:10px;padding:5px 10px;background:var(--card)}
.trafic-jour input{border:0;background:none;font-family:inherit;font-size:13px;color:var(--ink);outline:none}

/* Entonnoir du panneau Trafic (back-office). */
.fun-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.fun-row + .fun-row{border-top:1px solid var(--line)}
.fun-lib{flex:0 0 40%;font-size:13px;font-weight:600;color:var(--ink)}
.fun-bar{position:relative;flex:1;height:22px;background:rgba(139,152,172,.14);border-radius:6px;overflow:hidden}
.fun-fill{position:absolute;inset:0 auto 0 0;background:#5B6B84;border-radius:6px;min-width:2px;transition:width .3s}
.fun-fill.lead{background:var(--urg)}
.fun-n{position:absolute;right:8px;top:0;line-height:22px;font-size:12px;font-weight:800;color:var(--ink)}
.fun-pct{flex:0 0 42px;text-align:right;font-size:13px;font-weight:800;color:var(--ink)}

/* Écran de connexion de l'espace pro (e-mail + mot de passe). */
.prologin{
  position:fixed;inset:0;z-index:2000;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:#F5F7FA;overflow:auto
}
.pl-box{width:100%;max-width:340px}
.pl-logo{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.pl-logo .symbole{height:32px}
.pl-logo .mot{height:19px}
.prologin .pl-titre{font-size:24px;font-weight:800;color:#0B1220;margin:0 0 6px}
.prologin .pl-sub{font-size:14px;color:#6B7789;margin:0 0 22px;line-height:1.5}
.prologin .pl-lab{display:block;font-size:13px;font-weight:700;color:#0B1220;margin:14px 0 6px}
.prologin .pl-inp{
  width:100%;box-sizing:border-box;border:1.5px solid #D9DFE7;border-radius:12px;
  padding:13px 14px;font-family:inherit;font-size:16px;color:#0B1220;background:#fff
}
.pl-inp:focus{outline:none;border-color:var(--urg);box-shadow:0 0 0 3px rgba(251,74,2,.12)}
.pl-err{background:#FDECEA;color:#B42318;border-radius:10px;padding:10px 12px;
  font-size:13.5px;font-weight:600;margin-top:14px}
.pl-cta{
  width:100%;margin-top:22px;border:0;border-radius:12px;padding:15px;cursor:pointer;
  background:var(--urg);color:#fff;font-family:inherit;font-size:16px;font-weight:800
}
.pl-cta:disabled{opacity:.6;cursor:default}
.pl-bas{text-align:center;font-size:14px;color:#6B7789;margin:20px 0 0}
.pl-bas a{color:var(--urg);font-weight:700;text-decoration:none}
.prologin .pl-oubli{text-align:center;margin:14px 0 0}
.prologin .pl-oubli a{color:#6B7789;font-size:13.5px;font-weight:600;text-decoration:underline}
.prologin .pl-oubli-box{margin-top:26px;padding-top:22px;border-top:1px solid #E1E6EE}
.prologin .pl-ok{background:#E9F7EF;color:#1B7A43;border-radius:10px;padding:12px 14px;
  font-size:13.5px;line-height:1.5;margin-top:14px}

/* Barre de navigation basse du back-office mobile. */
.amobile-nav{display:none}
@media(max-width:760px){
  .amobile-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:#0E1524;border-top:1px solid rgba(255,255,255,.08);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))
  }
  .amobile-nav button{
    flex:1;background:none;border:0;color:#8B98AC;font-family:inherit;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 0;font-size:11px;font-weight:700;cursor:pointer
  }
  .amobile-nav button .i{font-size:20px;line-height:1}
  .amobile-nav button.on{color:#fff}
  .amobile-nav button.on .i{filter:drop-shadow(0 0 6px rgba(251,74,2,.6))}
}