/* Article 10 — mise en œuvre d’un premier workflow. Tous les sélecteurs sont préfixés par .p10. */
.p10{--p10-w:min(var(--wrap),calc(100% - 2*var(--gutter)));--p10-human:var(--ink);--p10-human-bg:#fff;color:var(--ink)}
.p10 a{color:var(--blue-deep);text-underline-offset:3px}
.p10 a:hover{color:var(--blue)}
.p10 a:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.p10 .m-button{color:#fff;text-decoration:none}
.p10 .m-pill{color:#294ca7}
.p10 h2{font-size:clamp(25px,3vw,36px);font-weight:470;letter-spacing:-.033em;line-height:1.14;margin:0 0 14px}
.p10 h3{font-weight:560;letter-spacing:-.015em;line-height:1.3}
.p10 p{margin:0 0 14px}
.p10 strong{font-weight:600}

/* En-tête */
.p10-hero{width:min(940px,calc(100% - 2*var(--gutter)));margin:36px auto 0}
.p10 h1{font-size:clamp(32px,4.4vw,54px);font-weight:440;letter-spacing:-.046em;line-height:1.07;margin:14px 0 22px}
.p10-mark{display:inline-block;background:var(--blue);color:#fff;border-radius:16px;padding:0 .22em .06em;box-shadow:0 8px 22px #335cff33,inset 0 1px 1px #ffffff70}
.p10-lead{font-size:clamp(17px,1.5vw,19px);line-height:1.62;color:var(--ink-2)}
.p10-hero .byline{margin-top:20px}
.p10-banner{width:var(--p10-w);margin:36px auto 0}
.p10-banner img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid #e3ebf8;box-shadow:var(--shadow);background:var(--blue-mist)}
.p10-banner figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:right}

/* Mise en page : rail des étapes + corps */
.p10-layout{width:var(--p10-w);margin:56px auto 96px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;align-items:start}
.p10-rail{position:sticky;top:96px;padding:18px 16px;border-radius:20px;border:1px solid #d5e1f7;background:var(--glass)}
.p10-rail-title{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 10px 6px!important}
.p10-rail ol{margin:0;padding:0;list-style:none;counter-reset:p10r;display:grid;gap:2px}
.p10-rail li{counter-increment:p10r}
.p10-rail a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;padding:7px 8px;border-radius:12px;text-decoration:none;font-size:14.5px;line-height:1.3;color:var(--ink-2)}
.p10-rail a:before{content:counter(p10r);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #c9d7f3;font-size:13px;font-weight:600;color:var(--blue-deep)}
.p10-rail a:hover{background:#fff;color:var(--ink)}
.p10-rail a:focus-visible{outline-offset:-3px}
.p10-body{min-width:0}

/* Fil rouge */
.p10-case{padding:28px 30px;border-radius:var(--radius);background:linear-gradient(150deg,#f7faff,#eaf0ff);border:1px solid #dbe6fb}
.p10-case>.p10-case-tag{display:inline-block;font-size:12.5px;font-weight:600;color:var(--blue-deep);background:#fff;border:1px solid #c9d7f3;border-radius:999px;padding:3px 11px;margin-bottom:12px!important}
.p10-case>p{font-size:16px;color:#2e3b5a;line-height:1.6}
.p10-flow{margin:20px 0 10px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 10px;counter-reset:p10f}
.p10-flow-step{position:relative;padding:14px 12px;border-radius:16px;background:#fff;border:1px solid #c9d7f3;font-size:14.5px;line-height:1.4;font-weight:500;box-shadow:0 6px 16px #335cff12}
.p10-flow-step.p10-auto{border-top:4px solid var(--blue)}
.p10-flow-step.p10-human{border:2px solid var(--ink);border-top:4px solid var(--ink);background:#fff;color:var(--ink)}
.p10-flow-step:not(:nth-child(5)):after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:translateY(-50%) rotate(45deg)}
.p10-flow-branch{grid-column:2/-1;padding:10px 14px;border-radius:14px;border:1.5px dashed #9fb6ea;background:#fff;font-size:14px;color:var(--ink-2)}
.p10-flow-desc{font-size:14px!important;color:var(--muted)!important;margin:0!important}

/* Étapes */
.p10-step{position:relative;margin-top:64px;padding-left:72px;scroll-margin-top:100px}
.p10-step:before{content:"";position:absolute;left:23px;top:58px;bottom:-56px;width:2px;background:linear-gradient(#b5ccfc,#e3ecff)}
.p10-step#p10-e7:before{display:none}
.p10-step>.p10-num{position:absolute;left:0;top:-4px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0!important;background:var(--blue);color:#fff;font-size:20px;font-weight:600;box-shadow:0 8px 20px #335cff38,inset 0 1px 1px #ffffff70}
.p10-step>p{font-size:16px;color:#2e3b5a;line-height:1.62}
.p10-note{font-size:14.5px!important;color:var(--muted)!important}
.p10-out{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:18px!important;padding:12px 16px;border-radius:14px;background:var(--pale);border:1px solid var(--line);font-size:15px!important;color:var(--ink)!important}
.p10-out span{flex:none;font-size:12.5px;font-weight:600;color:#fff;background:var(--ink);border-radius:999px;padding:2px 10px}

.p10-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.p10-do,.p10-ex{padding:20px 22px;border-radius:20px;border:1px solid var(--line);background:#fff}
.p10-ex{background:var(--blue-mist);border-color:#d5e1f7}
.p10-ex-wide{margin-top:16px}
.p10-do h3,.p10-ex h3{font-size:16.5px;margin:0 0 8px}
.p10-ex h3{color:var(--blue-deep)}
.p10-do ul{margin:0;padding-left:18px;display:grid;gap:6px}
.p10-do li,.p10-ex p{font-size:15px;line-height:1.5;color:#2e3b5a}
.p10-ex p{margin:0}

/* Tableaux */
.p10-table-wrap{margin:8px 0 14px;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 26px #335cff0d;overflow-x:auto}
.p10-table{border-collapse:collapse;width:100%}
.p10-table caption{caption-side:top;text-align:left;padding:14px 16px 6px;font-weight:600;font-size:15px;color:var(--ink)}
.p10-table th,.p10-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #e6edf8;font-size:15px;line-height:1.45}
.p10-table thead th{background:var(--pale);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.p10-table tbody th{font-weight:500;color:var(--ink)}
.p10-table td{color:#2e3b5a}
.p10-table tbody tr:last-child>*{border-bottom:0}
.p10-who-human{color:var(--ink)!important;font-weight:650}

.p10-kpis{margin:10px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.p10-kpis li{padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px #335cff0d}
.p10-kpis strong{display:block;font-size:15.5px;line-height:1.35;margin-bottom:6px}
.p10-kpis span{display:block;font-size:14px;color:var(--muted)}

.p10-questions{margin:10px 0 0;padding:0;list-style:none;counter-reset:p10q;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p10-questions li{counter-increment:p10q;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:#fff;font-size:15px;line-height:1.5;color:#2e3b5a}
.p10-questions li:before{content:"Q" counter(p10q);display:inline-block;margin-right:8px;font-size:12.5px;font-weight:600;color:var(--blue-deep);background:var(--blue-soft);border-radius:999px;padding:1px 8px}
.p10-questions strong{color:var(--ink)}

.p10-check{margin-top:6px;padding:22px 24px;border-radius:20px;background:#fff;border:1px solid #c9d7f3;box-shadow:0 10px 26px #335cff0d}
.p10-check h3{font-size:18px;margin:0 0 12px}
.p10-check ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.p10-check li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.45;color:#2e3b5a}
.p10-check li:before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:6px;border:2px solid var(--blue);background:var(--blue-mist)}
.p10-check li:after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg)}

.p10-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.p10-roles section{padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px #335cff0d}
.p10-roles h3{font-size:17px;margin:0 0 8px}
.p10-roles p{font-size:15px;line-height:1.5;color:#2e3b5a;margin:0}
.p10-sub{font-size:19px;margin:30px 0 10px}
.p10-usage{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.p10-usage li{padding:12px 16px;border-left:3px solid var(--blue);background:var(--pale);border-radius:0 14px 14px 0;font-size:15.5px;line-height:1.5;color:#2e3b5a}

.p10-sheet{margin-top:28px;padding:26px;border-radius:var(--radius);background:linear-gradient(150deg,#f7faff,#eaf0ff);border:1px solid #dbe6fb}
.p10-sheet h3{font-size:20px;margin:0 0 6px}
.p10-sheet>p{font-size:15px;color:var(--muted)}
.p10-sheet dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p10-sheet dl div{background:#fff;border:1px solid #d9e4f9;border-radius:14px;padding:12px 14px}
.p10-sheet dt{font-weight:600;font-size:14.5px}
.p10-sheet dd{margin:2px 0 0;font-size:14px;color:var(--muted);line-height:1.45}

.p10-measure{margin-top:64px;padding:26px 28px;border-radius:var(--radius);border:1px dashed #b5ccfc;background:#fff}
.p10-measure h2{font-size:clamp(22px,2.4vw,28px)}
.p10-measure p{margin:0;font-size:15.5px;line-height:1.62;color:#2e3b5a}
.p10-end{margin-top:40px;padding:28px 30px;border-radius:var(--radius);background:linear-gradient(150deg,#f3f7ff,#e3ecff);border:1px solid #c9d7f3}
.p10-end>p{font-size:16px;color:#2e3b5a;line-height:1.6}
.p10-end-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Tablette */
@media (max-width:1099px){
  .p10-layout{grid-template-columns:1fr;gap:28px}
  .p10-rail{position:static}
  .p10-rail ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
  .p10-flow{grid-template-columns:1fr;gap:12px}
  .p10-flow-step:not(:nth-child(5)):after{right:auto;left:24px;top:auto;bottom:-11px;transform:rotate(135deg)}
  .p10-flow-branch{grid-column:1}
  .p10-kpis{grid-template-columns:1fr}
}
/* Mobile */
@media (max-width:760px){
  .p10-table td:before{content:attr(data-label) " : ";font-weight:600;color:var(--muted)}
  .p10-rail ol{grid-template-columns:1fr}
  .p10-case,.p10-sheet,.p10-measure,.p10-end{padding:22px 18px}
  .p10-step{padding-left:0;margin-top:52px}
  .p10-step:before{display:none}
  .p10-step>.p10-num{position:static;width:42px;height:42px;font-size:18px;margin-bottom:12px!important}
  .p10-pair,.p10-questions,.p10-roles,.p10-sheet dl{grid-template-columns:1fr}
  .p10-table th,.p10-table td{padding:10px 12px;font-size:14.5px}
  /* Tableaux empilés */
  .p10-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .p10-table,.p10-table tbody,.p10-table tr,.p10-table th,.p10-table td{display:block}
  .p10-table caption{display:block}
  .p10-table tr{padding:10px 0;border-bottom:1px solid #e6edf8}
  .p10-table tbody tr:last-child{border-bottom:0}
  .p10-table th,.p10-table td{border:0;padding:3px 14px}
  .p10-table tbody th{font-weight:600}
}