/* Site Giacomo Genna : ghostwriting LinkedIn des dirigeants horlogers */

/* Polices hébergées sur le site (sous-ensemble latin, fichiers Google Fonts) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 600;font-display:swap;src:url(../fonts/bricolage-grotesque.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500.woff2) format('woff2')}

:root{
  --black:#12110F; --black-2:#27231D; --band:#2A2826;
  --light:#F4F0E8; --light-2:#EAE4D8; --card:#FBF9F5;
  --ink:#161513; --ink-2:#57524A; --grey:#B3ADA2; --grey-2:#CFC9BE;
  --rule:#DCD5C8; --rule-2:#D8D0C2;
  --gold:#D4B78A; --gold-ink:#7E6130;
  --red:#B5523B; --red-light:#A3462F; --red-dark:#D97A60;
  --f-title:'Bricolage Grotesque',sans-serif;
  --f-text:'Instrument Sans',sans-serif;
  --f-mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;-webkit-font-smoothing:antialiased;background:var(--black);font-family:var(--f-text);font-size:18px;line-height:1.6;color:var(--ink)}
img{max-width:100%}
a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{opacity:.75}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,p,blockquote,ul,dl,dd{margin:0}
[id]{scroll-margin-top:84px}

.wrap{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px}
.section{padding-top:136px;padding-bottom:136px}
@media (max-width:720px){
  .section{padding-top:88px;padding-bottom:88px}
  .wrap{padding-left:20px;padding-right:20px}
}

/* Typo */
.eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-light)}
.on-dark .eyebrow,.eyebrow--dark{color:var(--red-dark)}
.h2{font-family:var(--f-title);font-weight:600;font-size:clamp(38px,4.6vw,62px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.lead{color:var(--ink-2);font-size:20px;text-wrap:pretty}
.stack{display:flex;flex-direction:column;gap:22px}

/* Boutons */
.btn{display:inline-block;text-decoration:none;border-radius:5px;font-weight:600;padding:18px 30px;font-size:16px;text-align:center}
.btn--gold{background:var(--gold);color:var(--black);padding:20px 34px;font-size:17px}
.btn--light{background:var(--light);color:var(--black)}
.btn--dark{background:var(--black);color:var(--light)}

/* Header + hero */
.top{background:radial-gradient(120% 70% at 50% 0%,var(--black-2) 0%,var(--black) 60%);color:var(--light)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--light);transition:background-color .4s ease,box-shadow .4s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding-top:24px;padding-bottom:24px;flex-wrap:wrap;transition:padding .4s ease}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:38px;height:38px;object-fit:contain}
.brand span{font-family:var(--f-title);font-weight:600;font-size:18px;letter-spacing:-.01em}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 32px}
.nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--light);white-space:nowrap}
.nav .btn-outline{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;border-radius:5px;border:1px solid var(--gold);color:var(--gold);flex-shrink:0}
@media (max-width:720px){
  .nav .nav-link{display:none}
  .header{flex-wrap:nowrap;gap:12px}
  .brand{gap:10px}
  .brand img{width:32px;height:32px}
  .brand span{font-size:16px;white-space:nowrap}
  .nav .btn-outline{font-size:12px;letter-spacing:.04em;padding:10px 12px}
}

