/* Watch Society v3 : complète site-v1.css */
/* ===== v3 ===== */
/* image fixe sous le film : jamais d'écran noir si la vidéo ne se lance pas */
.hero .bg{background:#000 url(https://rqvnfwolesdskjplsnhf.supabase.co/storage/v1/object/public/site/img/film.jpg) center/cover}
/* boutons de modèles retirés : on parcourt au carrousel */
.cat .models{display:none}
.cat dl{margin-bottom:0}

/* Version téléphone allégée */
.m-only{display:none}
.sticky{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;display:none;align-items:center;justify-content:center;height:52px;background:var(--noir);color:var(--ivoire);border:1px solid rgba(247,246,243,.28);box-shadow:0 10px 30px rgba(0,0,0,.25);text-decoration:none;font:500 11px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.sticky.show{transform:none}
.ctabs{gap:0;border:1px solid var(--filet-n);margin-top:28px}
.ctabs button{flex:1;background:transparent;border:0;border-right:1px solid var(--filet-n);color:var(--gris);font:500 12px/1 var(--body);letter-spacing:.18em;padding:16px 0;cursor:pointer;transition:color .3s,background .3s}
.ctabs button:last-child{border-right:0}
.ctabs button[aria-selected="true"]{color:var(--noir);background:var(--ivoire)}
.punch{font-family:var(--display);font-stretch:125%;font-weight:300;font-size:20px;line-height:1.45;letter-spacing:.02em;color:inherit;margin:8px 0 0;max-width:30ch}
.punch b{font-weight:400}
@media (max-width:760px){
  .m-only{display:block}
  .ctabs.m-only{display:flex}
  .sticky{display:flex}
  .m-hide{display:none!important}
  /* hero épuré : le nom, une phrase, un bouton */
  .nav .go{display:none}
  .hero .top{display:none}
  .hero .line{border-top:0;padding-top:0;gap:28px}
  .hero .line p{font-size:0;max-width:none}
  .hero .line p strong{margin:0;font-size:15px;line-height:1.6;letter-spacing:.14em}
  .hero .wordmark{margin-bottom:18px}
  .hero .base{padding-bottom:44px}
  .hero .base>.label{display:none}
  .hero .cta{justify-content:center}
  /* collection */
  .coll .intro>p{display:none}
  .cat.off{display:none}
  .cat{padding-block:36px 48px;border-top:0}
  .cat h3{margin:14px 0 10px}
  .cat .desc{display:none}
  .cat dl div:not(:first-child){display:none}
  /* comparatif en une phrase */
  .cmp .lede,.cmp .ask,.cmp .duel,.cmp .capbar,.cmp .verdict,.cmp .fine{display:none}
  .how{display:none}
  /* adhésion : les deux cartes et leurs prix restent */
  .cards .tbl-wrap,.cards .sub-h,.cards .budget,.cards .steps{display:none}
  .join .perks{display:none}
  .choice small{display:none}
  #form-body{gap:24px!important}
  #form-body>.fields2:first-child,.choice{grid-template-columns:1fr 1fr}
  .choice label{padding:14px}
  .submit{width:100%}
  footer{padding-bottom:80px}
}

/* ===== v3 : barre du haut alignée, survol à la souris ===== */
.nav .links{align-items:center}
.nav .links a,.nav .go{position:relative;display:inline-block;font:500 10px/1 var(--body);letter-spacing:.28em;padding:0 0 7px;border-bottom:0}
.nav .go{align-self:center}
.nav .go::after,.nav .links a::after{content:"";position:absolute;left:0;right:.28em;bottom:0;height:1px;background:var(--ivoire);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.nav .go::after{opacity:.45}
.nav .links a::after{transform:scaleX(0)}
@media (hover:hover) and (pointer:fine){
  .nav .links a:hover::after{transform:scaleX(1)}
  .nav .go:hover::after{opacity:1}
}

/* ===== v3 : le marine du comparatif rappelé dans tout le site ===== */
.coll{background:radial-gradient(120% 60% at 50% 100%,rgba(20,35,60,.55),transparent 70%),var(--noir)}
.trust{background:linear-gradient(180deg,var(--noir),#0A1220)}
.cmp{background:linear-gradient(180deg,#0A1220 0,var(--surf) 180px)}
.manifest .rule{opacity:.8}
.manifest p.q{color:var(--marine)}
.how .label,.faq .label,.cards .head h2,.budget .k{color:var(--marine)}
.join{background:radial-gradient(80% 70% at 0% 0%,rgba(20,35,60,.7),transparent 70%),var(--encre)}
footer{background:linear-gradient(180deg,var(--noir),#070C16)}
.submit:hover{background:var(--acier)}

/* ===== v3 : comparatif ergonomique ===== */
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 36px}
.tile{position:relative;display:grid;justify-items:start;gap:6px;text-align:left;padding:18px 18px 20px;background:rgba(247,246,243,.03);border:1px solid var(--line);color:#AEB9CB;cursor:pointer;font:inherit;overflow:hidden;transition:border-color .35s,background .35s,transform .35s}
.tile img{height:84px;width:auto;margin:0 auto 10px;justify-self:center;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)) grayscale(.4) brightness(.8);transition:filter .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.tile .k{font:500 10px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:#6F7D95}
.tile b{font-family:var(--display);font-stretch:125%;font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:14px;color:var(--ivoire)}
.tile small{font-size:12px}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ivoire);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tile[aria-checked="true"]{border-color:rgba(247,246,243,.55);background:rgba(247,246,243,.07)}
.tile[aria-checked="true"]::after{transform:scaleX(1)}
.tile[aria-checked="true"] img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.6));transform:translateY(-4px) scale(1.06)}
@media (hover:hover) and (pointer:fine){.tile:hover{border-color:rgba(247,246,243,.35)}.tile:hover img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}}
.tile:focus-visible{outline:1px solid var(--acier);outline-offset:3px}
.slide{margin:0 0 44px;max-width:640px}
.slide label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.slide label span{font:500 10px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:#6F7D95}
.slide output{font-family:var(--display);font-stretch:125%;font-size:18px;letter-spacing:.08em;color:var(--ivoire)}
.slide input{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0;cursor:pointer;--p:60%}
.slide input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--ivoire) var(--p),rgba(196,208,227,.18) var(--p))}
.slide input::-moz-range-track{height:3px;background:rgba(196,208,227,.18)}
.slide input::-moz-range-progress{height:3px;background:var(--ivoire)}
.slide input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--ivoire);border:0;margin-top:-11.5px;box-shadow:0 0 0 6px rgba(247,246,243,.12);transition:box-shadow .3s}
.slide input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--ivoire);border:0;box-shadow:0 0 0 6px rgba(247,246,243,.12)}
.slide input:active::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(247,246,243,.18)}
.slide input:focus-visible{outline:1px solid var(--acier);outline-offset:6px}
.slide .ticks{display:flex;justify-content:space-between;padding:6px 13px 0;font-size:11px;color:#6F7D95}
.pics img{animation:pop .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}

/* graphiques animés */
.charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;margin-top:12px}
.chart{margin:0;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.chart figcaption{font:500 10px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:#6F7D95}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;margin-top:auto}
.bar-col{display:grid;gap:12px;text-align:center;font-size:12px;align-content:end}
.bar-col small{color:#6F7D95}
.bar-v{display:flex;flex-direction:column;justify-content:flex-end;height:210px}
.bar-v b{font-weight:400;color:var(--ivoire);font-size:14px;margin-bottom:8px;font-variant-numeric:tabular-nums}
.bar-v i{display:block;height:0;transition:height 1.1s cubic-bezier(.2,.7,.2,1)}
.bar-col.buy i{background:repeating-linear-gradient(135deg,var(--buy) 0 6px,#6A7FA1 6px 9px)}
.bar-col.ws i{background:var(--ivoire)}
.lc{width:100%;height:auto;display:block;overflow:visible}
.lc .grid line{stroke:rgba(196,208,227,.1)}
.lc .grid text{fill:#6F7D95;font:400 10px var(--body)}
.lc .l{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.lc .l.buy{stroke:var(--buy)}
.lc .l.ws{stroke:var(--ivoire)}
.lc path[fill]{opacity:0;transition:opacity 1s .6s}
.lc #lc-dots circle{opacity:0;transition:opacity .4s 1.3s}
.lc circle.buy,.lc text.buy{fill:var(--buy)}.lc circle.ws,.lc text.ws{fill:var(--ivoire)}
.lc #lc-dots text{font:400 12px var(--body);opacity:0;transition:opacity .4s 1.3s}
.cmp.in .lc #lc-dots text{opacity:1}
.cmp.in .lc .l{animation:drawl 1.4s cubic-bezier(.5,0,.2,1) forwards}
.cmp.in .lc .l.ws{animation-delay:.25s}
.cmp.in .lc path[fill],.cmp.in .lc #lc-dots circle{opacity:1}
@keyframes drawl{to{stroke-dashoffset:0}}
.legend{display:flex;gap:22px;font-size:12px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend span::before{content:"";width:16px;height:2px;background:var(--ivoire)}
.legend .buy::before{background:var(--buy)}
@media (max-width:1000px){.pick{grid-template-columns:1fr 1fr}.charts{grid-template-columns:1fr}}
@media (max-width:760px){.cmp .pick,.cmp .slide,.cmp .charts{display:none}}
@media (prefers-reduced-motion:reduce){.lc .l{stroke-dashoffset:0}.lc path[fill],.lc #lc-dots circle{opacity:1}.bar-v i{transition:none}}

/* ===== v3 : aiguille de seconde Datejust, à cheval entre le film et le manifeste ===== */
.hero .scroll,.manifest .rule{display:none}
.manifest{position:relative;padding-top:clamp(150px,16vw,210px)}
.hand{position:absolute;left:50%;top:-82px;width:24px;height:200px;margin-left:-12px;z-index:3;color:#fff;mix-blend-mode:difference;pointer-events:none}
.hand svg{width:100%;height:100%;display:block;overflow:visible}
.hand .sweep{transform-origin:12px 40px;transform-box:view-box;animation:sweep 8s cubic-bezier(.45,0,.55,1) infinite}
/* balancement lent, comme le balayage continu d'un mouvement automatique */
@keyframes sweep{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@media (max-width:760px){.hand{top:-34px;height:150px;width:18px;margin-left:-9px}.manifest{padding-top:140px}}
@media (prefers-reduced-motion:reduce){.hand .sweep{animation:none}}

@media (max-width:760px){.nav .go{display:none}}

/* ===== v3.1 : collection sur téléphone ===== */
@media (max-width:760px){
  .coll{padding-top:72px}
  .coll .intro{margin-bottom:8px;gap:0}
  .coll .intro>div:first-child{width:100%}
  .ctabs.m-only{display:grid;grid-template-columns:repeat(4,1fr);width:100%;flex-basis:100%;margin-top:28px;border:0;gap:8px}
  .ctabs button{border:1px solid var(--filet-n);padding:15px 0;font-size:13px;letter-spacing:.12em}
  .ctabs button:last-child{border-right:1px solid var(--filet-n)}
  .ctabs button[aria-selected="true"]{border-color:var(--ivoire)}
  .cat{padding-block:28px 32px}
  .orbit{height:340px;--ww:104px}
  .orbit .count{top:0}
  .sticky{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire);height:50px}
}

/* ===== v3.2 : offre Submariner sur téléphone ===== */
.offer{display:none}
@media (max-width:760px){
  .cmp h2{margin-bottom:8px}
  .offer.m-only{display:grid;justify-items:center;text-align:center;gap:10px;margin:28px 0 0;padding:32px 20px 30px;border:1px solid var(--line);background:radial-gradient(70% 55% at 50% 30%,rgba(247,246,243,.08),transparent 70%)}
  .offer img{height:150px;width:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6));margin-bottom:6px}
  .offer .o-k{margin:0;font:500 10px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--acier)}
  .offer .o-p{margin:4px 0 0;display:flex;align-items:baseline;gap:10px;color:var(--ivoire)}
  .offer .o-p b{font-family:var(--display);font-stretch:125%;font-weight:300;font-size:46px;line-height:1;letter-spacing:.01em}
  .offer .o-p span{font-size:14px;color:#AEB9CB}
  .offer .o-s{margin:6px 0 0;font-size:14px;line-height:1.6;color:#AEB9CB;max-width:30ch}
}