/* Output formats EN dans le style de /handoff-v4/ (SOCLE, 10/11/2026). Corps de page seulement : en-tête et pied restent au shell,
   la bande « Pick the output » (resource-closer, la conclusion propre de la page) reste celle de BRAND (resources.css).
   Le <main> garde « resource-main container » (marque des pages B, lue par pages-ressources-b.py et son banc) ; ici il prend
   toute la largeur, pour que les aplats de section touchent les bords. */
body[data-resource="output-formats"] .resource-main.container{width:100%;padding-bottom:0}
.rs .rs-of-end{width:min(1328px,calc(100% - 112px));margin:72px auto 96px}
.rs .rs-of-end .resource-closer{margin-top:0}

/* Hero : les deux sorties de BRAND, plus grandes, sous le texte */
.rs .rs-of-hero-art{width:min(760px,100%);margin:60px auto 0;text-align:left}
.rs .rs-of-hero-art .output-art{padding:48px 56px;gap:32px;border-radius:32px;background:linear-gradient(150deg,#F4F6FF 0%,#DCE2FA 100%);box-shadow:0 40px 80px -56px #26315366}
.rs .rs-of-hero-art .output-art>div{padding:30px 26px;box-shadow:0 24px 40px -26px #26315380;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rs .rs-of-hero-art .output-art:hover>div{transform:rotate(-2deg) translateY(-4px)}
.rs .rs-of-hero-art .output-art:hover>div+div{transform:rotate(2deg) translateY(-4px)}

/* 03 · Ce qu'on fait d'une tâche : un résultat, sa barre d'actions, le menu d'export ouvert */
.rs .rs-of-actions{padding:24px 26px 26px}
.rs .rs-of-doc{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid #eef1fa}
.rs .rs-of-doc b{font:700 18px/1.2 PJS,Arial,sans-serif;color:var(--rs-ink);letter-spacing:-.02em}
.rs .rs-of-badge{padding:5px 10px;border-radius:999px;background:var(--rs-blue);color:#fff;font:600 12px/1 DM,Arial,sans-serif}
.rs .rs-of-lines{display:grid;gap:10px;margin:18px 0 22px}
.rs .rs-of-lines i,.rs .rs-of-carry i{display:block;height:6px;border-radius:8px;background:var(--rs-lav)}
.rs .rs-of-lines i:nth-child(2){width:90%}.rs .rs-of-lines i:nth-child(3){width:96%}.rs .rs-of-lines i:nth-child(4){width:62%}
.rs .rs-of-bar{display:flex;flex-wrap:wrap;gap:8px}
.rs .rs-of-btn{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border-radius:10px;border:1px solid var(--rs-line);background:#fff;color:var(--rs-ink);font:600 14px/1 DM,Arial,sans-serif}
.rs .rs-of-btn--main{background:var(--rs-blue);border-color:var(--rs-blue);color:#fff}
.rs .rs-of-btn--open{border-color:var(--rs-blue);box-shadow:0 0 0 3px #4458ac1f;color:var(--rs-blue)}
.rs .rs-of-menu{list-style:none;margin:10px 0 0 76px;padding:6px;width:min(200px,calc(100% - 76px));border-radius:12px;background:#fff;border:1px solid var(--rs-line);box-shadow:0 18px 36px -20px #26315380}
.rs .rs-of-menu li{padding:9px 12px;border-radius:8px;font:500 14px/1.2 DM,Arial,sans-serif;color:var(--rs-ink)}
.rs .rs-of-menu li:first-child{background:var(--rs-lav);color:var(--rs-blue)}

/* 04 · Ce que porte chaque tâche : trois lignes, une par garantie */
.rs .rs-of-carry{display:grid;gap:0;padding:10px 22px}
.rs .rs-of-row{display:flex;align-items:center;gap:16px;min-height:76px}
.rs .rs-of-row+.rs-of-row{border-top:1px solid #eef1fa}
.rs .rs-of-row p{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.rs .rs-of-row p i{flex:1}
.rs .rs-of-row b{font:600 16px/1.3 DM,Arial,sans-serif;color:var(--rs-ink)}
.rs .rs-of-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--rs-lav);color:var(--rs-blue);font:700 15px/1 PJS,Arial,sans-serif}
.rs .rs-of-ico--flag{background:#FFF1D6;color:#8A5A12}
.rs .rs-of-ico--mask{background:var(--rs-lime-soft);color:var(--rs-ink)}
.rs .rs-of-row mark{padding:4px 8px;border-radius:6px;background:#FFF1D6;color:#6B4510;font:600 14px/1 DM,Arial,sans-serif;box-shadow:inset 0 -2px 0 #E0B35C}
.rs .rs-of-masked span{padding:4px 10px;border-radius:999px;background:var(--rs-lime-soft);color:var(--rs-ink);font:600 13px/1 DM,Arial,sans-serif}

@media (max-width:900px){.rs .rs-of-end{width:calc(100% - 64px);margin:56px auto 72px}}
@media (max-width:640px){
  .rs .rs-of-end{width:calc(100% - 32px);margin:40px auto 48px}
  .rs .rs-of-hero-art{margin-top:40px}
  .rs .rs-of-hero-art .output-art{padding:26px 20px;gap:14px;border-radius:24px;margin-top:0}
  .rs .rs-of-hero-art .output-art>div{padding:18px 14px}
  .rs .rs-of-actions{padding:18px 16px 20px}
  .rs .rs-of-menu{margin-left:56px;width:calc(100% - 56px)}
  .rs .rs-of-carry{padding:6px 14px}
  .rs .rs-of-row{min-height:64px;gap:12px}
  .rs .rs-of-row b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.rs .rs-of-hero-art .output-art>div{transition:none}.rs .rs-of-hero-art .output-art:hover>div{transform:rotate(-4deg)}.rs .rs-of-hero-art .output-art:hover>div+div{transform:rotate(4deg)}}
/* La bande de BRAND garde ses marges (la remise à zéro de .rs ne la touche pas). */
.rs .resource-closer h2{margin:24px 0}
.rs .resource-closer p{margin:16px 0 0}
.rs .resource-closer .resource-actions{margin-top:30px}
@media (max-width:760px){.rs .resource-closer h2{margin:22px 0}}
@media (max-width:640px){.rs .rs-of-bar{gap:6px}.rs .rs-of-btn{min-height:34px;padding:7px 10px;font-size:13px}.rs .rs-of-menu{margin-left:48px;width:calc(100% - 48px)}}