@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  /* ── Palette logo ── */
  --navy:       #242454;   /* Bleu indigo logo (vagues) */
  --navy2:      #1c1c42;   /* Variante plus sombre */
  --slate:      #3a4070;   /* Intermédiaire */
  --slate-lt:   #6b72a0;   /* Textes secondaires */
  --terra:      #24cca8;   /* Teal vif logo */
  --terra2:     #1aa08a;   /* Teal foncé hover */
  --sage:       #30c0b4;   /* Teal doux */
  --sage2:      #1e9688;
  --ivory:      #f6f7fb;   /* Fond très légèrement bleuté */
  --blanc:      #ffffff;
  --fond:       #eef0f8;
  --gris:       #8a8faa;
  --gris2:      #d8daea;
  --texte:      #1a1c35;

  /* Typographie */
  --font-titre: 'Playfair Display', serif;
  --font-body:  'Outfit', sans-serif;

  /* Ombres */
  --ombre:      0 4px 28px rgba(13, 31, 53, 0.08);
  --ombre2:     0 12px 48px rgba(13, 31, 53, 0.14);

  /* Transitions */
  --tr: 0.28s cubic-bezier(.4,0,.2,1);
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--ivory);
  color: var(--texte);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}
h1,h2,h3,h4 { font-family: var(--font-titre); font-weight: 700; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--fond); }
::-webkit-scrollbar-thumb { background: var(--terra); border-radius: 3px; }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  background: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gris2);
  padding: 4px 0;
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 2px 20px rgba(13,31,53,0.07);
}

.navbar-brand img { height: 80px; }

.nav-link {
  color: var(--texte) !important;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 7px 16px !important;
  border-radius: 6px;
  letter-spacing: 0.03em;
  transition: background var(--tr), color var(--tr);
}
.nav-link:hover,
.nav-link.active {
  background: rgba(196,123,90,0.10);
  color: var(--terra2) !important;
}

.btn-nav-contact {
  background: var(--navy);
  color: var(--blanc) !important;
  border-radius: 50px;
  padding: 9px 26px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background var(--tr), transform 0.2s;
  position: relative;
  overflow: hidden;
}
.btn-nav-contact::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--terra) 0%, transparent 70%);
  opacity:0;
  transition: opacity var(--tr);
}
.btn-nav-contact:hover {
  background: var(--navy2);
  color: var(--blanc) !important;
  transform: translateY(-1px);
}
.btn-nav-contact:hover::after { opacity:1; }

.navbar-toggler { border-color:var(--gris2); }
.navbar-toggler:focus { box-shadow:none; }

.dropdown-menu {
  border:1px solid var(--gris2);
  border-radius:10px;
  box-shadow: var(--ombre2);
  padding: 8px 0;
}
.dropdown-item {
  color: var(--texte);
  font-size: 14px;
  font-family: var(--font-body);
  padding: 9px 22px;
  transition: background var(--tr), color var(--tr);
}
.dropdown-item:hover {
  background: rgba(196,123,90,0.08);
  color: var(--terra2);
}

/* ===== MOBILE DROPDOWN ===== */
@media (max-width:991.98px) {
  .navbar-nav .dropdown-menu {
    display:block !important; position:static !important;
    background:transparent !important; border:none !important;
    box-shadow:none !important; padding:0 0 0 16px !important;
  }
  .navbar-nav .dropdown-toggle::after { display:none !important; }
}

/* =========================================================
   SECTIONS COMMUNES
   ========================================================= */
.section { padding: 96px 0; }
.section-blanc { background: var(--blanc); }
.section-fond  { background: var(--ivory); }
.section-dark  { background: var(--navy); }

.titre-section {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.15;
}
.titre-section span { color: var(--terra); }
.titre-section--light { color: var(--blanc); }
.titre-section--light span { color: var(--terra); }

.ligne-terra {
  width: 44px; height: 3px;
  background: linear-gradient(90deg, var(--terra), var(--sage));
  border-radius: 2px;
  margin-bottom: 22px;
}

.texte-gris { color: var(--slate-lt); }
.texte-light { color: rgba(255,255,255,0.65); }

.badge-section {
  display: inline-block;
  background: rgba(196,123,90,0.10);
  border: 1px solid rgba(196,123,90,0.30);
  color: var(--terra2);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 30px;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-weight: 500;
}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn-principal {
  background: var(--terra);
  color: var(--blanc);
  border: none;
  border-radius: 50px;
  padding: 13px 36px;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--tr);
  cursor: pointer;
}
.btn-principal:hover {
  background: var(--terra2);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(196,123,90,0.38);
  color: var(--blanc);
}

