/*
Theme Name: Theme Test
Theme URI:  
Author: Alaa Aifa
Author URI: 
Description: Minimal, performance-oriented starter theme — accessible, lean, and zero-dependency.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: ifaalathemetest
*/

/* ------------------- Reset Minimal Modern ------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: sans-serif;
    line-height: 1.5;
}

img, picture, video, canvas, svg {
    display: block;
	max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

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

/* ------------------- CSS Variables ------------------- */
:root{
  --main-color-blue: #05354E;
  --secondaire-color-blue: #2E76B8;
  --color-white: #FFFFFF;
  --font-family: 'Montserrat';
  --font-style: normal;
}

/* ------------------- Accessibility ------------------- */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* For legacy browsers */
    clip-path: inset(50%);   /* Modern browsers */
    white-space: nowrap;
    border: 0;
}

/* ------------------- Body ------------------- */
body{
	background: #EDF3F6;
	overflow-x: hidden;
}

/* ------------------- Top Bar ------------------- */
.top-bar{
	display: flex;
	align-items: center;
	width: 718px;
	height: 44px;
	background: var(--main-color-blue);
	border-radius: 0px 8px;
}
.top-bar ul {
    
    display: flex
;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
	    width: 430px;
}
 .top-bar li:hover {
   background-color: #2E76B8;
  }
.top-bar ul a {
	padding: 0px 0px 0px 8px;
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 500;
	font-size: 14px;
	line-height: 140%;
	color: var(--color-white);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 12px 16px;
	gap: 8px;
}

/* ------------------- Search Form ------------------- */
.search-form{
	padding: 12px 16px;
	gap: 8px;
	width: 280px;
	height: 44px;
    display: flex;
}
.search-form input{
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 500;
	font-size: 14px;
	line-height: 140%;
	color: var(--color-white);
	background: transparent;
	border: none;
}
.search-form input::placeholder{
    color: var(--color-white);
    opacity: 0.5;
    font-family: var(--font-family);
    font-weight: 500;
	font-size: 14px;
	line-height: 140%;
	
}

/* ------------------- Header ------------------- */
#header{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: 0px 0px 0px 20px;
	width: calc(100% - 20px);
	height: 120px;
	background: var(--color-white);
	border-radius: 8px;
	margin: 0 auto;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
	margin-top: 0px;
	    z-index: 9999;
}
.main-nav ul{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px 40px 0px 0px;
	gap: 40px;
	width: 887px;
	height: 76px;
}
.main-nav ul li a{
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 400;
	font-size: 16px;
	line-height: 140%;
	color: var(--main-color-blue);
}
.hamburger-mobile-menu-open,
.hamburger-mobile-menu{
	display: none;
}
/* ------------------- Hero Section ------------------- */
.hero{
	width: 100%;
	height: 753px;
	margin: 0 auto;
	position: relative;
}
.hero .img-hero{
	position: absolute;
	width: 599px;
	height: 494px;
	right: 0;
	top: 259px;
	border: 1px solid #000000;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 12px 0px 0px 12px;
	object-fit: cover;
}
.hero .intersect{
	position: absolute;
	width: 91.43px;
	height: 226.49px;
	left: 0px;
	top: 246.99px;
}
.hero .hero-left{
	width: 1280px;
	    margin: 0 auto;
    padding-top: 206px;
}
.hero .hero-left h1{
	/* Headings desktop/Display */
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 500;
	font-size: 80px;
	line-height: 105%;
	margin-bottom: 48px;
	width: 737px;
	color: var(--main-color-blue);
}
.hero .hero-left h1 span{
	/* Bleu secondaire */
	color: var(--secondaire-color-blue);
}

.hero .hero-left p{
	width: 519px;
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 500;
	font-size: 16px;
	line-height: 140%;
	color: var(--main-color-blue);
	margin-bottom: 32px;
}

.hero .hero-decorative{
	    position: absolute;
    width: 586px;
    right: 0px;
    top: 0px;
    z-index: -1;
}


.hero .hero-button{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 14px 20px 14px 24px;
	gap: 12px;
	width: 213px;
	height: 48px;
	background: var(--secondaire-color-blue);
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-white);
	border-radius: 8px;
	position: relative;
    padding-right: 48px;
}

.hero .hero-button:after{
	content: '';
	background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2220%22%20viewBox%3D%220%200%2022%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21.7063%2010.7704L0.15858%200.499998L2.73144%204.73919L15.3983%2010.7616L21.7063%2010.7704Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M5.24749%2018.5003L21.7063%2010.7637L15.3953%2010.7637L5.24791%2015.5739%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2.73022%204.74502L0.161789%200.500183L0.161894%2010.7648L1.44611%2012.3671L2.73022%2010.7648L2.73022%204.74502Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
	width: 48px;
	height: 48px;
	background-color: var(--main-color-blue);
	position: absolute;
    right: 0;
    top: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 18px;
}

