/* Article 03 — formation handover logiciel personnalisé. Sélecteurs préfixés par .p03. */
.p03{--p03-w:min(var(--wrap),calc(100% - 2*var(--gutter)));color:var(--ink)}
.p03 a{color:var(--blue-deep)}
.p03 .m-button{color:#fff}
.p03 .m-pill{color:#294ca7}
.p03 h1,.p03 h2,.p03 h3,.p03 h4{font-weight:450;letter-spacing:-.035em;line-height:1.12;margin:0}
.p03 p,.p03 li,.p03 td{color:#2e3b5a}
.p03 strong,.p03 b{color:var(--ink);font-weight:600}

/* Héros : texte posé sur la zone claire de l’illustration */
.p03-hero{width:var(--p03-w);margin:28px auto 0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-radius:calc(var(--radius) + 8px);overflow:hidden;background:linear-gradient(120deg,#ffffff 0,#f3f7ff 60%,#e7efff 100%);border:1px solid #e1eafa;min-height:560px}
.p03-hero-art{margin:0;position:absolute;inset:0 0 0 30%;display:flex;align-items:center}
.p03-hero-art img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
.p03-hero-art figcaption{position:absolute;right:18px;bottom:14px;font-size:12px;color:var(--muted);background:#ffffffd9;padding:4px 10px;border-radius:999px}
.p03-hero-copy{position:relative;z-index:1;padding:56px 0 56px 56px;max-width:600px;align-self:center}
.p03-hero h1{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.045em;margin:18px 0 22px}
.p03-hl{display:inline;background:linear-gradient(transparent 58%,#cddcff 58%);padding:0 .08em}
.p03-lead{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.6;margin:0 0 24px;text-shadow:0 0 18px #fff}

/* Sections */
.p03-section{width:var(--p03-w);margin:88px auto 0}
.p03-head{max-width:780px;margin-bottom:30px}
.p03-head h2{font-size:clamp(28px,3.4vw,40px);margin:8px 0 16px}
.p03-head p{font-size:17px;margin:0}
.p03-eyebrow{font-size:13px;font-weight:600;color:var(--blue);margin:0}
.p03-small{font-size:14.5px;color:var(--muted)!important;max-width:760px}

/* Matrice des rôles */
.p03-matrix-wrap{position:relative;overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.p03-matrix{width:100%;border-collapse:collapse;min-width:600px;font-size:15.5px}
.p03-matrix caption{text-align:left;padding:18px 22px 4px;font-size:13.5px;color:var(--muted)}
.p03-matrix th,.p03-matrix td{padding:14px 22px;border-bottom:1px solid #edf2fb;text-align:left}
.p03-matrix td{text-align:center;color:var(--muted);width:18%}
.p03-matrix thead th{font-size:13px;font-weight:600;color:var(--ink);text-align:center}
.p03-matrix thead th:first-child{text-align:left;color:var(--muted)}
.p03-matrix tbody th{font-weight:500;color:var(--ink)}
.p03-matrix tbody tr:last-child>*{border-bottom:0}
.p03-matrix tbody tr:hover{background:#f8fbff}
.p03-dot{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--blue);vertical-align:middle}
.p03-dot.is-full{background:var(--blue);box-shadow:0 0 0 4px #335cff1f}

/* Onglets / programmes */
.p03-tablist{display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--blue-soft);width:max-content;max-width:100%;margin-bottom:18px;overflow-x:auto}
.p03-tablist[hidden]{display:none}
.p03-tablist button:focus-visible{outline-offset:-3px}
.p03-tablist button{border:0;background:transparent;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:500;color:#294ca7;cursor:pointer;white-space:nowrap}
.p03-tablist button[aria-selected="true"]{background:#fff;color:var(--blue);box-shadow:0 4px 12px #335cff26}
.p03-panel{padding:32px;border-radius:var(--radius);border:1px solid #d9e5fb;background:var(--glass);margin-bottom:18px}
.p03-panel[hidden]{display:none}
.p03-panel:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.p03-panel h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:22px;max-width:820px}
.p03-role{display:block;font-size:13px;font-weight:600;color:#294ca7;letter-spacing:0;margin-bottom:8px}
.p03-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.p03-panel h4{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink);margin:0 0 8px}
.p03-panel h4:not(:first-child){margin-top:22px}
.p03-panel p{margin:0}
.p03-panel ul{margin:0;padding-left:20px;display:grid;gap:6px}
.p03-ex{list-style:none;padding:0!important}
.p03-ex li{padding:12px 14px;border-radius:var(--radius-sm);background:#fff;border:1px solid #dfe8fa}
.p03-check{margin-top:20px!important;padding:14px 16px;border-radius:var(--radius-sm);background:var(--blue);color:#fff!important}
.p03-check b{color:#fff}

/* Méthode des exercices */
.p03-method{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px 40px;align-items:start}
.p03-method .p03-head{grid-column:1/-1}
.p03-method-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.p03-method-steps li{counter-increment:s;position:relative;padding:16px 18px 16px 62px;border-bottom:1px solid var(--line)}
.p03-method-steps li:before{content:counter(s);position:absolute;left:12px;top:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:600}
.p03-sample{padding:26px;border-radius:var(--radius);background:var(--ink);position:sticky;top:100px}
.p03-sample p{color:#dfe7fb;margin:0 0 12px;font-size:15.5px}
.p03-sample b{color:#fff}
.p03-sample h3{color:#fff;font-size:21px;margin:8px 0 16px}
.p03-sample-tag{display:inline-block;font-size:12.5px!important;font-weight:600;padding:4px 10px;border-radius:999px;background:#ffffff1f;color:#9fbaff!important;margin:0!important}

/* Niveaux */
.p03-levels{margin:0 0 24px;padding:24px;border-radius:var(--radius);background:linear-gradient(170deg,#f8fbff,#eef4ff);border:1px solid #e1eafa}
.p03-levels svg{display:block;width:100%;height:auto}
.p03-levels figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.p03-proofs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.p03-proofs p{margin:0;padding:20px 22px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff}
.p03-proofs p:last-child{background:var(--pale);border-style:dashed}

/* Tableau des supports */
.p03-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.p03-table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
.p03-table caption{text-align:left;padding:16px 20px 0;font-size:13px;color:var(--muted)}
.p03-table th,.p03-table td{padding:13px 20px;text-align:left;vertical-align:top;border-bottom:1px solid #edf2fb}
.p03-table thead th{font-size:13px;font-weight:600;color:var(--muted)}
.p03-table tbody th{font-weight:600;color:var(--ink)}
.p03-table td:nth-child(2){color:var(--blue-deep);white-space:nowrap}
.p03-table tr:last-child>*{border-bottom:0}

/* Frise des premières utilisations */
.p03-timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.p03-timeline:before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:linear-gradient(90deg,#9fbaff,#335cff)}
.p03-timeline li{position:relative;padding-top:44px}
.p03-timeline li:before{content:"";position:absolute;top:6px;left:0;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 0 0 5px #fff}
.p03-timeline h3{font-size:18px;margin-bottom:8px}
.p03-timeline p{margin:0;font-size:15px}

/* Mexar et liens */
.p03-mexar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:start}
.p03-mexar-panel{padding:40px;border-radius:calc(var(--radius) + 6px);background:radial-gradient(circle at 100% 0,#d3e1ff 0,transparent 50%),linear-gradient(150deg,#fff,#eef4ff);border:1px solid #d7e3fb;box-shadow:var(--shadow)}
.p03-mexar-panel h2{font-size:clamp(26px,3vw,34px);margin:8px 0 16px}
.p03-mexar-panel p{margin:0 0 14px}
.p03-related h2{font-size:20px;margin-bottom:12px}
.p03-related ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.p03-related a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:15.5px}
.p03-related a:hover{color:var(--blue)}

@media(max-width:1060px){
  .p03-timeline{grid-template-columns:1fr;gap:0;padding-left:34px}
  .p03-timeline:before{left:9px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,#9fbaff,#335cff)}
  .p03-timeline li{padding:0 0 24px}
  .p03-timeline li:before{left:-34px;top:2px}
  .p03-mexar{grid-template-columns:1fr}
}
@media(max-width:900px){
  .p03-hero{min-height:0;display:flex;flex-direction:column}
  .p03-hero-art{position:relative;inset:auto;display:block}
  .p03-hero-art img{height:auto;aspect-ratio:16/9;object-position:70% 50%}
  .p03-hero-copy{padding:28px 28px 8px;max-width:none}
  .p03-panel-grid,.p03-proofs,.p03-method{grid-template-columns:1fr}
  .p03-sample{position:static}
}
@media(max-width:620px){
  .p03-section{margin-top:64px}
  .p03-hero-copy{padding:22px 20px 4px}
  .p03-panel,.p03-mexar-panel{padding:22px}
  .p03-levels{padding:12px}
  .p03-tablist{border-radius:var(--radius-sm)}
  .p03-tablist button{padding:9px 13px;font-size:14px}
}

/* Niveaux d’acquisition (schéma HTML) */
.p03-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.p03-steps li{border-radius:var(--radius-sm);padding:16px 18px;display:flex;flex-direction:column;gap:6px;border:1px solid #c9d9fb}
.p03-steps .n{font-weight:600;font-size:14px}
.p03-steps .t{font-size:16px;line-height:1.3}
.p03-steps em{font-style:normal;font-size:13px;margin-top:auto}
.p03-steps .lv1{min-height:90px;background:#eef3ff}
.p03-steps .lv2{min-height:120px;background:#dfe8ff}
.p03-steps .lv3{min-height:160px;background:linear-gradient(150deg,#335cff,#2447e0);border-color:transparent}
.p03-steps .lv4{min-height:200px;background:var(--ink);border-color:transparent}
.p03-steps .lv1 *,.p03-steps .lv2 *{color:#253964}
.p03-steps .lv3 *,.p03-steps .lv4 .n,.p03-steps .lv4 .t{color:#fff}
.p03-steps .lv4 em{color:#9fbaff}
@media(max-width:620px){
  .p03-steps{grid-template-columns:1fr;align-items:stretch}
  .p03-steps li{min-height:0!important;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .p03-steps em{margin-top:0;flex-basis:100%}
}
@media(max-width:900px){.p03-hero-art figcaption{position:static;display:block;margin:0 20px 16px;padding:0;background:none}}
.p03-tablist{scrollbar-width:none}
.p03-tablist::-webkit-scrollbar{display:none}
@media(max-width:620px){.p03-tablist{width:100%;gap:2px;padding:4px}.p03-tablist button{flex:1;padding:9px 6px;font-size:13.5px}}

/* Matrice : colonne des thèmes collante lors du défilement horizontal */
.p03-matrix tbody th,.p03-matrix thead th:first-child{position:sticky;left:0;z-index:1;background:#fff;text-align:left}
.p03-matrix tbody tr:hover th{background:#f8fbff}
@media(max-width:620px){
  .p03-matrix{min-width:540px;font-size:14.5px}
  .p03-matrix th,.p03-matrix td{padding:12px 14px}
  .p03-matrix tbody th,.p03-matrix thead th:first-child{width:150px;min-width:150px;box-shadow:6px 0 10px -8px #101d4233}
}
/* Distinction niveaux / paliers et grille d’observation */
.p03-distinct{margin:22px 0 0;padding:18px 22px;border-left:3px solid var(--blue);background:var(--pale);border-radius:0 var(--radius-sm) var(--radius-sm) 0;max-width:900px}
.p03-grid-title{font-size:22px;margin:36px 0 6px}
.p03-obs-wrap{margin:10px 0 16px;position:relative}
.p03-obs{min-width:760px}
.p03-obs td:nth-child(2){color:#2e3b5a;white-space:normal}
.p03-obs td:nth-child(3),.p03-obs td:nth-child(4){text-align:center;font-weight:600;color:var(--ink)}
.p03-obs td.is-gap{background:var(--blue-soft);color:#1d3aa8}
.p03-obs td.is-gap small{display:block;font-size:12px;font-weight:500}
.p03-proofs{margin-top:20px}
.p03-matrix caption{position:sticky;left:0;width:max-content;max-width:calc(100vw - 2*var(--gutter) - 2px)}