:root{--blue:#090909;--pink:#fff;--contact-pink:#f5b9cc;--white:#fff;--black:#090909}*{box-sizing:border-box}body{margin:0;background:var(--black);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:6px}[hidden]{display:none!important}#intro,#logo-screen,#menu{height:100svh;min-height:500px;position:relative;overflow:hidden}#intro-video{height:100%;width:100%;object-fit:cover;filter:grayscale(1) contrast(1.2)}#mask{position:absolute;inset:0 0 0 50%;background:#000;transition:transform .65s cubic-bezier(.7,0,.2,1)}#mask.left{transform:translateX(-100%)}.intro-mark{position:absolute;top:36px;left:36px;font-size:15px;line-height:1.1;font-weight:900;letter-spacing:-.5px;color:white;mix-blend-mode:difference}.demo-label{position:absolute;left:36px;bottom:85px;color:white;font-size:10px;letter-spacing:2px}#skip{position:absolute;right:36px;bottom:36px;border:1px solid white;background:transparent;color:white;padding:17px 22px;min-width:170px;display:flex;justify-content:space-between}#skip:hover{background:var(--pink);border-color:var(--pink);color:#000}#clock{position:absolute;bottom:41px;left:36px;color:white;font:12px monospace}#logo-screen{background:#000;color:white;display:grid;place-items:center}.logo{font-size:clamp(45px,8vw,120px);font-weight:900;line-height:.83;letter-spacing:-.075em;text-align:center;animation:logo-fade 2.6s both}.logo span{color:var(--pink)}.logo small{display:block;font:10px Arial;letter-spacing:4px;margin-top:32px}@keyframes logo-fade{0%{opacity:0}25%,65%{opacity:1}100%{opacity:0}}#menu{display:flex;background:white;color:var(--blue)}.brand{position:absolute;top:30px;left:30px;z-index:2;font-size:11px;font-weight:bold;letter-spacing:1px}#question{position:absolute;z-index:2;top:13%;left:0;width:100%;text-align:center;font-size:clamp(19px,2.25vw,34px);font-weight:400;color:white;mix-blend-mode:difference;pointer-events:none}.choice{width:50%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;padding:50px 28px}.choice>span{font-size:clamp(22px,3vw,46px);line-height:1.15;letter-spacing:-1.5px}.choice small{display:block;font-size:.71em;letter-spacing:-.7px;margin-top:15px}.choice>span:hover,.choice:focus-visible>span{opacity:.6}.commercial{background:var(--blue);color:white}.choice i{position:absolute;bottom:100px;left:32px;font-size:10px;font-style:normal;letter-spacing:1.5px}.choice b{position:absolute;bottom:90px;right:32px;font-size:30px;font-weight:400}#replay{position:absolute;bottom:27px;left:30px;background:none;border:0;color:var(--blue);font-size:12px}.menu-contact{position:absolute;bottom:30px;right:32px;color:white;font-size:12px;letter-spacing:1px}header{display:flex;align-items:center;justify-content:space-between;padding:30px 36px;color:inherit;font-size:16px}header a:hover{text-decoration:underline}.back{display:flex;align-items:center;gap:18px}.back span{font-size:28px}#gallery{min-height:100svh;background:#fff;color:var(--blue)}.gallery-heading{text-align:center;padding-top:50px}.gallery-heading>p{font-size:10px;letter-spacing:2px}.gallery-heading h1{font-size:clamp(25px,3vw,42px);font-weight:400;letter-spacing:-1px;margin:20px 0}.gallery-heading .note{letter-spacing:0;color:#777;font-size:12px}#grid{display:grid;grid-template-columns:repeat(4,4cm);justify-content:space-evenly;row-gap:150px;padding:100px 24px 150px}.film{width:4cm;text-align:left;background:none;border:0;padding:0;color:var(--blue)}.thumb{width:100%;aspect-ratio:4/3;position:relative;overflow:hidden;background:#ddd}.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.thumb video{opacity:0;transition:opacity .25s}.film:hover video,.film:focus-visible video{opacity:1}.thumb img{filter:grayscale(1)}.thumb video{filter:grayscale(1)}.film:hover video,.film:focus-visible video{filter:grayscale(0)}.film strong{display:block;font-size:12px;font-weight:400;margin-top:15px}.film small{display:block;color:#777;font-size:9px;margin-top:6px;letter-spacing:1px}footer{display:flex;justify-content:space-between;margin:0 36px;padding:24px 0;border-top:1px solid #ddd;font-size:9px;letter-spacing:2px}#contact{background:var(--blue);color:var(--pink);min-height:100svh}.contact-body{padding:13vh 12vw}.contact-body>p{font-size:11px;letter-spacing:2px}.contact-body h1{font-size:clamp(65px,11vw,160px);font-weight:400;letter-spacing:-6px;margin:45px 0}.contact-body #contact-details{font-size:20px;color:white}dialog{border:1px solid #333;padding:26px;background:#080808;color:white;width:min(950px,90vw)}dialog::backdrop{background:#000d}dialog video{width:100%;max-height:70svh}#close-player{display:block;margin:0 0 20px auto;background:none;border:0;color:var(--pink)}dialog p{font-size:13px}@media(max-width:720px){#grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 25px;padding:60px 25px}.film{width:100%}.choice{padding:20px 12px}.choice>span{font-size:25px;letter-spacing:-1px}.choice small{font-size:17px}.choice i{left:15px;font-size:8px;max-width:100px;text-align:left;line-height:1.5}.choice b{right:15px}#question{top:20%;padding:0 20px}.brand{left:20px}.gallery-heading{padding:35px 20px 0}header{padding:22px}footer span{display:none}.contact-body h1{letter-spacing:-3px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Typographie cinématographique reprise du carton d’introduction. */
.brand,#question,.choice>span,.gallery-heading h1,.contact-body h1,.film strong{font-family:Arial,Helvetica,sans-serif;font-weight:900;text-transform:uppercase;line-height:1.1;letter-spacing:-.045em}
.choice small{font-weight:400;font-size:.55em;letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
header,.menu-contact,#replay,.film small,footer,.gallery-heading>p,.contact-body>p{font-family:Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:2px}
header{font-size:13px}
#contact-details{display:flex;flex-direction:column;align-items:flex-start;gap:18px;text-align:left;font-family:Arial,Helvetica,sans-serif;letter-spacing:.03em}
#contact-details .email{color:var(--contact-pink);overflow-wrap:anywhere;max-width:100%}
#contact-details a:hover{text-decoration:underline;text-underline-offset:5px}
#contact-details .phone{color:white}
#intro-video:hover{filter:grayscale(0) contrast(1.2)}
dialog video{filter:grayscale(1);transition:filter .3s}
dialog video:hover,dialog video:focus-visible{filter:grayscale(0)}
@media(max-width:720px){.choice>span{font-size:clamp(17px,4.5vw,25px)}.choice small{font-size:12px}.contact-body #contact-details{font-size:clamp(14px,4vw,20px)}}