/* ============================================================
   Smart Safe Mobilier — styles
   Palette : Noir #0C0C0C · Deep #08080a · Anthracite #2B2B2B
             Or mat #C9A961 · Crème #F4EFE3
   Typo    : Inter
   ============================================================ */

:root{
  --noir:#0C0C0C; --deep:#08080a; --anthra:#2B2B2B;
  --gold:#C9A961; --cream:#F4EFE3;
  --ink:#0C0C0C; --ink-soft:#54503f; --ink-mute:#4a463d;
  --on-dark-mute:#a59c89; --on-dark-faint:#8f8674;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--noir); color:var(--cream);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--gold); color:var(--noir);}
a{color:inherit;}
img,svg{display:block;}
h1,h2,h3{text-wrap:balance;}

@property --p{syntax:'<percentage>'; inherits:false; initial-value:0%;}
@keyframes loadF{0%{opacity:0;}100%{opacity:1;}}
@keyframes upF{from{transform:translateY(.8em);}to{transform:translateY(0);}}
@keyframes accentF{0%{opacity:0;transform:scale(0);}100%{opacity:1;transform:scale(1);}}
@keyframes pulseP{0%{--p:0%;}50%{--p:300%;}100%{--p:300%;}}
@keyframes loadrotF{0%{transform:rotate(0deg) scale(0);}100%{transform:scale(1);}}
@keyframes spotF{
  0%{transform:rotateZ(0deg) scale(1);filter:blur(15px) opacity(.5);}
  20%{transform:rotateZ(-1deg) scale(1.2);filter:blur(16px) opacity(.6);}
  40%{transform:rotateZ(2deg) scale(1.3);filter:blur(14px) opacity(.4);}
  60%{transform:rotateZ(-2deg) scale(1.2);filter:blur(15px) opacity(.6);}
  80%{transform:rotateZ(1deg) scale(1.1);filter:blur(13px) opacity(.4);}
  100%{transform:rotateZ(0deg) scale(1);filter:blur(15px) opacity(.5);}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;}
  html{scroll-behavior:auto;}
}

.gold{color:var(--gold);}

/* ───────── NAV ───────── */
.ssm-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;
}
.ssm-nav.scrolled{
  background:rgba(8,8,10,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,169,97,.16);
}
.ssm-nav-inner{
  max-width:1180px; margin:0 auto; padding:1rem clamp(1.2rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.ssm-brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--cream);}
.ssm-brand-txt{font-weight:500; letter-spacing:.16em; font-size:.92rem; white-space:nowrap;}
.ssm-nav-links{display:flex; align-items:center; gap:2rem;}
.ssm-nav-links a{
  text-decoration:none; color:#cdbb95; font-size:.88rem; font-weight:400;
  letter-spacing:.03em; transition:color .2s ease;
}
.ssm-nav-links a:hover{color:var(--cream);}
.ssm-nav-right{display:flex; align-items:center; gap:1rem;}
.ssm-lang{display:flex; gap:.1rem; border:1px solid rgba(201,169,97,.3); border-radius:2px; padding:.15rem;}
.ssm-lang button{
  padding:.25rem .5rem; font-size:.72rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; border:none; border-radius:1px; cursor:pointer;
  background:transparent; color:var(--on-dark-mute); font-family:inherit;
  transition:background .2s ease,color .2s ease;
}
.ssm-lang button.is-active{background:var(--gold); color:var(--noir);}
.ssm-nav-cta{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem;
  background:transparent; color:var(--cream); border:1px solid rgba(201,169,97,.5);
  border-radius:2px; text-decoration:none; font-size:.82rem; font-weight:500;
  letter-spacing:.04em; transition:background .2s ease,color .2s ease;
}
.ssm-nav-cta:hover{background:var(--gold); color:var(--noir);}
.ssm-burger{display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:6px;}
.ssm-burger span{width:22px; height:1.5px; background:var(--gold); transition:transform .25s,opacity .2s;}
.ssm-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.ssm-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.ssm-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.ssm-mobile-menu{
  display:none; flex-direction:column; gap:.2rem;
  padding:.5rem clamp(1.2rem,4vw,2.5rem) 1.2rem;
  background:rgba(8,8,10,.96); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,169,97,.16);
}
.ssm-mobile-menu.open{display:flex;}
.ssm-mobile-menu a{
  text-decoration:none; color:#cdbb95; font-size:1rem; padding:.7rem 0;
  border-bottom:1px solid rgba(201,169,97,.1); letter-spacing:.02em;
}

