/* ================================================== 
STYLE MAIN
===================================================== */


/*  ---------- RESET CSS MEYERWEB ---------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
    body{
      font-family:'Inter',sans-serif;
      color:#111;
      overflow-x:hidden;
    }
/*  ---------- FONT ---------- */

    H1 {
      position: absolute;
      top: -300px;
    }
    H2{
      font-family: "Anton", sans-serif;
      font-size:148px;
      text-transform: uppercase;
    }
    H3{
      font-family: "Lato", sans-serif;
      font-size: 60px;
      font-weight:900;
      line-height: 70px;
      margin-bottom: 20px;
      letter-spacing: 1px;
    }

    H3.subtitle {
    text-transform: uppercase;
    font-size: 46px;
    margin-bottom: 40px;
    }

    H4{
      font-family: "Lato", sans-serif;
      font-size: 24px;
      line-height: 26px;
      font-weight:900;
      margin-bottom: 5px;
      letter-spacing: 1px;
    }

    p {
      font-family:'Inter',sans-serif;
      font-size:16px ;
      line-height: 27px;

    }

    .text-center{
      text-align: center;
    }

    strong{
      font-weight: bold;
    }
    .text-center{
      text-align: center;
    }

    ul.listing-basic {
      list-style: disc;
      line-height: 24px;
      margin-bottom: 20px;
      list-style-position: inside;
      font-size: 16px;
      text-transform: capitalize;
    }


