/*
 * Section Clip'n'Sleep — reprise à l'identique de l'ancien eznovation.com
 * (cdn.eznovation.com/ezn/ws/css/index-clipnsleep.min.css), sans Bootstrap.
 * Les styles Bootstrap 4 dont la section dépendait (boîte .site-container,
 * gouttières de 15px, titres, bouton .btn-lg) sont recopiés ici, et seules
 * les 3 animations d'animate.css 3.7.2 utilisées sont conservées.
 * Tout est préfixé par #clipnsleep-container pour rester isolé.
 */

/* ---------- Boîte et typographie (Bootstrap 4 + index.css d'origine) ---------- */
#clipnsleep-container{
  margin:30px 0 20px;
  padding:.25rem;
  background-color:#fff;
  border:1px solid #dee2e6;
  border-radius:.25rem;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:1rem;
  font-weight:400;
  line-height:1.42857143;
  color:#333;
  text-align:left;
}
#clipnsleep-container *,
#clipnsleep-container *::before,
#clipnsleep-container *::after{ box-sizing:border-box; }
#clipnsleep-container h2{
  margin:0 0 .5rem;
  font-family:Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:500;
  line-height:1.2;
}
#clipnsleep-container a{ text-decoration:none; }
#clipnsleep-container img{ vertical-align:middle; border-style:none; }

/* .container-fluid > .row > .col : gouttière nette de 15px de chaque côté. */
#clipnsleep-container .cns-wrap{ padding:0 15px; }
#clipnsleep-container .cns-clearfix{ display:flow-root; }

/* ---------- Couleurs ---------- */
#clipnsleep-container .cns-color-dark{ color:#0e71b8; }
#clipnsleep-container .cns-color-light{ color:#009fe3; }

/* ---------- En-tête (logo + slogan) ---------- */
#clipnsleep-container #divHeaderSection{ background-color:#061733; padding-bottom:5px; padding-top:5px; }
#clipnsleep-container #divHeaderSectionLine1{ background-color:#f3f8fc; height:2px; }
#clipnsleep-container #divHeaderSectionLine2{ background-color:#061733; height:4px; }
#clipnsleep-container #divHeaderLogo{ float:left; padding-bottom:5px; padding-top:5px; }
#clipnsleep-container #divHeaderLogo img{ width:auto; }
#clipnsleep-container #divHeaderSlogan{ float:left; padding-left:30px; padding-top:30px; }
#clipnsleep-container #divHeaderSlogan h2{ font-size:12pt; }
@media screen and (max-width:991px){
  #clipnsleep-container #divHeaderLogo img{ height:50px; }
  #clipnsleep-container #divHeaderSlogan h2{ font-size:11pt; }
}
@media screen and (max-width:767px){
  #clipnsleep-container #divHeaderLogo img{ height:40px; }
  #clipnsleep-container #divHeaderSlogan{ padding-left:20px; padding-top:20px; }
  #clipnsleep-container #divHeaderSlogan h2{ font-size:10pt; }
}
@media screen and (max-width:647px){
  #clipnsleep-container #divHeaderSlogan{ display:none !important; }
}

