/* coulisses.css : onglet « En coulisses » des fiches module.
   Schémas de flux linéaires en SVG (client, sources, moteur, ERP), mêmes effets que l'espace Synergies :
   comètes le long des flux, halos, anneaux orbitaux, entrée échelonnée des nœuds.
   Un écran, aucun défilement : le schéma se met à l'échelle, le texte d'accompagnement reste en HTML. */

.fx-tabbody.t-coulisses{overflow:hidden;padding:0}
.fx-co{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}

/* ---- en-tête : choix du schéma + lecture ---- */
.co-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.co-steps{display:flex;gap:6px;flex-wrap:wrap}
.co-step{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:50px;background:rgba(255,255,255,.85);border:1px solid var(--line);font:700 .8rem 'Miriam Libre',sans-serif;color:var(--navy);transition:transform .3s var(--spring),background .25s,color .25s,box-shadow .25s}
.co-step i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--light-blue);color:var(--navy);font-size:.72rem;transition:background .25s,color .25s}
.co-step:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(22,52,103,.1)}
.co-step.on{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(22,52,103,.22)}
.co-step.on i{background:var(--grad);color:#fff}
.co-step.done i{background:rgba(126,239,160,.55)}
.co-ctl{display:flex;align-items:center;gap:6px}
.co-ctl button{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--navy);transition:transform .25s var(--spring),background .2s,color .2s}
.co-ctl button svg{width:16px;height:16px}
.co-ctl button:hover{background:var(--navy);color:#fff;transform:scale(1.08)}
.co-ctl .co-play{width:auto;padding:0 14px;gap:7px;display:inline-flex;align-items:center;border-radius:50px;font:700 .8rem 'Miriam Libre',sans-serif;background:var(--grad);color:#fff;border:0;height:34px}
.co-ctl .co-play[aria-pressed="true"]{background:var(--navy)}

/* ---- scène : schéma + texte ---- */
.co-stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,25vw,318px);gap:14px;min-height:0}
.co-canvas{position:relative;min-height:0;min-width:0;display:flex;border-radius:var(--r);background:radial-gradient(120% 90% at 50% 0%,#fff 0%,rgba(255,255,255,.78) 60%,rgba(240,246,248,.8) 100%);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.co-canvas::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(22,52,103,.09) 1px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 80%);pointer-events:none}
.co-svg{position:relative;width:100%;height:100%;display:block;animation:coFade .5s var(--ease) backwards}
@keyframes coFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.co-aside{min-height:0;min-width:0;display:flex;flex-direction:column;gap:9px;padding:15px 17px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;animation:coFade .5s var(--ease) backwards}
.co-k{font:700 .66rem 'Miriam Libre',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--c,#8cc63f)}
.co-aside h3{font:700 clamp(1.02rem,1.35vw,1.22rem)/1.18 'Miriam Libre',sans-serif;color:var(--navy);letter-spacing:-.01em}
.co-lead{font-size:.84rem;line-height:1.42;color:var(--txt)}
.co-pts{display:grid;gap:7px;margin-top:2px}
.co-pts li{position:relative;padding-left:22px;font-size:.8rem;line-height:1.38;color:var(--txt)}
.co-pts li::before{content:"";position:absolute;left:0;top:.28em;width:14px;height:14px;border-radius:50%;background:var(--grad);opacity:.9}
.co-pts li::after{content:"";position:absolute;left:4.6px;top:.55em;width:4px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translate(-1px,-1px)}
.co-note{margin-top:auto;font-size:.74rem;line-height:1.36;color:#6b7c99;padding-top:8px;border-top:1px dashed var(--line)}
.co-pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:3px 11px;border-radius:50px;background:rgba(126,239,160,.35);color:#1d6b3a;font:700 .68rem 'Miriam Libre',sans-serif}
.co-sw{display:flex;flex-wrap:wrap;gap:5px}
.co-sw button{padding:5px 11px;border-radius:50px;background:var(--light-blue);border:1px solid transparent;font:700 .73rem 'Miriam Libre',sans-serif;color:var(--navy);transition:background .2s,color .2s,transform .25s var(--spring)}
.co-sw button:hover{transform:translateY(-1px)}
.co-sw button.on{background:var(--navy);color:#fff}
.co-det{display:grid;gap:5px;padding:9px 11px;border-radius:12px;background:var(--light-blue);animation:coFade .4s var(--ease) backwards}
.co-det b{font:700 .78rem 'Miriam Libre',sans-serif;color:var(--navy)}
.co-det p{font-size:.77rem;line-height:1.38;color:var(--txt)}
.co-det small{display:block;font-size:.7rem;line-height:1.32;color:#6b7c99}
.co-go{align-self:flex-start}

/* ---- bandeau international ---- */
.co-intl{margin-left:88px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 14px;border-radius:50px;background:rgba(255,255,255,.88);border:1px solid var(--line);box-shadow:0 6px 18px rgba(22,52,103,.06);font-size:.76rem;color:var(--txt)}
.co-intl>b{display:inline-flex;align-items:center;gap:7px;font:700 .8rem 'Miriam Libre',sans-serif;color:var(--navy);white-space:nowrap}
.co-intl>b svg{width:17px;height:17px;color:var(--blue)}
.co-intl span.t{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 10px;border-radius:50px;background:var(--light-blue);font-weight:600;color:var(--navy);white-space:nowrap}
.co-intl span.t em{font-style:normal;font-weight:500;color:#6b7c99}

/* ---- éléments des schémas ---- */
.co-svg text{font-family:Barlow,sans-serif;pointer-events:none}
.co-svg .co-t{font-family:'Miriam Libre',sans-serif;font-weight:700;font-size:12.5px;fill:#163467}
.co-svg .co-s{font-size:11px;fill:#4d5e7e}
.co-svg .co-l{font-size:11px;font-weight:700;fill:#566684;letter-spacing:.01em}
.co-svg .co-cap{font-family:'Miriam Libre',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.16em;fill:#7a8aa6}
.co-svg .co-big{font-family:'Miriam Libre',sans-serif;font-weight:700;font-size:15px;fill:#163467}

.co-card{fill:#fff;stroke-width:1.8;filter:drop-shadow(0 6px 12px rgba(22,52,103,.09))}
.co-n{animation:coIn .6s var(--d,0s) cubic-bezier(.34,1.46,.64,1) backwards}
@keyframes coIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.co-base{fill:none;stroke-width:2.4;opacity:.45;stroke-linecap:round}
.co-dash{fill:none;stroke-width:2.8;stroke-dasharray:3 13;stroke-linecap:round;opacity:.9;animation:coFlow 1.6s linear infinite}
@keyframes coFlow{to{stroke-dashoffset:-32}}
.co-comet{offset-rotate:0deg;animation:coComet 2.6s linear infinite;filter:drop-shadow(0 0 7px rgba(19,180,226,.8))}
@keyframes coComet{from{offset-distance:0%}to{offset-distance:100%}}
.co-coin{offset-rotate:0deg;animation:coComet 10s linear infinite;filter:drop-shadow(0 0 9px rgba(240,165,0,.85))}

.co-halo{animation:coHalo 3.6s ease-in-out infinite}
@keyframes coHalo{0%,100%{opacity:.14}50%{opacity:.3}}
.co-orbit{fill:none;stroke-width:1.8;stroke-dasharray:7 9;transform-box:fill-box;transform-origin:center;animation:coSpin 18s linear infinite}
.co-orbit.r{animation-direction:reverse;animation-duration:26s}
@keyframes coSpin{to{transform:rotate(360deg)}}
.co-sweep{transform-box:view-box;animation:coSpin 7s linear infinite}
.co-pulse{animation:coPulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes coPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.co-zone{fill:rgba(255,255,255,.55);stroke:#b7c4d8;stroke-width:1.5;stroke-dasharray:6 6}
.co-col{filter:drop-shadow(0 8px 14px rgba(22,52,103,.12))}

@media(prefers-reduced-motion:reduce){
  .co-svg,.co-aside,.co-n,.co-dash,.co-comet,.co-coin,.co-halo,.co-orbit,.co-sweep,.co-pulse,.co-det{animation:none}
  .co-comet,.co-coin{display:none}
}

/* petits écrans : la page défile, le schéma passe au-dessus du texte */
@media(max-width:900px){
  .co-intl{margin-left:0}
  .fx-tabbody.t-coulisses{overflow:visible}
  .fx-co{height:auto}
  .co-stage{grid-template-columns:minmax(0,1fr)}
  .co-canvas{aspect-ratio:920/380}
  .co-aside{overflow:visible}
  .co-svg{height:auto}
}

/* fenêtres basses (portables) : le texte d'accompagnement se resserre, rien n'est coupé */
@media(min-width:901px) and (max-height:800px){
  .fx-co{gap:8px}
  .co-aside{padding:11px 14px;gap:6px}
  .co-aside h3{font-size:1rem}
  .co-lead{font-size:.78rem;line-height:1.34}
  .co-pts{gap:4px}
  .co-pts li{font-size:.75rem;line-height:1.3}
  .co-det{padding:7px 9px;gap:3px}
  .co-det p{font-size:.73rem;line-height:1.3}
  .co-det small{font-size:.67rem;line-height:1.28}
  .co-sw button{padding:4px 9px;font-size:.7rem}
  .co-note{font-size:.69rem;line-height:1.3;padding-top:6px}
  .co-pill{display:none}
  .co-intl{padding:6px 12px}
}

/* fenêtres très basses : l'introduction s'efface, le titre et les repères suffisent */
@media(min-width:901px) and (max-width:1200px) and (max-height:740px){
  .co-lead{display:none}
}