/*  ---------- STRUCTURE ---------- */

    .section{
    width:100%;
    display:flex;  
    justify-content:center; /* centre le contenu */
    align-items: center;
    }

    .container-full {
    width: 100%;/* largeur max du contenu */
    display: flex;
    align-items: stretch;
    flex-direction: column;
    }

    .container-cropped {
    width: 50%;/* largeur max du contenu */
    display: flex;
    align-items: stretch;
    gap: 40px;
    }

    .container-cropped .column{
    flex:1; /* même largeur */
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

    



/*  ---------- TOOL ---------- */

    .floating-block{
      background: #ffffff;
      width: 100%;
      display: flex;
      box-shadow: 2px 2px 20px 0px #00000017;
      overflow: hidden;
    }

    .hiding-desktop{
      display: none !important;
    }

    .rounded-main {
      border-radius: 40px;
    }

    .rounded-secondary {
      border-radius: 20px;
    }

/*  ---------- CTA ---------- */


.btn-close {
  position:absolute;
  left: 12px;
  top: 12px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  z-index: 100;
}

/* Les deux barres du X */
.btn-close::before,
.btn-close::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 4px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Position initiale */
.btn-close::before {
  transform: rotate(45deg);
}

.btn-close::after {
  transform: rotate(-45deg);
}

/* Animation hover */
.btn-close:hover::before {
  transform: rotate(135deg);
  background: #ff4d4d;
}

.btn-close:hover::after {
  transform: rotate(-135deg);
  background: #ff4d4d;
}


    .btn-linkedin {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #008cff;
      border-radius: 50%;
      background-color: transparent;
      transition: all 0.3s ease;
    }

    .btn-linkedin .icon {
      width: 24px;
      height: 24px;
      fill:#008cff;
      transition: all 0.3s ease;
      margin-top: -7px;
    }

    /* HOVER */
    .btn-linkedin:hover {
      background-color: #008cff;
    }

    .btn-linkedin:hover .icon {
      fill: #ffffff;
    }



    .btn-cv {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #02b7c4;
      border-radius: 50%;
      background-color:transparent;
      transition: all 0.3s ease;


    }

    .btn-cv .icon {
      width: 30px;
      height: 30px;
      fill:#02b7c4;
      transition: all 0.3s ease;
    }

    /* HOVER */
    .btn-cv:hover {
      background-color:#02b7c4;
    }

    .btn-cv:hover .icon {
      fill: #ffffff;
    }

    
    .cta-holder{
      display: flex;
      margin-top: 30px;
      gap: 20px;
    }

    a.cta-primary{
    display: inline-block;
    padding: 20px 40px;
    border-radius: 10px;
    margin: 30px 10px 0px 10px;
    background:transparent;
    color:#000000;
    border:3px solid #000000;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight:600;
    width: fit-content;
    }

    

    a.cta-primary:hover{
      background:#000000;
      color:#ffffff;
    }

    
    

    a.cta-secondary{
    display: inline-block;
    padding: 20px 40px;
    border: 2px solid black;
    border-radius: 100px;
    margin: 30px 20px 0px 0px;
    background:none;
    color: black;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight:600;
    }

    a.cta-tertiary{
    display: inline-block;
    padding: 20px 10px;
    border: none;
    border-radius: 100px;
    margin: 30px 20px 0px 0px;
    background:none;
    color:#c5c5c5;
    text-transform: uppercase;
    text-align: center;
    text-decoration: underline;
    font-size: 13px;
    font-weight:600;
    width: fit-content;
    }

    .cta-tertiary:hover{
      opacity:0.5;
    }

    .subtitle{
      text-align: center;
      width: 80%;
      display: block;
      margin: 0 auto;
      line-height: 1.7;
    }






/*  ---------- HEADER ---------- */


header{
  position:fixed;
  top:20px;
  width:100%;
  display:flex;
  justify-content:center;
  z-index:1000;
  transform: translateY(-140%);
  opacity:0;
  pointer-events:none;
  transition:
    transform .7s cubic-bezier(.22,1,.36,1),
    opacity .45s ease;
}

/* visible */
header.header-visible{
  transform: translateY(0);
  opacity:1;
  pointer-events:auto;
}

    nav{
      background:#000;
      color:white;
      width:30%;
      border-radius:10px;
      padding:10px 40px 17px 40px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:30px;
      box-shadow:0px 0px 40px 10px #a1a1a130;
      position:relative;
    }

    .nav-logo{
      height:40px;
      width:auto;
      display:block;
      flex-shrink:0;
    }

    nav ul{
      list-style:none;
      display:flex;
      gap:30px;
      align-items:center;
      position: relative;
    }
    nav ul li{
      margin-top: 7px;
    }

    nav a{
      color:#ffffff;
      text-decoration:none;
      font-size:14px;
      font-weight:300;
      opacity:1;
      transition:.3s;
      text-transform: capitalize;
    }

    nav a:hover{
      opacity:.6;
    }

    nav a.active {
    position: relative;
    color: #ffffff;
    }

    nav ul li:nth-child(3) .active {
      color:#ff0000;
    }
    nav ul li:nth-child(4) .active {
      color:#458cff;
    }
    nav ul li:nth-child(5) .active {
      color:#FFC303;
    }

    .nav-indicator{
  position:absolute;
  bottom:-9px;
  left:0;
  height:2px;
  background:white;
  border-radius:2px;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    width .45s cubic-bezier(.22,1,.36,1);
  will-change: transform,width;
  }

/* =========================
   BURGER BUTTON
========================= */

.burger{
  display:none;
  width:32px;
  height:28px;
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
  z-index:2000;
}

.burger span{
  position:absolute;
  width:100%;
  height:5px;
  background:white;
  left:0;
  border-radius: 100px;
  transition:.6s cubic-bezier(.22,1,.36,1);
}

.burger span:nth-child(1){
  top:6px;
}

.burger span:nth-child(2){
  bottom:6px;
}

/* animation X */
.burger.active span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.burger.active span:nth-child(2){
  transform:translateY(-6px) rotate(-45deg);
}

.no-scroll{
  overflow:hidden;
}



/* =============================================================================================   
===================================== HOMEPAGE =================================================
============================================================================================= */

/* ─── SECTION 1 : HERO ──────────────────────────────────────
       height: 100vh dans le flux = remplace l'ancien spacer.
       Les layers et le logo sont fixed donc hors du flux,
       mais la section occupe bien 100vh de hauteur scrollable. */
    #hero {
      height: 100vh;
      background: linear-gradient(0deg, rgb(145 201 255) 0%, rgb(255 255 255) 100%);
    }

    /* ─── LAYERS FIXES ─────────────────────────────────────────
       Collés à la fenêtre, hors du flux.
       Seul background-position-y bouge via JS. */
    .parallax-layer {
      position: fixed;
      inset: 0;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }

    #layer-04 { z-index: 1; background-image: url('https://outofnowherestudio.fr/assets/img/creationspice-background-paris-illustration-plan-04.png'); }
    #layer-03 { z-index: 2; background-image: url('https://outofnowherestudio.fr/assets/img/creationspice-background-paris-illustration-plan-03.png'); }
    #layer-02 { z-index: 3; background-image: url('https://outofnowherestudio.fr/assets/img/creationspice-background-paris-illustration-plan-02.png'); }
    #layer-01 { z-index: 4; background-image: url('https://outofnowherestudio.fr/assets/img/creationspice-background-paris-illustration-plan-01.png'); }

    /* ─── LOGO ──────────────────────────────────────────────── */
    #hero-logo {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      width: min(500px, 90vw);
      height: min(200px, 20vw);
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    #hero-logo img {
      width: 20vw;
      margin-left: -2vw;
      filter: drop-shadow(2px 3px 14px #00000020);
    }

.section{
  position: relative;
  z-index: 20;
  background: #ffffff;
  width: 100%;

}
/* ========================================================================
   SECTION - HELLO
=========================================================================== */

.section-hello{
  padding:30vh 0px;
  background:#c1eaff;
}

.section-hello h2 {
  margin-bottom: 40px;
}

.section-hello p {
  text-align: justify;
}

.section-hello strong {
  text-transform: uppercase;
  font-weight: 18px;
  display: block;
  margin-bottom: 10px;
}

.section-hello .column-left{
  background:linear-gradient(301deg,rgba(5, 68, 207, 1) 0%, rgba(17, 150, 191, 1) 100%);
  color: #ffffff;
  padding: 10vh;
}

