/*--------------------------GENERAL---------------------------------------*/
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;
  box-sizing: border-box;
  text-decoration: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
/* Body rules */
body {
  line-height: 1.875;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-primary);
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

img {
  border-style: none;
  height: auto;
  max-width: 100%;
}

ol,
ul {
  list-style: none;
}

.single-template .page-content ol,
.single-template .page-content ul {
  list-style: disc;
  padding-left: 1rem;
}

.single-template .page-content ul,
.single-template .page-content ol,
.single-template .page-content h2,
.single-template .page-content h3,
.single-template .page-content h4 {
  margin-top: var(--spacing-small);
}

.single-template .page-content p {
  margin-top: var(--spacing-extraSmall);
}

.single-template .page-content h2,
.single-template .page-content h3,
.single-template .page-content h4 {
  font-family: var(--font-secondary);
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body,
textarea {
  height: 100%;
}

:root {
  /*noir*/
  --color-primary: hsl(0, 0%, 0%);
  --color-primary-lighter: hsl(0, 0%, 15%);
  --color-primary-alpha-10: hsla(0, 0%, 0%, var(--alpha1));
  --color-primary-alpha-20: hsla(0, 0%, 0%, var(--alpha2));
  --color-primary-alpha-50: hsla(0, 0%, 0%, var(--alpha5));
  --color-primary-alpha-80: hsla(0, 0%, 0%, var(--alpha8));
  --color-primary-alpha-90: hsla(0, 0%, 0%, var(--alpha9));

  /*rose*/
  --color-secondary: hsl(345, 92%, 47%);
  --color-secondary-lighter: hsl(343, 74%, 90%);
  --color-secondary-darker: hsl(343, 74%, 45%);

  /*blanc*/
  --color-white: hsl(0, 0%, 100%);
  --color-white-darker: hsl(0, 0%, 90%);
  --color-white-alpha-05: hsla(0, 0%, 100%, var(--alpha05));
  --color-white-alpha-10: hsla(0, 0%, 100%, var(--alpha1));
  --color-white-alpha-50: hsla(0, 0%, 100%, var(--alpha5));
  --color-white-alpha-80: hsla(0, 0%, 100%, var(--alpha8));

  /*gris*/
  --color-dark-grey-opacity: hsla(0, 0%, 11%, 0.929);
  --color-dark-grey: #0C0C0C;

  /*dégradé*/
  --color-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0%, #fa2458 50%, rgba(255, 255, 255, 0.0) 100%);

  /*Alpha*/
  --alpha05: .05;
  --alpha1: .1;
  --alpha2: .2;
  --alpha5: .5;
  --alpha8: .8;
  --alpha9: .9;

  /* Fonts  families */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'KG Summer Storm Rough', cursive;

  /* Fonts sizes */
    --font-size-h1: 1.6rem;
    --font-size-h2: 1.4rem;
    --font-size-h3: 1.2rem;
    --font-size-h4: 1rem;
    --font-size-h5: 0.8rem;
    --font-size-h6: 0.7rem;
  
    /* Spacing */
  --spacing-extraSmall: 0.4rem;
  --spacing-small: 1.3rem;
  --spacing-medium: 2rem;
  --spacing-large: 5rem;
  --spacing-large-mobile: 3rem;
  --spacing-extraLarge: 9rem;

  /*Radius*/
  --radius-small: .5rem;
  --radius-medium: 1rem;
  --radius-large: 2rem;
  --radius-rounded: 10rem;
}



html.sr .load-hidden {
  visibility: hidden;
}

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

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

/*-------------------NAVIGATION-------------------*/
.navbar {
  box-shadow: 0 0px 8px var(--color-primary);
}

/* Navbar contact icone*/
#navbar_contact-ico-lines {
  transition: all 300ms ease;
}

.navbar_contact-ico:hover #navbar_contact-ico-lines {
  fill: var(--color-secondary);
  transition: all 300ms ease;
}

.navbar_contact-ico {
  vertical-align: middle;
}

.navbar_contact-text {
  margin-left: 1rem;
  line-height: 1.2;
  font-size: var(--font-size-h5);
  color: var(--color-white-alpha-80);
  text-transform: uppercase;
}