.btn-principal--dark {
  background: var(--navy);
}
.btn-principal--dark:hover {
  background: var(--navy2);
  box-shadow: 0 10px 28px rgba(13,31,53,0.30);
}

.btn-outline {
  border: 2px solid rgba(255,255,255,0.35);
  color: var(--blanc);
  background: transparent;
  border-radius: 50px;
  padding: 11px 34px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--tr);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.15);
  color: var(--blanc);
  transform: translateY(-2px);
}

.btn-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0a66c2;
  color: #fff;
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--tr);
}
.btn-linkedin:hover { background:#0858ab; color:#fff; transform:translateY(-1px); }

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.carousel,
.carousel-inner,
.carousel-item { height: 100vh; }

.carousel-item img {
  width:100%; 
  height: 100%;
  object-fit:cover; object-position:center;
}

.carousel-overlay {
  position:absolute; inset:0;
  background: linear-gradient(120deg,
    rgba(13,31,53,0.72) 0%,
    rgba(13,31,53,0.40) 60%,
    rgba(13,31,53,0.15) 100%);
}
.carousel-item {
  transition: transform 0.8s ease-in-out;
}
.hero-contenu {
  position:absolute; inset:0;
  display:flex; align-items:center;
  z-index:10;
  padding: 110px 0 80px;
}

.hero-badge {
  display:inline-block;
  background: rgba(196,123,90,0.18);
  border: 1px solid rgba(196,123,90,0.45);
  color: #e8a882;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:6px 20px;
  border-radius:30px;
  margin-bottom:24px;
  font-family: var(--font-body);
  font-weight:500;
}

.hero-titre {
  font-size: clamp(2.8rem, 5.5vw, 4.6rem);
  color: var(--blanc);
  line-height:1.08;
  margin-bottom:20px;
  font-weight:700;
}
.hero-titre span { color: var(--terra); }
.hero-titre em {
  font-style:italic;
  color: #e8c8b8;
}

.hero-sous-titre {
  font-size:17px;
  color:rgba(255,255,255,0.72);
  max-width:500px;
  margin-bottom:38px;
  font-weight:300;
  line-height:1.65;
}

.hero-stats {
  display:flex; gap:44px;
  margin-top:54px; flex-wrap:wrap;
}
.stat-nombre {
  font-family: var(--font-titre);
  font-size:2.6rem;
  color: var(--terra);
  line-height:1; font-weight:700;
}
.stat-label {
  font-size:11px;
  color:rgba(255,255,255,0.50);
  text-transform:uppercase;
  letter-spacing:0.10em;
  margin-top:3px;
}

.hero-tag {
  display:inline-block;
  background:rgba(196,123,90,0.18);
  border:1px solid rgba(196,123,90,0.40);
  color:#e8c8b8;
  font-size:12px;
  padding:5px 16px;
  border-radius:30px;
  letter-spacing:0.06em;
}

.hero-onde {
  position:absolute; bottom:-2px; left:0;
  width:100%; z-index:11; line-height:0;
}

.carousel-indicators { z-index:12; bottom:68px; }
.carousel-indicators button {
  width:28px; height:3px; border-radius:2px;
  border:none; background:rgba(255,255,255,0.35);
  transition:background var(--tr), width 0.3s;
  opacity:1;
}

.carousel-control-prev,
.carousel-control-next { z-index:20; width:60px; opacity:1; }
.carousel-control-prev-icon,
.carousel-control-next-icon { width:36px; height:36px; }

/* Slide 1 highlight */
.btn-principal--highlight {
  background: linear-gradient(135deg, var(--terra) 0%, #1aa08a 100%);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 8px 28px rgba(196,123,90,0.45);
  font-size:1rem; padding:14px 36px;
  font-weight:700; letter-spacing:0.04em;
}
.btn-principal--highlight:hover {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.40), 0 14px 36px rgba(196,123,90,0.60);
}

/* =========================================================
   BANDEAU CONFIANCE (logos clients)
   ========================================================= */
.trust-band {
  border-bottom: 1px solid var(--gris2);
  padding: 36px 0;
  overflow: hidden;
}
.trust-band-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gris);
  font-weight: 600;
  white-space: nowrap;
  padding-right: 48px;
  flex-shrink: 0;
  border-right: 2px solid var(--gris2);
}
.trust-track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: scrollLogos 30s linear infinite;
  white-space: nowrap;
   width: max-content;
}
.trust-track:hover { animation-play-state: paused; }