.section-hello .column-right{
  background-image: url(../assets/img/swann-out-of-nowhere-studio-gang-portrait.jpg);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.section-hello .cta-principal {
  color:#ffffff;
  width: auto;
  padding: 0px 60px;
  border:2px solid #ffffff;
}

.section-hello .cta-principal:hover{
  background: #ffffff;
  color:#0657CB;
  border:2px solid #ffffff;
}

.section-hello .cta-principal.first {
  background: #ffffff;
  color:#0F8FC0;
  border:2px solid #ffffff;
}

.section-hello .cta-principal.first:hover{
  width: auto;
  padding: 0px 60px;
  border:2px solid #ffffff;
}


/* ========================================================================
   SECTION - SERVICE
=========================================================================== */




/* =========================
CARDS
========================= */


.section-service{
  padding:30vh 0px;
  flex-direction: column;
  background-image: url('../assets/img/background-css-pattern-01-dot-mini.png');
}

.section-service H2 {
  margin-bottom: 170px;
}

.service-card-holder{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:32px;
    flex-wrap:wrap;
}

.service-card{

    width:100%;
    max-width:300px;
    border-radius:40px;
    position:relative;
    overflow:visible;
    background: #ffffff;
    /*filter:drop-shadow(0 18px 35px rgba(0,0,0,.12));*/
}

/* =========================
ZONE IMAGE
========================= */

.service-character{
    position:relative;
    height:210px;
    border-radius:40px 40px 0 0;
    overflow:visible;
}


.service-card.pyepye .service-character{
    background:#456bff ;
}
.service-card.pyepye h4{
    color:#456bff ;
}
.service-card.pyepye .cta-principal{
    border:2px solid #456bff;
}

.service-card.pyepye .cta-principal{
    border:2px solid #456bff;
    color:#456bff;
}

.service-card.pyepye .cta-principal:hover{
    background:#456bff;
    color:#ffffff;
}


.service-card.swamini .service-character{
    background:#FFC303 ;
}
.service-card.swamini h4{
    color:#FFC303 ;
}
.service-card.swamini .cta-principal{
    border:2px solid #FFC303;
    color:#FFC303 ;
}

.service-card.swamini .cta-principal:hover{
    background:#FFC303;
    color: #ffffff;
}




.service-card.diablibus .service-character{
    background:#7fb93f ;
}
.service-card.diablibus h4{
    color:#ff0000 ;
}
.service-card.diablibus .cta-principal{
    border:2px solid #ff0000;
    color: #ff0000;
}

.service-card.diablibus .cta-principal:hover{
    background:#ff0000 ;
    color:#ffffff;
}



/* Image qui dépasse */

.service-character img{

    position:absolute;

    left:50%;

    bottom:-0px;

    transform:translateX(-50%);

    width:82%;

    max-width:280px;

    z-index:10;

    filter:
        drop-shadow(
            0 -10px 15px rgba(0,0,0,.25)
        );
}

/* =========================
CONTENU
========================= */

.service-content{
    border-radius:0px 0px 40px 40px;
    overflow:hidden;
    border:2px solid #ededed;
    border-top: none;
}

.service-info{
    padding: 40px 35px 30px;
    text-align: center;
}

.service-info h4{
    font-size:12px;
    font-weight:800;
    margin-bottom: 10px;
    color:#7fb93f;
    letter-spacing:1px;
    text-transform:uppercase;
}

.service-info h3{
    font-size:32px;
    line-height:1;
    margin-bottom:6px;
}

.service-info p{
    font-size:14px;
    line-height:20px;
    color:#adadad;
}

/* =========================
CTA
========================= */

.service-footer{

    padding:
    0 40px 40px;
}

.cta-principal{

    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    min-height:56px;
    border:2px solid #ececec;
    border-radius:10px;
    text-decoration:none;
    color:#111;
    font-weight:700;
    transition:.25s;
    font-size: 14px;
}

.cta-principal:hover{

    transform:translateY(-10px);
    border-color:#d9d9d9;
}

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

@media(max-width:1200px){

    .service-card{
        max-width:300px;
    }

}



/* ========================================================================
   SECTION - ABOUT
=========================================================================== */


    .section-about{
      padding: 20vh 0px 30vh 0px;
      background: #ffffff;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }




/* --- MAGIC CARD --- */

.magic-card-container{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0px 0px 20px 0px;
  perspective:1200px;
  gap:18px;
}

/* CARTE */
.magic-card{
  position:relative;
  width:260px;
  height:360px;
  text-decoration:none;
  transform-style:preserve-3d;
  transition:transform 0.25s ease, z-index 0.3s;
  opacity:1;
  z-index: 5;
}

.magic-card:hover,.magic-card-verso{
  z-index: 10;
}

.magic-card:first-child{
  margin-left:0;
}

/* apparition */
.magic-card.show{
  opacity:1;
}

/* ROTATION INITIALE + POSITION */

.magic-card:nth-child(1) .magic-card-recto{
  border: 3px solid #ff0000;
}

.magic-card:nth-child(2) .magic-card-recto{
  border: 3px solid #0d37ff;
}



.magic-card:nth-child(3) .magic-card-recto{
  border: 3px solid #FEC301;
}

/* INNER */
.magic-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform 0.6s ease;
  transform-style:preserve-3d;
}

/* flip */
.magic-card:hover .magic-card-inner{
  transform:rotateY(180deg);
  z-index: 20;
}

.magic-card:hover{
  z-index: 20;
}

/* FACES */
.magic-card-recto,
.magic-card-verso{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  backface-visibility:hidden;
}

/* RECTO */
.magic-card-recto{
  background-size:cover;
  background-position:center;
  color:white;
  flex-direction: column;
}

.magic-card-recto::after{
  content:"";
  position:absolute;
  inset:0;
  background:#000000cf;
}

.magic-card-recto h3{
  position:relative;
  text-align: center;
  z-index:2;
  font:inherit;
  font-size:25px;
  font-weight:800;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .4));
  margin-bottom: 0px;
}

