/* RESET */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: Arial,sans-serif; line-height:1.6; background:#f0f8ff; color:#000; scroll-behavior:smooth;}

/* HEADER */
header {
  position: fixed; width:100%; top:0; left:0;
  background: linear-gradient(90deg,#1e3c72,#3a6ea5);
  box-shadow:0 2px 6px rgba(0,0,0,0.2); z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 50px;
}
header img.logo {height:70px;}
.navbar {display:flex; gap:25px;}
.navbar a {font-weight:600; color:#fff; text-decoration:none; transition:0.3s;}
.navbar a:hover {color:#ffdd57;}

/* HERO */
.hero {
  text-align:center;
  padding:200px 20px 80px 20px;
  background:linear-gradient(180deg,#3a6ea5,#1e3c72);
  color:#fff;
}
.hero h1 {
  font-size:3.5rem;
  margin-bottom:20px;
  opacity:0;
  transform:translateY(30px);
  transition:all 0.8s ease-out;
}
.hero p {
  font-size:1.2rem;
  max-width:700px;
  margin:auto;
  margin-bottom:30px;
  opacity:0;
  transform:translateY(30px);
  transition:all 0.8s ease-out;
}

/* BUTTONS */
.btn {
  padding:12px 28px;
  background:#1e3c72;
  color:#fff;
  border:none;
  border-radius:5px;
  cursor:pointer;
  font-weight:600;
  transition:0.3s;
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn:hover {background:#ffdd57; color:#000;}
.social-icon {width:20px; height:20px;}

/* SECTIONS */
section {padding:140px 20px 60px 20px;}
.container {max-width:1200px; margin:auto;}

/* FLEX CARDS */
.flex {display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.card {
  background:#e6f0fa;
  color:#000;
  padding:25px;
  flex:1 1 280px;
  text-align:center;
  border-radius:12px;
  transition:0.3s;
  opacity:0;
  transform:translateY(30px);
}
.card:hover {
  transform:translateY(-5px);
  box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
.hover-zoom {transition:transform 0.3s ease;}
.hover-zoom:hover {transform:scale(1.05);}

/* FORM */
form input, form textarea {
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border-radius:5px;
  border:1px solid #000;
  background:#fff;
  color:#000;
}
form input::placeholder, form textarea::placeholder {color:#666;}
form button {width:auto; display:block; margin:auto;}

/* FOOTER */
footer {
  background:linear-gradient(90deg,#1e3c72,#3a6ea5);
  text-align:center;
  padding:25px 0;
  color:#fff;
}

/* FLOATING CTA */
.floating-cta {
  position:fixed;
  bottom:20px; right:20px;
  background:#ffdd57;
  color:#000;
  padding:15px 25px;
  border-radius:50px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 5px 15px rgba(0,0,0,0.3);
  transition:0.3s;
  z-index:1001;
}
.floating-cta:hover {background:#1e3c72; color:#fff;}

/* CHIFFRES */
#chiffres .flex {gap:30px; justify-content:center; text-align:center;}
#chiffres .card h3 {font-size:2.5rem; color:#1e3c72;}
#chiffres .card p {margin-top:5px; font-weight:600;}

/* ANIMATION AU SCROLL */
.visible {opacity:1 !important; transform:translateY(0) !important;}

/* ============================= */
/* 🔥 SECTION HISTOIRE ANIMÉE 🔥 */
/* ============================= */
#histoire .fade-sequence p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#histoire .fade-sequence p.visible {opacity: 1; transform: translateY(0);}
#histoire .fade-sequence p:nth-child(1) {transition-delay: 0.1s;}
#histoire .fade-sequence p:nth-child(2) {transition-delay: 0.3s;}
#histoire .fade-sequence p:nth-child(3) {transition-delay: 0.5s;}
#histoire .fade-sequence p:nth-child(4) {transition-delay: 0.7s;}
#histoire p {margin-bottom: 1.2rem; line-height: 1.7; font-size: 1.05rem;}
#histoire strong {color: #1e3c72; display: inline-block; transform: scale(1); transition: transform 0.3s ease, color 0.3s ease;}
#histoire strong.visible {transform: scale(1.05);}
#histoire strong:hover {transform: scale(1.1); color: #ffdd57;}
#histoire a {color: #1e3c72; font-weight: 600; text-decoration: none; transition: color 0.3s ease;}
#histoire a:hover {color: #ffdd57; text-decoration: underline;}

/* SOCIAL PLUGINS */
.social-plugins {display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:50px;}
.fb-page-wrapper, .instagram-plugin-wrapper {flex:1 1 500px; max-width:500px;}
.fb-page-wrapper iframe, .instagram-plugin-wrapper iframe {border:none; overflow:hidden; width:100%; height:600px; border-radius:12px; transition:0.3s;}
.fb-page-wrapper iframe:hover, .instagram-plugin-wrapper iframe:hover {transform:scale(1);}

/* RESPONSIVE */
@media(max-width:1024px){
  .fb-page-wrapper, .instagram-plugin-wrapper {max-width:100%;}
  .fb-page-wrapper iframe, .instagram-plugin-wrapper iframe {height:500px;}
}
@media(max-width:768px){
  .flex {flex-direction:column;}
  header {flex-direction:column; gap:10px; padding:10px 20px;}
  .hero h1 {font-size:2.5rem;}
  .hero p {font-size:1rem;}
  #chiffres .flex {flex-direction:column; gap:20px;}
  .social-plugins {flex-direction:column; align-items:center;}
}