@media screen and (max-width:768px) {
  .navbar_contact-text,
  .navbar_burger-text {
    display: none;
  }
}

/* Navbar logotype */
.navbar_logo-container {
  width: calc(50px + 0.5rem);
  height: calc(50px + 0.5rem);
  padding: .5rem;
  background-color: var(--color-primary);
  transform: rotate(45deg);
  border-radius: 7px;
  box-shadow: 0 0px 3px var(--color-primary);
}

.navbar_logo-img {
  transform: rotate(-45deg);
  transition: all .3s ease;
}

.navbar_logo-img:hover {
  transform: scale(1.1) rotate(-45deg);
  transition: all .3s ease;
}

/* Burger button */
.navbar_burger {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.navbar_burger-text {
  color: var(--color-white-alpha-80);
  text-transform: uppercase;
  font-size: var(--font-size-h5);
  margin-right: 1rem;
}

.navbar_burger-lines {
  display: inline-block;
  position: relative;
  top: -2px;
  width: 35px;
  height: 4px;
  background-color: var(--color-white);
  cursor: pointer;
  transition: all 300ms ease;
}

.navbar_burger-lines:before,
.navbar_burger-lines:after {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 35px;
  height: 4px;
  content: '';
  background-color: var(--color-white);
  transform-origin: 50% 50%;
  transition: top 300ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navbar_burger-lines:before {
  top: 12px;
}

.navbar_burger-lines:after {
  top: -12px;
}

.navbar_burger:hover .navbar_burger-lines:before,
.navbar_burger:hover .navbar_burger-lines:after,
.navbar_burger:hover .navbar_burger-lines {
  background-color: var(--color-secondary);
}

/*-- Button active --*/
.navbar_burger.active .navbar_burger-lines {
  background: transparent;
}

.navbar_burger.active .navbar_burger-lines:before,
.navbar_burger.active .navbar_burger-lines:after {
  top: 0;
  width: 35px;
  background-color: var(--color-secondary);
  transition: top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navbar_burger.active .navbar_burger-lines:before {
  transform: rotate3d(0, 0, 1, 45deg) scale(1);
}

.navbar_burger.active .navbar_burger-lines:after {
  transform: rotate3d(0, 0, 1, -45deg) scale(1);
}

/*-- Navbar menu active --*/
.navbar-menu-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  transform: translateX(-100vw);
  background: var(--color-primary-alpha-90);
  overflow: hidden;
  transition: all .5s ease-in-out;
  /* z-index: 999; */
}

.navbar-menu-container.active {
  transform: translateX(0);
  transition: all .5s ease-in-out;
}

.navbar-menu-items {
  margin: .6rem 0;
  opacity: 0;
  transition: all .4s;
}

.navbar-menu-items.active {
  opacity: 1;
  transition: all 2s;
}

.navbar-menu-items:hover {
  background: var(--color-gradient);
}

/*--------NAVIGATION RESPONSIVE--------*/
@media screen and (min-width:768px) {
  .navbar_logo-link {
    right: 18vw;
    left: auto;
  }
}

/*-------- SCROLL TOP --------*/

.scroll-top_link {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 999;
}

/*----------- LOADER ----------*/
#loader {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

#loader p {
  animation: zoomin 2s ease-in alternate infinite;
}

/*--------------------------------------------- CORPS DES PAGES ---------------------------------------------*/
.main {
  padding-top: 3.625rem;
}

/* Scroll down - Front Page*/
.scroll-down-accueil {
  position: absolute;
  top: 40%;
  left: 0;
}

.scroll-down-accueil .scroll-text {
  display: inline-block;
  transform: rotate(-90deg) translateX(15px) translateY(-2px);
}
/* Scroll down - Single Portfolio */

.scroll-down-single-portfolio {
  margin-top: -2rem;
}

.scroll-down i {
  width: 14px;
  display: block;
  margin: 0 auto;
  animation: scroll .35s ease-in alternate infinite;
}

/*--------------------------------------------- PAGE ACCUEIL ---------------------------------------------*/
/*--------SECTION-ACCUEIL--------*/

#accueil {
  background-image: url("http://souslacoquilletatouage.fr/wp-content/uploads/2025/07/header-100.jpg");
  background-repeat: no-repeat;
  background-position-y: top;
  background-position-x: center;
  background-size: cover;
  height: calc(100vh - 58px);
}


