:root{

--navy:#1B2D6E;
--teal:#1B9B9B;
--warm:#F7F3EE;
--sand:#C8A97E;

}

body{
/* font-family:'Verdana',sans-serif; */
/* font-family: "Sofia", sans-serif; */
font-family: "Lora", sans-serif;
}

h1,h2,h3,h4,h5{
font-family:'Lora',serif;
/* font-family:Helvetica,serif; */
color:var(--navy);
}

.btn-primary{
/* background:var(--navy); */
background: #002366; 
/* border:none; */
border-color: #002366;     
}

.btn-primary:hover{
background:#002366;
/* background-color: #001a4d;
border-color: #001a4d; */
}

/* ── ALL ── */
.sectionbckgrd1{
  position:absolute;
  right:-60px;
  top:-50px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(27,155,155,0.08);
  pointer-events:none;
}
.sectionbckgrd2{
  position:absolute;
  right:80px;
  bottom:-80px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(200,169,126,0.12);
  pointer-events:none;
}
.sectionbckgrd3{
  position:absolute;
  left:-40px;
  bottom:20px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(27,45,110,0.05);
  pointer-events:none;
}
.soustitre{
  font-family:Helvetica,serif; 
  font-size: 16px;
}
.nav-link.active {
  color: #002366 !important;   /* couleur personnalisée */
  font-weight: bold;           /* texte en gras */
  border-bottom: 2px solid #002366; /* soulignement stylisé */
}

/* ── HOME ── */
.sectionbckgrd{
  padding:110px 48px 80px;
  background: #F7F3EE;
  position:relative;
  overflow:hidden;
  /*min-height:100vh;*/
  isolation:isolate;
}
.sectionbckgrd .bubble-icon {
  position: absolute;
  top: 160px;
  right: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(27, 155, 155, 0.18);
  color: #1B9B9B;
  border: 1px solid rgba(27, 155, 155, 0.35);
  box-shadow: 0 12px 24px rgba(27, 155, 155, 0.12);
  font-size: 1.4rem;
  z-index: 1;
}

.sectionbckgrd .bubble-icon i.bi {
  line-height: 1;
}

.bubble-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.bubble{
  position:absolute;
  display:block;
  border-radius:999px;
  filter: blur(1px);
  opacity:0;
  animation: home-bubble-drift 10s ease-in-out infinite;
  will-change: transform, opacity;
}
.bubble::before{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:inherit;
  background:rgba(255,255,255,0.32);
  filter:blur(4px);
}
.bubble-1{
  width:110px;
  height:110px;
  left:8%;
  top:10%;
  background:rgba(43, 163, 243, 0.42);
  animation-delay:-2s;
}
.bubble-2{
  width:80px;
  height:80px;
  left:20%;
  bottom:15%;
  background:rgba(20, 224, 95, 0.38);
  animation-delay:-5s;
}
.bubble-3{
  width:135px;
  height:135px;
  right:10%;
  top:18%;
  background:rgba(56, 168, 255, 0.35);
  animation-delay:-8s;
}
.bubble-4{
  width:70px;
  height:70px;
  right:24%;
  bottom:24%;
  background:rgba(90, 214, 145, 0.34);
  animation-delay:-11s;
}
.bubble-5{
  width:95px;
  height:95px;
  left:48%;
  bottom:8%;
  background:rgba(72, 191, 255, 0.31);
  animation-delay:-13s;
}
@keyframes home-bubble-drift {
  0%, 50% {
    opacity:0.75;
    transform:translate3d(0, 0, 0) scale(1);
  }
  51%, 100% {
    opacity:0;
    transform:translate3d(24px, -16px, 0) scale(0.92);
  }
}
.container,
.homeline1{
  position:relative;
  z-index:2;
}
.homeline1{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 45px;
}
.homeline1exp{
  font-size: 14px; 
  letter-spacing: 1px;
  padding: 8px 20px;
  border-radius: 28px;
  background: rgba(27,155,155,0.08); 
  border: 1px solid #EDE8E1;
  color: #1B2D6E; 
  display: flex; 
  align-items: center; 
  gap: 6px;
}
.titreline{
  font-size: 10px; 
  letter-spacing: 3px; 
  color: #1B9B9B; 
  display: block;
}
.titrelarge{
  font-size:58px; 
  color: #002366; 
  font-weight:400px;
  font-family: Times,sans-serif; 
  line-height: 1;
}

/* ── ABOUT ── */
.sectionbckgrdabout{
  padding:120px 20px 20px;
  position:relative;
  overflow:hidden;
  /* height:600px; */
}
.sectionbckgrdlargeabout{
  padding:25px 20px 20px;
  background: #F7F3EE;
  position:relative;
  overflow:hidden;
}
.soustitreabout{
  font-family:'Lora',serif; 
  font-size: 14px;
  text-align: justify;
  line-height: 1.5;
}
.scoreabout{
  font-size:22px; 
  color: #002366; 
  font-weight:100px;
  font-family: Times,sans-serif; 
}
.scoretextabout{
  font-size:12px; 
  color: gray; 
  font-weight:50px;
  font-family: Times,sans-serif; 
}
.col .p-3:hover {
  border-color: var(--teal); transform: translateY(-2px);
}

/* ── EXP ── */
.expbckgrdlarge{
  padding:20px;
  background: #F7F3EE;
  position:relative;
  overflow:hidden;
  /* height:600px; */
}

/* ── SERVICES ── */
.sectionbckgrdlarge{
  padding:120px 20px 20px;
  background: #F7F3EE;
  position:relative;
  overflow:hidden;
  /* height:600px; */
}
.titrelargeserv{
  font-size:40px; 
  color: #002366; 
  font-weight:200px;
  font-family: Times,sans-serif; 
  line-height: 1;
}
/* .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
} */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}
.card {
  background: white; border: 1px solid #F7F3EE;
  border-radius: 20px; padding: 26px 22px;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--teal); transform: translateY(-2px); }
.card-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--warm); display: flex; align-items: center;
  justify-content: center; margin-bottom: 16px;
}
.card h3 {
  font-family: 'Times', serif; font-size: 16px;
  font-weight: 400; color: var(--navy); margin-bottom: 8px;
}
.card p { font-size: 12px; color: black; line-height: 1.7; font-family: 'monospace';}

.formations-card {
  background-color: #F7F3EE;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(8, 2, 2, 0.1);
}

@media (max-width: 768px) {
  .sectionbckgrdlarge { padding: 80px 18px 24px; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: 20px; }
}

/* ── CONTACT ── */
.contact-hero-text {
  max-width: 620px;
  margin-top: 16px;
  color: #343a40;
}

.contact-section {
  padding: 56px 20px 72px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 28px;
  align-items: start; 
  background: inherit;
}

.contact-form,
.contact-info {  
  border: 1px solid inherit;
  border-radius: 8px;
  padding: 28px;
  background: inherit;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: inherit;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #EDE8E1;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  outline: none;
  background: inherit;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(27,155,155,0.12);
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: inherit;
}

.contact-intro {
  margin: 0 0 4px;
  color: #343a40;
  line-height: 1.7;
  font-size: 14px;
}

.contact-item {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #1f2933;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.contact-item a {
  color: inherit;
  text-decoration: none;
}

.contact-item a:hover {
  color: var(--teal);
}

.contact-item-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  background: var(--warm);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-form,
  .contact-info {
    padding: 22px;
  }
}