/* Charte commune aux pages professionnelles. Reprend les jetons deja utilises
   par /business/matching pour que les nouvelles pages ne detonnent pas. */
:root{
  /* Direction artistique Pro : fond ardoise et bleu, l'or reste a l'action principale
     (le particulier est or sur slate : ainsi les deux espaces ne se confondent pas) */
  --bg:#080c12; --surface:#0e151f; --surface-2:#141e2c; --surface-3:#1a2638;
  --border:#1d2a3c; --border-2:#273850;
  --text:#eaf0f7; --muted:#8497ad; --faint:#3a4b60;
  --accent:#3b6fc4; --accent-h:#2c5aa6; --accent-light:#7aa7ea;
  --accent-dim:rgba(59,111,196,.14); --accent-border:rgba(91,142,207,.38);
  --or:#D4AF37; --or-h:#b8962e;
  --danger:#ef4444; --danger-dim:rgba(239,68,68,.12);
  --success:#22c55e; --success-dim:rgba(34,197,94,.12);
  --warning:#f59e0b; --warning-dim:rgba(245,158,11,.12);
  --info:#5b8ecf; --info-dim:rgba(91,142,207,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.nav{background:rgba(8,12,18,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);
  padding:0 1.6rem;height:54px;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:40}
.nav .marque{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.95rem}
.nav .cube{width:18px;height:18px;border-radius:4px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--accent-light),var(--accent))}
.nav .liens{margin-left:auto;display:flex;gap:1.1rem;align-items:center}
.nav .liens a,.nav .liens button{font-size:.8rem;color:var(--muted);background:none;border:none;
  cursor:pointer;font-family:inherit}
.nav .liens a:hover,.nav .liens button:hover{color:var(--text)}

.page{max-width:1180px;margin:0 auto;padding:2rem 1.6rem 4rem}
.page.etroite{max-width:820px}
h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.15rem;font-weight:650;margin-bottom:.9rem}
.chapeau{color:var(--muted);font-size:.92rem;margin-top:.35rem}
.entete{display:flex;justify-content:space-between;align-items:flex-start;gap:1.2rem;
  flex-wrap:wrap;margin-bottom:1.8rem}

.carte{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.3rem}
.carte + .carte{margin-top:.9rem}
.carte.choisie{border-color:var(--accent-border);background:linear-gradient(180deg,var(--accent-dim),var(--surface))}
.carte.retenue{border-color:rgba(34,197,94,.4)}
.carte.eteinte{opacity:.55}

.etiq{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:700;
  padding:.22rem .6rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.e-attente{background:var(--warning-dim);color:var(--warning)}
.e-vue{background:var(--info-dim);color:var(--info)}
.e-devis{background:var(--or-dim,rgba(212,175,55,.14));color:#e6c755}
.e-refus{background:var(--danger-dim);color:var(--danger)}
.e-retenue{background:var(--success-dim);color:var(--success)}
.e-ecartee{background:rgba(120,140,160,.14);color:var(--muted)}

.puce{display:inline-block;font-size:.7rem;padding:.2rem .55rem;border-radius:6px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.puces{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.6rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.1rem;
  border-radius:9px;font-size:.86rem;font-weight:600;font-family:inherit;cursor:pointer;
  border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);transition:.15s}
.btn:hover{border-color:var(--accent-border)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.or{background:var(--or);border-color:var(--or);color:#0f172a}
.btn.or:hover{background:var(--or-h);border-color:var(--or-h)}
.btn.vert{background:var(--success);border-color:var(--success);color:#04240f}
.btn.petit{padding:.4rem .75rem;font-size:.78rem}
.btn.plein{width:100%}

.grille{display:grid;gap:.9rem}
.score{display:flex;align-items:center;gap:.5rem}
.score .barre{width:70px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.score .barre i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light))}
.score b{font-size:.8rem;color:var(--accent-light)}

table.comparatif{width:100%;border-collapse:collapse;font-size:.88rem}
table.comparatif th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:.6rem .7rem;border-bottom:1px solid var(--border)}
table.comparatif td{padding:.75rem .7rem;border-bottom:1px solid var(--border)}
table.comparatif tr:last-child td{border-bottom:none}
.mieux{color:var(--success);font-weight:700}

.fil{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding:.3rem 0}
.bulle{max-width:82%;padding:.6rem .85rem;border-radius:12px;font-size:.87rem;line-height:1.5}
.bulle .qui{font-size:.68rem;color:var(--muted);margin-bottom:.15rem}
.bulle.moi{align-self:flex-end;background:var(--accent-dim);border:1px solid var(--accent-border)}
.bulle.lui{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border)}
.saisie{display:flex;gap:.6rem;margin-top:.8rem}
.saisie input{flex:1;padding:.65rem .85rem;border-radius:9px;border:1px solid var(--border-2);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:.88rem}
.saisie input:focus{outline:none;border-color:var(--accent-border)}

.champ{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.champ label{font-size:.76rem;font-weight:650;color:var(--muted)}
.champ input,.champ select,.champ textarea{padding:.65rem .85rem;border-radius:9px;
  border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);
  font-family:inherit;font-size:.9rem}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--accent-border)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}