.hero{padding-top:146px}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px;max-width:1080px;margin:0 auto}
.hero .eyebrow{color:var(--red-dark)}
.hero h1{font-family:var(--f-title);font-weight:600;font-size:clamp(46px,7vw,100px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.hero-sub{font-size:clamp(19px,1.8vw,23px);line-height:1.45;color:var(--grey);max-width:30em;text-wrap:balance}
.hero .btn{margin-top:6px}
@media (max-width:720px){.hero{padding-top:122px}.hero-inner{gap:26px}}

.dial{height:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.dial--top{margin-top:64px;background:linear-gradient(90deg,var(--gold) 0 1px,transparent 1px) 0 0/60px 16px repeat-x,linear-gradient(90deg,rgba(212,183,138,.45) 0 1px,transparent 1px) 0 100%/12px 8px repeat-x}
.dial--bottom{background:repeating-linear-gradient(90deg,var(--gold) 0 1px,transparent 1px 60px) left bottom/100% 16px no-repeat,repeating-linear-gradient(90deg,rgba(212,183,138,.45) 0 1px,transparent 1px 12px) left top/100% 8px no-repeat}
@media (max-width:720px){.dial--top{margin-top:43px}}

/* Bénéfices */
.benefits{background:var(--band);color:var(--light)}
.benefits-grid{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1px;background:rgba(255,255,255,.1)}
.benefits-grid > div{flex:1 1 260px;background:var(--band);padding:44px 36px;display:flex;align-items:center;justify-content:center;text-align:center}
.benefits-grid p{font-family:var(--f-title);font-weight:500;font-size:clamp(21px,1.9vw,26px);line-height:1.25;letter-spacing:-.015em;text-wrap:balance}

/* Fonds */
.bg-light{background:var(--light)}
.bg-light-2{background:var(--light-2)}
.bg-dark{background:var(--black);color:var(--light)}

/* Problème */
.split{display:flex;flex-wrap:wrap;gap:56px 96px;align-items:flex-start}
.sticky{position:sticky;top:112px}
@media (max-width:900px){.sticky{position:static}}
.problem-intro{flex:1 1 340px}
.problem-intro .lead{font-size:19px}
.problem-intro .strong{font-size:20px;font-weight:600}
.problem-list{flex:1.2 1 460px;min-width:0;display:flex;flex-direction:column;list-style:none;padding:0}
.problem-list li{padding:32px 0;border-top:1px solid var(--ink);font-size:clamp(20px,1.8vw,24px);line-height:1.45;text-wrap:pretty}
.problem-list li:last-child{border-bottom:1px solid var(--ink)}

/* Mécanisme */
.cards{display:flex;flex-wrap:wrap;gap:20px;list-style:none;padding:0}
.cards li{flex:1 1 280px;background:var(--card);padding:40px 36px 44px;display:flex;flex-direction:column;gap:22px}
.cards .num{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--red-light)}
.cards p{font-family:var(--f-title);font-weight:500;font-size:clamp(21px,1.9vw,25px);line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}

/* À propos */
.about{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:56px 96px}
.portrait{flex:0 0 auto;align-self:center;width:min(380px,100%);aspect-ratio:1/1;border-radius:50%;padding:10px;border:1px solid rgba(212,183,138,.5);position:relative}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:50%}
.second-hand{position:absolute;inset:-1px;border-radius:50%;pointer-events:none;animation:gg-sweep 60s linear infinite}
.second-hand span{position:absolute;top:-16px;left:50%;width:1.5px;height:34px;margin-left:-.75px;background:var(--red);border-radius:1px;box-shadow:0 0 0 2px var(--black)}
@keyframes gg-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.second-hand{animation:none}}
.about-text{flex:1 1 440px;min-width:0;max-width:640px;display:flex;flex-direction:column;gap:22px}
.about-text .h2{margin-bottom:8px}
.about-text p.body{color:var(--grey-2);text-wrap:pretty}
.about-quote{margin-top:10px;padding-top:26px;border-top:1px solid rgba(212,183,138,.4);font-family:var(--f-title);font-weight:500;font-size:clamp(24px,2.4vw,30px);line-height:1.25;letter-spacing:-.015em;color:var(--gold);text-wrap:balance}
.about-text .cta{display:flex;padding-top:10px}