/* VERSO */
.magic-card-verso{
  background:#6f8165;
  color:white;
  transform:rotateY(180deg);
  text-align:center;
  font-size:14px;
  display:flex;
  flex-direction:column;
  gap:15px;
}

.magic-card:nth-child(1) .magic-card-verso, .magic-card:nth-child(1) .numbers{
  background:#ff0000;
}

.magic-card:nth-child(2) .magic-card-verso, .magic-card:nth-child(2) .numbers{
  background: #0d37ff;
}


.magic-card:nth-child(3) .magic-card-verso, .magic-card:nth-child(3) .numbers{
  background: #FEC301;
}

.magic-card-verso p {
  font-size: 15px;
  line-height: 19px;
  padding: 0px 20px;
  text-transform: uppercase;
}

.magic-card-verso h3{
  font-size: 30px;
  margin-bottom: 0px;
  line-height:30px !important;
}

/* ICONES */
.magic-card-recto .icon{
  font-size:60px;
  transition:transform 0.3s ease;
  z-index: 10;
}

.magic-card:hover .icon{
  transform:scale(1.2);
}

/* IMAGES */
.magic-card:nth-child(1) .magic-card-recto{
  background-image:url('../assets/img/photo-graphisme-image-principal.jpg');
  color:#ff0000;
}
.magic-card:nth-child(2) .magic-card-recto{
  background-image:url('../assets/img/photo-formation-image-principal.jpg');
  color:#0d37ff;
}
.magic-card:nth-child(3) .magic-card-recto{
  background-image:url(../assets/img/Outofnohwerestudio-magic-card-bg-illustration.jpg);
  color:#FEC301 ;
}

.magic-card:nth-child(3) .magic-card-verso p, .magic-card:nth-child(3) .magic-card-verso h3{
    color: #000000;
}

/* RESPONSIVE */
@media(max-width:900px){
  .magic-card{
    margin-left:0;
  }
}


    .section-about .info{
      padding:0px 40px;
    }
    .section-about h2{
      color: #1d1d1d;
    }



    .section-about a.cta-primary {
      color:#000000;
      border:3px solid #000000;
    }

    .section-about a.cta-primary:hover {
      color: #ffffff;
      border:3px solid #000000;
      background: #000000;
    }

    .container-the-designer{
      background:#ffffff;
      border-radius: 10px;
      position: absolute;
      transform: translateX(350%);
      transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
      gap: 0px;
      z-index: 100;
    }

    .container-the-designer.activated{
      transform: translateX(0);
    }

    .container-the-designer p {
      line-height: 25px;
    }

    .container-the-designer ul{
      line-height: 24px;
      list-style: disc;
      list-style-position: inside;
      margin-bottom: 20px;
    }

    .container-the-designer .column.left{
      padding: 50px;
    }

    .container-the-designer h3, .container-the-designer p {
      color: #000000;
    }
    .container-the-designer .column.right {
      background-image: url(../assets/img/swann-portrait.jpg);
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; /* Resize the background image to cover the entire container */
      border-radius: 0px 10px 10px 0px ;
    }

    .container-the-designer .cta-holder{
      margin-top: 0px;
    }

    .image-box {
      display: block;
      height:100%;
      background-color: #cccccc;
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; /* Resize the background image to cover the entire container */
      border-radius: 10px;
      box-shadow: 6px 6px 32px 0px #00000030;
    }

    .section-about .image-box {
      background-image: url(../assets/img/swann-portrait.jpg);
      box-shadow: 0px 0px 40px 10px #a1a1a130;
    }

  

    .section-about h2 span{
    font-family: "Grandstander", cursive;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    text-transform: uppercase;
    font-size: 46px;
    line-height: 0.6;
    }


    .rounded{
      border-radius:40px;
    }
    .picture-rounded{
      max-width: 100%;
      box-shadow: 6px 6px 32px 0px #00000030;
    }



