/* Simulateur de films de sécurité — téléphone d'abord.
   Scène en haut, choix dessous ; à partir de 1000 px, deux colonnes et la
   scène reste collée pendant qu'on lit la fiche. */
.ss{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; --ss-bleu:#153750; }
.ss [hidden]{ display:none !important; }

/* ── Scène ── */
.ss-vues{ display:flex; gap:6px; padding:4px; border-radius:999px; background:#eef1f4; margin-bottom:10px; width:max-content; max-width:100%; overflow-x:auto; }
.ss-vues button{ border:0; background:none; border-radius:999px; padding:.55rem .95rem; font:700 .82rem/1 var(--font-head,inherit); color:#3b4656; cursor:pointer; white-space:nowrap; min-height:40px; }
.ss-vues button[aria-pressed="true"]{ background:var(--ss-bleu); color:#fff; }
.ss-scene{ position:relative; margin:0; border-radius:20px; overflow:hidden; background:#0C1B2E; box-shadow:0 18px 40px rgba(12,27,46,.18); }
.ss-img{ display:block; width:100%; height:auto; }
.ss-voile{ position:absolute; inset:0; }
.ss-voile img{ width:100%; height:100%; object-fit:cover; }
.ss-curseur{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ss-tag{ position:absolute; top:12px; padding:.4rem .75rem; border-radius:999px; background:rgba(12,27,46,.78); color:#fff; font:700 .75rem/1 var(--font-head,inherit); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ss-tag--d{ right:12px; } .ss-tag--g{ left:12px; }
.ss-scene figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px; font-size:.72rem; line-height:1.4; color:rgba(255,255,255,.88); background:linear-gradient(0deg,rgba(12,27,46,.85),transparent); }
.ss-explique{ margin:12px 2px 0; font-size:.92rem; line-height:1.55; color:#3b4656; }

/* ── Panneau ── */
.ss-panel{ min-width:0; }
.ss-etape{ margin:1.1rem 0 .55rem; font:800 .72rem/1 var(--font-head,inherit) !important; letter-spacing:.12em; text-transform:uppercase; color:#96742a; }
.ss-etape:first-child{ margin-top:0; }
.ss-besoins{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ss-besoin{ text-align:left; padding:.75rem .85rem; min-height:52px; border-radius:14px; border:1px solid rgba(12,27,46,.12); background:#fff; color:#0C1B2E; font:700 .86rem/1.3 var(--font-head,inherit); cursor:pointer; transition:border-color .18s, background .18s; }
.ss-besoin[aria-pressed="true"]{ border-color:var(--ss-bleu); background:var(--ss-bleu); color:#fff; }
.ss-reco{ margin:.7rem 0 0; padding:.8rem .95rem; border-radius:14px; background:#F4EBD6; font-size:.88rem !important; line-height:1.5; color:#3b3220; }
.ss-poses{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:#eef1f4; }
.ss-poses button{ border:0; background:none; border-radius:999px; padding:0 1.2rem; min-height:40px; font:700 .86rem/1 var(--font-head,inherit); color:#3b4656; cursor:pointer; }
.ss-poses button[aria-pressed="true"]{ background:var(--ss-bleu); color:#fff; }
.ss-films{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.ss-film{ display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; align-items:center; text-align:left;
  padding:.7rem .85rem; border-radius:14px; border:1px solid rgba(12,27,46,.12); background:#fff; cursor:pointer; transition:border-color .18s, box-shadow .18s; }
.ss-film[aria-pressed="true"]{ border-color:var(--ss-bleu); box-shadow:0 0 0 2px var(--ss-bleu) inset; }
.ss-film-ep{ grid-row:1 / 3; font:800 1.05rem/1 var(--font-head,inherit); color:var(--ss-bleu); }
.ss-film-nom{ font:800 .95rem/1.25 var(--font-head,inherit); color:#0C1B2E; }
.ss-film-nom em{ font-style:normal; margin-left:.35rem; padding:.15rem .5rem; border-radius:999px; background:#C9A84C; color:#0C1B2E; font-size:.68rem; vertical-align:middle; }
.ss-film-cl{ font-size:.78rem; color:#5b6472; }
.ss-film--premium .ss-film-ep::after{ content:'3M'; display:block; margin-top:.25rem; font-size:.66rem; letter-spacing:.06em; color:#96742a; }
.ss-film:focus-visible, .ss-besoin:focus-visible, .ss-poses button:focus-visible, .ss-vues button:focus-visible{ outline:2px solid #C9A84C; outline-offset:2px; }

.ss-fiche{ margin-top:16px; padding:18px 16px; border-radius:20px; background:#fff; border:1px solid rgba(12,27,46,.08); box-shadow:0 6px 20px rgba(12,27,46,.06); }
.ss-fiche-tete{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem; }
.ss-fiche-tete h3{ margin:0; font:800 1.2rem/1.2 var(--font-head,inherit); color:#0C1B2E; }
.ss-fiche-tete span{ font-size:.82rem; color:#5b6472; }
.ss-intro{ margin:.5rem 0 .8rem; font-size:.9rem !important; line-height:1.55; color:#3b4656; }
.ss-tab, .ss-comp table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.ss-tab th, .ss-comp th{ text-align:left; font-weight:600; color:#5b6472; padding:.45rem .5rem .45rem 0; border-bottom:1px solid rgba(12,27,46,.07); vertical-align:top; }
.ss-tab td, .ss-comp td{ font-weight:700; color:#0C1B2E; padding:.45rem 0; border-bottom:1px solid rgba(12,27,46,.07); vertical-align:top; }
.ss-tab td.nc{ font-weight:400; font-style:italic; color:#8a929c; }
.ss-comp{ overflow-x:auto; }
.ss-comp thead th{ color:#0C1B2E; font-weight:800; }
.ss-comp td{ padding-right:.5rem; }
.ss-ep{ margin:.9rem 0 0; padding:.75rem .9rem; border-left:3px solid #C9A84C; background:#fbf7ec; border-radius:0 12px 12px 0; font-size:.86rem !important; line-height:1.5; }
.ss-cmp{ display:flex; flex-direction:column; gap:.35rem; margin-top:.9rem; font-size:.8rem; font-weight:700; color:#5b6472; }
.ss-cmp select{ font:inherit; font-size:16px; font-weight:400; color:#0C1B2E; padding:.6rem .7rem; border:1px solid rgba(12,27,46,.18); border-radius:12px; background:#fff; }
.ss-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:1rem; }
.ss-actions .btn{ border-radius:999px; }
.ss-ajout{ border:1px solid var(--ss-bleu); background:#fff; color:var(--ss-bleu); border-radius:999px; padding:.75rem 1.1rem; font:700 .88rem/1 var(--font-head,inherit); cursor:pointer; min-height:44px; }
.ss-pdf{ font-weight:700; font-size:.88rem; color:#96742a; }
.ss-mention{ margin:.9rem 0 0; font-size:.74rem !important; line-height:1.45; color:#7a8492; }

/* Tableau comparatif statique (référencement) */
.secu-tableau{ margin-top:2rem; }
.secu-table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px; }
.secu-table caption{ text-align:left; font-weight:700; color:#0C1B2E; margin-bottom:.6rem; }
.secu-table th, .secu-table td{ text-align:left; padding:.6rem .7rem; border-bottom:1px solid rgba(12,27,46,.08); }
.secu-table thead th{ background:var(--navy,#0C1B2E); color:#fff; font-weight:700; }
.secu-table tbody th{ color:#0C1B2E; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (min-width:640px){
  .ss-films{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ss-fiche{ padding:22px 22px; }
}
@media (min-width:1000px){
  .ss{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; align-items:start; }
  .ss-stage{ position:sticky; top:calc(var(--header-h,104px) + var(--header-top,14px) + 16px); }
}
@media (prefers-reduced-motion:reduce){ .ss-besoin, .ss-film{ transition:none; } }
/* Téléphone : le tableau des 8 films devient une pile de fiches lisibles */
@media (max-width:639px){
  .secu-tableau{ overflow:visible; }
  .secu-table{ min-width:0; display:block; }
  .secu-table thead{ display:none; }
  .secu-table caption{ display:block; }
  .secu-table tbody{ display:flex; flex-direction:column; gap:10px; }
  .secu-table tr{ display:block; background:#fff; border:1px solid rgba(12,27,46,.1); border-radius:14px; padding:10px 14px; }
  .secu-table th, .secu-table td{ display:block; padding:.3rem 0; border:0; }
  .secu-table tbody th{ font-size:1rem; font-weight:800; padding-bottom:.45rem; margin-bottom:.2rem; border-bottom:1px solid rgba(12,27,46,.08); }
  .secu-table td::before{ content:attr(data-label); display:block; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#96742a; }
}
/* Téléphone : la mention sous la photo, pas par-dessus (elle en masquait un tiers) */
@media (max-width:639px){ .ss-scene figcaption{ position:static; padding:8px 12px 10px; background:#0C1B2E; font-size:.7rem; } }