/* ========= Design system ========= */
:root{
  --bg:#3A4E60;
  --accent:#36A1F2;
  --link:#268CFF;
  --text:#FFFFFF;
  --muted:#D7E2EB;
  --card-bg:rgba(255,255,255,.05);
  --card-border:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none}
a:hover{ text-decoration:underline }
.container{width:min(1100px,92%);margin-inline:auto;padding:clamp(16px,2vw,24px) 0}

/* ========= Header (fixe, blanc) ========= */
.site-header{
  position:fixed; top:0; width:100%; z-index:100;
  background:rgba(255,255,255,0.98);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 0; /* hauteur compacte */
}
.brand{ display:flex; align-items:center; gap:42px }   /* espace logo ⇄ slogan */
.logo{ height:44px; width:auto }

/* Slogan 3 lignes avec points bleus alignés */
.brand-slogan{
  display:inline-block;
  line-height:1.02;           /* interligne très compact */
  font-size:.98rem;
  font-weight:700;
  color:#1a2b38;              /* texte foncé dans header blanc */
}
.brand-slogan span{ display:inline-block; vertical-align:middle }
.brand-slogan .dot{
  color:#268CFF;
  font-weight:800;
  font-size:1.8em;            /* ~2× la taille du texte */
  line-height:1;
  vertical-align:baseline;    /* aligné au mot */
  transform:translateY(-0.08em);
  margin-left:3px;
}

