/* Karus Films — charte « carte noire » (piste A)
   Noir et blanc, Helvetica, coins coupés, trait + capitales grasses, hachures. */

:root {
  --noir: #0b0b0b;
  --blanc: #fff;
  --texte: #d6d6d6;
  --gris: #8c8c8c;
  --filet: #2e2e2e;
  --helv: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --marge: clamp(20px, 4.2vw, 64px);
  --coupe: polygon(0 0, 79% 0, 100% 26%, 100% 100%, 21% 100%, 0 74%);
  --coupe-s: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--noir); color: var(--blanc);
  font: 400 16px/1.55 var(--helv);
  -webkit-font-smoothing: antialiased; font-feature-settings: "kern", "liga";
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.evitement { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 100; }
.evitement:focus { left: 8px; }
h1, h2 { font-weight: 300; letter-spacing: -.02em; }
em { font-style: normal; font-weight: 700; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: .92; font-size: 26px; }
.logo .k { font-weight: 700; letter-spacing: .01em; }
.logo .s { font-weight: 300; font-size: .86em; letter-spacing: .01em; }

/* ---------- Typo utilitaire ---------- */
.label { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.label::before { content: ""; width: 28px; height: 4px; background: currentColor; }
.lien { font-size: 14px; border-bottom: 1px solid; padding-bottom: 2px; }
.lien:hover { opacity: .6; }
.coupe { clip-path: var(--coupe); }
.coupe-s { clip-path: var(--coupe-s); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center;
  padding: 24px var(--marge); background: rgba(11, 11, 11, .94); backdrop-filter: blur(6px); }
.menu ul { display: flex; gap: clamp(18px, 2.6vw, 38px); list-style: none; margin: 0; padding: 0; }
.menu a { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 0; }
.menu a:hover, .menu a[aria-current] { opacity: .55; }
.menu a[aria-current] { opacity: 1; box-shadow: 0 2px 0 currentColor; }
.menu-bouton { display: none; width: 34px; height: 28px; position: relative; }
.menu-bouton span:first-child, .menu-bouton span:first-child::before { position: absolute; left: 4px; right: 4px; height: 2px; background: #fff; transition: transform .2s; }
.menu-bouton span:first-child { top: 10px; }
.menu-bouton span:first-child::before { content: ""; top: 7px; left: 0; right: 0; }
.menu-bouton[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] span:first-child::before { transform: translateY(-7px) rotate(-90deg); }

/* ---------- Accueil ---------- */
.hero { padding: 0 var(--marge); }
.hero-image img, .showreel { display: block; width: 100%; aspect-ratio: 21/9; object-fit: cover; background: #151515; }
.hero-films { color: var(--gris); font-size: 13px; text-align: center; flex: 1; }
.hero-legende { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 18px; }
.hero-titre { font-size: 15px; } .hero-titre b { font-weight: 700; } .hero-titre:hover { opacity: .7; }
.hero-meta { color: var(--gris); font-size: 13px; }

.manifeste { padding: clamp(80px, 12vw, 180px) var(--marge); display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; }
.manifeste h1 { margin: 0; font-size: clamp(38px, 6.2vw, 96px); line-height: .98; }
.manifeste p { max-width: 34em; color: var(--texte); font-size: 17px; margin: 34px 0 0; }

.bloc { padding: 0 var(--marge); }
.bloc-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 26px; }
.note { color: var(--gris); font-size: 13px; }

.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); margin: clamp(90px, 12vw, 170px) var(--marge) 0; border-top: 1px solid var(--filet); }
.chiffres div { padding-top: 28px; }
.chiffres b { display: block; font-weight: 300; font-size: clamp(48px, 7vw, 104px); line-height: 1; letter-spacing: -.03em; }
.chiffres span { color: var(--gris); font-size: 13px; }