/* ========================================================================
   SECTION - PROJET
=========================================================================== */


    .section-projet{
      width: 100%;
      padding:30vh 0px 30vh 0px; 
      flex-direction: column;
    }
    .section-projet h2, .section-projet h3{
      color: #ff0000;
    }
    .section-projet .container-cropped:nth-child(1){
      flex-direction: column;
      gap: 0px;
    }
    .section-projet .details{
      margin-top: 20px;
    }
    .section-projet .details h3{
      color: #ffffff;
      text-align: center;
      margin: 0px;
    }

    .section-projet .details .info {
      background: linear-gradient(304deg,rgba(212, 0, 0, 1) 0%, rgba(255, 84, 84, 1) 100%);
      border-radius: 10px;
      color: #ffffff;
      overflow: hidden;
    }
    .section-projet .details .info div {
      flex: 1;
      align-items: center;
    }
    .section-projet .details .info .service-keypicture{
      background-image: url('https://www.picsum.photos/seed/picsum/200/300');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .section-projet .details .info  p {
      color: #ffffff;
    }
    .section-projet .details .info .text {
      padding: 40px;
      display: flex;
      justify-content: center;
    }

    .reassurance{
      display: grid !important;
      grid-template-columns:1fr 1fr;
      grid-column-gap:20px;
      grid-row-gap:20px;
    }

    .reassurance div:nth-child(2){
      background:#622828;
    }
    .reassurance div:nth-child(3){
      background:#4e2a2a;
    }

    .reassurance div{
      transition: transform 0.5s ease;
    }

 

    .reassurance-bloc{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 6px 6px 32px 0px #00000030;
      border-radius: 10px;
      padding: 60px 50px;
      background:#390505;
      text-align: center;
    }

    .reassurance-bloc img{
      margin-bottom: 20px;
      height:70px;
    }

    .reassurance-bloc h4 {
      margin-bottom: 10px;
      color:#ffffff;
    }

    .reassurance-bloc p {
      line-height: 19px;
    font-size: 12px;
    text-align: center;
    color: #9E9E9E;
    }
    .reassurance-bloc li {
    line-height: 19px;
    font-size: 12px;
    margin-bottom: 20px;
    text-align:left;
    color: #9E9E9E;
    list-style: decimal;
    }

/*  ---------- FILTER ---------- */
    .filter-nav{
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 40px;
    width: auto;
    margin: 0 auto 60px auto;
    border-radius: 10px;
    }

    .filter-btn{
      background:transparent;
      border:none;
      padding:20px 20px;
      border-radius:10px;
      cursor:pointer;
      font-weight:600;
      transition:.3s;
      text-transform: uppercase;
      text-align: center;
      text-decoration: none;
      font-size: 13px;
      color:#ff0000;
    }

    .filter-btn.active{
      background:#ff0000;
      color:#ffffff;
    }
/*  ---------- GALLERY ---------- */
    .gallery{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:0px;
      border-radius: 20px;
      overflow: hidden;
    }

    .project{
      position:relative;
      overflow:hidden;
      aspect-ratio:1/1;
      transform:translateY(40px) scale(.98);
      opacity:0;
      transition:opacity .5s ease, transform .5s ease;
      border-radius:0px;
    }

    .project.visible{
      transform:translateY(0) scale(1);
      opacity:1;
    }

    .project.hidden{
      opacity:0;
      transform:scale(.95);
      pointer-events:none;
    }

    .project a{display:block;width:100%;height:100%}

    .project img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .6s ease;
    }

    .project:hover img{
      transform:scale(1.08);
    }

    .project-overlay{
      position:absolute;
      inset:0;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      padding:40px;
      background:#ff0000d1;
      opacity:0;
      transition:.4s ease;
      color:white;
    }

    .project:hover .project-overlay{
      opacity:1;
    }

    .project-info{
      display:flex;
      flex-direction:column;
      gap:4px;
      text-align: left;
    }

    .project-title{
      font-weight:800;
      font-size:60px;
      margin-bottom: 10px;
      width: 80%;
    }

    .project-category{
      font-size:18px;
      opacity:.85;
    }

    .client-logo{
      width:40px;
      height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .client-logo img{
      width:40px;
      height:40px;
      border-radius:50%;
    }


/* ========================================================================
   SECTION FORMATION
=========================================================================== */

  
    .section-formation{
        flex-direction: column;
        padding:30vh 0px 30vh 0px;
        background: #ffffff;
    }

    .section-formation h2, .section-formation h3{
      color: #0d37ff;
      text-align: center;
    }

    .section-formation img{
    max-width: 100%;
    display: block;
    }


 

    .section-formation .info p {
      text-align: center;
    }

    .section-formation h3 span {
      padding-top: 20px;
      display: block;
    }

    .section-formation .container-cards{
      margin-top: 8vh;
    }



/*  ---------- CARDS ---------- */


    .card-basic{
      background:#0b0b0b;
      box-shadow: 0px 0px 40px 10px #a1a1a130;
      border-radius:15px;
      overflow: hidden;
      height: inherit;
      position: relative;
    }
    .card-info{
    padding:20px 30px 14px 30px;
    display: flex;
    flex-flow: column;
    align-items: center;

    }
    .card-basic a {
      text-decoration: none;
      color:#000000;
    }
    .card-basic h4{
      text-align: center;
      margin-bottom: 8px;
    }
    .card-data{
      background: red;
      color: white;
      font-weight: 700;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
    }
    .data-box{
    width: 33%;
    float: left;
    padding: 20px 15px;

    }
    .card-basic h5{
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #c1c1c1;
    text-align: center;
    }

    .card-basic p{
    line-height: 19px;
    font-size: 12px;
    margin-bottom: 20px;
    text-align: center;
    color: #000000;
    }
    .card-basic a{
      transition: opacity 0.5s;
    }
    .card-basic a:hover{
      opacity: 0.4;
    }

    .card-basic.formation-ia{
      border-bottom:6px solid #6FC457;
    }
    .card-basic.formation-ia h4, .card-basic.formation-ia .learning-time{
      color:#6FC457;
    }

    .card-basic.formation-photoshop{
      border-bottom:6px solid #1796ea;
    }
    .card-basic.formation-photoshop h4, .card-basic.formation-photoshop .learning-time {
      color:#1796ea;
    }

    .card-basic.formation-indesign {
      border-bottom:6px solid #e8326a;
    }
    .card-basic.formation-indesign h4, .card-basic.formation-indesign .learning-time{
      color:#e8326a;
    }

    .card-basic.formation-lightroom{
      border-bottom:6px solid #0c55ae;
    }
    .card-basic.formation-lightroom h4, .card-basic.formation-lightroom .learning-time{
      color:#0c55ae;
    }

    .card-basic.formation-after-effects{
      border-bottom:6px solid #643DCA;
    }
    .card-basic.formation-after-effects h4, .card-basic.formation-after-effects .learning-time{
      color:#643DCA;
    }

    .card-basic .learning-time {
      text-transform: uppercase;
      font-size: 11px;
      text-align: center;
      font-weight: 600;
      margin-bottom: 0px;
      position: absolute;
      margin: 0 auto;
      bottom: 20px;
      display: none;
    }

    .card-basic.formation-premiere-pro{
      border-bottom:6px solid #8D6AD8;
    }
    .card-basic.formation-premiere-pro h4, .card-basic.formation-premiere-pro .learning-time{
      color:#8D6AD8;
    }

    .section-formation .projet-advantage {
      padding-top: 20vh;
      gap: 60px;
    }

    .section-formation .projet-advantage .info {
      max-width: 20%;
    }

    .section-formation .image-box {
      background-image: url(../assets/img/photo_les_formations_out_of_nowhere_studio.jpg);
      box-shadow:0px 0px 40px 10px #a1a1a130;
    }


/* ========================================================================
   FOOTER
=========================================================================== */
    footer{
      background:#000;
      text-align:center;
      font-size:13px;
      color: white;
      position: relative;
      z-index: 100;
    }
    footer ul{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
    }
    footer ul li {
      margin: 20px;
      list-style: none;
    }
    footer ul li a {
      color:white;
      text-decoration: none;
    }
    footer ul li a:hover {
      opacity: 0.6;
    }


@-webkit-keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
@-moz-keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
@keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
 .scroll-btn p{
 }
 .scroll-btn {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16vh;
  text-align: center;
  z-index: 100;
}
.scroll-btn > * {
  display:block;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  color: #7f8c8d;
  color: #ffffff;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
  color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.scroll-btn .mouse {
  position: relative;
  display: block;
  width: 35px;
  height: 55px;
  margin: 0 auto 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid white;
  border-radius: 23px;
}
.scroll-btn .mouse > * {
  position: absolute;
  display: block;
  top: 29%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: white;
  border-radius: 50%;
  -webkit-animation: ani-mouse 2.5s linear infinite;
  -moz-animation: ani-mouse 2.5s linear infinite;
  animation: ani-mouse 2.5s linear infinite;
}

.scroll-btn{
  transition: opacity .6s ease, transform .6s ease;
}

.scroll-btn.hide{
  opacity:0;
  transform:translateY(-20px);
  pointer-events:none;
}

/*  ---------- SLICK ---------- */

.slick-track {
  display: flex !important;
  padding: 40px 0px;
  zoom: 1.1;
  left: -3vw;
}

.slick-slide {
  height: auto;
  margin:5px;
}

.slick-slide > div {
  height: 100%;
}

.slick-arrow {
    display: inline-block;
    padding: 20px 40px;
    border:none;
    border-radius:10px;
    background:#ffffff;
    color: #0d37ff;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    position: absolute;
    bottom: -100px;
    margin:40px 100px;
    border:3px solid #0d37ff;
}

.slick-arrow:hover{
  background: #0d37ff;
    color: #ffffff;
    cursor: pointer;
}



.slick-next{
left: 170px;
}

.slick-dots{
  display: flex;
  flex-flow: row;
  justify-content: center;
}



.slick-dots li {
  margin: 0 10px;
}

.slick-dots li button{
  border-radius: 100%;
  border:none;
  height: 16px;
  width: 14px;
  background: #e6e6e6;
  color: transparent;
  border:2px solid #ffffff;
}

.slick-dots li button:hover {
  cursor: pointer;
}


.slick-dots li.slick-active button {
  background:#000000;
  border:2px solid #ffffff;
}

/* CAROUSEL */


@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}


/* ===========================
SLIDER LOGO PARTNERS
=========================== */

.logo-partners{
  position: relative;
  background: #ffffff;
  z-index: 20;
  border-bottom: 1px solid #ffffff;
}

.slider-logo-partners {
  background:#ffffff;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 80px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width:100%;
}

.slider-logo-partners::before, .slider-logo-partners::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider-logo-partners::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.slider-logo-partners::before {
  left: 0;
  top: 0;
}
.slider-logo-partners .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}