/* Navigation en boutons arrondis */
.main-nav a,
.btn-cta{
  color:#1a2b38;
  margin-left:16px;
  padding:6px 14px;           /* padding vertical réduit */
  border:1px solid transparent;
  border-radius:18px;
  font-weight:500;
  text-decoration:none;
  transition:background .2s, color .2s, transform .15s, border-color .2s;
}
.main-nav a:hover,
.btn-cta:hover{
  background:#268CFF; color:#fff; border-color:#268CFF;
  transform:translateY(-1px);
}
.btn-cta{ border:1px solid #268CFF; color:#268CFF; font-weight:600 }
.btn-cta:hover{ background:#268CFF; color:#fff }

/* ========= Hero (fond « vague ») ========= */
.hero{
  padding:140px 0 80px;       /* marge haute pour header fixe */
  text-align:center;
  background:url('assets/bg-hero.svg') no-repeat center/cover;
}
.hero h1{ font-size:clamp(28px,4vw,44px); line-height:1.2; margin:0 0 12px }
.hero p{ color:var(--muted); max-width:780px; margin:0 auto 24px }
.btn{ display:inline-block; padding:12px 20px; border-radius:10px; border:1px solid rgba(255,255,255,.25); color:var(--text) }
.btn-primary{ background:var(--accent); border:none; color:#0b2233 }
.btn-primary:hover{ background:#57b4f6 }

/* ========= Sections génériques ========= */
section{ padding:56px 0; margin-top:0 }
h2{ font-size:clamp(22px,3vw,32px); margin:0 0 20px }

/* Point bleu après chaque titre de section */
section > .container > h2{
  position:relative; display:inline-block; padding-right:.8rem;
}
/* Point bleu après chaque titre de section */
section > .container > h2::after {
  content: "";
  display: inline-block;
  width: 0.8rem;      /* largeur augmentée */
  height: 0.8rem;     /* hauteur augmentée */
  margin-left: 0.4rem;
  border-radius: 50%;
  background: #268CFF;
  vertical-align: middle;  /* aligne parfaitement sur le texte */
  transform: translateY(-0.08em);
}

/* Grilles / cartes */
.cards{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:10px }
.card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:18px }
.icon{ width:48px; height:48px; margin-bottom:6px }
.grid-2{ display:grid; gap:18px; grid-template-columns:1fr }
.bullets{ padding-left:18px; margin:0 }
.bullets li{ margin:8px 0 }

/* ========= Processus 4 étapes ========= */
.steps{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:6px }
.step-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.badge{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
        border-radius:10px; background:var(--accent); color:#0b2233; font-weight:700 }
.step .icon{ width:28px; height:28px; color:var(--accent) }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr) } }

/* ========= Section explication du slogan ========= */
#slogan-explication{ position:relative }
#slogan-explication .slogan-wrap{
  position:relative; padding:56px 0 40px;
  background:linear-gradient(180deg, rgba(58,74,90,0) 0%, rgba(52,74,90,0.35) 100%);
}
#slogan-explication .slogan-wave{
  position:absolute; inset:auto 0 0 0; width:100%; height:180px; display:block;
}
.slogan-inner{ position:relative }
.slogan-title{
  text-align:center; margin:0 0 28px; font-weight:800; color:#fff; line-height:1.15;
}
.slogan-title .s-word{ display:inline-flex; align-items:center; font-size:clamp(20px,2.4vw,30px); margin:0 .6rem }
.slogan-title .s-sep{ display:inline-block; width:18px }
.s-dot{ display:inline-block; width:.6em; height:.6em; border-radius:50%; background:#268CFF; margin-left:.35em; vertical-align:baseline; transform:translateY(-.06em) }
.s-grid{ display:grid; grid-template-columns:1fr; gap:18px }
@media (min-width:900px){ .s-grid{ grid-template-columns:repeat(3,1fr) } }
.s-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:22px }
.s-card-title{ display:inline-flex; align-items:center; gap:.35rem; font-weight:800; font-size:1.1rem; color:#fff; margin:0 0 .6rem }
.s-card-title .s-dot{ width:.55em; height:.55em; margin-left:.2em; transform:translateY(-.05em) }
.s-card-lead{ margin:0 0 .7rem; color:var(--muted) }
.s-points{ display:flex; flex-direction:column; gap:.35rem }
.s-row{ color:#E8EEF5; font-size:.95rem; line-height:1.5 }

/* ========= Contact ========= */
#contact{ background:#435769; text-align:center }

/* ========= Footer ========= */
.site-footer{ border-top:1px solid rgba(255,255,255,.1); color:#d0d9e2; font-size:.9rem; text-align:center }

/* ========= Bouton retour haut ========= */
.back-to-top{
  position:fixed; right:18px; bottom:18px; z-index:200;
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#1a2b38; border:1px solid rgba(0,0,0,.12); text-decoration:none;
  font-size:22px; line-height:1; box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, background .2s ease;
}
.back-to-top:hover{ transform:translateY(-3px); background:#f4f6f8 }

/* ========= Fades ========= */
.fade{ opacity:0; transform:translateY(12px); transition:opacity .6s, transform .6s }
.fade.in{ opacity:1; transform:none }

/* ========= Responsive ========= */
@media (min-width:760px){
  .cards{ grid-template-columns:repeat(3,1fr) }
  .grid-2{  grid-template-columns:1.1fr .9fr }
}

/* ===== FAQ ===== */
#faq{ background:rgba(255,255,255,0.04); }
#faq h2{ margin-bottom:1.5rem; }
.faq-item{ margin-bottom:1.4rem; }
.faq-item h3{
  color:#fff;
  font-size:1.05rem;
  margin-bottom:.3rem;
}
.faq-item p{
  color:var(--muted);
  margin:0;
  line-height:1.6;
}

/* Témoignages */
#temoignages .testi-author{ color:#cbd7e2; font-size:.95rem; margin-top:.4rem }

/* Valeurs & vision */
#valeurs .card h3{ margin:0 0 .35rem; }

/* Outils = chips/badges */
.tool-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
.chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#e9f1f7; font-size:.92rem;
}

/* FAQ (tu as déjà une base) */
#faq{ background:rgba(255,255,255,0.04); }
#faq h2{ margin-bottom:1.5rem; }
.faq-item{ margin-bottom:1.4rem; }
.faq-item h3{ color:#fff; font-size:1.05rem; margin-bottom:.3rem; }
.faq-item p{ color:var(--muted); margin:0; line-height:1.6; }