/* =====================================================
   DÉMONSTRATIONS SITES WEB ET LOGICIELS
===================================================== */

#demos {
  scroll-margin-top:17vh;
}

/* =====================================================
   SECTIONS
===================================================== */

.section__demo--websites,
.section__demo--softwares {
  position:relative;
  width:var(--w-container-size);
  margin:0 auto var(--section-gap);
  padding:clamp(55px,4vw,65px) 0 clamp(30px,3vw,45px);
  background:transparent;
  overflow:visible;
}

/* =====================================================
   SLIDER
===================================================== */

.websites-showcase {
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* =====================================================
   CADRE PRINCIPAL
===================================================== */

.websites-showcase__panel {
  position:relative;
  width:100%;
  height:clamp(420px,27vw,520px);
  min-height:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(270px,.9fr);
  align-items:stretch;
  gap:clamp(26px,2.5vw,42px);
  background:#000;
  border-radius:8px;
  overflow:hidden;
  box-sizing:border-box;
}

/* =====================================================
   VISUEL
===================================================== */

.websites-showcase__visual {
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.websites-showcase__image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

.websites-showcase__visual-overlay {
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
}

/* =====================================================
   INFORMATIONS
===================================================== */

.websites-showcase__content {
  width:100%;
  min-width:0;
  height:100%;
  padding:clamp(22px,2vw,32px) clamp(22px,2vw,32px) clamp(22px,2vw,32px) 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  box-sizing:border-box;
}

/* =====================================================
   NOM
===================================================== */

.websites-showcase__title {
  width:100%;
  margin:0 0 clamp(24px,2.2vw,34px);
  font-size:clamp(24px,2vw,35px);
  text-align:left;
  white-space:nowrap;
}

.websites-showcase__title::after {
  content:"";
  width:clamp(55px,5vw,80px);
  height:1px;
  margin-top:clamp(12px,1.2vw,18px);
  display:block;
  background:var(--other-color);
}

/* =====================================================
   TITRE FONCTIONNALITÉS
===================================================== */

.websites-showcase__features-heading {
  width:100%;
  margin:0 0 clamp(18px,1.8vw,28px);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  letter-spacing:.18em;
}

.websites-showcase__features-heading span {
  display:none;
}

.websites-showcase__features-heading p {
  margin:0;
  color:var(--text-color);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(9px,.8vw,12px);
  font-weight:500;
  letter-spacing:.3em;
  line-height:1;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}

/* =====================================================
   FONCTIONNALITÉS
===================================================== */

.websites-showcase__features {
  width:100%;
  margin:0 0 clamp(28px,2.5vw,38px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(8px,1.5vw,10px);
}

.websites-showcase__feature {
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:clamp(32px,3.2vw,43px) minmax(0,1fr);
  align-items:center;
  gap:clamp(18px,1.7vw,26px);
}

.websites-showcase__feature-icon {
  width:clamp(54px,4.4vw,68px);
  height:clamp(54px,4.4vw,68px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid var(--text-color);
  border-radius:50%;
  color:var(--text-color);
  background:transparent;
}

/* =====================================================
   SVG
===================================================== */

.websites-showcase__feature-icon svg {
  width:34%;
  height:34%;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

.websites-showcase__feature-icon svg path,
.websites-showcase__feature-icon svg rect,
.websites-showcase__feature-icon svg circle,
.websites-showcase__feature-icon svg line,
.websites-showcase__feature-icon svg polyline,
.websites-showcase__feature-icon svg polygon {
  fill:none;
  stroke:currentColor;
}

.websites-showcase__feature-label {
  min-width:0;
  min-height:0;
  display:block;
  color:var(--text-color);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(13px,1.05vw,17px);
  font-weight:400;
  line-height:1.3;
  text-align:left;
}

/* =====================================================
   BOUTON
===================================================== */

.websites-showcase__button {
  width:min(100%,390px);
  margin:0;
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  letter-spacing:.18em;
}

/* =====================================================
   POINTS
===================================================== */

.websites-showcase__dots {
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
}

.websites-showcase__dot {
  width:14px;
  height:14px;
  flex-shrink:0;
  padding:0;
  border:1px solid var(--other-color);
  border-radius:50%;
  background:#000;
  cursor:pointer;
  box-sizing:border-box;
  transition:background 220ms ease,border-color 220ms ease,transform 220ms ease;
}

.websites-showcase__dot:hover {
  border-color:white;
  transform:scale(1.08);
}

.websites-showcase__dot.is-active {
  border-color:var(--other-color);
  background:var(--other-color);
}

/* =====================================================
   RESPONSIVE <= 900PX
===================================================== */

@media screen and (max-width:900px) {
  .websites-showcase__feature {
    grid-template-columns:clamp(28px,4vw,36px) minmax(0,1fr);
  }
}

/* =====================================================
   RESPONSIVE <= 650PX
===================================================== */

@media screen and (max-width:650px) {
  .section__demo--websites,
  .section__demo--softwares {
    width:var(--w-container-size);
    margin:clamp(55px,14vw,80px) auto clamp(55px,14vw,80px);
    padding:clamp(50px,12vw,70px) 0 clamp(25px,6vw,38px);
  }

  .websites-showcase {
    gap:13px;
  }

  .websites-showcase__panel {
    height:auto;
    min-height:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:0;
    border-radius:5px;
  }

  .websites-showcase__visual {
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    grid-column:1;
    grid-row:1;
    overflow:hidden;
  }

  .websites-showcase__image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
  }

  .websites-showcase__content {
    width:100%;
    height:auto;
    grid-column:1;
    grid-row:2;
    padding:26px 14px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
  }

  .websites-showcase__title {
    margin-bottom:28px;
    font-size:clamp(22px,5vw,30px);
    text-align:center;
  }

  .websites-showcase__title::after {
    width:52px;
    margin-top:16px;
    margin-left:auto;
    margin-right:auto;
  }

  .websites-showcase__features-heading {
    margin-bottom:10px;
    justify-content:center;
    text-align:center;
  }

  .websites-showcase__features-heading p {
    display:none;
  }

  .websites-showcase__features {
    width:100%;
    margin-bottom:34px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:center;
    justify-items:center;
    gap:clamp(10px,3vw,18px);
  }

  .websites-showcase__feature {
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:clamp(8px,2vw,12px);
  }

  .websites-showcase__feature-icon {
    width:clamp(46px,13vw,56px);
    height:clamp(46px,13vw,56px);
  }

  .websites-showcase__feature-label {
    min-width:0;
    font-size:clamp(9px,2.8vw,13px);
    line-height:1.25;
    text-align:center;
  }

  .websites-showcase__button {
    width:100%;
  }

  .websites-showcase__dot {
    width:12px;
    height:12px;
  }
}

/* =====================================================
   ANIMATIONS INTERACTIVES
===================================================== */

/* =====================================================
   SECTION GÉNÉRALE
===================================================== */

.section__demo.animations {
  position:relative;
  width:var(--w-container-size);
  height:auto;
  margin:0 auto var(--section-gap);
  padding:clamp(55px,4vw,65px) 0 clamp(30px,3vw,45px);
  display:block;
  box-sizing:border-box;
  background:transparent;
  overflow:visible;
}

/* =====================================================
   FLÈCHES
===================================================== */

.section__demo.animations .demo-arrow {
  display:none;
}

/* =====================================================
   CARROUSEL
===================================================== */

.demo-carousel__viewport {
  width:100%;
  min-width:0;
  overflow:hidden;
}

.demo-carousel__track {
  width:100%;
  display:flex;
  align-items:stretch;
  gap:0;
  transform:translateX(0);
  transition:transform 450ms ease;
  will-change:transform;
}

/* =====================================================
   PAGE D’ANIMATIONS
===================================================== */

.demo-carousel__page {
  --animation-gap:clamp(12px,1.8vw,24px);
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:var(--animation-gap);
}

.demo-carousel__column {
  display:contents;
}

/* =====================================================
   CARTE
===================================================== */

.section__demo.animations .demo-carousel__item {
  position:relative;
  width:100%;
  min-width:0;
  height:auto!important;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:clamp(7px,.8vw,11px);
  background:#000;
  border:1px solid var(--border-color);
  border-radius:clamp(3px,.4vw,6px);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  box-shadow:none;
  transition:transform 300ms ease-out,opacity 300ms ease,filter 300ms ease,border-color 300ms ease;
}

.section__demo.animations .demo-carousel__item::before {
  content:none;
}

.section__demo.animations .demo-carousel__item:hover,
.section__demo.animations .demo-carousel__item:focus-visible {
  transform:translateY(-4px);
  border-color:var(--text-color);
}

.section__demo.animations .demo-carousel__item:focus-visible {
  outline:1px solid white;
  outline-offset:3px;
}

.section__demo.animations .demo-carousel__item.little {
  opacity:1;
  filter:none;
  transform:none;
}

.section__demo.animations .demo-carousel__item.big {
  opacity:1;
  filter:none;
  transform:translateY(-4px);
  border:1px solid var(--text-color);
}

/* =====================================================
   VISUEL
===================================================== */

.demo-animation-card__media {
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1.7/1;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:white;
  border:1px solid var(--border-color);
  border-radius:2px;
  overflow:hidden;
}

.demo-animation-card__media .demo-carousel__video {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  transform:scale(1) translateZ(0);
  backface-visibility:hidden;
  transition:transform 500ms ease,filter 350ms ease;
}

.demo-animation-card:hover .demo-carousel__video,
.demo-animation-card:focus-visible .demo-carousel__video {
  transform:scale(1.025) translateZ(0);
  filter:brightness(1.03) contrast(1.02);
}

/* =====================================================
   TEXTE DES ANIMATIONS
===================================================== */

.demo-animation-card__media .demo-carousel__previewText {
  position:relative;
  z-index:2;
  display:inline-block;
  max-width:90%;
  margin:0;
  color:rgba(255,255,255,.82);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(10px,1.5vw,21px);
  line-height:1;
  text-align:center;
  white-space:nowrap;
}

/* =====================================================
   REFLET
===================================================== */

.demo-animation-card__shine {
  position:absolute;
  top:0;
  left:-115%;
  width:55%;
  height:100%;
  z-index:5;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.01) 28%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.01) 72%,transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  transition:left 650ms ease;
}

.demo-animation-card:hover .demo-animation-card__shine,
.demo-animation-card:focus-visible .demo-animation-card__shine {
  left:155%;
}

/* =====================================================
   BOUTON
===================================================== */

.demo-animation-card__button {
  width:100%;
  margin:clamp(8px,.8vw,12px) 0 0;
}

/* =====================================================
   POINTS
===================================================== */

.demo-carousel__dots {
  height:22px;
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
}

.demo-carousel__dot {
  width:14px;
  height:14px;
  flex-shrink:0;
  padding:0;
  border:1px solid var(--other-color);
  border-radius:50%;
  background:#000;
  cursor:pointer;
  box-sizing:border-box;
  transition:background 220ms ease,border-color 220ms ease,transform 220ms ease;
}

.demo-carousel__dot:hover {
  border-color:white;
  transform:scale(1.08);
}

.demo-carousel__dot.is-active {
  border-color:var(--other-color);
  background:var(--other-color);
}

.demo-carousel__dot:focus-visible {
  outline:1px solid white;
  outline-offset:3px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media screen and (max-width:900px) {
  .section__demo.animations {
    width:var(--w-container-size);
    margin:0 auto var(--section-gap);
    padding:clamp(55px,7vw,65px) 0 clamp(30px,5vw,45px);
  }

  .demo-carousel__page {
    --animation-gap:clamp(8px,1.4vw,14px);
  }

  .section__demo.animations .demo-carousel__item {
    padding:clamp(6px,.8vw,8px);
  }

  .demo-animation-card__media {
    aspect-ratio:1.2/1;
  }
}

@media screen and (max-width:650px) {
  .section__demo.animations {
    width:var(--w-container-size);
    margin:clamp(55px,14vw,80px) auto clamp(55px,14vw,80px);
    padding:clamp(50px,12vw,70px) 0 clamp(25px,6vw,38px);
  }

  .demo-carousel__page {
    --animation-gap:clamp(8px,2.5vw,12px);
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .section__demo.animations .demo-carousel__item {
    padding:clamp(5px,1.5vw,7px);
    border-radius:4px;
  }

  .demo-animation-card__media {
    aspect-ratio:1.35/1;
    border-radius:1px;
  }

  .demo-animation-card__media .demo-carousel__previewText {
    max-width:90%;
    font-size:clamp(9px,3vw,13px);
  }

  .demo-animation-card__button {
    margin-top:clamp(6px,2vw,8px);
    font-size:clamp(8px,2.2vw,10px);
  }

  .demo-carousel__dots {
    margin-top:13px;
    gap:12px;
  }

  .demo-carousel__dot {
    width:12px;
    height:12px;
  }
}

@media screen and (max-width:380px) {
  .demo-carousel__page {
    --animation-gap:6px;
  }

  .section__demo.animations .demo-carousel__item {
    padding:4px;
  }

  .demo-animation-card__button {
    margin-top:4px;
  }

  .demo-carousel__dots {
    margin-top:11px;
    gap:10px;
  }

  .demo-carousel__dot {
    width:10px;
    height:10px;
  }
}

/* =====================================================
   TÉLÉPHONE PAYSAGE
===================================================== */

@media screen and (orientation:landscape) and (max-width:1000px) and (max-height:500px) {
  .section__demo--websites,
  .section__demo--softwares {
    padding:15px 0 18px;
  }

  .websites-showcase__panel {
    height:auto;
    min-height:0;
  }
}