.avis{padding:.8rem 1rem;border-radius:10px;font-size:.87rem;margin-bottom:1rem;display:none}
.avis.ok{display:block;background:var(--success-dim);border:1px solid rgba(34,197,94,.3);color:#86efac}
.avis.ko{display:block;background:var(--danger-dim);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.avis.info{display:block;background:var(--info-dim);border:1px solid rgba(91,142,207,.3);color:#a8c8ee}

.vide{text-align:center;padding:3.5rem 1.5rem;color:var(--muted)}
.vide h3{color:var(--text);font-size:1.05rem;margin-bottom:.4rem}
.chargement{text-align:center;padding:3rem;color:var(--muted);font-size:.9rem}

.barre-flot{position:sticky;bottom:0;background:rgba(9,11,14,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--border);padding:.9rem 1.6rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1.5rem -1.6rem -4rem}

@media(max-width:640px){.deux{grid-template-columns:1fr}.page{padding:1.3rem 1rem 3rem}}

/* ============ Parcours entreprise (accueil, demande, partenaires, devis) ============ */
.nav .marque img{height:22px;width:22px}
.nav .marque b{color:var(--accent-light);font-weight:700}
.btn.primaire{background:var(--or);border-color:var(--or);color:#0f172a}
.btn.primaire:hover{background:var(--or-h)}
.btn.fantome{background:transparent}
.btn.grand{padding:.85rem 1.6rem;font-size:1rem;border-radius:11px}
.btn.bleu{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.bleu:hover{background:var(--accent-h)}

.frise{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;list-style:none;margin:0 0 1.8rem}
.frise li{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;font-size:.78rem;color:var(--faint)}
.frise li i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:700;font-size:.8rem;background:var(--surface-2);border:1px solid var(--border-2);color:var(--muted)}
.frise li.fait{color:var(--muted)} .frise li.fait i{background:var(--success);border-color:var(--success);color:#04240f}
.frise li.actuel{color:var(--text);font-weight:600} .frise li.actuel i{background:var(--accent);border-color:var(--accent-light);color:#fff}

.pied-pro{border-top:1px solid var(--border);margin-top:4rem;padding:2rem 1rem;text-align:center;font-size:.76rem;color:var(--muted)}
.pied-pro a{text-decoration:underline;margin:0 .3rem}

/* Accueil */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);
  background:radial-gradient(ellipse 70% 90% at 85% -10%,rgba(59,111,196,.28),transparent),var(--bg)}
.hero .dans{max-width:1180px;margin:0 auto;padding:4.5rem 1.6rem 4rem}
.hero .badge{display:inline-flex;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-light);border:1px solid var(--accent-border);background:var(--accent-dim);padding:.3rem .8rem;border-radius:6px}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.1;letter-spacing:-.03em;max-width:760px;margin:1.3rem 0 1rem;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent-light)}
.hero p.accroche{color:var(--muted);font-size:1.08rem;max-width:620px}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero .note{color:var(--muted);font-size:.82rem;margin-top:1rem}

.stats{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;margin:-2.2rem 0 0;position:relative}
.stats div{flex:1 1 170px;padding:1.2rem 1.3rem;border-right:1px solid var(--border)}
.stats div:last-child{border-right:none}
.stats b{display:block;font-size:1.9rem;letter-spacing:-.02em}
.stats span{font-size:.78rem;color:var(--muted)}
.stats .demo{flex:1 1 100%;border-right:none;border-top:1px solid var(--border);background:var(--warning-dim);color:var(--warning);font-size:.78rem;padding:.55rem 1.3rem}

.section{max-width:1180px;margin:0 auto;padding:3.2rem 1.6rem 0}
.section h2{font-size:1.45rem;letter-spacing:-.02em;margin-bottom:.4rem}
.section>.chapeau{margin-bottom:1.4rem}
.cartes3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.carte.lien{display:block;transition:.15s}
.carte.lien:hover{border-color:var(--accent-border);transform:translateY(-2px)}
.carte h3{font-size:1rem;margin-bottom:.35rem}
.carte p{font-size:.86rem;color:var(--muted)}
.carte .num{color:var(--accent-light);font-weight:800;font-size:.85rem}

.demo-iso{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center}
.demo-iso .liste{display:flex;flex-direction:column;gap:.5rem}
@media(max-width:820px){.demo-iso{grid-template-columns:1fr}}

/* Cases a cocher */
.groupe{margin-bottom:2rem}
.groupe h2{font-size:1.05rem;margin-bottom:.15rem}
.groupe .chapeau{margin:0 0 .8rem}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem}
.case{position:relative;text-align:left;font-family:inherit;color:var(--text);cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;transition:.15s}
.case:hover{border-color:var(--accent-border)}
.case b{display:block;font-size:.92rem;padding-right:1.4rem}
.case small{display:block;margin-top:.25rem;font-size:.74rem;color:var(--muted);font-weight:400}
.case .coche{position:absolute;top:.7rem;right:.7rem;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:transparent}
.case.cochee{border-color:var(--accent-light);background:linear-gradient(180deg,var(--accent-dim),var(--surface))}
.case.cochee .coche{background:var(--accent);border-color:var(--accent-light);color:#fff}

/* Mise en page deux colonnes avec panneau en direct */
.deux-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.6rem;align-items:start}
.direct{position:sticky;top:70px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.15rem}
.direct h3{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.direct .gros{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.direct .gros small{font-size:.9rem;color:var(--muted);font-weight:500;margin-left:.3rem}
.direct .liste{display:flex;flex-direction:column;gap:.5rem;margin-top:.9rem;max-height:430px;overflow-y:auto}
.pdir{border:1px solid var(--border);border-radius:10px;padding:.6rem .75rem;background:var(--surface-2);font-size:.82rem}
.pdir b{font-size:.84rem}
.pdir small{display:block;color:var(--muted);font-size:.72rem;margin-top:.1rem}
.pdir.grise{opacity:.55;background:transparent}
.pdir .manque,.manque{display:block;color:var(--warning);font-size:.72rem;margin-top:.3rem}
@media(max-width:900px){.deux-col{grid-template-columns:1fr}.direct{position:static}}

/* Formulaire projet */
.projet-grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.4rem;align-items:start}
@media(max-width:900px){.projet-grille{grid-template-columns:1fr}}
.champ textarea{min-height:130px;resize:vertical}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media(max-width:640px){.trois{grid-template-columns:1fr}}
.rappel{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1.4rem}
.fichier-ligne{display:flex;align-items:center;gap:.7rem;border:1px solid var(--border);border-radius:10px;padding:.55rem .8rem;margin-top:.5rem;background:var(--surface-2)}
.fichier-ligne .ext{font-size:.65rem;font-weight:800;padding:.15rem .4rem;border-radius:4px;background:var(--accent);color:#fff}
.fichier-ligne .nom{flex:1;min-width:0;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fichier-ligne .barre-prog{height:4px;border-radius:2px;background:var(--surface-3);margin-top:.3rem;overflow:hidden}
.fichier-ligne .barre-prog i{display:block;height:100%;background:var(--accent-light)}
.depot{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin-top:.8rem;padding:1.4rem;cursor:pointer;
  border:1.5px dashed var(--border-2);border-radius:12px;color:var(--muted);font-size:.84rem;text-align:center}
.depot:hover{border-color:var(--accent-light)}
.depot b{color:var(--text)}
.depot input{position:absolute;opacity:0;width:1px;height:1px}
.erreur-form{color:#fca5a5;font-size:.86rem;margin:.6rem 0}
.coche-ligne{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--muted);margin:1rem 0}
.coche-ligne a{text-decoration:underline;color:var(--text)}

/* Partenaires */
.partenaires{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}
.partenaire{text-align:left;font-family:inherit;color:var(--text);cursor:pointer;display:block;width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem;transition:.15s}
.partenaire:hover{border-color:var(--accent-border)}
.partenaire.choisi{border-color:var(--accent-light);background:linear-gradient(180deg,var(--accent-dim),var(--surface))}
.partenaire.grise{opacity:.62}
.partenaire.grise:hover,.partenaire.grise.choisi{opacity:1}
.partenaire[disabled]{cursor:default;opacity:.5}
.p-tete{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start}
.p-tete b{font-size:1rem;display:block}
.p-tete small{color:var(--muted);font-size:.78rem}
.case-choix{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:transparent}
.partenaire.choisi .case-choix{background:var(--accent);border-color:var(--accent-light);color:#fff}
.p-desc{font-size:.84rem;color:var(--muted);margin-top:.6rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.p-faits{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.8rem}
.p-faits div{background:var(--surface-2);border-radius:8px;padding:.45rem .55rem}
.p-faits b{display:block;font-size:.88rem}
.p-faits span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.puce.ok{background:var(--success-dim);color:#86efac;border-color:rgba(34,197,94,.3)}
.puce.cert{background:var(--accent-dim);color:var(--accent-light);border-color:var(--accent-border)}
.puce.ko{background:var(--warning-dim);color:var(--warning);border-color:rgba(245,158,11,.3)}
.sep-titre{grid-column:1/-1;margin-top:.8rem}
.sep-titre h2{font-size:1rem;margin-bottom:.1rem}
.confirmer{background:var(--warning-dim);border:1px solid rgba(245,158,11,.35);border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0;font-size:.86rem}
.compar-bloc{margin-top:1.6rem;overflow-x:auto}
table.comparatif td.libelle{color:var(--muted);font-size:.78rem;white-space:nowrap}
table.comparatif .non{color:var(--warning)}
[hidden]{display:none!important}

.partenaires>.carte{margin-top:0}

/* Barre de progression d'une commande (public/js/pro-etapes.js) */
.etapes{list-style:none;display:flex;gap:0;margin:1rem 0 .4rem;padding:0;overflow-x:auto}
.etapes .etape{flex:1 0 96px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 .3rem}
.etapes .etape:before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--border);z-index:0}
.etapes .etape:first-child:before{display:none}
.etapes .etape.fait:before,.etapes .etape.encours:before{background:var(--success)}
.etapes .pt{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;border:2px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#0f172a}
.etapes .fait .pt{background:var(--success);border-color:var(--success)}
.etapes .encours .pt{border-color:var(--accent-light);box-shadow:0 0 0 4px rgba(122,167,234,.18)}
.etapes b{font-size:.76rem;font-weight:650;margin-top:.45rem;color:var(--muted)}
.etapes .fait b,.etapes .encours b{color:var(--text)}
.etapes small{font-size:.68rem;color:var(--muted);margin-top:.15rem;line-height:1.3}
.etapes .encours small{color:var(--accent-light)}
@media (max-width:640px){
  .etapes{flex-direction:column;gap:.1rem;overflow:visible}
  .etapes .etape{flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;gap:.2rem .7rem;padding:.25rem 0}
  .etapes .etape:before{display:none}
  .etapes b{margin:0}
  .etapes small{flex-basis:100%;padding-left:34px;margin:0}
}

.historique{margin:.3rem 0 .6rem;font-size:.84rem}
.historique summary{cursor:pointer;color:var(--accent-light);font-weight:600;padding:.2rem 0}
.historique ul{list-style:none;margin:.4rem 0 0;padding:0;border-left:2px solid var(--border)}
.historique li{display:flex;flex-wrap:wrap;gap:.2rem .8rem;padding:.3rem 0 .3rem .8rem}
.historique .d{color:var(--muted);min-width:9.5rem;font-variant-numeric:tabular-nums}
.historique small{color:var(--muted)}