/* ------------------- Block Cartes ------------------- */
.block-cartes{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 0px 120px;
	gap: 32px;
	isolation: isolate;
	width: 100%;
	height: 584px;
	position: relative;
}
.block-cartes-item{
	    background: var(--color-white);
	    display: flex
;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    height: 328px !important;
    border-radius: 12px;
}
.block-cartes-item a{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 12px;
	width: 48px;
	height: 48px;
	background: none;
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-white);
	border-radius: 8px;
	position: relative;
    padding-right: 48px;
}

.block-cartes-item a span{
	opacity: 0;
}

.block-cartes-item:hover a span{
	opacity: 1;
}

.block-cartes-item:hover h3{
	color: var(--secondaire-color-blue);
}

.block-cartes-item:hover a{
	width: 206px;
	padding: 14px 20px 14px 24px;
	background: var(--secondaire-color-blue);
}

.block-cartes-item a:after{
	content: '';
	background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2223%22%20height%3D%2220%22%20viewBox%3D%220%200%2023%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M22.7063%2010.7704L1.15858%200.499998L3.73144%204.73919L16.3983%2010.7616L22.7063%2010.7704Z%22%20fill%3D%22%232E76B8%22%2F%3E%3Cpath%20d%3D%22M6.24749%2018.5L22.7063%2010.7634L16.3953%2010.7634L6.24791%2015.5736%22%20fill%3D%22%232E76B8%22%2F%3E%3Cpath%20d%3D%22M3.73022%204.74508L1.16179%200.500244L1.16189%2010.7648L2.44611%2012.3672L3.73022%2010.7648L3.73022%204.74508Z%22%20fill%3D%22%232E76B8%22%2F%3E%3C%2Fsvg%3E');
	width: 48px;
	height: 48px;
	background-color: var(--color-white);
	position: absolute;
    right: 0;
    top: 0;
	border-radius: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 18px;
}
.block-cartes-item:hover a:after{
	border-radius: 0px;
	border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* ------------------- Slick Carousel ------------------- */
.mySlick .slick-slide {
  margin: 0 12px; /* 10px gap on left and right */
}

.mySlick {
  margin: 0 -12px; /* negative margin to compensate for outer edges */
}
.mySlick .slick-slide {
    overflow: hidden;
}

/* ------------------- Block Cartes Headers ------------------- */
.block-cartes-header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0px;
	gap: 947px;
	width: 1280px;
	height: 56px;
	margin: 0 auto;
}
.block-cartes h2{
	width: 209px;
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 600;
	font-size: 42px;
	line-height: 110%;
	color: var(--main-color-blue);
}
.block-cartes h2 span{
	color: var(--secondaire-color-blue);
}
.block-cartes h3{
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	padding: 24px;
	gap: 10px;
	    width: 300px;
	height: 106px;
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 500;
	font-size: 24px;
	line-height: 120%;
	color: var(--main-color-blue);
}
.block-cartes-item-bg{
	height: 222px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 16px;
	gap: 10px;
	border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* ------------------- Owl Carousel Controls ------------------- */
.owl-carousel-controls{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	gap: 12px;
	width: 124px;
	height: 56px;
}
.owl-carousel-controls button{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 16px;
	gap: 10px;
	width: 56px;
	height: 56px;
	background: var(--main-color-blue);
	border-radius: 50px;
}
.mySlick {
    width: calc(100% - 1px);
}

/* ------------------- Block FAQs ------------------- */
.block-faqs{
	width: 100%;
	height: 762px;
	background: var(--color-white);
	padding: 120px 0px 0px;
	position: relative;
}
.block-faqs-container{
	width: 1280px;
	margin: 0 auto;
	display: flex;
	gap: 132px;
	position: relative;
}
.block-faqs-container a{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 14px 20px 14px 24px;
	gap: 12px;
	width: 232px;
	height: 48px;
	background: var(--secondaire-color-blue);
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-white);
	border-radius: 8px;
	position: relative;
    padding-right: 48px;
}

