/*!
Theme Name: Code Sakane
Theme URI: https://www.codesakane.ma/
Author: CIH Bank (Marketing - Play 40)
Author URI: https://cihbank.ma
Description: Le crédit "Code Sakane" est un bouquet d'avantages facilitant aux jeunes actifs de moins de 35 ans l'accès à la propriété
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: code-sakane
Tags: Cih Bank, Code Sakane, Crédit immobilier, Jeunes Actifs, bouquet d'avantages

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Code Sakane is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");

:root {
  --blue-color: #009ee0;
  --orange-color: #e85412;
  --color-black: #1A171B;
  --color-blanc: #ffffff;
  --border-radius: 6px;
  --font-inter:"Inter", sans-serif;
  --background-blue : #F6FCFF;
   --primary-bg-color: #FFFBF9;
  --secondary-bg-color: #FAD9CA;
  --text-color: #3F4955;
  --section-padding: 100px 20px;
  --section-padding-medium: 60px 20px;
  --section-padding-small: 50px 20px;
  --margin-large: 60px;
  --margin-medium: 40px;
  --margin-small: 30px;
}

/*Global CSS CIH Bank*/
h1{font-family: var(--font-inter);font-size: 64px;font-style: normal;font-weight: 800;line-height: normal;}
h2{font-family: var(--font-inter);font-size: 32px;font-style: normal;font-weight: 800;line-height: normal;}
h3{font-family: var(--font-inter);font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;}
h4{font-family: var(--font-inter);font-size: 22px;font-style: normal;font-weight: 700;line-height: normal;}
h5{font-family: var(--font-inter);font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;}
h6{font-family: var(--font-inter);font-size: 14px;font-style: normal;font-weight: 700;line-height: normal;}


.p_20_regular{font-size: 20px;font-style: normal;font-weight: 400;line-height: normal;}
.p_20_medium{font-size: 20px;font-style: normal;font-weight: 500;line-height: normal;}
.p_20_semi_bold{font-size: 20px;font-style: normal;font-weight: 600;line-height: normal;}
.p_20_bold{font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;}

.p_18_regular{font-size: 18px;font-style: normal;font-weight: 400;line-height: normal;}
.p_18_medium{font-size: 18px;font-style: normal;font-weight: 500;line-height: normal;}
.p_18_semi_bold{font-size: 18px;font-style: normal;font-weight: 600;line-height: normal;}
.p_18_bold{font-size: 18px;font-style: normal;font-weight: 700;line-height: normal;}

.p_16_regular{font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;}
.p_16_medium{font-size: 16px;font-style: normal;font-weight: 500;line-height: normal;}
.p_16_semi_bold{font-size: 16px;font-style: normal;font-weight: 600;line-height: normal;}
.p_16_bold{font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;}

.p_14_regular{font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;}
.p_14_medium{font-size: 14px;font-style: normal;font-weight: 500;line-height: normal;}
.p_14_semi_bold{font-size: 14px;font-style: normal;font-weight: 600;line-height: normal;}
.p_14_bold{font-size: 14px;font-style: normal;font-weight: 700;line-height: normal;}