@keyframes scrollLogos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

.trust-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  border-left: 1px solid var(--gris2);
  flex-shrink: 0;
   min-width: auto;
}
.trust-logo-item:first-child { border-left: none; }

.trust-logo-item img {
  height: 80px;
  width: auto;
  max-width: none; 
  object-fit: contain;
  opacity: 1;
  transition: transform 0.3s ease;
}


.trust-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  max-width: 100%;
}

/* =========================================================
   À PROPOS
   ========================================================= */
.about-img-cadre {
  position:relative;
  height:480px; width:100%;
  padding:20px;
  background:var(--blanc);
  border-radius: 400px 400px 0 0;
  box-shadow:var(--ombre2);
}
.about-img-cadre::before {
  content:'';
  position:absolute;
  top:-12px; right:-12px;
  height:480px; width:100%;
  border:2px solid var(--terra);
  border-radius: 400px 400px 0 0;
  z-index:-1;
  opacity:0.28;
}
.about-img-cadre img {
  height:480px; width:100%;
  border-radius:400px 400px 0 0;

  object-fit:cover; 
  object-position:center top;
}

.tag-about {
  display:flex; align-items:center; gap:12px;
  background:var(--ivory);
  border-left:3px solid var(--terra);
  padding:12px 18px;
  border-radius:6px;
  margin-bottom:10px;
  font-size:14px; color:var(--texte);
  transition: box-shadow var(--tr);
}
.tag-about:hover { box-shadow:var(--ombre); }
.tag-about i { color:var(--terra); font-size:17px; }

/* =========================================================
   MANIFESTE
   ========================================================= */
.manifeste-section {
  background: var(--navy);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.manifeste-section::before {
  content:'';
  position:absolute; top:-80px; right:-80px;
  width:400px; height:400px; border-radius:50%;
  border:1px solid rgba(196,123,90,0.12);
}
.manifeste-section::after {
  content:'';
  position:absolute; bottom:-60px; left:-60px;
  width:260px; height:260px; border-radius:50%;
  border:1px solid rgba(122,158,142,0.15);
}

.manifeste-quote {
  font-family: var(--font-titre);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  color: var(--blanc);
  line-height: 1.5;
  font-style: italic;
  font-weight: 400;
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}
.manifeste-quote em { color: var(--terra); font-style:normal; font-weight:700; }
.manifeste-sous {
  text-align:center;
  color:rgba(255,255,255,0.55);
  font-size:15px;
  font-weight:300;
  max-width:520px;
  margin: 0 auto 44px;
}
.manifeste-divider {
  width:60px; height:2px;
  background:linear-gradient(90deg, var(--terra), var(--sage));
  margin:0 auto 44px;
}

/* =========================================================
   MÉTHODE ALIGN
   ========================================================= */
.align-grid {
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:0;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
}
@media(max-width:900px) {
  .align-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:500px) {
  .align-grid { grid-template-columns:1fr; }
}

.align-card {
  padding:44px 28px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,0.07);
  transition: background var(--tr);
  cursor:default;
}
.align-card:last-child { border-right:none; }
.align-card:hover { background:rgba(196,123,90,0.10); }

.align-lettre {
  font-family: var(--font-titre);
  font-size: 4rem;
  font-weight:700;
  line-height:1;
  margin-bottom:6px;
  background: linear-gradient(135deg, var(--terra), var(--sage));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.align-mot {
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.50);
  font-weight:500;
  margin-bottom:16px;
}
.align-desc {
  font-size:13px;
  color:rgba(255,255,255,0.60);
  line-height:1.6;
  font-weight:300;
}

/* =========================================================
   MISSION / VISION / VALEURS
   ========================================================= */
.mvv-card {
  background:var(--blanc);
  border-radius:18px;
  padding:42px 34px;
  height:100%;
  box-shadow:var(--ombre);
  border-top:4px solid transparent;
  transition:all var(--tr);
  position:relative; overflow:hidden;
}
.mvv-card.mission { border-top-color:var(--terra); }
.mvv-card.vision  { border-top-color:var(--slate ); }
.mvv-card.valeurs { border-top-color:var(--sage); }
.mvv-card:hover { transform:translateY(-6px); box-shadow:var(--ombre2); }