.slider-logo-partners .slide{
  margin:0px 20px;
}


.slider-logo-partners .slide img{
    width: 90%;
    height: auto;
    margin: 10px auto;
    display: block;
}



/* ===========================
SLIDER BIG PICTURE 
=========================== */

.slider-big-picture{
max-width:100%;
height:600px;
display:flex;
border-radius:40px;
overflow:hidden;
background:#ffffff;
box-shadow: 6px 6px 32px 0px #00000030;
}

/* LEFT */

.slider-big-picture .info-text{

width:42%;
padding:70px;
background:#ffffff;
position:relative;
display:flex;
flex-direction:column;
justify-content:center;

}

/* TEXT CONTAINER */

.slider-big-picture .text-wrapper{
display:grid;
}

/* TEXT SLIDE */

.slider-big-picture .text-slide{
grid-area:1/1;
opacity:0;
pointer-events:none;

}
.slider-big-picture .text-slide.active{

opacity:1;
pointer-events:auto;

}

/* TEXT LINES */

.slider-big-picture .line{
display:block;
opacity:0;
transform:translate3d(0,30px,0);
transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}

.slider-big-picture p, .slider-big-picture li{
  line-height: 19px;
    font-size: 12px;
    margin-bottom: 12px;
    color: #000000;
}