/*-------- SECTION-SERVICES --------*/

.section-footer {
  background-image: url("http://www.souslacoquilletatouage.fr/wp-content/uploads/2025/section-bottom-640.svg");
  background-repeat: no-repeat;
  background-position-y: -1px;
  background-size: 100%;
  background-color: white;
  height: 140px;
}

@media screen and (min-width:768px) {
  .section-footer {
    background-image: url("http://www.souslacoquilletatouage.fr/wp-content/uploads/2025/section-bottom-960.svg");
  }
}

@media screen and (min-width:1200px) {
  .section-footer {
    background-image: url("http://www.souslacoquilletatouage.fr/wp-content/uploads/2025/section-bottom-1920.svg");
    /* height: 500px */
  }
}

/*-------- SECTION CREA MODE D'EMPLOI --------*/
#section-crea-mode-emploi {
  position: relative;
  padding-top: 10rem;
}

@media screen and (min-width:768px) {
  #section-crea-mode-emploi {
    padding-top: 14rem;
  }
}

#section-crea-mode-emploi:before {
  content: "";
  position: absolute;
  width: 100%;
}

#section-crea-mode-emploi:before {
  top: 0;
  background-image: url("http://www.souslacoquilletatouage.fr/wp-content/uploads/2025/section-top.svg");
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: 100%;
  background-color: white;
}


@media screen and (min-width:768px) {
  #section-crea-mode-emploi {
    padding-top: 10rem;
  }

  #section-crea-mode-emploi:before {
    height: 140px;
  }
}

/*--------SECTION CORBEAU --------*/
#section-corbeau {
  background: left top / cover no-repeat url("https://www.renardise-studio.com/wp-content/uploads/2022/09/bg-section-corbeau.svg");
}

.section-corbeau__main-block {
  margin-top: 15rem;
  margin-bottom: 5rem;
}

@media screen and (min-width:768px) {
  .section-corbeau__main-block {
    margin-top: 18rem;
  }
}

@media screen and (min-width:1200px) {
  #section-corbeau {
    background-size: 100%;
  }

  .section-corbeau__main-block {
    margin-top: 17rem;
    margin-bottom: 11rem;
    grid-column: 7 / 13;
    grid-row: 1;
  }
}

@media screen and (min-width:1600px) {
  .section-corbeau__main-block {
    margin-top: 25rem;
    margin-bottom: 12rem;
  }
}

