/* =====================================================
   GÉNÉRAL
===================================================== */
:root {
  --main-color:lightgrey;
  --other-color:#ffcb77;
  --text-color:rgba(255,255,255,.7);
  --border-color:rgba(255,255,255,.3);
  --border:.1px solid var(--border-color);
  --w-container-size:90%;
  --section-gap:clamp(55px,7vw,90px);
  --home-top-gap:16vh;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =====================================================
   SCROLL-BAR OPTION
===================================================== */
html {
  scrollbar-width:thin;
  scrollbar-color:#373737 #111827;
}

::-webkit-scrollbar {
  width:30px;
}

::-webkit-scrollbar-track {
  background:#111827;
}

/* =====================================================
   BODY
===================================================== */
html {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#373737 #111827;
}

body {
  width:100%;
  max-width:100%;
  margin:0;
  background:black;
  overflow-x:hidden;
}

#overlay__menu__mobile {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.6);
  display:none;
}

#overlay__menu__mobile.open {
  display:block;
  z-index:998;
}

/* =====================================================
   CONTENEUR DE SECTION AVEC TITRE
===================================================== */
.section-with-title {
  position:relative;
  width:var(--w-container-size);
  margin:0 auto var(--section-gap);
  padding-top:clamp(55px,4vw,65px);
  overflow:visible;
}

.section-with-title > .section__products,
.section-with-title > .section__about {
  width:100%;
  margin:0;
}

/* =====================================================
   BOUTONS COMMUNS
===================================================== */
.shared-button,
.websites-showcase__button,
.demo-animation-card__button {
  position:relative;
  width:100%;
  min-width:0;
  min-height:clamp(50px,4vw,60px);
  padding:0 clamp(18px,1.7vw,24px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(10px,.9vw,14px);
  border:1px solid var(--other-color);
  border-radius:0;
  background:rgba(0,0,0,.22);
  color:var(--text-color);
  font-family:"Montserrat",sans-serif;
  font-size:clamp(11px,.88vw,14px);
  font-weight:500;
  letter-spacing:clamp(2px,.16vw,3px);
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  box-shadow:none;
  transition:background 180ms ease,color 180ms ease,border-color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
}

.shared-button > span,
.shared-button > svg,
.websites-showcase__button > span,
.websites-showcase__button > svg,
.demo-animation-card__button > span,
.demo-animation-card__button > svg {
  position:relative;
  z-index:2;
}

.shared-button > span,
.websites-showcase__button > span,
.demo-animation-card__button > span {
  flex:1;
  text-align:center;
}

.shared-button > svg,
.websites-showcase__button > svg,
.demo-animation-card__button > svg {
  width:clamp(14px,1vw,17px);
  height:clamp(14px,1vw,17px);
  flex-shrink:0;
  color:currentColor;
  fill:none;
  stroke:currentColor;
  transition:transform 180ms ease;
}

.shared-button:hover,
.websites-showcase__button:hover,
.demo-animation-card__button:hover {
  color:#fff;
  background:rgba(199,166,106,.10);
  border-color:#dfc28d;
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(199,166,106,.09);
}

.shared-button--arrow:hover > svg,
.websites-showcase__button:hover > svg,
.demo-animation-card__button:hover > svg {
  transform:translateX(4px);
}

.shared-button:focus-visible,
.websites-showcase__button:focus-visible,
.demo-animation-card__button:focus-visible {
  outline:1px solid #fff;
  outline-offset:3px;
}

@media screen and (max-width:700px) {
  .shared-button,
  .websites-showcase__button,
  .demo-animation-card__button {
    min-height:44px;
    padding:0 clamp(8px,2.5vw,16px);
    font-size:clamp(8px,2.3vw,11px);
    letter-spacing:clamp(.8px,.3vw,1.5px);
  }

  .shared-button > svg,
  .websites-showcase__button > svg,
  .demo-animation-card__button > svg {
    width:13px;
    height:13px;
  }
}

@media screen and (max-width:420px) {
  .shared-button,
  .websites-showcase__button,
  .demo-animation-card__button {
    min-height:42px;
    padding:0 7px;
    font-size:clamp(9px,2.5vw,10px);
    letter-spacing:.7px;
  }
}

/* =====================================================
   ICÔNES COMMUNES
===================================================== */
.shared-icon {
  position:relative;
  width:clamp(32px,3.2vw,43px);
  height:clamp(32px,3.2vw,43px);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:0;
  background:rgba(184,184,184,.08);
  border:none;
  border-radius:8px;
  color:var(--other-color);
  box-shadow:0 0 12px rgba(184,184,184,.08);
  text-decoration:none;
  overflow:hidden;
  transition:background 220ms ease,box-shadow 220ms ease,transform 220ms ease;
}

.shared-icon svg {
  position:relative;
  z-index:1;
  width:55%;
  height:55%;
  max-width:none;
  max-height:none;
  filter:none;
}

.shared-icon:hover {
  background:rgba(184,184,184,.12);
  box-shadow:0 0 12px rgba(184,184,184,.14);
  transform:translateY(-2px);
}

@media screen and (max-width:900px) {
  .shared-icon {
    width:clamp(28px,4vw,36px);
    height:clamp(28px,4vw,36px);
  }
}

@media screen and (max-width:650px) {
  .shared-icon {
    width:38px;
    height:38px;
  }
}

/* =====================================================
   BOUTON RETOUR EN HAUT
===================================================== */
.back-to-top {
  position:fixed;
  right:clamp(18px,2.2vw,34px);
  bottom:clamp(18px,2.2vw,34px);
  z-index:1200;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--other-color);
  border-radius:50%;
  background:rgba(0,0,0,.82);
  color:var(--other-color);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px);
  box-shadow:0 0 18px rgba(255,203,119,.10);
  transition:opacity 220ms ease,visibility 220ms ease,transform 220ms ease,background 220ms ease,color 220ms ease,box-shadow 220ms ease;
}