.slider-big-picture li{
  list-style: decimal;
}

/* ACTIVE */

.slider-big-picture .text-slide.active .line{
opacity:1;
transform:translate3d(0,0,0);
}

/* DELAYS */

.slider-big-picture .text-slide.active .line:nth-child(1){transition-delay:.1s}
.slider-big-picture .text-slide.active .line:nth-child(2){transition-delay:.25s}
.slider-big-picture .text-slide.active .line:nth-child(3){transition-delay:.4s}

/* DOTS */

.slider-big-picture .slider-dots{

position:absolute;
bottom:40px;
left:70px;
display:flex;
gap:8px;

}

.slider-big-picture .dot{

width:10px;
height:10px;
border-radius:50%;
background:#cfcfcf;
cursor:pointer;

}

.slider-big-picture .dot.active{
background:black;
}

/* RIGHT */

.slider-big-picture .info-picture{

width:58%;
position:relative;
overflow:hidden;

}

.slider-big-picture .image-slide{

position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
transform:scale(1.06);
transition:1s ease;

}

.slider-big-picture .image-slide.active{

opacity:1;
transform:scale(1);

}

/* IMAGES */

.slider-big-picture .img1{background-image:url("../assets/img/out-of-nowhere-studio-formation-avantage-support-de-cours.jpg")}
.slider-big-picture .img2{background-image:url("https://picsum.photos/id/1016/1600/900")}
.slider-big-picture .img3{background-image:url("https://picsum.photos/id/1018/1600/900")}
.slider-big-picture .img4{background-image:url("https://picsum.photos/id/1021/1600/900")}

/* ARROWS */

.slider-big-picture .navigation-holder{

position:absolute;
bottom:30px;
right:30px;
display:flex;
gap:12px;
z-index:10;

}

.slider-big-picture .navigation-arrow-left,
.slider-big-picture .navigation-arrow-right{
width:44px;
height:44px;
background:white;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border-radius:6px;
box-shadow:0 6px 15px rgba(0,0,0,.1);

}






/*  ---------- RESPONSIVE - Laptop 16inch ---------- */
@media(max-width:2000px){
  /* STRUCTURE */
  .container-cropped{
    width: 80%;
    gap: 20px;
  }

  h2{
    font-size: 70px;
    line-height: 80px;
  }
  h3{
    font-size: 50px;
    line-height: 58px;
  }

  h3.subtitle{
    font-size: 26px;
    margin-bottom: 20px;
  }

  p, ul.listing-basic {
    font-size: 16px;
    line-height: 1.6;
  }

  /* MENU */
  nav{
    width: 60%;
  }
  /* HOME */
  .container-the-designer{
    width: 80%;
  }
  .project-title{
    font-size:40px;
  }
  #hero-logo img {
    width: 30vw;
  }
  .service-card-holder{
    gap: 20px;
  }
}




