/* DA « Film » de tout le site SHOOTKAM (12/10/2026). Ecrit en site/da-film.css par construire_site.py. */
/* =====================================================================================
   DA « FILM » (12/10/2026) — tout le site prend la DA de l'accueil D, en rouge SHOOTKAM.
   SHOOTKAM : « mets tout le site dans la DA de l'accueil » ; « rends le bleu rouge, code
   couleurs SHOOTKAM ». Titres en acier chrome + traits de vitesse, cartes avec neon rouge
   dessous, bandes cinema sur l'en-tete Serveurs.
   Ni le nom ni le logo des films (marque deposee) : seulement leurs codes.
   ===================================================================================== */
:root{
  --cyan:#ff6a70; --magenta:#c1121a;          /* plus de cyan ni de magenta : la gamme SHOOTKAM */
  --chrome:linear-gradient(180deg,#ffffff 0%,#e6e7ea 28%,#8a8d94 47%,#141518 50%,#666a72 56%,#d4d6da 76%,#ffffff 100%);
  --chrome-r:linear-gradient(180deg,#ff9a9e 0%,#ff2029 42%,#7d0a10 50%,#ff3b43 62%,#ff2029 100%);
  --carbone:repeating-conic-gradient(from 45deg,#0d0d0f 0 25%,#141417 0 50%) 0 0/7px 7px;
  --neon-dessous:0 26px 34px -22px rgba(255,32,41,.55);
}
/* (pas de grain de pellicule : essaye le 12/10/2026, retire le jour meme — « c'est pas beau, laisse clair ») */

/* titres : acier chrome, premieres lettres en chrome rouge, traits de vitesse DERRIERE (2e calque du fond,
   12/10/2026 : « les lignes rouges sur le texte doivent passer derriere ») */
.ttl{ position:relative; color:transparent; background-image:var(--chrome), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 48' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ff4a55' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%23ff4a55' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ff4a55' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect y='3' width='600' height='1.3'/%3E%3Crect y='12' width='600' height='1'/%3E%3Crect y='21' width='600' height='1.6'/%3E%3Crect y='30' width='600' height='1'/%3E%3Crect y='39' width='600' height='1.3'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat;
  background-size:100% 100%, 62% 72%; background-position:0 0, 0 50%; -webkit-background-clip:text, border-box; background-clip:text, border-box;
  filter:drop-shadow(0 1px 0 #55575d) drop-shadow(0 1px 0 #34363b) drop-shadow(0 2px 0 #18191c) drop-shadow(0 0 22px rgba(255,32,41,.3)); }
.ttl.center{ background-size:100% 100%, 84% 72%; background-position:0 0, 50% 50%; }
.ttl .r{ background:var(--chrome-r); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.eyebrow::before{ background:linear-gradient(90deg,var(--red),#ff6a2a); }
.u-line{ background:linear-gradient(90deg,#7d0a10,var(--red),#ff8a8f,var(--red),#7d0a10); background-size:200% 100%; }

/* LES CADRES (12/10/2026, « l'effet dans les cadres n'est pas waw ») : degrade profond, lueur rouge par le bas,
   coins rouges facon HUD, reflet qui traverse au survol, et un lisere lumineux qui fait le tour du cadre. */
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes cadreTour{ to{ --ang:360deg; } }
@media (prefers-reduced-motion:reduce){ * { animation-name:none !important; } }
body .appcard, body .step, body .tuto-box, body .join-steps > div{ border:1px solid transparent;
  background:
    linear-gradient(112deg, transparent 38%, rgba(255,255,255,.08) 49%, transparent 60%) 130% 0 / 260% 100% no-repeat padding-box,
    linear-gradient(#ff2029,#ff2029) left 12px top 12px / 16px 2px no-repeat padding-box,
    linear-gradient(#ff2029,#ff2029) left 12px top 12px / 2px 16px no-repeat padding-box,
    linear-gradient(#ff2029,#ff2029) right 12px bottom 12px / 16px 2px no-repeat padding-box,
    linear-gradient(#ff2029,#ff2029) right 12px bottom 12px / 2px 16px no-repeat padding-box,
    var(--cadre-teinte, linear-gradient(transparent, transparent)) padding-box,
    radial-gradient(120% 70% at 50% 118%, rgba(255,32,41,.17), transparent 62%) padding-box,
    linear-gradient(160deg, #18191d 0%, #0c0c0f 55%, #0f0708 100%) padding-box,
    conic-gradient(from var(--ang), rgba(255,255,255,.07) 0deg, rgba(255,255,255,.42) 35deg, rgba(255,40,50,.9) 80deg, rgba(255,255,255,.07) 130deg 215deg, rgba(255,40,50,.6) 265deg, rgba(255,255,255,.07) 320deg) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 34px 60px -34px rgba(0,0,0,.95), 0 26px 44px -30px rgba(255,32,41,.5);
  transition:background-position .9s cubic-bezier(.2,.7,.2,1), box-shadow .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
body .appcard:hover, body .step:hover, body .tuto-box:hover, body .join-steps > div:hover{ animation:cadreTour 2.6s linear infinite; background-position:-40% 0, left 12px top 12px, left 12px top 12px, right 12px bottom 12px, right 12px bottom 12px, 0 0, 0 0, 0 0, 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 34px 60px -34px rgba(0,0,0,.95), 0 30px 56px -24px rgba(255,32,41,.8); }
/* les cadres a image (serveurs, bandeaux, classement, filtre, OS) gardent leur image : un liseré et la lueur */
body .srv, body .band, body .lbc-c, body .gfx, body .osx{ box-shadow:0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.08), 0 34px 60px -34px rgba(0,0,0,.95), 0 26px 44px -30px rgba(255,32,41,.5); }
body .srv:hover, body .band:hover, body .lbc-c:hover{ box-shadow:0 0 0 1px rgba(255,74,85,.75), 0 0 26px rgba(255,32,41,.35), 0 34px 56px -22px rgba(255,32,41,.85); border-color:rgba(255,90,99,.6); }
.btn.ghost:hover{ border-color:var(--red); box-shadow:0 12px 34px -12px var(--glow); }

/* en-tete Serveurs : bandes cinema, titre en chrome, accroche */
.sv-hero::before, .sv-hero::after{ content:""; position:absolute; left:0; right:0; height:7vh; max-height:60px; background:#000; z-index:1; pointer-events:none; animation:daBande 1.6s cubic-bezier(.75,0,.2,1) both; }
.sv-hero::before{ top:0; } .sv-hero::after{ bottom:0; }
@keyframes daBande{ from{ height:50%; max-height:50%; } }
.sv-in{ position:relative; z-index:2; }
.sv-t{ background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
  filter:drop-shadow(0 1px 0 #55575d) drop-shadow(0 2px 0 #34363b) drop-shadow(0 3px 0 #18191c) drop-shadow(0 0 30px rgba(255,32,41,.35)); }
.sv-t .r{ background:var(--chrome-r); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.sv-txt p .sv-punch{ display:block; margin-bottom:6px; font-family:var(--titre); font-variation-settings:'wdth' 125; font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.25rem; letter-spacing:.01em; color:#fff; }
.sv-live{ border-color:rgba(255,32,41,.45); }
@media (prefers-reduced-motion:reduce){ .sv-hero::before, .sv-hero::after{ animation:none; } }

/* le bouton SHOOTKAM OS de la barre du haut (telechargement direct) */
.nav-links a.cta.os{ display:inline-flex; align-items:center; gap:7px; color:#fff; background:linear-gradient(135deg,var(--red),var(--red-deep)); box-shadow:0 8px 22px -8px var(--glow); }
.nav-links a.cta.os svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.mnav a.os2{ grid-column:1 / -1; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--red),var(--red-deep)); border-color:transparent; }
@media (max-width:560px){ .nav-links a.cta.os{ display:none; } }   /* sur telephone, il est dans le menu */