.mvv-icon {
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:22px;
}
.mission .mvv-icon { background:rgba(196,123,90,0.10); color:var(--terra2); }
.vision .mvv-icon { background:rgba(61,81,102,0.10);  color:var(--slate); }
.valeurs .mvv-icon { background:rgba(122,158,142,0.12); color:var(--sage2); }

.mvv-card h3 { font-size:1.65rem; color:var(--navy); margin-bottom:12px; }
.mvv-card p  { font-size:14px; color:var(--slate-lt); }

.valeur-item {
  display:flex; align-items:center; gap:10px;
  margin-bottom:8px; font-size:14px; color:var(--slate-lt);
}
.valeur-item::before {
  content:''; width:7px; height:7px;
  background:var(--terra); border-radius:50%; flex-shrink:0;
}

/* =========================================================
   SERVICES
   ========================================================= */
.card-service {
  background:var(--blanc);
  border:1px solid var(--gris2);
  border-radius:16px;
  padding:34px 28px;
  height:100%;
  transition:all var(--tr);
  position:relative;
}
.card-service::after {
  content:''; position:absolute;
  bottom:0; left:0;
  width:100%; height:3px;
  background:linear-gradient(90deg, var(--terra), var(--sage));
  border-radius:0 0 16px 16px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--tr);
}
.card-service:hover {
  border-color:rgba(196,123,90,0.28);
  transform:translateY(-6px);
  box-shadow:var(--ombre2);
}
.card-service:hover::after { transform:scaleX(1); }

.icone-service {
  width:52px; height:52px;
  background:rgba(196,123,90,0.09);
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--terra2);
  margin-bottom:22px;
}
.card-service h4 { font-size:1.3rem; color:var(--navy); margin-bottom:8px; }
.card-service p  { font-size:14px; color:var(--slate-lt); }

/* =========================================================
   À PROPOS SALMA
   ========================================================= */
.salma-section {
  background: var(--ivory);
  padding: 96px 0;
}
.salma-photo-wrap {
  position:relative;
}
.salma-photo-wrap img {
  width:100%; border-radius:16px;
  box-shadow:var(--ombre2);
  object-fit:cover;
  aspect-ratio:3/4;
}
.salma-badge-icf {
  position:absolute; bottom:24px; right:24px;
  background:var(--blanc);
  border:2px solid var(--terra);
  border-radius:50%;
  width:80px; height:80px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  box-shadow:var(--ombre2);
  text-align:center;
}
.salma-badge-icf span {
  font-family:var(--font-titre);
  font-size:16px; font-weight:700;
  color:var(--terra2); line-height:1;
}
.salma-badge-icf small {
  font-size:9px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--slate-lt);
  margin-top:2px;
}

.expertise-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blanc);
  border:1px solid var(--gris2);
  border-radius:50px;
  padding:8px 18px;
  font-size:13px; color:var(--texte);
  margin:4px;
  box-shadow:0 2px 8px rgba(13,31,53,0.06);
  transition:all var(--tr);
}
.expertise-pill:hover {
  border-color:var(--terra);
  background:rgba(196,123,90,0.06);
  transform:translateY(-2px);
}
.expertise-pill i { color:var(--terra); font-size:14px; }

.stat-expertise {
  text-align:center;
  padding:28px 20px;
  background:var(--blanc);
  border-radius:14px;
  box-shadow:var(--ombre);
  border-bottom:3px solid var(--terra);
}
.stat-expertise .nombre {
  font-family:var(--font-titre);
  font-size:3rem; font-weight:700;
  color:var(--terra); line-height:1;
}
.stat-expertise .label {
  font-size:12px; text-transform:uppercase;
  letter-spacing:0.10em; color:var(--slate-lt);
  margin-top:6px;
}

/* =========================================================
   APPROCHE (étapes)
   ========================================================= */
.etape {
  display:flex; gap:22px;
  margin-bottom:34px; align-items:flex-start;
}
.etape-num {
  font-family:var(--font-titre);
  font-size:3rem;
  color:rgba(196,123,90,0.22);
  line-height:1; min-width:52px;
  font-weight:700;
}
.etape-contenu h4 { font-size:1.1rem; color:var(--navy); margin-bottom:5px; }
.etape-contenu p  { font-size:14px; color:var(--slate-lt); }