.block-faqs-container a:after{
	content: '';
	background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2220%22%20viewBox%3D%220%200%2022%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21.7063%2010.7704L0.15858%200.499998L2.73144%204.73919L15.3983%2010.7616L21.7063%2010.7704Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M5.24749%2018.5003L21.7063%2010.7637L15.3953%2010.7637L5.24791%2015.5739%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2.73022%204.74502L0.161789%200.500183L0.161894%2010.7648L1.44611%2012.3671L2.73022%2010.7648L2.73022%204.74502Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
	width: 48px;
	height: 48px;
	background-color: var(--main-color-blue);
	position: absolute;
    right: 0;
    top: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 18px;
}
.bg-cartes-slider{
	    position: absolute;
	    width: 1360px;
	    height: 50px;
	    right: 0px;
	    top: 439px;
	    z-index: -1;
}

/* ------------------- Block Cartes Columns ------------------- */
.block-cartes-col1{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	gap: 48px;
	width: 411px;
}
.block-cartes-col2{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	gap: 8px;
	width: 737px;
}
.block-cartes-col1 h2{
	width: 411px;
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 600;
	font-size: 42px;
	line-height: 110%;
}
.block-cartes-col1 h2 span{
	color: var(--secondaire-color-blue);
	display: block;
}
.block-cartes-col1 p{
	width: 411px;
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 500;
	font-size: 14px;
	line-height: 140%;
	color: var(--main-color-blue);
}

/* ------------------- SVG Decorations ------------------- */
.svg-decoration-faqs{
	position: absolute;

	left: 0px;
	bottom: 0px;
}

/* ------------------- Accordion ------------------- */
.accordion {
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: 737px;
}

.accordion .item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
	
	width: 737px;
	background: #EDF3F6;
	border-bottom: 1px solid #EDF3F6;
	border-radius: 12px;
}

.accordion button {
  display: flex
;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    border: none;
    cursor: pointer;
    gap: 20px;
}

.accordion button h3 {
  margin: 0;
  font-family: var(--font-family);
  font-style: var(--font-style);
  font-weight: 600;
  font-size: 18px;
  line-height: 120%;
  color: var(--main-color-blue);
  width: calc(100% - 68px);
      text-align: left;
}

.accordion .icon{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 12px;
	gap: 10px;
	width: 48px;
	height: 48px;
	background: var(--main-color-blue);
	border-radius: 50px;
	transform: rotate(180deg);
	min-width: 48px;
}

.accordion .block-faqs-cat{
	display: flex;
	flex-direction: row;
	    align-items: center;
	padding: 0px;
	height: 28px;
	background: var(--color-white);
	border-radius: 8px;
}

.accordion .block-faqs-cat-texte{
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 500;
	font-size: 14px;
	line-height: 140%;
	color: var(--color-white);
	padding: 4px 8px;
	    white-space: nowrap;
}

.accordion .block-faqs-cat-icon{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 8px;
	gap: 10px;
	width: 27px;
	height: 28px;
	border-width: 1px 0px 1px 1px;
	border-style: solid;
	border-radius: 8px 0px 0px 8px;
	background: var(--color-white);
}

.accordion .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion .content p {
	width: auto;
	font-family: var(--font-family);
	font-style: var(--font-style);
	font-weight: 500;
	font-size: 14px;
	line-height: 140%;
	color: var(--main-color-blue);
}

.accordion .icon {
  transition: transform 0.3s;
}

.accordion .active .icon {
  transform: rotate(180deg);
}

.accordion .active .content {
  max-height: 500px; /* adjust to content */
  padding: 16px 0 0;
}

