/* =====================================================================
   STUDIO REVO — V54 « Retrouver l'essence » (couche additive)
   Nouvelles sections : situations, expertises, scénarios contrastés,
   agent IA, données, types d'interfaces, points d'entrée, preuves.
   Ne modifie aucune règle existante ; tous les sélecteurs sont préfixés x54-.
   ===================================================================== */
:root{--x54-line:rgba(17,17,19,.12);--x54-line-2:rgba(17,17,19,.07);--x54-bg:#fff;--x54-ink:#17161A;--x54-mute:rgba(23,22,26,.72);--x54-acc:var(--burgundy,#671032)}

.x54-sec{padding:clamp(56px,7vw,96px) 0}
.x54-sec.tint{background:var(--paper-2,#EEF1F5)}
.x54-head{max-width:760px}
.x54-head h2{margin:0 0 14px}
.x54-head .intro{margin:0}
.x54-lede{font-size:1.06rem;line-height:1.6;color:var(--x54-mute);max-width:68ch;margin:14px 0 0}

/* ---- 1. Situations reconnaissables ---- */
.x54-reco{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid var(--x54-line)}
.x54-reco li{list-style:none;padding:28px 26px 30px 0;border-bottom:1px solid var(--x54-line);display:flex;flex-direction:column;gap:12px}
.x54-reco li:not(:nth-child(3n+1)){padding-left:26px;border-left:1px solid var(--x54-line-2)}
.x54-reco q{quotes:"«\00a0" "\00a0»";font-size:1.12rem;line-height:1.42;font-weight:600;color:var(--x54-ink);letter-spacing:-.005em}
.x54-reco p{margin:0;font-size:.97rem;line-height:1.58;color:var(--x54-mute)}
.x54-reco .x54-how{color:var(--x54-ink)}
.x54-reco .x54-how b{font-weight:600;color:var(--x54-acc)}
.x54-reco a{margin-top:auto;font-size:.92rem;font-weight:600;color:var(--x54-acc);text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:1px}
.x54-reco a:hover{opacity:.8}
.x54-matur{margin:26px 0 0;font-size:.98rem;line-height:1.6;color:var(--x54-mute);max-width:80ch}
.x54-matur a{color:var(--x54-acc);font-weight:600}
@media (max-width:980px){.x54-reco{grid-template-columns:repeat(2,1fr)}.x54-reco li:not(:nth-child(3n+1)){padding-left:0;border-left:0}.x54-reco li:nth-child(2n){padding-left:24px;border-left:1px solid var(--x54-line-2)}}
@media (max-width:640px){.x54-reco{grid-template-columns:1fr}.x54-reco li,.x54-reco li:nth-child(2n){padding:22px 0;border-left:0}}

/* ---- 2. Six expertises ---- */
.x54-xp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.x54-xp article{background:var(--x54-bg);border:1px solid var(--x54-line);border-top:3px solid var(--x54-acc);border-radius:4px 4px 10px 10px;padding:26px 24px 24px;display:flex;flex-direction:column}
.x54-xp h3{font-size:1.14rem;line-height:1.3;margin:0 0 10px}
.x54-xp p{margin:0 0 14px;font-size:.96rem;line-height:1.58;color:var(--x54-mute)}
.x54-xp ul{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.x54-xp ul li{font-size:.8rem;line-height:1.3;padding:5px 9px;border-radius:5px;background:var(--paper-2,#EEF1F5);color:var(--x54-ink)}
.x54-xp .x54-more{margin-top:auto;font-size:.92rem;font-weight:600;color:var(--x54-acc);text-decoration:none}
.x54-xp .x54-more:hover{text-decoration:underline}
@media (max-width:980px){.x54-xp{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.x54-xp{grid-template-columns:1fr}}

/* ---- 3. Scénarios contrastés (ciblé → ambitieux) ---- */
.x54-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.x54-tier{display:flex;flex-direction:column;gap:14px}
.x54-tier-h{padding:0 0 12px;border-bottom:2px solid var(--x54-line);display:flex;flex-direction:column;gap:4px}
.x54-tier:nth-child(2) .x54-tier-h{border-bottom-color:rgba(103,16,50,.45)}
.x54-tier:nth-child(3) .x54-tier-h{border-bottom-color:var(--x54-acc)}
.x54-tier-h b{font-size:1rem;color:var(--x54-ink)}
.x54-tier-h span{font-size:.88rem;color:var(--x54-mute)}
.x54-case{background:var(--x54-bg);border:1px solid var(--x54-line);border-radius:10px;overflow:hidden}
.x54-case summary{list-style:none;cursor:pointer;padding:20px 20px 18px;display:block}
.x54-case summary::-webkit-details-marker{display:none}
.x54-case summary h3{font-size:1.04rem;line-height:1.35;margin:0 0 8px}
.x54-case summary p{margin:0;font-size:.93rem;line-height:1.55;color:var(--x54-mute)}
.x54-case summary .x54-open{display:inline-block;margin-top:12px;font-size:.86rem;font-weight:600;color:var(--x54-acc)}
.x54-case summary .x54-open::after{content:" +";}
.x54-case[open] summary .x54-open::after{content:" −"}
.x54-case summary:focus-visible{outline:2px solid var(--x54-acc);outline-offset:-2px}
.x54-case dl{margin:0;padding:4px 20px 20px;border-top:1px solid var(--x54-line-2)}
.x54-case dl div{padding:10px 0;border-bottom:1px solid var(--x54-line-2)}
.x54-case dl div:last-child{border-bottom:0}
.x54-case dt{font-size:.78rem;font-weight:600;color:var(--x54-acc);margin:0 0 3px}
.x54-case dd{margin:0;font-size:.92rem;line-height:1.55;color:var(--x54-ink)}
.x54-case dd.x54-lim{color:var(--x54-mute)}
.x54-note{margin:22px 0 0;font-size:.86rem;line-height:1.55;color:var(--x54-mute);max-width:80ch}
@media (max-width:980px){.x54-scale{grid-template-columns:1fr;gap:34px}}

/* ---- 4. Points d'entrée de la méthode ---- */
.x54-method{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.x54-method figure{margin:0}
.x54-method img{width:100%;height:auto;border-radius:12px;display:block}
.x54-entry{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}
.x54-entry div{border:1px solid var(--x54-line);border-radius:10px;padding:16px 16px 18px;background:var(--x54-bg)}
.x54-entry b{display:block;font-size:.95rem;margin:0 0 6px;color:var(--x54-ink)}
.x54-entry span{display:block;font-size:.86rem;line-height:1.5;color:var(--x54-mute)}
.x54-entry-t{margin:46px 0 0;font-size:1.2rem}
@media (max-width:1100px){.x54-entry{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.x54-method{grid-template-columns:1fr}.x54-entry{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.x54-entry{grid-template-columns:1fr}}

/* ---- 5. Preuves disponibles ---- */
.x54-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border-top:1px solid var(--x54-line)}
.x54-proof div{padding:24px 22px 26px 0;border-bottom:1px solid var(--x54-line)}
.x54-proof div+div{padding-left:22px;border-left:1px solid var(--x54-line-2)}
.x54-proof h3{font-size:1.02rem;margin:0 0 8px}
.x54-proof p{margin:0 0 10px;font-size:.93rem;line-height:1.55;color:var(--x54-mute)}
.x54-proof a{font-size:.9rem;font-weight:600;color:var(--x54-acc)}
@media (max-width:980px){.x54-proof{grid-template-columns:repeat(2,1fr)}.x54-proof div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:600px){.x54-proof{grid-template-columns:1fr}.x54-proof div,.x54-proof div+div{padding:20px 0;border-left:0}}

/* ---- 6. Agent IA : trois notions + cas complet ---- */
.x54-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.x54-three div{border:1px solid var(--x54-line);border-radius:10px;padding:22px;background:var(--x54-bg)}
.x54-three h3{font-size:1.04rem;margin:0 0 8px}
.x54-three p{margin:0;font-size:.93rem;line-height:1.55;color:var(--x54-mute)}
.x54-three .x54-ex{margin-top:10px;color:var(--x54-ink)}
.x54-three div:last-child{border-color:rgba(103,16,50,.45);box-shadow:inset 0 3px 0 var(--x54-acc)}
@media (max-width:860px){.x54-three{grid-template-columns:1fr}}

.x54-agent{margin-top:44px;border:1px solid var(--x54-line);border-radius:14px;background:var(--x54-bg);overflow:hidden}
.x54-agent-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:18px 22px;border-bottom:1px solid var(--x54-line);background:#FAFAFB}
.x54-agent-top h3{margin:0;font-size:1.08rem}
.x54-agent-top span{font-size:.82rem;color:var(--x54-mute)}
.x54-agent-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.x54-steps{margin:0;padding:10px 22px 18px;list-style:none;counter-reset:x54s}
.x54-steps li{counter-increment:x54s;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--x54-line-2)}
.x54-steps li:last-child{border-bottom:0}
.x54-steps li::before{content:counter(x54s);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:600;border:1px solid var(--x54-line);color:var(--x54-ink)}
.x54-steps b{font-size:.96rem;color:var(--x54-ink)}
.x54-steps p{grid-column:2/4;margin:0;font-size:.9rem;line-height:1.5;color:var(--x54-mute)}
.x54-tag{font-size:.74rem;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap;border:1px solid}
.x54-tag-r{color:#2E5E86;border-color:rgba(46,94,134,.35);background:rgba(46,94,134,.07)}
.x54-tag-a{color:#3A7657;border-color:rgba(58,118,87,.35);background:rgba(58,118,87,.08)}
.x54-tag-h{color:var(--x54-acc);border-color:rgba(103,16,50,.4);background:rgba(103,16,50,.07)}
.x54-ctrl{padding:20px 22px;border-left:1px solid var(--x54-line);background:#FAFAFB}
.x54-ctrl h4{margin:0 0 10px;font-size:.92rem}
.x54-ctrl ul{margin:0 0 18px;padding:0 0 0 18px}
.x54-ctrl li{font-size:.88rem;line-height:1.5;color:var(--x54-ink);margin:0 0 6px}
.x54-ctrl ul.x54-no li{color:var(--x54-mute)}
.x54-agent-foot{padding:14px 22px;border-top:1px solid var(--x54-line);font-size:.85rem;line-height:1.5;color:var(--x54-mute)}
@media (max-width:900px){.x54-agent-grid{grid-template-columns:1fr}.x54-ctrl{border-left:0;border-top:1px solid var(--x54-line)}}
@media (max-width:520px){.x54-steps li{grid-template-columns:26px minmax(0,1fr)}.x54-steps .x54-tag{grid-column:2;justify-self:start}}

/* ---- 7. Données et aide à la décision ---- */
.x54-data{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border:1px solid var(--x54-line);border-radius:12px;background:var(--x54-bg);overflow:hidden}
.x54-data div{padding:22px 20px;position:relative}
.x54-data div+div{border-left:1px solid var(--x54-line)}
.x54-data b{display:block;font-size:.98rem;margin:0 0 6px;color:var(--x54-ink)}
.x54-data p{margin:0;font-size:.9rem;line-height:1.52;color:var(--x54-mute)}
.x54-data div:not(:last-child)::after{content:"";position:absolute;right:-6px;top:28px;width:10px;height:10px;border-top:1px solid var(--x54-acc);border-right:1px solid var(--x54-acc);transform:rotate(45deg);background:var(--x54-bg);z-index:1}
@media (max-width:900px){.x54-data{grid-template-columns:repeat(2,1fr)}.x54-data div:nth-child(3){border-left:0}.x54-data div:nth-child(n+3){border-top:1px solid var(--x54-line)}.x54-data div::after{display:none}}
@media (max-width:520px){.x54-data{grid-template-columns:1fr}.x54-data div+div{border-left:0;border-top:1px solid var(--x54-line)}}
.x54-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:30px}
.x54-cols h3{font-size:1.02rem;margin:0 0 10px}
.x54-cols ul{margin:0;padding:0 0 0 18px}
.x54-cols li{font-size:.94rem;line-height:1.55;margin:0 0 6px;color:var(--x54-ink)}
@media (max-width:760px){.x54-cols{grid-template-columns:1fr}}

/* ---- 8. Encadré de distinction (automatisation / intégration) ---- */
.x54-aside{margin-top:28px;padding:18px 20px;border-left:3px solid var(--x54-acc);background:var(--x54-bg);border-radius:0 8px 8px 0;max-width:820px}
.x54-aside b{display:block;margin:0 0 4px;font-size:.95rem}
.x54-aside p{margin:0;font-size:.94rem;line-height:1.55;color:var(--x54-mute)}
.x54-aside a{color:var(--x54-acc);font-weight:600}

/* ---- 9. Parcours multi-équipes (automatisation avancée) ---- */
.x54-lanes{margin-top:34px;border:1px solid var(--x54-line);border-radius:12px;background:var(--x54-bg);overflow-x:auto}
.x54-lanes table{width:100%;min-width:760px;border-collapse:collapse}
.x54-lanes th,.x54-lanes td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--x54-line-2);font-size:.9rem;line-height:1.48}
.x54-lanes thead th{font-size:.78rem;font-weight:600;color:var(--x54-acc);background:#FAFAFB}
.x54-lanes tbody th{font-weight:600;white-space:nowrap;color:var(--x54-ink)}
.x54-lanes td.x54-h{color:var(--x54-acc);font-weight:600}
.x54-lanes tr:last-child th,.x54-lanes tr:last-child td{border-bottom:0}

/* ---- 10. Types d'interfaces ---- */
.x54-types{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:32px}
.x54-types div{border:1px solid var(--x54-line);border-radius:10px;padding:18px;background:var(--x54-bg);display:flex;flex-direction:column;gap:6px}
.x54-types b{font-size:.98rem;color:var(--x54-ink)}
.x54-types p{margin:0;font-size:.88rem;line-height:1.5;color:var(--x54-mute)}
.x54-types em{font-style:normal;font-size:.8rem;color:var(--x54-ink);margin-top:auto;padding-top:8px;border-top:1px solid var(--x54-line-2)}
@media (max-width:1100px){.x54-types{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.x54-types{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.x54-types{grid-template-columns:1fr}}

/* ---- 11. Exemples d'optimisation variés ---- */
.x54-opt{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.x54-opt div{border:1px solid var(--x54-line);border-radius:10px;padding:20px 22px;background:var(--x54-bg)}
.x54-opt h3{font-size:1.02rem;margin:0 0 6px}
.x54-opt p{margin:0;font-size:.92rem;line-height:1.55;color:var(--x54-mute)}
.x54-opt .x54-sc{display:inline-block;margin:0 0 10px;font-size:.76rem;font-weight:600;color:var(--x54-acc)}
@media (max-width:760px){.x54-opt{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.x54-case summary,.x54-xp article{transition:none}}

/* ---- Ajustements après revue visuelle ---- */
.x54-sec h2{font-size:clamp(28px,3.3vw,42px);line-height:1.15;max-width:780px}
ul.x54-reco{padding:0;margin-left:0;margin-right:0}
#travailler .x54-entry-t{text-align:left}