/* Interconnexion & pilotage : deux pages, un même langage visuel. Le schéma cliquable
   (interop-flow) fonctionne sans JavaScript : tous les panneaux restent visibles tant que
   interop-flow.js n'a pas ajouté la classe is-enhanced. */
.interop-hero { padding:36px 0 64px; background:#f0f5fb; border-bottom:1px solid #dce5ef; }
.interop-hero .fil-ariane { margin-bottom:34px; font-size:13px; }
.interop-eyebrow { display:inline-block; margin-bottom:14px; padding:5px 12px; border-radius:999px; background:#1a2b5f; color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.interop-hero-grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(32px,6vw,80px); }
.trackoe .interop-hero h1 { margin:0 0 22px; font-size:clamp(36px,4.5vw,60px); line-height:1.08; letter-spacing:-.045em; }
.interop-lead { max-width:620px; color:#42536d; font-size:19px; line-height:1.75; }
.interop-lead p { margin:0 0 28px; }
.interop-promise { padding:32px; border-left:3px solid #3173bb; background:#fff; border-radius:0 16px 16px 0; }
.trackoe .interop-promise h2 { margin:0 0 18px; font-size:29px; line-height:1.2; }
.interop-promise p { color:#53627a; line-height:1.75; margin:0 0 20px; }
.interop-promise .text-link { font-size:14px; line-height:1.6; }
.trackoe .interop-section { padding-block:72px; scroll-margin-top:110px; }
.interop-heading { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,70px); align-items:start; margin-bottom:32px; }
.trackoe .interop-heading h2 { margin:0; font-size:clamp(28px,3vw,39px); line-height:1.18; letter-spacing:-.03em; }
.interop-intro,.interop-copy { color:#53627a; font-size:17px; line-height:1.75; }
.interop-intro p { margin:0; }
.interop-copy { max-width:84ch; margin-bottom:32px; }
.interop-copy p { margin:0; }

/* Hub : deux cartes vers les pages dédiées. */
.interop-hub-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:28px; }
.interop-hub-arrow { min-width:34px; }
.interop-hub-card { position:relative; display:flex; flex-direction:column; }
.interop-hub-card .schema-node-icon { margin-bottom:14px; }
.interop-hub-card { min-width:0; padding:32px; background:#f5f8fc; border:1px solid #d8e4f0; border-top:3px solid #3173bb; border-radius:14px; }
.interop-hub-card:nth-child(2) { background:#f1f7f4; border-color:#d1e4dc; border-top-color:#0f6f63; }
.interop-hub-kicker { display:inline-block; margin-bottom:12px; color:#0f6f63; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.trackoe .interop-hub-card h3 { margin:0 0 14px; font-size:27px; }
.interop-hub-card h3 a { color:inherit; text-decoration:none; }
.interop-hub-card h3 a::after { content:''; position:absolute; inset:0; }
.interop-hub-card { position:relative; }
.interop-hub-card-text { color:#53627a; font-size:16px; line-height:1.7; margin-bottom:22px; }
.interop-hub-card-text p { margin:0; }
.interop-hub-card .button { position:relative; z-index:1; max-width:100%; white-space:normal; text-align:start; line-height:1.5; }
.interop-hub-card .button>span { flex-shrink:0; }

/* Icônes et flèche du hub. */
.schema-node-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:14px; border-radius:10px; background:#e4ecf7; color:#1a2b5f; }
.schema-node-icon svg { width:24px; height:24px; }
.schema-arrow { display:flex; align-items:center; justify-content:center; min-width:34px; color:#55857e; }
.schema-arrow::before { content:''; width:100%; height:2px; background:linear-gradient(90deg,#a8c6bf 0%,#0f6f63 50%,#a8c6bf 100%); background-size:200% 100%; animation:schema-flow 2.4s linear infinite; }
.schema-arrow::after { content:'▸'; margin-left:-4px; }
@keyframes schema-flow { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* Schéma animé : un paquet de données parcourt les étapes, la ligne se remplit derrière lui
   et une bulle commente chaque étape avec un exemple concret. Sans JavaScript, toutes les
   étapes et toutes les bulles restent affichées dans l'ordre. */
.schema-tour { margin-top:10px; }
.schema-tour [hidden] { display:none !important; }
.schema-tour-stage { position:relative; padding-top:6px; }
.schema-tour-track { position:relative; z-index:1; display:grid; grid-template-columns:repeat(var(--steps,3),minmax(0,1fr)); gap:28px; margin:0; padding:0; list-style:none; }
.schema-tour-track::before { content:''; position:absolute; z-index:-1; top:32px; left:calc(100% / var(--steps,3) / 2); right:calc(100% / var(--steps,3) / 2); height:2px; background:repeating-linear-gradient(90deg,#9fbfb8 0 8px,transparent 8px 14px); }
.schema-tour.is-enhanced .schema-tour-track::before { display:none; }
.schema-stop { position:relative; min-width:0; margin:0; padding:0; text-align:center; }
.schema-tour.is-enhanced .schema-stop { cursor:pointer; }
.schema-stop>.schema-node-icon { position:relative; width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:#fff; border:2px solid #d8e4f0; color:#1a2b5f; transition:background-color .4s,border-color .4s,color .4s,box-shadow .4s,transform .4s; }
.schema-stop>.schema-node-icon svg { width:28px; height:28px; }
.schema-stop-index { display:block; margin-bottom:4px; color:#0f6f63; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.trackoe .schema-stop-title { display:block; margin-bottom:8px; color:#1a2b5f; font-size:19px; line-height:1.3; transition:color .3s; }
.trackoe main#contenu .schema-stop-text { max-width:32ch; margin:0 auto; color:#53627a; font-size:15px; line-height:1.6; text-align:center; hyphens:manual; }
.schema-stop.is-visited>.schema-node-icon { border-color:#0f6f63; color:#0f6f63; }
.schema-stop.is-active>.schema-node-icon { background:#1a2b5f; border-color:#1a2b5f; color:#fff; transform:scale(1.08); box-shadow:0 0 0 8px rgba(49,115,187,.14),0 12px 26px rgba(26,43,95,.25); }
.schema-tour.is-enhanced .schema-stop:not(.is-active) .schema-stop-title { color:#42536d; }
.schema-chip-list { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.schema-chip { display:inline-flex; align-items:center; gap:6px; margin:0; padding:4px 10px 4px 4px; border:1px solid #d8e4f0; border-radius:999px; background:#fff; color:#1a2b5f; font-size:13px; font-weight:600; line-height:1.25; text-align:left; }
.schema-chip .schema-node-icon { flex-shrink:0; width:24px; height:24px; margin:0; border-radius:50%; background:#e4ecf7; }
.schema-chip .schema-node-icon svg { width:14px; height:14px; }
.schema-stop-bubble { position:relative; margin:18px 0 0; padding:14px 16px; border:1px solid #d3e3db; border-radius:12px; background:#f1f7f4; color:#435970; font-size:14px; line-height:1.6; text-align:left; }
.schema-stop-bubble::before { content:''; position:absolute; top:-7px; left:50%; width:12px; height:12px; margin-left:-6px; background:#f1f7f4; border-left:1px solid #d3e3db; border-top:1px solid #d3e3db; transform:rotate(45deg); }
.schema-stop-bubble p { margin:0; }
.schema-tour.is-enhanced .schema-stop-bubble { display:none; }
.schema-tour-line,.schema-tour-fill,.schema-packet { position:absolute; left:0; top:0; pointer-events:none; }
.schema-tour-line { z-index:0; height:2px; background:#d8e4f0; transform:translateY(-50%); }
.schema-tour-fill { z-index:0; height:4px; border-radius:4px; background:repeating-linear-gradient(90deg,#0f6f63 0 10px,#3fa08f 10px 20px); background-size:40px 100%; transform:translateY(-50%); animation:schema-stream 1s linear infinite; transition:width .9s cubic-bezier(.6,0,.3,1),height .9s cubic-bezier(.6,0,.3,1); }
@keyframes schema-stream { to { background-position:40px 0; } }
.schema-packet { z-index:2; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:#3fa08f; box-shadow:0 0 0 5px rgba(63,160,143,.25),0 0 16px rgba(63,160,143,.85); transition:transform .9s cubic-bezier(.6,0,.3,1),opacity .3s; }
.schema-packet.is-arrived { opacity:0; }
.schema-tour.is-jumping .schema-packet,.schema-tour.is-jumping .schema-tour-fill,.schema-tour.is-jumping .schema-tour-bubble::before { transition:none; }
.schema-tour-bubble { position:relative; margin-top:28px; padding:20px 24px 24px; border:1px solid #d3e3db; border-radius:16px; background:#fff; box-shadow:0 14px 34px rgba(26,43,95,.1); }
.schema-tour-bubble::before { content:''; position:absolute; top:-9px; left:var(--tail-x,50%); width:16px; height:16px; margin-left:-8px; background:#fff; border-left:1px solid #d3e3db; border-top:1px solid #d3e3db; transform:rotate(45deg); transition:left .9s cubic-bezier(.6,0,.3,1); }
.schema-tour-bubble-label { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#0f6f63; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.schema-tour-bubble-label::before { content:''; width:8px; height:8px; border-radius:50%; background:#3fa08f; box-shadow:0 0 0 4px rgba(63,160,143,.2); }
.schema-tour-bubble-text { color:#1a2b5f; font-size:17px; line-height:1.65; }
.trackoe main#contenu .schema-tour-bubble-text p { margin:0; text-align:start; hyphens:manual; }
.schema-tour-bubble.is-changing .schema-tour-bubble-label,.schema-tour-bubble.is-changing .schema-tour-bubble-text { animation:schema-bubble-in .45s ease both; }
@keyframes schema-bubble-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.schema-tour-timer { position:absolute; left:24px; right:24px; bottom:10px; height:2px; overflow:hidden; border-radius:2px; background:#eef3f8; }
.schema-tour-timer::after { content:''; position:absolute; inset:0; background:#3fa08f; transform:scaleX(0); transform-origin:left; }
.schema-tour.is-playing .schema-tour-timer::after { animation:schema-timer var(--step-ms,5200ms) linear forwards; }
@keyframes schema-timer { to { transform:scaleX(1); } }
.schema-tour-controls { display:flex; align-items:center; gap:10px; margin-top:16px; }
.schema-tour-controls button { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 16px; border:1px solid #c9d7e6; border-radius:999px; background:#fff; color:#1a2b5f; font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.schema-tour-controls button:hover { border-color:#3173bb; }
.schema-tour-controls button:focus-visible,.schema-stop:focus-visible { outline:2px solid #3173bb; outline-offset:4px; border-radius:12px; }
.schema-tour-count { margin-left:auto; color:#667386; font-size:13px; font-weight:600; }
@media (prefers-reduced-motion:reduce) {
  .schema-tour-fill,.schema-packet,.schema-tour-bubble::before,.schema-stop>.schema-node-icon { transition:none; }
  .schema-tour-fill,.schema-arrow::before { animation:none; }
  .schema-tour-timer { display:none; }
}

/* Bascule API / fichiers (fonctionne sans JS via :checked). */
.interop-flow-switch { position:relative; }
.interop-flow-switch-input { position:absolute; opacity:0; pointer-events:none; }
.interop-flow-switch-label { display:inline-block; margin:0 10px 24px 0; padding:10px 20px; border:1px solid #d8e4f0; border-radius:999px; color:#42536d; font-size:15px; font-weight:600; cursor:pointer; }
.interop-flow-switch-input:checked+.interop-flow-switch-label { background:#1a2b5f; border-color:#1a2b5f; color:#fff; }
.interop-flow-switch-input:focus-visible+.interop-flow-switch-label { outline:2px solid #3173bb; outline-offset:2px; }
.interop-flow-pane { display:none; }
#mode-api:checked~#pane-api,#mode-fichiers:checked~#pane-fichiers { display:block; }
.interop-flow-pane-intro { max-width:70ch; color:#53627a; font-size:16px; line-height:1.7; margin:0 0 20px; }

.interop-usecases { background:#f7f9fb; }
.interop-cases .feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 32px; }
.trackoe .interop-cases .feature { padding:22px 0 0; border:0; border-top:2px solid #d7e2ed; border-radius:0; background:none; box-shadow:none; }
.trackoe .interop-cases .feature h3 { margin:0 0 12px; font-size:21px; line-height:1.3; }
.trackoe .interop-cases .feature p { margin:0; color:#53627a; font-size:16px; line-height:1.75; }
.interop-example { color:#435970; font-size:15px; line-height:1.75; margin-top:18px; }
.interop-example p { margin:0; }
.interop-note { margin-top:24px; padding-left:20px; border-left:2px solid #a8c6bf; font-size:14px; color:#53627a; line-height:1.7; }
.interop-note p { margin:0; }
.interop-insights { background:#eef5f2; }
.interop-indicators>p { max-width:86ch; margin:0 0 32px; color:#435970; font-size:17px; line-height:1.8; }
.interop-indicators .feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.trackoe .interop-indicators .feature { padding:24px; border:1px solid #d3e3db; border-radius:12px; background:#fff; box-shadow:none; }
.trackoe .interop-indicators .feature h3 { margin:0 0 14px; font-size:22px; line-height:1.3; }
.trackoe .interop-indicators .feature p { margin:0; font-size:16px; color:#53627a; line-height:1.7; }
.interop-project-steps ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin:0; padding:0; list-style:none; counter-reset:project; }
.interop-project-steps li { min-width:0; padding-top:18px; border-top:2px solid #d6e3e0; counter-increment:project; color:#53627a; font-size:16px; line-height:1.7; }
.interop-project-steps li::before { content:counter(project,decimal-leading-zero); display:block; margin-bottom:14px; color:#0f6f63; font-size:13px; font-weight:700; }
.interop-project-steps strong { color:#1a2b5f; }
.interop-project { padding:42px 0; background:#eaf0f8; scroll-margin-top:110px; }
.interop-project>.wrap { display:flex; align-items:center; gap:40px; justify-content:space-between; }
.interop-project .wrap>div { max-width:760px; font-size:20px; color:#1a2b5f; line-height:1.6; }
.interop-project p { margin:0; }
.interop-project .button { flex-shrink:0; }
.interop-teaser { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:30px; margin-top:32px; border:1px solid #d1dfeb; background:#f0f5fb; border-radius:14px; }
.trackoe .interop-teaser h3 { font-size:26px; margin:0 0 12px; }
.interop-teaser p { margin:0; max-width:780px; color:#53627a; font-size:17px; line-height:1.7; }
.interop-teaser>a { flex-shrink:0; }

@media(max-width:1050px) {
  .interop-hero-grid { gap:32px; }
  .interop-hub-grid { grid-template-columns:1fr; }
  .schema-arrow { display:none; }
  .schema-tour-track { gap:18px; }
  .interop-cases .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .interop-project-steps ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .interop-project>.wrap,.interop-teaser { align-items:flex-start; flex-direction:column; gap:22px; }
}
@media(max-width:760px) {
  .interop-hero { padding-block:24px 40px; }
  .interop-hero-grid,.interop-heading,.interop-hub-grid { grid-template-columns:1fr; gap:24px; }
  .interop-lead { font-size:17px; }
  .interop-promise { padding:24px; }
  .trackoe .interop-promise h2 { font-size:25px; }
  .trackoe .interop-section { padding-block:44px; }
  /* Schéma animé en colonne : la ligne devient verticale, la bulle s'ouvre sous l'étape active. */
  .schema-tour-track { grid-template-columns:1fr; gap:26px; }
  .schema-tour-track::before { top:32px; bottom:32px; left:31px; right:auto; width:2px; height:auto; background:repeating-linear-gradient(180deg,#9fbfb8 0 8px,transparent 8px 14px); }
  .schema-stop { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:16px; text-align:left; }
  .schema-stop>.schema-node-icon { grid-row:1 / span 6; margin:0; }
  .schema-stop>*:not(.schema-node-icon) { grid-column:2; }
  .trackoe main#contenu .schema-stop-text { max-width:none; margin:0; text-align:left; }
  .schema-chip-list { justify-content:flex-start; }
  .schema-stop-bubble::before { left:22px; }
  .schema-tour-line { width:2px; transform:translateX(-50%); }
  .schema-tour-fill { width:4px; transform:translateX(-50%); background:repeating-linear-gradient(180deg,#0f6f63 0 10px,#3fa08f 10px 20px); background-size:100% 40px; animation-name:schema-stream-v; }
  @keyframes schema-stream-v { to { background-position:0 40px; } }
  .schema-tour-bubble { display:none; }
  .schema-tour.is-enhanced .schema-stop.is-active .schema-stop-bubble { display:block; animation:schema-bubble-in .45s ease both; }
  .interop-cases .feature-grid,.interop-indicators .feature-grid,.interop-project-steps ol { grid-template-columns:1fr; gap:22px; }
  .interop-heading { margin-bottom:26px; }
  .interop-project .wrap>div { font-size:18px; }
  .interop-teaser { padding:24px; }
}