@import url(fonts.css);
@import url(colors.css);


/*** Global ***/

a{
    text-decoration: none;
}

/* Header */
#header{
    background: #fff;
    background-position: bottom;
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.10);
    font-family: 'Prater Sans', sans-serif;
    position: sticky;
    top: 0;
    padding: 20px 0 0 0;
    z-index: 99;

}

#header::after {
    content: '';
    height: 20px;
    background-image: url('../../images/craquelure-header.svg');
    position: relative;
    display: block;
    z-index: 2;
    top: 8px;
}


#header .block-top-header .col-logo img{
    filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
    max-width: 146px;
}

#header .block-top-header .col-logo img:hover{
    filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
	-ms-filter: grayscale(0);
}

.block-top-header{
    display: flex;
    align-items: center;
    text-align: center;
    margin: auto;

    #btn-search{
        cursor: pointer;
    }
}

#main-menu {
    max-width: 800px;
    padding: 0 5%;
}

#main-menu ul{
    display: flex;
}

#main-menu ul li{
    list-style-type: none;
    text-align: center;
    margin: 0 auto;
}

#main-menu ul li.conseils-de-lecture{
    position: relative;
    padding-right: 45px;
    padding-top: 5px;
}

#main-menu ul li.conseils-de-lecture a{
    font-size: 24px;
}

#main-menu ul li.conseils-de-lecture a span{
    font-size: 19px;
}

#main-menu ul li.conseils-de-lecture::after{
    position: absolute;
    top: 12px;
    right: -45px;
    content: '';
    background: url('../../images/ampoule.svg') no-repeat;
    width: 80px;
    height: 100px;
    background-size: 34px;
}

#main-menu a{
    color: var(--color-grey-dark);
    font-size: 29.487px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
#main-menu li a:hover,
#main-menu .menu-item--active-trail a{
    color: var(--color-red);
}

#main-menu a span{
    display: block;
    line-height: 0.8rem;
}

#block_search{
    display:none;
}

#block_search.visible{
    display:block;
}


#block_search form{
    display:flex;
}

#block_search input[type="text"]{
    border: solid 2px var(--color-grey-dark);
    width: 100%;
    padding: 8px 16px;
    color: var(--color-grey-medium);
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 139.037%; /* 23.636px */
    border-radius: 4px;
    margin-right: 15px;
}

#block_search input[type="submit"]{
    color: #fff;
    background: var(--color-red);
    padding: 2px 15px;
    border: none;
    transform: rotate(-3.666deg);
    font-size: 25px;
}

#popup-main-menu{
    display:none;
}

/*** FOOTER ***/
#footer {
    background: var(--color-red);
    padding: 60px 0 0 0;
}

#footer::before {
    content: '';
    height: 20px;
    background-image: url('../../images/craquelure-footer.svg');
    position: relative;
    display: block;
    z-index: 2;
    top: -72px;
}

#footer .container {
    position: relative;
}

#footer .block h2{
    color: #fff;
    font-family: 'Prater Sans', sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

#footer .block .block-content ul {
    padding-left: 0;
}

#footer .block .block-content ul li {
    list-style-type: none;
}

#footer .block .block-content ul li a{
    color: #fff;
    font-family: 'Brandon Grotesque Medium', sans-serif;
    font-size: 24px;
    font-style: normal;
    line-height: normal;
}

#footer .block.menu--footer-2 ul li a{
    line-height: 0%;
}

#footer .block.menu--footer-2 h2{
    position: relative;
}
#footer .block.menu--footer-2 h2::after {
    position: absolute;
    top: -25px;
    left: 100px;
    content: '';
    background: url('../../images/mascotte-footer.svg') no-repeat;
    width: 51px;
    height: 51px;
    background-size: 51px;
}

#footer .col-logo img {
    display: block;
    margin: 0 auto;
    max-width: 174px;
    width: 100%;
}

#footer .region-footer-col-3 .block-content a{
    color:#fff;
    font-size: 44px;
    padding: 0 5px;
}

#footer .region-footer-col-3 h2 {
    position: relative;
}

#footer .region-footer-col-3 h2::before {
    position: absolute;
    top: -15px;
    left: -25px;
    content: '';
    background: url('../../images/follow-us.svg') no-repeat;
    width: 30px;
    height: 30px;
    background-size: 30px;
}

#footer .region-footer-bottom {
    padding-top: 60px;
}

