/* ===== HVD — Page Méthode (styles spécifiques) ===== */

/* principes */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px;}
.principle{background:#fff;border:1px solid #ece7da;border-radius:var(--r);padding:28px 26px;
  transition:transform .22s,box-shadow .22s,border-color .22s;}
.principle:hover{transform:translateY(-4px);box-shadow:inset 4px 0 0 var(--gold),0 20px 40px -24px rgba(14,29,66,.22);border-color:#ddd6c4;}
.principle .ic{width:46px;height:46px;border-radius:11px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.principle .ic svg{width:23px;height:23px;stroke:var(--gold-2);fill:none;stroke-width:1.6;}
.principle h3{font-size:20px;margin-bottom:8px;}
.principle p{margin:0;font-size:14px;color:var(--muted);line-height:1.55;}

/* parcours / journey */
.journey{position:relative;max-width:1000px;margin:0 auto;}
.journey:before{content:"";position:absolute;left:39px;top:18px;bottom:46px;width:2px;
  background:linear-gradient(var(--gold),#e3d8bb);}
.jstep{position:relative;padding:0 0 52px 116px;}
.jstep:last-child{padding-bottom:0;}
.jnode{position:absolute;left:0;top:0;width:80px;height:80px;border-radius:50%;background:#fff;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:34px;color:var(--navy);
  box-shadow:0 0 0 8px var(--cream);z-index:2;transition:box-shadow .3s;}
.jstep:hover .jnode{box-shadow:0 0 0 8px var(--cream),0 0 0 13px rgba(192,162,74,.18);}
.jstep .ph{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;}
.jstep h2.jh{font-size:clamp(26px,3vw,34px);margin:9px 0 8px;}
.jstep .obj{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,21px);color:var(--navy);margin-bottom:24px;line-height:1.35;max-width:680px;}

.jcard{background:#fff;border:1px solid #ece7da;border-radius:18px;padding:36px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start;
  transition:box-shadow .25s,border-color .25s;}
.jstep:hover .jcard:not(.app){box-shadow:0 20px 44px -26px rgba(14,29,66,.2);border-color:#ddd6c4;}
.jcard .dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:18px;}
.jcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.jcard li{display:flex;gap:13px;align-items:flex-start;font-size:15px;line-height:1.45;}
.jcard .tick{width:22px;height:22px;border-radius:7px;background:var(--cream);border:1px solid var(--gold);
  color:var(--gold-deep);display:flex;align-items:center;justify-content:center;flex:none;font-size:12px;margin-top:1px;}
.jout{background:var(--cream);border-radius:14px;padding:28px;}
.jout .lbl-out{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px;}
.jout .res{font-family:var(--serif);font-size:22px;color:var(--navy);line-height:1.3;}

/* étape pilotage (highlight app) */
.jstep.live .jnode{background:var(--navy);color:#fff;border-color:var(--gold);}
.jcard.app{background:var(--navy);border-color:var(--gold);color:#fff;}
.jcard.app .dt{color:var(--gold-2);}
.jcard.app li{color:#dfe4ef;}
.jcard.app .tick{background:rgba(192,162,74,.16);border-color:var(--gold);color:var(--gold-2);}
.jcard.app .jout{background:rgba(255,255,255,.05);border:1px solid var(--navy-line);}
.jcard.app .jout .lbl-out{color:var(--muted-light);}
.jcard.app .jout .res{color:#fff;}
.app-flag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-2);background:rgba(192,162,74,.14);border:1px solid var(--gold);
  border-radius:30px;padding:6px 13px;margin-top:18px;}
.app-flag a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px;}

@media(max-width:880px){
  .principles{grid-template-columns:1fr;}
  .jstep{padding-left:0;padding-top:96px;}
  .journey:before{display:none;}
  .jnode{top:0;left:0;}
  .jcard{grid-template-columns:1fr;gap:26px;padding:28px;}
}