/* Exemples */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 40px}
.case{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:14px;margin-bottom:56px}
.case h3{padding-top:14px;border-top:1px solid var(--rule);font-family:var(--f-title);font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.case dl{display:contents;font-size:16px}
.case dt{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.case dd{margin:4px 0 0}
/* Le chiffre d'abord : ce que le post a produit, en grand */
.case-figure{display:flex;align-items:baseline;gap:12px;padding-top:22px;border-top:1px solid var(--ink);font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-light)}
.case-figure strong{font-family:var(--f-title);font-weight:600;font-size:clamp(72px,7vw,104px);line-height:.85;letter-spacing:-.045em;color:var(--ink);text-transform:none}
.case-meta{font-size:15px;color:var(--ink-2)}
.shot{margin-top:10px;aspect-ratio:618/1647;cursor:zoom-in;background:#fff;border:1px solid var(--rule);box-shadow:0 24px 48px -28px rgba(18,17,15,.35);padding:0;display:block;width:100%}
.shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:top}
.shot-link{justify-self:start;font-weight:500;background:none;border:0;padding:0;font:inherit;font-weight:500;color:inherit;cursor:zoom-in;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.shot-link:hover{opacity:.75}

/* Accompagnement */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:20px}
.offer{background:var(--card);padding:48px 44px;display:flex;flex-direction:column;gap:28px}
@media (max-width:720px){.offer{padding:36px 24px}}
.offer h3{font-family:var(--f-title);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.rules{padding:0;list-style:none;display:flex;flex-direction:column;font-size:17px}
.rules li{padding:14px 0;border-top:1px solid var(--rule)}
.rules li:last-child{border-bottom:1px solid var(--rule)}
.rules .muted{color:var(--ink-2)}
.offer .note{margin-top:auto;padding:18px 20px;background:var(--black);color:var(--light);font-size:16px;font-weight:500}
.price-note{text-align:center;color:var(--ink-2);font-size:17px}

/* Citation */
.quote{background:var(--band);color:var(--light)}
.quote-inner{max-width:1100px;margin:0 auto;padding:120px 32px;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.quote-inner img{width:40px;height:40px;object-fit:contain}
.quote blockquote{font-family:var(--f-title);font-weight:500;font-size:clamp(34px,4.6vw,64px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
@media (max-width:720px){.quote-inner{padding:88px 20px}}

/* Pour qui */
.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:20px}
.fit{padding:48px 44px;display:flex;flex-direction:column;gap:24px}
@media (max-width:720px){.fit{padding:36px 24px}}
.fit--yes{background:var(--black);color:var(--light)}
.fit--no{border:1px solid var(--ink)}
.fit h2{font-family:var(--f-title);font-weight:600;font-size:clamp(30px,3vw,40px);line-height:1.05;letter-spacing:-.025em}
.fit ul{padding:0;list-style:none;display:flex;flex-direction:column;font-size:18px}
.fit li{padding:14px 0;display:grid;grid-template-columns:30px 1fr}
.fit--yes li{border-top:1px solid rgba(255,255,255,.12)}
.fit--yes li span{color:var(--gold)}
.fit--no li{border-top:1px solid var(--rule)}
.fit-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 32px;text-align:center}
.fit-cta p{font-family:var(--f-title);font-weight:600;font-size:32px;letter-spacing:-.02em}

/* FAQ */
.faq{border-top:1px solid var(--rule)}
.faq-head{flex:1 1 300px}
.faq-list{display:flex;flex-direction:column;flex:2 1 540px;min-width:0}
.faq details{border-top:1px solid var(--rule);padding:24px 0}
.faq details:first-child{border-top-color:var(--ink)}
.faq details:last-child{border-bottom:1px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-size:20px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{color:var(--gold-ink);font-size:26px;line-height:1;transition:transform .2s;flex-shrink:0}
.faq details[open] .pm{transform:rotate(45deg)}
.faq details p{margin:14px 0 0;color:var(--ink-2);max-width:40em}

/* CTA final + footer */
.final{background:radial-gradient(100% 80% at 50% 100%,var(--black-2) 0%,var(--black) 65%);color:var(--light)}
.final-inner{max-width:960px;margin:0 auto;padding:128px 32px 136px;display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
@media (max-width:720px){.final-inner{padding:88px 20px}}
.final-inner img{width:64px;height:64px;object-fit:contain}
.final h2{font-family:var(--f-title);font-weight:600;font-size:clamp(48px,7vw,96px);line-height:.98;letter-spacing:-.035em}
.final .hook{font-family:var(--f-title);font-weight:500;font-size:clamp(22px,2.2vw,28px);line-height:1.3;letter-spacing:-.015em;max-width:30em;text-wrap:balance}
.final .sub{font-size:20px;max-width:32em;color:var(--grey);text-wrap:pretty}
.final .avail{font-size:16px;color:var(--grey)}
.final .avail strong{color:var(--gold);font-weight:600}
.footer{border-top:1px solid rgba(255,255,255,.1)}
.footer .wrap{padding-top:28px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--grey)}
.footer button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.footer button:hover{opacity:.75}

/* Visionneuse */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(18,17,15,.88);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:48px 24px;cursor:zoom-out;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none}
.lightbox:not([open]){display:none}
.lightbox::backdrop{background:transparent}
.lightbox img{display:block;width:min(680px,100%);height:auto;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .close{position:fixed;top:18px;right:24px;color:var(--light);font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;cursor:pointer}
body.no-scroll{overflow:hidden}

/* Bandeau cookies */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:560px;margin-left:auto;background:var(--card);color:var(--ink);border:1px solid var(--rule);box-shadow:0 24px 48px -20px rgba(18,17,15,.45);padding:22px 24px;display:flex;flex-direction:column;gap:16px;font-size:15px;line-height:1.5}
.cookie[hidden]{display:none}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-actions button{font:inherit;font-weight:600;font-size:15px;border-radius:5px;padding:12px 20px;cursor:pointer}
.cookie-accept{background:var(--black);color:var(--light);border:1px solid var(--black)}
.cookie-refuse{background:transparent;color:var(--ink);border:1px solid var(--ink)}

/* Page mentions légales */
.legal-body{background:var(--light);font-size:17px;line-height:1.65}
.legal-top{background:var(--black);color:var(--light)}
.legal-top .back{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--gold);white-space:nowrap;flex-shrink:0}
.legal-head{max-width:820px;margin:0 auto;padding:72px 32px 88px;display:flex;flex-direction:column;gap:18px}
.legal-head .eyebrow{color:var(--red-dark)}
.legal-head h1{font-family:var(--f-title);font-weight:600;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.03em}
.legal-head .date{color:var(--grey);font-size:16px}
.legal-main{max-width:820px;margin:0 auto;padding:72px 32px 120px;display:flex;flex-direction:column;gap:64px}
@media (max-width:720px){.legal-head,.legal-main{padding-left:20px;padding-right:20px}}
.legal-nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px;font-weight:500}
.legal-section{display:flex;flex-direction:column;gap:28px}
.legal-section h2{font-family:var(--f-title);font-weight:600;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.02em;padding-bottom:18px;border-bottom:1px solid var(--rule-2)}
.legal-block{display:flex;flex-direction:column;gap:10px}
.legal-block h3{font-size:13px;font-family:var(--f-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--red-light)}
.legal-block ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.legal-section p,.legal-block p{text-wrap:pretty}
.legal-body strong{font-weight:600}
.legal-footer{background:var(--black);color:var(--grey)}

/* ------------------------------------------------------------------
   Mouvement et profondeur
   Tout ce qui se cache avant d'apparaître dépend de la classe .js
   (posée dans le <head>) : sans JavaScript, la page reste lisible.
   ------------------------------------------------------------------ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gold-line:rgba(212,183,138,.45);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow-card:0 1px 0 rgba(18,17,15,.04),0 16px 36px -26px rgba(18,17,15,.22),0 40px 70px -56px rgba(18,17,15,.18);
}

/* 5. Profondeur : grain sur les fonds sombres */
.top,.benefits,.bg-dark,.quote,.final{position:relative;isolation:isolate}
.top::after,.benefits::after,.bg-dark::after,.quote::after,.final::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.09;mix-blend-mode:soft-light;pointer-events:none}
.top{overflow:clip}

