/* Réalisations — matches EB Automatisation V2.dc.html sc-if isRealisations (lignes 734-1004). */

/* ============ étude de cas — carte pleine largeur 2 colonnes ============ */
.case-study{ background:#fff; border:1px solid var(--border-2); border-radius:22px; overflow:hidden; }
.case-study__grid{ display:grid; grid-template-columns:1.1fr .9fr; }
.case-study__body{ padding:48px; }
/* le cas "Onboarding RH" est le seul à coupler .case-study__body avec le
   panneau .case-study__side "stats" (pas --terminal), qui lui est centré
   verticalement (justify-content:center) — sans le même centrage côté texte,
   son contenu (plus court que la colonne stats) s'arrête en haut en laissant
   un grand vide blanc en bas, pendant que la colonne sombre reste pleine :
   décalage visuel entre les deux colonnes. On ne centre le texte que dans ce
   cas précis, pour ne pas toucher les 5 autres cartes (side--terminal reste
   volontairement calé en haut, comme une fenêtre d'appli). */
.case-study__body:has(+ .case-study__side:not(.case-study__side--terminal)){
  display:flex; flex-direction:column; justify-content:center;
}
.case-study__tag{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:20px; margin-bottom:22px; }
.case-study__body h2{ font-size:30px; letter-spacing:-.02em; margin:0 0 22px; line-height:1.2; }
.case-study__block{ margin-bottom:22px; }
.case-study__block:last-of-type{ margin-bottom:26px; }
.case-study__label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--orange-a11y); margin-bottom:7px; }
.case-study__block p{ font-size:15.5px; line-height:1.62; color:var(--text-3); margin:0; }
.case-study__results{ display:flex; flex-direction:column; gap:11px; }
.case-study__result{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; line-height:1.5; color:var(--text-5); }
.case-study__result span{ color:var(--green); flex:none; }
.case-study__tool-note{ display:flex; align-items:center; gap:11px; background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.case-study__tool-note span.icon{ font-size:18px; }
.case-study__tool-note span.text{ font-size:13.5px; color:var(--text-3); line-height:1.45; }
.case-study__quote{ margin:0 0 26px; padding:18px 20px; background:var(--bg-soft); border-left:3px solid var(--orange-a11y); border-radius:0 10px 10px 0; }
.case-study__quote p{ font-size:15px; font-style:italic; line-height:1.6; color:var(--text-2); margin:0 0 10px; }
.case-study__quote cite{ display:block; font-style:normal; font-size:13px; font-weight:600; color:var(--navy); }
.case-study__quote cite span{ display:block; font-weight:400; color:var(--muted); font-size:12.5px; margin-top:2px; }

/* flux RH (étapes verticales) */
.case-flow{ display:flex; flex-direction:column; gap:0; }
.case-flow__step{ display:flex; align-items:center; gap:12px; }
.case-flow__icon{ width:34px; height:34px; flex:none; border-radius:9px; background:var(--navy); border:1px solid var(--blue-2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 0 0 1px rgba(46,155,255,.25), 0 0 12px rgba(46,155,255,.35); }
.case-flow__icon--done{ background:var(--green); border-color:var(--green-bright); box-shadow:0 0 0 1px rgba(91,203,139,.3), 0 0 12px rgba(91,203,139,.4); }
.case-flow__label{ font-family:var(--font-heading); font-weight:600; font-size:14.5px; color:var(--navy); }
.case-flow__label--done{ color:var(--green-dark-text); }
.case-flow__connector{ width:2px; height:14px; margin-left:16px; background:var(--border-4); position:relative; overflow:visible; }
.case-flow__step:has(.case-flow__icon--done) + .case-flow__connector{
  background:linear-gradient(180deg,var(--green-bright),var(--blue-2)); box-shadow:0 0 6px rgba(91,203,139,.6);
}
.case-flow__connector::after{
  content:""; position:absolute; left:50%; top:0; width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
  background:var(--blue-3); box-shadow:0 0 8px rgba(91,203,139,.9); opacity:0;
  --eb-travel:14px;
}
@media (prefers-reduced-motion: no-preference){
  .case-flow__step:has(.case-flow__icon--done) + .case-flow__connector::after{ animation:ebconnectorflow 1.2s ease-in-out infinite; }
}

/* panneau navy (résultats chiffrés — cas 1) — même navy uni que les panneaux --terminal des autres cas */
.case-study__side{ background:var(--navy-panel); color:#fff; padding:44px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.case-study__side-label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--peach); margin-bottom:4px; }
.case-study__stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.case-study__stat{ background:var(--navy-card); border:1.5px solid var(--blue-2); border-radius:14px; padding:28px 24px; box-shadow:0 0 0 1px rgba(46,155,255,.25), 0 0 30px -6px rgba(46,155,255,.55), 0 14px 30px -18px rgba(30,95,208,.6); }
.case-study__stat-label{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-on-navy); margin-bottom:12px; }
.case-study__stat-value{ font-family:var(--font-heading); font-weight:700; font-size:29px; letter-spacing:-.02em; color:#fff; line-height:1.1; }
.case-study__side-foot{ margin-top:6px; padding-top:18px; border-top:1px solid var(--navy-card-border); font-size:13.5px; color:var(--muted-on-navy); line-height:1.5; }

/* panneau navy foncé (mockup terminal — cas 2-4) */
.case-study__side--terminal{ background:var(--navy-panel); padding:36px; justify-content:flex-start; }
.case-study__mock{ background:var(--navy); border:1px solid var(--navy-panel-border); border-radius:16px; overflow:hidden; }
.case-study__mock-titlebar{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--navy-panel-border); }
.case-study__mock-dots{ display:flex; align-items:center; gap:7px; flex:none; }
.case-study__mock-dots span{ width:9px; height:9px; border-radius:50%; display:block; }
/* feu tricolore façon macOS : couleurs pilotées par les tokens --dot-* déjà
   définis dans tokens.css (identiques à .mockup__dots), plutôt que par des
   hex répétés en style="" inline sur chaque puce. */
.case-study__mock-dots span:nth-child(1){ background:var(--dot-red); }
.case-study__mock-dots span:nth-child(2){ background:var(--dot-yellow); }
.case-study__mock-dots span:nth-child(3){ background:var(--dot-green); }
.case-study__mock-file{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted-on-navy-3); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 12px; }
.case-study__mock-live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; color:var(--green-bright); flex:none; }
.case-study__mock-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 10px rgba(91,203,139,1); animation:ebblink 1.6s ease-in-out infinite; }
.case-study__mock-body{ padding:6px 18px 14px; }
.case-study__mock-row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--navy-panel-border); position:relative; overflow:visible; }
.case-study__mock-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
/* états de la puce de statut — mêmes teintes que les valeurs .case-study__mock-val
   ci-dessous, pilotées par token plutôt que par un hex répété en style="" inline. */