#footer .region-footer-bottom .block .block-content ul{
    text-align: center;
}

#footer .region-footer-bottom .block .block-content ul li{
    display: inline-block;
    vertical-align: middle;
}

#footer .region-footer-bottom .block .block-content ul li::after{
    position: relative;
    font-family: 'Brandon Grotesque Regular', sans-serif;
    content: '|';
    color: #fff;
    font-size: 12px;
    top: -2px;
}

#footer .region-footer-bottom .block .block-content ul li:last-child::after{
    content: none;
}


#footer .region-footer-bottom .block .block-content ul li a{
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
}


.h2-start{
  color: var( --color-grey-dark);
  font-size: 40px;
  font-family: Prater Bold, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.h2-end{
  color: var(--color-red);
  font-size: 40px;
  font-family: Prater Sans, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.h2-end:after{
  content: "";
  background-image: url("../../images/Craquelure_underline.png");
  background-repeat: no-repeat;
  position: relative;
  height: 20px;
  display: block;
  z-index: 2;
  bottom: 7px;
  width: 200px;
  left: 180px;
}


#block-block-menu-ages-mobile {
    display: none;
}

.single-advice .card{
  border: none;
  border-radius:10px;
  width: 100%;
  max-width: 450px;
}
.single-advice .card img{
  width: 100%;
  max-width: 450px;
}
.single-advice .card-body{
  padding: 0;
}
.single-advice .card-title,.single-advice .card-title a{
  color: var(--color-grey-dark);
  font-size: 20px;
  font-family: Prater Sans,sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  padding-top: 15px;
}
.single-advice .card-body p{
  color: var(--color-grey-dark);
  font-size: 20px;
  font-family: "Brandon Grotesque Medium",sans-serif;
  font-weight: 390;
  padding-bottom: 14px;
}
.single-advice .card-link-more{
  color: var(--color-red);
  font-size: 16px;
  font-family: Prater Sans,sans-serif;
  font-weight: 700;
  text-decoration: underline;
  line-height: 23px;
}
.single-advice,.single-advice .card{
  min-height: 700px;
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
	    max-width: 1440px;
    }
}
.breadcrumbs{
  margin-bottom: 10px;
}

.breadcrumbs .separator,
.breadcrumbs .link a {
  color: #9D9D9D;
  font-family: 'Brandon Grotesque Regular', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 390;
  line-height: normal;
  text-decoration-line: underline;
}
.breadcrumbs .link{
  font-family: 'Brandon Grotesque Regular', sans-serif;
  font-size: 16px;
  font-style: normal;
}

.insta-mobile{
  display: none;
}
#block-instagram-footer{
  text-align: center;
  padding-bottom: 30px;
}
.breadcrumbs .link a {
  display: inline-block;
}
.ovni-gif span{
  color: white;
  font-size: 20px;
  font-family: Prater Sans;
  font-weight: 400;
  text-transform: uppercase;
  background: var(--color-red);
  padding: 16px;
}
.ovni-gif a{
  position: absolute;
  bottom: 20%;
  left: 45%;
}
.ovni-gif{
  background-image: url("../../images/ovni.gif");
  background-repeat: no-repeat;
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
  background-position: center;
  height: 950px;
  display: block;
  text-align: center;
  position: relative;
}

/** Basic page **/

#block-seuiljeunesse-lien-politique-active,
#block-seuiljeunesse-lien-mentions-active
{
  margin: 60px 0 25px 0;
}


#block-seuiljeunesse-lien-politique-active .nav-link, #block-seuiljeunesse-lien-politique-active .nav-link:hover, #block-seuiljeunesse-lien-politique-active .nav-link:focus,
#block-seuiljeunesse-lien-mentions-active .nav-link, #block-seuiljeunesse-lien-mentions-active .nav-link:hover, #block-seuiljeunesse-lien-mentions-active .nav-link:focus {
    color: #545454;
    font-size: 36px;
    font-family: Prater Sans;
    font-weight: 700;
    line-height: 31px;
  }

  #block-seuiljeunesse-lien-politique-active .nav-link.active,
  #block-seuiljeunesse-lien-mentions-active .nav-link.active
  {
    color: #DB1213;
  }

  #block-seuiljeunesse-lien-politique-active .nav-link.active:after,
  #block-seuiljeunesse-lien-mentions-active .nav-link.active:after{
    content: "";
    background-image: url("../../images/Craquelure_underline.png");
    background-repeat: no-repeat;
    height: 7px;
    display: block;
    z-index: 2;
    position: relative;
    top: 4px;
  }