/*--------SECTION-A-PROPOS--------*/
.section-apropos__container {
  background-image: url("https://www.renardise-studio.com/wp-content/uploads/2022/09/bg-stars.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.section-apropos__bg-stars-top {
  height: 200px;
  background-image: url("https://www.renardise-studio.com/wp-content/uploads/2022/09/bg-stars-top.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}

.section-apropos__bg-stars-bottom {
  height: 200px;
  background-image: url("https://www.renardise-studio.com/wp-content/uploads/2022/09/bg-stars-bottom.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/*--------SECTION-SOCIAL-MEDIA--------*/

@media screen and (max-width:960px) {
  .section-social-media__list:nth-child(1) {
    display: none;
  }
}

.section-social-media__list:nth-child(1) {
  max-width: 960px;
}

.section-social-media__list:nth-child(2) {
  max-width: 600px;
}

@media screen and (min-width:960px) {
  .section-social-media__list:nth-child(2) {
    margin-top: 3rem;
  }
}

.section-social-media__list .item {
  cursor: pointer;
}

@media screen and (min-width:768px) {

  .section-social-media__list:nth-child(2)>.section-social-media__list .item:nth-child(1),
  .section-social-media__list:nth-child(2)>.section-social-media__list .item:nth-child(2) {
    border-right: 2px solid var(--color-primary-alpha-50);
  }
}

.section-social-media__list:nth-child(1)>.section-social-media__list .item:nth-child(2),
.section-social-media__list:nth-child(1)>.section-social-media__list .item:nth-child(3) {
  transform: translateY(4rem);
}

.section-social-media__list .item img {
  -webkit-animation: swing-start 4s ease forwards;
  -moz-animation: swing-start 4s ease forwards;
  -o-animation: swing-start 4s ease forwards;
  animation: swing-start 4s ease forwards;
}

.section-social-media__list .item img:hover {
  -webkit-animation: swing-end 4s ease forwards;
  -moz-animation: swing-end 4s ease forwards;
  -o-animation: swing-end 4s ease forwards;
  animation: swing-end 4s ease forwards;
}


/*----------------------------- FOOTER ---------------------------------*/

/*-- Section Social Media --*/
#footer .social-media__container .item:first-child {
  border-bottom: 1px solid var(--color-secondary);
}

#footer .social-media__container .item a,
#footer .social-media__container .item a:hover {
  transition: all .3s ease;
}

/*----------------------------- ARCHIVE PORTFOLIO ---------------------------------*/
.portfolio_gallery {
  width: 100%;
}

/* li = 50% width */
.portfolio_gallery-items {
  position: relative;
  overflow: hidden;
  height: 50vmax;
  padding: 0;
}

@media screen and (min-width:768px) {
  .portfolio_gallery-items {
    height: 50vmin;
  }
}

.portfolio_gallery-items article {
  width: 100%;
  height: 100%;
}

/* link a */
.portfolio_gallery-item-thumbnail {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.portfolio_gallery-item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 6s ease, filter .3s ease;
}

.portfolio_gallery-items:hover .portfolio_gallery-item-thumbnail img {
  transform: scale(1.2);
  filter: brightness(0.5);
  transition: transform 6s ease, filter .3s ease;
}

.portfolio_gallery-item-title {
  top: 20%;
  left: 10%;
}

/* hover effect title */
.portfolio_gallery-items:hover .portfolio_gallery-item-title {
  transform: translateY(-0.8rem);
}

.portfolio_gallery-item-metas-category {
  top: 25%;
  left: 10%;
}

/* hover effect category */
.portfolio_gallery-items:hover .portfolio_gallery-item-metas-category {
  transform: translateY(0.8rem);
}

.portfolio_gallery-item-title,
.portfolio_gallery-item-metas-category {
  opacity: 0;
  transition: transform .2s ease, opacity .2s;
}

.portfolio_gallery-items:hover .portfolio_gallery-item-title,
.portfolio_gallery-items:hover .portfolio_gallery-item-metas-category {
  opacity: 1;
  transition: transform .2s ease, opacity .2s;
}

.portfolio_gallery-item-title,
.portfolio_gallery-item-metas-category,
.portfolioList__item:before {
  position: absolute;
}

.archive-portfolio-contact_container {
  position: relative;
  margin-top: 200px;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.archive-portfolio-contact_container:before {
  z-index: -1;
  position: absolute;
  top: -200px;
  height: 200px;
  width: 100%;
  content: url("https://www.renardise-studio.com/wp-content/uploads/2022/09/bg-footer-archive-portfolio-1920.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

@media screen and (max-width:767.9px) {
  .archive-portfolio-contact_container:before {
    top: -71px;
  }
}

/*-----------------------§§§§§----------------------SINGLES-PORTFOLIO----------------------§§§§§-----------------------*/
.single-portfolio_section-header {
  /* width: 100%; */
  height: calc(80vh - 3.625rem);
  position: relative;
}

@media screen and (min-width:768px) {
  .single-portfolio_section-header {
    height: calc(100vh - 3.625rem);
  }
}

.single-portfolio_thumbnail {
  width: 100%;
  height: 100%;
}

.single-portfolio_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.single-portfolio_backlink {
  position: absolute;
  top: 1rem;
  left: 2rem;
}

/*----------------------- SINGLE PORTFOLIO HACKTBACK ILLUSTRATION  */
@media screen and (min-width: 992px) {
  .postid-19 .page-content>.container {
    max-width: 900px;
  }
}

/*-----------------------SVG ICONS ANIMATION : STATICS PAGES-----------------------*/
.croix,
.petits-ronds,
.cercles {
  -webkit-animation-name: zoomin;
  animation-name: zoomin;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.croix,
.petits-ronds,
.cercles {
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.petits-ronds {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.cercles {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}