/*  ---------- RESPONSIVE - tablette ---------- */
    @media(max-width:1000px){
      /* CONTAINER AND PRIMAR CONTENT */
      .container-cropped{
      width: 90%;
      }

      h3{
        text-align: center;
        font-size: 34px;
        line-height: 44px;
      }

      .section-about h3 span{
        text-align: center;
        font-size: 50px;
        display: block;
        line-height:0.9;
        padding-top: 10px;
      }
      .section-about p {
        text-align: center;
      }
      .section-formation .projet-advantage .info{
        max-width: 100%;
      }
      .slider-big-picture .info-text {
        width: auto;
        padding: 70px 40px;
      }

      .gallery{
      grid-template-columns: repeat(2, 1fr);
      }
      /*menu burger */
       .burger{
      display:block;
      }
      .slick-track {
      display: flex !important;
      padding-bottom: 20px;
      zoom:normal;
      left:unset;
      }

  nav ul{
    position:fixed;
    top:-20px;
    left:0;
    width:100%;
    height:102vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:40px;
    background:#0b0b0b;
    transform:translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition:
      transform .9s cubic-bezier(.22,1,.36,1),
      opacity .4s ease,
      visibility .4s;
    }

  nav ul.menu-open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }
  nav ul li a{
    padding: 30px;
  }
  footer ul li {
    margin: 10px;
  }

  .slider-big-picture{
    flex-direction:column-reverse;
    height:auto;
  }

  .slider-big-picture .info-picture{
    width:100%;
    height:320px;
  }

  .slider-big-picture .slider-dots{
    left:40px;
    bottom:20px;
  }
}
/*  ---------- RESPONSIVE - MOBILE ---------- */
    @media (max-width: 750px){
      /* ------ STRUCTURE ------ */

      .hiding-mobile{
        display: none;
      }
      .hiding-desktop{
        display: inline-block !important;
      }

      h2{
        font-size: 50px;
        line-height: 60px;
      }
      h3{
        font-size: 42px;
        line-height: 52px;
      }
      h4{
        font-size:30px;
        line-height: 38px;
      }
      p{
        line-height: 1.4;
      }
      .container-cropped{
        flex-direction: column;
      }
      .container-cropped r.column{
        justify-content: center;
        align-items: center;
      }
      a.cta-primary{
        margin: 40px 0px 0px 0px;
      }

      /* ------ HEADER ------ */
      #hero-logo img {
        width: 290px;
        margin-left: 0px;
      }

      /* ------ SECTION HELLO ------ */
      .section-hello h2 {
        text-align: center;
      }
      .section-hello .column-left {
        padding: 0px;
      }

      .section-hello .cta-holder{
        flex-direction: column;
      }

      /* ------ SECTION SERVICE ------ */
      .section-service{
        padding:140px 0;
      }

      .section-service h2{
        font-size:42px;
        margin-bottom:200px;
      }

      .service-card-holder{
        gap:50px;
      }

      .service-card{
        max-width:360px;
        margin-bottom:100px;
      }

      .service-character{
          height:230px;
      }

      .service-character img{
        width:78%;
      }


      .cta-holder{
        justify-content: center;
      }
      .container-axes{
        margin-bottom:20px ;
      }

      .container-the-designer{
        flex-direction: column-reverse;
        width: 80%;
        bottom: 40px;
        padding:0px 0px 50px 0px;
        display: none;
      }
      .container-the-designer .info{
        padding: 50px 50px 20px 50px;
      }

      .container-the-designer .image-box{
        min-height: 30vh;
        margin-top: 0px;
        border-radius:10px 10px 0px 0px ;
      }
      .container-the-designer p, .container-the-designer ul{
        text-align: left;
      }
      /* ------ SECTION PROJET ------ */
      .section-projet .filter-nav{
        display: none;
      }
      .section-projet h3.text-center {
        margin-bottom: 60px;
      }
      .container-cropped.details {
        text-align: center;
      }
      /* ------ GALLERY ------ */
      .gallery{
        grid-template-columns: 1fr;
      }
      .project{
        aspect-ratio: 4/4;
      }
      .project-title{
        font-size: 45px;
        margin-bottom: 20px;
      }
      .project-overlay{
        opacity: 1;
        background:linear-gradient(to top, rgb(255 0 0 / 40%), rgba(0, 0, 0, 0));
      }

      /* ------ REASSURANCE ------ */
      .reassurance{
        grid-template-columns: 1fr;
      }
      
      /* ------ SECTION FORMATION ------ */
      .section-formation {
        padding: 20vh 0px 10vh 0px;
      }
      .section-formation .container-cropped{
        text-align: center;
        gap: 0px !important;
      }
      .section-formation .info{
        padding: 50px 20px 20px 20px;
      }
      .card-basic .learning-time{
        position: relative;
        bottom: inherit;
      }
      .slick-slide{
        margin: 40px;
      }
      .slick-arrow {
      margin:10px 70px;
      }
      .section-formation .container-cards {
        margin-top: 0px;
      }
      .card-info{
        text-align: center;
      }
      .section-formation .image-box{
        transform: rotate(0deg);
      }

      /* ------ FOOTER ------ */
      footer{
        padding: 40px 20px;
      }
      footer ul{
        flex-direction: column;
    }

  }


/* =============================================================================================   
========================  MENTIONS LEGALES  =================================================
============================================================================================= */

#mentions-legales{
  background: #000000;
}

#mentions-legales .logo{
  width:20%;
  margin:10vh 0px 0px 10vh;
}

#mentions-legales .container{
  width: 70%;
  display: block;
  margin: 0 auto;
  padding-bottom: 30vh;
}

#mentions-legales H1 {
      font-family: "Anton", sans-serif;
      font-size: 7rem;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 12vh;
      color: #ffffff;
      position: relative;
      top: auto;
      margin: 20vh 0px 20vh 0px;
    }


#mentions-legales h2, #mentions-legales p{
  color: white;
}

#mentions-legales h2 {
  font-size: 4rem;
  line-height: 80px;
  text-align: left;
  margin:10vh 0px 6vh 0px;
}

#mentions-legales p {
  margin-bottom: 10vh;
}

/*  ---------- RESPONSIVE - MOBILE ---------- */
    @media (max-width: 750px){
      #mentions-legales .logo{
        width: 50%;
        margin: 10vh auto 0px auto;
        display: block;
      }
      #mentions-legales .container{
        width: 70%;
        overflow: hidden;
        padding-bottom: 5vh;
      }
      #mentions-legales H1 {
        font-family: "Anton", sans-serif;
        font-size: 3rem;
        margin: 10vh 0px 3vh 0px;
      }
      #mentions-legales h2{
        font-size: 2rem;
        margin: 0vh 0px 2vh 0px;
        line-height: 42px;
      }
      #mentions-legales p {
        margin-bottom: 5vh;
      }
}