html{
   width: 100%;
   min-height: 100dvh;
}

body{
   font-family: 'Poppins', sans-serif;
   background-color: white ;
   padding: 0;
   margin: 0;
   min-height: 100dvh;
}

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

a:hover{
   color: var(--color-F2A45C);
}

ul{
   margin-bottom: 0;
}

ul li{
   margin-bottom: .3rem;
}

ul.arrow li::before{
  content: "\f054";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   color: var(--color-EF7F1A);margin-right: .2rem !important;
}

img{
   width: 100%;
}

/*HR*/
.title-hr{
   height: 3px! important; 
   background-color: var( --color-EF7F1A);
   opacity: 0;
   max-width: 120px;
}

.title-hr-composed{
   height: 10px! important; 
   width: 50px;
}


.cursor-pointer{
   cursor: pointer;
}

.shadow-text{
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.bg-filter{
   width: 100%;
   height: 100%;
   background-color: #0000004d;
   position: absolute;
   top: 0;
   left: 0;
}

@media (min-width: 576px) and (max-width: 991px) {
   .container {
      max-width: 720px;
   }
}


/* PADDNG*/
.p-40{
   padding: 40px 80px;
}

.p-80{
   padding: 80px 80px 40px 80px;
}

@media screen and (max-width: 767px) {
   .container.p-80 {
      padding: 30px 20px;
   }

   .container.p-40 {
      padding: 30px 20px;
   }
}

/* HEADER */
header{
   position: sticky;
   top: 0;
   z-index: 100;
}

.heroe{
   position: absolute; 
   z-index: 100;
   color: white;
   margin-left: 10%;
   top: 50%;
   transform: translateY(-50%);
}

.heroe .heroe-row{
   gap: 35px;
}
.heroe .heroe-presentation{
   max-width: 500px;
}
@media screen and (max-width: 767px) {
   .heroe{
      margin-left: 5%;
   }

   .heroe .heroe-row {
      gap: 20px;
   }
}


/* LOGO */
.logo{
   margin-left: 10%;
}

.logo img{
   max-width: 100px;
}

@media screen and (max-width: 1460px) { 
   .logo{
      margin-left: 0;
   }
}

/* FORME ELLIPTIC */
.background-elliptic{
   background: var(--color-EF7F1A);
   clip-path: ellipse(80% 70% at 100% 40%);
   position: absolute;
   width: 1100px;
   height: 200%;
   padding: 0;
   margin: 0;
   top: 0px;
   right: 20px;
   z-index: 1000;   
}

.main-elliptic{
   background: white;
   clip-path: ellipse(80% 70% at 100% 40%);
   position: absolute;
   width: 1100px;
   height: 200%;
   padding: 0;
   margin: 0;
   top: 0px;
   z-index: 1001;
   right: 0; 
}

/* FOOTER */
footer{
   background-color: var(--color-23436A); 
   height: auto;
   color: white;
   line-height: 2;
}


footer li i {
   color: var(--color-EF7F1A);
}

.container-footer {
   max-width: 1200px;
   margin: auto;
}




/* BREADCRUMB */
.breadcrumb-item{
   text-transform: capitalize;
   color: var(--color-2E5580);
}

.breadcrumb-item:last-child{
   font-weight: bold;
}

.breadcrumb-item+.breadcrumb-item::before {
   content: "\f054";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   color: inherit;
   font-size: 0.688em;
   float: none;
}

/*CARD*/
.card{
   box-shadow: none;
   -webkit-box-shadow: none;
   border: none;
   border-radius: 0;
   border-top: 5px solid var(--color-2E5580);
   opacity: 0;
}

.brand-card-row{
   gap: 20px;
}
   
.brand-card{
   background-color: white;
   box-shadow: 0 2px 8px rgba(31, 42, 55, 0.08);
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.brand-card-content{
   padding: 20px;
}

.brand-card:hover {
   box-shadow: 0 14px 28px rgba(31, 58, 95, 0.18); 
   transform: translateY(-6px) rotate(-1.5deg);
}

.brand-card img{
   width: 124px;
}

.brand-card-footer{padding: 10px;
  background-color: var(--color-23436A);
  color: white;
}

@media (max-width: 767px) {
   .brand-card img{
      width: 62px;
   }
}

/* PAGE */
.bg-page{
   background-color: var(--color-F4F5F7);
}

.heroe-page{
   background: repeating-linear-gradient(135deg,
      #C3BEB6 0 22px,
      #B9B4AC 22px 44px);
   min-height: 250px;
   display: flex;
   align-items: center;
}
.heroe-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(31, 52, 82, 0.86) 0%,
      rgba(31, 52, 82, 0.50) 70%,
      rgba(31, 52, 82, 0.15) 100%);
}
@media screen and (max-width: 767px) {
   .heroe-page{
      min-height: 180px;
   }
}

/* BLOCS */
.page-bloc{
   background-color: var(--color-2E5580);
}

.page-bloc--secondary{
   background-color: white;
}


.heroe {
  text-align: left;
}

/* TITRES PRINCIPAUX DU SITE */


/* BOUTTON DE SCROLL */
#btnScroll {
   position: fixed;
   bottom: 40px;
   right: 40px;
   width: 50px;
   height: 50px;
   background-color: var(--color-2E5580);
   color: #fff;
   border: none;
   border-radius: 50%; 
   box-shadow: 0 8px 20px rgba(0,0,0,0.3);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
   z-index: 100;
}

#btnScroll:hover {
   background-color: var(--color-EF7F1A);
   transform: translateY(-4px);  
   cursor: pointer;
}

#btnScroll i {
   font-size: 1.5rem;
}

/* SECTIONS */
section{
   border-bottom: 1px solid var(--color-F4F5F7);
}

section.normal{
   background-color: white;
   position: relative;
}

section.secondary{
   background-color: #F4F5F7
}

.section-intro{
   margin-left: 10%;
}

/* STRUCTURE SECTION  */
section hr{
   height: 2px! important; 
   background-color: rgba(245, 132, 0, 1);
}


.section-title {
   display: inline-block;
}

.cv-date{
   border-top: 1px solid var(--color-F4F5F7);
   border-bottom: 1px solid  var(--color-F4F5F7);
   padding: 20px 0;
}

@media screen and (max-width: 767px) {
   body, .form-control {
      font-size: 0.8em;
   }
}