/* ───────── HERO ───────── */
.ssm-hero{
  position:relative; width:100%; min-height:100vh; overflow:hidden;
  background:var(--deep); color:#cdbb95;
  font-size:max(calc(min(620px,82vh) * .03),11px);
}
.ssm-hero-canvas{position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; animation:loadF .6s ease-in-out forwards;}
.ssm-hero-beams{position:absolute; inset:0; top:0; margin:0 auto; height:46em; width:100%; overflow:hidden; pointer-events:none; z-index:0; transition:filter 1s ease-in-out;}
.ssm-hero-beams span{
  position:absolute; left:0; right:0; margin:0 auto; top:3em;
  width:30em; height:max(46em,90vh); transform-origin:50% 0; border-radius:0 0 50% 50%;
  background-image:conic-gradient(from 0deg at 50% -5%, transparent 45%, rgba(201,169,97,.16) 49%, rgba(201,169,97,.30) 50%, rgba(201,169,97,.16) 51%, transparent 55%);
  filter:blur(15px) opacity(.55);
}
.ssm-hero-beams span:nth-child(1){transform:rotate(20deg); animation:loadF 2s ease-in-out forwards,loadrotF 2s ease-in-out forwards,spotF 17s ease-in-out infinite;}
.ssm-hero-beams span:nth-child(2){transform:rotate(-20deg); animation:loadF 2s ease-in-out forwards,loadrotF 2s ease-in-out forwards,spotF 14s ease-in-out infinite;}
.ssm-hero-beams span:nth-child(3){transform:rotate(0deg); animation:loadF 2s ease-in-out forwards,loadrotF 2s ease-in-out forwards,spotF 21s ease-in-out infinite reverse;}

.ssm-hero-inner{
  position:relative; z-index:3; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:8em 1.6em 4em;
}
.ssm-dot{
  border:none; padding:0; width:1.7em; height:1.7em; border-radius:50%;
  background:#000; cursor:pointer; margin-bottom:2.4em; position:relative;
  box-shadow:0 0 1em 0 rgba(201,169,97,.55);
  transition:box-shadow .8s ease,transform .4s ease; opacity:0; animation:loadF 1.6s ease-in 1.6s forwards;
}
.ssm-dot:hover{transform:scale(1.12);}
.ssm-dot span{position:absolute; inset:38%; border-radius:50%; background:var(--gold); opacity:.5;}
.ssm-hero.gold-mode .ssm-dot{box-shadow:0 0 1.1em .1em var(--gold);}
.ssm-hero.gold-mode .ssm-dot span{opacity:1;}

