/* DrinkSafe - drinksafe.fr */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --paper:#F3F7FA;
  --white:#FFFFFF;
  --ink:#13213C;
  --ink-soft:#44506A;
  --sky:#CBE4F1;
  --dot:#2E6BC6;
  --red:#D42A3C;
  --steel:#8C98A6;
  --line:#D5DEE7;
  --radius-s:6px;
  --radius-l:22px;
  --wrap:1180px;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;font-variation-settings:"wdth" 100}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--dot);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:12px;top:12px}

/* Type scale */
h1,h2,h3{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.01em}
h1{font-size:clamp(2.7rem,6.4vw,5.6rem);font-variation-settings:"wdth" 116;line-height:.98}
h2{font-size:clamp(2rem,4vw,3.2rem);font-variation-settings:"wdth" 112}
h3{font-size:1.25rem;font-weight:700;line-height:1.2;font-variation-settings:"wdth" 104}
p{margin:0 0 1em;max-width:62ch}
.lead{font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--ink-soft);line-height:1.5}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}

/* Header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(243,247,250,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{display:flex;align-items:baseline;text-decoration:none;font-size:1.55rem;letter-spacing:-.02em;line-height:1}
.logo b{font-weight:800;font-variation-settings:"wdth" 120}
.logo span{font-weight:300;font-variation-settings:"wdth" 120}
.logo i{font-style:normal;color:var(--red);font-weight:800}
.nav{display:flex;align-items:center;gap:26px}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem}
.nav a:hover{color:var(--dot)}
.nav .lang{border:1px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:600}
.nav .lang:hover{background:var(--ink);color:#fff}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;color:var(--ink)}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  .burger{display:block}
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px 20px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a{padding:12px 0;width:100%;font-size:1.1rem;border-bottom:1px solid var(--line)}
  .nav .lang{margin-top:14px;border-bottom:1px solid var(--ink);width:auto}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--ink);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--red);border-color:var(--red)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* Halftone motif, taken from the printed opercule */
.halftone{background-image:radial-gradient(circle,var(--dot) 1.6px,transparent 2.2px);background-size:14px 14px}