.case-study__mock-dot--neutral{ background:var(--muted-on-navy-2); }
.case-study__mock-dot--info{ background:var(--blue-2); }
.case-study__mock-dot--success{ background:var(--green-bright); }
.case-study__mock-label{ flex:1; font-size:13.5px; color:var(--mono-on-navy); }
.case-study__mock-val{ font-family:var(--font-mono); font-size:11px; font-weight:500; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.case-study__mock-val--neutral{ color:var(--mono-on-navy); background:rgba(255,255,255,.05); }
.case-study__mock-val--info{ color:var(--blue-3); background:rgba(46,155,255,.16); box-shadow:0 0 0 1px rgba(46,155,255,.3), 0 0 10px rgba(46,155,255,.3); }
.case-study__mock-val--success{ color:var(--green-bright); background:rgba(91,203,139,.12); box-shadow:0 0 0 1px rgba(91,203,139,.35), 0 0 10px rgba(91,203,139,.35); }

/* flux entre les lignes du mockup — même technique que sur Solutions (voir
   solutions.css .solution-row__mock-row) : un point lumineux descend d'une
   ligne à l'autre, coloré selon l'état de la ligne qu'il rejoint. */
.case-study__mock-row::before{
  content:""; position:absolute; left:4.5px; top:0; width:7px; height:7px; transform:translateX(-50%);
  border-radius:50%; opacity:0; pointer-events:none;
  --eb-x:-50%; --eb-travel:46px;
}
.case-study__mock-row:first-child::before{ display:none; }
.case-study__mock-row:has(.case-study__mock-dot--success)::before{ background:var(--green-bright); box-shadow:0 0 8px rgba(91,203,139,.9); }
.case-study__mock-row:has(.case-study__mock-dot--info)::before{ background:var(--blue-3); box-shadow:0 0 8px rgba(91,182,255,.9); }
.case-study__mock-row:has(.case-study__mock-dot--neutral)::before{ background:var(--muted-on-navy-2); box-shadow:0 0 6px rgba(157,170,194,.7); }
@media (prefers-reduced-motion: no-preference){
  .case-study__mock-row:not(:first-child)::before{ animation:ebconnectorflow 1.6s ease-in-out infinite; }
}
.case-study__big-stat{ margin-top:20px; display:inline-flex; align-items:center; gap:10px; background:var(--navy-card); border:1.5px solid var(--blue-2); border-radius:11px; padding:14px 18px; box-shadow:0 0 0 1px rgba(46,155,255,.25), 0 0 30px -6px rgba(46,155,255,.55), 0 14px 30px -18px rgba(30,95,208,.6); }
.case-study__big-stat-value{ font-family:var(--font-heading); font-weight:700; font-size:24px; color:#fff; letter-spacing:-.02em; }
.case-study__big-stat-label{ font-size:13px; color:var(--muted-on-navy); line-height:1.3; }

/* ============ autres cas d'usage (grille de 12) ============ */
.usecase-intro h2{ font-size:30px; letter-spacing:-.02em; margin:0 0 8px; }
.usecase-intro p{ font-size:16px; color:var(--muted-3); margin:0 0 36px; }
.usecase-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.usecase-card{ background:#fff; border:1px solid var(--border-2); border-radius:16px; padding:22px; display:flex; flex-direction:column; height:100%; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.usecase-card:hover{ border-color:var(--blue-2); box-shadow:0 0 0 1px rgba(46,155,255,.18), 0 20px 40px -22px rgba(30,95,208,.4); transform:translateY(-3px); }
.usecase-card__sector{ font-size:12px; font-weight:600; color:var(--orange-a11y); margin-bottom:9px; }
.usecase-card h3{ font-size:15.5px; margin:0 0 12px; line-height:1.3; }
.usecase-card__body{ display:flex; flex-direction:column; gap:9px; flex:1; }
.usecase-card__body p{ font-size:12.5px; line-height:1.5; color:var(--text-3); margin:0; }
.usecase-card__body p span{ font-weight:700; }
.usecase-card__metric-row{ margin-top:13px; border-top:1px solid var(--border); padding-top:12px; display:flex; align-items:baseline; gap:7px; }
.usecase-card__metric-value{ font-family:var(--font-heading); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--green); }
.usecase-card__metric-label{ font-size:11.5px; color:var(--muted); line-height:1.3; }

/* ============ vous gardez le contrôle (4 cartes) ============ */
.control-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.control-card{ background:#fff; border:1px solid var(--border-2); border-radius:16px; padding:28px; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.control-card:hover{ border-color:var(--green); box-shadow:0 0 0 1px rgba(30,142,90,.18), 0 20px 40px -22px rgba(30,142,90,.35); transform:translateY(-3px); }
.control-card:hover .control-card__icon{ box-shadow:0 0 0 1px rgba(30,142,90,.4), 0 0 24px rgba(30,142,90,.6); }
.control-card__icon{ width:44px; height:44px; border-radius:12px; background:var(--navy-gradient); border:1px solid var(--green); color:var(--green-bright); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 0 0 1px rgba(30,142,90,.25), 0 0 16px rgba(30,142,90,.35); }
.control-card h3{ font-size:17px; margin:0 0 7px; }
.control-card p{ font-size:14px; line-height:1.55; color:var(--text-3); margin:0; }

/* ============ technologies utilisées ============ */
.tech-band{ background:var(--bg-soft); border:1px solid var(--border); border-radius:18px; padding:44px; }
.tech-band__head{ text-align:center; margin-bottom:32px; }
.tech-band__head h2{ font-size:28px; margin:0 0 10px; }
.tech-band__head p{ font-size:16px; line-height:1.55; color:var(--text-3); margin:0 auto; max-width:620px; }
.tech-band__grid{ max-width:960px; margin:0 auto; }
/* puces d'outils : voir .tool-chip-grid / .tool-chip dans components.css */

/* ============ FAQ (même motif que solutions.css/pillar.css) ============ */
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
.faq-item{
  background:#fff; border:1px solid var(--border-2); border-radius:14px; padding:22px 24px;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover{ border-color:var(--blue-2); box-shadow:0 0 0 1px rgba(46,155,255,.15), 0 14px 30px -18px rgba(30,95,208,.4); }
.faq-item h3{ font-size:16.5px; margin:0 0 8px; }
.faq-item p{ font-size:14.5px; line-height:1.58; color:var(--text-3); margin:0; }

/* ==================== responsive — miroir du retrofit 900px du prototype ==================== */
@media (max-width:900px){
  .case-study__grid, .usecase-grid, .control-grid, .faq-grid{
    grid-template-columns:1fr;
  }
  /* en 1 colonne, .case-study__body et .case-study__side (2 items de grid,
     empilés) gardent leur min-width:auto implicite : si un descendant a une
     largeur de contenu minimale (ex. .case-study__mock-file en
     white-space:nowrap), la piste de grille s'élargit pour l'accueillir et
     déborde du conteneur — même si ce descendant a lui-même overflow:hidden.
     On neutralise ce min-width implicite sur les items de grille eux-mêmes. */
  .case-study__body, .case-study__side{ min-width:0; }
}
@media (max-width:640px){
  .case-study__body{ padding:28px; }
  .case-study__side, .case-study__side--terminal{ padding:22px; }
  .tech-band{ padding:22px; }
  .usecase-intro{ text-align:center; }
  .usecase-grid,.control-grid{ gap:22px; }
  .case-study__stats{ grid-template-columns:1fr; gap:12px; }
  .usecase-card{ padding:24px; }
  .usecase-card__body p{ font-size:13.5px; }
  .usecase-card h3{ font-size:16.5px; }
}