/* =========================================================
   PAGE CONTACT HERO
   ========================================================= */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3550 100%);
  padding: 96px 0 70px;
  text-align:center;
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.04);
  top:-150px; right:-100px;
}
.page-hero::after {
  content:''; position:absolute;
  width:300px; height:300px; border-radius:50%;
  border:1px solid rgba(196,123,90,0.12);
  bottom:-80px; left:-60px;
}
.page-hero h1 {
  font-size:clamp(2.4rem,4.5vw,3.5rem);
  color:var(--blanc); margin-bottom:12px;
}
.page-hero h1 span { color:var(--terra); }
.page-hero p {
  font-size:16px;
  color:rgba(255,255,255,0.62);
  max-width:420px; margin:0 auto 22px;
  font-weight:300;
}
.hero-onde {
  position:absolute; bottom:-2px; left:0;
  width:100%; z-index:11; line-height:0;
}
.breadcrumb { background:none; padding:0; margin:0; justify-content:center; }
.breadcrumb-item { font-size:13px; color:rgba(255,255,255,0.40); }
.breadcrumb-item a { color:var(--terra); }
.breadcrumb-item.active { color:rgba(255,255,255,0.65); }
.breadcrumb-item + .breadcrumb-item::before { color:rgba(255,255,255,0.22); }

/* =========================================================
   PAGE CONTACT — FORMULAIRE
   ========================================================= */
.c-section {
  background: var(--ivory);
  padding: 72px 0;
}
.c-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:100%;
  margin:32px auto 0;
  padding:0 120px;
}
@media(max-width:1100px) { .c-grid { padding:0 40px; } }
@media(max-width:900px)  { .c-grid { grid-template-columns:1fr; } }

.c-card:first-child {
  background:transparent;
  padding:48px 44px;
  box-shadow:none;
}
.c-card:last-child {
  background:var(--blanc);
  padding:48px 44px;
  box-shadow:var(--ombre2);
  border-radius:16px;
}

.c-card-titre {
  font-family:var(--font-titre);
  font-size:2.5rem; color:var(--navy); margin-bottom:6px;
}
.c-card-titre span { color:var(--terra); }
.c-card-sous { font-size:16px; color:var(--slate-lt); margin-bottom:28px; line-height:1.6; }

.c-info { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.c-info-icone {
  width:42px; height:42px;
  background:rgba(196,123,90,0.10);
  display:flex; align-items:center; justify-content:center;
  color:var(--terra2); font-size:16px; flex-shrink:0;
  border-radius:10px;
  transition:background var(--tr), transform var(--tr);
}
.c-info:hover .c-info-icone {
  background:var(--terra); color:var(--blanc); transform:scale(1.08);
}
.c-info-label {
  font-size:11px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--slate-lt); margin-bottom:2px;
  font-weight:600;
}
.c-info-valeur { font-size:16px; color:var(--texte); margin:0; color:var(--terra2); }
.c-info-valeur a { color:var(--terra2); }

.c-hr { border:none; border-top:1px solid var(--gris2); margin:22px 0; }

.c-lien-reseau {
  width:85%; display:flex; align-items:center; gap:12px;
  padding:11px 16px; border:1px solid var(--gris2);
  border-radius:10px; background:var(--blanc);
  color:var(--texte); font-size:14px; margin-bottom:8px;
  transition:all var(--tr);
}
.c-lien-reseau:hover {
  border-color:var(--terra);
  background:rgba(196,123,90,0.04);
  color:var(--texte); transform:translateX(4px);
}
.c-lien-reseau i:first-child { font-size:16px; }

.c-form-titre {
  font-family:var(--font-titre);
  font-size:2.2rem; color:var(--navy); margin-bottom:4px;
}
.c-form-sous { font-size:14px; color:var(--slate-lt); margin-bottom:24px; }
.c-form-sous span { color:#c0392b; }

.c-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:500px) { .c-row { grid-template-columns:1fr; } }

.c-groupe { display:flex; flex-direction:column; margin-bottom:14px; }