/* ------------------- FAQ Image ------------------- */
.img-faq{
	position: absolute;
	width: 599px;
	height: 762px;
	right: 0px;
	top: 0px;
	    object-fit: cover;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  #header {
	height: auto;
	padding: 0 0 10px;
	gap: 10px;
  }
  .hamburger-mobile-menu{
	padding-right: 10px;  
  }
  .hero .hero-left {
    width: 100%;
  }
  .hero .hero-left h1 {
	font-size: 28px;
    line-height: 130%;
	margin-bottom: 16px;
	width: 100%;
  }
  .hero .hero-left  p{
	font-size: 14px;
	line-height: 150%;
  }
  .block-cartes-header h2{
	font-size: 22px;
	line-height: 125%;
  }
  .block-cartes-col1 h2 {
	width: 100%;
    font-size: 22px;
    line-height: 125%;
  }
  .block-cartes {
    padding: 32px 0 80px;
  }
  .block-cartes h3 {
    padding: 16px;
    gap: 8px;
    height: 80px;
    font-size: 20px;
  }
  .block-cartes-col1 {
    gap: 28px;
  }
  .block-cartes-col1 h2 span {
    display: inline;
  }
  .owl-carousel-controls button {
    width: 40px;
    height: 40px;
    padding: 8px;
    gap: 6px;
  }
  .hero .hero-decorative {
	width: 200px;
    height: 335px;
  }
	.block-cartes-item-bg{
	height: 247px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 16px;
	gap: 10px;
	border-radius: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

  .hero .img-hero {
    height: auto;
    display: block;
    position: relative;
    top: auto;
    left: auto;
    padding-top: 0;
	border-radius: 12px;
  }
  .hero .hero-left{
	padding-top: 0;
	z-index: 1;
  }
  .block-cartes-header {
	padding: 0 20px;
  }
  .block-cartes-col1 h2,
  .main-nav,
  .top-bar,
  .block-cartes-col1 p,
  .accordion .item,
  .accordion,
  .hero .hero-left p {
    width: 100%;
  }
  .block-cartes-header {
	gap: 0px;
	width: 100%;
  }
  .block-faqs-container {
	width: 100%;
	gap: 40px;
	flex-direction: column;
  }
  .block-cartes-col1,
  .block-cartes-col2 {
    width: 100%;
  }
  #header {
	justify-content: space-evenly;
  }
  .hamburger-mobile-menu.open .hamburger-mobile-menu-close,
  .main-nav,
  .img-faq{
    display: none;
  }
  .accordion button {
	flex-direction: row;
    flex-wrap: wrap;
  }
  .block-faqs {
    height: auto;
	padding: 40px 20px;
  }
  .hero {
	display: flex;
    flex-direction: column;
    padding: 150px 20px 0;
	height: auto;
	gap: 20px;
  }
  .hero .intersect {
	width: 40px;
    height: 100px;
    top: 360px;
  }
  .hamburger-mobile-menu{
	display: block;
  }
  .top-bar ul a {
	gap: 8px;
    font-size: 9px;
  }
  .search-form {
	width: auto;
  }
  .search-form input {
	display: none;
  }
  .top-bar ul {
	justify-content: space-evenly;
	width: auto;
  }
  .top-bar {
	justify-content: space-between;
  }
  .main-nav.menu-open{
	display: flex;
    align-items: center;
    position: absolute;
    top: 100%;
    height: calc(100vh - 100px);
    background-color: #fff;
  }
  .main-nav.menu-open ul {
	flex-direction: column;
    width: 100%;
    height: auto;
  }
  .hamburger-mobile-menu.open .hamburger-mobile-menu-open{
	display: block;
  }
  .bg-cartes-slider{
	  /* top: 400px; */
	 }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* CSS rules for tablets */
    .hero .img-hero{
		width: 100%;
		border-radius: 12px;
		        margin-bottom: 20px;
	}
	.search-form input{
        display: flex;
    }
	.top-bar{
		display: flex;
		align-items: center;
		width: 718px;
		height: 44px;
		background: var(--main-color-blue);
		border-radius: 0px 8px;
	}
	.top-bar ul {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-start;
	    width: 430px;
	}
	.top-bar ul a {
		padding: 0px 0px 0px 8px;
		font-family: var(--font-family);
		font-style: var(--font-style);
		font-weight: 500;
		font-size: 14px;
		line-height: 140%;
		color: var(--color-white);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 12px 16px;
		gap: 8px;
	}

	/* ------------------- Search Form ------------------- */
	.search-form{
		padding: 12px 16px;
		gap: 8px;
		width: 280px;
		height: 44px;
		display: flex;
	}
	.search-form input{
		font-family: var(--font-family);
		font-style: var(--font-style);
		font-weight: 500;
		font-size: 14px;
		line-height: 140%;
		color: var(--color-white);
		background: transparent;
		border: none;
	}
	.search-form input::placeholder{
		color: var(--color-white);
		opacity: 0.5;
		font-family: var(--font-family);
		font-weight: 500;
		font-size: 14px;
		line-height: 140%;
	
	}
	.hero .hero-left h1 {
        font-size: 48px;
        line-height: 120%;
        margin-bottom: 32px;
        width: 90%;
		max-width: 600px;
    }
	.hero .hero-left p{
		width: 90%;
		max-width: 600px;
		font-size: 18px;
		line-height: 145%;
		margin-bottom: 32px;
	}
	.block-cartes h2 {
        width: 70%;
        max-width: 300px;
        font-size: 32px;
        line-height: 120%;
    }
	.block-cartes-col1 h2 {
        width: 90%;
        max-width: 350px;
        font-size: 32px; 
        line-height: 120%; 
    }
	.block-cartes-col1 h2 span{
        display: block;
    }
	.block-cartes-col1 p {
        width: 90%;
        max-width: 350px;
        font-size: 16px;
        line-height: 145%;
    }
	.block-cartes-col1, .block-cartes-col2 {
        width: 50%;
    }
	.block-faqs-container {
        width: 100%;
        gap: 40px;
        flex-direction: row;
    }
}