.ssm-eyebrow{letter-spacing:.42em; font-size:.92em; font-weight:500; color:var(--gold); margin-bottom:1.6em; padding-left:.42em; opacity:0; animation:loadF 2s ease-out 2.1s forwards;}
.ssm-wordmark{position:relative; opacity:0; animation:loadF 2s ease-in-out .6s forwards;}
.ssm-title{
  font-size:clamp(2.6rem,8vw,6.4em); font-weight:500; line-height:.98; letter-spacing:.16em;
  margin:0; padding-left:.16em;
  background:radial-gradient(2.2em 2.2em at 50% 50%, transparent calc(var(--p,0%) - 2em), #fff calc(var(--p,0%) - 1em), #fff calc(var(--p,0%) - .4em), transparent var(--p,0%)),
    linear-gradient(0deg,#b08f4a 18%,#C9A961 55%,#ecd9a8 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:pulseP 11s linear 1.4s infinite;
}
.ssm-title2{font-size:clamp(1.9rem,5.6vw,4.3em); font-weight:400; line-height:1; letter-spacing:.28em; margin:.18em 0 0; padding-left:.28em; color:var(--cream);}
.ssm-filet{width:5.2em; height:1px; background:var(--gold); margin:1.7em 0 1.4em; opacity:0; animation:loadF 2s ease-out 2.2s forwards;}
.ssm-tagline{font-size:1.55em; font-weight:400; color:var(--cream); margin:0; letter-spacing:.01em; opacity:0; animation:loadF 2s ease-out 2s forwards,upF 1.4s ease-out 2s forwards;}
.ssm-hero-desc{font-size:1.02em; line-height:1.7; color:#9c9180; max-width:30em; margin:1.4em auto 0; opacity:0; animation:loadF 2s ease-out 2.5s forwards;}
.ssm-hero-cta{display:flex; flex-wrap:wrap; gap:1em; justify-content:center; margin-top:2.6em; opacity:0; animation:loadF 2s ease-out 2.7s forwards,upF 1.4s ease-out 2.7s forwards;}
.ssm-hero-hint{margin-top:3.2em; font-size:.78em; letter-spacing:.22em; color:#6f6757; text-transform:uppercase; opacity:0; animation:loadF 2s ease-out 3.2s forwards;}

/* buttons */
.ssm-btn-gold{
  display:inline-flex; align-items:center; gap:.7em; padding:1.05em 2em;
  background:var(--gold); color:var(--noir); font-weight:500; letter-spacing:.06em;
  font-size:.95em; text-decoration:none; border:none; border-radius:2px; cursor:pointer;
  font-family:inherit; transition:transform .2s ease,box-shadow .2s ease;
}
.ssm-btn-gold:hover{transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(201,169,97,.6);}
.ssm-btn-ghost{
  display:inline-flex; align-items:center; padding:1.05em 2em; background:transparent;
  color:var(--cream); font-weight:500; letter-spacing:.06em; font-size:.95em; text-decoration:none;
  border:1px solid rgba(201,169,97,.5); border-radius:2px; cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.ssm-btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* ───────── SECTIONS ───────── */
.ssm-sec{padding:clamp(4.5rem,9vw,8rem) clamp(1.4rem,6vw,6rem);}
.ssm-light{background:var(--cream); color:var(--ink);}
.ssm-dark{background:var(--noir); color:var(--cream);}
.ssm-deep{background:var(--deep); color:var(--cream);}
.ssm-wrap{max-width:var(--maxw); margin:0 auto;}
.ssm-narrow{max-width:44rem;}

.ssm-eyebrow2{display:flex; align-items:center; gap:.9rem; margin-bottom:1.5rem;}
.ssm-eyebrow2 .dash{width:2.2rem; height:1px; background:var(--gold);}
.ssm-eyebrow2 span:last-child{letter-spacing:.34em; font-size:.72rem; font-weight:500; color:var(--gold); text-transform:uppercase;}
.ssm-h2{font-size:clamp(1.8rem,3.6vw,2.9rem); font-weight:500; line-height:1.18; letter-spacing:-.01em; margin:0;}
.ssm-h2.narrow-h{max-width:20em; line-height:1.15; margin-bottom:0;}
.ssm-lead{font-size:1.12rem; line-height:1.75; color:var(--ink-mute); margin-top:1.6rem; text-wrap:pretty;}
.ssm-lead.muted{color:var(--on-dark-mute);}

/* concept cards */
.ssm-cards3{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; margin-top:3.5rem; background:rgba(12,12,12,.12); border:1px solid rgba(12,12,12,.12);}
.ssm-card{background:var(--cream); padding:2.2rem 1.8rem;}
.ssm-card-n{font-family:ui-monospace,monospace; font-size:.8rem; color:var(--gold); letter-spacing:.1em; display:block; margin-bottom:1rem;}
.ssm-card h3{font-size:1.18rem; font-weight:500; margin:0 0 .6rem;}
.ssm-card p{font-size:.96rem; line-height:1.65; color:var(--ink-soft); margin:0;}

/* how steps */
.ssm-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2.5rem; margin-top:3.5rem;}
.ssm-step{padding-top:2.2rem; border-top:1px solid rgba(201,169,97,.3);}
.ssm-step-n{font-size:2.6rem; font-weight:300; color:var(--gold); margin-bottom:1.1rem; line-height:1;}
.ssm-step h3{font-size:1.25rem; font-weight:500; margin:0 0 .7rem;}
.ssm-step p{font-size:1rem; line-height:1.7; color:var(--on-dark-mute); margin:0;}

/* advantages */
.ssm-adv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2.4rem 3rem; margin-top:3.5rem;}
.ssm-adv{display:flex; gap:1.2rem; align-items:flex-start;}
.ssm-adv-ic{flex:0 0 auto; width:3rem; height:3rem; display:flex; align-items:center; justify-content:center; border:1px solid rgba(201,169,97,.5); border-radius:2px;}
.ssm-adv-ic svg{width:22px; height:22px;}
.ssm-adv h3{font-size:1.12rem; font-weight:500; margin:.2rem 0 .5rem;}
.ssm-adv p{font-size:.98rem; line-height:1.65; color:var(--ink-soft); margin:0;}

/* confidentialité */
.ssm-conf-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.6rem; margin-top:3.2rem;}
.ssm-conf-card{background:#111; border:1px solid rgba(201,169,97,.2); border-radius:4px; padding:2.4rem 2rem;}
.ssm-conf-ic{width:3.2rem; height:3.2rem; display:flex; align-items:center; justify-content:center; border:1px solid rgba(201,169,97,.4); border-radius:50%; margin-bottom:1.4rem;}
.ssm-conf-ic svg{width:26px; height:26px;}
.ssm-conf-card h3{font-size:1.25rem; font-weight:500; margin:0 0 .7rem;}
.ssm-conf-card p{font-size:1rem; line-height:1.7; color:var(--on-dark-mute); margin:0;}

/* store */
.ssm-store-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:3rem; align-items:start;}
.ssm-store-head{position:sticky; top:6rem;}
.ssm-store-head .ssm-h2{margin-top:0;}
.ssm-store-logo{margin-top:2.4rem; opacity:.9;}
.ssm-store-list{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(201,169,97,.18); border:1px solid rgba(201,169,97,.18);}
.ssm-store-item{background:var(--noir); color:var(--cream); padding:1.5rem 1.6rem; display:flex; gap:1.2rem; align-items:center;}
.ssm-store-item svg{width:24px; height:24px; flex:0 0 auto;}
.ssm-store-item h3{font-size:1.05rem; font-weight:500; margin:0;}
.ssm-store-item p{font-size:.92rem; color:var(--on-dark-faint); margin:.2rem 0 0; line-height:1.5;}

/* who */
.ssm-who-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; margin-top:3.5rem;}
.ssm-who-card{background:#111; color:var(--cream); padding:2.2rem 1.9rem; border:1px solid rgba(201,169,97,.14); border-radius:3px; display:flex; flex-direction:column; gap:1.3rem; min-height:13rem;}
.ssm-who-card svg{width:28px; height:28px;}
.ssm-who-b{margin-top:auto;}
.ssm-who-card h3{font-size:1.15rem; font-weight:500; margin:0 0 .55rem;}
.ssm-who-card p{font-size:.95rem; line-height:1.6; color:#9c9280; margin:0;}

/* contact */
.ssm-contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(2.5rem,5vw,5rem); align-items:start;}
.ssm-contact-wa{margin-top:2rem;}
.ssm-reassure{list-style:none; margin:2.4rem 0 0; padding:2rem 0 0; border-top:1px solid rgba(201,169,97,.22); display:flex; flex-direction:column; gap:1.4rem;}
.ssm-reassure li{display:flex; align-items:center; gap:.9rem;}
.ssm-reassure svg{width:24px; height:24px; flex:0 0 auto;}
.ssm-reassure strong{display:block; font-size:1rem; font-weight:500;}
.ssm-reassure span{display:block; font-size:.88rem; color:var(--on-dark-faint);}

.ssm-form{background:#141414; border:1px solid rgba(201,169,97,.18); border-radius:4px; padding:clamp(1.8rem,4vw,2.6rem); display:flex; flex-direction:column; gap:1.2rem;}
.ssm-field{display:flex; flex-direction:column; gap:.5rem;}
.ssm-field label{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-faint); font-weight:500;}
.ssm-field input,.ssm-field textarea{
  background:var(--noir); border:1px solid rgba(201,169,97,.22); border-radius:2px;
  padding:.85rem .9rem; color:var(--cream); font-size:.98rem; outline:none; font-family:inherit;
  transition:border-color .2s ease;
}
.ssm-field textarea{resize:vertical;}
.ssm-field input:focus,.ssm-field textarea:focus{border-color:rgba(201,169,97,.7);}
.ssm-form-submit{margin-top:.4rem; justify-content:center; padding:1rem; font-size:.98rem;}
.ssm-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.ssm-form-status{margin:.2rem 0 0; font-size:.92rem; min-height:1.2em;}
.ssm-form-status.ok{color:var(--gold);}
.ssm-form-status.err{color:#e0795f;}

/* footer */
.ssm-footer{background:var(--deep); color:var(--on-dark-faint); padding:3.5rem clamp(1.4rem,6vw,6rem); border-top:1px solid rgba(201,169,97,.14);}
.ssm-footer-inner{display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between;}
.ssm-footer-brand{display:flex; align-items:center; gap:1rem;}
.ssm-footer-name{color:var(--cream); font-weight:500; letter-spacing:.12em; font-size:.95rem;}
.ssm-footer-tag{font-size:.82rem; letter-spacing:.04em;}
.ssm-footer-right{text-align:right; font-size:.82rem; line-height:1.7;}
.ssm-footer-right > div:first-child{color:var(--on-dark-mute);}
.ssm-footer-right a{text-decoration:none;}
.ssm-footer-rights{margin-top:.4rem; color:#5f584b;}

/* ───────── RESPONSIVE ───────── */
@media (max-width:860px){
  .ssm-nav-links{display:none;}
  .ssm-burger{display:flex;}
}
@media (max-width:600px){
  .ssm-nav-cta span{display:none;}
  .ssm-nav-cta{padding:.6rem .75rem;}
  .ssm-footer-inner{flex-direction:column; align-items:flex-start;}
  .ssm-footer-right{text-align:left;}
  .ssm-store-head{position:static;}
}