.c-label {
  font-size:11px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--slate-lt);
  margin-bottom:7px; font-weight:600;
}
.c-label span { color:#c0392b; }

.c-input, .c-select, .c-textarea {
  background:var(--ivory);
  border:1px solid var(--gris2);
  color:var(--texte);
  padding:11px 16px;
  font-size:14px;
  font-family:var(--font-body);
  outline:none;
  transition:border-color var(--tr), box-shadow var(--tr), background var(--tr);
  width:100%; border-radius:8px;
  -webkit-appearance:none;
}
.c-input:focus, .c-select:focus, .c-textarea:focus {
  border-color:var(--terra);
  background:var(--blanc);
  box-shadow:0 0 0 3px rgba(196,123,90,0.12);
}
.c-input.erreur, .c-select.erreur, .c-textarea.erreur {
  border-color:#c0392b; background:#fff9f9;
}
.c-textarea { resize:none; height:140px; }

.c-erreur-msg {
  display:none; font-size:12px; color:#c0392b;
  margin-top:4px; align-items:center; gap:4px;
}
.c-erreur-msg.visible { display:flex; }

.c-btn {
  background:var(--terra);
  color:var(--blanc); border:none;
  padding:14px 44px;
  font-size:15px; font-family:var(--font-body);
  font-weight:600; letter-spacing:0.06em;
  cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:8px;
  transition:all var(--tr);
  border-radius:50px; margin:14px auto;
  width:auto;
}
.c-btn:hover {
  background:var(--terra2);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(196,123,90,0.35);
}
.c-btn:active { transform:translateY(0); }

.c-succes {
  text-align:center; padding:60px 20px;
}
.c-succes i {
  font-size:60px; color:var(--sage2);
  display:block; margin-bottom:18px;
}
.c-succes h3 {
  font-family:var(--font-titre);
  font-size:2rem; color:var(--navy); margin-bottom:10px;
}
.c-succes p { color:var(--slate-lt); font-size:15px; max-width:320px; margin:0 auto 28px; }

.c-btn-retour {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--terra); color:var(--blanc);
  padding:12px 32px; font-size:15px;
  font-weight:600; border-radius:50px;
  transition:all var(--tr);
}
.c-btn-retour:hover { background:var(--terra2); color:var(--blanc); transform:translateY(-2px); }

@media(max-width:767px) {
  .c-card:first-child, .c-card:last-child { padding:28px 20px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  background: var(--navy);
  color:rgba(255,255,255,0.70);
  padding:64px 0 28px;
}
.footer-logo img { height:80px; }
.footer-desc { font-size:14px; color:rgba(255,255,255,0.45); max-width:260px; line-height:1.65; }

.footer-titre {
  font-family:var(--font-body);
  font-size:11px; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--terra);
  margin-bottom:18px; font-weight:600;
}
.footer-lien {
  display:block; font-size:14px;
  color:rgba(255,255,255,0.50);
  margin-bottom:10px;
  transition:color var(--tr);
}
.footer-lien:hover { color:var(--terra); }

.footer-icf {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(196,123,90,0.30);
  border-radius:10px; padding:14px 18px;
  margin-top:12px;
}
.footer-icf-badge {
  width:40px; height:40px; border-radius:50%;
  background:var(--terra); display:flex;
  align-items:center; justify-content:center;
  font-family:var(--font-titre); font-size:12px;
  font-weight:700; color:var(--blanc); flex-shrink:0;
}
.footer-icf-text span {
  display:block; font-size:12px;
  font-weight:600; color:rgba(255,255,255,0.85);
}
.footer-icf-text small {
  font-size:11px; color:rgba(255,255,255,0.40);
  letter-spacing:0.08em;
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.07);
  margin-top:40px; padding-top:22px;
  text-align:center; font-size:13px;
  color:rgba(255,255,255,0.30);
}

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.whatsapp-float {
  position:fixed; bottom:32px; right:32px;
  width:58px; height:58px;
  background:linear-gradient(135deg,#25D366,#1ebe57);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:28px;
  box-shadow:0 4px 22px rgba(37,211,102,0.40);
  z-index:999;
  animation:floatWA 3s ease-in-out infinite;
  transition:transform var(--tr), box-shadow var(--tr);
}
@keyframes floatWA {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
.whatsapp-float:hover {
  transform:scale(1.12) !important;
  box-shadow:0 8px 32px rgba(37,211,102,0.55);
  animation:none;
}

/* =========================================================
   ANIMATIONS FADEIN
   ========================================================= */
.fadeIn {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.70s ease, transform 0.70s ease;
}
.fadeIn.visible { opacity:1; transform:translateY(0); }