/* ============================================================
   CESAR.TEAM — gabarit « success story »
   Composants propres aux fiches de référence et à leur liste.
   S'appuie sur assets/design-system.css : aucun token redéfini ici.
   ============================================================ */

/* ---- fil d'ariane (identique aux pages solution) ---- */
.crumb{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-deep-3);
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;
}
.crumb a{color:var(--on-deep-3);text-decoration:none;}
.crumb a:hover{color:var(--on-deep-2);}
.crumb span{color:var(--teal-lit);}

.hero.compact{padding:52px 0 0;}
.hero.compact .hero-grid{grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;}
.hero.compact h1{font-size:clamp(32px,4vw,50px);margin-top:16px;}
.hero.compact .hero-sub{font-size:18.5px;margin-top:20px;}

/* ---- carte d'identité du client, dans le hero ---- */
.ss-ident{border-left:1px solid var(--deep-line);padding-left:30px;}
.ss-ident .list{display:flex;flex-direction:column;gap:0;margin-top:14px;}
.ss-ident .r{padding:13px 0;border-bottom:1px solid var(--deep-line);}
.ss-ident .r:first-child{border-top:1px solid var(--deep-line);}
.ss-ident .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-3);}
.ss-ident .v{margin-top:4px;font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:15.5px;color:var(--on-deep);letter-spacing:-.01em;line-height:1.3;}

/* emplacement logo client — vide tant que l'autorisation n'est pas obtenue */
.ss-logo{
  margin-top:20px;height:56px;border:1px dashed var(--deep-line);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-deep-3);
}

/* ---- compteurs, en bas de hero ---- */
.ss-kpis{
  margin-top:44px;border-top:1px solid var(--deep-line);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.ss-kpis.two{grid-template-columns:repeat(2,1fr);}
.ss-kpi{padding:26px 30px 30px;position:relative;}
.ss-kpi+.ss-kpi{border-left:1px solid var(--deep-line);}
.ss-kpi .n{font-family:"Schibsted Grotesk",sans-serif;font-weight:800;
  font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em;line-height:1;
  color:var(--teal-lit);font-variant-numeric:tabular-nums;}
.ss-kpi .l{margin-top:10px;font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:15px;color:var(--on-deep);letter-spacing:-.01em;}
.ss-kpi .s{margin-top:5px;font-size:13px;color:var(--on-deep-2);line-height:1.45;}

/* ---- le point de départ : liste à colonne d'index ---- */
.ss-before{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--ground);}
.ss-b{display:grid;grid-template-columns:56px 320px 1fr;border-top:1px solid var(--line);}
.ss-b:first-child{border-top:0;}
.ss-b:nth-child(odd){background:var(--surface);}
.sec.tint .ss-b:nth-child(odd){background:var(--surface-2);}
.ss-b .i{padding:20px 0 20px 22px;font-family:"IBM Plex Mono",monospace;font-size:12px;
  font-weight:600;color:var(--teal);}
.ss-b .t{padding:20px 22px 20px 0;font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:17px;color:var(--ink);letter-spacing:-.015em;line-height:1.3;}
.ss-b .d{padding:20px 24px;font-size:15.5px;color:var(--ink-2);line-height:1.6;
  border-left:1px solid var(--line);}

/* ---- ce qui a été mis en place ---- */
.ss-moves{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.ss-moves.two{grid-template-columns:repeat(2,1fr);}
.ss-move.wide{grid-column:span 2;}
.ss-move{background:var(--ground);padding:26px 26px 28px;display:flex;flex-direction:column;gap:9px;}
.sec.tint .ss-move{background:var(--ground);}
.ss-move .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal);}
.ss-move h3{font-size:17.5px;color:var(--ink);letter-spacing:-.017em;line-height:1.25;}
.ss-move p{font-size:15px;color:var(--ink-2);line-height:1.58;}

/* ---- résultats ---- */
.ss-results{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ss-results.two{grid-template-columns:repeat(2,1fr);}
.ss-res{border-top:2px solid var(--teal);padding-top:22px;}
.ss-res .n{font-family:"Schibsted Grotesk",sans-serif;font-weight:800;
  font-size:clamp(34px,4vw,50px);letter-spacing:-.035em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.ss-res .l{margin-top:12px;font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:17px;color:var(--ink);letter-spacing:-.015em;line-height:1.28;}
.ss-res p{margin-top:9px;font-size:14.5px;color:var(--ink-2);line-height:1.55;}

/* ---- modules mobilisés ---- */
.ss-mods{display:flex;flex-wrap:wrap;gap:10px;}
.ss-mod{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid var(--line-2);border-radius:100px;padding:9px 17px 9px 14px;
  background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",sans-serif;font-size:14.5px;font-weight:500;
}
.ss-mod::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--teal);flex:none;}
.ss-mod:hover{border-color:var(--teal);background:var(--teal-wash);}

/* ---- bloc « à valider » ---- */
.ss-todo{
  margin-top:26px;border:1px dashed var(--line-2);border-left:3px solid #C9A227;
  border-radius:var(--r);padding:26px 28px 28px;background:var(--ground);
}
.sec.tint .ss-todo{background:var(--ground);}
.ss-todo .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#8A6D1F;display:block;margin-bottom:12px;}
:root[data-theme="dark"] .ss-todo .k{color:#D8B95A;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ss-todo .k{color:#D8B95A;} }
.ss-todo ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;}
.ss-todo li{font-size:15px;color:var(--ink-2);line-height:1.55;}
.ss-todo li b{color:var(--ink);font-weight:600;}

/* ---- page liste ---- */
.ss-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.ss-card{background:var(--ground);padding:30px 30px 32px;display:flex;flex-direction:column;
  gap:12px;text-decoration:none;color:inherit;}
.ss-card.wide{grid-column:1 / -1;}
.ss-card:hover{background:var(--surface);}
.ss-card .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal);}
.ss-card h3{font-size:21px;color:var(--ink);letter-spacing:-.02em;line-height:1.2;}
.ss-card p{font-size:15px;color:var(--ink-2);line-height:1.58;}
.ss-card .figs{margin-top:6px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:26px;flex-wrap:wrap;}
.ss-card .f b{font-family:"Schibsted Grotesk",sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.03em;color:var(--teal);display:block;line-height:1;
  font-variant-numeric:tabular-nums;}
.ss-card .f span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:7px;}
.ss-card .go{margin-top:auto;padding-top:18px;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--teal);}

@media (max-width:1020px){
  .hero.compact .hero-grid{grid-template-columns:1fr;gap:36px;align-items:start;}
  .ss-ident{border-left:0;padding-left:0;border-top:1px solid var(--deep-line);padding-top:24px;}
  .ss-b{grid-template-columns:48px 1fr;}
  .ss-b .t{padding-right:22px;}
  .ss-b .d{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line);padding:0 22px 20px;}
  .ss-moves{grid-template-columns:repeat(2,1fr);}
  .ss-cards{grid-template-columns:1fr;}
}

@media (max-width:820px){
  .ss-kpis,.ss-kpis.two{grid-template-columns:1fr;gap:1px;background:var(--deep-line);
    border-top:1px solid var(--deep-line);}
  .ss-kpi{background:var(--deep);padding:20px 22px 22px;}
  .ss-kpi+.ss-kpi{border-left:0;}
  .ss-results,.ss-results.two{grid-template-columns:1fr;gap:26px;}
}

@media (max-width:640px){
  .ss-moves{grid-template-columns:1fr;}
}