:root { color-scheme:dark; --navy:#102f45; --navy2:#0b1e2c; --orange:#fa7027; --white:#f8f9fb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Arial", "Helvetica Neue", sans-serif; background:var(--navy2); color:var(--white); }
a { color:inherit; }
a:hover { color:#ffa168; }
.skip { position:absolute; top:-90px; left:8px; background:white; color:black; padding:10px; z-index:20; }
.skip:focus { top:8px; }
.header { position:absolute; z-index:10; top:0; left:0; width:100%; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px clamp(24px,3.3vw,64px); background:linear-gradient(to bottom,rgba(8,27,41,.9),rgba(8,27,41,0)); }
.brand { text-decoration:none; font-size:19px; letter-spacing:.1em; font-weight:900; white-space:nowrap; }
.brand span:not(.brand-name) { display:block; margin-top:2px; letter-spacing:.35em; font-weight:400; font-size:9px; }
.nav { display:flex; gap:clamp(12px,2.2vw,36px); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.nav a { text-decoration:none; }
.menu-toggle { display:none; color:white; font-size:25px; background:transparent; border:1px solid #ffffff66; border-radius:4px; padding:6px 11px; cursor:pointer; }
.hero { position:relative; min-height:940px; isolation:isolate; background:var(--navy); }
.hero-scene { position:absolute; inset:0; z-index:-2; background-image:url("images/fond-accueil.webp"); background-size:cover; background-position:center 55%; }
.hero:before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to right,rgba(6,22,35,.75) 0%, rgba(6,22,35,.52) 43%,rgba(6,22,35,.08) 85%),linear-gradient(to bottom,rgba(10,34,50,.33) 0%,transparent 38%,rgba(3,11,16,.18) 57%,rgba(3,11,16,.84) 96%); }
.hero-inner { position:relative; min-height:940px; max-width:1700px; margin:0 auto; padding:102px clamp(26px,4vw,75px) 65px; display:flex; flex-direction:column; }
.hero-topline { display:flex; align-items:flex-start; gap:46px; font-size:12px; letter-spacing:.005em; }
.signature { margin:0; line-height:1.08; min-width:65px; }
.top-stroke { height:2px; width:128px; background:white; margin-top:16px; opacity:.85; }
.domaines { margin:4px 0 0 auto; font-size:13px; letter-spacing:.02em; text-align:right; }
.title-zone { margin-top:clamp(28px,4vw,55px); max-width:1000px; }
h1 { margin:0; font-size:clamp(54px,7.5vw,121px); line-height:.94; font-weight:900; letter-spacing:-.055em; text-transform:uppercase; }
h1 span { display:block; }
.valeurs { margin:14px 0 0 2px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 25px; font-size:clamp(14px,1.5vw,21px); }
.valeurs:before { content:""; display:inline-block; width:48px; height:4px; border-radius:20px; background:var(--orange); }
.valeurs span+span:before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--orange); margin-right:25px; vertical-align:middle; }
.devise { position:absolute; top:190px; right:clamp(25px,4vw,75px); padding:5px 0 5px 10px; border-left:3px solid var(--orange); font-size:12px; line-height:1.15; margin:0; }
.devise span { display:block; }
.intro { margin-top:auto; width:min(735px,70%); padding:130px 0 25px; text-shadow:0 1px 16px #0007; }
.intro h2 { max-width:630px; margin:0 0 27px; font-size:clamp(30px,3.5vw,56px); line-height:1.06; letter-spacing:-.032em; font-weight:900; }
.intro p { margin:0 0 12px; max-width:710px; font-size:clamp(15px,1.25vw,19px); line-height:1.31; letter-spacing:.006em; }
.intro-paras p { margin-bottom:9px; }
.intro-conclusion { margin-top:9px; }
.intro strong { font-weight:900; }
.orange-stroke { display:block; margin-top:35px; width:50px; height:4px; background:var(--orange); border-radius:10px; }
.hero-contact { font-size:clamp(12px,1.1vw,17px); letter-spacing:.015em; padding-top:35px; }
.hero-contact a,.footer a { text-decoration:none; }
.section { padding:clamp(64px,8vw,130px) clamp(26px,7vw,115px); scroll-margin-top:20px; }
.eyebrow { color:var(--orange); letter-spacing:.28em; font-size:12px; font-weight:700; }
.section-video .eyebrow, .section-parcours .eyebrow { font-size:clamp(15px,1.35vw,19px); letter-spacing:.14em; font-weight:700; opacity:1; margin-bottom:18px; }
.section h2 { margin:6px 0 14px; font-size:clamp(32px,4.5vw,65px); line-height:1.08; letter-spacing:-.04em; }
.description { max-width:740px; color:#cbd5df; font-size:clamp(16px,1.65vw,21px); line-height:1.55; }
.description:empty { display:none; }
.section-video { background:#0d2030; }
.section-video h2, .section-video .description, .section-video .video-shell { margin-left:auto; margin-right:auto; text-align:center; }
.section-video h2 { max-width:900px; }
.section-video .description { max-width:820px; }
.section-video .video-shell { max-width:min(100%,1040px); }
.video-shell { width:min(100%,1080px); margin-top:38px; aspect-ratio:16/9; overflow:hidden; border:1px solid #ffffff33; border-radius:5px; background:#000; }
.video-shell video { display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:contain; background:#000; }
.video-shell video:focus-visible { outline:3px solid var(--orange); outline-offset:-4px; }
.video-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:14px; text-align:center; color:#d1e0ed; background:linear-gradient(130deg,#193e53,#101a26); }
.video-placeholder p { max-width:460px; line-height:1.4; font-size:clamp(14px,1.5vw,19px); }
.play-icon { border:2px solid #ffffffdd; border-radius:50%; width:72px; height:72px; display:grid; place-items:center; padding-left:5px; font-size:24px; color:#fff; }
.section-parcours { position:relative; min-height:760px; padding:0; background:#12283a; overflow:hidden; }
.section-parcours .parcours-scene { position:absolute; inset:0; background-image:url("images/parcours-fond-desktop.webp"); background-size:cover; background-position:center center; }
.section-parcours::before { content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(4,13,22,.95) 0%, rgba(5,16,27,.90) 34%, rgba(7,18,29,.52) 60%, rgba(8,19,30,.26) 100%), linear-gradient(to bottom, rgba(5,12,18,.26) 0%, rgba(7,17,26,.34) 30%, rgba(6,14,21,.58) 100%); }
.parcours-inner { position:relative; max-width:920px; padding:clamp(64px,8vw,110px) clamp(26px,7vw,115px); }
.parcours-inner .eyebrow { position:relative; z-index:1; }
.parcours-inner h2 { position:relative; z-index:1; max-width:660px; margin-bottom:28px; }
.parcours-paras { position:relative; z-index:1; max-width:760px; }
.parcours-paras p { margin:0 0 22px; font-size:clamp(16px,1.45vw,20px); line-height:1.65; color:#edf3f8; text-shadow:0 1px 18px rgba(0,0,0,.35); }
.parcours-paras p:last-child { margin-bottom:0; }
.footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:30px; padding:44px clamp(26px,7vw,115px); border-top:1px solid #ffffff20; background:#091925; }
.footer-name { margin:0; font-size:24px; font-weight:800; }.footer-sub { color:#bac7cf; font-size:11px; letter-spacing:.12em; }
.footer-links { display:flex; flex-direction:column; gap:12px; }
@media (max-width:1000px) {
 .domaines { font-size:11px; }
 .intro { width:min(700px,82%); }
 .hero,.hero-inner { min-height:960px; }
 .devise { top:180px; }
}

/* Navigation tablette : menu hamburger avant que les liens ne soient trop serrés */
@media (max-width:950px) {
  .header { min-height:70px; padding:16px 18px; align-items:flex-start; }
  .brand { font-size:16px; padding-top:7px; }
  .menu-toggle { display:block; }
  .nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:66px;
    background:#0b2536f5;
    padding:22px;
    flex-direction:column;
    gap:24px;
    font-size:15px;
  }
  .nav.is-open { display:flex; }
}

@media (max-width:720px) {
 .header { position:absolute; min-height:70px; padding:16px 18px; align-items:flex-start; }
 .brand { font-size:16px; padding-top:7px; }
 .menu-toggle { display:block; }
 .nav { display:none; position:absolute; left:0; right:0; top:66px; background:#0b2536f5; padding:22px; flex-direction:column; gap:24px; font-size:15px; }
 .nav.is-open { display:flex; }
 .hero { min-height:0; background:#122f43; }
 .hero-scene { inset:0 0 auto; height:675px; background-size:cover; background-position:center top; }
 .hero:before { background:linear-gradient(to bottom,rgba(8,28,41,.55) 0%,rgba(8,28,41,.03) 20%,rgba(8,28,41,.12) 45%,#0c2231 665px,#0c2231 100%); }
 .hero-inner { min-height:0; padding:104px 24px 25px; }
 .hero-topline { gap:18px; }
 .signature { font-size:9px; min-width:49px; }
 .top-stroke { width:42px; margin-top:9px; }
 .domaines { max-width:170px; font-size:9px; margin-top:2px; line-height:1.4; }
 .title-zone { margin-top:33px; }
 h1 { font-size:clamp(39px,11.1vw,76px); line-height:.98; letter-spacing:-.055em; }
 .valeurs { margin-top:14px; font-size:13px; gap:10px 9px; }
 .valeurs:before { width:22px;height:3px; }
 .valeurs span+span:before { width:5px;height:5px; margin-right:9px; }
 .devise { position:relative; align-self:flex-end; top:auto; right:auto; margin-top:28px; margin-right:2px; font-size:10px; }
 .intro { margin-top:195px; width:100%; padding:25px 0 2px; }
 .intro h2 { font-size:clamp(29px,7.5vw,45px); margin-bottom:25px; }
 .intro p { font-size:16px; line-height:1.47; }
 .orange-stroke { margin-top:27px; }
 .hero-contact { padding-top:48px; font-size:12px; line-height:1.8; }
 .section { padding:65px 24px; }
 .section h2 { font-size:37px; }
 .video-shell { margin-top:28px; }
 .play-icon { height:56px;width:56px;font-size:19px; }
 .video-placeholder p { font-size:13px; }
 .footer { padding:34px 24px; }
}
@media (max-width:390px) { .hero-inner { padding-left:18px; padding-right:18px; } .domaines { max-width:137px; } h1 { font-size:10.2vw; } .intro { margin-top:205px; } }

/* V2 — lecteur vidéo réel et accessibilité */
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (max-width:720px) { .video-shell { margin-top:26px; } .video-shell video { max-height:75vh; } .section-parcours { min-height:0; } .section-parcours .parcours-scene { background-image:url("images/parcours-fond-mobile.webp"); background-position:center top; } .section-parcours::before { background:linear-gradient(to bottom, rgba(4,13,22,.985) 0%, rgba(4,13,22,.975) 16%, rgba(4,13,22,.965) 36%, rgba(4,13,22,.992) 66%, rgba(4,13,22,1) 100%); } .parcours-inner { padding:62px 24px 70px; } .parcours-paras p { font-size:16px; line-height:1.62; text-shadow:0 2px 18px rgba(0,0,0,.92); } }

.footer-cv { color:#dbe5ee; text-decoration:none; }
.footer-cv:hover { color:#ffa168; }


/* V7 - page CV indépendante */
.cv-page { background:#081720; }
.cv-page .cv-header { position:sticky; top:0; background:rgba(7,22,32,.96); backdrop-filter:blur(10px); border-bottom:1px solid #ffffff18; }
.cv-page .nav .is-current { color:var(--orange); }
.cv-main { min-height:100vh; }
.cv-intro { width:min(980px,calc(100% - 32px)); padding:clamp(64px,8vw,110px) 0 clamp(36px,5vw,64px); margin:0 auto; }
.cv-intro h1 { font-size:clamp(46px,7vw,96px); line-height:.95; margin:8px 0 18px; letter-spacing:-.05em; }
.cv-lead { max-width:700px; margin:0; color:#d0dbe3; font-size:clamp(16px,1.6vw,21px); line-height:1.5; }
.cv-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.cv-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 18px; border:1px solid #ffffff55; border-radius:4px; text-decoration:none; font-weight:700; font-size:14px; letter-spacing:.02em; background:#ffffff08; }
.cv-button:hover { border-color:var(--orange); color:white; background:#ffffff10; }
.cv-button-primary { background:var(--orange); color:#111; border-color:var(--orange); }
.cv-button-primary:hover { color:#111; background:#ff8b4c; }
.cv-reader { padding:0 clamp(16px,4vw,60px) clamp(70px,8vw,120px); max-width:1240px; margin:0 auto; }
.cv-page-sheet { margin:0 auto clamp(24px,3vw,42px); max-width:980px; background:#111; border:1px solid #ffffff1f; box-shadow:0 18px 50px rgba(0,0,0,.36); }
.cv-page-sheet img { display:block; width:100%; height:auto; }
.cv-page-link { display:block; color:inherit; text-decoration:none; }
.cv-page-link img { cursor:zoom-in; }
@media (max-width:720px) {
  .cv-page .cv-header { position:sticky; }
  .cv-intro { width:calc(100% - 20px); padding:42px 0 28px; }
  .cv-intro h1 { font-size:42px; }
  .cv-actions { display:grid; grid-template-columns:1fr; }
  .cv-button { width:100%; }
  .cv-reader { padding:0 10px 60px; }
  .cv-page-sheet { margin-bottom:16px; box-shadow:none; }
}


/* Matériel & prestations — adaptation WEB (pas de planches A4) */
.materiel-web { background:#071823; }
.materiel-web .materiel-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,20,30,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #ffffff18;
}
.materiel-web .nav .is-current { color:var(--orange); }

.materiel-web-intro {
  background:#0b1e2c;
  padding:clamp(72px,8vw,125px) clamp(26px,7vw,115px) clamp(58px,7vw,95px);
}
.materiel-web-intro-inner {
  width:min(100%,1180px);
  margin:0 auto;
}
.materiel-web-intro h1 {
  margin:8px 0 20px;
  max-width:1000px;
  font-size:clamp(48px,7vw,102px);
  line-height:.94;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.materiel-web-intro .materiel-lead {
  max-width:780px;
  color:#d5dfe6;
  font-size:clamp(16px,1.55vw,21px);
  line-height:1.55;
}
.materiel-pdf-button { margin-top:30px; }

.service-web {
  position:relative;
  min-height:clamp(720px,70vw,940px);
  overflow:hidden;
  isolation:isolate;
}
.service-web-bg,
.service-web-shade {
  position:absolute;
  inset:0;
}
.service-web-bg {
  z-index:-3;
  background-size:cover;
  background-position:center;
}
.service-web-studio .service-web-bg {
  background-image:url("images/prestation-interview-desktop.webp");
  background-position:center 50%;
}
.service-web-reportage .service-web-bg {
  background-image:url("images/prestation-reportage-desktop.webp");
  background-position:center 50%;
}
.service-web-shade { z-index:-2; }
.service-web-studio .service-web-shade {
  background:
    linear-gradient(to left,rgba(3,12,18,.80) 0%,rgba(3,12,18,.65) 35%,rgba(3,12,18,.20) 67%,rgba(3,12,18,.07) 100%),
    linear-gradient(to bottom,rgba(3,12,18,.06),rgba(3,12,18,.42));
}
.service-web-reportage .service-web-shade {
  background:
    linear-gradient(to right,rgba(3,12,18,.82) 0%,rgba(3,12,18,.67) 38%,rgba(3,12,18,.20) 68%,rgba(3,12,18,.07) 100%),
    linear-gradient(to bottom,rgba(3,12,18,.06),rgba(3,12,18,.40));
}

.service-web-inner {
  width:min(100%,1500px);
  min-height:inherit;
  margin:0 auto;
  padding:clamp(70px,8vw,120px) clamp(26px,7vw,105px);
  display:flex;
  align-items:center;
}
.service-web-inner-right { justify-content:flex-end; }
.service-web-inner-left { justify-content:flex-start; }

.service-card {
  width:min(650px,48vw);
  padding:clamp(28px,3.2vw,48px);
  background:linear-gradient(135deg,rgba(5,17,25,.72),rgba(5,17,25,.38));
  border:1px solid #ffffff18;
  box-shadow:0 26px 80px rgba(0,0,0,.25);
  backdrop-filter:blur(3px);
}
.service-kicker {
  margin:0 0 18px;
  color:#fff;
  font-size:clamp(11px,1vw,14px);
  letter-spacing:.12em;
}
.service-card h2 {
  margin:0;
  font-size:clamp(44px,5.1vw,82px);
  line-height:.90;
  letter-spacing:-.052em;
  text-transform:uppercase;
}
.service-values {
  margin:18px 0 0;
  color:#e6ebef;
  font-size:clamp(13px,1.2vw,17px);
  line-height:1.5;
}
.service-stroke {
  display:block;
  width:55px;
  height:4px;
  margin:28px 0 24px;
  border-radius:20px;
  background:var(--orange);
}
.service-card > p:not(.service-kicker):not(.service-values):not(.service-signature) {
  margin:0 0 12px;
  font-size:clamp(16px,1.28vw,20px);
  line-height:1.52;
  color:#f1f4f6;
}
.service-points {
  list-style:none;
  padding:0;
  margin:25px 0 0;
}
.service-points li {
  position:relative;
  margin:9px 0;
  padding-left:23px;
  font-size:clamp(15px,1.20vw,19px);
  line-height:1.46;
}
.service-points li::before {
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
}
.service-signature {
  margin:34px 0 0;
  padding-top:19px;
  border-top:2px solid var(--orange);
  color:#d7e0e6;
  font-size:11px;
  letter-spacing:.12em;
}

.materiel-web-download {
  background:#0b1e2c;
  padding:clamp(65px,8vw,115px) 24px;
}
.materiel-web-download > div {
  width:min(100%,900px);
  margin:0 auto;
  text-align:center;
}
.materiel-web-download h2 {
  margin:7px 0 15px;
  font-size:clamp(34px,4.8vw,66px);
  letter-spacing:-.04em;
}
.materiel-web-download p:not(.eyebrow) {
  color:#cbd6dd;
  font-size:17px;
  line-height:1.55;
  margin:0 auto 28px;
  max-width:700px;
}

@media (max-width:900px) {
  .service-web {
    min-height:840px;
  }
  .service-card {
    width:min(620px,72vw);
  }
}

@media (max-width:720px) {
  .materiel-web .materiel-header { position:sticky; }
  .materiel-web-intro {
    padding:44px 20px 50px;
  }
  .materiel-web-intro h1 {
    font-size:clamp(42px,12vw,64px);
  }
  .materiel-pdf-button { width:100%; }

  .service-web {
    min-height:0;
    padding-top:70vh;
    background:#071823;
  }
  .service-web-bg {
    height:72vh;
    bottom:auto;
    background-position:center top;
  }
  .service-web-studio .service-web-bg {
    background-image:url("images/prestation-interview-mobile.webp");
    background-position:center 34%;
  }
  .service-web-reportage .service-web-bg {
    background-image:url("images/prestation-reportage-mobile.webp");
    background-position:center 30%;
  }
  .service-web-shade {
    height:72vh;
    bottom:auto;
    background:
      linear-gradient(to bottom,rgba(3,12,18,.08) 0%,rgba(3,12,18,.10) 54%,#071823 100%) !important;
  }
  .service-web-inner {
    min-height:0;
    padding:0 20px 62px;
    display:block;
  }
  .service-card {
    width:100%;
    margin-top:-90px;
    padding:26px 0 0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
  }
  .service-kicker {
    font-size:10px;
    line-height:1.5;
  }
  .service-card h2 {
    font-size:clamp(39px,11vw,58px);
    max-width:560px;
  }
  .service-values {
    font-size:13px;
  }
  .service-card > p:not(.service-kicker):not(.service-values):not(.service-signature) {
    font-size:16px;
    line-height:1.55;
    margin-bottom:18px;
  }
  .service-points {
    margin-top:30px;
  }
  .service-points li {
    font-size:15px;
    margin:11px 0;
  }
  .service-signature {
    font-size:10px;
    line-height:1.5;
  }
}


/* R5 — Mentions légales & confidentialité */
.legal-page { background:#081720; }
.legal-page .legal-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,20,30,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #ffffff18;
}
.legal-main { min-height:100vh; }
.legal-hero {
  width:min(980px,calc(100% - 32px));
  margin:0 auto;
  padding:clamp(72px,8vw,120px) 0 clamp(34px,5vw,58px);
}
.legal-hero h1 {
  max-width:900px;
  margin:8px 0 18px;
  font-size:clamp(46px,7vw,92px);
  line-height:.94;
  letter-spacing:-.052em;
  text-transform:uppercase;
}
.legal-update {
  margin:0;
  color:#aebcc5;
  font-size:14px;
}
.legal-content {
  width:min(980px,calc(100% - 32px));
  margin:0 auto;
  padding-bottom:clamp(70px,9vw,130px);
}
.legal-section {
  padding:30px 0 34px;
  border-top:1px solid #ffffff1c;
}
.legal-section h2 {
  margin:0 0 13px;
  color:#fff;
  font-size:clamp(23px,2.7vw,34px);
  line-height:1.08;
  letter-spacing:-.025em;
}
.legal-section p {
  max-width:850px;
  margin:0 0 12px;
  color:#d4dde3;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.62;
}
.legal-section p:last-child { margin-bottom:0; }
.legal-contact-line a {
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid #ffffff4a;
}
.legal-contact-line a:hover { border-bottom-color:var(--orange); }
.footer-legal { opacity:.82; }

@media (max-width:720px) {
  .legal-hero {
    width:calc(100% - 40px);
    padding:46px 0 28px;
  }
  .legal-hero h1 {
    font-size:clamp(38px,11.2vw,56px);
  }
  .legal-content {
    width:calc(100% - 40px);
    padding-bottom:70px;
  }
  .legal-section {
    padding:25px 0 28px;
  }
  .legal-section p {
    font-size:16px;
    line-height:1.58;
  }
}


/* R7 corrigée — déplacement du TITRE uniquement, image R6 strictement inchangée */
@media (min-width:721px) {
  .title-zone {
    transform:translateY(95px);
  }
}

@media (max-width:720px) {
  .title-zone {
    margin-top:128px;
  }
  .intro {
    margin-top:100px;
  }
}
@media (max-width:390px) {
  .intro {
    margin-top:110px;
  }
}


/* R11 — Réalisations : mosaïque de 9 vidéos */
.video-mosaic {
  width:min(100%,1450px);
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.35vw,20px);
}
.video-tile {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  padding:0;
  overflow:hidden;
  border:1px solid #ffffff28;
  border-radius:4px;
  background:#000;
  cursor:pointer;
  appearance:none;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  transform-origin:center;
}
.video-tile img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.video-tile-play {
  position:absolute;
  left:50%;
  top:50%;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  padding-left:4px;
  border:1px solid #ffffffb8;
  border-radius:50%;
  background:rgba(0,0,0,.40);
  color:#fff;
  font-size:19px;
  line-height:1;
  opacity:.82;
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
  pointer-events:none;
}
.video-tile:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:3px;
}
@media (hover:hover) and (pointer:fine) {
  .video-tile:hover {
    z-index:2;
    transform:scale(1.035);
    border-color:#ffffff66;
    box-shadow:0 14px 38px rgba(0,0,0,.40);
  }
  .video-tile:hover .video-tile-play {
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08);
    background:rgba(0,0,0,.58);
  }
}

body.video-modal-open { overflow:hidden; }
.portfolio-video-modal {
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:#000;
}
.portfolio-video-modal[hidden] { display:none !important; }
.portfolio-video-stage {
  width:100vw;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.portfolio-video-stage video {
  display:block;
  width:100%;
  height:100%;
  max-width:100vw;
  max-height:100dvh;
  object-fit:contain;
  background:#000;
}
.portfolio-video-close {
  position:fixed;
  z-index:10001;
  top:max(14px,env(safe-area-inset-top));
  right:max(16px,env(safe-area-inset-right));
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0 0 4px;
  border:1px solid #ffffff70;
  border-radius:50%;
  background:rgba(0,0,0,.56);
  color:#fff;
  font:300 34px/1 Arial,sans-serif;
  cursor:pointer;
  backdrop-filter:blur(5px);
}
.portfolio-video-close:hover { background:rgba(28,28,28,.84); }
.portfolio-video-close:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:3px;
}

@media (max-width:900px) {
  .video-mosaic { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .video-mosaic {
    grid-template-columns:1fr;
    gap:14px;
    margin-top:28px;
  }
  .video-tile-play {
    width:50px;
    height:50px;
    font-size:18px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .video-tile,
  .video-tile-play { transition:none; }
  .video-tile:hover { transform:none; }
}