/* ---------- Bannière ---------- */
#clipnsleep-container #divBannerSection{ background-color:#f3f8fc; }
#clipnsleep-container #divCarousel{ position:relative; }
#clipnsleep-container .banner-asotv{ bottom:10px; left:0; padding-left:15px; position:absolute; top:auto; right:auto; z-index:1; }
#clipnsleep-container .banner-asotv img{ width:100px; height:auto; }
#clipnsleep-container .banner-container{ bottom:0; left:auto; padding-right:15px; position:absolute; top:0; right:0; z-index:1; }
#clipnsleep-container .banner-item{ position:relative; overflow:hidden; height:300px; }
#clipnsleep-container .banner-item.banner-item1{
  background:url(https://cdn.eznovation.com/cns/ws/img/banner-1.jpg) 0 0 no-repeat;
  background-position-y:10px;
  background-size:100% auto;
}
#clipnsleep-container .banner-line{ text-align:right; }
#clipnsleep-container .banner-line1{ color:#424242; font-size:24pt; font-weight:700; padding-top:20px; }
#clipnsleep-container .banner-line1 span.sub{ font-size:12pt; }
#clipnsleep-container .banner-line2{ padding-top:40px; }
#clipnsleep-container .banner-line2 h2{ color:#6e6e6e; font-size:16pt; }
#clipnsleep-container .banner-line3{ padding-top:20px; }
#clipnsleep-container .banner-shadow{ bottom:0; left:0; opacity:1; position:absolute; top:0; }
#clipnsleep-container .banner-shadow-left{
  background-repeat:repeat-x;
  background-image:linear-gradient(to right, rgba(243,248,252,1) 0, rgba(243,248,252,.0001) 100%);
  width:10%;
}
#clipnsleep-container .banner-shadow-right{
  right:0;
  left:auto;
  background-repeat:repeat-x;
  background-image:linear-gradient(to right, rgba(243,248,252,.0001) 0, rgba(243,248,252,1) 100%);
  width:30%;
}

/* ---------- Bouton (.btn .btn-lg .cns-btn-action .btn-color2 d'origine) ---------- */
#clipnsleep-container .cns-btn{
  display:inline-block;
  padding:.5rem 1rem;
  font-size:1.25rem;
  font-weight:400;
  line-height:1.5;
  text-align:center;
  vertical-align:middle;
  user-select:none;
  color:#fff;
  background-color:#ff9800;
  border:1px solid #ff9800;
  border-radius:0;
  transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#clipnsleep-container .cns-btn:hover{ color:#fff; background-color:#ffad33; border-color:#ff9800; }
#clipnsleep-container .cns-btn:focus-visible{ outline:0; box-shadow:0 0 0 .2rem rgba(255,152,0,.5); }
/* Icône "external-link-alt" de Font Awesome 5 (même taille que la police d'icônes). */
#clipnsleep-container .cns-icon{ display:inline-block; width:1em; height:1em; vertical-align:-.125em; overflow:visible; }