.back-to-top.is-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.back-to-top svg {
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
}

.back-to-top:hover {
  background:var(--other-color);
  color:#000;
  box-shadow:0 0 24px rgba(255,203,119,.22);
  transform:translateY(-3px);
}

.back-to-top:focus-visible {
  outline:1px solid #fff;
  outline-offset:3px;
}

@media screen and (max-width:650px) {
  .back-to-top {
    right:14px;
    bottom:14px;
    width:44px;
    height:44px;
  }

  .back-to-top svg {
    width:19px;
    height:19px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .back-to-top {
    transition:none;
  }
}

/* =====================================================
   TITRE DE SECTION
===================================================== */
.section-title {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  background:#000;
  transform:translateY(-50%);
  z-index:20;
}

.section-title::before {
  content:none;
}

.section-title::after {
  content:"";
  flex:1;
  height:1px;
  background:var(--main-color);
}

.section-title .h2__demo {
  flex-shrink:0;
  margin:0;
  padding:0;
  color:var(--text-color);
  font-family:"Montserrat",sans-serif;
  font-size:clamp(18px,2.4vw,35px);
  font-weight:100;
  line-height:1;
  letter-spacing:normal;
  text-align:left;
  white-space:nowrap;
}

.section-title .h2__demo::after {
  content:none;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media screen and (max-width:900px) {
  .section-title {
    gap:12px;
  }

  .section-title .h2__demo {
    font-size:clamp(16px,3.5vw,27px);
  }
}

@media screen and (max-width:650px) {
  .section-with-title {
    margin:clamp(55px,14vw,80px) auto clamp(55px,14vw,80px);
    padding:clamp(50px,12vw,70px) 0 clamp(25px,6vw,38px);
  }

  .section-title {
    gap:10px;
  }

  .section-title .h2__demo {
    font-size:clamp(15px,5vw,22px);
  }
}

@media screen and (max-width:380px) {
  .section-title {
    gap:7px;
  }

  .section-title .h2__demo {
    font-size:clamp(13px,4.7vw,18px);
  }
}

/* =====================================================
   H3 COMMUNS
===================================================== */
.shared-h3 {
  width:100%;
  margin:0;
  color:#fff;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(25px,3vw,40px);
  font-weight:500;
  line-height:.95;
  text-align:left;
  text-transform:uppercase;
}

.shared-h3 > span {
  display:block;
}

.shared-h3 > span:last-child {
  color:var(--other-color);
}

@media screen and (max-width:1000px) {
  .shared-h3 {
    font-size:clamp(25px,7vw,68px);
  }
}

@media screen and (max-width:650px) {
  .shared-h3 {
    font-size:clamp(25px,8vw,52px);
    line-height:.94;
  }
}

@media screen and (max-width:380px) {
  .shared-h3 {
    font-size:clamp(25px,8vw,44px);
  }
}