p {font-family: var(--font-inter);font-size:18px;font-weight:300;color:#3F4955}
button{font-family: var(--font-inter);}
a{font-family: var(--font-inter);text-decoration:none}
ul, body{font-family: var(--font-inter);}
/*AND Global CSS CIH Bank*/

/*Btn CIH Bank*/
.cih_btn_small {background: linear-gradient(to left, var(--orange-color) 50%, #EB672C 50%);background-size: 200% 100%;background-position: right;color: var(--color-blanc);font-size: 12px;font-weight: 300;border-radius: var(--border-radius);padding: 10px 14px;display: inline-block;transition: background-position 0.4s ease;}
.cih_btn_small:hover {background-position: left;}
.cih_btn_large{background: linear-gradient(to left, var(--blue-color) 50%, #32bcf5 50%);background-size: 200% 100%;background-position: right;color: var(--color-blanc);font-size: 16px;font-weight: 300;border-radius: var(--border-radius);padding: 16px 18px;display: inline-block;transition: background-position 0.4s ease;}
.cih_btn_large:hover {background-position: left;}
.cih_btn_medium{background: linear-gradient(to left, var(--orange-color) 50%, #EB672C 50%);background-size: 200% 100%;background-position: right;color: var(--color-blanc);font-size: 16px;font-weight: 300;border-radius: var(--border-radius);padding: 16px 18px;display: inline-block;transition: background-position 0.4s ease;}
.cih_btn_medium:hover {background-position: left;}
.cih_btn_blue_large{color: var(--blue-color);font-size: 16px;font-weight: 300;border-radius: var(--border-radius);padding: 16px 18px;background-color:#F6FCFF}
/*END Btn CIH Bank*/

/*HEADER CSS*/
header{position: fixed;width: 100%;background: #fff;z-index: 999;top:0}
.custom-logo-link img{width: 117px;height: auto;}
.header {padding: 15px 0;border-bottom: 0.8px solid var(--Slate-100, #E8EAEE);}
.header .navbar {margin-bottom: 0;padding: 0;}
.header .navbar li {cursor: pointer;list-style: none;}
.nav-link{color:#1A171B;font-size:14px;font-weight:600;}
.navbar li.active a{color:var(--blue-color);} 
.hamburger_menu {position: fixed;right: 5%;display: none;z-index: 2;top:20px;}
.hamburger_menu span {width: 34px;height: 4px;background-color: #000;border-radius: 60px;display: block;margin-bottom: 5px;transition: all 0.3s linear;}
.hamburger_menu.active span:nth-child(1) {transform: rotate(45deg);margin-bottom: -3px;}
.hamburger_menu.active span:nth-child(2) {transform: translateX(-60px);opacity: 0;}
.hamburger_menu.active span:nth-child(3) {transform: rotate(-45deg);margin-top: -10px;}
/*AND HEADER CSS*/

/* Style général du menu Lang */
.lang-menu .navbar-nav {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: row;gap: 15px;position: relative;}
.lang-menu .navbar-nav > li > a {text-decoration: none;color: #000;font-size: 14px;padding: 0px;display: block;transition: background 0.3s ease;}
.lang-menu .navbar-nav li .sub-menu {display: none;position: absolute;list-style:none;top: 100%;left: -25px;min-width: 140px;background-color: white;box-shadow: 0 2px 6px rgba(0,0,0,0.15);padding: 10px;border-radius: 6px;text-align: center;z-index: 1000;}
.lang-menu .navbar-nav li:hover > .sub-menu {display: block;}
.lang-menu > .navbar-nav > li{padding-top:10px;padding-bottom:10px;}
.lang-menu .navbar-nav li .sub-menu li a {padding: 10px 15px;display: block;font-size: 14px;color: #333;text-decoration: none;white-space: nowrap;}
.lang-menu .navbar-nav li .sub-menu li:hover{background-color: #F6FCFF;border-radius: 6px;}
.lang-menu .navbar-nav li .sub-menu li:hover a{color: #009EE0;}
.lang-item-ar > a{font-family: "Cairo", sans-serif !important;}
.lang-menu .navbar-nav li.menu-item-has-children > a::after {content: "";display: inline-block;width: 10px;height: 10px;margin-left: 3px;background-image: url('img/arrows.svg');background-size: contain;background-repeat: no-repeat;vertical-align: middle;background-position: center;}
.lang-menu .navbar-nav li.menu-item-has-children > a::before {content: "";display: inline-block;width: 15px;height: 15px;margin-right: 2px;background-image: url('img/lang.svg');background-size: contain;background-repeat: no-repeat;vertical-align: middle;background-position: center;}
/* END Style général du menu Lang */


/*Hero Section*/
.hero-section {
    margin-top: 40px;
}
.text-orange{color: var(--orange-color);}
.hero-section{background-image: url('/wp-content/uploads/2025/04/CIH-BANK-CODE-Sakane-Hero-CODE-Sakane-LTR-min.png');background-position: right;background-size: contain;background-repeat: no-repeat;height: 580px;}
.hero-slider-text{margin-right:72px;color: color:#6B7B8F;font-size:20px;}
/*ANd Hero Section*/

/*partenaires*/
.partenaires .logo-carousel {overflow: hidden;position: relative;background-color: #f8f9fa;padding: 20px 0;}
.partenaires .logo-track {display: flex;animation: scroll 25s linear infinite;width: max-content;}
.partenaires .logo-carousel img {max-height: 60px;margin: 0 30px;filter: grayscale(100%);opacity: 0.7;transition: all 0.3s ease;width: 98px;}
.partenaires .logo-carousel a{vertical-align: middle;display: flex;}
.partenaires .logo-carousel img:hover {filter: grayscale(0%);opacity: 1;transform: scale(1.05);}
@keyframes scroll {0% { transform: translateX(0); }100% { transform: translateX(-50%); }}
/*AND partenaires*/

/*Section code sakane*/
.code-sakane-section {padding: 100px 20px 50px 20px;}
.code-sakane-title {margin-bottom:40px;}
.code-sakane-right{background-color:var(--background-blue);padding: 30px;}
/*ANd Section code sakane*/

/*Avantages code sakane*/
.avantages-section {background-color:var(--background-blue);padding: 40px 20px;text-align: center;}
.avantages-section h2 {margin-bottom: 40px;}
.text-blue{color: var(--blue-color);}
.card-avantage {background-color: #fff;border: 1px solid #D1F1FF;border-radius: 12px;padding: 30px;box-shadow: 0 4px 10px rgba(0,0,0,0.03);transition: transform 0.3s ease;height: 100%;text-align: left;}
.card-avantage:hover {transform: translateY(-5px);}
.card-avantage img {width: 48px;height: 48px;margin-bottom: 15px;}
.card-avantage h3 {color: #009EE0;margin-bottom: 10px;font-size: 20px;font-style: normal;font-weight: 700;}
.card-avantage p {margin: 0;}
/*And avantages code sakane*/

/*section Caractairistique*/
.caracteristiques-section {padding: 100px 20px;}
.caracteristiques-title {margin-bottom: 40px;}
.caracteristiques-list {list-style: none;padding: 0;font-weight: 300;}
.caracteristiques-list li {display: flex;align-items: flex-start;margin-bottom: 20px;color: #1e1e1e;font-size: 18px;}
.caracteristiques-list img {width: 22px;height: 22px;margin-right: 10px;margin-top: 4px;}
.cta-buttons {margin-top: 40px;gap: 20px;}
/*ENd Section caractairistiques*/

/*Guide code sakane*/
.hero_guide_code_sakane,.le-guide-du-1er-achat-immobilier {background-image: url(/wp-content/uploads/2025/04/Hero-Background.png);background-position: center;background-size: cover;background-repeat: no-repeat;padding: var(--section-padding);}
.trouver-le-bien-ideal,.videos-explicatives {padding: var(--section-padding);}
.finaliser-l-achat{padding: 100px 20px 50px 20px;}
.preparer-l-acquisition,.dernieres-etapes-et-demenagement,.le-guide-du-1er-achat-immobilier {padding: var(--section-padding-medium);}
.dernieres-etapes-et-demenagement{padding: var(--section-padding-small);}
.videos-explicatives {padding: 50px 20px}
.video-thumbnail {position: relative;display: inline-block;}
.hover-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4); /* Calque noir transparent */opacity: 0;transition: opacity 0.3s ease;z-index: 2;border-radius:12px;}
.play-btn-codesakane {width: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 3;transition: opacity 0.3s ease;}
.popup-youtube:hover .hover-overlay {opacity: 1;}
.popup-youtube:hover .play-btn-codesakane {content: url('/wp-content/uploads/2025/05/Play-Button-Hover.svg');}
.icon-step-head-line {margin-right: 10px;}
.identifier-vos-criteres-essentiels-row,.preparer-l-acquisition-row,.finaliser-l-achat-row,.dernieres-etapes-et-demenagement-row,.videos-explicatives-row {margin-top: var(--margin-large);}
.essentiels-row-3{margin-bottom:20px !important;}
.identifier-vos-criteres-essentiels-row {margin: 80px 20px;}
.identifier-vos-criteres-essentiels h3,.finaliser-l-achat-text h3,.dernieres-etapes-et-demenagement-text h3 {margin-top: var(--margin-medium);}
.identifier-vos-criteres-essentiels h3 {margin-bottom: var(--margin-medium);}
.preparer-l-acquisition-title {margin-bottom: var(--margin-small);}
.preparer-l-acquisition-img {margin-bottom: var(--margin-small);}
.essentiels-2 {padding-left: 55px;}
.preparer-l-acquisition {background-color: var(--primary-bg-color);}
.preparer-l-acquisition-row .col-md-4:not(:last-child) {border-right: 1px solid var(--secondary-bg-color);padding-right: 1rem;}
.identifier-vos-criteres-essentiels-img img,.finaliser-l-achat-img img,.dernieres-etapes-et-demenagement-img img {width: 100%;max-width: 570px;height: auto;display: block;border-radius:12px}
.identifier-vos-criteres-essentiels-img img {max-width: 560px;}
.le-guide-du-1er-achat-immobilier-img img {width: 320px;}
.img-vide-popup {width: 100%;border-radius: 12px;}
.videos-explicatives h3 {color: var(--text-color);min-height: 90px;margin-top:15px;font-size: 22px;}
.margin-left-img {margin-right: auto;}
.margin-right-img {margin-left: auto;}
.le-guide-du-1er-achat-immobilier {margin-bottom: 100px;}
/*End guide code skane*/


/*CSS Page Contact*/
.image-contact-form img{
 width: 570px;
    border-radius: 12px;
    display: block;
    margin-left: auto;
}
.block-contact-form{
  padding:100px 20px;
}
.formulaire-de-contact-7 label{
  font-weight: 600;
    font-size: 18px;
    color: #3F4955;
}
.formulaire-de-contact-7 .form-control{
  padding:16px !important;
}

/* Couleur des placeholders */
::placeholder {
  color: #C8CED6;
  opacity: 1;
  font-weight: 300;
  font-size: 16px;
}

/* Pour compatibilité avec tous les navigateurs */
.formulaire-de-contact-7 input::placeholder,
.formulaire-de-contact-7 textarea::placeholder {
  color: #C8CED6;
  font-weight: 300;
  font-size: 16px;
}

.formulaire-de-contact-7 input::-webkit-input-placeholder,
.formulaire-de-contact-7 textarea::-webkit-input-placeholder {
  color: #C8CED6;
  font-weight: 300;
  font-size: 16px;
}

.formulaire-de-contact-7 input:-ms-input-placeholder,
.formulaire-de-contact-7 textarea:-ms-input-placeholder {
  color: #C8CED6;
  font-weight: 300;
  font-size: 16px;
}

.formulaire-de-contact-7 input::-ms-input-placeholder,
.formulaire-de-contact-7 textarea::-ms-input-placeholder {
  color: #C8CED6;
  font-weight: 300;
  font-size: 16px;
}
.formulaire-de-contact-7 .cih_btn_large{
  width:100%;
}
.formulaire-de-contact-7 .cih_btn_large:hover{
  color:var(--color-blanc);
}

.wpcf7-not-valid-tip {
    font-size: 10px !important;
}
.contenu-text-contact{
  margin-bottom:40px;
}
/*And CSS page Contact*/
/*Css Footer*/
footer{box-shadow: 0 -4px 8px -6px #33333369;-moz-box-shadow: 0 -4px 8px -6px #33333369;-webkit-box-shadow: 0 -4px 8px -6px #33333369;}
.text-copy-right{font-size: 10px;}
.social-media-footer{gap: 15px;justify-content: flex-end;}
.social-media-footer a img{width:20px;height:auto}
/*End footer*/

@media only screen and (max-width: 1024px) {
  .header .navbar {
    position: fixed;
    right: 0;
    opacity: 1;
    visibility: visible;
    min-height: 100%;
    min-width: 100%;
    background: var(--color-blanc);
    right: -105%;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
    padding-top: 10%;
    transition: all 0.3s linear;
  }
  .header .navbar li {
    background-color: #F9FAFB;
        border-radius: 8px;
        padding-top: 20px;
        padding-bottom: 20px;
  }
  .header .navbar li.active{
        background: #F6FCFF;
  }
  .header .navbar li:hover{
        background: #F6FCFF;
  }
  .header .navbar li:hover a{
        color: #009EE0;
  }

  .mobile-lang ul li{
    background-color: #009EE0 !important;
    padding: 15px 40px !important;
    width: 170px;
        text-align: center;
  }
  .mobile-lang ul li a{
    color:var(--color-blanc);
    font-size:14px;
    font-weight:600;
  }
  .mobile-lang ul li:hover a{
    color:var(--color-blanc) !important;
  }
  .hr-entre-menu{
    width:90%;
  }
  .hamburger_menu {
    display: block;
  }
  .header .navbar.active {
    right: 0;
    opacity: 1;
    visibility: visible;
  }
  #navbarNav{
  	width:100%;
  	text-align: center;
    padding: 20px;
  }
  .custom-logo-link img {
    margin-left: 15px;
  }
  .i_m_interesed, .col_lang_menu{
    display:none !important;
  }
}
@media screen and (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  /* Styles spécifiques aux tablettes en mode paysage */
}

@media screen and (min-width: 769px) and (max-width: 899px) and (orientation: portrait) {
  .hero-section {
    margin-top: 40px;
  }
  .hero-slider-text {
    width: 300px;
  }
  .code-sakane-section {
    padding: 20px 0px;
}
.caracteristiques-section {
    padding: 70px 20px;
}
section.caracteristique-section > div > div > div:nth-child(1){
  width:100%;
}
section.caracteristique-section > div > div > div.col-md-6.caracteristiques-img.text-center{
      width: 100%;
    margin-top: 40px;
}
.identifier-vos-criteres-essentiels-row {
    margin: 60px 0px;
}
section.videos-explicatives > div > div.head-line-step1 > h2{
  text-align:center;
}
.videos-explicatives h4 {
    min-height: 100px;
	margin-top:10px;
}
.le-guide-du-1er-achat-immobilier-img img {
    width: 220px;
}
section > div > div > div.col-md-6.contenu-contact-form,section > div > div > div.col-md-6.image-contact-form{
  width:100%;
}
section > div > div > div.col-md-6.image-contact-form img{
  margin-left:auto;
  margin-right:auto;
}
}
@media (max-width: 768px) {
  h1{font-size: 42px !important;font-weight: 800 !important;}
  h3{font-size: 20px !important;font-weight: 700 !important;}
  /*partenaires*/
  .partenaires  .logo-carousel img {
    margin: 0 30px;
    max-height: 40px;
  }
	#homepage > div > div > section.hero-section > div > div > div{
		padding-top:0px !important;
	}
	#homepage > div > div > section.c-est-quoi-code-sakane > div{
		margin-bottom:0px !important;
	}
  /*AND partenaires*/
        .caracteristiques-img {
        margin-top: 30px;
        text-align: center;
      }

      .btn-outline-custom {
        margin-left: 0;
        margin-top: 15px;
      }

      .cta-buttons {
        display: flex;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 2rem;
      }
  .hero-section{
    padding: 280px 30px 30px 30px;
    background-position: top;
	height: 870px;
  }
	.code-sakane-title {
    margin-top: 20px;
}
  section.hero-section > div > div > div.col-lg-6{
    text-align:center;
  }
  .hero-slider-text {
    margin-right: 0px;
  }
  #homepage > div > div > div.col-md-12 .g-0 {
    margin-top: 30px;
}
  .code-sakane-section {
    padding: 30px 20px;
    text-align: center;
    flex-flow: column-reverse;
}
.card-avantage {
    text-align: center !important;
}
section.avantages-section > div > div{
      gap: 30px;
}
.caracteristiques-section {
    padding: 60px 30px;
    text-align: center;
}
.code-sakane-right img{
  margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
}
.caracteristiques-list {
    text-align: left;
    padding: 0px;
    margin-bottom:0px;
}
section.caracteristique-section > div > div{
  flex-flow: column-reverse;
}
.site-footer{
  text-align:center;
}
.social-media-footer{
      justify-content: center;
    align-items: center;
    flex-wrap: wrap !important;
    gap: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
}
#colophon > div > div > div.col-md-8.text-center{
  margin-top: 10px;
}
div.col-md-6.caracteristiques-img.text-center > img{
  margin-bottom: 20px;
}
#homepage > div > div > div{
      margin-top: 70px;
	width:100% !important;
}
.hero_guide_code_sakane{
  padding: 60px 20px 60px 20px;
}
.head-line-step1 h2{
  flex-flow: column;
  text-align: center;
}
.icon-step-head-line {
    margin-right: auto;
    width: 60px;
    margin-left: auto;
    display: block;
    margin-bottom: 15px;
}
.trouver-le-bien-ideal{
  text-align:center;
}
.identifier-vos-criteres-essentiels-row {
    margin: 30px 0px;
    
}
#guide-code-sakane > div > div > div > section.trouver-le-bien-ideal > div > div:nth-child(2),#guide-code-sakane > div > div > div > section.trouver-le-bien-ideal > div > div.row.align-items-center.identifier-vos-criteres-essentiels-row.essentiels-row-3,#guide-code-sakane > div > div > div > section.dernieres-etapes-et-demenagement > div > div.row.align-items-center.dernieres-etapes-et-demenagement-row{
  flex-direction: column-reverse;
}
section.trouver-le-bien-ideal > div > div:nth-child(2),section.trouver-le-bien-ideal > div > div.row.align-items-center.identifier-vos-criteres-essentiels-row.essentiels-row-3{
		flex-direction: column-reverse;
	}
	.cih_btn_medium{
		padding: 16px 10px;
	}
.identifier-vos-criteres-essentiels h3 {
    margin-bottom: 20px;
}

.identifier-vos-criteres-essentiels h3, .finaliser-l-achat-text h3, .dernieres-etapes-et-demenagement-text h3 {
    margin-top: 20px;
    text-align:center;
}
.essentiels-2 {
    padding-left: 1rem;
}
.trouver-le-bien-ideal, .videos-explicatives {
  padding: 30px 20px 60px 20px;
}
.preparer-l-acquisition-img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.preparer-l-acquisition-title {
    text-align: center;
}
.finaliser-l-achat {
    padding: 60px 20px 20px 20px;
}
.dernieres-etapes-et-demenagement {
    padding: 0px 20px;
}
.identifier-vos-criteres-essentiels-img {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
 .videos-explicatives h4 {
    text-align: center !important;
	margin-top:10px;
}

.head-line-step1{
  text-align: center;
}
.le-guide-du-1er-achat-immobilier-img img {
    width: 300px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.image-contact-form img {
    width: 100%;
  }
#coontact > div > div > div > section > div > div{
  flex-flow: column-reverse;
}
.contenu-text-contact{
  text-align:center;
}
.contenu-text-contact h1{
  margin-top:30px;
}
}