.clients { padding: clamp(80px, 10vw, 140px) var(--marge) clamp(60px, 8vw, 110px); }
.clients ul { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: clamp(22px, 2.6vw, 36px); font-weight: 300; line-height: 1.25; }
.clients li::after { content: "/"; color: #444; margin: 0 .45em; }
.clients li:last-child::after { content: ""; }

/* ---------- Grille de films ---------- */
.films { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; }
.film img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: opacity .3s; background: #1a1a1a; }
.film a:hover img { opacity: .72; }
.film-client { display: block; margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.film-titre { display: block; font-size: 17px; margin-top: 4px; }
.film-meta { display: block; color: var(--gris); font-size: 13px; margin-top: 2px; }
.film[hidden] { display: none; }
.fictions .film img { aspect-ratio: 2.39/1; }

/* ---------- Pages de liste ---------- */
.page-titre { padding-top: clamp(40px, 7vw, 100px); padding-bottom: clamp(40px, 5vw, 70px); }
.page-titre h1 { margin: 0; font-size: clamp(44px, 8vw, 120px); line-height: .95; }
.intro { font-size: clamp(18px, 1.6vw, 22px); color: var(--texte); max-width: 36em; margin: 26px 0 0; font-weight: 300; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.filtres button { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; border: 1px solid #444;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.filtres button:hover { border-color: #fff; }
.filtres button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }

.archives { margin-top: clamp(100px, 12vw, 170px); padding-bottom: clamp(60px, 8vw, 110px); }
.archives-liste { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--filet); }
.archive { position: relative; width: 100%; display: grid; grid-template-columns: 1.1fr 1.6fr 70px 60px; gap: 20px; align-items: baseline; text-align: left;
  padding: 15px 0; border-top: 1px solid var(--filet); font-size: 16px; transition: padding .2s, background .2s; }
.archive-client { font-weight: 700; }
.archive-an, .archive-voir { color: var(--gris); font-size: 13px; text-align: right; }
.archive-voir { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.archive-image { position: absolute; right: 150px; top: 50%; width: 240px; aspect-ratio: 16/9; object-fit: cover; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .2s; clip-path: var(--coupe-s); z-index: 2; }
.archive:hover, .archive:focus-visible { background: #fff; color: #000; padding-left: 14px; padding-right: 14px; }
.archive:hover .archive-voir, .archive:hover .archive-an { color: #000; }
.archive:hover .archive-image { opacity: 1; }

/* ---------- Page projet ---------- */
.projet { padding: 0 var(--marge); }
.projet-entete { padding: clamp(30px, 5vw, 70px) 0 clamp(30px, 4vw, 50px); }
.retour { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.retour:hover { color: #fff; }
.projet-entete h1 { margin: 22px 0 0; font-size: clamp(36px, 5.6vw, 84px); line-height: 1; }
.projet-client { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.projet-meta { color: var(--gris); margin: 16px 0 0; font-size: 14px; }

.lecteur, .hero-lecteur { position: relative; }
.lecteur { clip-path: var(--coupe); }
.lecteur.en-lecture { clip-path: none; } /* film lancé : rectangle plein */
.lecteur img, .lecteur iframe { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 0; display: block; }
.hero-lecteur iframe { width: 100%; aspect-ratio: 21/9; border: 0; display: block; background: #000; }
.lecteur-lancer { display: block; width: 100%; position: relative; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(60px, 7vw, 92px); aspect-ratio: 1;
  border: 1.5px solid #fff; border-radius: 50%; display: grid; place-items: center; transition: background .2s, transform .2s; }
.play::after { content: ""; border-left: 17px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
.lecteur-lancer:hover .play { background: rgba(255, 255, 255, .14); transform: translate(-50%, -50%) scale(1.05); }

.projet-corps { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(30px, 6vw, 100px); padding: clamp(50px, 7vw, 100px) 0; }
.accroche { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; font-weight: 300; letter-spacing: -.02em; margin: 22px 0 26px; }
.projet-texte > p:not(.accroche) { color: var(--texte); font-size: 17px; max-width: 36em; }
.prix { border-left: 4px solid #fff; padding-left: 14px; font-size: 14px !important; color: #fff !important; }
.credits { margin: 22px 0 0; font-size: 14px; }
.credits div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--filet); }
.credits dt { color: var(--gris); } .credits dd { margin: 0; }
.voisins { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--filet); padding: 26px 0 clamp(60px, 8vw, 110px); }
.voisins a { font-size: 18px; } .voisins a:last-child { text-align: right; }
.voisins span { display: block; color: var(--gris); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.voisins a:hover { opacity: .65; }

/* ---------- Pages de texte (Studio, mentions) ---------- */
.page-texte { padding-top: clamp(40px, 7vw, 100px); padding-bottom: clamp(60px, 8vw, 110px); max-width: 1400px; }
.page-texte h1 { margin: 0; font-size: clamp(44px, 8vw, 120px); line-height: .95; }
.page-texte .intro { font-size: clamp(26px, 3vw, 44px); color: #fff; letter-spacing: -.02em; line-height: 1.1; }
.page-texte p { color: var(--texte); max-width: 40em; }
.page-texte > .label { margin-top: clamp(50px, 6vw, 80px); }
.page-texte a:not(.lien) { border-bottom: 1px solid; }
.colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: clamp(50px, 6vw, 90px); }
.colonnes .label { margin-bottom: 8px; }
blockquote { margin: clamp(60px, 8vw, 120px) 0 0; font-size: clamp(26px, 3.4vw, 50px); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; max-width: 22em; border-left: 6px solid #fff; padding-left: clamp(18px, 2vw, 30px); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 22px; }
.duo b { display: block; font-size: 24px; font-weight: 400; }
.duo span { color: var(--gris); font-size: 13px; }
.reseau { font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; color: #fff !important; line-height: 1.45; max-width: none !important; }

/* ---------- Contact : la carte de visite ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: clamp(70px, 9vw, 130px); }
.carte { aspect-ratio: 85/55; clip-path: var(--coupe); }
.carte.recto { clip-path: none; display: grid; }
/* le logo dans sa forme : parallélogramme noir, coins coupés en haut à gauche et en bas à droite */
.logo-forme { display: grid; place-items: center; width: 100%; height: 100%; background: #fff; color: #000;
  clip-path: polygon(23% 0, 100% 0, 100% 76%, 77% 100%, 0 100%, 0 24%); }
.recto .logo { font-size: clamp(30px, 4.4vw, 66px); }
.verso { background: #fff; padding: 1.5px; }
.verso .in { position: relative; height: 100%; background: var(--noir); clip-path: var(--coupe); color: #fff;
  padding: clamp(24px, 4vw, 54px) clamp(20px, 3vw, 40px) clamp(24px, 4vw, 54px) 27%; font-size: clamp(13px, 1.25vw, 17px); line-height: 1.4; font-weight: 300; }
.verso .in::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 21%; color: #fff;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, currentColor 8px 9px); opacity: .9; }
.verso .qui { font-weight: 700; display: flex; align-items: center; gap: .5em; }
.verso .qui::before { content: ""; width: 2.4em; height: .32em; background: #fff; flex: none; }
.verso .soc { margin: .1em 0 1.6em; font-size: .92em; } .verso .soc b { font-weight: 700; }
.verso a, .verso span { display: block; } .verso a:hover { opacity: .65; }

/* ---------- Pied de page ---------- */
.pied { margin: 0 var(--marge); padding: 60px 0 70px; border-top: 1px solid var(--filet); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; font-size: 14px; color: var(--texte); }
.pied a:hover { opacity: .6; }
.pied-appel { font-size: clamp(26px, 3vw, 42px); font-weight: 300; color: #fff; line-height: 1.1; letter-spacing: -.01em; }
.pied-appel a { border-bottom: 2px solid #fff; }
.pied-petit { color: #6d6d6d; font-size: 12px; }

/* ---------- Visionneuse ---------- */
.visionneuse { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .94); display: grid; place-items: center; padding: 70px var(--marge) 40px; }
.visionneuse[hidden] { display: none; }
.visionneuse-cadre { width: min(100%, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16/9; }
.visionneuse-cadre iframe { width: 100%; height: 100%; border: 0; }
.visionneuse-fermer { position: absolute; top: 22px; right: var(--marge); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .films { grid-template-columns: 1fr 1fr; }
  .manifeste, .projet-corps, .pied, .contact, .colonnes, .duo { grid-template-columns: 1fr; }
  .archive-image { display: none; }
}
@media (max-width: 760px) {
  .logo { font-size: 24px; }
  .entete { backdrop-filter: none; background: var(--noir); }
  .entete .logo { position: relative; z-index: 2; }
  .menu-bouton { display: block; z-index: 2; }
  .menu { position: fixed; inset: 0; background: var(--noir); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .2s; }
  .menu.ouvert { opacity: 1; visibility: visible; }
  .menu ul { flex-direction: column; align-items: center; gap: 22px; }
  .menu a { font-size: 30px; font-weight: 300; letter-spacing: 0; text-transform: none; }
  .hero-image img, .hero-lecteur iframe, .showreel { aspect-ratio: 4/5; }
  .hero-legende { flex-direction: column; gap: 8px; }
  .hero-films { text-align: left; }
  .chiffres { grid-template-columns: 1fr; }
  .archive { grid-template-columns: 1fr 50px; gap: 2px 14px; }
  .archive-titre { grid-column: 1; color: var(--gris); }
  .archive-an { grid-row: 1; grid-column: 2; }
  .archive-voir { display: none; }
}
@media (max-width: 560px) {
  .films { grid-template-columns: 1fr; gap: 42px; }
  .voisins a { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Prix et distinctions ---------- */
.film-prix { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.film-prix::before { content: ""; width: 16px; height: 3px; background: currentColor; }
.projet-prix { display: inline-block; margin: 18px 0 0; padding: 8px 14px; background: #fff; color: #000; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.palmares { margin-top: 40px; }
.palmares ul { list-style: none; margin: 16px 0 34px; padding: 0; }
.palmares li { padding: 10px 0; border-top: 1px solid var(--filet); font-size: 15px; color: var(--texte); }
.palmares-prix li b { color: #fff; font-weight: 700; }
.palmares-sel li b { color: #fff; font-weight: 400; }
.distinctions { padding: clamp(80px, 10vw, 140px) var(--marge) 0; }
.prix-liste { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--filet); }
.prix-liste li { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--filet); }
.prix-nom { font-size: clamp(17px, 1.6vw, 22px); font-weight: 300; color: #fff; }
.prix-lieu { color: var(--gris); font-size: 14px; }
.prix-film { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.prix-film a:hover { opacity: .6; }
.archive-prix { display: block; font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; color: #fff; }
.archive:hover .archive-prix { color: #000; }
@media (max-width: 760px) {
  .prix-liste li { grid-template-columns: 1fr; gap: 2px; }
  .prix-film { text-align: left; }
}

/* ---------- Carte animée de la page Contact (reprise du « spinner » de l'ancien site) ---------- */
.anim-carte { position: relative; clip-path: var(--coupe) !important; display: grid; place-items: center; background: #000; color: #fff; cursor: default; }
.anim-carte .logo { font-size: clamp(34px, 5vw, 76px); position: relative; z-index: 1; }
.anim-carte .k { min-height: 1em; }
.anim-carte::before { content: ""; position: absolute; inset: 0; }
.anim-carte[data-etat="noir"] { background: #000; color: #fff; }
.anim-carte[data-etat="blanc"] { background: #fff; color: #000; }
.anim-carte[data-etat="trame"] { background: repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 2.6px); color: #fff; }
.anim-carte[data-etat="trame-noir"] { background: repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 2.6px); color: #000; }
.anim-carte[data-etat="bruit"] { background: #888 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='discrete' tableValues='0 1'/><feFuncG type='discrete' tableValues='0 1'/><feFuncB type='discrete' tableValues='0 1'/><feFuncA type='table' tableValues='1 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); color: #fff; }
.anim-carte[data-etat="bruit-noir"] { background: #888 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='discrete' tableValues='0 1'/><feFuncG type='discrete' tableValues='0 1'/><feFuncB type='discrete' tableValues='0 1'/><feFuncA type='table' tableValues='1 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); color: #000; }
.anim-carte[data-etat="lignes"] { background: repeating-linear-gradient(135deg, #fff 0 11px, #000 11px 12.5px); color: #000; }
.anim-carte[data-etat="lignes-fantome"] { background: repeating-linear-gradient(135deg, #fff 0 11px, #000 11px 12.5px); color: #fff; }
.anim-carte[data-etat="lignes-fantome"] .logo { -webkit-text-stroke: 1px #000; }
.anim-carte[data-etat="noir-lignes"] { background: #000; color: #fff; }
.anim-carte[data-etat="noir-lignes"]::before { right: auto; width: 22%; background: repeating-linear-gradient(135deg, transparent 0 11px, #fff 11px 12.5px); }
.anim-carte[data-sans-films] .s { visibility: hidden; }

/* ---------- Verso animé : la bande de hachures « frétille », le texte s'écrit ligne à ligne ---------- */
.anim-verso .in > :not(.trame-lignes) { transition: opacity .12s; }
.anim-verso.cache-texte .in > :not(.trame-lignes) { opacity: 0; }
.anim-verso .in > .vu { opacity: 1 !important; }
.anim-verso[data-etat="trame"] .in::before { background-image: repeating-linear-gradient(135deg, transparent 0 1.6px, #fff 1.6px 2.6px); }
.anim-verso[data-etat="serre"] .in::before { background-image: repeating-linear-gradient(135deg, transparent 0 4px, #fff 4px 5px); }
.anim-verso[data-etat="large"] .in::before { background-image: repeating-linear-gradient(135deg, transparent 0 14px, #fff 14px 16px); }
.anim-verso[data-etat="decale"] .in::before { background-position: 5px 0; }
.anim-verso[data-etat="plein"] .in::before { background: #fff; }
.anim-verso[data-etat="vide"] .in::before { background: none; }
.anim-verso[data-etat="bruit"] .in::before { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' seed='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='discrete' tableValues='0 1'/><feFuncG type='discrete' tableValues='0 1'/><feFuncB type='discrete' tableValues='0 1'/><feFuncA type='table' tableValues='1 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- Recto / verso en miroir, et arêtes du volume (parallélépipède) qui se tracent ---------- */
.boite { position: relative; }
.boite .carte { position: relative; z-index: 1; }
:root { --coupe-miroir: polygon(21% 0, 100% 0, 100% 74%, 79% 100%, 0 100%, 0 26%); }
.boite.miroir .verso, .boite.miroir .verso .in { clip-path: var(--coupe-miroir); }
.aretes { position: absolute; left: -8%; top: -4%; width: 112%; height: 116%; overflow: visible; pointer-events: none; z-index: 0; }
.boite.miroir .aretes { transform: scaleX(-1); }
.aretes path { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: arete 5.2s ease-in-out infinite; }
.aretes path:nth-child(2) { animation-delay: .5s; }
.aretes path:nth-child(3) { animation-delay: .9s; }
.boite.miroir .aretes path { animation-delay: 1.3s; }
.boite.miroir .aretes path:nth-child(2) { animation-delay: 1.8s; }
.boite.miroir .aretes path:nth-child(3) { animation-delay: 2.2s; }
@keyframes arete { 0% { stroke-dashoffset: 100; } 35% { stroke-dashoffset: 0; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aretes path { animation: none; stroke-dashoffset: 0; } }

/* ---------- Trame intérieure : lignes horizontales et verticales qui se tracent dans la carte ---------- */
.aretes { display: none; }
.trame-lignes { position: absolute; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: difference; }
.trame-lignes i { position: absolute; background: #fff; opacity: .4; animation: trace-h 6s cubic-bezier(.6,0,.3,1) infinite; animation-delay: calc(var(--i) * .18s); }
.trame-lignes i.h { left: 0; right: 0; height: 1px; transform-origin: left center; transform: scaleX(0); }
.trame-lignes i.h.inv { transform-origin: right center; }
.trame-lignes i.v { top: 0; bottom: 0; width: 1px; transform-origin: center top; transform: scaleY(0); animation-name: trace-v; }
.trame-lignes i.v.inv { transform-origin: center bottom; }
.boite.miroir .trame-lignes i { animation-delay: calc(var(--i) * .18s + .9s); }
.anim-carte .logo, .anim-verso .in > :not(.trame-lignes) { position: relative; z-index: 1; }
@keyframes trace-h { 0% { transform: scaleX(0); opacity: .4; } 22%, 70% { transform: scaleX(1); opacity: .4; } 85%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes trace-v { 0% { transform: scaleY(0); opacity: .4; } 22%, 70% { transform: scaleY(1); opacity: .4; } 85%, 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trame-lignes i { animation: none; transform: none; opacity: .15; } }

.projet-tv { margin-right: 10px; background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.film-prix + .film-prix { margin-left: 0; }
.film .film-prix { display: flex; }