/* ==========================================================================
   Edabos — Page « Portail client »
   Vient après style.css : réutilise ses tokens (couleurs, radius, ombres,
   boutons, badges, FAQ .qa, footer). Ce fichier ne couvre que les composants
   propres à cette page, tous préfixés « pc- ».

   Illustrations : chaque visuel est une maquette HTML/CSS de l'interface,
   posée dans un cadre .pc-shot[data-illustration="…"]. Pour la remplacer par
   une capture, vider le cadre et y mettre <img class="pc-shot__img" …>.
   ========================================================================== */

:root{
  --pc-ok:#12a150;
  --pc-ok-bg:#e8f7ee;
  --pc-wait:#c77700;
  --pc-wait-bg:#fff4e0;
  --pc-blue:#1e4af2;
  --pc-blue-bg:#eef2ff;
  --pc-ui:#f7f8fa;
  --pc-ui-line:#eceef1;
}

/* --------------------------------------------------------------
   1. Hero + fenêtre du portail
   -------------------------------------------------------------- */
.pc-hero{padding:172px 0 0}
.pc-hero .badge{margin-bottom:22px}
.pc-hero .h1{max-width:820px;margin-bottom:20px}
.pc-hero .lead{max-width:660px;margin-bottom:32px}
.pc-hero__cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.pc-hero__note{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:Geist,sans-serif;font-size:13.5px;font-weight:500;color:var(--ink-mute);
}
.pc-hero__note i{width:4px;height:4px;border-radius:50%;background:var(--ink-mute);flex:none}

/* La fenêtre monte depuis le bas du panneau, son pied est rogné */
.pc-stage{
  position:relative;
  max-width:1080px;margin:72px auto 0;padding:0 20px;
  height:540px;
}
.pc-stage .win{height:620px}
.pc-toast{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:11px 16px 11px 12px;border-radius:16px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -18px rgba(30,40,90,.45);
  font-family:Geist,sans-serif;font-size:13px;font-weight:500;color:#111;white-space:nowrap;
  animation:pc-float 6s ease-in-out infinite;
}
.pc-toast small{display:block;font-size:11.5px;font-weight:400;color:var(--ink-mute)}
.pc-toast__ico{
  width:30px;height:30px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.pc-toast__ico svg{width:16px;height:16px}
.pc-toast--a{left:-64px;top:330px}
.pc-toast--b{right:-64px;top:128px;animation-delay:-3s}
@keyframes pc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.pc-toast{animation:none}}

/* --------------------------------------------------------------
   2. Fenêtre de navigateur (maquettes)
   -------------------------------------------------------------- */