.tab-mentions-legales-politique .tab-pane h2{
    color: #545454;
    font-size: 64px;
    font-family: Prater Sans;
    font-weight: 400;
    line-height: 71px;
  }

  .tab-mentions-legales-politique .tab-pane h3 , .tab-mentions-legales-politique .tab-pane h3 a{
    color: #545454;
    font-size: 30px;
    font-family: "Brandon Grotesque Medium" ,sans-serif;
    font-weight: 450;
    padding: 20px 0;
  }
  .tab-mentions-legales-politique .tab-pane p, .tab-mentions-legales-politique .tab-pane ul, .tab-mentions-legales-politique .tab-pane li, .tab-mentions-legales-politique .tab-pane a{
    color: #545454;
    font-size: 19px;
    font-family: "Brandon Grotesque Medium" ,sans-serif;
    font-weight: 390;
  }
  .tab-mentions-legales-politique .nav{
  padding: 60px 0;
  }
  .tab-mentions-legales-politique{
    padding-bottom: 60px
  }

/*** Tarteaucitron ***/

#tarteaucitronRoot #tarteaucitronAlertBig {
    background: var(--color-grey-dark);
    text-shadow: none !important;
}

#tarteaucitron #tarteaucitronInfo, #tarteaucitron #tarteaucitronServices .tarteaucitronDetails:not(.tarteaucitronDetailsInline),
#tarteaucitronRoot #tarteaucitronAlertBig {
    font-family: "Brandon Grotesque Regular" ,sans-serif;
}

#tarteaucitronAlertSmall #tarteaucitronManager{
    font-family: 'Brandon Grotesque Regular', sans-serif;
}
#tarteaucitronAlertBig #tarteaucitronCloseAlert, #tarteaucitronAlertBig #tarteaucitronPersonalize, #tarteaucitronAlertBig #tarteaucitronPersonalize2, .tarteaucitronCTAButton, #tarteaucitron #tarteaucitronPrivacyUrl, #tarteaucitron #tarteaucitronPrivacyUrlDialog, #tarteaucitronRoot .tarteaucitronDeny, #tarteaucitronRoot .tarteaucitronAllow {
    font-family: 'Prater Sans',sans-serif;
    text-shadow: none;
}

#tarteaucitronRoot .tarteaucitronDeny {
    background: var(--color-red) !important;
}


#tarteaucitronRoot .tarteaucitronH1 {
    font-family: 'Prater Bold', sans-serif;
}

#tarteaucitronRoot .tarteaucitronH2,
#tarteaucitron .tarteaucitronH3,
#tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronH3 {
    font-family: "Brandon Grotesque Medium" ,sans-serif;
}

#tarteaucitron .tarteaucitronH3, #tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronH3,
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle button {
    font-family: "Brandon Grotesque Bold" ,sans-serif;
}
/* user page */

#user-pass,
#user-login-form {
  margin: 60px auto;
  max-width: 450px;
  with: 100%;
  padding: 0 15px;
}

#user-pass .form-text,
#user-login-form .form-text{
  display:block;
}

#user-login-form a{
  color: #000;
  font-weight bold;
  padding-top: 10px;
  display: block;
  font-size: 0.9em;
  text-decoration: underline;
}

#user-pass label,
#user-login-form label {
  font-family: 'Barlow',sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 139%;
  display: block;
  margin-top: 15px;
}

#user-pass input[type="text"],
#user-login-form input[type="text"], #user-login-form input[type="email"], #user-login-form input[type="password"] {
  padding: 10px 15px;
  border: 0.1em solid var(--color-grey-dark);
  color: #6D6D6D;
  border-radius: 0;
  width: 100%;
  margin-top: 5px;
  font-family: 'Barlow',sans-serif;
}

#user-pass input[type="submit"],
#user-login-form input[type="submit"] {
  background: var(--color-red);
  padding: 5px 16px;
  color: #fff;
  font-family: 'Brandon Grotesque Medium', sans-serif;
  font-size: 24px;
  font-style: normal;
  line-height: normal;
  border: 0;
  margin-top: 25px;
}

.messages--status{
  margin: 25px auto;
  border: solid 1px var(--color-red);
  color: var(--color-red);
  padding: 8px 16px;
  width: 95%;
}

.messages--status .placeholder {
  background-color: transparent;
}