/* ---------- Responsive de la bannière ---------- */
@media screen and (max-width:991px){
  #clipnsleep-container .banner-item{ height:280px; }
}
@media screen and (max-width:879px){
  #clipnsleep-container .banner-asotv img{ width:90px; }
  #clipnsleep-container .banner-item{ height:260px; }
  #clipnsleep-container .banner-line1{ font-size:23pt; padding-top:10px; }
  #clipnsleep-container .banner-line1 span.sub{ font-size:11pt; }
  #clipnsleep-container .banner-line2{ padding-top:35px; }
  #clipnsleep-container .banner-line2 h2{ font-size:15pt; }
  #clipnsleep-container .banner-line3{ padding-top:18px; }
}
@media screen and (max-width:767px){
  #clipnsleep-container .banner-asotv img{ width:80px; }
  #clipnsleep-container .banner-item{ height:240px; }
  #clipnsleep-container .banner-line1{ font-size:22pt; padding-top:5px; }
  #clipnsleep-container .banner-line1 span.sub{ font-size:10pt; }
  #clipnsleep-container .banner-line2{ padding-top:30px; }
  #clipnsleep-container .banner-line2 h2{ font-size:14pt; }
  #clipnsleep-container .banner-line3{ padding-top:16px; }
}
@media screen and (max-width:655px){
  #clipnsleep-container .banner-item{ height:220px; }
  #clipnsleep-container .banner-line1{ font-size:21pt; padding-top:5px; }
  #clipnsleep-container .banner-line1 span.sub{ font-size:9pt; }
  #clipnsleep-container .banner-line2{ padding-top:20px; }
  #clipnsleep-container .banner-line2 h2{ font-size:13pt; margin-top:10px; }
}
@media screen and (max-width:543px){
  #clipnsleep-container .banner-asotv img{ width:70px; }
  #clipnsleep-container .banner-item{ height:200px; }
  #clipnsleep-container .banner-line1{ font-size:20pt; }
  #clipnsleep-container .banner-line1 span.sub{ font-size:8pt; }
  #clipnsleep-container .banner-line2{ padding-top:10px; }
  #clipnsleep-container .banner-line2 h2{ font-size:12pt; }
  #clipnsleep-container .banner-line3 a{ font-size:11pt; padding:8px 15px; }
}
@media screen and (max-width:487px){
  #clipnsleep-container .banner-item{ height:180px; }
  #clipnsleep-container .banner-line1{ font-size:18pt; }
  #clipnsleep-container .banner-line1 span.sub{ font-size:7pt; }
  #clipnsleep-container .banner-line2 h2{ font-size:11pt; }
  #clipnsleep-container .banner-line3{ padding-top:10px; }
  #clipnsleep-container .banner-line3 a{ font-size:10pt; padding:7px 13px; }
}
@media screen and (max-width:431px){
  #clipnsleep-container .banner-asotv img{ width:60px; }
  #clipnsleep-container .banner-item{ height:160px; }
  #clipnsleep-container .banner-line1{ font-size:16pt; }
  #clipnsleep-container .banner-line1 span.sub{ font-size:8pt; }
  #clipnsleep-container .banner-line2 h2{ font-size:10pt; }
}
@media screen and (max-width:375px){
  #clipnsleep-container .banner-asotv img{ width:50px; }
  #clipnsleep-container .banner-item{ height:140px; }
  #clipnsleep-container .banner-line1{ font-size:14pt; }
  #clipnsleep-container .banner-line1 span.sub{ font-size:7pt; }
  #clipnsleep-container .banner-line2 h2{ font-size:9pt; }
  #clipnsleep-container .banner-line3{ padding-top:5px; }
  #clipnsleep-container .banner-line3 a{ font-size:9pt; padding:5px 11px; }
}

/* ---------- Animations (animate.css 3.7.2 : bounceInDown, flipInX, bounceInRight) ---------- */
#clipnsleep-container .animated{ animation-duration:1s; animation-fill-mode:both; }
#clipnsleep-container .animated.delay-1s{ animation-delay:1s; }
#clipnsleep-container .bounceInDown{ animation-name:cnsBounceInDown; }
#clipnsleep-container .flipInX{ backface-visibility:visible !important; animation-name:cnsFlipInX; }
#clipnsleep-container .bounceInRight{ animation-name:cnsBounceInRight; }

@keyframes cnsBounceInDown{
  from, 60%, 75%, 90%, to{ animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }
  0%{ opacity:0; transform:translate3d(0, -3000px, 0); }
  60%{ opacity:1; transform:translate3d(0, 25px, 0); }
  75%{ transform:translate3d(0, -10px, 0); }
  90%{ transform:translate3d(0, 5px, 0); }
  to{ transform:translate3d(0, 0, 0); }
}
@keyframes cnsBounceInRight{
  from, 60%, 75%, 90%, to{ animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }
  from{ opacity:0; transform:translate3d(3000px, 0, 0); }
  60%{ opacity:1; transform:translate3d(-25px, 0, 0); }
  75%{ transform:translate3d(10px, 0, 0); }
  90%{ transform:translate3d(-5px, 0, 0); }
  to{ transform:translate3d(0, 0, 0); }
}
@keyframes cnsFlipInX{
  from{ transform:perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function:ease-in; opacity:0; }
  40%{ transform:perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function:ease-in; }
  60%{ transform:perspective(400px) rotate3d(1, 0, 0, 10deg); opacity:1; }
  80%{ transform:perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to{ transform:perspective(400px); }
}

@media print, (prefers-reduced-motion:reduce){
  #clipnsleep-container .animated{
    animation-duration:1ms !important;
    transition-duration:1ms !important;
    animation-iteration-count:1 !important;
  }
}