/* 5. En-tête collant qui se resserre */
.site-header.is-scrolled{background-color:rgba(18,17,15,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(212,183,138,.18)}
.site-header.is-scrolled .header{padding-top:12px;padding-bottom:12px}

/* 5. Ombres sur les cartes */
.cards li,.offer{box-shadow:var(--shadow-card)}
.fit--yes{box-shadow:0 40px 80px -48px rgba(18,17,15,.6)}

/* 1. Hero vivant : la lunette graduée qui tourne derrière le titre */
.bezel{position:absolute;left:50%;top:clamp(40px,8vw,90px);width:min(1180px,160vw);aspect-ratio:1;margin-left:calc(min(1180px,160vw) / -2);border-radius:50%;pointer-events:none;z-index:-1;opacity:.5;
  background:
    repeating-conic-gradient(from 0deg,rgba(212,183,138,.55) 0 .3deg,transparent .3deg 30deg),
    repeating-conic-gradient(from 0deg,rgba(212,183,138,.28) 0 .18deg,transparent .18deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 90%,#000 90.4%,#000 96%,transparent 96.4%);
  mask:radial-gradient(closest-side,transparent 90%,#000 90.4%,#000 96%,transparent 96.4%);
  animation:gg-sweep 240s linear infinite}
.bezel::after{content:"";position:absolute;inset:3.2%;border-radius:50%;border:1px solid rgba(212,183,138,.14)}
.hero{position:relative}

/* 1. Hero vivant : la réglette qui défile comme une lunette */
.dial--top{animation:dial-run 9s linear infinite}
@keyframes dial-run{to{background-position:60px 0,60px 100%}}

/* 1. Hero vivant : entrée du titre ligne par ligne */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes word-in{from{transform:translateY(105%)}to{transform:none}}
@keyframes show{to{opacity:1}}
.js .hero .eyebrow{animation:rise .9s var(--ease-out) .1s both}
.js .hero-sub{animation:rise .9s var(--ease-out) 1.05s both}
.js .hero .btn{animation:rise .9s var(--ease-out) 1.2s both}
.js .dial--top{opacity:0;animation:show 1.2s ease 1.4s forwards,dial-run 9s linear infinite}
.js .hero h1:not(.is-split){opacity:0;animation:show 0s 2s forwards}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w > span{display:inline-block;animation:word-in 1s var(--ease-out) both;animation-delay:calc(.25s + var(--i) * 55ms)}

/* 2. Apparitions au défilement */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* 3. Le mécanisme : un fil doré qui relie les cartes, chacune s'allume */
.cards{position:relative}
.cards::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold-line);z-index:1}
.cards li{position:relative;transition:box-shadow .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 350ms + 200ms)}
.cards li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 350ms)}
.cards .num{display:flex;align-items:center;gap:12px;transition:color .6s ease;transition-delay:calc(var(--i,0) * 350ms + 300ms)}
.cards .num::before{content:"";width:9px;height:9px;border-radius:50%;border:1px solid currentColor;transition:background-color .6s ease,box-shadow .6s ease;transition-delay:inherit}
.cards.is-lit li::before{transform:scaleX(1)}
.cards.is-lit li{transform:translateY(-4px);box-shadow:0 1px 0 rgba(18,17,15,.04),0 22px 44px -30px rgba(126,97,48,.4),0 44px 70px -58px rgba(18,17,15,.2)}
.cards.is-lit .num{color:var(--gold-ink)}
.cards.is-lit .num::before{background:var(--gold);box-shadow:0 0 0 4px rgba(212,183,138,.25)}

