/* ITIWE V4 — article « Anatomie d'un Collaborateur IA ». Composants propres à cette page. */
.art-sect{scroll-margin-top:104px;padding:var(--s16) 0 0}

.art-sect__index{display:block;font:500 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--vermillon);margin:0 0 var(--s3)}
.art-sect__title{display:flex;align-items:flex-start;gap:var(--s4);margin:0 0 var(--s8)}
.art-sect__glyph{flex:none;margin-top:6px;color:var(--ink)}
.lede{font:400 clamp(19px,1.7vw,22px)/1.55 var(--font-body);color:var(--ink);margin:0 0 var(--s6);max-width:60ch;text-wrap:pretty}
.pull{background:var(--paper-warm);border-left:3px solid var(--vermillon);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s6) var(--s8);margin:var(--s12) 0}
.pull p{font:400 italic clamp(20px,2.2vw,25px)/1.4 var(--font-display);color:var(--ink);margin:0;letter-spacing:-.012em}
.pull strong{font-style:normal;font-weight:600}

/* les six choses */
.six{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:var(--s8) 0 var(--s8)}
.six div{background:var(--paper-warm);border:1px solid var(--ink-10);border-radius:var(--r-sm);padding:18px 20px}
.six .n{display:block;font:500 italic 22px/1 var(--font-display);color:var(--vermillon);margin-bottom:10px}
.six b{display:block;font:600 15.5px/1.3 var(--font-body);margin-bottom:6px}
.six p{margin:0;font:400 14px/1.5 var(--font-body);color:var(--ink-60)}
@media(max-width:640px){.six{grid-template-columns:1fr}}

/* les sept étages — accordéon */
.hint{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);margin:var(--s8) 0 var(--s3)}
.floors{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--s8)}
.floor{border:1px solid var(--ink-10);border-left:3px solid var(--ink-20);border-radius:0 var(--r-sm) var(--r-sm) 0;background:color-mix(in srgb,var(--paper-warm) 55%,transparent);overflow:hidden;transition:border-color var(--t-base),background var(--t-base)}
.floor--top{border-left-color:var(--vermillon)}
.floor[data-open]{border-color:var(--ink-20);background:var(--paper-warm)}
.floor__head{width:100%;display:flex;align-items:center;gap:14px;padding:14px 18px;text-align:left;transition:background var(--t-fast)}
.floor__head:hover{background:var(--paper-deep)}
.floor__n{font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--ink-60);flex:none}
.floor--top .floor__n{color:var(--vermillon)}
.floor__t{font:500 clamp(18px,1.6vw,21px)/1.2 var(--font-display);letter-spacing:-.01em}
.floor__hint{margin-left:auto;font:400 13px/1.3 var(--font-body);color:var(--ink-60)}
.floor__chev{flex:none;display:flex;color:var(--ink-40);transition:transform var(--t-base)}
.floor[data-open] .floor__chev{transform:rotate(180deg)}
.floor__body{display:none}
.floor[data-open] .floor__body{display:block;animation:floorIn 240ms cubic-bezier(.2,0,0,1)}
@keyframes floorIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.floor[data-open] .floor__body{animation:none}}
.floor__inner{min-height:0}
.floor__inner p{margin:0;padding:0 18px 18px;font:400 16.5px/1.65 var(--font-body);color:var(--ink-80);max-width:62ch}
@media(max-width:640px){.floor__hint{display:none}}

/* trois causes */
.causes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:var(--s8) 0}
.causes div{background:var(--paper-warm);border:1px solid var(--ink-10);border-radius:var(--r-sm);padding:22px}
.causes .tag{display:block;font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--vermillon);margin-bottom:12px}
.causes b{display:block;font:500 20px/1.2 var(--font-display);margin-bottom:10px}
.causes p{margin:0;font:400 14.5px/1.55 var(--font-body);color:var(--ink-60)}
@media(max-width:760px){.causes{grid-template-columns:1fr}}

/* sélecteur commun — degrés de décision & paliers */
.picker{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s8) 0 var(--s3)}
.picker button{display:inline-flex;align-items:center;gap:9px;font:500 14.5px/1 var(--font-body);color:var(--ink-80);background:var(--paper-warm);border:1px solid var(--ink-10);border-radius:var(--r-sm);padding:11px 16px;transition:background var(--t-base),color var(--t-base),border-color var(--t-base)}
.picker button:hover{border-color:var(--ink-20)}
.picker button[aria-pressed="true"]{background:var(--ink-blue);border-color:var(--ink-blue);color:var(--paper-warm);font-weight:600}
.picker .i{font:500 italic 15px/1 var(--font-display);color:var(--vermillon)}
.picker button[aria-pressed="true"] .i{color:var(--paper-warm)}
.pane{background:var(--paper-warm);border:1px solid var(--ink-10);border-radius:var(--r-sm);padding:clamp(22px,3vw,30px);margin:0 0 var(--s8)}
.pane__tag{font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--vermillon);margin:0 0 var(--s3)}
.pane__t{font:500 clamp(21px,2.4vw,27px)/1.2 var(--font-display);letter-spacing:-.012em;margin:0 0 var(--s4)}
.pane p{margin:0 0 var(--s4);font:400 18px/1.65 var(--font-body);color:var(--ink-80)}
.pane__foot{margin:0;padding-top:14px;border-top:1px solid var(--ink-10);font:400 14px/1.5 var(--font-body);color:var(--ink-60)}
.pane__foot strong{font-weight:600;color:var(--ink)}

/* l'inversion — deux séquences */
.flip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);margin:var(--s8) 0}
.flip>div{border:1px solid var(--ink-10);border-radius:var(--r-sm);padding:24px}
.flip>div:first-child{background:var(--paper-deep);border-color:var(--paper-edge)}
.flip>div:last-child{background:var(--ink-blue);border-color:var(--ink-blue);color:var(--paper-warm)}
.flip .lbl{display:block;font:500 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:var(--ink-60)}
.flip>div:last-child .lbl{color:var(--on-blue-soft)}
.flip ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.flip li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font:400 15.5px/1.5 var(--font-body);color:var(--ink-80)}
.flip>div:last-child li{color:var(--on-blue)}
.flip li::before{counter-increment:s;content:counter(s);font:500 11px/1.5 var(--font-mono);color:var(--ink-60)}
.flip>div:last-child li::before{color:var(--on-blue-soft)}
.flip .out{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--paper-edge);font:400 italic 15px/1.5 var(--font-display);color:var(--ink-60)}
.flip>div:last-child .out{border-top-color:rgba(255,255,255,.2);color:#fff}
@media(max-width:760px){.flip{grid-template-columns:1fr}}

/* chute */
.closer{border-top:1px solid var(--ink-10);margin-top:var(--s12);padding-top:var(--s8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6)}
.closer__note{font:400 14px/1.5 var(--font-body);color:var(--ink-60);max-width:34ch}
.credit{margin:var(--s16) 0 0;padding-top:var(--s6);border-top:1px solid var(--ink-10);font:400 14px/1.6 var(--font-body);color:var(--ink-60);max-width:70ch}