/* Hero */
.hero{position:relative;overflow:hidden;padding:72px 0 0}
.hero-grid > div:first-child{padding-bottom:8px;align-self:center}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
.hero h1{margin-bottom:28px}
.hero .lead{margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:56px}
.hero-visual{position:relative;align-self:stretch;min-height:620px}
.hero-dots{position:absolute;right:-40%;top:0;bottom:0;width:140%;border-top-left-radius:260px;opacity:.22;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.hero-photo{position:absolute;right:0;bottom:0;width:94%;border-radius:var(--radius-l) var(--radius-l) 0 0;overflow:hidden;box-shadow:0 30px 60px -30px rgba(19,33,60,.45)}
.hero-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.facts{position:relative;background:var(--ink);color:#fff}
.facts ul{list-style:none;margin:0 auto;padding:26px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.facts li{display:flex;flex-direction:column;gap:2px;padding-left:18px;border-left:3px solid var(--red)}
.facts strong{font-size:1.15rem;font-variation-settings:"wdth" 110}
.facts span{color:#B8C3D6;font-size:.95rem}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{min-height:0}
  .hero-photo{position:relative;width:100%;border-radius:var(--radius-l)}
  .hero-photo img{aspect-ratio:4/3;object-position:center 30%}
  .hero-dots{display:none}
  .hero-actions{margin-bottom:32px}
  .hero{padding-bottom:32px}
  .facts ul{grid-template-columns:1fr;gap:16px}
}

/* Sections */
section{scroll-margin-top:80px}
.band{padding:110px 0}
.band-white{background:var(--white)}
.band-sky{background:var(--sky)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.split h2{position:sticky;top:110px}
@media (max-width:860px){.band{padding:72px 0}.split{grid-template-columns:1fr;gap:28px}.split h2{position:static}}

/* Problem */
.journey{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.journey li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.journey b{font-weight:700}
.journey span{color:var(--ink-soft)}
@media (max-width:560px){.journey li{grid-template-columns:1fr;gap:2px}}

/* Mechanism */
.mech{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:56px}
.can-stage{position:relative;background:var(--white);border-radius:50%;aspect-ratio:1;max-width:460px;width:100%;margin:0 auto;box-shadow:inset 0 0 0 1px var(--line)}
.can-svg{width:100%;height:auto}
.can-svg .outer{transition:transform .9s cubic-bezier(.6,.05,.25,1),opacity .6s ease .3s}
.can-svg .outer{transform-origin:350px 90px}
.can-svg .open{opacity:0;transition:opacity .5s ease .2s}
.can-svg.s3 .open{opacity:1}
.can-svg.s2 .outer,.can-svg.s3 .outer{transform:translate(120px,-150px) rotate(38deg) scale(.9);opacity:0}
.can-svg .label-s1,.can-svg .label-s2,.can-svg .label-s3{opacity:0;transition:opacity .3s}
.can-svg.s1 .label-s1,.can-svg.s2 .label-s2,.can-svg.s3 .label-s3{opacity:1}
.steps{list-style:none;margin:0 0 28px;padding:0;counter-reset:s}
.steps li{position:relative;padding:18px 0 18px 64px;border-bottom:1px solid rgba(19,33,60,.18);cursor:pointer;transition:opacity .2s}
.steps li:not(.on){opacity:.5}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:16px;width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.steps li.on::before{background:var(--red);border-color:var(--red);color:#fff}
.steps h3{margin-bottom:6px}
.steps p{margin:0;color:var(--ink-soft)}
.step-ctrl{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){.mech{grid-template-columns:1fr;gap:36px}.can-stage{max-width:340px}}

.demo{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;margin-top:96px;padding-top:56px;border-top:1px solid rgba(19,33,60,.18)}
.demo video{width:300px;border-radius:var(--radius-l);background:var(--ink);aspect-ratio:9/16;object-fit:cover}
@media (max-width:760px){.demo{grid-template-columns:1fr;gap:28px;margin-top:64px}.demo video{width:100%;max-width:320px}}

/* Value */
.value{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:3px solid var(--ink)}
.value article{padding:28px 28px 8px 0}
.value article + article{padding-left:28px;border-left:1px solid var(--line)}
.value h3{margin-bottom:12px}
.value ul{margin:0;padding-left:1.1em;color:var(--ink-soft)}
.value li{margin-bottom:8px}
.value li::marker{color:var(--red)}
@media (max-width:860px){.value{grid-template-columns:1fr}.value article + article{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;margin-top:64px}
.gallery figure{margin:0;border-radius:var(--radius-s);overflow:hidden;background:var(--paper)}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.gallery figure:first-child img{aspect-ratio:auto}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery figure:first-child{grid-column:1/-1}.gallery figure:first-child img{aspect-ratio:1}}

/* Proof */
.proof-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;margin-top:48px;align-items:start}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.98rem;min-width:460px}
caption{text-align:left;font-weight:700;padding-bottom:12px;font-size:1.05rem}
th,td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid rgba(19,33,60,.16);vertical-align:top}
thead th{font-size:.85rem;color:var(--ink-soft);font-weight:600;border-bottom:2px solid var(--ink)}
td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}
td a{color:var(--dot);text-underline-offset:3px}
.proof-card{background:var(--white);border-radius:var(--radius-l);overflow:hidden}
.proof-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.proof-card div{padding:24px 26px 12px}
.proof-card h3{margin-bottom:10px}
.note{font-size:.88rem;color:var(--ink-soft);margin-top:14px}
@media (max-width:960px){.proof-grid{grid-template-columns:1fr}}

/* Licence */
.licence{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.licence div{border:2px solid var(--ink);border-radius:var(--radius-s);padding:28px}
.licence div:first-child{background:var(--ink);color:#fff}
.licence div:first-child p{color:#C8D1E0}
.licence h3{margin-bottom:10px}
.licence p{margin:0}
@media (max-width:760px){.licence{grid-template-columns:1fr}}

/* Contact */
.contact{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.contact .halftone{position:absolute;inset:0;opacity:.13;-webkit-mask-image:radial-gradient(circle at 100% 0,#000,transparent 55%);mask-image:radial-gradient(circle at 100% 0,#000,transparent 55%)}
.contact .split{position:relative}
.contact .lead{color:#C8D1E0}
.contact h2{position:static}
.direct{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.direct a{color:#fff;font-weight:700;font-size:1.15rem}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-weight:600;font-size:.92rem}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:2px solid transparent;border-radius:var(--radius-s);padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red)}
textarea{min-height:140px;resize:vertical}
.consent{grid-column:1/-1;font-weight:400;display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:#C8D1E0}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--red)}
.consent a{color:#fff}
.hidden{position:absolute;left:-9999px}
form .btn{grid-column:1/-1;justify-self:start;background:var(--red);border-color:var(--red);color:#fff}
form .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
@media (max-width:560px){form{grid-template-columns:1fr}}

/* Footer */
.site-foot{background:#0E1830;color:#AEB9CC;padding:40px 0;font-size:.9rem}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
.site-foot a{color:#fff}
.site-foot p{margin:0 0 4px;max-width:none}

/* Simple pages */
.page{padding:72px 0 110px}
.page h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:36px}
.page h2{font-size:1.5rem;margin:40px 0 12px;font-variation-settings:"wdth" 108}
.page .wrap{max-width:820px}
.gallery figure:nth-child(3) img{object-position:35% 62%}