.win{
  position:relative;
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(30,40,90,.45),0 0 0 1px rgba(17,17,26,.06);
  font-family:Inter,Geist,sans-serif;color:#15161a;text-align:left;
}
.win__bar{
  display:flex;align-items:center;gap:7px;
  height:40px;padding:0 16px;
  background:#f3f4f6;border-bottom:1px solid var(--pc-ui-line);
}
.win__bar i{width:10px;height:10px;border-radius:50%;background:#dcdee3;flex:none}
.win__url{
  margin:0 auto;padding:4px 16px;border-radius:8px;background:#fff;
  font-size:11.5px;color:#7a7d85;display:flex;align-items:center;gap:6px;
}
.win__url svg{width:10px;height:10px}
.win__body{display:grid;grid-template-columns:196px 1fr;height:calc(100% - 40px)}

.win__side{
  background:var(--pc-ui);border-right:1px solid var(--pc-ui-line);
  padding:18px 12px;display:flex;flex-direction:column;gap:2px;
}
.win__logo{height:15px;width:auto;margin:2px 8px 18px}
.win__nav{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:9px;
  font-size:12.5px;font-weight:500;color:#5b5e66;white-space:nowrap;
}
.win__nav svg{width:15px;height:15px;flex:none}
.win__nav--on{background:#fff;color:#111;box-shadow:0 1px 3px rgba(17,17,26,.08)}
.win__nav em{
  margin-left:auto;font-style:normal;font-size:10.5px;font-weight:600;
  background:var(--pc-blue);color:#fff;border-radius:20px;padding:1px 7px;
}

.win__main{padding:24px 26px;display:flex;flex-direction:column;gap:16px;min-width:0}
.win__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.win__title{font-size:19px;font-weight:700;letter-spacing:-.3px}
.win__sub{font-size:12px;color:#7a7d85;margin-top:2px}
.win__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}

/* Blocs d'interface réutilisés dans toutes les maquettes */
.ui-card{
  background:#fff;border:1px solid var(--pc-ui-line);border-radius:14px;
  padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;
}
.ui-card__title{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;font-weight:600;color:#111;
}
.ui-card__title span{font-weight:500;color:#8a8d94}
.ui-pill{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.ui-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ui-pill--ok{background:var(--pc-ok-bg);color:var(--pc-ok)}
.ui-pill--wait{background:var(--pc-wait-bg);color:var(--pc-wait)}
.ui-pill--blue{background:var(--pc-blue-bg);color:var(--pc-blue)}
.ui-pill--grey{background:#f1f2f4;color:#7a7d85}
.ui-pill--red{background:#fdecec;color:#d93636}
.ui-bar{height:7px;border-radius:10px;background:#eef0f3;overflow:hidden}
.ui-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9aa6ff,var(--pc-blue))}
.ui-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:11px;background:var(--pc-ui);
  font-size:12.5px;color:#26272a;min-width:0;
}
.ui-row b{font-weight:600;color:#111}
.ui-row > span:not([class]){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-ico{
  width:28px;height:28px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 1px 2px rgba(17,17,26,.08);color:#111;
}
.ui-ico svg{width:14px;height:14px}
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 14px;border-radius:9px;
  font-size:12px;font-weight:600;white-space:nowrap;
}
.ui-btn--dark{background:#111;color:#fff}
.ui-btn--line{background:#fff;color:#111;border:1px solid #d9dbe0}
.ui-btn svg{width:13px;height:13px}
.ui-check{
  width:18px;height:18px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--pc-ok);color:#fff;
}
.ui-check svg{width:10px;height:10px}
.ui-check--todo{background:#fff;border:1.5px solid #cfd2d8}
.ui-check--now{background:var(--pc-blue);box-shadow:0 0 0 4px var(--pc-blue-bg)}

/* Stepper horizontal (statut du projet) */
.ui-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ui-step{display:flex;flex-direction:column;gap:7px;font-size:11.5px;font-weight:500;color:#8a8d94}
.ui-step i{height:5px;border-radius:5px;background:#eef0f3}
.ui-step--done{color:#111}
.ui-step--done i{background:var(--pc-ok)}
.ui-step--now{color:var(--pc-blue);font-weight:600}
.ui-step--now i{background:linear-gradient(90deg,var(--pc-blue) 55%,#eef0f3 55%)}

/* Bulles de messagerie */
.ui-msg{display:flex;gap:9px;align-items:flex-end;max-width:92%}
.ui-msg__av{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#111;color:#fff;font-size:10px;font-weight:700;
}
.ui-msg__av img{width:13px;height:13px}
.ui-msg__txt{
  padding:9px 12px;border-radius:13px 13px 13px 4px;background:var(--pc-ui);
  font-size:12px;line-height:1.45;color:#26272a;
}
.ui-msg__txt small{display:block;margin-top:3px;font-size:10.5px;color:#9a9ca2}
.ui-msg__av--team{background:var(--pc-blue-bg)}
.ui-msg--me{align-self:flex-end;flex-direction:row-reverse}
.ui-msg--me .ui-msg__av{background:#d6dcff;color:var(--pc-blue)}
.ui-msg--me .ui-msg__txt{background:var(--pc-blue);color:#fff;border-radius:13px 13px 4px 13px}
.ui-msg--me .ui-msg__txt small{color:rgba(255,255,255,.7)}
.ui-file{
  display:flex;align-items:center;gap:8px;margin-top:7px;
  padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.18);
  font-size:11px;font-weight:500;
}
.ui-file svg{width:13px;height:13px;flex:none}

/* --------------------------------------------------------------
   3. Constat — avant / après
   -------------------------------------------------------------- */
.pc-why .h2{max-width:1000px}
.pc-why .lead{margin-bottom:56px}
.pc-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.pc-compare__col{border-radius:var(--r-card);padding:32px 26px 30px}
.pc-compare__col--before{background:var(--grey-panel)}
.pc-compare__col--after{
  background:var(--gradient);color:var(--ink);
  position:relative;overflow:hidden;isolation:isolate;
}
/* Trame de points blancs, comme les visuels des fonctionnalités */
.pc-compare__col--after::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.1px,transparent 1.2px);
  background-size:18px 18px;
}
.pc-compare__label{
  font-family:Geist,sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:20px;
}
.pc-compare__col--after .pc-compare__label{color:var(--ink)}
.pc-compare__list{display:flex;flex-direction:column;gap:10px}
.pc-compare__list li{
  display:flex;gap:12px;align-items:flex-start;
  padding:13px 14px;border-radius:14px;
  font-family:Geist,sans-serif;font-size:15px;font-weight:500;line-height:1.45;
  text-wrap:pretty;
}
.pc-compare__col--before li{color:#6b6e74;background:rgba(255,255,255,.6)}
.pc-compare__col--after li{
  color:var(--ink);background:#fff;
  box-shadow:0 8px 18px -8px rgba(58,72,150,.22);
}
.pc-compare__list svg{width:20px;height:20px;flex:none;margin-top:1px}
.pc-compare__col--before svg{color:#b3b6bc}
.pc-compare__col--after svg{color:var(--brand)}
/* Lignes alignées deux à deux entre « Sans » et « Avec » (≥ 810px) */
@media (min-width:810px){
  .pc-compare{grid-template-rows:auto repeat(5,auto);row-gap:0}
  .pc-compare__col{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;row-gap:0}
  .pc-compare__list{display:grid;grid-row:2 / -1;grid-template-rows:subgrid;row-gap:10px}
  .pc-compare__list li{align-items:center}
}

/* Chiffres clés */
.pc-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:20px;border-radius:var(--r-card);
  background:var(--grey-panel);
}
.pc-stat{padding:30px 28px;text-align:left;position:relative}
.pc-stat + .pc-stat::before{
  content:"";position:absolute;left:0;top:28px;bottom:28px;width:1px;background:#e1e3e7;
}
.pc-stat__num{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:44px;line-height:1;letter-spacing:-1.5px;
  background:linear-gradient(120deg,#111 30%,#6d8cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pc-stat__lbl{margin-top:10px;font-size:14px;line-height:1.4;color:var(--ink-soft)}

/* --------------------------------------------------------------
   4. Fonctionnalités — rangées alternées texte / visuel
   -------------------------------------------------------------- */
.pc-feats-head .lead{margin-bottom:0}
.pc-index{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:40px auto 110px;max-width:900px;
}
.pc-index a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 10px;border-radius:40px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);
  font-family:Geist,sans-serif;font-size:14px;font-weight:500;color:#111;
  transition:transform .25s ease,border-color .25s ease;
}
.pc-index a:hover{transform:translateY(-2px);border-color:#111}
.pc-index a span{
  width:24px;height:24px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#f1f2f4;font-size:11.5px;font-weight:600;color:#55575c;
}

.pc-feats{display:flex;flex-direction:column;gap:140px}
.pc-feat{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:72px;align-items:center;
  scroll-margin-top:120px;
}
.pc-feat--rev .pc-feat__text{order:2}
.pc-feat__num{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:20px;
  font-family:Geist,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute);
}
.pc-feat__num b{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#121315;color:#fff;font-size:14px;letter-spacing:0;
}
.pc-feat__title{
  font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:40px;line-height:1.1;letter-spacing:-1.2px;color:var(--ink);
  margin-bottom:18px;
}
.pc-feat__lead{font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:26px}
.pc-feat__lead b{color:var(--ink);font-weight:600}
.pc-feat .ticks li{font-size:15px;line-height:1.5}

/* Le bouton qui suit la liste : assez d'air pour ne pas coller au dernier
   point, sans créer un nouveau bloc. */
.pc-feat__cta{margin-top:28px}

/* Cadre des visuels */
.pc-shot{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-card);
  padding:48px 44px;
  background:var(--gradient);
  min-height:460px;
  display:flex;align-items:center;justify-content:center;
}
.pc-shot::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.1px,transparent 1.2px);
  background-size:18px 18px;
}
.pc-shot--lin{background:var(--gradient-linear)}
.pc-shot--dark{background:radial-gradient(120% 90% at 20% 0%,#2a2f4a 0%,#0d0d10 60%)}
.pc-shot--dark::after{opacity:.12}
.pc-shot__img{width:100%;height:auto;border-radius:14px;box-shadow:0 30px 60px -28px rgba(30,40,90,.5)}
.pc-shot .ui-card{
  width:100%;max-width:440px;
  box-shadow:0 30px 60px -28px rgba(30,40,90,.5);border:0;
  padding:20px;gap:14px;
  font-family:Inter,Geist,sans-serif;color:#15161a;text-align:left;
}
.pc-shot .ui-card + .ui-card{margin-top:0}
.pc-stack{position:relative;width:100%;max-width:440px}
/* Petite carte qui chevauche le bas de la carte principale sans masquer ses boutons */
.pc-stack__back{
  position:relative;margin:-12px -26px 0 auto;
  max-width:250px !important;transform:rotate(2deg);
}
.pc-shot__h{font-size:15px;font-weight:700;letter-spacing:-.2px}
.pc-shot__muted{font-size:12px;color:#7a7d85;line-height:1.5}

/* Liste de sections (onboarding) */
.ui-list{display:flex;flex-direction:column;gap:9px}
.ui-li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#26272a}
.ui-li--todo{color:#9a9ca2}
.ui-li--now{font-weight:600;color:var(--pc-blue)}
.ui-li__end{margin-left:auto;flex:none}

/* Lecteur vidéo (formation) */
.ui-video{
  position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  background:linear-gradient(135deg,#1b1f35,#3a3f6b 60%,#6d8cff);
  display:flex;align-items:center;justify-content:center;
}
.ui-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.ui-video__play{
  position:relative;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
}
.ui-video__play svg{width:16px;height:16px;margin-left:3px;color:#111}
.ui-video__bar{position:absolute;left:12px;right:12px;bottom:10px;height:4px;border-radius:4px;background:rgba(255,255,255,.3)}
.ui-video__bar i{display:block;width:38%;height:100%;border-radius:inherit;background:#fff}

/* Montants (facturation) */
.ui-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ui-kpi{padding:13px 14px;border-radius:11px;background:var(--pc-ui)}
.ui-kpi small{display:block;font-size:11px;color:#7a7d85;margin-bottom:4px}
.ui-kpi b{font-size:19px;font-weight:700;letter-spacing:-.4px}
.ui-kpi--dark{background:#111;color:#fff}
.ui-kpi--dark small{color:rgba(255,255,255,.6)}

/* --------------------------------------------------------------
   5. Engagements (3 cartes)
   -------------------------------------------------------------- */
.pc-promise .lead{margin-bottom:52px}
.pc-promise .h2{margin-bottom:52px}
.pc-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.pc-promise__card{
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);
  border:1px solid #f1f2f4;
  padding:32px 28px;display:flex;flex-direction:column;gap:14px;
}
.pc-promise__ico{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient);color:#111;
}
.pc-promise__head{display:flex;align-items:center;gap:14px}
.pc-promise__ico{flex-shrink:0}
.pc-promise__ico svg{width:21px;height:21px}
.pc-promise__title{font-family:"DM Sans",sans-serif;font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.5px;text-wrap:balance}
.pc-promise__text{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}

/* CTA final */
.pc-final{padding:130px 0}
.pc-final .h2{max-width:820px}
.pc-final .lead{max-width:620px;margin-bottom:32px}
.pc-final__actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}

/* --------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------- */
@media (max-width:1439.98px){
  .pc-hero{padding-top:150px}
  .pc-stage{max-width:980px;height:500px}
  .pc-feats{gap:120px}
  .pc-feat{gap:56px}
  .pc-feat__title{font-size:36px}
  .pc-shot{padding:40px 34px;min-height:430px}
  .pc-toast--a{left:-12px}
  .pc-toast--b{right:-12px}
}

@media (max-width:1099.98px) and (min-width:810px){
  .pc-feat{grid-template-columns:1fr;gap:40px;max-width:680px;margin-inline:auto}
  .pc-feat--rev .pc-feat__text{order:0}
  .win__body{grid-template-columns:170px 1fr}
  .win__nav{white-space:normal}
}

@media (max-width:809.98px){
  .pc-hero{padding-top:118px}
  .pc-hero .h1{max-width:360px}
  .pc-hero .lead{max-width:340px}
  .pc-hero__cta{flex-direction:column;width:100%;max-width:320px;margin-inline:auto}
  .pc-hero__cta .btn{width:100%}
  .pc-hero__note{font-size:12.5px}

  .pc-stage{margin-top:48px;height:420px;padding:0 12px}
  .pc-stage .win{height:480px}
  .win__body{grid-template-columns:1fr}
  .win__side{display:none}
  .win__main{padding:16px;gap:12px}
  .win__title{font-size:16px}
  .win__grid{grid-template-columns:1fr}
  .win__grid > .ui-card:last-child{display:none}
  .pc-stage .win__head{flex-direction:column;align-items:flex-start;gap:8px}
  /* Stepper : seules les barres + le libellé de l'étape en cours (lisible, sans césure) */
  .ui-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .ui-step{font-size:0;min-width:0}
  .ui-step--now{font-size:11.5px;white-space:nowrap}
  .pc-toast{display:none}

  .pc-why .lead{margin-bottom:36px}
  .pc-compare{grid-template-columns:1fr;gap:14px}
  .pc-compare__col{padding:26px 22px 28px}
  .pc-compare__list li{font-size:15px;padding:12px 14px}
  .pc-stats{grid-template-columns:1fr 1fr}
  .pc-stat{padding:24px 20px}
  .pc-stat:nth-child(3)::before{display:none}
  .pc-stat:nth-child(n+3){border-top:1px solid #e1e3e7}
  .pc-stat__num{font-size:36px}
  .pc-stat__lbl{font-size:13px}

  .pc-index{margin:28px auto 72px}
  .pc-index a{font-size:13px;padding:7px 13px 7px 8px}
  .pc-feats{gap:80px}
  .pc-feat{grid-template-columns:1fr;gap:30px}
  .pc-feat--rev .pc-feat__text{order:0}
  .pc-feat__title{font-size:24px;line-height:1.15;letter-spacing:-.6px}
  /* Retour à la ligne réservé à l'ordinateur : sur mobile il imposerait une 3e ligne */
  .pc-feat__title .br-desk{display:none}
  .pc-feat__lead{font-size:15.5px}
  .pc-shot{padding:28px 16px;min-height:0}
  .pc-stack__back{display:none}

  .pc-promises{grid-template-columns:1fr;gap:14px}
  .pc-promise__card{padding:26px 22px}

  .pc-final{padding:80px 0}
  .pc-final__actions{flex-direction:column;width:100%;max-width:320px;margin-inline:auto}
  .pc-final__actions .btn{width:100%}

  /* style.css fixe .h2 à 42px / 38px d'interlignage sur mobile : trop serré ici */
  .pc-page .h2{font-size:31px;line-height:1.12;letter-spacing:-1px}
}

/* Retour à la ligne après la première phrase conservé aussi sur téléphone */
#pourquoi .h2 br{display:inline}