/* 4. Les captures défilent dans leur cadre au survol */
.shot{aspect-ratio:4/5;overflow:hidden;position:relative}
.shot img{height:auto;object-fit:initial;transition:transform 5s cubic-bezier(.45,0,.25,1)}
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,rgba(18,17,15,.18));pointer-events:none;transition:opacity .6s ease}
@media (hover:hover){
  .shot:hover img,.shot:focus-visible img{transform:translateY(var(--scroll,0px))}
  .shot:hover::after,.shot:focus-visible::after{opacity:0}
}

/* 6. Boutons qui réagissent : aimantation et pression */
.btn,.nav .btn-outline{--mx:0px;--my:0px;--s:1;display:inline-block;transform:translate(var(--mx),var(--my)) scale(var(--s));transition:transform .45s var(--ease-out),opacity .2s ease,box-shadow .45s var(--ease-out)}
.btn.is-magnet,.nav .btn-outline.is-magnet{transition:transform .15s linear,opacity .2s ease,box-shadow .45s var(--ease-out)}
.btn:active,.nav .btn-outline:active{--s:.96}
.btn--gold:hover{box-shadow:0 18px 40px -16px rgba(212,183,138,.55)}
.btn:hover,.nav .btn-outline:hover{opacity:1}
.btn--light:hover,.btn--dark:hover{box-shadow:0 18px 40px -18px rgba(18,17,15,.5)}

/* Animations réduites : tout s'affiche, rien ne bouge */
@media (prefers-reduced-motion:reduce){
  .bezel,.dial--top,.hero h1 .w > span,.js .hero .eyebrow,.js .hero-sub,.js .hero .btn{animation:none}
  .js .dial--top,.js .hero h1:not(.is-split){opacity:1;animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .cards li,.cards li::before,.cards .num,.shot img,.btn,.nav .btn-outline,.site-header,.header{transition:none}
  .cards li::before{transform:scaleX(1)}
}

/* En-tête : le bouton se raccourcit sur mobile */
@media (max-width:720px){.sm-hide{display:none}}

/* Preuve sous le bouton du hero */
.hero-proof{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);max-width:44em;line-height:1.7;text-wrap:balance}
.js .hero-proof{animation:rise .9s var(--ease-out) 1.35s both}
@media (prefers-reduced-motion:reduce){.js .hero-proof{animation:none}}

/* Agenda de réservation intégré */
.final-inner{padding-bottom:56px}
.cal-wrap{padding-bottom:120px;scroll-margin-top:72px}
.cal-embed{min-height:560px;max-width:1040px;margin:0 auto;background:rgba(244,240,232,.03);border:1px solid rgba(212,183,138,.22);border-radius:8px;overflow:auto}
.cal-fallback{max-width:1040px;margin:16px auto 0;text-align:center;font-size:14px;color:var(--grey)}
@media (max-width:720px){.cal-wrap{padding-bottom:72px}.cal-embed{min-height:640px}}